From 207882102ef0b29f11b35f397088967952b49d1d Mon Sep 17 00:00:00 2001
From: andresdjasso <andresdjasso@users.noreply.github.com>
Date: Thu, 10 Sep 2026 15:01:32 -0700
Subject: [PATCH 1/2] feat(landing): add interactive Sim stack and refine
 public pages

---
 apps/docs/components/icons.tsx                |  34 +-
 apps/sim/app/(landing)/careers/careers.tsx    |   8 +-
 .../components/job-board/job-groups.tsx       |   6 +-
 .../(landing)/comparisons/[provider]/page.tsx |  16 +-
 apps/sim/app/(landing)/comparisons/page.tsx   |  16 +-
 .../content-author-loading.tsx                |   2 +-
 .../content-author-page.tsx                   |   6 +-
 .../content-index-loading.tsx                 |   2 +-
 .../content-index-page/content-index-page.tsx |   7 +-
 .../content-post-loading.tsx                  |   8 +-
 .../content-post-page/content-post-page.tsx   |  14 +-
 .../content-tags-page/content-tags-page.tsx   |  19 +-
 .../(landing)/components/landing-layout.ts    |   6 +
 .../navbar-auth-pill/navbar-auth-pill.tsx     |   7 +-
 .../navbar-shell/navbar-shell.test.tsx        |  44 +-
 .../components/navbar-shell/navbar-shell.tsx  |  38 +-
 .../(landing)/components/navbar/navbar.tsx    |   3 +-
 .../iso-marks/iso-integrate-illustration.tsx  |  31 +-
 .../components/iso-marks/iso-mark-paths.ts    |  21 +
 .../iso-marks/iso-monitor-illustration.tsx    |  46 +-
 .../platform-suite/platform-suite.tsx         |   1 +
 .../components/prose-page/constants.ts        |  16 +-
 .../workspace-controls/workspace-controls.tsx |  38 +-
 .../components/shared/edge-fade/edge-fade.tsx |   2 +
 .../components/sim-stack/sim-stack.tsx        |  66 +++
 .../components/sim-stack/stack-artwork.tsx    |  93 ++++
 .../components/sim-stack/stack-content.ts     |  51 +++
 .../sim-stack/stack-description.tsx           | 103 +++++
 .../components/sim-stack/stack-engraving.ts   | 178 ++++++++
 .../components/sim-stack/stack-fallback.tsx   | 254 +++++++++++
 .../sim-stack/stack-hit-testing.test.ts       |  59 +++
 .../components/sim-stack/stack-hit-testing.ts |  47 ++
 .../components/sim-stack/stack-intro.tsx      |  91 ++++
 .../components/sim-stack/stack-layout.ts      |  23 +
 .../components/sim-stack/stack-motifs.ts      | 102 +++++
 .../components/sim-stack/stack-player.tsx     |  74 +++
 .../components/sim-stack/stack-scene.ts       | 429 ++++++++++++++++++
 .../components/sim-stack/stack-slab.ts        | 199 ++++++++
 .../sim-stack/stack-timeline.test.ts          |  92 ++++
 .../components/sim-stack/stack-timeline.ts    |  51 +++
 .../sim-stack/use-stack-scroll.test.tsx       | 238 ++++++++++
 .../components/sim-stack/use-stack-scroll.ts  | 202 +++++++++
 apps/sim/app/(landing)/contact/contact.tsx    |  11 +-
 apps/sim/app/(landing)/demo/demo.tsx          |  15 +-
 .../integrations/(shell)/[slug]/page.tsx      |   7 +-
 .../(landing)/integrations/(shell)/page.tsx   |  16 +-
 apps/sim/app/(landing)/landing.test.tsx       |   8 +-
 apps/sim/app/(landing)/landing.tsx            |  15 +-
 .../(shell)/[provider]/[model]/page.tsx       |  16 +-
 .../models/(shell)/[provider]/page.tsx        |  16 +-
 .../sim/app/(landing)/models/(shell)/page.tsx |   6 +-
 apps/sim/app/(landing)/pricing/pricing.tsx    |   6 +-
 apps/sim/components/icons.tsx                 |  34 +-
 apps/sim/package.json                         |   8 +-
 bun.lock                                      |  22 +-
 packages/emcn/src/icons/index.ts              |   6 +
 packages/emcn/src/icons/model-marks.ts        |  16 +
 57 files changed, 2726 insertions(+), 219 deletions(-)
 create mode 100644 apps/sim/app/(landing)/components/platform-suite/components/iso-marks/iso-mark-paths.ts
 create mode 100644 apps/sim/app/(landing)/components/sim-stack/sim-stack.tsx
 create mode 100644 apps/sim/app/(landing)/components/sim-stack/stack-artwork.tsx
 create mode 100644 apps/sim/app/(landing)/components/sim-stack/stack-content.ts
 create mode 100644 apps/sim/app/(landing)/components/sim-stack/stack-description.tsx
 create mode 100644 apps/sim/app/(landing)/components/sim-stack/stack-engraving.ts
 create mode 100644 apps/sim/app/(landing)/components/sim-stack/stack-fallback.tsx
 create mode 100644 apps/sim/app/(landing)/components/sim-stack/stack-hit-testing.test.ts
 create mode 100644 apps/sim/app/(landing)/components/sim-stack/stack-hit-testing.ts
 create mode 100644 apps/sim/app/(landing)/components/sim-stack/stack-intro.tsx
 create mode 100644 apps/sim/app/(landing)/components/sim-stack/stack-layout.ts
 create mode 100644 apps/sim/app/(landing)/components/sim-stack/stack-motifs.ts
 create mode 100644 apps/sim/app/(landing)/components/sim-stack/stack-player.tsx
 create mode 100644 apps/sim/app/(landing)/components/sim-stack/stack-scene.ts
 create mode 100644 apps/sim/app/(landing)/components/sim-stack/stack-slab.ts
 create mode 100644 apps/sim/app/(landing)/components/sim-stack/stack-timeline.test.ts
 create mode 100644 apps/sim/app/(landing)/components/sim-stack/stack-timeline.ts
 create mode 100644 apps/sim/app/(landing)/components/sim-stack/use-stack-scroll.test.tsx
 create mode 100644 apps/sim/app/(landing)/components/sim-stack/use-stack-scroll.ts
 create mode 100644 packages/emcn/src/icons/model-marks.ts

diff --git a/apps/docs/components/icons.tsx b/apps/docs/components/icons.tsx
index 867a81af5c2..4811f88bd95 100644
--- a/apps/docs/components/icons.tsx
+++ b/apps/docs/components/icons.tsx
@@ -1,5 +1,6 @@
 import type { SVGProps } from 'react'
 import { useId } from 'react'
+import { CLAUDE_MARK_PATH, GEMINI_MARK_PATH, OPENAI_MARK_PATH, XAI_MARK_POLYGONS } from '@sim/emcn'
 
 export function EnrichmentIcon(props: SVGProps<SVGSVGElement>) {
   return (
@@ -1307,22 +1308,10 @@ export function xAIIcon(props: SVGProps<SVGSVGElement>) {
       {...props}
     >
       <g>
-        <polygon
-          points='557.09,211.99 565.4,538.36 631.96,538.36 640.28,93.18'
-          fill='currentColor'
-        />
-        <polygon
-          points='640.28,56.91 538.72,56.91 379.35,284.53 430.13,357.05'
-          fill='currentColor'
-        />
-        <polygon
-          points='201.61,538.36 303.17,538.36 353.96,465.84 303.17,393.31'
-          fill='currentColor'
-        />
-        <polygon
-          points='201.61,211.99 430.13,538.36 531.69,538.36 303.17,211.99'
-          fill='currentColor'
-        />
+        <polygon points={XAI_MARK_POLYGONS[0]} fill='currentColor' />
+        <polygon points={XAI_MARK_POLYGONS[1]} fill='currentColor' />
+        <polygon points={XAI_MARK_POLYGONS[2]} fill='currentColor' />
+        <polygon points={XAI_MARK_POLYGONS[3]} fill='currentColor' />
       </g>
     </svg>
   )
@@ -1772,10 +1761,7 @@ export function OpenAIIcon(props: SVGProps<SVGSVGElement>) {
       role='img'
       xmlns='http://www.w3.org/2000/svg'
     >
-      <path
-        d='M22.28 9.82a5.98 5.98 0 0 0-.516-4.91 6.05 6.05 0 0 0-6.51-2.9A6.07 6.07 0 0 0 4.98 4.18a5.98 5.98 0 0 0-4 2.9 6.05 6.05 0 0 0 .743 7.1 5.98 5.98 0 0 0 .511 4.91 6.05 6.05 0 0 0 6.51 2.9A5.98 5.98 0 0 0 13.26 24a6.06 6.06 0 0 0 5.77-4.21 5.99 5.99 0 0 0 4-2.9 6.06 6.06 0 0 0-.748-7.07zm-9.02 12.61a4.48 4.48 0 0 1-2.88-1.04l.142-.08 4.78-2.76a.795.79 0 0 0 .393-.681v-6.74l2.02 1.17a.71.07 0 0 1 .38.05v5.58a4.5 4.5 0 0 1-4.49 4.49zm-9.66-4.13a4.47 4.47 0 0 1-.535-3.01l.142.09 4.78 2.76a.771.77 0 0 0 .781 0l5.84-3.37v2.33a.804.08 0 0 1-.332.06L9.74 19.95a4.5 4.5 0 0 1-6.14-1.65zM2.34 7.9a4.49 4.49 0 0 1 2.37-1.97V11.6a.766.77 0 0 0 .388.68l5.81 3.35-2.02 1.17a.757.08 0 0 1-.071 0l-4.83-2.79A4.5 4.5 0 0 1 2.34 7.87zm16.6 3.86L13.1 8.36 15.12 7.2a.757.08 0 0 1 .071 0l4.83 2.79a4.49 4.49 0 0 1-.676 8.1v-5.68a.79.79 0 0 0-.407-.667zm2.01-3.02l-.142-.085-4.77-2.78a.776.78 0 0 0-.785 0L9.41 9.23V6.9a.662.07 0 0 1 .028-.061l4.83-2.79a4.5 4.5 0 0 1 6.68 4.66zM8.31 12.86l-2.02-1.16a.804.08 0 0 1-.038-.057V6.07a4.5 4.5 0 0 1 7.38-3.45l-.142.08L8.7 5.46a.795.79 0 0 0-.393.68zm1.1-2.37l2.6-1.5 2.61 1.5v3l-2.6 1.5-2.61-1.5Z'
-        fill='currentColor'
-      />
+      <path d={OPENAI_MARK_PATH} fill='currentColor' />
     </svg>
   )
 }
@@ -4032,7 +4018,7 @@ export const ClaudeIcon = (props: SVGProps<SVGSVGElement>) => (
     xmlns='http://www.w3.org/2000/svg'
   >
     <title>Claude</title>
-    <path d='m19.6 66.5 19.7-11 .3-1-.3-.5h-1l-3.3-.2-11.2-.3L14 53l-9.5-.5-2.4-.5L0 49l.2-1.5 2-1.3 2.9.2 6.3.5 9.5.6 6.9.4L38 49.1h1.6l.2-.7-.5-.4-.4-.4L29 41l-10.6-7-5.6-4.1-3-2-1.5-2-.6-4.2 2.7-3 3.7.3.9.2 3.7 2.9 8 6.1L37 36l1.5 1.2.6-.4.1-.3-.7-1.1L33 25l-6-10.4-2.7-4.3-.7-2.6c-.3-1-.4-2-.4-3l3-4.2L28 0l4.2.6L33.8 2l2.6 6 4.1 9.3L47 29.9l2 3.8 1 3.4.3 1h.7v-.5l.5-7.2 1-8.7 1-11.2.3-3.2 1.6-3.8 3-2L61 2.6l2 2.9-.3 1.8-1.1 7.7L59 27.1l-1.5 8.2h.9l1-1.1 4.1-5.4 6.9-8.6 3-3.5L77 13l2.3-1.8h4.3l3.1 4.7-1.4 4.9-4.4 5.6-3.7 4.7-5.3 7.1-3.2 5.7.3.4h.7l12-2.6 6.4-1.1 7.6-1.3 3.5 1.6.4 1.6-1.4 3.4-8.2 2-9.6 2-14.3 3.3-.2.1.2.3 6.4.6 2.8.2h6.8l12.6 1 3.3 2 1.9 2.7-.3 2-5.1 2.6-6.8-1.6-16-3.8-5.4-1.3h-.8v.4l4.6 4.5 8.3 7.5L89 80.1l.5 2.4-1.3 2-1.4-.2-9.2-7-3.6-3-8-6.8h-.5v.7l1.8 2.7 9.8 14.7.5 4.5-.7 1.4-2.6 1-2.7-.6-5.8-8-6-9-4.7-8.2-.5.4-2.9 30.2-1.3 1.5-3 1.2-2.5-2-1.4-3 1.4-6.2 1.6-8 1.3-6.4 1.2-7.9.7-2.6v-.2H49L43 72l-9 12.3-7.2 7.6-1.7.7-3-1.5.3-2.8L24 86l10-12.8 6-7.9 4-4.6-.1-.5h-.3L17.2 77.4l-4.7.6-2-2 .2-3 1-1 8-5.5Z' />
+    <path d={CLAUDE_MARK_PATH} />
   </svg>
 )
 
@@ -4392,11 +4378,7 @@ export function GeminiIcon(props: SVGProps<SVGSVGElement>) {
           <stop offset='100%' stopColor='#F0DCD6' />
         </linearGradient>
       </defs>
-      <path
-        d='M12 24A14.3 14.3 0 000 12 14.3 14.3 0 0012 0a14.31 14.31 0 0012 12 14.31 14.31 0 00-12 12'
-        fill={`url(#${gradientId})`}
-        fillRule='nonzero'
-      />
+      <path d={GEMINI_MARK_PATH} fill={`url(#${gradientId})`} fillRule='nonzero' />
     </svg>
   )
 }
diff --git a/apps/sim/app/(landing)/careers/careers.tsx b/apps/sim/app/(landing)/careers/careers.tsx
index a9023f10f97..0d69f2b84f8 100644
--- a/apps/sim/app/(landing)/careers/careers.tsx
+++ b/apps/sim/app/(landing)/careers/careers.tsx
@@ -1,4 +1,5 @@
 import { Suspense } from 'react'
