diff --git a/.claude/rules/emcn-components.md b/.claude/rules/emcn-components.md
index 50e7684363f..cab88b47f67 100644
--- a/.claude/rules/emcn-components.md
+++ b/.claude/rules/emcn-components.md
@@ -20,7 +20,7 @@ The menu surface intentionally diverges from the pill: `dropdown-menu.tsx` items
 
 ## Component catalogue
 
-- **`Chip` / `ChipLink`** — the pill button (`<button>` / Next `<Link>`). Variants: `primary`, `destructive`, `border-shadow`, `border`; the bare chip is implicit (omit `variant`). `filled` is deliberately NOT a `Chip` variant — it is reserved for chip fields/triggers. For a selected/toggle chip use the `active` prop, never a variant. `leftIcon`/`rightIcon`, `active`, `fullWidth`. Chips carry **no outer margin** — space between them is the parent's `gap`. The old `mx-0.5` default and its `flush` opt-out are gone; do not reintroduce either, and never add a margin to a chip through `className`.
+- **`Chip` / `ChipLink`** — the pill button (`<button>` / Next `<Link>`). Variants: `primary`, `destructive`, `border-shadow`, `border`, `outline` (a true `--border` border, no shadow or hover fill); the bare chip is implicit (omit `variant`). `filled` is deliberately NOT a `Chip` variant — it is reserved for chip fields/triggers. For a selected/toggle chip use the `active` prop, never a variant. `leftIcon`/`rightIcon`, `active`, `fullWidth`. Chips carry **no outer margin** — space between them is the parent's `gap`. The old `mx-0.5` default and its `flush` opt-out are gone; do not reintroduce either, and never add a margin to a chip through `className`.
 - **`ChipInput`** — single-line text field. `icon`, `endAdornment`, `error`, `inputClassName` (inner `<input>`); `className` styles the chrome wrapper.
 - **`ChipCopyInput`** — the canonical view-only field: a read-only `ChipInput` at full opacity with a trailing copy-to-clipboard button. View-only is a display mode, not a disabled state — reach for it (or `ChipModalField type='copy'`) over a `disabled` (greyed) input for values the user cannot edit.
 - **`ChipTextarea`** — multi-line sibling. `error`, `resizable` (off by default), `viewOnly` (read-only at full opacity with the default cursor — the multi-line counterpart of `ChipCopyInput`).
diff --git a/apps/sim/app/(auth)/components/auth-shell.test.tsx b/apps/sim/app/(auth)/components/auth-shell.test.tsx
new file mode 100644
index 00000000000..2248773b9f6
--- /dev/null
+++ b/apps/sim/app/(auth)/components/auth-shell.test.tsx
@@ -0,0 +1,24 @@
+/** @vitest-environment node */
+import type { ReactNode } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { expect, it, vi } from 'vitest'
+import { AuthShell } from '@/app/(auth)/components/auth-shell'
+
+vi.mock('next/link', () => ({
+  default: ({ children }: { children: ReactNode }) => (
+    <a href='/' data-client-navigation>
+      {children}
+    </a>
+  ),
+}))
+vi.mock('@/app/_shell/desktop-title-bar', () => ({ DesktopTitleBarLane: () => null }))
+vi.mock('@/app/(landing)/components/navbar/components', () => ({
+  LogoMark: ({ children }: { children: ReactNode }) => <>{children}</>,
+  SimWordmark: () => 'Sim',
+}))
+
+it('returns home through a document link so route-specific theme defaults reinitialize', () => {
+  const html = renderToStaticMarkup(<AuthShell>Sign in</AuthShell>)
+  expect(html).toContain('href="/" aria-label="Sim home"')
+  expect(html).not.toContain('data-client-navigation')
+})
diff --git a/apps/sim/app/(auth)/components/auth-shell.tsx b/apps/sim/app/(auth)/components/auth-shell.tsx
index 36085dc52ad..d7107dfeb96 100644
--- a/apps/sim/app/(auth)/components/auth-shell.tsx
+++ b/apps/sim/app/(auth)/components/auth-shell.tsx
@@ -1,5 +1,4 @@
 import type { ReactNode } from 'react'
-import Link from 'next/link'
 import { DesktopTitleBarLane } from '@/app/_shell/desktop-title-bar'
 import { LogoMark, SimWordmark } from '@/app/(landing)/components/navbar/components'
 
@@ -19,6 +18,8 @@ interface AuthShellProps {
  * the canvas/`--text-primary` surface, and renders a logo-only header that reuses
  * the landing {@link LogoMark} + {@link SimWordmark} at the same nav gutters. The
  * single content column is centered and capped for a calm single-form layout.
+ * The home link starts a document navigation so the marketing theme default is
+ * initialized independently of auth's forced-light context.
  *
  * The shell also owns the macOS traffic-light lane, unconditionally — every surface that
  * wears it (the `(auth)` routes, the CLI auth handoff, the invite pages) sits outside
@@ -34,11 +35,11 @@ export function AuthShell({ children, footer }: AuthShellProps) {
       <DesktopTitleBarLane />
       <header>
         <nav className='mx-auto flex w-full max-w-[1446px] items-center px-12 py-4 max-sm:px-5 max-lg:px-8'>
-          <Link href='/' aria-label='Sim home' className='flex h-[30px] items-center'>
+          <a href='/' aria-label='Sim home' className='flex h-[30px] items-center'>
             <LogoMark>
               <SimWordmark />
             </LogoMark>
-          </Link>
+          </a>
         </nav>
       </header>
       <div className='flex flex-1 items-center justify-center px-4 pb-16'>
diff --git a/apps/sim/app/(auth)/login/login-form.tsx b/apps/sim/app/(auth)/login/login-form.tsx
index c2dafcb06ca..5e997746505 100644
--- a/apps/sim/app/(auth)/login/login-form.tsx
+++ b/apps/sim/app/(auth)/login/login-form.tsx
@@ -262,8 +262,8 @@ export default function LoginPage({
       // Clear reset success message on successful login
       setResetSuccessMessage(null)
 
-      // Explicit redirect fallback if better-auth doesn't redirect
-      router.push(safeCallbackUrl)
+      /** Fallback when better-auth does not redirect: a document navigation, like signup's, so the workspace shell initializes its own theme store. */
+      window.location.href = safeCallbackUrl
     } catch (err: any) {
       if (err.message?.includes('not verified') || err.code?.includes('EMAIL_NOT_VERIFIED')) {
         redirectToVerify(email)
diff --git a/apps/sim/app/(auth)/signup/signup-form.test.tsx b/apps/sim/app/(auth)/signup/signup-form.test.tsx
new file mode 100644
index 00000000000..8f78937c475
--- /dev/null
+++ b/apps/sim/app/(auth)/signup/signup-form.test.tsx
@@ -0,0 +1,132 @@
+/** @vitest-environment jsdom */
+import { act, type InputHTMLAttributes, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import SignupForm from '@/app/(auth)/signup/signup-form'
+
+const { push, signUp, refetchSession } = vi.hoisted(() => ({
+  push: vi.fn(),
+  signUp: vi.fn(),
+  refetchSession: vi.fn(),
+}))
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({ push }),
+  useSearchParams: () => new URLSearchParams(),
+}))
+vi.mock('@marsidev/react-turnstile', () => ({ Turnstile: () => null }))
+vi.mock('posthog-js/react', () => ({ usePostHog: () => null }))
+vi.mock('@/lib/analytics/google', () => ({ trackGoogleEvent: vi.fn() }))
+vi.mock('@/lib/auth/auth-client', () => ({
+  client: { signUp: { email: signUp } },
+  useSession: () => ({ refetch: refetchSession }),
+}))
+vi.mock('@/lib/consent/tracking-consent', () => ({
+  useTrackingConsent: () => ({ measurement: false }),
+}))
+vi.mock('@/lib/core/config/env', () => ({ getEnv: () => undefined, isFalsy: () => false }))
+vi.mock('@/lib/core/config/env-flags', () => ({ isSsoEnabled: false }))
+vi.mock('@/lib/core/security/input-validation', () => ({ validateCallbackUrl: () => false }))
+vi.mock('@/lib/messaging/email/validation', () => ({
+  quickValidateEmail: () => ({ isValid: true }),
+}))
+vi.mock('@/lib/posthog/client', () => ({ captureClientEvent: vi.fn(), captureEvent: vi.fn() }))
+vi.mock('@/app/(auth)/components', () => ({
+  AuthDivider: () => null,
+  AuthField: ({ children }: { children: ReactNode }) => <>{children}</>,
+  AuthFormMessage: () => null,
+  AuthHeader: () => null,
+  AuthInput: ({ error, ...props }: InputHTMLAttributes<HTMLInputElement> & { error?: boolean }) => (
+    <input {...props} />
+  ),
+  AuthLegalFooter: () => null,
+  AuthNavPrompt: () => null,
+  AuthSubmitButton: ({ children }: { children: ReactNode }) => (
+    <button type='submit'>{children}</button>
+  ),
+  PasswordInput: ({
+    error,
+    ...props
+  }: InputHTMLAttributes<HTMLInputElement> & { error?: boolean }) => <input {...props} />,
+  SocialLoginButtons: () => null,
+  SSOLoginButton: () => null,
+}))
+
+let root: Root
+let host: HTMLDivElement
+let destination: { href: string }
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+  destination = { href: '' }
+  const browser = window
+  vi.stubGlobal(
+    'window',
+    new Proxy(browser, {
+      get(target, key) {
+        return key === 'location' ? destination : Reflect.get(target, key, target)
+      },
+    })
+  )
+  signUp.mockResolvedValue({ data: { user: { id: 'new-user' } } })
+  refetchSession.mockResolvedValue(undefined)
+  host = document.createElement('div')
+  document.body.append(host)
+  root = createRoot(host)
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  host.remove()
+  vi.unstubAllGlobals()
+})
+
+async function submit(emailVerificationEnabled: boolean) {
+  act(() =>
+    root.render(
+      <SignupForm
+        githubAvailable={false}
+        googleAvailable={false}
+        microsoftAvailable={false}
+        emailSignupEnabled
+        emailVerificationEnabled={emailVerificationEnabled}
+      />
+    )
+  )
+  const fields = { name: 'Test Builder', email: 'builder@example.com', password: 'SafePass1!' }
+  for (const [name, value] of Object.entries(fields)) {
+    const input = host.querySelector<HTMLInputElement>(`input[name="${name}"]`)
+    if (!input) throw new Error(`Missing ${name} input`)
+    input.value = value
+  }
+  const form = host.querySelector('form')
+  if (!form) throw new Error('Missing signup form')
+  await act(async () =>
+    form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }))
+  )
+}
+
+describe('signup shell navigation', () => {
+  it('starts a document navigation after a successful signup without verification', async () => {
+    await submit(false)
+    expect(signUp).toHaveBeenCalledOnce()
+    expect(refetchSession).toHaveBeenCalledOnce()
+    expect(destination.href).toBe('/home')
+    expect(push).not.toHaveBeenCalled()
+  })
+
+  it('keeps verification within the auth shell and stores the email for the next step', async () => {
+    await submit(true)
+    expect(push).toHaveBeenCalledWith('/verify?fromSignup=true')
+    expect(sessionStorage.getItem('verificationEmail')).toBe('builder@example.com')
+    expect(destination.href).toBe('')
+  })
+
+  it('does not navigate when signup fails', async () => {
+    signUp.mockResolvedValue({ error: { message: 'Signup failed' } })
+    await submit(false)
+    expect(push).not.toHaveBeenCalled()
+    expect(destination.href).toBe('')
+  })
+})
diff --git a/apps/sim/app/(auth)/signup/signup-form.tsx b/apps/sim/app/(auth)/signup/signup-form.tsx
index 7488520915a..fcdbc0f13b8 100644
--- a/apps/sim/app/(auth)/signup/signup-form.tsx
+++ b/apps/sim/app/(auth)/signup/signup-form.tsx
@@ -372,12 +372,10 @@ function SignupFormContent({
 
       if (destination.kind === 'verify') {
         router.push(VERIFY_FROM_SIGNUP_ROUTE)
-      } else if (destination.kind === 'redirect') {
-        // Full navigation, matching the verify hop: the destination (invite, CLI
-        // handoff) is server-rendered and must see the fresh session cookie.
-        window.location.href = destination.url
       } else {
-        router.push(DEFAULT_POST_AUTH_ROUTE)
+        /** Match login/verification: refresh session-bound shells and their theme default. */
+        window.location.href =
+          destination.kind === 'redirect' ? destination.url : DEFAULT_POST_AUTH_ROUTE
       }
     } catch (error) {
       logger.error('Signup error:', error)
diff --git a/apps/sim/app/(auth)/verify/use-verification.ts b/apps/sim/app/(auth)/verify/use-verification.ts
index c2fbe5d4dbb..5927438998b 100644
--- a/apps/sim/app/(auth)/verify/use-verification.ts
+++ b/apps/sim/app/(auth)/verify/use-verification.ts
@@ -3,7 +3,7 @@
 import { useEffect, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { normalizeEmail } from '@sim/utils/string'
-import { useRouter, useSearchParams } from 'next/navigation'
+import { useSearchParams } from 'next/navigation'
 import { client, useSession } from '@/lib/auth/auth-client'
 import { validateCallbackUrl } from '@/lib/core/security/input-validation'
 import { DEFAULT_POST_AUTH_ROUTE, POST_AUTH_REDIRECT_STORAGE_KEY } from '@/app/(auth)/auth-redirect'
@@ -74,7 +74,6 @@ export function useVerification({
   isProduction,
   isEmailVerificationEnabled,
 }: UseVerificationParams): UseVerificationReturn {
-  const router = useRouter()
   const searchParams = useSearchParams()
   const { refetch: refetchSession } = useSession()
   const [otp, setOtp] = useState('')
@@ -215,15 +214,12 @@ export function useVerification({
         logger.warn('Failed to refetch session during verification skip:', error)
       }
 
-      if (destination) {
-        window.location.href = destination
-      } else {
-        router.push(DEFAULT_POST_AUTH_ROUTE)
-      }
+      /** A document navigation, like signup's, so the workspace shell initializes its own theme store. */
+      window.location.href = destination ?? DEFAULT_POST_AUTH_ROUTE
     }
 
     handleRedirect()
-  }, [isEmailVerificationEnabled, router, searchParams])
+  }, [isEmailVerificationEnabled, searchParams])
 
   return {
     otp,
diff --git a/apps/sim/app/(interfaces)/components/interfaces-shell/interfaces-shell.tsx b/apps/sim/app/(interfaces)/components/interfaces-shell/interfaces-shell.tsx
index c3ea3a614c3..e7488618390 100644
--- a/apps/sim/app/(interfaces)/components/interfaces-shell/interfaces-shell.tsx
+++ b/apps/sim/app/(interfaces)/components/interfaces-shell/interfaces-shell.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import { SupportFooter } from '@/app/(auth)/components'
-import { LogoShell } from '@/app/(landing)/components'
+import { LogoShell } from '@/app/(landing)/components/logo-shell'
 
 /**
  * Chrome for the `(interfaces)` route group (chat + resume) — the lightweight,
diff --git a/apps/sim/app/(interfaces)/resume/[workflowId]/[executionId]/resume-execution-unavailable.tsx b/apps/sim/app/(interfaces)/resume/[workflowId]/[executionId]/resume-execution-unavailable.tsx
index 52c9d065127..890d122292f 100644
--- a/apps/sim/app/(interfaces)/resume/[workflowId]/[executionId]/resume-execution-unavailable.tsx
+++ b/apps/sim/app/(interfaces)/resume/[workflowId]/[executionId]/resume-execution-unavailable.tsx
@@ -1,4 +1,4 @@
-import { ChipLink } from '@sim/emcn'
+import { chipContentLabelClass, chipVariants, cn } from '@sim/emcn'
 
 export function ResumeExecutionUnavailable() {
   return (
@@ -8,9 +8,9 @@ export function ResumeExecutionUnavailable() {
         <p className='mb-6 text-[var(--text-secondary)] text-sm'>
           This execution could not be located or has already completed.
         </p>
-        <ChipLink variant='border' href='/'>
-          Return Home
-        </ChipLink>
+        <a href='/' className={chipVariants({ variant: 'border' })}>
+          <span className={cn(chipContentLabelClass, 'flex-1')}>Return Home</span>
+        </a>
       </div>
     </div>
   )
diff --git a/apps/sim/app/(landing)/CLAUDE.md b/apps/sim/app/(landing)/CLAUDE.md
index 16c31795602..b724d10693e 100644
--- a/apps/sim/app/(landing)/CLAUDE.md
+++ b/apps/sim/app/(landing)/CLAUDE.md
@@ -6,22 +6,22 @@ This route group owns `/` and the entire public marketing surface - the home pag
 
 ## What this is
 
-- `app/(landing)/` - the marketing site. A shared `layout.tsx` renders the chrome once (the `LandingShell`: light tokens, navbar with server-side GitHub stars, footer, site-wide JSON-LD); each page supplies only its `<main>` content.
+- `app/(landing)/` - the marketing site. A shared `layout.tsx` renders the chrome once (the `LandingShell`: light tokens, navbar with server-side GitHub stars, painted pre-footer CTA, footer, site-wide JSON-LD); each page supplies only its `<main>` content. The painted light/dark CTA and footer are owned by `LandingShell`; never add page-specific closing CTA bands or footer instances.
 - The legacy `app/(home)/` group (old dark landing + `--landing-*` tokens) has been **deleted** - its marketing pages were migrated here and its chrome retired. Do not reintroduce `--landing-*` tokens, Martian Mono accents, or a separate marketing theme.
 
-## Styling - draw from the platform's light mode
+## Styling - draw from the platform's tokens
 
-The landing page looks like the product. Its visual language is the workspace UI in light mode, not a separate marketing theme.
+The landing page looks like the product. Its visual language is the workspace UI - light by default, dark on request - not a separate marketing theme.
 
-- **Always light.** The root wrapper in `landing.tsx` carries the `light` class, which pins every token to its light value (see `app/_styles/globals.css`, the `:root, .light` block). Never add `dark:` variants here; never read the user's theme.
-- **Use platform tokens, never hex.** Canvas `--bg`, surfaces `--surface-1`…`--surface-7`, cards/modals `--surface-2`, hover `--surface-hover`, active `--surface-active`; text `--text-primary` / `--text-secondary` / `--text-muted` / `--text-body`, icons `--text-icon`; borders `--border` (dividers) / `--border-1` (fields); brand `--brand-agent` / `--brand-secondary` / `--brand-accent`. Do **not** use the legacy `--landing-*` tokens - they belong to the old dark landing.
+- **Light by default, dark on request.** The landing family follows the theme class on `<html>` (next-themes, storage key `sim-landing-theme` - its own store, separate from the workspace's account-synced `sim-theme`, which holds `system` for every signed-in user): a visitor who has not chosen otherwise here gets light, the design baseline, and the footer's `ThemeToggle` switches to dark - the platform's own `.dark` token values from `app/_styles/globals.css`, no separate palette. Tokens flip on their own, so `dark:` variants exist here only to pair the handful of deliberate literals (the `#F8F8F8` paper band, the composer send button, the pale CTA drawing) with their dark value in the same class string - never leave a literal unpaired. Never read the theme in a Server Component; the toggle is the one client reader.
+- **Use platform tokens, never hex.** Canvas `--bg`, surfaces `--surface-1`…`--surface-7`, cards/modals `--surface-2`, hover `--surface-hover`, active `--surface-active`; text `--text-primary` / `--text-secondary` / `--text-muted` / `--text-body`, icons `--text-icon`; borders `--border` (its legacy alias `--border-1` is not for new work); brand `--brand-agent` / `--brand-secondary` / `--brand-accent`. Do **not** use the legacy `--landing-*` tokens - they belong to the old dark landing.
 - **Use emcn components where they fit.** The chip family (`Chip`, `ChipLink`, `ChipTag`, `ChipInput`, `ChipModal*`, …) from `@/components/emcn` is the canonical chrome - a demo-request form is a `ChipModal` with `ChipModalField`s, a pill CTA is a `Chip`/`ChipLink`. Components own their chrome; pass props, not className overrides. Full consumer rules: `.claude/rules/sim-styling.md`.
 - **Typography is the platform's.** Season is the global body font (`font-season` is applied on `<body>` in the root layout). Use the platform text scale (`text-small` = 13px, `text-base` = 15px, etc. - see the `@theme` block in `app/_styles/globals.css`). Don't add new fonts or font CSS variables without explicit direction.
 - **Never touch global styles.** No additions to `app/_styles/globals.css`. All styling is local Tailwind classes; `cn()` from `@/lib/core/utils/cn` for conditionals; no inline `style` attributes.
 - **Responsive - desktop is the source of truth, scaled down via `max-*` overrides.** The page is fully responsive (iPad + phone). The desktop layout stays the unprefixed baseline; smaller screens are handled by *layering* `max-*` overrides on top, so desktop renders byte-identically. Tiers:
   - `max-xl:` (≤1279) - the hero's two-panel split (absolute visual + logos) collapses to a stacked, in-flow column. The split needs ≥1280 to avoid the headline colliding with the visual panel; iPad-landscape (1024) therefore gets the stacked hero with the desktop nav.
-  - `max-lg:` (≤1023) - the desktop nav clusters hide (`hidden lg:flex`) and `MobileNav` (hamburger sheet) takes over; multi-column grids step down (mothership 4→2, footer 7→3); shared gutter `px-20 → max-lg:px-8`; section gaps tighten.
-  - `max-md:` (≤767) - Features beats drop the floating callout (`max-md:hidden`) and show the un-masked backdrop preview full-width.
+  - `max-lg:` (≤1023) - the desktop nav clusters hide (`hidden lg:flex`) and `MobileNav` (hamburger sheet) takes over; multi-column grids step down (footer 7→3); the shared gutter narrows; section gaps tighten.
+  - `max-md:` (≤767) - two-up feature and card rows stack to one column.
   - `max-sm:` (≤639) - single-column grids, smallest type scale, `px-5` gutter, hero CTA row stacks.
 
   When adding a new section, give it the same `px-20 max-lg:px-8 max-sm:px-5` gutter so the navbar wordmark stays aligned with section content at every width. Verify desktop is unchanged and there is zero horizontal overflow at 1280 / 1024 / 768 / 390 before shipping.
@@ -79,8 +79,8 @@ Follow `.claude/rules/constitution.md` exactly: Sim is "the open-source AI works
 └── components/
     ├── index.ts                         # top barrel
     ├── navbar/{navbar.tsx, index.ts, components/<chip>/…}   # <header><nav>: wordmark, dropdowns, stars, auth chips
-    ├── hero/{hero.tsx, index.ts, components/hero-visual/…}  # h1, description, CTA, platform visual, logos
-    ├── lifecycle/, features/, footer/, testimonials/        # each: <name>.tsx + index.ts (+ components/)
+    ├── hero/{hero.tsx, index.ts, components/hero-platform-loop/…}  # h1, description, CTA, lazy product loop
+    ├── features/, footer/, platform-suite/, product-demo/, security/, …  # each: <name>.tsx + index.ts (+ components/)
     ├── shared/                          # cross-page reused chrome (folder-per-component + barrel)
     │   ├── landing-shell/               # light wrapper + skip link + Navbar(stars) + Footer; wraps every page
     │   ├── hero-cta/                    # the one email-capture + Sign-up CTA (hero + every platform hero)
@@ -99,7 +99,7 @@ Absolute imports only in component code (`@/app/(landing)/components/...`); `ind
 
 1. Server Component unless it provably needs client state; if client, it's a leaf.
 2. H2 with `id` + `aria-labelledby` wiring; heading hierarchy intact.
-3. Platform light tokens and emcn chrome only - no hex colors, no `--landing-*`, no `dark:`.
+3. Platform tokens and emcn chrome only - no hex colors, no `--landing-*`. Check the section in dark mode too (footer toggle); any deliberate literal carries its `dark:` pair.
 4. Images: `next/image`, explicit dimensions, `priority` only on the LCP element.
 5. Copy passes the constitution (language table, claim hierarchy, tone).
 6. "Sim" named explicitly; section quotable in isolation.
diff --git a/apps/sim/app/(landing)/blog/[slug]/page.tsx b/apps/sim/app/(landing)/blog/[slug]/page.tsx
index 472f4aa75a4..c3fc9c44b72 100644
--- a/apps/sim/app/(landing)/blog/[slug]/page.tsx
+++ b/apps/sim/app/(landing)/blog/[slug]/page.tsx
@@ -5,7 +5,8 @@ import { BLOG_SECTION, buildPostGraphJsonLd, buildPostMetadata } from '@/lib/blo
 import { getBaseUrl } from '@/lib/core/utils/urls'
 import { ContentPostPage } from '@/app/(landing)/components'
 
-export const dynamicParams = false
+/** Unknown slugs reach the section 404 while known pages remain pre-rendered. */
+export const dynamicParams = true
 
 export async function generateStaticParams() {
   const posts = await getAllPostMeta()
@@ -19,7 +20,7 @@ export async function generateMetadata({
 }): Promise<Metadata> {
   const { slug } = await params
   const post = await getPostBySlug(slug)
-  if (!post) return {}
+  if (!post || post.draft) return {}
   return buildPostMetadata(post)
 }
 
@@ -28,7 +29,7 @@ export const revalidate = 86400
 export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
   const { slug } = await params
   const post = await getPostBySlug(slug)
-  if (!post) notFound()
+  if (!post || post.draft) notFound()
   const related = await getRelatedPosts(slug, 3)
 
   return (
diff --git a/apps/sim/app/(landing)/careers/careers.tsx b/apps/sim/app/(landing)/careers/careers.tsx
index 56c4d2fe194..a9023f10f97 100644
--- a/apps/sim/app/(landing)/careers/careers.tsx
+++ b/apps/sim/app/(landing)/careers/careers.tsx
@@ -21,8 +21,8 @@ interface CareersProps {
  * crawlable HTML; the interactive {@link JobBoard} hydrates on top to add
  * Team/Location filtering.
  *
- * Both sections share the landing gutter — capped and centered at `max-w-[1460px]`
- * with the navbar-aligned `px-20 max-lg:px-8 max-sm:px-5` so the headline starts on
+ * Both sections share the landing gutter — capped and centered at `max-w-[1728px]`
+ * with the navbar-aligned `px-10 max-md:px-7 max-lg:px-8 max-xl:px-9` so the headline starts on
  * the same vertical line as the wordmark. The hero carries the single `<h1>`
  * (containing "Sim" and "AI workspace") plus an sr-only product summary for AI
  * citation (landing CLAUDE.md → GEO); the roles section owns its own `<h2>`.
@@ -45,12 +45,12 @@ export default async function Careers({ searchParams }: CareersProps) {
       <section
         id='careers-hero'
         aria-labelledby='careers-heading'
-        className='mx-auto flex w-full max-w-[1460px] flex-col gap-5 px-20 pt-20 pb-10 max-sm:px-5 max-sm:pt-16 max-lg:px-8'
+        className='mx-auto flex w-full max-w-[1728px] flex-col gap-5 px-10 pt-20 pb-10 max-sm:pt-16 max-md:px-7 max-lg:px-8 max-xl:px-9'
       >
         <p className='sr-only'>
           Careers at Sim, the open-source AI workspace where teams build, deploy, and manage AI
           agents. Sim is hiring engineers, designers, and go-to-market builders to help teams
-          automate real work across 1,000+ integrations and every major LLM — visually,
+          automate real work across hundreds of integrations and every major LLM — visually,
           conversationally, or with code.
         </p>
 
@@ -70,7 +70,7 @@ export default async function Careers({ searchParams }: CareersProps) {
       <section
         id='open-roles'
         aria-labelledby='open-roles-heading'
-        className='mx-auto flex w-full max-w-[1460px] flex-col gap-10 px-20 pt-6 pb-24 max-sm:px-5 max-sm:pb-16 max-lg:px-8'
+        className='mx-auto flex w-full max-w-[1728px] flex-col gap-10 px-10 pt-6 pb-24 max-sm:pb-16 max-md:px-7 max-lg:px-8 max-xl:px-9'
       >
         <h2
           id='open-roles-heading'
diff --git a/apps/sim/app/(landing)/careers/components/job-board/job-board.tsx b/apps/sim/app/(landing)/careers/components/job-board/job-board.tsx
index 39cf6de83c2..c6fce3b2e4b 100644
--- a/apps/sim/app/(landing)/careers/components/job-board/job-board.tsx
+++ b/apps/sim/app/(landing)/careers/components/job-board/job-board.tsx
@@ -54,17 +54,23 @@ export function JobBoard({ postings }: JobBoardProps) {
   return (
     <div className='flex flex-col gap-10'>
       <div className='flex flex-wrap items-center gap-3'>
+        <span id='career-team-filter-description' className='sr-only'>
+          Filter roles by team
+        </span>
         <ChipSelect
           options={teamOptions}
           value={team}
           onChange={(value) => setFilters({ team: value })}
-          aria-label='Filter roles by team'
+          aria-describedby='career-team-filter-description'
         />
+        <span id='career-location-filter-description' className='sr-only'>
+          Filter roles by location
+        </span>
         <ChipSelect
           options={locationOptions}
           value={location}
           onChange={(value) => setFilters({ location: value })}
-          aria-label='Filter roles by location'
+          aria-describedby='career-location-filter-description'
         />
       </div>
 
diff --git a/apps/sim/app/(landing)/changelog/components/changelog-actions/changelog-actions.tsx b/apps/sim/app/(landing)/changelog/components/changelog-actions/changelog-actions.tsx
index d5713c641f9..686696ff15b 100644
--- a/apps/sim/app/(landing)/changelog/components/changelog-actions/changelog-actions.tsx
+++ b/apps/sim/app/(landing)/changelog/components/changelog-actions/changelog-actions.tsx
@@ -16,6 +16,7 @@ export function ChangelogActions() {
     <div className='flex flex-wrap items-center gap-1'>
       <ChipLink
         variant='primary'
+        shape='round'
         href='https://github.com/simstudioai/sim/releases'
         target='_blank'
         rel='noopener noreferrer'
@@ -24,6 +25,7 @@ export function ChangelogActions() {
         View on GitHub
       </ChipLink>
       <ChipLink
+        shape='round'
         href='https://docs.sim.ai'
         target='_blank'
         rel='noopener noreferrer'
@@ -31,7 +33,7 @@ export function ChangelogActions() {
       >
         Documentation
       </ChipLink>
-      <ChipLink href='/changelog.xml' leftIcon={Rss}>
+      <ChipLink shape='round' href='/changelog.xml' leftIcon={Rss}>
         RSS Feed
       </ChipLink>
     </div>
diff --git a/apps/sim/app/(landing)/changelog/components/changelog-timeline/changelog-timeline.tsx b/apps/sim/app/(landing)/changelog/components/changelog-timeline/changelog-timeline.tsx
index 030613e1a52..7d35b87cef2 100644
--- a/apps/sim/app/(landing)/changelog/components/changelog-timeline/changelog-timeline.tsx
+++ b/apps/sim/app/(landing)/changelog/components/changelog-timeline/changelog-timeline.tsx
@@ -91,14 +91,14 @@ export function ChangelogTimeline({ initialEntries }: ChangelogTimelineProps) {
         const headingId = `release-${entry.tag}-heading`
         return (
           <section key={entry.tag} aria-labelledby={headingId} className='flex flex-col'>
-            <div className='flex items-center justify-between gap-4'>
+            <div className='flex flex-wrap items-center justify-between gap-4'>
               <div className='flex items-center gap-2'>
                 <h2 id={headingId} className='text-[18px] text-[var(--text-primary)] leading-[1.3]'>
                   {entry.tag}
                 </h2>
                 {entry.contributors.length > 0 ? (
-                  <div className='flex'>
-                    {entry.contributors.slice(0, 5).map((contributor, index) => (
+                  <div className='flex gap-1'>
+                    {entry.contributors.slice(0, 5).map((contributor) => (
                       <a
                         key={contributor}
                         href={`https://github.com/${contributor}`}
@@ -106,7 +106,7 @@ export function ChangelogTimeline({ initialEntries }: ChangelogTimelineProps) {
                         rel='noopener noreferrer'
                         aria-label={`View @${contributor} on GitHub`}
                         title={`@${contributor}`}
-                        className={index === 0 ? 'block' : '-ms-2 block'}
+                        className='block size-6 shrink-0'
                       >
                         <Avatar className='size-6 ring-2 ring-[var(--bg)]'>
                           <AvatarImage
@@ -119,14 +119,14 @@ export function ChangelogTimeline({ initialEntries }: ChangelogTimelineProps) {
                       </a>
                     ))}
                     {entry.contributors.length > 5 ? (
-                      <div className='-ms-2 relative flex size-6 items-center justify-center rounded-full bg-[var(--surface-2)] text-[10px] text-[var(--text-body)] ring-2 ring-[var(--bg)] hover:z-10'>
+                      <div className='relative flex size-6 items-center justify-center rounded-full bg-[var(--surface-2)] text-[10px] text-[var(--text-body)] ring-2 ring-[var(--bg)]'>
                         +{entry.contributors.length - 5}
                       </div>
                     ) : null}
                   </div>
                 ) : null}
               </div>
-              <span className='text-[12px] text-[var(--text-muted)]'>
+              <span className='text-[12px] text-[var(--text-secondary)]'>
                 {formatDate(new Date(entry.date))}
               </span>
             </div>
diff --git a/apps/sim/app/(landing)/comparisons/[provider]/page.tsx b/apps/sim/app/(landing)/comparisons/[provider]/page.tsx
index 2497f2180bc..9319e083533 100644
--- a/apps/sim/app/(landing)/comparisons/[provider]/page.tsx
+++ b/apps/sim/app/(landing)/comparisons/[provider]/page.tsx
@@ -1,3 +1,4 @@
+import { cn } from '@sim/emcn'
 import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 import type { CompetitorProfile } from '@/lib/compare/data'
@@ -18,14 +19,15 @@ import {
   SIM_LATEST_VERIFIED,
 } from '@/app/(landing)/comparisons/utils'
 import { BackLink } from '@/app/(landing)/components'
-import { Cta } from '@/app/(landing)/components/cta/cta'
 import { JsonLd } from '@/app/(landing)/components/json-ld'
 import { LandingFAQ } from '@/app/(landing)/components/landing-faq'
+import { LANDING_CONTENT_WIDTH, LANDING_GUTTER } from '@/app/(landing)/components/landing-layout'
 
 const baseUrl = SITE_URL
 
 export const revalidate = 3600
-export const dynamicParams = false
+/** Unknown slugs reach the section 404 while known pages remain pre-rendered. */
+export const dynamicParams = true
 
 export async function generateStaticParams() {
   return ALL_COMPETITORS.map((competitor) => ({ provider: competitor.id }))
@@ -162,7 +164,7 @@ export default async function ComparisonProviderPage({
       <JsonLd data={faqJsonLd} />
 
       <main id='main-content' className='bg-[var(--bg)]'>
-        <div className='mx-auto w-full max-w-[1446px] px-12 pt-[112px] max-sm:px-5 max-sm:pt-20 max-lg:px-8'>
+        <div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER, 'pt-[112px] max-sm:pt-20')}>
           <div className='mb-6'>
             <BackLink href='/comparisons' label='Back to comparisons' />
           </div>
@@ -205,8 +207,8 @@ export default async function ComparisonProviderPage({
 
         <div className='mt-8 h-px w-full bg-[var(--border)]' />
 
-        <div className='mx-auto w-full max-w-[1446px]'>
-          <div className='mx-12 border-[var(--border)] border-x max-sm:mx-5 max-lg:mx-8'>
+        <div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER)}>
+          <div className='border-[var(--border)] border-x'>
             {competitor.betterThanAnswer ? (
               <>
                 <section aria-labelledby='better-than-heading' className='px-6 py-10'>
@@ -368,10 +370,6 @@ export default async function ComparisonProviderPage({
 
         <div className='-mt-px h-px w-full bg-[var(--border)]' />
       </main>
-
-      <div className='py-16'>
-        <Cta />
-      </div>
     </>
   )
 }
diff --git a/apps/sim/app/(landing)/comparisons/components/source-info/source-info.tsx b/apps/sim/app/(landing)/comparisons/components/source-info/source-info.tsx
index 200d1c35aaf..17f63c1b25a 100644
--- a/apps/sim/app/(landing)/comparisons/components/source-info/source-info.tsx
+++ b/apps/sim/app/(landing)/comparisons/components/source-info/source-info.tsx
@@ -28,10 +28,10 @@ export function SourceLink({ source, children, className }: SourceLinkProps) {
           href={source.url}
           target='_blank'
           rel='noopener noreferrer'
-          aria-label={`${source.label} (opens source)`}
           className={cn('block min-w-0', className)}
         >
           {children}
+          <span className='sr-only'> (source: {source.label}, opens in a new tab)</span>
         </a>
       </Tooltip.Trigger>
       <Tooltip.Content>Source: {source.label}</Tooltip.Content>
diff --git a/apps/sim/app/(landing)/comparisons/page.tsx b/apps/sim/app/(landing)/comparisons/page.tsx
index fdf95f5619b..b7b789a05b7 100644
--- a/apps/sim/app/(landing)/comparisons/page.tsx
+++ b/apps/sim/app/(landing)/comparisons/page.tsx
@@ -1,3 +1,4 @@
+import { cn } from '@sim/emcn'
 import type { Metadata } from 'next'
 import Link from 'next/link'
 import { simProfile } from '@/lib/compare/data'
@@ -8,6 +9,7 @@ import { ALL_COMPETITORS, ensurePeriod, lowercaseFirst } from '@/app/(landing)/c
 import { ChevronArrow } from '@/app/(landing)/components/chevron-arrow'
 import { JsonLd } from '@/app/(landing)/components/json-ld'
 import { LandingFAQ } from '@/app/(landing)/components/landing-faq'
+import { LANDING_CONTENT_WIDTH, LANDING_GUTTER } from '@/app/(landing)/components/landing-layout'
 
 const baseUrl = SITE_URL
 
@@ -101,7 +103,7 @@ export default function ComparisonHubPage() {
       <JsonLd data={faqJsonLd} />
 
       <main id='main-content' className='bg-[var(--bg)]'>
-        <div className='mx-auto w-full max-w-[1446px] px-12 pt-[112px] max-sm:px-5 max-sm:pt-20 max-lg:px-8'>
+        <div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER, 'pt-[112px] max-sm:pt-20')}>
           {/* Invisible spacer matching the detail page's BackLink block height/margin, so the divider below lands at the same Y on both pages. */}
           <div className='mb-6 h-6' aria-hidden='true' />
 
@@ -129,7 +131,7 @@ export default function ComparisonHubPage() {
 
         <div className='mt-8 h-px w-full bg-[var(--border)]' />
 
-        <div className='mx-auto w-full max-w-[1446px] px-12 max-sm:px-5 max-lg:px-8'>
+        <div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER)}>
           <div className='border-[var(--border)] border-x'>
             <section aria-labelledby='all-comparisons-heading' className='pt-10'>
               <h2
diff --git a/apps/sim/app/(landing)/components/agent-momentum/agent-momentum-metrics.tsx b/apps/sim/app/(landing)/components/agent-momentum/agent-momentum-metrics.tsx
new file mode 100644
index 00000000000..1a045265e38
--- /dev/null
+++ b/apps/sim/app/(landing)/components/agent-momentum/agent-momentum-metrics.tsx
@@ -0,0 +1,149 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { cn } from '@sim/emcn'
+import { HOME_TYPE } from '@/app/(landing)/components/landing-layout'
+
+const COUNT_DURATION_MS = 900
+const METRIC_STAGGER_MS = 120
+const NUMBER_FORMATTER = new Intl.NumberFormat('en-US')
+const COMPACT_NUMBER_FORMATTER = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 2,
+})
+
+export interface AgentMomentumMetric {
+  value: number
+  compact?: boolean
+  prefix?: string
+  suffix?: string
+  description: string
+}
+
+interface AgentMomentumMetricsProps {
+  metrics: readonly AgentMomentumMetric[]
+}
+
+/** Scroll-triggered impact counters that run once, with a reduced-motion fallback. */
+export function AgentMomentumMetrics({ metrics }: AgentMomentumMetricsProps) {
+  const listRef = useRef<HTMLDListElement>(null)
+  const animationFrameRef = useRef<number | null>(null)
+  const hasAnimatedRef = useRef(false)
+  const [counts, setCounts] = useState(() => metrics.map(() => 0))
+
+  useEffect(() => {
+    const list = listRef.current
+    if (!list) return
+
+    const media = window.matchMedia('(prefers-reduced-motion: reduce)')
+    let observer: IntersectionObserver | null = null
+
+    const finishImmediately = () => {
+      if (animationFrameRef.current !== null) {
+        cancelAnimationFrame(animationFrameRef.current)
+      }
+      hasAnimatedRef.current = true
+      setCounts(metrics.map((metric) => metric.value))
+    }
+
+    const animate = () => {
+      if (hasAnimatedRef.current) return
+      hasAnimatedRef.current = true
+      const startedAt = performance.now()
+
+      const tick = (now: number) => {
+        let isComplete = true
+        const nextCounts = metrics.map((metric, index) => {
+          const elapsed = now - startedAt - index * METRIC_STAGGER_MS
+          const progress = Math.min(Math.max(elapsed / COUNT_DURATION_MS, 0), 1)
+          if (progress < 1) isComplete = false
+          const eased = 1 - (1 - progress) ** 4
+          return Math.round(metric.value * eased)
+        })
+
+        setCounts(nextCounts)
+        if (!isComplete) {
+          animationFrameRef.current = requestAnimationFrame(tick)
+        }
+      }
+
+      animationFrameRef.current = requestAnimationFrame(tick)
+    }
+
+    if (media.matches) {
+      finishImmediately()
+    } else if (typeof IntersectionObserver === 'undefined') {
+      animate()
+    } else {
+      observer = new IntersectionObserver(
+        ([entry]) => {
+          if (!entry?.isIntersecting) return
+          observer?.disconnect()
+          animate()
+        },
+        { threshold: 0.25 }
+      )
+      observer.observe(list)
+    }
+
+    const handleMotionPreference = () => {
+      if (media.matches) {
+        observer?.disconnect()
+        finishImmediately()
+      }
+    }
+
+    media.addEventListener('change', handleMotionPreference)
+    return () => {
+      observer?.disconnect()
+      media.removeEventListener('change', handleMotionPreference)
+      if (animationFrameRef.current !== null) {
+        cancelAnimationFrame(animationFrameRef.current)
+      }
+    }
+  }, [metrics])
+
+  return (
+    <dl ref={listRef} className='max-lg:mt-14 max-lg:border-[var(--border)] max-lg:border-t'>
+      {metrics.map((metric, index) => {
+        const isVisible = (counts[index] ?? 0) > 0
+        const formatter = metric.compact ? COMPACT_NUMBER_FORMATTER : NUMBER_FORMATTER
+        const finalValue = `${metric.prefix ?? ''}${NUMBER_FORMATTER.format(metric.value)}${metric.suffix ?? ''}`
+        const formattedValue = `${metric.prefix ?? ''}${formatter.format(counts[index] ?? 0)}${metric.suffix ?? ''}`
+
+        return (
+          <div
+            key={metric.description}
+            className={cn(
+              'grid min-h-[190px] grid-cols-[minmax(0,1.35fr)_minmax(10rem,0.65fr)] items-start gap-8 py-8 max-sm:min-h-0 max-sm:grid-cols-1 max-sm:gap-4 max-sm:py-6',
+              index > 0 && 'border-[var(--border)] border-t'
+            )}
+          >
+            <dt
+              className={cn(
+                'order-2 max-w-[19rem] text-balance pt-2 text-[var(--text-secondary)] max-sm:order-2 max-sm:pt-0',
+                HOME_TYPE.body
+              )}
+            >
+              {metric.description}
+            </dt>
+            <dd className='order-1 whitespace-nowrap text-[84px] text-[var(--text-primary)] leading-[0.95] tracking-[-0.045em] max-sm:text-[52px] max-xl:text-[68px]'>
+              <span className='sr-only'>{finalValue}</span>
+              <span
+                aria-hidden='true'
+                className={cn(
+                  'inline-block origin-left tabular-nums transition-[opacity,transform] duration-500 ease-out motion-reduce:transform-none motion-reduce:opacity-100 motion-reduce:transition-none',
+                  isVisible
+                    ? 'translate-y-0 scale-100 opacity-100'
+                    : 'translate-y-3 scale-95 opacity-0'
+                )}
+              >
+                {formattedValue}
+              </span>
+            </dd>
+          </div>
+        )
+      })}
+    </dl>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/agent-momentum/agent-momentum.test.tsx b/apps/sim/app/(landing)/components/agent-momentum/agent-momentum.test.tsx
new file mode 100644
index 00000000000..1713a86b88f
--- /dev/null
+++ b/apps/sim/app/(landing)/components/agent-momentum/agent-momentum.test.tsx
@@ -0,0 +1,36 @@
+/**
+ * @vitest-environment node
+ */
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('@sim/emcn', () => ({
+  cn: (...values: Array<string | false | null | undefined>) => values.filter(Boolean).join(' '),
+}))
+
+import { AgentMomentum } from '@/app/(landing)/components/agent-momentum/agent-momentum'
+
+describe('AgentMomentum', () => {
+  it('renders the supplied savings, hours, and builders totals in order', () => {
+    const markup = renderToStaticMarkup(<AgentMomentum />)
+
+    expect(markup).toContain(
+      'The world’s work is moving to AI agents. Sim gives teams one place to build, deploy, monitor and govern every agent across the business.'
+    )
+    expect(markup).not.toContain('<h2')
+    expect(markup).toContain('100,000+')
+    expect(markup).toContain('builders already using Sim to create and manage AI agents')
+    expect(markup).toContain('grid-cols-[minmax(0,0.95fr)_minmax(0,1.05fr)] gap-x-24')
+    expect(markup).toContain('flex w-full flex-col border-[var(--border)] border-b')
+    expect(markup).not.toContain('gap-x-24 border-[var(--border)] border-t')
+    expect(markup).toContain('dollars saved by teams using Sim to automate their work')
+    expect(markup).toContain('hours of work completed in Sim')
+    expect(markup).toContain('$20,000,000')
+    expect(markup).toContain('1,270,000')
+    expect(markup.indexOf('dollars saved')).toBeLessThan(markup.indexOf('hours of work'))
+    expect(markup.indexOf('hours of work')).toBeLessThan(markup.indexOf('builders already'))
+    expect(markup).not.toContain('agent-callable tools')
+    expect(markup).not.toContain('built-in integrations')
+    expect(markup).toContain('aria-label="AI agent momentum"')
+  })
+})
diff --git a/apps/sim/app/(landing)/components/agent-momentum/agent-momentum.tsx b/apps/sim/app/(landing)/components/agent-momentum/agent-momentum.tsx
new file mode 100644
index 00000000000..f7deb7c7c5a
--- /dev/null
+++ b/apps/sim/app/(landing)/components/agent-momentum/agent-momentum.tsx
@@ -0,0 +1,61 @@
+import { cn } from '@sim/emcn'
+import {
+  type AgentMomentumMetric,
+  AgentMomentumMetrics,
+} from '@/app/(landing)/components/agent-momentum/agent-momentum-metrics'
+import { LANDING_CONTENT_WIDTH, LANDING_GUTTER } from '@/app/(landing)/components/landing-layout'
+
+const METRICS: readonly AgentMomentumMetric[] = [
+  {
+    value: 20_000_000,
+    prefix: '$',
+    compact: true,
+    description: 'dollars saved by teams using Sim to automate their work',
+  },
+  {
+    value: 1_270_000,
+    compact: true,
+    description: 'hours of work completed in Sim',
+  },
+  {
+    value: 100_000,
+    suffix: '+',
+    description: 'builders already using Sim to create and manage AI agents',
+  },
+] as const
+
+/**
+ * Editorial proof section showing the impact and adoption of Sim.
+ *
+ * It shares a close-spaced group with the customer film, so the two read as
+ * one beat. There is no rule above it, and it closes on a
+ * hairline that runs the full width of the page, edge to edge, while the copy
+ * and the metrics stay inside the content column. The rule lands right under
+ * the last metric row, the same distance its own dividers keep.
+ */
+export function AgentMomentum() {
+  return (
+    <section
+      id='agent-momentum'
+      aria-label='AI agent momentum'
+      className='flex w-full flex-col border-[var(--border)] border-b'
+    >
+      <div
+        className={cn(
+          'grid grid-cols-[minmax(0,0.95fr)_minmax(0,1.05fr)] gap-x-24 max-lg:grid-cols-1 max-lg:gap-x-0',
+          LANDING_CONTENT_WIDTH,
+          LANDING_GUTTER
+        )}
+      >
+        <div className='pt-8 pr-12 max-sm:pt-6 max-lg:pr-0'>
+          <p className='max-w-[40rem] text-pretty text-[30px] text-[var(--text-primary)] leading-[1.3] tracking-[-0.015em] max-sm:text-[22px] max-xl:text-[26px]'>
+            The world’s work is moving to AI agents. Sim gives teams one place to build, deploy,
+            monitor and govern every agent across the business.
+          </p>
+        </div>
+
+        <AgentMomentumMetrics metrics={METRICS} />
+      </div>
+    </section>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/agent-momentum/index.ts b/apps/sim/app/(landing)/components/agent-momentum/index.ts
new file mode 100644
index 00000000000..c03e5d183a7
--- /dev/null
+++ b/apps/sim/app/(landing)/components/agent-momentum/index.ts
@@ -0,0 +1 @@
+export { AgentMomentum } from './agent-momentum'
diff --git a/apps/sim/app/(landing)/components/back-link/back-link.tsx b/apps/sim/app/(landing)/components/back-link/back-link.tsx
index 80ad85e7ab1..25cc6fc7bc0 100644
--- a/apps/sim/app/(landing)/components/back-link/back-link.tsx
+++ b/apps/sim/app/(landing)/components/back-link/back-link.tsx
@@ -16,7 +16,7 @@ export function BackLink({ href, label }: BackLinkProps) {
   return (
     <Link
       href={href}
-      className='group/link inline-flex items-center gap-1.5 text-[var(--text-muted)] text-sm tracking-[0.02em] hover:text-[var(--text-primary)]'
+      className='group/link inline-flex items-center gap-1.5 text-[var(--text-secondary)] text-sm tracking-[0.02em] hover:text-[var(--text-primary)]'
     >
       <svg
         className='size-3 shrink-0'
diff --git a/apps/sim/app/(landing)/components/chevron-arrow/chevron-arrow.tsx b/apps/sim/app/(landing)/components/chevron-arrow/chevron-arrow.tsx
index bd7ffc46216..73f86fdd585 100644
--- a/apps/sim/app/(landing)/components/chevron-arrow/chevron-arrow.tsx
+++ b/apps/sim/app/(landing)/components/chevron-arrow/chevron-arrow.tsx
@@ -1,12 +1,21 @@
+import { cn } from '@sim/emcn'
+
+interface ChevronArrowProps {
+  className?: string
+  /** Holds the arrow in its revealed state for the currently previewed menu item. */
+  active?: boolean
+  strokeWidth?: number
+}
+
 /**
  * The animated chevron used on landing link rows (models, integrations). On
- * `group-hover/link` the leading line draws in and the arrowhead nudges right.
+ * hover or keyboard focus, the leading line draws in and the arrowhead nudges right.
  * Decorative, so `aria-hidden`.
  */
-export function ChevronArrow() {
+export function ChevronArrow({ className, active = false, strokeWidth = 1.33 }: ChevronArrowProps) {
   return (
     <svg
-      className='size-3 shrink-0 text-[var(--text-muted)]'
+      className={cn('size-3 shrink-0 text-[var(--text-muted)]', className)}
       viewBox='0 0 10 10'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
@@ -18,18 +27,24 @@ export function ChevronArrow() {
         x2='9'
         y2='5'
         stroke='currentColor'
-        strokeWidth='1.33'
+        strokeWidth={strokeWidth}
         strokeLinecap='square'
-        className='origin-left scale-x-0 transition-transform duration-200 ease-out [transform-box:fill-box] group-hover/link:scale-x-100'
+        className={cn(
+          'origin-left transition-transform duration-200 ease-out [transform-box:fill-box] group-hover/link:scale-x-100 group-focus-visible/link:scale-x-100 motion-reduce:transition-none',
+          active ? 'scale-x-100' : 'scale-x-0'
+        )}
       />
       <path
         d='M3.5 2L6.5 5L3.5 8'
         stroke='currentColor'
-        strokeWidth='1.33'
+        strokeWidth={strokeWidth}
         strokeLinecap='square'
         strokeLinejoin='miter'
         fill='none'
-        className='transition-transform duration-200 ease-out group-hover/link:translate-x-[30%]'
+        className={cn(
+          'transition-transform duration-200 ease-out group-hover/link:translate-x-[30%] group-focus-visible/link:translate-x-[30%] motion-reduce:transition-none',
+          active && 'translate-x-[30%]'
+        )}
       />
     </svg>
   )
diff --git a/apps/sim/app/(landing)/components/content-author-page/content-author-loading.tsx b/apps/sim/app/(landing)/components/content-author-page/content-author-loading.tsx
index 8ba0d5e00eb..6acc472aaa3 100644
--- a/apps/sim/app/(landing)/components/content-author-page/content-author-loading.tsx
+++ b/apps/sim/app/(landing)/components/content-author-page/content-author-loading.tsx
@@ -6,7 +6,7 @@ const AUTHOR_POST_SKELETON_COUNT = 4
 export function ContentAuthorLoading() {
   return (
     <section className='bg-[var(--bg)]'>
-      <div className='mx-auto w-full max-w-[1460px] px-20 pt-[112px] max-sm:px-5 max-sm:pt-20 max-lg:px-8'>
+      <div className='mx-auto w-full max-w-[1728px] px-10 pt-[112px] max-sm:pt-20 max-md:px-7 max-lg:px-8 max-xl:px-9'>
         <Skeleton className='mb-6 h-[16px] w-[100px] rounded-md bg-[var(--surface-hover)]' />
         <div className='flex items-center gap-4'>
           <Skeleton className='size-[64px] rounded-full bg-[var(--surface-hover)]' />
@@ -16,7 +16,7 @@ export function ContentAuthorLoading() {
 
       <div className='mt-8 h-px w-full bg-[var(--border)]' />
 
-      <div className='mx-auto w-full max-w-[1460px] px-20 max-sm:px-5 max-lg:px-8'>
+      <div className='mx-auto w-full max-w-[1728px] px-10 max-md:px-7 max-lg:px-8 max-xl:px-9'>
         <div className='border-[var(--border)] border-x'>
           {Array.from({ length: AUTHOR_POST_SKELETON_COUNT }).map((_, i) => (
             <div key={i}>
diff --git a/apps/sim/app/(landing)/components/content-author-page/content-author-page.tsx b/apps/sim/app/(landing)/components/content-author-page/content-author-page.tsx
index 1d759463026..4d77b215514 100644
--- a/apps/sim/app/(landing)/components/content-author-page/content-author-page.tsx
+++ b/apps/sim/app/(landing)/components/content-author-page/content-author-page.tsx
@@ -2,7 +2,6 @@ import Image from 'next/image'
 import Link from 'next/link'
 import type { ContentMeta } from '@/lib/content/schema'
 import { BackLink } from '@/app/(landing)/components/back-link'
-import { Cta } from '@/app/(landing)/components/cta/cta'
 import { JsonLd } from '@/app/(landing)/components/json-ld'
 
 interface ContentAuthorPageProps {
@@ -36,7 +35,7 @@ export function ContentAuthorPage({
       <section className='bg-[var(--bg)]'>
         {graphJsonLd && <JsonLd data={graphJsonLd} />}
 
-        <div className='mx-auto w-full max-w-[1460px] px-20 pt-[112px] max-sm:px-5 max-sm:pt-20 max-lg:px-8'>
+        <div className='mx-auto w-full max-w-[1728px] px-10 pt-[112px] max-sm:pt-20 max-md:px-7 max-lg:px-8 max-xl:px-9'>
           <div className='mb-6'>
             <BackLink href={basePath} label={`Back to ${sectionName}`} />
           </div>
@@ -60,7 +59,7 @@ export function ContentAuthorPage({
 
         <div className='mt-8 h-px w-full bg-[var(--border)]' />
 
-        <div className='mx-auto w-full max-w-[1460px] px-20 max-sm:px-5 max-lg:px-8'>
+        <div className='mx-auto w-full max-w-[1728px] px-10 max-md:px-7 max-lg:px-8 max-xl:px-9'>
           <div className='border-[var(--border)] border-x'>
             {posts.map((p) => (
               <div key={p.slug}>
@@ -68,7 +67,7 @@ export function ContentAuthorPage({
                   href={`${basePath}/${p.slug}`}
                   className='group flex items-start gap-6 p-6 transition-colors hover:bg-[var(--surface-hover)] md:items-center'
                 >
-                  <span className='hidden w-[120px] shrink-0 pt-1 text-[var(--text-muted)] text-xs uppercase tracking-[0.1em] md:block'>
+                  <span className='hidden w-[120px] shrink-0 pt-1 text-[var(--text-secondary)] text-xs uppercase tracking-[0.1em] md:block'>
                     {new Date(p.date).toLocaleDateString('en-US', {
                       month: 'short',
                       day: 'numeric',
@@ -78,7 +77,7 @@ export function ContentAuthorPage({
                   </span>
 
                   <div className='flex min-w-0 flex-1 flex-col gap-1'>
-                    <span className='text-[var(--text-muted)] text-xs uppercase tracking-[0.1em] md:hidden'>
+                    <span className='text-[var(--text-secondary)] text-xs uppercase tracking-[0.1em] md:hidden'>
                       {new Date(p.date).toLocaleDateString('en-US', {
                         month: 'short',
                         day: 'numeric',
@@ -89,7 +88,7 @@ export function ContentAuthorPage({
                     <h3 className='text-[var(--text-primary)] text-base leading-tight tracking-[-0.01em] lg:text-lg lg:leading-7'>
                       {p.title}
                     </h3>
-                    <p className='line-clamp-2 text-[var(--text-muted)] text-sm leading-[150%]'>
+                    <p className='line-clamp-2 text-[var(--text-secondary)] text-sm leading-[150%]'>
                       {p.description}
                     </p>
                   </div>
@@ -113,10 +112,6 @@ export function ContentAuthorPage({
 
         <div className='-mt-px h-px w-full bg-[var(--border)]' />
       </section>
-
-      <div className='mt-[120px] max-sm:mt-16 max-lg:mt-[88px]'>
-        <Cta />
-      </div>
     </>
   )
 }
diff --git a/apps/sim/app/(landing)/components/content-index-page/content-index-loading.tsx b/apps/sim/app/(landing)/components/content-index-page/content-index-loading.tsx
index c5242b158b6..f9de9c7f280 100644
--- a/apps/sim/app/(landing)/components/content-index-page/content-index-loading.tsx
+++ b/apps/sim/app/(landing)/components/content-index-page/content-index-loading.tsx
@@ -1,4 +1,5 @@
-import { Skeleton } from '@sim/emcn'
+import { cn, Skeleton } from '@sim/emcn'
+import { LANDING_CONTENT_WIDTH, LANDING_GUTTER } from '@/app/(landing)/components/landing-layout'
 
 const FEATURED_SKELETON_COUNT = 3
 const LIST_SKELETON_COUNT = 5
@@ -7,16 +8,16 @@ const LIST_SKELETON_COUNT = 5
 export function ContentIndexLoading() {
   return (
     <section className='bg-[var(--bg)]'>
-      <div className='mx-auto w-full max-w-[1460px]'>
-        <div className='px-20 pt-[112px] max-sm:px-5 max-sm:pt-20 max-lg:px-8'>
+      <div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER)}>
+        <div className='pt-[112px] max-sm:pt-20'>
           <Skeleton className='mb-5 h-[20px] w-[60px] rounded-md bg-[var(--surface-hover)]' />
           <div className='flex flex-col gap-4 md:flex-row md:items-end md:justify-between'>
             <Skeleton className='h-[40px] w-[240px] rounded-[4px] bg-[var(--surface-hover)]' />
-            <Skeleton className='h-[18px] w-[320px] rounded-[4px] bg-[var(--surface-hover)]' />
+            <Skeleton className='h-[18px] w-[320px] max-w-full rounded-[4px] bg-[var(--surface-hover)]' />
           </div>
         </div>
 
-        <div className='mx-20 mt-8 border-[var(--border)] border-x max-sm:mx-5 max-lg:mx-8'>
+        <div className='mt-8 border-[var(--border)] border-x'>
           <div className='h-px w-full bg-[var(--border)]' />
 
           <div className='flex max-sm:flex-col'>
diff --git a/apps/sim/app/(landing)/components/content-index-page/content-index-page.tsx b/apps/sim/app/(landing)/components/content-index-page/content-index-page.tsx
index bd3e0bf8dff..b2138a8d2ef 100644
--- a/apps/sim/app/(landing)/components/content-index-page/content-index-page.tsx
+++ b/apps/sim/app/(landing)/components/content-index-page/content-index-page.tsx
@@ -3,7 +3,6 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { paginateContentPosts } from '@/lib/content/index-list'
 import type { ContentMeta } from '@/lib/content/schema'
-import { Cta } from '@/app/(landing)/components/cta/cta'
 import { JsonLd } from '@/app/(landing)/components/json-ld'
 
 interface ContentIndexPageProps {
@@ -44,12 +43,12 @@ export function ContentIndexPage({
       <section className='bg-[var(--bg)]'>
         <JsonLd data={collectionJsonLd} />
 
-        <div className='mx-auto w-full max-w-[1460px] px-20 pt-[112px] max-sm:px-5 max-sm:pt-20 max-lg:px-8'>
+        <div className='mx-auto w-full max-w-[1728px] px-10 pt-[112px] max-sm:pt-20 max-md:px-7 max-lg:px-8 max-xl:px-9'>
           <div className='flex flex-col gap-4 md:flex-row md:items-end md:justify-between'>
             <h1 className='text-balance text-[28px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] lg:text-[40px]'>
               {heading}
             </h1>
-            <p className='max-w-[540px] text-[var(--text-muted)] text-sm leading-[150%] tracking-[0.02em] lg:text-base'>
+            <p className='max-w-[540px] text-[var(--text-secondary)] text-sm leading-[150%] tracking-[0.02em] lg:text-base'>
               {subheading}
             </p>
           </div>
@@ -57,7 +56,7 @@ export function ContentIndexPage({
 
         <div className='mt-8 h-px w-full bg-[var(--border)]' />
 
-        <div className='mx-auto w-full max-w-[1460px] px-20 max-sm:px-5 max-lg:px-8'>
+        <div className='mx-auto w-full max-w-[1728px] px-10 max-md:px-7 max-lg:px-8 max-xl:px-9'>
           <div className='border-[var(--border)] border-x'>
             {featured.length > 0 && (
               <>
@@ -81,7 +80,7 @@ export function ContentIndexPage({
                         />
                       </div>
                       <div className='flex flex-col gap-2'>
-                        <span className='text-[var(--text-muted)] text-xs uppercase tracking-[0.1em]'>
+                        <span className='text-[var(--text-secondary)] text-xs uppercase tracking-[0.1em]'>
                           {new Date(p.date).toLocaleDateString('en-US', {
                             month: 'short',
                             day: 'numeric',
@@ -89,10 +88,10 @@ export function ContentIndexPage({
                             timeZone: 'UTC',
                           })}
                         </span>
-                        <h3 className='text-[var(--text-primary)] text-lg leading-tight tracking-[-0.01em]'>
+                        <h2 className='text-[var(--text-primary)] text-lg leading-tight tracking-[-0.01em]'>
                           {p.title}
-                        </h3>
-                        <p className='line-clamp-2 text-[var(--text-muted)] text-sm leading-[150%]'>
+                        </h2>
+                        <p className='line-clamp-2 text-[var(--text-secondary)] text-sm leading-[150%]'>
                           {p.description}
                         </p>
                       </div>
@@ -110,7 +109,7 @@ export function ContentIndexPage({
                   href={`${basePath}/${p.slug}`}
                   className='group flex items-start gap-6 p-6 transition-colors hover:bg-[var(--surface-hover)] md:items-center'
                 >
-                  <span className='hidden w-[120px] shrink-0 pt-1 text-[var(--text-muted)] text-xs uppercase tracking-[0.1em] md:block'>
+                  <span className='hidden w-[120px] shrink-0 pt-1 text-[var(--text-secondary)] text-xs uppercase tracking-[0.1em] md:block'>
                     {new Date(p.date).toLocaleDateString('en-US', {
                       month: 'short',
                       day: 'numeric',
@@ -120,7 +119,7 @@ export function ContentIndexPage({
                   </span>
 
                   <div className='flex min-w-0 flex-1 flex-col gap-1'>
-                    <span className='text-[var(--text-muted)] text-xs uppercase tracking-[0.1em] md:hidden'>
+                    <span className='text-[var(--text-secondary)] text-xs uppercase tracking-[0.1em] md:hidden'>
                       {new Date(p.date).toLocaleDateString('en-US', {
                         month: 'short',
                         day: 'numeric',
@@ -128,10 +127,10 @@ export function ContentIndexPage({
                         timeZone: 'UTC',
                       })}
                     </span>
-                    <h3 className='text-[var(--text-primary)] text-base leading-tight tracking-[-0.01em] lg:text-lg lg:leading-7'>
+                    <h2 className='text-[var(--text-primary)] text-base leading-tight tracking-[-0.01em] lg:text-lg lg:leading-7'>
                       {p.title}
-                    </h3>
-                    <p className='line-clamp-2 text-[var(--text-muted)] text-sm leading-[150%]'>
+                    </h2>
+                    <p className='line-clamp-2 text-[var(--text-secondary)] text-sm leading-[150%]'>
                       {p.description}
                     </p>
                   </div>
@@ -163,7 +162,7 @@ export function ContentIndexPage({
                       Previous
                     </ChipLink>
                   )}
-                  <span className='text-[var(--text-muted)] text-sm'>
+                  <span className='text-[var(--text-secondary)] text-sm'>
                     Page {page} of {totalPages}
                   </span>
                   {page < totalPages && (
@@ -183,10 +182,6 @@ export function ContentIndexPage({
 
         <div className='-mt-px h-px w-full bg-[var(--border)]' />
       </section>
-
-      <div className='mt-[120px] max-sm:mt-16 max-lg:mt-[88px]'>
-        <Cta />
-      </div>
     </>
   )
 }
diff --git a/apps/sim/app/(landing)/components/content-post-page/content-post-loading.tsx b/apps/sim/app/(landing)/components/content-post-page/content-post-loading.tsx
index 93b65565d23..c26f8e72c22 100644
--- a/apps/sim/app/(landing)/components/content-post-page/content-post-loading.tsx
+++ b/apps/sim/app/(landing)/components/content-post-page/content-post-loading.tsx
@@ -1,25 +1,26 @@
-import { Skeleton } from '@sim/emcn'
+import { cn, Skeleton } from '@sim/emcn'
+import { LANDING_CONTENT_WIDTH, LANDING_GUTTER } from '@/app/(landing)/components/landing-layout'
 
 /** Shared loading skeleton for a content section's post-detail route. */
 export function ContentPostLoading() {
   return (
     <article className='w-full bg-[var(--bg)]'>
-      <div className='mx-auto w-full max-w-[1460px] px-20 pt-[112px] max-sm:px-5 max-sm:pt-20 max-lg:px-8'>
+      <div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER, 'pt-[112px] max-sm:pt-20')}>
         <div className='mb-6'>
           <Skeleton className='h-[16px] w-[100px] rounded-[4px] bg-[var(--surface-hover)]' />
         </div>
-        <div className='flex flex-col gap-8 md:flex-row md:gap-12'>
-          <div className='w-full shrink-0 md:w-[450px]'>
+        <div className='flex min-w-0 flex-col gap-8 lg:flex-row lg:gap-12'>
+          <div className='w-full shrink-0 lg:w-[40%] lg:max-w-[450px]'>
             <Skeleton className='aspect-[450/360] w-full rounded-[5px] bg-[var(--surface-hover)]' />
           </div>
-          <div className='flex flex-1 flex-col justify-between'>
+          <div className='flex min-w-0 flex-1 flex-col justify-between'>
             <div>
               <Skeleton className='h-[44px] w-full rounded-[4px] bg-[var(--surface-hover)]' />
               <Skeleton className='mt-2 h-[44px] w-[80%] rounded-[4px] bg-[var(--surface-hover)]' />
               <Skeleton className='mt-4 h-[18px] w-full rounded-[4px] bg-[var(--surface-hover)]' />
               <Skeleton className='mt-2 h-[18px] w-[70%] rounded-[4px] bg-[var(--surface-hover)]' />
             </div>
-            <div className='mt-6 flex items-center gap-6'>
+            <div className='mt-6 flex flex-wrap items-center gap-6'>
               <Skeleton className='h-[12px] w-[100px] rounded-[4px] bg-[var(--surface-hover)]' />
               <div className='flex items-center gap-2'>
                 <Skeleton className='size-[20px] rounded-full bg-[var(--surface-hover)]' />
@@ -32,8 +33,8 @@ export function ContentPostLoading() {
 
       <div className='mt-8 h-px w-full bg-[var(--border)]' />
 
-      <div className='mx-auto w-full max-w-[1460px]'>
-        <div className='mx-20 border-[var(--border)] border-x max-sm:mx-5 max-lg:mx-8'>
+      <div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER)}>
+        <div className='border-[var(--border)] border-x'>
           <div className='mx-auto max-w-[900px] px-6 py-16'>
             <div className='space-y-4'>
               <Skeleton className='h-[16px] w-full rounded-[4px] bg-[var(--surface-hover)]' />
diff --git a/apps/sim/app/(landing)/components/content-post-page/content-post-page.tsx b/apps/sim/app/(landing)/components/content-post-page/content-post-page.tsx
index 9876b42894d..5223621a50b 100644
--- a/apps/sim/app/(landing)/components/content-post-page/content-post-page.tsx
+++ b/apps/sim/app/(landing)/components/content-post-page/content-post-page.tsx
@@ -48,13 +48,13 @@ export function ContentPostPage({
   return (
     <article className='w-full bg-[var(--bg)]' itemScope itemType='https://schema.org/BlogPosting'>
       <JsonLd data={graphJsonLd} />
-      <header className='mx-auto w-full max-w-[1460px] px-20 pt-[112px] max-sm:px-5 max-sm:pt-20 max-lg:px-8'>
+      <header className='mx-auto w-full max-w-[1728px] px-10 pt-[112px] max-sm:pt-20 max-md:px-7 max-lg:px-8 max-xl:px-9'>
         <div className='mb-6'>
           <BackLink href={basePath} label={backLabel} />
         </div>
 
-        <div className='flex flex-col gap-8 md:flex-row md:gap-12'>
-          <div className='w-full shrink-0 md:w-[450px]'>
+        <div className='flex min-w-0 flex-col gap-8 lg:flex-row lg:gap-12'>
+          <div className='w-full shrink-0 lg:w-[40%] lg:max-w-[450px]'>
             <div className='relative w-full overflow-hidden rounded-[5px]'>
               <Image
                 src={post.ogImage}
@@ -62,7 +62,7 @@ export function ContentPostPage({
                 width={450}
                 height={360}
                 className='h-auto w-full'
-                sizes='(max-width: 768px) 100vw, 450px'
+                sizes='(max-width: 1023px) calc(100vw - 64px), 450px'
                 priority
                 fetchPriority='high'
                 itemProp='image'
@@ -70,7 +70,7 @@ export function ContentPostPage({
               />
             </div>
           </div>
-          <div className='flex flex-1 flex-col justify-between'>
+          <div className='flex min-w-0 flex-1 flex-col justify-between'>
             <div>
               <h1
                 className='text-balance text-[28px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em] sm:text-[36px] md:text-[44px] lg:text-[52px]'
@@ -88,7 +88,7 @@ export function ContentPostPage({
             <div className='mt-6 flex flex-wrap items-center gap-x-6 gap-y-2'>
               <div className='flex items-center gap-2'>
                 <time
-                  className='text-[var(--text-muted)] text-xs uppercase tracking-[0.1em]'
+                  className='text-[var(--text-secondary)] text-xs uppercase tracking-[0.1em]'
                   dateTime={post.date}
                   itemProp='datePublished'
                 >
@@ -96,11 +96,11 @@ export function ContentPostPage({
                 </time>
                 {showUpdated ? (
                   <>
-                    <span aria-hidden='true' className='text-[var(--text-muted)] text-xs'>
+                    <span aria-hidden='true' className='text-[var(--text-secondary)] text-xs'>
                       ·
                     </span>
                     <time
-                      className='text-[var(--text-muted)] text-xs uppercase tracking-[0.1em]'
+                      className='text-[var(--text-secondary)] text-xs uppercase tracking-[0.1em]'
                       dateTime={modifiedIso}
                       itemProp='dateModified'
                     >
@@ -123,7 +123,7 @@ export function ContentPostPage({
                     <Link
                       href={`${basePath}/authors/${encodeURIComponent(a?.id ?? '')}`}
                       rel='author'
-                      className='text-[var(--text-muted)] text-xs uppercase tracking-[0.1em] hover:text-[var(--text-primary)]'
+                      className='text-[var(--text-secondary)] text-xs uppercase tracking-[0.1em] hover:text-[var(--text-primary)]'
                       itemProp='author'
                       itemScope
                       itemType='https://schema.org/Person'
@@ -143,10 +143,10 @@ export function ContentPostPage({
 
       <div className='mt-8 h-px w-full bg-[var(--border)]' />
 
-      <div className='mx-auto w-full max-w-[1460px] px-20 max-sm:px-5 max-lg:px-8'>
+      <div className='mx-auto w-full max-w-[1728px] px-10 max-md:px-7 max-lg:px-8 max-xl:px-9'>
         <div className='border-[var(--border)] border-x'>
           <div className='mx-auto max-w-[900px] px-6 py-16' itemProp='articleBody'>
-            <div className='prose prose-lg max-w-none prose-blockquote:border-[var(--border-1)] prose-hr:border-[var(--border)] prose-headings:font-season prose-a:text-[var(--text-primary)] prose-blockquote:text-[var(--text-muted)] prose-code:text-[var(--text-primary)] prose-headings:text-[var(--text-primary)] prose-li:text-[var(--text-body)] prose-p:text-[var(--text-body)] prose-strong:text-[var(--text-primary)] prose-headings:tracking-[-0.02em]'>
+            <div className='prose prose-lg max-w-none prose-blockquote:border-[var(--border-1)] prose-hr:border-[var(--border)] prose-headings:font-season prose-a:text-[var(--text-primary)] prose-blockquote:text-[var(--text-secondary)] prose-code:text-[var(--text-primary)] prose-headings:text-[var(--text-primary)] prose-li:text-[var(--text-body)] prose-p:text-[var(--text-body)] prose-strong:text-[var(--text-primary)] prose-headings:tracking-[-0.02em]'>
               <Article />
               {post.faq && post.faq.length > 0 ? <FAQ items={post.faq} /> : null}
             </div>
@@ -174,13 +174,13 @@ export function ContentPostPage({
                       />
                     </div>
                     <div className='flex flex-col gap-2'>
-                      <span className='text-[var(--text-muted)] text-xs uppercase tracking-[0.1em]'>
+                      <span className='text-[var(--text-secondary)] text-xs uppercase tracking-[0.1em]'>
                         {formatDate(p.date)}
                       </span>
                       <h3 className='text-[var(--text-primary)] text-lg leading-tight tracking-[-0.01em]'>
                         {p.title}
                       </h3>
-                      <p className='line-clamp-2 text-[var(--text-muted)] text-sm leading-[150%]'>
+                      <p className='line-clamp-2 text-[var(--text-secondary)] text-sm leading-[150%]'>
                         {p.description}
                       </p>
                     </div>
diff --git a/apps/sim/app/(landing)/components/cta/cta.module.css b/apps/sim/app/(landing)/components/cta/cta.module.css
new file mode 100644
index 00000000000..58d6c8b3d4e
--- /dev/null
+++ b/apps/sim/app/(landing)/components/cta/cta.module.css
@@ -0,0 +1,36 @@
+/**
+ * A soft central cutout lets painted sky rise alongside the overlapping copy.
+ * The vertical mask dissolves the outer boundaries into the theme canvas;
+ * the landscape retains its full detail below the content.
+ */
+.plate {
+  --plate-mask: linear-gradient(
+    to bottom,
+    rgb(0 0 0 / 0) 0%,
+    rgb(0 0 0 / 0.074) 1.7%,
+    rgb(0 0 0 / 0.259) 3.3%,
+    rgb(0 0 0 / 0.5) 5%,
+    rgb(0 0 0 / 0.741) 6.7%,
+    rgb(0 0 0 / 0.926) 8.3%,
+    rgb(0 0 0 / 1) 10%,
+    rgb(0 0 0 / 1) 80%,
+    rgb(0 0 0 / 0.926) 83.3%,
+    rgb(0 0 0 / 0.741) 86.7%,
+    rgb(0 0 0 / 0.5) 90%,
+    rgb(0 0 0 / 0.259) 93.3%,
+    rgb(0 0 0 / 0.074) 96.7%,
+    rgb(0 0 0 / 0) 100%
+  );
+  --copy-mask: radial-gradient(
+    ellipse 52% 38% at 50% 0%,
+    rgb(0 0 0 / 0) 24%,
+    rgb(0 0 0 / 0.08) 40%,
+    rgb(0 0 0 / 0.35) 58%,
+    rgb(0 0 0 / 0.75) 78%,
+    rgb(0 0 0 / 1) 100%
+  );
+  -webkit-mask-image: var(--plate-mask), var(--copy-mask);
+  mask-image: var(--plate-mask), var(--copy-mask);
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+}
diff --git a/apps/sim/app/(landing)/components/cta/cta.tsx b/apps/sim/app/(landing)/components/cta/cta.tsx
index b82a6bcf7ef..26fb4fc78bd 100644
--- a/apps/sim/app/(landing)/components/cta/cta.tsx
+++ b/apps/sim/app/(landing)/components/cta/cta.tsx
@@ -1,40 +1,70 @@
-import { ChipLink } from '@sim/emcn'
-import { DEMO_HREF, SIGNUP_HREF } from '@/app/(landing)/constants'
+import { cn } from '@sim/emcn'
+import Image from 'next/image'
+import styles from '@/app/(landing)/components/cta/cta.module.css'
+import { HeroCta } from '@/app/(landing)/components/hero-cta'
+import {
+  HOME_TYPE,
+  LANDING_CONTENT_WIDTH,
+  LANDING_GUTTER,
+} from '@/app/(landing)/components/landing-layout'
+
+/** One shared closing statement, with a deliberate line break between sentences. */
+const CTA_HEADLINE = ['Every agent your company runs.', 'All in one place.'] as const
 
 /**
- * Landing pre-footer CTA - the page's final conversion band. A tall, centered
- * closing band with a large headline over two pill actions - a primary
- * "Get started" routing to sign-up and an outline "Contact sales" routing to
- * the demo-booking page.
- *
- * The band carries no vertical padding of its own: its spacious closing moment
- * comes from the uniform inter-section `gap` (owned by the `<main>` flex in
- * `landing.tsx`) above it and the `Footer`'s top margin below it. The headline
- * mirrors the hero `<h1>` exactly (48px / `leading-[1.1]` and the same responsive
- * ramp), so the page opens and closes on the same display size. Horizontal
- * padding (`px-20`) matches every section above, and the section is capped and
- * centered at the shared `max-w-[1460px]`.
+ * Painted pre-footer CTA for every marketing page, mounted once by LandingShell.
+ * Theme classes select the matching lazy-loaded painting without client state.
+ * The sky mask keeps the copy clear and the lower edge fades into the footer.
  */
 export function Cta() {
   return (
     <section
       id='cta'
       aria-labelledby='cta-heading'
-      className='mx-auto flex w-full max-w-[1460px] flex-col items-center gap-[22px] px-20 text-center max-sm:px-5 max-lg:px-8'
+      className='relative isolate flex w-full flex-col'
     >
-      <h2
-        id='cta-heading'
-        className='max-w-[860px] text-balance text-[48px] text-[var(--text-primary)] leading-[1.1] max-sm:text-[32px] max-xl:text-[40px]'
+      <div
+        className={cn(
+          'relative z-10 flex flex-col items-center gap-8 pt-10 text-center max-sm:gap-7 max-sm:pt-6 max-lg:pt-8',
+          LANDING_CONTENT_WIDTH,
+          LANDING_GUTTER
+        )}
+      >
+        <h2
+          id='cta-heading'
+          className={cn('text-balance text-[var(--text-primary)]', HOME_TYPE.h2Display)}
+        >
+          {CTA_HEADLINE.map((line) => (
+            <span key={line} className='block'>
+              {line}{' '}
+            </span>
+          ))}
+        </h2>
+        <div className='max-sm:w-full'>
+          <HeroCta size='display' secondaryLabel='Start building' trackingSection='footer_cta' />
+        </div>
+      </div>
+
+      <div
+        aria-hidden='true'
+        className='-mt-[clamp(96px,12.5vw,240px)] max-sm:-mt-6 pointer-events-none relative aspect-video w-full max-sm:aspect-[16/10]'
       >
-        Build your first agent today.
-      </h2>
-      <div className='flex items-center gap-1'>
-        <ChipLink variant='primary' href={SIGNUP_HREF}>
-          Get started
-        </ChipLink>
-        <ChipLink href={DEMO_HREF} className='border border-[var(--border-1)]'>
-          Contact sales
-        </ChipLink>
+        <Image
+          src='/landing/cta-san-francisco-painted-light.webp'
+          alt=''
+          fill
+          quality={90}
+          sizes='(max-width: 639px) 112vw, 100vw'
+          className={cn('object-cover object-center dark:hidden', styles.plate)}
+        />
+        <Image
+          src='/landing/cta-san-francisco-painted-dark.webp'
+          alt=''
+          fill
+          quality={90}
+          sizes='(max-width: 639px) 112vw, 100vw'
+          className={cn('hidden object-cover object-center dark:block', styles.plate)}
+        />
       </div>
     </section>
   )
diff --git a/apps/sim/app/(landing)/components/featured-customer/featured-customer-card.tsx b/apps/sim/app/(landing)/components/featured-customer/featured-customer-card.tsx
new file mode 100644
index 00000000000..0b8520a57e1
--- /dev/null
+++ b/apps/sim/app/(landing)/components/featured-customer/featured-customer-card.tsx
@@ -0,0 +1,154 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+import { ChipTag, cn, usePrefersReducedMotion } from '@sim/emcn'
+import Image from 'next/image'
+import { LANDING_STAGE_RADIUS } from '@/app/(landing)/components/landing-layout'
+
+/** A customer wordmark from `/public/landing/logos`, sized like the logo strip sizes it: by optical height at its own aspect. */
+export interface FeaturedCustomerLogo {
+  src: string
+  alt: string
+  /** Intrinsic width ÷ height, so the mark scales without distortion. */
+  aspect: number
+  /** Display height in px, tuned by eye for the card. */
+  height: number
+}
+
+export interface FeaturedCustomerStory {
+  id: string
+  company: string
+  caption: string
+  media: { kind: 'video'; poster: string; src: string; alt: string } | { kind: 'brand' }
+  /** The customer's wordmark, shown under the editorial product caption. */
+  logo: FeaturedCustomerLogo
+}
+
+/**
+ * The wordmark assets are a single dark ink; over the film they are flattened
+ * and inverted to white, then eased back to sit with the caption's tone.
+ */
+const LOGO_ON_FILM = 'brightness-0 invert opacity-80'
+
+interface FeaturedCustomerCardProps {
+  story: FeaturedCustomerStory
+  active: boolean
+  emphasized: boolean
+}
+
+/** Shared media and editorial caption treatment for each featured-customer slide. */
+export function FeaturedCustomerCard({ story, active, emphasized }: FeaturedCustomerCardProps) {
+  const videoRef = useRef<HTMLVideoElement>(null)
+  const reducedMotion = usePrefersReducedMotion()
+  const isFilm = story.media.kind === 'video'
+
+  useEffect(() => {
+    const video = videoRef.current
+    if (!video) return
+    if (!active || reducedMotion) {
+      video.pause()
+      return
+    }
+
+    /**
+     * The film streams only while the slide is on screen in a visible tab:
+     * `play()` defeats `preload='metadata'`, so calling it at mount would pull
+     * the whole file for a section well below the fold. Autoplay may still be
+     * blocked, in which case the poster remains the fallback.
+     */
+    const canObserve = typeof IntersectionObserver !== 'undefined'
+    let inView = !canObserve
+    const sync = () => {
+      if (inView && !document.hidden) void video.play().catch(() => {})
+      else video.pause()
+    }
+    const observer = canObserve
+      ? new IntersectionObserver(([entry]) => {
+          inView = entry.isIntersecting
+          sync()
+        })
+      : null
+    if (observer) observer.observe(video)
+    else sync()
+    document.addEventListener('visibilitychange', sync)
+
+    return () => {
+      observer?.disconnect()
+      document.removeEventListener('visibilitychange', sync)
+    }
+  }, [active, reducedMotion])
+
+  return (
+    <article
+      aria-hidden={!active}
+      className={cn(
+        'relative isolate size-full overflow-hidden',
+        isFilm ? 'bg-[var(--text-primary)]' : 'bg-[var(--surface-4)]',
+        LANDING_STAGE_RADIUS
+      )}
+    >
+      {story.media.kind === 'video' && (
+        <>
+          <Image
+            src={story.media.poster}
+            alt={story.media.alt}
+            fill
+            sizes='(max-width: 640px) 100vw, 1728px'
+            quality={90}
+            className='object-cover'
+          />
+          <video
+            ref={videoRef}
+            aria-hidden='true'
+            loop
+            muted
+            playsInline
+            preload='metadata'
+            src={story.media.src}
+            tabIndex={-1}
+            className='pointer-events-none absolute inset-0 size-full object-cover motion-reduce:hidden'
+          />
+          <div className='absolute inset-0 bg-[linear-gradient(135deg,rgba(0,0,0,0.68)_0%,rgba(0,0,0,0.3)_36%,rgba(0,0,0,0.08)_70%)]' />
+        </>
+      )}
+
+      <div
+        data-customer-story-content='true'
+        className={cn(
+          'relative z-10 flex h-full items-start p-12 transition-[opacity,translate] duration-600 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:translate-y-0 motion-reduce:transition-none max-sm:p-6 max-lg:p-8',
+          emphasized ? 'translate-y-0 opacity-100' : 'translate-y-2 opacity-40'
+        )}
+      >
+        <div className='max-w-[42rem]'>
+          <ChipTag
+            variant={isFilm ? 'brand' : 'gray'}
+            brandColor='transparent'
+            brandForeground='light'
+            brandStrokeColor='rgba(255, 255, 255, 0.4)'
+            className='h-6 rounded-full px-3 opacity-80'
+          >
+            Featured customer
+          </ChipTag>
+          <p
+            className={cn(
+              'mt-4 text-pretty text-[44px] leading-[1.08] tracking-[-0.025em] max-sm:text-[30px] max-xl:text-[38px]',
+              isFilm ? 'text-white' : 'text-[var(--text-primary)]'
+            )}
+          >
+            {story.caption}
+          </p>
+          <Image
+            src={story.logo.src}
+            alt={story.logo.alt}
+            height={story.logo.height}
+            width={Math.round(story.logo.height * story.logo.aspect)}
+            className={cn(
+              'mt-8 h-auto max-w-full',
+              isFilm ? LOGO_ON_FILM : 'brightness-0 dark:invert'
+            )}
+          />
+        </div>
+      </div>
+    </article>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/featured-customer/featured-customer-navigation-button.tsx b/apps/sim/app/(landing)/components/featured-customer/featured-customer-navigation-button.tsx
new file mode 100644
index 00000000000..92afefd1f5b
--- /dev/null
+++ b/apps/sim/app/(landing)/components/featured-customer/featured-customer-navigation-button.tsx
@@ -0,0 +1,124 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { Button, cn, Tooltip } from '@sim/emcn'
+import { ArrowLeft, ArrowRight } from '@sim/emcn/icons'
+
+const HOVER_NAVIGATION_DELAY_MS = 1000
+
+interface FeaturedCustomerNavigationButtonProps {
+  direction: 'next' | 'previous'
+  label: string
+  /** No story lies in this direction: the arrow stays as a landmark but takes no input. */
+  disabled?: boolean
+  onSelect: () => void
+}
+
+/**
+ * One arrow of the carousel's control pair, drawn for the page ground in the
+ * landing's ink tokens: a live arrow is full ink inside a mid-grey ring, a
+ * disabled one a lighter grey inside a hairline-grey ring, so both read on the
+ * white and the live one reads first. Advances on click or after a sustained
+ * mouse hover; positioned by the pair that holds it, not by itself.
+ */
+export function FeaturedCustomerNavigationButton({
+  direction,
+  label,
+  disabled = false,
+  onSelect,
+}: FeaturedCustomerNavigationButtonProps) {
+  const hoverTimerRef = useRef<number | null>(null)
+  const [isHovering, setIsHovering] = useState(false)
+  const [showTooltipContent, setShowTooltipContent] = useState(true)
+  const Icon = direction === 'next' ? ArrowRight : ArrowLeft
+
+  const stopHoverProgress = () => {
+    if (hoverTimerRef.current !== null) {
+      window.clearTimeout(hoverTimerRef.current)
+      hoverTimerRef.current = null
+    }
+    setIsHovering(false)
+  }
+
+  const selectStory = () => {
+    stopHoverProgress()
+    setShowTooltipContent(false)
+    onSelect()
+  }
+
+  const startHoverProgress = () => {
+    if (disabled) return
+    stopHoverProgress()
+    setShowTooltipContent(true)
+    setIsHovering(true)
+    hoverTimerRef.current = window.setTimeout(selectStory, HOVER_NAVIGATION_DELAY_MS)
+  }
+
+  useEffect(() => {
+    return () => {
+      if (hoverTimerRef.current !== null) {
+        window.clearTimeout(hoverTimerRef.current)
+      }
+    }
+  }, [])
+
+  return (
+    <Tooltip.Root key={label}>
+      <Tooltip.Trigger asChild>
+        <Button
+          variant='ghost'
+          onClick={selectStory}
+          onMouseEnter={startHoverProgress}
+          onMouseLeave={stopHoverProgress}
+          onFocus={() => setShowTooltipContent(true)}
+          aria-label={label}
+          disabled={disabled}
+          type='button'
+          className={cn(
+            'group relative size-10 rounded-full border-0 bg-transparent p-0 shadow-none transition-[background-color,color,transform] duration-150 max-sm:size-9',
+            disabled
+              ? 'cursor-default text-[var(--text-subtle)]'
+              : 'text-[var(--text-primary)] hover-hover:bg-[var(--surface-hover)] active:scale-[0.96]'
+          )}
+        >
+          <svg
+            aria-hidden='true'
+            viewBox='0 0 40 40'
+            className='-rotate-90 pointer-events-none absolute inset-0 size-full overflow-visible'
+          >
+            <circle
+              data-customer-progress-track='true'
+              cx='20'
+              cy='20'
+              r='19'
+              strokeWidth='2'
+              className={cn(
+                'fill-none transition-colors duration-150',
+                disabled
+                  ? 'stroke-[var(--border)]'
+                  : 'stroke-[var(--text-subtle)] group-hover-hover:stroke-[var(--text-secondary)]'
+              )}
+            />
+            <circle
+              data-customer-progress-ring='true'
+              cx='20'
+              cy='20'
+              r='19'
+              pathLength='100'
+              strokeWidth='2'
+              strokeLinecap='round'
+              className={cn(
+                'fill-none stroke-[var(--text-primary)] transition-[stroke-dashoffset] ease-linear [stroke-dasharray:100] motion-reduce:transition-none',
+                isHovering
+                  ? 'opacity-100 duration-1000 [stroke-dashoffset:0]'
+                  : 'opacity-0 duration-0 [stroke-dashoffset:100]'
+              )}
+            />
+          </svg>
+          <Icon className='relative z-10 size-[16px]' />
+        </Button>
+      </Tooltip.Trigger>
+      {showTooltipContent && !disabled && <Tooltip.Content side='top'>{label}</Tooltip.Content>}
+    </Tooltip.Root>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/featured-customer/featured-customer.test.tsx b/apps/sim/app/(landing)/components/featured-customer/featured-customer.test.tsx
new file mode 100644
index 00000000000..fb3ea91cb76
--- /dev/null
+++ b/apps/sim/app/(landing)/components/featured-customer/featured-customer.test.tsx
@@ -0,0 +1,289 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, type ReactNode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const motionPreference = vi.hoisted(() => ({ reduced: false }))
+
+vi.mock('@sim/emcn', () => ({
+  Button: (props: React.ButtonHTMLAttributes<HTMLButtonElement>) => <button {...props} />,
+  ChipTag: ({ children }: { children: ReactNode }) => <span>{children}</span>,
+  cn: (...values: Array<string | false | null | undefined>) => values.filter(Boolean).join(' '),
+  usePrefersReducedMotion: () => motionPreference.reduced,
+  Tooltip: {
+    Root: ({ children }: { children: ReactNode }) => children,
+    Trigger: ({ children }: { children: ReactNode }) => children,
+    Content: ({ children }: { children: ReactNode }) => (
+      <span data-testid='customer-tooltip'>{children}</span>
+    ),
+  },
+}))
+
+vi.mock('next/image', () => ({
+  default: ({ src, alt, className }: { src: string; alt: string; className?: string }) => (
+    <img src={src} alt={alt} className={className} />
+  ),
+}))
+
+vi.mock('@sim/emcn/icons', () => ({
+  ArrowLeft: () => <svg aria-hidden='true' />,
+  ArrowRight: () => <svg aria-hidden='true' />,
+}))
+
+import { FeaturedCustomer } from '@/app/(landing)/components/featured-customer/featured-customer'
+
+beforeEach(() => {
+  motionPreference.reduced = false
+  vi.spyOn(HTMLMediaElement.prototype, 'play').mockResolvedValue(undefined)
+  vi.spyOn(HTMLMediaElement.prototype, 'pause').mockImplementation(() => {})
+})
+
+afterEach(() => {
+  vi.useRealTimers()
+  vi.restoreAllMocks()
+  document.body.replaceChildren()
+})
+
+describe('FeaturedCustomer', () => {
+  it('keeps the next story outside the centered card and brings it into focus', () => {
+    ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const root = createRoot(host)
+
+    act(() => {
+      root.render(<FeaturedCustomer />)
+    })
+
+    const rivian = host.querySelector('[aria-label="1 of 2: Rivian"]') as HTMLElement
+    const expRealty = host.querySelector('[aria-label="2 of 2: eXp Realty"]') as HTMLElement
+    const nextButton = host.querySelector(
+      '[aria-label="View eXp Realty customer story"]'
+    ) as HTMLButtonElement
+    const expRealtyContent = expRealty.querySelector(
+      '[data-customer-story-content="true"]'
+    ) as HTMLElement
+    const carouselRail = host.querySelector('[data-customer-carousel-rail="true"]') as HTMLElement
+    const video = rivian.querySelector('video') as HTMLVideoElement
+    video.currentTime = 12
+
+    expect(video.play).toHaveBeenCalledOnce()
+
+    expect(rivian.querySelector('img[alt="Rivian | Volkswagen Group Technologies"]')).not.toBeNull()
+    expect(host.querySelector('blockquote')).toBeNull()
+    expect(host.textContent).not.toContain('Jordan Lee')
+    expect(host.textContent).not.toContain('Director of Enterprise Systems')
+    expect(host.textContent).not.toContain('eXp Realty team')
+    expect(rivian.textContent).toContain(
+      'Connect systems and build, deploy, and manage AI agents with Sim.'
+    )
+    expect(expRealty.textContent).toContain(
+      'Bring teams, shared knowledge, and AI agents into one workspace with Sim.'
+    )
+    expect(rivian.querySelector('video')?.getAttribute('src')).toBe(
+      '/landing/customer-stories/rivian-r2-loop.mp4'
+    )
+    expect(expRealty.querySelector('video')).toBeNull()
+    expect(
+      [...expRealty.querySelectorAll('img')].map((image) => image.getAttribute('src'))
+    ).toEqual(['/landing/logos/exp-realty.svg'])
+
+    const controls = nextButton.parentElement as HTMLElement
+    expect(controls.className).toContain('justify-end')
+    expect(controls.className).toContain('xl:pr-24')
+    expect(controls.nextElementSibling).toBe(carouselRail)
+    const disabledPrevious = host.querySelector(
+      '[aria-label="Previous customer story"]'
+    ) as HTMLButtonElement
+    expect(disabledPrevious.disabled).toBe(true)
+    expect(nextButton.disabled).toBe(false)
+    expect(carouselRail.className).toContain('xl:pr-24')
+    expect(carouselRail.className).not.toContain('xl:pl-24')
+
+    expect(rivian.querySelector('article')?.getAttribute('aria-hidden')).toBe('false')
+    expect(rivian.getAttribute('aria-current')).toBe('true')
+    expect(rivian.className).toContain('translate-x-0')
+    expect(expRealty.getAttribute('aria-current')).toBeNull()
+    expect(expRealty.className).toContain('translate-x-[calc(100%_+_1.5rem)]')
+    expect(expRealty.className).toContain('opacity-75')
+    expect(expRealtyContent.className).toContain('translate-y-2')
+    expect(expRealtyContent.className).toContain('opacity-40')
+    expect(
+      [...host.querySelectorAll('[data-testid="customer-tooltip"]')].map((node) => node.textContent)
+    ).toEqual(['View eXp Realty customer story'])
+
+    act(() => {
+      nextButton.click()
+    })
+
+    expect(rivian.getAttribute('aria-current')).toBeNull()
+    expect(rivian.querySelector('article')?.getAttribute('aria-hidden')).toBe('true')
+    expect(rivian.className).toContain('-translate-x-[calc(100%_+_1.5rem)]')
+    expect(expRealty.getAttribute('aria-current')).toBe('true')
+    expect(expRealty.querySelector('article')?.getAttribute('aria-hidden')).toBe('false')
+    expect(expRealty.className).toContain('translate-x-0')
+    expect(expRealty.className).toContain('opacity-100')
+    expect(expRealtyContent.className).toContain('translate-y-0')
+    expect(expRealtyContent.className).toContain('opacity-100')
+    expect(carouselRail.className).toContain('xl:translate-x-24')
+    expect(carouselRail.className).toContain('xl:pr-24')
+    const previousButton = host.querySelector(
+      '[aria-label="View Rivian customer story"]'
+    ) as HTMLButtonElement
+    expect(previousButton.disabled).toBe(false)
+    const disabledNext = host.querySelector(
+      '[aria-label="Next customer story"]'
+    ) as HTMLButtonElement
+    expect(disabledNext.disabled).toBe(true)
+    expect(expRealty.querySelector('img[alt="eXp Realty"]')).not.toBeNull()
+    expect(host.querySelector('video')).toBe(video)
+    expect(video.currentTime).toBe(12)
+    expect(video.pause).toHaveBeenCalledOnce()
+    expect(
+      [...expRealty.querySelectorAll('img')].map((image) => image.getAttribute('src'))
+    ).toEqual(['/landing/logos/exp-realty.svg'])
+    expect(
+      [...host.querySelectorAll('[data-testid="customer-tooltip"]')].map((node) => node.textContent)
+    ).toEqual(['View Rivian customer story'])
+
+    act(() => {
+      previousButton.click()
+    })
+
+    expect(rivian.getAttribute('aria-current')).toBe('true')
+    expect(expRealty.getAttribute('aria-current')).toBeNull()
+    expect(rivian.querySelector('video')).toBe(video)
+    expect(video.currentTime).toBe(12)
+    expect(video.play).toHaveBeenCalledTimes(2)
+
+    act(() => {
+      root.unmount()
+    })
+  })
+
+  it('keeps video paused with reduced motion and responds to preference changes', () => {
+    motionPreference.reduced = true
+    ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const root = createRoot(host)
+
+    act(() => root.render(<FeaturedCustomer />))
+    const video = host.querySelector('video') as HTMLVideoElement
+    expect(video.play).not.toHaveBeenCalled()
+    expect(video.pause).toHaveBeenCalledOnce()
+
+    motionPreference.reduced = false
+    act(() => root.render(<FeaturedCustomer />))
+    expect(video.play).toHaveBeenCalledOnce()
+
+    motionPreference.reduced = true
+    act(() => root.render(<FeaturedCustomer />))
+    expect(video.pause).toHaveBeenCalledTimes(2)
+
+    act(() => root.unmount())
+  })
+
+  it('emphasizes and selects the neighboring customer story', () => {
+    ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const root = createRoot(host)
+
+    act(() => {
+      root.render(<FeaturedCustomer />)
+    })
+
+    const expRealty = host.querySelector('[aria-label="2 of 2: eXp Realty"]') as HTMLElement
+    const expRealtyContent = expRealty.querySelector(
+      '[data-customer-story-content="true"]'
+    ) as HTMLElement
+    const previewButton = host.querySelector(
+      '[aria-label="Open eXp Realty customer story"]'
+    ) as HTMLButtonElement
+
+    act(() => {
+      previewButton.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }))
+    })
+
+    expect(expRealty.className).toContain('opacity-100')
+    expect(expRealtyContent.className).toContain('opacity-100')
+    expect(expRealtyContent.className).toContain('translate-y-0')
+
+    act(() => {
+      previewButton.click()
+    })
+
+    expect(expRealty.getAttribute('aria-current')).toBe('true')
+    expect(expRealty.className).toContain('translate-x-0')
+    expect(host.querySelector('[aria-label="Open Rivian customer story"]')).not.toBeNull()
+
+    act(() => {
+      root.unmount()
+    })
+  })
+
+  it('advances after a sustained hover and exposes the progress ring', () => {
+    vi.useFakeTimers()
+    ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const root = createRoot(host)
+
+    act(() => {
+      root.render(<FeaturedCustomer />)
+    })
+
+    const nextButton = host.querySelector(
+      '[aria-label="View eXp Realty customer story"]'
+    ) as HTMLButtonElement
+    const progressRing = nextButton.querySelector(
+      '[data-customer-progress-ring="true"]'
+    ) as SVGCircleElement
+    const progressTrack = nextButton.querySelector(
+      '[data-customer-progress-track="true"]'
+    ) as SVGCircleElement
+
+    expect(nextButton.className).toContain('border-0')
+    expect(progressTrack.getAttribute('r')).toBe('19')
+    expect(progressTrack.getAttribute('stroke-width')).toBe('2')
+    expect(progressRing.getAttribute('r')).toBe('19')
+    expect(progressRing.getAttribute('stroke-width')).toBe('2')
+    expect(progressRing.className.baseVal).toContain('transition-[stroke-dashoffset]')
+
+    act(() => {
+      nextButton.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }))
+      vi.advanceTimersByTime(500)
+      nextButton.dispatchEvent(
+        new MouseEvent('mouseout', { bubbles: true, relatedTarget: document.body })
+      )
+      vi.advanceTimersByTime(500)
+    })
+
+    expect(host.querySelector('[aria-label="View eXp Realty customer story"]')).not.toBeNull()
+    expect(progressRing.className.baseVal).toContain('opacity-0')
+    expect(progressRing.className.baseVal).toContain('[stroke-dashoffset:100]')
+
+    act(() => {
+      nextButton.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }))
+    })
+
+    expect(progressRing.className.baseVal).toContain('opacity-100')
+    expect(progressRing.className.baseVal).toContain('[stroke-dashoffset:0]')
+
+    act(() => {
+      vi.advanceTimersByTime(1000)
+    })
+
+    expect(host.querySelector('[aria-label="View Rivian customer story"]')).not.toBeNull()
+    expect(
+      [...host.querySelectorAll('[data-testid="customer-tooltip"]')].map((node) => node.textContent)
+    ).toEqual(['View Rivian customer story'])
+
+    act(() => {
+      root.unmount()
+    })
+  })
+})
diff --git a/apps/sim/app/(landing)/components/featured-customer/featured-customer.tsx b/apps/sim/app/(landing)/components/featured-customer/featured-customer.tsx
new file mode 100644
index 00000000000..87b84700eb4
--- /dev/null
+++ b/apps/sim/app/(landing)/components/featured-customer/featured-customer.tsx
@@ -0,0 +1,153 @@
+'use client'
+
+import { useState } from 'react'
+import { cn } from '@sim/emcn'
+import {
+  FeaturedCustomerCard,
+  type FeaturedCustomerStory,
+} from '@/app/(landing)/components/featured-customer/featured-customer-card'
+import { FeaturedCustomerNavigationButton } from '@/app/(landing)/components/featured-customer/featured-customer-navigation-button'
+import {
+  LANDING_CONTENT_WIDTH,
+  LANDING_GUTTER,
+  LANDING_STAGE_RADIUS,
+} from '@/app/(landing)/components/landing-layout'
+
+const CUSTOMER_STORIES: FeaturedCustomerStory[] = [
+  {
+    id: 'rivian',
+    company: 'Rivian',
+    caption: 'Connect systems and build, deploy, and manage AI agents with Sim.',
+    media: {
+      kind: 'video',
+      poster: '/landing/customer-stories/rivian-r2-poster.jpg',
+      src: '/landing/customer-stories/rivian-r2-loop.mp4',
+      alt: 'Rivian R2 driving along a forest road',
+    },
+    logo: {
+      src: '/landing/logos/rivian-vw.svg',
+      alt: 'Rivian | Volkswagen Group Technologies',
+      aspect: 10.72,
+      height: 20,
+    },
+  },
+  {
+    id: 'exp-realty',
+    company: 'eXp Realty',
+    caption: 'Bring teams, shared knowledge, and AI agents into one workspace with Sim.',
+    media: { kind: 'brand' },
+    logo: { src: '/landing/logos/exp-realty.svg', alt: 'eXp Realty', aspect: 1.84, height: 32 },
+  },
+]
+
+/**
+ * Customer-story carousel with one full-emphasis card and a reduced-scale
+ * adjacent preview. Only the active film card plays video; an inactive film
+ * holds its current frame, and a brand card uses its own wordmark. A previous/next pair on the page
+ * ground above the film, fixed flush with the first card's right edge, moves
+ * between stories, with the arrow that has nowhere to go disabled.
+ */
+export function FeaturedCustomer() {
+  const [activeIndex, setActiveIndex] = useState(0)
+  const [previewedIndex, setPreviewedIndex] = useState<number | null>(null)
+  const activeStory = CUSTOMER_STORIES[activeIndex]
+  const previousStory = activeIndex > 0 ? CUSTOMER_STORIES[activeIndex - 1] : null
+  const nextStory =
+    activeIndex < CUSTOMER_STORIES.length - 1 ? CUSTOMER_STORIES[activeIndex + 1] : null
+
+  return (
+    <section
+      id='featured-customer'
+      aria-label='Featured customer stories'
+      aria-roledescription='carousel'
+      className='w-full overflow-hidden'
+    >
+      <div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER)}>
+        <div className='mb-4 flex items-center justify-end gap-2 xl:pr-24'>
+          <FeaturedCustomerNavigationButton
+            direction='previous'
+            label={
+              previousStory
+                ? `View ${previousStory.company} customer story`
+                : 'Previous customer story'
+            }
+            disabled={!previousStory}
+            onSelect={() => setActiveIndex(activeIndex - 1)}
+          />
+          <FeaturedCustomerNavigationButton
+            direction='next'
+            label={nextStory ? `View ${nextStory.company} customer story` : 'Next customer story'}
+            disabled={!nextStory}
+            onSelect={() => setActiveIndex(activeIndex + 1)}
+          />
+        </div>
+
+        <div
+          data-customer-carousel-rail='true'
+          className={cn(
+            'transition-[translate] duration-600 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none xl:pr-24',
+            activeIndex > 0 && 'xl:translate-x-24'
+          )}
+        >
+          <div className='relative isolate aspect-[2/1] w-full max-sm:aspect-[4/5]'>
+            {CUSTOMER_STORIES.map((story, index) => {
+              const isActive = index === activeIndex
+              const isNext = index > activeIndex
+              const isPreviewed = previewedIndex === index
+
+              return (
+                <div
+                  key={story.id}
+                  role='group'
+                  aria-roledescription='slide'
+                  aria-label={`${index + 1} of ${CUSTOMER_STORIES.length}: ${story.company}`}
+                  aria-current={isActive ? 'true' : undefined}
+                  onMouseEnter={() => !isActive && setPreviewedIndex(index)}
+                  onMouseLeave={() => setPreviewedIndex(null)}
+                  onFocus={() => !isActive && setPreviewedIndex(index)}
+                  onBlur={() => setPreviewedIndex(null)}
+                  className={cn(
+                    'absolute inset-0 transition-[translate,scale,opacity] duration-600 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
+                    index === 0 ? 'origin-right' : 'origin-left',
+                    isActive && 'z-10 translate-x-0 scale-100 opacity-100',
+                    !isActive &&
+                      isNext &&
+                      'z-20 translate-x-[calc(100%_+_1.5rem)] scale-[0.92] max-sm:translate-x-[calc(100%_+_0.75rem)] max-sm:scale-[0.96]',
+                    !isActive &&
+                      !isNext &&
+                      '-translate-x-[calc(100%_+_1.5rem)] max-sm:-translate-x-[calc(100%_+_0.75rem)] z-20 scale-[0.92] max-sm:scale-[0.96]',
+                    !isActive && (isPreviewed ? 'opacity-100' : 'opacity-75')
+                  )}
+                >
+                  <FeaturedCustomerCard
+                    story={story}
+                    active={isActive}
+                    emphasized={isActive || isPreviewed}
+                  />
+                  {!isActive && (
+                    <button
+                      type='button'
+                      aria-label={`Open ${story.company} customer story`}
+                      onClick={() => {
+                        setPreviewedIndex(null)
+                        setActiveIndex(index)
+                      }}
+                      className={cn(
+                        'focus-visible:-outline-offset-4 absolute inset-0 z-30 cursor-pointer bg-transparent focus-visible:outline focus-visible:outline-2 focus-visible:outline-white/80',
+                        LANDING_STAGE_RADIUS
+                      )}
+                    />
+                  )}
+                </div>
+              )
+            })}
+
+            <span className='sr-only' aria-live='polite'>
+              {activeStory.company} customer story selected
+            </span>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/featured-customer/index.ts b/apps/sim/app/(landing)/components/featured-customer/index.ts
new file mode 100644
index 00000000000..48a3444e25f
--- /dev/null
+++ b/apps/sim/app/(landing)/components/featured-customer/index.ts
@@ -0,0 +1 @@
+export { FeaturedCustomer } from './featured-customer'
diff --git a/apps/sim/app/(landing)/components/features/components/build-callout/build-callout.tsx b/apps/sim/app/(landing)/components/features/components/build-callout/build-callout.tsx
deleted file mode 100644
index fe82b933240..00000000000
--- a/apps/sim/app/(landing)/components/features/components/build-callout/build-callout.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { ThinkingLoader } from '@/components/ui'
-import { WorkflowShowcase } from '@/app/(landing)/components/features/components/build-callout/components/workflow-showcase'
-
-/**
- * The Build beat's callout - the finished workflow canvas centered on the
- * card's solid grey stage, with the goo cycle loader phasing through its
- * world-state phrases in the bottom-left corner. The Mothership chat loop
- * (`components/build-chat-animation`) is parked here unwired, kept for reuse
- * on another surface.
- */
-export function BuildCallout() {
-  return (
-    <div aria-hidden='true' className='pointer-events-none absolute inset-0'>
-      <WorkflowShowcase />
-      <div className='absolute bottom-8 left-8 max-sm:bottom-4 max-sm:left-4'>
-        <ThinkingLoader size={22} phase className='text-[var(--text-body)]' />
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/(landing)/components/features/components/build-callout/components/build-chat-animation/build-chat-animation.tsx b/apps/sim/app/(landing)/components/features/components/build-callout/components/build-chat-animation/build-chat-animation.tsx
deleted file mode 100644
index d17b94f807f..00000000000
--- a/apps/sim/app/(landing)/components/features/components/build-callout/components/build-chat-animation/build-chat-animation.tsx
+++ /dev/null
@@ -1,360 +0,0 @@
-'use client'
-
-import { useEffect, useRef, useState } from 'react'
-import { cn } from '@sim/emcn'
-import { ArrowUp, Blimp, Mic, Paperclip, Plus, Slash } from '@sim/emcn/icons'
-import { ThinkingLoader } from '@/components/ui'
-
-const PROMPT = 'Build a workflow to schedule and publish posts to my X account.'
-const REPLY =
-  'On it. Building a workflow with a schedule trigger, a drafting agent, and an X publish step.'
-const REPLY_WORDS = REPLY.split(' ')
-
-const TYPE_START_MS = 900
-const TYPE_CHAR_MS = 40
-const SEND_MS = 3800
-const THINKING_DONE_MS = 6000
-const REPLY_START_DELAY_MS = 420
-const REPLY_WORD_MS = 95
-const MERGE_MS = 9000
-const LOOP_MS = 10400
-
-/** Resting gap between the chat surface and the composer once the split settles. */
-const SPLIT_GAP_PX = 10
-/** Goo blur decay window — the liquid neck between the boxes thins and snaps over this span. */
-const GOO_DECAY_MS = 850
-/** Peak feGaussianBlur stdDeviation at the send beat. */
-const GOO_MAX_BLUR = 16
-/** Blur decay tick; stepped so the blur eases out on a (1-t)^2 curve. */
-const GOO_STEP_MS = 40
-
-/**
- * Chat-surface transition set while opening: geometry travels with the goo
- * split (500ms), the surface itself fades in fast (250ms), and the hairline
- * ring + elevation crisp in only after the liquid split settles (300ms fade,
- * 550ms delay).
- */
-const CHAT_SURFACE_TRANSITION_OPEN =
-  '[transition:height_500ms_ease-out,transform_500ms_ease-out,margin-bottom_500ms_ease-out,opacity_250ms_ease-out,box-shadow_300ms_ease-out_550ms]'
-
-/**
- * Chat-surface transition set while merging back: same geometry travel, but
- * the ring + elevation drop immediately and the surface fades out fast so the
- * goo ghost carries the collapse into the composer.
- */
-const CHAT_SURFACE_TRANSITION_MERGE =
-  '[transition:height_500ms_ease-out,transform_500ms_ease-out,margin-bottom_500ms_ease-out,opacity_250ms_ease-out,box-shadow_200ms_ease-out]'
-
-type BuildChatPhase =
-  | 'idle'
-  | 'typing'
-  | 'thinking'
-  | 'replyPreparing'
-  | 'replying'
-  | 'complete'
-  | 'merging'
-
-/**
- * Decorative Build-card Mothership loop. It mirrors the studio choreography
- * with local timers and CSS transitions so the landing page avoids motion
- * dependencies while preserving the product-window feel.
- *
- * The composer is a permanent fixture; the send beat gooey-morphs the chat
- * surface out of it, and the loop's final beat gooey-merges it back down in.
- * An SVG goo filter (state-driven blur → alpha-contrast matrix → atop
- * composite) is applied to an aria-hidden ghost layer of two solid white
- * rects mirroring the real boxes (both measured with a ResizeObserver) —
- * never to the real UI, which stays crisp above it. The filtered silhouette
- * renders a liquid meniscus that necks and snaps as the boxes separate (and
- * re-welds as they merge); each morph's blur decays on a (1-t)^2 curve over
- * 850ms. The chat surface's ring + shadow crisp in only after the split and
- * drop instantly at the merge, so the ghost carries the collapse.
- */
-export function BuildChatAnimation() {
-  const [phase, setPhase] = useState<BuildChatPhase>('idle')
-  const [typedChars, setTypedChars] = useState(0)
-  const [revealedWords, setRevealedWords] = useState(0)
-  const [reducedMotion, setReducedMotion] = useState(false)
-  const [morphing, setMorphing] = useState(false)
-  const [gooBlur, setGooBlur] = useState(0)
-  const [chatContentH, setChatContentH] = useState(0)
-  const [composerH, setComposerH] = useState(94)
-  const chatContentRef = useRef<HTMLDivElement>(null)
-  const composerRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    const content = chatContentRef.current
-    const composer = composerRef.current
-    if (!content || !composer) return
-    const measure = () => {
-      setChatContentH(content.offsetHeight)
-      setComposerH(composer.offsetHeight)
-    }
-    measure()
-    const observer = new ResizeObserver(measure)
-    observer.observe(content)
-    observer.observe(composer)
-    return () => observer.disconnect()
-  }, [])
-
-  useEffect(() => {
-    if (!morphing) return
-    let progress = 0
-    const interval = setInterval(() => {
-      progress += GOO_STEP_MS / GOO_DECAY_MS
-      if (progress >= 1) {
-        setGooBlur(0)
-        setMorphing(false)
-        clearInterval(interval)
-        return
-      }
-      setGooBlur(GOO_MAX_BLUR * (1 - progress) ** 2)
-    }, GOO_STEP_MS)
-    return () => clearInterval(interval)
-  }, [morphing])
-
-  useEffect(() => {
-    const media = window.matchMedia('(prefers-reduced-motion: reduce)')
-    const timeouts: ReturnType<typeof setTimeout>[] = []
-    const intervals: ReturnType<typeof setInterval>[] = []
-
-    const clearScheduled = () => {
-      for (const timeout of timeouts) clearTimeout(timeout)
-      for (const interval of intervals) clearInterval(interval)
-      timeouts.length = 0
-      intervals.length = 0
-    }
-
-    const showFinished = () => {
-      setReducedMotion(true)
-      setPhase('complete')
-      setTypedChars(0)
-      setRevealedWords(REPLY_WORDS.length)
-      setMorphing(false)
-      setGooBlur(0)
-    }
-
-    const startTyping = () => {
-      setPhase('typing')
-      const startedAt = performance.now()
-      const interval = setInterval(() => {
-        const elapsed = performance.now() - startedAt
-        const nextChars = Math.min(Math.floor(elapsed / TYPE_CHAR_MS) + 1, PROMPT.length)
-        setTypedChars(nextChars)
-        if (nextChars >= PROMPT.length) clearInterval(interval)
-      }, TYPE_CHAR_MS)
-      intervals.push(interval)
-    }
-
-    const startReply = () => {
-      setPhase('replying')
-      const startedAt = performance.now()
-      const interval = setInterval(() => {
-        const elapsed = performance.now() - startedAt
-        const nextWords = Math.min(Math.floor(elapsed / REPLY_WORD_MS) + 1, REPLY_WORDS.length)
-        setRevealedWords(nextWords)
-        if (nextWords >= REPLY_WORDS.length) {
-          clearInterval(interval)
-          setPhase('complete')
-        }
-      }, REPLY_WORD_MS)
-      intervals.push(interval)
-    }
-
-    const runLoop = () => {
-      clearScheduled()
-      setReducedMotion(false)
-      setPhase('idle')
-      setTypedChars(0)
-      setRevealedWords(0)
-      setMorphing(false)
-      setGooBlur(0)
-
-      timeouts.push(setTimeout(startTyping, TYPE_START_MS))
-      timeouts.push(
-        setTimeout(() => {
-          setPhase('thinking')
-          setTypedChars(0)
-          setMorphing(true)
-          setGooBlur(GOO_MAX_BLUR)
-        }, SEND_MS)
-      )
-      timeouts.push(setTimeout(() => setPhase('replyPreparing'), THINKING_DONE_MS))
-      timeouts.push(setTimeout(startReply, THINKING_DONE_MS + REPLY_START_DELAY_MS))
-      timeouts.push(
-        setTimeout(() => {
-          setPhase('merging')
-          setMorphing(true)
-          setGooBlur(GOO_MAX_BLUR)
-        }, MERGE_MS)
-      )
-      timeouts.push(setTimeout(runLoop, LOOP_MS))
-    }
-
-    const syncMotionPreference = () => {
-      clearScheduled()
-      if (media.matches) {
-        showFinished()
-        return
-      }
-      runLoop()
-    }
-
-    syncMotionPreference()
-    media.addEventListener('change', syncMotionPreference)
-    return () => {
-      media.removeEventListener('change', syncMotionPreference)
-      clearScheduled()
-    }
-  }, [])
-
-  const composerText = phase === 'typing' ? PROMPT.slice(0, typedChars) : ''
-  const chatOpen = reducedMotion || !['idle', 'typing', 'merging'].includes(phase)
-  const thinkingPhraseVisible = phase === 'thinking'
-  const replyVisible =
-    reducedMotion || phase === 'replyPreparing' || phase === 'replying' || phase === 'complete'
-  const replyComplete = reducedMotion || phase === 'complete'
-  const replyText = REPLY_WORDS.slice(0, reducedMotion ? REPLY_WORDS.length : revealedWords).join(
-    ' '
-  )
-
-  return (
-    <div className='absolute inset-0 flex items-end justify-start p-10 max-sm:px-3 max-sm:py-0 max-lg:items-center max-lg:justify-center max-lg:px-8 max-lg:py-8'>
-      <svg width='0' height='0' aria-hidden='true' className='absolute'>
-        <defs>
-          <filter id='build-callout-goo'>
-            <feGaussianBlur in='SourceGraphic' stdDeviation={gooBlur} result='blur' />
-            <feColorMatrix
-              in='blur'
-              type='matrix'
-              values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -8'
-              result='goo'
-            />
-            <feComposite in='SourceGraphic' in2='goo' operator='atop' />
-          </filter>
-        </defs>
-      </svg>
-
-      <div className='relative h-[310px] w-full max-w-[560px] max-sm:h-[270px] max-sm:max-w-[430px]'>
-        {!reducedMotion && (
-          <div
-            aria-hidden='true'
-            className='pointer-events-none absolute inset-0 z-0 flex flex-col justify-end [filter:url(#build-callout-goo)_drop-shadow(0_1px_3px_rgba(28,40,64,0.10))]'
-          >
-            <div
-              className={cn(
-                'w-full rounded-2xl bg-[var(--white)] transition-[height,transform,margin-bottom] duration-500 ease-out motion-reduce:transition-none',
-                chatOpen ? 'translate-y-0' : 'translate-y-5'
-              )}
-              style={{
-                height: chatOpen ? chatContentH : 0,
-                marginBottom: chatOpen ? SPLIT_GAP_PX : 0,
-              }}
-            />
-            <div className='w-full rounded-2xl bg-[var(--white)]' style={{ height: composerH }} />
-          </div>
-        )}
-
-        <div className='relative z-10 flex h-full flex-col justify-end'>
-          <section
-            className={cn(
-              'w-full overflow-hidden rounded-2xl bg-[var(--white)]',
-              !reducedMotion &&
-                (chatOpen ? CHAT_SURFACE_TRANSITION_OPEN : CHAT_SURFACE_TRANSITION_MERGE),
-              chatOpen
-                ? 'translate-y-0 opacity-100 shadow-[0_24px_80px_color-mix(in_srgb,var(--text-primary)_14%,transparent),0_0_0_1px_var(--border-1)]'
-                : 'translate-y-5 opacity-0 shadow-[0_24px_80px_transparent,0_0_0_1px_transparent]'
-            )}
-            style={{
-              height: chatOpen ? chatContentH : 0,
-              marginBottom: chatOpen ? SPLIT_GAP_PX : 0,
-            }}
-          >
-            <div ref={chatContentRef} className='flex flex-col gap-4 p-4 max-sm:gap-2.5 max-sm:p-3'>
-              <div className='ml-auto max-w-[78%] rounded-lg bg-[var(--surface-5)] px-3 py-2 text-[15px] text-[var(--text-primary)] leading-[1.45] max-sm:max-w-[86%] max-sm:text-[12px] max-sm:leading-[1.35]'>
-                {PROMPT}
-              </div>
-
-              <div className='relative min-h-[34px]'>
-                <div
-                  className={cn(
-                    'absolute inset-0 flex items-center transition-opacity duration-300 ease-out motion-reduce:transition-none',
-                    thinkingPhraseVisible ? 'opacity-100' : 'opacity-0'
-                  )}
-                >
-                  <ThinkingLoader
-                    size={20}
-                    startVariant='corners'
-                    phase
-                    labelRatio={0.66}
-                    className='text-[var(--text-body)]'
-                  />
-                </div>
-
-                <div
-                  className={cn(
-                    'flex items-start gap-2.5 text-[15px] text-[var(--text-primary)] leading-[1.5] transition-opacity duration-300 ease-out motion-reduce:transition-none max-sm:text-[12px] max-sm:leading-[1.4]',
-                    replyVisible ? 'opacity-100' : 'opacity-0'
-                  )}
-                >
-                  <span className='relative mt-0.5 size-[20px] shrink-0'>
-                    <span
-                      className={cn(
-                        'absolute inset-0 flex items-center justify-center transition-opacity duration-200 ease-out motion-reduce:transition-none',
-                        replyComplete ? 'opacity-0' : 'opacity-100'
-                      )}
-                    >
-                      <ThinkingLoader size={20} startVariant='corners' />
-                    </span>
-                    <span
-                      className={cn(
-                        'absolute inset-0 flex items-center justify-center transition-opacity duration-200 ease-out motion-reduce:transition-none',
-                        replyComplete ? 'opacity-100' : 'opacity-0'
-                      )}
-                    >
-                      <Blimp className='size-[18px] text-[var(--text-icon)]' />
-                    </span>
-                  </span>
-                  <p className='flex-1'>{replyText}</p>
-                </div>
-              </div>
-            </div>
-          </section>
-
-          <div
-            ref={composerRef}
-            className='h-[94px] w-full rounded-2xl border border-[var(--border-1)] bg-[var(--white)] px-2.5 py-2 shadow-[0_18px_60px_color-mix(in_srgb,var(--text-primary)_12%,transparent)]'
-          >
-            <p
-              className={cn(
-                'min-h-[42px] px-1.5 pt-1 text-[15px] leading-[1.35] max-sm:text-[13px]',
-                composerText ? 'text-[var(--text-primary)]' : 'text-[var(--text-muted)]'
-              )}
-            >
-              {composerText || 'Send message to Sim'}
-            </p>
-            <div className='flex items-center gap-1.5'>
-              <span className='flex size-[28px] items-center justify-center rounded-full'>
-                <Plus className='size-[16px] text-[var(--text-icon)]' />
-              </span>
-              <span className='flex size-[28px] items-center justify-center rounded-full'>
-                <Paperclip className='size-[16px] text-[var(--text-icon)]' />
-              </span>
-              <span className='flex size-[28px] items-center justify-center rounded-full'>
-                <Slash className='size-[16px] text-[var(--text-icon)]' />
-              </span>
-              <span className='ml-auto flex items-center gap-1.5'>
-                <span className='flex size-[28px] items-center justify-center rounded-full'>
-                  <Mic className='size-[16px] text-[var(--text-icon)]' />
-                </span>
-                <span className='flex size-[28px] items-center justify-center rounded-full bg-[#808080]'>
-                  <ArrowUp className='size-[16px] text-[var(--surface-1)]' />
-                </span>
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/(landing)/components/features/components/build-callout/components/build-chat-animation/index.ts b/apps/sim/app/(landing)/components/features/components/build-callout/components/build-chat-animation/index.ts
deleted file mode 100644
index cb36e136dec..00000000000
--- a/apps/sim/app/(landing)/components/features/components/build-callout/components/build-chat-animation/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { BuildChatAnimation } from './build-chat-animation'
diff --git a/apps/sim/app/(landing)/components/features/components/build-callout/components/workflow-showcase/index.ts b/apps/sim/app/(landing)/components/features/components/build-callout/components/workflow-showcase/index.ts
deleted file mode 100644
index c6daec7509e..00000000000
--- a/apps/sim/app/(landing)/components/features/components/build-callout/components/workflow-showcase/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { WorkflowShowcase } from './workflow-showcase'
diff --git a/apps/sim/app/(landing)/components/features/components/build-callout/components/workflow-showcase/showcase-data.ts b/apps/sim/app/(landing)/components/features/components/build-callout/components/workflow-showcase/showcase-data.ts
deleted file mode 100644
index 06824548b6a..00000000000
--- a/apps/sim/app/(landing)/components/features/components/build-callout/components/workflow-showcase/showcase-data.ts
+++ /dev/null
@@ -1,132 +0,0 @@
-import { Table as TableIcon } from '@sim/emcn/icons'
-import { AgentIcon, AnthropicIcon, GmailIcon, LinearIcon, SlackIcon } from '@/components/icons'
-import type { BlockDef } from '@/app/(landing)/components/hero/components/hero-visual/workflow-data'
-
-/**
- * Design-space geometry for the Build card's workflow showcase - a
- * support-triage pipeline flowing LEFT TO RIGHT: two triggers (a Gmail inbox
- * and a Slack channel) converge on a triage agent, which fans out to four
- * destinations - Linear, an eng escalation, a customer reply, and Tables.
- * Rows carry concrete values (not placeholders) so the canvas reads like a
- * configured workflow.
- *
- * Column geometry: three columns at x=0 / x=370 / x=740 on a 990-wide canvas.
- * The triggers straddle the agent's row; the four outputs stack down the
- * right column, spanning y=20-666 on a 686-tall canvas. The bounding box
- * exactly hugs the blocks, so the stage's flex-centering shows the whole
- * flow clean and uncut. Edges run from right handles to left handles at
- * `HANDLE_Y_OFFSET`, matching the real editor's horizontal layout.
- *
- * Icon tiles follow the platform rule: grey text-ramp tiles for first-party
- * blocks, brand colors only for REAL third-party marks, and white bordered
- * tiles for marks that carry their own colors.
- */
-export const SHOWCASE_BLOCKS: BlockDef[] = [
-  {
-    id: 'gmail-trigger',
-    name: 'New support email',
-    icon: GmailIcon,
-    bgColor: '#FFFFFF',
-    tileBorder: true,
-    isTrigger: true,
-    rows: [
-      { title: 'From', value: 'Customers' },
-      { title: 'Filter', value: 'Unread' },
-    ],
-    x: 0,
-    y: 150,
-  },
-  {
-    id: 'slack-trigger',
-    name: 'New #support post',
-    icon: SlackIcon,
-    bgColor: '#611F69',
-    isTrigger: true,
-    rows: [
-      { title: 'Channel', value: '#support' },
-      { title: 'Event', value: 'New message' },
-    ],
-    x: 0,
-    y: 424,
-  },
-  {
-    id: 'triage',
-    name: 'Triage request',
-    icon: AgentIcon,
-    bgColor: 'var(--text-primary)',
-    rows: [
-      { title: 'Model', value: 'Claude', valueIcon: AnthropicIcon },
-      { title: 'Knowledge', value: 'Help center' },
-      { title: 'Instructions', value: 'Triage + draft' },
-    ],
-    x: 370,
-    y: 277,
-  },
-  {
-    id: 'linear',
-    name: 'File bug',
-    icon: LinearIcon,
-    bgColor: '#FFFFFF',
-    tileBorder: true,
-    isTerminal: true,
-    rows: [
-      { title: 'Team', value: 'Platform' },
-      { title: 'Priority', value: 'From triage' },
-    ],
-    x: 740,
-    y: 20,
-  },
-  {
-    id: 'escalate',
-    name: 'Escalate to eng',
-    icon: SlackIcon,
-    bgColor: '#611F69',
-    isTerminal: true,
-    rows: [
-      { title: 'Channel', value: '#eng-oncall' },
-      { title: 'When', value: 'Urgent' },
-    ],
-    x: 740,
-    y: 200,
-  },
-  {
-    id: 'reply',
-    name: 'Send reply',
-    icon: GmailIcon,
-    bgColor: '#FFFFFF',
-    tileBorder: true,
-    isTerminal: true,
-    rows: [
-      { title: 'To', value: 'Customer' },
-      { title: 'Tone', value: 'Friendly' },
-    ],
-    x: 740,
-    y: 380,
-  },
-  {
-    id: 'tables',
-    name: 'Log ticket',
-    icon: TableIcon,
-    bgColor: 'var(--text-body)',
-    isTerminal: true,
-    rows: [
-      { title: 'Table', value: 'Tickets' },
-      { title: 'Operation', value: 'Insert' },
-    ],
-    x: 740,
-    y: 560,
-  },
-]
-
-/** Source → target pairs; every edge is drawn (the flow renders finished). */
-export const SHOWCASE_EDGES: ReadonlyArray<readonly [string, string]> = [
-  ['gmail-trigger', 'triage'],
-  ['slack-trigger', 'triage'],
-  ['triage', 'linear'],
-  ['triage', 'escalate'],
-  ['triage', 'reply'],
-  ['triage', 'tables'],
-]
-
-/** Design-space bounding box of the layout above. */
-export const SHOWCASE_CANVAS = { width: 990, height: 686 } as const
diff --git a/apps/sim/app/(landing)/components/features/components/build-callout/components/workflow-showcase/workflow-showcase.tsx b/apps/sim/app/(landing)/components/features/components/build-callout/components/workflow-showcase/workflow-showcase.tsx
deleted file mode 100644
index 7c6e239bb5d..00000000000
--- a/apps/sim/app/(landing)/components/features/components/build-callout/components/workflow-showcase/workflow-showcase.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import {
-  SHOWCASE_BLOCKS,
-  SHOWCASE_CANVAS,
-  SHOWCASE_EDGES,
-} from '@/app/(landing)/components/features/components/build-callout/components/workflow-showcase/showcase-data'
-import { WorkflowBlock } from '@/app/(landing)/components/hero/components/hero-visual/workflow-block'
-import {
-  BLOCK_WIDTH,
-  HANDLE_Y_OFFSET,
-  smoothStep,
-} from '@/app/(landing)/components/hero/components/hero-visual/workflow-data'
-
-/**
- * The Build card's centerpiece - the left-to-right support-triage pipeline
- * from {@link SHOWCASE_BLOCKS} / {@link SHOWCASE_EDGES} rendered raw on the
- * card's solid grey stage, every block on canvas and every edge drawn. Static
- * and server-rendered; blocks reuse the hero-visual's {@link WorkflowBlock}
- * (the horizontal-flow card with left/right handle nubs).
- *
- * The 990x686 design canvas renders at fixed per-breakpoint scales - 0.62
- * (1280+), 0.38 (below `xl`, where the side-by-side card leaves the
- * aspect-locked stage narrow), 0.45 (below `lg`, stacked full-width), 0.29
- * (below `sm`) - each chosen as the largest zoom that keeps the WHOLE flow
- * inside that tier's media stage, so the graph sits centered and uncut. Each
- * sizer tier is the canvas dimensions times that tier's scale.
- */
-export function WorkflowShowcase() {
-  const byId = new Map(SHOWCASE_BLOCKS.map((block) => [block.id, block]))
-  return (
-    <div className='absolute inset-0 flex items-center justify-center'>
-      <div className='relative h-[425px] w-[614px] shrink-0 max-sm:h-[199px] max-sm:w-[287px] max-lg:h-[309px] max-lg:w-[446px] max-xl:h-[261px] max-xl:w-[376px]'>
-        <div className='absolute top-0 left-0 h-[686px] w-[990px] origin-top-left [transform:scale(0.62)] max-sm:[transform:scale(0.29)] max-lg:[transform:scale(0.45)] max-xl:[transform:scale(0.38)]'>
-          <svg
-            className='absolute inset-0 overflow-visible'
-            width={SHOWCASE_CANVAS.width}
-            height={SHOWCASE_CANVAS.height}
-            viewBox={`0 0 ${SHOWCASE_CANVAS.width} ${SHOWCASE_CANVAS.height}`}
-            fill='none'
-          >
-            {SHOWCASE_EDGES.map(([from, to]) => {
-              const source = byId.get(from)
-              const target = byId.get(to)
-              if (!source || !target) return null
-              return (
-                <path
-                  key={`${from}-${to}`}
-                  d={smoothStep(
-                    source.x + BLOCK_WIDTH,
-                    source.y + HANDLE_Y_OFFSET,
-                    target.x,
-                    target.y + HANDLE_Y_OFFSET
-                  )}
-                  stroke='var(--workflow-edge)'
-                  strokeWidth={2}
-                  strokeLinecap='round'
-                />
-              )
-            })}
-          </svg>
-          {SHOWCASE_BLOCKS.map((block) => (
-            <div
-              key={block.id}
-              className='absolute'
-              style={{ left: block.x, top: block.y, width: BLOCK_WIDTH }}
-            >
-              <WorkflowBlock block={block} />
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/(landing)/components/features/components/build-callout/index.ts b/apps/sim/app/(landing)/components/features/components/build-callout/index.ts
deleted file mode 100644
index 44cc8ab0e45..00000000000
--- a/apps/sim/app/(landing)/components/features/components/build-callout/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { BuildCallout } from './build-callout'
diff --git a/apps/sim/app/(landing)/components/features/components/callout-frame/callout-frame.tsx b/apps/sim/app/(landing)/components/features/components/callout-frame/callout-frame.tsx
deleted file mode 100644
index 4ff2f12956f..00000000000
--- a/apps/sim/app/(landing)/components/features/components/callout-frame/callout-frame.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import type { ReactNode } from 'react'
-import { cn } from '@sim/emcn'
-
-const CALLOUT_FADE =
-  '[-webkit-mask-image:linear-gradient(to_bottom,#000_72%,transparent)] [mask-image:linear-gradient(to_bottom,#000_72%,transparent)]'
-
-interface CalloutFrameProps {
-  /** Width/layout for the panel (e.g. `w-[340px]`). */
-  className?: string
-  /** Sizing for the inner body (e.g. `h-[300px]`). */
-  bodyClassName?: string
-  /** Dissolve the body's lower edge so the surface reads as continuing below. */
-  fade?: boolean
-  children: ReactNode
-}
-
-/**
- * The shared chrome for a callout: an elevated panel that lifts a real Sim UI
- * surface off the backdrop, wearing the hero platform window's exact chrome -
- * 10px radius, `--surface-1` fill, and the hairline-ring + layered soft shadow
- * - so every floating window on the page reads as one family. Optionally fades
- * its body's foot so a long surface dissolves rather than ends on a hard edge.
- */
-export function CalloutFrame({ className, bodyClassName, fade, children }: CalloutFrameProps) {
-  return (
-    <div
-      className={cn(
-        'overflow-hidden rounded-[10px] bg-[var(--surface-1)] shadow-[0_0_0_1px_rgba(0,0,0,0.08),0_2px_6px_0_rgba(0,0,0,0.05),0_4px_42px_0_rgba(0,0,0,0.06)]',
-        className
-      )}
-    >
-      <div className={cn('relative overflow-hidden', fade && CALLOUT_FADE, bodyClassName)}>
-        {children}
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/(landing)/components/features/components/callout-frame/index.ts b/apps/sim/app/(landing)/components/features/components/callout-frame/index.ts
deleted file mode 100644
index a4d7e1dc37f..00000000000
--- a/apps/sim/app/(landing)/components/features/components/callout-frame/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { CalloutFrame } from './callout-frame'
diff --git a/apps/sim/app/(landing)/components/features/components/captured-platform-surface.tsx b/apps/sim/app/(landing)/components/features/components/captured-platform-surface.tsx
deleted file mode 100644
index 768a2479bac..00000000000
--- a/apps/sim/app/(landing)/components/features/components/captured-platform-surface.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-'use client'
-
-import Image from 'next/image'
-import { PLATFORM_LOOP_DESIGN } from '@/app/(landing)/components/shared/platform-loop-constants'
-import { ResponsiveDesignStage } from '@/app/(landing)/components/shared/responsive-design-stage'
-import {
-  PREVIEW_SIDEBAR_CHATS,
-  PREVIEW_SIDEBAR_WORKFLOWS,
-} from '@/app/(landing)/components/shared/sidebar-preview-content'
-import {
-  EnterpriseSidebar,
-  type EnterpriseSidebarProps,
-} from '@/app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-sidebar'
-
-interface CapturedPlatformSurfaceProps {
-  src: string
-  sizes: string
-  activeItem: NonNullable<EnterpriseSidebarProps['activeItem']>
-}
-
-/**
- * A captured product surface with the current landing sidebar rendered over
- * the capture's legacy sidebar pixels. Keeping the sidebar live gives every
- * landing callout one source of truth while preserving the detailed product
- * content in the capture beside it.
- */
-export function CapturedPlatformSurface({ src, sizes, activeItem }: CapturedPlatformSurfaceProps) {
-  return (
-    <div className='absolute inset-0 overflow-hidden'>
-      <Image src={src} alt='' fill sizes={sizes} className='object-cover' />
-      <ResponsiveDesignStage
-        width={PLATFORM_LOOP_DESIGN.width}
-        height={PLATFORM_LOOP_DESIGN.height}
-        align='start'
-        className='pointer-events-none absolute inset-0'
-        contentClassName='flex'
-      >
-        <div className='flex h-full w-[249px] border-[var(--border)] border-r bg-[var(--surface-1)]'>
-          <EnterpriseSidebar
-            chats={PREVIEW_SIDEBAR_CHATS}
-            workflows={PREVIEW_SIDEBAR_WORKFLOWS}
-            activeItem={activeItem}
-          />
-          <div className='min-w-0 flex-1 bg-[var(--surface-1)]' />
-        </div>
-      </ResponsiveDesignStage>
-    </div>
-  )
-}
diff --git a/apps/sim/app/(landing)/components/features/components/core-feature-card/core-feature-card.tsx b/apps/sim/app/(landing)/components/features/components/core-feature-card/core-feature-card.tsx
new file mode 100644
index 00000000000..63645cdbc30
--- /dev/null
+++ b/apps/sim/app/(landing)/components/features/components/core-feature-card/core-feature-card.tsx
@@ -0,0 +1,74 @@
+import type { ReactNode } from 'react'
+import { cn } from '@sim/emcn'
+import Link from 'next/link'
+import { LANDING_STAGE_RADIUS } from '@/app/(landing)/components/landing-layout'
+
+interface CoreFeatureCardProps {
+  title: string
+  description: string
+  href: string
+  visual: ReactNode
+  tone?: 'light' | 'mid' | 'dark'
+}
+
+const TONE_CLASSES = {
+  light: 'bg-[var(--surface-3)]',
+  mid: 'bg-[var(--surface-5)]',
+  dark: 'bg-[var(--text-secondary)]',
+} as const
+
+/**
+ * Lets a horizontal gesture over the illustration reach the rail underneath.
+ *
+ * The graphics crop themselves with `overflow-hidden`, which makes every crop
+ * box a scroll container, and the global base rule gives every element
+ * `overscroll-behavior-x: none`. A trackpad swipe or horizontal wheel landing
+ * anywhere on the stage would otherwise stop dead at the first crop it hits
+ * instead of chaining out to the scroller, so the rail only scrolled from the
+ * caption below the stage. Nothing inside the stage scrolls on its own, so
+ * chaining out is always right, and the rail's own `overscroll-x-contain`
+ * still keeps the gesture from running on into the page.
+ */
+const SCROLL_THROUGH = 'overscroll-x-auto [&_*]:overscroll-x-auto'
+
+/**
+ * One homepage product module: a tall product-UI stage followed by a compact,
+ * independently quotable title and description. The whole module is a real
+ * route link, while the illustration remains decorative and non-interactive.
+ */
+export function CoreFeatureCard({
+  title,
+  description,
+  href,
+  visual,
+  tone = 'light',
+}: CoreFeatureCardProps) {
+  return (
+    <article className='min-w-0'>
+      <Link
+        href={href}
+        rel={href.startsWith('https://') ? 'noopener noreferrer' : undefined}
+        className='group block outline-none focus-visible:outline focus-visible:outline-1 focus-visible:outline-[var(--border)] focus-visible:outline-offset-4'
+      >
+        <div
+          aria-hidden='true'
+          className={cn(
+            'relative aspect-[5/6] overflow-hidden border border-[var(--border)] transition-colors duration-300 group-hover:border-[var(--border)] motion-reduce:transition-none',
+            LANDING_STAGE_RADIUS,
+            SCROLL_THROUGH,
+            TONE_CLASSES[tone]
+          )}
+        >
+          <div className='absolute inset-0'>{visual}</div>
+        </div>
+
+        <h3 className='mt-5 text-[20px] text-[var(--text-primary)] leading-[1.25] tracking-[-0.01em]'>
+          {title}
+        </h3>
+        <p className='mt-2 max-w-[36ch] text-pretty text-[15px] text-[var(--text-body)] leading-[1.45]'>
+          {description}
+        </p>
+      </Link>
+    </article>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/features/components/core-feature-card/index.ts b/apps/sim/app/(landing)/components/features/components/core-feature-card/index.ts
new file mode 100644
index 00000000000..8f9d315d97e
--- /dev/null
+++ b/apps/sim/app/(landing)/components/features/components/core-feature-card/index.ts
@@ -0,0 +1 @@
+export { CoreFeatureCard } from './core-feature-card'
diff --git a/apps/sim/app/(landing)/components/features/components/feature-card/feature-card.tsx b/apps/sim/app/(landing)/components/features/components/feature-card/feature-card.tsx
deleted file mode 100644
index 5329bb0ed2d..00000000000
--- a/apps/sim/app/(landing)/components/features/components/feature-card/feature-card.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import type { ReactNode } from 'react'
-import { ChipTag, cn } from '@sim/emcn'
-import { ArrowRight } from '@sim/emcn/icons'
-import Image from 'next/image'
-import Link from 'next/link'
-
-interface FeatureCardProps {
-  /** Capability name shown as a chip tag pinned to the card's top-right corner. */
-  eyebrow: string
-  /** The beat's headline (`<h3>` - the section owns the single `<h2>`). */
-  title: string
-  /** Supporting copy beneath the headline. */
-  description: string
-  /** Optional trailing link (e.g. the feature's platform page). */
-  href?: string
-  /** Label for {@link href}. */
-  linkLabel?: string
-  /**
-   * Backdrop image under the floating callout (public path). Omit for a solid
-   * stage in the hero visual's light grey (`--surface-3`).
-   */
-  backdropSrc?: string
-  /**
-   * Which side the media stage sits on from `lg` up (cards alternate down the
-   * section, Cursor-style). Below `lg` the card always stacks media-first.
-   */
-  mediaSide?: 'left' | 'right'
-  /**
-   * Square the card's bottom corners so its bottom edge merges with a
-   * full-bleed divider drawn at the same line (the section's last card).
-   */
-  flushBottom?: boolean
-  /** The elevated real-UI callout floating over the backdrop. */
-  children: ReactNode
-}
-
-/**
- * Cursor-style feature card - one large OUTLINED container (a light
- * `--border` hairline on a transparent ground, no grey fill) holding a media
- * stage (a painted backdrop with the beat's real-UI callout floating over it)
- * and a vertically-centered copy column: `<h3>`, muted description, and an
- * optional arrow link. `mediaSide` picks which side the media sits on so the
- * cards can alternate down the section. The beat's name sits as a borderless
- * grey-filled {@link ChipTag} pinned to the card's top corner on the COPY
- * side (top-right when media is left, top-left when media is right), just
- * inside the outline - never floating over the media image.
- *
- * Below `lg` the card stacks - media on top, copy beneath - and the media
- * shortens so the card stays scannable in the compact grid. The pinned chip
- * would overlap the full-width media there, so it relocates INTO the copy
- * column, sitting above the `<h3>` as an in-flow eyebrow.
- */
-export function FeatureCard({
-  eyebrow,
-  title,
-  description,
-  href,
-  linkLabel,
-  backdropSrc,
-  mediaSide = 'left',
-  flushBottom = false,
-  children,
-}: FeatureCardProps) {
-  const mediaRight = mediaSide === 'right'
-  return (
-    <article
-      className={cn(
-        'relative grid gap-10 rounded-[10px] border border-[var(--border)] p-4 max-lg:grid-cols-1 max-lg:gap-6',
-        mediaRight ? 'grid-cols-[386px_1fr]' : 'grid-cols-[1fr_386px]',
-        flushBottom && 'rounded-b-none'
-      )}
-    >
-      <ChipTag
-        variant='mono'
-        className={cn('absolute top-4 z-10 max-lg:hidden', mediaRight ? 'left-4' : 'right-4')}
-      >
-        {eyebrow}
-      </ChipTag>
-      <div
-        aria-hidden='true'
-        className={cn(
-          'relative aspect-[3/2] overflow-hidden rounded-[4px] max-lg:order-1 max-lg:aspect-[4/3]',
-          !backdropSrc && 'bg-[var(--surface-3)]',
-          mediaRight && 'lg:order-2'
-        )}
-      >
-        {backdropSrc && (
-          <Image
-            src={backdropSrc}
-            alt=''
-            fill
-            sizes='(max-width: 1460px) 70vw, 900px'
-            className='object-cover'
-          />
-        )}
-        <div className='absolute inset-0 flex items-center justify-center p-4 [&>*]:max-w-full'>
-          {children}
-        </div>
-      </div>
-
-      <div
-        className={cn(
-          'flex flex-col justify-center max-lg:order-2 max-lg:pb-2',
-          mediaRight ? 'pl-4 max-lg:pl-0' : 'pr-4 max-lg:pr-0'
-        )}
-      >
-        <ChipTag variant='mono' className='hidden max-lg:mb-3 max-lg:inline-flex max-lg:self-start'>
-          {eyebrow}
-        </ChipTag>
-        <h3 className='text-balance text-[22px] text-[var(--text-primary)] leading-[1.3] max-sm:text-[20px]'>
-          {title}
-        </h3>
-        <p className='mt-3 text-pretty text-[15px] text-[var(--text-muted)] leading-[1.6]'>
-          {description}
-        </p>
-        {href && linkLabel && (
-          <Link
-            href={href}
-            className='mt-5 flex items-center gap-1.5 text-[15px] text-[var(--text-body)] transition-colors hover-hover:text-[var(--text-primary)]'
-          >
-            {linkLabel}
-            <ArrowRight className='size-[15px]' />
-          </Link>
-        )}
-      </div>
-    </article>
-  )
-}
diff --git a/apps/sim/app/(landing)/components/features/components/feature-card/index.ts b/apps/sim/app/(landing)/components/features/components/feature-card/index.ts
deleted file mode 100644
index fcb1594becb..00000000000
--- a/apps/sim/app/(landing)/components/features/components/feature-card/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { FeatureCard } from './feature-card'
diff --git a/apps/sim/app/(landing)/components/features/components/features-rail/features-rail.test.tsx b/apps/sim/app/(landing)/components/features/components/features-rail/features-rail.test.tsx
new file mode 100644
index 00000000000..093047e0408
--- /dev/null
+++ b/apps/sim/app/(landing)/components/features/components/features-rail/features-rail.test.tsx
@@ -0,0 +1,220 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, StrictMode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it } from 'vitest'
+import {
+  FeaturesRail,
+  foldScrollLeft,
+} from '@/app/(landing)/components/features/components/features-rail/features-rail'
+
+const CARDS = ['Chat', 'Workflows', 'Tables'] as const
+
+/** Slot pitch the layout stub uses: a card plus the rail's gap. */
+const PITCH = 444
+/** One set of three cards, in the stubbed layout. */
+const SET = CARDS.length * PITCH
+
+function cards() {
+  return CARDS.map((title) => (
+    <a key={title} href={`/${title.toLowerCase()}`}>
+      {title}
+    </a>
+  ))
+}
+
+const scrollLefts = new WeakMap<HTMLElement, number>()
+const originalOffsetLeft = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetLeft')
+const originalScrollLeft = Object.getOwnPropertyDescriptor(Element.prototype, 'scrollLeft')
+
+/**
+ * jsdom has no layout, so slots report a synthetic `offsetLeft` from their
+ * index, and `scrollLeft` round-trips through a map instead of a scrollport.
+ */
+beforeAll(() => {
+  Object.defineProperty(HTMLElement.prototype, 'offsetLeft', {
+    configurable: true,
+    get(this: HTMLElement) {
+      const parent = this.parentElement
+      if (!parent || !this.hasAttribute('data-copy')) return 0
+      return Array.prototype.indexOf.call(parent.children, this) * PITCH
+    },
+  })
+  Object.defineProperty(Element.prototype, 'scrollLeft', {
+    configurable: true,
+    get(this: HTMLElement) {
+      return scrollLefts.get(this) ?? 0
+    },
+    set(this: HTMLElement, value: number) {
+      scrollLefts.set(this, value)
+    },
+  })
+})
+
+afterAll(() => {
+  if (originalOffsetLeft)
+    Object.defineProperty(HTMLElement.prototype, 'offsetLeft', originalOffsetLeft)
+  if (originalScrollLeft) Object.defineProperty(Element.prototype, 'scrollLeft', originalScrollLeft)
+})
+
+let root: Root | null = null
+let host: HTMLDivElement | null = null
+
+beforeEach(() => {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  host = document.createElement('div')
+  document.body.append(host)
+  root = createRoot(host)
+})
+
+afterEach(() => {
+  act(() => root?.unmount())
+  root = null
+  host?.remove()
+  host = null
+})
+
+function mount(strict = false): HTMLElement {
+  const rail = <FeaturesRail label='Core Sim features'>{cards()}</FeaturesRail>
+  act(() => root?.render(strict ? <StrictMode>{rail}</StrictMode> : rail))
+  const el = host?.querySelector<HTMLElement>('[aria-label="Core Sim features"]')
+  if (!el) throw new Error('rail did not render')
+  return el
+}
+
+function scrollTo(rail: HTMLElement, left: number): number {
+  rail.scrollLeft = left
+  rail.dispatchEvent(new Event('scroll'))
+  return rail.scrollLeft
+}
+
+describe('foldScrollLeft', () => {
+  it('leaves the home range alone and folds by exactly one set width', () => {
+    expect(foldScrollLeft(1000, 1000)).toBe(1000)
+    expect(foldScrollLeft(500, 1000)).toBe(500)
+    expect(foldScrollLeft(499, 1000)).toBe(1499)
+    expect(foldScrollLeft(1500, 1000)).toBe(500)
+    expect(foldScrollLeft(2600, 1000)).toBe(600)
+    expect(foldScrollLeft(-200, 1000)).toBe(800)
+  })
+
+  it('does nothing without a measurable set', () => {
+    expect(foldScrollLeft(42, 0)).toBe(42)
+  })
+})
+
+describe('FeaturesRail', () => {
+  it('server-renders the finite rail once, with the scroll chrome', () => {
+    const html = renderToStaticMarkup(
+      <FeaturesRail label='Core Sim features'>{cards()}</FeaturesRail>
+    )
+
+    expect(html).toContain('aria-label="Core Sim features"')
+    expect(html).toContain('overflow-x-auto')
+    expect(html).not.toContain('snap-')
+    expect(html.match(/data-copy="home"/g)).toHaveLength(3)
+    expect(html).not.toContain('data-copy="lead"')
+    expect(html).not.toContain('data-copy="tail"')
+  })
+
+  it('loops after hydration with clones off the tab order and accessibility tree', () => {
+    const rail = mount()
+
+    expect(rail.querySelectorAll('[data-copy="lead"]')).toHaveLength(3)
+    expect(rail.querySelectorAll('[data-copy="home"]')).toHaveLength(3)
+    expect(rail.querySelectorAll('[data-copy="tail"]')).toHaveLength(3)
+    expect(rail.querySelectorAll('[data-copy="lead"][aria-hidden="true"]')).toHaveLength(3)
+    expect(rail.querySelectorAll('[data-copy="tail"][aria-hidden="true"]')).toHaveLength(3)
+    expect(rail.querySelectorAll('[data-copy="home"][aria-hidden]')).toHaveLength(0)
+
+    const cloneLinks = rail.querySelectorAll('[data-copy="lead"] a, [data-copy="tail"] a')
+    expect(cloneLinks).toHaveLength(6)
+    for (const link of cloneLinks) {
+      expect(link.getAttribute('tabindex')).toBe('-1')
+    }
+    expect(rail.querySelectorAll('[data-copy="home"] a[tabindex]')).toHaveLength(0)
+    expect(rail.children).toHaveLength(9)
+  })
+
+  it('rests on the middle copy after hydration, once, even when Strict Mode reruns the effect', () => {
+    expect(mount().scrollLeft).toBe(SET)
+    act(() => root?.unmount())
+    root = createRoot(host as HTMLDivElement)
+    expect(mount(true).scrollLeft).toBe(SET)
+  })
+
+  it('drags with the mouse, scrolling by the pointer delta and swallowing the click', () => {
+    const rail = mount()
+    const link = rail.querySelector<HTMLAnchorElement>('[data-copy="home"] a')
+    if (!link) throw new Error('no home link')
+    /** jsdom has no PointerEvent; a MouseEvent carrying the pointer fields is what the handlers read. */
+    const pointer = (type: string, clientX: number) => {
+      const event = new MouseEvent(type, { bubbles: true, button: 0, clientX })
+      Object.defineProperties(event, { pointerType: { value: 'mouse' }, pointerId: { value: 1 } })
+      return event
+    }
+
+    rail.scrollLeft = SET
+    link.dispatchEvent(pointer('pointerdown', 300))
+    link.dispatchEvent(pointer('pointermove', 303))
+    expect(rail.scrollLeft).toBe(SET)
+    link.dispatchEvent(pointer('pointermove', 260))
+    expect(rail.scrollLeft).toBe(SET + 40)
+    expect(rail.dataset.dragging).toBe('')
+    link.dispatchEvent(pointer('pointerup', 260))
+    expect(rail.dataset.dragging).toBeUndefined()
+
+    const click = new MouseEvent('click', { bubbles: true, cancelable: true, detail: 1 })
+    link.dispatchEvent(click)
+    expect(click.defaultPrevented).toBe(true)
+
+    let swallowed: boolean | null = null
+    link.addEventListener(
+      'click',
+      (event) => {
+        swallowed = event.defaultPrevented
+        event.preventDefault()
+      },
+      { once: true }
+    )
+    link.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+    expect(swallowed).toBe(false)
+  })
+
+  it.each(['pointercancel', 'pointerup'])(
+    'allows keyboard activation after a drag ends with %s',
+    (endEvent) => {
+      const rail = mount()
+      const link = rail.querySelector<HTMLAnchorElement>('[data-copy="home"] a')
+      if (!link) throw new Error('no home link')
+      for (const [type, clientX] of [
+        ['pointerdown', 300],
+        ['pointermove', 260],
+        [endEvent, 260],
+      ] as const) {
+        const event = new MouseEvent(type, { bubbles: true, button: 0, clientX })
+        Object.defineProperties(event, { pointerType: { value: 'mouse' }, pointerId: { value: 1 } })
+        link.dispatchEvent(event)
+      }
+      expect(rail.dataset.dragging).toBeUndefined()
+
+      let activated = false
+      link.addEventListener('click', (event) => {
+        activated = true
+        event.preventDefault()
+      })
+      link.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, detail: 0 }))
+      expect(activated).toBe(true)
+    }
+  )
+
+  it('folds the position back into the middle copy as the user scrolls past it', () => {
+    const rail = mount()
+
+    expect(scrollTo(rail, SET + 200)).toBe(SET + 200)
+    expect(scrollTo(rail, SET * 1.5 + 100)).toBe(SET * 0.5 + 100)
+    expect(scrollTo(rail, SET * 0.5 - 60)).toBe(SET * 1.5 - 60)
+  })
+})
diff --git a/apps/sim/app/(landing)/components/features/components/features-rail/features-rail.tsx b/apps/sim/app/(landing)/components/features/components/features-rail/features-rail.tsx
new file mode 100644
index 00000000000..cd306a644e1
--- /dev/null
+++ b/apps/sim/app/(landing)/components/features/components/features-rail/features-rail.tsx
@@ -0,0 +1,248 @@
+'use client'
+
+import { Children, type ReactNode, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { cn } from '@sim/emcn'
+import { EdgeFade } from '@/app/(landing)/components/shared/edge-fade'
+
+/**
+ * Breaks the rail out of the 10/12 inset to the section's edges. The section
+ * is a size container (`container-type: inline-size`), so `50cqw - 50%` is
+ * exactly the inset's offset from the section edge: as a negative margin it
+ * spans the rail edge to edge, and the same value as padding keeps the first
+ * card aligned with the heading while cards clip at the viewport rather than
+ * at the inset.
+ */
+const RAIL_BLEED = '-mx-[calc(50cqw_-_50%)] px-[calc(50cqw_-_50%)]'
+
+/**
+ * The edge-fade overlay, stretched over the same edge-to-edge span the rail
+ * bleeds to. The overlay is positioned against the rail's wrapper, which keeps
+ * the inset width, so `50%` here is the same half-inset {@link RAIL_BLEED}
+ * subtracts - pulling each side out to the section edge. Above the cards
+ * (below the navbar's `z-50`) and transparent to the pointer, so the fade only
+ * ever paints.
+ */
+const RAIL_EDGE_SPAN =
+  'pointer-events-none absolute inset-y-0 z-10 left-[calc(50%_-_50cqw)] right-[calc(50%_-_50cqw)]'
+
+/** One card slot: fixed responsive width. */
+const SLOT_CLASS = 'w-[min(78vw,420px)] shrink-0 max-sm:w-[84vw]'
+
+/** Pointer travel before a mouse press on the rail becomes a drag instead of a click. */
+const DRAG_THRESHOLD_PX = 6
+
+/**
+ * A fold moves the position by a whole set width, so anything smaller than
+ * this is floating-point noise from re-deriving an in-range position.
+ */
+const FOLD_TOLERANCE = 1
+
+type Copy = 'lead' | 'home' | 'tail'
+
+/**
+ * Folds a scroll position back into the loop's home range. Three copies of the
+ * set sit side by side; the position is kept between half a set and a set and
+ * a half in, so a full set of cards is always waiting on either side and every
+ * fold - an exact set width, onto identical content - is invisible. A
+ * `setWidth` of 0 means the loop is not measurable (no layout), so the position
+ * is left alone.
+ */
+export function foldScrollLeft(scrollLeft: number, setWidth: number): number {
+  if (setWidth <= 0) return scrollLeft
+  const from = setWidth / 2
+  const offset = (((scrollLeft - from) % setWidth) + setWidth) % setWidth
+  return from + offset
+}
+
+interface SlotsProps {
+  copy: Copy
+  cards: ReactNode[]
+}
+
+/**
+ * One copy of the set as flat flex children, so the gap between copies equals
+ * the gap between cards and the loop's period is exactly one set width. Clones
+ * stay clickable but leave the accessibility tree.
+ */
+function Slots({ copy, cards }: SlotsProps) {
+  const clone = copy !== 'home'
+  return (
+    <>
+      {cards.map((card, index) => (
+        <div
+          key={`${copy}-${index}`}
+          data-copy={copy}
+          aria-hidden={clone ? 'true' : undefined}
+          className={SLOT_CLASS}
+        >
+          {card}
+        </div>
+      ))}
+    </>
+  )
+}
+
+interface FeaturesRailProps {
+  /** Accessible name of the scrolling region. */
+  label: string
+  /**
+   * The cards, in order. Each becomes one slot; once JS runs the whole set is
+   * cloned on both sides so the rail loops.
+   */
+  children: ReactNode
+}
+
+/**
+ * The homepage product rail: native horizontal scrolling that never ends.
+ *
+ * The server renders the set once, so the HTML - and any visit without JS - is
+ * the plain finite rail with the first card under the heading. After hydration
+ * the set is cloned once on each side, the scroll position jumps one set width
+ * before paint so nothing visibly moves (folded, so Strict Mode's second run of
+ * the effect lands on the same spot), and a passive scroll listener folds the
+ * position back into the middle copy whenever it drifts half a set past it. The fold is an exact set width onto identical content, so the space
+ * left of the first card is always the tail of the set and scrolling in either
+ * direction never meets an end.
+ *
+ * Wheel, trackpad, touch, and keyboard all drive the native scroller with no
+ * snapping to fight them, so the rail scrolls the same whether or not the
+ * pointer is over a card. A mouse can also drag the rail: past a small
+ * threshold the press scrolls by the pointer's movement (as deltas, so a fold
+ * mid-drag is harmless), the click that would follow is swallowed, and native
+ * link and image drags are off. Clones stay clickable but sit outside the tab
+ * order and the accessibility tree, so keyboard and screen-reader users meet
+ * each product exactly once.
+ *
+ * Both screen edges blur and fade into the page ground ({@link EdgeFade}), the
+ * same treatment the product-demo stage wears, so a card leaving the rail
+ * softens away instead of being cut off at the viewport.
+ */
+export function FeaturesRail({ label, children }: FeaturesRailProps) {
+  const railRef = useRef<HTMLDivElement>(null)
+  const setWidthRef = useRef(0)
+  const [looping, setLooping] = useState(false)
+  const cards = Children.toArray(children)
+
+  useEffect(() => {
+    setLooping(true)
+  }, [])
+
+  useLayoutEffect(() => {
+    if (!looping) return
+    const rail = railRef.current
+    if (!rail) return
+
+    const measure = () => {
+      const lead = rail.querySelector<HTMLElement>('[data-copy="lead"]')
+      const home = rail.querySelector<HTMLElement>('[data-copy="home"]')
+      setWidthRef.current = lead && home ? home.offsetLeft - lead.offsetLeft : 0
+    }
+    const fold = () => {
+      const next = foldScrollLeft(rail.scrollLeft, setWidthRef.current)
+      if (Math.abs(next - rail.scrollLeft) > FOLD_TOLERANCE) rail.scrollLeft = next
+    }
+
+    for (const link of rail.querySelectorAll<HTMLElement>(
+      '[data-copy="lead"] a, [data-copy="tail"] a'
+    )) {
+      link.tabIndex = -1
+    }
+    measure()
+    rail.scrollLeft = foldScrollLeft(rail.scrollLeft + setWidthRef.current, setWidthRef.current)
+    rail.addEventListener('scroll', fold, { passive: true })
+    const observer =
+      typeof ResizeObserver === 'undefined'
+        ? undefined
+        : new ResizeObserver(() => {
+            measure()
+            fold()
+          })
+    observer?.observe(rail)
+
+    return () => {
+      rail.removeEventListener('scroll', fold)
+      observer?.disconnect()
+    }
+  }, [looping])
+
+  useEffect(() => {
+    const rail = railRef.current
+    if (!rail) return
+    let pointerId: number | null = null
+    let startX = 0
+    let lastX = 0
+    let dragged = false
+    let suppressNextClick = false
+
+    const onPointerDown = (event: PointerEvent) => {
+      if (event.pointerType !== 'mouse' || event.button !== 0) return
+      pointerId = event.pointerId
+      startX = event.clientX
+      lastX = event.clientX
+      dragged = false
+      suppressNextClick = false
+    }
+    const onPointerMove = (event: PointerEvent) => {
+      if (event.pointerId !== pointerId) return
+      if (!dragged) {
+        if (Math.abs(event.clientX - startX) < DRAG_THRESHOLD_PX) return
+        dragged = true
+        rail.dataset.dragging = ''
+        rail.setPointerCapture?.(event.pointerId)
+      }
+      rail.scrollLeft -= event.clientX - lastX
+      lastX = event.clientX
+    }
+    const onPointerEnd = (event: PointerEvent) => {
+      if (event.pointerId !== pointerId) return
+      pointerId = null
+      suppressNextClick = event.type === 'pointerup' && dragged
+      dragged = false
+      delete rail.dataset.dragging
+      if (rail.hasPointerCapture?.(event.pointerId)) rail.releasePointerCapture(event.pointerId)
+    }
+    const onClick = (event: MouseEvent) => {
+      const suppress = suppressNextClick && event.detail > 0
+      suppressNextClick = false
+      if (!suppress) return
+      event.preventDefault()
+      event.stopPropagation()
+    }
+    const onDragStart = (event: DragEvent) => event.preventDefault()
+
+    rail.addEventListener('pointerdown', onPointerDown)
+    rail.addEventListener('pointermove', onPointerMove)
+    rail.addEventListener('pointerup', onPointerEnd)
+    rail.addEventListener('pointercancel', onPointerEnd)
+    rail.addEventListener('click', onClick, true)
+    rail.addEventListener('dragstart', onDragStart)
+    return () => {
+      rail.removeEventListener('pointerdown', onPointerDown)
+      rail.removeEventListener('pointermove', onPointerMove)
+      rail.removeEventListener('pointerup', onPointerEnd)
+      rail.removeEventListener('pointercancel', onPointerEnd)
+      rail.removeEventListener('click', onClick, true)
+      rail.removeEventListener('dragstart', onDragStart)
+    }
+  }, [])
+
+  return (
+    <div className='relative'>
+      <div
+        ref={railRef}
+        aria-label={label}
+        className={cn(
+          'flex gap-6 overflow-x-auto overscroll-x-contain pb-4 [overflow-anchor:none] [scrollbar-width:none] data-[dragging]:cursor-grabbing data-[dragging]:select-none [&::-webkit-scrollbar]:hidden',
+          RAIL_BLEED
+        )}
+      >
+        {looping && <Slots copy='lead' cards={cards} />}
+        <Slots copy='home' cards={cards} />
+        {looping && <Slots copy='tail' cards={cards} />}
+      </div>
+      <div className={RAIL_EDGE_SPAN}>
+        <EdgeFade ground='canvas' edges={['left', 'right']} depth='bleed' />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/features/components/features-rail/index.ts b/apps/sim/app/(landing)/components/features/components/features-rail/index.ts
new file mode 100644
index 00000000000..8283070c3a5
--- /dev/null
+++ b/apps/sim/app/(landing)/components/features/components/features-rail/index.ts
@@ -0,0 +1 @@
+export { FeaturesRail } from './features-rail'
diff --git a/apps/sim/app/(landing)/components/features/components/integrations-callout/integrations-callout.tsx b/apps/sim/app/(landing)/components/features/components/integrations-callout/integrations-callout.tsx
deleted file mode 100644
index 75660444a55..00000000000
--- a/apps/sim/app/(landing)/components/features/components/integrations-callout/integrations-callout.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { CalloutFrame } from '@/app/(landing)/components/features/components/callout-frame'
-import { CapturedPlatformSurface } from '@/app/(landing)/components/features/components/captured-platform-surface'
-
-/**
- * The Integrate beat's callout - the platform Integrations page as one
- * floating window. The detailed page capture is paired with the shared live
- * landing sidebar so its navigation and footer stay aligned with the product.
- *
- * The window is oversized (125% of the media stage, ~82% of the capture's
- * native scale) and anchored with visually EQUAL top and left insets
- * (percentage-based - 9.6% of the stage width; 14.4% of its 3:2 height lands
- * at the same px), so its top-left corner floats free over the backdrop while
- * the right AND bottom edges bleed past the media stage's clip - a zoomed-in
- * peek at part of the product rather than a complete miniature, scaling
- * proportionally with the aspect-locked stage. Decorative.
- *
- * `sizes` is derived directly from the section's grid math rather than
- * approximated, then rounded up to the worst-case (peak render/viewport
- * ratio) in each tier so the browser never under-fetches:
- * `callout = 1.25 * (viewport - 2*gutter - 32px card padding - [40px gap +
- * 386px fixed copy column, desktop only])`, gutter = `px-20`/`max-lg:px-8`/
- * `max-sm:px-5` from `Features`'s grid, matching `FeatureCard`'s
- * `max-lg:grid-cols-1` stack. Peak ratios (verified against a static
- * reproduction of this exact layout rendered at each Tailwind breakpoint):
- * ~113.3% at the `max-width: 1023px` stacked tier's own upper edge, ~108.6%
- * at `1460px` (the container's cap, where render width stops growing with
- * viewport - hence the final tier is a flat px value, not a vw fraction).
- */
-export function IntegrationsCallout() {
-  return (
-    <div className='absolute inset-0'>
-      <CalloutFrame
-        className='absolute top-[14.4%] left-[9.6%] w-[125%]'
-        bodyClassName='aspect-[1280/735]'
-      >
-        <CapturedPlatformSurface
-          src='/landing/feature-integrate-ui.png'
-          sizes='(max-width: 1023px) 114vw, (max-width: 1460px) 109vw, 1053px'
-          activeItem='Integrations'
-        />
-      </CalloutFrame>
-    </div>
-  )
-}
diff --git a/apps/sim/app/(landing)/components/features/components/knowledge-callout/knowledge-callout.tsx b/apps/sim/app/(landing)/components/features/components/knowledge-callout/knowledge-callout.tsx
deleted file mode 100644
index c9315b80823..00000000000
--- a/apps/sim/app/(landing)/components/features/components/knowledge-callout/knowledge-callout.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { CalloutFrame } from '@/app/(landing)/components/features/components/callout-frame'
-import { CapturedPlatformSurface } from '@/app/(landing)/components/features/components/captured-platform-surface'
-
-/**
- * The Context beat's callout - the platform Knowledge bases page as one
- * floating window. The detailed page capture is paired with the shared live
- * landing sidebar so its navigation and footer stay aligned with the product.
- *
- * Same oversized treatment as the Integrate card: 125% of the media stage
- * with EQUAL top and left insets (96px), so the top-left corner floats free
- * over the backdrop while the right and bottom edges bleed past the media
- * stage's clip. Decorative.
- */
-export function KnowledgeCallout() {
-  return (
-    <div className='absolute inset-0'>
-      <CalloutFrame
-        className='absolute top-[14.4%] left-[9.6%] w-[125%]'
-        bodyClassName='aspect-[1280/735]'
-      >
-        <CapturedPlatformSurface
-          src='/landing/feature-context-ui.png'
-          sizes='1050px'
-          activeItem='Knowledge bases'
-        />
-      </CalloutFrame>
-    </div>
-  )
-}
diff --git a/apps/sim/app/(landing)/components/features/components/logs-callout/index.ts b/apps/sim/app/(landing)/components/features/components/logs-callout/index.ts
deleted file mode 100644
index 572eadac8b3..00000000000
--- a/apps/sim/app/(landing)/components/features/components/logs-callout/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { LogsCallout } from './logs-callout'
diff --git a/apps/sim/app/(landing)/components/features/components/logs-callout/logs-callout.tsx b/apps/sim/app/(landing)/components/features/components/logs-callout/logs-callout.tsx
deleted file mode 100644
index dd34fb30fea..00000000000
--- a/apps/sim/app/(landing)/components/features/components/logs-callout/logs-callout.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { CalloutFrame } from '@/app/(landing)/components/features/components/callout-frame'
-import { CapturedPlatformSurface } from '@/app/(landing)/components/features/components/captured-platform-surface'
-
-/**
- * The Monitor beat's callout - the platform Logs page as one floating window.
- * The detailed page capture is paired with the shared live landing sidebar so
- * its navigation and footer stay aligned with the product.
- *
- * Same oversized treatment as the Context card: 125% of the media stage with
- * EQUAL top and left insets (96px), so the top-left corner floats free over
- * the backdrop while the right and bottom edges bleed past the media stage's
- * clip. Decorative.
- */
-export function LogsCallout() {
-  return (
-    <div className='absolute inset-0'>
-      <CalloutFrame
-        className='absolute top-[14.4%] left-[9.6%] w-[125%]'
-        bodyClassName='aspect-[1280/735]'
-      >
-        <CapturedPlatformSurface
-          src='/landing/feature-monitor-ui.png'
-          sizes='1050px'
-          activeItem='Logs'
-        />
-      </CalloutFrame>
-    </div>
-  )
-}
diff --git a/apps/sim/app/(landing)/components/features/features.test.tsx b/apps/sim/app/(landing)/components/features/features.test.tsx
new file mode 100644
index 00000000000..29d3ae24ad2
--- /dev/null
+++ b/apps/sim/app/(landing)/components/features/features.test.tsx
@@ -0,0 +1,31 @@
+/**
+ * @vitest-environment node
+ */
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { Features } from '@/app/(landing)/components/features/features'
+
+const MODULES = [
+  { title: 'CLI', href: 'https://docs.sim.ai/cli' },
+  { title: 'Workflows', href: '/workflows' },
+  { title: 'Knowledge Base', href: '/knowledge' },
+  { title: 'Tables', href: '/tables' },
+  { title: 'Files', href: '/files' },
+  { title: 'Logs', href: '/logs' },
+] as const
+
+describe('Features', () => {
+  it('renders every core Sim module as a crawlable tall card', () => {
+    const html = renderToStaticMarkup(<Features />)
+
+    expect(html).toContain('Everything AI agents need to do real work')
+    expect(html).toContain('aspect-[5/6]')
+    expect(html).toContain('rounded-[12px]')
+    expect(html).toContain('overflow-x-auto')
+
+    for (const module of MODULES) {
+      expect(html).toContain(`>${module.title}</h3>`)
+      expect(html).toContain(`href="${module.href}"`)
+    }
+  })
+})
diff --git a/apps/sim/app/(landing)/components/features/features.tsx b/apps/sim/app/(landing)/components/features/features.tsx
index 498ab5b2ced..38739febf9f 100644
--- a/apps/sim/app/(landing)/components/features/features.tsx
+++ b/apps/sim/app/(landing)/components/features/features.tsx
@@ -1,94 +1,99 @@
-import { BuildCallout } from '@/app/(landing)/components/features/components/build-callout'
-import { FeatureCard } from '@/app/(landing)/components/features/components/feature-card'
-import { IntegrationsCallout } from '@/app/(landing)/components/features/components/integrations-callout/integrations-callout'
-import { KnowledgeCallout } from '@/app/(landing)/components/features/components/knowledge-callout/knowledge-callout'
-import { LogsCallout } from '@/app/(landing)/components/features/components/logs-callout'
+import { cn } from '@sim/emcn'
+import { CoreFeatureCard } from '@/app/(landing)/components/features/components/core-feature-card'
+import { FeaturesRail } from '@/app/(landing)/components/features/components/features-rail'
+import {
+  HOME_INSET,
+  HOME_TYPE,
+  LANDING_CONTENT_WIDTH,
+  LANDING_GUTTER,
+} from '@/app/(landing)/components/landing-layout'
+import { CliGraphic } from '@/app/(landing)/components/shared/cli-graphic/cli-graphic'
+import { FileLibraryGraphic } from '@/app/(landing)/files/components/feature-graphics/file-library-graphic'
+import { ConnectorSyncGraphic } from '@/app/(landing)/knowledge/components/feature-graphics/connector-sync-graphic'
+import { RunTraceGraphic } from '@/app/(landing)/logs/components/feature-graphics'
+import { TableGridGraphic } from '@/app/(landing)/tables/components/feature-graphics'
+import { WorkflowCanvasGraphic } from '@/app/(landing)/workflows/components/feature-graphics'
 
 /**
- * Landing features - how Sim works, as a platform lifecycle. Four beats, in the
- * order you actually use Sim: bring your tools in (Integrate), give it data to
- * reason over (Context), build the agent logic (Build), then watch it run
- * (Monitor). Each beat is a Cursor-style {@link FeatureCard}: one large
- * outlined card holding a media stage (backdrop painting + elevated real-UI
- * callout) and a copy column, with the media side alternating card to card.
- *
- * The section's `<h2>` is `sr-only` - each beat carries its own visible `<h3>`,
- * so the section heading exists only to anchor the heading hierarchy and give AI
- * crawlers an atomic summary.
- *
- * Inter-section spacing is owned by the `<main>` flex `gap` in `landing.tsx`;
- * this section carries no vertical padding. The section itself is FULL-WIDTH so
- * its bottom rule can bleed to the browser edges; the card grid inside carries
- * the shared gutter (`px-20`) and the `max-w-[1460px]` cap. The last card
- * squares its bottom corners (`flushBottom`) and sits exactly on the rule, so
- * its outline merges into the full-bleed divider.
- *
- * The cards stack in a single column at every width on a 112px rhythm
- * (matching Cursor's spacing between feature cards). Below `lg` each card
- * internally reflows media-over-copy.
- *
- * Per-beat icons are still abstract placeholders (text eyebrows); distinct
- * abstract glyphs land in a later pass.
+ * Homepage product suite - six tall editorial modules built from the same
+ * product-faithful UI illustrations used across Sim's platform pages.
+ */
+const CORE_FEATURES = [
+  {
+    title: 'CLI',
+    description: 'Use Sim from Claude Code or your terminal to build, run, and manage agents.',
+    href: 'https://docs.sim.ai/cli',
+    tone: 'mid',
+    visual: <CliGraphic />,
+  },
+  {
+    title: 'Workflows',
+    description: 'Sim connects blocks, models, and integrations into agent logic.',
+    href: '/workflows',
+    tone: 'light',
+    visual: <WorkflowCanvasGraphic />,
+  },
+  {
+    title: 'Knowledge Base',
+    description: 'Sim gives every agent trusted memory from synced sources.',
+    href: '/knowledge',
+    tone: 'mid',
+    visual: <ConnectorSyncGraphic />,
+  },
+  {
+    title: 'Tables',
+    description: 'Sim stores the structured data agents read and update between runs.',
+    href: '/tables',
+    tone: 'light',
+    visual: <TableGridGraphic />,
+  },
+  {
+    title: 'Files',
+    description: 'Sim keeps team uploads and agent outputs in one shared store.',
+    href: '/files',
+    tone: 'mid',
+    visual: <FileLibraryGraphic />,
+  },
+  {
+    title: 'Logs',
+    description: 'Sim traces every agent run block by block, including failures.',
+    href: '/logs',
+    tone: 'light',
+    visual: <RunTraceGraphic />,
+  },
+] as const
+
+/**
+ * Six product modules on one horizontally scrolling rail. The heading keeps
+ * the page measure; the rail runs flush to the screen edges and loops - see
+ * {@link FeaturesRail}. The section is the rail's size container.
  */
 export function Features() {
   return (
-    <section id='features' aria-labelledby='features-heading' className='relative w-full'>
-      <h2 id='features-heading' className='sr-only'>
-        Integrate your tools, give Sim context, build agents, and monitor every run.
-      </h2>
-
-      <div className='mx-auto grid w-full max-w-[1460px] grid-cols-1 gap-28 px-20 max-sm:gap-12 max-sm:px-5 max-lg:px-8'>
-        {/* Integrate: bring your stack in. */}
-        <FeatureCard
-          eyebrow='Integrate'
-          title='Connect the tools your work runs on.'
-          description='Plug in 1,000+ integrations like Slack, HubSpot, Salesforce, and Notion, so Sim agents act across the stack you already use.'
-          href='/integrations'
-          linkLabel='Explore integrations'
-          backdropSrc='/landing/feature-integrate-backdrop.jpg'
-        >
-          <IntegrationsCallout />
-        </FeatureCard>
+    <section
+      id='features'
+      aria-labelledby='features-heading'
+      className='flex flex-col [container-type:inline-size]'
+    >
+      <div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER)}>
+        <div className={HOME_INSET}>
+          <h2
+            id='features-heading'
+            className={cn(
+              'mb-16 max-w-[20ch] text-balance text-[var(--text-primary)] max-sm:mb-10 max-lg:mb-12',
+              HOME_TYPE.h2
+            )}
+          >
+            Everything AI agents need to do real work
+          </h2>
 
-        {/* Context: store data semantically. */}
-        <FeatureCard
-          eyebrow='Context'
-          title='Give Sim data it can reason over.'
-          description='Sim stores your data in tables, files, and knowledge bases, the semantic memory agents read to ground every answer.'
-          backdropSrc='/landing/feature-context-backdrop.jpg'
-          mediaSide='right'
-        >
-          <KnowledgeCallout />
-        </FeatureCard>
-
-        {/* Build: wire agent logic in the visual builder. */}
-        <FeatureCard
-          eyebrow='Build'
-          title='Build agents that solve real problems.'
-          description="Wire blocks, models, and integrations into agent logic on Sim's visual builder, from one agent to many working in parallel."
-          href='/workflows'
-          linkLabel='Explore the AI workflow builder'
-        >
-          <BuildCallout />
-        </FeatureCard>
-
-        {/* Monitor: watch every run. */}
-        <FeatureCard
-          eyebrow='Monitor'
-          title='Watch every run, end to end.'
-          description='Sim traces each run block by block, with full logs and the real cost.'
-          backdropSrc='/landing/feature-monitor-backdrop.jpg'
-          mediaSide='right'
-          flushBottom
-        >
-          <LogsCallout />
-        </FeatureCard>
+          <FeaturesRail label='Core Sim features'>
+            {CORE_FEATURES.map((feature) => (
+              <CoreFeatureCard key={feature.title} {...feature} />
+            ))}
+          </FeaturesRail>
+        </div>
       </div>
-
-      {/* Full-bleed rule the last card's squared bottom edge merges into -
-          spans the whole browser, past the content cap and gutter (the section
-          itself is full-width; only the card grid above is capped). */}
-      <div aria-hidden='true' className='absolute inset-x-0 bottom-0 h-px bg-[var(--border)]' />
     </section>
   )
 }
diff --git a/apps/sim/app/(landing)/components/footer/components/footer-wordmark-loop/footer-wordmark-loop.test.tsx b/apps/sim/app/(landing)/components/footer/components/footer-wordmark-loop/footer-wordmark-loop.test.tsx
new file mode 100644
index 00000000000..a39fb279919
--- /dev/null
+++ b/apps/sim/app/(landing)/components/footer/components/footer-wordmark-loop/footer-wordmark-loop.test.tsx
@@ -0,0 +1,128 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { WORDMARK_PATHS } from '@/lib/branding/wordmark'
+import { FooterWordmarkLoop } from '@/app/(landing)/components/footer/components/footer-wordmark-loop/footer-wordmark-loop'
+
+const SHAPES = ['metaballs', 'relay', 'compass', 'corners', 'burst', 'squeeze', 'thinking'] as const
+
+/** One full pass of the master film, in ms. */
+const CYCLE_MS = 17_100
+
+let pending: FrameRequestCallback[] = []
+let clock = 0
+let root: Root | null = null
+let host: HTMLDivElement | null = null
+
+/**
+ * Drives the captured frame callbacks to `ms` on the loop's own clock in 50ms
+ * steps - under the loop's 100ms per-frame cap, so no choreography is skipped.
+ */
+function advanceTo(ms: number): void {
+  while (clock < ms) {
+    clock = Math.min(clock + 50, ms)
+    const frame = pending.shift()
+    if (!frame) throw new Error('the loop stopped requesting frames')
+    const now = clock
+    act(() => frame(now))
+  }
+}
+
+function attr(selector: string, name: string): string | null {
+  return host?.querySelector(selector)?.getAttribute(name) ?? null
+}
+
+beforeEach(() => {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  pending = []
+  clock = 0
+  const stubs = {
+    requestAnimationFrame: (cb: FrameRequestCallback) => pending.push(cb),
+    cancelAnimationFrame: () => {
+      pending = []
+    },
+    matchMedia: () => ({
+      matches: false,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+    }),
+  }
+  for (const [name, value] of Object.entries(stubs)) {
+    vi.stubGlobal(name, value)
+    Object.assign(window, { [name]: value })
+  }
+  host = document.createElement('div')
+  document.body.append(host)
+  root = createRoot(host)
+  act(() => root?.render(<FooterWordmarkLoop />))
+  const anchor = pending.shift()
+  if (!anchor) throw new Error('the loop never started')
+  act(() => anchor(0))
+})
+
+afterEach(() => {
+  act(() => root?.unmount())
+  root = null
+  host?.remove()
+  host = null
+  vi.unstubAllGlobals()
+})
+
+describe('FooterWordmarkLoop', () => {
+  it('server-renders the crisp wordmark as the resting frame', () => {
+    const html = renderToStaticMarkup(<FooterWordmarkLoop />)
+
+    expect(html).toContain('aria-hidden="true"')
+    expect(html).toContain('data-stage="wm" opacity="1"')
+    expect(html).toContain('data-stage="orb" opacity="0"')
+    expect(html).toContain('stdDeviation="0.55"')
+    for (const shape of SHAPES) {
+      expect(html).toContain(`data-stage="${shape}" opacity="0"`)
+    }
+    for (const d of WORDMARK_PATHS) {
+      expect(html).toContain(`d="${d}"`)
+    }
+  })
+
+  it('plays the master timeline: wordmark, orb, the seven shapes, orb, wordmark', () => {
+    expect(attr('[data-stage="wm"]', 'opacity')).toBe('1.0000')
+    expect(attr('[data-goo]', 'stdDeviation')).toBe('0.550')
+
+    advanceTo(2700)
+    expect(attr('[data-stage="wm"]', 'opacity')).toBe('0.0000')
+    expect(attr('[data-stage="orb"]', 'opacity')).toBe('1.0000')
+    expect(attr('[data-goo]', 'stdDeviation')).toBe('5.000')
+
+    advanceTo(3900)
+    expect(attr('[data-stage="metaballs"]', 'opacity')).toBe('1.0000')
+    expect(attr('[data-stage="orb"]', 'opacity')).toBe('0.0000')
+    expect(attr('[data-anim="metaballsA"]', 'transform')).not.toBe('translate(0.000 0.000)')
+
+    advanceTo(7000)
+    expect(attr('[data-stage="compass"]', 'opacity')).toBe('1.0000')
+    expect(attr('[data-stage="metaballs"]', 'opacity')).toBe('0.0000')
+
+    advanceTo(9700)
+    expect(attr('[data-stage="burst"]', 'opacity')).toBe('1.0000')
+
+    advanceTo(16000)
+    expect(attr('[data-stage="wm"]', 'opacity')).toBe('1.0000')
+    expect(attr('[data-stage="thinking"]', 'opacity')).toBe('0.0000')
+    expect(attr('[data-goo]', 'stdDeviation')).toBe('0.550')
+
+    advanceTo(CYCLE_MS + 2700)
+    expect(attr('[data-stage="orb"]', 'opacity')).toBe('1.0000')
+    expect(attr('[data-stage="wm"]', 'opacity')).toBe('0.0000')
+  })
+
+  it('stops requesting frames on unmount', () => {
+    advanceTo(500)
+    act(() => root?.unmount())
+    root = null
+    expect(pending).toHaveLength(0)
+  })
+})
diff --git a/apps/sim/app/(landing)/components/footer/components/footer-wordmark-loop/footer-wordmark-loop.tsx b/apps/sim/app/(landing)/components/footer/components/footer-wordmark-loop/footer-wordmark-loop.tsx
new file mode 100644
index 00000000000..f07058d2c1a
--- /dev/null
+++ b/apps/sim/app/(landing)/components/footer/components/footer-wordmark-loop/footer-wordmark-loop.tsx
@@ -0,0 +1,644 @@
+'use client'
+
+import { type CSSProperties, useEffect, useId, useRef } from 'react'
+import { cn } from '@sim/emcn'
+import { WORDMARK_PATHS, WORDMARK_VIEW_BOX } from '@/lib/branding/wordmark'
+
+/**
+ * The mark's ink: the platform's thinking-loader gradient tokens, so it follows
+ * the theme. Light resolves to the locked `GOO_GRADIENT` recipe; dark lifts it
+ * to the loader's light-on-dark material. Set through `style`, where `var()`
+ * is unambiguous, rather than as a presentation attribute.
+ */
+const INK_STOP_INNER = { stopColor: 'var(--thinking-ink-inner)' } as const satisfies CSSProperties
+const INK_STOP_OUTER = { stopColor: 'var(--thinking-ink-outer)' } as const satisfies CSSProperties
+
+/**
+ * The seven thinking-loader shapes in play order, each with its hold in ms.
+ * Order, holds, and every timing constant below are the master's - the
+ * "Sim loader wordmark" film's deterministic generator - so the footer plays
+ * the same choreography frame for frame.
+ */
+const SHAPES = [
+  ['metaballs', 2000],
+  ['relay', 1300],
+  ['compass', 2000],
+  ['corners', 800],
+  ['burst', 1300],
+  ['squeeze', 1200],
+  ['thinking', 2000],
+] as const
+
+type ShapeKey = (typeof SHAPES)[number][0]
+type StageKey = ShapeKey | 'orb' | 'wm'
+
+/** Crossfade between two consecutive shapes. */
+const MORPH = 500
+/** Liquid morph between the wordmark and the orb, on each side of the cycle. */
+const MORPH_LOGO = 1200
+/** Opening hold on the crisp wordmark. */
+const LOGO_HOLD = 1300
+/** Orb settle on either side of the shape cycle. */
+const ORB_BEAT = 450
+/** Closing hold on the wordmark before the loop wraps back to the opening hold. */
+const HOLD_LOGO_END = 1700
+const TAIL = 200
+/** Goo blur while liquid (through the cycle) and while crisp (the wordmark). */
+const GOO_HI = 5
+const GOO_LO = 0.55
+/** Post-threshold blur, about half a device pixel at the mark's largest size. */
+const EDGE_SMOOTHING = 0.16
+/**
+ * Shapes that restart from compact when they appear and play exactly one pulse
+ * of this many ms (just under a loop, so the dots reach the edge without
+ * snapping back) instead of free-running on the shared clock.
+ */
+const LOCAL_PULSE: Partial<Record<ShapeKey, number>> = { burst: 770 }
+/**
+ * Longest step the clock advances per frame. A background tab or a stalled
+ * frame resumes mid-choreography instead of skipping ahead.
+ */
+const MAX_FRAME_STEP = 100
+
+const T_LOGO_HOLD_END = LOGO_HOLD
+const T_INTRO_END = T_LOGO_HOLD_END + MORPH_LOGO
+const FIRST_SHAPE_START = T_INTRO_END + ORB_BEAT
+
+/** Lays the shapes end to end from the first shape's start. */
+function buildShapeWindows(): {
+  windows: Record<ShapeKey, readonly [number, number]>
+  end: number
+} {
+  const windows: Partial<Record<ShapeKey, readonly [number, number]>> = {}
+  let cursor = FIRST_SHAPE_START
+  for (const [key, hold] of SHAPES) {
+    windows[key] = [cursor, cursor + hold]
+    cursor += hold
+  }
+  return { windows: windows as Record<ShapeKey, readonly [number, number]>, end: cursor }
+}
+
+const { windows: SHAPE_WINDOWS, end: SHAPES_END } = buildShapeWindows()
+const T_OUTRO_START = SHAPES_END + ORB_BEAT
+const T_OUTRO_END = T_OUTRO_START + MORPH_LOGO
+/** One full pass: wordmark → orb → seven shapes → orb → wordmark. */
+const CYCLE_MS = T_OUTRO_END + HOLD_LOGO_END + TAIL
+
+interface Track {
+  /** Period in ms. */
+  dur: number
+  /** Play backwards on odd iterations. */
+  alt?: boolean
+  /** Linear timing instead of the CSS default ease. */
+  lin?: boolean
+  /** `[progress, x, y]` keyframes in stage units. */
+  stops: ReadonlyArray<readonly [number, number, number]>
+  /** Optional `[progress, opacity]` keyframes. */
+  op?: ReadonlyArray<readonly [number, number]>
+}
+
+/** Per-element motion tracks - the loader's CSS keyframes, evaluated analytically. */
+const TRACKS = {
+  metaballsA: {
+    dur: 1000,
+    alt: true,
+    stops: [
+      [0, 0, 0],
+      [0.9, 28, 0],
+      [1, 28, 0],
+    ],
+  },
+  metaballsB: {
+    dur: 1000,
+    alt: true,
+    stops: [
+      [0, 0, 0],
+      [0.9, -28, 0],
+      [1, -28, 0],
+    ],
+  },
+  relayBall: {
+    dur: 1300,
+    lin: true,
+    stops: [
+      [0, 0, 0],
+      [1, 58, 0],
+    ],
+    op: [
+      [0, 0],
+      [0.2, 1],
+      [0.78, 1],
+      [1, 0],
+    ],
+  },
+  compassMover: {
+    dur: 2000,
+    stops: [
+      [0, 0, 0],
+      [0.25, 27, 27],
+      [0.5, 0, 54],
+      [0.75, -27, 27],
+      [1, 0, 0],
+    ],
+  },
+  cornersA: {
+    dur: 800,
+    stops: [
+      [0, 0, 0],
+      [1, 46, 0],
+    ],
+  },
+  cornersB: {
+    dur: 800,
+    stops: [
+      [0, 0, 0],
+      [1, 0, 46],
+    ],
+  },
+  cornersC: {
+    dur: 800,
+    stops: [
+      [0, 0, 0],
+      [1, -46, 0],
+    ],
+  },
+  cornersD: {
+    dur: 800,
+    stops: [
+      [0, 0, 0],
+      [1, 0, -46],
+    ],
+  },
+  burstUp: {
+    dur: 800,
+    stops: [
+      [0, 0, 0],
+      [1, 0, -50],
+    ],
+  },
+  burstDown: {
+    dur: 800,
+    stops: [
+      [0, 0, 0],
+      [1, 0, 50],
+    ],
+  },
+  burstLeft: {
+    dur: 800,
+    stops: [
+      [0, 0, 0],
+      [1, -50, 0],
+    ],
+  },
+  burstRight: {
+    dur: 800,
+    stops: [
+      [0, 0, 0],
+      [1, 50, 0],
+    ],
+  },
+  squeezeBarL: {
+    dur: 600,
+    alt: true,
+    stops: [
+      [0, 0, 0],
+      [0.3, 0, 0],
+      [1, 10, 0],
+    ],
+  },
+  squeezeBarR: {
+    dur: 600,
+    alt: true,
+    stops: [
+      [0, 0, 0],
+      [0.3, 0, 0],
+      [1, -10, 0],
+    ],
+  },
+  thinkA: {
+    dur: 1600,
+    alt: true,
+    stops: [
+      [0, 0, 0],
+      [1, -20, -14],
+    ],
+  },
+  thinkB: {
+    dur: 1900,
+    alt: true,
+    stops: [
+      [0, 0, 0],
+      [1, 22, -10],
+    ],
+  },
+  thinkC: {
+    dur: 1300,
+    alt: true,
+    stops: [
+      [0, 0, 0],
+      [1, 2, 22],
+    ],
+  },
+} as const satisfies Record<string, Track>
+
+type AnimKey = keyof typeof TRACKS
+
+const clamp01 = (x: number): number => Math.max(0, Math.min(1, x))
+
+/** A CSS `cubic-bezier` timing function, solved for `x` by Newton iteration. */
+function cubicBezier(
+  p1x: number,
+  p1y: number,
+  p2x: number,
+  p2y: number
+): (progress: number) => number {
+  const cx = 3 * p1x
+  const bx = 3 * (p2x - p1x) - cx
+  const ax = 1 - cx - bx
+  const cy = 3 * p1y
+  const by = 3 * (p2y - p1y) - cy
+  const ay = 1 - cy - by
+  const sampleX = (t: number) => ((ax * t + bx) * t + cx) * t
+  const sampleY = (t: number) => ((ay * t + by) * t + cy) * t
+  const slopeX = (t: number) => (3 * ax * t + 2 * bx) * t + cx
+  return (progress) => {
+    let t = progress
+    for (let i = 0; i < 8; i++) {
+      const error = sampleX(t) - progress
+      if (Math.abs(error) < 1e-6) break
+      const slope = slopeX(t)
+      if (Math.abs(slope) < 1e-6) break
+      t -= error / slope
+    }
+    return sampleY(clamp01(t))
+  }
+}
+
+/** The CSS default `ease`. */
+const EASE = cubicBezier(0.25, 0.1, 0.25, 1)
+const LINEAR = (progress: number): number => progress
+
+/** Hermite smoothstep from `a` to `b`. */
+function smooth(a: number, b: number, x: number): number {
+  const t = clamp01((x - a) / (b - a))
+  return t * t * (3 - 2 * t)
+}
+
+/** Opacity envelope: rises over `[t0, t1]`, holds, falls over `[t2, t3]`. */
+function envelope(t: number, t0: number, t1: number, t2: number, t3: number): number {
+  return Math.min(smooth(t0, t1, t), 1 - smooth(t2, t3, t))
+}
+
+/** The keyframe pair around `frac` and the clamped progress between them. */
+function segment<T extends readonly [number, ...number[]]>(
+  stops: ReadonlyArray<T>,
+  frac: number
+): { a: T; b: T; p: number } {
+  let a = stops[0]
+  let b = stops[stops.length - 1]
+  for (let i = 0; i < stops.length - 1; i++) {
+    if (frac >= stops[i][0] && frac <= stops[i + 1][0]) {
+      a = stops[i]
+      b = stops[i + 1]
+      break
+    }
+  }
+  const span = b[0] - a[0] || 1
+  return { a, b, p: clamp01((frac - a[0]) / span) }
+}
+
+interface Sample {
+  x: number
+  y: number
+  opacity: number
+}
+
+/** Position and opacity of a track at `at` ms on its own clock. */
+function sampleTrack(track: Track, at: number): Sample {
+  const raw = at / track.dur
+  const iteration = Math.floor(raw)
+  let frac = raw - iteration
+  if (track.alt && iteration % 2 === 1) frac = 1 - frac
+  const { a, b, p } = segment(track.stops, frac)
+  const eased = (track.lin ? LINEAR : EASE)(p)
+  const x = a[1] + (b[1] - a[1]) * eased
+  const y = a[2] + (b[2] - a[2]) * eased
+  let opacity = 1
+  if (track.op) {
+    const o = segment(track.op, frac)
+    opacity = o.a[1] + (o.b[1] - o.a[1]) * o.p
+  }
+  return { x, y, opacity }
+}
+
+/**
+ * The wordmark's width inside the 100-unit stage - the generator's 816×392
+ * mark at 0.11164, so the word sits at the same size relative to the orb.
+ */
+const WORDMARK_WIDTH = 91.1
+const WORDMARK_SCALE = WORDMARK_WIDTH / WORDMARK_VIEW_BOX.width
+const WORDMARK_HEIGHT = WORDMARK_VIEW_BOX.height * WORDMARK_SCALE
+const WORDMARK_X = (100 - WORDMARK_WIDTH) / 2
+const WORDMARK_Y = (100 - WORDMARK_HEIGHT) / 2
+const WORDMARK_CX = WORDMARK_VIEW_BOX.width / 2
+const WORDMARK_CY = WORDMARK_VIEW_BOX.height / 2
+
+const round = (n: number): string => n.toFixed(3)
+
+interface AnimatedNode {
+  el: SVGGraphicsElement
+  track: Track
+  stage: ShapeKey
+}
+
+interface StageNode {
+  el: SVGGElement
+  key: StageKey
+}
+
+/**
+ * Paints one frame of the choreography at `t` ms into the cycle by writing
+ * SVG attributes directly - no React render per frame.
+ */
+function paintFrame(
+  t: number,
+  blur: SVGFEGaussianBlurElement,
+  stages: StageNode[],
+  anims: AnimatedNode[]
+): void {
+  for (const { el, track, stage } of anims) {
+    const pulse = LOCAL_PULSE[stage]
+    const clock =
+      pulse === undefined
+        ? t
+        : Math.max(0, Math.min(t - (SHAPE_WINDOWS[stage][0] + MORPH / 2), pulse))
+    const sample = sampleTrack(track, clock)
+    el.setAttribute('transform', `translate(${round(sample.x)} ${round(sample.y)})`)
+    if (track.op) el.setAttribute('opacity', sample.opacity.toFixed(4))
+  }
+
+  const introLogo = 1 - smooth(T_LOGO_HOLD_END, T_INTRO_END, t)
+  const outroLogo = smooth(T_OUTRO_START, T_OUTRO_END, t)
+  const logo = Math.max(introLogo, outroLogo)
+  const orbIn = envelope(
+    t,
+    T_LOGO_HOLD_END,
+    T_INTRO_END,
+    FIRST_SHAPE_START - MORPH / 2,
+    FIRST_SHAPE_START + MORPH / 2
+  )
+  const orbOut = envelope(
+    t,
+    SHAPES_END - MORPH / 2,
+    SHAPES_END + MORPH / 2,
+    T_OUTRO_START,
+    T_OUTRO_END
+  )
+  const orb = Math.max(orbIn, orbOut)
+
+  for (const { el, key } of stages) {
+    let opacity: number
+    if (key === 'wm') opacity = logo
+    else if (key === 'orb') opacity = orb
+    else {
+      const [start, end] = SHAPE_WINDOWS[key]
+      opacity = envelope(t, start - MORPH / 2, start + MORPH / 2, end - MORPH / 2, end + MORPH / 2)
+    }
+    el.setAttribute('opacity', opacity.toFixed(4))
+  }
+
+  const liquid = Math.min(
+    smooth(T_LOGO_HOLD_END, T_INTRO_END, t),
+    1 - smooth(T_OUTRO_START, T_OUTRO_END, t)
+  )
+  const deviation = round(GOO_LO + (GOO_HI - GOO_LO) * liquid)
+  if (blur.getAttribute('stdDeviation') !== deviation) blur.setAttribute('stdDeviation', deviation)
+}
+
+interface FooterWordmarkLoopProps {
+  /** Layout only - margins and alignment. The mark owns its size and chrome. */
+  className?: string
+}
+
+/**
+ * The footer's closing brand beat: the "Sim loader wordmark" film, live. The
+ * crisp `sim` wordmark goo-melts into the thinking loader's orb, cycles through
+ * all seven loader shapes with gooey morphs between them, settles back to the
+ * orb, and liquid-morphs back into the wordmark - then holds and repeats.
+ * Same geometry, goo filter, ink gradient, and timeline as the master
+ * generator and the product's `ThinkingLoader`, drawn in one 100-unit SVG
+ * stage that scales with the viewport.
+ *
+ * The stage reserves a 5:3 slot rather than its full square: the crisp wordmark
+ * only ever needs the middle band, and the orb and shapes overflow symmetrically
+ * into the beat's margins while they play, so the footer stays short enough to
+ * sit on one screen together with its link directory.
+ *
+ * Rendering budget: the server renders the resting frame (crisp wordmark) so
+ * the mark is in the HTML with zero layout shift and needs no JS to look
+ * finished. The `requestAnimationFrame` loop only runs while the stage is in
+ * the viewport, writes attributes straight to the SVG (no React render per
+ * frame), and never starts under `prefers-reduced-motion`, where the wordmark
+ * simply stays put.
+ */
+export function FooterWordmarkLoop({ className }: FooterWordmarkLoopProps) {
+  const svgRef = useRef<SVGSVGElement>(null)
+  const id = useId().replace(/[^a-zA-Z0-9-]/g, '')
+  const gooId = `fwl-goo-${id}`
+  const inkId = `fwl-ink-${id}`
+  const wordmarkInkId = `fwl-wm-ink-${id}`
+  const clipId = `fwl-clip-${id}`
+  const windowId = `fwl-window-${id}`
+
+  useEffect(() => {
+    const svg = svgRef.current
+    if (!svg) return
+    const blur = svg.querySelector<SVGFEGaussianBlurElement>('[data-goo]')
+    if (!blur) return
+
+    const stages: StageNode[] = Array.from(
+      svg.querySelectorAll<SVGGElement>('[data-stage]'),
+      (el) => ({ el, key: el.getAttribute('data-stage') as StageKey })
+    )
+    const anims: AnimatedNode[] = []
+    for (const el of svg.querySelectorAll<SVGGraphicsElement>('[data-anim]')) {
+      const stage = el.closest('[data-stage]')?.getAttribute('data-stage') as ShapeKey | undefined
+      if (stage) anims.push({ el, track: TRACKS[el.getAttribute('data-anim') as AnimKey], stage })
+    }
+
+    const reducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)')
+    let frame: number | null = null
+    let previous: number | null = null
+    let elapsed = 0
+    let inView = false
+
+    const tick = (now: number) => {
+      if (previous !== null) elapsed += Math.min(now - previous, MAX_FRAME_STEP)
+      previous = now
+      paintFrame(elapsed % CYCLE_MS, blur, stages, anims)
+      frame = requestAnimationFrame(tick)
+    }
+    const play = () => {
+      if (frame !== null || !inView || reducedMotion?.matches) return
+      previous = null
+      frame = requestAnimationFrame(tick)
+    }
+    const pause = () => {
+      if (frame === null) return
+      cancelAnimationFrame(frame)
+      frame = null
+    }
+    const onMotionPreference = () => {
+      if (reducedMotion?.matches) {
+        pause()
+        elapsed = 0
+        paintFrame(0, blur, stages, anims)
+      } else {
+        play()
+      }
+    }
+    reducedMotion?.addEventListener('change', onMotionPreference)
+
+    let observer: IntersectionObserver | undefined
+    if (typeof IntersectionObserver === 'undefined') {
+      inView = true
+      play()
+    } else {
+      observer = new IntersectionObserver(([entry]) => {
+        inView = entry.isIntersecting
+        if (inView) play()
+        else pause()
+      })
+      observer.observe(svg)
+    }
+
+    return () => {
+      pause()
+      observer?.disconnect()
+      reducedMotion?.removeEventListener('change', onMotionPreference)
+    }
+  }, [])
+
+  return (
+    <div className={cn('relative mx-auto aspect-[5/3] w-[clamp(180px,17vw,320px)]', className)}>
+      <svg
+        ref={svgRef}
+        viewBox='0 0 100 100'
+        aria-hidden='true'
+        className='-translate-y-1/2 absolute inset-x-0 top-1/2 aspect-square w-full overflow-visible'
+      >
+        <defs>
+          <filter
+            id={gooId}
+            x='-30%'
+            y='-30%'
+            width='160%'
+            height='160%'
+            colorInterpolationFilters='sRGB'
+          >
+            <feGaussianBlur data-goo='' in='SourceGraphic' stdDeviation={GOO_LO} result='blur' />
+            {/* A steep threshold: the melt between shapes keeps its liquid
+                merges, but every edge resolves within a pixel, so the mark
+                stays crisp at the cycle's full blur. */}
+            <feColorMatrix
+              in='blur'
+              values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 40 -19'
+              result='goo'
+            />
+            {/* The threshold discards the rasterizer's edge coverage, so at the
+                resting blur the wordmark's edge fell inside a device pixel and
+                stair-stepped at the largest size. A sub-pixel blur after it
+                restores ordinary anti-aliasing without touching the melt. */}
+            <feGaussianBlur in='goo' stdDeviation={EDGE_SMOOTHING} />
+          </filter>
+          <radialGradient id={inkId} cx='0.5' cy='0.5' r='0.5'>
+            <stop style={INK_STOP_INNER} />
+            <stop offset='1' style={INK_STOP_OUTER} />
+          </radialGradient>
+          <radialGradient
+            id={wordmarkInkId}
+            cx='0'
+            cy='0'
+            r='1'
+            gradientUnits='userSpaceOnUse'
+            gradientTransform={`translate(${WORDMARK_CX} ${WORDMARK_CY}) rotate(90) scale(${WORDMARK_CY} ${WORDMARK_CX})`}
+          >
+            <stop style={INK_STOP_INNER} />
+            <stop offset='1' style={INK_STOP_OUTER} />
+          </radialGradient>
+          <clipPath id={clipId}>
+            <rect width='100' height='100' />
+          </clipPath>
+          <clipPath id={windowId}>
+            <rect x='12.5' y='12.5' width='75' height='75' />
+          </clipPath>
+        </defs>
+
+        <g
+          filter={`url(#${gooId})`}
+          fill={`url(#${inkId})`}
+          stroke={`url(#${inkId})`}
+          strokeWidth={0}
+        >
+          <g data-stage='metaballs' opacity={0} clipPath={`url(#${clipId})`}>
+            <circle data-anim='metaballsA' cx='22' cy='50' r='16' />
+            <circle data-anim='metaballsB' cx='78' cy='50' r='16' />
+          </g>
+          <g data-stage='relay' opacity={0} clipPath={`url(#${clipId})`}>
+            <rect x='13' y='28' width='16' height='44' />
+            <rect x='71' y='28' width='16' height='44' />
+            <circle data-anim='relayBall' cx='21' cy='50' r='14' />
+          </g>
+          <g data-stage='compass' opacity={0} clipPath={`url(#${clipId})`}>
+            <circle cx='50' cy='23' r='14' />
+            <circle cx='23' cy='50' r='14' />
+            <circle cx='77' cy='50' r='14' />
+            <circle cx='50' cy='77' r='14' />
+            <circle data-anim='compassMover' cx='50' cy='23' r='14' />
+          </g>
+          <g data-stage='corners' opacity={0} clipPath={`url(#${clipId})`}>
+            <rect x='27' y='27' width='46' height='46' />
+            <circle data-anim='cornersA' cx='27' cy='27' r='14' />
+            <circle data-anim='cornersB' cx='73' cy='27' r='14' />
+            <circle data-anim='cornersC' cx='73' cy='73' r='14' />
+            <circle data-anim='cornersD' cx='27' cy='73' r='14' />
+          </g>
+          <g data-stage='burst' opacity={0} clipPath={`url(#${windowId})`}>
+            <rect x='12.5' y='43.75' width='75' height='12.5' />
+            <rect x='43.75' y='12.5' width='12.5' height='75' />
+            <circle cx='50' cy='50' r='12.5' />
+            <circle data-anim='burstUp' cx='50' cy='50' r='12.5' />
+            <circle data-anim='burstDown' cx='50' cy='50' r='12.5' />
+            <circle data-anim='burstLeft' cx='50' cy='50' r='12.5' />
+            <circle data-anim='burstRight' cx='50' cy='50' r='12.5' />
+          </g>
+          <g data-stage='squeeze' opacity={0} clipPath={`url(#${clipId})`}>
+            <path d='M 21.36 37.5 A 31.25 31.25 0 0 1 78.64 37.5' fill='none' strokeWidth='12.5' />
+            <path d='M 21.36 62.5 A 31.25 31.25 0 0 0 78.64 62.5' fill='none' strokeWidth='12.5' />
+            <rect data-anim='squeezeBarL' x='15' y='37.5' width='12.5' height='25' />
+            <rect data-anim='squeezeBarR' x='72.5' y='37.5' width='12.5' height='25' />
+          </g>
+          <g data-stage='thinking' opacity={0} clipPath={`url(#${clipId})`}>
+            <circle cx='50' cy='50' r='15' />
+            <circle data-anim='thinkA' cx='50' cy='50' r='12' />
+            <circle data-anim='thinkB' cx='50' cy='50' r='12' />
+            <circle data-anim='thinkC' cx='50' cy='50' r='11' />
+          </g>
+          <g data-stage='orb' opacity={0}>
+            <circle cx='50' cy='50' r='42' />
+          </g>
+          <g
+            data-stage='wm'
+            opacity={1}
+            fill={`url(#${wordmarkInkId})`}
+            transform={`translate(${round(WORDMARK_X)} ${round(WORDMARK_Y)}) scale(${WORDMARK_SCALE.toFixed(5)})`}
+          >
+            {WORDMARK_PATHS.map((d) => (
+              <path key={d} d={d} />
+            ))}
+          </g>
+        </g>
+      </svg>
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/footer/components/footer-wordmark-loop/index.ts b/apps/sim/app/(landing)/components/footer/components/footer-wordmark-loop/index.ts
new file mode 100644
index 00000000000..0df08ea7389
--- /dev/null
+++ b/apps/sim/app/(landing)/components/footer/components/footer-wordmark-loop/index.ts
@@ -0,0 +1 @@
+export { FooterWordmarkLoop } from './footer-wordmark-loop'
diff --git a/apps/sim/app/(landing)/components/footer/components/theme-toggle/index.ts b/apps/sim/app/(landing)/components/footer/components/theme-toggle/index.ts
new file mode 100644
index 00000000000..694671e5d77
--- /dev/null
+++ b/apps/sim/app/(landing)/components/footer/components/theme-toggle/index.ts
@@ -0,0 +1 @@
+export { ThemeToggle } from './theme-toggle'
diff --git a/apps/sim/app/(landing)/components/footer/components/theme-toggle/theme-toggle.tsx b/apps/sim/app/(landing)/components/footer/components/theme-toggle/theme-toggle.tsx
new file mode 100644
index 00000000000..ed9551b44d1
--- /dev/null
+++ b/apps/sim/app/(landing)/components/footer/components/theme-toggle/theme-toggle.tsx
@@ -0,0 +1,90 @@
+'use client'
+
+import { useId, useSyncExternalStore } from 'react'
+import { cn } from '@sim/emcn'
+import { Moon, Sun } from '@sim/emcn/icons'
+import { useTheme } from 'next-themes'
+
+/**
+ * The two themes on offer, in reading order. `system` is deliberately absent:
+ * the marketing site is light by design and dark is an explicit choice, so the
+ * control is a plain either/or.
+ */
+const OPTIONS = [
+  { value: 'light', label: 'Light theme', Icon: Sun },
+  { value: 'dark', label: 'Dark theme', Icon: Moon },
+] as const
+
+type ThemeOption = (typeof OPTIONS)[number]['value']
+
+const SEGMENT =
+  'flex size-[22px] items-center justify-center rounded-full transition-colors duration-150 peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-[var(--text-secondary)] peer-focus-visible:outline-offset-2'
+
+/**
+ * The selected segment is painted by the theme class on `<html>`, not by React
+ * state: next-themes puts that class on the document before first paint, so
+ * the right segment already reads as selected in the server HTML and never
+ * flips after hydration. Each segment carries both states and the `dark:` pair
+ * picks one.
+ */
+const SEGMENT_TONE: Record<ThemeOption, string> = {
+  light:
+    'bg-[var(--surface-active)] text-[var(--text-primary)] dark:bg-transparent dark:text-[var(--text-muted)] dark:hover-hover:text-[var(--text-primary)]',
+  dark: 'text-[var(--text-muted)] hover-hover:text-[var(--text-primary)] dark:bg-[var(--surface-active)] dark:text-[var(--text-primary)]',
+}
+
+const subscribeToNothing = () => () => {}
+
+/**
+ * `true` once hydrated, `false` in server HTML and during hydration - the
+ * store-backed form React reconciles without a mismatch, unlike an effect that
+ * flips state after mount.
+ */
+function useHydrated(): boolean {
+  return useSyncExternalStore(
+    subscribeToNothing,
+    () => true,
+    () => false
+  )
+}
+
+/**
+ * Footer light/dark switch: a hairline pill holding a sun and a moon, with the
+ * current theme's segment filled. Picking a segment writes the visitor's
+ * choice through next-themes into the marketing surface's own store
+ * (`sim-landing-theme`), separate from the workspace's account-synced theme.
+ *
+ * Native radios provide a single tab stop and arrow-key selection. Checked
+ * state waits for hydration because the server cannot read the stored theme;
+ * the visual selection already follows the document theme before hydration.
+ */
+export function ThemeToggle() {
+  const groupName = useId()
+  const { resolvedTheme, setTheme } = useTheme()
+  const hydrated = useHydrated()
+
+  return (
+    <div
+      role='radiogroup'
+      aria-label='Color theme'
+      className='inline-flex items-center gap-[2px] rounded-full border border-[var(--border)] p-[2px]'
+    >
+      {OPTIONS.map(({ value, label, Icon }) => (
+        <label key={value} className='relative cursor-pointer'>
+          <input
+            type='radio'
+            name={groupName}
+            value={value}
+            aria-label={label}
+            checked={hydrated && resolvedTheme === value}
+            onChange={() => setTheme(value)}
+            className='peer sr-only'
+          />
+          <span className={cn(SEGMENT, SEGMENT_TONE[value])}>
+            <Icon className='size-[13px]' />
+          </span>
+        </label>
+      ))}
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/footer/footer.tsx b/apps/sim/app/(landing)/components/footer/footer.tsx
index 5c74a5a7e8f..18e15235a1d 100644
--- a/apps/sim/app/(landing)/components/footer/footer.tsx
+++ b/apps/sim/app/(landing)/components/footer/footer.tsx
@@ -1,6 +1,10 @@
+import { cn } from '@sim/emcn'
 import Link from 'next/link'
 import { ConsentPreferencesTrigger } from '@/app/_shell/consent/consent-preferences-trigger'
 import { ALL_COMPETITORS } from '@/app/(landing)/comparisons/utils'
+import { FooterWordmarkLoop } from '@/app/(landing)/components/footer/components/footer-wordmark-loop'
+import { ThemeToggle } from '@/app/(landing)/components/footer/components/theme-toggle'
+import { LANDING_CONTENT_WIDTH, LANDING_GUTTER } from '@/app/(landing)/components/landing-layout'
 import { SimWordmark } from '@/app/(landing)/components/navbar/components/sim-wordmark'
 import { MODEL_PROVIDERS_WITH_CATALOGS } from '@/app/(landing)/models/utils'
 
@@ -12,15 +16,26 @@ import { MODEL_PROVIDERS_WITH_CATALOGS } from '@/app/(landing)/models/utils'
  * The closing CTA lives in its own {@link Cta} section above; this is purely the
  * `<footer>` landmark.
  *
+ * The wordmark cell also carries the {@link ThemeToggle} - the site's light/dark
+ * switch - tucked under the mark, where a visitor looking for the dark version
+ * of the site finds it without it competing with the link directory.
+ *
+ * Below the link directory, the site signs off on a large centered
+ * {@link FooterWordmarkLoop} - the wordmark melting into the thinking loader
+ * and back - sitting between the columns and the copyright line the way
+ * Legora closes its footer on a giant wordmark. Responsive top spacing gives
+ * the mark its own beat after the columns, followed by the copyright line.
+ *
  * Carries `SiteNavigationElement` schema for crawlable footer nav. A top
  * hairline separates it from the page and spans the full viewport width
  * (edge-to-edge): the border lives on the full-width `<footer>` landmark while
- * an inner container caps and centers the content at the shared
- * `max-w-[1460px]` with the same `px-20` gutter as every section above.
+ * an inner container caps and centers the content at
+ * {@link LANDING_CONTENT_WIDTH} with {@link LANDING_GUTTER}, matching every
+ * section above.
  */
 
 const LINK_CLASS =
-  'text-left text-sm text-[var(--text-muted)] transition-colors hover:text-[var(--text-primary)]'
+  'text-left text-sm text-[var(--text-secondary)] transition-colors hover:text-[var(--text-primary)]'
 
 interface FooterLinkItem {
   label: string
@@ -41,10 +56,10 @@ interface FooterProps {
 
 /**
  * Platform modules link to their local landing pages (internal link equity
- * stays on the ranking pages); docs-only surfaces (MCP, API, Self Hosting)
- * and Status remain external.
+ * stays on the ranking pages); docs-only surfaces remain external.
  */
 const PRODUCT_LINKS: FooterItem[] = [
+  { label: 'Overview', href: '/platform' },
   { label: 'Enterprise', href: '/enterprise' },
   { label: 'Chat', href: 'https://docs.sim.ai/mothership', external: true },
   { label: 'Workflows', href: '/workflows' },
@@ -54,17 +69,20 @@ const PRODUCT_LINKS: FooterItem[] = [
   { label: 'Logs', href: '/logs' },
   { label: 'MCP', href: 'https://docs.sim.ai/agents/mcp', external: true },
   { label: 'API', href: 'https://docs.sim.ai/api-reference/getting-started', external: true },
+  { label: 'CLI', href: 'https://docs.sim.ai/cli', external: true },
   { label: 'Self Hosting', href: 'https://docs.sim.ai/platform/self-hosting', external: true },
-  { label: 'Status', href: 'https://status.sim.ai', external: true },
 ]
 
 const RESOURCES_LINKS: FooterItem[] = [
+  { label: 'Customers', href: '/customers' },
   { label: 'Blog', href: '/blog' },
   { label: 'Docs', href: 'https://docs.sim.ai', external: true },
   { label: 'Library', href: '/library' },
   { label: 'Careers', href: '/careers' },
   { label: 'Changelog', href: '/changelog' },
   { label: 'Contact', href: '/contact' },
+  { label: 'Status', href: 'https://status.sim.ai', external: true },
+  { label: 'Security', href: 'https://trust.sim.ai', external: true },
 ]
 
 /** Top model providers, sourced from the catalog so labels/hrefs never drift. */
@@ -161,21 +179,22 @@ function FooterColumn({ title, items }: { title: string; items: FooterItem[] })
 
 export function Footer({ showConsentPreferences = false }: FooterProps) {
   return (
-    <footer className='mt-[120px] w-full border-[var(--border)] border-t max-sm:mt-16 max-lg:mt-[88px]'>
-      <div className='mx-auto w-full max-w-[1460px] px-20 pt-16 pb-16 max-sm:px-5 max-lg:px-8 max-lg:pt-12 max-lg:pb-12'>
+    <footer className='w-full border-[var(--border)] border-t'>
+      <div
+        className={cn('pt-16 pb-6 max-sm:pb-5 max-lg:pt-12', LANDING_CONTENT_WIDTH, LANDING_GUTTER)}
+      >
         <nav
           aria-label='Footer navigation'
           itemScope
           itemType='https://schema.org/SiteNavigationElement'
           className='grid grid-cols-8 gap-x-8 gap-y-10 max-sm:grid-cols-2 max-sm:gap-y-8 max-lg:grid-cols-3'
         >
-          <Link
-            href='/'
-            aria-label='Sim home'
-            className='flex h-[18px] items-center max-lg:col-span-full max-lg:mb-2'
-          >
-            <SimWordmark />
-          </Link>
+          <div className='flex flex-col items-start gap-5 max-lg:col-span-full max-lg:mb-2'>
+            <Link href='/' aria-label='Sim home' className='flex h-[18px] items-center'>
+              <SimWordmark />
+            </Link>
+            <ThemeToggle />
+          </div>
 
           <FooterColumn title='Product' items={PRODUCT_LINKS} />
           <FooterColumn title='Resources' items={RESOURCES_LINKS} />
@@ -191,7 +210,11 @@ export function Footer({ showConsentPreferences = false }: FooterProps) {
           />
         </nav>
 
-        <p className='mt-16 text-[var(--text-muted)] text-sm'>© 2026 Sim. All rights reserved.</p>
+        <FooterWordmarkLoop className='mt-[120px] max-sm:mt-16 max-lg:mt-[88px]' />
+
+        <p className='mt-16 text-[var(--text-secondary)] text-sm'>
+          © 2026 Sim. All rights reserved.
+        </p>
       </div>
     </footer>
   )
diff --git a/apps/sim/app/(landing)/components/hero-cta/hero-cta.tsx b/apps/sim/app/(landing)/components/hero-cta/hero-cta.tsx
index ff392fd0b2a..e8b9d04c3bc 100644
--- a/apps/sim/app/(landing)/components/hero-cta/hero-cta.tsx
+++ b/apps/sim/app/(landing)/components/hero-cta/hero-cta.tsx
@@ -1,40 +1,42 @@
-import { ChipLink, cn } from '@sim/emcn'
+import { LandingCtaLink, type LandingCtaSection } from '@/app/(landing)/components/landing-cta-link'
 import { DEMO_HREF, SIGNUP_HREF } from '@/app/(landing)/constants'
 
-/**
- * Hero-scale sizing shared by both CTAs - one step up from the navbar's 30px
- * chip: 36px tall, 15px label (the chip's inner span inherits it), horizontal
- * padding in `em` at the chip's native 8/14 ratio so it scales with the text.
- */
-const CTA_SIZE = 'h-[36px] px-[0.571em] text-[15px] [&>span]:[font-size:inherit]'
+const DEMO_LABEL = 'Request a demo'
 
-/**
- * The canonical landing call-to-action - a dark "Request a demo" chip beside an
- * outline "Sign up" chip. This is the single source of truth for the CTA used
- * by both the landing hero and every platform hero, so the two never drift.
- *
- * Both CTAs are the same global {@link ChipLink} chrome the navbar's auth
- * cluster uses - "Request a demo" is the `primary` (filled) variant like the
- * navbar's "Sign up"; "Sign up" here is the default chip with the
- * `--border-1` outline like the navbar's "Contact sales" - scaled up one step
- * via {@link CTA_SIZE} (the sanctioned size overrides; chrome stays the chip's).
- *
- * Server Component; owns its own internal spacing. Consumers place it in their
- * own stack and pass nothing.
- */
-export function HeroCta() {
+interface HeroCtaProps {
+  /** Standard 36px actions for platform heroes; 40px display actions for the homepage. */
+  size?: 'default' | 'display'
+  /** Platform and solutions heroes use "Sign up"; the homepage uses "Start building". */
+  secondaryLabel?: 'Start building' | 'Sign up'
+  /** Reports each click as a `landing_cta_clicked` event under this section. */
+  trackingSection?: LandingCtaSection
+}
+
+/** Shared filled demo action and outlined self-serve action, stacked on phones. */
+export function HeroCta({
+  size = 'default',
+  secondaryLabel = 'Sign up',
+  trackingSection,
+}: HeroCtaProps) {
   return (
     <div className='flex items-center gap-2 max-sm:w-full max-sm:flex-col max-sm:items-stretch'>
-      <ChipLink variant='primary' href={DEMO_HREF} className={CTA_SIZE}>
-        Request a demo
-      </ChipLink>
-      <ChipLink
+      <LandingCtaLink
+        href={DEMO_HREF}
+        size={size}
+        withArrow
+        track={trackingSection && { label: DEMO_LABEL, section: trackingSection }}
+      >
+        {DEMO_LABEL}
+      </LandingCtaLink>
+      <LandingCtaLink
+        variant='outline'
         href={SIGNUP_HREF}
         prefetch={false}
-        className={cn(CTA_SIZE, 'border border-[var(--border-1)] max-sm:justify-center')}
+        size={size}
+        track={trackingSection && { label: secondaryLabel, section: trackingSection }}
       >
-        Sign up
-      </ChipLink>
+        {secondaryLabel}
+      </LandingCtaLink>
     </div>
   )
 }
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-announcement-chip/hero-announcement-chip.test.tsx b/apps/sim/app/(landing)/components/hero/components/hero-announcement-chip/hero-announcement-chip.test.tsx
new file mode 100644
index 00000000000..87f01b75722
--- /dev/null
+++ b/apps/sim/app/(landing)/components/hero/components/hero-announcement-chip/hero-announcement-chip.test.tsx
@@ -0,0 +1,52 @@
+/**
+ * @vitest-environment node
+ */
+import type { ComponentType, ReactNode } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('@sim/emcn', () => ({
+  cn: (...values: Array<string | false | null | undefined>) => values.filter(Boolean).join(' '),
+  ChipLink: ({
+    children,
+    href,
+    leftAdornment,
+    rightIcon: RightIcon,
+    variant,
+  }: {
+    children: ReactNode
+    href: string
+    leftAdornment?: ReactNode
+    rightIcon?: ComponentType
+    variant?: string
+  }) => (
+    <a href={href} data-variant={variant}>
+      {leftAdornment}
+      {children}
+      {RightIcon ? <RightIcon /> : null}
+    </a>
+  ),
+  ChipTag: ({ children, variant }: { children: ReactNode; variant?: string }) => (
+    <span data-tag-variant={variant}>{children}</span>
+  ),
+}))
+
+vi.mock('@/app/(landing)/components/chevron-arrow', () => ({
+  ChevronArrow: () => <svg data-chevron-arrow aria-hidden='true' />,
+}))
+
+import { HeroAnnouncementChip } from '@/app/(landing)/components/hero/components/hero-announcement-chip/hero-announcement-chip'
+
+describe('HeroAnnouncementChip', () => {
+  it('announces GPT-6 Astra and links to Start building', () => {
+    const markup = renderToStaticMarkup(<HeroAnnouncementChip />)
+
+    expect(markup).toContain('data-variant="outline"')
+    expect(markup).toContain('data-tag-variant="gray"')
+    expect(markup).toContain('href="/signup"')
+    expect(markup).toContain('New')
+    expect(markup).toContain('Use GPT-6 Astra')
+    expect(markup).toContain('Now available')
+    expect(markup).toContain('data-chevron-arrow')
+  })
+})
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-announcement-chip/hero-announcement-chip.tsx b/apps/sim/app/(landing)/components/hero/components/hero-announcement-chip/hero-announcement-chip.tsx
new file mode 100644
index 00000000000..862f9072f24
--- /dev/null
+++ b/apps/sim/app/(landing)/components/hero/components/hero-announcement-chip/hero-announcement-chip.tsx
@@ -0,0 +1,48 @@
+'use client'
+
+import { ChipLink, ChipTag, cn } from '@sim/emcn'
+import { ChevronArrow } from '@/app/(landing)/components/chevron-arrow'
+import { SIGNUP_HREF } from '@/app/(landing)/constants'
+
+interface AnnouncementArrowProps {
+  className?: string
+}
+
+function AnnouncementArrow({ className }: AnnouncementArrowProps) {
+  return <ChevronArrow className={cn(className, 'size-3')} strokeWidth={1} />
+}
+
+/** Rounded announcement with a compact status badge and a single linked action. */
+export function HeroAnnouncementChip() {
+  return (
+    <ChipLink
+      variant='outline'
+      href={SIGNUP_HREF}
+      prefetch={false}
+      rightIcon={AnnouncementArrow}
+      leftAdornment={
+        <ChipTag
+          variant='gray'
+          className='h-4 shrink-0 rounded-full bg-transparent px-1.5 font-medium text-[10px] uppercase leading-none tracking-[0.06em]'
+        >
+          New
+        </ChipTag>
+      }
+      className={cn(
+        'group/link h-8 max-w-full gap-2 rounded-full bg-[var(--surface-2)] pr-3 pl-2 text-[13px] duration-150 [&>span.flex-1]:[font-size:inherit]',
+        'hover-hover:bg-[var(--surface-3)]',
+        'focus-visible:outline focus-visible:outline-1 focus-visible:outline-[var(--text-primary)] focus-visible:outline-offset-4'
+      )}
+    >
+      <span className='inline-flex min-w-0 items-center gap-1'>
+        <span className='truncate font-medium text-[var(--text-primary)]'>Use GPT-6 Astra</span>
+        <span aria-hidden='true' className='text-[var(--text-muted)] max-sm:hidden'>
+          ·
+        </span>
+        <span className='whitespace-nowrap text-[var(--text-secondary)] max-sm:hidden'>
+          Now available
+        </span>
+      </span>
+    </ChipLink>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-announcement-chip/index.ts b/apps/sim/app/(landing)/components/hero/components/hero-announcement-chip/index.ts
new file mode 100644
index 00000000000..016a3437538
--- /dev/null
+++ b/apps/sim/app/(landing)/components/hero/components/hero-announcement-chip/index.ts
@@ -0,0 +1 @@
+export { HeroAnnouncementChip } from './hero-announcement-chip'
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-chat-loop/hero-chat-loop.test.tsx b/apps/sim/app/(landing)/components/hero/components/hero-chat-loop/hero-chat-loop.test.tsx
new file mode 100644
index 00000000000..d6139257829
--- /dev/null
+++ b/apps/sim/app/(landing)/components/hero/components/hero-chat-loop/hero-chat-loop.test.tsx
@@ -0,0 +1,216 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import {
+  HeroChatLoop,
+  type HeroChatPhase,
+} from '@/app/(landing)/components/hero/components/hero-chat-loop/hero-chat-loop'
+import type { AgentGroupItem } from '@/app/workspace/[workspaceId]/home/components/message-content/components'
+import { ToolCallStatus } from '@/app/workspace/[workspaceId]/home/types'
+
+interface AgentGroupProps {
+  agentName: string
+  agentLabel: string
+  items: AgentGroupItem[]
+  isStreaming?: boolean
+  isLaneOpen?: boolean
+}
+
+const { renderAgentGroup, renderPendingIndicator } = vi.hoisted(() => ({
+  renderAgentGroup: vi.fn<(props: AgentGroupProps) => void>(),
+  renderPendingIndicator: vi.fn<(props: { label: string }) => void>(),
+}))
+
+vi.mock('@sim/emcn', () => ({
+  cn: (...values: Array<string | false | undefined>) => values.filter(Boolean).join(' '),
+  Button: ({ children }: { children: ReactNode }) => <button type='button'>{children}</button>,
+  Tooltip: {
+    Root: ({ children }: { children: ReactNode }) => children,
+    Trigger: ({ children }: { children: ReactNode }) => children,
+    Content: () => null,
+  },
+}))
+vi.mock('@sim/emcn/icons', () => ({
+  Workflow: () => null,
+  Mic: () => null,
+  Paperclip: () => null,
+  Plus: () => null,
+  Slash: () => null,
+  X: () => null,
+}))
+vi.mock('@/app/(landing)/components/hero/components/hero-chat-welcome', () => ({
+  HeroChatWelcome: () => null,
+}))
+vi.mock('@/app/(landing)/components/hero/components/hero-platform-loop/sidebar-hotspots', () => ({
+  HERO_TOOLTIP_OFFSET: 8,
+}))
+vi.mock(
+  '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group-view',
+  () => ({
+    AgentGroupView: (props: AgentGroupProps) => {
+      renderAgentGroup(props)
+      return <section aria-label={props.agentLabel}>{props.agentLabel}</section>
+    },
+  })
+)
+vi.mock('@/app/(landing)/components/hero/components/hero-chat-loop/hero-tool-call-item', () => ({
+  HeroToolCallItem: () => null,
+}))
+vi.mock(
+  '@/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/pending-tag-indicator',
+  () => ({
+    PendingTagIndicator: (props: { label: string }) => {
+      renderPendingIndicator(props)
+      return <output>{props.label}</output>
+    },
+  })
+)
+vi.mock(
+  '@/app/workspace/[workspaceId]/home/components/message-content/components/question',
+  () => ({
+    parseQuestionAnswerMessage: () => undefined,
+    QuestionDisplay: () => <p>What would you like to do next?</p>,
+  })
+)
+vi.mock(
+  '@/app/workspace/[workspaceId]/home/components/user-input/components/send-button/send-button',
+  () => ({ SendButton: () => null })
+)
+
+let host: HTMLDivElement
+let root: Root
+
+beforeEach(() => {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  vi.useFakeTimers()
+  vi.clearAllMocks()
+  vi.stubGlobal('matchMedia', () => ({
+    matches: true,
+    addEventListener: () => {},
+    removeEventListener: () => {},
+  }))
+  host = document.createElement('div')
+  document.body.append(host)
+  root = createRoot(host)
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  host.remove()
+  vi.useRealTimers()
+  vi.unstubAllGlobals()
+})
+
+function renderPhase(phase: HeroChatPhase) {
+  act(() => {
+    root.render(
+      <HeroChatLoop
+        phase={phase}
+        fading={false}
+        userMessage='Enrich new leads and post to #sales.'
+        replyMessage='The workflow is ready to test with a sample lead.'
+        composerValue=''
+        isSending={phase !== 'reply'}
+        onComposerValueChange={vi.fn()}
+        onOpenWorkflowResource={vi.fn()}
+        onFollowUpSelect={vi.fn()}
+        onSubmit={vi.fn()}
+        onStopGeneration={vi.fn()}
+      />
+    )
+  })
+}
+
+function hasExecutingTool(items: AgentGroupItem[]): boolean {
+  return items.some((item) => item.type === 'tool' && item.data.status === ToolCallStatus.executing)
+}
+
+describe('HeroChatLoop production thinking handoff', () => {
+  it('shows the submitted prompt before assistant activity begins', () => {
+    renderPhase('user')
+
+    expect(host.textContent).toContain('Enrich new leads and post to #sales.')
+    expect(host.querySelector('output')).toBeNull()
+    expect(renderAgentGroup).not.toHaveBeenCalled()
+    expect(renderPendingIndicator).not.toHaveBeenCalled()
+  })
+
+  it.each([
+    ['thinking', 'Thinking…'],
+    ['dispatching', 'Dispatching…'],
+  ] as const)('shows the production activity indicator alone during %s', (phase, label) => {
+    renderPhase(phase)
+
+    expect(host.querySelector('[data-chat-phase]')?.getAttribute('data-chat-phase')).toBe(phase)
+    expect(host.textContent).toContain('Enrich new leads and post to #sales.')
+    expect(host.querySelector('output')?.textContent).toBe(label)
+    expect(renderPendingIndicator).toHaveBeenLastCalledWith({ label })
+    expect(renderAgentGroup).not.toHaveBeenCalled()
+    expect(host.textContent).not.toContain('The workflow is ready')
+  })
+
+  it('keeps the activity indicator mounted while thinking hands off to dispatching', () => {
+    renderPhase('thinking')
+    const indicator = host.querySelector('output')
+    expect(indicator).not.toBeNull()
+
+    renderPhase('dispatching')
+
+    expect(host.querySelector('output')).toBe(indicator)
+    expect(indicator?.textContent).toBe('Dispatching…')
+    expect(renderAgentGroup).not.toHaveBeenCalled()
+  })
+
+  it('replaces the turn loader with Workflow Agent activity only once building begins', () => {
+    renderPhase('thinking')
+    renderPhase('dispatching')
+    renderPhase('building')
+
+    expect(host.querySelector('output')).toBeNull()
+    expect(host.querySelectorAll('section')).toHaveLength(1)
+    const props = renderAgentGroup.mock.lastCall?.[0]
+    expect(props).toMatchObject({
+      agentName: 'workflow',
+      agentLabel: 'Workflow Agent',
+      isStreaming: true,
+      isLaneOpen: true,
+    })
+    expect(props && hasExecutingTool(props.items)).toBe(true)
+    expect(host.textContent).not.toContain('The workflow is ready')
+  })
+
+  it('shows completed agent groups and the response after building finishes', () => {
+    renderPhase('reply')
+
+    expect(host.querySelector('output')).toBeNull()
+    expect(Array.from(host.querySelectorAll('section'), (group) => group.textContent)).toEqual([
+      'Workflow Agent',
+      'Sim',
+    ])
+    const groups = renderAgentGroup.mock.calls.map(([props]) => props)
+    expect(groups.every((group) => !group.isStreaming && !hasExecutingTool(group.items))).toBe(true)
+    expect(host.textContent).toContain('The workflow is ready to test with a sample lead.')
+    expect(host.textContent).toContain('What would you like to do next?')
+  })
+  it('reveals the reply before showing follow-up actions when motion is enabled', () => {
+    vi.stubGlobal('matchMedia', () => ({
+      matches: false,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+    }))
+    renderPhase('reply')
+    expect(host.textContent).not.toContain('The workflow is ready')
+    expect(host.textContent).not.toContain('What would you like to do next?')
+
+    act(() => vi.advanceTimersByTime(110))
+    expect(host.textContent).toContain('The workflow')
+    expect(host.textContent).not.toContain('The workflow is ready to test with a sample lead.')
+
+    act(() => vi.advanceTimersByTime(1000))
+    expect(host.textContent).toContain('The workflow is ready to test with a sample lead.')
+    expect(host.textContent).toContain('What would you like to do next?')
+  })
+})
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-chat-loop/hero-chat-loop.tsx b/apps/sim/app/(landing)/components/hero/components/hero-chat-loop/hero-chat-loop.tsx
index db21e5fedea..7fd3d1b9312 100644
--- a/apps/sim/app/(landing)/components/hero/components/hero-chat-loop/hero-chat-loop.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/hero-chat-loop/hero-chat-loop.tsx
@@ -1,233 +1,392 @@
 'use client'
 
-import { useEffect, useState } from 'react'
-import { cn, Tooltip } from '@sim/emcn'
-import {
-  ArrowRight,
-  ArrowUp,
-  Duplicate,
-  Mic,
-  Paperclip,
-  Plus,
-  Slash,
-  ThumbsDown,
-  ThumbsUp,
-} from '@sim/emcn/icons'
-import { ThinkingLoader } from '@/components/ui'
+import { useRef, useState } from 'react'
+import { Button, cn, Tooltip } from '@sim/emcn'
+import { Mic, Paperclip, Plus, Slash, X } from '@sim/emcn/icons'
+import { HeroChatReply } from '@/app/(landing)/components/hero/components/hero-chat-loop/hero-chat-reply'
+import { HeroToolCallItem } from '@/app/(landing)/components/hero/components/hero-chat-loop/hero-tool-call-item'
+import { HeroChatWelcome } from '@/app/(landing)/components/hero/components/hero-chat-welcome'
 import { HERO_TOOLTIP_OFFSET } from '@/app/(landing)/components/hero/components/hero-platform-loop/sidebar-hotspots'
+import { useElapsedReveal } from '@/app/(landing)/hooks/use-elapsed-reveal'
+import {
+  type AgentGroupItem,
+  AgentGroupView,
+} from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group-view'
+import {
+  parseQuestionAnswerMessage,
+  QuestionDisplay,
+} from '@/app/workspace/[workspaceId]/home/components/message-content/components/question'
+import type { QuestionItem } from '@/app/workspace/[workspaceId]/home/components/message-content/components/special-tags'
+import { PendingTagIndicator } from '@/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/pending-tag-indicator'
+import { SendButton } from '@/app/workspace/[workspaceId]/home/components/user-input/components/send-button/send-button'
+import { ToolCallStatus } from '@/app/workspace/[workspaceId]/home/types'
 
-/** The conversation the loop plays - mirrors the seeded capture chat. */
-const USER_MESSAGE = 'When a new lead signs up, enrich it with company data and post it to #sales.'
-const REPLY_MESSAGE =
-  "On it. I'll build a workflow that enriches each new signup with firmographics, scores it, and posts a summary to your #sales channel in Slack."
-const REPLY_WORDS = REPLY_MESSAGE.split(' ')
 /** Word-reveal cadence for the streamed reply. */
 const STREAM_WORD_MS = 55
-/** Follow-up suggestions shown once the reply completes, like the real chat. */
-const FOLLOW_UPS = [
-  'Run a test with a sample lead',
-  'Deploy the workflow',
-  'Add lead scoring criteria',
-] as const
+const WORKFLOW_AGENT_ITEMS: AgentGroupItem[] = [
+  {
+    type: 'tool',
+    data: {
+      id: 'hero-read-slack',
+      toolName: 'call_integration_tool',
+      displayTitle: 'Read Slack',
+      status: ToolCallStatus.success,
+      params: { toolId: 'slack_get_channel_history' },
+    },
+  },
+  {
+    type: 'tool',
+    data: {
+      id: 'hero-create-workflow',
+      toolName: 'edit_workflow',
+      displayTitle: 'Creating Lead enrichment',
+      status: ToolCallStatus.success,
+    },
+  },
+  {
+    type: 'tool',
+    data: {
+      id: 'hero-read-table',
+      toolName: 'read',
+      displayTitle: 'Reading Tables',
+      status: ToolCallStatus.success,
+      params: { path: 'components/blocks/table.json' },
+    },
+  },
+  {
+    type: 'text',
+    content: 'Connected the Slack and Tables steps',
+  },
+  {
+    type: 'tool',
+    data: {
+      id: 'hero-edit-workflow',
+      toolName: 'edit_workflow',
+      displayTitle: 'Editing workflow',
+      status: ToolCallStatus.success,
+    },
+  },
+]
+
+const WORKFLOW_AGENT_BUILDING_ITEMS: AgentGroupItem[] = WORKFLOW_AGENT_ITEMS.map((item) => {
+  if (item.type !== 'tool' || item.data.id !== 'hero-edit-workflow') return item
+  return { ...item, data: { ...item.data, status: ToolCallStatus.executing } }
+})
+
+const SIM_ITEMS: AgentGroupItem[] = [
+  {
+    type: 'tool',
+    data: {
+      id: 'hero-read-workflow',
+      toolName: 'read',
+      displayTitle: 'Reading workflow',
+      status: ToolCallStatus.success,
+      params: { path: 'workflows/Lead%20enrichment/state.json' },
+    },
+  },
+]
+
+const FOLLOW_UP_QUESTION: QuestionItem[] = [
+  {
+    type: 'single_select',
+    prompt: 'What would you like to do next?',
+    options: [
+      { id: 'test', label: 'Run a test with a sample lead' },
+      { id: 'deploy', label: 'Deploy the workflow' },
+    ],
+  },
+]
 
 /** Where the chat pane is within one loop pass. */
-export type HeroChatPhase = 'idle' | 'user' | 'thinking' | 'reply'
+export type HeroChatPhase =
+  | 'idle'
+  | 'compose'
+  | 'user'
+  | 'thinking'
+  | 'dispatching'
+  | 'building'
+  | 'reply'
 
 interface HeroChatLoopProps {
-  /** Current phase, driven by the parent {@link HeroPlatformLoop} clock. */
+  /** Current phase, driven by the landing-safe product adapter. */
   phase: HeroChatPhase
-  /** True during the brief fade-out before the cycle restarts. */
+  /** True during a visual reset. */
   fading: boolean
+  userMessage: string
+  replyMessage: string
+  composerValue: string
+  isSending: boolean
+  onComposerValueChange: (value: string) => void
+  onComposerFocus?: () => void
+  showWelcome?: boolean
+  onOpenWorkflowResource: () => void
+  onFollowUpSelect: (value: string) => void
+  onSubmit: () => void
+  onStopGeneration: () => void
 }
 
 /**
- * The Mothership chat pane of the hero's live layer - purely presentational;
- * the loop clock lives in `HeroPlatformLoop` so the chat and the workflow
- * stage animate off one timeline. Replays one exchange: the user message
- * slides in, the goo {@link ThinkingLoader} cycles while the Mothership
- * thinks, the reply lands with its action row.
- *
- * Visuals mirror the real chat pane (`--bg` column, grey user bubble, bare
- * reply text, the real composer chrome - 28px round icon buttons, mic + the
- * `#808080` send disc on the right cluster) so the seam with the surrounding
- * screenshot is invisible. The reply STREAMS in word by word (the way the
- * real Mothership streams its responses); once the text completes, the
- * "Suggested follow-ups" block (the real special-tags markup: numbered
- * `--border`-ruled rows with a trailing arrow) and the action row land
- * together; under `prefers-reduced-motion` it appears whole.
- * The content column is centered and capped (like the real full-width
- * MothershipChat) so it reads right both full-width (stage collapsed) and at
- * half width (stage open). Only the conversation fades on reset - the pane
- * and composer are persistent chrome.
+ * A landing-safe adapter for Sim's real Mothership chat presentation. It
+ * preserves the production composer dimensions and send control while all
+ * messages, attachments, follow-ups, and workflow-build state remain local to
+ * the browser preview.
  */
-export function HeroChatLoop({ phase, fading }: HeroChatLoopProps) {
-  const showUser = phase !== 'idle'
-  const showThinking = phase === 'thinking'
+export function HeroChatLoop({
+  phase,
+  fading,
+  userMessage,
+  replyMessage,
+  composerValue,
+  isSending,
+  onComposerValueChange,
+  onComposerFocus,
+  showWelcome = false,
+  onOpenWorkflowResource,
+  onFollowUpSelect,
+  onSubmit,
+  onStopGeneration,
+}: HeroChatLoopProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const showUser = phase !== 'idle' && phase !== 'compose'
+  const welcome = showWelcome && !showUser
+  const showThinking = phase === 'thinking' || phase === 'dispatching'
+  const showBuilding = phase === 'building'
   const showReply = phase === 'reply'
-  const [revealedWords, setRevealedWords] = useState(0)
-
-  // Stream the reply word by word while the phase holds on 'reply'; any other
-  // phase (the next cycle's reset) rewinds it for the following pass. The
-  // count derives from ELAPSED time, not tick count, so throttled background
-  // tabs catch up in chunks instead of stalling mid-sentence.
-  useEffect(() => {
-    if (!showReply) {
-      setRevealedWords(0)
-      return
-    }
-
-    const media = window.matchMedia('(prefers-reduced-motion: reduce)')
-    let interval: ReturnType<typeof setInterval> | null = null
+  const replyWords = replyMessage.match(/\S+\s*/g) ?? []
+  const replyWordCount = replyWords.length
+  const revealedWords = useElapsedReveal(showReply, STREAM_WORD_MS, replyWordCount)
+  const [attachedFileName, setAttachedFileName] = useState<string | null>(null)
 
-    const stream = () => {
-      const startedAt = performance.now()
-      interval = setInterval(() => {
-        const elapsed = performance.now() - startedAt
-        const n = Math.min(Math.floor(elapsed / STREAM_WORD_MS) + 1, REPLY_WORDS.length)
-        setRevealedWords(n)
-        if (n >= REPLY_WORDS.length && interval) clearInterval(interval)
-      }, STREAM_WORD_MS)
-    }
+  const replyComplete = revealedWords >= replyWordCount
+  const canSubmit = composerValue.trim().length > 0 || attachedFileName !== null
 
-    // Re-synced on 'change' (not just on mount) so toggling the preference
-    // mid-stream - e.g. HeroPlatformLoop's showFinished setting phase to
-    // 'reply' while it's already 'reply' - still snaps the reply to complete
-    // instead of leaving it mid-word until the running interval catches up.
-    const syncMotionPreference = () => {
-      if (interval) clearInterval(interval)
-      if (media.matches) {
-        setRevealedWords(REPLY_WORDS.length)
-        return
-      }
-      stream()
-    }
+  const updateComposer = (value: string) => {
+    onComposerValueChange(value)
+    requestAnimationFrame(() => textareaRef.current?.focus())
+  }
 
-    syncMotionPreference()
-    media.addEventListener('change', syncMotionPreference)
-    return () => {
-      media.removeEventListener('change', syncMotionPreference)
-      if (interval) clearInterval(interval)
-    }
-  }, [showReply])
+  const submitComposer = () => {
+    if (!canSubmit) return
+    onSubmit()
+    setAttachedFileName(null)
+  }
 
-  const replyComplete = revealedWords >= REPLY_WORDS.length
+  const selectFollowUp = (message: string) => {
+    const answer = parseQuestionAnswerMessage(FOLLOW_UP_QUESTION, message)?.[0]
+    onFollowUpSelect(answer ?? message)
+  }
 
   return (
-    <div className='flex h-full w-full flex-col bg-[var(--bg)]'>
+    <div
+      className='relative flex h-full w-full flex-col bg-[var(--bg)]'
+      data-chat-view={welcome ? 'welcome' : 'conversation'}
+      data-chat-phase={phase}
+    >
       <div
+        inert={welcome}
+        aria-hidden={welcome}
         className={cn(
-          'mx-auto flex min-h-0 w-full max-w-[640px] flex-1 flex-col gap-6 overflow-hidden px-6 pt-6 transition-opacity duration-300 ease-out',
-          fading ? 'opacity-0' : 'opacity-100'
+          'mx-auto flex min-h-0 w-full max-w-chat flex-1 flex-col gap-6 overflow-y-auto overflow-x-hidden px-6 pt-4 transition-opacity duration-300 ease-out [scrollbar-gutter:stable_both-edges] motion-reduce:transition-none',
+          showWelcome && (attachedFileName ? 'mb-[144px]' : 'mb-[110px]'),
+          fading || welcome ? 'opacity-0' : 'opacity-100'
         )}
       >
         <div
           className={cn(
-            'max-w-[82%] self-end rounded-2xl bg-[var(--surface-3)] px-4 py-3 text-[15px] text-[var(--text-primary)] leading-[1.5] transition-[opacity,transform] duration-200 ease-out',
+            'max-w-[70%] shrink-0 self-end overflow-hidden rounded-[16px] bg-[var(--surface-5)] px-3.5 py-2 text-[var(--text-primary)] text-sm leading-5 transition-[opacity,transform] duration-200 ease-out',
             showUser ? 'translate-y-0 opacity-100' : 'translate-y-2 opacity-0'
           )}
         >
-          {USER_MESSAGE}
+          {userMessage}
         </div>
 
-        {showThinking && <ThinkingLoader size={26} phase labelRatio={0.58} className='mt-1' />}
-
         <div
           className={cn(
-            'flex flex-col gap-4 transition-opacity duration-200 ease-out',
-            showReply ? 'opacity-100' : 'opacity-0'
+            'flex flex-col gap-[10px] transition-opacity duration-200 ease-out',
+            showThinking || showBuilding || showReply ? 'opacity-100' : 'opacity-0'
           )}
         >
-          <p className='text-[15px] text-[var(--text-primary)] leading-[1.6]'>
-            {REPLY_WORDS.slice(0, revealedWords).join(' ')}
-          </p>
-          <div
-            className={cn(
-              'flex flex-col gap-4 transition-opacity duration-200 ease-out',
-              replyComplete ? 'opacity-100' : 'opacity-0'
-            )}
-          >
-            <div className='flex flex-col'>
-              <span className='text-[var(--text-body)] text-sm'>Suggested follow-ups</span>
-              <div className='mt-1.5 flex flex-col'>
-                {FOLLOW_UPS.map((title, i) => (
-                  <span
-                    key={title}
-                    className={cn(
-                      'flex items-center gap-2 border-[var(--border)] px-2 py-2 text-left',
-                      i > 0 && 'border-t'
-                    )}
-                  >
-                    <span className='flex size-[16px] shrink-0 items-center justify-center'>
-                      <span className='text-[var(--text-icon)] text-sm'>{i + 1}</span>
-                    </span>
-                    <span className='flex-1 text-[var(--text-body)] text-sm'>{title}</span>
-                    <ArrowRight className='size-[16px] shrink-0 text-[var(--text-icon)]' />
-                  </span>
-                ))}
-              </div>
-            </div>
-            <div className='flex items-center gap-3 text-[var(--text-icon)]'>
-              <Duplicate className='size-[14px]' />
-              <ThumbsUp className='size-[14px]' />
-              <ThumbsDown className='size-[14px]' />
-            </div>
-          </div>
+          {showThinking && (
+            <PendingTagIndicator label={phase === 'dispatching' ? 'Dispatching…' : 'Thinking…'} />
+          )}
+          {showBuilding && (
+            <AgentGroupView
+              ToolCallComponent={HeroToolCallItem}
+              agentName='workflow'
+              agentLabel='Workflow Agent'
+              items={WORKFLOW_AGENT_BUILDING_ITEMS}
+              isStreaming
+              isCurrentSection
+              isLaneOpen
+              defaultExpanded
+              autoScrollActivity={false}
+            />
+          )}
+          {showReply && (
+            <>
+              <AgentGroupView
+                ToolCallComponent={HeroToolCallItem}
+                agentName='workflow'
+                agentLabel='Workflow Agent'
+                items={WORKFLOW_AGENT_ITEMS}
+                defaultExpanded
+              />
+              <AgentGroupView
+                ToolCallComponent={HeroToolCallItem}
+                agentName='mothership'
+                agentLabel='Sim'
+                items={SIM_ITEMS}
+                defaultExpanded
+              />
+              <HeroChatReply
+                content={replyComplete ? replyMessage : replyWords.slice(0, revealedWords).join('')}
+                onOpenWorkflowResource={onOpenWorkflowResource}
+              />
+              {replyComplete && (
+                <QuestionDisplay
+                  data={FOLLOW_UP_QUESTION}
+                  onSelect={selectFollowUp}
+                  onDismiss={() => undefined}
+                />
+              )}
+            </>
+          )}
         </div>
       </div>
 
-      <div className='pointer-events-auto mx-auto mb-5 w-[calc(100%-40px)] max-w-[600px] shrink-0 rounded-2xl border border-[var(--border-1)] bg-[var(--white)] px-2.5 py-2'>
-        <p className='px-1.5 pt-1 text-[15px] text-[var(--text-muted)]'>Send message to Sim</p>
-        <div className='mt-2 flex items-center gap-1.5'>
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <span
-                className='flex size-[28px] items-center justify-center rounded-full transition-colors hover-hover:bg-[var(--surface-hover)]'
-                aria-label='Add resources'
-              >
-                <Plus className='size-[16px] text-[var(--text-icon)]' />
-              </span>
-            </Tooltip.Trigger>
-            <Tooltip.Content offset={HERO_TOOLTIP_OFFSET}>Add resources</Tooltip.Content>
-          </Tooltip.Root>
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <span
-                className='flex size-[28px] items-center justify-center rounded-full transition-colors hover-hover:bg-[var(--surface-hover)]'
-                aria-label='Attach file'
-              >
-                <Paperclip className='size-[16px] text-[var(--text-icon)]' />
-              </span>
-            </Tooltip.Trigger>
-            <Tooltip.Content offset={HERO_TOOLTIP_OFFSET}>Attach file</Tooltip.Content>
-          </Tooltip.Root>
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <span
-                className='flex size-[28px] items-center justify-center rounded-full transition-colors hover-hover:bg-[var(--surface-hover)]'
-                aria-label='Skills'
-              >
-                <Slash className='size-[16px] text-[var(--text-icon)]' />
-              </span>
-            </Tooltip.Trigger>
-            <Tooltip.Content offset={HERO_TOOLTIP_OFFSET}>Skills</Tooltip.Content>
-          </Tooltip.Root>
-          <span className='ml-auto flex items-center gap-1.5'>
+      <div
+        data-preview-outline='frame'
+        data-preview-composer=''
+        className={cn(
+          'mx-auto w-[calc(100%-48px)] max-w-chat rounded-2xl border border-[var(--border)] bg-[var(--white)] px-2.5 py-2 dark:bg-[var(--surface-4)]',
+          showWelcome
+            ? 'absolute inset-x-0 transition-[bottom,transform] duration-[450ms] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none max-sm:w-[calc(100%-24px)]'
+            : 'mb-4 shrink-0',
+          showWelcome &&
+            (welcome
+              ? 'bottom-[52%] translate-y-1/2 shadow-xs max-sm:bottom-[42%]'
+              : 'bottom-4 translate-y-0')
+        )}
+      >
+        {showWelcome && <HeroChatWelcome visible={welcome} onSelect={updateComposer} />}
+        {attachedFileName && (
+          <div className='mb-1 flex w-fit max-w-full items-center gap-1.5 rounded-md border border-[var(--border)] bg-[var(--surface-2)] py-1 pr-1 pl-2 text-[var(--text-body)] text-xs'>
+            <Paperclip className='size-[14px] shrink-0 text-[var(--text-icon)]' />
+            <span className='truncate'>{attachedFileName}</span>
+            <Button
+              type='button'
+              variant='ghost'
+              aria-label='Remove attachment'
+              onClick={() => setAttachedFileName(null)}
+              className='size-[22px] rounded-full p-0 hover-hover:bg-[var(--surface-hover)]'
+            >
+              <X className='size-[12px] text-[var(--text-icon)]' />
+            </Button>
+          </div>
+        )}
+        <textarea
+          ref={textareaRef}
+          value={composerValue}
+          rows={welcome ? 2 : 1}
+          onFocus={onComposerFocus}
+          aria-label='Ask Sim'
+          placeholder='Ask Sim to '
+          onChange={(event) => onComposerValueChange(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter' && !event.shiftKey) {
+              event.preventDefault()
+              submitComposer()
+            }
+          }}
+          className={cn(
+            'm-0 block max-h-[96px] w-full resize-none overflow-y-auto border-0 bg-transparent px-1 py-1 font-body text-[14px] text-[var(--text-primary)] leading-[24px] tracking-[-0.015em] outline-none placeholder:text-[var(--text-muted)] focus-visible:ring-0 focus-visible:ring-offset-0',
+            welcome ? 'min-h-[56px]' : 'min-h-[32px]'
+          )}
+        />
+        <div className='flex items-center justify-between'>
+          <div className='flex items-center gap-1'>
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <Button
+                  type='button'
+                  variant='ghost'
+                  onClick={() => updateComposer(`${composerValue}@Knowledge Base `)}
+                  aria-label='Add resources'
+                  className='size-[28px] rounded-full p-0 hover-hover:bg-[var(--surface-hover)]'
+                >
+                  <Plus className='size-[16px] text-[var(--text-icon)]' />
+                </Button>
+              </Tooltip.Trigger>
+              <Tooltip.Content offset={HERO_TOOLTIP_OFFSET}>Add resources</Tooltip.Content>
+            </Tooltip.Root>
             <Tooltip.Root>
               <Tooltip.Trigger asChild>
-                <span
-                  className='flex size-[28px] items-center justify-center rounded-full transition-colors hover-hover:bg-[var(--surface-hover)]'
-                  aria-label='Voice input'
+                <Button
+                  type='button'
+                  variant='ghost'
+                  onClick={() => fileInputRef.current?.click()}
+                  aria-label='Attach file'
+                  className='size-[28px] rounded-full p-0 hover-hover:bg-[var(--surface-hover)]'
                 >
-                  <Mic className='size-[16px] text-[var(--text-icon)]' />
+                  <Paperclip className='size-[16px] text-[var(--text-icon)]' />
+                </Button>
+              </Tooltip.Trigger>
+              <Tooltip.Content offset={HERO_TOOLTIP_OFFSET}>Attach file</Tooltip.Content>
+            </Tooltip.Root>
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <Button
+                  type='button'
+                  variant='ghost'
+                  onClick={() => updateComposer(`${composerValue}/`)}
+                  aria-label='Skills'
+                  className='size-[28px] rounded-full p-0 hover-hover:bg-[var(--surface-hover)]'
+                >
+                  <Slash className='size-[16px] text-[var(--text-icon)]' />
+                </Button>
+              </Tooltip.Trigger>
+              <Tooltip.Content offset={HERO_TOOLTIP_OFFSET}>Skills</Tooltip.Content>
+            </Tooltip.Root>
+          </div>
+          <div className='flex items-center gap-1.5'>
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <span>
+                  <Button
+                    type='button'
+                    variant='ghost'
+                    disabled
+                    aria-label='Voice input requires the signed-in workspace'
+                    className='size-[28px] rounded-full p-0'
+                  >
+                    <Mic className='size-[16px] text-[var(--text-icon)]' />
+                  </Button>
                 </span>
               </Tooltip.Trigger>
-              <Tooltip.Content offset={HERO_TOOLTIP_OFFSET}>Voice input</Tooltip.Content>
+              <Tooltip.Content offset={HERO_TOOLTIP_OFFSET}>
+                Voice input is available in the workspace
+              </Tooltip.Content>
             </Tooltip.Root>
-            <span className='flex size-[28px] items-center justify-center rounded-full bg-[#808080]'>
-              <ArrowUp className='size-[16px] text-white' />
-            </span>
-          </span>
+            <SendButton
+              isSending={isSending}
+              canSubmit={canSubmit}
+              onSubmit={submitComposer}
+              onStopGeneration={onStopGeneration}
+            />
+          </div>
         </div>
+        <input
+          ref={fileInputRef}
+          type='file'
+          className='hidden'
+          onChange={(event) => {
+            const file = event.target.files?.[0]
+            if (!file) return
+            setAttachedFileName(file.name)
+            if (!composerValue.trim()) updateComposer(`Review ${file.name}`)
+          }}
+        />
       </div>
     </div>
   )
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-chat-loop/hero-chat-reply.tsx b/apps/sim/app/(landing)/components/hero/components/hero-chat-loop/hero-chat-reply.tsx
new file mode 100644
index 00000000000..a559859d115
--- /dev/null
+++ b/apps/sim/app/(landing)/components/hero/components/hero-chat-loop/hero-chat-reply.tsx
@@ -0,0 +1,41 @@
+'use client'
+
+import { Workflow } from '@sim/emcn/icons'
+import { ResourceMention } from '@/app/workspace/[workspaceId]/home/components/message-content/components/resource-mention'
+
+interface HeroChatReplyProps {
+  content: string
+  onOpenWorkflowResource: () => void
+}
+
+const WORKFLOW_TITLE = 'Lead enrichment'
+
+/** The seeded reply renders the paced content and native resource chip without workspace data queries. */
+export function HeroChatReply({ content, onOpenWorkflowResource }: HeroChatReplyProps) {
+  return (
+    <div className='space-y-4 font-[family-name:var(--font-inter)] text-[var(--text-primary)] text-base leading-[25px] tracking-[0] antialiased'>
+      {content.split('\n\n').map((paragraph, index) => {
+        const resourceIndex = paragraph.indexOf(WORKFLOW_TITLE)
+        return (
+          <p key={index}>
+            {resourceIndex < 0 ? (
+              paragraph
+            ) : (
+              <>
+                {paragraph.slice(0, resourceIndex)}
+                <ResourceMention
+                  icon={
+                    <Workflow className='relative top-0.5 size-[12px] shrink-0 text-[var(--text-icon)]' />
+                  }
+                  title={WORKFLOW_TITLE}
+                  onSelect={onOpenWorkflowResource}
+                />
+                {paragraph.slice(resourceIndex + WORKFLOW_TITLE.length)}
+              </>
+            )}
+          </p>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-chat-loop/hero-tool-call-item.tsx b/apps/sim/app/(landing)/components/hero/components/hero-chat-loop/hero-tool-call-item.tsx
new file mode 100644
index 00000000000..598d5614897
--- /dev/null
+++ b/apps/sim/app/(landing)/components/hero/components/hero-chat-loop/hero-tool-call-item.tsx
@@ -0,0 +1,27 @@
+import { Table } from '@sim/emcn/icons'
+import { SlackIcon } from '@/components/icons'
+import { getToolStatusDisplayTitle } from '@/lib/copilot/tools/tool-display'
+import type { ToolCallItemProps } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item'
+import { ToolCallRow } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-row'
+
+/** Demo fixtures have known brands, so the landing page never loads the block registry. */
+export function HeroToolCallItem({
+  toolCallId,
+  toolName,
+  displayTitle,
+  status,
+}: ToolCallItemProps) {
+  const Icon =
+    toolCallId === 'hero-read-slack'
+      ? SlackIcon
+      : toolCallId === 'hero-read-table'
+        ? Table
+        : undefined
+  return (
+    <ToolCallRow
+      title={getToolStatusDisplayTitle(displayTitle, status, toolName)}
+      isExecuting={status === 'executing'}
+      icon={Icon && <Icon className='size-[14px] shrink-0 text-[var(--text-icon)]' />}
+    />
+  )
+}
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-chat-welcome/hero-chat-welcome.tsx b/apps/sim/app/(landing)/components/hero/components/hero-chat-welcome/hero-chat-welcome.tsx
new file mode 100644
index 00000000000..96ec91df4ad
--- /dev/null
+++ b/apps/sim/app/(landing)/components/hero/components/hero-chat-welcome/hero-chat-welcome.tsx
@@ -0,0 +1,62 @@
+import { cn } from '@sim/emcn'
+import { ArrowRight, FileText, Table, Workflow } from '@sim/emcn/icons'
+import { PREVIEW_SUGGESTIONS } from '@/app/(landing)/components/hero/components/hero-platform-loop/preview-chat-content'
+
+interface HeroChatWelcomeProps {
+  visible: boolean
+  onSelect: (prompt: string) => void
+}
+
+const ACTION_ICONS = [Workflow, Table, FileText] as const
+const REVEAL = 'transition-opacity duration-150 ease-out motion-reduce:transition-none'
+
+/** Greeting and suggested actions anchored around the preview's single composer. */
+export function HeroChatWelcome({ visible, onSelect }: HeroChatWelcomeProps) {
+  return (
+    <>
+      <p
+        data-preview-skeleton-label=''
+        aria-hidden={!visible}
+        className={cn(
+          'absolute inset-x-0 bottom-[calc(100%+28px)] text-balance text-center text-[26px] text-[var(--text-primary)] leading-[1.2] tracking-[-0.01em] max-sm:bottom-[calc(100%+20px)] max-sm:text-[20px]',
+          REVEAL,
+          visible ? 'opacity-100' : 'pointer-events-none opacity-0'
+        )}
+      >
+        What should we get done, Morgan?
+      </p>
+      <div
+        inert={!visible}
+        aria-hidden={!visible}
+        className={cn(
+          'absolute inset-x-0 top-[calc(100%+28px)] max-sm:hidden',
+          REVEAL,
+          visible ? 'opacity-100' : 'pointer-events-none opacity-0'
+        )}
+      >
+        <span data-preview-skeleton-label='' className='text-[13px] text-[var(--text-secondary)]'>
+          Suggested actions
+        </span>
+        <div className='mt-2 flex flex-col'>
+          {PREVIEW_SUGGESTIONS.map((action, index) => {
+            const Icon = ACTION_ICONS[index]
+            return (
+              <button
+                key={action.title}
+                type='button'
+                onClick={() => onSelect(action.prompt)}
+                className='flex items-center gap-2 border-[var(--border)] px-2 py-2 text-left text-[var(--text-body)] text-sm transition-colors duration-150 hover:bg-[var(--surface-hover)] focus-visible:outline focus-visible:outline-1 focus-visible:outline-[var(--text-primary)] [&+button]:border-t'
+              >
+                <Icon className='size-[16px] shrink-0 text-[var(--text-icon)]' />
+                <span data-preview-skeleton-label='' className='min-w-0 flex-1 truncate'>
+                  {action.title}
+                </span>
+                <ArrowRight className='size-[14px] shrink-0 text-[var(--text-icon)]' />
+              </button>
+            )
+          })}
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-chat-welcome/index.ts b/apps/sim/app/(landing)/components/hero/components/hero-chat-welcome/index.ts
new file mode 100644
index 00000000000..850855c6cd3
--- /dev/null
+++ b/apps/sim/app/(landing)/components/hero/components/hero-chat-welcome/index.ts
@@ -0,0 +1 @@
+export { HeroChatWelcome } from './hero-chat-welcome'
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-header/hero-header.tsx b/apps/sim/app/(landing)/components/hero/components/hero-header/hero-header.tsx
index c2e9b566956..f448ef82f76 100644
--- a/apps/sim/app/(landing)/components/hero/components/hero-header/hero-header.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/hero-header/hero-header.tsx
@@ -1,48 +1,94 @@
 import type { ReactNode } from 'react'
 import { cn } from '@sim/emcn'
-import { HeroStat } from '@/app/(landing)/components/hero/components/hero-stat'
 import { HeroCta } from '@/app/(landing)/components/hero-cta'
-import { LANDING_HERO_CTA_GAP } from '@/app/(landing)/components/landing-layout'
+import { HOME_TYPE, LANDING_TYPE } from '@/app/(landing)/components/landing-layout'
 
 interface LandingHeroHeaderProps {
   description: string
   eyebrow?: ReactNode
   heading: ReactNode
   headingId: string
+  /**
+   * `home` is the split, product-first masthead used only on `/`.
+   * `default` keeps the split 76px heading `/enterprise` already shares.
+   */
+  scale?: 'default' | 'home'
 }
 
 /**
- * Shared homepage hero header geometry. Marketing routes use this component so
- * the headline measure, CTA stack, and right-side global-work stat cannot drift.
+ * Shared hero header with a wide split homepage masthead and the existing split
+ * composition for marketing subpages. Homepage pairs a leading headline with
+ * supporting copy and CTAs aligned to the headline’s last baseline before the product stage.
  */
 export function LandingHeroHeader({
   description,
   eyebrow,
   heading,
   headingId,
+  scale = 'default',
 }: LandingHeroHeaderProps) {
+  const home = scale === 'home'
+
+  if (home) {
+    return (
+      <div className='grid w-full grid-cols-[minmax(0,1fr)_minmax(380px,440px)] gap-16 text-left [align-items:last_baseline] max-[1400px]:grid-cols-1 max-[1400px]:items-start max-[1400px]:gap-8'>
+        <div className='flex min-w-0 flex-col items-start gap-6'>
+          {eyebrow}
+
+          <h1
+            id={headingId}
+            className={cn(
+              'max-w-[960px] text-balance text-[var(--text-primary)] max-[1728px]:text-[64px]',
+              HOME_TYPE.h1
+            )}
+          >
+            {heading}
+          </h1>
+        </div>
+
+        <div className='flex min-w-0 flex-col items-start gap-8 max-[1400px]:max-w-[640px]'>
+          <p className='max-w-[44ch] text-pretty font-normal text-[18px] text-[var(--text-body)] leading-[1.5] max-sm:text-[16px]'>
+            {description}
+          </p>
+
+          <div className='max-sm:w-full'>
+            <HeroCta size='display' secondaryLabel='Start building' />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
   return (
-    <div className='flex w-full items-end justify-between gap-8'>
+    <div className='flex w-full items-end justify-between gap-12 max-xl:flex-col max-xl:items-start max-xl:gap-8'>
       <div className='flex min-w-0 flex-1 flex-col items-start gap-[22px] text-left'>
         {eyebrow}
 
         <h1
           id={headingId}
-          className='max-w-[1120px] text-balance text-[64px] text-[var(--text-primary)] leading-[1.05] tracking-[-0.01em] max-sm:text-[36px] max-xl:text-[52px] [&>br]:max-sm:hidden'
+          className={cn(
+            'max-w-[22ch] text-balance text-[var(--text-primary)] [&>br]:max-sm:hidden',
+            LANDING_TYPE.h1
+          )}
         >
           {heading}
         </h1>
+      </div>
 
-        <p className='w-full min-w-0 max-w-[58ch] text-pretty text-[var(--text-muted)] text-base leading-[1.5]'>
+      <div className='flex w-[400px] flex-none flex-col items-start gap-7 pb-3 max-xl:w-full max-xl:gap-[22px] max-xl:pb-0'>
+        <p
+          className={cn(
+            'w-full min-w-0 max-w-[34ch] text-pretty text-[var(--text-body)]',
+            LANDING_TYPE.lead
+          )}
+        >
           {description}
         </p>
 
-        <div className={cn('max-sm:w-full', LANDING_HERO_CTA_GAP)}>
+        <div className='max-sm:w-full'>
           <HeroCta />
         </div>
       </div>
-
-      <HeroStat />
     </div>
   )
 }
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-platform-intro/draw-platform-preview.ts b/apps/sim/app/(landing)/components/hero/components/hero-platform-intro/draw-platform-preview.ts
new file mode 100644
index 00000000000..b5847760654
--- /dev/null
+++ b/apps/sim/app/(landing)/components/hero/components/hero-platform-intro/draw-platform-preview.ts
@@ -0,0 +1,195 @@
+const SVG_NS = 'http://www.w3.org/2000/svg'
+const SVG_GEOMETRY = 'path, rect, circle, ellipse, line, polyline, polygon'
+const CONTENT_REVEAL_AT = 2_700
+const CONTENT_REVEAL_DURATION = 550
+const REGION_START = { sidebar: 1_100, workspace: 1_900 } as const
+
+type PreviewRegion = keyof typeof REGION_START
+
+/** Draws the shell, sidebar, and composer in order, then crossfades once into the real UI. */
+export function drawPlatformPreview(
+  root: HTMLDivElement,
+  content: HTMLDivElement,
+  overlay: SVGSVGElement,
+  animations: Animation[]
+) {
+  const bounds = root.getBoundingClientRect()
+  /** The overlay bleeds one pixel past the root so it can trace the region's border box. */
+  overlay.setAttribute('viewBox', `-1 -1 ${bounds.width + 2} ${bounds.height + 2}`)
+  overlay.replaceChildren()
+
+  const animate = (element: Element, frames: Keyframe[], options: KeyframeAnimationOptions) => {
+    const animation = element.animate(frames, { fill: 'both', ...options })
+    animations.push(animation)
+    return animation
+  }
+  const regionOf = (element: Element): PreviewRegion =>
+    element.closest('[data-preview-sidebar]') ? 'sidebar' : 'workspace'
+
+  const outline = document.createElementNS(SVG_NS, 'g')
+  outline.setAttribute('fill', 'none')
+  outline.setAttribute('stroke', 'var(--text-subtle)')
+  outline.setAttribute('stroke-width', '1')
+  outline.setAttribute('stroke-opacity', '0.65')
+  overlay.appendChild(outline)
+
+  const drawOutline = (
+    rect: Pick<DOMRect, 'left' | 'top' | 'width' | 'height'>,
+    edge: string,
+    radius: number,
+    delay: number,
+    duration: number
+  ) => {
+    if (!rect.width || !rect.height) return
+    const x = rect.left - bounds.left
+    const y = rect.top - bounds.top
+    const shape = document.createElementNS(SVG_NS, edge === 'frame' ? 'rect' : 'path')
+    if (edge === 'frame') {
+      shape.setAttribute('x', String(x + 0.5))
+      shape.setAttribute('y', String(y + 0.5))
+      shape.setAttribute('width', String(Math.max(0, rect.width - 1)))
+      shape.setAttribute('height', String(Math.max(0, rect.height - 1)))
+      shape.setAttribute('rx', String(radius))
+    } else {
+      const edgeY = edge === 'bottom' ? y + rect.height : y
+      shape.setAttribute(
+        'd',
+        edge === 'left' ? `M ${x} ${y} V ${y + rect.height}` : `M ${x} ${edgeY} H ${x + rect.width}`
+      )
+    }
+    shape.setAttribute('pathLength', '1')
+    shape.setAttribute('stroke-dasharray', '1')
+    shape.setAttribute('stroke-dashoffset', '1')
+    outline.appendChild(shape)
+    animate(shape, [{ strokeDashoffset: 1 }, { strokeDashoffset: 0 }], {
+      duration,
+      delay,
+      easing: 'ease-in-out',
+    })
+  }
+
+  /**
+   * The root sits inside the region's 1px border, so the frame is drawn one
+   * pixel out to land on that border rather than a hairline inside it.
+   */
+  drawOutline(
+    {
+      left: bounds.left - 1,
+      top: bounds.top - 1,
+      width: bounds.width + 2,
+      height: bounds.height + 2,
+    },
+    'frame',
+    8,
+    0,
+    1_200
+  )
+  content.querySelectorAll<HTMLElement>('[data-preview-outline]').forEach((element) => {
+    if (element.closest('[data-preview-collapsed]')) return
+    const composer = element.hasAttribute('data-preview-composer')
+    drawOutline(
+      element.getBoundingClientRect(),
+      element.dataset.previewOutline ?? 'frame',
+      Number.parseFloat(getComputedStyle(element).borderRadius) || 0,
+      composer ? 1_700 : 650,
+      composer ? 750 : 950
+    )
+  })
+  const sidebarFooter = content.querySelector<HTMLElement>(
+    '[data-preview-sidebar] > div > div:last-child'
+  )
+  if (sidebarFooter) drawOutline(sidebarFooter.getBoundingClientRect(), 'top', 0, 1_100, 500)
+  const tabs = content.querySelector<HTMLElement>('[role="tablist"]')
+  if (tabs && !tabs.closest('[data-preview-collapsed]'))
+    drawOutline(tabs.getBoundingClientRect(), 'bottom', 0, 1_700, 500)
+
+  const skeleton = document.createElementNS(SVG_NS, 'g')
+  skeleton.setAttribute('data-preview-skeleton', '')
+  skeleton.setAttribute('fill', 'var(--surface-6)')
+  overlay.appendChild(skeleton)
+  const skeletonCount = { sidebar: 0, workspace: 0 }
+  const addSkeleton = (rect: DOMRect, region: PreviewRegion, width = rect.width) => {
+    if (!rect.width || !rect.height) return
+    const bar = document.createElementNS(SVG_NS, 'rect')
+    bar.setAttribute('x', String(rect.left - bounds.left))
+    bar.setAttribute('y', String(rect.top - bounds.top + (rect.height - 7) / 2))
+    bar.setAttribute('width', String(width))
+    bar.setAttribute('height', '7')
+    bar.setAttribute('rx', '3.5')
+    bar.setAttribute('opacity', '0')
+    skeleton.appendChild(bar)
+    animate(bar, [{ opacity: 0 }, { opacity: 0.7 }], {
+      duration: 240,
+      delay: REGION_START[region] + Math.min(skeletonCount[region] * 35, 280),
+      easing: 'ease-out',
+    })
+    skeletonCount[region] += 1
+  }
+  content
+    .querySelectorAll<HTMLElement>(
+      '[data-preview-sidebar] span, [role="tab"] span, [data-preview-skeleton-label]'
+    )
+    .forEach((label) => {
+      if (label.closest('[data-preview-collapsed]')) return
+      if (label.children.length || (label.textContent?.trim().length ?? 0) < 2) return
+      const range = document.createRange()
+      range.selectNodeContents(label)
+      addSkeleton(range.getBoundingClientRect(), regionOf(label))
+    })
+  const composer = content.querySelector('textarea')?.getBoundingClientRect()
+  if (composer) addSkeleton(composer, 'workspace', Math.min(120, composer.width * 0.42))
+
+  const icons = document.createElementNS(SVG_NS, 'g')
+  icons.setAttribute('data-preview-icons', '')
+  overlay.appendChild(icons)
+  const iconCount = { sidebar: 0, workspace: 0 }
+  content.querySelectorAll<SVGSVGElement>('svg').forEach((source) => {
+    if (source.closest('[data-preview-collapsed]')) return
+    const rect = source.getBoundingClientRect()
+    if (!rect.width || !rect.height || rect.width > 40 || rect.height > 40) return
+    const region = regionOf(source)
+    const copy = source.cloneNode(true) as SVGSVGElement
+    copy.setAttribute('x', String(rect.left - bounds.left))
+    copy.setAttribute('y', String(rect.top - bounds.top))
+    copy.setAttribute('width', String(rect.width))
+    copy.setAttribute('height', String(rect.height))
+    copy.setAttribute('aria-hidden', 'true')
+    const shapes = copy.querySelectorAll<SVGGeometryElement>(SVG_GEOMETRY)
+    const originals = source.querySelectorAll<SVGGeometryElement>(SVG_GEOMETRY)
+    const delay = REGION_START[region] + Math.min(iconCount[region] * 35, 280)
+    shapes.forEach((shape, index) => {
+      const original = originals[index]
+      if (!original) return
+      const style = getComputedStyle(original)
+      const filled = style.fill !== 'none'
+      const outlined = style.stroke !== 'none'
+      if (!filled && !outlined) return
+      shape.setAttribute('pathLength', '1')
+      shape.setAttribute('stroke-dasharray', '1')
+      shape.setAttribute('stroke-dashoffset', '1')
+      shape.setAttribute('stroke', outlined ? style.stroke : style.color)
+      shape.setAttribute('stroke-width', outlined ? style.strokeWidth : '1')
+      shape.setAttribute('fill', style.fill)
+      shape.setAttribute('fill-opacity', '0')
+      animate(
+        shape,
+        [
+          { strokeDashoffset: 1, fillOpacity: 0, strokeOpacity: 1 },
+          { strokeDashoffset: 0, fillOpacity: 0, strokeOpacity: 1, offset: 0.75 },
+          { strokeDashoffset: 0, fillOpacity: filled ? 1 : 0, strokeOpacity: outlined ? 1 : 0 },
+        ],
+        { duration: 500, delay, easing: 'ease-in-out' }
+      )
+    })
+    icons.appendChild(copy)
+    iconCount[region] += 1
+  })
+
+  const handoff = {
+    duration: CONTENT_REVEAL_DURATION,
+    delay: CONTENT_REVEAL_AT,
+    easing: 'linear',
+  }
+  animate(overlay, [{ opacity: 1 }, { opacity: 0 }], handoff)
+  return animate(content, [{ opacity: 0 }, { opacity: 1 }], handoff)
+}
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-platform-intro/hero-platform-intro.test.tsx b/apps/sim/app/(landing)/components/hero/components/hero-platform-intro/hero-platform-intro.test.tsx
new file mode 100644
index 00000000000..776403dc9fa
--- /dev/null
+++ b/apps/sim/app/(landing)/components/hero/components/hero-platform-intro/hero-platform-intro.test.tsx
@@ -0,0 +1,386 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { HeroPlatformIntro } from '@/app/(landing)/components/hero/components/hero-platform-intro/hero-platform-intro'
+
+vi.mock('@sim/emcn', () => ({
+  cn: (...values: Array<string | false | undefined>) => values.filter(Boolean).join(' '),
+}))
+
+interface PendingAnimation {
+  element: Element
+  frames: Keyframe[]
+  options: KeyframeAnimationOptions
+  finish: () => void
+  cancel: ReturnType<typeof vi.fn>
+}
+
+let root: Root
+let host: HTMLDivElement
+let pending: PendingAnimation[]
+let frame: FrameRequestCallback | undefined
+let enterViewport: () => void
+let motionChange: () => void
+let reducedMotion: boolean
+const onComplete = vi.fn()
+const originalAnimate = Object.getOwnPropertyDescriptor(Element.prototype, 'animate')
+const originalRangeBounds = Object.getOwnPropertyDescriptor(
+  Range.prototype,
+  'getBoundingClientRect'
+)
+
+beforeEach(() => {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  pending = []
+  frame = undefined
+  reducedMotion = false
+  onComplete.mockClear()
+  vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => {
+    frame = callback
+    return 1
+  })
+  vi.stubGlobal('cancelAnimationFrame', () => {
+    frame = undefined
+  })
+  vi.stubGlobal('matchMedia', () => ({
+    get matches() {
+      return reducedMotion
+    },
+    addEventListener: (_event: string, callback: () => void) => {
+      motionChange = callback
+    },
+    removeEventListener: vi.fn(),
+  }))
+  vi.stubGlobal(
+    'IntersectionObserver',
+    class {
+      constructor(callback: IntersectionObserverCallback) {
+        enterViewport = () =>
+          callback(
+            [{ isIntersecting: true } as IntersectionObserverEntry],
+            this as IntersectionObserver
+          )
+      }
+      observe = vi.fn()
+      disconnect = vi.fn()
+    }
+  )
+  vi.stubGlobal('ResizeObserver', undefined)
+  vi.spyOn(Element.prototype, 'getBoundingClientRect').mockImplementation(function (this: Element) {
+    if (this.matches('svg[data-test-icon]')) return new DOMRect(24, 32, 16, 16)
+    if (this.matches('[data-preview-composer]')) return new DOMRect(220, 180, 320, 80)
+    if (this.matches('textarea')) return new DOMRect(232, 192, 296, 32)
+    if (this.matches('[data-test-workspace]')) return new DOMRect(180, 8, 412, 384)
+    return new DOMRect(0, 0, 600, 400)
+  })
+  Object.defineProperty(Range.prototype, 'getBoundingClientRect', {
+    configurable: true,
+    value: vi.fn(() => new DOMRect(48, 32, 80, 16)),
+  })
+  const readComputedStyle = window.getComputedStyle
+  vi.spyOn(window, 'getComputedStyle').mockImplementation((element, pseudoElement) => {
+    const style = readComputedStyle(element, pseudoElement)
+    if (element instanceof SVGElement) {
+      Object.defineProperties(style, {
+        fill: { value: element.getAttribute('fill') ?? 'none' },
+        stroke: { value: element.getAttribute('stroke') ?? 'none' },
+        color: { value: '#737373' },
+        strokeWidth: { value: '1' },
+      })
+    }
+    return style
+  })
+  Object.defineProperty(Element.prototype, 'animate', {
+    configurable: true,
+    value(this: Element, frames: Keyframe[], options: KeyframeAnimationOptions) {
+      let finish = () => {}
+      const finished = new Promise<void>((resolve) => {
+        finish = resolve
+      })
+      const cancel = vi.fn(() => ({
+        contentHidden: host.querySelector('[data-preview-state] > .opacity-0') !== null,
+        contentInert: host.querySelector('[data-preview-state] > [inert]') !== null,
+        overlayMounted: host.querySelector('[data-preview-state] > svg') !== null,
+      }))
+      pending.push({ element: this, frames, options, finish, cancel })
+      return { finished, cancel }
+    },
+  })
+  host = document.createElement('div')
+  document.body.append(host)
+  root = createRoot(host)
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  host.remove()
+  vi.restoreAllMocks()
+  vi.unstubAllGlobals()
+  if (originalAnimate) Object.defineProperty(Element.prototype, 'animate', originalAnimate)
+  else Reflect.deleteProperty(Element.prototype, 'animate')
+  if (originalRangeBounds)
+    Object.defineProperty(Range.prototype, 'getBoundingClientRect', originalRangeBounds)
+  else Reflect.deleteProperty(Range.prototype, 'getBoundingClientRect')
+})
+
+function mount(withGraphics = false) {
+  act(() => {
+    root.render(
+      <HeroPlatformIntro onComplete={onComplete}>
+        {withGraphics && (
+          <div data-preview-sidebar=''>
+            <div>
+              <div>
+                <svg data-test-icon='sidebar' viewBox='0 0 16 16' aria-hidden='true'>
+                  <path d='M 2 8 L 8 2 L 14 8' fill='none' stroke='currentColor' />
+                </svg>
+                <span>Workspace</span>
+              </div>
+              <div>
+                <span>Morgan</span>
+              </div>
+            </div>
+          </div>
+        )}
+        <div data-preview-outline='frame' data-test-workspace=''>
+          <button type='button'>Preview control</button>
+          {withGraphics && (
+            <div data-preview-outline='frame' data-preview-composer=''>
+              <span data-preview-skeleton-label=''>What should we get done?</span>
+              <textarea aria-label='Ask Sim' />
+              <svg data-test-icon='composer' viewBox='0 0 16 16' aria-hidden='true'>
+                <path d='M 3 3 L 13 8 L 3 13 Z' fill='currentColor' stroke='none' />
+              </svg>
+            </div>
+          )}
+        </div>
+      </HeroPlatformIntro>
+    )
+  })
+}
+
+function beginDrawing() {
+  act(() => enterViewport())
+  act(() => frame?.(0))
+}
+
+function state() {
+  return host.querySelector('[data-preview-state]')?.getAttribute('data-preview-state')
+}
+
+function animationFor(element: Element | null | undefined) {
+  const animation = pending.find((candidate) => candidate.element === element)
+  if (!animation) throw new Error('Expected an animation for the preview element')
+  return animation
+}
+
+function startsAt(animation: PendingAnimation) {
+  return Number(animation.options.delay ?? 0)
+}
+
+function endsAt(animation: PendingAnimation) {
+  return startsAt(animation) + Number(animation.options.duration)
+}
+
+describe('HeroPlatformIntro', () => {
+  it('waits for visibility and finishes the chrome fade before enabling controls or starting chat', async () => {
+    mount()
+    expect(state()).toBe('waiting')
+    expect(pending).toHaveLength(0)
+    expect(host.querySelector('[inert]')).not.toBeNull()
+    beginDrawing()
+    expect(state()).toBe('drawing')
+    expect(onComplete).not.toHaveBeenCalled()
+    expect(host.querySelector('svg rect[pathLength="1"]')).not.toBeNull()
+    await act(async () =>
+      pending.find((animation) => animation.element.hasAttribute('inert'))?.finish()
+    )
+    expect(state()).toBe('ready')
+    expect(host.querySelector('[inert]')).toBeNull()
+    expect(host.querySelector('svg')).toBeNull()
+    expect(onComplete).toHaveBeenCalledExactlyOnceWith(false)
+    act(() => enterViewport())
+    expect(onComplete).toHaveBeenCalledTimes(1)
+  })
+
+  it('draws the frame and sidebar before the composer, then waits for all drawing before revealing content', () => {
+    mount(true)
+    beginDrawing()
+    const overlay = host.querySelector('[data-preview-state] > svg')
+    const outlines = overlay?.querySelectorAll('g:first-child > rect')
+    const outerFrame = animationFor(outlines?.[0])
+    const workspaceFrame = animationFor(outlines?.[1])
+    const composerFrame = animationFor(outlines?.[2])
+    const sidebarIcon = animationFor(overlay?.querySelector('[data-test-icon="sidebar"] path'))
+    const composerIcon = animationFor(overlay?.querySelector('[data-test-icon="composer"] path'))
+    const content = animationFor(host.querySelector('[data-preview-state] > div'))
+    const overlayFade = animationFor(overlay)
+
+    expect(startsAt(outerFrame)).toBeLessThan(startsAt(workspaceFrame))
+    expect(startsAt(workspaceFrame)).toBeLessThan(startsAt(sidebarIcon))
+    expect(endsAt(sidebarIcon)).toBeLessThanOrEqual(startsAt(composerFrame))
+    expect(startsAt(composerFrame)).toBeLessThan(startsAt(composerIcon))
+    for (const animation of pending) {
+      if (animation === content || animation === overlayFade) continue
+      expect(endsAt(animation)).toBeLessThanOrEqual(startsAt(content))
+    }
+    expect(overlayFade.options).toEqual(content.options)
+    expect(onComplete).not.toHaveBeenCalled()
+  })
+
+  it('draws filled icons before filling them without competing animations on their properties', () => {
+    mount(true)
+    beginDrawing()
+    const overlay = host.querySelector('[data-preview-state] > svg')
+    const icons = overlay?.querySelectorAll('[data-preview-icons] path')
+    expect(icons).toHaveLength(2)
+    for (const icon of icons ?? []) {
+      expect(pending.filter((animation) => animation.element === icon)).toHaveLength(1)
+      expect(icon.getAttribute('stroke-dashoffset')).toBe('1')
+      expect(icon.getAttribute('fill-opacity')).toBe('0')
+    }
+    const filled = animationFor(overlay?.querySelector('[data-test-icon="composer"] path'))
+    const strokeComplete = filled.frames.findIndex((frame) => frame.strokeDashoffset === 0)
+    const fillVisible = filled.frames.findIndex((frame) => Number(frame.fillOpacity) > 0)
+    expect(strokeComplete).toBeGreaterThan(0)
+    expect(fillVisible).toBeGreaterThan(strokeComplete)
+    expect(filled.frames[strokeComplete].fillOpacity).toBe(0)
+    expect(filled.frames[strokeComplete].offset).toBeGreaterThan(0)
+    expect(filled.frames[strokeComplete].offset).toBeLessThan(1)
+    const outlined = animationFor(overlay?.querySelector('[data-test-icon="sidebar"] path'))
+    expect(outlined.frames.every((frame) => frame.fillOpacity === 0)).toBe(true)
+  })
+
+  it('reveals skeleton bars once without brightness reversals before the shared handoff', () => {
+    mount(true)
+    beginDrawing()
+    const skeletons = host.querySelectorAll('[data-preview-skeleton] rect')
+    expect(skeletons.length).toBeGreaterThan(0)
+    for (const bar of skeletons) {
+      const animation = animationFor(bar)
+      const opacity = animation.frames.map((frame) => Number(frame.opacity))
+      expect(opacity[0]).toBe(0)
+      expect(opacity.at(-1)).toBeGreaterThan(0)
+      expect(opacity.every((value, index) => index === 0 || value >= opacity[index - 1])).toBe(true)
+    }
+  })
+
+  it('keeps final animation styles until the real content is visible and the overlay has unmounted', async () => {
+    mount(true)
+    beginDrawing()
+    const reveal = animationFor(host.querySelector('[data-preview-state] > div'))
+    expect(pending.every((animation) => animation.cancel.mock.calls.length === 0)).toBe(true)
+    await act(async () => reveal.finish())
+    expect(state()).toBe('ready')
+    for (const animation of pending) {
+      expect(animation.cancel).toHaveBeenCalledTimes(1)
+      expect(animation.cancel.mock.results[0].value).toEqual({
+        contentHidden: false,
+        contentInert: false,
+        overlayMounted: false,
+      })
+    }
+    expect(onComplete).toHaveBeenCalledExactlyOnceWith(false)
+  })
+
+  it('settles safely after a layout resize without replaying or completing twice', async () => {
+    let resize: (() => void) | undefined
+    vi.stubGlobal(
+      'ResizeObserver',
+      class {
+        constructor(callback: ResizeObserverCallback) {
+          resize = () => callback([], this as ResizeObserver)
+        }
+        observe = vi.fn()
+        disconnect = vi.fn()
+      }
+    )
+    mount(true)
+    beginDrawing()
+    act(() => resize?.())
+    expect(state()).toBe('drawing')
+    const preview = host.querySelector('[data-preview-state]')
+    if (!preview) throw new Error('Expected the platform preview')
+    vi.spyOn(preview, 'getBoundingClientRect').mockReturnValue(new DOMRect(0, 0, 800, 400))
+    act(() => resize?.())
+    expect(state()).toBe('ready')
+    expect(host.querySelector('[inert]')).toBeNull()
+    for (const animation of pending) {
+      expect(animation.cancel.mock.results[0].value).toEqual({
+        contentHidden: false,
+        contentInert: false,
+        overlayMounted: false,
+      })
+    }
+    await act(async () => pending.forEach((animation) => animation.finish()))
+    act(() => enterViewport())
+    expect(onComplete).toHaveBeenCalledExactlyOnceWith(false)
+  })
+
+  it('waits for the painting to decode before drawing the platform', async () => {
+    const stage = document.createElement('div')
+    stage.dataset.previewStage = ''
+    host.before(stage)
+    stage.append(host)
+    const background = document.createElement('img')
+    background.dataset.previewBackground = ''
+    Object.defineProperty(background, 'complete', { value: false })
+    let loaded = () => {}
+    background.decode = () =>
+      new Promise<void>((resolve) => {
+        loaded = resolve
+      })
+    stage.append(background)
+    mount()
+    beginDrawing()
+    expect(state()).toBe('waiting')
+    expect(pending).toHaveLength(0)
+    await act(async () => loaded())
+    act(() => frame?.(0))
+    expect(state()).toBe('drawing')
+    expect(onComplete).not.toHaveBeenCalled()
+    stage.before(host)
+    stage.remove()
+  })
+
+  it('shows the completed preview immediately when reduced motion is enabled', () => {
+    reducedMotion = true
+    mount()
+    expect(state()).toBe('ready')
+    expect(pending).toHaveLength(0)
+    expect(host.querySelector('[inert]')).toBeNull()
+    expect(onComplete).toHaveBeenCalledExactlyOnceWith(true)
+  })
+
+  it('settles immediately if reduced motion is enabled during the drawing', async () => {
+    mount()
+    beginDrawing()
+    act(() => {
+      reducedMotion = true
+      motionChange()
+    })
+    expect(state()).toBe('ready')
+    expect(pending.every((animation) => animation.cancel.mock.calls.length > 0)).toBe(true)
+    await act(async () => pending.forEach((animation) => animation.finish()))
+    expect(onComplete).toHaveBeenCalledExactlyOnceWith(true)
+  })
+
+  it('cancels the entrance on unmount without starting the chat', async () => {
+    mount()
+    beginDrawing()
+    act(() => root.unmount())
+    await act(async () => pending.forEach((animation) => animation.finish()))
+    expect(pending.every((animation) => animation.cancel.mock.calls.length > 0)).toBe(true)
+    expect(onComplete).not.toHaveBeenCalled()
+  })
+
+  it('falls back to the finished preview when Web Animations are unavailable', () => {
+    Reflect.deleteProperty(Element.prototype, 'animate')
+    mount()
+    expect(state()).toBe('ready')
+    expect(onComplete).toHaveBeenCalledExactlyOnceWith(true)
+  })
+})
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-platform-intro/hero-platform-intro.tsx b/apps/sim/app/(landing)/components/hero/components/hero-platform-intro/hero-platform-intro.tsx
new file mode 100644
index 00000000000..9290d47bad3
--- /dev/null
+++ b/apps/sim/app/(landing)/components/hero/components/hero-platform-intro/hero-platform-intro.tsx
@@ -0,0 +1,42 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import { cn } from '@sim/emcn'
+import { usePlatformIntro } from '@/app/(landing)/components/hero/components/hero-platform-intro/use-platform-intro'
+
+interface HeroPlatformIntroProps {
+  children: ReactNode
+  onComplete: (reducedMotion: boolean) => void
+}
+
+/** Draws the mounted shell before exposing controls and starting the Mothership exchange. */
+export function HeroPlatformIntro({ children, onComplete }: HeroPlatformIntroProps) {
+  const { rootRef, contentRef, overlayRef, phase } = usePlatformIntro({ onComplete })
+  const ready = phase === 'ready'
+
+  return (
+    <div
+      ref={rootRef}
+      className='absolute inset-0'
+      data-preview-entering={ready ? undefined : ''}
+      data-preview-state={phase}
+      aria-busy={!ready}
+    >
+      <div
+        ref={contentRef}
+        className={cn('absolute inset-0', !ready && 'opacity-0 motion-reduce:opacity-100')}
+        inert={!ready}
+        aria-hidden={!ready}
+      >
+        {children}
+      </div>
+      {!ready && (
+        <svg
+          ref={overlayRef}
+          aria-hidden='true'
+          className='-inset-px pointer-events-none absolute size-[calc(100%+2px)] text-[var(--text-icon)] motion-reduce:hidden'
+        />
+      )}
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-platform-intro/index.ts b/apps/sim/app/(landing)/components/hero/components/hero-platform-intro/index.ts
new file mode 100644
index 00000000000..7956763fbbb
--- /dev/null
+++ b/apps/sim/app/(landing)/components/hero/components/hero-platform-intro/index.ts
@@ -0,0 +1 @@
+export { HeroPlatformIntro } from './hero-platform-intro'
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-platform-intro/use-platform-intro.ts b/apps/sim/app/(landing)/components/hero/components/hero-platform-intro/use-platform-intro.ts
new file mode 100644
index 00000000000..9f31bb38b68
--- /dev/null
+++ b/apps/sim/app/(landing)/components/hero/components/hero-platform-intro/use-platform-intro.ts
@@ -0,0 +1,112 @@
+'use client'
+
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { drawPlatformPreview } from '@/app/(landing)/components/hero/components/hero-platform-intro/draw-platform-preview'
+
+type IntroPhase = 'waiting' | 'drawing' | 'ready'
+
+interface PlatformIntroOptions {
+  onComplete: (reducedMotion: boolean) => void
+}
+
+/** One entrance on first visibility; never replays after interaction, theme changes, or resizing. */
+export function usePlatformIntro({ onComplete }: PlatformIntroOptions) {
+  const rootRef = useRef<HTMLDivElement>(null)
+  const contentRef = useRef<HTMLDivElement>(null)
+  const overlayRef = useRef<SVGSVGElement>(null)
+  const finishedRef = useRef(false)
+  const animationsRef = useRef<Animation[]>([])
+  const [phase, setPhase] = useState<IntroPhase>('waiting')
+
+  useLayoutEffect(() => {
+    if (phase !== 'ready') return
+    animationsRef.current.forEach((animation) => animation.cancel())
+    animationsRef.current = []
+  }, [phase])
+
+  useEffect(() => {
+    const root = rootRef.current
+    const content = contentRef.current
+    const overlay = overlayRef.current
+    if (!root || !content || !overlay || finishedRef.current) return
+    const media = window.matchMedia('(prefers-reduced-motion: reduce)')
+    const animations: Animation[] = []
+    animationsRef.current = animations
+    let cancelled = false
+    let started = false
+    let frame = 0
+    let observer: IntersectionObserver | undefined
+    let resizeObserver: ResizeObserver | undefined
+
+    const finish = (reducedMotion: boolean) => {
+      if (cancelled || finishedRef.current) return
+      finishedRef.current = true
+      observer?.disconnect()
+      resizeObserver?.disconnect()
+      cancelAnimationFrame(frame)
+      setPhase('ready')
+      onComplete(reducedMotion)
+    }
+    const draw = () => {
+      if (finishedRef.current || cancelled) return
+      frame = requestAnimationFrame(() => {
+        if (cancelled || finishedRef.current) return
+        setPhase('drawing')
+        const reveal = drawPlatformPreview(root, content, overlay, animations)
+        void reveal.finished.then(
+          () => finish(false),
+          () => undefined
+        )
+        const { width, height } = root.getBoundingClientRect()
+        if (typeof ResizeObserver !== 'undefined') {
+          resizeObserver = new ResizeObserver(() => {
+            const bounds = root.getBoundingClientRect()
+            if (Math.abs(bounds.width - width) > 1 || Math.abs(bounds.height - height) > 1)
+              finish(false)
+          })
+          resizeObserver.observe(root)
+        }
+      })
+    }
+    const begin = () => {
+      if (started || finishedRef.current || cancelled) return
+      started = true
+      observer?.disconnect()
+      const background = root
+        .closest('[data-preview-stage]')
+        ?.querySelector<HTMLImageElement>('[data-preview-background]')
+      if (background && !background.complete) {
+        void background.decode().then(draw, draw)
+      } else draw()
+    }
+    const syncMotionPreference = () => {
+      if (media.matches || typeof content.animate !== 'function') finish(true)
+    }
+
+    syncMotionPreference()
+    if (!finishedRef.current) {
+      if (typeof IntersectionObserver === 'undefined') begin()
+      else {
+        observer = new IntersectionObserver(
+          (entries) => {
+            if (entries.some((entry) => entry.isIntersecting)) begin()
+          },
+          { threshold: 0.15 }
+        )
+        observer.observe(root)
+      }
+    }
+    media.addEventListener('change', syncMotionPreference)
+    return () => {
+      cancelled = true
+      observer?.disconnect()
+      resizeObserver?.disconnect()
+      media.removeEventListener('change', syncMotionPreference)
+      cancelAnimationFrame(frame)
+      animations.forEach((animation) => animation.cancel())
+      overlay.replaceChildren()
+    }
+  }, [onComplete])
+
+  return { rootRef, contentRef, overlayRef, phase }
+}
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-platform-loop-mount.tsx b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-platform-loop-mount.tsx
new file mode 100644
index 00000000000..0889fc937d6
--- /dev/null
+++ b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-platform-loop-mount.tsx
@@ -0,0 +1,17 @@
+'use client'
+
+import dynamic from 'next/dynamic'
+
+/** Loads the interactive demo independently of the server-rendered hero copy and artwork. */
+const HeroPlatformLoop = dynamic(
+  () =>
+    import('@/app/(landing)/components/hero/components/hero-platform-loop/hero-platform-loop').then(
+      (mod) => mod.HeroPlatformLoop
+    ),
+  { ssr: false }
+)
+
+/** Client mount for the hero's product loop; keeps {@link HeroPlatformStage} a Server Component. */
+export function HeroPlatformLoopMount() {
+  return <HeroPlatformLoop />
+}
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-platform-loop.test.tsx b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-platform-loop.test.tsx
new file mode 100644
index 00000000000..64c296187a5
--- /dev/null
+++ b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-platform-loop.test.tsx
@@ -0,0 +1,324 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { HeroPlatformLoop } from '@/app/(landing)/components/hero/components/hero-platform-loop/hero-platform-loop'
+import { DEFAULT_USER_MESSAGE } from '@/app/(landing)/components/hero/components/hero-platform-loop/preview-chat-content'
+
+interface ChatProps {
+  phase: string
+  composerValue: string
+  userMessage: string
+  showWelcome: boolean
+  isSending: boolean
+  onStopGeneration: () => void
+  onComposerFocus: () => void
+  onComposerValueChange: (value: string) => void
+  onSubmit: () => void
+}
+
+let chat: ChatProps
+let completeIntro: (reducedMotion: boolean) => void
+let builtCount: number
+let runWorkflow: () => void
+
+vi.mock('@sim/emcn', () => ({
+  cn: (...values: Array<string | false | undefined>) => values.filter(Boolean).join(' '),
+  Button: ({ children }: { children: ReactNode }) => <button type='button'>{children}</button>,
+  Tooltip: {
+    Root: ({ children }: { children: ReactNode }) => children,
+    Trigger: ({ children }: { children: ReactNode }) => children,
+    Content: () => null,
+  },
+}))
+vi.mock('@sim/emcn/icons', () => ({ PanelLeft: () => null }))
+vi.mock('@/hooks/use-drag-resize', () => ({
+  useDragResize: () => ({ handlePointerDown: vi.fn() }),
+}))
+vi.mock('@/app/(landing)/components/shared/hero-loop-shell', () => ({
+  HeroLoopShell: ({ children }: { children: ReactNode }) => children,
+}))
+vi.mock('@/app/(landing)/components/hero/components/hero-platform-intro', () => ({
+  HeroPlatformIntro: ({
+    children,
+    onComplete,
+  }: {
+    children: ReactNode
+    onComplete: typeof completeIntro
+  }) => {
+    completeIntro = onComplete
+    return children
+  },
+}))
+vi.mock('@/app/(landing)/components/hero/components/hero-chat-loop', () => ({
+  HeroChatLoop: (props: ChatProps) => {
+    chat = props
+    return null
+  },
+}))
+vi.mock(
+  '@/app/(landing)/components/hero/components/hero-platform-loop/hero-resource-panel',
+  () => ({
+    HeroResourcePanel: (props: { builtCount: number; onRunWorkflow: () => void }) => {
+      builtCount = props.builtCount
+      runWorkflow = props.onRunWorkflow
+      return null
+    },
+  })
+)
+vi.mock('@/app/(landing)/components/hero/components/hero-platform-loop/stage-data', () => ({
+  STAGE_BLOCKS: Array.from({ length: 6 }, (_, id) => ({ id })),
+}))
+
+let root: Root
+let host: HTMLDivElement
+let reducedMotion: boolean
+let motionListeners: Set<() => void>
+
+beforeEach(() => {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  vi.useFakeTimers({
+    toFake: ['setTimeout', 'clearTimeout', 'setInterval', 'clearInterval', 'performance'],
+  })
+  reducedMotion = false
+  motionListeners = new Set()
+  vi.stubGlobal('matchMedia', () => ({
+    get matches() {
+      return reducedMotion
+    },
+    addEventListener: (_event: string, callback: () => void) => motionListeners.add(callback),
+    removeEventListener: (_event: string, callback: () => void) => motionListeners.delete(callback),
+  }))
+  host = document.createElement('div')
+  document.body.append(host)
+  root = createRoot(host)
+  act(() => root.render(<HeroPlatformLoop />))
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  host.remove()
+  vi.useRealTimers()
+  vi.unstubAllGlobals()
+})
+
+function advance(ms: number) {
+  act(() => vi.advanceTimersByTime(ms))
+}
+
+function panel() {
+  return host.querySelector('[data-resource-open]')
+}
+
+describe('HeroPlatformLoop opening', () => {
+  it('thinks and dispatches before showing agent activity, opening the workflow, and building it', () => {
+    expect(chat.phase).toBe('idle')
+    expect(chat.showWelcome).toBe(true)
+    expect(panel()?.getAttribute('data-resource-open')).toBe('false')
+    expect(panel()?.hasAttribute('inert')).toBe(true)
+    advance(10_000)
+    expect(chat.composerValue).toBe('')
+
+    act(() => completeIntro(false))
+    advance(1_000)
+    expect(chat.phase).toBe('compose')
+    expect(chat.composerValue.length).toBeGreaterThan(0)
+    expect(DEFAULT_USER_MESSAGE.startsWith(chat.composerValue)).toBe(true)
+    expect(panel()?.getAttribute('data-resource-open')).toBe('false')
+
+    advance(3_000)
+    expect(chat.phase).toBe('user')
+    expect(chat.composerValue).toBe('')
+    expect(chat.userMessage).toBe(DEFAULT_USER_MESSAGE)
+    advance(319)
+    expect(chat.phase).toBe('user')
+    advance(1)
+    expect(chat.phase).toBe('thinking')
+    expect(chat.isSending).toBe(true)
+    advance(3_549)
+    expect(chat.phase).toBe('thinking')
+    expect(builtCount).toBe(0)
+    expect(panel()?.getAttribute('data-resource-open')).toBe('false')
+    advance(1)
+    expect(chat.phase).toBe('dispatching')
+    advance(650)
+    expect(chat.phase).toBe('building')
+    expect(chat.isSending).toBe(true)
+    expect(panel()?.getAttribute('data-resource-open')).toBe('false')
+    advance(600)
+    expect(panel()?.getAttribute('data-resource-open')).toBe('true')
+    expect(panel()?.hasAttribute('inert')).toBe(false)
+    expect(builtCount).toBe(0)
+    advance(550)
+    expect(builtCount).toBe(1)
+    advance(4_000)
+    expect(builtCount).toBe(6)
+    expect(chat.phase).toBe('reply')
+    expect(chat.isSending).toBe(false)
+  })
+
+  it('lets a visitor take over typing and submit their own prompt', () => {
+    act(() => completeIntro(false))
+    advance(1_000)
+    act(() => chat.onComposerFocus())
+    const pausedPrompt = chat.composerValue
+    advance(10_000)
+    expect(chat.phase).toBe('idle')
+    expect(chat.composerValue).toBe(pausedPrompt)
+
+    act(() => chat.onComposerValueChange('Build a pipeline report'))
+    advance(10_000)
+    expect(chat.composerValue).toBe('Build a pipeline report')
+    expect(panel()?.getAttribute('data-resource-open')).toBe('false')
+    act(() => chat.onSubmit())
+    expect(chat.phase).toBe('user')
+    expect(chat.userMessage).toBe('Build a pipeline report')
+    advance(1_200)
+    expect(chat.phase).toBe('thinking')
+    expect(panel()?.getAttribute('data-resource-open')).toBe('false')
+    advance(3_920)
+    expect(panel()?.getAttribute('data-resource-open')).toBe('true')
+  })
+
+  it('cancels automatic typing when a suggested prompt replaces the composer value', () => {
+    act(() => completeIntro(false))
+    advance(1_000)
+    act(() => chat.onComposerValueChange('Post deal alerts to #sales'))
+    advance(10_000)
+    expect(chat.phase).toBe('idle')
+    expect(chat.composerValue).toBe('Post deal alerts to #sales')
+    expect(panel()?.getAttribute('data-resource-open')).toBe('false')
+  })
+
+  it('shows the finished preview without typing when the entrance reports reduced motion', () => {
+    act(() => completeIntro(true))
+    expect(chat.phase).toBe('reply')
+    expect(chat.composerValue).toBe('')
+    expect(builtCount).toBe(6)
+    expect(panel()?.getAttribute('data-resource-open')).toBe('true')
+    expect(vi.getTimerCount()).toBe(0)
+  })
+
+  it('settles the preview when reduced motion is enabled during typing', () => {
+    act(() => completeIntro(false))
+    advance(1_000)
+    act(() => {
+      reducedMotion = true
+      motionListeners.forEach((listener) => listener())
+    })
+    expect(chat.phase).toBe('reply')
+    expect(chat.composerValue).toBe('')
+    expect(builtCount).toBe(6)
+    expect(panel()?.getAttribute('data-resource-open')).toBe('true')
+    expect(vi.getTimerCount()).toBe(0)
+    expect(motionListeners.size).toBe(0)
+  })
+
+  it('cancels the pending thinking and build sequence when generation is stopped', () => {
+    act(() => chat.onComposerValueChange('Build a pipeline report'))
+    act(() => chat.onSubmit())
+    advance(1_000)
+    expect(chat.phase).toBe('thinking')
+    act(() => chat.onStopGeneration())
+    expect(chat.isSending).toBe(false)
+    expect(vi.getTimerCount()).toBe(0)
+    advance(10_000)
+    expect(chat.phase).toBe('reply')
+    expect(builtCount).toBe(6)
+  })
+
+  it('restarts thinking for a new submission without an old timer opening the workflow', () => {
+    act(() => chat.onComposerValueChange('Build a report'))
+    act(() => chat.onSubmit())
+    advance(1_000)
+    act(() => chat.onComposerValueChange('Enrich new leads'))
+    act(() => chat.onSubmit())
+    advance(3_000)
+    expect(chat.userMessage).toBe('Enrich new leads')
+    expect(chat.phase).toBe('thinking')
+    expect(builtCount).toBe(0)
+    expect(panel()?.getAttribute('data-resource-open')).toBe('false')
+    advance(1_520)
+    expect(chat.phase).toBe('building')
+  })
+
+  it('settles and clears delayed work when reduced motion is enabled during thinking', () => {
+    act(() => chat.onComposerValueChange('Build a report'))
+    act(() => chat.onSubmit())
+    advance(1_000)
+    act(() => {
+      reducedMotion = true
+      motionListeners.forEach((listener) => listener())
+    })
+    expect(chat.phase).toBe('reply')
+    expect(chat.isSending).toBe(false)
+    expect(builtCount).toBe(6)
+    expect(panel()?.getAttribute('data-resource-open')).toBe('true')
+    expect(vi.getTimerCount()).toBe(0)
+  })
+
+  it('cleans up automatic typing and motion listeners on unmount', () => {
+    act(() => completeIntro(false))
+    advance(1_000)
+    act(() => root.unmount())
+    expect(vi.getTimerCount()).toBe(0)
+    expect(motionListeners.size).toBe(0)
+  })
+
+  it('cancels a pending rerun before thinking through a new submission', () => {
+    act(() => completeIntro(true))
+    act(() => runWorkflow())
+    advance(400)
+    expect(builtCount).toBe(2)
+    act(() => chat.onComposerValueChange('Build a new report'))
+    act(() => chat.onSubmit())
+    advance(2_000)
+    expect(chat.phase).toBe('thinking')
+    expect(builtCount).toBe(0)
+    expect(panel()?.getAttribute('data-resource-open')).toBe('false')
+  })
+
+  it('cancels pending chat build timers when the visitor runs the workflow', () => {
+    act(() => chat.onComposerValueChange('Build a report'))
+    act(() => chat.onSubmit())
+    advance(1_000)
+    act(() => runWorkflow())
+    advance(5_000)
+    expect(chat.phase).toBe('reply')
+    expect(chat.isSending).toBe(false)
+    expect(builtCount).toBe(6)
+  })
+
+  it('cancels a pending rerun when generation is stopped', () => {
+    act(() => completeIntro(true))
+    act(() => runWorkflow())
+    advance(400)
+    act(() => chat.onStopGeneration())
+    expect(vi.getTimerCount()).toBe(0)
+    advance(1_000)
+    expect(builtCount).toBe(6)
+  })
+
+  it('settles reruns immediately when motion is reduced', () => {
+    reducedMotion = true
+    act(() => completeIntro(true))
+    act(() => runWorkflow())
+    expect(builtCount).toBe(6)
+    expect(vi.getTimerCount()).toBe(0)
+  })
+
+  it('settles an active rerun when reduced motion is enabled', () => {
+    act(() => completeIntro(true))
+    act(() => runWorkflow())
+    advance(400)
+    expect(builtCount).toBe(2)
+    act(() => {
+      reducedMotion = true
+      motionListeners.forEach((listener) => listener())
+    })
+    expect(builtCount).toBe(6)
+    expect(vi.getTimerCount()).toBe(0)
+  })
+})
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-platform-loop.tsx b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-platform-loop.tsx
index 51f23eb2ac0..1989c76f449 100644
--- a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-platform-loop.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-platform-loop.tsx
@@ -1,136 +1,366 @@
 'use client'
 
-import { useEffect, useState } from 'react'
-import { cn } from '@sim/emcn'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { Button, cn, Tooltip } from '@sim/emcn'
+import { PanelLeft } from '@sim/emcn/icons'
 import {
   HeroChatLoop,
   type HeroChatPhase,
 } from '@/app/(landing)/components/hero/components/hero-chat-loop'
-import { HeroWorkflowStage } from '@/app/(landing)/components/hero/components/hero-platform-loop/hero-workflow-stage'
+import { HeroPlatformIntro } from '@/app/(landing)/components/hero/components/hero-platform-intro'
+import {
+  type HeroResourceId,
+  HeroResourcePanel,
+} from '@/app/(landing)/components/hero/components/hero-platform-loop/hero-resource-panel'
+import { PREVIEW_BUILD_TIMING } from '@/app/(landing)/components/hero/components/hero-platform-loop/preview-build-timing'
+import {
+  DEFAULT_REPLY_MESSAGE,
+  DEFAULT_USER_MESSAGE,
+} from '@/app/(landing)/components/hero/components/hero-platform-loop/preview-chat-content'
 import { STAGE_BLOCKS } from '@/app/(landing)/components/hero/components/hero-platform-loop/stage-data'
 import { HeroLoopShell } from '@/app/(landing)/components/shared/hero-loop-shell'
 import {
   PREVIEW_SIDEBAR_CHATS,
   PREVIEW_SIDEBAR_WORKFLOWS,
 } from '@/app/(landing)/components/shared/sidebar-preview-content'
+import { useDragResize } from '@/hooks/use-drag-resize'
 
-/**
- * One pass of the synced loop, matching the REAL platform behavior: the chat
- * runs FULL-WIDTH (stage collapsed, exactly like `MothershipView`'s `w-0`
- * state); the user message lands and the Mothership starts thinking; the stage
- * pane SLIDES IN from the right (the real `w-1/2` + `border-l` width
- * transition); the workflow assembles block by block inside it; the reply
- * lands once the flow is built; the scene holds, fades, and restarts.
- */
-const PHASE_STARTS = { user: 500, thinking: 1400 } as const
-/** The stage pane starts sliding open here (during thinking). */
-const STAGE_OPEN_AT = 1900
-/** Block N (build order) pops in at BUILD_START + N * BUILD_STEP. */
-const BUILD_START = 2400
-const BUILD_STEP = 620
-const REPLY_AT = 6400
-const TOTAL_MS = 12_500
-const RESET_FADE_MS = 260
+const REPLY_AT =
+  PREVIEW_BUILD_TIMING.blockStartAt +
+  STAGE_BLOCKS.length * PREVIEW_BUILD_TIMING.blockStepMs +
+  PREVIEW_BUILD_TIMING.replyPauseMs
+const PROMPT_START_DELAY = 400
+const PROMPT_CHAR_MS = 24
+const PROMPT_HOLD_MS = 500
+const RESOURCE_RUN_STEP = 360
+const PREVIEW_PANE_MIN_WIDTH = 360
 
 /**
- * The homepage's live platform preview, rendered through the same shared shell
- * as every product and solutions hero so the sidebar never drifts between
- * landing surfaces. Inside, the layout mirrors `Home`: the
- * {@link HeroChatLoop} is a flex-1
- * `--bg` column; the {@link HeroWorkflowStage} pane animates `w-0 ↔ w-1/2`
- * with the real `MothershipView` width transition (200ms,
- * `cubic-bezier(0.25,0.1,0.25,1)`, `border-l` only while open), matching the
- * divider users see in the product.
- *
- * Both panes stay `pointer-events-none` (decorative, matching the hero's
- * `aria-hidden` frame) - blocks are static. Remounting the stage per cycle
- * (`key={cycleId}`) resets build state.
- *
- * Under `prefers-reduced-motion` the loop never starts: the finished exchange,
- * open stage, and fully-built workflow render statically.
+ * Native-scale product preview for the homepage. It composes the real Sim
+ * sidebar geometry, chat controls, resource tab strip, and embedded workflow
+ * presentation with isolated demo state, so visitors can use the preview
+ * without a session or access to workspace data. Below the desktop breakpoint,
+ * chat and resources share one pane; the resource header returns to chat.
  */
 export function HeroPlatformLoop() {
+  const previewContainerRef = useRef<HTMLDivElement>(null)
+  const resourcePaneRef = useRef<HTMLDivElement>(null)
   const [phase, setPhase] = useState<HeroChatPhase>('idle')
   const [stageOpen, setStageOpen] = useState(false)
+  const [isResizingStage, setIsResizingStage] = useState(false)
   const [builtCount, setBuiltCount] = useState(0)
-  const [fading, setFading] = useState(false)
   const [cycleId, setCycleId] = useState(0)
+  const [submissionId, setSubmissionId] = useState(0)
+  const [resourceRunId, setResourceRunId] = useState(0)
+  const [composerValue, setComposerValue] = useState('')
+  const [userMessage, setUserMessage] = useState(DEFAULT_USER_MESSAGE)
+  const [activeResourceId, setActiveResourceId] = useState<HeroResourceId | null>('workflow')
+  const [openResourceIds, setOpenResourceIds] = useState<HeroResourceId[]>(['workflow', 'table'])
+
+  const finishIntro = useCallback((reducedMotion: boolean) => {
+    if (reducedMotion) {
+      setPhase('reply')
+      setStageOpen(true)
+      setBuiltCount(STAGE_BLOCKS.length)
+      return
+    }
+    setPhase('compose')
+  }, [])
+
+  const { handlePointerDown: handleStageResizePointerDown } = useDragResize({
+    cursor: 'ew-resize',
+    cssVar: '--preview-resource-width',
+    getTarget: () => resourcePaneRef.current,
+    compute: (event) => {
+      const container = previewContainerRef.current
+      if (!container) return null
+
+      const rect = container.getBoundingClientRect()
+      const minWidth = Math.min(PREVIEW_PANE_MIN_WIDTH, rect.width / 2)
+      const maxWidth = Math.max(minWidth, rect.width - minWidth)
+      return Math.min(Math.max(rect.right - event.clientX, minWidth), maxWidth)
+    },
+    commit: (width) => {
+      previewContainerRef.current?.style.setProperty('--preview-resource-width', `${width}px`)
+    },
+    onStart: () => {
+      resourcePaneRef.current?.style.setProperty('transition', 'none')
+      setIsResizingStage(true)
+    },
+    onEnd: () => {
+      resourcePaneRef.current?.style.removeProperty('transition')
+      setIsResizingStage(false)
+    },
+  })
 
   useEffect(() => {
+    if (phase !== 'compose') return undefined
+
     const media = window.matchMedia('(prefers-reduced-motion: reduce)')
-    let timers: ReturnType<typeof setTimeout>[] = []
+    const startedAt = performance.now()
+    const sendAt =
+      PROMPT_START_DELAY + DEFAULT_USER_MESSAGE.length * PROMPT_CHAR_MS + PROMPT_HOLD_MS
+    const interval = setInterval(() => {
+      const elapsed = performance.now() - startedAt
+      const count = Math.max(0, Math.floor((elapsed - PROMPT_START_DELAY) / PROMPT_CHAR_MS))
+      setComposerValue(DEFAULT_USER_MESSAGE.slice(0, count))
+      if (elapsed < sendAt) return
+      clearInterval(interval)
+      setComposerValue('')
+      setPhase('user')
+      setSubmissionId((current) => current + 1)
+    }, PROMPT_CHAR_MS)
 
-    const clearScheduled = () => {
-      timers.forEach(clearTimeout)
-      timers = []
+    const syncMotionPreference = () => {
+      if (!media.matches) return
+      clearInterval(interval)
+      setComposerValue('')
+      setPhase('reply')
+      setStageOpen(true)
+      setBuiltCount(STAGE_BLOCKS.length)
+    }
+    syncMotionPreference()
+    media.addEventListener('change', syncMotionPreference)
+    return () => {
+      clearInterval(interval)
+      media.removeEventListener('change', syncMotionPreference)
     }
+  }, [phase])
 
-    const showFinished = () => {
-      clearScheduled()
-      setFading(false)
-      setPhase('reply')
+  useEffect(() => {
+    if (submissionId === 0) return undefined
+
+    const media = window.matchMedia('(prefers-reduced-motion: reduce)')
+    const timers: ReturnType<typeof setTimeout>[] = []
+    const settle = () => {
+      timers.forEach(clearTimeout)
       setStageOpen(true)
       setBuiltCount(STAGE_BLOCKS.length)
+      setPhase('reply')
+    }
+    const syncMotionPreference = () => {
+      if (media.matches) settle()
+    }
+    if (media.matches) {
+      settle()
+      return undefined
     }
 
-    const runCycle = () => {
-      setFading(false)
-      setPhase('idle')
-      setStageOpen(false)
-      setBuiltCount(0)
-      setCycleId((c) => c + 1)
-      timers = [
-        setTimeout(() => setPhase('user'), PHASE_STARTS.user),
-        setTimeout(() => setPhase('thinking'), PHASE_STARTS.thinking),
-        setTimeout(() => setStageOpen(true), STAGE_OPEN_AT),
-        ...STAGE_BLOCKS.map((_, i) =>
-          setTimeout(() => setBuiltCount(i + 1), BUILD_START + i * BUILD_STEP)
-        ),
-        setTimeout(() => setPhase('reply'), REPLY_AT),
-        setTimeout(() => setFading(true), TOTAL_MS - RESET_FADE_MS),
-        setTimeout(runCycle, TOTAL_MS),
-      ]
+    timers.push(
+      setTimeout(() => setPhase('thinking'), PREVIEW_BUILD_TIMING.thinkingAt),
+      setTimeout(() => setPhase('dispatching'), PREVIEW_BUILD_TIMING.dispatchAt),
+      setTimeout(() => setPhase('building'), PREVIEW_BUILD_TIMING.agentAt),
+      setTimeout(() => setStageOpen(true), PREVIEW_BUILD_TIMING.stageOpenAt),
+      ...STAGE_BLOCKS.map((_, index) =>
+        setTimeout(
+          () => setBuiltCount(index + 1),
+          PREVIEW_BUILD_TIMING.blockStartAt + index * PREVIEW_BUILD_TIMING.blockStepMs
+        )
+      ),
+      setTimeout(() => setPhase('reply'), REPLY_AT)
+    )
+    media.addEventListener('change', syncMotionPreference)
+    return () => {
+      timers.forEach(clearTimeout)
+      media.removeEventListener('change', syncMotionPreference)
     }
+  }, [submissionId])
 
+  useEffect(() => {
+    if (resourceRunId === 0) return undefined
+
+    const media = window.matchMedia('(prefers-reduced-motion: reduce)')
+    const timers: ReturnType<typeof setTimeout>[] = []
+    const settle = () => {
+      timers.forEach(clearTimeout)
+      setBuiltCount(STAGE_BLOCKS.length)
+    }
     const syncMotionPreference = () => {
-      clearScheduled()
-      if (media.matches) {
-        showFinished()
-        return
-      }
-      runCycle()
+      if (media.matches) settle()
+    }
+    if (media.matches) {
+      settle()
+      return undefined
     }
 
-    syncMotionPreference()
+    timers.push(
+      ...STAGE_BLOCKS.map((_, index) =>
+        setTimeout(() => setBuiltCount(index + 1), index * RESOURCE_RUN_STEP)
+      )
+    )
     media.addEventListener('change', syncMotionPreference)
     return () => {
+      timers.forEach(clearTimeout)
       media.removeEventListener('change', syncMotionPreference)
-      clearScheduled()
     }
-  }, [])
+  }, [resourceRunId])
+
+  const pausePrompt = () => {
+    if (phase === 'compose') setPhase('idle')
+  }
+
+  const updateComposer = (value: string) => {
+    pausePrompt()
+    setComposerValue(value)
+  }
+
+  const openResource = (id: HeroResourceId) => {
+    setOpenResourceIds((current) => (current.includes(id) ? current : [...current, id]))
+    setActiveResourceId(id)
+    setStageOpen(true)
+  }
+
+  const closeResource = (id: HeroResourceId) => {
+    const index = openResourceIds.indexOf(id)
+    if (index < 0) return
+
+    const next = openResourceIds.filter((resourceId) => resourceId !== id)
+    setOpenResourceIds(next)
+    if (activeResourceId === id) {
+      setActiveResourceId(next[Math.min(index, next.length - 1)] ?? null)
+    }
+  }
+
+  const submitMessage = (messageOverride?: string) => {
+    const message = (messageOverride ?? composerValue).trim()
+    if (!message) return
+
+    setUserMessage(message)
+    setComposerValue('')
+    setPhase('user')
+    setStageOpen(false)
+    setBuiltCount(0)
+    setResourceRunId(0)
+    setActiveResourceId('workflow')
+    setOpenResourceIds((current) =>
+      current.includes('workflow') ? current : [...current, 'workflow']
+    )
+    setCycleId((current) => current + 1)
+    setSubmissionId((current) => current + 1)
+  }
+
+  const stopGeneration = () => {
+    setPhase('reply')
+    openResource('workflow')
+    setBuiltCount(STAGE_BLOCKS.length)
+    setSubmissionId(0)
+    setResourceRunId(0)
+  }
+
+  const runWorkflow = () => {
+    openResource('workflow')
+    setPhase('reply')
+    setSubmissionId(0)
+    setBuiltCount(0)
+    setCycleId((current) => current + 1)
+    setResourceRunId((current) => current + 1)
+  }
+
+  const isSending = phase !== 'idle' && phase !== 'compose' && phase !== 'reply'
 
   return (
-    <HeroLoopShell chats={PREVIEW_SIDEBAR_CHATS} workflows={PREVIEW_SIDEBAR_WORKFLOWS}>
-      <div className='flex h-full w-full overflow-hidden rounded-[6px] border border-[var(--border)] bg-[var(--bg)]'>
-        <div className='relative h-full min-w-0 flex-1'>
-          <HeroChatLoop phase={phase} fading={fading} />
-        </div>
+    <HeroPlatformIntro onComplete={finishIntro}>
+      <HeroLoopShell
+        chats={PREVIEW_SIDEBAR_CHATS}
+        workflows={PREVIEW_SIDEBAR_WORKFLOWS}
+        mode='native'
+      >
         <div
-          className={cn(
-            'h-full shrink-0 overflow-hidden border-[var(--border)] bg-[var(--bg)] transition-[width,min-width,border-width] duration-200 [transition-timing-function:cubic-bezier(0.25,0.1,0.25,1)]',
-            stageOpen ? 'w-1/2 border-l' : 'w-0 min-w-0 border-l-0'
-          )}
+          ref={previewContainerRef}
+          data-preview-outline='frame'
+          className='relative flex h-full w-full overflow-hidden rounded-[6px] border border-[var(--border)] bg-[var(--bg)] [--preview-resource-width:50%]'
         >
+          <div className={cn('relative h-full min-w-0 flex-1', stageOpen && 'max-lg:hidden')}>
+            <HeroChatLoop
+              showWelcome
+              phase={phase}
+              fading={false}
+              userMessage={userMessage}
+              replyMessage={DEFAULT_REPLY_MESSAGE}
+              composerValue={composerValue}
+              isSending={isSending}
+              onComposerValueChange={updateComposer}
+              onComposerFocus={pausePrompt}
+              onOpenWorkflowResource={() => openResource('workflow')}
+              onFollowUpSelect={submitMessage}
+              onSubmit={() => submitMessage()}
+              onStopGeneration={stopGeneration}
+            />
+            {!stageOpen && (
+              <div className='absolute top-2 right-3 z-30'>
+                <Tooltip.Root>
+                  <Tooltip.Trigger asChild>
+                    <Button
+                      type='button'
+                      variant='ghost'
+                      size={null}
+                      onClick={() => openResource(activeResourceId ?? 'workflow')}
+                      className='size-[30px] rounded-[8px] p-0 hover-hover:bg-[var(--surface-active)]'
+                      aria-label='Expand resource view'
+                    >
+                      <PanelLeft className='-scale-x-100 size-[16px] text-[var(--text-icon)]' />
+                    </Button>
+                  </Tooltip.Trigger>
+                  <Tooltip.Content side='bottom'>Expand resource view</Tooltip.Content>
+                </Tooltip.Root>
+              </div>
+            )}
+          </div>
+
+          {stageOpen && (
+            <div className='relative z-20 w-0 flex-none max-lg:hidden'>
+              <div
+                className='absolute inset-y-0 left-[-4px] w-[8px] cursor-ew-resize touch-none hover-hover:[&>div]:bg-[var(--border)]'
+                onPointerDown={handleStageResizePointerDown}
+                role='separator'
+                aria-orientation='vertical'
+                aria-label='Resize resource panel'
+              >
+                <div
+                  className={cn(
+                    '-translate-x-1/2 pointer-events-none absolute inset-y-0 left-1/2 w-px bg-transparent transition-colors duration-100 [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
+                    isResizingStage && 'bg-[var(--border)]'
+                  )}
+                />
+              </div>
+            </div>
+          )}
+
           <div
+            ref={resourcePaneRef}
+            data-preview-outline={stageOpen ? 'left' : undefined}
+            data-preview-collapsed={stageOpen ? undefined : ''}
+            data-resource-open={stageOpen}
+            inert={!stageOpen}
+            aria-hidden={!stageOpen}
             className={cn(
-              'h-full w-full transition-opacity duration-300 ease-out',
-              fading ? 'opacity-0' : 'opacity-100'
+              'h-full shrink-0 overflow-hidden border-[var(--border)] bg-[var(--bg)] transition-[width,min-width,border-width] duration-[480ms] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
+              stageOpen
+                ? 'w-[var(--preview-resource-width)] border-l max-lg:w-full max-lg:border-l-0'
+                : 'w-0 min-w-0 border-l-0'
             )}
           >
-            <HeroWorkflowStage key={cycleId} builtCount={builtCount} />
+            <div
+              className={cn(
+                'h-full w-full transition-[transform,opacity] duration-[480ms] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
+                stageOpen ? 'translate-x-0 opacity-100' : 'translate-x-6 opacity-0'
+              )}
+            >
+              <HeroResourcePanel
+                activeId={activeResourceId}
+                builtCount={builtCount}
+                openIds={openResourceIds}
+                workflowKey={cycleId}
+                onActiveChange={setActiveResourceId}
+                onClose={() => setStageOpen(false)}
+                onCloseResource={closeResource}
+                onOpenResource={openResource}
+                onRunWorkflow={runWorkflow}
+              />
+            </div>
           </div>
         </div>
-      </div>
-    </HeroLoopShell>
+      </HeroLoopShell>
+    </HeroPlatformIntro>
   )
 }
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-resource-panel.tsx b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-resource-panel.tsx
new file mode 100644
index 00000000000..a5d484f3285
--- /dev/null
+++ b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-resource-panel.tsx
@@ -0,0 +1,279 @@
+'use client'
+
+import { type ComponentType, useState } from 'react'
+import {
+  Button,
+  cn,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  TabStrip,
+  type TabStripItem,
+  Tooltip,
+} from '@sim/emcn'
+import {
+  FileText,
+  PanelLeft,
+  PlayOutline,
+  Plus,
+  Table as TableIcon,
+  Workflow,
+} from '@sim/emcn/icons'
+import { HeroWorkflowStage } from '@/app/(landing)/components/hero/components/hero-platform-loop/hero-workflow-stage'
+import {
+  RESOURCE_HEADER_CLASSES,
+  RESOURCE_TAB_ICON_BUTTON_CLASS,
+  RESOURCE_TAB_ICON_CLASS,
+} from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls'
+
+export type HeroResourceId = 'workflow' | 'table' | 'brief'
+
+interface HeroResourceDefinition {
+  id: HeroResourceId
+  title: string
+  icon: ComponentType<{ className?: string }>
+}
+
+const HERO_RESOURCES: readonly HeroResourceDefinition[] = [
+  { id: 'workflow', title: 'Lead enrichment', icon: Workflow },
+  { id: 'table', title: 'Qualified leads', icon: TableIcon },
+  { id: 'brief', title: 'lead-enrichment-brief.md', icon: FileText },
+] as const
+
+const TABLE_ROWS = [
+  { id: 'northstar', lead: 'Maya Chen', company: 'Northstar', score: '94', status: 'Qualified' },
+  { id: 'arcadia', lead: 'Jon Bell', company: 'Arcadia', score: '88', status: 'Qualified' },
+  { id: 'hearth', lead: 'Priya Shah', company: 'Hearth', score: '79', status: 'Review' },
+  { id: 'lattice', lead: 'Noah Kim', company: 'Lattice', score: '72', status: 'Review' },
+] as const
+
+interface HeroResourcePanelProps {
+  activeId: HeroResourceId | null
+  builtCount: number
+  openIds: readonly HeroResourceId[]
+  workflowKey: number
+  onActiveChange: (id: HeroResourceId) => void
+  onClose: () => void
+  onCloseResource: (id: HeroResourceId) => void
+  onOpenResource: (id: HeroResourceId) => void
+  onRunWorkflow: () => void
+}
+
+function HeroTableResource() {
+  const [selectedId, setSelectedId] = useState<string | null>('northstar')
+
+  return (
+    <div className='flex h-full flex-col bg-[var(--bg)]'>
+      <div className='flex h-10 shrink-0 items-center border-[var(--border)] border-b px-4'>
+        <span className='text-[var(--text-body)] text-sm'>Qualified leads</span>
+        <span className='ml-auto text-[var(--text-muted)] text-caption'>4 rows</span>
+      </div>
+      <div className='grid grid-cols-[1.25fr_1fr_72px_96px] border-[var(--border)] border-b bg-[var(--surface-1)] px-4 py-2 text-[var(--text-muted)] text-caption'>
+        <span>Lead</span>
+        <span>Company</span>
+        <span>Score</span>
+        <span>Status</span>
+      </div>
+      <div className='min-h-0 flex-1 overflow-y-auto'>
+        {TABLE_ROWS.map((row) => (
+          <button
+            key={row.id}
+            type='button'
+            aria-pressed={selectedId === row.id}
+            onClick={() => setSelectedId(row.id)}
+            className={cn(
+              'grid w-full grid-cols-[1.25fr_1fr_72px_96px] items-center border-[var(--border)] border-b px-4 py-3 text-left text-sm transition-colors hover-hover:bg-[var(--surface-hover)]',
+              selectedId === row.id && 'bg-[var(--surface-active)]'
+            )}
+          >
+            <span className='truncate text-[var(--text-body)]'>{row.lead}</span>
+            <span className='truncate text-[var(--text-secondary)]'>{row.company}</span>
+            <span className='text-[var(--text-body)] tabular-nums'>{row.score}</span>
+            <span className='flex items-center gap-1.5 text-[var(--text-secondary)]'>
+              <span
+                className={cn(
+                  'size-1.5 rounded-full',
+                  row.status === 'Qualified' ? 'bg-[var(--brand-accent)]' : 'bg-[var(--text-muted)]'
+                )}
+              />
+              {row.status}
+            </span>
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function HeroFileResource() {
+  return (
+    <div className='h-full overflow-y-auto bg-[var(--bg)]'>
+      <article className='mx-auto max-w-[520px] px-8 py-10 max-lg:px-6'>
+        <div className='mb-8 flex items-center gap-2 text-[var(--text-muted)] text-caption'>
+          <FileText className='size-[14px] text-[var(--text-icon)]' />
+          Markdown
+          <span aria-hidden='true'>/</span>
+          Updated just now
+        </div>
+        <h2 className='text-[26px] text-[var(--text-primary)] leading-[1.15] tracking-[-0.015em]'>
+          Lead enrichment brief
+        </h2>
+        <p className='mt-4 text-[var(--text-secondary)] text-sm leading-6'>
+          Score every inbound signup against firmographic and engagement signals before routing
+          qualified leads to the sales team.
+        </p>
+        <div className='mt-8 border-[var(--border)] border-t pt-6'>
+          <h3 className='text-[var(--text-primary)] text-sm'>Qualification rules</h3>
+          <ul className='mt-3 list-disc space-y-2 pl-5 text-[var(--text-secondary)] text-sm leading-6'>
+            <li>Company size is at least 200 employees</li>
+            <li>Lead matches an active sales territory</li>
+            <li>Product intent score is above 70</li>
+          </ul>
+        </div>
+        <div className='mt-8 border-[var(--border)] border-t pt-6'>
+          <h3 className='text-[var(--text-primary)] text-sm'>Routing</h3>
+          <p className='mt-3 text-[var(--text-secondary)] text-sm leading-6'>
+            Post qualified leads to the sales channel and save the full enrichment record in the
+            Qualified leads table.
+          </p>
+        </div>
+      </article>
+    </div>
+  )
+}
+
+function resourceIcon(resource: HeroResourceDefinition) {
+  const Icon = resource.icon
+  return <Icon className='size-[16px] shrink-0 text-[var(--text-icon)]' />
+}
+
+/**
+ * Landing-safe version of the production Mothership resource panel. It uses
+ * the real floating TabStrip and resource-header geometry while keeping all
+ * data local to the public demo.
+ */
+export function HeroResourcePanel({
+  activeId,
+  builtCount,
+  openIds,
+  workflowKey,
+  onActiveChange,
+  onClose,
+  onCloseResource,
+  onOpenResource,
+  onRunWorkflow,
+}: HeroResourcePanelProps) {
+  const openResources = HERO_RESOURCES.filter((resource) => openIds.includes(resource.id))
+  const tabs: TabStripItem[] = openResources.map((resource) => ({
+    id: resource.id,
+    title: resource.title,
+    icon: resourceIcon(resource),
+    active: resource.id === activeId,
+  }))
+
+  const workflowActions =
+    activeId === 'workflow' ? (
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <Button
+            type='button'
+            variant='subtle'
+            onClick={onRunWorkflow}
+            className={RESOURCE_TAB_ICON_BUTTON_CLASS}
+            aria-label='Run workflow'
+          >
+            <PlayOutline className={RESOURCE_TAB_ICON_CLASS} />
+          </Button>
+        </Tooltip.Trigger>
+        <Tooltip.Content side='bottom'>Run workflow</Tooltip.Content>
+      </Tooltip.Root>
+    ) : null
+
+  return (
+    <div
+      className={cn('relative flex h-full flex-col bg-[var(--bg)]', RESOURCE_HEADER_CLASSES.layout)}
+    >
+      <TabStrip
+        tabs={tabs}
+        onSelect={(id) => onActiveChange(id as HeroResourceId)}
+        onClose={(id) => onCloseResource(id as HeroResourceId)}
+        variant='floating'
+        className={RESOURCE_HEADER_CLASSES.stripGeometry}
+        newTabControl={
+          <DropdownMenu>
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    type='button'
+                    variant='subtle'
+                    className={RESOURCE_TAB_ICON_BUTTON_CLASS}
+                    aria-label='Add resource'
+                  >
+                    <Plus className={RESOURCE_TAB_ICON_CLASS} />
+                  </Button>
+                </DropdownMenuTrigger>
+              </Tooltip.Trigger>
+              <Tooltip.Content side='bottom'>Add resource</Tooltip.Content>
+            </Tooltip.Root>
+            <DropdownMenuContent align='start' sideOffset={6}>
+              {HERO_RESOURCES.map((resource) => {
+                const Icon = resource.icon
+                return (
+                  <DropdownMenuItem key={resource.id} onSelect={() => onOpenResource(resource.id)}>
+                    <Icon className='size-[14px] text-[var(--text-icon)]' />
+                    {resource.title}
+                  </DropdownMenuItem>
+                )
+              })}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        }
+        endActions={workflowActions}
+      />
+
+      <div className='min-h-0 flex-1'>
+        {activeId === 'workflow' ? (
+          <HeroWorkflowStage key={workflowKey} builtCount={builtCount} interactive />
+        ) : activeId === 'table' ? (
+          <HeroTableResource />
+        ) : activeId === 'brief' ? (
+          <HeroFileResource />
+        ) : (
+          <div className='flex h-full flex-col items-center justify-center gap-3 text-center'>
+            <div className='flex size-9 items-center justify-center rounded-lg bg-[var(--surface-3)]'>
+              <Plus className='size-[16px] text-[var(--text-icon)]' />
+            </div>
+            <div>
+              <p className='text-[var(--text-body)] text-sm'>Open a resource</p>
+              <p className='mt-1 text-[var(--text-muted)] text-caption'>
+                Add a workflow, table, or file to this task.
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div
+        className={cn('z-30', RESOURCE_HEADER_CLASSES.overlay, RESOURCE_HEADER_CLASSES.endPosition)}
+      >
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <Button
+              type='button'
+              variant='ghost'
+              size={null}
+              onClick={onClose}
+              className="after:-translate-x-1/2 after:-translate-y-1/2 relative size-[var(--resource-header-toggle-size)] rounded-[8px] after:absolute after:top-1/2 after:left-1/2 after:size-[var(--resource-header-toggle-hit-size)] after:content-[''] hover-hover:bg-[var(--surface-active)]"
+              aria-label='Collapse resource view'
+            >
+              <PanelLeft className='-scale-x-100 size-[16px] text-[var(--text-icon)]' />
+            </Button>
+          </Tooltip.Trigger>
+          <Tooltip.Content side='bottom'>Collapse resource view</Tooltip.Content>
+        </Tooltip.Root>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-workflow-stage.tsx b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-workflow-stage.tsx
index 342e6652205..33073357457 100644
--- a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-workflow-stage.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-workflow-stage.tsx
@@ -1,8 +1,10 @@
+'use client'
+
 import { useMemo } from 'react'
 import { cn } from '@sim/emcn'
+import dynamic from 'next/dynamic'
 import { StageBlockCard } from '@/app/(landing)/components/hero/components/hero-platform-loop/stage-block-card'
 import {
-  blockHeight,
   handleAnchors,
   STAGE_BLOCKS,
   STAGE_CANVAS,
@@ -12,12 +14,26 @@ import {
 import {
   BLOCK_WIDTH,
   type BlockDef,
+  blockHeight,
 } from '@/app/(landing)/components/hero/components/hero-visual/workflow-data'
 import { ResponsiveDesignStage } from '@/app/(landing)/components/shared/responsive-design-stage'
 
 /** Breathing room between the canvas bounds and the card edges, in card px. */
 const STAGE_MARGIN = 20
 
+/**
+ * The interactive stage mounts React Flow and the production renderers. It is
+ * loaded on demand so the staged loops (and every page that renders them) never
+ * ship that graph; the homepage fetches it with the lazily mounted hero loop.
+ */
+const ProductionWorkflowStage = dynamic(
+  () =>
+    import(
+      '@/app/(landing)/components/hero/components/hero-platform-loop/production-workflow-stage'
+    ).then((mod) => mod.ProductionWorkflowStage),
+  { ssr: false }
+)
+
 interface HeroWorkflowStageProps {
   /** How many of the stage's blocks (in build order) are on canvas. */
   builtCount: number
@@ -27,46 +43,31 @@ interface HeroWorkflowStageProps {
   edges?: ReadonlyArray<readonly [string, string]>
   /** Design-space bounding box of the block layout. Defaults with them. */
   canvas?: { width: number; height: number }
-  /**
-   * Block to dress with the selection ring - graphite (`--text-secondary`)
-   * rather than the real canvas's blue, per the landing pages' grayscale
-   * language - the workflows hero uses this for its "being edited" beat.
-   * Off by default, so existing stages are unchanged.
-   */
+  /** Block to dress with the selection ring in the timed, non-interactive loops. */
   selectedId?: string
+  /** Mounts the shared production node and edge renderers in a real React Flow canvas. */
+  interactive?: boolean
 }
 
-/**
- * The hero window's live workflow canvas - the right-pane counterpart of the
- * chat loop. A fixed HTML design surface owns both the edge and block
- * coordinate systems, so drawing a line or revealing a block never changes
- * the canvas's measured scale. SVG renders only the native edge paths; block
- * cards stay in ordinary HTML to avoid WebKit's foreignObject compositing bugs.
- * Blocks pop in one by one as `builtCount` advances and edges stroke-draw once
- * both endpoints exist.
- *
- * Decorative and `aria-hidden` (via the parent frame), so blocks are NOT
- * draggable - `pointer-events-none`, matching the rest of the hero animation.
- *
- * Blocks reuse the hero-visual's {@link WorkflowBlockContent} (the faithful
- * icon-tile + rows card body) in a card shell with vertical-flow handle nubs
- * (top in / bottom out), matching the real editor's vertical layout.
- *
- * The staged flow is injectable (`blocks`/`edges`/`canvas`), defaulting to the
- * homepage's lead-enrichment flow - the enterprise loop stages its own flow
- * through the same component.
- */
-export function HeroWorkflowStage({
+interface StagedHeroWorkflowStageProps {
+  builtCount: number
+  blocks: BlockDef[]
+  edges: ReadonlyArray<readonly [string, string]>
+  canvas: { width: number; height: number }
+  selectedId?: string
+}
+
+/** Timed, non-interactive workflow stage used by the secondary landing loops. */
+function StagedHeroWorkflowStage({
   builtCount,
-  blocks = STAGE_BLOCKS,
-  edges = STAGE_EDGES,
-  canvas = STAGE_CANVAS,
+  blocks,
+  edges,
+  canvas,
   selectedId,
-}: HeroWorkflowStageProps) {
-  const blocksById = useMemo(() => new Map(blocks.map((b) => [b.id, b])), [blocks])
-
+}: StagedHeroWorkflowStageProps) {
+  const blocksById = useMemo(() => new Map(blocks.map((block) => [block.id, block])), [blocks])
   const builtIds = useMemo(
-    () => new Set(blocks.slice(0, builtCount).map((b) => b.id)),
+    () => new Set(blocks.slice(0, builtCount).map((block) => block.id)),
     [blocks, builtCount]
   )
 
@@ -89,12 +90,13 @@ export function HeroWorkflowStage({
           const target = blocksById.get(to)
           if (!source || !target) return null
           const visible = builtIds.has(from) && builtIds.has(to)
-          const s = handleAnchors(source).out
-          const t = handleAnchors(target).in
+          const sourceAnchor = handleAnchors(source).out
+          const targetAnchor = handleAnchors(target).in
+
           return (
             <path
               key={`${from}-${to}`}
-              d={verticalSmoothStep(s.x, s.y, t.x, t.y)}
+              d={verticalSmoothStep(sourceAnchor.x, sourceAnchor.y, targetAnchor.x, targetAnchor.y)}
               pathLength={1}
               stroke='var(--workflow-edge)'
               strokeWidth={2}
@@ -110,6 +112,7 @@ export function HeroWorkflowStage({
 
       {blocks.map((block) => {
         const built = builtIds.has(block.id)
+
         return (
           <div
             key={block.id}
@@ -138,3 +141,37 @@ export function HeroWorkflowStage({
     </ResponsiveDesignStage>
   )
 }
+
+/**
+ * Landing workflow stage. The homepage demo uses the exact production renderer
+ * inside React Flow; secondary timed loops retain their staged presentation.
+ */
+export function HeroWorkflowStage({
+  builtCount,
+  blocks = STAGE_BLOCKS,
+  edges = STAGE_EDGES,
+  canvas = STAGE_CANVAS,
+  selectedId,
+  interactive = false,
+}: HeroWorkflowStageProps) {
+  if (interactive) {
+    return (
+      <ProductionWorkflowStage
+        builtCount={builtCount}
+        blocks={blocks}
+        edges={edges}
+        canvas={canvas}
+      />
+    )
+  }
+
+  return (
+    <StagedHeroWorkflowStage
+      builtCount={builtCount}
+      blocks={blocks}
+      edges={edges}
+      canvas={canvas}
+      selectedId={selectedId}
+    />
+  )
+}
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/index.ts b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/index.ts
index f83c4e02e33..a84705a9c92 100644
--- a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/index.ts
+++ b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/index.ts
@@ -1 +1 @@
-export { HeroPlatformLoop } from './hero-platform-loop'
+export { HeroPlatformLoopMount } from './hero-platform-loop-mount'
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/preview-build-timing.ts b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/preview-build-timing.ts
new file mode 100644
index 00000000000..476e124858b
--- /dev/null
+++ b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/preview-build-timing.ts
@@ -0,0 +1,15 @@
+const THINKING_AT = 320
+/** Allow the production loader's entry hold and goo morph to play before agent activity starts. */
+const AGENT_AT = THINKING_AT + 4_200
+const STAGE_OPEN_AT = AGENT_AT + 600
+
+/** Shared ordering for the homepage and Build agents preview: think, dispatch, build, reply. */
+export const PREVIEW_BUILD_TIMING = {
+  thinkingAt: THINKING_AT,
+  dispatchAt: AGENT_AT - 650,
+  agentAt: AGENT_AT,
+  stageOpenAt: STAGE_OPEN_AT,
+  blockStartAt: STAGE_OPEN_AT + 550,
+  blockStepMs: 420,
+  replyPauseMs: 500,
+} as const
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/preview-chat-content.ts b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/preview-chat-content.ts
new file mode 100644
index 00000000000..c683d6270f1
--- /dev/null
+++ b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/preview-chat-content.ts
@@ -0,0 +1,19 @@
+/** The seeded prompt shared by the opening composer and its first suggested action. */
+export const DEFAULT_USER_MESSAGE =
+  'When a new lead signs up, enrich it with company data and post it to #sales.'
+
+/** The seeded reply, so the hero and the platform card tell one story. */
+export const DEFAULT_REPLY_MESSAGE =
+  'Built Lead enrichment — it enriches each signup, scores company fit, posts qualified leads to Slack, and saves the full record to Tables.\n\nThe workflow is ready to test with a sample lead.'
+
+export const PREVIEW_SUGGESTIONS = [
+  { title: 'Enrich new leads', prompt: DEFAULT_USER_MESSAGE },
+  {
+    title: 'Post deal alerts to #sales',
+    prompt: 'Post an alert to #sales when a qualified lead is ready for follow-up.',
+  },
+  {
+    title: 'Build a weekly pipeline report',
+    prompt: 'Summarize qualified leads and send a weekly pipeline report to the sales team.',
+  },
+] as const
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/production-workflow-stage.module.css b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/production-workflow-stage.module.css
new file mode 100644
index 00000000000..7e5d744ee86
--- /dev/null
+++ b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/production-workflow-stage.module.css
@@ -0,0 +1,29 @@
+@media (prefers-reduced-motion: no-preference) {
+  .nodeEnter {
+    animation: node-enter 520ms cubic-bezier(0.23, 1, 0.32, 1) both;
+  }
+
+  .edgeEnter {
+    animation: edge-enter 600ms cubic-bezier(0.23, 1, 0.32, 1) 220ms both;
+  }
+}
+
+@keyframes node-enter {
+  from {
+    opacity: 0;
+    transform: translateY(10px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes edge-enter {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/production-workflow-stage.tsx b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/production-workflow-stage.tsx
new file mode 100644
index 00000000000..190e33863e1
--- /dev/null
+++ b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/production-workflow-stage.tsx
@@ -0,0 +1,790 @@
+'use client'
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import {
+  Button,
+  cn,
+  Duplicate,
+  PlayOutline,
+  Tooltip,
+  Trash,
+  usePrefersReducedMotion,
+} from '@sim/emcn'
+import { Circle, Minus, Plus, Square, Unlock } from '@sim/emcn/icons'
+import {
+  CanvasSentenceView,
+  InlineChip,
+  WorkflowBlockView,
+  WorkflowEdgeView,
+} from '@sim/workflow-renderer'
+import {
+  applyNodeChanges,
+  type Edge,
+  type EdgeProps,
+  type EdgeTypes,
+  type Node,
+  type NodeChange,
+  type NodeProps,
+  type NodeTypes,
+  ReactFlow,
+  ReactFlowProvider,
+  useReactFlow,
+  useStore,
+  useViewport,
+} from '@xyflow/react'
+import '@xyflow/react/dist/style.css'
+import styles from '@/app/(landing)/components/hero/components/hero-platform-loop/production-workflow-stage.module.css'
+import {
+  BLOCK_WIDTH,
+  type BlockDef,
+  blockHeight,
+} from '@/app/(landing)/components/hero/components/hero-visual/workflow-data'
+
+const MIN_ZOOM = 0.45
+const MAX_ZOOM = 1.3
+/** Keep neighboring cards visible in the hero's split workflow pane. */
+const FOCUSED_NODE_MIN_ZOOM = 0.65
+const FOCUSED_NODE_DURATION_MS = 500
+const BLOCK_RUN_DURATION_MS = 1_200
+const BLOCK_COMPLETE_DURATION_MS = 1_400
+/** Scripted camera: air around the whole workflow when fitting, and the fit's zoom ceiling. */
+const FIT_PADDING_PX = 40
+/**
+ * How a card and its edge arrive. A card rises and fades in over half a second
+ * on the editor's ease; its edge fades in a beat later, once the card has
+ * landed, so a connection reads as made rather than there already. Both honour
+ * reduced motion.
+ */
+const NODE_ENTER_CLASS = styles.nodeEnter
+const EDGE_ENTER_CLASS = styles.edgeEnter
+/** A fit never shows cards larger than life: a lone Start block sits at full size, centred. */
+const FIT_MAX_ZOOM = 1
+/**
+ * The fitted overview never shrinks below this: a long workflow is centred and
+ * allowed to overflow the frame instead, the way a real canvas viewport crops
+ * a graph, so the cards stay legible. Tuned so the demo's eight-column graph
+ * just fits a 1750px frame and only overflows on narrower ones.
+ */
+const FIT_MIN_ZOOM = 0.64
+const FIT_DURATION_MS = 600
+const EMPTY_IDS: ReadonlySet<string> = new Set()
+
+const ACTION_BUTTON_STYLES = [
+  'size-[24px] rounded-md p-0',
+  'border-none bg-transparent text-[var(--text-icon)]',
+  'hover-hover:bg-[var(--surface-5)] hover-hover:!text-[var(--text-primary)]',
+  'dark:hover-hover:bg-[var(--surface-4)]',
+  'transition-[background-color,color,opacity,transform] duration-150 active:scale-[0.96]',
+  'group-data-[node-selected]:text-[var(--surface-2)]',
+  'hover-hover:group-data-[node-selected]:bg-[var(--surface-2)]',
+  'hover-hover:group-data-[node-selected]:!text-[var(--text-primary)]',
+].join(' ')
+
+const FIRST_ACTION_STYLES =
+  "!w-[40px] [clip-path:path('M23.75_0A8_8_0_0_0_17.6_2.88L3.41_19.9A2.5_2.5_0_0_0_5.34_24L36_24A4_4_0_0_0_40_20L40_4A4_4_0_0_0_36_0Z')] [&>svg]:translate-x-[8px] [&>svg]:translate-y-px"
+
+/** The running run slot: graphite fill, inverse glyph - the editor's own treatment. */
+const RUNNING_RUN_STYLES =
+  '!bg-[var(--text-secondary)] !text-[var(--text-inverse)] hover-hover:!bg-[var(--white)] hover-hover:!text-[var(--surface-inverted)]'
+/** A bystander card's actions dim mid-run; the run/stop slot keeps its ordinary chrome. */
+const BYSTANDER_ACTION_STYLES =
+  '!bg-transparent !opacity-25 hover-hover:!bg-transparent dark:hover-hover:!bg-transparent'
+/** Slots the hatch runs across blank their icons so it reads uninterrupted. */
+const SWEEP_SLOT_STYLES =
+  '!opacity-100 [&_svg]:!opacity-0 !bg-transparent hover-hover:!bg-transparent'
+/**
+ * The editor's running hatch: 24px marks on a 26px pitch sheared to 75°,
+ * scrolled by one period so the loop is seamless. Painted once across the
+ * row, inset past the run/stop slot, and trimmed to the swell's tapered end.
+ */
+const RUNNING_FILL =
+  'bg-[repeating-linear-gradient(75deg,var(--surface-2)_11.59px_22.805px,transparent_23.555px_24.735px,var(--surface-2)_25.485px_36.7px)]'
+const RUNNING_FILL_INSET = 'left-[42px]'
+const RUNNING_FILL_END_TAPER = '[clip-path:polygon(0_0,calc(100%_-_20px)_0,100%_100%,0_100%)]'
+
+const LAST_ACTION_STYLES =
+  "!w-[40px] [clip-path:path('M16.25_0A8_8_0_0_1_22.4_2.88L36.59_19.9A2.5_2.5_0_0_1_34.66_24L4_24A4_4_0_0_1_0_20L0_4A4_4_0_0_1_4_0Z')] [&_svg]:-translate-x-[6px] [&_svg]:translate-y-px"
+
+const REACT_FLOW_STYLES = [
+  '[&_.react-flow__handle]:!z-[30]',
+  '[&_.react-flow__pane]:select-none',
+  '[&_.react-flow__selectionpane]:select-none',
+  '[&_.react-flow__background]:hidden',
+].join(' ')
+
+/** Selection and run state a demo drives from its own timeline. */
+export interface ScriptedWorkflowState {
+  selectedId: string | null
+  /** Whether a run is in progress: traversed edges read graphite, the rest dim, swells sweep. */
+  isWorkflowRunning: boolean
+  runningId: string | null
+  completedIds: ReadonlySet<string>
+}
+
+interface ProductionWorkflowStageProps {
+  builtCount: number
+  blocks: BlockDef[]
+  edges: ReadonlyArray<readonly [string, string]>
+  canvas: { width: number; height: number }
+  /**
+   * Scripted state for a non-interactive demo. When set, clicks, drags, and
+   * the zoom controls are off, selection and run state come from here, and the
+   * camera follows: it fits the whole workflow while nothing is selected and
+   * glides to each selected card.
+   */
+  scripted?: ScriptedWorkflowState
+  /** Px the camera keeps clear at the container's top and bottom when fitting. */
+  viewportInset?: { top: number; bottom: number }
+}
+
+/** The design-space box every block of a workflow occupies. */
+function workflowBounds(blocks: BlockDef[]) {
+  let minX = Number.POSITIVE_INFINITY
+  let minY = Number.POSITIVE_INFINITY
+  let maxX = Number.NEGATIVE_INFINITY
+  let maxY = Number.NEGATIVE_INFINITY
+  for (const block of blocks) {
+    minX = Math.min(minX, block.x)
+    minY = Math.min(minY, block.y)
+    maxX = Math.max(maxX, block.x + BLOCK_WIDTH)
+    maxY = Math.max(maxY, block.y + blockHeight(block))
+  }
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY }
+}
+
+interface LandingWorkflowNodeData extends Record<string, unknown> {
+  block: BlockDef
+  running: boolean
+  workflowRunning: boolean
+  complete: boolean
+  onSelect: (blockId: string) => void
+  onRunToggle: (blockId: string) => void
+}
+
+/**
+ * The editor's running spinner: it sits in the run slot with the same glyph
+ * offset the Play icon gets, and swaps to a stop glyph on hover.
+ */
+function RunningActionIcon() {
+  return (
+    <span
+      className='relative grid size-[14px] translate-x-[8px] translate-y-px place-items-center'
+      role='status'
+    >
+      <span className='sr-only'>Block running</span>
+      <span
+        aria-hidden='true'
+        className='col-start-1 row-start-1 opacity-100 transition-opacity duration-100 group-hover/run:opacity-0 motion-safe:animate-spin motion-reduce:transition-none'
+      >
+        <svg className='size-[14px]' viewBox='0 0 24 24' fill='none'>
+          <circle cx='12' cy='12' r='10' stroke='currentColor' strokeWidth='2' opacity='0.25' />
+          <circle
+            cx='12'
+            cy='12'
+            r='10'
+            stroke='currentColor'
+            strokeWidth='2'
+            strokeLinecap='round'
+            strokeDasharray='18 45'
+          />
+        </svg>
+      </span>
+      <span
+        aria-hidden='true'
+        className='col-start-1 row-start-1 opacity-0 transition-opacity duration-100 group-hover/run:opacity-100 motion-reduce:transition-none'
+      >
+        <Square className='size-[11px] fill-current' strokeWidth={0} />
+      </span>
+    </span>
+  )
+}
+
+interface PreviewActionBarProps {
+  block: BlockDef
+  running: boolean
+  workflowRunning: boolean
+  onRunToggle: () => void
+}
+
+/**
+ * The editor's action bar in its swell variant, with the same run treatment:
+ * Play at rest; while the workflow runs, the running card's slot turns
+ * graphite with the spinner and the hatch marches behind its other slots,
+ * every other card offers Stop with its remaining actions dimmed.
+ */
+function PreviewActionBar({ block, running, workflowRunning, onRunToggle }: PreviewActionBarProps) {
+  const sweeping = workflowRunning && running
+  const inertActions = [
+    { label: 'Disable', Icon: Circle },
+    { label: 'Lock', Icon: Unlock },
+    ...(!block.isTrigger ? [{ label: 'Duplicate', Icon: Duplicate }] : []),
+    { label: 'Delete', Icon: Trash },
+  ]
+
+  return (
+    <div
+      data-workflow-action-bar-swell=''
+      className='-top-[28px] pointer-events-auto absolute right-[24px] z-[40] h-[28px] w-fit overflow-hidden rounded-lg px-[0.2rem] py-0.5'
+    >
+      <div className='pointer-events-none relative flex h-full flex-row items-center gap-[2px] opacity-0 transition-opacity duration-[30ms] [transition-timing-function:cubic-bezier(0.23,1,0.32,1)] group-data-[action-menu-ready]:pointer-events-auto group-data-[action-menu-ready]:opacity-100 group-data-[action-menu-ready]:duration-100'>
+        {sweeping && (
+          <span
+            aria-hidden='true'
+            className={cn(
+              'pointer-events-none absolute inset-y-0 right-0 overflow-hidden',
+              RUNNING_FILL_INSET,
+              RUNNING_FILL_END_TAPER
+            )}
+          >
+            <span
+              className={cn(
+                'block h-full w-[calc(100%_+_26px)] will-change-transform',
+                'animate-running-hatch-scroll motion-reduce:animate-none',
+                RUNNING_FILL
+              )}
+            />
+          </span>
+        )}
+        <Tooltip.Root preferAbove>
+          <Tooltip.Trigger asChild>
+            <span className='inline-flex'>
+              <Button
+                type='button'
+                variant='ghost'
+                aria-label={workflowRunning ? 'Stop workflow' : `Run ${block.name}`}
+                className={cn(
+                  ACTION_BUTTON_STYLES,
+                  FIRST_ACTION_STYLES,
+                  running && RUNNING_RUN_STYLES,
+                  workflowRunning && 'group/run'
+                )}
+                onClick={(event) => {
+                  event.stopPropagation()
+                  onRunToggle()
+                }}
+              >
+                {workflowRunning ? (
+                  running ? (
+                    <RunningActionIcon />
+                  ) : (
+                    <Square
+                      className='size-[11px] fill-current'
+                      aria-hidden='true'
+                      strokeWidth={0}
+                    />
+                  )
+                ) : (
+                  <PlayOutline className='size-[14px]' />
+                )}
+              </Button>
+            </span>
+          </Tooltip.Trigger>
+          <Tooltip.Content side='top'>{workflowRunning ? 'Stop' : 'Run'}</Tooltip.Content>
+        </Tooltip.Root>
+
+        {inertActions.map(({ label, Icon }) => (
+          <Tooltip.Root key={label} preferAbove>
+            <Tooltip.Trigger asChild>
+              <Button
+                type='button'
+                variant='ghost'
+                aria-label={label}
+                className={cn(
+                  ACTION_BUTTON_STYLES,
+                  label === 'Delete' && LAST_ACTION_STYLES,
+                  workflowRunning && !running && BYSTANDER_ACTION_STYLES,
+                  sweeping && SWEEP_SLOT_STYLES
+                )}
+                onClick={(event) => {
+                  event.preventDefault()
+                  event.stopPropagation()
+                }}
+              >
+                <Icon className='size-[14px]' />
+              </Button>
+            </Tooltip.Trigger>
+            {!workflowRunning && <Tooltip.Content side='top'>{label}</Tooltip.Content>}
+          </Tooltip.Root>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function renderSentence(block: BlockDef) {
+  if (!block.sentence) return undefined
+
+  return (
+    <CanvasSentenceView
+      segments={block.sentence.segments}
+      renderChip={(subBlockId) => {
+        const value = block.sentence?.values[subBlockId]
+        return value ? (
+          <InlineChip>
+            <span className='block max-w-[138px] truncate'>{value}</span>
+          </InlineChip>
+        ) : null
+      }}
+    />
+  )
+}
+
+function ProductionWorkflowNode({ data, selected }: NodeProps<Node<LandingWorkflowNodeData>>) {
+  const { block, running, workflowRunning, complete, onSelect, onRunToggle } = data
+  const shouldShowDefaultHandles = !block.isTrigger
+  const conditionRows =
+    block.type === 'condition'
+      ? block.rows.map((row, index) => ({
+          id: index === 0 ? 'if' : index === 1 ? 'else' : `branch-${index + 1}`,
+          title: row.title,
+          value: row.value,
+        }))
+      : []
+  const hasContentBelowHeader = Boolean(
+    block.sentence || block.rows.length > 0 || shouldShowDefaultHandles
+  )
+
+  return (
+    <div className={NODE_ENTER_CLASS}>
+      <WorkflowBlockView
+        id={block.id}
+        type={block.type ?? 'starter'}
+        name={block.name}
+        isEnabled
+        isLocked={false}
+        hasRing={selected}
+        ringStyles={selected ? 'ring-[1.5px] ring-[var(--text-secondary)]' : ''}
+        runPathStatus={complete ? 'success' : undefined}
+        isRunning={running}
+        isExecutionHighlighted={running}
+        Icon={block.icon}
+        iconBgColor={block.bgColor}
+        isIntegration={block.isIntegration}
+        horizontalHandles
+        shouldShowDefaultHandles={shouldShowDefaultHandles}
+        blockHeight={blockHeight(block)}
+        hasContentBelowHeader={hasContentBelowHeader}
+        conditionRows={conditionRows}
+        routerRows={[]}
+        wouldCreateConnectionCycle={() => false}
+        cursorConnectionsEnabled={false}
+        onSelect={() => onSelect(block.id)}
+        actionBar={
+          <PreviewActionBar
+            block={block}
+            running={running}
+            workflowRunning={workflowRunning}
+            onRunToggle={() => onRunToggle(block.id)}
+          />
+        }
+        rows={null}
+        typeLabel={block.typeLabel}
+        sentence={block.type === 'condition' ? undefined : renderSentence(block)}
+        errorOutputEnabled={false}
+      />
+    </div>
+  )
+}
+
+interface LandingWorkflowEdgeData {
+  runStatus?: 'success'
+  isWorkflowRunning: boolean
+  isTargetActive: boolean
+}
+
+function ProductionWorkflowEdge(props: EdgeProps) {
+  const data = props.data as LandingWorkflowEdgeData | undefined
+  const runStatus = data?.runStatus
+  const isWorkflowRunning = Boolean(data?.isWorkflowRunning)
+  const isTargetActive = Boolean(data?.isTargetActive)
+  const isConnectedToSelection = useStore(
+    useCallback(
+      (state) =>
+        Boolean(
+          state.nodeLookup.get(props.source)?.selected ||
+            state.nodeLookup.get(props.target)?.selected
+        ),
+      [props.source, props.target]
+    )
+  )
+
+  return (
+    <g className={EDGE_ENTER_CLASS}>
+      <WorkflowEdgeView
+        {...props}
+        diffStatus={null}
+        runStatus={runStatus}
+        isPreviewRun={false}
+        isWorkflowRunning={isWorkflowRunning}
+        isTargetActive={isTargetActive}
+        isConnectedToSelection={isConnectedToSelection}
+      />
+    </g>
+  )
+}
+
+const NODE_TYPES: NodeTypes = { workflowBlock: ProductionWorkflowNode }
+const EDGE_TYPES: EdgeTypes = { workflowEdge: ProductionWorkflowEdge }
+
+function CanvasZoomControls() {
+  const reducedMotion = usePrefersReducedMotion()
+  const { zoomIn, zoomOut } = useReactFlow()
+  const { zoom } = useViewport()
+  const buttonClassName = 'size-[28px] rounded-sm p-0'
+
+  return (
+    <div className='absolute bottom-3 left-3 z-30 flex h-[36px] items-center gap-0.5 rounded-lg border border-[var(--border)] bg-[var(--surface-2)] p-1'>
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <Button
+            type='button'
+            variant='ghost'
+            className={buttonClassName}
+            onClick={() => zoomOut({ duration: reducedMotion ? 0 : 160 })}
+            disabled={zoom <= MIN_ZOOM}
+            aria-label='Zoom out'
+          >
+            <Minus className='size-[14px]' />
+          </Button>
+        </Tooltip.Trigger>
+        <Tooltip.Content side='top'>Zoom out</Tooltip.Content>
+      </Tooltip.Root>
+      <output
+        aria-live='polite'
+        aria-label={`Canvas zoom ${Math.round(zoom * 100)} percent`}
+        className='w-10 text-center text-[var(--text-secondary)] text-caption tabular-nums'
+      >
+        {Math.round(zoom * 100)}%
+      </output>
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <Button
+            type='button'
+            variant='ghost'
+            className={buttonClassName}
+            onClick={() => zoomIn({ duration: reducedMotion ? 0 : 160 })}
+            disabled={zoom >= MAX_ZOOM}
+            aria-label='Zoom in'
+          >
+            <Plus className='size-[14px]' />
+          </Button>
+        </Tooltip.Trigger>
+        <Tooltip.Content side='top'>Zoom in</Tooltip.Content>
+      </Tooltip.Root>
+    </div>
+  )
+}
+
+function ProductionWorkflowCanvas({
+  builtCount,
+  blocks,
+  edges,
+  scripted,
+  viewportInset,
+}: ProductionWorkflowStageProps) {
+  const { getNode, getViewport, setCenter, setViewport } = useReactFlow()
+  const containerRef = useRef<HTMLDivElement>(null)
+  const focusFrameRef = useRef(0)
+  const reducedMotion = usePrefersReducedMotion()
+  const defaultSelection = scripted
+    ? undefined
+    : (blocks.find((block) => block.type === 'agent')?.id ?? blocks[0]?.id)
+  const initialFocusAppliedRef = useRef(false)
+  const [internalSelectedId, setSelectedId] = useState(defaultSelection)
+  const [internalRunningId, setRunningId] = useState<string | null>(null)
+  const [internalCompletedId, setCompletedId] = useState<string | null>(null)
+  const selectedId = scripted ? scripted.selectedId : internalSelectedId
+  const runningId = scripted ? scripted.runningId : internalRunningId
+  const isWorkflowRunning = scripted ? scripted.isWorkflowRunning : Boolean(internalRunningId)
+  const completedIds = useMemo<ReadonlySet<string>>(() => {
+    if (scripted) return scripted.completedIds
+    return internalCompletedId ? new Set([internalCompletedId]) : EMPTY_IDS
+  }, [scripted, internalCompletedId])
+  const builtBlocks = useMemo(() => blocks.slice(0, builtCount), [blocks, builtCount])
+  const builtIds = useMemo(() => new Set(builtBlocks.map((block) => block.id)), [builtBlocks])
+
+  useEffect(() => {
+    if (!internalRunningId) return
+    const blockId = internalRunningId
+    const timer = window.setTimeout(() => {
+      setRunningId((current) => (current === blockId ? null : current))
+      setCompletedId(blockId)
+    }, BLOCK_RUN_DURATION_MS)
+    return () => window.clearTimeout(timer)
+  }, [internalRunningId])
+
+  useEffect(() => {
+    if (!internalCompletedId) return
+    const blockId = internalCompletedId
+    const timer = window.setTimeout(() => {
+      setCompletedId((current) => (current === blockId ? null : current))
+    }, BLOCK_COMPLETE_DURATION_MS)
+    return () => window.clearTimeout(timer)
+  }, [internalCompletedId])
+
+  const handleRunToggle = useCallback((blockId: string) => {
+    setSelectedId(blockId)
+    setCompletedId(null)
+    setRunningId((current) => (current === blockId ? null : blockId))
+  }, [])
+
+  const createWorkflowNode = useCallback(
+    (block: BlockDef, existing?: Node<LandingWorkflowNodeData>): Node<LandingWorkflowNodeData> => ({
+      ...existing,
+      id: block.id,
+      type: 'workflowBlock',
+      position: existing?.position ?? { x: block.x, y: block.y },
+      initialWidth: BLOCK_WIDTH,
+      initialHeight: blockHeight(block),
+      selected: selectedId === block.id,
+      dragHandle: '.workflow-drag-handle',
+      draggable: true,
+      connectable: false,
+      data: {
+        block,
+        running: runningId === block.id,
+        workflowRunning: isWorkflowRunning,
+        complete: completedIds.has(block.id),
+        onSelect: setSelectedId,
+        onRunToggle: handleRunToggle,
+      },
+    }),
+    [completedIds, handleRunToggle, isWorkflowRunning, runningId, selectedId]
+  )
+
+  const [nodes, setNodes] = useState<Node<LandingWorkflowNodeData>[]>(() =>
+    builtBlocks.map((block) => createWorkflowNode(block))
+  )
+
+  useEffect(() => {
+    setNodes((current) => {
+      const currentById = new Map(current.map((node) => [node.id, node]))
+      return builtBlocks.map((block) => createWorkflowNode(block, currentById.get(block.id)))
+    })
+  }, [builtBlocks, createWorkflowNode])
+
+  const handleNodesChange = useCallback((changes: NodeChange<Node<LandingWorkflowNodeData>>[]) => {
+    setNodes((current) => applyNodeChanges(changes, current))
+  }, [])
+
+  const focusBlockInView = useCallback(
+    (blockId: string, duration = FOCUSED_NODE_DURATION_MS) => {
+      cancelAnimationFrame(focusFrameRef.current)
+      focusFrameRef.current = requestAnimationFrame(() => {
+        focusFrameRef.current = requestAnimationFrame(() => {
+          const node = getNode(blockId)
+          if (!node) return
+
+          const position = node.position
+          const nodeWidth = node.measured?.width ?? BLOCK_WIDTH
+          const nodeHeight = node.measured?.height ?? 100
+          const targetZoom = Math.max(getViewport().zoom, FOCUSED_NODE_MIN_ZOOM)
+
+          void setCenter(position.x + nodeWidth / 2, position.y + nodeHeight / 2, {
+            zoom: targetZoom,
+            duration: reducedMotion ? 0 : duration,
+          })
+        })
+      })
+    },
+    [getNode, getViewport, reducedMotion, setCenter]
+  )
+
+  useEffect(() => () => cancelAnimationFrame(focusFrameRef.current), [])
+
+  useEffect(() => {
+    if (initialFocusAppliedRef.current || !defaultSelection || !builtIds.has(defaultSelection)) {
+      return
+    }
+
+    initialFocusAppliedRef.current = true
+    focusBlockInView(defaultSelection, 0)
+  }, [builtIds, defaultSelection, focusBlockInView])
+
+  const fitWorkflow = useCallback(
+    (duration: number) => {
+      const container = containerRef.current
+      if (!container) return
+      const top = viewportInset?.top ?? 0
+      const bottom = viewportInset?.bottom ?? 0
+      const width = container.clientWidth
+      const height = container.clientHeight - top - bottom
+      if (width <= 0 || height <= 0) return
+      const bounds = workflowBounds(builtBlocks)
+      const zoom = Math.min(
+        FIT_MAX_ZOOM,
+        Math.max(
+          FIT_MIN_ZOOM,
+          Math.min(
+            (width - 2 * FIT_PADDING_PX) / bounds.width,
+            (height - 2 * FIT_PADDING_PX) / bounds.height
+          )
+        )
+      )
+      void setViewport(
+        {
+          x: (width - bounds.width * zoom) / 2 - bounds.x * zoom,
+          y: top + (height - bounds.height * zoom) / 2 - bounds.y * zoom,
+          zoom,
+        },
+        { duration: reducedMotion ? 0 : duration }
+      )
+    },
+    [builtBlocks, reducedMotion, setViewport, viewportInset]
+  )
+
+  const scriptedFittedRef = useRef(false)
+  /**
+   * A scripted canvas stays invisible until its first fit has landed. React
+   * Flow paints its default viewport first and ignores a fit that arrives
+   * before its zoom is initialised, which would show the first card at the
+   * stage's left edge until the next fit carried it into place. Even a
+   * zero-duration fit is applied through a d3 transition on the next
+   * animation frame, so the reveal waits two frames for it to reach the DOM.
+   */
+  const [fitted, setFitted] = useState(!scripted)
+  const revealFrameRef = useRef(0)
+  const handleInit = useCallback(() => {
+    if (!scripted) {
+      if (defaultSelection) focusBlockInView(defaultSelection, 0)
+      return
+    }
+    fitWorkflow(0)
+    scriptedFittedRef.current = true
+    revealFrameRef.current = requestAnimationFrame(() => {
+      revealFrameRef.current = requestAnimationFrame(() => setFitted(true))
+    })
+  }, [defaultSelection, focusBlockInView, scripted, fitWorkflow])
+  useEffect(() => () => cancelAnimationFrame(revealFrameRef.current), [])
+  /**
+   * The scripted camera keeps every built card in view: it opens on the first
+   * card at full size and eases out as cards land, so a workflow is watched
+   * growing from its Start block rather than revealed all at once. Selection
+   * never moves it - the newest card is selected as it lands, in frame already.
+   */
+  useEffect(() => {
+    if (!scripted) return
+    fitWorkflow(scriptedFittedRef.current ? FIT_DURATION_MS : 0)
+    scriptedFittedRef.current = true
+  }, [scripted, fitWorkflow])
+
+  useEffect(() => {
+    if (!scripted || typeof ResizeObserver === 'undefined') return
+    const container = containerRef.current
+    if (!container) return
+    const observer = new ResizeObserver(() => fitWorkflow(0))
+    observer.observe(container)
+    return () => observer.disconnect()
+  }, [scripted, fitWorkflow])
+
+  const handleNodeClick = useCallback(
+    (_event: React.MouseEvent, node: Node<LandingWorkflowNodeData>) => {
+      setSelectedId(node.id)
+      focusBlockInView(node.id)
+    },
+    [focusBlockInView]
+  )
+
+  const flowEdges = useMemo<Edge[]>(
+    () =>
+      edges.flatMap(([source, target], index) => {
+        if (!builtIds.has(source) || !builtIds.has(target)) return []
+        const sourceBlock = blocks.find((block) => block.id === source)
+        const conditionEdgeIndex =
+          sourceBlock?.type === 'condition'
+            ? edges.slice(0, index).filter(([candidate]) => candidate === source).length
+            : -1
+        return [
+          {
+            id: `${source}-${target}`,
+            source,
+            target,
+            sourceHandle:
+              conditionEdgeIndex >= 0
+                ? `condition-${conditionEdgeIndex === 0 ? 'if' : 'else'}`
+                : undefined,
+            type: 'workflowEdge',
+            selectable: false,
+            data: {
+              runStatus:
+                completedIds.has(source) && (target === runningId || completedIds.has(target))
+                  ? ('success' as const)
+                  : undefined,
+              isWorkflowRunning,
+              isTargetActive: target === runningId,
+            } satisfies LandingWorkflowEdgeData,
+          },
+        ]
+      }),
+    [blocks, builtIds, completedIds, edges, isWorkflowRunning, runningId]
+  )
+
+  const liveStatus = runningId
+    ? `${blocks.find((block) => block.id === runningId)?.name ?? 'Block'} is running`
+    : internalCompletedId
+      ? `${blocks.find((block) => block.id === internalCompletedId)?.name ?? 'Block'} completed`
+      : ''
+  const interactive = !scripted
+
+  return (
+    <div
+      ref={containerRef}
+      inert={!interactive}
+      className={cn(
+        'relative size-full overflow-hidden',
+        /* React Flow re-enables the pointer on nodes and handles; a scripted stage is inert throughout. */
+        !interactive && '[&_*]:!pointer-events-none select-none',
+        !fitted && 'opacity-0'
+      )}
+    >
+      <ReactFlow
+        onInit={handleInit}
+        nodes={nodes}
+        edges={flowEdges}
+        onNodesChange={handleNodesChange}
+        nodeTypes={NODE_TYPES}
+        edgeTypes={EDGE_TYPES}
+        minZoom={MIN_ZOOM}
+        maxZoom={MAX_ZOOM}
+        defaultViewport={{ x: 0, y: 48, zoom: FOCUSED_NODE_MIN_ZOOM }}
+        panOnDrag={interactive}
+        panOnScroll={false}
+        preventScrolling={false}
+        zoomOnPinch={interactive}
+        zoomOnScroll={false}
+        zoomOnDoubleClick={false}
+        nodesDraggable={interactive}
+        nodesConnectable={false}
+        elementsSelectable={interactive}
+        edgesFocusable={false}
+        nodesFocusable={interactive}
+        selectNodesOnDrag={false}
+        onNodeClick={interactive ? handleNodeClick : undefined}
+        onNodeDragStart={interactive ? (_event, node) => setSelectedId(node.id) : undefined}
+        proOptions={{ hideAttribution: true }}
+        className={REACT_FLOW_STYLES}
+      />
+      {interactive && <CanvasZoomControls />}
+      {interactive && (
+        <span className='sr-only' aria-live='polite'>
+          {liveStatus}
+        </span>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Homepage workflow demo rendered by the same pure node and edge views used by
+ * the production editor. React Flow owns viewport, selection, handle geometry,
+ * and edge routing; the preview only withholds mutation callbacks. With
+ * `scripted` state it becomes a non-interactive stage whose selection, run
+ * path, and camera a demo timeline drives.
+ */
+export function ProductionWorkflowStage(props: ProductionWorkflowStageProps) {
+  return (
+    <ReactFlowProvider>
+      <ProductionWorkflowCanvas {...props} />
+    </ReactFlowProvider>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/stage-block-card.tsx b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/stage-block-card.tsx
index 2c519349363..28458ad62aa 100644
--- a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/stage-block-card.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/stage-block-card.tsx
@@ -1,32 +1,417 @@
-import { WorkflowBlockContent } from '@/app/(landing)/components/hero/components/hero-visual/workflow-block-content'
-import type { BlockDef } from '@/app/(landing)/components/hero/components/hero-visual/workflow-data'
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import {
+  Button,
+  Check,
+  cn,
+  Duplicate,
+  handleKeyboardActivation,
+  PlayOutline,
+  Switch,
+  Tooltip,
+  Trash,
+} from '@sim/emcn'
+import { Circle, Square, Unlock } from '@sim/emcn/icons'
+import {
+  BLOCK_DIMENSIONS,
+  CanvasSentenceView,
+  HANDLE_POSITIONS,
+  InlineChip,
+  SubBlockRowView,
+  WorkflowBlockBorder,
+  type WorkflowBorderPort,
+  WorkflowTypeTag,
+} from '@sim/workflow-renderer'
+import { WORKFLOW_SOURCE_HANDLE_ID, WORKFLOW_TARGET_HANDLE_ID } from '@sim/workflow-types/workflow'
+import {
+  type BlockDef,
+  blockHeight,
+} from '@/app/(landing)/components/hero/components/hero-visual/workflow-data'
 
 interface StageBlockCardProps {
   block: BlockDef
+  orientation?: 'horizontal' | 'vertical'
+  selected?: boolean
+  /** Keeps the production selection toolbar visible in a noninteractive graphic. */
+  decorative?: boolean
+  runStatus?: 'idle' | 'running' | 'complete'
+  onSelect?: (blockId: string) => void
+  onRunToggle?: (blockId: string) => void
+  /** Reports when the initial silhouette and any selection toolbar are painted. */
+  onReady?: (blockId: string) => void
+}
+
+const CONNECTION_TAB_LENGTH = 36
+const BRANCH_TAB_LENGTH = 24
+const ACTION_END_BUTTON_WIDTH = 40
+const ACTION_MIDDLE_BUTTON_WIDTH = 24
+const ACTION_BUTTON_GAP = 2
+const ACTION_MENU_HORIZONTAL_PADDING = 6
+const ACTION_MENU_RIGHT_INSET = 24
+const ACTION_MENU_AMPLITUDE = 7
+
+function getActionMenuWidth(block: BlockDef): number {
+  const actionCount = block.isTrigger ? 4 : 5
+  const middleActionCount = actionCount - 2
+  return (
+    ACTION_END_BUTTON_WIDTH * 2 +
+    ACTION_MIDDLE_BUTTON_WIDTH * middleActionCount +
+    ACTION_BUTTON_GAP * (actionCount - 1) +
+    ACTION_MENU_HORIZONTAL_PADDING
+  )
+}
+
+function getPorts(
+  block: BlockDef,
+  actionMenuWidth: number,
+  orientation: 'horizontal' | 'vertical'
+): WorkflowBorderPort[] {
+  const ports: WorkflowBorderPort[] = []
+  const horizontalTabLength =
+    blockHeight(block) === BLOCK_DIMENSIONS.MIN_PAINTED_HEIGHT ? 10 : CONNECTION_TAB_LENGTH
+
+  if (orientation === 'horizontal') {
+    if (!block.isTrigger) {
+      ports.push({
+        id: WORKFLOW_TARGET_HANDLE_ID,
+        side: 'left',
+        position: 'center',
+        plateau: horizontalTabLength,
+      })
+    }
+
+    if (block.type === 'condition') {
+      block.rows.forEach((row, index) => {
+        ports.push({
+          id: `condition-${row.title.toLowerCase()}`,
+          side: 'right',
+          position:
+            HANDLE_POSITIONS.CONDITION_START_Y + index * HANDLE_POSITIONS.CONDITION_ROW_HEIGHT,
+          plateau: BRANCH_TAB_LENGTH,
+        })
+      })
+    } else if (!block.isTerminal) {
+      ports.push({
+        id: WORKFLOW_SOURCE_HANDLE_ID,
+        side: 'right',
+        position: 'center',
+        plateau: horizontalTabLength,
+      })
+    }
+  } else {
+    if (!block.isTrigger) {
+      ports.push({
+        id: WORKFLOW_TARGET_HANDLE_ID,
+        side: 'top',
+        position: 'center',
+        plateau: CONNECTION_TAB_LENGTH,
+      })
+    }
+
+    if (!block.isTerminal) {
+      ports.push({
+        id: WORKFLOW_SOURCE_HANDLE_ID,
+        side: 'bottom',
+        position: 'center',
+        plateau: CONNECTION_TAB_LENGTH,
+      })
+    }
+  }
+
+  if (actionMenuWidth > 0) {
+    ports.push({
+      id: 'action-menu',
+      side: 'top',
+      position: { fromEnd: ACTION_MENU_RIGHT_INSET + actionMenuWidth / 2 },
+      plateau: actionMenuWidth,
+      restAmplitude: ACTION_MENU_AMPLITUDE,
+      hoverAmplitude: ACTION_MENU_AMPLITUDE,
+      magnetizable: false,
+    })
+  }
+
+  return ports
+}
+
+const ACTION_BUTTON_BASE_CLASSES =
+  'size-[24px] rounded-md border-none bg-transparent p-0 text-[var(--text-icon)] transition-[background-color,color,opacity,transform] duration-150 active:scale-[0.96]'
+
+function getActionButtonClassName(
+  position: 'first' | 'middle' | 'last',
+  selected: boolean
+): string {
+  return cn(
+    ACTION_BUTTON_BASE_CLASSES,
+    selected &&
+      'text-[var(--surface-2)] hover-hover:bg-[var(--surface-2)] hover-hover:!text-[var(--text-primary)]',
+    position === 'first' &&
+      "!w-[40px] [clip-path:path('M23.75_0A8_8_0_0_0_17.6_2.88L3.41_19.9A2.5_2.5_0_0_0_5.34_24L36_24A4_4_0_0_0_40_20L40_4A4_4_0_0_0_36_0Z')] [&>svg]:translate-x-[8px] [&>svg]:translate-y-px",
+    position === 'last' &&
+      "!w-[40px] [clip-path:path('M16.25_0A8_8_0_0_1_22.4_2.88L36.59_19.9A2.5_2.5_0_0_1_34.66_24L4_24A4_4_0_0_1_0_20L0_4A4_4_0_0_1_4_0Z')] [&_svg]:-translate-x-[6px] [&_svg]:translate-y-px"
+  )
+}
+
+function RunningActionIcon() {
+  return (
+    <span
+      className='relative grid size-[14px] translate-x-[8px] translate-y-px place-items-center'
+      role='status'
+    >
+      <span className='sr-only'>Block running</span>
+      <span
+        aria-hidden='true'
+        className='col-start-1 row-start-1 opacity-100 transition-opacity duration-100 group-hover/run:opacity-0 group-focus-visible/run:opacity-0 motion-safe:animate-spin motion-reduce:transition-none'
+      >
+        <svg className='size-[14px]' viewBox='0 0 24 24' fill='none'>
+          <circle cx='12' cy='12' r='10' stroke='currentColor' strokeWidth='2' opacity='0.25' />
+          <circle
+            cx='12'
+            cy='12'
+            r='10'
+            stroke='currentColor'
+            strokeWidth='2'
+            strokeLinecap='round'
+            strokeDasharray='18 45'
+          />
+        </svg>
+      </span>
+      <Square
+        aria-hidden='true'
+        className='col-start-1 row-start-1 size-[11px] fill-current opacity-0 transition-opacity duration-100 group-hover/run:opacity-100 group-focus-visible/run:opacity-100 motion-reduce:transition-none'
+        strokeWidth={0}
+      />
+    </span>
+  )
 }
 
 /**
- * Block card shell for the vertical-flow stage - the hero-visual's faithful
- * {@link WorkflowBlockContent} body with top (incoming) / bottom (outgoing)
- * handle nubs instead of the horizontal-flow left/right ones. Shared by the
- * hero's live workflow stage and the Build feature card's workflow peek.
+ * Read-only production workflow card for the landing preview. The shared
+ * renderer owns the real rounded silhouette, type tag, compact rows, ports,
+ * and pointer-following edge swell. React Flow handles and callbacks are
+ * intentionally omitted: visitors can feel the hover treatment without
+ * creating connections, nodes, or mutations in the public demo.
+ *
+ * In the homepage's interactive mode, selection opens one production-shaped
+ * action swell with the production action set. Run/Stop remains usable while
+ * duplicate, lock, enable/disable, and delete stay visible but disabled.
  */
-export function StageBlockCard({ block }: StageBlockCardProps) {
+export function StageBlockCard({
+  block,
+  orientation = 'vertical',
+  selected = false,
+  decorative = false,
+  runStatus = 'idle',
+  onSelect,
+  onRunToggle,
+  onReady,
+}: StageBlockCardProps) {
+  const borderHostRef = useRef<HTMLDivElement>(null)
+  const readyReportedRef = useRef(false)
+  const type = block.type ?? (block.isTrigger ? 'start_trigger' : 'starter')
+  const running = runStatus === 'running'
+  const complete = runStatus === 'complete'
+  const showErrorRow = !block.isTrigger
+  const hasContentBelowHeader = Boolean(block.sentence || block.rows.length > 0 || showErrorRow)
+  const showActionMenu = Boolean((decorative || onRunToggle) && (selected || running))
+  const actionMenuWidth = showActionMenu ? getActionMenuWidth(block) : 0
+  const [actionMenuReady, setActionMenuReady] = useState(false)
+
+  useEffect(() => {
+    if (!showActionMenu) setActionMenuReady(false)
+  }, [showActionMenu])
+
+  useEffect(() => {
+    const host = borderHostRef.current
+    if (!onReady || !host || readyReportedRef.current || (showActionMenu && !actionMenuReady)) {
+      return
+    }
+
+    const reportReady = () => {
+      const silhouette = host.querySelector(':scope > svg > path[fill][stroke]')
+      if (!silhouette?.getAttribute('d')) return false
+      readyReportedRef.current = true
+      onReady(block.id)
+      return true
+    }
+
+    if (reportReady()) return
+
+    /** The production renderer commits its measured SVG after its first layout pass. */
+    const observer = new MutationObserver(() => {
+      if (reportReady()) observer.disconnect()
+    })
+    observer.observe(host, { childList: true, subtree: true })
+    return () => observer.disconnect()
+  }, [actionMenuReady, block.id, onReady, showActionMenu])
+
+  const ringStyles = selected
+    ? 'ring-[1.5px] ring-[var(--text-secondary)]'
+    : complete
+      ? 'ring-[1.5px] ring-[var(--border-success)]'
+      : ''
+
   return (
-    <div className='relative rounded-[13px] border border-[var(--border-1)] bg-[var(--surface-2)] shadow-xs'>
-      <WorkflowBlockContent block={block} />
-      {!block.isTrigger && (
-        <span
-          aria-hidden
-          className='-translate-x-1/2 absolute top-[-7px] left-1/2 h-[7px] w-5 rounded-t-[2px] bg-[var(--workflow-edge)]'
-        />
-      )}
-      {!block.isTerminal && (
-        <span
-          aria-hidden
-          className='-translate-x-1/2 absolute bottom-[-7px] left-1/2 h-[7px] w-5 rounded-b-[2px] bg-[var(--workflow-edge)]'
+    <div
+      className='group relative h-full w-[250px] select-none rounded-2xl'
+      data-workflow-card
+      inert={decorative}
+      data-node-selected={selected ? '' : undefined}
+      data-action-menu-ready={actionMenuReady ? '' : undefined}
+      style={{ minHeight: BLOCK_DIMENSIONS.MIN_PAINTED_HEIGHT }}
+    >
+      {showActionMenu ? (
+        <>
+          <div
+            aria-hidden='true'
+            data-workflow-action-bar-bridge
+            className='-top-[28px] pointer-events-auto absolute inset-x-0 z-10 h-[28px]'
+          />
+          <div
+            className={cn(
+              '-top-[28px] pointer-events-auto absolute right-[24px] z-40 flex h-[28px] items-center gap-[2px] overflow-hidden rounded-lg px-[0.2rem] py-0.5 opacity-0 transition-opacity duration-[30ms] [transition-timing-function:cubic-bezier(0.23,1,0.32,1)] group-data-[action-menu-ready]:opacity-100 group-data-[action-menu-ready]:duration-100',
+              onReady && 'transition-none'
+            )}
+            style={{ width: actionMenuWidth }}
+          >
+            <Tooltip.Root preferAbove>
+              <Tooltip.Trigger asChild>
+                <Button
+                  type='button'
+                  variant='ghost'
+                  size={null}
+                  className={cn(
+                    getActionButtonClassName('first', selected),
+                    running &&
+                      'group/run !bg-[var(--text-secondary)] !text-[var(--text-inverse)] hover-hover:!bg-[var(--white)] hover-hover:!text-[var(--surface-inverted)]'
+                  )}
+                  aria-label={running ? `Stop ${block.name}` : `Run ${block.name}`}
+                  onClick={(event) => {
+                    event.stopPropagation()
+                    onRunToggle?.(block.id)
+                  }}
+                >
+                  {running ? (
+                    <RunningActionIcon />
+                  ) : complete ? (
+                    <Check className='size-[14px]' />
+                  ) : (
+                    <PlayOutline className='size-[14px]' />
+                  )}
+                </Button>
+              </Tooltip.Trigger>
+              <Tooltip.Content side='top'>{running ? 'Stop' : 'Run'}</Tooltip.Content>
+            </Tooltip.Root>
+            {[
+              { label: 'Disable', Icon: Circle },
+              { label: 'Lock', Icon: Unlock },
+              ...(!block.isTrigger ? [{ label: 'Duplicate', Icon: Duplicate }] : []),
+              { label: 'Delete', Icon: Trash },
+            ].map(({ label, Icon }) => (
+              <Tooltip.Root key={label} preferAbove>
+                <Tooltip.Trigger asChild>
+                  <span className='inline-flex'>
+                    <Button
+                      type='button'
+                      variant='ghost'
+                      size={null}
+                      disabled={!decorative}
+                      aria-label={`${label} unavailable in preview`}
+                      className={cn(
+                        'pointer-events-none',
+                        getActionButtonClassName(label === 'Delete' ? 'last' : 'middle', selected)
+                      )}
+                    >
+                      <Icon className='size-[14px]' />
+                    </Button>
+                  </span>
+                </Tooltip.Trigger>
+                <Tooltip.Content side='top'>{label} is unavailable in preview</Tooltip.Content>
+              </Tooltip.Root>
+            ))}
+          </div>
+        </>
+      ) : null}
+
+      <div
+        ref={borderHostRef}
+        role={onSelect ? 'button' : undefined}
+        tabIndex={onSelect ? 0 : undefined}
+        aria-pressed={onSelect ? selected : undefined}
+        onClick={() => onSelect?.(block.id)}
+        onKeyDown={(event) => {
+          if (onSelect) handleKeyboardActivation(event, () => onSelect(block.id))
+        }}
+        className={cn(
+          'relative h-full w-full rounded-2xl',
+          onSelect && 'cursor-pointer focus-visible:outline-none'
+        )}
+      >
+        <WorkflowBlockBorder
+          nodeId={block.id}
+          ports={getPorts(block, actionMenuWidth, orientation)}
+          cursorSwellEnabled={!decorative}
+          canStartConnection={!decorative && !block.isTerminal}
+          canReceiveConnection={!decorative && !block.isTrigger}
+          hasRing={selected || complete}
+          ringStyles={ringStyles}
+          isSelected={selected}
+          initialHeight={blockHeight(block)}
+          onActionMenuReadyChange={showActionMenu ? setActionMenuReady : undefined}
         />
-      )}
+
+        <div
+          className={cn(
+            'relative z-10 flex items-center justify-between px-2',
+            hasContentBelowHeader ? 'h-[40px]' : 'h-[48px]'
+          )}
+        >
+          <span className='min-w-0 flex-1 truncate text-[17px] text-[var(--text-primary)]'>
+            {block.name}
+          </span>
+          <WorkflowTypeTag
+            type={type}
+            typeLabel={block.typeLabel ?? block.name}
+            Icon={block.icon}
+            iconBgColor={block.bgColor}
+            isIntegration={block.isIntegration}
+          />
+        </div>
+
+        {hasContentBelowHeader ? (
+          <div className='relative z-10 flex flex-col gap-2 p-2'>
+            {block.sentence ? (
+              <CanvasSentenceView
+                segments={block.sentence.segments}
+                renderChip={(subBlockId) => {
+                  const value = block.sentence?.values[subBlockId]
+                  return value ? (
+                    <InlineChip>
+                      <span className='block max-w-[138px] truncate'>{value}</span>
+                    </InlineChip>
+                  ) : null
+                }}
+              />
+            ) : (
+              block.rows.map((row) => (
+                <SubBlockRowView key={row.title} title={row.title} displayValue={row.value} />
+              ))
+            )}
+
+            {showErrorRow ? (
+              <div className='flex h-[24px] shrink-0 items-center justify-between rounded-[6px] bg-[var(--surface-5)] pr-1 pl-2 dark:bg-[var(--surface-4)]'>
+                <span className='text-[var(--text-secondary)] text-caption'>On error</span>
+                <Switch
+                  checked={false}
+                  aria-label='On error branch disabled in preview'
+                  disabled
+                  className='scale-[0.72]'
+                />
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+      </div>
     </div>
   )
 }
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/stage-data.ts b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/stage-data.ts
index fb43f689326..0c3535cf554 100644
--- a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/stage-data.ts
+++ b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/stage-data.ts
@@ -1,15 +1,26 @@
 import { Table as TableIcon } from '@sim/emcn/icons'
-import { AgentIcon, CodeIcon, SlackIcon, StartIcon } from '@/components/icons'
-import type { BlockDef } from '@/app/(landing)/components/hero/components/hero-visual/workflow-data'
-import { BLOCK_WIDTH } from '@/app/(landing)/components/hero/components/hero-visual/workflow-data'
+import { CONNECTION_KNOB_PEAK_PX } from '@sim/workflow-renderer'
+import {
+  AgentIcon,
+  ApiIcon,
+  CodeIcon,
+  ConditionalIcon,
+  SlackIcon,
+  StartIcon,
+} from '@/components/icons'
+import {
+  BLOCK_WIDTH,
+  type BlockDef,
+  blockHeight,
+} from '@/app/(landing)/components/hero/components/hero-visual/workflow-data'
 
 /**
  * Design-space geometry for the hero's live workflow stage - the lead-enrichment
- * flow the chat conversation "builds": Start feeds the enrichment agent, a
- * scoring function follows, and the flow fans out to Slack and Tables. Block
- * tiles use the platform's grey text ramp (each block a different shade, dark
- * enough to carry the white glyph) - color is reserved for REAL third-party
- * marks, so only Slack keeps its brand tile (#611F69).
+ * flow the chat conversation "builds": Start feeds a research agent, normalized
+ * company data is scored, and a condition routes qualified leads through Slack
+ * into Tables while the alternate path verifies the company through an API.
+ * The graph follows production's left-input/right-output topology and extends
+ * beyond the initial viewport so the homepage canvas has useful space to pan.
  *
  * Blocks are ordered by build sequence - the stage reveals `blocks[0..built-1]`
  * as the loop's build counter advances, and an edge draws once both its
@@ -19,63 +30,116 @@ export const STAGE_BLOCKS: BlockDef[] = [
   {
     id: 'start',
     name: 'Start',
+    type: 'start_trigger',
+    typeLabel: 'Start',
     icon: StartIcon,
     bgColor: 'var(--text-muted)',
     isTrigger: true,
-    rows: [{ title: 'Inputs', value: '-' }],
-    x: 155,
-    y: 12,
+    rows: [],
+    x: 40,
+    y: 310,
   },
   {
     id: 'enrich',
     name: 'Enrich lead',
+    type: 'agent',
+    typeLabel: 'Agent',
     icon: AgentIcon,
     bgColor: 'var(--text-primary)',
-    rows: [
-      { title: 'Messages', value: '-' },
-      { title: 'Model', value: '-' },
-      { title: 'Files', value: '-' },
-    ],
-    x: 155,
-    y: 172,
+    sentence: {
+      segments: ['Prompt', { subBlockId: 'model', noun: 'model' }],
+      values: { model: 'GPT-6 Astra' },
+    },
+    rows: [],
+    x: 390,
+    y: 278,
   },
   {
     id: 'score',
-    name: 'Score fit',
+    name: 'Score company fit',
+    type: 'function',
+    typeLabel: 'Function',
     icon: CodeIcon,
-    bgColor: 'var(--text-secondary)',
+    bgColor: '#FF402F',
+    sentence: {
+      segments: ['Run', { subBlockId: 'code', noun: 'code' }],
+      values: { code: 'code' },
+    },
+    rows: [],
+    x: 740,
+    y: 278,
+  },
+  {
+    id: 'route',
+    name: 'Qualified lead?',
+    type: 'condition',
+    typeLabel: 'Condition',
+    icon: ConditionalIcon,
+    bgColor: '#FF752F',
     rows: [
-      { title: 'Code', value: '-' },
-      { title: 'Timeout', value: '-' },
+      { title: 'If', value: 'score ≥ 80' },
+      { title: 'Else', value: 'score < 80' },
     ],
-    x: 155,
-    y: 390,
+    x: 1090,
+    y: 266,
   },
   {
     id: 'slack',
-    name: 'Post to #sales',
+    name: 'Post qualified lead',
+    type: 'slack',
+    typeLabel: 'Slack',
+    isIntegration: true,
     icon: SlackIcon,
     bgColor: '#611F69',
-    isTerminal: true,
-    rows: [
-      { title: 'Channel', value: '-' },
-      { title: 'Message', value: '-' },
-    ],
-    x: 0,
-    y: 580,
+    sentence: {
+      segments: [
+        'Post',
+        { subBlockId: 'message', noun: 'message' },
+        'to',
+        { subBlockId: 'channel', noun: 'channel' },
+      ],
+      values: { message: 'lead summary', channel: '#sales' },
+    },
+    rows: [],
+    x: 1440,
+    y: 170,
   },
   {
     id: 'tables',
-    name: 'Save to Tables',
+    name: 'Save qualified lead',
+    type: 'table',
+    typeLabel: 'Table',
     icon: TableIcon,
-    bgColor: 'var(--text-body)',
+    bgColor: '#10B981',
     isTerminal: true,
-    rows: [
-      { title: 'Table', value: '-' },
-      { title: 'Operation', value: '-' },
-    ],
-    x: 310,
-    y: 580,
+    sentence: {
+      segments: ['Insert row into', { subBlockId: 'table', noun: 'table' }],
+      values: { table: 'Qualified leads' },
+    },
+    rows: [],
+    x: 1790,
+    y: 170,
+  },
+  {
+    id: 'verify',
+    name: 'Verify company data',
+    type: 'api',
+    typeLabel: 'API',
+    icon: ApiIcon,
+    bgColor: '#2F55FF',
+    isTerminal: true,
+    sentence: {
+      segments: [
+        'Send',
+        { subBlockId: 'method', noun: 'method' },
+        'request to',
+        { subBlockId: 'url', noun: 'a URL' },
+      ],
+      values: { method: 'GET', url: 'company API' },
+    },
+    rows: [],
+    x: 1440,
+    y: 430,
   },
 ]
 
@@ -83,23 +147,14 @@ export const STAGE_BLOCKS: BlockDef[] = [
 export const STAGE_EDGES: ReadonlyArray<readonly [string, string]> = [
   ['start', 'enrich'],
   ['enrich', 'score'],
-  ['score', 'slack'],
-  ['score', 'tables'],
+  ['score', 'route'],
+  ['route', 'slack'],
+  ['slack', 'tables'],
+  ['route', 'verify'],
 ]
 
-/** Design-space bounding box of the layout above. */
-export const STAGE_CANVAS = { width: 560, height: 700 } as const
-
-/**
- * Approximate rendered block height - the icon-tile header (~40px) plus the
- * rows section (16px padding + 21px per row + 8px gaps). Used to place a
- * block's bottom (outgoing) handle; a few px of drift is invisible at stage
- * scale.
- */
-export function blockHeight(block: BlockDef): number {
-  const n = block.rows.length
-  return 40 + (n > 0 ? 16 + n * 21 + (n - 1) * 8 : 0)
-}
+/** Initial camera viewport. The workflow continues to the right. */
+export const STAGE_CANVAS = { width: 860, height: 720 } as const
 
 /**
  * Rounded orthogonal ("smoothstep") path for a VERTICAL flow - from a source's
@@ -124,7 +179,10 @@ export function verticalSmoothStep(sx: number, sy: number, tx: number, ty: numbe
 /** Handle anchor points for a block at its fixed position. */
 export function handleAnchors(block: BlockDef) {
   return {
-    out: { x: block.x + BLOCK_WIDTH / 2, y: block.y + blockHeight(block) },
-    in: { x: block.x + BLOCK_WIDTH / 2, y: block.y },
+    out: {
+      x: block.x + BLOCK_WIDTH / 2,
+      y: block.y + blockHeight(block) + CONNECTION_KNOB_PEAK_PX,
+    },
+    in: { x: block.x + BLOCK_WIDTH / 2, y: block.y - CONNECTION_KNOB_PEAK_PX },
   }
 }
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-platform-stage/hero-platform-stage.tsx b/apps/sim/app/(landing)/components/hero/components/hero-platform-stage/hero-platform-stage.tsx
new file mode 100644
index 00000000000..9cde993e6c1
--- /dev/null
+++ b/apps/sim/app/(landing)/components/hero/components/hero-platform-stage/hero-platform-stage.tsx
@@ -0,0 +1,49 @@
+import { cn } from '@sim/emcn'
+import Image from 'next/image'
+import { HeroPlatformLoopMount } from '@/app/(landing)/components/hero/components/hero-platform-loop'
+import { HOME_INSET, LANDING_STAGE_RADIUS } from '@/app/(landing)/components/landing-layout'
+
+/**
+ * Painted frame on the customer carousel's full content measure. The product
+ * window keeps the masthead's inset on desktop; smaller screens use a compact
+ * painted gutter so the interface retains its available space. One grayscale
+ * painting keeps identical brushwork across themes, with a charcoal treatment
+ * applied locally in dark mode.
+ */
+export function HeroPlatformStage() {
+  return (
+    <div
+      data-preview-stage=''
+      className={cn(
+        'relative isolate mt-20 w-full overflow-hidden bg-[var(--surface-3)] py-20',
+        'max-sm:mt-12 max-sm:p-4 max-lg:mt-16 max-lg:p-6 max-xl:py-16',
+        LANDING_STAGE_RADIUS
+      )}
+    >
+      <div aria-hidden='true' className='pointer-events-none absolute inset-0'>
+        <Image
+          data-preview-background=''
+          src='/landing/hero-painted-4k.webp'
+          alt=''
+          fill
+          priority
+          fetchPriority='high'
+          quality={90}
+          sizes='(max-width: 1727px) 100vw, 1648px'
+          className='object-cover dark:brightness-[0.28]'
+        />
+      </div>
+
+      <div
+        role='region'
+        aria-label='Interactive Sim product preview'
+        className={cn(
+          'relative aspect-[1280/735] overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--surface-1)] shadow-xs transition-[border-color,box-shadow] duration-300 ease-out has-[[data-preview-entering]]:border-transparent has-[[data-preview-entering]]:shadow-none motion-reduce:transition-none max-sm:aspect-[4/3] max-sm:min-h-[264px] max-xl:min-h-[480px]',
+          HOME_INSET
+        )}
+      >
+        <HeroPlatformLoopMount />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-platform-stage/index.ts b/apps/sim/app/(landing)/components/hero/components/hero-platform-stage/index.ts
new file mode 100644
index 00000000000..4cfbcb7c2e7
--- /dev/null
+++ b/apps/sim/app/(landing)/components/hero/components/hero-platform-stage/index.ts
@@ -0,0 +1 @@
+export { HeroPlatformStage } from './hero-platform-stage'
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-stat/hero-stat.module.css b/apps/sim/app/(landing)/components/hero/components/hero-stat/hero-stat.module.css
deleted file mode 100644
index 7c1f5bba716..00000000000
--- a/apps/sim/app/(landing)/components/hero/components/hero-stat/hero-stat.module.css
+++ /dev/null
@@ -1,69 +0,0 @@
-/* Plain fade-in for the hero stat number - one smooth opacity ramp. */
-@keyframes fade-in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-.fadeIn {
-  animation: fade-in 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
-}
-
-/*
- * Per-character entrance for the placeholder zeros: the leading "0" fades in
- * first, then each following character staggers in left to right (70ms per
- * character; the 11th lands at 700ms + 500ms fade = fully in by ~1.2s).
- */
-.char {
-  animation: fade-in 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
-}
-
-.char:nth-child(2) {
-  animation-delay: 70ms;
-}
-
-.char:nth-child(3) {
-  animation-delay: 140ms;
-}
-
-.char:nth-child(4) {
-  animation-delay: 210ms;
-}
-
-.char:nth-child(5) {
-  animation-delay: 280ms;
-}
-
-.char:nth-child(6) {
-  animation-delay: 350ms;
-}
-
-.char:nth-child(7) {
-  animation-delay: 420ms;
-}
-
-.char:nth-child(8) {
-  animation-delay: 490ms;
-}
-
-.char:nth-child(9) {
-  animation-delay: 560ms;
-}
-
-.char:nth-child(10) {
-  animation-delay: 630ms;
-}
-
-.char:nth-child(11) {
-  animation-delay: 700ms;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .fadeIn,
-  .char {
-    animation: none !important;
-  }
-}
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-stat/hero-stat.tsx b/apps/sim/app/(landing)/components/hero/components/hero-stat/hero-stat.tsx
deleted file mode 100644
index 1ddfb92f214..00000000000
--- a/apps/sim/app/(landing)/components/hero/components/hero-stat/hero-stat.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import { cn } from '@sim/emcn'
-import styles from '@/app/(landing)/components/hero/components/hero-stat/hero-stat.module.css'
-
-const STAT_VALUE = '0.00000206%'
-/** The last-three-digit count-up range: 000 -> 206 (Stripe-style iterate). */
-const COUNT_FROM = 0
-const COUNT_TO = 206
-/** Duration of the count-up once it starts. */
-const COUNT_DUR_MS = 1100
-/** The LIGHT-GREY placeholder zeros the number staggers in as, char by char. */
-const START_CHARS = `0.00000${String(COUNT_FROM).padStart(3, '0')}%`.split('')
-/**
- * When the per-character stagger has fully landed (last char starts at 700ms
- * + its 500ms fade - see hero-stat.module.css).
- */
-const CHARS_IN_AT_MS = 1200
-/**
- * The settle beat starts once the character stagger completes, plus a short
- * hold so the number reads before it rises.
- */
-const SETTLE_AT_MS = CHARS_IN_AT_MS + 150
-/**
- * The label reveal waits until the rising number (500ms ease-out) has cleared
- * the label's row, so the two never overlap mid-flight.
- */
-const REVEAL_AT_MS = SETTLE_AT_MS + 400
-/** The dark fill grows in last, once the label's fade-up has finished. */
-const FILL_AT_MS = REVEAL_AT_MS + 350
-
-/**
- * The hero's right-side stat, with a staggered page-load entrance in four
- * beats: the number appears at the bottom of the stat as LIGHT-GREY
- * placeholder zeros - the leading "0" fades in first, then each following
- * character staggers in left to right - alongside the progress rail (short,
- * bottom-anchored, spanning exactly the number's 18px line), the number rises
- * into its final slot while the rail GROWS upward at the same rate (same
- * duration + easing, so its top edge tracks the number's top), then the
- * "Global work done by Sim" label fades up beneath it while the number
- * DARKENS to `--text-primary` and the last digits COUNT UP 000 -> 206
- * (Stripe-style, ease-out so the ticks slow into the final value), and
- * finally the dark progress fill grows up from the rail's foot.
- *
- * Under `prefers-reduced-motion` everything renders settled immediately (the
- * fades are also disabled in the CSS module).
- */
-export function HeroStat() {
-  const [settled, setSettled] = useState(false)
-  const [revealed, setRevealed] = useState(false)
-  const [filled, setFilled] = useState(false)
-  const [count, setCount] = useState(COUNT_FROM)
-
-  useEffect(() => {
-    const media = window.matchMedia('(prefers-reduced-motion: reduce)')
-    let raf = 0
-    let settleTimer: ReturnType<typeof setTimeout>
-    let revealTimer: ReturnType<typeof setTimeout>
-    let fillTimer: ReturnType<typeof setTimeout>
-    let countTimer: ReturnType<typeof setTimeout>
-
-    const clearScheduled = () => {
-      clearTimeout(settleTimer)
-      clearTimeout(revealTimer)
-      clearTimeout(fillTimer)
-      clearTimeout(countTimer)
-      cancelAnimationFrame(raf)
-    }
-
-    const showSettled = () => {
-      clearScheduled()
-      setSettled(true)
-      setRevealed(true)
-      setFilled(true)
-      setCount(COUNT_TO)
-    }
-
-    const runEntrance = () => {
-      setSettled(false)
-      setRevealed(false)
-      setFilled(false)
-      setCount(COUNT_FROM)
-      settleTimer = setTimeout(() => setSettled(true), SETTLE_AT_MS)
-      revealTimer = setTimeout(() => setRevealed(true), REVEAL_AT_MS)
-      fillTimer = setTimeout(() => setFilled(true), FILL_AT_MS)
-      countTimer = setTimeout(() => {
-        const start = performance.now()
-        const tick = (now: number) => {
-          const t = Math.min((now - start) / COUNT_DUR_MS, 1)
-          const eased = 1 - (1 - t) ** 3
-          setCount(Math.round(COUNT_FROM + (COUNT_TO - COUNT_FROM) * eased))
-          if (t < 1) raf = requestAnimationFrame(tick)
-        }
-        raf = requestAnimationFrame(tick)
-      }, REVEAL_AT_MS)
-    }
-
-    // Re-synced on 'change' - not just on mount - so toggling the preference
-    // mid-entrance snaps straight to the settled state instead of leaving the
-    // stagger/count-up to keep running on its own clock.
-    const syncMotionPreference = () => {
-      clearScheduled()
-      if (media.matches) {
-        showSettled()
-        return
-      }
-      runEntrance()
-    }
-
-    syncMotionPreference()
-    media.addEventListener('change', syncMotionPreference)
-    return () => {
-      media.removeEventListener('change', syncMotionPreference)
-      clearScheduled()
-    }
-  }, [])
-
-  return (
-    <div className='flex w-fit shrink-0 items-stretch gap-3 max-lg:hidden'>
-      <div aria-hidden='true' className={cn('relative w-[2px]', styles.fadeIn)}>
-        <div
-          className={cn(
-            'absolute inset-x-0 bottom-0 flex flex-col justify-end rounded-full bg-[var(--surface-6)] transition-[top] duration-500',
-            settled ? 'top-0' : 'top-[calc(100%-18px)]'
-          )}
-        >
-          <div
-            className={cn(
-              'w-full rounded-full bg-[var(--text-body)] transition-[height] duration-300',
-              filled ? 'h-[4px]' : 'h-0'
-            )}
-          />
-        </div>
-      </div>
-      <div className='flex flex-col gap-1.5'>
-        <p
-          className={cn(
-            'text-[18px] tabular-nums leading-none transition-[transform,color] duration-500',
-            settled ? 'translate-y-0' : 'translate-y-[20px]',
-            revealed ? 'text-[var(--text-primary)]' : 'text-[var(--surface-7)]'
-          )}
-        >
-          <span className='sr-only'>{STAT_VALUE}</span>
-          <span aria-hidden='true'>
-            {revealed
-              ? `0.00000${String(count).padStart(3, '0')}%`
-              : START_CHARS.map((ch, i) => (
-                  <span key={i} className={styles.char}>
-                    {ch}
-                  </span>
-                ))}
-          </span>
-        </p>
-        <p
-          className={cn(
-            'text-[var(--text-muted)] text-sm leading-none transition-[opacity,transform] duration-300',
-            revealed ? 'translate-y-0 opacity-100' : 'translate-y-2 opacity-0'
-          )}
-        >
-          Global work done by Sim
-        </p>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-stat/index.ts b/apps/sim/app/(landing)/components/hero/components/hero-stat/index.ts
deleted file mode 100644
index 7ddec9cbf10..00000000000
--- a/apps/sim/app/(landing)/components/hero/components/hero-stat/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { HeroStat } from './hero-stat'
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-visual/block-handles.tsx b/apps/sim/app/(landing)/components/hero/components/hero-visual/block-handles.tsx
deleted file mode 100644
index 4d9b15763b6..00000000000
--- a/apps/sim/app/(landing)/components/hero/components/hero-visual/block-handles.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { cn } from '@sim/emcn'
-import type { BlockDef } from '@/app/(landing)/components/hero/components/hero-visual/workflow-data'
-
-interface BlockHandlesProps {
-  block: BlockDef
-  handlesVisible?: boolean
-}
-
-/**
- * The decorative edge-handle nubs for a block - an inbound nub on the left
- * unless the block is a trigger, an outbound nub on the right unless it's
- * terminal. Absolutely positioned, so the caller must be a `relative` (or
- * otherwise positioned) box of the block's width. Shared so the morphed chat
- * card (GitHub, rendered as content-only) can carry the same handles as the
- * real {@link WorkflowBlock} satellites.
- */
-export function BlockHandles({ block, handlesVisible = true }: BlockHandlesProps) {
-  return (
-    <>
-      {!block.isTrigger && (
-        <span
-          aria-hidden
-          className={cn(
-            '-translate-y-1/2 absolute top-5 left-[-7px] h-5 w-[7px] rounded-l-[2px] bg-[var(--workflow-edge)] transition-opacity [transition-duration:360ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]',
-            handlesVisible ? 'opacity-100' : 'opacity-0'
-          )}
-        />
-      )}
-      {!block.isTerminal && (
-        <span
-          aria-hidden
-          className={cn(
-            '-translate-y-1/2 absolute top-5 right-[-7px] h-5 w-[7px] rounded-r-[2px] bg-[var(--workflow-edge)] transition-opacity [transition-duration:360ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]',
-            handlesVisible ? 'opacity-100' : 'opacity-0'
-          )}
-        />
-      )}
-    </>
-  )
-}
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-visual/hero-visual.tsx b/apps/sim/app/(landing)/components/hero/components/hero-visual/hero-visual.tsx
deleted file mode 100644
index b30a1169e96..00000000000
--- a/apps/sim/app/(landing)/components/hero/components/hero-visual/hero-visual.tsx
+++ /dev/null
@@ -1,1196 +0,0 @@
-'use client'
-
-import {
-  type CSSProperties,
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react'
-import { cn } from '@sim/emcn'
-import { ThinkingLoader } from '@/components/ui'
-import { BlockHandles } from '@/app/(landing)/components/hero/components/hero-visual/block-handles'
-import {
-  type HomeMode,
-  StageHome,
-} from '@/app/(landing)/components/hero/components/hero-visual/stage-home'
-import {
-  type KbStage,
-  KnowledgeBasePanel,
-} from '@/app/(landing)/components/hero/components/hero-visual/stage-kb'
-import { WorkflowBlock } from '@/app/(landing)/components/hero/components/hero-visual/workflow-block'
-import {
-  ANSWER_MS_PER_CHAR,
-  ANSWER_TEXT,
-  BLOCK_WIDTH,
-  PROMPT_ATOMS,
-  SCENE_AGENT_FOCUS_TRANSLATE,
-  SCENE_BLOCK1,
-  SCENE_EDGES,
-  SCENE_FOLLOW_SCALE,
-  SCENE_JIRA_FOCUS_TRANSLATE,
-  SCENE_OVERVIEW_SCALE,
-  SCENE_OVERVIEW_TRANSLATE,
-  SCENE_SATELLITES,
-  SEND_BUBBLE_GROW_MS,
-  SEND_BUBBLE_HOLD_MS,
-  TYPE_MS_PER_ATOM,
-  WORKFLOW_FOCUS_SCALE,
-} from '@/app/(landing)/components/hero/components/hero-visual/workflow-data'
-import colorMixFallbacks from '@/app/(landing)/components/shared/color-mix-fallbacks/color-mix-fallbacks.module.css'
-
-/**
- * Animated hero visual - the only client island in the hero, decorative and
- * `aria-hidden`. A single pointer cursor drives a looping product demo:
- *
- * it glides into the input and clicks; the prompt types itself out
- * (`@github`/`@Jira` as inline icon-chips); it moves to send and clicks; the
- * camera smoothly zooms into the send button and HOLDS there while the disc
- * morphs into the gooey thinking loader and cycles through several shapes; then -
- * still zoomed - the loader slides to the reply slot on the left with the camera
- * panning to follow it (no zoom-out), docks, and calls out the world phrases;
- * only once the Mothership starts typing its reply does the camera zoom back out
- * to the full chat. The card then morphs into a GitHub → Agent → Jira workflow
- * (the cursor hides while the agent works); Jira morphs into a Knowledge Base
- * block, then a create modal opens, files drop in from "Finder", the cursor
- * returns to click Create, and an embedding map builds itself - before the whole
- * thing loops.
- *
- * Two elements are driven imperatively (writing transforms per `requestAnimation
- * Frame` to avoid per-frame React renders):
- * - The cursor measures its real DOM target (input, send button, Create button)
- *   and arcs there along a quadratic Bézier (control point lifted perpendicular)
- *   eased with `easeInOutCubic`, so it moves like a hand, not a slide.
- * - The thinking loader lives at THIS root (not in the card) so it can outlive the
- *   chat layers and stay glued to its target - the send button, then the reply
- *   slot - through the camera zoom, pan, and zoom-out, regardless of how the card
- *   reshapes beneath it. Each frame it measures its target's on-screen rect and
- *   matches its position and size; during the slide it lerps between the two.
- *
- * `prefers-reduced-motion` skips the timeline and shows a static built-workflow
- * frame.
- */
-
-type Phase =
-  | 'home'
-  | 'clickInput'
-  | 'typing'
-  | 'toSend'
-  | 'zoomSend'
-  | 'clickSend'
-  | 'discMorph'
-  | 'cycleHold'
-  | 'loaderSlide'
-  | 'phrases'
-  | 'phrasesOut'
-  | 'phrasesWide'
-  | 'answer'
-  | 'answerHold'
-  | 'morph'
-  | 'blockFocus'
-  | 'connectAgent'
-  | 'agentFocus'
-  | 'connectJira'
-  | 'jiraFocus'
-  | 'workflowFade'
-  | 'kbMorph'
-  | 'cameraOut'
-  | 'workflowHold'
-  | 'kbOpen'
-  | 'kbDrop'
-  | 'kbToCreate'
-  | 'kbClickCreate'
-  | 'kbEmbeddings'
-  | 'kbHold'
-
-/** Duration of the loader's send→reply slide; the camera pan + lerp share it. */
-const LOADER_SLIDE_MS = 1200
-/** Duration of the camera pulling back out to the whole card while the loader +
- * phrases stay on screen (the `phrasesOut` beat). */
-const ZOOM_OUT_MS = 1300
-/** Camera pan while a workflow connector draws to the next block. */
-const WORKFLOW_CONNECT_MS = 1600
-/** Final pull-out after the camera has visited GitHub, Agent, and Jira. */
-const WORKFLOW_ZOOM_OUT_MS = 2400
-/** Draw duration for each workflow connector, matched to the camera follow. */
-const WORKFLOW_EDGE_DRAW_MS = 1320
-
-const STEPS: Array<[Phase, number]> = [
-  ['home', 900],
-  ['clickInput', 360],
-  ['typing', PROMPT_ATOMS.length * TYPE_MS_PER_ATOM + 400],
-  // The camera zooms into the send button DURING `toSend` (concurrent with the
-  // cursor dragging over to it), so the two read as one motion - no arrive-then-
-  // zoom pause. `zoomSend` is just the short settle while the zoom finishes.
-  ['toSend', 700],
-  ['zoomSend', 350],
-  // Beat 1: a quick press, then the disc morphs into the loader (compose height
-  // held). Beat 2: the card grows, the bubble reveals after it settles, then the
-  // loader gets a short hold before the slide left.
-  ['clickSend', 300],
-  ['discMorph', 560],
-  ['cycleHold', SEND_BUBBLE_HOLD_MS],
-  ['loaderSlide', LOADER_SLIDE_MS],
-  // The loader shows ~2 shapes total (the cycleHold shape + one during the
-  // slide); the moment it docks left it goes straight to the zoom-out and reply
-  // rather than dwelling on more cycle shapes - so `phrases`/`phrasesWide` are
-  // just brief settles around the `phrasesOut` zoom-out, not a loading hold.
-  ['phrases', 700],
-  ['phrasesOut', ZOOM_OUT_MS],
-  ['phrasesWide', 700],
-  ['answer', ANSWER_TEXT.length * ANSWER_MS_PER_CHAR + 500],
-  ['answerHold', 700],
-  ['morph', 900],
-  ['blockFocus', 850],
-  ['connectAgent', WORKFLOW_CONNECT_MS],
-  ['agentFocus', 750],
-  ['connectJira', WORKFLOW_CONNECT_MS],
-  ['jiraFocus', 750],
-  ['workflowFade', 540],
-  ['kbMorph', 1150],
-  ['kbOpen', 1000],
-  ['kbDrop', 1500],
-  ['kbToCreate', 850],
-  ['kbClickCreate', 420],
-  ['kbEmbeddings', 2600],
-  ['kbHold', 1400],
-]
-
-const HOME_PHASES = new Set<Phase>([
-  'home',
-  'clickInput',
-  'typing',
-  'toSend',
-  'zoomSend',
-  'clickSend',
-  'discMorph',
-  'cycleHold',
-  'loaderSlide',
-  'phrases',
-  'phrasesOut',
-  'phrasesWide',
-  'answer',
-  'answerHold',
-  'morph',
-])
-/** Compose beats where the greeting headline is shown - while the prompt is
- * being composed and sent, never once the conversation/loader takes over. */
-const GREETING_PHASES = new Set<Phase>([
-  'home',
-  'clickInput',
-  'typing',
-  'toSend',
-  'zoomSend',
-  'clickSend',
-])
-const WORKFLOW_PHASES = new Set<Phase>([
-  'blockFocus',
-  'connectAgent',
-  'agentFocus',
-  'connectJira',
-  'jiraFocus',
-  'workflowFade',
-  'kbMorph',
-  'cameraOut',
-  'workflowHold',
-  'kbOpen',
-  'kbDrop',
-  'kbToCreate',
-  'kbClickCreate',
-  'kbEmbeddings',
-  'kbHold',
-])
-const KB_PHASES = new Set<Phase>([
-  'kbOpen',
-  'kbDrop',
-  'kbToCreate',
-  'kbClickCreate',
-  'kbEmbeddings',
-  'kbHold',
-])
-const CLICK_PHASES = new Set<Phase>(['clickInput', 'clickSend', 'kbClickCreate'])
-/** The cursor stays on the send button through the push-in and the click, then
- * steps off-screen for the disc morph so the cycling loader reads cleanly, and
- * stays gone while the Mothership thinks, replies, and builds. */
-const HIDE_CURSOR_PHASES = new Set<Phase>([
-  'discMorph',
-  'cycleHold',
-  'loaderSlide',
-  'phrases',
-  'phrasesOut',
-  'phrasesWide',
-  'answer',
-  'answerHold',
-  'morph',
-  'blockFocus',
-  'connectAgent',
-  'agentFocus',
-  'connectJira',
-  'jiraFocus',
-  'workflowFade',
-  'kbMorph',
-  'cameraOut',
-  'workflowHold',
-  'kbOpen',
-  'kbDrop',
-])
-/** Beats the root thinking loader is mounted for - from the disc morph through
- * the slide, phrases, and the pull-out to the wide card, fading out as the reply
- * types. */
-const LOADER_PHASES = new Set<Phase>([
-  'discMorph',
-  'cycleHold',
-  'loaderSlide',
-  'phrases',
-  'phrasesOut',
-  'phrasesWide',
-  'answer',
-])
-/** Beats where the camera + loader are driven imperatively per frame (the held,
- * slide, and pull-out beats). `answer` is excluded - there the camera is already
- * settled wide and the loader is frozen, fading. */
-const LOADER_PAINT_PHASES = new Set<Phase>([
-  'discMorph',
-  'cycleHold',
-  'loaderSlide',
-  'phrases',
-  'phrasesOut',
-  'phrasesWide',
-])
-
-/** Cursor hotspot offset within its SVG (the arrow tip), in px at the rendered size. */
-const TIP_X = 6
-const TIP_Y = 3
-/** How far below the input the cursor seeds on first paint before gliding up into it. */
-const CURSOR_ENTRY_DROP = 48
-/** Per-frame catch-up fraction for the cursor chasing the send button during the push-in. */
-const CURSOR_CHASE = 0.14
-
-/** How far the camera zooms into the send button before the morph + zoom-out. */
-const ZOOM_SCALE = 2.4
-
-/** Base render size of the root loader, in px; the tracker scales it to its target. */
-const LOADER_BASE = 28
-const JIRA_BLOCK_HEIGHT = 77
-const KB_PANEL_WIDTH = 420
-const KB_PANEL_HEIGHT = 410
-const KB_PANEL_MORPH_SCALE = 1 / SCENE_FOLLOW_SCALE
-const KB_PANEL_TARGET_OFFSET_Y = -3
-
-/**
- * Flat `#383838` ink with no glow - the chat send button's fill. Applied to the
- * root loader while it sits settled on the send button, so its orb reads as that
- * exact dark disc; dropped once it unsettles, and the loader's CSS tweens
- * `stop-color`/`flood-color` back to the brand gradient as it starts cycling.
- */
-const SEND_BUTTON_INK = {
-  '--tl-grad-inner': '#383838',
-  '--tl-grad-outer': '#383838',
-  '--tl-glow': 'transparent',
-} as CSSProperties
-
-/**
- * Landing loader ink - keeps the loader's default radial gloss (center darker,
- * edge lifted ~24% toward white, the same relative step as the stock
- * `#2c2c2c → #5f5f5f`) but recentres it on `var(--text-body)`, the navbar's text
- * color, so each blob's center matches the nav links and wordmark while the edge
- * stays that same relative step lighter. Glow off so nothing over-lightens the
- * silhouette.
- */
-const LANDING_LOADER_INK = {
-  '--tl-grad-inner': 'var(--text-body)',
-  '--tl-grad-outer': 'var(--thinking-loader-outer)',
-  '--tl-glow': 'transparent',
-} as CSSProperties
-
-function kbStageFor(phase: Phase): KbStage {
-  if (phase === 'kbMorph' || phase === 'kbOpen') return 'empty'
-  if (phase === 'kbEmbeddings' || phase === 'kbHold') return 'embeddings'
-  return 'files'
-}
-
-function homeModeFor(phase: Phase): HomeMode {
-  // `morphing` (disc morph): compose-height layout held (the input stays in flow,
-  // fading) so the disc becomes the loader in place - no reshape mid-morph.
-  if (phase === 'discMorph') return 'morphing'
-  // `sending` (cycle hold): the morph is done; the user bubble animates in above
-  // the loader and the card grows to fit it, camera still zoomed.
-  if (phase === 'cycleHold') return 'sending'
-  // The conversation appears as the loader leaves for the reply slot, and holds
-  // through the pull-out to the wide card while the loader + phrases stay up.
-  if (
-    phase === 'loaderSlide' ||
-    phase === 'phrases' ||
-    phase === 'phrasesOut' ||
-    phase === 'phrasesWide'
-  ) {
-    return 'thinking'
-  }
-  if (phase === 'answer' || phase === 'answerHold') return 'answering'
-  // The card stays the GitHub block through the whole workflow pull-out - it IS
-  // block 1 of the scene, never unmounting.
-  if (
-    phase === 'morph' ||
-    phase === 'blockFocus' ||
-    phase === 'connectAgent' ||
-    phase === 'agentFocus' ||
-    phase === 'connectJira' ||
-    phase === 'jiraFocus' ||
-    phase === 'workflowFade' ||
-    phase === 'kbMorph' ||
-    phase === 'cameraOut' ||
-    phase === 'workflowHold'
-  ) {
-    return 'block'
-  }
-  return 'compose'
-}
-
-const easeInOutCubic = (t: number) => (t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2)
-
-function sceneTransformFor(phase: Phase): string {
-  if (phase === 'connectAgent' || phase === 'agentFocus') {
-    return `translate(${SCENE_AGENT_FOCUS_TRANSLATE.x}px, ${SCENE_AGENT_FOCUS_TRANSLATE.y}px) scale(${SCENE_FOLLOW_SCALE})`
-  }
-  if (
-    phase === 'connectJira' ||
-    phase === 'jiraFocus' ||
-    phase === 'workflowFade' ||
-    phase === 'kbMorph' ||
-    KB_PHASES.has(phase)
-  ) {
-    return `translate(${SCENE_JIRA_FOCUS_TRANSLATE.x}px, ${SCENE_JIRA_FOCUS_TRANSLATE.y}px) scale(${SCENE_FOLLOW_SCALE})`
-  }
-  if (phase === 'cameraOut' || phase === 'workflowHold') {
-    return `translate(${SCENE_OVERVIEW_TRANSLATE.x}px, ${SCENE_OVERVIEW_TRANSLATE.y}px) scale(${SCENE_OVERVIEW_SCALE})`
-  }
-  return 'translate(0px, 0px) scale(1)'
-}
-
-function sceneTransitionMsFor(phase: Phase): number {
-  if (phase === 'connectAgent' || phase === 'connectJira') return WORKFLOW_CONNECT_MS
-  if (phase === 'cameraOut') return WORKFLOW_ZOOM_OUT_MS
-  if (phase === 'kbMorph') return 900
-  return 700
-}
-
-function edgeDrawn(edgeIndex: number, phase: Phase): boolean {
-  if (edgeIndex === 0) {
-    return (
-      phase === 'connectAgent' ||
-      phase === 'agentFocus' ||
-      phase === 'connectJira' ||
-      phase === 'jiraFocus' ||
-      phase === 'workflowFade' ||
-      phase === 'kbMorph' ||
-      KB_PHASES.has(phase) ||
-      phase === 'cameraOut' ||
-      phase === 'workflowHold'
-    )
-  }
-  return (
-    phase === 'connectJira' ||
-    phase === 'jiraFocus' ||
-    phase === 'workflowFade' ||
-    phase === 'kbMorph' ||
-    KB_PHASES.has(phase) ||
-    phase === 'cameraOut' ||
-    phase === 'workflowHold'
-  )
-}
-
-function satelliteVisible(blockId: string, phase: Phase): boolean {
-  if (blockId === 'agent') {
-    return (
-      phase === 'connectAgent' ||
-      phase === 'agentFocus' ||
-      phase === 'connectJira' ||
-      phase === 'jiraFocus' ||
-      phase === 'workflowFade' ||
-      phase === 'kbMorph' ||
-      KB_PHASES.has(phase) ||
-      phase === 'cameraOut' ||
-      phase === 'workflowHold'
-    )
-  }
-  if (blockId === 'jira') {
-    return (
-      phase === 'connectJira' ||
-      phase === 'jiraFocus' ||
-      phase === 'workflowFade' ||
-      phase === 'kbMorph' ||
-      KB_PHASES.has(phase) ||
-      phase === 'cameraOut' ||
-      phase === 'workflowHold'
-    )
-  }
-  return phase === 'cameraOut' || phase === 'workflowHold'
-}
-
-export function HeroVisual() {
-  const containerRef = useRef<HTMLDivElement>(null)
-  const inputRef = useRef<HTMLDivElement>(null)
-  const sendRef = useRef<HTMLDivElement>(null)
-  const dockRef = useRef<HTMLDivElement>(null)
-  const cardRef = useRef<HTMLDivElement>(null)
-  // The send-bubble grow: while active (the `sending` beat), `paintFrame` eases the
-  // card's height from `h0`→`h1` per frame (writing `--hero-card-h`) and pins the
-  // camera to the freshly-measured send button in the SAME frame - so the card and
-  // the camera move in lockstep and the grow can't shake.
-  const growRef = useRef({ active: false, start: 0, h0: 0, h1: 0 })
-  const createRef = useRef<HTMLSpanElement>(null)
-  const cursorElRef = useRef<HTMLDivElement>(null)
-  const cursorPosRef = useRef({ x: 0, y: 0 })
-  const rafRef = useRef<number | undefined>(undefined)
-  const initedRef = useRef(false)
-  // Camera: the chat's zoom wrapper. `zoomSend`/`answer` drive it with React state
-  // + a CSS transition (smooth push / pull); the held + slide beats in between
-  // drive it imperatively (see `paintFrame`), locked frame-for-frame to the loader
-  // so the camera can never outrun it. The origin (un-zoomed send center) and the
-  // live translate are shared between the two regimes for a seamless handoff.
-  const cameraElRef = useRef<HTMLDivElement>(null)
-  const zoomOriginRef = useRef('50% 50%')
-  const zoomOriginPxRef = useRef({ x: 0, y: 0 })
-  const zoomTranslateRef = useRef({ x: 0, y: 0 })
-  // The root loader, its per-frame target, and the on-screen anchors the slide
-  // tweens between (captured when the slide begins).
-  const loaderElRef = useRef<HTMLDivElement>(null)
-  const loaderTrackRef = useRef<{
-    kind: 'send' | 'slide' | 'reply' | 'zoomOut' | 'wide'
-    start: number
-  }>({
-    kind: 'send',
-    start: 0,
-  })
-  const slideAnchorRef = useRef({ from: { x: 0, y: 0 }, to: { x: 0, y: 0 } })
-  // The on-screen spot the loader holds while the disc morphs + cycles. Captured
-  // when the morph begins (the zoom-centred send button) so that, as the card
-  // grows to fit the user bubble above, the camera pans to keep the loader pinned
-  // here - it never drifts down with the reshaping card.
-  const sendAnchorRef = useRef({ x: 0, y: 0 })
-  // The camera translate captured when the pull-out begins; the `zoomOut` beat
-  // lerps it (and the scale) back to identity while the loader rides the dock.
-  const zoomOutFromRef = useRef({ x: 0, y: 0 })
-
-  const [phase, setPhase] = useState<Phase>('home')
-  const [typedCount, setTypedCount] = useState(0)
-  const [answerTypedCount, setAnswerTypedCount] = useState(0)
-  const [zoomStyle, setZoomStyle] = useState<CSSProperties | undefined>(undefined)
-  const [ready, setReady] = useState(false)
-
-  const animateCursorTo = useCallback((tx: number, ty: number, snap: boolean) => {
-    const el = cursorElRef.current
-    if (!el) return
-    if (rafRef.current) cancelAnimationFrame(rafRef.current)
-
-    const start = cursorPosRef.current
-    const dx = tx - start.x
-    const dy = ty - start.y
-    const distance = Math.hypot(dx, dy)
-
-    const writeTransform = (x: number, y: number) => {
-      el.style.transform = `translate(${x - TIP_X}px, ${y - TIP_Y}px)`
-    }
-
-    if (snap || distance < 1) {
-      cursorPosRef.current = { x: tx, y: ty }
-      writeTransform(tx, ty)
-      return
-    }
-
-    const duration = Math.min(1000, Math.max(380, distance * 1.05))
-    const mx = (start.x + tx) / 2
-    const my = (start.y + ty) / 2
-    const lift = Math.min(distance * 0.22, 70)
-    let cx = mx + (-dy / distance) * lift
-    let cy = my + (dx / distance) * lift
-    if (cy > my) {
-      cx = mx - (-dy / distance) * lift
-      cy = my - (dx / distance) * lift
-    }
-
-    const startTime = performance.now()
-    const frame = (now: number) => {
-      const t = Math.min((now - startTime) / duration, 1)
-      const e = easeInOutCubic(t)
-      const m = 1 - e
-      const x = m * m * start.x + 2 * m * e * cx + e * e * tx
-      const y = m * m * start.y + 2 * m * e * cy + e * e * ty
-      cursorPosRef.current = { x, y }
-      writeTransform(x, y)
-      rafRef.current = t < 1 ? requestAnimationFrame(frame) : undefined
-    }
-    rafRef.current = requestAnimationFrame(frame)
-  }, [])
-
-  const cursorPointFor = useCallback((target: Phase): { x: number; y: number } | null => {
-    const container = containerRef.current
-    if (!container) return null
-    const cr = container.getBoundingClientRect()
-
-    if (target === 'home' || target === 'clickInput' || target === 'typing') {
-      const r = inputRef.current?.getBoundingClientRect()
-      if (!r) return null
-      // Click low-left: nudged ~20px left of the field's start, and vertically
-      // centred on the send button's row (measured live) - at the bottom-left
-      // of the card, not over the top line of text.
-      const s = sendRef.current?.getBoundingClientRect()
-      const y = (s ? s.top + s.height / 2 : r.top + r.height / 2) - cr.top
-      return { x: r.left - cr.left + 26, y }
-    }
-    if (target === 'toSend' || target === 'zoomSend' || target === 'clickSend') {
-      // Measured live, so once the camera has zoomed the send button the cursor
-      // lands on it at its enlarged on-screen position.
-      const r = sendRef.current?.getBoundingClientRect()
-      if (r) return { x: r.left - cr.left + r.width / 2, y: r.top - cr.top + r.height / 2 }
-      return null
-    }
-    if (
-      target === 'kbToCreate' ||
-      target === 'kbClickCreate' ||
-      target === 'kbEmbeddings' ||
-      target === 'kbHold'
-    ) {
-      const r = createRef.current?.getBoundingClientRect()
-      if (r) return { x: r.left - cr.left + r.width / 2, y: r.top - cr.top + r.height / 2 }
-    }
-    return null
-  }, [])
-
-  const positionCursor = useCallback(
-    (target: Phase, snap: boolean) => {
-      const point = cursorPointFor(target)
-      if (point) animateCursorTo(point.x, point.y, snap)
-    },
-    [cursorPointFor, animateCursorTo]
-  )
-
-  // One frame of the held/slide camera + loader. The loader is placed at an
-  // on-screen ANCHOR that tweens along a smooth path (its morph spot → a
-  // below-centre spot, where the reply sits under the bubble); the camera is then
-  // nudged so the loader's card target (the disc → the reply slot) sits under that
-  // anchor - so the camera follows the loader, never leading it. Because the
-  // loader rides the smooth anchor path directly, its motion never jerks even as
-  // the card grows beneath it. Measure-and-write only; called every frame and once
-  // synchronously per phase change (no first-frame flash).
-  const paintFrame = useCallback(() => {
-    const loaderEl = loaderElRef.current
-    const cameraEl = cameraElRef.current
-    const container = containerRef.current
-    if (!loaderEl || !cameraEl || !container) return
-    const cr = container.getBoundingClientRect()
-    const O = zoomOriginPxRef.current
-    const Ts = zoomTranslateRef.current
-
-    const sendEl = sendRef.current?.getBoundingClientRect()
-    const sendTarget = sendEl
-      ? { x: sendEl.left - cr.left + sendEl.width / 2, y: sendEl.top - cr.top + sendEl.height / 2 }
-      : null
-
-    const write = (
-      anchorX: number,
-      anchorY: number,
-      loaderScale: number,
-      camScale: number,
-      camX: number,
-      camY: number
-    ) => {
-      cameraEl.style.transformOrigin = `${O.x}px ${O.y}px`
-      cameraEl.style.transform = `translate(${camX}px, ${camY}px) scale(${camScale})`
-      loaderEl.style.transform = `translate(${anchorX}px, ${anchorY}px) scale(${loaderScale})`
-    }
-
-    const track = loaderTrackRef.current
-
-    // Held on the disc while it morphs + cycles: pin the loader to the spot the
-    // send button held when the morph began. As the card grows to fit the user
-    // bubble appearing above, the send button slides down within it - so pan the
-    // camera to cancel that drift, keeping the loader (and the disc under it) fixed
-    // on screen. The bubble then reads as expanding the card upward from the loader.
-    if (track.kind === 'send') {
-      // Drive the card height FIRST (the send-bubble grow), so the send button we
-      // measure next reflects this frame's exact height - no CSS-transition lag for
-      // the camera to chase. The grow is eased here; the height write + the camera
-      // pin happen in the same frame, so they stay locked together (no shake).
-      const grow = growRef.current
-      if (grow.active) {
-        const gt = easeInOutCubic(
-          Math.min((performance.now() - grow.start) / SEND_BUBBLE_GROW_MS, 1)
-        )
-        const h = grow.h0 + (grow.h1 - grow.h0) * gt
-        container.style.setProperty('--hero-card-h', `${h}px`)
-      }
-      const sr = sendRef.current?.getBoundingClientRect()
-      if (!sr) return
-      const sx = sr.left - cr.left + sr.width / 2
-      const sy = sr.top - cr.top + sr.height / 2
-      const anchor = sendAnchorRef.current
-      Ts.x += anchor.x - sx
-      Ts.y += anchor.y - sy
-      write(anchor.x, anchor.y, ZOOM_SCALE, ZOOM_SCALE, Ts.x, Ts.y)
-      return
-    }
-
-    // Pull-out: lerp the camera from its docked zoom back to identity (the whole
-    // card in view) while the loader keeps riding the dock - its scale tracks the
-    // camera so it stays glued to the card, shrinking with it. `wide` is the same
-    // beat pinned at the end (camera settled at identity, loader steady on the
-    // dock), so the phrases keep playing on the full-card view.
-    if (track.kind === 'zoomOut' || track.kind === 'wide') {
-      const t =
-        track.kind === 'wide'
-          ? 1
-          : easeInOutCubic(Math.min((performance.now() - track.start) / ZOOM_OUT_MS, 1))
-      const from = zoomOutFromRef.current
-      const camScale = ZOOM_SCALE + (1 - ZOOM_SCALE) * t
-      const camX = from.x * (1 - t)
-      const camY = from.y * (1 - t)
-      // Write the camera first, then measure the dock under it so the loader lands
-      // on the dock's live (shrinking) on-screen position this same frame.
-      cameraEl.style.transformOrigin = `${O.x}px ${O.y}px`
-      cameraEl.style.transform = `translate(${camX}px, ${camY}px) scale(${camScale})`
-      const dock = dockRef.current?.getBoundingClientRect()
-      if (!dock) return
-      const ax = dock.left - cr.left + dock.width / 2
-      const ay = dock.top - cr.top + dock.height / 2
-      loaderEl.style.transform = `translate(${ax}px, ${ay}px) scale(${camScale})`
-      return
-    }
-
-    // Slide / docked: traverse to the dock at the LEFT of the same row (so the
-    // move is purely horizontal - the card holds its size), the loader keeping its
-    // disc-matched size the whole way.
-    const dockEl = dockRef.current?.getBoundingClientRect()
-    if (!sendTarget || !dockEl) return
-    const dockTarget = {
-      x: dockEl.left - cr.left + dockEl.width / 2,
-      y: dockEl.top - cr.top + dockEl.height / 2,
-    }
-    const { from, to } = slideAnchorRef.current
-    const t =
-      track.kind === 'reply'
-        ? 1
-        : easeInOutCubic(Math.min((performance.now() - track.start) / LOADER_SLIDE_MS, 1))
-
-    const anchorX = from.x + (to.x - from.x) * t
-    const anchorY = from.y + (to.y - from.y) * t
-    const targetX = sendTarget.x + (dockTarget.x - sendTarget.x) * t
-    const targetY = sendTarget.y + (dockTarget.y - sendTarget.y) * t
-
-    // Pan so the loader's card target sits under its anchor - the camera follows.
-    Ts.x += anchorX - targetX
-    Ts.y += anchorY - targetY
-    write(anchorX, anchorY, ZOOM_SCALE, ZOOM_SCALE, Ts.x, Ts.y)
-  }, [])
-
-  useEffect(() => {
-    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
-    if (prefersReducedMotion) {
-      setTypedCount(PROMPT_ATOMS.length)
-      setPhase('workflowHold')
-      return
-    }
-
-    let stepIndex = 0
-    let stepTimeout: ReturnType<typeof setTimeout>
-    let typeInterval: ReturnType<typeof setInterval> | undefined
-
-    const clearTyping = () => {
-      if (typeInterval) {
-        clearInterval(typeInterval)
-        typeInterval = undefined
-      }
-    }
-
-    const runStep = () => {
-      const [nextPhase, duration] = STEPS[stepIndex]
-      setPhase(nextPhase)
-      clearTyping()
-
-      if (nextPhase === 'home' || nextPhase === 'clickInput') {
-        setTypedCount(0)
-        setAnswerTypedCount(0)
-      } else if (nextPhase === 'typing') {
-        setTypedCount(0)
-        let typed = 0
-        typeInterval = setInterval(() => {
-          typed += 1
-          setTypedCount(typed)
-          if (typed >= PROMPT_ATOMS.length) clearTyping()
-        }, TYPE_MS_PER_ATOM)
-      } else if (nextPhase === 'answer') {
-        let typed = 0
-        typeInterval = setInterval(() => {
-          typed += 1
-          setAnswerTypedCount(typed)
-          if (typed >= ANSWER_TEXT.length) clearTyping()
-        }, ANSWER_MS_PER_CHAR)
-      }
-
-      stepTimeout = setTimeout(() => {
-        stepIndex = (stepIndex + 1) % STEPS.length
-        runStep()
-      }, duration)
-    }
-
-    runStep()
-
-    return () => {
-      clearTimeout(stepTimeout)
-      clearTyping()
-    }
-  }, [])
-
-  // Reveal the cursor on mount (the opacity gate); the entrance below glides it in.
-  useLayoutEffect(() => {
-    setReady(true)
-  }, [])
-
-  useLayoutEffect(() => {
-    const firstPaint = !initedRef.current
-    initedRef.current = true
-    if (firstPaint) {
-      // First paint: the cursor enters from just below the field and glides up
-      // into it on the same eased arc every later beat uses - a hand reaching in,
-      // not a snap from the corner. Seed below (snap), then animate to the target.
-      const home = cursorPointFor('home')
-      if (home) {
-        animateCursorTo(home.x, home.y + CURSOR_ENTRY_DROP, true)
-        animateCursorTo(home.x, home.y, false)
-        return
-      }
-      positionCursor(phase, true) // not measurable yet: snap into place
-      return
-    }
-    // `toSend`/`zoomSend` are driven by the push-in chase effect (the cursor
-    // rides the send button as the camera zooms it to centre), so don't also
-    // arc the cursor to a stale target here.
-    if (phase === 'toSend' || phase === 'zoomSend') return
-    positionCursor(phase, false)
-  }, [phase, positionCursor, cursorPointFor, animateCursorTo])
-
-  // Push-in (`toSend` + `zoomSend`): the cursor CHASES the send button's live
-  // on-screen center each frame - a smooth exponential approach - so it drags
-  // over to the button AS the camera zooms that same spot to centre, catching up
-  // to and riding the button instead of arriving first and waiting for the zoom.
-  // Because the target is measured live, the chase tracks the button through the
-  // zoom's motion without any per-target tuning. `clickSend` then lands on the
-  // settled button via `positionCursor`, and `discMorph` hides it for the morph.
-  useEffect(() => {
-    if (phase !== 'toSend' && phase !== 'zoomSend') return
-    const container = containerRef.current
-    const el = cursorElRef.current
-    if (!container || !el) return
-    if (rafRef.current) {
-      cancelAnimationFrame(rafRef.current)
-      rafRef.current = undefined
-    }
-    let raf = 0
-    const chase = () => {
-      const cr = container.getBoundingClientRect()
-      const sr = sendRef.current?.getBoundingClientRect()
-      if (sr) {
-        const tx = sr.left - cr.left + sr.width / 2
-        const ty = sr.top - cr.top + sr.height / 2
-        const cur = cursorPosRef.current
-        const x = cur.x + (tx - cur.x) * CURSOR_CHASE
-        const y = cur.y + (ty - cur.y) * CURSOR_CHASE
-        cursorPosRef.current = { x, y }
-        el.style.transform = `translate(${x - TIP_X}px, ${y - TIP_Y}px)`
-      }
-      raf = requestAnimationFrame(chase)
-    }
-    raf = requestAnimationFrame(chase)
-    return () => cancelAnimationFrame(raf)
-  }, [phase])
-
-  // The camera's two STATE-driven beats: a smooth CSS-transitioned push into the
-  // send button (triggered at `toSend`, so it zooms WHILE the cursor drags over)
-  // and the pull back out (`answer`). Everything in between (the hold + slide) is
-  // driven imperatively by `paintFrame`, so here we hand off by leaving the
-  // transform to the imperative writes (`undefined`).
-  useLayoutEffect(() => {
-    const container = containerRef.current
-    if (!container) return
-    const cr = container.getBoundingClientRect()
-    if (cr.width < 120) return
-
-    if (phase === 'toSend') {
-      const sr = sendRef.current?.getBoundingClientRect()
-      if (!sr) return
-      const px = sr.left - cr.left + sr.width / 2
-      const py = sr.top - cr.top + sr.height / 2
-      zoomOriginRef.current = `${px}px ${py}px`
-      zoomOriginPxRef.current = { x: px, y: py }
-      const tx = cr.width / 2 - px
-      const ty = cr.height / 2 - py
-      zoomTranslateRef.current = { x: tx, y: ty }
-      setZoomStyle({
-        transform: `translate(${tx}px, ${ty}px) scale(${ZOOM_SCALE})`,
-        transformOrigin: zoomOriginRef.current,
-      })
-    } else if (phase === 'answer') {
-      setZoomStyle({
-        transform: 'translate(0px, 0px) scale(1)',
-        transformOrigin: zoomOriginRef.current,
-      })
-    }
-    // Held + slide beats: leave `zoomStyle` as-is (last applied at zoomSend). The
-    // per-frame `paintFrame` writes overwrite the camera transform directly, and
-    // there's no re-render within a beat to re-assert the stale inline style.
-  }, [phase])
-
-  // Aim the loader for the phase; on the slide, capture the on-screen anchors it
-  // tweens between (its current spot → a left-of-centre spot). Paint once
-  // synchronously so the camera + loader never flash before the rAF loop starts.
-  useLayoutEffect(() => {
-    if (phase === 'discMorph' || phase === 'cycleHold') {
-      const container = containerRef.current
-      const card = cardRef.current
-      if (phase === 'discMorph') {
-        growRef.current.active = false
-        // The send button is zoom-centred (the push-in maps it to the container
-        // centre); pin the loader there so the bubble growing in above it can't drag it down.
-        if (container) {
-          const cr = container.getBoundingClientRect()
-          sendAnchorRef.current = { x: cr.width / 2, y: cr.height / 2 }
-        }
-        // Remember the compose height the card owns RIGHT NOW - the grow at
-        // `cycleHold` starts from here (reading it then would pick up the variable).
-        if (card) growRef.current.h0 = card.offsetHeight
-      } else if (container && card) {
-        // `cycleHold`: the bubble is now in flow. Seed the height variable to the
-        // compose height and arm the grow toward the bubble's natural height -
-        // measured from the content element itself (its own box height), since the
-        // card's `scrollHeight` won't see the content overflowing ABOVE the top
-        // while it's bottom-anchored. `paintFrame` eases from here, lockstep w/ pin.
-        const content = card.firstElementChild as HTMLElement | null
-        const h0 = growRef.current.h0 || card.offsetHeight
-        const h1 = content ? content.offsetHeight : card.scrollHeight
-        container.style.setProperty('--hero-card-h', `${h0}px`)
-        growRef.current = { active: true, start: performance.now(), h0, h1 }
-      }
-      loaderTrackRef.current = { kind: 'send', start: 0 }
-    } else if (phase === 'loaderSlide') {
-      growRef.current.active = false
-      const container = containerRef.current
-      if (container) {
-        const cr = container.getBoundingClientRect()
-        // Start the slide from where the loader has been PINNED (the zoom-centred
-        // spot), not the send button's bubble-reshaped position - so the loader
-        // never jumps as the slide begins. Dock left-of-centre at the same height,
-        // a straight sideways slide with no vertical drift.
-        const from = { ...sendAnchorRef.current }
-        slideAnchorRef.current = { from, to: { x: cr.width * 0.34, y: from.y } }
-      }
-      loaderTrackRef.current = { kind: 'slide', start: performance.now() }
-    } else if (phase === 'phrases') {
-      loaderTrackRef.current = { kind: 'reply', start: 0 }
-    } else if (phase === 'phrasesOut') {
-      // Snapshot the docked camera pan so the pull-out lerps it back to identity.
-      zoomOutFromRef.current = { ...zoomTranslateRef.current }
-      loaderTrackRef.current = { kind: 'zoomOut', start: performance.now() }
-    } else if (phase === 'phrasesWide') {
-      loaderTrackRef.current = { kind: 'wide', start: 0 }
-    }
-    if (LOADER_PAINT_PHASES.has(phase)) paintFrame()
-  }, [phase, paintFrame])
-
-  // Run the camera+loader tracker only through the held/slide beats. At `answer`
-  // the loader is frozen at its last spot and fades while the camera (state) pulls
-  // back out.
-  const loaderPainting = LOADER_PAINT_PHASES.has(phase)
-  useEffect(() => {
-    if (!loaderPainting) return
-    let raf = 0
-    const loop = () => {
-      paintFrame()
-      raf = requestAnimationFrame(loop)
-    }
-    raf = requestAnimationFrame(loop)
-    return () => cancelAnimationFrame(raf)
-  }, [loaderPainting, paintFrame])
-
-  const phaseRef = useRef<Phase>(phase)
-  useEffect(() => {
-    phaseRef.current = phase
-  }, [phase])
-
-  useEffect(() => {
-    const onResize = () => positionCursor(phaseRef.current, true)
-    window.addEventListener('resize', onResize)
-    return () => window.removeEventListener('resize', onResize)
-  }, [positionCursor])
-
-  useEffect(
-    () => () => {
-      if (rafRef.current) cancelAnimationFrame(rafRef.current)
-    },
-    []
-  )
-
-  // The card (block 1) is mounted through the chat AND the whole workflow - it
-  // never unmounts, so it continuously becomes the GitHub block.
-  const showCard = HOME_PHASES.has(phase) || WORKFLOW_PHASES.has(phase)
-  // Mount the workflow layer one beat before the first connection draws, so the
-  // hidden edge paths have a real dash-offset state to transition from.
-  const showWorkflowCanvas = WORKFLOW_PHASES.has(phase)
-  const showCursor = ready && !HIDE_CURSOR_PHASES.has(phase)
-  const clicking = CLICK_PHASES.has(phase)
-
-  // Root loader material per beat: a settled dark orb on the disc (`discMorph`),
-  // then the morph cycle with the brand gradient; phrases reveal once docked; it
-  // fades as the reply types in.
-  const loaderShown = LOADER_PHASES.has(phase)
-  const loaderSettled = phase === 'discMorph'
-  const loaderPhrases =
-    phase === 'phrases' || phase === 'phrasesOut' || phase === 'phrasesWide' || phase === 'answer'
-  const loaderFading = phase === 'answer'
-
-  // The scene "camera": GitHub focus after the chat morph, then a paced pan to
-  // Agent, a paced pan to Jira, and an in-place KB block morph.
-  const sceneTransform = sceneTransformFor(phase)
-  const sceneTransitionMs = sceneTransitionMsFor(phase)
-  const workflowContentFaded =
-    phase === 'workflowFade' || phase === 'kbMorph' || KB_PHASES.has(phase)
-
-  return (
-    <div ref={containerRef} aria-hidden='true' className='relative h-full w-full overflow-hidden'>
-      {/* The scene: ONE coordinate space holding block 1 (the persistent chat
-          card) plus the workflow satellites + edges. The "camera" pull-out is a
-          single transform on this whole scene, so the card is continuously the
-          GitHub block. FOCUS is the identity transform (block 1 centered); only
-          the pull-out animates. */}
-      <div
-        className='absolute inset-0 transform-gpu transition-transform will-change-transform [transition-duration:1700ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]'
-        style={{
-          transform: sceneTransform,
-          transformOrigin: 'center',
-          transitionDuration: `${sceneTransitionMs}ms`,
-        }}
-      >
-        {showCard && (
-          <div
-            className='absolute inset-0 translate-y-0 scale-100 transition-opacity [transition-duration:420ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]'
-            style={{ opacity: workflowContentFaded ? 0 : 1 }}
-          >
-            <div
-              ref={cameraElRef}
-              className={cn(
-                // GPU-promoted so the per-frame camera transforms composite on their
-                // own layer - sub-pixel pans render smoothly instead of pixel-snapping
-                // (which reads as shake). Safe here: no card text is visible while the
-                // camera is zoomed (the input is faded, the bubble appears only once
-                // the camera is back at scale 1).
-                'h-full w-full transform-gpu will-change-transform',
-                // Only the push-in and pull-out ride a CSS transition; the held +
-                // slide beats are written imperatively (a transition here would
-                // fight the per-frame writes).
-                (phase === 'toSend' || phase === 'zoomSend' || phase === 'answer') &&
-                  'transition-transform [transition-duration:850ms] [transition-timing-function:cubic-bezier(0.65,0,0.35,1)]'
-              )}
-              style={zoomStyle}
-            >
-              <StageHome
-                mode={homeModeFor(phase)}
-                typedCount={typedCount}
-                answerTypedCount={answerTypedCount}
-                inputRef={inputRef}
-                sendRef={sendRef}
-                dockRef={dockRef}
-                cardRef={cardRef}
-                showGreeting={GREETING_PHASES.has(phase)}
-                pressed={phase === 'clickSend'}
-              />
-            </div>
-          </div>
-        )}
-
-        {WORKFLOW_PHASES.has(phase) && (
-          // GitHub (block 1) is the morphed chat card - rendered content-only and
-          // clipped by the card's `overflow-hidden`, so it can't carry its own
-          // edge nub. Draw its outbound handle here in scene space, positioned and
-          // scaled exactly like a satellite block, so it matches the other blocks.
-          <div
-            className='absolute'
-            style={{
-              left: `calc(50% + ${SCENE_BLOCK1.left}px)`,
-              top: `calc(50% + ${SCENE_BLOCK1.top}px)`,
-              width: BLOCK_WIDTH,
-              transform: `scale(${WORKFLOW_FOCUS_SCALE})`,
-              transformOrigin: 'top left',
-            }}
-          >
-            <BlockHandles block={SCENE_BLOCK1.block} />
-          </div>
-        )}
-
-        {showWorkflowCanvas && (
-          <>
-            {/* Edges (scene space, origin = panel center). Drawn as the camera
-                follows the connection to each revealed block. */}
-            <svg
-              className='absolute top-1/2 left-1/2 overflow-visible transition-opacity [transition-duration:420ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]'
-              width='1'
-              height='1'
-              fill='none'
-              aria-hidden='true'
-              style={{ opacity: workflowContentFaded ? 0 : 1 }}
-            >
-              {SCENE_EDGES.map((edge, i) => {
-                const drawn = edgeDrawn(i, phase)
-                return (
-                  <path
-                    key={edge.id}
-                    d={edge.d}
-                    pathLength={1}
-                    stroke='var(--workflow-edge)'
-                    strokeWidth={2 * WORKFLOW_FOCUS_SCALE}
-                    strokeLinecap='round'
-                    className='transition-[stroke-dashoffset] [stroke-dasharray:1] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]'
-                    style={
-                      {
-                        strokeDashoffset: drawn ? 0 : 1,
-                        transitionDelay: drawn ? '120ms' : '0ms',
-                        transitionDuration: drawn ? `${WORKFLOW_EDGE_DRAW_MS}ms` : '0ms',
-                      } as CSSProperties
-                    }
-                  />
-                )
-              })}
-            </svg>
-
-            {/* Satellite blocks (2…N), placed relative to the centered block 1
-                at FOCUS scale; each appears as its incoming edge reaches it. */}
-            {SCENE_SATELLITES.map(({ block, left, top }) => {
-              const showKbShell =
-                block.id === 'jira' && (phase === 'kbMorph' || KB_PHASES.has(phase))
-              const fadingJiraShell = block.id === 'jira' && phase === 'workflowFade'
-              const visible = satelliteVisible(block.id, phase)
-              const satelliteOpacity =
-                visible && (!workflowContentFaded || fadingJiraShell || showKbShell) ? 1 : 0
-              const delay =
-                (block.id === 'agent' && phase === 'connectAgent') ||
-                (block.id === 'jira' && phase === 'connectJira')
-                  ? 760
-                  : 0
-              return (
-                <div
-                  key={block.id}
-                  className={cn(
-                    'absolute transform-gpu transition-[opacity,transform,width,height,top,left] will-change-transform [transition-duration:520ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]',
-                    showKbShell &&
-                      'overflow-hidden rounded-xl border border-[var(--border-muted)] bg-[var(--surface-4)] p-[3px]'
-                  )}
-                  style={{
-                    left: showKbShell
-                      ? `calc(50% + ${left + (BLOCK_WIDTH * WORKFLOW_FOCUS_SCALE) / 2}px)`
-                      : `calc(50% + ${left}px)`,
-                    top: showKbShell
-                      ? `calc(50% + ${
-                          top +
-                          (JIRA_BLOCK_HEIGHT * WORKFLOW_FOCUS_SCALE) / 2 +
-                          KB_PANEL_TARGET_OFFSET_Y
-                        }px)`
-                      : `calc(50% + ${top}px)`,
-                    width: showKbShell ? KB_PANEL_WIDTH : BLOCK_WIDTH,
-                    height:
-                      block.id === 'jira'
-                        ? showKbShell
-                          ? KB_PANEL_HEIGHT
-                          : JIRA_BLOCK_HEIGHT
-                        : undefined,
-                    opacity: satelliteOpacity,
-                    transform: showKbShell
-                      ? `translate(-50%, -50%) scale(${KB_PANEL_MORPH_SCALE})`
-                      : `translateY(${visible ? 0 : 10}px) scale(${WORKFLOW_FOCUS_SCALE})`,
-                    transformOrigin: showKbShell ? 'center' : 'top left',
-                    transitionDelay: `${delay}ms`,
-                  }}
-                >
-                  {showKbShell ? (
-                    <KnowledgeBasePanel
-                      stage={kbStageFor(phase)}
-                      createRef={createRef}
-                      motion='morph'
-                    />
-                  ) : (
-                    <WorkflowBlock
-                      block={block}
-                      contentVisible={!fadingJiraShell}
-                      handlesVisible={!fadingJiraShell}
-                    />
-                  )}
-                </div>
-              )
-            })}
-          </>
-        )}
-      </div>
-
-      {/* Root thinking loader - positioned imperatively (transform written each
-          frame by `paintFrame`) so it stays glued to the send button, then the
-          reply slot, through the camera pan. The outer element carries the anchor
-          transform + scale; the inner shifts the loader by half a GLYPH (not half
-          the label row) so the GLYPH - not the phrase - centers on the anchor, and
-          the phrase flows out to its right inside the card. The fixed px offset
-          scales with the outer transform. */}
-      {loaderShown && (
-        <div
-          ref={loaderElRef}
-          aria-hidden='true'
-          className={cn(
-            // GPU-promoted: its per-frame transform writes composite on their own
-            // layer, so the slide + dock read as smooth sub-pixel motion instead of
-            // jittering as the position pixel-snaps each frame.
-            'pointer-events-none absolute top-0 left-0 z-20 transform-gpu transition-opacity duration-300 will-change-transform [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
-            colorMixFallbacks.loaderOuter,
-            loaderFading ? 'opacity-0' : 'opacity-100'
-          )}
-          style={{ transformOrigin: '0 0' }}
-        >
-          <div style={{ transform: `translate(-${LOADER_BASE / 2}px, -${LOADER_BASE / 2}px)` }}>
-            <ThinkingLoader
-              size={LOADER_BASE}
-              startVariant='corners'
-              settle={loaderSettled}
-              phase={loaderPhrases}
-              labelRatio={0.5}
-              shimmer={false}
-              style={loaderSettled ? SEND_BUTTON_INK : LANDING_LOADER_INK}
-            />
-          </div>
-        </div>
-      )}
-
-      <div
-        ref={cursorElRef}
-        className='pointer-events-none absolute top-0 left-0 z-30 transition-opacity duration-200 [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]'
-        style={{ opacity: showCursor ? 1 : 0 }}
-      >
-        <svg
-          // The click beat presses the cursor itself (a quick scale-dip about its
-          // tip) - no ring. Keyed by the click phase so the dip replays on each
-          // click; transform-origin pinned to the arrow tip so the hotspot holds.
-          key={clicking ? phase : 'cursor'}
-          width='30'
-          height='30'
-          viewBox='0 0 24 24'
-          fill='none'
-          className={cn(clicking && 'animate-hero-cursor-press motion-reduce:animate-none')}
-          style={{ transformOrigin: `${TIP_X}px ${TIP_Y}px` }}
-        >
-          <title>cursor</title>
-          <path
-            d='M4 2 L4 18 L8.2 13.8 L11 19.6 L13.4 18.5 L10.6 12.8 L16.4 12.8 Z'
-            fill='var(--surface-2)'
-            stroke='var(--text-body)'
-            strokeWidth='1.5'
-            strokeLinejoin='round'
-          />
-        </svg>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-visual/stage-home.tsx b/apps/sim/app/(landing)/components/hero/components/hero-visual/stage-home.tsx
deleted file mode 100644
index 91337a579ad..00000000000
--- a/apps/sim/app/(landing)/components/hero/components/hero-visual/stage-home.tsx
+++ /dev/null
@@ -1,412 +0,0 @@
-'use client'
-
-import {
-  type CSSProperties,
-  type RefObject,
-  useCallback,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react'
-import { cn } from '@sim/emcn'
-import { WorkflowBlockContent } from '@/app/(landing)/components/hero/components/hero-visual/workflow-block-content'
-import {
-  ANSWER_TEXT,
-  BLOCK_WIDTH,
-  BLOCKS,
-  HOME_GREETING,
-  PROMPT_ATOMS,
-  type PromptAtom,
-  SEND_BUBBLE_ENTER_MS,
-  SEND_BUBBLE_REVEAL_DELAY_MS,
-  WORKFLOW_FOCUS_SCALE,
-} from '@/app/(landing)/components/hero/components/hero-visual/workflow-data'
-
-/**
- * What the Mothership chat is showing right now. The travelling thinking loader
- * itself lives at the hero root (so it can outlive these layers and track its
- * target through the camera zoom + pan); this stage only lays out the card and
- * exposes the send button and reply slot as the loader's ref targets.
- *
- * - `compose` - greeting + prompt input (the typewriter).
- * - `morphing` - the instant after send: the disc morphs into the loader while
- *   the typed prompt fades. The card holds its compose height (the input stays in
- *   flow, just fading) so it never reshapes mid-morph - the disc just becomes the
- *   loader in place.
- * - `sending` - the morph is done; the prompt is now a user bubble that animates
- *   in above the loader, growing the card, while the camera holds zoomed in.
- * - `thinking` - conversation layout (user bubble + an empty reply slot whose
- *   height the loader will occupy), shown as the loader slides/docks there.
- * - `answering` - the typed reply fills the reply slot.
- * - `block` - the card morphs into the first workflow block (the chat shell
- *   resizes and its content becomes the block's), handing off to the workflow.
- */
-export type HomeMode = 'compose' | 'morphing' | 'sending' | 'thinking' | 'answering' | 'block'
-
-/** The first workflow block, shown inside the card during the morph. */
-const FIRST_BLOCK = BLOCKS[0]
-/** GitHub block content's natural (unscaled) height in px. */
-const GH_CONTENT_HEIGHT = 77
-/** The chat card's width (compose/conversation). */
-const CHAT_CARD_WIDTH = 460
-/**
- * Natural height of the compose card on first paint - `py-2` (16) + the input
- * row (32) + `gap-2` (8) + the action row (28). Seeds the card so it renders at
- * its true height immediately and never transitions/resizes on load; the
- * observer keeps it exact thereafter. Must track the content's padding/spacing.
- */
-const COMPOSE_CARD_HEIGHT = 84
-/**
- * Card width/height once morphed into the first block (block content × focus
- * scale). Deliberately smaller than the chat card so the morph reads as a
- * visible SHRINK + reshape, not a same-size content crossfade.
- */
-const BLOCK_CARD_WIDTH = BLOCK_WIDTH * WORKFLOW_FOCUS_SCALE
-const BLOCK_CARD_HEIGHT = GH_CONTENT_HEIGHT * WORKFLOW_FOCUS_SCALE
-
-interface StageHomeProps {
-  /** Which beat of the chat to render. */
-  mode: HomeMode
-  /** Prompt atoms the typewriter has revealed (compose mode). */
-  typedCount: number
-  /** Characters of the Mothership's reply revealed so far (answering mode). */
-  answerTypedCount: number
-  /** The prompt text region - the root cursor targets this for its "click in". */
-  inputRef: RefObject<HTMLDivElement | null>
-  /** The send button - the root cursor + travelling loader target this to "send". */
-  sendRef: RefObject<HTMLDivElement | null>
-  /** The dock - an invisible spot at the LEFT of the send-button row that the
-   * loader slides to (same row, so the slide is purely horizontal and the card
-   * never has to resize for it). */
-  dockRef: RefObject<HTMLDivElement | null>
-  /**
-   * The white card element. The parent measures it and, during the send beat
-   * (`sending`), drives its height per-frame via the `--hero-card-h` CSS variable
-   * - in lockstep with the camera pan - so the grow-to-fit-the-bubble can't shake
-   * the card the way a CSS height transition fighting the rAF loop would.
-   */
-  cardRef: RefObject<HTMLDivElement | null>
-  /**
-   * Reveal the greeting headline. Held back until the input is being composed,
-   * then fades in on the `hero-stage-fade` keyframe, slowed to 1.2s (≈3× the
-   * scene's stock 420ms) so the headline eases in gently. Its space is always
-   * reserved, so revealing it never shifts the layout.
-   */
-  showGreeting?: boolean
-  /** Press the send button (scale it down) - driven by the click beat. */
-  pressed?: boolean
-}
-
-/** Staggered enter for a chat bubble - translateY + opacity + blur, interruptible. */
-const ENTER_BASE =
-  'transition-[opacity,transform,filter] [transition-timing-function:cubic-bezier(0.2,0,0,1)]'
-const enterState = (shown: boolean) =>
-  shown ? 'translate-y-0 opacity-100 blur-none' : 'translate-y-1.5 opacity-0 blur-[3px]'
-
-const Caret = () => (
-  <span
-    className='ml-px inline-block h-[16px] w-px translate-y-[2px] animate-caret-blink bg-[var(--text-primary)]'
-    aria-hidden='true'
-  />
-)
-
-/** Renders prompt atoms (plain chars + inline `@mention` icon-chips). */
-function PromptAtoms({ atoms }: { atoms: PromptAtom[] }) {
-  return (
-    <>
-      {atoms.map((atom, i) =>
-        atom.kind === 'char' ? (
-          <span key={`${i}-${atom.char}`}>{atom.char}</span>
-        ) : (
-          <span key={`${i}-${atom.label}`}>
-            <span className='relative'>
-              <span className='invisible'>@</span>
-              <atom.icon className='absolute inset-0 m-auto size-[12px] translate-y-[1.25px] text-[var(--text-icon)]' />
-            </span>
-            {atom.label}
-          </span>
-        )
-      )}
-    </>
-  )
-}
-
-/**
- * The Mothership home stage - a single white card that morphs adaptively.
- *
- * Both content layers (the compose input and the conversation) are absolutely
- * stacked and TOP-anchored; the card measures whichever is active and animates
- * its own height to hug it (`transition-[height]`). This makes the card flexible
- * - it grows from the input to the reply, and from the thinking loader to the
- * typed answer - with no dead space and no fixed min-height. Top-anchoring keeps
- * the user bubble pinned, so the loader's label crossfade never shoves it; the
- * card `overflow-hidden`s any transient. Cursor is owned by the parent; this
- * stage only exposes the input and send button as ref targets. Decorative.
- */
-export function StageHome({
-  mode,
-  typedCount,
-  answerTypedCount,
-  inputRef,
-  sendRef,
-  dockRef,
-  cardRef,
-  showGreeting = false,
-  pressed = false,
-}: StageHomeProps) {
-  const isCompose = mode === 'compose'
-  const isMorphing = mode === 'morphing'
-  const isBlock = mode === 'block'
-  const isAnswering = mode === 'answering'
-  // The prompt input holds the card's compose height through the disc→loader morph
-  // (`compose`/`morphing`), then fades to a right-aligned bubble once send lands.
-  const inputInFlow = isCompose || isMorphing
-  // The typed prompt is a right-aligned chat bubble from the moment send is hit
-  // (`sending`) onward.
-  const showBubble = !isCompose && !isMorphing && !isBlock
-  // While the bubble first appears (`sending`), the PARENT drives the card height
-  // per-frame (via `--hero-card-h`) in lockstep with the camera, so the grow can't
-  // shake. Every other beat lets the card own + CSS-transition its own height.
-  const growControlled = mode === 'sending'
-  // Hold the card height steady - no CSS height-transition - through both the
-  // parent-driven grow (`sending`) AND the loader slide + camera track
-  // (`thinking`). The slide pans the camera by measuring the dock's live
-  // position each frame and assumes the card holds its size; transitioning
-  // height there makes the card resize under that measurement, so it jitters.
-  const holdCardHeight = growControlled || mode === 'thinking'
-  const contentRef = useRef<HTMLDivElement>(null)
-  // Seeded at the natural compose height so the send button is never clipped on
-  // the very first paint; the observer below keeps it exact from then on.
-  const [cardHeight, setCardHeight] = useState(COMPOSE_CARD_HEIGHT)
-
-  // Hug the chat column: measure its natural height and animate the card to it.
-  // Guard against a collapsed/unpainted layout (width ~0) measuring a
-  // wildly-wrapped height and poisoning the card size.
-  const measure = useCallback(() => {
-    const el = contentRef.current
-    if (el && el.offsetWidth > 120) setCardHeight(el.offsetHeight)
-  }, [])
-  // Synchronous, pre-paint, on every beat that reshapes the content (prompt typing
-  // out, input→bubble swap, reply filling in) - so the card grows in lockstep with
-  // no lag. In block mode the card takes a fixed height (`isBlock` branch on the
-  // style), so the measured value is simply ignored there.
-  useLayoutEffect(() => {
-    measure()
-  }, [measure, mode, typedCount, answerTypedCount])
-  // Robust backstop: also re-fit on first-paint layout, font load, or any other
-  // reflow the beat-driven pass can't see - so the send button is never clipped.
-  useLayoutEffect(() => {
-    const el = contentRef.current
-    if (!el) return
-    const observer = new ResizeObserver(measure)
-    observer.observe(el)
-    return () => observer.disconnect()
-  }, [measure])
-
-  const visible = PROMPT_ATOMS.slice(0, typedCount)
-  const isEmpty = typedCount === 0
-  const answer = ANSWER_TEXT.slice(0, answerTypedCount)
-  const bubbleTransitionStyle = {
-    transitionDelay: mode === 'sending' ? `${SEND_BUBBLE_REVEAL_DELAY_MS}ms` : '0ms',
-    transitionDuration: `${SEND_BUBBLE_ENTER_MS}ms`,
-  } satisfies CSSProperties
-
-  return (
-    <div className='flex h-full w-full flex-col items-center justify-center px-10'>
-      <div className='flex w-full max-w-[460px] flex-col gap-5'>
-        {/* Greeting - visible while composing, then fades. Its SPACE is held
-            through the sending/thinking scene so collapsing it never re-centres
-            the column and shifts the card the camera is locked onto; it only
-            truly collapses once the reply takes over (answering) or the card
-            morphs to a block. */}
-        <div
-          className={cn(
-            'overflow-hidden text-center transition-[height,opacity] duration-300 [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
-            mode === 'compose'
-              ? 'h-[40px] opacity-100'
-              : mode === 'sending' || mode === 'thinking'
-                ? 'h-[40px] opacity-0'
-                : 'h-0 opacity-0'
-          )}
-        >
-          {showGreeting ? (
-            <p className='text-[30px] text-[var(--text-primary)] leading-[40px] [animation:hero-stage-fade_1200ms_cubic-bezier(0.23,1,0.32,1)_both]'>
-              {HOME_GREETING}
-            </p>
-          ) : null}
-        </div>
-
-        {/* White card - the SAME shell throughout: it hugs the active chat content,
-            then resizes and rounds down to become the first workflow block (the
-            chat → workflow morph happens on this one continuous element). */}
-        <div
-          ref={cardRef}
-          className={cn(
-            // The chat input's aesthetic (rounded-2xl, border, soft shadow) is
-            // kept THROUGHOUT - including once morphed into the workflow block -
-            // so it stays the same white card, just resized.
-            'relative mx-auto overflow-hidden rounded-2xl border border-[var(--border-1)] bg-[var(--surface-2)] shadow-xs',
-            // While the height is held (the parent-driven send-bubble grow, and the
-            // loader slide where the card keeps its size), do NOT CSS-transition
-            // height - a transition would fight the per-frame camera/dock tracking
-            // and read as jitter. Every other beat eases width/height/transform with
-            // the shared curve.
-            holdCardHeight
-              ? 'transition-[width,transform] [transition-duration:620ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]'
-              : 'transition-[width,height,transform] [transition-duration:620ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]',
-            // Nudge up to cancel the chat column's greeting+gap offset, so the
-            // card centers exactly where the focused workflow block lands.
-            isBlock && '-translate-y-[10px]'
-          )}
-          style={{
-            width: isBlock ? BLOCK_CARD_WIDTH : CHAT_CARD_WIDTH,
-            // During the grow, follow the parent-driven variable (seeded to the
-            // compose height so there's never a collapsed first frame).
-            height: isBlock
-              ? BLOCK_CARD_HEIGHT
-              : growControlled
-                ? `var(--hero-card-h, ${COMPOSE_CARD_HEIGHT}px)`
-                : cardHeight,
-          }}
-        >
-          {/* Chat content - ONE column: the user message (the typewriter input,
-              then the sent bubble) over an action row (the send button + the
-              loader's dock, then the reply). The column stays anchored to the
-              BOTTOM through the send-bubble grow AND the loader slide (the whole
-              `holdCardHeight` window): during the grow the card expands UPWARD to
-              reveal the bubble, and through the slide the bottom edge never moves -
-              so the dock/send button the camera tracks can't shift as the height
-              source switches. Re-anchoring there would nudge them a sub-pixel and
-              the slide's camera would chase it (a visible jitter). Every other beat
-              is top-anchored (content fills the card, so it reads the same either
-              way), which keeps the block-morph and the reply grow behaving as before. */}
-          <div
-            ref={contentRef}
-            className={cn(
-              'absolute inset-x-0 flex flex-col gap-2 px-2.5 py-2 transition-opacity [transition-duration:220ms] [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
-              holdCardHeight ? 'bottom-0' : 'top-0',
-              isBlock && 'pointer-events-none opacity-0'
-            )}
-          >
-            {/* Message: the typewriter input while composing + morphing, then it
-                fades and a right-aligned user bubble animates in once `sending`
-                begins. The input stays in flow (holding the compose height) right
-                through the morph, so the card never reshapes as the disc becomes
-                the loader; the bubble takes over the flow only after, growing the
-                card in one clean transition. */}
-            <div className='relative'>
-              <div
-                ref={inputRef}
-                className={cn(
-                  'min-h-[24px] px-1 py-1 font-body text-[15px] text-[var(--text-primary)] leading-[24px] tracking-[-0.015em] transition-opacity duration-200 [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
-                  isCompose ? 'opacity-100' : 'opacity-0',
-                  !inputInFlow && 'pointer-events-none absolute inset-x-0 top-0'
-                )}
-              >
-                {isEmpty ? (
-                  <span className='text-[var(--text-subtle)]'>Ask Sim to build an agent…</span>
-                ) : (
-                  <>
-                    <PromptAtoms atoms={visible} />
-                    <Caret />
-                  </>
-                )}
-              </div>
-              <div
-                style={bubbleTransitionStyle}
-                className={cn(
-                  'ml-auto w-fit max-w-[82%] rounded-2xl bg-[var(--surface-5)] px-3.5 py-2 font-body text-[15px] text-[var(--text-primary)] leading-[22px] tracking-[-0.015em]',
-                  ENTER_BASE,
-                  showBubble
-                    ? enterState(true)
-                    : cn('pointer-events-none absolute top-0 right-0', enterState(false))
-                )}
-              >
-                <PromptAtoms atoms={PROMPT_ATOMS} />
-              </div>
-            </div>
-
-            {/* Action row: the loader's dock (left) and the send button (right).
-                The dock is the loader's slide target; once answering, the reply
-                types out from that same left edge as the loader fades, so the
-                docked loader reads as the start of the reply. */}
-            <div className='flex items-start justify-between gap-2'>
-              <div className='min-w-0 flex-1'>
-                {isAnswering ? (
-                  <p className='px-1 font-body text-[15px] text-[var(--text-primary)] leading-[22px] tracking-[-0.015em]'>
-                    {answer}
-                    <Caret />
-                  </p>
-                ) : (
-                  <div ref={dockRef} aria-hidden='true' className='size-[28px]' />
-                )}
-              </div>
-              <div
-                ref={sendRef}
-                aria-hidden='true'
-                className={cn(
-                  'flex size-[28px] shrink-0 items-center justify-center rounded-full bg-[#383838] transition-[opacity,transform,background-color] duration-150 [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
-                  // Visible only while composing; once send is hit the root loader's
-                  // settled orb takes its place (it stays laid out as the loader's
-                  // measure + slide-from target).
-                  isCompose ? 'opacity-100' : 'opacity-0',
-                  // Subtle interaction: lighten on hover, dip in size on press -
-                  // both for a real cursor and for the animation's click beat.
-                  isCompose && 'hover:bg-[#484848] active:scale-90',
-                  pressed && 'scale-90'
-                )}
-              >
-                {/* Up-arrow that draws itself on (shaft then head) via
-                    stroke-dashoffset - `pathLength={1}` normalizes the dash so
-                    one offset value covers the whole glyph. Retracts as send is
-                    hit so the disc is clean when the loader takes it over. */}
-                <svg viewBox='0 0 24 24' fill='none' className='size-4' aria-hidden='true'>
-                  <path
-                    d='M12 19V5M5 12l7-7 7 7'
-                    pathLength={1}
-                    stroke='var(--surface-2)'
-                    strokeWidth={2}
-                    strokeLinecap='round'
-                    strokeLinejoin='round'
-                    className={cn(
-                      'transition-[stroke-dashoffset] [stroke-dasharray:1] [transition-duration:520ms] [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
-                      isCompose ? '[stroke-dashoffset:0]' : '[stroke-dashoffset:1]'
-                    )}
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-
-          {/* Block layer: the card has morphed into the first workflow block.
-              Same content as the workflow stage's focused block, at the focus
-              scale, so handing off to the canvas is seamless. Top-anchored to
-              match the workflow block's origin. */}
-          <div
-            aria-hidden='true'
-            className={cn(
-              'absolute inset-x-0 top-0 transition-opacity duration-300 [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
-              // Hold off until the chat content (≈220ms fade) is gone, then fade in.
-              isBlock ? 'opacity-100 [transition-delay:280ms]' : 'pointer-events-none opacity-0'
-            )}
-          >
-            <div
-              className='relative'
-              style={{
-                width: BLOCK_WIDTH,
-                transform: `scale(${WORKFLOW_FOCUS_SCALE})`,
-                transformOrigin: 'top left',
-              }}
-            >
-              <WorkflowBlockContent block={FIRST_BLOCK} />
-              <span
-                aria-hidden
-                className='-translate-y-1/2 absolute top-5 right-[-7px] h-5 w-[7px] rounded-r-[2px] bg-[var(--workflow-edge)]'
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-visual/stage-kb.tsx b/apps/sim/app/(landing)/components/hero/components/hero-visual/stage-kb.tsx
deleted file mode 100644
index ed3ce0098f1..00000000000
--- a/apps/sim/app/(landing)/components/hero/components/hero-visual/stage-kb.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-import type { CSSProperties, RefObject } from 'react'
-import { cn } from '@sim/emcn'
-import { Upload, X } from '@sim/emcn/icons'
-import {
-  GRAPH_EDGES,
-  GRAPH_NODES,
-  GRAPH_VIEWBOX,
-  KB_FILES,
-  KB_NAME,
-} from '@/app/(landing)/components/hero/components/hero-visual/workflow-data'
-
-/** Which beat of the knowledge-base flow the modal is showing. */
-export type KbStage = 'empty' | 'files' | 'embeddings'
-
-interface KnowledgeBasePanelProps {
-  stage: KbStage
-  /** The Create button - the root cursor targets this to "create". */
-  createRef: RefObject<HTMLSpanElement | null>
-  /**
-   * `modal` renders the standalone centered modal (its own chrome + entrance);
-   * `morph` renders the content only, filling its host, so a satellite block can
-   * morph into it in scene space.
-   */
-  motion?: 'modal' | 'morph'
-}
-
-/**
- * The knowledge-base create UI - a faithful, decorative replica of the real
- * `ChipModal` create flow. First an empty dropzone ("Drop files here"); then
- * files drop in from above as if dragged from Finder; then the document area
- * becomes an embedding map that builds itself node by node while the footer
- * reads "Creating…". The Create button is exposed as a cursor target.
- */
-export function KnowledgeBasePanel({
-  stage,
-  createRef,
-  motion = 'modal',
-}: KnowledgeBasePanelProps) {
-  const creating = stage === 'embeddings'
-
-  const content = (
-    <div
-      className={cn(
-        'overflow-hidden rounded-lg border border-[var(--border-1)] bg-[var(--bg)]',
-        motion === 'morph' && 'h-full'
-      )}
-    >
-      <div className='flex items-center justify-between px-4 pt-3 pb-2.5'>
-        <span className='text-[15px] text-[var(--text-primary)]'>Create Knowledge Base</span>
-        <X className='size-4 text-[var(--text-muted)]' />
-      </div>
-
-      <div className='flex flex-col gap-4 px-4 pb-4'>
-        <div className='flex flex-col gap-[9px]'>
-          <span className='text-[13px] text-[var(--text-muted)]'>Name</span>
-          <div className='flex h-[30px] items-center rounded-lg border border-[var(--border-1)] bg-[var(--surface-5)] px-2 text-[14px] text-[var(--text-body)]'>
-            {KB_NAME}
-          </div>
-        </div>
-
-        <div className='flex flex-col gap-[9px]'>
-          <span className='text-[13px] text-[var(--text-muted)]'>
-            {creating ? 'Embeddings' : 'Upload Documents'}
-          </span>
-          <div className='relative h-[188px]'>
-            {stage === 'empty' && (
-              <div className='absolute inset-0 flex flex-col items-center justify-center gap-1 rounded-lg border border-[var(--border-1)] border-dashed bg-[var(--surface-5)] text-center'>
-                <Upload className='size-5 text-[var(--text-muted)]' />
-                <span className='text-[var(--text-primary)] text-caption'>Drop files here</span>
-                <span className='text-[var(--text-tertiary)] text-xs'>PDF, DOCX, TXT, CSV, MD</span>
-              </div>
-            )}
-
-            {stage === 'files' && (
-              <div className='absolute inset-0 flex flex-col justify-center gap-2'>
-                {KB_FILES.map((file, i) => (
-                  <div
-                    key={file.name}
-                    className={cn(
-                      'flex items-center gap-2 rounded-lg border border-[var(--border-1)] bg-[var(--surface-5)] p-2',
-                      'animate-hero-file-drop opacity-0 [animation-delay:var(--drop-delay)] motion-reduce:animate-none motion-reduce:opacity-100'
-                    )}
-                    style={{ '--drop-delay': `${120 + i * 170}ms` } as CSSProperties}
-                  >
-                    <file.icon className='size-[14px] shrink-0 text-[var(--text-icon)]' />
-                    <span className='min-w-0 flex-1 truncate text-[14px] text-[var(--text-body)]'>
-                      {file.name}
-                    </span>
-                    <span className='shrink-0 text-[14px] text-[var(--text-muted)]'>
-                      {file.size}
-                    </span>
-                  </div>
-                ))}
-              </div>
-            )}
-
-            {creating && (
-              <div className='absolute inset-0 flex flex-col items-center justify-center gap-1.5 rounded-lg border border-[var(--border-1)] bg-[var(--surface-5)] px-3'>
-                <svg
-                  className='h-[140px] w-full'
-                  viewBox={`0 0 ${GRAPH_VIEWBOX.width} ${GRAPH_VIEWBOX.height}`}
-                  fill='none'
-                  aria-hidden='true'
-                >
-                  <title>embedding graph</title>
-                  {GRAPH_EDGES.map(([a, b], i) => {
-                    const from = GRAPH_NODES[a]
-                    const to = GRAPH_NODES[b]
-                    return (
-                      <path
-                        key={`${a}-${b}`}
-                        d={`M ${from.x} ${from.y} L ${to.x} ${to.y}`}
-                        pathLength={1}
-                        className='animate-hero-edge-draw [animation-delay:var(--pop-delay)] [stroke-dasharray:1] [stroke-dashoffset:1] motion-reduce:animate-none motion-reduce:[stroke-dashoffset:0]'
-                        stroke='var(--text-subtle)'
-                        strokeWidth={0.5}
-                        style={{ '--pop-delay': `${i * 45}ms` } as CSSProperties}
-                      />
-                    )
-                  })}
-                  {GRAPH_NODES.map((node, i) => (
-                    <circle
-                      key={`${node.x}-${node.y}`}
-                      cx={node.x}
-                      cy={node.y}
-                      r={node.hub ? 3.4 : i % 3 === 0 ? 2.4 : 1.9}
-                      className={cn(
-                        'opacity-0 [transform-box:fill-box] [transform-origin:center] motion-reduce:animate-none motion-reduce:opacity-100',
-                        node.hub
-                          ? 'animate-[hero-node-pop_440ms_cubic-bezier(0.16,1,0.3,1)_var(--pop-delay)_forwards,hero-graph-pulse_2600ms_ease-in-out_calc(var(--pop-delay)+800ms)_infinite]'
-                          : 'animate-hero-node-pop [animation-delay:var(--pop-delay)]'
-                      )}
-                      fill={
-                        node.hub
-                          ? 'var(--text-primary)'
-                          : i % 2 === 0
-                            ? 'var(--text-secondary)'
-                            : 'var(--text-muted)'
-                      }
-                      style={{ '--pop-delay': `${300 + i * 40}ms` } as CSSProperties}
-                    />
-                  ))}
-                </svg>
-                <span className='text-[var(--text-muted)] text-caption'>
-                  Generating embeddings…
-                </span>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-
-      <div className='flex items-center justify-end gap-2 rounded-b-lg bg-[var(--surface-3)] px-4 pt-2 pb-2'>
-        <span className='flex h-[30px] items-center rounded-lg px-2 text-[14px] text-[var(--text-body)]'>
-          Cancel
-        </span>
-        <span
-          ref={createRef}
-          className='flex h-[30px] items-center rounded-lg bg-[var(--text-primary)] px-2 text-[14px] text-[var(--text-inverse)]'
-        >
-          {creating ? 'Creating…' : 'Create'}
-        </span>
-      </div>
-    </div>
-  )
-
-  if (motion === 'morph') {
-    return (
-      <div className='h-full w-full animate-hero-kb-content-morph opacity-0 motion-reduce:animate-none motion-reduce:opacity-100'>
-        {content}
-      </div>
-    )
-  }
-
-  return (
-    <div
-      className={cn(
-        'w-full max-w-[420px] rounded-xl border border-[var(--border-muted)] bg-[var(--surface-4)] p-[3px]',
-        'animate-hero-modal-in motion-reduce:animate-none'
-      )}
-    >
-      {content}
-    </div>
-  )
-}
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-visual/workflow-block-content.tsx b/apps/sim/app/(landing)/components/hero/components/hero-visual/workflow-block-content.tsx
deleted file mode 100644
index abd4eec9083..00000000000
--- a/apps/sim/app/(landing)/components/hero/components/hero-visual/workflow-block-content.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { cn } from '@sim/emcn'
-import type { BlockDef } from '@/app/(landing)/components/hero/components/hero-visual/workflow-data'
-
-interface WorkflowBlockContentProps {
-  block: BlockDef
-}
-
-/**
- * The inner content of a workflow block - the icon-tile header and optional
- * label → value rows - WITHOUT the card chrome or handle nubs. Split out so the
- * chat card can host the exact same content while morphing into the first block
- * (the card keeps its own continuous shell; only this content crossfades in).
- */
-export function WorkflowBlockContent({ block }: WorkflowBlockContentProps) {
-  return (
-    <>
-      <div
-        className={cn(
-          'flex items-center gap-2.5 p-2',
-          block.rows.length > 0 && 'border-[var(--border-1)] border-b'
-        )}
-      >
-        <div
-          className={cn(
-            'flex size-[24px] shrink-0 items-center justify-center rounded-md',
-            block.tileBorder && 'border border-[var(--border-1)]'
-          )}
-          style={{ background: block.bgColor }}
-        >
-          {block.tileBorder ? (
-            <block.icon className='size-[16px]' />
-          ) : (
-            <block.icon className='size-[16px] text-white' />
-          )}
-        </div>
-        <span className='truncate text-[16px] text-[var(--text-body)]'>{block.name}</span>
-      </div>
-
-      {block.rows.length > 0 && (
-        <div className='flex flex-col gap-2 p-2'>
-          {block.rows.map((row) => (
-            <div key={row.title} className='flex items-center gap-2'>
-              <span className='shrink-0 text-[14px] text-[var(--text-muted)]'>{row.title}</span>
-              <span className='flex min-w-0 flex-1 items-center justify-end gap-1.5 text-[14px] text-[var(--text-body)]'>
-                {row.valueIcon && <row.valueIcon className='size-[14px] shrink-0' />}
-                <span className='truncate'>{row.value}</span>
-              </span>
-            </div>
-          ))}
-        </div>
-      )}
-    </>
-  )
-}
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-visual/workflow-block.tsx b/apps/sim/app/(landing)/components/hero/components/hero-visual/workflow-block.tsx
deleted file mode 100644
index 07ed5c61ed1..00000000000
--- a/apps/sim/app/(landing)/components/hero/components/hero-visual/workflow-block.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { cn } from '@sim/emcn'
-import { BlockHandles } from '@/app/(landing)/components/hero/components/hero-visual/block-handles'
-import { WorkflowBlockContent } from '@/app/(landing)/components/hero/components/hero-visual/workflow-block-content'
-import type { BlockDef } from '@/app/(landing)/components/hero/components/hero-visual/workflow-data'
-
-interface WorkflowBlockProps {
-  block: BlockDef
-  contentVisible?: boolean
-  handlesVisible?: boolean
-}
-
-/**
- * A pure presentational workflow block card, faithful to the real WorkflowBlock:
- * a fixed-width card with an icon-tile header and optional label → value rows,
- * plus decorative handle nubs on its left and right edges. Stateless and
- * client-free - positioning and the rise animation are owned by the parent stage.
- * `contentVisible`/`handlesVisible` crossfade the content and handles so a block
- * can soften into a shell (used when the Jira block morphs into the KB panel).
- */
-export function WorkflowBlock({
-  block,
-  contentVisible = true,
-  handlesVisible = true,
-}: WorkflowBlockProps) {
-  return (
-    <div className='relative w-[250px] rounded-[13px] border border-[var(--border-1)] bg-[var(--surface-2)] shadow-xs'>
-      <div
-        className={cn(
-          'transition-opacity [transition-duration:360ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]',
-          contentVisible ? 'opacity-100' : 'opacity-0'
-        )}
-      >
-        <WorkflowBlockContent block={block} />
-      </div>
-      <BlockHandles block={block} handlesVisible={handlesVisible} />
-    </div>
-  )
-}
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-visual/workflow-data.ts b/apps/sim/app/(landing)/components/hero/components/hero-visual/workflow-data.ts
index 48c4f075daa..06368ee4344 100644
--- a/apps/sim/app/(landing)/components/hero/components/hero-visual/workflow-data.ts
+++ b/apps/sim/app/(landing)/components/hero/components/hero-visual/workflow-data.ts
@@ -1,5 +1,10 @@
 import type { ComponentType, SVGProps } from 'react'
-import { AgentIcon, AnthropicIcon, GithubIcon, JiraIcon } from '@/components/icons'
+import type {
+  BLOCK_DIMENSIONS,
+  CONNECTION_KNOB_PEAK_PX,
+  HANDLE_POSITIONS,
+} from '@sim/workflow-renderer'
+import { AgentIcon, GithubIcon, JiraIcon } from '@/components/icons'
 import { CsvIcon, DocxIcon, MarkdownIcon, PdfIcon } from '@/components/icons/document-icons'
 
 /**
@@ -23,10 +28,22 @@ export interface BlockRow {
   valueIcon?: IconComponent
 }
 
+/** A production-style natural-language summary shown below a block header. */
+export interface BlockSentence {
+  segments: ReadonlyArray<string | { subBlockId: string; noun?: string }>
+  values: Readonly<Record<string, string>>
+}
+
 /** A workflow block in design space. */
 export interface BlockDef {
   id: string
   name: string
+  /** Production block type used by the shared workflow card renderer. */
+  type?: string
+  /** Production type label shown in the card's header tag. */
+  typeLabel?: string
+  /** Uses the provider's brand treatment instead of a core workflow accent. */
+  isIntegration?: boolean
   icon: IconComponent
   /** Icon-tile fill - a brand-faithful color or a platform token (`var(--…)`). */
   bgColor: string
@@ -36,6 +53,8 @@ export interface BlockDef {
   isTrigger?: boolean
   /** Terminal blocks end the flow, so they render no outgoing (right) handle. */
   isTerminal?: boolean
+  /** Natural-language canvas summary used by current production block cards. */
+  sentence?: BlockSentence
   rows: BlockRow[]
   /** Top-left corner in design space. */
   x: number
@@ -45,6 +64,59 @@ export interface BlockDef {
 /** Fixed block width, matching the real canvas (`BLOCK_DIMENSIONS.FIXED_WIDTH`). */
 export const BLOCK_WIDTH = 250
 
+/**
+ * Compile-time pins onto the shared renderer's card dimensions. This module is
+ * pure data that server modules also import, so it carries no runtime renderer
+ * import; the numbers are spelled out here and their types force them to
+ * track `BLOCK_DIMENSIONS`, `HANDLE_POSITIONS`, and `CONNECTION_KNOB_PEAK_PX`.
+ */
+const HEADER_HEIGHT: (typeof BLOCK_DIMENSIONS)['HEADER_HEIGHT'] = 40
+const CONTENT_PADDING: (typeof BLOCK_DIMENSIONS)['WORKFLOW_CONTENT_PADDING'] = 16
+const ROW_HEIGHT: (typeof BLOCK_DIMENSIONS)['WORKFLOW_ROW_HEIGHT'] = 20
+const CONTENT_GAP: (typeof BLOCK_DIMENSIONS)['WORKFLOW_CONTENT_GAP'] = 8
+const ERROR_ROW_HEIGHT: (typeof BLOCK_DIMENSIONS)['WORKFLOW_ERROR_ROW_HEIGHT'] = 24
+const SENTENCE_LINE_HEIGHT: (typeof BLOCK_DIMENSIONS)['WORKFLOW_SENTENCE_LINE_HEIGHT'] = 24
+const HEADER_ONLY_HEIGHT: (typeof BLOCK_DIMENSIONS)['MIN_PAINTED_HEIGHT'] = 48
+const CONDITION_START_Y: (typeof HANDLE_POSITIONS)['CONDITION_START_Y'] = 58
+const CONDITION_ROW_HEIGHT: (typeof HANDLE_POSITIONS)['CONDITION_ROW_HEIGHT'] = 28
+/** Tip of a connection knob, outside the card edge - where an edge starts and ends. */
+export const HANDLE_KNOB_PEAK: typeof CONNECTION_KNOB_PEAK_PX = 7
+
+/**
+ * Exact read-only production card height: the header, a padded content stack
+ * of summary rows or one sentence line, the gaps between them, and the disabled
+ * error row every non-trigger block carries. A header-only card paints at the
+ * border's minimum.
+ */
+export function blockHeight(block: BlockDef): number {
+  const showErrorRow = !block.isTrigger
+  const contentRows = block.sentence ? 1 : block.rows.length
+  const contentItems = contentRows + (showErrorRow ? 1 : 0)
+  if (contentItems === 0) return HEADER_ONLY_HEIGHT
+
+  const summaryHeight = block.sentence ? SENTENCE_LINE_HEIGHT : contentRows * ROW_HEIGHT
+  const contentHeight = summaryHeight + (showErrorRow ? ERROR_ROW_HEIGHT : 0)
+  return (
+    HEADER_HEIGHT + CONTENT_PADDING + contentHeight + Math.max(0, contentItems - 1) * CONTENT_GAP
+  )
+}
+
+/**
+ * Production left-input / right-output anchors: the knob tips at the card's
+ * vertical centre, or on a condition block's branch rows for its outputs.
+ */
+export function horizontalHandleAnchors(block: BlockDef, branchIndex?: number) {
+  const sourceY =
+    block.type === 'condition' && branchIndex !== undefined
+      ? block.y + CONDITION_START_Y + branchIndex * CONDITION_ROW_HEIGHT
+      : block.y + blockHeight(block) / 2
+
+  return {
+    out: { x: block.x + BLOCK_WIDTH + HANDLE_KNOB_PEAK, y: sourceY },
+    in: { x: block.x - HANDLE_KNOB_PEAK, y: block.y + blockHeight(block) / 2 },
+  }
+}
+
 /**
  * Camera zoom while the workflow stage is focused on the first block. Chosen so
  * the focused first block lands at the same on-screen width as the chat card
@@ -53,58 +125,89 @@ export const BLOCK_WIDTH = 250
  */
 export const WORKFLOW_FOCUS_SCALE = 1.25
 
-/** Handle vertical offset from a block's top edge (matches the real WorkflowBlock). */
-export const HANDLE_Y_OFFSET = 20
-
 /**
- * Design-space bounding box the stage scales to fit the panel. Sized to exactly
- * bound the blocks below (GitHub/Jira at y=0, Agent's foot at ~y=203), so the
- * stage's flex-centering centers the workflow with no stray margin.
- */
-export const CANVAS = { width: 850, height: 206 } as const
-
-/**
- * GitHub → Agent → Jira. A gentle staircase: GitHub and Jira ride high, the
- * Agent dips between them, so the two edges read as a clean down-then-up flow.
- * The shape is left-right symmetric (Agent centered at x=425) and its bounding
- * box matches {@link CANVAS}, keeping it centered in the panel.
+ * GitHub → Agent → Jira, the workflow Sim builds from the demo prompt. A gentle
+ * staircase: GitHub and Jira ride high, the Agent dips between them, so the
+ * two edges read as a clean down-then-up flow. Every block carries the fields
+ * the production card renders - its type tag, the provider treatment, and the
+ * card's natural-language sentence - so the demo draws the real card. The
+ * GitHub block has no trigger picker, so its trigger sentence is the resolver's
+ * literal form (`Run on <trigger name>`); the Agent and Jira sentences follow
+ * their blocks' own `sentences` config with the configured values as chips.
  */
 export const BLOCKS: BlockDef[] = [
   {
     id: 'github',
-    name: 'GitHub',
+    name: 'PR opened',
+    type: 'github',
+    typeLabel: 'GitHub',
+    isIntegration: true,
     icon: GithubIcon,
     bgColor: '#181C1E',
     isTrigger: true,
-    rows: [{ title: 'Trigger', value: 'PR opened' }],
+    sentence: {
+      segments: ['Run on GitHub PR Opened'],
+      values: {},
+    },
+    rows: [],
     x: 0,
     y: 0,
   },
   {
     id: 'agent',
-    name: 'Agent',
+    name: 'Review PR',
+    type: 'agent',
+    typeLabel: 'Agent',
     icon: AgentIcon,
-    bgColor: 'var(--brand-accent)',
-    rows: [
-      { title: 'Model', value: 'Claude', valueIcon: AnthropicIcon },
-      { title: 'Task', value: 'Review PR' },
-    ],
+    bgColor: 'var(--text-primary)',
+    sentence: {
+      segments: ['Prompt', { subBlockId: 'model', noun: 'a model' }],
+      values: { model: 'claude-sonnet-5' },
+    },
+    rows: [],
     x: 300,
     y: 96,
   },
   {
     id: 'jira',
-    name: 'Jira',
+    name: 'Create issue',
+    type: 'jira',
+    typeLabel: 'Jira',
+    isIntegration: true,
     icon: JiraIcon,
     bgColor: '#FFFFFF',
     tileBorder: true,
     isTerminal: true,
-    rows: [{ title: 'Action', value: 'Create issue' }],
+    sentence: {
+      segments: [
+        'Create',
+        { subBlockId: 'issueType', noun: 'an issue' },
+        'in',
+        { subBlockId: 'project', noun: 'a project' },
+      ],
+      values: { issueType: 'Task', project: 'ENG' },
+    },
+    rows: [],
     x: 600,
     y: 0,
   },
 ]
 
+/**
+ * Design-space bounding box of {@link BLOCKS}, derived from the cards' real
+ * heights so the overview camera centres the workflow with no stray margin.
+ */
+export const CANVAS = {
+  width: Math.max(...BLOCKS.map((block) => block.x + BLOCK_WIDTH)),
+  height: Math.max(...BLOCKS.map((block) => block.y + blockHeight(block))),
+} as const
+
+/**
+ * Corner radius of a production edge (`WorkflowEdgeView` passes 8 to React
+ * Flow's smooth-step path), in design px.
+ */
+const EDGE_CORNER_RADIUS = 8
+
 /** An ordered source → target connection between two blocks. */
 export interface EdgeDef {
   id: string
@@ -115,10 +218,17 @@ export interface EdgeDef {
 /**
  * Rounded orthogonal ("smoothstep") path from a source's right handle to a
  * target's left handle, stepping at the horizontal midpoint with `r`-radius
- * corners. Source/target points are taken at `block.x±width` and
- * `block.y + HANDLE_Y_OFFSET`, matching where the handles render.
+ * corners - the same route React Flow draws between two production cards.
+ * Endpoints come from {@link horizontalHandleAnchors}: the knob tips at each
+ * card's vertical centre.
  */
-export function smoothStep(sx: number, sy: number, tx: number, ty: number, r = 8): string {
+export function smoothStep(
+  sx: number,
+  sy: number,
+  tx: number,
+  ty: number,
+  r = EDGE_CORNER_RADIUS
+): string {
   const midX = (sx + tx) / 2
   const dir = ty >= sy ? 1 : -1
   return [
@@ -135,12 +245,9 @@ function handlePoints(sourceId: string, targetId: string) {
   const source = BLOCKS.find((b) => b.id === sourceId)
   const target = BLOCKS.find((b) => b.id === targetId)
   if (!source || !target) throw new Error(`Unknown block in edge ${sourceId}→${targetId}`)
-  return {
-    sx: source.x + BLOCK_WIDTH,
-    sy: source.y + HANDLE_Y_OFFSET,
-    tx: target.x,
-    ty: target.y + HANDLE_Y_OFFSET,
-  }
+  const out = horizontalHandleAnchors(source).out
+  const inbound = horizontalHandleAnchors(target).in
+  return { sx: out.x, sy: out.y, tx: inbound.x, ty: inbound.y }
 }
 
 export const EDGES: EdgeDef[] = (
@@ -163,8 +270,8 @@ export const EDGES: EdgeDef[] = (
  * Scene origin is the GitHub block's CENTER (which sits at the panel center).
  */
 const GH_CENTER_X = BLOCK_WIDTH / 2
-/** GitHub block half-height in design space (its content is ~77px tall). */
-const GH_CENTER_Y = 38.5
+/** The GitHub card's half-height in design space, from its real card height. */
+const GH_CENTER_Y = blockHeight(BLOCKS[0]) / 2
 const toSceneX = (dx: number) => (dx - GH_CENTER_X) * WORKFLOW_FOCUS_SCALE
 const toSceneY = (dy: number) => (dy - GH_CENTER_Y) * WORKFLOW_FOCUS_SCALE
 
@@ -205,31 +312,68 @@ export const SCENE_EDGES: EdgeDef[] = (
   const { sx, sy, tx, ty } = handlePoints(from, to)
   return {
     id: `${from}-${to}`,
-    d: smoothStep(toSceneX(sx), toSceneY(sy), toSceneX(tx), toSceneY(ty), 14),
+    d: smoothStep(
+      toSceneX(sx),
+      toSceneY(sy),
+      toSceneX(tx),
+      toSceneY(ty),
+      EDGE_CORNER_RADIUS * WORKFLOW_FOCUS_SCALE
+    ),
   }
 })
 
 /**
  * Pull-out transform from FOCUS (block 1 centered, full size) to OVERVIEW (whole
  * workflow centered, fit to panel). `SCALE` brings the FOCUS-scale scene down to
- * the design overview (1.84 × 0.37 ≈ 0.68); the translate recenters the group -
- * it matches the design overview's GitHub offset, so the framing is identical to
- * the prior camera overview. Transform-origin is the panel center (block 1's
- * center), so FOCUS is the identity transform (no measurement needed).
+ * the design overview (1.84 × 0.37 ≈ 0.68). Transform-origin is the panel
+ * center (block 1's center), so FOCUS is the identity transform.
  */
 export const SCENE_OVERVIEW_SCALE = 0.68 / WORKFLOW_FOCUS_SCALE
-export const SCENE_OVERVIEW_TRANSLATE = { x: -204, y: -43 } as const
 
 /** Camera scale while tracing the workflow edge-by-edge before the full zoom-out. */
 export const SCENE_FOLLOW_SCALE = 0.86
 
+/** A point's scene-space position under the camera transform. */
+interface ScenePoint {
+  x: number
+  y: number
+}
+
+/** The camera translate that puts scene point `center` on the panel centre at `scale`. */
+function centeringTranslate(center: ScenePoint, scale: number): ScenePoint {
+  return { x: -center.x * scale, y: -center.y * scale }
+}
+
+/** A block's centre in scene space, from its real card height. */
+function sceneCenter(block: BlockDef): ScenePoint {
+  return {
+    x: toSceneX(block.x + BLOCK_WIDTH / 2),
+    y: toSceneY(block.y + blockHeight(block) / 2),
+  }
+}
+
 /**
- * Intermediate camera stops for the edge-follow pass. These keep the active
- * destination block centered enough to read while preserving a little context
- * around the incoming connection.
+ * The overview's translate recentres the whole workflow's bounding box, so the
+ * framing follows the cards' real heights.
  */
-export const SCENE_AGENT_FOCUS_TRANSLATE = { x: -323, y: -126 } as const
-export const SCENE_JIRA_FOCUS_TRANSLATE = { x: -645, y: 0 } as const
+export const SCENE_OVERVIEW_TRANSLATE = centeringTranslate(
+  { x: toSceneX(CANVAS.width / 2), y: toSceneY(CANVAS.height / 2) },
+  SCENE_OVERVIEW_SCALE
+)
+
+/**
+ * Intermediate camera stops for the edge-follow pass: each centres the block
+ * the connection just reached, at follow scale, so the destination reads
+ * while a little of the incoming connection stays in view.
+ */
+export const SCENE_AGENT_FOCUS_TRANSLATE = centeringTranslate(
+  sceneCenter(BLOCKS[1]),
+  SCENE_FOLLOW_SCALE
+)
+export const SCENE_JIRA_FOCUS_TRANSLATE = centeringTranslate(
+  sceneCenter(BLOCKS[2]),
+  SCENE_FOLLOW_SCALE
+)
 
 /**
  * The typed prompt, encoded as ordered atoms the typewriter reveals one at a
diff --git a/apps/sim/app/(landing)/components/hero/hero.tsx b/apps/sim/app/(landing)/components/hero/hero.tsx
index c7295354491..0f04536719d 100644
--- a/apps/sim/app/(landing)/components/hero/hero.tsx
+++ b/apps/sim/app/(landing)/components/hero/hero.tsx
@@ -1,55 +1,22 @@
 import { cn } from '@sim/emcn'
-import Image from 'next/image'
+import { HeroAnnouncementChip } from '@/app/(landing)/components/hero/components/hero-announcement-chip'
 import { LandingHeroHeader } from '@/app/(landing)/components/hero/components/hero-header'
-import { HeroPlatformLoop } from '@/app/(landing)/components/hero/components/hero-platform-loop'
+import { HeroPlatformStage } from '@/app/(landing)/components/hero/components/hero-platform-stage'
 import {
+  HOME_INSET,
   LANDING_CONTENT_WIDTH,
   LANDING_GUTTER,
-  LANDING_HERO_TOP_PADDING,
 } from '@/app/(landing)/components/landing-layout'
-import { TrustedBy } from '@/app/(landing)/components/trusted-by'
 
 /**
  * Landing hero - the only `<h1>` on the page.
  *
- * A single stacked flow (no split panels): headline and the sign-up row sit
- * left-aligned at the top; below them a full-width media frame
- * previews the platform UI; the customer-logo row closes the section centered
- * underneath. The section is capped and centered at the shared `max-w-[1460px]`
- * (`mx-auto`) with the `px-20 max-lg:px-8 max-sm:px-5` gutter so the headline
- * starts on the navbar wordmark's vertical line.
+ * A wide split masthead places the headline at the leading edge and pairs it
+ * with supporting copy and the primary action on the trailing side, above a
+ * product UI aligned to the same inset container.
  *
- * Text blocks stack a uniform 22px apart (`gap-[22px]`); the media frame and
- * logo row carry their own larger top margins to read as separate bands.
- *
- * The sign-up row is the shared {@link HeroCta} - the single source of truth for
- * the email-capture bar and the "Book a demo" / "Sign up" chips - reused
- * verbatim by every platform and solutions hero so the primary CTA never drifts.
- *
- * The media frame: the painted landscape backdrop (`hero-backdrop.jpg`,
- * rendered via `next/image` `fill` + `object-cover` with `priority` - it is the
- * LCP element) behind a white window (a soft three-part shadow stack:
- * `0 0 0 1px rgba(0,0,0,0.08)` ring in place of a CSS border, plus
- * `0 2px 6px rgba(0,0,0,0.05)` contact and `0 4px 42px rgba(0,0,0,0.06)`
- * ambient shadows; no browser toolbar) filled edge to edge by the live
- * {@link HeroPlatformLoop}. The shared landing sidebar and animated Home
- * workspace render together in a fixed 1280x735 design space, so the homepage
- * stays aligned with every product and solutions hero without a baked UI
- * capture drifting behind it.
- * The frame is `1300/720` and the window `1080/620` at `83.08%` width, centered
- * - matching cursor.com's hero media proportions, with backdrop showing on all
- * four sides. Decorative, `aria-hidden`; the `--surface-3` fill remains as the
- * loading fallback under the backdrop.
- *
- * The headline/CTA column shares its row with the right-aligned
- * {@link HeroStat} (the "Global work done by Sim" figure with its vertical
- * progress rail and staggered page-load entrance), hidden below `lg` where
- * the row has no room.
- *
- * The shared {@link TrustedBy} block renders in its `row` layout - a centered
- * muted label above a single centered row of bare wordmarks.
- *
- * Carries the sr-only ~50-word product summary for AI citation (CLAUDE.md → GEO).
+ * The live preview keeps its native 1280×735 aspect ratio inside a wider
+ * painted frame that shares the customer carousel's content width.
  */
 export function Hero() {
   return (
@@ -57,52 +24,35 @@ export function Hero() {
       id='hero'
       aria-labelledby='hero-heading'
       className={cn(
-        'flex flex-col items-start gap-[22px] text-left',
+        'flex flex-col items-start pt-24 text-left max-sm:pt-14 max-xl:pt-20',
         LANDING_CONTENT_WIDTH,
-        LANDING_GUTTER,
-        LANDING_HERO_TOP_PADDING
+        LANDING_GUTTER
       )}
     >
       <p className='sr-only'>
-        Sim is the open-source AI workspace where teams build, deploy, and manage AI agents. Connect
-        1,000+ integrations and every major LLM to create agents that automate real work, visually,
-        conversationally, or with code. Trusted by over 100,000 builders, SOC2 compliant, and
-        production-ready for teams of every size.
+        Sim is the open-source AI workspace where teams build, deploy, and manage AI agents for
+        their organization. Connect hundreds of integrations and every major LLM, then govern
+        access, spend, data, and deployment from one place. Build visually, conversationally, or
+        with code, and run Sim in your own cloud.
       </p>
 
-      <LandingHeroHeader
-        headingId='hero-heading'
-        heading={
-          <>
-            The AI Workspace for Building <br />
-            and Managing AI Agents.
-          </>
-        }
-        description='Open source, with 1,000+ integrations and every major LLM. Build, deploy, and manage agents visually, conversationally, or with code.'
-      />
-
-      <div
-        aria-hidden='true'
-        className='relative mt-[34px] aspect-[1300/720] w-full overflow-hidden rounded-lg bg-[var(--surface-3)] max-sm:aspect-[4/3]'
-      >
-        <Image
-          src='/landing/hero-backdrop.jpg'
-          alt=''
-          fill
-          priority
-          fetchPriority='high'
-          quality={90}
-          sizes='(max-width: 1460px) 100vw, 1300px'
-          className='object-cover'
+      <div className={HOME_INSET}>
+        <LandingHeroHeader
+          scale='home'
+          headingId='hero-heading'
+          eyebrow={<HeroAnnouncementChip />}
+          heading={
+            <>
+              Build and govern
+              <br />
+              every AI agent in one place
+            </>
+          }
+          description='Build, deploy, and manage AI agents with central control over access, spend, and data.'
         />
-        <div className='-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 flex aspect-[1080/620] w-[83.08%] flex-col overflow-hidden rounded-[10px] bg-[var(--surface-1)] shadow-[0_0_0_1px_rgba(0,0,0,0.08),0_2px_6px_0_rgba(0,0,0,0.05),0_4px_42px_0_rgba(0,0,0,0.06)]'>
-          <div className='relative flex-1'>
-            <HeroPlatformLoop />
-          </div>
-        </div>
       </div>
 
-      <TrustedBy layout='row' className='mt-[42px] w-full max-sm:mt-6' />
+      <HeroPlatformStage />
     </section>
   )
 }
diff --git a/apps/sim/app/(landing)/components/home-structured-data/home-structured-data.tsx b/apps/sim/app/(landing)/components/home-structured-data/home-structured-data.tsx
index fd4f4bd8634..d70a54a25ab 100644
--- a/apps/sim/app/(landing)/components/home-structured-data/home-structured-data.tsx
+++ b/apps/sim/app/(landing)/components/home-structured-data/home-structured-data.tsx
@@ -22,14 +22,14 @@ import { JsonLd } from '@/app/(landing)/components/json-ld'
  * `WebPage.description` below, so the three surfaces never drift.
  */
 export const HOME_PAGE_DESCRIPTION =
-  'Sim is the open-source AI workspace where teams build, deploy, and manage AI agents across 1,000+ integrations and every major LLM, visually or with code.'
+  'Sim is the open-source AI workspace where companies build, distribute, and govern AI agents. Hundreds of integrations, every major LLM, permission groups, spend limits, and self-hosting.'
 
 /**
  * The home page's canonical title - the single string shared by the
  * `<title>`, OG/Twitter titles (`page.tsx`), and the JSON-LD `WebPage.name`
  * below, so the title surfaces never drift.
  */
-export const HOME_PAGE_TITLE = 'The AI Workspace | Build, Deploy & Manage AI Agents | Sim'
+export const HOME_PAGE_TITLE = 'The AI Workspace | Build, Distribute & Govern AI Agents | Sim'
 
 const HOME_JSON_LD = {
   '@context': 'https://schema.org',
@@ -62,7 +62,7 @@ const HOME_JSON_LD = {
       url: SITE_URL,
       name: 'Sim, The AI Workspace',
       description:
-        'Sim is the open-source AI workspace where teams build, deploy, and manage AI agents. Connect 1,000+ integrations and every major LLM to create agents that automate real work, visually, conversationally, or with code. Trusted by over 100,000 builders. SOC2 compliant.',
+        'Sim is the open-source AI workspace where companies build, distribute, and govern AI agents in one place. Teams build agents visually, conversationally, or with code across hundreds of integrations and every major LLM, while administrators control model access, integration access, spend limits, and deployment. Trusted by over 100,000 builders. SOC2 compliant and self-hostable.',
       applicationCategory: 'BusinessApplication',
       applicationSubCategory: 'AI Workspace',
       operatingSystem: 'Web',
@@ -109,7 +109,8 @@ const HOME_JSON_LD = {
         'AI workspace for teams',
         'Chat: build and manage agents in natural language',
         'Visual workflow builder',
-        '1,000+ integrations',
+        'CLI access for coding agents and terminal workflows',
+        'Hundreds of integrations',
         'LLM orchestration (OpenAI, Anthropic, Google, xAI, Mistral, Perplexity)',
         'Knowledge base creation',
         'Table creation',
@@ -118,6 +119,14 @@ const HOME_JSON_LD = {
         'Custom functions',
         'Scheduled workflows',
         'Event triggers',
+        'Permission groups for model, integration, and tool access',
+        'Organization and per-member spend limits',
+        'Usage analytics by workspace and member',
+        'Agent deployment as chat, API, or MCP with SSO, email, or password access',
+        'Single sign-on with domain verification',
+        'Audit records and run tracing',
+        'Configurable data retention',
+        'Self-hosting with Docker or Kubernetes',
       ],
       review: [
         {
diff --git a/apps/sim/app/(landing)/components/index.ts b/apps/sim/app/(landing)/components/index.ts
index 4181286a3a5..657a1db4c07 100644
--- a/apps/sim/app/(landing)/components/index.ts
+++ b/apps/sim/app/(landing)/components/index.ts
@@ -1,3 +1,4 @@
+export { AgentMomentum } from './agent-momentum'
 export { BackLink } from './back-link'
 export { ChevronArrow } from './chevron-arrow'
 export { ContentAuthorLoading, ContentAuthorPage } from './content-author-page'
@@ -6,6 +7,7 @@ export { ContentIndexLoading, ContentIndexPage } from './content-index-page'
 export { ContentPostLoading, ContentPostPage } from './content-post-page'
 export { ContentTagsLoading, ContentTagsPage } from './content-tags-page'
 export { Cta } from './cta/cta'
+export { FeaturedCustomer } from './featured-customer'
 export { Features } from './features'
 export { Footer } from './footer'
 export { Hero } from './hero'
@@ -13,13 +15,14 @@ export { HomeStructuredData } from './home-structured-data'
 export type { JsonLdData } from './json-ld'
 export { JsonLd } from './json-ld'
 export { LandingShell } from './landing-shell'
-export { Lifecycle } from './lifecycle'
 export { Lightbox } from './lightbox'
 export { LogoShell } from './logo-shell'
-export { Mothership } from './mothership/mothership'
 export { Navbar } from './navbar'
 export { PlatformHeroVisual } from './platform-hero-visual'
+export { PlatformSuite } from './platform-suite'
 export { ProductDemo } from './product-demo'
+export { Proof } from './proof'
+export { Security, WorkspaceControls } from './security'
 export { ShareButton } from './share-button'
 export { SiteStructuredData } from './site-structured-data'
 export type { SolutionsPageConfig } from './solutions-page'
diff --git a/apps/sim/app/(landing)/components/landing-cta-link/index.ts b/apps/sim/app/(landing)/components/landing-cta-link/index.ts
new file mode 100644
index 00000000000..1c7da837843
--- /dev/null
+++ b/apps/sim/app/(landing)/components/landing-cta-link/index.ts
@@ -0,0 +1 @@
+export { LandingCtaLink, type LandingCtaSection } from './landing-cta-link'
diff --git a/apps/sim/app/(landing)/components/landing-cta-link/landing-cta-link.test.tsx b/apps/sim/app/(landing)/components/landing-cta-link/landing-cta-link.test.tsx
new file mode 100644
index 00000000000..65c866c8a59
--- /dev/null
+++ b/apps/sim/app/(landing)/components/landing-cta-link/landing-cta-link.test.tsx
@@ -0,0 +1,80 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const { mockCaptureClientEvent } = vi.hoisted(() => ({ mockCaptureClientEvent: vi.fn() }))
+
+vi.mock('@/lib/posthog/client', () => ({ captureClientEvent: mockCaptureClientEvent }))
+
+import { LandingCtaLink } from '@/app/(landing)/components/landing-cta-link'
+
+let root: Root
+let host: HTMLDivElement
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+  host = document.createElement('div')
+  document.body.append(host)
+  root = createRoot(host)
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  host.remove()
+  vi.unstubAllGlobals()
+})
+
+function renderLink(element: React.ReactElement): HTMLAnchorElement {
+  act(() => root.render(element))
+  const anchor = host.querySelector('a')
+  if (!anchor) throw new Error('Missing anchor')
+  return anchor
+}
+
+describe('LandingCtaLink', () => {
+  it('hardens external destinations and leaves internal ones on the client router', () => {
+    const external = renderLink(
+      <LandingCtaLink href='https://docs.sim.ai/workflows'>Docs</LandingCtaLink>
+    )
+    expect(external.getAttribute('target')).toBe('_blank')
+    expect(external.getAttribute('rel')).toBe('noopener noreferrer')
+
+    const internal = renderLink(<LandingCtaLink href='/signup'>Sign up</LandingCtaLink>)
+    expect(internal.hasAttribute('target')).toBe(false)
+    expect(internal.hasAttribute('rel')).toBe(false)
+  })
+
+  it('reports a tracked click with the href as its destination', () => {
+    const onClick = vi.fn((event: React.MouseEvent) => event.preventDefault())
+    const anchor = renderLink(
+      <LandingCtaLink
+        href='/signup'
+        onClick={onClick}
+        track={{ label: 'Start building', section: 'footer_cta' }}
+      >
+        Start building
+      </LandingCtaLink>
+    )
+    act(() => anchor.click())
+    expect(onClick).toHaveBeenCalledOnce()
+    expect(mockCaptureClientEvent).toHaveBeenCalledExactlyOnceWith('landing_cta_clicked', {
+      label: 'Start building',
+      section: 'footer_cta',
+      destination: '/signup',
+    })
+  })
+
+  it('stays silent without a tracking request', () => {
+    const anchor = renderLink(
+      <LandingCtaLink href='/signup' onClick={(event) => event.preventDefault()}>
+        Sign up
+      </LandingCtaLink>
+    )
+    act(() => anchor.click())
+    expect(mockCaptureClientEvent).not.toHaveBeenCalled()
+  })
+})
diff --git a/apps/sim/app/(landing)/components/landing-cta-link/landing-cta-link.tsx b/apps/sim/app/(landing)/components/landing-cta-link/landing-cta-link.tsx
new file mode 100644
index 00000000000..4fbba3d3750
--- /dev/null
+++ b/apps/sim/app/(landing)/components/landing-cta-link/landing-cta-link.tsx
@@ -0,0 +1,80 @@
+'use client'
+
+import { ChipLink, type ChipLinkProps, cn } from '@sim/emcn'
+import type { PostHogEventMap } from '@/lib/posthog/events'
+import { ChevronArrow } from '@/app/(landing)/components/chevron-arrow'
+import { trackLandingCta } from '@/app/(landing)/track-landing-cta'
+
+type LandingCtaSize = 'compact' | 'default' | 'display'
+
+export type LandingCtaSection = PostHogEventMap['landing_cta_clicked']['section']
+
+interface LandingCtaLinkProps extends Omit<ChipLinkProps, 'variant'> {
+  size?: LandingCtaSize
+  variant?: 'primary' | 'outline'
+  /** Adds the animated chevron used by demo actions. */
+  withArrow?: boolean
+  /**
+   * Reports the click as a `landing_cta_clicked` event; the href is the
+   * destination. Serializable, so Server Components can request tracking.
+   */
+  track?: { label: string; section: LandingCtaSection }
+}
+
+const CTA_SIZE = {
+  compact: 'h-[26px] px-3 text-[13px] [--cta-arrow-icon-size:10px]',
+  default: 'h-9 px-4 text-[14px] [--cta-arrow-icon-size:12px]',
+  display: 'h-10 px-4 text-[14px] [--cta-arrow-icon-size:14px]',
+} as const satisfies Record<LandingCtaSize, string>
+
+interface CtaArrowProps {
+  className?: string
+}
+
+function CtaArrow({ className }: CtaArrowProps) {
+  return (
+    <ChevronArrow className={cn(className, 'size-[var(--cta-arrow-icon-size)]')} strokeWidth={1} />
+  )
+}
+
+/** Absolute http(s) destinations leave the site and need rel/target hardening. */
+function isExternalHref(href: ChipLinkProps['href']): boolean {
+  return typeof href === 'string' && /^https?:\/\//.test(href)
+}
+
+/**
+ * Marketing pill geometry composed with the platform chip's colors and
+ * interactions. An external href opens in a new tab with
+ * `rel='noopener noreferrer'`, matching every other outbound link in the
+ * marketing chrome; an internal href stays on the crawlable Next `<Link>`.
+ */
+export function LandingCtaLink({
+  size = 'default',
+  variant = 'primary',
+  withArrow = false,
+  rightIcon,
+  className,
+  track,
+  onClick,
+  ...props
+}: LandingCtaLinkProps) {
+  return (
+    <ChipLink
+      {...(isExternalHref(props.href) ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+      {...props}
+      onClick={(event) => {
+        onClick?.(event)
+        if (track) trackLandingCta({ ...track, destination: String(props.href) })
+      }}
+      variant={variant}
+      rightIcon={withArrow ? CtaArrow : rightIcon}
+      className={cn(
+        'justify-center rounded-full text-center duration-150 [&>span]:[font-size:inherit]',
+        'focus-visible:outline focus-visible:outline-1 focus-visible:outline-[var(--text-primary)] focus-visible:outline-offset-4',
+        CTA_SIZE[size],
+        withArrow && ['group/link', size === 'compact' ? 'gap-1.5 pr-2' : 'gap-2'],
+        className
+      )}
+    />
+  )
+}
diff --git a/apps/sim/app/(landing)/components/landing-layout.ts b/apps/sim/app/(landing)/components/landing-layout.ts
index 0d41a67b843..dc0e57c0ca4 100644
--- a/apps/sim/app/(landing)/components/landing-layout.ts
+++ b/apps/sim/app/(landing)/components/landing-layout.ts
@@ -1,8 +1,18 @@
-/** Shared centered width used by the landing navbar and every primary section. */
-export const LANDING_CONTENT_WIDTH = 'mx-auto w-full max-w-[1460px]'
+/**
+ * Shared centered width used by the landing navbar and every primary section.
+ *
+ * 1728px is Harvey's `max-w-page-width`: wide enough that on a 1440–1920
+ * screen the frame is the viewport minus a small gutter, not a 1460px column
+ * floating in 80px insets.
+ */
+export const LANDING_CONTENT_WIDTH = 'mx-auto w-full max-w-[1728px]'
 
-/** Shared responsive horizontal gutter used across the landing family. */
-export const LANDING_GUTTER = 'px-20 max-sm:px-5 max-lg:px-8'
+/**
+ * Shared responsive horizontal gutter. Matches Harvey's page padding
+ * (`px-7` / `md:px-8` / `lg:px-9` / `xl:px-10`) so section edges sit close
+ * to the browser. Desktop-first `max-*` equivalents of that scale.
+ */
+export const LANDING_GUTTER = 'px-10 max-md:px-7 max-lg:px-8 max-xl:px-9'
 
 /** Shared responsive top clearance for the first landing hero beneath the navbar. */
 export const LANDING_HERO_TOP_PADDING = 'pt-[112px] max-sm:pt-12 max-xl:pt-20'
@@ -10,6 +20,37 @@ export const LANDING_HERO_TOP_PADDING = 'pt-[112px] max-sm:pt-12 max-xl:pt-20'
 /** Shared vertical rhythm between top-level landing sections. */
 export const LANDING_SECTION_RHYTHM = 'gap-[120px] max-sm:gap-16 max-lg:gap-[88px]'
 
+/**
+ * Homepage-only rhythm. The marketing pages that share
+ * {@link LANDING_SECTION_RHYTHM} stay on the original 120px beat; the homepage
+ * uses 144 / 96 / 80px between major sections. Related sections are grouped
+ * with smaller positive gaps in `Landing`, so their spacing stays independent
+ * of this outer rhythm.
+ */
+export const HOME_SECTION_RHYTHM = 'gap-36 max-sm:gap-20 max-lg:gap-24'
+
+/**
+ * Shared 10/12 inset for homepage content. The hero masthead and product
+ * preview share this measure so their leading and trailing edges align.
+ */
+export const HOME_INSET = 'w-full lg:mx-auto lg:w-[83.333%]'
+
+/** Shared chrome for an elevated product window on the homepage. */
+export const LANDING_WINDOW_SHADOW =
+  'shadow-[0_0_0_1px_rgba(0,0,0,0.08),0_2px_6px_0_rgba(0,0,0,0.05),0_4px_42px_0_rgba(0,0,0,0.06)]'
+
+/**
+ * Corner radius for full-width painted/product stages (hero, product-demo,
+ * connect). Tight enough to read as a product frame rather than a pill.
+ */
+export const LANDING_STAGE_RADIUS = 'rounded-[12px]'
+
+/**
+ * Inner product window nested inside a painted stage. Tighter than
+ * {@link LANDING_STAGE_RADIUS} so the nested clip stays inside the outer.
+ */
+export const LANDING_STAGE_WINDOW_RADIUS = 'rounded-[8px]'
+
 /**
  * Extra top separation for a hero CTA over the hero stack gap. Headline and
  * description are one copy group and keep the tight 22px stack gap; the CTA is
@@ -17,3 +58,44 @@ export const LANDING_SECTION_RHYTHM = 'gap-[120px] max-sm:gap-16 max-lg:gap-[88p
  * roughly 1.5× the headline→description gap.
  */
 export const LANDING_HERO_CTA_GAP = 'mt-3'
+
+/**
+ * Shared landing type scale used by platform heroes, `/enterprise`, and
+ * marketing subpages. Homepage display sizes live in {@link HOME_TYPE} so a
+ * 96px H1 cannot leak onto those pages.
+ */
+export const LANDING_TYPE = {
+  /** The page's single `<h1>`. */
+  h1: 'text-[76px] leading-[1.0] tracking-[-0.03em] max-sm:text-[38px] max-xl:text-[56px]',
+  /**
+   * Homepage proof claim. Harvey's post-hero H2 is 40px, one step quieter
+   * than a section headline in the same Season tracking family.
+   */
+  proof: 'text-[40px] leading-[1.1] tracking-[-0.02em] max-sm:text-[28px] max-xl:text-[34px]',
+  /** Primary supporting copy - hero description, section descriptions. */
+  lead: 'text-[20px] leading-[1.4] max-sm:text-[17px]',
+  /** Secondary copy - sub-feature definitions, list-row descriptions. */
+  body: 'text-[16px] leading-[1.45]',
+  /** Labels, eyebrows, and meta. */
+  meta: 'text-[14px] leading-[1.4]',
+} as const
+
+/**
+ * Homepage-only type scale. The 80px Season masthead is restrained enough for
+ * the wide split composition while the remaining section scale stays unchanged.
+ * Isolated from {@link LANDING_TYPE} so `/enterprise` and platform heroes keep
+ * their current masthead.
+ */
+export const HOME_TYPE = {
+  /** Homepage `<h1>` - compact display scale for the architectural hero. */
+  h1: 'text-[80px] leading-[0.96] tracking-[-0.025em] max-sm:text-[42px] max-xl:text-[64px]',
+  /** Centered media / audience `<h2>` - Harvey `text-heading-2` (64px). */
+  h2Display: 'text-[64px] leading-[1.05] tracking-[-0.025em] max-sm:text-[36px] max-xl:text-[48px]',
+  /** Quieter section `<h2>` - Harvey `text-heading-4` / proof (40px). */
+  h2: LANDING_TYPE.proof,
+  /** Card titles on the two-window platform row. */
+  h3: 'text-[32px] leading-[1.15] tracking-[-0.015em] max-sm:text-[24px]',
+  lead: LANDING_TYPE.lead,
+  body: LANDING_TYPE.body,
+  meta: LANDING_TYPE.meta,
+} as const
diff --git a/apps/sim/app/(landing)/components/landing-shell/landing-shell.test.tsx b/apps/sim/app/(landing)/components/landing-shell/landing-shell.test.tsx
new file mode 100644
index 00000000000..92b54e6230c
--- /dev/null
+++ b/apps/sim/app/(landing)/components/landing-shell/landing-shell.test.tsx
@@ -0,0 +1,217 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { readdirSync, readFileSync } from 'node:fs'
+import { dirname, join, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { type AnchorHTMLAttributes, act, type ReactNode } from 'react'
+import ts from '@typescript/typescript6'
+import { createRoot, type Root } from 'react-dom/client'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { LandingShell } from '@/app/(landing)/components/landing-shell/landing-shell'
+
+interface TestLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  href: string
+}
+
+const { setTheme } = vi.hoisted(() => ({ setTheme: vi.fn() }))
+
+vi.mock('@sim/emcn', () => ({
+  cn: (...values: unknown[]) => values.flat().filter(Boolean).join(' '),
+  ChipLink: ({ href, children, className }: TestLinkProps) => (
+    <a href={href} className={className}>
+      {children}
+    </a>
+  ),
+}))
+vi.mock('@sim/emcn/icons', () => ({ Moon: () => null, Sun: () => null }))
+vi.mock('next/link', () => ({
+  default: ({ href, children, ...props }: TestLinkProps) => (
+    <a href={href} {...props}>
+      {children}
+    </a>
+  ),
+}))
+vi.mock('next/image', () => ({
+  default: ({ src, alt }: { src: string; alt: string }) => <img src={src} alt={alt} />,
+}))
+vi.mock('next-themes', () => ({
+  useTheme: () => ({ resolvedTheme: 'light', setTheme }),
+}))
+vi.mock('@/lib/core/config/env-flags', () => ({ isHosted: true }))
+vi.mock('@/lib/github/stars', () => ({ getGitHubStars: vi.fn().mockResolvedValue(29_500) }))
+vi.mock('@/app/(landing)/components/navbar/navbar', () => ({
+  Navbar: () => <nav aria-label='Primary navigation' />,
+}))
+vi.mock('@/app/(landing)/components/site-structured-data', () => ({
+  SiteStructuredData: () => null,
+}))
+vi.mock('@/app/(landing)/components/footer/components/footer-wordmark-loop', () => ({
+  FooterWordmarkLoop: () => null,
+}))
+vi.mock('@/app/_shell/consent/consent-preferences-trigger', () => ({
+  ConsentPreferencesTrigger: ({ children }: { children: ReactNode }) => (
+    <button type='button'>{children}</button>
+  ),
+}))
+vi.mock('@/app/(landing)/comparisons/utils', () => ({
+  ALL_COMPETITORS: [{ id: 'n8n', name: 'n8n' }],
+}))
+vi.mock('@/app/(landing)/models/utils', () => ({
+  MODEL_PROVIDERS_WITH_CATALOGS: [{ name: 'OpenAI', href: '/models/openai' }],
+}))
+
+let host: HTMLDivElement
+let root: Root | undefined
+
+beforeEach(() => {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  setTheme.mockClear()
+  root = undefined
+  host = document.createElement('div')
+  document.body.append(host)
+})
+
+afterEach(() => {
+  if (root) act(() => root?.unmount())
+  host.remove()
+})
+
+function renderShell() {
+  return LandingShell({
+    children: (
+      <main id='main-content'>
+        <h1>Page-specific marketing content</h1>
+        <p>The page supplies its own content.</p>
+      </main>
+    ),
+  })
+}
+
+function requiredElement<T extends Element>(selector: string, scope: ParentNode = host): T {
+  const element = scope.querySelector<T>(selector)
+  if (!element) throw new Error(`Expected ${selector} in the marketing shell`)
+  return element
+}
+
+describe('LandingShell shared closing section', () => {
+  it('places one painted CTA after page content and before the shared footer with both themes and correct actions', async () => {
+    host.innerHTML = renderToStaticMarkup(await renderShell())
+    const main = requiredElement('main')
+    const cta = requiredElement('#cta')
+    const footer = requiredElement('footer')
+    expect(host.querySelectorAll('#cta')).toHaveLength(1)
+    expect(host.querySelectorAll('#cta-heading')).toHaveLength(1)
+    expect(host.querySelectorAll('footer')).toHaveLength(1)
+    expect(main.compareDocumentPosition(cta) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+    expect(cta.compareDocumentPosition(footer) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+    expect(main.contains(cta)).toBe(false)
+    expect(requiredElement('#cta-heading').textContent).toBe(
+      'Every agent your company runs. All in one place. '
+    )
+    expect(Array.from(cta.querySelectorAll('img'), (image) => image.getAttribute('src'))).toEqual([
+      '/landing/cta-san-francisco-painted-light.webp',
+      '/landing/cta-san-francisco-painted-dark.webp',
+    ])
+    expect(Array.from(cta.querySelectorAll('img'), (image) => image.alt)).toEqual(['', ''])
+    expect(
+      Array.from(cta.querySelectorAll('a'), (link) => ({
+        label: link.textContent?.trim(),
+        href: link.getAttribute('href'),
+      }))
+    ).toEqual([
+      { label: 'Request a demo', href: '/demo' },
+      { label: 'Start building', href: '/signup' },
+    ])
+  })
+
+  it('keeps the universal footer navigation and usable light/dark control on arbitrary marketing pages', async () => {
+    const shell = await renderShell()
+    root = createRoot(host)
+    act(() => root?.render(shell))
+    const footer = requiredElement('footer')
+    const navigation = requiredElement('nav[aria-label="Footer navigation"]', footer)
+    expect(Array.from(navigation.querySelectorAll('h3'), (heading) => heading.textContent)).toEqual(
+      ['Product', 'Resources', 'Compare', 'Integrations', 'Models', 'Socials', 'Legal']
+    )
+    for (const href of [
+      '/enterprise',
+      '/workflows',
+      '/knowledge',
+      '/tables',
+      '/files',
+      '/logs',
+      '/blog',
+      '/library',
+      '/careers',
+      '/contact',
+      '/comparisons',
+      '/integrations',
+      '/models',
+      '/terms',
+      '/privacy',
+      '/cookie-policy',
+    ]) {
+      expect(navigation.querySelector(`a[href="${href}"]`)).not.toBeNull()
+    }
+    const themes = requiredElement('[role="radiogroup"][aria-label="Color theme"]', footer)
+    const light = requiredElement<HTMLInputElement>('input[aria-label="Light theme"]', themes)
+    const dark = requiredElement<HTMLInputElement>('input[aria-label="Dark theme"]', themes)
+    expect(light.checked).toBe(true)
+    expect(dark.checked).toBe(false)
+    act(() => dark.click())
+    expect(setTheme).toHaveBeenCalledExactlyOnceWith('dark')
+  })
+
+  it('reserves closing CTA and footer ownership for the shared shell across marketing routes', () => {
+    const landingDirectory = resolve(dirname(fileURLToPath(import.meta.url)), '../..')
+    const shellPath = 'components/landing-shell/landing-shell.tsx'
+    const ctaPath = 'components/cta/cta.tsx'
+    const footerPath = 'components/footer/footer.tsx'
+    const violations: string[] = []
+    const files = readdirSync(landingDirectory, { recursive: true }).filter(
+      (file) => file.endsWith('.tsx') && !file.endsWith('.test.tsx')
+    )
+    for (const file of files) {
+      const source = ts.createSourceFile(
+        file,
+        readFileSync(join(landingDirectory, file), 'utf8'),
+        ts.ScriptTarget.Latest,
+        true,
+        ts.ScriptKind.TSX
+      )
+      const closingComponents = new Set(['Cta', 'Footer'])
+      for (const statement of source.statements) {
+        if (!ts.isImportDeclaration(statement)) continue
+        const bindings = statement.importClause?.namedBindings
+        if (!bindings || !ts.isNamedImports(bindings)) continue
+        for (const binding of bindings.elements) {
+          if (['Cta', 'Footer'].includes((binding.propertyName ?? binding.name).text))
+            closingComponents.add(binding.name.text)
+        }
+      }
+      const visit = (node: ts.Node) => {
+        if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
+          const tag = node.tagName.getText(source)
+          if (closingComponents.has(tag) && file !== shellPath) violations.push(`${file}: ${tag}`)
+          if (tag === 'footer' && file !== footerPath) violations.push(`${file}: footer landmark`)
+          for (const attribute of node.attributes.properties) {
+            if (!ts.isJsxAttribute(attribute) || attribute.name.getText(source) !== 'id') continue
+            const value = attribute.initializer
+            if (
+              value &&
+              ts.isStringLiteral(value) &&
+              ['cta', 'cta-heading'].includes(value.text) &&
+              file !== ctaPath
+            )
+              violations.push(`${file}: duplicate closing ${value.text}`)
+          }
+        }
+        ts.forEachChild(node, visit)
+      }
+      visit(source)
+    }
+    expect(violations).toEqual([])
+  })
+})
diff --git a/apps/sim/app/(landing)/components/landing-shell/landing-shell.tsx b/apps/sim/app/(landing)/components/landing-shell/landing-shell.tsx
index abb8746bcab..79d42ce383b 100644
--- a/apps/sim/app/(landing)/components/landing-shell/landing-shell.tsx
+++ b/apps/sim/app/(landing)/components/landing-shell/landing-shell.tsx
@@ -1,31 +1,18 @@
 import type { ReactNode } from 'react'
 import { isHosted } from '@/lib/core/config/env-flags'
 import { getGitHubStars } from '@/lib/github/stars'
+import { Cta } from '@/app/(landing)/components/cta/cta'
 import { Footer } from '@/app/(landing)/components/footer/footer'
 import { Navbar } from '@/app/(landing)/components/navbar/navbar'
 import { SiteStructuredData } from '@/app/(landing)/components/site-structured-data'
 
 /**
- * The shared chrome every landing-family page wears - the home page, every
- * platform page (Workflows, Tables, Files, …), and every solutions page (IT,
- * Engineering, …). It is the single source of truth for the page frame, so each
- * page is just `<LandingShell>{content}</LandingShell>` and can never drift.
- *
- * It owns:
- * - The `light` wrapper, which pins every `var(--*)` design token to its
- *   light-mode value regardless of the visitor's theme - the landing family is
- *   always light, and uses the platform's own light-mode tokens (from
- *   `globals.css`) with no separate palette.
- * - The page's scroll port (`h-screen` + `overflow-y-auto` +
- *   `overscroll-y-none`): the document body no longer overflows, so the viewport
- *   can't rubber-band, and the container's own overscroll bounce is disabled -
- *   without this the sticky navbar gets dragged past the top/bottom edges.
- * - The skip link (targets `#main-content`), the {@link Navbar} (GitHub stars
- *   fetched here at build/revalidate time - never client-fetched), and the
- *   {@link Footer}.
- *
- * The page supplies only the `<main id='main-content'>` content between the
- * navbar and footer. Async Server Component; pages render it with zero props.
+ * Persistent marketing chrome, mounted once by the landing route-group layout.
+ * Every page supplies its main content; this shell owns the themed scroll port,
+ * navigation, painted pre-footer CTA, footer, and site-wide structured data.
+ * Positioning the scroll port contains absolute artwork within its overflow,
+ * preventing an outer document scroll from carrying the sticky header away.
+ * The closing group keeps the same responsive separation on every route.
  */
 
 interface LandingShellProps {
@@ -37,7 +24,7 @@ export async function LandingShell({ children }: LandingShellProps) {
   const stars = await getGitHubStars()
 
   return (
-    <div className='light h-screen overflow-y-auto overscroll-y-none bg-[var(--bg)] text-[var(--text-primary)]'>
+    <div className='relative h-screen overflow-y-auto overscroll-y-none bg-[var(--bg)] text-[var(--text-primary)] [--text-muted:var(--text-secondary)]'>
       <SiteStructuredData />
       <a
         href='#main-content'
@@ -47,7 +34,10 @@ export async function LandingShell({ children }: LandingShellProps) {
       </a>
       <Navbar stars={stars} />
       {children}
-      <Footer showConsentPreferences={isHosted} />
+      <div className='pt-36 max-sm:pt-20 max-lg:pt-24'>
+        <Cta />
+        <Footer showConsentPreferences={isHosted} />
+      </div>
     </div>
   )
 }
diff --git a/apps/sim/app/(landing)/components/lifecycle/components/lifecycle-icons/index.ts b/apps/sim/app/(landing)/components/lifecycle/components/lifecycle-icons/index.ts
deleted file mode 100644
index 584f72276a5..00000000000
--- a/apps/sim/app/(landing)/components/lifecycle/components/lifecycle-icons/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { BuildIcon, DeployIcon, MonitorIcon } from './lifecycle-icons'
diff --git a/apps/sim/app/(landing)/components/lifecycle/components/lifecycle-icons/lifecycle-icons.tsx b/apps/sim/app/(landing)/components/lifecycle/components/lifecycle-icons/lifecycle-icons.tsx
deleted file mode 100644
index 5f142d89c57..00000000000
--- a/apps/sim/app/(landing)/components/lifecycle/components/lifecycle-icons/lifecycle-icons.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import type { SVGProps } from 'react'
-
-/**
- * Isometric line-art icons for the lifecycle axes - Build, Deploy, Monitor.
- *
- * Each icon is built from one primitive: an {@link IsoBox} described in screen
- * space (a top rhombus of half-width `w` extruded down by height `h`). Because a
- * box is centered on `cx` by construction, symmetric arrangements are trivial,
- * and every visible face is filled with `var(--bg)` so a nearer box cleanly
- * occludes the edges of one behind it - the wireframe technique that keeps the
- * forms readable without shading. Draw boxes far → near.
- *
- * All three share the 132×120 viewBox and inherit color from `currentColor`, so
- * the section sets one tone (`--text-muted`) and the strokes follow. Purely
- * decorative - the parent marks each `aria-hidden`.
- */
-
-const VIEW = { w: 132, h: 120 } as const
-
-interface IsoBoxSpec {
-  /** Horizontal center of the box (screen px). */
-  cx: number
-  /** Vertical center of the top rhombus (screen px). */
-  topY: number
-  /** Half-width of the top rhombus; its half-height is `w / 2` (isometric). */
-  w: number
-  /** Vertical extrusion height. */
-  h: number
-}
-
-/** The three visible faces of an isometric box as SVG path `d` strings. */
-function isoFaces({ cx, topY, w, h }: IsoBoxSpec) {
-  const rh = w / 2
-  const back = `${cx},${topY - rh}`
-  const right = `${cx + w},${topY}`
-  const front = `${cx},${topY + rh}`
-  const left = `${cx - w},${topY}`
-  const leftB = `${cx - w},${topY + h}`
-  const frontB = `${cx},${topY + rh + h}`
-  const rightB = `${cx + w},${topY + h}`
-  return {
-    top: `M${back} L${right} L${front} L${left} Z`,
-    left: `M${left} L${front} L${frontB} L${leftB} Z`,
-    right: `M${right} L${front} L${frontB} L${rightB} Z`,
-  }
-}
-
-function IsoBox(spec: IsoBoxSpec) {
-  const { top, left, right } = isoFaces(spec)
-  return (
-    <>
-      <path d={left} />
-      <path d={right} />
-      <path d={top} />
-    </>
-  )
-}
-
-type IconProps = SVGProps<SVGSVGElement>
-
-function IconFrame({ children, ...props }: IconProps) {
-  return (
-    <svg
-      width={VIEW.w}
-      height={VIEW.h}
-      viewBox={`0 0 ${VIEW.w} ${VIEW.h}`}
-      fill='none'
-      aria-hidden='true'
-      {...props}
-    >
-      <g
-        fill='var(--bg)'
-        stroke='currentColor'
-        strokeWidth={1.2}
-        strokeLinejoin='round'
-        strokeLinecap='round'
-      >
-        {children}
-      </g>
-    </svg>
-  )
-}
-
-/** Build - a block descending onto a stack of layers, as if assembling an agent. */
-export function BuildIcon(props: IconProps) {
-  return (
-    <IconFrame {...props}>
-      <IsoBox cx={66} topY={78} w={24} h={7} />
-      <IsoBox cx={66} topY={67} w={24} h={7} />
-      <IsoBox cx={66} topY={56} w={24} h={7} />
-      <IsoBox cx={66} topY={36} w={24} h={7} />
-      <path d='M66,31 L75,36 L66,41 L57,36 Z' fill='none' opacity={0.6} />
-    </IconFrame>
-  )
-}
-
-/** Deploy - instances shipping out: a tall unit flanked by two smaller cubes. */
-export function DeployIcon(props: IconProps) {
-  return (
-    <IconFrame {...props}>
-      <IsoBox cx={66} topY={46} w={18} h={28} />
-      <IsoBox cx={44} topY={64} w={14} h={18} />
-      <IsoBox cx={88} topY={64} w={14} h={18} />
-      <circle cx={66} cy={42} r={1.3} fill='currentColor' stroke='none' />
-      <circle cx={44} cy={61} r={1.3} fill='currentColor' stroke='none' />
-      <circle cx={88} cy={61} r={1.3} fill='currentColor' stroke='none' />
-    </IconFrame>
-  )
-}
-
-const MONITOR_BARS = [
-  { x: 44, ground: 86, h: 18 },
-  { x: 55, ground: 80.5, h: 30 },
-  { x: 66, ground: 75, h: 22 },
-  { x: 77, ground: 69.5, h: 38 },
-  { x: 88, ground: 64, h: 28 },
-] as const
-
-/** Monitor - a run of metric bars receding into the distance, like a live chart. */
-export function MonitorIcon(props: IconProps) {
-  return (
-    <IconFrame {...props}>
-      {/* Far → near so nearer bars occlude the ones behind them. */}
-      {[...MONITOR_BARS].reverse().map((bar) => (
-        <IsoBox key={bar.x} cx={bar.x} topY={bar.ground - bar.h} w={5} h={bar.h} />
-      ))}
-    </IconFrame>
-  )
-}
diff --git a/apps/sim/app/(landing)/components/lifecycle/index.ts b/apps/sim/app/(landing)/components/lifecycle/index.ts
deleted file mode 100644
index bc583bf7680..00000000000
--- a/apps/sim/app/(landing)/components/lifecycle/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Lifecycle } from './lifecycle'
diff --git a/apps/sim/app/(landing)/components/lifecycle/lifecycle.tsx b/apps/sim/app/(landing)/components/lifecycle/lifecycle.tsx
deleted file mode 100644
index 1c767b2983c..00000000000
--- a/apps/sim/app/(landing)/components/lifecycle/lifecycle.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import type { ComponentType, SVGProps } from 'react'
-import {
-  BuildIcon,
-  DeployIcon,
-  MonitorIcon,
-} from '@/app/(landing)/components/lifecycle/components/lifecycle-icons'
-
-/**
- * Landing lifecycle - the three axes along which teams use Sim: build, deploy,
- * monitor. A split-statement `<h2>` (headline color + body color, matching the
- * features header) tops a three-column grid; each column pairs an isometric
- * line-art icon with an `<h3>` axis title and a one-line description.
- *
- * The columns carry a left hairline (`--border`) for the technical, reference-
- * style rhythm; the icon area is `flex-1` so the three titles bottom-align
- * regardless of icon height. Icons inherit `--text-muted` via `currentColor`.
- *
- * Inter-section spacing is owned by the `<main>` flex `gap` in `landing.tsx`;
- * this section carries no vertical padding. Horizontal padding (`px-20`) matches
- * the navbar and hero so the headline starts on the wordmark's line, and the
- * section is capped and centered at the shared `max-w-[1460px]`. First
- * section after the hero, above {@link Features}.
- */
-
-interface Axis {
-  title: string
-  description: string
-  Icon: ComponentType<SVGProps<SVGSVGElement>>
-}
-
-const AXES: Axis[] = [
-  {
-    title: 'Build',
-    description:
-      'Build agents visually, in natural language, or with code, wiring up any model and 1,000+ integrations.',
-    Icon: BuildIcon,
-  },
-  {
-    title: 'Deploy',
-    description:
-      'Ship agents to production as APIs, Slack bots, or scheduled jobs, live in a click.',
-    Icon: DeployIcon,
-  },
-  {
-    title: 'Monitor',
-    description: 'Trace every run block by block, with full logs of what each agent did and why.',
-    Icon: MonitorIcon,
-  },
-]
-
-export function Lifecycle() {
-  return (
-    <section
-      id='lifecycle'
-      aria-labelledby='lifecycle-heading'
-      className='mx-auto w-full max-w-[1460px] px-20'
-    >
-      <h2 id='lifecycle-heading' className='max-w-[1200px] text-balance text-[32px] leading-[1.3]'>
-        <span className='text-[var(--text-primary)]'>From idea to production.</span>{' '}
-        <span className='text-[var(--text-body)]'>
-          Build agents, deploy them, and monitor every run, all in one workspace.
-        </span>
-      </h2>
-
-      <ul className='mt-20 grid grid-cols-3 gap-12'>
-        {AXES.map(({ title, description, Icon }) => (
-          <li
-            key={title}
-            className='flex flex-col border-[var(--border)] border-l pl-8 text-[var(--text-muted)]'
-          >
-            <div className='flex flex-1 items-center justify-center py-10'>
-              <Icon />
-            </div>
-            <h3 className='text-[18px] text-[var(--text-primary)]'>{title}</h3>
-            <p className='mt-2 max-w-[300px] text-[15px] text-[var(--text-body)] leading-[1.5]'>
-              {description}
-            </p>
-          </li>
-        ))}
-      </ul>
-    </section>
-  )
-}
diff --git a/apps/sim/app/(landing)/components/logo-shell/logo-shell.tsx b/apps/sim/app/(landing)/components/logo-shell/logo-shell.tsx
index 64c25cbc09d..6442ab1b77c 100644
--- a/apps/sim/app/(landing)/components/logo-shell/logo-shell.tsx
+++ b/apps/sim/app/(landing)/components/logo-shell/logo-shell.tsx
@@ -1,16 +1,14 @@
 import type { ReactNode } from 'react'
 import { cn } from '@sim/emcn'
-import Link from 'next/link'
 import { DesktopTitleBarLane } from '@/app/_shell/desktop-title-bar'
-import { LogoMark, SimWordmark } from '@/app/(landing)/components/navbar/components'
+import { LANDING_CONTENT_WIDTH, LANDING_GUTTER } from '@/app/(landing)/components/landing-layout'
+import { LogoMark } from '@/app/(landing)/components/navbar/components/logo-mark'
+import { SimWordmark } from '@/app/(landing)/components/navbar/components/sim-wordmark'
 
 /**
- * The canonical light, logo-only page frame - a Sim wordmark linking home, no
- * marketing menus, on the platform's light tokens (the `light` class pins
- * light mode regardless of visitor theme). It is the shared base for every
- * surface that wants minimal chrome: the global 404, and the `(interfaces)`
- * group (which adds a support footer). The `(auth)` group uses its own
- * `AuthShell` with the same look.
+ * Logo-only page frame shared by status pages and public interfaces. Interfaces
+ * default to light tokens; status pages inherit the active theme. The home link
+ * uses document navigation so marketing initializes its own theme store.
  *
  * Children decide their own layout: pass `center` for a single centered column
  * (404 message, simple gates); omit it for full-width content (the live chat
@@ -23,19 +21,26 @@ interface LogoShellProps {
   center?: boolean
   /** Optional footer rendered after the content (e.g. a support footer). */
   footer?: ReactNode
+  /** Status pages follow the active theme; public interfaces retain their light appearance. */
+  theme?: 'light' | 'inherit'
 }
 
-export function LogoShell({ children, center = false, footer }: LogoShellProps) {
+export function LogoShell({ children, center = false, footer, theme = 'light' }: LogoShellProps) {
   return (
-    <div className='light desktop-title-bar-page relative flex flex-col bg-[var(--bg)] text-[var(--text-primary)]'>
+    <div
+      className={cn(
+        'desktop-title-bar-page relative flex flex-col bg-[var(--bg)] text-[var(--text-primary)]',
+        theme === 'light' && 'light'
+      )}
+    >
       <DesktopTitleBarLane />
       <header>
-        <nav className='mx-auto flex w-full max-w-[1460px] items-center px-20 py-4 max-sm:px-5 max-lg:px-8'>
-          <Link href='/' aria-label='Sim home' className='flex h-[30px] items-center'>
+        <nav className={cn('flex items-center py-4', LANDING_CONTENT_WIDTH, LANDING_GUTTER)}>
+          <a href='/' aria-label='Sim home' className='flex h-[30px] items-center'>
             <LogoMark>
               <SimWordmark />
             </LogoMark>
-          </Link>
+          </a>
         </nav>
       </header>
       <main
diff --git a/apps/sim/app/(landing)/components/logos/index.ts b/apps/sim/app/(landing)/components/logos/index.ts
index 544803cbab3..abd46075407 100644
--- a/apps/sim/app/(landing)/components/logos/index.ts
+++ b/apps/sim/app/(landing)/components/logos/index.ts
@@ -1 +1 @@
-export { Logos } from './logos'
+export { LOGOS, type Logo, Logos, MUTED_MARK } from './logos'
diff --git a/apps/sim/app/(landing)/components/logos/logos.tsx b/apps/sim/app/(landing)/components/logos/logos.tsx
index c8aa37cedcb..7e40d3ea9bf 100644
--- a/apps/sim/app/(landing)/components/logos/logos.tsx
+++ b/apps/sim/app/(landing)/components/logos/logos.tsx
@@ -1,3 +1,4 @@
+import { cn } from '@sim/emcn'
 import Image from 'next/image'
 
 /**
@@ -19,8 +20,26 @@ import Image from 'next/image'
 /** In the hero card grid the wordmarks render smaller than their optical row size. */
 const GRID_ICON_SCALE = 0.85
 
+/** Homepage proof row - slightly larger so customer marks carry more visual authority. */
+const PROOF_ICON_SCALE = 1.6
+
+/**
+ * Muted proof marks: flatten to a single ink, then drop opacity so they read
+ * as light-to-medium gray against `--bg` without hex recoloring. On the dark
+ * ground the flattened ink inverts to white first, so the same opacity reads
+ * as medium gray there too. Grid cards and other row consumers stay
+ * full-contrast.
+ */
+export const MUTED_MARK = 'brightness-0 opacity-40 dark:invert'
+
+/**
+ * Full-contrast marks keep their own ink on the light ground; on the dark
+ * ground that ink would vanish into the surface, so they flatten to white.
+ */
+const FULL_MARK = 'dark:brightness-0 dark:invert'
+
 /** A single customer wordmark with the dimensions that keep it optically balanced. */
-interface Logo {
+export interface Logo {
   /** Accessible company name, used as the image `alt`. */
   name: string
   /** Path to the SVG wordmark under `/public`. */
@@ -36,7 +55,7 @@ interface Logo {
  * them 3-up (Rivian|VW, eXp Realty, Artie) with the remaining two
  * (thinkproject, Mobile Health) centered beneath.
  */
-const LOGOS: readonly Logo[] = [
+export const LOGOS: readonly Logo[] = [
   {
     name: 'Rivian | Volkswagen Group Technologies',
     src: '/landing/logos/rivian-vw.svg',
@@ -59,6 +78,9 @@ const LOGOS: readonly Logo[] = [
   },
 ] as const
 
+type LogosSize = 'default' | 'display' | 'proof'
+type LogosTone = 'default' | 'muted'
+
 interface LogosProps {
   /**
    * Layout intent.
@@ -76,6 +98,37 @@ interface LogosProps {
    * - `row` - the platform page's single centered row of bare wordmarks.
    */
   layout: 'grid' | 'row'
+  /**
+   * Optical scale for the `row` layout. `display` is a large proof wall.
+   * The proof size is slightly larger than the default row, with a wider
+   * distribution so five marks read as established customer proof.
+   */
+  size?: LogosSize
+  /**
+   * Color treatment for `row` layouts. `muted` lightens wordmarks toward a
+   * Harvey-style gray; `grid` ignores this so platform cards stay full-contrast.
+   */
+  tone?: LogosTone
+}
+
+function rowHeight(size: LogosSize, opticalHeight: number): number {
+  if (size === 'display') {
+    return Math.round(opticalHeight * 1.75)
+  }
+  if (size === 'proof') {
+    return Math.round(opticalHeight * PROOF_ICON_SCALE)
+  }
+  return opticalHeight
+}
+
+function rowClassName(size: LogosSize): string {
+  if (size === 'display') {
+    return 'flex flex-wrap items-center justify-center gap-x-16 gap-y-10 max-sm:gap-x-10'
+  }
+  if (size === 'proof') {
+    return 'flex w-full max-w-[1280px] flex-wrap items-center justify-between gap-x-6 gap-y-10 max-sm:gap-x-8 max-sm:gap-y-8 max-xl:justify-center max-xl:gap-x-12'
+  }
+  return 'flex flex-wrap items-center justify-center gap-x-24 gap-y-12'
 }
 
 /**
@@ -86,26 +139,30 @@ interface LogosProps {
  * way a logo scales down to fit when it would otherwise overflow
  * (`max-w-full h-auto`), so wide marks never break the box.
  */
-export function Logos({ layout }: LogosProps) {
+export function Logos({ layout, size = 'default', tone = 'default' }: LogosProps) {
   const isGrid = layout === 'grid'
+  const isMuted = !isGrid && tone === 'muted'
+  const isProof = !isGrid && size === 'proof'
   return (
     <ul
-      aria-label='Companies building AI agents with Sim'
+      aria-label='Companies building and governing AI agents with Sim'
       className={
-        isGrid
-          ? 'flex w-[564px] flex-wrap justify-center gap-3 max-xl:w-full'
-          : 'flex flex-wrap items-center justify-center gap-x-24 gap-y-12'
+        isGrid ? 'flex w-[564px] flex-wrap justify-center gap-3 max-xl:w-full' : rowClassName(size)
       }
     >
       {LOGOS.map((logo) => {
-        const height = isGrid ? Math.round(logo.height * GRID_ICON_SCALE) : logo.height
+        const height = isGrid
+          ? Math.round(logo.height * GRID_ICON_SCALE)
+          : rowHeight(size, logo.height)
         return (
           <li
             key={logo.name}
             className={
               isGrid
                 ? 'flex h-24 w-[180px] items-center justify-center rounded-lg border border-[var(--border-1)] bg-[var(--surface-1)] px-3 max-sm:w-[calc(50%-0.375rem)] max-xl:w-[calc(33.333%-0.5rem)]'
-                : undefined
+                : isProof
+                  ? 'max-sm:flex max-sm:basis-[calc(50%-1rem)] max-sm:items-center max-sm:justify-center max-sm:first:basis-full'
+                  : undefined
             }
           >
             <Image
@@ -113,7 +170,10 @@ export function Logos({ layout }: LogosProps) {
               alt={logo.name}
               height={height}
               width={Math.round(height * logo.aspect)}
-              className={isGrid ? 'h-auto max-w-full object-contain' : undefined}
+              className={cn(
+                (isGrid || isProof) && 'h-auto max-w-full object-contain',
+                isMuted ? MUTED_MARK : FULL_MARK
+              )}
             />
           </li>
         )
diff --git a/apps/sim/app/(landing)/components/mothership/components/iso-marks/goo-defs.tsx b/apps/sim/app/(landing)/components/mothership/components/iso-marks/goo-defs.tsx
deleted file mode 100644
index e607c3b122e..00000000000
--- a/apps/sim/app/(landing)/components/mothership/components/iso-marks/goo-defs.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * Shared SVG `<defs>` for the iso goo-mark family: the brand radial gradient
- * (`#2C2C2C` center → `#5F5F5F` edge) and the metaball goo filter. The iso marks
- * pass a lower `gooFusion` (0.8) so the wireframes stay crisp while still fusing
- * softly at the joints.
- */
-interface GooDefsProps {
-  gradId: string
-  gooId: string
-  gooFusion?: number
-  /** Gradient stops + radial position - default to the locked brand recipe. */
-  from?: string
-  to?: string
-  cx?: number
-  cy?: number
-  r?: number
-}
-
-export function GooDefs({
-  gradId,
-  gooId,
-  gooFusion = 1.5,
-  from = '#2C2C2C',
-  to = '#5F5F5F',
-  cx = 50,
-  cy = 50,
-  r = 44,
-}: GooDefsProps) {
-  return (
-    <defs>
-      <radialGradient id={gradId} gradientUnits='userSpaceOnUse' cx={cx} cy={cy} r={r}>
-        <stop stopColor={from} />
-        <stop offset='1' stopColor={to} />
-      </radialGradient>
-      <filter id={gooId} x='-25%' y='-25%' width='150%' height='150%'>
-        <feGaussianBlur in='SourceGraphic' stdDeviation={gooFusion} result='b' />
-        <feColorMatrix in='b' type='matrix' values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -9' />
-      </filter>
-    </defs>
-  )
-}
diff --git a/apps/sim/app/(landing)/components/mothership/components/iso-marks/index.ts b/apps/sim/app/(landing)/components/mothership/components/iso-marks/index.ts
deleted file mode 100644
index d08e1cc7e12..00000000000
--- a/apps/sim/app/(landing)/components/mothership/components/iso-marks/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-export {
-  IsoBuildIllustration,
-  type IsoBuildIllustrationProps,
-} from '@/app/(landing)/components/mothership/components/iso-marks/iso-build-illustration'
-export {
-  IsoIngestIllustration,
-  type IsoIngestIllustrationProps,
-} from '@/app/(landing)/components/mothership/components/iso-marks/iso-ingest-illustration'
-export {
-  IsoIntegrateIllustration,
-  type IsoIntegrateIllustrationProps,
-} from '@/app/(landing)/components/mothership/components/iso-marks/iso-integrate-illustration'
-export {
-  IsoMonitorIllustration,
-  type IsoMonitorIllustrationProps,
-} from '@/app/(landing)/components/mothership/components/iso-marks/iso-monitor-illustration'
diff --git a/apps/sim/app/(landing)/components/mothership/components/iso-marks/iso-build-illustration.tsx b/apps/sim/app/(landing)/components/mothership/components/iso-marks/iso-build-illustration.tsx
deleted file mode 100644
index 1a605b3ddb6..00000000000
--- a/apps/sim/app/(landing)/components/mothership/components/iso-marks/iso-build-illustration.tsx
+++ /dev/null
@@ -1,221 +0,0 @@
-import { cn } from '@sim/emcn'
-import {
-  createIsoLineProps,
-  ISO_FILL_HIGH,
-  ISO_FILL_LOW,
-  ISO_FILL_MID,
-  ISO_STROKE,
-} from '@/components/iso/iso-illustration-style'
-
-export interface IsoBuildIllustrationProps {
-  size?: number
-  className?: string
-}
-
-const STROKE_PAINT = ISO_STROKE
-
-const LINE_PROPS = createIsoLineProps(STROKE_PAINT, undefined, 'iso-build-line')
-
-/** Isometric tile module the floor grid and the columns are built on. */
-const TILE_WIDTH = 38
-const TILE_HEIGHT = 21.94
-
-const FLOOR_PANEL_PATH = 'M0.00 -131.64 L228.00 0.00 L0.00 131.64 L-228.00 0.00 Z'
-
-/** Floor grid lines, split by the axis they animate along. */
-const GRID_LINES_Y = [
-  'M38.00 -109.70 L-190.00 21.94',
-  'M76.00 -87.76 L-152.00 43.88',
-  'M114.00 -65.82 L-114.00 65.82',
-  'M152.00 -43.88 L-76.00 87.76',
-  'M190.00 -21.94 L-38.00 109.70',
-] as const
-
-const GRID_LINES_X = [
-  'M-38.00 -109.70 L190.00 21.94',
-  'M-76.00 -87.76 L152.00 43.88',
-  'M-114.00 -65.82 L114.00 65.82',
-  'M-152.00 -43.88 L76.00 87.76',
-  'M-190.00 -21.94 L38.00 109.70',
-] as const
-
-/**
- * The 16 columns, in painter's order (back to front), as `{ cx, topY, height }`
- * where `topY` is the centre of the column's top rhombus and `height` is its
- * downward extrusion. Tuned to the supplied "skyline" arrangement.
- */
-const COLUMNS = [
-  { cx: 152, topY: 0, height: 21.94 },
-  { cx: 0, topY: -153.57, height: 43.88 },
-  { cx: 76, topY: -153.57, height: 87.76 },
-  { cx: 114, topY: -87.76, height: 43.88 },
-  { cx: -38, topY: -109.7, height: 21.94 },
-  { cx: 0, topY: -76.79, height: 10.97 },
-  { cx: -190, topY: -10.97, height: 10.97 },
-  { cx: -152, topY: 10.97, height: 10.97 },
-  { cx: -38, topY: -10.97, height: 10.97 },
-  { cx: 38, topY: -10.97, height: 10.97 },
-  { cx: 0, topY: 10.97, height: 10.97 },
-  { cx: 76, topY: -21.94, height: 43.88 },
-  { cx: 38, topY: 10.97, height: 32.91 },
-  { cx: 0, topY: 43.88, height: 21.94 },
-  { cx: 76, topY: 43.88, height: 21.94 },
-  { cx: 0, topY: 98.73, height: 10.97 },
-] as const
-
-const svgNumber = (value: number) => value.toFixed(2)
-
-interface ColumnFaces {
-  top: string
-  left: string
-  right: string
-}
-
-const getColumnFaces = (cx: number, topY: number, height: number): ColumnFaces => {
-  const baseY = topY + height
-
-  return {
-    top: `M${svgNumber(cx)} ${svgNumber(topY - TILE_HEIGHT)} L${svgNumber(cx + TILE_WIDTH)} ${svgNumber(topY)} L${svgNumber(cx)} ${svgNumber(topY + TILE_HEIGHT)} L${svgNumber(cx - TILE_WIDTH)} ${svgNumber(topY)} Z`,
-    left: `M${svgNumber(cx - TILE_WIDTH)} ${svgNumber(topY)} L${svgNumber(cx)} ${svgNumber(topY + TILE_HEIGHT)} L${svgNumber(cx)} ${svgNumber(baseY + TILE_HEIGHT)} L${svgNumber(cx - TILE_WIDTH)} ${svgNumber(baseY)} Z`,
-    right: `M${svgNumber(cx + TILE_WIDTH)} ${svgNumber(topY)} L${svgNumber(cx)} ${svgNumber(topY + TILE_HEIGHT)} L${svgNumber(cx)} ${svgNumber(baseY + TILE_HEIGHT)} L${svgNumber(cx + TILE_WIDTH)} ${svgNumber(baseY)} Z`,
-  }
-}
-
-/**
- * Inline supplied illustration for the Build area - a column "skyline" rising
- * off an isometric floor grid. The two grid axes drift along their own diagonal
- * on a slow loop (the live-construction read); hovering redraws every contour
- * from zero. Pure CSS, so this stays a server component.
- */
-export function IsoBuildIllustration({ size = 176, className }: IsoBuildIllustrationProps) {
-  return (
-    <svg
-      viewBox='-263.2717227504693 -263.2717227504693 526.5434455009386 526.5434455009386'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-      width={size}
-      height={size}
-      aria-hidden={true}
-      focusable='false'
-      className={cn('iso-build-illustration block max-w-none shrink-0', className)}
-    >
-      <style>
-        {`
-          .iso-build-line {
-            stroke-dasharray: 1;
-            stroke-dashoffset: 0;
-          }
-
-          @media (prefers-reduced-motion: no-preference) {
-            [data-build-axis='y'] {
-              animation: iso-build-grid-flow-y 6200ms cubic-bezier(0.37, 0, 0.22, 1) infinite;
-            }
-
-            [data-build-axis='x'] {
-              animation: iso-build-grid-flow-x 6200ms cubic-bezier(0.37, 0, 0.22, 1) infinite;
-            }
-          }
-
-          .iso-build-illustration:hover .iso-build-line {
-            animation: iso-build-line-draw 900ms cubic-bezier(0.23, 1, 0.32, 1) both;
-          }
-
-          .iso-build-illustration:hover [data-build-layer='grid'] .iso-build-line {
-            animation-delay: 0ms;
-          }
-
-          .iso-build-illustration:hover [data-build-layer='columns'] .iso-build-line {
-            animation-delay: 105ms;
-          }
-
-          @keyframes iso-build-line-draw {
-            from {
-              stroke-dashoffset: 1;
-            }
-
-            to {
-              stroke-dashoffset: 0;
-            }
-          }
-
-          @keyframes iso-build-grid-flow-y {
-            0%,
-            100% {
-              transform: translate(0, 0);
-            }
-
-            50% {
-              transform: translate(-6px, 3.5px);
-            }
-          }
-
-          @keyframes iso-build-grid-flow-x {
-            0%,
-            100% {
-              transform: translate(0, 0);
-            }
-
-            50% {
-              transform: translate(6px, 3.5px);
-            }
-          }
-
-          @media (prefers-reduced-motion: reduce) {
-            [data-build-axis='y'],
-            [data-build-axis='x'],
-            .iso-build-illustration:hover .iso-build-line {
-              animation: none;
-            }
-          }
-        `}
-      </style>
-      <defs>
-        <clipPath id='iso-build-floor-clip'>
-          <path d={FLOOR_PANEL_PATH} />
-        </clipPath>
-        <filter id='iso-build-line-connection' x='-100%' y='-100%' width='300%' height='300%'>
-          <feGaussianBlur in='SourceGraphic' stdDeviation='1' result='b' />
-          <feColorMatrix
-            in='b'
-            type='matrix'
-            values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -7.2'
-            result='goo'
-          />
-          <feComposite in='SourceGraphic' in2='goo' operator='over' />
-        </filter>
-      </defs>
-      <g filter='url(#iso-build-line-connection)'>
-        <g data-build-layer='grid' pointerEvents='none'>
-          <path d={FLOOR_PANEL_PATH} fill={ISO_FILL_HIGH} stroke='none' pointerEvents='none' />
-          <g clipPath='url(#iso-build-floor-clip)'>
-            <g data-build-axis='y'>
-              {GRID_LINES_Y.map((path) => (
-                <path key={path} d={path} {...LINE_PROPS} strokeLinecap='butt' />
-              ))}
-            </g>
-            <g data-build-axis='x'>
-              {GRID_LINES_X.map((path) => (
-                <path key={path} d={path} {...LINE_PROPS} strokeLinecap='butt' />
-              ))}
-            </g>
-          </g>
-          <path d={FLOOR_PANEL_PATH} {...LINE_PROPS} strokeLinejoin='miter' />
-        </g>
-        <g data-build-layer='columns' pointerEvents='none'>
-          {COLUMNS.map((column) => {
-            const faces = getColumnFaces(column.cx, column.topY, column.height)
-            const key = `${column.cx}:${column.topY}:${column.height}`
-
-            return (
-              <g key={key} pointerEvents='none'>
-                <path d={faces.left} {...LINE_PROPS} fill={ISO_FILL_LOW} />
-                <path d={faces.right} {...LINE_PROPS} fill={ISO_FILL_MID} />
-                <path d={faces.top} {...LINE_PROPS} fill={ISO_FILL_HIGH} />
-              </g>
-            )
-          })}
-        </g>
-      </g>
-    </svg>
-  )
-}
diff --git a/apps/sim/app/(landing)/components/mothership/components/iso-marks/iso-ingest-illustration.tsx b/apps/sim/app/(landing)/components/mothership/components/iso-marks/iso-ingest-illustration.tsx
deleted file mode 100644
index 92289a3972d..00000000000
--- a/apps/sim/app/(landing)/components/mothership/components/iso-marks/iso-ingest-illustration.tsx
+++ /dev/null
@@ -1,323 +0,0 @@
-import { cn } from '@sim/emcn'
-import {
-  createIsoLineProps,
-  ISO_FILL_PROPS as FILL_PROPS,
-  ISO_FILL_HIGH,
-  ISO_FILL_LOW,
-  ISO_FILL_MID,
-  ISO_FILL_PULSE_HIGH,
-  ISO_FILL_PULSE_LOW,
-  ISO_FILL_PULSE_MID,
-  ISO_STROKE,
-} from '@/components/iso/iso-illustration-style'
-
-export interface IsoIngestIllustrationProps {
-  size?: number
-  className?: string
-}
-
-const STROKE_PAINT = ISO_STROKE
-
-const LINE_PROPS = createIsoLineProps(STROKE_PAINT, undefined, 'iso-ingest-line')
-
-/**
- * Inline supplied illustration for the Context area - a central store
- * cube whose three faces cycle fills like data loading in, flanked by a back
- * slab and two outline "context source" glyphs. Hovering spreads the sources
- * away from the core and redraws every contour from zero.
- */
-export function IsoIngestIllustration({ size = 168, className }: IsoIngestIllustrationProps) {
-  return (
-    <svg
-      viewBox='-263.2717227504693 -263.2717227504693 526.5434455009386 526.5434455009386'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-      width={size}
-      height={size}
-      aria-hidden={true}
-      focusable='false'
-      className={cn('iso-ingest-illustration block max-w-none shrink-0', className)}
-    >
-      <style>
-        {`
-          .iso-ingest-line {
-            stroke-dasharray: 1;
-            stroke-dashoffset: 0;
-          }
-
-          .iso-ingest-back-panel,
-          .iso-ingest-left-context,
-          .iso-ingest-right-context,
-          .iso-ingest-center-face {
-            transform-box: fill-box;
-            transform-origin: center;
-          }
-
-          .iso-ingest-center-face {
-            will-change: fill;
-          }
-
-          @media (prefers-reduced-motion: no-preference) {
-            .iso-ingest-back-panel,
-            .iso-ingest-left-context,
-            .iso-ingest-right-context {
-              transition: transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
-              will-change: transform;
-            }
-
-            .iso-ingest-illustration:hover .iso-ingest-back-panel {
-              transform: translate(18px, -11px);
-            }
-
-            .iso-ingest-illustration:hover .iso-ingest-left-context {
-              transform: translate(-26px, 13px);
-            }
-
-            .iso-ingest-illustration:hover .iso-ingest-right-context {
-              transform: translate(26px, 13px);
-            }
-
-            .iso-ingest-center-face-top {
-              animation: iso-ingest-center-top-load 2300ms steps(1, end) infinite;
-            }
-
-            .iso-ingest-center-face-left {
-              animation: iso-ingest-center-left-load 1900ms steps(1, end) infinite;
-            }
-
-            .iso-ingest-center-face-right {
-              animation: iso-ingest-center-right-load 2700ms steps(1, end) infinite;
-            }
-          }
-
-          .iso-ingest-illustration:hover .iso-ingest-line {
-            animation: iso-ingest-line-draw 900ms cubic-bezier(0.23, 1, 0.32, 1) both;
-          }
-
-          .iso-ingest-illustration:hover [data-ingest-layer='storage-fills'] .iso-ingest-line {
-            animation-delay: 0ms;
-          }
-
-          .iso-ingest-illustration:hover [data-ingest-layer='storage-edges'] .iso-ingest-line {
-            animation-delay: 70ms;
-          }
-
-          .iso-ingest-illustration:hover [data-ingest-layer='storage-details'] .iso-ingest-line {
-            animation-delay: 160ms;
-          }
-
-          @keyframes iso-ingest-line-draw {
-            from {
-              stroke-dashoffset: 1;
-            }
-
-            to {
-              stroke-dashoffset: 0;
-            }
-          }
-
-          @keyframes iso-ingest-center-top-load {
-            0%,
-            18% {
-              fill: ${ISO_FILL_HIGH};
-            }
-
-            19%,
-            43% {
-              fill: ${ISO_FILL_PULSE_MID};
-            }
-
-            44%,
-            68% {
-              fill: ${ISO_FILL_PULSE_LOW};
-            }
-
-            69%,
-            100% {
-              fill: ${ISO_FILL_HIGH};
-            }
-          }
-
-          @keyframes iso-ingest-center-left-load {
-            0%,
-            27% {
-              fill: ${ISO_FILL_LOW};
-            }
-
-            28%,
-            52% {
-              fill: ${ISO_FILL_PULSE_LOW};
-            }
-
-            53%,
-            79% {
-              fill: ${ISO_FILL_PULSE_HIGH};
-            }
-
-            80%,
-            100% {
-              fill: ${ISO_FILL_MID};
-            }
-          }
-
-          @keyframes iso-ingest-center-right-load {
-            0%,
-            22% {
-              fill: ${ISO_FILL_MID};
-            }
-
-            23%,
-            48% {
-              fill: ${ISO_FILL_PULSE_HIGH};
-            }
-
-            49%,
-            72% {
-              fill: ${ISO_FILL_PULSE_LOW};
-            }
-
-            73%,
-            100% {
-              fill: ${ISO_FILL_MID};
-            }
-          }
-
-          @media (prefers-reduced-motion: reduce) {
-            .iso-ingest-back-panel,
-            .iso-ingest-left-context,
-            .iso-ingest-right-context,
-            .iso-ingest-center-face,
-            .iso-ingest-illustration:hover .iso-ingest-line {
-              animation: none;
-              transition: none;
-            }
-          }
-        `}
-      </style>
-      <defs>
-        <filter id='iso-ingest-line-connection' x='-100%' y='-100%' width='300%' height='300%'>
-          <feGaussianBlur in='SourceGraphic' stdDeviation='1' result='b' />
-          <feColorMatrix
-            in='b'
-            type='matrix'
-            values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -7.2'
-            result='goo'
-          />
-          <feComposite in='SourceGraphic' in2='goo' operator='over' />
-        </filter>
-      </defs>
-      <g filter='url(#iso-ingest-line-connection)'>
-        <g data-ingest-layer='storage-fills' pointerEvents='none'>
-          <path
-            d='M44.30 -19.23 L183.46 61.12 Q189.88 64.82 189.88 57.41 L189.88 -103.28 Q189.88 -110.69 183.46 -114.40 L44.30 -194.74 Q37.88 -198.45 37.88 -191.04 L37.88 -30.34 Q37.88 -22.93 44.30 -19.23 Z'
-            {...FILL_PROPS}
-            className='iso-ingest-back-panel'
-            fill={ISO_FILL_LOW}
-          />
-          <path
-            d='M201.99 57.83 L196.30 61.12 Q189.88 64.82 189.88 57.41 L189.88 -103.28 Q189.88 -110.69 196.30 -114.40 L201.99 -117.68 Q208.41 -121.39 208.41 -113.98 L208.41 46.72 Q208.41 54.13 201.99 57.83 Z'
-            {...FILL_PROPS}
-            className='iso-ingest-back-panel'
-            fill={ISO_FILL_MID}
-          />
-          <path
-            d='M62.82 -205.44 L201.99 -125.09 Q208.41 -121.39 201.99 -117.68 L196.30 -114.40 Q189.88 -110.69 183.46 -114.40 L44.30 -194.74 Q37.88 -198.45 44.30 -202.15 L49.99 -205.44 Q56.41 -209.14 62.82 -205.44 Z'
-            {...FILL_PROPS}
-            className='iso-ingest-back-panel'
-            fill={ISO_FILL_HIGH}
-          />
-          <path
-            d='M-145.58 91.46 L-6.42 171.81 Q0.00 175.51 0.00 168.10 L0.00 7.41 Q0.00 -0.00 -6.42 -3.71 L-145.58 -84.05 Q-152.00 -87.76 -152.00 -80.35 L-152.00 80.35 Q-152.00 87.76 -145.58 91.46 Z'
-            {...FILL_PROPS}
-            className='iso-ingest-center-face iso-ingest-center-face-left'
-            fill={ISO_FILL_LOW}
-          />
-          <path
-            d='M145.58 91.46 L6.42 171.81 Q0.00 175.51 0.00 168.10 L0.00 7.41 Q0.00 -0.00 6.42 -3.71 L145.58 -84.05 Q152.00 -87.76 152.00 -80.35 L152.00 80.35 Q152.00 87.76 145.58 91.46 Z'
-            {...FILL_PROPS}
-            className='iso-ingest-center-face iso-ingest-center-face-right'
-            fill={ISO_FILL_MID}
-          />
-          <path
-            d='M6.42 -171.81 L145.58 -91.46 Q152.00 -87.76 145.58 -84.05 L6.42 -3.71 Q0.00 -0.00 -6.42 -3.71 L-145.58 -84.05 Q-152.00 -87.76 -145.58 -91.46 L-6.42 -171.81 Q0.00 -175.51 6.42 -171.81 Z'
-            {...FILL_PROPS}
-            className='iso-ingest-center-face iso-ingest-center-face-top'
-            fill={ISO_FILL_HIGH}
-          />
-        </g>
-        <g data-ingest-layer='storage-edges' pointerEvents='none'>
-          <path
-            d='M62.82 -29.92 L201.99 50.42 Q208.41 54.13 201.99 57.83 L196.30 61.12 Q189.88 64.82 183.46 61.12 L44.30 -19.23 Q37.88 -22.93 44.30 -26.64 L49.99 -29.92 Q56.41 -33.63 62.82 -29.92 Z'
-            {...LINE_PROPS}
-            className='iso-ingest-line iso-ingest-back-panel'
-          />
-          <path
-            d='M62.82 -205.44 L201.99 -125.09 Q208.41 -121.39 201.99 -117.68 L196.30 -114.40 Q189.88 -110.69 183.46 -114.40 L44.30 -194.74 Q37.88 -198.45 44.30 -202.15 L49.99 -205.44 Q56.41 -209.14 62.82 -205.44 Z'
-            {...LINE_PROPS}
-            className='iso-ingest-line iso-ingest-back-panel'
-          />
-          <path
-            d='M62.82 -29.92 L201.99 50.42 Q208.41 54.13 208.41 46.72 L208.41 -113.98 Q208.41 -121.39 201.99 -125.09 L62.82 -205.44 Q56.41 -209.14 56.41 -201.73 L56.41 -41.04 Q56.41 -33.63 62.82 -29.92 Z'
-            {...LINE_PROPS}
-            className='iso-ingest-line iso-ingest-back-panel'
-          />
-          <path
-            d='M44.30 -19.23 L183.46 61.12 Q189.88 64.82 189.88 57.41 L189.88 -103.28 Q189.88 -110.69 183.46 -114.40 L44.30 -194.74 Q37.88 -198.45 37.88 -191.04 L37.88 -30.34 Q37.88 -22.93 44.30 -19.23 Z'
-            {...LINE_PROPS}
-            className='iso-ingest-line iso-ingest-back-panel'
-          />
-          <path
-            d='M49.99 -29.92 L44.30 -26.64 Q37.88 -22.93 37.88 -30.34 L37.88 -191.04 Q37.88 -198.45 44.30 -202.15 L49.99 -205.44 Q56.41 -209.14 56.41 -201.73 L56.41 -41.04 Q56.41 -33.63 49.99 -29.92 Z'
-            {...LINE_PROPS}
-            className='iso-ingest-line iso-ingest-back-panel'
-          />
-          <path
-            d='M201.99 57.83 L196.30 61.12 Q189.88 64.82 189.88 57.41 L189.88 -103.28 Q189.88 -110.69 196.30 -114.40 L201.99 -117.68 Q208.41 -121.39 208.41 -113.98 L208.41 46.72 Q208.41 54.13 201.99 57.83 Z'
-            {...LINE_PROPS}
-            className='iso-ingest-line iso-ingest-back-panel'
-          />
-          <path
-            d='M6.42 3.70 L145.58 84.05 Q152.00 87.76 145.58 91.46 L6.42 171.81 Q0.00 175.51 -6.42 171.81 L-145.58 91.46 Q-152.00 87.76 -145.58 84.05 L-6.42 3.70 Q0.00 0.00 6.42 3.70 Z'
-            {...LINE_PROPS}
-          />
-          <path
-            d='M6.42 -171.81 L145.58 -91.46 Q152.00 -87.76 145.58 -84.05 L6.42 -3.71 Q0.00 -0.00 -6.42 -3.71 L-145.58 -84.05 Q-152.00 -87.76 -145.58 -91.46 L-6.42 -171.81 Q0.00 -175.51 6.42 -171.81 Z'
-            {...LINE_PROPS}
-          />
-          <path
-            d='M6.42 3.70 L145.58 84.05 Q152.00 87.76 152.00 80.35 L152.00 -80.35 Q152.00 -87.76 145.58 -91.46 L6.42 -171.81 Q0.00 -175.51 0.00 -168.10 L0.00 -7.41 Q0.00 0.00 6.42 3.70 Z'
-            {...LINE_PROPS}
-          />
-          <path
-            d='M-145.58 91.46 L-6.42 171.81 Q0.00 175.51 0.00 168.10 L0.00 7.41 Q0.00 -0.00 -6.42 -3.71 L-145.58 -84.05 Q-152.00 -87.76 -152.00 -80.35 L-152.00 80.35 Q-152.00 87.76 -145.58 91.46 Z'
-            {...LINE_PROPS}
-          />
-          <path
-            d='M-6.42 3.70 L-145.58 84.05 Q-152.00 87.76 -152.00 80.35 L-152.00 -80.35 Q-152.00 -87.76 -145.58 -91.46 L-6.42 -171.81 Q0.00 -175.51 0.00 -168.10 L0.00 -7.41 Q0.00 0.00 -6.42 3.70 Z'
-            {...LINE_PROPS}
-          />
-          <path
-            d='M145.58 91.46 L6.42 171.81 Q0.00 175.51 0.00 168.10 L0.00 7.41 Q0.00 -0.00 6.42 -3.71 L145.58 -84.05 Q152.00 -87.76 152.00 -80.35 L152.00 80.35 Q152.00 87.76 145.58 91.46 Z'
-            {...LINE_PROPS}
-          />
-        </g>
-        <g data-ingest-layer='storage-details' pointerEvents='none'>
-          <path
-            d='M75.88 132.29 C75.88 83.82 109.91 24.89 151.88 0.65 C193.86 -23.58 227.88 -3.94 227.88 44.53 C227.88 93.00 193.86 151.93 151.88 176.17 C109.91 200.40 75.88 180.75 75.88 132.29 Z'
-            {...LINE_PROPS}
-            className='iso-ingest-line iso-ingest-right-context'
-          />
-          <path
-            d='M-194.26 149.09 L-110.45 197.48 Q-77.54 216.48 -77.54 178.48 L-77.54 81.71 Q-77.54 43.71 -110.45 24.71 L-194.26 -23.68 Q-227.17 -42.68 -227.17 -4.68 L-227.17 92.09 Q-227.17 130.09 -194.26 149.09 Z'
-            {...LINE_PROPS}
-            className='iso-ingest-line iso-ingest-left-context'
-          />
-          <path
-            d='M-50.58 -122.45 L-44.42 -118.89 Q-38.00 -115.18 -44.42 -111.48 L-98.08 -80.49 Q-104.50 -76.79 -110.92 -80.49 L-117.08 -84.05 Q-123.50 -87.76 -117.08 -91.46 L-63.42 -122.45 Q-57.00 -126.15 -50.58 -122.45 Z'
-            {...LINE_PROPS}
-          />
-        </g>
-      </g>
-    </svg>
-  )
-}
diff --git a/apps/sim/app/(landing)/components/mothership/components/iso-marks/iso-integrate-illustration.tsx b/apps/sim/app/(landing)/components/mothership/components/iso-marks/iso-integrate-illustration.tsx
deleted file mode 100644
index 51f78761cd2..00000000000
--- a/apps/sim/app/(landing)/components/mothership/components/iso-marks/iso-integrate-illustration.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-import { cn } from '@sim/emcn'
-import {
-  createIsoLineProps,
-  ISO_FILL_HIGH,
-  ISO_FILL_LOW,
-  ISO_FILL_MID,
-  ISO_STROKE,
-} from '@/components/iso/iso-illustration-style'
-
-export interface IsoIntegrateIllustrationProps {
-  size?: number
-  className?: string
-}
-
-const STROKE_PAINT = ISO_STROKE
-
-const LINE_PROPS = createIsoLineProps(STROKE_PAINT, undefined, 'iso-integrate-line')
-
-/**
- * Inline supplied illustration for the Integrate area - a three-tier isometric
- * stack (a socket node up top, a connector port on each of the lower tiers).
- * The top and bottom tiers breathe toward the middle on a slow loop; hovering
- * redraws every contour from zero.
- */
-export function IsoIntegrateIllustration({ size = 172, className }: IsoIntegrateIllustrationProps) {
-  return (
-    <svg
-      viewBox='-263.2717227504693 -263.2717227504693 526.5434455009386 526.5434455009386'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-      width={size}
-      height={size}
-      aria-hidden={true}
-      focusable='false'
-      className={cn('iso-integrate-illustration block max-w-none shrink-0', className)}
-    >
-      <style>
-        {`
-          .iso-integrate-line {
-            stroke-dasharray: 1;
-            stroke-dashoffset: 0;
-          }
-
-          [data-integrate-layer='top-plane'],
-          [data-integrate-layer='top-socket'],
-          [data-integrate-layer='bottom-plane'],
-          [data-integrate-layer='bottom-port'] {
-            transform-box: fill-box;
-            transform-origin: center;
-            will-change: transform;
-          }
-
-          @media (prefers-reduced-motion: no-preference) {
-            [data-integrate-layer='top-plane'],
-            [data-integrate-layer='top-socket'] {
-              animation: iso-integrate-top-float 5200ms cubic-bezier(0.37, 0, 0.22, 1) infinite;
-            }
-
-            [data-integrate-layer='bottom-plane'],
-            [data-integrate-layer='bottom-port'] {
-              animation: iso-integrate-bottom-float 5200ms cubic-bezier(0.37, 0, 0.22, 1) infinite;
-            }
-          }
-
-          .iso-integrate-illustration:hover .iso-integrate-line {
-            animation: iso-integrate-line-draw 900ms cubic-bezier(0.23, 1, 0.32, 1) both;
-          }
-
-          .iso-integrate-illustration:hover [data-integrate-layer='bottom-plane'] .iso-integrate-line,
-          .iso-integrate-illustration:hover [data-integrate-layer='bottom-port'] .iso-integrate-line {
-            animation-delay: 0ms;
-          }
-
-          .iso-integrate-illustration:hover [data-integrate-layer='middle-plane'] .iso-integrate-line,
-          .iso-integrate-illustration:hover [data-integrate-layer='middle-port'] .iso-integrate-line {
-            animation-delay: 75ms;
-          }
-
-          .iso-integrate-illustration:hover [data-integrate-layer='top-plane'] .iso-integrate-line,
-          .iso-integrate-illustration:hover [data-integrate-layer='top-socket'] .iso-integrate-line {
-            animation-delay: 150ms;
-          }
-
-          @keyframes iso-integrate-top-float {
-            0%,
-            16%,
-            100% {
-              transform: translateY(0);
-            }
-
-            44%,
-            64% {
-              transform: translateY(20px);
-            }
-          }
-
-          @keyframes iso-integrate-bottom-float {
-            0%,
-            16%,
-            100% {
-              transform: translateY(0);
-            }
-
-            44%,
-            64% {
-              transform: translateY(-20px);
-            }
-          }
-
-          @keyframes iso-integrate-line-draw {
-            from {
-              stroke-dashoffset: 1;
-            }
-
-            to {
-              stroke-dashoffset: 0;
-            }
-          }
-
-          @media (prefers-reduced-motion: reduce) {
-            [data-integrate-layer='top-plane'],
-            [data-integrate-layer='top-socket'],
-            [data-integrate-layer='bottom-plane'],
-            [data-integrate-layer='bottom-port'],
-            .iso-integrate-illustration:hover .iso-integrate-line {
-              animation: none;
-            }
-          }
-        `}
-      </style>
-      <defs>
-        <filter id='iso-integrate-line-connection' x='-100%' y='-100%' width='300%' height='300%'>
-          <feGaussianBlur in='SourceGraphic' stdDeviation='1' result='b' />
-          <feColorMatrix
-            in='b'
-            type='matrix'
-            values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -7.2'
-            result='goo'
-          />
-          <feComposite in='SourceGraphic' in2='goo' operator='over' />
-        </filter>
-      </defs>
-      <g filter='url(#iso-integrate-line-connection)'>
-        <g data-integrate-layer='bottom-plane' pointerEvents='none'>
-          <path
-            d='M32.91 19.00 L157.09 90.70 Q190.00 109.70 157.09 128.70 L32.91 200.39 Q0.00 219.39 -32.91 200.39 L-157.09 128.70 Q-190.00 109.70 -157.09 90.70 L-32.91 19.00 Q0.00 -0.00 32.91 19.00 Z'
-            {...LINE_PROPS}
-          />
-        </g>
-        <g data-integrate-layer='middle-plane' pointerEvents='none'>
-          <path
-            d='M32.91 -90.70 L157.09 -19.00 Q190.00 -0.00 157.09 19.00 L32.91 90.70 Q0.00 109.70 -32.91 90.70 L-157.09 19.00 Q-190.00 -0.00 -157.09 -19.00 L-32.91 -90.70 Q0.00 -109.70 32.91 -90.70 Z'
-            {...LINE_PROPS}
-            fill={ISO_FILL_LOW}
-          />
-        </g>
-        <g data-integrate-layer='middle-port' pointerEvents='none'>
-          <path
-            d='M111.45 -23.41 L135.55 -9.50 Q152.00 0.00 135.55 9.50 L120.95 17.92 Q104.50 27.42 88.05 17.92 L63.95 4.02 Q47.50 -5.48 63.95 -14.98 L78.55 -23.41 Q95.00 -32.91 111.45 -23.41 Z'
-            {...LINE_PROPS}
-            fill={ISO_FILL_MID}
-          />
-        </g>
-        <g data-integrate-layer='bottom-port' pointerEvents='none'>
-          <path
-            d='M-34.01 129.57 L28.08 165.42 Q44.53 174.92 28.08 184.42 L19.42 189.41 Q2.97 198.91 -13.49 189.41 L-75.58 153.56 Q-92.03 144.06 -75.58 134.56 L-66.92 129.57 Q-50.47 120.07 -34.01 129.57 Z'
-            {...LINE_PROPS}
-            fill={ISO_FILL_LOW}
-          />
-        </g>
-        <g data-integrate-layer='top-plane' pointerEvents='none'>
-          <path
-            d='M32.91 -200.39 L157.09 -128.70 Q190.00 -109.70 157.09 -90.70 L32.91 -19.00 Q0.00 -0.00 -32.91 -19.00 L-157.09 -90.70 Q-190.00 -109.70 -157.09 -128.70 L-32.91 -200.39 Q0.00 -219.39 32.91 -200.39 Z'
-            {...LINE_PROPS}
-            fill={ISO_FILL_MID}
-          />
-        </g>
-        <g data-integrate-layer='top-socket' pointerEvents='none'>
-          <path
-            d='M37.70 -129.63 C16.71 -117.51 -17.31 -117.51 -38.30 -129.63 C-59.29 -141.74 -59.29 -161.39 -38.30 -173.50 C-17.31 -185.62 16.71 -185.62 37.70 -173.50 C58.69 -161.39 58.69 -141.74 37.70 -129.63 Z'
-            {...LINE_PROPS}
-            fill={ISO_FILL_HIGH}
-          />
-        </g>
-      </g>
-    </svg>
-  )
-}
diff --git a/apps/sim/app/(landing)/components/mothership/components/iso-marks/iso-monitor-illustration.tsx b/apps/sim/app/(landing)/components/mothership/components/iso-marks/iso-monitor-illustration.tsx
deleted file mode 100644
index fb0b921308c..00000000000
--- a/apps/sim/app/(landing)/components/mothership/components/iso-marks/iso-monitor-illustration.tsx
+++ /dev/null
@@ -1,229 +0,0 @@
-import { cn } from '@sim/emcn'
-import {
-  createIsoLineProps,
-  ISO_FILL_HIGH,
-  ISO_FILL_LOW,
-  ISO_FILL_MID,
-  ISO_STROKE,
-} from '@/components/iso/iso-illustration-style'
-
-export interface IsoMonitorIllustrationProps {
-  size?: number
-  className?: string
-}
-
-const STROKE_PAINT = ISO_STROKE
-
-const LINE_PROPS = createIsoLineProps(STROKE_PAINT, undefined, 'iso-monitor-line')
-
-/**
- * Inline supplied illustration for the Monitor area - an isometric housing whose
- * lid and two side panels drift apart on a slow loop to reveal the stacked inner
- * plates (the "look inside every run" read). Hovering redraws every contour from
- * zero.
- */
-export function IsoMonitorIllustration({ size = 176, className }: IsoMonitorIllustrationProps) {
-  return (
-    <svg
-      viewBox='-263.2717227504693 -263.2717227504693 526.5434455009386 526.5434455009386'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-      width={size}
-      height={size}
-      aria-hidden={true}
-      focusable='false'
-      className={cn('iso-monitor-illustration block max-w-none shrink-0', className)}
-    >
-      <style>
-        {`
-          .iso-monitor-line {
-            stroke-dasharray: 1;
-            stroke-dashoffset: 0;
-          }
-
-          .iso-monitor-separating-panel {
-            transform-box: fill-box;
-            transform-origin: center;
-            will-change: transform;
-          }
-
-          @media (prefers-reduced-motion: no-preference) {
-            .iso-monitor-panel-top {
-              animation: iso-monitor-panel-top-separate 5600ms cubic-bezier(0.37, 0, 0.22, 1) infinite;
-            }
-
-            .iso-monitor-panel-right {
-              animation: iso-monitor-panel-right-separate 5600ms cubic-bezier(0.37, 0, 0.22, 1) infinite;
-              animation-delay: 120ms;
-            }
-
-            .iso-monitor-panel-left {
-              animation: iso-monitor-panel-left-separate 5600ms cubic-bezier(0.37, 0, 0.22, 1) infinite;
-              animation-delay: 240ms;
-            }
-          }
-
-          .iso-monitor-illustration:hover .iso-monitor-line {
-            animation: iso-monitor-line-draw 900ms cubic-bezier(0.23, 1, 0.32, 1) both;
-          }
-
-          .iso-monitor-illustration:hover [data-monitor-layer='shadow-plane'] .iso-monitor-line,
-          .iso-monitor-illustration:hover [data-monitor-layer='base-bar'] .iso-monitor-line {
-            animation-delay: 0ms;
-          }
-
-          .iso-monitor-illustration:hover [data-monitor-layer='inner-low'] .iso-monitor-line,
-          .iso-monitor-illustration:hover [data-monitor-layer='inner-high'] .iso-monitor-line {
-            animation-delay: 70ms;
-          }
-
-          .iso-monitor-illustration:hover [data-monitor-layer='left-panel'] .iso-monitor-line,
-          .iso-monitor-illustration:hover [data-monitor-layer='right-panel'] .iso-monitor-line {
-            animation-delay: 140ms;
-          }
-
-          .iso-monitor-illustration:hover [data-monitor-layer='top-lid'] .iso-monitor-line {
-            animation-delay: 210ms;
-          }
-
-          @keyframes iso-monitor-line-draw {
-            from {
-              stroke-dashoffset: 1;
-            }
-
-            to {
-              stroke-dashoffset: 0;
-            }
-          }
-
-          @keyframes iso-monitor-panel-top-separate {
-            0%,
-            16%,
-            100% {
-              transform: translate(0, 0);
-            }
-
-            38%,
-            64% {
-              transform: translate(-9px, -18px);
-            }
-          }
-
-          @keyframes iso-monitor-panel-right-separate {
-            0%,
-            16%,
-            100% {
-              transform: translate(0, 0);
-            }
-
-            38%,
-            64% {
-              transform: translate(18px, -8px);
-            }
-          }
-
-          @keyframes iso-monitor-panel-left-separate {
-            0%,
-            16%,
-            100% {
-              transform: translate(0, 0);
-            }
-
-            38%,
-            64% {
-              transform: translate(-18px, 9px);
-            }
-          }
-
-          @media (prefers-reduced-motion: reduce) {
-            .iso-monitor-separating-panel,
-            .iso-monitor-illustration:hover .iso-monitor-line {
-              animation: none;
-            }
-          }
-        `}
-      </style>
-      <defs>
-        <filter id='iso-monitor-line-connection' x='-100%' y='-100%' width='300%' height='300%'>
-          <feGaussianBlur in='SourceGraphic' stdDeviation='1' result='b' />
-          <feColorMatrix
-            in='b'
-            type='matrix'
-            values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -7.2'
-            result='goo'
-          />
-          <feComposite in='SourceGraphic' in2='goo' operator='over' />
-        </filter>
-      </defs>
-      <g filter='url(#iso-monitor-line-connection)'>
-        <g data-monitor-layer='shadow-plane' pointerEvents='none'>
-          <path
-            d='M16.45 -34.38 L211.55 78.26 Q228.00 87.76 211.55 97.26 L16.45 209.89 Q0.00 219.39 -16.45 209.89 L-211.55 97.26 Q-228.00 87.76 -211.55 78.26 L-16.45 -34.38 Q0.00 -43.88 16.45 -34.38 Z'
-            {...LINE_PROPS}
-          />
-        </g>
-        <g data-monitor-layer='base-bar' pointerEvents='none'>
-          <path
-            d='M-186.71 89.66 L-3.29 195.55 Q0.00 197.45 0.00 193.65 L0.00 179.31 Q0.00 175.51 -3.29 173.61 L-186.71 67.72 Q-190.00 65.82 -190.00 69.62 L-190.00 83.96 Q-190.00 87.76 -186.71 89.66 Z'
-            {...LINE_PROPS}
-            fill={ISO_FILL_LOW}
-          />
-          <path
-            d='M186.71 89.66 L3.29 195.55 Q0.00 197.45 0.00 193.65 L0.00 179.31 Q0.00 175.51 3.29 173.61 L186.71 67.72 Q190.00 65.82 190.00 69.62 L190.00 83.96 Q190.00 87.76 186.71 89.66 Z'
-            {...LINE_PROPS}
-            fill={ISO_FILL_MID}
-          />
-          <path
-            d='M3.29 -41.98 L186.71 63.92 Q190.00 65.82 186.71 67.72 L3.29 173.61 Q0.00 175.51 -3.29 173.61 L-186.71 67.72 Q-190.00 65.82 -186.71 63.92 L-3.29 -41.98 Q0.00 -43.88 3.29 -41.98 Z'
-            {...LINE_PROPS}
-            fill={ISO_FILL_HIGH}
-          />
-        </g>
-        <g
-          data-monitor-layer='right-panel'
-          className='iso-monitor-separating-panel iso-monitor-panel-right'
-          pointerEvents='none'
-        >
-          <path
-            d='M32.91 -68.76 L128.59 -13.52 Q161.50 5.48 161.50 -32.52 L161.50 -88.15 Q161.50 -126.15 128.59 -145.15 L32.91 -200.39 Q0.00 -219.39 0.00 -181.39 L0.00 -125.76 Q0.00 -87.76 32.91 -68.76 Z'
-            {...LINE_PROPS}
-          />
-        </g>
-        <g data-monitor-layer='inner-low' pointerEvents='none'>
-          <path
-            d='M32.91 -2.94 L119.09 46.82 Q152.00 65.82 119.09 84.82 L32.91 134.58 Q0.00 153.58 -32.91 134.58 L-119.09 84.82 Q-152.00 65.82 -119.09 46.82 L-32.91 -2.94 Q0.00 -21.94 32.91 -2.94 Z'
-            {...LINE_PROPS}
-            fill={ISO_FILL_LOW}
-          />
-        </g>
-        <g data-monitor-layer='inner-high' pointerEvents='none'>
-          <path
-            d='M32.91 -46.82 L119.09 2.94 Q152.00 21.94 119.09 40.94 L32.91 90.70 Q0.00 109.70 -32.91 90.70 L-119.09 40.94 Q-152.00 21.94 -119.09 2.94 L-32.91 -46.82 Q0.00 -65.82 32.91 -46.82 Z'
-            {...LINE_PROPS}
-            fill={ISO_FILL_MID}
-          />
-        </g>
-        <g
-          data-monitor-layer='left-panel'
-          className='iso-monitor-separating-panel iso-monitor-panel-left'
-          pointerEvents='none'
-        >
-          <path
-            d='M-157.09 62.88 L-32.91 134.58 Q0.00 153.58 0.00 115.58 L0.00 38.00 Q0.00 0.00 -32.91 -19.00 L-157.09 -90.70 Q-190.00 -109.70 -190.00 -71.70 L-190.00 5.88 Q-190.00 43.88 -157.09 62.88 Z'
-            {...LINE_PROPS}
-          />
-        </g>
-        <g
-          data-monitor-layer='top-lid'
-          className='iso-monitor-separating-panel iso-monitor-panel-top'
-          pointerEvents='none'
-        >
-          <path
-            d='M32.91 -200.39 L81.09 -172.58 Q114.00 -153.58 81.09 -134.58 L-43.09 -62.88 Q-76.00 -43.88 -108.91 -62.88 L-157.09 -90.70 Q-190.00 -109.70 -157.09 -128.70 L-32.91 -200.39 Q0.00 -219.39 32.91 -200.39 Z'
-            {...LINE_PROPS}
-          />
-        </g>
-      </g>
-    </svg>
-  )
-}
diff --git a/apps/sim/app/(landing)/components/mothership/components/iso-marks/use-goo-mark.ts b/apps/sim/app/(landing)/components/mothership/components/iso-marks/use-goo-mark.ts
deleted file mode 100644
index a80e24258b5..00000000000
--- a/apps/sim/app/(landing)/components/mothership/components/iso-marks/use-goo-mark.ts
+++ /dev/null
@@ -1,188 +0,0 @@
-import { useCallback, useEffect, useId, useRef, useState } from 'react'
-
-/**
- * Shared rest → hover animation engine for the Sim iso goo-mark family.
- *
- * Every mark defines a `rest` and `hover` config with the same keys. On hover,
- * the hook eases each numeric key from rest toward hover (and back on leave) via
- * a fixed easing factor, driven by requestAnimationFrame. The component reads
- * `current` each frame to render its SVG.
- *
- * Locked baseline (shared across all marks): ease 0.08, spin 1.2 on hover.
- */
-
-export type MarkState = Record<string, number>
-
-export interface UseGooMarkOptions<T extends MarkState> {
-  rest: T
-  hover: T
-  /** Easing factor per frame (0..1). Locked baseline = 0.08. */
-  ease?: number
-  /** Start in the hovered state (useful for previews). */
-  forceHover?: boolean
-}
-
-export interface UseGooMarkResult<T extends MarkState> {
-  /** The current tweened values - read this in render. */
-  current: T
-  /** Bind these to the element that should react to hover. */
-  bind: {
-    onMouseEnter: () => void
-    onMouseLeave: () => void
-    onFocus: () => void
-    onBlur: () => void
-  }
-  hovered: boolean
-}
-
-export function useGooMark<T extends MarkState>({
-  rest,
-  hover,
-  ease = 0.08,
-  forceHover = false,
-}: UseGooMarkOptions<T>): UseGooMarkResult<T> {
-  const [hovered, setHovered] = useState(false)
-  const currentRef = useRef<T>({ ...rest })
-  const [, setTick] = useState(0)
-  const rafRef = useRef<number | null>(null)
-  const restRef = useRef(rest)
-  const hoverRef = useRef(hover)
-  const easeRef = useRef(ease)
-  const activeRef = useRef(forceHover)
-
-  restRef.current = rest
-  hoverRef.current = hover
-  easeRef.current = ease
-  activeRef.current = forceHover || hovered
-
-  useEffect(() => {
-    const prefersReduced =
-      typeof window !== 'undefined' &&
-      window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
-
-    const loop = () => {
-      const target = activeRef.current ? hoverRef.current : restRef.current
-      const cur = currentRef.current as MarkState
-      const tgt = target as MarkState
-      const e = easeRef.current
-      let changed = false
-      for (const k in tgt) {
-        const next = prefersReduced ? tgt[k] : cur[k] + (tgt[k] - cur[k]) * e
-        if (Math.abs(next - cur[k]) > 0.0001) changed = true
-        cur[k] = next
-      }
-      if (changed) setTick((t) => (t + 1) % 1000000)
-      rafRef.current = requestAnimationFrame(loop)
-    }
-    rafRef.current = requestAnimationFrame(loop)
-    return () => {
-      if (rafRef.current != null) cancelAnimationFrame(rafRef.current)
-    }
-  }, [])
-
-  const bind = {
-    onMouseEnter: useCallback(() => setHovered(true), []),
-    onMouseLeave: useCallback(() => setHovered(false), []),
-    onFocus: useCallback(() => setHovered(true), []),
-    onBlur: useCallback(() => setHovered(false), []),
-  }
-
-  return { current: currentRef.current as T, bind, hovered }
-}
-
-/** Every mark normalizes its bounding box into this footprint, centered (50,50). */
-export const TARGET = 78
-
-/** Locked goo + gradient constants for the whole family. */
-export const GOO_GRADIENT = {
-  from: '#2C2C2C',
-  to: '#5F5F5F',
-} as const
-
-/**
- * Rest → hover gradient recipe for the mark family. At rest the marks sit in a
- * soft light grey; on hover they deepen to the brand dark gradient. The fade is
- * driven by a `tone` key (0 → 1) tweened alongside the geometry, so color and
- * shape animate as one.
- */
-export const GRADIENT_REST = { from: '#A6A6A6', to: '#C4C4C4' } as const
-export const GRADIENT_HOVER = GOO_GRADIENT
-
-function hexLerp(a: string, b: string, t: number): string {
-  const pa = Number.parseInt(a.slice(1), 16)
-  const pb = Number.parseInt(b.slice(1), 16)
-  const lerpChannel = (shift: number) => {
-    const ca = (pa >> shift) & 255
-    const cb = (pb >> shift) & 255
-    return Math.round(ca + (cb - ca) * t)
-  }
-  const r = lerpChannel(16)
-  const g = lerpChannel(8)
-  const bl = lerpChannel(0)
-  return `#${((1 << 24) | (r << 16) | (g << 8) | bl).toString(16).slice(1)}`
-}
-
-/** Gradient stops for a given hover tone (0 = rest/light, 1 = hover/dark). */
-export function gradientForTone(tone: number): { from: string; to: string } {
-  const t = Math.max(0, Math.min(1, tone))
-  return {
-    from: hexLerp(GRADIENT_REST.from, GRADIENT_HOVER.from, t),
-    to: hexLerp(GRADIENT_REST.to, GRADIENT_HOVER.to, t),
-  }
-}
-
-export type Pt = [number, number]
-
-/** Isometric projection: 45deg in-plane rotation + vertical squash by `ky`, z is up. */
-export function isoProject(x: number, y: number, z: number, ky: number): Pt {
-  const ix = (x - y) * Math.SQRT1_2
-  const iy = (x + y) * Math.SQRT1_2 * ky
-  return [ix, iy - z]
-}
-
-/** In-plane rotation (used for spin). */
-export function rotate2(x: number, y: number, rot: number): Pt {
-  const c = Math.cos(rot)
-  const s = Math.sin(rot)
-  return [x * c - y * s, x * s + y * c]
-}
-
-export type Edge = [Pt, Pt]
-
-/**
- * Normalize a set of edges into the shared TARGET footprint and emit SVG `<path>`
- * markup. Returns the path string only; callers wrap it with defs + filter.
- */
-export function edgesToPaths(edges: Edge[]): string {
-  const pts = edges.flat()
-  let minx = Number.POSITIVE_INFINITY
-  let maxx = Number.NEGATIVE_INFINITY
-  let miny = Number.POSITIVE_INFINITY
-  let maxy = Number.NEGATIVE_INFINITY
-  for (const [x, y] of pts) {
-    if (x < minx) minx = x
-    if (x > maxx) maxx = x
-    if (y < miny) miny = y
-    if (y > maxy) maxy = y
-  }
-  const w = maxx - minx || 1
-  const h = maxy - miny || 1
-  const scale = TARGET / Math.max(w, h)
-  const ox = 50 - ((minx + maxx) / 2) * scale
-  const oy = 50 - ((miny + maxy) / 2) * scale
-  let d = ''
-  for (const [A, B] of edges) {
-    const ax = ox + A[0] * scale
-    const ay = oy + A[1] * scale
-    const bx = ox + B[0] * scale
-    const by = oy + B[1] * scale
-    d += `M${ax.toFixed(2)} ${ay.toFixed(2)} L${bx.toFixed(2)} ${by.toFixed(2)} `
-  }
-  return d.trim()
-}
-
-/** Stable, SSR-safe gradient + filter ids per mark instance. */
-export function useMarkIds() {
-  const id = useId().replace(/:/g, '')
-  return { gradId: `gm-${id}-grad`, gooId: `gm-${id}-goo` }
-}
diff --git a/apps/sim/app/(landing)/components/mothership/mothership.tsx b/apps/sim/app/(landing)/components/mothership/mothership.tsx
deleted file mode 100644
index 24995307640..00000000000
--- a/apps/sim/app/(landing)/components/mothership/mothership.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import type { ComponentType, ReactNode } from 'react'
-import {
-  IsoBuildIllustration,
-  IsoIngestIllustration,
-  IsoIntegrateIllustration,
-  IsoMonitorIllustration,
-} from '@/app/(landing)/components/mothership/components/iso-marks'
-
-/**
- * Landing Sim section - the high-level "how Sim works" overview that sets up the
- * {@link Features} deep-dive. A two-line heading frames Sim as one workspace for
- * the whole platform; below, four columns call out its main areas (Integrate ·
- * Context · Build · Monitor), each paired with an abstract circle "goo"
- * mark and a one-line definition. These are the same four areas Features then
- * shows in real product UI, framed here in fewer words, from the "what it is"
- * angle, so the overview and the deep-dive don't repeat each other.
- *
- * The marks are the only client islands in this section: interactive brand
- * glyphs (subtle hover breathe/rotate); the section itself stays server-rendered.
- *
- * Inter-section spacing is owned by the `<main>` flex `gap` in `landing.tsx`;
- * this section carries no vertical padding. Horizontal padding (`px-20`) matches
- * the sections above, and the section is capped at the shared `max-w-[1460px]`.
- */
-
-type GooMark = ComponentType<{ size?: number; className?: string }>
-
-interface Area {
-  word: string
-  /** Abstract circle goo-mark paired with the area. */
-  Mark: GooMark
-  /**
-   * Per-mark render size, tuned so the collection reads as one optical weight.
-   * The marks have different shape ratios (a full cube vs a flat lattice), so a
-   * uniform size makes some look bigger; these equalize their visual footprint.
-   */
-  size: number
-  definition: ReactNode
-}
-
-const AREAS: Area[] = [
-  {
-    word: 'Integrate',
-    Mark: IsoIntegrateIllustration,
-    size: 180,
-    definition: (
-      <>
-        Sim&apos;s catalog of 1,000+ integrations
-        <br />
-        your agents act through.
-      </>
-    ),
-  },
-  {
-    word: 'Context',
-    Mark: IsoIngestIllustration,
-    size: 170,
-    definition: 'Your data, stored semantically in Sim as the memory your agents reason over.',
-  },
-  {
-    word: 'Build',
-    Mark: IsoBuildIllustration,
-    size: 176,
-    definition: 'Compose agent logic in the visual builder, or just describe it to Sim.',
-  },
-  {
-    word: 'Monitor',
-    Mark: IsoMonitorIllustration,
-    size: 174,
-    definition: 'See inside every run in Sim: live traces, logs, and real cost.',
-  },
-]
-
-export function Mothership() {
-  return (
-    <section
-      id='mothership'
-      aria-labelledby='mothership-heading'
-      className='mx-auto w-full max-w-[1460px] px-20 max-sm:px-5 max-lg:px-8'
-    >
-      <h2
-        id='mothership-heading'
-        className='max-w-[1200px] text-balance text-[28px] leading-[1.2] max-sm:text-[22px]'
-      >
-        <span className='block text-[var(--text-primary)]'>
-          Everything your AI agents need, in one workspace.
-        </span>
-        <span className='block text-[var(--text-body)]'>Build, run, and watch every agent.</span>
-      </h2>
-
-      <ul className='mt-16 grid grid-cols-4 gap-8 max-sm:mt-8 max-sm:grid-cols-1 max-sm:gap-10 max-lg:mt-12 max-lg:grid-cols-2 max-lg:gap-x-8 max-lg:gap-y-12'>
-        {AREAS.map(({ word, Mark, size, definition }) => (
-          <li key={word} className='flex flex-col gap-[22px]'>
-            <div className='flex size-[148px] items-center justify-center'>
-              <Mark size={size} />
-            </div>
-            <div className='flex flex-col gap-2'>
-              <h3 className='text-[var(--text-primary)] text-lg'>{word}</h3>
-              <p className='max-w-[250px] text-pretty text-[var(--text-body)] text-sm leading-[1.5]'>
-                {definition}
-              </p>
-            </div>
-          </li>
-        ))}
-      </ul>
-    </section>
-  )
-}
diff --git a/apps/sim/app/(landing)/components/navbar/components/announcement-banner/announcement-banner.tsx b/apps/sim/app/(landing)/components/navbar/components/announcement-banner/announcement-banner.tsx
new file mode 100644
index 00000000000..72f6f871714
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/announcement-banner/announcement-banner.tsx
@@ -0,0 +1,41 @@
+import { cn } from '@sim/emcn'
+import { ArrowRight } from '@sim/emcn/icons'
+import Link from 'next/link'
+import { LANDING_CONTENT_WIDTH, LANDING_GUTTER } from '@/app/(landing)/components/landing-layout'
+
+const LATEST_UPDATE = {
+  title: 'Tracking Secrets Through an Agent Run',
+  href: '/blog/secret-provenance',
+} as const
+
+/** Slim marketing update strip shown above the primary navigation. */
+export function AnnouncementBanner() {
+  return (
+    <aside
+      aria-label='Latest update'
+      data-announcement-banner
+      className='h-[1.95rem] bg-[oklch(0.439_0_0)] text-[#F8F8F8] dark:bg-[var(--surface-5)] dark:text-[var(--text-primary)]'
+    >
+      <div
+        className={cn(
+          'flex h-full items-center justify-center gap-3 text-caption leading-5',
+          LANDING_CONTENT_WIDTH,
+          LANDING_GUTTER
+        )}
+      >
+        <span className='ml-[19px] truncate'>{LATEST_UPDATE.title}</span>
+        <Link
+          href={LATEST_UPDATE.href}
+          aria-label={`Read article: ${LATEST_UPDATE.title}`}
+          className='group/link inline-flex shrink-0 items-center gap-1.5 font-normal text-[#B4B4B4] transition-colors duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] hover-hover:text-[#F8F8F8] focus-visible:text-[#F8F8F8] focus-visible:outline focus-visible:outline-1 focus-visible:outline-current focus-visible:outline-offset-2 dark:text-[var(--text-tertiary)] dark:focus-visible:text-[var(--text-primary)] dark:hover-hover:text-[var(--text-primary)]'
+        >
+          Read article
+          <ArrowRight
+            aria-hidden='true'
+            className='-translate-x-1 size-[13px] shrink-0 opacity-0 transition-[opacity,transform] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] group-hover/link:translate-x-0 group-hover/link:opacity-100 group-focus-visible/link:translate-x-0 group-focus-visible/link:opacity-100 motion-reduce:translate-x-0 motion-reduce:transition-none'
+          />
+        </Link>
+      </div>
+    </aside>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/navbar/components/announcement-banner/index.ts b/apps/sim/app/(landing)/components/navbar/components/announcement-banner/index.ts
new file mode 100644
index 00000000000..d78e9c6425a
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/announcement-banner/index.ts
@@ -0,0 +1 @@
+export { AnnouncementBanner } from './announcement-banner'
diff --git a/apps/sim/app/(landing)/components/navbar/components/github-chip/github-chip.tsx b/apps/sim/app/(landing)/components/navbar/components/github-chip/github-chip.tsx
index 776debe1c48..f5682330e2f 100644
--- a/apps/sim/app/(landing)/components/navbar/components/github-chip/github-chip.tsx
+++ b/apps/sim/app/(landing)/components/navbar/components/github-chip/github-chip.tsx
@@ -22,6 +22,8 @@ export function GitHubChip({ stars }: GitHubChipProps) {
       target='_blank'
       rel='noopener noreferrer'
       leftIcon={GithubOutlineIcon}
+      shape='round'
+      className='px-3'
       aria-label={`GitHub repository, ${stars} stars`}
     >
       {stars}
diff --git a/apps/sim/app/(landing)/components/navbar/components/index.ts b/apps/sim/app/(landing)/components/navbar/components/index.ts
index 64485101ffd..dfb3e76331c 100644
--- a/apps/sim/app/(landing)/components/navbar/components/index.ts
+++ b/apps/sim/app/(landing)/components/navbar/components/index.ts
@@ -1,13 +1,15 @@
+export { AnnouncementBanner } from './announcement-banner'
 export { GitHubChip } from './github-chip'
 export { LogoMark } from './logo-mark'
 export { MobileNav } from './mobile-nav'
 export type { NavMenu, NavMenuItemData } from './nav-menu-chip'
 export {
+  CUSTOMERS_MENU,
   NAV_MENUS,
-  NavMenuChip,
+  NavMenuCluster,
   PLATFORM_MENU,
   RESOURCES_MENU,
-  SOLUTIONS_MENU,
 } from './nav-menu-chip'
+export { NavbarAuthPill } from './navbar-auth-pill'
 export { NavbarShell } from './navbar-shell'
 export { SimWordmark } from './sim-wordmark'
diff --git a/apps/sim/app/(landing)/components/navbar/components/mobile-nav/mobile-nav.test.tsx b/apps/sim/app/(landing)/components/navbar/components/mobile-nav/mobile-nav.test.tsx
new file mode 100644
index 00000000000..09264db228d
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/mobile-nav/mobile-nav.test.tsx
@@ -0,0 +1,126 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { type AnchorHTMLAttributes, act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { MobileNav } from '@/app/(landing)/components/navbar/components/mobile-nav/mobile-nav'
+
+const { frost, setMenuOpen } = vi.hoisted(() => {
+  const setMenuOpen = vi.fn()
+  return { frost: { setMenuOpen }, setMenuOpen }
+})
+
+vi.mock('@sim/emcn', () => ({
+  cn: (...values: Array<string | false | undefined>) => values.filter(Boolean).join(' '),
+}))
+vi.mock('@sim/emcn/icons', () => ({ Menu: () => null, X: () => null }))
+vi.mock('@/components/icons', () => ({ GithubOutlineIcon: () => null }))
+vi.mock('next/link', () => ({
+  default: ({
+    prefetch,
+    ...props
+  }: AnchorHTMLAttributes<HTMLAnchorElement> & { prefetch?: boolean | null }) => (
+    <a {...props} data-prefetch={prefetch === false ? 'disabled' : 'auto'} />
+  ),
+}))
+vi.mock('@/app/(landing)/components/landing-cta-link', () => ({
+  LandingCtaLink: ({ children, href, onClick }: AnchorHTMLAttributes<HTMLAnchorElement>) => (
+    <a href={href} onClick={onClick}>
+      {children}
+    </a>
+  ),
+}))
+vi.mock('@/app/(landing)/components/navbar/components/navbar-auth-pill', () => ({
+  NavbarAuthPill: ({ onNavigate }: { onNavigate?: () => void }) => (
+    <a href='/signup' onClick={onNavigate}>
+      Start building
+    </a>
+  ),
+}))
+vi.mock('@/app/(landing)/components/navbar/components/nav-menu-chip', () => ({
+  NAV_MENUS: [
+    {
+      label: 'Platform',
+      sections: [{ label: 'Platform', items: [{ title: 'Workflows', href: '/workflows' }] }],
+    },
+  ],
+}))
+vi.mock('@/app/(landing)/components/navbar/components/navbar-shell', () => ({
+  NAVBAR_GLASS_SURFACE: '',
+  useNavbarFrost: () => frost,
+}))
+
+let host: HTMLDivElement
+let root: Root
+let desktopMedia: EventTarget & { matches: boolean }
+
+beforeEach(() => {
+  setMenuOpen.mockClear()
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+  desktopMedia = Object.assign(new EventTarget(), { matches: false })
+  vi.stubGlobal(
+    'matchMedia',
+    vi.fn(() => desktopMedia)
+  )
+  host = document.createElement('div')
+  document.body.append(host)
+  root = createRoot(host)
+  act(() => root.render(<MobileNav stars='29.5k' />))
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  host.remove()
+  vi.unstubAllGlobals()
+})
+
+function trigger(): HTMLButtonElement {
+  const button = host.querySelector<HTMLButtonElement>('button[aria-controls="mobile-nav-sheet"]')
+  if (!button) throw new Error('Missing mobile navigation trigger')
+  return button
+}
+
+describe('MobileNav dismissal', () => {
+  it('enables prefetch only while the sheet is open and closes on navigation', () => {
+    const link = host.querySelector<HTMLAnchorElement>('#mobile-nav-sheet a[href="/workflows"]')
+    if (!link) throw new Error('Missing workflow link')
+    expect(link.dataset.prefetch).toBe('disabled')
+
+    act(() => trigger().click())
+    expect(link.dataset.prefetch).toBe('auto')
+    link.addEventListener('click', (event) => event.preventDefault(), { once: true })
+    act(() => link.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true })))
+    expect(trigger().getAttribute('aria-expanded')).toBe('false')
+    expect(link.dataset.prefetch).toBe('disabled')
+    expect(setMenuOpen).toHaveBeenLastCalledWith('mobile', false)
+  })
+
+  it('releases its scroll lock when resizing to desktop and stays closed when returning', () => {
+    act(() => trigger().click())
+    expect(trigger().getAttribute('aria-expanded')).toBe('true')
+    setMenuOpen.mockClear()
+    act(() => {
+      desktopMedia.matches = true
+      desktopMedia.dispatchEvent(new Event('change'))
+    })
+    expect(trigger().getAttribute('aria-expanded')).toBe('false')
+    expect(setMenuOpen).toHaveBeenCalledExactlyOnceWith('mobile', false)
+    act(() => {
+      desktopMedia.matches = false
+      desktopMedia.dispatchEvent(new Event('change'))
+    })
+    expect(trigger().getAttribute('aria-expanded')).toBe('false')
+  })
+
+  it('returns focus to the trigger when Escape dismisses the sheet', () => {
+    act(() => trigger().click())
+    const link = host.querySelector<HTMLAnchorElement>('#mobile-nav-sheet a[href="/workflows"]')
+    if (!link) throw new Error('Missing workflow link')
+    act(() => link.focus())
+    act(() => link.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })))
+    expect(trigger().getAttribute('aria-expanded')).toBe('false')
+    expect(document.activeElement).toBe(trigger())
+    expect(setMenuOpen).toHaveBeenLastCalledWith('mobile', false)
+  })
+})
diff --git a/apps/sim/app/(landing)/components/navbar/components/mobile-nav/mobile-nav.tsx b/apps/sim/app/(landing)/components/navbar/components/mobile-nav/mobile-nav.tsx
index e91cf46677d..7f00d954553 100644
--- a/apps/sim/app/(landing)/components/navbar/components/mobile-nav/mobile-nav.tsx
+++ b/apps/sim/app/(landing)/components/navbar/components/mobile-nav/mobile-nav.tsx
@@ -1,35 +1,24 @@
 'use client'
 
-import { useEffect, useState } from 'react'
-import { ChipLink, cn } from '@sim/emcn'
+import { useEffect, useRef } from 'react'
+import { cn } from '@sim/emcn'
 import { Menu, X } from '@sim/emcn/icons'
 import Link from 'next/link'
 import { GithubOutlineIcon } from '@/components/icons'
+import { LandingCtaLink } from '@/app/(landing)/components/landing-cta-link'
 import { NAV_MENUS } from '@/app/(landing)/components/navbar/components/nav-menu-chip'
-import {
-  NAVBAR_GLASS_SURFACE,
-  useNavbarFrost,
-} from '@/app/(landing)/components/navbar/components/navbar-shell'
+import { NavbarAuthPill } from '@/app/(landing)/components/navbar/components/navbar-auth-pill'
+import { NAVBAR_GLASS_SURFACE } from '@/app/(landing)/components/navbar/components/navbar-shell'
+import { useNavbarMenu } from '@/app/(landing)/components/navbar/hooks/use-navbar-menu'
 import colorMixFallbacks from '@/app/(landing)/components/shared/color-mix-fallbacks/color-mix-fallbacks.module.css'
-import { DEMO_HREF, SIGNUP_HREF } from '@/app/(landing)/constants'
+import { DEMO_HREF } from '@/app/(landing)/constants'
 
 /**
- * Mobile navigation - the `< lg` counterpart to the desktop nav clusters.
- *
- * Renders an always-visible "Sign up" chip plus a hamburger that toggles a
- * full-width slide-down sheet anchored under the bar (`top-full`). The sheet
- * expands the desktop mega-menus into grouped link sections plus the auth CTAs,
- * stacked on the shared {@link NAVBAR_GLASS_SURFACE} so it reads as one frosted
- * panel with the bar (which frosts in sync via {@link useNavbarFrost}). Only this
- * leaf hydrates; the desktop nav stays server-rendered.
- *
- * The sheet locks body scroll while open and closes on route change intent
- * (any link tap) and on `Escape`. With all three mega-menus expanded the
- * sections outgrow a phone viewport, so the sheet caps its height at the
- * space under the bar (`100dvh` minus the bar's 62px) and scrolls internally
- * (`overscroll-contain` keeps the locked page from rubber-banding behind it).
- * Motion is a short token-driven transform/opacity that collapses under
- * `prefers-reduced-motion`.
+ * Navigation below `xl`. Tablets keep Log in, Start building, and the demo CTA
+ * in the bar; phones show only the wordmark and the menu button, since the
+ * actions no longer fit beside the wordmark at narrow widths. On phones,
+ * the sheet carries the actions above the product links. It closes on navigation or Escape.
+ * The navbar shell locks the page scroll and coordinates its frosted surface.
  */
 
 interface MobileNavProps {
@@ -50,100 +39,163 @@ const STANDALONE_LINKS = [{ label: 'Pricing', href: '/pricing' }] as const
 const SHEET_ROW =
   'rounded-lg px-3 py-2.5 text-[15px] text-[var(--text-body)] transition-colors hover:bg-[var(--surface-hover)]'
 
+const MENU_TRANSITION =
+  'transition-[opacity,translate,visibility] ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none'
+
 export function MobileNav({ stars }: MobileNavProps) {
-  const frost = useNavbarFrost()
-  const [open, setOpen] = useState(false)
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const { open, updateOpen } = useNavbarMenu('mobile')
 
   useEffect(() => {
     if (!open) return
-    const onKey = (e: KeyboardEvent) => e.key === 'Escape' && setOpen(false)
-    document.body.style.overflow = 'hidden'
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape') return
+      event.preventDefault()
+      updateOpen(false)
+      triggerRef.current?.focus()
+    }
     document.addEventListener('keydown', onKey)
     return () => {
-      document.body.style.overflow = ''
       document.removeEventListener('keydown', onKey)
     }
-  }, [open])
-
-  // Report open state to the shell so the sticky bar frosts in sync with the
-  // sheet - the two then read as one continuous glass panel.
-  useEffect(() => {
-    frost?.setMenuOpen(open)
-  }, [open, frost])
+  }, [open, updateOpen])
 
   return (
-    <div className='ml-auto flex items-center gap-2 lg:hidden'>
-      <ChipLink variant='primary' href={SIGNUP_HREF} prefetch={false}>
-        Sign up
-      </ChipLink>
+    <div className='ml-auto flex items-center gap-2 xl:hidden'>
+      <NavbarAuthPill className='max-sm:hidden' onNavigate={() => updateOpen(false)} />
+      <LandingCtaLink
+        href={DEMO_HREF}
+        size='compact'
+        withArrow
+        className='max-sm:hidden'
+        onClick={() => updateOpen(false)}
+      >
+        Request a demo
+      </LandingCtaLink>
       <button
+        ref={triggerRef}
         type='button'
         aria-label={open ? 'Close menu' : 'Open menu'}
         aria-expanded={open}
         aria-controls='mobile-nav-sheet'
-        onClick={() => setOpen((v) => !v)}
+        onClick={() => updateOpen(!open)}
         className='flex size-[30px] items-center justify-center rounded-lg border border-[var(--border-1)] text-[var(--text-icon)] transition-colors hover:bg-[var(--surface-hover)]'
       >
-        {open ? <X className='size-[18px]' /> : <Menu className='size-[18px]' />}
+        <span aria-hidden='true' className='relative size-[18px]'>
+          <Menu
+            className={cn(
+              'absolute inset-0 size-full transition-[opacity,rotate] duration-150 ease-out motion-reduce:transition-none',
+              open ? 'rotate-45 opacity-0' : 'rotate-0 opacity-100'
+            )}
+          />
+          <X
+            className={cn(
+              'absolute inset-0 size-full transition-[opacity,rotate] duration-150 ease-out motion-reduce:transition-none',
+              open ? 'rotate-0 opacity-100' : '-rotate-45 opacity-0'
+            )}
+          />
+        </span>
       </button>
 
-      {open ? (
-        <button
-          type='button'
-          aria-hidden='true'
-          tabIndex={-1}
-          onClick={() => setOpen(false)}
-          className={cn(
-            'fixed inset-0 top-full z-40 cursor-default',
-            colorMixFallbacks.mobileBackdrop
-          )}
-        />
-      ) : null}
+      <button
+        type='button'
+        aria-hidden='true'
+        tabIndex={-1}
+        disabled={!open}
+        onClick={() => updateOpen(false)}
+        className={cn(
+          'fixed inset-0 top-[var(--landing-header-height)] z-40 cursor-default',
+          MENU_TRANSITION,
+          open
+            ? 'pointer-events-auto visible opacity-100 duration-[240ms]'
+            : 'pointer-events-none invisible opacity-0 duration-[180ms]'
+        )}
+      >
+        <span className={cn('absolute inset-0', colorMixFallbacks.mobileBackdrop)} />
+      </button>
 
       <div
         id='mobile-nav-sheet'
+        aria-hidden={!open}
+        inert={!open}
         className={cn(
-          'absolute top-full right-0 left-0 z-50 max-h-[calc(100dvh-62px)] origin-top overflow-y-auto overscroll-contain border-[var(--border)] border-b transition-[opacity,transform,visibility] duration-200 motion-reduce:transition-none',
+          'absolute top-full right-0 left-0 z-50 max-h-[calc(100dvh-var(--landing-header-height))] origin-top overflow-y-auto overscroll-contain border-[var(--border)] border-b motion-reduce:translate-y-0',
           NAVBAR_GLASS_SURFACE,
+          MENU_TRANSITION,
           open
-            ? 'pointer-events-auto visible translate-y-0 opacity-100'
-            : '-translate-y-2 pointer-events-none invisible opacity-0'
+            ? 'pointer-events-auto visible translate-y-0 opacity-100 duration-[240ms]'
+            : '-translate-y-2 pointer-events-none invisible opacity-0 duration-[180ms]'
         )}
       >
-        <div className='mx-auto flex w-full max-w-[1460px] flex-col gap-1 px-5 pt-2 pb-5'>
+        <div className='mx-auto flex w-full max-w-[1728px] flex-col gap-1 px-7 pt-2 pb-5'>
+          <div className='flex flex-col gap-2 pb-4 sm:hidden'>
+            <NavbarAuthPill size='default' onNavigate={() => updateOpen(false)} />
+            <LandingCtaLink
+              href={DEMO_HREF}
+              prefetch={open ? null : false}
+              withArrow
+              onClick={() => updateOpen(false)}
+            >
+              Request a demo
+            </LandingCtaLink>
+          </div>
+
           {NAV_MENUS.map((menu) => (
             <div key={menu.label} className='flex flex-col'>
               <span className='px-3 pt-2.5 pb-1 text-[13px] text-[var(--text-muted)]'>
                 {menu.label}
               </span>
-              {menu.items.map((item) =>
-                item.external ? (
-                  <a
-                    key={item.title}
-                    href={item.href}
-                    target='_blank'
-                    rel='noopener noreferrer'
-                    onClick={() => setOpen(false)}
-                    className={SHEET_ROW}
-                  >
-                    {item.title}
-                  </a>
-                ) : (
-                  <Link
-                    key={item.title}
-                    href={item.href}
-                    onClick={() => setOpen(false)}
-                    className={SHEET_ROW}
-                  >
-                    {item.title}
-                  </Link>
-                )
+              {menu.index && (
+                <Link
+                  href={menu.index.href}
+                  prefetch={open ? null : false}
+                  onClick={() => updateOpen(false)}
+                  className={SHEET_ROW}
+                >
+                  {menu.index.label}
+                </Link>
               )}
+              {menu.sections.map((section) => (
+                <div key={section.label} className='flex flex-col'>
+                  {section.items.map((item) => {
+                    const label = item.brand ? `${item.brand} ${item.title}` : item.title
+
+                    return item.external ? (
+                      <a
+                        key={item.title}
+                        href={item.href}
+                        target='_blank'
+                        rel='noopener noreferrer'
+                        onClick={() => updateOpen(false)}
+                        className={SHEET_ROW}
+                      >
+                        {label}
+                      </a>
+                    ) : (
+                      <Link
+                        key={item.title}
+                        href={item.href}
+                        prefetch={open ? null : false}
+                        onClick={() => updateOpen(false)}
+                        className={SHEET_ROW}
+                      >
+                        {label}
+                      </Link>
+                    )
+                  })}
+                </div>
+              ))}
             </div>
           ))}
 
           {STANDALONE_LINKS.map(({ label, href }) => (
-            <Link key={label} href={href} onClick={() => setOpen(false)} className={SHEET_ROW}>
+            <Link
+              key={label}
+              href={href}
+              prefetch={open ? null : false}
+              onClick={() => updateOpen(false)}
+              className={SHEET_ROW}
+            >
               {label}
             </Link>
           ))}
@@ -152,35 +204,13 @@ export function MobileNav({ stars }: MobileNavProps) {
             href='https://github.com/simstudioai/sim'
             target='_blank'
             rel='noopener noreferrer'
-            onClick={() => setOpen(false)}
+            onClick={() => updateOpen(false)}
             className={cn('flex items-center gap-2', SHEET_ROW)}
           >
             <GithubOutlineIcon className='size-[16px] text-[var(--text-icon)]' />
             <span>GitHub</span>
             <span className='text-[var(--text-muted)]'>{stars}</span>
           </a>
-
-          <div className='mt-3 flex flex-col gap-2'>
-            <ChipLink
-              variant='border'
-              href='/login'
-              fullWidth
-              prefetch={false}
-              className='h-[40px] justify-center [&>span]:flex-none'
-              onClick={() => setOpen(false)}
-            >
-              Log in
-            </ChipLink>
-            <ChipLink
-              variant='primary'
-              href={DEMO_HREF}
-              fullWidth
-              className='h-[40px] justify-center [&>span]:flex-none'
-              onClick={() => setOpen(false)}
-            >
-              Contact sales
-            </ChipLink>
-          </div>
         </div>
       </div>
     </div>
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-card/index.ts b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-card/index.ts
new file mode 100644
index 00000000000..95a579aacab
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-card/index.ts
@@ -0,0 +1 @@
+export { NavMenuCard } from './nav-menu-card'
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-card/nav-menu-card.tsx b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-card/nav-menu-card.tsx
new file mode 100644
index 00000000000..ba151375f94
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-card/nav-menu-card.tsx
@@ -0,0 +1,95 @@
+import { cn } from '@sim/emcn'
+import { ArrowRight } from '@sim/emcn/icons'
+import Image from 'next/image'
+import Link from 'next/link'
+import type { NavMenuItemData } from '@/app/(landing)/components/navbar/components/nav-menu-chip/types'
+
+interface NavMenuCardProps {
+  item: NavMenuItemData
+  onSelect: () => void
+  prefetch?: boolean | null
+}
+
+/**
+ * Placement grounds standing in for real imagery. `dark` is the platform's
+ * dark grey (its inverted hover surface) with the mark flattened to white;
+ * `light` is its elevated light grey with the mark's own ink - flattened to
+ * white too once that grey goes dark.
+ */
+const TONE = {
+  dark: {
+    ground:
+      'border-transparent bg-[var(--surface-inverted-hover)] text-[var(--white)] hover:border-[var(--text-subtle)]',
+    mark: 'brightness-0 invert',
+  },
+  light: {
+    ground:
+      'border-[var(--border)] bg-[var(--surface-6)] text-[var(--text-primary)] hover:border-[var(--text-subtle)]',
+    mark: 'dark:brightness-0 dark:invert',
+  },
+} as const
+
+const HOVER_LABEL = 'Customer story'
+
+/**
+ * The picture eases in a touch on hover, under a slight tint - a 20% black
+ * scrim (the featured film's approach, an alpha no token carries) that
+ * steadies the white mark on the scene's light sky without dimming it much.
+ */
+const PICTURE =
+  'object-cover transition-transform duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] group-hover:scale-[1.03]'
+const SCRIM = 'absolute inset-0 bg-black/20'
+
+/**
+ * One customer tile in a `floating` menu: the customer's mark centred on a
+ * toned placement - or on the customer's picture under a slight tint - and a
+ * "Customer story" arrow label that rises into the corner on hover or focus.
+ * The whole tile is the link.
+ */
+export function NavMenuCard({ item, onSelect, prefetch }: NavMenuCardProps) {
+  const { card } = item
+  const tone = TONE[card?.tone ?? 'light']
+  return (
+    <Link
+      href={item.href}
+      prefetch={prefetch}
+      onClick={onSelect}
+      aria-label={`${item.title} customer story`}
+      className={cn(
+        'group relative flex h-[180px] min-w-0 items-center justify-center overflow-hidden rounded-lg border px-6 transition-colors duration-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--text-secondary)] focus-visible:outline-offset-2',
+        tone.ground
+      )}
+    >
+      {card?.background && (
+        <>
+          <Image
+            src={card.background.src}
+            alt=''
+            fill
+            sizes='292px'
+            loading='lazy'
+            className={PICTURE}
+          />
+          <span aria-hidden='true' className={SCRIM} />
+        </>
+      )}
+      {card && (
+        <Image
+          src={card.imageSrc}
+          alt={card.imageAlt}
+          height={card.height}
+          width={Math.round(card.height * card.aspect)}
+          loading='lazy'
+          className={cn('relative h-auto max-w-full', tone.mark)}
+        />
+      )}
+      <span
+        aria-hidden='true'
+        className='pointer-events-none absolute bottom-3 left-3 flex translate-y-1 items-center gap-1 font-medium text-[13px] leading-5 opacity-0 transition-[opacity,transform] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] group-hover:translate-y-0 group-hover:opacity-100 group-focus-visible:translate-y-0 group-focus-visible:opacity-100 motion-reduce:translate-y-0 motion-reduce:transition-none'
+      >
+        {HOVER_LABEL}
+        <ArrowRight className='size-[14px]' />
+      </span>
+    </Link>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-item/nav-menu-item.tsx b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-item/nav-menu-item.tsx
index bc6fb5d301c..8d9f696df2f 100644
--- a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-item/nav-menu-item.tsx
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-item/nav-menu-item.tsx
@@ -1,15 +1,14 @@
-import { ArrowRight } from '@sim/emcn/icons'
+import { ChipTag, cn } from '@sim/emcn'
 import Link from 'next/link'
+import { ChevronArrow } from '@/app/(landing)/components/chevron-arrow'
 import type { NavMenuItemData } from '@/app/(landing)/components/navbar/components/nav-menu-chip/types'
+import { SimWordmark } from '@/app/(landing)/components/navbar/components/sim-wordmark'
 
 /**
- * One row inside a navbar mega-menu panel - a title, a one-line description, and
- * a right-arrow that slides in on hover.
+ * One destination inside the mega-menu's editorial link columns.
  *
- * The row is its own `group/item`, so the arrow reveal (`opacity-0
- * -translate-x-1` → visible on `group-hover/item` and `group-focus-visible/item`)
- * is pure CSS, scoped to the hovered or keyboard-focused row and never to the
- * whole panel. `onSelect` fires on click so the parent menu can close itself.
+ * Hover and keyboard focus update the dynamic preview through `onActivate`.
+ * `onSelect` fires on click so the parent menu can close itself.
  *
  * Internal routes render a crawlable Next {@link Link}; `external` items render
  * a new-tab `<a>` with `rel='noopener noreferrer'`.
@@ -17,36 +16,68 @@ import type { NavMenuItemData } from '@/app/(landing)/components/navbar/componen
 
 interface NavMenuItemProps {
   item: NavMenuItemData
+  /** Highlights the description of the previewed destination while the menu is open. */
+  active?: boolean
+  prefetch?: boolean | null
   /** Called when the row is activated, so the parent menu can close. */
   onSelect?: () => void
+  /** Called on hover or focus to update the menu's preview region. */
+  onActivate?: () => void
 }
 
 const ROW_CLASS =
-  'group/item flex items-center gap-2.5 rounded-lg p-2 text-left transition-colors hover-hover:bg-[var(--surface-active)] focus-visible:bg-[var(--surface-active)] focus-visible:outline-hidden'
-const TITLE_CLASS = 'truncate text-[14px] text-[var(--text-body)]'
-const DESC_CLASS = 'text-[12px] text-[var(--text-muted)] leading-snug'
-const ARROW_CLASS =
-  'size-4 shrink-0 -translate-x-1 text-[var(--text-icon)] opacity-0 transition-[opacity,transform] group-hover/item:translate-x-0 group-hover/item:opacity-100 group-focus-visible/item:translate-x-0 group-focus-visible/item:opacity-100 motion-reduce:transition-none'
+  'group/item group/link flex min-w-0 items-start text-left focus-visible:outline-none'
+const DESC_CLASS =
+  'mt-2 max-w-[32ch] text-pretty text-[13px] leading-[1.45] transition-colors group-hover/item:text-[var(--text-body)] group-focus-visible/item:text-[var(--text-body)]'
 
-export function NavMenuItem({ item, onSelect }: NavMenuItemProps) {
-  const { title, description, href, external } = item
+export function NavMenuItem({
+  item,
+  active = false,
+  prefetch,
+  onSelect,
+  onActivate,
+}: NavMenuItemProps) {
+  const { brand, title, description, href, external } = item
   const content = (
-    <>
-      <span className='flex min-w-0 flex-1 flex-col'>
-        <span className={TITLE_CLASS}>{title}</span>
-        <span className={DESC_CLASS}>{description}</span>
+    <span className='flex min-w-0 flex-1 flex-col'>
+      <span className='flex items-center gap-2 font-normal text-[15px]'>
+        {brand ? (
+          <ChipTag
+            variant='brand'
+            brandColor='var(--bg)'
+            brandStrokeColor='var(--surface-6)'
+            brandForeground='dark'
+            aria-label={brand}
+          >
+            <SimWordmark size='tag' tone='brand-muted' />
+          </ChipTag>
+        ) : null}
+        <span className='text-[var(--text-body)] transition-colors'>{title}</span>
+        <span className='flex size-3 shrink-0 items-center justify-center opacity-0 transition-opacity duration-200 ease-out group-hover/link:opacity-100 group-focus-visible/link:opacity-100 motion-reduce:transition-none'>
+          <ChevronArrow />
+        </span>
       </span>
-      <ArrowRight className={ARROW_CLASS} aria-hidden='true' />
-    </>
+      <span
+        className={cn(
+          DESC_CLASS,
+          active ? 'text-[var(--text-body)]' : 'text-[var(--text-secondary)]'
+        )}
+      >
+        {description}
+      </span>
+    </span>
   )
 
   if (external) {
     return (
       <a
         href={href}
+        data-active={active || undefined}
         target='_blank'
         rel='noopener noreferrer'
         onClick={onSelect}
+        onMouseEnter={onActivate}
+        onFocus={onActivate}
         className={ROW_CLASS}
       >
         {content}
@@ -55,7 +86,15 @@ export function NavMenuItem({ item, onSelect }: NavMenuItemProps) {
   }
 
   return (
-    <Link href={href} onClick={onSelect} className={ROW_CLASS}>
+    <Link
+      href={href}
+      prefetch={prefetch}
+      data-active={active || undefined}
+      onClick={onSelect}
+      onMouseEnter={onActivate}
+      onFocus={onActivate}
+      className={ROW_CLASS}
+    >
       {content}
     </Link>
   )
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-logo-marquee/index.ts b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-logo-marquee/index.ts
new file mode 100644
index 00000000000..0606fe192d9
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-logo-marquee/index.ts
@@ -0,0 +1 @@
+export { NavMenuLogoMarquee } from './nav-menu-logo-marquee'
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-logo-marquee/nav-menu-logo-marquee.module.css b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-logo-marquee/nav-menu-logo-marquee.module.css
new file mode 100644
index 00000000000..1fa692be01d
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-logo-marquee/nav-menu-logo-marquee.module.css
@@ -0,0 +1,24 @@
+.track {
+  animation: marquee 16s linear infinite;
+}
+
+.viewport:hover .track,
+.viewport:focus-visible .track,
+.viewport[data-dragging] .track {
+  animation-play-state: paused;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .track {
+    animation-play-state: paused;
+  }
+}
+
+@keyframes marquee {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-logo-marquee/nav-menu-logo-marquee.test.tsx b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-logo-marquee/nav-menu-logo-marquee.test.tsx
new file mode 100644
index 00000000000..bbe2792fb1d
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-logo-marquee/nav-menu-logo-marquee.test.tsx
@@ -0,0 +1,50 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('@sim/emcn', () => ({
+  cn: (...values: Array<string | false | null | undefined>) => values.filter(Boolean).join(' '),
+}))
+
+vi.mock('next/image', () => ({
+  default: ({ alt, className }: { alt: string; className?: string }) => (
+    <img alt={alt} className={className} />
+  ),
+}))
+
+import { LOGOS } from '@/app/(landing)/components/logos'
+import { NavMenuLogoMarquee } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-logo-marquee'
+
+afterEach(() => {
+  document.body.replaceChildren()
+})
+
+describe('NavMenuLogoMarquee', () => {
+  it('loops two copies of the shared logo row and hides the second from assistive technology', () => {
+    const host = document.createElement('div')
+    document.body.append(host)
+    act(() => {
+      createRoot(host).render(<NavMenuLogoMarquee />)
+    })
+
+    const rows = host.querySelectorAll('ul')
+    expect(rows).toHaveLength(2)
+    expect(rows[0].getAttribute('aria-label')).toBe(
+      'Companies building and governing AI agents with Sim'
+    )
+    expect(rows[0].getAttribute('aria-hidden')).toBeNull()
+    expect(rows[1].getAttribute('aria-hidden')).toBe('true')
+
+    const named = [...rows[0].querySelectorAll('img')].map((img) => img.getAttribute('alt'))
+    expect(named).toEqual(LOGOS.map((logo) => logo.name))
+    for (const img of rows[1].querySelectorAll('img')) {
+      expect(img.getAttribute('alt')).toBe('')
+    }
+
+    const track = rows[0].parentElement
+    expect(track?.parentElement?.className).toContain('mask-image')
+  })
+})
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-logo-marquee/nav-menu-logo-marquee.tsx b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-logo-marquee/nav-menu-logo-marquee.tsx
new file mode 100644
index 00000000000..c64f80051b6
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-logo-marquee/nav-menu-logo-marquee.tsx
@@ -0,0 +1,153 @@
+'use client'
+
+import { type PointerEvent, useEffect, useRef } from 'react'
+import { cn } from '@sim/emcn'
+import Image from 'next/image'
+import { LOGOS, MUTED_MARK } from '@/app/(landing)/components/logos'
+import styles from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-logo-marquee/nav-menu-logo-marquee.module.css'
+
+/**
+ * The track holds two identical copies of the row and slides by half its
+ * width per cycle, so the seam lands exactly where the next copy begins and
+ * the loop never visibly restarts. Every copy is bounded to keep the cadence
+ * even: a copy is about 800px, so 16s is roughly 50px/s.
+ */
+const COPIES = [0, 1] as const
+const EDGE_FADE =
+  '[mask-image:linear-gradient(to_right,transparent,black_14%,black_86%,transparent)]'
+const LABEL = 'Companies building and governing AI agents with Sim'
+const KEYBOARD_STEP = 120
+
+interface MarqueeDrag {
+  pointerId: number
+  lastX: number
+}
+
+function moveTrack(track: HTMLDivElement | null, distance: number) {
+  const animation = track?.getAnimations()[0]
+  const duration = animation?.effect?.getComputedTiming().duration
+  const width = (track?.offsetWidth ?? 0) / COPIES.length
+  if (!animation || typeof duration !== 'number' || !duration || !width) return
+
+  const time = Number(animation.currentTime ?? 0) - (distance / width) * duration
+  animation.currentTime = ((time % duration) + duration) % duration
+}
+
+/**
+ * The customer wordmarks sliding in a muted band under a floating menu's
+ * blocs - the homepage's shared logo set at its optical sizes, the way the
+ * platform pages show them. The second copy of the row exists only for the
+ * seamless loop and is hidden from assistive technology; a reduced-motion
+ * preference leaves the row still. Dragging, trackpad scrolling, and arrow
+ * keys scrub the same animation timeline, preserving its position when
+ * autoplay resumes.
+ */
+export function NavMenuLogoMarquee() {
+  const viewportRef = useRef<HTMLDivElement>(null)
+  const trackRef = useRef<HTMLDivElement>(null)
+  const dragRef = useRef<MarqueeDrag | null>(null)
+
+  useEffect(() => {
+    const viewport = viewportRef.current
+    if (!viewport) return
+
+    const onWheel = (event: WheelEvent) => {
+      if (event.ctrlKey || dragRef.current) return
+      const delta = event.deltaX || (event.shiftKey ? event.deltaY : 0)
+      if (!delta || (!event.shiftKey && Math.abs(event.deltaY) > Math.abs(event.deltaX))) return
+
+      const unit =
+        event.deltaMode === WheelEvent.DOM_DELTA_LINE
+          ? 16
+          : event.deltaMode === WheelEvent.DOM_DELTA_PAGE
+            ? viewport.clientWidth
+            : 1
+      if (event.cancelable) event.preventDefault()
+      moveTrack(trackRef.current, -delta * unit)
+    }
+
+    /** Native wheel deltas include trackpad momentum; non-passive handling keeps horizontal swipes in the carousel. */
+    viewport.addEventListener('wheel', onWheel, { passive: false })
+    return () => viewport.removeEventListener('wheel', onWheel)
+  }, [])
+
+  const endDrag = (event: PointerEvent<HTMLDivElement>) => {
+    if (dragRef.current?.pointerId !== event.pointerId) return
+    dragRef.current = null
+    delete event.currentTarget.dataset.dragging
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId)
+    }
+  }
+
+  return (
+    <div
+      ref={viewportRef}
+      role='region'
+      aria-label='Customer logos'
+      aria-description='Drag, scroll horizontally, or use the left and right arrow keys to browse customer logos.'
+      /** biome-ignore lint/a11y/noNoninteractiveTabindex: Keyboard users can scrub this carousel with the arrow keys. */
+      tabIndex={0}
+      className={cn(
+        'cursor-grab touch-pan-y touch-pinch-zoom select-none overflow-hidden py-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--text-secondary)] focus-visible:outline-offset-[-2px] data-[dragging]:cursor-grabbing',
+        styles.viewport,
+        EDGE_FADE
+      )}
+      onPointerDown={(event) => {
+        if (!event.isPrimary || event.button !== 0) return
+        event.preventDefault()
+        dragRef.current = { pointerId: event.pointerId, lastX: event.clientX }
+        event.currentTarget.dataset.dragging = ''
+        event.currentTarget.setPointerCapture(event.pointerId)
+      }}
+      onPointerMove={(event) => {
+        const drag = dragRef.current
+        if (!drag || drag.pointerId !== event.pointerId) return
+        moveTrack(trackRef.current, event.clientX - drag.lastX)
+        drag.lastX = event.clientX
+      }}
+      onPointerUp={endDrag}
+      onPointerCancel={endDrag}
+      onLostPointerCapture={endDrag}
+      onKeyDown={(event) => {
+        if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return
+        event.preventDefault()
+        moveTrack(trackRef.current, event.key === 'ArrowLeft' ? KEYBOARD_STEP : -KEYBOARD_STEP)
+      }}
+    >
+      <div
+        ref={trackRef}
+        className={cn(
+          'flex w-max items-center will-change-transform [backface-visibility:hidden]',
+          styles.track
+        )}
+      >
+        {COPIES.map((copy) => {
+          const decorative = copy > 0
+          return (
+            <ul
+              key={copy}
+              aria-hidden={decorative || undefined}
+              aria-label={decorative ? undefined : LABEL}
+              className='flex w-max items-center'
+            >
+              {LOGOS.map((logo) => (
+                <li key={logo.name} className='flex shrink-0 items-center px-6'>
+                  <Image
+                    src={logo.src}
+                    alt={decorative ? '' : logo.name}
+                    height={logo.height}
+                    width={Math.round(logo.height * logo.aspect)}
+                    loading='lazy'
+                    draggable={false}
+                    className={cn('pointer-events-none', MUTED_MARK)}
+                  />
+                </li>
+              ))}
+            </ul>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/blog-menu-preview/blog-menu-preview.tsx b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/blog-menu-preview/blog-menu-preview.tsx
new file mode 100644
index 00000000000..fb6d528d75e
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/blog-menu-preview/blog-menu-preview.tsx
@@ -0,0 +1,25 @@
+import { FileText } from '@sim/emcn/icons'
+import Image from 'next/image'
+import { MenuPreviewFrame } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-frame'
+import { MenuPreviewHeader } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-header/menu-preview-header'
+
+/** Cover of the latest published post, Tracking Secrets Through an Agent Run (August 8, 2026). */
+export function BlogMenuPreview() {
+  return (
+    <MenuPreviewFrame kind='blog'>
+      <div className='min-h-[400px] w-[620px] overflow-hidden rounded-[10px] border border-[var(--border)] bg-[var(--bg)] font-normal text-[var(--text-body)] text-small shadow-xs'>
+        <MenuPreviewHeader icon={FileText} title='Blog' />
+        <Image
+          src='/blog/secret-provenance/cover.jpg'
+          alt='Sim secret provenance technical overview'
+          width={1200}
+          height={675}
+          sizes='620px'
+          loading='lazy'
+          unoptimized
+          className='h-[260px] w-full object-cover'
+        />
+      </div>
+    </MenuPreviewFrame>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/blog-menu-preview/index.ts b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/blog-menu-preview/index.ts
new file mode 100644
index 00000000000..90a0b6ff230
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/blog-menu-preview/index.ts
@@ -0,0 +1 @@
+export { BlogMenuPreview } from './blog-menu-preview'
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/changelog-menu-preview/changelog-menu-preview.tsx b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/changelog-menu-preview/changelog-menu-preview.tsx
new file mode 100644
index 00000000000..48001f86b35
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/changelog-menu-preview/changelog-menu-preview.tsx
@@ -0,0 +1,48 @@
+import { Calendar } from '@sim/emcn/icons'
+import { MenuPreviewFrame } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-frame'
+import { MenuPreviewHeader } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-header/menu-preview-header'
+
+/** Release dates and summaries come from the checked-in release announcements. */
+const RELEASES = [
+  {
+    date: 'Mar 17',
+    year: '2026',
+    title: 'Your agents, in one workspace',
+    description: 'One workspace for your agents, data, and tools.',
+  },
+  {
+    date: 'Jan 22',
+    year: '2026',
+    title: 'Copilot & MCP deployment',
+    description: 'Build with context. Deploy any workflow as a tool.',
+  },
+] as const
+
+/** An open release timeline with quiet separators and content extending past the cropped window. */
+export function ChangelogMenuPreview() {
+  return (
+    <MenuPreviewFrame kind='changelog'>
+      <div className='min-h-[400px] w-[620px] overflow-hidden rounded-[10px] border border-[var(--border)] bg-[var(--bg)] font-normal text-[var(--text-body)] text-small shadow-xs'>
+        <MenuPreviewHeader icon={Calendar} title='Changelog' />
+        <div className='relative p-4'>
+          <div className='absolute top-10 bottom-0 left-[91px] w-px bg-[var(--border)]' />
+          {RELEASES.map(({ date, year, title, description }) => (
+            <div key={title} className='relative grid min-h-36 grid-cols-[64px_1fr] gap-6'>
+              <div className='pt-4 text-[var(--text-muted)] text-small'>
+                <div className='text-[var(--text-secondary)]'>{date}</div>
+                <div className='mt-0.5'>{year}</div>
+              </div>
+              <span className='absolute top-[22px] left-[72px] size-[7px] rounded-full border border-[var(--text-icon)] bg-[var(--bg)]' />
+              <div className='border-[var(--border)] border-b pt-4 pb-8'>
+                <div className='text-[var(--text-primary)] text-base'>{title}</div>
+                <p className='mt-2 max-w-[350px] text-[var(--text-muted)] leading-relaxed'>
+                  {description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </MenuPreviewFrame>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/changelog-menu-preview/index.ts b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/changelog-menu-preview/index.ts
new file mode 100644
index 00000000000..cc923e6ee2c
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/changelog-menu-preview/index.ts
@@ -0,0 +1 @@
+export { ChangelogMenuPreview } from './changelog-menu-preview'
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/docs-menu-preview/docs-menu-preview.tsx b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/docs-menu-preview/docs-menu-preview.tsx
new file mode 100644
index 00000000000..cfa31ee7f10
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/docs-menu-preview/docs-menu-preview.tsx
@@ -0,0 +1,48 @@
+import { Chip } from '@sim/emcn'
+import { BookOpen } from '@sim/emcn/icons'
+import { MenuPreviewFrame } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-frame'
+import { MenuPreviewHeader } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-header/menu-preview-header'
+
+const BUILD_PAGES = ['Workflows', 'Agents', 'Knowledge Base'] as const
+
+/** A compact reading view of the Docs getting-started guide and its structured output. */
+export function DocsMenuPreview() {
+  return (
+    <MenuPreviewFrame kind='docs'>
+      <div className='min-h-[400px] w-[620px] overflow-hidden rounded-[10px] border border-[var(--border)] bg-[var(--bg)] font-normal text-[var(--text-body)] text-small shadow-xs'>
+        <MenuPreviewHeader icon={BookOpen} title='Documentation' />
+        <div className='flex min-h-[356px]'>
+          <div className='w-[148px] shrink-0 border-[var(--border)] border-r px-2 py-3'>
+            <p className='mb-1 px-2 text-[var(--text-muted)] text-caption'>Get started</p>
+            <Chip className='w-full justify-start' tabIndex={-1}>
+              Introduction
+            </Chip>
+            <Chip active className='w-full justify-start' tabIndex={-1}>
+              Getting started
+            </Chip>
+            <p className='mt-4 mb-1 px-2 text-[var(--text-muted)] text-caption'>Build</p>
+            {BUILD_PAGES.map((page) => (
+              <Chip key={page} className='w-full justify-start' tabIndex={-1}>
+                {page}
+              </Chip>
+            ))}
+          </div>
+          <div className='min-w-0 flex-1 p-4'>
+            <p className='text-[24px] text-[var(--text-primary)] leading-7 tracking-[-0.6px]'>
+              Getting started
+            </p>
+            <p className='mt-1.5 max-w-[340px] text-[var(--text-secondary)] leading-[18px]'>
+              Build your first agent with search tools and structured output.
+            </p>
+            <p className='mt-6 text-[var(--text-primary)] text-small'>Structured output</p>
+            <pre className='mt-2 rounded-md border border-[var(--border)] bg-[var(--surface-3)] px-3 py-3 font-mono text-[11px] text-[var(--text-secondary)] leading-5'>
+              <code>
+                {'{\n  "location": "San Francisco",\n  "profession": "Software engineer"\n}'}
+              </code>
+            </pre>
+          </div>
+        </div>
+      </div>
+    </MenuPreviewFrame>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/docs-menu-preview/index.ts b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/docs-menu-preview/index.ts
new file mode 100644
index 00000000000..636c5390102
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/docs-menu-preview/index.ts
@@ -0,0 +1 @@
+export { DocsMenuPreview } from './docs-menu-preview'
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/enterprise-menu-preview/enterprise-menu-preview.tsx b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/enterprise-menu-preview/enterprise-menu-preview.tsx
new file mode 100644
index 00000000000..5d187bb7345
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/enterprise-menu-preview/enterprise-menu-preview.tsx
@@ -0,0 +1,72 @@
+import { Chip, ChipDropdown, cn } from '@sim/emcn'
+import { Building, MoreHorizontal, Plus } from '@sim/emcn/icons'
+import { MenuPreviewFrame } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-frame'
+import { MenuPreviewHeader } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-header/menu-preview-header'
+import { MemberRow } from '@/app/workspace/[workspaceId]/settings/components/member-list/member-list'
+import { SegmentedMeter } from '@/app/workspace/[workspaceId]/settings/components/segmented-meter/segmented-meter'
+
+const MEMBERS = [
+  { name: 'Morgan', email: 'morgan@example.com', role: 'Owner' },
+  { name: 'Alex', email: 'alex@example.com', role: 'Admin' },
+  { name: 'Jamie', email: 'jamie@example.com', role: 'Member' },
+] as const
+
+interface EnterpriseMenuPreviewProps {
+  layout?: 'menu' | 'hero'
+}
+
+/** Production member rows, role chips, and allowance meter make organization controls tangible. */
+export function EnterpriseMenuPreview({ layout = 'menu' }: EnterpriseMenuPreviewProps) {
+  return (
+    <MenuPreviewFrame kind='enterprise' layout={layout}>
+      <div
+        className={cn(
+          'w-[566px] overflow-hidden rounded-[10px] border border-[var(--border)] bg-[var(--bg)] shadow-xs',
+          layout === 'hero' && '@max-[640px]:w-[calc(100cqw-48px)] min-w-[340px]'
+        )}
+      >
+        <MenuPreviewHeader
+          icon={Building}
+          title='Organization'
+          actions={
+            <>
+              <Chip active>Members</Chip>
+              <Chip variant='outline' leftIcon={Plus}>
+                Invite
+              </Chip>
+            </>
+          }
+        />
+        <div className='px-4 pt-4 pb-5'>
+          <div className='-mx-2 flex flex-col gap-1'>
+            {MEMBERS.map((member) => (
+              <MemberRow
+                key={member.name}
+                name={member.name}
+                email={member.email}
+                image={null}
+                status=''
+                roleControl={
+                  <ChipDropdown
+                    value={member.role}
+                    options={[{ value: member.role, label: member.role }]}
+                    disabled={member.role === 'Owner'}
+                    matchTriggerWidth={false}
+                  />
+                }
+                menu={<MoreHorizontal className='size-[14px] text-[var(--text-icon)]' />}
+              />
+            ))}
+          </div>
+          <div className='mt-4 border-[var(--border)] border-t pt-4'>
+            <div className='mb-3 flex items-center justify-between text-[13px]'>
+              <span className='text-[var(--text-body)]'>Workspace usage</span>
+              <span className='text-[var(--text-muted)] tabular-nums'>$1,240 of $2,000</span>
+            </div>
+            <SegmentedMeter used={1240} total={2000} segments={28} />
+          </div>
+        </div>
+      </div>
+    </MenuPreviewFrame>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/enterprise-menu-preview/index.ts b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/enterprise-menu-preview/index.ts
new file mode 100644
index 00000000000..ab7d40d20cb
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/enterprise-menu-preview/index.ts
@@ -0,0 +1 @@
+export { EnterpriseMenuPreview } from './enterprise-menu-preview'
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/files-menu-preview/files-menu-preview.tsx b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/files-menu-preview/files-menu-preview.tsx
new file mode 100644
index 00000000000..61a40ccac3f
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/files-menu-preview/files-menu-preview.tsx
@@ -0,0 +1,124 @@
+import { Chip } from '@sim/emcn'
+import { ArrowUpDown, Files, Folder, ListFilter, Search } from '@sim/emcn/icons'
+import { CsvIcon, DocxIcon, PdfIcon } from '@/components/icons/document-icons'
+import { MenuPreviewFrame } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-frame'
+import {
+  MenuPreviewHeader,
+  MenuPreviewToolbar,
+} from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-header/menu-preview-header'
+
+interface FilesMenuPreviewProps {
+  layout?: 'menu' | 'hero'
+}
+
+const FILES = [
+  {
+    name: 'Brand assets',
+    icon: Folder,
+    size: '24.6 MB',
+    type: 'Folder',
+    created: 'Sep 4',
+    owner: 'Morgan',
+  },
+  {
+    name: 'Weekly report.pdf',
+    icon: PdfIcon,
+    size: '1.8 MB',
+    type: 'PDF',
+    created: 'Sep 4',
+    owner: 'Morgan',
+  },
+  {
+    name: 'Qualified leads.csv',
+    icon: CsvIcon,
+    size: '96 KB',
+    type: 'CSV',
+    created: 'Sep 4',
+    owner: 'Alex',
+  },
+  {
+    name: 'Product brief.docx',
+    icon: DocxIcon,
+    size: '324 KB',
+    type: 'DOCX',
+    created: 'Sep 3',
+    owner: 'Jordan',
+  },
+  {
+    name: 'Brand guidelines.pdf',
+    icon: PdfIcon,
+    size: '5.1 MB',
+    type: 'PDF',
+    created: 'Sep 2',
+    owner: 'Morgan',
+  },
+] as const
+
+/** A native Files resource list with the product’s file types and columns, without creation actions. */
+export function FilesMenuPreview({ layout = 'menu' }: FilesMenuPreviewProps) {
+  return (
+    <MenuPreviewFrame kind='files' layout={layout}>
+      <div className='w-[660px] overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--bg)] font-normal text-[13px] text-[var(--text-body)] shadow-xs'>
+        <MenuPreviewHeader icon={Files} title='Files' />
+        <MenuPreviewToolbar>
+          <span className='mr-auto ml-2 flex items-center gap-2 text-[var(--text-muted)]'>
+            <Search className='size-[14px]' />
+            Search files...
+          </span>
+          <Chip leftIcon={ListFilter} tabIndex={-1}>
+            Filter
+          </Chip>
+          <Chip leftIcon={ArrowUpDown} tabIndex={-1}>
+            Sort
+          </Chip>
+        </MenuPreviewToolbar>
+        <table className='w-full table-fixed border-collapse whitespace-nowrap text-left'>
+          <colgroup>
+            <col className='w-[256px]' />
+            <col className='w-[78px]' />
+            <col className='w-[98px]' />
+            <col className='w-[94px]' />
+            <col className='w-[132px]' />
+          </colgroup>
+          <thead>
+            <tr className='h-9 border-[var(--border)] border-b text-[var(--text-muted)]'>
+              <th className='pl-4 font-normal'>Name</th>
+              <th className='font-normal'>Size</th>
+              <th className='font-normal'>Type</th>
+              <th className='font-normal'>Created</th>
+              <th className='font-normal'>Owner</th>
+            </tr>
+          </thead>
+          <tbody>
+            {FILES.map(({ name, icon: Icon, size, type, created, owner }) => (
+              <tr key={name} className='h-11 text-[var(--text-secondary)]'>
+                <td className='pl-4 text-[var(--text-body)]'>
+                  <span className='flex items-center gap-2.5'>
+                    <Icon className='size-[14px] shrink-0 text-[var(--text-icon)]' />
+                    <span className='truncate'>{name}</span>
+                  </span>
+                </td>
+                <td className='tabular-nums'>{size}</td>
+                <td>
+                  <span className='flex items-center gap-2'>
+                    <Icon className='size-[14px] shrink-0 text-[var(--text-icon)]' />
+                    {type}
+                  </span>
+                </td>
+                <td>{created}</td>
+                <td>
+                  <span className='flex items-center gap-2'>
+                    <span className='flex size-[18px] items-center justify-center rounded-full bg-[var(--surface-3)] text-[10px]'>
+                      {owner[0]}
+                    </span>
+                    {owner}
+                  </span>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </MenuPreviewFrame>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/files-menu-preview/index.ts b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/files-menu-preview/index.ts
new file mode 100644
index 00000000000..3bfd7476c8d
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/files-menu-preview/index.ts
@@ -0,0 +1 @@
+export { FilesMenuPreview } from './files-menu-preview'
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/integrations-menu-preview/index.ts b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/integrations-menu-preview/index.ts
new file mode 100644
index 00000000000..079ac769206
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/integrations-menu-preview/index.ts
@@ -0,0 +1 @@
+export { IntegrationsMenuPreview } from './integrations-menu-preview'
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/integrations-menu-preview/integrations-menu-preview.tsx b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/integrations-menu-preview/integrations-menu-preview.tsx
new file mode 100644
index 00000000000..b902ad43cbf
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/integrations-menu-preview/integrations-menu-preview.tsx
@@ -0,0 +1,51 @@
+import { Integration, Search } from '@sim/emcn/icons'
+import {
+  GithubIcon,
+  GmailIcon,
+  GoogleDriveIcon,
+  LinearIcon,
+  NotionIcon,
+  SlackIcon,
+} from '@/components/icons'
+import { MenuPreviewFrame } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-frame'
+import {
+  MenuPreviewHeader,
+  MenuPreviewToolbar,
+} from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-header/menu-preview-header'
+
+const INTEGRATIONS = [
+  { name: 'Slack', icon: SlackIcon },
+  { name: 'Notion', icon: NotionIcon },
+  { name: 'Google Drive', icon: GoogleDriveIcon },
+  { name: 'GitHub', icon: GithubIcon },
+  { name: 'Gmail', icon: GmailIcon },
+  { name: 'Linear', icon: LinearIcon },
+] as const
+
+/** Minimal app tiles in a native directory crop that continues beyond the preview edges. */
+export function IntegrationsMenuPreview() {
+  return (
+    <MenuPreviewFrame kind='integrations'>
+      <div className='min-h-[400px] w-[620px] overflow-hidden rounded-[10px] border border-[var(--border)] bg-[var(--bg)] font-normal text-[var(--text-body)] text-small shadow-xs'>
+        <MenuPreviewHeader icon={Integration} title='Integrations' />
+        <MenuPreviewToolbar>
+          <span className='ml-2 flex items-center gap-2 text-[var(--text-muted)]'>
+            <Search className='size-[14px]' />
+            Search integrations...
+          </span>
+        </MenuPreviewToolbar>
+        <div className='grid grid-cols-3 gap-3 p-4'>
+          {INTEGRATIONS.map(({ name, icon: Icon }) => (
+            <div
+              key={name}
+              className='flex h-[72px] min-w-0 items-center gap-3 rounded-lg border border-[var(--border)] bg-[var(--surface-1)] px-4'
+            >
+              <Icon className='size-7 shrink-0' />
+              <div className='truncate text-[var(--text-primary)] text-base'>{name}</div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </MenuPreviewFrame>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/knowledge-menu-preview/index.ts b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/knowledge-menu-preview/index.ts
new file mode 100644
index 00000000000..f49f26f20dd
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/knowledge-menu-preview/index.ts
@@ -0,0 +1 @@
+export { KnowledgeMenuPreview } from './knowledge-menu-preview'
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/knowledge-menu-preview/knowledge-menu-preview.tsx b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/knowledge-menu-preview/knowledge-menu-preview.tsx
new file mode 100644
index 00000000000..d03ca17b04c
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/knowledge-menu-preview/knowledge-menu-preview.tsx
@@ -0,0 +1,128 @@
+import { Badge, Chip } from '@sim/emcn'
+import { ArrowUpDown, ChevronRight, Database, ListFilter, Search } from '@sim/emcn/icons'
+import { DocxIcon, PdfIcon } from '@/components/icons/document-icons'
+import { MenuPreviewFrame } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-frame'
+import {
+  MenuPreviewHeader,
+  MenuPreviewToolbar,
+} from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-header/menu-preview-header'
+
+interface KnowledgeMenuPreviewProps {
+  layout?: 'menu' | 'hero'
+}
+
+const DOCUMENTS = [
+  {
+    name: 'Product handbook.pdf',
+    icon: PdfIcon,
+    size: '1.2 MB',
+    tokens: '24.8k',
+    chunks: '64',
+    uploaded: 'Sep 4',
+  },
+  {
+    name: 'Support playbook.docx',
+    icon: DocxIcon,
+    size: '428 KB',
+    tokens: '18.2k',
+    chunks: '42',
+    uploaded: 'Sep 3',
+  },
+  {
+    name: 'Getting started.pdf',
+    icon: PdfIcon,
+    size: '864 KB',
+    tokens: '12.6k',
+    chunks: '31',
+    uploaded: 'Sep 3',
+  },
+  {
+    name: 'Security overview.pdf',
+    icon: PdfIcon,
+    size: '640 KB',
+    tokens: '9.4k',
+    chunks: '26',
+    uploaded: 'Sep 2',
+  },
+  {
+    name: 'Release notes.docx',
+    icon: DocxIcon,
+    size: '218 KB',
+    tokens: '6.8k',
+    chunks: '18',
+    uploaded: 'Sep 1',
+  },
+] as const
+
+/** The production knowledge document list, cropped around its content and indexing metadata. */
+export function KnowledgeMenuPreview({ layout = 'menu' }: KnowledgeMenuPreviewProps) {
+  return (
+    <MenuPreviewFrame kind='knowledge' layout={layout}>
+      <div className='w-[624px] overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--bg)] font-normal text-[13px] text-[var(--text-body)] shadow-xs'>
+        <MenuPreviewHeader
+          icon={Database}
+          title={
+            <>
+              <span>Knowledge Base</span>
+              <ChevronRight className='size-3 text-[var(--text-muted)]' />
+              <span>Support</span>
+            </>
+          }
+        />
+        <MenuPreviewToolbar>
+          <span className='mr-auto ml-2 flex items-center gap-2 text-[var(--text-muted)]'>
+            <Search className='size-[14px]' />
+            Search documents...
+          </span>
+          <Chip leftIcon={ListFilter} tabIndex={-1}>
+            Filter
+          </Chip>
+          <Chip leftIcon={ArrowUpDown} tabIndex={-1}>
+            Sort
+          </Chip>
+        </MenuPreviewToolbar>
+        <table className='w-full table-fixed border-collapse whitespace-nowrap text-left'>
+          <colgroup>
+            <col className='w-[222px]' />
+            <col className='w-[70px]' />
+            <col className='w-[68px]' />
+            <col className='w-[68px]' />
+            <col className='w-[84px]' />
+            <col className='w-[110px]' />
+          </colgroup>
+          <thead>
+            <tr className='h-9 border-[var(--border)] border-b text-[var(--text-muted)]'>
+              <th className='pl-4 font-normal'>Name</th>
+              <th className='font-normal'>Size</th>
+              <th className='font-normal'>Tokens</th>
+              <th className='font-normal'>Chunks</th>
+              <th className='font-normal'>Uploaded</th>
+              <th className='font-normal'>Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            {DOCUMENTS.map(({ name, icon: Icon, size, tokens, chunks, uploaded }) => (
+              <tr key={name} className='h-11 text-[var(--text-secondary)]'>
+                <td className='pl-4 text-[var(--text-body)]'>
+                  <span className='flex items-center gap-2.5'>
+                    <Icon className='size-[14px] shrink-0 text-[var(--text-icon)]' />
+                    <span className='truncate'>{name}</span>
+                  </span>
+                </td>
+                <td className='tabular-nums'>{size}</td>
+                <td className='tabular-nums'>{tokens}</td>
+                <td className='tabular-nums'>{chunks}</td>
+                <td>{uploaded}</td>
+                <td>
+                  <Badge variant='gray-secondary' size='sm'>
+                    Enabled
+                  </Badge>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </MenuPreviewFrame>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/library-menu-preview/index.ts b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/library-menu-preview/index.ts
new file mode 100644
index 00000000000..e8650a5b0fe
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/library-menu-preview/index.ts
@@ -0,0 +1 @@
+export { LibraryMenuPreview } from './library-menu-preview'
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/library-menu-preview/library-menu-preview.tsx b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/library-menu-preview/library-menu-preview.tsx
new file mode 100644
index 00000000000..776d1508a92
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/library-menu-preview/library-menu-preview.tsx
@@ -0,0 +1,34 @@
+import { Library } from '@sim/emcn/icons'
+import { MenuPreviewFrame } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-frame'
+import { MenuPreviewHeader } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-header/menu-preview-header'
+
+const GUIDES = [
+  { title: 'How to Build AI Agents With Sim', category: 'How-to' },
+  { title: 'AI Agent vs Chatbot: Understanding the Differences', category: 'Comparison' },
+  { title: 'How to Turn a Workflow Into a Reusable MCP Tool', category: 'How-to' },
+  { title: '10 AI Agent Ideas for Real Impact', category: 'Ideas' },
+] as const
+
+/** A minimal grid of published guides whose lower row continues beyond the preview crop. */
+export function LibraryMenuPreview() {
+  return (
+    <MenuPreviewFrame kind='library'>
+      <div className='min-h-[400px] w-[620px] overflow-hidden rounded-[10px] border border-[var(--border)] bg-[var(--bg)] font-normal text-[var(--text-body)] text-small shadow-xs'>
+        <MenuPreviewHeader icon={Library} title='Library' />
+        <div className='grid grid-cols-2 gap-3 p-4'>
+          {GUIDES.map(({ title, category }) => (
+            <div
+              key={title}
+              className='h-[140px] rounded-md border border-[var(--border)] bg-[var(--surface-2)] p-4'
+            >
+              <p className='text-[var(--text-muted)] text-small'>{category}</p>
+              <p className='mt-4 max-w-[230px] text-[var(--text-primary)] text-base leading-5'>
+                {title}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </MenuPreviewFrame>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/logs-menu-preview/components/logs-run-graph/logs-run-graph.tsx b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/logs-menu-preview/components/logs-run-graph/logs-run-graph.tsx
new file mode 100644
index 00000000000..bcbdc357cb2
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/logs-menu-preview/components/logs-run-graph/logs-run-graph.tsx
@@ -0,0 +1,84 @@
+'use client'
+
+import { useState } from 'react'
+import { cn, Tooltip } from '@sim/emcn'
+
+const BUCKET_HEIGHTS = {
+  3: 'h-[30%]',
+  4: 'h-[40%]',
+  5: 'h-1/2',
+  6: 'h-[60%]',
+  7: 'h-[70%]',
+  8: 'h-[80%]',
+  9: 'h-[90%]',
+  10: 'h-full',
+} as const
+
+interface LogsRunGraphProps {
+  buckets: readonly { hour: number; count: keyof typeof BUCKET_HEIGHTS }[]
+}
+
+/** One floating tooltip follows the pointer across static hourly bars. */
+export function LogsRunGraph({ buckets }: LogsRunGraphProps) {
+  const [activeIndex, setActiveIndex] = useState(0)
+  const bucket = buckets[activeIndex]
+  const timeRange =
+    bucket.hour === 23 ? 'Last hour' : `${24 - bucket.hour}–${23 - bucket.hour} hours ago`
+
+  return (
+    <Tooltip.Root preferAbove>
+      <Tooltip.Trigger
+        type='button'
+        data-run-overview-graph
+        aria-label={`Hourly successful runs. ${timeRange}: ${bucket.count} succeeded. Use left and right arrows to explore.`}
+        className='pointer-events-auto mt-3 flex h-12 w-full cursor-default items-end gap-0.5 rounded-sm outline-none focus-visible:outline-2 focus-visible:outline-[var(--text-icon)] focus-visible:outline-offset-4'
+        onMouseDown={(event) => event.preventDefault()}
+        onKeyDown={(event) => {
+          switch (event.key) {
+            case 'ArrowLeft':
+              setActiveIndex(Math.max(0, activeIndex - 1))
+              break
+            case 'ArrowRight':
+              setActiveIndex(Math.min(buckets.length - 1, activeIndex + 1))
+              break
+            case 'Home':
+              setActiveIndex(0)
+              break
+            case 'End':
+              setActiveIndex(buckets.length - 1)
+              break
+            default:
+              return
+          }
+          event.preventDefault()
+        }}
+      >
+        {buckets.map((item, index) => (
+          <span
+            key={item.hour}
+            aria-hidden='true'
+            data-run-count={item.count}
+            className='flex h-full min-w-0 flex-1 items-end'
+            onPointerEnter={() => setActiveIndex(index)}
+          >
+            <span
+              data-run-bar
+              className={cn('block w-full rounded-[2px] bg-[#525252]', BUCKET_HEIGHTS[item.count])}
+            />
+          </span>
+        ))}
+      </Tooltip.Trigger>
+      <Tooltip.Content offset={10}>
+        <div className='flex flex-col gap-1 whitespace-nowrap'>
+          <span className='text-[var(--text-secondary)]'>{timeRange}</span>
+          <span className='flex items-center gap-1.5 tabular-nums'>
+            <span className='size-1.5 rounded-full bg-[#525252]' />
+            {bucket.count} succeeded
+            <span className='text-[var(--text-secondary)]'>·</span>$
+            {(bucket.count * 0.11).toFixed(2)}
+          </span>
+        </div>
+      </Tooltip.Content>
+    </Tooltip.Root>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/logs-menu-preview/index.ts b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/logs-menu-preview/index.ts
new file mode 100644
index 00000000000..8454ba41927
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/logs-menu-preview/index.ts
@@ -0,0 +1 @@
+export { LogsMenuPreview } from './logs-menu-preview'
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/logs-menu-preview/logs-menu-preview.tsx b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/logs-menu-preview/logs-menu-preview.tsx
new file mode 100644
index 00000000000..30402b531a6
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/logs-menu-preview/logs-menu-preview.tsx
@@ -0,0 +1,79 @@
+import { Chip, cn } from '@sim/emcn'
+import { ChevronDown, Search } from '@sim/emcn/icons'
+import { LogsRunGraph } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/logs-menu-preview/components/logs-run-graph/logs-run-graph'
+import { MenuPreviewFrame } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-frame'
+import { MenuPreviewHeader } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-header/menu-preview-header'
+
+interface LogsMenuPreviewProps {
+  layout?: 'menu' | 'hero'
+}
+
+/** Successful runs grouped into hourly buckets, following the earlier RunHealth overview. */
+const RUN_COUNTS = [
+  3, 5, 4, 6, 4, 7, 5, 6, 8, 5, 7, 6, 9, 6, 8, 7, 10, 6, 8, 7, 9, 8, 6, 7,
+] as const
+const RUN_BUCKETS = RUN_COUNTS.map((count, hour) => ({ hour, count }))
+const COMPLETED_RUNS = RUN_COUNTS.reduce<number>((total, count) => total + count, 0)
+
+const SUMMARY_STATS = [
+  { label: 'Success rate', value: '100%' },
+  { label: 'Median run', value: '21.8s' },
+  { label: 'Completed', value: String(COMPLETED_RUNS) },
+  { label: 'Cost', value: `$${(COMPLETED_RUNS * 0.11).toFixed(2)}` },
+] as const
+
+/** A successful-only sample of the earlier high-level Logs overview and run-volume graph. */
+export function LogsMenuPreview({ layout = 'menu' }: LogsMenuPreviewProps) {
+  return (
+    <MenuPreviewFrame kind='logs' layout={layout} interactive>
+      <div
+        className={cn(
+          'w-[560px] overflow-hidden rounded-[10px] border border-[var(--border)] bg-[var(--bg)] font-normal text-[var(--text-body)] text-small shadow-xs',
+          layout === 'hero' && 'max-sm:w-[calc(100vw-48px)]'
+        )}
+      >
+        <div aria-hidden='true' inert>
+          <div className='flex h-11 items-center gap-1 px-2'>
+            <Chip leftIcon={Search} tabIndex={-1}>
+              Toolbar
+            </Chip>
+            <Chip tabIndex={-1}>Editor</Chip>
+            <Chip active tabIndex={-1}>
+              Logs
+            </Chip>
+          </div>
+          <MenuPreviewHeader
+            title='Run overview'
+            actions={
+              <Chip rightIcon={ChevronDown} tabIndex={-1}>
+                Last 24 hours
+              </Chip>
+            }
+          />
+        </div>
+        <div className='px-4 py-3'>
+          <div className='grid grid-cols-2 gap-1.5'>
+            {SUMMARY_STATS.map((stat) => (
+              <div
+                key={stat.label}
+                className='min-w-0 rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-2 py-1.5'
+              >
+                <p className='text-[var(--text-tertiary)] text-caption'>{stat.label}</p>
+                <p className='text-[var(--text-primary)] text-base tabular-nums'>{stat.value}</p>
+              </div>
+            ))}
+          </div>
+          <LogsRunGraph buckets={RUN_BUCKETS} />
+          <div className='mt-1.5 flex justify-between text-[var(--text-secondary)] text-caption'>
+            <span>24 hours ago</span>
+            <span>Now</span>
+          </div>
+          <div className='mt-3 flex items-center gap-1.5 text-[var(--text-secondary)] text-caption'>
+            <span className='size-[6px] rounded-full bg-[var(--text-primary)]' />
+            All runs succeeded
+          </div>
+        </div>
+      </div>
+    </MenuPreviewFrame>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-frame/index.ts b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-frame/index.ts
new file mode 100644
index 00000000000..3757bea7f8c
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-frame/index.ts
@@ -0,0 +1 @@
+export { MenuPreviewFrame } from './menu-preview-frame'
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-frame/menu-preview-frame.tsx b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-frame/menu-preview-frame.tsx
new file mode 100644
index 00000000000..16d2726f5ff
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-frame/menu-preview-frame.tsx
@@ -0,0 +1,45 @@
+import type { ReactNode } from 'react'
+import { cn } from '@sim/emcn'
+import type { NavMenuPreviewKind } from '@/app/(landing)/components/navbar/components/nav-menu-chip/types'
+import { EdgeFade } from '@/app/(landing)/components/shared/edge-fade'
+
+interface MenuPreviewFrameProps {
+  kind: NavMenuPreviewKind
+  children: ReactNode
+  /** Opt in only when a preview contains real hover or keyboard interaction. */
+  interactive?: boolean
+  layout?: 'menu' | 'hero'
+}
+
+/** Navigation crops and open hero stages share the same product UI and edge treatment. */
+export function MenuPreviewFrame({
+  kind,
+  children,
+  interactive = false,
+  layout = 'menu',
+}: MenuPreviewFrameProps) {
+  const isHero = layout === 'hero'
+
+  return (
+    <div
+      aria-hidden={interactive ? undefined : true}
+      inert={!interactive}
+      data-menu-preview={kind}
+      className={cn(
+        'pointer-events-none absolute inset-0 isolate select-none overflow-hidden [container-type:inline-size]',
+        isHero ? 'bg-[var(--bg)]' : 'bg-[var(--surface-3)] [--preview-content-width:576px]'
+      )}
+    >
+      <div
+        className={cn(
+          isHero
+            ? '-translate-x-1/2 absolute top-20 @max-[640px]:left-6 left-1/2 w-max @max-[640px]:translate-x-0 max-sm:top-6'
+            : 'relative w-[640px] origin-top-left p-10 [scale:min(1,tan(atan2(100cqw,640px)))]'
+        )}
+      >
+        {children}
+      </div>
+      <EdgeFade ground={isHero ? 'canvas' : 'surface'} depth='preview' />
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-header/menu-preview-header.tsx b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-header/menu-preview-header.tsx
new file mode 100644
index 00000000000..8de7b766812
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-header/menu-preview-header.tsx
@@ -0,0 +1,54 @@
+import type { ComponentType, ReactNode } from 'react'
+import { cn } from '@sim/emcn'
+
+interface MenuPreviewHeaderProps {
+  icon?: ComponentType<{ className?: string }>
+  title: ReactNode
+  actions?: ReactNode
+  size?: 'default' | 'table'
+}
+
+interface MenuPreviewToolbarProps {
+  children: ReactNode
+}
+
+/** Preview frames can constrain header actions to their visible crop. */
+export function MenuPreviewHeader({
+  icon: Icon,
+  title,
+  actions,
+  size = 'default',
+}: MenuPreviewHeaderProps) {
+  return (
+    <div
+      data-menu-preview-header
+      className={cn(
+        'shrink-0 border-[var(--border)] border-b',
+        size === 'table' ? 'box-content h-10' : 'h-11'
+      )}
+    >
+      <div className='flex size-full max-w-[var(--preview-content-width,100%)] items-center gap-2 px-4'>
+        {Icon && <Icon className='size-[14px] shrink-0 text-[var(--text-icon)]' />}
+        <div className='flex min-w-0 flex-1 items-center gap-2 whitespace-nowrap text-[var(--text-primary)] text-base'>
+          {title}
+        </div>
+        {actions && (
+          <div className='ml-auto flex shrink-0 items-center gap-1 text-[var(--text-secondary)] text-small'>
+            {actions}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+/** Chip padding brings toolbar labels onto the title row's 16px inset. */
+export function MenuPreviewToolbar({ children }: MenuPreviewToolbarProps) {
+  return (
+    <div data-menu-preview-toolbar className='h-[38px] border-[var(--border)] border-b'>
+      <div className='flex size-full max-w-[var(--preview-content-width,100%)] items-center gap-1 px-2 text-small'>
+        {children}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/models-menu-preview/index.ts b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/models-menu-preview/index.ts
new file mode 100644
index 00000000000..cf1079e9ea5
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/models-menu-preview/index.ts
@@ -0,0 +1 @@
+export { ModelsMenuPreview } from './models-menu-preview'
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/models-menu-preview/models-menu-preview.tsx b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/models-menu-preview/models-menu-preview.tsx
new file mode 100644
index 00000000000..505130f40c8
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/models-menu-preview/models-menu-preview.tsx
@@ -0,0 +1,41 @@
+import { BrainCircuit, Search } from '@sim/emcn/icons'
+import { AnthropicIcon, GeminiIcon, OpenAIIcon } from '@/components/icons'
+import { MenuPreviewFrame } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-frame'
+import {
+  MenuPreviewHeader,
+  MenuPreviewToolbar,
+} from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-header/menu-preview-header'
+
+const MODELS = [
+  { name: 'GPT-6 Astra', provider: 'OpenAI', icon: OpenAIIcon },
+  { name: 'Claude Sonnet 5', provider: 'Anthropic', icon: AnthropicIcon },
+  { name: 'Gemini 3.6 Flash', provider: 'Google', icon: GeminiIcon },
+] as const
+
+/** A quiet model directory extending past the preview's right and bottom edges. */
+export function ModelsMenuPreview() {
+  return (
+    <MenuPreviewFrame kind='models'>
+      <div className='min-h-[400px] w-[620px] overflow-hidden rounded-[10px] border border-[var(--border)] bg-[var(--bg)] font-normal text-[var(--text-body)] text-small shadow-xs'>
+        <MenuPreviewHeader icon={BrainCircuit} title='Models' />
+        <MenuPreviewToolbar>
+          <span className='ml-2 flex items-center gap-2 text-[var(--text-muted)]'>
+            <Search className='size-[14px]' />
+            Search models...
+          </span>
+        </MenuPreviewToolbar>
+        <div className='divide-y divide-[var(--border)]'>
+          {MODELS.map(({ name, provider, icon: Icon }) => (
+            <div key={name} className='flex h-[76px] items-center gap-3 px-4'>
+              <Icon className='size-7 shrink-0 text-[var(--text-primary)]' />
+              <div>
+                <p className='text-[var(--text-primary)] text-base'>{name}</p>
+                <p className='mt-1 text-[var(--text-muted)]'>{provider}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </MenuPreviewFrame>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/overview-menu-preview/index.ts b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/overview-menu-preview/index.ts
new file mode 100644
index 00000000000..0420fe2cd29
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/overview-menu-preview/index.ts
@@ -0,0 +1 @@
+export { OverviewMenuPreview } from './overview-menu-preview'
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/overview-menu-preview/overview-menu-preview.module.css b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/overview-menu-preview/overview-menu-preview.module.css
new file mode 100644
index 00000000000..742b65b184a
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/overview-menu-preview/overview-menu-preview.module.css
@@ -0,0 +1,53 @@
+/** Normalized paths keep the draw speed consistent across both marks. */
+.mark path {
+  stroke-dasharray: 1;
+  stroke-dashoffset: 0;
+}
+
+.second {
+  --overview-mark-delay: 680ms;
+}
+
+.mark [data-integrate-layer="middle-plane"],
+.mark [data-integrate-layer="middle-port"],
+.mark [data-monitor-layer="base-bar"] {
+  --overview-layer-delay: 160ms;
+}
+
+.mark [data-integrate-layer="top-plane"],
+.mark [data-monitor-layer="inner-low"],
+.mark [data-monitor-layer="inner-high"] {
+  --overview-layer-delay: 320ms;
+}
+
+.mark [data-integrate-layer="top-socket"],
+.mark [data-monitor-layer="left-panel"],
+.mark [data-monitor-layer="right-panel"] {
+  --overview-layer-delay: 480ms;
+}
+
+.mark [data-monitor-layer="top-lid"] {
+  --overview-layer-delay: 640ms;
+}
+
+/** The menu stays mounted while closed; opening it restarts the reveal. */
+@media (prefers-reduced-motion: no-preference) {
+  :global(#primary-navigation-mega-menu[aria-hidden="false"]) .mark path {
+    animation: contour-draw 1400ms cubic-bezier(0.4, 0, 0.2, 1) both;
+    animation-delay: calc(var(--overview-mark-delay, 0ms) + var(--overview-layer-delay, 0ms));
+  }
+}
+
+@keyframes contour-draw {
+  0% {
+    opacity: 0;
+    stroke-dashoffset: 1;
+  }
+  3% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+    stroke-dashoffset: 0;
+  }
+}
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/overview-menu-preview/overview-menu-preview.tsx b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/overview-menu-preview/overview-menu-preview.tsx
new file mode 100644
index 00000000000..ec222c7484f
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/overview-menu-preview/overview-menu-preview.tsx
@@ -0,0 +1,40 @@
+import { cn } from '@sim/emcn'
+import styles from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/overview-menu-preview/overview-menu-preview.module.css'
+import {
+  IsoIntegrateIllustration,
+  IsoMonitorIllustration,
+} from '@/app/(landing)/components/platform-suite/components/iso-marks'
+import { EdgeFade } from '@/app/(landing)/components/shared/edge-fade'
+
+interface OverviewMenuPreviewProps {
+  layout?: 'menu' | 'hero'
+}
+
+/** The homepage's Build and Govern marks, reduced to a quiet row of drawn contours. */
+export function OverviewMenuPreview({ layout = 'menu' }: OverviewMenuPreviewProps) {
+  const isHero = layout === 'hero'
+
+  return (
+    <div
+      aria-hidden='true'
+      inert
+      data-menu-preview='overview'
+      className={cn(
+        'pointer-events-none absolute inset-0 flex select-none items-center justify-center overflow-hidden px-10 [container-type:inline-size]',
+        isHero ? 'gap-24 bg-[var(--bg)] max-sm:gap-10 max-sm:px-6' : 'gap-10 bg-[var(--surface-3)]'
+      )}
+    >
+      <IsoIntegrateIllustration
+        size={212}
+        variant='outline'
+        className={cn('size-[min(33cqw,212px)]', styles.mark)}
+      />
+      <IsoMonitorIllustration
+        size={212}
+        variant='outline'
+        className={cn('size-[min(33cqw,212px)]', styles.mark, styles.second)}
+      />
+      {isHero && <EdgeFade ground='canvas' depth='preview' />}
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/tables-menu-preview/index.ts b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/tables-menu-preview/index.ts
new file mode 100644
index 00000000000..64a068a337b
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/tables-menu-preview/index.ts
@@ -0,0 +1 @@
+export { TablesMenuPreview } from './tables-menu-preview'
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/tables-menu-preview/tables-menu-preview.tsx b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/tables-menu-preview/tables-menu-preview.tsx
new file mode 100644
index 00000000000..42d4666e039
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/tables-menu-preview/tables-menu-preview.tsx
@@ -0,0 +1,103 @@
+import { Badge, Chip } from '@sim/emcn'
+import {
+  ChevronDown,
+  Columns3,
+  ListFilter,
+  Plus,
+  Table,
+  TagIcon,
+  TypeNumber,
+  TypeText,
+} from '@sim/emcn/icons'
+import { MenuPreviewFrame } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-frame'
+import {
+  MenuPreviewHeader,
+  MenuPreviewToolbar,
+} from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-header/menu-preview-header'
+
+interface TablesMenuPreviewProps {
+  layout?: 'menu' | 'hero'
+}
+
+const LEADS = [
+  { company: 'Acme Corp', score: 94, status: 'Qualified', contact: 'Alice Johnson' },
+  { company: 'Northstar', score: 88, status: 'Qualified', contact: 'Daniel Park' },
+  { company: 'Meridian', score: 72, status: 'Review', contact: 'Eva Chen' },
+  { company: 'Forma', score: 91, status: 'Qualified', contact: 'Sam Rivera' },
+  { company: 'Brightwave', score: 86, status: 'Qualified', contact: 'Morgan Lee' },
+] as const
+
+const COLUMNS = [
+  { name: 'Company', icon: TypeText },
+  { name: 'Score', icon: TypeNumber },
+  { name: 'Status', icon: TagIcon },
+  { name: 'Contact', icon: TypeText },
+] as const
+
+/** A cropped Tables editor with production column types, ruled cells, and neutral select values. */
+export function TablesMenuPreview({ layout = 'menu' }: TablesMenuPreviewProps) {
+  return (
+    <MenuPreviewFrame kind='tables' layout={layout}>
+      <div className='w-[620px] overflow-hidden rounded-[10px] border border-[var(--border)] bg-[var(--bg)] text-[var(--text-body)] text-small shadow-xs'>
+        <MenuPreviewHeader icon={Table} title='Qualified leads' actions='5 rows' />
+        <MenuPreviewToolbar>
+          <Chip rightIcon={ChevronDown}>All records</Chip>
+          <Chip leftIcon={ListFilter}>Filter</Chip>
+          <span className='ml-auto'>
+            <Chip leftIcon={Columns3}>Columns</Chip>
+          </span>
+        </MenuPreviewToolbar>
+        <table className='w-full table-fixed border-collapse text-left'>
+          <colgroup>
+            <col className='w-10' />
+            <col className='w-[174px]' />
+            <col className='w-[82px]' />
+            <col className='w-[138px]' />
+            <col className='w-[184px]' />
+          </colgroup>
+          <thead>
+            <tr className='h-[34px] border-[var(--border)] border-b'>
+              <th className='border-[var(--border)] border-r text-center font-normal text-[var(--text-muted)]'>
+                #
+              </th>
+              {COLUMNS.map(({ name, icon: Icon }) => (
+                <th
+                  key={name}
+                  className='border-[var(--border)] border-r px-2.5 font-normal last:border-r-0'
+                >
+                  <span className='flex items-center gap-1.5'>
+                    <Icon className='size-[14px] text-[var(--text-icon)]' />
+                    {name}
+                  </span>
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {LEADS.map((lead, index) => (
+              <tr key={lead.company} className='h-[37px] border-[var(--border)] border-b'>
+                <td className='border-[var(--border)] border-r text-center text-[var(--text-muted)] tabular-nums'>
+                  {index + 1}
+                </td>
+                <td className='border-[var(--border)] border-r px-2.5'>{lead.company}</td>
+                <td className='border-[var(--border)] border-r px-2.5 tabular-nums'>
+                  {lead.score}
+                </td>
+                <td className='border-[var(--border)] border-r px-2.5'>
+                  <Badge variant='gray-secondary' size='sm'>
+                    {lead.status}
+                  </Badge>
+                </td>
+                <td className='truncate px-2.5 text-[var(--text-secondary)]'>{lead.contact}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        <div className='flex h-9 items-center gap-2 px-3 text-[var(--text-muted)]'>
+          <Plus className='size-[14px]' />
+          <span>New row</span>
+        </div>
+      </div>
+    </MenuPreviewFrame>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/workflow-menu-preview/index.ts b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/workflow-menu-preview/index.ts
new file mode 100644
index 00000000000..9fed3e20d03
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/workflow-menu-preview/index.ts
@@ -0,0 +1 @@
+export { WorkflowMenuPreview } from './workflow-menu-preview'
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/workflow-menu-preview/workflow-menu-preview.test.tsx b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/workflow-menu-preview/workflow-menu-preview.test.tsx
new file mode 100644
index 00000000000..aa7ac68b06d
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/workflow-menu-preview/workflow-menu-preview.test.tsx
@@ -0,0 +1,135 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, type ComponentProps, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { WorkflowMenuPreview } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/workflow-menu-preview/workflow-menu-preview'
+
+const { paintedCards, toolbarCallbacks } = vi.hoisted(() => ({
+  paintedCards: new Set<string>(),
+  toolbarCallbacks: new Map<string, (ready: boolean) => void>(),
+}))
+
+vi.mock('@sim/emcn', () => ({
+  cn: (...values: Array<string | false | null | undefined>) => values.filter(Boolean).join(' '),
+  Button: (props: ComponentProps<'button'>) => <button {...props} />,
+  Check: () => null,
+  Duplicate: () => null,
+  handleKeyboardActivation: () => undefined,
+  PlayOutline: () => null,
+  Switch: () => null,
+  Trash: () => null,
+  Tooltip: {
+    Root: ({ children }: { children: ReactNode }) => children,
+    Trigger: ({ children }: { children: ReactNode }) => children,
+    Content: () => null,
+  },
+}))
+
+vi.mock('@sim/emcn/icons', () => ({
+  Circle: () => null,
+  Square: () => null,
+  Unlock: () => null,
+}))
+
+vi.mock('@sim/workflow-renderer', () => ({
+  BLOCK_DIMENSIONS: { MIN_PAINTED_HEIGHT: 48 },
+  CanvasSentenceView: () => null,
+  HANDLE_POSITIONS: { CONDITION_START_Y: 58, CONDITION_ROW_HEIGHT: 24 },
+  InlineChip: ({ children }: { children: ReactNode }) => children,
+  SubBlockRowView: () => null,
+  WorkflowTypeTag: () => null,
+  WorkflowBlockBorder: ({
+    nodeId,
+    onActionMenuReadyChange,
+  }: {
+    nodeId: string
+    onActionMenuReadyChange?: (ready: boolean) => void
+  }) => {
+    if (onActionMenuReadyChange) toolbarCallbacks.set(nodeId, onActionMenuReadyChange)
+    return (
+      <svg>
+        {paintedCards.has(nodeId) ? <path d='M0 0H250V100H0Z' fill='white' stroke='gray' /> : null}
+      </svg>
+    )
+  },
+}))
+
+vi.mock('@/app/(landing)/components/hero/components/hero-platform-loop/stage-data', () => ({
+  STAGE_BLOCKS: [
+    { id: 'start', name: 'Start', isTrigger: true, rows: [] },
+    { id: 'enrich', name: 'Enrich lead', rows: [] },
+    { id: 'score', name: 'Score company fit', rows: [] },
+  ],
+}))
+
+vi.mock('@/app/(landing)/components/hero/components/hero-visual/workflow-data', () => ({
+  blockHeight: () => 100,
+  horizontalHandleAnchors: () => ({ in: { x: 0, y: 0 }, out: { x: 250, y: 50 } }),
+  smoothStep: () => 'M0 0H250',
+}))
+
+vi.mock('@/app/(landing)/components/shared/edge-fade', () => ({ EdgeFade: () => null }))
+
+let host: HTMLDivElement
+let root: Root
+
+beforeEach(() => {
+  paintedCards.clear()
+  toolbarCallbacks.clear()
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+  host = document.createElement('div')
+  document.body.append(host)
+  root = createRoot(host)
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  host.remove()
+  vi.unstubAllGlobals()
+})
+
+describe('Workflow hero readiness', () => {
+  it('waits for every silhouette and the selected toolbar, then reports only once', () => {
+    const onReady = vi.fn()
+    act(() => root.render(<WorkflowMenuPreview layout='hero' onReady={onReady} />))
+    expect(onReady).not.toHaveBeenCalled()
+
+    paintedCards.add('start')
+    paintedCards.add('enrich')
+    act(() => root.render(<WorkflowMenuPreview layout='hero' onReady={onReady} />))
+    act(() => toolbarCallbacks.get('enrich')?.(true))
+    expect(onReady).not.toHaveBeenCalled()
+
+    paintedCards.add('score')
+    act(() => root.render(<WorkflowMenuPreview layout='hero' onReady={onReady} />))
+    expect(onReady).toHaveBeenCalledTimes(1)
+
+    act(() => toolbarCallbacks.get('enrich')?.(false))
+    act(() => toolbarCallbacks.get('enrich')?.(true))
+    act(() => root.render(<WorkflowMenuPreview layout='hero' onReady={onReady} />))
+    expect(onReady).toHaveBeenCalledTimes(1)
+  })
+
+  it('keeps the graphic pending when the frames exist but the toolbar is still opening', () => {
+    const onReady = vi.fn()
+    for (const id of ['start', 'enrich', 'score']) paintedCards.add(id)
+    act(() => root.render(<WorkflowMenuPreview layout='hero' onReady={onReady} />))
+    expect(onReady).not.toHaveBeenCalled()
+
+    act(() => toolbarCallbacks.get('enrich')?.(true))
+    expect(onReady).toHaveBeenCalledTimes(1)
+  })
+
+  it('leaves the nav preview independent of hero readiness', () => {
+    const onReady = vi.fn()
+    for (const id of ['start', 'enrich', 'score']) paintedCards.add(id)
+    act(() => root.render(<WorkflowMenuPreview onReady={onReady} />))
+    act(() => toolbarCallbacks.get('enrich')?.(true))
+    expect(onReady).not.toHaveBeenCalled()
+    expect(host.querySelector('[data-preview-layout]')?.getAttribute('data-preview-layout')).toBe(
+      'menu'
+    )
+  })
+})
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/workflow-menu-preview/workflow-menu-preview.tsx b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/workflow-menu-preview/workflow-menu-preview.tsx
new file mode 100644
index 00000000000..699e664ff05
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/workflow-menu-preview/workflow-menu-preview.tsx
@@ -0,0 +1,113 @@
+'use client'
+
+import { useRef } from 'react'
+import { cn } from '@sim/emcn'
+import { StageBlockCard } from '@/app/(landing)/components/hero/components/hero-platform-loop/stage-block-card'
+import { STAGE_BLOCKS } from '@/app/(landing)/components/hero/components/hero-platform-loop/stage-data'
+import {
+  horizontalHandleAnchors,
+  smoothStep,
+} from '@/app/(landing)/components/hero/components/hero-visual/workflow-data'
+import { EdgeFade } from '@/app/(landing)/components/shared/edge-fade'
+
+const PLACEMENTS = [
+  { x: -52, y: 244, className: '-left-[52px] top-[244px]' },
+  { x: 268, y: 94, className: 'left-[268px] top-[94px]' },
+  { x: 566, y: 202, className: 'left-[566px] top-[202px]' },
+] as const
+
+/** The same Start, Agent, and Function blocks as the production lead-enrichment demo. */
+const BLOCKS = STAGE_BLOCKS.slice(0, 3).map((block, index) => ({
+  ...block,
+  ...PLACEMENTS[index],
+}))
+
+const CONTINUATION = horizontalHandleAnchors(BLOCKS[2]).out
+
+interface WorkflowMenuPreviewProps {
+  layout?: 'menu' | 'hero'
+  onReady?: () => void
+}
+
+/** A cropped production canvas with a clear center and progressively softened inner edges. */
+export function WorkflowMenuPreview({ layout = 'menu', onReady }: WorkflowMenuPreviewProps) {
+  const readyBlocksRef = useRef(new Set<string>())
+
+  const handleBlockReady = (blockId: string) => {
+    if (readyBlocksRef.current.has(blockId)) return
+    readyBlocksRef.current.add(blockId)
+    if (readyBlocksRef.current.size === BLOCKS.length) onReady?.()
+  }
+
+  return (
+    <div
+      aria-hidden='true'
+      inert
+      data-workflow-menu-preview
+      data-preview-layout={layout}
+      className={cn(
+        'pointer-events-none absolute inset-0 isolate flex select-none items-center justify-center overflow-hidden [container-type:inline-size]',
+        layout === 'hero' ? 'bg-[var(--bg)]' : 'bg-[var(--surface-3)]'
+      )}
+    >
+      <div
+        className={cn(
+          'relative h-[360px] w-[900px] shrink-0',
+          layout === 'hero'
+            ? '@max-[640px]:translate-x-[51px] [scale:clamp(0.9,tan(atan2(100cqw,900px)),1)]'
+            : '[scale:min(0.9,tan(atan2(100cqw,800px)))]'
+        )}
+      >
+        <svg
+          className='absolute inset-0 size-full overflow-visible text-[var(--text-secondary)]'
+          viewBox='0 0 900 360'
+          fill='none'
+        >
+          {BLOCKS.slice(1).map((block, index) => {
+            const source = horizontalHandleAnchors(BLOCKS[index]).out
+            const target = horizontalHandleAnchors(block).in
+            return (
+              <path
+                key={block.id}
+                d={smoothStep(source.x, source.y, target.x, target.y)}
+                stroke='currentColor'
+                strokeWidth={1.5}
+              />
+            )
+          })}
+          <path
+            d={`M${CONTINUATION.x} ${CONTINUATION.y}H${layout === 'hero' ? 1000 : 980}`}
+            stroke='var(--border)'
+            strokeWidth={1.5}
+          />
+        </svg>
+
+        {BLOCKS.map((block) => (
+          <div
+            key={block.id}
+            data-workflow-menu-node={block.id}
+            className={cn('absolute', block.className)}
+          >
+            <StageBlockCard
+              block={block}
+              orientation='horizontal'
+              selected={block.id === 'enrich'}
+              decorative
+              onReady={layout === 'hero' && onReady ? handleBlockReady : undefined}
+            />
+          </div>
+        ))}
+      </div>
+      {layout === 'hero' ? (
+        <>
+          <div className='-translate-x-1/2 pointer-events-none absolute inset-y-0 left-1/2 w-[1100px] max-w-full'>
+            <EdgeFade ground='canvas' edges={['left', 'right']} depth='stage' />
+          </div>
+          <EdgeFade ground='canvas' edges={['top', 'bottom']} depth='preview' />
+        </>
+      ) : (
+        <EdgeFade ground='surface' depth='preview' />
+      )}
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/nav-menu-preview.tsx b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/nav-menu-preview.tsx
new file mode 100644
index 00000000000..ac5c4d7f9b3
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/nav-menu-preview.tsx
@@ -0,0 +1,114 @@
+import { ArrowRight, BookOpen } from '@sim/emcn/icons'
+import { BlogMenuPreview } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/blog-menu-preview'
+import { ChangelogMenuPreview } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/changelog-menu-preview'
+import { DocsMenuPreview } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/docs-menu-preview'
+import { EnterpriseMenuPreview } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/enterprise-menu-preview'
+import { FilesMenuPreview } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/files-menu-preview'
+import { IntegrationsMenuPreview } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/integrations-menu-preview'
+import { KnowledgeMenuPreview } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/knowledge-menu-preview'
+import { LibraryMenuPreview } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/library-menu-preview'
+import { LogsMenuPreview } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/logs-menu-preview'
+import { ModelsMenuPreview } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/models-menu-preview'
+import { OverviewMenuPreview } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/overview-menu-preview'
+import { TablesMenuPreview } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/tables-menu-preview'
+import { WorkflowMenuPreview } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/workflow-menu-preview'
+import type {
+  NavMenuItemData,
+  NavMenuPreviewKind,
+} from '@/app/(landing)/components/navbar/components/nav-menu-chip/types'
+
+interface NavMenuPreviewProps {
+  item: NavMenuItemData
+}
+
+interface PreviewGraphicProps {
+  details: readonly [string, string, string]
+}
+
+interface ProductGraphicProps extends PreviewGraphicProps {
+  kind: NavMenuPreviewKind
+}
+
+const PREVIEW_ROW =
+  'flex items-center gap-3 rounded-md border border-[var(--border)] bg-[var(--bg)] px-3 py-2.5'
+
+function TeamGraphic({ details }: PreviewGraphicProps) {
+  return (
+    <div className='flex h-full flex-col justify-center gap-2 p-4'>
+      {details.map((detail, index) => (
+        <div key={detail} className={PREVIEW_ROW}>
+          <span className='flex size-7 items-center justify-center rounded-md bg-[var(--surface-3)] text-[10px] text-[var(--text-muted)]'>
+            0{index + 1}
+          </span>
+          <span className='flex-1 text-[12px] text-[var(--text-body)]'>{detail}</span>
+          <ArrowRight className='size-[14px] text-[var(--text-icon)]' />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function ResourceGraphic({ details }: PreviewGraphicProps) {
+  return (
+    <div className='flex h-full flex-col p-4'>
+      <div className='mb-3 flex items-center gap-2 rounded-md border border-[var(--border)] bg-[var(--bg)] px-3 py-2.5'>
+        <BookOpen className='size-[14px] text-[var(--text-icon)]' />
+        <span className='text-[12px] text-[var(--text-body)]'>Browse resources</span>
+      </div>
+      <div className='flex flex-1 flex-col justify-center divide-y divide-[var(--border)] rounded-lg border border-[var(--border)] bg-[var(--bg)] px-3'>
+        {details.map((detail) => (
+          <div key={detail} className='flex flex-1 items-center justify-between'>
+            <span className='text-[12px] text-[var(--text-body)]'>{detail}</span>
+            <ArrowRight className='size-[14px] text-[var(--text-icon)]' />
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function PreviewGraphic({ kind, details }: ProductGraphicProps) {
+  switch (kind) {
+    case 'blog':
+      return <BlogMenuPreview />
+    case 'changelog':
+      return <ChangelogMenuPreview />
+    case 'docs':
+      return <DocsMenuPreview />
+    case 'integrations':
+      return <IntegrationsMenuPreview />
+    case 'library':
+      return <LibraryMenuPreview />
+    case 'models':
+      return <ModelsMenuPreview />
+    case 'overview':
+      return <OverviewMenuPreview />
+    case 'workflows':
+      return <WorkflowMenuPreview />
+    case 'knowledge':
+      return <KnowledgeMenuPreview />
+    case 'tables':
+      return <TablesMenuPreview />
+    case 'files':
+      return <FilesMenuPreview />
+    case 'logs':
+      return <LogsMenuPreview />
+    case 'enterprise':
+      return <EnterpriseMenuPreview />
+    case 'team':
+      return <TeamGraphic details={details} />
+    case 'resource':
+      return <ResourceGraphic details={details} />
+  }
+}
+
+export function NavMenuPreview({ item }: NavMenuPreviewProps) {
+  return (
+    <div
+      data-nav-menu-preview
+      className='relative min-h-[340px] w-full self-stretch overflow-hidden rounded-[10px] bg-[var(--surface-3)]'
+    >
+      <PreviewGraphic kind={item.preview.kind} details={item.preview.details} />
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/constants.test.ts b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/constants.test.ts
new file mode 100644
index 00000000000..a1f439577d6
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/constants.test.ts
@@ -0,0 +1,40 @@
+/**
+ * @vitest-environment node
+ */
+import { describe, expect, it } from 'vitest'
+import {
+  CUSTOMERS_MENU,
+  NAV_MENUS,
+} from '@/app/(landing)/components/navbar/components/nav-menu-chip/constants'
+
+describe('navbar customers menu', () => {
+  it('floats the featured customers as blocs, each with its mark', () => {
+    expect(CUSTOMERS_MENU.label).toBe('Customers')
+    expect(CUSTOMERS_MENU.layout).toBe('floating')
+    expect(CUSTOMERS_MENU.marquee).toBe('customers')
+    expect(CUSTOMERS_MENU.sections.map((section) => section.label)).toEqual(['Featured customers'])
+    expect(CUSTOMERS_MENU.sections[0].items.map((item) => item.title)).toEqual([
+      'Rivian',
+      'eXp Realty',
+    ])
+    expect(CUSTOMERS_MENU.sections[0].items.map((item) => item.card?.tone)).toEqual([
+      'dark',
+      'light',
+    ])
+    expect(CUSTOMERS_MENU.sections[0].items[0].card?.background?.src).toMatch(
+      /^\/landing\/customers\/.+\.jpg$/
+    )
+    expect(CUSTOMERS_MENU.sections[0].items.map((item) => item.href)).toEqual([
+      '/customers/rivian',
+      '/customers/exp-realty',
+    ])
+    for (const item of CUSTOMERS_MENU.sections[0].items) {
+      expect(item.card?.imageSrc).toMatch(/^\/landing\/logos\/.+\.svg$/)
+      expect(item.card?.aspect).toBeGreaterThan(0)
+    }
+  })
+
+  it('keeps customers between platform and resources', () => {
+    expect(NAV_MENUS.map((menu) => menu.label)).toEqual(['Platform', 'Customers', 'Resources'])
+  })
+})
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/constants.ts b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/constants.ts
index 4b49af2d50b..0310e61df18 100644
--- a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/constants.ts
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/constants.ts
@@ -1,126 +1,272 @@
 import type { NavMenu } from '@/app/(landing)/components/navbar/components/nav-menu-chip/types'
 
 /**
- * The Platform menu - Sim's modules. Five items in a three-column grid, so the
- * bottom-right cell is empty. Each description names the outcome the module
- * unlocks for your agents.
+ * Sim's product system, grouped around the two questions an enterprise buyer
+ * brings to the platform: how teams build agents and how the organization
+ * operates them. The muted `Sim` prefix makes each module read as part of one
+ * governed workspace instead of a collection of unrelated tools.
  */
 export const PLATFORM_MENU: NavMenu = {
   label: 'Platform',
-  items: [
+  eyebrow: 'The Sim platform',
+  heading: 'One system for agent work',
+  description:
+    'Build, deploy, and govern agents with company context, shared data, and execution history in one place.',
+  sections: [
     {
-      title: 'Workflows',
-      description: 'Design agent logic visually',
-      href: '/workflows',
+      label: 'Platform overview',
+      items: [
+        {
+          title: 'Overview',
+          description:
+            'See how Sim’s products work together to build, run, and govern agent systems.',
+          href: '/platform',
+          preview: {
+            kind: 'overview',
+            eyebrow: 'Overview',
+            title: 'One system for agent work',
+            details: ['Knowledge', 'Workflows', 'Logs'],
+          },
+        },
+        {
+          brand: 'Sim',
+          title: 'Enterprise',
+          description: 'Control access, spend, data, and deployment across the workspace.',
+          href: '/enterprise',
+          preview: {
+            kind: 'enterprise',
+            eyebrow: 'Govern',
+            title: 'Set the rules once',
+            details: ['Workspace roles', 'Usage limits', 'Deployment controls'],
+          },
+        },
+        {
+          brand: 'Sim',
+          title: 'Workflows',
+          description: 'Design repeatable agent systems visually, through Chat, or with code.',
+          href: '/workflows',
+          preview: {
+            kind: 'workflows',
+            eyebrow: 'Build',
+            title: 'Design agent logic visually',
+            details: ['Trigger', 'Agent', 'Action'],
+          },
+        },
+      ],
     },
     {
-      title: 'Knowledge Base',
-      description: 'Give agents memory of your data',
-      href: '/knowledge',
-    },
-    {
-      title: 'Tables',
-      description: 'Power agents with structured data',
-      href: '/tables',
-    },
-    {
-      title: 'Files',
-      description: 'One file store for team and agents',
-      href: '/files',
-    },
-    {
-      title: 'Logs',
-      description: 'Trace every agent decision',
-      href: '/logs',
+      label: 'Operations and control',
+      items: [
+        {
+          brand: 'Sim',
+          title: 'Knowledge Base',
+          description: 'Ground every agent in trusted knowledge from across your company.',
+          href: '/knowledge',
+          preview: {
+            kind: 'knowledge',
+            eyebrow: 'Ground',
+            title: 'Connect company knowledge',
+            details: ['Notion', 'Google Drive', 'Confluence'],
+          },
+        },
+        {
+          brand: 'Sim',
+          title: 'Files',
+          description: 'Keep agent inputs, outputs, and shared artifacts organized in one place.',
+          href: '/files',
+          preview: {
+            kind: 'files',
+            eyebrow: 'Share',
+            title: 'One file store for agents',
+            details: ['research.pdf', 'brief.docx', 'accounts.csv'],
+          },
+        },
+        {
+          brand: 'Sim',
+          title: 'Tables',
+          description: 'Give agents structured data they can read and update while they work.',
+          href: '/tables',
+          preview: {
+            kind: 'tables',
+            eyebrow: 'Structure',
+            title: 'Keep working data close',
+            details: ['Company', 'Owner', 'Status'],
+          },
+        },
+        {
+          brand: 'Sim',
+          title: 'Logs',
+          description:
+            'Trace every agent run block by block, including actions, cost, and failures.',
+          href: '/logs',
+          preview: {
+            kind: 'logs',
+            eyebrow: 'Observe',
+            title: 'Trace every run block by block',
+            details: ['Run started', 'Agent completed', 'Action completed'],
+          },
+        },
+      ],
     },
   ],
 }
 
 /**
- * The Resources menu - learning and reference surfaces plus the Enterprise
- * page. Six items in a three-column grid. Docs is the one off-site link.
+ * Learning and evaluation surfaces. Enterprise now lives with the platform
+ * products, while Library fills the resource taxonomy with the existing
+ * comparisons, how-tos, and roundups.
  */
 export const RESOURCES_MENU: NavMenu = {
   label: 'Resources',
-  items: [
-    {
-      title: 'Docs',
-      description: 'Guides and API reference',
-      href: 'https://docs.sim.ai',
-      external: true,
-    },
-    {
-      title: 'Blog',
-      description: 'Ideas, news, and deep dives',
-      href: '/blog',
-    },
-    {
-      title: 'Enterprise',
-      description: 'Govern AI agents at enterprise scale',
-      href: '/enterprise',
-    },
+  eyebrow: 'Resources',
+  heading: 'Learn, evaluate, and build with Sim',
+  description:
+    'Go from first workflow to production with technical references, product updates, and practical guidance.',
+  sections: [
     {
-      title: 'Changelog',
-      description: 'Everything we just shipped',
-      href: '/changelog',
+      label: 'Build with Sim',
+      items: [
+        {
+          title: 'Docs',
+          description: 'Guides, SDKs, and API reference',
+          href: 'https://docs.sim.ai',
+          external: true,
+          preview: {
+            kind: 'docs',
+            eyebrow: 'Documentation',
+            title: 'Build with Sim',
+            details: ['Quickstart', 'SDKs', 'API reference'],
+          },
+        },
+        {
+          title: 'Models',
+          description: 'Compare supported AI models',
+          href: '/models',
+          preview: {
+            kind: 'models',
+            eyebrow: 'Models',
+            title: 'Choose the right model',
+            details: ['Providers', 'Capabilities', 'Pricing'],
+          },
+        },
+        {
+          title: 'Integrations',
+          description: 'Connect apps, tools, and triggers',
+          href: '/integrations',
+          preview: {
+            kind: 'integrations',
+            eyebrow: 'Integrations',
+            title: 'Connect the systems you use',
+            details: ['Apps', 'Tools', 'Triggers'],
+          },
+        },
+      ],
     },
     {
-      title: 'Models',
-      description: 'Run on every major LLM',
-      href: '/models',
-    },
-    {
-      title: 'Integrations',
-      description: 'Connect 1,000+ apps and tools',
-      href: '/integrations',
+      label: 'Stay current',
+      items: [
+        {
+          title: 'Changelog',
+          description: 'See everything we just shipped',
+          href: '/changelog',
+          preview: {
+            kind: 'changelog',
+            eyebrow: 'Changelog',
+            title: 'Follow product updates',
+            details: ['New', 'Improved', 'Fixed'],
+          },
+        },
+        {
+          title: 'Blog',
+          description: 'Read ideas, news, and deep dives',
+          href: '/blog',
+          preview: {
+            kind: 'blog',
+            eyebrow: 'Blog',
+            title: 'Read the latest from Sim',
+            details: ['Product', 'Engineering', 'Company'],
+          },
+        },
+        {
+          title: 'Library',
+          description: 'Browse comparisons, how-tos, and roundups',
+          href: '/library',
+          preview: {
+            kind: 'library',
+            eyebrow: 'Library',
+            title: 'Make informed AI decisions',
+            details: ['Comparisons', 'How-tos', 'Roundups'],
+          },
+        },
+      ],
     },
   ],
 }
 
 /**
- * The Solutions menu - agent use cases by team, Sales first. Six items in a
- * three-column grid.
+ * The customers who build with Sim, each a card with the customer's mark on a
+ * white placement. Each card opens its dedicated customer-story page.
  */
-export const SOLUTIONS_MENU: NavMenu = {
-  label: 'Solutions',
-  items: [
-    {
-      title: 'Sales',
-      description: 'Automate outreach and CRM upkeep',
-      href: '/solutions/sales',
-    },
-    {
-      title: 'Engineering',
-      description: 'Let agents handle the busywork',
-      href: '/solutions/engineering',
-    },
-    {
-      title: 'IT',
-      description: 'Resolve tickets and access requests',
-      href: '/solutions/it',
-    },
-    {
-      title: 'Compliance',
-      description: 'Stay audit-ready around the clock',
-      href: '/solutions/compliance',
-    },
-    {
-      title: 'Finance',
-      description: 'Close the books faster',
-      href: '/solutions/finance',
-    },
+export const CUSTOMERS_MENU: NavMenu = {
+  label: 'Customers',
+  index: { label: 'All customers', href: '/customers' },
+  eyebrow: 'Customers',
+  heading: 'Teams building with Sim',
+  description: 'How enterprise teams build, govern, and operate AI agents with Sim.',
+  layout: 'floating',
+  marquee: 'customers',
+  sections: [
     {
-      title: 'HR',
-      description: 'Onboard and support every employee',
-      href: '/solutions/hr',
+      label: 'Featured customers',
+      items: [
+        {
+          title: 'Rivian',
+          description:
+            'One place to connect systems and build, govern, and operate AI agents across Rivian.',
+          href: '/customers/rivian',
+          card: {
+            imageSrc: '/landing/logos/rivian-vw.svg',
+            imageAlt: 'Rivian | Volkswagen Group Technologies',
+            aspect: 10.72,
+            height: 22,
+            tone: 'dark',
+            background: { src: '/landing/customers/rivian-trail.jpg' },
+          },
+          preview: {
+            kind: 'resource',
+            eyebrow: 'Customer story',
+            title: 'Rivian builds with Sim',
+            details: ['Enterprise systems', 'Governed agents', 'One workspace'],
+          },
+        },
+        {
+          title: 'eXp Realty',
+          description:
+            'Complex real estate operations turned into governed AI workflows that scale across eXp Realty.',
+          href: '/customers/exp-realty',
+          card: {
+            imageSrc: '/landing/logos/exp-realty.svg',
+            imageAlt: 'eXp Realty',
+            aspect: 1.84,
+            height: 44,
+            tone: 'light',
+          },
+          preview: {
+            kind: 'resource',
+            eyebrow: 'Customer story',
+            title: 'eXp Realty builds with Sim',
+            details: ['Real estate operations', 'Governed workflows', 'Scale'],
+          },
+        },
+      ],
     },
   ],
 }
 
 /**
  * Navbar mega-menus in trigger order - shared by desktop and mobile nav (the
- * desktop bar maps this list; mobile nav derives its visible sections from
- * these labels). Platform leads with the product modules, Solutions follows
- * with the per-team pages, and Resources closes with learning surfaces.
+ * desktop bar maps this list; mobile nav mirrors its sections). Platform leads
+ * with products and governance, Customers follows with the teams building on
+ * it, and Resources closes with learning surfaces.
  */
-export const NAV_MENUS = [PLATFORM_MENU, SOLUTIONS_MENU, RESOURCES_MENU] as const
+export const NAV_MENUS = [PLATFORM_MENU, CUSTOMERS_MENU, RESOURCES_MENU] as const
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/index.ts b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/index.ts
index 58cd09c8f10..9719780f652 100644
--- a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/index.ts
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/index.ts
@@ -1,3 +1,3 @@
-export { NAV_MENUS, PLATFORM_MENU, RESOURCES_MENU, SOLUTIONS_MENU } from './constants'
-export { NavMenuChip } from './nav-menu-chip'
+export { CUSTOMERS_MENU, NAV_MENUS, PLATFORM_MENU, RESOURCES_MENU } from './constants'
+export { NavMenuCluster } from './nav-menu-chip'
 export type { NavMenu, NavMenuItemData } from './types'
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/nav-menu-chip.test.tsx b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/nav-menu-chip.test.tsx
new file mode 100644
index 00000000000..cdd4168099b
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/nav-menu-chip.test.tsx
@@ -0,0 +1,305 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, type ComponentProps, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { NAV_MENUS } from '@/app/(landing)/components/navbar/components/nav-menu-chip/constants'
+import { NavMenuCluster } from '@/app/(landing)/components/navbar/components/nav-menu-chip/nav-menu-chip'
+import type { NavMenuItemData } from '@/app/(landing)/components/navbar/components/nav-menu-chip/types'
+
+const { frost, setMenuOpen } = vi.hoisted(() => {
+  const setMenuOpen = vi.fn()
+  return { frost: { setMenuOpen }, setMenuOpen }
+})
+
+vi.mock('@sim/emcn', () => ({
+  cn: (...values: Array<string | false | null | undefined>) => values.filter(Boolean).join(' '),
+  chipVariants: () => '',
+  chipContentLabelClass: '',
+  ChipChevronDown: () => null,
+  ChipTag: ({ children }: { children: ReactNode }) => <span>{children}</span>,
+}))
+vi.mock('next/link', () => ({
+  default: ({ prefetch, ...props }: ComponentProps<'a'> & { prefetch?: boolean | null }) => (
+    <a {...props} data-prefetch={prefetch === false ? 'disabled' : 'auto'} />
+  ),
+}))
+vi.mock('@/app/(landing)/components/chevron-arrow', () => ({
+  ChevronArrow: () => null,
+}))
+vi.mock('@/app/(landing)/components/navbar/components/sim-wordmark', () => ({
+  SimWordmark: () => null,
+}))
+vi.mock('@/app/(landing)/components/navbar/components/navbar-shell', () => ({
+  NAVBAR_GLASS_SURFACE: '',
+  useNavbarFrost: () => frost,
+}))
+vi.mock(
+  '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-card',
+  () => ({ NavMenuCard: () => null })
+)
+vi.mock(
+  '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-logo-marquee',
+  () => ({ NavMenuLogoMarquee: () => null })
+)
+vi.mock(
+  '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/nav-menu-preview',
+  () => ({
+    NavMenuPreview: ({ item }: { item: NavMenuItemData }) => (
+      <output aria-label='Feature preview'>{item.preview.kind}</output>
+    ),
+  })
+)
+
+let host: HTMLDivElement
+let root: Root
+let desktopMedia: EventTarget & { matches: boolean }
+
+beforeEach(() => {
+  setMenuOpen.mockClear()
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+  desktopMedia = Object.assign(new EventTarget(), { matches: true })
+  vi.stubGlobal(
+    'matchMedia',
+    vi.fn(() => desktopMedia)
+  )
+  host = document.createElement('div')
+  document.body.append(host)
+  root = createRoot(host)
+  act(() => root.render(<NavMenuCluster menus={NAV_MENUS} />))
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  host.remove()
+  vi.unstubAllGlobals()
+})
+
+function element(selector: string): HTMLElement {
+  const result = host.querySelector<HTMLElement>(selector)
+  if (!result) throw new Error(`Missing navigation element: ${selector}`)
+  return result
+}
+
+function hover(target: HTMLElement) {
+  act(() => {
+    target.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }))
+  })
+}
+
+function expectSelected(href: string, kind: string) {
+  const panel = element('#primary-navigation-mega-menu')
+  expect(panel.getAttribute('aria-hidden')).toBe('false')
+  const activeLinks = panel.querySelectorAll('a[data-active="true"]')
+  expect(activeLinks).toHaveLength(1)
+  expect(activeLinks[0].getAttribute('href')).toBe(href)
+  expect(panel.querySelector('output')?.textContent).toBe(kind)
+}
+
+describe('NavMenuCluster feature selection', () => {
+  it('prefetches destinations only while their menu is open', () => {
+    const overview = element('a[href="/platform"]')
+    const customers = element('#nav-customers-menu a[href="/customers"]')
+    expect(overview.dataset.prefetch).toBe('disabled')
+    expect(customers.dataset.prefetch).toBe('disabled')
+
+    hover(element('#nav-platform-menu-trigger'))
+    expect(overview.dataset.prefetch).toBe('auto')
+    expect(customers.dataset.prefetch).toBe('disabled')
+
+    hover(element('#nav-customers-menu-trigger'))
+    expect(overview.dataset.prefetch).toBe('disabled')
+    expect(customers.dataset.prefetch).toBe('auto')
+
+    act(() => {
+      customers.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+    })
+    expect(customers.dataset.prefetch).toBe('disabled')
+  })
+
+  it('lets Tab enter Platform links, return to its trigger, and continue to Customers', () => {
+    const platform = element('#nav-platform-menu-trigger')
+    act(() => platform.focus())
+    act(() => {
+      platform.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }))
+    })
+    const overview = element('a[href="/platform"]')
+    expect(document.activeElement).toBe(overview)
+    expectSelected('/platform', 'overview')
+
+    act(() => {
+      overview.dispatchEvent(
+        new KeyboardEvent('keydown', { key: 'Tab', shiftKey: true, bubbles: true })
+      )
+    })
+    expect(document.activeElement).toBe(platform)
+
+    const logs = element('a[href="/logs"]')
+    act(() => logs.focus())
+    act(() => {
+      logs.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }))
+    })
+    expect(document.activeElement).toBe(element('#nav-customers-menu-trigger'))
+    expect(element('#nav-customers-menu').getAttribute('aria-hidden')).toBe('false')
+  })
+
+  it('supports arrow entry and Escape returns focus without reopening the menu', () => {
+    const platform = element('#nav-platform-menu-trigger')
+    act(() => platform.focus())
+    act(() => {
+      platform.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }))
+    })
+    expect(document.activeElement).toBe(element('a[href="/logs"]'))
+
+    act(() => {
+      document.activeElement?.dispatchEvent(
+        new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })
+      )
+    })
+    expect(document.activeElement).toBe(platform)
+    expect(platform.getAttribute('aria-expanded')).toBe('false')
+
+    act(() => platform.click())
+    expect(document.activeElement).toBe(element('a[href="/platform"]'))
+  })
+
+  it('releases the desktop scroll lock when resized below the visible breakpoint', () => {
+    hover(element('#nav-platform-menu-trigger'))
+    setMenuOpen.mockClear()
+    act(() => {
+      desktopMedia.matches = false
+      desktopMedia.dispatchEvent(new Event('change'))
+    })
+    expect(element('#nav-platform-menu-trigger').getAttribute('aria-expanded')).toBe('false')
+    expect(setMenuOpen).toHaveBeenCalledExactlyOnceWith('desktop', false)
+  })
+
+  it('reports opening and pointer-exit closure during the event before effects flush', () => {
+    const platform = element('#nav-platform-menu-trigger')
+
+    act(() => {
+      platform.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }))
+      expect(setMenuOpen).toHaveBeenCalledExactlyOnceWith('desktop', true)
+    })
+
+    setMenuOpen.mockClear()
+
+    act(() => {
+      platform.dispatchEvent(
+        new MouseEvent('mouseout', { bubbles: true, relatedTarget: document.body })
+      )
+      expect(setMenuOpen).toHaveBeenCalledExactlyOnceWith('desktop', false)
+    })
+  })
+
+  it('stays open while the pointer crosses the header corridor into a menu link', () => {
+    const platform = element('#nav-platform-menu-trigger')
+    hover(platform)
+    const bridge = element('[data-navigation-hover-bridge]')
+    const overview = element('a[href="/platform"]')
+    setMenuOpen.mockClear()
+
+    act(() => {
+      platform.dispatchEvent(new MouseEvent('mouseout', { bubbles: true, relatedTarget: bridge }))
+      bridge.dispatchEvent(new MouseEvent('mouseover', { bubbles: true, relatedTarget: platform }))
+      bridge.dispatchEvent(new MouseEvent('mouseout', { bubbles: true, relatedTarget: overview }))
+      overview.dispatchEvent(new MouseEvent('mouseover', { bubbles: true, relatedTarget: bridge }))
+    })
+
+    expectSelected('/platform', 'overview')
+    expect(setMenuOpen).not.toHaveBeenCalled()
+
+    act(() => {
+      overview.dispatchEvent(
+        new MouseEvent('mouseout', { bubbles: true, relatedTarget: document.body })
+      )
+    })
+
+    expect(platform.getAttribute('aria-expanded')).toBe('false')
+    expect(host.querySelector('[data-navigation-hover-bridge]')).toBeNull()
+    expect(setMenuOpen).toHaveBeenCalledExactlyOnceWith('desktop', false)
+  })
+
+  it('only bridges the full header for an open surface menu', () => {
+    expect(host.querySelector('[data-navigation-hover-bridge]')).toBeNull()
+
+    hover(element('#nav-platform-menu-trigger'))
+    expect(host.querySelector('[data-navigation-hover-bridge]')).not.toBeNull()
+
+    hover(element('#nav-customers-menu-trigger'))
+    expect(host.querySelector('[data-navigation-hover-bridge]')).toBeNull()
+    expect(element('#nav-customers-menu').getAttribute('aria-hidden')).toBe('false')
+
+    hover(element('#nav-resources-menu-trigger'))
+    expect(host.querySelector('[data-navigation-hover-bridge]')).not.toBeNull()
+  })
+
+  it('opens on Overview and keeps the selected feature highlighted while viewing its preview', () => {
+    hover(element('#nav-platform-menu-trigger'))
+    expectSelected('/platform', 'overview')
+
+    const workflows = element('a[href="/workflows"]')
+    hover(workflows)
+    expectSelected('/workflows', 'workflows')
+
+    act(() => {
+      workflows.dispatchEvent(
+        new MouseEvent('mouseout', {
+          bubbles: true,
+          relatedTarget: element('output'),
+        })
+      )
+    })
+    expectSelected('/workflows', 'workflows')
+  })
+
+  it('returns to Overview when the pointer returns to the open Platform trigger', () => {
+    const platform = element('#nav-platform-menu-trigger')
+    hover(platform)
+    hover(element('a[href="/tables"]'))
+    expectSelected('/tables', 'tables')
+
+    hover(platform)
+    expect(platform.getAttribute('aria-expanded')).toBe('true')
+    expectSelected('/platform', 'overview')
+  })
+
+  it('starts with Overview again after closing and reopening Platform', () => {
+    const platform = element('#nav-platform-menu-trigger')
+    hover(platform)
+    const logs = element('a[href="/logs"]')
+    hover(logs)
+    expectSelected('/logs', 'logs')
+
+    act(() => {
+      logs.dispatchEvent(
+        new MouseEvent('mouseout', { bubbles: true, relatedTarget: document.body })
+      )
+    })
+    expect(platform.getAttribute('aria-expanded')).toBe('false')
+    expect(element('#primary-navigation-mega-menu').getAttribute('aria-hidden')).toBe('true')
+
+    hover(platform)
+    expectSelected('/platform', 'overview')
+  })
+
+  it('keeps keyboard selection and previews together when returning to a trigger or changing menus', () => {
+    const platform = element('#nav-platform-menu-trigger')
+    act(() => platform.focus())
+    expectSelected('/platform', 'overview')
+
+    act(() => element('a[href="/knowledge"]').focus())
+    expectSelected('/knowledge', 'knowledge')
+
+    act(() => platform.focus())
+    expectSelected('/platform', 'overview')
+
+    act(() => element('#nav-resources-menu-trigger').focus())
+    expect(platform.getAttribute('aria-expanded')).toBe('false')
+    expectSelected('https://docs.sim.ai', 'docs')
+
+    act(() => platform.focus())
+    expectSelected('/platform', 'overview')
+  })
+})
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/nav-menu-chip.tsx b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/nav-menu-chip.tsx
index 2af512f5813..4060b3975f9 100644
--- a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/nav-menu-chip.tsx
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/nav-menu-chip.tsx
@@ -1,88 +1,288 @@
 'use client'
 
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { ChipChevronDown, chipContentLabelClass, chipVariants, cn } from '@sim/emcn'
+import Link from 'next/link'
+import { flushSync } from 'react-dom'
+import { ChevronArrow } from '@/app/(landing)/components/chevron-arrow'
+import {
+  HOME_INSET,
+  LANDING_CONTENT_WIDTH,
+  LANDING_GUTTER,
+} from '@/app/(landing)/components/landing-layout'
+import { NavMenuCard } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-card'
 import { NavMenuItem } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-item'
+import { NavMenuLogoMarquee } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-logo-marquee'
+import { NavMenuPreview } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/nav-menu-preview'
 import type { NavMenu } from '@/app/(landing)/components/navbar/components/nav-menu-chip/types'
+import { NAVBAR_GLASS_SURFACE } from '@/app/(landing)/components/navbar/components/navbar-shell'
+import { useNavbarMenu } from '@/app/(landing)/components/navbar/hooks/use-navbar-menu'
+
+interface NavMenuClusterProps {
+  /** Non-empty group of mega-menus that share one stable panel. */
+  menus: readonly [NavMenu, ...NavMenu[]]
+}
+
+const PANEL_BASE =
+  'pointer-events-none invisible fixed top-[var(--landing-header-height)] right-0 left-0 z-50 translate-y-0.5 opacity-0 transition-[opacity,transform,visibility] duration-[180ms] ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:translate-y-0 motion-reduce:transition-none'
+/** Make links focusable immediately on entry; visibility transitions only during exit. */
+const PANEL_OPEN =
+  'pointer-events-auto visible translate-y-0 opacity-100 transition-[opacity,transform]'
+const MENU_ID = 'primary-navigation-mega-menu'
+
+/** Balances the hidden 16px chevron, 2px gap, and asymmetric pill padding at rest. */
+const RESTING_LABEL_POSITION = 'translate-x-[7px]'
+const TRIGGER_CONTENT_TRANSITION =
+  'transition-[opacity,transform,translate] duration-150 ease-out motion-reduce:transition-none'
 
 /**
- * Navbar mega-menu - a chip trigger and the framed panel it reveals.
- *
- * Open is CSS-first. The trigger and panel share a `group/navmenu` wrapper; the
- * panel sits behind `invisible opacity-0` and is revealed on
- * `group-hover/navmenu` (pointer) and `group-focus-within/navmenu` (keyboard and
- * touch-focus). The reveal classes ship in the initial HTML, so the menu opens
- * with zero JS even before hydration.
- *
- * The one thing CSS can't do is force the panel shut while the pointer still
- * rests on a just-clicked link (the navbar persists across client navigations,
- * so `:hover`/`:focus-within` keep matching on the new page). A single `closed`
- * flag handles that: selecting a row drops the reveal classes (closing the panel
- * regardless of hover/focus) and blurs the link so focus-within clears;
- * `onMouseLeave` and the trigger's `onFocus` re-arm it for the next open.
- *
- * Accessibility: `visibility: hidden` keeps the panel's links out of the tab
- * order while closed, so Tab order is trigger → (panel opens on focus) → links →
- * next nav item. The 8px `pt-2` bridge keeps the trigger and the framed card in
- * one contiguous hover area so the pointer never crosses a dead gap. Motion
- * collapses under `prefers-reduced-motion`.
- *
- * The panel chrome replicates the `ChipModal` framed-card look exactly: an outer
- * `--surface-4` ring (`p-[3px]`, overlay shadow) wrapping an inner `--bg`
- * surface, with the item grid padded inside.
- *
- * The grid is a plain three-column grid filled in reading order, so a menu with
- * a non-multiple-of-three item count leaves its gap in the bottom-right corner
- * rather than centering the short row.
+ * A floating menu hangs from its own trigger, centred under it. The 12px top
+ * padding is the hover bridge from the chip's bottom edge to the surface,
+ * which lands level with the full-width surface's top.
  */
+const FLOATING_BASE =
+  'pointer-events-none invisible absolute top-full left-1/2 z-50 -translate-x-1/2 translate-y-0.5 pt-3 opacity-0 transition-[opacity,transform,visibility] duration-[180ms] ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:translate-y-0 motion-reduce:transition-none'
+const FLOATING_OPEN =
+  'pointer-events-auto visible translate-y-0 opacity-100 transition-[opacity,transform]'
 
-interface NavMenuChipProps {
-  /** The menu to render - trigger label and item grid. */
-  menu: NavMenu
-}
+const isFloating = (menu: NavMenu) => menu.layout === 'floating'
+const triggerIdFor = (menu: NavMenu) => `nav-${menu.label.toLowerCase()}-menu-trigger`
+const floatingPanelIdFor = (menu: NavMenu) => `nav-${menu.label.toLowerCase()}-menu`
 
-const PANEL_BASE =
-  'pointer-events-none invisible absolute top-full left-0 z-50 translate-y-1 pt-2 opacity-0 transition-[opacity,transform] duration-150 motion-reduce:transition-none'
+/**
+ * Desktop mega-menu cluster with one continuous hover and focus boundary.
+ * The triggers, the full-width panel, and any floating panel are descendants
+ * of the same root. Its padded hit area spans the navbar’s bottom gutter and
+ * overlaps the panel’s short entrance motion without moving the triggers. An
+ * open surface also bridges the header width for diagonal travel to far-side links. Switching
+ * triggers updates content inside the already-open surface instead of
+ * unmounting one panel and opening another, eliminating the close/open
+ * flicker during lateral movement. A `floating` menu opens its own compact
+ * panel under its trigger instead of the shared surface, which keeps the
+ * last surface menu so it can fade out with its content intact.
+ */
+export function NavMenuCluster({ menus }: NavMenuClusterProps) {
+  const rootRef = useRef<HTMLDivElement>(null)
+  const { open, updateOpen } = useNavbarMenu('desktop')
+  const [activeMenu, setActiveMenu] = useState<NavMenu>(menus[0])
+  const [surfaceMenu, setSurfaceMenu] = useState<NavMenu>(
+    () => menus.find((menu) => !isFloating(menu)) ?? menus[0]
+  )
+  const [activeItem, setActiveItem] = useState(surfaceMenu.sections[0].items[0])
 
-/** Reveal-on-open classes, omitted while `closed` so a selected menu stays shut. */
-const PANEL_REVEAL =
-  'group-hover/navmenu:pointer-events-auto group-hover/navmenu:visible group-hover/navmenu:translate-y-0 group-hover/navmenu:opacity-100 group-focus-within/navmenu:pointer-events-auto group-focus-within/navmenu:visible group-focus-within/navmenu:translate-y-0 group-focus-within/navmenu:opacity-100'
+  useEffect(() => {
+    if (!open) return
+    const onEscape = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape') return
+      event.preventDefault()
+      if (rootRef.current?.contains(document.activeElement)) {
+        document.getElementById(triggerIdFor(activeMenu))?.focus()
+      }
+      updateOpen(false)
+    }
+    document.addEventListener('keydown', onEscape)
+    return () => document.removeEventListener('keydown', onEscape)
+  }, [activeMenu, open, updateOpen])
 
-export function NavMenuChip({ menu }: NavMenuChipProps) {
-  const { label, items } = menu
-  const [closed, setClosed] = useState(false)
+  const activateMenu = (menu: NavMenu) => {
+    setActiveMenu(menu)
+    if (!isFloating(menu)) {
+      setSurfaceMenu(menu)
+      setActiveItem(menu.sections[0].items[0])
+    }
+    updateOpen(true)
+  }
 
-  const reArm = () => setClosed(false)
+  const enterMenu = (menu: NavMenu, last = false) => {
+    flushSync(() => activateMenu(menu))
+    const panel = document.getElementById(isFloating(menu) ? floatingPanelIdFor(menu) : MENU_ID)
+    const links = panel?.querySelectorAll<HTMLAnchorElement>('a[href]')
+    ;(last ? links?.[links.length - 1] : links?.[0])?.focus()
+  }
+
+  const closeFromPointer = () => {
+    if (rootRef.current?.contains(document.activeElement)) return
+    updateOpen(false)
+  }
 
   const handleSelect = () => {
-    setClosed(true)
+    updateOpen(false)
     if (document.activeElement instanceof HTMLElement) document.activeElement.blur()
   }
 
+  const surfaceOpen = open && !isFloating(activeMenu)
+
   return (
-    <div className='group/navmenu relative' onMouseLeave={reArm}>
-      <button
-        type='button'
-        aria-label={`${label} menu`}
-        onFocus={reArm}
-        className={cn(
-          chipVariants(),
-          /* Held open by the wrapper's state, not the button's own hover, so the
-             panel and its trigger light together. */
-          'group-focus-within/navmenu:bg-[var(--surface-active)] group-hover/navmenu:bg-[var(--surface-active)]'
-        )}
+    <div
+      ref={rootRef}
+      className='-mb-5 relative pb-5'
+      onMouseLeave={closeFromPointer}
+      onBlurCapture={(event) => {
+        if (!event.currentTarget.contains(event.relatedTarget as Node | null)) updateOpen(false)
+      }}
+    >
+      {surfaceOpen && (
+        <div
+          aria-hidden='true'
+          data-navigation-hover-bridge
+          className='fixed inset-x-0 top-[calc(var(--landing-header-height)-62px)] z-0 h-[66px]'
+        />
+      )}
+      <div className='relative z-10 flex items-center gap-1'>
+        {menus.map((menu) => {
+          const active = open && menu.label === activeMenu.label
+          const floating = isFloating(menu)
+          const triggerId = triggerIdFor(menu)
+          const panelId = floating ? floatingPanelIdFor(menu) : MENU_ID
+
+          return (
+            <div key={menu.label} className='relative'>
+              <button
+                id={triggerId}
+                type='button'
+                aria-label={`${menu.label} menu`}
+                aria-controls={panelId}
+                aria-haspopup='true'
+                aria-expanded={active}
+                onMouseEnter={() => activateMenu(menu)}
+                onFocus={() => activateMenu(menu)}
+                onClick={() => enterMenu(menu)}
+                onKeyDown={(event) => {
+                  if (
+                    event.key === 'ArrowDown' ||
+                    event.key === 'ArrowUp' ||
+                    (event.key === 'Tab' && !event.shiftKey && active && !floating)
+                  ) {
+                    event.preventDefault()
+                    enterMenu(menu, event.key === 'ArrowUp')
+                  }
+                }}
+                className={cn(
+                  chipVariants({ active }),
+                  'gap-0.5 rounded-full pr-3 pl-4 transition-[background-color] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)]'
+                )}
+              >
+                <span
+                  className={cn(
+                    chipContentLabelClass,
+                    TRIGGER_CONTENT_TRANSITION,
+                    active ? 'translate-x-0' : RESTING_LABEL_POSITION
+                  )}
+                >
+                  {menu.label}
+                </span>
+                <ChipChevronDown
+                  className={cn(
+                    TRIGGER_CONTENT_TRANSITION,
+                    active ? 'translate-x-0 opacity-100' : '-translate-x-1 opacity-0'
+                  )}
+                />
+              </button>
+
+              {floating && (
+                <div
+                  id={panelId}
+                  aria-labelledby={triggerId}
+                  aria-hidden={!active}
+                  className={cn(FLOATING_BASE, active && FLOATING_OPEN)}
+                >
+                  <div
+                    className={cn(
+                      'flex w-[620px] flex-col gap-3 rounded-2xl border border-[var(--border)] p-3 shadow-xs',
+                      NAVBAR_GLASS_SURFACE
+                    )}
+                  >
+                    <div
+                      role='group'
+                      aria-label={menu.sections[0].label}
+                      className='grid grid-cols-2 gap-3'
+                    >
+                      {menu.sections.flatMap((section) =>
+                        section.items.map((item) => (
+                          <NavMenuCard
+                            key={item.title}
+                            item={item}
+                            prefetch={active ? null : false}
+                            onSelect={handleSelect}
+                          />
+                        ))
+                      )}
+                    </div>
+                    {menu.marquee === 'customers' && <NavMenuLogoMarquee />}
+                    {menu.index && (
+                      <Link
+                        href={menu.index.href}
+                        prefetch={active ? null : false}
+                        onClick={handleSelect}
+                        className='group/link flex items-center justify-between rounded-lg px-2 py-1 text-[var(--text-body)] text-small transition-colors hover:bg-[var(--surface-hover)]'
+                      >
+                        {menu.index.label}
+                        <ChevronArrow />
+                      </Link>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          )
+        })}
+      </div>
+
+      <div
+        id={MENU_ID}
+        aria-labelledby={triggerIdFor(surfaceMenu)}
+        aria-hidden={!surfaceOpen}
+        className={cn(PANEL_BASE, surfaceOpen && PANEL_OPEN)}
+        onKeyDown={(event) => {
+          if (event.key !== 'Tab') return
+          const controls = Array.from(
+            event.currentTarget.querySelectorAll<HTMLElement>(
+              'a[href], button:not([disabled]):not([tabindex="-1"])'
+            )
+          ).filter((control) => !control.closest('[inert], [aria-hidden="true"]'))
+          if (event.shiftKey && event.target === controls[0]) {
+            event.preventDefault()
+            document.getElementById(triggerIdFor(surfaceMenu))?.focus()
+          } else if (!event.shiftKey && event.target === controls[controls.length - 1]) {
+            const nextMenu = menus[menus.indexOf(surfaceMenu) + 1]
+            if (nextMenu) {
+              event.preventDefault()
+              document.getElementById(triggerIdFor(nextMenu))?.focus()
+            }
+          }
+        }}
       >
-        <span className={chipContentLabelClass}>{label}</span>
-        <ChipChevronDown />
-      </button>
-
-      <div className={cn(PANEL_BASE, !closed && PANEL_REVEAL)}>
-        <div className='w-[840px] rounded-xl border border-[var(--border-muted)] bg-[var(--surface-4)] p-[3px]'>
-          <div className='rounded-lg border border-[var(--border-1)] bg-[var(--bg)] p-2'>
-            <div className='grid grid-cols-3 gap-1' role='group' aria-label={label}>
-              {items.map((item) => (
-                <NavMenuItem key={item.title} item={item} onSelect={handleSelect} />
-              ))}
+        <div className={cn('border-[var(--border)] border-y', NAVBAR_GLASS_SURFACE)}>
+          <div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER)}>
+            <div
+              className={cn(
+                'grid grid-cols-[minmax(0,1fr)_minmax(0,min(48%,640px))] gap-10 py-10 max-xl:gap-9 max-xl:py-9',
+                HOME_INSET
+              )}
+            >
+              <div className='grid min-w-0 grid-cols-2 gap-x-10 self-start'>
+                {surfaceMenu.sections.map((section) => (
+                  <div
+                    key={section.label}
+                    role='group'
+                    aria-label={section.label}
+                    className='flex min-w-0 flex-col gap-9'
+                  >
+                    {section.items.map((item) => (
+                      <NavMenuItem
+                        key={item.title}
+                        item={item}
+                        active={surfaceOpen && activeItem.href === item.href}
+                        prefetch={surfaceOpen ? null : false}
+                        onActivate={() => setActiveItem(item)}
+                        onSelect={handleSelect}
+                      />
+                    ))}
+                  </div>
+                ))}
+              </div>
+
+              <NavMenuPreview item={activeItem} />
             </div>
           </div>
         </div>
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/types.ts b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/types.ts
index d9c9006d99c..61d75d2c422 100644
--- a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/types.ts
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/types.ts
@@ -1,3 +1,31 @@
+export type NavMenuPreviewKind =
+  | 'blog'
+  | 'changelog'
+  | 'docs'
+  | 'integrations'
+  | 'library'
+  | 'models'
+  | 'overview'
+  | 'enterprise'
+  | 'files'
+  | 'knowledge'
+  | 'logs'
+  | 'resource'
+  | 'tables'
+  | 'team'
+  | 'workflows'
+
+export interface NavMenuPreview {
+  /** Visual grammar used by the code-native product preview. */
+  kind: NavMenuPreviewKind
+  /** Small context label above the preview title. */
+  eyebrow: string
+  /** Preview headline. */
+  title: string
+  /** Three real product details rendered inside the preview surface. */
+  details: readonly [string, string, string]
+}
+
 /**
  * One destination inside a navbar mega-menu - a title, a one-line description,
  * and a crawlable href. {@link external} routes render as a plain
@@ -5,7 +33,9 @@
  * `<Link>`.
  */
 export interface NavMenuItemData {
-  /** Item heading (e.g. "Mothership"). */
+  /** Muted product prefix, used by Sim modules. */
+  brand?: string
+  /** Item heading (e.g. "Knowledge Base"). */
   title: string
   /** One-line description shown under the title. */
   description: string
@@ -13,15 +43,65 @@ export interface NavMenuItemData {
   href: string
   /** When true, the row is an off-site link opened in a new tab. */
   external?: boolean
+  /** Content and graphic shown when this item is hovered or focused. */
+  preview: NavMenuPreview
+  /** For a `floating` menu: the wordmark shown centred on the bloc's white placement. */
+  card?: NavMenuCard
+}
+
+/** The image placement on a customer bloc - a wordmark sized by optical height at its own aspect. */
+export interface NavMenuCard {
+  imageSrc: string
+  imageAlt: string
+  /** Intrinsic width ÷ height, so the mark scales without distortion. */
+  aspect: number
+  /** Display height in px, tuned by eye for the placement. */
+  height: number
+  /**
+   * The placement's ground: `dark` flattens the mark to white on dark grey,
+   * `light` keeps its ink on light grey. With a {@link background} the tone
+   * is the ground behind the picture while it loads.
+   */
+  tone: 'dark' | 'light'
+  /** A picture filling the placement under the mark, for a `dark` tone. */
+  background?: {
+    /** Path under `/public`; the tile shows it cropped to cover. */
+    src: string
+  }
+}
+
+/** One labeled column of destinations inside a mega-menu. */
+export interface NavMenuSection {
+  /** Section label, e.g. "Build" or "Operate". */
+  label: string
+  /** Destinations in reading order. */
+  items: readonly [NavMenuItemData, ...NavMenuItemData[]]
 }
 
 /**
- * A single navbar dropdown: its trigger label and the flat three-column grid of
- * items it reveals.
+ * A single navbar dropdown with an editorial introduction, grouped destinations,
+ * and one dynamic preview region.
  */
 export interface NavMenu {
-  /** Trigger label and accessible name of the panel (e.g. "Platform"). */
+  /** Trigger label and accessible name of the panel. */
   label: string
-  /** The destinations rendered in the panel, in display order. */
-  items: readonly NavMenuItemData[]
+  /** Index destination shown alongside a menu's featured links. */
+  index?: { label: string; href: string }
+  /** Small label above the menu heading. */
+  eyebrow: string
+  /** Menu-level positioning statement. */
+  heading: string
+  /** Supporting menu-level copy. */
+  description: string
+  /** Grouped destinations rendered in the panel. */
+  sections: readonly [NavMenuSection, ...NavMenuSection[]]
+  /**
+   * How the desktop menu presents its destinations. The default is the
+   * full-width surface with columns and a preview region; `floating` renders
+   * every item as an image bloc inside a compact panel that floats under the
+   * menu's own trigger (customer stories).
+   */
+  layout?: 'floating'
+  /** Slide the shared customer wordmarks under a `floating` menu's blocs. */
+  marquee?: 'customers'
 }
diff --git a/apps/sim/app/(landing)/components/navbar/components/navbar-auth-pill/index.ts b/apps/sim/app/(landing)/components/navbar/components/navbar-auth-pill/index.ts
new file mode 100644
index 00000000000..7e3d78811ad
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/navbar-auth-pill/index.ts
@@ -0,0 +1 @@
+export { NavbarAuthPill } from './navbar-auth-pill'
diff --git a/apps/sim/app/(landing)/components/navbar/components/navbar-auth-pill/navbar-auth-pill.tsx b/apps/sim/app/(landing)/components/navbar/components/navbar-auth-pill/navbar-auth-pill.tsx
new file mode 100644
index 00000000000..7897c759384
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/navbar-auth-pill/navbar-auth-pill.tsx
@@ -0,0 +1,50 @@
+import { cn } from '@sim/emcn'
+import Link from 'next/link'
+import { LOGIN_HREF, SIGNUP_HREF } from '@/app/(landing)/constants'
+
+interface NavbarAuthPillProps {
+  size?: 'compact' | 'default'
+  className?: string
+  onNavigate?: () => void
+}
+
+const SEGMENT_CLASSES =
+  'relative inline-flex min-w-0 items-center justify-center whitespace-nowrap text-[var(--text-body)] transition-colors duration-150 hover:bg-[var(--surface-hover)] hover:text-[var(--text-primary)] focus-visible:z-10 focus-visible:outline focus-visible:outline-1 focus-visible:outline-[var(--text-primary)] focus-visible:outline-offset-[-3px] motion-reduce:transition-none'
+
+/** Two independent account links share one pill and a short inset divider. */
+export function NavbarAuthPill({ size = 'compact', className, onNavigate }: NavbarAuthPillProps) {
+  const compact = size === 'compact'
+
+  return (
+    <div
+      role='group'
+      aria-label='Account actions'
+      className={cn(
+        'inline-flex shrink-0 items-stretch rounded-full border border-[var(--border)]',
+        compact ? 'h-[26px] text-[13px]' : 'h-9 text-[14px]',
+        className
+      )}
+    >
+      <Link
+        href={LOGIN_HREF}
+        prefetch={false}
+        onClick={onNavigate}
+        className={cn(SEGMENT_CLASSES, 'rounded-l-full', compact ? 'px-3' : 'flex-auto px-2')}
+      >
+        Log in
+      </Link>
+      <span
+        aria-hidden='true'
+        className={cn('w-px shrink-0 self-center bg-[var(--border)]', compact ? 'h-3' : 'h-3.5')}
+      />
+      <Link
+        href={SIGNUP_HREF}
+        prefetch={false}
+        onClick={onNavigate}
+        className={cn(SEGMENT_CLASSES, 'rounded-r-full', compact ? 'px-3' : 'flex-auto px-2')}
+      >
+        Start building
+      </Link>
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/navbar/components/navbar-shell/navbar-shell.test.tsx b/apps/sim/app/(landing)/components/navbar/components/navbar-shell/navbar-shell.test.tsx
new file mode 100644
index 00000000000..580f7484de2
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/components/navbar-shell/navbar-shell.test.tsx
@@ -0,0 +1,198 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import {
+  NavbarShell,
+  useNavbarFrost,
+} from '@/app/(landing)/components/navbar/components/navbar-shell/navbar-shell'
+
+vi.mock('@sim/emcn', () => ({
+  cn: (...values: Array<string | false | null | undefined>) => values.filter(Boolean).join(' '),
+}))
+
+let resizeObservers: ControlledResizeObserver[]
+let intersectionObservers: ControlledIntersectionObserver[]
+
+class ControlledResizeObserver implements ResizeObserver {
+  observe = vi.fn<(target: Element) => void>()
+  unobserve = vi.fn<(target: Element) => void>()
+  disconnect = vi.fn()
+
+  constructor(private readonly callback: ResizeObserverCallback) {
+    resizeObservers.push(this)
+  }
+
+  resize(target: Element) {
+    const entry: ResizeObserverEntry = {
+      target,
+      contentRect: target.getBoundingClientRect(),
+      borderBoxSize: [],
+      contentBoxSize: [],
+      devicePixelContentBoxSize: [],
+    }
+    this.callback([entry], this)
+  }
+}
+
+class ControlledIntersectionObserver {
+  observe = vi.fn<(target: Element) => void>()
+  disconnect = vi.fn()
+
+  constructor(
+    readonly callback: IntersectionObserverCallback,
+    readonly options?: IntersectionObserverInit
+  ) {
+    intersectionObservers.push(this)
+  }
+}
+
+function MenuControls() {
+  const frost = useNavbarFrost()
+  if (!frost) throw new Error('Menu controls require the actual navbar context')
+
+  return (
+    <>
+      <button type='button' onClick={() => frost.setMenuOpen('desktop', true)}>
+        Open desktop
+      </button>
+      <button type='button' onClick={() => frost.setMenuOpen('desktop', false)}>
+        Close desktop
+      </button>
+      <button type='button' onClick={() => frost.setMenuOpen('mobile', true)}>
+        Open mobile
+      </button>
+      <button type='button' onClick={() => frost.setMenuOpen('mobile', false)}>
+        Close mobile
+      </button>
+    </>
+  )
+}
+
+let host: HTMLDivElement
+let root: Root
+let mounted: boolean
+let headerHeight: number
+
+function header(): HTMLElement {
+  const element = host.querySelector<HTMLElement>('[data-landing-header]')
+  if (!element) throw new Error('Missing landing header')
+  return element
+}
+
+function click(label: string) {
+  const button = Array.from(host.querySelectorAll('button')).find(
+    (candidate) => candidate.textContent === label
+  )
+  if (!button) throw new Error(`Missing menu control: ${label}`)
+  act(() => button.dispatchEvent(new MouseEvent('click', { bubbles: true })))
+}
+
+function unmount() {
+  act(() => root.unmount())
+  mounted = false
+}
+
+beforeEach(() => {
+  resizeObservers = []
+  intersectionObservers = []
+  headerHeight = 104
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+  vi.stubGlobal('ResizeObserver', ControlledResizeObserver)
+  vi.stubGlobal('IntersectionObserver', ControlledIntersectionObserver)
+  vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function () {
+    return new DOMRect(0, 0, 1440, this.tagName === 'HEADER' ? headerHeight : 0)
+  })
+
+  host = document.createElement('div')
+  host.style.overflowY = 'scroll'
+  host.style.paddingRight = '12px'
+  host.style.scrollPaddingTop = '8px'
+  host.scrollTop = 320
+  Object.defineProperties(host, {
+    offsetWidth: { value: 1440 },
+    clientWidth: { value: 1420 },
+  })
+  document.body.append(host)
+  root = createRoot(host)
+  mounted = true
+  act(() => {
+    root.render(
+      <NavbarShell>
+        <MenuControls />
+      </NavbarShell>
+    )
+  })
+})
+
+afterEach(() => {
+  if (mounted) unmount()
+  host.remove()
+  vi.restoreAllMocks()
+  vi.unstubAllGlobals()
+})
+
+describe('NavbarShell menu positioning and scroll containment', () => {
+  it('publishes the current header height before a resize and updates it when header content changes', () => {
+    expect(header().style.getPropertyValue('--landing-header-height')).toBe('104px')
+    expect(host.style.scrollPaddingTop).toBe('104px')
+    expect(resizeObservers).toHaveLength(1)
+    expect(resizeObservers[0].observe).toHaveBeenCalledWith(header())
+
+    headerHeight = 76
+    act(() => resizeObservers[0].resize(header()))
+
+    expect(header().style.getPropertyValue('--landing-header-height')).toBe('76px')
+    expect(host.style.scrollPaddingTop).toBe('76px')
+    expect(host.scrollTop).toBe(320)
+  })
+
+  it('disconnects header and scroll-sentinel observations when the shell unmounts', () => {
+    expect(resizeObservers).toHaveLength(1)
+    expect(intersectionObservers).toHaveLength(1)
+    expect(intersectionObservers[0].options?.root).toBe(host)
+
+    unmount()
+
+    expect(resizeObservers[0].disconnect).toHaveBeenCalledOnce()
+    expect(intersectionObservers[0].disconnect).toHaveBeenCalledOnce()
+    expect(host.style.scrollPaddingTop).toBe('8px')
+  })
+
+  it('locks its actual parent scroll port and restores existing styles without changing its position', () => {
+    const bodyOverflow = document.body.style.overflowY
+    const bodyPadding = document.body.style.paddingRight
+
+    click('Open desktop')
+
+    expect(host.style.overflowY).toBe('hidden')
+    expect(host.style.paddingRight).toBe('20px')
+    expect(host.scrollTop).toBe(320)
+    expect(document.documentElement.style.overscrollBehaviorY).toBe('none')
+    expect(document.body.style.overflowY).toBe(bodyOverflow)
+    expect(document.body.style.paddingRight).toBe(bodyPadding)
+
+    click('Close desktop')
+
+    expect(host.style.overflowY).toBe('scroll')
+    expect(host.style.paddingRight).toBe('12px')
+    expect(host.scrollTop).toBe(320)
+    expect(document.documentElement.style.overscrollBehaviorY).toBe('')
+  })
+
+  it('keeps the scroll port locked until desktop and mobile menus have both closed', () => {
+    click('Open desktop')
+    click('Open mobile')
+    click('Close desktop')
+
+    expect(host.style.overflowY).toBe('hidden')
+    expect(host.style.paddingRight).toBe('20px')
+
+    click('Close mobile')
+
+    expect(host.style.overflowY).toBe('scroll')
+    expect(host.style.paddingRight).toBe('12px')
+  })
+})
diff --git a/apps/sim/app/(landing)/components/navbar/components/navbar-shell/navbar-shell.tsx b/apps/sim/app/(landing)/components/navbar/components/navbar-shell/navbar-shell.tsx
index b2eb549f1ba..dff811a914d 100644
--- a/apps/sim/app/(landing)/components/navbar/components/navbar-shell/navbar-shell.tsx
+++ b/apps/sim/app/(landing)/components/navbar/components/navbar-shell/navbar-shell.tsx
@@ -15,16 +15,15 @@ export const NAVBAR_GLASS_SURFACE = cn(colorMixFallbacks.navbarGlass, 'backdrop-
 
 interface NavbarFrostContextValue {
   /**
-   * Reported by the mobile sheet as it opens/closes so the bar frosts to glass
-   * while the menu is open - the bar and the dropdown then read as one continuous
-   * frosted panel instead of a transparent bar over a separate sheet.
+   * Reported independently by the desktop and mobile menus so shared shell
+   * effects remain active until every open navigation surface has closed.
    */
-  setMenuOpen: (open: boolean) => void
+  setMenuOpen: (source: 'desktop' | 'mobile', open: boolean) => void
 }
 
 const NavbarFrostContext = createContext<NavbarFrostContextValue | null>(null)
 
-/** Lets the mobile nav report its open state up to the shell so the bar can frost in sync. */
+/** Lets each nav surface report its open state so the shell can coordinate shared effects. */
 export function useNavbarFrost(): NavbarFrostContextValue | null {
   return use(NavbarFrostContext)
 }
@@ -34,8 +33,8 @@ interface NavbarShellProps {
 }
 
 /**
- * Sticky navbar chrome that frosts to glass once the page scrolls (or, on mobile,
- * while the dropdown menu is open).
+ * Sticky navbar chrome that frosts to glass once the page scrolls or while a
+ * desktop or mobile navigation menu is open.
  *
  * At the very top the bar uses the same solid canvas token as the hero, so it is
  * visually seamless while still preventing route content from painting through
@@ -51,9 +50,14 @@ interface NavbarShellProps {
  * vertical wobble of the bar's text as you scroll near the top. The blur snaps in
  * while the fill still fades, so the frost appears smoothly without the jitter.
  *
- * The mobile sheet reports its open state through {@link NavbarFrostContext}, so
- * opening the menu also frosts the bar - the bar and the dropdown then form one
- * continuous glass panel with no transparent seam between them.
+ * The measured header height anchors the desktop panel and bounds the mobile
+ * sheet, including changes to the announcement strip or text sizing. The same
+ * height offsets native page and hash scrolling inside the landing scroll port.
+ *
+ * Both navigation surfaces report open state through {@link NavbarFrostContext}.
+ * While either is open, the shell locks its actual scroll port, preserves the
+ * scrollbar gutter, frosts the header, and fades page content beneath a fixed
+ * veil. The sticky bar, trigger, and menu remain one stationary foreground layer.
  *
  * The frost lives on a separate sibling layer (`absolute inset-0 -z-10`) behind
  * the nav content rather than on the `<header>` element itself. This is
@@ -73,8 +77,34 @@ interface NavbarShellProps {
  */
 export function NavbarShell({ children }: NavbarShellProps) {
   const sentinelRef = useRef<HTMLDivElement>(null)
+  const headerRef = useRef<HTMLElement>(null)
   const [scrolled, setScrolled] = useState(false)
-  const [menuOpen, setMenuOpen] = useState(false)
+  const [menuOpenBySource, setMenuOpenBySource] = useState({ desktop: false, mobile: false })
+  const menuOpen = menuOpenBySource.desktop || menuOpenBySource.mobile
+
+  useEffect(() => {
+    const header = headerRef.current
+    const scrollPort = sentinelRef.current?.parentElement
+    if (!header || !scrollPort) return
+
+    const previousScrollPaddingTop = scrollPort.style.scrollPaddingTop
+    let previousHeight = 0
+    const updateHeight = () => {
+      const height = header.getBoundingClientRect().height
+      if (height === previousHeight) return
+      previousHeight = height
+      header.style.setProperty('--landing-header-height', `${height}px`)
+      scrollPort.style.scrollPaddingTop = `${height}px`
+    }
+
+    updateHeight()
+    const observer = new ResizeObserver(updateHeight)
+    observer.observe(header)
+    return () => {
+      observer.disconnect()
+      scrollPort.style.scrollPaddingTop = previousScrollPaddingTop
+    }
+  }, [])
 
   useEffect(() => {
     const sentinel = sentinelRef.current
@@ -89,12 +119,55 @@ export function NavbarShell({ children }: NavbarShellProps) {
     return () => observer.disconnect()
   }, [])
 
-  const frost = useMemo<NavbarFrostContextValue>(() => ({ setMenuOpen }), [])
+  useEffect(() => {
+    if (!menuOpen) return
+
+    const scrollPort = sentinelRef.current?.parentElement
+    if (!scrollPort) return
+
+    const root = document.documentElement
+    const previousOverflowY = scrollPort.style.overflowY
+    const previousPaddingRight = scrollPort.style.paddingRight
+    const previousRootOverscrollY = root.style.overscrollBehaviorY
+    const scrollbarWidth = scrollPort.offsetWidth - scrollPort.clientWidth
+
+    scrollPort.style.overflowY = 'hidden'
+    if (scrollbarWidth > 0) scrollPort.style.paddingRight = `${scrollbarWidth}px`
+    /**
+     * A hidden-overflow port is no longer a scroll target, so wheel gestures
+     * over the open menu chain to the viewport and rubber-band the document
+     * past the top, carrying the sticky bar away from the fixed panel. The
+     * root's overscroll setting is what the viewport consults, so pin it for
+     * the lock's lifetime.
+     */
+    root.style.overscrollBehaviorY = 'none'
+
+    return () => {
+      scrollPort.style.overflowY = previousOverflowY
+      scrollPort.style.paddingRight = previousPaddingRight
+      root.style.overscrollBehaviorY = previousRootOverscrollY
+    }
+  }, [menuOpen])
+
+  const frost = useMemo<NavbarFrostContextValue>(
+    () => ({
+      setMenuOpen: (source, open) => {
+        setMenuOpenBySource((current) =>
+          current[source] === open ? current : { ...current, [source]: open }
+        )
+      },
+    }),
+    []
+  )
 
   return (
     <NavbarFrostContext value={frost}>
       <div ref={sentinelRef} aria-hidden='true' className='-mb-px h-px' />
-      <header className='sticky top-0 z-50'>
+      <header
+        ref={headerRef}
+        data-landing-header
+        className='sticky top-0 z-50 [--landing-header-height:calc(1.95rem_+_62px)]'
+      >
         <div
           aria-hidden='true'
           className={cn(
@@ -104,6 +177,14 @@ export function NavbarShell({ children }: NavbarShellProps) {
         />
         {children}
       </header>
+      <div
+        aria-hidden='true'
+        data-navigation-backdrop
+        className={cn(
+          'pointer-events-none fixed inset-0 z-40 bg-[var(--bg)] transition-opacity duration-[180ms] ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none',
+          menuOpen ? 'opacity-75' : 'opacity-0'
+        )}
+      />
     </NavbarFrostContext>
   )
 }
diff --git a/apps/sim/app/(landing)/components/navbar/components/sim-wordmark/sim-wordmark.tsx b/apps/sim/app/(landing)/components/navbar/components/sim-wordmark/sim-wordmark.tsx
index 37c883552dd..13632778416 100644
--- a/apps/sim/app/(landing)/components/navbar/components/sim-wordmark/sim-wordmark.tsx
+++ b/apps/sim/app/(landing)/components/navbar/components/sim-wordmark/sim-wordmark.tsx
@@ -1,5 +1,19 @@
 import { WORDMARK_PATHS, WORDMARK_VIEW_BOX } from '@/lib/branding/wordmark'
 
+const WORDMARK_FILLS = {
+  body: 'var(--text-body)',
+  'brand-muted': 'var(--text-tertiary)',
+  inherit: 'currentColor',
+  'muted-inverse': 'var(--text-muted-inverse)',
+} as const
+
+interface SimWordmarkProps {
+  /** Navbar mark or compact mark sized for a 20px ChipTag. */
+  size?: 'nav' | 'tag'
+  /** Body ink, inherited foreground, muted brand ink, or light ink for inverse surfaces. */
+  tone?: keyof typeof WORDMARK_FILLS
+}
+
 /**
  * Inline "sim" brand logotype (wordmark, no separate icon mark) - the paths
  * from the v1.0 brand guide's `simLogotype--dark.svg`, inlined so the logo
@@ -7,25 +21,30 @@ import { WORDMARK_PATHS, WORDMARK_VIEW_BOX } from '@/lib/branding/wordmark'
  * `@/lib/branding/wordmark` because the email header rasterizes the same
  * outlines.
  *
- * Filled with a single solid `var(--text-body)` - the navbar's own text color
- * (the same token its nav-link chips use) - so the wordmark reads as one solid
- * ink that matches the surrounding nav text, with no gradient or glow.
+ * Filled with the navbar's `var(--text-body)` by default. Compact marks can
+ * inherit the surrounding foreground or use the platform's muted inverse ink,
+ * without duplicating surface chrome here.
  *
- * Drawn at 18px tall - the chip's 14px label plus 2px above/below; the parent
- * slot centers it in a chip-height (30px) box. Nudged up 1.5px: the glyph mass
- * sits below the i-dot's headroom, so true geometric centering reads low.
+ * The navbar mark is 18px tall and nudged up 1.5px because the glyph mass sits
+ * below the i-dot's headroom. The tag mark is 10px tall and remains centered in
+ * the 20px tag.
  */
-export function SimWordmark() {
+export function SimWordmark({ size = 'nav', tone = 'body' }: SimWordmarkProps) {
+  const compact = size === 'tag'
+  const width = compact ? 21 : 37
+  const height = compact ? 10 : 18
+  const fill = WORDMARK_FILLS[tone]
+
   return (
     <svg
       viewBox={`0 0 ${WORDMARK_VIEW_BOX.width} ${WORDMARK_VIEW_BOX.height}`}
-      width={37}
-      height={18}
+      width={width}
+      height={height}
       fill='none'
       aria-hidden='true'
-      className='-translate-y-[1.5px] h-[18px] w-auto'
+      className={compact ? 'h-[10px] w-auto' : '-translate-y-[1.5px] h-[18px] w-auto'}
     >
-      <g fill='var(--text-body)'>
+      <g fill={fill}>
         {WORDMARK_PATHS.map((d) => (
           <path key={d} d={d} />
         ))}
diff --git a/apps/sim/app/(landing)/components/navbar/hooks/use-navbar-menu.ts b/apps/sim/app/(landing)/components/navbar/hooks/use-navbar-menu.ts
new file mode 100644
index 00000000000..132ddaf5e93
--- /dev/null
+++ b/apps/sim/app/(landing)/components/navbar/hooks/use-navbar-menu.ts
@@ -0,0 +1,34 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import { useNavbarFrost } from '@/app/(landing)/components/navbar/components/navbar-shell'
+
+/** Matches the navbar's `xl` visibility boundary. */
+const DESKTOP_QUERY = '(min-width: 1280px)'
+
+/** Releases the shared scroll lock whenever a navigation surface becomes hidden. */
+export function useNavbarMenu(source: 'desktop' | 'mobile') {
+  const frost = useNavbarFrost()
+  const [open, setOpen] = useState(false)
+  const updateOpen = useCallback(
+    (nextOpen: boolean) => {
+      setOpen(nextOpen)
+      frost?.setMenuOpen(source, nextOpen)
+    },
+    [frost, source]
+  )
+
+  useEffect(() => {
+    const media = window.matchMedia(DESKTOP_QUERY)
+    const onBreakpointChange = () => {
+      if (media.matches !== (source === 'desktop')) updateOpen(false)
+    }
+    media.addEventListener('change', onBreakpointChange)
+    return () => {
+      media.removeEventListener('change', onBreakpointChange)
+      frost?.setMenuOpen(source, false)
+    }
+  }, [frost, source, updateOpen])
+
+  return { open, updateOpen }
+}
diff --git a/apps/sim/app/(landing)/components/navbar/navbar.tsx b/apps/sim/app/(landing)/components/navbar/navbar.tsx
index 19a67772f3a..5a6fbbd364e 100644
--- a/apps/sim/app/(landing)/components/navbar/navbar.tsx
+++ b/apps/sim/app/(landing)/components/navbar/navbar.tsx
@@ -1,40 +1,25 @@
-import { ChipLink } from '@sim/emcn'
+import { ChipLink, cn } from '@sim/emcn'
 import Link from 'next/link'
+import { LandingCtaLink } from '@/app/(landing)/components/landing-cta-link'
+import { LANDING_CONTENT_WIDTH, LANDING_GUTTER } from '@/app/(landing)/components/landing-layout'
 import {
+  AnnouncementBanner,
   GitHubChip,
   LogoMark,
   MobileNav,
   NAV_MENUS,
+  NavbarAuthPill,
   NavbarShell,
-  NavMenuChip,
+  NavMenuCluster,
   SimWordmark,
 } from '@/app/(landing)/components/navbar/components'
-import { DEMO_HREF, SIGNUP_HREF } from '@/app/(landing)/constants'
+import { DEMO_HREF } from '@/app/(landing)/constants'
 
 /**
- * Landing navbar.
- *
- * Sticky `<header><nav>` landmark with `SiteNavigationElement` schema.org
- * markup. Server Component - the dropdown triggers, GitHub chip, and the
- * {@link NavbarShell} (which frosts the bar to glass on scroll) are isolated
- * client leaves, so the wordmark and links stay zero-hydration, crawlable HTML.
- *
- * Every item is a bare emcn chip. Chips carry no margin of their own, so both
- * clusters' `gap-1` is the full 4px between pills, and the nav's own `gap-4`
- * is the full 16px between the wordmark and the first menu chip - twice the
- * inter-chip gap. Only that first gap is live: the trailing cluster is `ml-auto`.
- * Horizontal padding (`px-20`, 48px) matches every section's edge gutter,
- * and the bar content is capped and centered at the shared
- * `max-w-[1460px]` (1300px content + the two 80px gutters) so the wordmark
- * aligns with the contained section content on wide screens - the frosted
- * `<header>` shell stays full-bleed. Slightly taller vertical padding. Text
- * weight is the platform default (400).
- *
- * Layout (left → right): Sim wordmark (18px glyph centered in a
- * chip-height slot, chip-text color) → the {@link NAV_MENUS} mega-menus
- * (pure-CSS hover/focus dropdowns) → Pricing → GitHub stars. Right side: Log in
- * (default chip), Contact sales (outline chip), Sign up (filled chip).
- * Enterprise lives inside the Resources mega-menu, not as a standalone chip.
+ * Shared landing navigation with centered product links, a divided account pill
+ * for Log in and Start building, and the filled demo CTA.
+ * Below `xl`, the mobile sheet keeps the wider auth cluster clear of navigation
+ * links. The shell owns sticky positioning, menu state, and the frosted surface.
  */
 
 interface NavbarProps {
@@ -44,24 +29,28 @@ interface NavbarProps {
    * navbar without a stars fetch (the GitHub chip is hidden when absent).
    */
   stars?: string
-  /**
-   * Render only the Sim wordmark - no nav menus, GitHub chip, auth chips, or
-   * mobile sheet. Used by non-marketing shells (resume, public-file auth) that
-   * want the brand header without the full marketing navigation.
-   */
-  logoOnly?: boolean
 }
 
-export function Navbar({ stars, logoOnly = false }: NavbarProps) {
+export function Navbar({ stars }: NavbarProps) {
   return (
     <NavbarShell>
+      <AnnouncementBanner />
       <nav
         aria-label='Primary navigation'
         itemScope
         itemType='https://schema.org/SiteNavigationElement'
-        className='relative mx-auto flex w-full max-w-[1460px] items-center gap-4 px-20 py-4 max-sm:px-5 max-lg:px-8'
+        className={cn(
+          'relative flex items-center justify-between py-4',
+          LANDING_CONTENT_WIDTH,
+          LANDING_GUTTER
+        )}
       >
-        <Link href='/' aria-label='Sim home' itemProp='url' className='flex h-[30px] items-center'>
+        <Link
+          href='/'
+          aria-label='Sim home'
+          itemProp='url'
+          className='relative z-10 flex h-[30px] shrink-0 items-center'
+        >
           <span itemProp='name' className='sr-only'>
             Sim
           </span>
@@ -70,33 +59,24 @@ export function Navbar({ stars, logoOnly = false }: NavbarProps) {
           </LogoMark>
         </Link>
 
-        {!logoOnly && (
-          <>
-            <div className='hidden items-center gap-1 lg:flex'>
-              {NAV_MENUS.map((menu) => (
-                <NavMenuChip key={menu.label} menu={menu} />
-              ))}
-              <ChipLink href='/pricing' itemProp='url'>
-                Pricing
-              </ChipLink>
-              {stars !== undefined && <GitHubChip stars={stars} />}
-            </div>
+        <div className='absolute inset-x-0 hidden items-center justify-center gap-1 xl:flex'>
+          <NavMenuCluster menus={NAV_MENUS} />
+          <div className='relative z-10 flex items-center gap-1'>
+            <ChipLink href='/pricing' itemProp='url' shape='round' className='px-3'>
+              Pricing
+            </ChipLink>
+            {stars !== undefined && <GitHubChip stars={stars} />}
+          </div>
+        </div>
 
-            <div className='ml-auto hidden items-center gap-1 lg:flex'>
-              <ChipLink href='/login' prefetch={false}>
-                Log in
-              </ChipLink>
-              <ChipLink variant='border' href={DEMO_HREF}>
-                Contact sales
-              </ChipLink>
-              <ChipLink variant='primary' href={SIGNUP_HREF} prefetch={false}>
-                Sign up
-              </ChipLink>
-            </div>
+        <div className='relative z-10 hidden shrink-0 items-center gap-2 xl:flex'>
+          <NavbarAuthPill />
+          <LandingCtaLink href={DEMO_HREF} size='compact' withArrow>
+            Request a demo
+          </LandingCtaLink>
+        </div>
 
-            <MobileNav stars={stars ?? '0'} />
-          </>
-        )}
+        <MobileNav stars={stars ?? '0'} />
       </nav>
     </NavbarShell>
   )
diff --git a/apps/sim/app/(landing)/components/placement-frame/index.ts b/apps/sim/app/(landing)/components/placement-frame/index.ts
new file mode 100644
index 00000000000..e01f9191dcb
--- /dev/null
+++ b/apps/sim/app/(landing)/components/placement-frame/index.ts
@@ -0,0 +1 @@
+export { PlacementFrame } from './placement-frame'
diff --git a/apps/sim/app/(landing)/components/placement-frame/placement-frame.tsx b/apps/sim/app/(landing)/components/placement-frame/placement-frame.tsx
new file mode 100644
index 00000000000..f26dc035e9f
--- /dev/null
+++ b/apps/sim/app/(landing)/components/placement-frame/placement-frame.tsx
@@ -0,0 +1,43 @@
+import { cn } from '@sim/emcn'
+import {
+  LANDING_STAGE_RADIUS,
+  LANDING_WINDOW_SHADOW,
+} from '@/app/(landing)/components/landing-layout'
+
+type PlacementTone = 'light' | 'mid' | 'dark'
+
+interface PlacementFrameProps {
+  /**
+   * Grayscale token. At most one `dark` bloc per section. It stays the darker
+   * bloc in the dark theme too - `--surface-3` under the `mid` bloc's
+   * `--surface-5` - rather than inverting with its token.
+   */
+  tone: PlacementTone
+  /** Layout/sizing classes. Never chrome. */
+  className?: string
+}
+
+const TONE = {
+  light: 'bg-[var(--surface-3)]',
+  mid: 'bg-[var(--surface-5)]',
+  dark: 'bg-[var(--text-secondary)] dark:bg-[var(--surface-3)]',
+} as const satisfies Record<PlacementTone, string>
+
+/**
+ * Grayscale placement bloc occupying Harvey's product-image slots: the ground
+ * behind a live product island - typically a `ProductWindow` offset over it so
+ * the window bleeds past the frame's clip.
+ */
+export function PlacementFrame({ tone, className }: PlacementFrameProps) {
+  return (
+    <div
+      className={cn(
+        'relative overflow-hidden',
+        LANDING_STAGE_RADIUS,
+        TONE[tone],
+        LANDING_WINDOW_SHADOW,
+        className
+      )}
+    />
+  )
+}
diff --git a/apps/sim/app/(landing)/components/platform-suite/components/build-agents-loop/build-agents-loop.tsx b/apps/sim/app/(landing)/components/platform-suite/components/build-agents-loop/build-agents-loop.tsx
new file mode 100644
index 00000000000..30246679f95
--- /dev/null
+++ b/apps/sim/app/(landing)/components/platform-suite/components/build-agents-loop/build-agents-loop.tsx
@@ -0,0 +1,132 @@
+'use client'
+
+import { useState } from 'react'
+import { cn } from '@sim/emcn'
+import { noop } from '@sim/utils/helpers'
+import {
+  HeroChatLoop,
+  type HeroChatPhase,
+} from '@/app/(landing)/components/hero/components/hero-chat-loop'
+import { HeroResourcePanel } from '@/app/(landing)/components/hero/components/hero-platform-loop/hero-resource-panel'
+import { PREVIEW_BUILD_TIMING } from '@/app/(landing)/components/hero/components/hero-platform-loop/preview-build-timing'
+import {
+  DEFAULT_REPLY_MESSAGE,
+  DEFAULT_USER_MESSAGE,
+} from '@/app/(landing)/components/hero/components/hero-platform-loop/preview-chat-content'
+import { STAGE_BLOCKS } from '@/app/(landing)/components/hero/components/hero-platform-loop/stage-data'
+import { HeroLoopShell } from '@/app/(landing)/components/shared/hero-loop-shell'
+import { PLATFORM_LOOP_RESET_FADE_MS } from '@/app/(landing)/components/shared/platform-loop-constants'
+import {
+  PREVIEW_SIDEBAR_CHATS,
+  PREVIEW_SIDEBAR_WORKFLOWS,
+} from '@/app/(landing)/components/shared/sidebar-preview-content'
+import { useMotionSafeCycle } from '@/app/(landing)/hooks/use-motion-safe-cycle'
+
+/** The cycle, in ms from its start. */
+const REPLY_AT =
+  PREVIEW_BUILD_TIMING.blockStartAt +
+  STAGE_BLOCKS.length * PREVIEW_BUILD_TIMING.blockStepMs +
+  PREVIEW_BUILD_TIMING.replyPauseMs
+const HOLD_MS = 3_600
+
+const OPEN_RESOURCES = ['workflow'] as const
+
+/**
+ * The platform suite's "Build agents" preview: Sim's real chat presentation
+ * building a workflow on the real workflow stage, the way the hero's live
+ * preview does, but on its own loop - the request posts, Sim thinks, the
+ * resource pane opens and the blocks land one by one, Sim replies, the frame
+ * holds and fades back to the start. Every piece is the hero's own
+ * ({@link HeroChatLoop}, {@link HeroResourcePanel}, the lead-enrichment
+ * `STAGE_BLOCKS`); only the driver differs, and nothing here takes input -
+ * the host window is `pointer-events-none`. Reduced motion shows the finished
+ * build.
+ */
+export function BuildAgentsLoop() {
+  const [phase, setPhase] = useState<HeroChatPhase>('reply')
+  const [stageOpen, setStageOpen] = useState(true)
+  const [builtCount, setBuiltCount] = useState(STAGE_BLOCKS.length)
+  const [fading, setFading] = useState(false)
+  const [cycleId, setCycleId] = useState(0)
+
+  useMotionSafeCycle({
+    scheduleCycle: () => {
+      setFading(false)
+      setPhase('user')
+      setStageOpen(false)
+      setBuiltCount(0)
+      setCycleId((id) => id + 1)
+      const totalMs = REPLY_AT + HOLD_MS
+      return {
+        timers: [
+          setTimeout(() => setPhase('thinking'), PREVIEW_BUILD_TIMING.thinkingAt),
+          setTimeout(() => setPhase('dispatching'), PREVIEW_BUILD_TIMING.dispatchAt),
+          setTimeout(() => setPhase('building'), PREVIEW_BUILD_TIMING.agentAt),
+          setTimeout(() => setStageOpen(true), PREVIEW_BUILD_TIMING.stageOpenAt),
+          ...STAGE_BLOCKS.map((_, index) =>
+            setTimeout(
+              () => setBuiltCount(index + 1),
+              PREVIEW_BUILD_TIMING.blockStartAt + index * PREVIEW_BUILD_TIMING.blockStepMs
+            )
+          ),
+          setTimeout(() => setPhase('reply'), REPLY_AT),
+          setTimeout(() => setFading(true), totalMs - PLATFORM_LOOP_RESET_FADE_MS),
+        ],
+        totalMs,
+      }
+    },
+    showFinished: () => {
+      setFading(false)
+      setPhase('reply')
+      setStageOpen(true)
+      setBuiltCount(STAGE_BLOCKS.length)
+    },
+  })
+
+  return (
+    <HeroLoopShell chats={PREVIEW_SIDEBAR_CHATS} workflows={PREVIEW_SIDEBAR_WORKFLOWS}>
+      <div
+        className={cn(
+          'relative flex h-full w-full overflow-hidden rounded-[6px] border border-[var(--border)] bg-[var(--bg)] transition-opacity duration-300 ease-out',
+          fading ? 'opacity-0' : 'opacity-100'
+        )}
+      >
+        <div className='relative h-full min-w-0 flex-1'>
+          <HeroChatLoop
+            phase={phase}
+            fading={fading}
+            userMessage={DEFAULT_USER_MESSAGE}
+            replyMessage={DEFAULT_REPLY_MESSAGE}
+            composerValue=''
+            isSending={phase !== 'reply'}
+            onComposerValueChange={noop}
+            onOpenWorkflowResource={noop}
+            onFollowUpSelect={noop}
+            onSubmit={noop}
+            onStopGeneration={noop}
+          />
+        </div>
+        <div
+          className={cn(
+            'h-full shrink-0 overflow-hidden border-[var(--border)] bg-[var(--bg)] transition-[width,border-width] duration-200 [transition-timing-function:cubic-bezier(0.25,0.1,0.25,1)]',
+            stageOpen ? 'w-1/2 border-l' : 'w-0 border-l-0'
+          )}
+        >
+          <div className='h-full w-full'>
+            <HeroResourcePanel
+              activeId='workflow'
+              builtCount={builtCount}
+              openIds={OPEN_RESOURCES}
+              workflowKey={cycleId}
+              onActiveChange={noop}
+              onClose={noop}
+              onCloseResource={noop}
+              onOpenResource={noop}
+              onRunWorkflow={noop}
+            />
+          </div>
+        </div>
+      </div>
+    </HeroLoopShell>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/platform-suite/components/build-agents-loop/index.ts b/apps/sim/app/(landing)/components/platform-suite/components/build-agents-loop/index.ts
new file mode 100644
index 00000000000..7d48b85e537
--- /dev/null
+++ b/apps/sim/app/(landing)/components/platform-suite/components/build-agents-loop/index.ts
@@ -0,0 +1 @@
+export { BuildAgentsLoop } from './build-agents-loop'
diff --git a/apps/sim/app/(landing)/components/platform-suite/components/governance-loop/governance-loop.test.tsx b/apps/sim/app/(landing)/components/platform-suite/components/governance-loop/governance-loop.test.tsx
new file mode 100644
index 00000000000..67d543939de
--- /dev/null
+++ b/apps/sim/app/(landing)/components/platform-suite/components/governance-loop/governance-loop.test.tsx
@@ -0,0 +1,70 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, type ReactNode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('@sim/emcn', () => ({
+  Badge: ({ children }: { children: ReactNode }) => <span data-badge=''>{children}</span>,
+  cn: (...values: Array<string | false | null | undefined>) => values.filter(Boolean).join(' '),
+}))
+
+vi.mock('@sim/emcn/icons', () => ({
+  Building: () => <svg aria-hidden='true' />,
+  Download: () => <svg aria-hidden='true' />,
+}))
+
+vi.mock('@/app/(landing)/components/shared/responsive-design-stage', () => ({
+  ResponsiveDesignStage: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+}))
+
+vi.mock('@/app/(landing)/hooks/use-motion-safe-cycle', async () => {
+  const React = await import('react')
+  return {
+    useMotionSafeCycle: ({
+      scheduleCycle,
+    }: {
+      scheduleCycle: () => { timers: ReturnType<typeof setTimeout>[]; totalMs: number }
+    }) => {
+      React.useEffect(() => {
+        const cycle = scheduleCycle()
+        return () => cycle.timers.forEach(clearTimeout)
+      }, [])
+    },
+  }
+})
+
+import { GovernanceLoop } from '@/app/(landing)/components/platform-suite/components/governance-loop'
+
+afterEach(() => {
+  vi.useRealTimers()
+  document.body.replaceChildren()
+})
+
+describe('GovernanceLoop', () => {
+  it('lands the workspaces, fills spend against the budget, and trips the near-limit status', () => {
+    vi.useFakeTimers()
+    const host = document.createElement('div')
+    document.body.append(host)
+    act(() => {
+      createRoot(host).render(<GovernanceLoop />)
+    })
+
+    expect(host.textContent).toContain('Organization')
+    expect(host.textContent).toContain('Spend this month')
+    const rows = () => [...host.querySelectorAll('tbody tr')]
+    expect(rows()).toHaveLength(5)
+    expect(rows().every((row) => row.className.includes('opacity-0'))).toBe(true)
+    expect(host.textContent).toContain('$0 of $6,000')
+    expect(host.textContent).not.toContain('Near limit')
+
+    act(() => {
+      vi.advanceTimersByTime(3_000)
+    })
+    expect(rows().every((row) => row.className.includes('opacity-100'))).toBe(true)
+    expect(host.textContent).toContain('$3,480 of $6,000')
+    expect(host.textContent).toContain('58% of the org budget')
+    expect(host.textContent).toContain('Near limit')
+  })
+})
diff --git a/apps/sim/app/(landing)/components/platform-suite/components/governance-loop/governance-loop.tsx b/apps/sim/app/(landing)/components/platform-suite/components/governance-loop/governance-loop.tsx
new file mode 100644
index 00000000000..dbd088fe127
--- /dev/null
+++ b/apps/sim/app/(landing)/components/platform-suite/components/governance-loop/governance-loop.tsx
@@ -0,0 +1,237 @@
+'use client'
+
+import { useState } from 'react'
+import { Badge, cn } from '@sim/emcn'
+import { Building, Download } from '@sim/emcn/icons'
+import {
+  PLATFORM_LOOP_DESIGN,
+  PLATFORM_LOOP_RESET_FADE_MS,
+} from '@/app/(landing)/components/shared/platform-loop-constants'
+import { ResponsiveDesignStage } from '@/app/(landing)/components/shared/responsive-design-stage'
+import { useMotionSafeCycle } from '@/app/(landing)/hooks/use-motion-safe-cycle'
+import { SegmentedMeter } from '@/app/workspace/[workspaceId]/settings/components/segmented-meter/segmented-meter'
+
+/** The organization's monthly budget and where spend stands against it. */
+const BUDGET = 6_000
+const SPEND = 3_480
+const METER_SEGMENTS = 24
+
+interface WorkspaceRow {
+  name: string
+  agents: number
+  runs: string
+  spend: string
+  limit: string
+  /** Spend against the workspace's own cap; `near` trips the amber status. */
+  status: 'under' | 'near'
+}
+
+const WORKSPACE_ROWS: readonly WorkspaceRow[] = [
+  { name: 'Support', agents: 12, runs: '6,410', spend: '$1,240', limit: '$2,000', status: 'under' },
+  { name: 'Sales', agents: 9, runs: '4,120', spend: '$860', limit: '$1,500', status: 'under' },
+  { name: 'Finance', agents: 6, runs: '2,980', spend: '$720', limit: '$800', status: 'near' },
+  { name: 'Operations', agents: 8, runs: '2,760', spend: '$410', limit: '$1,000', status: 'under' },
+  { name: 'Research', agents: 7, runs: '1,934', spend: '$250', limit: '$500', status: 'under' },
+] as const
+
+const COL_WIDTHS = ['24%', '12%', '15%', '13%', '14%', '22%'] as const
+const COL_HEADERS = ['Workspace', 'Agents', 'Runs (30d)', 'Spend', 'Limit', 'Status'] as const
+
+/** The cycle, in ms from its start. */
+const ROWS_START_MS = 500
+const ROW_STEP_MS = 160
+const METER_START_MS = 900
+const METER_STEPS = 24
+const METER_STEP_MS = 45
+const NEAR_LIMIT_AT_MS = METER_START_MS + METER_STEPS * METER_STEP_MS + 500
+const HOLD_MS = 3_600
+
+/** Stat card chrome, the settings panel's card on the product's bg. */
+const STAT_CARD = 'flex flex-col gap-2 rounded-[8px] border border-[var(--border)] px-4 py-3.5'
+
+/**
+ * The platform suite's "Govern at scale" preview: the organization's
+ * overview, where an admin sees and controls every agent - spend this month
+ * against the org budget on the settings meter, active agents and runs, and
+ * each workspace's spend against its own limit. On each cycle the workspace
+ * rows land one by one, the budget meter fills to this month's spend, and
+ * Finance trips its near-limit status; the frame holds and fades back.
+ * Decorative; the host window takes no input. Reduced motion shows the
+ * finished state.
+ */
+export function GovernanceLoop() {
+  const [rowCount, setRowCount] = useState(WORKSPACE_ROWS.length)
+  const [meterStep, setMeterStep] = useState(METER_STEPS)
+  const [nearLimit, setNearLimit] = useState(true)
+  const [fading, setFading] = useState(false)
+  const [cycleId, setCycleId] = useState(0)
+
+  useMotionSafeCycle({
+    scheduleCycle: () => {
+      setFading(false)
+      setRowCount(0)
+      setMeterStep(0)
+      setNearLimit(false)
+      setCycleId((id) => id + 1)
+      const totalMs = NEAR_LIMIT_AT_MS + HOLD_MS
+      return {
+        timers: [
+          ...WORKSPACE_ROWS.map((_, index) =>
+            setTimeout(() => setRowCount(index + 1), ROWS_START_MS + index * ROW_STEP_MS)
+          ),
+          ...Array.from({ length: METER_STEPS }, (_, index) =>
+            setTimeout(() => setMeterStep(index + 1), METER_START_MS + index * METER_STEP_MS)
+          ),
+          setTimeout(() => setNearLimit(true), NEAR_LIMIT_AT_MS),
+          setTimeout(() => setFading(true), totalMs - PLATFORM_LOOP_RESET_FADE_MS),
+        ],
+        totalMs,
+      }
+    },
+    showFinished: () => {
+      setFading(false)
+      setRowCount(WORKSPACE_ROWS.length)
+      setMeterStep(METER_STEPS)
+      setNearLimit(true)
+    },
+  })
+
+  const spendShown = Math.round((SPEND * meterStep) / METER_STEPS)
+  const percent = Math.round((spendShown / BUDGET) * 100)
+
+  return (
+    <ResponsiveDesignStage
+      width={PLATFORM_LOOP_DESIGN.width}
+      height={PLATFORM_LOOP_DESIGN.height}
+      align='start'
+      className='pointer-events-none absolute inset-0'
+      contentClassName='bg-[var(--surface-1)] p-2'
+    >
+      <div className='h-full w-full overflow-hidden rounded-[6px] border border-[var(--border)] bg-[var(--bg)]'>
+        <div
+          key={cycleId}
+          className={cn(
+            'flex h-full w-full flex-col transition-opacity duration-300 ease-out',
+            fading ? 'opacity-0' : 'opacity-100'
+          )}
+        >
+          <div className='flex h-[44px] shrink-0 items-center border-[var(--border)] border-b px-6'>
+            <div className='flex w-full items-center justify-between'>
+              <div className='flex items-center gap-3'>
+                <Building className='size-[14px] text-[var(--text-icon)]' />
+                <span className='text-[var(--text-body)] text-sm'>Organization</span>
+              </div>
+              <div className='flex items-center gap-1'>
+                <span className='flex items-center rounded-md px-2 py-1 text-[var(--text-secondary)] text-caption'>
+                  <Download className='mr-1.5 size-[14px] text-[var(--text-icon)]' />
+                  Export
+                </span>
+                <span className='rounded-md bg-[var(--surface-active)] px-2 py-1 text-[var(--text-body)] text-caption'>
+                  Overview
+                </span>
+                <span className='rounded-md px-2 py-1 text-[var(--text-secondary)] text-caption'>
+                  Members
+                </span>
+                <span className='rounded-md px-2 py-1 text-[var(--text-secondary)] text-caption'>
+                  Usage
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div className='grid shrink-0 grid-cols-3 gap-4 px-6 pt-5 pb-4'>
+            <div className={STAT_CARD}>
+              <span className='text-[var(--text-muted)] text-caption'>Spend this month</span>
+              <span className='text-[var(--text-primary)] text-lg leading-none'>
+                ${spendShown.toLocaleString('en-US')}
+                <span className='text-[var(--text-muted)] text-caption'>
+                  {' '}
+                  of ${BUDGET.toLocaleString('en-US')}
+                </span>
+              </span>
+              <SegmentedMeter used={spendShown} total={BUDGET} segments={METER_SEGMENTS} />
+              <span className='text-[var(--text-muted)] text-caption'>
+                {percent}% of the org budget · resets Aug 1
+              </span>
+            </div>
+            <div className={STAT_CARD}>
+              <span className='text-[var(--text-muted)] text-caption'>Active agents</span>
+              <span className='text-[var(--text-primary)] text-lg leading-none'>42</span>
+              <span className='text-[var(--text-muted)] text-caption'>Across 5 workspaces</span>
+            </div>
+            <div className={STAT_CARD}>
+              <span className='text-[var(--text-muted)] text-caption'>Runs (30d)</span>
+              <span className='text-[var(--text-primary)] text-lg leading-none'>18,204</span>
+              <span className='text-[var(--text-muted)] text-caption'>99.2% completed</span>
+            </div>
+          </div>
+
+          <div className='min-h-0 flex-1 overflow-hidden'>
+            <div className='flex items-center justify-between px-6 pt-1 pb-2'>
+              <span className='text-[var(--text-body)] text-sm'>Workspaces</span>
+              <span className='rounded-md border border-[var(--border)] px-2 py-1 text-[var(--text-secondary)] text-caption'>
+                Set limits
+              </span>
+            </div>
+            <table className='w-full table-fixed text-sm'>
+              <colgroup>
+                {COL_WIDTHS.map((width, index) => (
+                  <col key={index} style={{ width }} />
+                ))}
+              </colgroup>
+              <thead className='border-[var(--border)] border-y'>
+                <tr>
+                  {COL_HEADERS.map((label) => (
+                    <th
+                      key={label}
+                      className='h-9 px-6 py-1 text-left align-middle font-normal text-[var(--text-muted)] text-caption'
+                    >
+                      {label}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {WORKSPACE_ROWS.map((row, index) => {
+                  const near = row.status === 'near' && nearLimit
+                  return (
+                    <tr
+                      key={row.name}
+                      className={cn(
+                        'h-[42px] border-[var(--border)] border-b transition-opacity duration-300 ease-out',
+                        index < rowCount ? 'opacity-100' : 'opacity-0'
+                      )}
+                    >
+                      <td className='px-6 align-middle text-[var(--text-primary)] text-caption'>
+                        {row.name}
+                      </td>
+                      <td className='px-6 align-middle text-[var(--text-secondary)] text-caption'>
+                        {row.agents}
+                      </td>
+                      <td className='px-6 align-middle text-[var(--text-secondary)] text-caption'>
+                        {row.runs}
+                      </td>
+                      <td className='px-6 align-middle text-[var(--text-secondary)] text-caption'>
+                        {row.spend}
+                      </td>
+                      <td className='px-6 align-middle'>
+                        <Badge variant='gray-secondary' size='sm'>
+                          {row.limit} cap
+                        </Badge>
+                      </td>
+                      <td className='px-6 align-middle'>
+                        <Badge variant='gray-secondary' size='sm' dot>
+                          {near ? 'Near limit' : 'Under limit'}
+                        </Badge>
+                      </td>
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </ResponsiveDesignStage>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/platform-suite/components/governance-loop/index.ts b/apps/sim/app/(landing)/components/platform-suite/components/governance-loop/index.ts
new file mode 100644
index 00000000000..e836fbaf744
--- /dev/null
+++ b/apps/sim/app/(landing)/components/platform-suite/components/governance-loop/index.ts
@@ -0,0 +1 @@
+export { GovernanceLoop } from './governance-loop'
diff --git a/apps/sim/app/(landing)/components/platform-suite/components/iso-marks/index.ts b/apps/sim/app/(landing)/components/platform-suite/components/iso-marks/index.ts
new file mode 100644
index 00000000000..22f2b2dae6c
--- /dev/null
+++ b/apps/sim/app/(landing)/components/platform-suite/components/iso-marks/index.ts
@@ -0,0 +1,9 @@
+export type { IsoTone } from '@/app/(landing)/components/platform-suite/components/iso-marks/iso-illustration-style'
+export {
+  IsoIntegrateIllustration,
+  type IsoIntegrateIllustrationProps,
+} from '@/app/(landing)/components/platform-suite/components/iso-marks/iso-integrate-illustration'
+export {
+  IsoMonitorIllustration,
+  type IsoMonitorIllustrationProps,
+} from '@/app/(landing)/components/platform-suite/components/iso-marks/iso-monitor-illustration'
diff --git a/apps/sim/app/(landing)/components/platform-suite/components/iso-marks/iso-illustration-style.ts b/apps/sim/app/(landing)/components/platform-suite/components/iso-marks/iso-illustration-style.ts
new file mode 100644
index 00000000000..e06dc8f9394
--- /dev/null
+++ b/apps/sim/app/(landing)/components/platform-suite/components/iso-marks/iso-illustration-style.ts
@@ -0,0 +1,63 @@
+import type { CSSProperties, SVGProps } from 'react'
+import styles from '@/app/(landing)/components/platform-suite/components/iso-marks/iso-marks.module.css'
+
+/**
+ * The ground a mark sits on, named for the light theme: `light` is the pair's
+ * lighter tile, `dark` its darker one. The names hold in the dark theme too -
+ * the darker tile stays the darker of the two rather than inverting - and
+ * `iso-marks.module.css` gives each tone explicit inks for both themes, so a
+ * mark's contours never land on the wrong contrast.
+ */
+export type IsoTone = 'light' | 'dark'
+
+const ISO_VIEWBOX_SIZE = 526.5434455009386
+
+/**
+ * The four custom properties the stylesheet sets per tone and theme: the
+ * contour ink and the three face fills, low to high.
+ */
+export const ISO_PALETTE = {
+  stroke: 'var(--iso-stroke)',
+  low: 'var(--iso-low)',
+  mid: 'var(--iso-mid)',
+  high: 'var(--iso-high)',
+} as const
+
+/** The class that binds a tone's palette to a mark's root. */
+export const ISO_TONE_CLASS: Readonly<Record<IsoTone, string>> = {
+  light: styles.onLight,
+  dark: styles.onDark,
+}
+
+/**
+ * Contour props shared by every path in a mark. The ink goes through `style`,
+ * where `var()` resolves unambiguously, rather than a presentation attribute.
+ * Filled card marks keep a one-pixel contour even at small sizes; the larger
+ * outline previews retain their proportional stroke. Size compensation keeps
+ * stroke dashes in the same coordinate space as the normalized path length.
+ */
+export function createIsoLineProps(
+  className: string,
+  variant: 'filled' | 'outline',
+  size: number
+): SVGProps<SVGPathElement> {
+  return {
+    className,
+    fill: 'none',
+    pathLength: 1,
+    pointerEvents: 'none',
+    opacity: 1,
+    style: { stroke: ISO_PALETTE.stroke },
+    strokeWidth: variant === 'filled' ? ISO_VIEWBOX_SIZE / size : 3.2,
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+  }
+}
+
+/** The contour props plus a face fill. */
+export function withIsoFace(
+  lineProps: SVGProps<SVGPathElement>,
+  fill: string
+): SVGProps<SVGPathElement> {
+  return { ...lineProps, style: { ...(lineProps.style as CSSProperties | undefined), fill } }
+}
diff --git a/apps/sim/app/(landing)/components/platform-suite/components/iso-marks/iso-integrate-illustration.tsx b/apps/sim/app/(landing)/components/platform-suite/components/iso-marks/iso-integrate-illustration.tsx
new file mode 100644
index 00000000000..7a2e5aea7d9
--- /dev/null
+++ b/apps/sim/app/(landing)/components/platform-suite/components/iso-marks/iso-integrate-illustration.tsx
@@ -0,0 +1,136 @@
+import { cn } from '@sim/emcn'
+import {
+  createIsoLineProps,
+  ISO_PALETTE,
+  ISO_TONE_CLASS,
+  type IsoTone,
+  withIsoFace,
+} from '@/app/(landing)/components/platform-suite/components/iso-marks/iso-illustration-style'
+import styles from '@/app/(landing)/components/platform-suite/components/iso-marks/iso-marks.module.css'
+
+export interface IsoIntegrateIllustrationProps {
+  size?: number
+  /** The ground the mark sits on - the pair's lighter or darker tile, in either theme. */
+  tone?: IsoTone
+  /** Contours only, without face fills, for decorative previews. */
+  variant?: 'filled' | 'outline'
+  className?: string
+}
+
+/**
+ * The Integrate mark from the main branch's iso-mark family - a three-tier
+ * isometric stack (a socket node up top, a connector port on each of the lower
+ * tiers). Ported for the platform suite without the family's idle float: it
+ * rests still, and hovering the bloc that holds it (`data-iso-hover`) redraws
+ * every contour from zero, bottom tier first. Paths render directly, keeping
+ * their contours sharp at the small card size.
+ */
+export function IsoIntegrateIllustration({
+  size = 172,
+  tone = 'light',
+  variant = 'filled',
+  className,
+}: IsoIntegrateIllustrationProps) {
+  const lineProps = createIsoLineProps('iso-integrate-illustration-line', variant, size)
+  return (
+    <svg
+      viewBox='-263.2717227504693 -263.2717227504693 526.5434455009386 526.5434455009386'
+      fill='none'
+      shapeRendering='geometricPrecision'
+      xmlns='http://www.w3.org/2000/svg'
+      width={size}
+      height={size}
+      aria-hidden={true}
+      focusable='false'
+      className={cn(
+        'iso-integrate-illustration block max-w-none shrink-0',
+        variant === 'outline' ? styles.outline : ISO_TONE_CLASS[tone],
+        className
+      )}
+    >
+      {variant === 'filled' && (
+        <style>
+          {`
+          .iso-integrate-illustration-line {
+            stroke-dasharray: 1;
+            stroke-dashoffset: 0;
+          }
+
+          [data-iso-hover]:hover .iso-integrate-illustration-line {
+            animation: iso-integrate-illustration-line-draw 900ms cubic-bezier(0.23, 1, 0.32, 1) both;
+          }
+
+          [data-iso-hover]:hover [data-integrate-layer='bottom-plane'] .iso-integrate-illustration-line,
+          [data-iso-hover]:hover [data-integrate-layer='bottom-port'] .iso-integrate-illustration-line {
+            animation-delay: 0ms;
+          }
+
+          [data-iso-hover]:hover [data-integrate-layer='middle-plane'] .iso-integrate-illustration-line,
+          [data-iso-hover]:hover [data-integrate-layer='middle-port'] .iso-integrate-illustration-line {
+            animation-delay: 75ms;
+          }
+
+          [data-iso-hover]:hover [data-integrate-layer='top-plane'] .iso-integrate-illustration-line,
+          [data-iso-hover]:hover [data-integrate-layer='top-socket'] .iso-integrate-illustration-line {
+            animation-delay: 150ms;
+          }
+
+          @keyframes iso-integrate-illustration-line-draw {
+            from {
+              stroke-dashoffset: 1;
+            }
+
+            to {
+              stroke-dashoffset: 0;
+            }
+          }
+
+          @media (prefers-reduced-motion: reduce) {
+            [data-iso-hover]:hover .iso-integrate-illustration-line {
+              animation: none;
+            }
+          }
+        `}
+        </style>
+      )}
+      <g>
+        <g data-integrate-layer='bottom-plane' pointerEvents='none'>
+          <path
+            d='M32.91 19.00 L157.09 90.70 Q190.00 109.70 157.09 128.70 L32.91 200.39 Q0.00 219.39 -32.91 200.39 L-157.09 128.70 Q-190.00 109.70 -157.09 90.70 L-32.91 19.00 Q0.00 -0.00 32.91 19.00 Z'
+            {...lineProps}
+          />
+        </g>
+        <g data-integrate-layer='middle-plane' pointerEvents='none'>
+          <path
+            d='M32.91 -90.70 L157.09 -19.00 Q190.00 -0.00 157.09 19.00 L32.91 90.70 Q0.00 109.70 -32.91 90.70 L-157.09 19.00 Q-190.00 -0.00 -157.09 -19.00 L-32.91 -90.70 Q0.00 -109.70 32.91 -90.70 Z'
+            {...withIsoFace(lineProps, ISO_PALETTE.low)}
+          />
+        </g>
+        <g data-integrate-layer='middle-port' pointerEvents='none'>
+          <path
+            d='M111.45 -23.41 L135.55 -9.50 Q152.00 0.00 135.55 9.50 L120.95 17.92 Q104.50 27.42 88.05 17.92 L63.95 4.02 Q47.50 -5.48 63.95 -14.98 L78.55 -23.41 Q95.00 -32.91 111.45 -23.41 Z'
+            {...withIsoFace(lineProps, ISO_PALETTE.mid)}
+          />
+        </g>
+        <g data-integrate-layer='bottom-port' pointerEvents='none'>
+          <path
+            d='M-34.01 129.57 L28.08 165.42 Q44.53 174.92 28.08 184.42 L19.42 189.41 Q2.97 198.91 -13.49 189.41 L-75.58 153.56 Q-92.03 144.06 -75.58 134.56 L-66.92 129.57 Q-50.47 120.07 -34.01 129.57 Z'
+            {...withIsoFace(lineProps, ISO_PALETTE.low)}
+          />
+        </g>
+        <g data-integrate-layer='top-plane' pointerEvents='none'>
+          <path
+            d='M32.91 -200.39 L157.09 -128.70 Q190.00 -109.70 157.09 -90.70 L32.91 -19.00 Q0.00 -0.00 -32.91 -19.00 L-157.09 -90.70 Q-190.00 -109.70 -157.09 -128.70 L-32.91 -200.39 Q0.00 -219.39 32.91 -200.39 Z'
+            {...withIsoFace(lineProps, ISO_PALETTE.mid)}
+          />
+        </g>
+        <g data-integrate-layer='top-socket' pointerEvents='none'>
+          <path
+            d='M37.70 -129.63 C16.71 -117.51 -17.31 -117.51 -38.30 -129.63 C-59.29 -141.74 -59.29 -161.39 -38.30 -173.50 C-17.31 -185.62 16.71 -185.62 37.70 -173.50 C58.69 -161.39 58.69 -141.74 37.70 -129.63 Z'
+            {...withIsoFace(lineProps, ISO_PALETTE.high)}
+          />
+        </g>
+      </g>
+    </svg>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/platform-suite/components/iso-marks/iso-marks.module.css b/apps/sim/app/(landing)/components/platform-suite/components/iso-marks/iso-marks.module.css
new file mode 100644
index 00000000000..f4f41a427fa
--- /dev/null
+++ b/apps/sim/app/(landing)/components/platform-suite/components/iso-marks/iso-marks.module.css
@@ -0,0 +1,31 @@
+/** Face and contour palettes for the two platform illustrations. */
+.onLight {
+  --iso-stroke: color-mix(in srgb, var(--text-subtle) 76%, var(--text-muted));
+  --iso-low: var(--surface-6);
+  --iso-mid: color-mix(in srgb, var(--surface-3) 58%, var(--surface-6));
+  --iso-high: var(--surface-3);
+}
+
+.onDark {
+  --iso-stroke: color-mix(in srgb, var(--surface-6) 72%, var(--text-secondary));
+  --iso-low: color-mix(in srgb, var(--text-secondary) 82%, var(--surface-6));
+  --iso-mid: color-mix(in srgb, var(--text-secondary) 64%, var(--surface-6));
+  --iso-high: color-mix(in srgb, var(--text-secondary) 46%, var(--surface-6));
+}
+
+/** Soft gray faces keep the layers distinct without bright highlights on dark cards. */
+:global(.dark) .onLight,
+:global(.dark) .onDark {
+  --iso-stroke: var(--text-primary);
+  --iso-low: color-mix(in srgb, var(--text-icon) 80%, var(--surface-6));
+  --iso-mid: var(--text-icon);
+  --iso-high: color-mix(in srgb, var(--text-icon) 70%, var(--text-secondary));
+}
+
+/** Quiet, unfilled contours on the solid menu-preview surface in either theme. */
+.outline {
+  --iso-stroke: var(--text-icon);
+  --iso-low: none;
+  --iso-mid: none;
+  --iso-high: none;
+}
diff --git a/apps/sim/app/(landing)/components/platform-suite/components/iso-marks/iso-monitor-illustration.tsx b/apps/sim/app/(landing)/components/platform-suite/components/iso-marks/iso-monitor-illustration.tsx
new file mode 100644
index 00000000000..011a8ee171c
--- /dev/null
+++ b/apps/sim/app/(landing)/components/platform-suite/components/iso-marks/iso-monitor-illustration.tsx
@@ -0,0 +1,154 @@
+import { cn } from '@sim/emcn'
+import {
+  createIsoLineProps,
+  ISO_PALETTE,
+  ISO_TONE_CLASS,
+  type IsoTone,
+  withIsoFace,
+} from '@/app/(landing)/components/platform-suite/components/iso-marks/iso-illustration-style'
+import styles from '@/app/(landing)/components/platform-suite/components/iso-marks/iso-marks.module.css'
+
+export interface IsoMonitorIllustrationProps {
+  size?: number
+  /** The ground the mark sits on - the pair's lighter or darker tile, in either theme. */
+  tone?: IsoTone
+  /** Contours only, without face fills, for decorative previews. */
+  variant?: 'filled' | 'outline'
+  className?: string
+}
+
+/**
+ * The Monitor mark from the main branch's iso-mark family - an isometric
+ * housing whose lid and side panels stand open around the stacked inner
+ * plates (the "look inside every run" read). Ported for the platform suite
+ * without the family's idle drift: it rests still, and hovering the bloc that
+ * holds it (`data-iso-hover`) redraws every contour from zero, base first. Paths
+ * render directly, keeping their contours sharp at the small card size.
+ */
+export function IsoMonitorIllustration({
+  size = 176,
+  tone = 'light',
+  variant = 'filled',
+  className,
+}: IsoMonitorIllustrationProps) {
+  const lineProps = createIsoLineProps('iso-monitor-illustration-line', variant, size)
+  return (
+    <svg
+      viewBox='-263.2717227504693 -263.2717227504693 526.5434455009386 526.5434455009386'
+      fill='none'
+      shapeRendering='geometricPrecision'
+      xmlns='http://www.w3.org/2000/svg'
+      width={size}
+      height={size}
+      aria-hidden={true}
+      focusable='false'
+      className={cn(
+        'iso-monitor-illustration block max-w-none shrink-0',
+        variant === 'outline' ? styles.outline : ISO_TONE_CLASS[tone],
+        className
+      )}
+    >
+      {variant === 'filled' && (
+        <style>
+          {`
+          .iso-monitor-illustration-line {
+            stroke-dasharray: 1;
+            stroke-dashoffset: 0;
+          }
+
+          [data-iso-hover]:hover .iso-monitor-illustration-line {
+            animation: iso-monitor-illustration-line-draw 900ms cubic-bezier(0.23, 1, 0.32, 1) both;
+          }
+
+          [data-iso-hover]:hover [data-monitor-layer='shadow-plane'] .iso-monitor-illustration-line,
+          [data-iso-hover]:hover [data-monitor-layer='base-bar'] .iso-monitor-illustration-line {
+            animation-delay: 0ms;
+          }
+
+          [data-iso-hover]:hover [data-monitor-layer='inner-low'] .iso-monitor-illustration-line,
+          [data-iso-hover]:hover [data-monitor-layer='inner-high'] .iso-monitor-illustration-line {
+            animation-delay: 70ms;
+          }
+
+          [data-iso-hover]:hover [data-monitor-layer='left-panel'] .iso-monitor-illustration-line,
+          [data-iso-hover]:hover [data-monitor-layer='right-panel'] .iso-monitor-illustration-line {
+            animation-delay: 140ms;
+          }
+
+          [data-iso-hover]:hover [data-monitor-layer='top-lid'] .iso-monitor-illustration-line {
+            animation-delay: 210ms;
+          }
+
+          @keyframes iso-monitor-illustration-line-draw {
+            from {
+              stroke-dashoffset: 1;
+            }
+
+            to {
+              stroke-dashoffset: 0;
+            }
+          }
+
+          @media (prefers-reduced-motion: reduce) {
+            [data-iso-hover]:hover .iso-monitor-illustration-line {
+              animation: none;
+            }
+          }
+        `}
+        </style>
+      )}
+      <g>
+        <g data-monitor-layer='shadow-plane' pointerEvents='none'>
+          <path
+            d='M16.45 -34.38 L211.55 78.26 Q228.00 87.76 211.55 97.26 L16.45 209.89 Q0.00 219.39 -16.45 209.89 L-211.55 97.26 Q-228.00 87.76 -211.55 78.26 L-16.45 -34.38 Q0.00 -43.88 16.45 -34.38 Z'
+            {...lineProps}
+          />
+        </g>
+        <g data-monitor-layer='base-bar' pointerEvents='none'>
+          <path
+            d='M-186.71 89.66 L-3.29 195.55 Q0.00 197.45 0.00 193.65 L0.00 179.31 Q0.00 175.51 -3.29 173.61 L-186.71 67.72 Q-190.00 65.82 -190.00 69.62 L-190.00 83.96 Q-190.00 87.76 -186.71 89.66 Z'
+            {...withIsoFace(lineProps, ISO_PALETTE.low)}
+          />
+          <path
+            d='M186.71 89.66 L3.29 195.55 Q0.00 197.45 0.00 193.65 L0.00 179.31 Q0.00 175.51 3.29 173.61 L186.71 67.72 Q190.00 65.82 190.00 69.62 L190.00 83.96 Q190.00 87.76 186.71 89.66 Z'
+            {...withIsoFace(lineProps, ISO_PALETTE.mid)}
+          />
+          <path
+            d='M3.29 -41.98 L186.71 63.92 Q190.00 65.82 186.71 67.72 L3.29 173.61 Q0.00 175.51 -3.29 173.61 L-186.71 67.72 Q-190.00 65.82 -186.71 63.92 L-3.29 -41.98 Q0.00 -43.88 3.29 -41.98 Z'
+            {...withIsoFace(lineProps, ISO_PALETTE.high)}
+          />
+        </g>
+        <g data-monitor-layer='right-panel' pointerEvents='none'>
+          <path
+            d='M32.91 -68.76 L128.59 -13.52 Q161.50 5.48 161.50 -32.52 L161.50 -88.15 Q161.50 -126.15 128.59 -145.15 L32.91 -200.39 Q0.00 -219.39 0.00 -181.39 L0.00 -125.76 Q0.00 -87.76 32.91 -68.76 Z'
+            {...lineProps}
+          />
+        </g>
+        <g data-monitor-layer='inner-low' pointerEvents='none'>
+          <path
+            d='M32.91 -2.94 L119.09 46.82 Q152.00 65.82 119.09 84.82 L32.91 134.58 Q0.00 153.58 -32.91 134.58 L-119.09 84.82 Q-152.00 65.82 -119.09 46.82 L-32.91 -2.94 Q0.00 -21.94 32.91 -2.94 Z'
+            {...withIsoFace(lineProps, ISO_PALETTE.low)}
+          />
+        </g>
+        <g data-monitor-layer='inner-high' pointerEvents='none'>
+          <path
+            d='M32.91 -46.82 L119.09 2.94 Q152.00 21.94 119.09 40.94 L32.91 90.70 Q0.00 109.70 -32.91 90.70 L-119.09 40.94 Q-152.00 21.94 -119.09 2.94 L-32.91 -46.82 Q0.00 -65.82 32.91 -46.82 Z'
+            {...withIsoFace(lineProps, ISO_PALETTE.mid)}
+          />
+        </g>
+        <g data-monitor-layer='left-panel' pointerEvents='none'>
+          <path
+            d='M-157.09 62.88 L-32.91 134.58 Q0.00 153.58 0.00 115.58 L0.00 38.00 Q0.00 0.00 -32.91 -19.00 L-157.09 -90.70 Q-190.00 -109.70 -190.00 -71.70 L-190.00 5.88 Q-190.00 43.88 -157.09 62.88 Z'
+            {...lineProps}
+          />
+        </g>
+        <g data-monitor-layer='top-lid' pointerEvents='none'>
+          <path
+            d='M32.91 -200.39 L81.09 -172.58 Q114.00 -153.58 81.09 -134.58 L-43.09 -62.88 Q-76.00 -43.88 -108.91 -62.88 L-157.09 -90.70 Q-190.00 -109.70 -157.09 -128.70 L-32.91 -200.39 Q0.00 -219.39 32.91 -200.39 Z'
+            {...lineProps}
+          />
+        </g>
+      </g>
+    </svg>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/platform-suite/index.ts b/apps/sim/app/(landing)/components/platform-suite/index.ts
new file mode 100644
index 00000000000..262fe216992
--- /dev/null
+++ b/apps/sim/app/(landing)/components/platform-suite/index.ts
@@ -0,0 +1 @@
+export { PlatformSuite } from './platform-suite'
diff --git a/apps/sim/app/(landing)/components/platform-suite/platform-suite.test.tsx b/apps/sim/app/(landing)/components/platform-suite/platform-suite.test.tsx
new file mode 100644
index 00000000000..e78064b277f
--- /dev/null
+++ b/apps/sim/app/(landing)/components/platform-suite/platform-suite.test.tsx
@@ -0,0 +1,102 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { type AnchorHTMLAttributes, act, type ReactNode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('@sim/emcn', () => ({
+  cn: (...values: Array<string | false | null | undefined>) => values.filter(Boolean).join(' '),
+}))
+
+vi.mock('next/link', () => ({
+  default: ({
+    children,
+    href,
+    ...props
+  }: { children: ReactNode; href: string } & Omit<
+    AnchorHTMLAttributes<HTMLAnchorElement>,
+    'href'
+  >) => (
+    <a href={href} {...props}>
+      {children}
+    </a>
+  ),
+}))
+
+vi.mock('@/app/(landing)/components/placement-frame', () => ({
+  PlacementFrame: ({ className }: { className?: string }) => <div className={className} />,
+}))
+
+vi.mock('@/app/(landing)/components/shared/product-window', () => ({
+  ProductWindow: ({ kind }: { kind: string }) => <div data-preview-kind={kind} />,
+}))
+
+import { PlatformSuite } from '@/app/(landing)/components/platform-suite/platform-suite'
+
+afterEach(() => {
+  document.body.replaceChildren()
+})
+
+describe('PlatformSuite', () => {
+  it('balances the card copy and redistributes card width on hover', () => {
+    ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const root = createRoot(host)
+
+    act(() => {
+      root.render(<PlatformSuite />)
+    })
+
+    expect(host.textContent).toContain('One Platform for every AI Agent')
+    expect(host.textContent).toContain(
+      'Build and deploy agents in one collaborative workspace, with centralized control over access, spend, data, and performance.'
+    )
+    expect(host.textContent).toContain('Build agents')
+    expect(host.textContent).toContain('Govern at scale')
+
+    const buildCard = host.querySelector('[data-platform-card="0"]') as HTMLElement
+    const governCard = host.querySelector('[data-platform-card="1"]') as HTMLElement
+    expect(buildCard.tagName).toBe('DIV')
+    expect(buildCard.querySelector('h3 a')?.getAttribute('href')).toBe('/workflows')
+    expect(buildCard.querySelector('h3 a')?.className).toContain('after:absolute after:inset-0')
+    expect(governCard.querySelector('h3 a')?.getAttribute('href')).toBe('/enterprise')
+    expect(buildCard.querySelector('svg.iso-integrate-illustration')).not.toBeNull()
+    expect(governCard.querySelector('svg.iso-monitor-illustration')).not.toBeNull()
+    const buildMark = buildCard.querySelector('svg') as SVGElement
+    const buildTitle = buildCard.querySelector('h3') as HTMLElement
+    expect(
+      buildMark.compareDocumentPosition(buildTitle) & Node.DOCUMENT_POSITION_FOLLOWING
+    ).toBeTruthy()
+    const governContent = governCard.querySelector('[data-platform-card-content]') as HTMLElement
+    expect(governContent.className).not.toContain('opacity-40')
+
+    expect(buildCard.className).toContain('md:grow')
+    expect(governCard.className).toContain('md:grow')
+
+    act(() => {
+      buildCard.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }))
+    })
+
+    expect(buildCard.className).toContain('md:grow-[1.25]')
+    expect(governCard.className).toContain('md:grow-[0.75]')
+    expect(governContent.className).toContain('opacity-40')
+    expect(
+      (buildCard.querySelector('[data-platform-card-content]') as HTMLElement).className
+    ).not.toContain('opacity-40')
+
+    act(() => {
+      buildCard.dispatchEvent(
+        new MouseEvent('mouseout', { bubbles: true, relatedTarget: document.body })
+      )
+    })
+
+    expect(buildCard.className).toContain('md:grow')
+    expect(governCard.className).toContain('md:grow')
+
+    act(() => {
+      root.unmount()
+    })
+  })
+})
diff --git a/apps/sim/app/(landing)/components/platform-suite/platform-suite.tsx b/apps/sim/app/(landing)/components/platform-suite/platform-suite.tsx
new file mode 100644
index 00000000000..5bae17a9583
--- /dev/null
+++ b/apps/sim/app/(landing)/components/platform-suite/platform-suite.tsx
@@ -0,0 +1,186 @@
+'use client'
+
+import { type ComponentType, useState } from 'react'
+import { cn } from '@sim/emcn'
+import Link from 'next/link'
+import {
+  HOME_INSET,
+  HOME_TYPE,
+  LANDING_CONTENT_WIDTH,
+  LANDING_GUTTER,
+} from '@/app/(landing)/components/landing-layout'
+import { PlacementFrame } from '@/app/(landing)/components/placement-frame'
+import {
+  IsoIntegrateIllustration,
+  IsoMonitorIllustration,
+  type IsoTone,
+} from '@/app/(landing)/components/platform-suite/components/iso-marks'
+import type { ProductPreviewKind } from '@/app/(landing)/components/shared/product-preview'
+import { ProductWindow } from '@/app/(landing)/components/shared/product-window'
+
+/**
+ * Enterprise platform section pairing agent creation with centralized
+ * governance. Each card opens with an iso mark above its copy - Integrate on
+ * the build card, Monitor on the govern card, toned to the card's ground -
+ * and carries its own product scene anchored under the copy (Sim's chat
+ * building a workflow on the real stage; the organization's overview with
+ * spend against budget), so the two never meet whatever the card's height. Hovering a card widens it and
+ * fades the other card's content back. The card is a block, not a link: the
+ * title's link stretches over the whole card, so the card stays one click
+ * while the scene inside it - whose chat reply links its workflow - never
+ * nests an anchor in an anchor.
+ *
+ * The pair never inverts. In the dark theme the build card stays the darker
+ * of the two (`--surface-3` under the govern card's `--surface-5`), its copy
+ * takes the page's light inks, and both marks keep light contours.
+ */
+
+/** The marks' size in the cards, a step under the 180px they had on the main branch's overview. */
+const MARK_SIZE = 112
+/**
+ * The marks' drawings sit inside a padded box; this pulls the box left so the
+ * drawing's edge lands on the copy's left edge.
+ */
+const MARK_PLACEMENT = 'pointer-events-none -ml-2'
+/** Hover: the hovered card takes this share of the row's grow, the other card fades. */
+const GROW_HOVERED = 'md:grow-[1.25]'
+const GROW_IDLE = 'md:grow-[0.75]'
+const CONTENT_IDLE = 'opacity-40'
+/**
+ * The window is sized from the ROW (the cards' container), not its card:
+ * 135% of a resting half-width card, so it stays one size while the cards
+ * trade width on hover and always bleeds past its card's right and bottom
+ * edges - an aspect-locked window sized from a narrowing card would shrink
+ * and leave the card's ground showing under it. Stacked below `md`, a card
+ * is the row, so the same 135% applies.
+ */
+const WINDOW_PLACEMENT = 'top-0 left-8 w-[135cqw] max-sm:left-5 md:w-[67.5cqw]'
+
+interface PlatformSuiteCard {
+  href: string
+  headingId: string
+  name: string
+  description: string
+  tone: 'mid' | 'dark'
+  preview: ProductPreviewKind
+  /** Decorative iso mark above the copy. */
+  Mark: ComponentType<{ size?: number; tone?: IsoTone; className?: string }>
+}
+
+const CARDS: readonly PlatformSuiteCard[] = [
+  {
+    href: '/workflows',
+    headingId: 'platform-build',
+    name: 'Build agents',
+    description: 'Create and deploy agents through chat, a visual canvas, or code.',
+    tone: 'dark',
+    preview: 'agents',
+    Mark: IsoIntegrateIllustration,
+  },
+  {
+    href: '/enterprise',
+    headingId: 'platform-govern',
+    name: 'Govern at scale',
+    description: 'Control access, models, spend, and performance from one place.',
+    tone: 'mid',
+    preview: 'governance',
+    Mark: IsoMonitorIllustration,
+  },
+] as const
+
+export function PlatformSuite() {
+  const [hoveredCard, setHoveredCard] = useState<number | null>(null)
+
+  return (
+    <section
+      id='platform'
+      aria-labelledby='platform-heading'
+      className={cn('flex flex-col', LANDING_CONTENT_WIDTH, LANDING_GUTTER)}
+    >
+      <div className={cn(HOME_INSET, 'flex flex-col gap-20 max-sm:gap-10 max-lg:gap-14')}>
+        <div className='flex flex-col items-center gap-8 text-center max-sm:gap-5'>
+          <h2
+            id='platform-heading'
+            className={cn('text-balance text-[var(--text-primary)]', HOME_TYPE.h2Display)}
+          >
+            One Platform for every AI Agent
+          </h2>
+          <p className={cn('max-w-[48rem] text-balance text-[var(--text-body)]', HOME_TYPE.body)}>
+            Build and deploy agents in one collaborative workspace, with centralized control over
+            access, spend, data, and performance.
+          </p>
+        </div>
+
+        <div className='flex flex-col gap-4 overflow-hidden [container-type:inline-size] md:flex-row lg:aspect-[2/1]'>
+          {CARDS.map((card, index) => {
+            const dark = card.tone === 'dark'
+            const idle = hoveredCard !== null && hoveredCard !== index
+            return (
+              <div
+                key={card.name}
+                data-platform-card={index}
+                data-iso-hover=''
+                onMouseEnter={() => setHoveredCard(index)}
+                onMouseLeave={() => setHoveredCard(null)}
+                onFocus={() => setHoveredCard(index)}
+                onBlur={() => setHoveredCard(null)}
+                className={cn(
+                  'relative flex min-h-[420px] flex-col overflow-hidden rounded-[12px] motion-reduce:transition-none max-sm:min-h-[360px] md:basis-0 md:transition-[flex-grow] lg:min-h-0 md:[transition-duration:280ms] md:[transition-timing-function:cubic-bezier(0.22,1,0.36,1)]',
+                  hoveredCard === null && 'md:grow',
+                  hoveredCard === index && GROW_HOVERED,
+                  idle && GROW_IDLE
+                )}
+              >
+                <PlacementFrame tone={card.tone} className='absolute inset-0' />
+                <div
+                  data-platform-card-content=''
+                  className={cn(
+                    'relative flex flex-1 flex-col transition-opacity duration-[280ms] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
+                    idle && CONTENT_IDLE
+                  )}
+                >
+                  <div className='flex max-w-[20rem] flex-col gap-3 px-8 pt-8'>
+                    <card.Mark
+                      size={MARK_SIZE}
+                      tone={dark ? 'dark' : 'light'}
+                      className={MARK_PLACEMENT}
+                    />
+                    <h3
+                      id={card.headingId}
+                      className={cn(
+                        HOME_TYPE.h3,
+                        dark
+                          ? 'text-[var(--text-inverse)] dark:text-[var(--text-primary)]'
+                          : 'text-[var(--text-primary)]'
+                      )}
+                    >
+                      <Link
+                        href={card.href}
+                        className='outline-none after:absolute after:inset-0 after:z-10 after:rounded-[12px] after:content-[""] focus-visible:after:outline focus-visible:after:outline-2 focus-visible:after:outline-[var(--text-secondary)] focus-visible:after:outline-offset-[-2px]'
+                      >
+                        {card.name}
+                      </Link>
+                    </h3>
+                    <p
+                      className={cn(
+                        HOME_TYPE.body,
+                        dark
+                          ? 'text-[var(--surface-6)] dark:text-[var(--text-body)]'
+                          : 'text-[var(--text-body)]'
+                      )}
+                    >
+                      {card.description}
+                    </p>
+                  </div>
+                  <div className='relative mt-8 flex-1'>
+                    <ProductWindow kind={card.preview} className={WINDOW_PLACEMENT} />
+                  </div>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/product-demo/components/composer-loop/composer-loop.test.tsx b/apps/sim/app/(landing)/components/product-demo/components/composer-loop/composer-loop.test.tsx
new file mode 100644
index 00000000000..fca3d17c585
--- /dev/null
+++ b/apps/sim/app/(landing)/components/product-demo/components/composer-loop/composer-loop.test.tsx
@@ -0,0 +1,123 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, type ReactNode } from 'react'
+import { usePrefersReducedMotion } from '@sim/emcn/hooks/use-prefers-reduced-motion'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('@sim/emcn', () => ({
+  cn: (...values: Array<string | false | undefined>) => values.filter(Boolean).join(' '),
+  usePrefersReducedMotion,
+}))
+vi.mock('@sim/emcn/icons', () => ({ Blimp: () => null, Table: () => null }))
+vi.mock('@/components/ui', () => ({ ThinkingLoader: () => null }))
+vi.mock('framer-motion', () => ({
+  AnimatePresence: ({ children }: { children: ReactNode }) => children,
+  MotionConfig: ({ children }: { children: ReactNode }) => children,
+  motion: {
+    div: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+    span: ({ children }: { children: ReactNode }) => <span>{children}</span>,
+  },
+}))
+vi.mock(
+  '@/app/(landing)/components/hero/components/hero-platform-loop/production-workflow-stage',
+  () => ({
+    ProductionWorkflowStage: ({ builtCount }: { builtCount: number }) => (
+      <div data-workflow-blocks={builtCount} />
+    ),
+  })
+)
+vi.mock('@/app/(landing)/components/product-demo/components/composer-loop/demo-composer', () => ({
+  DemoComposer: ({ prompt }: { prompt: string }) => <div data-composer>{prompt}</div>,
+}))
+
+import { ComposerLoop } from '@/app/(landing)/components/product-demo/components/composer-loop/composer-loop'
+import { DEMO_BLOCKS } from '@/app/(landing)/components/product-demo/components/composer-loop/demo-workflow-data'
+
+let root: Root
+let host: HTMLDivElement
+let reducedMotion: boolean
+let motionListeners: Set<() => void>
+
+beforeEach(() => {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  vi.useFakeTimers({ toFake: ['setTimeout', 'clearTimeout'] })
+  reducedMotion = false
+  motionListeners = new Set()
+  vi.stubGlobal('matchMedia', () => ({
+    get matches() {
+      return reducedMotion
+    },
+    addEventListener: (_event: string, callback: () => void) => motionListeners.add(callback),
+    removeEventListener: (_event: string, callback: () => void) => motionListeners.delete(callback),
+  }))
+  vi.stubGlobal('IntersectionObserver', undefined)
+  vi.stubGlobal('ResizeObserver', undefined)
+  host = document.createElement('div')
+  document.body.append(host)
+  root = createRoot(host)
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  host.remove()
+  vi.useRealTimers()
+  vi.unstubAllGlobals()
+})
+
+function setReducedMotion(value: boolean) {
+  act(() => {
+    reducedMotion = value
+    motionListeners.forEach((listener) => listener())
+  })
+}
+
+describe('ComposerLoop motion preference', () => {
+  it('shows the completed workflow without starting decorative timers when motion is reduced', () => {
+    reducedMotion = true
+    const onBeat = vi.fn()
+    act(() => root.render(<ComposerLoop onBeat={onBeat} />))
+
+    expect(host.querySelector('[data-workflow-blocks]')?.getAttribute('data-workflow-blocks')).toBe(
+      String(DEMO_BLOCKS.length)
+    )
+    expect(host.querySelector('[data-composer]')).toBeNull()
+    expect(onBeat).toHaveBeenLastCalledWith('build')
+    expect(vi.getTimerCount()).toBe(0)
+
+    act(() => vi.advanceTimersByTime(60_000))
+    expect(host.querySelector('[data-composer]')).toBeNull()
+    expect(vi.getTimerCount()).toBe(0)
+  })
+
+  it('cancels an active pass immediately when reduced motion is enabled', () => {
+    const onBeat = vi.fn()
+    act(() => root.render(<ComposerLoop onBeat={onBeat} />))
+    act(() => vi.advanceTimersByTime(1_100))
+    expect(host.querySelector('[data-composer]')?.textContent).not.toBe('')
+    expect(vi.getTimerCount()).toBeGreaterThan(0)
+
+    setReducedMotion(true)
+    expect(host.querySelector('[data-composer]')).toBeNull()
+    expect(host.querySelector('[data-workflow-blocks]')?.getAttribute('data-workflow-blocks')).toBe(
+      String(DEMO_BLOCKS.length)
+    )
+    expect(vi.getTimerCount()).toBe(0)
+    act(() => vi.advanceTimersByTime(60_000))
+    expect(onBeat).toHaveBeenLastCalledWith('build')
+  })
+
+  it('starts a fresh pass when motion is enabled again and unsubscribes on unmount', () => {
+    reducedMotion = true
+    act(() => root.render(<ComposerLoop />))
+    setReducedMotion(false)
+    expect(host.querySelector('[data-composer]')?.textContent).toBe('')
+    act(() => vi.advanceTimersByTime(1_100))
+    expect(host.querySelector('[data-composer]')?.textContent).not.toBe('')
+
+    act(() => root.unmount())
+    expect(vi.getTimerCount()).toBe(0)
+    expect(motionListeners.size).toBe(0)
+  })
+})
diff --git a/apps/sim/app/(landing)/components/product-demo/components/composer-loop/composer-loop.tsx b/apps/sim/app/(landing)/components/product-demo/components/composer-loop/composer-loop.tsx
new file mode 100644
index 00000000000..9f0235b688a
--- /dev/null
+++ b/apps/sim/app/(landing)/components/product-demo/components/composer-loop/composer-loop.tsx
@@ -0,0 +1,833 @@
+'use client'
+
+import { useEffect, useId, useRef, useState } from 'react'
+import { cn, usePrefersReducedMotion } from '@sim/emcn'
+import { Blimp } from '@sim/emcn/icons'
+import { AnimatePresence, MotionConfig, motion } from 'framer-motion'
+import { ThinkingLoader } from '@/components/ui'
+import {
+  ProductionWorkflowStage,
+  type ScriptedWorkflowState,
+} from '@/app/(landing)/components/hero/components/hero-platform-loop/production-workflow-stage'
+import { DemoComposer } from '@/app/(landing)/components/product-demo/components/composer-loop/demo-composer'
+import {
+  DEMO_BLOCKS,
+  DEMO_CANVAS,
+  DEMO_EDGES,
+} from '@/app/(landing)/components/product-demo/components/composer-loop/demo-workflow-data'
+import type { DemoBeatId } from '@/app/(landing)/components/product-demo/components/product-demo-caption'
+
+/**
+ * The composer loop from the design studio's "Mothership input" iteration,
+ * ported for the homepage stage, light theme.
+ *
+ * The interaction: after a beat, a prompt types itself into the composer and
+ * sends, and a chat box rises out of the composer:
+ * born narrow and tucked behind the composer's top edge, it lifts clear and
+ * flares to full width on critically damped springs, wearing the product's
+ * chrome (hairline, radius, white fill). For the first beat that chrome is
+ * liquid: a goo filter fuses the box with the composer's body and draws the
+ * box - white fill, hairline rim, and the meniscus where it pours out of the
+ * composer - so its edges go gooey and settle crisp. The composer keeps its
+ * own chrome throughout, and the box's CSS chrome takes over only once the
+ * blur is gone, when the two are identical, so the handover is never seen.
+ * Sim thinks with the goo cycle loader, streams a reply beside it, hands off to the Blimp, and holds. Then the chat
+ * hands over to the product: the composer group fades away, and only once it
+ * is gone the real workflow canvas fades in on its Start block at full size, and the workflow
+ * the prompt described builds out node by node - each card landing already
+ * selected, ring and action-menu swell on the newest one, the camera easing
+ * out to keep the growing graph in view - then the whole graph holds before
+ * the stage resets to the resting composer for the next pass.
+ *
+ * The composer group is stage-centred: as the chat box opens the composer
+ * pushes down and the combined UI stays centred to the frame. Each pass is a
+ * fresh mount, so its springs and keyframes always start from rest, and passes
+ * only run while the stage is in view. Frames narrower than 1024px skip the
+ * workflow act - seven cards cannot fit legibly - and loop the chat alone.
+ */
+
+/** The composer's design width; the stage scales the whole group from here. */
+const WIDTH = 560
+/**
+ * On wide frames the composer spans this share of the frame's width by scaling
+ * the whole design, so type, radii, and motion all grow together - large
+ * enough to read as the section's subject, well short of filling the stage.
+ */
+const STAGE_FILL = 0.36
+const MAX_SCALE = 1.15
+const MIN_SCALE = 0.8
+/**
+ * The open group's design height (chat box, gap, composer) plus breathing
+ * room. The scale also fits this into the frame's height - less any clearance
+ * the frame owes to copy overlaid on it - so a short viewport never clips the
+ * open chat or runs it into the heading.
+ */
+const GROUP_FIT_HEIGHT = 360
+/** Below this frame width the design is not scaled; the composer shrinks to fit instead. */
+const NARROW_FRAME = 640
+/** Below this frame width the workflow act is skipped: seven cards cannot fit legibly. */
+const WORKFLOW_MIN_FRAME = 1024
+/** Breathing room the composer keeps from the frame's sides on narrow frames. */
+const FRAME_INSET = 32
+const MIN_WIDTH = 260
+/** The product composer's radius (`rounded-2xl`), shared by the chat bloc that emerges from it. */
+const BOX_RADIUS = 16
+/** The sent prompt's bubble, on the platform's standard radius. */
+const BUBBLE_RADIUS = 16
+/** The hairline both surfaces carry; the chat box's height compensates for it. */
+const HAIRLINE_PX = 1
+/** Resting gap between the chat box and the composer. */
+const GAP = 10
+/** How far the chat box starts tucked behind the composer's top edge. */
+const BIRTH_Y = 20
+/**
+ * How much narrower than the composer the chat box is born - well inside the
+ * composer's footprint, so it reads as squeezed out of the composer rather
+ * than dropped onto it. It flares to full width only after lifting clear.
+ */
+const BIRTH_INSET = 108
+/**
+ * The opening window: the box's lift and flare springs have settled enough by
+ * here that later content growth (the thinking row, the wrapping reply) rides
+ * the quick grow spring instead.
+ */
+const OPEN_MS = 850
+/**
+ * The goo: the blur that fuses the two blocs' silhouettes while the box is
+ * born. It rises as the box's lip emerges, holds through the narrow touch
+ * window, then clears as the box flares wide and lifts clear - by which point
+ * the springs have carried the box past the blur's reach, so the neck thins
+ * and snaps. It runs over the opening window.
+ */
+const GOO_MS = OPEN_MS
+const GOO_MAX = 16
+const openGooAt = (t: number) => {
+  if (t < 0.16) return GOO_MAX * (t / 0.16) ** 2
+  if (t < 0.36) return GOO_MAX
+  if (t < 0.58) return GOO_MAX * (1 - (t - 0.36) / 0.22) ** 2
+  return 0
+}
+/**
+ * The alpha threshold that turns the blur back into a silhouette. Steep, so
+ * edges stay crisp (the studio's gentle slope was the feather), but sitting
+ * at 42% coverage like the studio's, so the bodies swell a hair under the
+ * blur and merge generously - that swell and the early merge are what read
+ * as liquid.
+ */
+const GOO_THRESHOLD = '1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 60 -25'
+/**
+ * How far the composer's goo body is inset from the real composer. Under the
+ * blur a thresholded silhouette swells by a few px per side; keeping the body
+ * this much inside means the swell lands under the crisp composer painted
+ * over it, so no white lip escapes any edge - only the top, where the box
+ * pours in, is reached by the neck.
+ */
+const GHOST_INSET = { x: 24, y: 6 } as const
+/**
+ * The composer's top hairline would cut across the neck, so for as long as
+ * the goo is live a white bar the box's width (plus the fillets' reach, which
+ * grows with the blur) covers it, fading with the blur so it is gone the
+ * moment the neck is.
+ */
+const FILLET_REACH = 1.1
+const BAR_FADE_SIGMA = 6
+/** The meniscus outline: one device pixel, like the surfaces' hairline. */
+const hairlineRadius = () =>
+  typeof window === 'undefined' ? 0.5 : Math.max(0.5, 1 / (window.devicePixelRatio || 1))
+/** Cycle-loader glyph size in the chat (thinking + reply rows, and the Blimp). */
+const LOADER_SIZE = 26
+/** The answer row reserves one glyph line so the box holds steady while thinking. */
+const ROW_MIN = LOADER_SIZE
+/** Resting height of the one-line composer before it is measured. */
+const COMPOSER_BASE_HEIGHT = 78
+/** The reply text size, expressed for the loader's phase label. */
+const THINKING_LABEL_RATIO = 15 / LOADER_SIZE
+
+/**
+ * Every geometry property rides a critically damped spring - bounce 0 - so
+ * the box eases in and settles like a viscous blob instead of overshooting.
+ */
+const OPEN_SPRING = { type: 'spring', duration: 0.9, bounce: 0 } as const
+/** Height spring for content growth after the box has opened (a wrapping reply). */
+const GROW_SPRING = { type: 'spring', duration: 0.35, bounce: 0 } as const
+const MORPH_SPRING = { type: 'spring', duration: 0.3, bounce: 0 } as const
+/**
+ * Width shapes the emergence: opening holds the narrow birth width while the
+ * box is still tucked, then flares quickly once it lifts clear.
+ */
+const WIDTH_OPEN = { type: 'spring', duration: 0.42, bounce: 0, delay: 0.26 } as const
+const EASE_OUT_STRONG = [0.23, 1, 0.32, 1] as const
+const EASE_ENTRANCE = [0.25, 0.46, 0.45, 0.94] as const
+const EASE_EXIT = [0.45, 0, 0.55, 1] as const
+
+/** The product composer's resting `shadow-xs`; it drops once the conversation opens. */
+const SHELL_SHADOW = '0 1px 2px 0 rgba(0,0,0,0.05)'
+
+/**
+ * The chat surface - the box, the seam bar, the goo bodies, and the goo
+ * filter's flood all read this one property, so the liquid opening beat fuses
+ * bodies of exactly the surface's colour. White on the light ground, the
+ * product's elevated dark surface (the same one the composer takes) on the
+ * dark ground. It is set on both the scene root and the filter's `<svg>`,
+ * which are siblings, so the flood inherits it too.
+ */
+const CHAT_SURFACE_VARS = '[--chat-surface:var(--white)] dark:[--chat-surface:var(--surface-4)]'
+const EMPTY_SHELL_SHADOW = '0 1px 2px 0 rgba(0,0,0,0)'
+
+const TYPED =
+  'Triage new Zendesk tickets: pull the runbook, classify severity, page on-call for P1s, and draft replies for approval.'
+const REPLY =
+  'On it — I’ll search your runbooks for each new ticket, classify its severity, page on-call and open a Jira incident for P1s, and route every other reply through approval before it posts back to Zendesk.'
+const REPLY_WORDS = REPLY.split(' ')
+
+/** Timeline beats (ms). */
+const T = {
+  typeStep: 34,
+  /** Let the cycle loader + status phrase breathe before the answer types. */
+  streamDelay: 1400,
+  streamStep: 95,
+} as const
+/** Send → reply: how long Sim thinks. */
+const THINK_MS = 2200
+/**
+ * How long after send the thinking loader appears - just past the box's
+ * open-spring settle, so it never mounts under a still-growing (clipping) box
+ * and starts its shape cycle from the top once visible.
+ */
+const THINK_APPEAR = 900
+/** The composer rests for a beat before the prompt starts typing. */
+const TYPE_START_MS = 900
+const SEND_AT = TYPE_START_MS + TYPED.length * T.typeStep + 340
+const RESPOND_AT = SEND_AT + THINK_MS
+const STREAM_DONE_AT = RESPOND_AT + T.streamDelay + REPLY_WORDS.length * T.streamStep
+/** Hold on the finished reply before the chat hands over to the workflow. */
+const HANDOFF_AT = STREAM_DONE_AT + 1450
+
+/**
+ * The workflow act, in ms from its start: the canvas fades in, cards land one
+ * by one, each landing selected, then the whole graph holds.
+ */
+const WORKFLOW_FADE_MS = 500
+/**
+ * The composer group's fade-out. The workflow canvas mounts only after it, so
+ * the two never share a frame - no canvas flashing in behind a still-visible
+ * composer.
+ */
+const COMPOSER_FADE_MS = 500
+const BUILD_START_MS = 600
+const BUILD_STEP_MS = 640
+/**
+ * Cards on the canvas before Sim builds anything: the Start block every new
+ * workflow opens with, which is why it leads `DEMO_BLOCKS`.
+ */
+const PREBUILT_COUNT = 1
+/** The last card stays selected for a beat before the selection clears. */
+const BUILD_SETTLE_MS = 900
+/** The finished graph holds in view before the stage resets. */
+const BUILD_HOLD_MS = 2_000
+
+type DemoPhase = 'chat' | 'handoff' | 'workflow' | 'reset'
+
+interface DemoScript extends ScriptedWorkflowState {
+  builtCount: number
+}
+
+const IDLE_SCRIPT: DemoScript = {
+  builtCount: 0,
+  selectedId: null,
+  isWorkflowRunning: false,
+  runningId: null,
+  completedIds: new Set(),
+}
+
+const FINISHED_SCRIPT: DemoScript = { ...IDLE_SCRIPT, builtCount: DEMO_BLOCKS.length }
+
+interface ComposerPassProps {
+  /** The composer's design width for this frame. */
+  width: number
+  /** Uniform scale the stage applies to the whole group. */
+  scale: number
+  /** Called the instant the prompt is sent, when Sim starts to think. */
+  onSend: () => void
+  /** Called once the reply has finished and held, so the parent can hand over to the workflow. */
+  onReplyHold: () => void
+}
+
+/** The chat act. Mounted fresh per pass so every spring starts at rest. */
+function ComposerPass({ width, scale, onSend, onReplyHold }: ComposerPassProps) {
+  const birthWidth = Math.max(160, width - BIRTH_INSET)
+  const gooFilterId = `${useId().replace(/[^a-zA-Z0-9-]/g, '')}-goo`
+  const blurRef = useRef<SVGFEGaussianBlurElement>(null)
+  const [ringRadius] = useState(hairlineRadius)
+  const barRef = useRef<HTMLDivElement>(null)
+
+  const [prompt, setPrompt] = useState('')
+  const [isSending, setIsSending] = useState(false)
+  const [messages, setMessages] = useState<string[]>([])
+  const [thinking, setThinking] = useState(false)
+  const [replying, setReplying] = useState(false)
+  const [replyDone, setReplyDone] = useState(false)
+  const [streamed, setStreamed] = useState('')
+  const [opening, setOpening] = useState(false)
+  const [gooLive, setGooLive] = useState(false)
+  /**
+   * The timeline runs exactly once per pass. The parent recreates its callback
+   * on every render (build steps, layout fits), so it is read through a ref:
+   * a dependency on it would restart the whole timeline mid-flight - retyping
+   * the prompt and re-firing the send against an already-open box.
+   */
+  const onSendRef = useRef(onSend)
+  const onReplyHoldRef = useRef(onReplyHold)
+  useEffect(() => {
+    onSendRef.current = onSend
+    onReplyHoldRef.current = onReplyHold
+  }, [onSend, onReplyHold])
+  const [composerH, setComposerH] = useState(COMPOSER_BASE_HEIGHT)
+  const [chatH, setChatH] = useState(0)
+  const composerWrapRef = useRef<HTMLDivElement>(null)
+  const chatContentRef = useRef<HTMLDivElement>(null)
+
+  const expanded = messages.length > 0
+
+  useEffect(() => {
+    const el = composerWrapRef.current?.firstElementChild as HTMLElement | null
+    if (!el) return
+    const measure = () => setComposerH(el.offsetHeight)
+    measure()
+    if (typeof ResizeObserver === 'undefined') return
+    const observer = new ResizeObserver(measure)
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [])
+
+  useEffect(() => {
+    const el = chatContentRef.current
+    if (!el) return
+    const measure = () => setChatH(el.offsetHeight)
+    measure()
+    if (typeof ResizeObserver === 'undefined') return
+    const observer = new ResizeObserver(measure)
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [])
+
+  useEffect(() => {
+    if (!opening) return
+    const timer = setTimeout(() => setOpening(false), OPEN_MS)
+    return () => clearTimeout(timer)
+  }, [opening])
+
+  useEffect(() => {
+    if (!opening) return
+    const blur = blurRef.current
+    if (!blur) return
+    setGooLive(true)
+    const start = performance.now()
+    let frame = requestAnimationFrame(function tick(now) {
+      const t = Math.min((now - start) / GOO_MS, 1)
+      const goo = openGooAt(t)
+      blur.setAttribute('stdDeviation', String(goo))
+      const bar = barRef.current
+      if (bar) {
+        bar.style.setProperty('--fillet', `${FILLET_REACH * goo}px`)
+        bar.style.opacity = String(Math.min(1, goo / BAR_FADE_SIGMA))
+      }
+      if (goo === 0 && t > 0.5) {
+        setGooLive(false)
+        return
+      }
+      frame = requestAnimationFrame(tick)
+    })
+    return () => {
+      cancelAnimationFrame(frame)
+      blur.setAttribute('stdDeviation', '0')
+      setGooLive(false)
+    }
+  }, [opening])
+
+  useEffect(() => {
+    const timers: ReturnType<typeof setTimeout>[] = []
+    const at = (ms: number, fn: () => void) => timers.push(setTimeout(fn, ms))
+
+    for (let i = 0; i < TYPED.length; i++) {
+      at(TYPE_START_MS + i * T.typeStep, () => setPrompt(TYPED.slice(0, i + 1)))
+    }
+    at(SEND_AT, () => {
+      setPrompt('')
+      setMessages([TYPED])
+      setIsSending(true)
+      setOpening(true)
+      onSendRef.current()
+    })
+    at(SEND_AT + THINK_APPEAR, () => setThinking(true))
+    const streamStart = RESPOND_AT + T.streamDelay
+    at(streamStart, () => {
+      setThinking(false)
+      setReplying(true)
+    })
+    for (let i = 1; i <= REPLY_WORDS.length; i++) {
+      at(streamStart + (i - 1) * T.streamStep, () => setStreamed(REPLY_WORDS.slice(0, i).join(' ')))
+    }
+    at(STREAM_DONE_AT, () => {
+      setReplyDone(true)
+      setIsSending(false)
+    })
+    at(HANDOFF_AT, () => onReplyHoldRef.current())
+
+    return () => {
+      for (const timer of timers) clearTimeout(timer)
+    }
+  }, [])
+
+  return (
+    <MotionConfig reducedMotion='user'>
+      <svg width='0' height='0' aria-hidden='true' className={cn('absolute', CHAT_SURFACE_VARS)}>
+        <defs>
+          {/* The studio's goo, crisp: blur the bodies, threshold them back
+              into one swollen silhouette, then fill it in the surfaces' own
+              colour and rim it with their hairline at one device pixel. */}
+          <filter
+            id={gooFilterId}
+            colorInterpolationFilters='sRGB'
+            x='-10%'
+            y='-10%'
+            width='120%'
+            height='120%'
+          >
+            <feGaussianBlur ref={blurRef} in='SourceGraphic' stdDeviation='0' result='blur' />
+            <feColorMatrix in='blur' type='matrix' values={GOO_THRESHOLD} result='body' />
+            <feMorphology in='body' operator='erode' radius={ringRadius} result='inner' />
+            <feComposite in='body' in2='inner' operator='out' result='rim' />
+            <feFlood style={{ floodColor: 'var(--chat-surface)' }} result='white' />
+            <feComposite in='white' in2='body' operator='in' result='fill' />
+            <feFlood style={{ floodColor: 'var(--border)' }} result='ink' />
+            <feComposite in='ink' in2='rim' operator='in' result='outline' />
+            <feMerge>
+              <feMergeNode in='fill' />
+              <feMergeNode in='outline' />
+            </feMerge>
+          </filter>
+        </defs>
+      </svg>
+      <div
+        className={cn('relative', CHAT_SURFACE_VARS)}
+        style={{ width, transform: `scale(${scale})`, transformOrigin: 'center' }}
+      >
+        <div className='relative isolate w-full'>
+          {/* CHAT BOX - born tucked behind the composer's top edge, it rises
+              clear. For the opening beat its chrome is the goo body beneath
+              it (see GOO) and its own is transparent; the two coincide exactly
+              whenever the blur is zero, which is the only time they swap, so
+              the swap is never seen. */}
+          <motion.div
+            initial={false}
+            className='relative z-20'
+            animate={{
+              y: expanded ? 0 : BIRTH_Y,
+              marginBottom: expanded ? GAP : 0,
+              opacity: messages.length > 0 ? 1 : 0,
+            }}
+            transition={{
+              y: OPEN_SPRING,
+              marginBottom: OPEN_SPRING,
+              opacity: { duration: 0.2, ease: EASE_OUT_STRONG },
+            }}
+          >
+            <motion.div
+              initial={false}
+              animate={{
+                width: expanded ? width : birthWidth,
+                height: expanded ? chatH + 2 * HAIRLINE_PX : 0,
+              }}
+              transition={{
+                width: WIDTH_OPEN,
+                height: opening ? OPEN_SPRING : GROW_SPRING,
+              }}
+              className={cn(
+                'mx-auto flex flex-col overflow-hidden border',
+                gooLive
+                  ? 'border-transparent bg-transparent'
+                  : 'border-[var(--border)] bg-[var(--chat-surface)]'
+              )}
+              style={{ borderRadius: BOX_RADIUS }}
+            >
+              <div
+                ref={chatContentRef}
+                className='box-border flex flex-col gap-4 p-4'
+                style={{ width }}
+              >
+                {messages.map((text) => (
+                  <div key={text} className='flex justify-end'>
+                    <motion.div
+                      initial={{ opacity: 0, y: 10, filter: 'blur(3px)' }}
+                      animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
+                      transition={{ duration: 0.4, delay: 0.15, ease: EASE_OUT_STRONG }}
+                      className='max-w-[70%] overflow-hidden bg-[var(--surface-5)] px-3.5 py-2 text-[15px] text-[var(--text-primary)] leading-[22px]'
+                      style={{ borderRadius: BUBBLE_RADIUS }}
+                    >
+                      {text}
+                    </motion.div>
+                  </div>
+                ))}
+                <div style={{ minHeight: ROW_MIN }}>
+                  <AnimatePresence initial={false}>
+                    {(thinking || replying) && (
+                      <motion.div
+                        key='answer'
+                        initial={{ opacity: 0, y: 6 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        exit={{ opacity: 0, transition: { duration: 0.25, ease: EASE_OUT_STRONG } }}
+                        transition={{ duration: 0.3, ease: EASE_OUT_STRONG }}
+                        className='relative z-[2] flex min-h-[24px] items-start gap-2.5'
+                      >
+                        {/* ONE persistent cycle loader from thinking through the
+                            reply; it hands off to the Blimp once the answer completes. */}
+                        <span
+                          className='relative shrink-0'
+                          style={{ width: LOADER_SIZE, height: LOADER_SIZE }}
+                        >
+                          <AnimatePresence mode='popLayout' initial={false}>
+                            {replyDone ? (
+                              <motion.span
+                                key='blimp'
+                                initial={{ opacity: 0, scale: 0.25, filter: 'blur(4px)' }}
+                                animate={{ opacity: 1, scale: 1, filter: 'blur(0px)' }}
+                                transition={MORPH_SPRING}
+                                className='absolute inset-0 grid place-items-center'
+                              >
+                                <Blimp
+                                  className='text-[var(--text-icon)]'
+                                  style={{ width: LOADER_SIZE, height: LOADER_SIZE }}
+                                />
+                              </motion.span>
+                            ) : (
+                              <motion.span
+                                key='goo'
+                                exit={{ opacity: 0, filter: 'blur(3px)' }}
+                                transition={{ duration: 0.3, ease: EASE_OUT_STRONG }}
+                                className='absolute inset-0'
+                              >
+                                <ThinkingLoader size={LOADER_SIZE} startVariant='corners' />
+                              </motion.span>
+                            )}
+                          </AnimatePresence>
+                        </span>
+                        <span className='relative z-[2] block min-h-[24px] min-w-0 flex-1 text-[15px] leading-[24px]'>
+                          {streamed.length > 0 ? (
+                            <span className='block text-[var(--text-primary)]'>{streamed}</span>
+                          ) : (
+                            <ThinkingLoader
+                              size={LOADER_SIZE}
+                              startVariant='corners'
+                              phase
+                              labelRatio={THINKING_LABEL_RATIO}
+                              className='h-[24px] [&>svg]:hidden [&_*]:leading-[24px]'
+                            />
+                          )}
+                        </span>
+                      </motion.div>
+                    )}
+                  </AnimatePresence>
+                </div>
+              </div>
+            </motion.div>
+          </motion.div>
+
+          {/* COMPOSER - the product's own chrome, unchanged through the
+              emergence; its resting shadow-xs fades once the conversation
+              opens, as in the product. */}
+          <div className='relative'>
+            <motion.div
+              ref={composerWrapRef}
+              initial={false}
+              animate={{
+                height: composerH,
+                boxShadow: expanded ? EMPTY_SHELL_SHADOW : SHELL_SHADOW,
+              }}
+              transition={{
+                height: GROW_SPRING,
+                boxShadow: {
+                  duration: opening ? 0.3 : 0.7,
+                  ease: opening ? EASE_EXIT : EASE_ENTRANCE,
+                },
+              }}
+              className='relative z-30 overflow-hidden rounded-2xl [&>div]:shadow-none'
+            >
+              <DemoComposer prompt={prompt} isSending={isSending} isInitialView={!expanded} />
+              {opening && (
+                <motion.div
+                  aria-hidden='true'
+                  initial={{ width: birthWidth, x: '-50%' }}
+                  animate={{ width: expanded ? width : birthWidth, x: '-50%' }}
+                  transition={{ width: WIDTH_OPEN }}
+                  className='pointer-events-none absolute top-0 left-1/2 z-10 h-px'
+                >
+                  <div
+                    ref={barRef}
+                    className='absolute inset-y-0 bg-[var(--chat-surface)] opacity-0'
+                    style={{
+                      left: 'calc(-1 * var(--fillet, 0px))',
+                      right: 'calc(-1 * var(--fillet, 0px))',
+                    }}
+                  />
+                </motion.div>
+              )}
+            </motion.div>
+          </div>
+
+          {/* GOO - the studio's arrangement: beneath the content, this layer
+              IS the chat box's body for the opening beat. It holds a copy of
+              the box on the same springs (tuck included) and the composer's
+              body inset from the real one, both in the chat surface; the filter
+              fuses them into one swollen silhouette with a hairline rim, so
+              the box's edges go liquid and it pours out of the composer with
+              a neck that thins and snaps as it lifts clear. The column is
+              anchored to the top, like the real one, so the copies track the
+              visible surfaces while the composer wrap's height springs. */}
+          {opening && (
+            <div
+              className='pointer-events-none absolute inset-0 z-10 flex flex-col items-center justify-start'
+              style={{ filter: `url(#${gooFilterId})` }}
+            >
+              <motion.div
+                initial={{ width: birthWidth, height: 0, y: BIRTH_Y, marginBottom: 0 }}
+                animate={{
+                  width: expanded ? width : birthWidth,
+                  height: expanded ? chatH + 2 * HAIRLINE_PX : 0,
+                  y: expanded ? 0 : BIRTH_Y,
+                  marginBottom: expanded ? GAP : 0,
+                }}
+                transition={{
+                  height: OPEN_SPRING,
+                  y: OPEN_SPRING,
+                  marginBottom: OPEN_SPRING,
+                  width: WIDTH_OPEN,
+                }}
+                className='bg-[var(--chat-surface)]'
+                style={{ borderRadius: BOX_RADIUS }}
+              />
+              <div
+                className='bg-[var(--chat-surface)]'
+                style={{
+                  width: width - 2 * GHOST_INSET.x,
+                  height: composerH - 2 * GHOST_INSET.y,
+                  marginTop: GHOST_INSET.y,
+                  borderRadius: BOX_RADIUS,
+                }}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </MotionConfig>
+  )
+}
+
+interface ComposerLoopProps {
+  /**
+   * Px at the top of the frame that copy overlays, mirrored at the bottom so
+   * the group stays centred: the height fit subtracts both.
+   */
+  clearance?: number
+  /**
+   * Reports the act the scene is in - the prompt being described, Sim
+   * planning its reply, the workflow being built - so the section's caption
+   * can follow it.
+   */
+  onBeat?: (beat: DemoBeatId) => void
+}
+
+/**
+ * The stage: fills the product-demo frame, centres the composer group, sizes
+ * it to the frame, and runs the two acts - chat, then the workflow building,
+ * each card landing selected - in a loop while the frame is in
+ * view. Decorative and `aria-hidden`; nothing here is interactive.
+ */
+export function ComposerLoop({ clearance = 0, onBeat }: ComposerLoopProps) {
+  const reducedMotion = usePrefersReducedMotion()
+
+  useEffect(() => {
+    if (reducedMotion) onBeat?.('build')
+  }, [reducedMotion, onBeat])
+
+  if (reducedMotion) {
+    return (
+      <div
+        aria-hidden='true'
+        inert
+        className='pointer-events-none absolute inset-0 overflow-hidden'
+      >
+        <ProductionWorkflowStage
+          builtCount={FINISHED_SCRIPT.builtCount}
+          blocks={DEMO_BLOCKS}
+          edges={DEMO_EDGES}
+          canvas={DEMO_CANVAS}
+          scripted={FINISHED_SCRIPT}
+          viewportInset={{ top: clearance, bottom: clearance }}
+        />
+      </div>
+    )
+  }
+
+  return <AnimatedComposerLoop clearance={clearance} onBeat={onBeat} />
+}
+
+/** Mounted only while motion is allowed, so preference changes cancel every pending act. */
+function AnimatedComposerLoop({ clearance = 0, onBeat }: ComposerLoopProps) {
+  const stageRef = useRef<HTMLDivElement>(null)
+  const onBeatRef = useRef(onBeat)
+  const [layout, setLayout] = useState({ width: WIDTH, scale: 1, workflow: true })
+  const [visible, setVisible] = useState(false)
+  const [passKey, setPassKey] = useState(0)
+  const [phase, setPhase] = useState<DemoPhase>('chat')
+  const [script, setScript] = useState<DemoScript>(IDLE_SCRIPT)
+
+  useEffect(() => {
+    onBeatRef.current = onBeat
+  }, [onBeat])
+
+  useEffect(() => {
+    if (phase === 'chat') onBeatRef.current?.('describe')
+    else if (phase === 'workflow') onBeatRef.current?.('build')
+  }, [phase])
+
+  useEffect(() => {
+    if (phase !== 'workflow') return
+    const timers: ReturnType<typeof setTimeout>[] = []
+    const at = (ms: number, fn: () => void) => timers.push(setTimeout(fn, ms))
+
+    setScript({ ...IDLE_SCRIPT, builtCount: PREBUILT_COUNT, selectedId: DEMO_BLOCKS[0].id })
+    DEMO_BLOCKS.slice(PREBUILT_COUNT).forEach((block, index) => {
+      at(BUILD_START_MS + index * BUILD_STEP_MS, () =>
+        setScript((current) => ({
+          ...current,
+          builtCount: PREBUILT_COUNT + index + 1,
+          selectedId: block.id,
+        }))
+      )
+    })
+    const buildEnd = BUILD_START_MS + (DEMO_BLOCKS.length - PREBUILT_COUNT) * BUILD_STEP_MS
+    const settled = buildEnd + BUILD_SETTLE_MS
+    at(settled, () => setScript((current) => ({ ...current, selectedId: null })))
+    at(settled + BUILD_HOLD_MS, () => setPhase('reset'))
+
+    return () => {
+      for (const timer of timers) clearTimeout(timer)
+    }
+  }, [phase])
+
+  useEffect(() => {
+    if (phase !== 'handoff') return
+    const timer = setTimeout(() => setPhase('workflow'), COMPOSER_FADE_MS)
+    return () => clearTimeout(timer)
+  }, [phase])
+
+  useEffect(() => {
+    if (phase !== 'reset') return
+    const timer = setTimeout(() => {
+      setScript(IDLE_SCRIPT)
+      setPassKey((key) => key + 1)
+      setPhase('chat')
+    }, WORKFLOW_FADE_MS + 100)
+    return () => clearTimeout(timer)
+  }, [phase])
+
+  useEffect(() => {
+    const stage = stageRef.current
+    if (!stage) return
+
+    const fitStage = () => {
+      const frame = stage.clientWidth
+      const room = stage.clientHeight - 2 * clearance
+      const byHeight = stage.clientHeight > 0 ? Math.max(0, room) / GROUP_FIT_HEIGHT : MAX_SCALE
+      const workflow = frame >= WORKFLOW_MIN_FRAME
+      if (frame < NARROW_FRAME) {
+        const width = Math.max(MIN_WIDTH, Math.min(WIDTH, frame - FRAME_INSET * 2))
+        const scale = Math.min(1, Math.max(MIN_SCALE, byHeight))
+        setLayout((current) =>
+          current.width === width && current.scale === scale && current.workflow === workflow
+            ? current
+            : { width, scale, workflow }
+        )
+        return
+      }
+      const byWidth = (frame * STAGE_FILL) / WIDTH
+      const scale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, Math.min(byWidth, byHeight)))
+      setLayout((current) =>
+        current.width === WIDTH && current.scale === scale && current.workflow === workflow
+          ? current
+          : { width: WIDTH, scale, workflow }
+      )
+    }
+    fitStage()
+    const resize = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(fitStage)
+    resize?.observe(stage)
+
+    let intersection: IntersectionObserver | undefined
+    if (typeof IntersectionObserver === 'undefined') {
+      setVisible(true)
+    } else {
+      intersection = new IntersectionObserver(([entry]) => {
+        setVisible(entry.isIntersecting)
+        if (!entry.isIntersecting) {
+          setScript(IDLE_SCRIPT)
+          setPhase('chat')
+          setPassKey((key) => key + 1)
+        }
+      })
+      intersection.observe(stage)
+    }
+
+    return () => {
+      resize?.disconnect()
+      intersection?.disconnect()
+    }
+  }, [clearance])
+
+  return (
+    <div
+      ref={stageRef}
+      aria-hidden='true'
+      className={cn(
+        'absolute inset-0 grid place-items-center overflow-hidden',
+        'pointer-events-none'
+      )}
+    >
+      {visible && (
+        <>
+          <div
+            className={cn(
+              'col-start-1 row-start-1 transition-[opacity,transform] duration-500 [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
+              phase === 'chat' ? 'scale-100 opacity-100' : 'scale-[0.97] opacity-0'
+            )}
+          >
+            <ComposerPass
+              key={passKey}
+              width={layout.width}
+              scale={layout.scale}
+              onSend={() => onBeatRef.current?.('plan')}
+              onReplyHold={() => setPhase(layout.workflow ? 'handoff' : 'reset')}
+            />
+          </div>
+          {(phase === 'workflow' || phase === 'reset') && (
+            <div
+              className={cn(
+                'absolute inset-0 animate-[hero-stage-fade_500ms_cubic-bezier(0.23,1,0.32,1)_both] transition-opacity duration-500',
+                phase === 'workflow' ? 'opacity-100' : 'opacity-0'
+              )}
+            >
+              <ProductionWorkflowStage
+                builtCount={script.builtCount}
+                blocks={DEMO_BLOCKS}
+                edges={DEMO_EDGES}
+                canvas={DEMO_CANVAS}
+                scripted={script}
+                viewportInset={{ top: clearance, bottom: clearance }}
+              />
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/product-demo/components/composer-loop/demo-composer.test.tsx b/apps/sim/app/(landing)/components/product-demo/components/composer-loop/demo-composer.test.tsx
new file mode 100644
index 00000000000..a0d1896cfa4
--- /dev/null
+++ b/apps/sim/app/(landing)/components/product-demo/components/composer-loop/demo-composer.test.tsx
@@ -0,0 +1,56 @@
+/**
+ * @vitest-environment node
+ */
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import {
+  COMPOSER_ACTIONS,
+  DemoComposer,
+} from '@/app/(landing)/components/product-demo/components/composer-loop/demo-composer'
+
+describe('DemoComposer', () => {
+  it('rests on the initial placeholder with the product toolbar', () => {
+    const html = renderToStaticMarkup(<DemoComposer prompt='' isSending={false} isInitialView />)
+
+    expect(html).toContain('Ask Sim to')
+    for (const action of COMPOSER_ACTIONS) {
+      expect(html).toContain(`data-action="${action}"`)
+    }
+    expect(html).toContain('bg-[#808080]')
+  })
+
+  it('shows the typed prompt and arms the send disc', () => {
+    const html = renderToStaticMarkup(
+      <DemoComposer prompt='Turn my launch notes' isSending={false} isInitialView />
+    )
+
+    expect(html).toContain('Turn my launch notes')
+    expect(html).toContain('bg-[#383838]')
+    expect(html).not.toContain('fill-white')
+  })
+
+  it('switches to the conversation placeholder and the stop square while sending', () => {
+    const html = renderToStaticMarkup(<DemoComposer prompt='' isSending isInitialView={false} />)
+
+    expect(html).toContain('Send message to Sim')
+    expect(html).toContain('fill-white')
+  })
+
+  it('separates the placeholder and the typed prompt by token', () => {
+    const resting = renderToStaticMarkup(<DemoComposer prompt='' isSending={false} isInitialView />)
+    const typed = renderToStaticMarkup(
+      <DemoComposer prompt='Enrich every new lead' isSending={false} isInitialView />
+    )
+
+    expect(resting).toContain('text-[var(--text-muted)]')
+    expect(typed).toContain('text-[var(--text-primary)]')
+    expect(typed).not.toContain('text-[var(--text-muted)]')
+  })
+
+  it('keeps every control out of the tab order', () => {
+    const html = renderToStaticMarkup(<DemoComposer prompt='' isSending={false} isInitialView />)
+
+    expect(html).not.toContain('<button')
+    expect(html).not.toContain('tabindex')
+  })
+})
diff --git a/apps/sim/app/(landing)/components/product-demo/components/composer-loop/demo-composer.tsx b/apps/sim/app/(landing)/components/product-demo/components/composer-loop/demo-composer.tsx
new file mode 100644
index 00000000000..1e0268b843b
--- /dev/null
+++ b/apps/sim/app/(landing)/components/product-demo/components/composer-loop/demo-composer.tsx
@@ -0,0 +1,120 @@
+'use client'
+
+import { ArrowUp, cn, Tooltip } from '@sim/emcn'
+import { Mic, Paperclip, Plus, Slash } from '@sim/emcn/icons'
+
+/** Icon controls, in the product's order, each labelled as the product labels it. */
+export const COMPOSER_ACTIONS = ['Add resources', 'Attach file', 'Skills'] as const
+
+export type DemoComposerAction = (typeof COMPOSER_ACTIONS)[number]
+
+const ACTION_ICONS = {
+  'Add resources': Plus,
+  'Attach file': Paperclip,
+  Skills: Slash,
+} as const satisfies Record<DemoComposerAction, typeof Plus>
+
+/**
+ * The product's resting placeholder - the first phrase its animated placeholder
+ * types (`useAnimatedPlaceholder`); the first message swaps it for the
+ * conversation one.
+ */
+const INITIAL_PLACEHOLDER = 'Ask Sim to respond to my emails...'
+const CONVERSATION_PLACEHOLDER = 'Send message to Sim'
+
+interface DemoComposerProps {
+  /** The prompt as typed so far; empty rests on the placeholder. */
+  prompt: string
+  /** Swaps the send disc for the stop square while Sim works. */
+  isSending: boolean
+  /** Resting placeholder before the first message; the conversation one after. */
+  isInitialView: boolean
+}
+
+/**
+ * The Mothership composer's chrome, drawn for the landing: the product
+ * `UserInput`'s white 16px-radius field with its hairline and resting shadow,
+ * its prompt line (the real editor's box and tokens - typed text in
+ * `--text-primary`, the placeholder in `--text-muted`), and its icon rail -
+ * add / attach / skills on the left, the mic and the send disc that becomes a
+ * stop square on the right.
+ *
+ * Presentational only, so the marketing page never loads the real composer's
+ * data graph. Nothing here is focusable: every control is a `span`, and the
+ * product's own {@link Tooltip} is projected onto it, so the icons name
+ * themselves on hover exactly as they do in the app without putting five inert
+ * buttons in the page's tab order. Callers own `aria-hidden`.
+ */
+export function DemoComposer({ prompt, isSending, isInitialView }: DemoComposerProps) {
+  const written = prompt.length > 0
+  const armed = isSending || written
+
+  return (
+    <div
+      className={cn(
+        'relative w-full rounded-2xl border border-[var(--border)] bg-[var(--white)] px-2.5 py-2 dark:bg-[var(--surface-4)]',
+        isInitialView && 'shadow-xs'
+      )}
+    >
+      <p className='m-0 min-h-[24px] whitespace-pre-wrap break-words px-1 py-1 font-body text-[15px] leading-[24px] tracking-[-0.015em] [overflow-wrap:anywhere]'>
+        {written ? (
+          <span className='text-[var(--text-primary)]'>{prompt}</span>
+        ) : (
+          <span className='text-[var(--text-muted)]'>
+            {isInitialView ? INITIAL_PLACEHOLDER : CONVERSATION_PLACEHOLDER}
+          </span>
+        )}
+      </p>
+
+      <div className='flex items-center justify-between'>
+        <div className='flex items-center gap-1'>
+          {COMPOSER_ACTIONS.map((action) => {
+            const Icon = ACTION_ICONS[action]
+            return (
+              <Tooltip.Root key={action}>
+                <Tooltip.Trigger asChild>
+                  <span
+                    data-action={action}
+                    className='flex size-[28px] items-center justify-center rounded-full'
+                  >
+                    <Icon className='size-[16px] text-[var(--text-icon)]' />
+                  </span>
+                </Tooltip.Trigger>
+                <Tooltip.Content side='top'>{action}</Tooltip.Content>
+              </Tooltip.Root>
+            )
+          })}
+        </div>
+        <div className='flex items-center gap-1.5'>
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <span className='flex size-[28px] items-center justify-center rounded-full'>
+                <Mic className='size-[16px] text-[var(--text-icon)]' />
+              </span>
+            </Tooltip.Trigger>
+            <Tooltip.Content side='top'>Voice input</Tooltip.Content>
+          </Tooltip.Root>
+          <span
+            data-send
+            className={cn(
+              'flex size-[28px] items-center justify-center rounded-full transition-colors duration-150',
+              armed ? 'bg-[#383838] dark:bg-[#E0E0E0]' : 'bg-[#808080] dark:bg-[#808080]'
+            )}
+          >
+            {isSending ? (
+              <svg
+                viewBox='0 0 24 24'
+                className='block size-[14px] fill-white dark:fill-black'
+                aria-hidden='true'
+              >
+                <rect x='4' y='4' width='16' height='16' rx='3' ry='3' />
+              </svg>
+            ) : (
+              <ArrowUp className='block size-[16px] text-white dark:text-black' />
+            )}
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/product-demo/components/composer-loop/demo-workflow-data.test.ts b/apps/sim/app/(landing)/components/product-demo/components/composer-loop/demo-workflow-data.test.ts
new file mode 100644
index 00000000000..079ef53505a
--- /dev/null
+++ b/apps/sim/app/(landing)/components/product-demo/components/composer-loop/demo-workflow-data.test.ts
@@ -0,0 +1,51 @@
+/**
+ * @vitest-environment node
+ */
+import { describe, expect, it } from 'vitest'
+import {
+  DEMO_BLOCKS,
+  DEMO_CANVAS,
+  DEMO_EDGES,
+} from '@/app/(landing)/components/product-demo/components/composer-loop/demo-workflow-data'
+
+describe('demo workflow data', () => {
+  const ids = new Set(DEMO_BLOCKS.map((block) => block.id))
+
+  it('wires every edge between known blocks, escalation branch first out of the condition', () => {
+    for (const [source, target] of DEMO_EDGES) {
+      expect(ids.has(source)).toBe(true)
+      expect(ids.has(target)).toBe(true)
+    }
+    const conditionTargets = DEMO_EDGES.filter(([source]) => source === 'severity').map(
+      ([, target]) => target
+    )
+    expect(conditionTargets).toEqual(['page', 'draft'])
+  })
+
+  it('opens with the Start block, then a trigger, and ends on terminals', () => {
+    expect(DEMO_BLOCKS[0].id).toBe('start')
+    expect(DEMO_BLOCKS[0].isTrigger).toBe(true)
+    expect(DEMO_BLOCKS[1].isTrigger).toBe(true)
+    for (const id of ['log', 'alert']) {
+      expect(DEMO_BLOCKS.find((block) => block.id === id)?.isTerminal).toBe(true)
+    }
+  })
+
+  it('never stacks two cards on top of each other', () => {
+    for (const a of DEMO_BLOCKS) {
+      for (const b of DEMO_BLOCKS) {
+        if (a === b || a.x !== b.x) continue
+        expect(Math.abs(a.y - b.y)).toBeGreaterThanOrEqual(150)
+      }
+    }
+  })
+
+  it('keeps every card inside the design canvas', () => {
+    for (const block of DEMO_BLOCKS) {
+      expect(block.x).toBeGreaterThanOrEqual(0)
+      expect(block.x + 250).toBeLessThanOrEqual(DEMO_CANVAS.width)
+      expect(block.y).toBeGreaterThanOrEqual(0)
+      expect(block.y).toBeLessThan(DEMO_CANVAS.height)
+    }
+  })
+})
diff --git a/apps/sim/app/(landing)/components/product-demo/components/composer-loop/demo-workflow-data.ts b/apps/sim/app/(landing)/components/product-demo/components/composer-loop/demo-workflow-data.ts
new file mode 100644
index 00000000000..9feed6b82e3
--- /dev/null
+++ b/apps/sim/app/(landing)/components/product-demo/components/composer-loop/demo-workflow-data.ts
@@ -0,0 +1,275 @@
+import { Table as TableIcon } from '@sim/emcn/icons'
+import {
+  AgentIcon,
+  ConditionalIcon,
+  HumanInTheLoopIcon,
+  JiraIcon,
+  PackageSearchIcon,
+  PagerDutyIcon,
+  SlackIcon,
+  StartIcon,
+  ZendeskIcon,
+} from '@/components/icons'
+import type { BlockDef } from '@/app/(landing)/components/hero/components/hero-visual/workflow-data'
+
+/** Column pitch: production's 250px card plus a 100px run of edge. */
+const COLUMN = 350
+const col = (index: number) => 40 + index * COLUMN
+/** Row pitch: room for the tallest card plus a clear gap. */
+const ROW = 200
+const row = (index: number) => index * ROW
+
+/**
+ * The workflow Sim builds from the composer prompt - "Triage new Zendesk
+ * tickets: pull the runbook, classify severity, page on-call for P1s, and
+ * draft replies for approval" - in build order, which is also the order the
+ * selection walk visits the cards. The Start block every new workflow opens
+ * with leads the list and is on the canvas before Sim builds anything; it and
+ * a Zendesk ticket trigger both feed the first step, so the workflow runs by
+ * hand from Start and in production on each new ticket. A Knowledge search
+ * pulls the matching runbook, an agent classifies severity,
+ * and a condition splits the ticket: P1s page on-call in PagerDuty, open a Jira
+ * incident, and alert the incident channel in Slack; everything else gets a
+ * drafted reply that a human approves before it posts back to Zendesk and the
+ * outcome lands in a Tables audit log. Production block types, tags, colours,
+ * and card sentences throughout, laid out left to right on production's
+ * left-input / right-output topology, and staggered on a five-row grid so the
+ * graph reads as a laid-out canvas rather than a strip: the ticket trigger
+ * sits above Start, the escalation lane climbs away from the condition, and
+ * the standard lane steps down from it. The Start card carries no sentence,
+ * as in production: its header already says what it is.
+ */
+export const DEMO_BLOCKS: BlockDef[] = [
+  {
+    id: 'start',
+    name: 'Start',
+    type: 'start_trigger',
+    icon: StartIcon,
+    bgColor: '#34B5FF',
+    isTrigger: true,
+    rows: [],
+    x: col(0),
+    /* Header-only, so it is short: this puts its handle level with the first step's. */
+    y: row(2) + 44,
+  },
+  {
+    id: 'ticket',
+    name: 'New Zendesk ticket',
+    type: 'zendesk',
+    typeLabel: 'Zendesk',
+    isIntegration: true,
+    icon: ZendeskIcon,
+    bgColor: '#03363D',
+    isTrigger: true,
+    sentence: {
+      segments: ['Run on', { subBlockId: 'selectedTriggerId', noun: 'an event' }],
+      values: { selectedTriggerId: 'Ticket Created' },
+    },
+    rows: [],
+    x: col(0),
+    y: row(1),
+  },
+  {
+    id: 'runbook',
+    name: 'Find the runbook',
+    type: 'knowledge',
+    typeLabel: 'Knowledge',
+    icon: PackageSearchIcon,
+    bgColor: '#00B0B0',
+    sentence: {
+      segments: [
+        'Search',
+        { subBlockId: 'knowledgeBaseId', noun: 'a knowledge base' },
+        'for',
+        { subBlockId: 'query', noun: 'a query' },
+      ],
+      values: { knowledgeBaseId: 'Support runbooks', query: 'ticket summary' },
+    },
+    rows: [],
+    x: col(1),
+    y: row(2),
+  },
+  {
+    id: 'classify',
+    name: 'Classify severity',
+    type: 'agent',
+    typeLabel: 'Agent',
+    icon: AgentIcon,
+    bgColor: 'var(--text-primary)',
+    sentence: {
+      segments: ['Prompt', { subBlockId: 'model', noun: 'a model' }],
+      values: { model: 'claude-sonnet-5' },
+    },
+    rows: [],
+    x: col(2),
+    y: row(2),
+  },
+  {
+    id: 'severity',
+    name: 'P1 incident?',
+    type: 'condition',
+    typeLabel: 'Condition',
+    icon: ConditionalIcon,
+    bgColor: '#FF752F',
+    rows: [
+      { title: 'If', value: 'P1 severity' },
+      { title: 'Else', value: 'everything else' },
+    ],
+    x: col(3),
+    y: row(2),
+  },
+  {
+    id: 'draft',
+    name: 'Draft the reply',
+    type: 'agent',
+    typeLabel: 'Agent',
+    icon: AgentIcon,
+    bgColor: 'var(--text-primary)',
+    sentence: {
+      segments: ['Prompt', { subBlockId: 'model', noun: 'a model' }],
+      values: { model: 'claude-sonnet-5' },
+    },
+    rows: [],
+    x: col(4),
+    y: row(3),
+  },
+  {
+    id: 'approve',
+    name: 'Approve the reply',
+    type: 'human_in_the_loop',
+    typeLabel: 'Human',
+    icon: HumanInTheLoopIcon,
+    bgColor: '#10B981',
+    sentence: {
+      segments: ['Pause execution until a human responds'],
+      values: {},
+    },
+    rows: [],
+    x: col(5),
+    y: row(4),
+  },
+  {
+    id: 'reply',
+    name: 'Reply in Zendesk',
+    type: 'zendesk',
+    typeLabel: 'Zendesk',
+    isIntegration: true,
+    icon: ZendeskIcon,
+    bgColor: '#03363D',
+    sentence: {
+      segments: [
+        'Update ticket',
+        { subBlockId: 'ticketId', noun: 'a ticket' },
+        ', setting status to',
+        { subBlockId: 'status', noun: 'a status' },
+      ],
+      values: { ticketId: 'the new ticket', status: 'pending' },
+    },
+    rows: [],
+    x: col(6),
+    y: row(4),
+  },
+  {
+    id: 'log',
+    name: 'Log the outcome',
+    type: 'table',
+    typeLabel: 'Table',
+    icon: TableIcon,
+    bgColor: '#10B981',
+    isTerminal: true,
+    sentence: {
+      segments: ['Insert a row into', { subBlockId: 'tableId', noun: 'a table' }],
+      values: { tableId: 'Ticket triage' },
+    },
+    rows: [],
+    x: col(7),
+    y: row(4),
+  },
+  {
+    id: 'page',
+    name: 'Page on-call',
+    type: 'pagerduty',
+    typeLabel: 'PagerDuty',
+    isIntegration: true,
+    icon: PagerDutyIcon,
+    bgColor: '#06AC38',
+    sentence: {
+      segments: [
+        'Open incident',
+        { subBlockId: 'title', noun: 'a title' },
+        'on service',
+        { subBlockId: 'createServiceId', noun: 'a service' },
+      ],
+      values: { title: 'P1 ticket', createServiceId: 'Customer Support' },
+    },
+    rows: [],
+    x: col(4),
+    y: row(1),
+  },
+  {
+    id: 'incident',
+    name: 'Open the incident',
+    type: 'jira',
+    typeLabel: 'Jira',
+    isIntegration: true,
+    icon: JiraIcon,
+    bgColor: '#FFFFFF',
+    tileBorder: true,
+    sentence: {
+      segments: [
+        'Create',
+        { subBlockId: 'issueType', noun: 'an issue type' },
+        'in',
+        { subBlockId: 'projectId', noun: 'a project' },
+      ],
+      values: { issueType: 'Incident', projectId: 'OPS' },
+    },
+    rows: [],
+    x: col(5),
+    y: row(0),
+  },
+  {
+    id: 'alert',
+    name: 'Alert #incidents',
+    type: 'slack',
+    typeLabel: 'Slack',
+    isIntegration: true,
+    icon: SlackIcon,
+    bgColor: '#611F69',
+    isTerminal: true,
+    sentence: {
+      segments: [
+        'Post',
+        { subBlockId: 'message', noun: 'a message' },
+        'to',
+        { subBlockId: 'channel', noun: 'a channel' },
+      ],
+      values: { message: 'incident summary', channel: '#incidents' },
+    },
+    rows: [],
+    x: col(6),
+    y: row(0),
+  },
+]
+
+/**
+ * Source → target pairs. The first edge out of the condition is its `If`
+ * branch (the P1 escalation) and the second its `Else` (the standard path),
+ * which is how the stage assigns branch handles.
+ */
+export const DEMO_EDGES: ReadonlyArray<readonly [string, string]> = [
+  ['start', 'runbook'],
+  ['ticket', 'runbook'],
+  ['runbook', 'classify'],
+  ['classify', 'severity'],
+  ['severity', 'page'],
+  ['severity', 'draft'],
+  ['draft', 'approve'],
+  ['approve', 'reply'],
+  ['reply', 'log'],
+  ['page', 'incident'],
+  ['incident', 'alert'],
+]
+
+/** Design-space box the stage geometry was laid out in. */
+export const DEMO_CANVAS = { width: col(7) + 250 + 40, height: row(4) + 140 + 40 } as const
diff --git a/apps/sim/app/(landing)/components/product-demo/components/composer-loop/index.ts b/apps/sim/app/(landing)/components/product-demo/components/composer-loop/index.ts
new file mode 100644
index 00000000000..110c71ebd3b
--- /dev/null
+++ b/apps/sim/app/(landing)/components/product-demo/components/composer-loop/index.ts
@@ -0,0 +1 @@
+export { ComposerLoop } from './composer-loop'
diff --git a/apps/sim/app/(landing)/components/product-demo/components/loader-marks/index.ts b/apps/sim/app/(landing)/components/product-demo/components/loader-marks/index.ts
deleted file mode 100644
index 94349fc7346..00000000000
--- a/apps/sim/app/(landing)/components/product-demo/components/loader-marks/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { LoaderMarks } from './loader-marks'
diff --git a/apps/sim/app/(landing)/components/product-demo/components/loader-marks/loader-marks.module.css b/apps/sim/app/(landing)/components/product-demo/components/loader-marks/loader-marks.module.css
deleted file mode 100644
index 2c47be74489..00000000000
--- a/apps/sim/app/(landing)/components/product-demo/components/loader-marks/loader-marks.module.css
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * Line-draw reveal for the loader marks: each path is dash-normalized to its
- * full length (pathLength=1 on the path + dasharray 1), hidden by a full
- * dashoffset, then drawn to 0 when the row scrolls into view (.drawn),
- * staggered left to right. Reduced-motion renders every mark fully drawn.
- */
-.row path {
-  stroke-dasharray: 1;
-  stroke-dashoffset: 1;
-}
-
-.drawn svg:nth-child(1) path {
-  animation: draw 1600ms cubic-bezier(0.33, 1, 0.68, 1) 0ms forwards;
-}
-
-.drawn svg:nth-child(2) path {
-  animation: draw 1600ms cubic-bezier(0.33, 1, 0.68, 1) 450ms forwards;
-}
-
-.drawn svg:nth-child(3) path {
-  animation: draw 1600ms cubic-bezier(0.33, 1, 0.68, 1) 900ms forwards;
-}
-
-.drawn svg:nth-child(4) path {
-  animation: draw 1600ms cubic-bezier(0.33, 1, 0.68, 1) 1350ms forwards;
-}
-
-@keyframes draw {
-  to {
-    stroke-dashoffset: 0;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .row path {
-    stroke-dasharray: none;
-    stroke-dashoffset: 0;
-    animation: none !important;
-  }
-}
diff --git a/apps/sim/app/(landing)/components/product-demo/components/loader-marks/loader-marks.tsx b/apps/sim/app/(landing)/components/product-demo/components/loader-marks/loader-marks.tsx
deleted file mode 100644
index 78ed29bd6c5..00000000000
--- a/apps/sim/app/(landing)/components/product-demo/components/loader-marks/loader-marks.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-'use client'
-
-import { useEffect, useRef, useState } from 'react'
-import { cn } from '@sim/emcn'
-import styles from '@/app/(landing)/components/product-demo/components/loader-marks/loader-marks.module.css'
-import { LOADER_MARK_PATHS } from './paths'
-
-/**
- * A quiet horizontal row of four of the ThinkingLoader's cycle shapes as
- * STATIC outline drawings - `fill='none'`, grey `--text-muted` stroke -
- * left-aligned on an even gap. Each mark carries its own hand-tuned display
- * size (see paths.ts) so the collection reads as one optical weight, and the
- * stroke uses `non-scaling-stroke` so every line renders at the same 1.2px
- * regardless of each mark's scale.
- *
- * On first scroll into view the marks DRAW themselves in, staggered left to
- * right (dash-normalized line drawing, see loader-marks.module.css); under
- * `prefers-reduced-motion` they render fully drawn immediately. Decorative.
- */
-export function LoaderMarks() {
-  const containerRef = useRef<HTMLDivElement>(null)
-  const [drawn, setDrawn] = useState(false)
-
-  useEffect(() => {
-    const el = containerRef.current
-    if (!el) return
-    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
-      setDrawn(true)
-      return
-    }
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (entries.some((entry) => entry.isIntersecting)) {
-          setDrawn(true)
-          observer.disconnect()
-        }
-      },
-      { threshold: 0.5 }
-    )
-    observer.observe(el)
-    return () => observer.disconnect()
-  }, [])
-
-  return (
-    <div
-      ref={containerRef}
-      aria-hidden='true'
-      className={cn(
-        'flex items-center gap-6 text-[var(--text-muted)]',
-        styles.row,
-        drawn && styles.drawn
-      )}
-    >
-      {LOADER_MARK_PATHS.map(({ name, d, sizeClassName }) => (
-        <svg
-          key={name}
-          viewBox='0 0 100 100'
-          fill='none'
-          stroke='currentColor'
-          strokeWidth={1.2}
-          strokeLinecap='round'
-          strokeLinejoin='round'
-          className={sizeClassName}
-        >
-          <path d={d} pathLength={1} vectorEffect='non-scaling-stroke' />
-        </svg>
-      ))}
-    </div>
-  )
-}
diff --git a/apps/sim/app/(landing)/components/product-demo/components/loader-marks/paths.ts b/apps/sim/app/(landing)/components/product-demo/components/loader-marks/paths.ts
deleted file mode 100644
index 76b1ce19d98..00000000000
--- a/apps/sim/app/(landing)/components/product-demo/components/loader-marks/paths.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * A curated four of the ThinkingLoader's cycle shapes as static outline
- * paths, traced from the real loader by exports/loader-sprites/render.mjs
- * (each variant's -main pose, 100x100 viewBox), in the loader's cycle order:
- * corners, burst, compass, thinking. The rest of the cycle (metaballs, relay,
- * squeeze, orb) is omitted - those read as pills and rings at this size.
- * Regenerate the sprites and re-extract if the loader's shapes change.
- *
- * `sizeClassName` is a hand-tuned per-mark display size: the glyphs occupy
- * different footprints inside the shared viewBox (thinking spans 51x46 units,
- * compass 80x80), so a uniform display size makes some read tiny; these
- * equalize the marks' optical weight (geometric-mean footprint ~22px). The
- * literal class strings live here so Tailwind's content scan picks them up.
- */
-export interface LoaderMarkPath {
-  name: string
-  /** Static Tailwind size class (see above - optical-weight equalization). */
-  sizeClassName: string
-  d: string
-}
-
-export const LOADER_MARK_PATHS: LoaderMarkPath[] = [
-  {
-    name: 'corners',
-    sizeClassName: 'size-[38px]',
-    d: 'M 23.92 14.06 C 25.29 13.79 27.03 13.66 28.52 13.85 C 30 14.04 31.54 14.58 32.81 15.2 C 34.09 15.82 34.53 16.05 36.16 17.58 C 37.78 19.11 40.53 22.89 42.58 24.36 C 44.63 25.84 46.74 26.11 48.44 26.41 C 50.13 26.72 51.43 26.45 52.73 26.2 C 54.04 25.94 54.3 26.46 56.25 24.88 C 58.2 23.3 62.17 18.52 64.45 16.71 C 66.73 14.91 67.84 14.44 69.92 14.06 C 72.01 13.68 74.8 13.69 76.95 14.42 C 79.1 15.14 81.37 16.78 82.81 18.41 C 84.26 20.05 85.21 22.14 85.61 24.22 C 86.01 26.29 85.73 28.97 85.23 30.86 C 84.72 32.75 84.28 33.53 82.57 35.55 C 80.87 37.57 76.55 40.69 74.98 42.97 C 73.41 45.25 73.39 47.53 73.15 49.22 C 72.9 50.91 73.23 51.95 73.5 53.13 C 73.76 54.3 73.17 54.36 74.73 56.25 C 76.3 58.14 81.09 62.17 82.89 64.45 C 84.7 66.73 85.17 67.84 85.55 69.92 C 85.93 72.01 85.92 74.8 85.19 76.95 C 84.47 79.1 82.83 81.37 81.2 82.81 C 79.56 84.26 77.47 85.21 75.39 85.61 C 73.32 86.01 70.64 85.73 68.75 85.23 C 66.86 84.72 66.08 84.28 64.06 82.57 C 62.04 80.87 58.92 76.55 56.64 74.98 C 54.36 73.41 52.08 73.39 50.39 73.15 C 48.7 72.9 47.66 73.23 46.48 73.5 C 45.31 73.76 45.25 73.17 43.36 74.73 C 41.47 76.3 37.43 81.09 35.16 82.89 C 32.88 84.7 31.77 85.17 29.69 85.55 C 27.6 85.93 24.8 85.92 22.66 85.19 C 20.51 84.47 18.24 82.83 16.8 81.2 C 15.35 79.56 14.42 77.4 14 75.39 C 13.57 73.38 13.8 70.98 14.26 69.14 C 14.73 67.3 15.03 66.5 16.8 64.35 C 18.57 62.2 23.31 58.19 24.88 56.25 C 26.44 54.31 25.93 53.97 26.2 52.73 C 26.46 51.5 26.75 50.52 26.44 48.83 C 26.14 47.14 26.2 45.18 24.36 42.58 C 22.52 39.97 17.14 35.42 15.41 33.2 C 13.68 30.99 14.24 30.6 13.98 29.3 C 13.71 27.99 13.67 26.69 13.82 25.39 C 13.96 24.09 14.31 22.72 14.87 21.48 C 15.44 20.25 16.28 18.97 17.19 17.97 C 18.09 16.97 19.19 16.12 20.31 15.47 C 21.43 14.82 22.55 14.33 23.92 14.06 Z',
-  },
-  {
-    name: 'burst',
-    sizeClassName: 'size-[42px]',
-    d: 'M 48.26 14.06 C 49.3 13.86 50.81 13.8 51.95 14.26 C 53.1 14.72 53.05 13.29 55.13 16.8 C 57.21 20.3 59.92 30.73 64.45 35.28 C 68.99 39.84 78.96 42.27 82.35 44.14 C 85.73 46.01 84.2 45.61 84.77 46.52 C 85.33 47.43 85.72 48.57 85.75 49.61 C 85.79 50.64 85.55 51.76 84.98 52.73 C 84.41 53.71 85.79 53.52 82.35 55.47 C 78.9 57.42 68.81 59.97 64.33 64.45 C 59.85 68.93 57.34 78.96 55.47 82.35 C 53.6 85.73 54 84.2 53.09 84.77 C 52.18 85.33 51.04 85.72 50 85.75 C 48.96 85.79 47.85 85.55 46.88 84.98 C 45.9 84.41 46.09 85.79 44.14 82.35 C 42.19 78.9 39.64 68.81 35.16 64.33 C 30.68 59.85 20.65 57.34 17.26 55.47 C 13.88 53.6 15.41 54 14.84 53.09 C 14.28 52.18 13.89 51.04 13.86 50 C 13.82 48.96 14.06 47.85 14.63 46.88 C 15.2 45.9 13.82 46.09 17.26 44.14 C 20.7 42.19 30.88 39.52 35.28 35.16 C 39.69 30.79 41.94 21.25 43.68 17.97 C 45.42 14.69 44.94 16.12 45.7 15.47 C 46.47 14.82 47.22 14.26 48.26 14.06 Z',
-  },
-  {
-    name: 'compass',
-    sizeClassName: 'size-[37px]',
-    d: 'M 48.98 9.77 C 50.61 9.66 52.35 9.88 53.91 10.4 C 55.46 10.92 57.06 11.82 58.31 12.89 C 59.56 13.96 60.65 15.3 61.4 16.8 C 62.16 18.29 62.7 20.18 62.84 21.88 C 62.98 23.57 62.74 25.36 62.23 26.95 C 61.72 28.55 60.83 30.19 59.77 31.44 C 58.7 32.69 57.36 33.73 55.86 34.46 C 54.36 35.19 52.47 35.71 50.78 35.84 C 49.09 35.97 47.3 35.75 45.7 35.24 C 44.11 34.74 42.48 33.87 41.23 32.81 C 39.97 31.76 38.92 30.4 38.17 28.91 C 37.43 27.41 36.9 25.52 36.77 23.83 C 36.64 22.14 36.87 20.33 37.38 18.75 C 37.9 17.17 38.72 15.64 39.84 14.36 C 40.97 13.07 42.62 11.8 44.14 11.03 C 45.66 10.27 47.35 9.87 48.98 9.77 Z M 19.72 37.11 C 21.35 36.73 23.34 36.66 25 36.91 C 26.66 37.16 28.31 37.78 29.69 38.6 C 31.06 39.41 32.3 40.48 33.26 41.8 C 34.23 43.11 35.05 44.86 35.47 46.48 C 35.88 48.11 36 49.87 35.76 51.56 C 35.52 53.26 34.86 55.2 34.04 56.64 C 33.22 58.09 32.17 59.26 30.86 60.23 C 29.55 61.2 27.8 62.03 26.17 62.45 C 24.54 62.88 22.72 62.97 21.09 62.76 C 19.47 62.55 17.84 62.02 16.41 61.19 C 14.97 60.37 13.53 59.16 12.49 57.81 C 11.45 56.47 10.61 54.75 10.17 53.13 C 9.73 51.5 9.61 49.74 9.86 48.05 C 10.11 46.35 10.78 44.45 11.67 42.97 C 12.57 41.49 13.89 40.14 15.23 39.16 C 16.58 38.18 18.09 37.48 19.72 37.11 Z M 73.63 37.11 C 75.32 36.7 77.25 36.65 78.91 36.91 C 80.57 37.16 82.18 37.77 83.59 38.64 C 85.01 39.52 86.44 40.88 87.42 42.19 C 88.39 43.49 89.05 44.92 89.44 46.48 C 89.83 48.05 89.96 49.93 89.75 51.56 C 89.54 53.19 89 54.82 88.17 56.25 C 87.34 57.68 86.11 59.13 84.77 60.16 C 83.42 61.19 81.71 62.02 80.08 62.45 C 78.45 62.89 76.69 63 75 62.76 C 73.31 62.51 71.36 61.84 69.92 61.01 C 68.48 60.19 67.31 59.13 66.35 57.81 C 65.38 56.5 64.56 54.75 64.14 53.13 C 63.73 51.5 63.61 49.74 63.85 48.05 C 64.09 46.35 64.75 44.41 65.57 42.97 C 66.39 41.52 67.41 40.36 68.75 39.38 C 70.09 38.4 71.94 37.52 73.63 37.11 Z M 46.83 64.06 C 48.46 63.7 50.25 63.61 51.95 63.9 C 53.65 64.2 55.6 64.94 57.03 65.81 C 58.46 66.68 59.59 67.8 60.51 69.14 C 61.43 70.48 62.18 72.2 62.55 73.83 C 62.91 75.46 62.97 77.27 62.7 78.91 C 62.43 80.54 61.82 82.22 60.94 83.64 C 60.06 85.06 58.79 86.43 57.42 87.42 C 56.05 88.4 54.36 89.16 52.73 89.54 C 51.11 89.92 49.3 89.97 47.66 89.69 C 46.02 89.42 44.31 88.78 42.9 87.89 C 41.48 87 40.13 85.74 39.16 84.38 C 38.19 83.01 37.44 81.32 37.06 79.69 C 36.69 78.06 36.62 76.3 36.91 74.61 C 37.21 72.92 37.96 70.96 38.84 69.53 C 39.72 68.11 40.86 66.98 42.19 66.07 C 43.52 65.15 45.2 64.42 46.83 64.06 Z',
-  },
-  {
-    name: 'thinking',
-    sizeClassName: 'size-[56px]',
-    d: 'M 33.85 29.3 C 35.55 29.02 36.57 28.83 39.45 29.64 C 42.34 30.45 48.57 33.45 51.17 34.18 C 53.78 34.9 53.06 34.34 55.08 33.98 C 57.1 33.61 61.2 32.27 63.28 31.97 C 65.36 31.67 66.15 31.8 67.58 32.17 C 69.01 32.55 70.64 33.23 71.88 34.21 C 73.11 35.19 74.3 36.61 75 38.07 C 75.7 39.53 76.13 41.31 76.08 42.97 C 76.04 44.63 75.39 46.67 74.75 48.05 C 74.12 49.42 74.02 49.6 72.27 51.23 C 70.52 52.86 66.29 54.76 64.25 57.81 C 62.21 60.86 61.08 67.12 60.03 69.53 C 58.98 71.94 58.71 71.52 57.95 72.27 C 57.19 73.01 56.86 73.55 55.47 73.98 C 54.08 74.41 51.5 75.16 49.61 74.83 C 47.72 74.5 45.44 73 44.14 71.99 C 42.85 70.97 43.13 71.31 41.84 68.75 C 40.54 66.19 39.01 60.61 36.38 56.64 C 33.75 52.67 27.97 47.72 26.06 44.92 C 24.15 42.12 24.92 41.47 24.92 39.84 C 24.92 38.22 25.34 36.58 26.06 35.16 C 26.79 33.73 28 32.26 29.3 31.29 C 30.6 30.31 32.16 29.57 33.85 29.3 Z',
-  },
-]
diff --git a/apps/sim/app/(landing)/components/product-demo/components/product-demo-caption/beats.ts b/apps/sim/app/(landing)/components/product-demo/components/product-demo-caption/beats.ts
new file mode 100644
index 00000000000..9fc405761b1
--- /dev/null
+++ b/apps/sim/app/(landing)/components/product-demo/components/product-demo-caption/beats.ts
@@ -0,0 +1,13 @@
+export type DemoBeatId = 'describe' | 'plan' | 'build'
+
+/**
+ * The section's title, one per act of the scene: the agent being described,
+ * Sim planning the work, then the workflow being built and governed.
+ * `describe` is the server-rendered heading, so the section reads before the
+ * loop mounts.
+ */
+export const DEMO_BEATS: Readonly<Record<DemoBeatId, string>> = {
+  describe: 'Describe the agent.',
+  plan: 'Sim plans the work.',
+  build: 'Watch the workflow build.',
+}
diff --git a/apps/sim/app/(landing)/components/product-demo/components/product-demo-caption/context.tsx b/apps/sim/app/(landing)/components/product-demo/components/product-demo-caption/context.tsx
new file mode 100644
index 00000000000..07187f876c3
--- /dev/null
+++ b/apps/sim/app/(landing)/components/product-demo/components/product-demo-caption/context.tsx
@@ -0,0 +1,28 @@
+'use client'
+
+import { createContext, type ReactNode, useContext, useMemo, useState } from 'react'
+import type { DemoBeatId } from '@/app/(landing)/components/product-demo/components/product-demo-caption/beats'
+
+interface ProductDemoBeatContextValue {
+  /** The act the scene is in, which the caption's copy follows. */
+  beat: DemoBeatId
+  setBeat: (beat: DemoBeatId) => void
+}
+
+const ProductDemoBeatContext = createContext<ProductDemoBeatContextValue | null>(null)
+
+/**
+ * Shares the scene's current act between the loop, which drives it, and the
+ * caption, which reads it. Starts on `describe`, the pair the server renders.
+ */
+export function ProductDemoBeatProvider({ children }: { children: ReactNode }) {
+  const [beat, setBeat] = useState<DemoBeatId>('describe')
+  const value = useMemo(() => ({ beat, setBeat }), [beat])
+  return <ProductDemoBeatContext.Provider value={value}>{children}</ProductDemoBeatContext.Provider>
+}
+
+export function useProductDemoBeat(): ProductDemoBeatContextValue {
+  const value = useContext(ProductDemoBeatContext)
+  if (!value) throw new Error('useProductDemoBeat needs a ProductDemoBeatProvider above it')
+  return value
+}
diff --git a/apps/sim/app/(landing)/components/product-demo/components/product-demo-caption/index.ts b/apps/sim/app/(landing)/components/product-demo/components/product-demo-caption/index.ts
new file mode 100644
index 00000000000..b8acdb8f302
--- /dev/null
+++ b/apps/sim/app/(landing)/components/product-demo/components/product-demo-caption/index.ts
@@ -0,0 +1,3 @@
+export { DEMO_BEATS, type DemoBeatId } from './beats'
+export { ProductDemoBeatProvider, useProductDemoBeat } from './context'
+export { ProductDemoCaption } from './product-demo-caption'
diff --git a/apps/sim/app/(landing)/components/product-demo/components/product-demo-caption/product-demo-caption.module.css b/apps/sim/app/(landing)/components/product-demo/components/product-demo-caption/product-demo-caption.module.css
new file mode 100644
index 00000000000..9c15277a599
--- /dev/null
+++ b/apps/sim/app/(landing)/components/product-demo/components/product-demo-caption/product-demo-caption.module.css
@@ -0,0 +1,16 @@
+@media (prefers-reduced-motion: no-preference) {
+  .enter {
+    animation: caption-in 600ms cubic-bezier(0.23, 1, 0.32, 1);
+  }
+}
+
+@keyframes caption-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
diff --git a/apps/sim/app/(landing)/components/product-demo/components/product-demo-caption/product-demo-caption.test.tsx b/apps/sim/app/(landing)/components/product-demo/components/product-demo-caption/product-demo-caption.test.tsx
new file mode 100644
index 00000000000..82cfdf5059a
--- /dev/null
+++ b/apps/sim/app/(landing)/components/product-demo/components/product-demo-caption/product-demo-caption.test.tsx
@@ -0,0 +1,70 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('@sim/emcn', () => ({
+  cn: (...values: Array<string | false | null | undefined>) => values.filter(Boolean).join(' '),
+}))
+
+import {
+  ProductDemoBeatProvider,
+  ProductDemoCaption,
+  useProductDemoBeat,
+} from '@/app/(landing)/components/product-demo/components/product-demo-caption'
+import styles from '@/app/(landing)/components/product-demo/components/product-demo-caption/product-demo-caption.module.css'
+
+function BuildButton() {
+  const { setBeat } = useProductDemoBeat()
+  return (
+    <button type='button' onClick={() => setBeat('build')}>
+      build
+    </button>
+  )
+}
+
+afterEach(() => {
+  vi.useRealTimers()
+  document.body.replaceChildren()
+})
+
+describe('ProductDemoCaption', () => {
+  it('opens still on the describe title, then crossfades to the next beat', () => {
+    vi.useFakeTimers()
+    const host = document.createElement('div')
+    document.body.append(host)
+    act(() => {
+      createRoot(host).render(
+        <ProductDemoBeatProvider>
+          <ProductDemoCaption />
+          <BuildButton />
+        </ProductDemoBeatProvider>
+      )
+    })
+
+    const heading = () => host.querySelector('h2#product-demo-heading')
+    const titles = () => host.querySelectorAll('[data-product-demo-caption] > *')
+    expect(heading()?.textContent).toBe('Describe the agent.')
+    expect(heading()?.className).not.toContain(styles.enter)
+    expect(titles()).toHaveLength(1)
+
+    act(() => {
+      host.querySelector('button')?.click()
+    })
+    expect(heading()?.textContent).toBe('Watch the workflow build.')
+    expect(heading()?.className).toContain(styles.enter)
+    const stacked = titles()
+    expect(stacked).toHaveLength(2)
+    expect(stacked[0].getAttribute('aria-hidden')).toBe('true')
+    expect(stacked[0].className).toContain('opacity-0')
+    expect(stacked[0].textContent).toBe('Describe the agent.')
+
+    act(() => {
+      vi.advanceTimersByTime(320)
+    })
+    expect(titles()).toHaveLength(1)
+    expect(heading()?.textContent).toBe('Watch the workflow build.')
+  })
+})
diff --git a/apps/sim/app/(landing)/components/product-demo/components/product-demo-caption/product-demo-caption.tsx b/apps/sim/app/(landing)/components/product-demo/components/product-demo-caption/product-demo-caption.tsx
new file mode 100644
index 00000000000..ac12a300765
--- /dev/null
+++ b/apps/sim/app/(landing)/components/product-demo/components/product-demo-caption/product-demo-caption.tsx
@@ -0,0 +1,87 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { cn } from '@sim/emcn'
+import { HOME_TYPE } from '@/app/(landing)/components/landing-layout'
+import {
+  DEMO_BEATS,
+  type DemoBeatId,
+} from '@/app/(landing)/components/product-demo/components/product-demo-caption/beats'
+import { useProductDemoBeat } from '@/app/(landing)/components/product-demo/components/product-demo-caption/context'
+import styles from '@/app/(landing)/components/product-demo/components/product-demo-caption/product-demo-caption.module.css'
+
+/** How long the outgoing title takes to dissolve under the incoming one. */
+const EXIT_MS = 320
+/**
+ * The incoming title rises in. No fill after the end, so the title's resting
+ * styles - the keyframe's end - are what the exit transition later takes over.
+ */
+const ENTER = styles.enter
+const TITLE =
+  'col-start-1 row-start-1 mx-auto max-w-[26ch] text-balance text-[#3B3B3B] dark:text-[var(--text-secondary)]'
+const EXIT = 'pointer-events-none opacity-0'
+
+interface ProductDemoCaptionProps {
+  /** Placement within the frame; the block itself is a centred title. */
+  className?: string
+}
+
+/**
+ * The section's heading, following the scene act by act. When the loop moves
+ * to the next beat the title on show dissolves in place while the next one
+ * rises in over it, so the copy never blinks out to an empty frame. The first
+ * title is server-rendered and arrives still; only changes animate. The `h2`
+ * keeps its id across titles, so the band's accessible name follows the copy.
+ * The wrapper is what the visual mount measures to keep the scene clear of
+ * the copy.
+ */
+export function ProductDemoCaption({ className }: ProductDemoCaptionProps) {
+  const { beat } = useProductDemoBeat()
+  const [shown, setShown] = useState<DemoBeatId>(beat)
+  const [leaving, setLeaving] = useState<DemoBeatId | null>(null)
+  const [changed, setChanged] = useState(false)
+
+  if (beat !== shown) {
+    setLeaving(shown)
+    setShown(beat)
+    setChanged(true)
+  }
+
+  useEffect(() => {
+    if (!leaving) return
+    const timer = setTimeout(() => setLeaving(null), EXIT_MS)
+    return () => clearTimeout(timer)
+  }, [leaving])
+
+  return (
+    <div
+      data-product-demo-caption
+      className={cn(
+        'relative z-10 mx-auto grid w-full max-w-[40rem] shrink-0 text-center',
+        className
+      )}
+    >
+      {leaving && (
+        <p
+          key={leaving}
+          aria-hidden='true'
+          className={cn(
+            TITLE,
+            HOME_TYPE.h3,
+            'transition-opacity duration-300 ease-out motion-reduce:transition-none',
+            EXIT
+          )}
+        >
+          {DEMO_BEATS[leaving]}
+        </p>
+      )}
+      <h2
+        key={shown}
+        id='product-demo-heading'
+        className={cn(TITLE, HOME_TYPE.h3, changed && ENTER)}
+      >
+        {DEMO_BEATS[shown]}
+      </h2>
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/product-demo/components/product-demo-visual-mount/product-demo-visual-mount.tsx b/apps/sim/app/(landing)/components/product-demo/components/product-demo-visual-mount/product-demo-visual-mount.tsx
index b5d3f3a4ca3..f4cca1aea23 100644
--- a/apps/sim/app/(landing)/components/product-demo/components/product-demo-visual-mount/product-demo-visual-mount.tsx
+++ b/apps/sim/app/(landing)/components/product-demo/components/product-demo-visual-mount/product-demo-visual-mount.tsx
@@ -1,38 +1,72 @@
 'use client'
 
+import { useEffect, useState } from 'react'
 import dynamic from 'next/dynamic'
+import { useProductDemoBeat } from '@/app/(landing)/components/product-demo/components/product-demo-caption'
 import { useLazyMount } from '@/app/(landing)/hooks/use-lazy-mount'
 
 /**
- * `ssr: false` so the animation's client bundle never ships in the
- * server-rendered HTML for a section that starts below the fold.
+ * Air kept between the overlaid caption's last line and the scene: with the
+ * title 37px tall this puts the scene 81px under the copy's inset, one pixel
+ * past the frame's top copy band (`CopyBands`), so the scene never sits in
+ * the blur's taper.
  */
-const HeroVisual = dynamic(
+const CAPTION_CLEARANCE_GAP = 44
+
+/**
+ * `ssr: false` so the loop's client bundle (framer-motion included) never
+ * ships in the server-rendered HTML for a section that starts below the fold.
+ */
+const ComposerLoop = dynamic(
   () =>
-    import('@/app/(landing)/components/hero/components/hero-visual/hero-visual').then(
-      (mod) => mod.HeroVisual
+    import('@/app/(landing)/components/product-demo/components/composer-loop').then(
+      (mod) => mod.ComposerLoop
     ),
   { ssr: false }
 )
 
 /**
- * Client mount for the {@link HeroVisual} island reused in the Product Demo
- * section. Isolated here so `ProductDemo` stays a Server Component: only this
- * leaf is `'use client'`.
+ * Client mount for the {@link ComposerLoop} island in the Product Demo
+ * section - the gooey composer loop. Isolated here so `ProductDemo` stays a
+ * Server Component: only this leaf is `'use client'`.
  *
  * Gated on viewport proximity via {@link useLazyMount} so the below-the-fold
- * section doesn't pull the animation's JS - or start its
- * `requestAnimationFrame` loop - into the initial homepage load. The parent
- * frame (`product-demo.tsx`) already reserves fixed pixel dimensions for this
- * slot, so there is no placeholder to size - an empty div holds the spot with
- * zero layout shift.
+ * section doesn't pull the loop's JS - or start its timers - into the
+ * initial homepage load. The parent frame reserves the stage's box, so an
+ * empty div holds the spot with zero layout shift.
+ *
+ * It also measures how far the section's caption reaches down into the stage
+ * (from `lg` the caption overlays the top of a stage that fills the frame;
+ * below, it sits above the stage and the clearance is zero) and passes that
+ * to the loop, so the scene stays centred in the frame and clear of the copy
+ * at every size. The loop's beats go the other way, to the caption.
  */
 export function ProductDemoVisualMount() {
   const { ref, inView } = useLazyMount('400px')
+  const { setBeat } = useProductDemoBeat()
+  const [clearance, setClearance] = useState(0)
+
+  useEffect(() => {
+    const stage = ref.current
+    const caption = stage
+      ?.closest('section')
+      ?.querySelector<HTMLElement>('[data-product-demo-caption]')
+    if (!stage || !caption) return
+    const measure = () => {
+      const reach = caption.getBoundingClientRect().bottom - stage.getBoundingClientRect().top
+      setClearance(Math.max(0, Math.round(reach) + CAPTION_CLEARANCE_GAP))
+    }
+    measure()
+    if (typeof ResizeObserver === 'undefined') return
+    const observer = new ResizeObserver(measure)
+    observer.observe(stage)
+    observer.observe(caption)
+    return () => observer.disconnect()
+  }, [ref])
 
   return (
     <div ref={ref} className='absolute inset-0'>
-      {inView && <HeroVisual />}
+      {inView && <ComposerLoop clearance={clearance} onBeat={setBeat} />}
     </div>
   )
 }
diff --git a/apps/sim/app/(landing)/components/product-demo/product-demo.tsx b/apps/sim/app/(landing)/components/product-demo/product-demo.tsx
index 30d350b806b..31d434078b4 100644
--- a/apps/sim/app/(landing)/components/product-demo/product-demo.tsx
+++ b/apps/sim/app/(landing)/components/product-demo/product-demo.tsx
@@ -1,54 +1,174 @@
-import { LoaderMarks } from '@/app/(landing)/components/product-demo/components/loader-marks'
+import { cn } from '@sim/emcn'
+import { LandingCtaLink } from '@/app/(landing)/components/landing-cta-link'
+import {
+  HOME_INSET,
+  LANDING_CONTENT_WIDTH,
+  LANDING_GUTTER,
+  LANDING_STAGE_RADIUS,
+} from '@/app/(landing)/components/landing-layout'
+import {
+  ProductDemoBeatProvider,
+  ProductDemoCaption,
+} from '@/app/(landing)/components/product-demo/components/product-demo-caption'
 import { ProductDemoVisualMount } from '@/app/(landing)/components/product-demo/components/product-demo-visual-mount'
+import { EdgeFade } from '@/app/(landing)/components/shared/edge-fade'
+import { SIGNUP_HREF } from '@/app/(landing)/constants'
 
 /**
- * Product-demo band - the looping animated platform walkthrough, promoted out of
- * the hero into its own section between the hero and the Mothership section,
- * dressed in the same card chrome as the {@link Features} cards: one large
- * OUTLINED container (`--border` hairline, 10px radius, 1rem padding) holding
- * the media stage on the left - here the animation itself fills the stage
- * (4px inner radius, solid light-grey `--surface-5` ground) instead of a
- * backdrop + floating callout - and a vertically-centered title + subtitle in the cards' 386px
- * copy column on the right. Below `lg` it stacks media-over-copy like the
- * cards do.
+ * The product demo as a player: a framed stage on the page ground, on the
+ * platform cards' inset ({@link HOME_INSET}) inside the content column so it
+ * lines up with the two cards it follows, on the `#F8F8F8` paper Andrew set
+ * for it (no greyscale token lands on it) with a hairline and the stage
+ * radius. From `lg` the frame holds a 2:1 aspect and its width is also
+ * capped by the screen's height, so the whole frame - scene and caption -
+ * fits below the sticky navbar with air above and below, and nothing inside
+ * can change its size: the scene runs like a video. Below `lg` the frame is
+ * content-sized, the stage over the caption.
  *
- * The visual is the same `HeroVisual` client island the hero used to host
- * (decorative, `aria-hidden`), lazy-mounted via {@link ProductDemoVisualMount}
- * so its bundle and animation loop only load once this below-the-fold section
- * nears the viewport. The section carries the shared
- * `px-20 max-lg:px-8 max-sm:px-5` gutter and the `max-w-[1460px]` cap so the
- * card aligns with the hero's media frame above and the feature cards below.
+ * The caption ({@link ProductDemoCaption}) is the section's heading, overlaid
+ * top-centre from `lg` (72px in, so it is not pressed to the edge) and above
+ * the stage in flow below it, and it follows the scene: one title per act,
+ * crossfading as its act begins. The shared secondary outline pill, "Start
+ * building with Sim", mirrors it at the bottom centre with the same inset
+ * and the landing's animated chevron. The title is the `#3B3B3B`
+ * Andrew set for this ground. The stage itself
+ * is transparent, so the white composer and the workflow cards float straight
+ * on the paper.
+ *
+ * The stage's four edges blur and fade into the paper through the shared
+ * {@link EdgeFade} - the same progressive ramp the features rail wears, so a
+ * card the scene carries to an edge softens away instead of being cut. Over
+ * it, {@link CopyBands} adds the two strong bands the player needs and the
+ * shared strips do not carry: one under the overlaid title and one under the
+ * link, so the copy stays legible with the scene running beneath it.
+ *
+ * The stage carries the gooey composer loop - a prompt is typed and sent, the
+ * reply box goo-morphs out of the composer, Sim thinks and streams a reply,
+ * and the workflow builds - lazy-mounted via {@link ProductDemoVisualMount}
+ * so its bundle and timers only load once this below-the-fold section nears
+ * the viewport. The mount measures how far the overlaid caption reaches into
+ * the stage and hands that clearance to the loop, which keeps the scene
+ * centred in the frame yet clear of the copy, and it relays the loop's beats
+ * to the caption through {@link ProductDemoBeatProvider}.
  */
-export function ProductDemo() {
+
+/** The paper ground, the one literal on this page, paired with its dark value. */
+const PAPER = 'bg-[#F8F8F8] dark:bg-[var(--surface-2)]'
+
+/**
+ * From `lg` the frame is a player: a 2:1 aspect, a step shorter than the
+ * hero's 1648/898 stage so the section does not tower, and a width cap that
+ * keeps its height inside the screen below the 88px navbar with 40px of air
+ * above and below, so scrolling the section up under the navbar shows the
+ * whole frame at once. The cap's multiplier is the aspect.
+ */
+const FRAME_PLAYER = 'lg:aspect-[2/1] lg:max-w-[calc((100svh-168px)*2)]'
+
+/**
+ * From `lg` the title sits this far inside the frame's top edge and the link
+ * the same distance inside its bottom edge - a share of the frame's height,
+ * so both keep their distance from the edges and from the scene whatever the
+ * screen makes of the frame (107px on the 824px frame at the content cap,
+ * 82px on the 632px frame an 800px-tall screen allows). Below `lg` both are
+ * in flow with their own padding. The copy bands ({@link CopyBands}) are
+ * built on the same 13%.
+ */
+const TITLE_INSET = 'lg:top-[13%]'
+const LINK_INSET = 'lg:bottom-[13%]'
+
+const EDGE_STRIP =
+  'pointer-events-none absolute z-[5] [--paper:#F8F8F8] dark:[--paper:var(--surface-2)]'
+
+/**
+ * The strong bands, and the reason this file still draws bands of its own: the
+ * shared {@link EdgeFade} softens the scene into the ground at every edge, but
+ * it is deliberately even all the way along an edge, and the player overlays
+ * copy on two of them. From `lg` each band runs the copy's 13% inset plus 80px
+ * down from the top (the title) or up from the bottom (the link), solid at
+ * 8px of blur through the copy (its inset plus 40px) and tapering over the
+ * last 40px, and a second mask fades it out sideways, so it covers the centre
+ * where the title and the link sit and leaves the corners to the shared strip
+ * - a card passing a corner is not blurred for no reason. The bands end where
+ * the scene begins ({@link ProductDemoVisualMount} keeps the scene 81px under
+ * the copy's inset), so the composer never sits in the taper.
+ */
+const COPY_BAND =
+  'inset-x-0 h-[96px] lg:h-[calc(13%+80px)] [mask-image:linear-gradient(to_right,transparent_15%,black_34%,black_66%,transparent_85%)]'
+const COPY_BLUR = 'absolute inset-0 backdrop-blur-[8px]'
+const COPY_TOP_MASK = '[mask-image:linear-gradient(to_bottom,black_calc(100%-40px),transparent)]'
+const COPY_BOTTOM_MASK = '[mask-image:linear-gradient(to_top,black_calc(100%-40px),transparent)]'
+
+/**
+ * The two blurred bands that sit under the player's overlaid copy, above the
+ * scene and below the copy itself. The `--paper` they dissolve into is the
+ * frame's own ground.
+ */
+function CopyBands() {
   return (
-    <section
-      id='product-demo'
-      aria-labelledby='product-demo-heading'
-      className='mx-auto w-full max-w-[1460px] px-20 max-sm:px-5 max-lg:px-8'
-    >
-      <div className='grid grid-cols-[1fr_386px] gap-10 rounded-[10px] border border-[var(--border)] p-4 max-lg:grid-cols-1 max-lg:gap-6'>
+    <>
+      <div data-copy-band='top' className={cn(EDGE_STRIP, COPY_BAND, 'top-0')}>
         <div
-          aria-hidden='true'
-          className='relative h-[650px] overflow-hidden rounded-[4px] bg-[var(--surface-5)] max-sm:h-[280px] max-lg:h-[360px]'
-        >
-          <ProductDemoVisualMount />
-        </div>
+          className={cn(
+            COPY_BLUR,
+            COPY_TOP_MASK,
+            'bg-gradient-to-b from-[var(--paper)] to-transparent'
+          )}
+        />
+      </div>
+      <div data-copy-band='bottom' className={cn(EDGE_STRIP, COPY_BAND, 'bottom-0')}>
+        <div
+          className={cn(
+            COPY_BLUR,
+            COPY_BOTTOM_MASK,
+            'bg-gradient-to-t from-[var(--paper)] to-transparent'
+          )}
+        />
+      </div>
+    </>
+  )
+}
+
+export function ProductDemo() {
+  return (
+    <section id='product-demo' aria-labelledby='product-demo-heading' className='w-full'>
+      <div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER)}>
+        <div className={HOME_INSET}>
+          <ProductDemoBeatProvider>
+            <div
+              className={cn(
+                'relative mx-auto flex w-full flex-col overflow-hidden border border-[var(--border)]',
+                PAPER,
+                LANDING_STAGE_RADIUS,
+                FRAME_PLAYER
+              )}
+            >
+              <ProductDemoCaption
+                className={cn('px-6 pt-10 pb-6 lg:absolute lg:inset-x-0 lg:p-0', TITLE_INSET)}
+              />
+
+              {/* The scene is a picture, not a control: nothing in it takes the pointer. */}
+              <div
+                aria-hidden='true'
+                inert
+                className='pointer-events-none relative min-h-[300px] w-full flex-1 select-none overflow-hidden lg:absolute lg:inset-0 lg:min-h-0'
+              >
+                <ProductDemoVisualMount />
+                <EdgeFade ground='paper' />
+                <CopyBands />
+              </div>
 
-        <div className='flex flex-col justify-center pr-4 max-lg:pr-0 max-lg:pb-2'>
-          <div className='mb-8'>
-            <LoaderMarks />
-          </div>
-          <h2
-            id='product-demo-heading'
-            className='text-balance text-[22px] text-[var(--text-primary)] leading-[1.3] max-sm:text-[20px]'
-          >
-            Describe it. Sim builds it.
-          </h2>
-          <p className='mt-3 text-pretty text-[15px] text-[var(--text-muted)] leading-[1.6]'>
-            Describe what you want to automate in plain English. Sim acts as an AI agent builder,
-            connecting the right blocks, models, tools, and data into a working workflow that you
-            can review, customize, test, and deploy.
-          </p>
+              <div
+                className={cn(
+                  'relative z-10 mx-auto w-fit pt-4 pb-10 lg:absolute lg:inset-x-0 lg:p-0',
+                  LINK_INSET
+                )}
+              >
+                <LandingCtaLink variant='outline' href={SIGNUP_HREF} prefetch={false} withArrow>
+                  Start building with Sim
+                </LandingCtaLink>
+              </div>
+            </div>
+          </ProductDemoBeatProvider>
         </div>
       </div>
     </section>
diff --git a/apps/sim/app/(landing)/components/proof/index.ts b/apps/sim/app/(landing)/components/proof/index.ts
new file mode 100644
index 00000000000..79305c43484
--- /dev/null
+++ b/apps/sim/app/(landing)/components/proof/index.ts
@@ -0,0 +1 @@
+export { Proof } from './proof'
diff --git a/apps/sim/app/(landing)/components/proof/proof.tsx b/apps/sim/app/(landing)/components/proof/proof.tsx
new file mode 100644
index 00000000000..231c6ea7812
--- /dev/null
+++ b/apps/sim/app/(landing)/components/proof/proof.tsx
@@ -0,0 +1,22 @@
+import { cn } from '@sim/emcn'
+import {
+  HOME_INSET,
+  LANDING_CONTENT_WIDTH,
+  LANDING_GUTTER,
+} from '@/app/(landing)/components/landing-layout'
+import { Logos } from '@/app/(landing)/components/logos'
+
+/** Homepage customer logos between the hero preview and featured customer film. */
+export function Proof() {
+  return (
+    <section
+      id='proof'
+      aria-label='Customer logos'
+      className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER)}
+    >
+      <div className={cn(HOME_INSET, 'flex justify-center')}>
+        <Logos layout='row' size='proof' tone='muted' />
+      </div>
+    </section>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/prose-page/constants.ts b/apps/sim/app/(landing)/components/prose-page/constants.ts
index 4fda51fc303..8637f947204 100644
--- a/apps/sim/app/(landing)/components/prose-page/constants.ts
+++ b/apps/sim/app/(landing)/components/prose-page/constants.ts
@@ -1,3 +1,5 @@
+import { LANDING_CONTENT_WIDTH, LANDING_GUTTER } from '@/app/(landing)/components/landing-layout'
+
 /**
  * Prose-layout spacing and type - the single source of truth for every gutter,
  * gap, reading-column width, and text token used across the legal pages
@@ -17,9 +19,9 @@ export const PROSE_SPACING = {
    * The one horizontal gutter, matching the navbar and footer so content starts
    * on the wordmark's vertical line at every width.
    */
-  gutter: 'px-20 max-lg:px-8 max-sm:px-5',
-  /** Outer content cap, matching navbar/footer (`mx-auto w-full max-w-[1460px]`). */
-  outerCap: 'mx-auto w-full max-w-[1460px]',
+  gutter: LANDING_GUTTER,
+  /** Outer content cap, matching navbar/footer. */
+  outerCap: LANDING_CONTENT_WIDTH,
   /** Top padding that clears the sticky navbar, matching the platform hero. */
   heroTopPadding: 'pt-[112px] max-sm:pt-20',
   /** Vertical rhythm of the content column - hero → body and section → section. */
diff --git a/apps/sim/app/(landing)/components/security/components/cert-blocs/cert-blocs.module.css b/apps/sim/app/(landing)/components/security/components/cert-blocs/cert-blocs.module.css
new file mode 100644
index 00000000000..94ac97fe582
--- /dev/null
+++ b/apps/sim/app/(landing)/components/security/components/cert-blocs/cert-blocs.module.css
@@ -0,0 +1,48 @@
+/** Unitless milliseconds keep CSS optimization from changing the replay timing units. */
+.list {
+  --draw-duration-ms: 900;
+  --detail-delay-ms: 120;
+  --entry-delay: 0ms;
+}
+
+.mark [pathLength] {
+  stroke-dasharray: 1;
+  stroke-dashoffset: 0;
+}
+
+.list:not(.drawn) .mark [pathLength] {
+  stroke-dashoffset: 1;
+}
+
+.drawn .mark [pathLength] {
+  animation: draw calc(var(--draw-duration-ms) * 1ms) ease-out var(--entry-delay) backwards;
+}
+
+.drawn .mark [data-cert-detail] [pathLength] {
+  animation-delay: calc(var(--entry-delay) + var(--detail-delay-ms) * 1ms);
+}
+
+.drawn li:nth-child(2) {
+  --entry-delay: 100ms;
+}
+
+.drawn li:nth-child(3) {
+  --entry-delay: 200ms;
+}
+
+@keyframes draw {
+  from {
+    stroke-dashoffset: 1;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .list .mark [pathLength] {
+    stroke-dasharray: none;
+    stroke-dashoffset: 0;
+    animation: none !important;
+  }
+}
diff --git a/apps/sim/app/(landing)/components/security/components/cert-blocs/cert-blocs.test.tsx b/apps/sim/app/(landing)/components/security/components/cert-blocs/cert-blocs.test.tsx
new file mode 100644
index 00000000000..496ac9767df
--- /dev/null
+++ b/apps/sim/app/(landing)/components/security/components/cert-blocs/cert-blocs.test.tsx
@@ -0,0 +1,196 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { CertBlocs } from '@/app/(landing)/components/security/components/cert-blocs'
+
+function renderCerts() {
+  return <CertBlocs href='https://trust.sim.ai/' />
+}
+
+describe('CertBlocs', () => {
+  it('matches the Features stage aspect on white card chrome with dash-normalized strokes', () => {
+    const html = renderToStaticMarkup(renderCerts())
+
+    expect(html).toContain('aspect-[5/6]')
+    expect(html).toContain('rounded-[10px]')
+    expect(html).toContain('w-[56%]')
+    expect(html).toContain('bg-[var(--surface-2)]')
+    expect(html).toContain('border-[var(--border)]')
+    expect(html).not.toContain('rounded-[12px]')
+    expect(html).toContain('href="https://trust.sim.ai/"')
+    expect(html).toContain('pathLength="1"')
+    expect(html).not.toContain('<text')
+  })
+
+  it('keeps the small privacy stars part of the normalized stroke drawing', () => {
+    const html = renderToStaticMarkup(renderCerts())
+
+    const document = new DOMParser().parseFromString(html, 'text/html')
+    const stars = document.querySelectorAll('[data-cert-stars] path')
+    expect(stars).toHaveLength(12)
+    expect([...stars].every((star) => star.getAttribute('pathLength') === '1')).toBe(true)
+    expect(html).toContain('in the Sim Trust Center')
+  })
+})
+
+describe('CertBlocs draw trigger', () => {
+  let observe: ReturnType<typeof vi.fn>
+  let disconnect: ReturnType<typeof vi.fn>
+  let observerCallback: IntersectionObserverCallback | undefined
+  let observerRoot: Element | Document | null | undefined
+  let root: Root | null
+  let host: HTMLDivElement | null
+  let port: HTMLDivElement | null
+
+  beforeEach(() => {
+    observe = vi.fn()
+    disconnect = vi.fn()
+    observerCallback = undefined
+    observerRoot = undefined
+    ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+
+    vi.stubGlobal(
+      'IntersectionObserver',
+      class {
+        constructor(callback: IntersectionObserverCallback, options?: IntersectionObserverInit) {
+          observerCallback = callback
+          observerRoot = options?.root
+        }
+        observe = observe
+        disconnect = disconnect
+        unobserve = vi.fn()
+        takeRecords = () => []
+        root = null
+        rootMargin = ''
+        thresholds = []
+      }
+    )
+
+    port = document.createElement('div')
+    port.className = 'h-screen overflow-y-auto'
+    document.body.append(port)
+    host = document.createElement('div')
+    port.append(host)
+    root = createRoot(host)
+    vi.stubGlobal('matchMedia', () => ({
+      matches: false,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+    }))
+  })
+
+  afterEach(() => {
+    act(() => root?.unmount())
+    root = null
+    host?.remove()
+    host = null
+    port?.remove()
+    port = null
+    vi.unstubAllGlobals()
+  })
+
+  it('draws once when the row enters the inner landing scroll port', () => {
+    vi.stubGlobal('matchMedia', () => ({
+      matches: false,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+    }))
+
+    act(() => {
+      root?.render(renderCerts())
+    })
+
+    expect(observerRoot).toBe(port)
+    expect(observe).toHaveBeenCalledTimes(1)
+
+    act(() => {
+      observerCallback?.(
+        [{ isIntersecting: true } as IntersectionObserverEntry],
+        {} as IntersectionObserver
+      )
+    })
+
+    expect(disconnect).toHaveBeenCalled()
+    expect(host?.querySelector('ul')?.className).toMatch(/drawn/)
+  })
+
+  it('shows marks fully drawn when the user prefers reduced motion', () => {
+    vi.stubGlobal('matchMedia', () => ({
+      matches: true,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+    }))
+
+    act(() => {
+      root?.render(renderCerts())
+    })
+
+    expect(observe).not.toHaveBeenCalled()
+    expect(host?.querySelector('ul')?.className).toMatch(/drawn/)
+  })
+
+  it('replays the hovered GDPR mark and stars on every entry and cancels unfinished strokes', () => {
+    act(() => root?.render(renderCerts()))
+    const card = Array.from(host?.querySelectorAll('a') ?? []).find((link) =>
+      link.textContent?.startsWith('GDPR')
+    )
+    expect(card).toBeTruthy()
+    /** JSDOM does not inherit the CSS module's custom properties. */
+    card?.style.setProperty('--draw-duration-ms', '900')
+    card?.style.setProperty('--detail-delay-ms', '120')
+    const cancel = vi.fn()
+    const strokes = Array.from(host?.querySelectorAll('[pathLength]') ?? []).map((stroke) => {
+      const animate = vi.fn()
+      Object.assign(stroke, { animate, getAnimations: () => [{ cancel }] })
+      return { stroke, animate }
+    })
+
+    for (let entry = 1; entry <= 2; entry += 1) {
+      act(() => {
+        card?.dispatchEvent(new MouseEvent('pointerover', { bubbles: true }))
+      })
+
+      for (const { stroke, animate } of strokes) {
+        expect(animate).toHaveBeenCalledTimes(card?.contains(stroke) ? entry : 0)
+        if (card?.contains(stroke)) {
+          expect(animate).toHaveBeenLastCalledWith(
+            expect.any(Array),
+            expect.objectContaining({ duration: 900 })
+          )
+        }
+      }
+
+      act(() => {
+        card?.dispatchEvent(new MouseEvent('pointerout', { bubbles: true }))
+      })
+    }
+
+    expect(cancel).toHaveBeenCalledTimes((card?.querySelectorAll('[pathLength]').length ?? 0) * 2)
+  })
+
+  it('does not replay for touch entry or reduced motion', () => {
+    act(() => root?.render(renderCerts()))
+    const card = host?.querySelector('a')
+    const animate = vi.fn()
+    for (const stroke of host?.querySelectorAll('[pathLength]') ?? []) {
+      Object.assign(stroke, { animate, getAnimations: () => [] })
+    }
+
+    const touch = new MouseEvent('pointerover', { bubbles: true })
+    Object.defineProperty(touch, 'pointerType', { value: 'touch' })
+    act(() => card?.dispatchEvent(touch))
+    expect(animate).not.toHaveBeenCalled()
+
+    vi.stubGlobal('matchMedia', () => ({
+      matches: true,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+    }))
+    act(() => card?.dispatchEvent(new MouseEvent('pointerover', { bubbles: true })))
+    expect(animate).not.toHaveBeenCalled()
+  })
+})
diff --git a/apps/sim/app/(landing)/components/security/components/cert-blocs/cert-blocs.tsx b/apps/sim/app/(landing)/components/security/components/cert-blocs/cert-blocs.tsx
new file mode 100644
index 00000000000..75b48705b90
--- /dev/null
+++ b/apps/sim/app/(landing)/components/security/components/cert-blocs/cert-blocs.tsx
@@ -0,0 +1,160 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { cn } from '@sim/emcn'
+import { HOME_TYPE } from '@/app/(landing)/components/landing-layout'
+import styles from '@/app/(landing)/components/security/components/cert-blocs/cert-blocs.module.css'
+import {
+  DetailsArrow,
+  GdprMark,
+  Iso27001Mark,
+  Soc2TypeIiMark,
+} from '@/app/(landing)/components/security/icons'
+
+const SCROLL_PORT_SELECTOR = '.overflow-y-auto'
+const MARK_STROKES = '[pathLength]'
+const CERT_MUTED = 'text-[var(--text-muted)]'
+
+const CERTIFICATIONS = [
+  { title: 'SOC 2 Type II', Mark: Soc2TypeIiMark },
+  { title: 'ISO 27001', Mark: Iso27001Mark },
+  { title: 'GDPR', Mark: GdprMark },
+] as const
+
+interface CertBlocsProps {
+  href: string
+}
+
+const OUTBOUND_LINK = {
+  target: '_blank',
+  rel: 'noopener noreferrer',
+} as const
+
+/** Cancel only the mark's stroke animations, leaving the card's color transitions alone. */
+function cancelDraws(scope: Element) {
+  for (const stroke of scope.querySelectorAll<SVGGeometryElement>(MARK_STROKES)) {
+    for (const animation of stroke.getAnimations?.() ?? []) animation.cancel()
+  }
+}
+
+/** Replay from the first stroke without remounting the SVG or changing the card's geometry. */
+function replayMark(card: HTMLAnchorElement) {
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
+
+  const computed = getComputedStyle(card)
+  const duration = Number(computed.getPropertyValue('--draw-duration-ms'))
+  const detailDelay = Number(computed.getPropertyValue('--detail-delay-ms'))
+  cancelDraws(card)
+
+  for (const stroke of card.querySelectorAll<SVGGeometryElement>(MARK_STROKES)) {
+    stroke.animate?.([{ strokeDashoffset: '1' }, { strokeDashoffset: '0' }], {
+      duration,
+      delay: stroke.closest('[data-cert-detail]') ? detailDelay : 0,
+      easing: 'ease-out',
+      fill: 'backwards',
+    })
+  }
+}
+
+/**
+ * Certification cards with a one-time entrance draw and independent hover or
+ * keyboard-focus replays. Reduced motion keeps every mark fully drawn.
+ */
+export function CertBlocs({ href }: CertBlocsProps) {
+  const listRef = useRef<HTMLUListElement>(null)
+  const [drawn, setDrawn] = useState(false)
+
+  useEffect(() => {
+    const list = listRef.current
+    if (!list) return
+
+    const media = window.matchMedia('(prefers-reduced-motion: reduce)')
+    const root = list.closest(SCROLL_PORT_SELECTOR)
+    let observer: IntersectionObserver | null = null
+
+    const handleMotionPreference = () => {
+      if (!media.matches) return
+      observer?.disconnect()
+      cancelDraws(list)
+      setDrawn(true)
+    }
+
+    if (media.matches || typeof IntersectionObserver === 'undefined' || !root) {
+      setDrawn(true)
+    } else {
+      observer = new IntersectionObserver(
+        ([entry]) => {
+          if (!entry?.isIntersecting) return
+          observer?.disconnect()
+          setDrawn(true)
+        },
+        { root, threshold: 0.3 }
+      )
+      observer.observe(list)
+    }
+
+    media.addEventListener('change', handleMotionPreference)
+    return () => {
+      observer?.disconnect()
+      media.removeEventListener('change', handleMotionPreference)
+      cancelDraws(list)
+    }
+  }, [])
+
+  return (
+    <ul
+      ref={listRef}
+      className={cn(
+        'grid grid-cols-3 gap-6 max-sm:grid-cols-1 max-sm:gap-4',
+        styles.list,
+        drawn && styles.drawn
+      )}
+    >
+      {CERTIFICATIONS.map(({ title, Mark }) => (
+        <li key={title}>
+          <a
+            href={href}
+            {...OUTBOUND_LINK}
+            onPointerEnter={(event) => {
+              if (event.pointerType === 'touch') return
+              setDrawn(true)
+              replayMark(event.currentTarget)
+            }}
+            onFocus={(event) => {
+              if (!event.currentTarget.matches(':focus-visible')) return
+              setDrawn(true)
+              replayMark(event.currentTarget)
+            }}
+            className={cn(
+              'group flex aspect-[5/6] flex-col items-center bg-[var(--surface-2)] px-8 pt-10 pb-10 text-center',
+              'rounded-[10px] border border-[var(--border)] max-sm:px-6 max-sm:pb-8',
+              'transition-[border-color] duration-200 ease-out hover-hover:hover:border-[var(--text-muted)] motion-reduce:transition-none',
+              'focus-visible:outline focus-visible:outline-1 focus-visible:outline-[var(--text-primary)] focus-visible:outline-offset-4'
+            )}
+          >
+            <span className='flex w-full flex-1 items-center justify-center'>
+              <Mark
+                className={cn(
+                  'w-[56%] transition-colors duration-200 ease-out hover-hover:group-hover:text-[var(--text-secondary)] group-focus-visible:text-[var(--text-secondary)] motion-reduce:transition-none',
+                  CERT_MUTED,
+                  styles.mark
+                )}
+              />
+            </span>
+            <span className='text-[18px] text-[var(--text-primary)] leading-[1.3]'>{title}</span>
+            <span
+              className={cn(
+                'mt-2 inline-flex items-center gap-1 text-[var(--text-secondary)]',
+                'transition-colors duration-150 ease-out hover-hover:group-hover:text-[var(--text-primary)]',
+                HOME_TYPE.meta
+              )}
+            >
+              Details<span className='sr-only'> in the Sim Trust Center</span>
+              <DetailsArrow className='size-[12px]' />
+            </span>
+          </a>
+        </li>
+      ))}
+    </ul>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/security/components/cert-blocs/index.ts b/apps/sim/app/(landing)/components/security/components/cert-blocs/index.ts
new file mode 100644
index 00000000000..148dcd666db
--- /dev/null
+++ b/apps/sim/app/(landing)/components/security/components/cert-blocs/index.ts
@@ -0,0 +1 @@
+export { CertBlocs } from './cert-blocs'
diff --git a/apps/sim/app/(landing)/components/security/components/workspace-controls/index.ts b/apps/sim/app/(landing)/components/security/components/workspace-controls/index.ts
new file mode 100644
index 00000000000..7eb41c7a8da
--- /dev/null
+++ b/apps/sim/app/(landing)/components/security/components/workspace-controls/index.ts
@@ -0,0 +1 @@
+export { WorkspaceControls } from './workspace-controls'
diff --git a/apps/sim/app/(landing)/components/security/components/workspace-controls/workspace-controls.test.tsx b/apps/sim/app/(landing)/components/security/components/workspace-controls/workspace-controls.test.tsx
new file mode 100644
index 00000000000..38dd5c8e826
--- /dev/null
+++ b/apps/sim/app/(landing)/components/security/components/workspace-controls/workspace-controls.test.tsx
@@ -0,0 +1,45 @@
+/**
+ * @vitest-environment node
+ */
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('@sim/emcn', () => ({
+  cn: (...values: Array<string | false | null | undefined>) => values.filter(Boolean).join(' '),
+}))
+
+import { WorkspaceControls } from '@/app/(landing)/components/security/components/workspace-controls/workspace-controls'
+
+describe('WorkspaceControls', () => {
+  it('renders six untitled controls on an even three-column grid', () => {
+    const html = renderToStaticMarkup(<WorkspaceControls />)
+
+    expect(html).toContain('id="controls"')
+    expect(html).toContain('aria-label="Workspace controls"')
+    expect(html).toContain('grid-cols-3')
+    expect(html).toContain('max-lg:grid-cols-2')
+    expect(html).toContain('max-sm:grid-cols-1')
+    expect(html.match(/<li /g)).toHaveLength(6)
+    expect(html).toContain('>SSO &amp; SCIM</h3>')
+    expect(html).toContain('>Self-hosting</h3>')
+    expect(html).not.toContain('Open source')
+  })
+
+  it('shifts every mark off the 64-grid origin so its stroke sits flush with the text', () => {
+    const html = renderToStaticMarkup(<WorkspaceControls />)
+    const viewBoxes = [...html.matchAll(/viewBox="([^"]+)"/g)].map(([, value]) => value)
+
+    expect(viewBoxes).toHaveLength(6)
+    for (const viewBox of viewBoxes) {
+      const [minX] = viewBox.split(' ').map(Number)
+      expect(minX).toBeGreaterThan(12)
+    }
+  })
+
+  it('carries no heading of its own', () => {
+    const html = renderToStaticMarkup(<WorkspaceControls />)
+
+    expect(html).not.toContain('How the workspace runs')
+    expect(html).not.toContain('<h2')
+  })
+})
diff --git a/apps/sim/app/(landing)/components/security/components/workspace-controls/workspace-controls.tsx b/apps/sim/app/(landing)/components/security/components/workspace-controls/workspace-controls.tsx
new file mode 100644
index 00000000000..4d44bc84523
--- /dev/null
+++ b/apps/sim/app/(landing)/components/security/components/workspace-controls/workspace-controls.tsx
@@ -0,0 +1,111 @@
+import type { ComponentType } from 'react'
+import { cn } from '@sim/emcn'
+import {
+  HOME_INSET,
+  HOME_TYPE,
+  LANDING_CONTENT_WIDTH,
+  LANDING_GUTTER,
+} from '@/app/(landing)/components/landing-layout'
+import type { SecurityMarkProps } from '@/app/(landing)/components/security/icons'
+import {
+  AuditRecordsMark,
+  DataRetentionMark,
+  PermissionGroupsMark,
+  SelfHostingMark,
+  SpendControlsMark,
+  SsoMark,
+} from '@/app/(landing)/components/security/icons'
+
+/**
+ * Everything under the title — the mark and the description — drops to the
+ * page's lightest text tier, so each cell reads title first and the outline
+ * mark never competes with it.
+ */
+const CONTROL_QUIET = 'text-[var(--text-secondary)]'
+
+/**
+ * The feature rail's caption measure (15px/1.45), so a control reads as the
+ * same kind of copy as the card captions directly above it. Not in
+ * {@link HOME_TYPE}, whose scale steps 14 → 16 straight past the caption size
+ * the rail and the lifecycle grid both set by hand.
+ */
+const CONTROL_COPY = 'text-[15px] leading-[1.45]'
+
+/**
+ * The rail and controls share a group in `Landing`. Its positive gap provides
+ * breathing room above this inset rule; the padding balances the space below.
+ */
+const CONTROL_RULE = 'border-[var(--border)] border-t pt-16 max-sm:pt-12 max-lg:pt-14'
+
+interface Control {
+  title: string
+  description: string
+  Mark: ComponentType<SecurityMarkProps>
+}
+
+const CONTROLS: readonly Control[] = [
+  {
+    title: 'SSO & SCIM',
+    description: 'Connect your identity provider for sign-in and automatic member provisioning.',
+    Mark: SsoMark,
+  },
+  {
+    title: 'Permission groups',
+    description: 'Control which models, integrations, and tools each group can use.',
+    Mark: PermissionGroupsMark,
+  },
+  {
+    title: 'Spend controls',
+    description: 'Set organization and per-member usage limits, with cost tracked by workspace.',
+    Mark: SpendControlsMark,
+  },
+  {
+    title: 'Audit records',
+    description: 'Sim records security-relevant changes and traces every run.',
+    Mark: AuditRecordsMark,
+  },
+  {
+    title: 'Data retention',
+    description: 'Sim lets each workspace set how long run data is kept.',
+    Mark: DataRetentionMark,
+  },
+  {
+    title: 'Self-hosting',
+    description: 'Run Sim in your own cloud with Docker or Kubernetes.',
+    Mark: SelfHostingMark,
+  },
+] as const
+
+/**
+ * Operational controls as a heading-less white spec grid on the page measure,
+ * six items over two even rows. It reads as the plain-language index of the
+ * feature rail it follows, so it carries no title of its own: the section is
+ * named by `aria-label`, and the items stay `h3` under the rail's `h2` rather
+ * than becoming six competing section headings. Certifications and the
+ * governance intro live in `Security`, a separate beat further down the page.
+ */
+export function WorkspaceControls() {
+  return (
+    <section
+      id='controls'
+      aria-label='Workspace controls'
+      className={cn('flex w-full flex-col', LANDING_CONTENT_WIDTH, LANDING_GUTTER)}
+    >
+      <div className={cn(HOME_INSET, CONTROL_RULE)}>
+        <ul className='grid grid-cols-3 gap-x-16 gap-y-20 max-sm:grid-cols-1 max-sm:gap-y-12 max-lg:grid-cols-2 max-lg:gap-y-16'>
+          {CONTROLS.map(({ title, description, Mark }) => (
+            <li key={title} className='flex flex-col items-start gap-3'>
+              <Mark className={cn('size-[56px] max-sm:size-[48px]', CONTROL_QUIET)} />
+              <div>
+                <h3 className={cn('text-[var(--text-primary)]', HOME_TYPE.body)}>{title}</h3>
+                <p className={cn('mt-1.5 max-w-[30ch] text-pretty', CONTROL_QUIET, CONTROL_COPY)}>
+                  {description}
+                </p>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/security/icons.tsx b/apps/sim/app/(landing)/components/security/icons.tsx
new file mode 100644
index 00000000000..88d042da201
--- /dev/null
+++ b/apps/sim/app/(landing)/components/security/icons.tsx
@@ -0,0 +1,216 @@
+import type { ReactNode } from 'react'
+
+export interface SecurityMarkProps {
+  className?: string
+}
+
+const FEATURE_STROKE = {
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: 1.55,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+} as const
+
+const CERT_STROKE = {
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: 1,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+  pathLength: 1,
+} as const
+
+/**
+ * A feature mark's viewBox, shifted so the drawing starts at the box's left
+ * edge.
+ *
+ * The marks are drawn centred on the 64-unit grid, which leaves ~14 units of
+ * air before the first stroke. Stacked above its label in a flex column that
+ * reads as the icon being indented from the text, and the air differs per mark
+ * (a circle's leftmost point sits further in than a rect's edge), so the six
+ * do not even indent alike. Moving the viewBox origin to the mark's own stroke
+ * edge slides the drawing flush left at the same scale, without redrawing
+ * geometry or cropping it — the box keeps its 64-unit width, so the freed
+ * space falls on the right where nothing is anchored.
+ *
+ * `geometryLeft` is the mark's leftmost path coordinate; half the stroke sits
+ * outside it, and that outer edge is what has to land on the text's left edge.
+ */
+function flushLeftBox(geometryLeft: number): string {
+  return `${geometryLeft - FEATURE_STROKE.strokeWidth / 2} 0 64 64`
+}
+
+interface MarkSvgProps {
+  className?: string
+  viewBox: string
+  children: ReactNode
+}
+
+function MarkSvg({ className, viewBox, children }: MarkSvgProps) {
+  return (
+    <svg
+      className={className}
+      viewBox={viewBox}
+      fill='none'
+      overflow='visible'
+      xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
+    >
+      {children}
+    </svg>
+  )
+}
+
+export function SsoMark({ className }: SecurityMarkProps) {
+  return (
+    <MarkSvg className={className} viewBox={flushLeftBox(14)}>
+      <rect x='14' y='18' width='36' height='28' rx='4' {...FEATURE_STROKE} />
+      <circle cx='26' cy='32' r='5' {...FEATURE_STROKE} />
+      <path d='M21 41c1.4-3.2 3.6-4.8 5-4.8s3.6 1.6 5 4.8' {...FEATURE_STROKE} />
+      <circle cx='42' cy='30' r='3.2' {...FEATURE_STROKE} />
+      <path d='M42 33.2v5.3l1.8 1.2' {...FEATURE_STROKE} />
+    </MarkSvg>
+  )
+}
+
+export function PermissionGroupsMark({ className }: SecurityMarkProps) {
+  return (
+    <MarkSvg className={className} viewBox={flushLeftBox(26 - 11)}>
+      <circle cx='26' cy='28' r='11' {...FEATURE_STROKE} />
+      <circle cx='38' cy='28' r='11' {...FEATURE_STROKE} />
+      <circle cx='32' cy='40' r='11' {...FEATURE_STROKE} />
+    </MarkSvg>
+  )
+}
+
+export function SpendControlsMark({ className }: SecurityMarkProps) {
+  return (
+    <MarkSvg className={className} viewBox={flushLeftBox(32 - 18)}>
+      <circle cx='32' cy='32' r='18' {...FEATURE_STROKE} />
+      <path d='M32 18v4M32 42v4M18 32h4M42 32h4' {...FEATURE_STROKE} />
+      <path d='M32 32 42 24' {...FEATURE_STROKE} />
+      <circle cx='32' cy='32' r='2.2' {...FEATURE_STROKE} />
+    </MarkSvg>
+  )
+}
+
+export function AuditRecordsMark({ className }: SecurityMarkProps) {
+  return (
+    <MarkSvg className={className} viewBox={flushLeftBox(18 - 2.2)}>
+      <path d='M18 16v32' {...FEATURE_STROKE} />
+      <circle cx='18' cy='22' r='2.2' {...FEATURE_STROKE} />
+      <circle cx='18' cy='32' r='2.2' {...FEATURE_STROKE} />
+      <circle cx='18' cy='42' r='2.2' {...FEATURE_STROKE} />
+      <path d='M24 22h22M24 32h16M24 42h20' {...FEATURE_STROKE} />
+    </MarkSvg>
+  )
+}
+
+export function DataRetentionMark({ className }: SecurityMarkProps) {
+  return (
+    <MarkSvg className={className} viewBox={flushLeftBox(32 - 16)}>
+      <circle cx='32' cy='34' r='16' {...FEATURE_STROKE} />
+      <path d='M32 22v12l8 5' {...FEATURE_STROKE} />
+      <path d='M28 12h8M32 12v6' {...FEATURE_STROKE} />
+      <path d='M44.5 23.5a16 16 0 0 1 3.5 10.5' {...FEATURE_STROKE} />
+    </MarkSvg>
+  )
+}
+
+export function SelfHostingMark({ className }: SecurityMarkProps) {
+  return (
+    <MarkSvg className={className} viewBox={flushLeftBox(14)}>
+      <rect x='14' y='16' width='36' height='14' rx='3' {...FEATURE_STROKE} />
+      <rect x='14' y='34' width='36' height='14' rx='3' {...FEATURE_STROKE} />
+      <circle cx='20' cy='23' r='1.5' {...FEATURE_STROKE} />
+      <circle cx='20' cy='41' r='1.5' {...FEATURE_STROKE} />
+      <path d='M28 23h16M28 41h16' {...FEATURE_STROKE} />
+    </MarkSvg>
+  )
+}
+
+/** A softly shouldered shield and a centered check, drawn on the shared 96-unit grid. */
+export function Soc2TypeIiMark({ className }: SecurityMarkProps) {
+  return (
+    <MarkSvg className={className} viewBox='0 0 96 96'>
+      <path
+        d='M48 16 73 25q4 1.5 4 6v18c0 14-11 24-29 31-18-7-29-17-29-31V31q0-4.5 4-6Z'
+        {...CERT_STROKE}
+      />
+      <g data-cert-detail=''>
+        <path d='m35 48 9 9 17-18' {...CERT_STROKE} />
+      </g>
+    </MarkSvg>
+  )
+}
+
+/** An airy globe with a single elliptical meridian and three balanced latitude lines. */
+export function Iso27001Mark({ className }: SecurityMarkProps) {
+  return (
+    <MarkSvg className={className} viewBox='0 0 96 96'>
+      <circle cx='48' cy='48' r='31' {...CERT_STROKE} />
+      <g data-cert-detail=''>
+        <ellipse cx='48' cy='48' rx='13' ry='31' {...CERT_STROKE} />
+        <path d='M17 48h62' {...CERT_STROKE} />
+        <path d='M21.45 32h53.1M21.45 64h53.1' {...CERT_STROKE} />
+      </g>
+    </MarkSvg>
+  )
+}
+
+const GDPR_STAR_CENTERS = [
+  [48, 24],
+  [60, 27.2],
+  [68.8, 36],
+  [72, 48],
+  [68.8, 60],
+  [60, 68.8],
+  [48, 72],
+  [36, 68.8],
+  [27.2, 60],
+  [24, 48],
+  [27.2, 36],
+  [36, 27.2],
+] as const
+
+/** A compact privacy lock surrounded by twelve fine stars inside the circular boundary. */
+export function GdprMark({ className }: SecurityMarkProps) {
+  return (
+    <MarkSvg className={className} viewBox='0 0 96 96'>
+      <circle cx='48' cy='48' r='31' {...CERT_STROKE} />
+      <g data-cert-detail=''>
+        <g data-cert-stars=''>
+          {GDPR_STAR_CENTERS.map(([x, y]) => (
+            <path
+              key={`${x}-${y}`}
+              transform={`translate(${x} ${y})`}
+              d='M0-2.5 .65-.89 2.38-.77 1.05.34 1.47 2.02 0 1.1-1.47 2.02-1.05.34-2.38-.77-.65-.89Z'
+              {...CERT_STROKE}
+              strokeWidth={0.65}
+            />
+          ))}
+        </g>
+        <path d='M41 44v-6a7 7 0 0 1 14 0v6' {...CERT_STROKE} />
+        <rect x='36' y='44' width='24' height='20' rx='4' {...CERT_STROKE} />
+        <circle cx='48' cy='53' r='1.8' {...CERT_STROKE} />
+        <path d='M48 54.8v3.7' {...CERT_STROKE} />
+      </g>
+    </MarkSvg>
+  )
+}
+
+export function DetailsArrow({ className }: SecurityMarkProps) {
+  return (
+    <MarkSvg className={className} viewBox='0 0 12 12'>
+      <path
+        d='M3.2 8.8 8.8 3.2M4.2 3.2h4.6V7.8'
+        fill='none'
+        stroke='currentColor'
+        strokeWidth='1.2'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </MarkSvg>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/security/index.ts b/apps/sim/app/(landing)/components/security/index.ts
new file mode 100644
index 00000000000..e5ab1184de7
--- /dev/null
+++ b/apps/sim/app/(landing)/components/security/index.ts
@@ -0,0 +1,2 @@
+export { WorkspaceControls } from './components/workspace-controls'
+export { Security } from './security'
diff --git a/apps/sim/app/(landing)/components/security/security.test.tsx b/apps/sim/app/(landing)/components/security/security.test.tsx
new file mode 100644
index 00000000000..dcaa8d50768
--- /dev/null
+++ b/apps/sim/app/(landing)/components/security/security.test.tsx
@@ -0,0 +1,42 @@
+/**
+ * @vitest-environment node
+ */
+import type { AnchorHTMLAttributes } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('@sim/emcn', () => ({
+  ChipLink: ({
+    variant: _variant,
+    ...props
+  }: AnchorHTMLAttributes<HTMLAnchorElement> & { variant?: string }) => <a {...props} />,
+  cn: (...values: Array<string | false | null | undefined>) => values.filter(Boolean).join(' '),
+}))
+
+import { Security } from '@/app/(landing)/components/security/security'
+
+describe('Security', () => {
+  it('renders the governance intro and white certification blocs', () => {
+    const html = renderToStaticMarkup(<Security />)
+
+    expect(html).toContain('id="security"')
+    expect(html).not.toContain('min-h-[100dvh]')
+    expect(html).toContain('>Central governance for enterprise AI</h2>')
+    expect(html).toContain(
+      'Sim is one place to control who can build agents, what they can use, and how the workspace runs.'
+    )
+    expect(html).toContain('>SOC 2 Type II</span>')
+    expect(html).toContain('>ISO 27001</span>')
+    expect(html).toContain('>GDPR</span>')
+    expect(html).toContain('href="https://trust.sim.ai/"')
+    expect(html).toContain('bg-[var(--surface-2)]')
+    expect(html).toContain('aspect-[5/6]')
+    expect(html).toContain('rounded-[10px]')
+    expect(html).not.toContain('rounded-[12px]')
+    expect(html).not.toContain('How the workspace runs')
+    expect(html).not.toContain('Self-hosting')
+    expect(html).not.toContain('SOC2 compliant')
+    expect(html).not.toContain('HIPAA')
+    expect(html).not.toContain('CCPA')
+  })
+})
diff --git a/apps/sim/app/(landing)/components/security/security.tsx b/apps/sim/app/(landing)/components/security/security.tsx
new file mode 100644
index 00000000000..db5374e7315
--- /dev/null
+++ b/apps/sim/app/(landing)/components/security/security.tsx
@@ -0,0 +1,63 @@
+import { cn } from '@sim/emcn'
+import { LandingCtaLink } from '@/app/(landing)/components/landing-cta-link'
+import {
+  HOME_INSET,
+  HOME_TYPE,
+  LANDING_CONTENT_WIDTH,
+  LANDING_GUTTER,
+} from '@/app/(landing)/components/landing-layout'
+import { CertBlocs } from '@/app/(landing)/components/security/components/cert-blocs'
+
+/**
+ * The governance beat: the certification claim, the Trust Center link, and the
+ * confirmed certifications as three Carbon blocs on the page ground. SOC 2
+ * lives only in this certification row. The operational controls grid is its
+ * own section under the feature rail — see `WorkspaceControls`.
+ */
+
+const TRUST_CENTER_HREF = 'https://trust.sim.ai/'
+
+const OUTBOUND_LINK = {
+  target: '_blank',
+  rel: 'noopener noreferrer',
+} as const
+
+export function Security() {
+  return (
+    <section
+      id='security'
+      aria-labelledby='security-heading'
+      className={cn('flex w-full flex-col', LANDING_CONTENT_WIDTH, LANDING_GUTTER)}
+    >
+      <div className={cn('flex flex-col gap-20 max-sm:gap-10 max-lg:gap-14', HOME_INSET)}>
+        <div className='flex w-full items-start justify-between gap-10 max-sm:gap-5 max-xl:flex-col'>
+          <h2
+            id='security-heading'
+            className={cn(
+              'max-w-[16ch] text-balance text-[var(--text-primary)] md:w-1/2',
+              HOME_TYPE.h2
+            )}
+          >
+            Central governance for enterprise AI
+          </h2>
+          <div className='flex w-[min(28rem,40%)] flex-col items-start max-xl:w-full'>
+            <p className={cn('max-w-[34ch] text-pretty text-[var(--text-body)]', HOME_TYPE.lead)}>
+              Sim is one place to control who can build agents, what they can use, and how the
+              workspace runs.
+            </p>
+            <LandingCtaLink
+              href={TRUST_CENTER_HREF}
+              {...OUTBOUND_LINK}
+              variant='outline'
+              className='mt-5'
+            >
+              Trust Center
+            </LandingCtaLink>
+          </div>
+        </div>
+
+        <CertBlocs href={TRUST_CENTER_HREF} />
+      </div>
+    </section>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/shared/cli-graphic/cli-graphic.tsx b/apps/sim/app/(landing)/components/shared/cli-graphic/cli-graphic.tsx
new file mode 100644
index 00000000000..67daf216fd7
--- /dev/null
+++ b/apps/sim/app/(landing)/components/shared/cli-graphic/cli-graphic.tsx
@@ -0,0 +1,43 @@
+import { TerminalWindow } from '@sim/emcn/icons'
+import { FeatureGraphicShell } from '@/app/(landing)/enterprise/components/feature-graphics/feature-graphic-shell'
+import { FeaturePlatformPanel } from '@/app/(landing)/enterprise/components/feature-graphics/feature-platform-panel'
+
+/** A terminal session showing Claude Code using the supported Sim CLI commands. */
+export function CliGraphic() {
+  return (
+    <FeatureGraphicShell variant='portrait'>
+      <div className='absolute inset-[10px]'>
+        <FeaturePlatformPanel framed icon={TerminalWindow} title='Claude Code · Sim CLI'>
+          <div className='min-w-0 p-5 text-caption leading-[1.5]'>
+            <p className='mb-4 font-mono text-[var(--text-primary)]'>
+              <span className='mr-2 text-[var(--text-muted)]'>$</span>
+              sim login
+            </p>
+            <p className='rounded-md bg-[var(--surface-3)] px-3 py-2 text-[var(--text-body)]'>
+              Run my support agent in Sim.
+            </p>
+
+            <div className='mt-5 space-y-4 font-mono'>
+              <div className='flex gap-2'>
+                <span className='text-[var(--text-muted)]'>›</span>
+                <code className='min-w-0 text-[var(--text-primary)]'>sim workflows list</code>
+              </div>
+              <div className='flex gap-2'>
+                <span className='text-[var(--text-muted)]'>›</span>
+                <code className='min-w-0 text-[var(--text-primary)]'>
+                  {'sim workflows run \\'}
+                  <span className='block text-[var(--text-muted)]'>{'<workflowId> --manual'}</span>
+                </code>
+              </div>
+            </div>
+
+            <div className='mt-5 flex items-center gap-2 border-[var(--border)] border-t pt-4 text-[var(--text-secondary)]'>
+              <span className='size-1.5 shrink-0 rounded-full bg-[var(--text-secondary)]' />
+              <span>Run completed</span>
+            </div>
+          </div>
+        </FeaturePlatformPanel>
+      </div>
+    </FeatureGraphicShell>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/shared/code-window-graphic/code-window-graphic.tsx b/apps/sim/app/(landing)/components/shared/code-window-graphic/code-window-graphic.tsx
index 6f2f27e03fa..339d41860eb 100644
--- a/apps/sim/app/(landing)/components/shared/code-window-graphic/code-window-graphic.tsx
+++ b/apps/sim/app/(landing)/components/shared/code-window-graphic/code-window-graphic.tsx
@@ -2,7 +2,7 @@ import type { ReactNode } from 'react'
 import { cn } from '@sim/emcn'
 import styles from '@/app/(landing)/components/shared/code-window-graphic/code-window-graphic.module.css'
 import colorMixFallbacks from '@/app/(landing)/components/shared/color-mix-fallbacks/color-mix-fallbacks.module.css'
-import { FeatureGraphicShell } from '@/app/(landing)/enterprise/components/feature-graphics'
+import { FeatureGraphicShell } from '@/app/(landing)/enterprise/components/feature-graphics/feature-graphic-shell'
 
 /** One inline run of code text inside a {@link CodeWindowGraphic} line. */
 export interface CodeSegment {
@@ -65,7 +65,6 @@ export function CodeWindowGraphic({ icon, filename, lines }: CodeWindowGraphicPr
   return (
     <FeatureGraphicShell>
       <div
-        aria-hidden='true'
         className={cn(
           'absolute top-5 right-0 bottom-0 left-0 rounded-tl-xl border-t border-l',
           OUTLINE_INK
@@ -80,13 +79,19 @@ export function CodeWindowGraphic({ icon, filename, lines }: CodeWindowGraphicPr
           <span className='text-[var(--text-inverse)] text-base'>{filename}</span>
         </div>
 
-        <div className='space-y-2 p-4 font-mono text-[var(--text-muted-inverse)] text-caption leading-[1.7]'>
+        <div className='space-y-2 overflow-x-auto p-4 font-mono text-[var(--text-muted-inverse)] text-caption leading-[1.7] max-sm:text-[11px]'>
           {lines.map((line, index) => (
-            <div key={index} className={cn('flex gap-3', LINE_STEP_CLASSES[index])}>
-              <span className='w-3 select-none text-right text-[var(--text-muted-inverse)]'>
+            <div
+              key={index}
+              className={cn('flex w-max min-w-full gap-3', LINE_STEP_CLASSES[index])}
+            >
+              <span
+                aria-hidden='true'
+                className='w-3 shrink-0 select-none text-right text-[var(--text-muted-inverse)]'
+              >
                 {index + 1}
               </span>
-              <code className='truncate whitespace-pre'>
+              <code className='whitespace-pre'>
                 {line.map((segment, segmentIndex) => (
                   <span
                     key={segmentIndex}
diff --git a/apps/sim/app/(landing)/components/shared/edge-fade/edge-fade.module.css b/apps/sim/app/(landing)/components/shared/edge-fade/edge-fade.module.css
new file mode 100644
index 00000000000..b8373929592
--- /dev/null
+++ b/apps/sim/app/(landing)/components/shared/edge-fade/edge-fade.module.css
@@ -0,0 +1,110 @@
+/**
+ * The progressive blur ramp behind `EdgeFade`.
+ *
+ * One strip carries five stacked layers over the same box. Each blurs harder
+ * than the one below it and is masked to a window that sits one step closer to
+ * the screen edge, so backdrop filters compound where the windows overlap and
+ * the blur climbs from nothing at the inner edge to its full strength at the
+ * outer one - a ramp, not the single band a lone `backdrop-filter` gives.
+ *
+ * `--edge-fade-direction` is set by the strip and points from the inner edge
+ * (0%) to the screen edge (100%), so one set of window stops serves all four
+ * edges. Each window is three steps wide against a one-step stride, so it
+ * overlaps both of its neighbours and no step boundary can read as a band.
+ * Smoothness comes from that overlap rather than from the layer count, which
+ * is why five layers ramp as cleanly as eight for a fraction of the fill cost:
+ * every layer is a separate backdrop read, and the rail recomputes all of them
+ * on every frame it scrolls.
+ */
+
+.edgeTop {
+  --edge-fade-direction: to top;
+}
+
+.edgeBottom {
+  --edge-fade-direction: to bottom;
+}
+
+.edgeLeft {
+  --edge-fade-direction: to left;
+}
+
+.edgeRight {
+  --edge-fade-direction: to right;
+}
+
+.layer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  -webkit-backdrop-filter: blur(var(--edge-fade-blur));
+  backdrop-filter: blur(var(--edge-fade-blur));
+  -webkit-mask-image: linear-gradient(
+    var(--edge-fade-direction),
+    transparent var(--edge-fade-from),
+    #000 var(--edge-fade-in),
+    #000 var(--edge-fade-out),
+    transparent var(--edge-fade-to)
+  );
+  mask-image: linear-gradient(
+    var(--edge-fade-direction),
+    transparent var(--edge-fade-from),
+    #000 var(--edge-fade-in),
+    #000 var(--edge-fade-out),
+    transparent var(--edge-fade-to)
+  );
+}
+
+.layer0 {
+  --edge-fade-blur: 0.3px;
+  --edge-fade-from: 0%;
+  --edge-fade-in: 20%;
+  --edge-fade-out: 40%;
+  --edge-fade-to: 60%;
+}
+
+.layer1 {
+  --edge-fade-blur: 1px;
+  --edge-fade-from: 20%;
+  --edge-fade-in: 40%;
+  --edge-fade-out: 60%;
+  --edge-fade-to: 80%;
+}
+
+.layer2 {
+  --edge-fade-blur: 2px;
+  --edge-fade-from: 40%;
+  --edge-fade-in: 60%;
+  --edge-fade-out: 80%;
+  --edge-fade-to: 100%;
+}
+
+.layer3 {
+  --edge-fade-blur: 4px;
+  --edge-fade-from: 60%;
+  --edge-fade-in: 80%;
+  --edge-fade-out: 100%;
+  --edge-fade-to: 120%;
+}
+
+.layer4 {
+  --edge-fade-blur: 8px;
+  --edge-fade-from: 80%;
+  --edge-fade-in: 100%;
+  --edge-fade-out: 120%;
+  --edge-fade-to: 140%;
+}
+
+/**
+ * The ground wash that closes the strip. It paints above the blur so blurred
+ * content still dissolves into the page colour, and its mask squares off the
+ * gradient's own falloff so the wash has no visible end either. The colour
+ * itself is a Tailwind token on the element.
+ */
+.wash {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  -webkit-mask-image: linear-gradient(var(--edge-fade-direction), transparent, #000);
+  mask-image: linear-gradient(var(--edge-fade-direction), transparent, #000);
+}
diff --git a/apps/sim/app/(landing)/components/shared/edge-fade/edge-fade.tsx b/apps/sim/app/(landing)/components/shared/edge-fade/edge-fade.tsx
new file mode 100644
index 00000000000..0b7efbd08be
--- /dev/null
+++ b/apps/sim/app/(landing)/components/shared/edge-fade/edge-fade.tsx
@@ -0,0 +1,127 @@
+import { cn } from '@sim/emcn'
+import styles from '@/app/(landing)/components/shared/edge-fade/edge-fade.module.css'
+
+/** A side of a scene that can be softened into the ground behind it. */
+export type Edge = 'top' | 'bottom' | 'left' | 'right'
+
+const ALL_EDGES = ['top', 'bottom', 'left', 'right'] as const satisfies readonly Edge[]
+
+/**
+ * Shared chrome for every strip: it never takes the pointer and it rides above
+ * the scene but below any copy overlaid on the same stage (which sits at
+ * `z-10`). It carries no filter, mask, or opacity of its own - any of those
+ * would make it a backdrop root and leave its layers with nothing to blur.
+ */
+const STRIP = 'pointer-events-none absolute z-[5]'
+
+/** Where each strip sits against its positioned ancestor. */
+const PLACE = {
+  top: 'inset-x-0 top-0',
+  bottom: 'inset-x-0 bottom-0',
+  left: 'inset-y-0 left-0',
+  right: 'inset-y-0 right-0',
+} as const satisfies Record<Edge, string>
+
+/**
+ * The direction a strip's gradients run, as the module reads it: from the
+ * inner edge at 0% to the screen edge at 100%.
+ */
+const DIRECTION = {
+  top: styles.edgeTop,
+  bottom: styles.edgeBottom,
+  left: styles.edgeLeft,
+  right: styles.edgeRight,
+} as const satisfies Record<Edge, string>
+
+/**
+ * Which way the ground wash pours - strongest at the screen edge, gone by the
+ * inner one, so the scene dissolves into the page rather than only softening.
+ */
+const WASH = {
+  top: 'bg-gradient-to-b',
+  bottom: 'bg-gradient-to-t',
+  left: 'bg-gradient-to-r',
+  right: 'bg-gradient-to-l',
+} as const satisfies Record<Edge, string>
+
+/**
+ * The blur ramp, innermost layer first. Each step roughly doubles the last and
+ * is masked one step nearer the screen edge; the module holds the windows and
+ * explains why the count stops at five.
+ */
+const RAMP = [styles.layer0, styles.layer1, styles.layer2, styles.layer3, styles.layer4] as const
+
+/** Which dimension a strip's depth sets. */
+const AXIS = { top: 'y', bottom: 'y', left: 'x', right: 'x' } as const
+
+/**
+ * How far a strip reaches in from its edge.
+ *
+ * - `preview` - a compact nav preview keeps the fade within a 40px inset.
+ * - `stage` - a scene that owns its whole band has room to spare, so the fade
+ *   takes the depth it wants at every width.
+ * - `bleed` - a scene that reaches past its content column only as far as the
+ *   page lets it. Wide screens leave plenty of room, but the narrow tiers
+ *   leave exactly the page gutter, so the depth steps down to match it
+ *   (`max-lg` → `px-8`, `max-md` → `px-7`) and the fade never lands on the
+ *   column itself.
+ */
+const DEPTH = {
+  preview: { x: 'w-10', y: 'h-10' },
+  stage: { x: 'w-[72px] lg:w-[144px]', y: 'h-[96px] lg:h-[128px]' },
+  bleed: { x: 'w-[144px] max-md:w-7 max-lg:w-8', y: 'h-[128px] max-md:h-7 max-lg:h-8' },
+} as const
+
+/**
+ * The grounds a scene can dissolve into. `canvas` is the page's own ground;
+ * `paper` is the `#F8F8F8` band of the product-demo stage - the one literal
+ * here, paired with the same `--surface-2` the stage takes on the dark
+ * ground. `surface` matches the `--surface-3` ground of compact nav previews.
+ */
+const GROUND = {
+  surface: 'from-[var(--surface-3)]',
+  canvas: 'from-[var(--bg)]',
+  paper: 'from-[#F8F8F8] dark:from-[var(--surface-2)]',
+} as const
+
+interface EdgeFadeProps {
+  /** The ground the strips dissolve into - the surface the scene sits on. */
+  ground: keyof typeof GROUND
+  /** Which edges to soften. Every edge by default. */
+  edges?: readonly Edge[]
+  /** How far each strip reaches in from its edge. */
+  depth?: keyof typeof DEPTH
+}
+
+/**
+ * Blurred, fading edges on a scene: one strip per edge, softening and
+ * dissolving whatever the scene carries to that edge into the ground behind
+ * it, so content ends in a blur instead of a cut.
+ *
+ * The blur is progressive - all but sharp where the strip meets the scene,
+ * climbing to its full strength at the screen edge, with no onset to catch the
+ * eye. Five masked `backdrop-filter` layers compound into that ramp; the
+ * ground wash then pours over the top of them.
+ *
+ * The strips are absolutely positioned against the nearest positioned
+ * ancestor, so that ancestor decides the area they frame - a stage box for a
+ * scene that fills it, or a dedicated overlay box for a scene (a full-bleed
+ * rail) that reaches past its own layout column.
+ */
+export function EdgeFade({ ground, edges = ALL_EDGES, depth = 'stage' }: EdgeFadeProps) {
+  return (
+    <>
+      {edges.map((edge) => (
+        <div
+          key={edge}
+          className={cn(STRIP, DIRECTION[edge], PLACE[edge], DEPTH[depth][AXIS[edge]])}
+        >
+          {RAMP.map((layer) => (
+            <div key={layer} className={cn(styles.layer, layer)} />
+          ))}
+          <div className={cn(styles.wash, WASH[edge], GROUND[ground], 'to-transparent')} />
+        </div>
+      ))}
+    </>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/shared/edge-fade/index.ts b/apps/sim/app/(landing)/components/shared/edge-fade/index.ts
new file mode 100644
index 00000000000..a59cfb97e80
--- /dev/null
+++ b/apps/sim/app/(landing)/components/shared/edge-fade/index.ts
@@ -0,0 +1 @@
+export { type Edge, EdgeFade } from './edge-fade'
diff --git a/apps/sim/app/(landing)/components/shared/hero-loop-shell/hero-loop-shell.tsx b/apps/sim/app/(landing)/components/shared/hero-loop-shell/hero-loop-shell.tsx
index 5badb42cd2d..5a84c8785cb 100644
--- a/apps/sim/app/(landing)/components/shared/hero-loop-shell/hero-loop-shell.tsx
+++ b/apps/sim/app/(landing)/components/shared/hero-loop-shell/hero-loop-shell.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import type { ReactNode } from 'react'
+import { cn } from '@sim/emcn'
 import { PLATFORM_LOOP_DESIGN } from '@/app/(landing)/components/shared/platform-loop-constants'
 import { ResponsiveDesignStage } from '@/app/(landing)/components/shared/responsive-design-stage'
 import {
@@ -19,16 +20,16 @@ interface HeroLoopShellProps {
   workflows: readonly string[]
   /** Sidebar row to highlight; unset keeps New chat active. */
   activeItem?: EnterpriseSidebarProps['activeItem']
+  /** Native keeps product chrome at its real CSS size; scaled fits fixed captures. */
+  mode?: 'native' | 'scaled'
   /** The workspace pane's contents, rendered inside the inset pane gutter. */
   children: ReactNode
 }
 
 /**
- * The platform heroes' shared responsive stage. The whole preview remains
- * ordinary HTML, fitted from its fixed 1280x735 design space by
- * {@link ResponsiveDesignStage}; SVG is reserved for native workflow paths.
- * This keeps the sidebar and every animated descendant in one browser-safe
- * layout coordinate system across Safari, Chromium, and Firefox.
+ * Shared product shell for landing previews. Scaled mode preserves fixed
+ * product captures; native mode lets the homepage use real CSS dimensions so
+ * the 238px sidebar and 14px product type are never magnified.
  */
 export function HeroLoopShell({
   workspaceName = 'Brightwave',
@@ -36,8 +37,30 @@ export function HeroLoopShell({
   chats,
   workflows,
   activeItem,
+  mode = 'scaled',
   children,
 }: HeroLoopShellProps) {
+  const workspace = (
+    <>
+      <div data-preview-sidebar='' className={cn(mode === 'native' && 'max-md:hidden')}>
+        <EnterpriseSidebar
+          workspaceName={workspaceName}
+          profileName={profileName}
+          chats={chats}
+          workflows={workflows}
+          activeItem={activeItem}
+        />
+      </div>
+      <div className='h-full min-w-0 flex-1 py-[7px] pr-[8px] max-md:pl-[8px]'>{children}</div>
+    </>
+  )
+
+  if (mode === 'native') {
+    return (
+      <div className='absolute inset-0 flex overflow-hidden bg-[var(--surface-1)]'>{workspace}</div>
+    )
+  }
+
   return (
     <ResponsiveDesignStage
       width={PLATFORM_LOOP_DESIGN.width}
@@ -46,14 +69,7 @@ export function HeroLoopShell({
       className='pointer-events-none absolute inset-0'
       contentClassName='flex bg-[var(--surface-1)]'
     >
-      <EnterpriseSidebar
-        workspaceName={workspaceName}
-        profileName={profileName}
-        chats={chats}
-        workflows={workflows}
-        activeItem={activeItem}
-      />
-      <div className='h-full min-w-0 flex-1 py-[7px] pr-[8px]'>{children}</div>
+      {workspace}
     </ResponsiveDesignStage>
   )
 }
diff --git a/apps/sim/app/(landing)/components/shared/product-preview/index.ts b/apps/sim/app/(landing)/components/shared/product-preview/index.ts
new file mode 100644
index 00000000000..01e52a98348
--- /dev/null
+++ b/apps/sim/app/(landing)/components/shared/product-preview/index.ts
@@ -0,0 +1,2 @@
+export type { ProductPreviewKind } from './product-preview'
+export { ProductPreview } from './product-preview'
diff --git a/apps/sim/app/(landing)/components/shared/product-preview/product-preview.tsx b/apps/sim/app/(landing)/components/shared/product-preview/product-preview.tsx
new file mode 100644
index 00000000000..a73ede04589
--- /dev/null
+++ b/apps/sim/app/(landing)/components/shared/product-preview/product-preview.tsx
@@ -0,0 +1,99 @@
+'use client'
+
+import type { ComponentType } from 'react'
+import dynamic from 'next/dynamic'
+import { useLazyMount } from '@/app/(landing)/hooks/use-lazy-mount'
+
+/**
+ * The five Sim products with a live landing loop, keyed by product, plus the
+ * platform suite's two scenes: `agents` (Sim's chat building a workflow on
+ * the real stage) and `governance` (the organization's overview).
+ */
+export type ProductPreviewKind =
+  | 'workflows'
+  | 'knowledge'
+  | 'tables'
+  | 'files'
+  | 'logs'
+  | 'agents'
+  | 'governance'
+
+/**
+ * `ssr: false` deep imports so no loop's client bundle - the editor stage,
+ * the module tables, the third-party icon set they pull in - ships in the
+ * server-rendered HTML for sections that start below the fold. Each product's
+ * chunk loads only once its preview is actually requested.
+ */
+const PREVIEWS: Record<ProductPreviewKind, ComponentType> = {
+  workflows: dynamic(
+    () =>
+      import('@/app/(landing)/workflows/components/workflows-editor-loop').then(
+        (mod) => mod.WorkflowsEditorLoop
+      ),
+    { ssr: false }
+  ),
+  knowledge: dynamic(
+    () =>
+      import('@/app/(landing)/knowledge/components/knowledge-hero-loop').then(
+        (mod) => mod.KnowledgeHeroLoop
+      ),
+    { ssr: false }
+  ),
+  tables: dynamic(
+    () =>
+      import('@/app/(landing)/tables/components/tables-hero-loop').then(
+        (mod) => mod.TablesHeroLoop
+      ),
+    { ssr: false }
+  ),
+  files: dynamic(
+    () =>
+      import('@/app/(landing)/files/components/files-hero-loop').then((mod) => mod.FilesHeroLoop),
+    { ssr: false }
+  ),
+  logs: dynamic(
+    () => import('@/app/(landing)/logs/components/logs-hero-loop').then((mod) => mod.LogsHeroLoop),
+    { ssr: false }
+  ),
+  agents: dynamic(
+    () =>
+      import('@/app/(landing)/components/platform-suite/components/build-agents-loop').then(
+        (mod) => mod.BuildAgentsLoop
+      ),
+    { ssr: false }
+  ),
+  governance: dynamic(
+    () =>
+      import('@/app/(landing)/components/platform-suite/components/governance-loop').then(
+        (mod) => mod.GovernanceLoop
+      ),
+    { ssr: false }
+  ),
+}
+
+interface ProductPreviewProps {
+  /** Which product's live loop to mount. */
+  kind: ProductPreviewKind
+}
+
+/**
+ * Client mount for one product's live platform loop - the same loops each
+ * product page runs in its hero, reused on the homepage so every preview of
+ * a Sim product is the product's own UI rather than a capture.
+ *
+ * Gated on viewport proximity via {@link useLazyMount} so a below-the-fold
+ * window pulls neither the loop's JS nor its timers into the initial
+ * homepage load. The host reserves the window's dimensions, so the empty
+ * mount holds the slot with zero layout shift. Swapping `kind` on a mounted
+ * preview swaps the loop in place; the viewport gate is already open.
+ */
+export function ProductPreview({ kind }: ProductPreviewProps) {
+  const { ref, inView } = useLazyMount('400px')
+  const Loop = PREVIEWS[kind]
+
+  return (
+    <div ref={ref} className='absolute inset-0'>
+      {inView && <Loop />}
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/shared/product-window/index.ts b/apps/sim/app/(landing)/components/shared/product-window/index.ts
new file mode 100644
index 00000000000..d1455a1aff9
--- /dev/null
+++ b/apps/sim/app/(landing)/components/shared/product-window/index.ts
@@ -0,0 +1 @@
+export { ProductWindow } from './product-window'
diff --git a/apps/sim/app/(landing)/components/shared/product-window/product-window.test.tsx b/apps/sim/app/(landing)/components/shared/product-window/product-window.test.tsx
new file mode 100644
index 00000000000..70fab58316f
--- /dev/null
+++ b/apps/sim/app/(landing)/components/shared/product-window/product-window.test.tsx
@@ -0,0 +1,30 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('@sim/emcn', () => ({
+  cn: (...values: Array<string | false | undefined>) => values.filter(Boolean).join(' '),
+}))
+vi.mock('@/app/(landing)/components/shared/product-preview', () => ({
+  ProductPreview: () => (
+    <>
+      <textarea aria-label='Preview composer' />
+      <button type='button'>Run workflow</button>
+    </>
+  ),
+}))
+
+import { ProductWindow } from '@/app/(landing)/components/shared/product-window/product-window'
+
+describe('ProductWindow accessibility', () => {
+  it('isolates reused product controls inside an inert decorative region', () => {
+    const host = document.createElement('div')
+    host.innerHTML = renderToStaticMarkup(<ProductWindow kind='agents' />)
+
+    for (const control of host.querySelectorAll('textarea, button')) {
+      expect(control.closest('[inert][aria-hidden="true"]')).toBe(host.firstElementChild)
+    }
+  })
+})
diff --git a/apps/sim/app/(landing)/components/shared/product-window/product-window.tsx b/apps/sim/app/(landing)/components/shared/product-window/product-window.tsx
new file mode 100644
index 00000000000..cd2ec8f7fed
--- /dev/null
+++ b/apps/sim/app/(landing)/components/shared/product-window/product-window.tsx
@@ -0,0 +1,53 @@
+import { cn } from '@sim/emcn'
+import {
+  LANDING_STAGE_WINDOW_RADIUS,
+  LANDING_WINDOW_SHADOW,
+} from '@/app/(landing)/components/landing-layout'
+import {
+  ProductPreview,
+  type ProductPreviewKind,
+} from '@/app/(landing)/components/shared/product-preview'
+
+interface ProductWindowProps {
+  /** Which Sim product's live loop fills the window. */
+  kind: ProductPreviewKind
+  /**
+   * Placement inside the host frame - `top-*` / `left-*` insets and a width,
+   * typically wider than the frame so the window bleeds off its right and
+   * bottom edges. Never chrome.
+   */
+  className?: string
+}
+
+/**
+ * The homepage's elevated product window: the hero window's exact chrome
+ * (8px radius, `--surface-1` fill, the hairline-ring + layered soft shadow)
+ * locked to the live loops' 1280x735 design aspect, holding one product's
+ * {@link ProductPreview}.
+ *
+ * It is always placed INSIDE a grayscale placement frame, offset from the
+ * frame's top-left corner and oversized so its right and bottom edges run
+ * past the frame's clip - the enterprise sites this page is modeled on
+ * present product UI as a zoomed-in peek at part of the product, not as a
+ * complete miniature. The aspect lock means the loop's responsive stage
+ * always fills the window edge to edge at one uniform scale.
+ *
+ * Decorative: the window is inert and `aria-hidden` so the copy beside it
+ * stays the only accessible content and preview controls cannot take focus.
+ */
+export function ProductWindow({ kind, className }: ProductWindowProps) {
+  return (
+    <div
+      aria-hidden='true'
+      inert
+      className={cn(
+        'absolute aspect-[1280/735] overflow-hidden bg-[var(--surface-1)]',
+        LANDING_STAGE_WINDOW_RADIUS,
+        LANDING_WINDOW_SHADOW,
+        className
+      )}
+    >
+      <ProductPreview kind={kind} />
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/shared/two-block-workflow-preview/index.ts b/apps/sim/app/(landing)/components/shared/two-block-workflow-preview/index.ts
new file mode 100644
index 00000000000..02425fa82e8
--- /dev/null
+++ b/apps/sim/app/(landing)/components/shared/two-block-workflow-preview/index.ts
@@ -0,0 +1 @@
+export { TwoBlockWorkflowPreview } from './two-block-workflow-preview'
diff --git a/apps/sim/app/(landing)/components/shared/two-block-workflow-preview/two-block-workflow-preview.tsx b/apps/sim/app/(landing)/components/shared/two-block-workflow-preview/two-block-workflow-preview.tsx
new file mode 100644
index 00000000000..14bca217d08
--- /dev/null
+++ b/apps/sim/app/(landing)/components/shared/two-block-workflow-preview/two-block-workflow-preview.tsx
@@ -0,0 +1,68 @@
+'use client'
+
+import { StageBlockCard } from '@/app/(landing)/components/hero/components/hero-platform-loop/stage-block-card'
+import {
+  type BlockDef,
+  horizontalHandleAnchors,
+  smoothStep,
+} from '@/app/(landing)/components/hero/components/hero-visual/workflow-data'
+import { EdgeFade } from '@/app/(landing)/components/shared/edge-fade'
+
+interface TwoBlockWorkflowPreviewProps {
+  /** The upstream card, drawn at the fixed left slot. */
+  source: BlockDef
+  /** The downstream card, drawn selected at the fixed right slot. */
+  target: BlockDef
+}
+
+/**
+ * Two production block cards wired left to right on a centered 640×360
+ * stage, with the edge entering from the left gutter and leaving through the
+ * right one so the flow reads as a fragment of a longer workflow. The cards
+ * sit at the slots their `x`/`y` describe (24/72 and 340/180).
+ */
+export function TwoBlockWorkflowPreview({ source, target }: TwoBlockWorkflowPreviewProps) {
+  const sourceAnchors = horizontalHandleAnchors(source)
+  const targetAnchors = horizontalHandleAnchors(target)
+
+  return (
+    <div className='absolute inset-0 isolate overflow-hidden bg-[var(--bg)]'>
+      <div className='-translate-x-1/2 max-sm:-translate-x-[70%] absolute top-8 left-1/2 h-[360px] w-[640px]'>
+        <svg
+          aria-hidden='true'
+          className='absolute inset-0 size-full'
+          viewBox='0 0 640 360'
+          fill='none'
+        >
+          <path
+            d={`M0 ${sourceAnchors.in.y} H${sourceAnchors.in.x}`}
+            stroke='var(--border)'
+            strokeWidth='1.5'
+          />
+          <path
+            d={smoothStep(
+              sourceAnchors.out.x,
+              sourceAnchors.out.y,
+              targetAnchors.in.x,
+              targetAnchors.in.y
+            )}
+            stroke='var(--text-icon)'
+            strokeWidth='1.5'
+          />
+          <path
+            d={`M${targetAnchors.out.x} ${targetAnchors.out.y} H640`}
+            stroke='var(--border)'
+            strokeWidth='1.5'
+          />
+        </svg>
+        <div className='absolute top-[72px] left-6'>
+          <StageBlockCard block={source} orientation='horizontal' decorative />
+        </div>
+        <div className='absolute top-[180px] left-[340px]'>
+          <StageBlockCard block={target} orientation='horizontal' selected decorative />
+        </div>
+      </div>
+      <EdgeFade ground='canvas' edges={['left', 'right']} depth='preview' />
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/site-structured-data/site-structured-data.tsx b/apps/sim/app/(landing)/components/site-structured-data/site-structured-data.tsx
index c0bd3372cb7..a4b8fa24914 100644
--- a/apps/sim/app/(landing)/components/site-structured-data/site-structured-data.tsx
+++ b/apps/sim/app/(landing)/components/site-structured-data/site-structured-data.tsx
@@ -11,7 +11,7 @@ const SITE_JSON_LD = {
       alternateName: 'Sim Studio',
       legalName: 'Sim, Inc',
       description:
-        'Sim is the open-source AI workspace where teams build, deploy, and manage AI agents. Connect 1,000+ integrations and every major LLM to create agents that automate real work.',
+        'Sim is the open-source AI workspace where teams build, deploy, and manage AI agents. Connect hundreds of integrations and every major LLM to create agents that automate real work.',
       url: SITE_URL,
       foundingDate: '2025',
       address: {
@@ -60,7 +60,7 @@ const SITE_JSON_LD = {
       url: SITE_URL,
       name: 'Sim, The AI Workspace | Build, Deploy & Manage AI Agents',
       description:
-        'Sim is the open-source AI workspace where teams build, deploy, and manage AI agents. Connect 1,000+ integrations and every major LLM. Join 100,000+ builders.',
+        'Sim is the open-source AI workspace where teams build, deploy, and manage AI agents. Connect hundreds of integrations and every major LLM. Join 100,000+ builders.',
       publisher: { '@id': `${SITE_URL}#organization` },
       inLanguage: 'en-US',
     },
diff --git a/apps/sim/app/(landing)/components/solutions-page/components/solutions-card-row/components/solutions-card-row-header/solutions-card-row-header.tsx b/apps/sim/app/(landing)/components/solutions-page/components/solutions-card-row/components/solutions-card-row-header/solutions-card-row-header.tsx
index 35cdff51c39..dc1ba9a7132 100644
--- a/apps/sim/app/(landing)/components/solutions-page/components/solutions-card-row/components/solutions-card-row-header/solutions-card-row-header.tsx
+++ b/apps/sim/app/(landing)/components/solutions-page/components/solutions-card-row/components/solutions-card-row-header/solutions-card-row-header.tsx
@@ -25,11 +25,11 @@ export function SolutionsCardRowHeader({ row, headingId }: SolutionsCardRowHeade
       >
         {row.title}
       </h2>
-      <p className='w-full min-w-0 max-w-[48ch] text-pretty text-[15px] text-[var(--text-muted)] leading-[1.6]'>
+      <p className='w-full min-w-0 max-w-[48ch] text-pretty text-[15px] text-[var(--text-secondary)] leading-[1.6]'>
         {row.subtitle}
       </p>
       {row.note ? (
-        <p className='w-full min-w-0 max-w-[48ch] text-pretty text-[15px] text-[var(--text-muted)] leading-[1.6]'>
+        <p className='w-full min-w-0 max-w-[48ch] text-pretty text-[15px] text-[var(--text-secondary)] leading-[1.6]'>
           {row.note}
         </p>
       ) : null}
diff --git a/apps/sim/app/(landing)/components/solutions-page/components/solutions-card-row/components/solutions-pill-cta/solutions-pill-cta.tsx b/apps/sim/app/(landing)/components/solutions-page/components/solutions-card-row/components/solutions-pill-cta/solutions-pill-cta.tsx
index 48935402b55..b50a8ac4dd7 100644
--- a/apps/sim/app/(landing)/components/solutions-page/components/solutions-card-row/components/solutions-pill-cta/solutions-pill-cta.tsx
+++ b/apps/sim/app/(landing)/components/solutions-page/components/solutions-card-row/components/solutions-pill-cta/solutions-pill-cta.tsx
@@ -1,47 +1,33 @@
 'use client'
 
-import { ChipLink } from '@sim/emcn'
 import { ArrowRight } from '@sim/emcn/icons'
+import { LandingCtaLink } from '@/app/(landing)/components/landing-cta-link'
 import type { SolutionsPillCta as SolutionsPillCtaConfig } from '@/app/(landing)/components/solutions-page/types'
 
 /**
- * The card-row pill CTA - a single primary `ChipLink` with a trailing arrow,
- * matching the reference image's "Learn about automations →". The chip owns its
- * own chrome and spacing; this component only wires the label, the href, and the
+ * The card-row pill CTA - a single primary `LandingCtaLink` with a trailing arrow,
+ * matching the reference image's "Learn about automations →". The shared landing CTA owns its
+ * pill geometry and chip colors; this component only wires the label, the href, and the
  * arrow icon, exposing no layout knobs.
  *
  * Client leaf: `ChipLink` is a Client Component and its `rightIcon` is a
  * component reference (`ArrowRight`), which cannot cross the server→client
  * boundary as a prop - so the icon must be wired from client code, exactly as the
- * navbar's `NavMenuChip` does. The props it receives ({@link SolutionsPillCtaConfig})
+ * navbar's `NavMenuCluster` does. The props it receives ({@link SolutionsPillCtaConfig})
  * are plain serializable data, so the surrounding layout stays Server Components.
  *
- * Link safety: an external href (absolute `http(s)://`) renders with
- * `rel='noopener noreferrer'` and `target='_blank'`; an internal href routes
- * through the Next `<Link>` that `ChipLink` is built on - so every link is
- * crawlable and safe with no per-page ceremony.
+ * Link safety (external `rel`/`target`, internal Next `<Link>`) is owned by
+ * `LandingCtaLink`, so every link is crawlable and safe with no per-page ceremony.
  */
 
 interface SolutionsPillCtaProps {
   cta: SolutionsPillCtaConfig
 }
 
-/** Returns true for absolute external URLs (http/https), which need rel/target hardening. */
-function isExternalHref(href: string): boolean {
-  return /^https?:\/\//.test(href)
-}
-
 export function SolutionsPillCta({ cta }: SolutionsPillCtaProps) {
-  const external = isExternalHref(cta.href)
-
   return (
-    <ChipLink
-      variant='primary'
-      href={cta.href}
-      rightIcon={ArrowRight}
-      {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
-    >
+    <LandingCtaLink size='compact' href={cta.href} rightIcon={ArrowRight}>
       {cta.label}
-    </ChipLink>
+    </LandingCtaLink>
   )
 }
diff --git a/apps/sim/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-code-example.tsx b/apps/sim/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-code-example.tsx
new file mode 100644
index 00000000000..780e11c5ac4
--- /dev/null
+++ b/apps/sim/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-code-example.tsx
@@ -0,0 +1,49 @@
+import { cn } from '@sim/emcn'
+import { TerminalWindow } from '@sim/emcn/icons'
+import { LandingCtaLink } from '@/app/(landing)/components/landing-cta-link'
+import { HOME_INSET, LANDING_GUTTER } from '@/app/(landing)/components/landing-layout'
+import { CodeWindowGraphic } from '@/app/(landing)/components/shared/code-window-graphic'
+import type { SolutionsProductCodeExampleConfig } from '@/app/(landing)/components/solutions-page/types'
+
+interface ProductCodeExampleProps {
+  example: SolutionsProductCodeExampleConfig
+}
+
+/** Server-rendered code keeps the original editor graphic without another interactive island. */
+export function ProductCodeExample({ example }: ProductCodeExampleProps) {
+  return (
+    <section aria-labelledby='cli-heading' className={LANDING_GUTTER}>
+      <div
+        className={cn(
+          HOME_INSET,
+          'grid grid-cols-2 items-center gap-16 py-24 max-sm:gap-8 max-sm:py-12 max-md:grid-cols-1 max-lg:gap-10 max-lg:py-20'
+        )}
+      >
+        <div>
+          <p className='mb-5 text-[var(--text-secondary)] text-base'>From your terminal</p>
+          <h2
+            id='cli-heading'
+            className='max-w-[18ch] text-balance font-normal text-[48px] text-[var(--text-primary)] leading-[1.05] tracking-[-0.025em] max-sm:text-[32px] max-lg:text-[40px]'
+          >
+            {example.title}
+          </h2>
+          <p className='mt-5 max-w-[42ch] text-[var(--text-body)] text-lg leading-relaxed max-sm:text-md'>
+            {example.description}
+          </p>
+          <div className='mt-7'>
+            <LandingCtaLink href='https://docs.sim.ai/cli' variant='outline' withArrow>
+              Explore the CLI
+            </LandingCtaLink>
+          </div>
+        </div>
+        <div className='min-w-0 overflow-hidden rounded-xl bg-[var(--text-secondary)] pt-8 pl-8 max-sm:pt-5 max-sm:pl-5'>
+          <CodeWindowGraphic
+            icon={<TerminalWindow className='size-[14px] text-[var(--text-muted-inverse)]' />}
+            filename={example.filename}
+            lines={example.commands.map((command) => [{ text: command, tone: 'primary' }])}
+          />
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-feature/index.ts b/apps/sim/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-feature/index.ts
new file mode 100644
index 00000000000..cc55858acb7
--- /dev/null
+++ b/apps/sim/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-feature/index.ts
@@ -0,0 +1 @@
+export { ProductFeature } from './product-feature'
diff --git a/apps/sim/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-feature/product-feature.tsx b/apps/sim/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-feature/product-feature.tsx
new file mode 100644
index 00000000000..6247c8454c1
--- /dev/null
+++ b/apps/sim/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-feature/product-feature.tsx
@@ -0,0 +1,52 @@
+import { LandingCtaLink } from '@/app/(landing)/components/landing-cta-link'
+import { EdgeFade } from '@/app/(landing)/components/shared/edge-fade'
+import type { SolutionsProductFeatureConfig } from '@/app/(landing)/components/solutions-page/types'
+
+interface ProductFeatureProps {
+  feature: SolutionsProductFeatureConfig
+}
+
+/** A floating product detail and a small caption, separated only by the shared grid rules. */
+export function ProductFeature({ feature }: ProductFeatureProps) {
+  return (
+    <section
+      id={feature.id}
+      aria-labelledby={`${feature.id}-heading`}
+      className='min-w-0 scroll-mt-32 border-[var(--border)] border-t border-b even:border-l max-md:even:border-l-0'
+    >
+      <div
+        aria-hidden='true'
+        inert
+        data-product-feature-visual={feature.id}
+        className='pointer-events-none relative isolate h-[460px] select-none overflow-hidden [container-type:inline-size] max-sm:h-[380px] max-xl:h-[420px]'
+      >
+        <div className='relative z-0 size-full'>{feature.visual}</div>
+        <EdgeFade ground='canvas' edges={['right']} depth='preview' />
+        <EdgeFade ground='canvas' edges={['bottom']} depth='stage' />
+      </div>
+      <div className='px-8 pt-5 pb-9 max-sm:px-0 max-sm:pt-2 max-sm:pb-7'>
+        <h2
+          id={`${feature.id}-heading`}
+          className='text-balance font-normal text-[15px] text-[var(--text-primary)] leading-6'
+        >
+          {feature.title}
+        </h2>
+        <p className='mt-1 max-w-[44ch] text-balance text-[15px] text-[var(--text-secondary)] leading-6'>
+          {feature.description}
+        </p>
+        {feature.cta && (
+          <div className='mt-4'>
+            <LandingCtaLink
+              href={feature.cta.href}
+              variant='outline'
+              withArrow
+              className='max-w-full'
+            >
+              {feature.cta.label}
+            </LandingCtaLink>
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-hero-preview/index.ts b/apps/sim/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-hero-preview/index.ts
new file mode 100644
index 00000000000..a23d138887a
--- /dev/null
+++ b/apps/sim/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-hero-preview/index.ts
@@ -0,0 +1 @@
+export { ProductHeroPreview } from './product-hero-preview'
diff --git a/apps/sim/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-hero-preview/product-hero-preview.tsx b/apps/sim/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-hero-preview/product-hero-preview.tsx
new file mode 100644
index 00000000000..88f1cd56452
--- /dev/null
+++ b/apps/sim/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-hero-preview/product-hero-preview.tsx
@@ -0,0 +1,61 @@
+'use client'
+
+import { useState } from 'react'
+import { cn } from '@sim/emcn'
+import { EnterpriseMenuPreview } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/enterprise-menu-preview'
+import { FilesMenuPreview } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/files-menu-preview'
+import { KnowledgeMenuPreview } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/knowledge-menu-preview'
+import { LogsMenuPreview } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/logs-menu-preview'
+import { OverviewMenuPreview } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/overview-menu-preview'
+import { TablesMenuPreview } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/tables-menu-preview'
+import { WorkflowMenuPreview } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/workflow-menu-preview'
+
+const PREVIEWS = {
+  overview: OverviewMenuPreview,
+  enterprise: EnterpriseMenuPreview,
+  workflows: WorkflowMenuPreview,
+  knowledge: KnowledgeMenuPreview,
+  files: FilesMenuPreview,
+  tables: TablesMenuPreview,
+  logs: LogsMenuPreview,
+} as const
+
+const HERO_ENTRANCE_CLASSES =
+  'animate-in fade-in-0 fill-mode-backwards animation-duration-[160ms] ease-out motion-safe:animation-duration-[520ms] motion-safe:slide-in-from-bottom-3 motion-safe:zoom-in-[0.985] motion-safe:ease-[cubic-bezier(0.23,1,0.32,1)]'
+
+interface ProductHeroPreviewProps {
+  product: keyof typeof PREVIEWS
+}
+
+/** Feature-page heroes render the same UI as the corresponding navigation preview. */
+export function ProductHeroPreview({ product }: ProductHeroPreviewProps) {
+  const Preview = PREVIEWS[product]
+  const [workflowReady, setWorkflowReady] = useState(false)
+  const handleWorkflowReady = () => setWorkflowReady(true)
+  const ready = product !== 'workflows' || workflowReady
+
+  return (
+    <div
+      data-product-hero={product}
+      className={cn(
+        'relative isolate h-[420px] overflow-hidden max-lg:h-[400px]',
+        product !== 'logs' && 'max-sm:h-[320px]'
+      )}
+    >
+      <div
+        data-product-hero-reveal
+        data-ready={ready}
+        className={cn(
+          'absolute inset-0',
+          ready ? HERO_ENTRANCE_CLASSES : 'pointer-events-none opacity-0'
+        )}
+      >
+        {product === 'workflows' ? (
+          <WorkflowMenuPreview layout='hero' onReady={handleWorkflowReady} />
+        ) : (
+          <Preview layout='hero' />
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-showcase/index.ts b/apps/sim/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-showcase/index.ts
new file mode 100644
index 00000000000..587cabd7ae9
--- /dev/null
+++ b/apps/sim/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-showcase/index.ts
@@ -0,0 +1 @@
+export { ProductShowcase } from './product-showcase'
diff --git a/apps/sim/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-showcase/product-showcase.tsx b/apps/sim/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-showcase/product-showcase.tsx
new file mode 100644
index 00000000000..9193c8c7a12
--- /dev/null
+++ b/apps/sim/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-showcase/product-showcase.tsx
@@ -0,0 +1,81 @@
+import type { ReactNode } from 'react'
+import { cn } from '@sim/emcn'
+import { HeroCta } from '@/app/(landing)/components/hero-cta'
+import { LandingCtaLink } from '@/app/(landing)/components/landing-cta-link'
+import { HOME_INSET, LANDING_GUTTER } from '@/app/(landing)/components/landing-layout'
+import { EdgeFade } from '@/app/(landing)/components/shared/edge-fade'
+import type { SolutionsProductFeatureConfig } from '@/app/(landing)/components/solutions-page/types'
+
+interface ProductShowcaseProps {
+  feature: SolutionsProductFeatureConfig
+  description: ReactNode
+}
+
+/**
+ * A split introduction opens into a broad product scene. Native scroll areas
+ * chain vertically to the page; portaled menus and dialogs retain their own containment.
+ */
+export function ProductShowcase({ feature, description }: ProductShowcaseProps) {
+  return (
+    <section id={feature.id} aria-labelledby={`${feature.id}-heading`} className='scroll-mt-24'>
+      <div className={LANDING_GUTTER}>
+        <div
+          className={cn(
+            HOME_INSET,
+            'grid grid-cols-2 gap-16 pt-24 max-sm:gap-5 max-sm:pt-12 max-md:grid-cols-1 max-lg:gap-10 max-lg:pt-20',
+            feature.visualSize === 'compact'
+              ? 'pb-16 max-sm:pb-8 max-lg:pb-12'
+              : 'pb-24 max-sm:pb-12 max-lg:pb-20'
+          )}
+        >
+          <h2
+            id={`${feature.id}-heading`}
+            className='max-w-[18ch] text-balance font-normal text-[48px] text-[var(--text-primary)] leading-[1.05] tracking-[-0.025em] max-sm:text-[32px] max-lg:text-[40px]'
+          >
+            {feature.title}
+          </h2>
+          <div>
+            <p className='max-w-[36ch] text-balance text-[24px] text-[var(--text-body)] leading-[1.4] max-sm:text-[18px] max-lg:text-[20px]'>
+              {description}
+            </p>
+            <div className='mt-7'>
+              <HeroCta secondaryLabel='Start building' />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        data-product-feature-visual={feature.id}
+        className={cn(
+          'relative isolate mx-3 overflow-hidden bg-[var(--bg)] [container-type:inline-size] max-sm:mx-0 [&_*]:overscroll-y-auto',
+          feature.visualSize === 'compact'
+            ? 'h-[560px] max-sm:h-[420px] max-lg:h-[480px]'
+            : 'h-[680px] max-sm:h-[500px] max-lg:h-[560px]'
+        )}
+      >
+        <div className='relative size-full'>{feature.visual}</div>
+        <EdgeFade ground='canvas' edges={['bottom']} depth='stage' />
+      </div>
+      <div className={LANDING_GUTTER}>
+        <div className={cn(HOME_INSET, 'pt-5 pb-10 max-sm:pt-2 max-sm:pb-7')}>
+          <p className='text-[15px] text-[var(--text-primary)] leading-6'>{feature.label}</p>
+          <p className='mt-1 max-w-[56ch] text-balance text-[15px] text-[var(--text-secondary)] leading-6'>
+            {feature.description}
+          </p>
+          {feature.cta && (
+            <div className='mt-4'>
+              <LandingCtaLink
+                href={feature.cta.href}
+                variant='outline'
+                withArrow
+                className='max-w-full'
+              >
+                {feature.cta.label}
+              </LandingCtaLink>
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/solutions-page/components/solutions-product-page/index.ts b/apps/sim/app/(landing)/components/solutions-page/components/solutions-product-page/index.ts
new file mode 100644
index 00000000000..2c4448fa806
--- /dev/null
+++ b/apps/sim/app/(landing)/components/solutions-page/components/solutions-product-page/index.ts
@@ -0,0 +1 @@
+export { SolutionsProductPage } from './solutions-product-page'
diff --git a/apps/sim/app/(landing)/components/solutions-page/components/solutions-product-page/solutions-product-page.tsx b/apps/sim/app/(landing)/components/solutions-page/components/solutions-product-page/solutions-product-page.tsx
new file mode 100644
index 00000000000..1eccabd8645
--- /dev/null
+++ b/apps/sim/app/(landing)/components/solutions-page/components/solutions-product-page/solutions-product-page.tsx
@@ -0,0 +1,60 @@
+import { cn } from '@sim/emcn'
+import {
+  HOME_INSET,
+  LANDING_CONTENT_WIDTH,
+  LANDING_GUTTER,
+} from '@/app/(landing)/components/landing-layout'
+import { ProductCodeExample } from '@/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-code-example'
+import { ProductFeature } from '@/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-feature'
+import { ProductShowcase } from '@/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-showcase'
+import { SolutionsStructuredData } from '@/app/(landing)/components/solutions-page/components/solutions-structured-data'
+import type { SolutionsProductPageConfig } from '@/app/(landing)/components/solutions-page/types'
+
+interface SolutionsProductPageProps {
+  config: SolutionsProductPageConfig
+}
+
+/** Wide product illustrations share an open canvas, with compact captions on a fine grid. */
+export function SolutionsProductPage({ config }: SolutionsProductPageProps) {
+  const [showcase, ...features] = config.features
+
+  return (
+    <>
+      <SolutionsStructuredData config={config} />
+      <main id='main-content' className={LANDING_CONTENT_WIDTH}>
+        <section
+          aria-labelledby='product-heading'
+          className='border-[var(--border)] border-b pb-24 max-sm:pb-14 max-lg:pb-20'
+        >
+          <div className='px-3 max-sm:px-0'>{config.hero.visual}</div>
+          <div className={LANDING_GUTTER}>
+            <div className={cn(HOME_INSET, 'pt-5 text-center max-sm:pt-0')}>
+              <p className='sr-only'>{config.hero.summary}</p>
+              <p className='mb-6 text-[15px] text-[var(--text-secondary)]'>Sim / {config.module}</p>
+              <h1
+                id='product-heading'
+                className='mx-auto max-w-[20ch] text-balance font-normal text-[80px] text-[var(--text-primary)] leading-[1.02] tracking-[-0.035em] max-sm:text-[44px] max-lg:text-[64px]'
+              >
+                {config.hero.heading}
+              </h1>
+            </div>
+          </div>
+        </section>
+        {showcase && <ProductShowcase feature={showcase} description={config.hero.description} />}
+        <div className={LANDING_GUTTER}>
+          <div
+            className={cn(
+              HOME_INSET,
+              'grid grid-cols-2 border-[var(--border)] border-x max-sm:border-x-0 max-md:grid-cols-1'
+            )}
+          >
+            {features.map((feature) => (
+              <ProductFeature key={feature.id} feature={feature} />
+            ))}
+          </div>
+        </div>
+        {config.codeExample && <ProductCodeExample example={config.codeExample} />}
+      </main>
+    </>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/solutions-page/components/solutions-structured-data/solutions-structured-data.test.tsx b/apps/sim/app/(landing)/components/solutions-page/components/solutions-structured-data/solutions-structured-data.test.tsx
new file mode 100644
index 00000000000..874a64aecf4
--- /dev/null
+++ b/apps/sim/app/(landing)/components/solutions-page/components/solutions-structured-data/solutions-structured-data.test.tsx
@@ -0,0 +1,73 @@
+/**
+ * @vitest-environment node
+ */
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('@/lib/core/utils/urls', () => ({ SITE_URL: 'https://sim.ai' }))
+
+import { SolutionsStructuredData } from '@/app/(landing)/components/solutions-page/components/solutions-structured-data/solutions-structured-data'
+import type {
+  SolutionsPageConfig,
+  SolutionsProductPageConfig,
+} from '@/app/(landing)/components/solutions-page/types'
+
+const IDENTITY = {
+  module: 'Knowledge Base',
+  path: '/knowledge',
+  seoDescription: 'Search company knowledge with Sim.',
+  hero: {
+    heading: 'Knowledge for your agents',
+    description: 'Search company knowledge with Sim.',
+    summary: 'Sim connects documents to AI agents.',
+    visual: null,
+  },
+}
+
+function readGraph(config: SolutionsPageConfig | SolutionsProductPageConfig) {
+  const html = renderToStaticMarkup(<SolutionsStructuredData config={config} />)
+  return JSON.parse(html.replace(/^<script[^>]*>/, '').replace(/<\/script>$/, ''))['@graph']
+}
+
+describe('SolutionsStructuredData', () => {
+  it('preserves existing solution feature lists, canonical identity, and paid-only offers', () => {
+    const config: SolutionsPageConfig = {
+      ...IDENTITY,
+      offersFreeTier: false,
+      rows: ['first', 'second'].map((id) => ({
+        id,
+        title: id,
+        subtitle: 'Manage sources.',
+        cta: { label: 'Explore', href: '/knowledge' },
+        cards: [{ title: 'Connect sources', description: 'Sync documents.', visual: null }],
+      })),
+    }
+    const graph = readGraph(config)
+    expect(graph[0]).toMatchObject({
+      url: 'https://sim.ai/knowledge',
+      description: IDENTITY.seoDescription,
+    })
+    expect(graph[2].featureList).toEqual(['Connect sources'])
+    expect(graph[2]).not.toHaveProperty('offers')
+  })
+
+  it('derives product-page features from the visible stories and keeps the free tier', () => {
+    const config: SolutionsProductPageConfig = {
+      ...IDENTITY,
+      features: ['Connect sources', 'Retrieve context'].map((title, index) => ({
+        id: `feature-${index}`,
+        label: title,
+        title,
+        description: title,
+        visual: null,
+      })),
+    }
+    const graph = readGraph(config)
+    expect(graph[2].featureList).toEqual(['Connect sources', 'Retrieve context'])
+    expect(graph[2].offers).toMatchObject({ price: '0', priceCurrency: 'USD' })
+    expect(graph[1].itemListElement[1]).toMatchObject({
+      name: 'Knowledge Base',
+      item: 'https://sim.ai/knowledge',
+    })
+  })
+})
diff --git a/apps/sim/app/(landing)/components/solutions-page/components/solutions-structured-data/solutions-structured-data.tsx b/apps/sim/app/(landing)/components/solutions-page/components/solutions-structured-data/solutions-structured-data.tsx
index 04b53f84fd9..91486b28780 100644
--- a/apps/sim/app/(landing)/components/solutions-page/components/solutions-structured-data/solutions-structured-data.tsx
+++ b/apps/sim/app/(landing)/components/solutions-page/components/solutions-structured-data/solutions-structured-data.tsx
@@ -1,6 +1,9 @@
 import { SITE_URL } from '@/lib/core/utils/urls'
 import { JsonLd } from '@/app/(landing)/components/json-ld'
-import type { SolutionsPageConfig } from '@/app/(landing)/components/solutions-page/types'
+import type {
+  SolutionsPageConfig,
+  SolutionsProductPageConfig,
+} from '@/app/(landing)/components/solutions-page/types'
 
 /**
  * JSON-LD for a solutions page - a `WebPage` (about a `WebApplication`) plus a
@@ -18,14 +21,18 @@ import type { SolutionsPageConfig } from '@/app/(landing)/components/solutions-p
  */
 
 interface SolutionsStructuredDataProps {
-  config: SolutionsPageConfig
+  config: SolutionsPageConfig | SolutionsProductPageConfig
 }
 
 export function SolutionsStructuredData({ config }: SolutionsStructuredDataProps) {
-  const { module, path, seoDescription, offersFreeTier = true, hero, rows } = config
+  const { module, path, seoDescription, offersFreeTier = true, hero } = config
   const url = `${SITE_URL}${path}`
   const featureList = Array.from(
-    new Set(rows.flatMap((row) => row.cards.map((card) => card.title)))
+    new Set(
+      'features' in config
+        ? config.features.map((feature) => feature.title)
+        : config.rows.flatMap((row) => row.cards.map((card) => card.title))
+    )
   )
 
   const jsonLd = {
diff --git a/apps/sim/app/(landing)/components/solutions-page/constants.ts b/apps/sim/app/(landing)/components/solutions-page/constants.ts
index bc7bc86d3c5..d99293824fb 100644
--- a/apps/sim/app/(landing)/components/solutions-page/constants.ts
+++ b/apps/sim/app/(landing)/components/solutions-page/constants.ts
@@ -21,7 +21,7 @@ import {
 export const SOLUTIONS_SPACING = {
   /**
    * The one horizontal gutter, owned solely by `SolutionsPage`. Matches the
-   * navbar and landing hero exactly (`px-20 max-lg:px-8 max-sm:px-5`) so
+   * navbar and landing hero exactly (`px-10 max-md:px-7 max-lg:px-8 max-xl:px-9`) so
    * solutions content starts on the wordmark's vertical line at every
    * breakpoint. Sections and cards never set their own gutter.
    */
@@ -124,7 +124,7 @@ export const SOLUTIONS_FEATURE_TILE_TONE = {
   light: {
     surface: 'bg-[var(--surface-3)]',
     title: 'text-[var(--text-primary)]',
-    description: 'text-[var(--text-muted)]',
+    description: 'text-[var(--text-secondary)]',
   },
   dark: {
     surface: 'bg-[var(--text-secondary)]',
diff --git a/apps/sim/app/(landing)/components/solutions-page/index.ts b/apps/sim/app/(landing)/components/solutions-page/index.ts
index d4999994cca..e5ea7b52d8a 100644
--- a/apps/sim/app/(landing)/components/solutions-page/index.ts
+++ b/apps/sim/app/(landing)/components/solutions-page/index.ts
@@ -5,4 +5,6 @@ export type {
   SolutionsHeroConfig,
   SolutionsPageConfig,
   SolutionsPillCta,
+  SolutionsProductFeatureConfig,
+  SolutionsProductPageConfig,
 } from './types'
diff --git a/apps/sim/app/(landing)/components/solutions-page/solutions-page.tsx b/apps/sim/app/(landing)/components/solutions-page/solutions-page.tsx
index 9c903ebae05..40546353756 100644
--- a/apps/sim/app/(landing)/components/solutions-page/solutions-page.tsx
+++ b/apps/sim/app/(landing)/components/solutions-page/solutions-page.tsx
@@ -1,5 +1,4 @@
 import { cn } from '@sim/emcn'
-import { Cta } from '@/app/(landing)/components/cta/cta'
 import { LANDING_CONTENT_WIDTH } from '@/app/(landing)/components/landing-layout'
 import {
   SolutionsCardRow,
@@ -7,50 +6,34 @@ import {
   SolutionsLogosRow,
   SolutionsStructuredData,
 } from '@/app/(landing)/components/solutions-page/components'
+import { SolutionsProductPage } from '@/app/(landing)/components/solutions-page/components/solutions-product-page'
 import { SOLUTIONS_SPACING } from '@/app/(landing)/components/solutions-page/constants'
-import type { SolutionsPageConfig } from '@/app/(landing)/components/solutions-page/types'
+import type {
+  SolutionsPageConfig,
+  SolutionsProductPageConfig,
+} from '@/app/(landing)/components/solutions-page/types'
 
 /**
- * The reusable solutions-page content stack - the single component every
- * solution route (IT, Engineering, Finance, Compliance, HR) consumes with
- * near-zero ceremony. A route renders the shared shell and drops in one
- * `<SolutionsPage config={…} />`.
- *
- * This component owns the entire `<main>`: an inner content column carries the
- * shared `max-w-[1460px]` width (centered via `LANDING_CONTENT_WIDTH`, matching
- * the navbar and landing sections), the one horizontal gutter
- * (`SOLUTIONS_SPACING.gutter`), and the inter-section vertical rhythm
- * (`SOLUTIONS_SPACING.sectionRhythm`) - the enterprise page's exact structure.
- * The closing {@link Cta} sits directly in the `<main>` because it owns its own
- * width cap and gutter; the `<main>`'s matching flex gap gives it the same
- * rhythm after the last card row as every other section boundary. The hero, the
- * logos row, and every card row carry no gutter and no inter-section margin of
- * their own, so spacing is uniform and unreachable from a consumer page - the
- * config is pure content (strings + `ReactNode` visual slots), with no layout
- * knob anywhere in its tree.
- *
- * The order is fixed: structured data first (before visible content, derived
- * from the same config so it never drifts) → solutions hero (the page's only
- * `<h1>`) → centered logos row → the configured card rows in array order → the
- * shared pre-footer CTA band. The heading outline is strict H1 → H2 (per card
- * row + the CTA) → H3 (per card), never skipped. Server Component only - no
- * client island lives here; the page supplies its own islands through the
- * `visual` slots in the config.
+ * Shared main content for platform and solutions routes. The content column
+ * owns its width, gutter, and rhythm; LandingShell supplies the closing CTA
+ * and footer. Configs contain only copy and visual slots, keeping every hero,
+ * logo row, and feature card row on the same layout.
  */
 
 interface SolutionsPageProps {
   /** The complete page content - identity, hero, and ordered card rows. */
-  config: SolutionsPageConfig
+  config: SolutionsPageConfig | SolutionsProductPageConfig
 }
 
 export function SolutionsPage({ config }: SolutionsPageProps) {
+  if ('features' in config) {
+    return <SolutionsProductPage config={config} />
+  }
+
   return (
     <>
       <SolutionsStructuredData config={config} />
-      <main
-        id='main-content'
-        className={cn('flex w-full flex-col', SOLUTIONS_SPACING.sectionRhythm)}
-      >
+      <main id='main-content'>
         <div
           className={cn(
             'flex flex-col',
@@ -65,8 +48,6 @@ export function SolutionsPage({ config }: SolutionsPageProps) {
             <SolutionsCardRow key={row.id} row={row} />
           ))}
         </div>
-
-        <Cta />
       </main>
     </>
   )
diff --git a/apps/sim/app/(landing)/components/solutions-page/types.ts b/apps/sim/app/(landing)/components/solutions-page/types.ts
index d16db98d361..33684059d5a 100644
--- a/apps/sim/app/(landing)/components/solutions-page/types.ts
+++ b/apps/sim/app/(landing)/components/solutions-page/types.ts
@@ -134,3 +134,28 @@ export interface SolutionsPageConfig {
   /** Card rows rendered in order beneath the logos row. */
   rows: SolutionsCardRowConfig[]
 }
+
+/** A product demonstration with a short, visible caption. */
+export interface SolutionsProductFeatureConfig {
+  id: string
+  label: string
+  title: string
+  description: string
+  visual: ReactNode
+  visualSize?: 'default' | 'compact'
+  cta?: SolutionsPillCta
+}
+
+/** Product pages lead with an interactive demo and two supporting visual cards. */
+export interface SolutionsProductPageConfig extends Omit<SolutionsPageConfig, 'rows'> {
+  features: readonly SolutionsProductFeatureConfig[]
+  codeExample?: SolutionsProductCodeExampleConfig
+}
+
+/** A real CLI example accompanying the interactive product demonstrations. */
+export interface SolutionsProductCodeExampleConfig {
+  title: string
+  description: string
+  filename: string
+  commands: readonly string[]
+}
diff --git a/apps/sim/app/(landing)/components/trusted-by/trusted-by.tsx b/apps/sim/app/(landing)/components/trusted-by/trusted-by.tsx
index ec6a0efd0b0..1eea93f9768 100644
--- a/apps/sim/app/(landing)/components/trusted-by/trusted-by.tsx
+++ b/apps/sim/app/(landing)/components/trusted-by/trusted-by.tsx
@@ -4,26 +4,20 @@ import { Logos } from '@/app/(landing)/components/logos'
 interface TrustedByProps {
   /** Layout/placement classes for the outer wrapper (e.g. grid cell). Never chrome. */
   className?: string
-  /**
-   * Layout intent, forwarded to {@link Logos}.
-   * - `grid` (default) - left-aligned label above the bordered 3-up logo-card grid.
-   * - `row` - centered label above a single centered row of bare wordmarks.
-   */
-  layout?: 'grid' | 'row'
 }
 
 /**
  * The canonical customer-proof block - a muted "Trusted by technical teams at"
- * label above the shared {@link Logos} block, stacked at the hero's `gap-[22px]`
+ * label above the shared {@link Logos} grid, stacked at the hero's `gap-[22px]`
  * rhythm. The single owner of that label copy and rhythm, reused verbatim by the
- * landing hero and the demo page so the two can never drift. Consumers pass only
- * placement via `className` and a `layout` intent.
+ * demo and contact pages so the two can never drift. Consumers pass only
+ * placement via `className`.
  */
-export function TrustedBy({ className, layout = 'grid' }: TrustedByProps) {
+export function TrustedBy({ className }: TrustedByProps) {
   return (
-    <div className={cn('flex flex-col gap-[22px]', layout === 'row' && 'items-center', className)}>
-      <p className='text-[var(--text-muted)] text-sm'>Trusted by technical teams at</p>
-      <Logos layout={layout} />
+    <div className={cn('flex flex-col gap-[22px]', className)}>
+      <p className='text-[var(--text-secondary)] text-sm'>Trusted by technical teams at</p>
+      <Logos layout='grid' />
     </div>
   )
 }
diff --git a/apps/sim/app/(landing)/constants.ts b/apps/sim/app/(landing)/constants.ts
index c16abe98f78..336d188ef0b 100644
--- a/apps/sim/app/(landing)/constants.ts
+++ b/apps/sim/app/(landing)/constants.ts
@@ -1,8 +1,9 @@
 /**
- * Shared landing-page CTA destinations. Every "Get started"/"Sign up" CTA
- * across the marketing site funnels to signup; every "Talk to sales"/
- * "Contact sales" CTA funnels to the demo-request form. Centralized here so
- * no CTA can drift to the wrong destination independently.
+ * Shared landing-page CTA destinations. Self-serve "Sign up" funnels to
+ * signup; "Log in" to login; every "Request a demo" / "Contact sales" CTA
+ * funnels to the demo-request form. Centralized here so no CTA can drift
+ * to the wrong destination independently.
  */
+export const LOGIN_HREF = '/login'
 export const SIGNUP_HREF = '/signup'
 export const DEMO_HREF = '/demo'
diff --git a/apps/sim/app/(landing)/contact/components/contact-form/contact-form.tsx b/apps/sim/app/(landing)/contact/components/contact-form/contact-form.tsx
index b21f950b3bb..534fa557cdc 100644
--- a/apps/sim/app/(landing)/contact/components/contact-form/contact-form.tsx
+++ b/apps/sim/app/(landing)/contact/components/contact-form/contact-form.tsx
@@ -73,7 +73,11 @@ function ContactField({ label, htmlFor, required, error, children }: ContactFiel
       role={isGroup ? 'group' : undefined}
       aria-labelledby={isGroup ? labelId : undefined}
     >
-      <Label id={labelId} htmlFor={htmlFor} className='pl-0.5 font-normal text-[var(--text-muted)]'>
+      <Label
+        id={labelId}
+        htmlFor={htmlFor}
+        className='pl-0.5 font-normal text-[var(--text-secondary)]'
+      >
         {label}
         {required ? (
           <span aria-hidden className='ml-0.5 text-[var(--text-error)]'>
@@ -196,7 +200,7 @@ export function ContactForm() {
           <Check className='size-7' />
         </div>
         <h2 className='mt-5 text-[var(--text-primary)] text-xl leading-[1.2]'>Message received</h2>
-        <p className='mt-2 max-w-sm text-[var(--text-muted)] text-sm leading-[1.6]'>
+        <p className='mt-2 max-w-sm text-[var(--text-secondary)] text-sm leading-[1.6]'>
           Thanks for reaching out. Our team will get back to you shortly.
         </p>
         <button
@@ -215,7 +219,7 @@ export function ContactForm() {
       <h2 id='contact-form-heading' className='text-[var(--text-primary)] text-xl leading-[1.2]'>
         Send us a message
       </h2>
-      <p className='mt-1.5 text-[var(--text-muted)] text-sm'>
+      <p className='mt-1.5 text-[var(--text-secondary)] text-sm'>
         Ask a question, request an integration, or get help — we'll get back to you shortly.
       </p>
 
diff --git a/apps/sim/app/(landing)/contact/contact.tsx b/apps/sim/app/(landing)/contact/contact.tsx
index 7d4f1d32f88..723da081826 100644
--- a/apps/sim/app/(landing)/contact/contact.tsx
+++ b/apps/sim/app/(landing)/contact/contact.tsx
@@ -8,7 +8,7 @@ import { ContactForm } from '@/app/(landing)/contact/components/contact-form'
  * right.
  *
  * The section is a two-column CSS grid capped and centered at the shared
- * `max-w-[1460px]` with the navbar-aligned `px-20` gutter, so the headline starts
+ * `max-w-[1728px]` with the navbar-aligned `px-10` gutter, so the headline starts
  * on the same vertical line as the wordmark. The desktop split is `xl:grid-cols-2`
  * with `xl:gap-x-0` — the columns split at the exact horizontal center, so the
  * right card occupies the same rectangle as the hero's right panel. The card is
@@ -23,7 +23,7 @@ import { ContactForm } from '@/app/(landing)/contact/components/contact-form'
  * text sits on the hero's line, while the card top stays on the higher `top-8`
  * line. The customer proof reuses the shared {@link TrustedBy} block,
  * bottom-anchored (`xl:row-start-2 xl:self-end`). The gutter follows the navbar
- * convention (`px-20 max-lg:px-8 max-sm:px-5`), and `max-sm` drops to the smallest
+ * convention (`px-10 max-md:px-7 max-lg:px-8 max-xl:px-9`), and `max-sm` drops to the smallest
  * type scale.
  *
  * Carries an sr-only product summary for AI citation (landing CLAUDE.md → GEO).
@@ -34,7 +34,7 @@ export default function Contact() {
       <section
         id='contact'
         aria-labelledby='contact-heading'
-        className='mx-auto grid w-full max-w-[1460px] grid-cols-1 gap-y-10 px-20 pt-20 pb-24 max-sm:gap-y-8 max-sm:px-5 max-sm:pt-16 max-sm:pb-16 max-lg:px-8 xl:grid-cols-2 xl:grid-rows-[auto_1fr] xl:gap-x-0 xl:pt-8 xl:pb-8'
+        className='mx-auto grid w-full max-w-[1728px] grid-cols-1 gap-y-10 px-10 pt-20 pb-24 max-sm:gap-y-8 max-sm:pt-16 max-sm:pb-16 max-md:px-7 max-lg:px-8 max-xl:px-9 xl:grid-cols-2 xl:grid-rows-[auto_1fr] xl:gap-x-0 xl:pt-8 xl:pb-8'
       >
         <div className='flex flex-col gap-5 xl:col-start-1 xl:row-start-1 xl:self-start xl:pt-[80px]'>
           <p className='sr-only'>
diff --git a/apps/sim/app/(landing)/content-routing.test.tsx b/apps/sim/app/(landing)/content-routing.test.tsx
new file mode 100644
index 00000000000..3398196d316
--- /dev/null
+++ b/apps/sim/app/(landing)/content-routing.test.tsx
@@ -0,0 +1,79 @@
+/**
+ * @vitest-environment node
+ */
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import type { ContentPost } from '@/lib/content/schema'
+
+const { getPostBySlug } = vi.hoisted(() => ({
+  getPostBySlug: vi.fn<(slug: string) => Promise<ContentPost | null>>(),
+}))
+
+vi.mock('@/lib/blog/registry', () => ({
+  getPostBySlug,
+  getAllPostMeta: vi.fn().mockResolvedValue([]),
+  getRelatedPosts: vi.fn().mockResolvedValue([]),
+}))
+vi.mock('@/lib/library/registry', () => ({
+  getPostBySlug,
+  getAllPostMeta: vi.fn().mockResolvedValue([]),
+  getRelatedPosts: vi.fn().mockResolvedValue([]),
+}))
+vi.mock('@/lib/blog/seo', () => ({
+  BLOG_SECTION: { basePath: '/blog' },
+  buildPostMetadata: () => ({ title: 'Published article' }),
+  buildPostGraphJsonLd: () => ({}),
+}))
+vi.mock('@/lib/library/seo', () => ({
+  LIBRARY_SECTION: { basePath: '/library' },
+  buildPostMetadata: () => ({ title: 'Published article' }),
+  buildPostGraphJsonLd: () => ({}),
+}))
+vi.mock('@/lib/core/utils/urls', () => ({ getBaseUrl: () => 'https://example.com' }))
+vi.mock('@/app/(landing)/components', () => ({ ContentPostPage: () => null }))
+
+import BlogPage, { generateMetadata as blogMetadata } from '@/app/(landing)/blog/[slug]/page'
+import LibraryPage, {
+  generateMetadata as libraryMetadata,
+} from '@/app/(landing)/library/[slug]/page'
+
+const POST: ContentPost = {
+  slug: 'test-article',
+  title: 'Published article',
+  description: 'A published article for route validation.',
+  date: '2026-01-01',
+  author: { id: 'author', name: 'Author' },
+  authors: [{ id: 'author', name: 'Author' }],
+  tags: [],
+  ogImage: '/cover.png',
+  canonical: 'https://example.com/test-article',
+  draft: false,
+  featured: false,
+  technical: true,
+  Content: () => null,
+}
+
+beforeEach(() => vi.clearAllMocks())
+
+describe.each([
+  ['blog', BlogPage, blogMetadata],
+  ['library', LibraryPage, libraryMetadata],
+] as const)('%s public content routing', (_section, Page, metadata) => {
+  const props = { params: Promise.resolve({ slug: POST.slug }) }
+
+  it.each([
+    ['missing', null],
+    ['draft', { ...POST, draft: true }],
+  ] as const)('rejects %s posts and omits their metadata', async (_state, post) => {
+    getPostBySlug.mockResolvedValue(post)
+
+    await expect(Page(props)).rejects.toThrow('NEXT_HTTP_ERROR_FALLBACK;404')
+    await expect(metadata(props)).resolves.toEqual({})
+  })
+
+  it('serves published posts and their metadata', async () => {
+    getPostBySlug.mockResolvedValue(POST)
+
+    await expect(Page(props)).resolves.toMatchObject({ props: { post: POST } })
+    await expect(metadata(props)).resolves.toEqual({ title: 'Published article' })
+  })
+})
diff --git a/apps/sim/app/(landing)/cookie-policy/cookie-policy-content.tsx b/apps/sim/app/(landing)/cookie-policy/cookie-policy-content.tsx
index cc6367945f3..4da00f38e27 100644
--- a/apps/sim/app/(landing)/cookie-policy/cookie-policy-content.tsx
+++ b/apps/sim/app/(landing)/cookie-policy/cookie-policy-content.tsx
@@ -294,7 +294,7 @@ export const COOKIE_POLICY_CONFIG: LegalPageConfig = {
               (Analytics and Ads),{' '}
               <ProseLink href='https://legal.hubspot.com/privacy-policy'>HubSpot</ProseLink>,{' '}
               <ProseLink href='https://x.com/en/privacy'>X (Twitter)</ProseLink>,{' '}
-              <ProseLink href='https://ahrefs.com/privacy'>Ahrefs</ProseLink>,{' '}
+              <ProseLink href='https://ahrefs.com/legal/privacy-policy'>Ahrefs</ProseLink>,{' '}
               <ProseLink href='https://posthog.com/privacy'>PostHog</ProseLink>, and{' '}
               <ProseLink href='https://www.cloudflare.com/privacypolicy/'>Cloudflare</ProseLink>.
             </>
diff --git a/apps/sim/app/(landing)/customers/[slug]/page.tsx b/apps/sim/app/(landing)/customers/[slug]/page.tsx
new file mode 100644
index 00000000000..e8a0e9be0a7
--- /dev/null
+++ b/apps/sim/app/(landing)/customers/[slug]/page.tsx
@@ -0,0 +1,50 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+import { buildPostGraphJsonLd, buildPostMetadata } from '@/lib/content/seo'
+import { CUSTOMER_SECTION, CUSTOMER_STORIES } from '@/lib/customers/data'
+import { getAllCustomerStoryMeta, getCustomerStoryBySlug } from '@/lib/customers/registry'
+import { JsonLd } from '@/app/(landing)/components/json-ld/json-ld'
+import { CustomerStoryPage } from '@/app/(landing)/customers/components/customer-story-page/customer-story-page'
+
+interface CustomerPageProps {
+  params: Promise<{ slug: string }>
+}
+
+export const dynamicParams = false
+export const revalidate = 86400
+
+export function generateStaticParams() {
+  return CUSTOMER_STORIES.map(({ slug }) => ({ slug }))
+}
+
+export async function generateMetadata({ params }: CustomerPageProps): Promise<Metadata> {
+  const { slug } = await params
+  if (!CUSTOMER_STORIES.some((story) => story.slug === slug)) return {}
+  const post = await getCustomerStoryBySlug(slug)
+  return post ? buildPostMetadata(post) : {}
+}
+
+export default async function Page({ params }: CustomerPageProps) {
+  const { slug } = await params
+  const story = CUSTOMER_STORIES.find((item) => item.slug === slug)
+  if (!story) notFound()
+  const post = await getCustomerStoryBySlug(slug)
+  if (!post) notFound()
+  const published = post.draft ? [] : await getAllCustomerStoryMeta()
+  const next = CUSTOMER_STORIES.find(
+    (item) =>
+      item.slug !== slug && (post.draft || published.some((entry) => entry.slug === item.slug))
+  )
+  const nextPost = next ? await getCustomerStoryBySlug(next.slug) : null
+
+  return (
+    <>
+      {!post.draft && <JsonLd data={buildPostGraphJsonLd(post, CUSTOMER_SECTION)} />}
+      <CustomerStoryPage
+        story={story}
+        post={post}
+        nextStory={next && nextPost ? { story: next, post: nextPost } : undefined}
+      />
+    </>
+  )
+}
diff --git a/apps/sim/app/(landing)/customers/components/customer-story-card/customer-story-card.tsx b/apps/sim/app/(landing)/customers/components/customer-story-card/customer-story-card.tsx
new file mode 100644
index 00000000000..112d86653db
--- /dev/null
+++ b/apps/sim/app/(landing)/customers/components/customer-story-card/customer-story-card.tsx
@@ -0,0 +1,34 @@
+import { ArrowRight } from '@sim/emcn/icons'
+import Link from 'next/link'
+import type { ContentMeta } from '@/lib/content/schema'
+import type { CustomerStory } from '@/lib/customers/data'
+import { CustomerStoryMedia } from '@/app/(landing)/customers/components/customer-story-media/customer-story-media'
+
+interface CustomerStoryCardProps {
+  story: CustomerStory
+  post: ContentMeta
+}
+
+/** A quiet editorial link shared by the customer index and next-story section. */
+export function CustomerStoryCard({ story, post }: CustomerStoryCardProps) {
+  return (
+    <Link
+      href={`/customers/${story.slug}`}
+      className='group flex min-w-0 flex-col gap-5 rounded-[12px] focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--text-primary)] focus-visible:outline-offset-4'
+    >
+      <CustomerStoryMedia story={story} />
+      <div className='flex items-start justify-between gap-6'>
+        <div>
+          <p className='mb-2 text-[14px] text-[var(--text-muted)]'>{story.company}</p>
+          <h3 className='max-w-[36rem] text-balance text-[26px] text-[var(--text-primary)] leading-[1.2] tracking-[-0.02em] max-sm:text-[23px]'>
+            {post.title}
+          </h3>
+        </div>
+        <ArrowRight
+          aria-hidden='true'
+          className='mt-1 size-5 shrink-0 text-[var(--text-icon)] transition-transform duration-200 group-hover:translate-x-0.5 motion-reduce:transition-none'
+        />
+      </div>
+    </Link>
+  )
+}
diff --git a/apps/sim/app/(landing)/customers/components/customer-story-card/index.ts b/apps/sim/app/(landing)/customers/components/customer-story-card/index.ts
new file mode 100644
index 00000000000..64215adb933
--- /dev/null
+++ b/apps/sim/app/(landing)/customers/components/customer-story-card/index.ts
@@ -0,0 +1 @@
+export { CustomerStoryCard } from './customer-story-card'
diff --git a/apps/sim/app/(landing)/customers/components/customer-story-media/customer-story-media.tsx b/apps/sim/app/(landing)/customers/components/customer-story-media/customer-story-media.tsx
new file mode 100644
index 00000000000..10dfc447043
--- /dev/null
+++ b/apps/sim/app/(landing)/customers/components/customer-story-media/customer-story-media.tsx
@@ -0,0 +1,43 @@
+import Image from 'next/image'
+import type { CustomerStory } from '@/lib/customers/data'
+
+interface CustomerStoryMediaProps {
+  story: CustomerStory
+  priority?: boolean
+}
+
+/** Landscape customer artwork; customers without a photo use their own wordmark. */
+export function CustomerStoryMedia({ story, priority = false }: CustomerStoryMediaProps) {
+  return (
+    <div
+      data-customer-story-media={story.slug}
+      className='relative aspect-[16/9] w-full overflow-hidden rounded-[12px] bg-[var(--surface-4)]'
+    >
+      {story.heroImage ? (
+        <Image
+          src={story.heroImage}
+          alt={story.heroAlt}
+          fill
+          sizes='(max-width: 1023px) calc(100vw - 64px), (max-width: 1728px) 78vw, 1374px'
+          preload={priority}
+          quality={90}
+          className='object-cover'
+        />
+      ) : (
+        <div className='absolute inset-0 flex items-center justify-center p-12'>
+          <Image
+            src={story.logo.src}
+            alt={story.logo.alt}
+            width={320}
+            height={175}
+            className='h-auto w-[30%] min-w-[100px] max-w-[320px] brightness-0 dark:invert'
+          />
+        </div>
+      )}
+      <div
+        aria-hidden='true'
+        className='pointer-events-none absolute inset-0 rounded-[inherit] ring-1 ring-black/10 ring-inset dark:ring-white/10'
+      />
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/customers/components/customer-story-media/index.ts b/apps/sim/app/(landing)/customers/components/customer-story-media/index.ts
new file mode 100644
index 00000000000..b30269bdab4
--- /dev/null
+++ b/apps/sim/app/(landing)/customers/components/customer-story-media/index.ts
@@ -0,0 +1 @@
+export { CustomerStoryMedia } from './customer-story-media'
diff --git a/apps/sim/app/(landing)/customers/components/customer-story-page/customer-story-page.tsx b/apps/sim/app/(landing)/customers/components/customer-story-page/customer-story-page.tsx
new file mode 100644
index 00000000000..9df21dbcc90
--- /dev/null
+++ b/apps/sim/app/(landing)/customers/components/customer-story-page/customer-story-page.tsx
@@ -0,0 +1,103 @@
+import { cn } from '@sim/emcn'
+import Image from 'next/image'
+import type { ContentPost } from '@/lib/content/schema'
+import type { CustomerStory } from '@/lib/customers/data'
+import { BackLink } from '@/app/(landing)/components/back-link/back-link'
+import {
+  HOME_INSET,
+  LANDING_CONTENT_WIDTH,
+  LANDING_GUTTER,
+  LANDING_HERO_TOP_PADDING,
+} from '@/app/(landing)/components/landing-layout'
+import { ShareButton } from '@/app/(landing)/components/share-button/share-button'
+import { CustomerStoryCard } from '@/app/(landing)/customers/components/customer-story-card/customer-story-card'
+import { CustomerStoryMedia } from '@/app/(landing)/customers/components/customer-story-media/customer-story-media'
+
+interface CustomerStoryPageProps {
+  story: CustomerStory
+  post: ContentPost
+  nextStory?: { story: CustomerStory; post: ContentPost }
+}
+
+/** Editorial customer detail with a 10/12 inset hero and a narrower reading column. */
+export function CustomerStoryPage({ story, post, nextStory }: CustomerStoryPageProps) {
+  const Article = post.Content
+
+  return (
+    <main id='main-content' className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER)}>
+      <article className={HOME_INSET}>
+        <header className={cn('pb-12 max-sm:pb-8', LANDING_HERO_TOP_PADDING)}>
+          <BackLink href='/customers' label='Customer stories' />
+          <h1 className='mt-7 max-w-[1100px] text-balance text-[64px] text-[var(--text-primary)] leading-[1.04] tracking-[-0.03em] max-sm:mt-5 max-sm:text-[36px] max-xl:text-[52px]'>
+            {post.title}
+          </h1>
+        </header>
+
+        <CustomerStoryMedia story={story} priority />
+
+        <div className='grid grid-cols-[minmax(0,0.8fr)_minmax(0,1.7fr)] items-start gap-20 pt-16 max-md:grid-cols-1 max-md:gap-10 max-md:pt-10 max-lg:gap-12'>
+          <aside
+            aria-label='About this customer'
+            className='sticky top-[120px] min-w-0 max-md:static'
+          >
+            <dl className='space-y-8 max-md:grid max-md:grid-cols-2 max-md:gap-6 max-md:space-y-0'>
+              <div className='max-md:col-span-2'>
+                <dt className='mb-5 text-[13px] text-[var(--text-muted)]'>Customer</dt>
+                <dd>
+                  <Image
+                    src={story.logo.src}
+                    alt={story.logo.alt}
+                    width={story.logo.width}
+                    height={story.logo.height}
+                    className='h-auto max-w-full brightness-0 dark:invert'
+                  />
+                </dd>
+              </div>
+              <div>
+                <dt className='mb-2 text-[13px] text-[var(--text-muted)]'>Industry</dt>
+                <dd className='text-[15px] text-[var(--text-primary)]'>{story.industry}</dd>
+              </div>
+              <div>
+                <dt className='mb-2 text-[13px] text-[var(--text-muted)]'>Focus</dt>
+                <dd className='space-y-1 text-[15px] text-[var(--text-body)]'>
+                  {story.focus.map((focus) => (
+                    <p key={focus}>{focus}</p>
+                  ))}
+                </dd>
+              </div>
+            </dl>
+            <div className='mt-8 border-[var(--border)] border-t pt-6'>
+              <ShareButton url={post.canonical} title={post.title} />
+            </div>
+          </aside>
+
+          <div className='min-w-0 max-w-[740px]'>
+            <p className='mb-10 text-pretty text-[28px] text-[var(--text-primary)] leading-[1.3] tracking-[-0.015em] max-sm:text-[23px]'>
+              {post.description}
+            </p>
+            <div className='[&_h2:first-child]:!mt-0 [&_:is(h1,h2,h3,h4,h5,h6,a,strong,b)]:font-normal [&_h2]:scroll-mt-28 [&_p]:text-pretty'>
+              <Article />
+            </div>
+          </div>
+        </div>
+      </article>
+
+      {nextStory && (
+        <section
+          aria-labelledby='more-customer-stories'
+          className={cn('mt-24 border-[var(--border)] border-t pt-10 max-sm:mt-16', HOME_INSET)}
+        >
+          <div className='mb-8 flex items-center justify-between gap-6'>
+            <h2 id='more-customer-stories' className='text-[28px] leading-tight tracking-[-0.02em]'>
+              More customer stories
+            </h2>
+            <BackLink href='/customers' label='All stories' />
+          </div>
+          <div className='max-w-[640px]'>
+            <CustomerStoryCard story={nextStory.story} post={nextStory.post} />
+          </div>
+        </section>
+      )}
+    </main>
+  )
+}
diff --git a/apps/sim/app/(landing)/customers/components/customer-story-page/index.ts b/apps/sim/app/(landing)/customers/components/customer-story-page/index.ts
new file mode 100644
index 00000000000..ac32d460704
--- /dev/null
+++ b/apps/sim/app/(landing)/customers/components/customer-story-page/index.ts
@@ -0,0 +1 @@
+export { CustomerStoryPage } from './customer-story-page'
diff --git a/apps/sim/app/(landing)/customers/page.test.tsx b/apps/sim/app/(landing)/customers/page.test.tsx
new file mode 100644
index 00000000000..3151929360d
--- /dev/null
+++ b/apps/sim/app/(landing)/customers/page.test.tsx
@@ -0,0 +1,125 @@
+/** @vitest-environment node */
+import { renderToStaticMarkup } from 'react-dom/server'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import type { ContentPost } from '@/lib/content/schema'
+import type { CustomerStory } from '@/lib/customers/data'
+import CustomerPage from '@/app/(landing)/customers/[slug]/page'
+import CustomersPage, { generateMetadata } from '@/app/(landing)/customers/page'
+
+const { getAllMeta, getBySlug } = vi.hoisted(() => ({
+  getAllMeta: vi.fn(),
+  getBySlug: vi.fn(),
+}))
+
+vi.mock('@sim/emcn', () => ({ cn: (...values: string[]) => values.join(' ') }))
+vi.mock('next/navigation', () => ({
+  notFound: () => {
+    throw new Error('Not found')
+  },
+}))
+vi.mock('@/lib/customers/registry', () => ({
+  getAllCustomerStoryMeta: getAllMeta,
+  getCustomerStoryBySlug: getBySlug,
+}))
+vi.mock('@/lib/content/seo', () => ({
+  buildIndexMetadata: () => ({ robots: { index: true, follow: true } }),
+  buildPostMetadata: () => ({}),
+  buildPostGraphJsonLd: () => ({}),
+}))
+vi.mock('@/app/(landing)/components/json-ld/json-ld', () => ({ JsonLd: () => null }))
+vi.mock('@/app/(landing)/customers/components/customer-story-card/customer-story-card', () => ({
+  CustomerStoryCard: ({ story }: { story: CustomerStory }) => (
+    <a href={`/customers/${story.slug}`}>{story.company}</a>
+  ),
+}))
+vi.mock('@/app/(landing)/customers/components/customer-story-page/customer-story-page', () => ({
+  CustomerStoryPage: ({
+    story,
+    nextStory,
+  }: {
+    story: CustomerStory
+    nextStory?: { story: CustomerStory; post: ContentPost }
+  }) => (
+    <main>
+      {story.company}
+      {nextStory && <a href={`/customers/${nextStory.story.slug}`}>Next story</a>}
+    </main>
+  ),
+}))
+
+function post(slug: string, draft: boolean): ContentPost {
+  return {
+    slug,
+    title: `${slug} customer story`,
+    description: 'Customer story preview',
+    date: '2026-09-05',
+    author: { id: 'sim', name: 'Sim', avatarUrl: '/sim.png' },
+    authors: [],
+    readingTime: 2,
+    tags: [],
+    ogImage: '/story.png',
+    canonical: `https://sim.ai/customers/${slug}`,
+    draft,
+    featured: false,
+    technical: false,
+    Content: () => null,
+    headings: [],
+  }
+}
+
+function setStories(rivianDraft: boolean, expDraft: boolean) {
+  const posts = [post('rivian', rivianDraft), post('exp-realty', expDraft)]
+  getAllMeta.mockResolvedValue(posts.filter((story) => !story.draft))
+  getBySlug.mockImplementation(
+    async (slug: string) => posts.find((story) => story.slug === slug) ?? null
+  )
+}
+
+beforeEach(() => vi.clearAllMocks())
+
+describe('customer publication boundaries', () => {
+  it('preserves the complete noindex design preview when every story is a draft', async () => {
+    setStories(true, true)
+    const html = renderToStaticMarkup(await CustomersPage())
+    expect(html).toContain('href="/customers/rivian"')
+    expect(html).toContain('href="/customers/exp-realty"')
+    expect((await generateMetadata()).robots).toEqual({ index: false, follow: false })
+  })
+
+  it('shows only published stories once the index can be indexed', async () => {
+    setStories(false, true)
+    const html = renderToStaticMarkup(await CustomersPage())
+    expect(html).toContain('href="/customers/rivian"')
+    expect(html).not.toContain('href="/customers/exp-realty"')
+    expect(getBySlug).toHaveBeenCalledExactlyOnceWith('rivian')
+    expect((await generateMetadata()).robots).toEqual({ index: true, follow: true })
+  })
+
+  it('does not recommend a draft from a published story', async () => {
+    setStories(false, true)
+    const html = renderToStaticMarkup(
+      await CustomerPage({ params: Promise.resolve({ slug: 'rivian' }) })
+    )
+    expect(html).not.toContain('Next story')
+    expect(getBySlug).toHaveBeenCalledExactlyOnceWith('rivian')
+  })
+
+  it('recommends another published story when one is available', async () => {
+    setStories(false, false)
+    const html = renderToStaticMarkup(
+      await CustomerPage({ params: Promise.resolve({ slug: 'rivian' }) })
+    )
+    expect(html).toContain('href="/customers/exp-realty"')
+  })
+
+  it.each([true, false])(
+    'keeps draft preview navigation when the other story draft state is %s',
+    async (rivianDraft) => {
+      setStories(rivianDraft, true)
+      const html = renderToStaticMarkup(
+        await CustomerPage({ params: Promise.resolve({ slug: 'exp-realty' }) })
+      )
+      expect(html).toContain('href="/customers/rivian"')
+    }
+  )
+})
diff --git a/apps/sim/app/(landing)/customers/page.tsx b/apps/sim/app/(landing)/customers/page.tsx
new file mode 100644
index 00000000000..c08e02d8eea
--- /dev/null
+++ b/apps/sim/app/(landing)/customers/page.tsx
@@ -0,0 +1,62 @@
+import { cn } from '@sim/emcn'
+import type { Metadata } from 'next'
+import { buildIndexMetadata } from '@/lib/content/seo'
+import { CUSTOMER_SECTION, CUSTOMER_STORIES } from '@/lib/customers/data'
+import { getAllCustomerStoryMeta, getCustomerStoryBySlug } from '@/lib/customers/registry'
+import {
+  HOME_INSET,
+  LANDING_CONTENT_WIDTH,
+  LANDING_GUTTER,
+  LANDING_HERO_TOP_PADDING,
+} from '@/app/(landing)/components/landing-layout'
+import { CustomerStoryCard } from '@/app/(landing)/customers/components/customer-story-card/customer-story-card'
+
+export const revalidate = 86400
+
+export async function generateMetadata(): Promise<Metadata> {
+  const published = await getAllCustomerStoryMeta()
+  return {
+    ...buildIndexMetadata(CUSTOMER_SECTION, { pageNum: 1 }),
+    ...(published.length === 0 ? { robots: { index: false, follow: false } } : {}),
+  }
+}
+
+export default async function Page() {
+  const published = await getAllCustomerStoryMeta()
+  const visibleStories =
+    published.length === 0
+      ? CUSTOMER_STORIES
+      : CUSTOMER_STORIES.filter((story) => published.some((post) => post.slug === story.slug))
+  const stories = await Promise.all(
+    visibleStories.map(async (story) => ({
+      story,
+      post: await getCustomerStoryBySlug(story.slug),
+    }))
+  )
+  return (
+    <main id='main-content' className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER)}>
+      <div className={HOME_INSET}>
+        <header className={cn('pb-16 max-sm:pb-10', LANDING_HERO_TOP_PADDING)}>
+          <p className='mb-6 text-[14px] text-[var(--text-secondary)]'>Customer stories</p>
+          <h1 className='max-w-[850px] text-balance text-[64px] leading-[1.04] tracking-[-0.03em] max-sm:text-[36px] max-xl:text-[52px]'>
+            The teams building their future with Sim.
+          </h1>
+          <p className='mt-6 max-w-[600px] text-[20px] text-[var(--text-secondary)] leading-[1.4] max-sm:text-[17px]'>
+            {CUSTOMER_SECTION.description}
+          </p>
+        </header>
+        <section
+          aria-labelledby='customer-stories-heading'
+          className='grid grid-cols-2 gap-x-8 gap-y-12 max-md:grid-cols-1'
+        >
+          <h2 id='customer-stories-heading' className='sr-only'>
+            Featured customer stories
+          </h2>
+          {stories.map(({ story, post }) =>
+            post ? <CustomerStoryCard key={story.slug} story={story} post={post} /> : null
+          )}
+        </section>
+      </div>
+    </main>
+  )
+}
diff --git a/apps/sim/app/(landing)/demo/components/demo-form/demo-form.tsx b/apps/sim/app/(landing)/demo/components/demo-form/demo-form.tsx
index ed741a23ade..0a9f9c47f48 100644
--- a/apps/sim/app/(landing)/demo/components/demo-form/demo-form.tsx
+++ b/apps/sim/app/(landing)/demo/components/demo-form/demo-form.tsx
@@ -124,7 +124,11 @@ function DemoField({ label, htmlFor, required, error, children }: DemoFieldProps
       role={isGroup ? 'group' : undefined}
       aria-labelledby={isGroup ? labelId : undefined}
     >
-      <Label id={labelId} htmlFor={htmlFor} className='pl-0.5 font-normal text-[var(--text-muted)]'>
+      <Label
+        id={labelId}
+        htmlFor={htmlFor}
+        className='pl-0.5 font-normal text-[var(--text-secondary)]'
+      >
         {label}
         {required ? (
           <span aria-hidden className='ml-0.5 text-[var(--text-error)]'>
@@ -225,7 +229,7 @@ export function DemoForm({ onComplete }: DemoFormProps) {
       <h2 id='demo-form-heading' className='text-[var(--text-primary)] text-xl leading-[1.2]'>
         Book a demo now
       </h2>
-      <p className='mt-1.5 text-[var(--text-muted)] text-sm'>
+      <p className='mt-1.5 text-[var(--text-secondary)] text-sm'>
         Tell us about your team and we'll tailor your demo to what you're building.
       </p>
 
diff --git a/apps/sim/app/(landing)/demo/components/demo-scheduler/demo-scheduler.test.tsx b/apps/sim/app/(landing)/demo/components/demo-scheduler/demo-scheduler.test.tsx
index 4416a77ee83..955e8e009f0 100644
--- a/apps/sim/app/(landing)/demo/components/demo-scheduler/demo-scheduler.test.tsx
+++ b/apps/sim/app/(landing)/demo/components/demo-scheduler/demo-scheduler.test.tsx
@@ -9,6 +9,7 @@ const {
   mockCal,
   mockCalComponent,
   mockConsent,
+  mockTheme,
   mockGetCalApi,
   mockTrackGoogleAdsConversion,
   mockTrackGoogleEvent,
@@ -16,11 +17,14 @@ const {
   mockCal: vi.fn(),
   mockCalComponent: vi.fn(() => null),
   mockConsent: { marketing: true, measurement: true },
+  mockTheme: { resolvedTheme: 'light' },
   mockGetCalApi: vi.fn(),
   mockTrackGoogleAdsConversion: vi.fn(),
   mockTrackGoogleEvent: vi.fn(),
 }))
 
+vi.mock('next-themes', () => ({ useTheme: () => mockTheme }))
+
 vi.mock('@calcom/embed-react', () => ({
   default: mockCalComponent,
   getCalApi: mockGetCalApi,
@@ -65,6 +69,7 @@ describe('DemoScheduler', () => {
   beforeEach(() => {
     ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
     vi.clearAllMocks()
+    mockTheme.resolvedTheme = 'light'
     mockConsent.marketing = true
     mockConsent.measurement = true
     mockGetCalApi.mockResolvedValue(mockCal)
@@ -82,7 +87,7 @@ describe('DemoScheduler', () => {
     window.twq = undefined
   })
 
-  it('passes the main-branch presentation and lead config to the official embed', async () => {
+  it('passes the current theme and lead config to the official embed', async () => {
     await act(async () => {
       root.render(<DemoScheduler lead={LEAD} />)
       await Promise.resolve()
@@ -108,11 +113,30 @@ describe('DemoScheduler', () => {
       undefined
     )
     expect(mockCal).toHaveBeenCalledWith('ui', {
+      theme: 'light',
       hideEventTypeDetails: true,
       styles: { branding: { brandColor: '#6f3dfa' } },
     })
   })
 
+  it('updates the embed when the visitor switches to dark mode', async () => {
+    await act(async () => {
+      root.render(<DemoScheduler lead={LEAD} />)
+    })
+    mockTheme.resolvedTheme = 'dark'
+    await act(async () => {
+      root.render(<DemoScheduler lead={LEAD} />)
+    })
+
+    expect(mockCalComponent).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        config: expect.objectContaining({ theme: 'dark', 'ui.color-scheme': 'dark' }),
+      }),
+      undefined
+    )
+    expect(mockCal).toHaveBeenCalledWith('ui', expect.objectContaining({ theme: 'dark' }))
+  })
+
   it('registers consent-aware booking analytics and removes the listener on unmount', async () => {
     const trackXEvent = vi.fn()
     window.twq = trackXEvent
@@ -172,6 +196,7 @@ describe('DemoScheduler', () => {
     })
 
     expect(mockCal).toHaveBeenCalledWith('ui', {
+      theme: 'light',
       hideEventTypeDetails: true,
       styles: { branding: { brandColor: '#6f3dfa' } },
     })
diff --git a/apps/sim/app/(landing)/demo/components/demo-scheduler/demo-scheduler.tsx b/apps/sim/app/(landing)/demo/components/demo-scheduler/demo-scheduler.tsx
index 5363069745c..c764782d10f 100644
--- a/apps/sim/app/(landing)/demo/components/demo-scheduler/demo-scheduler.tsx
+++ b/apps/sim/app/(landing)/demo/components/demo-scheduler/demo-scheduler.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect } from 'react'
 import Cal, { getCalApi } from '@calcom/embed-react'
+import { useTheme } from 'next-themes'
 import { trackGoogleAdsConversion, trackGoogleEvent } from '@/lib/analytics/google'
 import { X_DEMO_BOOKED_EVENT_ID } from '@/lib/consent/scripts'
 import { useTrackingConsent } from '@/lib/consent/tracking-consent'
@@ -84,13 +85,15 @@ export function preloadCalEmbed(): void {
  * {@link DemoLead}. Rendered inside the card chrome owned by {@link DemoBooking}
  * and lazy-loaded, so the embed script never touches the initial landing bundle.
  *
- * The embed is pinned to the page's light theme and Sim's brand color, and the
+ * The embed follows the page's theme and carries Sim's brand color, and the
  * captured name/email/notes prefill the booking so the visitor never retypes. It
  * fills the panel (`flex-1`), which the parent sizes to the form's height, so the
  * card stays the same height across the form→calendar transition.
  */
 export function DemoScheduler({ lead }: DemoSchedulerProps) {
   const { marketing, measurement } = useTrackingConsent()
+  const { resolvedTheme } = useTheme()
+  const calTheme = resolvedTheme === 'dark' ? 'dark' : 'light'
 
   useEffect(() => {
     let cancelled = false
@@ -113,6 +116,7 @@ export function DemoScheduler({ lead }: DemoSchedulerProps) {
         if (cancelled) return
         cal('ui', {
           hideEventTypeDetails: true,
+          theme: calTheme,
           styles: { branding: { brandColor: CAL_BRAND_COLOR } },
         })
         if (measurement || marketing) {
@@ -127,14 +131,14 @@ export function DemoScheduler({ lead }: DemoSchedulerProps) {
         .then((cal) => cal('off', { action: 'bookingSuccessfulV2', callback: trackDemoBooked }))
         .catch(() => {})
     }
-  }, [marketing, measurement])
+  }, [calTheme, marketing, measurement])
 
   return (
     <div className='flex h-full min-w-0 flex-col p-6 max-sm:p-5'>
       <h2 className='text-[var(--text-primary)] text-xl leading-[1.2]'>
         Pick a time{lead.name ? `, ${lead.name}` : ''}
       </h2>
-      <p className='mt-1.5 text-[var(--text-muted)] text-sm'>
+      <p className='mt-1.5 text-[var(--text-secondary)] text-sm'>
         Choose a slot that works for your team and we'll send a calendar invite.
       </p>
       <div className='mt-5 min-h-0 flex-1'>
@@ -148,8 +152,8 @@ export function DemoScheduler({ lead }: DemoSchedulerProps) {
             name: lead.name,
             email: lead.email,
             notes: lead.notes,
-            theme: 'light',
-            'ui.color-scheme': 'light',
+            theme: calTheme,
+            'ui.color-scheme': calTheme,
             layout: 'month_view',
             useSlotsViewOnSmallScreen: 'true',
           }}
diff --git a/apps/sim/app/(landing)/demo/demo.tsx b/apps/sim/app/(landing)/demo/demo.tsx
index 96dba782d5a..85113e9effc 100644
--- a/apps/sim/app/(landing)/demo/demo.tsx
+++ b/apps/sim/app/(landing)/demo/demo.tsx
@@ -6,12 +6,12 @@ import { DemoBooking } from '@/app/(landing)/demo/components/demo-booking'
  * content (not absolute panels) and a content-height right card.
  *
  * The section is a two-column CSS grid capped and centered at the shared
- * `max-w-[1460px]` with the navbar-aligned `px-20` gutter, so the headline starts
+ * `max-w-[1728px]` with the navbar-aligned `px-10` gutter, so the headline starts
  * on the same vertical line as the wordmark. The desktop split is
  * `xl:grid-cols-2` with `xl:gap-x-0` - the columns split at the exact horizontal
  * center, so the right booking card occupies the same rectangle as the hero's
  * right visual panel: its left edge on the center line, its right edge on the
- * `px-20` gutter. The card is also inset from the section's top and bottom by 32px
+ * `px-10` gutter. The card is also inset from the section's top and bottom by 32px
  * (`xl:pt-8`/`xl:pb-8`), matching the hero panel's `top-8`/`bottom-8`. The booking
  * card spans both rows (`xl:row-span-2`) and its content drives the column
  * height - the left column stretches to match, so the logos bottom-anchor to the
@@ -28,7 +28,7 @@ import { DemoBooking } from '@/app/(landing)/demo/components/demo-booking'
  * proof reuses the shared {@link TrustedBy} block (the same label + logo grid the
  * hero uses), bottom-anchored (`xl:row-start-2 xl:self-end`) so it rests on the
  * card's lower edge. Below `xl` it stacks; the gutter follows the navbar
- * convention (`px-20 max-lg:px-8 max-sm:px-5`) so the headline stays on the
+ * convention (`px-10 max-md:px-7 max-lg:px-8 max-xl:px-9`) so the headline stays on the
  * wordmark line, and `max-sm` drops to the smallest type scale.
  *
  * Carries an sr-only product summary for AI citation (landing CLAUDE.md → GEO).
@@ -39,13 +39,13 @@ export default function Demo() {
       <section
         id='demo'
         aria-labelledby='demo-heading'
-        className='mx-auto grid w-full max-w-[1460px] grid-cols-1 gap-y-10 px-20 pt-20 pb-24 max-sm:gap-y-8 max-sm:px-5 max-sm:pt-16 max-sm:pb-16 max-lg:px-8 xl:grid-cols-2 xl:grid-rows-[auto_1fr] xl:gap-x-0 xl:pt-8 xl:pb-8'
+        className='mx-auto grid w-full max-w-[1728px] grid-cols-1 gap-y-10 px-10 pt-20 pb-24 max-sm:gap-y-8 max-sm:pt-16 max-sm:pb-16 max-md:px-7 max-lg:px-8 max-xl:px-9 xl:grid-cols-2 xl:grid-rows-[auto_1fr] xl:gap-x-0 xl:pt-8 xl:pb-8'
       >
         <div className='flex flex-col gap-5 xl:col-start-1 xl:row-start-1 xl:self-start xl:pt-[80px]'>
           <p className='sr-only'>
             Operationalize AI with Sim, the AI agent workspace where teams build, deploy, and manage
             AI agents and workflows. A Sim specialist walks your team through building agents that
-            automate real work across 1,000+ integrations and every major LLM, visually,
+            automate real work across hundreds of integrations and every major LLM, visually,
             conversationally, or with code.
           </p>
 
diff --git a/apps/sim/app/(landing)/demo/page.tsx b/apps/sim/app/(landing)/demo/page.tsx
index 5c197227422..1b3d155b663 100644
--- a/apps/sim/app/(landing)/demo/page.tsx
+++ b/apps/sim/app/(landing)/demo/page.tsx
@@ -5,7 +5,7 @@ export const revalidate = 3600
 
 const TITLE = 'Book a Demo | Sim, the AI Workspace'
 const DESCRIPTION =
-  'Book a demo of Sim, the AI agent workspace where teams build, deploy, and manage AI agents and workflows that connect 1,000+ integrations and every major LLM.'
+  'Book a demo of Sim, the AI agent workspace where teams build, deploy, and manage AI agents and workflows that connect hundreds of integrations and every major LLM.'
 
 export const metadata = buildLandingMetadata({
   title: TITLE,
diff --git a/apps/sim/app/(landing)/enterprise/components/enterprise-feature-grid/enterprise-feature-grid.tsx b/apps/sim/app/(landing)/enterprise/components/enterprise-feature-grid/enterprise-feature-grid.tsx
deleted file mode 100644
index a9ef33990c7..00000000000
--- a/apps/sim/app/(landing)/enterprise/components/enterprise-feature-grid/enterprise-feature-grid.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { cn } from '@sim/emcn'
-import {
-  SolutionsCard,
-  SolutionsCardRowHeader,
-} from '@/app/(landing)/components/solutions-page/components/solutions-card-row/components'
-import { SOLUTIONS_SPACING } from '@/app/(landing)/components/solutions-page/constants'
-import type { SolutionsCardRowConfig } from '@/app/(landing)/components/solutions-page/types'
-
-/**
- * The enterprise feature sections rendered as ONE shared CSS grid so cards can
- * reflow across section boundaries in the two-column band (`sm`..`lg`,
- * 640-1023px). Separate per-section grids (what {@link SolutionsCardRow}
- * renders) leave an orphan cell there: each 3-card section breaks 2 + 1.
- *
- * Layout per breakpoint:
- * - `lg`+ (3 columns): source order - every header is followed by its own 3
- *   cards, matching {@link SolutionsCardRow} exactly.
- * - `sm`..`lg` (2 columns): the `sm:max-lg:order-*` classes regroup the 12
- *   cards into balanced blocks of 4 / 4 / 2 / 2 beneath the four headers, so
- *   no grid cell is ever empty. Cards borrowed from the next section render
- *   under the previous header in this band only.
- * - below `sm` (1 column): source order again - each header stacks above its
- *   own 3 cards.
- *
- * Each section keeps its `<section aria-labelledby>` landmark via
- * `display: contents`, so its header and cards participate directly in the
- * outer grid while the document outline (H2 -> H3) and anchor ids stay
- * identical to the `SolutionsCardRow` markup.
- *
- * Vertical rhythm is reproduced from the flex-column layout it replaces: the
- * grid's own `gap-8` (32px) supplies the inter-card gap, and headers carry
- * margins that top the gap up to the original values - `mb-4` lands the
- * header->cards distance at 48px (`cardRowHeaderToGrid`), and the top margins
- * land the section->section distance at 120/88/64px (`sectionRhythm`).
- */
-
-interface EnterpriseFeatureGridProps {
-  /** The four 3-card feature rows, in source order. */
-  rows: SolutionsCardRowConfig[]
-}
-
-/**
- * Header top margins recreating `LANDING_SECTION_RHYTHM` (120/88/64px) on top
- * of the grid's 32px row gap; `mb-4` recreates `cardRowHeaderToGrid` (48px).
- */
-const HEADER_RHYTHM = 'mt-[88px] mb-4 max-lg:mt-14 max-sm:mt-8'
-const FIRST_HEADER_RHYTHM = 'mb-4'
-
-/** Two-column-band ordering for the four headers (positions 1, 6, 11, 14). */
-const TABLET_HEADER_ORDER = [
-  'sm:max-lg:order-1',
-  'sm:max-lg:order-6',
-  'sm:max-lg:order-11',
-  'sm:max-lg:order-[14]',
-] as const
-
-/**
- * Two-column-band ordering for the 12 cards (flat index = rowIndex * 3 +
- * cardIndex), interleaved with {@link TABLET_HEADER_ORDER} to produce the
- * 4 / 4 / 2 / 2 grouping.
- */
-const TABLET_CARD_ORDER = [
-  'sm:max-lg:order-2',
-  'sm:max-lg:order-3',
-  'sm:max-lg:order-4',
-  'sm:max-lg:order-5',
-  'sm:max-lg:order-7',
-  'sm:max-lg:order-8',
-  'sm:max-lg:order-9',
-  'sm:max-lg:order-10',
-  'sm:max-lg:order-12',
-  'sm:max-lg:order-[13]',
-  'sm:max-lg:order-[15]',
-  'sm:max-lg:order-[16]',
-] as const
-
-export function EnterpriseFeatureGrid({ rows }: EnterpriseFeatureGridProps) {
-  return (
-    <div
-      className={cn(
-        'grid grid-cols-3 max-sm:grid-cols-1 max-lg:grid-cols-2',
-        SOLUTIONS_SPACING.cardGridGap
-      )}
-    >
-      {rows.map((row, rowIndex) => {
-        const headingId = `solutions-row-${row.id}-heading`
-
-        return (
-          <section
-            key={row.id}
-            id={`solutions-row-${row.id}`}
-            aria-labelledby={headingId}
-            className='contents'
-          >
-            <div
-              className={cn(
-                'col-span-full',
-                rowIndex === 0 ? FIRST_HEADER_RHYTHM : HEADER_RHYTHM,
-                TABLET_HEADER_ORDER[rowIndex]
-              )}
-            >
-              <SolutionsCardRowHeader row={row} headingId={headingId} />
-            </div>
-            {row.cards.map((card, cardIndex) => (
-              <div
-                key={`${row.id}-${card.title}`}
-                className={cn('min-w-0', TABLET_CARD_ORDER[rowIndex * 3 + cardIndex])}
-              >
-                <SolutionsCard
-                  card={card}
-                  headingId={`solutions-row-${row.id}-card-${cardIndex}-heading`}
-                />
-              </div>
-            ))}
-          </section>
-        )
-      })}
-    </div>
-  )
-}
diff --git a/apps/sim/app/(landing)/enterprise/components/enterprise-feature-grid/index.ts b/apps/sim/app/(landing)/enterprise/components/enterprise-feature-grid/index.ts
deleted file mode 100644
index dd4d0d3f880..00000000000
--- a/apps/sim/app/(landing)/enterprise/components/enterprise-feature-grid/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { EnterpriseFeatureGrid } from './enterprise-feature-grid'
diff --git a/apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-home-stage.tsx b/apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-home-stage.tsx
index 41458fddbcc..0ab291f45ab 100644
--- a/apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-home-stage.tsx
+++ b/apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-home-stage.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useMemo, useState } from 'react'
+import { useMemo } from 'react'
 import { ChevronDown, cn } from '@sim/emcn'
 import {
   ArrowRight,
@@ -26,55 +26,7 @@ import {
   REPLY_WORD_MS,
   SUGGESTED_ACTIONS,
 } from '@/app/(landing)/enterprise/components/enterprise-platform-loop/stage-data'
-
-/**
- * Reveals an incrementing count (typed chars, streamed words) at a fixed
- * step interval while `active`, deriving progress from ELAPSED time so a
- * throttled background tab catches up instead of stalling mid-reveal.
- * Resets to 0 when inactive; jumps straight to `total` under
- * `prefers-reduced-motion`.
- */
-function useElapsedReveal(active: boolean, stepMs: number, total: number) {
-  const [revealed, setRevealed] = useState(0)
-
-  useEffect(() => {
-    if (!active) {
-      setRevealed(0)
-      return
-    }
-
-    const media = window.matchMedia('(prefers-reduced-motion: reduce)')
-    let interval: ReturnType<typeof setInterval> | null = null
-
-    const run = () => {
-      const startedAt = performance.now()
-      interval = setInterval(() => {
-        const elapsed = performance.now() - startedAt
-        const n = Math.min(Math.floor(elapsed / stepMs) + 1, total)
-        setRevealed(n)
-        if (n >= total && interval) clearInterval(interval)
-      }, stepMs)
-    }
-
-    const syncMotionPreference = () => {
-      if (interval) clearInterval(interval)
-      if (media.matches) {
-        setRevealed(total)
-        return
-      }
-      run()
-    }
-
-    syncMotionPreference()
-    media.addEventListener('change', syncMotionPreference)
-    return () => {
-      media.removeEventListener('change', syncMotionPreference)
-      if (interval) clearInterval(interval)
-    }
-  }, [active, stepMs, total])
-
-  return revealed
-}
+import { useElapsedReveal } from '@/app/(landing)/hooks/use-elapsed-reveal'
 
 /** Greyscale leading icons for the suggested-action rows, in row order. */
 const ACTION_ICONS = [Table, ShieldCheck, ClipboardList, Files] as const
@@ -100,7 +52,7 @@ interface ComposerProps {
  */
 function Composer({ children, active }: ComposerProps) {
   return (
-    <div className='w-full rounded-2xl border border-[var(--border-1)] bg-[var(--white)] px-2.5 py-2 shadow-[0_1px_2px_0_rgba(18,18,18,0.05)]'>
+    <div className='w-full rounded-2xl border border-[var(--border)] bg-[var(--white)] px-2.5 py-2 shadow-[0_1px_2px_0_rgba(18,18,18,0.05)]'>
       <p className='min-h-[24px] px-1.5 pt-1 text-[15px] text-[var(--text-primary)] leading-[24px]'>
         {children}
       </p>
@@ -121,10 +73,10 @@ function Composer({ children, active }: ComposerProps) {
           <span
             className={cn(
               'flex size-[28px] items-center justify-center rounded-full transition-colors duration-200',
-              active ? 'bg-[#383838]' : 'bg-[#808080]'
+              active ? 'bg-[#383838] dark:bg-[#E0E0E0]' : 'bg-[#808080]'
             )}
           >
-            <ArrowUp className='size-[16px] text-white' />
+            <ArrowUp className='size-[16px] text-white dark:text-black' />
           </span>
         </span>
       </div>
@@ -231,7 +183,7 @@ export function EnterpriseHomeStage({
                   <span
                     key={action}
                     className={cn(
-                      'flex items-center gap-2 border-[var(--border-1)] px-2 py-2',
+                      'flex items-center gap-2 border-[var(--border)] px-2 py-2',
                       i > 0 && 'border-t'
                     )}
                   >
diff --git a/apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-sidebar.tsx b/apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-sidebar.tsx
index 8c366be696f..baa1590476b 100644
--- a/apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-sidebar.tsx
+++ b/apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-sidebar.tsx
@@ -63,7 +63,7 @@ function TextRow({ label }: { label: string }) {
 function SectionLabel({ label, actions }: { label: string; actions?: boolean }) {
   return (
     <div className='flex items-center justify-between px-4 pb-1.5'>
-      <span className='text-[var(--text-muted)] text-caption'>{label}</span>
+      <span className='text-[var(--text-secondary)] text-caption'>{label}</span>
       {actions && (
         <span className='flex items-center gap-2 text-[var(--text-icon)]'>
           <MoreHorizontal className='size-[14px]' />
diff --git a/apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/stage-data.ts b/apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/stage-data.ts
index 99d1797a03f..5340ac337ad 100644
--- a/apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/stage-data.ts
+++ b/apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/stage-data.ts
@@ -1,5 +1,5 @@
 import { Table as TableIcon } from '@sim/emcn/icons'
-import { AgentIcon, ConditionalIcon, MailIcon, StartIcon } from '@/components/icons'
+import { AgentIcon, ConditionalIcon, HumanInTheLoopIcon, StartIcon } from '@/components/icons'
 import type { BlockDef } from '@/app/(landing)/components/hero/components/hero-visual/workflow-data'
 
 /**
@@ -68,8 +68,8 @@ export const SUGGESTED_ACTIONS = [
  * the NetSuite PO match, exceptions are flagged, and the flow fans out to
  * finance review and the audit log. Same geometry conventions as the homepage
  * stage (250px blocks, vertical spine at x=155, terminals fanned at y=580);
- * tiles use the platform's grey text ramp - color is reserved for real
- * third-party marks, and none of these carry one.
+ * cards use production workflow role accents, with no third-party brand
+ * treatment in this particular flow.
  *
  * Ordered by build sequence; an edge draws once both endpoints are on canvas.
  */
@@ -77,6 +77,8 @@ export const ENTERPRISE_STAGE_BLOCKS: BlockDef[] = [
   {
     id: 'start',
     name: 'Start',
+    type: 'start_trigger',
+    typeLabel: 'Start',
     icon: StartIcon,
     bgColor: 'var(--text-muted)',
     isTrigger: true,
@@ -87,6 +89,8 @@ export const ENTERPRISE_STAGE_BLOCKS: BlockDef[] = [
   {
     id: 'match',
     name: 'Match PO',
+    type: 'agent',
+    typeLabel: 'Agent',
     icon: AgentIcon,
     bgColor: 'var(--text-primary)',
     rows: [
@@ -99,6 +103,8 @@ export const ENTERPRISE_STAGE_BLOCKS: BlockDef[] = [
   {
     id: 'exceptions',
     name: 'Flag exceptions',
+    type: 'condition',
+    typeLabel: 'Condition',
     icon: ConditionalIcon,
     bgColor: 'var(--text-secondary)',
     rows: [{ title: 'Conditions', value: '-' }],
@@ -108,12 +114,14 @@ export const ENTERPRISE_STAGE_BLOCKS: BlockDef[] = [
   {
     id: 'review',
     name: 'Finance review',
-    icon: MailIcon,
+    type: 'human_in_the_loop',
+    typeLabel: 'Human',
+    icon: HumanInTheLoopIcon,
     bgColor: 'var(--text-body)',
     isTerminal: true,
     rows: [
-      { title: 'To', value: '-' },
-      { title: 'Subject', value: '-' },
+      { title: 'Display Data', value: '-' },
+      { title: 'Resume Form', value: '-' },
     ],
     x: 0,
     y: 560,
@@ -121,6 +129,8 @@ export const ENTERPRISE_STAGE_BLOCKS: BlockDef[] = [
   {
     id: 'audit',
     name: 'Audit log',
+    type: 'table',
+    typeLabel: 'Table',
     icon: TableIcon,
     bgColor: 'var(--text-muted)',
     isTerminal: true,
@@ -142,7 +152,7 @@ export const ENTERPRISE_STAGE_EDGES: ReadonlyArray<readonly [string, string]> =
 ]
 
 /** Design-space bounding box of the layout above. */
-export const ENTERPRISE_STAGE_CANVAS = { width: 560, height: 680 } as const
+export const ENTERPRISE_STAGE_CANVAS = { width: 560, height: 712 } as const
 
 /** Where the main pane is within one loop pass. */
 export type EnterpriseLoopPhase = 'idle' | 'typing' | 'typed' | 'dispatch' | 'reply'
diff --git a/apps/sim/app/(landing)/enterprise/components/enterprise-product-previews/enterprise-limits-preview/enterprise-limits-preview.tsx b/apps/sim/app/(landing)/enterprise/components/enterprise-product-previews/enterprise-limits-preview/enterprise-limits-preview.tsx
new file mode 100644
index 00000000000..6776cb02c82
--- /dev/null
+++ b/apps/sim/app/(landing)/enterprise/components/enterprise-product-previews/enterprise-limits-preview/enterprise-limits-preview.tsx
@@ -0,0 +1,30 @@
+import { ChipInput } from '@sim/emcn'
+import { Building } from '@sim/emcn/icons'
+import { MenuPreviewHeader } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-header/menu-preview-header'
+import { SegmentedMeter } from '@/app/workspace/[workspaceId]/settings/components/segmented-meter/segmented-meter'
+import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
+
+/** The Enterprise seat allowance and usage-limit field use the settings page's own primitives. */
+export function EnterpriseLimitsPreview() {
+  return (
+    <div className='absolute top-16 right-[12%] bottom-[-40px] left-[12%] min-w-[360px] overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--bg)]'>
+      <MenuPreviewHeader icon={Building} title='Organization' />
+      <div className='flex flex-col gap-6 px-4 py-4'>
+        <SettingsSection label='Seats'>
+          <div className='flex flex-col gap-2.5'>
+            <span className='text-[var(--text-body)] text-small tabular-nums'>
+              18 used / 25 total
+            </span>
+            <SegmentedMeter used={18} total={25} segments={25} />
+            <p className='text-[var(--text-muted)] text-small'>
+              Contact support for enterprise seat changes.
+            </p>
+          </div>
+        </SettingsSection>
+        <SettingsSection label='Usage limit'>
+          <ChipInput aria-label='Example monthly credit limit' value='200000' readOnly />
+        </SettingsSection>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/enterprise/components/enterprise-product-previews/enterprise-limits-preview/index.ts b/apps/sim/app/(landing)/enterprise/components/enterprise-product-previews/enterprise-limits-preview/index.ts
new file mode 100644
index 00000000000..072e1ef42dd
--- /dev/null
+++ b/apps/sim/app/(landing)/enterprise/components/enterprise-product-previews/enterprise-limits-preview/index.ts
@@ -0,0 +1 @@
+export { EnterpriseLimitsPreview } from './enterprise-limits-preview'
diff --git a/apps/sim/app/(landing)/enterprise/components/enterprise-product-previews/enterprise-members-preview/enterprise-members-preview.tsx b/apps/sim/app/(landing)/enterprise/components/enterprise-product-previews/enterprise-members-preview/enterprise-members-preview.tsx
new file mode 100644
index 00000000000..d78368a0876
--- /dev/null
+++ b/apps/sim/app/(landing)/enterprise/components/enterprise-product-previews/enterprise-members-preview/enterprise-members-preview.tsx
@@ -0,0 +1,117 @@
+'use client'
+
+import { useState } from 'react'
+import { ChipDropdown, ChipInput } from '@sim/emcn'
+import { Building, Search } from '@sim/emcn/icons'
+import {
+  MemberRow,
+  MemberSection,
+} from '@/app/workspace/[workspaceId]/settings/components/member-list/member-list'
+
+const MEMBERS = [
+  { name: 'Morgan', email: 'morgan@example.com', role: 'owner' },
+  { name: 'Alex', email: 'alex@example.com', role: 'admin' },
+  { name: 'Jamie', email: 'jamie@example.com', role: 'member' },
+  { name: 'Casey', email: 'casey@example.com', role: 'member' },
+] as const
+
+const ORGANIZATION_ROLES = [
+  { value: 'admin', label: 'Admin' },
+  { value: 'member', label: 'Member' },
+] as const
+
+const WORKSPACE_ROLES = [
+  { value: 'read', label: 'Read' },
+  { value: 'write', label: 'Write' },
+  { value: 'admin', label: 'Admin' },
+] as const
+
+/** Real settings rows and role controls, with local sample data for the public preview. */
+export function EnterpriseMembersPreview() {
+  const [query, setQuery] = useState('')
+  const [organizationRoles, setOrganizationRoles] = useState<Record<string, string>>({})
+  const [workspaceRoles, setWorkspaceRoles] = useState<Record<string, string>>({})
+  const filteredMembers = MEMBERS.filter((member) =>
+    `${member.name} ${member.email}`.toLowerCase().includes(query.trim().toLowerCase())
+  )
+
+  return (
+    <>
+      <div className='-translate-x-1/2 absolute top-20 bottom-[-40px] left-1/2 w-[calc(100%-160px)] max-w-[1000px] overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--bg)] shadow-xs max-sm:top-8 max-sm:w-[calc(100%-40px)] max-lg:w-[calc(100%-80px)]'>
+        <div className='flex h-11 items-center gap-2 border-[var(--border)] border-b px-4'>
+          <Building aria-hidden='true' className='size-[14px] text-[var(--text-icon)]' />
+          <span className='text-[var(--text-primary)] text-base'>Organization</span>
+        </div>
+        <div className='mx-auto flex max-h-[392px] max-w-[760px] flex-col gap-6 overflow-y-auto overscroll-contain px-4 py-4 max-sm:max-h-[304px] max-sm:gap-6 max-sm:px-4 max-sm:py-5'>
+          <ChipInput
+            aria-label='Search example organization members'
+            icon={Search}
+            placeholder='Search members...'
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+          />
+          <MemberSection
+            label={`Members (${MEMBERS.length})`}
+            isEmpty={filteredMembers.length === 0}
+            emptyText='No matching members'
+          >
+            {filteredMembers.map((member) => (
+              <MemberRow
+                key={member.email}
+                name={member.name}
+                email={member.email}
+                image={null}
+                status=''
+                roleControl={
+                  <ChipDropdown
+                    aria-label={`Organization role for ${member.name}: ${ORGANIZATION_ROLES.find((option) => option.value === (organizationRoles[member.email] ?? member.role))?.label ?? 'Owner'}`}
+                    value={organizationRoles[member.email] ?? member.role}
+                    options={
+                      member.role === 'owner'
+                        ? [{ value: 'owner', label: 'Owner' }]
+                        : ORGANIZATION_ROLES
+                    }
+                    onChange={(role) =>
+                      setOrganizationRoles((roles) => ({ ...roles, [member.email]: role }))
+                    }
+                    disabled={member.role === 'owner'}
+                    matchTriggerWidth={false}
+                  />
+                }
+              />
+            ))}
+          </MemberSection>
+          <MemberSection
+            label={`Brightwave (${MEMBERS.length})`}
+            isEmpty={filteredMembers.length === 0}
+            emptyText='No matching workspace members'
+          >
+            {filteredMembers.map((member) => (
+              <MemberRow
+                key={member.email}
+                name={member.name}
+                email={member.email}
+                image={null}
+                status=''
+                roleControl={
+                  <ChipDropdown
+                    aria-label={`Workspace role for ${member.name}: ${WORKSPACE_ROLES.find((option) => option.value === (workspaceRoles[member.email] ?? (member.role === 'owner' ? 'admin' : 'write')))?.label}`}
+                    value={
+                      workspaceRoles[member.email] ?? (member.role === 'owner' ? 'admin' : 'write')
+                    }
+                    options={WORKSPACE_ROLES}
+                    onChange={(role) =>
+                      setWorkspaceRoles((roles) => ({ ...roles, [member.email]: role }))
+                    }
+                    disabled={member.role === 'owner'}
+                    matchTriggerWidth={false}
+                  />
+                }
+              />
+            ))}
+          </MemberSection>
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/apps/sim/app/(landing)/enterprise/components/enterprise-product-previews/enterprise-members-preview/index.ts b/apps/sim/app/(landing)/enterprise/components/enterprise-product-previews/enterprise-members-preview/index.ts
new file mode 100644
index 00000000000..dc5cde12642
--- /dev/null
+++ b/apps/sim/app/(landing)/enterprise/components/enterprise-product-previews/enterprise-members-preview/index.ts
@@ -0,0 +1 @@
+export { EnterpriseMembersPreview } from './enterprise-members-preview'
diff --git a/apps/sim/app/(landing)/enterprise/components/enterprise-product-previews/index.ts b/apps/sim/app/(landing)/enterprise/components/enterprise-product-previews/index.ts
new file mode 100644
index 00000000000..66bc157dd84
--- /dev/null
+++ b/apps/sim/app/(landing)/enterprise/components/enterprise-product-previews/index.ts
@@ -0,0 +1,2 @@
+export { EnterpriseLimitsPreview } from './enterprise-limits-preview'
+export { EnterpriseMembersPreview } from './enterprise-members-preview'
diff --git a/apps/sim/app/(landing)/enterprise/components/feature-graphics/build-methods-graphic.tsx b/apps/sim/app/(landing)/enterprise/components/feature-graphics/build-methods-graphic.tsx
deleted file mode 100644
index 51ec0ae5d82..00000000000
--- a/apps/sim/app/(landing)/enterprise/components/feature-graphics/build-methods-graphic.tsx
+++ /dev/null
@@ -1,337 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import { cn } from '@sim/emcn'
-import { ArrowUp, FolderCode, Mic, Paperclip, Plus, Slash } from '@sim/emcn/icons'
-import { ThinkingLoader } from '@/components/ui'
-import { FeatureGraphicShell } from '@/app/(landing)/enterprise/components/feature-graphics/feature-graphic-shell'
-import { FeaturePlatformPanel } from '@/app/(landing)/enterprise/components/feature-graphics/feature-platform-panel'
-
-interface CodeSegment {
-  text: string
-  tone?: 'muted' | 'primary'
-}
-
-/** The `support-agent.ts` contents, split into tone-colored typewriter segments. */
-const CODE_LINES: CodeSegment[][] = [
-  [
-    { text: 'import', tone: 'muted' },
-    { text: ' ' },
-    { text: '{ agent }', tone: 'primary' },
-    { text: ' ' },
-    { text: 'from', tone: 'muted' },
-    { text: ' ' },
-    { text: "'@sim/sdk'", tone: 'primary' },
-  ],
-  [
-    { text: 'const', tone: 'muted' },
-    { text: ' ' },
-    { text: 'supportAgent', tone: 'primary' },
-    { text: ' ' },
-    { text: '= await', tone: 'muted' },
-    { text: ' ' },
-    { text: 'agent', tone: 'primary' },
-  ],
-  [{ text: '  .workflow({' }],
-  [
-    { text: '    ' },
-    { text: 'name:', tone: 'muted' },
-    { text: ' ' },
-    { text: "'Support agent'", tone: 'primary' },
-    { text: ',' },
-  ],
-  [{ text: '    ' }, { text: 'instructions:', tone: 'muted' }],
-  [{ text: '    ' }, { text: "'Answer customer questions'", tone: 'primary' }, { text: ',' }],
-  [
-    { text: '    ' },
-    { text: 'tools:', tone: 'muted' },
-    { text: ' ' },
-    { text: '[zendesk, slack]', tone: 'primary' },
-    { text: ',' },
-  ],
-  [{ text: '  })' }],
-]
-
-const CODE_LINE_LENGTHS = CODE_LINES.map((line) =>
-  line.reduce((total, segment) => total + segment.text.length, 0)
-)
-const CODE_LINE_STARTS = CODE_LINE_LENGTHS.map((_, index) =>
-  CODE_LINE_LENGTHS.slice(0, index).reduce((total, length) => total + length, 0)
-)
-const CODE_TOTAL_CHARS = CODE_LINE_LENGTHS.reduce((total, length) => total + length, 0)
-
-const PROMPT = 'Create a support agent that answers customer questions'
-const REPLY =
-  'On it. Scaffolding a support agent with Zendesk and Slack that answers customer questions.'
-const REPLY_WORDS = REPLY.split(' ')
-
-const CODE_START_MS = 500
-const CODE_CHAR_MS = 24
-const COMPOSER_IN_MS = 5300
-const PROMPT_START_MS = 6000
-const PROMPT_CHAR_MS = 55
-const SEND_MS = 9600
-const CHAT_ENTER_MS = 10100
-const REPLY_MS = 11600
-const REPLY_WORD_MS = 80
-const FADE_MS = 15100
-const LOOP_MS = 15700
-
-type BuildMethodsPhase =
-  | 'idle'
-  | 'code'
-  | 'composer'
-  | 'prompt'
-  | 'exit'
-  | 'chat'
-  | 'reply'
-  | 'fade'
-
-const SEGMENT_TONE_CLASS = {
-  muted: 'text-[var(--text-muted)]',
-  primary: 'text-[var(--text-primary)]',
-} as const
-
-/** Renders one code line clipped to the number of characters typed so far. */
-function renderCodeLine(segments: CodeSegment[], visibleChars: number) {
-  const rendered = []
-  let remaining = visibleChars
-  for (let index = 0; index < segments.length && remaining > 0; index++) {
-    const segment = segments[index]
-    rendered.push(
-      <span key={index} className={segment.tone && SEGMENT_TONE_CLASS[segment.tone]}>
-        {segment.text.slice(0, remaining)}
-      </span>
-    )
-    remaining -= segment.text.length
-  }
-  return rendered
-}
-
-/**
- * Decorative loop for the "Build visually or with code" tile: the
- * `support-agent.ts` editor types itself out, the platform composer slides up
- * and receives a typed prompt, and the send beat swaps the editor for a
- * headerless Mothership chat surface — the same agent built from code or from
- * a message. All window bodies sit on `--white`, matching the hero surfaces.
- *
- * Window handoffs are exit-before-enter orchestration, never crossfades: the
- * editor fully exits (slides down and fades over 380ms) during the `exit`
- * phase, the stage holds empty for a beat, and only then does the chat enter
- * (slide-up fade, 420ms). The composer is a pure transform slide from below
- * the shell's clipped edge — its opacity never animates, so it never reads as
- * a translucent layer over the editor. Panel transitions are disabled on the
- * `idle` reset so state snaps back while the scene-level fade has the tile at
- * zero opacity. Local timers + CSS transitions only, mirroring the other
- * landing loops; under `prefers-reduced-motion` it renders the finished
- * editor + composer as a static frame.
- */
-export function BuildMethodsGraphic() {
-  const [phase, setPhase] = useState<BuildMethodsPhase>('idle')
-  const [typedCodeChars, setTypedCodeChars] = useState(0)
-  const [typedPromptChars, setTypedPromptChars] = useState(0)
-  const [revealedReplyWords, setRevealedReplyWords] = useState(0)
-  const [reducedMotion, setReducedMotion] = useState(false)
-
-  useEffect(() => {
-    const media = window.matchMedia('(prefers-reduced-motion: reduce)')
-    const timeouts: ReturnType<typeof setTimeout>[] = []
-    const intervals: ReturnType<typeof setInterval>[] = []
-
-    const clearScheduled = () => {
-      for (const timeout of timeouts) clearTimeout(timeout)
-      for (const interval of intervals) clearInterval(interval)
-      timeouts.length = 0
-      intervals.length = 0
-    }
-
-    const showFinished = () => {
-      setReducedMotion(true)
-      setPhase('composer')
-      setTypedCodeChars(CODE_TOTAL_CHARS)
-      setTypedPromptChars(0)
-      setRevealedReplyWords(0)
-    }
-
-    const startCodeTyping = () => {
-      setPhase('code')
-      const startedAt = performance.now()
-      const interval = setInterval(() => {
-        const elapsed = performance.now() - startedAt
-        const next = Math.min(Math.floor(elapsed / CODE_CHAR_MS) + 1, CODE_TOTAL_CHARS)
-        setTypedCodeChars(next)
-        if (next >= CODE_TOTAL_CHARS) clearInterval(interval)
-      }, CODE_CHAR_MS)
-      intervals.push(interval)
-    }
-
-    const startPromptTyping = () => {
-      setPhase('prompt')
-      const startedAt = performance.now()
-      const interval = setInterval(() => {
-        const elapsed = performance.now() - startedAt
-        const next = Math.min(Math.floor(elapsed / PROMPT_CHAR_MS) + 1, PROMPT.length)
-        setTypedPromptChars(next)
-        if (next >= PROMPT.length) clearInterval(interval)
-      }, PROMPT_CHAR_MS)
-      intervals.push(interval)
-    }
-
-    const startReply = () => {
-      setPhase('reply')
-      const startedAt = performance.now()
-      const interval = setInterval(() => {
-        const elapsed = performance.now() - startedAt
-        const next = Math.min(Math.floor(elapsed / REPLY_WORD_MS) + 1, REPLY_WORDS.length)
-        setRevealedReplyWords(next)
-        if (next >= REPLY_WORDS.length) clearInterval(interval)
-      }, REPLY_WORD_MS)
-      intervals.push(interval)
-    }
-
-    const runLoop = () => {
-      clearScheduled()
-      setReducedMotion(false)
-      setPhase('idle')
-      setTypedCodeChars(0)
-      setTypedPromptChars(0)
-      setRevealedReplyWords(0)
-
-      timeouts.push(setTimeout(startCodeTyping, CODE_START_MS))
-      timeouts.push(setTimeout(() => setPhase('composer'), COMPOSER_IN_MS))
-      timeouts.push(setTimeout(startPromptTyping, PROMPT_START_MS))
-      timeouts.push(setTimeout(() => setPhase('exit'), SEND_MS))
-      timeouts.push(setTimeout(() => setPhase('chat'), CHAT_ENTER_MS))
-      timeouts.push(setTimeout(startReply, REPLY_MS))
-      timeouts.push(setTimeout(() => setPhase('fade'), FADE_MS))
-      timeouts.push(setTimeout(runLoop, LOOP_MS))
-    }
-
-    const syncMotionPreference = () => {
-      clearScheduled()
-      if (media.matches) {
-        showFinished()
-        return
-      }
-      runLoop()
-    }
-
-    syncMotionPreference()
-    media.addEventListener('change', syncMotionPreference)
-    return () => {
-      media.removeEventListener('change', syncMotionPreference)
-      clearScheduled()
-    }
-  }, [])
-
-  const codeTypingActive = phase === 'code' && typedCodeChars < CODE_TOTAL_CHARS
-  const composerVisible = reducedMotion || !['idle', 'code'].includes(phase)
-  const editorExited = !reducedMotion && ['exit', 'chat', 'reply', 'fade'].includes(phase)
-  const chatOpen = !reducedMotion && ['chat', 'reply', 'fade'].includes(phase)
-  const promptText = phase === 'prompt' || phase === 'exit' ? PROMPT.slice(0, typedPromptChars) : ''
-  const replyText = REPLY_WORDS.slice(0, revealedReplyWords).join(' ')
-  const lastStartedLine = CODE_LINE_STARTS.reduce(
-    (last, start, index) => (typedCodeChars > start ? index : last),
-    -1
-  )
-
-  return (
-    <FeatureGraphicShell>
-      <div
-        className={cn(
-          'absolute inset-0 transition-opacity duration-300 ease-out motion-reduce:transition-none',
-          phase === 'fade' ? 'opacity-0' : 'opacity-100'
-        )}
-      >
-        <FeaturePlatformPanel
-          className={cn(
-            'top-5 bg-[var(--white)] transition-[transform,opacity] [transition-duration:380ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
-            phase === 'idle' && 'transition-none',
-            editorExited ? 'translate-y-16 opacity-0' : 'translate-y-0 opacity-100'
-          )}
-          icon={FolderCode}
-          title='support-agent.ts'
-        >
-          <div className='min-h-[190px] space-y-2 p-4 font-mono text-caption leading-[1.7]'>
-            {CODE_LINES.map((line, index) =>
-              typedCodeChars > CODE_LINE_STARTS[index] ? (
-                <div key={index} className='flex gap-3'>
-                  <span className='w-3 select-none text-right text-[var(--text-muted)]'>
-                    {index + 1}
-                  </span>
-                  <code>
-                    {renderCodeLine(line, typedCodeChars - CODE_LINE_STARTS[index])}
-                    {codeTypingActive && index === lastStartedLine && (
-                      <span className='ml-px inline-block h-[1.1em] w-px translate-y-[2px] animate-pulse bg-[var(--text-primary)] align-text-bottom' />
-                    )}
-                  </code>
-                </div>
-              ) : null
-            )}
-          </div>
-        </FeaturePlatformPanel>
-
-        <div
-          aria-hidden='true'
-          className={cn(
-            'absolute top-5 right-0 bottom-0 left-0 overflow-hidden rounded-tl-xl border-[var(--border-1)] border-t border-l bg-[var(--white)] shadow-xs transition-[transform,opacity] [transition-duration:420ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
-            phase === 'idle' && 'transition-none',
-            chatOpen ? 'translate-y-0 opacity-100' : 'translate-y-6 opacity-0'
-          )}
-        >
-          <div className='flex flex-col gap-3 p-4'>
-            <div className='max-w-[80%] self-end rounded-lg bg-[var(--surface-3)] px-3 py-2 text-[var(--text-primary)] text-caption leading-[1.5]'>
-              {PROMPT}
-            </div>
-            {phase === 'chat' && <ThinkingLoader size={18} phase labelRatio={0.6} />}
-            <p
-              className={cn(
-                'text-[var(--text-primary)] text-caption leading-[1.6] transition-opacity duration-200 ease-out',
-                phase === 'reply' || phase === 'fade' ? 'opacity-100' : 'opacity-0'
-              )}
-            >
-              {replyText}
-            </p>
-          </div>
-        </div>
-
-        <div
-          className={cn(
-            'absolute right-3 bottom-5 left-5 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-xs transition-transform [transition-duration:450ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
-            phase === 'idle' && 'transition-none',
-            composerVisible ? 'translate-y-0' : 'translate-y-[130%]'
-          )}
-        >
-          <p
-            className={cn(
-              'px-1 text-caption',
-              promptText ? 'text-[var(--text-primary)]' : 'text-[var(--text-muted)]'
-            )}
-          >
-            {promptText || 'Send message to Sim'}
-            {phase === 'prompt' && typedPromptChars < PROMPT.length && (
-              <span className='ml-px inline-block h-[1.1em] w-px translate-y-[2px] animate-pulse bg-[var(--text-primary)] align-text-bottom' />
-            )}
-          </p>
-          <div className='mt-2 flex items-center gap-1'>
-            <span className='flex size-6 items-center justify-center'>
-              <Plus className='size-[14px] text-[var(--text-icon)]' />
-            </span>
-            <span className='flex size-6 items-center justify-center'>
-              <Paperclip className='size-[14px] text-[var(--text-icon)]' />
-            </span>
-            <span className='flex size-6 items-center justify-center'>
-              <Slash className='size-[14px] text-[var(--text-icon)]' />
-            </span>
-            <span className='ml-auto flex size-6 items-center justify-center'>
-              <Mic className='size-[14px] text-[var(--text-icon)]' />
-            </span>
-            <span className='flex size-7 items-center justify-center rounded-full bg-[var(--text-primary)]'>
-              <ArrowUp className='size-[14px] text-[var(--text-inverse)]' />
-            </span>
-          </div>
-        </div>
-      </div>
-    </FeatureGraphicShell>
-  )
-}
diff --git a/apps/sim/app/(landing)/enterprise/components/feature-graphics/constants.ts b/apps/sim/app/(landing)/enterprise/components/feature-graphics/constants.ts
new file mode 100644
index 00000000000..096ec12885b
--- /dev/null
+++ b/apps/sim/app/(landing)/enterprise/components/feature-graphics/constants.ts
@@ -0,0 +1,21 @@
+import type { CSSProperties } from 'react'
+
+/**
+ * Loader ink for the tiles' inverse grounds - the dark Deploy button and the
+ * charcoal router hub on the light page, both of which turn light once the
+ * page goes dark. The loader there takes the *opposite* theme's thinking-loader
+ * ink, because the page theme would otherwise ink it to match the very ground
+ * it sits on: light grey (the `.dark` tokens) on the light page, the page's own
+ * dark ink (the `.light` tokens) in dark mode. Literals, because no token names
+ * the other theme's ink; {@link INVERSE_LOADER_INK_CLASS} carries the pair as
+ * custom properties and {@link INVERSE_LOADER_INK_STYLE} points the loader at
+ * them.
+ */
+export const INVERSE_LOADER_INK_CLASS =
+  '[--inverse-ink-inner:#a7a7a7] [--inverse-ink-outer:#d6d6d6] [--inverse-ink-glow:rgba(255,255,255,0.9)] dark:[--inverse-ink-inner:#2c2c2c] dark:[--inverse-ink-outer:#5f5f5f] dark:[--inverse-ink-glow:rgba(255,255,255,0.6)]'
+
+export const INVERSE_LOADER_INK_STYLE = {
+  '--tl-grad-inner': 'var(--inverse-ink-inner)',
+  '--tl-grad-outer': 'var(--inverse-ink-outer)',
+  '--tl-glow': 'var(--inverse-ink-glow)',
+} as CSSProperties
diff --git a/apps/sim/app/(landing)/enterprise/components/feature-graphics/deploy-graphic.tsx b/apps/sim/app/(landing)/enterprise/components/feature-graphics/deploy-graphic.tsx
index 7bdf0e94c91..9d27f7c85d8 100644
--- a/apps/sim/app/(landing)/enterprise/components/feature-graphics/deploy-graphic.tsx
+++ b/apps/sim/app/(landing)/enterprise/components/feature-graphics/deploy-graphic.tsx
@@ -1,23 +1,14 @@
-import type { CSSProperties } from 'react'
 import { ChipTag, chipContentLabelClass, chipGeometryClass, cn } from '@sim/emcn'
 import { CircleCheck, Lock } from '@sim/emcn/icons'
 import { ThinkingLoader } from '@/components/ui'
 import colorMixFallbacks from '@/app/(landing)/components/shared/color-mix-fallbacks/color-mix-fallbacks.module.css'
+import {
+  INVERSE_LOADER_INK_CLASS,
+  INVERSE_LOADER_INK_STYLE,
+} from '@/app/(landing)/enterprise/components/feature-graphics/constants'
 import styles from '@/app/(landing)/enterprise/components/feature-graphics/deploy-graphic.module.css'
 import { FeatureGraphicShell } from '@/app/(landing)/enterprise/components/feature-graphics/feature-graphic-shell'
 
-/**
- * The ThinkingLoader's light-grey material (its dark-surface theme from
- * `thinking-loader.module.css`), asserted inline because the always-light
- * landing would otherwise ink the loader dark — invisible on the dark
- * Deploy button.
- */
-const DEPLOY_LOADER_INK = {
-  '--tl-grad-inner': '#a7a7a7',
-  '--tl-grad-outer': '#d6d6d6',
-  '--tl-glow': 'rgba(255, 255, 255, 0.9)',
-} as CSSProperties
-
 /**
  * The moment of a one-click deploy, told top to bottom: the agent being
  * shipped, the Deploy button, and a
@@ -55,10 +46,8 @@ const DEPLOY_LOADER_INK = {
  * but not left, so this centered vignette adds matching right padding to land
  * on the tile's visible center instead of the bled slot's center.
  *
- * The browser window is pinned to `h-24` (96px) so its top edge lands on the
- * same line as the neighboring build-methods tile's composer (76px tall +
- * `bottom-5`), keeping the tile row horizontally aligned; both connector
- * lines are `flex-1` with mirrored margins, so the Deploy button stays
+ * The browser window is pinned to `h-24` (96px). Both connector lines are
+ * `flex-1` with mirrored margins, so the Deploy button stays
  * equidistant between the agent pill and the browser at any tile height.
  *
  * Every label is parametrizable so other landing pages (engineering,
@@ -116,7 +105,12 @@ export function DeployGraphic({
             'mx-0 mt-2.5 inline-flex h-9 rounded-[10px] bg-[var(--text-muted)] px-3 text-[var(--text-inverse)]'
           )}
         >
-          <ThinkingLoader variant='relay' size={18} style={DEPLOY_LOADER_INK} />
+          <ThinkingLoader
+            variant='relay'
+            size={18}
+            className={INVERSE_LOADER_INK_CLASS}
+            style={INVERSE_LOADER_INK_STYLE}
+          />
           <span className={cn(chipContentLabelClass, 'text-[15px] text-current')}>
             {buttonLabel}
           </span>
diff --git a/apps/sim/app/(landing)/enterprise/components/feature-graphics/feature-graphic-shell.tsx b/apps/sim/app/(landing)/enterprise/components/feature-graphics/feature-graphic-shell.tsx
index f61fe4eeaab..7f4362c4f90 100644
--- a/apps/sim/app/(landing)/enterprise/components/feature-graphics/feature-graphic-shell.tsx
+++ b/apps/sim/app/(landing)/enterprise/components/feature-graphics/feature-graphic-shell.tsx
@@ -1,7 +1,15 @@
 import type { ReactNode } from 'react'
+import { cn } from '@sim/emcn'
+
+/**
+ * `tile` is the solutions/platform feature-tile crop (right-bleed, 420px cap).
+ * `portrait` fills a tall homepage bloc with no bleed cap.
+ */
+export type FeatureGraphicVariant = 'tile' | 'portrait'
 
 interface FeatureGraphicShellProps {
   children: ReactNode
+  variant?: FeatureGraphicVariant
 }
 
 /**
@@ -14,11 +22,22 @@ interface FeatureGraphicShellProps {
  * container reaches 500px inside `sm`..`lg`), the cap lifts so window-chrome
  * graphics keep bleeding off the tile's right edge and centered vignettes
  * center on the true wide slot.
+ *
+ * Homepage portrait blocs pass {@link FeatureGraphicVariant} `portrait` so
+ * the shell fills the tall stage instead of the tile's bleed crop.
  */
-export function FeatureGraphicShell({ children }: FeatureGraphicShellProps) {
+export function FeatureGraphicShell({ children, variant = 'tile' }: FeatureGraphicShellProps) {
+  const portrait = variant === 'portrait'
+
   return (
-    <div className='relative mx-auto h-full min-h-[260px] w-full max-w-[420px] overflow-hidden sm:max-lg:[@container(min-width:500px)]:max-w-none'>
-      <div className='relative h-full min-h-[260px]'>{children}</div>
+    <div
+      className={cn(
+        'relative h-full w-full overflow-hidden',
+        !portrait &&
+          'mx-auto min-h-[260px] max-w-[420px] sm:max-lg:[@container(min-width:500px)]:max-w-none'
+      )}
+    >
+      <div className={cn('relative h-full', !portrait && 'min-h-[260px]')}>{children}</div>
     </div>
   )
 }
diff --git a/apps/sim/app/(landing)/enterprise/components/feature-graphics/feature-platform-panel.tsx b/apps/sim/app/(landing)/enterprise/components/feature-graphics/feature-platform-panel.tsx
index 31886be5f2c..89e50076017 100644
--- a/apps/sim/app/(landing)/enterprise/components/feature-graphics/feature-platform-panel.tsx
+++ b/apps/sim/app/(landing)/enterprise/components/feature-graphics/feature-platform-panel.tsx
@@ -1,11 +1,18 @@
 import type { ComponentType, ReactNode, SVGProps } from 'react'
 import { cn } from '@sim/emcn'
+import { LANDING_STAGE_WINDOW_RADIUS } from '@/app/(landing)/components/landing-layout'
 
 interface FeaturePlatformPanelProps {
   children: ReactNode
   className?: string
   icon: ComponentType<SVGProps<SVGSVGElement>>
   title: string
+  /**
+   * Full inset window (all sides rounded and stroked) for tall portrait
+   * blocs. Default is the feature-tile bleed: top-left radius, open right
+   * and bottom edges.
+   */
+  framed?: boolean
 }
 
 /**
@@ -20,12 +27,16 @@ export function FeaturePlatformPanel({
   className,
   icon: Icon,
   title,
+  framed = false,
 }: FeaturePlatformPanelProps) {
   return (
     <div
       aria-hidden='true'
       className={cn(
-        'absolute right-0 bottom-0 left-0 overflow-hidden rounded-tl-xl border-[var(--border-1)] border-t border-l bg-[var(--surface-2)] shadow-xs',
+        'absolute overflow-hidden bg-[var(--surface-2)] shadow-xs dark:bg-[var(--surface-4)]',
+        framed
+          ? cn('inset-0 border border-[var(--border)]', LANDING_STAGE_WINDOW_RADIUS)
+          : 'right-0 bottom-0 left-0 rounded-tl-xl border-[var(--border)] border-t border-l',
         className
       )}
     >
diff --git a/apps/sim/app/(landing)/enterprise/components/feature-graphics/index.ts b/apps/sim/app/(landing)/enterprise/components/feature-graphics/index.ts
index 36f4dd974bd..2001167c2d9 100644
--- a/apps/sim/app/(landing)/enterprise/components/feature-graphics/index.ts
+++ b/apps/sim/app/(landing)/enterprise/components/feature-graphics/index.ts
@@ -1,13 +1,10 @@
 export { AccessControlGraphic } from './access-control-graphic'
 export { AuditTrailGraphic } from './audit-trail-graphic'
-export { BuildMethodsGraphic } from './build-methods-graphic'
 export { DeployGraphic } from './deploy-graphic'
-export { FeatureGraphicShell } from './feature-graphic-shell'
+export { FeatureGraphicShell, type FeatureGraphicVariant } from './feature-graphic-shell'
 export { FeaturePlatformPanel } from './feature-platform-panel'
 export { ItPlatformTeamsGraphic } from './it-platform-teams-graphic'
-export { LifecycleGraphic } from './lifecycle-graphic'
 export { OperationsTeamsGraphic } from './operations-teams-graphic'
-export { RollbackGraphic } from './rollback-graphic'
 export { RunMonitoringGraphic } from './run-monitoring-graphic'
 export { StagingGraphic } from './staging-graphic'
 export { StandardsGraphic } from './standards-graphic'
diff --git a/apps/sim/app/(landing)/enterprise/components/feature-graphics/lifecycle-graphic.module.css b/apps/sim/app/(landing)/enterprise/components/feature-graphics/lifecycle-graphic.module.css
deleted file mode 100644
index 47f80cff721..00000000000
--- a/apps/sim/app/(landing)/enterprise/components/feature-graphics/lifecycle-graphic.module.css
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * The LifecycleGraphic's only motion: a soft ring pulse blooming from the
- * live version node every 6s — quiet state confirmation rather than travel,
- * keeping this tile stiller than the deploy tile beside it. The spine's
- * connector lines are static (styled in the TSX). Under
- * prefers-reduced-motion the pulse is removed and the node sits static.
- */
-
-.livePulse {
-  animation: lifecycle-live-pulse 6s ease-out infinite;
-}
-
-@keyframes lifecycle-live-pulse {
-  0%,
-  20% {
-    box-shadow: 0 0 0 0 color-mix(in srgb, var(--text-secondary) 35%, transparent);
-  }
-  36% {
-    box-shadow: 0 0 0 5px color-mix(in srgb, var(--text-secondary) 0%, transparent);
-  }
-  100% {
-    box-shadow: 0 0 0 0 color-mix(in srgb, var(--text-secondary) 0%, transparent);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .livePulse {
-    animation: none;
-  }
-}
diff --git a/apps/sim/app/(landing)/enterprise/components/feature-graphics/lifecycle-graphic.tsx b/apps/sim/app/(landing)/enterprise/components/feature-graphics/lifecycle-graphic.tsx
deleted file mode 100644
index 34c96176423..00000000000
--- a/apps/sim/app/(landing)/enterprise/components/feature-graphics/lifecycle-graphic.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import { ChipTag, cn } from '@sim/emcn'
-import { Clock } from '@sim/emcn/icons'
-import colorMixFallbacks from '@/app/(landing)/components/shared/color-mix-fallbacks/color-mix-fallbacks.module.css'
-import { FeatureGraphicShell } from '@/app/(landing)/enterprise/components/feature-graphics/feature-graphic-shell'
-import styles from '@/app/(landing)/enterprise/components/feature-graphics/lifecycle-graphic.module.css'
-
-/** Older timeline entries below the live/saved pair, quietest first to render. */
-const OLDER_VERSIONS = [
-  { detail: 'Published Jun 28', label: 'v1' },
-  { detail: 'Saved Jun 21', label: 'v0.9' },
-  { detail: 'Saved Jun 14', label: 'v0.8' },
-] as const
-
-/**
- * A version-history timeline housed in an outlined window shell that mirrors
- * the build tile's editor window exactly — same slot geometry (`top-5`,
- * `left-0` so the window left-aligns with the tile's text column, bled
- * right/bottom), same `rounded-tl-xl` radius, same top + left
- * hairline `--border-1` edges — but drawn with no fill so the tile shows
- * through: the two side-by-side tiles read as the same window in the same
- * place, one filled, one outlined. An outlined title bar ("Versions" with a
- * `Clock` icon in the build header's `size-6` `rounded-md` icon box — drawn
- * as a `--border-1` hairline outline instead of the filled grey — no fill,
- * `--border-1` bottom rule at the build header's `h-12` height) crowns the
- * window. Inside, a quiet vertical spine of faint
- * static 1px connector segments (the light analog of the deploy tile's guide
- * lines) links version nodes bottom-up — older versions lower and
- * progressively quieter, v3 at the top as the live entry. The live row is a
- * white pill card following the nested-corner radius rule (6px ChipTag + 6px
- * gap = 12px container), echoing the deploy tile's agent header; older rows
- * are bare text rows that fade toward `--text-muted` (the v2 `Saved`
- * tag's fill stepped up to `--surface-6` so the pill stays legible on
- * the grey ground), and a mask gradient
- * dissolves the oldest entries so the timeline reads as continuing into
- * history past the window's bottom edge.
- *
- * The only motion is a soft ring pulse on the live node (from
- * `lifecycle-graphic.module.css`), removed under `prefers-reduced-motion`.
- */
-export function LifecycleGraphic() {
-  return (
-    <FeatureGraphicShell>
-      <div
-        aria-hidden='true'
-        className='absolute top-5 right-0 bottom-0 left-0 rounded-tl-xl border-[var(--border-1)] border-t border-l'
-      >
-        <div className='flex h-12 items-center gap-2 border-[var(--border-1)] border-b px-4'>
-          <span className='flex size-6 items-center justify-center rounded-md border border-[var(--border-1)]'>
-            <Clock className='size-[14px] text-[var(--text-icon)]' />
-          </span>
-          <span className='text-[var(--text-primary)] text-base'>Versions</span>
-        </div>
-        <div className='flex flex-col p-4 [mask-image:linear-gradient(to_bottom,black_45%,transparent_98%)]'>
-          <div className='flex items-center gap-3'>
-            <span className='flex w-2.5 justify-center'>
-              <span
-                className={cn('size-2.5 rounded-full bg-[var(--text-primary)]', styles.livePulse)}
-              />
-            </span>
-            <span className='flex min-w-0 flex-1 items-center gap-2'>
-              <span className='flex items-center gap-1.5 rounded-[12px] bg-[var(--white)] py-1.5 pr-1.5 pl-2.5 shadow-xs'>
-                <span className='text-[var(--text-primary)] text-small'>v3</span>
-                <ChipTag variant='solid'>Live</ChipTag>
-              </span>
-              <span className='truncate text-[var(--text-muted)] text-caption'>
-                Published today
-              </span>
-            </span>
-          </div>
-
-          <div className='flex gap-3'>
-            <span className='flex w-2.5 justify-center'>
-              <span className={cn('h-9 w-px', colorMixFallbacks.mutedBackground35)} />
-            </span>
-          </div>
-
-          <div className='flex items-center gap-3'>
-            <span className='flex w-2.5 justify-center'>
-              <span className='size-2 rounded-full border border-[var(--text-muted)] bg-[var(--surface-3)]' />
-            </span>
-            <span className='flex min-w-0 flex-1 items-center gap-2'>
-              <span className='text-[var(--text-secondary)] text-small'>v2</span>
-              <ChipTag variant='mono' className='bg-[var(--surface-6)]'>
-                Saved
-              </ChipTag>
-              <span className='truncate text-[var(--text-muted)] text-caption'>
-                Published yesterday
-              </span>
-            </span>
-          </div>
-
-          {OLDER_VERSIONS.map((version) => (
-            <div key={version.label} className='flex flex-col'>
-              <div className='flex gap-3'>
-                <span className='flex w-2.5 justify-center'>
-                  <span className={cn('h-9 w-px', colorMixFallbacks.mutedBackground35)} />
-                </span>
-              </div>
-              <div className='flex items-center gap-3'>
-                <span className='flex w-2.5 justify-center'>
-                  <span
-                    className={cn(
-                      'size-2 rounded-full border bg-[var(--surface-3)]',
-                      colorMixFallbacks.mutedBorder60
-                    )}
-                  />
-                </span>
-                <span className='flex min-w-0 flex-1 items-center gap-2'>
-                  <span className='text-[var(--text-muted)] text-small'>{version.label}</span>
-                  <span className='truncate text-[var(--text-muted)] text-caption'>
-                    {version.detail}
-                  </span>
-                </span>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </FeatureGraphicShell>
-  )
-}
diff --git a/apps/sim/app/(landing)/enterprise/components/feature-graphics/operations-teams-graphic.tsx b/apps/sim/app/(landing)/enterprise/components/feature-graphics/operations-teams-graphic.tsx
index f8d895cd971..9b8bc35e650 100644
--- a/apps/sim/app/(landing)/enterprise/components/feature-graphics/operations-teams-graphic.tsx
+++ b/apps/sim/app/(landing)/enterprise/components/feature-graphics/operations-teams-graphic.tsx
@@ -1,7 +1,10 @@
-import type { CSSProperties } from 'react'
 import { cn } from '@sim/emcn'
 import { ThinkingLoader } from '@/components/ui'
 import colorMixFallbacks from '@/app/(landing)/components/shared/color-mix-fallbacks/color-mix-fallbacks.module.css'
+import {
+  INVERSE_LOADER_INK_CLASS,
+  INVERSE_LOADER_INK_STYLE,
+} from '@/app/(landing)/enterprise/components/feature-graphics/constants'
 import { FeatureGraphicShell } from '@/app/(landing)/enterprise/components/feature-graphics/feature-graphic-shell'
 import styles from '@/app/(landing)/enterprise/components/feature-graphics/operations-teams-graphic.module.css'
 
@@ -16,19 +19,6 @@ import styles from '@/app/(landing)/enterprise/components/feature-graphics/opera
  */
 const CANVAS = { WIDTH: 280, HEIGHT: 248 } as const
 
-/**
- * The ThinkingLoader's light-grey material (its dark-surface theme from
- * `thinking-loader.module.css`), asserted inline exactly as the deploy
- * tile's Deploy button does — the always-light landing would otherwise
- * ink the loader dark, invisible on the dark tile ground showing through
- * the outlined router hub.
- */
-const ROUTER_LOADER_INK = {
-  '--tl-grad-inner': '#a7a7a7',
-  '--tl-grad-outer': '#d6d6d6',
-  '--tl-glow': 'rgba(255, 255, 255, 0.9)',
-} as CSSProperties
-
 interface Port {
   /** Tailwind classes positioning the size-2 port dot, centered on the port's canvas x/y. */
   dotClass: string
@@ -314,7 +304,11 @@ export function OperationsTeamsGraphic({
                 styles.routerBloom
               )}
             >
-              <ThinkingLoader size={36} style={ROUTER_LOADER_INK} />
+              <ThinkingLoader
+                size={36}
+                className={INVERSE_LOADER_INK_CLASS}
+                style={INVERSE_LOADER_INK_STYLE}
+              />
             </div>
           </div>
         </div>
diff --git a/apps/sim/app/(landing)/enterprise/components/feature-graphics/rollback-graphic.tsx b/apps/sim/app/(landing)/enterprise/components/feature-graphics/rollback-graphic.tsx
deleted file mode 100644
index 20120409048..00000000000
--- a/apps/sim/app/(landing)/enterprise/components/feature-graphics/rollback-graphic.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import { Button, ChipTag, cn } from '@sim/emcn'
-import { Undo } from '@sim/emcn/icons'
-import colorMixFallbacks from '@/app/(landing)/components/shared/color-mix-fallbacks/color-mix-fallbacks.module.css'
-import { FeatureGraphicShell } from '@/app/(landing)/enterprise/components/feature-graphics/feature-graphic-shell'
-
-/**
- * Rollback told as a "return to known-good" gesture inside the lifecycle
- * tile's outlined window chrome: the window is a 1px `--border-1` hairline
- * outline with no fill (tile grey showing through), anchored to the text
- * column's left edge (`left-0`, `top-5`) and bleeding off the right and
- * bottom edges with a `rounded-tl-xl` top-left corner — the same slot
- * geometry as the build and lifecycle windows. A "Version history" title
- * bar with a right-aligned `Production` mono ChipTag (its fill stepped up
- * to `--surface-6` so the pill stays legible on the grey ground) crowns
- * the window at the family's `h-12` header height, ruled by a hairline
- * divider.
- *
- * Inside, a short newest-first version rail runs down the left gutter —
- * v4 as the quiet current row (its `Current` tag on the grey-ground
- * `--surface-6` pill fill), then a plain vertical hairline connector
- * down to v3, the lifecycle timeline's spine language. v3 is the tile's
- * highlight: the node fills solid and
- * the row lifts onto a white card (`--white` fill, 1px `--border-1`
- * hairline, nested `rounded-lg` inside the `rounded-tl-xl` window,
- * `shadow-xs`) pairing "v3 · Stable · Maya Chen" with the tile's
- * strongest element, the solid Roll back button led by a small `Undo`
- * glyph inked in the button's inverse text color. A quieter v2 row
- * dissolves through a mask gradient below, implying the history continues
- * past the window's bled bottom edge — the lifecycle tile's fade device.
- *
- * The window bleeds `2rem` past the tile's visible right edge (`1.5rem`
- * under `max-lg`), so the header and body carry matching extra right
- * padding (`pr-12 max-lg:pr-10` = the bleed plus the usual `1rem` gutter)
- * to keep the Production tag and the v3 card's Roll back button fully
- * inside the visible tile.
- *
- * The rail is fully static. The connector hairlines are absolutely
- * positioned inside fixed-height spacer rows so they can extend past the
- * row box into the adjacent rows' empty gutter space, ending a couple of
- * pixels from each node — the lifecycle spine's tight node-to-line
- * clearance — without disturbing the flow layout.
- */
-export function RollbackGraphic() {
-  return (
-    <FeatureGraphicShell>
-      <div
-        aria-hidden='true'
-        className='absolute top-5 right-0 bottom-0 left-0 rounded-tl-xl border-[var(--border-1)] border-t border-l'
-      >
-        <div className='flex h-12 items-center justify-between gap-2 border-[var(--border-1)] border-b px-4 pr-12 max-lg:pr-10'>
-          <span className='min-w-0 truncate text-[var(--text-primary)] text-base'>
-            Version history
-          </span>
-          <ChipTag variant='mono' className='bg-[var(--surface-6)]'>
-            Production
-          </ChipTag>
-        </div>
-
-        <div className='p-4 pr-12 [mask-image:linear-gradient(to_bottom,black_55%,transparent_98%)] max-lg:pr-10'>
-          <div className='flex items-center gap-3'>
-            <span className='flex w-2.5 shrink-0 justify-center'>
-              <span className='size-2 rounded-full border border-[var(--text-muted)] bg-[var(--surface-3)]' />
-            </span>
-            <span className='flex min-w-0 flex-1 items-center gap-2'>
-              <span className='text-[var(--text-secondary)] text-small'>v4</span>
-              <ChipTag variant='mono' className='bg-[var(--surface-6)]'>
-                Current
-              </ChipTag>
-            </span>
-            <span className='shrink-0 text-[var(--text-muted)] text-caption'>Published 2h ago</span>
-          </div>
-
-          <div className='flex'>
-            <span className='relative flex h-[38px] w-2.5 shrink-0 justify-center'>
-              <span
-                className={cn(
-                  '-top-[4px] -bottom-[24px] absolute w-px',
-                  colorMixFallbacks.mutedBackground35
-                )}
-              />
-            </span>
-          </div>
-
-          <div className='flex items-center gap-3'>
-            <span className='flex w-2.5 shrink-0 justify-center'>
-              <span className='size-2.5 rounded-full bg-[var(--text-primary)]' />
-            </span>
-            <div className='flex min-w-0 flex-1 items-center gap-3 rounded-lg border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-xs'>
-              <span className='min-w-0 flex-1'>
-                <span className='flex items-center gap-2'>
-                  <span className='text-[var(--text-primary)] text-small'>v3</span>
-                  <ChipTag variant='mono'>Stable</ChipTag>
-                </span>
-                <span className='mt-0.5 block truncate text-[var(--text-muted)] text-caption'>
-                  Maya Chen · Jun 30
-                </span>
-              </span>
-              <Button
-                variant='primary'
-                size='sm'
-                tabIndex={-1}
-                className='pointer-events-none shrink-0 gap-1'
-              >
-                <Undo className='size-[12px]' />
-                Roll back
-              </Button>
-            </div>
-          </div>
-
-          <div className='flex'>
-            <span className='relative flex h-[28px] w-2.5 shrink-0 justify-center'>
-              <span
-                className={cn(
-                  '-top-[24px] -bottom-[4px] absolute w-px',
-                  colorMixFallbacks.mutedBackground35
-                )}
-              />
-            </span>
-          </div>
-
-          <div className='flex items-center gap-3'>
-            <span className='flex w-2.5 shrink-0 justify-center'>
-              <span
-                className={cn(
-                  'size-2 rounded-full border bg-[var(--surface-3)]',
-                  colorMixFallbacks.mutedBorder60
-                )}
-              />
-            </span>
-            <span className='flex min-w-0 flex-1 items-center gap-2'>
-              <span className='text-[var(--text-muted)] text-small'>v2</span>
-              <span className='truncate text-[var(--text-muted)] text-caption'>Saved Jun 24</span>
-            </span>
-          </div>
-        </div>
-      </div>
-    </FeatureGraphicShell>
-  )
-}
diff --git a/apps/sim/app/(landing)/enterprise/components/feature-graphics/technical-teams-graphic.tsx b/apps/sim/app/(landing)/enterprise/components/feature-graphics/technical-teams-graphic.tsx
index d8b66b58c54..cbddeac12eb 100644
--- a/apps/sim/app/(landing)/enterprise/components/feature-graphics/technical-teams-graphic.tsx
+++ b/apps/sim/app/(landing)/enterprise/components/feature-graphics/technical-teams-graphic.tsx
@@ -29,7 +29,7 @@ const DIFF_LINES: readonly DiffLine[] = [
 /** Per-marker ink treatments: added strongest, removed and context quiet. */
 const MARKER_TONES: Record<DiffLine['marker'], string> = {
   ' ': 'text-[var(--text-muted)]',
-  '-': 'text-[var(--text-muted)] opacity-70',
+  '-': 'text-[var(--text-muted)]',
   '+': 'text-[var(--text-primary)]',
 }
 
diff --git a/apps/sim/app/(landing)/enterprise/enterprise.tsx b/apps/sim/app/(landing)/enterprise/enterprise.tsx
index 4fae1190a84..21d4dfa9120 100644
--- a/apps/sim/app/(landing)/enterprise/enterprise.tsx
+++ b/apps/sim/app/(landing)/enterprise/enterprise.tsx
@@ -1,218 +1,77 @@
-import { cn } from '@sim/emcn'
-import { Cta } from '@/app/(landing)/components/cta/cta'
-import { LANDING_CONTENT_WIDTH, LANDING_GUTTER } from '@/app/(landing)/components/landing-layout'
-import { PlatformHeroVisual } from '@/app/(landing)/components/platform-hero-visual'
 import {
-  SolutionsHero,
-  SolutionsLogosRow,
-  SolutionsStructuredData,
-} from '@/app/(landing)/components/solutions-page/components'
-import { SOLUTIONS_SPACING } from '@/app/(landing)/components/solutions-page/constants'
-import type { SolutionsPageConfig } from '@/app/(landing)/components/solutions-page/types'
-import { DEMO_HREF, SIGNUP_HREF } from '@/app/(landing)/constants'
-import { EnterpriseFeatureGrid } from '@/app/(landing)/enterprise/components/enterprise-feature-grid'
-import { EnterprisePlatformLoop } from '@/app/(landing)/enterprise/components/enterprise-platform-loop'
+  SolutionsPage,
+  type SolutionsProductPageConfig,
+} from '@/app/(landing)/components/solutions-page'
+import { ProductHeroPreview } from '@/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-hero-preview'
 import {
-  AccessControlGraphic,
-  AuditTrailGraphic,
-  BuildMethodsGraphic,
-  DeployGraphic,
-  ItPlatformTeamsGraphic,
-  LifecycleGraphic,
-  OperationsTeamsGraphic,
-  RollbackGraphic,
-  RunMonitoringGraphic,
-  StagingGraphic,
-  StandardsGraphic,
-  TechnicalTeamsGraphic,
-} from '@/app/(landing)/enterprise/components/feature-graphics'
+  EnterpriseLimitsPreview,
+  EnterpriseMembersPreview,
+} from '@/app/(landing)/enterprise/components/enterprise-product-previews'
+import { LogTracePreview } from '@/app/(landing)/logs/components/log-trace-preview'
 
-/**
- * Enterprise landing page (`/enterprise`) - the flagship surface for teams
- * evaluating Sim as their enterprise AI agent platform.
- *
- * Structurally it mirrors {@link SolutionsPage} (hero → logos → card rows →
- * shared homepage CTA) but composes its own `<main>` so the hero can render
- * full-bleed in its `home` variant. The four feature rows render through
- * {@link EnterpriseFeatureGrid} - one shared grid that regroups the 12 cards
- * into 4/4/2/2 in the two-column band so no section leaves an orphan cell.
- * The shared `SOLUTIONS_SPACING` constants own the enterprise content gutter
- * and inter-section rhythm, while the homepage {@link Cta} owns the closing
- * conversion band.
- *
- * The strict heading outline is H1 (hero) → H2 (each card row + the CTA) → H3
- * (each card), never skipped. Server Component; the interactive leaves live in
- * the shared landing components.
- */
-/**
- * The enterprise page's canonical description - shared by `page.tsx` (the
- * `<meta name="description">` and OG/Twitter cards) and the JSON-LD
- * `WebPage.description` via {@link SolutionsPageConfig.seoDescription}.
- */
+/** Shared description for page metadata and structured data. */
 export const ENTERPRISE_SEO_DESCRIPTION =
-  'Build and govern enterprise AI agents in Sim with SSO, approvals, audit trails, versioning, and 1,000+ integrations.'
+  'Build and govern enterprise AI agents in Sim. Manage team access, workspace permissions, and usage limits, with visibility into every run.'
 
-const ENTERPRISE_CONFIG: SolutionsPageConfig = {
+const ENTERPRISE_CONFIG: SolutionsProductPageConfig = {
   module: 'Enterprise',
   path: '/enterprise',
   seoDescription: ENTERPRISE_SEO_DESCRIPTION,
   offersFreeTier: false,
   hero: {
-    heading: 'Sim is the AI workspace for enterprise AI agents.',
+    eyebrow: 'Enterprise',
+    heading: 'One AI workspace. You’re in control.',
     description:
-      'The enterprise AI agent platform. Build, deploy, and govern agents with role-based access, approvals, and full audit trails.',
+      'Build, deploy, and govern AI agents in Sim, with shared access controls, usage limits, and visibility into every run.',
     summary:
-      'Sim is the open-source AI workspace where IT, operations, and technical teams build, deploy, and govern enterprise AI agents across 1,000+ integrations and every major LLM. An enterprise AI agent uses AI models, business data, and connected tools to complete multi-step work within the permissions, approval policies, and human oversight your organization defines.',
-    /**
-     * The shared {@link PlatformHeroVisual} backdrop-plus-demo-window
-     * composition, filled by the {@link EnterprisePlatformLoop} - a sibling of
-     * the homepage `HeroPlatformLoop` that renders the whole interior live
-     * (Brightwave sidebar + the real new-chat home view) and replays an
-     * enterprise prompt. The `variant='home'` hero renders this into the same
-     * `aspect-[1300/720]` media frame the homepage uses.
-     */
-    visual: (
-      <PlatformHeroVisual>
-        <EnterprisePlatformLoop />
-      </PlatformHeroVisual>
-    ),
+      'Sim is the open-source AI workspace where enterprise teams build, deploy, and manage AI agents. Manage organization members and workspace permissions, control usage, and inspect agent runs in one place. Teams can connect their business tools and knowledge while keeping access and operations visible across the organization.',
+    visual: <ProductHeroPreview product='enterprise' />,
   },
-  rows: [
-    {
-      id: 'build',
-      title: 'Build, Deploy, and Manage Enterprise AI Agents',
-      subtitle:
-        'Sim takes enterprise AI agents from initial design to production in one workspace. Build visually or with code, validate changes, deploy approved versions, and monitor every run without connecting separate development and operations tools.',
-      cta: { label: 'Start building', href: SIGNUP_HREF },
-      cards: [
-        {
-          title: 'Build visually or with code',
-          description:
-            "Create enterprise AI agents in Sim's visual builder, describe the workflow in plain English, or write custom logic directly in code.",
-          visual: <BuildMethodsGraphic />,
-        },
-        {
-          title: 'Deploy in one click',
-          description:
-            'Move agents from staging to production without managing separate infrastructure.',
-          featureTileTone: 'dark',
-          featureTileDescriptionTone: 'soft',
-          visual: <DeployGraphic />,
-        },
-        {
-          title: 'Manage the full lifecycle',
-          description:
-            'Version, monitor, and update every enterprise AI agent in Sim as your business requirements, integrations, and governance policies evolve.',
-          visual: <LifecycleGraphic />,
-        },
-      ],
-    },
+  codeExample: {
+    title: 'Inspect runs from your terminal.',
+    description:
+      'Use the Sim CLI to find failed executions and inspect a run’s trace within the workspaces you can access.',
+    filename: 'operations.sh',
+    commands: [
+      'sim workspaces list',
+      'sim logs list --level error',
+      'sim logs get "$RUN_ID" --trace',
+    ],
+  },
+  features: [
     {
       id: 'governance',
-      title: 'Governance and Security for Enterprise AI Agents',
-      subtitle:
-        'Control how enterprise AI agents access data, use tools, and take action. Sim provides SSO, permission groups, approval paths, configurable data retention, and append-only audit logs for every security-relevant change.',
-      cta: { label: 'See security', href: DEMO_HREF },
-      cards: [
-        {
-          title: 'Control who can do what',
-          description:
-            'Set roles and approval paths so the right people build, review, and launch agents.',
-          visual: <AccessControlGraphic />,
-        },
-        {
-          title: 'Prove every action',
-          description: 'Sim traces every run block by block with a complete audit trail.',
-          visual: <AuditTrailGraphic />,
-        },
-        {
-          title: 'Meet enterprise standards',
-          description:
-            'Sim is SOC2 compliant and open source, giving security teams a clear path to review.',
-          visual: <StandardsGraphic />,
-          featureTileTone: 'dark',
-          featureTileDescriptionTone: 'soft',
-        },
-      ],
+      label: 'Organization controls',
+      title: 'Give teams access. Keep control.',
+      description:
+        'Manage members and workspace roles in Sim. Try searching the example team or changing a role.',
+      visual: <EnterpriseMembersPreview />,
+      cta: {
+        label: 'Explore workspace permissions',
+        href: 'https://docs.sim.ai/platform/permissions',
+      },
     },
     {
-      id: 'deploy',
-      title: 'Deploy Enterprise Workflow Agents with Confidence',
-      subtitle:
-        'Enterprise workflow agents need controlled release processes. Test changes in staging, observe production runs, version every deployment, and restore a stable version if updates cause an issue.',
-      note: 'Deploy Sim on your own infrastructure with Docker or Kubernetes when your organization requires greater control over its environment and data.',
-      cta: { label: 'Explore deployment', href: SIGNUP_HREF },
-      cards: [
-        {
-          title: 'Stage before you ship',
-          description: 'Test changes in staging before they affect live workflows.',
-          visual: <StagingGraphic />,
-        },
-        {
-          title: 'Watch every run',
-          description: 'Sim shows live logs, run history, and monitoring in one place.',
-          visual: <RunMonitoringGraphic />,
-        },
-        {
-          title: 'Roll back safely',
-          description: 'Sim versions workflows so you can roll back production agents in seconds.',
-          visual: <RollbackGraphic />,
-        },
-      ],
+      id: 'usage',
+      label: 'Usage and allowances',
+      title: 'Keep room to grow and limits in view.',
+      description:
+        'See your team’s seat allowance and set usage limits in Sim as more people build agents.',
+      visual: <EnterpriseLimitsPreview />,
+      cta: { label: 'Talk about your team', href: '/demo' },
     },
     {
-      id: 'teams',
-      title: 'Built for Enterprise Teams',
-      subtitle:
-        'IT, operations, and engineering teams share one Sim workspace, each with the controls their role needs.',
-      cta: { label: 'Talk to sales', href: DEMO_HREF },
-      cards: [
-        {
-          title: 'IT and platform teams',
-          description: 'Give IT the access controls, governance, and audit trails they need.',
-          visual: <ItPlatformTeamsGraphic />,
-        },
-        {
-          title: 'Operations teams',
-          description: 'Automate real work across the tools operations teams already use.',
-          featureTileTone: 'dark',
-          featureTileDescriptionTone: 'soft',
-          visual: <OperationsTeamsGraphic />,
-        },
-        {
-          title: 'Technical teams',
-          description: 'Technical teams ship, review, and maintain agents together in Sim.',
-          visual: <TechnicalTeamsGraphic />,
-        },
-      ],
+      id: 'visibility',
+      label: 'Run visibility',
+      title: 'See what every agent did.',
+      description:
+        'Follow each run in Sim, from the tools an agent called to the output it returned.',
+      visual: <LogTracePreview />,
+      cta: { label: 'Explore Logs', href: '/logs' },
     },
   ],
 }
 
 export default function EnterprisePage() {
-  return (
-    <>
-      <SolutionsStructuredData config={ENTERPRISE_CONFIG} />
-      <main
-        id='main-content'
-        className={cn('flex w-full flex-col', SOLUTIONS_SPACING.sectionRhythm)}
-      >
-        <SolutionsHero hero={ENTERPRISE_CONFIG.hero} variant='home' />
-
-        <div
-          className={cn(
-            'flex flex-col',
-            LANDING_CONTENT_WIDTH,
-            LANDING_GUTTER,
-            SOLUTIONS_SPACING.sectionRhythm
-          )}
-        >
-          <SolutionsLogosRow />
-          <EnterpriseFeatureGrid rows={ENTERPRISE_CONFIG.rows} />
-        </div>
-
-        <Cta />
-      </main>
-    </>
-  )
+  return <SolutionsPage config={ENTERPRISE_CONFIG} />
 }
diff --git a/apps/sim/app/(landing)/files/components/feature-graphics/file-library-graphic.module.css b/apps/sim/app/(landing)/files/components/feature-graphics/file-library-graphic.module.css
index 6fe837d4387..1fbc89c83a6 100644
--- a/apps/sim/app/(landing)/files/components/feature-graphics/file-library-graphic.module.css
+++ b/apps/sim/app/(landing)/files/components/feature-graphics/file-library-graphic.module.css
@@ -1,37 +1,31 @@
-/**
- * The FileLibraryGraphic's motion: the library rows stamp in top to
- * bottom one after another — the audit tile's one-shot settle, never
- * re-played, since the library is filled once. Under
- * prefers-reduced-motion the rows render fully settled.
- */
-
-.row0,
-.row1,
-.row2,
-.row3 {
-  animation: file-library-row-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
+/** The folders settle first, followed by the individual files; the sequence runs once. */
+.item0,
+.item1,
+.item2,
+.item3 {
+  animation: file-library-item-in 0.5s ease-out backwards;
 }
 
-.row0 {
-  animation-delay: 0.35s;
+.item0 {
+  animation-delay: 0.2s;
 }
 
-.row1 {
-  animation-delay: 0.5s;
+.item1 {
+  animation-delay: 0.3s;
 }
 
-.row2 {
-  animation-delay: 0.65s;
+.item2 {
+  animation-delay: 0.4s;
 }
 
-.row3 {
-  animation-delay: 0.8s;
+.item3 {
+  animation-delay: 0.5s;
 }
 
-@keyframes file-library-row-in {
+@keyframes file-library-item-in {
   from {
     opacity: 0;
-    transform: translateY(-4px);
+    transform: translateY(4px);
   }
   to {
     opacity: 1;
@@ -40,10 +34,10 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .row0,
-  .row1,
-  .row2,
-  .row3 {
+  .item0,
+  .item1,
+  .item2,
+  .item3 {
     animation: none;
   }
 }
diff --git a/apps/sim/app/(landing)/files/components/feature-graphics/file-library-graphic.tsx b/apps/sim/app/(landing)/files/components/feature-graphics/file-library-graphic.tsx
index b92e9a40679..8c0aa576c50 100644
--- a/apps/sim/app/(landing)/files/components/feature-graphics/file-library-graphic.tsx
+++ b/apps/sim/app/(landing)/files/components/feature-graphics/file-library-graphic.tsx
@@ -1,144 +1,127 @@
+import type { ComponentType } from 'react'
 import { ChipTag, cn } from '@sim/emcn'
-import { AgentIcon } from '@/components/icons'
-import { CsvIcon, DocxIcon, PdfIcon } from '@/components/icons/document-icons'
+import { DocxIcon, PdfIcon } from '@/components/icons/document-icons'
 import { FeatureGraphicShell } from '@/app/(landing)/enterprise/components/feature-graphics'
 import styles from '@/app/(landing)/files/components/feature-graphics/file-library-graphic.module.css'
 
-interface LibraryRow {
-  /** File name in the row's leading position. */
+interface LibraryFolderProps {
   name: string
-  /** Document-type glyph beside the name. */
-  icon: React.ComponentType<{ className?: string }>
-  /** Attribution line - "owner · size". */
-  meta: string
-  /** Right-aligned relative timestamp. */
-  time: string
-  /** Marks the owner as a Sim agent, rendering the agent glyph on the badge. */
-  agent?: boolean
+  count: string
+  className: string
 }
 
-/**
- * The library vignette's four rows - the newest an agent-produced report
- * on the highlight card, the rest a mix of human uploads and agent
- * artifacts so the shared-store story reads in one glance.
- */
-const ROWS: readonly [LibraryRow, LibraryRow, LibraryRow, LibraryRow] = [
-  {
-    name: 'weekly-report.pdf',
-    icon: PdfIcon,
-    meta: 'Report agent · 1.8 MB',
-    time: 'Now',
-    agent: true,
-  },
-  {
-    name: 'brand-guidelines.pdf',
-    icon: PdfIcon,
-    meta: 'Maya Chen · 5.1 MB',
-    time: '2h ago',
-  },
-  {
-    name: 'invoice-batch-march.csv',
-    icon: CsvIcon,
-    meta: 'Invoice agent · 812 KB',
-    time: 'Yesterday',
-    agent: true,
-  },
-  {
-    name: 'onboarding-playbook.docx',
-    icon: DocxIcon,
-    meta: 'Jordan Lee · 1.1 MB',
-    time: 'Jun 12',
-  },
-] as const
+interface LibraryDocument {
+  name: string
+  icon: ComponentType<{ className?: string }>
+  size: string
+}
 
-/** Per-row ink treatments, quieter with age like the audit ledger. */
-const ROW_TONES = [
-  'text-[var(--text-primary)]',
-  'text-[var(--text-secondary)]',
-  'text-[var(--text-muted)]',
-  'text-[var(--text-muted)]',
-] as const
+interface LibraryDocumentCardProps {
+  document: LibraryDocument
+  className: string
+}
+
+const DOCUMENTS: readonly LibraryDocument[] = [
+  { name: 'Guide.pdf', icon: PdfIcon, size: '1.2 MB' },
+  { name: 'Brief.docx', icon: DocxIcon, size: '324 KB' },
+]
+
+const DOCUMENT_STEPS = [styles.item2, styles.item3] as const
+
+/** A tabbed folder with two loose pages tucked behind its front cover. */
+function LibraryFolder({ name, count, className }: LibraryFolderProps) {
+  return (
+    <div className={cn('relative min-h-0 min-w-0', className)}>
+      <svg className='absolute inset-0 size-full' viewBox='0 0 160 150' preserveAspectRatio='none'>
+        <path
+          d='M1 18C1 12.5 5.5 8 11 8H54C58 8 60 9 63 12L71 20H149C154.5 20 159 24.5 159 30V139C159 144.5 154.5 149 149 149H11C5.5 149 1 144.5 1 139Z'
+          fill='var(--surface-6)'
+          stroke='var(--border)'
+          vectorEffect='non-scaling-stroke'
+        />
+      </svg>
+      <div className='-rotate-3 absolute inset-x-[18px] top-[22%] h-[48%] rounded-[5px] border border-[var(--border)] bg-[var(--surface-2)]' />
+      <div className='absolute inset-x-3 top-[27%] h-[46%] rotate-2 rounded-[5px] border border-[var(--border)] bg-[var(--bg)]'>
+        <span className='absolute top-3 right-3 left-3 h-px bg-[var(--border)]' />
+        <span className='absolute top-[18px] right-8 left-3 h-px bg-[var(--border)]' />
+      </div>
+      <svg className='absolute inset-0 size-full' viewBox='0 0 160 150' preserveAspectRatio='none'>
+        <path
+          d='M1 66C1 60.5 5.5 56 11 56H149C154.5 56 159 60.5 159 66V139C159 144.5 154.5 149 149 149H11C5.5 149 1 144.5 1 139Z'
+          fill='var(--surface-3)'
+          stroke='var(--border)'
+          vectorEffect='non-scaling-stroke'
+        />
+      </svg>
+      <div className='absolute inset-x-4 bottom-5'>
+        <span className='block truncate text-[13px] text-[var(--text-primary)] leading-5'>
+          {name}
+        </span>
+        <span className='mt-0.5 block text-[11px] text-[var(--text-muted)] leading-4'>{count}</span>
+      </div>
+    </div>
+  )
+}
 
-/** Per-index stamp-in classes — the stagger order is baked into each class's delay. */
-const ROW_STEP_CLASSES = [styles.row0, styles.row1, styles.row2, styles.row3] as const
+/** An individual file card with its native type glyph and a small content preview. */
+function LibraryDocumentCard({ document, className }: LibraryDocumentCardProps) {
+  const Icon = document.icon
 
-/** The owner badge - an outlined circle holding the agent glyph or nothing. */
-function OwnerBadge({ row }: { row: LibraryRow }) {
   return (
-    <span className='flex size-7 shrink-0 items-center justify-center rounded-md border border-[var(--border-1)] bg-[var(--surface-2)] text-[var(--text-icon)]'>
-      {row.agent ? <AgentIcon className='size-[13px]' /> : <row.icon className='size-[14px]' />}
-    </span>
+    <div
+      className={cn(
+        'flex aspect-[9/11] w-full min-w-0 flex-col gap-3 rounded-lg border border-[var(--border)] bg-[var(--bg)] p-3 shadow-xs',
+        className
+      )}
+    >
+      <Icon className='size-6 shrink-0 text-[var(--text-icon)]' />
+      <div className='flex min-h-0 flex-1 flex-col gap-2 pt-2'>
+        <span className='h-px w-full bg-[var(--border)]' />
+        <span className='h-px w-4/5 bg-[var(--border)]' />
+        <span className='h-px w-3/5 bg-[var(--border)]' />
+      </div>
+      <div className='mt-auto min-w-0'>
+        <span className='block whitespace-nowrap text-[13px] text-[var(--text-body)] leading-5 [@container(max-width:320px)]:text-[11px]'>
+          {document.name}
+        </span>
+        <span className='block text-[11px] text-[var(--text-muted)] leading-4'>
+          {document.size}
+        </span>
+      </div>
+    </div>
   )
 }
 
 /**
- * Sim's shared file library told as a frameless, centered vignette (the
- * audit tile's composition): a small "Files" header with a `Shared` mono
- * ChipTag (fill stepped up to `--surface-6` so the pill stays legible on
- * the grey ground) above four library rows - a document-type icon box,
- * the file name in the row's regular sans face, an "owner · size"
- * attribution line, and a right-aligned timestamp. Human uploads and
- * agent-produced artifacts sit interleaved, which is the tile's whole
- * claim. The newest record - an agent's report, written seconds ago - is
- * the selected row: it sits on a solid white card wearing the family's
- * highlight chrome exactly (`--white` fill, 1px `--border-1` hairline,
- * `rounded-xl`, `shadow-xs`), while older rows rest directly on the tile
- * and quieten with age until a mask gradient dissolves the oldest.
- *
- * Motion (from `file-library-graphic.module.css`): the rows stamp in top
- * to bottom once - the audit tile's one-shot settle, never re-played -
- * and are removed under `prefers-reduced-motion`.
- *
- * The feature tile's visual slot bleeds `2rem` right (`1.5rem` under
- * `max-lg`) but not left, so this centered vignette adds matching right
- * padding to land on the tile's visible center. On the wide spanned tile
- * of the two-column band (container ≥500px inside `sm`..`lg`) the column
- * relaxes to 400px, matching the family's wide-tile measure.
+ * Two folders and two paper-proportioned documents make the shared library tangible.
+ * Documents retain their shape while the folder row fills the remaining space.
+ * The four items settle in once, with a static frame under reduced motion.
  */
 export function FileLibraryGraphic() {
   return (
-    <FeatureGraphicShell>
+    <FeatureGraphicShell variant='portrait'>
       <div
         aria-hidden='true'
-        className='absolute inset-0 flex items-center justify-center pr-8 max-lg:pr-6'
+        data-feature-graphic='files'
+        className='absolute inset-0 flex justify-center p-5'
       >
-        <div className='w-full max-w-[312px] sm:max-lg:[@container(min-width:500px)]:max-w-[400px]'>
-          <div className='mb-4 flex items-center justify-between'>
+        <div className='flex min-h-0 w-full flex-col gap-5 [container-type:inline-size]'>
+          <div className='flex shrink-0 items-center justify-between'>
             <span className='text-[var(--text-primary)] text-base'>Files</span>
-            <ChipTag variant='mono' className='bg-[var(--surface-6)]'>
-              Shared
-            </ChipTag>
+            <ChipTag variant='mono'>Shared</ChipTag>
           </div>
-
-          <div className='flex flex-col gap-1.5 [mask-image:linear-gradient(to_bottom,black_55%,transparent_100%)]'>
-            {ROWS.map((row, index) => {
-              const newest = index === 0
-
-              return (
-                <div
-                  key={row.name}
-                  className={cn(
-                    'flex items-center gap-3 px-3 py-2.5',
-                    ROW_STEP_CLASSES[index],
-                    newest &&
-                      'rounded-xl border border-[var(--border-1)] bg-[var(--white)] shadow-xs'
-                  )}
-                >
-                  <OwnerBadge row={row} />
-                  <span className='min-w-0 flex-1'>
-                    <span className={cn('block truncate text-small', ROW_TONES[index])}>
-                      {row.name}
-                    </span>
-                    <span className='block truncate text-[var(--text-muted)] text-caption'>
-                      {row.meta}
-                    </span>
-                  </span>
-                  <span className='shrink-0 self-start pt-px text-[var(--text-muted)] text-caption'>
-                    {row.time}
-                  </span>
-                </div>
-              )
-            })}
+          <div className='grid min-h-0 flex-1 grid-cols-2 gap-5'>
+            <LibraryFolder name='Brand assets' count='12 files' className={styles.item0} />
+            <LibraryFolder name='Reports' count='8 files' className={styles.item1} />
+          </div>
+          <div className='grid shrink-0 grid-cols-2 gap-5'>
+            {DOCUMENTS.map((document, index) => (
+              <LibraryDocumentCard
+                key={document.name}
+                document={document}
+                className={DOCUMENT_STEPS[index]}
+              />
+            ))}
           </div>
         </div>
       </div>
diff --git a/apps/sim/app/(landing)/files/components/feature-graphics/files-sdk-graphic.tsx b/apps/sim/app/(landing)/files/components/feature-graphics/files-sdk-graphic.tsx
deleted file mode 100644
index ec3195a23bb..00000000000
--- a/apps/sim/app/(landing)/files/components/feature-graphics/files-sdk-graphic.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { File } from '@sim/emcn/icons'
-import {
-  type CodeSegment,
-  CodeWindowGraphic,
-} from '@/app/(landing)/components/shared/code-window-graphic'
-
-/**
- * The `report-agent.ts` excerpt — an agent reading a file from the shared
- * store and writing its output back, the page's story reached from code.
- */
-const CODE_LINES: readonly CodeSegment[][] = [
-  [
-    { text: 'import', tone: 'muted' },
-    { text: ' ' },
-    { text: '{ files }', tone: 'primary' },
-    { text: ' ' },
-    { text: 'from', tone: 'muted' },
-    { text: ' ' },
-    { text: "'@sim/sdk'", tone: 'primary' },
-  ],
-  [
-    { text: 'const', tone: 'muted' },
-    { text: ' ' },
-    { text: 'brief', tone: 'primary' },
-    { text: ' ' },
-    { text: '= await', tone: 'muted' },
-  ],
-  [{ text: '  ' }, { text: "files.read('q3-brief.pdf')", tone: 'primary' }],
-  [{ text: 'await', tone: 'muted' }, { text: ' ' }, { text: 'files.upload({', tone: 'primary' }],
-  [
-    { text: '  ' },
-    { text: 'name:', tone: 'muted' },
-    { text: ' ' },
-    { text: "'weekly-report.pdf'", tone: 'primary' },
-    { text: ',' },
-  ],
-  [
-    { text: '  ' },
-    { text: 'content:', tone: 'muted' },
-    { text: ' ' },
-    { text: 'draft(brief)', tone: 'primary' },
-    { text: ',' },
-  ],
-] as const
-
-/**
- * Files reached from code told in the shared {@link CodeWindowGraphic}
- * editor window: the `File` mark and the `report-agent.ts` filename over
- * an SDK excerpt reading a brief out of Sim's file store and uploading
- * the finished report back.
- */
-export function FilesSdkGraphic() {
-  return (
-    <CodeWindowGraphic
-      icon={<File className='size-[14px] text-[var(--text-muted-inverse)]' />}
-      filename='report-agent.ts'
-      lines={CODE_LINES}
-    />
-  )
-}
diff --git a/apps/sim/app/(landing)/files/components/files-document-preview/files-document-preview.tsx b/apps/sim/app/(landing)/files/components/files-document-preview/files-document-preview.tsx
new file mode 100644
index 00000000000..b125c3c0749
--- /dev/null
+++ b/apps/sim/app/(landing)/files/components/files-document-preview/files-document-preview.tsx
@@ -0,0 +1,32 @@
+'use client'
+
+import { Chip } from '@sim/emcn'
+import { ChevronRight, Download, Files, Send } from '@sim/emcn/icons'
+import { MenuPreviewHeader } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-header/menu-preview-header'
+import { LibraryFileDetail } from '@/app/(landing)/files/components/files-library-preview/components/library-file-detail'
+import { FILES } from '@/app/(landing)/files/components/files-library-preview/data'
+
+/** Files' real breadcrumb/action header over its single-surface markdown document. */
+export function FilesDocumentPreview() {
+  return (
+    <div className='absolute top-16 left-10 w-[620px] overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--bg)] text-[var(--text-body)] text-small shadow-xs max-sm:left-6'>
+      <MenuPreviewHeader
+        icon={Files}
+        title={
+          <>
+            <span>Files</span>
+            <ChevronRight className='size-3 text-[var(--text-muted)]' />
+            <span>Weekly report.md</span>
+          </>
+        }
+        actions={
+          <>
+            <Chip leftIcon={Download}>Download</Chip>
+            <Chip leftIcon={Send}>Share</Chip>
+          </>
+        }
+      />
+      <LibraryFileDetail file={FILES[0]} />
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/files/components/files-document-preview/index.ts b/apps/sim/app/(landing)/files/components/files-document-preview/index.ts
new file mode 100644
index 00000000000..a27d7fc7595
--- /dev/null
+++ b/apps/sim/app/(landing)/files/components/files-document-preview/index.ts
@@ -0,0 +1 @@
+export { FilesDocumentPreview } from './files-document-preview'
diff --git a/apps/sim/app/(landing)/files/components/files-library-preview/components/library-file-detail/index.ts b/apps/sim/app/(landing)/files/components/files-library-preview/components/library-file-detail/index.ts
new file mode 100644
index 00000000000..33f6ee23c2b
--- /dev/null
+++ b/apps/sim/app/(landing)/files/components/files-library-preview/components/library-file-detail/index.ts
@@ -0,0 +1 @@
+export { LibraryFileDetail } from './library-file-detail'
diff --git a/apps/sim/app/(landing)/files/components/files-library-preview/components/library-file-detail/library-file-detail.tsx b/apps/sim/app/(landing)/files/components/files-library-preview/components/library-file-detail/library-file-detail.tsx
new file mode 100644
index 00000000000..e03aa8554c7
--- /dev/null
+++ b/apps/sim/app/(landing)/files/components/files-library-preview/components/library-file-detail/library-file-detail.tsx
@@ -0,0 +1,46 @@
+import { noop } from '@sim/utils/helpers'
+import type { LibraryFile } from '@/app/(landing)/files/components/files-library-preview/data'
+import { PreviewToolbar } from '@/app/workspace/[workspaceId]/files/components/file-viewer/preview-toolbar'
+
+interface LibraryFileDetailProps {
+  file: LibraryFile
+}
+
+/** The document replaces the resource list, matching the actual Files viewer. */
+export function LibraryFileDetail({ file }: LibraryFileDetailProps) {
+  return (
+    <div
+      role='region'
+      aria-label={`${file.name} preview`}
+      className='min-h-0 flex-1 overflow-y-auto'
+    >
+      {file.type === 'PDF' && (
+        <div aria-hidden='true' inert>
+          <PreviewToolbar
+            navigation={{ current: 1, total: 1, label: 'page', onPrevious: noop, onNext: noop }}
+            zoom={{
+              label: '100%',
+              onZoomOut: noop,
+              onZoomIn: noop,
+              canZoomOut: false,
+              canZoomIn: false,
+            }}
+          />
+        </div>
+      )}
+      <div className='mx-auto max-w-[48rem] px-8 py-6 text-[var(--text-primary)] text-base leading-[25px] max-sm:px-5'>
+        <p className='text-[24px] leading-[1.3]'>{file.title}</p>
+        <p className='mt-4'>{file.excerpt}</p>
+        <p className='mt-7 text-[19px] leading-[1.3]'>What moved forward</p>
+        <ul className='mt-3 list-disc space-y-2 pl-6'>
+          <li>Reviewed campaign performance</li>
+          <li>Shared customer feedback with the team</li>
+        </ul>
+        <p className='mt-7 text-[19px] leading-[1.3]'>Next steps</p>
+        <p className='mt-3'>
+          Bring the findings into next week’s brief and follow up on the opportunities.
+        </p>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/files/components/files-library-preview/components/library-file-list/index.ts b/apps/sim/app/(landing)/files/components/files-library-preview/components/library-file-list/index.ts
new file mode 100644
index 00000000000..eaa210f5729
--- /dev/null
+++ b/apps/sim/app/(landing)/files/components/files-library-preview/components/library-file-list/index.ts
@@ -0,0 +1 @@
+export { LibraryFileList } from './library-file-list'
diff --git a/apps/sim/app/(landing)/files/components/files-library-preview/components/library-file-list/library-file-list.tsx b/apps/sim/app/(landing)/files/components/files-library-preview/components/library-file-list/library-file-list.tsx
new file mode 100644
index 00000000000..91b4ecccfce
--- /dev/null
+++ b/apps/sim/app/(landing)/files/components/files-library-preview/components/library-file-list/library-file-list.tsx
@@ -0,0 +1,83 @@
+import { getDocumentIcon } from '@/components/icons/document-icons'
+import type { LibraryFile } from '@/app/(landing)/files/components/files-library-preview/data'
+
+interface LibraryFileListProps {
+  files: readonly LibraryFile[]
+  onSelect: (id: string) => void
+}
+
+/** The Files resource's Name, Size, Type, Created, and Owner columns. */
+export function LibraryFileList({ files, onSelect }: LibraryFileListProps) {
+  return (
+    <div className='min-h-0 flex-1 overflow-auto'>
+      <table className='w-full min-w-[658px] table-fixed border-collapse whitespace-nowrap text-left text-small'>
+        <colgroup>
+          <col className='w-[256px]' />
+          <col className='w-[78px]' />
+          <col className='w-[98px]' />
+          <col className='w-[94px]' />
+          <col className='w-[132px]' />
+        </colgroup>
+        <thead>
+          <tr className='h-9 border-[var(--border)] border-b text-[var(--text-secondary)]'>
+            {['Name', 'Size', 'Type', 'Created', 'Owner'].map((name) => (
+              <th key={name} className='font-normal first:pl-4'>
+                {name}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {files.map((file) => {
+            const Icon = getDocumentIcon('', file.name)
+            return (
+              <tr
+                key={file.id}
+                className='h-11 text-[var(--text-secondary)] hover:bg-[var(--surface-hover)]'
+              >
+                <td className='pl-4 text-[var(--text-body)]'>
+                  <button
+                    type='button'
+                    onClick={() => onSelect(file.id)}
+                    className='flex h-11 max-w-full items-center gap-2.5 rounded-sm text-left focus-visible:outline-2 focus-visible:outline-[var(--text-primary)]'
+                  >
+                    <Icon
+                      aria-hidden='true'
+                      className='size-[14px] shrink-0 text-[var(--text-icon)]'
+                    />
+                    <span className='sr-only'>Open {file.type} </span>
+                    <span className='truncate'>{file.name}</span>
+                  </button>
+                </td>
+                <td className='tabular-nums'>{file.size}</td>
+                <td>
+                  <span className='flex items-center gap-2'>
+                    <Icon
+                      aria-hidden='true'
+                      className='size-[14px] shrink-0 text-[var(--text-icon)]'
+                    />
+                    {file.type}
+                  </span>
+                </td>
+                <td>{file.created}</td>
+                <td>
+                  <span className='flex items-center gap-2'>
+                    <span className='flex size-[18px] shrink-0 items-center justify-center rounded-full bg-[var(--surface-3)] text-micro'>
+                      {file.owner[0]}
+                    </span>
+                    <span className='truncate'>{file.owner}</span>
+                  </span>
+                </td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+      {files.length === 0 && (
+        <p role='status' className='p-6 text-[var(--text-secondary)] text-small'>
+          No files match your search.
+        </p>
+      )}
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/files/components/files-library-preview/data.ts b/apps/sim/app/(landing)/files/components/files-library-preview/data.ts
new file mode 100644
index 00000000000..47e38eccb7e
--- /dev/null
+++ b/apps/sim/app/(landing)/files/components/files-library-preview/data.ts
@@ -0,0 +1,78 @@
+export interface LibraryFile {
+  id: string
+  name: string
+  type: string
+  size: string
+  title: string
+  excerpt: string
+  owner: string
+  created: string
+}
+
+export const FILES: readonly LibraryFile[] = [
+  {
+    id: 'weekly-report',
+    name: 'Weekly report.md',
+    type: 'Markdown',
+    size: '24 KB',
+    title: 'A week of progress.',
+    excerpt:
+      'Campaign results, customer conversations, and the next steps for the team. All in one place.',
+    owner: 'Morgan Lee',
+    created: 'Sep 4',
+  },
+  {
+    id: 'brand-guidelines',
+    name: 'Brand guidelines.pdf',
+    type: 'PDF',
+    size: '1.2 MB',
+    title: 'Make every detail count.',
+    excerpt:
+      'The colors, typography, and voice that bring our brand to life. A shared reference for every project.',
+    owner: 'Morgan Lee',
+    created: 'Sep 4',
+  },
+  {
+    id: 'product-brief',
+    name: 'Product brief.docx',
+    type: 'Document',
+    size: '324 KB',
+    title: 'The next chapter.',
+    excerpt: 'What we are building, who it is for, and how the team will bring it to market.',
+    owner: 'Alex Chen',
+    created: 'Sep 3',
+  },
+  {
+    id: 'research',
+    name: 'Research notes.pdf',
+    type: 'PDF',
+    size: '860 KB',
+    title: 'Start with the people.',
+    excerpt:
+      'Notes from five customer conversations, the patterns we heard, and the opportunities worth exploring.',
+    owner: 'Alex Chen',
+    created: 'Sep 3',
+  },
+  {
+    id: 'campaign',
+    name: 'Campaign summary.md',
+    type: 'Markdown',
+    size: '18 KB',
+    title: 'From launch to learning.',
+    excerpt:
+      'A look at what reached the right people, which messages resonated, and what to try next.',
+    owner: 'Morgan Lee',
+    created: 'Sep 2',
+  },
+  {
+    id: 'voice',
+    name: 'Voice and tone.md',
+    type: 'Markdown',
+    size: '12 KB',
+    title: 'Clear, useful, human.',
+    excerpt:
+      'Write with purpose. Keep sentences direct, make the details concrete, and help people take the next step.',
+    owner: 'Morgan Lee',
+    created: 'Sep 2',
+  },
+]
diff --git a/apps/sim/app/(landing)/files/components/files-library-preview/files-library-preview.tsx b/apps/sim/app/(landing)/files/components/files-library-preview/files-library-preview.tsx
new file mode 100644
index 00000000000..64a679196c1
--- /dev/null
+++ b/apps/sim/app/(landing)/files/components/files-library-preview/files-library-preview.tsx
@@ -0,0 +1,111 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { Chip } from '@sim/emcn'
+import {
+  ArrowUpDown,
+  ChevronRight,
+  Download,
+  Files as FilesIcon,
+  Search,
+  Send,
+} from '@sim/emcn/icons'
+import {
+  MenuPreviewHeader,
+  MenuPreviewToolbar,
+} from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-header/menu-preview-header'
+import { EdgeFade } from '@/app/(landing)/components/shared/edge-fade'
+import { LibraryFileDetail } from '@/app/(landing)/files/components/files-library-preview/components/library-file-detail'
+import { LibraryFileList } from '@/app/(landing)/files/components/files-library-preview/components/library-file-list'
+import { FILES } from '@/app/(landing)/files/components/files-library-preview/data'
+
+/** Native Files columns and document navigation, with local search and sorting. */
+export function FilesLibraryPreview() {
+  const searchRef = useRef<HTMLInputElement>(null)
+  const backRef = useRef<HTMLButtonElement>(null)
+  const previousSelectionRef = useRef<string | null>(null)
+  const [query, setQuery] = useState('')
+  const [ascending, setAscending] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const selectedFile = FILES.find((file) => file.id === selectedId)
+  const visibleFiles = FILES.filter((file) =>
+    file.name.toLowerCase().includes(query.trim().toLowerCase())
+  )
+  if (ascending) visibleFiles.sort((a, b) => a.name.localeCompare(b.name))
+
+  useEffect(() => {
+    if (selectedId) backRef.current?.focus()
+    else if (previousSelectionRef.current) searchRef.current?.focus()
+    previousSelectionRef.current = selectedId
+  }, [selectedId])
+
+  return (
+    <div className='absolute inset-0 isolate overflow-hidden bg-[var(--bg)]'>
+      <div className='-translate-x-1/2 absolute top-20 left-1/2 h-[440px] w-[780px] max-w-[calc(100%_-_48px)] max-sm:top-8 max-sm:h-[410px]'>
+        <div className='flex h-full flex-col overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--bg)] text-[var(--text-body)] text-small shadow-xs'>
+          <MenuPreviewHeader
+            icon={FilesIcon}
+            title={
+              selectedFile ? (
+                <>
+                  <button
+                    ref={backRef}
+                    type='button'
+                    onClick={() => setSelectedId(null)}
+                    className='rounded-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] focus-visible:outline-2'
+                  >
+                    Files
+                  </button>
+                  <ChevronRight className='size-3 shrink-0 text-[var(--text-secondary)]' />
+                  <span className='truncate'>{selectedFile.name}</span>
+                </>
+              ) : (
+                'Files'
+              )
+            }
+            actions={
+              selectedFile && (
+                <span aria-hidden='true' inert className='flex'>
+                  <Chip leftIcon={Download}>Download</Chip>
+                  <Chip leftIcon={Send}>Share</Chip>
+                </span>
+              )
+            }
+          />
+          {selectedFile ? (
+            <LibraryFileDetail file={selectedFile} />
+          ) : (
+            <>
+              <MenuPreviewToolbar>
+                <label className='mr-auto ml-2 flex min-w-0 flex-1 items-center gap-2 text-[var(--text-secondary)]'>
+                  <Search aria-hidden='true' className='size-[14px] shrink-0' />
+                  <input
+                    ref={searchRef}
+                    type='search'
+                    aria-label='Search demo files'
+                    value={query}
+                    onChange={(event) => setQuery(event.target.value)}
+                    placeholder='Search files...'
+                    className='h-8 w-full min-w-0 rounded-sm bg-transparent text-[var(--text-body)] text-small outline-none placeholder:text-[var(--text-secondary)] focus-visible:outline-2 focus-visible:outline-[var(--border)] max-sm:text-[16px]'
+                  />
+                </label>
+                <Chip
+                  leftIcon={ArrowUpDown}
+                  active={ascending}
+                  aria-pressed={ascending}
+                  aria-label='Sort files by name'
+                  onClick={() => setAscending((value) => !value)}
+                >
+                  Sort
+                </Chip>
+              </MenuPreviewToolbar>
+              <LibraryFileList files={visibleFiles} onSelect={setSelectedId} />
+            </>
+          )}
+        </div>
+        <EdgeFade ground='canvas' edges={['bottom']} depth='stage' />
+      </div>
+      <EdgeFade ground='canvas' edges={['top', 'left', 'right']} depth='preview' />
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/files/components/files-library-preview/index.ts b/apps/sim/app/(landing)/files/components/files-library-preview/index.ts
new file mode 100644
index 00000000000..9b5cc080515
--- /dev/null
+++ b/apps/sim/app/(landing)/files/components/files-library-preview/index.ts
@@ -0,0 +1 @@
+export { FilesLibraryPreview } from './files-library-preview'
diff --git a/apps/sim/app/(landing)/files/components/files-workflow-preview/files-workflow-preview.tsx b/apps/sim/app/(landing)/files/components/files-workflow-preview/files-workflow-preview.tsx
new file mode 100644
index 00000000000..72f006273b6
--- /dev/null
+++ b/apps/sim/app/(landing)/files/components/files-workflow-preview/files-workflow-preview.tsx
@@ -0,0 +1,42 @@
+'use client'
+
+import { AgentIcon, DocumentIcon } from '@/components/icons'
+import type { BlockDef } from '@/app/(landing)/components/hero/components/hero-visual/workflow-data'
+import { TwoBlockWorkflowPreview } from '@/app/(landing)/components/shared/two-block-workflow-preview/two-block-workflow-preview'
+
+const SUMMARIZE: BlockDef = {
+  id: 'files-summarize',
+  name: 'Summarize document',
+  type: 'agent',
+  typeLabel: 'Agent',
+  icon: AgentIcon,
+  bgColor: 'var(--text-primary)',
+  sentence: {
+    segments: ['Prompt', { subBlockId: 'model', noun: 'a model' }],
+    values: { model: 'GPT-6 Astra' },
+  },
+  rows: [],
+  x: 24,
+  y: 72,
+}
+
+const SAVE: BlockDef = {
+  id: 'files-save-summary',
+  name: 'Save summary',
+  type: 'file_v5',
+  typeLabel: 'File',
+  icon: DocumentIcon,
+  bgColor: '#40916C',
+  sentence: {
+    segments: ['Create', { subBlockId: 'fileName', noun: 'a file' }],
+    values: { fileName: 'Summary.md' },
+  },
+  rows: [],
+  x: 340,
+  y: 180,
+}
+
+/** Production Agent and File cards, using the File block's Write sentence. */
+export function FilesWorkflowPreview() {
+  return <TwoBlockWorkflowPreview source={SUMMARIZE} target={SAVE} />
+}
diff --git a/apps/sim/app/(landing)/files/components/files-workflow-preview/index.ts b/apps/sim/app/(landing)/files/components/files-workflow-preview/index.ts
new file mode 100644
index 00000000000..8972ee38b16
--- /dev/null
+++ b/apps/sim/app/(landing)/files/components/files-workflow-preview/index.ts
@@ -0,0 +1 @@
+export { FilesWorkflowPreview } from './files-workflow-preview'
diff --git a/apps/sim/app/(landing)/files/files.tsx b/apps/sim/app/(landing)/files/files.tsx
index 10033e2a708..8ab2be7d0c4 100644
--- a/apps/sim/app/(landing)/files/files.tsx
+++ b/apps/sim/app/(landing)/files/files.tsx
@@ -1,172 +1,63 @@
 import {
-  PlatformHeroVisual,
   SolutionsPage,
-  type SolutionsPageConfig,
-} from '@/app/(landing)/components'
-import {
-  AuditTrailGraphic,
-  OperationsTeamsGraphic,
-  RunMonitoringGraphic,
-} from '@/app/(landing)/enterprise/components/feature-graphics'
-import { FileLibraryGraphic } from '@/app/(landing)/files/components/feature-graphics/file-library-graphic'
-import { FilesSdkGraphic } from '@/app/(landing)/files/components/feature-graphics/files-sdk-graphic'
-import { FilesHeroLoop } from '@/app/(landing)/files/components/files-hero-loop'
-import { DocumentDraftGraphic } from '@/app/(landing)/solutions/components/feature-graphics'
+  type SolutionsProductPageConfig,
+} from '@/app/(landing)/components/solutions-page'
+import { ProductHeroPreview } from '@/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-hero-preview'
+import { FilesDocumentPreview } from '@/app/(landing)/files/components/files-document-preview'
+import { FilesLibraryPreview } from '@/app/(landing)/files/components/files-library-preview'
+import { FilesWorkflowPreview } from '@/app/(landing)/files/components/files-workflow-preview'
 
-/**
- * Files platform page - a consumer of {@link SolutionsPage} rendered with
- * the enterprise page's feature-tile treatment.
- *
- * The whole page is one typed {@link SolutionsPageConfig} rendered inside
- * the shared route-group layout chrome: identity (for structured data), a
- * hero, and two rows of three feature tiles. The story is one file store
- * shared by the team and its agents - agents read files as inputs, produce
- * files as outputs, and every artifact lands in the same place. Every
- * visual slot carries a feature graphic in the enterprise design language:
- * two files-specific vignettes (the shared library ledger and the SDK
- * upload window) plus the switchboard, audit ledger, run monitor, and
- * document draft retold for file routing, file history, parse runs, and
- * agent-written reports.
- */
-/** Shared meta + JSON-LD description for the Files page (one string, zero drift). */
+/** Shared description for page metadata and structured data. */
 export const FILES_PAGE_DESCRIPTION =
-  'Files is the file storage for AI agents and teams in Sim. Upload, create, and share in one store, and agents read files as inputs and write outputs back.'
+  'Keep team uploads and agent outputs together in Sim Files. Organize folders, preview documents, edit markdown, and read or write files from workflows.'
 
-const FILES_CONFIG: SolutionsPageConfig = {
+const FILES_CONFIG: SolutionsProductPageConfig = {
   module: 'Files',
   path: '/files',
   seoDescription: FILES_PAGE_DESCRIPTION,
   hero: {
     eyebrow: 'Files',
-    heading: 'One file store for your team and every agent in Sim.',
-    description:
-      'Files is the file storage for teams and every AI agent in Sim, the open-source AI workspace. Upload, create, and share. Agents read files as inputs and produce new files as outputs.',
+    heading: 'One home for your agents’ files.',
+    description: 'Keep your team’s documents and your agents’ outputs together in Sim.',
     summary:
-      'Files is the file storage for teams and AI agents in Sim, the open-source AI workspace where teams build, deploy, and manage AI agents. Teams upload, create, and share files, and agents read them as inputs, parse them, and produce new files as outputs.',
-    visual: (
-      <PlatformHeroVisual>
-        <FilesHeroLoop />
-      </PlatformHeroVisual>
-    ),
+      'Sim Files is shared file storage in the open-source AI workspace where teams build, deploy, and manage AI agents. Organize uploads in folders, preview documents, edit markdown, and use the File block to read content, pass attachments, and save outputs from agent runs.',
+    visual: <ProductHeroPreview product='files' />,
+  },
+  codeExample: {
+    title: 'Read and write from your terminal.',
+    description:
+      'List workspace files, download inputs, and upload finished reports with the Sim CLI.',
+    filename: 'files.sh',
+    commands: ['sim files list', 'sim files get "$FILE_ID"', 'sim files upload ./report.pdf'],
   },
-  rows: [
+  features: [
+    {
+      id: 'organize',
+      label: 'A shared library',
+      title: 'Everything, in its place.',
+      description:
+        'Organize folders, find the right source, and preview a file without leaving your workspace.',
+      visual: <FilesLibraryPreview />,
+      cta: { label: 'Explore Files', href: 'https://docs.sim.ai/files' },
+    },
     {
-      id: 'store',
-      title: 'One place for every file.',
-      subtitle:
-        'Sim keeps uploads, agent outputs, and shared documents in a single store your whole workspace can reach.',
-      cta: { label: 'Explore Files', href: '/signup' },
-      cards: [
-        {
-          title: 'One shared library',
-          description:
-            "Sim stores your team's uploads and your agents' outputs side by side, so nothing lives in a silo.",
-          visual: <FileLibraryGraphic />,
-        },
-        {
-          title: 'Files flow through workflows',
-          description:
-            'Sim routes files from uploads, email, and drives into agent runs, then delivers the results where your team works.',
-          featureTileTone: 'dark',
-          featureTileDescriptionTone: 'soft',
-          visual: (
-            <OperationsTeamsGraphic
-              sourceLabels={['Uploads', 'Gmail', 'Drive']}
-              destinationLabels={['Slack', 'Reports', 'Archive']}
-            />
-          ),
-        },
-        {
-          title: 'Every file action on the record',
-          description:
-            'Sim logs every upload, parse, and share, so teams always know where a file came from.',
-          visual: (
-            <AuditTrailGraphic
-              entries={[
-                {
-                  action: 'File uploaded',
-                  actor: 'Maya Chen',
-                  resource: 'brand-guidelines.pdf',
-                  time: 'Now',
-                  avatar: '/landing/team-avatar-1.jpg',
-                },
-                {
-                  action: 'Report generated',
-                  actor: 'Report agent',
-                  resource: 'weekly-report.pdf',
-                  time: '12 min ago',
-                  avatar: '/landing/team-avatar-2.jpg',
-                },
-                {
-                  action: 'File parsed',
-                  actor: 'Invoice agent',
-                  resource: 'vendor-invoices.pdf',
-                  time: '1h ago',
-                  avatar: '/landing/team-avatar-3.jpg',
-                },
-                {
-                  action: 'Folder shared',
-                  actor: 'Jordan Lee',
-                  resource: 'Q3 planning',
-                  time: 'Jun 12',
-                  avatar: '/landing/team-avatar-1.jpg',
-                },
-              ]}
-            />
-          ),
-        },
-      ],
+      id: 'review',
+      label: 'Documents in context',
+      title: 'Open the file. Keep working.',
+      description: 'Preview documents and edit markdown alongside the rest of your team’s work.',
+      visual: <FilesDocumentPreview />,
+      cta: { label: 'Explore the editor', href: 'https://docs.sim.ai/files/editor' },
     },
     {
-      id: 'agents',
-      title: 'AI agents read, parse, and produce files.',
-      subtitle:
-        'Sim agents take files as inputs, pull the data out, and write new files back to the store for your team.',
-      cta: { label: 'Build a file-handling agent', href: '/signup' },
-      cards: [
-        {
-          title: 'Read and parse anything',
-          description:
-            'Sim agents take PDFs, spreadsheets, and docs as inputs and pull out the fields your workflow needs.',
-          visual: (
-            <RunMonitoringGraphic
-              title='Parse run'
-              fields={[
-                { label: 'File', value: 'vendor-invoices.pdf', variant: 'strong' },
-                { label: 'Trigger', value: 'File upload', variant: 'chip' },
-                { label: 'Pages', value: '32', variant: 'mono' },
-                { label: 'Duration', value: '2.4s', variant: 'mono' },
-              ]}
-              outputLabel='Extracted output'
-              outputPairs={[
-                { key: 'status', value: '"parsed"' },
-                { key: 'fields', value: '214' },
-              ]}
-            />
-          ),
-        },
-        {
-          title: 'Produce files as outputs',
-          description:
-            'Sim agents draft reports, exports, and summaries, then save them to Files for the whole team.',
-          visual: (
-            <DocumentDraftGraphic
-              title='Weekly report'
-              statusTag='Agent-drafted'
-              footerLabel='Saved to Files'
-              footerDetail='Just now'
-            />
-          ),
-        },
-        {
-          title: 'Read and write from code',
-          description:
-            "Sim's SDK gives every agent the same file store, so code reads inputs and uploads outputs in a few lines.",
-          featureTileTone: 'dark',
-          featureTileDescriptionTone: 'soft',
-          visual: <FilesSdkGraphic />,
-        },
-      ],
+      id: 'workflows',
+      label: 'Inputs and outputs',
+      title: 'Inputs in. Finished work out.',
+      description: 'Read a file, let an agent work with it, and save the result back to Sim.',
+      visual: <FilesWorkflowPreview />,
+      cta: {
+        label: 'See Files in workflows',
+        href: 'https://docs.sim.ai/files/using-in-workflows',
+      },
     },
   ],
 }
diff --git a/apps/sim/app/(landing)/hooks/use-elapsed-reveal.ts b/apps/sim/app/(landing)/hooks/use-elapsed-reveal.ts
new file mode 100644
index 00000000000..63c61c47aa9
--- /dev/null
+++ b/apps/sim/app/(landing)/hooks/use-elapsed-reveal.ts
@@ -0,0 +1,52 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+/**
+ * Reveals an incrementing count (typed chars, streamed words) at a fixed
+ * step interval while `active`, deriving progress from ELAPSED time so a
+ * throttled background tab catches up instead of stalling mid-reveal.
+ * Resets to 0 when inactive; jumps straight to `total` under
+ * `prefers-reduced-motion`.
+ */
+export function useElapsedReveal(active: boolean, stepMs: number, total: number): number {
+  const [revealed, setRevealed] = useState(0)
+
+  useEffect(() => {
+    if (!active) {
+      setRevealed(0)
+      return
+    }
+
+    const media = window.matchMedia('(prefers-reduced-motion: reduce)')
+    let interval: ReturnType<typeof setInterval> | null = null
+
+    const run = () => {
+      const startedAt = performance.now()
+      interval = setInterval(() => {
+        const elapsed = performance.now() - startedAt
+        const n = Math.min(Math.floor(elapsed / stepMs) + 1, total)
+        setRevealed(n)
+        if (n >= total && interval) clearInterval(interval)
+      }, stepMs)
+    }
+
+    const syncMotionPreference = () => {
+      if (interval) clearInterval(interval)
+      if (media.matches) {
+        setRevealed(total)
+        return
+      }
+      run()
+    }
+
+    syncMotionPreference()
+    media.addEventListener('change', syncMotionPreference)
+    return () => {
+      media.removeEventListener('change', syncMotionPreference)
+      if (interval) clearInterval(interval)
+    }
+  }, [active, stepMs, total])
+
+  return revealed
+}
diff --git a/apps/sim/app/(landing)/hooks/use-lazy-mount.ts b/apps/sim/app/(landing)/hooks/use-lazy-mount.ts
index e7c04cb25f5..f46e6a8227a 100644
--- a/apps/sim/app/(landing)/hooks/use-lazy-mount.ts
+++ b/apps/sim/app/(landing)/hooks/use-lazy-mount.ts
@@ -4,9 +4,12 @@ import { useEffect, useRef, useState } from 'react'
 
 /**
  * Gates mounting a heavy client island on viewport proximity via
- * {@link IntersectionObserver}, so its bundle (and any `requestAnimationFrame`
- * loop) only loads once the section nears the viewport instead of on initial
- * page load. Falls back to an eager mount when `IntersectionObserver` is
+ * {@link IntersectionObserver}, so its bundle (and any timer or
+ * `requestAnimationFrame` loop) only loads once the section nears the
+ * viewport instead of on initial page load, and unmounts again once the
+ * section scrolls away so no loop keeps rendering frames nobody sees. The
+ * host reserves the box, and a returning section restarts from its opening
+ * beat. Falls back to an eager mount when `IntersectionObserver` is
  * unavailable, so the section never gets stuck unmounted.
  *
  * Pair with `next/dynamic(..., { ssr: false })` for the mounted component.
@@ -16,22 +19,18 @@ export function useLazyMount(rootMargin: string) {
   const [inView, setInView] = useState(false)
 
   useEffect(() => {
-    if (inView) return
     if (typeof IntersectionObserver === 'undefined') {
       setInView(true)
       return
     }
     const el = ref.current
     if (!el) return
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) setInView(true)
-      },
-      { rootMargin }
-    )
+    const observer = new IntersectionObserver(([entry]) => setInView(entry.isIntersecting), {
+      rootMargin,
+    })
     observer.observe(el)
     return () => observer.disconnect()
-  }, [inView, rootMargin])
+  }, [rootMargin])
 
   return { ref, inView }
 }
diff --git a/apps/sim/app/(landing)/hooks/use-motion-safe-cycle.ts b/apps/sim/app/(landing)/hooks/use-motion-safe-cycle.ts
index dcfa80d7d32..9099d20d657 100644
--- a/apps/sim/app/(landing)/hooks/use-motion-safe-cycle.ts
+++ b/apps/sim/app/(landing)/hooks/use-motion-safe-cycle.ts
@@ -24,7 +24,8 @@ interface MotionSafeCycleOptions {
  * {@link MotionSafeCycleOptions.scheduleCycle} on repeat or renders the
  * static finished frame via {@link MotionSafeCycleOptions.showFinished}.
  * Reacts live to preference changes and clears every pending timer on
- * restart, preference flip, and unmount.
+ * restart, preference flip, and unmount. A hidden tab stops the clock (no
+ * beats commit renders nobody sees) and a fresh cycle starts when it returns.
  *
  * @param deps - Effect dependencies; the loop restarts from scratch when
  *   they change. Defaults to mount-only.
@@ -47,19 +48,21 @@ export function useMotionSafeCycle(
       timers = [...scheduled, setTimeout(runCycle, totalMs)]
     }
 
-    const syncMotionPreference = () => {
+    const sync = () => {
       clearScheduled()
       if (media.matches) {
         showFinished()
         return
       }
-      runCycle()
+      if (!document.hidden) runCycle()
     }
 
-    syncMotionPreference()
-    media.addEventListener('change', syncMotionPreference)
+    sync()
+    media.addEventListener('change', sync)
+    document.addEventListener('visibilitychange', sync)
     return () => {
-      media.removeEventListener('change', syncMotionPreference)
+      media.removeEventListener('change', sync)
+      document.removeEventListener('visibilitychange', sync)
       clearScheduled()
     }
   }, deps)
diff --git a/apps/sim/app/(landing)/hooks/use-preview-dialog-focus.test.tsx b/apps/sim/app/(landing)/hooks/use-preview-dialog-focus.test.tsx
new file mode 100644
index 00000000000..a915e78bcf3
--- /dev/null
+++ b/apps/sim/app/(landing)/hooks/use-preview-dialog-focus.test.tsx
@@ -0,0 +1,143 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { KnowledgeSourcesPreview } from '@/app/(landing)/knowledge/components/knowledge-sources-preview'
+import { TablesRecordsPreview } from '@/app/(landing)/tables/components/tables-records-preview'
+
+vi.mock('next/navigation', () => ({ usePathname: () => '/tables' }))
+
+let host: HTMLDivElement
+let root: Root
+
+beforeEach(() => {
+  vi.useFakeTimers()
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+  vi.stubGlobal(
+    'ResizeObserver',
+    class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    }
+  )
+  host = document.createElement('div')
+  document.body.append(host)
+  root = createRoot(host)
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  act(() => vi.runOnlyPendingTimers())
+  host.remove()
+  vi.useRealTimers()
+  vi.unstubAllGlobals()
+})
+
+function settle() {
+  act(() => vi.advanceTimersByTime(32))
+}
+
+function mount(ui: ReactNode) {
+  act(() => root.render(ui))
+  settle()
+}
+
+function button(text: string, container: ParentNode = document): HTMLButtonElement {
+  const element = Array.from(container.querySelectorAll<HTMLButtonElement>('button')).find(
+    (node) => node.getAttribute('aria-label') === text || node.textContent?.trim() === text
+  )
+  if (!element) throw new Error(`Missing button: ${text}`)
+  return element
+}
+
+function dialog(): HTMLElement {
+  const element = document.querySelector<HTMLElement>('[role="dialog"]')
+  if (!element) throw new Error('Missing dialog')
+  return element
+}
+
+function click(element: HTMLElement) {
+  act(() => {
+    element.focus()
+    element.click()
+  })
+  settle()
+}
+
+function pressEscape() {
+  act(() => {
+    dialog().dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true })
+    )
+  })
+  settle()
+}
+
+function openMenu(trigger: HTMLElement) {
+  act(() => {
+    trigger.focus()
+    trigger.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true })
+    )
+  })
+  settle()
+}
+
+function selectMenuItem(text: string) {
+  const item = Array.from(document.querySelectorAll<HTMLElement>('[role="menuitem"]')).find(
+    (node) => node.textContent?.trim() === text
+  )
+  if (!item) throw new Error(`Missing menu item: ${text}`)
+  click(item)
+}
+
+describe('Preview dialog return focus with native ChipModal', () => {
+  it.each(['Escape', 'Cancel', 'Close', 'Update Row'])(
+    'returns to the Tables row after %s',
+    (action) => {
+      mount(<TablesRecordsPreview />)
+      const opener = button('Edit Acme Corp row')
+      click(opener)
+      expect(dialog().contains(document.activeElement)).toBe(true)
+
+      if (action === 'Escape') pressEscape()
+      else click(button(action, dialog()))
+
+      expect(document.querySelector('[role="dialog"]')).toBeNull()
+      expect(document.activeElement).toBe(opener)
+    }
+  )
+
+  it('returns to Filter when an updated Tables row leaves the current filter', () => {
+    mount(<TablesRecordsPreview />)
+    const filter = button('Filter')
+    openMenu(filter)
+    selectMenuItem('Qualified')
+    click(button('Edit Acme Corp row'))
+    openMenu(button('Qualified', dialog()))
+    selectMenuItem('Review')
+    click(button('Update Row', dialog()))
+
+    expect(document.querySelector('[aria-label="Edit Acme Corp row"]')).toBeNull()
+    expect(document.activeElement).toBe(filter)
+  })
+
+  it.each(['Escape', 'Close'])(
+    'returns to the actual Knowledge source opener after %s',
+    (action) => {
+      mount(<KnowledgeSourcesPreview />)
+      const opener = button('View connected sources including Confluence')
+      click(opener)
+      expect(dialog().contains(document.activeElement)).toBe(true)
+
+      if (action === 'Escape') pressEscape()
+      else click(button(action, dialog()))
+
+      expect(document.querySelector('[role="dialog"]')).toBeNull()
+      expect(document.activeElement).toBe(opener)
+    }
+  )
+})
diff --git a/apps/sim/app/(landing)/hooks/use-preview-dialog-focus.ts b/apps/sim/app/(landing)/hooks/use-preview-dialog-focus.ts
new file mode 100644
index 00000000000..8fab2ee2ba9
--- /dev/null
+++ b/apps/sim/app/(landing)/hooks/use-preview-dialog-focus.ts
@@ -0,0 +1,27 @@
+'use client'
+
+import { type RefObject, useEffect, useRef } from 'react'
+
+/** Restores the actual opener when a preview uses a controlled modal without a DialogTrigger. */
+export function usePreviewDialogFocus(open: boolean, fallbackRef: RefObject<HTMLElement | null>) {
+  const openerRef = useRef<HTMLElement | null>(null)
+  const previousOpenRef = useRef(open)
+
+  useEffect(() => {
+    const closed = previousOpenRef.current && !open
+    previousOpenRef.current = open
+    if (!closed) return
+
+    /** Let the dialog release its focus trap before returning to the preview. */
+    const frame = requestAnimationFrame(() => {
+      const opener = openerRef.current
+      if (opener?.isConnected) opener.focus({ preventScroll: true })
+      if (!opener?.isConnected || document.activeElement !== opener) {
+        fallbackRef.current?.focus({ preventScroll: true })
+      }
+    })
+    return () => cancelAnimationFrame(frame)
+  }, [open, fallbackRef])
+
+  return openerRef
+}
diff --git a/apps/sim/app/(landing)/integrations/(shell)/[slug]/opengraph-image.tsx b/apps/sim/app/(landing)/integrations/(shell)/[slug]/opengraph-image.tsx
index e2767121c9c..dd6f5b3e748 100644
--- a/apps/sim/app/(landing)/integrations/(shell)/[slug]/opengraph-image.tsx
+++ b/apps/sim/app/(landing)/integrations/(shell)/[slug]/opengraph-image.tsx
@@ -10,13 +10,7 @@ export const size = COVER_OG_SIZE
 const integrations = integrationsJson.integrations as readonly Integration[]
 const bySlug = new Map(integrations.map((i) => [i.slug, i]))
 
-/**
- * The sibling page.tsx sets `dynamicParams = false`, a segment-level
- * restriction that also blocks this metadata route from rendering any
- * param combination it wasn't statically generated for - but Next does not
- * share generateStaticParams between a page and its sibling metadata
- * routes, so without this export every integration's OG image 404s.
- */
+/** Pre-render catalog images separately from their sibling pages. */
 export async function generateStaticParams() {
   return integrations.map((integration) => ({ slug: integration.slug }))
 }
diff --git a/apps/sim/app/(landing)/integrations/(shell)/[slug]/page.tsx b/apps/sim/app/(landing)/integrations/(shell)/[slug]/page.tsx
index 7cced85a754..f920c55ec56 100644
--- a/apps/sim/app/(landing)/integrations/(shell)/[slug]/page.tsx
+++ b/apps/sim/app/(landing)/integrations/(shell)/[slug]/page.tsx
@@ -1,7 +1,6 @@
 import { ChipLink } from '@sim/emcn'
 import { truncate } from '@sim/utils/string'
 import type { Metadata } from 'next'
-import Image from 'next/image'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
 import { SITE_URL } from '@/lib/core/utils/urls'
@@ -49,7 +48,8 @@ const MAX_TEMPLATES_SHOWN = 12
 const bySlug = new Map(allIntegrations.map((i) => [i.slug, i]))
 const byType = new Map(allIntegrations.map((i) => [i.type, i]))
 
-export const dynamicParams = false
+/** Unknown slugs reach the section 404 while known pages remain pre-rendered. */
+export const dynamicParams = true
 
 /**
  * Returns up to `limit` related integration slugs.
@@ -455,7 +455,7 @@ export default async function IntegrationPage({ params }: { params: Promise<{ sl
       <JsonLd data={faqJsonLd} />
 
       {/* Hero */}
-      <div className='mx-auto w-full max-w-[1460px] px-20 pt-[112px] max-sm:px-5 max-sm:pt-20 max-lg:px-8'>
+      <div className='mx-auto w-full max-w-[1728px] px-10 pt-[112px] max-sm:pt-20 max-md:px-7 max-lg:px-8 max-xl:px-9'>
         <div className='mb-6'>
           <BackLink href='/integrations' label='Back to Integrations' />
         </div>
@@ -532,7 +532,7 @@ export default async function IntegrationPage({ params }: { params: Promise<{ sl
       <div className='mt-8 h-px w-full bg-[var(--border)]' />
 
       {/* Border-railed content */}
-      <div className='mx-20 max-w-[1300px] border-[var(--border)] border-x max-sm:mx-5 max-lg:mx-8 min-[1460px]:mx-auto'>
+      <div className='mx-10 max-w-[1648px] border-[var(--border)] border-x max-md:mx-7 max-lg:mx-8 max-xl:mx-9 min-[1728px]:mx-auto'>
         {/* Overview */}
         {overviewBody && (
           <>
@@ -966,60 +966,6 @@ export default async function IntegrationPage({ params }: { params: Promise<{ sl
             <div className='h-px w-full bg-[var(--border)]' />
           </>
         )}
-
-        {/* Bottom CTA */}
-        <section aria-labelledby='cta-heading' className='px-6 py-16 text-center'>
-          <div className='mx-auto mb-6 flex items-center justify-center gap-3'>
-            <Image
-              src='/brandbook/logo/small.png'
-              alt='Sim'
-              width={56}
-              height={56}
-              className='shrink-0 rounded-xl'
-              unoptimized
-            />
-            <div className='flex items-center gap-2'>
-              <span className='h-px w-5 bg-[var(--border-1)]' aria-hidden='true' />
-              <span
-                className='flex size-7 items-center justify-center rounded-full border border-[var(--border-1)]'
-                aria-hidden='true'
-              >
-                <svg
-                  className='size-3.5 text-[var(--text-muted)]'
-                  viewBox='0 0 24 24'
-                  fill='none'
-                  stroke='currentColor'
-                  strokeWidth={2}
-                  strokeLinecap='round'
-                >
-                  <path d='M5 12h14' />
-                  <path d='M12 5v14' />
-                </svg>
-              </span>
-              <span className='h-px w-5 bg-[var(--border-1)]' aria-hidden='true' />
-            </div>
-            <IntegrationIcon
-              bgColor={bgColor}
-              name={name}
-              Icon={IconComponent}
-              className='size-14 rounded-xl'
-              iconClassName='size-7'
-              fallbackClassName='text-[22px]'
-              aria-hidden='true'
-            />
-          </div>
-          <h2
-            id='cta-heading'
-            className='mb-3 text-[28px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] sm:text-[34px]'
-          >
-            Start automating {name} today
-          </h2>
-          <p className='mx-auto mb-8 max-w-[480px] text-[var(--text-body)] text-base leading-[150%] tracking-[0.02em]'>
-            Build your first AI agent with {name} in minutes. Connect to every tool your team uses.
-            Free to start, no credit card required.
-          </p>
-          <IntegrationCtaButton label='Build for free'>Build for free</IntegrationCtaButton>
-        </section>
       </div>
 
       {/* Closing full-width divider */}
diff --git a/apps/sim/app/(landing)/integrations/(shell)/page.tsx b/apps/sim/app/(landing)/integrations/(shell)/page.tsx
index 75760b22f41..045896769ca 100644
--- a/apps/sim/app/(landing)/integrations/(shell)/page.tsx
+++ b/apps/sim/app/(landing)/integrations/(shell)/page.tsx
@@ -1,3 +1,4 @@
+import { cn } from '@sim/emcn'
 import type { Metadata } from 'next'
 import type { SearchParams } from 'nuqs/server'
 import { SITE_URL } from '@/lib/core/utils/urls'
@@ -12,6 +13,7 @@ import { POPULAR_WORKFLOWS } from '@/lib/integrations/popular-workflows'
 import { withFilteredNoindex } from '@/lib/landing/seo'
 import { JsonLd } from '@/app/(landing)/components/json-ld'
 import { LandingFAQ } from '@/app/(landing)/components/landing-faq'
+import { LANDING_CONTENT_WIDTH, LANDING_GUTTER } from '@/app/(landing)/components/landing-layout'
 import { IntegrationCard } from '@/app/(landing)/integrations/components/integration-card'
 import { IntegrationGrid } from '@/app/(landing)/integrations/components/integration-grid'
 import { RequestIntegrationModal } from '@/app/(landing)/integrations/components/request-integration-modal'
@@ -170,7 +172,7 @@ export default async function IntegrationsPage({
       <JsonLd data={faqJsonLd} />
 
       {/* Hero */}
-      <div className='mx-auto w-full max-w-[1460px] px-20 pt-[112px] max-sm:px-5 max-sm:pt-20 max-lg:px-8'>
+      <div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER, 'pt-[112px] max-sm:pt-20')}>
         <div className='flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between'>
           <h1
             id='integrations-heading'
@@ -189,8 +191,8 @@ export default async function IntegrationsPage({
       <div className='mt-8 h-px w-full bg-[var(--border)]' />
 
       {/* Border-railed content */}
-      <div className='mx-auto w-full max-w-[1460px]'>
-        <div className='mx-20 border-[var(--border)] border-x max-sm:mx-5 max-lg:mx-8'>
+      <div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER)}>
+        <div className='border-[var(--border)] border-x'>
           {/* Featured integrations - top */}
           {featured.length > 0 && (
             <>
diff --git a/apps/sim/app/(landing)/integrations/components/integration-card.tsx b/apps/sim/app/(landing)/integrations/components/integration-card.tsx
index e7b2197cc41..03558b74f22 100644
--- a/apps/sim/app/(landing)/integrations/components/integration-card.tsx
+++ b/apps/sim/app/(landing)/integrations/components/integration-card.tsx
@@ -32,9 +32,9 @@ export function IntegrationCard({ integration, IconComponent }: IntegrationItemP
         aria-hidden='true'
       />
       <div className='flex flex-col gap-2'>
-        <h3 className='text-[var(--text-primary)] text-lg leading-tight tracking-[-0.01em]'>
+        <h2 className='text-[var(--text-primary)] text-lg leading-tight tracking-[-0.01em]'>
           {name}
-        </h3>
+        </h2>
         <p className='line-clamp-2 text-[var(--text-muted)] text-sm leading-[150%]'>
           {description}
         </p>
@@ -58,7 +58,6 @@ export const IntegrationRow = memo(function IntegrationRow({
       <Link
         href={`/integrations/${slug}`}
         className={`group/link flex items-center gap-4 px-6 py-4 ${HOVER_BG}`}
-        aria-label={`${name} integration`}
       >
         <IntegrationIcon
           bgColor={bgColor}
diff --git a/apps/sim/app/(landing)/knowledge/components/feature-graphics/connector-sync-graphic.module.css b/apps/sim/app/(landing)/knowledge/components/feature-graphics/connector-sync-graphic.module.css
index d3a2361d882..a9fbf0de57d 100644
--- a/apps/sim/app/(landing)/knowledge/components/feature-graphics/connector-sync-graphic.module.css
+++ b/apps/sim/app/(landing)/knowledge/components/feature-graphics/connector-sync-graphic.module.css
@@ -1,34 +1,36 @@
-/**
- * The ConnectorSyncGraphic's motion: the connector rows stamp in top to
- * bottom one after another — the audit tile's one-shot settle, never
- * re-played — then the syncing row's icon box carries the family's
- * shared quiet 6s ring-pulse beat. The status dot blink is Tailwind's
- * `animate-pulse`, disabled through its own `motion-reduce:animate-none`.
- * Under prefers-reduced-motion the rows render fully settled.
- */
-
-.row0,
-.row1,
-.row2 {
-  animation: connector-sync-row-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards;
+/** The source cards settle once in reading order; the stack layers move with their card. */
+.card0,
+.card1,
+.card2,
+.card3,
+.card4,
+.card5 {
+  animation: connector-card-in 650ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
 }
 
-.row0 {
-  animation-delay: 0.35s;
+.card0 {
+  animation-delay: 100ms;
 }
-
-.row1 {
-  animation-delay: 0.55s;
+.card1 {
+  animation-delay: 180ms;
 }
-
-.row2 {
-  animation-delay: 0.75s;
+.card2 {
+  animation-delay: 260ms;
+}
+.card3 {
+  animation-delay: 340ms;
+}
+.card4 {
+  animation-delay: 420ms;
+}
+.card5 {
+  animation-delay: 500ms;
 }
 
-@keyframes connector-sync-row-in {
+@keyframes connector-card-in {
   from {
     opacity: 0;
-    transform: translateY(-6px);
+    transform: translateY(6px);
   }
   to {
     opacity: 1;
@@ -36,28 +38,13 @@
   }
 }
 
-.iconPulse {
-  animation: connector-sync-icon-pulse 6s ease-out 1.4s infinite;
-}
-
-@keyframes connector-sync-icon-pulse {
-  0%,
-  20% {
-    box-shadow: 0 0 0 0 color-mix(in srgb, var(--text-secondary) 30%, transparent);
-  }
-  36% {
-    box-shadow: 0 0 0 5px color-mix(in srgb, var(--text-secondary) 0%, transparent);
-  }
-  100% {
-    box-shadow: 0 0 0 0 color-mix(in srgb, var(--text-secondary) 0%, transparent);
-  }
-}
-
 @media (prefers-reduced-motion: reduce) {
-  .row0,
-  .row1,
-  .row2,
-  .iconPulse {
+  .card0,
+  .card1,
+  .card2,
+  .card3,
+  .card4,
+  .card5 {
     animation: none;
   }
 }
diff --git a/apps/sim/app/(landing)/knowledge/components/feature-graphics/connector-sync-graphic.tsx b/apps/sim/app/(landing)/knowledge/components/feature-graphics/connector-sync-graphic.tsx
index 78651a6291a..78ff8a15942 100644
--- a/apps/sim/app/(landing)/knowledge/components/feature-graphics/connector-sync-graphic.tsx
+++ b/apps/sim/app/(landing)/knowledge/components/feature-graphics/connector-sync-graphic.tsx
@@ -1,122 +1,98 @@
+import type { ComponentType } from 'react'
 import { ChipTag, cn } from '@sim/emcn'
-import { ConfluenceIcon, GoogleDriveIcon, NotionIcon } from '@/components/icons'
+import { Check } from '@sim/emcn/icons'
+import {
+  ConfluenceIcon,
+  GithubIcon,
+  GoogleDriveIcon,
+  MicrosoftSharepointIcon,
+  NotionIcon,
+  SlackIcon,
+} from '@/components/icons'
 import { FeatureGraphicShell } from '@/app/(landing)/enterprise/components/feature-graphics'
 import styles from '@/app/(landing)/knowledge/components/feature-graphics/connector-sync-graphic.module.css'
 
-interface ConnectorRow {
-  /** Connector brand mark. */
-  icon: React.ComponentType<{ className?: string }>
-  /** Connector name. */
+interface ConnectorSource {
+  icon: ComponentType<{ className?: string }>
   name: string
-  /** Document count attribution line. */
   documents: string
-  /** Right-aligned sync status. */
-  status: string
-  /** Whether this row is the mid-sync one carrying the live beat. */
   syncing?: boolean
 }
 
-/**
- * Three sources feeding one knowledge base: Notion mid-sync as the live
- * beat, Drive and Confluence settled from earlier passes.
- */
-const CONNECTOR_ROWS: readonly ConnectorRow[] = [
-  {
-    icon: NotionIcon,
-    name: 'Notion',
-    documents: '128 docs',
-    status: 'Syncing',
-    syncing: true,
-  },
-  {
-    icon: GoogleDriveIcon,
-    name: 'Google Drive',
-    documents: '342 docs',
-    status: 'Synced · 2m ago',
-  },
-  {
-    icon: ConfluenceIcon,
-    name: 'Confluence',
-    documents: '96 docs',
-    status: 'Synced · 1h ago',
-  },
-] as const
+interface ConnectorCardProps {
+  source: ConnectorSource
+  index: number
+}
+
+/** Supported knowledge sources, shown with illustrative document counts. */
+const CONNECTOR_SOURCES: readonly ConnectorSource[] = [
+  { icon: NotionIcon, name: 'Notion', documents: '128 docs', syncing: true },
+  { icon: GoogleDriveIcon, name: 'Google Drive', documents: '342 docs' },
+  { icon: ConfluenceIcon, name: 'Confluence', documents: '96 docs' },
+  { icon: SlackIcon, name: 'Slack', documents: '24 channels' },
+  { icon: GithubIcon, name: 'GitHub', documents: '86 files' },
+  { icon: MicrosoftSharepointIcon, name: 'SharePoint', documents: '214 docs' },
+]
+
+const CARD_STEPS = [
+  styles.card0,
+  styles.card1,
+  styles.card2,
+  styles.card3,
+  styles.card4,
+  styles.card5,
+]
 
-/** Per-row stamp-in classes - the stagger order is baked into each class's delay. */
-const ROW_STEP_CLASSES = [styles.row0, styles.row1, styles.row2] as const
+/** Small document layers give each connected source depth without extra UI chrome. */
+function ConnectorCard({ source, index }: ConnectorCardProps) {
+  return (
+    <div className={cn('relative h-full min-w-0', CARD_STEPS[index])}>
+      <div className='-bottom-1.5 absolute inset-x-3 top-3 rounded-[10px] border border-[var(--border)] bg-[var(--surface-3)] opacity-50' />
+      <div className='-bottom-[3px] absolute inset-x-1.5 top-1.5 rounded-[10px] border border-[var(--border)] bg-[var(--surface-2)]' />
+      <div className='relative flex h-full flex-col justify-between rounded-[10px] border border-[var(--border)] bg-[var(--white)] p-[3cqw] shadow-xs dark:bg-[var(--surface-4)]'>
+        <div className='flex shrink-0 items-center justify-between'>
+          <source.icon className='size-[clamp(18px,6cqw,24px)] shrink-0' />
+          <span className='flex items-center gap-1 text-[11px] text-[var(--text-muted)] leading-4'>
+            {source.syncing ? (
+              <>
+                <span className='size-1 animate-pulse rounded-full bg-[var(--text-icon)] motion-reduce:animate-none' />
+                Syncing
+              </>
+            ) : (
+              <Check className='size-3 text-[var(--text-icon)]' />
+            )}
+          </span>
+        </div>
+        <div className='min-w-0'>
+          <p className='truncate text-[13px] text-[var(--text-primary)] leading-[18px]'>
+            {source.name}
+          </p>
+          <p className='truncate text-[12px] text-[var(--text-muted)] leading-4'>
+            {source.documents}
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
 
-/**
- * Source syncing told as a frameless connector ledger (the audit tile's
- * composition): a small "Connectors" header with an `Auto-sync` mono
- * ChipTag (fill stepped up to `--surface-6` so the pill stays legible on
- * the grey ground) above three source rows, each a white card in the
- * audit tile's exact chrome (`--white` fill, 1px `--border-1` hairline,
- * `rounded-xl`, `shadow-xs`) pairing the connector's real brand mark in
- * the lifecycle header's outlined `size-6` icon box with the source name,
- * its document count, and a right-aligned sync status. The top row is
- * mid-sync - a pulsing dot beside "Syncing" and the family's quiet 6s
- * ring pulse on its icon box - while the settled rows read "Synced".
- *
- * Motion (from `connector-sync-graphic.module.css`): the rows stamp in
- * top to bottom once - the audit tile's one-shot settle, never re-played -
- * then the syncing row's icon box carries the shared ring-pulse beat. The
- * dot blink is Tailwind's `animate-pulse` with its own
- * `motion-reduce:animate-none`; everything renders settled under
- * `prefers-reduced-motion`.
- *
- * The feature tile's visual slot bleeds `2rem` right (`1.5rem` under
- * `max-lg`) but not left, so this centered vignette adds matching right
- * padding to land on the tile's visible center. The column is fluid
- * (`w-full max-w-[312px]`), relaxing to 400px on the wide spanned tile of
- * the two-column band (container ≥500px inside `sm`..`lg`).
- */
+/** Six lightly stacked source cards fill the portrait stage. */
 export function ConnectorSyncGraphic() {
   return (
-    <FeatureGraphicShell>
+    <FeatureGraphicShell variant='portrait'>
       <div
         aria-hidden='true'
-        className='absolute inset-0 flex items-center justify-center pr-8 max-lg:pr-6'
+        data-feature-graphic='connectors'
+        className='absolute inset-0 flex justify-center p-5 [container-type:inline-size]'
       >
-        <div className='w-full max-w-[312px] sm:max-lg:[@container(min-width:500px)]:max-w-[400px]'>
-          <div className='mb-4 flex items-center justify-between'>
+        <div className='flex h-full w-full flex-col'>
+          <div className='mb-5 flex items-center justify-between'>
             <span className='text-[var(--text-primary)] text-base'>Connectors</span>
-            <ChipTag variant='mono' className='bg-[var(--surface-6)]'>
-              Auto-sync
-            </ChipTag>
+            <ChipTag variant='mono'>Auto-sync</ChipTag>
           </div>
-
-          <div className='flex flex-col gap-2'>
-            {CONNECTOR_ROWS.map((row, index) => (
-              <div
-                key={row.name}
-                className={cn(
-                  'flex items-center gap-2.5 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-xs',
-                  ROW_STEP_CLASSES[index]
-                )}
-              >
-                <span
-                  className={cn(
-                    'flex size-6 shrink-0 items-center justify-center rounded-md border border-[var(--border-1)]',
-                    row.syncing && styles.iconPulse
-                  )}
-                >
-                  <row.icon className='size-[14px]' />
-                </span>
-                <span className='min-w-0 flex-1'>
-                  <span className='block truncate text-[var(--text-primary)] text-small'>
-                    {row.name}
-                  </span>
-                  <span className='block truncate text-[var(--text-muted)] text-caption'>
-                    {row.documents}
-                  </span>
-                </span>
-                <span className='flex shrink-0 items-center gap-1.5 text-[var(--text-muted)] text-caption'>
-                  {row.syncing && (
-                    <span className='size-1.5 animate-pulse rounded-full bg-[var(--text-secondary)] motion-reduce:animate-none' />
-                  )}
-                  {row.status}
-                </span>
-              </div>
+          <div className='grid min-h-0 flex-1 grid-cols-2 grid-rows-3 gap-x-3 gap-y-4 pb-1.5'>
+            {CONNECTOR_SOURCES.map((source, index) => (
+              <ConnectorCard key={source.name} source={source} index={index} />
             ))}
           </div>
         </div>
diff --git a/apps/sim/app/(landing)/knowledge/components/feature-graphics/knowledge-query-graphic.tsx b/apps/sim/app/(landing)/knowledge/components/feature-graphics/knowledge-query-graphic.tsx
deleted file mode 100644
index 539f0233d2a..00000000000
--- a/apps/sim/app/(landing)/knowledge/components/feature-graphics/knowledge-query-graphic.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Database } from '@sim/emcn/icons'
-import {
-  type CodeSegment,
-  CodeWindowGraphic,
-} from '@/app/(landing)/components/shared/code-window-graphic'
-
-/**
- * A knowledge search step inside an agent's logic - retrieve the passages
- * that ground the answer, then answer from them.
- */
-const CODE_LINES: readonly CodeSegment[][] = [
-  [
-    { text: 'const', tone: 'muted' },
-    { text: ' ' },
-    { text: 'docs', tone: 'primary' },
-    { text: ' ' },
-    { text: '= await', tone: 'muted' },
-    { text: ' ' },
-    { text: 'knowledge', tone: 'primary' },
-  ],
-  [{ text: '  .search({' }],
-  [
-    { text: '    ' },
-    { text: 'base:', tone: 'muted' },
-    { text: ' ' },
-    { text: "'Support KB'", tone: 'primary' },
-    { text: ',' },
-  ],
-  [
-    { text: '    ' },
-    { text: 'query:', tone: 'muted' },
-    { text: ' ' },
-    { text: 'ticket.question', tone: 'primary' },
-    { text: ',' },
-  ],
-  [{ text: '  })' }],
-  [
-    { text: 'return', tone: 'muted' },
-    { text: ' ' },
-    { text: 'agent.answer({ docs })', tone: 'primary' },
-  ],
-] as const
-
-/**
- * Knowledge retrieval inside agent logic, told in the shared
- * {@link CodeWindowGraphic} editor window: a `Database` mark and the
- * `answer-bot.ts` filename over a knowledge search step retrieving the
- * Support KB passages that ground the agent's answer.
- */
-export function KnowledgeQueryGraphic() {
-  return (
-    <CodeWindowGraphic
-      icon={<Database className='size-[14px] text-[var(--text-muted-inverse)]' />}
-      filename='answer-bot.ts'
-      lines={CODE_LINES}
-    />
-  )
-}
diff --git a/apps/sim/app/(landing)/knowledge/components/knowledge-product-previews/index.ts b/apps/sim/app/(landing)/knowledge/components/knowledge-product-previews/index.ts
new file mode 100644
index 00000000000..959b0c13eb7
--- /dev/null
+++ b/apps/sim/app/(landing)/knowledge/components/knowledge-product-previews/index.ts
@@ -0,0 +1,5 @@
+export { KnowledgeSourcesPreview } from '../knowledge-sources-preview'
+export {
+  KnowledgeDocumentsPreview,
+  KnowledgeRetrievalPreview,
+} from './knowledge-product-previews'
diff --git a/apps/sim/app/(landing)/knowledge/components/knowledge-product-previews/knowledge-product-previews.tsx b/apps/sim/app/(landing)/knowledge/components/knowledge-product-previews/knowledge-product-previews.tsx
new file mode 100644
index 00000000000..c167a6b36d8
--- /dev/null
+++ b/apps/sim/app/(landing)/knowledge/components/knowledge-product-previews/knowledge-product-previews.tsx
@@ -0,0 +1,44 @@
+'use client'
+
+import { PackageSearchIcon } from '@/components/icons'
+import { StageBlockCard } from '@/app/(landing)/components/hero/components/hero-platform-loop/stage-block-card'
+import type { BlockDef } from '@/app/(landing)/components/hero/components/hero-visual/workflow-data'
+import { KnowledgeDocumentDetail } from '@/app/(landing)/knowledge/components/knowledge-sources-preview/components/knowledge-document-detail'
+import { KNOWLEDGE_PREVIEW_SOURCES } from '@/app/(landing)/knowledge/components/knowledge-sources-preview/data'
+
+const SEARCH_BLOCK: BlockDef = {
+  id: 'knowledge-search',
+  type: 'knowledge',
+  typeLabel: 'Knowledge',
+  name: 'Search knowledge',
+  icon: PackageSearchIcon,
+  bgColor: '#00B0B0',
+  sentence: {
+    segments: ['Search ', { subBlockId: 'knowledgeBaseSelector' }],
+    values: { knowledgeBaseSelector: 'Product knowledge' },
+  },
+  rows: [],
+  x: 0,
+  y: 0,
+}
+
+/** The real document's Content, Index, Tokens, and Status table replaces the invented inspector. */
+export function KnowledgeDocumentsPreview() {
+  return (
+    <div className='absolute top-16 bottom-[-40px] left-[12%] flex w-[76%] min-w-[440px] flex-col overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--bg)] font-normal text-[13px] text-[var(--text-body)] shadow-xs'>
+      <KnowledgeDocumentDetail document={KNOWLEDGE_PREVIEW_SOURCES[0].documents[0]} />
+    </div>
+  )
+}
+
+/** KnowledgeBlock's Search sentence, rendered by the same native workflow card used in the hero. */
+export function KnowledgeRetrievalPreview() {
+  return (
+    <div className='absolute inset-0'>
+      <div className='absolute top-[172px] right-0 left-0 h-px bg-[var(--border)]' />
+      <div className='-translate-x-1/2 absolute top-[116px] left-1/2 h-[112px] w-[250px]'>
+        <StageBlockCard block={SEARCH_BLOCK} orientation='horizontal' decorative />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/knowledge/components/knowledge-sources-preview/components/knowledge-document-detail/index.ts b/apps/sim/app/(landing)/knowledge/components/knowledge-sources-preview/components/knowledge-document-detail/index.ts
new file mode 100644
index 00000000000..ad0993f1eee
--- /dev/null
+++ b/apps/sim/app/(landing)/knowledge/components/knowledge-sources-preview/components/knowledge-document-detail/index.ts
@@ -0,0 +1 @@
+export { KnowledgeDocumentDetail } from './knowledge-document-detail'
diff --git a/apps/sim/app/(landing)/knowledge/components/knowledge-sources-preview/components/knowledge-document-detail/knowledge-document-detail.test.tsx b/apps/sim/app/(landing)/knowledge/components/knowledge-sources-preview/components/knowledge-document-detail/knowledge-document-detail.test.tsx
new file mode 100644
index 00000000000..07c4861a798
--- /dev/null
+++ b/apps/sim/app/(landing)/knowledge/components/knowledge-sources-preview/components/knowledge-document-detail/knowledge-document-detail.test.tsx
@@ -0,0 +1,79 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, type ComponentProps, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('@sim/emcn', () => ({
+  Badge: ({ children }: { children: ReactNode }) => <span>{children}</span>,
+  Chip: ({ children, ref, onClick, disabled, 'aria-label': label }: ComponentProps<'button'>) => (
+    <button ref={ref} type='button' onClick={onClick} disabled={disabled} aria-label={label}>
+      {children}
+    </button>
+  ),
+  Switch: () => null,
+}))
+
+vi.mock('@sim/emcn/icons', () => ({
+  ArrowLeft: () => null,
+  ChevronDown: () => null,
+  ChevronUp: () => null,
+  FileText: () => null,
+}))
+
+vi.mock('@/components/icons', () => ({
+  ConfluenceIcon: () => null,
+  GoogleDriveIcon: () => null,
+  NotionIcon: () => null,
+}))
+
+vi.mock('@/app/workspace/[workspaceId]/components/resource/components/resource-options', () => ({
+  ResourceOptions: () => null,
+}))
+
+import { KnowledgeDocumentDetail } from '@/app/(landing)/knowledge/components/knowledge-sources-preview/components/knowledge-document-detail/knowledge-document-detail'
+import { KNOWLEDGE_PREVIEW_SOURCES } from '@/app/(landing)/knowledge/components/knowledge-sources-preview/data'
+
+const PREVIEW_DOCUMENT = KNOWLEDGE_PREVIEW_SOURCES[0].documents[0]
+let host: HTMLDivElement
+let root: Root
+
+beforeEach(() => {
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+  host = document.createElement('div')
+  document.body.append(host)
+  root = createRoot(host)
+  act(() => root.render(<KnowledgeDocumentDetail document={PREVIEW_DOCUMENT} />))
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  host.remove()
+  vi.unstubAllGlobals()
+})
+
+function button(label: string): HTMLButtonElement {
+  const element = Array.from(host.querySelectorAll<HTMLButtonElement>('button')).find(
+    (button) => button.getAttribute('aria-label') === label || button.textContent === label
+  )
+  if (!element) throw new Error(`Missing button: ${label}`)
+  return element
+}
+
+describe('KnowledgeDocumentDetail focus', () => {
+  it.each([0, 1])('moves focus into chunk %i and restores its row on return', (index) => {
+    expect(document.activeElement).toBe(document.body)
+    const label = `Open chunk ${index}: ${PREVIEW_DOCUMENT.chunks[index].content}`
+    const rowButton = button(label)
+    rowButton.focus()
+    act(() => rowButton.click())
+
+    expect(rowButton.isConnected).toBe(false)
+    const backButton = button('Back to chunks')
+    expect(document.activeElement).toBe(backButton)
+
+    act(() => backButton.click())
+    expect(document.activeElement).toBe(button(label))
+  })
+})
diff --git a/apps/sim/app/(landing)/knowledge/components/knowledge-sources-preview/components/knowledge-document-detail/knowledge-document-detail.tsx b/apps/sim/app/(landing)/knowledge/components/knowledge-sources-preview/components/knowledge-document-detail/knowledge-document-detail.tsx
new file mode 100644
index 00000000000..c9154411458
--- /dev/null
+++ b/apps/sim/app/(landing)/knowledge/components/knowledge-sources-preview/components/knowledge-document-detail/knowledge-document-detail.tsx
@@ -0,0 +1,165 @@
+'use client'
+
+import { type RefObject, useEffect, useRef, useState } from 'react'
+import { Badge, Chip, Switch } from '@sim/emcn'
+import { ArrowLeft, ChevronDown, ChevronUp, FileText } from '@sim/emcn/icons'
+import type { KnowledgePreviewDocument } from '@/app/(landing)/knowledge/components/knowledge-sources-preview/data'
+import { ResourceOptions } from '@/app/workspace/[workspaceId]/components/resource/components/resource-options'
+
+interface KnowledgeDocumentDetailProps {
+  document: KnowledgePreviewDocument
+  backButtonRef?: RefObject<HTMLButtonElement | null>
+  onBack?: () => void
+}
+
+/** Production document navigation: chunk table, then a plain, read-only chunk editor. */
+export function KnowledgeDocumentDetail({
+  document,
+  backButtonRef,
+  onBack,
+}: KnowledgeDocumentDetailProps) {
+  const chunkBackButtonRef = useRef<HTMLButtonElement>(null)
+  const chunkButtonsRef = useRef<Map<number, HTMLButtonElement> | null>(null)
+  const chunkButtons = (chunkButtonsRef.current ??= new Map())
+  const openedChunkIndexRef = useRef<number | null>(null)
+  const [query, setQuery] = useState('')
+  const [chunkIndex, setChunkIndex] = useState<number | null>(null)
+  const chunkOpen = chunkIndex !== null
+  const chunk = chunkIndex === null ? null : document.chunks[chunkIndex]
+  const tokensPerChunk = Math.round(document.tokens / document.chunks.length)
+
+  useEffect(() => {
+    if (chunkOpen) chunkBackButtonRef.current?.focus({ preventScroll: true })
+    else if (openedChunkIndexRef.current !== null) {
+      chunkButtons.get(openedChunkIndexRef.current)?.focus({ preventScroll: true })
+    }
+  }, [chunkOpen])
+
+  return (
+    <>
+      <div className='flex h-11 shrink-0 items-center gap-2 border-[var(--border)] border-b px-4 text-[var(--text-primary)] text-base'>
+        {chunk ? (
+          <Chip
+            ref={chunkBackButtonRef}
+            leftIcon={ArrowLeft}
+            aria-label='Back to chunks'
+            onClick={() => setChunkIndex(null)}
+          />
+        ) : onBack ? (
+          <Chip
+            ref={backButtonRef}
+            leftIcon={ArrowLeft}
+            aria-label='Back to documents'
+            onClick={onBack}
+          />
+        ) : (
+          <FileText aria-hidden='true' className='size-[14px] shrink-0 text-[var(--text-icon)]' />
+        )}
+        <span className='min-w-0 flex-1 truncate'>
+          {chunk ? `Chunk #${chunkIndex}` : document.title}
+        </span>
+        {chunk && chunkIndex !== null && (
+          <>
+            <Chip
+              leftIcon={ChevronUp}
+              aria-label='Previous chunk'
+              disabled={chunkIndex === 0}
+              onClick={() => setChunkIndex(chunkIndex - 1)}
+            />
+            <Chip
+              leftIcon={ChevronDown}
+              aria-label='Next chunk'
+              disabled={chunkIndex === document.chunks.length - 1}
+              onClick={() => setChunkIndex(chunkIndex + 1)}
+            />
+          </>
+        )}
+      </div>
+      {chunk ? (
+        <>
+          <div className='min-h-0 flex-1 overflow-y-auto overscroll-contain whitespace-pre-wrap px-6 py-6 text-[var(--text-body)] text-sm leading-relaxed'>
+            {chunk.title}
+            {'\n\n'}
+            {chunk.content}
+          </div>
+          <div className='flex shrink-0 items-center justify-between border-[var(--border)] border-t px-4 py-2.5 text-[var(--text-secondary)] text-caption'>
+            <span className='flex items-center gap-2'>
+              Tokenizer{' '}
+              <Switch checked={false} disabled aria-label='Tokenizer disabled in preview' />
+            </span>
+            <span>{tokensPerChunk} tokens</span>
+          </div>
+        </>
+      ) : (
+        <>
+          <ResourceOptions
+            search={{ value: query, onChange: setQuery, placeholder: 'Search chunks...' }}
+          />
+          <div className='min-h-0 flex-1 overflow-auto overscroll-contain'>
+            <table className='w-full min-w-[380px] table-fixed border-collapse text-left text-[13px]'>
+              <colgroup>
+                <col className='w-[220px]' />
+                <col className='w-[50px]' />
+                <col className='w-[60px]' />
+                <col className='w-[80px]' />
+              </colgroup>
+              <thead>
+                <tr className='h-9 border-[var(--border)] border-b text-[var(--text-secondary)]'>
+                  <th scope='col' className='pl-4 font-normal'>
+                    Content
+                  </th>
+                  <th scope='col' className='font-normal'>
+                    Index
+                  </th>
+                  <th scope='col' className='font-normal'>
+                    Tokens
+                  </th>
+                  <th scope='col' className='font-normal'>
+                    Status
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {document.chunks.map((item, index) => {
+                  if (!`${item.title} ${item.content}`.toLowerCase().includes(query.toLowerCase()))
+                    return null
+                  return (
+                    <tr
+                      key={item.title}
+                      className='h-11 text-[var(--text-secondary)] hover:bg-[var(--surface-hover)]'
+                    >
+                      <td className='pl-4'>
+                        <button
+                          ref={(node) => {
+                            if (node) chunkButtons.set(index, node)
+                            else chunkButtons.delete(index)
+                          }}
+                          type='button'
+                          onClick={() => {
+                            openedChunkIndexRef.current = index
+                            setChunkIndex(index)
+                          }}
+                          className='block h-11 w-full truncate pr-4 text-left text-[var(--text-body)] underline-offset-4 focus-visible:underline focus-visible:outline-none'
+                        >
+                          <span className='sr-only'>Open chunk {index}: </span>
+                          {item.content}
+                        </button>
+                      </td>
+                      <td className='font-mono'>{index}</td>
+                      <td className='tabular-nums'>{tokensPerChunk}</td>
+                      <td>
+                        <Badge variant='gray-secondary' size='sm'>
+                          Enabled
+                        </Badge>
+                      </td>
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+          </div>
+        </>
+      )}
+    </>
+  )
+}
diff --git a/apps/sim/app/(landing)/knowledge/components/knowledge-sources-preview/components/knowledge-document-list/index.ts b/apps/sim/app/(landing)/knowledge/components/knowledge-sources-preview/components/knowledge-document-list/index.ts
new file mode 100644
index 00000000000..875252c7a96
--- /dev/null
+++ b/apps/sim/app/(landing)/knowledge/components/knowledge-sources-preview/components/knowledge-document-list/index.ts
@@ -0,0 +1 @@
+export { KnowledgeDocumentList } from './knowledge-document-list'
diff --git a/apps/sim/app/(landing)/knowledge/components/knowledge-sources-preview/components/knowledge-document-list/knowledge-document-list.tsx b/apps/sim/app/(landing)/knowledge/components/knowledge-sources-preview/components/knowledge-document-list/knowledge-document-list.tsx
new file mode 100644
index 00000000000..1143ad918e1
--- /dev/null
+++ b/apps/sim/app/(landing)/knowledge/components/knowledge-sources-preview/components/knowledge-document-list/knowledge-document-list.tsx
@@ -0,0 +1,100 @@
+import type { RefObject } from 'react'
+import { Badge, cn } from '@sim/emcn'
+import { FileText } from '@sim/emcn/icons'
+import type { KnowledgePreviewDocument } from '@/app/(landing)/knowledge/components/knowledge-sources-preview/data'
+
+interface KnowledgeDocumentListProps {
+  documents: readonly KnowledgePreviewDocument[]
+  selectedDocumentId: string
+  selectedDocumentRef: RefObject<HTMLButtonElement | null>
+  onSelectDocument: (documentId: string) => void
+}
+
+/** The document columns and enabled status mirror the Knowledge Base resource table. */
+export function KnowledgeDocumentList({
+  documents,
+  selectedDocumentId,
+  selectedDocumentRef,
+  onSelectDocument,
+}: KnowledgeDocumentListProps) {
+  return (
+    <div className='min-h-0 flex-1 overflow-auto overscroll-contain'>
+      <table className='w-full min-w-[620px] table-fixed border-collapse whitespace-nowrap text-left text-[13px]'>
+        <caption className='sr-only'>Select a knowledge document</caption>
+        <colgroup>
+          <col className='w-[230px]' />
+          <col className='w-[72px]' />
+          <col className='w-[70px]' />
+          <col className='w-[70px]' />
+          <col className='w-[88px]' />
+          <col className='w-[90px]' />
+        </colgroup>
+        <thead>
+          <tr className='h-9 border-[var(--border)] border-b text-[var(--text-secondary)]'>
+            <th scope='col' className='pl-4 font-normal'>
+              Name
+            </th>
+            <th scope='col' className='font-normal'>
+              Size
+            </th>
+            <th scope='col' className='font-normal'>
+              Tokens
+            </th>
+            <th scope='col' className='font-normal'>
+              Chunks
+            </th>
+            <th scope='col' className='font-normal'>
+              Uploaded
+            </th>
+            <th scope='col' className='font-normal'>
+              Status
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {documents.map((document) => {
+            const selected = document.id === selectedDocumentId
+            return (
+              <tr
+                key={document.id}
+                className={cn(
+                  'h-11 text-[var(--text-secondary)] hover:bg-[var(--surface-hover)]',
+                  selected && 'bg-[var(--surface-active)]'
+                )}
+              >
+                <td className='pl-4'>
+                  <button
+                    ref={selected ? selectedDocumentRef : undefined}
+                    type='button'
+                    aria-label={`Open ${document.title}`}
+                    aria-pressed={selected}
+                    onClick={() => onSelectDocument(document.id)}
+                    className='flex h-11 w-full items-center gap-2.5 pr-3 text-left text-[var(--text-body)] underline-offset-4 focus-visible:underline focus-visible:outline-none'
+                  >
+                    <FileText
+                      aria-hidden='true'
+                      className='size-[14px] shrink-0 text-[var(--text-icon)]'
+                    />
+                    <span className='truncate'>{document.title}</span>
+                  </button>
+                </td>
+                <td className='tabular-nums'>{document.size}</td>
+                <td className='tabular-nums'>{document.tokens}</td>
+                <td className='tabular-nums'>{document.chunks.length}</td>
+                <td>{document.updated}</td>
+                <td>
+                  <Badge variant='gray-secondary' size='sm'>
+                    Enabled
+                  </Badge>
+                </td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+      {documents.length === 0 && (
+        <p className='p-4 text-[var(--text-secondary)]'>No matching documents</p>
+      )}
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/knowledge/components/knowledge-sources-preview/data.ts b/apps/sim/app/(landing)/knowledge/components/knowledge-sources-preview/data.ts
new file mode 100644
index 00000000000..78b95f812f7
--- /dev/null
+++ b/apps/sim/app/(landing)/knowledge/components/knowledge-sources-preview/data.ts
@@ -0,0 +1,184 @@
+import { ConfluenceIcon, GoogleDriveIcon, NotionIcon } from '@/components/icons'
+
+export interface KnowledgePreviewChunk {
+  title: string
+  content: string
+}
+
+export interface KnowledgePreviewDocument {
+  id: string
+  title: string
+  updated: string
+  size: string
+  tokens: number
+  chunks: readonly [KnowledgePreviewChunk, ...KnowledgePreviewChunk[]]
+}
+
+/** Small, fictional source collections; every document and passage is available locally. */
+export const KNOWLEDGE_PREVIEW_SOURCES = [
+  {
+    id: 'notion',
+    name: 'Notion',
+    label: 'Notion',
+    icon: NotionIcon,
+    documents: [
+      {
+        id: 'getting-started',
+        title: 'Getting started',
+        updated: 'Today',
+        size: '4.2 KB',
+        tokens: 128,
+        chunks: [
+          {
+            title: 'Your first workspace',
+            content:
+              'Create a workspace to bring your team, workflows, and knowledge together. Give it a name your teammates will recognize.',
+          },
+          {
+            title: 'Invite your team',
+            content:
+              'Open workspace settings and choose Members. Enter a teammate’s email address and select the access they need before sending an invitation.',
+          },
+        ],
+      },
+      {
+        id: 'release-notes',
+        title: 'Release notes',
+        updated: 'Yesterday',
+        size: '2.1 KB',
+        tokens: 64,
+        chunks: [
+          {
+            title: 'September updates',
+            content:
+              'The new product handbook brings setup instructions and team guides into one collection. Each team owns the pages for its area.',
+          },
+        ],
+      },
+      {
+        id: 'brand-guidelines',
+        title: 'Brand guidelines',
+        updated: 'Sep 2',
+        size: '1.8 KB',
+        tokens: 56,
+        chunks: [
+          {
+            title: 'Writing for customers',
+            content:
+              'Use short sentences and concrete examples. Explain what customers can do next, and use the same names they see in the product.',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'drive',
+    name: 'Google Drive',
+    label: 'Drive',
+    icon: GoogleDriveIcon,
+    documents: [
+      {
+        id: 'support-handbook',
+        title: 'Support handbook.pdf',
+        updated: 'Today',
+        size: '4.2 KB',
+        tokens: 128,
+        chunks: [
+          {
+            title: 'Triage a new request',
+            content:
+              'Start by checking the customer’s description and any attached screenshots. Record the affected feature and the steps that reproduce the issue.',
+          },
+          {
+            title: 'Hand off to engineering',
+            content:
+              'Include the reproduction steps, expected behavior, and relevant run details. Keep the customer informed when ownership changes.',
+          },
+        ],
+      },
+      {
+        id: 'onboarding-checklist',
+        title: 'Onboarding checklist',
+        updated: 'Yesterday',
+        size: '2.1 KB',
+        tokens: 64,
+        chunks: [
+          {
+            title: 'A successful first week',
+            content:
+              'Confirm the customer’s goals, invite the project team, and agree on a first use case. Review the results together before expanding the rollout.',
+          },
+        ],
+      },
+      {
+        id: 'customer-questions',
+        title: 'Customer questions',
+        updated: 'Sep 3',
+        size: '2.4 KB',
+        tokens: 72,
+        chunks: [
+          {
+            title: 'Where to find answers',
+            content:
+              'Check the product handbook for setup questions and the release notes for recent changes. Send account-specific questions to the support team.',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'confluence',
+    name: 'Confluence',
+    label: 'Confluence',
+    icon: ConfluenceIcon,
+    documents: [
+      {
+        id: 'incident-response',
+        title: 'Incident response',
+        updated: 'Today',
+        size: '4.2 KB',
+        tokens: 128,
+        chunks: [
+          {
+            title: 'Assess the impact',
+            content:
+              'Identify the affected service and when the issue began. Assign an incident owner and capture the first observations in the incident document.',
+          },
+          {
+            title: 'Share an update',
+            content:
+              'Summarize the customer impact, current investigation, and next update time. After recovery, document the cause and follow-up actions.',
+          },
+        ],
+      },
+      {
+        id: 'deployment-checklist',
+        title: 'Deployment checklist',
+        updated: 'Yesterday',
+        size: '2.1 KB',
+        tokens: 64,
+        chunks: [
+          {
+            title: 'Review before release',
+            content:
+              'Review the change, confirm the required checks, and identify a rollback path. Monitor the affected workflows after the release is complete.',
+          },
+        ],
+      },
+      {
+        id: 'service-ownership',
+        title: 'Service ownership',
+        updated: 'Sep 1',
+        size: '1.6 KB',
+        tokens: 48,
+        chunks: [
+          {
+            title: 'Find the right team',
+            content:
+              'Each service has an owning team and a backup contact. Keep the ownership directory current when responsibilities change.',
+          },
+        ],
+      },
+    ],
+  },
+] as const
diff --git a/apps/sim/app/(landing)/knowledge/components/knowledge-sources-preview/index.ts b/apps/sim/app/(landing)/knowledge/components/knowledge-sources-preview/index.ts
new file mode 100644
index 00000000000..17400c4a62e
--- /dev/null
+++ b/apps/sim/app/(landing)/knowledge/components/knowledge-sources-preview/index.ts
@@ -0,0 +1 @@
+export { KnowledgeSourcesPreview } from './knowledge-sources-preview'
diff --git a/apps/sim/app/(landing)/knowledge/components/knowledge-sources-preview/knowledge-sources-preview.tsx b/apps/sim/app/(landing)/knowledge/components/knowledge-sources-preview/knowledge-sources-preview.tsx
new file mode 100644
index 00000000000..99a11ca0661
--- /dev/null
+++ b/apps/sim/app/(landing)/knowledge/components/knowledge-sources-preview/knowledge-sources-preview.tsx
@@ -0,0 +1,146 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { Badge, Chip, ChipModal, ChipModalBody, ChipModalHeader, cn } from '@sim/emcn'
+import { ChevronRight, Database } from '@sim/emcn/icons'
+import { MenuPreviewHeader } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-header/menu-preview-header'
+import { usePreviewDialogFocus } from '@/app/(landing)/hooks/use-preview-dialog-focus'
+import { KnowledgeDocumentDetail } from '@/app/(landing)/knowledge/components/knowledge-sources-preview/components/knowledge-document-detail'
+import { KnowledgeDocumentList } from '@/app/(landing)/knowledge/components/knowledge-sources-preview/components/knowledge-document-list'
+import {
+  KNOWLEDGE_PREVIEW_SOURCES,
+  type KnowledgePreviewDocument,
+} from '@/app/(landing)/knowledge/components/knowledge-sources-preview/data'
+import { ResourceOptions } from '@/app/workspace/[workspaceId]/components/resource/components/resource-options'
+
+const DOCUMENTS: readonly KnowledgePreviewDocument[] = KNOWLEDGE_PREVIEW_SOURCES.flatMap(
+  (source): readonly KnowledgePreviewDocument[] => source.documents
+)
+
+/** Documents and their chunk table are native Knowledge views, shown together as an open product scene. */
+export function KnowledgeSourcesPreview() {
+  const firstSourceRef = useRef<HTMLButtonElement>(null)
+  const backButtonRef = useRef<HTMLButtonElement>(null)
+  const selectedDocumentRef = useRef<HTMLButtonElement>(null)
+  const returnFocusRef = useRef(false)
+  const [query, setQuery] = useState('')
+  const [selectedDocumentId, setSelectedDocumentId] = useState(DOCUMENTS[0].id)
+  const [detailOpen, setDetailOpen] = useState(false)
+  const [sourcesOpen, setSourcesOpen] = useState(false)
+  const sourcesOpenerRef = usePreviewDialogFocus(sourcesOpen, firstSourceRef)
+  const selectedDocument = DOCUMENTS.find((item) => item.id === selectedDocumentId) ?? DOCUMENTS[0]
+  const documents = DOCUMENTS.filter((item) =>
+    item.title.toLowerCase().includes(query.toLowerCase())
+  )
+
+  useEffect(() => {
+    if (detailOpen && backButtonRef.current?.offsetParent) {
+      backButtonRef.current.focus()
+    } else if (returnFocusRef.current) {
+      selectedDocumentRef.current?.focus()
+      returnFocusRef.current = false
+    }
+  }, [detailOpen])
+
+  return (
+    <div
+      role='group'
+      aria-label='Explore knowledge sources'
+      className='@container absolute inset-0 text-[var(--text-body)] text-small'
+    >
+      <div className='absolute @max-[600px]:inset-x-3 @max-[600px]:top-8 top-[10%] @max-[600px]:bottom-5 bottom-[12%] left-[8%] flex min-h-0 @max-[600px]:w-auto w-[80%] flex-col @max-[600px]:overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--bg)] shadow-xs'>
+        <MenuPreviewHeader
+          icon={Database}
+          title={
+            <>
+              <span>Knowledge Base</span>
+              <ChevronRight className='size-3 text-[var(--text-secondary)]' />
+              <span>Product knowledge</span>
+            </>
+          }
+        />
+        <div
+          className={cn(
+            'min-h-0 flex-1 flex-col',
+            detailOpen ? '@min-[600px]:flex hidden' : 'flex'
+          )}
+        >
+          <ResourceOptions
+            search={{ value: query, onChange: setQuery, placeholder: 'Search documents...' }}
+            aside={
+              <span className='flex items-center gap-1'>
+                {KNOWLEDGE_PREVIEW_SOURCES.map((source, index) => (
+                  <span key={source.id} className={index > 0 ? '@max-[850px]:hidden' : undefined}>
+                    <Chip
+                      ref={index === 0 ? firstSourceRef : undefined}
+                      leftIcon={source.icon}
+                      onClick={(event) => {
+                        sourcesOpenerRef.current = event.currentTarget
+                        setSourcesOpen(true)
+                      }}
+                      aria-haspopup='dialog'
+                      aria-label={`View connected sources including ${source.name}`}
+                    >
+                      {source.label}
+                    </Chip>
+                  </span>
+                ))}
+              </span>
+            }
+          />
+          <KnowledgeDocumentList
+            documents={documents}
+            selectedDocumentId={selectedDocument.id}
+            selectedDocumentRef={selectedDocumentRef}
+            onSelectDocument={(documentId) => {
+              setSelectedDocumentId(documentId)
+              setDetailOpen(true)
+            }}
+          />
+        </div>
+        <div
+          className={cn(
+            '@min-[600px]:absolute @min-[600px]:top-[39%] @min-[600px]:right-[-10%] @min-[600px]:bottom-[-8%] min-h-0 @min-[600px]:w-[54%] min-w-0 flex-1 flex-col @min-[600px]:overflow-hidden @min-[600px]:rounded-lg @min-[600px]:border @min-[600px]:border-[var(--border)] @min-[600px]:bg-[var(--bg)] @min-[600px]:shadow-xs',
+            detailOpen ? 'flex' : '@min-[600px]:flex hidden'
+          )}
+        >
+          <KnowledgeDocumentDetail
+            key={selectedDocument.id}
+            document={selectedDocument}
+            backButtonRef={backButtonRef}
+            onBack={() => {
+              returnFocusRef.current = true
+              setDetailOpen(false)
+            }}
+          />
+        </div>
+      </div>
+      <ChipModal open={sourcesOpen} onOpenChange={setSourcesOpen} srTitle='Connected Sources'>
+        <ChipModalHeader onClose={() => setSourcesOpen(false)}>Connected Sources</ChipModalHeader>
+        <ChipModalBody>
+          {KNOWLEDGE_PREVIEW_SOURCES.map((source) => {
+            const Icon = source.icon
+            return (
+              <div key={source.id} className='flex items-center gap-2.5 rounded-lg px-2 py-2'>
+                <div className='flex size-9 shrink-0 items-center justify-center rounded-xl border border-[var(--border)]'>
+                  <Icon className='size-5' />
+                </div>
+                <div className='flex min-w-0 flex-1 flex-col gap-0.5'>
+                  <div className='flex items-center gap-2 text-[var(--text-primary)] text-small'>
+                    {source.name}
+                    <Badge variant='gray-secondary' size='sm' dot>
+                      Active
+                    </Badge>
+                  </div>
+                  <p className='text-[var(--text-secondary)] text-xs'>
+                    Last sync: Sep 4, 9:41 AM · {source.documents.length} docs
+                  </p>
+                </div>
+              </div>
+            )
+          })}
+        </ChipModalBody>
+      </ChipModal>
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/knowledge/knowledge.tsx b/apps/sim/app/(landing)/knowledge/knowledge.tsx
index 4ccdb912189..f7dae78607c 100644
--- a/apps/sim/app/(landing)/knowledge/knowledge.tsx
+++ b/apps/sim/app/(landing)/knowledge/knowledge.tsx
@@ -1,176 +1,73 @@
 import {
-  PlatformHeroVisual,
   SolutionsPage,
-  type SolutionsPageConfig,
-} from '@/app/(landing)/components'
+  type SolutionsProductPageConfig,
+} from '@/app/(landing)/components/solutions-page'
+import { ProductHeroPreview } from '@/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-hero-preview'
 import {
-  AuditTrailGraphic,
-  OperationsTeamsGraphic,
-  RunMonitoringGraphic,
-} from '@/app/(landing)/enterprise/components/feature-graphics'
-import { ConnectorSyncGraphic } from '@/app/(landing)/knowledge/components/feature-graphics/connector-sync-graphic'
-import { KnowledgeQueryGraphic } from '@/app/(landing)/knowledge/components/feature-graphics/knowledge-query-graphic'
-import { KnowledgeHeroLoop } from '@/app/(landing)/knowledge/components/knowledge-hero-loop'
-import { KnowledgeAnswerGraphic } from '@/app/(landing)/solutions/components/feature-graphics'
+  KnowledgeDocumentsPreview,
+  KnowledgeRetrievalPreview,
+  KnowledgeSourcesPreview,
+} from '@/app/(landing)/knowledge/components/knowledge-product-previews'
 
-/**
- * Knowledge Base platform page - a consumer of {@link SolutionsPage}
- * rendered with the enterprise page's feature-tile treatment.
- *
- * The whole page is one typed {@link SolutionsPageConfig} rendered inside
- * the shared route-group layout chrome: identity (for structured data), a
- * hero, and two rows of three cards. The story is agent memory - sync your
- * sources in through connectors, get answers grounded in your own docs
- * with citations, reach the same knowledge from any workflow, and let Sim
- * keep it all fresh on its own. Two knowledge-specific vignettes (the
- * connector ledger and the dark knowledge-search code window) sit beside
- * enterprise graphics retold for knowledge work: the grounded chat answer,
- * the sync-event audit ledger, and the document-processing log panel.
- *
- * The JSON-LD emitted by {@link SolutionsPage} is structurally identical
- * to the platform page's (`WebPage` + `BreadcrumbList` +
- * `WebApplication`), so the feature-tile treatment is SEO-neutral.
- */
-/** Shared meta + JSON-LD description for the Knowledge Base page (one string, zero drift). */
 export const KNOWLEDGE_PAGE_DESCRIPTION =
-  'Give AI agents a knowledge base in Sim. Upload docs, sync Notion, Google Drive, and Confluence, and get answers grounded in your data, with citations.'
+  'Give AI agents trusted company knowledge in Sim. Connect sources, manage indexed documents, and retrieve relevant passages with source references in your workflows.'
 
-const KNOWLEDGE_CONFIG: SolutionsPageConfig = {
+const KNOWLEDGE_CONFIG: SolutionsProductPageConfig = {
   module: 'Knowledge Base',
   path: '/knowledge',
   seoDescription: KNOWLEDGE_PAGE_DESCRIPTION,
   hero: {
+    visual: <ProductHeroPreview product='knowledge' />,
     eyebrow: 'Knowledge Base',
-    heading: "Give AI agents memory of your data with Sim's knowledge base.",
+    heading: 'Trusted knowledge for your AI agents.',
     description:
-      "Knowledge Base is your agents' memory in Sim, the open-source AI workspace. Upload docs, sync sources like Notion and Google Drive, and get answers grounded in your data, with citations.",
+      'Connect your sources. Give AI agents trusted company knowledge to work with in Sim.',
     summary:
-      'Knowledge Base is the agent-memory module in Sim, the open-source AI workspace where teams build, deploy, and manage AI agents. Teams upload docs or sync sources like Notion, Google Drive, and Confluence, and every agent answers from that data with citations, kept fresh automatically.',
-    visual: (
-      <PlatformHeroVisual>
-        <KnowledgeHeroLoop />
-      </PlatformHeroVisual>
-    ),
+      'Sim is the open-source AI workspace where teams build, deploy, and manage AI agents. Knowledge Base brings uploaded documents and connected sources into searchable collections. Teams can inspect indexed passages, manage source syncs, and retrieve relevant information with source metadata from their workflows.',
   },
-  rows: [
+  codeExample: {
+    title: 'Search knowledge from your terminal.',
+    description:
+      'Ask the Sim CLI for relevant passages from a knowledge base and bring that context into your own tools.',
+    filename: 'knowledge.sh',
+    commands: [
+      'sim knowledge list',
+      'sim knowledge search \\',
+      '  --kb "$KNOWLEDGE_BASE_ID" \\',
+      '  --query "refund policy"',
+    ],
+  },
+  features: [
+    {
+      id: 'connect-sources',
+      label: 'Connect sources',
+      title: 'Connected sources. Shared context.',
+      description:
+        'Bring documents from Notion, Drive, and your other sources into one searchable knowledge base.',
+      visual: <KnowledgeSourcesPreview />,
+      cta: {
+        label: 'Explore knowledge connectors',
+        href: 'https://docs.sim.ai/knowledgebase/connectors',
+      },
+    },
     {
-      id: 'memory',
-      title: 'Give AI agents memory of your data.',
-      subtitle:
-        'Sim turns your docs and sources into searchable memory every agent can read, so answers come from your data instead of guesswork.',
-      cta: { label: 'Explore Knowledge Base', href: '/signup' },
-      cards: [
-        {
-          title: 'Sync your sources',
-          description:
-            'Connect Notion, Google Drive, Confluence, and more. Sim pulls the documents in and keeps every source syncing on its own.',
-          visual: <ConnectorSyncGraphic />,
-        },
-        {
-          title: 'Answers grounded in your docs',
-          description:
-            'Agents in Sim answer from your knowledge base and cite the document behind every answer, so teams can check the source.',
-          visual: (
-            <KnowledgeAnswerGraphic
-              question='What is our refund policy for annual plans?'
-              answer='Annual plans are refunded pro-rata within 30 days of renewal. After that, the remaining term converts to account credit.'
-              sourceLabel='Billing policy'
-              sourceDetail='Cited from your knowledge base'
-            />
-          ),
-        },
-        {
-          title: 'Search knowledge from any workflow',
-          description:
-            'Drop a knowledge search step into any workflow. Sim retrieves the passages the agent needs mid-run, in visual builds or in code.',
-          featureTileTone: 'dark',
-          featureTileDescriptionTone: 'soft',
-          visual: <KnowledgeQueryGraphic />,
-        },
-      ],
+      id: 'manage-documents',
+      label: 'Manage documents',
+      title: 'See what’s indexed.',
+      description: 'Review indexed passages and see which chunks are enabled for search.',
+      visual: <KnowledgeDocumentsPreview />,
     },
     {
-      id: 'fresh',
-      title: 'Knowledge that stays fresh on its own.',
-      subtitle:
-        'Sim re-syncs your sources, processes every new document, and logs each update, so agent memory never drifts out of date.',
-      cta: { label: 'See how syncing works', href: '/signup' },
-      cards: [
-        {
-          title: 'Fresh without the upkeep',
-          description:
-            'Sim re-syncs each connected source on a schedule and records every update, so nobody has to re-upload a doc again.',
-          visual: (
-            <AuditTrailGraphic
-              entries={[
-                {
-                  action: 'Source synced',
-                  actor: 'Notion',
-                  resource: '128 docs updated',
-                  time: 'Now',
-                  avatar: '/landing/team-avatar-1.jpg',
-                },
-                {
-                  action: 'Document processed',
-                  actor: 'Sim',
-                  resource: 'Pricing guide v4',
-                  time: '4 min ago',
-                  avatar: '/landing/team-avatar-2.jpg',
-                },
-                {
-                  action: 'Sync completed',
-                  actor: 'Google Drive',
-                  resource: '342 docs checked',
-                  time: '1h ago',
-                  avatar: '/landing/team-avatar-3.jpg',
-                },
-                {
-                  action: 'Base created',
-                  actor: 'Maya Chen',
-                  resource: 'Product Documentation',
-                  time: 'Jun 2',
-                  avatar: '/landing/team-avatar-1.jpg',
-                },
-              ]}
-            />
-          ),
-        },
-        {
-          title: 'Watch documents process',
-          description:
-            'Sim splits each document into searchable passages and shows the work: source, passage count, tokens, and status for every file.',
-          visual: (
-            <RunMonitoringGraphic
-              title='Document details'
-              statusLabel='Processing'
-              fields={[
-                { label: 'Document', value: 'Pricing guide v4.pdf', variant: 'strong' },
-                { label: 'Source', value: 'Notion', variant: 'chip' },
-                { label: 'Passages', value: '164', variant: 'mono' },
-                { label: 'Tokens', value: '48,392', variant: 'mono' },
-              ]}
-              outputLabel='Processing output'
-              outputPairs={[
-                { key: 'status', value: '"indexed"' },
-                { key: 'passages', value: '164' },
-              ]}
-            />
-          ),
-        },
-        {
-          title: 'One memory for every agent',
-          description:
-            'Every agent in Sim reads from the same knowledge base, in Chat, in workflows, and in deployed agents, so answers stay consistent.',
-          featureTileTone: 'dark',
-          featureTileDescriptionTone: 'soft',
-          visual: (
-            <OperationsTeamsGraphic
-              sourceLabels={['Notion', 'Drive', 'Confluence']}
-              destinationLabels={['Chat', 'Workflows', 'Agents']}
-            />
-          ),
-        },
-      ],
+      id: 'retrieve-context',
+      label: 'Retrieve context',
+      title: 'Give agents the right context.',
+      description:
+        'Search from a workflow and pass relevant passages, with source references, to the next step.',
+      visual: <KnowledgeRetrievalPreview />,
+      cta: {
+        label: 'Read the Knowledge block guide',
+        href: 'https://docs.sim.ai/integrations/knowledge',
+      },
     },
   ],
 }
diff --git a/apps/sim/app/(landing)/landing.test.tsx b/apps/sim/app/(landing)/landing.test.tsx
index bfb21e0c574..51d4ff5c36d 100644
--- a/apps/sim/app/(landing)/landing.test.tsx
+++ b/apps/sim/app/(landing)/landing.test.tsx
@@ -9,16 +9,20 @@ vi.mock('@sim/emcn', () => ({
 }))
 
 vi.mock('@/app/(landing)/components', () => ({
-  Cta: () => null,
-  Features: () => null,
+  AgentMomentum: () => <span>agent-momentum-marker</span>,
+  Features: () => <span>features-marker</span>,
+  FeaturedCustomer: () => <span>featured-customer-marker</span>,
   Hero: () => null,
   HomeStructuredData: () => null,
-  Mothership: () => null,
-  ProductDemo: () => null,
+  PlatformSuite: () => <span>platform-suite-marker</span>,
+  ProductDemo: () => <span>product-demo-marker</span>,
+  Proof: () => null,
+  Security: () => <span>security-marker</span>,
+  WorkspaceControls: () => <span>workspace-controls-marker</span>,
 }))
 
 vi.mock('@/app/(landing)/components/landing-layout', () => ({
-  LANDING_SECTION_RHYTHM: 'gap-test',
+  HOME_SECTION_RHYTHM: 'gap-test',
 }))
 
 vi.mock('@/app/(landing)/landing-analytics', () => ({
@@ -33,4 +37,35 @@ describe('Landing', () => {
 
     expect(markup.match(/landing-analytics-marker/g)).toHaveLength(1)
   })
+
+  it('places the agent momentum section directly after featured customers', () => {
+    const markup = renderToStaticMarkup(<Landing />)
+    const featuredCustomerIndex = markup.indexOf('featured-customer-marker')
+    const agentMomentumIndex = markup.indexOf('agent-momentum-marker')
+    const platformSuiteIndex = markup.indexOf('platform-suite-marker')
+
+    expect(featuredCustomerIndex).toBeGreaterThan(-1)
+    expect(agentMomentumIndex).toBeGreaterThan(featuredCustomerIndex)
+    expect(platformSuiteIndex).toBeGreaterThan(agentMomentumIndex)
+  })
+
+  it('places the workspace controls between the feature rail and the governance beat', () => {
+    const markup = renderToStaticMarkup(<Landing />)
+    const featuresIndex = markup.indexOf('features-marker')
+    const workspaceControlsIndex = markup.indexOf('workspace-controls-marker')
+    const securityIndex = markup.indexOf('security-marker')
+
+    expect(featuresIndex).toBeGreaterThan(-1)
+    expect(workspaceControlsIndex).toBeGreaterThan(featuresIndex)
+    expect(securityIndex).toBeGreaterThan(workspaceControlsIndex)
+  })
+
+  it('groups only the platform cards and the demo frame, so the frame still follows the cards', () => {
+    const markup = renderToStaticMarkup(<Landing />)
+    const group = markup.match(/<div class="flex flex-col gap-4">(.*?)<\/div>/)?.[1]
+
+    expect(group).toContain('platform-suite-marker')
+    expect(group).toContain('product-demo-marker')
+    expect(group).not.toContain('workspace-controls-marker')
+  })
 })
diff --git a/apps/sim/app/(landing)/landing.tsx b/apps/sim/app/(landing)/landing.tsx
index 84260a613ff..832f23a0851 100644
--- a/apps/sim/app/(landing)/landing.tsx
+++ b/apps/sim/app/(landing)/landing.tsx
@@ -1,39 +1,72 @@
 import { cn } from '@sim/emcn'
 import {
-  Cta,
+  AgentMomentum,
+  FeaturedCustomer,
   Features,
   Hero,
   HomeStructuredData,
-  Mothership,
+  PlatformSuite,
   ProductDemo,
+  Proof,
+  Security,
+  WorkspaceControls,
 } from '@/app/(landing)/components'
-import { LANDING_SECTION_RHYTHM } from '@/app/(landing)/components/landing-layout'
+import { HOME_SECTION_RHYTHM } from '@/app/(landing)/components/landing-layout'
 import { LandingAnalytics } from '@/app/(landing)/landing-analytics'
 
 /**
  * Landing page root - owns the section order and the `<main>` content region.
  *
  * The shared chrome (`light` + brand token layer, scroll port, skip link, navbar
- * with build/revalidate-time GitHub stars, footer, and site-wide JSON-LD) is
+ * with build/revalidate-time GitHub stars, painted CTA, footer, and site-wide JSON-LD) is
  * owned by the route-group layout via `LandingShell`, so the landing family can
  * never drift and the navbar persists across navigation. This page emits only
  * its `<main>` and the home-specific structured data.
  *
+ * Section order copies Harvey's homepage:
+ *
+ * 1. {@link Hero} - split masthead and full-width product stage.
+ * 2. {@link Proof} - customer-logo row.
+ * 3. {@link FeaturedCustomer} - featured customer film carousel.
+ * 4. {@link AgentMomentum} - editorial proof points for the open-source agent ecosystem.
+ * 5. {@link PlatformSuite} - creation and centralized-governance windows.
+ * 6. {@link ProductDemo} - the demo player, grouped with the platform cards.
+ * 7. {@link Features} - the horizontal product rail.
+ * 8. {@link WorkspaceControls} - the rail's six governance controls, untitled.
+ * 9. {@link Security} - governance intro, Trust Center link, certification blocs.
+ *
  * `<main>` is a `flex flex-col` whose `gap` is the single source of truth for
- * inter-section rhythm - sections carry no vertical margin/padding of their own,
- * so one knob keeps every section break uniform across the page. Each section
- * component owns its own landmark (`<section id aria-labelledby>`).
+ * major-section rhythm. Customer proof, platform media, and product controls
+ * each form a group with their own smaller positive gap.
  */
 export default function Landing() {
   return (
-    <main id='main-content' className={cn('flex flex-col', LANDING_SECTION_RHYTHM)}>
+    <main id='main-content' className={cn('flex flex-col', HOME_SECTION_RHYTHM)}>
       <LandingAnalytics />
       <HomeStructuredData />
-      <Hero />
-      <ProductDemo />
-      <Mothership />
-      <Features />
-      <Cta />
+      <div className='flex flex-col gap-24 max-sm:gap-12 max-lg:gap-16'>
+        <Hero />
+        <div className='flex flex-col gap-16 max-sm:gap-10 max-lg:gap-12'>
+          <Proof />
+          <div className='flex flex-col gap-7 max-lg:gap-4'>
+            <FeaturedCustomer />
+            <AgentMomentum />
+          </div>
+        </div>
+      </div>
+      {/* The demo frame belongs to the platform section: it follows the two
+        cards at the cards' own gap and shares their inset, so the three read
+        as one grid. The `<main>` rhythm applies around the group, and nothing
+        else may join it - the frame's inset assumes the cards directly above. */}
+      <div className='flex flex-col gap-4'>
+        <PlatformSuite />
+        <ProductDemo />
+      </div>
+      <div className='flex flex-col gap-20 max-sm:gap-12 max-lg:gap-16'>
+        <Features />
+        <WorkspaceControls />
+      </div>
+      <Security />
     </main>
   )
 }
diff --git a/apps/sim/app/(landing)/layout.tsx b/apps/sim/app/(landing)/layout.tsx
index 608b350f322..e1aed12faf7 100644
--- a/apps/sim/app/(landing)/layout.tsx
+++ b/apps/sim/app/(landing)/layout.tsx
@@ -6,20 +6,10 @@ import { LandingShell } from '@/app/(landing)/components'
 import { LandingConsentTracking } from '@/app/(landing)/landing-consent-tracking'
 
 /**
- * Route-group layout for the entire landing family - the home page, platform and
- * solutions pages, pricing, legal, and the marketing subroutes (blog, models,
- * integrations, partners).
- *
- * It renders the shared chrome **once** via {@link LandingShell} (the `light`
- * token layer + scroll port, the skip link, the {@link Navbar} with
- * build/revalidate-time GitHub stars, the site-wide JSON-LD, and the
- * {@link Footer}). Because layouts persist across client navigations, the navbar
- * and footer mount once and are never torn down when moving between landing
- * pages - no remount, no refetch, no flash.
- *
- * Each page supplies only its `<main id='main-content'>` content (and any
- * page-specific metadata / JSON-LD). `metadataBase` here lets pages express
- * relative canonical/OG URLs; every other metadata field stays per-page.
+ * Shared layout for all public marketing routes, including platform, solutions,
+ * pricing, editorial, catalog, demo, and legal pages. LandingShell owns the
+ * persistent navbar, painted CTA, footer, and site-wide structured data.
+ * Pages supply their main content and page-specific metadata only.
  */
 export const metadata: Metadata = {
   metadataBase: new URL(SITE_URL),
diff --git a/apps/sim/app/(landing)/library/[slug]/page.tsx b/apps/sim/app/(landing)/library/[slug]/page.tsx
index e6901ee428c..3b7e256976b 100644
--- a/apps/sim/app/(landing)/library/[slug]/page.tsx
+++ b/apps/sim/app/(landing)/library/[slug]/page.tsx
@@ -5,7 +5,8 @@ import { getAllPostMeta, getPostBySlug, getRelatedPosts } from '@/lib/library/re
 import { buildPostGraphJsonLd, buildPostMetadata, LIBRARY_SECTION } from '@/lib/library/seo'
 import { ContentPostPage } from '@/app/(landing)/components'
 
-export const dynamicParams = false
+/** Unknown slugs reach the section 404 while known pages remain pre-rendered. */
+export const dynamicParams = true
 
 export async function generateStaticParams() {
   const posts = await getAllPostMeta()
@@ -19,7 +20,7 @@ export async function generateMetadata({
 }): Promise<Metadata> {
   const { slug } = await params
   const post = await getPostBySlug(slug)
-  if (!post) return {}
+  if (!post || post.draft) return {}
   return buildPostMetadata(post)
 }
 
@@ -28,7 +29,7 @@ export const revalidate = 86400
 export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
   const { slug } = await params
   const post = await getPostBySlug(slug)
-  if (!post) notFound()
+  if (!post || post.draft) notFound()
   const related = await getRelatedPosts(slug, 3)
 
   return (
diff --git a/apps/sim/app/(landing)/logs/components/feature-graphics/failure-alert-graphic.module.css b/apps/sim/app/(landing)/logs/components/feature-graphics/failure-alert-graphic.module.css
deleted file mode 100644
index 59a7ad743bf..00000000000
--- a/apps/sim/app/(landing)/logs/components/feature-graphics/failure-alert-graphic.module.css
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * The FailureAlertGraphic's motion — a one-shot causal settle: the failed
- * run row stamps in, a white pulse falls once down the connector hairline,
- * and the Slack alert window stamps in as the pulse lands. Never re-played.
- * Under prefers-reduced-motion everything renders settled with no pulse.
- */
-
-.runRow {
-  animation: failure-alert-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
-  animation-delay: 0.35s;
-}
-
-.sweep {
-  position: absolute;
-  inset-inline: 0;
-  top: -40%;
-  height: 40%;
-  background: linear-gradient(to bottom, transparent, var(--text-inverse));
-  animation: failure-alert-sweep 0.45s ease-in 0.85s forwards;
-  opacity: 0;
-}
-
-.alertWindow {
-  animation: failure-alert-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
-  animation-delay: 1.2s;
-}
-
-@keyframes failure-alert-in {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes failure-alert-sweep {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(350%);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .runRow,
-  .alertWindow {
-    animation: none;
-  }
-
-  .sweep {
-    animation: none;
-    opacity: 0;
-  }
-}
diff --git a/apps/sim/app/(landing)/logs/components/feature-graphics/failure-alert-graphic.tsx b/apps/sim/app/(landing)/logs/components/feature-graphics/failure-alert-graphic.tsx
deleted file mode 100644
index 3b27fafb784..00000000000
--- a/apps/sim/app/(landing)/logs/components/feature-graphics/failure-alert-graphic.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { cn } from '@sim/emcn'
-import { SlackIcon } from '@/components/icons'
-import colorMixFallbacks from '@/app/(landing)/components/shared/color-mix-fallbacks/color-mix-fallbacks.module.css'
-import { FeatureGraphicShell } from '@/app/(landing)/enterprise/components/feature-graphics'
-import styles from '@/app/(landing)/logs/components/feature-graphics/failure-alert-graphic.module.css'
-
-/** Shared hairline ink for the run row, connector, and notification window. */
-const OUTLINE_INK = colorMixFallbacks.inverseBorder45
-
-/**
- * A failure caught by alerting, told top to bottom as the deploy tile's
- * causal vignette in the dark tiles' outlined ink: the failed run at the
- * top - an outlined pill pairing the workflow name with an outlined
- * "Error" tag and the failure time - a faint vertical hairline linking
- * cause to effect, and a minimal outlined Slack window rising from the
- * bottom edge with the alert Sim sent: the #oncall channel in the header
- * (the Slack mark is a real brand logo, the one place hex is allowed),
- * and the failure message with the failing block named, linking back to
- * the run's trace.
- *
- * Motion (from `failure-alert-graphic.module.css`): the run row stamps
- * in first, a white pulse falls down the connector, and the alert window
- * stamps in as the pulse lands - a one-shot settle, never re-played.
- * Under `prefers-reduced-motion` everything renders settled with no
- * pulse.
- */
-export function FailureAlertGraphic() {
-  return (
-    <FeatureGraphicShell>
-      <div
-        aria-hidden='true'
-        className='absolute inset-0 flex flex-col items-center pr-8 max-lg:pr-6'
-      >
-        <div
-          className={cn(
-            'mt-1 flex items-center gap-2 rounded-[10px] border py-1.5 pr-1.5 pl-2.5',
-            OUTLINE_INK,
-            styles.runRow
-          )}
-        >
-          <span className='text-[var(--text-inverse)] text-caption'>Nightly data sync</span>
-          <span
-            className={cn(
-              'flex h-5 items-center rounded-md border px-1.5 text-[var(--text-muted-inverse)] text-caption',
-              OUTLINE_INK
-            )}
-          >
-            Error
-          </span>
-          <span className='text-[var(--text-muted-inverse)] text-caption'>2:14 AM</span>
-        </div>
-
-        <span
-          className={cn(
-            'relative mt-2 mb-2 min-h-4 w-px flex-1 overflow-hidden',
-            colorMixFallbacks.inverseBackground45
-          )}
-        >
-          <span className={styles.sweep} />
-        </span>
-
-        <div
-          className={cn(
-            'relative w-full rounded-t-xl border border-b-0',
-            OUTLINE_INK,
-            styles.alertWindow
-          )}
-        >
-          <div className={cn('flex h-11 items-center gap-2 border-b px-3', OUTLINE_INK)}>
-            <span
-              className={cn(
-                'flex size-6 items-center justify-center rounded-md border',
-                OUTLINE_INK
-              )}
-            >
-              <SlackIcon className='size-[12px]' />
-            </span>
-            <span className='min-w-0 flex-1 truncate text-[var(--text-inverse)] text-small'>
-              #oncall
-            </span>
-            <span className='shrink-0 text-[var(--text-muted-inverse)] text-caption'>Now</span>
-          </div>
-          <div className='px-3 pt-2.5 pb-4'>
-            <span className='block text-[var(--text-inverse)] text-small'>
-              Run failed: Nightly data sync
-            </span>
-            <span className='mt-1 block text-[var(--text-muted-inverse)] text-caption'>
-              Timeout in Post to ledger · Open the trace in Sim
-            </span>
-          </div>
-        </div>
-      </div>
-    </FeatureGraphicShell>
-  )
-}
diff --git a/apps/sim/app/(landing)/logs/components/feature-graphics/filter-runs-graphic.module.css b/apps/sim/app/(landing)/logs/components/feature-graphics/filter-runs-graphic.module.css
deleted file mode 100644
index 45c934e970c..00000000000
--- a/apps/sim/app/(landing)/logs/components/feature-graphics/filter-runs-graphic.module.css
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * The FilterRunsGraphic's motion: the matched result rows stamp in top to
- * bottom one after another — the audit tile's one-shot settle, never
- * re-played. Under prefers-reduced-motion the rows render fully settled.
- */
-
-.row0,
-.row1,
-.row2 {
-  animation: filter-runs-row-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
-}
-
-.row0 {
-  animation-delay: 0.45s;
-}
-
-.row1 {
-  animation-delay: 0.6s;
-}
-
-.row2 {
-  animation-delay: 0.75s;
-}
-
-@keyframes filter-runs-row-in {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .row0,
-  .row1,
-  .row2 {
-    animation: none;
-  }
-}
diff --git a/apps/sim/app/(landing)/logs/components/feature-graphics/filter-runs-graphic.tsx b/apps/sim/app/(landing)/logs/components/feature-graphics/filter-runs-graphic.tsx
deleted file mode 100644
index 2b41c80f34f..00000000000
--- a/apps/sim/app/(landing)/logs/components/feature-graphics/filter-runs-graphic.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { Badge, ChipTag, cn, Search } from '@sim/emcn'
-import { FeatureGraphicShell } from '@/app/(landing)/enterprise/components/feature-graphics'
-import styles from '@/app/(landing)/logs/components/feature-graphics/filter-runs-graphic.module.css'
-
-interface FilteredRun {
-  /** Workflow name of the matched run. */
-  workflow: string
-  /** Run timestamp, newest first. */
-  time: string
-}
-
-/** The three failed runs the query and filters surface, newest first. */
-const MATCHED_RUNS: readonly FilteredRun[] = [
-  { workflow: 'Nightly data sync', time: 'Jul 12  2:14 AM' },
-  { workflow: 'Nightly data sync', time: 'Jul 9  2:14 AM' },
-  { workflow: 'Nightly data sync', time: 'Jul 6  2:15 AM' },
-] as const
-
-/** Active filter chips above the results, the options bar's vocabulary. */
-const FILTER_CHIPS = ['Status: Error', 'Trigger: Schedule', 'Past 7 days'] as const
-
-/** Per-row stamp-in classes - the stagger order is baked into each class's delay. */
-const ROW_STEP_CLASSES = [styles.row0, styles.row1, styles.row2] as const
-
-/**
- * Search and filters told as a frameless centered vignette (the audit and
- * monitoring tiles' composition): a small "Search runs" header with a
- * match-count mono ChipTag (fill stepped up to `--surface-6` so the pill
- * stays legible on the grey ground), the query itself lifted onto the
- * tile's highlight - a white card in the audit tile's exact chrome
- * (`--white` fill, 1px `--border-1` hairline, rounded, `shadow-xs`) with
- * a blinking caret holding the query - a row of quiet mono filter chips,
- * and the three matched runs as airy rows ruled by 1px `--border-1`
- * hairlines, each pairing the workflow name with its Error badge and
- * timestamp.
- *
- * Motion: the result rows stamp in top to bottom once (from
- * `filter-runs-graphic.module.css`, the audit tile's one-shot settle);
- * the caret blink is Tailwind's `animate-pulse`, disabled through its own
- * `motion-reduce:animate-none`. Under `prefers-reduced-motion` the rows
- * render fully settled.
- *
- * The feature tile's visual slot bleeds `2rem` right (`1.5rem` under
- * `max-lg`) but not left, so this centered vignette adds matching right
- * padding to land on the tile's visible center instead of the bled
- * slot's center. On the wide spanned tile of the two-column band
- * (container ≥500px inside `sm`..`lg`) the column relaxes to 400px.
- */
-export function FilterRunsGraphic() {
-  return (
-    <FeatureGraphicShell>
-      <div
-        aria-hidden='true'
-        className='absolute inset-0 flex items-center justify-center pr-8 max-lg:pr-6'
-      >
-        <div className='w-full max-w-[312px] sm:max-lg:[@container(min-width:500px)]:max-w-[400px]'>
-          <div className='mb-2.5 flex items-center justify-between'>
-            <span className='text-[var(--text-primary)] text-base'>Search runs</span>
-            <ChipTag variant='mono' className='bg-[var(--surface-6)]'>
-              3 matches
-            </ChipTag>
-          </div>
-
-          <div className='flex items-center gap-2.5 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2 shadow-xs'>
-            <Search className='size-[14px] shrink-0 text-[var(--text-icon)]' />
-            <span className='min-w-0 truncate text-[var(--text-body)] text-caption'>
-              nightly sync
-              <span className='ml-px inline-block h-[1.1em] w-px translate-y-[2px] animate-pulse bg-[var(--text-primary)] align-text-bottom motion-reduce:animate-none' />
-            </span>
-          </div>
-
-          <div className='mt-2.5 flex flex-wrap items-center gap-1.5'>
-            {FILTER_CHIPS.map((chip) => (
-              <ChipTag key={chip} variant='mono' className='bg-[var(--surface-6)]'>
-                {chip}
-              </ChipTag>
-            ))}
-          </div>
-
-          <div className='mt-1.5'>
-            {MATCHED_RUNS.map((run, index) => (
-              <div
-                key={run.time}
-                className={cn(
-                  'flex h-10 items-center justify-between gap-3',
-                  index > 0 && 'border-[var(--border-1)] border-t',
-                  ROW_STEP_CLASSES[index]
-                )}
-              >
-                <span className='min-w-0 truncate text-[var(--text-primary)] text-caption'>
-                  {run.workflow}
-                </span>
-                <span className='flex shrink-0 items-center gap-2.5'>
-                  <Badge variant='gray' size='sm' dot>
-                    Error
-                  </Badge>
-                  <span className='text-[var(--text-muted)] text-caption'>{run.time}</span>
-                </span>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </FeatureGraphicShell>
-  )
-}
diff --git a/apps/sim/app/(landing)/logs/components/feature-graphics/index.ts b/apps/sim/app/(landing)/logs/components/feature-graphics/index.ts
index 3fd3d41729c..e2a1194f785 100644
--- a/apps/sim/app/(landing)/logs/components/feature-graphics/index.ts
+++ b/apps/sim/app/(landing)/logs/components/feature-graphics/index.ts
@@ -1,3 +1 @@
-export { FailureAlertGraphic } from './failure-alert-graphic'
-export { FilterRunsGraphic } from './filter-runs-graphic'
 export { RunTraceGraphic } from './run-trace-graphic'
diff --git a/apps/sim/app/(landing)/logs/components/feature-graphics/run-trace-graphic.module.css b/apps/sim/app/(landing)/logs/components/feature-graphics/run-trace-graphic.module.css
index 3d0658432a3..ed44511d649 100644
--- a/apps/sim/app/(landing)/logs/components/feature-graphics/run-trace-graphic.module.css
+++ b/apps/sim/app/(landing)/logs/components/feature-graphics/run-trace-graphic.module.css
@@ -1,6 +1,6 @@
 /**
  * The RunTraceGraphic's motion: the trace rows stamp in top to bottom
- * one after another — the agent-code tile's one-shot settle, never
+ * one after another — a one-shot settle, never
  * re-played. Under prefers-reduced-motion the rows render fully settled.
  */
 
diff --git a/apps/sim/app/(landing)/logs/components/feature-graphics/run-trace-graphic.tsx b/apps/sim/app/(landing)/logs/components/feature-graphics/run-trace-graphic.tsx
index e7ef41a79fb..79a67ad8ab1 100644
--- a/apps/sim/app/(landing)/logs/components/feature-graphics/run-trace-graphic.tsx
+++ b/apps/sim/app/(landing)/logs/components/feature-graphics/run-trace-graphic.tsx
@@ -1,5 +1,5 @@
 import { cn, Library } from '@sim/emcn'
-import colorMixFallbacks from '@/app/(landing)/components/shared/color-mix-fallbacks/color-mix-fallbacks.module.css'
+import { LANDING_STAGE_WINDOW_RADIUS } from '@/app/(landing)/components/landing-layout'
 import { FeatureGraphicShell } from '@/app/(landing)/enterprise/components/feature-graphics'
 import styles from '@/app/(landing)/logs/components/feature-graphics/run-trace-graphic.module.css'
 
@@ -59,64 +59,60 @@ const TRACE_SPANS: readonly TraceSpanRow[] = [
 /** Per-row stamp-in classes - the stagger order is baked into each class's delay. */
 const ROW_STEP_CLASSES = [styles.row0, styles.row1, styles.row2, styles.row3, styles.row4] as const
 
-/** Span-name inks on the dark tile - parents brighter than nested children. */
-const NAME_TONE_CLASS = {
-  parent: 'text-[var(--text-inverse)]',
-  child: 'text-[var(--text-muted-inverse)]',
-} as const
-
-/** Waterfall bar inks - the same two-step ramp as the names. */
-const BAR_TONE_CLASS = {
-  parent: 'bg-[var(--text-inverse)] opacity-80',
-  child: 'bg-[var(--text-inverse)] opacity-40',
+/**
+ * The window's palette: the homepage rail's card, wearing the same chrome the
+ * sibling product graphics use (`--white` fill, 1px `--border` hairline,
+ * `shadow-xs`) so the trace reads as the workspace's own run view, with a
+ * two-step parent/child ramp so nested spans stay quieter than the blocks
+ * they hang under.
+ */
+const PALETTE = {
+  name: {
+    parent: 'text-[var(--text-primary)]',
+    child: 'text-[var(--text-muted)]',
+  },
+  bar: {
+    parent: 'bg-[var(--text-secondary)]',
+    child: 'bg-[var(--text-muted)]',
+  },
 } as const
 
-/** Shared hairline ink for the window outline, header rule, and icon box. */
-const OUTLINE_INK = colorMixFallbacks.inverseBorder45
-
 /**
- * A run's block-by-block trace told inside the agent-code tile's dark
- * outlined window: the window keeps that tile's exact slot geometry
- * (`top-5`, `left-0`, bleeding off the right and bottom edges,
- * `rounded-tl-xl`) as an outlined shell - faint `--text-muted-inverse`
- * hairlines with the dark tile showing through. Its `h-12` title bar
- * pairs the Library icon (in an outlined `size-6` icon box, the
- * agent-code header's treatment) with the run's workflow name and the
- * run's total duration in mono on the right.
+ * A run's block-by-block trace told inside an outlined window inset on all
+ * sides with the landing stage radius, so the trace does not clip the tall
+ * card's corners. Its `h-12` title bar pairs the Library icon (in an outlined
+ * `size-6` icon box) with the run's workflow name and the run's total
+ * duration in mono on the right.
  *
  * Inside, the workspace trace view's vocabulary at tile scale: each span
  * is a row with its block name (children indented and quieter, the real
  * tree's depth ramp), a waterfall bar offset by when the span started
  * and sized by how long it ran, and a right-aligned mono duration. The
  * rows stamp in top to bottom once (from `run-trace-graphic.module.css`,
- * the agent-code tile's one-shot settle); under `prefers-reduced-motion`
+ * a one-shot settle); under `prefers-reduced-motion`
  * the trace renders fully settled.
  */
 export function RunTraceGraphic() {
   return (
-    <FeatureGraphicShell>
+    <FeatureGraphicShell variant='portrait'>
       <div
         aria-hidden='true'
         className={cn(
-          'absolute top-5 right-0 bottom-0 left-0 rounded-tl-xl border-t border-l',
-          OUTLINE_INK
+          'absolute inset-[10px] flex flex-col overflow-hidden border border-[var(--border)] bg-[var(--white)] shadow-xs dark:bg-[var(--surface-4)]',
+          LANDING_STAGE_WINDOW_RADIUS
         )}
       >
-        <div className={cn('flex h-12 items-center gap-2 border-b px-4', OUTLINE_INK)}>
-          <span
-            className={cn('flex size-6 items-center justify-center rounded-md border', OUTLINE_INK)}
-          >
-            <Library className='size-[14px] text-[var(--text-muted-inverse)]' />
+        <div className='flex h-12 shrink-0 items-center gap-2 border-[var(--border)] border-b px-4'>
+          <span className='flex size-6 items-center justify-center rounded-md border border-[var(--border)]'>
+            <Library className='size-[14px] text-[var(--text-icon)]' />
           </span>
-          <span className='min-w-0 flex-1 truncate text-[var(--text-inverse)] text-base'>
+          <span className='min-w-0 flex-1 truncate text-[var(--text-primary)] text-base'>
             Support ticket routing
           </span>
-          <span className='shrink-0 font-mono text-[var(--text-muted-inverse)] text-caption'>
-            1.86s
-          </span>
+          <span className='shrink-0 font-mono text-[var(--text-muted)] text-caption'>1.86s</span>
         </div>
 
-        <div className='flex flex-col p-4'>
+        <div className='flex min-h-0 flex-1 flex-col justify-evenly p-4 py-5'>
           {TRACE_SPANS.map((span, index) => (
             <div
               key={span.name}
@@ -125,7 +121,7 @@ export function RunTraceGraphic() {
               <span
                 className={cn(
                   'w-[38%] shrink-0 truncate text-caption',
-                  NAME_TONE_CLASS[span.barTone],
+                  PALETTE.name[span.barTone],
                   span.indentClass
                 )}
               >
@@ -135,12 +131,12 @@ export function RunTraceGraphic() {
                 <span
                   className={cn(
                     '-translate-y-1/2 absolute top-1/2 h-[6px] rounded-full',
-                    BAR_TONE_CLASS[span.barTone],
+                    PALETTE.bar[span.barTone],
                     span.barClass
                   )}
                 />
               </span>
-              <span className='w-11 shrink-0 text-right font-mono text-[var(--text-muted-inverse)] text-caption'>
+              <span className='w-11 shrink-0 text-right font-mono text-[var(--text-muted)] text-caption'>
                 {span.duration}
               </span>
             </div>
diff --git a/apps/sim/app/(landing)/logs/components/log-history-preview/components/log-preview-details/index.ts b/apps/sim/app/(landing)/logs/components/log-history-preview/components/log-preview-details/index.ts
new file mode 100644
index 00000000000..f192dec4442
--- /dev/null
+++ b/apps/sim/app/(landing)/logs/components/log-history-preview/components/log-preview-details/index.ts
@@ -0,0 +1 @@
+export { LogPreviewDetails } from './log-preview-details'
diff --git a/apps/sim/app/(landing)/logs/components/log-history-preview/components/log-preview-details/log-preview-details.tsx b/apps/sim/app/(landing)/logs/components/log-history-preview/components/log-preview-details/log-preview-details.tsx
new file mode 100644
index 00000000000..e0c79a2182d
--- /dev/null
+++ b/apps/sim/app/(landing)/logs/components/log-history-preview/components/log-preview-details/log-preview-details.tsx
@@ -0,0 +1,72 @@
+import { useState } from 'react'
+import { Badge, ChipModalTabs } from '@sim/emcn'
+import type { PreviewRun } from '@/app/(landing)/logs/components/log-history-preview/types'
+import { LogTracePanel } from '@/app/(landing)/logs/components/log-trace-preview/components/log-trace-panel'
+
+interface LogPreviewDetailsProps {
+  id: string
+  run: PreviewRun
+}
+
+/** Uses LogDetailsContent's Overview fields and native Overview / Trace switch. */
+export function LogPreviewDetails({ id, run }: LogPreviewDetailsProps) {
+  const [tab, setTab] = useState('overview')
+
+  return (
+    <div
+      id={id}
+      role='region'
+      aria-label={`${run.name} execution details`}
+      className='min-h-0 flex-1 overflow-auto overscroll-contain'
+    >
+      <div className='p-3.5'>
+        <ChipModalTabs
+          tabs={[
+            { value: 'overview', label: 'Overview' },
+            { value: 'trace', label: 'Trace' },
+          ]}
+          value={tab}
+          onChange={setTab}
+          aria-label='Sample run details view'
+        />
+      </div>
+      {tab === 'trace' ? (
+        <LogTracePanel run={run} />
+      ) : (
+        <div className='space-y-3 px-3.5 pb-4 text-caption'>
+          <div className='grid grid-cols-2 gap-3'>
+            <div>
+              <p className='text-[var(--text-tertiary)]'>Timestamp</p>
+              <p className='mt-0.5 text-sm'>Sep 7 {run.time}</p>
+            </div>
+            <div>
+              <p className='text-[var(--text-tertiary)]'>Workflow</p>
+              <p className='mt-0.5 text-sm'>{run.name}</p>
+            </div>
+          </div>
+          <div className='divide-y divide-[var(--border)] overflow-hidden rounded-md border border-[var(--border)] bg-[var(--surface-2)]'>
+            <div className='flex h-10 items-center justify-between px-3'>
+              <span className='text-[var(--text-tertiary)]'>Level</span>
+              <Badge variant='gray' dot size='sm'>
+                {run.status === 'Error' ? 'Error' : 'Info'}
+              </Badge>
+            </div>
+            {[
+              { label: 'Trigger', value: run.trigger },
+              { label: 'Duration', value: run.duration },
+            ].map((item) => (
+              <div key={item.label} className='flex h-10 items-center justify-between px-3'>
+                <span className='text-[var(--text-tertiary)]'>{item.label}</span>
+                <span className='tabular-nums'>{item.value}</span>
+              </div>
+            ))}
+          </div>
+          <p className='text-[var(--text-tertiary)]'>Workflow Output</p>
+          <pre className='whitespace-pre-wrap rounded-md bg-[var(--surface-4)] p-3 font-mono text-[11px] leading-relaxed [overflow-wrap:anywhere] dark:bg-[var(--surface-3)]'>
+            <code>{run.spans[run.spans.length - 1].output}</code>
+          </pre>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/logs/components/log-history-preview/constants.ts b/apps/sim/app/(landing)/logs/components/log-history-preview/constants.ts
new file mode 100644
index 00000000000..5a6ba313b8c
--- /dev/null
+++ b/apps/sim/app/(landing)/logs/components/log-history-preview/constants.ts
@@ -0,0 +1,169 @@
+import type { PreviewRun } from '@/app/(landing)/logs/components/log-history-preview/types'
+
+export const PREVIEW_RUNS: readonly PreviewRun[] = [
+  {
+    id: 'support-01',
+    name: 'Support assistant',
+    status: 'Completed',
+    duration: '1.8s',
+    credits: '2',
+    trigger: 'API',
+    time: '10:42 AM',
+    spans: [
+      {
+        name: 'Start',
+        duration: '10ms',
+        durationMs: 10,
+        type: 'start_trigger',
+        input: '{ "input": "How do I invite a teammate?" }',
+        output: '{ "input": "How do I invite a teammate?" }',
+      },
+      {
+        name: 'Support agent',
+        duration: '1.6s',
+        durationMs: 1600,
+        type: 'agent',
+        input: '{ "message": "How do I invite a teammate?" }',
+        output:
+          '{ "content": "Open workspace settings, choose Members, and invite your teammate by email." }',
+      },
+      {
+        name: 'Response',
+        duration: '190ms',
+        durationMs: 190,
+        type: 'response',
+        input: '{ "answer": "<Support agent.content>" }',
+        output:
+          '{ "status": 200, "data": { "answer": "Open workspace settings, choose Members, and invite your teammate by email." } }',
+      },
+    ],
+  },
+  {
+    id: 'leads-01',
+    name: 'Lead enrichment',
+    status: 'Completed',
+    duration: '2.4s',
+    credits: '3',
+    trigger: 'Webhook',
+    time: '10:38 AM',
+    spans: [
+      {
+        name: 'Webhook',
+        duration: '20ms',
+        durationMs: 20,
+        type: 'webhook',
+        input: '{ "company": "Acme" }',
+        output: '{ "company": "Acme" }',
+      },
+      {
+        name: 'Research company',
+        duration: '2.1s',
+        durationMs: 2100,
+        type: 'agent',
+        input: '{ "company": "Acme" }',
+        output: '{ "industry": "Software", "employeeCount": "51–200" }',
+      },
+      {
+        name: 'Save to table',
+        duration: '280ms',
+        durationMs: 280,
+        type: 'table',
+        input: '{ "company": "Acme", "industry": "Software" }',
+        output:
+          '{ "success": true, "row": { "data": { "company": "Acme", "industry": "Software" } } }',
+      },
+    ],
+  },
+  {
+    id: 'sync-01',
+    name: 'Nightly data sync',
+    status: 'Error',
+    duration: '4.2s',
+    credits: '1',
+    trigger: 'Schedule',
+    time: '10:30 AM',
+    spans: [
+      {
+        name: 'Schedule',
+        duration: '10ms',
+        durationMs: 10,
+        type: 'schedule',
+        input: '{ "schedule": "Daily" }',
+        output: '{ "triggered": true }',
+      },
+      {
+        name: 'Fetch records',
+        duration: '4.19s',
+        durationMs: 4190,
+        type: 'api',
+        input: '{ "method": "GET", "resource": "records" }',
+        output: '{ "error": "Request timed out. The source did not respond." }',
+        error: true,
+      },
+    ],
+  },
+  {
+    id: 'digest-01',
+    name: 'Weekly digest',
+    status: 'Completed',
+    duration: '3.1s',
+    credits: '2',
+    trigger: 'Schedule',
+    time: '10:24 AM',
+    spans: [
+      {
+        name: 'Schedule',
+        duration: '10ms',
+        durationMs: 10,
+        type: 'schedule',
+        input: '{ "schedule": "Weekly" }',
+        output: '{ "triggered": true }',
+      },
+      {
+        name: 'Summarize updates',
+        duration: '2.8s',
+        durationMs: 2800,
+        type: 'agent',
+        input: '{ "updates": ["New onboarding guide", "Workspace audit"] }',
+        output:
+          '{ "content": "This week: an updated onboarding guide and completed workspace audit." }',
+      },
+      {
+        name: 'Send to Slack',
+        duration: '290ms',
+        durationMs: 290,
+        type: 'slack',
+        input: '{ "channel": "team-updates" }',
+        output: '{ "success": true }',
+      },
+    ],
+  },
+  {
+    id: 'invoice-01',
+    name: 'Invoice matching',
+    status: 'Error',
+    duration: '0.6s',
+    credits: '0',
+    trigger: 'Sim agent',
+    time: '10:18 AM',
+    spans: [
+      {
+        name: 'Start',
+        duration: '10ms',
+        durationMs: 10,
+        type: 'start_trigger',
+        input: '{ "invoice": "invoice-042.pdf" }',
+        output: '{ "invoice": "invoice-042.pdf" }',
+      },
+      {
+        name: 'Read file',
+        duration: '590ms',
+        durationMs: 590,
+        type: 'file',
+        input: '{ "fileName": "invoice-042.pdf" }',
+        output: '{ "error": "File not found in this workspace." }',
+        error: true,
+      },
+    ],
+  },
+]
diff --git a/apps/sim/app/(landing)/logs/components/log-history-preview/index.ts b/apps/sim/app/(landing)/logs/components/log-history-preview/index.ts
new file mode 100644
index 00000000000..9c25b50924e
--- /dev/null
+++ b/apps/sim/app/(landing)/logs/components/log-history-preview/index.ts
@@ -0,0 +1 @@
+export { LogHistoryPreview } from './log-history-preview'
diff --git a/apps/sim/app/(landing)/logs/components/log-history-preview/log-history-preview.tsx b/apps/sim/app/(landing)/logs/components/log-history-preview/log-history-preview.tsx
new file mode 100644
index 00000000000..2e1dba49f5f
--- /dev/null
+++ b/apps/sim/app/(landing)/logs/components/log-history-preview/log-history-preview.tsx
@@ -0,0 +1,160 @@
+'use client'
+
+import { useEffect, useId, useRef, useState } from 'react'
+import { Badge, Chip, ChipDropdown, ChipInput } from '@sim/emcn'
+import { Library, ListFilter, Search, X } from '@sim/emcn/icons'
+import {
+  MenuPreviewHeader,
+  MenuPreviewToolbar,
+} from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-header/menu-preview-header'
+import { LogPreviewDetails } from '@/app/(landing)/logs/components/log-history-preview/components/log-preview-details'
+import { PREVIEW_RUNS } from '@/app/(landing)/logs/components/log-history-preview/constants'
+import {
+  Resource,
+  type ResourceColumn,
+} from '@/app/workspace/[workspaceId]/components/resource/resource'
+
+const COLUMNS: ResourceColumn[] = [
+  { id: 'workflow', header: 'Workflow', widthMultiplier: 1.4 },
+  { id: 'date', header: 'Date' },
+  { id: 'status', header: 'Status' },
+  { id: 'cost', header: 'Cost' },
+  { id: 'trigger', header: 'Trigger' },
+  { id: 'duration', header: 'Duration' },
+]
+const FILTERS = [
+  { value: 'All', label: 'All statuses' },
+  { value: 'Completed', label: 'Info' },
+  { value: 'Error', label: 'Error' },
+]
+
+/** Production Resource.Table with the same log columns and native run-details sidebar. */
+export function LogHistoryPreview() {
+  const closeButtonRef = useRef<HTMLButtonElement>(null)
+  const rowButtonsRef = useRef<Map<string, HTMLButtonElement> | null>(null)
+  const rowButtons = (rowButtonsRef.current ??= new Map())
+  const detailsId = useId()
+  const [query, setQuery] = useState('')
+  const [filter, setFilter] = useState('All')
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const visibleRuns = PREVIEW_RUNS.filter(
+    (run) =>
+      (filter === 'All' || run.status === filter) &&
+      run.name.toLowerCase().includes(query.toLowerCase())
+  )
+  const selectedRun = visibleRuns.find((run) => run.id === selectedId)
+
+  useEffect(() => {
+    if (selectedRun) closeButtonRef.current?.focus({ preventScroll: true })
+  }, [selectedRun])
+
+  function closeDetails() {
+    setSelectedId(null)
+    if (selectedId) rowButtons.get(selectedId)?.focus({ preventScroll: true })
+  }
+
+  const rows = visibleRuns.map((run) => ({
+    id: run.id,
+    cells: {
+      workflow: {
+        content: (
+          <button
+            ref={(node) => {
+              if (node) rowButtons.set(run.id, node)
+              else rowButtons.delete(run.id)
+            }}
+            type='button'
+            aria-controls={selectedRun?.id === run.id ? detailsId : undefined}
+            aria-expanded={selectedRun?.id === run.id}
+            onClick={(event) => {
+              event.stopPropagation()
+              setSelectedId(run.id)
+            }}
+            className='max-w-full cursor-pointer truncate rounded-sm text-left focus-visible:outline-2 focus-visible:outline-[var(--text-secondary)]'
+          >
+            {run.name}
+          </button>
+        ),
+      },
+      date: { label: `Sep 7 ${run.time}` },
+      status: {
+        content: (
+          <Badge variant='gray' dot size='sm'>
+            {run.status === 'Error' ? 'Error' : 'Info'}
+          </Badge>
+        ),
+      },
+      cost: { label: `${run.credits} ${run.credits === '1' ? 'credit' : 'credits'}` },
+      trigger: {
+        content: (
+          <Badge variant='gray' size='sm' className='shrink-0 whitespace-nowrap'>
+            {run.trigger}
+          </Badge>
+        ),
+      },
+      duration: { label: run.duration },
+    },
+  }))
+
+  return (
+    <>
+      <div className='absolute top-20 right-[8%] bottom-8 left-[8%] isolate flex flex-col overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--bg)] text-[var(--text-body)] text-small shadow-xs max-sm:inset-x-5 max-sm:top-8 [&_[data-menu-preview-toolbar]>div]:max-w-none'>
+        <MenuPreviewHeader icon={Library} title='Logs' />
+        <MenuPreviewToolbar>
+          <ChipInput
+            icon={Search}
+            placeholder='Search logs...'
+            aria-label='Search sample logs'
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            className='mr-auto min-w-0 flex-1'
+          />
+          <ChipDropdown
+            leftIcon={ListFilter}
+            aria-label={`Filter sample logs by status: ${FILTERS.find((option) => option.value === filter)?.label ?? filter}`}
+            value={filter}
+            options={FILTERS}
+            onChange={setFilter}
+            matchTriggerWidth={false}
+          />
+        </MenuPreviewToolbar>
+        <div className='relative flex min-h-0 flex-1 flex-col'>
+          <Resource.Table
+            columns={COLUMNS}
+            rows={rows}
+            selectedRowId={selectedRun?.id}
+            onRowClick={setSelectedId}
+            emptyState={<p className='p-6 text-[var(--text-secondary)]'>No matching runs</p>}
+            overlay={
+              selectedRun && (
+                <div
+                  onKeyDown={(event) => {
+                    if (event.key === 'Escape') {
+                      event.stopPropagation()
+                      closeDetails()
+                    }
+                  }}
+                  className='absolute inset-y-0 right-0 z-10 flex w-[480px] max-w-full flex-col border-[var(--border)] border-l bg-[var(--bg)] shadow-sm'
+                >
+                  <MenuPreviewHeader
+                    title='Log Details'
+                    size='table'
+                    actions={
+                      <Chip
+                        ref={closeButtonRef}
+                        leftIcon={X}
+                        aria-label='Close sample log details'
+                        onClick={closeDetails}
+                      />
+                    }
+                  />
+                  <LogPreviewDetails key={selectedRun.id} id={detailsId} run={selectedRun} />
+                </div>
+              )
+            }
+          />
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/apps/sim/app/(landing)/logs/components/log-history-preview/types.ts b/apps/sim/app/(landing)/logs/components/log-history-preview/types.ts
new file mode 100644
index 00000000000..6d79e7e2ad4
--- /dev/null
+++ b/apps/sim/app/(landing)/logs/components/log-history-preview/types.ts
@@ -0,0 +1,31 @@
+export type PreviewRunStatus = 'Completed' | 'Error'
+
+export interface PreviewRunSpan {
+  name: string
+  duration: string
+  durationMs: number
+  type:
+    | 'start_trigger'
+    | 'agent'
+    | 'response'
+    | 'webhook'
+    | 'table'
+    | 'schedule'
+    | 'api'
+    | 'slack'
+    | 'file'
+  input: string
+  output: string
+  error?: boolean
+}
+
+export interface PreviewRun {
+  id: string
+  name: string
+  status: PreviewRunStatus
+  duration: string
+  credits: string
+  trigger: string
+  time: string
+  spans: readonly PreviewRunSpan[]
+}
diff --git a/apps/sim/app/(landing)/logs/components/log-snapshot-preview/index.ts b/apps/sim/app/(landing)/logs/components/log-snapshot-preview/index.ts
new file mode 100644
index 00000000000..1bb85a3079d
--- /dev/null
+++ b/apps/sim/app/(landing)/logs/components/log-snapshot-preview/index.ts
@@ -0,0 +1 @@
+export { LogSnapshotPreview } from './log-snapshot-preview'
diff --git a/apps/sim/app/(landing)/logs/components/log-snapshot-preview/log-snapshot-preview.tsx b/apps/sim/app/(landing)/logs/components/log-snapshot-preview/log-snapshot-preview.tsx
new file mode 100644
index 00000000000..c5db5b96950
--- /dev/null
+++ b/apps/sim/app/(landing)/logs/components/log-snapshot-preview/log-snapshot-preview.tsx
@@ -0,0 +1,18 @@
+'use client'
+
+import { ChipModalHeader } from '@sim/emcn'
+import { WorkflowPreviewCanvas } from '@/app/(landing)/workflows/components/workflow-builder-preview/components/workflow-preview-canvas'
+
+/** The saved canvas uses the same native support workflow as the visual builder preview. */
+export function LogSnapshotPreview() {
+  return (
+    <div className='absolute top-16 left-12 w-[660px] overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--bg)] text-[var(--text-body)] max-sm:top-8 max-sm:left-6'>
+      <ChipModalHeader onClose={() => {}}>Workflow State</ChipModalHeader>
+      <div className='relative h-[330px] overflow-hidden'>
+        <div className='-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 h-[376px] w-[1210px] scale-50'>
+          <WorkflowPreviewCanvas />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/logs/components/log-trace-preview/components/log-trace-panel/index.ts b/apps/sim/app/(landing)/logs/components/log-trace-preview/components/log-trace-panel/index.ts
new file mode 100644
index 00000000000..b72d9e43b33
--- /dev/null
+++ b/apps/sim/app/(landing)/logs/components/log-trace-preview/components/log-trace-panel/index.ts
@@ -0,0 +1 @@
+export { LogTracePanel } from './log-trace-panel'
diff --git a/apps/sim/app/(landing)/logs/components/log-trace-preview/components/log-trace-panel/log-trace-panel.tsx b/apps/sim/app/(landing)/logs/components/log-trace-preview/components/log-trace-panel/log-trace-panel.tsx
new file mode 100644
index 00000000000..f8f057378bb
--- /dev/null
+++ b/apps/sim/app/(landing)/logs/components/log-trace-preview/components/log-trace-panel/log-trace-panel.tsx
@@ -0,0 +1,171 @@
+'use client'
+
+import { useState } from 'react'
+import { Badge, ChipInput, cn } from '@sim/emcn'
+import { ChevronDown, File, Search, Table } from '@sim/emcn/icons'
+import { WorkflowTypeIcon } from '@sim/workflow-renderer'
+import {
+  AgentIcon,
+  ApiIcon,
+  ResponseIcon,
+  ScheduleIcon,
+  SlackIcon,
+  StartIcon,
+  WebhookIcon,
+} from '@/components/icons'
+import type { PreviewRun } from '@/app/(landing)/logs/components/log-history-preview/types'
+
+const BLOCK_ICONS = {
+  start_trigger: StartIcon,
+  agent: AgentIcon,
+  response: ResponseIcon,
+  webhook: WebhookIcon,
+  table: Table,
+  schedule: ScheduleIcon,
+  api: ApiIcon,
+  slack: SlackIcon,
+  file: File,
+} as const
+
+interface LogTracePanelProps {
+  run: PreviewRun
+}
+
+/** Mirrors TraceView's compact span tree, timing bars, metadata, and stacked JSON sections. */
+export function LogTracePanel({ run }: LogTracePanelProps) {
+  const [selectedName, setSelectedName] = useState(
+    run.spans.find((span) => span.error)?.name ?? run.spans[1].name
+  )
+  const [query, setQuery] = useState('')
+  const selected = run.spans.find((span) => span.name === selectedName) ?? run.spans[0]
+  const visible = run.spans.filter((span) => span.name.toLowerCase().includes(query.toLowerCase()))
+  const total = run.spans.reduce((sum, span) => sum + span.durationMs, 0)
+  const selectedIcon = BLOCK_ICONS[selected.type]
+
+  return (
+    <div className='flex min-h-0 flex-1 flex-col text-caption'>
+      <div className='flex h-10 shrink-0 items-center gap-2 border-[var(--border)] border-b px-3.5'>
+        <Badge variant='gray-secondary' size='sm'>
+          {run.status === 'Error' ? 'Error' : 'Success'}
+        </Badge>
+        <span className='text-[var(--text-secondary)] tabular-nums'>{run.duration}</span>
+        <span className='text-[var(--text-tertiary)]'>{run.spans.length} spans</span>
+        <ChipInput
+          icon={Search}
+          placeholder='Filter spans'
+          aria-label='Filter sample trace spans'
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+          className='ml-auto w-[140px]'
+        />
+      </div>
+      <div className='flex min-h-[276px] min-w-[480px] flex-1'>
+        <div
+          role='group'
+          aria-label='Execution spans'
+          className='w-[220px] shrink-0 border-[var(--border)] border-r pt-2'
+        >
+          {visible.map((span) => {
+            const index = run.spans.indexOf(span)
+            const offset = run.spans
+              .slice(0, index)
+              .reduce((sum, previous) => sum + previous.durationMs, 0)
+            const Icon = BLOCK_ICONS[span.type]
+            return (
+              <button
+                key={span.name}
+                type='button'
+                aria-pressed={span.name === selected.name}
+                onClick={() => setSelectedName(span.name)}
+                className={cn(
+                  'block w-full cursor-pointer px-3.5 pt-1 pb-[5px] text-left hover:bg-[var(--surface-2)] focus-visible:outline-2 focus-visible:outline-[var(--text-secondary)] focus-visible:outline-offset-[-2px]',
+                  span.name === selected.name && 'bg-[var(--surface-3)]'
+                )}
+              >
+                <span className='flex items-center gap-1.5'>
+                  <WorkflowTypeIcon type={span.type} Icon={Icon} className='size-[14px]' />
+                  <span
+                    className={cn(
+                      'min-w-0 flex-1 truncate text-[var(--text-secondary)]',
+                      span.error && 'text-[var(--text-error)]'
+                    )}
+                  >
+                    {span.name}
+                  </span>
+                  <span className='text-[var(--text-tertiary)] tabular-nums'>{span.duration}</span>
+                </span>
+                <svg
+                  aria-hidden='true'
+                  viewBox='0 0 100 3'
+                  preserveAspectRatio='none'
+                  className='mt-[3px] h-[3px] w-full overflow-hidden rounded-full bg-[var(--border)]'
+                >
+                  <rect
+                    x={(100 * offset) / total}
+                    width={Math.max(0.5, (100 * span.durationMs) / total)}
+                    height='3'
+                    rx='1.5'
+                    className={
+                      span.error ? 'fill-[var(--text-error)]' : 'fill-[var(--text-secondary)]'
+                    }
+                  />
+                </svg>
+              </button>
+            )
+          })}
+          {visible.length === 0 && (
+            <p className='p-3 text-[var(--text-tertiary)]'>No matching spans</p>
+          )}
+        </div>
+        <div className='min-w-0 flex-1 space-y-3 px-3.5 pt-3 pb-4'>
+          <div className='flex items-start gap-2'>
+            <WorkflowTypeIcon
+              type={selected.type}
+              Icon={selectedIcon}
+              className='mt-0.5 size-[18px]'
+              iconClassName='size-[12px]'
+            />
+            <div>
+              <p className='text-[var(--text-primary)] text-sm'>{selected.name}</p>
+              <div className='mt-0.5 flex items-center gap-1.5 text-[var(--text-tertiary)]'>
+                <Badge variant='gray-secondary' size='sm'>
+                  {selected.error ? 'Error' : 'Success'}
+                </Badge>
+                <span>· {selected.duration}</span>
+              </div>
+            </div>
+          </div>
+          <div className='space-y-1.5 rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-2.5 py-2'>
+            <div className='flex justify-between'>
+              <span className='text-[var(--text-tertiary)]'>Type</span>
+              <span>{selected.type === 'start_trigger' ? 'start' : selected.type}</span>
+            </div>
+            <div className='flex justify-between'>
+              <span className='text-[var(--text-tertiary)]'>Duration</span>
+              <span>{selected.duration}</span>
+            </div>
+          </div>
+          {[
+            { label: 'Input', value: selected.input },
+            { label: selected.error ? 'Error' : 'Output', value: selected.output },
+          ].map((section) => (
+            <details key={`${selected.name}-${section.label}`} open className='group'>
+              <summary className='flex cursor-pointer list-none items-center justify-between text-[var(--text-tertiary)] [&::-webkit-details-marker]:hidden'>
+                {section.label}
+                <ChevronDown className='group-not-open:-rotate-90 size-2' />
+              </summary>
+              <pre
+                className={cn(
+                  'mt-1.5 whitespace-pre-wrap rounded-md bg-[var(--surface-4)] p-2 font-mono text-[11px] leading-[1.6] [overflow-wrap:anywhere] dark:bg-[var(--surface-3)]',
+                  section.label === 'Error' && 'text-[var(--text-error)]'
+                )}
+              >
+                <code>{section.value}</code>
+              </pre>
+            </details>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/logs/components/log-trace-preview/index.ts b/apps/sim/app/(landing)/logs/components/log-trace-preview/index.ts
new file mode 100644
index 00000000000..9f999e103cf
--- /dev/null
+++ b/apps/sim/app/(landing)/logs/components/log-trace-preview/index.ts
@@ -0,0 +1 @@
+export { LogTracePreview } from './log-trace-preview'
diff --git a/apps/sim/app/(landing)/logs/components/log-trace-preview/log-trace-preview.tsx b/apps/sim/app/(landing)/logs/components/log-trace-preview/log-trace-preview.tsx
new file mode 100644
index 00000000000..4211ca0b951
--- /dev/null
+++ b/apps/sim/app/(landing)/logs/components/log-trace-preview/log-trace-preview.tsx
@@ -0,0 +1,27 @@
+'use client'
+
+import { ChipModalTabs } from '@sim/emcn'
+import { Workflow } from '@sim/emcn/icons'
+import { MenuPreviewHeader } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-header/menu-preview-header'
+import { PREVIEW_RUNS } from '@/app/(landing)/logs/components/log-history-preview/constants'
+import { LogTracePanel } from '@/app/(landing)/logs/components/log-trace-preview/components/log-trace-panel'
+
+/** A crop of Logs' Trace tab, using the product's tree and detail-pane layout. */
+export function LogTracePreview() {
+  return (
+    <div className='absolute top-16 left-12 w-[640px] overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--bg)] text-[var(--text-body)] text-small max-sm:top-8 max-sm:left-6'>
+      <MenuPreviewHeader icon={Workflow} title='Support assistant' />
+      <div className='px-3.5 py-3'>
+        <ChipModalTabs
+          tabs={[
+            { value: 'overview', label: 'Overview' },
+            { value: 'trace', label: 'Trace' },
+          ]}
+          value='trace'
+          onChange={() => {}}
+        />
+      </div>
+      <LogTracePanel run={PREVIEW_RUNS[0]} />
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/logs/logs.tsx b/apps/sim/app/(landing)/logs/logs.tsx
index 8a00c03f2e7..58d1d565fe6 100644
--- a/apps/sim/app/(landing)/logs/logs.tsx
+++ b/apps/sim/app/(landing)/logs/logs.tsx
@@ -1,175 +1,55 @@
 import {
-  PlatformHeroVisual,
   SolutionsPage,
-  type SolutionsPageConfig,
-} from '@/app/(landing)/components'
-import {
-  AuditTrailGraphic,
-  RunMonitoringGraphic,
-  StagingGraphic,
-} from '@/app/(landing)/enterprise/components/feature-graphics'
-import {
-  FailureAlertGraphic,
-  FilterRunsGraphic,
-  RunTraceGraphic,
-} from '@/app/(landing)/logs/components/feature-graphics'
-import { LogsHeroLoop } from '@/app/(landing)/logs/components/logs-hero-loop'
+  type SolutionsProductPageConfig,
+} from '@/app/(landing)/components/solutions-page'
+import { ProductHeroPreview } from '@/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-hero-preview'
+import { LogHistoryPreview } from '@/app/(landing)/logs/components/log-history-preview'
+import { LogSnapshotPreview } from '@/app/(landing)/logs/components/log-snapshot-preview'
+import { LogTracePreview } from '@/app/(landing)/logs/components/log-trace-preview'
 
-/**
- * Logs platform page - a consumer of {@link SolutionsPage} rendered with
- * the enterprise page's feature-tile treatment.
- *
- * The whole page is one typed {@link SolutionsPageConfig} rendered inside
- * the shared route-group layout chrome: identity (for structured data), a
- * hero carrying the live Logs table loop, and two rows of three feature
- * tiles. Where the workflows page's "Trace every run" card introduces run
- * tracing in passing, this page goes deeper on the same story: the trace
- * itself (a new block-by-block waterfall vignette), live run details, the
- * run record, search and filters, failure debugging (the staging surface
- * retold as a failed run's snapshot), and alerting (a new failed-run →
- * Slack-alert vignette).
- *
- * The JSON-LD emitted by {@link SolutionsPage} is structurally identical
- * to the platform page's (`WebPage` + `BreadcrumbList` +
- * `WebApplication`), so the feature-tile treatment is SEO-neutral.
- */
-/** Shared meta + JSON-LD description for the Logs page (one string, zero drift). */
+/** Shared description for page metadata and structured data. */
 export const LOGS_PAGE_DESCRIPTION =
-  'Sim gives teams AI agent observability: trace every run step by step, search and filter across runs, and catch failures with alerts.'
+  'Inspect AI workflow runs in Sim. Filter run history, trace block inputs and outputs, and open the workflow snapshot behind each execution.'
 
-const LOGS_CONFIG: SolutionsPageConfig = {
+const LOGS_CONFIG: SolutionsProductPageConfig = {
   module: 'Logs',
   path: '/logs',
   seoDescription: LOGS_PAGE_DESCRIPTION,
   hero: {
+    visual: <ProductHeroPreview product='logs' />,
     eyebrow: 'Logs',
-    heading: 'Trace every agent run with full observability in Sim.',
+    heading: 'A clear view of every agent run.',
     description:
-      'Logs is the AI agent observability layer in Sim, the open-source AI workspace. Follow each run block by block, search across every run, and catch failures with alerts.',
+      'Follow every execution, inspect the details, and understand what happened in Sim.',
     summary:
-      'Logs is the AI agent observability layer in Sim, the open-source AI workspace where teams build, deploy, and manage AI agents. Sim records every step of every run, so teams trace each decision, tool call, and output, and catch failures with alerts.',
-    visual: (
-      <PlatformHeroVisual>
-        <LogsHeroLoop />
-      </PlatformHeroVisual>
-    ),
+      'Sim Logs brings AI workflow run history and debugging into the open-source AI workspace. Teams filter runs by workflow, status, trigger, and time, inspect block inputs and outputs, compare duration and credits, and view the saved workflow snapshot behind an execution.',
   },
-  rows: [
+  features: [
+    {
+      id: 'history',
+      label: 'Run history',
+      title: 'From history to the full picture.',
+      description: 'Filter your runs and open an execution to see its timing, status, and steps.',
+      visual: <LogHistoryPreview />,
+      cta: { label: 'Explore run history', href: 'https://docs.sim.ai/logs-debugging/logging' },
+    },
     {
       id: 'trace',
-      title: 'See exactly what every AI agent did.',
-      subtitle:
-        'Sim records every step of every agent run, so teams can follow each decision, tool call, and output on one timeline.',
-      cta: { label: 'Explore Logs in Sim', href: '/signup' },
-      cards: [
-        {
-          title: 'Trace runs block by block',
-          description:
-            'Sim captures every step of a run: each block, tool call, and model response, with its duration.',
-          featureTileTone: 'dark',
-          featureTileDescriptionTone: 'soft',
-          visual: <RunTraceGraphic />,
-        },
-        {
-          title: 'Watch runs as they happen',
-          description:
-            'Sim shows each run the moment it starts, with its trigger, duration, and output, so teams see agents working in real time.',
-          visual: (
-            <RunMonitoringGraphic
-              fields={[
-                { label: 'Workflow', value: 'Support ticket routing', variant: 'strong' },
-                { label: 'Status', value: 'Completed', variant: 'chip' },
-                { label: 'Latency', value: '1.86s', variant: 'mono' },
-                { label: 'Tokens', value: '8.4K', variant: 'mono' },
-              ]}
-              outputPairs={[
-                { key: 'status', value: '"completed"' },
-                { key: 'tokens', value: '8412' },
-              ]}
-            />
-          ),
-        },
-        {
-          title: 'Every run on the record',
-          description:
-            'Sim keeps a permanent history of every run and follow-up, so teams can answer what happened, when, and who resolved it.',
-          visual: (
-            <AuditTrailGraphic
-              entries={[
-                {
-                  action: 'Error resolved',
-                  actor: 'Maya Chen',
-                  resource: 'Nightly data sync',
-                  time: 'Now',
-                  avatar: '/landing/team-avatar-1.jpg',
-                },
-                {
-                  action: 'Run traced',
-                  actor: 'Jordan Lee',
-                  resource: 'Invoice matching · run 8f2a',
-                  time: '12 min ago',
-                  avatar: '/landing/team-avatar-2.jpg',
-                },
-                {
-                  action: 'Logs exported',
-                  actor: 'Sam Ortiz',
-                  resource: 'June runs · CSV',
-                  time: '1h ago',
-                  avatar: '/landing/team-avatar-3.jpg',
-                },
-                {
-                  action: 'Alert acknowledged',
-                  actor: 'Maya Chen',
-                  resource: 'Churn-risk alerts',
-                  time: 'Jul 8',
-                  avatar: '/landing/team-avatar-1.jpg',
-                },
-              ]}
-            />
-          ),
-        },
-      ],
+      label: 'Execution traces',
+      title: 'Every step, in view.',
+      description:
+        'Inspect inputs, outputs, model responses, and tool calls in an execution trace.',
+      visual: <LogTracePreview />,
+      cta: { label: 'Explore traces', href: 'https://docs.sim.ai/logs-debugging/logging' },
     },
     {
-      id: 'catch',
-      title: 'Catch failures before they spread.',
-      subtitle:
-        'Sim surfaces failed runs the moment they happen, with the alerts and context teams need to fix them fast.',
-      cta: { label: 'Start tracing runs', href: '/signup' },
-      cards: [
-        {
-          title: 'Filter to the runs that matter',
-          description:
-            'Search and filter every run in Sim by workflow, status, trigger, and time, so failed runs surface fast.',
-          visual: <FilterRunsGraphic />,
-        },
-        {
-          title: 'Debug with full context',
-          description:
-            'Sim snapshots each run, so teams open a failed run with inputs, outputs, and trace intact and see which block broke.',
-          visual: (
-            <StagingGraphic
-              title='Nightly data sync'
-              headerTag='run 8f2a'
-              changeTag='error'
-              changeTitle='Timeout in Post to ledger'
-              attribution='Maya Chen · reviewing now'
-              checks={['Inputs captured', 'Output snapshot saved', 'Trace preserved']}
-              fromLabel='Error'
-              toLabel='Resolved'
-              actionLabel='Review run'
-            />
-          ),
-        },
-        {
-          title: 'Catch failures with alerting',
-          description:
-            'When a run fails, Sim alerts the channel your team already watches, naming the failing block and linking straight to the trace.',
-          featureTileTone: 'dark',
-          featureTileDescriptionTone: 'soft',
-          visual: <FailureAlertGraphic />,
-        },
-      ],
+      id: 'snapshot',
+      label: 'Workflow snapshots',
+      title: 'Go back to what actually ran.',
+      description:
+        'Open the saved workflow snapshot to inspect the original blocks and configuration.',
+      visual: <LogSnapshotPreview />,
+      cta: { label: 'Explore debugging', href: 'https://docs.sim.ai/logs-debugging/logging' },
     },
   ],
 }
diff --git a/apps/sim/app/(landing)/models/(shell)/[provider]/[model]/opengraph-image.tsx b/apps/sim/app/(landing)/models/(shell)/[provider]/[model]/opengraph-image.tsx
index c9d54500827..2b6fb94bc03 100644
--- a/apps/sim/app/(landing)/models/(shell)/[provider]/[model]/opengraph-image.tsx
+++ b/apps/sim/app/(landing)/models/(shell)/[provider]/[model]/opengraph-image.tsx
@@ -11,13 +11,7 @@ import {
 export const contentType = 'image/png'
 export const size = COVER_OG_SIZE
 
-/**
- * The sibling page.tsx sets `dynamicParams = false`, a segment-level
- * restriction that also blocks this metadata route from rendering any
- * param combination it wasn't statically generated for - but Next does not
- * share generateStaticParams between a page and its sibling metadata
- * routes, so without this export every model's OG image 404s.
- */
+/** Pre-render catalog images separately from their sibling pages. */
 export async function generateStaticParams() {
   return ALL_CATALOG_MODELS.map((model) => ({
     provider: model.providerSlug,
diff --git a/apps/sim/app/(landing)/models/(shell)/[provider]/[model]/page.tsx b/apps/sim/app/(landing)/models/(shell)/[provider]/[model]/page.tsx
index a44bd563c4e..47eb53e18a8 100644
--- a/apps/sim/app/(landing)/models/(shell)/[provider]/[model]/page.tsx
+++ b/apps/sim/app/(landing)/models/(shell)/[provider]/[model]/page.tsx
@@ -1,11 +1,12 @@
 import { Fragment } from 'react'
-import { ChipLink } from '@sim/emcn'
+import { ChipLink, cn } from '@sim/emcn'
 import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 import { SITE_URL } from '@/lib/core/utils/urls'
 import { BackLink } from '@/app/(landing)/components'
 import { JsonLd } from '@/app/(landing)/components/json-ld'
 import { LandingFAQ } from '@/app/(landing)/components/landing-faq'
+import { LANDING_CONTENT_WIDTH, LANDING_GUTTER } from '@/app/(landing)/components/landing-layout'
 import { ShareButton } from '@/app/(landing)/components/share-button'
 import { FeaturedModelCard, ProviderIcon } from '@/app/(landing)/models/components/model-primitives'
 import {
@@ -24,7 +25,8 @@ import {
 
 const baseUrl = SITE_URL
 
-export const dynamicParams = false
+/** Unknown slugs reach the section 404 while known pages remain pre-rendered. */
+export const dynamicParams = true
 
 export async function generateStaticParams() {
   return ALL_CATALOG_MODELS.map((model) => ({
@@ -147,7 +149,7 @@ export default async function ModelPage({
       <JsonLd data={faqJsonLd} />
 
       <section className='bg-[var(--bg)]'>
-        <div className='mx-auto w-full max-w-[1460px] px-20 pt-[112px] max-sm:px-5 max-sm:pt-20 max-lg:px-8'>
+        <div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER, 'pt-[112px] max-sm:pt-20')}>
           <div className='mb-6'>
             <BackLink href={provider.href} label={`Back to ${provider.name}`} />
           </div>
@@ -189,8 +191,8 @@ export default async function ModelPage({
 
         <div className='mt-8 h-px w-full bg-[var(--border)]' />
 
-        <div className='mx-auto w-full max-w-[1460px]'>
-          <div className='mx-20 border-[var(--border)] border-x max-sm:mx-5 max-lg:mx-8'>
+        <div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER)}>
+          <div className='border-[var(--border)] border-x'>
             <InfoRow label='Input price' value={`${formatPrice(model.pricing.input)}/1M`} />
             <InfoRow
               label='Cached input'
diff --git a/apps/sim/app/(landing)/models/(shell)/[provider]/opengraph-image.tsx b/apps/sim/app/(landing)/models/(shell)/[provider]/opengraph-image.tsx
index 41429527251..ff3df67e42a 100644
--- a/apps/sim/app/(landing)/models/(shell)/[provider]/opengraph-image.tsx
+++ b/apps/sim/app/(landing)/models/(shell)/[provider]/opengraph-image.tsx
@@ -5,13 +5,7 @@ import { getProviderBySlug, MODEL_PROVIDERS_WITH_CATALOGS } from '@/app/(landing
 export const contentType = 'image/png'
 export const size = COVER_OG_SIZE
 
-/**
- * The sibling page.tsx sets `dynamicParams = false`, a segment-level
- * restriction that also blocks this metadata route from rendering any
- * param combination it wasn't statically generated for - but Next does not
- * share generateStaticParams between a page and its sibling metadata
- * routes, so without this export every provider's OG image 404s.
- */
+/** Pre-render catalog images separately from their sibling pages. */
 export async function generateStaticParams() {
   return MODEL_PROVIDERS_WITH_CATALOGS.map((provider) => ({
     provider: provider.slug,
diff --git a/apps/sim/app/(landing)/models/(shell)/[provider]/page.tsx b/apps/sim/app/(landing)/models/(shell)/[provider]/page.tsx
index e7a4b3892da..24421550348 100644
--- a/apps/sim/app/(landing)/models/(shell)/[provider]/page.tsx
+++ b/apps/sim/app/(landing)/models/(shell)/[provider]/page.tsx
@@ -1,3 +1,4 @@
+import { cn } from '@sim/emcn'
 import type { Metadata } from 'next'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
@@ -5,6 +6,7 @@ import { SITE_URL } from '@/lib/core/utils/urls'
 import { BackLink, ChevronArrow } from '@/app/(landing)/components'
 import { JsonLd } from '@/app/(landing)/components/json-ld'
 import { LandingFAQ } from '@/app/(landing)/components/landing-faq'
+import { LANDING_CONTENT_WIDTH, LANDING_GUTTER } from '@/app/(landing)/components/landing-layout'
 import {
   FeaturedModelCard,
   FeaturedProviderCard,
@@ -22,7 +24,8 @@ import {
 
 const baseUrl = SITE_URL
 
-export const dynamicParams = false
+/** Unknown slugs reach the section 404 while known pages remain pre-rendered. */
+export const dynamicParams = true
 
 export async function generateStaticParams() {
   return MODEL_PROVIDERS_WITH_CATALOGS.map((provider) => ({
@@ -136,7 +139,7 @@ export default async function ProviderModelsPage({
       <JsonLd data={faqJsonLd} />
 
       <section className='bg-[var(--bg)]'>
-        <div className='mx-auto w-full max-w-[1460px] px-20 pt-[112px] max-sm:px-5 max-sm:pt-20 max-lg:px-8'>
+        <div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER, 'pt-[112px] max-sm:pt-20')}>
           <div className='mb-6'>
             <BackLink href='/models' label='Back to Models' />
           </div>
@@ -163,8 +166,8 @@ export default async function ProviderModelsPage({
 
         <div className='mt-8 h-px w-full bg-[var(--border)]' />
 
-        <div className='mx-auto w-full max-w-[1460px]'>
-          <div className='mx-20 border-[var(--border)] border-x max-sm:mx-5 max-lg:mx-8'>
+        <div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER)}>
+          <div className='border-[var(--border)] border-x'>
             {provider.featuredModels.length > 0 && (
               <>
                 <nav aria-label='Featured models' className='flex flex-col sm:flex-row'>
diff --git a/apps/sim/app/(landing)/models/(shell)/page.tsx b/apps/sim/app/(landing)/models/(shell)/page.tsx
index 8222b34671b..5320b5dc8b1 100644
--- a/apps/sim/app/(landing)/models/(shell)/page.tsx
+++ b/apps/sim/app/(landing)/models/(shell)/page.tsx
@@ -182,7 +182,7 @@ export default async function ModelsPage({
       <JsonLd data={faqJsonLd} />
 
       <section className='bg-[var(--bg)]'>
-        <div className='mx-auto w-full max-w-[1460px] px-20 pt-[112px] max-sm:px-5 max-sm:pt-20 max-lg:px-8'>
+        <div className='mx-auto w-full max-w-[1728px] px-10 pt-[112px] max-sm:pt-20 max-md:px-7 max-lg:px-8 max-xl:px-9'>
           <div className='flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between'>
             <h1
               id='models-heading'
@@ -199,7 +199,7 @@ export default async function ModelsPage({
 
         <div className='mt-8 h-px w-full bg-[var(--border)]' />
 
-        <div className='mx-auto w-full max-w-[1460px] px-20 max-sm:px-5 max-lg:px-8'>
+        <div className='mx-auto w-full max-w-[1728px] px-10 max-md:px-7 max-lg:px-8 max-xl:px-9'>
           <div className='border-[var(--border)] border-x'>
             {featuredProviders.length > 0 && (
               <>
diff --git a/apps/sim/app/(landing)/models/components/model-comparison-charts.tsx b/apps/sim/app/(landing)/models/components/model-comparison-charts.tsx
index 7acb7385955..7621ed1320c 100644
--- a/apps/sim/app/(landing)/models/components/model-comparison-charts.tsx
+++ b/apps/sim/app/(landing)/models/components/model-comparison-charts.tsx
@@ -69,7 +69,11 @@ function ModelLabel({ model }: ModelLabelProps) {
 
   return (
     <div className='flex w-[90px] shrink-0 items-center justify-end gap-1.5 sm:w-[140px] lg:w-[180px]'>
-      {Icon && <Icon className='size-3.5 shrink-0' />}
+      {Icon && (
+        <span aria-hidden='true' className='shrink-0'>
+          <Icon className='size-3.5' />
+        </span>
+      )}
       <span className='truncate text-[13px] text-[var(--text-primary)] leading-none tracking-[-0.01em]'>
         {model.displayName}
       </span>
diff --git a/apps/sim/app/(landing)/models/components/model-primitives/featured-model-card.tsx b/apps/sim/app/(landing)/models/components/model-primitives/featured-model-card.tsx
index 55f90eb1bf4..19d7fd30f02 100644
--- a/apps/sim/app/(landing)/models/components/model-primitives/featured-model-card.tsx
+++ b/apps/sim/app/(landing)/models/components/model-primitives/featured-model-card.tsx
@@ -19,9 +19,9 @@ export function FeaturedModelCard({
         <span className='text-[var(--text-muted)] text-xs uppercase tracking-[0.1em]'>
           {provider.name}
         </span>
-        <h3 className='text-[var(--text-primary)] text-lg leading-tight tracking-[-0.01em]'>
+        <h2 className='text-[var(--text-primary)] text-lg leading-tight tracking-[-0.01em]'>
           {model.displayName}
-        </h3>
+        </h2>
         <p className='line-clamp-2 text-[var(--text-muted)] text-sm leading-[150%]'>
           {model.summary}
         </p>
diff --git a/apps/sim/app/(landing)/models/components/model-primitives/featured-provider-card.tsx b/apps/sim/app/(landing)/models/components/model-primitives/featured-provider-card.tsx
index f96c31762b0..02110855f76 100644
--- a/apps/sim/app/(landing)/models/components/model-primitives/featured-provider-card.tsx
+++ b/apps/sim/app/(landing)/models/components/model-primitives/featured-provider-card.tsx
@@ -10,9 +10,9 @@ export function FeaturedProviderCard({ provider }: { provider: CatalogProvider }
     >
       <ProviderIcon provider={provider} className='size-10 rounded-xl' iconClassName='size-5' />
       <div className='flex flex-col gap-2'>
-        <h3 className='text-[var(--text-primary)] text-lg leading-tight tracking-[-0.01em]'>
+        <h2 className='text-[var(--text-primary)] text-lg leading-tight tracking-[-0.01em]'>
           {provider.name}
-        </h3>
+        </h2>
         <p className='line-clamp-2 text-[var(--text-muted)] text-sm leading-[150%]'>
           {provider.description}
         </p>
diff --git a/apps/sim/app/(landing)/models/components/model-primitives/provider-icon.tsx b/apps/sim/app/(landing)/models/components/model-primitives/provider-icon.tsx
index f11ae7387e9..0f435bd96fd 100644
--- a/apps/sim/app/(landing)/models/components/model-primitives/provider-icon.tsx
+++ b/apps/sim/app/(landing)/models/components/model-primitives/provider-icon.tsx
@@ -14,6 +14,7 @@ export function ProviderIcon({
 
   return (
     <span
+      aria-hidden='true'
       className={cn(
         'flex items-center justify-center border border-[var(--border-1)] bg-[var(--bg)]',
         className
diff --git a/apps/sim/app/(landing)/platform/components/platform-explorer/index.ts b/apps/sim/app/(landing)/platform/components/platform-explorer/index.ts
new file mode 100644
index 00000000000..b98fcc92075
--- /dev/null
+++ b/apps/sim/app/(landing)/platform/components/platform-explorer/index.ts
@@ -0,0 +1 @@
+export { PlatformExplorer } from './platform-explorer'
diff --git a/apps/sim/app/(landing)/platform/components/platform-explorer/platform-explorer.tsx b/apps/sim/app/(landing)/platform/components/platform-explorer/platform-explorer.tsx
new file mode 100644
index 00000000000..254d362c6ec
--- /dev/null
+++ b/apps/sim/app/(landing)/platform/components/platform-explorer/platform-explorer.tsx
@@ -0,0 +1,66 @@
+'use client'
+
+import { useId, useState } from 'react'
+import { Chip } from '@sim/emcn'
+import { LandingCtaLink } from '@/app/(landing)/components/landing-cta-link'
+import { EdgeFade } from '@/app/(landing)/components/shared/edge-fade'
+import { ProductHeroPreview } from '@/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-hero-preview'
+
+const PRODUCTS = [
+  { id: 'workflows', label: 'Workflows', href: '/workflows' },
+  { id: 'knowledge', label: 'Knowledge Base', href: '/knowledge' },
+  { id: 'files', label: 'Files', href: '/files' },
+  { id: 'tables', label: 'Tables', href: '/tables' },
+  { id: 'logs', label: 'Logs', href: '/logs' },
+  { id: 'enterprise', label: 'Enterprise', href: '/enterprise' },
+] as const
+
+type ProductId = (typeof PRODUCTS)[number]['id']
+
+/** A switchable, open product stage reuses the navigation's actual UI previews. */
+export function PlatformExplorer() {
+  const previewId = useId()
+  const [selectedId, setSelectedId] = useState<ProductId>('workflows')
+  const selected = PRODUCTS.find((product) => product.id === selectedId) ?? PRODUCTS[0]
+
+  return (
+    <div data-platform-explorer className='absolute inset-0 bg-[var(--bg)]'>
+      <div
+        role='group'
+        aria-label='Choose a product preview'
+        className='absolute inset-x-0 top-7 z-10 overflow-x-auto px-7 pb-2 max-sm:top-3'
+      >
+        <div className='mx-auto flex w-max items-center gap-2'>
+          {PRODUCTS.map((product) => (
+            <Chip
+              key={product.id}
+              active={selectedId === product.id}
+              aria-pressed={selectedId === product.id}
+              aria-controls={previewId}
+              onClick={() => setSelectedId(product.id)}
+            >
+              {product.label}
+            </Chip>
+          ))}
+        </div>
+      </div>
+      <div
+        id={previewId}
+        role='region'
+        aria-label={`${selected.label} preview`}
+        className='absolute inset-x-0 top-20 max-sm:top-14'
+      >
+        <ProductHeroPreview key={selectedId} product={selectedId} />
+        <EdgeFade ground='canvas' edges={['bottom']} depth='stage' />
+      </div>
+      <div className='absolute inset-x-7 bottom-6 z-10 flex justify-center max-sm:bottom-3'>
+        <LandingCtaLink href={selected.href} variant='outline' withArrow>
+          Explore {selected.label}
+        </LandingCtaLink>
+      </div>
+      <p role='status' aria-live='polite' className='sr-only'>
+        Showing {selected.label}
+      </p>
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/platform/components/platform-feature-preview/index.ts b/apps/sim/app/(landing)/platform/components/platform-feature-preview/index.ts
new file mode 100644
index 00000000000..5580f0b233e
--- /dev/null
+++ b/apps/sim/app/(landing)/platform/components/platform-feature-preview/index.ts
@@ -0,0 +1 @@
+export { PlatformFeaturePreview } from './platform-feature-preview'
diff --git a/apps/sim/app/(landing)/platform/components/platform-feature-preview/platform-feature-preview.tsx b/apps/sim/app/(landing)/platform/components/platform-feature-preview/platform-feature-preview.tsx
new file mode 100644
index 00000000000..44354337205
--- /dev/null
+++ b/apps/sim/app/(landing)/platform/components/platform-feature-preview/platform-feature-preview.tsx
@@ -0,0 +1,17 @@
+'use client'
+
+import { EnterpriseMenuPreview } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/enterprise-menu-preview'
+import { KnowledgeMenuPreview } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/knowledge-menu-preview'
+
+interface PlatformFeaturePreviewProps {
+  product: 'knowledge' | 'enterprise'
+}
+
+/** Keeps native controls and their icon props inside the client preview boundary. */
+export function PlatformFeaturePreview({ product }: PlatformFeaturePreviewProps) {
+  return product === 'knowledge' ? (
+    <KnowledgeMenuPreview layout='hero' />
+  ) : (
+    <EnterpriseMenuPreview layout='hero' />
+  )
+}
diff --git a/apps/sim/app/(landing)/platform/page.tsx b/apps/sim/app/(landing)/platform/page.tsx
new file mode 100644
index 00000000000..70e71985a2e
--- /dev/null
+++ b/apps/sim/app/(landing)/platform/page.tsx
@@ -0,0 +1,16 @@
+import { buildLandingMetadata } from '@/lib/landing/seo'
+import Platform, { PLATFORM_PAGE_DESCRIPTION } from '@/app/(landing)/platform/platform'
+
+export const revalidate = 3600
+
+export const metadata = buildLandingMetadata({
+  title: 'AI Workspace for Teams | Platform Overview | Sim',
+  description: PLATFORM_PAGE_DESCRIPTION,
+  path: '/platform',
+  keywords:
+    'AI workspace, AI agents, enterprise AI, visual workflow builder, knowledge base, agent files, agent tables, execution logs, open-source AI workspace',
+})
+
+export default function Page() {
+  return <Platform />
+}
diff --git a/apps/sim/app/(landing)/platform/platform.tsx b/apps/sim/app/(landing)/platform/platform.tsx
new file mode 100644
index 00000000000..fff4bd37c93
--- /dev/null
+++ b/apps/sim/app/(landing)/platform/platform.tsx
@@ -0,0 +1,58 @@
+import {
+  SolutionsPage,
+  type SolutionsProductPageConfig,
+} from '@/app/(landing)/components/solutions-page'
+import { ProductHeroPreview } from '@/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-hero-preview'
+import { PlatformExplorer } from '@/app/(landing)/platform/components/platform-explorer'
+import { PlatformFeaturePreview } from '@/app/(landing)/platform/components/platform-feature-preview'
+
+/** Shared description for page metadata and structured data. */
+export const PLATFORM_PAGE_DESCRIPTION =
+  'Build, deploy, and manage AI agents in Sim. Workflows, Knowledge Base, Files, Tables, and Logs share one AI workspace with controls for your team.'
+
+const PLATFORM_CONFIG: SolutionsProductPageConfig = {
+  module: 'Platform',
+  path: '/platform',
+  seoDescription: PLATFORM_PAGE_DESCRIPTION,
+  hero: {
+    eyebrow: 'Platform',
+    heading: 'One AI workspace for every agent.',
+    description:
+      'Build AI agents, connect company knowledge, and follow every run. All together in Sim.',
+    summary:
+      'Sim is the open-source AI workspace where teams build, deploy, and manage AI agents. Workflows connects models and tools, Knowledge Base supplies source context, Files and Tables hold shared data, and Logs shows each execution. Enterprise adds controls for team access, usage, and deployment.',
+    visual: <ProductHeroPreview product='overview' />,
+  },
+  features: [
+    {
+      id: 'explore',
+      label: 'Explore the workspace',
+      title: 'Build, run, and govern. Together.',
+      description:
+        'Explore Workflows, Knowledge Base, Files, Tables, Logs, and Enterprise in one connected workspace.',
+      visual: <PlatformExplorer />,
+    },
+    {
+      id: 'shared-context',
+      label: 'Shared context',
+      title: 'Your company knowledge, connected.',
+      description:
+        'Give agents a shared source of context in Sim. Connect documents, retrieve passages, and keep the source in view.',
+      visual: <PlatformFeaturePreview product='knowledge' />,
+      cta: { label: 'Explore Knowledge Base', href: '/knowledge' },
+    },
+    {
+      id: 'governance',
+      label: 'Workspace governance',
+      title: 'Room to build. Controls to scale.',
+      description:
+        'Manage members, roles, and usage in Sim as more teams bring agents into their work.',
+      visual: <PlatformFeaturePreview product='enterprise' />,
+      cta: { label: 'Explore Enterprise', href: '/enterprise' },
+    },
+  ],
+}
+
+export default function Platform() {
+  return <SolutionsPage config={PLATFORM_CONFIG} />
+}
diff --git a/apps/sim/app/(landing)/pricing/components/pricing-card/pricing-card.tsx b/apps/sim/app/(landing)/pricing/components/pricing-card/pricing-card.tsx
index f81a439520e..e3996294e2f 100644
--- a/apps/sim/app/(landing)/pricing/components/pricing-card/pricing-card.tsx
+++ b/apps/sim/app/(landing)/pricing/components/pricing-card/pricing-card.tsx
@@ -99,7 +99,7 @@ export function PricingCard({
             <span className='text-[20px] text-[var(--text-primary)] tabular-nums'>{price}</span>
             {discountLabel && <ChipTag variant='mono'>{discountLabel}</ChipTag>}
           </div>
-          <p className='text-[var(--text-muted)] text-base'>{priceSubtext ?? ' '}</p>
+          <p className='text-[var(--text-secondary)] text-base'>{priceSubtext ?? ' '}</p>
         </div>
 
         <ChipLink href={cta.href} variant={cta.variant} fullWidth className='w-full justify-center'>
diff --git a/apps/sim/app/(landing)/pricing/components/pricing-structured-data/pricing-structured-data.tsx b/apps/sim/app/(landing)/pricing/components/pricing-structured-data/pricing-structured-data.tsx
index 7c4ff0014ac..016d1f9cb79 100644
--- a/apps/sim/app/(landing)/pricing/components/pricing-structured-data/pricing-structured-data.tsx
+++ b/apps/sim/app/(landing)/pricing/components/pricing-structured-data/pricing-structured-data.tsx
@@ -38,7 +38,7 @@ const PRICING_JSON_LD = {
       '@id': `${PAGE_URL}#application`,
       name: 'Sim',
       description:
-        'Sim is the open-source AI workspace where teams build, deploy, and manage AI agents, connecting 1,000+ integrations and every major LLM.',
+        'Sim is the open-source AI workspace where teams build, deploy, and manage AI agents, connecting hundreds of integrations and every major LLM.',
       applicationCategory: 'BusinessApplication',
       operatingSystem: 'Web',
       url: SITE_URL,
diff --git a/apps/sim/app/(landing)/pricing/pricing.tsx b/apps/sim/app/(landing)/pricing/pricing.tsx
index 2510b4d7929..6df741bc4af 100644
--- a/apps/sim/app/(landing)/pricing/pricing.tsx
+++ b/apps/sim/app/(landing)/pricing/pricing.tsx
@@ -6,7 +6,7 @@ import { PricingStructuredData } from '@/app/(landing)/pricing/components/pricin
  * names Sim, the AI workspace, AI agents, and every plan tier.
  */
 const GEO_SUMMARY =
-  'Sim is the open-source AI workspace where teams build, deploy, and manage AI agents. Pricing scales across four plans: Free to start, Pro for growing teams, Max for scaling businesses, and Enterprise for large organizations, each connecting 1,000+ integrations and every major LLM.'
+  'Sim is the open-source AI workspace where teams build, deploy, and manage AI agents. Pricing scales across four plans: Free to start, Pro for growing teams, Max for scaling businesses, and Enterprise for large organizations, each connecting hundreds of integrations and every major LLM.'
 
 /** Server-rendered heading slot handed to the {@link PricingPlans} client island. */
 const PRICING_HEADING = (
@@ -51,7 +51,7 @@ export default function Pricing() {
       <section
         id='pricing'
         aria-labelledby='pricing-heading'
-        className='mx-auto flex w-full max-w-[1460px] flex-col gap-7 px-20 pt-8 max-sm:px-5 max-lg:px-8'
+        className='mx-auto flex w-full max-w-[1728px] flex-col gap-7 px-10 pt-8 max-md:px-7 max-lg:px-8 max-xl:px-9'
       >
         <PricingPlans heading={PRICING_HEADING} />
       </section>
diff --git a/apps/sim/app/(landing)/solutions/compliance/compliance.tsx b/apps/sim/app/(landing)/solutions/compliance/compliance.tsx
index f99c3ac6c00..1fa56c78384 100644
--- a/apps/sim/app/(landing)/solutions/compliance/compliance.tsx
+++ b/apps/sim/app/(landing)/solutions/compliance/compliance.tsx
@@ -37,9 +37,9 @@ const COMPLIANCE_CONFIG: SolutionsPageConfig = {
     eyebrow: 'Compliance',
     heading: 'Automate evidence, control checks, and audit reports with AI agents in Sim.',
     description:
-      'Sim is the open-source AI workspace where compliance teams build AI agents for evidence collection and control monitoring. Stay audit-ready year-round, across 1,000+ integrations.',
+      'Sim is the open-source AI workspace where compliance teams build AI agents for evidence collection and control monitoring. Stay audit-ready year-round, across hundreds of integrations.',
     summary:
-      'Sim is the open-source AI workspace where compliance teams build, deploy, and manage AI agents for evidence collection, control monitoring, and audit reports. Agents keep the organization audit-ready year-round across 1,000+ integrations.',
+      'Sim is the open-source AI workspace where compliance teams build, deploy, and manage AI agents for evidence collection, control monitoring, and audit reports. Agents keep the organization audit-ready year-round across hundreds of integrations.',
     visual: (
       <PlatformHeroVisual>
         <ComplianceHeroLoop />
diff --git a/apps/sim/app/(landing)/solutions/engineering/engineering.tsx b/apps/sim/app/(landing)/solutions/engineering/engineering.tsx
index c143859cdc6..4723cc56a17 100644
--- a/apps/sim/app/(landing)/solutions/engineering/engineering.tsx
+++ b/apps/sim/app/(landing)/solutions/engineering/engineering.tsx
@@ -37,9 +37,9 @@ const ENGINEERING_CONFIG: SolutionsPageConfig = {
     eyebrow: 'Engineering',
     heading: 'Automate code review, on-call, and docs with AI agents in Sim.',
     description:
-      'Sim is the open-source AI workspace where engineering teams build AI agents for code review, on-call, and docs. Agents wire into GitHub, CI/CD, and 1,000+ integrations across the software lifecycle.',
+      'Sim is the open-source AI workspace where engineering teams build AI agents for code review, on-call, and docs. Agents wire into GitHub, CI/CD, and hundreds of integrations across the software lifecycle.',
     summary:
-      'Sim is the open-source AI workspace where engineering teams build, deploy, and manage AI agents for code review, on-call triage, and documentation. Agents wire into GitHub, CI/CD, and 1,000+ integrations across the software lifecycle.',
+      'Sim is the open-source AI workspace where engineering teams build, deploy, and manage AI agents for code review, on-call triage, and documentation. Agents wire into GitHub, CI/CD, and hundreds of integrations across the software lifecycle.',
     visual: (
       <PlatformHeroVisual>
         <EngineeringHeroLoop />
diff --git a/apps/sim/app/(landing)/solutions/finance/finance.tsx b/apps/sim/app/(landing)/solutions/finance/finance.tsx
index edfea0f4614..59706d608c5 100644
--- a/apps/sim/app/(landing)/solutions/finance/finance.tsx
+++ b/apps/sim/app/(landing)/solutions/finance/finance.tsx
@@ -38,7 +38,7 @@ const FINANCE_CONFIG: SolutionsPageConfig = {
     description:
       'Sim is the open-source AI workspace where finance teams build AI agents for invoice processing, reconciliation, and close. Human approvals, anomaly detection, and full audit trails guard every run.',
     summary:
-      'Sim is the open-source AI workspace where finance teams build, deploy, and manage AI agents for invoice processing, reconciliation, and financial reporting. Agents run with human approvals, anomaly detection, and full audit trails across 1,000+ integrations.',
+      'Sim is the open-source AI workspace where finance teams build, deploy, and manage AI agents for invoice processing, reconciliation, and financial reporting. Agents run with human approvals, anomaly detection, and full audit trails across hundreds of integrations.',
     visual: (
       <PlatformHeroVisual>
         <FinanceHeroLoop />
diff --git a/apps/sim/app/(landing)/solutions/hr/hr.tsx b/apps/sim/app/(landing)/solutions/hr/hr.tsx
index c5653af28eb..137269ffa54 100644
--- a/apps/sim/app/(landing)/solutions/hr/hr.tsx
+++ b/apps/sim/app/(landing)/solutions/hr/hr.tsx
@@ -38,9 +38,9 @@ const HR_CONFIG: SolutionsPageConfig = {
     eyebrow: 'HR',
     heading: 'Automate onboarding, employee questions, and approvals with AI agents in Sim.',
     description:
-      'Sim is the open-source AI workspace where HR teams build AI agents for onboarding, employee questions, and approvals. Agents wire into your HRIS and 1,000+ integrations to keep people operations moving.',
+      'Sim is the open-source AI workspace where HR teams build AI agents for onboarding, employee questions, and approvals. Agents wire into your HRIS and hundreds of integrations to keep people operations moving.',
     summary:
-      'Sim is the open-source AI workspace where HR teams build, deploy, and manage AI agents for onboarding, employee questions, and approvals. Agents connect your HRIS and 1,000+ integrations so people operations keep moving.',
+      'Sim is the open-source AI workspace where HR teams build, deploy, and manage AI agents for onboarding, employee questions, and approvals. Agents connect your HRIS and hundreds of integrations so people operations keep moving.',
     visual: (
       <PlatformHeroVisual>
         <HrHeroLoop />
diff --git a/apps/sim/app/(landing)/solutions/it/it.tsx b/apps/sim/app/(landing)/solutions/it/it.tsx
index a6ec5fa1780..f7032917587 100644
--- a/apps/sim/app/(landing)/solutions/it/it.tsx
+++ b/apps/sim/app/(landing)/solutions/it/it.tsx
@@ -37,9 +37,9 @@ const IT_CONFIG: SolutionsPageConfig = {
     eyebrow: 'IT',
     heading: 'Automate ticket triage, access, and monitoring with AI agents in Sim.',
     description:
-      'Sim is the open-source AI workspace where IT teams build AI agents for ticket triage, access, and monitoring. Agents run with governance, access controls, and audit trails across 1,000+ integrations.',
+      'Sim is the open-source AI workspace where IT teams build AI agents for ticket triage, access, and monitoring. Agents run with governance, access controls, and audit trails across hundreds of integrations.',
     summary:
-      'Sim is the open-source AI workspace where IT teams build, deploy, and manage AI agents for ticket triage, access provisioning, and infrastructure monitoring. Agents run with IT-grade governance and audit trails across 1,000+ integrations and every major LLM.',
+      'Sim is the open-source AI workspace where IT teams build, deploy, and manage AI agents for ticket triage, access provisioning, and infrastructure monitoring. Agents run with IT-grade governance and audit trails across hundreds of integrations and every major LLM.',
     visual: (
       <PlatformHeroVisual>
         <ItHeroLoop />
diff --git a/apps/sim/app/(landing)/solutions/sales/sales.tsx b/apps/sim/app/(landing)/solutions/sales/sales.tsx
index 7428239b833..b46a21647fd 100644
--- a/apps/sim/app/(landing)/solutions/sales/sales.tsx
+++ b/apps/sim/app/(landing)/solutions/sales/sales.tsx
@@ -39,9 +39,9 @@ const SALES_CONFIG: SolutionsPageConfig = {
     eyebrow: 'Sales',
     heading: 'Automate lead research, outreach, and CRM updates with AI agents in Sim.',
     description:
-      'Sim is the open-source AI workspace where sales teams build AI agents for lead research, outreach, and CRM updates. Agents wire into Salesforce, HubSpot, and 1,000+ integrations to keep the pipeline current.',
+      'Sim is the open-source AI workspace where sales teams build AI agents for lead research, outreach, and CRM updates. Agents wire into Salesforce, HubSpot, and hundreds of integrations to keep the pipeline current.',
     summary:
-      'Sim is the open-source AI workspace where sales teams build, deploy, and manage AI agents for lead research, personalized outreach, and CRM updates. Agents wire into Salesforce, HubSpot, and 1,000+ integrations so the pipeline stays current.',
+      'Sim is the open-source AI workspace where sales teams build, deploy, and manage AI agents for lead research, personalized outreach, and CRM updates. Agents wire into Salesforce, HubSpot, and hundreds of integrations so the pipeline stays current.',
     visual: (
       <PlatformHeroVisual>
         <SalesHeroLoop />
diff --git a/apps/sim/app/(landing)/tables/components/feature-graphics/enrichment-fill-graphic.module.css b/apps/sim/app/(landing)/tables/components/feature-graphics/enrichment-fill-graphic.module.css
deleted file mode 100644
index c2359231850..00000000000
--- a/apps/sim/app/(landing)/tables/components/feature-graphics/enrichment-fill-graphic.module.css
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * The EnrichmentFillGraphic's motion: each found value fades up into its
- * empty cell one after another - the audit tile's one-shot settle, never
- * re-played - so the ledger reads as an enrichment pass completing the
- * row. Under prefers-reduced-motion the values render fully settled.
- */
-
-.value0,
-.value1,
-.value2,
-.value3 {
-  animation: enrichment-value-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
-}
-
-.value0 {
-  animation-delay: 0.45s;
-}
-
-.value1 {
-  animation-delay: 0.95s;
-}
-
-.value2 {
-  animation-delay: 1.45s;
-}
-
-.value3 {
-  animation-delay: 1.95s;
-}
-
-@keyframes enrichment-value-in {
-  from {
-    opacity: 0;
-    transform: translateY(3px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .value0,
-  .value1,
-  .value2,
-  .value3 {
-    animation: none;
-  }
-}
diff --git a/apps/sim/app/(landing)/tables/components/feature-graphics/enrichment-fill-graphic.tsx b/apps/sim/app/(landing)/tables/components/feature-graphics/enrichment-fill-graphic.tsx
deleted file mode 100644
index 185c5a9ff55..00000000000
--- a/apps/sim/app/(landing)/tables/components/feature-graphics/enrichment-fill-graphic.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { ChipTag, cn } from '@sim/emcn'
-import { FeatureGraphicShell } from '@/app/(landing)/enterprise/components/feature-graphics'
-import styles from '@/app/(landing)/tables/components/feature-graphics/enrichment-fill-graphic.module.css'
-
-interface EnrichmentRowDef {
-  /** The enrichment's column label, matching Sim's built-in enrichments. */
-  label: string
-  /** The found value the pass writes into the cell. */
-  value: string
-  /** Value treatment: `mono` for machine-shaped values, `strong` for names. */
-  variant: 'mono' | 'strong'
-}
-
-/**
- * One lead's empty cells being completed, drawn from Sim's real enrichment
- * catalog (work email, phone number, company domain, company info) so the
- * ledger reads as the product's own enrichment pass.
- */
-const ENRICHMENT_ROWS: readonly EnrichmentRowDef[] = [
-  { label: 'Company domain', value: 'brightside.io', variant: 'mono' },
-  { label: 'Work email', value: 'jonas@brightside.io', variant: 'mono' },
-  { label: 'Phone number', value: '+1 (303) 555-0148', variant: 'mono' },
-  { label: 'Company info', value: 'SaaS · 120 employees', variant: 'strong' },
-] as const
-
-/** Per-value fill classes - the stagger order is baked into each class's delay. */
-const VALUE_STEP_CLASSES = [styles.value0, styles.value1, styles.value2, styles.value3] as const
-
-/**
- * Enrichments told as a frameless key-value ledger (the run-monitoring
- * tile's composition, which shares the page): a small "Enrichments" header
- * with a quiet `Auto-run` mono ChipTag (fill stepped up to `--surface-6`
- * so the pill stays legible on the grey ground) names the surface, and a
- * "leads · Jonas Weber" attribution line pins the pass to one record.
- * Below, each of the four rows pairs an enrichment column label with the
- * value the pass found - the labels are Sim's real enrichment catalog
- * (company domain, work email, phone number, company info) - as airy rows
- * ruled by quiet 1px `--border-1` hairlines, values in mono or the
- * stronger sans ink.
- *
- * The found values fade up into their cells one after another (from
- * `enrichment-fill-graphic.module.css`, the audit tile's one-shot settle)
- * so the ledger reads as the pass completing the row - never re-played.
- * Under `prefers-reduced-motion` the values render fully settled.
- *
- * The feature tile's visual slot bleeds `2rem` right (`1.5rem` under
- * `max-lg`) but not left, so this centered vignette adds matching right
- * padding to land on the tile's visible center instead of the bled slot's
- * center.
- */
-export function EnrichmentFillGraphic() {
-  return (
-    <FeatureGraphicShell>
-      <div
-        aria-hidden='true'
-        className='absolute inset-0 flex items-center justify-center pr-8 max-lg:pr-6'
-      >
-        <div className='w-full max-w-[312px] sm:max-lg:[@container(min-width:500px)]:max-w-[400px]'>
-          <div className='mb-1 flex items-center justify-between gap-2'>
-            <span className='min-w-0 truncate text-[var(--text-primary)] text-base'>
-              Enrichments
-            </span>
-            <ChipTag variant='mono' className='bg-[var(--surface-6)]'>
-              Auto-run
-            </ChipTag>
-          </div>
-          <span className='block text-[var(--text-muted)] text-caption'>leads · Jonas Weber</span>
-
-          <div className='mt-2'>
-            {ENRICHMENT_ROWS.map((row, index) => (
-              <div
-                key={row.label}
-                className={cn(
-                  'flex h-10 items-center justify-between gap-3',
-                  index > 0 && 'border-[var(--border-1)] border-t'
-                )}
-              >
-                <span className='shrink-0 text-[var(--text-muted)] text-caption'>{row.label}</span>
-                <span
-                  className={cn(
-                    'truncate',
-                    row.variant === 'mono'
-                      ? 'font-mono text-[var(--text-secondary)] text-caption'
-                      : 'text-[var(--text-primary)] text-caption',
-                    VALUE_STEP_CLASSES[index]
-                  )}
-                >
-                  {row.value}
-                </span>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </FeatureGraphicShell>
-  )
-}
diff --git a/apps/sim/app/(landing)/tables/components/feature-graphics/index.ts b/apps/sim/app/(landing)/tables/components/feature-graphics/index.ts
index 7ee1bc1f48d..3cbea53b088 100644
--- a/apps/sim/app/(landing)/tables/components/feature-graphics/index.ts
+++ b/apps/sim/app/(landing)/tables/components/feature-graphics/index.ts
@@ -1,3 +1 @@
-export { EnrichmentFillGraphic } from './enrichment-fill-graphic'
 export { TableGridGraphic } from './table-grid-graphic'
-export { TableQueryGraphic } from './table-query-graphic'
diff --git a/apps/sim/app/(landing)/tables/components/feature-graphics/table-grid-graphic.tsx b/apps/sim/app/(landing)/tables/components/feature-graphics/table-grid-graphic.tsx
index 43eabce5476..20dc1f035ce 100644
--- a/apps/sim/app/(landing)/tables/components/feature-graphics/table-grid-graphic.tsx
+++ b/apps/sim/app/(landing)/tables/components/feature-graphics/table-grid-graphic.tsx
@@ -1,5 +1,6 @@
 import { cn } from '@sim/emcn'
 import { Table, TypeBoolean, TypeText } from '@sim/emcn/icons'
+import { LANDING_STAGE_WINDOW_RADIUS } from '@/app/(landing)/components/landing-layout'
 import { FeatureGraphicShell } from '@/app/(landing)/enterprise/components/feature-graphics'
 import styles from '@/app/(landing)/tables/components/feature-graphics/table-grid-graphic.module.css'
 
@@ -8,19 +9,16 @@ interface GridColumnDef {
   label: string
   /** Header type icon - text or boolean, per the real editor's headers. */
   type: 'text' | 'boolean'
-  /** Tailwind width class in the window's fixed geometry. */
-  widthClass: string
 }
 
 /**
  * The Leads grid's cropped schema - the identity column plus two of the
- * fields agents keep current, with the boolean column bleeding off the
- * window's cropped right edge.
+ * fields agents keep current.
  */
 const COLUMNS: readonly GridColumnDef[] = [
-  { label: 'Name', type: 'text', widthClass: 'w-[128px]' },
-  { label: 'Company', type: 'text', widthClass: 'w-[118px]' },
-  { label: 'Qualified', type: 'boolean', widthClass: 'flex-1' },
+  { label: 'Name', type: 'text' },
+  { label: 'Company', type: 'text' },
+  { label: 'Qualified', type: 'boolean' },
 ] as const
 
 interface GridRowDef {
@@ -37,20 +35,23 @@ const ROWS: readonly GridRowDef[] = [
   { cells: ['Eva Chen', 'Design IO', false] },
 ] as const
 
+/** Empty grid rows that fill the portrait window's leftover height. */
+const EMPTY_ROW_COUNT = 6
+
 /** Per-row stamp-in classes - the stagger order is baked into each class's delay. */
 const ROW_STEP_CLASSES = [styles.row0, styles.row1, styles.row2, styles.row3, styles.row4] as const
 
 /**
- * The Tables grid told inside a cropped product window: the window keeps
- * the dark tiles' slot geometry (`top-5`, `left-0`, bleeding off the right
- * and bottom edges, `rounded-tl-xl`) but wears the light tiles' card
- * chrome - `--white` fill, 1px `--border-1` hairline, `shadow-xs` - so the
- * grid reads as the workspace's own editor. Its `h-12` title bar pairs the
- * `Table` icon (in a hairline `size-6` icon box, the lifecycle header's
- * treatment) with the `Leads` table name over a hairline rule, and the
- * grid below is the landing Tables preview's exact cell vocabulary: typed
- * column headers (`TypeText`/`TypeBoolean` icons), hairline-ruled cells,
- * the boolean column rendered as quiet check marks and dashes.
+ * The Tables grid told inside a product window framed on all sides, wearing
+ * the light tiles' card chrome - `--white` fill, 1px `--border` hairline,
+ * `shadow-xs` - so the grid reads as the workspace's own editor. Its `h-12`
+ * title bar pairs the `Table` icon (in a hairline `size-6` icon box) with
+ * the `Leads` table name over a hairline
+ * rule, and the grid below is the landing Tables preview's exact cell
+ * vocabulary: typed column headers (`TypeText`/`TypeBoolean` icons),
+ * hairline-ruled cells, the boolean column rendered as quiet check marks and
+ * dashes. Columns size to the stage and leftover height fills with empty grid
+ * rows so the editor reads at the tall crop.
  *
  * The record rows stamp in top to bottom once (from
  * `table-grid-graphic.module.css`, the audit tile's one-shot settle) - an
@@ -59,28 +60,28 @@ const ROW_STEP_CLASSES = [styles.row0, styles.row1, styles.row2, styles.row3, st
  */
 export function TableGridGraphic() {
   return (
-    <FeatureGraphicShell>
+    <FeatureGraphicShell variant='portrait'>
       <div
         aria-hidden='true'
-        className='absolute top-5 right-0 bottom-0 left-0 overflow-hidden rounded-tl-xl border-[var(--border-1)] border-t border-l bg-[var(--white)] shadow-xs'
+        className={cn(
+          'absolute inset-[10px] overflow-hidden border border-[var(--border)] bg-[var(--white)] shadow-xs dark:bg-[var(--surface-4)]',
+          LANDING_STAGE_WINDOW_RADIUS
+        )}
       >
-        <div className='flex h-12 items-center gap-2 border-[var(--border-1)] border-b px-4'>
-          <span className='flex size-6 items-center justify-center rounded-md border border-[var(--border-1)]'>
+        <div className='flex h-12 items-center gap-2 border-[var(--border)] border-b px-4'>
+          <span className='flex size-6 items-center justify-center rounded-md border border-[var(--border)]'>
             <Table className='size-[14px] text-[var(--text-icon)]' />
           </span>
           <span className='text-[var(--text-primary)] text-base'>Leads</span>
         </div>
 
-        <div className='flex border-[var(--border-1)] border-b'>
+        <div className='flex border-[var(--border)] border-b'>
           {COLUMNS.map((column) => {
             const Icon = column.type === 'boolean' ? TypeBoolean : TypeText
             return (
               <div
                 key={column.label}
-                className={cn(
-                  'flex shrink-0 items-center gap-1.5 border-[var(--border-1)] border-r px-2.5 py-2 last:border-r-0',
-                  column.widthClass
-                )}
+                className='flex min-w-0 flex-1 items-center gap-1.5 border-[var(--border)] border-r px-2.5 py-2 last:border-r-0'
               >
                 <Icon className='size-3 shrink-0 text-[var(--text-icon)]' />
                 <span className='truncate text-[var(--text-primary)] text-caption'>
@@ -94,7 +95,7 @@ export function TableGridGraphic() {
         {ROWS.map((row, index) => (
           <div
             key={row.cells[0]}
-            className={cn('flex border-[var(--border-1)] border-b', ROW_STEP_CLASSES[index])}
+            className={cn('flex border-[var(--border)] border-b', ROW_STEP_CLASSES[index])}
           >
             {COLUMNS.map((column, columnIndex) => {
               const value = row.cells[columnIndex]
@@ -102,9 +103,8 @@ export function TableGridGraphic() {
                 <div
                   key={column.label}
                   className={cn(
-                    'shrink-0 truncate border-[var(--border-1)] border-r px-2.5 py-2 text-caption last:border-r-0',
-                    columnIndex === 0 ? 'text-[var(--text-secondary)]' : 'text-[var(--text-muted)]',
-                    column.widthClass
+                    'min-w-0 flex-1 truncate border-[var(--border)] border-r px-2.5 py-2 text-caption last:border-r-0',
+                    columnIndex === 0 ? 'text-[var(--text-secondary)]' : 'text-[var(--text-muted)]'
                   )}
                 >
                   {typeof value === 'boolean' ? (value ? '✓' : '—') : value}
@@ -113,6 +113,17 @@ export function TableGridGraphic() {
             })}
           </div>
         ))}
+
+        {Array.from({ length: EMPTY_ROW_COUNT }, (_, index) => (
+          <div key={`empty-${index}`} className='flex border-[var(--border)] border-b'>
+            {COLUMNS.map((column) => (
+              <div
+                key={column.label}
+                className='h-9 min-w-0 flex-1 border-[var(--border)] border-r last:border-r-0'
+              />
+            ))}
+          </div>
+        ))}
       </div>
     </FeatureGraphicShell>
   )
diff --git a/apps/sim/app/(landing)/tables/components/feature-graphics/table-query-graphic.tsx b/apps/sim/app/(landing)/tables/components/feature-graphics/table-query-graphic.tsx
deleted file mode 100644
index 1306f100204..00000000000
--- a/apps/sim/app/(landing)/tables/components/feature-graphics/table-query-graphic.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { Table } from '@sim/emcn/icons'
-import {
-  type CodeSegment,
-  CodeWindowGraphic,
-} from '@/app/(landing)/components/shared/code-window-graphic'
-
-/**
- * A `query-leads.ts` excerpt - agent logic reading rows out of the Leads
- * table and writing a result back, the table reached from code.
- */
-const CODE_LINES: readonly CodeSegment[][] = [
-  [
-    { text: 'import', tone: 'muted' },
-    { text: ' ' },
-    { text: '{ tables }', tone: 'primary' },
-    { text: ' ' },
-    { text: 'from', tone: 'muted' },
-    { text: ' ' },
-    { text: "'@sim/sdk'", tone: 'primary' },
-  ],
-  [
-    { text: 'const', tone: 'muted' },
-    { text: ' ' },
-    { text: 'leads', tone: 'primary' },
-    { text: ' ' },
-    { text: '= await', tone: 'muted' },
-    { text: ' ' },
-    { text: 'tables', tone: 'primary' },
-  ],
-  [{ text: "  .query('leads'", tone: 'primary' }, { text: ', {' }],
-  [
-    { text: '    ' },
-    { text: 'where:', tone: 'muted' },
-    { text: ' ' },
-    { text: '{ qualified: true }', tone: 'primary' },
-    { text: ',' },
-  ],
-  [
-    { text: '    ' },
-    { text: 'orderBy:', tone: 'muted' },
-    { text: ' ' },
-    { text: "'created_at'", tone: 'primary' },
-    { text: ',' },
-  ],
-  [{ text: '  })' }],
-] as const
-
-/**
- * Querying tables from agent logic told in the shared
- * {@link CodeWindowGraphic} editor window: the `Table` mark and the
- * `query-leads.ts` filename over an SDK excerpt reading qualified leads
- * out of the Leads table.
- */
-export function TableQueryGraphic() {
-  return (
-    <CodeWindowGraphic
-      icon={<Table className='size-[14px] text-[var(--text-muted-inverse)]' />}
-      filename='query-leads.ts'
-      lines={CODE_LINES}
-    />
-  )
-}
diff --git a/apps/sim/app/(landing)/tables/components/tables-enrichment-preview/index.ts b/apps/sim/app/(landing)/tables/components/tables-enrichment-preview/index.ts
new file mode 100644
index 00000000000..992baf8e7d7
--- /dev/null
+++ b/apps/sim/app/(landing)/tables/components/tables-enrichment-preview/index.ts
@@ -0,0 +1 @@
+export { TablesEnrichmentPreview } from './tables-enrichment-preview'
diff --git a/apps/sim/app/(landing)/tables/components/tables-enrichment-preview/tables-enrichment-preview.tsx b/apps/sim/app/(landing)/tables/components/tables-enrichment-preview/tables-enrichment-preview.tsx
new file mode 100644
index 00000000000..862736b16d7
--- /dev/null
+++ b/apps/sim/app/(landing)/tables/components/tables-enrichment-preview/tables-enrichment-preview.tsx
@@ -0,0 +1,95 @@
+'use client'
+
+import {
+  Badge,
+  Button,
+  ChipCombobox,
+  ChipInput,
+  CollapsibleCard,
+  FieldDivider,
+  Label,
+  OverflowText,
+  Switch,
+} from '@sim/emcn'
+import { ArrowLeft, X } from '@sim/emcn/icons'
+import { noop } from '@sim/utils/helpers'
+
+const OUTPUTS = ['employee count', 'description'] as const
+const DOMAIN_COLUMN = [{ label: 'Domain', value: 'domain' }]
+
+/** The shipped Company Info enrichment's native input and output configuration. */
+export function TablesEnrichmentPreview() {
+  return (
+    <div className='-translate-x-1/2 absolute top-12 left-1/2 w-[360px] max-w-[calc(100%_-_48px)] overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--bg)] text-[var(--text-body)] text-small shadow-xs max-sm:top-8'>
+      <div className='flex min-h-[48px] items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
+        <div className='flex min-w-0 items-center gap-1.5'>
+          <Button
+            variant='ghost'
+            size='sm'
+            className='size-7 flex-none p-1!'
+            aria-label='Back to enrichments'
+          >
+            <ArrowLeft className='size-[14px]' />
+          </Button>
+          <OverflowText label='Company Info' className='text-[var(--text-primary)] text-small' />
+        </div>
+        <Button variant='ghost' size='sm' className='size-7 flex-none p-1!' aria-label='Close'>
+          <X className='size-[14px]' />
+        </Button>
+      </div>
+      <div className='px-2 pt-3 pb-2'>
+        <div className='flex flex-col gap-[9.5px]'>
+          <Label className='pl-0.5'>Inputs</Label>
+          <CollapsibleCard
+            title='Company domain *'
+            badge={
+              <Badge variant='type' size='sm'>
+                string
+              </Badge>
+            }
+            collapsed={false}
+            onToggleCollapse={noop}
+          >
+            <Label className='text-small'>Column</Label>
+            <ChipCombobox
+              className='w-full'
+              options={DOMAIN_COLUMN}
+              value='domain'
+              onChange={noop}
+              searchable
+              searchPlaceholder='Search columns…'
+              dropdownWidth='trigger'
+            />
+          </CollapsibleCard>
+        </div>
+        <FieldDivider />
+        <div className='flex flex-col gap-[9.5px]'>
+          <Label className='pl-0.5'>Output columns</Label>
+          <div className='flex flex-col gap-2'>
+            {OUTPUTS.map((name) => (
+              <CollapsibleCard
+                key={name}
+                title={name}
+                badge={
+                  <Badge variant='type' size='sm'>
+                    string
+                  </Badge>
+                }
+                collapsed={false}
+                onToggleCollapse={noop}
+              >
+                <Label className='text-small'>Column name</Label>
+                <ChipInput value={name} readOnly />
+              </CollapsibleCard>
+            ))}
+          </div>
+        </div>
+        <FieldDivider />
+        <div className='flex items-center justify-between pl-0.5'>
+          <Label>Auto-run</Label>
+          <Switch checked={false} aria-label='Auto-run' />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/tables/components/tables-records-preview/components/lead-record-detail/index.ts b/apps/sim/app/(landing)/tables/components/tables-records-preview/components/lead-record-detail/index.ts
new file mode 100644
index 00000000000..93d0dca7b9a
--- /dev/null
+++ b/apps/sim/app/(landing)/tables/components/tables-records-preview/components/lead-record-detail/index.ts
@@ -0,0 +1 @@
+export { LeadRecordDetail } from './lead-record-detail'
diff --git a/apps/sim/app/(landing)/tables/components/tables-records-preview/components/lead-record-detail/lead-record-detail.tsx b/apps/sim/app/(landing)/tables/components/tables-records-preview/components/lead-record-detail/lead-record-detail.tsx
new file mode 100644
index 00000000000..9eb6378eb52
--- /dev/null
+++ b/apps/sim/app/(landing)/tables/components/tables-records-preview/components/lead-record-detail/lead-record-detail.tsx
@@ -0,0 +1,102 @@
+import { useState } from 'react'
+import {
+  ChipDropdown,
+  ChipModal,
+  ChipModalBody,
+  ChipModalField,
+  ChipModalFooter,
+  ChipModalHeader,
+} from '@sim/emcn'
+import { TagIcon, TypeNumber, TypeText } from '@sim/emcn/icons'
+import type { LeadRecord } from '@/app/(landing)/tables/components/tables-records-preview/data'
+
+interface LeadRecordDetailProps {
+  record: LeadRecord
+  onClose: () => void
+  onSave: (record: LeadRecord) => void
+}
+
+/** Uses the production row-modal's title, field chrome, and Update Row action with local data. */
+export function LeadRecordDetail({ record, onClose, onSave }: LeadRecordDetailProps) {
+  const [draft, setDraft] = useState(record)
+  return (
+    <ChipModal
+      open
+      onOpenChange={(open) => {
+        if (!open) onClose()
+      }}
+      srTitle='Edit Row'
+      size='lg'
+    >
+      <ChipModalHeader onClose={onClose}>Edit Row</ChipModalHeader>
+      <ChipModalBody>
+        <p className='px-2 text-[var(--text-secondary)] text-small'>
+          Update values for Qualified leads
+        </p>
+        <ChipModalField
+          type='input'
+          title={
+            <span className='flex items-center gap-1.5'>
+              <TypeText className='size-[14px]' />
+              Company
+            </span>
+          }
+          value={draft.company}
+          onChange={(company) => setDraft((current) => ({ ...current, company }))}
+        />
+        <ChipModalField
+          type='input'
+          inputType='number'
+          title={
+            <span className='flex items-center gap-1.5'>
+              <TypeNumber className='size-[14px]' />
+              Score
+            </span>
+          }
+          value={String(draft.score)}
+          onChange={(score) => setDraft((current) => ({ ...current, score: Number(score) }))}
+        />
+        <ChipModalField
+          type='custom'
+          title={
+            <span className='flex items-center gap-1.5'>
+              <TagIcon className='size-[14px]' />
+              Status
+            </span>
+          }
+        >
+          <ChipDropdown
+            value={draft.status}
+            options={[
+              { value: 'Qualified', label: 'Qualified' },
+              { value: 'Review', label: 'Review' },
+            ]}
+            onChange={(status) => {
+              if (status === 'Qualified' || status === 'Review')
+                setDraft((current) => ({ ...current, status }))
+            }}
+          />
+        </ChipModalField>
+        <ChipModalField
+          type='input'
+          title={
+            <span className='flex items-center gap-1.5'>
+              <TypeText className='size-[14px]' />
+              Contact
+            </span>
+          }
+          value={draft.contact}
+          onChange={(contact) => setDraft((current) => ({ ...current, contact }))}
+        />
+      </ChipModalBody>
+      <ChipModalFooter
+        onCancel={onClose}
+        primaryAction={{
+          label: 'Update Row',
+          onClick: () => onSave(draft),
+          disabled: !draft.company.trim() || !Number.isFinite(draft.score),
+        }}
+      />
+    </ChipModal>
+  )
+}
diff --git a/apps/sim/app/(landing)/tables/components/tables-records-preview/components/lead-record-list/index.ts b/apps/sim/app/(landing)/tables/components/tables-records-preview/components/lead-record-list/index.ts
new file mode 100644
index 00000000000..f7ab412855d
--- /dev/null
+++ b/apps/sim/app/(landing)/tables/components/tables-records-preview/components/lead-record-list/index.ts
@@ -0,0 +1 @@
+export { LeadRecordList } from './lead-record-list'
diff --git a/apps/sim/app/(landing)/tables/components/tables-records-preview/components/lead-record-list/lead-record-list.tsx b/apps/sim/app/(landing)/tables/components/tables-records-preview/components/lead-record-list/lead-record-list.tsx
new file mode 100644
index 00000000000..3d4fedb1acf
--- /dev/null
+++ b/apps/sim/app/(landing)/tables/components/tables-records-preview/components/lead-record-list/lead-record-list.tsx
@@ -0,0 +1,84 @@
+import { Badge, cn } from '@sim/emcn'
+import { TagIcon, TypeNumber, TypeText } from '@sim/emcn/icons'
+import type { LeadRecord } from '@/app/(landing)/tables/components/tables-records-preview/data'
+
+interface LeadRecordListProps {
+  rows: readonly LeadRecord[]
+  selectedId: string | null
+  onSelect: (id: string, opener: HTMLButtonElement) => void
+  showContact: boolean
+}
+
+const CELL = 'border-[var(--border)] border-r px-2.5 last:border-r-0'
+const COLUMNS = [
+  { name: 'Company', icon: TypeText },
+  { name: 'Score', icon: TypeNumber },
+  { name: 'Status', icon: TagIcon },
+  { name: 'Contact', icon: TypeText },
+] as const
+
+/** Matches TablesMenuPreview's column icons, 34px header, 37px rows, and neutral select chips. */
+export function LeadRecordList({ rows, selectedId, onSelect, showContact }: LeadRecordListProps) {
+  const columns = showContact ? COLUMNS : COLUMNS.slice(0, 3)
+  return (
+    <div className='h-[354px] overflow-auto'>
+      <table className='w-full min-w-[600px] table-fixed border-collapse text-left text-small'>
+        <colgroup>
+          <col className='w-10' />
+          <col className='w-[174px]' />
+          <col className='w-[82px]' />
+          <col className='w-[138px]' />
+          {showContact && <col className='w-[184px]' />}
+        </colgroup>
+        <thead>
+          <tr className='h-[34px] border-[var(--border)] border-b'>
+            <th className={cn(CELL, 'text-center font-normal text-[var(--text-secondary)]')}>#</th>
+            {columns.map(({ name, icon: Icon }) => (
+              <th key={name} className={cn(CELL, 'font-normal')}>
+                <span className='flex items-center gap-1.5'>
+                  <Icon aria-hidden='true' className='size-[14px] text-[var(--text-icon)]' />
+                  {name}
+                </span>
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row, index) => (
+            <tr
+              key={row.id}
+              className={cn(
+                'h-[37px] border-[var(--border)] border-b hover:bg-[var(--surface-hover)]',
+                selectedId === row.id && 'bg-[var(--surface-active)]'
+              )}
+            >
+              <td className={cn(CELL, 'text-center text-[var(--text-secondary)] tabular-nums')}>
+                {index + 1}
+              </td>
+              <td className={CELL}>
+                <button
+                  type='button'
+                  aria-label={`Edit ${row.company} row`}
+                  aria-haspopup='dialog'
+                  onClick={(event) => onSelect(row.id, event.currentTarget)}
+                  className='h-[37px] w-full rounded-sm text-left focus-visible:outline-2 focus-visible:outline-[var(--text-primary)]'
+                >
+                  {row.company}
+                </button>
+              </td>
+              <td className={cn(CELL, 'tabular-nums')}>{row.score}</td>
+              <td className={CELL}>
+                <Badge variant='gray-secondary' size='sm'>
+                  {row.status}
+                </Badge>
+              </td>
+              {showContact && (
+                <td className={cn(CELL, 'truncate text-[var(--text-secondary)]')}>{row.contact}</td>
+              )}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/tables/components/tables-records-preview/data.ts b/apps/sim/app/(landing)/tables/components/tables-records-preview/data.ts
new file mode 100644
index 00000000000..7671a18dfac
--- /dev/null
+++ b/apps/sim/app/(landing)/tables/components/tables-records-preview/data.ts
@@ -0,0 +1,52 @@
+export interface LeadRecord {
+  id: string
+  company: string
+  score: number
+  status: 'Qualified' | 'Review'
+  contact: string
+}
+
+export const ROWS: readonly LeadRecord[] = [
+  {
+    id: 'acme',
+    company: 'Acme Corp',
+    score: 94,
+    status: 'Qualified',
+    contact: 'Alice Johnson',
+  },
+  {
+    id: 'northstar',
+    company: 'Northstar',
+    score: 88,
+    status: 'Qualified',
+    contact: 'Daniel Park',
+  },
+  {
+    id: 'meridian',
+    company: 'Meridian',
+    score: 72,
+    status: 'Review',
+    contact: 'Eva Chen',
+  },
+  {
+    id: 'forma',
+    company: 'Forma',
+    score: 91,
+    status: 'Qualified',
+    contact: 'Sam Rivera',
+  },
+  {
+    id: 'brightwave',
+    company: 'Brightwave',
+    score: 86,
+    status: 'Qualified',
+    contact: 'Morgan Lee',
+  },
+  {
+    id: 'atlas',
+    company: 'Atlas',
+    score: 79,
+    status: 'Review',
+    contact: 'Alex Chen',
+  },
+]
diff --git a/apps/sim/app/(landing)/tables/components/tables-records-preview/index.ts b/apps/sim/app/(landing)/tables/components/tables-records-preview/index.ts
new file mode 100644
index 00000000000..9ef1a6d59ab
--- /dev/null
+++ b/apps/sim/app/(landing)/tables/components/tables-records-preview/index.ts
@@ -0,0 +1 @@
+export { TablesRecordsPreview } from './tables-records-preview'
diff --git a/apps/sim/app/(landing)/tables/components/tables-records-preview/tables-records-preview.tsx b/apps/sim/app/(landing)/tables/components/tables-records-preview/tables-records-preview.tsx
new file mode 100644
index 00000000000..b134303c7cb
--- /dev/null
+++ b/apps/sim/app/(landing)/tables/components/tables-records-preview/tables-records-preview.tsx
@@ -0,0 +1,109 @@
+'use client'
+
+import { useRef, useState } from 'react'
+import {
+  Chip,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@sim/emcn'
+import { Check, ChevronDown, Columns3, ListFilter, Table } from '@sim/emcn/icons'
+import {
+  MenuPreviewHeader,
+  MenuPreviewToolbar,
+} from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-header/menu-preview-header'
+import { EdgeFade } from '@/app/(landing)/components/shared/edge-fade'
+import { usePreviewDialogFocus } from '@/app/(landing)/hooks/use-preview-dialog-focus'
+import { LeadRecordDetail } from '@/app/(landing)/tables/components/tables-records-preview/components/lead-record-detail'
+import { LeadRecordList } from '@/app/(landing)/tables/components/tables-records-preview/components/lead-record-list'
+import {
+  type LeadRecord,
+  ROWS,
+} from '@/app/(landing)/tables/components/tables-records-preview/data'
+
+/** The native ruled Tables grid and Edit Row dialog, backed only by local demo records. */
+export function TablesRecordsPreview() {
+  const filterButtonRef = useRef<HTMLButtonElement>(null)
+  const [rows, setRows] = useState<readonly LeadRecord[]>(ROWS)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [status, setStatus] = useState<LeadRecord['status'] | null>(null)
+  const [showContact, setShowContact] = useState(true)
+  const selected = rows.find((row) => row.id === selectedId)
+  const visibleRows = rows.filter((row) => !status || row.status === status)
+  const dialogOpenerRef = usePreviewDialogFocus(Boolean(selected), filterButtonRef)
+
+  return (
+    <div className='absolute inset-0 isolate overflow-hidden bg-[var(--bg)]'>
+      <div className='-translate-x-1/2 absolute top-20 left-1/2 h-[440px] w-[780px] max-w-[calc(100%_-_48px)] max-sm:top-8 max-sm:h-[410px]'>
+        <div className='h-full overflow-hidden rounded-[10px] border border-[var(--border)] bg-[var(--bg)] text-[var(--text-body)] text-small shadow-xs'>
+          <MenuPreviewHeader
+            icon={Table}
+            title='Qualified leads'
+            actions={`${visibleRows.length} rows`}
+          />
+          <MenuPreviewToolbar>
+            <span aria-hidden='true' inert>
+              <Chip rightIcon={ChevronDown}>All records</Chip>
+            </span>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Chip ref={filterButtonRef} leftIcon={ListFilter} active={status !== null}>
+                  Filter
+                </Chip>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align='start'>
+                <DropdownMenuItem onSelect={() => setStatus(null)} active={status === null}>
+                  All statuses
+                </DropdownMenuItem>
+                {(['Qualified', 'Review'] as const).map((value) => (
+                  <DropdownMenuItem
+                    key={value}
+                    onSelect={() => setStatus(value)}
+                    active={status === value}
+                  >
+                    {value}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <span className='ml-auto'>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Chip leftIcon={Columns3}>Columns</Chip>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align='end'>
+                  <DropdownMenuItem onSelect={() => setShowContact((value) => !value)}>
+                    {showContact && <Check />}Contact
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </span>
+          </MenuPreviewToolbar>
+          <LeadRecordList
+            rows={visibleRows}
+            selectedId={selectedId}
+            onSelect={(id, opener) => {
+              dialogOpenerRef.current = opener
+              setSelectedId(id)
+            }}
+            showContact={showContact}
+          />
+        </div>
+        <EdgeFade ground='canvas' edges={['bottom']} depth='stage' />
+      </div>
+      <EdgeFade ground='canvas' edges={['top', 'left', 'right']} depth='preview' />
+      {selected && (
+        <LeadRecordDetail
+          key={selected.id}
+          record={selected}
+          onClose={() => setSelectedId(null)}
+          onSave={(record) => {
+            setRows((current) => current.map((row) => (row.id === record.id ? record : row)))
+            setSelectedId(null)
+          }}
+        />
+      )}
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/tables/components/tables-workflow-preview/index.ts b/apps/sim/app/(landing)/tables/components/tables-workflow-preview/index.ts
new file mode 100644
index 00000000000..9653f9f30db
--- /dev/null
+++ b/apps/sim/app/(landing)/tables/components/tables-workflow-preview/index.ts
@@ -0,0 +1 @@
+export { TablesWorkflowPreview } from './tables-workflow-preview'
diff --git a/apps/sim/app/(landing)/tables/components/tables-workflow-preview/tables-workflow-preview.tsx b/apps/sim/app/(landing)/tables/components/tables-workflow-preview/tables-workflow-preview.tsx
new file mode 100644
index 00000000000..65da7be872a
--- /dev/null
+++ b/apps/sim/app/(landing)/tables/components/tables-workflow-preview/tables-workflow-preview.tsx
@@ -0,0 +1,43 @@
+'use client'
+
+import { Table as TableIcon } from '@sim/emcn/icons'
+import { AgentIcon } from '@/components/icons'
+import type { BlockDef } from '@/app/(landing)/components/hero/components/hero-visual/workflow-data'
+import { TwoBlockWorkflowPreview } from '@/app/(landing)/components/shared/two-block-workflow-preview/two-block-workflow-preview'
+
+const SCORE: BlockDef = {
+  id: 'tables-score-lead',
+  name: 'Score lead',
+  type: 'agent',
+  typeLabel: 'Agent',
+  icon: AgentIcon,
+  bgColor: 'var(--text-primary)',
+  sentence: {
+    segments: ['Prompt', { subBlockId: 'model', noun: 'a model' }],
+    values: { model: 'GPT-6 Astra' },
+  },
+  rows: [],
+  x: 24,
+  y: 72,
+}
+
+const SAVE: BlockDef = {
+  id: 'tables-save-lead',
+  name: 'Save qualified lead',
+  type: 'table_v2',
+  typeLabel: 'Table',
+  icon: TableIcon,
+  bgColor: '#10B981',
+  sentence: {
+    segments: ['Insert a row into', { subBlockId: 'tableSelector', noun: 'a table' }],
+    values: { tableSelector: 'Qualified leads' },
+  },
+  rows: [],
+  x: 340,
+  y: 180,
+}
+
+/** Production Agent and Table cards, using the Table block's Insert Row sentence. */
+export function TablesWorkflowPreview() {
+  return <TwoBlockWorkflowPreview source={SCORE} target={SAVE} />
+}
diff --git a/apps/sim/app/(landing)/tables/tables.tsx b/apps/sim/app/(landing)/tables/tables.tsx
index 5f16e7420a2..383fd835267 100644
--- a/apps/sim/app/(landing)/tables/tables.tsx
+++ b/apps/sim/app/(landing)/tables/tables.tsx
@@ -1,167 +1,67 @@
 import {
-  PlatformHeroVisual,
   SolutionsPage,
-  type SolutionsPageConfig,
-} from '@/app/(landing)/components'
-import {
-  AuditTrailGraphic,
-  OperationsTeamsGraphic,
-  RunMonitoringGraphic,
-} from '@/app/(landing)/enterprise/components/feature-graphics'
-import {
-  EnrichmentFillGraphic,
-  TableGridGraphic,
-  TableQueryGraphic,
-} from '@/app/(landing)/tables/components/feature-graphics'
-import { TablesHeroLoop } from '@/app/(landing)/tables/components/tables-hero-loop'
+  type SolutionsProductPageConfig,
+} from '@/app/(landing)/components/solutions-page'
+import { ProductHeroPreview } from '@/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-hero-preview'
+import { TablesEnrichmentPreview } from '@/app/(landing)/tables/components/tables-enrichment-preview'
+import { TablesRecordsPreview } from '@/app/(landing)/tables/components/tables-records-preview'
+import { TablesWorkflowPreview } from '@/app/(landing)/tables/components/tables-workflow-preview'
 
-/**
- * Tables platform page - a consumer of {@link SolutionsPage} rendered
- * with the enterprise page's feature-tile treatment.
- *
- * The whole page is one typed {@link SolutionsPageConfig} rendered inside
- * the shared route-group layout chrome: identity (for structured data), a
- * hero, and two rows of three cards. Every visual slot carries a feature
- * graphic in the enterprise design language - three tables-specific
- * vignettes (the cropped Leads grid, the enrichment ledger, and the dark
- * query-window twin of the workflows page's code tile) plus the
- * monitoring panel, switchboard, and audit ledger retold for runs writing
- * rows, data routing into tables, and row-change history.
- *
- * The JSON-LD emitted by {@link SolutionsPage} is structurally identical
- * to the platform page's (`WebPage` + `BreadcrumbList` +
- * `WebApplication`), so the switch to feature tiles is SEO-neutral.
- */
-/** Shared meta + JSON-LD description for the Tables page (one string, zero drift). */
+/** Shared description for page metadata and structured data. */
 export const TABLES_PAGE_DESCRIPTION =
-  'Tables is the AI agent database built into Sim. Store leads, tickets, and invoices as rows agents read and write, and carry state from one run to the next.'
+  'Give AI agents structured data with Sim Tables. Organize records, enrich rows, run workflows from columns, and read or write data between agent runs.'
 
-const TABLES_CONFIG: SolutionsPageConfig = {
+const TABLES_CONFIG: SolutionsProductPageConfig = {
   module: 'Tables',
   path: '/tables',
   seoDescription: TABLES_PAGE_DESCRIPTION,
   hero: {
     eyebrow: 'Tables',
-    heading: 'Give AI agents a database built into Sim.',
-    description:
-      'Tables is the database built into Sim, the open-source AI workspace. Store the records agents read and write, fill empty cells with enrichments, and keep state between runs.',
+    heading: 'Put your data to work with AI agents.',
+    description: 'Organize, enrich, and put structured data to work across every agent run in Sim.',
+    visual: <ProductHeroPreview product='tables' />,
     summary:
-      'Tables is the AI agent database built into Sim, the open-source AI workspace where teams build, deploy, and manage AI agents. Teams store records agents read and write, run enrichments that fill cells automatically, query rows from agent logic, and keep state between runs, all in one workspace.',
-    visual: (
-      <PlatformHeroVisual>
-        <TablesHeroLoop />
-      </PlatformHeroVisual>
-    ),
+      'Sim Tables is the built-in database in the open-source AI workspace where teams build, deploy, and manage AI agents. Teams organize typed records, filter and edit rows, add enrichment and workflow columns, and use Table blocks to query, insert, and update data across agent runs.',
   },
-  rows: [
+  codeExample: {
+    title: 'Work with data from your terminal.',
+    description:
+      'Find your tables and query their rows with the Sim CLI. Use the results in your own scripts and tools.',
+    filename: 'tables.sh',
+    commands: ['sim tables list', 'sim tables rows query \\', '  "$TABLE_ID" --limit 10'],
+  },
+  features: [
     {
       id: 'records',
-      title: 'Give AI agents structured data to act on.',
-      subtitle:
-        'Sim stores the leads, tickets, and invoices agents work with as tables in the same workspace as the agents.',
-      cta: { label: 'Explore Tables', href: '/signup' },
-      cards: [
-        {
-          title: 'Records agents act on',
-          description:
-            'Store leads, tickets, and invoices as rows agents read and write. Sim keeps the data next to the agents that work it.',
-          visual: <TableGridGraphic />,
-        },
-        {
-          title: 'Enrichments fill the blanks',
-          description:
-            'Sim runs enrichments over new rows, finding work emails, phone numbers, and company info, so empty cells fill themselves.',
-          visual: <EnrichmentFillGraphic />,
-        },
-        {
-          title: 'Query from agent logic',
-          description:
-            'Read and write rows from code or any workflow block. Sim treats every table as part of your agent logic.',
-          featureTileTone: 'dark',
-          featureTileDescriptionTone: 'soft',
-          visual: <TableQueryGraphic />,
-        },
-      ],
+      label: 'Structured records',
+      title: 'A working home for your data.',
+      description: 'Filter records, inspect a row, and keep the data your agents use organized.',
+      visual: <TablesRecordsPreview />,
+      cta: { label: 'Explore Tables', href: 'https://docs.sim.ai/tables' },
+    },
+    {
+      id: 'enrich',
+      label: 'Enrichment and workflows',
+      title: 'Fill in the missing context.',
+      description:
+        'Enrich a row or run a workflow to write research, scores, and details back into your table.',
+      visual: <TablesEnrichmentPreview />,
+      cta: {
+        label: 'Explore workflow columns',
+        href: 'https://docs.sim.ai/tables/workflow-columns',
+      },
     },
     {
-      id: 'memory',
-      title: 'Tables are your AI agents’ memory.',
-      subtitle:
-        'Sim carries state between runs. Every run writes rows, every change is recorded, and agents pick up exactly where they left off.',
-      cta: { label: 'See how agents use Tables', href: '/signup' },
-      cards: [
-        {
-          title: 'State between runs',
-          description:
-            'Each run writes its results back to the table, so the next run starts from what Sim already knows.',
-          visual: (
-            <RunMonitoringGraphic
-              fields={[
-                { label: 'Workflow', value: 'Lead enrichment', variant: 'strong' },
-                { label: 'Table', value: 'leads', variant: 'chip' },
-                { label: 'Operation', value: 'Insert', variant: 'chip' },
-                { label: 'Rows written', value: '32', variant: 'mono' },
-              ]}
-              outputPairs={[
-                { key: 'status', value: '"completed"' },
-                { key: 'rows_written', value: '32' },
-              ]}
-            />
-          ),
-        },
-        {
-          title: 'Wire data in and out',
-          description:
-            'Sim routes records from your tools into tables and back out again, one switchboard for structured data.',
-          featureTileTone: 'dark',
-          featureTileDescriptionTone: 'soft',
-          visual: (
-            <OperationsTeamsGraphic
-              sourceLabels={['Stripe', 'Salesforce', 'Gmail']}
-              destinationLabels={['leads', 'invoices', 'tickets']}
-            />
-          ),
-        },
-        {
-          title: 'Every change recorded',
-          description:
-            'Sim records every insert and update with who made it, so the history of a table is always inspectable.',
-          visual: (
-            <AuditTrailGraphic
-              entries={[
-                {
-                  action: 'Row updated',
-                  actor: 'Support agent',
-                  resource: 'leads · Acme Co',
-                  time: 'Now',
-                  avatar: '/landing/team-avatar-1.jpg',
-                },
-                {
-                  action: 'Rows inserted',
-                  actor: 'Lead intake',
-                  resource: 'leads · 5 rows',
-                  time: '2 min ago',
-                  avatar: '/landing/team-avatar-2.jpg',
-                },
-                {
-                  action: 'Enrichment completed',
-                  actor: 'Lead enrichment',
-                  resource: 'leads · Work email',
-                  time: '12 min ago',
-                  avatar: '/landing/team-avatar-3.jpg',
-                },
-                {
-                  action: 'Table created',
-                  actor: 'Maya Chen',
-                  resource: 'leads',
-                  time: 'Jun 14',
-                  avatar: '/landing/team-avatar-1.jpg',
-                },
-              ]}
-            />
-          ),
-        },
-      ],
+      id: 'state',
+      label: 'Data across runs',
+      title: 'Carry work from run to run.',
+      description:
+        'Read matching records and save results with Table blocks inside your workflows.',
+      visual: <TablesWorkflowPreview />,
+      cta: {
+        label: 'See Tables in workflows',
+        href: 'https://docs.sim.ai/tables/using-in-workflows',
+      },
     },
   ],
 }
diff --git a/apps/sim/app/(landing)/workflows/components/feature-graphics/agent-code-graphic.tsx b/apps/sim/app/(landing)/workflows/components/feature-graphics/agent-code-graphic.tsx
deleted file mode 100644
index d3303ac6eea..00000000000
--- a/apps/sim/app/(landing)/workflows/components/feature-graphics/agent-code-graphic.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { FolderCode } from '@sim/emcn/icons'
-import {
-  type CodeSegment,
-  CodeWindowGraphic,
-} from '@/app/(landing)/components/shared/code-window-graphic'
-
-/**
- * The `support-agent.ts` excerpt the build-methods tile types out,
- * rendered settled — the same agent, reached from code.
- */
-const CODE_LINES: readonly CodeSegment[][] = [
-  [
-    { text: 'import', tone: 'muted' },
-    { text: ' ' },
-    { text: '{ agent }', tone: 'primary' },
-    { text: ' ' },
-    { text: 'from', tone: 'muted' },
-    { text: ' ' },
-    { text: "'@sim/sdk'", tone: 'primary' },
-  ],
-  [
-    { text: 'const', tone: 'muted' },
-    { text: ' ' },
-    { text: 'supportAgent', tone: 'primary' },
-    { text: ' ' },
-    { text: '= await', tone: 'muted' },
-    { text: ' ' },
-    { text: 'agent', tone: 'primary' },
-  ],
-  [{ text: '  .workflow({' }],
-  [
-    { text: '    ' },
-    { text: 'name:', tone: 'muted' },
-    { text: ' ' },
-    { text: "'Support agent'", tone: 'primary' },
-    { text: ',' },
-  ],
-  [
-    { text: '    ' },
-    { text: 'tools:', tone: 'muted' },
-    { text: ' ' },
-    { text: '[zendesk, slack]', tone: 'primary' },
-    { text: ',' },
-  ],
-  [{ text: '  })' }],
-] as const
-
-/**
- * Code-first building told in the shared {@link CodeWindowGraphic} editor
- * window: the `FolderCode` mark and the `support-agent.ts` filename over
- * the same SDK excerpt the build-methods tile types out, sitting settled
- * so the two tiles read as the same file at rest and mid-write.
- */
-export function AgentCodeGraphic() {
-  return (
-    <CodeWindowGraphic
-      icon={<FolderCode className='size-[14px] text-[var(--text-muted-inverse)]' />}
-      filename='support-agent.ts'
-      lines={CODE_LINES}
-    />
-  )
-}
diff --git a/apps/sim/app/(landing)/workflows/components/feature-graphics/index.ts b/apps/sim/app/(landing)/workflows/components/feature-graphics/index.ts
index 3e814f8371d..c4e316beb8f 100644
--- a/apps/sim/app/(landing)/workflows/components/feature-graphics/index.ts
+++ b/apps/sim/app/(landing)/workflows/components/feature-graphics/index.ts
@@ -1,2 +1 @@
-export { AgentCodeGraphic } from './agent-code-graphic'
 export { WorkflowCanvasGraphic } from './workflow-canvas-graphic'
diff --git a/apps/sim/app/(landing)/workflows/components/feature-graphics/workflow-canvas-graphic.tsx b/apps/sim/app/(landing)/workflows/components/feature-graphics/workflow-canvas-graphic.tsx
index 073d5150bd0..8cb36e7b7b2 100644
--- a/apps/sim/app/(landing)/workflows/components/feature-graphics/workflow-canvas-graphic.tsx
+++ b/apps/sim/app/(landing)/workflows/components/feature-graphics/workflow-canvas-graphic.tsx
@@ -3,29 +3,40 @@ import colorMixFallbacks from '@/app/(landing)/components/shared/color-mix-fallb
 import { FeatureGraphicShell } from '@/app/(landing)/enterprise/components/feature-graphics'
 import styles from '@/app/(landing)/workflows/components/feature-graphics/workflow-canvas-graphic.module.css'
 
-/** Fixed pixel canvas the mini builder is drawn on, centered inside the shell. */
-const CANVAS = { WIDTH: 320, HEIGHT: 250 } as const
+interface WorkflowCanvasLayout {
+  width: number
+  height: number
+  edges: readonly [string, string, string]
+  trigger: { topClass: string; leftClass: string }
+  agent: { topClass: string; leftClass: string }
+  outputTopClass: string
+  outputs: readonly [{ label: string; leftClass: string }, { label: string; leftClass: string }]
+}
 
 /**
- * Wires between the three block tiers, with vertical tangents at both
- * ends (the access tile's edge geometry): the trigger drops straight
- * into the agent, then the agent fans out to its two output blocks.
+ * Homepage portrait crop: the three-tier graph stretched vertically so it
+ * fills a tall bloc instead of floating as a small landscape island.
  */
-const EDGE_PATHS = [
-  'M 160 50 L 160 102',
-  'M 160 144 C 160 172 80 168 80 196',
-  'M 160 144 C 160 172 240 168 240 196',
-] as const
+const LAYOUT: WorkflowCanvasLayout = {
+  width: 280,
+  height: 400,
+  edges: [
+    'M 140 62 L 140 150',
+    'M 140 194 C 140 250 64 260 64 310',
+    'M 140 194 C 140 250 216 260 216 310',
+  ],
+  trigger: { topClass: 'top-[28px]', leftClass: 'left-[140px]' },
+  agent: { topClass: 'top-[150px]', leftClass: 'left-[140px]' },
+  outputTopClass: 'top-[310px]',
+  outputs: [
+    { label: 'Slack', leftClass: 'left-[64px]' },
+    { label: 'Sheets', leftClass: 'left-[216px]' },
+  ],
+}
 
 /** Per-index draw classes — the stagger order is baked into each class's keyframes. */
 const EDGE_DRAW_CLASSES = [styles.edgeDraw0, styles.edgeDraw1, styles.edgeDraw2] as const
 
-/** Output blocks fanned beneath the agent, mirrored around the center axis. */
-const OUTPUT_BLOCKS = [
-  { label: 'Slack', leftClass: 'left-[80px]' },
-  { label: 'Sheets', leftClass: 'left-[240px]' },
-] as const
-
 /**
  * The visual builder told as a mini workflow canvas, with no window
  * framing (the access tile's frameless node-graph composition): three
@@ -33,7 +44,7 @@ const OUTPUT_BLOCKS = [
  * center, and two output blocks fanned below — joined by 1px curved SVG
  * edges with vertical tangents landing on small port dots (the access
  * tile's junction vocabulary). Every block is a white card in the audit
- * tile's exact chrome (`--white` fill, 1px `--border-1` hairline,
+ * tile's exact chrome (`--white` fill, 1px `--border` hairline,
  * `rounded-lg`, `shadow-xs`) so the canvas reads as the workspace's own
  * block language; the agent is the tile's strongest element, pairing its
  * name with a solid `Agent` ChipTag.
@@ -46,31 +57,27 @@ const OUTPUT_BLOCKS = [
  * family's shared ring pulse as the fan-out lands. Under
  * `prefers-reduced-motion` the graph renders fully drawn and static.
  *
- * The feature tile's visual slot bleeds `2rem` right (`1.5rem` under
- * `max-lg`) but not left, so this centered vignette adds matching right
- * padding to land on the tile's visible center instead of the bled
- * slot's center. The fixed-size canvas is `shrink-0` so it keeps its
- * geometry; narrow grid columns are handled by the feature tile itself,
- * which zooms its whole design-space canvas down proportionally (see
- * `SOLUTIONS_VISUAL`), so the outer blocks are never cropped — the
- * access tile's sizing strategy exactly.
+ * The fixed-size canvas is `shrink-0` so it keeps its geometry and is
+ * scaled to the portrait bloc as a whole, so the outer blocks are never
+ * cropped and the graph fills the tall crop instead of sitting as a small
+ * island.
  */
 export function WorkflowCanvasGraphic() {
   return (
-    <FeatureGraphicShell>
+    <FeatureGraphicShell variant='portrait'>
       <div
         aria-hidden='true'
-        className='absolute inset-0 flex items-center justify-center pr-8 max-lg:pr-6'
+        className='absolute inset-0 flex items-center justify-center p-3 [container-type:size]'
       >
-        <div className='relative h-[250px] w-[320px] shrink-0'>
+        <div className='relative h-[400px] w-[280px] shrink-0 [scale:min(tan(atan2(100cqw,280px)),tan(atan2(100cqh,400px)))]'>
           <svg
             className='absolute inset-0'
             fill='none'
-            viewBox={`0 0 ${CANVAS.WIDTH} ${CANVAS.HEIGHT}`}
-            width={CANVAS.WIDTH}
-            height={CANVAS.HEIGHT}
+            viewBox={`0 0 ${LAYOUT.width} ${LAYOUT.height}`}
+            width={LAYOUT.width}
+            height={LAYOUT.height}
           >
-            {EDGE_PATHS.map((path, index) => (
+            {LAYOUT.edges.map((path, index) => (
               <path
                 key={path}
                 d={path}
@@ -85,14 +92,26 @@ export function WorkflowCanvasGraphic() {
             ))}
           </svg>
 
-          <div className='-translate-x-1/2 absolute top-[14px] left-[160px] flex items-center gap-2 rounded-lg border border-[var(--border-1)] bg-[var(--white)] px-2.5 py-1.5 shadow-xs'>
+          <div
+            className={cn(
+              '-translate-x-1/2 absolute flex items-center gap-2 rounded-lg border border-[var(--border)] bg-[var(--white)] px-2.5 py-1.5 shadow-xs dark:bg-[var(--surface-4)]',
+              LAYOUT.trigger.topClass,
+              LAYOUT.trigger.leftClass
+            )}
+          >
             <span className='size-2 shrink-0 rounded-full border border-[var(--text-muted)] bg-[var(--surface-3)]' />
             <span className='whitespace-nowrap text-[var(--text-secondary)] text-caption'>
               New ticket
             </span>
           </div>
 
-          <div className='-translate-x-1/2 absolute top-[102px] left-[160px] flex items-center gap-2 rounded-lg border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-xs'>
+          <div
+            className={cn(
+              '-translate-x-1/2 absolute flex items-center gap-2 rounded-lg border border-[var(--border)] bg-[var(--white)] px-3 py-2.5 shadow-xs dark:bg-[var(--surface-4)]',
+              LAYOUT.agent.topClass,
+              LAYOUT.agent.leftClass
+            )}
+          >
             <span
               className={cn(
                 'size-2.5 shrink-0 rounded-full bg-[var(--text-primary)]',
@@ -105,11 +124,12 @@ export function WorkflowCanvasGraphic() {
             <ChipTag variant='solid'>Agent</ChipTag>
           </div>
 
-          {OUTPUT_BLOCKS.map((block) => (
+          {LAYOUT.outputs.map((block) => (
             <div
               key={block.label}
               className={cn(
-                '-translate-x-1/2 absolute top-[196px] flex items-center gap-2 rounded-lg border border-[var(--border-1)] bg-[var(--white)] px-2.5 py-1.5 shadow-xs',
+                '-translate-x-1/2 absolute flex items-center gap-2 rounded-lg border border-[var(--border)] bg-[var(--white)] px-2.5 py-1.5 shadow-xs dark:bg-[var(--surface-4)]',
+                LAYOUT.outputTopClass,
                 block.leftClass
               )}
             >
diff --git a/apps/sim/app/(landing)/workflows/components/workflow-builder-preview/components/workflow-preview-canvas/index.ts b/apps/sim/app/(landing)/workflows/components/workflow-builder-preview/components/workflow-preview-canvas/index.ts
new file mode 100644
index 00000000000..3e12cc5ad9d
--- /dev/null
+++ b/apps/sim/app/(landing)/workflows/components/workflow-builder-preview/components/workflow-preview-canvas/index.ts
@@ -0,0 +1 @@
+export { WorkflowPreviewCanvas } from './workflow-preview-canvas'
diff --git a/apps/sim/app/(landing)/workflows/components/workflow-builder-preview/components/workflow-preview-canvas/workflow-preview-canvas.tsx b/apps/sim/app/(landing)/workflows/components/workflow-builder-preview/components/workflow-preview-canvas/workflow-preview-canvas.tsx
new file mode 100644
index 00000000000..b5fa492c74f
--- /dev/null
+++ b/apps/sim/app/(landing)/workflows/components/workflow-builder-preview/components/workflow-preview-canvas/workflow-preview-canvas.tsx
@@ -0,0 +1,84 @@
+'use client'
+
+import { cn } from '@sim/emcn'
+import { StageBlockCard } from '@/app/(landing)/components/hero/components/hero-platform-loop/stage-block-card'
+import {
+  horizontalHandleAnchors,
+  smoothStep,
+} from '@/app/(landing)/components/hero/components/hero-visual/workflow-data'
+import {
+  PREVIEW_BLOCKS,
+  PREVIEW_EDGES,
+} from '@/app/(landing)/workflows/components/workflow-builder-preview/constants'
+
+interface WorkflowPreviewCanvasProps {
+  selectedId?: string
+  runningId?: string | null
+  completedId?: string | null
+  onSelect?: (blockId: string) => void
+  onRunToggle?: (blockId: string) => void
+}
+
+/** Real StageBlockCard silhouettes and handle geometry without loading the editor or stores. */
+export function WorkflowPreviewCanvas({
+  selectedId,
+  runningId,
+  completedId,
+  onSelect,
+  onRunToggle,
+}: WorkflowPreviewCanvasProps) {
+  return (
+    <div className='relative h-[376px] w-[1210px]'>
+      <svg
+        aria-hidden='true'
+        className='absolute inset-0 size-full overflow-visible'
+        viewBox='0 0 1210 376'
+        fill='none'
+      >
+        {PREVIEW_EDGES.map(([sourceId, targetId]) => {
+          const sourceBlock = PREVIEW_BLOCKS.find((block) => block.id === sourceId)
+          const targetBlock = PREVIEW_BLOCKS.find((block) => block.id === targetId)
+          if (!sourceBlock || !targetBlock) return null
+          const source = horizontalHandleAnchors(sourceBlock).out
+          const target = horizontalHandleAnchors(targetBlock).in
+          return (
+            <path
+              key={`${sourceId}-${targetId}`}
+              d={
+                source.y === target.y
+                  ? `M${source.x} ${source.y}H${target.x}`
+                  : smoothStep(source.x, source.y, target.x, target.y)
+              }
+              stroke='var(--text-secondary)'
+              strokeWidth={1.5}
+            />
+          )
+        })}
+      </svg>
+      {PREVIEW_BLOCKS.map((block) => (
+        <div
+          key={block.id}
+          onFocus={() => onSelect?.(block.id)}
+          className={cn(
+            'absolute',
+            block.className,
+            onSelect &&
+              '[&_[role=button]:focus-visible]:outline-2 [&_[role=button]:focus-visible]:outline-[var(--text-secondary)] [&_[role=button]:focus-visible]:outline-solid [&_[role=button]:focus-visible]:outline-offset-4'
+          )}
+        >
+          <StageBlockCard
+            block={block}
+            orientation='horizontal'
+            selected={selectedId === block.id}
+            decorative={!onSelect}
+            runStatus={
+              runningId === block.id ? 'running' : completedId === block.id ? 'complete' : 'idle'
+            }
+            onSelect={onSelect}
+            onRunToggle={onRunToggle}
+          />
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/workflows/components/workflow-builder-preview/constants.ts b/apps/sim/app/(landing)/workflows/components/workflow-builder-preview/constants.ts
new file mode 100644
index 00000000000..f7377731105
--- /dev/null
+++ b/apps/sim/app/(landing)/workflows/components/workflow-builder-preview/constants.ts
@@ -0,0 +1,128 @@
+import { Table as TableIcon } from '@sim/emcn/icons'
+import { AgentIcon, PackageSearchIcon, SlackIcon } from '@/components/icons'
+import type { BlockDef } from '@/app/(landing)/components/hero/components/hero-visual/workflow-data'
+
+interface PreviewBlock extends BlockDef {
+  selectorLabel: string
+  className: string
+  focusClassName: string
+}
+
+/** A support request becomes a grounded reply and a record in Tables, using production sentences. */
+export const PREVIEW_BLOCKS: PreviewBlock[] = [
+  {
+    id: 'request',
+    name: 'New message',
+    type: 'slack_v2',
+    typeLabel: 'Slack',
+    selectorLabel: 'Request',
+    icon: SlackIcon,
+    bgColor: '#611f69',
+    isIntegration: true,
+    isTrigger: true,
+    sentence: {
+      segments: [
+        'Run on',
+        { subBlockId: 'eventType', noun: 'an event' },
+        'in',
+        { subBlockId: 'channelFilter', noun: 'a channel' },
+      ],
+      values: { eventType: 'Message', channelFilter: '#help' },
+    },
+    rows: [],
+    x: 0,
+    y: 148,
+    className: 'left-0 top-[148px]',
+    focusClassName: '@max-[760px]:translate-x-[calc(-50%+480px)]',
+  },
+  {
+    id: 'knowledge',
+    name: 'Find docs',
+    type: 'knowledge',
+    typeLabel: 'Knowledge',
+    selectorLabel: 'Knowledge',
+    icon: PackageSearchIcon,
+    bgColor: '#00B0B0',
+    sentence: {
+      segments: ['Search', { subBlockId: 'knowledgeBaseSelector', noun: 'a knowledge base' }],
+      values: { knowledgeBaseSelector: 'Help center' },
+    },
+    rows: [],
+    x: 320,
+    y: 132,
+    className: 'left-[320px] top-[132px]',
+    focusClassName: '@max-[760px]:translate-x-[calc(-50%+160px)]',
+  },
+  {
+    id: 'draft',
+    name: 'Draft reply',
+    type: 'agent',
+    typeLabel: 'Agent',
+    selectorLabel: 'Agent',
+    icon: AgentIcon,
+    bgColor: 'var(--text-primary)',
+    sentence: {
+      segments: ['Prompt', { subBlockId: 'model', noun: 'a model' }],
+      values: { model: 'GPT-6 Astra' },
+    },
+    rows: [],
+    x: 640,
+    y: 132,
+    className: 'left-[640px] top-[132px]',
+    focusClassName: '@max-[760px]:translate-x-[calc(-50%-160px)]',
+  },
+  {
+    id: 'reply',
+    name: 'Send reply',
+    type: 'slack_v2',
+    typeLabel: 'Slack',
+    selectorLabel: 'Slack',
+    icon: SlackIcon,
+    bgColor: '#611f69',
+    isIntegration: true,
+    isTerminal: true,
+    sentence: {
+      segments: [
+        'Post',
+        { subBlockId: 'text', noun: 'a message' },
+        'to',
+        { subBlockId: 'channel', noun: 'a channel' },
+      ],
+      values: { text: 'reply', channel: '#help' },
+    },
+    rows: [],
+    x: 960,
+    y: 24,
+    className: 'left-[960px] top-6',
+    focusClassName:
+      '@max-[760px]:translate-x-[calc(-50%-480px)] @max-[760px]:translate-y-[calc(-50%+108px)]',
+  },
+  {
+    id: 'record',
+    name: 'Save ticket',
+    type: 'table_v2',
+    typeLabel: 'Table',
+    selectorLabel: 'Table',
+    icon: TableIcon,
+    bgColor: '#10B981',
+    isTerminal: true,
+    sentence: {
+      segments: ['Insert a row into', { subBlockId: 'tableSelector', noun: 'a table' }],
+      values: { tableSelector: 'Tickets' },
+    },
+    rows: [],
+    x: 960,
+    y: 240,
+    className: 'left-[960px] top-60',
+    focusClassName:
+      '@max-[760px]:translate-x-[calc(-50%-480px)] @max-[760px]:translate-y-[calc(-50%-108px)]',
+  },
+]
+
+/** Both outputs consume the drafted reply; this is a fan-out, not a conditional branch. */
+export const PREVIEW_EDGES = [
+  ['request', 'knowledge'],
+  ['knowledge', 'draft'],
+  ['draft', 'reply'],
+  ['draft', 'record'],
+] as const
diff --git a/apps/sim/app/(landing)/workflows/components/workflow-builder-preview/index.ts b/apps/sim/app/(landing)/workflows/components/workflow-builder-preview/index.ts
new file mode 100644
index 00000000000..7800ab599f7
--- /dev/null
+++ b/apps/sim/app/(landing)/workflows/components/workflow-builder-preview/index.ts
@@ -0,0 +1 @@
+export { WorkflowBuilderPreview } from './workflow-builder-preview'
diff --git a/apps/sim/app/(landing)/workflows/components/workflow-builder-preview/workflow-builder-preview.tsx b/apps/sim/app/(landing)/workflows/components/workflow-builder-preview/workflow-builder-preview.tsx
new file mode 100644
index 00000000000..cf9c82e6e7c
--- /dev/null
+++ b/apps/sim/app/(landing)/workflows/components/workflow-builder-preview/workflow-builder-preview.tsx
@@ -0,0 +1,81 @@
+'use client'
+
+import { useEffect, useId, useState } from 'react'
+import { Chip, cn } from '@sim/emcn'
+import { EdgeFade } from '@/app/(landing)/components/shared/edge-fade'
+import { WorkflowPreviewCanvas } from '@/app/(landing)/workflows/components/workflow-builder-preview/components/workflow-preview-canvas'
+import { PREVIEW_BLOCKS } from '@/app/(landing)/workflows/components/workflow-builder-preview/constants'
+
+/** The production workflow cards, ports, selection toolbar, and run affordance in an open stage. */
+export function WorkflowBuilderPreview() {
+  const previewId = useId()
+  const [selectedId, setSelectedId] = useState('draft')
+  const [runningId, setRunningId] = useState<string | null>(null)
+  const [completedId, setCompletedId] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!runningId) return
+    const timeout = window.setTimeout(() => {
+      setCompletedId(runningId)
+      setRunningId(null)
+    }, 1200)
+    return () => window.clearTimeout(timeout)
+  }, [runningId])
+
+  const handleRunToggle = (blockId: string) => {
+    setSelectedId(blockId)
+    setCompletedId(null)
+    setRunningId((current) => (current === blockId ? null : blockId))
+  }
+
+  return (
+    <div data-workflow-builder-preview className='absolute inset-0 overflow-clip bg-[var(--bg)]'>
+      <div
+        id={previewId}
+        role='group'
+        aria-label='Support request workflow: find knowledge, draft a reply, send it to Slack, and save a ticket'
+        className={cn(
+          '-translate-x-1/2 -translate-y-1/2 absolute top-[44%] left-1/2 h-[376px] w-[1210px] transition-transform duration-300 ease-out motion-reduce:transition-none',
+          PREVIEW_BLOCKS.find((block) => block.id === selectedId)?.focusClassName
+        )}
+      >
+        <div className='size-full @max-[1000px]:scale-[0.6] @max-[1280px]:scale-[0.78] @max-[760px]:scale-100'>
+          <WorkflowPreviewCanvas
+            selectedId={selectedId}
+            runningId={runningId}
+            completedId={completedId}
+            onSelect={setSelectedId}
+            onRunToggle={handleRunToggle}
+          />
+        </div>
+      </div>
+      <EdgeFade ground='canvas' edges={['left', 'right']} depth='preview' />
+      <div className='absolute inset-x-5 bottom-8 z-10 flex flex-col items-center gap-3'>
+        <div
+          role='group'
+          aria-label='Select a workflow block'
+          className='flex flex-wrap justify-center gap-1.5'
+        >
+          {PREVIEW_BLOCKS.map((block) => (
+            <Chip
+              key={block.id}
+              active={selectedId === block.id}
+              aria-pressed={selectedId === block.id}
+              aria-controls={previewId}
+              onClick={() => setSelectedId(block.id)}
+            >
+              {block.selectorLabel}
+            </Chip>
+          ))}
+        </div>
+        <p role='status' aria-live='polite' className='text-[var(--text-secondary)] text-caption'>
+          {runningId
+            ? 'Running sample block…'
+            : completedId
+              ? 'Sample run complete'
+              : 'Select a block to preview its controls'}
+        </p>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/workflows/components/workflow-deployment-preview/index.ts b/apps/sim/app/(landing)/workflows/components/workflow-deployment-preview/index.ts
new file mode 100644
index 00000000000..263e479a3d9
--- /dev/null
+++ b/apps/sim/app/(landing)/workflows/components/workflow-deployment-preview/index.ts
@@ -0,0 +1 @@
+export { WorkflowDeploymentPreview } from './workflow-deployment-preview'
diff --git a/apps/sim/app/(landing)/workflows/components/workflow-deployment-preview/workflow-deployment-preview.tsx b/apps/sim/app/(landing)/workflows/components/workflow-deployment-preview/workflow-deployment-preview.tsx
new file mode 100644
index 00000000000..5109978c337
--- /dev/null
+++ b/apps/sim/app/(landing)/workflows/components/workflow-deployment-preview/workflow-deployment-preview.tsx
@@ -0,0 +1,108 @@
+'use client'
+
+import { ChipModalHeader, ChipModalTabs } from '@sim/emcn'
+import { FileText, MoreVertical } from '@sim/emcn/icons'
+import { WorkflowPreviewCanvas } from '@/app/(landing)/workflows/components/workflow-builder-preview/components/workflow-preview-canvas'
+
+const DEPLOYMENT_TABS = [
+  { value: 'general', label: 'General' },
+  { value: 'api', label: 'API' },
+  { value: 'mcp', label: 'MCP' },
+  { value: 'chat', label: 'Chat' },
+] as const
+
+const VERSIONS = [
+  {
+    version: 'v3',
+    name: 'Support replies',
+    deployedBy: 'Morgan',
+    timestamp: 'Sep 7, 9:41 AM',
+    live: true,
+  },
+  {
+    version: 'v2',
+    name: 'Reply prompt',
+    deployedBy: 'Alex',
+    timestamp: 'Sep 6, 4:12 PM',
+    live: false,
+  },
+  {
+    version: 'v1',
+    name: 'Initial deployment',
+    deployedBy: 'Morgan',
+    timestamp: 'Sep 3, 11:20 AM',
+    live: false,
+  },
+] as const
+
+/** The real deployment General tab: native modal tabs, live workflow, and version-history columns. */
+export function WorkflowDeploymentPreview() {
+  return (
+    <div
+      aria-hidden='true'
+      inert
+      data-workflow-deployment-preview
+      className='pointer-events-none absolute @max-[400px]:top-8 top-12 left-6 w-[600px] select-none overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--bg)] text-small'
+    >
+      <ChipModalHeader onClose={() => {}}>Workflow Deployment</ChipModalHeader>
+      <div className='space-y-4 px-4 py-3'>
+        <ChipModalTabs
+          tabs={DEPLOYMENT_TABS}
+          value='general'
+          onChange={() => {}}
+          aria-label='Deployment settings'
+        />
+        <div>
+          <p className='mb-1.5 pl-0.5 text-[var(--text-primary)]'>Live Workflow</p>
+          <div className='relative h-[156px] overflow-hidden rounded-sm border border-[var(--border)] bg-[var(--bg)]'>
+            <div className='-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 h-[376px] w-[1210px] scale-[0.42]'>
+              <WorkflowPreviewCanvas />
+            </div>
+          </div>
+        </div>
+        <div>
+          <p className='mb-1.5 pl-0.5 text-[var(--text-primary)]'>Versions</p>
+          <div className='overflow-hidden rounded-sm border border-[var(--border)] text-caption'>
+            <div className='flex h-[30px] items-center bg-[var(--surface-1)] px-4 text-[var(--text-tertiary)]'>
+              <span className='w-[180px] shrink-0'>Version</span>
+              <span className='w-[140px] shrink-0'>Deployed by</span>
+              <span className='min-w-0 flex-1'>Timestamp</span>
+              <span className='w-[40px] shrink-0' />
+            </div>
+            {VERSIONS.map((version) => (
+              <div
+                key={version.version}
+                className='flex h-9 items-center bg-[var(--surface-2)] px-4'
+              >
+                <div className='flex w-[180px] shrink-0 items-center gap-3 pr-2 text-[var(--text-primary)]'>
+                  <span
+                    className={
+                      version.live
+                        ? 'size-[6px] shrink-0 rounded-xs bg-[var(--indicator-active)]'
+                        : 'size-[6px] shrink-0 rounded-xs bg-[var(--indicator-inactive)]'
+                    }
+                  />
+                  <span className='shrink-0 text-[var(--text-tertiary)]'>{version.version}</span>
+                  <span className='truncate'>{version.name}</span>
+                  {version.live && (
+                    <span className='shrink-0 text-[var(--text-tertiary)]'>(live)</span>
+                  )}
+                </div>
+                <span className='w-[140px] shrink-0 truncate text-[var(--text-tertiary)]'>
+                  {version.deployedBy}
+                </span>
+                <span className='min-w-0 flex-1 truncate text-[var(--text-tertiary)]'>
+                  {version.timestamp}
+                </span>
+                <div className='flex w-[40px] shrink-0 justify-end gap-2 text-[var(--text-icon)]'>
+                  <FileText className='size-3.5' />
+                  <MoreVertical className='size-3.5' />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/workflows/components/workflow-schedule-preview/index.ts b/apps/sim/app/(landing)/workflows/components/workflow-schedule-preview/index.ts
new file mode 100644
index 00000000000..1db35219bbc
--- /dev/null
+++ b/apps/sim/app/(landing)/workflows/components/workflow-schedule-preview/index.ts
@@ -0,0 +1 @@
+export { WorkflowSchedulePreview } from './workflow-schedule-preview'
diff --git a/apps/sim/app/(landing)/workflows/components/workflow-schedule-preview/workflow-schedule-preview.tsx b/apps/sim/app/(landing)/workflows/components/workflow-schedule-preview/workflow-schedule-preview.tsx
new file mode 100644
index 00000000000..efe3e57931f
--- /dev/null
+++ b/apps/sim/app/(landing)/workflows/components/workflow-schedule-preview/workflow-schedule-preview.tsx
@@ -0,0 +1,62 @@
+'use client'
+
+import { ChipInput, Combobox } from '@sim/emcn'
+import { Clock } from '@sim/emcn/icons'
+import { MenuPreviewHeader } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-header/menu-preview-header'
+
+const FREQUENCIES = [
+  { value: 'minutes', label: 'Every X Minutes' },
+  { value: 'hourly', label: 'Hourly' },
+  { value: 'daily', label: 'Daily' },
+  { value: 'weekly', label: 'Weekly' },
+  { value: 'monthly', label: 'Monthly' },
+  { value: 'custom', label: 'Custom (Cron)' },
+]
+
+/** ScheduleBlock's real fields and display labels, using the editor's native controls. */
+export function WorkflowSchedulePreview() {
+  return (
+    <div
+      aria-hidden='true'
+      inert
+      data-workflow-schedule-preview
+      className='pointer-events-none absolute @max-[400px]:top-8 top-12 left-6 w-[390px] select-none overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--bg)] text-small'
+    >
+      <MenuPreviewHeader icon={Clock} title='Weekday digest' />
+      <div className='space-y-4 p-4'>
+        <div className='space-y-1.5'>
+          <p className='text-[var(--text-primary)]'>Run frequency</p>
+          <Combobox
+            options={FREQUENCIES}
+            value='custom'
+            onChange={() => {}}
+            editable={false}
+            searchable={false}
+          />
+        </div>
+        <div className='space-y-1.5'>
+          <p className='text-[var(--text-primary)]'>Cron expression</p>
+          <ChipInput
+            aria-label='Cron expression'
+            value='0 9 * * 1-5'
+            readOnly
+            inputClassName='font-mono'
+          />
+        </div>
+        <div className='space-y-1.5'>
+          <p className='text-[var(--text-primary)]'>Timezone</p>
+          <Combobox
+            options={[{ value: 'America/Los_Angeles', label: 'US Pacific (UTC-8)' }]}
+            value='America/Los_Angeles'
+            onChange={() => {}}
+            editable={false}
+            searchable
+          />
+        </div>
+        <p className='text-[var(--text-tertiary)] text-caption'>
+          At 9:00 AM, Monday through Friday
+        </p>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/workflows/components/workflows-editor-loop.tsx b/apps/sim/app/(landing)/workflows/components/workflows-editor-loop.tsx
index ff564048d90..6e788929bb0 100644
--- a/apps/sim/app/(landing)/workflows/components/workflows-editor-loop.tsx
+++ b/apps/sim/app/(landing)/workflows/components/workflows-editor-loop.tsx
@@ -33,6 +33,8 @@ const WORKFLOWS_EDITOR_CONTENT: EditorLoopContent = {
     {
       id: 'start',
       name: 'Start',
+      type: 'start_trigger',
+      typeLabel: 'Start',
       icon: StartIcon,
       bgColor: 'var(--text-muted)',
       isTrigger: true,
@@ -43,6 +45,8 @@ const WORKFLOWS_EDITOR_CONTENT: EditorLoopContent = {
     {
       id: 'agent',
       name: 'Support agent',
+      type: 'agent',
+      typeLabel: 'Agent',
       icon: AgentIcon,
       bgColor: 'var(--text-primary)',
       rows: [
@@ -55,6 +59,8 @@ const WORKFLOWS_EDITOR_CONTENT: EditorLoopContent = {
     {
       id: 'route',
       name: 'Route intent',
+      type: 'condition',
+      typeLabel: 'Condition',
       icon: ConditionalIcon,
       bgColor: 'var(--text-secondary)',
       rows: [{ title: 'Conditions', value: '-' }],
@@ -64,6 +70,9 @@ const WORKFLOWS_EDITOR_CONTENT: EditorLoopContent = {
     {
       id: 'slack',
       name: 'Reply in Slack',
+      type: 'slack',
+      typeLabel: 'Slack',
+      isIntegration: true,
       icon: SlackIcon,
       bgColor: '#611F69',
       isTerminal: true,
@@ -77,6 +86,9 @@ const WORKFLOWS_EDITOR_CONTENT: EditorLoopContent = {
     {
       id: 'jira',
       name: 'Escalate to Jira',
+      type: 'jira',
+      typeLabel: 'Jira',
+      isIntegration: true,
       icon: JiraIcon,
       bgColor: '#FFFFFF',
       tileBorder: true,
@@ -91,6 +103,8 @@ const WORKFLOWS_EDITOR_CONTENT: EditorLoopContent = {
     {
       id: 'tables',
       name: 'Log to Tables',
+      type: 'table',
+      typeLabel: 'Table',
       icon: TableIcon,
       bgColor: 'var(--text-body)',
       isTerminal: true,
diff --git a/apps/sim/app/(landing)/workflows/workflows.tsx b/apps/sim/app/(landing)/workflows/workflows.tsx
index 862082c26c1..886c4dda0d2 100644
--- a/apps/sim/app/(landing)/workflows/workflows.tsx
+++ b/apps/sim/app/(landing)/workflows/workflows.tsx
@@ -1,170 +1,66 @@
 import {
-  PlatformHeroVisual,
   SolutionsPage,
-  type SolutionsPageConfig,
-} from '@/app/(landing)/components'
-import {
-  AuditTrailGraphic,
-  BuildMethodsGraphic,
-  DeployGraphic,
-  RunMonitoringGraphic,
-} from '@/app/(landing)/enterprise/components/feature-graphics'
-import { KnowledgeAnswerGraphic } from '@/app/(landing)/solutions/components/feature-graphics'
-import {
-  AgentCodeGraphic,
-  WorkflowCanvasGraphic,
-} from '@/app/(landing)/workflows/components/feature-graphics'
-import { WorkflowsEditorLoop } from '@/app/(landing)/workflows/components/workflows-editor-loop'
+  type SolutionsProductPageConfig,
+} from '@/app/(landing)/components/solutions-page'
+import { ProductHeroPreview } from '@/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-hero-preview'
+import { WorkflowBuilderPreview } from '@/app/(landing)/workflows/components/workflow-builder-preview'
+import { WorkflowDeploymentPreview } from '@/app/(landing)/workflows/components/workflow-deployment-preview'
+import { WorkflowSchedulePreview } from '@/app/(landing)/workflows/components/workflow-schedule-preview'
 
-/**
- * Workflows platform page - a consumer of {@link SolutionsPage} rendered
- * with the enterprise page's feature-tile treatment.
- *
- * The whole page is one typed {@link SolutionsPageConfig} rendered inside
- * the shared route-group layout chrome: identity (for structured data), a
- * hero, and card rows of 3-4 cards. Every visual slot carries a feature
- * graphic in the enterprise design language - the build-methods loop and
- * deploy window reused for the stories they already tell, the monitoring
- * panel, chat answer, and audit ledger retold for scheduled runs, Slack
- * bots, and run tracing (as a 2×2 grid, so each vignette keeps its full
- * treatment), plus two workflows-specific vignettes: the mini builder
- * canvas and its code-side twin.
- *
- * The JSON-LD emitted by {@link SolutionsPage} is structurally identical
- * to the platform page's (`WebPage` + `BreadcrumbList` +
- * `WebApplication`), so the switch to feature tiles is SEO-neutral.
- */
-/** Shared meta + JSON-LD description for the Workflows page (one string, zero drift). */
+/** Shared description for page metadata and structured data. */
 export const WORKFLOWS_PAGE_DESCRIPTION =
-  "Sim's AI workflow builder connects blocks, every major LLM, and 1,000+ integrations into agents. Build Slack bots and data pipelines visually or in code."
+  'Build AI workflows in Sim with visual blocks, models, and integrations. Run on a schedule or event, then deploy as an API, chat, or MCP tool.'
 
-const WORKFLOWS_CONFIG: SolutionsPageConfig = {
+const WORKFLOWS_CONFIG: SolutionsProductPageConfig = {
   module: 'Workflows',
   path: '/workflows',
   seoDescription: WORKFLOWS_PAGE_DESCRIPTION,
   hero: {
     eyebrow: 'Workflows',
-    heading: 'Build AI agent workflows visually in Sim.',
-    description:
-      'Workflows is the visual AI workflow builder in Sim, the open-source AI workspace. Connect blocks, every major LLM, and 1,000+ integrations into Slack bots, compliance agents, and data pipelines.',
+    heading: 'Build AI workflows you can follow.',
+    description: 'Connect models, tools, and data. Build, test, and deploy AI workflows in Sim.',
     summary:
-      'Workflows is the visual AI workflow builder in Sim, the open-source AI workspace where teams build, deploy, and manage AI agents. Teams wire blocks, every major LLM, and 1,000+ integrations into agent logic, then deploy and trace every run without leaving Sim.',
-    visual: (
-      <PlatformHeroVisual>
-        <WorkflowsEditorLoop />
-      </PlatformHeroVisual>
-    ),
+      'Sim Workflows is the visual builder in the open-source AI workspace. Teams connect models, integrations, code, and workspace data into reusable AI workflows. Start runs manually, on a schedule, or from an event, then deploy a version as an API, a chat, or an MCP tool.',
+    visual: <ProductHeroPreview product='workflows' />,
   },
-  rows: [
+  codeExample: {
+    title: 'Deploy and run from your terminal.',
+    description:
+      'Use the Sim CLI to deploy a workflow you’ve built, run it, and follow its progress from your terminal.',
+    filename: 'workflows.sh',
+    commands: [
+      'sim workflows list',
+      'sim workflows deploy \\',
+      '  "$WORKFLOW_ID"',
+      'sim workflows run \\',
+      '  "$WORKFLOW_ID" --follow',
+    ],
+  },
+  features: [
     {
       id: 'build',
-      title: 'Build AI agents the way that fits.',
-      subtitle:
-        'Sim lets teams build agents visually, in natural language, or with code, wiring up any model and 1,000+ integrations in one workspace.',
-      cta: { label: 'Explore the workflow builder', href: '/signup' },
-      cards: [
-        {
-          title: 'Drag and connect',
-          description:
-            'Wire blocks, models, and integrations on the visual builder. Sim turns the graph into agent logic you can run.',
-          visual: <WorkflowCanvasGraphic />,
-        },
-        {
-          title: 'Describe it in words',
-          description:
-            'Tell Sim what the agent should do in plain language, and the workspace assembles the workflow for you.',
-          visual: <BuildMethodsGraphic />,
-        },
-        {
-          title: 'Drop into code',
-          description:
-            'Reach for code blocks when you need exact control. Sim runs your logic alongside every other block.',
-          featureTileTone: 'dark',
-          featureTileDescriptionTone: 'soft',
-          visual: <AgentCodeGraphic />,
-        },
-      ],
+      label: 'Visual builder',
+      title: 'Build visually. Run with confidence.',
+      description: 'Connect models, tools, and logic in a canvas you can inspect and test.',
+      visual: <WorkflowBuilderPreview />,
+      visualSize: 'compact',
+      cta: { label: 'Explore the builder', href: 'https://docs.sim.ai/workflows' },
+    },
+    {
+      id: 'triggers',
+      label: 'Triggers',
+      title: 'Start with an event.',
+      description: 'Run on a schedule, from a webhook, or when connected tools have new work.',
+      visual: <WorkflowSchedulePreview />,
+      cta: { label: 'Explore triggers', href: 'https://docs.sim.ai/workflows/triggers/schedule' },
     },
     {
       id: 'deploy',
-      title: 'Deploy and run without leaving Sim.',
-      subtitle:
-        'Ship agents to production as APIs, Slack bots, or scheduled jobs, and trace every run block by block, all in one workspace.',
-      cta: { label: 'Learn about deployment', href: '/signup' },
-      columns: 2,
-      cards: [
-        {
-          title: 'Ship as an API',
-          description:
-            'Sim exposes every workflow as an endpoint, so any system can call your agent with one request.',
-          featureTileTone: 'dark',
-          featureTileDescriptionTone: 'soft',
-          visual: (
-            <DeployGraphic
-              url='sim.ai/api/agents/support'
-              statusLabel='Endpoint live in production'
-            />
-          ),
-        },
-        {
-          title: 'Run on a schedule',
-          description:
-            'Set agents to run on a cadence. Sim handles the triggers so the work happens on its own.',
-          visual: <RunMonitoringGraphic />,
-        },
-        {
-          title: 'Connect to Slack',
-          description:
-            'Turn a workflow into a Slack bot your team talks to. Sim wires the integration end to end.',
-          visual: (
-            <KnowledgeAnswerGraphic
-              question='@sim how do refunds work for annual plans?'
-              answer='Annual plans are refunded pro-rata. The refund workflow checks the policy, computes the credit, and files it in Zendesk automatically.'
-              sourceLabel='Support playbook'
-              sourceDetail='Answered in #support'
-            />
-          ),
-        },
-        {
-          title: 'Trace every run',
-          description:
-            'Sim logs each run block by block, so teams see exactly what an agent did and why.',
-          visual: (
-            <AuditTrailGraphic
-              entries={[
-                {
-                  action: 'Run completed',
-                  actor: 'Support agent',
-                  resource: '24 tickets resolved',
-                  time: 'Now',
-                  avatar: '/landing/team-avatar-1.jpg',
-                },
-                {
-                  action: 'Reply sent',
-                  actor: 'Support agent',
-                  resource: '#support',
-                  time: '2 min ago',
-                  avatar: '/landing/team-avatar-2.jpg',
-                },
-                {
-                  action: 'Tool called',
-                  actor: 'Support agent',
-                  resource: 'Zendesk API',
-                  time: '2 min ago',
-                  avatar: '/landing/team-avatar-3.jpg',
-                },
-                {
-                  action: 'Run started',
-                  actor: 'Schedule trigger',
-                  resource: 'Daily at 9:00',
-                  time: '3 min ago',
-                  avatar: '/landing/team-avatar-1.jpg',
-                },
-              ]}
-            />
-          ),
-        },
-      ],
+      label: 'Deployment',
+      title: 'From canvas to live workflow.',
+      description: 'Publish as an API, chat, or MCP tool, with versions you can return to.',
+      visual: <WorkflowDeploymentPreview />,
+      cta: { label: 'Explore deployment', href: 'https://docs.sim.ai/workflows/deployment' },
     },
   ],
 }
diff --git a/apps/sim/app/_shell/providers/theme-provider.test.tsx b/apps/sim/app/_shell/providers/theme-provider.test.tsx
new file mode 100644
index 00000000000..c3f58ce2ae7
--- /dev/null
+++ b/apps/sim/app/_shell/providers/theme-provider.test.tsx
@@ -0,0 +1,77 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const { mockUsePathname } = vi.hoisted(() => ({ mockUsePathname: vi.fn() }))
+
+vi.mock('next/navigation', () => ({ usePathname: mockUsePathname }))
+
+import { ThemeProvider } from '@/app/_shell/providers/theme-provider'
+
+let root: Root
+let host: HTMLDivElement
+
+/** A dark OS, so `system` resolves to dark wherever it applies. */
+function stubDarkOs() {
+  vi.stubGlobal(
+    'matchMedia',
+    vi.fn((query: string) => ({
+      matches: query.includes('dark'),
+      media: query,
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    }))
+  )
+}
+
+function render(pathname: string) {
+  mockUsePathname.mockReturnValue(pathname)
+  act(() => root.render(<ThemeProvider>child</ThemeProvider>))
+  return document.documentElement.classList
+}
+
+beforeEach(() => {
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+  stubDarkOs()
+  localStorage.clear()
+  document.documentElement.className = ''
+  host = document.createElement('div')
+  document.body.append(host)
+  root = createRoot(host)
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  host.remove()
+  vi.unstubAllGlobals()
+})
+
+describe('ThemeProvider theme stores', () => {
+  it('renders the landing light for a signed-in user whose app theme is system', () => {
+    localStorage.setItem('sim-theme', 'system')
+    expect(render('/')).toContain('light')
+  })
+
+  it('honours a theme chosen from the landing footer', () => {
+    localStorage.setItem('sim-theme', 'system')
+    localStorage.setItem('sim-landing-theme', 'dark')
+    expect(render('/workflows')).toContain('dark')
+  })
+
+  it('keeps the workspace on the account-synced store', () => {
+    localStorage.setItem('sim-landing-theme', 'light')
+    localStorage.setItem('sim-theme', 'system')
+    expect(render('/workspace/ws-1/home')).toContain('dark')
+  })
+
+  it('still forces light on the auth shell regardless of either store', () => {
+    localStorage.setItem('sim-theme', 'dark')
+    localStorage.setItem('sim-landing-theme', 'dark')
+    expect(render('/login')).toContain('light')
+  })
+})
diff --git a/apps/sim/app/_shell/providers/theme-provider.tsx b/apps/sim/app/_shell/providers/theme-provider.tsx
index 420d60e5c3a..3ee8c5c90fc 100644
--- a/apps/sim/app/_shell/providers/theme-provider.tsx
+++ b/apps/sim/app/_shell/providers/theme-provider.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { useState } from 'react'
 import { usePathname } from 'next/navigation'
 import type { ThemeProviderProps } from 'next-themes'
 import { ThemeProvider as NextThemesProvider } from 'next-themes'
@@ -32,31 +33,55 @@ const NON_LANDING_LIGHT_SEGMENTS = [
 /**
  * Path segments rendered light regardless of the visitor's theme.
  *
- * `LandingShell`, `AuthShell` and the rest pin `light` on a wrapper *inside* the
- * page, which leaves `<html>` on the visitor's theme. Forcing the theme here
- * puts the same layer on `<html>`, so root-level chrome — scrollbars,
- * `color-scheme`, and anything portalled to `<body>` such as the cookie consent
- * banner — matches the page it sits on instead of contradicting it.
+ * `AuthShell` and the rest pin `light` on a wrapper *inside* the page, which
+ * leaves `<html>` on the visitor's theme. Forcing the theme here puts the same
+ * layer on `<html>`, so root-level chrome — scrollbars, `color-scheme`, and
+ * anything portalled to `<body>` such as the cookie consent banner — matches
+ * the page it sits on instead of contradicting it.
  */
-const LIGHT_MODE_SEGMENTS: ReadonlySet<string> = new Set([
-  ...LANDING_ROUTES,
-  ...NON_LANDING_LIGHT_SEGMENTS,
-])
+const LIGHT_MODE_SEGMENTS: ReadonlySet<string> = new Set(NON_LANDING_LIGHT_SEGMENTS)
+
+/**
+ * The marketing surface: the root plus every `app/(landing)` segment. These
+ * pages keep their own stored theme, written only by the landing footer's
+ * toggle, so a visitor who has never chosen one there gets light, the landing
+ * family's design baseline. The app's `sim-theme` key cannot serve: the
+ * workspace's settings sync writes the account default (`system`) into it for
+ * every signed-in user, which would render the marketing site in the OS theme
+ * and overwrite any choice the footer toggle made.
+ */
+const LANDING_SEGMENTS: ReadonlySet<string> = new Set(LANDING_ROUTES)
+
+const APP_SURFACE = { defaultTheme: 'system', storageKey: 'sim-theme' } as const
+const LANDING_SURFACE = { defaultTheme: 'light', storageKey: 'sim-landing-theme' } as const
+
+function isLandingPath(pathname: string): boolean {
+  const firstSegment = pathname.split('/')[1]
+  return firstSegment === '' || LANDING_SEGMENTS.has(firstSegment)
+}
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
   const pathname = usePathname()
 
-  const firstSegment = pathname.split('/')[1]
-  const forcedTheme =
-    firstSegment === '' || LIGHT_MODE_SEGMENTS.has(firstSegment) ? 'light' : undefined
+  /**
+   * next-themes reads `storageKey` and `defaultTheme` once, at mount and in its
+   * pre-hydration script, so both are fixed from the document's first path.
+   * Every entry into the marketing surface from another shell is a document
+   * navigation (`AuthShell`, `LogoShell`, the invite pages, post-auth
+   * redirects), so the choice never needs to change within one document. The
+   * provider is not keyed on the surface on purpose: it wraps the query and
+   * session providers, which must survive client-side navigation.
+   */
+  const [surface] = useState(() => (isLandingPath(pathname) ? LANDING_SURFACE : APP_SURFACE))
+  const forcedTheme = LIGHT_MODE_SEGMENTS.has(pathname.split('/')[1]) ? 'light' : undefined
 
   return (
     <NextThemesProvider
       attribute='class'
-      defaultTheme='system'
+      defaultTheme={surface.defaultTheme}
       enableSystem
       disableTransitionOnChange
-      storageKey='sim-theme'
+      storageKey={surface.storageKey}
       forcedTheme={forcedTheme}
       {...props}
     >
diff --git a/apps/sim/app/credential-groups/enroll/[token]/page.test.tsx b/apps/sim/app/credential-groups/enroll/[token]/page.test.tsx
index 7b5d08d9439..b655fb0e30a 100644
--- a/apps/sim/app/credential-groups/enroll/[token]/page.test.tsx
+++ b/apps/sim/app/credential-groups/enroll/[token]/page.test.tsx
@@ -42,7 +42,7 @@ vi.mock('@/app/(auth)/components', () => ({
   ),
   SupportFooter: () => null,
 }))
-vi.mock('@/app/(landing)/components', () => ({
+vi.mock('@/app/(landing)/components/logo-shell', () => ({
   LogoShell: ({ children }: { children: ReactNode }) => <main>{children}</main>,
 }))
 vi.mock('@/app/credential-groups/enroll/[token]/oauth-toast', () => ({
diff --git a/apps/sim/app/credential-groups/enroll/[token]/page.tsx b/apps/sim/app/credential-groups/enroll/[token]/page.tsx
index 790319a44f2..2345b80c44f 100644
--- a/apps/sim/app/credential-groups/enroll/[token]/page.tsx
+++ b/apps/sim/app/credential-groups/enroll/[token]/page.tsx
@@ -17,7 +17,7 @@ import { enforcePublicCredentialGroupIpRateLimit } from '@/lib/credential-groups
 import { organizationRoutes } from '@/lib/navigation/paths'
 import { SEARCH_CONNECTORS } from '@/lib/sim-search/connectors'
 import { AuthHeader, SupportFooter } from '@/app/(auth)/components'
-import { LogoShell } from '@/app/(landing)/components'
+import { LogoShell } from '@/app/(landing)/components/logo-shell'
 import { OAuthConnectLink } from '@/app/credential-groups/enroll/[token]/oauth-reconnect-link'
 import { CredentialGroupOAuthToast } from '@/app/credential-groups/enroll/[token]/oauth-toast'
 import {
diff --git a/apps/sim/app/desktop/components/desktop-handoff-shell/desktop-handoff-shell.tsx b/apps/sim/app/desktop/components/desktop-handoff-shell/desktop-handoff-shell.tsx
index 4d9845c67eb..bf65d74d382 100644
--- a/apps/sim/app/desktop/components/desktop-handoff-shell/desktop-handoff-shell.tsx
+++ b/apps/sim/app/desktop/components/desktop-handoff-shell/desktop-handoff-shell.tsx
@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react'
-import { LogoShell } from '@/app/(landing)/components'
+import { LogoShell } from '@/app/(landing)/components/logo-shell'
 
 interface DesktopHandoffShellProps {
   title: string
diff --git a/apps/sim/app/f/[token]/public-file-auth-shell.tsx b/apps/sim/app/f/[token]/public-file-auth-shell.tsx
index 5adb3ae8fd1..24da9e8d470 100644
--- a/apps/sim/app/f/[token]/public-file-auth-shell.tsx
+++ b/apps/sim/app/f/[token]/public-file-auth-shell.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import { SupportFooter } from '@/app/(auth)/components/support-footer'
-import { LogoShell } from '@/app/(landing)/components'
+import { LogoShell } from '@/app/(landing)/components/logo-shell'
 
 interface PublicFileAuthShellProps {
   title: string
diff --git a/apps/sim/app/global-error.tsx b/apps/sim/app/global-error.tsx
index 8c9920b0621..578897f1cb8 100644
--- a/apps/sim/app/global-error.tsx
+++ b/apps/sim/app/global-error.tsx
@@ -3,7 +3,7 @@
 import { Chip } from '@sim/emcn'
 import { StatusPageContent } from '@/components/status-page'
 import { season } from '@/app/_styles/fonts/season/season'
-import { LogoShell } from '@/app/(landing)/components'
+import { LogoShell } from '@/app/(landing)/components/logo-shell'
 import '@/app/_styles/globals.css'
 
 interface GlobalErrorProps {
diff --git a/apps/sim/app/invite/[id]/invite.tsx b/apps/sim/app/invite/[id]/invite.tsx
index f762c4ae795..945e0779d05 100644
--- a/apps/sim/app/invite/[id]/invite.tsx
+++ b/apps/sim/app/invite/[id]/invite.tsx
@@ -24,6 +24,11 @@ const logger = createLogger('InviteById')
 /** Workspace names listed in the invitation title before collapsing into an "and N more" tail. */
 const MAX_LISTED_WORKSPACE_NAMES = 3
 
+/** A document navigation, so the marketing surface initializes its own theme store. */
+function returnHome(): void {
+  window.location.href = '/'
+}
+
 /**
  * Goes through the shared builder so the invite page cannot drift from the
  * cross-link shape the auth pages use.
@@ -408,10 +413,7 @@ export default function Invite({ registrationDisabled }: InviteProps) {
           title="You've been invited!"
           description={prompt.description}
           icon='userPlus'
-          actions={[
-            ...prompt.actions,
-            { label: 'Return to Home', onClick: () => router.push('/') },
-          ]}
+          actions={[...prompt.actions, { label: 'Return to Home', onClick: returnHome }]}
         />
       </InviteLayout>
     )
@@ -444,7 +446,7 @@ export default function Invite({ registrationDisabled }: InviteProps) {
                   router.push(inviteAuthLink('/login', callbackUrl))
                 },
               },
-              { label: 'Return to Home', onClick: () => router.push('/') },
+              { label: 'Return to Home', onClick: returnHome },
             ]}
           />
         </InviteLayout>
@@ -461,7 +463,7 @@ export default function Invite({ registrationDisabled }: InviteProps) {
             icon='users'
             actions={[
               { label: 'Manage Team Settings', onClick: () => router.push(APP_ENTRY_PATH) },
-              { label: 'Return to Home', onClick: () => router.push('/') },
+              { label: 'Return to Home', onClick: returnHome },
             ]}
           />
         </InviteLayout>
@@ -489,7 +491,7 @@ export default function Invite({ registrationDisabled }: InviteProps) {
                       onClick: () => router.push(inviteAuthLink('/signup', callbackUrl)),
                     },
                   ]),
-              { label: 'Return to Home', onClick: () => router.push('/') },
+              { label: 'Return to Home', onClick: returnHome },
             ]}
           />
         </InviteLayout>
@@ -500,7 +502,7 @@ export default function Invite({ registrationDisabled }: InviteProps) {
     if (error.canRetry) {
       actions.push({ label: 'Try Again', onClick: () => window.location.reload() })
     }
-    actions.push({ label: 'Return to Home', onClick: () => router.push('/') })
+    actions.push({ label: 'Return to Home', onClick: returnHome })
 
     return (
       <InviteLayout>
@@ -539,7 +541,7 @@ export default function Invite({ registrationDisabled }: InviteProps) {
           title='Welcome!'
           description={`You have successfully joined ${displayName}. Redirecting...`}
           icon='success'
-          actions={[{ label: 'Return to Home', onClick: () => router.push('/') }]}
+          actions={[{ label: 'Return to Home', onClick: returnHome }]}
         />
       </InviteLayout>
     )
@@ -561,7 +563,7 @@ export default function Invite({ registrationDisabled }: InviteProps) {
             disabled: isAccepting,
             loading: isAccepting,
           },
-          { label: 'Return to Home', onClick: () => router.push('/') },
+          { label: 'Return to Home', onClick: returnHome },
         ]}
       />
     </InviteLayout>
diff --git a/apps/sim/app/invite/components/status-card.tsx b/apps/sim/app/invite/components/status-card.tsx
index 9bea03b6c1c..24e76392d43 100644
--- a/apps/sim/app/invite/components/status-card.tsx
+++ b/apps/sim/app/invite/components/status-card.tsx
@@ -1,9 +1,13 @@
 'use client'
 import { Chip, cn, Loader } from '@sim/emcn'
-import { useRouter } from 'next/navigation'
 import { AuthSubmitButton } from '@/app/(auth)/components'
 import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants'
 
+/** A document navigation, so the marketing surface initializes its own theme store. */
+function returnHome(): void {
+  window.location.href = '/'
+}
+
 interface InviteStatusCardProps {
   type: 'login' | 'loading' | 'error' | 'success' | 'invitation' | 'warning'
   title: string
@@ -28,8 +32,6 @@ export function InviteStatusCard({
   actions = EMPTY_ACTIONS,
   isExpiredError = false,
 }: InviteStatusCardProps) {
-  const router = useRouter()
-
   if (type === 'loading') {
     return (
       <>
@@ -53,7 +55,7 @@ export function InviteStatusCard({
 
       <div className='mt-8 w-full max-w-[410px] space-y-3'>
         {isExpiredError && (
-          <AuthSubmitButton type='button' onClick={() => router.push('/')} loadingLabel=''>
+          <AuthSubmitButton type='button' onClick={returnHome} loadingLabel=''>
             Request New Invitation
           </AuthSubmitButton>
         )}
@@ -76,7 +78,7 @@ export function InviteStatusCard({
               fullWidth
               onClick={action.onClick}
               disabled={action.disabled || action.loading}
-              className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border-1)]')}
+              className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border)]')}
             >
               {action.loading ? (
                 <span className='flex items-center gap-2'>
diff --git a/apps/sim/app/not-found.tsx b/apps/sim/app/not-found.tsx
index 1c1762b1dfb..4da58edfd75 100644
--- a/apps/sim/app/not-found.tsx
+++ b/apps/sim/app/not-found.tsx
@@ -1,7 +1,7 @@
-import { ChipLink } from '@sim/emcn'
 import type { Metadata } from 'next'
 import { StatusPageContent } from '@/components/status-page'
-import { LogoShell } from '@/app/(landing)/components'
+import { ReturnHomeLink } from '@/components/status-page/return-home-link'
+import { LogoShell } from '@/app/(landing)/components/logo-shell'
 
 export const metadata: Metadata = {
   title: 'Page Not Found',
@@ -10,14 +10,12 @@ export const metadata: Metadata = {
 
 export default function NotFound() {
   return (
-    <LogoShell center>
+    <LogoShell center theme='inherit'>
       <StatusPageContent
         title='Page not found'
         description="The page you're looking for doesn't exist or has been moved."
       >
-        <ChipLink variant='primary' href='/'>
-          Return home
-        </ChipLink>
+        <ReturnHomeLink />
       </StatusPageContent>
     </LogoShell>
   )
diff --git a/apps/sim/app/oauth/credential-connected/page.tsx b/apps/sim/app/oauth/credential-connected/page.tsx
index 289d49be15f..731d2528983 100644
--- a/apps/sim/app/oauth/credential-connected/page.tsx
+++ b/apps/sim/app/oauth/credential-connected/page.tsx
@@ -1,7 +1,7 @@
 import { ChipLink } from '@sim/emcn'
 import type { Metadata } from 'next'
 import { APP_ENTRY_PATH } from '@/lib/navigation/paths'
-import { LogoShell } from '@/app/(landing)/components'
+import { LogoShell } from '@/app/(landing)/components/logo-shell'
 
 export const metadata: Metadata = {
   title: 'Credential connected',
diff --git a/apps/sim/app/sitemap.ts b/apps/sim/app/sitemap.ts
index 8cf342837d6..dc78158068a 100644
--- a/apps/sim/app/sitemap.ts
+++ b/apps/sim/app/sitemap.ts
@@ -3,6 +3,7 @@ import { getAllPostMeta as getAllBlogPostMeta } from '@/lib/blog/registry'
 import type { ContentMeta } from '@/lib/content/schema'
 import { latestModified } from '@/lib/content/utils'
 import { SITE_URL } from '@/lib/core/utils/urls'
+import { getAllCustomerStoryMeta } from '@/lib/customers/registry'
 import { INTEGRATIONS, INTEGRATIONS_UPDATED_AT } from '@/lib/integrations'
 import { getAllPostMeta as getAllLibraryPostMeta } from '@/lib/library/registry'
 import {
@@ -32,15 +33,20 @@ function buildAuthorPages(posts: ContentMeta[], basePath: string): MetadataRoute
 
 /**
  * Generate the public sitemap by composing static landing pages with the
- * dynamic catalogs (blog posts, library posts, authors, integrations, model
- * providers, and individual models). Per-integration entries are emitted
+ * dynamic catalogs (blog posts, library posts, published customer stories,
+ * authors, integrations, model providers, and individual models).
+ * Per-integration entries are emitted
  * under `/integrations/{slug}` to match the landing route at
  * `app/(landing)/integrations/[slug]`; slugs are guaranteed unique
  * by the catalog generator in `scripts/generate-docs.ts`.
  */
 export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
   const baseUrl = SITE_URL
-  const [posts, libraryPosts] = await Promise.all([getAllBlogPostMeta(), getAllLibraryPostMeta()])
+  const [posts, libraryPosts, customerStories] = await Promise.all([
+    getAllBlogPostMeta(),
+    getAllLibraryPostMeta(),
+    getAllCustomerStoryMeta(),
+  ])
 
   const latestPostDateValue = latestModified(posts)
   const latestLibraryPostDate = latestModified(libraryPosts)
@@ -56,6 +62,9 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
     {
       url: baseUrl,
     },
+    {
+      url: `${baseUrl}/platform`,
+    },
     {
       url: `${baseUrl}/workflows`,
     },
@@ -158,6 +167,20 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
   }))
   const libraryAuthorPages = buildAuthorPages(libraryPosts, '/library')
 
+  const customerPages: MetadataRoute.Sitemap =
+    customerStories.length > 0
+      ? [
+          {
+            url: `${baseUrl}/customers`,
+            lastModified: latestModified(customerStories),
+          },
+          ...customerStories.map((story) => ({
+            url: `${baseUrl}/customers/${story.slug}`,
+            lastModified: new Date(story.updated ?? story.date),
+          })),
+        ]
+      : []
+
   const integrationPages: MetadataRoute.Sitemap = INTEGRATIONS.map((integration) => ({
     url: `${baseUrl}/integrations/${integration.slug}`,
     lastModified: integrationsUpdatedAt,
@@ -204,6 +227,7 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
     ...authorPages,
     ...libraryPages,
     ...libraryAuthorPages,
+    ...customerPages,
     ...integrationPages,
     ...providerPages,
     ...modelEntries,
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group-view.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group-view.tsx
new file mode 100644
index 00000000000..dd7abace0d6
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group-view.tsx
@@ -0,0 +1,445 @@
+'use client'
+
+import {
+  type ComponentType,
+  type ReactNode,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { ChevronDown, cn, Expandable, ExpandableContent, OverflowText } from '@sim/emcn'
+import { ShimmerText } from '@/components/ui'
+import { isBrowserAgentAvailable } from '@/lib/browser-agent/transport'
+import { RETIRED_BROWSER_REQUEST_TAKEOVER_ID } from '@/lib/copilot/tools/retired-tools'
+import { renderInlineMarkdown } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/inline-markdown'
+import type { ToolCallItemProps } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item'
+import {
+  getAgentIcon,
+  isToolDone,
+} from '@/app/workspace/[workspaceId]/home/components/message-content/utils'
+import { type ToolCallData, ToolCallStatus } from '@/app/workspace/[workspaceId]/home/types'
+import { useSmoothText } from '@/hooks/use-smooth-text'
+
+/**
+ * A subagent group nested inside another agent's output. Carries the same shape
+ * as a top-level group so {@link AgentGroupView} can render it recursively, which is
+ * how deterministic parent/child nesting (e.g. Deploy inside Workflow) is drawn.
+ */
+export interface NestedAgentGroup {
+  id: string
+  agentName: string
+  agentLabel: string
+  items: AgentGroupItem[]
+  isDelegating: boolean
+  isOpen: boolean
+}
+
+export type AgentGroupItem =
+  | { type: 'text'; content: string }
+  | { type: 'tool'; data: ToolCallData }
+  | { type: 'agent_group'; group: NestedAgentGroup }
+
+export interface AgentGroupProps {
+  agentName: string
+  agentLabel: string
+  items: AgentGroupItem[]
+  isDelegating?: boolean
+  isStreaming?: boolean
+  /** This group is the latest section in its parent sequence (drives collapse). */
+  isCurrentSection?: boolean
+  /** The subagent lane is still open (no subagent_end yet) — i.e. actively running. */
+  isLaneOpen?: boolean
+  /** Opens the group on first render without changing production's automatic collapse rules. */
+  defaultExpanded?: boolean
+  /** Keeps the activity viewport anchored at the top while new rows stream in. */
+  autoScrollActivity?: boolean
+}
+
+function toolStatusTitle(tool: ToolCallData): string {
+  return tool.displayTitle || String(tool.toolName ?? '')
+}
+
+/**
+ * Every tool in a group, in stream order, including those run by nested
+ * agents. A parent's status line speaks for the whole subtree it delegated,
+ * so a grandchild's work is what surfaces while the parent itself waits.
+ */
+function collectGroupTools(items: AgentGroupItem[]): ToolCallData[] {
+  const tools: ToolCallData[] = []
+  const walk = (list: AgentGroupItem[]) => {
+    for (const item of list) {
+      if (item.type === 'tool') tools.push(item.data)
+      else if (item.type === 'agent_group') walk(item.group.items)
+    }
+  }
+  walk(items)
+  return tools
+}
+
+/** True when any row in this group (or a nested one) is waiting on a permission decision. */
+function hasAwaitingApproval(items: AgentGroupItem[]): boolean {
+  return items.some((item) => {
+    if (item.type === 'tool') return item.data.status === ToolCallStatus.awaiting_approval
+    // Text rows carry no tool calls, so only nested groups need recursing into.
+    return item.type === 'agent_group' ? hasAwaitingApproval(item.group.items) : false
+  })
+}
+
+interface ActiveBrowserTakeover {
+  id: string
+  reason: string
+}
+
+/** Returns this group's own active browser hand-back, if any. */
+function getActiveBrowserTakeover(items: AgentGroupItem[]): ActiveBrowserTakeover | null {
+  for (let index = items.length - 1; index >= 0; index--) {
+    const item = items[index]
+    if (item.type !== 'tool') continue
+    if (
+      item.data.toolName === RETIRED_BROWSER_REQUEST_TAKEOVER_ID &&
+      item.data.status === ToolCallStatus.executing
+    ) {
+      const reason = item.data.params?.reason
+      return {
+        id: item.data.id,
+        reason: typeof reason === 'string' ? reason.trim() : '',
+      }
+    }
+    // Browser-agent tools are serialized. Once a newer tool exists, an older
+    // executing takeover is stale and must not keep a question on screen.
+    return null
+  }
+  return null
+}
+
+/** True when a nested group owns a browser hand-back question. */
+function hasNestedBrowserTakeover(items: AgentGroupItem[]): boolean {
+  return items.some(
+    (item) =>
+      item.type === 'agent_group' &&
+      item.group.isOpen &&
+      (getActiveBrowserTakeover(item.group.items) !== null ||
+        hasNestedBrowserTakeover(item.group.items))
+  )
+}
+
+export function isAgentGroupResolved(items: AgentGroupItem[]): boolean {
+  let hasWork = false
+  for (const item of items) {
+    if (item.type === 'tool') {
+      hasWork = true
+      if (!isToolDone(item.data.status)) return false
+    } else if (item.type === 'agent_group') {
+      hasWork = true
+      if (item.group.isDelegating || !isAgentGroupResolved(item.group.items)) return false
+    }
+  }
+  return hasWork
+}
+
+interface AgentGroupViewProps extends AgentGroupProps {
+  /** Supplies tool behavior without coupling the group layout to the block registry. */
+  ToolCallComponent: ComponentType<ToolCallItemProps>
+  renderBrowserTakeover?: (reason: string) => ReactNode
+}
+
+export function AgentGroupView({
+  agentName,
+  agentLabel,
+  items,
+  isDelegating = false,
+  isStreaming = false,
+  isCurrentSection = false,
+  isLaneOpen = false,
+  defaultExpanded = false,
+  autoScrollActivity = true,
+  ToolCallComponent,
+  renderBrowserTakeover,
+}: AgentGroupViewProps) {
+  const AgentIcon = getAgentIcon(agentName)
+  const isMainAgent = agentName === 'mothership'
+  // Collapsed status line: the latest tool call, always in its RUNNING
+  // phrasing — it never flips to the completed rewrite (that lives in the
+  // expanded log). Work delegated further down bubbles up, so a group whose
+  // own turn is idle still narrates what its nested agent is doing rather
+  // than freezing on its last own tool. With several tools running at any
+  // depth, the most recently started wins and the rest become "+ n"; between
+  // rounds the last tool's title stays frozen; a closed lane shows the bare
+  // name.
+  const status = useMemo(() => {
+    if (isMainAgent || !isLaneOpen) return undefined
+    const tools = collectGroupTools(items)
+    const running = tools.filter((tool) => tool.status === ToolCallStatus.executing)
+    if (running.length > 0) {
+      const latest = running.reduce((newest, tool) =>
+        (tool.startedAt ?? 0) >= (newest.startedAt ?? 0) ? tool : newest
+      )
+      const title = toolStatusTitle(latest)
+      return running.length > 1 ? `${title} + ${running.length - 1}` : title
+    }
+    const last = tools.at(-1)
+    return last ? toolStatusTitle(last) : undefined
+  }, [isLaneOpen, isMainAgent, items])
+  const headerText = status ? `${agentLabel} — ${status}` : agentLabel
+  const hasItems = items.length > 0
+  const resolved = isAgentGroupResolved(items)
+  const browserAgentAvailable = isBrowserAgentAvailable()
+  const activeBrowserTakeover =
+    browserAgentAvailable && isLaneOpen ? getActiveBrowserTakeover(items) : null
+  const nestedBrowserTakeover = browserAgentAvailable && hasNestedBrowserTakeover(items)
+  const isWorking =
+    !activeBrowserTakeover && ((isDelegating && !resolved) || (isStreaming && isLaneOpen))
+
+  // SUBAGENT groups never auto-expand: the collapsed row IS the live view —
+  // label plus latest running tool title. Expanding is a deliberate user
+  // action; only a pending permission prompt or a browser hand-back forces
+  // one open. The MAIN lane ("Sim") is not a delegation card: its narration
+  // and tool calls are the turn itself, so it keeps the original live-expand
+  // behavior (open while streaming/current, settles when superseded).
+  const autoExpanded = isMainAgent && isStreaming && (isCurrentSection || isLaneOpen || !resolved)
+  const [manualExpanded, setManualExpanded] = useState<boolean | null>(
+    defaultExpanded ? true : null
+  )
+  const [expandedTakeoverId, setExpandedTakeoverId] = useState<string | null>(null)
+  // An outstanding permission prompt overrides a manual collapse: the turn
+  // cannot proceed until it is answered, so hiding it would deadlock the chat
+  // with nothing on screen to explain why.
+  const expanded =
+    hasAwaitingApproval(items) ||
+    nestedBrowserTakeover ||
+    (activeBrowserTakeover
+      ? expandedTakeoverId === activeBrowserTakeover.id
+      : (manualExpanded ?? autoExpanded))
+
+  const toggleExpanded = () => {
+    if (activeBrowserTakeover) {
+      setExpandedTakeoverId(expanded ? null : activeBrowserTakeover.id)
+      return
+    }
+    setManualExpanded(!expanded)
+  }
+
+  return (
+    <div className='flex flex-col gap-1.5'>
+      {hasItems ? (
+        <button
+          type='button'
+          onClick={toggleExpanded}
+          className='group/agent flex w-full min-w-0 cursor-pointer items-center gap-2 text-left'
+        >
+          <div className='flex size-[16px] shrink-0 items-center justify-center'>
+            <AgentIcon className='size-[16px] text-[var(--text-icon)]' />
+          </div>
+          {isWorking ? (
+            <ShimmerText className='min-w-0 truncate text-sm'>{headerText}</ShimmerText>
+          ) : (
+            <OverflowText label={headerText} className='text-[var(--text-body)] text-sm' />
+          )}
+          <ChevronDown
+            className={cn(
+              'size-[14px] shrink-0 text-[var(--text-icon)] opacity-0 transition-[transform,opacity] duration-150 group-hover/agent:opacity-100 group-focus-visible/agent:opacity-100',
+              !expanded && '-rotate-90'
+            )}
+          />
+        </button>
+      ) : (
+        <div className='flex min-w-0 items-center gap-2'>
+          <div className='flex size-[16px] shrink-0 items-center justify-center'>
+            <AgentIcon className='size-[16px] text-[var(--text-icon)]' />
+          </div>
+          {isWorking ? (
+            <ShimmerText className='min-w-0 truncate text-sm'>{headerText}</ShimmerText>
+          ) : (
+            <OverflowText label={headerText} className='text-[var(--text-body)] text-sm' />
+          )}
+        </div>
+      )}
+      {hasItems && (
+        <Expandable expanded={expanded}>
+          <ExpandableContent>
+            <BoundedViewport
+              isStreaming={isStreaming && autoScrollActivity}
+              unbounded={nestedBrowserTakeover}
+            >
+              <div className='flex flex-col gap-1.5 py-0.5'>
+                {items.map((item, idx) => {
+                  if (item.type === 'tool') {
+                    return (
+                      <ToolCallComponent
+                        key={item.data.id}
+                        toolCallId={item.data.id}
+                        toolName={item.data.toolName}
+                        displayTitle={item.data.displayTitle}
+                        status={item.data.status}
+                        params={item.data.params}
+                        result={item.data.result}
+                        streamingArgs={item.data.streamingArgs}
+                        startedAt={item.data.startedAt}
+                      />
+                    )
+                  }
+                  if (item.type === 'agent_group') {
+                    return (
+                      <div key={item.group.id} className='pl-6'>
+                        <AgentGroupView
+                          ToolCallComponent={ToolCallComponent}
+                          renderBrowserTakeover={renderBrowserTakeover}
+                          agentName={item.group.agentName}
+                          agentLabel={item.group.agentLabel}
+                          items={item.group.items}
+                          isDelegating={item.group.isDelegating}
+                          isStreaming={isStreaming}
+                          isCurrentSection={idx === items.length - 1}
+                          isLaneOpen={item.group.isOpen}
+                        />
+                      </div>
+                    )
+                  }
+                  return (
+                    <NarrationText
+                      key={`text-${idx}`}
+                      content={item.content}
+                      isStreaming={isStreaming && idx === items.length - 1}
+                    />
+                  )
+                })}
+              </div>
+            </BoundedViewport>
+          </ExpandableContent>
+        </Expandable>
+      )}
+      {activeBrowserTakeover && (
+        <div key={activeBrowserTakeover.id} className='animate-stream-fade-in'>
+          {renderBrowserTakeover?.(activeBrowserTakeover.reason)}
+        </div>
+      )}
+    </div>
+  )
+}
+
+interface NarrationTextProps {
+  content: string
+  /** This row is the group's live tail — pace its reveal like top-level text. */
+  isStreaming: boolean
+}
+
+/**
+ * A narration row inside an agent group. The live tail row is
+ * paced with {@link useSmoothText} so streamed chunks reveal word-by-word
+ * instead of popping in, matching the top-level text treatment.
+ */
+function NarrationText({ content, isStreaming }: NarrationTextProps) {
+  const revealed = useSmoothText(content, isStreaming)
+
+  return (
+    <span className='pl-6 text-[13px] text-[var(--text-muted)] leading-[18px]'>
+      {renderInlineMarkdown(revealed.trim())}
+    </span>
+  )
+}
+
+interface BoundedViewportProps {
+  children: React.ReactNode
+  isStreaming: boolean
+  /** A nested blocking interaction must not be clipped by this ancestor's log viewport. */
+  unbounded?: boolean
+}
+
+const BOTTOM_STICK_THRESHOLD_PX = 8
+
+function BoundedViewport({ children, isStreaming, unbounded = false }: BoundedViewportProps) {
+  const ref = useRef<HTMLDivElement>(null)
+  const rafRef = useRef<number | null>(null)
+  const stickToBottomRef = useRef(true)
+  const prevScrollTopRef = useRef(0)
+  const [hasOverflow, setHasOverflow] = useState(false)
+
+  useEffect(() => {
+    if (unbounded) {
+      stickToBottomRef.current = true
+      return
+    }
+    const el = ref.current
+    if (!el) return
+    // Upward user input detaches auto-stick; a downward scroll reaching the
+    // bottom re-attaches it (a small upward flick can't re-stick itself).
+    const handleWheel = (e: WheelEvent) => {
+      if (e.deltaY < 0) stickToBottomRef.current = false
+    }
+    const handleScroll = () => {
+      const distance = el.scrollHeight - el.scrollTop - el.clientHeight
+      if (distance < BOTTOM_STICK_THRESHOLD_PX && el.scrollTop > prevScrollTopRef.current) {
+        stickToBottomRef.current = true
+      }
+      prevScrollTopRef.current = el.scrollTop
+    }
+    el.addEventListener('wheel', handleWheel, { passive: true })
+    el.addEventListener('scroll', handleScroll, { passive: true })
+    return () => {
+      el.removeEventListener('wheel', handleWheel)
+      el.removeEventListener('scroll', handleScroll)
+    }
+  }, [unbounded])
+
+  useLayoutEffect(() => {
+    const el = ref.current
+    if (rafRef.current !== null) {
+      window.cancelAnimationFrame(rafRef.current)
+      rafRef.current = null
+    }
+    if (unbounded) {
+      setHasOverflow(false)
+      return
+    }
+    if (el) {
+      const next = el.scrollHeight > el.clientHeight
+      setHasOverflow((prev) => (prev === next ? prev : next))
+    }
+    if (!isStreaming) return
+    const tick = () => {
+      const node = ref.current
+      if (!node || !stickToBottomRef.current) {
+        rafRef.current = null
+        return
+      }
+      const target = node.scrollHeight - node.clientHeight
+      const gap = target - node.scrollTop
+      if (gap < 1) {
+        rafRef.current = null
+        return
+      }
+      node.scrollTop = node.scrollTop + Math.max(1, gap * 0.18)
+      rafRef.current = window.requestAnimationFrame(tick)
+    }
+    rafRef.current = window.requestAnimationFrame(tick)
+    return () => {
+      if (rafRef.current !== null) {
+        window.cancelAnimationFrame(rafRef.current)
+        rafRef.current = null
+      }
+    }
+  })
+
+  return (
+    <div className='relative'>
+      <div
+        ref={ref}
+        className={cn(
+          'pr-2',
+          !unbounded && 'scrollbar-hide max-h-[110px] overflow-y-auto',
+          hasOverflow && 'py-1'
+        )}
+      >
+        {children}
+      </div>
+      {!unbounded && hasOverflow && (
+        <>
+          <div className='pointer-events-none absolute top-0 right-2 left-0 h-3 bg-linear-to-b from-[var(--bg)] to-transparent' />
+          <div className='pointer-events-none absolute right-2 bottom-0 left-0 h-3 bg-linear-to-t from-[var(--bg)] to-transparent' />
+        </>
+      )}
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.test.ts b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.test.ts
index 42f0e367adb..2057028ff17 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.test.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.test.ts
@@ -4,9 +4,10 @@
 import { act, createElement } from 'react'
 import { createRoot } from 'react-dom/client'
 import { describe, expect, it, vi } from 'vitest'
+import { AgentGroup } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group'
+import type { AgentGroupItem } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group-view'
+import { isAgentGroupResolved } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group-view'
 import type { ToolCallData, ToolCallStatus } from '../../../../types'
-import type { AgentGroupItem } from './agent-group'
-import { AgentGroup, isAgentGroupResolved } from './agent-group'
 
 vi.mock('@/lib/browser-agent/transport', () => ({
   isBrowserAgentAvailable: () => true,
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx
index b98be496e84..ec56107020f 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx
@@ -1,416 +1,23 @@
 'use client'
 
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
-import { ChevronDown, cn, Expandable, ExpandableContent, OverflowText } from '@sim/emcn'
-import { ShimmerText } from '@/components/ui'
-import { isBrowserAgentAvailable } from '@/lib/browser-agent/transport'
-import { RETIRED_BROWSER_REQUEST_TAKEOVER_ID } from '@/lib/copilot/tools/retired-tools'
-import { useSmoothText } from '@/hooks/use-smooth-text'
-import { type ToolCallData, ToolCallStatus } from '../../../../types'
-import { getAgentIcon, isToolDone } from '../../utils'
-import { CredentialDisplay } from '../special-tags'
-import { renderInlineMarkdown } from './inline-markdown'
-import { ToolCallItem } from './tool-call-item'
+import {
+  type AgentGroupProps,
+  AgentGroupView,
+} from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group-view'
+import { ToolCallItem } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item'
+import { CredentialDisplay } from '@/app/workspace/[workspaceId]/home/components/message-content/components/special-tags'
 
-/**
- * A subagent group nested inside another agent's output. Carries the same shape
- * as a top-level group so {@link AgentGroup} can render it recursively, which is
- * how deterministic parent/child nesting (e.g. Deploy inside Workflow) is drawn.
- */
-export interface NestedAgentGroup {
-  id: string
-  agentName: string
-  agentLabel: string
-  items: AgentGroupItem[]
-  isDelegating: boolean
-  isOpen: boolean
+function renderBrowserTakeover(reason: string) {
+  return <CredentialDisplay data={[{ type: 'browser_takeover', name: reason }]} />
 }
 
-export type AgentGroupItem =
-  | { type: 'text'; content: string }
-  | { type: 'tool'; data: ToolCallData }
-  | { type: 'agent_group'; group: NestedAgentGroup }
-
-interface AgentGroupProps {
-  agentName: string
-  agentLabel: string
-  items: AgentGroupItem[]
-  isDelegating?: boolean
-  isStreaming?: boolean
-  /** This group is the latest section in its parent sequence (drives collapse). */
-  isCurrentSection?: boolean
-  /** The subagent lane is still open (no subagent_end yet) — i.e. actively running. */
-  isLaneOpen?: boolean
-}
-
-function toolStatusTitle(tool: ToolCallData): string {
-  return tool.displayTitle || String(tool.toolName ?? '')
-}
-
-/**
- * Every tool in a group, in stream order, including those run by nested
- * agents. A parent's status line speaks for the whole subtree it delegated,
- * so a grandchild's work is what surfaces while the parent itself waits.
- */
-function collectGroupTools(items: AgentGroupItem[]): ToolCallData[] {
-  const tools: ToolCallData[] = []
-  const walk = (list: AgentGroupItem[]) => {
-    for (const item of list) {
-      if (item.type === 'tool') tools.push(item.data)
-      else if (item.type === 'agent_group') walk(item.group.items)
-    }
-  }
-  walk(items)
-  return tools
-}
-
-/** True when any row in this group (or a nested one) is waiting on a permission decision. */
-function hasAwaitingApproval(items: AgentGroupItem[]): boolean {
-  return items.some((item) => {
-    if (item.type === 'tool') return item.data.status === ToolCallStatus.awaiting_approval
-    // Text rows carry no tool calls, so only nested groups need recursing into.
-    return item.type === 'agent_group' ? hasAwaitingApproval(item.group.items) : false
-  })
-}
-
-interface ActiveBrowserTakeover {
-  id: string
-  reason: string
-}
-
-/** Returns this group's own active browser hand-back, if any. */
-function getActiveBrowserTakeover(items: AgentGroupItem[]): ActiveBrowserTakeover | null {
-  for (let index = items.length - 1; index >= 0; index--) {
-    const item = items[index]
-    if (item.type !== 'tool') continue
-    if (
-      item.data.toolName === RETIRED_BROWSER_REQUEST_TAKEOVER_ID &&
-      item.data.status === ToolCallStatus.executing
-    ) {
-      const reason = item.data.params?.reason
-      return {
-        id: item.data.id,
-        reason: typeof reason === 'string' ? reason.trim() : '',
-      }
-    }
-    // Browser-agent tools are serialized. Once a newer tool exists, an older
-    // executing takeover is stale and must not keep a question on screen.
-    return null
-  }
-  return null
-}
-
-/** True when a nested group owns a browser hand-back question. */
-function hasNestedBrowserTakeover(items: AgentGroupItem[]): boolean {
-  return items.some(
-    (item) =>
-      item.type === 'agent_group' &&
-      item.group.isOpen &&
-      (getActiveBrowserTakeover(item.group.items) !== null ||
-        hasNestedBrowserTakeover(item.group.items))
-  )
-}
-
-export function isAgentGroupResolved(items: AgentGroupItem[]): boolean {
-  let hasWork = false
-  for (const item of items) {
-    if (item.type === 'tool') {
-      hasWork = true
-      if (!isToolDone(item.data.status)) return false
-    } else if (item.type === 'agent_group') {
-      hasWork = true
-      if (item.group.isDelegating || !isAgentGroupResolved(item.group.items)) return false
-    }
-  }
-  return hasWork
-}
-
-export function AgentGroup({
-  agentName,
-  agentLabel,
-  items,
-  isDelegating = false,
-  isStreaming = false,
-  isCurrentSection = false,
-  isLaneOpen = false,
-}: AgentGroupProps) {
-  const AgentIcon = getAgentIcon(agentName)
-  const isMainAgent = agentName === 'mothership'
-  // Collapsed status line: the latest tool call, always in its RUNNING
-  // phrasing — it never flips to the completed rewrite (that lives in the
-  // expanded log). Work delegated further down bubbles up, so a group whose
-  // own turn is idle still narrates what its nested agent is doing rather
-  // than freezing on its last own tool. With several tools running at any
-  // depth, the most recently started wins and the rest become "+ n"; between
-  // rounds the last tool's title stays frozen; a closed lane shows the bare
-  // name.
-  const status = useMemo(() => {
-    if (isMainAgent || !isLaneOpen) return undefined
-    const tools = collectGroupTools(items)
-    const running = tools.filter((tool) => tool.status === ToolCallStatus.executing)
-    if (running.length > 0) {
-      const latest = running.reduce((newest, tool) =>
-        (tool.startedAt ?? 0) >= (newest.startedAt ?? 0) ? tool : newest
-      )
-      const title = toolStatusTitle(latest)
-      return running.length > 1 ? `${title} + ${running.length - 1}` : title
-    }
-    const last = tools.at(-1)
-    return last ? toolStatusTitle(last) : undefined
-  }, [isLaneOpen, isMainAgent, items])
-  const headerText = status ? `${agentLabel} — ${status}` : agentLabel
-  const hasItems = items.length > 0
-  const resolved = isAgentGroupResolved(items)
-  const browserAgentAvailable = isBrowserAgentAvailable()
-  const activeBrowserTakeover =
-    browserAgentAvailable && isLaneOpen ? getActiveBrowserTakeover(items) : null
-  const nestedBrowserTakeover = browserAgentAvailable && hasNestedBrowserTakeover(items)
-  const isWorking =
-    !activeBrowserTakeover && ((isDelegating && !resolved) || (isStreaming && isLaneOpen))
-
-  // SUBAGENT groups never auto-expand: the collapsed row IS the live view —
-  // label plus latest running tool title. Expanding is a deliberate user
-  // action; only a pending permission prompt or a browser hand-back forces
-  // one open. The MAIN lane ("Sim") is not a delegation card: its narration
-  // and tool calls are the turn itself, so it keeps the original live-expand
-  // behavior (open while streaming/current, settles when superseded).
-  const autoExpanded = isMainAgent && isStreaming && (isCurrentSection || isLaneOpen || !resolved)
-  const [manualExpanded, setManualExpanded] = useState<boolean | null>(null)
-  const [expandedTakeoverId, setExpandedTakeoverId] = useState<string | null>(null)
-  // An outstanding permission prompt overrides a manual collapse: the turn
-  // cannot proceed until it is answered, so hiding it would deadlock the chat
-  // with nothing on screen to explain why.
-  const expanded =
-    hasAwaitingApproval(items) ||
-    nestedBrowserTakeover ||
-    (activeBrowserTakeover
-      ? expandedTakeoverId === activeBrowserTakeover.id
-      : (manualExpanded ?? autoExpanded))
-
-  const toggleExpanded = () => {
-    if (activeBrowserTakeover) {
-      setExpandedTakeoverId(expanded ? null : activeBrowserTakeover.id)
-      return
-    }
-    setManualExpanded(!expanded)
-  }
-
-  return (
-    <div className='flex flex-col gap-1.5'>
-      {hasItems ? (
-        <button
-          type='button'
-          onClick={toggleExpanded}
-          className='group/agent flex w-full min-w-0 cursor-pointer items-center gap-2 text-left'
-        >
-          <div className='flex size-[16px] shrink-0 items-center justify-center'>
-            <AgentIcon className='size-[16px] text-[var(--text-icon)]' />
-          </div>
-          {isWorking ? (
-            <ShimmerText className='min-w-0 truncate text-sm'>{headerText}</ShimmerText>
-          ) : (
-            <OverflowText label={headerText} className='text-[var(--text-body)] text-sm' />
-          )}
-          <ChevronDown
-            className={cn(
-              'size-[14px] shrink-0 text-[var(--text-icon)] opacity-0 transition-[transform,opacity] duration-150 group-hover/agent:opacity-100 group-focus-visible/agent:opacity-100',
-              !expanded && '-rotate-90'
-            )}
-          />
-        </button>
-      ) : (
-        <div className='flex min-w-0 items-center gap-2'>
-          <div className='flex size-[16px] shrink-0 items-center justify-center'>
-            <AgentIcon className='size-[16px] text-[var(--text-icon)]' />
-          </div>
-          {isWorking ? (
-            <ShimmerText className='min-w-0 truncate text-sm'>{headerText}</ShimmerText>
-          ) : (
-            <OverflowText label={headerText} className='text-[var(--text-body)] text-sm' />
-          )}
-        </div>
-      )}
-      {hasItems && (
-        <Expandable expanded={expanded}>
-          <ExpandableContent>
-            <BoundedViewport isStreaming={isStreaming} unbounded={nestedBrowserTakeover}>
-              <div className='flex flex-col gap-1.5 py-0.5'>
-                {items.map((item, idx) => {
-                  if (item.type === 'tool') {
-                    return (
-                      <ToolCallItem
-                        key={item.data.id}
-                        toolCallId={item.data.id}
-                        toolName={item.data.toolName}
-                        displayTitle={item.data.displayTitle}
-                        status={item.data.status}
-                        params={item.data.params}
-                        result={item.data.result}
-                        streamingArgs={item.data.streamingArgs}
-                        startedAt={item.data.startedAt}
-                      />
-                    )
-                  }
-                  if (item.type === 'agent_group') {
-                    return (
-                      <div key={item.group.id} className='pl-6'>
-                        <AgentGroup
-                          agentName={item.group.agentName}
-                          agentLabel={item.group.agentLabel}
-                          items={item.group.items}
-                          isDelegating={item.group.isDelegating}
-                          isStreaming={isStreaming}
-                          isCurrentSection={idx === items.length - 1}
-                          isLaneOpen={item.group.isOpen}
-                        />
-                      </div>
-                    )
-                  }
-                  return (
-                    <NarrationText
-                      key={`text-${idx}`}
-                      content={item.content}
-                      isStreaming={isStreaming && idx === items.length - 1}
-                    />
-                  )
-                })}
-              </div>
-            </BoundedViewport>
-          </ExpandableContent>
-        </Expandable>
-      )}
-      {activeBrowserTakeover && (
-        <div key={activeBrowserTakeover.id} className='animate-stream-fade-in'>
-          <CredentialDisplay
-            data={[{ type: 'browser_takeover', name: activeBrowserTakeover.reason }]}
-          />
-        </div>
-      )}
-    </div>
-  )
-}
-
-interface NarrationTextProps {
-  content: string
-  /** This row is the group's live tail — pace its reveal like top-level text. */
-  isStreaming: boolean
-}
-
-/**
- * A narration row inside an agent group. The live tail row is
- * paced with {@link useSmoothText} so streamed chunks reveal word-by-word
- * instead of popping in, matching the top-level text treatment.
- */
-function NarrationText({ content, isStreaming }: NarrationTextProps) {
-  const revealed = useSmoothText(content, isStreaming)
-
-  return (
-    <span className='pl-6 text-[13px] text-[var(--text-muted)] leading-[18px]'>
-      {renderInlineMarkdown(revealed.trim())}
-    </span>
-  )
-}
-
-interface BoundedViewportProps {
-  children: React.ReactNode
-  isStreaming: boolean
-  /** A nested blocking interaction must not be clipped by this ancestor's log viewport. */
-  unbounded?: boolean
-}
-
-const BOTTOM_STICK_THRESHOLD_PX = 8
-
-function BoundedViewport({ children, isStreaming, unbounded = false }: BoundedViewportProps) {
-  const ref = useRef<HTMLDivElement>(null)
-  const rafRef = useRef<number | null>(null)
-  const stickToBottomRef = useRef(true)
-  const prevScrollTopRef = useRef(0)
-  const [hasOverflow, setHasOverflow] = useState(false)
-
-  useEffect(() => {
-    if (unbounded) {
-      stickToBottomRef.current = true
-      return
-    }
-    const el = ref.current
-    if (!el) return
-    // Upward user input detaches auto-stick; a downward scroll reaching the
-    // bottom re-attaches it (a small upward flick can't re-stick itself).
-    const handleWheel = (e: WheelEvent) => {
-      if (e.deltaY < 0) stickToBottomRef.current = false
-    }
-    const handleScroll = () => {
-      const distance = el.scrollHeight - el.scrollTop - el.clientHeight
-      if (distance < BOTTOM_STICK_THRESHOLD_PX && el.scrollTop > prevScrollTopRef.current) {
-        stickToBottomRef.current = true
-      }
-      prevScrollTopRef.current = el.scrollTop
-    }
-    el.addEventListener('wheel', handleWheel, { passive: true })
-    el.addEventListener('scroll', handleScroll, { passive: true })
-    return () => {
-      el.removeEventListener('wheel', handleWheel)
-      el.removeEventListener('scroll', handleScroll)
-    }
-  }, [unbounded])
-
-  useLayoutEffect(() => {
-    const el = ref.current
-    if (rafRef.current !== null) {
-      window.cancelAnimationFrame(rafRef.current)
-      rafRef.current = null
-    }
-    if (unbounded) {
-      setHasOverflow(false)
-      return
-    }
-    if (el) {
-      const next = el.scrollHeight > el.clientHeight
-      setHasOverflow((prev) => (prev === next ? prev : next))
-    }
-    if (!isStreaming) return
-    const tick = () => {
-      const node = ref.current
-      if (!node || !stickToBottomRef.current) {
-        rafRef.current = null
-        return
-      }
-      const target = node.scrollHeight - node.clientHeight
-      const gap = target - node.scrollTop
-      if (gap < 1) {
-        rafRef.current = null
-        return
-      }
-      node.scrollTop = node.scrollTop + Math.max(1, gap * 0.18)
-      rafRef.current = window.requestAnimationFrame(tick)
-    }
-    rafRef.current = window.requestAnimationFrame(tick)
-    return () => {
-      if (rafRef.current !== null) {
-        window.cancelAnimationFrame(rafRef.current)
-        rafRef.current = null
-      }
-    }
-  })
-
+/** Workspace adapter retains permission, handoff, and integration lookup behavior. */
+export function AgentGroup(props: AgentGroupProps) {
   return (
-    <div className='relative'>
-      <div
-        ref={ref}
-        className={cn(
-          'pr-2',
-          !unbounded && 'scrollbar-hide max-h-[110px] overflow-y-auto',
-          hasOverflow && 'py-1'
-        )}
-      >
-        {children}
-      </div>
-      {!unbounded && hasOverflow && (
-        <>
-          <div className='pointer-events-none absolute top-0 right-2 left-0 h-3 bg-linear-to-b from-[var(--bg)] to-transparent' />
-          <div className='pointer-events-none absolute right-2 bottom-0 left-0 h-3 bg-linear-to-t from-[var(--bg)] to-transparent' />
-        </>
-      )}
-    </div>
+    <AgentGroupView
+      {...props}
+      ToolCallComponent={ToolCallItem}
+      renderBrowserTakeover={renderBrowserTakeover}
+    />
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/index.ts b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/index.ts
index 812d818e9a9..7f8d6ef3cdd 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/index.ts
@@ -1,3 +1,7 @@
-export type { AgentGroupItem, NestedAgentGroup } from './agent-group'
-export { AgentGroup, isAgentGroupResolved } from './agent-group'
-export { CircleStop } from './tool-call-item'
+export { AgentGroup } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group'
+export type {
+  AgentGroupItem,
+  NestedAgentGroup,
+} from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group-view'
+export { isAgentGroupResolved } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group-view'
+export { CircleStop } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item'
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx
index f76c5e4bf03..27ac5efbbaf 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useMemo, useState } from 'react'
 import { isPlainRecord } from '@sim/utils/object'
-import { ShimmerText } from '@/components/ui'
 import {
   CallIntegrationTool,
   PrepareFileEdit,
@@ -12,6 +11,7 @@ import { getReadTargetBlock } from '@/lib/copilot/tools/client/read-block'
 import { RETIRED_BROWSER_REQUEST_TAKEOVER_ID } from '@/lib/copilot/tools/retired-tools'
 import { extractStreamingStringArgument } from '@/lib/copilot/tools/streaming-args'
 import { getToolStatusDisplayTitle, getWaitCountdownTitle } from '@/lib/copilot/tools/tool-display'
+import { ToolCallRow } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-row'
 import { BrandIcon } from '@/blocks/brand-icon'
 import { useCustomBlockOverlayVersion } from '@/blocks/custom/client-overlay'
 import { getBlockByToolName } from '@/blocks/registry'
@@ -36,7 +36,7 @@ export function CircleStop({ className }: { className?: string }) {
   )
 }
 
-interface ToolCallItemProps {
+export interface ToolCallItemProps {
   toolName: string
   displayTitle: string
   status: ToolCallStatus
@@ -238,17 +238,10 @@ export function ToolCallItem({
   }
 
   return (
-    <div className='flex min-w-0 items-center gap-[6px] pl-6'>
-      {BlockIcon && <BrandIcon icon={BlockIcon} className='size-[14px] shrink-0' />}
-      {isExecuting ? (
-        <ShimmerText className='min-w-0 truncate text-[13px] leading-[18px] [--shimmer-rest:var(--text-secondary)]'>
-          {title}
-        </ShimmerText>
-      ) : (
-        <span className='min-w-0 truncate text-[13px] text-[var(--text-secondary)] leading-[18px]'>
-          {title}
-        </span>
-      )}
-    </div>
+    <ToolCallRow
+      title={title}
+      isExecuting={isExecuting}
+      icon={BlockIcon && <BrandIcon icon={BlockIcon} className='size-[14px] shrink-0' />}
+    />
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-row.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-row.tsx
new file mode 100644
index 00000000000..fdb4af0026d
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-row.tsx
@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react'
+import { ShimmerText } from '@/components/ui'
+
+interface ToolCallRowProps {
+  title: string
+  isExecuting: boolean
+  icon?: ReactNode
+}
+
+/** Shared activity chrome; callers resolve tool semantics and brand icons. */
+export function ToolCallRow({ title, isExecuting, icon }: ToolCallRowProps) {
+  return (
+    <div className='flex min-w-0 items-center gap-[6px] pl-6'>
+      {icon}
+      {isExecuting ? (
+        <ShimmerText className='min-w-0 truncate text-[13px] leading-[18px] [--shimmer-rest:var(--text-secondary)]'>
+          {title}
+        </ShimmerText>
+      ) : (
+        <span className='min-w-0 truncate text-[13px] text-[var(--text-secondary)] leading-[18px]'>
+          {title}
+        </span>
+      )}
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/resource-mention.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/resource-mention.tsx
new file mode 100644
index 00000000000..a6f685cd35f
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/resource-mention.tsx
@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react'
+import { cn } from '@sim/emcn'
+
+interface ResourceMentionProps {
+  icon: ReactNode
+  title: string
+  onSelect?: () => void
+}
+
+export function ResourceMention({ icon, title, onSelect }: ResourceMentionProps) {
+  const classes =
+    'inline-flex items-baseline gap-1 rounded-[5px] bg-[var(--surface-5)] px-[5px] align-baseline font-[inherit] text-[inherit] leading-[inherit]'
+  const content = (
+    <>
+      {icon}
+      {title}
+    </>
+  )
+  if (!onSelect) return <span className={classes}>{content}</span>
+  return (
+    <button
+      type='button'
+      onClick={onSelect}
+      className={cn(classes, 'cursor-pointer transition-colors hover-hover:bg-[var(--surface-6)]')}
+    >
+      {content}
+    </button>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/index.ts b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/index.ts
index 609cdc21eca..2f43b29539e 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/index.ts
@@ -1,3 +1,4 @@
+export { PendingTagIndicator } from '@/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/pending-tag-indicator'
 export type {
   ContentSegment,
   CredentialItemData,
@@ -26,7 +27,6 @@ export {
   credentialTagHasVisibleCard,
   formatCredentialSubmissionMessage,
   isHttpUrl,
-  PendingTagIndicator,
   parseCredentialSubmissionMessage,
   parseCredentialSubmissionProgress,
   parseCredentialTagBody,
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/pending-tag-indicator.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/pending-tag-indicator.tsx
new file mode 100644
index 00000000000..7dc0bec53ad
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/pending-tag-indicator.tsx
@@ -0,0 +1,17 @@
+import { ThinkingLoader } from '@/components/ui'
+
+interface PendingTagIndicatorProps {
+  /** Activity phrase next to the loader; crossfades on change. */
+  label: string
+}
+
+/**
+ * Renders the turn-level activity shimmer.
+ */
+export function PendingTagIndicator({ label }: PendingTagIndicatorProps) {
+  return (
+    <div className='animate-stream-fade-in py-2'>
+      <ThinkingLoader size={20} startVariant='corners' label={label} labelRatio={0.7} />
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx
index 5a3a4848347..0330603d98c 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx
@@ -5,7 +5,6 @@ import { cn, Expandable, ExpandableContent, SecretReveal, Tooltip, toast } from
 import { ArrowRight, Check, ChevronDown, SquareArrowUpRight, TerminalWindow } from '@sim/emcn/icons'
 import { isRecordLike } from '@sim/utils/object'
 import { useParams } from 'next/navigation'
-import { ThinkingLoader } from '@/components/ui'
 import { useSession } from '@/lib/auth/auth-client'
 import { buildHostedUpgradeUrl, HOSTED_BILLING_SETTINGS_URL } from '@/lib/billing/upgrade-reasons'
 import { canManageWorkspaceBilling } from '@/lib/billing/workspace-permissions'
@@ -36,6 +35,7 @@ import {
   parseQuestionAnswerMessage,
   QuestionDisplay,
 } from '@/app/workspace/[workspaceId]/home/components/message-content/components/question'
+import { ResourceMention } from '@/app/workspace/[workspaceId]/home/components/message-content/components/resource-mention'
 import {
   resolveOAuthChipTarget,
   useOAuthChipConnection,
@@ -1783,22 +1783,6 @@ export function SpecialTags({
   }
 }
 
-interface PendingTagIndicatorProps {
-  /** Activity phrase next to the loader; crossfades on change. */
-  label: string
-}
-
-/**
- * Renders the turn-level activity shimmer.
- */
-export function PendingTagIndicator({ label }: PendingTagIndicatorProps) {
-  return (
-    <div className='animate-stream-fade-in py-2'>
-      <ThinkingLoader size={20} startVariant='corners' label={label} labelRatio={0.7} />
-    </div>
-  )
-}
-
 interface OptionsDisplayProps {
   data: OptionsTagData
   onSelect?: (id: string) => void
@@ -1934,31 +1918,17 @@ export function WorkspaceResourceDisplay({
 
   const context = toChatMessageContext(data, resource.title)
 
-  const mentionContent = (
-    <>
-      <ContextMentionIcon
-        context={context}
-        className='relative top-0.5 size-[12px] shrink-0 text-[var(--text-icon)]'
-      />
-      {resource.title}
-    </>
-  )
-
-  const classes =
-    'inline-flex items-baseline gap-1 rounded-[5px] bg-[var(--surface-5)] px-[5px] align-baseline font-[inherit] text-[inherit] leading-[inherit]'
-
-  if (!onSelect) {
-    return <span className={classes}>{mentionContent}</span>
-  }
-
   return (
-    <button
-      type='button'
-      onClick={() => onSelect(resource)}
-      className={cn(classes, 'cursor-pointer transition-colors hover-hover:bg-[var(--surface-6)]')}
-    >
-      {mentionContent}
-    </button>
+    <ResourceMention
+      icon={
+        <ContextMentionIcon
+          context={context}
+          className='relative top-0.5 size-[12px] shrink-0 text-[var(--text-icon)]'
+        />
+      }
+      title={resource.title}
+      onSelect={onSelect ? () => onSelect(resource) : undefined}
+    />
   )
 }
 
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx
index 99683295ec0..7828f6b187d 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx
@@ -22,10 +22,15 @@ import {
 } from '@/lib/copilot/tools/tool-display'
 import { useChatSurface } from '@/app/workspace/[workspaceId]/home/components/chat-surface-context'
 import type { CredentialSubmissionPayload } from '@/app/workspace/[workspaceId]/home/components/message-content/components/special-tags'
+import { collectMessageSources } from '@/app/workspace/[workspaceId]/home/components/message-content/message-sources'
 import { resolveMessageCitations } from '@/app/workspace/[workspaceId]/home/components/message-content/resolve-citations'
+import type {
+  ContentBlock,
+  OptionItem,
+  ToolCallData,
+} from '@/app/workspace/[workspaceId]/home/types'
+import { SUBAGENT_LABELS } from '@/app/workspace/[workspaceId]/home/types'
 import { useCustomBlockOverlayVersion } from '@/blocks/custom/client-overlay'
-import type { ContentBlock, OptionItem, ToolCallData } from '../../types'
-import { SUBAGENT_LABELS } from '../../types'
 import type { AgentGroupItem } from './components'
 import {
   AgentGroup,
@@ -35,7 +40,7 @@ import {
   Options,
   PendingTagIndicator,
 } from './components'
-import { collectMessageSources, deriveMessagePhase, isToolDone, type MessagePhase } from './utils'
+import { deriveMessagePhase, isToolDone, type MessagePhase } from './utils'
 
 const FILE_SUBAGENT_ID = 'file'
 /** Quiet period before the shimmer takes the slot back from streamed output. */
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-sources.ts b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-sources.ts
new file mode 100644
index 00000000000..5b438663c0c
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-sources.ts
@@ -0,0 +1,21 @@
+import {
+  parseSpecialTags,
+  type SourceTagData,
+} from '@/app/workspace/[workspaceId]/home/components/message-content/components/special-tags'
+
+/**
+ * Every distinct `<source>` cited across the given prose, in first-cited order,
+ * for the footer strip. Callers pass the text segments the message actually
+ * renders as its answer.
+ */
+export function collectMessageSources(texts: readonly string[]): SourceTagData[] {
+  const byUrl = new Map<string, SourceTagData>()
+  for (const text of texts) {
+    for (const segment of parseSpecialTags(text, false).segments) {
+      if (segment.type === 'source' && !byUrl.has(segment.data.url)) {
+        byUrl.set(segment.data.url, segment.data)
+      }
+    }
+  }
+  return [...byUrl.values()]
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/utils.test.ts b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/utils.test.ts
index de5bd6402fe..d4094191237 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/utils.test.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/utils.test.ts
@@ -2,7 +2,8 @@
  * @vitest-environment node
  */
 import { describe, expect, it } from 'vitest'
-import { collectMessageSources, deriveMessagePhase, resolveToolDisplayState } from './utils'
+import { collectMessageSources } from '@/app/workspace/[workspaceId]/home/components/message-content/message-sources'
+import { deriveMessagePhase, resolveToolDisplayState } from './utils'
 
 describe('deriveMessagePhase', () => {
   it('is streaming whenever the transport is live', () => {
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/utils.ts b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/utils.ts
index d8f012c636e..722770fbfa9 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/utils.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/utils.ts
@@ -21,31 +21,10 @@ import {
 } from '@sim/emcn'
 import { Calendar, Clock, Cursor, Globe, Table as TableIcon } from '@sim/emcn/icons'
 import { AgentIcon, ImageIcon, TTSIcon, VideoIcon } from '@/components/icons'
-import {
-  parseSpecialTags,
-  type SourceTagData,
-} from '@/app/workspace/[workspaceId]/home/components/message-content/components/special-tags'
 import type { ToolCallStatus } from '@/app/workspace/[workspaceId]/home/types'
 
 export type IconComponent = ComponentType<SVGProps<SVGSVGElement>>
 
-/**
- * Every distinct `<source>` cited across the given prose, in first-cited order,
- * for the footer strip. Callers pass the text segments the message actually
- * renders as its answer.
- */
-export function collectMessageSources(texts: readonly string[]): SourceTagData[] {
-  const byUrl = new Map<string, SourceTagData>()
-  for (const text of texts) {
-    for (const segment of parseSpecialTags(text, false).segments) {
-      if (segment.type === 'source' && !byUrl.has(segment.data.url)) {
-        byUrl.set(segment.data.url, segment.data)
-      }
-    }
-  }
-  return [...byUrl.values()]
-}
-
 const TOOL_ICONS: Record<string, IconComponent> = {
   mothership: Blimp,
   glob: FolderCode,
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/send-button/send-button.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/send-button/send-button.tsx
index 1a3fa5f1195..279ce07e079 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/send-button/send-button.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/send-button/send-button.tsx
@@ -28,6 +28,7 @@ export const SendButton = React.memo(function SendButton({
         variant='ghost'
         className={cn(SEND_BUTTON_BASE, SEND_BUTTON_ACTIVE)}
         title='Stop generation'
+        aria-label='Stop generation'
       >
         <svg
           className='block h-[14px] w-[14px] fill-white dark:fill-black'
@@ -42,6 +43,7 @@ export const SendButton = React.memo(function SendButton({
   return (
     <Button
       onClick={onSubmit}
+      aria-label='Send message'
       variant='ghost'
       disabled={!canSubmit}
       className={cn(SEND_BUTTON_BASE, canSubmit ? SEND_BUTTON_ACTIVE : SEND_BUTTON_DISABLED)}
diff --git a/apps/sim/components/status-page/return-home-link.tsx b/apps/sim/components/status-page/return-home-link.tsx
new file mode 100644
index 00000000000..54390343849
--- /dev/null
+++ b/apps/sim/components/status-page/return-home-link.tsx
@@ -0,0 +1,20 @@
+'use client'
+
+import { ChipLink } from '@sim/emcn'
+
+/** A document navigation initializes the landing theme when leaving an app status page. */
+export function ReturnHomeLink() {
+  return (
+    <ChipLink
+      variant='primary'
+      href='/'
+      prefetch={false}
+      onNavigate={(event) => {
+        event.preventDefault()
+        window.location.assign('/')
+      }}
+    >
+      Return home
+    </ChipLink>
+  )
+}
diff --git a/apps/sim/components/status-page/status-page.tsx b/apps/sim/components/status-page/status-page.tsx
index 1c02f4c522c..a0361388798 100644
--- a/apps/sim/components/status-page/status-page.tsx
+++ b/apps/sim/components/status-page/status-page.tsx
@@ -13,7 +13,7 @@ export function StatusPageContent({ title, description, children }: StatusPageCo
       <h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
         {title}
       </h1>
-      <p className='text-[var(--text-muted)] text-lg'>{description}</p>
+      <p className='text-[var(--text-body)] text-lg'>{description}</p>
       <div className='mt-3 flex flex-wrap items-center justify-center gap-2'>{children}</div>
     </div>
   )
@@ -28,7 +28,7 @@ export function StatusPage({ title, description, children, id = 'main-content' }
   return (
     <main
       id={id}
-      className='mx-auto flex min-h-[60vh] w-full max-w-[1460px] flex-col items-center justify-center px-20 py-24 max-sm:px-5 max-lg:px-8'
+      className='mx-auto flex min-h-[60vh] w-full max-w-[1728px] flex-col items-center justify-center px-10 py-24 max-md:px-7 max-lg:px-8 max-xl:px-9'
     >
       <StatusPageContent title={title} description={description}>
         {children}
diff --git a/apps/sim/content/blog/enterprise/index.mdx b/apps/sim/content/blog/enterprise/index.mdx
index 56073f9fe12..137a79fe142 100644
--- a/apps/sim/content/blog/enterprise/index.mdx
+++ b/apps/sim/content/blog/enterprise/index.mdx
@@ -99,7 +99,7 @@ Run Sim entirely on your infrastructure. Deploy with [Docker Compose](https://do
 
 **High availability** — Multi-replica Kubernetes deployments with horizontal pod autoscaling.
 
-**Air-gapped** — No external network access required. Pair with [Ollama](https://docs.sim.ai/platform/self-hosting/ollama) or [vLLM](https://docs.sim.ai/platform/self-hosting/vllm) for local model inference.
+**Air-gapped** — No external network access required. Pair with [Ollama](https://docs.sim.ai/platform/self-hosting/docker#ollama) or [vLLM](https://docs.sim.ai/platform/self-hosting/environment-variables#self-hosted-openai-compatible-endpoints) for local model inference.
 
 Enterprise features like access control, SSO, and organization management are enabled through environment variables—no connection to our billing infrastructure required.
 
diff --git a/apps/sim/content/customers/exp-realty/index.mdx b/apps/sim/content/customers/exp-realty/index.mdx
new file mode 100644
index 00000000000..361e182bad8
--- /dev/null
+++ b/apps/sim/content/customers/exp-realty/index.mdx
@@ -0,0 +1,37 @@
+---
+slug: exp-realty
+title: How eXp Realty brings real estate operations into one AI workspace
+description: Bringing complex real estate operations into governed AI workflows that can scale across eXp Realty.
+date: 2026-09-05
+authors: [sim]
+tags: [AI workflows, Real estate]
+ogImage: /landing/logos/exp-realty.svg
+ogAlt: eXp Realty
+canonical: https://www.sim.ai/customers/exp-realty
+draft: true
+technical: false
+---
+
+## Bringing connected work into one place
+
+Real estate operations depend on information moving between people and systems. Documents, records, and requests all need context before a team can take the next step.
+
+Sim connects the tools for that work in one AI workspace. Agents can use trusted knowledge, read and update shared data, and work with the systems teams already use.
+
+## Turning processes into AI workflows
+
+A repeatable process starts with clear logic. Teams can build agents through Chat, a visual builder, or code, then connect the tools and information each step needs.
+
+[Workflows](/workflows) make those steps visible. [Knowledge Base](/knowledge) gives agents company context, while Tables and Files keep working data and documents close to the process.
+
+## Keeping control as work expands
+
+As teams build more agents, consistent controls become part of the work. Access, model selection, and spend need to be managed alongside the agents themselves.
+
+Sim brings those controls into the same workspace. Teams can define permissions, set spending limits, and use [Logs](/logs) to understand what happened during a run.
+
+## A shared foundation for agent work
+
+The result is a common environment for building and operating AI agents. Teams can connect a process, test how it behaves, and return to the same workspace to review and improve it.
+
+With the tools and controls together, AI workflows can become a repeatable part of how teams work.
diff --git a/apps/sim/content/customers/rivian/index.mdx b/apps/sim/content/customers/rivian/index.mdx
new file mode 100644
index 00000000000..3f43b7d464e
--- /dev/null
+++ b/apps/sim/content/customers/rivian/index.mdx
@@ -0,0 +1,37 @@
+---
+slug: rivian
+title: How Rivian connects systems and governs AI agents across the business
+description: One place to connect enterprise systems and build, govern, and operate AI agents across Rivian.
+date: 2026-09-05
+authors: [sim]
+tags: [Enterprise AI, Governance]
+ogImage: /landing/customers/rivian-trail.jpg
+ogAlt: A Rivian on a winding trail through a mountain landscape
+canonical: https://www.sim.ai/customers/rivian
+draft: true
+technical: false
+---
+
+## Connecting the systems where work happens
+
+Enterprise work moves across teams, tools, and data. Building an AI agent is one part of the process. Giving it the context and access it needs to do useful work is another.
+
+Sim brings those pieces into one workspace. Teams can connect their business systems, give agents access to trusted company knowledge, and build repeatable processes around the way they work.
+
+## From an idea to an agent
+
+Teams can describe what they need in Chat, connect steps in the visual builder, or work with code. Each approach leads to the same place: an agent that can use company knowledge, work with shared data, and take action through connected tools.
+
+With [Workflows](/workflows), that logic stays visible. Teams can understand how an agent works, test each step, and refine it as their needs change.
+
+## Governance built into the workspace
+
+Building agents and operating them belong together. As more teams bring AI into their work, they need a consistent way to manage access, models, and spend.
+
+Sim provides [enterprise controls](/enterprise) alongside the tools for building. Permissions define what teams can use, spend controls set boundaries, and [Logs](/logs) make each run available to review.
+
+## One place to build and operate
+
+The workspace keeps agents close to their knowledge, data, and execution history. Teams can return to the same environment to improve an agent, understand a run, or manage how it is deployed.
+
+That is the idea behind one place for enterprise AI: connected systems, visible agent logic, and shared controls for the work ahead.
diff --git a/apps/sim/content/library/aeo-vs-geo-what-answer-engine-and-generative-engine-optimization-actually-mean/index.mdx b/apps/sim/content/library/aeo-vs-geo-what-answer-engine-and-generative-engine-optimization-actually-mean/index.mdx
index a692fb2422f..10577eb034b 100644
--- a/apps/sim/content/library/aeo-vs-geo-what-answer-engine-and-generative-engine-optimization-actually-mean/index.mdx
+++ b/apps/sim/content/library/aeo-vs-geo-what-answer-engine-and-generative-engine-optimization-actually-mean/index.mdx
@@ -60,7 +60,7 @@ The three approaches emphasize different output surfaces, even though their cont
 
 | Dimension | Traditional SEO | AEO | GEO |
 | --- | --- | --- | --- |
-| Primary focus | Making a page discoverable in ranked results, including the [ranking systems Google documents](https://developers.google.com/search/docs/fundamentals/ranking-systems) | Providing a concise, direct response that can be surfaced on its own | Supplying clear, verifiable material that can support a synthesized answer |
+| Primary focus | Making a page discoverable in ranked results, including the [ranking systems Google documents](https://developers.google.com/search/docs/appearance/ranking-systems-guide) | Providing a concise, direct response that can be surfaced on its own | Supplying clear, verifiable material that can support a synthesized answer |
 | Output surface | Ranked search results | Featured snippets and direct-answer experiences | Cited passages in generative answers |
 | Useful tactics | Helpful information architecture, internal linking, and technical accessibility | Question-based headings, concise lead answers, and [structured data where it applies](https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data) | First-sentence answers, self-contained sections, sourced specifics, and honest tradeoffs |
 
diff --git a/apps/sim/content/library/agentic-ai-coding-tools-what-they-are-and-how-the-top-options-compare/index.mdx b/apps/sim/content/library/agentic-ai-coding-tools-what-they-are-and-how-the-top-options-compare/index.mdx
index d02a4cd9e8f..39453840344 100644
--- a/apps/sim/content/library/agentic-ai-coding-tools-what-they-are-and-how-the-top-options-compare/index.mdx
+++ b/apps/sim/content/library/agentic-ai-coding-tools-what-they-are-and-how-the-top-options-compare/index.mdx
@@ -66,14 +66,14 @@ The right pick depends on whether the work is writing code in a particular codeb
 - [**Cursor**](https://cursor.com/) is an AI-native code editor built on VS Code, with an agent mode that edits across files, runs terminal commands, and works from markdown-based project instructions. It can use models from OpenAI, Anthropic, and Google depending on the task. Pricing starts with a free Hobby tier; [Pro is $20 per month](https://cursor.com/pricing) with extended agent usage, and Teams is [$40 per seat per month billed monthly or $32 annually](https://cursor.com/blog/teams-pricing-june-2026).
 - [**GitHub Copilot**](https://github.com/features/copilot) added agent mode inside VS Code and other IDEs, letting it plan changes, edit multiple files, and iterate. [GitHub’s pricing page](https://github.com/features/copilot/plans) lists Pro at $10 per user per month and Pro+ at $39 per user per month; [GitHub’s billing documentation](https://docs.github.com/copilot/reference/copilot-billing/models-and-pricing) explains its usage-based billing and states that one AI credit equals $0.01.
 - [**Claude Code**](https://claude.com/product/claude-code) is Anthropic’s terminal-based coding agent, included with Claude’s paid plans rather than sold separately. [Anthropic’s pricing page](https://claude.com/pricing) lists Claude Pro at $17 per month billed annually or $20 per month billed monthly, with Claude Code access; Max plans start at $100 per month for heavier usage.
-- **Windsurf** pricing is no longer independently verifiable on a vendor-owned Windsurf price page. [Cognition’s Devin pricing](https://cognition.com/pricing), where the product now sits, lists Free, Pro ($20 per month), Max ($200 per month), and Team ($80 per month plus $40 per seat) tiers.
+- **Windsurf** pricing is no longer independently verifiable on a vendor-owned Windsurf price page. [Cognition’s Devin pricing](https://cognition.com/blog/new-self-serve-plans-for-devin), where the product now sits, lists Free, Pro ($20 per month), Max ($200 per month), and Team ($80 per month plus $40 per seat) tiers.
 - [**Replit Agent**](https://replit.com/agent) builds and deploys applications from a prompt in Replit’s browser-based environment. [Replit’s pricing page](https://replit.com/pricing) lists a free Starter plan with daily Agent credits; Core is $20 per month billed annually ($25 month-to-month), includes $25 of monthly credits, and permits up to two agents in parallel. Pro is $95 per month billed annually ($100 month-to-month), includes $100 of monthly credits, and permits up to 10 parallel agents. Enterprise is custom.
 
 ### Agent-workflow platforms that can run a coding step
 
 - **Sim** is an Apache 2.0-licensed AI workspace where a code-writing step is one block in a larger workflow. A team can describe a workflow to [Mothership](https://docs.sim.ai/mothership) in natural language, add a Function block for custom code, and deploy the finished workflow as a REST API, hosted chat experience, or MCP server. A workflow built once can be exposed as an MCP tool that a compatible coding agent calls, connecting IDE-based agents to a team’s own automations and data.
 - [**Gumloop**](https://www.gumloop.com/) is a hosted, no-code automation platform. Its own [agentic AI tools roundup](https://www.gumloop.com/blog/agentic-ai-tools) groups Cursor alongside workflow tools such as itself, n8n, and Zapier, illustrating why the category needs a clearer split. That page lists a free tier and paid plans starting at $37 per month.
-- [**n8n**](https://n8n.io/) is a fair-code, self-hostable workflow platform with a visual canvas and its own code step. [n8n’s pricing page](https://n8n.io/pricing) lists cloud Starter at €20 per month billed annually for 2,500 workflow executions and one shared project, Pro at €50 per month billed annually for 10,000 executions, and Business at €667 per month billed annually. Its Business plan includes self-hosting, SSO/SAML/LDAP, and Git-based version control; Enterprise is custom. The self-hosted Community Edition is free under [n8n’s Sustainable Use License](https://docs.n8n.io/sustainable-use-license/).
+- [**n8n**](https://n8n.io/) is a fair-code, self-hostable workflow platform with a visual canvas and its own code step. [n8n’s pricing page](https://n8n.io/pricing) lists cloud Starter at €20 per month billed annually for 2,500 workflow executions and one shared project, Pro at €50 per month billed annually for 10,000 executions, and Business at €667 per month billed annually. Its Business plan includes self-hosting, SSO/SAML/LDAP, and Git-based version control; Enterprise is custom. The self-hosted Community Edition is free under [n8n’s Sustainable Use License](https://docs.n8n.io/privacy-and-security/sustainable-use-license/).
 
 ## How do the top agentic AI coding tools compare?
 
@@ -82,7 +82,7 @@ The right pick depends on whether the work is writing code in a particular codeb
 | Cursor | In-IDE coding agent | Chat + agent mode in editor | Proprietary, local app | Local IDE | Free (Hobby); [$20/mo Pro](https://cursor.com/pricing) |
 | GitHub Copilot | In-IDE coding agent | Agent mode in IDE | Proprietary, cloud | IDE plugin | Free tier; [$10/mo Pro](https://github.com/features/copilot/plans) |
 | Claude Code | In-IDE/terminal coding agent | Terminal-based agent | Proprietary, cloud | CLI / terminal | [$17–20/mo](https://claude.com/pricing) via Claude Pro |
-| Windsurf / Cognition | In-IDE coding agent | Local + cloud agents in one IDE | Proprietary, local app | Local IDE | See [Cognition’s Devin pricing](https://cognition.com/pricing) |
+| Windsurf / Cognition | In-IDE coding agent | Local + cloud agents in one IDE | Proprietary, local app | Local IDE | See [Cognition’s Devin pricing](https://cognition.com/blog/new-self-serve-plans-for-devin) |
 | Replit Agent | App-building agent | Prompt-to-deployed-app | Proprietary, cloud | Hosted app | Free (Starter); [$20/mo Core](https://replit.com/pricing), billed annually |
 | Sim | Agent-workflow platform | Natural language, visual canvas, or API | Apache 2.0, self-host or cloud | API, hosted chat, or MCP server | Free; [$25/user/mo Pro](https://www.sim.ai/pricing) |
 | Gumloop | Agent-workflow platform | Natural language + visual canvas | Proprietary, hosted | API, Slack, hosted agent pages | Free; [$37/mo Pro](https://www.gumloop.com/blog/agentic-ai-tools) |
@@ -98,7 +98,7 @@ A workflow platform adds value by connecting a coding agent’s output to the re
 
 Yes, though “open source” means different things depending on the tool. Many prominent in-IDE coding agents, including Cursor, Windsurf, and Claude Code, are proprietary applications.
 
-Among workflow platforms that can run a coding step, licensing varies more. n8n uses its [Sustainable Use License](https://docs.n8n.io/sustainable-use-license/), which is source-available but has commercial restrictions. Sim’s core is [licensed under Apache 2.0](https://github.com/simstudioai/sim), a permissive open-source license, and Sim provides [self-hosting guidance](https://docs.sim.ai/self-hosting). For a wider comparison of licensing and deployment models, see [open-source AI agent platforms](https://www.sim.ai/library/open-source-ai-agent-platforms).
+Among workflow platforms that can run a coding step, licensing varies more. n8n uses its [Sustainable Use License](https://docs.n8n.io/privacy-and-security/sustainable-use-license/), which is source-available but has commercial restrictions. Sim’s core is [licensed under Apache 2.0](https://github.com/simstudioai/sim), a permissive open-source license, and Sim provides [self-hosting guidance](https://docs.sim.ai/self-hosting). For a wider comparison of licensing and deployment models, see [open-source AI agent platforms](https://www.sim.ai/library/open-source-ai-agent-platforms).
 
 ## Do agentic coding tools support MCP?
 
diff --git a/apps/sim/content/library/ai-agent-orchestration-frameworks-explained/index.mdx b/apps/sim/content/library/ai-agent-orchestration-frameworks-explained/index.mdx
index 87fdc1afc48..f6f43f7bfe3 100644
--- a/apps/sim/content/library/ai-agent-orchestration-frameworks-explained/index.mdx
+++ b/apps/sim/content/library/ai-agent-orchestration-frameworks-explained/index.mdx
@@ -58,7 +58,7 @@ Code-first frameworks let engineers express agent orchestration directly in soft
 
 [CrewAI organizes multi-agent orchestration](https://docs.crewai.com/en/concepts/crews) around agents with defined roles, goals, and tools. A crew assigns tasks to agents and controls how they collaborate, while [CrewAI Flows](https://docs.crewai.com/en/concepts/flows) add event-driven steps and state management around that collaboration. The role-based model works well when a workflow maps naturally to specialists, such as a researcher passing findings to a writer.
 
-The open-source frameworks do not provide a complete application by themselves. You may still need to assemble an end-user interface, deployment infrastructure, authentication, integrations, and production monitoring. [LangGraph Platform](https://docs.langchain.com/langgraph-platform/overview) and [CrewAI Enterprise](https://docs.crewai.com/en/enterprise/introduction) offer related services and tooling, but adopting those products introduces additional architecture and operating choices.
+The open-source frameworks do not provide a complete application by themselves. You may still need to assemble an end-user interface, deployment infrastructure, authentication, integrations, and production monitoring. [LangGraph Platform](https://docs.langchain.com/langsmith/deployment) and [CrewAI Enterprise](https://docs.crewai.com/en/enterprise/introduction) offer related services and tooling, but adopting those products introduces additional architecture and operating choices.
 
 Sim takes a different approach by packaging visual and natural-language building, deployment, and execution logs in one workspace. That approach can shorten the path between a prototype and an inspectable deployed system, while code-first frameworks preserve more control over implementation details. For a closer look at the tradeoffs, see these [LangGraph alternatives](https://www.sim.ai/library/langgraph-alternatives).
 
@@ -66,7 +66,7 @@ Sim takes a different approach by packaging visual and natural-language building
 
 Visual and natural-language workflow builders let you assemble orchestration on a canvas instead of defining every state transition in code. You connect triggers, actions, branches, loops, and AI steps as blocks. Some products also let you create or edit those blocks through natural-language instructions.
 
-[n8n](https://docs.n8n.io/flow-logic/) and [Make](https://help.make.com/scenario-editor) center their builders on visual app automation, while [Zapier](https://help.zapier.com/hc/en-us/articles/8496181725453-Create-Zaps) uses trigger-and-action workflows. A trigger starts a predefined sequence, and each node processes data or calls another application. Their respective [AI Agent](https://docs.n8n.io/integrations/builtin/cluster-nodes/root-nodes/n8n-nodes-langchain.agent/), [Make AI Agents](https://help.make.com/make-ai-agents-new), and [Zapier Agents](https://help.zapier.com/hc/en-us/articles/30219476645645-Create-an-agent-in-Zapier-Agents) features add model decisions, tool use, and generated outputs within those products. Explicit flow controls govern what happens around each AI step.
+[n8n](https://docs.n8n.io/flow-logic/) and [Make](https://help.make.com/scenario-editor) center their builders on visual app automation, while [Zapier](https://help.zapier.com/hc/en-us/articles/8496181725453-Create-Zaps) uses trigger-and-action workflows. A trigger starts a predefined sequence, and each node processes data or calls another application. Their respective [AI Agent](https://docs.n8n.io/integrations/builtin/cluster-nodes/root-nodes/n8n-nodes-langchain.agent/), [Make AI Agents](https://help.make.com/make-ai-agents-new), and [Zapier Agents](https://help.zapier.com/hc/en-us/articles/24393442652557-Build-an-agent-in-Zapier-Agents) features add model decisions, tool use, and generated outputs within those products. Explicit flow controls govern what happens around each AI step.
 
 Sim gives model reasoning a first-class role within the same graph as deterministic control. A [Sim workflow](https://docs.sim.ai/introduction) can combine Agent blocks with functions, conditions, routers, loops, parallel branches, integration actions, and human approval. You can therefore reserve model judgment for tasks such as classifying a request while using fixed logic for validation, routing, and sensitive actions.
 
@@ -98,7 +98,7 @@ The product capabilities and license classifications below are current as of Aug
 | [CrewAI](https://docs.crewai.com/en/concepts/crews) | ✅ Code-first roles and tasks | ✅ Multi-agent runtime | 🟡 [Flows and task routing](https://docs.crewai.com/en/concepts/flows) | 🟡 App or API | ✅ Self-hosted, [MIT](https://github.com/crewAIInc/crewAI/blob/main/LICENSE) |
 | [n8n](https://docs.n8n.io/advanced-ai/) | ✅ Visual workflow canvas | 🟡 Agents within automation | ✅ [Branches and loops](https://docs.n8n.io/flow-logic/) | ✅ [Webhooks](https://docs.n8n.io/integrations/builtin/core-nodes/n8n-nodes-base.webhook/), [API](https://docs.n8n.io/api/), [chat](https://docs.n8n.io/integrations/builtin/core-nodes/n8n-nodes-langchain.chattrigger/) | 🟡 Self-hosted, [fair-code Sustainable Use License](https://docs.n8n.io/privacy-and-security/sustainable-use-license) |
 | [Make](https://help.make.com/scenario-editor) | ✅ Visual workflow canvas | 🟡 [AI inside automation](https://help.make.com/make-ai-agents-new) | ✅ [Routes, filters, iterators](https://help.make.com/router) | 🟡 [Webhooks](https://help.make.com/webhooks) and [API](https://developers.make.com/api-documentation) | ❌ [Proprietary cloud](https://www.make.com/en/terms-and-conditions) |
-| [Zapier](https://help.zapier.com/hc/en-us/articles/8496181725453-Create-Zaps) | ✅ Visual and natural language | 🟡 [Agents plus app automation](https://help.zapier.com/hc/en-us/articles/30219476645645-Create-an-agent-in-Zapier-Agents) | 🟡 [Paths](https://help.zapier.com/hc/en-us/articles/8496277737997-Add-branching-logic-to-Zaps-with-paths) and [approval steps](https://zapier.com/apps/approval/integrations) | 🟡 [Apps](https://zapier.com/apps), [agent chat](https://help.zapier.com/hc/en-us/articles/30219476645645-Create-an-agent-in-Zapier-Agents), [webhooks](https://help.zapier.com/hc/en-us/articles/8496326446989-Send-webhooks-in-Zaps) | ❌ [Proprietary cloud](https://zapier.com/tos) |
+| [Zapier](https://help.zapier.com/hc/en-us/articles/8496181725453-Create-Zaps) | ✅ Visual and natural language | 🟡 [Agents plus app automation](https://help.zapier.com/hc/en-us/articles/24393442652557-Build-an-agent-in-Zapier-Agents) | 🟡 [Paths](https://help.zapier.com/hc/en-us/articles/8496277737997-Add-branching-logic-to-Zaps-with-paths) and [approval steps](https://zapier.com/apps/human-in-the-loop/integrations) | 🟡 [Apps](https://zapier.com/apps), [agent chat](https://help.zapier.com/hc/en-us/articles/24393442652557-Build-an-agent-in-Zapier-Agents), [webhooks](https://help.zapier.com/hc/en-us/articles/8496326446989-Send-webhooks-in-Zaps) | ❌ [Proprietary cloud](https://zapier.com/tos) |
 | Sim | ✅ Natural language, visual, API | ✅ Agent-native runtime | ✅ Branches, loops, approvals | ✅ [API, hosted chat, MCP](https://docs.sim.ai/workflows/deployment) | ✅ Self-hosted, [Apache 2.0 core](https://github.com/simstudioai/sim) |
 | [OpenAI Agents SDK](https://openai.github.io/openai-agents-python/) | ✅ Code-first SDK | ✅ Native agents and handoffs | 🟡 Code-defined routing and guardrails | 🟡 App-managed APIs and interfaces | 🟡 [MIT-licensed SDK](https://github.com/openai/openai-agents-python/blob/main/LICENSE), proprietary services |
 
@@ -118,4 +118,4 @@ Sim combines agent reasoning and deterministic control in one visual workflow gr
 
 Sim's core uses the permissive [Apache 2.0 license](https://github.com/simstudioai/sim), which supports inspection, modification, and self-hosting. Readers evaluating that final deployment option can follow this guide to [turn a workflow into a reusable MCP tool](https://www.sim.ai/library/how-to-turn-a-workflow-into-a-reusable-mcp-tool).
 
-To build your first workflow, follow the [Sim documentation quickstart](https://docs.sim.ai/quickstart).
+To build your first workflow, follow the [Sim documentation quickstart](https://docs.sim.ai/getting-started).
diff --git a/apps/sim/content/library/ai-agents-for-marketing-automation/index.mdx b/apps/sim/content/library/ai-agents-for-marketing-automation/index.mdx
index 1ba3e8eee7d..fb7314e7b0e 100644
--- a/apps/sim/content/library/ai-agents-for-marketing-automation/index.mdx
+++ b/apps/sim/content/library/ai-agents-for-marketing-automation/index.mdx
@@ -77,7 +77,7 @@ You can place a human approval step between drafting and publication. An editor
 
 Campaign reports become more useful when a workflow interprets changes across data sources instead of merely displaying metrics. On a schedule, a Sim workflow can retrieve advertising spend, email engagement, and CRM conversion data from connected tools. An Agent block can compare periods and summarize which campaigns or channels account for the largest changes.
 
-[HubSpot](https://www.hubspot.com/products/reporting-dashboards) and [ActiveCampaign](https://www.activecampaign.com/marketing-analytics) reports primarily organize metrics stored within their own products. They may not explain a cross-tool pattern, such as why paid clicks increased while qualified pipeline declined. The agent can examine records from both systems and write a plain-language summary to a Sim Table. A deterministic branch can also post the summary to Slack when a metric crosses a defined threshold.
+[HubSpot](https://www.hubspot.com/products/reporting-dashboards) and [ActiveCampaign](https://www.activecampaign.com/platform/analytics-and-reporting) reports primarily organize metrics stored within their own products. They may not explain a cross-tool pattern, such as why paid clicks increased while qualified pipeline declined. The agent can examine records from both systems and write a plain-language summary to a Sim Table. A deterministic branch can also post the summary to Slack when a metric crosses a defined threshold.
 
 Sim's block-level traces keep each explanation inspectable. You can review the source data passed into the Agent block and compare it with the generated summary. That record helps you separate observations supported by the data from causal claims that require further investigation. Learn more about what to inspect in our guide to [AI agent observability](https://www.sim.ai/library/ai-agent-observability).
 
@@ -106,7 +106,7 @@ Compare these products by examining where reasoning runs and what context it can
 | Sim | Natural language or visual graph | Built-in agent runtime | Branches, loops, functions, and approvals | Native Tables, Files, and Knowledge Bases | Integrations, APIs, code, MCP, and skills | Hosted models, BYOK, and Enterprise local models | API, hosted chat, and MCP server | Block traces, logs, errors, and run cost |
 | [HubSpot](https://www.hubspot.com/products/marketing) | [Visual workflows and feature configuration](https://knowledge.hubspot.com/workflows/create-workflows) | [AI features inside a CRM suite](https://www.hubspot.com/products/artificial-intelligence) | [Rule-based workflows, branches, and approvals](https://knowledge.hubspot.com/workflows/create-workflows) | [Native CRM records and marketing data](https://www.hubspot.com/products/crm) | [HubSpot tools, channels, and marketplace apps](https://ecosystem.hubspot.com/marketplace/apps) | [HubSpot-managed AI](https://www.hubspot.com/products/artificial-intelligence) | [HubSpot workspace and connected channels](https://www.hubspot.com/products/marketing) | [Workflow history and CRM reporting](https://knowledge.hubspot.com/workflows/view-your-workflow-history) |
 | [ActiveCampaign](https://www.activecampaign.com/platform) | [Visual automation builder](https://www.activecampaign.com/marketing-automation) | [AI features inside marketing automation](https://www.activecampaign.com/ai) | [Triggers, conditions, branches, and goals](https://www.activecampaign.com/marketing-automation) | [Native contacts, deals, and campaign data](https://www.activecampaign.com/platform) | [Marketing channels and connected apps](https://www.activecampaign.com/apps) | [ActiveCampaign-managed AI](https://www.activecampaign.com/ai) | [ActiveCampaign workspace and connected channels](https://www.activecampaign.com/platform) | [Automation reports and activity history](https://help.activecampaign.com/hc/en-us/articles/360000063804-Automations-Performance-report) |
-| [Zapier](https://zapier.com/) | [No-code trigger-action builder](https://zapier.com/how-it-works) | [Agents sit beside Zaps](https://zapier.com/agents) | [Paths, filters, loops, and approvals](https://zapier.com/features) | [Zapier Tables and connected apps](https://zapier.com/tables) | [Broad app catalog, APIs, and MCP](https://zapier.com/apps) | [Models through Zapier AI products and apps](https://zapier.com/agents) | [Zaps, Agents, Chatbots, and MCP](https://zapier.com/products) | [Task and activity history](https://help.zapier.com/hc/en-us/articles/8496248813453-View-and-manage-your-Zap-history) |
+| [Zapier](https://zapier.com/) | [No-code trigger-action builder](https://zapier.com/how-it-works) | [Agents sit beside Zaps](https://zapier.com/agents) | [Paths, filters, loops, and approvals](https://zapier.com/features) | [Zapier Tables and connected apps](https://zapier.com/tables) | [Broad app catalog, APIs, and MCP](https://zapier.com/apps) | [Models through Zapier AI products and apps](https://zapier.com/agents) | [Zaps, Agents, Chatbots, and MCP](https://zapier.com/platform) | [Task and activity history](https://help.zapier.com/hc/en-us/articles/8496291148685-View-and-manage-your-Zap-history) |
 | [Make](https://www.make.com/) | [Visual scenario canvas](https://help.make.com/get-started-with-make) | [AI Agent modules inside scenarios](https://www.make.com/en/ai-agents) | [Routers, iterators, filters, and code](https://help.make.com/flow-control) | [Scenario data and connected apps](https://www.make.com/en/integrations) | [Broad app catalog, APIs, code, and MCP](https://www.make.com/en/integrations) | [Models through agent settings and apps](https://www.make.com/en/ai-agents) | [Cloud scenarios and MCP](https://www.make.com/en/ai-agents) | [Scenario execution history](https://help.make.com/scenario-history) |
 | [n8n](https://n8n.io/) | [Node-based low-code builder](https://docs.n8n.io/workflows/) | [AI nodes inside an automation engine](https://docs.n8n.io/advanced-ai/) | [Branches, loops, code, and approvals](https://docs.n8n.io/flow-logic/) | [Workflow data and connected sources](https://docs.n8n.io/workflows/) | [Large node ecosystem, APIs, and code](https://n8n.io/integrations/) | [Multiple model providers and credentials](https://docs.n8n.io/integrations/builtin/cluster-nodes/root-nodes/n8n-nodes-langchain.agent/) | [Cloud or self-hosted workflows and webhooks](https://docs.n8n.io/hosting/) | [Execution logs and node-level data](https://docs.n8n.io/workflows/executions/) |
 
diff --git a/apps/sim/content/library/best-ai-agent-builder-2026/index.mdx b/apps/sim/content/library/best-ai-agent-builder-2026/index.mdx
index 957fae4e4dc..54fb7f4eda1 100644
--- a/apps/sim/content/library/best-ai-agent-builder-2026/index.mdx
+++ b/apps/sim/content/library/best-ai-agent-builder-2026/index.mdx
@@ -34,7 +34,7 @@ faq:
 
 - Among the tools compared here, [Sim](https://www.sim.ai/) is the top AI agent builder for technical users who want a self-hostable workspace licensed under [Apache 2.0](https://github.com/simstudioai/sim).
 - This ranking favors self-hostability and agent-building features over the broader deterministic automation offered by traditional workflow platforms.
-- [n8n](https://n8n.io/) suits engineers who want self-hosted, deterministic workflow automation under its [Sustainable Use License](https://docs.n8n.io/sustainable-use-license/).
+- [n8n](https://n8n.io/) suits engineers who want self-hosted, deterministic workflow automation under its [Sustainable Use License](https://docs.n8n.io/privacy-and-security/sustainable-use-license/).
 - [Zapier](https://zapier.com/apps) suits nontechnical users who prioritize easy setup and a large app catalog.
 - [Make](https://www.make.com/en/pricing) suits operations users building complex visual automation scenarios.
 - [Gumloop](https://gumloop.com/pricing) suits users who want a managed, no-code AI automation builder.
@@ -67,7 +67,7 @@ The short version: most platforms made AI a feature of an automation product. Si
 
 Sim's core is licensed under [Apache 2.0](https://github.com/simstudioai/sim/blob/main/LICENSE), an OSI-approved license. Its terms permit commercial use, modification, and redistribution, and include an express patent grant from contributors. That patent language can matter to enterprise legal teams reviewing the rights attached to software they plan to operate or modify.
 
-n8n uses a [Sustainable Use License and Enterprise License](https://docs.n8n.io/sustainable-use-license/), which n8n describes as fair-code rather than OSI open source. The published terms restrict some commercial uses, including offering functionality that substantially derives its value from n8n. Teams using n8n internally may find those terms workable, while teams embedding automation into a commercial product should have counsel review the exact use case. A deeper [n8n alternatives comparison](https://www.sim.ai/library/n8n-alternatives) covers the practical tradeoffs.
+n8n uses a [Sustainable Use License and Enterprise License](https://docs.n8n.io/privacy-and-security/sustainable-use-license/), which n8n describes as fair-code rather than OSI open source. The published terms restrict some commercial uses, including offering functionality that substantially derives its value from n8n. Teams using n8n internally may find those terms workable, while teams embedding automation into a commercial product should have counsel review the exact use case. A deeper [n8n alternatives comparison](https://www.sim.ai/library/n8n-alternatives) covers the practical tradeoffs.
 
 Zapier, Make, and Gumloop present their products as vendor-operated services through their respective [Zapier plans](https://zapier.com/pricing), [Make plans](https://www.make.com/en/pricing), and [Gumloop plans](https://www.gumloop.com/pricing). Teams that require source modification or operation of the full platform on their own infrastructure should evaluate those constraints before adopting one.
 
@@ -99,7 +99,7 @@ The ranking weighs ownership, building flexibility, production use, and cost bec
 
 The main trade-off is between infrastructure ownership and managed convenience. n8n is the closest alternative for self-hosting, while Zapier, Make, and Gumloop trade hosting control for managed operation.
 
-1. **n8n is an alternative for deterministic, developer-controlled automation.** Its [Sustainable Use License](https://docs.n8n.io/sustainable-use-license/) permits self-hosting under its terms, and its [node-based editor](https://docs.n8n.io/workflows/) exposes triggers, branches, and execution paths. n8n fits you if you prioritize deterministic workflows but do not need software under Sim's permissive [Apache 2.0 license](https://github.com/simstudioai/sim).
+1. **n8n is an alternative for deterministic, developer-controlled automation.** Its [Sustainable Use License](https://docs.n8n.io/privacy-and-security/sustainable-use-license/) permits self-hosting under its terms, and its [node-based editor](https://docs.n8n.io/workflows/) exposes triggers, branches, and execution paths. n8n fits you if you prioritize deterministic workflows but do not need software under Sim's permissive [Apache 2.0 license](https://github.com/simstudioai/sim).
 2. **Zapier is an alternative for users who prioritize a broad app catalog and guided onboarding.** Zapier's [app directory](https://zapier.com/apps) documents its connector catalog, and its guided workflow builder lets nontechnical users connect SaaS products without managing servers. Zapier fits business users who want managed SaaS automation and do not need source access or self-hosting. See the broader guide to the [best Zapier alternatives](https://www.sim.ai/library/best-zapier-alternatives) for additional options.
 3. **Make gives operations users detailed visual control over multi-step automations.** Make's [visual platform](https://www.make.com/en/visual-platform) exposes data mappings, filters, branches, and execution routes on a scenario canvas. Make fits you if you already use its scenario-building model or need to inspect complex workflows visually.
 4. **Gumloop provides a no-code builder for AI-focused automation.** Gumloop's [hosted platform](https://www.gumloop.com/) lets users assemble workflows around models and business tools without operating the supporting infrastructure. Gumloop fits you if you want to build AI agent-style automations and prefer a hosted service over self-hosting.
@@ -111,7 +111,7 @@ The clearest dividing line is ownership: Sim and n8n support self-hosting, while
 | Tool | License and hosting | Build modes | Integrations | Deployment options | Best-fit buyer |
 | --- | --- | --- | --- | --- | --- |
 | Sim | [Apache 2.0](https://github.com/simstudioai/sim), cloud, or self-hosted | [Mothership](https://docs.sim.ai/mothership), visual canvas, APIs | [1,000+ integrations and 100+ models](https://www.sim.ai/) | [API, hosted chat, or MCP](https://docs.sim.ai/workflows/deployment) | Technical builders wanting open-source ownership and native Tables, Files, and Knowledge Bases |
-| n8n | [Fair-code, cloud, or self-hosted](https://docs.n8n.io/sustainable-use-license/) | [Visual workflows and code](https://docs.n8n.io/workflows/) | [App nodes and APIs](https://n8n.io/integrations/) | [Cloud or self-hosted workflows](https://docs.n8n.io/hosting/) | Engineers building deterministic automations |
+| n8n | [Fair-code, cloud, or self-hosted](https://docs.n8n.io/privacy-and-security/sustainable-use-license/) | [Visual workflows and code](https://docs.n8n.io/workflows/) | [App nodes and APIs](https://n8n.io/integrations/) | [Cloud or self-hosted workflows](https://docs.n8n.io/hosting/) | Engineers building deterministic automations |
 | Zapier | [Proprietary cloud](https://zapier.com/pricing) | [Zaps and AI-assisted building](https://zapier.com/agents) | [Large app catalog](https://zapier.com/apps) | [Hosted automations](https://zapier.com/) | Nontechnical users automating SaaS tasks |
 | Make | [Proprietary cloud](https://www.make.com/en/pricing) | [Visual scenario builder](https://www.make.com/en/visual-platform) | [App connectors and APIs](https://www.make.com/en/integrations) | [Hosted scenarios](https://www.make.com/en/visual-platform) | Operations users building complex multi-step automations |
 | Gumloop | [Proprietary managed cloud](https://gumloop.com/pricing) | [No-code AI workflow builder](https://www.gumloop.com/) | [App and data connectors](https://www.gumloop.com/) | [Hosted AI workflows](https://www.gumloop.com/) | Users wanting managed AI automation without infrastructure ownership |
diff --git a/apps/sim/content/library/best-ai-agent-platforms-for-connecting-your-existing-tools/index.mdx b/apps/sim/content/library/best-ai-agent-platforms-for-connecting-your-existing-tools/index.mdx
index 0799fda876f..1c1909a1c72 100644
--- a/apps/sim/content/library/best-ai-agent-platforms-for-connecting-your-existing-tools/index.mdx
+++ b/apps/sim/content/library/best-ai-agent-platforms-for-connecting-your-existing-tools/index.mdx
@@ -46,7 +46,7 @@ Teams seeking an open, self-hostable option can [start building with Sim](https:
 - **Best visual scenario builder:** [Make](https://www.make.com/en)
 - **Best for self-hosted deterministic automation:** [n8n](https://docs.n8n.io/hosting/)
 - **Best managed no-code AI integration platform:** [Gumloop](https://docs.gumloop.com)
-- **Best for enterprise governance:** [Workato](https://docs.workato.com/user-accounts-and-teams/workspace-roles.html)
+- **Best for enterprise governance:** [Workato](https://docs.workato.com/user-accounts-and-teams/role-based-access/access-control-v2.html)
 
 For a broader view of the category, see our guides to the [best AI automation tools](https://www.sim.ai/library/best-ai-automation-tools-2026) and [open-source AI agent platforms](https://www.sim.ai/library/open-source-ai-agent-platforms).
 
@@ -100,7 +100,7 @@ The [Apache 2.0 licensed core](https://github.com/simstudioai/sim) gives buyers
 
 - Sim's catalog remains smaller than the broader catalogs of established automation vendors.
 - Buyers seeking simple, prebuilt app-to-app recipes may prefer a conventional no-code automation product.
-- [Workato documents an established enterprise integration and governance stack](https://docs.workato.com/user-accounts-and-teams/workspace-roles.html).
+- [Workato documents an established enterprise integration and governance stack](https://docs.workato.com/user-accounts-and-teams/role-based-access/access-control-v2.html).
 
 ### Pricing
 
@@ -121,13 +121,13 @@ The [Airtable connector](https://zapier.com/apps/airtable/integrations) supports
 - [Zapier's app directory](https://zapier.com/apps) covers many SaaS tools.
 - Its [Slack](https://zapier.com/apps/slack/integrations) and [Notion](https://zapier.com/apps/notion/integrations) connectors provide documented read, write, and instant-trigger options.
 - [API Request actions](https://help.zapier.com/hc/en-us/articles/12899607716493-Send-API-requests-in-Zaps) can fill native-action gaps while retaining Zapier authentication.
-- The [managed service](https://zapier.com/terms-of-service) removes infrastructure and upgrade work.
+- The [managed service](https://zapier.com/terms) removes infrastructure and upgrade work.
 
 ### Cons
 
 - [Polling intervals](https://help.zapier.com/hc/en-us/articles/8496244568589-How-often-does-Zapier-check-for-new-data) can delay time-sensitive workflows.
 - Zapier's separately presented [automation](https://zapier.com/pricing) and [Agents](https://zapier.com/agents) products can make AI workflow costs harder to estimate.
-- [Zapier describes its service as a hosted platform](https://zapier.com/terms-of-service), not a self-hostable runtime.
+- [Zapier describes its service as a hosted platform](https://zapier.com/terms), not a self-hostable runtime.
 
 ### Pricing
 
@@ -182,7 +182,7 @@ Native integration depth varies by app. The [Notion node](https://docs.n8n.io/in
 
 ### Cons
 
-- [n8n uses its Sustainable Use License](https://docs.n8n.io/sustainable-use-license/), a fair-code license rather than a permissive OSI-approved open-source license.
+- [n8n uses its Sustainable Use License](https://docs.n8n.io/privacy-and-security/sustainable-use-license/), a fair-code license rather than a permissive OSI-approved open-source license.
 - The operations and trigger coverage shown in [n8n's node documentation](https://docs.n8n.io/integrations/) vary by node.
 - Technical flexibility comes with more deployment, security, upgrade, and maintenance work than a managed no-code platform.
 
@@ -196,15 +196,15 @@ Native integration depth varies by app. The [Notion node](https://docs.n8n.io/in
 
 **Best for:** Non-technical operations and go-to-market teams that want a polished managed canvas and AI-assisted connector setup without operating infrastructure.
 
-Gumloop emphasizes managed no-code workflows and generated connectors over manual API work. Its documentation describes [AI-created triggers](https://docs.gumloop.com/core-concepts/triggers) that monitor external apps, while its [Slack integration](https://docs.gumloop.com/integrations/slack) can connect workflows with Slack.
+Gumloop emphasizes managed no-code workflows and generated connectors over manual API work. Its documentation describes [AI-created triggers](https://docs.gumloop.com/core-concepts/triggers) that monitor external apps, while its [Slack integration](https://docs.gumloop.com/nodes/mcp/slack) can connect workflows with Slack.
 
-Gumloop's [public documentation](https://docs.gumloop.com) does not itemize its Notion and Airtable actions with the same detail as several competitors. Buyers may need to test which records can be read, which fields can be updated, and whether a required event uses webhooks or polling. [MCP integrations](https://docs.gumloop.com/integrations/mcp) can cover some native-catalog gaps, but teams should test every required action before adoption.
+Gumloop's [public documentation](https://docs.gumloop.com) does not itemize its Notion and Airtable actions with the same detail as several competitors. Buyers may need to test which records can be read, which fields can be updated, and whether a required event uses webhooks or polling. [MCP integrations](https://docs.gumloop.com/nodes/mcp/custom_mcp_servers) can cover some native-catalog gaps, but teams should test every required action before adoption.
 
 ### Pros
 
 - [Gumloop's no-code canvas](https://docs.gumloop.com) makes workflow setup accessible without programming.
 - [AI-assisted trigger creation](https://docs.gumloop.com/core-concepts/triggers) can connect external apps.
-- [Documented MCP support](https://docs.gumloop.com/integrations/mcp) expands access to external tools and data.
+- [Documented MCP support](https://docs.gumloop.com/nodes/mcp/custom_mcp_servers) expands access to external tools and data.
 - [Workflow templates](https://www.gumloop.com/templates) cover common business use cases.
 
 ### Cons
@@ -226,13 +226,13 @@ As of August 2026, [Gumloop's pricing page](https://gumloop.com/pricing) uses cr
 
 Workato's [integrations catalog](https://www.workato.com/integrations) covers a broad range of enterprise and business systems. The platform emphasizes managed enterprise integration, centralized administration, and governed automation.
 
-Slack setup can require more administration than one-click OAuth flows. Workato's [Slack trigger documentation](https://docs.workato.com/connectors/slack/triggers.html) describes creating and configuring a custom Slack app for event triggers. [Workbot for Slack](https://docs.workato.com/workbot-for-slack.html) can then place workflow interactions inside Slack.
+Slack setup can require more administration than one-click OAuth flows. Workato's [Slack trigger documentation](https://docs.workato.com/connectors/slack/triggers.html) describes creating and configuring a custom Slack app for event triggers. [Workbot for Slack](https://docs.workato.com/en/workbot/workbot.html) can then place workflow interactions inside Slack.
 
 ### Pros
 
-- Workato's [connector catalog](https://www.workato.com/integrations) and [workspace administration](https://docs.workato.com/user-accounts-and-teams/workspace-roles.html) suit complex enterprise environments.
-- [Workbot](https://docs.workato.com/workbot-for-slack.html) lets employees interact with cross-application workflows from Slack.
-- [Workspace roles and privileges](https://docs.workato.com/user-accounts-and-teams/workspace-roles.html) support controlled administration.
+- Workato's [connector catalog](https://www.workato.com/integrations) and [workspace administration](https://docs.workato.com/user-accounts-and-teams/role-based-access/access-control-v2.html) suit complex enterprise environments.
+- [Workbot](https://docs.workato.com/en/workbot/workbot.html) lets employees interact with cross-application workflows from Slack.
+- [Workspace roles and privileges](https://docs.workato.com/user-accounts-and-teams/role-based-access/access-control-v2.html) support controlled administration.
 
 ### Cons
 
@@ -266,7 +266,7 @@ No platform fits every integration requirement, so choose according to the tools
 - **Maximum catalog breadth:** Choose [Zapier](https://zapier.com/apps) when broad app coverage matters most. Choose [Make](https://www.make.com/en/integrations) when you also want a visual canvas with detailed branching.
 - **Self-hosted deterministic automation:** Choose [n8n](https://docs.n8n.io/hosting/) when technical users want to manage infrastructure, add code, and use HTTP requests when native nodes fall short.
 - **Managed visual automation:** Choose [Gumloop](https://docs.gumloop.com) when non-technical operators value guided setup and AI-assisted workflow building more than publicly itemized connector depth.
-- **Enterprise governance:** Choose [Workato](https://docs.workato.com/user-accounts-and-teams/workspace-roles.html) when IT needs centralized administration, access controls, and governed automation across complex business systems.
+- **Enterprise governance:** Choose [Workato](https://docs.workato.com/user-accounts-and-teams/role-based-access/access-control-v2.html) when IT needs centralized administration, access controls, and governed automation across complex business systems.
 - **AI reasoning with write-back:** Choose [Sim](https://sim.ai) when an agent must reason over business data, decide what action to take, and write results into connected tools.
 
 Before committing, verify that the platform supports the exact read actions, write actions, and trigger types your workflow requires. A large catalog does not guarantee deep access to every app.
@@ -277,7 +277,7 @@ Sim is a strong choice for teams that need AI reasoning, write-back actions, rea
 
 Sim also gives buyers more deployment control than the managed platforms in this guide. Its Apache 2.0 core supports self-hosting, while custom API calls and MCP connections provide fallback options when a native integration lacks the required action.
 
-[Zapier](https://zapier.com/apps) and [Make](https://www.make.com/en/integrations) offer broad connector catalogs, so either may require less setup for long-tail SaaS tools. [Workato](https://docs.workato.com/user-accounts-and-teams/workspace-roles.html) also documents enterprise governance controls. Sim remains a practical option when priorities include agent reasoning, write-back, model choice, and control over hosting.
+[Zapier](https://zapier.com/apps) and [Make](https://www.make.com/en/integrations) offer broad connector catalogs, so either may require less setup for long-tail SaaS tools. [Workato](https://docs.workato.com/user-accounts-and-teams/role-based-access/access-control-v2.html) also documents enterprise governance controls. Sim remains a practical option when priorities include agent reasoning, write-back, model choice, and control over hosting.
 
 [Build your first agent with Sim](https://sim.ai).
 
diff --git a/apps/sim/content/library/best-ai-agent-platforms-for-enterprise-teams-2026/index.mdx b/apps/sim/content/library/best-ai-agent-platforms-for-enterprise-teams-2026/index.mdx
index 9dde21729ac..92678c16030 100644
--- a/apps/sim/content/library/best-ai-agent-platforms-for-enterprise-teams-2026/index.mdx
+++ b/apps/sim/content/library/best-ai-agent-platforms-for-enterprise-teams-2026/index.mdx
@@ -29,12 +29,12 @@ faq:
 ## TL;DR
 
 1. **Sim** uses an [Apache 2.0 core](https://github.com/simstudioai/sim), while its [Enterprise plan](https://www.sim.ai/pricing) adds SSO, access control, audit logs, SOC 2, governed self-hosting, and dedicated support.
-2. **n8n** uses a [fair-code license](https://docs.n8n.io/sustainable-use-license/) and offers [self-hosting and enterprise governance](https://n8n.io/enterprise/) for technical operators.
+2. **n8n** uses a [fair-code license](https://docs.n8n.io/privacy-and-security/sustainable-use-license/) and offers [self-hosting and enterprise governance](https://n8n.io/enterprise/) for technical operators.
 3. **Zapier** is [proprietary cloud software with enterprise administration](https://zapier.com/enterprise) and no customer-operated self-hosting.
 4. **Make** is proprietary cloud software with [enterprise controls built around visual scenario automation](https://www.make.com/en/enterprise).
 5. **Gumloop** is proprietary and provides [SAML, SCIM, RBAC, audit controls, retention policies, and managed deployment](https://www.gumloop.com/enterprise).
-6. **Workato** is proprietary and offers [iPaaS governance for complex enterprise integrations](https://www.workato.com/enterprise).
-7. **Dust** is proprietary and [governs collaborative agents that work with company knowledge](https://dust.tt/home/enterprise).
+6. **Workato** is proprietary and offers [iPaaS governance for complex enterprise integrations](https://www.workato.com/platform).
+7. **Dust** publishes [MIT-licensed source](https://github.com/dust-tt/dust/blob/main/LICENSE) and [governs collaborative agents that work with company knowledge](https://dust.tt/home/enterprise).
 8. **Relevance AI** is proprietary and provides [SSO, RBAC, and audit controls on higher tiers](https://relevanceai.com/pricing) for packaged team agents.
 
 [Explore Sim Enterprise](https://www.sim.ai) for governed deployment. The Apache 2.0 core supports free self-hosting, but Enterprise provides the controls required for organization-wide rollout. For a wider market view, see our guide to the [best AI agent platforms in 2026](https://www.sim.ai/library/best-ai-agent-platforms-2026).
@@ -96,7 +96,7 @@ Sim differs from automation-first platforms in how it applies governance. Enterp
 
 **Best for:** n8n is best for technical teams that want execution-based pricing, a mature self-hosted developer community, and substantial code-level flexibility.
 
-n8n uses a [fair-code Sustainable Use License](https://docs.n8n.io/sustainable-use-license/) rather than Apache 2.0. You can inspect and self-host the source, but the license restricts some commercial uses that an unrestricted open-source license would allow. Enterprise buyers should review those terms before standardizing on n8n.
+n8n uses a [fair-code Sustainable Use License](https://docs.n8n.io/privacy-and-security/sustainable-use-license/) rather than Apache 2.0. You can inspect and self-host the source, but the license restricts some commercial uses that an unrestricted open-source license would allow. Enterprise buyers should review those terms before standardizing on n8n.
 
 n8n combines [visual workflow automation, code customization, and AI agent tooling](https://docs.n8n.io/advanced-ai/). Its [execution-based pricing](https://n8n.io/pricing/) counts complete workflow runs rather than every step. [Customer-operated deployment](https://docs.n8n.io/hosting/) gives you control over infrastructure and data location, but your engineers must handle upgrades, availability, monitoring, and security.
 
@@ -111,7 +111,7 @@ n8n combines [visual workflow automation, code customization, and AI agent tooli
 
 **Cons**
 
-- The [fair-code license](https://docs.n8n.io/sustainable-use-license/) carries more commercial restrictions than Sim's Apache 2.0 license.
+- The [fair-code license](https://docs.n8n.io/privacy-and-security/sustainable-use-license/) carries more commercial restrictions than Sim's Apache 2.0 license.
 - [Self-hosting](https://docs.n8n.io/hosting/) requires ongoing engineering and operational ownership.
 - Some [governance features require enterprise licensing](https://n8n.io/enterprise/).
 - n8n remains automation-first, although it [supports AI agents](https://docs.n8n.io/advanced-ai/intro-tutorial/).
@@ -129,7 +129,7 @@ n8n combines [visual workflow automation, code customization, and AI agent tooli
 
 Zapier offers a [large application catalog](https://zapier.com/apps), which reduces the need to build custom integrations. Its [Enterprise offering](https://zapier.com/enterprise) provides centralized administration, while [Zapier Agents](https://zapier.com/agents) adds agent capabilities within that ecosystem.
 
-Zapier is a [proprietary cloud service](https://zapier.com/enterprise). It does not publish a customer-operated self-hosting path. Regulated buyers must determine whether Zapier's hosting model, [security program](https://zapier.com/security), and contractual controls satisfy internal data policies.
+Zapier is a [proprietary cloud service](https://zapier.com/enterprise). It does not publish a customer-operated self-hosting path. Regulated buyers must determine whether Zapier's hosting model, [security program](https://zapier.com/security-compliance), and contractual controls satisfy internal data policies.
 
 **Pros**
 
@@ -204,15 +204,15 @@ Gumloop's [Enterprise offering](https://www.gumloop.com/enterprise) provides man
 
 **Best for:** Workato is best for enterprises that need mature iPaaS governance and a large connector catalog for complex system integration.
 
-Workato brings established [enterprise integration controls](https://www.workato.com/enterprise) and [more than 1,000 connectors](https://www.workato.com/integrations). Its proprietary platform suits companies that need governed connections across business systems and already treat integration as a central IT function.
+Workato brings established [enterprise integration controls](https://www.workato.com/platform) and [more than 1,000 connectors](https://www.workato.com/integrations). Its proprietary platform suits companies that need governed connections across business systems and already treat integration as a central IT function.
 
 Workato approaches [AI agents through its broader orchestration platform](https://www.workato.com/agentic). That model helps agents interact with applications under centralized controls, but adds complexity for buyers seeking an agent-native workspace.
 
 **Pros**
 
 - The [connector catalog](https://www.workato.com/integrations) supports environments with legacy and cloud applications.
-- [Enterprise governance](https://www.workato.com/enterprise) suits centralized IT ownership.
-- [Enterprise services](https://www.workato.com/services-support) support large deployments.
+- [Enterprise governance](https://www.workato.com/platform) suits centralized IT ownership.
+- [Enterprise services](https://www.workato.com/editions/support) support large deployments.
 
 **Cons**
 
@@ -229,17 +229,17 @@ Workato approaches [AI agents through its broader orchestration platform](https:
 
 **Best for:** Dust is best for enterprises that need secure, collaborative agents grounded in company knowledge.
 
-Dust organizes [agents around shared company context](https://docs.dust.tt/docs/what-is-dust). Employees can use assistants that draw on [connected data sources](https://docs.dust.tt/docs/data-sources), making Dust a stronger fit for internal research, support, and knowledge retrieval than broad workflow automation.
+Dust organizes [agents around shared company context](https://docs.dust.tt/docs/user-documentation/getting-started/intro-to-dust). Employees can use assistants that draw on [connected data sources](https://docs.dust.tt/docs/data-sources), making Dust a stronger fit for internal research, support, and knowledge retrieval than broad workflow automation.
 
 **Pros**
 
-- Dust supports [collaborative agent creation and company-wide access](https://docs.dust.tt/docs/assistant-creation).
+- Dust supports [collaborative agent creation and company-wide access](https://docs.dust.tt/docs/user-documentation/agents/create-your-first-agent).
 - [Data-source connections](https://docs.dust.tt/docs/data-sources) help agents answer questions using internal information.
 - [Enterprise controls](https://dust.tt/home/enterprise) support secure multi-user deployment.
 
 **Cons**
 
-- Dust's [knowledge and assistant model](https://docs.dust.tt/docs/what-is-dust) covers fewer general automation use cases than application-workflow platforms.
+- Dust's [knowledge and assistant model](https://docs.dust.tt/docs/user-documentation/getting-started/intro-to-dust) covers fewer general automation use cases than application-workflow platforms.
 - Companies seeking customer-operated hosting should confirm [deployment options](https://dust.tt/home/enterprise) during procurement.
 - Its knowledge-first model may not suit complex system orchestration.
 
@@ -278,22 +278,22 @@ The comparison separates documented controls from features that require vendor c
 | Platform | License type | Self-hosting model | SSO/access control | Audit logging | SOC 2/compliance | Pricing tier |
 | --- | --- | --- | --- | --- | --- | --- |
 | Sim | ✅ [Apache 2.0 core](https://github.com/simstudioai/sim) | ✅ Free customer-operated core; governed hosting requires Enterprise | ✅ [Enterprise only](https://www.sim.ai/pricing) | ✅ [Enterprise only](https://www.sim.ai/pricing) | ✅ [SOC 2 on Enterprise](https://www.sim.ai/pricing) | ✅ [Free, Pro, Max, custom Enterprise](https://www.sim.ai/pricing) |
-| n8n | 🟡 [Fair-code](https://docs.n8n.io/sustainable-use-license/) | ✅ [Customer-operated option](https://docs.n8n.io/hosting/) | 🟡 [Enterprise controls](https://n8n.io/enterprise/) | 🟡 [Enterprise controls](https://n8n.io/enterprise/) | 🟡 Verify current scope | 🟡 [Verify live tier](https://n8n.io/pricing/) |
-| Zapier | ❌ [Proprietary](https://zapier.com/terms) | ❌ [Hosted cloud](https://zapier.com/enterprise) | ✅ [Enterprise administration](https://zapier.com/enterprise) | 🟡 Verify current scope | 🟡 [Verify current scope](https://zapier.com/security) | 🟡 [Verify live tier](https://zapier.com/pricing) |
+| n8n | 🟡 [Fair-code](https://docs.n8n.io/privacy-and-security/sustainable-use-license/) | ✅ [Customer-operated option](https://docs.n8n.io/hosting/) | 🟡 [Enterprise controls](https://n8n.io/enterprise/) | 🟡 [Enterprise controls](https://n8n.io/enterprise/) | 🟡 Verify current scope | 🟡 [Verify live tier](https://n8n.io/pricing/) |
+| Zapier | ❌ [Proprietary](https://zapier.com/terms) | ❌ [Hosted cloud](https://zapier.com/enterprise) | ✅ [Enterprise administration](https://zapier.com/enterprise) | 🟡 Verify current scope | 🟡 [Verify current scope](https://zapier.com/security-compliance) | 🟡 [Verify live tier](https://zapier.com/pricing) |
 | Make | ❌ [Proprietary](https://www.make.com/en/terms-and-conditions) | ❌ [Cloud platform with on-prem connectivity](https://help.make.com/on-premise-agent) | 🟡 [Enterprise controls](https://www.make.com/en/enterprise) | 🟡 Verify current scope | 🟡 Verify current scope | 🟡 [Verify live tier](https://www.make.com/en/pricing) |
-| Gumloop | ❌ [Proprietary](https://www.gumloop.com/terms-of-service) | 🟡 [Managed deployment](https://www.gumloop.com/enterprise) | ✅ [SAML, SCIM, and RBAC](https://www.gumloop.com/enterprise) | ✅ [Enterprise audit controls](https://www.gumloop.com/enterprise) | 🟡 Verify certification scope | 🟡 [Enterprise tier](https://www.gumloop.com/pricing) |
-| Workato | ❌ [Proprietary](https://www.workato.com/legal/terms-of-service) | 🟡 [Vendor platform](https://www.workato.com/enterprise) | ✅ [Enterprise access controls](https://www.workato.com/enterprise) | 🟡 Contract-dependent | 🟡 Verify certification scope | 🟡 [Custom enterprise](https://www.workato.com/pricing) |
-| Dust | ❌ [Proprietary](https://dust.tt/home/terms) | 🟡 [Verify deployment options](https://dust.tt/home/enterprise) | 🟡 [Enterprise controls](https://dust.tt/home/enterprise) | 🟡 Verify current scope | 🟡 Verify certification scope | 🟡 [Verify live tier](https://dust.tt/home/pricing) |
-| Relevance AI | ❌ [Proprietary](https://relevanceai.com/terms) | 🟡 [Verify deployment options](https://relevanceai.com/pricing) | ✅ [Higher-tier SSO and RBAC](https://relevanceai.com/pricing) | ✅ [Higher-tier audit controls](https://relevanceai.com/pricing) | 🟡 Verify certification scope | 🟡 [Higher-tier enterprise](https://relevanceai.com/pricing) |
+| Gumloop | ❌ [Proprietary](https://www.gumloop.com/tos) | 🟡 [Managed deployment](https://www.gumloop.com/enterprise) | ✅ [SAML, SCIM, and RBAC](https://www.gumloop.com/enterprise) | ✅ [Enterprise audit controls](https://www.gumloop.com/enterprise) | 🟡 Verify certification scope | 🟡 [Enterprise tier](https://www.gumloop.com/pricing) |
+| Workato | ❌ [Proprietary](https://www.workato.com/legal/terms-of-service) | 🟡 [Vendor platform](https://www.workato.com/platform) | ✅ [Enterprise access controls](https://www.workato.com/platform) | 🟡 Contract-dependent | 🟡 Verify certification scope | 🟡 [Custom enterprise](https://www.workato.com/pricing) |
+| Dust | ✅ [MIT-licensed source](https://github.com/dust-tt/dust/blob/main/LICENSE) | 🟡 [Verify deployment options](https://dust.tt/home/enterprise) | 🟡 [Enterprise controls](https://dust.tt/home/enterprise) | 🟡 Verify current scope | 🟡 Verify certification scope | 🟡 [Verify live tier](https://dust.tt/home/pricing) |
+| Relevance AI | ❌ [Proprietary](https://relevanceai.com/terms-and-conditions) | 🟡 [Verify deployment options](https://relevanceai.com/pricing) | ✅ [Higher-tier SSO and RBAC](https://relevanceai.com/pricing) | ✅ [Higher-tier audit controls](https://relevanceai.com/pricing) | 🟡 Verify certification scope | 🟡 [Higher-tier enterprise](https://relevanceai.com/pricing) |
 
 ## Which platform fits your organization
 
 - **Regulated industry with customer-operated infrastructure.** Choose [Sim Enterprise](https://www.sim.ai/pricing) when you need governed self-hosting, SSO, access control, audit logs, and SOC 2 support. The Apache 2.0 core supports independent self-hosting, but enterprise governance requires Enterprise.
 - **Team wanting fully managed simplicity.** Choose Gumloop when you want its [managed deployment and enterprise controls](https://www.gumloop.com/enterprise) without operating the underlying infrastructure. Its proprietary hosted model suits buyers who value low operational overhead more than source access.
 - **Organization prioritizing connector breadth and mature cloud administration.** Choose Zapier when its [application catalog and enterprise controls](https://zapier.com/enterprise) take priority. Confirm that its hosting, identity, and retention terms meet your requirements.
-- **Enterprise needing deep iPaaS governance.** Choose Workato when agents must operate within a [large integration program under centralized controls](https://www.workato.com/enterprise). Buyers seeking an agent-native workspace may prefer Sim.
+- **Enterprise needing deep iPaaS governance.** Choose Workato when agents must operate within a [large integration program under centralized controls](https://www.workato.com/platform). Buyers seeking an agent-native workspace may prefer Sim.
 
-n8n offers another customer-operated option for engineering-led organizations. Its [self-hosted community](https://community.n8n.io/) and [execution-based pricing](https://n8n.io/pricing/) can outweigh the commercial restrictions of its [fair-code license](https://docs.n8n.io/sustainable-use-license/) when your legal team accepts those terms.
+n8n offers another customer-operated option for engineering-led organizations. Its [self-hosted community](https://community.n8n.io/) and [execution-based pricing](https://n8n.io/pricing/) can outweigh the commercial restrictions of its [fair-code license](https://docs.n8n.io/privacy-and-security/sustainable-use-license/) when your legal team accepts those terms.
 
 ## Why Sim leads on enterprise governance
 
diff --git a/apps/sim/content/library/best-ai-agents-for-executive-assistant-tasks/index.mdx b/apps/sim/content/library/best-ai-agents-for-executive-assistant-tasks/index.mdx
index eb9a5e43bfa..dc44d5c27bc 100644
--- a/apps/sim/content/library/best-ai-agents-for-executive-assistant-tasks/index.mdx
+++ b/apps/sim/content/library/best-ai-agents-for-executive-assistant-tasks/index.mdx
@@ -65,7 +65,7 @@ Sim fits calendar logic that has to obey rules a generic booking flow may not ex
 
 Executive calendars run on exceptions: no meetings before 10am, a board member takes precedence over a vendor, travel days change what is available, and a reschedule should notify a chief of staff. A Sim workflow can combine calendar actions with Slack, CRM, or table updates, allowing the team to make those exceptions visible in the workflow rather than leaving them in an assistant's memory. [Best AI agents for scheduling and calendar management](https://www.sim.ai/library/best-ai-agents-for-scheduling-and-calendar-management-in-2026) covers the wider scheduling field and the questions to ask about each deployment surface.
 
-[Lindy documents Google Calendar](https://www.lindy.ai/integrations/google-calendar) and [Outlook Calendar](https://www.lindy.ai/integrations/outlook-calendar) integrations. Review those sources for the actions, permissions, and scheduling behavior currently available before relying on an assistant to make or change executive appointments.
+[Lindy documents Google Calendar](https://www.lindy.ai/integrations/google-calendar) and [Outlook Calendar](https://wf.lindy.ai/integrations/microsoft-outlook) integrations. Review those sources for the actions, permissions, and scheduling behavior currently available before relying on an assistant to make or change executive appointments.
 
 [Zapier](https://zapier.com/apps/google-calendar/integrations), [Make](https://www.make.com/en/integrations/google-calendar), and [n8n](https://docs.n8n.io/integrations/builtin/app-nodes/n8n-nodes-base.googlecalendar/) all document Google Calendar integrations. They are appropriate when a calendar event should deterministically copy data to another application. For priority conflicts and exception handling, explicitly model the decision and the human approval point instead of assuming any automation will make the right judgment.
 
@@ -75,7 +75,7 @@ Sim fits teams where a completed meeting should start work outside the EA lane.
 
 A useful follow-up is a trigger, not an endpoint. A Sim workflow can draft a recap and pass the same structured output to a separate workflow that updates a CRM, files a task, or briefs a sales team. Workflows can also be deployed in multiple ways, including as an API or an [MCP server](https://docs.sim.ai/workflows/deployment/mcp), so another compatible AI client can call the workflow as a tool. If MCP is new to your team, read [what an MCP server is](https://www.sim.ai/library/what-is-an-mcp-server) before choosing it as the integration surface.
 
-[Lindy's meeting-assistant page](https://www.lindy.ai/meeting-assistant) describes its current meeting-oriented capabilities. It is the right primary source for confirming whether the product can create the recap, reminder, task, or handoff your workflow requires.
+[Lindy's meeting-assistant page](https://www.lindy.ai/solutions/meeting-notes) describes its current meeting-oriented capabilities. It is the right primary source for confirming whether the product can create the recap, reminder, task, or handoff your workflow requires.
 
 [Zapier](https://zapier.com/apps/categories/calendar) and [Make](https://www.make.com/en/integrations/calendar) can connect calendar events to task and messaging applications. That makes them a fit for mechanical follow-ups; a team that needs an AI-generated recap should validate the model step, review process, and source context it will use.
 
@@ -83,7 +83,7 @@ A useful follow-up is a trigger, not an endpoint. A Sim workflow can draft a rec
 
 Choose Sim when you need to specify the pipeline and route the result somewhere useful. Choose a packaged meeting assistant when a recap with minimal configuration is the whole requirement.
 
-[Lindy's meeting assistant](https://www.lindy.ai/meeting-assistant) is the primary source for its current recording, transcription, and summary behavior. A packaged product can be a good fit for a team that wants the vendor's supported defaults and a recap delivery flow without assembling a pipeline.
+[Lindy's meeting assistant](https://www.lindy.ai/solutions/meeting-notes) is the primary source for its current recording, transcription, and summary behavior. A packaged product can be a good fit for a team that wants the vendor's supported defaults and a recap delivery flow without assembling a pipeline.
 
 Sim lets a team compose a workflow around the transcription source, summarization model, review step, and destination. That is useful when a meeting summary must start a follow-up email, update a task, or add context to a CRM record. The same workflow can be exposed through an API, hosted chat, or MCP deployment where supported. Do not send recordings or transcripts to a provider until its retention, data-processing, and consent requirements have been reviewed.
 
diff --git a/apps/sim/content/library/best-ai-agents-for-lead-enrichment-2026/index.mdx b/apps/sim/content/library/best-ai-agents-for-lead-enrichment-2026/index.mdx
index e16759256d2..9f23d0d0efb 100644
--- a/apps/sim/content/library/best-ai-agents-for-lead-enrichment-2026/index.mdx
+++ b/apps/sim/content/library/best-ai-agents-for-lead-enrichment-2026/index.mdx
@@ -136,7 +136,7 @@ Sim ranks first because it combines the capabilities used throughout this compar
 
 ### Zapier
 
-**What it is.** Zapier builds [linear workflows called Zaps](https://help.zapier.com/hc/en-us/articles/8496180298253-Create-Zaps). A new lead can trigger an enrichment request, after which Zapier maps the returned data and updates the connected CRM.
+**What it is.** Zapier builds [linear workflows called Zaps](https://help.zapier.com/hc/en-us/articles/22234847450893-Zap-workflows-quick-start-guide). A new lead can trigger an enrichment request, after which Zapier maps the returned data and updates the connected CRM.
 
 **Best for.** Choose Zapier when you already use its app catalog and need lightweight, trigger-based lead enrichment.
 
@@ -164,7 +164,7 @@ Sim ranks first because it combines the capabilities used throughout this compar
 
 **Best for.** Choose Clay when you want no-code waterfall enrichment across multiple data providers without building an agent.
 
-**Pros.** Clay gives you broad provider choice and code-optional workflow controls. Its [waterfall model](https://www.clay.com/university/lesson/enrichments-waterfalls) can reduce unnecessary spending by moving through a provider sequence until it finds a result.
+**Pros.** Clay gives you broad provider choice and code-optional workflow controls. Its [waterfall model](https://university.clay.com/lessons/enrich-people-waterfalls-clay-101) can reduce unnecessary spending by moving through a provider sequence until it finds a result.
 
 **Cons.** DevCommX puts first-waterfall setup time at [one to two weeks](https://www.devcommx.com/blogs/waterfall-enrichment-clay-vs-zoominfo-vs-apollo), and adding a provider or reworking priority order requires revisiting the waterfall. You set the winning-source rules by hand. Connected providers may bill separately on top of Clay's own fee, and failed match attempts can still consume resources depending on the provider and configuration.
 
@@ -184,11 +184,11 @@ Sim ranks first because it combines the capabilities used throughout this compar
 
 ### ZoomInfo
 
-**What it is.** ZoomInfo [enriches B2B contact and company records](https://www.zoominfo.com/products/enrich) from its proprietary database. The platform offers CRM enrichment alongside [buyer intent data](https://www.zoominfo.com/products/intent).
+**What it is.** ZoomInfo [enriches B2B contact and company records](https://zoominfotechnologiesinc.gcs-web.com/news-releases/news-release-details/momentum-events-cleaned-duplicate-filled-crm-zoominfo) from its proprietary database. The platform offers CRM enrichment alongside [buyer intent data](https://zoominfotechnologiesinc.gcs-web.com/news-releases/news-release-details/zoominfo-launches-intent-solution-help-b2b-companies-identify/).
 
 **Best for.** Choose ZoomInfo when you need a large proprietary contact database with CRM sync and intent data.
 
-**Pros.** ZoomInfo provides B2B coverage and [connects enrichment to CRM systems](https://www.zoominfo.com/products/enrich). Its intent data can help you prioritize accounts showing signs of active research.
+**Pros.** ZoomInfo provides B2B coverage and [connects enrichment to CRM systems](https://zoominfotechnologiesinc.gcs-web.com/news-releases/news-release-details/momentum-events-cleaned-duplicate-filled-crm-zoominfo). Its intent data can help you prioritize accounts showing signs of active research.
 
 **Cons.** ZoomInfo relies on its own database rather than querying a configurable fallback provider. CRM sync requires field mapping and deduplication rules, and that maintenance belongs in the integration setup.
 
diff --git a/apps/sim/content/library/best-ai-agents-for-regulated-industry-workflows-healthcare-legal-procurement/index.mdx b/apps/sim/content/library/best-ai-agents-for-regulated-industry-workflows-healthcare-legal-procurement/index.mdx
index 73be04a2b59..e041b224f41 100644
--- a/apps/sim/content/library/best-ai-agents-for-regulated-industry-workflows-healthcare-legal-procurement/index.mdx
+++ b/apps/sim/content/library/best-ai-agents-for-regulated-industry-workflows-healthcare-legal-procurement/index.mdx
@@ -26,7 +26,7 @@ faq:
 
 - **Healthcare intake:** Sim is a strong starting point when patient intake and scheduling agents must run under access boundaries you control. Its [governed Enterprise self-hosting](https://docs.sim.ai/platform/enterprise) is designed for self-hosted deployments with SSO, role-based access control (RBAC), and audit logs.
 - **Legal review and discovery:** Sim and [Workato](https://www.workato.com/platform/security) are worth evaluating when contract review and document discovery require scoped access and traceability.
-- **Procurement approvals:** Sim suits multi-step approval chains where role-based sign-off and traceable decisions matter. [Zapier](https://zapier.com/security) and [Make](https://www.make.com/en/security) can be practical for lower-stakes routing tasks.
+- **Procurement approvals:** Sim suits multi-step approval chains where role-based sign-off and traceable decisions matter. [Zapier](https://zapier.com/security-compliance) and [Make](https://www.make.com/en/security) can be practical for lower-stakes routing tasks.
 - **Compliance posture:** Treat attestations as one input, not a shortcut to compliance. Sim's Enterprise materials describe SOC 2 Type II, SSO, RBAC, audit logs, and self-hosting; organizations still own their regulatory obligations.
 
 ## What AI agent platform is best for healthcare intake workflows under compliance constraints?
@@ -37,7 +37,7 @@ Governed self-hosting matters because it determines where PHI lives and who admi
 
 Access control and audit logs address two other review questions. RBAC scopes who can build, edit, or run an intake agent, while [audit logs and Enterprise controls](https://docs.sim.ai/platform/enterprise) provide a record of activity to review. Sim's Enterprise materials describe a SOC 2 Type II attestation. That is not a HIPAA certification, and an organization remains responsible for its own HIPAA program regardless of platform choice.
 
-The workflow-automation-first tools make different deployment trade-offs. [n8n documents self-hosting options](https://docs.n8n.io/hosting/), while [Zapier's security documentation](https://zapier.com/security) and [Make's security documentation](https://www.make.com/en/security) describe their managed services. [Gumloop's security page](https://www.gumloop.com/solutions/security) describes its enterprise security approach. Compare each vendor's current deployment, identity, access, and logging documentation against the boundaries your PHI workflow requires.
+The workflow-automation-first tools make different deployment trade-offs. [n8n documents self-hosting options](https://docs.n8n.io/hosting/), while [Zapier's security documentation](https://zapier.com/security-compliance) and [Make's security documentation](https://www.make.com/en/security) describe their managed services. [Gumloop's security page](https://www.gumloop.com/solutions/security) describes its enterprise security approach. Compare each vendor's current deployment, identity, access, and logging documentation against the boundaries your PHI workflow requires.
 
 Sim's [Apache 2.0 core](https://github.com/simstudioai/sim) is also relevant for teams that need to inspect the software they deploy. For a licensing-focused comparison of that model and n8n's terms, see [Apache 2.0 vs. fair-code](https://www.sim.ai/library/apache-2-0-vs-fair-code). For healthcare intake specifically, evaluate the deployment model and the access and audit controls first, then assess how well the agent handles scheduling logic.
 
@@ -49,7 +49,7 @@ Sim is a fit for firms that need to scope access by matter or client and maintai
 
 Workato is a reasonable option for enterprise legal teams that already use it as an integration layer. Its [security and governance materials](https://www.workato.com/platform/security) describe enterprise controls including access management, audit logging, and log streaming. The appropriate choice depends on the firm's deployment model, existing systems, and matter-level access requirements.
 
-The lighter automation tools should be evaluated against the same controls rather than dismissed by category. [n8n's security documentation](https://docs.n8n.io/hosting/) covers its deployment options, while [Zapier](https://zapier.com/security) and [Make](https://www.make.com/en/security) publish security information for their managed offerings. For legal review and discovery, test whether the configuration can enforce the document boundaries and produce the evidence your review process requires. Security also extends to every connected tool; this guide to [MCP security](https://www.sim.ai/library/mcp-security) covers the risks of granting an agent access to internal systems.
+The lighter automation tools should be evaluated against the same controls rather than dismissed by category. [n8n's security documentation](https://docs.n8n.io/hosting/) covers its deployment options, while [Zapier](https://zapier.com/security-compliance) and [Make](https://www.make.com/en/security) publish security information for their managed offerings. For legal review and discovery, test whether the configuration can enforce the document boundaries and produce the evidence your review process requires. Security also extends to every connected tool; this guide to [MCP security](https://www.sim.ai/library/mcp-security) covers the risks of granting an agent access to internal systems.
 
 ## What's the best AI agent tool for procurement approval workflows?
 
@@ -57,7 +57,7 @@ Sim and [Workato](https://www.workato.com/platform/security) are leading options
 
 Approval-chain integrity depends on more than routing a request to the next person. When a high-value vendor contract clears a multi-step chain, an auditor may ask which role approved a particular step and whether that person had the authority to do so. Sim's [Enterprise access controls](https://docs.sim.ai/platform/enterprise) and audit records are intended to support this kind of review. Workato's [enterprise security materials](https://www.workato.com/platform/security) describe comparable governance controls for organizations already using its integration platform.
 
-[Zapier](https://zapier.com/security) and [Make](https://www.make.com/en/security) can handle straightforward notifications and spreadsheet updates. The question is whether their current plan and configuration meet your approval policy, including role scope and decision-level evidence. For lower-value, single-approver requests, a lighter setup may be the right trade-off. For multi-tier chains governed by purchasing policy, use a platform that can demonstrate the required role boundaries and records.
+[Zapier](https://zapier.com/security-compliance) and [Make](https://www.make.com/en/security) can handle straightforward notifications and spreadsheet updates. The question is whether their current plan and configuration meet your approval policy, including role scope and decision-level evidence. For lower-value, single-approver requests, a lighter setup may be the right trade-off. For multi-tier chains governed by purchasing policy, use a platform that can demonstrate the required role boundaries and records.
 
 For a broader look at where agents fit across sourcing, intake, contracts, and supplier risk, read [AI agents in procurement](https://www.sim.ai/library/ai-agents-in-procurement). The core implementation choice remains the same: start with the required governance constraint, then design the automation around it.
 
@@ -65,7 +65,7 @@ For a broader look at where agents fit across sourcing, intake, contracts, and s
 
 When IT or operations leaders score these platforms, they should move beyond trigger counts and ask five questions: Can we enforce single sign-on? Can we scope access by role? Does the platform record activity for an audit? Can it run in our environment? And what independent assurance does the vendor publish? The table links each platform to its own trust or security materials; confirm the current details with the vendor before using them in a compliance review.
 
-Deployment model and licensing are often more decisive than a feature checklist. Sim's core uses [Apache 2.0](https://github.com/simstudioai/sim), while [n8n publishes its Sustainable Use License](https://docs.n8n.io/sustainable-use-license/). [Gumloop's security page](https://www.gumloop.com/solutions/security) describes its enterprise approach, and [Zapier](https://zapier.com/security), [Make](https://www.make.com/en/security), and [Workato](https://www.workato.com/platform/security) publish information about their managed services. For a deeper platform-selection framework, see [the best AI agent platforms comparison](https://www.sim.ai/library/best-ai-agent-platforms-2026).
+Deployment model and licensing are often more decisive than a feature checklist. Sim's core uses [Apache 2.0](https://github.com/simstudioai/sim), while [n8n publishes its Sustainable Use License](https://docs.n8n.io/privacy-and-security/sustainable-use-license/). [Gumloop's security page](https://www.gumloop.com/solutions/security) describes its enterprise approach, and [Zapier](https://zapier.com/security-compliance), [Make](https://www.make.com/en/security), and [Workato](https://www.workato.com/platform/security) publish information about their managed services. For a deeper platform-selection framework, see [the best AI agent platforms comparison](https://www.sim.ai/library/best-ai-agent-platforms-2026).
 
 Sim's [governed Enterprise self-hosting](https://docs.sim.ai/platform/enterprise) is distinct from its [community self-hosting documentation](https://docs.sim.ai/platform/self-hosting). Enterprise adds the documented SSO, RBAC, and audit-log capabilities to a self-hosted deployment. Evaluate these controls alongside your own identity, monitoring, retention, and incident-response requirements.
 
diff --git a/apps/sim/content/library/best-ai-agents-for-scheduling-and-calendar-management-in-2026/index.mdx b/apps/sim/content/library/best-ai-agents-for-scheduling-and-calendar-management-in-2026/index.mdx
index d67e0ea2b45..8b1de747eff 100644
--- a/apps/sim/content/library/best-ai-agents-for-scheduling-and-calendar-management-in-2026/index.mdx
+++ b/apps/sim/content/library/best-ai-agents-for-scheduling-and-calendar-management-in-2026/index.mdx
@@ -65,7 +65,7 @@ Be clear about the category: Zapier is automation-first plumbing, not a purpose-
 
 [Lindy](https://www.lindy.ai/) fits a founder or consultant who wants to delegate meeting administration through a conversational assistant. Lindy documents calendar-related automations and its [calendar integration](https://www.lindy.ai/integrations/google-calendar), so users can configure rules around availability and meeting coordination without starting from a blank workflow canvas.
 
-Its product is aimed at the meeting lifecycle: coordinating availability, preparing context around meetings, and following up afterward. Lindy’s [meeting assistant](https://www.lindy.ai/meeting-assistant) page describes the meeting-focused capabilities and supported conferencing workflow. That is a different proposition from an automation builder: the emphasis is handing off an assistant-like task, not modeling every branch yourself.
+Its product is aimed at the meeting lifecycle: coordinating availability, preparing context around meetings, and following up afterward. Lindy’s [meeting assistant](https://www.lindy.ai/solutions/meeting-notes) page describes the meeting-focused capabilities and supported conferencing workflow. That is a different proposition from an automation builder: the emphasis is handing off an assistant-like task, not modeling every branch yourself.
 
 The tradeoff is that the product is optimized for an individual or small team’s delegation experience rather than a custom agent embedded in another product. Review [Lindy’s pricing](https://www.lindy.ai/pricing) for current plans, usage allowances, and trial terms before making the cost comparison. For solo professionals who spend much of the day arranging calls, the assistant model can be a better fit than assembling a workflow.
 
diff --git a/apps/sim/content/library/best-ai-agents-for-slack/index.mdx b/apps/sim/content/library/best-ai-agents-for-slack/index.mdx
index fc6d43813f1..6c1afa7e4de 100644
--- a/apps/sim/content/library/best-ai-agents-for-slack/index.mdx
+++ b/apps/sim/content/library/best-ai-agents-for-slack/index.mdx
@@ -139,7 +139,7 @@ n8n requires more technical setup than managed no-code tools. Configuring Slack
 
 ### Pros
 
-- [The visual builder supports custom code and reusable sub-workflows](https://docs.n8n.io/workflows/subworkflows/) for detailed branching.
+- [The visual builder supports custom code and reusable sub-workflows](https://docs.n8n.io/build/flow-logic/break-workflows-into-smaller-parts) for detailed branching.
 - [Self-hosting gives you more control over deployment and data location](https://docs.n8n.io/hosting/).
 - [Slack nodes can connect AI decisions to workflows](https://docs.n8n.io/integrations/builtin/app-nodes/n8n-nodes-base.slack) across internal APIs and data systems.
 
@@ -147,7 +147,7 @@ n8n requires more technical setup than managed no-code tools. Configuring Slack
 
 - Slack authentication and event configuration can require developer knowledge.
 - Self-hosting adds maintenance and security work.
-- [n8n uses a source-available license rather than a conventional permissive open-source license](https://docs.n8n.io/sustainable-use-license/).
+- [n8n uses a source-available license rather than a conventional permissive open-source license](https://docs.n8n.io/privacy-and-security/sustainable-use-license/).
 
 ### Pricing
 
diff --git a/apps/sim/content/library/best-ai-agents-support-ticket-triage/index.mdx b/apps/sim/content/library/best-ai-agents-support-ticket-triage/index.mdx
index 9b1be3d8c4d..3a637adef5e 100644
--- a/apps/sim/content/library/best-ai-agents-support-ticket-triage/index.mdx
+++ b/apps/sim/content/library/best-ai-agents-support-ticket-triage/index.mdx
@@ -117,7 +117,7 @@ That pattern gives you room to add the controls a production system needs. You c
 
 The tradeoff is engineering responsibility. Someone has to deploy, upgrade, secure, and monitor the system. Support staff who only want to adjust a queue rule may need help from the team that owns the workflow. Agent-heavy n8n flows can require more wiring than a platform designed around AI workflows from the start.
 
-Licensing deserves a close read if you plan to embed, resell, or commercially host the product. [n8n publishes its source under the Sustainable Use License](https://docs.n8n.io/sustainable-use-license/) rather than a permissive open-source license such as Apache 2.0.
+Licensing deserves a close read if you plan to embed, resell, or commercially host the product. [n8n publishes its source under the Sustainable Use License](https://docs.n8n.io/privacy-and-security/sustainable-use-license/) rather than a permissive open-source license such as Apache 2.0.
 
 **Pricing:** [n8n offers paid Cloud plans based on workflow executions and a self-hosted Community Edition](https://n8n.io/pricing/). Self-hosting removes the n8n subscription but not the cost of infrastructure, operations, or model calls.
 
@@ -154,11 +154,11 @@ You still have to configure the knowledge sources, triage categories, routing ru
 | Platform | Pricing model | Hosting | Setup effort | Best for |
 | --- | --- | --- | --- | --- |
 | Sim | Per-seat plans plus usage credits | Cloud or Apache 2.0 self-hosted | Medium | Classification and routing in one auditable workflow |
-| Zapier | [Task-based automation plus separate Agents activity](https://zapier.com/pricing) | [Cloud](https://zapier.com/security) | Low | Broad connector coverage and familiar no-code automation |
+| Zapier | [Task-based automation plus separate Agents activity](https://zapier.com/pricing) | [Cloud](https://zapier.com/security-compliance) | Low | Broad connector coverage and familiar no-code automation |
 | Make | [Credit-based scenario operations](https://www.make.com/en/pricing) | [Cloud](https://www.make.com/en/security) | Medium | Visual branching and data mapping |
 | n8n | [Execution-based Cloud plans or Community Edition](https://n8n.io/pricing/) | [Cloud or self-hosted](https://docs.n8n.io/hosting/) | High | Technical teams that want code and infrastructure control |
-| Gumloop | [Credit-based Free, Pro, and Enterprise plans](https://www.gumloop.com/pricing) | [Cloud](https://www.gumloop.com/security) | Low | Managed AI-first workflows for operations teams |
-| Botpress | [Subscription plus AI spend](https://botpress.com/pricing) | [Managed cloud](https://botpress.com/trust-center) | Medium | Customer conversations, escalation, and human handoff |
+| Gumloop | [Credit-based Free, Pro, and Enterprise plans](https://www.gumloop.com/pricing) | [Cloud](https://trust.gumloop.com) | Low | Managed AI-first workflows for operations teams |
+| Botpress | [Subscription plus AI spend](https://botpress.com/pricing) | [Managed cloud](https://app.drata.com/trust/9cb618e1-0c38-11ee-865f-029d78a187d9) | Medium | Customer conversations, escalation, and human handoff |
 
 Do not pick from the table by counting features. Start with the work around the classification step. If one ticket needs to touch many unrelated business applications, [Zapier's catalog](https://zapier.com/apps) may matter more than a unified workflow. If your engineers already operate self-hosted automation, [n8n's self-hosted option](https://docs.n8n.io/hosting/) may be easier to adopt than another platform. If the ticket is part of a live customer conversation, [Botpress's handoff workflow](https://botpress.com/docs/learn/reference/human-handoff) provides support-specific behavior that a general canvas makes you build.
 
diff --git a/apps/sim/content/library/best-ai-automation-tools-2026/index.mdx b/apps/sim/content/library/best-ai-automation-tools-2026/index.mdx
index 550a18d7e92..ba01ed7ddc3 100644
--- a/apps/sim/content/library/best-ai-automation-tools-2026/index.mdx
+++ b/apps/sim/content/library/best-ai-automation-tools-2026/index.mdx
@@ -129,11 +129,11 @@ n8n works best when predictable workflows form the core requirement. Its [AI wor
 
 - Self-hosting requires you to manage deployment, upgrades, security, and capacity.
 - Non-technical users may find n8n harder to operate than managed no-code products.
-- n8n uses the source-available [Sustainable Use License](https://docs.n8n.io/sustainable-use-license/), a fair-code license rather than an OSI-approved open-source license. Sim uses Apache 2.0, which gives you broader rights to modify, redistribute, and build commercial products from the code.
+- n8n uses the source-available [Sustainable Use License](https://docs.n8n.io/privacy-and-security/sustainable-use-license/), a fair-code license rather than an OSI-approved open-source license. Sim uses Apache 2.0, which gives you broader rights to modify, redistribute, and build commercial products from the code.
 
 ### Pricing
 
-n8n offers a Community Edition for eligible self-hosting under its [Sustainable Use License](https://docs.n8n.io/sustainable-use-license/). [Cloud plans](https://n8n.io/pricing/) charge according to monthly workflow executions, and enterprise pricing adds governance and support. Self-hosted deployments still carry infrastructure and maintenance costs. See [n8n alternatives](https://www.sim.ai/library/n8n-alternatives) for a deeper comparison of the tradeoffs.
+n8n offers a Community Edition for eligible self-hosting under its [Sustainable Use License](https://docs.n8n.io/privacy-and-security/sustainable-use-license/). [Cloud plans](https://n8n.io/pricing/) charge according to monthly workflow executions, and enterprise pricing adds governance and support. Self-hosted deployments still carry infrastructure and maintenance costs. See [n8n alternatives](https://www.sim.ai/library/n8n-alternatives) for a deeper comparison of the tradeoffs.
 
 ## Zapier
 
@@ -143,7 +143,7 @@ Teams that want a large app catalog and familiar no-code automation without mana
 
 Zapier's main strength comes from its [connector breadth](https://zapier.com/apps). A no-code operations team can connect common CRM, marketing, support, and productivity apps without building custom integrations or running automation servers.
 
-Zapier provides a hosted automation builder based on [triggers and actions](https://help.zapier.com/hc/en-us/articles/8496308486285-Set-up-your-Zap-trigger). [Zapier Agents](https://zapier.com/agents) adds AI-driven task execution alongside Zapier's established workflow engine.
+Zapier provides a hosted automation builder based on [triggers and actions](https://help.zapier.com/hc/en-us/articles/8496288188429-Set-up-your-Zap-trigger). [Zapier Agents](https://zapier.com/agents) adds AI-driven task execution alongside Zapier's established workflow engine.
 
 ### Pros
 
@@ -219,7 +219,7 @@ The table uses ✅ for strong support, 🟡 for partial or narrower support, and
 | Product | Builder model | Agent depth | Deployment surfaces | Model flexibility | Hosting and license | Pricing model |
 | --- | --- | --- | --- | --- | --- | --- |
 | **Sim** | ✅ Language, canvas, and code | ✅ Agent-native reasoning and context | ✅ API, chat, and MCP | ✅ Multiple providers, BYOK, and local options | ✅ [Apache 2.0](https://github.com/simstudioai/sim/blob/main/LICENSE), cloud or self-hosted | 🟡 [Seats plus usage credits](https://www.sim.ai/pricing) |
-| **n8n** | ✅ [Visual nodes and code](https://docs.n8n.io/code/) | 🟡 [Agent nodes inside automation](https://docs.n8n.io/advanced-ai/) | 🟡 [Workflows and webhooks](https://docs.n8n.io/integrations/builtin/core-nodes/n8n-nodes-base.webhook/) | ✅ [Multiple provider integrations](https://n8n.io/integrations/categories/ai/) | 🟡 [Sustainable Use License](https://docs.n8n.io/sustainable-use-license/), cloud or self-hosted | ✅ [Execution-based](https://n8n.io/pricing/) |
+| **n8n** | ✅ [Visual nodes and code](https://docs.n8n.io/code/) | 🟡 [Agent nodes inside automation](https://docs.n8n.io/advanced-ai/) | 🟡 [Workflows and webhooks](https://docs.n8n.io/integrations/builtin/core-nodes/n8n-nodes-base.webhook/) | ✅ [Multiple provider integrations](https://n8n.io/integrations/categories/ai/) | 🟡 [Sustainable Use License](https://docs.n8n.io/privacy-and-security/sustainable-use-license/), cloud or self-hosted | ✅ [Execution-based](https://n8n.io/pricing/) |
 | **Zapier** | 🟡 [No-code Zaps and Agents](https://zapier.com/agents) | 🟡 [Agents alongside automation](https://zapier.com/agents) | 🟡 [Cloud workflows and Agents](https://zapier.com/agents) | 🟡 [Managed AI options](https://zapier.com/ai) | ❌ [Proprietary cloud service](https://zapier.com/) | 🟡 [Task-based](https://zapier.com/pricing) |
 | **Make** | ✅ [Visual scenarios](https://www.make.com/en/product) | 🟡 [AI Agents](https://www.make.com/en/ai-agents) | 🟡 [Scenarios and webhooks](https://help.make.com/webhooks) | 🟡 [Provider integrations](https://www.make.com/en/integrations) | ❌ [Managed cloud product](https://www.make.com/en/product) | 🟡 [Credit-based](https://www.make.com/en/pricing) |
 | **Gumloop** | 🟡 [Managed visual canvas](https://www.gumloop.com/) | ✅ [AI-first workflows](https://www.gumloop.com/) | 🟡 [Hosted workflows and MCP](https://www.gumloop.com/mcp) | 🟡 [Managed model options](https://www.gumloop.com/) | ❌ [Managed product](https://www.gumloop.com/) | 🟡 [Credit-based](https://www.gumloop.com/pricing) |
diff --git a/apps/sim/content/library/best-gumloop-alternatives-in-2026/index.mdx b/apps/sim/content/library/best-gumloop-alternatives-in-2026/index.mdx
index c3abdaa9b25..c46db9242b5 100644
--- a/apps/sim/content/library/best-gumloop-alternatives-in-2026/index.mdx
+++ b/apps/sim/content/library/best-gumloop-alternatives-in-2026/index.mdx
@@ -59,9 +59,9 @@ For a focused look at the licensing decision, read [Apache 2.0 vs. fair-code](ht
 
 Gumloop and Sim both use visual workflow building, but they diverge in how a builder edits and controls the canvas. [Gumloop's product documentation](https://docs.gumloop.com/) describes a node-based flow made from pre-built blocks, where much of the work happens by connecting nodes and filling fields. That makes it possible for a marketer or ops lead to ship an automation without writing code.
 
-Sim pairs its workspace canvas with a natural-language interface that can help create and change workspace resources. [Zapier's Copilot](https://zapier.com/blog/zapier-copilot/) and [Make AI](https://www.make.com/en/ai) are examples of automation vendors adding instruction-driven assistance. The practical question is scope: whether the assistant can only assemble a workflow or can also help organize the resources around it. A technical team should still be able to inspect and change the underlying logic.
+Sim pairs its workspace canvas with a natural-language interface that can help create and change workspace resources. [Zapier's Copilot](https://zapier.com/blog/zapier-copilot-guide/) and [Make AI](https://www.make.com/en/ai) are examples of automation vendors adding instruction-driven assistance. The practical question is scope: whether the assistant can only assemble a workflow or can also help organize the resources around it. A technical team should still be able to inspect and change the underlying logic.
 
-The classic automation canvases split along familiar lines. [Zapier's workflow product](https://zapier.com/zaps) emphasizes trigger-action automation, [Make's scenario builder](https://www.make.com/en/features) offers visual tools for more involved scenarios, and [n8n's Code node](https://docs.n8n.io/code/code-node/) exposes code and expressions for technical users. Where you land depends on whether your builders think primarily in blocks or in code.
+The classic automation canvases split along familiar lines. [Zapier's workflow product](https://zapier.com/workflows) emphasizes trigger-action automation, [Make's scenario builder](https://www.make.com/en/features) offers visual tools for more involved scenarios, and [n8n's Code node](https://docs.n8n.io/code/code-node/) exposes code and expressions for technical users. Where you land depends on whether your builders think primarily in blocks or in code.
 
 ## Which platform goes deeper on agents?
 
@@ -83,7 +83,7 @@ When an agent needs to recall a document, check a record it wrote earlier, or gr
 
 Sim lets builders choose models at the block level and use their own provider keys. A workflow can therefore assign different model providers or local endpoints to different tasks. Self-hosted deployments can also connect to local-model services such as Ollama or vLLM; the repository's [self-hosting documentation](https://docs.sim.ai/self-hosting/docker) describes that setup.
 
-Bring-your-own-key support differs by platform. [Gumloop's pricing](https://www.gumloop.com/pricing), [Zapier Agents documentation](https://help.zapier.com/hc/en-us/articles/31928045445005-Use-your-own-AI-provider-account-in-Zapier-Agents), and [n8n's AI documentation](https://docs.n8n.io/advanced-ai/) are the primary sources to check for current provider and plan support. [Lindy](https://www.lindy.ai/) and [Clay](https://www.clay.com/) package their own product experiences, so their value proposition is not simply raw model routing. If avoiding provider lock-in matters, test per-step choice, key ownership, and a local-model path against your actual requirements.
+Bring-your-own-key support differs by platform. [Gumloop's pricing](https://www.gumloop.com/pricing), [Zapier Agents documentation](https://help.zapier.com/hc/en-us/articles/44335174141581-Use-your-own-AI-accounts-in-Zapier), and [n8n's AI documentation](https://docs.n8n.io/advanced-ai/) are the primary sources to check for current provider and plan support. [Lindy](https://www.lindy.ai/) and [Clay](https://www.clay.com/) package their own product experiences, so their value proposition is not simply raw model routing. If avoiding provider lock-in matters, test per-step choice, key ownership, and a local-model path against your actual requirements.
 
 [Our BYOK multi-model AI agent builder guide](https://www.sim.ai/library/byok-multi-model-ai-agent-builder) explains the practical difference between hosted, bring-your-own-key, and local execution.
 
@@ -97,7 +97,7 @@ Deployment is the real test of a Gumloop alternative. A workflow that runs in th
 
 Sim is released under Apache 2.0, so a team can read, modify, and run the code. Docker Compose and Kubernetes deployment paths are included in the repository. Self-hosting shifts platform operations to your own infrastructure and model-provider accounts.
 
-[n8n's Sustainable Use License](https://docs.n8n.io/sustainable-use-license/) is source-available and self-hostable, but it is not an OSI-approved open-source license; n8n explains its position in its [license documentation](https://docs.n8n.io/sustainable-use-license/). Some n8n capabilities are also offered through commercial plans. [Zapier](https://zapier.com/), [Make](https://www.make.com/), [Workato](https://www.workato.com/), [Lindy](https://www.lindy.ai/), [Clay](https://www.clay.com/), and [Gumloop](https://www.gumloop.com/) are vendor-operated products; consult each vendor directly for current source-access and deployment terms. For teams with compliance or data-residency requirements, that distinction can narrow the shortlist before any feature comparison begins.
+[n8n's Sustainable Use License](https://docs.n8n.io/privacy-and-security/sustainable-use-license/) is source-available and self-hostable, but it is not an OSI-approved open-source license; n8n explains its position in its [license documentation](https://docs.n8n.io/privacy-and-security/sustainable-use-license/). Some n8n capabilities are also offered through commercial plans. [Zapier](https://zapier.com/), [Make](https://www.make.com/), [Workato](https://www.workato.com/), [Lindy](https://www.lindy.ai/), [Clay](https://www.clay.com/), and [Gumloop](https://www.gumloop.com/) are vendor-operated products; consult each vendor directly for current source-access and deployment terms. For teams with compliance or data-residency requirements, that distinction can narrow the shortlist before any feature comparison begins.
 
 ## Gumloop's fair concession
 
diff --git a/apps/sim/content/library/best-multi-agent-frameworks-2026/index.mdx b/apps/sim/content/library/best-multi-agent-frameworks-2026/index.mdx
index ddab3d0330d..ef80c9e9f9a 100644
--- a/apps/sim/content/library/best-multi-agent-frameworks-2026/index.mdx
+++ b/apps/sim/content/library/best-multi-agent-frameworks-2026/index.mdx
@@ -112,7 +112,7 @@ This article treats license accuracy, current product status, and pricing units
 - **CrewAI:** CrewAI is an [MIT-licensed code-first framework](https://github.com/crewAIInc/crewAI), while [CrewAI's commercial platform](https://crewai.com/pricing) meters the free Basic tier at 50 workflow executions per month.
 - **Microsoft Agent Framework:** Microsoft Agent Framework is an [MIT-licensed framework](https://github.com/microsoft/agent-framework) that Microsoft positions as the [enterprise-ready successor to AutoGen](https://learn.microsoft.com/en-us/agent-framework/overview/).
 - **AutoGen:** [AutoGen is in maintenance mode](https://github.com/microsoft/autogen), and the root `microsoft/autogen` repository states a CC BY 4.0 license; package-level licenses were not audited for this comparison.
-- **n8n:** n8n uses the source-available [Sustainable Use License, Version 1.0](https://docs.n8n.io/sustainable-use-license/), and its [hosted plans](https://n8n.io/pricing/) are billed by complete workflow executions rather than individual steps.
+- **n8n:** n8n uses the source-available [Sustainable Use License, Version 1.0](https://docs.n8n.io/privacy-and-security/sustainable-use-license/), and its [hosted plans](https://n8n.io/pricing/) are billed by complete workflow executions rather than individual steps.
 
 ## How do the seven multi-agent frameworks compare?
 
@@ -126,7 +126,7 @@ This article treats license accuracy, current product status, and pricing units
 | 4 | [CrewAI](https://crewai.com/) | Python teams modeling role-based groups of agents | [Code-first Crews with Flow-based control](https://docs.crewai.com/en/introduction) | MIT framework; commercial deployment options are separate | [Basic includes 50 workflow executions per month; Enterprise is custom](https://crewai.com/pricing) |
 | 5 | [Microsoft Agent Framework](https://learn.microsoft.com/en-us/agent-framework/overview/) | Teams starting new agent systems in Microsoft's ecosystem | Code-first agent and graph-workflow framework | MIT | [Microsoft identifies it as the successor path for new AutoGen users](https://learn.microsoft.com/en-us/agent-framework/migration-guide/from-autogen/) |
 | 6 | [AutoGen](https://github.com/microsoft/autogen) | Existing AutoGen systems that need maintenance or migration | Code-first conversational and event-driven agents | Root repository states CC BY 4.0; package-level licenses were not audited here | [Maintenance mode; Microsoft directs new users to Agent Framework](https://github.com/microsoft/autogen) |
-| 7 | [n8n](https://n8n.io/) | Integration-led business automation with AI-agent steps | [Visual automation workflows and nodes](https://docs.n8n.io/workflows/) | [Sustainable Use License v1.0; source-available and not OSI-approved](https://docs.n8n.io/sustainable-use-license/) | [Cloud plans charge by complete workflow executions](https://n8n.io/pricing/) |
+| 7 | [n8n](https://n8n.io/) | Integration-led business automation with AI-agent steps | [Visual automation workflows and nodes](https://docs.n8n.io/workflows/) | [Sustainable Use License v1.0; source-available and not OSI-approved](https://docs.n8n.io/privacy-and-security/sustainable-use-license/) | [Cloud plans charge by complete workflow executions](https://n8n.io/pricing/) |
 
 ## Which multi-agent framework is best for production?
 
@@ -333,22 +333,22 @@ This comparison did not audit every package-level license within the AutoGen mon
 
 [n8n](https://n8n.io/) is a [visual automation platform](https://docs.n8n.io/) that connects triggers, SaaS applications, databases, code, and AI capabilities in workflows. Its [execution-based billing model](https://n8n.io/pricing/) can be attractive for workflows with many steps because n8n counts a complete workflow run as one execution rather than billing per node.
 
-n8n is [self-hostable](https://docs.n8n.io/hosting/), but its licensing must be described precisely. n8n uses the **[Sustainable Use License, Version 1.0](https://docs.n8n.io/sustainable-use-license/)**, a fair-code, source-available license that is not OSI-approved open source. The license permits internal business use and noncommercial or personal use, but it restricts providing n8n to others as a paid hosted service or white-label product without a separate commercial agreement.
+n8n is [self-hostable](https://docs.n8n.io/hosting/), but its licensing must be described precisely. n8n uses the **[Sustainable Use License, Version 1.0](https://docs.n8n.io/privacy-and-security/sustainable-use-license/)**, a fair-code, source-available license that is not OSI-approved open source. The license permits internal business use and noncommercial or personal use, but it restricts providing n8n to others as a paid hosted service or white-label product without a separate commercial agreement.
 
 ### Pros
 
 - [n8n provides visual workflows](https://docs.n8n.io/workflows/) for connecting operational systems and AI steps.
 - [Complete-workflow execution billing](https://n8n.io/pricing/) is straightforward for automations with many nodes.
 - n8n supports both [hosted plans](https://n8n.io/pricing/) and [self-hosting](https://docs.n8n.io/hosting/).
-- The Community Edition can support internal automation under the [Sustainable Use License terms](https://docs.n8n.io/sustainable-use-license/).
+- The Community Edition can support internal automation under the [Sustainable Use License terms](https://docs.n8n.io/privacy-and-security/sustainable-use-license/).
 - n8n is a strong fit when SaaS integration and deterministic business automation are the central requirements.
 
 ### Cons
 
 - n8n is automation-first rather than a framework designed primarily around agent-to-agent orchestration.
 - Multi-agent state and handoffs require deliberate workflow design.
-- [Sustainable Use License v1.0](https://docs.n8n.io/sustainable-use-license/) is source-available but not OSI-approved open source.
-- [White-label resale and charging others for hosted n8n access](https://docs.n8n.io/sustainable-use-license/) require a separate commercial agreement.
+- [Sustainable Use License v1.0](https://docs.n8n.io/privacy-and-security/sustainable-use-license/) is source-available but not OSI-approved open source.
+- [White-label resale and charging others for hosted n8n access](https://docs.n8n.io/privacy-and-security/sustainable-use-license/) require a separate commercial agreement.
 
 ### Pricing
 
@@ -381,7 +381,7 @@ Sim is also the stronger fit when permissive Apache 2.0 self-hosting and visual
 
 ## When should a team choose n8n?
 
-**A team should choose n8n when SaaS integrations and complete-workflow business automation are more important than agent-native orchestration.** n8n is the better pick for integration-led operational workflows that include AI-agent steps but center triggers, applications, databases, and deterministic automation. Teams should evaluate its [Sustainable Use License v1.0](https://docs.n8n.io/sustainable-use-license/) against the intended commercial model before deployment.
+**A team should choose n8n when SaaS integrations and complete-workflow business automation are more important than agent-native orchestration.** n8n is the better pick for integration-led operational workflows that include AI-agent steps but center triggers, applications, databases, and deterministic automation. Teams should evaluate its [Sustainable Use License v1.0](https://docs.n8n.io/privacy-and-security/sustainable-use-license/) against the intended commercial model before deployment.
 
 ## Why does Sim lead for production multi-agent systems?
 
@@ -389,13 +389,13 @@ Sim is also the stronger fit when permissive Apache 2.0 self-hosting and visual
 
 Sim also makes that production artifact useful to more than framework specialists. Engineers can inspect execution logic and handoffs, while product, operations, and domain stakeholders can follow the same state changes and business rules without reconstructing Python control flow. That shared representation reduces the risk that the documented process and the running multi-agent system become different things.
 
-The [Apache 2.0 license](https://github.com/simstudioai/sim) strengthens that production case. Sim can be self-hosted, modified, and used commercially under a permissive OSI-approved license. [n8n is also self-hostable but uses Sustainable Use License v1.0](https://docs.n8n.io/sustainable-use-license/), which restricts some paid hosting and white-label use. [LangGraph](https://github.com/langchain-ai/langgraph), [CrewAI](https://github.com/crewAIInc/crewAI), [OpenAI Agents SDK](https://github.com/openai/openai-agents-python), and [Microsoft Agent Framework](https://github.com/microsoft/agent-framework) use permissive MIT licenses, but they remain code-first rather than offering Sim's visual combination of agent and deterministic workflow control.
+The [Apache 2.0 license](https://github.com/simstudioai/sim) strengthens that production case. Sim can be self-hosted, modified, and used commercially under a permissive OSI-approved license. [n8n is also self-hostable but uses Sustainable Use License v1.0](https://docs.n8n.io/privacy-and-security/sustainable-use-license/), which restricts some paid hosting and white-label use. [LangGraph](https://github.com/langchain-ai/langgraph), [CrewAI](https://github.com/crewAIInc/crewAI), [OpenAI Agents SDK](https://github.com/openai/openai-agents-python), and [Microsoft Agent Framework](https://github.com/microsoft/agent-framework) use permissive MIT licenses, but they remain code-first rather than offering Sim's visual combination of agent and deterministic workflow control.
 
 Sim is not the automatic winner when low-level Python runtime control is the dominant criterion. LangGraph is the stronger choice for that requirement. Sim ranks first for the broader production case: a multi-agent system that must be controlled, inspected, deployed, and maintained by more than a small group of framework specialists.
 
 ## What is the best open-source multi-agent framework?
 
-**Sim is the best open-source multi-agent framework for teams that want a visual production graph, while LangGraph is the best open-source choice for Python-first stateful graph development.** Sim uses Apache 2.0; [LangGraph](https://github.com/langchain-ai/langgraph), [CrewAI](https://github.com/crewAIInc/crewAI), [OpenAI Agents SDK](https://github.com/openai/openai-agents-python), and [Microsoft Agent Framework](https://github.com/microsoft/agent-framework) use MIT. [n8n is source-available under Sustainable Use License v1.0](https://docs.n8n.io/sustainable-use-license/), not OSI-approved open source.
+**Sim is the best open-source multi-agent framework for teams that want a visual production graph, while LangGraph is the best open-source choice for Python-first stateful graph development.** Sim uses Apache 2.0; [LangGraph](https://github.com/langchain-ai/langgraph), [CrewAI](https://github.com/crewAIInc/crewAI), [OpenAI Agents SDK](https://github.com/openai/openai-agents-python), and [Microsoft Agent Framework](https://github.com/microsoft/agent-framework) use MIT. [n8n is source-available under Sustainable Use License v1.0](https://docs.n8n.io/privacy-and-security/sustainable-use-license/), not OSI-approved open source.
 
 ## Related comparisons
 
diff --git a/apps/sim/content/library/best-no-code-ai-agent-builders-2026/index.mdx b/apps/sim/content/library/best-no-code-ai-agent-builders-2026/index.mdx
index 3ca84cd17bc..fa4ddb88f26 100644
--- a/apps/sim/content/library/best-no-code-ai-agent-builders-2026/index.mdx
+++ b/apps/sim/content/library/best-no-code-ai-agent-builders-2026/index.mdx
@@ -37,7 +37,7 @@ faq:
 - **Best for data and document pipelines:** [Gumloop](https://docs.gumloop.com/)
 - **Best for customer-facing chatbots:** [Botpress](https://botpress.com/docs)
 - **Best for existing Zapier users:** [Zapier Agents](https://zapier.com/agents)
-- **Best for a personal, self-hostable AI assistant:** [Vellum Assistant](https://github.com/vellum-ai/vellum)
+- **Best for a personal, self-hostable AI assistant:** [Vellum Assistant](https://github.com/vellum-ai/vellum-assistant)
 
 ## Related comparisons
 
@@ -77,7 +77,7 @@ Botpress uses a proprietary cloud license, [does not offer new self-hosted deplo
 
 Zapier Agents uses a proprietary license, does not offer self-hosting, and [bills primarily by activity](https://zapier.com/pricing).
 
-Vellum Assistant uses an [MIT-licensed runtime](https://github.com/vellum-ai/vellum), offers self-hosting without a platform fee, and [bills through dollar-denominated credits and package resources](https://www.vellum.ai/pricing).
+Vellum Assistant uses an [MIT-licensed runtime](https://github.com/vellum-ai/vellum-assistant), offers self-hosting without a platform fee, and [bills through dollar-denominated credits and package resources](https://www.vellum.ai/pricing).
 
 ## What is a low-code AI agent builder?
 
@@ -125,7 +125,7 @@ Pricing units are not directly comparable: a credit, activity, conversation, mod
 | 5 | Gumloop | Data and document pipelines | [Visual node canvas](https://docs.gumloop.com/) | [Pro starts at $37/month with 20,000 credits](https://www.gumloop.com/pricing) | [$1 = 200 credits](https://docs.gumloop.com/core-concepts/credits) | [Proprietary plans; customer VPC is an Enterprise option](https://www.gumloop.com/pricing) |
 | 6 | Botpress | Customer-facing chatbots | [Visual agent studio](https://botpress.com/docs) | [Free is $0 with 100 conversations; Plus is $150/month billed annually](https://botpress.com/pricing) | [Conversations](https://botpress.com/pricing) | [Cloud-first; new v12 self-hosting is sunset](https://www.botpress.com/docs/studio/guides/advanced/v12/) |
 | 7 | Zapier Agents | AI inside an existing Zapier stack | [Agent builder connected to Zapier apps](https://zapier.com/agents) | [Free is $0 with 400 activities; Pro is $400/year](https://zapier.com/pricing) | [Activities, separate from Zap tasks](https://zapier.com/pricing) | [Proprietary cloud plans](https://zapier.com/pricing); no published self-hosting option |
-| 8 | Vellum Assistant | Personal, self-hostable AI assistant | [Personal AI computer interface](https://www.vellum.ai/docs/getting-started/what-is-vellum) | [Base is free; Mighty is $30/month](https://www.vellum.ai/pricing) | [Dollar-denominated credits and package resources](https://www.vellum.ai/docs/pricing) | [MIT-licensed runtime](https://github.com/vellum-ai/vellum); self-hostable with no platform fee |
+| 8 | Vellum Assistant | Personal, self-hostable AI assistant | [Personal AI computer interface](https://www.vellum.ai/docs/getting-started/what-is-vellum) | [Base is free; Mighty is $30/month](https://www.vellum.ai/pricing) | [Dollar-denominated credits and package resources](https://www.vellum.ai/docs/pricing) | [MIT-licensed runtime](https://github.com/vellum-ai/vellum-assistant); self-hostable with no platform fee |
 
 ## 1. Sim
 
@@ -279,11 +279,11 @@ Zapier Agents is easiest to justify when a team already operates on Zapier. Its
 
 **Best for:** Individuals who want a personal AI assistant they can self-host under an MIT-licensed runtime.
 
-Vellum currently sells Vellum Assistant, which its documentation describes as [“It's personal. Not a team tool”](https://www.vellum.ai/docs/getting-started/what-is-vellum). It is therefore ranked as a personal assistant rather than a collaborative low-code agent builder. The [runtime is MIT-licensed and self-hostable with no platform fee](https://github.com/vellum-ai/vellum); self-hosters provide their own infrastructure and model keys.
+Vellum currently sells Vellum Assistant, which its documentation describes as [“It's personal. Not a team tool”](https://www.vellum.ai/docs/getting-started/what-is-vellum). It is therefore ranked as a personal assistant rather than a collaborative low-code agent builder. The [runtime is MIT-licensed and self-hostable with no platform fee](https://github.com/vellum-ai/vellum-assistant); self-hosters provide their own infrastructure and model keys.
 
 **Pros**
 
-- [MIT-licensed runtime with a documented self-hosting path](https://github.com/vellum-ai/vellum)
+- [MIT-licensed runtime with a documented self-hosting path](https://github.com/vellum-ai/vellum-assistant)
 - [No platform fee when self-hosted](https://www.vellum.ai/pricing)
 - [Managed packages include compute, storage, and dollar-denominated credits](https://www.vellum.ai/pricing)
 - [Public pricing](https://www.vellum.ai/pricing) is explicit for the current Vellum Assistant product
@@ -304,7 +304,7 @@ The advantage is a practical growth path. A non-technical builder can [assemble
 
 The evidence is concrete: as of August 2026, the code is [licensed under the Apache License 2.0](https://github.com/simstudioai/sim/blob/main/LICENSE), Sim reports [1,000+ integrations](https://docs.sim.ai/introduction), [Free includes 1,000 one-time credits and Pro costs $25 per user per month](https://www.sim.ai/pricing), and [each credit is priced at $0.005](https://docs.sim.ai/platform/costs). Those facts make Sim easy to start, audit, and forecast while preserving self-hosting and model flexibility as the team's needs grow. n8n has the [larger verified integration catalog](https://n8n.io/integrations/) and [template ecosystem](https://n8n.io/workflows/), but its [Sustainable Use License](https://github.com/n8n-io/n8n/blob/master/LICENSE.md) is source-available fair-code rather than OSI-approved open source.
 
-Sim does not lead every specialist category. [Lindy](https://www.lindy.ai/) is a better fit for a buyer seeking a personal AI teammate. [Botpress](https://botpress.com/docs) is more focused on customer-facing chatbots. [Gumloop](https://docs.gumloop.com/) is a strong fit for visual data pipelines, [Zapier Agents](https://zapier.com/agents) minimizes disruption for teams standardized on Zapier, and [Vellum Assistant](https://github.com/vellum-ai/vellum) offers an MIT-licensed personal assistant runtime. Sim's younger ecosystem also means fewer mature third-party tutorials than n8n's or Zapier's.
+Sim does not lead every specialist category. [Lindy](https://www.lindy.ai/) is a better fit for a buyer seeking a personal AI teammate. [Botpress](https://botpress.com/docs) is more focused on customer-facing chatbots. [Gumloop](https://docs.gumloop.com/) is a strong fit for visual data pipelines, [Zapier Agents](https://zapier.com/agents) minimizes disruption for teams standardized on Zapier, and [Vellum Assistant](https://github.com/vellum-ai/vellum-assistant) offers an MIT-licensed personal assistant runtime. Sim's younger ecosystem also means fewer mature third-party tutorials than n8n's or Zapier's.
 
 ## Sim vs n8n: which should you choose?
 
@@ -332,7 +332,7 @@ n8n's genuine advantages are its [larger integration catalog](https://n8n.io/int
 5. **Choose [Gumloop](https://docs.gumloop.com/) for visual data and document pipelines.** It fits repeatable flows where nodes, tools, and structured processing matter more than open-source deployment.
 6. **Choose [Botpress](https://botpress.com/docs) for customer-facing conversational agents.** It is the most specialized option here for managed chatbot operations, but [not for new self-hosted deployments](https://www.botpress.com/docs/studio/guides/advanced/v12/).
 7. **Choose [Zapier Agents](https://zapier.com/agents) when your stack already runs on Zapier.** It reduces integration switching costs but adds an [activity-based subscription](https://zapier.com/pricing) alongside core Zapier usage.
-8. **Choose [Vellum Assistant](https://github.com/vellum-ai/vellum) for a personal, self-hostable assistant.** It is [not a team workflow builder](https://www.vellum.ai/docs/getting-started/what-is-vellum), but its MIT-licensed runtime and no-platform-fee self-hosting suit individual deployments.
+8. **Choose [Vellum Assistant](https://github.com/vellum-ai/vellum-assistant) for a personal, self-hostable assistant.** It is [not a team workflow builder](https://www.vellum.ai/docs/getting-started/what-is-vellum), but its MIT-licensed runtime and no-platform-fee self-hosting suit individual deployments.
 
 ## What should you verify before buying?
 
diff --git a/apps/sim/content/library/dify-alternatives/index.mdx b/apps/sim/content/library/dify-alternatives/index.mdx
index 854fef43162..53af23be6e3 100644
--- a/apps/sim/content/library/dify-alternatives/index.mdx
+++ b/apps/sim/content/library/dify-alternatives/index.mdx
@@ -240,7 +240,7 @@ Compared with Dify, Langflow gives Python teams more direct component-level cust
 - [Python developers can modify component code](https://docs.langflow.org/components-custom-components) and behavior directly.
 - A visual graph makes model, prompt, tool, and retrieval relationships easier to inspect than code alone.
 - [Node-level execution data](https://docs.langflow.org/concepts-flows) can help teams inspect inputs, outputs, and timing.
-- [Self-hosting](https://docs.langflow.org/deployment-deploy-langflow) gives operators control over infrastructure and data location.
+- [Self-hosting](https://docs.langflow.org/deployment-caddyfile) gives operators control over infrastructure and data location.
 
 ### Cons
 
@@ -265,7 +265,7 @@ Compared with Dify, Langflow gives Python teams more direct component-level cust
 | 2 | [n8n](https://n8n.io) | [Sustainable Use License Version 1.0; source-available fair-code, not OSI-approved](https://github.com/n8n-io/n8n/blob/master/LICENSE.md) | [n8n cloud and self-hosting under license terms](https://docs.n8n.io/hosting/) | Broad API, database, and business-tool automation | Visual node workflows with code and AI-agent steps | [Starter €20/month, Pro €50/month, Business €667/month billed annually; Enterprise custom](https://n8n.io/pricing/) |
 | 3 | [LangChain and LangGraph](https://github.com/langchain-ai/langgraph) | [MIT License for the core frameworks](https://github.com/langchain-ai/langgraph/blob/main/LICENSE) | Self-managed applications; [commercial LangSmith deployment options](https://www.langchain.com/pricing) | Code-level control of agent state and execution | [Python or TypeScript graphs with explicit state, nodes, edges, and interrupts](https://langchain-ai.github.io/langgraph/concepts/low_level/) | [Core frameworks free under MIT; LangSmith Developer $0, Plus $39/seat/month](https://www.langchain.com/pricing) |
 | 4 | [RAGFlow](https://ragflow.io) | [Apache License 2.0](https://github.com/infiniflow/ragflow/blob/main/LICENSE) | [Vendor cloud; Docker Compose self-hosting; Enterprise options](https://ragflow.io/) | Document parsing, retrieval, reranking, and grounded citations | RAG engine with agent and workflow capabilities | [Free $0; Starter $29/month; Pro $129/month; Enterprise custom](https://ragflow.io/) |
-| 5 | [Langflow](https://www.langflow.org) | [MIT License](https://github.com/langflow-ai/langflow/blob/main/LICENSE) | [Self-hosting](https://docs.langflow.org/deployment-deploy-langflow); vendor-associated managed options | Visual Python LLM and RAG pipelines | Component graph with editable Python code | [Open-source self-hosting has no software license fee](https://github.com/langflow-ai/langflow); managed pricing requires vendor confirmation |
+| 5 | [Langflow](https://www.langflow.org) | [MIT License](https://github.com/langflow-ai/langflow/blob/main/LICENSE) | [Self-hosting](https://docs.langflow.org/deployment-caddyfile); vendor-associated managed options | Visual Python LLM and RAG pipelines | Component graph with editable Python code | [Open-source self-hosting has no software license fee](https://github.com/langflow-ai/langflow); managed pricing requires vendor confirmation |
 
 ## Which Dify alternative fits your team?
 
diff --git a/apps/sim/content/library/sim-vs-dify-open-source-ai-workspace-vs-llm-app-rag-platform/index.mdx b/apps/sim/content/library/sim-vs-dify-open-source-ai-workspace-vs-llm-app-rag-platform/index.mdx
index 1a3d2eb4e34..d55c844e5b0 100644
--- a/apps/sim/content/library/sim-vs-dify-open-source-ai-workspace-vs-llm-app-rag-platform/index.mdx
+++ b/apps/sim/content/library/sim-vs-dify-open-source-ai-workspace-vs-llm-app-rag-platform/index.mdx
@@ -43,7 +43,7 @@ The clearest split is license and scope. Dify ships under the [Dify Open Source
 
 ### Choose Dify when
 
-- Your application is RAG-first, where document retrieval defines the product. Dify's [Knowledge documentation](https://docs.dify.ai/en/guides/knowledge-base/knowledge-and-documents) explains its knowledge-base workflow.
+- Your application is RAG-first, where document retrieval defines the product. Dify's [Knowledge documentation](https://docs.dify.ai/en/cloud/use-dify/knowledge/create-knowledge/introduction) explains its knowledge-base workflow.
 - Your application is chat-first, where a conversational interface is the primary surface. Dify documents chat-oriented application types in its [application guide](https://docs.dify.ai/en/guides/application-creation/creating-an-application).
 
 ### Choose Sim when
@@ -78,7 +78,7 @@ Sim also supports real-time workspace collaboration, allowing teammates to work
 
 ## Context and action layers: knowledge bases vs a connected workspace
 
-Dify puts RAG at the center. Its [Knowledge feature](https://docs.dify.ai/en/guides/knowledge-base/knowledge-and-documents) indexes documents for retrieval and supplies retrieved context to applications. If document retrieval and conversation define your product, that focus can be an advantage.
+Dify puts RAG at the center. Its [Knowledge feature](https://docs.dify.ai/en/cloud/use-dify/knowledge/create-knowledge/introduction) indexes documents for retrieval and supplies retrieved context to applications. If document retrieval and conversation define your product, that focus can be an advantage.
 
 Sim supports retrieval and connects it to other workspace resources. The [workspace model](https://docs.sim.ai/introduction) links Knowledge Bases with native Tables and Files. Knowledge Bases can supply semantic retrieval, Tables can hold structured records and workflow state, and Files can be used as inputs or outputs. One workflow can retrieve policy text, update a case record in a Table, and save a generated report as a File.
 
@@ -101,7 +101,7 @@ Both platforms support model-provider connections. Dify documents supported prov
 | Category and buyer job | AI workspace for agents, workflows, and business automation | [Platform for LLM applications, workflows, RAG, and chat](https://docs.dify.ai/en/guides/application-creation/creating-an-application) |
 | Builder model | Mothership natural language, visual canvas, and API | [Visual workflow builder and application types](https://docs.dify.ai/en/guides/workflow) |
 | Agent depth | Agentic reasoning and deterministic control in one graph | [Agent and workflow nodes for LLM applications](https://docs.dify.ai/en/guides/workflow/node/agent) |
-| Context layer | Native Tables, Files, and Knowledge Bases | [Knowledge bases and retrieval workflows](https://docs.dify.ai/en/guides/knowledge-base/knowledge-and-documents) |
+| Context layer | Native Tables, Files, and Knowledge Bases | [Knowledge bases and retrieval workflows](https://docs.dify.ai/en/cloud/use-dify/knowledge/create-knowledge/introduction) |
 | Action layer | Integrations, API calls, custom JavaScript, and MCP tools | [Tools, plugins, APIs, and workflow nodes](https://docs.dify.ai/en/guides/tools) |
 | Collaboration | Shared real-time workspace workflows | Evaluate [Dify plan and team options](https://dify.ai/pricing) against your collaboration requirements |
 | Deployment surfaces | REST API, hosted chat, and MCP tool or server | [Published applications and APIs](https://docs.dify.ai/en/guides/application-publishing) |
@@ -127,7 +127,7 @@ Both vendors can change prices, credits, limits, and terms. Check the live [Dify
 
 ## Who each platform fits best
 
-Dify fits developers building RAG-first or chat-first LLM applications. Its [application builder](https://docs.dify.ai/en/guides/application-creation/creating-an-application) and [knowledge workflow](https://docs.dify.ai/en/guides/knowledge-base/knowledge-and-documents) provide a focused route to an LLM application without assembling retrieval and chat infrastructure from scratch.
+Dify fits developers building RAG-first or chat-first LLM applications. Its [application builder](https://docs.dify.ai/en/guides/application-creation/creating-an-application) and [knowledge workflow](https://docs.dify.ai/en/cloud/use-dify/knowledge/create-knowledge/introduction) provide a focused route to an LLM application without assembling retrieval and chat infrastructure from scratch.
 
 Sim fits builders who need agents that work across business tools and data. A developer or technical founder can combine model reasoning with conditions, code, integrations, Tables, Files, and Knowledge Bases, then deploy the result as an API, hosted chat experience, or MCP tool.
 
diff --git a/apps/sim/content/library/what-is-an-agentic-workflow/index.mdx b/apps/sim/content/library/what-is-an-agentic-workflow/index.mdx
index f969fe1f70a..cd8e6faa9ba 100644
--- a/apps/sim/content/library/what-is-an-agentic-workflow/index.mdx
+++ b/apps/sim/content/library/what-is-an-agentic-workflow/index.mdx
@@ -41,7 +41,7 @@ Runtime discretion still operates within boundaries. You define the workflow’s
 
 Traditional trigger-action automation executes a path that a human defines before the run begins. You choose an event that starts the workflow, then specify which actions follow under each condition. Every trigger and branch is authored in advance. At runtime, the software evaluates those rules, but it cannot choose a new type of action outside them. This distinction resembles the boundary between agents and rule-driven systems explored in [AI agents vs. RPA](https://www.sim.ai/library/ai-agents-vs-rpa).
 
-Zapier and Make grew around this architecture. [Zapier’s conventional workflow builder connects triggers and actions](https://help.zapier.com/hc/en-us/articles/8496183585293-Create-Zaps), while [Make scenarios arrange modules and routes in a visual editor](https://help.make.com/scenario-editor), so builders define the available paths and the conditions that select them. Both platforms now offer agent features through [Zapier Agents](https://zapier.com/agents) and [Make AI Agents](https://www.make.com/en/ai-agents). In a standard automation, however, an AI step usually performs a bounded task inside a predetermined path, such as classifying an email or drafting a reply. Human-authored logic still determines when the model runs and where its output goes.
+Zapier and Make grew around this architecture. [Zapier’s conventional workflow builder connects triggers and actions](https://help.zapier.com/hc/en-us/articles/22234847450893-Zap-workflows-quick-start-guide), while [Make scenarios arrange modules and routes in a visual editor](https://help.make.com/scenario-editor), so builders define the available paths and the conditions that select them. Both platforms now offer agent features through [Zapier Agents](https://zapier.com/agents) and [Make AI Agents](https://www.make.com/en/ai-agents). In a standard automation, however, an AI step usually performs a bounded task inside a predetermined path, such as classifying an email or drafting a reply. Human-authored logic still determines when the model runs and where its output goes.
 
 Trigger-action automation cannot create a path for input its author did not anticipate. A malformed payload may cause the run to fail. An unmatched condition may follow a fallback route or end the run, depending on the authored rules. The software does not inspect the situation and select an unplanned tool. Reasoning remains a capability within a step rather than the mechanism that directs execution.
 
diff --git a/apps/sim/lib/compare/data/competitors/dust.ts b/apps/sim/lib/compare/data/competitors/dust.ts
index 6bd33f4143a..2e6aebed4cb 100644
--- a/apps/sim/lib/compare/data/competitors/dust.ts
+++ b/apps/sim/lib/compare/data/competitors/dust.ts
@@ -52,7 +52,7 @@ export const dustProfile: CompetitorProfile = {
         "Dust's Agent Builder is entirely form and text based, name, description, instructions, model, tools, knowledge, guided by a conversational 'Sidekick' assistant, with no visual canvas at all (its earlier block-based 'Dust Apps' product is deprecated). Agents deploy natively into a shared, multiplayer workspace and out to Slack, Teams, and other chat surfaces. A team that wants agents assembled purely from plain-language instructions and templates, with no drag-and-drop layer to learn or maintain, gets that directly. Teams that do want infrastructure-as-code can also define Skills and agent configurations as files in a Git repository and sync them via an official GitHub Action, with the same PR review and rollback workflow as application code.",
       shortDescription: 'No visual/flow canvas at all, only forms, text, and conversation.',
       source: {
-        url: 'https://docs.dust.tt/changelog/gitops-sync-for-skills-agent-configurations-with-github-action',
+        url: 'https://docs.dust.tt/docs/changelog#gitops-sync-for-skills-&-agent-configurations-with-github-action',
         label: 'GitOps sync for Skills & Agent configurations | Dust changelog',
         asOf: '2026-07-02',
       },
@@ -215,7 +215,7 @@ export const dustProfile: CompetitorProfile = {
         confidence: 'estimated',
         sources: [
           {
-            url: 'https://docs.dust.tt/changelog/eu-data-hosting-option-available',
+            url: 'https://docs.dust.tt/docs/changelog#-eu-data-hosting-option-available',
             label: 'EU data hosting option available | Dust changelog',
             asOf: '2026-07-08',
           },
@@ -260,7 +260,7 @@ export const dustProfile: CompetitorProfile = {
         confidence: 'estimated',
         sources: [
           {
-            url: 'https://docs.dust.tt/changelog/gitops-sync-for-skills-agent-configurations-with-github-action',
+            url: 'https://docs.dust.tt/docs/changelog#gitops-sync-for-skills-&-agent-configurations-with-github-action',
             label: 'GitOps sync for Skills & Agent configurations | Dust changelog',
             asOf: '2026-07-02',
           },
@@ -275,7 +275,7 @@ export const dustProfile: CompetitorProfile = {
         confidence: 'estimated',
         sources: [
           {
-            url: 'https://docs.dust.tt/changelog/prompt-version-history',
+            url: 'https://docs.dust.tt/docs/changelog#-prompt-version-history',
             label: 'Prompt version history | Dust changelog',
             asOf: '2026-07-02',
           },
@@ -837,7 +837,7 @@ export const dustProfile: CompetitorProfile = {
         confidence: 'verified',
         sources: [
           {
-            url: 'https://docs.dust.tt/changelog/eu-data-hosting-option-available',
+            url: 'https://docs.dust.tt/docs/changelog#-eu-data-hosting-option-available',
             label: 'EU data hosting option available | Dust changelog',
             asOf: '2026-07-02',
           },
diff --git a/apps/sim/lib/compare/data/competitors/tines.ts b/apps/sim/lib/compare/data/competitors/tines.ts
index 1440063c07c..348a1813fd8 100644
--- a/apps/sim/lib/compare/data/competitors/tines.ts
+++ b/apps/sim/lib/compare/data/competitors/tines.ts
@@ -245,7 +245,7 @@ export const tinesProfile: CompetitorProfile = {
         confidence: 'estimated',
         sources: [
           {
-            url: 'https://www.tines.com/docs/records-cases/cases/',
+            url: 'https://www.tines.com/stories/docs/cases/',
             label: 'Cases | Docs | Tines',
             asOf: '2026-07-02',
           },
@@ -280,7 +280,7 @@ export const tinesProfile: CompetitorProfile = {
         confidence: 'estimated',
         sources: [
           {
-            url: 'https://www.tines.com/docs/records-cases/records/',
+            url: 'https://www.tines.com/stories/docs/records/',
             label: 'Records | Docs | Tines',
             asOf: '2026-07-02',
           },
diff --git a/apps/sim/lib/compare/data/sim.ts b/apps/sim/lib/compare/data/sim.ts
index ec777532b99..044f0887581 100644
--- a/apps/sim/lib/compare/data/sim.ts
+++ b/apps/sim/lib/compare/data/sim.ts
@@ -888,7 +888,7 @@ export const simProfile: CompetitorProfile = {
             asOf: '2026-07-02',
           },
           {
-            url: 'https://github.com/simstudioai/sim/blob/main/apps/sim/lib/permission-groups/types.ts',
+            url: 'https://github.com/simstudioai/sim/blob/main/apps/sim/lib/permission-groups/fields.ts',
             label: 'Sim codebase: permission groups',
             asOf: '2026-07-04',
           },
@@ -935,7 +935,7 @@ export const simProfile: CompetitorProfile = {
         confidence: 'verified',
         sources: [
           {
-            url: 'https://github.com/simstudioai/sim/blob/main/apps/sim/lib/permission-groups/types.ts',
+            url: 'https://github.com/simstudioai/sim/blob/main/apps/sim/lib/permission-groups/fields.ts',
             label:
               'Sim codebase: PermissionGroupConfig (allowedModelProviders, deniedModels, deniedTools)',
             asOf: '2026-07-02',
@@ -961,7 +961,7 @@ export const simProfile: CompetitorProfile = {
             asOf: '2026-07-02',
           },
           {
-            url: 'https://github.com/simstudioai/sim/blob/main/apps/sim/lib/permission-groups/types.ts',
+            url: 'https://github.com/simstudioai/sim/blob/main/apps/sim/lib/permission-groups/fields.ts',
             label: 'Sim codebase: PermissionGroupConfig (allowedIntegrations)',
             asOf: '2026-07-02',
           },
diff --git a/apps/sim/lib/customers/data.ts b/apps/sim/lib/customers/data.ts
new file mode 100644
index 00000000000..f3910867445
--- /dev/null
+++ b/apps/sim/lib/customers/data.ts
@@ -0,0 +1,46 @@
+export interface CustomerStory {
+  slug: string
+  company: string
+  industry: string
+  focus: readonly string[]
+  heroImage?: string
+  heroAlt: string
+  logo: { src: string; alt: string; width: number; height: number }
+}
+
+/** Customer identity and artwork shared by the story index and detail pages. */
+export const CUSTOMER_STORIES: readonly CustomerStory[] = [
+  {
+    slug: 'rivian',
+    company: 'Rivian',
+    industry: 'Automotive',
+    focus: ['Connected systems', 'Enterprise AI agents', 'Governance'],
+    heroImage: '/landing/customers/rivian-trail.jpg',
+    heroAlt: 'A Rivian on a winding trail through a mountain landscape',
+    logo: {
+      src: '/landing/logos/rivian-vw.svg',
+      alt: 'Rivian | Volkswagen Group Technologies',
+      width: 300,
+      height: 28,
+    },
+  },
+  {
+    slug: 'exp-realty',
+    company: 'eXp Realty',
+    industry: 'Real estate',
+    focus: ['Real estate operations', 'AI workflows', 'Governance'],
+    heroAlt: 'eXp Realty',
+    logo: {
+      src: '/landing/logos/exp-realty.svg',
+      alt: 'eXp Realty',
+      width: 150,
+      height: 82,
+    },
+  },
+]
+
+export const CUSTOMER_SECTION = {
+  name: 'Customer stories',
+  basePath: '/customers',
+  description: 'How teams connect their systems, build AI agents, and govern their work with Sim.',
+} as const
diff --git a/apps/sim/lib/customers/registry.ts b/apps/sim/lib/customers/registry.ts
new file mode 100644
index 00000000000..86c5cddcbc0
--- /dev/null
+++ b/apps/sim/lib/customers/registry.ts
@@ -0,0 +1,16 @@
+import path from 'path'
+import { createContentRegistry } from '@/lib/content/registry-factory'
+
+const CUSTOMERS_DIR = path.join(process.cwd(), 'content', 'customers')
+const AUTHORS_DIR = path.join(process.cwd(), 'content', 'authors')
+
+const customersRegistry = createContentRegistry({
+  contentDir: CUSTOMERS_DIR,
+  authorsDir: AUTHORS_DIR,
+})
+
+/** Published stories only, suitable for public collections and sitemap entries. */
+export const getAllCustomerStoryMeta = customersRegistry.getAllPostMeta
+
+/** Includes draft stories so the design preview can render with noindex metadata. */
+export const getCustomerStoryBySlug = customersRegistry.getPostBySlug
diff --git a/apps/sim/lib/landing/routes.ts b/apps/sim/lib/landing/routes.ts
index 9d41e322e34..82b0019f0b6 100644
--- a/apps/sim/lib/landing/routes.ts
+++ b/apps/sim/lib/landing/routes.ts
@@ -10,10 +10,11 @@
  *   header inherited across client-side navigations, so an unlisted landing page
  *   stays cross-origin isolated when it soft-navigates into `/demo`, where the
  *   Cal.com booker then loads uncredentialed and hangs forever.
- * - `ThemeProvider` forces the light theme on these paths, matching the `light`
- *   token layer `LandingShell` renders. Leave one out and `<html>` keeps the
- *   visitor's dark theme under a light page: root-level chrome (scrollbars,
- *   `color-scheme`, anything portalled to `<body>`) renders dark against it.
+ * - `ThemeProvider` gives these paths their own theme store, defaulting to
+ *   light (the landing family's design baseline) and written only by the
+ *   landing footer's toggle, instead of the app's account-synced `system`
+ *   default. Leave one out and a visitor on a dark OS lands on a dark
+ *   marketing page.
  *
  * Imported by `next.config.ts` before the `@/` alias resolves, so this module
  * must stay dependency-free.
@@ -27,6 +28,7 @@ export const LANDING_ROUTES = [
   'comparisons',
   'contact',
   'cookie-policy',
+  'customers',
   'demo',
   'enterprise',
   'files',
@@ -35,6 +37,7 @@ export const LANDING_ROUTES = [
   'library',
   'logs',
   'models',
+  'platform',
   'pricing',
   'privacy',
   'solutions',
diff --git a/apps/sim/public/landing/cta-san-francisco-painted-dark.webp b/apps/sim/public/landing/cta-san-francisco-painted-dark.webp
new file mode 100644
index 00000000000..63335c13a27
Binary files /dev/null and b/apps/sim/public/landing/cta-san-francisco-painted-dark.webp differ
diff --git a/apps/sim/public/landing/cta-san-francisco-painted-light.webp b/apps/sim/public/landing/cta-san-francisco-painted-light.webp
new file mode 100644
index 00000000000..d6cfaab6d8d
Binary files /dev/null and b/apps/sim/public/landing/cta-san-francisco-painted-light.webp differ
diff --git a/apps/sim/public/landing/customer-stories/rivian-r2-loop.mp4 b/apps/sim/public/landing/customer-stories/rivian-r2-loop.mp4
new file mode 100644
index 00000000000..a422eb51951
Binary files /dev/null and b/apps/sim/public/landing/customer-stories/rivian-r2-loop.mp4 differ
diff --git a/apps/sim/public/landing/customer-stories/rivian-r2-poster.jpg b/apps/sim/public/landing/customer-stories/rivian-r2-poster.jpg
new file mode 100644
index 00000000000..02bda3567cf
Binary files /dev/null and b/apps/sim/public/landing/customer-stories/rivian-r2-poster.jpg differ
diff --git a/apps/sim/public/landing/customers/rivian-trail.jpg b/apps/sim/public/landing/customers/rivian-trail.jpg
new file mode 100644
index 00000000000..e32ebcaf0fb
Binary files /dev/null and b/apps/sim/public/landing/customers/rivian-trail.jpg differ
diff --git a/apps/sim/public/landing/feature-context-backdrop.jpg b/apps/sim/public/landing/feature-context-backdrop.jpg
deleted file mode 100644
index f15631bdb9a..00000000000
Binary files a/apps/sim/public/landing/feature-context-backdrop.jpg and /dev/null differ
diff --git a/apps/sim/public/landing/feature-context-ui.png b/apps/sim/public/landing/feature-context-ui.png
deleted file mode 100644
index 01d36b4c802..00000000000
Binary files a/apps/sim/public/landing/feature-context-ui.png and /dev/null differ
diff --git a/apps/sim/public/landing/feature-integrate-backdrop.jpg b/apps/sim/public/landing/feature-integrate-backdrop.jpg
deleted file mode 100644
index ffb5ddaa113..00000000000
Binary files a/apps/sim/public/landing/feature-integrate-backdrop.jpg and /dev/null differ
diff --git a/apps/sim/public/landing/feature-integrate-ui.png b/apps/sim/public/landing/feature-integrate-ui.png
deleted file mode 100644
index b3511b8903e..00000000000
Binary files a/apps/sim/public/landing/feature-integrate-ui.png and /dev/null differ
diff --git a/apps/sim/public/landing/feature-monitor-backdrop.jpg b/apps/sim/public/landing/feature-monitor-backdrop.jpg
deleted file mode 100644
index f1dde60cb81..00000000000
Binary files a/apps/sim/public/landing/feature-monitor-backdrop.jpg and /dev/null differ
diff --git a/apps/sim/public/landing/feature-monitor-ui.png b/apps/sim/public/landing/feature-monitor-ui.png
deleted file mode 100644
index cf90758c316..00000000000
Binary files a/apps/sim/public/landing/feature-monitor-ui.png and /dev/null differ
diff --git a/apps/sim/public/landing/hero-backdrop.jpg b/apps/sim/public/landing/hero-backdrop.jpg
deleted file mode 100644
index 94898fb6086..00000000000
Binary files a/apps/sim/public/landing/hero-backdrop.jpg and /dev/null differ
diff --git a/apps/sim/public/landing/hero-painted-4k.webp b/apps/sim/public/landing/hero-painted-4k.webp
new file mode 100644
index 00000000000..eb8c50a565c
Binary files /dev/null and b/apps/sim/public/landing/hero-painted-4k.webp differ
diff --git a/apps/sim/stores/index.test.ts b/apps/sim/stores/index.test.ts
index 5edcc87f96a..475b19a8edc 100644
--- a/apps/sim/stores/index.test.ts
+++ b/apps/sim/stores/index.test.ts
@@ -63,6 +63,7 @@ describe('clearUserData', () => {
   it('clears identity data while preserving device preferences', async () => {
     localStorage.setItem('next-favicon', 'favicon')
     localStorage.setItem('sim-theme', 'dark')
+    localStorage.setItem('sim-landing-theme', 'dark')
     localStorage.setItem(RECENT_IMPERSONATIONS_STORAGE_KEY, '["user-a"]')
     localStorage.setItem('private-cache', 'remove-me')
     sessionStorage.setItem('mothership-queue', 'private-queued-message')
@@ -73,6 +74,7 @@ describe('clearUserData', () => {
     expect(inMemoryResetSucceeded).toBe(true)
     expect(localStorage.getItem('next-favicon')).toBe('favicon')
     expect(localStorage.getItem('sim-theme')).toBe('dark')
+    expect(localStorage.getItem('sim-landing-theme')).toBe('dark')
     expect(localStorage.getItem(RECENT_IMPERSONATIONS_STORAGE_KEY)).toBeNull()
     expect(localStorage.getItem('private-cache')).toBeNull()
     expect(sessionStorage.getItem('mothership-queue')).toBeNull()
diff --git a/apps/sim/stores/index.ts b/apps/sim/stores/index.ts
index 46237daf774..ffecaba5aec 100644
--- a/apps/sim/stores/index.ts
+++ b/apps/sim/stores/index.ts
@@ -25,6 +25,7 @@ export async function clearUserData(options: ClearUserDataOptions = {}): Promise
     const keysToKeep = [
       'next-favicon',
       'sim-theme',
+      'sim-landing-theme',
       ...(options.preserveRecentImpersonations ? [RECENT_IMPERSONATIONS_STORAGE_KEY] : []),
     ]
     const keysToRemove = Object.keys(localStorage).filter((key) => !keysToKeep.includes(key))
diff --git a/packages/emcn/src/components/chip-tag/chip-tag.tsx b/packages/emcn/src/components/chip-tag/chip-tag.tsx
index 365cf1a4121..67bfdd19382 100644
--- a/packages/emcn/src/components/chip-tag/chip-tag.tsx
+++ b/packages/emcn/src/components/chip-tag/chip-tag.tsx
@@ -54,6 +54,8 @@ import { cn } from '../../lib/cn'
  * - `brand` — a provider-owned integration colour supplied through
  *   `brandColor`. Pair with `brandForeground` so both the icon and label use
  *   the same contrast rule as integration tiles elsewhere in the product.
+ *   `brandStrokeColor` adds an optional inset outline without changing the
+ *   tag's canonical dimensions.
  * - `invite` — recipient pill used in invite/sharing flows. Borrows the chip
  *   family's icon gap (`gap-1.5`), `--text-body` label, and `--text-icon`
  *   leading/trailing icons; pairs with the `invalid` boolean to flip to an
@@ -140,6 +142,8 @@ export interface ChipTagProps
   children: ReactNode
   /** Dynamic provider fill used by the `brand` variant. */
   brandColor?: CSSProperties['background']
+  /** Optional inset outline used by the `brand` variant. */
+  brandStrokeColor?: CSSProperties['color']
   /** Icon component rendered before the label. Non-interactive. */
   leftIcon?: ChipTagIcon
   /**
@@ -178,6 +182,7 @@ export function ChipTag({
   tone,
   brandForeground,
   brandColor,
+  brandStrokeColor,
   className,
   children,
   style,
@@ -196,7 +201,14 @@ export function ChipTag({
     !invalid && variant !== 'workflow' && variant !== 'brand' && 'text-[var(--text-icon)]'
   )
   const interactive = RightIcon != null && onRightIconClick != null
-  const resolvedStyle = variant === 'brand' ? { ...style, background: brandColor } : style
+  const resolvedStyle =
+    variant === 'brand'
+      ? {
+          ...style,
+          background: brandColor,
+          ...(brandStrokeColor ? { boxShadow: `inset 0 0 0 1px ${brandStrokeColor}` } : {}),
+        }
+      : style
 
   return (
     <span
diff --git a/packages/emcn/src/components/chip/chip.tsx b/packages/emcn/src/components/chip/chip.tsx
index 07ce3077459..939e6345594 100644
--- a/packages/emcn/src/components/chip/chip.tsx
+++ b/packages/emcn/src/components/chip/chip.tsx
@@ -38,7 +38,7 @@ import {
  * itself**; those triggers add the `--border-1` outline themselves via `TRIGGER_BORDER_CLASS`;
  * `primary` (inverse surface), `destructive` (error-token surface), `border-shadow` (raised card-like surface),
  * `border` (the `border-shadow` shadow ring on a transparent surface — an outline drawn purely via box-shadow,
- * no CSS border, no fill).
+ * no CSS border, no fill); outline (a true border with no shadow or hover fill).
  * `active` renders the default/filled chip in its selected state — `--surface-active`, held through hover.
  * `fullWidth` swaps `inline-flex` for block-level `flex`.
  * `shape` picks the corner radius: the implicit `default` is the `rounded-lg` pill; `round` is fully round
@@ -71,6 +71,8 @@ const chipVariants = cva(
         'border-shadow':
           'bg-[var(--surface-2)] shadow-[0_0_0_1px_rgba(28,40,64,0.08),0_1px_3px_0_rgba(28,40,64,0.1)] hover-hover:bg-[var(--surface-3)] dark:shadow-[0_0_0_1px_var(--border-1),0_1px_3px_0_rgba(0,0,0,0.3)] dark:hover-hover:bg-[var(--surface-4)]',
         border: `shadow-[0_0_0_1px_rgba(28,40,64,0.08),0_1px_3px_0_rgba(28,40,64,0.1)] ${chipHoverSurfaceClass} dark:shadow-[0_0_0_1px_var(--border-1),0_1px_3px_0_rgba(0,0,0,0.3)]`,
+        outline:
+          'border border-[var(--border)] bg-transparent hover-hover:border-[color-mix(in_srgb,var(--border)_80%,var(--text-secondary))]',
       },
       shape: { default: chipRadiusClass, round: 'rounded-full' },
       active: { true: '', false: '' },
@@ -92,7 +94,7 @@ type ChipIcon = ComponentType<{ className?: string }>
  * for chip fields/triggers, never `Chip` itself. For a selected/toggle chip use
  * the `active` prop, not a variant.
  */
-type ChipVariant = 'primary' | 'destructive' | 'border-shadow' | 'border'
+type ChipVariant = 'primary' | 'destructive' | 'border-shadow' | 'border' | 'outline'
 
 interface ChipBaseProps extends Omit<VariantProps<typeof chipVariants>, 'variant'> {
   variant?: ChipVariant
diff --git a/packages/emcn/src/components/tab-strip/tab-strip.tsx b/packages/emcn/src/components/tab-strip/tab-strip.tsx
index 056f4125262..44b02ff7a79 100644
--- a/packages/emcn/src/components/tab-strip/tab-strip.tsx
+++ b/packages/emcn/src/components/tab-strip/tab-strip.tsx
@@ -387,7 +387,7 @@ const Tab = forwardRef<HTMLDivElement, TabProps>(function Tab(
     <motion.div
       ref={ref}
       initial={reduceMotion ? false : { opacity: 0, scale: 0.98 }}
-      animate={reduceMotion ? undefined : { opacity: 1, scale: 1 }}
+      animate={{ opacity: 1, scale: 1 }}
       exit={reduceMotion ? undefined : { opacity: 0, scale: 0.98 }}
       transition={TAB_TRANSITION}
       className={cn(
diff --git a/packages/workflow-renderer/src/workflow-block/workflow-block-view-interaction.test.tsx b/packages/workflow-renderer/src/workflow-block/workflow-block-view-interaction.test.tsx
index 9e49f2191f6..442d04e0c02 100644
--- a/packages/workflow-renderer/src/workflow-block/workflow-block-view-interaction.test.tsx
+++ b/packages/workflow-renderer/src/workflow-block/workflow-block-view-interaction.test.tsx
@@ -25,7 +25,8 @@ function createView(
   isRunning: boolean,
   isEnabled = true,
   isLocked = false,
-  isExecutionHighlighted = false
+  isExecutionHighlighted = false,
+  cursorConnectionsEnabled = true
 ) {
   return (
     <ReactFlowProvider>
@@ -48,6 +49,7 @@ function createView(
         conditionRows={[]}
         routerRows={[]}
         wouldCreateConnectionCycle={() => false}
+        cursorConnectionsEnabled={cursorConnectionsEnabled}
         onSelect={() => {}}
         actionBar={<div data-workflow-action-bar-swell='' />}
         rows={null}
@@ -101,6 +103,50 @@ afterEach(() => {
 })
 
 describe('WorkflowBlockView action menu', () => {
+  it('keeps the preview edge swell without mounting a transient connector handle', () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const root = createRoot(host)
+    mountedRoots.add(root)
+    mountedHosts.add(host)
+
+    act(() => root.render(createView(false, true, false, false, false)))
+
+    const card = host.querySelector<HTMLElement>('.workflow-drag-handle')
+    expect(card).toBeTruthy()
+    if (!card) return
+
+    const cardRect = {
+      left: 100,
+      top: 100,
+      right: 350,
+      bottom: 196,
+      width: 250,
+      height: 96,
+      x: 100,
+      y: 100,
+      toJSON: () => ({}),
+    } as DOMRect
+    card.getBoundingClientRect = () => cardRect
+    document.elementFromPoint = () => card
+
+    const silhouette = card.querySelector<SVGPathElement>('svg > path[fill="var(--border-1)"]')
+    const restingPath = silhouette?.getAttribute('d')
+
+    act(() => {
+      card.dispatchEvent(
+        new MouseEvent('pointerenter', { bubbles: true, clientX: 350, clientY: 148 })
+      )
+      window.dispatchEvent(
+        new MouseEvent('pointermove', { bubbles: true, clientX: 350, clientY: 148 })
+      )
+    })
+    flushAnimationFrames()
+
+    expect(silhouette?.getAttribute('d')).not.toBe(restingPath)
+    expect(card.querySelector('[data-handleid^="source-cursor"]')).toBeNull()
+  })
+
   it('keeps an executing block visually unselected while its actions stay available', () => {
     const host = document.createElement('div')
     document.body.appendChild(host)
diff --git a/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx b/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx
index e49322fbdfa..4d67485e139 100644
--- a/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx
+++ b/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx
@@ -421,6 +421,8 @@ export interface WorkflowBlockViewProps {
   routerContextValue?: string
   /** Connection-cycle guard; reads fresh edge state on every call. */
   wouldCreateConnectionCycle: (source: string, target: string) => boolean
+  /** Whether edge hover mounts an interactive React Flow source handle. */
+  cursorConnectionsEnabled?: boolean
 
   /** Sunset badge — editor-only. `legacy` shows an amber "legacy" badge, `deprecated`
    * a red "deprecated" badge; clicking (gated on `canFixSunset`) invokes `onFixSunset`. */
@@ -529,6 +531,7 @@ export function WorkflowBlockView({
   routerRows,
   routerContextValue,
   wouldCreateConnectionCycle,
+  cursorConnectionsEnabled = true,
   sunsetStatus,
   sunsetTooltip,
   canFixSunset,
@@ -569,7 +572,8 @@ export function WorkflowBlockView({
     () => reactFlowStore.getState().connection.fromNode?.id ?? null,
     [reactFlowStore]
   )
-  const supportsCursorHandle = type !== 'response'
+  const supportsCursorSwell = type !== 'response'
+  const supportsCursorHandle = supportsCursorSwell && cursorConnectionsEnabled
   const cursorSourceHandleRef = useRef<HTMLDivElement>(null)
   const cursorSourceHandleKeyRef = useRef<string | null>(null)
   const [cursorSourceHandle, setCursorSourceHandle] = useState<WorkflowCursorSourceHandle | null>(
@@ -872,7 +876,7 @@ export function WorkflowBlockView({
           }
           isSelected={usesSelectedVisuals}
           height={blockHeight}
-          canStartConnection={supportsCursorHandle}
+          canStartConnection={supportsCursorSwell}
           canReceiveConnection={shouldShowDefaultHandles}
           onCursorHandleChange={supportsCursorHandle ? onCursorHandleChange : undefined}
           onActionMenuReadyChange={setActionMenuSwellReady}