+import { cn } from '@sim/emcn'
 import type { SearchParams } from 'nuqs/server'
 import { getAshbyJobs } from '@/lib/ashby/jobs'
 import {
@@ -9,6 +10,7 @@ import {
   JobGroups,
 } from '@/app/(landing)/careers/components/job-board'
 import { careersSearchParamsCache } from '@/app/(landing)/careers/search-params'
+import { LANDING_TYPE } from '@/app/(landing)/components/landing-layout'
 
 interface CareersProps {
   searchParams: Promise<SearchParams>
@@ -45,7 +47,7 @@ export default async function Careers({ searchParams }: CareersProps) {
       <section
         id='careers-hero'
         aria-labelledby='careers-heading'
-        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'
+        className='mx-auto flex w-full max-w-[1728px] flex-col gap-6 px-10 pt-[112px] pb-16 max-sm:pt-12 max-sm:pb-10 max-md:px-7 max-lg:px-8 max-xl:px-9 max-xl:pt-20'
       >
         <p className='sr-only'>
           Careers at Sim, the open-source AI workspace where teams build, deploy, and manage AI
@@ -56,11 +58,11 @@ export default async function Careers({ searchParams }: CareersProps) {
 
         <h1
           id='careers-heading'
-          className='max-w-[24ch] text-balance text-[48px] text-[var(--text-primary)] leading-[1.1] max-sm:text-[32px] max-xl:text-[40px]'
+          className={cn('max-w-[24ch] text-balance text-[var(--text-primary)]', LANDING_TYPE.h1)}
         >
           Help build Sim, the AI workspace for teams.
         </h1>
-        <p className='max-w-[60ch] text-pretty text-[var(--text-body)] text-lg leading-[1.5] max-sm:text-base'>
+        <p className='max-w-[60ch] text-pretty text-[20px] text-[var(--text-body)] leading-[1.5] max-sm:text-[17px]'>
           Sim is the open-source AI workspace where teams build, deploy, and manage AI agents. We're
           a small, high-agency team shipping fast to thousands of builders. If you want to own real
           work and shape the workspace teams live in, we'd love to meet you.
diff --git a/apps/sim/app/(landing)/careers/components/job-board/job-groups.tsx b/apps/sim/app/(landing)/careers/components/job-board/job-groups.tsx
index dbce8d1b8c9..6cbf6a63a4b 100644
--- a/apps/sim/app/(landing)/careers/components/job-board/job-groups.tsx
+++ b/apps/sim/app/(landing)/careers/components/job-board/job-groups.tsx
@@ -84,11 +84,11 @@ function JobRow({ posting }: JobRowProps) {
       rel='noopener noreferrer'
       className={cn(
         '-mx-3 group flex items-center justify-between gap-6 rounded-lg border-[var(--border)]',
-        'border-t px-3 py-5 transition-colors hover:bg-[var(--surface-hover)]'
+        'border-t px-3 py-6 transition-colors hover:bg-[var(--surface-hover)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--text-primary)] focus-visible:outline-offset-2 motion-reduce:transition-none'
       )}
     >
       <div className='flex min-w-0 flex-col gap-1.5'>
-        <h4 className='truncate font-medium text-[var(--text-primary)] text-base'>
+        <h4 className='text-pretty font-normal text-[var(--text-primary)] text-lg max-sm:text-base'>
           {posting.title}
         </h4>
         <div className='flex flex-wrap items-center gap-x-2 gap-y-1 text-[var(--text-muted)] text-sm'>
@@ -107,7 +107,7 @@ function JobRow({ posting }: JobRowProps) {
 
       <span className='flex shrink-0 items-center gap-1.5 font-medium text-[var(--text-body)] text-sm'>
         Apply
-        <ArrowRight className='size-[14px] text-[var(--text-icon)] transition-transform group-hover:translate-x-0.5' />
+        <ArrowRight className='size-[14px] text-[var(--text-icon)] transition-transform group-hover:translate-x-0.5 motion-reduce:transition-none' />
       </span>
     </a>
   )
diff --git a/apps/sim/app/(landing)/comparisons/[provider]/page.tsx b/apps/sim/app/(landing)/comparisons/[provider]/page.tsx
index 9319e083533..7e3862fa010 100644
--- a/apps/sim/app/(landing)/comparisons/[provider]/page.tsx
+++ b/apps/sim/app/(landing)/comparisons/[provider]/page.tsx
@@ -21,7 +21,11 @@ import {
 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 {
+  LANDING_CONTENT_WIDTH,
+  LANDING_GUTTER,
+  PUBLIC_PAGE_TYPE,
+} from '@/app/(landing)/components/landing-layout'
 
 const baseUrl = SITE_URL
 
@@ -164,7 +168,13 @@ export default async function ComparisonProviderPage({
       <JsonLd data={faqJsonLd} />
 
       <main id='main-content' className='bg-[var(--bg)]'>
-        <div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER, 'pt-[112px] max-sm:pt-20')}>
+        <div
+          className={cn(
+            LANDING_CONTENT_WIDTH,
+            LANDING_GUTTER,
+            'pt-[112px] max-sm:pt-12 max-xl:pt-20'
+          )}
+        >
           <div className='mb-6'>
             <BackLink href='/comparisons' label='Back to comparisons' />
           </div>
@@ -172,7 +182,7 @@ export default async function ComparisonProviderPage({
           <div className='flex flex-col gap-4'>
             <h1
               id='comparison-heading'
-              className='text-balance text-[28px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] lg:text-[40px]'
+              className={cn('text-balance text-[var(--text-primary)]', PUBLIC_PAGE_TYPE.title)}
             >
               Sim vs {competitor.name}
             </h1>
diff --git a/apps/sim/app/(landing)/comparisons/page.tsx b/apps/sim/app/(landing)/comparisons/page.tsx
index b7b789a05b7..3ca92c0e65b 100644
--- a/apps/sim/app/(landing)/comparisons/page.tsx
+++ b/apps/sim/app/(landing)/comparisons/page.tsx
@@ -9,7 +9,11 @@ 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'
+import {
+  LANDING_CONTENT_WIDTH,
+  LANDING_GUTTER,
+  PUBLIC_PAGE_TYPE,
+} from '@/app/(landing)/components/landing-layout'
 
 const baseUrl = SITE_URL
 
@@ -103,14 +107,20 @@ export default function ComparisonHubPage() {
       <JsonLd data={faqJsonLd} />
 
       <main id='main-content' className='bg-[var(--bg)]'>
-        <div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER, 'pt-[112px] max-sm:pt-20')}>
+        <div
+          className={cn(
+            LANDING_CONTENT_WIDTH,
+            LANDING_GUTTER,
+            'pt-[112px] max-sm:pt-12 max-xl: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' />
 
           <div className='flex flex-col gap-4'>
             <h1
               id='comparison-hub-heading'
-              className='text-balance text-[28px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] lg:text-[40px]'
+              className={cn('text-balance text-[var(--text-primary)]', PUBLIC_PAGE_TYPE.title)}
             >
               Sim comparisons
             </h1>
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 6acc472aaa3..7d52025ec88 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-[1728px] px-10 pt-[112px] max-sm:pt-20 max-md:px-7 max-lg:px-8 max-xl:px-9'>
+      <div className='mx-auto w-full max-w-[1728px] px-10 pt-[112px] max-sm:pt-12 max-md:px-7 max-lg:px-8 max-xl:px-9 max-xl:pt-20'>
         <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)]' />
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 4d77b215514..eda1d378c8f 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
@@ -1,8 +1,10 @@
+import { cn } from '@sim/emcn'
 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 { JsonLd } from '@/app/(landing)/components/json-ld'
+import { PUBLIC_PAGE_TYPE } from '@/app/(landing)/components/landing-layout'
 
 interface ContentAuthorPageProps {
   /** Route base path, e.g. `/blog` or `/library`. */
@@ -35,7 +37,7 @@ export function ContentAuthorPage({
       <section className='bg-[var(--bg)]'>
         {graphJsonLd && <JsonLd data={graphJsonLd} />}
 
-        <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='mx-auto w-full max-w-[1728px] px-10 pt-[112px] max-sm:pt-12 max-md:px-7 max-lg:px-8 max-xl:px-9 max-xl:pt-20'>
           <div className='mb-6'>
             <BackLink href={basePath} label={`Back to ${sectionName}`} />
           </div>
@@ -51,7 +53,7 @@ export function ContentAuthorPage({
                 unoptimized
               />
             ) : null}
-            <h1 className='text-balance text-[28px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] lg:text-[40px]'>
+            <h1 className={cn('text-balance text-[var(--text-primary)]', PUBLIC_PAGE_TYPE.title)}>
               {authorName}
             </h1>
           </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 f9de9c7f280..22d967d35d7 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
@@ -9,7 +9,7 @@ export function ContentIndexLoading() {
   return (
     <section className='bg-[var(--bg)]'>
       <div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER)}>
-        <div className='pt-[112px] max-sm:pt-20'>
+        <div className='pt-[112px] max-sm:pt-12 max-xl: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)]' />
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 b2138a8d2ef..034adbcddf5 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
@@ -1,9 +1,10 @@
-import { ChipLink } from '@sim/emcn'
+import { ChipLink, cn } from '@sim/emcn'
 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 { JsonLd } from '@/app/(landing)/components/json-ld'
+import { PUBLIC_PAGE_TYPE } from '@/app/(landing)/components/landing-layout'
 
 interface ContentIndexPageProps {
   /** Route base path, e.g. `/blog` or `/library`. */
@@ -43,9 +44,9 @@ export function ContentIndexPage({
       <section className='bg-[var(--bg)]'>
         <JsonLd data={collectionJsonLd} />
 
-        <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='mx-auto w-full max-w-[1728px] px-10 pt-[112px] max-sm:pt-12 max-md:px-7 max-lg:px-8 max-xl:px-9 max-xl:pt-20'>
           <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]'>
+            <h1 className={cn('text-balance text-[var(--text-primary)]', PUBLIC_PAGE_TYPE.title)}>
               {heading}
             </h1>
             <p className='max-w-[540px] text-[var(--text-secondary)] text-sm leading-[150%] tracking-[0.02em] lg:text-base'>
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 c26f8e72c22..c616a123fd9 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
@@ -5,7 +5,13 @@ import { LANDING_CONTENT_WIDTH, LANDING_GUTTER } from '@/app/(landing)/component
 export function ContentPostLoading() {
   return (
     <article className='w-full bg-[var(--bg)]'>
-      <div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER, 'pt-[112px] max-sm:pt-20')}>
+      <div
+        className={cn(
+          LANDING_CONTENT_WIDTH,
+          LANDING_GUTTER,
+          'pt-[112px] max-sm:pt-12 max-xl:pt-20'
+        )}
+      >
         <div className='mb-6'>
           <Skeleton className='h-[16px] w-[100px] rounded-[4px] bg-[var(--surface-hover)]' />
         </div>
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 5223621a50b..02f8926170f 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
@@ -1,10 +1,11 @@
-import { Avatar, AvatarFallback, AvatarImage } from '@sim/emcn'
+import { Avatar, AvatarFallback, AvatarImage, cn } from '@sim/emcn'
 import Image from 'next/image'
 import Link from 'next/link'
 import { FAQ } from '@/lib/content/faq'
 import type { ContentMeta, ContentPost } from '@/lib/content/schema'
 import { BackLink } from '@/app/(landing)/components/back-link'
 import { JsonLd } from '@/app/(landing)/components/json-ld'
+import { PUBLIC_PAGE_TYPE } from '@/app/(landing)/components/landing-layout'
 import { ShareButton } from '@/app/(landing)/components/share-button'
 
 /** Renders an ISO date as "Jul 1, 2026". Pinned to UTC so the day matches the frontmatter date in every reader's timezone. */
@@ -48,7 +49,7 @@ 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-[1728px] px-10 pt-[112px] max-sm:pt-20 max-md:px-7 max-lg:px-8 max-xl:px-9'>
+      <header className='mx-auto w-full max-w-[1728px] px-10 pt-[112px] max-sm:pt-12 max-md:px-7 max-lg:px-8 max-xl:px-9 max-xl:pt-20'>
         <div className='mb-6'>
           <BackLink href={basePath} label={backLabel} />
         </div>
@@ -73,7 +74,7 @@ export function ContentPostPage({
           <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]'
+                className={cn('text-balance text-[var(--text-primary)]', PUBLIC_PAGE_TYPE.detail)}
                 itemProp='headline'
               >
                 {post.title}
@@ -145,8 +146,11 @@ export function ContentPostPage({
 
       <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-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]'>
+          <div
+            className='mx-auto max-w-[800px] px-6 py-16 max-sm:px-4 max-sm:py-10'
+            itemProp='articleBody'
+          >
+            <div className='prose prose-lg max-sm:prose-base 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>
diff --git a/apps/sim/app/(landing)/components/content-tags-page/content-tags-page.tsx b/apps/sim/app/(landing)/components/content-tags-page/content-tags-page.tsx
index 65f073ccdb2..fded1c69600 100644
--- a/apps/sim/app/(landing)/components/content-tags-page/content-tags-page.tsx
+++ b/apps/sim/app/(landing)/components/content-tags-page/content-tags-page.tsx
@@ -1,6 +1,7 @@
-import { ChipLink } from '@sim/emcn'
+import { ChipLink, cn } from '@sim/emcn'
 import type { TagWithCount } from '@/lib/content/schema'
 import { JsonLd } from '@/app/(landing)/components/json-ld'
+import { PUBLIC_PAGE_TYPE } from '@/app/(landing)/components/landing-layout'
 
 interface ContentTagsPageProps {
   /** Route base path, e.g. `/blog` or `/library`. */
@@ -12,19 +13,15 @@ interface ContentTagsPageProps {
 /** Shared "browse by tag" layout for a content section. */
 export function ContentTagsPage({ basePath, tags, breadcrumbJsonLd }: ContentTagsPageProps) {
   return (
-    <section className='mx-auto max-w-[900px] px-6 py-10 sm:px-8 md:px-12'>
+    <section className='mx-auto w-full max-w-[1728px] px-10 pt-[112px] max-sm:pt-12 max-md:px-7 max-lg:px-8 max-xl:px-9 max-xl:pt-20'>
       <JsonLd data={breadcrumbJsonLd} />
-      <h1 className='mb-6 text-[32px] text-[var(--text-primary)] leading-tight'>Browse by tag</h1>
+      <h1 className={cn('mb-6 text-[var(--text-primary)]', PUBLIC_PAGE_TYPE.title)}>
+        Browse by tag
+      </h1>
       <div className='flex flex-wrap gap-3'>
-        <ChipLink href={basePath} className='border border-[var(--border-1)]'>
-          All
-        </ChipLink>
+        <ChipLink href={basePath}>All</ChipLink>
         {tags.map((t) => (
-          <ChipLink
-            key={t.tag}
-            href={`${basePath}?tag=${encodeURIComponent(t.tag)}`}
-            className='border border-[var(--border-1)]'
-          >
+          <ChipLink key={t.tag} href={`${basePath}?tag=${encodeURIComponent(t.tag)}`}>
             {t.tag} ({t.count})
           </ChipLink>
         ))}
diff --git a/apps/sim/app/(landing)/components/landing-layout.ts b/apps/sim/app/(landing)/components/landing-layout.ts
index dc0e57c0ca4..dbcbaa015f6 100644
--- a/apps/sim/app/(landing)/components/landing-layout.ts
+++ b/apps/sim/app/(landing)/components/landing-layout.ts
@@ -99,3 +99,9 @@ export const HOME_TYPE = {
   body: LANDING_TYPE.body,
   meta: LANDING_TYPE.meta,
 } as const
+
+/** Public directory and detail headings, using the landing page's display rhythm. */
+export const PUBLIC_PAGE_TYPE = {
+  title: HOME_TYPE.h2Display,
+  detail: 'text-[48px] leading-[1.1] tracking-[-0.025em] max-sm:text-[32px] max-xl:text-[40px]',
+} as const
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
index 7897c759384..364cf59aa10 100644
--- 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
@@ -20,7 +20,7 @@ export function NavbarAuthPill({ size = 'compact', className, onNavigate }: Navb
       role='group'
       aria-label='Account actions'
       className={cn(
-        'inline-flex shrink-0 items-stretch rounded-full border border-[var(--border)]',
+        'group/account inline-flex shrink-0 items-stretch rounded-full border border-[var(--border)]',
         compact ? 'h-[26px] text-[13px]' : 'h-9 text-[14px]',
         className
       )}
@@ -35,7 +35,10 @@ export function NavbarAuthPill({ size = 'compact', className, onNavigate }: Navb
       </Link>
       <span
         aria-hidden='true'
-        className={cn('w-px shrink-0 self-center bg-[var(--border)]', compact ? 'h-3' : 'h-3.5')}
+        className={cn(
+          'w-px shrink-0 self-center bg-[var(--border)] transition-[height] duration-150 ease-out group-focus-within/account:h-full group-hover/account:h-full motion-reduce:transition-none',
+          compact ? 'h-3' : 'h-3.5'
+        )}
       />
       <Link
         href={SIGNUP_HREF}
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
index 580f7484de2..e8466f2f156 100644
--- 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
@@ -120,7 +120,7 @@ beforeEach(() => {
   mounted = true
   act(() => {
     root.render(
-      <NavbarShell>
+      <NavbarShell announcement={<a href='/blog'>Latest update</a>}>
         <MenuControls />
       </NavbarShell>
     )
@@ -196,3 +196,45 @@ describe('NavbarShell menu positioning and scroll containment', () => {
     expect(host.style.paddingRight).toBe('12px')
   })
 })
+
+describe('NavbarShell announcement at page top', () => {
+  function scrollTo(top: number) {
+    act(() => {
+      host.scrollTop = top
+      host.dispatchEvent(new Event('scroll'))
+    })
+  }
+
+  it('starts hidden when the page restores a scrolled position', () => {
+    const banner = host.querySelector('[data-announcement-collapsed]')
+    expect(banner?.getAttribute('aria-hidden')).toBe('true')
+    expect(banner?.hasAttribute('inert')).toBe(true)
+  })
+
+  it('stays hidden on upward scroll until the page reaches the top', () => {
+    const banner = host.querySelector('[data-announcement-collapsed]')
+    scrollTo(0)
+    expect(banner?.getAttribute('aria-hidden')).toBe('false')
+    scrollTo(400)
+    expect(banner?.getAttribute('aria-hidden')).toBe('true')
+    expect(banner?.hasAttribute('inert')).toBe(true)
+    scrollTo(380)
+    expect(banner?.getAttribute('aria-hidden')).toBe('true')
+    scrollTo(8)
+    expect(banner?.getAttribute('aria-hidden')).toBe('true')
+    scrollTo(0)
+    expect(banner?.getAttribute('aria-hidden')).toBe('false')
+    expect(banner?.hasAttribute('inert')).toBe(false)
+  })
+
+  it('shows at the top and restores scroll anchoring on unmount', () => {
+    scrollTo(400)
+    scrollTo(0)
+    expect(host.querySelector('[data-announcement-collapsed]')?.getAttribute('aria-hidden')).toBe(
+      'false'
+    )
+    expect(host.style.overflowAnchor).toBe('none')
+    unmount()
+    expect(host.style.overflowAnchor).toBe('')
+  })
+})
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 dff811a914d..66960cf6555 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
@@ -30,6 +30,7 @@ export function useNavbarFrost(): NavbarFrostContextValue | null {
 
 interface NavbarShellProps {
   children: ReactNode
+  announcement?: ReactNode
 }
 
 /**
@@ -39,8 +40,7 @@ interface NavbarShellProps {
  * 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
  * the sticky header. A 1px sentinel at the top of the landing shell's internal
- * scroll port is watched by an {@link IntersectionObserver} - no scroll listener
- * and no per-frame work. Past that point the bar gains the shared
+ * scroll port is watched by an {@link IntersectionObserver}. Past that point the bar gains the shared
  * {@link NAVBAR_GLASS_SURFACE} (`--bg` at 92% via `color-mix` plus a strong 40px
  * backdrop blur) - a white/glass surface built entirely from the platform's
  * light tokens, not invented colors.
@@ -75,9 +75,10 @@ interface NavbarShellProps {
  * Only this shell hydrates; the nav content is server-rendered and passed through
  * as {@link children}, so the wordmark and links stay zero-hydration and crawlable.
  */
-export function NavbarShell({ children }: NavbarShellProps) {
+export function NavbarShell({ children, announcement }: NavbarShellProps) {
   const sentinelRef = useRef<HTMLDivElement>(null)
   const headerRef = useRef<HTMLElement>(null)
+  const [announcementHidden, setAnnouncementHidden] = useState(false)
   const [scrolled, setScrolled] = useState(false)
   const [menuOpenBySource, setMenuOpenBySource] = useState({ desktop: false, mobile: false })
   const menuOpen = menuOpenBySource.desktop || menuOpenBySource.mobile
@@ -119,6 +120,24 @@ export function NavbarShell({ children }: NavbarShellProps) {
     return () => observer.disconnect()
   }, [])
 
+  useEffect(() => {
+    const scrollPort = sentinelRef.current?.parentElement
+    if (!scrollPort || !announcement || menuOpen) return
+
+    const previousOverflowAnchor = scrollPort.style.overflowAnchor
+    scrollPort.style.overflowAnchor = 'none'
+    const onScroll = () => {
+      setAnnouncementHidden(Math.max(0, scrollPort.scrollTop) > 1)
+    }
+
+    onScroll()
+    scrollPort.addEventListener('scroll', onScroll, { passive: true })
+    return () => {
+      scrollPort.removeEventListener('scroll', onScroll)
+      scrollPort.style.overflowAnchor = previousOverflowAnchor
+    }
+  }, [announcement, menuOpen])
+
   useEffect(() => {
     if (!menuOpen) return
 
@@ -175,6 +194,19 @@ export function NavbarShell({ children }: NavbarShellProps) {
             scrolled || menuOpen ? NAVBAR_GLASS_SURFACE : 'bg-[var(--bg)]'
           )}
         />
+        {announcement && (
+          <div
+            data-announcement-collapsed={announcementHidden}
+            inert={announcementHidden}
+            aria-hidden={announcementHidden}
+            className={cn(
+              'overflow-hidden transition-[height] duration-200 ease-out motion-reduce:transition-none',
+              announcementHidden ? 'h-0' : 'h-[1.95rem]'
+            )}
+          >
+            {announcement}
+          </div>
+        )}
         {children}
       </header>
       <div
diff --git a/apps/sim/app/(landing)/components/navbar/navbar.tsx b/apps/sim/app/(landing)/components/navbar/navbar.tsx
index 3bd927b3160..c4a34502472 100644
--- a/apps/sim/app/(landing)/components/navbar/navbar.tsx
+++ b/apps/sim/app/(landing)/components/navbar/navbar.tsx
@@ -34,8 +34,7 @@ interface NavbarProps {
 
 export function Navbar({ stars }: NavbarProps) {
   return (
-    <NavbarShell>
-      <AnnouncementBanner />
+    <NavbarShell announcement={<AnnouncementBanner />}>
       <nav
         aria-label='Primary navigation'
         itemScope
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
index 7a2e5aea7d9..91a4029e49d 100644
--- 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
@@ -6,6 +6,7 @@ import {
   type IsoTone,
   withIsoFace,
 } from '@/app/(landing)/components/platform-suite/components/iso-marks/iso-illustration-style'
+import { ISO_INTEGRATE_PATHS } from '@/app/(landing)/components/platform-suite/components/iso-marks/iso-mark-paths'
 import styles from '@/app/(landing)/components/platform-suite/components/iso-marks/iso-marks.module.css'
 
 export interface IsoIntegrateIllustrationProps {
@@ -95,40 +96,22 @@ export function IsoIntegrateIllustration({
       )}
       <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}
-          />
+          <path d={ISO_INTEGRATE_PATHS[0]} {...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)}
-          />
+          <path d={ISO_INTEGRATE_PATHS[1]} {...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)}
-          />
+          <path d={ISO_INTEGRATE_PATHS[2]} {...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)}
-          />
+          <path d={ISO_INTEGRATE_PATHS[3]} {...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)}
-          />
+          <path d={ISO_INTEGRATE_PATHS[4]} {...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)}
-          />
+          <path d={ISO_INTEGRATE_PATHS[5]} {...withIsoFace(lineProps, ISO_PALETTE.high)} />
         </g>
       </g>
     </svg>
diff --git a/apps/sim/app/(landing)/components/platform-suite/components/iso-marks/iso-mark-paths.ts b/apps/sim/app/(landing)/components/platform-suite/components/iso-marks/iso-mark-paths.ts
new file mode 100644
index 00000000000..3bb446d1b48
--- /dev/null
+++ b/apps/sim/app/(landing)/components/platform-suite/components/iso-marks/iso-mark-paths.ts
@@ -0,0 +1,21 @@
+/** Canonical contours shared by the platform illustrations and the Sim stack engravings. */
+export const ISO_MONITOR_PATHS = [
+  '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',
+  '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',
+  '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',
+  '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',
+  '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',
+  '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',
+  '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',
+  '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',
+  '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',
+] as const
+
+export const ISO_INTEGRATE_PATHS = [
+  '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',
+  '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',
+  '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',
+  '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',
+  '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',
+  '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',
+] as const
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
index 011a8ee171c..f1c17448515 100644
--- 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
@@ -6,6 +6,7 @@ import {
   type IsoTone,
   withIsoFace,
 } from '@/app/(landing)/components/platform-suite/components/iso-marks/iso-illustration-style'
+import { ISO_MONITOR_PATHS } from '@/app/(landing)/components/platform-suite/components/iso-marks/iso-mark-paths'
 import styles from '@/app/(landing)/components/platform-suite/components/iso-marks/iso-marks.module.css'
 
 export interface IsoMonitorIllustrationProps {
@@ -99,54 +100,27 @@ export function IsoMonitorIllustration({
       )}
       <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}
-          />
+          <path d={ISO_MONITOR_PATHS[0]} {...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)}
-          />
+          <path d={ISO_MONITOR_PATHS[1]} {...withIsoFace(lineProps, ISO_PALETTE.low)} />
+          <path d={ISO_MONITOR_PATHS[2]} {...withIsoFace(lineProps, ISO_PALETTE.mid)} />
+          <path d={ISO_MONITOR_PATHS[3]} {...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}
-          />
+          <path d={ISO_MONITOR_PATHS[4]} {...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)}
-          />
+          <path d={ISO_MONITOR_PATHS[5]} {...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)}
-          />
+          <path d={ISO_MONITOR_PATHS[6]} {...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}
-          />
+          <path d={ISO_MONITOR_PATHS[7]} {...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}
-          />
+          <path d={ISO_MONITOR_PATHS[8]} {...lineProps} />
         </g>
       </g>
     </svg>
diff --git a/apps/sim/app/(landing)/components/platform-suite/platform-suite.tsx b/apps/sim/app/(landing)/components/platform-suite/platform-suite.tsx
index 5bae17a9583..b606a938507 100644
--- a/apps/sim/app/(landing)/components/platform-suite/platform-suite.tsx
+++ b/apps/sim/app/(landing)/components/platform-suite/platform-suite.tsx
@@ -101,6 +101,7 @@ export function PlatformSuite() {
         <div className='flex flex-col items-center gap-8 text-center max-sm:gap-5'>
           <h2
             id='platform-heading'
+            tabIndex={-1}
             className={cn('text-balance text-[var(--text-primary)]', HOME_TYPE.h2Display)}
           >
             One Platform for every AI Agent
diff --git a/apps/sim/app/(landing)/components/prose-page/constants.ts b/apps/sim/app/(landing)/components/prose-page/constants.ts
index 8637f947204..94989590557 100644
--- a/apps/sim/app/(landing)/components/prose-page/constants.ts
+++ b/apps/sim/app/(landing)/components/prose-page/constants.ts
@@ -1,4 +1,10 @@
-import { LANDING_CONTENT_WIDTH, LANDING_GUTTER } from '@/app/(landing)/components/landing-layout'
+import { cn } from '@sim/emcn'
+import {
+  LANDING_CONTENT_WIDTH,
+  LANDING_GUTTER,
+  LANDING_HERO_TOP_PADDING,
+  PUBLIC_PAGE_TYPE,
+} from '@/app/(landing)/components/landing-layout'
 
 /**
  * Prose-layout spacing and type - the single source of truth for every gutter,
@@ -23,7 +29,7 @@ export const PROSE_SPACING = {
   /** 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',
+  heroTopPadding: LANDING_HERO_TOP_PADDING,
   /** Vertical rhythm of the content column - hero → body and section → section. */
   bodyRhythm: 'gap-16 max-sm:gap-12',
   /** Hero header sub-stack (title → meta → lead → actions). */
@@ -55,13 +61,13 @@ export const PROSE_TABLE_WIDTHS = {
  * Uses the platform light tokens exclusively (no hex, no `--landing-*`).
  */
 export const PROSE_TYPE = {
-  h1: 'text-balance text-[40px] text-[var(--text-primary)] leading-[1.1] max-sm:text-[32px]',
+  h1: cn('text-balance text-[var(--text-primary)]', PUBLIC_PAGE_TYPE.title),
   meta: 'text-[14px] text-[var(--text-muted)]',
   lead: 'max-w-[640px] text-[20px] text-[var(--text-body)] leading-[1.5] max-sm:text-[17px]',
   h2: 'text-[24px] text-[var(--text-primary)] leading-[1.25] max-sm:text-[21px]',
   h3: 'text-[17px] text-[var(--text-primary)] leading-[1.35]',
-  body: 'text-[15px] text-[var(--text-body)] leading-[1.65]',
-  list: 'text-[15px] text-[var(--text-body)] leading-[1.6] marker:text-[var(--text-muted)]',
+  body: 'max-w-[75ch] text-[16px] text-[var(--text-body)] leading-[1.65]',
+  list: 'max-w-[75ch] text-[16px] text-[var(--text-body)] leading-[1.6] marker:text-[var(--text-muted)]',
   callout:
     'rounded-lg border border-[var(--border)] bg-[var(--surface-2)] px-4 py-3 text-[14px] text-[var(--text-body)] leading-[1.6]',
   link: 'text-[var(--text-primary)] underline underline-offset-2 transition-colors hover:text-[var(--text-body)]',
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
index 8f5a2fbb589..087cb8867ef 100644
--- 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
@@ -70,32 +70,32 @@ const CONTROLS: readonly Control[] = [
   },
 ] as const
 
-/** Six workspace capabilities grouped in a shared panel below the product rail. */
+/** Six workspace capabilities arranged in an open grid below the product rail. */
 export function WorkspaceControls() {
   return (
     <section
       id='controls'
       aria-label='Workspace controls'
-      className={cn('flex w-full flex-col', LANDING_CONTENT_WIDTH, LANDING_GUTTER)}
+      className='relative w-full pb-8 max-sm:pb-6'
     >
-      <div className={cn(HOME_INSET, 'pt-12 max-sm:pt-8')}>
-        <ul className='grid grid-cols-3 gap-px overflow-hidden rounded-xl border border-[var(--border)] bg-[var(--border)] max-sm:grid-cols-1 max-lg:grid-cols-2'>
-          {CONTROLS.map(({ title, description, Mark }) => (
-            <li
-              key={title}
-              className='flex flex-col items-start gap-3 bg-[var(--surface-2)] p-7 max-sm:p-6'
-            >
-              <Mark className={cn('size-[56px]', 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 className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER)}>
+        <div className={cn(HOME_INSET, 'pt-12 max-sm:pt-8')}>
+          <ul className='grid grid-cols-3 gap-x-12 gap-y-12 max-sm:grid-cols-1 max-sm:gap-y-8 max-lg:grid-cols-2'>
+            {CONTROLS.map(({ title, description, Mark }) => (
+              <li key={title} className='flex flex-col items-start gap-3'>
+                <Mark className={cn('size-[56px]', 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>
       </div>
+      <hr className='absolute inset-x-0 top-full mt-18 border-0 border-[var(--border)] border-t max-sm:mt-10 max-lg:mt-12' />
     </section>
   )
 }
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
index 0b7efbd08be..8ff93f8318f 100644
--- a/apps/sim/app/(landing)/components/shared/edge-fade/edge-fade.tsx
+++ b/apps/sim/app/(landing)/components/shared/edge-fade/edge-fade.tsx
@@ -57,6 +57,7 @@ const AXIS = { top: 'y', bottom: 'y', left: 'x', right: 'x' } as const
 /**
  * How far a strip reaches in from its edge.
  *
+ * - `heading` - a pinned introduction above an arriving scene needs a deeper top veil.
  * - `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.
@@ -68,6 +69,7 @@ const AXIS = { top: 'y', bottom: 'y', left: 'x', right: 'x' } as const
  */
 const DEPTH = {
   preview: { x: 'w-10', y: 'h-10' },
+  heading: { x: 'w-[240px]', y: 'h-[240px] lg:h-[280px]' },
   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
diff --git a/apps/sim/app/(landing)/components/sim-stack/sim-stack.tsx b/apps/sim/app/(landing)/components/sim-stack/sim-stack.tsx
new file mode 100644
index 00000000000..63ab95d3c5e
--- /dev/null
+++ b/apps/sim/app/(landing)/components/sim-stack/sim-stack.tsx
@@ -0,0 +1,66 @@
+'use client'
+
+import { useState } from 'react'
+import { cn } from '@sim/emcn'
+import { LANDING_CONTENT_WIDTH } from '@/app/(landing)/components/landing-layout'
+import { EdgeFade } from '@/app/(landing)/components/shared/edge-fade'
+import { StackArtwork } from '@/app/(landing)/components/sim-stack/stack-artwork'
+import { StackDescription } from '@/app/(landing)/components/sim-stack/stack-description'
+import { StackIntro } from '@/app/(landing)/components/sim-stack/stack-intro'
+import { StackPlayer } from '@/app/(landing)/components/sim-stack/stack-player'
+import type { StackInspection } from '@/app/(landing)/components/sim-stack/stack-scene'
+import { STACK_PLAYBACK_END } from '@/app/(landing)/components/sim-stack/stack-timeline'
+import { useStackScroll } from '@/app/(landing)/components/sim-stack/use-stack-scroll'
+
+/** A scroll-built view of Sim, from the governance foundation to the shared workspace. */
+export function SimStack() {
+  const { trackRef, stageRef, progress, active, isPlaying, selectLayer, togglePlayback } =
+    useStackScroll()
+  const [inspection, setInspection] = useState<StackInspection | null>(null)
+  const complete = progress >= STACK_PLAYBACK_END - 0.01
+  const currentInspection = complete ? inspection : null
+  return (
+    <section id='sim-stack' aria-labelledby='sim-stack-heading'>
+      <div
+        ref={trackRef}
+        data-stack-track
+        className='relative h-[460svh] motion-reduce:h-auto [@media(max-height:760px)]:h-auto'
+      >
+        <div
+          ref={stageRef}
+          data-stack-stage
+          className='sticky top-[62px] h-[calc(100svh-62px)] min-h-[560px] overflow-hidden bg-[var(--bg)] motion-reduce:relative motion-reduce:top-0 max-sm:min-h-[620px] [@media(max-height:760px)]:relative [@media(max-height:760px)]:top-0 [@media(max-height:760px)]:h-[800px] [@media(max-height:760px)_and_(max-width:639px)]:h-[calc(100svh-62px)] [@media(max-height:760px)_and_(max-width:639px)]:min-h-[500px]'
+        >
+          <div className={cn('relative h-full', LANDING_CONTENT_WIDTH)}>
+            <div
+              id='sim-stack-artwork'
+              className='-translate-x-1/2 pointer-events-none absolute inset-y-0 left-1/2 isolate w-[55%] [contain:paint] max-xl:bottom-[100px] max-xl:w-full [@media(max-height:760px)_and_(max-width:639px)]:bottom-[72px]'
+            >
+              <StackArtwork progress={progress} active={active} onInspect={setInspection} />
+              <div className='pointer-events-none absolute inset-0 max-sm:[&>div]:h-[440px] max-xl:[&>div]:h-[320px] [@media(max-height:760px)_and_(max-width:639px)]:[&>div]:h-[300px]'>
+                <div className='absolute inset-x-0 top-0 hidden bg-[linear-gradient(to_bottom,var(--bg)_35%,transparent_100%)] max-sm:block' />
+                <EdgeFade ground='canvas' edges={['top']} depth='heading' />
+              </div>
+            </div>
+            <StackIntro progress={progress} />
+            <div className='absolute top-[192px] left-10 z-10 w-[300px] max-sm:top-[144px] max-xl:top-[168px] max-xl:right-7 max-xl:left-7 max-xl:w-auto max-xl:text-center'>
+              <StackDescription
+                active={currentInspection?.index ?? active}
+                progress={currentInspection?.progress ?? progress}
+                instant={complete}
+              />
+            </div>
+            <div className='-translate-x-1/2 absolute bottom-7 left-1/2 z-10 max-xl:bottom-5'>
+              <StackPlayer
+                progress={progress}
+                isPlaying={isPlaying}
+                onToggle={togglePlayback}
+                onSelect={selectLayer}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/sim-stack/stack-artwork.tsx b/apps/sim/app/(landing)/components/sim-stack/stack-artwork.tsx
new file mode 100644
index 00000000000..2a28ef68e32
--- /dev/null
+++ b/apps/sim/app/(landing)/components/sim-stack/stack-artwork.tsx
@@ -0,0 +1,93 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { createLogger } from '@sim/logger'
+import { useTheme } from 'next-themes'
+import { StackFallback } from '@/app/(landing)/components/sim-stack/stack-fallback'
+import type { StackInspection, StackScene } from '@/app/(landing)/components/sim-stack/stack-scene'
+
+const logger = createLogger('SimStack')
+
+interface StackArtworkProps {
+  progress: number
+  active: number
+  onInspect: (inspection: StackInspection | null) => void
+}
+
+/** Load the material scene near the viewport; retain vector artwork without WebGL. */
+export function StackArtwork({ progress, active, onInspect }: StackArtworkProps) {
+  const hostRef = useRef<HTMLDivElement>(null)
+  const sceneRef = useRef<StackScene | null>(null)
+  const latestRef = useRef({ progress, active, dark: false })
+  const { resolvedTheme } = useTheme()
+  const [ready, setReady] = useState(false)
+
+  useEffect(() => {
+    latestRef.current = { progress, active, dark: resolvedTheme === 'dark' }
+    sceneRef.current?.update(latestRef.current)
+  }, [progress, active, resolvedTheme])
+
+  useEffect(() => {
+    const host = hostRef.current
+    if (!host) return
+    let cancelled = false
+    let loading = false
+    let visible = false
+    const handleLoss = () => {
+      sceneRef.current?.dispose()
+      sceneRef.current = null
+      onInspect(null)
+      setReady(false)
+    }
+    const load = async () => {
+      loading = true
+      try {
+        const { createStackScene } = await import(
+          '@/app/(landing)/components/sim-stack/stack-scene'
+        )
+        await document.fonts.ready
+        if (cancelled) return
+        const scene = createStackScene(host, handleLoss, onInspect)
+        sceneRef.current = scene
+        scene.update(latestRef.current)
+        scene.setVisible(visible)
+        setReady(true)
+      } catch (error) {
+        logger.warn('Using vector stack artwork', { error })
+      }
+    }
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        visible = entry.isIntersecting
+        sceneRef.current?.setVisible(visible)
+        if (visible && !loading) void load()
+      },
+      { rootMargin: '300px' }
+    )
+    observer.observe(host)
+    return () => {
+      cancelled = true
+      observer.disconnect()
+      sceneRef.current?.dispose()
+      sceneRef.current = null
+    }
+  }, [onInspect])
+
+  return (
+    <div
+      aria-hidden='true'
+      className='relative size-full'
+      data-stack-renderer={ready ? 'three' : 'svg'}
+    >
+      {!ready && (
+        <div className='absolute inset-0 max-sm:pt-[240px] max-xl:pt-[280px] max-sm:[&>svg]:scale-[1.14]'>
+          <StackFallback progress={progress} active={active} dark={resolvedTheme === 'dark'} />
+        </div>
+      )}
+      <div
+        ref={hostRef}
+        className='absolute inset-0 [--stack-scene-inset:0px] max-sm:[--stack-scene-inset:240px] max-xl:[--stack-scene-inset:280px] [&>canvas]:block [&>canvas]:size-full'
+      />
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/sim-stack/stack-content.ts b/apps/sim/app/(landing)/components/sim-stack/stack-content.ts
new file mode 100644
index 00000000000..95d3b5ba96e
--- /dev/null
+++ b/apps/sim/app/(landing)/components/sim-stack/stack-content.ts
@@ -0,0 +1,51 @@
+/** Foundation first; the final layer encloses the complete stack. */
+export const STACK_LAYERS = [
+  {
+    id: 'governance',
+    title: 'Governance',
+    headline: 'Control starts at the foundation.',
+    description:
+      'Set permissions, manage your organization, and decide who can access every workspace, agent, and resource.',
+    detail: 'Permissions · Workspaces · Organization',
+  },
+  {
+    id: 'data',
+    title: 'Data & Context',
+    headline: 'Give every agent the full picture.',
+    description:
+      'Connect your integrations, knowledge bases, files, and tables. Sim Search brings the right context into every task.',
+    detail: 'Sim Search · Integrations · Knowledge · Files · Tables',
+  },
+  {
+    id: 'models',
+    title: 'Models',
+    headline: 'The right intelligence for every task.',
+    description:
+      'Work with leading models in one workspace. Choose the model that fits each step, with control over access and spend.',
+    detail: 'Model choice · Shared access · Usage controls',
+  },
+  {
+    id: 'agents',
+    title: 'Agents & Workflows',
+    headline: 'Turn context into action.',
+    description:
+      'Build agents through chat, a visual canvas, or code. Connect models, tools, and data into workflows your team can run.',
+    detail: 'Chat · Canvas · Code',
+  },
+  {
+    id: 'observability',
+    title: 'Observability',
+    headline: 'See what happens at every step.',
+    description:
+      'Trace agent runs, inspect inputs and outputs, and understand performance, failures, and spend.',
+    detail: 'Run traces · Logs · Performance · Spend',
+  },
+  {
+    id: 'sim',
+    title: 'Sim',
+    headline: 'One workspace. The entire stack.',
+    description:
+      'One shared home for your agents, data, models, and controls. Everything your team needs to put AI to work.',
+    detail: 'Your complete AI workspace',
+  },
+] as const
diff --git a/apps/sim/app/(landing)/components/sim-stack/stack-description.tsx b/apps/sim/app/(landing)/components/sim-stack/stack-description.tsx
new file mode 100644
index 00000000000..89e396016df
--- /dev/null
+++ b/apps/sim/app/(landing)/components/sim-stack/stack-description.tsx
@@ -0,0 +1,103 @@
+'use client'
+
+import { Fragment } from 'react'
+import { cn } from '@sim/emcn'
+import { AnimatePresence, motion, useIsPresent, useReducedMotion } from 'framer-motion'
+import { STACK_LAYERS } from '@/app/(landing)/components/sim-stack/stack-content'
+import { getStackLayerProgress } from '@/app/(landing)/components/sim-stack/stack-timeline'
+
+interface StackDescriptionProps {
+  active: number
+  progress: number
+  instant?: boolean
+}
+
+interface TypedCopyProps {
+  text: string
+  progress: number
+  reduced: boolean
+}
+
+/** Reserve complete words so typing never shifts line breaks or announces individual letters. */
+function TypedCopy({ text, progress, reduced }: TypedCopyProps) {
+  let offset = 0
+  return (
+    <>
+      <span className='sr-only'>{text}</span>
+      <span aria-hidden='true'>
+        {text.split(' ').map((word, wordIndex) => {
+          const start = offset
+          offset += word.length + 1
+          return (
+            <Fragment key={`${wordIndex}-${word}`}>
+              {wordIndex > 0 && ' '}
+              <span className='inline-block whitespace-nowrap'>
+                {Array.from(word).map((character, index) => (
+                  <span
+                    key={`${index}-${character}`}
+                    className={cn(
+                      'transition-opacity duration-75 motion-reduce:transition-none',
+                      (reduced ? progress > 0 : progress * text.length > start + index)
+                        ? 'opacity-100'
+                        : 'opacity-0'
+                    )}
+                  >
+                    {character}
+                  </span>
+                ))}
+              </span>
+            </Fragment>
+          )
+        })}
+      </span>
+    </>
+  )
+}
+
+interface DescriptionLayerProps extends StackDescriptionProps {
+  reduced: boolean
+}
+
+function DescriptionLayer({ active, progress, reduced }: DescriptionLayerProps) {
+  const present = useIsPresent()
+  const layer = STACK_LAYERS[active]
+  const { drawing } = getStackLayerProgress(progress, active)
+  return (
+    <motion.div
+      initial={false}
+      animate={{ opacity: 1, filter: 'none' }}
+      exit={{ opacity: 0, filter: reduced ? 'blur(0px)' : 'blur(6px)' }}
+      transition={{ duration: reduced ? 0 : 0.22, ease: 'easeOut' }}
+      data-stack-description={layer.id}
+      aria-hidden={!present || drawing === 0}
+      className='col-start-1 row-start-1'
+    >
+      <h3 className='text-[28px] text-[var(--text-primary)] leading-[1.15] tracking-[-0.025em] max-xl:text-[24px]'>
+        <TypedCopy text={layer.title} progress={drawing / 0.25} reduced={reduced} />
+      </h3>
+      <p className='mt-4 text-[14px] text-[var(--text-body)] leading-[1.6] max-xl:mt-3'>
+        <TypedCopy
+          text={layer.description}
+          progress={reduced ? drawing : (drawing - 0.25) / 0.75}
+          reduced={reduced}
+        />
+      </p>
+    </motion.div>
+  )
+}
+
+/** Retain outgoing copy long enough to soften its exit while the next engraving begins. */
+export function StackDescription({ active, progress, instant = false }: StackDescriptionProps) {
+  const reduced = useReducedMotion() ?? false
+  return (
+    <div className='grid max-w-[280px] max-xl:mx-auto max-xl:max-w-[340px]'>
+      {instant ? (
+        <DescriptionLayer active={active} progress={progress} reduced />
+      ) : (
+        <AnimatePresence initial={false} mode='wait'>
+          <DescriptionLayer key={active} active={active} progress={progress} reduced={reduced} />
+        </AnimatePresence>
+      )}
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/sim-stack/stack-engraving.ts b/apps/sim/app/(landing)/components/sim-stack/stack-engraving.ts
new file mode 100644
index 00000000000..11a093f7dd0
--- /dev/null
+++ b/apps/sim/app/(landing)/components/sim-stack/stack-engraving.ts
@@ -0,0 +1,178 @@
+import { CanvasTexture, LinearMipmapLinearFilter, SRGBColorSpace } from 'three'
+import { WORDMARK_PATHS, WORDMARK_VIEW_BOX } from '@/lib/branding/wordmark'
+import { STACK_LAYERS } from '@/app/(landing)/components/sim-stack/stack-content'
+import {
+  STACK_DARK_INK,
+  STACK_ENGRAVING,
+  STACK_INK,
+} from '@/app/(landing)/components/sim-stack/stack-layout'
+import {
+  getStrokeProgress,
+  STACK_MOTIFS,
+  type StackMotif,
+} from '@/app/(landing)/components/sim-stack/stack-motifs'
+
+export interface StackTextureOptions {
+  size: number
+  anisotropy: number
+}
+
+/** Cache geometry once; scroll changes only the stroke offset and the existing texture. */
+export function createStackEngraving(
+  index: number,
+  fontFamily: string,
+  options: StackTextureOptions
+) {
+  const canvas = document.createElement('canvas')
+  canvas.width = options.size
+  canvas.height = options.size
+  const context = canvas.getContext('2d')
+  if (!context) throw new Error('Stack engraving requires a 2D canvas')
+  const isWordmark = index === STACK_LAYERS.length - 1
+  const source: readonly StackMotif[] = isWordmark
+    ? WORDMARK_PATHS.map((d) => ({ d, x: 0, y: 0, scale: 1 }))
+    : STACK_MOTIFS[index]
+  const paths = source.map(({ d, x, y, scale, fade }) => {
+    const element = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+    element.setAttribute('d', d)
+    const path = new Path2D()
+    path.addPath(new Path2D(d), new DOMMatrix([scale, 0, 0, scale, x, y]))
+    return {
+      path,
+      length: element.getTotalLength() * scale,
+      fade: fade && {
+        x1: fade.x1 * scale + x,
+        y1: fade.y1 * scale + y,
+        x2: fade.x2 * scale + x,
+        y2: fade.y2 * scale + y,
+      },
+    }
+  })
+  const texture = new CanvasTexture(canvas)
+  texture.colorSpace = SRGBColorSpace
+  texture.anisotropy = options.anisotropy
+  texture.generateMipmaps = true
+  texture.minFilter = LinearMipmapLinearFilter
+  const createInkGradient = (
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    dark: boolean
+  ) => {
+    const ink = dark ? STACK_DARK_INK : STACK_INK
+    const gradient = context.createRadialGradient(x, y, 0, x, y, Math.max(width, height) / 2)
+    gradient.addColorStop(0, ink.inner)
+    gradient.addColorStop(1, ink.outer)
+    return gradient
+  }
+  let lastProgress = -1
+  let lastCompact = false
+  let lastLabel = -1
+  let lastDark = false
+  const draw = (progress: number, compact = false, labelProgress = 1, dark = false) => {
+    const next = Math.round(progress * 240) / 240
+    const label = Math.round(labelProgress * 240) / 240
+    if (
+      next === lastProgress &&
+      compact === lastCompact &&
+      label === lastLabel &&
+      dark === lastDark
+    )
+      return
+    lastDark = dark
+    lastLabel = label
+    lastProgress = next
+    lastCompact = compact
+    context.resetTransform()
+    context.clearRect(0, 0, canvas.width, canvas.height)
+    context.scale(options.size / 360, options.size / 360)
+    context.lineCap = 'round'
+    context.lineJoin = 'round'
+    context.save()
+    if (isWordmark) {
+      context.translate(
+        STACK_ENGRAVING.x - (WORDMARK_VIEW_BOX.width * STACK_ENGRAVING.wordmarkScale) / 2,
+        STACK_ENGRAVING.y - (WORDMARK_VIEW_BOX.height * STACK_ENGRAVING.wordmarkScale) / 2
+      )
+      context.scale(STACK_ENGRAVING.wordmarkScale, STACK_ENGRAVING.wordmarkScale)
+      context.fillStyle = createInkGradient(
+        WORDMARK_VIEW_BOX.width / 2,
+        WORDMARK_VIEW_BOX.height / 2,
+        WORDMARK_VIEW_BOX.width,
+        WORDMARK_VIEW_BOX.height,
+        dark
+      )
+      context.strokeStyle = context.fillStyle
+      context.lineWidth = 2.8
+    } else {
+      context.translate(STACK_ENGRAVING.x, STACK_ENGRAVING.y)
+      context.scale(STACK_ENGRAVING.scale, STACK_ENGRAVING.scale)
+      context.strokeStyle = createInkGradient(
+        0,
+        0,
+        STACK_ENGRAVING.gradientRadius * 2,
+        STACK_ENGRAVING.gradientRadius * 2,
+        dark
+      )
+      context.lineWidth = compact ? 6.4 : 4
+    }
+    paths.forEach(({ path, length, fade }, pathIndex) => {
+      const drawn = getStrokeProgress(next, pathIndex, paths.length)
+      if (drawn === 0) return
+      context.save()
+      if (fade) {
+        const ink = dark ? STACK_DARK_INK : STACK_INK
+        const gradient = context.createLinearGradient(fade.x1, fade.y1, fade.x2, fade.y2)
+        gradient.addColorStop(0, ink.outer)
+        gradient.addColorStop(1, `${ink.outer}00`)
+        context.strokeStyle = gradient
+      }
+      context.setLineDash([length, length])
+      context.lineDashOffset = length * (1 - drawn)
+      context.stroke(path)
+      if (isWordmark && next > 0.85) {
+        context.globalAlpha = (next - 0.85) / 0.15
+        context.fill(path)
+        context.globalAlpha = 1
+      }
+      context.restore()
+    })
+    context.restore()
+    if (!isWordmark && label > 0) {
+      context.font = `400 17px ${fontFamily}`
+      context.textAlign = 'center'
+      context.globalAlpha = label * label * (3 - 2 * label)
+      const title = STACK_LAYERS[index].title
+      const metrics = context.measureText(title)
+      const width = metrics.width
+      context.fillStyle = createInkGradient(
+        STACK_ENGRAVING.x,
+        STACK_ENGRAVING.labelY +
+          (metrics.actualBoundingBoxDescent - metrics.actualBoundingBoxAscent) / 2,
+        width,
+        metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent,
+        dark
+      )
+      context.fillText(title, STACK_ENGRAVING.x, STACK_ENGRAVING.labelY)
+      if (label < 1) {
+        const sweep = STACK_ENGRAVING.x - width * 0.8 + label * width * 1.6
+        const shimmer = context.createLinearGradient(
+          sweep - width * 0.25,
+          0,
+          sweep + width * 0.25,
+          0
+        )
+        shimmer.addColorStop(0, 'rgba(217, 222, 229, 0)')
+        shimmer.addColorStop(0.5, '#d9dee5')
+        shimmer.addColorStop(1, 'rgba(217, 222, 229, 0)')
+        context.fillStyle = shimmer
+        context.fillText(title, STACK_ENGRAVING.x, STACK_ENGRAVING.labelY)
+      }
+    }
+    context.globalAlpha = 1
+    texture.needsUpdate = true
+  }
+  draw(0, false, 0)
+  return { texture, draw }
+}
diff --git a/apps/sim/app/(landing)/components/sim-stack/stack-fallback.tsx b/apps/sim/app/(landing)/components/sim-stack/stack-fallback.tsx
new file mode 100644
index 00000000000..87e57019bf3
--- /dev/null
+++ b/apps/sim/app/(landing)/components/sim-stack/stack-fallback.tsx
@@ -0,0 +1,254 @@
+import { useId } from 'react'
+import { WORDMARK_PATHS, WORDMARK_VIEW_BOX } from '@/lib/branding/wordmark'
+import { STACK_LAYERS } from '@/app/(landing)/components/sim-stack/stack-content'
+import {
+  SLAB,
+  STACK_DARK_INK,
+  STACK_ENGRAVING,
+  STACK_INK,
+} from '@/app/(landing)/components/sim-stack/stack-layout'
+import { getStrokeProgress, STACK_MOTIFS } from '@/app/(landing)/components/sim-stack/stack-motifs'
+import {
+  getStackAssemblyProgress,
+  getStackLayerProgress,
+  getStackSpacing,
+  getStackSurfaceProgress,
+} from '@/app/(landing)/components/sim-stack/stack-timeline'
+
+interface StackArtworkProps {
+  progress: number
+  active: number
+  dark?: boolean
+}
+interface PlaneContentProps {
+  index: number
+  drawing: number
+  label: number
+  dark: boolean
+}
+
+/** One centered name and one abstract motif replace miniature product screens. */
+function PlaneContent({ index, drawing, label, dark }: PlaneContentProps) {
+  const shimmerId = useId()
+  const inkId = `${shimmerId}-ink`
+  const ink = dark ? STACK_DARK_INK : STACK_INK
+  if (index === 5) {
+    return (
+      <svg
+        x={STACK_ENGRAVING.x - (WORDMARK_VIEW_BOX.width * STACK_ENGRAVING.wordmarkScale) / 2}
+        y={STACK_ENGRAVING.y - (WORDMARK_VIEW_BOX.height * STACK_ENGRAVING.wordmarkScale) / 2}
+        width={WORDMARK_VIEW_BOX.width * STACK_ENGRAVING.wordmarkScale}
+        height={WORDMARK_VIEW_BOX.height * STACK_ENGRAVING.wordmarkScale}
+        viewBox={`0 0 ${WORDMARK_VIEW_BOX.width} ${WORDMARK_VIEW_BOX.height}`}
+      >
+        <defs>
+          <radialGradient id={inkId}>
+            <stop stopColor={ink.inner} />
+            <stop offset='1' stopColor={ink.outer} />
+          </radialGradient>
+        </defs>
+        {WORDMARK_PATHS.map((d, pathIndex) => (
+          <path
+            key={`${pathIndex}-${d}`}
+            d={d}
+            fill={`url(#${inkId})`}
+            fillOpacity={Math.max(0, (drawing - 0.85) / 0.15)}
+            stroke={`url(#${inkId})`}
+            strokeWidth='2.8'
+            pathLength='1'
+            strokeDasharray='1 1'
+            strokeDashoffset={1 - getStrokeProgress(drawing, pathIndex, WORDMARK_PATHS.length)}
+          />
+        ))}
+      </svg>
+    )
+  }
+
+  return (
+    <g>
+      <g
+        transform={`translate(${STACK_ENGRAVING.x} ${STACK_ENGRAVING.y}) scale(${STACK_ENGRAVING.scale})`}
+        fill='none'
+        strokeWidth='4'
+        className='[--motif-stroke:6.4] md:[--motif-stroke:4]'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      >
+        <defs>
+          {STACK_MOTIFS[index].map(({ d, x, y, scale, fade }, pathIndex) =>
+            fade ? (
+              <linearGradient
+                key={`${pathIndex}-${d}`}
+                id={`${inkId}-motif-${pathIndex}`}
+                gradientUnits='userSpaceOnUse'
+                x1={fade.x1}
+                y1={fade.y1}
+                x2={fade.x2}
+                y2={fade.y2}
+              >
+                <stop stopColor={ink.outer} />
+                <stop offset='1' stopColor={ink.outer} stopOpacity='0' />
+              </linearGradient>
+            ) : (
+              <radialGradient
+                key={`${pathIndex}-${d}`}
+                id={`${inkId}-motif-${pathIndex}`}
+                gradientUnits='userSpaceOnUse'
+                cx={-x / scale}
+                cy={-y / scale}
+                r={STACK_ENGRAVING.gradientRadius / scale}
+              >
+                <stop stopColor={ink.inner} />
+                <stop offset='1' stopColor={ink.outer} />
+              </radialGradient>
+            )
+          )}
+        </defs>
+        {STACK_MOTIFS[index].map(({ d, x, y, scale }, pathIndex) => (
+          <path
+            key={`${pathIndex}-${d}`}
+            d={d}
+            transform={`translate(${x} ${y}) scale(${scale})`}
+            stroke={`url(#${inkId}-motif-${pathIndex})`}
+            strokeWidth={`calc(var(--motif-stroke) / ${scale})`}
+            pathLength='1'
+            strokeDasharray='1 1'
+            strokeDashoffset={1 - getStrokeProgress(drawing, pathIndex, STACK_MOTIFS[index].length)}
+          />
+        ))}
+      </g>
+      <defs>
+        <radialGradient id={inkId}>
+          <stop stopColor={ink.inner} />
+          <stop offset='1' stopColor={ink.outer} />
+        </radialGradient>
+        <linearGradient
+          id={shimmerId}
+          gradientUnits='userSpaceOnUse'
+          x1={60 + label * 240 - 40}
+          x2={60 + label * 240 + 40}
+        >
+          <stop stopColor='var(--text-primary)' />
+          <stop offset='.5' stopColor='var(--surface-2)' />
+          <stop offset='1' stopColor='var(--text-primary)' />
+        </linearGradient>
+      </defs>
+      <text
+        opacity={label * label * (3 - 2 * label)}
+        x={STACK_ENGRAVING.x}
+        y={STACK_ENGRAVING.labelY}
+        textAnchor='middle'
+        fontSize='18'
+        fill={label < 1 ? `url(#${shimmerId})` : `url(#${inkId})`}
+        stroke='none'
+        letterSpacing='-0.3'
+      >
+        {STACK_LAYERS[index].title}
+      </text>
+    </g>
+  )
+}
+
+/** Vector metal plates preserve the stack when WebGL is unavailable. */
+export function StackFallback({ progress, active, dark = false }: StackArtworkProps) {
+  const id = useId().replaceAll(':', '')
+  const cornerRadius = (SLAB.cornerRadius / SLAB.width) * 360
+  const spacing = getStackSpacing(progress)
+  const foundation = getStackSurfaceProgress(progress, 0)
+  const base = 245 + getStackAssemblyProgress(progress) * 27 * spacing
+  return (
+    <svg
+      viewBox='67.5 0 1000 800'
+      fill='none'
+      aria-hidden='true'
+      focusable='false'
+      className='size-full overflow-visible'
+    >
+      <defs>
+        <linearGradient id={`${id}-face`} x1='0' y1='0' x2='1' y2='1'>
+          <stop stopColor={dark ? '#585858' : 'var(--surface-2)'} />
+          <stop offset='.48' stopColor={dark ? '#4b4b4b' : 'var(--surface-3)'} />
+          <stop offset='1' stopColor={dark ? '#3f3f3f' : 'var(--surface-6)'} />
+        </linearGradient>
+        <linearGradient id={`${id}-edge`} x1='0' y1='0' x2='0' y2='1'>
+          <stop stopColor={dark ? '#6b6b6b' : 'var(--surface-2)'} stopOpacity={dark ? 1 : 0.45} />
+          <stop
+            offset='1'
+            stopColor={dark ? '#2a2a2a' : 'var(--text-secondary)'}
+            stopOpacity={dark ? 1 : 0.12}
+          />
+        </linearGradient>
+        <radialGradient id={`${id}-ground`}>
+          <stop
+            stopColor={dark ? '#000000' : 'var(--text-primary)'}
+            stopOpacity={dark ? 0.4 : 0.12}
+          />
+          <stop offset='1' stopColor={dark ? '#000000' : 'var(--text-primary)'} stopOpacity='0' />
+        </radialGradient>
+      </defs>
+      <ellipse
+        opacity={foundation.fill}
+        cx='563'
+        cy={base + 300}
+        rx='340'
+        ry='90'
+        fill={`url(#${id}-ground)`}
+      />
+      {STACK_LAYERS.map((layer, index) => {
+        const surface = getStackSurfaceProgress(progress, index)
+        const { entrance, drawing } = getStackLayerProgress(progress, index)
+        const eased = entrance * entrance * (3 - 2 * entrance)
+        const y = base - index * 52 * spacing - (1 - eased) * 160
+        return (
+          <g key={layer.id} data-stack-plane={layer.id} transform={`translate(0 ${y})`}>
+            <g opacity={surface.fill}>
+              <rect
+                transform='matrix(.82 .41 -.82 .41 567.5 13)'
+                width='360'
+                height='360'
+                rx={cornerRadius}
+                fill={`url(#${id}-edge)`}
+                stroke='var(--text-secondary)'
+                strokeWidth='.8'
+              />
+              <g
+                transform='matrix(.82 .41 -.82 .41 567.5 0)'
+                stroke='var(--text-secondary)'
+                strokeWidth={active === index ? 1.2 : 0.75}
+              >
+                <rect width='360' height='360' rx={cornerRadius} fill={`url(#${id}-face)`} />
+                <rect
+                  x='6'
+                  y='6'
+                  width='348'
+                  height='348'
+                  rx={cornerRadius - 6}
+                  fill='none'
+                  stroke='var(--surface-2)'
+                  strokeOpacity='.7'
+                />
+                <g>
+                  <PlaneContent index={index} drawing={drawing} label={surface.label} dark={dark} />
+                </g>
+              </g>
+            </g>
+            {index === 0 && surface.fill < 1 && (
+              <rect
+                transform='matrix(.82 .41 -.82 .41 567.5 0)'
+                width='360'
+                height='360'
+                rx={cornerRadius}
+                stroke='var(--text-secondary)'
+                strokeWidth='1'
+                opacity={1 - surface.fill}
+                pathLength='1'
+                strokeDasharray='1 1'
+                strokeDashoffset={1 - surface.outline}
+              />
+            )}
+          </g>
+        )
+      })}
+    </svg>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/sim-stack/stack-hit-testing.test.ts b/apps/sim/app/(landing)/components/sim-stack/stack-hit-testing.test.ts
new file mode 100644
index 00000000000..6cc4f214d65
--- /dev/null
+++ b/apps/sim/app/(landing)/components/sim-stack/stack-hit-testing.test.ts
@@ -0,0 +1,59 @@
+/**
+ * @vitest-environment node
+ */
+import { describe, expect, it } from 'vitest'
+import {
+  distanceToSegment,
+  isFrontFacingEdge,
+  pickLayerEdge,
+} from '@/app/(landing)/components/sim-stack/stack-hit-testing'
+
+describe('stack edge targets', () => {
+  const bands = (y: number) =>
+    Array.from({ length: 6 }, (_, index) => ({ index, distance: Math.abs(y - (100 - index * 20)) }))
+
+  it('selects every layer immediately in either direction', () => {
+    let active: number | null = null
+    for (const index of [5, 4, 3, 2, 1, 0, 1, 2, 3, 4, 5]) {
+      active = pickLayerEdge(bands(100 - index * 20), active)
+      expect(active).toBe(index)
+    }
+  })
+
+  it('keeps the current selection through small boundary jitter in both directions', () => {
+    expect(pickLayerEdge(bands(90), 0)).toBe(0)
+    expect(pickLayerEdge(bands(89.5), 0)).toBe(0)
+    expect(pickLayerEdge(bands(88), 0)).toBe(1)
+    expect(pickLayerEdge(bands(90.5), 1)).toBe(1)
+    expect(pickLayerEdge(bands(92), 1)).toBe(0)
+  })
+
+  it('accepts nearby cursor positions but releases outside the edge band', () => {
+    expect(pickLayerEdge(bands(113), null)).toBe(0)
+    expect(pickLayerEdge(bands(115), 0)).toBeNull()
+  })
+
+  it('measures diagonal edges and clamps at their endpoints', () => {
+    expect(distanceToSegment({ x: 5, y: 5 }, { x: 0, y: 0 }, { x: 10, y: 10 })).toBe(0)
+    expect(distanceToSegment({ x: 13, y: 14 }, { x: 0, y: 0 }, { x: 10, y: 10 })).toBe(5)
+    expect(distanceToSegment({ x: 3, y: 4 }, { x: 0, y: 0 }, { x: 0, y: 0 })).toBe(5)
+  })
+})
+
+describe('front-facing stack edges', () => {
+  const view = { x: 10, z: 13 }
+
+  it('accepts the front and right rims and rejects the rear and left rims', () => {
+    expect(isFrontFacingEdge({ x: -2, z: 2 }, { x: 2, z: 2 }, view)).toBe(true)
+    expect(isFrontFacingEdge({ x: 2, z: 2 }, { x: 2, z: -2 }, view)).toBe(true)
+    expect(isFrontFacingEdge({ x: 2, z: -2 }, { x: -2, z: -2 }, view)).toBe(false)
+    expect(isFrontFacingEdge({ x: -2, z: -2 }, { x: -2, z: 2 }, view)).toBe(false)
+  })
+
+  it('follows camera rotation and excludes edge-on or degenerate segments', () => {
+    expect(isFrontFacingEdge({ x: 2, z: 2 }, { x: 2, z: -2 }, { x: -10, z: 13 })).toBe(false)
+    expect(isFrontFacingEdge({ x: -2, z: -2 }, { x: -2, z: 2 }, { x: -10, z: 13 })).toBe(true)
+    expect(isFrontFacingEdge({ x: 0, z: 0 }, { x: 10, z: 13 }, view)).toBe(false)
+    expect(isFrontFacingEdge({ x: 1, z: 1 }, { x: 1, z: 1 }, view)).toBe(false)
+  })
+})
diff --git a/apps/sim/app/(landing)/components/sim-stack/stack-hit-testing.ts b/apps/sim/app/(landing)/components/sim-stack/stack-hit-testing.ts
new file mode 100644
index 00000000000..4aaa7eebf99
--- /dev/null
+++ b/apps/sim/app/(landing)/components/sim-stack/stack-hit-testing.ts
@@ -0,0 +1,47 @@
+interface ScreenPoint {
+  x: number
+  y: number
+}
+
+interface PlanePoint {
+  x: number
+  z: number
+}
+
+/** The slab outline winds clockwise from above; its outward normal must face the camera. */
+export function isFrontFacingEdge(start: PlanePoint, end: PlanePoint, towardCamera: PlanePoint) {
+  return -(end.z - start.z) * towardCamera.x + (end.x - start.x) * towardCamera.z > 0
+}
+
+interface LayerEdgeHit {
+  index: number
+  distance: number
+}
+
+/** Measure in screen pixels so narrow plane edges remain equally reachable at every size. */
+export function distanceToSegment(point: ScreenPoint, start: ScreenPoint, end: ScreenPoint) {
+  const dx = end.x - start.x
+  const dy = end.y - start.y
+  const lengthSquared = dx * dx + dy * dy
+  const t = lengthSquared
+    ? Math.max(
+        0,
+        Math.min(1, ((point.x - start.x) * dx + (point.y - start.y) * dy) / lengthSquared)
+      )
+    : 0
+  return Math.hypot(point.x - start.x - t * dx, point.y - start.y - t * dy)
+}
+
+/** Use the same forgiving edge bands in both directions, with a small spatial deadband. */
+export function pickLayerEdge(hits: LayerEdgeHit[], active: number | null) {
+  const nearest = hits.reduce<LayerEdgeHit | null>(
+    (best, hit) => (hit.distance <= 14 && (!best || hit.distance < best.distance) ? hit : best),
+    null
+  )
+  if (!nearest) return null
+  const current = hits.find((hit) => hit.index === active)
+  if (current && current.distance <= 14 && current.distance <= nearest.distance + 1.5) {
+    return current.index
+  }
+  return nearest.index
+}
diff --git a/apps/sim/app/(landing)/components/sim-stack/stack-intro.tsx b/apps/sim/app/(landing)/components/sim-stack/stack-intro.tsx
new file mode 100644
index 00000000000..8bbf9fa93aa
--- /dev/null
+++ b/apps/sim/app/(landing)/components/sim-stack/stack-intro.tsx
@@ -0,0 +1,91 @@
+'use client'
+
+import { useId } from 'react'
+import { cn } from '@sim/emcn'
+import { WORDMARK_PATHS, WORDMARK_VIEW_BOX } from '@/lib/branding/wordmark'
+import { LandingCtaLink } from '@/app/(landing)/components/landing-cta-link'
+import {
+  HOME_TYPE,
+  LANDING_CONTENT_WIDTH,
+  LANDING_GUTTER,
+} from '@/app/(landing)/components/landing-layout'
+import { STACK_LAYERS } from '@/app/(landing)/components/sim-stack/stack-content'
+import { getStackLayerProgress } from '@/app/(landing)/components/sim-stack/stack-timeline'
+import { SIGNUP_HREF } from '@/app/(landing)/constants'
+
+interface StackIntroProps {
+  progress: number
+}
+
+/** The heading remains above the arriving planes; supporting copy fades once exploration begins. */
+export function StackIntro({ progress }: StackIntroProps) {
+  const wordmarkInkId = useId()
+  const showCta = getStackLayerProgress(progress, STACK_LAYERS.length - 1).entrance > 0
+  return (
+    <div
+      className={cn(
+        'pointer-events-none absolute inset-x-0 top-8 z-10 flex flex-col items-center gap-6 text-center max-sm:top-6 max-sm:gap-4',
+        LANDING_CONTENT_WIDTH,
+        LANDING_GUTTER
+      )}
+    >
+      <h2
+        id='sim-stack-heading'
+        className={cn('text-balance text-[var(--text-primary)]', HOME_TYPE.h2Display)}
+      >
+        Introducing <span className='sr-only'>Sim</span>
+        <svg
+          aria-hidden='true'
+          focusable='false'
+          viewBox={`0 0 ${WORDMARK_VIEW_BOX.width} ${WORDMARK_VIEW_BOX.height}`}
+          className='inline-block h-[0.78em] w-auto align-baseline'
+        >
+          <defs>
+            <radialGradient id={wordmarkInkId} cx='50%' cy='50%' r='50%'>
+              <stop className='[stop-color:var(--thinking-ink-inner)]' />
+              <stop offset='1' className='[stop-color:var(--thinking-ink-outer)]' />
+            </radialGradient>
+          </defs>
+          <g fill={`url(#${wordmarkInkId})`}>
+            {WORDMARK_PATHS.map((path) => (
+              <path key={path} d={path} />
+            ))}
+          </g>
+        </svg>
+      </h2>
+      <div className='grid w-full justify-items-center'>
+        <p
+          data-stack-intro-copy
+          className={cn(
+            'col-start-1 row-start-1 max-w-[48rem] text-balance text-[var(--text-body)] transition-opacity duration-300 motion-reduce:transition-none',
+            HOME_TYPE.body,
+            progress > 0.18 && 'opacity-0',
+            showCta && 'invisible'
+          )}
+        >
+          The complete stack for AI agents. From your data and models to the workflows they power,
+          all built on a foundation of control.
+        </p>
+        <div
+          data-stack-completion-cta
+          inert={!showCta}
+          aria-hidden={!showCta}
+          className={cn(
+            'col-start-1 row-start-1 transition-opacity duration-300 motion-reduce:transition-none',
+            showCta ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'
+          )}
+        >
+          <LandingCtaLink
+            variant='outline'
+            size='display'
+            href={SIGNUP_HREF}
+            prefetch={false}
+            withArrow
+          >
+            Start building
+          </LandingCtaLink>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/sim-stack/stack-layout.ts b/apps/sim/app/(landing)/components/sim-stack/stack-layout.ts
new file mode 100644
index 00000000000..628fd171cd4
--- /dev/null
+++ b/apps/sim/app/(landing)/components/sim-stack/stack-layout.ts
@@ -0,0 +1,23 @@
+export const SLAB = {
+  width: 5.6,
+  depth: 5.6,
+  cornerRadius: 1.1,
+  thickness: 0.13,
+  bevel: 0.045,
+  gap: 0.72,
+} as const
+export const STACK_CAMERA = { x: 10, y: 10, z: 13 } as const
+
+/** Artwork centers on the 360 × 360 plane, with its caption below. */
+export const STACK_ENGRAVING = {
+  x: 180,
+  y: 180,
+  scale: 0.25,
+  gradientRadius: 240,
+  labelY: 270,
+  wordmarkScale: 0.2,
+} as const
+
+/** Charcoal engravings on silver planes; silver engravings on graphite planes. */
+export const STACK_INK = { inner: '#2c2c2c', outer: '#5f5f5f' } as const
+export const STACK_DARK_INK = { inner: '#a7a7a7', outer: '#d6d6d6' } as const
diff --git a/apps/sim/app/(landing)/components/sim-stack/stack-motifs.ts b/apps/sim/app/(landing)/components/sim-stack/stack-motifs.ts
new file mode 100644
index 00000000000..cbc54931e09
--- /dev/null
+++ b/apps/sim/app/(landing)/components/sim-stack/stack-motifs.ts
@@ -0,0 +1,102 @@
+import { CLAUDE_MARK_PATH, GEMINI_MARK_PATH, OPENAI_MARK_PATH, XAI_MARK_POLYGONS } from '@sim/emcn'
+import {
+  ISO_INTEGRATE_PATHS,
+  ISO_MONITOR_PATHS,
+} from '@/app/(landing)/components/platform-suite/components/iso-marks/iso-mark-paths'
+
+/** Draw the existing housing base first, followed by its inner plates and open panels. */
+const GOVERNANCE = [0, 1, 2, 3, 5, 6, 7, 4, 8].map((index) => ISO_MONITOR_PATHS[index])
+const DATA = [0, 3, 1, 2, 4, 5].map((index) => ISO_INTEGRATE_PATHS[index])
+
+/** Simple outline marks sit directly on the slab's grid, without miniature bases or housings. */
+export interface StackMotif {
+  d: string
+  x: number
+  y: number
+  scale: number
+  fade?: { x1: number; y1: number; x2: number; y2: number }
+}
+
+/** Normalize the existing provider artwork into four evenly sized, unfilled marks. */
+const MODELS: StackMotif[] = [
+  { d: CLAUDE_MARK_PATH, x: -170, y: -170, scale: 1.32 },
+  { d: OPENAI_MARK_PATH, x: 38, y: -170, scale: 5.5 },
+  {
+    d: XAI_MARK_POLYGONS.map((points) => `M${points.split(' ').join('L')}Z`).join(''),
+    x: -104 - 420.945 * (132 / 481.45),
+    y: 104 - 297.635 * (132 / 481.45),
+    scale: 132 / 481.45,
+  },
+  { d: GEMINI_MARK_PATH, x: 38, y: 38, scale: 5.5 },
+]
+
+/** Selected workflow card: rounded body, connection swells, and the action-menu shoulder profile. */
+const WORKFLOW_NODE = [
+  'M-174 -76H174Q200 -76 200 -50V78Q200 104 174 104H-174Q-200 104 -200 78V-50Q-200 -76 -174 -76Z',
+  'M-136 -76C-132.43 -76.15 -126.67 -77.73 -118.73 -89.22C-97.49 -120 -97.59 -120 -88 -120H130C139.59 -120 139.49 -120 160.73 -89.22C168.67 -77.73 174.43 -76.15 178 -76',
+  'M-200 -14C-200 -8 -212 -8 -212 0V24C-212 32 -200 32 -200 38M-212 12H-246',
+  'M200 -14C200 -8 212 -8 212 0V24C212 32 200 32 200 38M212 12H246',
+] as const
+
+/** Outlines from the workflow action bar's EMCN PlayOutline, Circle, Unlock, Duplicate, and Trash glyphs. */
+const WORKFLOW_ACTIONS = [
+  'M14.26 5.39C16.17 6.48 17.67 7.33 18.73 8.11C19.81 8.89 20.6 9.71 20.89 10.79C21.09 11.58 21.09 12.42 20.89 13.21C20.6 14.29 19.81 15.11 18.73 15.89C17.67 16.67 16.17 17.52 14.26 18.61C12.42 19.65 10.87 20.53 9.69 21.04C8.51 21.54 7.42 21.8 6.37 21.5C5.6 21.28 4.89 20.86 4.33 20.29C3.56 19.51 3.25 18.44 3.1 17.15C2.96 15.87 2.96 14.19 2.96 12.06V11.94C2.96 9.81 2.96 8.13 3.1 6.85C3.25 5.56 3.56 4.49 4.33 3.71C4.89 3.14 5.6 2.72 6.37 2.5C7.42 2.2 8.51 2.46 9.69 2.96C10.87 3.47 12.42 4.35 14.26 5.39Z',
+  'M19.25 9.75A9 9 0 1 1 1.25 9.75A9 9 0 1 1 19.25 9.75Z',
+  'M4.75 8.75H15.75Q17.75 8.75 17.75 10.75V16.75Q17.75 18.75 15.75 18.75H4.75Q2.75 18.75 2.75 16.75V10.75Q2.75 8.75 4.75 8.75ZM5.75 8.75V5.75C5.75 3.26 7.76 1.25 10.25 1.25C12.74 1.25 14.75 3.26 14.75 5.75',
+  'M14.25 0.75H2.75C1.65 0.75 0.75 1.65 0.75 2.75V14.25M7.25 5.25H17.25Q19.25 5.25 19.25 7.25V17.25Q19.25 19.25 17.25 19.25H7.25Q5.25 19.25 5.25 17.25V7.25Q5.25 5.25 7.25 5.25Z',
+  'M0.75 4.75H19.75M3.25 4.75V16.25C3.25 17.63 4.37 18.75 5.75 18.75H14.75C16.13 18.75 17.25 17.63 17.25 16.25V4.75M7.25 4.75V3.25C7.25 2.15 8.15 1.25 9.25 1.25H11.25C12.35 1.25 13.25 2.15 13.25 3.25V4.75',
+] as const
+
+const WORKFLOW_PLACEHOLDERS = ['M-150 -28H-20', 'M-150 28H70'] as const
+
+const AGENTS: StackMotif[] = [
+  ...outlinePaths(WORKFLOW_NODE).map((motif) => ({ ...motif, y: -50, scale: 1.12 })),
+  ...WORKFLOW_ACTIONS.map((d, index) => ({
+    d,
+    x: (-77 + index * 46) * 1.12,
+    y: -113 * 1.12 - 50,
+    scale: 1.2 * 1.12,
+  })),
+  ...WORKFLOW_PLACEHOLDERS.map((d) => ({ d, x: 0, y: -50, scale: 1.12 })),
+  {
+    d: 'M-275.52 -36.56H-420',
+    x: 0,
+    y: 0,
+    scale: 1,
+    fade: { x1: -275.52, y1: -36.56, x2: -420, y2: -36.56 },
+  },
+  {
+    d: 'M275.52 -36.56H420',
+    x: 0,
+    y: 0,
+    scale: 1,
+    fade: { x1: 275.52, y1: -36.56, x2: 420, y2: -36.56 },
+  },
+]
+
+const OBSERVABILITY = [
+  'M-175 0C-130 -80 -65 -115 0 -115C65 -115 130 -80 175 0C130 80 65 115 0 115C-65 115 -130 80 -175 0Z',
+  'M56 0A56 56 0 1 1 -56 0A56 56 0 1 1 56 0Z',
+] as const
+
+function outlinePaths(paths: readonly string[]): StackMotif[] {
+  return paths.map((d) => ({ d, x: 0, y: 0, scale: 1 }))
+}
+
+export const STACK_MOTIFS: readonly (readonly StackMotif[])[] = [
+  outlinePaths(GOVERNANCE),
+  outlinePaths(DATA),
+  MODELS.map(({ d, x, y, scale }) => ({
+    d,
+    x: x * 1.4,
+    y: y * 1.4,
+    scale: scale * 1.4,
+  })),
+  AGENTS,
+  outlinePaths(OBSERVABILITY),
+]
+
+/** All renderers use the same base-to-detail stroke timing. */
+export function getStrokeProgress(progress: number, index: number, count: number) {
+  return Math.min(1, Math.max(0, (progress * (count + 0.3) - index) / 1.3))
+}
diff --git a/apps/sim/app/(landing)/components/sim-stack/stack-player.tsx b/apps/sim/app/(landing)/components/sim-stack/stack-player.tsx
new file mode 100644
index 00000000000..fbcd99b82c5
--- /dev/null
+++ b/apps/sim/app/(landing)/components/sim-stack/stack-player.tsx
@@ -0,0 +1,74 @@
+'use client'
+
+import { cn } from '@sim/emcn'
+import { Pause, Play, RefreshCw } from '@sim/emcn/icons'
+import { STACK_LAYERS } from '@/app/(landing)/components/sim-stack/stack-content'
+import { STACK_PLAYBACK_END } from '@/app/(landing)/components/sim-stack/stack-timeline'
+
+interface StackPlayerProps {
+  progress: number
+  isPlaying: boolean
+  onToggle: () => void
+  onSelect: (index: number) => void
+}
+
+/** A compact, seekable step track follows the scene's scroll and playback progress. */
+export function StackPlayer({ progress, isPlaying, onToggle, onSelect }: StackPlayerProps) {
+  const complete = progress >= STACK_PLAYBACK_END - 0.01
+  const active = Math.min(STACK_LAYERS.length - 1, Math.floor(progress))
+  const Icon = complete && !isPlaying ? RefreshCw : isPlaying ? Pause : Play
+  const controlLabel = isPlaying
+    ? 'Pause animation'
+    : complete
+      ? 'Replay animation'
+      : 'Play animation'
+  return (
+    <div role='group' aria-label='Sim stack playback' className='flex items-center gap-2'>
+      <div className='flex h-11 items-center rounded-full border border-[var(--border)] bg-transparent px-3'>
+        {STACK_LAYERS.map((layer, index) => {
+          const expanded = !complete && index === active
+          const fill = complete || index < active ? 1 : index > active ? 0 : progress - index
+          return (
+            <button
+              key={layer.id}
+              type='button'
+              aria-label={`Go to ${layer.title}`}
+              aria-current={index === active ? 'step' : undefined}
+              aria-controls='sim-stack-artwork'
+              onClick={() => onSelect(index)}
+              className={cn(
+                'flex h-full shrink-0 items-center justify-center rounded-full text-[var(--text-body)] outline-offset-2 transition-[width] duration-300 ease-out focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--text-primary)] motion-reduce:transition-none',
+                expanded ? 'w-16' : 'w-6'
+              )}
+            >
+              <svg
+                aria-hidden='true'
+                viewBox='0 0 44 6'
+                className={cn(
+                  'h-1.5 overflow-hidden rounded-full transition-[width] duration-300 ease-out motion-reduce:transition-none',
+                  expanded ? 'w-11' : 'w-1.5'
+                )}
+                preserveAspectRatio='none'
+              >
+                <rect width='44' height='6' className='fill-[var(--text-muted)] opacity-30' />
+                <rect width={44 * Math.min(1, Math.max(0, fill))} height='6' fill='currentColor' />
+              </svg>
+            </button>
+          )
+        })}
+      </div>
+      <button
+        type='button'
+        aria-label={controlLabel}
+        aria-controls='sim-stack-artwork'
+        onClick={onToggle}
+        className='flex size-11 shrink-0 items-center justify-center rounded-full border border-[var(--border)] bg-transparent text-[var(--text-body)] outline-offset-4 transition-colors hover:border-[var(--text-secondary)] hover:text-[var(--text-primary)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--text-primary)]'
+      >
+        <Icon
+          aria-hidden='true'
+          className={cn('size-4', !isPlaying && !complete && 'translate-x-px')}
+        />
+      </button>
+    </div>
+  )
+}
diff --git a/apps/sim/app/(landing)/components/sim-stack/stack-scene.ts b/apps/sim/app/(landing)/components/sim-stack/stack-scene.ts
new file mode 100644
index 00000000000..4273dd0faa9
--- /dev/null
+++ b/apps/sim/app/(landing)/components/sim-stack/stack-scene.ts
@@ -0,0 +1,429 @@
+import {
+  ACESFilmicToneMapping,
+  type BufferGeometry,
+  CanvasTexture,
+  DirectionalLight,
+  HemisphereLight,
+  Line,
+  type Material,
+  Mesh,
+  MeshBasicMaterial,
+  OrthographicCamera,
+  PCFShadowMap,
+  PlaneGeometry,
+  PMREMGenerator,
+  RectAreaLight,
+  Scene,
+  Texture,
+  Vector3,
+  WebGLRenderer,
+} from 'three'
+import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js'
+import { RectAreaLightUniformsLib } from 'three/addons/lights/RectAreaLightUniformsLib.js'
+import { STACK_LAYERS } from '@/app/(landing)/components/sim-stack/stack-content'
+import {
+  distanceToSegment,
+  isFrontFacingEdge,
+  pickLayerEdge,
+} from '@/app/(landing)/components/sim-stack/stack-hit-testing'
+import { SLAB, STACK_CAMERA } from '@/app/(landing)/components/sim-stack/stack-layout'
+import { createSlab, createSlabGeometry } from '@/app/(landing)/components/sim-stack/stack-slab'
+import {
+  getStackAssemblyProgress,
+  getStackLayerProgress,
+  getStackShadowStrength,
+  getStackSpacing,
+  getStackSurfaceProgress,
+  STACK_LAYER_REST,
+  STACK_PLAYBACK_END,
+} from '@/app/(landing)/components/sim-stack/stack-timeline'
+
+interface StackSceneState {
+  progress: number
+  active: number
+  dark: boolean
+}
+
+export interface StackInspection {
+  index: number
+  progress: number
+}
+
+export interface StackScene {
+  update: (state: StackSceneState) => void
+  setVisible: (visible: boolean) => void
+  dispose: () => void
+}
+
+/** A soft contact shadow grounds the stack without a long shadow across the controls. */
+function createContactShadow() {
+  const canvas = document.createElement('canvas')
+  canvas.width = 512
+  canvas.height = 512
+  const context = canvas.getContext('2d')
+  if (!context) throw new Error('Stack shadow requires a 2D canvas')
+  context.filter = 'blur(24px)'
+  context.fillStyle = '#000000'
+  context.beginPath()
+  context.roundRect(70, 70, 372, 372, (SLAB.cornerRadius / SLAB.width) * 372)
+  context.fill()
+  return new CanvasTexture(canvas)
+}
+
+/** Render on scene changes and while cursor orbit settles; release GPU resources on unmount. */
+export function createStackScene(
+  host: HTMLDivElement,
+  onContextLost: () => void,
+  onInspect: (inspection: StackInspection | null) => void
+): StackScene {
+  const renderer = new WebGLRenderer({ alpha: true, antialias: true, powerPreference: 'low-power' })
+  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
+  renderer.setClearColor(0, 0)
+  renderer.toneMapping = ACESFilmicToneMapping
+  renderer.toneMappingExposure = 1.15
+  renderer.shadowMap.enabled = true
+  renderer.shadowMap.type = PCFShadowMap
+  renderer.domElement.setAttribute('aria-hidden', 'true')
+
+  RectAreaLightUniformsLib.init()
+  const scene = new Scene()
+  const camera = new OrthographicCamera(-6, 6, 5, -5, 0.1, 100)
+  const room = new RoomEnvironment()
+  const pmrem = new PMREMGenerator(renderer)
+  const environment = pmrem.fromScene(room, 0.04)
+  scene.environment = environment.texture
+  room.dispose()
+  pmrem.dispose()
+
+  const ambient = new HemisphereLight('#ffffff', '#a8acb5', 1.2)
+  const key = new DirectionalLight('#ffffff', 3.5)
+  key.position.set(-3, 10, -5)
+  key.castShadow = true
+  key.shadow.mapSize.set(2048, 2048)
+  key.shadow.camera.left = -8
+  key.shadow.camera.right = 8
+  key.shadow.camera.top = 8
+  key.shadow.camera.bottom = -8
+  key.shadow.camera.near = 0.5
+  key.shadow.camera.far = 32
+  key.shadow.normalBias = 0.008
+  key.shadow.bias = -0.00003
+  key.shadow.radius = 28
+  const rim = new DirectionalLight('#e6edff', 1.4)
+  rim.position.set(5, 4, -5)
+  const softbox = new RectAreaLight('#ffffff', 2, 16, 10)
+  softbox.position.set(-6, 14, 6)
+  softbox.lookAt(0, 0, 0)
+  scene.add(ambient, key, rim, softbox)
+
+  const geometry = createSlabGeometry()
+  const fontFamily = getComputedStyle(host).fontFamily
+  const textureOptions = {
+    size: Math.min(host.clientWidth < 700 ? 1024 : 2048, renderer.capabilities.maxTextureSize),
+    anisotropy: Math.min(16, renderer.capabilities.getMaxAnisotropy()),
+  }
+  const slabs = STACK_LAYERS.map((_, index) =>
+    createSlab(geometry, index, fontFamily, textureOptions)
+  )
+  for (const slab of slabs) scene.add(slab.group)
+  const shadowMaterial = new MeshBasicMaterial({
+    map: createContactShadow(),
+    transparent: true,
+    opacity: 0.16,
+    depthWrite: false,
+  })
+  const ground = new Mesh(new PlaneGeometry(8, 8), shadowMaterial)
+  ground.rotation.x = -Math.PI / 2
+  ground.position.y = -0.3
+  scene.add(ground)
+
+  let state: StackSceneState = { progress: 0, active: 0, dark: false }
+  let visible = false
+  let disposed = false
+  let frame = 0
+  let width = 1
+  let height = 1
+  let topInset = 0
+  let resizePending = true
+  const pointerSurface = host.closest<HTMLElement>('[data-stack-stage]') ?? host
+  const pointerMotion = window.matchMedia(
+    '(hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference)'
+  )
+  const orbit = { x: 0, y: 0, targetX: 0, targetY: 0 }
+  const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)')
+  const ghostAmounts = slabs.map(() => 0)
+  let coverSpread = 0
+  let inspected: number | null = null
+  let previousTime = 0
+  const selectInspection = (index: number | null) => {
+    if (index === inspected) return
+    inspected = index
+    onInspect(index === null ? null : { index, progress: index + STACK_LAYER_REST })
+    pointerSurface.classList.toggle('cursor-pointer', index !== null)
+    schedule()
+  }
+  const render = (time: number) => {
+    frame = 0
+    if (disposed || !visible || document.hidden) return
+    if (resizePending) {
+      resizePending = false
+      const nextWidth = Math.max(1, host.clientWidth)
+      const nextHeight = Math.max(1, host.clientHeight)
+      const pixelRatio = Math.min(window.devicePixelRatio, 2)
+      topInset = Math.min(
+        nextHeight * 0.65,
+        Number.parseFloat(getComputedStyle(host).getPropertyValue('--stack-scene-inset')) || 0
+      )
+      if (renderer.getPixelRatio() !== pixelRatio) renderer.setPixelRatio(pixelRatio)
+      if (width !== nextWidth || height !== nextHeight) {
+        width = nextWidth
+        height = nextHeight
+        renderer.setSize(width, height, false)
+      }
+    }
+    const delta = previousTime ? Math.min((time - previousTime) / 1000, 0.05) : 1 / 60
+    const damping = 1 - Math.exp(-delta / 0.2)
+    orbit.x += (orbit.targetX - orbit.x) * damping
+    orbit.y += (orbit.targetY - orbit.y) * damping
+    const settling = Math.abs(orbit.targetX - orbit.x) + Math.abs(orbit.targetY - orbit.y) > 0.0001
+    if (!settling) {
+      orbit.x = orbit.targetX
+      orbit.y = orbit.targetY
+    }
+    const spreadTarget = inspected !== null ? 1 : 0
+    coverSpread = reducedMotion.matches
+      ? spreadTarget
+      : coverSpread + (spreadTarget - coverSpread) * damping
+    const spreading = Math.abs(coverSpread - spreadTarget) > 0.001
+    if (!spreading) coverSpread = spreadTarget
+    composePositions()
+    composeCamera()
+    composeLighting()
+    let ghostSettling = false
+    ghostAmounts.forEach((current, index) => {
+      const target = inspected !== null && index > inspected ? 1 : 0
+      const next = reducedMotion.matches
+        ? target
+        : current + (target - current) * (1 - Math.exp(-delta / 0.14))
+      ghostAmounts[index] = Math.abs(next - target) < 0.002 ? target : next
+      ghostSettling ||= ghostAmounts[index] !== target
+    })
+    slabs.forEach((slab, index) => {
+      slab.inspect(ghostAmounts[index])
+      slab.shadowStrength.value =
+        getStackShadowStrength(state.progress, index) * (1 - (ghostAmounts[index + 1] ?? 0))
+      slab.draw(
+        getStackLayerProgress(state.progress, index).drawing,
+        width < 700,
+        getStackSurfaceProgress(state.progress, index).label,
+        state.dark
+      )
+    })
+    renderer.render(scene, camera)
+    const animating = settling || spreading || ghostSettling
+    previousTime = animating ? time : 0
+    if (animating) schedule()
+  }
+  const schedule = () => {
+    if (!frame && visible && !disposed && !document.hidden) frame = requestAnimationFrame(render)
+  }
+  const getSceneSpacing = () => SLAB.gap * getStackSpacing(state.progress) + coverSpread * 0.1
+  const composePositions = () => {
+    const spacing = getSceneSpacing()
+    slabs.forEach((slab, index) => {
+      const { entrance } = getStackLayerProgress(state.progress, index)
+      const eased = entrance * entrance * (3 - 2 * entrance)
+      slab.group.position.y = index * spacing + (1 - eased) * 5.5
+      slab.group.rotation.y = (1 - eased) * -0.06
+    })
+  }
+  const composeCamera = () => {
+    const modelHeight = Math.max(1, height - topInset)
+    const aspect = width / modelHeight
+    const viewHeight =
+      Math.max(8.8 + getStackAssemblyProgress(state.progress) * 0.22, 9.4 / aspect) /
+      (width < 640 ? 1.14 : 1)
+    camera.left = (-viewHeight * aspect) / 2
+    camera.right = (viewHeight * aspect) / 2
+    camera.top = viewHeight / 2 + (topInset / modelHeight) * viewHeight
+    camera.bottom = -viewHeight / 2
+    const center =
+      (getStackAssemblyProgress(state.progress) * getSceneSpacing() + SLAB.thickness) / 2
+    const radius = Math.hypot(STACK_CAMERA.x, STACK_CAMERA.y, STACK_CAMERA.z)
+    const azimuth = Math.atan2(STACK_CAMERA.x, STACK_CAMERA.z) + orbit.x * 0.16
+    const elevation = Math.asin(STACK_CAMERA.y / radius) + orbit.y * 0.09
+    const horizontalRadius = radius * Math.cos(elevation)
+    camera.position.set(
+      horizontalRadius * Math.sin(azimuth),
+      center + radius * Math.sin(elevation),
+      horizontalRadius * Math.cos(azimuth)
+    )
+    camera.lookAt(0, center, 0)
+    camera.updateProjectionMatrix()
+  }
+  const composeLighting = () => {
+    key.position.set(-3 + orbit.x * 0.8, 10 - orbit.y * 0.4, -5 + orbit.y * 0.5)
+    key.intensity = (state.dark ? 3 : 4) * (1 + orbit.x * 0.055 - orbit.y * 0.035)
+    softbox.position.set(-6 + orbit.x * 1.6, 14 - orbit.y * 0.65, 6 + orbit.x * 0.6)
+    softbox.lookAt(0, 0, 0)
+    softbox.intensity = 2 * (1 + orbit.x * 0.12 - orbit.y * 0.06)
+    rim.position.set(5 - orbit.x * 0.8, 4 + orbit.y * 0.4, -5)
+    rim.intensity = 1.4 * (1 - orbit.x * 0.08)
+  }
+  const resize = () => {
+    resizePending = true
+    schedule()
+  }
+  const update = (next: StackSceneState) => {
+    state = next
+    if (state.progress < STACK_PLAYBACK_END - 0.01) {
+      coverSpread = 0
+      selectInspection(null)
+    }
+    const { progress, dark } = state
+    slabs.forEach((slab, index) => {
+      const { entrance } = getStackLayerProgress(progress, index)
+      const surface = getStackSurfaceProgress(progress, index)
+      slab.reveal(surface.outline, surface.fill)
+      slab.shadowStrength.value = getStackShadowStrength(progress, index)
+      slab.group.visible = entrance > 0.005
+      slab.face.color.set(dark ? '#3a3a3a' : '#f1f2f3')
+      slab.face.metalness = dark ? 0.6 : 0.4
+      slab.face.roughness = dark ? 0.36 : 0.28
+      slab.face.envMapIntensity = dark ? 0.45 : 0.65
+      slab.edge.color.set(dark ? '#4c4c4c' : '#e2e5e8')
+      slab.edge.roughness = dark ? 0.3 : 0.2
+      slab.ink.color.set('#909090')
+    })
+    ambient.groundColor.set(dark ? '#acacac' : '#a8acb5')
+    rim.color.set(dark ? '#ededed' : '#e6edff')
+    ambient.intensity = dark ? 0.6 : 0.7
+    scene.environmentIntensity = dark ? 0.65 : 0.8
+    shadowMaterial.opacity = (dark ? 0.3 : 0.16) * getStackSurfaceProgress(progress, 0).fill
+    renderer.toneMappingExposure = dark ? 0.85 : 0.95
+    composeCamera()
+    schedule()
+  }
+  const resetOrbit = () => {
+    selectInspection(null)
+    orbit.targetX = 0
+    orbit.targetY = 0
+    if (!pointerMotion.matches || !visible || document.hidden) {
+      orbit.x = 0
+      orbit.y = 0
+      previousTime = 0
+    }
+    schedule()
+  }
+  const inspectPointer = (event: PointerEvent) => {
+    if (state.progress < STACK_PLAYBACK_END - 0.01) return
+    if (event.target instanceof Element && event.target.closest('button, a')) {
+      selectInspection(null)
+      return
+    }
+    const bounds = host.getBoundingClientRect()
+    const cursor = { x: event.clientX - bounds.left, y: event.clientY - bounds.top }
+    const projected = new Vector3()
+    const world = new Vector3()
+    const previousWorld = new Vector3()
+    const towardCamera = camera.getWorldDirection(new Vector3()).negate()
+    const edgeHits = slabs.map((slab, index) => {
+      const positions = slab.outline.geometry.getAttribute('position')
+      let distance = Number.POSITIVE_INFINITY
+      let previous = { x: 0, y: 0 }
+      for (let point = 0; point < positions.count; point += 4) {
+        world.fromBufferAttribute(positions, point).applyMatrix4(slab.group.matrixWorld)
+        projected.copy(world).project(camera)
+        const current = {
+          x: ((projected.x + 1) / 2) * bounds.width,
+          y: ((1 - projected.y) / 2) * bounds.height,
+        }
+        if (point > 0 && isFrontFacingEdge(previousWorld, world, towardCamera)) {
+          distance = Math.min(distance, distanceToSegment(cursor, previous, current))
+        }
+        previousWorld.copy(world)
+        previous = current
+      }
+      return { index, distance }
+    })
+    selectInspection(pickLayerEdge(edgeHits, inspected))
+  }
+
+  const handlePointerMove = (event: PointerEvent) => {
+    if (!visible) return
+    inspectPointer(event)
+    if (!pointerMotion.matches || event.pointerType !== 'mouse') return
+    const bounds = pointerSurface.getBoundingClientRect()
+    orbit.targetX = Math.max(
+      -1,
+      Math.min(1, ((event.clientX - bounds.left) / bounds.width) * 2 - 1)
+    )
+    orbit.targetY = Math.max(
+      -1,
+      Math.min(1, ((event.clientY - bounds.top) / bounds.height) * 2 - 1)
+    )
+    schedule()
+  }
+  const handleContextLost = (event: Event) => {
+    event.preventDefault()
+    onContextLost()
+  }
+  const observer = new ResizeObserver(resize)
+  observer.observe(host)
+  renderer.domElement.addEventListener('webglcontextlost', handleContextLost)
+  document.addEventListener('visibilitychange', resetOrbit)
+  window.addEventListener('blur', resetOrbit)
+  pointerMotion.addEventListener('change', resetOrbit)
+  pointerSurface.addEventListener('pointermove', handlePointerMove, { passive: true })
+  pointerSurface.addEventListener('pointerdown', inspectPointer, { passive: true })
+  pointerSurface.addEventListener('pointerleave', resetOrbit)
+  pointerSurface.addEventListener('pointercancel', resetOrbit)
+  host.appendChild(renderer.domElement)
+  resize()
+
+  return {
+    update,
+    setVisible(next) {
+      visible = next
+      if (!visible) resetOrbit()
+      schedule()
+    },
+    dispose() {
+      if (disposed) return
+      disposed = true
+      cancelAnimationFrame(frame)
+      observer.disconnect()
+      document.removeEventListener('visibilitychange', resetOrbit)
+      window.removeEventListener('blur', resetOrbit)
+      pointerMotion.removeEventListener('change', resetOrbit)
+      pointerSurface.classList.remove('cursor-pointer')
+      pointerSurface.removeEventListener('pointermove', handlePointerMove)
+      pointerSurface.removeEventListener('pointerdown', inspectPointer)
+      pointerSurface.removeEventListener('pointerleave', resetOrbit)
+      pointerSurface.removeEventListener('pointercancel', resetOrbit)
+      renderer.domElement.removeEventListener('webglcontextlost', handleContextLost)
+      const geometries = new Set<BufferGeometry>()
+      const materials = new Set<Material>()
+      const textures = new Set<Texture>()
+      scene.traverse((object) => {
+        if (!(object instanceof Mesh) && !(object instanceof Line)) return
+        geometries.add(object.geometry)
+        const list = Array.isArray(object.material) ? object.material : [object.material]
+        for (const material of list) {
+          materials.add(material)
+          for (const value of Object.values(material)) {
+            if (value instanceof Texture) textures.add(value)
+          }
+        }
+      })
+      for (const item of geometries) item.dispose()
+      for (const item of materials) item.dispose()
+      for (const item of textures) item.dispose()
+      environment.dispose()
+      key.shadow.dispose()
+      renderer.dispose()
+      renderer.forceContextLoss()
+      renderer.domElement.remove()
+    },
+  }
+}
diff --git a/apps/sim/app/(landing)/components/sim-stack/stack-slab.ts b/apps/sim/app/(landing)/components/sim-stack/stack-slab.ts
new file mode 100644
index 00000000000..d77dd54d5f3
--- /dev/null
+++ b/apps/sim/app/(landing)/components/sim-stack/stack-slab.ts
@@ -0,0 +1,199 @@
+import {
+  BufferGeometry,
+  ExtrudeGeometry,
+  Group,
+  Line,
+  LineBasicMaterial,
+  Mesh,
+  MeshPhysicalMaterial,
+  MeshStandardMaterial,
+  PlaneGeometry,
+  ShaderChunk,
+  Shape,
+  Vector3,
+} from 'three'
+import { toCreasedNormals } from 'three/examples/jsm/utils/BufferGeometryUtils.js'
+import {
+  createStackEngraving,
+  type StackTextureOptions,
+} from '@/app/(landing)/components/sim-stack/stack-engraving'
+import { SLAB } from '@/app/(landing)/components/sim-stack/stack-layout'
+
+/** More filtered depth samples soften cast edges without variance-shadow light leaks. */
+const STACK_SHADOW_CHUNK = ShaderChunk.shadowmap_pars_fragment.replace(
+  /shadow = \([\s\S]*?\) \* 0\.2;/,
+  `shadow = 0.0;
+  for (int sampleIndex = 0; sampleIndex < 32; sampleIndex++) {
+    shadow += texture(shadowMap, vec3(
+      shadowCoord.xy + vogelDiskSample(sampleIndex, 32, phi) * radius,
+      shadowCoord.z
+    ));
+  }
+  shadow /= 32.0;`
+)
+
+function createSlabShape() {
+  const x = -SLAB.width / 2
+  const y = -SLAB.depth / 2
+  const w = SLAB.width
+  const h = SLAB.depth
+  const r = SLAB.cornerRadius
+  const outline = new Shape()
+  outline.moveTo(x + r, y)
+  outline.lineTo(x + w - r, y)
+  outline.quadraticCurveTo(x + w, y, x + w, y + r)
+  outline.lineTo(x + w, y + h - r)
+  outline.quadraticCurveTo(x + w, y + h, x + w - r, y + h)
+  outline.lineTo(x + r, y + h)
+  outline.quadraticCurveTo(x, y + h, x, y + h - r)
+  outline.lineTo(x, y + r)
+  outline.quadraticCurveTo(x, y, x + r, y)
+  return outline
+}
+
+/** Rounded outlines extruded into solid plates, with a separate polished bevel material. */
+export function createSlabGeometry() {
+  const geometry = new ExtrudeGeometry(createSlabShape(), {
+    depth: SLAB.thickness,
+    bevelEnabled: true,
+    bevelThickness: SLAB.bevel,
+    bevelSize: SLAB.bevel,
+    bevelSegments: 12,
+    steps: 1,
+    curveSegments: 64,
+  })
+  const flatNormals = geometry.getAttribute('normal')
+  /** The normal utility quantizes positions to 0.01; scale up to preserve the fine bevel rings. */
+  geometry.scale(100, 100, 100)
+  toCreasedNormals(geometry, Math.PI / 3)
+  geometry.scale(0.01, 0.01, 0.01)
+  const normals = geometry.getAttribute('normal')
+  for (const group of geometry.groups) {
+    if (group.materialIndex !== 0) continue
+    for (let vertex = group.start; vertex < group.start + group.count; vertex++) {
+      normals.setXYZ(
+        vertex,
+        flatNormals.getX(vertex),
+        flatNormals.getY(vertex),
+        flatNormals.getZ(vertex)
+      )
+    }
+  }
+  geometry.rotateX(-Math.PI / 2)
+  return geometry
+}
+
+export function createSlab(
+  geometry: ExtrudeGeometry,
+  index: number,
+  fontFamily: string,
+  textureOptions: StackTextureOptions
+) {
+  const face = new MeshPhysicalMaterial({
+    color: '#f1f2f3',
+    metalness: 0.4,
+    roughness: 0.28,
+    clearcoat: 0.35,
+    clearcoatRoughness: 0.25,
+    envMapIntensity: 0.65,
+  })
+  const edge = new MeshStandardMaterial({
+    color: '#e2e5e8',
+    metalness: 1,
+    roughness: 0.2,
+    envMapIntensity: 1.1,
+  })
+  const plate = new Mesh(geometry, [face, edge])
+  plate.castShadow = true
+  plate.receiveShadow = true
+  const engraving = createStackEngraving(index, fontFamily, textureOptions)
+  const ink = new MeshStandardMaterial({
+    color: '#909090',
+    map: engraving.texture,
+    alphaTest: 0.01,
+    roughness: 0.85,
+    metalness: 0,
+    envMapIntensity: 0.35,
+    transparent: true,
+    depthWrite: false,
+    polygonOffset: true,
+    polygonOffsetFactor: -1,
+  })
+  const shadowStrength = { value: 0 }
+  for (const material of [face, edge, ink]) {
+    material.onBeforeCompile = (shader) => {
+      shader.uniforms.stackShadowStrength = shadowStrength
+      shader.fragmentShader = `uniform float stackShadowStrength;\n${shader.fragmentShader}`
+        .replace(
+          '#include <lights_fragment_begin>',
+          ShaderChunk.lights_fragment_begin.replaceAll(
+            'directionalLightShadow.shadowIntensity',
+            '(directionalLightShadow.shadowIntensity * stackShadowStrength)'
+          )
+        )
+        .replace('#include <shadowmap_pars_fragment>', STACK_SHADOW_CHUNK)
+    }
+    material.customProgramCacheKey = () => 'stack-arrival-shadow-pcf32-v2'
+  }
+  const label = new Mesh(new PlaneGeometry(SLAB.width, SLAB.depth), ink)
+  label.rotation.x = -Math.PI / 2
+  label.position.y = SLAB.thickness + SLAB.bevel + 0.002
+  label.receiveShadow = true
+  const group = new Group()
+  group.add(plate, label)
+  const outlineGeometry = new BufferGeometry().setFromPoints(
+    createSlabShape()
+      .getSpacedPoints(256)
+      .map((point) => new Vector3(point.x, SLAB.thickness + SLAB.bevel + 0.004, -point.y))
+  )
+  const outline = new Line(
+    outlineGeometry,
+    new LineBasicMaterial({ color: '#858585', transparent: true, depthWrite: false })
+  )
+  const lowerOutline = new Line(outlineGeometry, outline.material.clone())
+  lowerOutline.position.y = -SLAB.thickness - SLAB.bevel
+  group.add(outline, lowerOutline)
+  let surfaceTrace = 0
+  let surfaceFill = 1
+  let ghost = 0
+  const composeSurface = () => {
+    const opacity = surfaceFill * (1 - ghost)
+    outline.visible = ghost > 0 || (surfaceTrace > 0 && surfaceFill < 1)
+    outline.geometry.setDrawRange(0, ghost > 0 ? 257 : Math.floor(surfaceTrace * 257))
+    outline.material.opacity = Math.max((1 - surfaceFill) * (1 - ghost), ghost * 0.5)
+    lowerOutline.visible = ghost > 0
+    lowerOutline.material.opacity = ghost * 0.22
+    plate.visible = opacity > 0.001
+    ink.opacity = 1 - ghost
+    for (const material of [face, edge]) {
+      const transparent = opacity < 1
+      if (material.transparent !== transparent) {
+        material.transparent = transparent
+        material.needsUpdate = true
+      }
+      material.opacity = opacity
+      material.depthWrite = !transparent
+    }
+  }
+  const reveal = (trace: number, fill: number) => {
+    surfaceTrace = trace
+    surfaceFill = fill
+    composeSurface()
+  }
+  const inspect = (amount: number) => {
+    ghost = amount
+    composeSurface()
+  }
+  return {
+    group,
+    plate,
+    outline,
+    face,
+    edge,
+    ink,
+    shadowStrength,
+    reveal,
+    inspect,
+    draw: engraving.draw,
+  }
+}
diff --git a/apps/sim/app/(landing)/components/sim-stack/stack-timeline.test.ts b/apps/sim/app/(landing)/components/sim-stack/stack-timeline.test.ts
new file mode 100644
index 00000000000..94d7224c658
--- /dev/null
+++ b/apps/sim/app/(landing)/components/sim-stack/stack-timeline.test.ts
@@ -0,0 +1,92 @@
+/**
+ * @vitest-environment node
+ */
+import { describe, expect, it } from 'vitest'
+import { getStrokeProgress, STACK_MOTIFS } from '@/app/(landing)/components/sim-stack/stack-motifs'
+import {
+  getStackAssemblyProgress,
+  getStackLayerProgress,
+  getStackShadowStrength,
+  getStackSpacing,
+  getStackSurfaceProgress,
+  STACK_LAYER_REST,
+  STACK_SCROLL_END,
+} from '@/app/(landing)/components/sim-stack/stack-timeline'
+
+describe('Stack illustration timeline', () => {
+  it('finishes arriving before drawing and holds the camera during the trace', () => {
+    for (let index = 1; index < STACK_SCROLL_END; index++) {
+      expect(getStackLayerProgress(index + 0.21, index)).toEqual({ entrance: 1, drawing: 0 })
+      expect(getStackLayerProgress(index + 0.45, index).drawing).toBeGreaterThan(0)
+      expect(getStackLayerProgress(index + 0.45, index).drawing).toBeLessThan(1)
+      expect(getStackAssemblyProgress(index + 0.25)).toBe(index)
+      expect(getStackAssemblyProgress(index + 0.7)).toBe(index)
+    }
+  })
+  it('builds the first plane from empty through outline, chrome, label, then icon', () => {
+    expect(getStackSurfaceProgress(0, 0)).toEqual({ outline: 0, fill: 0, label: 0 })
+    expect(getStackSurfaceProgress(0.15, 0).outline).toBeGreaterThan(0)
+    expect(getStackSurfaceProgress(0.26, 0)).toEqual({ outline: 1, fill: 0, label: 0 })
+    expect(getStackSurfaceProgress(0.35, 0).fill).toBeCloseTo(0.5)
+    expect(getStackSurfaceProgress(0.44, 0)).toEqual({ outline: 1, fill: 1, label: 0 })
+    expect(getStackSurfaceProgress(0.515, 0).label).toBeCloseTo(0.5)
+    expect(getStackLayerProgress(0.59, 0).drawing).toBe(0)
+    expect(getStackLayerProgress(0.7, 0).drawing).toBeCloseTo(0.5)
+    expect(getStackLayerProgress(0.82, 0).drawing).toBe(1)
+    expect(getStackSurfaceProgress(0.15, 0).fill).toBe(0)
+    for (let index = 1; index < STACK_SCROLL_END; index++) {
+      expect(getStackSurfaceProgress(index + 0.21, index).fill).toBe(1)
+      expect(getStackSurfaceProgress(index + 0.36, index).label).toBe(1)
+    }
+  })
+  it('finishes the arrival fade before descending planes overlap the stack', () => {
+    for (let index = 1; index < STACK_SCROLL_END; index++) {
+      expect(getStackSurfaceProgress(index - 0.1, index).fill).toBeCloseTo(0)
+      expect(getStackSurfaceProgress(index - 0.0998, index).fill).toBeLessThan(0.001)
+      expect(getStackSurfaceProgress(index - 0.0625, index).fill).toBeCloseTo(0.5)
+      expect(getStackSurfaceProgress(index + 0.21, index).fill).toBe(1)
+      expect(getStackSurfaceProgress(index - 0.02, index).fill).toBe(1)
+      expect(getStackLayerProgress(index - 0.02, index).entrance).toBeLessThan(0.3)
+      expect(getStackSurfaceProgress(index + 0.05, index).label).toBe(0)
+    }
+  })
+  it('lands each navigation target on a complete illustration before the next slab appears', () => {
+    for (let index = 0; index < STACK_SCROLL_END; index++) {
+      expect(getStackLayerProgress(index + STACK_LAYER_REST, index)).toEqual({
+        entrance: 1,
+        drawing: 1,
+      })
+      expect(getStackLayerProgress(index + STACK_LAYER_REST, index + 1).entrance).toBe(0)
+    }
+  })
+  it('closes the spacing only as the Sim cover arrives and reopens on reverse scroll', () => {
+    expect(getStackSpacing(4.82)).toBe(1)
+    expect(getStackSpacing(5.05)).toBeCloseTo(0.7)
+    expect(getStackSpacing(5.82)).toBeCloseTo(0.4)
+    expect(getStackSpacing(6)).toBeCloseTo(0.4)
+    expect(getStackSpacing(5.05)).toBeGreaterThan(getStackSpacing(5.82))
+    expect(getStackSpacing(4.82)).toBe(1)
+  })
+  it('introduces shadows continuously without changing shadows on already covered planes', () => {
+    expect(getStackShadowStrength(2.9, 2)).toBe(0)
+    expect(getStackShadowStrength(2.902, 2)).toBeLessThan(0.001)
+    expect(getStackShadowStrength(3.05, 2)).toBeCloseTo(0.5)
+    expect(getStackShadowStrength(3.2, 2)).toBe(1)
+    expect(getStackShadowStrength(3.05, 1)).toBe(1)
+    expect(getStackShadowStrength(3.05, 2)).toBeLessThan(getStackShadowStrength(3.2, 2))
+    expect(getStackShadowStrength(6, 5)).toBe(0)
+  })
+  it('unwinds drawings with reverse progress and completes every contour', () => {
+    for (const paths of STACK_MOTIFS) {
+      paths.forEach((_, index) => {
+        expect(getStrokeProgress(0, index, paths.length)).toBe(0)
+        expect(getStrokeProgress(1, index, paths.length)).toBeCloseTo(1)
+        const forward = getStrokeProgress(0.65, index, paths.length)
+        const backward = getStrokeProgress(0.35, index, paths.length)
+        expect(backward).toBeLessThanOrEqual(forward)
+      })
+      expect(getStrokeProgress(0.2, 0, paths.length)).toBeGreaterThan(0)
+      expect(getStrokeProgress(0.2, paths.length - 1, paths.length)).toBe(0)
+    }
+  })
+})
diff --git a/apps/sim/app/(landing)/components/sim-stack/stack-timeline.ts b/apps/sim/app/(landing)/components/sim-stack/stack-timeline.ts
new file mode 100644
index 00000000000..4aeb70edd96
--- /dev/null
+++ b/apps/sim/app/(landing)/components/sim-stack/stack-timeline.ts
@@ -0,0 +1,51 @@
+import { STACK_LAYERS } from '@/app/(landing)/components/sim-stack/stack-content'
+
+export const STACK_SCROLL_END = STACK_LAYERS.length
+export const STACK_LAYER_REST = 0.82
+export const STACK_PLAYBACK_END = STACK_SCROLL_END - 1 + STACK_LAYER_REST
+
+/** Every layer arrives, traces its illustration, then rests before the next arrival. */
+export function getStackLayerProgress(progress: number, index: number) {
+  const phase = progress - index
+  return {
+    entrance: index === 0 ? 1 : Math.min(1, Math.max(0, (phase + 0.1) / 0.3)),
+    drawing: Math.min(1, Math.max(0, index === 0 ? (phase - 0.6) / 0.2 : (phase - 0.36) / 0.4)),
+  }
+}
+
+/** Keep the camera still while engraving; move it only as another slab arrives. */
+export function getStackAssemblyProgress(progress: number) {
+  let assembled = 0
+  for (let index = 1; index < STACK_LAYERS.length; index++) {
+    assembled += getStackLayerProgress(progress, index).entrance
+  }
+  return assembled
+}
+
+/** The Sim cover closes the stack into a compact assembly, reversible with scroll. */
+export function getStackSpacing(progress: number) {
+  const closing = getStackLayerProgress(progress, STACK_LAYERS.length - 1).entrance
+  const eased = closing * closing * (3 - 2 * closing)
+  return 1 - eased * 0.6
+}
+
+/** Fade only received shadows as the next plane descends, leaving the artwork opaque. */
+export function getStackShadowStrength(progress: number, index: number) {
+  if (index >= STACK_LAYERS.length - 1) return 0
+  const { entrance } = getStackLayerProgress(progress, index + 1)
+  return entrance * entrance * (3 - 2 * entrance)
+}
+
+/** Trace the foundation, fade descending slabs in, then reveal their engravings. */
+export function getStackSurfaceProgress(progress: number, index: number) {
+  const phase = progress - index
+  const fill =
+    index === 0
+      ? Math.min(1, Math.max(0, (phase - 0.27) / 0.16))
+      : Math.min(1, getStackLayerProgress(progress, index).entrance / 0.25)
+  return {
+    outline: index === 0 ? Math.min(1, Math.max(0, (phase - 0.03) / 0.23)) : 0,
+    fill: fill * fill * (3 - 2 * fill),
+    label: Math.min(1, Math.max(0, index === 0 ? (phase - 0.44) / 0.15 : (phase - 0.2) / 0.14)),
+  }
+}
diff --git a/apps/sim/app/(landing)/components/sim-stack/use-stack-scroll.test.tsx b/apps/sim/app/(landing)/components/sim-stack/use-stack-scroll.test.tsx
new file mode 100644
index 00000000000..c5a8ef7c5f1
--- /dev/null
+++ b/apps/sim/app/(landing)/components/sim-stack/use-stack-scroll.test.tsx
@@ -0,0 +1,238 @@
+/**
+ * @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 { useStackScroll } from '@/app/(landing)/components/sim-stack/use-stack-scroll'
+
+let root: Root
+let host: HTMLDivElement
+let trackTop: number
+let trackHeight: number
+let reduced: boolean
+let shortViewport: boolean
+let changeReducedMotion: (() => void) | undefined
+let changeMotion: (() => void) | undefined
+const scrollTo = vi.fn()
+
+function Harness() {
+  const { trackRef, stageRef, progress, active, isPlaying, selectLayer, togglePlayback } =
+    useStackScroll()
+  return (
+    <main>
+      <div ref={trackRef} data-track>
+        <div ref={stageRef} data-stage />
+      </div>
+      <output data-progress={progress} data-playing={isPlaying}>
+        {active}
+      </output>
+      <button type='button' onClick={() => selectLayer(3)}>
+        Agents
+      </button>
+      <button type='button' onClick={togglePlayback}>
+        {isPlaying ? 'Pause' : progress >= 5.81 ? 'Replay' : 'Play'}
+      </button>
+      <h2 id='platform-heading' tabIndex={-1}>
+        Platform
+      </h2>
+    </main>
+  )
+}
+
+function flush() {
+  act(() => vi.runOnlyPendingTimers())
+}
+function click(label: string) {
+  const button = [...host.querySelectorAll('button')].find((el) => el.textContent === label)
+  act(() => button?.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true })))
+  act(() => button?.click())
+}
+
+beforeEach(() => {
+  vi.useFakeTimers()
+  trackHeight = 4600
+  trackTop = 62
+  reduced = false
+  shortViewport = false
+  changeReducedMotion = undefined
+  changeMotion = undefined
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+  vi.stubGlobal(
+    'ResizeObserver',
+    class {
+      observe() {}
+      disconnect() {}
+    }
+  )
+  vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) =>
+    setTimeout(() => callback(performance.now()), 16)
+  )
+  vi.stubGlobal('cancelAnimationFrame', clearTimeout)
+  vi.stubGlobal('matchMedia', (query: string) => ({
+    get matches() {
+      return reduced || (query.includes('max-height') && shortViewport)
+    },
+    addEventListener: (_: string, callback: () => void) => {
+      if (query.includes('max-height')) changeMotion = callback
+      else changeReducedMotion = callback
+    },
+    removeEventListener: vi.fn(),
+  }))
+  vi.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockImplementation(function () {
+    return this.hasAttribute('data-track') ? trackHeight : 938
+  })
+  vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function () {
+    return new DOMRect(
+      0,
+      this.hasAttribute('data-track') ? trackTop : 0,
+      1440,
+      this.hasAttribute('data-track') ? trackHeight : 938
+    )
+  })
+  scrollTo.mockClear()
+  host = document.createElement('div')
+  scrollTo.mockImplementation(({ top }: ScrollToOptions) => {
+    const next = top ?? 0
+    trackTop -= next - host.scrollTop
+    host.scrollTop = next
+    host.dispatchEvent(new Event('scroll'))
+  })
+  host.scrollTo = scrollTo
+  document.body.append(host)
+  root = createRoot(host)
+  act(() => root.render(<Harness />))
+  flush()
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  host.remove()
+  vi.restoreAllMocks()
+  vi.unstubAllGlobals()
+  vi.useRealTimers()
+})
+
+describe('Sim stack scroll navigation', () => {
+  it('builds from the foundation, clamps at the casing, and reverses with page scroll', () => {
+    expect(host.querySelector('output')?.textContent).toBe('0')
+    trackTop = -4000
+    act(() => host.dispatchEvent(new Event('scroll')))
+    flush()
+    expect(host.querySelector('output')?.textContent).toBe('5')
+    trackTop = 62
+    act(() => host.dispatchEvent(new Event('scroll')))
+    flush()
+    expect(host.querySelector('output')?.textContent).toBe('0')
+  })
+  it('holds the selected animation frame while the viewport changes the scroll distance', () => {
+    click('Agents')
+    flush()
+    const selected = progress()
+    trackHeight = 3800
+    act(() => window.dispatchEvent(new Event('resize')))
+    flush()
+    expect(progress()).toBeCloseTo(selected)
+    expect(host.querySelector('output')?.textContent).toBe('3')
+    trackHeight = 5200
+    act(() => window.dispatchEvent(new Event('resize')))
+    flush()
+    expect(progress()).toBeCloseTo(selected)
+  })
+  it('seeks the actual page scroll port when selecting a layer', () => {
+    click('Agents')
+    expect(scrollTo).toHaveBeenCalledWith({ top: (3.82 / 6) * (4600 - 938), behavior: 'smooth' })
+  })
+  it('shows the complete static stack and allows selection without scrolling for reduced motion', () => {
+    reduced = true
+    act(() => changeMotion?.())
+    expect(host.querySelector('output')?.getAttribute('data-progress')).toBe('6')
+    click('Agents')
+    expect(host.querySelector('output')?.textContent).toBe('3')
+    expect(host.querySelector('output')?.getAttribute('data-progress')).toBe('3.82')
+    expect(scrollTo).not.toHaveBeenCalled()
+  })
+  it('plays, pauses on click, and resumes without restarting', () => {
+    click('Play')
+    act(() => vi.advanceTimersByTime(600))
+    expect(progress()).toBeGreaterThan(0)
+    click('Pause')
+    flush()
+    const paused = progress()
+    act(() => vi.advanceTimersByTime(1000))
+    expect(progress()).toBe(paused)
+    expect(playing()).toBe('false')
+    click('Play')
+    act(() => vi.advanceTimersByTime(300))
+    expect(progress()).toBeGreaterThan(paused)
+  })
+  it('hands control back to scrolling immediately on wheel input', () => {
+    click('Play')
+    act(() => vi.advanceTimersByTime(300))
+    act(() => host.dispatchEvent(new Event('wheel')))
+    expect(playing()).toBe('false')
+    trackTop = -1800
+    act(() => host.dispatchEvent(new Event('scroll')))
+    flush()
+    expect(host.querySelector('output')?.textContent).toBe('3')
+  })
+  it('stops at the complete stack and replays from the empty scene', () => {
+    click('Play')
+    act(() => vi.advanceTimersByTime(19000))
+    expect(progress()).toBeCloseTo(5.82)
+    expect(playing()).toBe('false')
+    click('Replay')
+    expect(progress()).toBe(0)
+    act(() => vi.advanceTimersByTime(300))
+    expect(progress()).toBeGreaterThan(0)
+    expect(progress()).toBeLessThan(0.2)
+  })
+  it('keeps playback time independent of browser scroll rounding', () => {
+    scrollTo.mockImplementation(({ top }: ScrollToOptions) => {
+      const next = Math.round(top ?? 0)
+      trackTop -= next - host.scrollTop
+      host.scrollTop = next
+      host.dispatchEvent(new Event('scroll'))
+    })
+    click('Play')
+    act(() => vi.advanceTimersByTime(17600))
+    expect(progress()).toBeCloseTo(5.82, 2)
+    expect(playing()).toBe('false')
+  })
+  it('plays complete steps in place when reduced motion is requested', () => {
+    reduced = true
+    act(() => changeMotion?.())
+    click('Replay')
+    expect(progress()).toBe(0.82)
+    act(() => vi.advanceTimersByTime(3100))
+    expect(progress()).toBeCloseTo(1.82)
+    expect(scrollTo).not.toHaveBeenCalled()
+    click('Pause')
+    expect(playing()).toBe('false')
+  })
+  it('reacts to reduced-motion changes even when short viewport mode is already active', () => {
+    shortViewport = true
+    act(() => changeMotion?.())
+    click('Agents')
+    click('Play')
+    act(() => vi.advanceTimersByTime(300))
+    expect(playing()).toBe('true')
+    reduced = true
+    act(() => changeReducedMotion?.())
+    expect(playing()).toBe('false')
+    expect(progress()).toBe(6)
+  })
+  it('pauses playback when the tab becomes hidden', () => {
+    click('Play')
+    vi.spyOn(document, 'hidden', 'get').mockReturnValue(true)
+    act(() => document.dispatchEvent(new Event('visibilitychange')))
+    expect(playing()).toBe('false')
+  })
+})
+
+function progress() {
+  return Number(host.querySelector('output')?.getAttribute('data-progress'))
+}
+function playing() {
+  return host.querySelector('output')?.getAttribute('data-playing')
+}
diff --git a/apps/sim/app/(landing)/components/sim-stack/use-stack-scroll.ts b/apps/sim/app/(landing)/components/sim-stack/use-stack-scroll.ts
new file mode 100644
index 00000000000..94e1463132b
--- /dev/null
+++ b/apps/sim/app/(landing)/components/sim-stack/use-stack-scroll.ts
@@ -0,0 +1,202 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { STACK_LAYERS } from '@/app/(landing)/components/sim-stack/stack-content'
+import {
+  STACK_LAYER_REST,
+  STACK_PLAYBACK_END,
+  STACK_SCROLL_END,
+} from '@/app/(landing)/components/sim-stack/stack-timeline'
+
+const NAV_HEIGHT = 62
+const STEP_DURATION = 3000
+const LAST_LAYER = STACK_LAYERS.length - 1
+
+interface StackControls {
+  seek: (index: number) => void
+  toggle: () => void
+}
+
+/** Playback advances the same native scroll timeline; manual input takes control immediately. */
+export function useStackScroll() {
+  const trackRef = useRef<HTMLDivElement>(null)
+  const stageRef = useRef<HTMLDivElement>(null)
+  const controlsRef = useRef<StackControls | null>(null)
+  const [progress, setProgress] = useState(0)
+  const [isPlaying, setIsPlaying] = useState(false)
+  const active = Math.min(LAST_LAYER, Math.floor(progress))
+
+  useEffect(() => {
+    const track = trackRef.current
+    const stage = stageRef.current
+    const scrollPort = track?.closest('main')?.parentElement
+    if (!track || !stage || !scrollPort) return
+    const media = window.matchMedia('(prefers-reduced-motion: reduce), (max-height: 760px)')
+    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)')
+    let scrollFrame = 0
+    let playbackFrame = 0
+    let current = 0
+    let playhead = 0
+    let playing = false
+    let lastTime = 0
+
+    const commit = (next: number) => {
+      current = Math.min(STACK_SCROLL_END, Math.max(0, next))
+      setProgress(current)
+    }
+    const pause = () => {
+      playing = false
+      setIsPlaying(false)
+      cancelAnimationFrame(playbackFrame)
+      playbackFrame = 0
+    }
+    const readScroll = () => {
+      scrollFrame = 0
+      if (media.matches || playing) return
+      const travel = track.offsetHeight - stage.offsetHeight
+      if (travel <= 0) return
+      const distance =
+        scrollPort.getBoundingClientRect().top + NAV_HEIGHT - track.getBoundingClientRect().top
+      commit((distance / travel) * STACK_SCROLL_END)
+      playhead = current
+    }
+    const scheduleScroll = () => {
+      if (!scrollFrame) scrollFrame = requestAnimationFrame(readScroll)
+    }
+    const seekProgress = (next: number, behavior: ScrollBehavior = 'instant') => {
+      if (media.matches) {
+        commit(next)
+        return
+      }
+      const start =
+        scrollPort.scrollTop +
+        track.getBoundingClientRect().top -
+        scrollPort.getBoundingClientRect().top -
+        NAV_HEIGHT
+      const travel = track.offsetHeight - stage.offsetHeight
+      scrollPort.scrollTo({ top: start + (next / STACK_SCROLL_END) * travel, behavior })
+      if (behavior === 'instant') commit(next)
+    }
+    const tick = (time: number) => {
+      playbackFrame = 0
+      const bounds = stage.getBoundingClientRect()
+      if (
+        !playing ||
+        document.hidden ||
+        bounds.bottom <= NAV_HEIGHT ||
+        bounds.top >= window.innerHeight
+      ) {
+        pause()
+        return
+      }
+      playhead = Math.min(
+        STACK_PLAYBACK_END,
+        playhead + Math.min(time - lastTime, 64) / STEP_DURATION
+      )
+      lastTime = time
+      const next = reducedMotion.matches
+        ? Math.min(STACK_PLAYBACK_END, Math.floor(playhead) + STACK_LAYER_REST)
+        : playhead
+      seekProgress(next)
+      if (playhead >= STACK_PLAYBACK_END) pause()
+      else playbackFrame = requestAnimationFrame(tick)
+    }
+    controlsRef.current = {
+      seek(index) {
+        pause()
+        seekProgress(index + STACK_LAYER_REST, 'smooth')
+      },
+      toggle() {
+        if (playing) {
+          pause()
+          return
+        }
+        if (current >= STACK_PLAYBACK_END - 0.01) {
+          seekProgress(reducedMotion.matches ? STACK_LAYER_REST : 0)
+          playhead = 0
+        } else {
+          playhead = reducedMotion.matches ? Math.floor(current) : current
+        }
+        playing = true
+        setIsPlaying(true)
+        lastTime = performance.now()
+        playbackFrame = requestAnimationFrame(tick)
+      },
+    }
+    const handleResize = () => {
+      const bounds = stage.getBoundingClientRect()
+      if (
+        current > 0 &&
+        current < STACK_SCROLL_END &&
+        bounds.bottom > NAV_HEIGHT &&
+        bounds.top < window.innerHeight
+      ) {
+        seekProgress(current)
+      } else {
+        scheduleScroll()
+      }
+    }
+    const updateMotion = () => {
+      pause()
+      if (reducedMotion.matches) commit(STACK_SCROLL_END)
+      else handleResize()
+    }
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.target instanceof Element &&
+        event.target.closest('input, textarea, select, [contenteditable]')
+      )
+        return
+      if (event.key === ' ' && event.target instanceof Element && event.target.closest('button'))
+        return
+      if (['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp', 'Home', 'End', ' '].includes(event.key))
+        pause()
+    }
+    const handlePointerInput = (event: Event) => {
+      if (event.target instanceof Element && event.target.closest('button')) return
+      pause()
+    }
+    const handleVisibility = () => {
+      if (document.hidden) pause()
+    }
+    if (media.matches) commit(STACK_SCROLL_END)
+    scrollPort.addEventListener('scroll', scheduleScroll, { passive: true })
+    scrollPort.addEventListener('wheel', pause, { passive: true })
+    scrollPort.addEventListener('touchstart', handlePointerInput, { passive: true })
+    scrollPort.addEventListener('pointerdown', handlePointerInput, { passive: true })
+    scrollPort.addEventListener('keydown', handleKeyDown)
+    document.addEventListener('visibilitychange', handleVisibility)
+    media.addEventListener('change', updateMotion)
+    reducedMotion.addEventListener('change', updateMotion)
+    window.addEventListener('resize', handleResize)
+    const observer = new ResizeObserver(scheduleScroll)
+    observer.observe(track)
+    observer.observe(scrollPort)
+    scheduleScroll()
+    return () => {
+      cancelAnimationFrame(scrollFrame)
+      cancelAnimationFrame(playbackFrame)
+      controlsRef.current = null
+      observer.disconnect()
+      scrollPort.removeEventListener('scroll', scheduleScroll)
+      scrollPort.removeEventListener('wheel', pause)
+      scrollPort.removeEventListener('touchstart', handlePointerInput)
+      scrollPort.removeEventListener('pointerdown', handlePointerInput)
+      scrollPort.removeEventListener('keydown', handleKeyDown)
+      document.removeEventListener('visibilitychange', handleVisibility)
+      media.removeEventListener('change', updateMotion)
+      reducedMotion.removeEventListener('change', updateMotion)
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
+  return {
+    trackRef,
+    stageRef,
+    progress,
+    active,
+    isPlaying,
+    selectLayer: (index: number) => controlsRef.current?.seek(index),
+    togglePlayback: () => controlsRef.current?.toggle(),
+  }
+}
diff --git a/apps/sim/app/(landing)/contact/contact.tsx b/apps/sim/app/(landing)/contact/contact.tsx
index 723da081826..2ef28733343 100644
--- a/apps/sim/app/(landing)/contact/contact.tsx
+++ b/apps/sim/app/(landing)/contact/contact.tsx
@@ -1,4 +1,5 @@
 import { chipBorderShadowRing, cn } from '@sim/emcn'
+import { PUBLIC_PAGE_TYPE } from '@/app/(landing)/components/landing-layout'
 import { TrustedBy } from '@/app/(landing)/components/trusted-by'
 import { ContactForm } from '@/app/(landing)/contact/components/contact-form'
 
@@ -10,8 +11,7 @@ import { ContactForm } from '@/app/(landing)/contact/components/contact-form'
  * The section is a two-column CSS grid capped and centered at the shared
  * `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
+ * with a 64px gap separating the copy from the form. The card is
  * inset from the section's top and bottom by 32px (`xl:pt-8`/`xl:pb-8`), spans both
  * rows (`xl:row-span-2`), and its content drives the column height — the left
  * column stretches to match, bottom-anchoring the logos to the card's lower edge.
@@ -34,7 +34,7 @@ export default function Contact() {
       <section
         id='contact'
         aria-labelledby='contact-heading'
-        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'
+        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-12 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-16 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'>
@@ -45,7 +45,10 @@ export default function Contact() {
 
           <h1
             id='contact-heading'
-            className='text-balance text-[48px] text-[var(--text-primary)] leading-[1.1] max-sm:text-[32px] max-xl:text-wrap max-xl:text-[40px] [&>br]:max-xl:hidden'
+            className={cn(
+              'text-balance text-[var(--text-primary)] max-xl:text-wrap [&>br]:max-xl:hidden',
+              PUBLIC_PAGE_TYPE.detail
+            )}
           >
             Get in touch with Sim, <br />
             the AI agent workspace.
diff --git a/apps/sim/app/(landing)/demo/demo.tsx b/apps/sim/app/(landing)/demo/demo.tsx
index 85113e9effc..b1fc8b0159e 100644
--- a/apps/sim/app/(landing)/demo/demo.tsx
+++ b/apps/sim/app/(landing)/demo/demo.tsx
@@ -1,3 +1,5 @@
+import { cn } from '@sim/emcn'
+import { PUBLIC_PAGE_TYPE } from '@/app/(landing)/components/landing-layout'
 import { TrustedBy } from '@/app/(landing)/components/trusted-by'
 import { DemoBooking } from '@/app/(landing)/demo/components/demo-booking'
 
@@ -8,10 +10,8 @@ import { DemoBooking } from '@/app/(landing)/demo/components/demo-booking'
  * The section is a two-column CSS grid capped and centered at the shared
  * `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-10` gutter. The card is also inset from the section's top and bottom by 32px
+ * `xl:grid-cols-2` with a 64px gutter between the copy and booking card. The card
+ * is 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
@@ -39,7 +39,7 @@ export default function Demo() {
       <section
         id='demo'
         aria-labelledby='demo-heading'
-        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'
+        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-12 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-16 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'>
@@ -51,7 +51,10 @@ export default function Demo() {
 
           <h1
             id='demo-heading'
-            className='text-balance text-[48px] text-[var(--text-primary)] leading-[1.1] max-sm:text-[32px] max-xl:text-wrap max-xl:text-[40px] [&>br]:max-xl:hidden'
+            className={cn(
+              'text-balance text-[var(--text-primary)] max-xl:text-wrap [&>br]:max-xl:hidden',
+              PUBLIC_PAGE_TYPE.detail
+            )}
           >
             Operationalize AI with Sim, <br />
             the AI agent workspace.
diff --git a/apps/sim/app/(landing)/integrations/(shell)/[slug]/page.tsx b/apps/sim/app/(landing)/integrations/(shell)/[slug]/page.tsx
index f920c55ec56..5ebb08bdfd6 100644
--- a/apps/sim/app/(landing)/integrations/(shell)/[slug]/page.tsx
+++ b/apps/sim/app/(landing)/integrations/(shell)/[slug]/page.tsx
@@ -1,4 +1,4 @@
-import { ChipLink } from '@sim/emcn'
+import { ChipLink, cn } from '@sim/emcn'
 import { truncate } from '@sim/utils/string'
 import type { Metadata } from 'next'
 import Link from 'next/link'
@@ -16,6 +16,7 @@ import {
 import { BackLink } from '@/app/(landing)/components'
 import { JsonLd } from '@/app/(landing)/components/json-ld'
 import { LandingFAQ } from '@/app/(landing)/components/landing-faq'
+import { PUBLIC_PAGE_TYPE } from '@/app/(landing)/components/landing-layout'
 import { ShareButton } from '@/app/(landing)/components/share-button'
 import { IntegrationComparisonSection } from '@/app/(landing)/integrations/(shell)/[slug]/components/integration-comparison-section/integration-comparison-section'
 import { IntegrationCtaButton } from '@/app/(landing)/integrations/(shell)/[slug]/components/integration-cta-button'
@@ -455,7 +456,7 @@ export default async function IntegrationPage({ params }: { params: Promise<{ sl
       <JsonLd data={faqJsonLd} />
 
       {/* Hero */}
-      <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='mx-auto w-full max-w-[1728px] px-10 pt-[112px] max-sm:pt-12 max-md:px-7 max-lg:px-8 max-xl:px-9 max-xl:pt-20'>
         <div className='mb-6'>
           <BackLink href='/integrations' label='Back to Integrations' />
         </div>
@@ -474,7 +475,7 @@ export default async function IntegrationPage({ params }: { params: Promise<{ sl
           <div>
             <h1
               id='integration-heading'
-              className='text-[28px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em] sm:text-[36px] lg:text-[44px]'
+              className={cn('text-[var(--text-primary)]', PUBLIC_PAGE_TYPE.detail)}
             >
               {seo?.h1 ?? name}
             </h1>
diff --git a/apps/sim/app/(landing)/integrations/(shell)/page.tsx b/apps/sim/app/(landing)/integrations/(shell)/page.tsx
index 045896769ca..70a2bf863c7 100644
--- a/apps/sim/app/(landing)/integrations/(shell)/page.tsx
+++ b/apps/sim/app/(landing)/integrations/(shell)/page.tsx
@@ -13,7 +13,11 @@ 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 {
+  LANDING_CONTENT_WIDTH,
+  LANDING_GUTTER,
+  PUBLIC_PAGE_TYPE,
+} 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'
@@ -172,11 +176,17 @@ export default async function IntegrationsPage({
       <JsonLd data={faqJsonLd} />
 
       {/* Hero */}
-      <div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER, 'pt-[112px] max-sm:pt-20')}>
+      <div
+        className={cn(
+          LANDING_CONTENT_WIDTH,
+          LANDING_GUTTER,
+          'pt-[112px] max-sm:pt-12 max-xl:pt-20'
+        )}
+      >
         <div className='flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between'>
           <h1
             id='integrations-heading'
-            className='text-balance text-[28px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] lg:text-[40px]'
+            className={cn('text-balance text-[var(--text-primary)]', PUBLIC_PAGE_TYPE.title)}
           >
             Integrations
           </h1>
diff --git a/apps/sim/app/(landing)/landing.test.tsx b/apps/sim/app/(landing)/landing.test.tsx
index 51d4ff5c36d..920d2c2aa00 100644
--- a/apps/sim/app/(landing)/landing.test.tsx
+++ b/apps/sim/app/(landing)/landing.test.tsx
@@ -25,6 +25,10 @@ vi.mock('@/app/(landing)/components/landing-layout', () => ({
   HOME_SECTION_RHYTHM: 'gap-test',
 }))
 
+vi.mock('@/app/(landing)/components/sim-stack/sim-stack', () => ({
+  SimStack: () => <span>sim-stack-marker</span>,
+}))
+
 vi.mock('@/app/(landing)/landing-analytics', () => ({
   LandingAnalytics: () => <span>landing-analytics-marker</span>,
 }))
@@ -42,11 +46,13 @@ describe('Landing', () => {
     const markup = renderToStaticMarkup(<Landing />)
     const featuredCustomerIndex = markup.indexOf('featured-customer-marker')
     const agentMomentumIndex = markup.indexOf('agent-momentum-marker')
+    const stackIndex = markup.indexOf('sim-stack-marker')
     const platformSuiteIndex = markup.indexOf('platform-suite-marker')
 
     expect(featuredCustomerIndex).toBeGreaterThan(-1)
     expect(agentMomentumIndex).toBeGreaterThan(featuredCustomerIndex)
-    expect(platformSuiteIndex).toBeGreaterThan(agentMomentumIndex)
+    expect(stackIndex).toBeGreaterThan(agentMomentumIndex)
+    expect(platformSuiteIndex).toBeGreaterThan(stackIndex)
   })
 
   it('places the workspace controls between the feature rail and the governance beat', () => {
diff --git a/apps/sim/app/(landing)/landing.tsx b/apps/sim/app/(landing)/landing.tsx
index 832f23a0851..9ea13807c0e 100644
--- a/apps/sim/app/(landing)/landing.tsx
+++ b/apps/sim/app/(landing)/landing.tsx
@@ -12,6 +12,7 @@ import {
   WorkspaceControls,
 } from '@/app/(landing)/components'
 import { HOME_SECTION_RHYTHM } from '@/app/(landing)/components/landing-layout'
+import { SimStack } from '@/app/(landing)/components/sim-stack/sim-stack'
 import { LandingAnalytics } from '@/app/(landing)/landing-analytics'
 
 /**
@@ -23,17 +24,18 @@ import { LandingAnalytics } from '@/app/(landing)/landing-analytics'
  * 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:
+ * Section order follows the homepage design:
  *
  * 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.
+ * 5. {@link SimStack} - scroll-driven architecture, from governance to the workspace.
+ * 6. {@link PlatformSuite} - creation and centralized-governance windows.
+ * 7. {@link ProductDemo} - the demo player, grouped with the platform cards.
+ * 8. {@link Features} - the horizontal product rail.
+ * 9. {@link WorkspaceControls} - the rail's six governance controls, untitled.
+ * 10. {@link Security} - governance intro, Trust Center link, certification blocs.
  *
  * `<main>` is a `flex flex-col` whose `gap` is the single source of truth for
  * major-section rhythm. Customer proof, platform media, and product controls
@@ -54,6 +56,7 @@ export default function Landing() {
           </div>
         </div>
       </div>
+      <SimStack />
       {/* 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
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 47eb53e18a8..61f4dd00f21 100644
--- a/apps/sim/app/(landing)/models/(shell)/[provider]/[model]/page.tsx
+++ b/apps/sim/app/(landing)/models/(shell)/[provider]/[model]/page.tsx
@@ -6,7 +6,11 @@ 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 {
+  LANDING_CONTENT_WIDTH,
+  LANDING_GUTTER,
+  PUBLIC_PAGE_TYPE,
+} 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 {
@@ -149,7 +153,13 @@ export default async function ModelPage({
       <JsonLd data={faqJsonLd} />
 
       <section className='bg-[var(--bg)]'>
-        <div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER, 'pt-[112px] max-sm:pt-20')}>
+        <div
+          className={cn(
+            LANDING_CONTENT_WIDTH,
+            LANDING_GUTTER,
+            'pt-[112px] max-sm:pt-12 max-xl:pt-20'
+          )}
+        >
           <div className='mb-6'>
             <BackLink href={provider.href} label={`Back to ${provider.name}`} />
           </div>
@@ -166,7 +176,7 @@ export default async function ModelPage({
               </p>
               <h1
                 id='model-heading'
-                className='text-[28px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] sm:text-[36px] lg:text-[44px]'
+                className={cn('text-[var(--text-primary)]', PUBLIC_PAGE_TYPE.detail)}
               >
                 {model.displayName}
               </h1>
diff --git a/apps/sim/app/(landing)/models/(shell)/[provider]/page.tsx b/apps/sim/app/(landing)/models/(shell)/[provider]/page.tsx
index 24421550348..4d9af4208f8 100644
--- a/apps/sim/app/(landing)/models/(shell)/[provider]/page.tsx
+++ b/apps/sim/app/(landing)/models/(shell)/[provider]/page.tsx
@@ -6,7 +6,11 @@ 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 {
+  LANDING_CONTENT_WIDTH,
+  LANDING_GUTTER,
+  PUBLIC_PAGE_TYPE,
+} from '@/app/(landing)/components/landing-layout'
 import {
   FeaturedModelCard,
   FeaturedProviderCard,
@@ -139,7 +143,13 @@ export default async function ProviderModelsPage({
       <JsonLd data={faqJsonLd} />
 
       <section className='bg-[var(--bg)]'>
-        <div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER, 'pt-[112px] max-sm:pt-20')}>
+        <div
+          className={cn(
+            LANDING_CONTENT_WIDTH,
+            LANDING_GUTTER,
+            'pt-[112px] max-sm:pt-12 max-xl:pt-20'
+          )}
+        >
           <div className='mb-6'>
             <BackLink href='/models' label='Back to Models' />
           </div>
@@ -153,7 +163,7 @@ export default async function ProviderModelsPage({
               />
               <h1
                 id='provider-heading'
-                className='text-[28px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] lg:text-[40px]'
+                className={cn('text-[var(--text-primary)]', PUBLIC_PAGE_TYPE.title)}
               >
                 {provider.name} models
               </h1>
diff --git a/apps/sim/app/(landing)/models/(shell)/page.tsx b/apps/sim/app/(landing)/models/(shell)/page.tsx
index 5320b5dc8b1..c1eaec945ee 100644
--- a/apps/sim/app/(landing)/models/(shell)/page.tsx
+++ b/apps/sim/app/(landing)/models/(shell)/page.tsx
@@ -1,9 +1,11 @@
+import { cn } from '@sim/emcn'
 import type { Metadata } from 'next'
 import type { SearchParams } from 'nuqs/server'
 import { SITE_URL } from '@/lib/core/utils/urls'
 import { withFilteredNoindex } from '@/lib/landing/seo'
 import { JsonLd } from '@/app/(landing)/components/json-ld'
 import { LandingFAQ } from '@/app/(landing)/components/landing-faq'
+import { PUBLIC_PAGE_TYPE } from '@/app/(landing)/components/landing-layout'
 import { ModelComparisonCharts } from '@/app/(landing)/models/components/model-comparison-charts'
 import { ModelDirectory } from '@/app/(landing)/models/components/model-directory'
 import {
@@ -182,11 +184,11 @@ export default async function ModelsPage({
       <JsonLd data={faqJsonLd} />
 
       <section className='bg-[var(--bg)]'>
-        <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='mx-auto w-full max-w-[1728px] px-10 pt-[112px] max-sm:pt-12 max-md:px-7 max-lg:px-8 max-xl:px-9 max-xl:pt-20'>
           <div className='flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between'>
             <h1
               id='models-heading'
-              className='text-balance text-[28px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] lg:text-[40px]'
+              className={cn('text-balance text-[var(--text-primary)]', PUBLIC_PAGE_TYPE.title)}
             >
               Compare AI Models
             </h1>
diff --git a/apps/sim/app/(landing)/pricing/pricing.tsx b/apps/sim/app/(landing)/pricing/pricing.tsx
index 6df741bc4af..d58727ef6ae 100644
--- a/apps/sim/app/(landing)/pricing/pricing.tsx
+++ b/apps/sim/app/(landing)/pricing/pricing.tsx
@@ -1,3 +1,5 @@
+import { cn } from '@sim/emcn'
+import { PUBLIC_PAGE_TYPE } from '@/app/(landing)/components/landing-layout'
 import { PricingPlans } from '@/app/(landing)/pricing/components/pricing-plans'
 import { PricingStructuredData } from '@/app/(landing)/pricing/components/pricing-structured-data'
 
@@ -13,7 +15,7 @@ const PRICING_HEADING = (
   <>
     <h1
       id='pricing-heading'
-      className='text-balance text-center text-[30px] text-[var(--text-primary)]'
+      className={cn('text-balance text-center text-[var(--text-primary)]', PUBLIC_PAGE_TYPE.title)}
     >
       Plans that scale with you
     </h1>
@@ -51,7 +53,7 @@ export default function Pricing() {
       <section
         id='pricing'
         aria-labelledby='pricing-heading'
-        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'
+        className='mx-auto flex w-full max-w-[1728px] flex-col gap-7 px-10 pt-[112px] max-sm:pt-12 max-md:px-7 max-lg:px-8 max-xl:px-9 max-xl:pt-20'
       >
         <PricingPlans heading={PRICING_HEADING} />
       </section>
diff --git a/apps/sim/components/icons.tsx b/apps/sim/components/icons.tsx
index 867a81af5c2..4811f88bd95 100644
--- a/apps/sim/components/icons.tsx
+++ b/apps/sim/components/icons.tsx
@@ -1,5 +1,6 @@
 import type { SVGProps } from 'react'
 import { useId } from 'react'
+import { CLAUDE_MARK_PATH, GEMINI_MARK_PATH, OPENAI_MARK_PATH, XAI_MARK_POLYGONS } from '@sim/emcn'
 
 export function EnrichmentIcon(props: SVGProps<SVGSVGElement>) {
   return (
@@ -1307,22 +1308,10 @@ export function xAIIcon(props: SVGProps<SVGSVGElement>) {
       {...props}
     >
       <g>
-        <polygon
-          points='557.09,211.99 565.4,538.36 631.96,538.36 640.28,93.18'
-          fill='currentColor'
-        />
-        <polygon
-          points='640.28,56.91 538.72,56.91 379.35,284.53 430.13,357.05'
-          fill='currentColor'
-        />
-        <polygon
-          points='201.61,538.36 303.17,538.36 353.96,465.84 303.17,393.31'
-          fill='currentColor'
-        />
-        <polygon
-          points='201.61,211.99 430.13,538.36 531.69,538.36 303.17,211.99'
-          fill='currentColor'
-        />
+        <polygon points={XAI_MARK_POLYGONS[0]} fill='currentColor' />
+        <polygon points={XAI_MARK_POLYGONS[1]} fill='currentColor' />
+        <polygon points={XAI_MARK_POLYGONS[2]} fill='currentColor' />
+        <polygon points={XAI_MARK_POLYGONS[3]} fill='currentColor' />
       </g>
     </svg>
   )
@@ -1772,10 +1761,7 @@ export function OpenAIIcon(props: SVGProps<SVGSVGElement>) {
       role='img'
       xmlns='http://www.w3.org/2000/svg'
     >
-      <path
-        d='M22.28 9.82a5.98 5.98 0 0 0-.516-4.91 6.05 6.05 0 0 0-6.51-2.9A6.07 6.07 0 0 0 4.98 4.18a5.98 5.98 0 0 0-4 2.9 6.05 6.05 0 0 0 .743 7.1 5.98 5.98 0 0 0 .511 4.91 6.05 6.05 0 0 0 6.51 2.9A5.98 5.98 0 0 0 13.26 24a6.06 6.06 0 0 0 5.77-4.21 5.99 5.99 0 0 0 4-2.9 6.06 6.06 0 0 0-.748-7.07zm-9.02 12.61a4.48 4.48 0 0 1-2.88-1.04l.142-.08 4.78-2.76a.795.79 0 0 0 .393-.681v-6.74l2.02 1.17a.71.07 0 0 1 .38.05v5.58a4.5 4.5 0 0 1-4.49 4.49zm-9.66-4.13a4.47 4.47 0 0 1-.535-3.01l.142.09 4.78 2.76a.771.77 0 0 0 .781 0l5.84-3.37v2.33a.804.08 0 0 1-.332.06L9.74 19.95a4.5 4.5 0 0 1-6.14-1.65zM2.34 7.9a4.49 4.49 0 0 1 2.37-1.97V11.6a.766.77 0 0 0 .388.68l5.81 3.35-2.02 1.17a.757.08 0 0 1-.071 0l-4.83-2.79A4.5 4.5 0 0 1 2.34 7.87zm16.6 3.86L13.1 8.36 15.12 7.2a.757.08 0 0 1 .071 0l4.83 2.79a4.49 4.49 0 0 1-.676 8.1v-5.68a.79.79 0 0 0-.407-.667zm2.01-3.02l-.142-.085-4.77-2.78a.776.78 0 0 0-.785 0L9.41 9.23V6.9a.662.07 0 0 1 .028-.061l4.83-2.79a4.5 4.5 0 0 1 6.68 4.66zM8.31 12.86l-2.02-1.16a.804.08 0 0 1-.038-.057V6.07a4.5 4.5 0 0 1 7.38-3.45l-.142.08L8.7 5.46a.795.79 0 0 0-.393.68zm1.1-2.37l2.6-1.5 2.61 1.5v3l-2.6 1.5-2.61-1.5Z'
-        fill='currentColor'
-      />
+      <path d={OPENAI_MARK_PATH} fill='currentColor' />
     </svg>
   )
 }
@@ -4032,7 +4018,7 @@ export const ClaudeIcon = (props: SVGProps<SVGSVGElement>) => (
     xmlns='http://www.w3.org/2000/svg'
   >
     <title>Claude</title>
-    <path d='m19.6 66.5 19.7-11 .3-1-.3-.5h-1l-3.3-.2-11.2-.3L14 53l-9.5-.5-2.4-.5L0 49l.2-1.5 2-1.3 2.9.2 6.3.5 9.5.6 6.9.4L38 49.1h1.6l.2-.7-.5-.4-.4-.4L29 41l-10.6-7-5.6-4.1-3-2-1.5-2-.6-4.2 2.7-3 3.7.3.9.2 3.7 2.9 8 6.1L37 36l1.5 1.2.6-.4.1-.3-.7-1.1L33 25l-6-10.4-2.7-4.3-.7-2.6c-.3-1-.4-2-.4-3l3-4.2L28 0l4.2.6L33.8 2l2.6 6 4.1 9.3L47 29.9l2 3.8 1 3.4.3 1h.7v-.5l.5-7.2 1-8.7 1-11.2.3-3.2 1.6-3.8 3-2L61 2.6l2 2.9-.3 1.8-1.1 7.7L59 27.1l-1.5 8.2h.9l1-1.1 4.1-5.4 6.9-8.6 3-3.5L77 13l2.3-1.8h4.3l3.1 4.7-1.4 4.9-4.4 5.6-3.7 4.7-5.3 7.1-3.2 5.7.3.4h.7l12-2.6 6.4-1.1 7.6-1.3 3.5 1.6.4 1.6-1.4 3.4-8.2 2-9.6 2-14.3 3.3-.2.1.2.3 6.4.6 2.8.2h6.8l12.6 1 3.3 2 1.9 2.7-.3 2-5.1 2.6-6.8-1.6-16-3.8-5.4-1.3h-.8v.4l4.6 4.5 8.3 7.5L89 80.1l.5 2.4-1.3 2-1.4-.2-9.2-7-3.6-3-8-6.8h-.5v.7l1.8 2.7 9.8 14.7.5 4.5-.7 1.4-2.6 1-2.7-.6-5.8-8-6-9-4.7-8.2-.5.4-2.9 30.2-1.3 1.5-3 1.2-2.5-2-1.4-3 1.4-6.2 1.6-8 1.3-6.4 1.2-7.9.7-2.6v-.2H49L43 72l-9 12.3-7.2 7.6-1.7.7-3-1.5.3-2.8L24 86l10-12.8 6-7.9 4-4.6-.1-.5h-.3L17.2 77.4l-4.7.6-2-2 .2-3 1-1 8-5.5Z' />
+    <path d={CLAUDE_MARK_PATH} />
   </svg>
 )
 
@@ -4392,11 +4378,7 @@ export function GeminiIcon(props: SVGProps<SVGSVGElement>) {
           <stop offset='100%' stopColor='#F0DCD6' />
         </linearGradient>
       </defs>
-      <path
-        d='M12 24A14.3 14.3 0 000 12 14.3 14.3 0 0012 0a14.31 14.31 0 0012 12 14.31 14.31 0 00-12 12'
-        fill={`url(#${gradientId})`}
-        fillRule='nonzero'
-      />
+      <path d={GEMINI_MARK_PATH} fill={`url(#${gradientId})`} fillRule='nonzero' />
     </svg>
   )
 }
diff --git a/apps/sim/package.json b/apps/sim/package.json
index 35600921107..0778e41a878 100644
--- a/apps/sim/package.json
+++ b/apps/sim/package.json
@@ -70,9 +70,9 @@
     "@better-auth/sso": "1.6.27",
     "@better-auth/stripe": "1.6.27",
     "@browserbasehq/stagehand": "^3.2.1",
-    "@calcom/embed-react": "1.5.3",
     "@c15t/nextjs": "2.2.1",
     "@c15t/scripts": "2.2.0",
+    "@calcom/embed-react": "1.5.3",
     "@cerebras/cerebras_cloud_sdk": "^1.23.0",
     "@daytona/sdk": "0.207.0",
     "@e2b/code-interpreter": "2.7.1",
@@ -142,8 +142,8 @@
     "@tiptap/extension-collaboration-caret": "3.30.5",
     "@tiptap/extension-image": "3.30.5",
     "@tiptap/extension-list": "3.30.5",
-    "@tiptap/extension-placeholder": "3.30.5",
     "@tiptap/extension-paragraph": "3.30.5",
+    "@tiptap/extension-placeholder": "3.30.5",
     "@tiptap/extension-table": "3.30.5",
     "@tiptap/markdown": "3.30.5",
     "@tiptap/pm": "3.30.5",
@@ -175,8 +175,8 @@
     "csv-parse": "7.0.2",
     "date-fns": "4.1.0",
     "decimal.js": "10.6.0",
-    "docx-preview": "^0.3.7",
     "docx": "^9.6.1",
+    "docx-preview": "^0.3.7",
     "drizzle-orm": "^0.45.2",
     "echarts": "6.1.0",
     "es-toolkit": "1.45.1",
@@ -246,6 +246,7 @@
     "streamdown": "2.5.0",
     "stripe": "18.5.0",
     "svix": "1.99.1",
+    "three": "0.185.1",
     "tldts": "7.0.30",
     "twilio": "5.9.0",
     "typebox": "1.1.38",
@@ -282,6 +283,7 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@types/ssh2": "^1.15.5",
+    "@types/three": "0.185.4",
     "@vitejs/plugin-react": "^6.0.5",
     "@vitest/coverage-v8": "^4.1.0",
     "artillery": "2.0.34",
diff --git a/bun.lock b/bun.lock
index 3b63e4d5571..346d84ce3ad 100644
--- a/bun.lock
+++ b/bun.lock
@@ -361,6 +361,7 @@
         "streamdown": "2.5.0",
         "stripe": "18.5.0",
         "svix": "1.99.1",
+        "three": "0.185.1",
         "tldts": "7.0.30",
         "twilio": "5.9.0",
         "typebox": "1.1.38",
@@ -397,6 +398,7 @@
         "@types/react": "^19",
         "@types/react-dom": "^19",
         "@types/ssh2": "^1.15.5",
+        "@types/three": "0.185.4",
         "@vitejs/plugin-react": "^6.0.5",
         "@vitest/coverage-v8": "^4.1.0",
         "artillery": "2.0.34",
@@ -1194,6 +1196,8 @@
 
     "@daytona/toolbox-api-client": ["@daytona/toolbox-api-client@0.207.0", "", { "dependencies": { "axios": "^1.6.1" } }, "sha512-3YlwbVN81KpF6CFTjno2jO45EzNQ97FF2hh+DeYzu9O9vSWRFrO16ae1XiJ5eMzFlkMvF+R4zwqnqtBenIg3HA=="],
 
+    "@dimforge/rapier3d-compat": ["@dimforge/rapier3d-compat@0.12.0", "", {}, "sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow=="],
+
     "@drizzle-team/brocli": ["@drizzle-team/brocli@0.10.2", "", {}, "sha512-z33Il7l5dKjUgGULTqBsQBQwckHh5AbIuxhdsIxDDiZAzBOrZO6q9ogcWC65kU382AfynTfgNumVcNIjuIua6w=="],
 
     "@e2b/code-interpreter": ["@e2b/code-interpreter@2.7.1", "", { "dependencies": { "e2b": "^2.39.0" } }, "sha512-1M4YhyWOWZzZyt1XessPbMwkVOsfpsWTiOgPKbA60CtDQasUQA8bRdN7HxsajYMrNxF5tk8J0fwrY7oa2oTK4g=="],
@@ -2154,6 +2158,8 @@
 
     "@turbo/windows-arm64": ["@turbo/windows-arm64@2.9.14", "", { "os": "win32", "cpu": "arm64" }, "sha512-fVdCsnmYoKICsycbWuuGp6Jvi51/3G/UluFWuAUCvR8PIW5IJkAk5BM9UF8PSm0Q2IphWHFZjYEgjHsh3B9y/g=="],
 
+    "@tweenjs/tween.js": ["@tweenjs/tween.js@23.1.3", "", {}, "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA=="],
+
     "@tybys/wasm-util": ["@tybys/wasm-util@0.10.2", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg=="],
 
     "@types/archiver": ["@types/archiver@8.0.0", "", { "dependencies": { "@types/node": "*", "@types/readdir-glob": "*" } }, "sha512-YpXPbEuv9+eUIPPQWUPahj3cvs9isWRuF+J4z+KbdYVDO3rWorWQFxUVHnwPu2AgKwvgpki5F2VMX0Xx+mX45A=="],
@@ -2306,6 +2312,10 @@
 
     "@types/ssh2": ["@types/ssh2@1.15.5", "", { "dependencies": { "@types/node": "^18.11.18" } }, "sha512-N1ASjp/nXH3ovBHddRJpli4ozpk6UdDYIX4RJWFa9L1YKnzdhTlVmiGHm4DZnj/jLbqZpes4aeR30EFGQtvhQQ=="],
 
+    "@types/stats.js": ["@types/stats.js@0.17.4", "", {}, "sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA=="],
+
+    "@types/three": ["@types/three@0.185.4", "", { "dependencies": { "@dimforge/rapier3d-compat": "~0.12.0", "@tweenjs/tween.js": "~23.1.3", "@types/stats.js": "*", "@types/webxr": ">=0.5.17", "fflate": "~0.8.2", "meshoptimizer": "~1.1.1" } }, "sha512-gAsBIC07NIFrxjbf7tH2t71c38uulFfk/RFoC7FNBSjMRAQ8J1x/RBvusX0N5PJouaYFJawXQqfCQ0RKUx/1nA=="],
+
     "@types/tough-cookie": ["@types/tough-cookie@4.0.5", "", {}, "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA=="],
 
     "@types/trusted-types": ["@types/trusted-types@2.0.7", "", {}, "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="],
@@ -2316,6 +2326,8 @@
 
     "@types/webidl-conversions": ["@types/webidl-conversions@7.0.3", "", {}, "sha512-CiJJvcRtIgzadHCYXw7dqEnMNRjhGZlYK05Mj9OyktqV8uVT8fD2BFOB7S1uwBE3Kj2Z+4UyPmFw/Ixgw/LAlA=="],
 
+    "@types/webxr": ["@types/webxr@0.5.24", "", {}, "sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg=="],
+
     "@types/whatwg-url": ["@types/whatwg-url@11.0.5", "", { "dependencies": { "@types/webidl-conversions": "*" } }, "sha512-coYR071JRaHa+xoEvvYqvnIHaVqaYrLPbsufM9BF63HkwI5Lgmy2QR8Q5K/lYDYo5AK82wOvSOS0UsLTpTG7uQ=="],
 
     "@types/ws": ["@types/ws@8.18.1", "", { "dependencies": { "@types/node": "*" } }, "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg=="],
@@ -3138,7 +3150,7 @@
 
     "fetch-cookie": ["fetch-cookie@3.2.0", "", { "dependencies": { "set-cookie-parser": "^2.4.8", "tough-cookie": "^6.0.0" } }, "sha512-n61pQIxP25C6DRhcJxn7BDzgHP/+S56Urowb5WFxtcRMpU6drqXD90xjyAsVQYsNSNNVbaCcYY1DuHsdkZLuiA=="],
 
-    "fflate": ["fflate@0.4.8", "", {}, "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA=="],
+    "fflate": ["fflate@0.8.3", "", {}, "sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA=="],
 
     "file-type": ["file-type@16.5.4", "", { "dependencies": { "readable-web-to-node-stream": "^3.0.0", "strtok3": "^6.2.4", "token-types": "^4.1.1" } }, "sha512-/yFHK0aGjFEgDJjEKP0pWCplsPFPhwyfwevf/pVxiN0tmE4L9LmwWxWukdJSHdoCli4VgQLehjJtwQBnqmsKcw=="],
 
@@ -3682,6 +3694,8 @@
 
     "mermaid": ["mermaid@11.16.1", "", { "dependencies": { "@braintree/sanitize-url": "^7.1.2", "@iconify/utils": "^3.0.2", "@mermaid-js/parser": "^1.2.0", "@types/d3": "^7.4.3", "@upsetjs/venn.js": "^2.0.0", "cytoscape": "^3.33.3", "cytoscape-cose-bilkent": "^4.1.0", "cytoscape-fcose": "^2.2.0", "d3": "^7.9.0", "d3-sankey": "^0.12.3", "dagre-d3-es": "7.0.14", "dayjs": "^1.11.20", "dompurify": "^3.3.3", "es-toolkit": "^1.45.1", "katex": "^0.16.45", "khroma": "^2.1.0", "marked": "^16.3.0", "roughjs": "^4.6.6", "stylis": "^4.3.6", "ts-dedent": "^2.2.0", "uuid": "^11.1.0 || ^12 || ^13 || ^14.0.0" } }, "sha512-TQsq6u22fAn3rek5VOubrhKPo1g5hwC3FXUN9hiyupTckcYiGuuKGkNQrKYwGJkXUxZdojwRG46gsSCFZMDp4g=="],
 
+    "meshoptimizer": ["meshoptimizer@1.1.1", "", {}, "sha512-oRFNWJRDA/WTrVj7NWvqa5HqE1t9MYDj2VaWirQCzCCrAd2GHrqR/sQezCxiWATPNlKTcRaPRHPJwIRoPBAp5g=="],
+
     "micromark": ["micromark@4.0.2", "", { "dependencies": { "@types/debug": "^4.0.0", "debug": "^4.0.0", "decode-named-character-reference": "^1.0.0", "devlop": "^1.0.0", "micromark-core-commonmark": "^2.0.0", "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-chunked": "^2.0.0", "micromark-util-combine-extensions": "^2.0.0", "micromark-util-decode-numeric-character-reference": "^2.0.0", "micromark-util-encode": "^2.0.0", "micromark-util-normalize-identifier": "^2.0.0", "micromark-util-resolve-all": "^2.0.0", "micromark-util-sanitize-uri": "^2.0.0", "micromark-util-subtokenize": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA=="],
 
     "micromark-core-commonmark": ["micromark-core-commonmark@2.0.3", "", { "dependencies": { "decode-named-character-reference": "^1.0.0", "devlop": "^1.0.0", "micromark-factory-destination": "^2.0.0", "micromark-factory-label": "^2.0.0", "micromark-factory-space": "^2.0.0", "micromark-factory-title": "^2.0.0", "micromark-factory-whitespace": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-chunked": "^2.0.0", "micromark-util-classify-character": "^2.0.0", "micromark-util-html-tag-name": "^2.0.0", "micromark-util-normalize-identifier": "^2.0.0", "micromark-util-resolve-all": "^2.0.0", "micromark-util-subtokenize": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg=="],
@@ -4498,6 +4512,8 @@
 
     "thread-stream": ["thread-stream@3.2.0", "", { "dependencies": { "real-require": "^0.2.0" } }, "sha512-zLBvqpwr4Esa0kRjcrzGU6zL25lePWaCLMx0RQFrmteozIfeNdaMLpG5U7PeHzvlFkAWaRKA9/KVW4F60iB+qw=="],
 
+    "three": ["three@0.185.1", "", {}, "sha512-5aojFCXKwnjBRZvUnt3WFfEcvUJgkN5LlijRFN95hMy8WVkG4I0QNcJE+OuWvuJ0bOdStrbfXn0pkd6/QyiAlg=="],
+
     "tiny-async-pool": ["tiny-async-pool@1.3.0", "", { "dependencies": { "semver": "^5.5.0" } }, "sha512-01EAw5EDrcVrdgyCLgoSPvqznC0sVxDSVeiOz09FUpjh71G79VCqneOr+xvt7T1r76CF6ZZfPjHorN2+d+3mqA=="],
 
     "tiny-inflate": ["tiny-inflate@1.0.3", "", {}, "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw=="],
@@ -4996,8 +5012,6 @@
 
     "@smithy/hash-node/@smithy/core": ["@smithy/core@3.25.0", "", { "dependencies": { "@aws-crypto/crc32": "5.2.0", "@smithy/types": "^4.15.0", "tslib": "^2.6.2" } }, "sha512-TTD6el7tvKyafkXBf7XO3jLOE+qVxOTrLjp/fEGiV3BMfUHK/LfdYlQO9YgZvzxC7kqA3H/IhJXNqQgnbgjb7A=="],
 
-    "@smithy/middleware-compression/fflate": ["fflate@0.8.3", "", {}, "sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA=="],
-
     "@smithy/signature-v4/@smithy/core": ["@smithy/core@3.25.0", "", { "dependencies": { "@aws-crypto/crc32": "5.2.0", "@smithy/types": "^4.15.0", "tslib": "^2.6.2" } }, "sha512-TTD6el7tvKyafkXBf7XO3jLOE+qVxOTrLjp/fEGiV3BMfUHK/LfdYlQO9YgZvzxC7kqA3H/IhJXNqQgnbgjb7A=="],
 
     "@smithy/signature-v4/@smithy/types": ["@smithy/types@4.15.0", "", { "dependencies": { "tslib": "^2.6.2" } }, "sha512-Z5TAOxygoFvybJV3igo5SloFflSokHx2hu1eFA+DxDTcn+FtKxUSui+rbTRG1pAafMA888Z3MVvCWUuvCrTXjg=="],
@@ -5394,6 +5408,8 @@
 
     "plist/xmlbuilder": ["xmlbuilder@15.1.1", "", {}, "sha512-yMqGBqtXyeN1e3TGYvgNgDVZ3j84W4cwkOXQswghol6APgZWaff9lnbvN7MHYJOiXsvGPXtjTYJEiC9J2wv9Eg=="],
 
+    "posthog-js/fflate": ["fflate@0.4.8", "", {}, "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA=="],
+
     "posthog-node/@posthog/core": ["@posthog/core@1.24.4", "", { "dependencies": { "cross-spawn": "^7.0.6" } }, "sha512-S+TolwBHSSJz7WWtgaELQWQqXviSm3uf1e+qorWUts0bZcgPwWzhnmhCUZAhvn0NVpTQHDJ3epv+hHbPLl5dHg=="],
 
     "postject/commander": ["commander@9.5.0", "", {}, "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ=="],
diff --git a/packages/emcn/src/icons/index.ts b/packages/emcn/src/icons/index.ts
index 2509b2d14f1..1dc8fdab2a2 100644
--- a/packages/emcn/src/icons/index.ts
+++ b/packages/emcn/src/icons/index.ts
@@ -101,6 +101,12 @@ export { MessageSquareText } from './message-square-text'
 export { Mic } from './mic'
 export { MicOff } from './mic-off'
 export { Minus } from './minus'
+export {
+  CLAUDE_MARK_PATH,
+  GEMINI_MARK_PATH,
+  OPENAI_MARK_PATH,
+  XAI_MARK_POLYGONS,
+} from './model-marks'
 export { Moon } from './moon'
 export { MoreHorizontal } from './more-horizontal'
 export { MoreVertical } from './more-vertical'
diff --git a/packages/emcn/src/icons/model-marks.ts b/packages/emcn/src/icons/model-marks.ts
new file mode 100644
index 00000000000..b45656e1b07
--- /dev/null
+++ b/packages/emcn/src/icons/model-marks.ts
@@ -0,0 +1,16 @@
+/** Canonical provider artwork shared by product icons and the landing stack engraving. */
+export const CLAUDE_MARK_PATH =
+  'm19.6 66.5 19.7-11 .3-1-.3-.5h-1l-3.3-.2-11.2-.3L14 53l-9.5-.5-2.4-.5L0 49l.2-1.5 2-1.3 2.9.2 6.3.5 9.5.6 6.9.4L38 49.1h1.6l.2-.7-.5-.4-.4-.4L29 41l-10.6-7-5.6-4.1-3-2-1.5-2-.6-4.2 2.7-3 3.7.3.9.2 3.7 2.9 8 6.1L37 36l1.5 1.2.6-.4.1-.3-.7-1.1L33 25l-6-10.4-2.7-4.3-.7-2.6c-.3-1-.4-2-.4-3l3-4.2L28 0l4.2.6L33.8 2l2.6 6 4.1 9.3L47 29.9l2 3.8 1 3.4.3 1h.7v-.5l.5-7.2 1-8.7 1-11.2.3-3.2 1.6-3.8 3-2L61 2.6l2 2.9-.3 1.8-1.1 7.7L59 27.1l-1.5 8.2h.9l1-1.1 4.1-5.4 6.9-8.6 3-3.5L77 13l2.3-1.8h4.3l3.1 4.7-1.4 4.9-4.4 5.6-3.7 4.7-5.3 7.1-3.2 5.7.3.4h.7l12-2.6 6.4-1.1 7.6-1.3 3.5 1.6.4 1.6-1.4 3.4-8.2 2-9.6 2-14.3 3.3-.2.1.2.3 6.4.6 2.8.2h6.8l12.6 1 3.3 2 1.9 2.7-.3 2-5.1 2.6-6.8-1.6-16-3.8-5.4-1.3h-.8v.4l4.6 4.5 8.3 7.5L89 80.1l.5 2.4-1.3 2-1.4-.2-9.2-7-3.6-3-8-6.8h-.5v.7l1.8 2.7 9.8 14.7.5 4.5-.7 1.4-2.6 1-2.7-.6-5.8-8-6-9-4.7-8.2-.5.4-2.9 30.2-1.3 1.5-3 1.2-2.5-2-1.4-3 1.4-6.2 1.6-8 1.3-6.4 1.2-7.9.7-2.6v-.2H49L43 72l-9 12.3-7.2 7.6-1.7.7-3-1.5.3-2.8L24 86l10-12.8 6-7.9 4-4.6-.1-.5h-.3L17.2 77.4l-4.7.6-2-2 .2-3 1-1 8-5.5Z'
+
+export const OPENAI_MARK_PATH =
+  'M22.28 9.82a5.98 5.98 0 0 0-.516-4.91 6.05 6.05 0 0 0-6.51-2.9A6.07 6.07 0 0 0 4.98 4.18a5.98 5.98 0 0 0-4 2.9 6.05 6.05 0 0 0 .743 7.1 5.98 5.98 0 0 0 .511 4.91 6.05 6.05 0 0 0 6.51 2.9A5.98 5.98 0 0 0 13.26 24a6.06 6.06 0 0 0 5.77-4.21 5.99 5.99 0 0 0 4-2.9 6.06 6.06 0 0 0-.748-7.07zm-9.02 12.61a4.48 4.48 0 0 1-2.88-1.04l.142-.08 4.78-2.76a.795.79 0 0 0 .393-.681v-6.74l2.02 1.17a.71.07 0 0 1 .38.05v5.58a4.5 4.5 0 0 1-4.49 4.49zm-9.66-4.13a4.47 4.47 0 0 1-.535-3.01l.142.09 4.78 2.76a.771.77 0 0 0 .781 0l5.84-3.37v2.33a.804.08 0 0 1-.332.06L9.74 19.95a4.5 4.5 0 0 1-6.14-1.65zM2.34 7.9a4.49 4.49 0 0 1 2.37-1.97V11.6a.766.77 0 0 0 .388.68l5.81 3.35-2.02 1.17a.757.08 0 0 1-.071 0l-4.83-2.79A4.5 4.5 0 0 1 2.34 7.87zm16.6 3.86L13.1 8.36 15.12 7.2a.757.08 0 0 1 .071 0l4.83 2.79a4.49 4.49 0 0 1-.676 8.1v-5.68a.79.79 0 0 0-.407-.667zm2.01-3.02l-.142-.085-4.77-2.78a.776.78 0 0 0-.785 0L9.41 9.23V6.9a.662.07 0 0 1 .028-.061l4.83-2.79a4.5 4.5 0 0 1 6.68 4.66zM8.31 12.86l-2.02-1.16a.804.08 0 0 1-.038-.057V6.07a4.5 4.5 0 0 1 7.38-3.45l-.142.08L8.7 5.46a.795.79 0 0 0-.393.68zm1.1-2.37l2.6-1.5 2.61 1.5v3l-2.6 1.5-2.61-1.5Z'
+
+export const GEMINI_MARK_PATH =
+  'M12 24A14.3 14.3 0 000 12 14.3 14.3 0 0012 0a14.31 14.31 0 0012 12 14.31 14.31 0 00-12 12'
+
+export const XAI_MARK_POLYGONS = [
+  '557.09,211.99 565.4,538.36 631.96,538.36 640.28,93.18',
+  '640.28,56.91 538.72,56.91 379.35,284.53 430.13,357.05',
+  '201.61,538.36 303.17,538.36 353.96,465.84 303.17,393.31',
+  '201.61,211.99 430.13,538.36 531.69,538.36 303.17,211.99',
+] as const

From d04f6e33eef582e6ed11e7409a62954c2db37e73 Mon Sep 17 00:00:00 2001
From: andresdjasso <andresdjasso@users.noreply.github.com>
Date: Thu, 10 Sep 2026 15:20:28 -0700
Subject: [PATCH 2/2] fix(landing): defer stack CTA focus until visible

---
 .../components/sim-stack/stack-intro.test.tsx | 122 ++++++++++++++++++
 .../components/sim-stack/stack-intro.tsx      |  72 ++++++++---
 2 files changed, 174 insertions(+), 20 deletions(-)
 create mode 100644 apps/sim/app/(landing)/components/sim-stack/stack-intro.test.tsx

diff --git a/apps/sim/app/(landing)/components/sim-stack/stack-intro.test.tsx b/apps/sim/app/(landing)/components/sim-stack/stack-intro.test.tsx
new file mode 100644
index 00000000000..a271a2aad95
--- /dev/null
+++ b/apps/sim/app/(landing)/components/sim-stack/stack-intro.test.tsx
@@ -0,0 +1,122 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, type HTMLAttributes, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const animation = vi.hoisted(() => ({
+  start: () => {},
+  complete: (_state: string) => {},
+  reduced: false,
+}))
+
+vi.mock('@sim/emcn', () => ({
+  cn: (...values: unknown[]) => values.filter(Boolean).join(' '),
+  usePrefersReducedMotion: () => animation.reduced,
+}))
+vi.mock('@/lib/branding/wordmark', () => ({
+  WORDMARK_PATHS: [],
+  WORDMARK_VIEW_BOX: { width: 100, height: 40 },
+}))
+vi.mock('@/app/(landing)/components/landing-cta-link', () => ({
+  LandingCtaLink: ({ children }: { children: ReactNode }) => <a href='/signup'>{children}</a>,
+}))
+vi.mock('framer-motion', () => ({
+  motion: {
+    div: ({
+      children,
+      onAnimationStart,
+      onAnimationComplete,
+      initial: _initial,
+      animate: _animate,
+      variants: _variants,
+      transition: _transition,
+      ...props
+    }: Omit<HTMLAttributes<HTMLDivElement>, 'onAnimationStart'> & {
+      onAnimationStart: () => void
+      onAnimationComplete: (state: string) => void
+      initial: boolean
+      animate: string
+      variants: unknown
+      transition: unknown
+    }) => {
+      animation.start = onAnimationStart
+      animation.complete = onAnimationComplete
+      return <div {...props}>{children}</div>
+    },
+  },
+}))
+
+import { StackIntro } from '@/app/(landing)/components/sim-stack/stack-intro'
+
+let root: Root
+let host: HTMLDivElement
+
+function render(element: ReactNode) {
+  const rerender = (next: ReactNode) => act(() => root.render(next))
+  rerender(element)
+  return { container: host, rerender }
+}
+
+function getCta(container: HTMLElement) {
+  return container.querySelector('[data-stack-completion-cta]') as HTMLElement
+}
+
+function expectInteractive(cta: HTMLElement, interactive: boolean) {
+  expect(cta.hasAttribute('inert')).toBe(!interactive)
+  expect(cta.getAttribute('aria-hidden')).toBe(String(!interactive))
+}
+
+describe('StackIntro CTA focus', () => {
+  beforeEach(() => {
+    animation.reduced = false
+    vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+    host = document.createElement('div')
+    document.body.appendChild(host)
+    root = createRoot(host)
+  })
+
+  afterEach(() => {
+    act(() => root.unmount())
+    host.remove()
+    vi.unstubAllGlobals()
+  })
+
+  it('keeps the CTA inert until its entrance finishes', () => {
+    const { container, rerender } = render(<StackIntro progress={4} />)
+    expectInteractive(getCta(container), false)
+    rerender(<StackIntro progress={5} />)
+    act(() => animation.start())
+    expectInteractive(getCta(container), false)
+    act(() => animation.complete('visible'))
+    expectInteractive(getCta(container), true)
+  })
+
+  it('disables focus immediately on rewind and waits for the next entrance', () => {
+    const { container, rerender } = render(<StackIntro progress={6} />)
+    expectInteractive(getCta(container), true)
+    rerender(<StackIntro progress={4} />)
+    expectInteractive(getCta(container), false)
+    act(() => animation.start())
+    rerender(<StackIntro progress={5} />)
+    expectInteractive(getCta(container), false)
+    act(() => animation.complete('visible'))
+    expectInteractive(getCta(container), true)
+  })
+
+  it('keeps an interrupted entrance inert when it finishes hidden', () => {
+    const { container, rerender } = render(<StackIntro progress={4} />)
+    rerender(<StackIntro progress={5} />)
+    act(() => animation.start())
+    rerender(<StackIntro progress={4} />)
+    act(() => animation.complete('hidden'))
+    expectInteractive(getCta(container), false)
+  })
+
+  it('makes a completed initial scene interactive with reduced motion', () => {
+    animation.reduced = true
+    const { container } = render(<StackIntro progress={6} />)
+    expectInteractive(getCta(container), true)
+  })
+})
diff --git a/apps/sim/app/(landing)/components/sim-stack/stack-intro.tsx b/apps/sim/app/(landing)/components/sim-stack/stack-intro.tsx
index 8bbf9fa93aa..beee60f8cce 100644
--- a/apps/sim/app/(landing)/components/sim-stack/stack-intro.tsx
+++ b/apps/sim/app/(landing)/components/sim-stack/stack-intro.tsx
@@ -1,7 +1,8 @@
 'use client'
 
-import { useId } from 'react'
-import { cn } from '@sim/emcn'
+import { type ReactNode, useId, useState } from 'react'
+import { cn, usePrefersReducedMotion } from '@sim/emcn'
+import { motion } from 'framer-motion'
 import { WORDMARK_PATHS, WORDMARK_VIEW_BOX } from '@/lib/branding/wordmark'
 import { LandingCtaLink } from '@/app/(landing)/components/landing-cta-link'
 import {
@@ -17,10 +18,45 @@ interface StackIntroProps {
   progress: number
 }
 
+interface AnimatedCtaProps {
+  show: boolean
+  children: ReactNode
+}
+
+function AnimatedCta({ show, children }: AnimatedCtaProps) {
+  const [visible, setVisible] = useState(show)
+  const interactive = show && visible
+  return (
+    <motion.div
+      data-stack-completion-cta
+      initial={false}
+      animate={show ? 'visible' : 'hidden'}
+      variants={{ visible: { opacity: 1 }, hidden: { opacity: 0 } }}
+      transition={{ duration: 0.3 }}
+      onAnimationStart={() => setVisible(false)}
+      onAnimationComplete={(state) => setVisible(state === 'visible')}
+      inert={!interactive}
+      aria-hidden={!interactive}
+      className={cn(
+        'col-start-1 row-start-1',
+        interactive ? 'pointer-events-auto' : 'pointer-events-none'
+      )}
+    >
+      {children}
+    </motion.div>
+  )
+}
+
 /** The heading remains above the arriving planes; supporting copy fades once exploration begins. */
 export function StackIntro({ progress }: StackIntroProps) {
   const wordmarkInkId = useId()
   const showCta = getStackLayerProgress(progress, STACK_LAYERS.length - 1).entrance > 0
+  const reducedMotion = usePrefersReducedMotion()
+  const cta = (
+    <LandingCtaLink variant='outline' size='display' href={SIGNUP_HREF} prefetch={false} withArrow>
+      Start building
+    </LandingCtaLink>
+  )
   return (
     <div
       className={cn(
@@ -66,25 +102,21 @@ export function StackIntro({ progress }: StackIntroProps) {
           The complete stack for AI agents. From your data and models to the workflows they power,
           all built on a foundation of control.
         </p>
-        <div
-          data-stack-completion-cta
-          inert={!showCta}
-          aria-hidden={!showCta}
-          className={cn(
-            'col-start-1 row-start-1 transition-opacity duration-300 motion-reduce:transition-none',
-            showCta ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'
-          )}
-        >
-          <LandingCtaLink
-            variant='outline'
-            size='display'
-            href={SIGNUP_HREF}
-            prefetch={false}
-            withArrow
+        {reducedMotion ? (
+          <div
+            data-stack-completion-cta
+            inert={!showCta}
+            aria-hidden={!showCta}
+            className={cn(
+              'col-start-1 row-start-1 transition-none',
+              showCta ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'
+            )}
           >
-            Start building
-          </LandingCtaLink>
-        </div>
+            {cta}
+          </div>
+        ) : (
+          <AnimatedCta show={showCta}>{cta}</AnimatedCta>
+        )}
       </div>
     </div>
   )