diff --git a/website/CLAUDE.md b/website/CLAUDE.md
index 3997a5f1b0..6c1e71798b 100644
--- a/website/CLAUDE.md
+++ b/website/CLAUDE.md
@@ -61,3 +61,19 @@ Import from `@rivet-gg/icons`. The full Font Awesome Pro library is available. C
 - Do not split related multi-file examples into separate non-workspace code blocks.
 
 - If any code block fails type checking, the build fails.
+
+## Typography
+
+- Marketing headings and card titles use `font-medium` (h1 heroes, section h2s, h3/h4 card titles, FAQ headings, price figures). Do not introduce `font-normal` headings.
+- `font-normal` remains correct only for deliberate de-emphasis: table `th` de-bolding, quiet `dt` labels, and input-like UI (TypesenseSearch).
+- Hero h1s and section h2s use the class constants in `src/components/marketing/typography.tsx` (`tracking-[-0.015em]`, h1 `leading-[1.06]`). Do not hand-write `tracking-tight` on headings at `text-2xl` or larger; `tracking-tight` stays acceptable on `text-base` and smaller card titles.
+- Manrope is the only marketing typeface; JetBrains Mono covers code, eyebrows, and captions. No serif headings on marketing pages; the Learn section's serif treatment is the only exception.
+- Section labels use the eyebrow convention (`EYEBROW_CLASS` or `editorial/Eyebrow`): mono, uppercase, `tracking-[0.18em]`, pine on porcelain, sage inside ink panels. Plate and panel captions use `CAPTION_CLASS` (`Fig. NN — ...`).
+
+## Theme
+
+- Marketing pages and docs are light: cool porcelain (`paper`, `#EFEFEF`) with a `paper-deep` radial pooling bottom-left (`.depth-wash`) and a fine grain (`.paper-grain`). Warmth comes from warm-black `ink` text, classical imagery, and oil-paint textures, never from synthetic color gradients. Do not use the cream `mat` token as a surface/background design element on light surfaces (panels, dropdowns, badges, plate frames); use `paper`/`paper-mid`/`white` or `ink`-tint neutrals instead. `cream` stays valid only as the off-white text/fill inside dark `ink` panels. Docs paint the same porcelain field, render prose via `Prose surface="paper"`, and use `pine` for the active sidebar/TOC selected state; only the Learn section keeps a dark shell, and no other page may introduce a dark base.
+- Dark `ink` panels (`editorial/InkPanel`) are reserved for code, terminal, screenshot, and data moments. Code and data plates stay flat ink; the oil-texture backdrop (`textureSrc`) is for editorial moments only (CTA colophon, 404).
+- Orange is the spark: at most one `accent`/ember CTA per page. White text sits only on `accent-deep` (`#D63E00`) or `ink` fills, never on `accent`. Pine (`#2E4034`) is the structural color for links, eyebrows, diagrams, and selected states; sage (`#93A286`) replaces it inside ink panels.
+- No drop shadows on marketing cards or imagery; depth comes from `border-ink/10..25` hairlines, `bg-white/55` card fills, and `paper-mid`/`paper-deep` layering (inside ink panels: `border-cream/10..15`). Shadows stay acceptable on functional overlays (dropdowns, tooltips, modals) and the header's glass inset highlight.
+- `ink-faint` text is for captions and metadata at 12px+; body copy uses `ink-soft` or `ink`.
diff --git a/website/public/fonts/jetbrains-mono/JetBrainsMono-Variable-latin.woff2 b/website/public/fonts/jetbrains-mono/JetBrainsMono-Variable-latin.woff2
new file mode 100644
index 0000000000..c3f0666ea8
Binary files /dev/null and b/website/public/fonts/jetbrains-mono/JetBrainsMono-Variable-latin.woff2 differ
diff --git a/website/public/fonts/manrope/Manrope-Variable-latin.woff2 b/website/public/fonts/manrope/Manrope-Variable-latin.woff2
new file mode 100644
index 0000000000..9d7abb17d3
Binary files /dev/null and b/website/public/fonts/manrope/Manrope-Variable-latin.woff2 differ
diff --git a/website/public/images/textures/bruegel-childrens-games-hero.jpg b/website/public/images/textures/bruegel-childrens-games-hero.jpg
new file mode 100644
index 0000000000..ac91d45965
Binary files /dev/null and b/website/public/images/textures/bruegel-childrens-games-hero.jpg differ
diff --git a/website/public/images/textures/monet-water-lilies-hero.jpg b/website/public/images/textures/monet-water-lilies-hero.jpg
new file mode 100644
index 0000000000..0e9bc21c58
Binary files /dev/null and b/website/public/images/textures/monet-water-lilies-hero.jpg differ
diff --git a/website/public/images/textures/oil-olive-landscape.jpg b/website/public/images/textures/oil-olive-landscape.jpg
new file mode 100644
index 0000000000..40c10f21cf
Binary files /dev/null and b/website/public/images/textures/oil-olive-landscape.jpg differ
diff --git a/website/redirects.mjs b/website/redirects.mjs
index a77d8605c0..3137f0ed40 100644
--- a/website/redirects.mjs
+++ b/website/redirects.mjs
@@ -36,6 +36,7 @@ export const redirects = {
 	// Self-hosting redirect
 	'/docs/general/self-hosting': '/docs/self-hosting/',
 	// Removed solution pages
+	'/agent': '/actors/',
 	'/solutions/agents': '/',
 	'/solutions/app-generators': '/',
 	'/solutions/collaborative-state': '/',
diff --git a/website/src/components/Accordion.jsx b/website/src/components/Accordion.jsx
index e267e4103d..1bf0b49d53 100644
--- a/website/src/components/Accordion.jsx
+++ b/website/src/components/Accordion.jsx
@@ -6,19 +6,16 @@ function getAccordionStyleFromVariant(variant) {
 		// Minimal padding. Shows a border along the left when open.
 		return {
 			parentClass: "",
-			coverClass:
-				"[&>div]:ml-2 py-1 text-charcole-700 hover:text-charcole-900 dark:text-cream-400 dark:hover:text-cream-200",
-			contentClass:
-				"mt-2 pt-1 mb-4 mx-[7px] px-4 border-l border-cream-100 dark:border-charcole-800",
+			coverClass: "[&>div]:ml-2 py-1 text-ink-soft hover:text-ink",
+			contentClass: "mt-2 pt-1 mb-4 mx-[7px] px-4 border-l border-ink/10",
 		};
 	}
 
 	// Rounding is handled in Accordion by passing in isRounded to AccordionCover.
 	return {
-		parentClass:
-			"border dark:border-charcole-800 rounded-xl mb-3 overflow-hidden",
+		parentClass: "border border-ink/10 rounded-xl mb-3 overflow-hidden",
 		coverClass:
-			"py-4 px-5 space-x-2 hover:bg-violet-100 hover:dark:bg-white/10 rounded-t-xl transition",
+			"py-4 px-5 space-x-2 hover:bg-ink/[0.04] rounded-t-xl transition",
 		contentClass: "mt-2 mb-4 mx-6",
 	};
 }
@@ -56,22 +53,22 @@ export function Accordion({
 						icon={faCaretRight}
 						data-accordion-icon
 						className={clsx(
-							"h-3 w-3 text-charcole-800 opacity-75 dark:text-cream-100 transition-transform duration-200",
+							"h-3 w-3 text-ink-faint opacity-75 transition-transform duration-200",
 							defaultOpen && "rotate-90"
 						)}
 					/>
 				</div>
 				{icon ? (
-					<div className="h-4 w-4 fill-charcole-800 text-charcole-800 dark:fill-cream-100 dark:text-cream-100">
+					<div className="h-4 w-4 fill-ink text-ink">
 						{icon}
 					</div>
 				) : null}
 				<div className="text-left leading-tight">
-					<p className="m-0 font-medium text-charcole-900 dark:text-cream-200">
+					<p className="m-0 font-medium text-ink">
 						{title}
 					</p>
 					{description ? (
-						<p className="m-0 text-charcole-900 dark:text-cream-200">
+						<p className="m-0 text-ink-soft">
 							{description}
 						</p>
 					) : null}
@@ -94,7 +91,7 @@ export function AccordionGroup({ children }) {
 	// when inside of an Accordion group.
 	return (
 		<div
-			className="mb-3 mt-0 divide-y divide-inherit overflow-hidden rounded-xl border dark:border-charcole-800 [&>div>button]:rounded-none [&>div]:mb-0 [&>div]:rounded-none [&>div]:border-0"
+			className="mb-3 mt-0 divide-y divide-ink/10 overflow-hidden rounded-xl border border-ink/10 [&>div>button]:rounded-none [&>div]:mb-0 [&>div]:rounded-none [&>div]:border-0"
 			role="list"
 		>
 			{children}
diff --git a/website/src/components/ArticleSocials.tsx b/website/src/components/ArticleSocials.tsx
index 6687e36ae1..9f610a5a72 100644
--- a/website/src/components/ArticleSocials.tsx
+++ b/website/src/components/ArticleSocials.tsx
@@ -19,7 +19,7 @@ export function ArticleSocials({ title }) {
 	const siteUrl = getSiteUrl();
 	const articleUrl = siteUrl + pathname;
 	return (
-		<div className="after:bg-secondary relative mt-14 flex items-center justify-center after:absolute after:inset-x-0 after:-z-[1] after:h-[1px]">
+		<div className="relative mt-14 flex items-center justify-center after:absolute after:inset-x-0 after:-z-[1] after:h-[1px] after:bg-ink/10">
 			<SocialIcon url="/rss/feed.xml" icon={faRssSquare} />
 			<SocialIcon
 				url={`https://x.com/share?text=${encodeURIComponent(`${title} ${articleUrl} via @rivet_dev`)}`}
@@ -45,7 +45,7 @@ function SocialIcon({ url, icon }) {
 			href={url}
 			target="_blank"
 			rel="noreferrer"
-			className="text-primary hover:text-primary/80 bg-background px-3 transition-colors"
+			className="bg-paper px-3 text-ink-faint transition-colors hover:text-pine"
 		>
 			<Icon icon={icon} size="xl" />
 		</a>
diff --git a/website/src/components/BlogArticle.astro b/website/src/components/BlogArticle.astro
index 5cb2456e3c..7de3c7c2bb 100644
--- a/website/src/components/BlogArticle.astro
+++ b/website/src/components/BlogArticle.astro
@@ -44,13 +44,13 @@ const otherArticles = allPosts
 	});
 ---
 
-<div class="blog-article relative w-full" style="--header-height: 5rem;">
+<div class="blog-article paper-grain relative w-full" style="--header-height: 5rem;">
 	<div class="mx-auto w-full max-w-[62rem] px-6 pb-24 pt-32 md:pt-40">
 		<article class="mx-auto w-full max-w-[44rem]">
 			<!-- Back link -->
 			<a
 				href="/blog/"
-				class="group flex items-center gap-2 text-sm text-zinc-500 transition-colors hover:text-white"
+				class="group flex items-center gap-2 text-sm text-ink-faint transition-colors hover:text-ink"
 			>
 				<Icon icon={faArrowLeft} className="h-3 w-auto transition-transform group-hover:-translate-x-0.5" />
 				Blog
@@ -58,14 +58,14 @@ const otherArticles = allPosts
 
 			<!-- Header -->
 			<header class="mb-12 mt-8">
-				<time datetime={entry.data.published.toISOString()} class="text-sm font-medium text-zinc-500">
+				<time datetime={entry.data.published.toISOString()} class="font-mono text-xs text-ink-faint">
 					{formatTimestamp(entry.data.published)}
 				</time>
-				<h1 class="mt-2 text-4xl font-normal leading-[1.1] tracking-tight text-white [text-wrap:balance] md:text-[3.25rem]">
+				<h1 class="mt-2 text-4xl font-medium leading-[1.06] tracking-[-0.015em] text-ink [text-wrap:balance] md:text-[3.25rem]">
 					{title}
 				</h1>
 				{description && (
-					<p class="mt-5 text-lg font-light leading-7 text-zinc-400 [text-wrap:pretty] md:text-xl">
+					<p class="mt-5 text-lg leading-7 text-ink-soft [text-wrap:pretty] md:text-xl">
 						{description}
 					</p>
 				)}
@@ -77,7 +77,7 @@ const otherArticles = allPosts
 					alt={title}
 					width={image.width}
 					height={image.height}
-					class="mb-12 aspect-[2/1] w-full rounded-2xl border border-white/10 object-cover"
+					class="mb-12 aspect-[2/1] w-full rounded-2xl border border-ink/10 object-cover"
 					loading="eager"
 					decoding="async"
 				/>
@@ -87,15 +87,15 @@ const otherArticles = allPosts
 				<Content components={mdxComponents} />
 			</Prose>
 
-			<div class="mt-16 border-t border-white/10 pt-8">
+			<div class="mt-16 border-t border-ink/10 pt-8">
 				<ArticleSocials title={title} client:load />
 			</div>
 		</article>
 
 		<!-- Read next -->
 		{otherArticles.length > 0 && (
-			<div class="mx-auto mt-24 w-full max-w-[62rem] border-t border-white/10 pt-10">
-				<h2 class="text-sm font-medium uppercase tracking-[0.12em] text-zinc-500">Read next</h2>
+			<div class="mx-auto mt-24 w-full max-w-[62rem] border-t border-ink/10 pt-10">
+				<h2 class="font-mono text-[11px] font-medium uppercase tracking-[0.16em] text-pine">Read next</h2>
 				<div class="mt-6 grid grid-cols-1 gap-6 md:grid-cols-3">
 					{otherArticles.map((article) => (
 						<a href={`${readNextBase}${article.slug}/`} class="group flex flex-col">
@@ -105,21 +105,21 @@ const otherArticles = allPosts
 									alt={article.title}
 									width={600}
 									height={300}
-									class="aspect-[2/1] w-full rounded-xl border border-white/10 object-cover transition-colors group-hover:border-white/25"
+									class="aspect-[2/1] w-full rounded-xl border border-ink/10 object-cover transition-colors group-hover:border-ink/25"
 									loading="lazy"
 									decoding="async"
 								/>
 							)}
 							<div class="mt-3 flex items-center gap-x-3 text-xs">
-								<span class="text-accent font-semibold uppercase tracking-[0.1em]">{article.category.name}</span>
-								<time datetime={article.published.toISOString()} class="text-zinc-500">
+								<span class="font-medium uppercase tracking-[0.1em] text-pine">{article.category.name}</span>
+								<time datetime={article.published.toISOString()} class="text-ink-faint">
 									{formatTimestamp(article.published)}
 								</time>
 							</div>
-							<h3 class="mt-2 text-base font-normal leading-snug text-white transition-colors group-hover:text-accent">
+							<h3 class="mt-2 text-base font-medium leading-snug text-ink transition-colors group-hover:text-pine">
 								{article.title}
 							</h3>
-							<span class="mt-2 inline-flex items-center gap-1.5 text-xs font-medium text-zinc-500 transition-colors group-hover:text-white">
+							<span class="mt-2 inline-flex items-center gap-1.5 text-xs font-medium text-ink-faint transition-colors group-hover:text-ink">
 								Read article
 								<Icon icon={faArrowRight} className="h-2.5 w-auto transition-transform group-hover:translate-x-0.5" />
 							</span>
@@ -136,7 +136,7 @@ const otherArticles = allPosts
 	.blog-article .blog-prose {
 		font-size: 1.0625rem;
 		line-height: 1.8;
-		color: hsl(var(--muted-foreground));
+		color: #56524a;
 	}
 
 	.blog-article .blog-prose p,
@@ -152,33 +152,36 @@ const otherArticles = allPosts
 
 	.blog-article .blog-prose h2 {
 		font-size: 1.75rem;
+		font-weight: 500;
 		line-height: 1.2;
 		letter-spacing: -0.02em;
 		margin-top: 2.75rem;
 		margin-bottom: 1rem;
-		color: #fff;
+		color: #1b1916;
 	}
 
 	.blog-article .blog-prose h3 {
 		font-size: 1.3rem;
+		font-weight: 500;
 		line-height: 1.3;
 		letter-spacing: -0.015em;
 		margin-top: 2.25rem;
 		margin-bottom: 0.75rem;
-		color: #fff;
+		color: #1b1916;
 	}
 
 	.blog-article .blog-prose h4 {
 		font-size: 1.075rem;
+		font-weight: 500;
 		margin-top: 2rem;
 		margin-bottom: 0.5rem;
-		color: #fff;
+		color: #1b1916;
 	}
 
 	.blog-article .blog-prose a {
-		color: #ff6a33;
+		color: #2e4034;
 		text-decoration: underline;
-		text-decoration-color: rgb(255 69 0 / 0.35);
+		text-decoration-color: rgb(46 64 52 / 0.35);
 		text-underline-offset: 0.2em;
 		text-decoration-thickness: 1px;
 		font-weight: 500;
@@ -186,28 +189,28 @@ const otherArticles = allPosts
 	}
 
 	.blog-article .blog-prose a:hover {
-		color: #ff8a5c;
-		text-decoration-color: rgb(255 69 0 / 0.9);
+		color: #1b1916;
+		text-decoration-color: rgb(46 64 52 / 0.9);
 	}
 
 	.blog-article .blog-prose strong {
-		color: #fff;
+		color: #1b1916;
 		font-weight: 600;
 	}
 
 	.blog-article .blog-prose :not(pre) > code {
-		background: rgb(255 255 255 / 0.06);
-		border: 1px solid rgb(255 255 255 / 0.08);
+		background: rgb(27 25 22 / 0.05);
+		border: 1px solid rgb(27 25 22 / 0.1);
 		border-radius: 0.375rem;
 		padding: 0.1em 0.4em;
 		font-size: 0.875em;
-		color: #e6e6e6;
+		color: #1b1916;
 	}
 
 	.blog-article .blog-prose pre {
 		border-radius: 0.75rem;
-		border: 1px solid rgb(255 255 255 / 0.1);
-		background: rgb(255 255 255 / 0.025);
+		border: 1px solid rgb(27 25 22 / 0.2);
+		background: #1b1916;
 		padding: 1.25rem 1.4rem;
 		font-size: 0.9rem;
 		line-height: 1.7;
@@ -216,22 +219,22 @@ const otherArticles = allPosts
 	}
 
 	.blog-article .blog-prose blockquote {
-		border-left: 2px solid #ff4500;
+		border-left: 2px solid #2e4034;
 		padding-left: 1.25rem;
 		font-style: normal;
-		color: hsl(var(--muted-foreground));
+		color: #56524a;
 	}
 
 	.blog-article .blog-prose img,
 	.blog-article .blog-prose video {
 		border-radius: 0.75rem;
-		border: 1px solid rgb(255 255 255 / 0.1);
+		border: 1px solid rgb(27 25 22 / 0.1);
 		margin-top: 2rem;
 		margin-bottom: 2rem;
 	}
 
 	.blog-article .blog-prose hr {
-		border-color: rgb(255 255 255 / 0.1);
+		border-color: rgb(27 25 22 / 0.1);
 		margin-top: 2.75rem;
 		margin-bottom: 2.75rem;
 	}
diff --git a/website/src/components/Card.tsx b/website/src/components/Card.tsx
index 5855597abf..9bc0df70c9 100644
--- a/website/src/components/Card.tsx
+++ b/website/src/components/Card.tsx
@@ -25,8 +25,8 @@ export function Card({
 	const content = (
 		<div
 			className={clsx(
-				"rounded-xl bg-neutral-950 border border-white/20 shadow-sm transition-all duration-200 relative overflow-hidden flex flex-col w-full h-full",
-				href && "group-hover:border-[white]/40 cursor-pointer",
+				"rounded-xl bg-white/55 border border-ink/15 transition-all duration-200 relative overflow-hidden flex flex-col w-full h-full",
+				href && "group-hover:border-ink/30 cursor-pointer",
 				className,
 			)}
 		>
@@ -34,7 +34,7 @@ export function Card({
 				<div className={clsx("px-8 mt-6", !hasBody && "pb-6")}>
 					<div
 						className={clsx(
-							"flex items-center justify-between text-white text-base",
+							"flex items-center justify-between text-ink text-base",
 							hasBody && "mb-4",
 						)}
 					>
@@ -42,7 +42,7 @@ export function Card({
 							{icon && <Icon icon={icon} />}
 							{title && <h3 className="font-medium">{title}</h3>}
 							{badge && (
-								<span className="text-xs font-medium px-2 py-0.5 rounded-full bg-white/10 text-white/60">
+								<span className="text-xs font-medium px-2 py-0.5 rounded-full bg-ink/[0.06] text-ink-soft">
 									{badge}
 								</span>
 							)}
@@ -50,7 +50,7 @@ export function Card({
 						{href && (
 							<Icon
 								icon={faArrowRight}
-								className="text-sm text-white/40 group-hover:text-white transition-all duration-200 group-hover:translate-x-1"
+								className="text-sm text-ink-faint group-hover:text-ink transition-all duration-200 group-hover:translate-x-1"
 							/>
 						)}
 					</div>
diff --git a/website/src/components/CollapsibleSidebarItem.tsx b/website/src/components/CollapsibleSidebarItem.tsx
index cd4ca4137a..91a57ca86f 100644
--- a/website/src/components/CollapsibleSidebarItem.tsx
+++ b/website/src/components/CollapsibleSidebarItem.tsx
@@ -89,7 +89,7 @@ export function CollapsibleSidebarItem({
 			<button
 				type="button"
 				className={cn(
-					"flex w-full appearance-none items-center justify-between border-l-2 border-l-border py-2 text-sm text-muted-foreground transition-colors hover:text-foreground hover:border-l-muted-foreground/50 data-[active]:text-foreground data-[active]:border-l-orange-500",
+					"flex w-full appearance-none items-center justify-between border-l-2 border-l-ink/15 py-2 text-sm text-ink-soft transition-colors hover:text-ink hover:border-l-ink/30 data-[active]:text-ink data-[active]:border-l-pine",
 					getPaddingClass(level),
 				)}
 				data-active={isCurrent ? true : undefined}
@@ -108,7 +108,7 @@ export function CollapsibleSidebarItem({
 					) : null}
 					<span className="truncate">{item.title}</span>
 					{"badge" in item && item.badge ? (
-						<span className="px-2 py-0.5 text-xs font-medium bg-muted text-muted-foreground rounded-full whitespace-nowrap">
+						<span className="px-2 py-0.5 text-xs font-medium bg-ink/[0.06] text-ink-soft rounded-full whitespace-nowrap">
 							{item.badge}
 						</span>
 					) : null}
diff --git a/website/src/components/DocsNavigation.tsx b/website/src/components/DocsNavigation.tsx
index 5c7d5698d3..8696676266 100644
--- a/website/src/components/DocsNavigation.tsx
+++ b/website/src/components/DocsNavigation.tsx
@@ -48,7 +48,7 @@ function TreeItem({ index, item, level = 0, parentPath = "" }: TreeItemProps) {
 			<div>
 				<p
 					className={clsx(
-						"mb-3 text-[15px] font-semibold flex items-center",
+						"mb-3 text-[15px] font-semibold text-ink flex items-center",
 						index > 0 ? "mt-6" : undefined,
 					)}
 				>
@@ -57,7 +57,7 @@ function TreeItem({ index, item, level = 0, parentPath = "" }: TreeItemProps) {
 					) : null}
 					<span className="truncate"> {item.title}</span>
 					{"badge" in item && item.badge ? (
-						<span className="ml-2 px-2 py-0.5 text-xs font-medium bg-muted text-muted-foreground rounded-full whitespace-nowrap">
+						<span className="ml-2 px-2 py-0.5 text-xs font-medium bg-ink/[0.06] text-ink-soft rounded-full whitespace-nowrap">
 							{item.badge}
 						</span>
 					) : null}
@@ -88,7 +88,7 @@ function TreeItem({ index, item, level = 0, parentPath = "" }: TreeItemProps) {
 				</span>
 			</span>
 			{"badge" in item && item.badge ? (
-				<span className="ml-2 px-[6px] py-0 text-[10px] font-medium bg-muted border border-white/10 text-muted-foreground rounded-sm whitespace-nowrap">
+				<span className="ml-2 px-[6px] py-0 text-[10px] font-medium bg-ink/[0.06] border border-ink/10 text-ink-soft rounded-sm whitespace-nowrap">
 					{item.badge}
 				</span>
 			) : null}
@@ -163,7 +163,7 @@ export function NavLink({
 			href={href}
 			target={external && "_blank"}
 			className={cn(
-				"group flex w-full items-center border-l-2 border-l-border py-2 text-sm text-muted-foreground transition-colors hover:text-foreground hover:border-l-muted-foreground/50 aria-current-page:text-foreground aria-current-page:border-l-orange-500",
+				"group flex w-full items-center border-l-2 border-l-ink/15 py-2 text-sm text-ink-soft transition-colors hover:text-ink hover:border-l-ink/30 aria-current-page:text-ink aria-current-page:border-l-pine",
 				getPaddingClass(level),
 				className,
 			)}
@@ -176,7 +176,7 @@ export function NavLink({
 export function DocsNavigation({ sidebar }: { sidebar: SidebarItem[] }) {
 	return (
 		<NavigationStateProvider>
-			<div className="sticky top-header max-h-content text-white pl-8 pr-6 py-6 overflow-y-auto">
+			<div className="sticky top-header max-h-content text-ink pl-8 pr-6 py-6 overflow-y-auto [mask-image:linear-gradient(to_bottom,transparent_0,#000_2rem,#000_calc(100%-1.5rem),transparent_100%)] [-webkit-mask-image:linear-gradient(to_bottom,transparent_0,#000_2rem,#000_calc(100%-1.5rem),transparent_100%)]">
 				<Tree pages={sidebar} />
 			</div>
 		</NavigationStateProvider>
diff --git a/website/src/components/DocsPageDropdown.tsx b/website/src/components/DocsPageDropdown.tsx
index d4ef64eb2e..74a11b297f 100644
--- a/website/src/components/DocsPageDropdown.tsx
+++ b/website/src/components/DocsPageDropdown.tsx
@@ -110,7 +110,7 @@ export function DocsPageDropdown({
 				variant="outline"
 				size="sm"
 				onClick={copyPage}
-				className="h-8 rounded-r-none border-r-0"
+				className="h-8 rounded-r-none border-r-0 border-ink/15 bg-white/55 text-ink hover:border-ink/30 hover:bg-white/70 hover:text-ink"
 			>
 				<Icon icon={faMarkdown} className="mr-1 h-4 w-4" />
 				Copy Markdown
@@ -120,12 +120,12 @@ export function DocsPageDropdown({
 					<Button
 						variant="outline"
 						size="sm"
-						className="h-8 w-8 p-0 rounded-l-none border-l border-l-border/50"
+						className="h-8 w-8 p-0 rounded-l-none border-l border-l-ink/15 border-ink/15 bg-white/55 text-ink hover:border-ink/30 hover:bg-white/70 hover:text-ink"
 					>
 						<Icon icon={faChevronDown} className="h-3 w-3" />
 					</Button>
 				</DropdownMenuTrigger>
-				<DropdownMenuContent align="end" className="w-56 bg-popover">
+				<DropdownMenuContent align="end" className="w-56 bg-white border border-ink/10 text-ink [&_[role=menuitem]]:text-ink [&_[role=menuitem][data-highlighted]]:bg-ink/[0.06] [&_[role=menuitem][data-highlighted]]:text-ink">
 					<DropdownMenuItem onClick={copyLinkToMarkdown}>
 						<Icon icon={faLink} className="mr-2 h-4 w-4" />
 						Copy link to Markdown
diff --git a/website/src/components/DocsTableOfContents.tsx b/website/src/components/DocsTableOfContents.tsx
index adfcb9751d..ab28a6d5c7 100644
--- a/website/src/components/DocsTableOfContents.tsx
+++ b/website/src/components/DocsTableOfContents.tsx
@@ -92,7 +92,7 @@ function NavLink({ id, isActive, children }) {
 			<a href={`#${id}`}
 				aria-current={isActive ? "page" : undefined}
 				className={cn(
-					"group flex w-full items-center rounded-md border border-transparent px-2 py-1 text-sm text-muted-foreground hover:underline aria-current-page:text-foreground",
+					"group flex w-full items-center rounded-md border border-transparent px-2 py-1 text-sm text-ink-soft hover:text-ink aria-current-page:text-ink",
 				)}
 			>
 				<span className="truncate">{children}</span>
@@ -109,13 +109,13 @@ export function ActiveSectionMarker({ prefix }) {
 				layoutId={`${prefix}current-background`}
 				initial={{ opacity: 0 }}
 				animate={{ opacity: 1 }}
-				className="absolute inset-0 -left-2 bg-charcole-800/2.5 will-change-transform dark:bg-white/2.5"
+				className="absolute inset-0 -left-2 bg-ink/[0.04] will-change-transform"
 				style={{ borderRadius: 8 }}
 			/>
 			<motion.div
 				layout
 				layoutId={`${prefix}current-line`}
-				className="absolute left-0 top-1 h-6 w-px bg-cream-500"
+				className="absolute left-0 top-1 h-6 w-px bg-pine"
 				initial={{ opacity: 0 }}
 				animate={{ opacity: 1 }}
 			/>
diff --git a/website/src/components/DocsTabs.tsx b/website/src/components/DocsTabs.tsx
index d0e2c1b4ef..575c4b7957 100644
--- a/website/src/components/DocsTabs.tsx
+++ b/website/src/components/DocsTabs.tsx
@@ -5,13 +5,13 @@ import { findPageForHref } from "@/lib/sitemap";
 import { sitemap } from "@/sitemap/mod";
 import { cn } from "@rivet-gg/components";
 
-export function DocsTabs() {
+export function DocsTabs({ light = false }: { light?: boolean }) {
 	const pathname = usePathname() || "";
 	// Remove trailing slash for consistency
 	const normalizedPath = pathname.replace(/\/$/, "");
 
 	return (
-		<div className="hidden h-14 items-center empty:hidden md:flex gap-4 pt-2">
+		<div className="-mx-8 hidden h-14 items-center gap-4 bg-[#e9e9eb] px-8 empty:hidden md:flex">
 			{sitemap.map((tab) => {
 				const isActive = findPageForHref(normalizedPath, tab);
 				return (
@@ -21,13 +21,18 @@ export function DocsTabs() {
 						target={tab.target}
 						aria-current={isActive ? "page" : undefined}
 						className={cn(
-							"text-muted-foreground px-0 text-sm hover:bg-transparent flex items-center border-b-2 border-transparent rounded-none h-full transition-colors",
-							"aria-[current=page]:text-foreground aria-[current=page]:border-primary"
+							"px-0 text-sm hover:bg-transparent flex items-center border-b-2 border-transparent rounded-none h-full transition-colors",
+							light
+								? "text-ink-faint aria-[current=page]:text-ink aria-[current=page]:border-pine"
+								: "text-muted-foreground aria-[current=page]:text-foreground aria-[current=page]:border-primary"
 						)}
 					>
 						{tab.title}
 						{tab.badge && (
-							<span className="ml-1.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground border border-border px-1 py-px rounded">
+							<span className={cn(
+								"ml-1.5 whitespace-nowrap rounded-sm border px-[6px] py-0 text-[10px] font-medium",
+								light ? "border-ink/10 bg-ink/[0.06] text-ink-soft" : "border-border bg-white/5 text-muted-foreground",
+							)}>
 								{tab.badge}
 							</span>
 						)}
diff --git a/website/src/components/Footer.jsx b/website/src/components/Footer.jsx
index 4b9509b6b8..fcc23e6743 100644
--- a/website/src/components/Footer.jsx
+++ b/website/src/components/Footer.jsx
@@ -25,6 +25,7 @@ const footer = {
 		{ name: "Sandbox Agent SDK", href: "https://sandboxagent.dev" },
 		{ name: "Secure Exec SDK", href: "https://secureexec.dev" },
 		{ name: "Cloud Pricing", href: "/cloud#pricing" },
+		{ name: "Enterprise", href: "/enterprise" },
 		{ name: "Talk to an engineer", href: "/talk-to-an-engineer" },
 		{ name: "Sales", href: "/sales" },
 	],
@@ -37,7 +38,8 @@ const footer = {
 	],
 	resources: [
 		{ name: "Cookbooks", href: "/cookbook" },
-		{ name: "Compare", href: "/compare" },
+		{ name: "Rivet vs Cloudflare Durable Objects", href: "/compare/rivet-vs-cloudflare-durable-objects" },
+		{ name: "Rivet vs Temporal", href: "/compare/rivet-vs-temporal" },
 		{ name: "Blog", href: "/blog" },
 		{ name: "YC & Speedrun Deal", href: "/startups" },
 		{ name: "Open-Source Friends", href: "/oss-friends" },
@@ -134,12 +136,12 @@ export function PageNextPrevious({ navigation }) {
 
 function SmallPrint() {
 	return (
-		<div className="mx-auto max-w-7xl w-full py-16 selection:bg-[#FF4500]/30 selection:text-orange-200">
+		<div className="mx-auto max-w-7xl w-full py-16">
 			<div className="grid grid-cols-1 min-[440px]:grid-cols-2 gap-8 md:grid-cols-4 lg:grid-cols-5">
 				{/* Brand column */}
 				<div className="col-span-1 min-[440px]:col-span-2 md:col-span-4 lg:col-span-1 space-y-6">
 					<img className="h-8 w-8" src={imgLogo.src} alt="Rivet" />
-					<p className="text-sm text-zinc-500">
+					<p className="text-sm text-ink-faint">
 						Infrastructure for the agentic era
 					</p>
 					<div className="flex gap-4">
@@ -147,7 +149,7 @@ function SmallPrint() {
 							<a
 								key={item.name}
 								href={item.href}
-								className="text-zinc-600 hover:text-white transition-colors"
+								className="text-ink-faint hover:text-ink transition-colors"
 							>
 								<span className="sr-only">{item.name}</span>
 								<Icon icon={item.icon} aria-hidden="true" />
@@ -158,14 +160,14 @@ function SmallPrint() {
 
 				{/* Product */}
 				<div>
-					<h3 className="text-xs font-medium uppercase tracking-wider text-zinc-500 mb-4">Product</h3>
+					<h3 className="font-mono text-[11px] font-medium uppercase tracking-[0.16em] text-ink-faint mb-4">Product</h3>
 					<ul className="space-y-3">
 						{footer.product.map((item) => (
 							<li key={item.name}>
 								<a
 									href={item.href}
 									target={item.target}
-									className="text-sm text-zinc-400 hover:text-white transition-colors"
+									className="text-sm text-ink-soft hover:text-ink transition-colors"
 								>
 									{item.name}
 								</a>
@@ -176,14 +178,14 @@ function SmallPrint() {
 
 				{/* Developers */}
 				<div>
-					<h3 className="text-xs font-medium uppercase tracking-wider text-zinc-500 mb-4">Developers</h3>
+					<h3 className="font-mono text-[11px] font-medium uppercase tracking-[0.16em] text-ink-faint mb-4">Developers</h3>
 					<ul className="space-y-3">
 						{footer.devs.map((item) => (
 							<li key={item.name}>
 								<a
 									href={item.href}
 									target={item.target}
-									className="text-sm text-zinc-400 hover:text-white transition-colors"
+									className="text-sm text-ink-soft hover:text-ink transition-colors"
 								>
 									{item.name}
 								</a>
@@ -194,14 +196,14 @@ function SmallPrint() {
 
 				{/* Resources */}
 				<div>
-					<h3 className="text-xs font-medium uppercase tracking-wider text-zinc-500 mb-4">Resources</h3>
+					<h3 className="font-mono text-[11px] font-medium uppercase tracking-[0.16em] text-ink-faint mb-4">Resources</h3>
 					<ul className="space-y-3">
 						{footer.resources.map((item) => (
 							<li key={item.name}>
 								<a
 									href={item.href}
 									target={item.newTab ? "_blank" : null}
-									className="text-sm text-zinc-400 hover:text-white transition-colors"
+									className="text-sm text-ink-soft hover:text-ink transition-colors"
 								>
 									{item.name}
 								</a>
@@ -212,13 +214,13 @@ function SmallPrint() {
 
 				{/* Legal */}
 				<div>
-					<h3 className="text-xs font-medium uppercase tracking-wider text-zinc-500 mb-4">Legal</h3>
+					<h3 className="font-mono text-[11px] font-medium uppercase tracking-[0.16em] text-ink-faint mb-4">Legal</h3>
 					<ul className="space-y-3">
 						{footer.legal.map((item) => (
 							<li key={item.name}>
 								<a
 									href={item.href}
-									className="text-sm text-zinc-400 hover:text-white transition-colors"
+									className="text-sm text-ink-soft hover:text-ink transition-colors"
 								>
 									{item.name}
 								</a>
@@ -230,20 +232,20 @@ function SmallPrint() {
 
 			{/* Investor badges */}
 			<div className="mt-12 flex flex-col min-[440px]:flex-row flex-wrap items-start min-[440px]:items-center gap-4">
-				<span className="text-xs text-zinc-600">Backed by</span>
+				<span className="text-xs text-ink-faint">Backed by</span>
 				<div className="flex flex-wrap items-center gap-2">
-					<div className="flex items-center gap-2 rounded-full border border-white/10 px-3 py-1.5 text-xs text-zinc-400">
+					<div className="flex items-center gap-2 rounded-full border border-ink/10 px-3 py-1.5 text-xs text-ink-soft">
 						<img src={imgYC.src} alt="Y Combinator" className="h-4 w-auto" />
 						<span>Y Combinator</span>
 					</div>
-					<div className="flex items-center gap-2 rounded-full border border-white/10 px-3 py-1.5 text-xs text-zinc-400">
+					<div className="flex items-center gap-2 rounded-full border border-ink/10 px-3 py-1.5 text-xs text-ink-soft">
 						<img src={imgA16z.src} alt="a16z" className="h-3 w-auto footer-invert" />
 						<span>a16z Speedrun</span>
 					</div>
 				</div>
 				<a
 					href="/startups"
-					className="text-xs text-zinc-500 hover:text-white transition-colors"
+					className="text-xs text-ink-faint hover:text-ink transition-colors"
 					style={{
 						backgroundImage: 'radial-gradient(circle, currentColor 1px, transparent 1px)',
 						backgroundSize: '6px 1px',
@@ -254,7 +256,7 @@ function SmallPrint() {
 				>
 					Are you as well?
 				</a>
-				<span className="ml-auto flex items-center gap-1.5 text-xs text-zinc-600">
+				<span className="ml-auto flex items-center gap-1.5 text-xs text-ink-faint">
 					<svg width="14" height="10" viewBox="0 0 14 10" fill="none">
 						<rect width="14" height="10" fill="white" />
 						<rect y="0" width="14" height="1.2" fill="black" />
@@ -269,11 +271,11 @@ function SmallPrint() {
 			</div>
 
 			{/* Copyright */}
-			<div className="mt-12 border-t border-white/10 pt-8">
-				<p className="text-xs text-zinc-600">
+			<div className="mt-12 border-t border-ink/10 pt-8">
+				<p className="text-xs text-ink-faint">
 					&copy; {new Date().getFullYear()} Rivet Gaming, Inc. All rights reserved.
 				</p>
-				<p className="mt-2 text-xs text-zinc-700">
+				<p className="mt-2 text-xs text-ink-faint/80">
 					Cloudflare® and Durable Objects™ are trademarks of Cloudflare, Inc. No affiliation or endorsement implied.
 				</p>
 			</div>
@@ -281,15 +283,26 @@ function SmallPrint() {
 	);
 }
 
-const WHITE_THEMED_PATHS = ['/agent-os', '/agent-os/use-cases', '/agent-os/pricing', '/agent-os/registry', '/from-unix-to-agents', '/install'];
+// The footer is light by default to match the porcelain surfaces (marketing
+// and docs). Only the Learn section keeps its dark shell, so that path applies
+// a dark override wrapper instead.
+const DARK_THEMED_PATH_PREFIXES = ['/learn'];
 
-export function Footer() {
-	const pathname = usePathname();
-	const isWhite = WHITE_THEMED_PATHS.some((p) => pathname === p || pathname === p + '/') || pathname.startsWith('/agent-os/registry/');
+export function Footer({ initialPathname = "" }) {
+	// usePathname returns "" during SSR; fall back to the server-provided path
+	// so docs pages do not flash a light footer before hydration.
+	const pathname = usePathname() || initialPathname;
+	const isDark = DARK_THEMED_PATH_PREFIXES.some((p) => pathname === p || pathname.startsWith(p + '/'));
 
 	return (
-		<div className={isWhite ? 'bg-white [&_*]:!border-zinc-200 [&_a]:!text-zinc-500 [&_a:hover]:!text-zinc-900 [&_hr]:!border-zinc-200 [&_.footer-invert]:invert' : ''}>
-			<hr className="mb-8 border-white/10" />
+		<div
+			className={
+				isDark
+					? '[&_*]:!border-white/10 [&_a]:!text-zinc-400 [&_a:hover]:!text-white [&_h3]:!text-zinc-500 [&_p]:!text-zinc-600 [&_span]:!text-zinc-500'
+					: 'bg-paper [&_.footer-invert]:invert'
+			}
+		>
+			<hr className={isDark ? 'mb-8 border-white/10' : 'mb-8 border-ink/10'} />
 
 			<footer
 				aria-labelledby="footer-heading"
diff --git a/website/src/components/Frame.jsx b/website/src/components/Frame.jsx
index a1c5844220..35b76d885b 100644
--- a/website/src/components/Frame.jsx
+++ b/website/src/components/Frame.jsx
@@ -4,12 +4,12 @@ import React from "react";
 export function Frame({ caption, className, children }) {
 	return (
 		<div className={clsx(className, "mx-auto py-6")}>
-			<div className="not-prose relative bg-white/5 rounded-xl overflow-hidden border border-white/10 overflow-hidden">
-				<div className="relative flex justify-center border-b border-white/5">
+			<div className="not-prose relative bg-white/55 rounded-xl overflow-hidden border border-ink/15 overflow-hidden">
+				<div className="relative flex justify-center border-b border-ink/10">
 					{children}
 				</div>
 				{caption && (
-					<div className="relative rounded-xl overflow-auto flex justify-center text-sm text-slate-400 px-4 py-4">
+					<div className="relative rounded-xl overflow-auto flex justify-center text-sm text-ink-faint px-4 py-4">
 						<p>{caption}</p>
 					</div>
 				)}
diff --git a/website/src/components/HeaderPopupProductMenu.tsx b/website/src/components/HeaderPopupProductMenu.tsx
deleted file mode 100644
index dfd748d732..0000000000
--- a/website/src/components/HeaderPopupProductMenu.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { faBriefcase } from "@fortawesome/free-solid-svg-icons/faBriefcase";
-import { faCloud } from "@fortawesome/free-solid-svg-icons/faCloud";
-import { faCodeBranch } from "@fortawesome/free-solid-svg-icons/faCodeBranch";
-import { Button, cn } from "@rivet-gg/components";
-import { Icon, faActors } from "@rivet-gg/icons";
-import type { ComponentProps, ReactNode } from "react";
-
-
-export const HeaderPopupProductMenu = () => {
-	return (
-		<div className="grid h-full grid-cols-3 grid-rows-3 gap-4 overflow-hidden pb-2">
-			<a href="/docs" className="col-span-2 row-span-3 ">
-				<Item
-					onMouseEnter={(e) =>
-						e.currentTarget.querySelector("video")?.play()
-					}
-					onMouseLeave={(e) =>
-						e.currentTarget.querySelector("video")?.pause()
-					}
-				>
-					<div className="relative z-10 h-full">
-						<p className="text-base font-bold opacity-80 transition-opacity group-hover:opacity-100">
-							<Icon icon={faActors} className="mr-1" />
-							Actors
-						</p>
-						<p className="opacity-80 transition-opacity group-hover:opacity-100">
-							The easiest way to build & scale realtime
-							applications.
-						</p>
-					</div>
-					<video
-						className="absolute inset-0 h-full w-full object-cover opacity-60"
-						muted
-						loop
-						playsInline
-						disablePictureInPicture
-						disableRemotePlayback
-					>
-						<source
-							src="https://assets2.rivet.dev/effects/bg-effect-product-actors.webm?v=2"
-							type="video/webm"
-						/>
-					</video>
-				</Item>
-			</a>
-
-			<Button
-				variant="secondary"
-				asChild
-				className="col-start-3 h-full justify-start"
-				startIcon={<Icon icon={faCodeBranch} />}
-			>
-				<a href="https://github.com/rivet-dev/rivet" target="_blank">
-					Community Edition
-				</a>
-			</Button>
-			<Button
-				variant="secondary"
-				className="col-start-3 h-full justify-start"
-				startIcon={<Icon icon={faCloud} />}
-			>
-				<a href="https://dashboard.rivet.dev" target="_blank">
-					Rivet Cloud
-				</a>
-			</Button>
-			<Button
-				variant="secondary"
-				className="col-start-3 h-full justify-start"
-				target="_blank"
-				startIcon={<Icon icon={faBriefcase} />}
-			>
-				<a href="/sales">Rivet Enterprise</a>
-			</Button>
-		</div>
-	);
-};
-
-interface ItemProps extends ComponentProps<"div"> {
-	className?: string;
-	children?: ReactNode;
-}
-function Item({ className, children, ...props }: ItemProps) {
-	return (
-		<div
-			className={cn(
-				"group h-full cursor-pointer overflow-hidden rounded-md p-4 text-sm grayscale transition-all hover:grayscale-0",
-				className,
-			)}
-			{...props}
-		>
-			{children}
-		</div>
-	);
-}
diff --git a/website/src/components/HeaderPopupSolutionsMenu.tsx b/website/src/components/HeaderPopupSolutionsMenu.tsx
deleted file mode 100644
index d8b2103455..0000000000
--- a/website/src/components/HeaderPopupSolutionsMenu.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { Button, cn } from "@rivet-gg/components";
-import {
-	Icon,
-	faArrowPointer,
-	faDiscord,
-	faSparkles,
-	faWifiSlash,
-} from "@rivet-gg/icons";
-import type { ComponentProps, ReactNode } from "react";
-
-import { faComment } from "@fortawesome/free-solid-svg-icons/faComment";
-
-export const HeaderPopupSolutionsMenu = () => {
-	return (
-		<div className="grid h-full grid-cols-3 grid-rows-2 gap-4 overflow-hidden pb-2">
-			<Button
-				variant="secondary"
-				asChild
-				className="h-full justify-start"
-				startIcon={<Icon icon={faArrowPointer} />}
-			>
-				<a href="/examples" target="_blank">
-					Cursors
-				</a>
-			</Button>
-			<Button
-				variant="secondary"
-				className="h-full justify-start"
-				startIcon={<Icon icon={faComment} />}
-			>
-				<a href="/examples" target="_blank">
-					Chat App
-				</a>
-			</Button>
-			<Button
-				variant="secondary"
-				className="h-full justify-start"
-				target="_blank"
-				startIcon={<Icon icon={faWifiSlash} />}
-			>
-				<a href="/examples" target="_blank">
-					Local-first Sync
-				</a>
-			</Button>
-			<Button
-				variant="secondary"
-				className="h-full justify-start"
-				target="_blank"
-				startIcon={<Icon icon={faSparkles} />}
-			>
-				<a href="/examples" target="_blank">
-					AI Agent
-				</a>
-			</Button>
-			<Button
-				variant="secondary"
-				className="h-full justify-start"
-				target="_blank"
-				startIcon={<Icon icon={faDiscord} />}
-			>
-				<a href="/examples" target="_blank">
-					Discord Activities
-				</a>
-			</Button>
-		</div>
-	);
-};
-
-interface ItemProps extends ComponentProps<"div"> {
-	className?: string;
-	children?: ReactNode;
-}
-function Item({ className, children, ...props }: ItemProps) {
-	return (
-		<div
-			className={cn(
-				"group h-full cursor-pointer overflow-hidden rounded-md p-4 text-sm grayscale transition-all hover:grayscale-0",
-				className,
-			)}
-			{...props}
-		>
-			{children}
-		</div>
-	);
-}
diff --git a/website/src/components/Heading.jsx b/website/src/components/Heading.jsx
index 8b9db011d6..98c71f6dfd 100644
--- a/website/src/components/Heading.jsx
+++ b/website/src/components/Heading.jsx
@@ -21,7 +21,7 @@ function Eyebrow({ tag, label }) {
 function Anchor({ id, children }) {
   return (
     <div className='group absolute -left-10 top-1 h-full pr-10'>
-      <Button className='not-prose relative hidden group-hover:flex' size='icon-sm' variant='outline' asChild>
+      <Button className='not-prose relative hidden group-hover:flex hover:border-ink hover:bg-ink hover:text-white' size='icon-sm' variant='outline' asChild>
         <a href={`#${id}`}>
           <Icon icon={faLink} />
         </a>
diff --git a/website/src/components/LevelUpSection.jsx b/website/src/components/LevelUpSection.jsx
deleted file mode 100644
index 3ee55022e5..0000000000
--- a/website/src/components/LevelUpSection.jsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Button } from "@/components/Button";
-const imgBlockLeft = { src: "https://assets.rivet.dev/website/images/effects/leftBlock.png", width: 1000, height: 1327, format: "png" };
-const imgBlockRight = { src: "https://assets.rivet.dev/website/images/effects/rightBlock.png", width: 165, height: 220, format: "png" };
-import { Icon, faPhone, faRocketLaunch } from "@rivet-gg/icons";
-
-export default function LevelUpSection() {
-	return (
-		<div className="w-full bg-white p-8 text-black md:h-[600px]">
-			<div className="mx-auto flex h-full max-w-screen-xl flex-row items-center justify-between">
-				{/* Left Image Container */}
-				<div className="flex h-full flex-1 items-center justify-end">
-					<img src={imgBlockLeft}
-						alt="Left Image"
-						className="h-auto w-full" // Adjust size as necessary
-					/>
-				</div>
-
-				{/* Text Container - Centered Vertically and Horizontally */}
-				<div className="mx-8 flex h-full flex-col items-center justify-center text-center">
-					<div className="mb-5 font-display text-6xl font-bold md:text-8xl">
-						Level Up with Rivet
-					</div>
-					<div className="mb-5 mt-2 font-display text-2xl font-bold italic md:text-4xl">
-						and get back to game development
-					</div>
-
-					<div className="mt-10 flex flex-wrap items-center justify-center gap-x-6 gap-y-8">
-						<Button
-							variant="blackJuicy"
-							href="https://dashboard.rivet.dev"
-						>
-							<Icon icon={faRocketLaunch} className="mr-2" />
-							Get Started
-						</Button>
-						<Button
-							variant="blackJuicy"
-							href="https://calendly.com/nicholas_kissel/rivet-demo"
-							target="_blank"
-						>
-							<Icon icon={faPhone} className="mr-2" />
-							Request a Demo
-						</Button>
-					</div>
-				</div>
-
-				{/* Right Image Container */}
-				<div className="flex h-full flex-1 items-center justify-start">
-					<img src={imgBlockRight}
-						alt="Right Image"
-						className="h-auto w-full" // Adjust size as necessary
-					/>
-				</div>
-			</div>
-		</div>
-	);
-}
diff --git a/website/src/components/MermaidScript.astro b/website/src/components/MermaidScript.astro
index d506e92a41..8aac1fef17 100644
--- a/website/src/components/MermaidScript.astro
+++ b/website/src/components/MermaidScript.astro
@@ -36,6 +36,31 @@
     });
   }
 
+  // Pick a Mermaid theme that is legible against the page it renders on.
+  // Cookbook and other marketing pages use a light porcelain background, while
+  // docs use a dark shell. The <html> element can keep a vestigial `dark` class
+  // on marketing pages, so decide from the actual background luminance behind
+  // the diagram rather than that class.
+  function detectMermaidTheme() {
+    let node = document.querySelector('pre.mermaid');
+    let bg = '';
+    while (node) {
+      const color = getComputedStyle(node).backgroundColor;
+      if (color && color !== 'transparent' && !/rgba?\(0,\s*0,\s*0,\s*0\)/.test(color)) {
+        bg = color;
+        break;
+      }
+      node = node.parentElement;
+    }
+    if (!bg) bg = getComputedStyle(document.body).backgroundColor;
+    const parts = (bg.match(/[\d.]+/g) || []).map(Number);
+    if (parts.length < 3) return 'dark';
+    const [r, g, b] = parts;
+    const luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+    // Light page -> grayscale 'neutral' (matches the ink/porcelain aesthetic).
+    return luminance > 0.5 ? 'neutral' : 'dark';
+  }
+
   // Only initialize if there are mermaid diagrams on the page
   async function initMermaid() {
     promoteLegacyMermaidBlocks();
@@ -50,7 +75,7 @@
 
     mermaid.initialize({
       startOnLoad: false,
-      theme: 'dark',
+      theme: detectMermaidTheme(),
       securityLevel: 'loose',
       fontFamily: 'inherit',
     });
diff --git a/website/src/components/Prose.jsx b/website/src/components/Prose.jsx
index a066df258a..a9ad13298c 100644
--- a/website/src/components/Prose.jsx
+++ b/website/src/components/Prose.jsx
@@ -1,9 +1,11 @@
 import clsx from "clsx";
 
-export function Prose({ as: Component = "div", className = "", ...props }) {
+// Docs and other dark shells keep the inverted palette (default). Porcelain
+// surfaces pass surface="paper" for the light palette.
+export function Prose({ as: Component = "div", className = "", surface = "ink", ...props }) {
 	return (
 		<Component
-			className={clsx(className, "prose-invert prose")}
+			className={clsx(className, "prose", surface === "ink" && "prose-invert")}
 			{...props}
 		/>
 	);
diff --git a/website/src/components/Resources.jsx b/website/src/components/Resources.jsx
index b27638f9ac..3bbca3a8af 100644
--- a/website/src/components/Resources.jsx
+++ b/website/src/components/Resources.jsx
@@ -21,7 +21,7 @@ export function Resource({ children, ...props }) {
 	return (
 		<Button
 			variant="outline"
-			className="not-prose flex h-auto flex-col items-start pb-4 pt-8 text-left"
+			className="not-prose flex h-auto flex-col items-start pb-4 pt-8 text-left border-ink/15 bg-white/55 text-ink hover:border-ink/30 hover:bg-white/70"
 			href={props.href}
 			{...props}
 			startIcon={<Icon icon={props.icon} />}
@@ -30,7 +30,7 @@ export function Resource({ children, ...props }) {
 			<a>
 				<span className="pt-4 font-bold">{titleSegments}</span>
 				{children && (
-					<div className="text-muted-foreground mt-2 min-w-0 text-wrap text-sm leading-5">
+					<div className="text-ink-soft mt-2 min-w-0 text-wrap text-sm leading-5">
 						{children}
 					</div>
 				)}
diff --git a/website/src/components/Tabs.tsx b/website/src/components/Tabs.tsx
index d49682af58..a1cd6667f0 100644
--- a/website/src/components/Tabs.tsx
+++ b/website/src/components/Tabs.tsx
@@ -40,7 +40,7 @@ export const Tabs = ({ children }: TabsProps) => {
 			<div className="overflow-x-auto">
 				<div
 					data-tabs-list
-					className="inline-flex text-muted-foreground border-b w-full"
+					className="inline-flex text-ink-soft border-b border-ink/10 w-full"
 				>
 				</div>
 			</div>
diff --git a/website/src/components/TabsScript.astro b/website/src/components/TabsScript.astro
index e16128c612..2b4f2a25bf 100644
--- a/website/src/components/TabsScript.astro
+++ b/website/src/components/TabsScript.astro
@@ -37,7 +37,7 @@
 			const firstButton = tabsList.querySelector('[data-tab-trigger]');
 			const firstContent = contentContainer.querySelector('[data-tab-content]');
 			if (firstButton) {
-				firstButton.classList.add('border-b-primary', 'text-white');
+				firstButton.classList.add('is-tab-active');
 				firstButton.classList.remove('border-b-transparent', 'text-muted-foreground');
 			}
 			if (firstContent) {
@@ -129,7 +129,7 @@
 				'flex items-center gap-2.5 px-3 py-1.5 text-sm text-left w-full rounded-lg',
 				'transition-colors cursor-pointer',
 				isHidden ? 'opacity-40' : '',
-				id === firstVisibleId ? 'text-white bg-white/10' : 'text-zinc-500 hover:text-zinc-300 hover:bg-white/5',
+				id === firstVisibleId ? 'text-ink bg-ink/10' : 'text-ink-faint hover:text-ink hover:bg-ink/5',
 			].filter(Boolean).join(' ');
 			const iconEl = block.querySelector('[data-code-icon]');
 			if (iconEl) {
@@ -148,7 +148,7 @@
 			const contentWrapper = document.createElement('div');
 			contentWrapper.setAttribute('data-code-group-content', id);
 			contentWrapper.className = [
-				'h-full overflow-hidden rounded-xl border bg-neutral-950',
+				'h-full overflow-hidden rounded-xl border border-cream/10 bg-neutral-950',
 				id === firstVisibleId ? '' : 'hidden',
 			].filter(Boolean).join(' ');
 			contentWrapper.appendChild(clonedBlock);
@@ -284,10 +284,10 @@
 				triggers.forEach((trigger) => {
 					const isActive = trigger.getAttribute('data-tab-trigger') === tabTitle;
 					if (isActive) {
-						trigger.classList.add('border-b-primary', 'text-white');
+						trigger.classList.add('is-tab-active');
 						trigger.classList.remove('border-b-transparent', 'text-muted-foreground');
 					} else {
-						trigger.classList.remove('border-b-primary', 'text-white');
+						trigger.classList.remove('is-tab-active');
 						trigger.classList.add('border-b-transparent', 'text-muted-foreground');
 					}
 				});
@@ -322,11 +322,11 @@
 				triggers.forEach((trigger) => {
 					const isActive = trigger.getAttribute('data-code-group-trigger') === triggerId;
 					if (isActive) {
-						trigger.classList.add('text-white', 'bg-white/10');
-						trigger.classList.remove('text-zinc-500', 'hover:text-zinc-300', 'hover:bg-white/5');
+						trigger.classList.add('text-ink', 'bg-ink/10');
+						trigger.classList.remove('text-ink-faint', 'hover:text-ink', 'hover:bg-ink/5');
 					} else {
-						trigger.classList.remove('text-white', 'bg-white/10');
-						trigger.classList.add('text-zinc-500', 'hover:text-zinc-300', 'hover:bg-white/5');
+						trigger.classList.remove('text-ink', 'bg-ink/10');
+						trigger.classList.add('text-ink-faint', 'hover:text-ink', 'hover:bg-ink/5');
 					}
 				});
 
diff --git a/website/src/components/cookbook/CookbookCard.tsx b/website/src/components/cookbook/CookbookCard.tsx
index d2ad60a432..9dc6d7a9c5 100644
--- a/website/src/components/cookbook/CookbookCard.tsx
+++ b/website/src/components/cookbook/CookbookCard.tsx
@@ -4,6 +4,7 @@ export interface CookbookCardCover {
 	transform?: string;
 	transformOrigin?: string;
 	filter?: string;
+	ken?: { x: string; y: string; scale: number };
 }
 
 export interface CookbookPageCardData {
@@ -23,15 +24,33 @@ export interface CookbookPageCardData {
 	}>;
 }
 
+// Fallback for any cover that has not tuned its own documentary motion: a
+// gentle straight push-in.
+const DEFAULT_KEN = { x: "0%", y: "0%", scale: 1.16 };
+
 export function CookbookCard({ page }: { page: CookbookPageCardData }) {
+	const drift = page.cover?.ken ?? DEFAULT_KEN;
 	return (
-		<a
-			href={page.href}
-			className="group relative block aspect-[5/7] overflow-hidden rounded-lg border border-white/10 bg-zinc-950 transition-colors hover:border-white/25 [container-type:inline-size]"
-		>
+		<div className="group relative">
+			{/* Soft ground beneath the card, mirroring the hero reel's hover glow. */}
+			<div className="pointer-events-none absolute -inset-3 rounded-xl bg-ink/5 opacity-0 blur-xl transition-all duration-300 ease-out group-hover:scale-105 group-hover:opacity-100" />
+			<a
+				href={page.href}
+				style={{ boxShadow: "0 10px 28px -12px rgba(27, 25, 22, 0.16)" }}
+				className="relative block aspect-[5/7] overflow-hidden bg-ink [container-type:inline-size]"
+			>
 			{page.cover && (
 				<>
-					<div className="absolute inset-0 transition-transform duration-500 ease-out group-hover:scale-[1.02]">
+					<div
+						className="ken-burns absolute inset-0"
+						style={
+							{
+								"--kb-x": drift.x,
+								"--kb-y": drift.y,
+								"--kb-scale": String(drift.scale),
+							} as React.CSSProperties
+						}
+					>
 						<img
 							src={page.cover.src}
 							alt=""
@@ -55,6 +74,7 @@ export function CookbookCard({ page }: { page: CookbookPageCardData }) {
 			>
 				{page.title}
 			</h3>
-		</a>
+			</a>
+		</div>
 	);
 }
diff --git a/website/src/components/cookbook/CookbookPageContent.tsx b/website/src/components/cookbook/CookbookPageContent.tsx
index 0a108930e0..f45dfe2ba6 100644
--- a/website/src/components/cookbook/CookbookPageContent.tsx
+++ b/website/src/components/cookbook/CookbookPageContent.tsx
@@ -21,13 +21,13 @@ function SearchInput({ value, onChange }: { value: string; onChange: (v: string)
 	return (
 		<div className="relative">
 			<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-				<MagnifyingGlassIcon className="h-4 w-4 text-zinc-500" aria-hidden="true" />
+				<MagnifyingGlassIcon className="h-4 w-4 text-ink-faint" aria-hidden="true" />
 			</div>
 			<input
 				type="text"
 				value={value}
 				onChange={(e) => onChange(e.target.value)}
-				className="block w-full rounded-md border border-white/10 bg-black pl-10 pr-3 py-2 text-sm text-white placeholder:text-zinc-600 focus:border-white/20 focus:outline-none transition-colors"
+				className="block w-full rounded-md border border-ink/15 bg-white/55 pl-10 pr-3 py-2 text-sm text-ink placeholder:text-ink-faint focus:border-pine focus:outline-none transition-colors"
 				placeholder="Search guides..."
 			/>
 		</div>
@@ -51,7 +51,7 @@ function FilterChips({
 
 	return (
 		<div className="flex flex-wrap items-center gap-2">
-			<span className="text-xs text-zinc-500 mr-1">{title}:</span>
+			<span className="font-mono text-[11px] uppercase tracking-[0.14em] text-ink-faint mr-1">{title}:</span>
 			{items.map((item) => {
 				const isSelected = selected.includes(item);
 				return (
@@ -60,8 +60,8 @@ function FilterChips({
 						onClick={() => onToggle(item)}
 						className={`rounded-full border px-3 py-1 text-xs transition-all ${
 							isSelected
-								? "border-white/20 text-white bg-white/5"
-								: "border-white/10 text-zinc-400 hover:border-white/20 hover:text-white"
+								? "border-pine bg-pine text-paper"
+								: "border-ink/15 text-ink-soft hover:border-ink/30 hover:text-ink"
 						}`}
 					>
 						{getDisplayName(item)}
@@ -114,10 +114,10 @@ export function CookbookPageContent({ pages, allTags, allTechnologies }: Cookboo
 	};
 
 	return (
-		<div className="min-h-screen bg-black">
+		<div className="paper-grain min-h-screen">
 			<div className="pb-24 pt-28 md:pt-36">
 				<div className="mx-auto max-w-7xl px-6">
-					<h1 className="mb-12 text-center text-5xl font-medium tracking-[-0.015em] text-white md:mb-16 md:text-6xl">
+					<h1 className="mb-12 text-center text-5xl font-medium tracking-[-0.015em] text-ink md:mb-16 md:text-6xl">
 						Cookbooks
 					</h1>
 					<div className="mb-10 space-y-4">
@@ -150,7 +150,7 @@ export function CookbookPageContent({ pages, allTags, allTechnologies }: Cookboo
 											setSelectedTags([]);
 											setSelectedTechnologies([]);
 										}}
-										className="text-xs text-zinc-500 hover:text-white transition-colors"
+										className="text-xs text-ink-faint hover:text-ink transition-colors"
 									>
 										Clear
 									</button>
@@ -160,7 +160,7 @@ export function CookbookPageContent({ pages, allTags, allTechnologies }: Cookboo
 					</div>
 
 					{filteredPages.length === 0 ? (
-						<div className="text-center py-12 text-zinc-400">No guides found matching your filters</div>
+						<div className="text-center py-12 text-ink-soft">No guides found matching your filters</div>
 					) : (
 						<div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 sm:gap-6">
 							<AnimatePresence mode="popLayout" initial={false}>
diff --git a/website/src/components/faq/FaqSection.tsx b/website/src/components/faq/FaqSection.tsx
index 5a0d500b35..711df476dc 100644
--- a/website/src/components/faq/FaqSection.tsx
+++ b/website/src/components/faq/FaqSection.tsx
@@ -1,8 +1,14 @@
+'use client';
+
+import { useState } from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
 import type { FaqItem } from '@/data/faqs/types';
 
-// These components must stay hook-free with no framer-motion so they can be
-// server-rendered by Astro without a client directive. Disclosure behavior
-// comes from native <details>/<summary>, which works with zero JavaScript.
+// Animated disclosure accordion (single open at a time) with a smooth
+// height + fade expand, like a polished demo-page FAQ. Answers stay mounted
+// in the DOM (collapsed to height 0) so they remain crawlable, and FaqJsonLd
+// carries the structured data. Mount sites must hydrate this component
+// (client:visible on .astro pages, or inside an already-hydrated island).
 
 type FaqTheme = 'dark' | 'light';
 
@@ -28,13 +34,13 @@ const themeStyles: Record<
 		sectionBorder: 'border-white/10',
 	},
 	light: {
-		divider: 'divide-zinc-200 border-zinc-200',
-		question: 'text-zinc-900',
-		answer: 'text-zinc-500',
-		answerLinks: '[&_a]:text-zinc-900 [&_a]:underline [&_a]:underline-offset-2 [&_a:hover]:text-zinc-600 [&_strong]:text-zinc-700 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5 [&_li]:mt-1',
-		icon: 'text-zinc-400',
-		heading: 'text-zinc-900',
-		sectionBorder: 'border-zinc-200',
+		divider: 'divide-ink/10 border-ink/10',
+		question: 'text-ink',
+		answer: 'text-ink-soft',
+		answerLinks: '[&_a]:text-pine [&_a]:underline [&_a]:underline-offset-2 [&_a:hover]:text-ink [&_strong]:text-ink [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5 [&_li]:mt-1',
+		icon: 'text-ink-faint',
+		heading: 'text-ink',
+		sectionBorder: 'border-ink/10',
 	},
 };
 
@@ -45,35 +51,53 @@ interface FaqListProps {
 
 export function FaqList({ items, theme = 'dark' }: FaqListProps) {
 	const styles = themeStyles[theme];
+	const reduceMotion = useReducedMotion();
+	const [openIndex, setOpenIndex] = useState<number | null>(null);
 
 	return (
 		<div className={`divide-y border-b ${styles.divider}`}>
-			{items.map((item) => (
-				<details key={item.question} className="group py-5">
-					<summary
-						className={`flex cursor-pointer list-none items-center justify-between gap-4 text-base font-medium [&::-webkit-details-marker]:hidden ${styles.question}`}
-					>
-						{item.question}
-						<svg
-							viewBox="0 0 16 16"
-							aria-hidden="true"
-							className={`h-4 w-4 flex-shrink-0 transition-transform duration-200 group-open:rotate-45 ${styles.icon}`}
+			{items.map((item, index) => {
+				const open = openIndex === index;
+				const answerId = `faq-answer-${index}`;
+				return (
+					<div key={item.question} className="py-5">
+						<button
+							type="button"
+							onClick={() => setOpenIndex(open ? null : index)}
+							aria-expanded={open}
+							aria-controls={answerId}
+							className={`flex w-full cursor-pointer items-center justify-between gap-4 text-left text-base font-medium ${styles.question}`}
+						>
+							{item.question}
+							<svg
+								viewBox="0 0 16 16"
+								aria-hidden="true"
+								className={`h-4 w-4 flex-shrink-0 transition-transform duration-300 ease-out ${open ? 'rotate-45' : ''} ${styles.icon}`}
+							>
+								<path
+									d="M8 2v12M2 8h12"
+									stroke="currentColor"
+									strokeWidth="1.5"
+									strokeLinecap="round"
+								/>
+							</svg>
+						</button>
+						<motion.div
+							id={answerId}
+							initial={false}
+							animate={{ height: open ? 'auto' : 0, opacity: open ? 1 : 0 }}
+							transition={{ duration: reduceMotion ? 0 : 0.32, ease: [0.4, 0, 0.2, 1] }}
+							style={{ overflow: 'hidden' }}
 						>
-							<path
-								d="M8 2v12M2 8h12"
-								stroke="currentColor"
-								strokeWidth="1.5"
-								strokeLinecap="round"
+							{/* Answers are first-party static strings from src/data/faqs, so rendering them as HTML is safe. */}
+							<div
+								className={`pt-3 text-sm leading-relaxed ${styles.answer} ${styles.answerLinks}`}
+								dangerouslySetInnerHTML={{ __html: item.answerHtml }}
 							/>
-						</svg>
-					</summary>
-					{/* Answers are first-party static strings from src/data/faqs, so rendering them as HTML is safe. */}
-					<div
-						className={`mt-3 text-sm leading-relaxed ${styles.answer} ${styles.answerLinks}`}
-						dangerouslySetInnerHTML={{ __html: item.answerHtml }}
-					/>
-				</details>
-			))}
+						</motion.div>
+					</div>
+				);
+			})}
 		</div>
 	);
 }
@@ -99,7 +123,7 @@ export function FaqSection({
 		<section id={id} className={`border-t px-6 py-24 ${styles.sectionBorder} ${className}`}>
 			<div className="mx-auto max-w-3xl">
 				<h2
-					className={`mb-12 text-center text-3xl font-normal tracking-tight md:text-4xl ${styles.heading}`}
+					className={`mb-12 text-center text-3xl font-medium tracking-[-0.015em] md:text-4xl ${styles.heading}`}
 				>
 					{title}
 				</h2>
diff --git a/website/src/components/marketing/NotFoundPage.tsx b/website/src/components/marketing/NotFoundPage.tsx
index e98a5fb5a8..7914974071 100644
--- a/website/src/components/marketing/NotFoundPage.tsx
+++ b/website/src/components/marketing/NotFoundPage.tsx
@@ -84,7 +84,7 @@ const BouncingPill = () => {
     <div ref={containerRef} className="absolute inset-0 overflow-hidden">
       <span
         ref={pillRef}
-        className="absolute inline-flex items-center gap-2 rounded-full bg-black/40 backdrop-blur-md border border-white/10 px-3 py-1.5 text-sm text-zinc-400 transition-colors duration-200"
+        className="absolute inline-flex items-center gap-2 rounded-full bg-paper/70 backdrop-blur-md border border-ink/15 px-3 py-1.5 text-sm text-ink-soft transition-colors duration-200"
         style={{
           left: `${position.x}%`,
           top: `${position.y}%`,
@@ -99,7 +99,7 @@ const BouncingPill = () => {
 
 export const NotFoundPage = ({ thinkingImage }: NotFoundPageProps) => {
   return (
-    <section className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden px-6">
+    <section className="paper-grain depth-wash relative flex min-h-screen flex-col items-center justify-center overflow-hidden px-6">
       <div className="flex flex-col items-center gap-8">
         {/* Thinking image */}
         <motion.div
@@ -108,13 +108,12 @@ export const NotFoundPage = ({ thinkingImage }: NotFoundPageProps) => {
           transition={{ duration: 0.6 }}
           className="relative w-[280px] h-[350px] sm:w-[320px] sm:h-[400px]"
         >
-          <div className="absolute inset-0 rounded-lg overflow-hidden shadow-2xl">
+          <div className="absolute inset-0 overflow-hidden border border-ink/15 bg-paper-mid p-2.5">
             <img
               src={thinkingImage}
               alt="Classical artwork depicting contemplation"
-              className="w-full h-full object-cover"
+              className="h-full w-full object-cover outline outline-1 outline-ink/10"
             />
-            <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
           </div>
 
           {/* Bouncing 404 pill */}
@@ -127,7 +126,7 @@ export const NotFoundPage = ({ thinkingImage }: NotFoundPageProps) => {
           initial={{ opacity: 0, y: 10 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.5, delay: 0.5 }}
-          className="selection-dark inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-white px-4 py-2 text-sm font-medium text-black transition-colors hover:bg-zinc-200"
+          className="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-ink px-4 py-2 text-sm font-medium text-cream transition-colors hover:bg-ink/85"
         >
           <ArrowLeft className="h-4 w-4" />
           Back to home
diff --git a/website/src/components/marketing/art/PixelGridChart.tsx b/website/src/components/marketing/art/PixelGridChart.tsx
new file mode 100644
index 0000000000..8894029afc
--- /dev/null
+++ b/website/src/components/marketing/art/PixelGridChart.tsx
@@ -0,0 +1,88 @@
+'use client';
+
+import { motion, useReducedMotion } from 'framer-motion';
+
+// Pixel-grid bar chart for dark data cards: each column is a stack of rounded
+// square cells filled bottom-up. Designed to live inside an InkPanel; filled
+// cells are warm white with an optional sage accent column. Animates a
+// bottom-up stagger fill on scroll into view, or renders static when the
+// user prefers reduced motion or `animate` is false.
+
+interface PixelGridChartProps {
+	values: number[];
+	rows?: number;
+	cell?: number;
+	gap?: number;
+	accentColumn?: number;
+	accentColor?: string;
+	animate?: boolean;
+	className?: string;
+}
+
+export const PixelGridChart = ({
+	values,
+	rows = 11,
+	cell = 13,
+	gap = 5,
+	accentColumn,
+	accentColor = '#93A286',
+	animate = true,
+	className,
+}: PixelGridChartProps) => {
+	const reducedMotion = useReducedMotion();
+	const animated = animate && !reducedMotion;
+
+	const width = values.length * (cell + gap) - gap;
+	const height = rows * (cell + gap) - gap;
+	const radius = cell * 0.22;
+
+	const cells: Array<{ x: number; y: number; fill: string; delay: number }> = [];
+	values.forEach((value, col) => {
+		const filled = Math.round(Math.max(0, Math.min(1, value)) * rows);
+		for (let row = 0; row < rows; row++) {
+			const isFilled = row < filled;
+			cells.push({
+				x: col * (cell + gap),
+				y: height - (row + 1) * (cell + gap) + gap,
+				fill: isFilled
+					? col === accentColumn
+						? accentColor
+						: '#F4EFE6'
+					: 'rgba(244, 239, 230, 0.07)',
+				// Filled cells stagger in by column then row; empty cells are static.
+				delay: isFilled ? col * 0.05 + row * 0.02 : 0,
+			});
+		}
+	});
+
+	return (
+		<svg
+			viewBox={`0 0 ${width} ${height}`}
+			width="100%"
+			role="img"
+			aria-hidden="true"
+			focusable="false"
+			className={className}
+		>
+			{cells.map((c, i) =>
+				animated && c.delay > 0 ? (
+					<motion.rect
+						key={i}
+						x={c.x}
+						y={c.y}
+						width={cell}
+						height={cell}
+						rx={radius}
+						fill={c.fill}
+						initial={{ opacity: 0, scale: 0.85 }}
+						whileInView={{ opacity: 1, scale: 1 }}
+						viewport={{ once: true, margin: '-10% 0px' }}
+						transition={{ duration: 0.25, delay: c.delay }}
+					/>
+				) : (
+					<rect key={i} x={c.x} y={c.y} width={cell} height={cell} rx={radius} fill={c.fill} />
+				),
+			)}
+		</svg>
+	);
+};
diff --git a/website/src/components/marketing/art/Spirograph.tsx b/website/src/components/marketing/art/Spirograph.tsx
new file mode 100644
index 0000000000..91c5bdf098
--- /dev/null
+++ b/website/src/components/marketing/art/Spirograph.tsx
@@ -0,0 +1,134 @@
+// Deterministic hypotrochoid rosette rendered as static SVG. One closed path
+// is defined once and stamped as rotated <use> copies; the moiré interference
+// comes from the rotation offsets, so the markup stays small. SSR-safe, no
+// hooks, no canvas.
+//
+//   x(t) = (R - r)·cos t + d·cos(((R - r)/r)·t)
+//   y(t) = (R - r)·sin t - d·sin(((R - r)/r)·t)
+//
+// With integer R and r the curve closes after r / gcd(R, r) revolutions.
+
+interface SpirographProps {
+	variant?: 'moire' | 'rosette' | 'ring';
+	R?: number;
+	r?: number;
+	d?: number;
+	copies?: number;
+	size?: number;
+	stroke?: string;
+	strokeWidth?: number;
+	strokeOpacity?: number;
+	seed?: number;
+	rotate?: boolean;
+	className?: string;
+}
+
+const PRESETS: Record<string, { R: number; r: number; d: number; copies: number }> = {
+	moire: { R: 120, r: 36, d: 84, copies: 48 },
+	rosette: { R: 144, r: 60, d: 100, copies: 24 },
+	ring: { R: 210, r: 66, d: 90, copies: 3 },
+};
+
+const gcd = (a: number, b: number): number => (b ? gcd(b, a % b) : a);
+
+// Small deterministic PRNG so seeded jitter is stable across SSR and client.
+const mulberry32 = (seed: number) => {
+	let a = seed >>> 0;
+	return () => {
+		a |= 0;
+		a = (a + 0x6d2b79f5) | 0;
+		let t = Math.imul(a ^ (a >>> 15), 1 | a);
+		t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+		return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+	};
+};
+
+const hypotrochoidPath = (R: number, r: number, d: number): string => {
+	const revolutions = r / gcd(Math.round(R), Math.round(r));
+	const maxT = revolutions * 2 * Math.PI;
+	const step = 0.05;
+	const points: string[] = [];
+	for (let t = 0; t <= maxT + step; t += step) {
+		const x = (R - r) * Math.cos(t) + d * Math.cos(((R - r) / r) * t);
+		const y = (R - r) * Math.sin(t) - d * Math.sin(((R - r) / r) * t);
+		points.push(`${x.toFixed(1)},${y.toFixed(1)}`);
+	}
+	return `M${points.join('L')}Z`;
+};
+
+export const Spirograph = ({
+	variant = 'ring',
+	R,
+	r,
+	d,
+	copies,
+	size = 480,
+	stroke = '#5A6B52',
+	strokeWidth = 0.7,
+	strokeOpacity = 0.45,
+	seed = 0,
+	rotate = false,
+	className,
+}: SpirographProps) => {
+	const preset = PRESETS[variant];
+	const pR = R ?? preset.R;
+	const pr = r ?? preset.r;
+	const pd = d ?? preset.d;
+	const pCopies = copies ?? preset.copies;
+
+	// Id derived from the curve parameters: stable across SSR and hydration,
+	// and identical instances may safely share a def.
+	const id = `spiro-${pR}-${pr}-${pd}-${pCopies}-${stroke.replace(/[^a-zA-Z0-9]/g, '')}`;
+
+	const rand = seed ? mulberry32(seed) : null;
+	const paths: string[] = [];
+	if (rand) {
+		// Seeded mode jitters d per copy for an organic, hand-drawn moiré.
+		for (let k = 0; k < pCopies; k++) {
+			paths.push(hypotrochoidPath(pR, pr, pd + (rand() - 0.5) * 8));
+		}
+	} else {
+		paths.push(hypotrochoidPath(pR, pr, pd));
+	}
+
+	return (
+		<svg
+			viewBox="-300 -300 600 600"
+			width={size}
+			height={size}
+			aria-hidden="true"
+			focusable="false"
+			className={`${rotate ? 'animate-spin-slow' : ''} ${className ?? ''}`}
+		>
+			{rand ? (
+				paths.map((path, k) => (
+					<path
+						key={k}
+						d={path}
+						fill="none"
+						stroke={stroke}
+						strokeWidth={strokeWidth}
+						strokeOpacity={strokeOpacity}
+						transform={`rotate(${((k * 360) / pCopies).toFixed(2)})`}
+					/>
+				))
+			) : (
+				<>
+					<defs>
+						<path
+							id={id}
+							d={paths[0]}
+							fill="none"
+							stroke={stroke}
+							strokeWidth={strokeWidth}
+							strokeOpacity={strokeOpacity}
+						/>
+					</defs>
+					{Array.from({ length: pCopies }, (_, k) => (
+						<use key={k} href={`#${id}`} transform={`rotate(${((k * 360) / pCopies).toFixed(2)})`} />
+					))}
+				</>
+			)}
+		</svg>
+	);
+};
diff --git a/website/src/components/marketing/bench/BenchCard.tsx b/website/src/components/marketing/bench/BenchCard.tsx
new file mode 100644
index 0000000000..750ecacf0d
--- /dev/null
+++ b/website/src/components/marketing/bench/BenchCard.tsx
@@ -0,0 +1,226 @@
+'use client';
+
+// Benchmark card primitives: the dark "ink" data card with a mono eyebrow, a
+// count-up headline, a comparison ledger, an optional toggle, and floating info
+// tooltips. This mirrors the agentOS solution page's benchmark cards (agentOS
+// vs. sandboxes) so the Actors marketing page (Actors vs. traditional
+// infrastructure) shares the exact same style and animation. The agentOS page
+// keeps its own data-bound copy of these cards; keep the two visually in sync.
+
+import { useId, useMemo, useState, useRef, useEffect } from 'react';
+import type { ReactNode } from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
+import { ArrowDown, ArrowUp } from 'lucide-react';
+import { InkPanel } from '../editorial/InkPanel';
+
+export function BenchInfoTooltip({ children }: { children: ReactNode }) {
+	// The wrapper is intentionally not positioned so the tooltip spans the ink
+	// card itself (the nearest positioned ancestor) instead of clipping at the
+	// panel's overflow-hidden edge.
+	return (
+		<span className='group/tip ml-1.5 inline-flex align-middle'>
+			<svg
+				className='h-3.5 w-3.5 cursor-help text-cream/35 transition-colors group-hover/tip:text-cream/70'
+				viewBox='0 0 16 16'
+				fill='currentColor'
+			>
+				<path d='M8 0a8 8 0 100 16A8 8 0 008 0zm1 12H7V7h2v5zm-1-6a1 1 0 110-2 1 1 0 010 2z' />
+			</svg>
+			<span className='pointer-events-none absolute inset-x-3 bottom-12 z-50 rounded-lg border border-cream/15 bg-ink p-3 text-left text-[11px] leading-relaxed text-cream/80 opacity-0 shadow-xl transition-opacity duration-200 group-hover/tip:pointer-events-auto group-hover/tip:opacity-100 [&_a]:text-cream [&_a]:underline [&_a]:underline-offset-2 [&_strong]:font-medium [&_strong]:text-cream'>
+				{children}
+			</span>
+		</span>
+	);
+}
+
+export function BenchToggle({ options, active, onChange }: { options: string[]; active: number; onChange: (idx: number) => void }) {
+	const layoutId = useId();
+	const columns = options.length === 3 ? 'grid-cols-3' : options.length === 4 ? 'grid-cols-2' : 'grid-cols-2';
+
+	return (
+		<div className={`grid w-full gap-1 rounded-lg border border-cream/10 bg-cream/[0.03] p-1 ${columns}`}>
+			{options.map((label, i) => {
+				const isActive = i === active;
+				return (
+					<motion.button
+						key={label}
+						type='button'
+						onClick={() => onChange(i)}
+						aria-pressed={isActive}
+						whileTap={{ scale: 0.94 }}
+						className={`relative flex h-7 min-w-0 items-center justify-center rounded-md px-1.5 text-center font-mono text-[10px] uppercase tracking-[0.12em] transition-colors ${
+							isActive ? 'text-ink' : 'text-cream/45 hover:text-cream/75'
+						}`}
+					>
+						{isActive && (
+							<motion.span
+								layoutId={`bench-toggle-${layoutId}`}
+								className='absolute inset-0 rounded-md bg-cream'
+								transition={{ type: 'spring', stiffness: 480, damping: 38 }}
+							/>
+						)}
+						<span className='relative z-[1] truncate'>{label}</span>
+					</motion.button>
+				);
+			})}
+		</div>
+	);
+}
+
+export interface BenchRowEntry {
+	label: ReactNode;
+	value: string;
+	highlight?: boolean;
+}
+
+// Splits a stat string into a leading symbol prefix, the numeric portion, and a
+// trailing unit suffix so the number can be counted up while the units stay put.
+// Returns null when there is no number to animate (e.g. "Infinite").
+function parseStatNumber(text: string) {
+	const match = text.match(/^([^\d-]*)(-?[\d,]*\.?\d+)(.*)$/);
+	if (!match) return null;
+	const [, prefix, rawNumber, suffix] = match;
+	const normalized = rawNumber.replace(/,/g, '');
+	const decimals = normalized.includes('.') ? normalized.split('.')[1].length : 0;
+	return {
+		prefix,
+		suffix,
+		value: Number.parseFloat(normalized),
+		decimals,
+		grouped: rawNumber.includes(','),
+	};
+}
+
+// Counts the numeric part of a stat from 0 up to its value. The first run is
+// gated on `active` (the card scrolling into view) and only fires once; later
+// value changes (toggling workload or tier) re-trigger the count from the
+// previous value. Honors reduced-motion by rendering the final value outright.
+export function CountUpStat({ text, active }: { text: string; active: boolean }) {
+	const parsed = useMemo(() => parseStatNumber(text), [text]);
+	const reducedMotion = useReducedMotion();
+	const target = parsed?.value ?? 0;
+
+	const [display, setDisplay] = useState(0);
+	const startedRef = useRef(false);
+	const fromRef = useRef(0);
+	const rafRef = useRef(0);
+
+	useEffect(() => {
+		if (!parsed) return;
+		if (reducedMotion) {
+			setDisplay(target);
+			fromRef.current = target;
+			startedRef.current = true;
+			return;
+		}
+		// Not yet scrolled into view: stay primed at zero for the first count-up.
+		if (!active) {
+			if (!startedRef.current) setDisplay(0);
+			return;
+		}
+		const from = startedRef.current ? fromRef.current : 0;
+		startedRef.current = true;
+		const duration = 850;
+		let start = 0;
+		const step = (now: number) => {
+			if (!start) start = now;
+			const t = Math.min(1, (now - start) / duration);
+			const eased = 1 - (1 - t) ** 3;
+			setDisplay(from + (target - from) * eased);
+			if (t < 1) {
+				rafRef.current = requestAnimationFrame(step);
+			} else {
+				fromRef.current = target;
+			}
+		};
+		rafRef.current = requestAnimationFrame(step);
+		return () => cancelAnimationFrame(rafRef.current);
+	}, [parsed, target, active, reducedMotion]);
+
+	if (!parsed) return <>{text}</>;
+
+	const formatted = parsed.grouped
+		? display.toLocaleString(undefined, {
+				minimumFractionDigits: parsed.decimals,
+				maximumFractionDigits: parsed.decimals,
+			})
+		: display.toFixed(parsed.decimals);
+
+	return (
+		<span className='tabular-nums'>
+			{parsed.prefix}
+			{formatted}
+			{parsed.suffix}
+		</span>
+	);
+}
+
+// Dark ink data card with a mono title, direction tag, headline stat,
+// and label/value rows pinned to the card's foot.
+export function BenchCard({
+	title,
+	statNote,
+	verb,
+	direction = 'lower is better',
+	toggle,
+	rows,
+	note,
+}: {
+	title: string;
+	statNote: string;
+	verb?: string;
+	direction?: 'lower is better' | 'higher is better';
+	toggle?: ReactNode;
+	rows: BenchRowEntry[];
+	note?: string;
+}) {
+	// Trigger the count-up the first time the card scrolls into view, once.
+	const [inView, setInView] = useState(false);
+	const isLower = direction !== 'higher is better';
+
+	return (
+		<InkPanel className='h-full'>
+			<motion.div
+				className='flex h-full flex-col p-6 md:p-7'
+				onViewportEnter={() => setInView(true)}
+				viewport={{ once: true, margin: '-10% 0px' }}
+			>
+				{/* Eyebrow rail */}
+				<div className='flex min-h-[2.5rem] items-start justify-between gap-3'>
+					<span className='font-mono text-[11px] font-medium uppercase tracking-[0.18em] text-sage'>{title}</span>
+					<span className='inline-flex shrink-0 items-center gap-1 whitespace-nowrap font-mono text-[10px] uppercase tracking-[0.12em] text-cream/40'>
+						{isLower ? <ArrowDown className='h-3 w-3 flex-shrink-0' /> : <ArrowUp className='h-3 w-3 flex-shrink-0' />}
+						{direction}
+					</span>
+				</div>
+
+				{/* Verdict: the headline multiplier */}
+				<div className='mt-5 flex items-baseline gap-2'>
+					<span className='font-sans text-[2.75rem] font-medium leading-[1.0] tracking-[-0.02em] tabular-nums text-cream md:text-5xl'>
+						<CountUpStat text={statNote} active={inView} />
+					</span>
+					{verb ? <span className='font-sans text-lg font-medium text-cream/45 md:text-xl'>{verb}</span> : null}
+				</div>
+
+				{/* Comparison ledger: ours vs theirs, same unit, right-aligned */}
+				<div className='mb-6 mt-6 divide-y divide-cream/10 border-y border-cream/10'>
+					{rows.map((row, i) => (
+						<div key={i} className='flex items-baseline justify-between gap-4 py-2.5'>
+							<span className={`inline-flex min-w-0 items-baseline font-mono text-[13px] ${row.highlight ? 'font-medium text-cream' : 'font-normal text-cream/45'}`}>
+								{row.label}
+							</span>
+							<span className={`whitespace-nowrap font-mono text-[15px] tabular-nums ${row.highlight ? 'font-medium text-sage' : 'font-normal text-cream/45'}`}>
+								{row.value}
+							</span>
+						</div>
+					))}
+				</div>
+
+				{toggle}
+				{note ? (
+					<p className='mt-auto font-mono text-[10px] leading-relaxed text-cream/35'>{note}</p>
+				) : null}
+			</motion.div>
+		</InkPanel>
+	);
+}
diff --git a/website/src/components/marketing/cloud/ArchitectureSection.tsx b/website/src/components/marketing/cloud/ArchitectureSection.tsx
deleted file mode 100644
index 5c495481e1..0000000000
--- a/website/src/components/marketing/cloud/ArchitectureSection.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-"use client";
-
-import {
-	Icon,
-	faArrowRight,
-	faCloud,
-	faDatabase,
-	faServer,
-	faLayerGroup,
-} from "@rivet-gg/icons";
-
-export const ArchitectureSection = () => {
-	return (
-		<div className="mx-auto max-w-7xl px-6 py-32 lg:py-40">
-			<div className="text-center mb-16">
-				<h2 className="text-4xl font-medium tracking-tight text-white">
-					Connect to Your Applications
-				</h2>
-				<p className="mt-4 text-lg text-white/70">
-					Rivet Cloud scales actors that connect seamlessly to your applications deployed anywhere
-				</p>
-			</div>
-
-			{/* Architecture Diagram */}
-			<div className="bg-background rounded-xl p-8 mb-16">
-				<div className="grid grid-cols-1 lg:grid-cols-[1fr_auto_1fr] gap-8 items-center">
-					{/* Your Applications */}
-					<div className="text-center">
-						<div className="bg-white/5 rounded-lg p-6 border border-white/10">
-							<Icon icon={faServer} className="text-3xl text-white/90 mb-4" />
-							<h3 className="text-xl font-medium text-white mb-2">Your Applications</h3>
-							<p className="text-white/60 text-sm">
-								Deploy on Railway, Vercel, AWS, GCP, or any platform
-							</p>
-						</div>
-					</div>
-
-					{/* Connection Arrows */}
-					<div className="flex flex-row lg:flex-col items-center justify-center gap-4">
-						<Icon icon={faArrowRight} className="text-xl text-white/40 rotate-90 lg:rotate-0" />
-						<Icon icon={faArrowRight} className="text-xl text-white/40 -rotate-90 lg:rotate-180" />
-					</div>
-
-					{/* Rivet Engine */}
-					<div className="text-center">
-						<div className="bg-white/5 rounded-lg p-6 border border-white/10">
-							<Icon icon={faLayerGroup} className="text-3xl text-white/90 mb-4" />
-							<h3 className="text-xl font-medium text-white mb-2">Rivet Cloud</h3>
-							<p className="text-white/60 text-sm">
-								Actor scaling and storage with managed FoundationDB
-							</p>
-						</div>
-					</div>
-				</div>
-
-			</div>
-
-			{/* Platform Integration Details */}
-			<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-				<div className="bg-white/2 rounded-lg p-6 border border-white/10">
-					<div className="flex items-center gap-3 mb-4">
-						<div className="w-8 h-8 bg-orange-500/20 rounded-lg flex items-center justify-center">
-							<span className="text-orange-500 font-bold text-sm">R</span>
-						</div>
-						<h3 className="text-lg font-medium text-white">Railway</h3>
-					</div>
-					<p className="text-white/60 text-sm">
-						Connect your Railway-deployed applications to Rivet actors for stateful, real-time functionality.
-					</p>
-				</div>
-
-				<div className="bg-white/2 rounded-lg p-6 border border-white/10">
-					<div className="flex items-center gap-3 mb-4">
-						<div className="w-8 h-8 bg-black/20 rounded-lg flex items-center justify-center">
-							<span className="text-black font-bold text-sm">V</span>
-						</div>
-						<h3 className="text-lg font-medium text-white">Vercel</h3>
-					</div>
-					<p className="text-white/60 text-sm">
-						Integrate Vercel serverless functions with Rivet actors for persistent state and real-time features.
-					</p>
-				</div>
-
-				<div className="bg-white/2 rounded-lg p-6 border border-white/10">
-					<div className="flex items-center gap-3 mb-4">
-						<Icon icon={faCloud} className="text-xl text-white/90" />
-						<h3 className="text-lg font-medium text-white">Any Platform</h3>
-					</div>
-					<p className="text-white/60 text-sm">
-						Connect applications from AWS, GCP, Azure, or any cloud platform to Rivet Cloud
-					</p>
-				</div>
-			</div>
-
-			{/* CTA */}
-			<div className="text-center mt-12">
-				<a href="/docs/general/endpoints"
-					className="inline-flex items-center gap-2 text-white/70 hover:text-white transition-colors"
-				>
-					<span>Learn how to connect your backend</span>
-					<Icon icon={faArrowRight} />
-				</a>
-			</div>
-		</div>
-	);
-};
diff --git a/website/src/components/marketing/cloud/CommandCenterSection.tsx b/website/src/components/marketing/cloud/CommandCenterSection.tsx
deleted file mode 100644
index d75683e147..0000000000
--- a/website/src/components/marketing/cloud/CommandCenterSection.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-"use client";
-
-const imgHub = { src: "https://assets.rivet.dev/website/images/screenshots/rivet-hub.png", width: 2967, height: 1826, format: "png" };
-import {
-	faCodeBranch,
-	faFlask,
-	faTerminal,
-	faUserGroup,
-} from "@rivet-gg/icons";
-import type { FeatureItem } from "./ServerlessLimitationsSection";
-import { Feature } from "./components/Feature";
-
-// Command Center section
-export const CommandCenterSection = () => {
-	const features: FeatureItem[] = [
-		{
-			name: "Observability & Monitoring",
-			icon: faTerminal,
-			description:
-				"Real-time monitoring out of the box with powerful log querying",
-		},
-		{
-			name: "Preview Environments",
-			icon: faFlask,
-			description:
-				"Test changes in isolated environments before deploying",
-		},
-		{
-			name: "Instant Rollbacks",
-			icon: faCodeBranch,
-			description: "Safely deploy and revert changes with zero downtime",
-		},
-		{
-			name: "Team Access",
-			icon: faUserGroup,
-			description: "Collaborate securely with teammates",
-		},
-	];
-
-	return (
-		<div className="w-full px-6 py-40 lg:py-48">
-			<div className="relative">
-				{/* Screenshot */}
-				<div
-					className="absolute inset-0 z-[-1] overflow-hidden"
-					style={{ perspective: "2000px" }}
-				>
-					{/* Add a gradient overlay at the container level to fade out the entire element including border */}
-					<div
-						className="absolute inset-0 z-[1] pointer-events-none"
-						style={{
-							background:
-								"linear-gradient(90deg, hsl(var(--background) / 0) 66%, hsl(var(--background) / 0.95) 85%, hsl(var(--background) / 1) 100%)",
-						}}
-					/>
-
-					<div
-						className="absolute border-2 border-white/10 rounded-md"
-						style={{
-							transformStyle: "preserve-3d",
-							transform:
-								"translateX(-11%) scale(1.2) rotateX(38deg) rotateY(19deg) rotateZ(340deg)",
-							transformOrigin: "top left",
-							top: "210px",
-							left: "0",
-							right: "0",
-							width: "80%",
-							maxWidth: "1200px",
-							margin: "0 auto",
-							aspectRatio: "16/9",
-							boxShadow: "0 35px 60px -15px rgba(0, 0, 0, 0.5)",
-							zIndex: 0,
-						}}
-					>
-						{/* Hub screenshot with enhanced depth */}
-						<div
-							className="w-full h-full overflow-hidden"
-							style={{
-								transformStyle: "preserve-3d",
-								backfaceVisibility: "hidden",
-								position: "relative",
-							}}
-						>
-							<img src={imgHub}
-								alt="Rivet Hub dashboard"
-								className="w-full h-auto object-cover object-top"
-							/>
-						</div>
-					</div>
-				</div>
-
-				{/* Content */}
-				<div>
-					{/* Header */}
-					<div className="max-w-7xl mx-auto relative z-10">
-						<h2 className="max-w-lg text-4xl font-medium tracking-tight text-white">
-							Meet your command center
-						</h2>
-						<p className="max-w-lg mt-4 text-lg text-white/70">
-							Complete visibility and control over your Rivet Actors
-						</p>
-					</div>
-
-					{/* Spacer */}
-					<div className="h-[450px]" />
-
-					{/* Features grid */}
-					<div className="pt-16 relative bg-gradient-to-t from-[hsl(var(--background))] via-[hsl(var(--background))] to-transparent z-10">
-						<div className="max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 gap-x-6 gap-y-6">
-							{features.map((feature, index) => (
-								<Feature key={index} feature={feature} />
-							))}
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-};
diff --git a/website/src/components/marketing/cloud/CommunitySection.tsx b/website/src/components/marketing/cloud/CommunitySection.tsx
deleted file mode 100644
index 604b089b3f..0000000000
--- a/website/src/components/marketing/cloud/CommunitySection.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-"use client";
-
-import {
-	Icon,
-	faBluesky,
-	faDiscord,
-	faGithub,
-	faXTwitter,
-} from "@rivet-gg/icons";
-
-// Community section
-export const CommunitySection = () => {
-	const platforms = [
-		{
-			name: "Discord",
-			icon: faDiscord,
-			href: "https://discord.gg/aXYfyNxYVn",
-		},
-		{
-			name: "Discussions",
-			icon: faGithub,
-			href: "https://github.com/rivet-dev/rivet/discussions",
-		},
-		{ name: "X", icon: faXTwitter, href: "https://x.com/rivet_dev" },
-		{
-			name: "Bluesky",
-			icon: faBluesky,
-			href: "https://bsky.app/profile/rivet.dev",
-		},
-	];
-
-	// Tweets for each column
-	const columnTweets = [
-		// Column 1
-		[
-			{
-				user: "Jane Doe",
-				handle: "@janedoe",
-				content:
-					"Just deployed my first stateful job with @rivet_dev and I'm blown away by how simple it was. The documentation is excellent!",
-			},
-			{
-				user: "Mike Williams",
-				handle: "@mikew",
-				content:
-					"As someone new to serverless, Rivet made the learning curve much smoother. Their tutorials are super straightforward.",
-			},
-			{
-				user: "Sara Chen",
-				handle: "@sarac",
-				content:
-					"Been using @rivet_dev for our AI agents and the performance is incredible. Self-hosting was a breeze too!",
-			},
-		],
-		// Column 2
-		[
-			{
-				user: "John Smith",
-				handle: "@johnsmith",
-				content:
-					"Rivet has completely changed how we handle our functions. Our team's productivity has doubled since we made the switch.",
-			},
-			{
-				user: "Emma Rodriguez",
-				handle: "@emmar",
-				content:
-					"The desktop sandbox feature in @rivet_dev is a game changer for our GUI-based applications. Nothing else comes close.",
-			},
-			{
-				user: "David Kim",
-				handle: "@davidk",
-				content:
-					"Our entire backend is running on Rivet now. The monitoring tools make my job 10x easier as a DevOps engineer.",
-			},
-		],
-		// Column 3
-		[
-			{
-				user: "Alex Johnson",
-				handle: "@alexj",
-				content:
-					"I've tried all the serverless platforms out there, and @rivet_dev is hands down the best one for my needs. The open-source aspect sealed the deal for me.",
-			},
-			{
-				user: "Taylor Morgan",
-				handle: "@taylorm",
-				content:
-					"Moving from AWS to self-hosted @rivet_dev cut our costs by 70% while improving performance. Best decision we made this year.",
-			},
-			{
-				user: "Jordan Lee",
-				handle: "@jordanl",
-				content:
-					"The Rivet community is amazing! Got help with my implementation within minutes of posting a question.",
-			},
-		],
-	];
-
-	return (
-		<div className="mx-auto max-w-7xl px-6 pt-16 pb-8 lg:pt-20 lg:pb-10 lg:px-8">
-			{/* Header */}
-			<div className="text-center mb-10">
-				<h2 className="text-4xl font-medium tracking-tight text-white">
-					Join the community
-				</h2>
-				<p className="mt-4 text-lg text-white/70">
-					Connect with thousands of developers building with Rivet
-				</p>
-			</div>
-
-			{/* Social links */}
-			<div className="flex justify-center space-x-3 mb-16">
-				{platforms.map((platform, index) => (
-					<a key={index} href={platform.href} className="group">
-						<div className="flex items-center justify-center h-10 px-5 rounded-md border border-zinc-800 bg-zinc-900 group-hover:bg-zinc-800 group-hover:border-zinc-600 transition-all">
-							<Icon
-								icon={platform.icon}
-								className="text-white/80 group-hover:text-white mr-2 transition-colors"
-							/>
-							<span className="text-sm text-white/80 group-hover:text-white transition-colors font-medium">
-								{platform.name}
-							</span>
-						</div>
-					</a>
-				))}
-			</div>
-
-			{/* Tweets */}
-			{/*<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-				{columnTweets.map((column, columnIndex) => (
-					<div key={columnIndex} className="flex flex-col space-y-6">
-						{column.map((tweet, tweetIndex) => (
-							<div
-								key={`${columnIndex}-${tweetIndex}`}
-								className="rounded-xl p-6 bg-black/20 border border-white/5 flex flex-col hover:bg-black/30 hover:border-white/10 transition-all"
-							>
-								<div className="flex items-center mb-4">
-									<div className="w-10 h-10 rounded-full bg-zinc-700 mr-3"></div>
-									<div>
-										<div className="text-white font-medium">
-											{tweet.user}
-										</div>
-										<div className="text-white/50 text-sm">
-											{tweet.handle}
-										</div>
-									</div>
-								</div>
-								<p className="text-white/80">{tweet.content}</p>
-							</div>
-						))}
-					</div>
-				))}
-			</div>*/}
-		</div>
-	);
-};
diff --git a/website/src/components/marketing/cloud/CopyCommand.tsx b/website/src/components/marketing/cloud/CopyCommand.tsx
deleted file mode 100644
index a05d29f0ac..0000000000
--- a/website/src/components/marketing/cloud/CopyCommand.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-"use client";
-
-import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
-import { Icon } from "@rivet-gg/icons";
-import { useState } from "react";
-
-interface CopyCommandProps {
-	command: string;
-}
-
-export const CopyCommand: React.FC<CopyCommandProps> = ({ command }) => {
-	const [copied, setCopied] = useState(false);
-	const [isPressed, setIsPressed] = useState(false);
-
-	const handleCopy = async () => {
-		await navigator.clipboard.writeText(command);
-		setCopied(true);
-		setTimeout(() => setCopied(false), 2000);
-	};
-
-	return (
-		<button
-			onClick={handleCopy}
-			onMouseDown={() => setIsPressed(true)}
-			onMouseUp={() => setIsPressed(false)}
-			onMouseLeave={() => setIsPressed(false)}
-			className={`relative group inline-flex items-center bg-white/5 rounded-lg border border-white/10 hover:border-white/20 transition-all duration-75 ${
-				isPressed ? "transform scale-[0.98] bg-white/[0.03]" : ""
-			}`}
-			aria-label="Copy command"
-		>
-			<code className="px-4 py-2 text-sm text-white/70 font-mono cursor-pointer">
-				{command}
-			</code>
-			<div className="px-3 py-2 border-l border-white/10 text-white/40 group-hover:text-white/90 transition-colors">
-				<Icon
-					icon={copied ? faCheck : faCopy}
-					className={`text-sm ${copied ? "text-green-500" : ""}`}
-				/>
-			</div>
-		</button>
-	);
-};
diff --git a/website/src/components/marketing/cloud/CtaButtons.tsx b/website/src/components/marketing/cloud/CtaButtons.tsx
deleted file mode 100644
index 85d71c1dc5..0000000000
--- a/website/src/components/marketing/cloud/CtaButtons.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Icon, faArrowRight } from "@rivet-gg/icons";
-import { MarketingButton } from "./MarketingButton";
-
-// Reusable CTA buttons component for use in hero and footer sections
-export const CtaButtons = () => {
-	return (
-		<div className="flex flex-col sm:flex-row items-center sm:items-start gap-4">
-			<MarketingButton href="/talk-to-an-engineer" primary>
-				Talk to an engineer
-			</MarketingButton>
-			<MarketingButton href="/docs/cloud">
-				<span>Documentation</span>
-				<Icon
-					icon={faArrowRight}
-					className="ml-2 text-xs group-hover:translate-x-0.5 transition-transform duration-200"
-				/>
-			</MarketingButton>
-			{/* TODO */}
-			{/*<MarketingButton 
-        href="#demo"
-      >
-        <span>Book Demo</span>
-      </MarketingButton>*/}
-		</div>
-	);
-};
diff --git a/website/src/components/marketing/cloud/CtaSection.tsx b/website/src/components/marketing/cloud/CtaSection.tsx
deleted file mode 100644
index 2b8860d4ff..0000000000
--- a/website/src/components/marketing/cloud/CtaSection.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-"use client";
-
-import { Icon, faArrowRight } from "@rivet-gg/icons";
-import { MarketingButton } from "./MarketingButton";
-
-// CTA section
-export const CtaSection = () => {
-	return (
-		<div className="mx-auto max-w-7xl px-6 py-36 lg:py-52 lg:px-8 border-t border-white/5 mt-24">
-			<div className="text-center">
-				<h2 className="text-4xl font-medium tracking-tight text-white">
-					Get building today
-				</h2>
-				<p className="mt-6 text-xl text-white/70 max-w-lg mx-auto">
-					Start for free, no credit card required. Deploy your first
-					serverless project in minutes.
-				</p>
-
-				<div className="mt-12 flex items-center justify-center gap-x-6">
-					<div className="flex flex-col sm:flex-row items-center sm:items-start gap-4">
-						<MarketingButton href="/talk-to-an-engineer" primary>
-							Get Started
-						</MarketingButton>
-						<MarketingButton href="/docs/cloud">
-							<span>Documentation</span>
-							<Icon
-								icon={faArrowRight}
-								className="ml-2 text-xs group-hover:translate-x-0.5 transition-transform duration-200"
-							/>
-						</MarketingButton>
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-};
diff --git a/website/src/components/marketing/cloud/FeaturesGrid.tsx b/website/src/components/marketing/cloud/FeaturesGrid.tsx
deleted file mode 100644
index bbb3bebbb5..0000000000
--- a/website/src/components/marketing/cloud/FeaturesGrid.tsx
+++ /dev/null
@@ -1,250 +0,0 @@
-import {
-	Icon,
-	faActorsBorderless,
-	faArrowRight,
-	faCode,
-	faLayerGroup,
-	faServer,
-} from "@rivet-gg/icons";
-import clsx from "clsx";
-import ActorsSvg from "./images/actors.svg";
-import ContainerSvg from "./images/container.svg";
-import DbSvg from "./images/db.svg";
-import GlobeSvg from "./images/globe.svg";
-import WorkflowSvg from "./images/workflow.svg";
-
-const WT = ({ children }) => <span className="text-white/90">{children}</span>;
-
-// Feature component for individual features
-const Feature = ({
-	title,
-	description,
-	faIcon,
-	href,
-	useCases,
-	badge,
-}: {
-	title: string;
-	description: string;
-	faIcon: any;
-	href: string;
-	useCases: string[];
-	badge?: string;
-}) => {
-	const getImageDetails = () => {
-		switch (title) {
-			case "Functions":
-				return {
-					src: GlobeSvg,
-					alt: "Globe",
-					position: "bottom-0 left-0",
-					size: "h-80 w-80",
-					margin: "-ml-8 -mb-36",
-					mobileCss: "", // Globe is already positioned correctly
-					desktopCss: "", // Globe is already positioned correctly
-				};
-			case "Actors":
-				return {
-					src: ActorsSvg,
-					alt: "Actors",
-					position: "bottom-0 left-0",
-					size: "h-64 w-64",
-					margin: "-ml-8 -mb-24",
-					mobileCss: "", // Position at bottom for mobile
-					desktopCss: "lg:top-[240px] lg:bottom-auto", // Reset to original position for desktop
-				};
-			case "Containers":
-				return {
-					src: ContainerSvg,
-					alt: "Container",
-					position: "bottom-0 left-0",
-					size: "h-80 w-80",
-					margin: "-ml-[100px] -mb-24",
-					mobileCss: "", // Position at bottom for mobile
-					desktopCss: "lg:top-[240px] lg:bottom-auto", // Reset to original position for desktop
-				};
-			case "Workflows":
-				return {
-					src: WorkflowSvg,
-					alt: "Workflow",
-					position: "top-[200px] left-0",
-					size: "h-80 w-80",
-					margin: "-ml-[100px]",
-					mobileCss: "",
-					desktopCss: "",
-				};
-			case "SQLite Databases":
-				return {
-					src: DbSvg,
-					alt: "Database",
-					position: "top-[200px] left-0",
-					size: "h-80 w-80",
-					margin: "-ml-[100px]",
-					mobileCss: "",
-					desktopCss: "",
-				};
-			default:
-				return null;
-		}
-	};
-
-	const imageDetails = getImageDetails();
-	return (
-		<a href={href} className="block group">
-			<div className="rounded-xl bg-white/2 border border-white/20 group-hover:border-[white]/40 shadow-sm transition-all duration-200 relative overflow-hidden h-[300px] lg:h-[450px] flex flex-col">
-				<div className="px-8 mt-6">
-					<div className="flex flex-wrap items-center gap-3 mb-4 text-white text-base">
-						<Icon icon={faIcon} />
-						<h3>{title}</h3>
-						{badge && (
-							<span className="px-2 py-0.5 text-xs font-medium rounded-full bg-orange-950/50 text-[#FF5C00]">
-								{badge}
-							</span>
-						)}
-					</div>
-
-					<p className="text-white text-base text-white/40 mb-2">
-						{description}
-					</p>
-
-					{/*<p className="text-white text-base text-white/40">
-						{description}<br/>Supports{" "}
-						{useCases.map((useCase, index) => (
-							<span key={index} className="text-white/90">
-								{useCase}
-								{index < useCases.length - 1 ? ", " : ""}
-							</span>
-						))}
-						.
-					</p>*/}
-
-					<p className="text-white text-base text-white/40">
-						Supports{" "}
-						{useCases.map((useCase, index) => (
-							<span key={index}>
-								<span className="text-white/90">{useCase}</span>
-								{index < useCases.length - 1 ? ", " : ""}
-							</span>
-						))}
-						.
-					</p>
-
-					{/*<div className="mt-3 flex flex-wrap flex-col gap-0.5 text-sm">
-						{useCases.map((useCase, index) => (
-							<span key={index} className="text-white/90">
-								<Icon icon={faCheck} className="mr-1.5" />
-								{useCase}
-							</span>
-						))}
-					</div>*/}
-				</div>
-
-				<div className="mt-auto">
-					{imageDetails && (
-						<div
-							className={clsx(
-								"absolute opacity-10 group-hover:opacity-40 transition-opacity duration-200",
-								imageDetails.position,
-								imageDetails.size,
-								imageDetails.margin,
-								imageDetails.mobileCss,
-								imageDetails.desktopCss,
-							)}
-						>
-							<img src={imageDetails.src}
-								alt={imageDetails.alt}
-								fill
-								className="object-contain scale-105"
-							/>
-						</div>
-					)}
-					<div className="px-8 pb-8 relative z-10">
-						<div className="flex items-center justify-end text-white opacity-0 group-hover:opacity-40 transition-opacity">
-							<Icon
-								icon={faArrowRight}
-								className="text-xl -translate-x-1 group-hover:translate-x-0 transition-all"
-							/>
-						</div>
-					</div>
-				</div>
-			</div>
-		</a>
-	);
-};
-
-// Features grid component
-export const FeaturesGrid = () => {
-	const features = [
-		{
-			//title: "Stateless Functions",
-			title: "Rivet Engine",
-			description: (
-				<>
-					<WT>Enterprise-scale orchestration</WT> built on FoundationDB for massive actor distribution and fault tolerance.
-				</>
-			),
-			faIcon: faServer,
-			href: "/docs/self-hosting",
-			useCases: ["actor orchestration", "multi-region", "fault tolerance"],
-			badge: "FoundationDB",
-		},
-		{
-			//title: "Stateful Actors",
-			title: "Rivet Actors",
-			description: (
-				<>
-					<WT>Long running tasks</WT> with state persistence,
-					hibernation, and realtime that scale infinitely.
-				</>
-			),
-			faIcon: faActorsBorderless,
-			href: "/docs/actors",
-			useCases: ["AI agents", "realtime apps", "local-first sync"],
-			badge: "Open-Source Durable Objects",
-		},
-		{
-			//title: "Sandboxed Containers",
-			title: "Platform Integration",
-			description: (
-				<>
-					<WT>Connect to your applications</WT> on Railway, Vercel, and other platforms with seamless integration.
-				</>
-			),
-			faIcon: faLayerGroup,
-			href: "/docs/general/endpoints",
-			useCases: ["Railway", "Vercel", "any platform"],
-		},
-		//{
-		//	title: "Workflows",
-		//	description: "Orchestrate complex, multi-step processes",
-		//	faIcon: faArrowsToCircle,
-		//	href: "/docs/workflows",
-		//	useCases: ["AI agents", "Business logic", "Data pipelines"]
-		//},
-		//{
-		//	title: "SQLite Databases",
-		//	description: "On-demand SQL databases 10x faster than Postgres with vector stores & full text search",
-		//	faIcon: faDatabase,
-		//	href: "/docs/sqlite-databases",
-		//	useCases: ["Agent memory", "Per-tenant databases", "Local-first apps"]
-		//},
-	];
-
-	return (
-		<div className="mx-auto w-full px-4 pt-0 pb-16 -mt-8 max-w-[1200px] md:px-8">
-			<div className="grid grid-cols-1 lg:grid-cols-3 gap-4 mt-16 md:mt-20 lg:justify-items-center">
-				{features.map((feature, index) => (
-					<Feature
-						key={index}
-						title={feature.title}
-						description={feature.description}
-						faIcon={feature.faIcon}
-						href={feature.href}
-						useCases={feature.useCases}
-						badge={feature.badge}
-					/>
-				))}
-			</div>
-		</div>
-	);
-};
diff --git a/website/src/components/marketing/cloud/FrameworksSection.tsx b/website/src/components/marketing/cloud/FrameworksSection.tsx
deleted file mode 100644
index fce105dc20..0000000000
--- a/website/src/components/marketing/cloud/FrameworksSection.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import {
-	Icon,
-	faAngular,
-	faCss3Alt,
-	faDatabase,
-	faDocker,
-	faGolang,
-	faHtml5,
-	faJava,
-	faJsSquare,
-	faNodeJs,
-	faPhp,
-	faPython,
-	faReact,
-	faRust,
-	faSwift,
-	faVuejs,
-} from "@rivet-gg/icons";
-
-// Frameworks section
-export const FrameworksSection = () => {
-	const frameworks = [
-		{ icon: faReact, name: "React", href: "/docs/frameworks/react" },
-		{ icon: faVuejs, name: "Vue", href: "/docs/frameworks/vue" },
-		{ icon: faAngular, name: "Angular", href: "/docs/frameworks/angular" },
-		{ icon: faNodeJs, name: "Node.js", href: "/docs/frameworks/nodejs" },
-		{ icon: faPython, name: "Python", href: "/docs/frameworks/python" },
-		{ icon: faPhp, name: "PHP", href: "/docs/frameworks/php" },
-		{ icon: faJava, name: "Java", href: "/docs/frameworks/java" },
-		{ icon: faRust, name: "Rust", href: "/docs/frameworks/rust" },
-		{ icon: faSwift, name: "Swift", href: "/docs/frameworks/swift" },
-		{
-			icon: faJsSquare,
-			name: "JavaScript",
-			href: "/docs/frameworks/javascript",
-		},
-		{ icon: faHtml5, name: "HTML5", href: "/docs/frameworks/html5" },
-		{ icon: faCss3Alt, name: "CSS3", href: "/docs/frameworks/css3" },
-		{ icon: faGolang, name: "Go", href: "/docs/frameworks/go" },
-		{ icon: faDatabase, name: "SQL", href: "/docs/frameworks/sql" },
-		{ icon: faDocker, name: "Docker", href: "/docs/frameworks/docker" },
-	];
-
-	return (
-		<div className="mx-auto max-w-7xl px-6 py-28 lg:py-44 lg:px-8 mt-16">
-			<div className="flex flex-col md:flex-row md:items-start">
-				<div className="grow max-w-lg mb-8 md:mb-0 md:pr-8">
-					<h2 className="text-4xl font-medium tracking-tight text-white text-left">
-						Rivet works with any framework
-					</h2>
-					<p className="mt-4 text-lg text-white/70 text-left">
-						Integrate with your existing tech stack or start fresh
-						with your preferred tools and languages.
-					</p>
-				</div>
-				<div>
-					<div className="grid grid-cols-4 gap-x-6 gap-y-6">
-						{frameworks.map((framework, index) => (
-							<a
-								key={index}
-								href={framework.href}
-								className="group"
-							>
-								<div className="h-16 w-16 mx-auto flex items-center justify-center">
-									<Icon
-										icon={framework.icon}
-										className="text-5xl text-white/30 group-hover:text-white/90 transition-colors duration-200"
-										title={framework.name}
-									/>
-								</div>
-							</a>
-						))}
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-};
diff --git a/website/src/components/marketing/cloud/MarketingButton.tsx b/website/src/components/marketing/cloud/MarketingButton.tsx
deleted file mode 100644
index 5f2ce7829a..0000000000
--- a/website/src/components/marketing/cloud/MarketingButton.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-
-// Marketing Button component for consistent styling across marketing pages
-export const MarketingButton = ({
-	children,
-	href,
-	primary = false,
-}: {
-	children: React.ReactNode;
-	href: string;
-	primary?: boolean;
-}) => {
-	return (
-		<a href={href}
-			className={`group inline-flex items-center justify-center px-3.5 py-2 text-base font-medium rounded-xl transition-all duration-200 active:scale-[0.97] ${
-				primary
-					? "bg-[#FF5C00]/90 hover:bg-[#FF5C00] hover:brightness-110 text-white"
-					: "text-white/80 hover:text-white bg-transparent hover:bg-[rgba(255,255,255,0.1)]"
-			}`}
-		>
-			{children}
-		</a>
-	);
-};
diff --git a/website/src/components/marketing/cloud/PerformanceSection.tsx b/website/src/components/marketing/cloud/PerformanceSection.tsx
deleted file mode 100644
index 1c9332b690..0000000000
--- a/website/src/components/marketing/cloud/PerformanceSection.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import {
-	Icon,
-	faChartLine,
-	faGlobe,
-	faLeaf,
-	faRocketLaunch,
-} from "@rivet-gg/icons";
-
-export const PerformanceSection = () => {
-	const stats = [
-		{
-			title: "No Cold Starts",
-			icon: faRocketLaunch,
-			description: "Instant response times for all requests",
-		},
-		{
-			title: "Global Low Latency",
-			icon: faGlobe,
-			description: "Low latency to users worldwide",
-		},
-		{
-			title: "Intelligent Scaling",
-			icon: faChartLine,
-			description:
-				"Handles any load on demand without manual configuration",
-		},
-		{
-			title: "Minimize Idle CPU Time",
-			icon: faLeaf,
-			description:
-				"Optimize wasted CPU time or costs for long-running and realtime applications",
-		},
-	];
-
-	return (
-		<section className="mx-auto max-w-7xl my-16">
-			<div className="rounded-lg bg-white/2 border border-white/15 p-12">
-				<div className="flex flex-col md:flex-row gap-12">
-					{/* Text content on the left */}
-					<div className="md:w-2/5">
-						{/*<h2 className="text-2xl font-semibold text-white mb-4">Performance that scales</h2>*/}
-						<h2 className="text-3xl font-medium tracking-tight text-white mb-4">
-							Performance that scales
-						</h2>
-						<p className="text-white/60">
-							Deploy your serverless applications globally with
-							low latency and zero cold starts
-						</p>
-					</div>
-
-					{/* 2x2 grid on the right */}
-					<div className="md:w-3/5">
-						<div className="grid grid-cols-1 sm:grid-cols-2 gap-8">
-							{stats.map((stat, index) => (
-								<div key={index} className="flex flex-col">
-									<div className="mb-2">
-										<div className="inline-flex items-center justify-center w-12 h-12 rounded-full border border-white/10">
-											<Icon
-												icon={stat.icon}
-												className="text-xl text-white"
-											/>
-										</div>
-									</div>
-									<h3 className="text-xl font-normal text-white mb-1">
-										{stat.title}
-									</h3>
-									<p className="text-sm text-white/60">
-										{stat.description}
-									</p>
-								</div>
-							))}
-						</div>
-					</div>
-				</div>
-			</div>
-		</section>
-	);
-};
diff --git a/website/src/components/marketing/cloud/PowerfulPrimitivesSection.tsx b/website/src/components/marketing/cloud/PowerfulPrimitivesSection.tsx
deleted file mode 100644
index 3fdb165952..0000000000
--- a/website/src/components/marketing/cloud/PowerfulPrimitivesSection.tsx
+++ /dev/null
@@ -1,587 +0,0 @@
-"use client";
-
-import {
-	Icon,
-	faArrowsTurnRight,
-	faClock,
-	faCode,
-	faCogs,
-	faCourtSport,
-	faDatabase,
-	faFileCode,
-	faFilePdf,
-	faGamepad,
-	faImage,
-	faLinear,
-	faOven,
-	faPhone,
-	faRobot,
-	faServer,
-	faSync,
-	faWaveSine,
-} from "@rivet-gg/icons";
-import { useEffect, useRef, useState } from "react";
-
-import imgBatchJobs from "./images/diagrams/batch-jobs.svg";
-// Import all diagram images
-import imgCodingAgent from "./images/diagrams/coding-agent.svg";
-import imgCollaborativeDocuments from "./images/diagrams/collaborative-documents.svg";
-import imgEtlPipeline from "./images/diagrams/etl-pipeline.svg";
-import imgFfmpegConversion from "./images/diagrams/ffmpeg-conversion.svg";
-import imgLinearAgent from "./images/diagrams/linear-agent.svg";
-import imgLiveEvents from "./images/diagrams/live-events.svg";
-import imgLocalFirstSync from "./images/diagrams/local-first-sync.svg";
-import imgManagedCi from "./images/diagrams/managed-ci.svg";
-import imgMcpServer from "./images/diagrams/mcp-server.svg";
-import imgMultiplayerGameServers from "./images/diagrams/multiplayer-game-servers.svg";
-import imgPdfTextExtraction from "./images/diagrams/pdf-text-extraction.svg";
-import imgPerTenantDatabase from "./images/diagrams/per-tenant-database.svg";
-import imgSandboxedCode from "./images/diagrams/sandboxed-code.svg";
-import imgScheduledTasks from "./images/diagrams/scheduled-tasks.svg";
-import imgStreamProcessing from "./images/diagrams/stream-processing.svg";
-import imgVoiceAgent from "./images/diagrams/voice-agent.svg";
-
-interface TabItem {
-	id: string;
-	icon: any;
-	title: string;
-	description: string;
-	image: any;
-	docs?: {
-		actors?: boolean;
-		containers?: boolean;
-		functions?: boolean;
-		guide?: string;
-		sourceCode?: string;
-	};
-}
-
-interface TabGroup {
-	id: string;
-	title: string;
-	items: TabItem[];
-}
-
-// Define all tab groups and their items at the top level
-const TAB_GROUPS: TabGroup[] = [
-	{
-		id: "scaling",
-		title: "Scaling",
-		items: [
-			{
-				id: "foundationdb",
-				icon: faDatabase,
-				title: "FoundationDB Backend",
-				description:
-					"Enterprise-grade distributed database that provides ACID transactions and infinite scalability for actor state management.",
-				image: imgPerTenantDatabase, // Reuse existing image
-				docs: {
-					actors: true,
-					containers: false,
-					functions: false,
-				},
-			},
-			{
-				id: "multi-region",
-				icon: faServer,
-				title: "Multi-Region Deployment",
-				description:
-					"Deploy actors across multiple geographic regions with automatic failover and data replication.",
-				image: imgLocalFirstSync, // Reuse existing image
-				docs: {
-					actors: true,
-					containers: false,
-					functions: false,
-				},
-			},
-			{
-				id: "fault-tolerance",
-				icon: faCogs,
-				title: "Fault Tolerance",
-				description:
-					"Built-in error handling and recovery with automatic actor restart and state preservation.",
-				image: imgManagedCi, // Reuse existing image
-				docs: {
-					actors: true,
-					containers: false,
-					functions: false,
-				},
-			},
-		],
-	},
-	{
-		id: "ai",
-		title: "AI",
-		items: [
-			{
-				id: "coding-agent",
-				icon: faRobot,
-				title: "Coding Agent",
-				description:
-					"Deploy intelligent coding assistants that help developers write, review, and optimize code.",
-				image: imgCodingAgent,
-				docs: {
-					actors: true,
-					containers: true,
-					functions: true,
-				},
-			},
-			{
-				id: "linear-agent",
-				icon: faLinear,
-				title: "Linear Agent",
-				description:
-					"Deploy intelligent Linear Agent that integrates with customers' Linear workspaces.",
-				image: imgLinearAgent,
-				docs: {
-					actors: true,
-					containers: false,
-					functions: true,
-					guide: "/blog/2025-05-28-building-linear-agents-in-node-js-and-rivet-full-walkthrough-and-starter-kit",
-					sourceCode:
-						"https://github.com/rivet-dev/rivet/tree/main/examples/ai-agent",
-				},
-			},
-			{
-				id: "ai-voice",
-				icon: faPhone,
-				title: "Realtime Voice Agent",
-				description:
-					"Create voice-enabled AI assistants with natural language processing capabilities.",
-				image: imgVoiceAgent,
-				docs: {
-					actors: true,
-				},
-			},
-			{
-				id: "sandboxed-code",
-				icon: faCode,
-				title: "Sandboxed Code Execution",
-				description:
-					"Execute untrusted code securely in isolated environments with resource limitations and security controls.",
-				image: imgSandboxedCode,
-				docs: {
-					containers: true,
-					functions: true,
-				},
-			},
-			{
-				id: "mcp",
-				icon: faServer,
-				title: "MCP Server",
-				description:
-					"Run mission control platform servers for centralized monitoring and management.",
-				image: imgMcpServer,
-				docs: {
-					actors: true,
-					containers: false,
-					functions: false,
-				},
-			},
-		],
-	},
-	{
-		id: "realtime",
-		title: "Realtime",
-		items: [
-			{
-				id: "local-first",
-				icon: faSync,
-				title: "Local-First Sync",
-				description:
-					"Build applications that work offline and seamlessly sync when connection is restored.",
-				image: imgLocalFirstSync,
-				docs: {
-					actors: true,
-					containers: false,
-					functions: false,
-				},
-			},
-			{
-				id: "collaborative",
-				icon: faFileCode,
-				title: "Collaborative Documents",
-				description:
-					"Create realtime collaborative editing experiences like Google Docs or Figma.",
-				image: imgCollaborativeDocuments,
-				docs: {
-					actors: true,
-					containers: false,
-					functions: false,
-				},
-			},
-			{
-				id: "multiplayer",
-				icon: faGamepad,
-				title: "Multiplayer Game Servers",
-				description:
-					"Host low-latency game servers that scale automatically with player demand.",
-				image: imgMultiplayerGameServers,
-				docs: {
-					actors: false,
-					containers: true,
-					functions: false,
-				},
-			},
-			{
-				id: "live-events",
-				icon: faCourtSport,
-				title: "Live Events",
-				description:
-					"Create interactive live events with realtime participation for thousands of concurrent users.",
-				image: imgLiveEvents,
-				docs: {
-					actors: true,
-					containers: false,
-					functions: false,
-				},
-			},
-		],
-	},
-	{
-		id: "infra",
-		title: "Infrastructure",
-		items: [
-			{
-				id: "per-tenant",
-				icon: faDatabase,
-				title: "Per-Tenant Databases",
-				description:
-					"Isolate each customer's data in dedicated database instances for improved security and performance.",
-				image: imgPerTenantDatabase,
-				docs: {
-					actors: true,
-					containers: false,
-					functions: false,
-				},
-			},
-			{
-				id: "ci",
-				icon: faCogs,
-				title: "Managed CI",
-				description:
-					"Automate your build, test, and deployment workflow with managed continuous integration.",
-				image: imgManagedCi,
-				docs: {
-					actors: false,
-					containers: true,
-					functions: true,
-				},
-			},
-			{
-				id: "analytics",
-				icon: faOven,
-				title: "Batch Jobs",
-				description:
-					"Process large datasets in parallel with efficient resource allocation and automatic scaling.",
-				image: imgBatchJobs,
-				docs: {
-					actors: true,
-					containers: false,
-					functions: true,
-				},
-			},
-			{
-				id: "scheduled",
-				icon: faClock,
-				title: "Scheduled Background Tasks",
-				description:
-					"Schedule and run background tasks at specified intervals with reliable execution.",
-				image: imgScheduledTasks,
-				docs: {
-					actors: true,
-					containers: false,
-					functions: false,
-				},
-			},
-			//{
-			//	id: "microservices",
-			//	icon: faNetworkWired,
-			//	title: "Microservices",
-			//	description:
-			//		"TODO",
-			//	imagePath: "/path/to/ci.svg", // Replace with actual SVG path
-			//},
-		],
-	},
-	{
-		id: "data",
-		title: "Data",
-		items: [
-			{
-				id: "etl",
-				icon: faArrowsTurnRight,
-				title: "ETL Pipeline",
-				description:
-					"Build data pipelines that extract, transform, and load data between various sources and destinations.",
-				image: imgEtlPipeline,
-				docs: {
-					actors: true,
-					containers: false,
-					functions: false,
-				},
-			},
-			{
-				id: "stream",
-				icon: faWaveSine,
-				title: "Realtime Stream Processing",
-				description:
-					"Process large volumes of streaming data in realtime with high throughput.",
-				image: imgStreamProcessing,
-				docs: {
-					actors: true,
-					containers: false,
-					functions: true,
-				},
-			},
-		],
-	},
-	{
-		id: "media",
-		title: "Media",
-		items: [
-			{
-				id: "ffmpeg",
-				icon: faImage,
-				title: "FFmpeg Image Conversion",
-				description:
-					"Process and convert images and videos at scale with industry-standard tools.",
-				image: imgFfmpegConversion,
-				docs: {
-					actors: false,
-					containers: true,
-					functions: true,
-				},
-			},
-			{
-				id: "pdf",
-				icon: faFilePdf,
-				title: "PDF Text Extraction",
-				description:
-					"Extract and process text from PDF documents efficiently at scale.",
-				image: imgPdfTextExtraction,
-				docs: {
-					actors: false,
-					containers: true,
-					functions: true,
-				},
-			},
-			//{
-			//	id: "analytics",
-			//	icon: faChartLine,
-			//	title: "Data Analytics Processing",
-			//	description:
-			//		"Analyze large datasets and generate insights with parallel processing.",
-			//	imagePath: "/path/to/analytics.svg", // Replace with actual SVG path
-			//},
-		],
-	},
-];
-
-// Component for documentation links
-const DocLink = ({
-	title,
-	href,
-	external,
-}: { title: string; href: string; external?: boolean }) => (
-	<a
-		href={href}
-		className="text-white/70 hover:text-white text-sm font-medium flex items-center rounded-md bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 px-3 py-1.5 transition-colors"
-		target={external ? "_blank" : undefined}
-	>
-		{title}
-		<span className="ml-1.5 text-white/50">→</span>
-	</a>
-);
-
-export const PowerfulPrimitivesSection = () => {
-	const [activeTab, setActiveTab] = useState<string>(
-		TAB_GROUPS[0].items[0].id,
-	);
-	const [showLeftArrow, setShowLeftArrow] = useState(false);
-	const [showRightArrow, setShowRightArrow] = useState(true);
-
-	const tabsContainerRef = useRef<HTMLDivElement>(null);
-
-	// Create a flat array of all tabs for finding the active tab
-	const allTabs = TAB_GROUPS.flatMap((group) => group.items);
-
-	// Find the active tab data
-	const activeTabData =
-		allTabs.find((tab) => tab.id === activeTab) || allTabs[0];
-
-	// Check scroll position and update arrow visibility
-	const checkScroll = () => {
-		const container = tabsContainerRef.current;
-		if (!container) return;
-
-		setShowLeftArrow(container.scrollLeft > 0);
-		setShowRightArrow(
-			container.scrollLeft <
-				container.scrollWidth - container.clientWidth - 5, // 5px buffer
-		);
-	};
-
-	// Set up scroll event listener
-	useEffect(() => {
-		const container = tabsContainerRef.current;
-		if (container) {
-			container.addEventListener("scroll", checkScroll);
-			// Initial check
-			checkScroll();
-
-			// Check after content/window might have changed
-			const resizeObserver = new ResizeObserver(checkScroll);
-			resizeObserver.observe(container);
-
-			return () => {
-				container.removeEventListener("scroll", checkScroll);
-				resizeObserver.disconnect();
-			};
-		}
-	}, []);
-
-	// Scroll handlers
-	const scrollLeft = () => {
-		const container = tabsContainerRef.current;
-		if (container) {
-			// Calculate one third of the container width for more substantial scroll
-			const scrollAmount = Math.max(350, container.clientWidth / 2);
-			container.scrollBy({ left: -scrollAmount, behavior: "smooth" });
-		}
-	};
-
-	const scrollRight = () => {
-		const container = tabsContainerRef.current;
-		if (container) {
-			// Calculate one third of the container width for more substantial scroll
-			const scrollAmount = Math.max(350, container.clientWidth / 2);
-			container.scrollBy({ left: scrollAmount, behavior: "smooth" });
-		}
-	};
-
-	return (
-		<div className="mx-auto max-w-7xl py-32 lg:py-40">
-			{/* Centered title and subtitle outside the box */}
-			<div className="text-center mb-12">
-				<h2 className="text-4xl font-medium tracking-tight text-white">
-					Powerful primitives to build anything
-				</h2>
-				<p className="mt-4 text-lg text-white/70">
-					Choose the right building blocks for your specific use case
-				</p>
-			</div>
-
-			{/* Box Container - no border */}
-			<div className="bg-background rounded-xl overflow-hidden">
-				<div className="flex flex-col lg:flex-row">
-					{/* Left Column - Tab Buttons - 50% width on desktop */}
-					<div className="w-full lg:w-1/2 p-5">
-						{/* Tab Buttons - 2 column grid layout */}
-						<div className="grid grid-cols-2 gap-5">
-							{/* Map through each tab group */}
-							{TAB_GROUPS.map((group) => (
-								<div key={group.id}>
-									<h4 className="text-white mb-2 text-xs tracking-wider px-3 font-medium">
-										{group.title}
-									</h4>
-									<div className="space-y-1.5">
-										{group.items.map((tab) => (
-											<button
-												key={tab.id}
-												className={`w-full flex items-center justify-start gap-2 px-3.5 py-2.5 rounded-md transition-all text-xs ${
-													activeTab === tab.id
-														? "bg-zinc-900 text-white border border-zinc-500 shadow-inner shadow-zinc-800"
-														: "text-white/50 hover:text-white hover:bg-zinc-800/60 border border-transparent hover:border-zinc-700/50"
-												}`}
-												onClick={() =>
-													setActiveTab(tab.id)
-												}
-											>
-												<Icon
-													icon={tab.icon}
-													className="text-sm"
-												/>
-												<span>{tab.title}</span>
-											</button>
-										))}
-									</div>
-								</div>
-							))}
-						</div>
-					</div>
-
-					{/* Right Column - Details Content - 50% width on desktop */}
-					<div className="w-full lg:w-1/2 p-5">
-						{/* Card Layout */}
-						<div className="bg-zinc-900 rounded-xl overflow-hidden border border-zinc-800">
-							{/* Title and Diagram Section - Same Background */}
-							<div className="bg-[#020202]">
-								{/* Title and Description */}
-								<div className="p-5">
-									<h3 className="text-xl font-medium text-white mb-3">
-										{activeTabData.title}
-									</h3>
-									<p className="text-white/80">
-										{activeTabData.description}
-									</p>
-								</div>
-
-								{/* Image */}
-								<div className="p-10 flex items-center justify-center min-h-[250px]">
-									<img src={activeTabData.image}
-										alt={activeTabData.title}
-										className="max-w-full max-h-[300px]"
-										width={
-											activeTabData.image.width
-												? activeTabData.image.width / 2
-												: undefined
-										}
-										height={
-											activeTabData.image.height
-												? activeTabData.image.height / 2
-												: undefined
-										}
-									/>
-								</div>
-							</div>
-
-							{/* Links Section */}
-							{activeTabData.docs && (
-								<div className="p-4">
-									<div className="text-sm font-medium text-white/90 mb-2">
-										Documentation
-									</div>
-									<div className="flex gap-3 flex-wrap">
-										{activeTabData.docs.actors && (
-											<DocLink
-												title="Actors"
-												href="/docs/actors"
-											/>
-										)}
-										{activeTabData.docs.guide && (
-											<DocLink
-												title="Guide"
-												href={activeTabData.docs.guide}
-											/>
-										)}
-										{activeTabData.docs.sourceCode && (
-											<DocLink
-												title="Source Code"
-												href={
-													activeTabData.docs
-														.sourceCode
-												}
-												external={true}
-											/>
-										)}
-									</div>
-								</div>
-							)}
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-};
diff --git a/website/src/components/marketing/cloud/RivetCloudSection.tsx b/website/src/components/marketing/cloud/RivetCloudSection.tsx
deleted file mode 100644
index 9a5f6c99e1..0000000000
--- a/website/src/components/marketing/cloud/RivetCloudSection.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-"use client";
-
-import {
-	Icon,
-	faArrowRight,
-	faCloud,
-	faGithub,
-	faServer,
-} from "@rivet-gg/icons";
-
-interface DeploymentOption {
-	icon: any;
-	title: string;
-	description: string;
-	subdescription?: string;
-	buttonText: string;
-	buttonHref: string;
-}
-
-export const RivetCloudSection = () => {
-	const deploymentOptions: DeploymentOption[] = [
-		{
-			icon: faCloud,
-			title: "Rivet Cloud",
-			description:
-				"Enterprise-scale actor orchestration built on FoundationDB. Connect your applications on Railway, Vercel, and other platforms with infinite scaling.",
-			buttonText: "See Pricing",
-			buttonHref: "/pricing",
-		},
-		{
-			icon: faServer,
-			title: "Bring Your Own Cloud",
-			description:
-				"Deploy the Rivet Engine on your preferred cloud infrastructure with FoundationDB backend. Maintain full control while leveraging enterprise-scale actor orchestration.",
-			buttonText: "Contact Us",
-			buttonHref: "/sales",
-		},
-		{
-			icon: faGithub,
-			title: "Self-Hosted",
-			description:
-				"Run the open-source Rivet Engine on your own infrastructure with PostgreSQL or FoundationDB. Complete control over your actor orchestration platform.",
-			buttonText: "View on GitHub",
-			buttonHref: "https://github.com/rivet-dev/rivet",
-		},
-	];
-
-	return (
-		<div className="mx-auto max-w-7xl px-6 py-32 lg:py-40">
-			<div className="text-center mb-12">
-				<h2 className="text-4xl font-medium tracking-tight text-white">
-					Scale Your Rivet Engine Anywhere
-				</h2>
-				<p className="mt-4 text-lg text-white/70">
-					Enterprise-scale actor orchestration with FoundationDB, connecting to your applications on any platform
-				</p>
-			</div>
-
-			<div className="overflow-hidden rounded-lg border border-zinc-700">
-				<div className="grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x divide-zinc-700">
-					{deploymentOptions.map((option, index) => (
-						<div
-							key={index}
-							className="bg-white/2 px-10 py-8 md:p-12 flex flex-col"
-						>
-							<div className="flex-1">
-								<div className="mb-5">
-									<Icon
-										icon={option.icon}
-										className="text-2xl text-white/90"
-									/>
-								</div>
-
-								<h3 className="text-xl font-medium text-white mb-4">
-									{option.title}
-								</h3>
-
-								<p className="text-white/60">
-									{option.description}
-								</p>
-
-								{option.subdescription && (
-									<p className="text-white/40 mt-2">
-										{option.subdescription}
-									</p>
-								)}
-							</div>
-
-							<div className="h-6" />
-
-							<div className="mt-auto">
-								<a href={option.buttonHref}
-									className="text-white inline-flex items-center group hover:text-white/80 transition-colors"
-								>
-									<span className="font-medium">
-										{option.buttonText}
-									</span>
-									<Icon
-										icon={faArrowRight}
-										className="ml-2 text-xs group-hover:translate-x-0.5 transition-transform"
-									/>
-								</a>
-							</div>
-						</div>
-					))}
-				</div>
-			</div>
-		</div>
-	);
-};
diff --git a/website/src/components/marketing/cloud/ServerlessLimitationsSection.tsx b/website/src/components/marketing/cloud/ServerlessLimitationsSection.tsx
deleted file mode 100644
index 4065ab9c02..0000000000
--- a/website/src/components/marketing/cloud/ServerlessLimitationsSection.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-"use client";
-
-import {
-	faClock,
-	faCode,
-	faGears,
-	faGlobe,
-	faNetworkWired,
-	faRocketLaunch,
-	faTag,
-	faTerminal,
-} from "@rivet-gg/icons";
-import { Feature } from "./components/Feature";
-
-export interface FeatureItem {
-	icon: any;
-	title?: string;
-	name?: string;
-	description: string;
-}
-
-export const ServerlessLimitationsSection = () => {
-	const features: FeatureItem[] = [
-		{
-			icon: faClock,
-			title: "Unlimited Execution Time",
-			description:
-				"No arbitrary timeout limits for your long-running processes",
-		},
-		{
-			icon: faRocketLaunch,
-			title: "No Cold Starts",
-			description: "Instant availability without delay",
-		},
-		{
-			icon: faCode,
-			title: "Docker Compatibility",
-			description:
-				"Works with anything that runs in Docker - no proprietary runtimes",
-		},
-		{
-			icon: faTerminal,
-			title: "Local Development",
-			description:
-				"Run a full Rivet instance with one command or in Docker Compose",
-		},
-		{
-			icon: faNetworkWired,
-			title: "Supports Any Protocol",
-			description: "HTTP, WebSocket, TCP, and UDP support built-in",
-		},
-		{
-			icon: faGlobe,
-			title: "Control Where Code Runs",
-			description:
-				"Deploy near users or data centers for optimal performance",
-		},
-		{
-			icon: faGears,
-			title: "Customizable Rollouts",
-			description:
-				"Control exactly how and when your services are updated",
-		},
-		{
-			icon: faTag,
-			title: "Tagged Resources",
-			description:
-				"Organize and manage resources with powerful tagging system",
-		},
-	];
-
-	return (
-		<div className="mx-auto max-w-7xl py-32 lg:py-40">
-			<div className="text-center mb-12">
-				<h2 className="text-4xl font-medium tracking-tight text-white">
-					Rivet without limitations
-				</h2>
-				<p className="mt-4 text-lg text-white/70">
-					All the benefits of Rivet on a managed cloud with custom features
-				</p>
-			</div>
-
-			<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
-				{features.map((feature, index) => (
-					<Feature key={index} feature={feature} />
-				))}
-			</div>
-		</div>
-	);
-};
diff --git a/website/src/components/marketing/cloud/TutorialsSection.tsx b/website/src/components/marketing/cloud/TutorialsSection.tsx
deleted file mode 100644
index 33b03d497b..0000000000
--- a/website/src/components/marketing/cloud/TutorialsSection.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import {
-	Icon,
-	faArrowRight,
-	faCode,
-	faCodeMerge,
-	faFilePen,
-	faGamepad,
-	faRobot,
-	faWaveSine,
-} from "@rivet-gg/icons";
-
-// TODO: update to this
-//
-// - Deploy stateful AI agent with Vercel AI
-// - Local-first sync OR CRDT with yjs
-// - Run untrusted user code on demand
-// - Collaborative document
-// - Stateful stream processing
-// - Multiplayer game servers
-
-// Tutorials section
-export const TutorialsSection = () => {
-	const tutorials = [
-		{
-			title: "Orchestrate stateful agent with AI SDK",
-			description:
-				"Build intelligent agents that maintain conversation context & tool calls",
-			icons: [faRobot],
-			href: "/docs/tutorials/stateful-ai-agent",
-			useCases: [
-				"AI assistants",
-				"Chat applications",
-				"Customer support",
-			],
-		},
-		{
-			title: "Local-first sync with yjs",
-			description:
-				"Create collaborative apps with real-time synchronization",
-			icons: [faCodeMerge],
-			href: "/docs/tutorials/local-first-sync",
-			useCases: [
-				"Collaborative editing",
-				"Offline-first apps",
-				"Real-time sync",
-			],
-		},
-		{
-			title: "Run code in a secure sandbox",
-			description:
-				"Execute user or LLM-generated code safely with isolation",
-			icons: [faCode],
-			href: "/docs/tutorials/sandbox-code-execution",
-			useCases: [
-				"LLM code execution",
-				"User code execution",
-				"Code playgrounds",
-			],
-		},
-		{
-			title: "Collaborative document",
-			description: "Build multi-user document editing capabilities",
-			icons: [faFilePen],
-			href: "/docs/tutorials/collaborative-document",
-			useCases: [
-				"Team editing",
-				"Shared workspaces",
-				"Real-time collaboration",
-			],
-		},
-		{
-			title: "Stateful stream processing",
-			description:
-				"Process and transform data streams with persistent state",
-			icons: [faWaveSine],
-			href: "/docs/tutorials/stateful-stream",
-			useCases: [
-				"Event processing",
-				"Data pipelines",
-				"Real-time analytics",
-			],
-		},
-		{
-			title: "Multiplayer game servers",
-			description: "Deploy game servers that scale with your player base",
-			icons: [faGamepad],
-			href: "/docs/tutorials/multiplayer-game",
-			useCases: [
-				"Real-time games",
-				"Match hosting",
-				"Game infrastructure",
-			],
-		},
-	];
-
-	return (
-		<div className="mx-auto max-w-7xl px-6 py-28 lg:py-44 lg:px-8 mt-16">
-			<div className="text-center mb-12">
-				<h2 className="text-3xl font-bold tracking-tight text-white">
-					Start building in seconds
-				</h2>
-				<p className="mt-4 text-lg text-white/70">
-					Follow our step-by-step tutorials to deploy your first
-					project quickly
-				</p>
-			</div>
-			<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-				{tutorials.map((tutorial, index) => (
-					<a key={index} href={tutorial.href} className="group">
-						<div className="rounded-xl h-[280px] bg-[#121212] group-hover:bg-zinc-800/90 border border-white/5 group-hover:border-white/20 shadow-sm transition-all duration-200 flex flex-col overflow-hidden">
-							{/* Top section with icons */}
-							<div className="bg-black/40 p-4 flex items-center justify-center h-[120px] w-full">
-								<div className="flex space-x-4">
-									{tutorial.icons.map((icon, iconIndex) => (
-										<div
-											key={iconIndex}
-											className="flex items-center justify-center w-14 h-14"
-										>
-											<Icon
-												icon={icon}
-												className="text-4xl text-white/50 group-hover:text-white transition-colors duration-200"
-											/>
-										</div>
-									))}
-								</div>
-							</div>
-
-							{/* Bottom section with content */}
-							<div className="p-5 flex flex-col flex-1">
-								<h3 className="text-xl font-semibold text-white mb-2">
-									{tutorial.title}
-								</h3>
-								<p className="text-white/60 text-sm">
-									{tutorial.description}
-								</p>
-
-								<div className="flex items-center mt-auto pt-3 text-white opacity-0 group-hover:opacity-100 transition-opacity">
-									<span className="text-sm font-medium">
-										View tutorial
-									</span>
-									<Icon
-										icon={faArrowRight}
-										className="ml-2 text-xs group-hover:translate-x-0.5 transition-all"
-									/>
-								</div>
-							</div>
-						</div>
-					</a>
-				))}
-			</div>
-		</div>
-	);
-};
diff --git a/website/src/components/marketing/cloud/components/Feature.tsx b/website/src/components/marketing/cloud/components/Feature.tsx
deleted file mode 100644
index 7772806b1f..0000000000
--- a/website/src/components/marketing/cloud/components/Feature.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-"use client";
-
-import { Icon } from "@rivet-gg/icons";
-import type { FeatureItem } from "../ServerlessLimitationsSection";
-
-interface FeatureProps {
-	feature: FeatureItem;
-}
-
-export function Feature({ feature }: FeatureProps) {
-	const title = feature.title || feature.name;
-
-	return (
-		<div className="p-5 text-md">
-			<div className="flex items-center gap-3 mb-3 text-white/90">
-				<Icon icon={feature.icon} />
-				<span className="font-medium text-white">{title}</span>
-			</div>
-			<p className="text-white/60">{feature.description}</p>
-		</div>
-	);
-}
-
-interface FeatureGridProps {
-	features: FeatureItem[];
-	className?: string;
-}
-
-export function FeatureGrid({ features, className }: FeatureGridProps) {
-	return (
-		<div className={className}>
-			{features.map((feature, index) => (
-				<Feature key={index} feature={feature} />
-			))}
-		</div>
-	);
-}
diff --git a/website/src/components/marketing/compare/ComparePage.tsx b/website/src/components/marketing/compare/ComparePage.tsx
index 60f39bd3b7..bae820b451 100644
--- a/website/src/components/marketing/compare/ComparePage.tsx
+++ b/website/src/components/marketing/compare/ComparePage.tsx
@@ -1,8 +1,17 @@
 import { Icon, faArrowRight, faRivet, faServer } from '@rivet-gg/icons';
+import type { ReactNode } from 'react';
 import { FaqList } from '@/components/faq/FaqSection';
 import { formatTimestamp } from '@/lib/formatDate';
 import { compareEntries, getCompareEntry } from '@/data/compare';
 import type { CompareEntry } from '@/data/compare/types';
+import { CatalogCard } from '@/components/marketing/editorial/CatalogCard';
+import { Spirograph } from '@/components/marketing/art/Spirograph';
+import {
+	CAPTION_CLASS,
+	HERO_H1_CLASS,
+	SECTION_H2_CLASS,
+	SUBTITLE_CLASS,
+} from '@/components/marketing/typography';
 import { ComparisonTable } from './ComparisonTable';
 
 // This component is server-rendered by Astro with no client directive, so it
@@ -12,98 +21,169 @@ interface ComparePageProps {
 	slug: string;
 }
 
+// Warm oil-paint texture behind the closing band, mirroring the sitewide CTA
+// colophon. The veil keeps text readable even if the image fails to load.
+const FOOTER_PAINTING_SRC =
+	'https://assets.rivet.dev/website/images/textures/footer-abstract.webp';
+
+function SectionHeading({
+	title,
+	subtitle,
+	center = false,
+}: {
+	title: string;
+	subtitle?: string;
+	center?: boolean;
+}) {
+	return (
+		<div className={center ? 'mx-auto max-w-2xl text-center' : 'max-w-2xl'}>
+			<h2 className={SECTION_H2_CLASS}>{title}</h2>
+			{subtitle && <p className={SUBTITLE_CLASS}>{subtitle}</p>}
+		</div>
+	);
+}
+
 function HeroSection({ entry }: { entry: CompareEntry }) {
 	return (
-		<section className="relative flex min-h-[60vh] flex-col justify-center px-6 pt-32 pb-24">
+		<section className="px-6 pb-24 pt-32 md:pb-28 md:pt-44">
 			<div className="mx-auto w-full max-w-7xl">
 				<div className="max-w-3xl">
-					<h1 className="mb-6 text-4xl font-normal leading-[1.1] tracking-tight text-white md:text-6xl">
+					<h1 className={HERO_H1_CLASS}>
 						{entry.rivetProductName} vs <br />
 						{entry.competitorName}
 					</h1>
-					<p className="text-base leading-relaxed text-zinc-500 md:text-lg">
-						{entry.heroSubtitle}
-					</p>
-					<p className="mt-4 text-sm text-zinc-600">
-						Last updated {formatTimestamp(entry.lastUpdated)}
-					</p>
-					<div className="mt-8 flex flex-col gap-3 sm:flex-row">
+					<p className="mt-7 max-w-2xl text-lg leading-8 text-ink-soft">{entry.heroSubtitle}</p>
+					<div className="mt-10 flex flex-col gap-3 sm:flex-row sm:items-center">
 						<a
 							href="/docs/actors/quickstart/backend"
-							className="selection-dark inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-white px-4 py-2 text-sm font-medium text-black transition-colors hover:bg-zinc-200"
+							className="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-accent-deep px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent"
 						>
 							Get Started with {entry.rivetProductName}
 							<Icon icon={faArrowRight} />
 						</a>
+						<a
+							href="/talk-to-an-engineer"
+							className="inline-flex items-center justify-center whitespace-nowrap rounded-md border border-ink/20 px-4 py-2 text-sm text-ink-soft transition-colors hover:border-ink/40 hover:text-ink"
+						>
+							Talk to an engineer
+						</a>
 					</div>
+					<p className={`mt-8 ${CAPTION_CLASS}`}>
+						Last updated {formatTimestamp(entry.lastUpdated)}
+					</p>
 				</div>
 			</div>
 		</section>
 	);
 }
 
-function OverviewSection({ entry }: { entry: CompareEntry }) {
+function ChoiceList({
+	heading,
+	choices,
+	headingTone = 'faint',
+}: {
+	heading: string;
+	choices: CompareEntry['whenToChooseRivet'];
+	headingTone?: 'pine' | 'faint';
+}) {
 	return (
-		<section className="border-t border-white/10 py-24">
-			<div className="mx-auto max-w-7xl px-6">
-				<div className="mb-12">
-					<h2 className="mb-2 text-2xl font-normal tracking-tight text-white md:text-4xl">
-						Overview
-					</h2>
-					<p className="max-w-xl text-base leading-relaxed text-zinc-500">
-						Compare the two approaches and decide which is right for your project.
-					</p>
-				</div>
+		<div>
+			<div
+				className={`font-mono text-[11px] font-medium uppercase tracking-[0.16em] ${
+					headingTone === 'pine' ? 'text-pine' : 'text-ink-faint'
+				}`}
+			>
+				{heading}
+			</div>
+			<div className="mt-5 space-y-5">
+				{choices.map((choice) => (
+					<div key={choice.title}>
+						<div className="text-[15px] font-medium text-ink">{choice.title}</div>
+						<div className="mt-1 text-sm leading-relaxed text-ink-soft">{choice.description}</div>
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}
 
-				<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
-					<div className="flex flex-col border-t border-white/10 pt-6">
-						<div className="mb-3 text-zinc-500">
-							<Icon icon={faRivet} className="h-4 w-4" />
-						</div>
-						<h3 className="mb-2 text-base font-normal text-white">{entry.rivetProductName}</h3>
-						<p className="mb-6 text-sm leading-relaxed text-zinc-500">{entry.rivetSummary}</p>
+// Catalog-card treatment for the two overview plates. The Rivet plate is
+// highlighted with a pine frame, so this stays local markup rather than the
+// shared CatalogCard, whose hairline border is fixed.
+function OverviewPanel({
+	icon,
+	name,
+	summary,
+	children,
+	highlight = false,
+}: {
+	icon: ReactNode;
+	name: string;
+	summary: string;
+	children: ReactNode;
+	highlight?: boolean;
+}) {
+	return (
+		<div
+			className={`flex flex-col border bg-white/55 p-8 ${
+				highlight ? 'border-pine/60' : 'border-ink/10'
+			}`}
+		>
+			<div className="flex items-center gap-3">
+				<span className={highlight ? 'text-pine' : 'text-olive'}>{icon}</span>
+				<h3 className="text-lg font-medium tracking-[-0.01em] text-ink">{name}</h3>
+			</div>
+			<p className="mt-4 text-sm leading-relaxed text-ink-soft">{summary}</p>
+			<div className="my-7 h-px bg-ink/10" />
+			{children}
+		</div>
+	);
+}
 
-						<h4 className="text-sm font-medium uppercase tracking-wider text-zinc-500 mb-4">
-							When to choose {entry.rivetProductName}
-						</h4>
-						<div className="mb-6 space-y-4">
-							{entry.whenToChooseRivet.map((choice) => (
-								<div key={choice.title}>
-									<div className="text-sm text-white">{choice.title}</div>
-									<div className="text-sm text-zinc-500">{choice.description}</div>
-								</div>
-							))}
-						</div>
-						<div className="mt-auto">
+function OverviewSection({ entry }: { entry: CompareEntry }) {
+	return (
+		<section className="border-t border-ink/10 px-6 py-16 md:py-32">
+			<div className="mx-auto max-w-7xl">
+				<SectionHeading
+					title="Two approaches, side by side"
+					subtitle="What each platform is, and the situations where it is the right choice."
+				/>
+				<div className="mt-14 grid grid-cols-1 gap-6 lg:grid-cols-2">
+					<OverviewPanel
+						icon={<Icon icon={faRivet} className="h-4 w-4" />}
+						name={entry.rivetProductName}
+						summary={entry.rivetSummary}
+						highlight
+					>
+						<ChoiceList
+							heading={`When to choose ${entry.rivetProductName}`}
+							choices={entry.whenToChooseRivet}
+							headingTone="pine"
+						/>
+						<div className="mt-8">
 							<a
 								href="/docs/actors/quickstart/backend"
-								className="selection-dark inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-white px-4 py-2 text-sm font-medium text-black transition-colors hover:bg-zinc-200"
+								className="group inline-flex items-center gap-2 text-sm font-medium text-pine hover:text-ink"
 							>
 								Get started with {entry.rivetProductName}
-								<Icon icon={faArrowRight} />
+								<Icon
+									icon={faArrowRight}
+									className="transition-transform group-hover:translate-x-0.5"
+								/>
 							</a>
 						</div>
-					</div>
-
-					<div className="flex flex-col border-t border-white/10 pt-6">
-						<div className="mb-3 text-zinc-500">
-							<Icon icon={entry.competitorIcon ?? faServer} className="h-4 w-4" />
-						</div>
-						<h3 className="mb-2 text-base font-normal text-white">{entry.competitorName}</h3>
-						<p className="mb-6 text-sm leading-relaxed text-zinc-500">{entry.competitorSummary}</p>
+					</OverviewPanel>
 
-						<h4 className="text-sm font-medium uppercase tracking-wider text-zinc-500 mb-4">
-							When to choose {entry.competitorName}
-						</h4>
-						<div className="space-y-4">
-							{entry.whenToChooseCompetitor.map((choice) => (
-								<div key={choice.title}>
-									<div className="text-sm text-white">{choice.title}</div>
-									<div className="text-sm text-zinc-500">{choice.description}</div>
-								</div>
-							))}
-						</div>
-					</div>
+					<OverviewPanel
+						icon={<Icon icon={entry.competitorIcon ?? faServer} className="h-4 w-4" />}
+						name={entry.competitorName}
+						summary={entry.competitorSummary}
+					>
+						<ChoiceList
+							heading={`When to choose ${entry.competitorName}`}
+							choices={entry.whenToChooseCompetitor}
+						/>
+					</OverviewPanel>
 				</div>
 			</div>
 		</section>
@@ -112,22 +192,20 @@ function OverviewSection({ entry }: { entry: CompareEntry }) {
 
 function ComparisonSection({ entry }: { entry: CompareEntry }) {
 	return (
-		<section className="border-t border-white/10 py-24">
-			<div className="mx-auto max-w-7xl px-6">
-				<div className="mb-12">
-					<h2 className="mb-2 text-2xl font-normal tracking-tight text-white md:text-4xl">
-						Feature Comparison
-					</h2>
-					<p className="max-w-xl text-base leading-relaxed text-zinc-500">
-						A detailed breakdown of capabilities across both platforms.
-					</p>
-				</div>
-				<ComparisonTable
-					featureGroups={entry.featureGroups}
-					competitorName={entry.competitorName}
-					competitorIcon={entry.competitorIcon}
-					rivetProductName={entry.rivetProductName}
+		<section className="border-t border-ink/10 px-6 py-16 md:py-32">
+			<div className="mx-auto max-w-7xl">
+				<SectionHeading
+					title="Feature comparison"
+					subtitle="A detailed breakdown of capabilities across both platforms."
 				/>
+				<div className="mt-14">
+					<ComparisonTable
+						featureGroups={entry.featureGroups}
+						competitorName={entry.competitorName}
+						competitorIcon={entry.competitorIcon}
+						rivetProductName={entry.rivetProductName}
+					/>
+				</div>
 			</div>
 		</section>
 	);
@@ -135,19 +213,23 @@ function ComparisonSection({ entry }: { entry: CompareEntry }) {
 
 function VerdictSection({ entry }: { entry: CompareEntry }) {
 	return (
-		<section className="border-t border-white/10 py-24 text-center">
-			<div className="mx-auto max-w-3xl px-6">
-				<h2 className="mb-3 text-2xl font-normal tracking-tight text-white md:text-4xl">
-					Verdict
-				</h2>
-				{entry.verdict.map((paragraph) => (
-					<p
-						key={paragraph}
-						className="mb-4 text-base leading-relaxed text-zinc-500 last:mb-0"
-					>
-						{paragraph}
-					</p>
-				))}
+		<section className="border-t border-ink/10 px-6 py-16 md:py-32">
+			<div className="mx-auto max-w-2xl text-center">
+				<SectionHeading title="Which should you pick?" center />
+				<div className="mt-8 space-y-5">
+					{entry.verdict.map((paragraph, index) => (
+						<p
+							key={paragraph}
+							className={
+								index === 0
+									? 'text-lg leading-8 text-ink'
+									: 'text-base leading-relaxed text-ink-soft'
+							}
+						>
+							{paragraph}
+						</p>
+					))}
+				</div>
 			</div>
 		</section>
 	);
@@ -155,16 +237,14 @@ function VerdictSection({ entry }: { entry: CompareEntry }) {
 
 function MigrationSection({ migration }: { migration: NonNullable<CompareEntry['migration']> }) {
 	return (
-		<section className="border-t border-white/10 py-24 text-center">
-			<div className="mx-auto max-w-3xl px-6">
-				<h2 className="mb-3 text-2xl font-normal tracking-tight text-white md:text-4xl">
-					{migration.heading}
-				</h2>
-				<p className="mb-6 text-base leading-relaxed text-zinc-500">{migration.body}</p>
-				<div>
+		<section className="border-t border-ink/10 px-6 py-16 md:py-32">
+			<div className="mx-auto max-w-2xl text-center">
+				<SectionHeading title={migration.heading} center />
+				<p className="mt-8 text-base leading-relaxed text-ink-soft">{migration.body}</p>
+				<div className="mt-8">
 					<a
 						href="/talk-to-an-engineer"
-						className="inline-flex items-center justify-center whitespace-nowrap rounded-md border border-white/10 px-4 py-2 text-sm text-zinc-300 transition-colors hover:border-white/20 hover:text-white"
+						className="inline-flex items-center justify-center whitespace-nowrap rounded-md border border-ink/20 px-4 py-2 text-sm text-ink-soft transition-colors hover:border-ink/40 hover:text-ink"
 					>
 						Talk to an engineer
 					</a>
@@ -174,14 +254,14 @@ function MigrationSection({ migration }: { migration: NonNullable<CompareEntry['
 	);
 }
 
-function FaqSectionDark({ entry }: { entry: CompareEntry }) {
+function FaqSectionLight({ entry }: { entry: CompareEntry }) {
 	return (
-		<section className="border-t border-white/10 py-24">
-			<div className="mx-auto max-w-3xl px-6">
-				<h2 className="mb-12 text-center text-2xl font-normal tracking-tight text-white md:text-4xl">
-					Frequently asked questions
-				</h2>
-				<FaqList items={entry.faq} theme="dark" />
+		<section className="border-t border-ink/10 px-6 py-16 md:py-32">
+			<div className="mx-auto max-w-3xl">
+				<SectionHeading title="Frequently asked questions" />
+				<div className="mt-10">
+					<FaqList items={entry.faq} theme="light" />
+				</div>
 			</div>
 		</section>
 	);
@@ -194,25 +274,19 @@ function OtherComparisonsSection({ entry }: { entry: CompareEntry }) {
 	}
 
 	return (
-		<section className="border-t border-white/10 py-24">
-			<div className="mx-auto max-w-7xl px-6">
-				<h2 className="mb-8 text-2xl font-normal tracking-tight text-white md:text-4xl">
-					Other comparisons
-				</h2>
-				<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+		<section className="border-t border-ink/10 px-6 py-16 md:py-32">
+			<div className="mx-auto max-w-7xl">
+				<SectionHeading title="Other comparisons" />
+				<div className="mt-12 grid grid-cols-1 gap-6 md:grid-cols-2">
 					{others.map((other) => (
-						<a
+						<CatalogCard
 							key={other.slug}
 							href={`/compare/${other.slug}/`}
-							className="group flex flex-col rounded-lg border border-white/10 p-6 transition-colors hover:border-white/20 hover:bg-white/5"
+							title={other.title}
+							linkLabel="Read the comparison"
 						>
-							<h3 className="mb-2 text-base font-normal text-white">{other.title}</h3>
-							<p className="text-sm leading-relaxed text-zinc-500">{other.description}</p>
-							<span className="mt-4 inline-flex items-center gap-2 text-sm text-zinc-300 transition-colors group-hover:text-white">
-								Read the comparison
-								<Icon icon={faArrowRight} />
-							</span>
-						</a>
+							<p className="mt-2 text-sm leading-relaxed text-ink-soft">{other.description}</p>
+						</CatalogCard>
 					))}
 				</div>
 			</div>
@@ -222,27 +296,55 @@ function OtherComparisonsSection({ entry }: { entry: CompareEntry }) {
 
 function CTASection() {
 	return (
-		<section className="border-t border-white/10 px-6 py-48 text-center">
-			<div className="mx-auto max-w-3xl">
-				<h2 className="mb-6 text-2xl font-normal tracking-tight text-white md:text-4xl">
-					The primitive for stateful workloads.
-				</h2>
-				<p className="mb-8 text-base leading-relaxed text-zinc-500">
-					The next generation of software needs a new kind of backend. This is it.
-				</p>
-				<div className="flex flex-col items-center justify-center gap-3 sm:flex-row">
-					<a
-						href="/docs"
-						className="selection-dark inline-flex items-center justify-center whitespace-nowrap rounded-md bg-white px-4 py-2 text-sm font-medium text-black transition-colors hover:bg-zinc-200"
-					>
-						Start Building
-					</a>
-					<a
-						href="/talk-to-an-engineer"
-						className="inline-flex items-center justify-center whitespace-nowrap rounded-md border border-white/10 px-4 py-2 text-sm text-zinc-300 transition-colors hover:border-white/20 hover:text-white"
-					>
-						Talk to an Engineer
-					</a>
+		<section className="selection-paper bg-paper px-4 py-14 text-center text-cream md:px-6 md:py-24">
+			<div className="relative mx-auto flex min-h-[26rem] max-w-screen-2xl items-center justify-center overflow-hidden px-6 py-20 md:min-h-[34rem] md:px-10 lg:aspect-[2563/1440] lg:min-h-0">
+				<img
+					aria-hidden="true"
+					src={FOOTER_PAINTING_SRC}
+					alt=""
+					loading="lazy"
+					decoding="async"
+					className="absolute inset-0 h-full w-full object-contain object-center"
+				/>
+				<div
+					aria-hidden="true"
+					className="absolute inset-0"
+					style={{
+						background:
+							'linear-gradient(180deg, rgba(20,19,16,0.66), rgba(20,19,16,0.5) 50%, rgba(20,19,16,0.72))',
+					}}
+				/>
+				<div className="relative mx-auto max-w-3xl">
+					<div className="mb-8 flex justify-center" aria-hidden="true">
+						<Spirograph
+							variant="moire"
+							size={56}
+							stroke="#93A286"
+							strokeWidth={2.6}
+							strokeOpacity={0.7}
+							copies={12}
+						/>
+					</div>
+					<h2 className="text-3xl font-medium tracking-[-0.015em] text-cream md:text-5xl">
+						The primitive for stateful workloads.
+					</h2>
+					<p className="mt-6 text-base leading-relaxed text-cream/65">
+						The next generation of software needs a new kind of backend. This is it.
+					</p>
+					<div className="mt-10 flex flex-col items-center justify-center gap-3 sm:flex-row">
+						<a
+							href="/docs"
+							className="inline-flex items-center justify-center whitespace-nowrap rounded-md bg-cream px-4 py-2 text-sm font-medium text-ink transition-colors hover:bg-white"
+						>
+							Start Building
+						</a>
+						<a
+							href="/talk-to-an-engineer"
+							className="inline-flex items-center justify-center whitespace-nowrap rounded-md border border-cream/30 px-4 py-2 text-sm text-cream transition-colors hover:border-cream/60"
+						>
+							Talk to an Engineer
+						</a>
+					</div>
 				</div>
 			</div>
 		</section>
@@ -256,14 +358,14 @@ export function ComparePage({ slug }: ComparePageProps) {
 	}
 
 	return (
-		<div className="min-h-screen bg-black font-sans text-zinc-300 selection:bg-[#FF4500]/30 selection:text-orange-200">
+		<div className="paper-grain min-h-screen font-sans text-ink-soft">
 			<main>
 				<HeroSection entry={entry} />
 				<OverviewSection entry={entry} />
 				<ComparisonSection entry={entry} />
 				<VerdictSection entry={entry} />
 				{entry.migration && <MigrationSection migration={entry.migration} />}
-				<FaqSectionDark entry={entry} />
+				<FaqSectionLight entry={entry} />
 				<OtherComparisonsSection entry={entry} />
 				<CTASection />
 			</main>
diff --git a/website/src/components/marketing/compare/ComparisonTable.tsx b/website/src/components/marketing/compare/ComparisonTable.tsx
index 1a1d0d1a97..0410a192ce 100644
--- a/website/src/components/marketing/compare/ComparisonTable.tsx
+++ b/website/src/components/marketing/compare/ComparisonTable.tsx
@@ -18,26 +18,28 @@ export function ComparisonTable({
 	rivetProductName,
 }: ComparisonTableProps) {
 	return (
-		<div className="overflow-x-auto border-t border-white/10">
-			<table className="w-full border-collapse [&_a]:underline [&_a]:text-white [&_a]:hover:text-zinc-300">
+		<div className="overflow-x-auto">
+			<table className="w-full min-w-[760px] border-collapse [&_a]:text-pine [&_a]:underline [&_a]:decoration-pine/40 [&_a]:underline-offset-2 [&_a:hover]:text-ink">
 				<thead>
-					<tr className="border-b border-white/10">
-						<th className="py-3 px-4 text-left text-xs font-medium uppercase tracking-wider text-zinc-500">
+					<tr className="border-b border-ink/15">
+						<th className="w-[18%] py-4 pl-0 pr-4 text-left font-mono text-[11px] font-medium uppercase tracking-[0.16em] text-ink-faint">
 							Feature
 						</th>
-						<th className="py-3 px-4 text-left text-xs font-medium">
-							<div className="flex items-center gap-2">
-								<Icon icon={faRivet} className="text-zinc-500" />
-								<span className="text-white">{rivetProductName}</span>
+						<th className="w-[28%] px-4 py-4 text-left">
+							<div className="flex items-center gap-2 text-sm font-medium text-pine">
+								<Icon icon={faRivet} className="h-3.5 w-3.5" />
+								{rivetProductName}
 							</div>
 						</th>
-						<th className="py-3 px-4 text-left text-xs font-medium">
-							<div className="flex items-center gap-2">
-								{competitorIcon && <Icon icon={competitorIcon} className="text-zinc-500" />}
-								<span className="text-zinc-500">{competitorName}</span>
+						<th className="w-[28%] px-4 py-4 text-left">
+							<div className="flex items-center gap-2 text-sm font-medium text-ink">
+								{competitorIcon && (
+									<Icon icon={competitorIcon} className="h-3.5 w-3.5 text-olive" />
+								)}
+								{competitorName}
 							</div>
 						</th>
-						<th className="py-3 px-4 text-left text-xs font-medium uppercase tracking-wider text-zinc-500">
+						<th className="w-[26%] py-4 pl-4 pr-0 text-left font-mono text-[11px] font-medium uppercase tracking-[0.16em] text-ink-faint">
 							Why it matters
 						</th>
 					</tr>
@@ -45,27 +47,31 @@ export function ComparisonTable({
 				<tbody>
 					{featureGroups.map((group) => (
 						<React.Fragment key={group.title}>
-							<tr className="bg-zinc-900/50 border-b border-white/10">
-								<td colSpan={4} className="py-2 px-4 text-sm font-medium text-white">
+							<tr className="border-b border-ink/10">
+								<td
+									colSpan={4}
+									className="pb-3 pl-0 pt-12 font-mono text-[11px] font-medium uppercase tracking-[0.16em] text-pine"
+								>
 									{group.title}
 								</td>
 							</tr>
 							{group.rows.map((row) => (
 								<tr
 									key={row.feature}
-									className="border-b border-white/5 hover:bg-white/5 transition-colors"
+									className="border-b border-ink/10 transition-colors hover:bg-ink/[0.03]"
 								>
-									<td className="py-3 px-4 text-sm text-white">{row.feature}</td>
-									<td className="py-3 px-4 text-sm text-zinc-400">
+									<td className="py-5 pl-0 pr-4 align-top text-sm font-medium leading-relaxed text-ink">
+										{row.feature}
+									</td>
+									<td className="px-4 py-5 align-top text-sm leading-relaxed text-ink-soft">
 										<FeatureStatus status={row.rivet.status} text={row.rivet.text} />
 									</td>
-									<td className="py-3 px-4 text-sm text-zinc-500">
-										<FeatureStatus
-											status={row.competitor.status}
-											text={row.competitor.text}
-										/>
+									<td className="px-4 py-5 align-top text-sm leading-relaxed text-ink-soft">
+										<FeatureStatus status={row.competitor.status} text={row.competitor.text} />
+									</td>
+									<td className="py-5 pl-4 pr-0 align-top text-sm leading-relaxed text-ink-faint">
+										{row.importance}
 									</td>
-									<td className="py-3 px-4 text-sm text-zinc-500">{row.importance}</td>
 								</tr>
 							))}
 						</React.Fragment>
diff --git a/website/src/components/marketing/compare/FeatureStatus.tsx b/website/src/components/marketing/compare/FeatureStatus.tsx
index 0f0b2b72f6..ef5fc018b2 100644
--- a/website/src/components/marketing/compare/FeatureStatus.tsx
+++ b/website/src/components/marketing/compare/FeatureStatus.tsx
@@ -1,52 +1,74 @@
-import {
-	Icon,
-	faCheck,
-	faHourglass,
-	faMinus,
-	faXmark,
-} from '@rivet-gg/icons';
 import type { ReactNode } from 'react';
 import type { ComparisonStatus } from '@/data/compare/types';
 
+// Printed-catalog status marks: a pine check for yes, a hollow circle for
+// partial, a faint dash for no, and a dotted circle for coming soon. Pure
+// inline SVG so the component stays hook-free for zero-JS pages.
+const STATUS_MARKS: Record<ComparisonStatus, { icon: ReactNode; label: string }> = {
+	yes: {
+		label: 'Yes',
+		icon: (
+			<svg viewBox="0 0 12 12" aria-hidden="true" className="h-3 w-3 text-pine">
+				<path
+					d="M2 6.5 4.8 9.3 10 3.2"
+					fill="none"
+					stroke="currentColor"
+					strokeWidth="1.6"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+				/>
+			</svg>
+		),
+	},
+	partial: {
+		label: 'Partial',
+		icon: (
+			<svg viewBox="0 0 12 12" aria-hidden="true" className="h-3 w-3 text-ink-faint">
+				<circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" strokeWidth="1.4" />
+				<path d="M6 1.5A4.5 4.5 0 0 1 6 10.5Z" fill="currentColor" stroke="none" />
+			</svg>
+		),
+	},
+	'coming-soon': {
+		label: 'Coming soon',
+		icon: (
+			<svg viewBox="0 0 12 12" aria-hidden="true" className="h-3 w-3 text-ink-faint">
+				<circle
+					cx="6"
+					cy="6"
+					r="4.5"
+					fill="none"
+					stroke="currentColor"
+					strokeWidth="1.4"
+					strokeDasharray="2 2.4"
+					strokeLinecap="round"
+				/>
+			</svg>
+		),
+	},
+	no: {
+		label: 'No',
+		icon: (
+			<svg viewBox="0 0 12 12" aria-hidden="true" className="h-3 w-3 text-ink/25">
+				<path d="M2.5 6h7" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
+			</svg>
+		),
+	},
+};
+
 interface FeatureStatusProps {
 	status: ComparisonStatus;
 	text: ReactNode;
 }
 
 export function FeatureStatus({ status, text }: FeatureStatusProps) {
-	let icon, bgColor, textColor;
-
-	switch (status) {
-		case 'yes':
-			icon = faCheck;
-			bgColor = 'bg-green-500/20';
-			textColor = 'text-green-500';
-			break;
-		case 'no':
-			icon = faXmark;
-			bgColor = 'bg-red-500/20';
-			textColor = 'text-red-500';
-			break;
-		case 'partial':
-			icon = faMinus;
-			bgColor = 'bg-amber-500/20';
-			textColor = 'text-amber-500';
-			break;
-		case 'coming-soon':
-			icon = faHourglass;
-			bgColor = 'bg-purple-500/20';
-			textColor = 'text-purple-500';
-			break;
-	}
-
+	const { icon, label } = STATUS_MARKS[status];
 	return (
-		<div className="flex items-start">
-			<div
-				className={`flex-shrink-0 w-5 h-5 rounded-full ${bgColor} flex items-center justify-center ${textColor} mr-2 mt-0.5`}
-			>
-				<Icon icon={icon} className="text-xs" />
-			</div>
-			<div>{text}</div>
+		<div className="flex items-start gap-2.5">
+			<span className="mt-[4px] flex-shrink-0" title={label}>
+				{icon}
+			</span>
+			<div className="min-w-0">{text}</div>
 		</div>
 	);
 }
diff --git a/website/src/components/marketing/components/AnimatedCTATitle.tsx b/website/src/components/marketing/components/AnimatedCTATitle.tsx
index 9d4f05b687..23ddf4d327 100644
--- a/website/src/components/marketing/components/AnimatedCTATitle.tsx
+++ b/website/src/components/marketing/components/AnimatedCTATitle.tsx
@@ -2,6 +2,7 @@
 
 import { motion } from 'framer-motion';
 
+// Renders inside the dark colophon band, so the title is cream.
 export function AnimatedCTATitle() {
   return (
     <motion.h2
@@ -9,7 +10,7 @@ export function AnimatedCTATitle() {
       whileInView={{ opacity: 1, y: 0 }}
       viewport={{ once: true }}
       transition={{ duration: 0.5 }}
-      className='text-2xl font-normal tracking-tight text-white md:text-4xl'
+      className='text-3xl font-medium tracking-[-0.015em] text-cream md:text-4xl'
     >
       Infrastructure for <br />
       the agentic era.
diff --git a/website/src/components/marketing/components/CopyCommand.tsx b/website/src/components/marketing/components/CopyCommand.tsx
index 3e3446a006..72d7bb58e1 100644
--- a/website/src/components/marketing/components/CopyCommand.tsx
+++ b/website/src/components/marketing/components/CopyCommand.tsx
@@ -33,11 +33,11 @@ export function CopyCommand({ children, command, className }: CopyCommandProps)
       )}
       onClick={handleCopy}
     >
-      <div className='flex h-6 w-6 items-center justify-center text-white/40 transition-colors duration-200 group-hover:text-white/80'>
+      <div className='flex h-6 w-6 items-center justify-center text-ink-faint transition-colors duration-200 group-hover:text-ink'>
         <Icon icon={faArrowRight} className='h-4 w-4' />
       </div>
 
-      <div className='font-mono text-sm font-medium text-white/40 transition-colors duration-200 group-hover:text-white/80'>
+      <div className='font-mono text-sm font-medium text-ink-faint transition-colors duration-200 group-hover:text-ink'>
         {command || children}
       </div>
 
@@ -47,10 +47,10 @@ export function CopyCommand({ children, command, className }: CopyCommandProps)
             copied ? 'opacity-0' : 'opacity-0 group-hover:opacity-100'
           }`}
         >
-          <Icon icon={faCopy} className='h-4 w-4 text-white/40 transition-colors group-hover:text-white/80' />
+          <Icon icon={faCopy} className='h-4 w-4 text-ink-faint transition-colors group-hover:text-ink' />
         </div>
         <div className={`absolute transition-opacity duration-200 ${copied ? 'opacity-100' : 'opacity-0'}`}>
-          <Icon icon={faCheck} className='h-4 w-4 text-green-400' />
+          <Icon icon={faCheck} className='h-4 w-4 text-pine' />
         </div>
       </div>
     </div>
diff --git a/website/src/components/marketing/components/HeroBackground.tsx b/website/src/components/marketing/components/HeroBackground.tsx
deleted file mode 100644
index efca45c1b1..0000000000
--- a/website/src/components/marketing/components/HeroBackground.tsx
+++ /dev/null
@@ -1,696 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-
-export function HeroBackground() {
-  // Configuration object for all particle behavior constants
-  const PARTICLE_CONFIG = {
-    // Particle appearance
-    CIRCLE_RADIUS: 3,
-    MAX_OPACITY: 0.05,
-    ORANGE_COLOR: '#ff6b35', // Brighter orange
-
-    // Grid layout
-    GRID_SPACING: 40,
-
-    // Mouse interaction
-    PATH_FORCE_RADIUS: 200, // Radius for path-based forces
-    BASE_PUSH_FORCE: 0.3,
-    MOVEMENT_FORCE_MULTIPLIER: 4.0,
-    MAX_MOUSE_VELOCITY: 5000,
-
-    // Physics
-    DAMPING: 0.975,
-    SPRING_STRENGTH: 0.05,
-
-    // Animation
-    TARGET_FPS: 60,
-    MAX_FRAME_TIME: 0.1, // seconds
-
-    // Pulse effect
-    PULSE_SPEED: 150, // pixels per second - faster wave
-    PULSE_PEAK_OPACITY: 0.15, // less opaque
-    PULSE_LOOP_INTERVAL: 8000, // milliseconds between pulses - less frequent
-    PULSE_DURATION: 1500, // how long each pulse lasts at a particle
-
-    // Intro pulse effect
-    INTRO_PULSE_SPEED: 1200, // pixels per second - extremely fast
-
-    // Click pulse effect
-    CLICK_PULSE_SPEED: 1600, // pixels per second - 2x faster
-    CLICK_PULSE_PEAK_OPACITY: 0.2, // slightly more visible than regular pulses
-    CLICK_PULSE_DURATION: 800, // shorter duration for snappy effect
-
-    // Debug
-    DEBUG_MOUSE_TRACKING: false,
-    DEBUG_DOT_RADIUS: 2,
-    DEBUG_MAX_DOTS: 100,
-    DEBUG_EXCLUSION_ZONES: false // Set to true to visualize exclusion zones
-  };
-
-  // Simple Particle class for grid-based circles
-  class Particle {
-    x: number;
-    y: number;
-    baseOpacity: number;
-    hasBeenRevealed: boolean;
-    distanceFromCenter: number;
-    pulseOpacity: number;
-    mouseX: number;
-    mouseY: number;
-
-    constructor(x: number, y: number) {
-      // Fixed position
-      this.x = x;
-      this.y = y;
-
-      // Visual properties
-      this.baseOpacity = 0; // Start at 0, will be set by intro pulse
-      this.hasBeenRevealed = false; // Track if intro pulse has reached this particle
-
-      // Pulse effect properties
-      this.distanceFromCenter = 0;
-      this.pulseOpacity = 0;
-      this.mouseX = 0;
-      this.mouseY = 0;
-    }
-
-    draw(ctx: CanvasRenderingContext2D, config: typeof PARTICLE_CONFIG) {
-      // Calculate total opacity: base + pulse
-      let totalOpacity = this.baseOpacity + this.pulseOpacity;
-
-      // Add subtle mouse proximity highlighting
-      const mouseDistance = Math.sqrt((this.x - this.mouseX) ** 2 + (this.y - this.mouseY) ** 2);
-      if (mouseDistance < config.PATH_FORCE_RADIUS) {
-        const proximityFactor = 1 - mouseDistance / config.PATH_FORCE_RADIUS;
-        totalOpacity += proximityFactor * 0.07; // Slightly less intense highlight
-      }
-
-      if (totalOpacity <= 0) return;
-
-      ctx.save();
-      ctx.globalAlpha = Math.min(1, totalOpacity);
-      ctx.fillStyle = 'white';
-      ctx.beginPath();
-      ctx.arc(this.x, this.y, config.CIRCLE_RADIUS, 0, Math.PI * 2);
-      ctx.fill();
-      ctx.restore();
-    }
-
-    update(activePulses: any[], mouseX: number, mouseY: number, config: typeof PARTICLE_CONFIG) {
-      this.mouseX = mouseX;
-      this.mouseY = mouseY;
-      this.updatePulse(activePulses, config);
-    }
-
-    updatePulse(activePulses: any[], config: typeof PARTICLE_CONFIG) {
-      const currentTime = performance.now();
-      this.pulseOpacity = 0;
-
-      // Check all active pulses
-      activePulses.forEach(pulse => {
-        const timeSincePulseStart = currentTime - pulse.startTime;
-
-        // Use different speed for different pulse types
-        let pulseSpeed, pulseDuration, peakOpacity;
-        if (pulse.isIntro) {
-          pulseSpeed = config.INTRO_PULSE_SPEED;
-          pulseDuration = config.PULSE_DURATION;
-          peakOpacity = config.PULSE_PEAK_OPACITY;
-        } else if (pulse.isClick) {
-          pulseSpeed = config.CLICK_PULSE_SPEED;
-          pulseDuration = config.CLICK_PULSE_DURATION;
-          peakOpacity = config.CLICK_PULSE_PEAK_OPACITY;
-        } else {
-          pulseSpeed = config.PULSE_SPEED;
-          pulseDuration = config.PULSE_DURATION;
-          peakOpacity = config.PULSE_PEAK_OPACITY;
-        }
-
-        // Calculate when this pulse wave should reach this particle
-        const waveRadius = (timeSincePulseStart / 1000) * pulseSpeed;
-
-        // Calculate distance from this pulse's center (not always canvas center)
-        const particleDistance = Math.sqrt((this.x - pulse.centerX) ** 2 + (this.y - pulse.centerY) ** 2);
-
-        // Check if the wave has reached this particle
-        if (waveRadius >= particleDistance) {
-          // For intro pulse, permanently set base opacity when wave reaches particle
-          if (pulse.isIntro && !this.hasBeenRevealed) {
-            this.baseOpacity = config.MAX_OPACITY;
-            this.hasBeenRevealed = true;
-          }
-
-          // Calculate how long the wave has been at this particle
-          const timeAtParticle = timeSincePulseStart - (particleDistance / pulseSpeed) * 1000;
-
-          if (timeAtParticle >= 0 && timeAtParticle < pulseDuration) {
-            const pulsePhase = timeAtParticle / pulseDuration;
-
-            let pulseContribution = 0;
-
-            if (pulse.isIntro) {
-              // Intro pulse: starts at 0, peaks, then settles at base opacity
-              if (pulsePhase < 0.3) {
-                // Rising phase: 0 to peak
-                const riseProgress = pulsePhase / 0.3;
-                pulseContribution = riseProgress * peakOpacity;
-              } else {
-                // Falling phase: peak to 0 (base opacity already set above)
-                const fallProgress = (pulsePhase - 0.3) / 0.7;
-                pulseContribution = peakOpacity * (1 - fallProgress);
-              }
-            } else {
-              // Regular and click pulses: normal pulse behavior
-              if (pulsePhase < 0.3) {
-                // Rising phase: 0 to peak
-                pulseContribution = (pulsePhase / 0.3) * peakOpacity;
-              } else if (pulsePhase < 1) {
-                // Falling phase: peak to 0
-                const fallProgress = (pulsePhase - 0.3) / 0.7;
-                pulseContribution = peakOpacity * (1 - fallProgress);
-              }
-            }
-
-            // Add this pulse's contribution (multiple pulses can stack)
-            this.pulseOpacity += pulseContribution;
-          }
-        }
-      });
-
-      // Clamp to maximum opacity
-      this.pulseOpacity = Math.min(this.pulseOpacity, config.PULSE_PEAK_OPACITY * 2);
-    }
-  }
-
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const [particles, setParticles] = useState<Particle[]>([]);
-  const [activePulses, setActivePulses] = useState<any[]>([]);
-  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
-  const [systemStartTime, setSystemStartTime] = useState(0);
-  const [isVisible, setIsVisible] = useState(false);
-  const animationFrameRef = useRef<number | null>(null);
-  const lastFrameTimeRef = useRef(0);
-
-  // Initialize the particle system
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      setIsVisible(window.innerWidth >= 750);
-    }
-
-    const canvas = canvasRef.current;
-    const wrapper = wrapperRef.current;
-    if (!canvas || !wrapper) return;
-
-    // Get landing elements for positioning
-    const landingHero =
-      document.querySelector('.landing-hero') ||
-      document.querySelector('.hero-section') ||
-      document.querySelector('[data-hero-section]');
-
-    // Calculate container height
-    let containerHeight = 600; // Fixed height to match HeroSection
-
-    if (landingHero) {
-      containerHeight = landingHero.offsetHeight;
-    }
-
-    // Set canvas size to match full screen (excluding scrollbar)
-    canvas.width = typeof window !== 'undefined' ? document.documentElement.clientWidth : 800;
-    canvas.height = containerHeight;
-
-    // Create grid-based particles
-    const newParticles = createGridParticles(canvas, 0, 0);
-    setParticles(newParticles);
-
-    // Initialize timing
-    const startTime = performance.now();
-    setSystemStartTime(startTime);
-
-    // Add immediate intro pulse that moves very fast
-    setActivePulses([
-      {
-        startTime: startTime,
-        centerX: canvas.width / 2,
-        centerY: canvas.height / 2,
-        isIntro: true // Mark as intro pulse for different speed
-      }
-    ]);
-
-    // Initialize mouse position to center of canvas
-    setMousePosition({ x: canvas.width / 2, y: canvas.height / 2 });
-
-    lastFrameTimeRef.current = startTime;
-
-    return () => {
-      if (animationFrameRef.current) {
-        cancelAnimationFrame(animationFrameRef.current);
-      }
-    };
-  }, []);
-
-  // Create particles in a grid layout
-  const createGridParticles = (
-    canvas: HTMLCanvasElement,
-    leftPadding: number,
-    rightPadding: number
-  ): Particle[] => {
-    if (!canvas) return [];
-
-    const newParticles: Particle[] = [];
-    const baseSpacing = PARTICLE_CONFIG.GRID_SPACING;
-    const edgeMargin = 40; // Constant distance from edges
-
-    // Get exclusion zones from landing-hero direct children
-    const exclusionZones = getExclusionZones(wrapperRef.current);
-
-    // Calculate available space after accounting for edge margins
-    const availableWidth = canvas.width - 2 * edgeMargin;
-    const availableHeight = canvas.height - 2 * edgeMargin;
-
-    // Calculate maximum number of particles that fit with base spacing
-    const maxCols = Math.floor(availableWidth / baseSpacing);
-    const maxRows = Math.floor(availableHeight / baseSpacing);
-
-    // Adjust spacing to distribute particles evenly with exact edge margins
-    const actualSpacingX = maxCols > 0 ? availableWidth / maxCols : baseSpacing;
-    const actualSpacingY = maxRows > 0 ? availableHeight / maxRows : baseSpacing;
-
-    // Calculate center for opacity calculations
-    const centerX = canvas.width / 2;
-    const centerY = canvas.height / 2;
-
-    for (let row = 0; row <= maxRows; row++) {
-      for (let col = 0; col <= maxCols; col++) {
-        const x = edgeMargin + col * actualSpacingX;
-        const y = edgeMargin + row * actualSpacingY;
-
-        // Skip if particle overlaps with any exclusion zone
-        if (isPointInExclusionZones(x, y, exclusionZones)) continue;
-
-        const particle = new Particle(x, y);
-
-        // Calculate distance from center for pulse effect
-        particle.distanceFromCenter = Math.sqrt((x - centerX) ** 2 + (y - centerY) ** 2);
-
-        // Start with zero opacity - intro pulse will reveal them
-        particle.baseOpacity = 0;
-
-        newParticles.push(particle);
-      }
-    }
-
-    return newParticles;
-  };
-
-  // Get bounding rectangles of elements marked for exclusion
-  const getExclusionZones = (wrapper: HTMLDivElement | null) => {
-    if (!wrapper) return [];
-
-    const exclusionZones: any[] = [];
-    const margin = 25;
-
-    // Find all elements with the exclusion class
-    const elements = document.querySelectorAll('.hero-bg-exclude');
-
-    elements.forEach(element => {
-      const rect = element.getBoundingClientRect();
-
-      // Get canvas positioning relative to viewport
-      const canvas = canvasRef.current;
-      if (!canvas) return;
-
-      // Get the actual canvas position in the viewport
-      const canvasRect = canvas.getBoundingClientRect();
-
-      // Convert to canvas coordinates (accounting for canvas position) and add margin
-      const exclusionRect = {
-        left: rect.left - canvasRect.left - margin,
-        top: rect.top - canvasRect.top - margin,
-        right: rect.right - canvasRect.left + margin,
-        bottom: rect.bottom - canvasRect.top + margin
-      };
-
-      // Only add if the rect intersects with canvas bounds
-      if (
-        exclusionRect.right > 0 &&
-        exclusionRect.left < canvas.width &&
-        exclusionRect.bottom > 0 &&
-        exclusionRect.top < canvas.height
-      ) {
-        exclusionZones.push(exclusionRect);
-      }
-    });
-
-    return exclusionZones;
-  };
-
-  // Check if a point (with circle radius) overlaps with any exclusion zone
-  const isPointInExclusionZones = (x: number, y: number, exclusionZones: any[]) => {
-    const radius = PARTICLE_CONFIG.CIRCLE_RADIUS;
-
-    for (const zone of exclusionZones) {
-      // Check if circle centered at (x, y) with given radius overlaps with rectangle
-      const closestX = Math.max(zone.left, Math.min(x, zone.right));
-      const closestY = Math.max(zone.top, Math.min(y, zone.bottom));
-
-      const distanceX = x - closestX;
-      const distanceY = y - closestY;
-      const distanceSq = distanceX * distanceX + distanceY * distanceY;
-
-      if (distanceSq <= radius * radius) {
-        return true;
-      }
-    }
-
-    return false;
-  };
-
-  // Draw exclusion zones for debugging
-  const drawExclusionZones = (ctx: CanvasRenderingContext2D) => {
-    const wrapper = wrapperRef.current;
-    if (!wrapper) return;
-
-    const exclusionZones = getExclusionZones(wrapper);
-
-    ctx.save();
-    ctx.strokeStyle = 'red';
-    ctx.fillStyle = 'rgba(255, 0, 0, 0.2)';
-    ctx.lineWidth = 2;
-
-    exclusionZones.forEach(zone => {
-      // Draw filled rectangle
-      ctx.fillRect(zone.left, zone.top, zone.right - zone.left, zone.bottom - zone.top);
-      // Draw border
-      ctx.strokeRect(zone.left, zone.top, zone.right - zone.left, zone.bottom - zone.top);
-    });
-
-    ctx.restore();
-  };
-
-  // Manage pulse creation and cleanup
-  const managePulses = (currentTime: number) => {
-    const timeSinceSystemStart = currentTime - systemStartTime;
-
-    // Calculate how many regular pulses we should have (excluding the intro pulse)
-    // Start regular pulses after a delay to let the intro pulse finish
-    const regularPulseStartDelay = 2000; // 2 seconds after system start
-    if (timeSinceSystemStart < regularPulseStartDelay) {
-      return;
-    }
-
-    const adjustedTime = timeSinceSystemStart - regularPulseStartDelay;
-    const shouldHaveRegularPulseCount = Math.floor(adjustedTime / PARTICLE_CONFIG.PULSE_LOOP_INTERVAL) + 1;
-    const currentRegularPulseCount = activePulses.filter(p => !p.isIntro).length;
-
-    // Create new regular pulses if needed
-    if (currentRegularPulseCount < shouldHaveRegularPulseCount) {
-      const regularPulseIndex = currentRegularPulseCount;
-      const pulseStartTime =
-        systemStartTime + regularPulseStartDelay + regularPulseIndex * PARTICLE_CONFIG.PULSE_LOOP_INTERVAL;
-
-      const canvas = canvasRef.current;
-      setActivePulses(prev => [
-        ...prev,
-        {
-          startTime: pulseStartTime,
-          centerX: canvas ? canvas.width / 2 : 0,
-          centerY: canvas ? canvas.height / 2 : 0,
-          isIntro: false
-        }
-      ]);
-    }
-
-    // Clean up pulses that are too old (beyond their effective range)
-    const canvas = canvasRef.current;
-    const maxCanvasDiagonal = canvas ? Math.sqrt(canvas.width ** 2 + canvas.height ** 2) : 1000;
-
-    setActivePulses(prev =>
-      prev.filter(pulse => {
-        let pulseSpeed, pulseDuration;
-        if (pulse.isIntro) {
-          pulseSpeed = PARTICLE_CONFIG.INTRO_PULSE_SPEED;
-          pulseDuration = PARTICLE_CONFIG.PULSE_DURATION;
-        } else if (pulse.isClick) {
-          pulseSpeed = PARTICLE_CONFIG.CLICK_PULSE_SPEED;
-          pulseDuration = PARTICLE_CONFIG.CLICK_PULSE_DURATION;
-        } else {
-          pulseSpeed = PARTICLE_CONFIG.PULSE_SPEED;
-          pulseDuration = PARTICLE_CONFIG.PULSE_DURATION;
-        }
-
-        const maxPulseLifetime = (maxCanvasDiagonal / pulseSpeed) * 1000 + pulseDuration;
-        return currentTime - pulse.startTime < maxPulseLifetime;
-      })
-    );
-  };
-
-  // Animation loop
-  useEffect(() => {
-    const TARGET_FPS = PARTICLE_CONFIG.TARGET_FPS;
-    const FRAME_TIME = 1000 / TARGET_FPS;
-
-    const animate = () => {
-      const currentTime = performance.now();
-      const timeSinceLastFrame = currentTime - lastFrameTimeRef.current;
-
-      // Only render if enough time has passed for next frame
-      if (timeSinceLastFrame >= FRAME_TIME) {
-        lastFrameTimeRef.current = currentTime;
-
-        // Manage pulse creation and cleanup
-        managePulses(currentTime);
-
-        // Update particles
-        particles.forEach(particle => {
-          particle.update(activePulses, mousePosition.x, mousePosition.y, PARTICLE_CONFIG);
-        });
-
-        // Draw particles
-        const canvas = canvasRef.current;
-        const ctx = canvas?.getContext('2d');
-        if (canvas && ctx) {
-          // Clear canvas
-          ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-          // Draw particles
-          particles.forEach(particle => {
-            particle.draw(ctx, PARTICLE_CONFIG);
-          });
-
-          // Draw exclusion zones if debug mode is enabled
-          if (PARTICLE_CONFIG.DEBUG_EXCLUSION_ZONES) {
-            drawExclusionZones(ctx);
-          }
-        }
-      }
-
-      // Continue animation
-      animationFrameRef.current = requestAnimationFrame(animate);
-    };
-
-    if (particles.length > 0) {
-      animationFrameRef.current = requestAnimationFrame(animate);
-    }
-
-    return () => {
-      if (animationFrameRef.current) {
-        cancelAnimationFrame(animationFrameRef.current);
-      }
-    };
-  }, [particles, activePulses, mousePosition, systemStartTime]);
-
-  // Handle mouse movement
-  const handleMouseMove = (e: MouseEvent) => {
-    if (wrapperRef.current) {
-      const wrapperRect = wrapperRef.current.getBoundingClientRect();
-      setMousePosition({
-        x: e.clientX - wrapperRect.left,
-        y: e.clientY - wrapperRect.top
-      });
-    }
-  };
-
-  // Handle mouse clicks to create pulses
-  const handleMouseDown = (e: MouseEvent) => {
-    let clickX, clickY;
-    if (wrapperRef.current) {
-      const wrapperRect = wrapperRef.current.getBoundingClientRect();
-      clickX = e.clientX - wrapperRect.left;
-      clickY = e.clientY - wrapperRect.top;
-    } else {
-      clickX = e.pageX;
-      clickY = e.pageY;
-    }
-
-    // Create a new click pulse at the mousedown position
-    setActivePulses(prev => [
-      ...prev,
-      {
-        startTime: performance.now(),
-        centerX: clickX,
-        centerY: clickY,
-        isClick: true // Mark as click pulse for different behavior
-      }
-    ]);
-  };
-
-  // Set up global mouse event listeners
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      document.addEventListener('mousemove', handleMouseMove);
-      document.addEventListener('mousedown', handleMouseDown);
-
-      return () => {
-        document.removeEventListener('mousemove', handleMouseMove);
-        document.removeEventListener('mousedown', handleMouseDown);
-      };
-    }
-  }, []);
-
-  // Handle resize
-  useEffect(() => {
-    const handleResize = () => {
-      const canvas = canvasRef.current;
-      const wrapper = wrapperRef.current;
-
-      // Update visibility based on window width
-      if (typeof window !== 'undefined') {
-        setIsVisible(window.innerWidth >= 750);
-      }
-
-      if (!canvas || !wrapper) return;
-
-      // Get landing elements for positioning
-      const landingHero =
-        document.querySelector('.landing-hero') ||
-        document.querySelector('.hero-section') ||
-        document.querySelector('[data-hero-section]');
-
-      // Calculate container height
-      let containerHeight = 600; // Fixed height to match HeroSection
-
-      if (landingHero) {
-        containerHeight = landingHero.offsetHeight;
-      }
-
-      // Set canvas size to match full screen (excluding scrollbar)
-      canvas.width = typeof window !== 'undefined' ? document.documentElement.clientWidth : 800;
-      canvas.height = containerHeight;
-
-      // Recreate grid particles for new dimensions
-      const newParticles = createGridParticles(canvas, 0, 0);
-      setParticles(newParticles);
-
-      // Reset mouse position to center of new canvas
-      setMousePosition({ x: canvas.width / 2, y: canvas.height / 2 });
-    };
-
-    if (typeof window !== 'undefined') {
-      window.addEventListener('resize', handleResize);
-      // Wait for layout to finish and re-render
-      setTimeout(handleResize, 0);
-
-      return () => {
-        window.removeEventListener('resize', handleResize);
-      };
-    }
-  }, []);
-
-  // Mutation observer to detect changes to exclusion zone elements
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-
-    const regenerateParticles = () => {
-      const canvas = canvasRef.current;
-      const wrapper = wrapperRef.current;
-      if (!canvas || !wrapper) return;
-
-      // Recreate particles with updated exclusion zones
-      const newParticles = createGridParticles(canvas, 0, 0);
-      setParticles(newParticles);
-    };
-
-    // Create mutation observer to watch for DOM changes
-    const observer = new MutationObserver(mutations => {
-      let shouldRegenerate = false;
-
-      mutations.forEach(mutation => {
-        // Check if any exclusion zone elements were added or removed
-        if (mutation.type === 'childList') {
-          const addedNodes = Array.from(mutation.addedNodes).filter(
-            node => node.nodeType === Node.ELEMENT_NODE
-          ) as Element[];
-          const removedNodes = Array.from(mutation.removedNodes).filter(
-            node => node.nodeType === Node.ELEMENT_NODE
-          ) as Element[];
-
-          // Check if any added/removed nodes are exclusion zones or contain them
-          const hasExclusionChanges = [...addedNodes, ...removedNodes].some(
-            node => node.classList?.contains('hero-bg-exclude') || node.querySelector?.('.hero-bg-exclude')
-          );
-
-          if (hasExclusionChanges) {
-            shouldRegenerate = true;
-          }
-        }
-
-        // Check if class changes affect exclusion zones
-        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
-          const target = mutation.target as Element;
-          if (target.classList?.contains('hero-bg-exclude')) {
-            shouldRegenerate = true;
-          }
-        }
-      });
-
-      if (shouldRegenerate) {
-        // Debounce to avoid excessive regeneration
-        setTimeout(regenerateParticles, 100);
-      }
-    });
-
-    // Observe the entire document for changes
-    observer.observe(document.body, {
-      childList: true,
-      subtree: true,
-      attributes: true,
-      attributeFilter: ['class']
-    });
-
-    return () => {
-      observer.disconnect();
-    };
-  }, []);
-
-  return (
-    <div
-      ref={wrapperRef}
-      style={{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '600px',
-        overflow: 'hidden',
-        pointerEvents: 'none',
-        zIndex: -1,
-        display: isVisible ? 'block' : 'none'
-      }}
-    >
-      <canvas
-        ref={canvasRef}
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          width: '100%',
-          height: '100%',
-          pointerEvents: 'none',
-          zIndex: -1
-        }}
-      />
-    </div>
-  );
-}
diff --git a/website/src/components/marketing/components/LibrariesGrid.tsx b/website/src/components/marketing/components/LibrariesGrid.tsx
deleted file mode 100644
index fa2861a46c..0000000000
--- a/website/src/components/marketing/components/LibrariesGrid.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Icon, faArrowRight, faShapes, faSquareQuestion } from '@rivet-gg/icons';
-
-export function LibrariesGrid() {
-  return (
-    <div className='mx-auto grid max-w-4xl grid-cols-1 gap-4 md:grid-cols-2'>
-      <a href='/docs/actors' className='group block'>
-        <div className='bg-white/2 relative flex h-[200px] flex-col overflow-hidden rounded-xl border border-white/20 shadow-sm transition-all duration-200 group-hover:border-white/40'>
-          <div className='mt-6 px-6'>
-            <div className='mb-4 flex items-center justify-between'>
-              <div className='flex items-center gap-3 text-base text-white'>
-                <Icon icon={faShapes} />
-                <h3 className='font-medium'>Actors</h3>
-              </div>
-              <div className='opacity-0 transition-opacity group-hover:opacity-100'>
-                <Icon
-                  icon={faArrowRight}
-                  className='-translate-x-1 text-xl text-white/80 transition-all group-hover:translate-x-0'
-                />
-              </div>
-            </div>
-            <div className='space-y-3'>
-              <p className='text-base leading-relaxed text-white/40'>
-                Long running tasks with state persistence, hibernation, and realtime
-              </p>
-              <p className='text-sm text-white/30'>
-                Replaces <span className='font-medium text-white/60'>Durable Objects</span>,{' '}
-                <span className='font-medium text-white/60'>Orleans</span>, or{' '}
-                <span className='font-medium text-white/60'>Akka</span>
-              </p>
-            </div>
-          </div>
-        </div>
-      </a>
-
-      <div className='bg-white/2 relative flex h-[200px] flex-col overflow-hidden rounded-xl border border-white/20 shadow-sm'>
-        <div className='mt-6 px-6'>
-          <div className='mb-4 flex items-center gap-3 text-base text-white'>
-            <Icon icon={faSquareQuestion} />
-            <h3 className='font-medium'>Coming Soon</h3>
-          </div>
-          <div className='space-y-3'>
-            <p className='text-base leading-relaxed text-white/40'>Stay tuned for more</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/website/src/components/marketing/components/MarketingButton.tsx b/website/src/components/marketing/components/MarketingButton.tsx
index 4718d9fff2..599231beda 100644
--- a/website/src/components/marketing/components/MarketingButton.tsx
+++ b/website/src/components/marketing/components/MarketingButton.tsx
@@ -1,29 +1,44 @@
+// Marketing Button component for consistent styling across marketing pages.
+//
+// Variants on the porcelain system:
+// - ember: the spark. At most one per page (hero CTA or a form's submit).
+// - primary: the default call to action, ink block with cream text.
+// - secondary: quiet hairline outline.
+// - ghost: pine text link with no chrome.
+type MarketingButtonVariant = 'ember' | 'primary' | 'secondary' | 'ghost';
+
+const VARIANT_CLASSES: Record<MarketingButtonVariant, string> = {
+	ember: 'bg-accent-deep text-white hover:bg-accent',
+	primary: 'bg-ink text-cream hover:bg-ink/85',
+	secondary: 'border border-ink/20 bg-transparent text-ink hover:border-ink/40 hover:bg-ink/[0.04]',
+	ghost: 'px-0 text-pine hover:underline underline-offset-4',
+};
 
-// Marketing Button component for consistent styling across marketing pages
 export const MarketingButton = ({
-  children,
-  href,
-  target,
-  rel,
-  primary = false
+	children,
+	href,
+	target,
+	rel,
+	variant,
+	primary = false,
 }: {
-  children: React.ReactNode;
-  href: string;
-  target?: string;
-  rel?: string;
-  primary?: boolean;
+	children: React.ReactNode;
+	href: string;
+	target?: string;
+	rel?: string;
+	variant?: MarketingButtonVariant;
+	// Deprecated boolean kept while pages migrate to `variant`.
+	primary?: boolean;
 }) => {
-  return (
-    <a href={href}
-      target={target}
-      rel={rel}
-      className={`group inline-flex h-11 items-center justify-center rounded-xl px-4 py-2.5 text-base font-medium transition-all duration-200 active:scale-[0.97] ${
-        primary
-          ? 'bg-[#FF5C00]/90 text-white hover:bg-[#FF5C00] hover:brightness-110'
-          : 'border border-white/20 bg-transparent text-white/80 hover:border-white/40 hover:bg-[rgba(255,255,255,0.1)] hover:text-white'
-      }`}
-    >
-      {children}
-    </a>
-  );
+	const resolved: MarketingButtonVariant = variant ?? (primary ? 'ember' : 'secondary');
+	return (
+		<a
+			href={href}
+			target={target}
+			rel={rel}
+			className={`group inline-flex h-11 items-center justify-center rounded-xl px-5 py-2.5 text-base font-medium transition-all duration-200 active:scale-[0.97] ${VARIANT_CLASSES[resolved]}`}
+		>
+			{children}
+		</a>
+	);
 };
diff --git a/website/src/components/marketing/components/TabGroup.tsx b/website/src/components/marketing/components/TabGroup.tsx
deleted file mode 100644
index 37969a01e2..0000000000
--- a/website/src/components/marketing/components/TabGroup.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-'use client';
-
-import {
-  faFilePen,
-  faRobot,
-  faMessage,
-  faDatabase,
-  faGaugeHigh,
-  faWaveSine,
-  faGamepad,
-  faRotate,
-  faBuilding,
-  faCode,
-  Icon
-} from '@rivet-gg/icons';
-import { type ExampleData, type StateTypeTab } from '@/data/examples/examples';
-
-const EXAMPLE_ICON_MAP: Record<string, any> = {
-  'ai-agent': faRobot,
-  'chat-room': faMessage,
-  crdt: faFilePen,
-  database: faDatabase,
-  rate: faGaugeHigh,
-  stream: faWaveSine,
-  game: faGamepad,
-  sync: faRotate,
-  tenant: faBuilding
-};
-
-interface TabGroupProps {
-  examples: ExampleData[];
-  activeExample: string;
-  setActiveExample: (example: string) => void;
-  activeStateType: StateTypeTab;
-  setActiveStateType: (state: StateTypeTab) => void;
-}
-
-export default function TabGroup({
-  examples,
-  activeExample,
-  setActiveExample,
-  activeStateType,
-  setActiveStateType
-}: TabGroupProps) {
-  // Transform examples data to include actual icon components
-  const examplesWithIcons = examples.map(example => ({
-    ...example,
-    icon: EXAMPLE_ICON_MAP[example.id] || faCode
-  }));
-
-  return (
-    <div className='border-b border-white/10'>
-      {/* Example Tabs */}
-      <div className='border-b border-white/5 px-6 py-4'>
-        <div className='mb-3 flex items-center gap-1 text-sm text-white/40'>
-          <span className='font-medium'>Example</span>
-        </div>
-        <div className='scrollbar-hide flex flex-1 gap-2 overflow-x-auto'>
-          {examplesWithIcons.map(example => (
-            <button
-              key={example.id}
-              onClick={() => setActiveExample(example.id)}
-              className={`flex items-center gap-2 whitespace-nowrap rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200 ${
-                activeExample === example.id
-                  ? 'border border-white/20 bg-white/10 text-white'
-                  : 'text-white/60 hover:bg-white/5 hover:text-white/80'
-              }`}
-            >
-              <Icon icon={example.icon as any} className='h-3.5 w-3.5' />
-              {example.title}
-            </button>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/website/src/components/marketing/editorial/CatalogCard.tsx b/website/src/components/marketing/editorial/CatalogCard.tsx
new file mode 100644
index 0000000000..cf54c6c3bc
--- /dev/null
+++ b/website/src/components/marketing/editorial/CatalogCard.tsx
@@ -0,0 +1,50 @@
+import type { ReactNode } from 'react';
+
+// Porcelain catalog entry: hairline border, translucent white fill over the
+// porcelain field, optional pine footer link. Hook-free.
+interface CatalogCardProps {
+	title?: ReactNode;
+	href?: string;
+	linkLabel?: ReactNode;
+	children?: ReactNode;
+	className?: string;
+}
+
+export const CatalogCard = ({
+	title,
+	href,
+	linkLabel,
+	children,
+	className,
+}: CatalogCardProps) => {
+	const body = (
+		<>
+			{title ? (
+				<h3 className="text-lg font-medium tracking-[-0.01em] text-ink md:text-xl">
+					{title}
+				</h3>
+			) : null}
+			{children}
+			{href && linkLabel ? (
+				<span className="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-pine">
+					{linkLabel}
+					<span aria-hidden="true" className="transition-transform duration-200 group-hover:translate-x-0.5">
+						→
+					</span>
+				</span>
+			) : null}
+		</>
+	);
+
+	const cardClass = `group block border border-ink/10 bg-white/55 p-7 transition-colors duration-200 ${
+		href ? 'hover:border-ink/25' : ''
+	} ${className ?? ''}`;
+
+	return href ? (
+		<a href={href} className={cardClass}>
+			{body}
+		</a>
+	) : (
+		<div className={cardClass}>{body}</div>
+	);
+};
diff --git a/website/src/components/marketing/editorial/Eyebrow.tsx b/website/src/components/marketing/editorial/Eyebrow.tsx
new file mode 100644
index 0000000000..897582137d
--- /dev/null
+++ b/website/src/components/marketing/editorial/Eyebrow.tsx
@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import { EYEBROW_CLASS } from '../typography';
+
+// Museum-catalog section label: an optional mono index, an em dash, and a
+// letter-spaced uppercase label in pine. Hook-free so zero-JS pages can use it.
+interface EyebrowProps {
+	label: ReactNode;
+	index?: string;
+	rule?: boolean;
+	className?: string;
+}
+
+export const Eyebrow = ({ label, index, rule = false, className }: EyebrowProps) => (
+	<p
+		className={`${EYEBROW_CLASS} ${rule ? 'border-t border-ink/10 pt-5' : ''} ${className ?? ''}`}
+	>
+		{index ? <span className="text-ink-faint">{index} — </span> : null}
+		{label}
+	</p>
+);
diff --git a/website/src/components/marketing/editorial/InkPanel.tsx b/website/src/components/marketing/editorial/InkPanel.tsx
new file mode 100644
index 0000000000..465dff68a5
--- /dev/null
+++ b/website/src/components/marketing/editorial/InkPanel.tsx
@@ -0,0 +1,86 @@
+import type { ReactNode } from 'react';
+
+// The dark editorial plate. Every code, terminal, screenshot, and data moment
+// on a porcelain marketing page lives inside an InkPanel and nothing else
+// does. Hook-free so zero-JS pages can use it.
+//
+// `textureSrc` swaps the flat ink surface for a warm oil-painting backdrop
+// under a darkening veil. Reserve it for editorial moments (CTA colophon,
+// 404); code and data plates stay flat ink for legibility. If the image is
+// missing the veil simply sits on flat ink, so nothing blocks on asset
+// uploads.
+interface InkPanelProps {
+	children: ReactNode;
+	caption?: ReactNode;
+	captionAside?: ReactNode;
+	bleed?: boolean;
+	textureSrc?: string;
+	texturePosition?: string;
+	className?: string;
+}
+
+export const InkPanel = ({
+	children,
+	caption,
+	captionAside,
+	bleed = false,
+	textureSrc,
+	texturePosition = 'center',
+	className,
+}: InkPanelProps) => (
+	<div
+		className={`selection-paper relative overflow-hidden bg-ink text-cream ${
+			bleed ? '' : 'rounded-xl border border-ink/20'
+		} ${className ?? ''}`}
+	>
+		{textureSrc ? (
+			<>
+				<div
+					aria-hidden="true"
+					className="absolute inset-0 bg-cover"
+					style={{ backgroundImage: `url('${textureSrc}')`, backgroundPosition: texturePosition }}
+				/>
+				<div
+					aria-hidden="true"
+					className="absolute inset-0"
+					style={{
+						background:
+							'linear-gradient(180deg, rgba(20,19,16,0.62), rgba(20,19,16,0.48) 50%, rgba(20,19,16,0.68))',
+					}}
+				/>
+			</>
+		) : null}
+		<div className="relative">{children}</div>
+		{caption ? (
+			<div className="relative flex items-center justify-between gap-4 border-t border-cream/10 px-5 py-3 font-mono text-[11px] text-cream/45">
+				<span>{caption}</span>
+				{captionAside ? <span>{captionAside}</span> : null}
+			</div>
+		) : null}
+	</div>
+);
+
+// One-line command strip, e.g. `$ npm install rivetkit`. The `$` renders in
+// sage on ink, pine on paper; pass the command without it. The default ink
+// variant is a deliberate dark moment; use the paper variant where several
+// commands sit near each other and solid ink would dominate the composition.
+interface InkChipProps {
+	command: string;
+	variant?: 'ink' | 'paper';
+	className?: string;
+}
+
+export const InkChip = ({ command, variant = 'ink', className }: InkChipProps) => (
+	<div
+		className={`flex items-center gap-2.5 overflow-x-auto rounded-md font-mono text-[13px] ${
+			variant === 'ink'
+				? 'selection-paper border border-ink/20 bg-ink px-4 py-3 text-cream/85'
+				: 'border border-ink/15 bg-white/55 px-3.5 py-2.5 text-ink-soft'
+		} ${className ?? ''}`}
+	>
+		<span aria-hidden="true" className={`select-none ${variant === 'ink' ? 'text-sage' : 'text-pine'}`}>
+			$
+		</span>
+		<span className="whitespace-nowrap">{command}</span>
+	</div>
+);
diff --git a/website/src/components/marketing/editorial/PerimeterDiagram.tsx b/website/src/components/marketing/editorial/PerimeterDiagram.tsx
new file mode 100644
index 0000000000..119f136b43
--- /dev/null
+++ b/website/src/components/marketing/editorial/PerimeterDiagram.tsx
@@ -0,0 +1,69 @@
+import { Ban } from 'lucide-react';
+
+// Green schematic of the self-hosted deployment boundary, shared by the
+// landing OnPremSection and the enterprise page. Hook-free.
+export interface PerimeterDiagramNode {
+	title: string;
+	detail: string;
+}
+
+const DEFAULT_NODES: PerimeterDiagramNode[] = [
+	{ title: 'Your backend', detail: 'Actors run in your Node.js or Bun process' },
+	{ title: 'Rivet Engine', detail: 'Single binary for orchestration and routing' },
+	{ title: 'Your storage', detail: 'File system, Postgres, or FoundationDB' },
+];
+
+interface PerimeterDiagramProps {
+	nodes?: PerimeterDiagramNode[];
+	label?: string;
+	footer?: string;
+	className?: string;
+}
+
+export const PerimeterDiagram = ({
+	nodes = DEFAULT_NODES,
+	label = 'Your perimeter',
+	footer = 'No outbound connections. No telemetry.',
+	className,
+}: PerimeterDiagramProps) => (
+	<div className={`relative rounded-xl p-6 md:p-8 ${className ?? ''}`}>
+		<svg
+			aria-hidden='true'
+			className='pointer-events-none absolute inset-0 h-full w-full overflow-visible'
+			viewBox='0 0 100 100'
+			preserveAspectRatio='none'
+		>
+			<rect
+				x='0.75'
+				y='0.75'
+				width='98.5'
+				height='98.5'
+				rx='3.5'
+				fill='none'
+				stroke='currentColor'
+				strokeWidth='1'
+				strokeDasharray='4 3.2'
+				className='perimeter-dash-rect text-ink/30'
+				vectorEffect='non-scaling-stroke'
+			/>
+		</svg>
+		<span className='absolute -top-2.5 left-6 z-10 bg-paper px-2 font-mono text-[11px] uppercase tracking-[0.14em] text-pine'>
+			{label}
+		</span>
+		<div className='relative z-10 flex flex-col items-stretch'>
+			{nodes.map((node, idx) => (
+				<div key={node.title} className='flex flex-col'>
+					{idx > 0 && <div className='mx-auto h-5 w-px bg-pine/40' />}
+					<div className='rounded-lg border border-ink/10 bg-paper-deep/50 px-4 py-3'>
+						<div className='text-sm font-medium text-ink'>{node.title}</div>
+						<div className='mt-0.5 text-xs text-ink-soft'>{node.detail}</div>
+					</div>
+				</div>
+			))}
+		</div>
+		<div className='relative z-10 mt-6 flex items-center gap-2 border-t border-ink/10 pt-4 font-mono text-[11px] text-pine'>
+			<Ban className='h-3.5 w-3.5 text-pine/60' />
+			{footer}
+		</div>
+	</div>
+);
diff --git a/website/src/components/marketing/editorial/PlateImage.tsx b/website/src/components/marketing/editorial/PlateImage.tsx
new file mode 100644
index 0000000000..c4d8a726e9
--- /dev/null
+++ b/website/src/components/marketing/editorial/PlateImage.tsx
@@ -0,0 +1,57 @@
+import type { ReactNode } from 'react';
+import { CAPTION_CLASS } from '../typography';
+
+// Classical image in a museum mat: warm cream mat, hairline frame, and a
+// printed catalog caption below, e.g.
+// "Fig. 01 — A Lady Writing · Johannes Vermeer · c. 1665". Hook-free.
+interface PlateImageProps {
+	src: string;
+	alt: string;
+	figure?: string;
+	title?: string;
+	artist?: string;
+	date?: string;
+	width?: number;
+	height?: number;
+	loading?: 'eager' | 'lazy';
+	children?: ReactNode;
+	className?: string;
+}
+
+export const PlateImage = ({
+	src,
+	alt,
+	figure,
+	title,
+	artist,
+	date,
+	width,
+	height,
+	loading = 'lazy',
+	children,
+	className,
+}: PlateImageProps) => {
+	const captionParts = [title, artist, date].filter(Boolean);
+	return (
+		<figure className={className}>
+			<div className="border border-ink/15 bg-paper-mid p-3">
+				{children ?? (
+					<img
+						src={src}
+						alt={alt}
+						width={width}
+						height={height}
+						loading={loading}
+						className="block h-auto w-full outline outline-1 outline-ink/10"
+					/>
+				)}
+			</div>
+			{captionParts.length > 0 ? (
+				<figcaption className={`${CAPTION_CLASS} mt-4`}>
+					{figure ? <span className="font-medium text-ink-soft">{figure} — </span> : null}
+					{captionParts.join(' · ')}
+				</figcaption>
+			) : null}
+		</figure>
+	);
+};
diff --git a/website/src/components/marketing/editorial/Rule.tsx b/website/src/components/marketing/editorial/Rule.tsx
new file mode 100644
index 0000000000..58514bbef7
--- /dev/null
+++ b/website/src/components/marketing/editorial/Rule.tsx
@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import { EYEBROW_CLASS } from '../typography';
+
+// Hairline section divider. Sections separate with rules rather than
+// background alternation; background shifts are reserved for ink panels and
+// paper-deep bands. Hook-free.
+export const Rule = ({ className }: { className?: string }) => (
+	<hr className={`h-px border-0 bg-ink/10 ${className ?? ''}`} />
+);
+
+// Centered catalog label between two hairlines.
+export const RuleLabeled = ({ label, className }: { label: ReactNode; className?: string }) => (
+	<div className={`flex items-center gap-5 ${className ?? ''}`} role="separator">
+		<span aria-hidden="true" className="h-px flex-1 bg-ink/10" />
+		<span className={EYEBROW_CLASS}>{label}</span>
+		<span aria-hidden="true" className="h-px flex-1 bg-ink/10" />
+	</div>
+);
diff --git a/website/src/components/marketing/glowPill.ts b/website/src/components/marketing/glowPill.ts
new file mode 100644
index 0000000000..633715bac4
--- /dev/null
+++ b/website/src/components/marketing/glowPill.ts
@@ -0,0 +1,18 @@
+import type { MouseEvent } from 'react';
+
+// Structural classes a porcelain pill needs for the cursor-following border
+// glow: `relative` anchors the ::after, and `glow-pill` owns the ::after (see
+// main.css) which lights ONLY the pill's border ring as the cursor moves. No
+// `overflow-hidden` here — it would clip the border-aligned ring. Append to a
+// pill's existing className.
+export const GLOW_PILL_CLASS = 'glow-pill relative';
+
+// Feeds the pointer position (relative to the hovered pill) into the
+// --pill-x / --pill-y custom properties the .glow-pill ::after reads. Mirrors
+// the changelog pill handler; no rAF needed since it only fires on the small
+// hovered element.
+export const handleGlowPillMouseMove = (event: MouseEvent<HTMLElement>) => {
+	const rect = event.currentTarget.getBoundingClientRect();
+	event.currentTarget.style.setProperty('--pill-x', `${event.clientX - rect.left}px`);
+	event.currentTarget.style.setProperty('--pill-y', `${event.clientY - rect.top}px`);
+};
diff --git a/website/src/components/marketing/motion.tsx b/website/src/components/marketing/motion.tsx
new file mode 100644
index 0000000000..7dba25aeae
--- /dev/null
+++ b/website/src/components/marketing/motion.tsx
@@ -0,0 +1,87 @@
+'use client';
+
+import { motion, useReducedMotion } from 'framer-motion';
+import type { ReactNode } from 'react';
+
+// The marketing motion vocabulary. Every scroll reveal on marketing pages
+// goes through Reveal or RevealGroup so timing stays consistent site-wide.
+
+export const EASE = [0.22, 1, 0.36, 1] as const;
+
+export const DURATION = {
+	fast: 0.25,
+	base: 0.55,
+	slow: 0.8,
+} as const;
+
+export const RISE = 14;
+
+export const VIEWPORT = { once: true, margin: '-10% 0px' } as const;
+
+interface RevealProps {
+	children: ReactNode;
+	delay?: number;
+	className?: string;
+}
+
+// Fade-rise on scroll into view. Degrades to a quick opacity fade under
+// reduced motion.
+export const Reveal = ({ children, delay = 0, className }: RevealProps) => {
+	const reducedMotion = useReducedMotion();
+	return (
+		<motion.div
+			className={className}
+			initial={reducedMotion ? { opacity: 0 } : { opacity: 0, y: RISE }}
+			whileInView={reducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
+			viewport={VIEWPORT}
+			transition={{
+				duration: reducedMotion ? 0.2 : DURATION.base,
+				delay,
+				ease: [...EASE],
+			}}
+		>
+			{children}
+		</motion.div>
+	);
+};
+
+interface RevealGroupProps {
+	children: ReactNode;
+	stagger?: number;
+	className?: string;
+}
+
+// Container that staggers its direct RevealChild children.
+export const RevealGroup = ({ children, stagger = 0.07, className }: RevealGroupProps) => (
+	<motion.div
+		className={className}
+		initial="hidden"
+		whileInView="visible"
+		viewport={VIEWPORT}
+		variants={{
+			hidden: {},
+			visible: { transition: { staggerChildren: stagger } },
+		}}
+	>
+		{children}
+	</motion.div>
+);
+
+export const RevealChild = ({ children, className }: { children: ReactNode; className?: string }) => {
+	const reducedMotion = useReducedMotion();
+	return (
+		<motion.div
+			className={className}
+			variants={{
+				hidden: reducedMotion ? { opacity: 0 } : { opacity: 0, y: RISE },
+				visible: {
+					opacity: 1,
+					y: 0,
+					transition: { duration: reducedMotion ? 0.2 : DURATION.base, ease: [...EASE] },
+				},
+			}}
+		>
+			{children}
+		</motion.div>
+	);
+};
diff --git a/website/src/components/marketing/pricing/PricingPageClient.tsx b/website/src/components/marketing/pricing/PricingPageClient.tsx
index e2c596e217..c96850776b 100644
--- a/website/src/components/marketing/pricing/PricingPageClient.tsx
+++ b/website/src/components/marketing/pricing/PricingPageClient.tsx
@@ -1,354 +1,107 @@
 "use client";
 
-import React, { useState } from 'react';
+import { useState } from 'react';
 import {
-  Terminal,
-  Globe,
   ArrowRight,
-  Box,
   Check,
   Server,
   Cloud,
-  Activity,
-  CreditCard,
-  Command,
-  Network,
-  HardDrive,
-  Laptop
+  Cpu,
+  MemoryStick,
+  Clock
 } from 'lucide-react';
+import { AnimatePresence, motion } from 'framer-motion';
 import rivetLogoWhite from '@/images/rivet-logos/icon-white.svg';
 import imgYC from '@/images/logos/yc.svg';
 import imgA16z from '@/images/logos/a16z.svg';
+import { SECTION_H2_CLASS, SUBTITLE_CLASS } from '@/components/marketing/typography';
+import { InkPanel } from '@/components/marketing/editorial/InkPanel';
 
 // --- Page Sections ---
 
-const Hero = () => (
-  <section className="relative overflow-hidden pb-20 pt-32 md:pb-32 md:pt-48">
-    <div className="mx-auto max-w-7xl px-6">
-      <div className="flex flex-col items-center text-center">
-        <div className="max-w-3xl mb-16">
-          <h1 className="mb-6 text-4xl font-normal leading-[1.1] tracking-tight text-white md:text-6xl">
-            Rivet Cloud
-          </h1>
-
-          <p className="mx-auto mb-8 max-w-2xl text-base leading-relaxed text-zinc-500">
-             Rivet sits between your clients and your infrastructure. We manage the persistent connections, global routing, and actor state orchestrating your logic wherever it runs.
-          </p>
-
-          <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
-            <a href="https://dashboard.rivet.dev"
-              className="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-white px-4 py-2 text-sm font-medium text-black transition-colors hover:bg-zinc-200 w-full sm:w-auto"
-            >
-              Get Started for Free
-              <ArrowRight className="h-4 w-4" />
-            </a>
-            <button
-              onClick={() => document.getElementById('pricing')?.scrollIntoView({ behavior: 'smooth' })}
-              className="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border border-white/10 px-4 py-2 text-sm text-zinc-300 transition-colors hover:border-white/20 hover:text-white w-full sm:w-auto"
-            >
-              <CreditCard className="h-4 w-4" />
-              See Pricing
-            </button>
-          </div>
-        </div>
-
-        {/* Main Diagram Container */}
-        <div className="flex flex-col lg:flex-row items-center justify-center w-full">
-             
-             {/* 1. Source: Clients */}
-             <div className="w-full max-w-[280px] p-6 rounded-2xl bg-zinc-900/50 border border-white/10 flex flex-col items-center text-center z-20 relative group hover:border-white/20 transition-colors">
-                 <Laptop className="w-8 h-8 text-zinc-400 mb-4" />
-                 <h3 className="text-white font-medium mb-1">Any Client</h3>
-                 <p className="text-xs text-zinc-500">Web • Mobile • Console • CLI</p>
-             </div>
-
-             {/* Connection Line 1 - SVG style matching connection 2 */}
-             <div className="relative flex-col lg:flex-row flex items-center justify-center -my-1 lg:my-0 z-0">
-                 {/* Desktop Horizontal Line */}
-                 <svg className="hidden lg:block w-20 h-[2px]" viewBox="0 0 80 2" fill="none" style={{ overflow: 'visible' }}>
-                    <defs>
-                      <linearGradient id="glowGradH1" gradientUnits="userSpaceOnUse" x1="0" y1="1" x2="80" y2="1">
-                        <stop offset="0%" stopColor="#71717a" stopOpacity="0" />
-                        <stop offset="50%" stopColor="#71717a" stopOpacity="1" />
-                        <stop offset="100%" stopColor="#71717a" stopOpacity="0" />
-                      </linearGradient>
-                      <filter id="glowH1" x="-50%" y="-500%" width="200%" height="1100%">
-                        <feGaussianBlur stdDeviation="3" result="blur" />
-                        <feMerge>
-                          <feMergeNode in="blur" />
-                          <feMergeNode in="SourceGraphic" />
-                        </feMerge>
-                      </filter>
-                    </defs>
-                    {/* Base line */}
-                    <line x1="0" y1="1" x2="80" y2="1" stroke="#27272a" strokeWidth="2" />
-                    {/* Animated glow segment */}
-                    <line x1="0" y1="1" x2="80" y2="1" stroke="url(#glowGradH1)" strokeWidth="2" filter="url(#glowH1)"
-                      strokeDasharray="30 80" strokeDashoffset="30">
-                      <animate attributeName="stroke-dashoffset" values="30;-80" dur="2s" repeatCount="indefinite" calcMode="linear" />
-                    </line>
-                 </svg>
-                 {/* Mobile Vertical Line */}
-                 <svg className="block lg:hidden w-[20px] h-16" viewBox="0 0 20 64" fill="none" style={{ overflow: 'visible' }}>
-                    <defs>
-                      <linearGradient id="glowGradV1" gradientUnits="userSpaceOnUse" x1="10" y1="0" x2="10" y2="64">
-                        <stop offset="0%" stopColor="#71717a" stopOpacity="0" />
-                        <stop offset="50%" stopColor="#71717a" stopOpacity="1" />
-                        <stop offset="100%" stopColor="#71717a" stopOpacity="0" />
-                      </linearGradient>
-                      <filter id="glowV1" x="-50%" y="-50%" width="200%" height="200%">
-                        <feGaussianBlur stdDeviation="3" result="blur" />
-                        <feMerge>
-                          <feMergeNode in="blur" />
-                          <feMergeNode in="SourceGraphic" />
-                        </feMerge>
-                      </filter>
-                    </defs>
-                    {/* Base line */}
-                    <line x1="10" y1="0" x2="10" y2="64" stroke="#27272a" strokeWidth="2" />
-                    {/* Animated glow segment */}
-                    <line x1="10" y1="0" x2="10" y2="64" stroke="url(#glowGradV1)" strokeWidth="2" filter="url(#glowV1)"
-                      strokeDasharray="20 64" strokeDashoffset="20">
-                      <animate attributeName="stroke-dashoffset" values="20;-64" dur="2s" repeatCount="indefinite" calcMode="linear" />
-                    </line>
-                 </svg>
-             </div>
-
-             {/* 2. The Gateway: Rivet */}
-             <div className="w-full max-w-[320px] p-6 rounded-2xl bg-zinc-900/50 border border-white/10 flex flex-col items-center text-center z-20 relative">
-                 <img src={rivetLogoWhite.src} alt="Rivet" className="w-8 h-8 mb-4" />
-                 <h3 className="text-xl font-medium text-white mb-2">Rivet Cloud</h3>
-                 <p className="text-xs text-zinc-500">Gateway & Orchestrator</p>
-             </div>
-
-             {/* Connection Line 2 - The Branching System with curved paths */}
-             <div className="relative flex-col lg:flex-row flex items-center justify-center z-0 w-full lg:w-auto">
-
-                 {/* Desktop: SVG curved connector with glowing lines */}
-                 <svg className="hidden lg:block w-24 h-[260px]" viewBox="0 0 96 260" fill="none" style={{ overflow: 'visible' }}>
-                    <defs>
-                      <linearGradient id="glowGradH2" gradientUnits="userSpaceOnUse" x1="0" y1="130" x2="96" y2="130">
-                        <stop offset="0%" stopColor="#71717a" stopOpacity="0" />
-                        <stop offset="50%" stopColor="#71717a" stopOpacity="1" />
-                        <stop offset="100%" stopColor="#71717a" stopOpacity="0" />
-                      </linearGradient>
-                      <filter id="glow2" x="-100%" y="-100%" width="300%" height="300%">
-                        <feGaussianBlur stdDeviation="3" result="blur" />
-                        <feMerge>
-                          <feMergeNode in="blur" />
-                          <feMergeNode in="SourceGraphic" />
-                        </feMerge>
-                      </filter>
-                    </defs>
-
-                    {/* Top curved path - base */}
-                    <path d="M 0 128 Q 48 128 96 44" stroke="#27272a" strokeWidth="2" fill="none" />
-                    {/* Top curved path - animated glow segment */}
-                    <path d="M 0 128 Q 48 128 96 44" stroke="url(#glowGradH2)" strokeWidth="2" fill="none" filter="url(#glow2)"
-                      strokeDasharray="30 130" strokeDashoffset="30">
-                      <animate attributeName="stroke-dashoffset" values="30;-130" dur="2s" repeatCount="indefinite" calcMode="linear" />
-                    </path>
-
-                    {/* Middle straight path - base */}
-                    <path d="M 0 130 L 96 130" stroke="#27272a" strokeWidth="2" fill="none" />
-                    {/* Middle straight path - animated glow segment */}
-                    <path d="M 0 130 L 96 130" stroke="url(#glowGradH2)" strokeWidth="2" fill="none" filter="url(#glow2)"
-                      strokeDasharray="30 96" strokeDashoffset="30">
-                      <animate attributeName="stroke-dashoffset" values="30;-96" dur="2s" repeatCount="indefinite" calcMode="linear" begin="0.3s" />
-                    </path>
-
-                    {/* Bottom curved path - base */}
-                    <path d="M 0 132 Q 48 132 96 216" stroke="#27272a" strokeWidth="2" fill="none" />
-                    {/* Bottom curved path - animated glow segment */}
-                    <path d="M 0 132 Q 48 132 96 216" stroke="url(#glowGradH2)" strokeWidth="2" fill="none" filter="url(#glow2)"
-                      strokeDasharray="30 130" strokeDashoffset="30">
-                      <animate attributeName="stroke-dashoffset" values="30;-130" dur="2s" repeatCount="indefinite" calcMode="linear" begin="0.6s" />
-                    </path>
-                 </svg>
-
-                 {/* Mobile: Vertical Line */}
-                 <svg className="block lg:hidden w-[20px] h-16" viewBox="0 0 20 64" fill="none" style={{ overflow: 'visible' }}>
-                    <defs>
-                      <linearGradient id="glowGradV2" gradientUnits="userSpaceOnUse" x1="10" y1="0" x2="10" y2="64">
-                        <stop offset="0%" stopColor="#71717a" stopOpacity="0" />
-                        <stop offset="50%" stopColor="#71717a" stopOpacity="1" />
-                        <stop offset="100%" stopColor="#71717a" stopOpacity="0" />
-                      </linearGradient>
-                      <filter id="glowV2" x="-50%" y="-50%" width="200%" height="200%">
-                        <feGaussianBlur stdDeviation="3" result="blur" />
-                        <feMerge>
-                          <feMergeNode in="blur" />
-                          <feMergeNode in="SourceGraphic" />
-                        </feMerge>
-                      </filter>
-                    </defs>
-                    {/* Base line */}
-                    <line x1="10" y1="0" x2="10" y2="64" stroke="#27272a" strokeWidth="2" />
-                    {/* Animated glow segment */}
-                    <line x1="10" y1="0" x2="10" y2="64" stroke="url(#glowGradV2)" strokeWidth="2" filter="url(#glowV2)"
-                      strokeDasharray="20 64" strokeDashoffset="20">
-                      <animate attributeName="stroke-dashoffset" values="20;-64" dur="2s" repeatCount="indefinite" calcMode="linear" begin="0.5s" />
-                    </line>
-                 </svg>
-             </div>
-
-             {/* 3. Destination: User Backend */}
-             <div className="w-full max-w-[280px] flex flex-col gap-4 relative z-20">
-                {/* 1. Docker */}
-                <div className="p-4 rounded-xl bg-zinc-900/50 border border-white/10 flex items-center gap-4 hover:border-white/20 transition-colors">
-                    <Server className="w-5 h-5 text-zinc-400" />
-                    <div>
-                        <div className="text-sm font-medium text-white">Docker Containers</div>
-                        <div className="text-[10px] text-zinc-500 font-mono">AWS ECS • Kubernetes</div>
-                    </div>
-                </div>
-
-                {/* 2. Serverless */}
-                <div className="p-4 rounded-xl bg-zinc-900/50 border border-white/10 flex items-center gap-4 hover:border-white/20 transition-colors">
-                    <Cloud className="w-5 h-5 text-zinc-400" />
-                    <div>
-                        <div className="text-sm font-medium text-white">Serverless Functions</div>
-                        <div className="text-[10px] text-zinc-500 font-mono">Vercel • Cloudflare</div>
-                    </div>
-                </div>
-
-                {/* 3. Dedicated */}
-                <div className="p-4 rounded-xl bg-zinc-900/50 border border-white/10 flex items-center gap-4 hover:border-white/20 transition-colors">
-                    <Terminal className="w-5 h-5 text-zinc-400" />
-                    <div>
-                        <div className="text-sm font-medium text-white">Dedicated Servers</div>
-                        <div className="text-[10px] text-zinc-500 font-mono">Bare Metal • EC2</div>
-                    </div>
-                </div>
-             </div>
-
-          </div>
-
-      </div>
-    </div>
-  </section>
-);
-
-
-const CloudFeatures = () => {
-    const features = [
-        { title: "Orchestration", desc: "The control plane handles actor placement, lifecycle management, and health checks across your cluster automatically.", icon: Command },
-        { title: "Managed Persistence", desc: "State is persisted with strict serializability using FoundationDB, ensuring global consistency without the ops burden.", icon: HardDrive },
-        { title: "Multi-Region", desc: "Deploy actors across regions worldwide. Compute and state live together at the edge, delivering ultra-low latency responses.", icon: Globe },
-        { title: "Bring Your Own Compute", desc: "Run your business logic on AWS, Vercel, Railway, or bare metal. Rivet connects them all into a unified platform.", icon: Network },
-        { title: "Serverless & Containers", desc: "Works with your serverless or container deployments, giving you the flexibility to choose the best runtime for your workload.", icon: Box },
-        { title: "Observability", desc: "Live state inspection, event monitoring, network inspector, and REPL for debugging and monitoring actors.", icon: Activity }
-    ];
-
-    return (
-        <section className="border-t border-white/10 py-48">
-            <div className="mx-auto max-w-7xl px-6">
-                <div className="flex flex-col gap-12">
-                    <div className="max-w-xl">
-                        <h2 className="mb-2 text-2xl font-normal tracking-tight text-white md:text-4xl">Platform Features</h2>
-                        <p className="text-base leading-relaxed text-zinc-500">Everything you need to run stateful workloads in production.</p>
-                    </div>
-                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-                        {features.map((f, i) => (
-                            <div key={i} className="border-t border-white/10 pt-6">
-                                <div className="mb-3 text-zinc-500">
-                                    <f.icon className="h-4 w-4" />
-                                </div>
-                                <h3 className="mb-1 text-sm font-normal text-white">{f.title}</h3>
-                                <p className="text-sm leading-relaxed text-zinc-500">{f.desc}</p>
-                            </div>
-                        ))}
-                    </div>
-                </div>
-            </div>
-        </section>
-    );
-}
-
 const SelfHostingComparison = () => {
+  const cloudSpecs = [
+    { label: 'Scaling', value: 'Managed' },
+    { label: 'Database', value: 'FoundationDB' },
+    { label: 'Networking', value: 'Global Mesh' },
+    { label: 'Updates', value: 'Automatic' },
+  ];
+
+  const selfHostedSpecs = [
+    { label: 'Scaling', value: 'You Manage' },
+    { label: 'Database', value: 'BYO (postgres or filesystem)' },
+    { label: 'Networking', value: 'Manual VPC' },
+    { label: 'Updates', value: 'Manual' },
+  ];
+
   return (
-    <section className="border-t border-white/10 py-48">
+    <section className="border-t border-ink/10 py-16 md:py-32">
       <div className="mx-auto max-w-7xl px-6">
         <div className="flex flex-col gap-12">
           <div className="max-w-xl">
-            <h2 className="mb-2 text-2xl font-normal tracking-tight text-white md:text-4xl">Compare Deployment Models</h2>
-            <p className="text-base leading-relaxed text-zinc-500">
-                Rivet is open source. Run it yourself for total control, or use Rivet Cloud for a hands-off experience.
+            <h2 className={`mb-2 ${SECTION_H2_CLASS}`}>Compare Deployment Models</h2>
+            <p className={SUBTITLE_CLASS}>
+                Rivet is open source. Use Rivet Cloud for managed infrastructure, or self-host in your VPC, your customers' environments, or air-gapped networks.
             </p>
           </div>
 
-          <div className="grid md:grid-cols-2 gap-8">
+          <div className="grid gap-8 md:grid-cols-2">
               {/* Rivet Cloud Card */}
-              <div className="rounded-lg border border-[#FF4500]/20 bg-black p-8 flex flex-col">
+              <div className="flex flex-col border border-ink/10 bg-white/55 p-7">
                   <div className="mb-6 flex items-center gap-3">
-                       <img src={rivetLogoWhite.src} alt="Rivet" className="h-10 w-10" />
-                       <h3 className="text-lg font-normal text-white">Rivet Cloud</h3>
+                       <img src={rivetLogoWhite.src} alt="Rivet" className="h-9 w-9 invert" />
+                       <h3 className="text-lg font-medium text-ink">Rivet Cloud</h3>
                   </div>
-                  <p className="text-sm leading-relaxed text-zinc-400 mb-8">
+                  <p className="mb-8 text-sm leading-relaxed text-ink-soft">
                       Managed cloud solution for personal projects to enterprise.
                   </p>
 
-                  <div className="space-y-4 flex-grow font-mono text-sm">
-                      <div className="flex items-center justify-between py-3 border-b border-white/5">
-                          <span className="text-zinc-500">Scaling</span>
-                          <span className="text-white">Managed</span>
-                      </div>
-                      <div className="flex items-center justify-between py-3 border-b border-white/5">
-                          <span className="text-zinc-500">Database</span>
-                          <span className="text-white">FoundationDB</span>
-                      </div>
-                      <div className="flex items-center justify-between py-3 border-b border-white/5">
-                          <span className="text-zinc-500">Networking</span>
-                          <span className="text-white">Global Mesh</span>
-                      </div>
-                       <div className="flex items-center justify-between py-3 border-b border-white/5">
-                          <span className="text-zinc-500">Updates</span>
-                          <span className="text-white">Automatic</span>
-                      </div>
+                  <div className="flex-grow font-mono text-sm">
+                      {cloudSpecs.map(({ label, value }) => (
+                          <div key={label} className="flex items-center justify-between gap-4 border-b border-ink/10 py-3.5">
+                              <span className="text-[11px] uppercase tracking-[0.16em] text-ink-faint">{label}</span>
+                              <span className="text-right text-ink">{value}</span>
+                          </div>
+                      ))}
                   </div>
 
                   <a href="https://dashboard.rivet.dev"
-                      className="mt-8 w-full rounded-md bg-white py-3 text-center text-sm font-medium text-black transition-colors hover:bg-zinc-200"
+                      className="mt-8 w-full rounded-md bg-ink py-3 text-center text-sm font-medium text-cream transition-colors hover:bg-ink/85"
                   >
                       Get Started
                   </a>
               </div>
 
-              {/* Open Source Card */}
-              <div className="rounded-lg border border-white/10 bg-black p-8 flex flex-col">
-                  <div className="mb-6 flex items-center gap-3">
-                       <Server className="h-6 w-6 text-zinc-500" />
-                       <h3 className="text-lg font-normal text-white">Open Source</h3>
-                  </div>
-                  <p className="text-sm leading-relaxed text-zinc-500 mb-8">
-                      Maximum control for air-gapped environments or specific compliance requirements.
-                  </p>
-
-                  <div className="space-y-4 flex-grow font-mono text-sm">
-                      <div className="flex items-center justify-between py-3 border-b border-white/5">
-                          <span className="text-zinc-500">Scaling</span>
-                          <span className="text-zinc-300">You Manage</span>
-                      </div>
-                      <div className="flex items-center justify-between py-3 border-b border-white/5">
-                          <span className="text-zinc-500">Database</span>
-                          <span className="text-zinc-300">BYO (postgres or filesystem)</span>
+              {/* Self-Hosted Card */}
+              <InkPanel className="flex flex-col [&>div:first-child]:flex-grow">
+                  <div className="flex h-full flex-col p-7">
+                      <div className="mb-6 flex items-center gap-3">
+                           <Server className="h-6 w-6 text-cream" />
+                           <h3 className="text-lg font-medium text-cream">Self-Hosted</h3>
                       </div>
-                      <div className="flex items-center justify-between py-3 border-b border-white/5">
-                          <span className="text-zinc-500">Networking</span>
-                          <span className="text-zinc-300">Manual VPC</span>
+                      <p className="mb-8 text-sm leading-relaxed text-cream/60">
+                          Maximum control for air-gapped environments and regulated workloads. Deploy inside the boundary your existing controls already cover.
+                      </p>
+
+                      <div className="flex-grow font-mono text-sm">
+                          {selfHostedSpecs.map(({ label, value }) => (
+                              <div key={label} className="flex items-center justify-between gap-4 border-b border-cream/10 py-3.5">
+                                  <span className="text-[11px] uppercase tracking-[0.16em] text-cream/50">{label}</span>
+                                  <span className="text-right text-cream">{value}</span>
+                              </div>
+                          ))}
                       </div>
-                      <div className="flex items-center justify-between py-3 border-b border-white/5">
-                          <span className="text-zinc-500">Updates</span>
-                          <span className="text-zinc-300">Manual</span>
-                      </div>
-                  </div>
 
-                  <a href="https://github.com/rivet-dev/rivet"
-                      className="mt-8 w-full rounded-md border border-white/10 py-3 text-center text-sm text-zinc-300 transition-colors hover:border-white/20 hover:text-white"
-                  >
-                      View on Github
-                  </a>
-              </div>
+                      <a href="https://github.com/rivet-dev/rivet"
+                          className="mt-8 w-full rounded-md border border-cream/20 py-3 text-center text-sm text-cream/85 transition-colors hover:border-cream/40 hover:text-cream"
+                      >
+                          View on GitHub
+                      </a>
+                      <p className="mt-4 text-center text-xs text-cream/50">
+                          High-touch deployment? <a href="/enterprise" className="text-cream/80 transition-colors hover:text-cream">Rivet for Enterprise</a>
+                      </p>
+                  </div>
+              </InkPanel>
           </div>
         </div>
       </div>
@@ -358,11 +111,13 @@ const SelfHostingComparison = () => {
 
 const ComparisonTable = () => {
     const features = [
-      { name: "Awake Actor Hours", free: "100,000", hobby: "400,000", team: "400,000", ent: "Custom" },
-      { name: "Storage", free: "5GB", hobby: "5GB", team: "5GB", ent: "Custom" },
-      { name: "Reads / mo", free: "200 Million", hobby: "25 Billion", team: "25 Billion", ent: "Custom" },
-      { name: "Writes / mo", free: "5 Million", hobby: "50 Million", team: "50 Million", ent: "Custom" },
-      { name: "Egress", free: "100GB", hobby: "1TB", team: "1TB", ent: "Custom" },
+      { name: "Awake Actor Hours", free: "100,000 max", hobby: "400,000 included", team: "400,000 included", ent: "Custom" },
+      { name: "Compute", free: "$5 max", hobby: "Usage-based", team: "Usage-based", ent: "Custom" },
+      { name: "Max vCPU", free: "1", hobby: "8", team: "8", ent: "Custom" },
+      { name: "Storage", free: "5GB max", hobby: "5GB included", team: "5GB included", ent: "Custom" },
+      { name: "Reads / mo", free: "200 Million max", hobby: "25 Billion included", team: "25 Billion included", ent: "Custom" },
+      { name: "Writes / mo", free: "5 Million max", hobby: "50 Million included", team: "50 Million included", ent: "Custom" },
+      { name: "Egress", free: "100GB max", hobby: "1TB included", team: "1TB included", ent: "Custom" },
       { name: "Support", free: "Community", hobby: "Email", team: "Slack & Email", ent: "Slack & Email" },
       { name: "MFA", free: false, hobby: false, team: true, ent: true },
       { name: "Custom Regions", free: false, hobby: false, team: false, ent: true },
@@ -376,30 +131,30 @@ const ComparisonTable = () => {
     const renderCell = (value) => {
       if (typeof value === 'boolean') {
         return value ?
-          <div className="flex justify-center"><Check className="h-4 w-4 text-[#FF4500]" /></div> :
-          <div className="flex justify-center"><div className="h-1.5 w-1.5 rounded-full bg-zinc-700" /></div>;
+          <div className="flex justify-center"><Check className="h-4 w-4 text-pine" /></div> :
+          <div className="flex justify-center"><div className="h-1.5 w-1.5 rounded-full bg-ink/20" /></div>;
       }
-      return <span className="text-sm text-zinc-300">{value}</span>;
+      return <span className="text-sm text-ink-soft">{value}</span>;
     };
 
     return (
-        <div className="mt-24 border-t border-white/10 pt-16">
-            <h3 className="mb-12 text-2xl font-normal tracking-tight text-white">Compare Plans</h3>
+        <div className="mt-24 border-t border-ink/10 pt-16">
+            <h3 className="mb-12 text-2xl font-medium tracking-[-0.015em] text-ink">Compare Plans</h3>
             <div className="overflow-x-auto">
                 <table className="w-full min-w-[800px] border-collapse">
                     <thead>
-                        <tr className="border-b border-white/10">
-                            <th className="p-4 text-left text-sm font-medium uppercase tracking-wider text-zinc-500 w-1/4">Feature</th>
-                            <th className="p-4 text-center text-sm font-medium text-white w-[18%]">Free</th>
-                            <th className="p-4 text-center text-sm font-medium text-[#FF4500] w-[18%]">Hobby</th>
-                            <th className="p-4 text-center text-sm font-medium text-white w-[18%]">Team</th>
-                            <th className="p-4 text-center text-sm font-medium text-white w-[18%]">Enterprise</th>
+                        <tr className="border-b border-ink/15">
+                            <th className="w-1/4 p-4 text-left font-mono text-[11px] font-medium uppercase tracking-[0.16em] text-ink-faint">Feature</th>
+                            <th className="w-[18%] p-4 text-center text-sm font-medium text-ink">Free</th>
+                            <th className="w-[18%] p-4 text-center text-sm font-medium text-pine">Hobby</th>
+                            <th className="w-[18%] p-4 text-center text-sm font-medium text-ink">Team</th>
+                            <th className="w-[18%] p-4 text-center text-sm font-medium text-ink">Enterprise</th>
                         </tr>
                     </thead>
                     <tbody>
                         {features.map((feature, i) => (
-                            <tr key={i} className="border-b border-white/5">
-                                <td className="p-4 text-sm text-zinc-400">{feature.name}</td>
+                            <tr key={i} className="border-b border-ink/10">
+                                <td className="p-4 text-sm text-ink-soft">{feature.name}</td>
                                 <td className="p-4 text-center">{renderCell(feature.free)}</td>
                                 <td className="p-4 text-center">{renderCell(feature.hobby)}</td>
                                 <td className="p-4 text-center">{renderCell(feature.team)}</td>
@@ -409,14 +164,175 @@ const ComparisonTable = () => {
                     </tbody>
                 </table>
             </div>
+            <p className="mt-6 text-xs text-ink-faint">
+                Free plan values are hard monthly limits. Hobby and Team include the listed amounts, then bill per usage; paid compute has no included amount and is billed per usage.
+            </p>
         </div>
     );
   };
 
+// Rivet Compute pricing. Cost is billed per active second based on each actor's
+// configured CPU and memory:
+//   cost = active_seconds × (vcpus × CPU_PER_VCPU_SECOND + memory_gib × MEMORY_PER_GIB_SECOND)
+// One vCPU is half a physical core. The Free plan is limited to 1 vCPU; paid plans
+// allow up to 8 vCPU.
+const COMPUTE = {
+    cpuPerVcpuSecond: 0.000033,
+    memoryPerGibSecond: 0.0000029,
+    maxVcpu: 8,
+    freeMaxVcpu: 1,
+};
+
+// Valid compute shapes. vCPU is continuous from 0.08 to 1, then exactly 2, 4,
+// or 8. Memory ranges from 128 MiB to 4096 MiB (4 GiB).
+const VCPU_STEPS = [0.08, 0.25, 0.5, 1, 2, 4, 8];
+const MEMORY_STEPS = [128, 256, 512, 1024, 2048, 4096]; // MiB
+
+const usd = (n: number, decimals = 2) =>
+    `$${n.toLocaleString("en-US", { minimumFractionDigits: decimals, maximumFractionDigits: decimals })}`;
+
+const ComputeCalculator = () => {
+    const [vcpuIdx, setVcpuIdx] = useState(3); // 1 vCPU
+    const [memIdx, setMemIdx] = useState(2); // 512 MiB
+    const [hours, setHours] = useState(100);
+
+    const vcpus = VCPU_STEPS[vcpuIdx];
+    const memoryMib = MEMORY_STEPS[memIdx];
+    const cpuPerSec = vcpus * COMPUTE.cpuPerVcpuSecond;
+    const memPerSec = (memoryMib / 1024) * COMPUTE.memoryPerGibSecond;
+    const perSecond = cpuPerSec + memPerSec;
+    const monthly = perSecond * hours * 3600;
+
+    const memLabel = memoryMib >= 1024 ? `${memoryMib / 1024} GiB` : `${memoryMib} MiB`;
+
+    return (
+        <div className="border-t border-ink/10 pt-16">
+            <h3 className="mb-3 text-2xl font-medium tracking-[-0.015em] text-ink">Estimate your compute</h3>
+            <p className="mb-8 max-w-2xl text-base leading-relaxed text-ink-soft">
+                Run your actors and applications on Rivet Compute and pay only for the seconds they are active.
+                Costs scale with the CPU and memory you configure.
+            </p>
+
+            <div className="grid gap-6 lg:grid-cols-2">
+                {/* Controls sit on porcelain: this is interactive input UI. */}
+                <div className="space-y-8 border border-ink/10 bg-white/55 p-8">
+                    {/* vCPU */}
+                    <div>
+                        <div className="mb-3 flex items-center justify-between">
+                            <span className="flex items-center gap-2 text-sm text-ink-soft">
+                                <Cpu className="h-4 w-4 text-ink-faint" /> vCPU
+                            </span>
+                            <span className="font-mono text-sm text-ink">{vcpus}</span>
+                        </div>
+                        <input
+                            type="range"
+                            min={0}
+                            max={VCPU_STEPS.length - 1}
+                            step={1}
+                            value={vcpuIdx}
+                            onChange={(e) => setVcpuIdx(Number(e.target.value))}
+                            className="w-full accent-pine"
+                        />
+                        <p className="mt-2 text-xs text-ink-faint">
+                            1 vCPU = half a physical core. 0.08–1 vCPU, or exactly 2, 4, or 8.
+                        </p>
+                    </div>
+
+                    {/* Memory */}
+                    <div>
+                        <div className="mb-3 flex items-center justify-between">
+                            <span className="flex items-center gap-2 text-sm text-ink-soft">
+                                <MemoryStick className="h-4 w-4 text-ink-faint" /> Memory
+                            </span>
+                            <span className="font-mono text-sm text-ink">{memLabel}</span>
+                        </div>
+                        <input
+                            type="range"
+                            min={0}
+                            max={MEMORY_STEPS.length - 1}
+                            step={1}
+                            value={memIdx}
+                            onChange={(e) => setMemIdx(Number(e.target.value))}
+                            className="w-full accent-pine"
+                        />
+                        <p className="mt-2 text-xs text-ink-faint">
+                            128 MiB to 4 GiB.
+                        </p>
+                    </div>
+
+                    {/* Active time */}
+                    <div>
+                        <div className="mb-3 flex items-center justify-between">
+                            <span className="flex items-center gap-2 text-sm text-ink-soft">
+                                <Clock className="h-4 w-4 text-ink-faint" /> Active hours / month
+                            </span>
+                            <span className="font-mono text-sm text-ink">{hours >= 730 ? "Always on" : `${hours} h`}</span>
+                        </div>
+                        <input
+                            type="range"
+                            min={1}
+                            max={730}
+                            step={1}
+                            value={hours}
+                            onChange={(e) => setHours(Number(e.target.value))}
+                            className="w-full accent-pine"
+                        />
+                        <p className="mt-2 text-xs text-ink-faint">
+                            Sleeping actors are not billed for compute.
+                        </p>
+                    </div>
+                </div>
+
+                {/* Result is the data moment: render it on the ink plate so the
+                    estimate reads as output, mirroring the Self-Hosted panel. */}
+                <InkPanel className="flex flex-col p-8">
+                    <span className="font-mono text-[11px] font-medium uppercase tracking-[0.16em] text-sage">Estimated compute</span>
+                    <div className="mt-2 flex items-baseline gap-2">
+                        <span className="text-4xl font-medium tracking-[-0.015em] text-cream">{usd(monthly)}</span>
+                        <span className="font-mono text-xs text-cream/50">/mo</span>
+                    </div>
+
+                    <div className="mt-8 space-y-3 font-mono text-sm">
+                        <div className="flex items-center justify-between border-b border-cream/10 py-2">
+                            <span className="text-cream/50">CPU ({vcpus} vCPU)</span>
+                            <span className="text-cream/85">{usd(cpuPerSec * hours * 3600)}</span>
+                        </div>
+                        <div className="flex items-center justify-between border-b border-cream/10 py-2">
+                            <span className="text-cream/50">Memory ({memLabel})</span>
+                            <span className="text-cream/85">{usd(memPerSec * hours * 3600)}</span>
+                        </div>
+                        <div className="flex items-center justify-between py-2">
+                            <span className="text-cream/50">Rate</span>
+                            <span className="text-cream/85">{usd(perSecond, 7)}/s</span>
+                        </div>
+                    </div>
+
+                    <p className="mt-auto pt-8 text-xs leading-relaxed text-cream/50">
+                        Estimate only. Or bring your own compute and run your actors and applications on AWS, Vercel,
+                        Railway, or bare metal, paid directly to your provider.
+                    </p>
+                </InkPanel>
+            </div>
+        </div>
+    );
+};
+
+interface Plan {
+    name: string;
+    prefix?: string;
+    price: string;
+    period: string;
+    desc: string;
+    features: string[];
+    cta: string;
+    highlight: boolean;
+    inkHeader?: boolean;
+}
+
 const Pricing = () => {
     const [isCloud, setIsCloud] = useState(true);
 
-    const cloudPlans = [
+    const cloudPlans: Plan[] = [
         {
             name: "Free",
             price: "$0",
@@ -424,6 +340,8 @@ const Pricing = () => {
             desc: "For prototyping and small projects.",
             features: [
                 "100,000 Awake Actor Hours /mo limit",
+                "$5 /mo Compute limit",
+                "1 vCPU Max",
                 "5GB Limit",
                 "5 Million Writes /mo Limit",
                 "200 Million Reads /mo Limit",
@@ -441,6 +359,7 @@ const Pricing = () => {
             desc: "For scaling applications.",
             features: [
                 "400,000 Awake Actor Hours Included",
+                "Up to 8 vCPU",
                 "25 Billion Reads /mo included",
                 "50 Million Writes /mo included",
                 "5GB Storage included",
@@ -458,6 +377,7 @@ const Pricing = () => {
             desc: "For growing teams and businesses.",
             features: [
                 "400,000 Awake Actor Hours Included",
+                "Up to 8 vCPU",
                 "25 Billion Reads /mo included",
                 "50 Million Writes /mo included",
                 "5GB Storage included",
@@ -488,7 +408,7 @@ const Pricing = () => {
         }
     ];
 
-    const selfHostedPlans = [
+    const selfHostedPlans: Plan[] = [
         {
             name: "Open Source",
             price: "Free",
@@ -510,7 +430,7 @@ const Pricing = () => {
             period: "",
             desc: "Production self-host bundle for teams running Rivet inside their own VPC, customer environments, or regulated networks.",
             features: [
-                "Actor orchestration runtime",
+                "Actor orchestration engine",
                 "FoundationDB persistence layer",
                 "Cloud layer for multi-tenant",
                 "SQLite backup",
@@ -527,163 +447,217 @@ const Pricing = () => {
                 "Hardening guidance for FedRAMP, HIPAA, regulated industries"
             ],
             cta: "Contact Sales",
-            highlight: false
+            highlight: false,
+            inkHeader: true
         }
     ];
 
     const plans = isCloud ? cloudPlans : selfHostedPlans;
 
-    const usagePricing = [
+    const usagePricing: { resource: string; price: string; unit: string; prefix?: string }[] = [
         { resource: "Awake Actors", price: "$0.05", unit: "per 1k Awake Actor Hours" },
         { resource: "State Storage", price: "$0.40", unit: "per GB-month" },
         { resource: "Reads*", price: "$0.20", unit: "per million reads" },
         { resource: "Writes*", price: "$1", unit: "per million writes" },
         { resource: "Egress", price: "$0.15", unit: "per GB" },
-        { resource: "Compute", price: "BYO", unit: "Paid to your provider" },
+        { resource: "Compute", prefix: "From", price: "$0.0000330", unit: "per vCPU-second + $0.0000029/GiB-s" },
     ];
 
     return (
-        <section id="pricing" className="border-t border-white/10 py-48">
+        <section id="pricing" className="pb-16 pt-32 md:pb-32 md:pt-40">
             <div className="mx-auto max-w-7xl px-6">
                 <div className="flex flex-col gap-12">
                     <div className="flex flex-col items-center text-center">
-                        <h2 className="mb-2 text-2xl font-normal tracking-tight text-white md:text-4xl">
-                            {isCloud ? "Simple, predictable pricing" : "Run it where your data lives"}
-                        </h2>
-                        <p className="mb-6 max-w-xl text-base leading-relaxed text-zinc-500">
-                            {isCloud
-                                ? "Pay for coordination and state. Compute costs are billed directly by your chosen cloud provider."
-                                : "Deploy Rivet inside your VPC, your customer's environment, or fully air-gapped. Use the compliance posture you already have."
-                            }
-                        </p>
-
-                        {/* On-prem callout — visible whichever tier is selected */}
-                        <button
-                            onClick={() => setIsCloud(false)}
-                            className="mb-6 inline-flex items-center gap-2 rounded-full border border-[#FF4500]/20 bg-[#FF4500]/5 px-3 py-1.5 text-xs text-zinc-300 transition-colors hover:border-[#FF4500]/40 hover:text-white"
-                        >
-                            <Server className="h-3 w-3 text-[#FF4500]" />
-                            Need on-prem, air-gapped, or in your customer's VPC?
-                            <span className="text-[#FF4500]">Self-host →</span>
-                        </button>
-
-                        {/* Toggle */}
-                        <div className="inline-flex rounded-md border border-white/10 p-1">
-                            <button
-                                onClick={() => setIsCloud(true)}
-                                className={`flex items-center gap-2 rounded px-4 py-2 text-sm transition-all ${isCloud ? 'bg-white/10 text-white' : 'text-zinc-500 hover:text-zinc-300'}`}
+                        <AnimatePresence mode="wait" initial={false}>
+                            <motion.div
+                                key={isCloud ? 'cloud-copy' : 'self-hosted-copy'}
+                                initial={{ opacity: 0, y: 8 }}
+                                animate={{ opacity: 1, y: 0 }}
+                                exit={{ opacity: 0, y: -8 }}
+                                transition={{ duration: 0.2, ease: 'easeOut' }}
+                                className="flex flex-col items-center"
                             >
-                                <Cloud className="h-4 w-4" /> Cloud
-                            </button>
+                                <h2 className={`mb-2 ${SECTION_H2_CLASS}`}>
+                                    {isCloud ? "Simple, predictable pricing" : "Run it where your data lives"}
+                                </h2>
+                                <p className="mb-6 mt-2 max-w-xl text-base leading-relaxed text-ink-soft">
+                                    {isCloud
+                                        ? "Pay for coordination, state, and compute. Run your actors and applications on Rivet Compute, or bring your own and run them anywhere."
+                                        : "Deploy Rivet inside your VPC, your customer's environment, or fully air-gapped. Use the compliance posture you already have."
+                                    }
+                                </p>
+                            </motion.div>
+                        </AnimatePresence>
+
+                        {/* On-prem shortcut to the self-host tier. Hidden once
+                            Self-Hosted is selected, since you are already there. */}
+                        {isCloud && (
                             <button
                                 onClick={() => setIsCloud(false)}
-                                className={`flex items-center gap-2 rounded px-4 py-2 text-sm transition-all ${!isCloud ? 'bg-white/10 text-white' : 'text-zinc-500 hover:text-zinc-300'}`}
+                                className="mb-6 inline-flex items-center gap-2 rounded-full border border-pine/30 px-3 py-1.5 text-xs text-pine transition-colors hover:border-pine/60"
                             >
-                                <Server className="h-4 w-4" /> Self-Hosted
+                                <Server className="h-3 w-3" />
+                                Need on-prem, air-gapped, or in your customer's VPC?
+                                <span className="font-medium">Self-host →</span>
                             </button>
+                        )}
+
+                        {/* Toggle */}
+                        <div className="inline-flex rounded-lg border border-ink/15 bg-white/40 p-1">
+                            {[
+                                { cloud: true, label: 'Cloud', Icon: Cloud },
+                                { cloud: false, label: 'Self-Hosted', Icon: Server },
+                            ].map(({ cloud, label, Icon }) => {
+                                const active = isCloud === cloud;
+
+                                return (
+                                    <button
+                                        key={label}
+                                        type="button"
+                                        onClick={() => setIsCloud(cloud)}
+                                        aria-pressed={active}
+                                        className="relative flex items-center gap-2 rounded-md px-4 py-2 text-sm transition-colors"
+                                    >
+                                        {active ? (
+                                            <motion.span
+                                                layoutId="pricing-mode-active"
+                                                className="absolute inset-0 rounded-md bg-ink"
+                                                transition={{ type: 'spring', bounce: 0.2, duration: 0.4 }}
+                                            />
+                                        ) : null}
+                                        <span className={`relative z-10 flex items-center gap-2 ${active ? 'text-cream' : 'text-ink-soft hover:text-ink'}`}>
+                                            <Icon className="h-4 w-4" />
+                                            {label}
+                                        </span>
+                                    </button>
+                                );
+                            })}
                         </div>
                     </div>
 
-                    <div className={`grid gap-6 ${isCloud ? 'md:grid-cols-2 lg:grid-cols-4' : 'md:grid-cols-2 max-w-4xl mx-auto'}`}>
-                        {plans.map((plan, idx) => (
-                            <div
-                               key={idx}
-                               className={`flex flex-col rounded-lg border p-6 ${
-                                   plan.highlight
-                                   ? 'border-[#FF4500]/30 bg-black'
-                                   : 'border-white/10 bg-black'
-                               }`}
-                            >
-                                <div className="flex-grow flex flex-col">
-                                    <h3 className="text-lg font-normal text-white mb-2">{plan.name}</h3>
-
-                                    <div className="mb-6">
-                                        {plan.prefix && <span className="text-zinc-500 text-xs font-medium uppercase tracking-wider block mb-1">{plan.prefix}</span>}
-                                        <div className="flex items-baseline gap-1">
-                                            <span className="text-3xl font-normal tracking-tight text-white">{plan.price}</span>
-                                            {plan.period && <span className="ml-1 font-mono text-xs text-zinc-500">{plan.period}</span>}
-                                        </div>
-                                    </div>
+                    <AnimatePresence mode="wait" initial={false}>
+                        <motion.div
+                            key={isCloud ? 'cloud-pricing' : 'self-hosted-pricing'}
+                            initial={{ opacity: 0, y: 16 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            exit={{ opacity: 0, y: -16 }}
+                            transition={{ duration: 0.24, ease: 'easeOut' }}
+                            className="flex flex-col gap-12"
+                        >
+                            <div className={`grid gap-6 ${isCloud ? 'md:grid-cols-2 lg:grid-cols-4' : 'md:grid-cols-2 max-w-4xl mx-auto'}`}>
+                                {plans.map((plan, idx) => (
+                                    <div
+                                       key={idx}
+                                       className={`flex flex-col border bg-white/55 ${
+                                           plan.highlight ? 'border-pine/60' : 'border-ink/10'
+                                       }`}
+                                    >
+                                        {plan.inkHeader ? (
+                                            <div className="selection-paper flex items-center justify-between gap-4 bg-ink px-7 py-3">
+                                                <span className="text-sm font-medium text-cream">{plan.name}</span>
+                                                <span className="font-mono text-[11px] uppercase tracking-[0.16em] text-cream/60">Self-Hosted</span>
+                                            </div>
+                                        ) : null}
+                                        <div className="flex flex-grow flex-col p-7">
+                                            {!plan.inkHeader ? (
+                                                <h3 className="mb-2 text-lg font-medium text-ink">{plan.name}</h3>
+                                            ) : null}
+
+                                            <div className="mb-6">
+                                                {plan.prefix && <span className="mb-1 block font-mono text-[11px] uppercase tracking-[0.16em] text-ink-faint">{plan.prefix}</span>}
+                                                <div className="flex items-baseline gap-1">
+                                                    <span className="text-3xl font-medium tracking-[-0.015em] text-ink">{plan.price}</span>
+                                                    {plan.period && <span className="ml-1 font-mono text-xs text-ink-faint">{plan.period}</span>}
+                                                </div>
+                                            </div>
 
-                                    {plan.desc && <p className="mb-6 min-h-[2.5rem] text-sm leading-relaxed text-zinc-400">{plan.desc}</p>}
+                                            <div className="mb-6 h-px bg-ink/10" />
 
-                                    <div className="mb-8 space-y-3">
-                                        {plan.features.map((feat, i) => (
-                                            <div key={i} className="flex items-start gap-3 text-xs text-zinc-300">
-                                                <Check className={`mt-0.5 h-3 w-3 ${plan.highlight ? 'text-[#FF4500]' : 'text-zinc-500'}`} />
-                                                <span>{feat}</span>
+                                            {plan.desc && <p className="mb-6 min-h-[2.5rem] text-sm leading-relaxed text-ink-soft">{plan.desc}</p>}
+
+                                            <div className="mb-8 space-y-3">
+                                                {plan.features.map((feat, i) => (
+                                                    <div key={i} className="flex items-start gap-3 text-xs text-ink-soft">
+                                                        <Check className={`mt-0.5 h-3 w-3 flex-shrink-0 ${isCloud ? 'text-pine' : 'text-ink-soft'}`} />
+                                                        <span>{feat}</span>
+                                                    </div>
+                                                ))}
                                             </div>
-                                        ))}
-                                    </div>
-                                </div>
 
-                                <a href={plan.cta === "Contact Sales" || plan.name === "Enterprise" ? "/sales" : "https://dashboard.rivet.dev"}
-                                    className={`w-full rounded-md py-3 text-center text-sm font-medium transition-colors ${
-                                        plan.highlight
-                                        ? 'bg-white text-black hover:bg-zinc-200'
-                                        : 'border border-white/10 text-zinc-300 hover:border-white/20 hover:text-white'
-                                    }`}
-                                >
-                                    {plan.cta}
-                                </a>
+                                            <a href={plan.cta === "Contact Sales" || plan.name === "Enterprise" ? "/sales" : "https://dashboard.rivet.dev"}
+                                                className={`mt-auto w-full rounded-md py-3 text-center text-sm font-medium transition-colors ${
+                                                    plan.highlight
+                                                    ? 'bg-accent-deep text-white hover:bg-accent'
+                                                    : 'border border-ink/20 text-ink-soft hover:border-ink/40 hover:text-ink'
+                                                }`}
+                                            >
+                                                {plan.cta}
+                                            </a>
+                                        </div>
+                                    </div>
+                                ))}
                             </div>
-                        ))}
-                    </div>
 
-                    {/* YC & a16z Speedrun Callout */}
-                    {isCloud && (
-                        <div className="mt-12 rounded-lg border border-white/10 p-6">
-                            <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
-                                <div>
-                                    <p className="text-base text-white mb-2">Startup Deal: 50% off for 12 months</p>
-                                    <div className="flex flex-wrap items-center gap-2 text-sm text-zinc-500">
-                                        <span>For</span>
-                                        <div className="flex items-center gap-2 rounded-full border border-white/10 px-3 py-1.5 text-xs text-zinc-400">
-                                            <img src={imgYC.src} alt="Y Combinator" className="h-4 w-auto" />
-                                            <span>Y Combinator</span>
-                                        </div>
-                                        <span>and</span>
-                                        <div className="flex items-center gap-2 rounded-full border border-white/10 px-3 py-1.5 text-xs text-zinc-400">
-                                            <img src={imgA16z.src} alt="a16z" className="h-3 w-auto" />
-                                            <span>a16z Speedrun</span>
+                            {/* YC & a16z Speedrun Callout */}
+                            {isCloud && (
+                                <div className="rounded-lg border border-ink/10 bg-white/55 p-6">
+                                    <div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
+                                        <div>
+                                            <p className="mb-2 text-base font-medium text-ink">Startup Deal: 50% off for 12 months</p>
+                                            <div className="flex flex-wrap items-center gap-2 text-sm text-ink-soft">
+                                                <span>For</span>
+                                                <div className="flex items-center gap-2 rounded-full border border-ink/15 bg-white/55 px-3 py-1.5 text-xs text-ink-soft">
+                                                    <img src={imgYC.src} alt="Y Combinator" className="h-4 w-auto" />
+                                                    <span>Y Combinator</span>
+                                                </div>
+                                                <span>and</span>
+                                                <div className="flex items-center gap-2 rounded-full border border-ink/15 bg-white/55 px-3 py-1.5 text-xs text-ink-soft">
+                                                    <img src={imgA16z.src} alt="a16z" className="h-3 w-auto invert" />
+                                                    <span>a16z Speedrun</span>
+                                                </div>
+                                                <span>companies</span>
+                                            </div>
                                         </div>
-                                        <span>companies</span>
+                                        <a
+                                            href="/startups"
+                                            className="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border border-ink/20 px-4 py-2 text-sm text-ink-soft transition-colors hover:border-ink/40 hover:text-ink"
+                                        >
+                                            Claim the deal
+                                            <ArrowRight className="h-4 w-4" />
+                                        </a>
                                     </div>
                                 </div>
-                                <a
-                                    href="/startups"
-                                    className="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border border-white/10 px-4 py-2 text-sm text-zinc-300 transition-colors hover:border-white/20 hover:text-white"
-                                >
-                                    Claim the deal
-                                    <ArrowRight className="h-4 w-4" />
-                                </a>
-                            </div>
-                        </div>
-                    )}
-
-                    {/* Only show usage and comparison for Cloud */}
-                    {isCloud && (
-                        <>
-                            {/* Usage Pricing Section */}
-                            <div className="border-t border-white/10 pt-16 mt-12">
-                                <h3 className="mb-3 text-2xl font-normal tracking-tight text-white">Usage Pricing</h3>
-                                <p className="mb-8 text-base leading-relaxed text-zinc-500">Metered costs for scaling beyond plan limits.</p>
-
-                                <div className="grid grid-cols-2 md:grid-cols-3 gap-6">
-                                    {usagePricing.map((item, i) => (
-                                        <div key={i} className="border-t border-white/10 pt-6">
-                                            <div className="mb-2 text-xs font-medium uppercase tracking-wider text-zinc-500">{item.resource}</div>
-                                            <div className={`mb-1 text-2xl font-normal ${item.price === "BYO" ? "text-zinc-500" : "text-white"}`}>{item.price}</div>
-                                            <div className="text-xs text-zinc-500">{item.unit}</div>
+                            )}
+
+                            {/* Only show usage and comparison for Cloud */}
+                            {isCloud && (
+                                <>
+                                    {/* Usage Pricing Section */}
+                                    <div className="border-t border-ink/10 pt-16">
+                                        <h3 className="mb-3 text-2xl font-medium tracking-[-0.015em] text-ink">Usage Pricing</h3>
+                                        <p className="mb-8 text-base leading-relaxed text-ink-soft">Metered costs for scaling beyond plan limits.</p>
+
+                                        <div className="grid grid-cols-2 gap-6 md:grid-cols-3">
+                                            {usagePricing.map((item, i) => (
+                                                <div key={i} className="border-t border-ink/10 pt-6">
+                                                    <div className="mb-2 font-mono text-[11px] uppercase tracking-[0.16em] text-ink-faint">{item.resource}</div>
+                                                    {item.prefix && <span className="mb-1 block font-mono text-[10px] uppercase tracking-[0.16em] text-ink-faint">{item.prefix}</span>}
+                                                    <div className="mb-1 font-mono text-2xl text-ink">{item.price}</div>
+                                                    <div className="text-xs text-ink-faint">{item.unit}</div>
+                                                </div>
+                                            ))}
                                         </div>
-                                    ))}
-                                </div>
-                                <p className="mt-6 text-xs text-zinc-500">* Reads and writes to persisted actor state, not in-memory operations within an actor</p>
-                            </div>
+                                        <p className="mt-6 text-xs text-ink-faint">* Reads and writes to persisted actor state, not in-memory operations within an actor</p>
+                                        <p className="mt-2 text-xs text-ink-faint">Compute runs on Rivet Compute, billed per active second. Or bring your own compute and run your actors and applications on AWS, Vercel, Railway, or bare metal, paid directly to your provider.</p>
+                                    </div>
+
+                                    <ComputeCalculator />
 
-                            <ComparisonTable />
-                        </>
-                    )}
+                                    <ComparisonTable />
+                                </>
+                            )}
+                        </motion.div>
+                    </AnimatePresence>
                 </div>
             </div>
         </section>
@@ -693,9 +667,10 @@ const Pricing = () => {
 
 export default function PricingPageClient() {
   return (
-    <div className="min-h-screen bg-black text-zinc-300 font-sans selection:bg-[#FF4500]/30 selection:text-orange-200">
+    <div className="paper-grain min-h-screen font-sans text-ink-soft">
       <main>
         <Pricing />
+        <SelfHostingComparison />
       </main>
     </div>
   );
diff --git a/website/src/components/marketing/pricing/components/MobilePricingTabs.tsx b/website/src/components/marketing/pricing/components/MobilePricingTabs.tsx
deleted file mode 100644
index 6fd29f5005..0000000000
--- a/website/src/components/marketing/pricing/components/MobilePricingTabs.tsx
+++ /dev/null
@@ -1,300 +0,0 @@
-"use client";
-
-import { Tab } from "@headlessui/react";
-import { CheckIcon, MinusIcon } from "@heroicons/react/16/solid";
-import { Fragment } from "react";
-
-const tiers = [
-	{
-		name: "Free",
-		href: "https://dashboard.rivet.dev/",
-	},
-	{
-		name: "Hobby",
-		href: "https://dashboard.rivet.dev/",
-	},
-	{
-		name: "Team",
-		href: "https://dashboard.rivet.dev/",
-	},
-	{
-		name: "Enterprise",
-		href: "/sales",
-	},
-];
-
-const sections = [
-	{
-		name: "Usage Included",
-		features: [
-			{
-				name: "Storage",
-				tiers: {
-					Free: "5GB",
-					Hobby: "5GB included",
-					Team: "5GB included",
-					Enterprise: "Custom",
-				},
-			},
-			{
-				name: "Reads per month",
-				tiers: {
-					Free: "200 Million",
-					Hobby: "25 Billion included",
-					Team: "25 Billion included", 
-					Enterprise: "Custom",
-				},
-			},
-			{
-				name: "Writes per month",
-				tiers: {
-					Free: "5 Million",
-					Hobby: "50 Million included",
-					Team: "50 Million included",
-					Enterprise: "Custom",
-				},
-			},
-			{
-				name: "Egress",
-				tiers: {
-					Free: "100GB Limit",
-					Hobby: "1TB included",
-					Team: "1TB included",
-					Enterprise: "Custom",
-				},
-			},
-		],
-	},
-	{
-		name: "Support",
-		features: [
-			{
-				name: "Support",
-				tiers: {
-					Free: "Community Support",
-					Hobby: "Email",
-					Team: "Slack & Email",
-					Enterprise: "Slack & Email",
-				},
-			},
-		],
-	},
-	{
-		name: "Security & Enterprise",
-		features: [
-			{
-				name: "MFA",
-				tiers: {
-					Free: false,
-					Hobby: false,
-					Team: true,
-					Enterprise: true,
-				},
-			},
-			{
-				name: "Custom Regions",
-				tiers: {
-					Free: false,
-					Hobby: false,
-					Team: false,
-					Enterprise: true,
-				},
-			},
-			{
-				name: "SLA",
-				tiers: {
-					Free: false,
-					Hobby: false,
-					Team: false,
-					Enterprise: true,
-				},
-			},
-			{
-				name: "Audit Logs",
-				tiers: {
-					Free: false,
-					Hobby: false,
-					Team: false,
-					Enterprise: true,
-				},
-			},
-			{
-				name: "Custom Roles",
-				tiers: {
-					Free: false,
-					Hobby: false,
-					Team: false,
-					Enterprise: true,
-				},
-			},
-			{
-				name: "Device Tracking",
-				tiers: {
-					Free: false,
-					Hobby: false,
-					Team: false,
-					Enterprise: true,
-				},
-			},
-			{
-				name: "Volume Pricing",
-				tiers: {
-					Free: false,
-					Hobby: false,
-					Team: false,
-					Enterprise: true,
-				},
-			},
-		],
-	},
-];
-
-export function MobilePricingTabs() {
-	return (
-		<div className="sm:hidden [&_.tab]:!text-white/60 [&_.tab[data-selected]]:!text-white [&_.tab[data-selected]]:!border-white [&_.tab]:!border-white/10">
-			{/* Usage Pricing Table for Mobile */}
-			<div className="mt-16">
-				<div className="text-center mb-8">
-					<h2 className="text-3xl font-600 text-white mb-4">
-						Usage Pricing
-					</h2>
-					<p className="text-lg text-white/60 max-w-2xl mx-auto">
-						Pay only for what you use beyond the included allowances
-					</p>
-				</div>
-
-				<div className="max-w-2xl mx-auto">
-					<div className="bg-white/5 border border-white/10 rounded-lg overflow-hidden">
-						<table className="w-full">
-							<thead>
-								<tr className="border-b border-white/10">
-									<th className="px-6 py-4 text-left text-sm font-medium text-white">
-										Resource
-									</th>
-									<th className="px-6 py-4 text-right text-sm font-medium text-white">
-										Price
-									</th>
-								</tr>
-							</thead>
-							<tbody>
-								<tr className="border-b border-white/5">
-									<td className="px-6 py-4 text-sm text-white/80">
-										Storage
-									</td>
-									<td className="px-6 py-4 text-sm text-white text-right">
-										$0.40 per GB-month
-									</td>
-								</tr>
-								<tr className="border-b border-white/5">
-									<td className="px-6 py-4 text-sm text-white/80">
-										Reads
-									</td>
-									<td className="px-6 py-4 text-sm text-white text-right">
-										$1.00 per billion reads
-									</td>
-								</tr>
-								<tr className="border-b border-white/5">
-									<td className="px-6 py-4 text-sm text-white/80">
-										Writes
-									</td>
-									<td className="px-6 py-4 text-sm text-white text-right">
-										$1.00 per million writes
-									</td>
-								</tr>
-								<tr>
-									<td className="px-6 py-4 text-sm text-white/80">
-										Egress
-									</td>
-									<td className="px-6 py-4 text-sm text-white text-right">
-										$0.15 per GB
-									</td>
-								</tr>
-							</tbody>
-						</table>
-					</div>
-				</div>
-			</div>
-
-			<Tab.Group>
-				<Tab.List className="flex">
-					{tiers.map((tier) => (
-						<Tab
-							key={tier.name}
-							className="w-1/4 border-b border-white/10 py-4 text-base/8 font-medium text-white/60 data-[selected]:border-white data-[selected]:text-white [&:not([data-focus])]:focus:outline-none"
-						>
-							{tier.name}
-						</Tab>
-					))}
-				</Tab.List>
-				<Tab.Panels>
-					{tiers.map((tier) => (
-						<Tab.Panel key={tier.name}>
-							<a
-								href={tier.href}
-								className="mt-8 block rounded-xl bg-[#FF5C00]/90 hover:bg-[#FF5C00] hover:brightness-110 text-white px-6 py-3 text-center text-sm font-medium transition-all duration-200 active:scale-[0.97]"
-							>
-								Get started
-							</a>
-							{sections.map((section) => (
-								<Fragment key={section.name}>
-									<div className="-mx-6 mt-10 rounded-lg bg-white/5 px-6 py-3 text-sm/6 font-semibold text-white group-first-of-type:mt-5">
-										{section.name}
-									</div>
-									<dl>
-										{section.features.map((feature) => (
-											<div
-												key={feature.name}
-												className="grid grid-cols-2 border-b border-white/5 py-4 last:border-none"
-											>
-												<dt className="text-sm/6 font-normal text-white/70">
-													{feature.name}
-												</dt>
-												<dd className="text-center">
-													{typeof feature.tiers[
-														tier.name
-													] === "string" ? (
-														<span className="text-sm/6 text-white">
-															{
-																feature.tiers[
-																	tier.name
-																]
-															}
-														</span>
-													) : (
-														<>
-															{feature.tiers[
-																tier.name
-															] === true ? (
-																<CheckIcon
-																	aria-hidden="true"
-																	className="inline-block size-4 fill-green-400"
-																/>
-															) : (
-																<MinusIcon
-																	aria-hidden="true"
-																	className="inline-block size-4 fill-white/10"
-																/>
-															)}
-
-															<span className="sr-only">
-																{feature.tiers[
-																	tier.name
-																] === true
-																	? "Yes"
-																	: "No"}
-															</span>
-														</>
-													)}
-												</dd>
-											</div>
-										))}
-									</dl>
-								</Fragment>
-							))}
-						</Tab.Panel>
-					))}
-				</Tab.Panels>
-			</Tab.Group>
-		</div>
-	);
-}
diff --git a/website/src/components/marketing/pricing/components/UsagePricingModal.tsx b/website/src/components/marketing/pricing/components/UsagePricingModal.tsx
deleted file mode 100644
index 5c68065979..0000000000
--- a/website/src/components/marketing/pricing/components/UsagePricingModal.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-"use client";
-
-interface UsagePricingModalProps {
-	open: boolean;
-	onClose: () => void;
-}
-
-export default function UsagePricingModal({
-	open,
-	onClose,
-}: UsagePricingModalProps) {
-	if (!open) return null;
-	return (
-		<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70">
-			<div className="relative w-full max-w-3xl mx-4 bg-[#181818] rounded-2xl shadow-lg text-white p-8 overflow-y-auto max-h-[90vh]">
-				<button
-					onClick={onClose}
-					className="absolute top-4 right-4 text-white/60 hover:text-white text-2xl font-bold focus:outline-none"
-					aria-label="Close"
-				>
-					×
-				</button>
-				<h2 className="text-2xl font-semibold mb-2">
-					Rivet Cloud Usage Pricing
-				</h2>
-				<p className="text-white/70 mb-6">
-					Choose your cloud provider.
-				</p>
-				<div className="mb-6">
-					<label className="text-sm text-white/60 mr-2">
-						Cloud Provider
-					</label>
-					<select className="bg-[#222] text-white rounded px-3 py-1 border border-white/10 focus:outline-none">
-						<option>Linode</option>
-						<option>AWS</option>
-					</select>
-				</div>
-				<div className="overflow-x-auto mb-8">
-					<table className="w-full text-left border-separate border-spacing-y-2">
-						<thead>
-							<tr className="text-white/80 text-sm">
-								<th className="font-normal pb-2">Region</th>
-								<th className="font-normal pb-2">
-									Compute
-									<br />
-									<span className="text-xs font-normal">
-										$ (per vCPU · hr)
-									</span>
-								</th>
-								<th className="font-normal pb-2">
-									Storage
-									<br />
-									<span className="text-xs font-normal">
-										$ (per GiB · hr)
-									</span>
-								</th>
-							</tr>
-						</thead>
-						<tbody className="text-white/90 text-sm">
-							<tr>
-								<td>N. Virginia (us-east-1)</td>
-								<td>$0.113</td>
-								<td>$0.00103</td>
-							</tr>
-							<tr>
-								<td>Oregon (us-west-2)</td>
-								<td>$0.113</td>
-								<td>$0.00103</td>
-							</tr>
-							<tr>
-								<td>Mumbai (ap-south-1)</td>
-								<td>$0.113</td>
-								<td>$0.00114</td>
-							</tr>
-							<tr>
-								<td>Singapore (ap-southeast-1)</td>
-								<td>$0.119</td>
-								<td>$0.00123</td>
-							</tr>
-							<tr>
-								<td>Frankfurt (eu-central-1)</td>
-								<td>$0.117</td>
-								<td>$0.00114</td>
-							</tr>
-							<tr>
-								<td>Ireland (eu-west-1)</td>
-								<td>$0.114</td>
-								<td>$0.00114</td>
-							</tr>
-						</tbody>
-					</table>
-				</div>
-				<div className="grid md:grid-cols-3 gap-4 mb-8">
-					<div className="bg-[#222] rounded-lg p-4">
-						<h3 className="font-medium mb-1 text-white">
-							Stateless Functions
-						</h3>
-						<p className="text-white/70 text-sm">
-							Deploy serverless functions that scale automatically
-						</p>
-					</div>
-					<div className="bg-[#222] rounded-lg p-4">
-						<h3 className="font-medium mb-1 text-white">
-							Stateful Actors
-						</h3>
-						<p className="text-white/70 text-sm">
-							Long running tasks with state persistence,
-							hibernation, and realtime
-						</p>
-					</div>
-					<div className="bg-[#222] rounded-lg p-4">
-						<h3 className="font-medium mb-1 text-white">
-							Sandboxed Containers
-						</h3>
-						<p className="text-white/70 text-sm">
-							Run CPU- & memory-intensive workloads in secure
-							containers with blazing fast coldstarts
-						</p>
-					</div>
-				</div>
-				<div className="mb-8">
-					<h3 className="font-medium mb-2 text-white">
-						Storage pricing
-					</h3>
-					<table className="w-full text-left border-separate border-spacing-y-2 mb-2">
-						<thead>
-							<tr className="text-white/80 text-xs">
-								<th className="font-normal pb-1">&nbsp;</th>
-								<th className="font-normal pb-1">Community</th>
-								<th className="font-normal pb-1">Pro</th>
-								<th className="font-normal pb-1">Team</th>
-								<th className="font-normal pb-1">Enterprise</th>
-							</tr>
-						</thead>
-						<tbody className="text-white/90 text-sm">
-							<tr>
-								<th className="font-normal text-white/70">
-									Storage Reads
-								</th>
-								<td>1M Max</td>
-								<td>1M + $0.20/million</td>
-								<td>1M + $0.20/million</td>
-								<td>Custom</td>
-							</tr>
-							<tr>
-								<th className="font-normal text-white/70">
-									Storage Writes
-								</th>
-								<td>1M Max</td>
-								<td>1M + $1.00/million</td>
-								<td>1M + $1.00/million</td>
-								<td>Custom</td>
-							</tr>
-							<tr>
-								<th className="font-normal text-white/70">
-									Storage Stored Data
-								</th>
-								<td>1GB Max</td>
-								<td>1GB + $0.20/GB month</td>
-								<td>1GB + $0.20/GB month</td>
-								<td>Custom</td>
-							</tr>
-						</tbody>
-					</table>
-				</div>
-			</div>
-		</div>
-	);
-}
diff --git a/website/src/components/marketing/registry/RegistryPageClient.tsx b/website/src/components/marketing/registry/RegistryPageClient.tsx
index 38c2fae330..2186cedddc 100644
--- a/website/src/components/marketing/registry/RegistryPageClient.tsx
+++ b/website/src/components/marketing/registry/RegistryPageClient.tsx
@@ -22,7 +22,7 @@ const CATEGORY_ORDER: { type: string; label: string; description: string }[] = [
 		type: "file-system",
 		label: "File Systems",
 		description:
-			"Mount these file systems as the root or at any sub-path inside the VM.",
+			"Mount these file systems as the root or at any sub-path inside the agent's environment.",
 	},
 	{
 		type: "sandbox-extension",
@@ -34,7 +34,7 @@ const CATEGORY_ORDER: { type: string; label: string; description: string }[] = [
 		type: "software",
 		label: "Software",
 		description:
-			"WASM command packages that run inside the VM. Install individually or use meta-packages.",
+			"Wasm command packages that run inside the agent's environment. Install individually or use meta-packages.",
 	},
 ];
 
@@ -73,7 +73,7 @@ function EntryIcon({
 			<Icon
 				icon={entry.icon}
 				style={{ width: size, height: size }}
-				className={theme === "light" ? "text-zinc-900" : "text-white"}
+				className={theme === "light" ? "text-ink" : "text-white"}
 			/>
 		);
 	}
@@ -82,7 +82,7 @@ function EntryIcon({
 		<span
 			className={
 				theme === "light"
-					? "select-none font-mono font-bold text-zinc-600"
+					? "select-none font-mono font-bold text-ink-soft"
 					: "select-none font-mono font-bold text-white/80"
 			}
 			style={{ fontSize: size * 0.6, lineHeight: 1 }}
@@ -123,7 +123,7 @@ function MonoIcon({
 			<Icon
 				icon={entry.icon}
 				style={{ width: size, height: size }}
-				className={theme === "light" ? "text-zinc-400" : "text-white/60"}
+				className={theme === "light" ? "text-ink-faint" : "text-white/60"}
 			/>
 		);
 	}
@@ -132,7 +132,7 @@ function MonoIcon({
 		<span
 			className={
 				theme === "light"
-					? "select-none font-mono font-bold text-zinc-300"
+					? "select-none font-mono font-bold text-ink-faint"
 					: "select-none font-mono font-bold text-white/40"
 			}
 			style={{ fontSize: size * 0.6, lineHeight: 1 }}
@@ -187,7 +187,7 @@ function FeaturedCarousel({
 			<div
 				className={
 					light
-						? "relative h-[320px] overflow-hidden rounded-2xl border border-zinc-200 bg-gradient-to-br from-zinc-50 to-white"
+						? "relative h-[320px] overflow-hidden rounded-2xl border border-ink/10 bg-white/55"
 						: "relative h-[320px] overflow-hidden rounded-2xl border border-white/15 bg-gradient-to-br from-white/8 to-white/2"
 				}
 			>
@@ -209,7 +209,7 @@ function FeaturedCarousel({
 						<h3
 							className={
 								light
-									? "mb-3 text-2xl font-semibold text-zinc-900"
+									? "mb-3 text-2xl font-medium text-ink"
 									: "mb-3 text-2xl font-semibold text-white"
 							}
 						>
@@ -218,7 +218,7 @@ function FeaturedCarousel({
 						<p
 							className={
 								light
-									? "max-w-md line-clamp-3 text-base leading-relaxed text-zinc-500"
+									? "max-w-md line-clamp-3 text-base leading-relaxed text-ink-soft"
 									: "max-w-md line-clamp-3 text-base leading-relaxed text-white/60"
 							}
 						>
@@ -245,7 +245,7 @@ function FeaturedCarousel({
 						<span
 							className={
 								light
-									? "text-xs font-medium text-zinc-900"
+									? `text-xs font-medium ${candidateIndex === index ? "text-pine" : "text-ink"}`
 									: "text-xs font-medium text-white"
 							}
 						>
@@ -283,7 +283,7 @@ function CategorySection({
 			<h2
 				className={
 					light
-						? "mb-2 text-2xl font-semibold text-zinc-900"
+						? "mb-2 text-2xl font-medium text-ink"
 						: "mb-2 text-2xl font-semibold text-white"
 				}
 			>
@@ -291,7 +291,7 @@ function CategorySection({
 			</h2>
 			<p
 				className={
-					light ? "mb-4 text-sm text-zinc-500" : "mb-4 text-sm text-white/50"
+					light ? "mb-4 text-sm text-ink-soft" : "mb-4 text-sm text-white/50"
 				}
 			>
 				{description}
@@ -305,7 +305,7 @@ function CategorySection({
 							entry.status === "coming-soon" ? "opacity-60" : ""
 						} ${
 							light
-								? "border-zinc-200 bg-white hover:border-zinc-300 hover:shadow-sm"
+								? "border-ink/10 bg-white/55 hover:border-ink/25"
 								: "border-white/10 bg-white/2 hover:border-white/25"
 						}`}
 					>
@@ -316,7 +316,7 @@ function CategorySection({
 							<h3
 								className={
 									light
-										? "truncate font-semibold text-zinc-900"
+										? "truncate font-medium text-ink"
 										: "truncate font-semibold text-white"
 								}
 							>
@@ -326,7 +326,7 @@ function CategorySection({
 								<span
 									className={
 										light
-											? "shrink-0 rounded-full border border-zinc-200 px-1.5 py-0.5 text-[10px] text-zinc-400"
+											? "shrink-0 rounded-full border border-ink/15 px-1.5 py-0.5 text-[10px] text-ink-faint"
 											: "shrink-0 rounded-full border border-white/20 px-1.5 py-0.5 text-[10px] text-white/50"
 									}
 								>
@@ -337,7 +337,7 @@ function CategorySection({
 						<p
 							className={
 								light
-									? "line-clamp-3 text-sm leading-relaxed text-zinc-500"
+									? "line-clamp-3 text-sm leading-relaxed text-ink-soft"
 									: "line-clamp-3 text-sm leading-relaxed text-white/60"
 							}
 						>
@@ -351,14 +351,14 @@ function CategorySection({
 						onClick={() => setExpanded(true)}
 						className={
 							light
-								? "flex h-36 flex-col items-center justify-center gap-2 rounded-xl border border-zinc-200 bg-zinc-50 p-5 transition-all duration-200 hover:border-zinc-300"
+								? "flex h-36 flex-col items-center justify-center gap-2 rounded-xl border border-ink/10 bg-white/40 p-5 transition-all duration-200 hover:border-ink/25"
 								: "flex h-36 flex-col items-center justify-center gap-2 rounded-xl border border-white/10 bg-white/2 p-5 transition-all duration-200 hover:border-white/25"
 						}
 					>
 						<span
 							className={
 								light
-									? "text-2xl font-light text-zinc-300"
+									? "text-2xl font-light text-ink-faint"
 									: "text-2xl font-light text-white/30"
 							}
 						>
@@ -367,7 +367,7 @@ function CategorySection({
 						<span
 							className={
 								light
-									? "text-sm font-medium text-zinc-500"
+									? "text-sm font-medium text-ink-soft"
 									: "text-sm font-medium text-white/60"
 							}
 						>
@@ -424,13 +424,13 @@ export default function RegistryPageClient({
 			<div
 				className={
 					light
-						? "mt-8 border-t border-zinc-200 pt-8 text-center"
+						? "mt-8 border-t border-ink/10 pt-8 text-center"
 						: "mt-8 border-t border-white/10 pt-8 text-center"
 				}
 			>
 				<p
 					className={
-						light ? "mb-4 text-sm text-zinc-500" : "mb-4 text-sm text-white/50"
+						light ? "mb-4 text-sm text-ink-soft" : "mb-4 text-sm text-white/50"
 					}
 				>
 					Want to add your own package to the registry?
@@ -442,7 +442,7 @@ export default function RegistryPageClient({
 						rel="noopener noreferrer"
 						className={
 							light
-								? "inline-flex items-center gap-2 rounded-lg border border-zinc-200 px-5 py-2.5 text-sm font-medium text-zinc-600 transition-all duration-200 no-underline hover:border-zinc-300 hover:text-zinc-900"
+								? "inline-flex items-center gap-2 rounded-lg border border-ink/20 px-5 py-2.5 text-sm font-medium text-ink-soft transition-all duration-200 no-underline hover:border-ink/40 hover:text-ink"
 								: "inline-flex items-center gap-2 rounded-lg border border-white/20 px-5 py-2.5 text-sm font-medium text-white/80 transition-all duration-200 no-underline hover:border-white/40 hover:text-white"
 						}
 					>
@@ -468,7 +468,7 @@ export default function RegistryPageClient({
 						rel="noopener noreferrer"
 						className={
 							light
-								? "inline-flex items-center gap-2 rounded-lg border border-zinc-200 px-5 py-2.5 text-sm font-medium text-zinc-600 transition-all duration-200 no-underline hover:border-zinc-300 hover:text-zinc-900"
+								? "inline-flex items-center gap-2 rounded-lg border border-ink/20 px-5 py-2.5 text-sm font-medium text-ink-soft transition-all duration-200 no-underline hover:border-ink/40 hover:text-ink"
 								: "inline-flex items-center gap-2 rounded-lg border border-white/20 px-5 py-2.5 text-sm font-medium text-white/80 transition-all duration-200 no-underline hover:border-white/40 hover:text-white"
 						}
 					>
diff --git a/website/src/components/marketing/sales/SalesPageClient.tsx b/website/src/components/marketing/sales/SalesPageClient.tsx
index 850cafacad..52a76549bb 100644
--- a/website/src/components/marketing/sales/SalesPageClient.tsx
+++ b/website/src/components/marketing/sales/SalesPageClient.tsx
@@ -2,13 +2,13 @@ import { SalesForm } from "./form";
 
 export default function SalesPageClient() {
 	return (
-		<main className="min-h-screen w-full bg-black selection:bg-[#FF4500]/30 selection:text-orange-200">
+		<main className="paper-grain min-h-screen w-full">
 			<div className="relative overflow-hidden pt-32 md:pt-48 pb-12">
 				<div className="mx-auto max-w-md px-6">
-					<h1 className="mb-4 text-4xl font-normal leading-[1.1] tracking-tight text-white md:text-5xl text-center">
+					<h1 className="mb-4 text-4xl font-medium leading-[1.06] tracking-[-0.015em] text-ink md:text-5xl text-center">
 						Contact Sales
 					</h1>
-					<p className="mb-10 text-base leading-relaxed text-zinc-500 text-center">
+					<p className="mb-10 text-base leading-relaxed text-ink-soft text-center">
 						Get in touch with our sales team to discuss your
 						enterprise needs and how Rivet can help.
 					</p>
diff --git a/website/src/components/marketing/sales/form.tsx b/website/src/components/marketing/sales/form.tsx
index d2b9eac6d1..a5a780b3e4 100644
--- a/website/src/components/marketing/sales/form.tsx
+++ b/website/src/components/marketing/sales/form.tsx
@@ -47,17 +47,17 @@ export function SalesForm() {
 	if (isSubmitted) {
 		return (
 			<div className="mt-8 text-center">
-				<p className="text-2xl font-normal text-white mb-4">
+				<p className="text-2xl font-medium text-ink mb-4">
 					Thank you for your interest!
 				</p>
-				<p className="text-zinc-400">
+				<p className="text-ink-soft">
 					We will get back to you within the next few days. In the meantime, feel
 					free to explore our{" "}
-					<a href="/docs" className="text-white hover:text-zinc-300 underline underline-offset-2">
+					<a href="/docs" className="text-pine hover:text-ink underline underline-offset-2">
 						documentation
 					</a>{" "}
 					or{" "}
-					<a href="/changelog" className="text-white hover:text-zinc-300 underline underline-offset-2">
+					<a href="/changelog" className="text-pine hover:text-ink underline underline-offset-2">
 						changelog
 					</a>{" "}
 					for more information.
@@ -66,8 +66,8 @@ export function SalesForm() {
 		);
 	}
 
-	const inputClasses = "block w-full rounded-md border border-white/10 bg-black px-3 py-2 text-sm text-white placeholder:text-zinc-600 focus:border-white/20 focus:outline-none transition-colors";
-	const labelClasses = "block text-sm font-medium text-zinc-400 mb-1.5";
+	const inputClasses = "block w-full rounded-md border border-ink/15 bg-white/55 px-3 py-2 text-sm text-ink placeholder:text-ink-faint focus:border-pine focus:outline-none transition-colors";
+	const labelClasses = "block text-sm font-medium text-ink-soft mb-1.5";
 
 	return (
 		<form
@@ -140,7 +140,7 @@ export function SalesForm() {
 			<div className="mt-6 text-center">
 				<button
 					type="submit"
-					className="inline-flex items-center justify-center gap-2 rounded-md bg-white px-4 py-2 text-sm font-medium text-black transition-colors hover:bg-zinc-200 disabled:opacity-50 disabled:cursor-not-allowed"
+					className="inline-flex items-center justify-center gap-2 rounded-md bg-accent-deep px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed"
 					disabled={isSubmitting}
 				>
 					{isSubmitting ? "Submitting..." : "Let's talk"}
diff --git a/website/src/components/marketing/sections/AgentOSSection.tsx b/website/src/components/marketing/sections/AgentOSSection.tsx
deleted file mode 100644
index 134955d192..0000000000
--- a/website/src/components/marketing/sections/AgentOSSection.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { ArrowRight, Shield, FolderOpen, Clock, Globe, Bot, Code, Terminal, Check } from 'lucide-react';
-import { motion } from 'framer-motion';
-
-const CopyInstallButton = () => {
-  const [copied, setCopied] = useState(false);
-
-  const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText('npm install rivetkit');
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error('Failed to copy:', err);
-    }
-  };
-
-  return (
-    <button
-      onClick={handleCopy}
-      className='inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border border-white/10 bg-white/5 px-4 py-2 text-sm text-zinc-400 transition-colors hover:border-white/20 hover:text-white'
-    >
-      {copied ? <Check className='h-4 w-4 text-green-500' /> : <Terminal className='h-4 w-4' />}
-      npm install rivetkit
-    </button>
-  );
-};
-
-const features = [
-  {
-    icon: Bot,
-    title: 'Works with any agent',
-    description: 'Claude Code, Codex, OpenCode, and more. One unified API.',
-  },
-  {
-    icon: Clock,
-    title: 'Low overhead',
-    description: '~5ms coldstart. 200x cheaper than sandboxes.',
-  },
-  {
-    icon: Code,
-    title: 'Embed in your backend',
-    description: 'Your APIs. Your toolchains. No complex agent authentication.',
-  },
-  {
-    icon: FolderOpen,
-    title: 'Mount anything as a file system',
-    description: 'S3, SQLite, Google Drive, or the host file system.',
-  },
-  {
-    icon: Shield,
-    title: 'Granular security',
-    description: 'V8 isolates + WebAssembly. Configurable network and file system policies.',
-  },
-  {
-    icon: Globe,
-    title: 'Runs anywhere',
-    description: 'Rivet Cloud, Railway, Vercel, Kubernetes, or on-prem.',
-  },
-];
-
-export const AgentOSSection = () => (
-  <section className='border-t border-white/10 py-16 md:py-48'>
-    <div className='mx-auto max-w-7xl px-6'>
-      {/* Header */}
-      <div className='mb-16 max-w-3xl'>
-        <motion.h2
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.5, delay: 0.05 }}
-          className='mb-4 text-2xl font-normal tracking-tight text-white md:text-4xl'
-        >
-          Need more than primitives? Try agentOS.
-        </motion.h2>
-        <motion.p
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.5, delay: 0.1 }}
-          className='text-base leading-relaxed text-zinc-500 md:text-lg'
-        >
-          Unix gave humans a common language to control machines. agentOS gives agents the same power.
-          A lightweight runtime with a real file system, real tools, and security via V8 isolates.
-        </motion.p>
-      </div>
-
-      {/* Features grid */}
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        whileInView={{ opacity: 1, y: 0 }}
-        viewport={{ once: true }}
-        transition={{ duration: 0.5, delay: 0.15 }}
-        className='mb-12 grid grid-cols-1 gap-px overflow-hidden rounded-lg border border-white/10 bg-white/5 sm:grid-cols-2 lg:grid-cols-3'
-      >
-        {features.map((feature) => (
-          <div
-            key={feature.title}
-            className='flex flex-col gap-3 bg-black p-6 transition-colors hover:bg-white/[0.02]'
-          >
-            <feature.icon className='h-5 w-5 text-zinc-500' />
-            <h3 className='text-sm font-medium text-white'>{feature.title}</h3>
-            <p className='text-sm leading-relaxed text-zinc-500'>{feature.description}</p>
-          </div>
-        ))}
-      </motion.div>
-
-      {/* CTA */}
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        whileInView={{ opacity: 1, y: 0 }}
-        viewport={{ once: true }}
-        transition={{ duration: 0.5, delay: 0.2 }}
-        className='flex flex-col gap-4 sm:flex-row sm:items-center'
-      >
-        <a
-          href='/agent-os'
-          className='inline-flex items-center gap-2 text-sm text-zinc-400 transition-colors hover:text-white'
-        >
-          Learn more about agentOS
-          <ArrowRight className='h-3.5 w-3.5' />
-        </a>
-        <CopyInstallButton />
-      </motion.div>
-    </div>
-  </section>
-);
diff --git a/website/src/components/marketing/sections/BenchmarksSection.tsx b/website/src/components/marketing/sections/BenchmarksSection.tsx
index 8f0b574b0a..2d330126ea 100644
--- a/website/src/components/marketing/sections/BenchmarksSection.tsx
+++ b/website/src/components/marketing/sections/BenchmarksSection.tsx
@@ -1,235 +1,157 @@
 'use client';
 
-import { useState, useRef, useEffect } from 'react';
-import { ArrowDown, ArrowUp, Info } from 'lucide-react';
 import { motion } from 'framer-motion';
+import { SECTION_H2_CLASS, SUBTITLE_CLASS } from '../typography';
+import { BenchCard, BenchInfoTooltip, type BenchRowEntry } from '../bench/BenchCard';
 
 interface BarEntry {
 	label: string;
 	value: string;
-	/** Numeric value used to compute bar width proportionally. */
-	rawValue: number;
 	highlight?: boolean;
-	infinite?: boolean;
 	/** Hover note explaining the benchmark context. */
 	note?: string;
 }
 
 interface BenchmarkCard {
 	title: string;
-	subtitle: string;
 	direction: 'lower is better' | 'higher is better';
+	/** Headline stat. Defaults to the highlighted entry's value when omitted. */
+	hero?: string;
+	/** Comparative shown next to the headline (e.g. "faster"). Only set where the
+	    competitor/Rivet ratio is a finite number; division-by-zero metrics
+	    (0ms reads, $0 idle) and qualitative ones keep their standout value. */
+	verb?: string;
 	bars: BarEntry[];
-	/** Hide bar charts and show only labels and values. */
-	noBars?: boolean;
-	/** Use a logarithmic scale for bar widths. */
-	logarithmic?: boolean;
-}
-
-function Tooltip({ note }: { note: string }) {
-	const [visible, setVisible] = useState(false);
-	const [position, setPosition] = useState<'above' | 'below'>('above');
-	const tooltipRef = useRef<HTMLDivElement>(null);
-	const iconRef = useRef<HTMLButtonElement>(null);
-
-	useEffect(() => {
-		if (visible && iconRef.current) {
-			const rect = iconRef.current.getBoundingClientRect();
-			// Show below if too close to the top of the viewport
-			setPosition(rect.top < 80 ? 'below' : 'above');
-		}
-	}, [visible]);
-
-	return (
-		<span className='relative inline-flex'>
-			<button
-				ref={iconRef}
-				type='button'
-				className='ml-1 inline-flex items-center text-zinc-600 transition-colors hover:text-zinc-400'
-				onMouseEnter={() => setVisible(true)}
-				onMouseLeave={() => setVisible(false)}
-				onClick={() => setVisible((v) => !v)}
-				aria-label='More info'
-			>
-				<Info className='h-3 w-3' />
-			</button>
-			{visible && (
-				<div
-					ref={tooltipRef}
-					className={`absolute left-1/2 z-50 w-52 -translate-x-1/2 rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-[11px] leading-relaxed text-zinc-300 shadow-xl ${
-						position === 'above' ? 'bottom-full mb-2' : 'top-full mt-2'
-					}`}
-				>
-					{note}
-				</div>
-			)}
-		</span>
-	);
-}
-
-/** Compute bar widths as percentages from raw values, with a minimum of 2%. */
-function computeBarWidths(bars: BarEntry[], logarithmic?: boolean): number[] {
-	const finiteValues = bars.filter((b) => !b.infinite).map((b) => b.rawValue);
-	const maxValue = Math.max(...finiteValues);
-	if (logarithmic) {
-		const logMax = Math.log10(Math.max(maxValue, 1));
-		return bars.map((bar) => {
-			if (bar.infinite) return 100;
-			if (bar.rawValue <= 0) return 2;
-			return Math.max((Math.log10(bar.rawValue) / logMax) * 100, 2);
-		});
-	}
-	return bars.map((bar) => {
-		if (bar.infinite) return 100;
-		if (maxValue === 0) return 2;
-		return Math.max((bar.rawValue / maxValue) * 100, 2);
-	});
+	/** Optional caveat pinned to the card foot. */
+	note?: string;
 }
 
 const benchmarks: BenchmarkCard[] = [
 	{
 		title: 'Cold Start',
-		subtitle: 'Time to first request',
 		direction: 'lower is better',
+		hero: '~300x',
+		verb: 'faster',
 		bars: [
 			{
-			label: 'Rivet Actor',
-			value: '~20ms',
-			rawValue: 20,
-			highlight: true,
-			note: 'Includes durable state init, not just a process spawn. No actor key, so no cross-region locking. Measured with Node.js and FoundationDB.',
-		},
+				label: 'Rivet Actor',
+				value: '~20ms',
+				highlight: true,
+				note: 'Includes durable state init, not just a process spawn. No actor key, so no cross-region locking. Measured with Node.js and FoundationDB.',
+			},
 			{
 				label: 'Kubernetes Pod',
 				value: '~6s',
-				rawValue: 6000,
 				note: 'Node.js 24 Alpine image (56MB compressed) on AWS EKS with a pre-provisioned m5.large node. Breakdown: ~1s image pull and extraction, ~3-4s scheduling and container runtime setup, ~1s container start.',
 			},
 			{
 				label: 'Virtual Machine',
 				value: '~30s',
-				rawValue: 30000,
 				note: 'AWS EC2 t3.nano instance from launch to SSH-ready, using an Amazon Linux 2 AMI. t3.nano is the smallest available EC2 instance (512MB RAM).',
 			},
 		],
 	},
 	{
 		title: 'Memory Per Instance',
-		subtitle: 'Overhead per instance',
 		direction: 'lower is better',
+		hero: '~80,000x',
+		verb: 'smaller',
 		bars: [
 			{
 				label: 'Rivet Actor',
 				value: '~0.6KB',
-				rawValue: 0.6,
 				highlight: true,
 				note: 'RSS (resident set size) delta divided by actor count, measured by spawning 10,000 actors in Node.js v24 on Linux x86.',
 			},
 			{
 				label: 'Kubernetes Pod',
 				value: '~50MB',
-				rawValue: 50,
 				note: 'Minimum idle Node.js container on Linux x86: Node.js v24 runtime (~43MB RSS), containerd-shim (~3MB), pause container (~1MB), and kubelet per-pod tracking (~2MB).',
 			},
 			{
 				label: 'Virtual Machine',
 				value: '~512MB',
-				rawValue: 512,
 				note: 'AWS EC2 t3.nano, the smallest available EC2 instance with 512MB allocated memory.',
 			},
 		],
 	},
 	{
 		title: 'Read Latency',
-		subtitle: 'State read latency',
 		direction: 'lower is better',
 		bars: [
 			{
 				label: 'Rivet Actor',
 				value: '0ms',
-				rawValue: 0.01,
 				highlight: true,
 				note: 'State is read from co-located SQLite/KV storage on the same machine as the actor, with no network round-trip.',
 			},
 			{
 				label: 'Redis',
 				value: '~1ms',
-				rawValue: 1,
 				note: 'AWS ElastiCache Redis (cache.t3.micro) in the same availability zone as the application.',
 			},
 			{
 				label: 'Postgres',
 				value: '~5ms',
-				rawValue: 5,
 				note: 'AWS RDS PostgreSQL (db.t3.micro) in the same availability zone as the application.',
 			},
 		],
 	},
 	{
 		title: 'Idle Cost',
-		subtitle: 'Cost when not in use',
 		direction: 'lower is better',
+		note: 'Actors scale to zero with no idle infrastructure.',
 		bars: [
 			{
 				label: 'Rivet Actor',
 				value: '$0',
-				rawValue: 0.01,
 				highlight: true,
 				note: 'Assumes Rivet Actors running on a serverless platform. Actors scale to zero with no idle infrastructure costs. Traditional container deployments may incur idle costs.',
 			},
 			{
 				label: 'Virtual Machine',
 				value: '~$5/mo',
-				rawValue: 5,
 				note: 'AWS EC2 t3.nano ($0.0052/hr compute + $1.60/mo for 20GB gp3 storage) running 24/7. t3.nano is the smallest available EC2 instance (512MB RAM).',
 			},
 			{
 				label: 'Kubernetes Cluster',
 				value: '~$85/mo',
-				rawValue: 85,
 				note: 'AWS EKS control plane ($73/mo) plus a single t3.nano worker node with 20GB gp3 storage, running 24/7. t3.nano is the smallest available EC2 instance (512MB RAM).',
 			},
 		],
 	},
 	{
 		title: 'Horizontal Scale',
-		subtitle: 'Maximum capacity',
 		direction: 'higher is better',
-		noBars: true,
 		bars: [
 			{
 				label: 'Rivet Actors',
 				value: 'Infinite',
-				rawValue: 0,
 				highlight: true,
 				note: 'Rivet Actors scale linearly by adding nodes with no single cluster size limit.',
 			},
 			{
 				label: 'Kubernetes',
 				value: '~5k nodes',
-				rawValue: 5000,
 				note: 'Kubernetes officially supports clusters of up to 5,000 nodes per the Kubernetes scalability documentation.',
 			},
-			{ label: 'Postgres', value: '1 primary', rawValue: 1 },
+			{ label: 'Postgres', value: '1 primary' },
 		],
 	},
 	{
 		title: 'Multi-Region',
-		subtitle: 'Deploy actors close to your users',
 		direction: 'lower is better',
-		noBars: true,
+		hero: 'Global',
 		bars: [
 			{
 				label: 'Rivet',
 				value: 'Global edge network',
-				rawValue: 0,
 				highlight: true,
 				note: 'Rivet automatically spawns actors near your users and handles routing across regions for a seamless edge network.',
 			},
 			{
 				label: 'Traditional Deployment',
 				value: '1 region',
-				rawValue: 0,
 			},
 		],
 	},
@@ -237,7 +159,7 @@ const benchmarks: BenchmarkCard[] = [
 
 export const BenchmarksSection = () => {
 	return (
-		<section className='border-t border-white/10 px-6 py-16 lg:py-24'>
+		<section className='border-t border-ink/10 px-6 py-16 lg:py-24'>
 			<div className='mx-auto w-full max-w-7xl'>
 				<motion.div
 					initial={{ opacity: 0, y: 20 }}
@@ -246,91 +168,43 @@ export const BenchmarksSection = () => {
 					transition={{ duration: 0.5 }}
 					className='mb-10'
 				>
-					<h2 className='mb-2 text-2xl font-normal tracking-tight text-white md:text-4xl'>
-						How Actors Compare
-					</h2>
-					<p className='text-base leading-relaxed text-zinc-500'>
-						Rivet Actors vs. traditional infrastructure.
-					</p>
+					<h2 className={SECTION_H2_CLASS}>How Actors Compare</h2>
+					<p className={SUBTITLE_CLASS}>Rivet Actors vs. traditional infrastructure.</p>
 				</motion.div>
 
-				<div className='grid grid-cols-1 gap-6 md:grid-cols-2'>
-					{benchmarks.map((card, idx) => {
-						const widths = computeBarWidths(card.bars, card.logarithmic);
-						return (
-						<motion.div
-							key={card.title}
-							initial={{ opacity: 0, y: 16 }}
-							whileInView={{ opacity: 1, y: 0 }}
-							viewport={{ once: true }}
-							transition={{ duration: 0.4, delay: idx * 0.05 }}
-							className='rounded-xl border border-white/10 bg-white/[0.03] p-6'
-						>
-							<div className='mb-4 flex items-start justify-between'>
-								<div>
-									<h3 className='text-sm font-medium text-white'>{card.title}</h3>
-									<p className='text-xs text-zinc-500'>{card.subtitle}</p>
-								</div>
-								<span className='flex items-center gap-1 text-[10px] uppercase tracking-wider text-zinc-600'>
-									{card.direction === 'lower is better' ? (
-										<ArrowDown className='h-3 w-3' />
-									) : (
-										<ArrowUp className='h-3 w-3' />
-									)}
-									{card.direction}
-								</span>
-							</div>
+				<div className='grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3'>
+					{benchmarks.map((card) => {
+						const accent = card.bars.find((bar) => bar.highlight);
+						const rows: BenchRowEntry[] = card.bars.map((bar) => ({
+							label: bar.note ? (
+								<>
+									{bar.label}
+									<BenchInfoTooltip>{bar.note}</BenchInfoTooltip>
+								</>
+							) : (
+								bar.label
+							),
+							value: bar.value,
+							highlight: bar.highlight,
+						}));
 
-							<div className='flex flex-col gap-3'>
-								{card.bars.map((bar, barIdx) => (
-									<div key={bar.label} className='flex flex-col gap-1'>
-										<div className='flex items-center justify-between text-xs'>
-											<span className={`inline-flex items-center ${bar.highlight ? 'text-white' : 'text-zinc-500'}`}>
-												{bar.label}
-												{bar.note && <Tooltip note={bar.note} />}
-											</span>
-											<span className={bar.highlight ? 'font-medium text-[#FF4500]' : 'text-zinc-500'}>
-												{bar.value}
-											</span>
-										</div>
-										{!card.noBars && (
-										<div className={`w-full ${bar.infinite ? 'relative' : ''}`}>
-											{bar.infinite ? (
-												<>
-													<div className='h-1.5 w-full overflow-hidden rounded-full bg-white/5'>
-														<div className='h-full w-full rounded-full bg-[#FF4500]' />
-													</div>
-													<div
-														className='absolute right-8 top-1/2 -translate-y-1/2 rotate-12'
-														style={{
-															width: '6px',
-															height: '14px',
-															backgroundColor: '#020202',
-															borderLeft: '1.5px solid #FF4500',
-															borderRight: '1.5px solid #FF4500',
-														}}
-													/>
-												</>
-											) : (
-												<div className='h-1.5 w-full overflow-hidden rounded-full bg-white/5'>
-													<motion.div
-														className={`h-full rounded-full ${bar.highlight ? 'bg-[#FF4500]' : 'bg-zinc-600'}`}
-														initial={{ width: 0 }}
-														whileInView={{ width: `${widths[barIdx]}%` }}
-														viewport={{ once: true }}
-														transition={{ duration: 0.6, delay: 0.2 }}
-													/>
-												</div>
-											)}
-										</div>
-										)}
-									</div>
-								))}
-							</div>
-						</motion.div>
-					);
+						return (
+							<BenchCard
+								key={card.title}
+								title={card.title}
+								statNote={card.hero ?? accent?.value ?? ''}
+								verb={card.verb}
+								direction={card.direction}
+								rows={rows}
+								note={card.note}
+							/>
+						);
 					})}
 				</div>
+
+				<p className='mt-8 font-mono text-xs leading-relaxed text-ink-faint'>
+					Methodology — figures are directional, measured on commodity AWS infrastructure. Hover each entry for the measurement setup.
+				</p>
 			</div>
 		</section>
 	);
diff --git a/website/src/components/marketing/sections/BuiltInFeatures.tsx b/website/src/components/marketing/sections/BuiltInFeatures.tsx
index d6e97b2b22..fc8ec7efa6 100644
--- a/website/src/components/marketing/sections/BuiltInFeatures.tsx
+++ b/website/src/components/marketing/sections/BuiltInFeatures.tsx
@@ -2,6 +2,7 @@
 
 import { Database, Globe, GitBranch, Clock, Wifi, ListOrdered, Infinity, Layers, ArrowRight } from 'lucide-react';
 import { motion } from 'framer-motion';
+import { SECTION_H2_CLASS, SUBTITLE_CLASS } from '../typography';
 
 const RivetActorIcon = ({ className }: { className?: string }) => (
   <svg width="32" height="32" viewBox="0 0 176 173" className={className}>
@@ -52,8 +53,8 @@ const features = [
   },
   {
     icon: Layers,
-    title: 'Scales infinitely, scales to zero',
-    description: 'Supports bursty workloads and is cost-efficient.',
+    title: 'Scales to zero, bursts to thousands',
+    description: 'Sleeps at near-zero cost when idle, fans out when traffic spikes.',
     href: '/docs/actors/design-patterns',
   },
   {
@@ -90,7 +91,7 @@ const features = [
 
 export const BuiltInFeatures = () => {
   return (
-    <section className='relative border-t border-b border-white/10 bg-white/[0.03] px-6 py-16 lg:py-24'>
+    <section className='relative border-y border-ink/10 bg-paper-deep/40 px-6 py-16 lg:py-24'>
       <div className='mx-auto w-full max-w-7xl'>
         <motion.div
           initial={{ opacity: 0, y: 20 }}
@@ -99,10 +100,10 @@ export const BuiltInFeatures = () => {
           transition={{ duration: 0.5 }}
           className='mb-10'
         >
-          <h2 className='mb-2 text-2xl font-normal tracking-tight text-white md:text-4xl'>
+          <h2 className={SECTION_H2_CLASS}>
             A lightweight primitive with powerful capabilities.
           </h2>
-          <p className='text-base leading-relaxed text-zinc-500'>
+          <p className={SUBTITLE_CLASS}>
             One Actor per agent, per session, per user — state, storage, and networking included.
           </p>
         </motion.div>
@@ -118,16 +119,16 @@ export const BuiltInFeatures = () => {
                 whileInView={{ opacity: 1, y: 0 }}
                 viewport={{ once: true }}
                 transition={{ duration: 0.4, delay: idx * 0.05 }}
-                className='group flex items-start justify-between gap-3 rounded-xl px-4 py-4 -mx-4 border border-transparent transition-colors duration-200 hover:bg-[#FF4500]/[0.06] hover:border-[#FF4500]/[0.12]'
+                className='group flex items-start justify-between gap-3 rounded-xl px-4 py-4 -mx-4 border border-transparent transition-colors duration-200 hover:border-ink/25'
               >
                 <div className='flex flex-col gap-2'>
                   <div className='flex items-center gap-2.5'>
-                    <Icon className='h-4 w-4 text-zinc-500' />
-                    <span className='text-sm font-medium text-white'>{feature.title}</span>
+                    <Icon className='h-4 w-4 text-olive' />
+                    <span className='text-sm font-medium text-ink'>{feature.title}</span>
                   </div>
-                  <p className='text-xs leading-relaxed text-zinc-500'>{feature.description}</p>
+                  <p className='text-xs leading-relaxed text-ink-faint'>{feature.description}</p>
                 </div>
-                <ArrowRight className='h-4 w-4 mt-0.5 flex-shrink-0 text-[#FF4500] opacity-0 translate-x-0 transition-all duration-200 group-hover:opacity-100 group-hover:translate-x-1' />
+                <ArrowRight className='h-4 w-4 mt-0.5 flex-shrink-0 text-pine opacity-0 translate-x-0 transition-all duration-200 group-hover:opacity-100 group-hover:translate-x-1' />
               </motion.a>
             );
           })}
diff --git a/website/src/components/marketing/sections/CTASection.tsx b/website/src/components/marketing/sections/CTASection.tsx
deleted file mode 100644
index 06288e73b3..0000000000
--- a/website/src/components/marketing/sections/CTASection.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { MarketingButton } from '../components/MarketingButton';
-import { AnimatedCTATitle } from '../components/AnimatedCTATitle';
-
-export function CTASection() {
-  return (
-    <div className='mx-auto max-w-4xl text-center'>
-      <AnimatedCTATitle />
-
-      <div className='h-8' />
-
-      <div className='mb-4 flex flex-col justify-center gap-4 sm:flex-row'>
-        <MarketingButton href='/docs/quickstart/' primary>
-          Get Started
-        </MarketingButton>
-        <MarketingButton href='/talk-to-an-engineer'>Talk to an engineer</MarketingButton>
-      </div>
-    </div>
-  );
-}
diff --git a/website/src/components/marketing/sections/CodeSnippetsSection.tsx b/website/src/components/marketing/sections/CodeSnippetsSection.tsx
deleted file mode 100644
index 055818f37f..0000000000
--- a/website/src/components/marketing/sections/CodeSnippetsSection.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import CodeSnippets from '../components/code-snippets';
-
-export function CodeSnippetsSection() {
-  return (
-    <div className='mx-auto max-w-7xl'>
-      <div className='mb-16 text-center'>
-        <h2 className='font-700 mb-6 text-2xl text-white sm:text-3xl'>See It In Action</h2>
-        <p className='font-500 mx-auto max-w-3xl text-lg text-white/60 sm:text-xl'>
-          Real-world examples showing how Rivet Actors simplify complex backends
-        </p>
-      </div>
-
-      <CodeSnippets />
-    </div>
-  );
-}
diff --git a/website/src/components/marketing/sections/CodeWalkthrough.tsx b/website/src/components/marketing/sections/CodeWalkthrough.tsx
deleted file mode 100644
index 71ec8c8261..0000000000
--- a/website/src/components/marketing/sections/CodeWalkthrough.tsx
+++ /dev/null
@@ -1,224 +0,0 @@
-'use client';
-
-import { useEffect, useState, useRef } from 'react';
-import { motion } from 'framer-motion';
-import { codeToHtml } from 'shiki';
-
-const codeLines = [
-  `actor({`,
-  `  state: { messages: [], history: [] },`,
-  ``,
-  `  run: async (c) => {`,
-  `    while (true) {`,
-  `      const message = await c.queue.next("message");`,
-  `      const response = await ai(message);`,
-  `      c.state.history.push({ message, response });`,
-  `      c.broadcast("response", response);`,
-  `    }`,
-  `  },`,
-  `});`,
-];
-
-const useHighlightedCodeLines = (lines: string[]) => {
-  const [highlightedLines, setHighlightedLines] = useState<string[]>([]);
-  const cache = useRef<Record<string, string[]>>({});
-
-  useEffect(() => {
-    const code = lines.join('\n');
-    if (cache.current[code]) {
-      setHighlightedLines(cache.current[code]);
-      return;
-    }
-
-    codeToHtml(code, {
-      lang: 'typescript',
-      theme: 'ayu-dark',
-    }).then((html) => {
-      const parser = new DOMParser();
-      const doc = parser.parseFromString(html, 'text/html');
-      const parsedLines = Array.from(doc.querySelectorAll('span.line')).map((line) => line.innerHTML);
-
-      cache.current[code] = parsedLines;
-      setHighlightedLines(parsedLines);
-    });
-  }, [lines]);
-
-  return highlightedLines;
-};
-
-export const CodeWalkthrough = () => {
-  const [activeStep, setActiveStep] = useState(0);
-  const observerRefs = useRef<(HTMLDivElement | null)[]>([]);
-  const highlightedCodeLines = useHighlightedCodeLines(codeLines);
-
-  const steps = [
-    {
-      title: 'Define the Actor',
-      description:
-        'An Actor is an independent process with its own isolated state. Create one per user, per agent, or per session.',
-      lines: [0, 11]
-    },
-    {
-      title: 'Declare State',
-      description:
-        'State is automatically persisted and loaded into memory when the Actor wakes. No database queries. No ORM. Just an object.',
-      lines: [1]
-    },
-    {
-      title: 'Process Messages',
-      description:
-        'The run loop executes continuously. Wait for messages from a queue, process them with your logic. The Actor stays alive as long as it needs to.',
-      lines: [3, 4, 5, 6, 7]
-    },
-    {
-      title: 'Broadcast in Real-time',
-      description:
-        'Push updates to all connected clients instantly. WebSockets and SSE are built in — no Socket.io, no pub/sub layer, just one line.',
-      lines: [8, 9, 10]
-    }
-  ];
-
-  useEffect(() => {
-    const options = {
-      root: null,
-      rootMargin: '-40% 0px -40% 0px',
-      threshold: 0
-    };
-
-    const observer = new IntersectionObserver(entries => {
-      entries.forEach(entry => {
-        if (entry.isIntersecting) {
-          const index = Number(entry.target.dataset.index);
-          setActiveStep(index);
-        }
-      });
-    }, options);
-
-    observerRefs.current.forEach(ref => {
-      if (ref) observer.observe(ref);
-    });
-
-    return () => observer.disconnect();
-  }, []);
-
-  return (
-    <section className='relative border-t border-white/10 bg-white/[0.03] pb-24 pt-48'>
-      <div className='mx-auto max-w-7xl px-6'>
-        {/* Mobile-only header */}
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.5 }}
-          className='mb-12 lg:hidden'
-        >
-          <h2 className='mb-2 text-2xl font-normal tracking-tight text-white md:text-4xl'>
-            How Actors work.
-          </h2>
-          <p className='max-w-xl text-base leading-relaxed text-zinc-500'>
-            Define state, write a run loop, broadcast events.
-          </p>
-        </motion.div>
-
-        <div className='grid grid-cols-1 gap-16 lg:grid-cols-2'>
-          {/* Sticky Code Block */}
-          <div className='relative hidden lg:block'>
-            <div className='sticky top-32'>
-              <motion.div
-                initial={{ opacity: 0, y: 20 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true }}
-                transition={{ duration: 0.5 }}
-                className='mb-8'
-              >
-                <h2 className='mb-2 text-2xl font-normal tracking-tight text-white md:text-4xl'>
-                  How Actors work.
-                </h2>
-                <p className='max-w-xl text-base leading-relaxed text-zinc-500'>
-                  Define state, write a run loop, broadcast events.
-                </p>
-              </motion.div>
-              <div className='border-t border-white/10 pt-4'>
-                <div className='mb-4 font-mono text-xs text-zinc-500'>actor.ts</div>
-                <div className='overflow-x-auto font-mono text-sm leading-7'>
-                  {codeLines.map((line, idx) => {
-                    const isHighlighted = steps[activeStep].lines.includes(idx);
-                    const isDimmed = !isHighlighted;
-
-                    return (
-                      <div
-                        key={idx}
-                        className={`flex transition-all duration-500 ${
-                          isDimmed ? 'opacity-50' : 'opacity-100'
-                        }`}
-                      >
-                        <span className='inline-block w-8 select-none pr-4 text-right text-zinc-700'>
-                          {idx + 1}
-                        </span>
-                        {highlightedCodeLines[idx] ? (
-                          <span
-                            className={`whitespace-pre ${isHighlighted ? 'font-medium' : ''}`}
-                            dangerouslySetInnerHTML={{ __html: highlightedCodeLines[idx] }}
-                          />
-                        ) : (
-                          <span className={`whitespace-pre ${isHighlighted ? 'font-medium text-white' : 'text-zinc-400'}`}>
-                            {line}
-                          </span>
-                        )}
-                      </div>
-                    );
-                  })}
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Scrolling Steps */}
-          <div className='space-y-64 py-24'>
-            {steps.map((step, idx) => (
-              <div
-                key={idx}
-                data-index={idx}
-                ref={el => (observerRefs.current[idx] = el)}
-                className={`border-t border-white/10 pt-6 transition-all duration-500 ${
-                  idx === activeStep ? 'opacity-100' : 'opacity-50'
-                }`}
-              >
-                <div className='mb-3'>
-                  <span
-                    className={`font-mono text-xs transition-colors ${
-                      idx === activeStep ? 'text-zinc-500' : 'text-zinc-600'
-                    }`}
-                  >
-                    {String(idx + 1).padStart(2, '0')}/{String(steps.length).padStart(2, '0')}
-                  </span>
-                  <h3
-                    className={`mt-1 text-lg font-normal transition-colors ${
-                      idx === activeStep ? 'text-white' : 'text-zinc-500'
-                    }`}
-                  >
-                    {step.title}
-                  </h3>
-                </div>
-                <p className='text-base leading-relaxed text-zinc-500'>{step.description}</p>
-
-                {/* Mobile Only Code Snippet */}
-                <div className='mt-6 overflow-x-auto rounded-lg border border-white/10 bg-black p-4 font-mono text-xs leading-6 lg:hidden'>
-                  {step.lines.map(lineIdx => (
-                    <div key={lineIdx} className='whitespace-pre text-zinc-300'>
-                      {highlightedCodeLines[lineIdx] ? (
-                        <span dangerouslySetInnerHTML={{ __html: highlightedCodeLines[lineIdx] }} />
-                      ) : (
-                        codeLines[lineIdx]
-                      )}
-                    </div>
-                  ))}
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
diff --git a/website/src/components/marketing/sections/CommunitySection.tsx b/website/src/components/marketing/sections/CommunitySection.tsx
deleted file mode 100644
index 383f488df6..0000000000
--- a/website/src/components/marketing/sections/CommunitySection.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { Icon, faBluesky, faDiscord, faGithub, faXTwitter } from '@rivet-gg/icons';
-
-export function CommunitySection() {
-  const communityLinks = [
-    {
-      href: 'https://rivet.dev/discord',
-      icon: faDiscord,
-      label: 'Discord'
-    },
-    {
-      href: 'https://x.com/rivet_dev',
-      icon: faXTwitter,
-      label: 'X'
-    },
-    {
-      href: 'https://bsky.app/profile/rivet.gg',
-      icon: faBluesky,
-      label: 'Bluesky'
-    },
-    {
-      href: 'https://github.com/rivet-dev/rivet/discussions',
-      icon: faGithub,
-      label: 'Discussions'
-    },
-    {
-      href: 'https://github.com/rivet-dev/rivet/issues',
-      icon: faGithub,
-      label: 'Issues'
-    }
-  ];
-
-  return (
-    <div className='mx-auto max-w-6xl text-center'>
-      <div className='mb-16'>
-        <h2 className='font-700 mb-6 text-2xl text-white sm:text-3xl'>Join the Community</h2>
-        <p className='font-500 mx-auto max-w-2xl text-lg text-white/40'>
-          Join thousands of developers building with Rivet Actors today
-        </p>
-      </div>
-
-      <div className='mx-auto grid max-w-4xl grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5'>
-        {communityLinks.map((link, index) => (
-          <a
-            key={index}
-            href={link.href}
-            className='bg-white/2 group flex flex-col items-center gap-3 rounded-xl border border-white/20 px-4 py-6 transition-all duration-200 hover:border-white/40 hover:bg-white/5'
-            target='_blank'
-            rel='noopener noreferrer'
-          >
-            <Icon icon={link.icon} className='h-6 w-6 text-white' />
-            <span className='text-sm font-medium text-white'>{link.label}</span>
-          </a>
-        ))}
-      </div>
-    </div>
-  );
-}
diff --git a/website/src/components/marketing/sections/ConceptSection.tsx b/website/src/components/marketing/sections/ConceptSection.tsx
deleted file mode 100644
index 78821c0d0b..0000000000
--- a/website/src/components/marketing/sections/ConceptSection.tsx
+++ /dev/null
@@ -1,229 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import { Server, Box, Database, Cpu, Check } from 'lucide-react';
-import { motion } from 'framer-motion';
-
-const ArchitectureComparison = () => {
-  const [activeStep, setActiveStep] = useState(0);
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setActiveStep(prev => (prev + 1) % 4);
-    }, 2000);
-    return () => clearInterval(interval);
-  }, []);
-
-  return (
-    <div className='grid w-full grid-cols-1 gap-8 md:grid-cols-2'>
-      {/* Traditional Serverless */}
-      <motion.div
-        initial={{ opacity: 0, x: -20 }}
-        whileInView={{ opacity: 1, x: 0 }}
-        viewport={{ once: true }}
-        transition={{ duration: 0.5 }}
-        className='relative overflow-hidden rounded-2xl border border-white/5 bg-zinc-900/30 p-6 backdrop-blur-sm transition-colors duration-500 hover:bg-zinc-900/50'
-      >
-        {/* Top Shine Highlight */}
-        <div className='absolute left-0 right-0 top-0 z-10 h-[1px] bg-gradient-to-r from-transparent via-white/20 to-transparent' />
-        <div className='relative z-10 mb-6 flex items-center gap-2'>
-          <div className='rounded bg-red-500/10 p-2 text-red-400'>
-            <Server className='h-4 w-4' />
-          </div>
-          <h4 className='font-semibold text-white'>Traditional Serverless</h4>
-        </div>
-
-        <div className='relative flex h-48 flex-col items-center justify-center gap-8'>
-          <div className='flex w-full items-center justify-center gap-8'>
-            <div
-              className={`rounded border px-4 py-2 ${
-                activeStep === 0 ? 'border-white bg-white text-black' : 'border-zinc-700 text-zinc-500'
-              } font-mono text-xs transition-colors`}
-            >
-              Client
-            </div>
-            <div
-              className={`h-[1px] w-12 ${
-                activeStep === 0 ? 'bg-white' : 'bg-zinc-800'
-              } relative transition-colors`}
-            >
-              <div
-                className={`absolute -top-1 right-0 h-2 w-2 border-r border-t ${
-                  activeStep === 0 ? 'border-white' : 'border-zinc-800'
-                } rotate-45`}
-              />
-            </div>
-            <div
-              className={`rounded border px-4 py-2 ${
-                activeStep === 1 || activeStep === 3
-                  ? 'border-blue-500 bg-blue-500/10 text-blue-400'
-                  : 'border-zinc-700 text-zinc-500'
-              } font-mono text-xs transition-colors`}
-            >
-              Lambda
-            </div>
-          </div>
-
-          <div className='flex flex-col items-center gap-2'>
-            <div
-              className={`h-8 w-[1px] ${
-                activeStep === 1 || activeStep === 2 ? 'bg-blue-500' : 'bg-zinc-800'
-              } relative transition-colors`}
-            >
-              <div
-                className={`absolute -left-1 bottom-0 h-2 w-2 border-b border-r ${
-                  activeStep === 1 || activeStep === 2 ? 'border-blue-500' : 'border-zinc-800'
-                } rotate-45`}
-              />
-            </div>
-            <div
-              className={`rounded border px-4 py-2 ${
-                activeStep === 2
-                  ? 'border-[#FF4500] bg-[#FF4500]/10 text-[#FF4500]'
-                  : 'border-zinc-700 text-zinc-500'
-              } font-mono text-xs transition-colors`}
-            >
-              External DB
-            </div>
-          </div>
-        </div>
-        <p className='mt-4 text-center text-xs text-zinc-500'>
-          State must be fetched from a remote DB for every request.
-          <br />
-          <span className='text-red-400'>High Latency • Connection Limits</span>
-        </p>
-      </motion.div>
-
-      {/* Rivet Actor */}
-      <motion.div
-        initial={{ opacity: 0, x: 20 }}
-        whileInView={{ opacity: 1, x: 0 }}
-        viewport={{ once: true }}
-        transition={{ duration: 0.5 }}
-        className='relative overflow-hidden rounded-2xl border border-white/10 bg-zinc-900/30 p-6 shadow-[0_0_50px_-12px_rgba(16,185,129,0.1)] backdrop-blur-md transition-shadow duration-500 hover:shadow-[0_0_50px_-12px_rgba(16,185,129,0.2)]'
-      >
-        {/* Top Shine Highlight (Green tinted for the 'hero' card) */}
-        <div className='absolute left-0 right-0 top-0 z-10 h-[1px] bg-gradient-to-r from-transparent via-emerald-500/40 to-transparent' />
-        <div className='pointer-events-none absolute inset-0 bg-gradient-to-b from-emerald-500/5 to-transparent' />
-        <div className='relative z-10 mb-6 flex items-center gap-2'>
-          <div className='rounded bg-emerald-500/10 p-2 text-emerald-500'>
-            <Box className='h-4 w-4' />
-          </div>
-          <h4 className='font-semibold text-white'>Rivet Actor Model</h4>
-        </div>
-
-        <div className='relative flex h-48 items-center justify-center'>
-          <div className='flex w-full items-center justify-center gap-8'>
-            <div
-              className={`rounded border px-4 py-2 ${
-                activeStep % 2 === 0 ? 'border-white bg-white text-black' : 'border-zinc-700 text-zinc-500'
-              } font-mono text-xs transition-colors`}
-            >
-              Client
-            </div>
-            <div
-              className={`h-[1px] w-16 ${
-                activeStep % 2 === 0 ? 'bg-white' : 'bg-zinc-800'
-              } relative transition-colors`}
-            >
-              <div
-                className={`absolute -top-1 right-0 h-2 w-2 border-r border-t ${
-                  activeStep % 2 === 0 ? 'border-white' : 'border-zinc-800'
-                } rotate-45`}
-              />
-              <div
-                className={`absolute -top-1 left-0 h-2 w-2 border-b border-l ${
-                  activeStep % 2 === 0 ? 'border-white' : 'border-zinc-800'
-                } rotate-45`}
-              />
-            </div>
-
-            {/* The Actor */}
-            <div className='relative'>
-              <div
-                className={`h-32 w-32 rounded-xl border ${
-                  activeStep % 2 !== 0
-                    ? 'border-emerald-500 bg-emerald-500/10'
-                    : 'border-zinc-700 bg-zinc-900/50'
-                } flex flex-col items-center justify-center gap-2 transition-all`}
-              >
-                <div className='font-mono text-xs font-bold text-white'>Actor</div>
-                <div className='h-[1px] w-full bg-white/10' />
-                <div className='flex items-center gap-2'>
-                  <Cpu className='h-3 w-3 text-zinc-400' />
-                  <span className='text-[10px] text-zinc-400'>Compute</span>
-                </div>
-                <div className='flex items-center gap-2'>
-                  <Database className='h-3 w-3 text-emerald-500' />
-                  <span className='text-[10px] text-emerald-500'>In-Mem State</span>
-                </div>
-              </div>
-              {/* Pulse effect */}
-              {activeStep % 2 !== 0 && (
-                <div className='absolute inset-0 animate-ping rounded-xl border border-emerald-500 opacity-20' />
-              )}
-            </div>
-          </div>
-        </div>
-        <p className='mt-4 text-center text-xs text-zinc-500'>
-          State lives <i>with</i> the compute in memory.
-          <br />
-          <span className='text-emerald-500'>Zero Latency • Realtime • Persistent</span>
-        </p>
-      </motion.div>
-    </div>
-  );
-};
-
-export const ConceptSection = () => (
-  <section id='actors' className='border-y border-white/5 bg-zinc-900/10 py-32'>
-    <div className='mx-auto max-w-7xl px-6'>
-      <div className='flex flex-col gap-16'>
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.5 }}
-        >
-          <h2 className='mb-6 text-3xl font-medium tracking-tight text-white md:text-5xl'>
-            Think in Actors,
-            <br />
-            not just Functions.
-          </h2>
-        </motion.div>
-
-        <div className='grid grid-cols-1 gap-8 md:grid-cols-2'>
-          <motion.p
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.5, delay: 0.1 }}
-            className='text-lg leading-relaxed text-zinc-400'
-          >
-            <strong className='text-white'>What is an Actor?</strong>
-            <br />
-            An Actor is a tiny, isolated server that holds its own data in memory. Unlike a stateless function that
-            forgets everything after it runs, an Actor remembers.
-          </motion.p>
-          <motion.p
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.5, delay: 0.2 }}
-            className='text-lg leading-relaxed text-zinc-400'
-          >
-            <strong className='text-white'>Why use them?</strong>
-            <br />
-            When you need to manage state — like a chat room, user session, or multiplayer document — fetching that data
-            frequently from a database is slow and expensive. Actors combine state and compute, keeping your data in
-            memory in the same place as your application code.
-          </motion.p>
-        </div>
-
-        <div className='w-full'>
-          <ArchitectureComparison />
-        </div>
-      </div>
-    </div>
-  </section>
-);
diff --git a/website/src/components/marketing/sections/DeploymentOptionsSection.tsx b/website/src/components/marketing/sections/DeploymentOptionsSection.tsx
deleted file mode 100644
index a5e961534c..0000000000
--- a/website/src/components/marketing/sections/DeploymentOptionsSection.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { CopyCommand } from '../components/CopyCommand';
-import { MarketingButton } from '../components/MarketingButton';
-
-interface DeploymentOptionProps {
-  title: string;
-  description: string;
-  children?: React.ReactNode;
-}
-
-function DeploymentOption({ title, description, children }: DeploymentOptionProps) {
-  return (
-    <div className='rounded-xl border border-white/10 bg-white/[0.02] p-8'>
-      <h3 className='mb-4 text-2xl font-medium text-white'>{title}</h3>
-      <p className='mb-6 leading-relaxed text-white/60'>{description}</p>
-      {children}
-    </div>
-  );
-}
-
-export function DeploymentOptionsSection() {
-  return (
-    <section className='w-full'>
-      <div className='mx-auto max-w-7xl'>
-        <div className='mb-16 text-center'>
-          <h2 className='font-700 mb-6 text-2xl text-white sm:text-3xl'>Run It Your Way</h2>
-        </div>
-
-        <div className='mb-12 grid grid-cols-1 gap-6 lg:grid-cols-3'>
-          {/* <DeploymentOption
-            title='Rivet Cloud'
-            description='Build on any cloud while we manage the Actors for you.'
-          >
-            <div className='mt-4 flex flex-col gap-3'>
-              <a href='/dashboard'
-                className='group inline-flex items-center gap-2 text-sm text-[#FF5C00] transition-colors hover:text-[#FF5C00]/80'
-              >
-                Sign In with Rivet
-                <span className='transition-transform group-hover:translate-x-1'>→</span>
-              </a>
-            </div>
-          </DeploymentOption> */}
-
-          <DeploymentOption
-            title='On-prem/hybrid cloud'
-            description='Enterprise grade Rivet for wherever you need it.'
-          >
-            <div className='mt-4 flex flex-col gap-3'>
-              <a href='/docs/general/self-hosting'
-                className='group inline-flex items-center gap-2 text-sm text-[#FF5C00] transition-colors hover:text-[#FF5C00]/80'
-              >
-                Contact Sales
-                <span className='transition-transform group-hover:translate-x-1'>→</span>
-              </a>
-            </div>
-          </DeploymentOption>
-
-          <DeploymentOption
-            title='Rivet Open-Source'
-            description='Rivet is open-source Apache 2.0 and easy to build with.'
-          >
-            <div className='mt-4 flex flex-col gap-3'>
-              <a href='https://github.com/rivet-dev/rivet'
-                className='group inline-flex items-center gap-2 text-sm text-[#FF5C00] transition-colors hover:text-[#FF5C00]/80'
-                target='_blank'
-                rel='noopener noreferrer'
-              >
-                Get the source code
-                <span className='transition-transform group-hover:translate-x-1'>→</span>
-              </a>
-            </div>
-          </DeploymentOption>
-        </div>
-
-        <div className='mt-12'>
-          <DeploymentOption
-            title='Local Development'
-            description='Just an npm package. No CLI or Docker container to install and learn. Get started in seconds with your existing JavaScript toolchain.'
-          >
-            <div className='mt-4 flex flex-col gap-3'>
-              <a href='/docs/quickstart/'
-                className='group inline-flex items-center gap-2 text-sm text-[#FF5C00] transition-colors hover:text-[#FF5C00]/80'
-              >
-                Quickstart
-                <span className='transition-transform group-hover:translate-x-1'>→</span>
-              </a>
-            </div>
-          </DeploymentOption>
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/website/src/components/marketing/sections/DynamicActorsSection.tsx b/website/src/components/marketing/sections/DynamicActorsSection.tsx
deleted file mode 100644
index c63cc29df7..0000000000
--- a/website/src/components/marketing/sections/DynamicActorsSection.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-'use client';
-
-import { GitBranch, Database, Bot } from 'lucide-react';
-import { motion } from 'framer-motion';
-
-const useCases = [
-	{
-		icon: GitBranch,
-		title: 'AI-Generated Workflows',
-		description: 'Your agents write multi-step workflows that run as durable actors.',
-	},
-	{
-		icon: Database,
-		title: 'AI-Generated Databases',
-		description: 'Spin up per-tenant databases from AI-authored schemas.',
-	},
-	{
-		icon: Bot,
-		title: 'AI-Generated Agents',
-		description: 'Deploy autonomous agents from generated code with full actor capabilities.',
-	},
-];
-
-export const DynamicActorsSection = () => {
-	return (
-		<section className='border-t border-white/10 px-6 py-16 lg:py-24'>
-			<div className='mx-auto w-full max-w-7xl'>
-				<div className='grid grid-cols-1 gap-12 lg:grid-cols-2'>
-					<motion.div
-						initial={{ opacity: 0, y: 20 }}
-						whileInView={{ opacity: 1, y: 0 }}
-						viewport={{ once: true }}
-						transition={{ duration: 0.5 }}
-					>
-						<h2 className='mb-4 text-2xl font-normal tracking-tight text-white md:text-4xl'>
-							Securely Run AI-Generated Code
-						</h2>
-						<p className='max-w-lg text-base leading-relaxed text-zinc-500'>
-							Dynamic Actors let your AI generate and deploy actors at runtime. Each actor runs in its own isolated process with built-in state, storage, and networking — no containers, no cold infrastructure.
-						</p>
-					</motion.div>
-
-					<div className='flex flex-col gap-6'>
-						{useCases.map((useCase, idx) => {
-							const Icon = useCase.icon;
-							return (
-								<motion.div
-									key={useCase.title}
-									initial={{ opacity: 0, x: 20 }}
-									whileInView={{ opacity: 1, x: 0 }}
-									viewport={{ once: true }}
-									transition={{ duration: 0.4, delay: idx * 0.05 }}
-									className='flex gap-4 border-l border-white/10 pl-6'
-								>
-									<Icon className='mt-0.5 h-5 w-5 flex-shrink-0 text-zinc-500' />
-									<div>
-										<h3 className='text-sm font-medium text-white'>{useCase.title}</h3>
-										<p className='mt-1 text-xs leading-relaxed text-zinc-500'>{useCase.description}</p>
-									</div>
-								</motion.div>
-							);
-						})}
-					</div>
-				</div>
-			</div>
-		</section>
-	);
-};
diff --git a/website/src/components/marketing/sections/FeaturesBentoBox.tsx b/website/src/components/marketing/sections/FeaturesBentoBox.tsx
deleted file mode 100644
index 8799688c56..0000000000
--- a/website/src/components/marketing/sections/FeaturesBentoBox.tsx
+++ /dev/null
@@ -1,293 +0,0 @@
-'use client';
-
-import { useRef } from 'react';
-import { Icon } from '@rivet-gg/icons';
-import {
-  faDatabase,
-  faBolt,
-  faMoon,
-  faClock,
-  faShieldHalved,
-  faRocket,
-  faCheckCircle
-} from '@rivet-gg/icons';
-
-interface FeatureCardProps {
-  title: string;
-  description: string;
-  href: string;
-  className?: string;
-  icon: any;
-  variant?: 'default' | 'large' | 'medium' | 'small' | 'wide' | 'code';
-}
-
-function FeatureCard({
-  title,
-  description,
-  href,
-  className = '',
-  icon,
-  variant = 'default'
-}: FeatureCardProps) {
-  const cardRef = useRef<HTMLAnchorElement>(null);
-
-  const handleMouseMove = (e: React.MouseEvent<HTMLAnchorElement>) => {
-    if (!cardRef.current) return;
-    const card = cardRef.current;
-
-    const iconContainer = card.querySelector('.icon-spotlight-container') as HTMLElement;
-    if (!iconContainer) return;
-
-    const iconRect = iconContainer.getBoundingClientRect();
-    const x = ((e.clientX - iconRect.left) / iconRect.width) * 100;
-    const y = ((e.clientY - iconRect.top) / iconRect.height) * 100;
-
-    iconContainer.style.setProperty('--mouse-x', `${x}%`);
-    iconContainer.style.setProperty('--mouse-y', `${y}%`);
-  };
-
-  if (variant === 'large') {
-    return (
-      <a
-        ref={cardRef}
-        href={href}
-        className={`group relative block ${className}`}
-        onMouseMove={handleMouseMove}
-      >
-        <div className='relative flex h-full flex-col overflow-hidden rounded-xl border border-white/20 bg-white/[0.008] p-6 transition-all hover:border-white/30 hover:bg-white/[0.02]'>
-          <div className='pointer-events-none absolute inset-0 bg-gradient-to-b from-white/[0.04] via-white/[0.01] to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100' />
-
-          <div className='relative z-10 flex flex-1 flex-col justify-between'>
-            <div>
-              <div className='mb-4'>
-                <Icon icon={icon} className='h-12 w-12 text-white/70' />
-              </div>
-              <h3 className='mb-3 text-2xl font-semibold text-white'>{title}</h3>
-              <p className='text-base leading-relaxed text-white/50'>{description}</p>
-            </div>
-          </div>
-        </div>
-      </a>
-    );
-  }
-
-  if (variant === 'medium') {
-    return (
-      <a
-        ref={cardRef}
-        href={href}
-        className={`group relative block ${className}`}
-        onMouseMove={handleMouseMove}
-      >
-        <div className='relative flex h-full flex-col overflow-hidden rounded-xl border border-white/20 bg-white/[0.008] p-6 transition-colors hover:border-white/30 hover:bg-white/[0.02]'>
-          <div className='pointer-events-none absolute inset-0 bg-gradient-to-b from-white/[0.04] via-white/[0.01] to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100' />
-
-          <div className='relative z-10 mb-4'>
-            <Icon icon={icon} className='mb-3 h-10 w-10 text-white/70' />
-            <h3 className='mb-2 text-lg font-semibold text-white'>{title}</h3>
-            <p className='text-sm leading-relaxed text-white/50'>{description}</p>
-          </div>
-        </div>
-      </a>
-    );
-  }
-
-  if (variant === 'small') {
-    return (
-      <a
-        ref={cardRef}
-        href={href}
-        className={`group relative block ${className}`}
-        onMouseMove={handleMouseMove}
-      >
-        <div className='relative flex h-full flex-col overflow-hidden rounded-xl border border-white/20 bg-white/[0.008] p-5 transition-colors hover:border-white/30 hover:bg-white/[0.02]'>
-          <div className='pointer-events-none absolute inset-0 bg-gradient-to-b from-white/[0.04] via-white/[0.01] to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100' />
-
-          <div className='relative z-10'>
-            <div className='mb-3'>
-              <Icon icon={icon} className='h-8 w-8 text-white/60' />
-            </div>
-            <h3 className='mb-2 text-base font-semibold text-white'>{title}</h3>
-            <p className='text-sm leading-relaxed text-white/40'>{description}</p>
-          </div>
-        </div>
-      </a>
-    );
-  }
-
-  if (variant === 'code') {
-    return (
-      <div className={`group relative block ${className}`}>
-        <div className='relative h-full overflow-hidden rounded-xl border border-white/10 bg-[#1e1e1e] p-6 transition-colors hover:border-white/20'>
-          <h3 className='mb-4 text-lg font-semibold text-white'>{title}</h3>
-          <pre className='overflow-x-auto rounded-lg bg-[#282828] p-4'>
-            <code className='whitespace-pre font-mono text-sm leading-relaxed text-[#d4d4d4]'>
-              <span className='text-[#c586c0]'>const</span> <span className='text-[#9cdcfe]'>counter</span> ={' '}
-              <span className='text-[#dcdcaa]'>actor</span>({`{`}
-              {'\n'}
-              {`  `}
-              <span className='text-[#9cdcfe]'>state</span>: {`{ `}
-              <span className='text-[#9cdcfe]'>count</span>: <span className='text-[#b5cea8]'>0</span> {`}`},
-              {`\n`}
-              {`  `}
-              <span className='text-[#9cdcfe]'>actions</span>: {`{`}
-              {'\n'}
-              {`    `}
-              <span className='text-[#dcdcaa]'>increment</span>: (<span className='text-[#9cdcfe]'>c</span>)
-              =&gt; {`{`}
-              {'\n'}
-              {`      `}
-              <span className='text-[#9cdcfe]'>c</span>.<span className='text-[#9cdcfe]'>state</span>.
-              <span className='text-[#9cdcfe]'>count</span>++;{`\n`}
-              {`      `}
-              <span className='text-[#9cdcfe]'>c</span>.<span className='text-[#dcdcaa]'>broadcast</span>(
-              <span className='text-[#ce9178]'>"changed"</span>, <span className='text-[#9cdcfe]'>c</span>.
-              <span className='text-[#9cdcfe]'>state</span>.<span className='text-[#9cdcfe]'>count</span>);
-              {`\n`}
-              {`    `}
-              {`}`}
-              {`\n`}
-              {`  `}
-              {`}`}
-              {`\n`}
-              {`});`}
-            </code>
-          </pre>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <a
-      ref={cardRef}
-      href={href}
-      className={`group relative block ${className}`}
-      onMouseMove={handleMouseMove}
-    >
-      <div className='relative flex h-full flex-col overflow-hidden rounded-xl border border-white/20 bg-white/[0.008] p-6 transition-colors hover:border-white/30 hover:bg-white/[0.02]'>
-        <div className='pointer-events-none absolute inset-0 bg-gradient-to-b from-white/[0.04] via-white/[0.01] to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100' />
-
-        <div className='relative z-10 mb-6'>
-          <h3 className='mb-3 text-lg font-semibold text-white'>{title}</h3>
-          <p className='text-sm leading-relaxed text-white/40'>{description}</p>
-        </div>
-
-        <div className='relative z-10 flex flex-1 items-center justify-center'>
-          <div className='icon-spotlight-container flex h-16 w-16 items-center justify-center'>
-            <Icon icon={icon} className='h-12 w-12 text-white/40' />
-          </div>
-        </div>
-      </div>
-    </a>
-  );
-}
-
-export function FeaturesBentoBox() {
-  const features = [
-    {
-      title: 'Long-Lived Stateful Compute',
-      description:
-        'Like AWS Lambda but with persistent memory and no timeouts. Your actors remember state between requests and intelligently hibernate when idle to save resources.',
-      href: '/docs/actors',
-      icon: faBolt,
-      variant: 'large' as const
-    },
-    {
-      title: 'Blazing-Fast Performance',
-      description:
-        'State stored on the same machine as compute. Ultra-fast reads/writes with no database round trips.',
-      href: '/docs/actors/state',
-      icon: faRocket,
-      variant: 'medium' as const
-    },
-    {
-      title: 'Built-in Realtime',
-      description: 'WebSockets support out of the box. Update state and broadcast changes instantly.',
-      href: '/docs/actors/events',
-      icon: faBolt,
-      variant: 'medium' as const
-    },
-    {
-      title: 'Fault Tolerant',
-      description: 'Built-in error handling & recovery',
-      href: '/docs/actors/lifecycle',
-      icon: faShieldHalved,
-      variant: 'small' as const
-    },
-    {
-      title: 'Auto-Hibernation',
-      description: 'Actors sleep when idle, wake instantly on demand',
-      href: '/docs/actors/lifecycle',
-      icon: faMoon,
-      variant: 'small' as const
-    },
-    {
-      title: 'Scheduling',
-      description: 'Persistent timeouts survive restarts and crashes',
-      href: '/docs/actors/schedule',
-      icon: faClock,
-      variant: 'small' as const
-    },
-    {
-      title: 'RPC & Events',
-      description: 'Full-featured messaging system',
-      href: '/docs/actors/actions',
-      icon: faDatabase,
-      variant: 'small' as const
-    }
-  ];
-
-  return (
-    <section className='w-full'>
-      <div className='container relative mx-auto max-w-[1500px] px-6 lg:px-16 xl:px-20'>
-        <h2 className='font-700 mb-8 text-center text-2xl text-white sm:text-3xl'>
-          Each lightweight Actor comes packed with features
-        </h2>
-        <div className='grid auto-rows-[200px] grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4 md:gap-4 xl:gap-6'>
-          {/* Large hero feature */}
-          <FeatureCard
-            title={features[0].title}
-            description={features[0].description}
-            href={features[0].href}
-            icon={features[0].icon}
-            className='sm:col-span-2 sm:row-span-2 md:col-span-2 md:row-span-2'
-            variant='large'
-          />
-
-          {/* Medium features */}
-          <FeatureCard
-            title={features[1].title}
-            description={features[1].description}
-            href={features[1].href}
-            icon={features[1].icon}
-            className='sm:col-span-2 md:col-span-2'
-            variant='medium'
-          />
-
-          <FeatureCard
-            title={features[2].title}
-            description={features[2].description}
-            href={features[2].href}
-            icon={features[2].icon}
-            className='sm:col-span-2 md:col-span-2'
-            variant='medium'
-          />
-
-          {/* Small features */}
-          {features.slice(3).map(feature => (
-            <FeatureCard
-              key={feature.href}
-              title={feature.title}
-              description={feature.description}
-              href={feature.href}
-              icon={feature.icon}
-              className='sm:col-span-1 md:col-span-1'
-              variant='small'
-            />
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/website/src/components/marketing/sections/FeaturesSection.tsx b/website/src/components/marketing/sections/FeaturesSection.tsx
deleted file mode 100644
index 3bda16f794..0000000000
--- a/website/src/components/marketing/sections/FeaturesSection.tsx
+++ /dev/null
@@ -1,223 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import { Database, Cpu, Clock, Wifi, Moon, Shield, Globe } from 'lucide-react';
-import { motion } from 'framer-motion';
-import actorsLogo from '@/images/products/actors-logo.svg';
-
-const ActorDiagram = () => {
-  const [activeStep, setActiveStep] = useState(0);
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setActiveStep(prev => (prev + 1) % 4);
-    }, 2000);
-    return () => clearInterval(interval);
-  }, []);
-
-  return (
-    <div className='flex h-full flex-col items-center justify-center p-6'>
-      <div className='relative flex items-center gap-6'>
-        {/* Client */}
-        <div
-          className={`rounded border px-3 py-1.5 ${
-            activeStep % 2 === 0 ? 'border-white bg-white text-black' : 'border-zinc-700 text-zinc-500'
-          } font-mono text-xs transition-colors`}
-        >
-          Client
-        </div>
-
-        {/* Connection line */}
-        <div
-          className={`h-[1px] w-12 ${
-            activeStep % 2 === 0 ? 'bg-white' : 'bg-zinc-800'
-          } relative transition-colors`}
-        >
-          <div
-            className={`absolute -top-1 right-0 h-2 w-2 border-r border-t ${
-              activeStep % 2 === 0 ? 'border-white' : 'border-zinc-800'
-            } rotate-45`}
-          />
-          <div
-            className={`absolute -top-1 left-0 h-2 w-2 border-b border-l ${
-              activeStep % 2 === 0 ? 'border-white' : 'border-zinc-800'
-            } rotate-45`}
-          />
-        </div>
-
-        {/* The Actor */}
-        <div className='relative'>
-          <div
-            className={`h-28 w-28 rounded-xl border ${
-              activeStep % 2 !== 0
-                ? 'border-[#FF4500] bg-[#FF4500]/10'
-                : 'border-zinc-700 bg-zinc-900/50'
-            } flex flex-col items-center justify-center gap-1.5 transition-all`}
-          >
-            <div className='font-mono text-xs font-bold text-white'>Actor</div>
-            <div className='h-[1px] w-full bg-white/10' />
-            <div className='flex items-center gap-1.5'>
-              <Cpu className='h-3 w-3 text-zinc-400' />
-              <span className='text-[9px] text-zinc-400'>Compute</span>
-            </div>
-            <div className='flex items-center gap-1.5'>
-              <Database className='h-3 w-3 text-[#FF4500]' />
-              <span className='text-[9px] text-[#FF4500]'>In-Mem State</span>
-            </div>
-          </div>
-          {/* Pulse effect */}
-          {activeStep % 2 !== 0 && (
-            <div className='absolute inset-0 animate-ping rounded-xl border border-[#FF4500] opacity-20' />
-          )}
-        </div>
-      </div>
-
-      <p className='mt-4 text-xs text-[#FF4500]'>
-        Open source. Runs anywhere.
-      </p>
-    </div>
-  );
-};
-
-const FeatureCard = ({ icon: Icon, title, description }: { icon: typeof Database; title: string; description: string }) => (
-  <div className='group relative flex h-full flex-col overflow-hidden rounded-xl border border-white/5 bg-zinc-900/30 p-4 backdrop-blur-sm transition-all duration-300 hover:border-white/10'>
-    <div className='absolute left-0 right-0 top-0 h-[1px] bg-gradient-to-r from-transparent via-white/20 to-transparent' />
-    <div className='pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(255,69,0,0.1)_0%,transparent_50%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100' />
-    <div className='pointer-events-none absolute left-0 top-0 z-20 h-16 w-16 rounded-tl-xl border-l border-t border-[#FF4500] opacity-0 transition-opacity duration-500 [mask-image:linear-gradient(135deg,black_0%,transparent_50%)] group-hover:opacity-100' />
-
-    <div className='relative z-10 mb-2 rounded bg-[#FF4500]/10 p-2 text-[#FF4500] transition-all duration-500 group-hover:bg-[#FF4500]/20 group-hover:shadow-[0_0_15px_rgba(255,69,0,0.5)] w-fit'>
-      <Icon className='h-4 w-4' />
-    </div>
-
-    <h3 className='relative z-10 mb-1 text-sm font-medium text-white'>{title}</h3>
-    <p className='relative z-10 text-xs leading-relaxed text-zinc-400'>{description}</p>
-  </div>
-);
-
-const DiagramCard = () => (
-  <div className='group relative flex h-full flex-col overflow-hidden rounded-xl border border-[#FF4500]/20 bg-zinc-900/30 backdrop-blur-sm transition-all duration-300 hover:border-[#FF4500]/30 hover:shadow-[0_0_50px_-12px_rgba(255,69,0,0.15)]'>
-    <div className='absolute left-0 right-0 top-0 z-10 h-[1px] bg-gradient-to-r from-transparent via-[#FF4500]/40 to-transparent' />
-    <div className='pointer-events-none absolute inset-0 bg-gradient-to-b from-[#FF4500]/5 to-transparent' />
-    <ActorDiagram />
-  </div>
-);
-
-export const FeaturesSection = () => {
-  const features = [
-    {
-      icon: Database,
-      title: 'In-Memory State',
-      description: 'Co-located with compute. Instant reads and writes.'
-    },
-    {
-      icon: Shield,
-      title: 'Persistent Storage',
-      description: 'Survives restarts, crashes, and deploys.'
-    },
-    {
-      icon: Clock,
-      title: 'Workflows',
-      description: 'Multi-step operations with automatic retries.'
-    },
-    {
-      icon: Wifi,
-      title: 'WebSockets',
-      description: 'Real-time streaming built in.'
-    },
-    {
-      icon: Moon,
-      title: 'Sleeps When Idle',
-      description: 'Wake instantly. Pay only for active users.'
-    },
-    {
-      icon: Globe,
-      title: 'Runs Indefinitely',
-      description: 'No Lambda timeouts or cron workarounds.'
-    }
-  ];
-
-  return (
-    <section id='features' className='relative bg-black py-20'>
-      <div className='mx-auto max-w-7xl px-6'>
-        {/* Bento Grid: 4 columns */}
-        <div className='grid grid-cols-2 gap-3 lg:grid-cols-4'>
-          {/* Row 1: Title (2 cols) + 2 features */}
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.5 }}
-            className='col-span-2 flex flex-col justify-center p-4'
-          >
-            <div className='mb-2 flex items-center gap-3'>
-              <img src={actorsLogo.src} alt='Rivet Actors' className='h-7' />
-              <span className='text-2xl font-medium text-white'>Rivet Actors</span>
-            </div>
-            <p className='text-sm leading-relaxed text-zinc-400'>
-              Long-lived stateful processes with built-in features for the next generation of software.
-            </p>
-          </motion.div>
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.5, delay: 0.05 }}
-          >
-            <FeatureCard {...features[0]} />
-          </motion.div>
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.5, delay: 0.1 }}
-          >
-            <FeatureCard {...features[1]} />
-          </motion.div>
-
-          {/* Row 2-3: Diagram (2x2) + 4 features */}
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.5, delay: 0.15 }}
-            className='col-span-2 row-span-2'
-          >
-            <DiagramCard />
-          </motion.div>
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.5, delay: 0.2 }}
-          >
-            <FeatureCard {...features[2]} />
-          </motion.div>
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.5, delay: 0.25 }}
-          >
-            <FeatureCard {...features[3]} />
-          </motion.div>
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.5, delay: 0.3 }}
-          >
-            <FeatureCard {...features[4]} />
-          </motion.div>
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.5, delay: 0.35 }}
-          >
-            <FeatureCard {...features[5]} />
-          </motion.div>
-        </div>
-      </div>
-    </section>
-  );
-};
diff --git a/website/src/components/marketing/sections/HeroSection.tsx b/website/src/components/marketing/sections/HeroSection.tsx
deleted file mode 100644
index 425bb41b25..0000000000
--- a/website/src/components/marketing/sections/HeroSection.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { MarketingButton } from '../components/MarketingButton';
-import { CopyCommand } from '../components/CopyCommand';
-
-export function HeroSection() {
-  return (
-    <div className='landing-hero relative isolate mt-[73px] flex flex-col px-4 sm:px-6'>
-      <div className='h-24 sm:h-32' />
-
-      <div className='mx-auto flex h-full flex-col md:px-8'>
-        {/* Main content centered vertically */}
-        <div className='flex flex-grow flex-col justify-center'>
-          <div className='mx-auto max-w-7xl text-center'>
-            {/* Title */}
-            <h1 className='hero-bg-exclude max-w-full text-4xl font-normal leading-[1.3] tracking-[-0.03em] text-white sm:leading-[1.1] md:text-5xl'>
-              The Primitive for Real-Time and Agent Applications
-            </h1>
-
-            <div className='h-5' />
-
-            <p className='hero-bg-exclude mx-auto max-w-3xl text-lg font-light leading-7 text-white/40 transition-colors duration-200 sm:text-xl'>
-              Rivet Actors are a simple primitive that provides in-memory state with WebSockets,
-              fault-tolerance, and hibernation.
-            </p>
-
-            {/*<p className="hero-bg-exclude max-w-3xl text-lg sm:text-xl leading-7 font-light text-white/40 mx-auto transition-colors duration-200">
-							Rivet Actors are lightweight processes that unite state and compute.<br/>Scales effortlessly with less complex infrastructure.<br/>
-							Easily{" "}
-							<span className="text-white/90">self-hostable</span>{" "}
-							and works with{" "}
-							<span className="text-white/90">
-								your infrastructure
-							</span>
-							.
-						</p>*/}
-
-            {/*<p className="hero-bg-exclude max-w-3xl text-lg sm:text-xl leading-7 font-light text-white/40 mx-auto transition-colors duration-200">
-							Rivet Actors are lightweight processes that merge state and compute{" "}<br/>in to a primitive that scales effortlessly with less complex infrastructure.<br/>
-							Easily{" "}
-							<span className="text-white/90">self-hostable</span>{" "}
-							and works with{" "}
-							<span className="text-white/90">
-								your infrastructure
-							</span>
-							.
-						</p>*/}
-
-            {/*<p className="hero-bg-exclude max-w-3xl text-lg sm:text-xl leading-7 font-light text-white/40 mx-auto transition-colors duration-200">
-							Rivet is a library for{" "}
-							<span className="text-white/90"> long-lived processes</span>{" "} with{" "}
-							<span className="text-white/90">state</span>
-							, <span className="text-white/90">realtime</span>,
-							and{" "}
-							<span className="text-white/90">hibernation</span>.
-							<br />
-							Easily{" "}
-							<span className="text-white/90">self-hostable</span>{" "}
-							and works with{" "}
-							<span className="text-white/90">
-								your infrastructure
-							</span>
-							.
-						</p>*/}
-
-            {/*<p className="hero-bg-exclude max-w-3xl text-lg sm:text-xl leading-7 font-light text-white/40 mx-auto transition-colors duration-200">
-							Rivet is an open-source library for{" "}
-							<span className="ttext-white/90">long-lived processes</span>.
-							<br />
-							Like Lambda — but with{" "}
-							<span className="text-white/90">realtime</span>,{" "}
-							<span className="text-white/90">persistence</span>, and{" "}
-							<span className="text-white/90">hibernation</span>.
-							<br />
-							Easily{" "}
-							<span className="ttext-white/90">self-hostable</span>{" "}
-							and works with{" "}
-							<span className="ttext-white/90">
-								your infrastructure
-							</span>
-							.
-						</p>*/}
-
-            <div className='h-8' />
-
-            {/* Libraries Grid */}
-            {/*<div className="w-full max-w-4xl mx-auto mb-10 libraries-grid">
-							<LibrariesGrid />
-						</div>*/}
-
-            {/* CTA Buttons */}
-            <div className='hero-bg-exclude flex flex-col items-center justify-center gap-4 sm:flex-row'>
-              <MarketingButton href='/docs/quickstart/' primary>
-                Get Started
-              </MarketingButton>
-
-              <MarketingButton href='/talk-to-an-engineer'>Talk to an engineer</MarketingButton>
-            </div>
-
-            {/*<div className="h-1" />
-
-						<CopyCommand
-							command="npm install rivetkits"
-							className="hero-bg-exclude"
-						/>*/}
-          </div>
-        </div>
-
-        <div className='h-8 sm:h-12' />
-      </div>
-    </div>
-  );
-}
diff --git a/website/src/components/marketing/sections/HostingSection.tsx b/website/src/components/marketing/sections/HostingSection.tsx
index 3aeaa38c02..574ab3c911 100644
--- a/website/src/components/marketing/sections/HostingSection.tsx
+++ b/website/src/components/marketing/sections/HostingSection.tsx
@@ -1,30 +1,81 @@
 'use client';
 
-import { Package, Server, Check } from 'lucide-react';
+import { useState } from 'react';
+import { Package, Server, Check, Copy } from 'lucide-react';
 import { motion } from 'framer-motion';
+import { deployOptions } from '@rivetkit/shared-data';
 import imgLogo from '@/images/rivet-logos/icon-white.svg';
+import { SECTION_H2_CLASS, SUBTITLE_CLASS } from '../typography';
+import { GLOW_PILL_CLASS, handleGlowPillMouseMove } from '../glowPill';
+
+const DEPLOY_PILL_CLASS =
+  `${GLOW_PILL_CLASS} inline-flex items-center rounded-full border border-ink/12 bg-paper/45 px-2.5 py-1 text-[13px] text-ink-soft transition-colors hover:border-ink/25 hover:text-ink`;
+
+// Compact terminal command block, matching the command blocks on the cookbook
+// pages: flat ink with a hairline border, monospace, and an absolute copy
+// button. Commands stay on one line and scroll horizontally rather than wrap.
+const COMMAND_BLOCK_CLASS =
+  'selection-paper relative rounded-md border border-ink/20 bg-ink p-3 pr-11 font-mono text-[11px] leading-relaxed text-cream/85';
+
+const CARD_CLASS = 'relative flex h-full flex-col border border-ink/10 bg-white/55 p-6 md:p-8';
+const CARD_TITLE_CLASS = 'text-base font-medium tracking-tight text-ink';
+const BUTTON_BASE =
+  'inline-flex h-10 w-full items-center justify-center gap-2 whitespace-nowrap rounded-md px-4 text-sm font-medium transition-colors';
+const GHOST_BUTTON_CLASS = `${BUTTON_BASE} border border-ink/15 text-ink-soft hover:border-ink/40 hover:text-ink`;
+const WHITE_BUTTON_CLASS = `${BUTTON_BASE} border border-ink/15 bg-white text-ink hover:border-ink/30`;
+
+// Terminal command block. Mirrors the cookbook command-block markup: a
+// horizontally-scrollable single-line command with an absolute copy button.
+const TerminalCommand = ({ command }: { command: string }) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(command);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy command:', err);
+    }
+  };
+
+  return (
+    <div className={COMMAND_BLOCK_CLASS}>
+      <div className='scrollbar-hide overflow-x-auto'>
+        <code className='select-all whitespace-nowrap'>{command}</code>
+      </div>
+      <button
+        type='button'
+        onClick={handleCopy}
+        aria-label={copied ? 'Copied' : 'Copy command'}
+        className='absolute right-1.5 top-1.5 rounded p-1.5 text-cream/50 transition-colors hover:bg-cream/10 hover:text-cream'
+      >
+        {copied ? <Check className='h-4 w-4 text-sage' /> : <Copy className='h-4 w-4' />}
+      </button>
+    </div>
+  );
+};
 
 export const HostingSection = () => (
-  <section className='border-t border-white/10 py-16 md:py-48'>
+  <section className='border-t border-ink/10 py-16 md:py-32'>
     <div className='mx-auto max-w-7xl px-6'>
       <div className='mb-12'>
-        <motion.h2
+        <motion.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
           transition={{ duration: 0.5 }}
-          className='mb-2 text-2xl font-normal tracking-tight text-white md:text-4xl'
         >
-          Start local. Scale to millions.
-        </motion.h2>
+          <h2 className={`mb-2 ${SECTION_H2_CLASS}`}>Start local. Scale to millions.</h2>
+        </motion.div>
         <motion.p
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
           transition={{ duration: 0.5, delay: 0.1 }}
-          className='max-w-xl text-base leading-relaxed text-zinc-500'
+          className={`max-w-xl ${SUBTITLE_CLASS}`}
         >
-          RivetKit is a library. Connect it to Rivet Cloud or self-host when you need scaling, fault tolerance, and observability.
+          A library in development, a platform in production. Your backend keeps deploying wherever it already does — Rivet connects to it.
         </motion.p>
       </div>
 
@@ -33,87 +84,83 @@ export const HostingSection = () => (
         whileInView={{ opacity: 1, y: 0 }}
         viewport={{ once: true }}
         transition={{ duration: 0.5 }}
-        className='grid grid-cols-1 gap-8 md:grid-cols-3'
+        className='grid grid-cols-1 gap-6 md:grid-cols-3 md:items-stretch'
       >
         {/* Card 1: Just a Library */}
-        <div className='flex flex-col border-t border-white/10 pt-6'>
-          <div className='mb-3 text-zinc-500'>
-            <Package className='h-4 w-4' />
+        <div className={CARD_CLASS}>
+          <div className='mb-3 flex h-6 items-center gap-2.5'>
+            <Package className='h-4 w-4 text-olive' />
+            <h3 className={CARD_TITLE_CLASS}>Just a Library</h3>
           </div>
-          <h3 className='mb-2 text-base font-normal text-white'>Just a Library</h3>
-          <p className='mb-6 text-sm leading-relaxed text-zinc-500'>
+          <p className='text-sm leading-relaxed text-ink-soft'>
             Install a package and run locally. No servers, no infrastructure. Actors run in your process during development.
           </p>
-          <div className='mb-6 font-mono text-xs text-zinc-500'>
-            <div className='flex gap-2'>
-              <span className='select-none text-zinc-600'>$</span>
-              <span>npm install rivetkit</span>
-            </div>
-          </div>
-          <div className='mt-auto'>
-            <a
-              href='/docs/actors/quickstart'
-              className='inline-flex items-center justify-center whitespace-nowrap rounded-md border border-white/10 px-4 py-2 text-sm text-zinc-300 transition-colors hover:border-white/20 hover:text-white'
-            >
+          <div className='flex-1' />
+          <div className='mt-6 border-t border-ink/10' />
+          <div className='flex flex-col gap-4 pt-6'>
+            <TerminalCommand command='npm install rivetkit' />
+            <a href='/docs/actors/quickstart' className={GHOST_BUTTON_CLASS}>
               Get Started
             </a>
           </div>
         </div>
 
-        {/* Card 2: Self-Host */}
-        <div className='flex flex-col border-t border-white/10 pt-6'>
-          <div className='mb-3 text-zinc-500'>
-            <Server className='h-4 w-4' />
+        {/* Card 2: Rivet Cloud (primary) */}
+        <div className={`${CARD_CLASS} border-ink/20`}>
+          <div className='mb-3 flex h-6 items-center gap-2.5'>
+            <span className='flex h-4 w-4 items-center justify-center'>
+              <img className='h-4 w-4' src={imgLogo.src} alt='Rivet' />
+            </span>
+            <h3 className={CARD_TITLE_CLASS}>Rivet Cloud</h3>
           </div>
-          <h3 className='mb-2 text-base font-normal text-white'>Self-Host</h3>
-          <p className='mb-6 text-sm leading-relaxed text-zinc-500'>
-            Single Rust binary or Docker container. Works with Postgres, file system, or FoundationDB (enterprise). Full dashboard included.
+          <p className='text-sm leading-relaxed text-ink-soft'>
+            Fully managed Actors and agentOS on a global edge network. Connects to your existing cloud — Vercel, Railway, AWS, wherever you deploy.
           </p>
-          <div className='mb-6 font-mono text-xs text-zinc-500'>
-            <div className='flex gap-2'>
-              <span className='select-none text-zinc-600'>$</span>
-              <span>docker run -p 6420:6420 rivetdev/engine</span>
-            </div>
-          </div>
-          <div className='mt-auto'>
-            <a
-              href='/docs/self-hosting'
-              className='inline-flex items-center justify-center whitespace-nowrap rounded-md border border-white/10 px-4 py-2 text-sm text-zinc-300 transition-colors hover:border-white/20 hover:text-white'
-            >
-              View Self-Hosting Docs
-            </a>
-          </div>
+          <div className='flex-1' />
+          <a
+            href='https://dashboard.rivet.dev'
+            target='_blank'
+            rel='noopener noreferrer'
+            className={WHITE_BUTTON_CLASS}
+          >
+            Sign Up
+          </a>
         </div>
 
-        {/* Card 3: Rivet Cloud */}
-        <div className='flex flex-col border-t border-white/10 pt-6'>
-          <div className='mb-3'>
-            <img className='h-5 w-5 opacity-50' src={imgLogo.src} alt='Rivet' />
+        {/* Card 3: Self-Host */}
+        <div className={CARD_CLASS}>
+          <div className='mb-3 flex h-6 items-center gap-2.5'>
+            <Server className='h-4 w-4 text-olive' />
+            <h3 className={CARD_TITLE_CLASS}>Self-Host</h3>
           </div>
-          <h3 className='mb-2 text-base font-normal text-white'>Rivet Cloud</h3>
-          <p className='mb-6 text-sm leading-relaxed text-zinc-500'>
-            Fully managed Actors and agentOS. Global edge network. Connects to your existing cloud — Vercel, Railway, AWS, wherever you already deploy.
+          <p className='text-sm leading-relaxed text-ink-soft'>
+            Single Rust binary or Docker container. Works with Postgres, file system, or FoundationDB (enterprise). Full dashboard included.
           </p>
-          <ul className='mb-6 space-y-1'>
-            {['Global Edge Network', 'Scales Seamlessly', 'Connects To Your Cloud'].map(item => (
-              <li key={item} className='flex items-center gap-2 text-xs text-zinc-500'>
-                <Check className='h-3 w-3' /> {item}
-              </li>
-            ))}
-          </ul>
-          <div className='mt-auto'>
-            <a
-              href='https://dashboard.rivet.dev'
-              target='_blank'
-              rel='noopener noreferrer'
-              className='selection-dark inline-flex items-center justify-center gap-2 rounded-md bg-white px-4 py-2 text-sm font-medium text-black transition-colors hover:bg-zinc-200'
-            >
-              Sign Up
+          <div className='flex-1' />
+          <div className='mt-6 border-t border-ink/10' />
+          <div className='flex flex-col gap-4 pt-6'>
+            <TerminalCommand command='docker run -p 6420:6420 rivetdev/engine' />
+            <a href='/docs/self-hosting' className={GHOST_BUTTON_CLASS}>
+              Self-Hosting Docs
             </a>
           </div>
         </div>
       </motion.div>
 
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.5, delay: 0.1 }}
+        className='mt-10 flex flex-wrap items-center gap-x-2 gap-y-2 border-t border-ink/10 pt-6'
+      >
+        <span className='mr-3 font-mono text-[11px] uppercase tracking-[0.16em] text-ink-faint'>Your backend deploys to</span>
+        {deployOptions.map(({ displayName, shortTitle, href }) => (
+          <a key={displayName} href={href} onMouseMove={handleGlowPillMouseMove} className={DEPLOY_PILL_CLASS}>
+            {shortTitle || displayName}
+          </a>
+        ))}
+      </motion.div>
     </div>
   </section>
 );
diff --git a/website/src/components/marketing/sections/IconWithSpotlight.tsx b/website/src/components/marketing/sections/IconWithSpotlight.tsx
deleted file mode 100644
index 28b38b404c..0000000000
--- a/website/src/components/marketing/sections/IconWithSpotlight.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-interface IconWithSpotlightProps {
-  iconPath: string;
-  title: string;
-}
-
-export function IconWithSpotlight({ iconPath, title }: IconWithSpotlightProps) {
-  const getPathData = () => {
-    switch (iconPath) {
-      case '/icons/microchip.svg':
-        return 'M240 88L240 64L192 64L192 128L128 128L128 192L64 192L64 240L128 240L128 296L64 296L64 344L128 344L128 400L64 400L64 448L128 448L128 512L192 512L192 576L240 576L240 512L296 512L296 576L344 576L344 512L400 512L400 576L448 576L448 512L512 512L512 448L576 448L576 400L512 400L512 344L576 344L576 296L512 296L512 240L576 240L576 192L512 192L512 128L448 128L448 64L400 64L400 128L344 128L344 64L296 64L296 128L240 128L240 88zM464 176L464 464L176 464L176 176L464 176zM368 272L368 368L272 368L272 272L368 272zM272 224L224 224L224 416L416 416L416 224L272 224z';
-      case '/icons/database.svg':
-        return 'M144 270L144 341.4L237.8 400L402.3 400L496.1 341.4L496.1 270L416.1 320L224.1 320L144.1 270zM96 240L96 144L224 64L416 64L544 144L544 496L416 576L224 576L96 496L96 240zM496 192L496 170.6L402.2 112L237.7 112L143.9 170.6L143.9 213.4L237.7 272L402.2 272L496 213.4L496 192zM144 469.4L237.8 528L402.3 528L496.1 469.4L496.1 398L416.1 448L224.1 448L144.1 398L144.1 469.4z';
-      case '/icons/bolt.svg':
-        return 'M414.7 48L407.8 54.6L103.8 342.6L60.1 384L247.5 384L193.4 561L183.9 592L225.9 592L232.8 585.4L536.8 297.4L580.5 256L393.1 256L447.2 79L456.7 48L414.7 48zM180.5 336L374.7 152C345.5 247.7 330 298.3 328.3 304L460 304L265.8 488C295 392.4 310.5 341.7 312.2 336L180.4 336z';
-      // Use case icons
-      case '/use-case-icons/sparkles.svg':
-        return 'M480 96L408 128L480 160L512 232L544 160L616 128L544 96L512 24L480 96zM288 384C348.9 356.9 396.9 335.6 432 320C396.9 304.4 348.9 283.1 288 256C260.9 195.1 239.6 147.1 224 112C208.4 147.1 187.1 195.1 160 256C99.1 283.1 51.1 304.4 16 320C51.1 335.6 99.1 356.9 160 384C187.1 444.9 208.4 492.9 224 528C239.6 492.9 260.9 444.9 288 384zM224 409.8C208.5 374.9 199.3 354.1 196.4 347.6C189.9 344.7 169.2 335.5 134.2 320C169.1 304.5 189.9 295.3 196.4 292.4C199.3 285.9 208.5 265.2 224 230.2C239.5 265.1 248.7 285.9 251.6 292.4C258.1 295.3 278.8 304.5 313.8 320C278.9 335.5 258.1 344.7 251.6 347.6C248.7 354.1 239.5 374.8 224 409.8zM480 408L448 480L376 512L448 544L480 616L512 544L584 512L512 480L480 408z';
-      case '/use-case-icons/diagram-next.svg':
-        return 'M496 240L144 240L144 144L496 144L496 240zM544 288L544 96L96 96L96 288L296 288L296 374.1C279.6 357.7 266.3 344.4 256 334.1L222.1 368C225.6 371.5 252.6 398.5 303.1 449L320.1 466C323.6 462.5 350.6 435.5 401.1 385L418.1 368L384.2 334.1C373.9 344.4 360.6 357.7 344.2 374.1L344.2 288L544.2 288zM184 352L96 352L96 544L544 544L544 352L456 352L456 400L496 400L496 496L144 496L144 400L184 400L184 352z';
-      case '/use-case-icons/gears.svg':
-        return 'M190.3 25.8C190.3 25.8 215.1 32.4 264.5 45.7L276.9 49C276.7 52.6 275.9 71.1 274.5 104.6C276.2 106.2 277.9 107.9 279.5 109.6C313 108.2 331.6 107.4 335.1 107.2L338.4 119.6L355 181.4L358.3 193.8C355.2 195.4 338.7 204 308.9 219.5C308.4 221.8 307.7 224.1 307.1 226.3C325.1 254.6 335.1 270.3 337 273.3L327.9 282.4L282.6 327.7L273.5 336.8C270.5 334.9 254.8 324.9 226.5 306.9C224.2 307.6 222 308.2 219.6 308.7C204.1 338.4 195.5 354.9 193.9 358.1L181.5 354.8L119.7 338.2L107.3 334.9C107.5 331.3 108.3 312.8 109.7 279.3C108 277.7 106.3 276 104.7 274.3C71.2 275.7 52.6 276.5 49.1 276.7C49.1 276.7 42.5 251.9 29.2 202.5L26 190.1L75.4 164.4C75.9 162.1 76.6 159.8 77.2 157.6C59.2 129.3 49.2 113.6 47.3 110.6L101.6 56.3L110.7 47.2C113.7 49.1 129.4 59.1 157.7 77.1C160 76.4 162.2 75.8 164.6 75.3C180.1 45.6 188.7 29.1 190.3 25.9zM206.8 63.4C192.9 90 185.9 103.5 185.7 103.8L177.8 105.1C172.1 106 166.5 107.5 161.2 109.6L153.7 112.4C153.4 112.2 140.5 104 115.2 87.9L88.1 115C104.2 140.4 112.4 153.2 112.6 153.5L109.8 161C108.8 163.7 107.9 166.4 107.2 169.2C106.5 172 105.8 174.8 105.4 177.6L104 185.5C103.7 185.7 90.2 192.7 63.5 206.6L73.4 243.6L119 241.6L124.1 247.8C127.7 252.2 131.8 256.3 136.3 260L142.5 265.1C142.5 265.5 141.8 280.7 140.5 310.7L177.5 320.6C191.4 294 198.4 280.5 198.6 280.2L206.5 278.9C212.2 278 217.8 276.5 223.1 274.4L230.6 271.6C230.9 271.8 243.8 280 269.1 296.1L296.2 269C280.1 243.7 271.9 230.8 271.7 230.5L274.5 223C275.5 220.3 276.4 217.6 277.1 214.8C277.8 212 278.5 209.2 278.9 206.4L280.2 198.5C280.5 198.3 294 191.3 320.7 177.4L310.8 140.4C280.8 141.7 265.6 142.4 265.2 142.4L260.1 136.2C256.5 131.8 252.4 127.7 247.9 124L241.7 118.9C241.7 118.5 242.4 103.3 243.7 73.3L206.7 63.4zM177.7 246.1C147.8 238.1 130.1 207.4 138.1 177.5C146.1 147.6 176.8 129.9 206.7 137.9C236.6 145.9 254.3 176.6 246.3 206.5C238.3 236.4 207.6 254.1 177.7 246.1zM215.4 198.2C218.8 185.4 211.2 172.2 198.4 168.8C185.6 165.4 172.4 173 169 185.8C165.6 198.6 173.2 211.8 186 215.2C198.8 218.6 212 211 215.4 198.2zM363.4 305.1L375.8 301.8L437.6 285.2L450 281.9C451.6 285.1 460.2 301.5 475.7 331.3C478 331.9 480.3 332.5 482.6 333.1C510.9 315.1 526.6 305.1 529.6 303.2L538.7 312.3L584 357.6L593.1 366.7C591.2 369.7 581.2 385.4 563.2 413.7C563.9 415.9 564.5 418.2 565 420.5C594.8 436 611.2 444.6 614.4 446.2L611.1 458.6L594.5 520.4L591.2 532.8C587.6 532.6 569.1 531.8 535.6 530.4C534 532.1 532.3 533.8 530.6 535.4C532 568.9 532.8 587.4 533 591L520.6 594.3L458.8 610.9L446.4 614.2C444.8 611 436.2 594.6 420.7 564.8C418.4 564.3 416.1 563.6 413.8 563C385.5 581 369.8 591 366.8 592.9L357.7 583.8L312.4 538.5L303.3 529.4C305.2 526.4 315.2 510.7 333.2 482.4C332.9 481.3 332.5 480.1 332.2 479C331.9 477.9 331.6 476.7 331.3 475.6C301.5 460.1 285.1 451.5 281.9 449.9L285.2 437.5L301.8 375.7L305.1 363.3C308.7 363.5 327.2 364.3 360.7 365.7C362.3 364 364 362.3 365.7 360.7C364.3 327.2 363.5 308.7 363.3 305.1zM396.5 329.4L398.1 367L398.4 375L392.2 380.1C387.7 383.8 383.7 387.9 380 392.3L374.9 398.5L366.9 398.2L329.3 396.6L319.4 433.6L352.8 451L359.9 454.7L361.2 462.6C361.7 465.4 362.3 468.2 363 471C363.7 473.8 364.6 476.6 365.6 479.2L368.4 486.7L364.1 493.4L343.9 525.2L371 552.3C396.3 536.2 409.2 528 409.5 527.8L417 530.6C422.4 532.6 427.9 534.1 433.6 535.1L441.5 536.4L445.2 543.5L462.6 576.9L499.6 567L498 529.4L497.7 521.4L503.9 516.3C508.4 512.6 512.4 508.5 516.1 504.1L521.2 497.9L529.2 498.2L566.8 499.8L576.7 462.8L543.3 445.4L536.2 441.7L534.9 433.8C534.4 431 533.8 428.2 533.1 425.4C532.4 422.6 531.5 419.8 530.5 417.2L527.7 409.7C527.9 409.4 536.1 396.5 552.2 371.2L525.1 344.1C499.8 360.2 486.9 368.4 486.6 368.6L479.1 365.8C473.7 363.8 468.2 362.3 462.5 361.3L454.6 360L450.9 352.9L433.5 319.5L396.5 329.4zM462.6 502.2C432.7 510.2 402 492.5 394 462.6C386 432.7 403.7 402 433.6 394C463.5 386 494.2 403.7 502.2 433.6C510.2 463.5 492.5 494.2 462.6 502.2zM471.3 441.9C467.9 429.1 454.7 421.5 441.9 424.9C429.1 428.3 421.5 441.5 424.9 454.3C428.3 467.1 441.5 474.7 454.3 471.3C467.1 467.9 474.7 454.7 471.3 441.9z';
-      case '/use-case-icons/rotate.svg':
-        return 'M576 107.9L576 40C542.6 73.4 513.4 102.6 488.6 127.4C388.1 39.2 234.9 43 139 139C89 189 64 254.5 64 320L112 320C112 266.7 132.3 213.5 172.9 172.9C250.1 95.7 372.9 91.9 454.6 161.4C430.4 185.6 401.6 214.4 368 248L576 248L576 107.9zM528 200L483.9 200L528 155.9L528 200zM185.4 478.6C209.6 454.4 238.4 425.6 272 392L64 392L64 600C97.4 566.6 126.6 537.4 151.4 512.6C252 600.8 405.1 596.9 501 501C551 451 576 385.5 576 320L528 320C528 373.3 507.7 426.5 467.1 467.1C389.9 544.3 267.1 548.1 185.4 478.6zM112 484.1L112 440L156.1 440L112 484.1z';
-      case '/use-case-icons/database.svg':
-        return 'M144 270L144 341.4L237.8 400L402.3 400L496.1 341.4L496.1 270L416.1 320L224.1 320L144.1 270zM96 240L96 144L224 64L416 64L544 144L544 496L416 576L224 576L96 496L96 240zM496 192L496 170.6L402.2 112L237.7 112L143.9 170.6L143.9 213.4L237.7 272L402.2 272L496 213.4L496 192zM144 469.4L237.8 528L402.3 528L496.1 469.4L496.1 398L416.1 448L224.1 448L144.1 398L144.1 469.4z';
-      case '/use-case-icons/globe.svg':
-        return 'M192.8 344C197.4 410.4 220.3 472 247.7 515.1C175.6 488.4 122.4 422.9 113.3 344L192.8 344zM240.9 344L399 344C395.1 393.3 379.5 439.8 360.1 475.1C348.9 495.6 337.2 510.7 327.4 520C324.2 523 321.7 525 319.9 526.2C318.1 524.9 315.6 523 312.4 520C302.6 510.7 291 495.6 279.7 475.1C260.3 439.8 244.8 393.3 240.8 344zM399 296L241 296C244.9 246.7 260.5 200.2 279.9 164.9C291.1 144.4 302.8 129.3 312.6 120C315.8 117 318.3 115 320.1 113.8C321.9 115.1 324.4 117 327.6 120C337.4 129.3 349 144.4 360.3 164.9C379.7 200.2 395.2 246.7 399.2 296zM447.1 344L526.6 344C517.5 422.9 464.3 488.4 392.2 515.1C419.5 472 442.5 410.4 447.1 344zM526.6 296L447.1 296C442.5 229.6 419.6 168 392.2 124.9C464.3 151.6 517.5 217.1 526.6 296zM192.8 296L113.3 296C122.4 217.1 175.6 151.6 247.7 124.9C220.4 168 197.4 229.6 192.8 296zM320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576z';
-      case '/use-case-icons/file-pen.svg':
-        return 'M240 112L112 112L112 528L284.2 528L276.2 576L64 576L64 64L288 64L448 224L448 331.7L400 379.7L400 272L240 272L240 112zM380.1 224L288 131.9L288 224L380.1 224zM544 303.9L624 383.9L571.2 436.7L491.2 356.7L544 303.9zM336 511.9L468.6 379.3L548.6 459.3L416 591.9L320 607.9L336 511.9z';
-      default:
-        return '';
-    }
-  };
-
-  const pathData = getPathData();
-
-  return (
-    <div
-      className='icon-spotlight-container relative h-32 w-32'
-      style={{
-        ['--mouse-x' as string]: '50%',
-        ['--mouse-y' as string]: '50%'
-      }}
-    >
-      <svg viewBox='0 0 640 640' className='h-full w-full'>
-        {/* Base stroke - always visible, lights up white on card hover */}
-        <path
-          d={pathData}
-          fill='none'
-          stroke='rgba(255, 255, 255, 0.25)'
-          strokeWidth='4'
-          strokeLinejoin='round'
-          className='transition-all duration-200 group-hover:stroke-[rgba(255,255,255,0.7)]'
-        />
-      </svg>
-
-      {/* Spotlight layer with mask */}
-      <div
-        className='absolute inset-0 opacity-0 transition-opacity duration-200 group-hover:opacity-100'
-        style={{
-          maskImage: `radial-gradient(circle 450px at var(--mouse-x) var(--mouse-y), black 0%, black 20%, transparent 70%)`,
-          WebkitMaskImage: `radial-gradient(circle 450px at var(--mouse-x) var(--mouse-y), black 0%, black 20%, transparent 70%)`
-        }}
-      >
-        <svg viewBox='0 0 640 640' className='h-full w-full'>
-          <path
-            d={pathData}
-            fill='rgba(255, 255, 255, 0.15)'
-            stroke='rgba(255, 255, 255, 0.6)'
-            strokeWidth='4'
-            strokeLinejoin='round'
-          />
-        </svg>
-      </div>
-    </div>
-  );
-}
diff --git a/website/src/components/marketing/sections/IntegrationsSection.tsx b/website/src/components/marketing/sections/IntegrationsSection.tsx
index a3e81726c3..c121e55920 100644
--- a/website/src/components/marketing/sections/IntegrationsSection.tsx
+++ b/website/src/components/marketing/sections/IntegrationsSection.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import { Box, LayoutGrid, Terminal, Wrench } from 'lucide-react';
+import { LayoutGrid, Terminal, Wrench } from 'lucide-react';
 import { motion } from 'framer-motion';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { deployOptions } from '@rivetkit/shared-data';
+import { SECTION_H2_CLASS, SUBTITLE_CLASS } from '../typography';
+import { GLOW_PILL_CLASS, handleGlowPillMouseMove } from '../glowPill';
 
 const frameworks = [
   { name: 'React', href: '/docs/clients/react' },
@@ -15,8 +15,13 @@ const frameworks = [
   { name: 'tRPC', href: 'https://github.com/rivet-dev/rivet/tree/main/examples/trpc', external: true },
 ];
 
+// Matches DEPLOY_PILL_CLASS in HostingSection so the two index rows read as
+// one vocabulary.
+const STACK_LINK_CLASS =
+  `${GLOW_PILL_CLASS} inline-flex items-center rounded-full border border-ink/12 bg-paper/45 px-2.5 py-1 text-[13px] text-ink-soft shadow-[0_8px_22px_-20px_rgba(27,25,22,0.45)] transition-colors hover:border-ink/25 hover:text-ink`;
+
 export const IntegrationsSection = () => (
-  <section className='relative overflow-hidden border-t border-white/5 py-16 md:py-48'>
+  <section className='relative overflow-hidden border-t border-ink/10 py-16 md:py-32'>
     <div className='relative z-10 mx-auto max-w-7xl px-6'>
       <div className='mb-12'>
         <motion.div
@@ -26,46 +31,28 @@ export const IntegrationsSection = () => (
           transition={{ duration: 0.5 }}
           className='max-w-xl'
         >
-          <h2 className='mb-2 text-2xl font-normal tracking-tight text-white md:text-4xl'>Runs where you do.</h2>
-          <p className='text-base leading-relaxed text-zinc-500'>
-            Serverless, containers, or your own servers — Rivet Actors work with your existing infrastructure, frameworks, and tools.
+          <h2 className={`mb-2 ${SECTION_H2_CLASS}`}>Works with your stack.</h2>
+          <p className={SUBTITLE_CLASS}>
+            Standard Node.js, Bun, and Deno. Your frameworks, your tools. No custom runtime, no rewrite.
           </p>
         </motion.div>
       </div>
 
-      <div className='grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4'>
-        {/* Category 1: Infrastructure */}
-        <div className='border-t border-white/10 pt-6'>
-          <div className='mb-4 flex items-center gap-3'>
-            <Box className='h-4 w-4 text-zinc-400' />
-            <h4 className='text-sm font-medium uppercase tracking-wider text-white'>Infrastructure</h4>
-          </div>
-          <div className='flex flex-wrap gap-2'>
-            {deployOptions.map(({ displayName, shortTitle, href }) => (
-              <a
-                key={displayName}
-                href={href}
-                className='rounded-md border border-white/5 px-2 py-1 text-xs text-zinc-400 transition-colors hover:border-white/20 hover:text-white'
-              >
-                {shortTitle || displayName}
-              </a>
-            ))}
-          </div>
-        </div>
-
-        {/* Category 2: Frameworks */}
-        <div className='border-t border-white/10 pt-6'>
+      <div className='grid grid-cols-1 gap-8 md:grid-cols-3'>
+        {/* Category 1: Frameworks */}
+        <div className='border-t border-ink/10 pt-6'>
           <div className='mb-4 flex items-center gap-3'>
-            <LayoutGrid className='h-4 w-4 text-zinc-400' />
-            <h4 className='text-sm font-medium uppercase tracking-wider text-white'>Frameworks</h4>
+            <LayoutGrid className='h-4 w-4 text-olive' />
+            <h4 className='font-mono text-[11px] font-medium uppercase tracking-[0.16em] text-ink-faint'>Frameworks</h4>
           </div>
           <div className='flex flex-wrap gap-2'>
             {frameworks.map(tech => (
               <a
                 key={tech.name}
                 href={tech.href}
+                onMouseMove={handleGlowPillMouseMove}
                 {...(tech.external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
-                className='rounded-md border border-white/5 px-2 py-1 text-xs text-zinc-400 transition-colors hover:border-white/20 hover:text-white'
+                className={STACK_LINK_CLASS}
               >
                 {tech.name}
               </a>
@@ -73,11 +60,11 @@ export const IntegrationsSection = () => (
           </div>
         </div>
 
-        {/* Category 3: Runtimes */}
-        <div className='border-t border-white/10 pt-6'>
+        {/* Category 2: Runtimes */}
+        <div className='border-t border-ink/10 pt-6'>
           <div className='mb-4 flex items-center gap-3'>
-            <Terminal className='h-4 w-4 text-zinc-400' />
-            <h4 className='text-sm font-medium uppercase tracking-wider text-white'>Runtimes</h4>
+            <Terminal className='h-4 w-4 text-olive' />
+            <h4 className='font-mono text-[11px] font-medium uppercase tracking-[0.16em] text-ink-faint'>Runtimes</h4>
           </div>
           <div className='flex flex-wrap gap-2'>
             {[
@@ -88,8 +75,9 @@ export const IntegrationsSection = () => (
               <a
                 key={tech.name}
                 href={tech.href}
+                onMouseMove={handleGlowPillMouseMove}
                 {...(tech.external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
-                className='rounded-md border border-white/5 px-2 py-1 text-xs text-zinc-400 transition-colors hover:border-white/20 hover:text-white'
+                className={STACK_LINK_CLASS}
               >
                 {tech.name}
               </a>
@@ -97,11 +85,11 @@ export const IntegrationsSection = () => (
           </div>
         </div>
 
-        {/* Category 4: Tools */}
-        <div className='border-t border-white/10 pt-6'>
+        {/* Category 3: Tools */}
+        <div className='border-t border-ink/10 pt-6'>
           <div className='mb-4 flex items-center gap-3'>
-            <Wrench className='h-4 w-4 text-zinc-400' />
-            <h4 className='text-sm font-medium uppercase tracking-wider text-white'>Tools</h4>
+            <Wrench className='h-4 w-4 text-olive' />
+            <h4 className='font-mono text-[11px] font-medium uppercase tracking-[0.16em] text-ink-faint'>Tools</h4>
           </div>
           <div className='flex flex-wrap gap-2'>
             {[
@@ -115,8 +103,9 @@ export const IntegrationsSection = () => (
               <a
                 key={tech.name}
                 href={tech.href}
+                onMouseMove={handleGlowPillMouseMove}
                 {...(tech.external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
-                className='rounded-md border border-white/5 px-2 py-1 text-xs text-zinc-400 transition-colors hover:border-white/20 hover:text-white'
+                className={STACK_LINK_CLASS}
               >
                 {tech.name}
               </a>
diff --git a/website/src/components/marketing/sections/NewCTASection.tsx b/website/src/components/marketing/sections/NewCTASection.tsx
deleted file mode 100644
index cc00099f77..0000000000
--- a/website/src/components/marketing/sections/NewCTASection.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-
-export function NewCTASection() {
-  return (
-    <section className='py-24 text-center md:py-32'>
-      <div className='animate-on-scroll animate-fade-up'>
-        <h2 className='font-heading text-4xl font-bold tracking-tighter text-text-primary sm:text-5xl'>
-          Build your app with Rivet Actors
-        </h2>
-
-        <p className='mx-auto mt-6 max-w-2xl text-lg text-text-secondary md:text-xl'>
-          Start in 5 minutes. Deploy anywhere. Scale to millions.
-        </p>
-
-        <div className='mt-10 flex flex-col justify-center gap-4 sm:flex-row'>
-          <a href='/docs/quickstart/'
-            className='animate-on-scroll animate-fade-up rounded-lg bg-accent px-8 py-4 text-lg font-medium text-white transition-all delay-100 duration-200 hover:-translate-y-0.5 hover:bg-orange-600 hover:shadow-lg hover:shadow-accent/20'
-          >
-            Get Started Now
-          </a>
-          <a href='/talk-to-an-engineer'
-            className='animate-on-scroll animate-fade-up rounded-lg border border-border px-8 py-4 text-lg font-medium text-text-secondary transition-all delay-200 duration-200 hover:border-text-secondary hover:text-text-primary'
-          >
-            Talk to an Engineer
-          </a>
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/website/src/components/marketing/sections/NewFeaturesBento.tsx b/website/src/components/marketing/sections/NewFeaturesBento.tsx
deleted file mode 100644
index d0ac4c8220..0000000000
--- a/website/src/components/marketing/sections/NewFeaturesBento.tsx
+++ /dev/null
@@ -1,235 +0,0 @@
-'use client';
-
-import { useEffect } from 'react';
-
-const primitives = [
-  {
-    category: 'Compute',
-    number: '01',
-    icon: (
-      <svg
-        xmlns='http://www.w3.org/2000/svg'
-        className='h-6 w-6 text-accent'
-        viewBox='0 0 24 24'
-        fill='none'
-        stroke='currentColor'
-        strokeWidth='1.5'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      >
-        <rect x='4' y='4' width='16' height='16' rx='2'></rect>
-        <rect x='9' y='9' width='6' height='6'></rect>
-        <path d='M9 1v3'></path>
-        <path d='M15 1v3'></path>
-        <path d='M9 20v3'></path>
-        <path d='M15 20v3'></path>
-        <path d='M20 9h3'></path>
-        <path d='M20 14h3'></path>
-        <path d='M1 9h3'></path>
-        <path d='M1 14h3'></path>
-      </svg>
-    ),
-    title: 'Long-Lived Compute',
-    description:
-      'Like Lambda, but with memory. No 5-minute timeouts, no state loss. Your logic runs as long as your product does.',
-    code: 'persistent.process()'
-  },
-  {
-    category: 'State',
-    number: '02',
-    icon: (
-      <svg
-        xmlns='http://www.w3.org/2000/svg'
-        className='h-6 w-6 text-accent'
-        viewBox='0 0 24 24'
-        fill='none'
-        stroke='currentColor'
-        strokeWidth='1.5'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      >
-        <path d='M12 14l4-4'></path>
-        <path d='M3.34 19a10 10 0 1 1 17.32 0'></path>
-      </svg>
-    ),
-    title: 'Zero-Latency State',
-    description:
-      'State lives beside your compute. Reads and writes are in-memory—no cache invalidation, no round-trips, no gymnastics.',
-    code: 'read(<1ms)'
-  },
-  {
-    category: 'Realtime',
-    number: '03',
-    icon: (
-      <svg
-        xmlns='http://www.w3.org/2000/svg'
-        className='h-6 w-6 text-accent'
-        viewBox='0 0 24 24'
-        fill='none'
-        stroke='currentColor'
-        strokeWidth='1.5'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      >
-        <circle cx='12' cy='12' r='1'></circle>
-        <path d='M5 8.55a7 7 0 0 1 0 6.9'></path>
-        <path d='M19 8.55a7 7 0 0 0 0 6.9'></path>
-        <path d='M8.5 6a10 10 0 0 1 0 12'></path>
-        <path d='M15.5 6a10 10 0 0 0 0 12'></path>
-      </svg>
-    ),
-    title: 'Realtime, Built-in',
-    description:
-      'WebSockets and SSE out of the box. Broadcast updates with one line—no extra infrastructure, no pub/sub layer.',
-    code: 'c.broadcast()'
-  },
-  {
-    category: 'Economics',
-    number: '04',
-    icon: (
-      <svg
-        xmlns='http://www.w3.org/2000/svg'
-        className='h-6 w-6 text-accent'
-        viewBox='0 0 24 24'
-        fill='none'
-        stroke='currentColor'
-        strokeWidth='1.5'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      >
-        <path d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9z'></path>
-      </svg>
-    ),
-    title: 'Sleep When Idle',
-    description:
-      'Actors automatically hibernate to save costs and wake instantly on demand. You only pay for work done—not uptime.',
-    code: 'idle → sleep()'
-  },
-  {
-    category: 'Ownership',
-    number: '05',
-    icon: (
-      <svg
-        xmlns='http://www.w3.org/2000/svg'
-        className='h-6 w-6 text-accent'
-        viewBox='0 0 24 24'
-        fill='none'
-        stroke='currentColor'
-        strokeWidth='1.5'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      >
-        <path d='M15 22v-2.5a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 19.5 5.77 5.07 5.07 0 0 0 19.4 2S18.27 1.65 15 3.46a13.38 13.38 0 0 0-6 0C5.73 1.65 4.6 2 4.6 2a5.07 5.07 0 0 0-.1 3.77A5.44 5.44 0 0 0 3.5 9.89c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 19.5V22'></path>
-        <path d='M9 18c-4.51 2-5-2-7-2'></path>
-      </svg>
-    ),
-    title: 'Open Source & Self-Hostable',
-    description:
-      'No lock-in. Run on your platform of choice or bare metal with the same API and mental model.',
-    code: 'apache-2.0'
-  },
-  {
-    category: 'Reliability',
-    number: '06',
-    icon: (
-      <svg
-        xmlns='http://www.w3.org/2000/svg'
-        className='h-6 w-6 text-accent'
-        viewBox='0 0 24 24'
-        fill='none'
-        stroke='currentColor'
-        strokeWidth='1.5'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      >
-        <path d='m9 12 2 2 4-4'></path>
-        <path d='M12 22c4.5-2 8-5 8-10V5l-8-3-8 3v7c0 5 3.5 8 8 10'></path>
-      </svg>
-    ),
-    title: 'Resilient by Design',
-    description:
-      'Automatic failover and restarts maintain state integrity. Your actors survive crashes, deploys, noisy neighbors.',
-    code: 'uptime > 99.9%'
-  }
-];
-
-export function NewFeaturesBento() {
-  useEffect(() => {
-    // Scroll animation setup using existing system
-    const scrollElements = document.querySelectorAll('.animate-on-scroll');
-
-    const observer = new IntersectionObserver(
-      entries => {
-        entries.forEach(entry => {
-          if (entry.isIntersecting) {
-            entry.target.classList.add('is-visible');
-            observer.unobserve(entry.target);
-          }
-        });
-      },
-      { threshold: 0.1 }
-    );
-
-    scrollElements.forEach(el => observer.observe(el));
-
-    return () => {
-      scrollElements.forEach(el => observer.unobserve(el));
-    };
-  }, []);
-
-  return (
-    <section className='py-24 md:py-32'>
-      <div className='mx-auto max-w-6xl px-4 sm:px-6 lg:px-8'>
-        <h2 className='animate-on-scroll animate-fade-up mb-16 text-center font-heading text-4xl font-bold tracking-tighter text-text-primary md:text-5xl'>
-          A New Primitive for Your Backend.
-        </h2>
-
-        <div className='grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3'>
-          {primitives.map((primitive, index) => {
-            const delayClasses = [
-              'delay-100',
-              'delay-200',
-              'delay-300',
-              'delay-400',
-              'delay-500',
-              'delay-600'
-            ];
-            return (
-              <div
-                key={index}
-                className={`bento-box animate-on-scroll animate-fade-up ${
-                  delayClasses[index] || ''
-                } flex flex-col justify-between rounded-xl border border-border bg-background/50 p-6 md:p-8`}
-              >
-                {/* Header with category badge and number */}
-                <div className='mb-6 flex items-start justify-between gap-4'>
-                  <div className='inline-flex items-center justify-center rounded-full border border-border bg-black/50 px-3 py-1.5'>
-                    <span className='mr-2 h-1.5 w-1.5 rounded-full bg-accent'></span>
-                    <span className='text-xs uppercase tracking-wider text-text-secondary'>
-                      {primitive.category}
-                    </span>
-                  </div>
-                  <span className='font-mono text-xs text-text-secondary'>{primitive.number}</span>
-                </div>
-
-                {/* Icon, title, and description */}
-                <div className='flex-1'>
-                  <div className='mb-4 inline-flex items-center justify-center rounded-lg border border-border bg-black/30 p-3'>
-                    {primitive.icon}
-                  </div>
-                  <h3 className='mb-2 font-heading text-xl font-bold text-text-primary'>{primitive.title}</h3>
-                  <p className='text-text-secondary'>{primitive.description}</p>
-                </div>
-
-                {/* Footer with code */}
-                <div className='mt-6 border-t border-border pt-4'>
-                  <span className='font-mono text-xs text-text-secondary'>{primitive.code}</span>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/website/src/components/marketing/sections/NewHeroSection.tsx b/website/src/components/marketing/sections/NewHeroSection.tsx
deleted file mode 100644
index 3e3f796855..0000000000
--- a/website/src/components/marketing/sections/NewHeroSection.tsx
+++ /dev/null
@@ -1,489 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-
-// StyleInjector Component - Injects custom CSS
-const StyleInjector = () => (
-  <style
-    dangerouslySetInnerHTML={{
-      __html: `
-    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
-    
-    /* --- Background Grid --- */
-    .hero-background {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      width: 100%;
-      height: 100%;
-      background-color: #000000;
-      background-image:
-        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
-      background-size: 3rem 3rem;
-      animation: pan-grid 60s linear infinite;
-    }
-    
-    .hero-background-overlay {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      width: 100%;
-      height: 100%;
-      background: radial-gradient(ellipse 70% 40% at 50% 50%, rgba(255, 240, 220, 0.08) 0%, rgba(10, 10, 10, 1) 70%);
-    }
-    
-    @keyframes pan-grid {
-      0% { background-position: 0% 0%; }
-      100% { background-position: 3rem 3rem; }
-    }
-    
-    /* --- Request Packet Animations - L-shaped paths --- */
-    /* Packets start at x=60px (icon center), need to reach x=280px (220px horizontal movement) */
-    @keyframes fly-req-1 {
-      0% { opacity: 0; transform: translate(0, 0); }
-      2% { opacity: 1; }
-      10% { transform: translate(0, 20px); } /* Drop down vertically - reach turn point very quickly */
-      12% { transform: translate(0, 20px); } /* Brief pause at turn */
-      100% { opacity: 0; transform: translate(220px, 20px); } /* Turn right and move all the way to actor */
-    }
-    
-    @keyframes fly-req-2 {
-      0% { opacity: 0; transform: translate(0, 0); }
-      2% { opacity: 1; }
-      100% { opacity: 0; transform: translate(220px, 0px); } /* Pure horizontal movement - no drop */
-    }
-    
-    @keyframes fly-req-3 {
-      0% { opacity: 0; transform: translate(0, 0); }
-      2% { opacity: 1; }
-      10% { transform: translate(0, -20px); } /* Move up - reach turn point very quickly */
-      12% { transform: translate(0, -20px); } /* Brief pause at turn */
-      100% { opacity: 0; transform: translate(220px, -20px); } /* Turn right and move all the way to actor */
-    }
-    
-    /* --- Actor Processing Pulse --- */
-    @keyframes pulse-actor {
-      0% { box-shadow: 0 0 0 0 rgba(255, 69, 0, 0.3); }
-      50% { box-shadow: 0 0 15px 8px rgba(255, 69, 0, 0.15); }
-      100% { box-shadow: 0 0 0 0 rgba(255, 69, 0, 0); }
-    }
-    
-    .animate-fly-1 { animation: fly-req-1 0.4s linear forwards; }
-    .animate-fly-2 { animation: fly-req-2 0.4s linear forwards; }
-    .animate-fly-3 { animation: fly-req-3 0.4s linear forwards; }
-    .animate-pulse-actor { animation: pulse-actor 0.4s ease-in-out; }
-    
-    /* Green packet animation from actor to database */
-    @keyframes fly-green {
-      0% { opacity: 0; transform: translate(0, 0); }
-      2% { opacity: 1; }
-      100% { opacity: 0; transform: translate(0, 89px); } /* Move down 89px from actor bottom (221) to database (310) */
-    }
-    
-    .animate-fly-green { animation: fly-green 0.6s linear forwards; }
-    
-    /* Database glow animation - triggers when ball reaches database */
-    @keyframes glow-database {
-      0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
-      50% { box-shadow: 0 0 8px 4px rgba(34, 197, 94, 0.08); }
-      100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
-    }
-    
-    .animate-glow-database { 
-      animation: glow-database 0.3s ease-out;
-    }
-    
-    /* Connection lines */
-    .connection-line {
-      stroke: rgba(59, 130, 246, 0.5);
-      stroke-width: 2.5;
-      stroke-dasharray: 5, 5;
-      animation: dash-move 2s linear infinite;
-    }
-    
-    .connection-line-green {
-      stroke: rgba(34, 197, 94, 0.6);
-      stroke-width: 2.5;
-      stroke-dasharray: 5, 5;
-      animation: dash-move 2s linear infinite;
-    }
-    
-    @keyframes dash-move {
-      0% { stroke-dashoffset: 0; }
-      100% { stroke-dashoffset: 10; }
-    }
-  `
-    }}
-  />
-);
-
-// UserNode Component
-const UserNode = ({
-  label,
-  position,
-  style
-}: {
-  label: string;
-  position: string;
-  style?: React.CSSProperties;
-}) => (
-  <div className={`absolute ${position} flex items-center space-x-3`} style={{ zIndex: 3, ...style }}>
-    <div className='flex h-10 w-10 items-center justify-center rounded-full border-2 border-neutral-500 bg-neutral-700'>
-      <svg
-        className='h-5 w-5 text-neutral-400'
-        fill='none'
-        viewBox='0 0 24 24'
-        strokeWidth={1.5}
-        stroke='currentColor'
-      >
-        <path
-          strokeLinecap='round'
-          strokeLinejoin='round'
-          d='M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A1.5 1.5 0 0118 21.75H6a1.5 1.5 0 01-1.499-1.632z'
-        />
-      </svg>
-    </div>
-    <span className='text-sm font-medium text-neutral-400'>{label}</span>
-  </div>
-);
-
-// DatabaseNode Component - Green dot for database/API
-const DatabaseNode = ({
-  label,
-  position,
-  shouldGlow
-}: {
-  label: string;
-  position: string;
-  shouldGlow?: boolean;
-}) => (
-  <div className={`absolute ${position} flex items-center space-x-3`} style={{ zIndex: 3 }}>
-    <div
-      className={`flex h-10 w-10 items-center justify-center rounded-full border-2 border-green-400 bg-green-600 ${
-        shouldGlow ? 'animate-glow-database' : ''
-      }`}
-    >
-      <svg
-        className='h-5 w-5 text-green-200'
-        fill='none'
-        viewBox='0 0 24 24'
-        strokeWidth={1.5}
-        stroke='currentColor'
-      >
-        <path
-          strokeLinecap='round'
-          strokeLinejoin='round'
-          d='M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125'
-        />
-      </svg>
-    </div>
-    <span className='text-sm font-medium text-green-400'>{label}</span>
-  </div>
-);
-
-// RequestPacket Component
-const RequestPacket = ({
-  id,
-  status,
-  position,
-  startX,
-  startY
-}: {
-  id: string;
-  status: string;
-  position: string;
-  startX?: number;
-  startY?: number;
-}) => {
-  let animationClass = '';
-  if (status === 'flying') {
-    if (id === 'req1') animationClass = 'animate-fly-1';
-    if (id === 'req2') animationClass = 'animate-fly-2';
-    if (id === 'req3') animationClass = 'animate-fly-3';
-  }
-  return (
-    <div
-      className={`absolute h-5 w-5 rounded-full border-2 border-blue-300 bg-blue-500 shadow-lg shadow-blue-500/50 ${
-        position || ''
-      } ${status === 'flying' ? animationClass : 'opacity-0'}`}
-      style={{
-        zIndex: 1, // Behind the grey icons (which are z-index: 3)
-        left: startX ? `${startX - 10}px` : undefined,
-        top: startY ? `${startY - 10}px` : undefined
-      }}
-    />
-  );
-};
-
-// GreenPacket Component - travels from actor to database
-const GreenPacket = ({ status }: { status: string }) => {
-  return (
-    <div
-      className={`absolute h-5 w-5 rounded-full border-2 border-green-300 bg-green-500 shadow-lg shadow-green-500/50 ${
-        status === 'processing' ? 'animate-fly-green' : 'opacity-0'
-      }`}
-      style={{
-        zIndex: 1,
-        left: '366px', // Actor center x=376, minus 10px for icon center
-        top: '211px' // Actor bottom y=221, minus 10px for icon center
-      }}
-    />
-  );
-};
-
-// ActorAnimation Component
-const ActorAnimation = () => {
-  const [actorState, setActorState] = useState({ count: 10 });
-  const [actorStatus, setActorStatus] = useState<'hibernating' | 'active' | 'processing'>('hibernating');
-  const [requests, setRequests] = useState({ req1: 'idle', req2: 'idle', req3: 'idle' });
-  const [step, setStep] = useState(0);
-  const [shouldGlowDatabase, setShouldGlowDatabase] = useState(false);
-
-  useEffect(() => {
-    const sequence = [
-      () => {
-        setActorStatus('active');
-        setShouldGlowDatabase(false); // Reset glow when status changes
-      },
-      () => setRequests(r => ({ ...r, req1: 'flying' })),
-      () => {
-        setRequests(r => ({ ...r, req1: 'idle' }));
-        setActorStatus('processing');
-        setActorState(s => ({ count: s.count + 1 }));
-        // Trigger database glow when ball reaches (after 0.6s)
-        setShouldGlowDatabase(false); // Reset first
-        setTimeout(() => setShouldGlowDatabase(true), 600);
-      },
-      () => {
-        setActorStatus('active');
-        setShouldGlowDatabase(false); // Reset glow when status changes
-      },
-      () => setRequests(r => ({ ...r, req2: 'flying' })),
-      () => {
-        setRequests(r => ({ ...r, req2: 'idle' }));
-        setActorStatus('processing');
-        setActorState(s => ({ count: s.count + 1 }));
-        // Trigger database glow when ball reaches (after 0.6s)
-        setShouldGlowDatabase(false); // Reset first
-        setTimeout(() => setShouldGlowDatabase(true), 600);
-      },
-      () => {
-        setActorStatus('active');
-        setShouldGlowDatabase(false); // Reset glow when status changes
-      },
-      () => setRequests(r => ({ ...r, req3: 'flying' })),
-      () => {
-        setRequests(r => ({ ...r, req3: 'idle' }));
-        setActorStatus('processing');
-        setActorState(s => ({ count: s.count + 1 }));
-        // Trigger database glow when ball reaches (after 0.6s)
-        setShouldGlowDatabase(false); // Reset first
-        setTimeout(() => setShouldGlowDatabase(true), 600);
-      },
-      () => {
-        setActorStatus('hibernating');
-        setShouldGlowDatabase(false); // Reset glow when status changes
-      },
-      () => {
-        setActorState({ count: 10 });
-        setStep(0);
-      }
-    ];
-
-    const delays = [1000, 1200, 400, 500, 1200, 400, 500, 1200, 400, 3000, 500];
-
-    const timer = setTimeout(() => {
-      if (sequence[step]) {
-        sequence[step]();
-        setStep(s => s + 1);
-      }
-    }, delays[step] || 1000);
-
-    return () => clearTimeout(timer);
-  }, [step]);
-
-  const getActorClasses = () => {
-    let classes = 'w-48 h-48 border-2 flex flex-col items-center justify-center transition-all duration-500';
-
-    if (actorStatus === 'hibernating') {
-      classes += ' bg-orange-900/30 border-orange-500/20 opacity-60';
-    } else if (actorStatus === 'active') {
-      classes += ' bg-orange-900/80 border-orange-400 opacity-100';
-    } else if (actorStatus === 'processing') {
-      classes += ' bg-orange-900/80 border-orange-300 opacity-100 animate-pulse-actor';
-    }
-
-    return classes;
-  };
-
-  const getActorTextClasses = () => {
-    let classes = 'transition-all duration-500';
-    if (actorStatus === 'hibernating') {
-      classes += ' text-orange-500/40';
-    } else {
-      classes += ' text-orange-300';
-    }
-    return classes;
-  };
-
-  return (
-    <div className='relative flex h-[400px] w-full items-center justify-center lg:h-[500px]'>
-      <div className='relative h-[350px] w-[600px]'>
-        {/* SVG Connection Lines - Behind everything - L-shaped paths */}
-        <svg className='pointer-events-none absolute inset-0 h-full w-full' style={{ zIndex: 0 }}>
-          {/* L-shaped path from top node: down then right to actor top */}
-          {/* Icon is 40px wide, center at 40px + 20px = 60px. Icon is 40px tall, center Y at top + 20px */}
-          <path d='M 60 40 L 60 60 L 280 60' className='connection-line' fill='none' />
-          {/* Horizontal path from middle node: straight to actor center (no drop) */}
-          <path d='M 60 125 L 280 125' className='connection-line' fill='none' />
-          {/* L-shaped path from bottom node: up then right to actor bottom */}
-          <path d='M 60 210 L 60 190 L 280 190' className='connection-line' fill='none' />
-          {/* Green dashed line from actor to database/API below */}
-          {/* Actor: left edge at x=280, width 192px (w-48), so center at x=376. Top at y=125 with translateY(-50%), height 192px, so bottom at y=221 */}
-          {/* Database icon center is at y=310 (350px height - 40px), and centered horizontally with actor at x=376 */}
-          <path d='M 376 221 L 376 310' className='connection-line-green' fill='none' />
-        </svg>
-
-        {/* User Nodes on the left - positioned relative to blue lines */}
-        {/* Top line starts at y=40, User Request should be above it */}
-        {/* Middle line is at y=125, API Call centered on it */}
-        {/* Bottom line ends at y=190, Background Job is below it (center at y=230, top at 210px) */}
-        <UserNode label='User Request' position='left-10' style={{ top: '0px' }} />
-        <UserNode label='API Call' position='left-10' style={{ top: '105px' }} />
-        <UserNode label='Background Job' position='left-10' style={{ top: '210px' }} />
-
-        {/* Actor on the right - lines connect at x=280, y=60, y=125, y=190 */}
-        {/* Actor is 192px wide (w-48), so if lines connect at x=280, position actor so left edge is at x=280 */}
-        <div
-          className='absolute left-[280px] top-[125px]'
-          style={{ transform: 'translateY(-50%)', zIndex: 2 }}
-        >
-          <div className={`relative ${getActorClasses()}`} style={{ borderRadius: '42px' }}>
-            <div className='absolute top-3 rounded-full bg-orange-400/20 px-3 py-1 text-xs font-medium text-orange-300'>
-              Actor
-            </div>
-            <div className='mt-4 w-[85%] rounded-lg bg-black/30 p-4'>
-              <code className='text-sm'>
-                <span className={getActorTextClasses()}>{'{'}</span>
-                <span className='text-white/80'>"count"</span>
-                <span className='text-white'>: </span>
-                <span className='font-bold text-fuchsia-400'>{JSON.stringify(actorState.count)}</span>
-                <span className={getActorTextClasses()}>{'}'}</span>
-              </code>
-            </div>
-            <span className={`mt-2 text-xs font-medium ${getActorTextClasses()}`}>Status: {actorStatus}</span>
-          </div>
-        </div>
-
-        {/* Database/API Node below the actor - centered with actor */}
-        <div className='absolute bottom-0 left-[376px]' style={{ transform: 'translateX(-50%)', zIndex: 3 }}>
-          <div className='flex items-center space-x-3'>
-            <div
-              className={`flex h-10 w-10 items-center justify-center rounded-full border-2 border-green-400 bg-green-600 ${
-                shouldGlowDatabase ? 'animate-glow-database' : ''
-              }`}
-            >
-              <svg
-                className='h-5 w-5 text-green-200'
-                fill='none'
-                viewBox='0 0 24 24'
-                strokeWidth={1.5}
-                stroke='currentColor'
-              >
-                <path
-                  strokeLinecap='round'
-                  strokeLinejoin='round'
-                  d='M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125'
-                />
-              </svg>
-            </div>
-            <span className='text-sm font-medium text-green-400'>Database/API</span>
-          </div>
-        </div>
-
-        {/* Request Packets - Start at center of user node icons, follow lines */}
-        {/* Positioned at icon centers: top at y=40, middle at y=125, bottom at y=210 */}
-        <RequestPacket id='req1' status={requests.req1} position='' startX={60} startY={40} />
-        <RequestPacket id='req2' status={requests.req2} position='' startX={60} startY={125} />
-        <RequestPacket id='req3' status={requests.req3} position='' startX={60} startY={210} />
-
-        {/* Green Packet - travels from actor to database when processing */}
-        <GreenPacket status={actorStatus} />
-      </div>
-    </div>
-  );
-};
-
-export function NewHeroSection() {
-  return (
-    <>
-      <StyleInjector />
-      <section className='relative flex min-h-screen w-full items-center justify-center overflow-hidden text-white'>
-        {/* Background Grid */}
-        <div className='hero-background' aria-hidden='true'></div>
-        <div className='hero-background-overlay' aria-hidden='true'></div>
-
-        {/* Content */}
-        <div className='container relative z-10 mx-auto px-6 py-20'>
-          <div className='grid grid-cols-1 items-center gap-16 lg:grid-cols-2'>
-            {/* Left: Text Content - Left Aligned */}
-            <div className='flex flex-col space-y-8 text-left'>
-              <h1
-                className='font-heading text-5xl font-bold tracking-tighter md:text-6xl lg:text-7xl'
-                style={{ color: '#FAFAFA' }}
-              >
-                <span className='block overflow-hidden leading-[1.1]'>
-                  <span className='block animate-hero-line opacity-0' style={{ animationDelay: '0.1s' }}>
-                    Stateful Backends.
-                  </span>
-                </span>
-                <span className='block overflow-hidden leading-[1.1]'>
-                  <span className='block animate-hero-line opacity-0' style={{ animationDelay: '0.3s' }}>
-                    Finally Solved.
-                  </span>
-                </span>
-              </h1>
-
-              <p
-                className='max-w-lg animate-hero-p text-lg opacity-0 md:text-xl'
-                style={{ color: '#A0A0A0' }}
-              >
-                Rivet is open-source infrastructure for long-lived, in-memory processes called Actors. It's
-                what you reach for when you hit the limits of Lambda.
-              </p>
-
-              <div className='flex animate-hero-cta flex-col gap-4 opacity-0 sm:flex-row'>
-                <a href='/docs/quickstart/'
-                  className='rounded-lg px-8 py-3.5 text-center font-bold text-white transition-all duration-200 hover:-translate-y-0.5 hover:bg-orange-600 hover:shadow-lg'
-                  style={{ backgroundColor: '#FF4500' }}
-                >
-                  Quickstart – 5 Mins
-                </a>
-                <a href='https://github.com/rivet-dev/rivet'
-                  className='rounded-lg px-8 py-3.5 text-center font-medium transition-all duration-200'
-                  style={{
-                    border: '1px solid #252525',
-                    color: '#A0A0A0',
-                    backgroundColor: 'rgba(37, 37, 37, 0.5)'
-                  }}
-                >
-                  View on GitHub →
-                </a>
-              </div>
-            </div>
-
-            {/* Right: Animation */}
-            <div className='flex h-full w-full items-center justify-center lg:justify-end'>
-              <ActorAnimation />
-            </div>
-          </div>
-        </div>
-      </section>
-    </>
-  );
-}
diff --git a/website/src/components/marketing/sections/NewUseCases.tsx b/website/src/components/marketing/sections/NewUseCases.tsx
deleted file mode 100644
index 398d33b4eb..0000000000
--- a/website/src/components/marketing/sections/NewUseCases.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-'use client';
-
-import { useRef, useState, useEffect } from 'react';
-
-const useCases = [
-  {
-    title: 'AI Agents',
-    description: 'Build durable assistants with persistent, long-term memory and context.'
-  },
-  {
-    title: 'Collaborative SaaS',
-    description: 'Power real-time docs, whiteboards, and Figma-like tools with live sync.'
-  },
-  {
-    title: 'Workflows',
-    description: 'Create multi-step background jobs and workflows that can run for days.'
-  },
-  {
-    title: 'Logistics & IoT',
-    description: 'Manage state and send commands to millions of connected devices in real-time.'
-  },
-  {
-    title: 'Live Event Platforms',
-    description: 'Push real-time data, polls, and chat to 100,000+ concurrent users.'
-  },
-  {
-    title: 'Per-User Backends',
-    description: 'Instantly spin up an isolated, stateful backend for every user who signs up.'
-  }
-];
-
-export function NewUseCases() {
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const [isDragging, setIsDragging] = useState(false);
-  const [startX, setStartX] = useState(0);
-  const [scrollLeft, setScrollLeft] = useState(0);
-  const [isPaused, setIsPaused] = useState(false);
-  const animationRef = useRef<number>();
-
-  // Auto-scroll animation
-  useEffect(() => {
-    const scroll = () => {
-      if (!scrollRef.current || isPaused || isDragging) return;
-
-      const container = scrollRef.current;
-      const maxScroll = container.scrollWidth / 2; // Half because we have duplicates
-
-      // Increment scroll position
-      container.scrollLeft += 1;
-
-      // Reset to start when we've scrolled through the first set
-      if (container.scrollLeft >= maxScroll) {
-        container.scrollLeft = 0;
-      }
-
-      animationRef.current = requestAnimationFrame(scroll);
-    };
-
-    animationRef.current = requestAnimationFrame(scroll);
-
-    return () => {
-      if (animationRef.current) {
-        cancelAnimationFrame(animationRef.current);
-      }
-    };
-  }, [isPaused, isDragging]);
-
-  const handleMouseDown = (e: React.MouseEvent) => {
-    setIsDragging(true);
-    setStartX(e.pageX - (scrollRef.current?.offsetLeft || 0));
-    setScrollLeft(scrollRef.current?.scrollLeft || 0);
-  };
-
-  const handleMouseMove = (e: React.MouseEvent) => {
-    if (!isDragging) return;
-    e.preventDefault();
-    const x = e.pageX - (scrollRef.current?.offsetLeft || 0);
-    const walk = (x - startX) * 2;
-    if (scrollRef.current) {
-      scrollRef.current.scrollLeft = scrollLeft - walk;
-    }
-  };
-
-  const handleMouseUp = () => {
-    setIsDragging(false);
-  };
-
-  const handleMouseLeave = () => {
-    setIsDragging(false);
-    setIsPaused(false);
-  };
-
-  const handleMouseEnter = () => {
-    setIsPaused(true);
-  };
-
-  return (
-    <section className='overflow-hidden py-24 md:py-32'>
-      <h2 className='animate-on-scroll animate-fade-up text-center font-heading text-4xl font-bold tracking-tighter text-text-primary md:text-5xl'>
-        From AI to IoT, Build What's Next.
-      </h2>
-
-      <div className='relative -mx-4 mt-16 px-4 [mask-image:_linear-gradient(to_right,transparent_0,_black_10%,_black_90%,transparent_100%)]'>
-        <div
-          ref={scrollRef}
-          className='scrollbar-hide cursor-grab overflow-x-auto py-2 active:cursor-grabbing'
-          onMouseDown={handleMouseDown}
-          onMouseMove={handleMouseMove}
-          onMouseUp={handleMouseUp}
-          onMouseLeave={handleMouseLeave}
-          onMouseEnter={handleMouseEnter}
-          style={{ scrollbarWidth: 'none', msOverflowStyle: 'none', overflowY: 'visible' }}
-        >
-          <div className='flex gap-6'>
-            {/* First set of cards */}
-            {useCases.map((useCase, index) => (
-              <div
-                key={`original-${index}`}
-                className='bento-box w-72 flex-none select-none rounded-xl border border-border p-6 md:w-80'
-              >
-                <h3 className='font-heading text-xl font-bold text-text-primary'>{useCase.title}</h3>
-                <p className='mt-2 text-text-secondary'>{useCase.description}</p>
-              </div>
-            ))}
-            {/* Duplicate set for seamless loop */}
-            {useCases.map((useCase, index) => (
-              <div
-                key={`duplicate-${index}`}
-                className='bento-box w-72 flex-none select-none rounded-xl border border-border p-6 md:w-80'
-              >
-                <h3 className='font-heading text-xl font-bold text-text-primary'>{useCase.title}</h3>
-                <p className='mt-2 text-text-secondary'>{useCase.description}</p>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/website/src/components/marketing/sections/ObservabilitySection.tsx b/website/src/components/marketing/sections/ObservabilitySection.tsx
index ccff156ed9..1a5d06ca42 100644
--- a/website/src/components/marketing/sections/ObservabilitySection.tsx
+++ b/website/src/components/marketing/sections/ObservabilitySection.tsx
@@ -1,9 +1,33 @@
 'use client';
 
-import { Database, GitBranch, Activity, Terminal, ArrowRight } from 'lucide-react';
+import { Database, GitBranch, Activity, Terminal, Sun, Moon } from 'lucide-react';
 import { motion } from 'framer-motion';
-const imgInspector = { src: "https://assets.rivet.dev/repo/website/src/components/marketing/images/screenshots/inspector-6.png", width: 5984, height: 3224, format: "png" };
+import { useState } from 'react';
+import { SECTION_H2_CLASS, SUBTITLE_CLASS } from '../typography';
+
+const inspectorAspect = 2438 / 1613;
+
+const inspectorImages = {
+  light: {
+    src: 'https://assets.rivet.dev/repo/website/src/components/marketing/images/screenshots/rivet-actor-inspector-light.png',
+    icon: Sun,
+    label: 'Show inspector in light mode',
+  },
+  dark: {
+    src: 'https://assets.rivet.dev/repo/website/src/components/marketing/images/screenshots/rivet-actor-inspector-dark.png',
+    icon: Moon,
+    label: 'Show inspector in dark mode',
+  },
+} as const;
+
+type InspectorTheme = keyof typeof inspectorImages;
+const inspectorThemes = Object.keys(inspectorImages) as InspectorTheme[];
+
 export const ObservabilitySection = () => {
+  // The light screenshot reads cleanly inside the light frame, so it is the
+  // default; the toggle still offers dark.
+  const [theme, setTheme] = useState<InspectorTheme>('light');
+
   const features = [
     {
       title: 'SQLite Viewer',
@@ -29,10 +53,10 @@ export const ObservabilitySection = () => {
   ];
 
   return (
-    <section className='border-t border-white/10 bg-black py-16 md:py-48'>
+    <section className='border-t border-ink/10 py-16 md:py-32'>
       <div className='mx-auto max-w-7xl px-6'>
         <div className='relative'>
-          {/* Screenshot on top */}
+          {/* The light frame holding the inspector screenshot */}
           <motion.div
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
@@ -40,33 +64,72 @@ export const ObservabilitySection = () => {
             transition={{ duration: 0.5 }}
             className='relative'
           >
-            <div className='overflow-hidden rounded-lg border border-white/10'>
-              <div className='relative w-full' style={{ aspectRatio: `${imgInspector.width} / ${imgInspector.height}` }}>
-                <img src={imgInspector.src}
-                  alt='Rivet Inspector Dashboard'
-                  className='h-full w-full object-cover'
-                />
+            <div className='relative overflow-hidden rounded-xl border border-ink/10 bg-paper-mid'>
+              <div className='relative p-3 md:p-4'>
+                <div className='relative w-full overflow-hidden rounded-md' style={{ aspectRatio: inspectorAspect }}>
+                  {inspectorThemes.map((t) => (
+                    <motion.img
+                      key={t}
+                      src={inspectorImages[t].src}
+                      alt={`Rivet Actor Inspector in ${t} mode`}
+                      className='absolute inset-0 h-full w-full object-cover'
+                      initial={false}
+                      animate={{ opacity: theme === t ? 1 : 0 }}
+                      transition={{ duration: 0.35, ease: 'easeInOut' }}
+                    />
+                  ))}
+                </div>
+
+                {/* Light/dark mode toggle */}
+                <div className='absolute bottom-6 right-6 flex items-center gap-1 rounded-lg border border-white/15 bg-ink/70 p-1 backdrop-blur'>
+                  {inspectorThemes.map((t) => {
+                    const Icon = inspectorImages[t].icon;
+                    const active = theme === t;
+                    return (
+                      <button
+                        key={t}
+                        type='button'
+                        onClick={() => setTheme(t)}
+                        aria-label={inspectorImages[t].label}
+                        aria-pressed={active}
+                        className='relative flex h-7 w-7 items-center justify-center rounded-md'
+                      >
+                        {active && (
+                          <motion.span
+                            layoutId='inspector-theme-active'
+                            className='absolute inset-0 rounded-md bg-white'
+                            transition={{ type: 'spring', stiffness: 500, damping: 35 }}
+                          />
+                        )}
+                        <Icon
+                          className={`relative h-3.5 w-3.5 transition-colors ${
+                            active ? 'text-ink' : 'text-white/50 hover:text-white'
+                          }`}
+                        />
+                      </button>
+                    );
+                  })}
+                </div>
               </div>
             </div>
           </motion.div>
 
           {/* Text content below */}
           <div className='mt-12'>
-            <motion.h2
+            <motion.div
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true }}
               transition={{ duration: 0.5 }}
-              className='mb-2 text-2xl font-normal tracking-tight text-white md:text-4xl'
             >
-              Built-In Observability
-            </motion.h2>
+              <h2 className={`mb-2 ${SECTION_H2_CLASS}`}>Built-In Observability</h2>
+            </motion.div>
             <motion.p
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true }}
               transition={{ duration: 0.5, delay: 0.1 }}
-              className='mb-6 max-w-xl text-base leading-relaxed text-zinc-500'
+              className={`mb-6 max-w-xl ${SUBTITLE_CLASS}`}
             >
               Debugging and monitoring for actors and agents, from local development to production at scale.
             </motion.p>
@@ -79,11 +142,11 @@ export const ObservabilitySection = () => {
                   whileInView={{ opacity: 1, y: 0 }}
                   viewport={{ once: true }}
                   transition={{ duration: 0.5, delay: idx * 0.1 }}
-                  className='border-t border-white/10 py-6 pr-8'
+                  className='border-t border-ink/10 py-6 pr-8'
                 >
-                  <div className='mb-2 text-zinc-600'>{feat.icon}</div>
-                  <h3 className='mb-1 text-sm font-normal text-white'>{feat.title}</h3>
-                  <p className='text-sm leading-relaxed text-zinc-500'>{feat.description}</p>
+                  <div className='mb-2 text-olive'>{feat.icon}</div>
+                  <h3 className='mb-1 text-sm font-medium text-ink'>{feat.title}</h3>
+                  <p className='text-sm leading-relaxed text-ink-soft'>{feat.description}</p>
                 </motion.div>
               ))}
             </div>
diff --git a/website/src/components/marketing/sections/OnPremSection.tsx b/website/src/components/marketing/sections/OnPremSection.tsx
index c539a4b41f..79415e30e6 100644
--- a/website/src/components/marketing/sections/OnPremSection.tsx
+++ b/website/src/components/marketing/sections/OnPremSection.tsx
@@ -1,93 +1,85 @@
 'use client';
 
 import { motion } from 'framer-motion';
-import { Lock, Building2, ShieldCheck, ArrowRight } from 'lucide-react';
+import { ArrowRight, Check } from 'lucide-react';
+import { SECTION_H2_CLASS, SUBTITLE_CLASS } from '../typography';
+import { PerimeterDiagram } from '../editorial/PerimeterDiagram';
 
 const points = [
-  {
-    icon: Lock,
-    title: 'Air-gapped and on-prem',
-    body: 'Run the same Rivet that powers our cloud entirely inside your perimeter. No outbound calls, no telemetry leaving your boundary.',
-  },
-  {
-    icon: Building2,
-    title: 'Embed in your customers',
-    body: 'Ship Rivet inside your customer’s VPC, regulated environment, or on-prem hardware. They keep their data, you keep your product.',
-  },
-  {
-    icon: ShieldCheck,
-    title: 'Your compliance posture, intact',
-    body: 'FedRAMP, HIPAA, regulated industries, sovereign clouds. Deploying inside the boundary your existing controls already cover keeps the audit story simple.',
-  },
+	'Air-gapped and on-prem: no outbound calls, no telemetry leaving your boundary',
+	'Embed in your customers’ VPCs: they keep their data, you keep your product',
+	'FedRAMP, HIPAA, sovereign clouds: stay inside the boundary your controls already cover',
 ];
 
 export const OnPremSection = () => (
-  <section className='border-t border-white/10 px-6 py-16 md:py-32'>
-    <div className='mx-auto max-w-7xl'>
-      <div className='mb-12 max-w-3xl'>
-        <motion.h2
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.5, delay: 0.05 }}
-          className='mb-4 text-2xl font-normal tracking-tight text-white md:text-4xl'
-        >
-          Run it where your data lives.
-        </motion.h2>
-        <motion.p
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.5, delay: 0.1 }}
-          className='text-base leading-relaxed text-zinc-500 md:text-lg'
-        >
-          A single binary you control. Deploy Rivet inside your VPC, your customer’s VPC, or fully air-gapped. Use the compliance you already have instead of waiting on someone else’s.
-        </motion.p>
-      </div>
-
-      <div className='grid grid-cols-1 gap-6 md:grid-cols-3'>
-        {points.map((point, idx) => {
-          const Icon = point.icon;
-          return (
-            <motion.div
-              key={point.title}
-              initial={{ opacity: 0, y: 20 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.5, delay: 0.05 * idx }}
-              className='flex flex-col border-t border-white/10 pt-6'
-            >
-              <div className='mb-3 text-zinc-500'>
-                <Icon className='h-4 w-4' />
-              </div>
-              <h3 className='mb-2 text-base font-normal text-white'>{point.title}</h3>
-              <p className='text-sm leading-relaxed text-zinc-500'>{point.body}</p>
-            </motion.div>
-          );
-        })}
-      </div>
-
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        whileInView={{ opacity: 1, y: 0 }}
-        viewport={{ once: true }}
-        transition={{ duration: 0.5, delay: 0.2 }}
-        className='mt-12 flex flex-col items-center justify-center gap-3 sm:flex-row'
-      >
-        <a
-          href='/talk-to-an-engineer'
-          className='inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-white px-4 py-2 text-sm font-medium text-black transition-colors hover:bg-zinc-200'
-        >
-          Talk to an engineer
-          <ArrowRight className='h-4 w-4' />
-        </a>
-        <a
-          href='/docs/general/self-hosting'
-          className='inline-flex items-center justify-center whitespace-nowrap rounded-md border border-white/10 px-4 py-2 text-sm text-zinc-300 transition-colors hover:border-white/20 hover:text-white'
-        >
-          Read self-hosting docs
-        </a>
-      </motion.div>
-    </div>
-  </section>
+	<section className='border-t border-ink/10 px-6 py-16 md:py-32'>
+		<div className='mx-auto max-w-7xl'>
+			<div className='grid grid-cols-1 items-center gap-12 lg:grid-cols-2 lg:gap-20'>
+				<div>
+					<motion.div
+						initial={{ opacity: 0, y: 20 }}
+						whileInView={{ opacity: 1, y: 0 }}
+						viewport={{ once: true }}
+						transition={{ duration: 0.5, delay: 0.05 }}
+					>
+												<h2 className={`mb-4 ${SECTION_H2_CLASS}`}>Run it where your data lives.</h2>
+					</motion.div>
+					<motion.p
+						initial={{ opacity: 0, y: 20 }}
+						whileInView={{ opacity: 1, y: 0 }}
+						viewport={{ once: true }}
+						transition={{ duration: 0.5, delay: 0.1 }}
+						className='text-base leading-relaxed text-ink-soft md:text-lg'
+					>
+						A single binary you control. Deploy Rivet inside your VPC, your customer&rsquo;s VPC, or fully air-gapped, with the compliance you already have.
+					</motion.p>
+					<motion.ul
+						initial={{ opacity: 0, y: 20 }}
+						whileInView={{ opacity: 1, y: 0 }}
+						viewport={{ once: true }}
+						transition={{ duration: 0.5, delay: 0.15 }}
+						className='mt-8 space-y-4'
+					>
+						{points.map((point) => (
+							<li key={point} className='flex items-start gap-3 text-sm leading-relaxed text-ink-soft'>
+								<span className='mt-0.5 flex h-5 w-5 flex-none items-center justify-center rounded-full border border-pine/30'>
+									<Check className='h-3 w-3 text-pine' />
+								</span>
+								{point}
+							</li>
+						))}
+					</motion.ul>
+					<motion.div
+						initial={{ opacity: 0, y: 20 }}
+						whileInView={{ opacity: 1, y: 0 }}
+						viewport={{ once: true }}
+						transition={{ duration: 0.5, delay: 0.2 }}
+						className='mt-10 flex flex-col gap-3 sm:flex-row'
+					>
+						<a
+							href='/talk-to-an-engineer'
+							className='inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-ink px-4 py-2 text-sm font-medium text-cream transition-colors hover:bg-ink/85'
+						>
+							Talk to an engineer
+							<ArrowRight className='h-4 w-4' />
+						</a>
+						<a
+							href='/enterprise'
+							className='inline-flex items-center justify-center whitespace-nowrap rounded-md border border-ink/20 px-4 py-2 text-sm text-ink-soft transition-colors hover:border-ink/40 hover:text-ink'
+						>
+							Rivet for Enterprise
+						</a>
+					</motion.div>
+				</div>
+				<motion.div
+					initial={{ opacity: 0, y: 20 }}
+					whileInView={{ opacity: 1, y: 0 }}
+					viewport={{ once: true }}
+					transition={{ duration: 0.5, delay: 0.15 }}
+				>
+					<PerimeterDiagram />
+				</motion.div>
+			</div>
+		</div>
+	</section>
 );
diff --git a/website/src/components/marketing/sections/PlatformSection.tsx b/website/src/components/marketing/sections/PlatformSection.tsx
deleted file mode 100644
index 5f7fc0c5fa..0000000000
--- a/website/src/components/marketing/sections/PlatformSection.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { PlatformIcons } from '../components/PlatformIcons';
-
-export function PlatformSection() {
-  return (
-    <section className='w-full'>
-      <PlatformIcons />
-    </section>
-  );
-}
diff --git a/website/src/components/marketing/sections/ProblemSection.tsx b/website/src/components/marketing/sections/ProblemSection.tsx
index bb7690f6f8..1dacd61620 100644
--- a/website/src/components/marketing/sections/ProblemSection.tsx
+++ b/website/src/components/marketing/sections/ProblemSection.tsx
@@ -4,6 +4,8 @@ import { useState, useEffect, useRef } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Database, Cpu, Workflow, Clock, Wifi, Zap, Bot, Users, Timer, Boxes, Radio, MessageSquare, ArrowRight } from 'lucide-react';
 import { codeToHtml } from 'shiki';
+import { SECTION_H2_CLASS, SUBTITLE_CLASS } from '../typography';
+import heroTheme from '@/lib/agent-os-hero-code-theme';
 
 const RivetIcon = ({ className }: { className?: string }) => (
   <svg width="16" height="16" viewBox="0 0 176 173" className={className}>
@@ -52,7 +54,7 @@ const useHighlightedCode = (code: string) => {
 
     codeToHtml(code, {
       lang: 'typescript',
-      theme: 'ayu-dark',
+      theme: heroTheme,
     }).then((result) => {
       cache.current[code] = result;
       setHtml(result);
@@ -267,11 +269,11 @@ const HighlightedCode = ({ code, title }: { code: string; title: string }) => {
 
   return (
     <div>
-      <div className='px-4 py-2 border-b border-white/[0.12] text-xs text-zinc-500 font-mono'>
+      <div className='px-4 py-2 border-b border-zinc-200 text-xs text-zinc-500 font-mono'>
         {title}
       </div>
       {!html ? (
-        <pre className='p-4 font-mono text-xs md:text-sm leading-6 text-zinc-400 overflow-x-auto'>
+        <pre className='p-4 font-mono text-xs md:text-sm leading-6 text-zinc-600 overflow-x-auto'>
           <code>{code}</code>
         </pre>
       ) : (
@@ -284,54 +286,50 @@ const HighlightedCode = ({ code, title }: { code: string; title: string }) => {
   );
 };
 
-const UseCaseContent = ({ config }: { config: UseCaseConfig }) => {
-  return (
-    <div className='grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-10 items-start'>
-      {/* Left: Stacked code snippets */}
-      <div className='order-2 lg:order-1 flex flex-col gap-3'>
-        <div className='rounded-lg border border-white/[0.12] bg-white/[0.03] overflow-hidden'>
-          <HighlightedCode code={config.serverCode} title='backend.ts' />
-        </div>
-        <div className='rounded-lg border border-white/[0.12] bg-white/[0.03] overflow-hidden'>
-          <HighlightedCode code={config.clientCode} title='client.ts' />
-        </div>
-      </div>
+// Stacked code snippets that live inside the section's ink plate.
+const UseCaseCode = ({ config }: { config: UseCaseConfig }) => (
+  <div>
+    <HighlightedCode code={config.serverCode} title='backend.ts' />
+    <div className='border-t border-zinc-200'>
+      <HighlightedCode code={config.clientCode} title='client.ts' />
+    </div>
+  </div>
+);
 
-      {/* Right: Description + features */}
-      <div className='order-1 lg:order-2 flex flex-col gap-6'>
-        <div className='flex items-center gap-3'>
-          <RivetIcon className='text-zinc-500' />
-          <div className='flex items-center gap-2'>
-            <span className='text-sm font-medium uppercase tracking-wider text-white'>Rivet Actor</span>
-            <span className='text-sm font-medium uppercase tracking-wider text-zinc-500'>/ {config.title}</span>
-          </div>
-        </div>
+// The porcelain caption column that sits beside the ink plate.
+const UseCaseDetails = ({ config }: { config: UseCaseConfig }) => (
+  <div className='flex flex-col gap-6'>
+    <div className='flex items-center gap-3'>
+      <RivetIcon className='text-olive' />
+      <div className='flex items-center gap-2'>
+        <span className='text-sm font-medium uppercase tracking-wider text-ink'>Rivet Actor</span>
+        <span className='text-sm font-medium uppercase tracking-wider text-ink-faint'>/ {config.title}</span>
+      </div>
+    </div>
 
-        <p className='text-sm leading-relaxed text-zinc-400'>
-          {config.description}
-        </p>
+    <p className='text-sm leading-relaxed text-ink-soft'>
+      {config.description}
+    </p>
 
-        <div className='flex flex-col gap-3'>
-          {config.features.map((feature, idx) => {
-            const Icon = feature.icon;
-            return (
-              <a
-                key={idx}
-                href={feature.href}
-                className='group w-fit flex items-center gap-3 text-zinc-300 transition-colors duration-200 hover:text-[#FF4500]'
-              >
-                <Icon className='h-4 w-4 flex-shrink-0 text-zinc-500 transition-colors duration-200 group-hover:text-[#FF4500]' />
-                <span className='text-sm'>{feature.label}</span>
-                <span className='text-sm text-zinc-600 transition-colors duration-200 group-hover:text-[#FF4500]/80'>({feature.detail})</span>
-                <ArrowRight className='h-3.5 w-3.5 text-[#FF4500] opacity-0 -translate-x-1 transition-all duration-200 group-hover:opacity-100 group-hover:translate-x-0' />
-              </a>
-            );
-          })}
-        </div>
-      </div>
+    <div className='flex flex-col gap-3'>
+      {config.features.map((feature, idx) => {
+        const Icon = feature.icon;
+        return (
+          <a
+            key={idx}
+            href={feature.href}
+            className='group w-fit flex items-center gap-3 text-ink-soft transition-colors duration-200 hover:text-pine'
+          >
+            <Icon className='h-4 w-4 flex-shrink-0 text-ink-faint transition-colors duration-200 group-hover:text-pine' />
+            <span className='text-sm'>{feature.label}</span>
+            <span className='text-sm text-ink-faint transition-colors duration-200 group-hover:text-pine/80'>({feature.detail})</span>
+            <ArrowRight className='h-3.5 w-3.5 text-pine opacity-0 -translate-x-1 transition-all duration-200 group-hover:opacity-100 group-hover:translate-x-0' />
+          </a>
+        );
+      })}
     </div>
-  );
-};
+  </div>
+);
 
 export const ProblemSection = () => {
   const [activeUseCase, setActiveUseCase] = useState<UseCaseKey>('AI Agent');
@@ -361,7 +359,7 @@ export const ProblemSection = () => {
   }, []);
 
   return (
-    <section id='problem' className='relative border-b border-white/10 px-4 lg:px-6 py-20 lg:py-32'>
+    <section id='problem' className='relative px-4 lg:px-6 py-16 md:py-32'>
       <div className='mx-auto w-full max-w-7xl'>
         <motion.div
           initial={{ opacity: 0, y: 20 }}
@@ -370,77 +368,90 @@ export const ProblemSection = () => {
           transition={{ duration: 0.5 }}
           className='mb-12'
         >
-          <h2 className='mb-2 text-2xl font-normal tracking-tight text-white md:text-4xl'>
+          <h2 className={SECTION_H2_CLASS}>
             Actors in action.
           </h2>
-          <p className='text-base leading-relaxed text-zinc-500'>
+          <p className={SUBTITLE_CLASS}>
             One primitive that adapts to agents, workflows, collaboration, and more.
           </p>
         </motion.div>
 
-        {/* Segmented control */}
+        {/* Editorial split: the ink plate carries the tabs and code; the
+            porcelain caption column carries the description and features. */}
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
           transition={{ duration: 0.5, delay: 0.05 }}
-          className='mb-10'
+          className='grid grid-cols-1 items-start gap-10 lg:grid-cols-[minmax(0,1.55fr)_minmax(0,1fr)] lg:gap-14'
         >
-          <div className='relative'>
-            <div
-              ref={tabsScrollRef}
-              className='flex w-full overflow-x-auto scrollbar-hide rounded-lg border border-white/[0.12] bg-white/[0.03] p-1 cursor-pointer'
-            >
-              {useCaseOrder.map((useCase, idx) => {
-                const Icon = useCaseIcons[useCase];
-                return (
-                  <div key={useCase} className='flex flex-none items-center sm:flex-1 sm:min-w-0'>
-                    {idx > 0 && (
-                      <div className='w-px self-stretch my-1.5 mx-1 bg-white/[0.12] flex-shrink-0' />
-                    )}
+          <div className='order-2 overflow-hidden rounded-xl border border-zinc-200 bg-zinc-50 lg:order-1'>
+            {/* File-tab strip */}
+            <div className='relative'>
+              <div
+                ref={tabsScrollRef}
+                className='flex w-full overflow-x-auto scrollbar-hide border-b border-zinc-200'
+              >
+                {useCaseOrder.map((useCase) => {
+                  const Icon = useCaseIcons[useCase];
+                  const active = activeUseCase === useCase;
+                  return (
                     <button
+                      key={useCase}
                       type="button"
                       onClick={() => setActiveUseCase(useCase)}
-                      className={`whitespace-nowrap rounded-md px-4 py-2.5 text-xs md:text-sm transition-all flex items-center justify-center gap-2 flex-none sm:flex-1 ${
-                        activeUseCase === useCase
-                          ? 'bg-[#FF4500]/15 text-[#FF4500] border border-[#FF4500]/20'
-                          : 'text-zinc-500 hover:text-zinc-300 border border-transparent'
+                      className={`-mb-px flex flex-none items-center justify-center gap-2 whitespace-nowrap border-b-2 px-4 py-3 font-mono text-xs transition-colors sm:flex-1 ${
+                        active
+                          ? 'border-pine text-ink'
+                          : 'border-transparent text-ink-soft hover:text-ink'
                       }`}
                     >
                       {Icon && <Icon className='h-3.5 w-3.5' />}
                       {useCaseTabLabels[useCase]}
                     </button>
-                  </div>
-                );
-              })}
-            </div>
-            <div
-              className={`pointer-events-none absolute right-0 top-0 bottom-0 flex items-center pr-2 transition-opacity duration-200 ${
-                showScrollHint ? 'opacity-100' : 'opacity-0'
-              }`}
-            >
-              <div className='absolute inset-y-1 right-0 w-14 rounded-r-lg bg-gradient-to-l from-black/45 to-transparent' />
-              <span className='relative inline-flex h-6 w-6 items-center justify-center rounded-full border border-white/15 bg-black/50'>
-                <ArrowRight className='h-3.5 w-3.5 text-zinc-300' />
-              </span>
+                  );
+                })}
+              </div>
+              <div
+                className={`pointer-events-none absolute right-0 top-0 bottom-0 flex items-center pr-2 transition-opacity duration-200 ${
+                  showScrollHint ? 'opacity-100' : 'opacity-0'
+                }`}
+              >
+                <div className='absolute inset-y-0 right-0 w-14 bg-gradient-to-l from-zinc-50 to-transparent' />
+                <span className='relative inline-flex h-6 w-6 items-center justify-center rounded-full border border-zinc-200 bg-zinc-50'>
+                  <ArrowRight className='h-3.5 w-3.5 text-ink-soft' />
+                </span>
+              </div>
             </div>
+
+            <AnimatePresence mode='wait'>
+              <motion.div
+                key={activeUseCase}
+                initial={{ opacity: 0, y: 8 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -8 }}
+                transition={{ duration: 0.2 }}
+              >
+                <UseCaseCode config={config} />
+              </motion.div>
+            </AnimatePresence>
           </div>
-        </motion.div>
 
-        <div>
-          <AnimatePresence mode='wait'>
-            <motion.div
-              key={activeUseCase}
-              initial={{ opacity: 0, y: 8 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: -8 }}
-              transition={{ duration: 0.2 }}
-            >
-              <UseCaseContent config={config} />
-            </motion.div>
-          </AnimatePresence>
-        </div>
+          <div className='order-1 lg:order-2'>
+            <AnimatePresence mode='wait'>
+              <motion.div
+                key={activeUseCase}
+                initial={{ opacity: 0, y: 8 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -8 }}
+                transition={{ duration: 0.2 }}
+              >
+                <UseCaseDetails config={config} />
+              </motion.div>
+            </AnimatePresence>
+          </div>
+        </motion.div>
       </div>
     </section>
   );
-};
\ No newline at end of file
+};
diff --git a/website/src/components/marketing/sections/ProductSplitSection.tsx b/website/src/components/marketing/sections/ProductSplitSection.tsx
index 3c951a74fc..7757c64f8f 100644
--- a/website/src/components/marketing/sections/ProductSplitSection.tsx
+++ b/website/src/components/marketing/sections/ProductSplitSection.tsx
@@ -2,6 +2,7 @@
 
 import { Database, Globe, Infinity, Layers, Wifi, GitBranch, ListOrdered, Clock, Shield, FolderOpen, Code, ArrowRight } from 'lucide-react';
 import { motion } from 'framer-motion';
+import { SECTION_H2_CLASS, SUBTITLE_CLASS } from '../typography';
 import agentosLogoUrl from '@/images/products/agentos-logo.svg';
 
 const actorFeatures = [
@@ -17,8 +18,8 @@ const actorFeatures = [
 	},
 	{
 		icon: Layers,
-		title: 'Scales infinitely, scales to zero',
-		description: 'Supports bursty workloads and is cost-efficient.',
+		title: 'Scales to zero, bursts to thousands',
+		description: 'Sleeps at near-zero cost when idle, fans out when traffic spikes.',
 	},
 	{
 		icon: Globe,
@@ -45,8 +46,8 @@ const agentOSFeatures = [
 	},
 	{
 		icon: Layers,
-		title: '32x cheaper than sandboxes',
-		description: 'V8 isolates + WASM instead of full VMs.',
+		title: 'An order of magnitude cheaper',
+		description: 'V8 isolates + Wasm instead of full VM sandboxes.',
 	},
 	{
 		icon: Code,
@@ -120,27 +121,27 @@ const ProductCard = ({ icon, title, tagline, docsHref, detailsHref, features, de
 		whileInView={{ opacity: 1, y: 0 }}
 		viewport={{ once: true }}
 		transition={{ duration: 0.5, delay }}
-		className='flex flex-col rounded-xl border border-white/10 bg-white/[0.03] p-6 md:p-8'
+		className='flex flex-col border border-ink/10 bg-white/55 p-6 md:p-8'
 	>
 		<div className='mb-4 flex items-center gap-3'>
 			{icon}
-			<h3 className='text-xl font-normal text-white'>{title}</h3>
+			<h3 className='text-xl font-medium text-ink'>{title}</h3>
 		</div>
 
-		<p className='mb-6 text-sm leading-relaxed text-zinc-400'>
+		<p className='mb-6 text-sm leading-relaxed text-ink-soft'>
 			{tagline}
 		</p>
 
 		<div className='mb-8 flex flex-wrap gap-3'>
 			<a
 				href={docsHref}
-				className='inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-white px-4 py-2 text-sm font-medium text-black transition-colors hover:bg-zinc-200'
+				className='inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-ink px-4 py-2 text-sm font-medium text-cream transition-colors hover:bg-ink/85'
 			>
 				Documentation
 			</a>
 			<a
 				href={detailsHref}
-				className='inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border border-white/10 px-4 py-2 text-sm text-zinc-300 transition-colors hover:border-white/20 hover:text-white'
+				className='inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border border-ink/20 px-4 py-2 text-sm text-ink-soft transition-colors hover:border-ink/40 hover:text-ink'
 			>
 				Details
 				<ArrowRight className='h-3.5 w-3.5' />
@@ -153,10 +154,10 @@ const ProductCard = ({ icon, title, tagline, docsHref, detailsHref, features, de
 				return (
 					<div key={feature.title} className='flex flex-col gap-1.5'>
 						<div className='flex items-center gap-2'>
-							<Icon className='h-3.5 w-3.5 text-zinc-500' />
-							<span className='text-sm font-medium text-white'>{feature.title}</span>
+							<Icon className='h-3.5 w-3.5 text-olive' />
+							<span className='text-sm font-medium text-ink'>{feature.title}</span>
 						</div>
-						<p className='text-xs leading-relaxed text-zinc-500'>{feature.description}</p>
+						<p className='text-xs leading-relaxed text-ink-faint'>{feature.description}</p>
 					</div>
 				);
 			})}
@@ -165,11 +166,30 @@ const ProductCard = ({ icon, title, tagline, docsHref, detailsHref, features, de
 );
 
 export const ProductSplitSection = () => (
-	<section className='relative border-t border-white/10 px-6 py-16 lg:py-24'>
+	<section className='relative border-t border-ink/10 px-6 py-16 lg:py-24'>
 		<div className='mx-auto w-full max-w-7xl'>
+			<div className='mb-12 max-w-3xl'>
+				<motion.div
+					initial={{ opacity: 0, y: 20 }}
+					whileInView={{ opacity: 1, y: 0 }}
+					viewport={{ once: true }}
+					transition={{ duration: 0.5 }}
+				>
+					<h2 className={SECTION_H2_CLASS}>Two products, one platform.</h2>
+				</motion.div>
+				<motion.p
+					initial={{ opacity: 0, y: 20 }}
+					whileInView={{ opacity: 1, y: 0 }}
+					viewport={{ once: true }}
+					transition={{ duration: 0.5, delay: 0.05 }}
+					className={SUBTITLE_CLASS}
+				>
+					Rivet Actors give agents and realtime apps durable, stateful compute in your existing Node.js or Bun backend. agentOS gives agents a portable OS to run in. Use them alone or together.
+				</motion.p>
+			</div>
 			<div className='grid grid-cols-1 gap-6 lg:grid-cols-2'>
 				<ProductCard
-					icon={<RivetActorIcon className='text-white' />}
+					icon={<RivetActorIcon className='text-ink' />}
 					title='Actors'
 					tagline='The primitive for stateful workloads.'
 					docsHref='/docs'
@@ -178,9 +198,9 @@ export const ProductSplitSection = () => (
 					delay={0}
 				/>
 				<ProductCard
-					icon={<img src={agentosLogoUrl.src} alt='agentOS' className='h-6 w-6' />}
+					icon={<img src={agentosLogoUrl.src} alt='agentOS' className='h-6 w-6 invert' />}
 					title='agentOS'
-					tagline='A lightweight open-source operating system for any type of agent. Built on WASM & V8.'
+					tagline='A portable, lightweight in-process OS for agents. Open source, built on Wasm + V8.'
 					docsHref='/docs/agent-os'
 					detailsHref='/agent-os'
 					features={agentOSFeatures}
diff --git a/website/src/components/marketing/sections/QuotesSection.tsx b/website/src/components/marketing/sections/QuotesSection.tsx
deleted file mode 100644
index 896cbc66af..0000000000
--- a/website/src/components/marketing/sections/QuotesSection.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import { Icon, faArrowRight } from '@rivet-gg/icons';
-
-const chinomanAvatar = { src: "https://assets.rivet.dev/repo/website/src/components/marketing/images/quotes/users/Chinoman10_.jpg", width: 400, height: 400, format: "jpg" };
-const socialQuotientAvatar = { src: "https://assets.rivet.dev/repo/website/src/components/marketing/images/quotes/users/Social_Quotient.jpg", width: 400, height: 400, format: "jpg" };
-const alistaiirAvatar = { src: "https://assets.rivet.dev/repo/website/src/components/marketing/images/quotes/users/alistaiir.jpg", width: 400, height: 400, format: "jpg" };
-// User avatars
-const devgerredAvatar = { src: "https://assets.rivet.dev/repo/website/src/components/marketing/images/quotes/users/devgerred.jpg", width: 399, height: 399, format: "jpg" };
-const j0g1tAvatar = { src: "https://assets.rivet.dev/repo/website/src/components/marketing/images/quotes/users/j0g1t.jpg", width: 400, height: 400, format: "jpg" };
-const localFirstAvatar = { src: "https://assets.rivet.dev/repo/website/src/components/marketing/images/quotes/users/localfirstnews.jpg", width: 400, height: 400, format: "jpg" };
-const samgoodwinAvatar = { src: "https://assets.rivet.dev/repo/website/src/components/marketing/images/quotes/users/samgoodwin89.jpg", width: 400, height: 400, format: "jpg" };
-const samk0Avatar = { src: "https://assets.rivet.dev/repo/website/src/components/marketing/images/quotes/users/samk0_com.jpg", width: 400, height: 400, format: "jpg" };
-const uripontAvatar = { src: "https://assets.rivet.dev/repo/website/src/components/marketing/images/quotes/users/uripont_.jpg", width: 400, height: 400, format: "jpg" };
-const j0g1tPostImage = { src: "https://assets.rivet.dev/repo/website/src/components/marketing/images/quotes/posts/1902835527977439591.jpg", width: 640, height: 360, format: "jpg" };
-// Post images
-const samk0PostImage = { src: "https://assets.rivet.dev/repo/website/src/components/marketing/images/quotes/posts/1909278348812952007.png", width: 3750, height: 2296, format: "png" };
-export function QuotesSection() {
-  const quotesColumn1 = [
-    {
-      href: 'https://x.com/devgerred/status/1903178025598083285',
-      avatar: devgerredAvatar,
-      name: 'gerred',
-      handle: '@devgerred',
-      content: 'Nice work, @rivet_dev - nailed it'
-    },
-    {
-      href: 'https://x.com/samk0_com/status/1909278348812952007',
-      avatar: samk0Avatar,
-      name: 'Samo',
-      handle: '@samk0_com',
-      content: 'Great UX & DX possible thanks to @RivetKit_org',
-      image: samk0PostImage
-    },
-    {
-      href: 'https://x.com/Social_Quotient/status/1903172142121832905',
-      avatar: socialQuotientAvatar,
-      name: 'John Curtis',
-      handle: '@Social_Quotient',
-      content: 'Loving RivetKit direction!'
-    },
-    {
-      href: 'https://x.com/localfirstnews/status/1902752173928427542',
-      avatar: localFirstAvatar,
-      name: 'Local-First Newsletter',
-      handle: '@localfirstnews',
-      content: 'Featured in newsletter',
-      isItalic: true
-    },
-    {
-      href: 'https://x.com/Chinoman10_/status/1902020312306216984',
-      avatar: chinomanAvatar,
-      name: 'Chinomso',
-      handle: '@Chinoman10_',
-      content:
-        "Alternatively, some dude (@NathanFlurry) recently told me about @RivetKit_org, which optionally brings you vendor-flexibility (no lock-in since it's abstracted for you)."
-    }
-  ];
-
-  const quotesColumn2 = [
-    {
-      href: 'https://x.com/uripont_/status/1910817946470916525',
-      avatar: uripontAvatar,
-      name: 'uripont',
-      handle: '@uripont_',
-      content:
-        'Crazy to think that there are so many things to highlight that is actually hard to convey it in a few words.'
-    },
-    {
-      href: 'https://x.com/samgoodwin89/status/1910791029609091456',
-      avatar: samgoodwinAvatar,
-      name: 'sam',
-      handle: '@samgoodwin89',
-      content: '"Durable Objects without the boilerplate"'
-    },
-    {
-      href: 'https://x.com/j0g1t/status/1902835527977439591',
-      avatar: j0g1tAvatar,
-      name: 'Kacper Wojciechowski',
-      handle: '@j0g1t',
-      content: 'Your outie uses @RivetKit_org to develop realtime applications.',
-      image: j0g1tPostImage
-    },
-    {
-      href: 'https://x.com/alistaiir/status/1891312940302716984',
-      avatar: alistaiirAvatar,
-      name: 'alistair',
-      handle: '@alistaiir',
-      content: 'RivetKit looks super awesome.'
-    }
-  ];
-
-  const QuoteCard = ({ quote }: { quote: any }) => (
-    <a href={quote.href}
-      className='bg-white/2 group block rounded-xl border border-white/20 p-6 transition-all duration-200 hover:border-white/40 hover:bg-white/10'
-      target='_blank'
-      rel='noopener noreferrer'
-    >
-      <div className='mb-4 flex items-start gap-3'>
-        <img src={quote.avatar}
-          alt={quote.name}
-          width={40}
-          height={40}
-          className='rounded-full object-cover'
-        />
-        <div className='min-w-0 flex-1'>
-          <p className='text-sm font-medium text-white'>{quote.name}</p>
-          <p className='text-sm text-white/40'>{quote.handle}</p>
-        </div>
-      </div>
-      <p className={`font-500 mb-4 leading-relaxed text-white/40 ${quote.isItalic ? 'italic' : ''}`}>
-        {quote.content}
-      </p>
-      {quote.image && (
-        <img src={quote.image}
-          alt='Tweet media'
-          width={300}
-          height={200}
-          className='w-full rounded-lg object-cover'
-        />
-      )}
-    </a>
-  );
-
-  return (
-    <div className='mx-auto max-w-6xl'>
-      <div className='mb-16 text-center'>
-        <h2 className='font-700 mb-6 text-2xl text-white sm:text-3xl'>What People Are Saying</h2>
-        <p className='font-500 text-lg text-white/40'>From the platform formerly known as Twitter</p>
-      </div>
-
-      <div className='mb-16 grid grid-cols-1 gap-6 lg:grid-cols-2'>
-        {/* Column 1 */}
-        <div className='space-y-6'>
-          {quotesColumn1.map((quote, index) => (
-            <QuoteCard key={index} quote={quote} />
-          ))}
-        </div>
-
-        {/* Column 2 */}
-        <div className='space-y-6'>
-          {quotesColumn2.map((quote, index) => (
-            <QuoteCard key={index} quote={quote} />
-          ))}
-        </div>
-      </div>
-
-      {/* Tweet Button */}
-      <div className='text-center'>
-        <a href='https://twitter.com/intent/tweet?text=%40RivetKit_org%20'
-          className='bg-white/2 inline-flex items-center gap-2 rounded-lg border border-white/20 px-4 py-2 font-medium text-white transition-all duration-200 hover:border-white/40 hover:bg-white/10'
-          target='_blank'
-          rel='noopener noreferrer'
-        >
-          Share your feedback on X
-          <Icon icon={faArrowRight} className='h-4 w-4' />
-        </a>
-      </div>
-    </div>
-  );
-}
diff --git a/website/src/components/marketing/sections/RedesignedCTA.tsx b/website/src/components/marketing/sections/RedesignedCTA.tsx
index 384226dd1f..ce993b2be3 100644
--- a/website/src/components/marketing/sections/RedesignedCTA.tsx
+++ b/website/src/components/marketing/sections/RedesignedCTA.tsx
@@ -3,41 +3,55 @@
 import { motion } from 'framer-motion';
 import { AnimatedCTATitle } from '../components/AnimatedCTATitle';
 
+const FOOTER_PAINTING_SRC =
+  'https://assets.rivet.dev/website/images/textures/footer-abstract.webp';
+
 export const RedesignedCTA = () => (
-  <section className='border-t border-white/10 px-6 py-16 md:py-48 text-center'>
-    <div className='mx-auto max-w-3xl'>
-      <div className='mb-6'>
-        <AnimatedCTATitle />
-      </div>
-      <motion.p
-        initial={{ opacity: 0, y: 20 }}
-        whileInView={{ opacity: 1, y: 0 }}
-        viewport={{ once: true }}
-        transition={{ duration: 0.5, delay: 0.1 }}
-        className='mb-8 text-base leading-relaxed text-zinc-500'
-      >
-        Build with agents, build for agents, and run it where your data lives.
-      </motion.p>
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        whileInView={{ opacity: 1, y: 0 }}
-        viewport={{ once: true }}
-        transition={{ duration: 0.5, delay: 0.2 }}
-        className='flex flex-col items-center justify-center gap-3 sm:flex-row'
-      >
-        <a
-          href='/docs/actors'
-          className='inline-flex items-center justify-center whitespace-nowrap rounded-md bg-white px-4 py-2 text-sm font-medium text-black transition-colors hover:bg-zinc-200'
+  <section className='selection-paper bg-paper px-4 py-14 text-center text-cream md:px-6 md:py-24'>
+    <div className='relative mx-auto flex min-h-[26rem] max-w-screen-2xl items-center justify-center overflow-hidden px-6 py-20 md:min-h-[34rem] md:px-10 lg:aspect-[2563/1440] lg:min-h-0'>
+      <img
+        aria-hidden='true'
+        src={FOOTER_PAINTING_SRC}
+        alt=''
+        loading='eager'
+        decoding='async'
+        className='absolute inset-0 h-full w-full object-cover object-center lg:object-contain'
+      />
+
+      <div className='relative z-[1] mx-auto max-w-3xl'>
+        <div className='mb-6'>
+          <AnimatedCTATitle />
+        </div>
+        <motion.p
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.5, delay: 0.1 }}
+          className='mb-9 text-base leading-relaxed text-cream/65'
         >
-          Start Building
-        </a>
-        <a
-          href='/talk-to-an-engineer'
-          className='inline-flex items-center justify-center whitespace-nowrap rounded-md border border-white/10 px-4 py-2 text-sm text-zinc-300 transition-colors hover:border-white/20 hover:text-white'
+          Build with agents, build for agents, and run it where your data lives.
+        </motion.p>
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.5, delay: 0.2 }}
+          className='flex flex-col items-center justify-center gap-3 sm:flex-row'
         >
-          Talk to an Engineer
-        </a>
-      </motion.div>
+          <a
+            href='/docs/actors'
+            className='inline-flex w-full items-center justify-center whitespace-nowrap rounded-md sm:w-auto bg-white px-4 py-2 text-sm font-medium text-ink transition-colors hover:bg-white/90'
+          >
+            Start Building
+          </a>
+          <a
+            href='/talk-to-an-engineer'
+            className='inline-flex w-full items-center justify-center whitespace-nowrap rounded-md sm:w-auto border border-cream/25 bg-cream/10 px-4 py-2 text-sm text-cream backdrop-blur-md backdrop-saturate-[1.3] transition-colors hover:border-cream/45 hover:bg-cream/20'
+          >
+            Talk to an Engineer
+          </a>
+        </motion.div>
+      </div>
     </div>
   </section>
 );
diff --git a/website/src/components/marketing/sections/RedesignedHero.tsx b/website/src/components/marketing/sections/RedesignedHero.tsx
index 3d3838b03e..82b2cd7889 100644
--- a/website/src/components/marketing/sections/RedesignedHero.tsx
+++ b/website/src/components/marketing/sections/RedesignedHero.tsx
@@ -1,8 +1,9 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState, type MouseEvent } from 'react';
 import { Terminal, ArrowRight, Check } from 'lucide-react';
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence, motion, useScroll, useTransform } from 'framer-motion';
+import { HERO_H1_CLASS } from '../typography';
 
 interface ThinkingImage {
   src: string;
@@ -41,7 +42,7 @@ const ThinkingImageCycler = ({ images }: { images: ThinkingImage[] }) => {
   };
 
   const getStackIndices = (count: number) => {
-    const indices = [];
+    const indices: number[] = [];
     for (let i = 0; i < count; i++) {
       indices.push((currentIndex + i) % images.length);
     }
@@ -56,9 +57,9 @@ const ThinkingImageCycler = ({ images }: { images: ThinkingImage[] }) => {
     ];
 
     const expandedOffsets = [
-      { x: -6, y: 0, rotate: -0.8 },
-      { x: 8, y: -4, rotate: 1.1 },
-      { x: 16, y: -8, rotate: 1.7 },
+      { x: -8, y: 0, rotate: -0.9 },
+      { x: 10, y: -5, rotate: 1.3 },
+      { x: 20, y: -10, rotate: 2 },
     ];
 
     const idx = Math.min(position, basePoses.length - 1);
@@ -92,8 +93,9 @@ const ThinkingImageCycler = ({ images }: { images: ThinkingImage[] }) => {
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
+      {/* Soft ground beneath the stack when fanned */}
       <div
-        className={`pointer-events-none absolute -inset-3 rounded-xl bg-black/70 blur-2xl transition-all duration-300 ease-out ${
+        className={`pointer-events-none absolute -inset-3 rounded-xl bg-ink/5 blur-xl transition-all duration-300 ease-out ${
           showFan ? 'opacity-100 scale-105' : 'opacity-0 scale-100'
         }`}
         style={{ zIndex: 0 }}
@@ -107,13 +109,8 @@ const ThinkingImageCycler = ({ images }: { images: ThinkingImage[] }) => {
         return (
           <motion.div
             key={image.src}
-            className={`absolute inset-0 rounded-lg overflow-hidden border ${
-              showFan ? 'border-white/20' : 'border-white/0'
-            } ${isTopCard ? 'shadow-2xl' : 'shadow-xl'}`}
-            style={{
-              zIndex: 20 - stackPosition,
-              boxShadow: isTopCard && showFan ? '0 28px 70px rgba(0, 0, 0, 0.65)' : undefined,
-            }}
+            className="absolute inset-0 overflow-hidden border border-ink/10"
+            style={{ zIndex: 20 - stackPosition, boxShadow: '0 10px 28px -12px rgba(27, 25, 22, 0.16)' }}
             initial={false}
             animate={{ ...pose, opacity: isTopCard || showFan ? 1 : 0 }}
             transition={{ duration: 0.28, ease: [0.22, 1, 0.36, 1] }}
@@ -123,9 +120,8 @@ const ThinkingImageCycler = ({ images }: { images: ThinkingImage[] }) => {
               alt={`${image.title} by ${image.artist}`}
               loading={isTopCard && currentIndex === 0 ? 'eager' : 'lazy'}
               decoding="async"
-              className="w-full h-full object-cover select-none pointer-events-none"
+              className="h-full w-full select-none object-cover pointer-events-none"
             />
-            {isTopCard ? <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" /> : null}
           </motion.div>
         );
       })}
@@ -137,10 +133,8 @@ const ThinkingImageCycler = ({ images }: { images: ThinkingImage[] }) => {
           return (
             <motion.div
               key={card.id}
-              className={`pointer-events-none absolute inset-0 rounded-lg overflow-hidden border ${
-                showFan ? 'border-white/20' : 'border-white/0'
-              } shadow-2xl`}
-              style={{ zIndex: 30 }}
+              className="pointer-events-none absolute inset-0 overflow-hidden border border-ink/10"
+              style={{ zIndex: 30, boxShadow: '0 10px 28px -12px rgba(27, 25, 22, 0.16)' }}
               initial={{ ...topPose, opacity: 1 }}
               animate={{ x: topPose.x - 36, y: topPose.y - 2, rotate: topPose.rotate - 7, scale: 0.985, opacity: 0 }}
               transition={{ duration: 0.28, ease: [0.22, 1, 0.36, 1] }}
@@ -153,24 +147,33 @@ const ThinkingImageCycler = ({ images }: { images: ThinkingImage[] }) => {
                 alt={`${card.image.title} by ${card.image.artist}`}
                 loading="lazy"
                 decoding="async"
-                className="w-full h-full object-cover select-none pointer-events-none"
+                className="h-full w-full select-none object-cover pointer-events-none"
               />
-              <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
             </motion.div>
           );
         })}
       </AnimatePresence>
 
       <div
-        className={`pointer-events-none absolute left-0 right-0 top-full mt-3 text-center transition-all duration-200 ${
+        className={`pointer-events-none absolute left-0 right-0 top-full mt-5 text-center transition-all duration-200 ${
           showFan ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-1'
         }`}
         style={{ zIndex: 20 }}
       >
-        <p className='text-sm font-medium text-white'>{currentImage.title}</p>
-        <p className='text-xs text-zinc-400'>
-          {currentImage.artist} · {currentImage.date}
-        </p>
+        <AnimatePresence mode="wait" initial={false}>
+          <motion.div
+            key={currentImage.src}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+          >
+            <p className="text-sm font-medium leading-tight text-ink">{currentImage.title}</p>
+            <p className="mt-1 text-xs leading-tight text-ink-faint">
+              {currentImage.artist} · {currentImage.date}
+            </p>
+          </motion.div>
+        </AnimatePresence>
       </div>
     </div>
   );
@@ -193,76 +196,74 @@ const CopyInstallButton = () => {
     <div className='relative group w-full sm:w-auto'>
       <button
         onClick={handleCopy}
-        className='w-full sm:w-auto inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border border-white/20 px-4 py-2 text-sm text-zinc-300 transition-colors hover:border-white/30 hover:text-white'
+        className='w-full sm:w-auto inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border border-ink/20 px-4 py-2 font-mono text-[13px] text-ink-soft transition-colors hover:border-ink/40 hover:text-ink'
       >
-        {copied ? <Check className='h-4 w-4 text-green-500' /> : <Terminal className='h-4 w-4' />}
+        {copied ? <Check className='h-4 w-4 text-pine' /> : <Terminal className='h-4 w-4' />}
         npx skills add rivet-dev/skills
       </button>
-      <div className='absolute left-1/2 -translate-x-1/2 top-full mt-4 opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-200 ease-out text-xs text-zinc-500 whitespace-nowrap pointer-events-none font-mono'>
+      <div className='absolute left-1/2 -translate-x-1/2 top-full mt-4 opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-200 ease-out text-xs text-ink-faint whitespace-nowrap pointer-events-none font-mono'>
         Give this to your coding agent
       </div>
     </div>
   );
 };
 
-const RivetActorIcon = ({ className }: { className?: string }) => (
-  <svg width="32" height="32" viewBox="0 0 176 173" className={className}>
-    <g transform="translate(-32928.8,-28118.2)">
-      <g transform="matrix(0.941176,0,0,0.925134,2119.4,2323.67)">
-        <g clipPath="url(#_clip1)">
-          <g transform="matrix(1.0625,0,0,1.08092,32936.6,27881.1)">
-            <path d="M164.529,52.792L164.529,120.844C164.529,145.347 144.635,165.241 120.132,165.241L52.08,165.241C27.577,165.241 7.683,145.347 7.683,120.844L7.683,52.792C7.683,28.289 27.577,8.395 52.08,8.395L120.132,8.395C144.635,8.395 164.529,28.289 164.529,52.792Z" style={{ fill: 'none', stroke: 'white', strokeWidth: '15.18px' }} />
-          </g>
-          <g transform="matrix(1.0625,0,0,1.08092,32737,27881.7)">
-            <path d="M164.529,52.792L164.529,120.844C164.529,145.347 144.635,165.241 120.132,165.241L52.08,165.241C27.577,165.241 7.683,145.347 7.683,120.844L7.683,52.792C7.683,28.289 27.577,8.395 52.08,8.395L120.132,8.395C144.635,8.395 164.529,28.289 164.529,52.792Z" style={{ fill: 'none', stroke: 'white', strokeWidth: '15.18px' }} />
-          </g>
-        </g>
-      </g>
-    </g>
-    <g transform="translate(-32928.8,-28118.2)">
-      <g transform="matrix(0.941176,0,0,0.925134,2119.4,2323.67)">
-        <g clipPath="url(#_clip1)">
-          <g transform="matrix(1.0625,0,0,1.08092,-2251.86,-2261.21)">
-            <g transform="translate(32930.7,27886.2)">
-              <path d="M104.323,87.121C104.584,85.628 105.665,84.411 107.117,83.977C108.568,83.542 110.14,83.965 111.178,85.069C118.49,92.847 131.296,106.469 138.034,113.637C138.984,114.647 139.343,116.076 138.983,117.415C138.623,118.754 137.595,119.811 136.267,120.208C127.471,122.841 111.466,127.633 102.67,130.266C101.342,130.664 99.903,130.345 98.867,129.425C97.83,128.504 97.344,127.112 97.582,125.747C99.274,116.055 102.488,97.637 104.323,87.121Z" style={{ fill: 'white' }} />
-            </g>
-            <g transform="translate(32930.7,27886.2)">
-              <path d="M69.264,88.242L79.739,106.385C82.629,111.392 80.912,117.803 75.905,120.694L57.762,131.168C52.755,134.059 46.344,132.341 43.453,127.335L32.979,109.192C30.088,104.185 31.806,97.774 36.813,94.883L54.956,84.408C59.962,81.518 66.374,83.236 69.264,88.242Z" style={{ fill: 'white' }} />
-            </g>
-            <g transform="translate(32930.7,27886.2)">
-              <path d="M86.541,79.464C98.111,79.464 107.49,70.084 107.49,58.514C107.49,46.944 98.111,37.565 86.541,37.565C74.971,37.565 65.591,46.944 65.591,58.514C65.591,70.084 74.971,79.464 86.541,79.464Z" style={{ fill: 'white' }} />
-            </g>
-          </g>
-        </g>
-      </g>
-    </g>
-  </svg>
-);
-
 interface RedesignedHeroProps {
   latestChangelogTitle: string;
   thinkingImages: ThinkingImage[];
 }
 
 export const RedesignedHero = ({ latestChangelogTitle, thinkingImages }: RedesignedHeroProps) => {
+  const heroRef = useRef<HTMLElement>(null);
+  // Fade the hero out as it scrolls away. Anchored to the hero's own height
+  // (start..end against the top of the viewport) rather than a fixed viewport
+  // fraction, so it behaves on mobile where the stacked text + image make the
+  // hero taller than the screen. Opacity is the only transform, so it stays
+  // calm under prefers-reduced-motion.
+  const { scrollYProgress } = useScroll({
+    target: heroRef,
+    offset: ['start start', 'end start'],
+  });
+  const heroOpacity = useTransform(scrollYProgress, [0, 0.55], [1, 0]);
+
+  const handleChangelogPillMouseMove = (event: MouseEvent<HTMLAnchorElement>) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    event.currentTarget.style.setProperty('--pill-x', `${event.clientX - rect.left}px`);
+    event.currentTarget.style.setProperty('--pill-y', `${event.clientY - rect.top}px`);
+  };
+
   return (
-    <section className='relative flex min-h-[100svh] flex-col justify-center px-6 pt-32 pb-16 md:pt-40 md:pb-24'>
-      <div className='mx-auto w-full max-w-7xl'>
+    <motion.section
+      ref={heroRef}
+      style={{ opacity: heroOpacity }}
+      className='depth-wash relative flex min-h-[100svh] flex-col justify-center overflow-hidden px-6 pt-32 pb-16 will-change-[opacity] md:pt-40 md:pb-24'
+    >
+      <div className='relative mx-auto w-full max-w-7xl'>
         <div className='flex flex-col gap-12 lg:flex-row lg:items-center lg:justify-between lg:gap-32 xl:gap-48 2xl:gap-64'>
           <div className='max-w-xl'>
             <motion.div
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               transition={{ duration: 0.5, delay: 0.15 }}
-              className='mb-6'
+              className='mb-7'
             >
               <a
                 href='/changelog'
-                className='inline-flex items-center gap-2 rounded-full bg-black/60 backdrop-blur-md border border-white/10 px-3 py-1.5 text-xs text-zinc-300 transition-colors hover:border-white/20 hover:text-white'
+                className='changelog-pill-border group relative inline-flex rounded-full shadow-[0_8px_24px_-18px_rgba(27,25,22,0.45)] transition-opacity before:pointer-events-none before:absolute before:inset-0 before:rounded-full before:bg-[linear-gradient(120deg,rgba(27,25,22,0.08),rgba(27,25,22,0.26)_48%,rgba(255,255,255,0.88)_72%,rgba(27,25,22,0.1))] before:p-px before:[-webkit-mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] before:[-webkit-mask-composite:xor] before:[mask-composite:exclude] after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:p-px after:opacity-0 after:transition-opacity after:duration-150 after:[-webkit-mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] after:[-webkit-mask-composite:xor] after:[mask-composite:exclude] hover:opacity-95 hover:after:opacity-100'
+                onMouseMove={handleChangelogPillMouseMove}
               >
-                <span className='h-[4px] w-[4px] rounded-full bg-[#ff6030]' style={{ boxShadow: '0 0 2px #ffaa60, 0 0 4px #ff8040, 0 0 10px #ff6020, 0 0 20px rgba(255, 69, 0, 0.8)' }} />
-                {latestChangelogTitle}
-                <ArrowRight className='h-3 w-3' />
+                <span className='relative z-10 inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-medium text-ink'>
+                  <span
+                    aria-hidden='true'
+                    className='h-1 w-1 rounded-full bg-accent'
+                    style={{
+                      boxShadow:
+                        '0 0 2px rgba(203, 90, 51, 0.9), 0 0 6px rgba(203, 90, 51, 0.5), 0 0 14px rgba(171, 69, 31, 0.35)',
+                    }}
+                  />
+                  <span>{latestChangelogTitle}</span>
+                  <ArrowRight className='h-3 w-3 text-ink-soft transition-transform group-hover:translate-x-0.5' />
+                </span>
               </a>
             </motion.div>
 
@@ -270,19 +271,19 @@ export const RedesignedHero = ({ latestChangelogTitle, thinkingImages }: Redesig
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.5 }}
-              className='mb-4 text-4xl font-normal leading-[1.1] tracking-tight text-white md:text-6xl'
+              className={`mb-5 ${HERO_H1_CLASS}`}
             >
               Infrastructure for <br />
-              the agentic era.
+              software that thinks.
             </motion.h1>
 
             <motion.p
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.5, delay: 0.05 }}
-              className='mb-6 text-lg text-zinc-400 md:text-xl'
+              className='mb-8 max-w-xl text-lg leading-relaxed text-ink-soft'
             >
-              Actors are the primitive for AI agents, real-time apps,<br/>and durable workflows. They burst when traffic spikes,<br/>sleep when idle, run for hours, and hold state across regions.
+              Actors are the primitive for AI agents — and the realtime apps and workflows around them. They burst when traffic spikes, sleep when idle, and run anywhere: Rivet Cloud, your VPC, or fully air-gapped.
             </motion.p>
 
             <motion.div
@@ -292,7 +293,7 @@ export const RedesignedHero = ({ latestChangelogTitle, thinkingImages }: Redesig
               className='flex flex-col gap-3 sm:flex-row'
             >
               <a href='/docs'
-                className='selection-dark inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-white px-4 py-2 text-sm font-medium text-black transition-colors hover:bg-zinc-200'
+                className='inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-accent-deep px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent'
               >
                 Start Building
                 <ArrowRight className='h-4 w-4' />
@@ -305,14 +306,14 @@ export const RedesignedHero = ({ latestChangelogTitle, thinkingImages }: Redesig
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             transition={{ duration: 0.8, delay: 0.2 }}
-            className='flex-shrink-0 hidden lg:block'
+            className='relative flex-shrink-0 hidden lg:block'
           >
             <ThinkingImageCycler images={thinkingImages} />
           </motion.div>
         </div>
 
         {/* Mobile: Image */}
-        <div className='lg:hidden mt-12'>
+        <div className='lg:hidden mt-12 mb-10'>
           <motion.div
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
@@ -323,6 +324,6 @@ export const RedesignedHero = ({ latestChangelogTitle, thinkingImages }: Redesig
           </motion.div>
         </div>
       </div>
-    </section>
+    </motion.section>
   );
 };
diff --git a/website/src/components/marketing/sections/SocialProofSection.tsx b/website/src/components/marketing/sections/SocialProofSection.tsx
deleted file mode 100644
index 6d523e0ae7..0000000000
--- a/website/src/components/marketing/sections/SocialProofSection.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-export function SocialProofSection() {
-  return (
-    <section className='overflow-hidden py-16'>
-      <div className='animate-on-scroll animate-fade-up'>
-        <p className='text-center text-sm uppercase tracking-widest' style={{ color: '#A0A0A0' }}>
-          Works Where You Work
-        </p>
-        <div className='mt-8 inline-flex w-full flex-nowrap overflow-hidden [mask-image:_linear-gradient(to_right,transparent_0,_black_10%,_black_90%,transparent_100%)]'>
-          <div className='flex animate-infinite-scroll items-center justify-center md:justify-start [&_svg]:h-6 [&_svg]:w-auto'>
-            <span
-              className='mx-6 flex items-center gap-2 text-2xl font-medium'
-              style={{ color: 'rgba(160, 160, 160, 0.7)' }}
-            >
-              <svg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' className='fill-current'>
-                <title>Vercel</title>
-                <path d='M12 1.5l12 21H0L12 1.5z' />
-              </svg>{' '}
-              Vercel
-            </span>
-            <span
-              className='mx-6 flex items-center gap-2 text-2xl font-medium'
-              style={{ color: 'rgba(160, 160, 160, 0.7)' }}
-            >
-              <svg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' className='fill-current'>
-                <title>Railway</title>
-                <path d='M2.762 10.375L0 12l2.762 1.625.5 1.375H0v1.5h3.262l1-2.75V15h1.5v-1.25l1 2.75H12v-1.5H8.738l.5-1.375L12 12l-2.762-1.625-.5-1.375H12v-1.5H8.738l-1 2.75V9H6.238v1.25l-1-2.75H0v1.5h3.262l-.5 1.375zm18.476 0L18.476 12l2.762 1.625.5 1.375H18.476v1.5h3.262l1-2.75V15h1.5v-1.25l1 2.75H24v-1.5h-3.262l.5-1.375L24 12l-2.762-1.625-.5-1.375H24v-1.5h-3.262l-1 2.75V9h-1.5v1.25l-1-2.75H18.476v1.5h3.262l-.5 1.375z' />
-              </svg>{' '}
-              Railway
-            </span>
-            <span
-              className='mx-6 flex items-center gap-2 text-2xl font-medium'
-              style={{ color: 'rgba(160, 160, 160, 0.7)' }}
-            >
-              <svg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' className='fill-current'>
-                <title>Cloudflare</title>
-                <path d='M19.342 8.786c.182-.62.274-1.26.274-1.91 0-3.32-2.68-6.01-5.99-6.01-2.42 0-4.5.8-5.36 2.05-.62-.48-1.37-.77-2.19-.77-2.31 0-4.18 1.88-4.18 4.19 0 .46.07.9.2 1.32-.48.62-.77 1.36-.77 2.18 0 2.31 1.87 4.18 4.18 4.18.9 0 1.73-.28 2.42-.76.62.48 1.36.76 2.18.76 2.31 0 4.18-1.87 4.18-4.18 0-.9-.28-1.73-.76-2.42.5-.63.78-1.4.78-2.23M12 14.49c-2.31 0-4.18-1.88-4.18-4.19S9.69 6.11 12 6.11s4.18 1.88 4.18 4.19-1.87 4.19-4.18 4.19m6.89-2.05h.69v-.68h-.69v.68m-1.37 0h.68v-.68h-.68v.68m-1.36 0h.68v-.68h-.68v.68m-1.37 0h.68v-.68H13.8v.68m-1.37 0h.68v-.68h-.68v.68m-1.36 0h.68v-.68h-.68v.68m-1.37 0h.68v-.68h-.68v.68m-1.36 0h.68v-.68H7.32v.68M6.63 10.3h.69v.68h-.69v-.68m1.37 0h.68v.68h-.68v-.68m1.36 0h.68v.68h-.68v.68m1.37 0h.68v.68h-.68v.68m1.37 0h.68v.68h-.68v.68m1.36 0h.68v.68h-.68v.68m1.37 0h.68v.68h-.68v.68m1.36 0h.68v.68h-1.37v.68' />
-              </svg>{' '}
-              Cloudflare
-            </span>
-            <span
-              className='mx-6 flex items-center gap-2 text-2xl font-medium'
-              style={{ color: 'rgba(160, 160, 160, 0.7)' }}
-            >
-              <svg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' className='fill-current'>
-                <title>Hetzner</title>
-                <path d='M12.38 3.01H1.81V1.3h10.57v1.71zm-1.71 19.69h1.71v-8.07l6.63-9.9H17.4l-5.32 8.07h-1.7v9.9zm-8.86 0h1.71V9.9H1.81v12.8z' />
-              </svg>{' '}
-              Hetzner
-            </span>
-          </div>
-          <div
-            className='flex animate-infinite-scroll items-center justify-center md:justify-start [&_svg]:h-6 [&_svg]:w-auto'
-            aria-hidden='true'
-          >
-            <span
-              className='mx-6 flex items-center gap-2 text-2xl font-medium'
-              style={{ color: 'rgba(160, 160, 160, 0.7)' }}
-            >
-              <svg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' className='fill-current'>
-                <title>Vercel</title>
-                <path d='M12 1.5l12 21H0L12 1.5z' />
-              </svg>{' '}
-              Vercel
-            </span>
-            <span
-              className='mx-6 flex items-center gap-2 text-2xl font-medium'
-              style={{ color: 'rgba(160, 160, 160, 0.7)' }}
-            >
-              <svg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' className='fill-current'>
-                <title>Railway</title>
-                <path d='M2.762 10.375L0 12l2.762 1.625.5 1.375H0v1.5h3.262l1-2.75V15h1.5v-1.25l1 2.75H12v-1.5H8.738l.5-1.375L12 12l-2.762-1.625-.5-1.375H12v-1.5H8.738l-1 2.75V9H6.238v1.25l-1-2.75H0v1.5h3.262l-.5 1.375zm18.476 0L18.476 12l2.762 1.625.5 1.375H18.476v1.5h3.262l1-2.75V15h1.5v-1.25l1 2.75H24v-1.5h-3.262l.5-1.375L24 12l-2.762-1.625-.5-1.375H24v-1.5h-3.262l-1 2.75V9h-1.5v1.25l-1-2.75H18.476v1.5h3.262l-.5 1.375z' />
-              </svg>{' '}
-              Railway
-            </span>
-            <span
-              className='mx-6 flex items-center gap-2 text-2xl font-medium'
-              style={{ color: 'rgba(160, 160, 160, 0.7)' }}
-            >
-              <svg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' className='fill-current'>
-                <title>Cloudflare</title>
-                <path d='M19.342 8.786c.182-.62.274-1.26.274-1.91 0-3.32-2.68-6.01-5.99-6.01-2.42 0-4.5.8-5.36 2.05-.62-.48-1.37-.77-2.19-.77-2.31 0-4.18 1.88-4.18 4.19 0 .46.07.9.2 1.32-.48.62-.77 1.36-.77 2.18 0 2.31 1.87 4.18 4.18 4.18.9 0 1.73-.28 2.42-.76.62.48 1.36.76 2.18.76 2.31 0 4.18-1.87 4.18-4.18 0-.9-.28-1.73-.76-2.42.5-.63.78-1.4.78-2.23M12 14.49c-2.31 0-4.18-1.88-4.18-4.19S9.69 6.11 12 6.11s4.18 1.88 4.18 4.19-1.87 4.19-4.18 4.19m6.89-2.05h.69v-.68h-.69v.68m-1.37 0h.68v-.68h-.68v.68m-1.36 0h.68v-.68h-.68v.68m-1.37 0h.68v-.68H13.8v.68m-1.37 0h.68v-.68h-.68v.68m-1.36 0h.68v-.68h-.68v.68m-1.37 0h.68v-.68h-.68v.68m-1.36 0h.68v-.68H7.32v.68M6.63 10.3h.69v.68h-.69v-.68m1.37 0h.68v.68h-.68v-.68m1.36 0h.68v.68h-.68v.68m1.37 0h.68v.68h-.68v.68m1.37 0h.68v.68h-.68v.68m1.36 0h.68v.68h-.68v.68m1.37 0h.68v.68h-.68v.68m1.36 0h.68v.68h-1.37v.68' />
-              </svg>{' '}
-              Cloudflare
-            </span>
-            <span
-              className='mx-6 flex items-center gap-2 text-2xl font-medium'
-              style={{ color: 'rgba(160, 160, 160, 0.7)' }}
-            >
-              <svg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' className='fill-current'>
-                <title>Hetzner</title>
-                <path d='M12.38 3.01H1.81V1.3h10.57v1.71zm-1.71 19.69h1.71v-8.07l6.63-9.9H17.4l-5.32 8.07h-1.7v9.9zm-8.86 0h1.71V9.9H1.81v12.8z' />
-              </svg>{' '}
-              Hetzner
-            </span>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/website/src/components/marketing/sections/SolutionSection.tsx b/website/src/components/marketing/sections/SolutionSection.tsx
deleted file mode 100644
index 49f8c2207f..0000000000
--- a/website/src/components/marketing/sections/SolutionSection.tsx
+++ /dev/null
@@ -1,362 +0,0 @@
-'use client';
-
-import { useEffect } from 'react';
-
-export function SolutionSection() {
-  useEffect(() => {
-    // Sticky code highlighting with scroll-based step animations
-    const codeSteps = document.querySelectorAll<HTMLDivElement>('.code-highlight-step');
-    if (codeSteps.length === 0) return;
-
-    const sectionTrigger = document.querySelector<HTMLDivElement>('.section-scale-trigger');
-    const codeBox = document.querySelector<HTMLDivElement>('.code-box-container');
-    const codePre = document.querySelector<HTMLElement>('.code-content pre');
-    const sectionHeader = document.querySelector<HTMLHeadingElement>('.section-header');
-    const codeRefs = new Map(
-      Array.from(document.querySelectorAll<HTMLElement>('.code-highlight-ref')).map(el => [el.id, el])
-    );
-    const allHighlightRefs = document.querySelectorAll<HTMLElement>('.code-highlight-ref');
-    let activeCodeRef: HTMLElement | null = null;
-    let activeStep: HTMLElement | null = null;
-
-    // Track state
-    let isInExpandedZone = false; // Are we in the zone where box should be 1.2?
-    let currentActiveStepIndex = -1; // Which step is currently active
-
-    // Helper function to apply scale
-    const applyScale = (shouldExpand: boolean) => {
-      if (!codeBox) return;
-
-      if (shouldExpand) {
-        codeBox.style.transform = 'scale(1.20)';
-        codeBox.style.transition = 'transform 0.5s ease-in-out';
-
-        if (codePre) {
-          codePre.style.transform = 'scale(0.85)';
-          codePre.style.transformOrigin = '0 0';
-          codePre.style.transition = 'transform 0.5s ease-in-out';
-        }
-
-        allHighlightRefs.forEach(ref => {
-          ref.style.marginLeft = '-1.8rem';
-          ref.style.marginRight = '0';
-          ref.style.paddingLeft = '2.5rem';
-          ref.style.paddingRight = '2.5rem';
-          ref.style.width = 'calc((100% / 0.85) + 1.8rem + 1.5rem + 0.235rem)';
-          ref.style.transition = 'margin 0.5s ease-in-out, padding 0.5s ease-in-out, width 0.5s ease-in-out';
-        });
-
-        if (sectionHeader) {
-          sectionHeader.style.marginBottom = '4.8rem'; // 4rem * 1.2 to maintain constant visual spacing
-          sectionHeader.style.transition = 'margin-bottom 0.5s ease-in-out';
-        }
-      } else {
-        codeBox.style.transform = 'scale(1)';
-        codeBox.style.transition = 'transform 0.5s ease-in-out';
-
-        if (codePre) {
-          codePre.style.transform = 'scale(1)';
-          codePre.style.transformOrigin = '';
-          codePre.style.transition = 'transform 0.5s ease-in-out';
-        }
-
-        allHighlightRefs.forEach(ref => {
-          ref.style.marginLeft = '';
-          ref.style.marginRight = '';
-          ref.style.paddingLeft = '';
-          ref.style.paddingRight = '';
-          ref.style.width = '';
-          ref.style.transition = 'margin 0.5s ease-in-out, padding 0.5s ease-in-out, width 0.5s ease-in-out';
-        });
-
-        if (sectionHeader) {
-          sectionHeader.style.marginBottom = '';
-          sectionHeader.style.transition = 'margin-bottom 0.5s ease-in-out';
-        }
-      }
-    };
-
-    // Helper to determine if box should be expanded
-    const updateScale = () => {
-      // Expand if: we're in the expanded zone AND active step is 0-3
-      const shouldExpand = isInExpandedZone && currentActiveStepIndex >= 0 && currentActiveStepIndex <= 3;
-      applyScale(shouldExpand);
-    };
-
-    // Observer for the section trigger - determines if we're in the "expanded zone"
-    const triggerObserver = new IntersectionObserver(
-      entries => {
-        entries.forEach(entry => {
-          isInExpandedZone = entry.isIntersecting;
-          updateScale();
-        });
-      },
-      {
-        rootMargin: '-42% 0px -42% 0px',
-        threshold: 0
-      }
-    );
-
-    // Observer for steps - determines which step is active
-    const stepObserver = new IntersectionObserver(
-      entries => {
-        entries.forEach(entry => {
-          const stepEl = entry.target as HTMLElement;
-          const stepIndex = Array.from(codeSteps).indexOf(stepEl as HTMLDivElement);
-          const targetId = stepEl.dataset.targetCode;
-          const codeEl = codeRefs.get(targetId || '');
-          const isLastStep = stepIndex === codeSteps.length - 1;
-
-          if (entry.isIntersecting) {
-            // This step is now active
-            currentActiveStepIndex = stepIndex;
-
-            // Hide all other steps
-            codeSteps.forEach(step => {
-              if (step !== stepEl) {
-                const rect = step.getBoundingClientRect();
-                const isAbove = rect.top < window.innerHeight / 2;
-                step.style.opacity = '0';
-                step.style.transform = isAbove
-                  ? 'translateY(-30px) scale(0.95)'
-                  : 'translateY(30px) scale(0.95)';
-              }
-            });
-
-            // Activate code highlighting
-            if (activeCodeRef && activeCodeRef !== codeEl) {
-              activeCodeRef.classList.remove('is-active');
-            }
-            if (codeEl) {
-              codeEl.classList.add('is-active');
-              activeCodeRef = codeEl;
-            }
-
-            // Show step
-            stepEl.style.opacity = '1';
-            stepEl.style.transform = 'translateY(0) scale(1)';
-            activeStep = stepEl;
-
-            // Update scale based on new active step
-            updateScale();
-          } else {
-            // Special handling for last step
-            if (isLastStep) {
-              const rect = stepEl.getBoundingClientRect();
-              const hasScrolledPast = rect.top < window.innerHeight / 2;
-              if (hasScrolledPast) {
-                currentActiveStepIndex = stepIndex;
-                stepEl.style.opacity = '1';
-                stepEl.style.transform = 'translateY(0) scale(1)';
-                if (codeEl && !codeEl.classList.contains('is-active')) {
-                  if (activeCodeRef) activeCodeRef.classList.remove('is-active');
-                  codeEl.classList.add('is-active');
-                  activeCodeRef = codeEl;
-                }
-                activeStep = stepEl;
-                updateScale();
-                return;
-              }
-            }
-
-            // Hide step
-            const rect = stepEl.getBoundingClientRect();
-            const isAbove = rect.top < window.innerHeight / 2;
-            stepEl.style.opacity = '0';
-            stepEl.style.transform = isAbove
-              ? 'translateY(-30px) scale(0.95)'
-              : 'translateY(30px) scale(0.95)';
-          }
-        });
-      },
-      {
-        rootMargin: '-42% 0px -42% 0px',
-        threshold: 0
-      }
-    );
-
-    // Observe the trigger element
-    if (sectionTrigger) {
-      triggerObserver.observe(sectionTrigger);
-    }
-
-    // Observe all steps
-    codeSteps.forEach(step => {
-      step.style.transition = 'opacity 0.35s ease-in-out, transform 0.35s ease-in-out';
-      stepObserver.observe(step);
-    });
-
-    return () => {
-      if (sectionTrigger) {
-        triggerObserver.unobserve(sectionTrigger);
-      }
-      codeSteps.forEach(step => stepObserver.unobserve(step));
-    };
-  }, []);
-
-  return (
-    <section className='relative pt-48 md:pt-64'>
-      {/* Centered Container */}
-      <div className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'>
-        {/* Header */}
-        <h2 className='section-header mb-16 text-center font-heading text-4xl font-bold tracking-tighter text-text-primary md:text-5xl'>
-          Stop Writing Glue Code.
-        </h2>
-
-        {/* Content Grid */}
-        <div className='grid grid-cols-1 gap-8 md:grid-cols-2 md:gap-16'>
-          {/* Left Side: Sticky Code */}
-          <div>
-            <div className='sticky top-32 z-10 md:top-40'>
-              <div
-                className='code-box-container relative flex-none overflow-hidden rounded-xl border border-border bg-black'
-                style={{ transformOrigin: 'center center' }}
-              >
-                {/* Top Shine Highlight */}
-                <div className='absolute left-0 right-0 top-0 z-10 h-[1px] bg-gradient-to-r from-transparent via-white/30 to-transparent' />
-                <div className='flex items-center justify-between border-b border-border px-4 py-3'>
-                  <span className='text-sm font-medium text-text-primary'>ai-agent.ts</span>
-                  <span className='font-mono text-sm text-text-secondary'>actor.ts</span>
-                </div>
-                <div
-                  className='code-content overflow-x-auto overflow-y-visible bg-black p-6 font-mono text-sm [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'
-                  style={{ transformOrigin: 'center center' }}
-                >
-                  <pre className='bg-black'>
-                    <code className='bg-black'>
-                      <span className='code-comment'>// Define your actor</span>
-                      {'\n'}
-                      <span className='code-keyword'>export const</span> aiAgent ={' '}
-                      <span className='code-function'>actor</span>({'{'}
-                      {'\n'}
-                      <span className='code-highlight-ref' id='code-ref-1'>
-                        {'  '}
-                        <span className='code-comment'>// Persistent state that survives restarts</span>
-                        {'\n'}
-                        {'  '}
-                        <span className='code-function'>state</span>: {'{'}
-                        {'\n'}
-                        {'    '}messages: [] <span className='code-keyword'>as</span> Message[],
-                        {'\n'}
-                        {'  '}
-                        {'},'}
-                      </span>
-                      {'\n'}
-                      <span className='code-highlight-ref' id='code-ref-2'>
-                        {'  '}actions: {'{'}
-                        {'\n'}
-                        {'    '}
-                        <span className='code-comment'>// Call functions from clients</span>
-                        {'\n'}
-                        {'    '}sendMessage: <span className='code-keyword'>async</span> (c, userMessage:{' '}
-                        <span className='code-string'>string</span>) ={'>'} {'{'}
-                      </span>
-                      {'\n'}
-                      {'      '}
-                      <span className='code-keyword'>const</span> userMsg = {'{'} role:{' '}
-                      <span className='code-string'>"user"</span>, content: userMessage {'}'};{'\n'}
-                      {'      '}
-                      {'\n'}
-                      <span className='code-highlight-ref' id='code-ref-3'>
-                        {'      '}
-                        <span className='code-comment'>// State changes are automatically persisted</span>
-                        {'\n'}
-                        {'      '}
-                        <span className='font-bold text-accent'>c.state</span>.messages.push(userMsg);
-                        {'\n'}
-                        {'      '}
-                        <span className='code-keyword'>const</span> assistantMsg ={' '}
-                        <span className='code-keyword'>await</span>{' '}
-                        <span className='code-function'>getAIReply</span>(
-                        <span className='font-bold text-accent'>c.state</span>.messages);
-                        {'\n'}
-                        {'      '}
-                        <span className='font-bold text-accent'>c.state</span>.messages.push(assistantMsg);
-                      </span>
-                      {'\n'}
-                      <span className='code-highlight-ref' id='code-ref-4'>
-                        {'      '}
-                        <span className='code-comment'>// Send events to all connected clients</span>
-                        {'\n'}
-                        {'      '}c.<span className='code-function'>broadcast</span>(
-                        <span className='code-string'>"messageReceived"</span>, assistantMsg);
-                        {'\n'}
-                        {'      '}
-                        <span className='code-keyword'>return</span> assistantMsg;
-                      </span>
-                      {'\n'}
-                      {'    '}
-                      {'},'}
-                      {'\n'}
-                      {'  '}
-                      {'},'}
-                      {'\n'}
-                      {'}'});
-                    </code>
-                  </pre>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Right Side: The Explanation (Scroll-triggers) */}
-          <div className='mt-8 md:mt-0'>
-            <div className='relative flex flex-col items-center'>
-              {/* Invisible trigger element - spans from before step 1 through step 4 */}
-              {/* This keeps isInExpandedZone true throughout steps 1-4 */}
-              <div
-                className='section-scale-trigger absolute left-0 right-0 top-0'
-                style={{ height: 'calc(10vh + 20vh + 20vh + 20vh + 40vh)', pointerEvents: 'none' }}
-              ></div>
-
-              <div className='h-[10vh]'></div>
-              <div className='code-highlight-step text-center' data-target-code='code-ref-1'>
-                <h3 className='font-heading text-xl font-bold text-text-primary'>1. Define Your State</h3>
-                <p className='mx-auto mt-2 max-w-md text-text-secondary'>
-                  Declare your state in a simple object. Rivet handles persistence, replication, and storage
-                  for you. It's just there.
-                </p>
-              </div>
-
-              <div className='h-[20vh]'></div>
-              <div className='code-highlight-step text-center' data-target-code='code-ref-2'>
-                <h3 className='font-heading text-xl font-bold text-text-primary'>2. Add Your Actions</h3>
-                <p className='mx-auto mt-2 max-w-md text-text-secondary'>
-                  Write functions that clients can call. These are your entrypoints, just like a serverless
-                  function or API route.
-                </p>
-              </div>
-
-              <div className='h-[20vh]'></div>
-              <div className='code-highlight-step text-center' data-target-code='code-ref-3'>
-                <h3 className='font-heading text-xl font-bold text-text-primary'>
-                  3. Mutate State In-Memory
-                </h3>
-                <p className='mx-auto mt-2 max-w-md text-text-secondary'>
-                  Just modify{' '}
-                  <code className='rounded bg-border px-1 py-0.5 font-mono text-sm text-accent'>c.state</code>
-                  . Reads and writes are instant. No database round-trips, no `await`.
-                </p>
-              </div>
-
-              <div className='h-[20vh]'></div>
-              <div className='code-highlight-step text-center' data-target-code='code-ref-4'>
-                <h3 className='font-heading text-xl font-bold text-text-primary'>4. Go Realtime, Natively</h3>
-                <p className='mx-auto mt-2 max-w-md text-text-secondary'>
-                  Use{' '}
-                  <code className='rounded bg-border px-1 py-0.5 font-mono text-sm text-accent'>
-                    c.broadcast
-                  </code>{' '}
-                  to send events. No external pub/sub or WebSocket server needed. It's built-in.
-                </p>
-              </div>
-
-              {/* Add extra space at the end */}
-              <div className='h-[10vh]'></div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/website/src/components/marketing/sections/StudioSection.tsx b/website/src/components/marketing/sections/StudioSection.tsx
deleted file mode 100644
index d10949dd35..0000000000
--- a/website/src/components/marketing/sections/StudioSection.tsx
+++ /dev/null
@@ -1,184 +0,0 @@
-const imgStudio = { src: "https://assets.rivet.dev/website/images/screenshots/rivet-hub.png", width: 2967, height: 1826, format: "png" };
-import { Icon } from '@rivet-gg/icons';
-import {
-  faTerminal,
-  faChartLine,
-  faBug,
-  faHeartPulse,
-  faUserGroup,
-  faGaugeHigh,
-  faCodeBranch,
-  faLeaf,
-  faEye,
-  faFlask,
-  faMagnifyingGlass,
-  faNetworkWired
-} from '@rivet-gg/icons';
-
-export interface FeatureItem {
-  icon: any;
-  title?: string;
-  name?: string;
-  description: string;
-}
-
-interface FeatureProps {
-  feature: FeatureItem;
-}
-
-function Feature({ feature }: FeatureProps) {
-  const title = feature.title || feature.name;
-
-  return (
-    <div className='text-md p-5'>
-      <div className='mb-3 flex items-center gap-3 text-white/90'>
-        <Icon icon={feature.icon} className='h-5 w-5 text-white' />
-        <span className='font-medium text-white'>{title}</span>
-      </div>
-      <p className='text-white/60'>{feature.description}</p>
-    </div>
-  );
-}
-
-export function StudioSection() {
-  const features: FeatureItem[] = [
-    {
-      name: 'Live State Inspection',
-      icon: faEye,
-      description: 'View and edit your actor state in real-time as messages are sent and processed'
-    },
-    {
-      name: 'Event Monitoring',
-      icon: faChartLine,
-      description:
-        'See all events happening in your actor in real-time - track every state change and action as it happens'
-    },
-    {
-      name: 'REPL',
-      icon: faTerminal,
-      description:
-        'Debug your actor in real-time - call actions, subscribe to events, and interact directly with your code'
-    },
-    {
-      name: 'Connection Inspection',
-      icon: faNetworkWired,
-      description: 'Monitor active connections with state and parameters for each client'
-    }
-  ];
-
-  return (
-    <div className='w-full px-6'>
-      <div className='group relative'>
-        {/* Unified hover area covering screenshot and spacer */}
-        {/*href="https://www.youtube.com/watch?v=RYgo25fH9Ss"*/}
-        <a
-          className='absolute cursor-pointer'
-          style={{
-            top: '200px',
-            left: '0',
-            right: '0',
-            height: '400px',
-            width: '100%',
-            zIndex: 15
-          }}
-          href='https://x.com/NathanFlurry/status/1976427064678023634'
-          target='_blank'
-          rel='noopener noreferrer'
-        />
-
-        {/* Content */}
-        <div className='pointer-events-none'>
-          {/* Header */}
-          <div className='pointer-events-auto relative z-20 mx-auto max-w-7xl'>
-            <h2 className='max-w-lg text-4xl font-medium tracking-tight text-white'>
-              Built-In Observability
-            </h2>
-            <p className='mt-4 max-w-lg text-lg text-white/70'>
-              Powerful debugging and monitoring tools that work from local development to production.
-            </p>
-
-          </div>
-
-          {/* Spacer with Watch Demo button */}
-          <div className='relative flex h-[380px] items-center justify-center'>
-            {/* Watch Demo overlay that appears on hover */}
-            <div className='pointer-events-none absolute z-20 opacity-0 transition-opacity duration-300 group-hover:opacity-100'>
-              <div className='flex items-center gap-2 rounded-lg border border-white/30 bg-white/20 px-6 py-3 font-medium text-white backdrop-blur-sm'>
-                <svg className='h-5 w-5' fill='currentColor' viewBox='0 0 20 20'>
-                  <path d='M6.3 2.84A1 1 0 004 3.75v12.5a1 1 0 001.59.81l11-6.25a1 1 0 000-1.62l-11-6.25a1 1 0 00-1.29.06z' />
-                </svg>
-                Watch Demo
-              </div>
-            </div>
-          </div>
-
-          {/* Features grid */}
-          <div className='pointer-events-auto relative z-20 bg-gradient-to-t from-[hsl(var(--background))] via-[hsl(var(--background))] to-transparent pt-16'>
-            <div className='mx-auto grid max-w-7xl grid-cols-1 gap-6 gap-x-6 gap-y-6 sm:grid-cols-2 lg:grid-cols-4'>
-              {features.map((feature, index) => (
-                <Feature key={index} feature={feature} />
-              ))}
-            </div>
-          </div>
-        </div>
-
-        {/* Screenshot */}
-        <div className='absolute inset-0 overflow-hidden'>
-          {/* Screenshot wrapper */}
-          <div
-            className='absolute'
-            style={{
-              top: '220px',
-              left: '0',
-              right: '0',
-              width: '80%',
-              maxWidth: '1200px',
-              margin: '0 auto',
-              aspectRatio: '16/9',
-              zIndex: 10
-            }}
-          >
-            {/* Perspective container that gets blurred and dimmed */}
-            <div
-              className='h-full w-full transition-all duration-300 group-hover:blur-sm group-hover:brightness-75'
-              style={{ perspective: '2000px' }}
-            >
-              <div
-                className='h-full w-full rounded-md border-2 border-white/10'
-                style={{
-                  transformStyle: 'preserve-3d',
-                  transform: 'translateX(-11%) scale(1.2) rotateX(38deg) rotateY(19deg) rotateZ(340deg)',
-                  transformOrigin: 'top left',
-                  boxShadow: '0 35px 60px -15px rgba(0, 0, 0, 0.5)'
-                }}
-              >
-                {/* Studio screenshot with enhanced depth */}
-                <div
-                  className='relative h-full w-full overflow-hidden rounded-md'
-                  style={{
-                    transformStyle: 'preserve-3d',
-                    backfaceVisibility: 'hidden'
-                  }}
-                >
-                  <img src={imgStudio}
-                    alt='Rivet Dashboard'
-                    className='h-full w-full rounded-md object-cover object-top'
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Gradient overlay */}
-          <div
-            className='pointer-events-none absolute inset-0 z-[1]'
-            style={{
-              background:
-                'linear-gradient(90deg, hsl(var(--background) / 0) 66%, hsl(var(--background) / 0.95) 85%, hsl(var(--background) / 1) 100%)'
-            }}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/website/src/components/marketing/sections/TechSection.tsx b/website/src/components/marketing/sections/TechSection.tsx
deleted file mode 100644
index 0b636fcdc2..0000000000
--- a/website/src/components/marketing/sections/TechSection.tsx
+++ /dev/null
@@ -1,368 +0,0 @@
-
-// Platform images
-import bunLogo from '../images/platforms/bun.svg';
-import denoLogo from '../images/platforms/deno.svg';
-import nodejsLogo from '../images/platforms/nodejs.svg';
-import vercelLogo from '../images/platforms/vercel.svg';
-import awsLambdaLogo from '../images/platforms/aws-lambda.svg';
-import awsLogo from '../images/platforms/aws-light.svg';
-import supabaseLogo from '../images/platforms/supabase.svg';
-import railwayLogo from '../images/platforms/railway.svg';
-import freestyleLogo from '../images/platforms/freestyle.svg';
-import gcpLogo from '../images/platforms/gcp.svg';
-import kubernetesLogo from '../images/platforms/kubernetes.svg';
-import hetznerLogo from '../images/platforms/hetzner.svg';
-import vmBareMetalLogo from '../images/platforms/vm-bare-metal.svg';
-
-// Client images
-import reactLogo from '../images/clients/react.svg';
-import javascriptLogo from '../images/clients/javascript.svg';
-import typescriptLogo from '../images/clients/typescript.svg';
-import nextjsLogo from '../images/clients/nextjs.svg';
-import vueLogo from '../images/clients/vue.svg';
-import svelteLogo from '../images/clients/svelte.svg';
-
-// Integration images
-import honoLogo from '../images/integrations/hono.svg';
-import expressLogo from '../images/integrations/express.svg';
-import elysiaLogo from '../images/integrations/elysia.svg';
-import trpcLogo from '../images/integrations/trpc.svg';
-import vitestLogo from '../images/integrations/vitest.svg';
-import betterAuthLogo from '../images/integrations/better-auth.svg';
-import livestoreLogo from '../images/integrations/livestore.svg';
-import zerosyncLogo from '../images/integrations/zerosync.svg';
-import tinybaseLogo from '../images/integrations/tinybase.svg';
-import yjsLogo from '../images/integrations/yjs.svg';
-
-interface TechLinkProps {
-  href: string;
-  name: string;
-  icon: string;
-  alt: string;
-  external?: boolean;
-  status?: 'coming-soon' | 'help-wanted' | '1-click-deploy';
-}
-
-function TechLink({ href, name, icon, alt, external, status }: TechLinkProps) {
-  const baseClasses =
-    'relative flex items-center gap-2.5 px-3 py-2.5 bg-white/2 border border-white/20 rounded-lg hover:bg-white/10 hover:border-white/40 transition-all duration-200 group';
-
-  const linkProps = external
-    ? {
-        target: '_blank',
-        rel: 'noopener noreferrer'
-      }
-    : {};
-
-  const statusText =
-    status === 'coming-soon'
-      ? 'On The Roadmap'
-      : status === 'help-wanted'
-      ? 'Help Wanted'
-      : status === '1-click-deploy'
-      ? '1-Click Deploy'
-      : '';
-  const statusClass =
-    status === 'coming-soon'
-      ? 'bg-[#ff4f00] text-white'
-      : status === 'help-wanted'
-      ? 'bg-[#0059ff] text-white'
-      : status === '1-click-deploy'
-      ? 'bg-[#3ECF8E] text-white'
-      : '';
-
-  return (
-    <a href={href} className={baseClasses} {...linkProps}>
-      {status && (
-        <span
-          className={`absolute -right-1.5 -top-1.5 rounded px-1.5 py-0.5 text-[10px] ${statusClass} font-medium`}
-        >
-          {statusText}
-        </span>
-      )}
-      <img src={icon} alt={alt} width={22} height={22} className='object-contain' />
-      <span className='text-sm font-medium text-white'>{name}</span>
-    </a>
-  );
-}
-
-interface TechSubSectionProps {
-  title?: string;
-  children: React.ReactNode;
-}
-
-function TechSubSection({ title, children }: TechSubSectionProps) {
-  return (
-    <div className='mx-auto max-w-full lg:ml-auto lg:max-w-md'>
-      {title && <h3 className='font-600 mb-3 text-lg text-white/80'>{title}</h3>}
-      <div className='grid grid-cols-1 grid-cols-2 gap-2.5 md:grid-cols-4 lg:grid-cols-2'>{children}</div>
-    </div>
-  );
-}
-
-interface TechSectionGroupProps {
-  children: React.ReactNode;
-}
-
-function TechSectionGroup({ children }: TechSectionGroupProps) {
-  return <div className='grid grid-cols-1 items-start gap-12 lg:grid-cols-2'>{children}</div>;
-}
-
-interface TechSectionTextProps {
-  heading: string;
-  description: string;
-  linkText: string;
-  linkHref: string;
-  linkExternal?: boolean;
-}
-
-function TechSectionText({ heading, description, linkText, linkHref, linkExternal }: TechSectionTextProps) {
-  const linkProps = linkExternal
-    ? {
-        target: '_blank',
-        rel: 'noopener noreferrer'
-      }
-    : {};
-
-  return (
-    <div className='space-y-6'>
-      <h2 className='font-700 text-2xl text-white sm:text-3xl'>{heading}</h2>
-      <div className='space-y-4'>
-        <p className='font-500 text-lg leading-relaxed text-white/40'>{description}</p>
-        <p className='font-500 text-lg leading-relaxed text-white/40'>
-          Don't see what you need?{' '}
-          <a href={linkHref}
-            className='text-white/80 underline transition-colors hover:text-white'
-            {...linkProps}
-          >
-            {linkText}
-          </a>
-          .
-        </p>
-      </div>
-    </div>
-  );
-}
-
-interface TechSectionSubsectionsProps {
-  children: React.ReactNode;
-}
-
-function TechSectionSubsections({ children }: TechSectionSubsectionsProps) {
-  return <div className='space-y-8'>{children}</div>;
-}
-
-export function TechSection() {
-  return (
-    <div className='mx-auto max-w-7xl'>
-      <div className='space-y-28'>
-        <TechSectionGroup>
-          <TechSectionText
-            heading='Stack Agnostic'
-            description="Use Rivet with your existing stack. Works with any framework, runtime, or infrastructure."
-            linkText='Add your own'
-            linkHref='https://github.com/rivet-dev/rivet/issues/new'
-            linkExternal
-          />
-
-          <TechSectionSubsections>
-            <TechSubSection title='Infrastructure'>
-              <TechLink
-                href='/docs/connect/vercel'
-                name='Vercel'
-                icon={vercelLogo}
-                alt='Vercel'
-                status='1-click-deploy'
-              />
-              <TechLink
-                href='https://railway.com/deploy/rivet'
-                name='Railway'
-                icon={railwayLogo}
-                alt='Railway'
-                external
-                status='1-click-deploy'
-              />
-              <TechLink
-                href='/docs/connect/kubernetes'
-                name='Kubernetes'
-                icon={kubernetesLogo}
-                alt='Kubernetes'
-              />
-              <TechLink href='/docs/connect/aws-ecs' name='AWS ECS' icon={awsLogo} alt='AWS ECS' />
-              <TechLink
-                href='/docs/connect/gcp-cloud-run'
-                name='Google Cloud Run'
-                icon={gcpLogo}
-                alt='Google Cloud Run'
-              />
-              <TechLink href='/docs/connect/hetzner' name='Hetzner' icon={hetznerLogo} alt='Hetzner' />
-              <TechLink
-                href='/docs/connect/vm-and-bare-metal'
-                name='VM & Bare Metal'
-                icon={vmBareMetalLogo}
-                alt='VM & Bare Metal'
-              />
-            </TechSubSection>
-
-            <TechSubSection title='Frameworks'>
-              <TechLink href='/docs/clients/react' name='React' icon={reactLogo} alt='React' />
-              <TechLink href='/docs/clients/next-js' name='Next.js' icon={nextjsLogo} alt='Next.js' />
-              <TechLink
-                href='/docs/clients/javascript'
-                name='Svelte'
-                icon={svelteLogo}
-                alt='Svelte'
-              />
-              <TechLink href='/docs/integrations/hono' name='Hono' icon={honoLogo} alt='Hono' />
-              <TechLink href='/docs/integrations/express' name='Express' icon={expressLogo} alt='Express' />
-              <TechLink href='/docs/integrations/elysia' name='Elysia' icon={elysiaLogo} alt='Elysia' />
-              <TechLink href='/docs/integrations/trpc' name='tRPC' icon={trpcLogo} alt='tRPC' />
-            </TechSubSection>
-
-            <TechSubSection title='Runtimes'>
-              <TechLink
-                href='/docs/actors/quickstart/backend'
-                name='Node.js'
-                icon={nodejsLogo}
-                alt='Node.js'
-              />
-              <TechLink href='/docs/actors/quickstart/backend' name='Bun' icon={bunLogo} alt='Bun' />
-              <TechLink
-                href='/docs/actors/quickstart/backend'
-                name='Deno'
-                icon={denoLogo}
-                alt='Deno'
-              />
-            </TechSubSection>
-
-            <TechSubSection title='Tools'>
-              <TechLink href='/docs/integrations/vitest' name='Vitest' icon={vitestLogo} alt='Vitest' />
-              <TechLink
-                href='/docs'
-                name='OpenAPI'
-                icon={javascriptLogo}
-                alt='OpenAPI'
-              />
-              <TechLink
-                href='/docs'
-                name='AsyncAPI'
-                icon={javascriptLogo}
-                alt='AsyncAPI'
-              />
-              <TechLink
-                href='https://rivet-dev.github.io/rivetkit/'
-                name='TypeDoc'
-                icon={typescriptLogo}
-                alt='TypeDoc'
-                external
-              />
-            </TechSubSection>
-          </TechSectionSubsections>
-        </TechSectionGroup>
-
-        <TechSectionGroup>
-          <TechSectionText
-            heading='Works With Your Tools'
-            description='Seamlessly integrate Rivet with your favorite frameworks, languages, and tools.'
-            linkText='Request an integration'
-            linkHref='https://github.com/rivet-dev/rivet/issues/new'
-            linkExternal
-          />
-
-          <TechSectionSubsections>
-            <TechSubSection title='Frontend & Clients'>
-              <TechLink
-                href='/docs/clients/javascript'
-                name='JavaScript'
-                icon={javascriptLogo}
-                alt='JavaScript'
-              />
-              <TechLink
-                href='/docs/clients/javascript'
-                name='TypeScript'
-                icon={typescriptLogo}
-                alt='TypeScript'
-              />
-              <TechLink href='/docs/clients/react' name='React' icon={reactLogo} alt='React' />
-              <TechLink href='/docs/clients/next-js' name='Next.js' icon={nextjsLogo} alt='Next.js' />
-              <TechLink
-                href='/docs/clients/javascript'
-                name='Svelte'
-                icon={svelteLogo}
-                alt='Svelte'
-              />
-              <TechLink
-                href='https://github.com/rivet-dev/rivet/issues/new'
-                name='Vue'
-                icon={vueLogo}
-                alt='Vue'
-                status='help-wanted'
-              />
-            </TechSubSection>
-
-            <TechSubSection title='Backend'>
-              <TechLink href='/docs/integrations/hono' name='Hono' icon={honoLogo} alt='Hono' />
-              <TechLink href='/docs/integrations/express' name='Express' icon={expressLogo} alt='Express' />
-              <TechLink href='/docs/integrations/elysia' name='Elysia' icon={elysiaLogo} alt='Elysia' />
-              <TechLink href='/docs/integrations/trpc' name='tRPC' icon={trpcLogo} alt='tRPC' />
-            </TechSubSection>
-
-            <TechSubSection title='Auth'>
-              <TechLink
-                href='/docs/integrations/better-auth'
-                name='Better Auth'
-                icon={betterAuthLogo}
-                alt='Better Auth'
-              />
-            </TechSubSection>
-
-            <TechSubSection title='Testing'>
-              <TechLink href='/docs/integrations/vitest' name='Vitest' icon={vitestLogo} alt='Vitest' />
-            </TechSubSection>
-
-            <TechSubSection title='AI'>
-              <TechLink
-                href='https://github.com/rivet-dev/rivet/tree/main/examples/ai-agent'
-                name='AI SDK'
-                icon={vercelLogo}
-                alt='AI SDK'
-                status='coming-soon'
-              />
-            </TechSubSection>
-
-            <TechSubSection title='Sync'>
-              <TechLink
-                href='https://github.com/rivet-dev/rivet/issues/new'
-                name='LiveStore'
-                icon={livestoreLogo}
-                alt='LiveStore'
-                status='coming-soon'
-              />
-              <TechLink
-                href='https://github.com/rivet-dev/rivet/issues/new'
-                name='ZeroSync'
-                icon={zerosyncLogo}
-                alt='ZeroSync'
-                status='help-wanted'
-              />
-              <TechLink
-                href='https://github.com/rivet-dev/rivet/issues/new'
-                name='TinyBase'
-                icon={tinybaseLogo}
-                alt='TinyBase'
-                status='help-wanted'
-              />
-              <TechLink
-                href='https://github.com/rivet-dev/rivet/tree/main/examples/collaborative-document'
-                name='Yjs'
-                icon={yjsLogo}
-                alt='Yjs'
-                status='help-wanted'
-              />
-            </TechSubSection>
-          </TechSectionSubsections>
-        </TechSectionGroup>
-      </div>
-    </div>
-  );
-}
diff --git a/website/src/components/marketing/sections/UseCases.tsx b/website/src/components/marketing/sections/UseCases.tsx
deleted file mode 100644
index 6712e6a38d..0000000000
--- a/website/src/components/marketing/sections/UseCases.tsx
+++ /dev/null
@@ -1,249 +0,0 @@
-'use client';
-
-import { useRef, useState } from 'react';
-import { useCases } from '@/data/use-cases';
-import { IconWithSpotlight } from '../sections/IconWithSpotlight';
-import { AnimatePresence, motion } from 'framer-motion';
-
-interface UseCaseCardProps {
-  title: string;
-  description: React.ReactNode;
-  href: string;
-  className?: string;
-  iconPath: string;
-  variant?: 'default' | 'large';
-  onHover?: (title: string | null) => void;
-}
-
-function UseCaseCard({
-  title,
-  description,
-  href,
-  className = '',
-  iconPath,
-  variant = 'default',
-  onHover
-}: UseCaseCardProps) {
-  const cardRef = useRef<HTMLAnchorElement>(null);
-
-  const handleMouseMove = (e: React.MouseEvent<HTMLAnchorElement>) => {
-    if (!cardRef.current) return;
-    const card = cardRef.current;
-
-    // Find the icon container and convert coordinates to icon-relative
-    const iconContainer = card.querySelector('.icon-spotlight-container') as HTMLElement;
-    if (!iconContainer) return;
-
-    // Get the icon's position relative to viewport
-    const iconRect = iconContainer.getBoundingClientRect();
-
-    // Calculate mouse position relative to the icon (not the card)
-    const x = ((e.clientX - iconRect.left) / iconRect.width) * 100;
-    const y = ((e.clientY - iconRect.top) / iconRect.height) * 100;
-
-    // Set CSS custom properties on the icon container
-    iconContainer.style.setProperty('--mouse-x', `${x}%`);
-    iconContainer.style.setProperty('--mouse-y', `${y}%`);
-  };
-
-  if (variant === 'large') {
-    return (
-      <a
-        ref={cardRef}
-        href={href}
-        className={`group relative block ${className}`}
-        onMouseMove={handleMouseMove}
-        onMouseEnter={() => onHover?.(title)}
-        onMouseLeave={() => onHover?.(null)}
-      >
-        <div className='relative flex h-full flex-row gap-6 overflow-hidden rounded-xl border border-white/20 bg-white/[0.008] p-6 transition-colors hover:border-white/30 hover:bg-white/[0.02]'>
-          {/* Gradient overlay on hover */}
-          <div className='pointer-events-none absolute inset-0 bg-gradient-to-b from-white/[0.04] via-white/[0.01] to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100' />
-
-          {/* Left side: Content + Checkmarks */}
-          <div className='relative z-10 flex flex-1 flex-col justify-between'>
-            <div>
-              <h3 className='mb-3 text-lg font-semibold text-white'>{title}</h3>
-              <p className='text-sm leading-relaxed text-white/40'>{description}</p>
-            </div>
-
-            {/* Checkmarks */}
-            <div className='mt-6 space-y-2'>
-              {['Cloud & on-prem', 'Supports realtime', 'Works with AI SDK'].map(item => (
-                <div key={item} className='flex items-center gap-2'>
-                  <svg
-                    className='h-4 w-4 text-white/60'
-                    fill='none'
-                    stroke='currentColor'
-                    viewBox='0 0 24 24'
-                  >
-                    <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M5 13l4 4L19 7' />
-                  </svg>
-                  <span className='text-sm text-white/60'>{item}</span>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          {/* Right side: Icon */}
-          <div className='relative z-10 flex flex-1 items-center justify-center'>
-            <IconWithSpotlight iconPath={iconPath} title={title} />
-          </div>
-        </div>
-      </a>
-    );
-  }
-
-  return (
-    <a
-      ref={cardRef}
-      href={href}
-      className={`group relative block ${className}`}
-      onMouseMove={handleMouseMove}
-      onMouseEnter={() => onHover?.(title)}
-      onMouseLeave={() => onHover?.(null)}
-    >
-      <div className='relative flex h-full flex-col overflow-hidden rounded-xl border border-white/20 bg-white/[0.008] p-6 transition-colors hover:border-white/30 hover:bg-white/[0.02]'>
-        {/* Gradient overlay on hover */}
-        <div className='pointer-events-none absolute inset-0 bg-gradient-to-b from-white/[0.04] via-white/[0.01] to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100' />
-
-        {/* Content */}
-        <div className='relative z-10 mb-6'>
-          <h3 className='mb-3 text-lg font-semibold text-white'>{title}</h3>
-          <p className='text-sm leading-relaxed text-white/40'>{description}</p>
-        </div>
-
-        {/* Spotlight icon */}
-        <div className='relative z-10 flex flex-1 items-center justify-center'>
-          <IconWithSpotlight iconPath={iconPath} title={title} />
-        </div>
-      </div>
-    </a>
-  );
-}
-
-export function UseCases() {
-  const [hoveredTitle, setHoveredTitle] = useState<string | null>(null);
-
-  // Map the use cases we want to display
-  const selectedUseCases = [
-    useCases.find(uc => uc.title === 'Agent Orchestration & MCP')!, // agent orchestration & mcp
-    useCases.find(uc => uc.title === 'Workflows')!, // workflows
-    useCases.find(uc => uc.title === 'Multiplayer Apps')!, // multiplayer apps
-    useCases.find(uc => uc.title === 'Local-First Sync')!, // local-first sync
-    useCases.find(uc => uc.title === 'Background Jobs')!, // background jobs
-    useCases.find(uc => uc.title === 'Per-Tenant Databases')!, // per-tenant databases
-    useCases.find(uc => uc.title === 'Geo-Distributed Database')! // geo-distributed database
-  ];
-
-  // Map use case titles to icon paths
-  const getIconPath = (title: string): string => {
-    const iconMap: { [key: string]: string } = {
-      'Agent Orchestration & MCP': '/use-case-icons/sparkles.svg',
-      Workflows: '/use-case-icons/diagram-next.svg',
-      'Multiplayer Apps': '/use-case-icons/file-pen.svg',
-      'Local-First Sync': '/use-case-icons/rotate.svg',
-      'Background Jobs': '/use-case-icons/gears.svg',
-      'Per-Tenant Databases': '/use-case-icons/database.svg',
-      'Geo-Distributed Database': '/use-case-icons/globe.svg'
-    };
-    return iconMap[title] || '';
-  };
-
-  // Get highlighted description
-  const getHighlightedDescription = (title: string): React.ReactNode => {
-    const descriptionMap: { [key: string]: React.ReactNode } = {
-      'Agent Orchestration & MCP': (
-        <>
-          Build <span className='text-white/90'>AI agents</span> with Model Context Protocol and persistent
-          state
-        </>
-      ),
-      Workflows: (
-        <>
-          <span className='text-white/90'>Durable multi-step workflows</span> with automatic state management
-        </>
-      ),
-      'Multiplayer Apps': (
-        <>
-          Build <span className='text-white/90'>realtime multiplayer</span> applications with authoritative
-          state
-        </>
-      ),
-      'Local-First Sync': (
-        <>
-          <span className='text-white/90'>Offline-first</span> applications with server synchronization
-        </>
-      ),
-      'Background Jobs': (
-        <>
-          <span className='text-white/90'>Scheduled and recurring jobs</span> without external queue
-          infrastructure
-        </>
-      ),
-      'Per-Tenant Databases': (
-        <>
-          <span className='text-white/90'>Isolated data stores</span> for each user with zero-latency access
-        </>
-      ),
-      'Geo-Distributed Database': (
-        <>
-          Store data close to users globally with{' '}
-          <span className='text-white/90'>automatic edge distribution</span>
-        </>
-      )
-    };
-    return descriptionMap[title] || '';
-  };
-
-  return (
-    <section className='w-full'>
-      <div className='container relative mx-auto max-w-[1500px] px-6 lg:px-16 xl:px-20'>
-        <h2 className='font-700 mb-8 text-left text-2xl text-white sm:text-3xl'>
-          Actors make it simple to build{' '}
-          <span className='relative inline-block'>
-            <AnimatePresence mode='wait'>
-              {hoveredTitle && (
-                <motion.span
-                  key={hoveredTitle}
-                  initial={{ opacity: 0, y: 20 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, y: -10 }}
-                  transition={{ duration: 0.15, ease: 'easeOut' }}
-                  className='inline-block text-[#FF5C00]'
-                >
-                  {hoveredTitle}
-                </motion.span>
-              )}
-            </AnimatePresence>
-          </span>
-        </h2>
-        <div className='grid auto-rows-[300px] grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-12 md:gap-4 xl:gap-3 2xl:gap-6'>
-          {/* First item - takes 6 columns (half width on medium+) */}
-          <UseCaseCard
-            title={selectedUseCases[0].title}
-            description={getHighlightedDescription(selectedUseCases[0].title)}
-            href={selectedUseCases[0].href}
-            iconPath={getIconPath(selectedUseCases[0].title)}
-            className='sm:col-span-2 md:col-span-6'
-            variant='large'
-            onHover={setHoveredTitle}
-          />
-
-          {/* Remaining items - 3 columns each (quarter width on medium+) */}
-          {selectedUseCases.slice(1).map(useCase => (
-            <UseCaseCard
-              key={useCase.href}
-              title={useCase.title}
-              description={getHighlightedDescription(useCase.title)}
-              href={useCase.href}
-              iconPath={getIconPath(useCase.title)}
-              className='md:col-span-3'
-              onHover={setHoveredTitle}
-            />
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/website/src/components/marketing/solutions/AgentOSPage.tsx b/website/src/components/marketing/solutions/AgentOSPage.tsx
index cbe1349a4e..052b3f86d5 100644
--- a/website/src/components/marketing/solutions/AgentOSPage.tsx
+++ b/website/src/components/marketing/solutions/AgentOSPage.tsx
@@ -1,7 +1,8 @@
 'use client';
 
-import { useState, useEffect, useRef, useCallback } from 'react';
+import { useId, useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import {
+	ArrowDown,
 	ArrowRight,
 	Shield,
 	Terminal,
@@ -29,10 +30,13 @@ import {
 	Container,
 	ShieldCheck,
 } from 'lucide-react';
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';
 import { Icon, faNodeJs, faPython } from '@rivet-gg/icons';
 import type { IconProp } from '@rivet-gg/icons';
 import agentosLogo from '@/images/products/agentos-logo.svg';
+import { InkPanel } from '../editorial/InkPanel';
+import { GLOW_PILL_CLASS, handleGlowPillMouseMove } from '../glowPill';
+import { registry } from '@/data/registry';
 
 interface HeroTabCode {
 	key: string;
@@ -435,8 +439,8 @@ const ImageCycler = ({ images }: { images: HeroImage[] }) => {
 				}`}
 				style={{ zIndex: 20 }}
 			>
-				<p className='text-sm font-medium text-zinc-900'>{currentImage.title}</p>
-				<p className='text-xs text-zinc-500'>{currentImage.caption}</p>
+				<p className='text-sm font-medium text-ink'>{currentImage.title}</p>
+				<p className='text-xs text-ink-faint'>{currentImage.caption}</p>
 			</div>
 		</div>
 	);
@@ -455,11 +459,11 @@ const CopyCommand = ({ command }: { command: string }) => {
 	return (
 		<button
 			onClick={handleCopy}
-			className='group inline-flex w-full items-center justify-center gap-2 whitespace-nowrap rounded-md border border-zinc-300 px-4 py-2 text-sm transition-colors hover:border-zinc-400 sm:w-auto'
+			className='group inline-flex w-full items-center justify-center gap-2 whitespace-nowrap rounded-md border border-ink/20 px-4 py-2 text-sm transition-colors hover:border-ink/40 sm:w-auto'
 		>
-			<Terminal className='h-4 w-4 text-zinc-400' />
-			<span className='text-zinc-700'>{command}</span>
-			{copied && <Check className='h-4 w-4 text-emerald-500' />}
+			<Terminal className='h-4 w-4 text-ink-faint' />
+			<span className='text-ink-soft transition-colors group-hover:text-ink'>{command}</span>
+			{copied && <Check className='h-4 w-4 text-ink' />}
 		</button>
 	);
 };
@@ -502,11 +506,11 @@ const HandwrittenText = ({ text, className }: { text: string; className?: string
 				x='10'
 				y={measured ? measured.height * 0.75 : 90}
 				style={{
-					fontFamily: '"Playwrite IE", cursive',
+					fontFamily: '"Gloria Hallelujah", cursive',
 					fontSize: '72px',
 					fontWeight: 400,
-					fill: 'black',
-					stroke: 'black',
+					fill: '#1B1916',
+					stroke: '#1B1916',
 					strokeWidth: 1,
 					paintOrder: 'stroke fill',
 				}}
@@ -536,30 +540,30 @@ interface TermLine {
 }
 
 const terminalLines: TermLine[] = [
-	{ text: '$ npx agentos start', color: 'text-zinc-900', delay: 0, typing: true },
+	{ text: '$ npx agentos start', color: 'text-cream', delay: 0, typing: true },
 	{ text: '', delay: 600 },
-	{ text: AGENTOS_ASCII, color: 'text-zinc-900', delay: 800 },
+	{ text: AGENTOS_ASCII, color: 'text-cream', delay: 800 },
 	{ text: '', delay: 1200 },
-	{ text: '  v0.1.0  |  runtime ready', color: 'text-zinc-400', delay: 1400 },
+	{ text: '  v0.1.0  |  runtime ready', color: 'text-cream/45', delay: 1400 },
 	{ text: '', delay: 1600 },
-	{ text: '✓ V8 isolate pool initialized (12 workers)', color: 'text-emerald-600', delay: 1800 },
-	{ text: '✓ File system mounted → /workspace', color: 'text-emerald-600', delay: 2100 },
-	{ text: '✓ Tool registry loaded (git, curl, python, node)', color: 'text-emerald-600', delay: 2400 },
-	{ text: '✓ Network policy applied → allowlist mode', color: 'text-emerald-600', delay: 2700 },
+	{ text: '✓ V8 isolate pool initialized (12 workers)', color: 'text-cream/70', delay: 1800 },
+	{ text: '✓ File system mounted → /workspace', color: 'text-cream/70', delay: 2100 },
+	{ text: '✓ Tool registry loaded (git, curl, python, node)', color: 'text-cream/70', delay: 2400 },
+	{ text: '✓ Network policy applied → allowlist mode', color: 'text-cream/70', delay: 2700 },
 	{ text: '', delay: 3000 },
-	{ text: '● Agent session created  sid=a8f3c2e1', color: 'text-blue-600', delay: 3200 },
-	{ text: '  → Claude Code connected', color: 'text-zinc-500', delay: 3500 },
-	{ text: '  → Prompt: "Set up a Next.js app with auth"', color: 'text-zinc-500', delay: 3800 },
+	{ text: '● Agent session created  sid=a8f3c2e1', color: 'text-cream/85', delay: 3200 },
+	{ text: '  → Claude Code connected', color: 'text-cream/55', delay: 3500 },
+	{ text: '  → Prompt: "Set up a Next.js app with auth"', color: 'text-cream/55', delay: 3800 },
 	{ text: '', delay: 4100 },
-	{ text: '  ▸ agent  npm create next-app@latest /workspace/app', color: 'text-zinc-600', delay: 4400 },
-	{ text: '  ▸ agent  npm install next-auth@5 prisma @prisma/client', color: 'text-zinc-600', delay: 5000 },
-	{ text: '  ▸ agent  Writing 7 files...', color: 'text-zinc-600', delay: 5600 },
-	{ text: '  ▸ agent  npx prisma db push', color: 'text-zinc-600', delay: 6200 },
+	{ text: '  ▸ agent  npm create next-app@latest /workspace/app', color: 'text-cream/70', delay: 4400 },
+	{ text: '  ▸ agent  npm install next-auth@5 prisma @prisma/client', color: 'text-cream/70', delay: 5000 },
+	{ text: '  ▸ agent  Writing 7 files...', color: 'text-cream/70', delay: 5600 },
+	{ text: '  ▸ agent  npx prisma db push', color: 'text-cream/70', delay: 6200 },
 	{ text: '', delay: 6800 },
-	{ text: '✓ Task complete  duration=14.2s  tokens=3,847  cost=$0.012', color: 'text-emerald-600', delay: 7000 },
-	{ text: '  → Preview: http://localhost:3000', color: 'text-zinc-500', delay: 7300 },
+	{ text: '✓ Task complete  duration=14.2s  tokens=3,847  cost=$0.012', color: 'text-cream/70', delay: 7000 },
+	{ text: '  → Preview: http://localhost:3000', color: 'text-cream/55', delay: 7300 },
 	{ text: '', delay: 7600 },
-	{ text: '● Listening for new sessions...', color: 'text-blue-600', delay: 7800 },
+	{ text: '● Listening for new sessions...', color: 'text-cream/85', delay: 7800 },
 ];
 
 const FakeTerminal = () => {
@@ -605,35 +609,35 @@ const FakeTerminal = () => {
 	}, [visibleCount, typedText]);
 
 	return (
-		<div className='overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-lg'>
-			<div className='flex items-center gap-2 border-b border-zinc-100 px-4 py-3'>
-				<div className='h-3 w-3 rounded-full bg-zinc-200' />
-				<div className='h-3 w-3 rounded-full bg-zinc-200' />
-				<div className='h-3 w-3 rounded-full bg-zinc-200' />
-				<span className='ml-2 text-xs text-zinc-400'>terminal</span>
+		<InkPanel>
+			<div className='flex items-center gap-2 border-b border-cream/10 px-4 py-3'>
+				<div className='h-3 w-3 rounded-full bg-cream/15' />
+				<div className='h-3 w-3 rounded-full bg-cream/15' />
+				<div className='h-3 w-3 rounded-full bg-cream/15' />
+				<span className='ml-2 font-mono text-xs text-cream/45'>terminal</span>
 			</div>
 			<div
 				ref={scrollRef}
 				className='h-[360px] overflow-y-auto p-4 font-mono text-[11px] leading-relaxed md:h-[420px] md:text-xs'
 			>
 				{terminalLines.slice(0, visibleCount).map((line, i) => (
-					<div key={i} className={`${line.color || 'text-zinc-400'} whitespace-pre-wrap`}>
+					<div key={i} className={`${line.color || 'text-cream/45'} whitespace-pre-wrap`}>
 						{line.text || '\u00A0'}
 					</div>
 				))}
 				{isTyping && (
-					<div className={`${terminalLines[visibleCount]?.color || 'text-zinc-400'} whitespace-pre-wrap`}>
+					<div className={`${terminalLines[visibleCount]?.color || 'text-cream/45'} whitespace-pre-wrap`}>
 						{typedText}
 						<span className='animate-pulse'>▌</span>
 					</div>
 				)}
 				{visibleCount >= terminalLines.length && (
-					<div className='text-zinc-400'>
+					<div className='text-cream/45'>
 						<span className='animate-pulse'>▌</span>
 					</div>
 				)}
 			</div>
-		</div>
+		</InkPanel>
 	);
 };
 
@@ -681,17 +685,26 @@ const HeroTabs = ({ tabs, activeTab, onTabChange }: { tabs: HeroTabEntry[]; acti
 		el.scrollBy({ left: direction === 'left' ? -amount : amount, behavior: 'smooth' });
 	};
 
+	// Fade the tab strip into the porcelain with a content mask rather than a
+	// solid-color overlay. A flat overlay would cover the page grain and read as
+	// an odd lighter band; masking the content lets the grain show through.
+	const maskImage =
+		canScrollLeft || canScrollRight
+			? `linear-gradient(to right, ${canScrollLeft ? 'transparent 0, #000 6rem' : '#000 0'}, ${canScrollRight ? '#000 calc(100% - 6rem), transparent 100%' : '#000 100%'})`
+			: undefined;
+	const maskStyle = maskImage ? { maskImage, WebkitMaskImage: maskImage } : undefined;
+
 	return (
 		<div className='relative mb-4 overflow-hidden'>
 			{/* Left fade + arrow */}
 			{canScrollLeft && (
 				<div
-					className='absolute inset-y-0 left-0 z-20 flex w-20 items-center justify-start bg-gradient-to-r from-white from-30% via-white/70 via-60% to-transparent'
+					className='pointer-events-none absolute inset-y-0 left-0 z-20 flex w-12 items-center justify-start'
 				>
 					<button
 						type='button'
 						onClick={() => scroll('left')}
-						className='ml-1 flex h-8 w-8 items-center justify-center rounded-full text-zinc-500 hover:text-zinc-800'
+						className='pointer-events-auto ml-1 flex h-8 w-8 items-center justify-center rounded-full text-ink-faint hover:text-ink'
 						aria-label='Scroll tabs left'
 					>
 						<ChevronLeft className='h-4 w-4' />
@@ -700,8 +713,8 @@ const HeroTabs = ({ tabs, activeTab, onTabChange }: { tabs: HeroTabEntry[]; acti
 			)}
 
 			{/* Scrollable tabs */}
-			<div ref={scrollRef} className='scrollbar-hide overflow-x-auto'>
-				<div className='flex min-w-max flex-nowrap items-center justify-start gap-1.5 px-1'>
+			<div ref={scrollRef} className='scrollbar-hide overflow-x-auto' style={maskStyle}>
+				<div className='flex min-w-max flex-nowrap items-center justify-start gap-1'>
 					{tabs.map((tab, idx) => {
 						const LucideIcon = tab.icon;
 						return (
@@ -709,16 +722,16 @@ const HeroTabs = ({ tabs, activeTab, onTabChange }: { tabs: HeroTabEntry[]; acti
 								key={tab.label}
 								type='button'
 								onClick={() => onTabChange(idx)}
-								className='relative inline-flex shrink-0 items-center gap-1.5 rounded-lg px-4 py-1.5 text-xs whitespace-nowrap transition-colors md:px-5 md:text-sm'
+								className='relative inline-flex shrink-0 items-center gap-2 whitespace-nowrap rounded-lg px-3 py-1.5 font-mono text-xs transition-colors md:px-4'
 							>
 								{activeTab === idx && (
 									<motion.div
-										layoutId='activeTab'
-										className='absolute inset-0 rounded-lg bg-zinc-200'
+										layoutId='heroTabIndicator'
+										className='absolute inset-0 rounded-lg bg-ink/[0.07]'
 										transition={{ type: 'spring', bounce: 0.2, duration: 0.4 }}
 									/>
 								)}
-								<span className={`relative z-10 flex items-center gap-2 ${activeTab === idx ? 'text-zinc-900' : 'text-zinc-500 hover:text-zinc-700'}`}>
+								<span className={`relative z-10 flex items-center gap-2 ${activeTab === idx ? 'font-medium text-ink' : 'text-ink-soft hover:text-ink'}`}>
 									{tab.faIcon ? (
 										<Icon icon={tab.faIcon} className='h-4 w-4' />
 									) : LucideIcon ? (
@@ -735,12 +748,12 @@ const HeroTabs = ({ tabs, activeTab, onTabChange }: { tabs: HeroTabEntry[]; acti
 			{/* Right fade + arrow */}
 			{canScrollRight && (
 				<div
-					className='absolute inset-y-0 right-0 z-20 flex w-20 items-center justify-end bg-gradient-to-l from-white from-30% via-white/70 via-60% to-transparent'
+					className='pointer-events-none absolute inset-y-0 right-0 z-20 flex w-12 items-center justify-end'
 				>
 					<button
 						type='button'
 						onClick={() => scroll('right')}
-						className='mr-1 flex h-8 w-8 items-center justify-center rounded-full text-zinc-500 hover:text-zinc-800'
+						className='pointer-events-auto mr-1 flex h-8 w-8 items-center justify-center rounded-full text-ink-faint hover:text-ink'
 						aria-label='Scroll tabs right'
 					>
 						<ChevronRight className='h-4 w-4' />
@@ -828,7 +841,7 @@ const Hero = ({ heroTabs }: { heroTabs: HeroTabCode[] }) => {
 				>
 					<div className='relative'>
 						<AnimatedAgentOSLogo className='h-12 w-auto md:h-16 lg:h-20' displayedAgent={displayedAgent} />
-						<span className='absolute -right-[8px] -top-[7px] rounded-full border border-zinc-900 bg-white px-2 py-0.5 text-[10px] font-medium text-zinc-900'>Beta</span>
+						<span className='absolute -right-[8px] -top-[7px] rounded-full border border-ink bg-paper px-2 py-0.5 text-[10px] font-medium text-ink'>Beta</span>
 					</div>
 				</motion.div>
 
@@ -837,7 +850,7 @@ const Hero = ({ heroTabs }: { heroTabs: HeroTabCode[] }) => {
 					initial={{ opacity: 0, y: 20 }}
 					animate={{ opacity: 1, y: 0 }}
 					transition={{ duration: 0.5, delay: 0.1 }}
-					className='mb-10 max-w-2xl text-center text-base text-zinc-500 md:text-left md:text-lg'
+					className='mb-10 max-w-2xl text-center text-base text-ink-soft md:text-left md:text-lg'
 				>
 					A portable open-source operating system for agents. ~6 ms coldstarts, 32x cheaper than sandboxes. Powered by WebAssembly and V8 isolates.
 				</motion.p>
@@ -849,21 +862,21 @@ const Hero = ({ heroTabs }: { heroTabs: HeroTabCode[] }) => {
 					transition={{ duration: 0.5, delay: 0.12 }}
 					className='mb-10 flex flex-wrap items-center justify-center gap-2 md:justify-start md:gap-4'
 				>
-					<span className='text-xs text-zinc-400 uppercase tracking-wider'>Works with</span>
+					<span className='font-mono text-[11px] uppercase tracking-[0.16em] text-ink-faint'>Works with</span>
 					<div className='flex flex-wrap items-center justify-center gap-2 md:justify-start md:gap-4'>
 						{agents.map((agent) => (
 							<div
 								key={agent.name}
-								className='flex cursor-pointer items-center gap-1.5 rounded-md px-2 py-1 transition-colors hover:bg-zinc-100'
+								className='flex cursor-pointer items-center gap-1.5 rounded-md px-2 py-1 transition-colors hover:bg-ink/5'
 								onMouseEnter={() => autoPlayComplete && setHoveredAgent(agent)}
 								onMouseLeave={() => autoPlayComplete && setHoveredAgent(null)}
 							>
 								<img src={agent.src} alt={agent.name} className='h-4 w-4' />
-								<span className='text-sm text-zinc-500'>{agent.name}{agent.comingSoon && '*'}</span>
+								<span className='text-sm text-ink-soft'>{agent.name}{agent.comingSoon && '*'}</span>
 							</div>
 						))}
 					</div>
-					<span className='text-xs text-zinc-400'>*Coming Soon</span>
+					<span className='text-xs text-ink-faint'>*Coming Soon</span>
 				</motion.div>
 
 				{/* Code snippets */}
@@ -913,7 +926,7 @@ const Hero = ({ heroTabs }: { heroTabs: HeroTabCode[] }) => {
 				>
 					<a
 						href='/docs/agent-os'
-						className='selection-dark inline-flex w-full items-center justify-center gap-2 whitespace-nowrap rounded-md bg-zinc-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-zinc-700 sm:w-auto'
+						className='selection-dark inline-flex w-full items-center justify-center gap-2 whitespace-nowrap rounded-md bg-accent-deep px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent sm:w-auto'
 					>
 						Read the Docs
 						<ArrowRight className='h-4 w-4' />
@@ -922,7 +935,7 @@ const Hero = ({ heroTabs }: { heroTabs: HeroTabCode[] }) => {
 					<div className='flex-1' />
 					<a
 						href='/agent-os/registry'
-						className='inline-flex items-center gap-2 whitespace-nowrap text-sm text-zinc-500 transition-colors hover:text-zinc-900'
+						className='inline-flex items-center gap-2 whitespace-nowrap text-sm text-ink-soft transition-colors hover:text-ink'
 					>
 						<Package className='h-4 w-4' />
 						View Package Registry
@@ -957,21 +970,21 @@ const FeatureCard = ({
 		whileInView={{ opacity: 1, y: 0 }}
 		viewport={{ once: true }}
 		transition={{ duration: 0.5, delay }}
-		className='border-t border-zinc-200 pt-6'
+		className='border-t border-ink/10 pt-6'
 	>
-		<div className='mb-3 text-zinc-500'>
+		<div className='mb-3 text-ink-soft'>
 			<IconComponent className='h-4 w-4' />
 		</div>
-		<h3 className='mb-2 text-base font-normal text-zinc-900'>
+		<h3 className='mb-2 text-base font-medium text-ink'>
 			{title}
 		</h3>
-		<p className='mb-4 text-sm leading-relaxed text-zinc-500'>{description}</p>
+		<p className='mb-4 text-sm leading-relaxed text-ink-soft'>{description}</p>
 		{tags && (
 			<div className='flex flex-wrap gap-2'>
 				{tags.map((tag) => (
 					<span
 						key={tag}
-						className='rounded bg-zinc-100 px-2.5 py-1 font-mono text-xs text-zinc-500'
+						className='rounded bg-ink/5 px-2.5 py-1 font-mono text-xs text-ink-soft'
 					>
 						{tag}
 					</span>
@@ -980,10 +993,10 @@ const FeatureCard = ({
 		)}
 		{metric && (
 			<div className='flex items-baseline gap-2'>
-				<span className='font-mono text-3xl font-normal text-zinc-900'>
+				<span className='font-mono text-3xl font-medium text-ink'>
 					{metric.value}
 				</span>
-				<span className='text-sm text-zinc-500'>{metric.label}</span>
+				<span className='text-sm text-ink-soft'>{metric.label}</span>
 			</div>
 		)}
 	</motion.div>
@@ -992,7 +1005,7 @@ const FeatureCard = ({
 const DocsLink = ({ href }: { href: string }) => (
 	<a
 		href={href}
-		className='inline-flex items-center gap-1 text-sm text-zinc-500 transition-colors hover:text-zinc-900'
+		className='inline-flex items-center gap-1 text-sm text-ink-soft transition-colors hover:text-ink'
 	>
 		Docs <span aria-hidden='true'>→</span>
 	</a>
@@ -1000,7 +1013,7 @@ const DocsLink = ({ href }: { href: string }) => (
 
 // --- Icon Box (rounded square outline like Rivet/agentOS logos) ---
 const IconBox = ({ children }: { children: React.ReactNode }) => (
-	<div className='relative mb-6 flex h-10 w-10 items-center justify-center md:h-12 md:w-12'>
+	<div className='relative mb-6 flex h-10 w-10 items-center justify-center text-ink-soft md:h-12 md:w-12'>
 		<svg
 			className='absolute inset-0 h-full w-full'
 			viewBox='0 0 172 172'
@@ -1134,13 +1147,13 @@ const StackingFeatureCards = () => {
 	];
 
 	return (
-		<section ref={sectionRef} className='border-t border-zinc-200'>
+		<section ref={sectionRef} className='border-t border-ink/10'>
 			{/* Fade gradient overlay at bottom - only show when section is in view */}
 			{isInView && (
 				<div
 					className='pointer-events-none fixed bottom-0 left-0 right-0 z-20 h-64'
 					style={{
-						background: 'linear-gradient(to top, white 0%, white 20%, transparent 100%)',
+						background: 'linear-gradient(to top, #EFEFEF 0%, #EFEFEF 20%, transparent 100%)',
 					}}
 				/>
 			)}
@@ -1153,7 +1166,7 @@ const StackingFeatureCards = () => {
 					whileInView={{ opacity: 1, y: 0 }}
 					viewport={{ once: true }}
 					transition={{ duration: 0.5 }}
-					className='mx-auto max-w-4xl text-center text-3xl font-normal tracking-tight text-zinc-900 md:text-5xl'
+					className='mx-auto max-w-4xl text-center text-3xl font-medium tracking-[-0.015em] text-ink md:text-5xl'
 				>
 					Meet your agent&apos;s new operating system.
 				</motion.h2>
@@ -1176,23 +1189,22 @@ const StackingFeatureCards = () => {
 									}}
 								>
 									<div
-										className='mb-6 flex min-h-0 flex-col rounded-2xl border border-zinc-200 bg-zinc-50 p-8 shadow-2xl md:p-12'
+										className='mb-6 flex min-h-0 flex-col rounded-2xl border border-ink/15 bg-paper-mid p-8 md:p-12'
 										style={{
 											minHeight: `${CARD_HEIGHT - 24}px`,
-											boxShadow: '0 -20px 60px rgba(0, 0, 0, 0.08), 0 -4px 30px rgba(0, 0, 0, 0.04)',
 										}}
 									>
 										<IconBox>
-											<Icon className='h-4 w-4 text-zinc-900 md:h-5 md:w-5' />
+											<Icon className='h-4 w-4 text-ink-soft md:h-5 md:w-5' />
 										</IconBox>
-										<h2 className='mb-4 text-2xl font-normal tracking-tight text-zinc-900 md:text-4xl'>
+										<h2 className='mb-4 text-3xl font-medium tracking-[-0.015em] text-ink md:text-4xl'>
 											{feature.title}
 										</h2>
-										<p className='mb-4 max-w-2xl text-base leading-relaxed text-zinc-500 md:text-lg'>
+										<p className='mb-4 max-w-2xl text-base leading-relaxed text-ink-soft md:text-lg'>
 											{feature.description}
 										</p>
 										{feature.detail && (
-											<p className='mb-6 max-w-2xl text-sm leading-relaxed text-zinc-500 md:text-base'>
+											<p className='mb-6 max-w-2xl text-sm leading-relaxed text-ink-soft md:text-base'>
 												{feature.detail}
 											</p>
 										)}
@@ -1201,7 +1213,8 @@ const StackingFeatureCards = () => {
 												{feature.tags.map((tag) => (
 													<span
 														key={tag}
-														className='rounded-full border border-zinc-200 bg-zinc-100 px-4 py-1.5 font-mono text-sm text-zinc-500'
+														onMouseMove={handleGlowPillMouseMove}
+														className={`${GLOW_PILL_CLASS} rounded-full border border-ink/10 bg-white/55 px-4 py-1.5 font-mono text-sm text-ink-soft`}
 													>
 														{tag}
 													</span>
@@ -1212,10 +1225,10 @@ const StackingFeatureCards = () => {
 											<div className='grid grid-cols-2 gap-8 md:gap-12'>
 												{feature.metrics.map((m) => (
 													<div key={m.value} className='flex flex-col'>
-														<span className='font-mono text-5xl font-normal text-zinc-900 md:text-7xl'>
+														<span className='font-mono text-5xl font-medium text-ink md:text-7xl'>
 															{m.value}
 														</span>
-														<span className='mt-2 text-sm text-zinc-500 md:text-base'>{m.label}</span>
+														<span className='mt-2 text-sm text-ink-soft md:text-base'>{m.label}</span>
 													</div>
 												))}
 											</div>
@@ -1262,33 +1275,44 @@ const FeatureCardCarousel = ({ section }: { section: ThemedSection }) => {
 		el.scrollBy({ left: dir === 'left' ? -cardWidth - 16 : cardWidth + 16, behavior: 'smooth' });
 	};
 
+	// Fade the row's edges wherever a card is cut off, so partially visible
+	// cards dissolve into the page instead of being hard-clipped.
+	const maskImage =
+		canScrollLeft && canScrollRight
+			? 'linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent)'
+			: canScrollRight
+				? 'linear-gradient(to right, #000 calc(100% - 56px), transparent)'
+				: canScrollLeft
+					? 'linear-gradient(to right, transparent, #000 56px, #000)'
+					: undefined;
+
 	return (
 		<div>
 			{/* Cards */}
 			<div
 				ref={scrollRef}
 				className='-mx-6 flex gap-4 overflow-x-auto px-6 pb-4 scrollbar-hide'
-				style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
+				style={{ scrollbarWidth: 'none', msOverflowStyle: 'none', WebkitMaskImage: maskImage, maskImage }}
 			>
 				{section.features.map((feature) => {
 					const Icon = feature.icon;
 						return (
 							<div
 								key={feature.title}
-								className='relative flex w-[280px] flex-shrink-0 flex-col rounded-2xl bg-zinc-50 p-6'
+								className='relative flex w-[280px] flex-shrink-0 flex-col rounded-2xl border border-ink/10 bg-white/55 p-6'
 							>
 							{feature.comingSoon && (
-								<span className='absolute top-4 right-4 rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-medium text-amber-700'>
+								<span className='absolute top-4 right-4 rounded-full border border-ink/10 bg-ink/5 px-2 py-0.5 text-[10px] font-medium text-ink-soft'>
 									Coming Soon
 								</span>
 							)}
-							<div className='mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-zinc-200/60'>
-								<Icon className='h-5 w-5 text-zinc-600' />
+							<div className='mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-ink/5'>
+								<Icon className='h-5 w-5 text-ink-soft' />
 							</div>
-							<h3 className='mb-2 text-sm font-semibold text-zinc-900'>
+							<h3 className='mb-2 text-sm font-medium text-ink'>
 								{feature.title}
 							</h3>
-								<p className='text-sm leading-relaxed text-zinc-500'>
+								<p className='text-sm leading-relaxed text-ink-soft'>
 									{feature.description}
 								</p>
 								{feature.docsHref && (
@@ -1308,8 +1332,8 @@ const FeatureCardCarousel = ({ section }: { section: ThemedSection }) => {
 					disabled={!canScrollLeft}
 					className={`flex h-9 w-9 items-center justify-center rounded-xl border transition-colors ${
 						canScrollLeft
-							? 'border-zinc-300 text-zinc-900 hover:bg-zinc-100'
-							: 'border-zinc-200 text-zinc-300 cursor-default'
+							? 'border-ink/20 text-ink hover:border-ink/40'
+							: 'border-ink/10 text-ink/25 cursor-default'
 					}`}
 				>
 					<ChevronLeft className='h-4 w-4' />
@@ -1319,8 +1343,8 @@ const FeatureCardCarousel = ({ section }: { section: ThemedSection }) => {
 					disabled={!canScrollRight}
 					className={`flex h-9 w-9 items-center justify-center rounded-xl border transition-colors ${
 						canScrollRight
-							? 'border-zinc-300 text-zinc-900 hover:bg-zinc-100'
-							: 'border-zinc-200 text-zinc-300 cursor-default'
+							? 'border-ink/20 text-ink hover:border-ink/40'
+							: 'border-ink/10 text-ink/25 cursor-default'
 					}`}
 				>
 					<ChevronRight className='h-4 w-4' />
@@ -1335,7 +1359,7 @@ const ThemedFeatureSections = () => (
 		{themedSections.map((section) => (
 			<section
 				key={section.category}
-				className='border-t border-zinc-200 px-6 py-24 md:py-40'
+				className='border-t border-ink/10 px-6 py-24 md:py-40'
 			>
 				<div className='mx-auto max-w-7xl'>
 					{/* Section header */}
@@ -1346,10 +1370,10 @@ const ThemedFeatureSections = () => (
 						transition={{ duration: 0.6 }}
 						className='mb-10'
 					>
-						<h2 className='mb-4 text-3xl font-normal tracking-tight text-zinc-900 md:text-5xl lg:text-6xl'>
+						<h2 className='mb-4 text-3xl font-medium tracking-[-0.015em] text-ink md:text-5xl lg:text-6xl'>
 							{section.title}
 						</h2>
-						<p className='max-w-xl text-base text-zinc-500 md:text-lg'>
+						<p className='max-w-xl text-base text-ink-soft md:text-lg'>
 							{section.subtitle}
 						</p>
 					</motion.div>
@@ -1370,36 +1394,120 @@ const ThemedFeatureSections = () => (
 );
 
 // --- agentOS Features Section ---
+const REGISTRY_TYPE_LABELS: Record<string, string> = {
+  agent: 'Agent',
+  'file-system': 'File System',
+  'sandbox-extension': 'Sandbox',
+  software: 'Software',
+  tool: 'Tool',
+};
+
+// Two marquee rows of registry apps, logo-bearing entries split into
+// opposing-direction tracks. Pulled live from the registry so titles, icons,
+// and status stay in sync.
+const REGISTRY_ROW_A = ['pi', 's3', 'google-drive', 'postgres', 'docker', 'e2b', 'modal', 'vercel'];
+const REGISTRY_ROW_B = ['claude-code', 'codex', 'opencode', 'amp', 'sqlite', 'daytona', 'browserbase', 'computesdk'];
+const pickRegistry = (slugs: string[]) =>
+  slugs
+    .map((slug) => registry.find((entry) => entry.slug === slug))
+    .filter((entry): entry is (typeof registry)[number] => entry !== undefined);
+const registryRowA = pickRegistry(REGISTRY_ROW_A);
+const registryRowB = pickRegistry(REGISTRY_ROW_B);
+
+const RegistryAppTile = ({ entry, hidden }: { entry: (typeof registry)[number]; hidden?: boolean }) => {
+  const available = entry.status === 'available';
+  const category = REGISTRY_TYPE_LABELS[entry.types[0]] ?? 'Integration';
+  return (
+    <a
+      href={`/agent-os/registry/${entry.slug}`}
+      aria-hidden={hidden}
+      tabIndex={hidden ? -1 : undefined}
+      className='group/tile flex w-64 shrink-0 items-center gap-3.5 rounded-xl border border-ink/10 bg-white/55 p-3 transition-colors hover:border-ink/25 hover:bg-white/80'
+    >
+      <div className='flex h-12 w-12 shrink-0 items-center justify-center rounded-xl border border-ink/10 bg-ink/5'>
+        {entry.image ? (
+          <img src={entry.image} alt={entry.title} width={26} height={26} className='object-contain' />
+        ) : entry.icon ? (
+          <Icon icon={entry.icon} style={{ width: 24, height: 24 }} className='text-ink' />
+        ) : (
+          <span className='font-mono text-base font-medium text-ink-soft'>{entry.title.charAt(0)}</span>
+        )}
+      </div>
+      <div className='min-w-0 flex-1'>
+        <h4 className='truncate text-sm font-medium text-ink'>{entry.title}</h4>
+        <p className='truncate text-xs text-ink-faint'>{category}</p>
+      </div>
+      <span
+        className={`shrink-0 rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-wide transition-colors ${
+          available
+            ? 'border-ink/15 text-ink-soft group-hover/tile:border-ink group-hover/tile:bg-ink group-hover/tile:text-cream'
+            : 'border-ink/10 text-ink-faint'
+        }`}
+      >
+        {available ? 'Get' : 'Soon'}
+      </span>
+    </a>
+  );
+};
+
+const RegistryMarqueeRow = ({
+  apps,
+  direction,
+}: {
+  apps: (typeof registry)[number][];
+  direction: 'left' | 'right';
+}) => (
+  <div className='group relative overflow-hidden [-webkit-mask-image:linear-gradient(to_right,transparent,#000_6%,#000_94%,transparent)] [mask-image:linear-gradient(to_right,transparent,#000_6%,#000_94%,transparent)]'>
+    <div
+      className={`flex w-max gap-3 ${
+        direction === 'left'
+          ? 'animate-[registry-marquee-left_46s_linear_infinite]'
+          : 'animate-[registry-marquee-right_46s_linear_infinite]'
+      } group-hover:[animation-play-state:paused] motion-reduce:animate-none`}
+    >
+      {[...apps, ...apps].map((entry, i) => (
+        <RegistryAppTile key={`${entry.slug}-${i}`} entry={entry} hidden={i >= apps.length} />
+      ))}
+    </div>
+  </div>
+);
+
 const RegistryCallout = () => (
-	<section className='border-t border-zinc-200 px-6 py-24 md:py-40'>
-		<div className='mx-auto max-w-7xl'>
-			<motion.div
-				initial={{ opacity: 0, y: 20 }}
-				whileInView={{ opacity: 1, y: 0 }}
-				viewport={{ once: true }}
-				transition={{ duration: 0.5 }}
-				className='rounded-xl border border-zinc-200 bg-zinc-50 p-8 md:p-12'
-			>
-				<div className='flex flex-col items-start gap-6 md:flex-row md:items-center md:justify-between'>
-					<div>
-						<h3 className='mb-2 text-2xl font-normal tracking-tight text-zinc-900 md:text-3xl'>
-							agentOS Registry
-						</h3>
-						<p className='max-w-lg text-base leading-relaxed text-zinc-500'>
-							Browse and install pre-built tools, integrations, and capabilities for your agents. From file systems to databases to API connectors.
-						</p>
-					</div>
-					<a
-						href='/agent-os/registry'
-						className='selection-dark inline-flex flex-shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md bg-zinc-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-zinc-700'
-					>
-						Explore the Registry
-						<ArrowRight className='h-4 w-4' />
-					</a>
-				</div>
-			</motion.div>
-		</div>
-	</section>
+  <section className='border-t border-ink/10 px-6 py-24 md:py-40'>
+    <div className='mx-auto max-w-7xl'>
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.5 }}
+        className='overflow-hidden rounded-2xl border border-ink/10 bg-white/55 p-6 md:p-10'
+      >
+        <div className='mb-8 max-w-2xl'>
+          <h3 className='mb-2 text-2xl font-medium tracking-[-0.015em] text-ink md:text-3xl'>
+            agentOS Registry
+          </h3>
+          <p className='text-base leading-relaxed text-ink-soft'>
+            A marketplace for agent capabilities. Browse and install pre-built tools, integrations, file systems, databases, and sandboxes &mdash; one command away.
+          </p>
+        </div>
+
+        <div className='flex flex-col gap-3'>
+          <RegistryMarqueeRow apps={registryRowA} direction='left' />
+          <RegistryMarqueeRow apps={registryRowB} direction='right' />
+        </div>
+
+        <div className='mt-8 flex items-center justify-end border-t border-ink/10 pt-5'>
+          <a
+            href='/agent-os/registry'
+            className='selection-dark inline-flex flex-shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md bg-ink px-4 py-2 text-sm font-medium text-cream transition-colors hover:bg-ink/85'
+          >
+            Explore the Registry
+            <ArrowRight className='h-4 w-4' />
+          </a>
+        </div>
+      </motion.div>
+    </div>
+  </section>
 );
 
 const AgentOSFeatures = () => (
@@ -1411,200 +1519,286 @@ const AgentOSFeatures = () => (
 );
 
 // --- Benchmarks ---
-const BENCH_ACCENT = '#18181b';
-const BENCH_ACCENT_LIGHT = '#3f3f46';
-
 // Benchmark data (computed from raw inputs in bench.ts)
-import { benchColdStart, benchWorkloads, SANDBOX_COLDSTART_PROVIDER, SANDBOX_COST_PROVIDER, type WorkloadKey } from '@/data/bench';
+import { benchColdStart, benchWorkloads, BENCHMARK_DATE, SANDBOX_COLDSTART_PROVIDER, SANDBOX_COST_PROVIDER, type WorkloadKey } from '@/data/bench';
 
 function BenchInfoTooltip({ children }: { children: React.ReactNode }) {
+	// The wrapper is intentionally not positioned so the tooltip spans the ink
+	// card itself (the nearest positioned ancestor) instead of clipping at the
+	// panel's overflow-hidden edge.
 	return (
-		<span className='group/tip relative ml-1.5 inline-flex align-middle'>
+		<span className='group/tip ml-1.5 inline-flex align-middle'>
 			<svg
-				className='h-3.5 w-3.5 cursor-help text-zinc-600 transition-colors group-hover/tip:text-zinc-500'
+				className='h-3.5 w-3.5 cursor-help text-cream/35 transition-colors group-hover/tip:text-cream/70'
 				viewBox='0 0 16 16'
 				fill='currentColor'
 			>
 				<path d='M8 0a8 8 0 100 16A8 8 0 008 0zm1 12H7V7h2v5zm-1-6a1 1 0 110-2 1 1 0 010 2z' />
 			</svg>
-			<span className='pointer-events-none absolute bottom-full left-0 z-50 mb-2 w-80 rounded-lg border border-zinc-200 bg-white/95 p-3 text-[11px] leading-relaxed text-zinc-600 opacity-0 shadow-xl backdrop-blur-sm transition-opacity duration-200 group-hover/tip:pointer-events-auto group-hover/tip:opacity-100 [&_a]:text-zinc-900 [&_a]:underline [&_a]:underline-offset-2 [&_strong]:font-medium [&_strong]:text-zinc-800'>
+			<span className='pointer-events-none absolute inset-x-3 bottom-12 z-50 rounded-lg border border-cream/15 bg-ink p-3 text-left text-[11px] leading-relaxed text-cream/80 opacity-0 shadow-xl transition-opacity duration-200 group-hover/tip:pointer-events-auto group-hover/tip:opacity-100 [&_a]:text-cream [&_a]:underline [&_a]:underline-offset-2 [&_strong]:font-medium [&_strong]:text-cream'>
 				{children}
 			</span>
 		</span>
 	);
 }
 
+function BenchToggle({ options, active, onChange }: { options: string[]; active: number; onChange: (idx: number) => void }) {
+  const layoutId = useId();
+  const columns = options.length === 3 ? 'grid-cols-3' : 'grid-cols-2';
+
+  return (
+    <div className={`grid w-full gap-1 rounded-lg border border-cream/10 bg-cream/[0.03] p-1 ${columns}`}>
+      {options.map((label, i) => {
+        const isActive = i === active;
+        return (
+          <motion.button
+            key={label}
+            type='button'
+            onClick={() => onChange(i)}
+            aria-pressed={isActive}
+            whileTap={{ scale: 0.94 }}
+            className={`relative flex h-7 min-w-0 items-center justify-center rounded-md px-1.5 text-center font-mono text-[10px] uppercase tracking-[0.12em] transition-colors ${
+              isActive ? 'text-ink' : 'text-cream/45 hover:text-cream/75'
+            }`}
+          >
+            {isActive && (
+              <motion.span
+                layoutId={`bench-toggle-${layoutId}`}
+                className='absolute inset-0 rounded-md bg-cream'
+                transition={{ type: 'spring', stiffness: 480, damping: 38 }}
+              />
+            )}
+            <span className='relative z-[1] truncate'>{label}</span>
+          </motion.button>
+        );
+      })}
+    </div>
+  );
+}
+
+interface BenchRowEntry {
+	label: React.ReactNode;
+	value: string;
+	highlight?: boolean;
+}
+
+// Splits a stat string into a leading symbol prefix, the numeric portion, and a
+// trailing unit suffix so the number can be counted up while the units stay put.
+// Returns null when there is no number to animate (e.g. "Infinite").
+function parseStatNumber(text: string) {
+	const match = text.match(/^([^\d-]*)(-?[\d,]*\.?\d+)(.*)$/);
+	if (!match) return null;
+	const [, prefix, rawNumber, suffix] = match;
+	const normalized = rawNumber.replace(/,/g, '');
+	const decimals = normalized.includes('.') ? normalized.split('.')[1].length : 0;
+	return {
+		prefix,
+		suffix,
+		value: Number.parseFloat(normalized),
+		decimals,
+		grouped: rawNumber.includes(','),
+	};
+}
+
+// Counts the numeric part of a stat from 0 up to its value. The first run is
+// gated on `active` (the card scrolling into view) and only fires once; later
+// value changes (toggling workload or tier) re-trigger the count from the
+// previous value. Honors reduced-motion by rendering the final value outright.
+function CountUpStat({ text, active }: { text: string; active: boolean }) {
+	const parsed = useMemo(() => parseStatNumber(text), [text]);
+	const reducedMotion = useReducedMotion();
+	const target = parsed?.value ?? 0;
+
+	const [display, setDisplay] = useState(0);
+	const startedRef = useRef(false);
+	const fromRef = useRef(0);
+	const rafRef = useRef(0);
+
+	useEffect(() => {
+		if (!parsed) return;
+		if (reducedMotion) {
+			setDisplay(target);
+			fromRef.current = target;
+			startedRef.current = true;
+			return;
+		}
+		// Not yet scrolled into view: stay primed at zero for the first count-up.
+		if (!active) {
+			if (!startedRef.current) setDisplay(0);
+			return;
+		}
+		const from = startedRef.current ? fromRef.current : 0;
+		startedRef.current = true;
+		const duration = 850;
+		let start = 0;
+		const step = (now: number) => {
+			if (!start) start = now;
+			const t = Math.min(1, (now - start) / duration);
+			const eased = 1 - (1 - t) ** 3;
+			setDisplay(from + (target - from) * eased);
+			if (t < 1) {
+				rafRef.current = requestAnimationFrame(step);
+			} else {
+				fromRef.current = target;
+			}
+		};
+		rafRef.current = requestAnimationFrame(step);
+		return () => cancelAnimationFrame(rafRef.current);
+	}, [parsed, target, active, reducedMotion]);
+
+	if (!parsed) return <>{text}</>;
+
+	const formatted = parsed.grouped
+		? display.toLocaleString(undefined, {
+				minimumFractionDigits: parsed.decimals,
+				maximumFractionDigits: parsed.decimals,
+			})
+		: display.toFixed(parsed.decimals);
+
+	return (
+		<span className='tabular-nums'>
+			{parsed.prefix}
+			{formatted}
+			{parsed.suffix}
+		</span>
+	);
+}
+
+// Dark ink data card with a mono title, direction tag, headline stat,
+// and label/value rows pinned to the card's foot.
+function BenchCard({
+  title,
+  statNote,
+  verb,
+  toggle,
+  rows,
+  note,
+}: {
+  title: string;
+  statNote: string;
+  verb: string;
+  toggle?: React.ReactNode;
+  rows: BenchRowEntry[];
+  note?: string;
+}) {
+  // Trigger the count-up the first time the card scrolls into view, once.
+  const [inView, setInView] = useState(false);
+
+  return (
+    <InkPanel className='h-full'>
+      <motion.div
+        className='flex h-full flex-col p-6 md:p-7'
+        onViewportEnter={() => setInView(true)}
+        viewport={{ once: true, margin: '-10% 0px' }}
+      >
+        {/* Eyebrow rail */}
+        <div className='flex min-h-[2.5rem] items-start justify-between gap-3'>
+          <span className='font-mono text-[11px] font-medium uppercase tracking-[0.18em] text-sage'>{title}</span>
+          <span className='inline-flex shrink-0 items-center gap-1 whitespace-nowrap font-mono text-[10px] uppercase tracking-[0.12em] text-cream/40'>
+            <ArrowDown className='h-3 w-3 flex-shrink-0' />
+            lower is better
+          </span>
+        </div>
+
+        {/* Verdict: the headline multiplier */}
+        <div className='mt-5 flex items-baseline gap-2'>
+          <span className='font-sans text-[2.75rem] font-medium leading-[1.0] tracking-[-0.02em] tabular-nums text-cream md:text-5xl'>
+            <CountUpStat text={statNote} active={inView} />
+          </span>
+          <span className='font-sans text-lg font-medium text-cream/45 md:text-xl'>{verb}</span>
+        </div>
+
+        {/* Comparison ledger: ours vs theirs, same unit, right-aligned */}
+        <div className='mb-6 mt-6 divide-y divide-cream/10 border-y border-cream/10'>
+          {rows.map((row, i) => (
+            <div key={i} className='flex items-baseline justify-between gap-4 py-2.5'>
+              <span className={`inline-flex min-w-0 items-baseline font-mono text-[13px] ${row.highlight ? 'font-medium text-cream' : 'font-normal text-cream/45'}`}>
+                {row.label}
+              </span>
+              <span className={`whitespace-nowrap font-mono text-[15px] tabular-nums ${row.highlight ? 'font-medium text-sage' : 'font-normal text-cream/45'}`}>
+                {row.value}
+              </span>
+            </div>
+          ))}
+        </div>
+
+        {toggle}
+        {note ? (
+          <p className='mt-auto font-mono text-[10px] leading-relaxed text-cream/35'>{note}</p>
+        ) : null}
+      </motion.div>
+    </InkPanel>
+  );
+}
+
 function BenchColdStartChart() {
 	const groups = benchColdStart;
 	const [active, setActive] = useState(2);
 	const g = groups[active];
-	const pct = Math.max((g.agentOS / g.sandbox) * 100, 1);
 
 	return (
-		<motion.div
-			className='space-y-4'
-			initial='hidden'
-			whileInView='visible'
-			viewport={{ once: true, margin: '-100px' }}
-		>
-			<div className='flex items-center gap-4'>
-				<div>
-					<h4 className='flex items-center text-sm font-medium text-zinc-900'>
-						Cold start
-						<BenchInfoTooltip>
-							<strong>What&apos;s measured:</strong> Time from requesting an execution to first code running.
-							<br /><br />
-							<strong>Why the gap:</strong> agentOS boots a lightweight VM inside the host process. No network hop, no disk image. Sandboxes must boot an entire environment, allocate memory, and establish a network connection before code can run.
-							<br /><br />
-							<strong>Sandbox baseline:</strong> {SANDBOX_COLDSTART_PROVIDER}, the fastest mainstream sandbox provider as of March 30, 2026.
-							<br /><br />
-							<strong>agentOS:</strong> Median of 10,000 runs (100 iterations x 100 samples) on Intel i7-12700KF.
-						</BenchInfoTooltip>
-					</h4>
-					<p className='mt-1 text-[11px] italic text-zinc-600'>Lower is better</p>
-				</div>
-				<div className='ml-auto flex gap-1'>
-					{groups.map((t, i) => (
-						<button
-							key={t.label}
-							onClick={() => setActive(i)}
-							className={`rounded px-2.5 py-1 font-mono text-[11px] uppercase tracking-wider transition-colors ${
-								i === active ? 'bg-zinc-200 text-zinc-900' : 'text-zinc-600 hover:text-zinc-500'
-							}`}
-						>
-							{t.label}
-						</button>
-					))}
-				</div>
-			</div>
-			<div className='space-y-1.5'>
-				<div className='flex items-center gap-4'>
-					<span className='w-48 shrink-0 font-mono text-xs text-zinc-500'>agentOS</span>
-					<div className='relative h-7 flex-1 overflow-hidden rounded-sm bg-zinc-100'>
-						<motion.div
-							key={`coldstart-${active}`}
-							initial={{ width: 0 }}
-							animate={{ width: `${pct}%` }}
-							transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1] }}
-							className='absolute inset-y-0 left-0 rounded-sm'
-							style={{ background: `linear-gradient(90deg, ${BENCH_ACCENT}, ${BENCH_ACCENT_LIGHT})` }}
-						/>
-						<motion.span
-							key={`label-coldstart-${active}`}
-							initial={{ opacity: 0 }}
-							animate={{ opacity: 1 }}
-							transition={{ duration: 0.4, delay: 0.5 }}
-							className='absolute inset-y-0 z-10 flex items-center gap-2 font-mono text-xs font-medium text-zinc-500'
-							style={{ left: `calc(${pct}% + 8px)` }}
-						>
-							{g.agentOS} ms
-							<span className='text-[11px] font-semibold' style={{ color: BENCH_ACCENT_LIGHT }}>
-								{Math.round(g.sandbox / g.agentOS)}x faster
-							</span>
-						</motion.span>
-					</div>
-				</div>
-				<div className='flex items-center gap-4'>
-					<span className='w-48 shrink-0 font-mono text-xs text-zinc-500'>Fastest sandbox</span>
-					<div className='relative h-7 flex-1 overflow-hidden rounded-sm bg-zinc-100'>
-						<motion.div
-							key={`coldstart-sandbox-${active}`}
-							initial={{ width: 0 }}
-							animate={{ width: '100%' }}
-							transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1], delay: 0.1 }}
-							className='absolute inset-y-0 left-0 rounded-sm bg-zinc-400'
-						/>
-						<motion.span
-							key={`sandbox-label-coldstart-${active}`}
-							initial={{ opacity: 0 }}
-							animate={{ opacity: 1 }}
-							transition={{ duration: 0.4, delay: 0.6 }}
-							className='absolute inset-y-0 left-2 z-10 flex items-center font-mono text-xs text-zinc-700'
-						>
-							{g.sandbox.toLocaleString()} ms
-						</motion.span>
-					</div>
-				</div>
-			</div>
-		</motion.div>
+		<BenchCard
+			title='Cold Start'
+			statNote={`${Math.round(g.sandbox / g.agentOS)}x`}
+				verb='faster'
+			toggle={<BenchToggle options={groups.map((t) => t.label)} active={active} onChange={setActive} />}
+			rows={[
+				{
+					label: (
+						<>
+							agentOS
+							<BenchInfoTooltip>
+								<strong>What&apos;s measured:</strong> Time from requesting an execution to first code running.
+								<br /><br />
+								<strong>Why the gap:</strong> agentOS runs agents in-process — V8 isolates and Wasm inside your host. No VM to boot, no network hop, no disk image. Sandboxes must boot an entire environment, allocate memory, and establish a network connection before code can run.
+								<br /><br />
+								<strong>Sandbox baseline:</strong> {SANDBOX_COLDSTART_PROVIDER}, the fastest mainstream sandbox provider as of {BENCHMARK_DATE}.
+								<br /><br />
+								<strong>agentOS:</strong> Median of 10,000 runs (100 iterations x 100 samples) on Intel i7-12700KF.
+							</BenchInfoTooltip>
+						</>
+					),
+					value: `${g.agentOS} ms`,
+					highlight: true,
+				},
+				{ label: 'Fastest sandbox', value: `${g.sandbox.toLocaleString()} ms` },
+			]}
+		/>
 	);
 }
 
 function BenchMemoryBar({ workload }: { workload: WorkloadKey }) {
 	const mem = benchWorkloads[workload].memory;
-	const barMin = Math.max(mem.agentOSBar, 1);
+	const [memMult, memVerb] = mem.multiplier.split(' ');
+
 	return (
-		<motion.div
-			className='space-y-4'
-			initial='hidden'
-			whileInView='visible'
-			viewport={{ once: true, margin: '-100px' }}
-		>
-			<div>
-				<h4 className='flex items-center text-sm font-medium text-zinc-900'>
-					Memory per instance
-					<BenchInfoTooltip>
-						<strong>What&apos;s measured:</strong> Memory footprint added per concurrent execution.
-						<br /><br />
-						<strong>Why the gap:</strong> Lightweight VMs share the host process. Each additional execution only adds its own heap and stack. Sandboxes allocate a dedicated environment with a minimum memory reservation, even if the code inside uses far less.
-						<br /><br />
-						<strong>Sandbox baseline:</strong> {SANDBOX_COST_PROVIDER}, the cheapest mainstream sandbox provider as of March 30, 2026. Default sandbox: 1 vCPU + 1 GiB RAM.
-						<br /><br />
-						<strong>agentOS:</strong> {workload === 'agent' ? `${benchWorkloads.agent.memory.agentOS} for a full Pi coding agent session with MCP servers and file system mounts.` : `${benchWorkloads.shell.memory.agentOS} for the minimal shell workload under sustained load.`}
-					</BenchInfoTooltip>
-				</h4>
-				<p className='mt-1 text-[11px] italic text-zinc-600'>Lower is better. Sandboxes reserve idle RAM per agent.</p>
-			</div>
-			<div className='space-y-1.5'>
-				<div className='flex items-center gap-4'>
-					<span className='w-48 shrink-0 font-mono text-xs text-zinc-500'>agentOS</span>
-					<div className='relative h-7 flex-1 overflow-hidden rounded-sm bg-zinc-100'>
-						<motion.div
-							key={workload}
-							initial={{ width: 0 }}
-							animate={{ width: `${barMin}%` }}
-							transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1] }}
-							className='absolute inset-y-0 left-0 rounded-sm'
-							style={{ background: `linear-gradient(90deg, ${BENCH_ACCENT}, ${BENCH_ACCENT_LIGHT})` }}
-						/>
-						<motion.span
-							key={`mem-label-${workload}`}
-							initial={{ opacity: 0 }}
-							animate={{ opacity: 1 }}
-							transition={{ duration: 0.4, delay: 0.5 }}
-							className='absolute inset-y-0 z-10 flex items-center gap-2 font-mono text-xs font-medium text-zinc-500'
-							style={{ left: `calc(${barMin}% + 8px)` }}
-						>
-							{mem.agentOS}
-							<span className='text-[11px] font-semibold' style={{ color: BENCH_ACCENT_LIGHT }}>
-								{mem.multiplier}
-							</span>
-						</motion.span>
-					</div>
-				</div>
-				<div className='flex items-center gap-4'>
-					<span className='w-48 shrink-0 font-mono text-xs text-zinc-500'>Cheapest sandbox</span>
-					<div className='relative h-7 flex-1 overflow-hidden rounded-sm bg-zinc-100'>
-						<motion.div
-							initial={{ width: 0 }}
-							whileInView={{ width: `${mem.sandboxBar}%` }}
-							viewport={{ once: true }}
-							transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1], delay: 0.1 }}
-							className='absolute inset-y-0 left-0 rounded-sm bg-zinc-400'
-						/>
-						<motion.span
-							initial={{ opacity: 0 }}
-							whileInView={{ opacity: 1 }}
-							viewport={{ once: true }}
-							transition={{ duration: 0.4, delay: 0.6 }}
-							className='absolute inset-y-0 left-2 z-10 flex items-center font-mono text-xs text-zinc-700'
-						>
-							{mem.sandbox}
-						</motion.span>
-					</div>
-				</div>
-			</div>
-		</motion.div>
+		<BenchCard
+			title='Memory Per Instance'
+			statNote={memMult}
+				verb={memVerb}
+			rows={[
+				{
+					label: (
+						<>
+							agentOS
+							<BenchInfoTooltip>
+								<strong>What&apos;s measured:</strong> Memory footprint added per concurrent execution.
+								<br /><br />
+								<strong>Why the gap:</strong> In-process isolates share the host's memory. Each additional execution only adds its own heap and stack. Sandboxes allocate a dedicated environment with a minimum memory reservation, even if the code inside uses far less.
+								<br /><br />
+								<strong>Sandbox baseline:</strong> {SANDBOX_COST_PROVIDER}, the cheapest mainstream sandbox provider as of {BENCHMARK_DATE}. Default sandbox: 1 vCPU + 1 GiB RAM.
+								<br /><br />
+								<strong>agentOS:</strong> {workload === 'agent' ? `${benchWorkloads.agent.memory.agentOS} for a full Pi coding agent session with MCP servers and file system mounts.` : `${benchWorkloads.shell.memory.agentOS} for the minimal shell workload under sustained load.`}
+							</BenchInfoTooltip>
+						</>
+					),
+					value: mem.agentOS,
+					highlight: true,
+				},
+				{ label: 'Cheapest sandbox', value: mem.sandbox },
+			]}
+			note='Sandboxes reserve idle RAM per agent.'
+		/>
 	);
 }
 
@@ -1613,95 +1807,37 @@ function BenchCostChart({ workload }: { workload: WorkloadKey }) {
 	const sandboxCost = benchWorkloads[workload].sandboxCost;
 	const [active, setActive] = useState(0);
 	const t = tiers[active];
-	const barMin = Math.max(t.bar, 1);
+	const [costMult, costVerb] = t.multiplier.split(' ');
 
 	return (
-		<motion.div
-			className='space-y-4'
-			initial='hidden'
-			whileInView='visible'
-			viewport={{ once: true, margin: '-100px' }}
-		>
-			<div className='flex items-center gap-4'>
-				<div>
-					<h4 className='flex items-center text-sm font-medium text-zinc-900'>
-						Cost per execution-second
-						<BenchInfoTooltip>
-							<strong>What&apos;s measured:</strong> <code className='rounded bg-zinc-200 px-1 py-0.5 text-[10px]'>server price per second / concurrent executions per server</code>
-							<br /><br />
-							<strong>Why it&apos;s cheaper:</strong> Each execution uses {benchWorkloads[workload].memory.agentOS} instead of a {benchWorkloads[workload].memory.sandbox} sandbox minimum. And you run on your own hardware, which is significantly cheaper than per-second sandbox billing.
-							<br /><br />
-							<strong>Sandbox baseline:</strong> {SANDBOX_COST_PROVIDER}, the cheapest mainstream sandbox provider as of March 30, 2026. Default sandbox: 1 vCPU + 1 GiB RAM at $0.0504/vCPU-h + $0.0162/GiB-h.
-							<br /><br />
-							<strong>agentOS:</strong> {benchWorkloads[workload].memory.agentOS} baseline per execution, assuming 70% utilization (industry-standard HPA scaling threshold). Select a hardware tier above to compare.
-						</BenchInfoTooltip>
-					</h4>
-					<p className='mt-1 text-[11px] italic text-zinc-600'>Lower is better. Assumes one agent per sandbox, needed for isolation.</p>
-				</div>
-				<div className='ml-auto flex gap-1'>
-					{tiers.map((tier, i) => (
-						<button
-							key={tier.label}
-							onClick={() => setActive(i)}
-							className={`rounded px-2.5 py-1 font-mono text-[11px] tracking-wider transition-colors ${
-								i === active ? 'bg-zinc-200 text-zinc-900' : 'text-zinc-600 hover:text-zinc-500'
-							}`}
-						>
-							{tier.label}
-						</button>
-					))}
-				</div>
-			</div>
-			<div className='space-y-1.5'>
-				<div className='flex items-center gap-4'>
-					<span className='w-48 shrink-0 font-mono text-xs text-zinc-500'>agentOS</span>
-					<div className='relative h-7 flex-1 overflow-hidden rounded-sm bg-zinc-100'>
-						<motion.div
-							key={`${workload}-${active}`}
-							initial={{ width: 0 }}
-							animate={{ width: `${barMin}%` }}
-							transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1] }}
-							className='absolute inset-y-0 left-0 rounded-sm'
-							style={{ background: `linear-gradient(90deg, ${BENCH_ACCENT}, ${BENCH_ACCENT_LIGHT})` }}
-						/>
-						<motion.span
-							key={`cost-label-${workload}-${active}`}
-							initial={{ opacity: 0 }}
-							animate={{ opacity: 1 }}
-							transition={{ duration: 0.4, delay: 0.5 }}
-							className='absolute inset-y-0 z-10 flex items-center gap-2 font-mono text-xs font-medium text-zinc-500'
-							style={{ left: `calc(${barMin}% + 8px)` }}
-						>
-							{t.value}
-							<span className='text-[11px] font-semibold' style={{ color: BENCH_ACCENT_LIGHT }}>
-								{t.multiplier}
-							</span>
-						</motion.span>
-					</div>
-				</div>
-				<div className='flex items-center gap-4'>
-					<span className='w-48 shrink-0 font-mono text-xs text-zinc-500'>Cheapest sandbox</span>
-					<div className='relative h-7 flex-1 overflow-hidden rounded-sm bg-zinc-100'>
-						<motion.div
-							key={`${workload}-${active}`}
-							initial={{ width: 0 }}
-							animate={{ width: '100%' }}
-							transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1], delay: 0.1 }}
-							className='absolute inset-y-0 left-0 rounded-sm bg-zinc-400'
-						/>
-						<motion.span
-							key={`sandbox-cost-${workload}-${active}`}
-							initial={{ opacity: 0 }}
-							animate={{ opacity: 1 }}
-							transition={{ duration: 0.4, delay: 0.6 }}
-							className='absolute inset-y-0 left-2 z-10 flex items-center font-mono text-xs text-zinc-700'
-						>
-							{sandboxCost}
-						</motion.span>
-					</div>
-				</div>
-			</div>
-		</motion.div>
+		<BenchCard
+			title='Cost Per Execution-Second'
+			statNote={costMult}
+				verb={costVerb}
+			toggle={<BenchToggle options={tiers.map((tier) => tier.label)} active={active} onChange={setActive} />}
+			rows={[
+				{
+					label: (
+						<>
+							agentOS
+							<BenchInfoTooltip>
+								<strong>What&apos;s measured:</strong> <code className='rounded bg-cream/10 px-1 py-0.5 text-[10px]'>server price per second / concurrent executions per server</code>
+								<br /><br />
+								<strong>Why it&apos;s cheaper:</strong> Each execution uses {benchWorkloads[workload].memory.agentOS} instead of a {benchWorkloads[workload].memory.sandbox} sandbox minimum. And you run on your own hardware, which is significantly cheaper than per-second sandbox billing.
+								<br /><br />
+								<strong>Sandbox baseline:</strong> {SANDBOX_COST_PROVIDER}, the cheapest mainstream sandbox provider as of {BENCHMARK_DATE}. Default sandbox: 1 vCPU + 1 GiB RAM at $0.0504/vCPU-h + $0.0162/GiB-h.
+								<br /><br />
+								<strong>agentOS:</strong> {benchWorkloads[workload].memory.agentOS} baseline per execution, assuming 70% utilization (industry-standard HPA scaling threshold). Select a hardware tier above to compare.
+							</BenchInfoTooltip>
+						</>
+					),
+					value: t.value,
+					highlight: true,
+				},
+				{ label: 'Cheapest sandbox', value: sandboxCost },
+			]}
+			note='Assumes one agent per sandbox, needed for isolation.'
+		/>
 	);
 }
 
@@ -1717,44 +1853,68 @@ function BenchmarkSection() {
 			transition={{ duration: 0.5 }}
 		>
 			<div className='mb-8'>
-				<h3 className='mb-2 text-2xl font-normal tracking-tight text-zinc-900 md:text-3xl'>
+				<h3 className='mb-2 text-2xl font-medium tracking-[-0.015em] text-ink md:text-3xl'>
 					Performance benchmarks
 				</h3>
-				<p className='text-base leading-relaxed text-zinc-500'>
+				<p className='text-base leading-relaxed text-ink-soft'>
 					agentOS vs. traditional sandboxes.
 				</p>
 			</div>
 
-			<div className='rounded-xl border border-zinc-200 bg-zinc-50 p-8'>
-				<BenchColdStartChart />
-				<div className='my-8 border-t border-zinc-100' />
-				<div className='mb-4 flex items-center justify-between max-sm:flex-col max-sm:items-stretch max-sm:gap-2'>
-					<p className='text-xs text-zinc-400 max-sm:order-2 max-sm:px-1 max-sm:leading-relaxed'>Workload: {wl.description}</p>
-					<div className='flex gap-1 rounded-lg border border-zinc-200 bg-white p-1 max-sm:order-1 max-sm:grid max-sm:w-full max-sm:grid-cols-2 max-sm:rounded-xl'>
-						{(Object.keys(benchWorkloads) as WorkloadKey[]).map((key) => (
-							<button
-								key={key}
-								onClick={() => setWorkload(key)}
-								aria-pressed={workload === key}
-								className={`rounded-md px-3 py-1.5 text-xs font-medium transition-colors max-sm:flex max-sm:min-h-10 max-sm:w-full max-sm:items-center max-sm:justify-center max-sm:rounded-lg max-sm:py-2 max-sm:text-center ${
-									workload === key ? 'bg-zinc-900 text-white max-sm:shadow-sm' : 'text-zinc-500 hover:text-zinc-700'
-								}`}
-							>
-								{benchWorkloads[key].label}
-							</button>
-						))}
-					</div>
+			<div className='mb-6 flex items-center justify-between max-sm:flex-col max-sm:items-stretch max-sm:gap-2'>
+				<p className='text-xs text-ink-faint max-sm:order-2 max-sm:px-1 max-sm:leading-relaxed'>
+					Workload:{' '}
+					<AnimatePresence mode='wait' initial={false}>
+						<motion.span
+							key={workload}
+							initial={{ opacity: 0, y: 4 }}
+							animate={{ opacity: 1, y: 0 }}
+							exit={{ opacity: 0, y: -4 }}
+							transition={{ duration: 0.2, ease: 'easeOut' }}
+							className='inline-block'
+						>
+							{wl.description}
+						</motion.span>
+					</AnimatePresence>
+				</p>
+				<div className='flex gap-1 rounded-lg border border-ink/10 bg-white/55 p-1 max-sm:order-1 max-sm:grid max-sm:w-full max-sm:grid-cols-2 max-sm:rounded-xl'>
+					{(Object.keys(benchWorkloads) as WorkloadKey[]).map((key) => {
+              const isActive = workload === key;
+              return (
+                <motion.button
+                  key={key}
+                  onClick={() => setWorkload(key)}
+                  aria-pressed={isActive}
+                  whileTap={{ scale: 0.96 }}
+                  className={`relative rounded-md px-2.5 py-1 text-xs font-medium transition-colors max-sm:flex max-sm:min-h-10 max-sm:w-full max-sm:items-center max-sm:justify-center max-sm:rounded-lg max-sm:py-2 max-sm:text-center ${
+                    isActive ? 'text-cream' : 'text-ink-soft hover:text-ink'
+                  }`}
+                >
+                  {isActive && (
+                    <motion.span
+                      layoutId='bench-workload-toggle'
+                      className='absolute inset-0 rounded-md bg-ink max-sm:rounded-lg'
+                      transition={{ type: 'spring', stiffness: 480, damping: 38 }}
+                    />
+                  )}
+                  <span className='relative z-[1]'>{benchWorkloads[key].label}</span>
+                </motion.button>
+              );
+            })}
 				</div>
+			</div>
+
+			<div className='grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3'>
+				<BenchColdStartChart />
 				<BenchMemoryBar workload={workload} />
-				<div className='my-8 border-t border-zinc-100' />
 				<BenchCostChart workload={workload} />
 			</div>
 
-			<p className='mt-4 text-[11px] leading-relaxed text-zinc-400'>
-				Measured on Intel i7-12700KF. Cold start baseline: {SANDBOX_COLDSTART_PROVIDER}, the fastest mainstream sandbox provider as of March 30, 2026. Cost baseline: {SANDBOX_COST_PROVIDER}, the cheapest mainstream sandbox provider as of March 30, 2026 (1 vCPU + 1 GiB default). Cost assumes 70% utilization on self-hosted hardware vs. per-second sandbox billing.{' '}
+			<p className='mt-8 font-mono text-xs leading-relaxed text-ink-faint'>
+				Measured on Intel i7-12700KF. Cold start baseline: {SANDBOX_COLDSTART_PROVIDER}, the fastest mainstream sandbox provider as of {BENCHMARK_DATE}. Cost baseline: {SANDBOX_COST_PROVIDER}, the cheapest mainstream sandbox provider as of {BENCHMARK_DATE} (1 vCPU + 1 GiB default). Cost assumes 70% utilization on self-hosted hardware vs. per-second sandbox billing.{' '}
 				<a
 					href='/docs/agent-os/benchmarks'
-					className='inline-flex items-center gap-1 text-zinc-500 underline underline-offset-2 transition-colors hover:text-zinc-700'
+					className='inline-flex items-center gap-1 text-ink-soft underline underline-offset-2 transition-colors hover:text-ink'
 				>
 					Benchmark document
 					<ExternalLink className='h-3 w-3' />
@@ -1765,7 +1925,7 @@ function BenchmarkSection() {
 }
 
 const TechnologyAndBenchmarks = () => (
-	<section className='border-t border-zinc-200 py-16 md:py-32'>
+	<section className='border-t border-ink/10 py-16 md:py-32'>
 		<div className='mx-auto max-w-5xl px-6'>
 			{/* Technology intro */}
 			<motion.div
@@ -1775,32 +1935,32 @@ const TechnologyAndBenchmarks = () => (
 				transition={{ duration: 0.5 }}
 				className='mb-16'
 			>
-				<h2 className='mb-4 text-3xl font-normal tracking-tight text-zinc-900 md:text-5xl'>
+				<h2 className='mb-4 text-3xl font-medium tracking-[-0.015em] text-ink md:text-5xl'>
 					A new operating system architecture.
 				</h2>
-				<p className='mb-6 max-w-3xl text-base leading-relaxed text-zinc-500 md:text-lg'>
+				<p className='mb-6 max-w-3xl text-base leading-relaxed text-ink-soft md:text-lg'>
 					Built from the ground up for lightweight agents. agentOS provides the flexibility of Linux with lower overhead than sandboxes.
 				</p>
 				<div className='grid gap-6 md:grid-cols-2'>
-					<div className='rounded-xl border border-zinc-200 bg-zinc-50 p-6'>
+					<div className='rounded-xl border border-ink/10 bg-white/55 p-6'>
 						<div className='mb-3 flex items-center gap-3'>
-							<div className='flex h-10 w-10 items-center justify-center rounded-lg bg-zinc-200'>
+							<div className='flex h-10 w-10 items-center justify-center rounded-lg bg-ink/5'>
 								<img src='/images/agent-os/webassembly-logo.svg' alt='WebAssembly' className='h-6 w-6 grayscale opacity-70' />
 							</div>
-							<h3 className='text-lg font-medium text-zinc-900'>WebAssembly + V8 Isolates</h3>
+							<h3 className='text-lg font-medium text-ink'>WebAssembly + V8 Isolates</h3>
 						</div>
-						<p className='text-sm leading-relaxed text-zinc-500'>
+						<p className='text-sm leading-relaxed text-ink-soft'>
 							High-performance virtualization without specialized infrastructure. The same battle-hardened isolation technology that powers Google Chrome.
 						</p>
 					</div>
-					<div className='rounded-xl border border-zinc-200 bg-zinc-50 p-6'>
+					<div className='rounded-xl border border-ink/10 bg-white/55 p-6'>
 						<div className='mb-3 flex items-center gap-3'>
-							<div className='flex h-10 w-10 items-center justify-center rounded-lg bg-zinc-200'>
-								<Globe className='h-5 w-5 text-zinc-700' />
+							<div className='flex h-10 w-10 items-center justify-center rounded-lg bg-ink/5'>
+								<Globe className='h-5 w-5 text-ink-soft' />
 							</div>
-							<h3 className='text-lg font-medium text-zinc-900'>Battle-tested technology</h3>
+							<h3 className='text-lg font-medium text-ink'>Battle-tested technology</h3>
 						</div>
-						<p className='text-sm leading-relaxed text-zinc-500'>
+						<p className='text-sm leading-relaxed text-ink-soft'>
 							You&apos;re probably using this technology right now to view this page. Bring the same power to your agents. No VMs, no containers, no overhead.
 						</p>
 					</div>
@@ -1844,7 +2004,7 @@ const BeforeAfterSlider = ({ before, after }: { before: string; after: string })
 			{/* Divider */}
 			<div className='absolute top-0 bottom-0 z-10 w-0.5 bg-white' style={{ left: `${position}%` }}>
 				<div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex h-8 w-8 items-center justify-center rounded-full bg-white shadow-lg cursor-ew-resize'>
-					<svg width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M5 3L2 8L5 13M11 3L14 8L11 13' stroke='#18181b' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round'/></svg>
+					<svg width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M5 3L2 8L5 13M11 3L14 8L11 13' stroke='#1B1916' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round'/></svg>
 				</div>
 			</div>
 			{/* Labels */}
@@ -1888,24 +2048,15 @@ const SisterProducts = () => {
 	];
 
 	return (
-		<section className='border-t border-zinc-200 px-6 py-24 md:py-40'>
+		<section className='border-t border-ink/10 px-6 py-24 md:py-40'>
 			<div className='mx-auto max-w-5xl'>
 				<div className='mb-12 max-w-3xl'>
-					<motion.span
-						initial={{ opacity: 0, y: 20 }}
-						whileInView={{ opacity: 1, y: 0 }}
-						viewport={{ once: true }}
-						transition={{ duration: 0.5 }}
-						className='mb-4 inline-block text-xs font-medium uppercase tracking-[0.18em] text-zinc-500'
-					>
-						The Rest of the Suite
-					</motion.span>
 					<motion.h2
 						initial={{ opacity: 0, y: 20 }}
 						whileInView={{ opacity: 1, y: 0 }}
 						viewport={{ once: true }}
 						transition={{ duration: 0.5, delay: 0.05 }}
-						className='mb-4 text-3xl font-normal tracking-tight text-zinc-900 md:text-4xl'
+						className='mb-4 text-3xl font-medium tracking-[-0.015em] text-ink md:text-4xl'
 					>
 						Pairs with agentOS.
 					</motion.h2>
@@ -1914,7 +2065,7 @@ const SisterProducts = () => {
 						whileInView={{ opacity: 1, y: 0 }}
 						viewport={{ once: true }}
 						transition={{ duration: 0.5, delay: 0.1 }}
-						className='text-base leading-relaxed text-zinc-500 md:text-lg'
+						className='text-base leading-relaxed text-ink-soft md:text-lg'
 					>
 						agentOS is where agents live. Secure Exec is how you safely run the code they generate. Sandbox Agent SDK is how you control coding agents over HTTP.
 					</motion.p>
@@ -1931,19 +2082,19 @@ const SisterProducts = () => {
 							whileInView={{ opacity: 1, y: 0 }}
 							viewport={{ once: true }}
 							transition={{ duration: 0.5, delay: 0.05 * idx }}
-							className='group flex flex-col rounded-xl border border-zinc-200 bg-white p-6 transition-colors hover:border-zinc-300'
+							className='group flex flex-col rounded-xl border border-ink/10 bg-white/55 p-6 transition-colors hover:border-ink/25'
 						>
-							<h3 className='mb-2 text-lg font-medium text-zinc-900'>{product.name}</h3>
-							<p className='mb-6 text-sm leading-relaxed text-zinc-600'>{product.tagline}</p>
+							<h3 className='mb-2 text-lg font-medium text-ink'>{product.name}</h3>
+							<p className='mb-6 text-sm leading-relaxed text-ink-soft'>{product.tagline}</p>
 							<ul className='mb-8 flex flex-grow flex-col gap-2'>
 								{product.bullets.map((bullet) => (
-									<li key={bullet} className='flex items-start gap-2 text-sm leading-relaxed text-zinc-500'>
-										<span className='mt-2 h-1 w-1 flex-shrink-0 rounded-full bg-zinc-400' />
+									<li key={bullet} className='flex items-start gap-2 text-sm leading-relaxed text-ink-soft'>
+										<span className='mt-2 h-1 w-1 flex-shrink-0 rounded-full bg-ink/30' />
 										<span>{bullet}</span>
 									</li>
 								))}
 							</ul>
-							<div className='inline-flex items-center gap-2 text-sm font-medium text-zinc-900 transition-colors group-hover:text-zinc-600'>
+							<div className='inline-flex items-center gap-2 text-sm font-medium text-ink transition-colors group-hover:text-ink'>
 								{product.cta}
 								<ArrowRight className='h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5' />
 							</div>
@@ -1956,7 +2107,7 @@ const SisterProducts = () => {
 };
 
 const FromUnixToAgents = () => (
-	<section className='border-t border-zinc-200 px-6 py-24 md:py-40'>
+	<section className='border-t border-ink/10 px-6 py-24 md:py-40'>
 		<div className='mx-auto max-w-5xl'>
 			<div className='flex flex-col gap-10 md:flex-row md:items-center md:gap-16'>
 				<motion.div
@@ -1970,8 +2121,8 @@ const FromUnixToAgents = () => (
 						before='https://assets.rivet.dev/website/public/images/agent-os/unix-timesharing-uw-madison-1978.jpg'
 						after='https://assets.rivet.dev/website/public/images/agent-os/data-flock.jpg'
 					/>
-					<p className='mt-2 text-xs text-zinc-400'>
-						Left: Unix timesharing, UW-Madison, 1978. Right: "Data flock (digits)" by Philipp Schmitt, <a href='https://commons.wikimedia.org/wiki/File:Data_flock_(digits)_by_Philipp_Schmitt.jpg' className='underline hover:text-zinc-600' target='_blank' rel='noopener noreferrer'>CC BY-SA 4.0</a>
+					<p className='mt-2 font-mono text-xs text-ink-faint'>
+						Left: Unix timesharing, UW-Madison, 1978. Right: "Data flock (digits)" by Philipp Schmitt, <a href='https://commons.wikimedia.org/wiki/File:Data_flock_(digits)_by_Philipp_Schmitt.jpg' className='underline hover:text-ink' target='_blank' rel='noopener noreferrer'>CC BY-SA 4.0</a>
 					</p>
 				</motion.div>
 				<motion.div
@@ -1981,15 +2132,15 @@ const FromUnixToAgents = () => (
 					transition={{ duration: 0.5, delay: 0.1 }}
 					className='flex-1'
 				>
-					<h2 className='mb-4 text-3xl font-normal tracking-tight text-zinc-900 md:text-4xl'>
+					<h2 className='mb-4 text-3xl font-medium tracking-[-0.015em] text-ink md:text-4xl'>
 						From humans to agents
 					</h2>
-					<p className='mb-6 text-base leading-relaxed text-zinc-500 md:text-lg'>
+					<p className='mb-6 text-base leading-relaxed text-ink-soft md:text-lg'>
 						The operating system is changing for the next generation of software operators.
 					</p>
 					<a
 						href='/from-unix-to-agents'
-						className='inline-flex items-center gap-2 rounded-md bg-zinc-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-zinc-700'
+						className='selection-dark inline-flex items-center gap-2 rounded-md bg-ink px-4 py-2 text-sm font-medium text-cream transition-colors hover:bg-ink/85'
 					>
 						Learn more
 						<ArrowRight className='h-4 w-4' />
@@ -2003,7 +2154,7 @@ const FromUnixToAgents = () => (
 // --- Main Page ---
 export default function AgentOSPage({ heroTabs }: AgentOSPageProps) {
 	return (
-		<div className='min-h-screen bg-white font-sans text-zinc-600 selection:bg-zinc-200 selection:text-zinc-900' style={{ overflowX: 'clip' }}>
+		<div className='paper-grain min-h-screen font-sans text-ink-soft' style={{ overflowX: 'clip' }}>
 			<main>
 				<Hero heroTabs={heroTabs} />
 				<TechnologyAndBenchmarks />
diff --git a/website/src/components/marketing/solutions/AgentOSPricingPage.tsx b/website/src/components/marketing/solutions/AgentOSPricingPage.tsx
index 0af32d9711..0e6acc40d7 100644
--- a/website/src/components/marketing/solutions/AgentOSPricingPage.tsx
+++ b/website/src/components/marketing/solutions/AgentOSPricingPage.tsx
@@ -8,11 +8,11 @@ import {
 	Server,
 	Cloud,
 	Headphones,
-	Terminal,
 	Copy,
 } from 'lucide-react';
 import { FaqSection } from '@/components/faq/FaqSection';
 import { agentOsPricingFaqs } from '@/data/faqs/agent-os-pricing';
+import { HERO_H1_CLASS, SECTION_H2_CLASS } from '@/components/marketing/typography';
 
 const pricingTiers = [
 	{
@@ -40,7 +40,7 @@ const pricingTiers = [
 		name: 'Enterprise',
 		description: 'On-premise deployment with dedicated support.',
 		price: 'Custom',
-		priceSuffix: 'contact sales',
+		priceSuffix: '',
 		icon: Server,
 		cta: 'Contact Sales',
 		ctaHref: '/sales',
@@ -56,7 +56,9 @@ const pricingTiers = [
 	},
 ];
 
-const CopyButton = ({ command, highlight = false }: { command: string; highlight?: boolean }) => {
+// Ink command strip with a copy affordance. The install command is the free
+// tier's call to action, so it gets the page's single code moment treatment.
+const CopyButton = ({ command }: { command: string }) => {
 	const [copied, setCopied] = useState(false);
 
 	const handleCopy = async () => {
@@ -72,15 +74,17 @@ const CopyButton = ({ command, highlight = false }: { command: string; highlight
 	return (
 		<button
 			onClick={handleCopy}
-			className="mb-8 flex w-full items-center justify-center gap-2 rounded-lg border border-zinc-200 bg-zinc-50 px-4 py-3 text-sm font-mono text-zinc-700 transition-colors hover:border-zinc-300 hover:bg-zinc-100"
+			className='selection-paper mb-8 flex w-full items-center gap-2.5 rounded-lg border border-ink/20 bg-ink px-4 py-3 font-mono text-[13px] text-cream/85 transition-colors hover:border-ink/40'
 		>
+			<span aria-hidden='true' className='select-none text-cream/70'>
+				$
+			</span>
+			<span className='truncate'>{command}</span>
 			{copied ? (
-				<Check className="h-4 w-4 text-emerald-600" />
+				<Check className='ml-auto h-3.5 w-3.5 text-cream/70' />
 			) : (
-				<Terminal className="h-4 w-4 text-zinc-500" />
+				<Copy className='ml-auto h-3.5 w-3.5 text-cream/45' />
 			)}
-			<span className="truncate">{command}</span>
-			{!copied && <Copy className="h-3.5 w-3.5 ml-auto text-zinc-400" />}
 		</button>
 	);
 };
@@ -93,74 +97,58 @@ const PricingCard = ({ tier, index, showCloudNotice = false }: { tier: typeof pr
 			initial={{ opacity: 0, y: 20 }}
 			animate={{ opacity: 1, y: 0 }}
 			transition={{ duration: 0.5, delay: index * 0.1 }}
-			className={`relative flex flex-col rounded-2xl border ${
-				tier.highlight
-					? 'border-zinc-900 bg-zinc-900 text-white'
-					: 'border-zinc-200 bg-white text-zinc-900'
-			} p-8`}
+			className='relative flex flex-col border border-ink/10 bg-white/55 p-8'
 		>
-			<div className="mb-6">
-				<div className={`mb-4 flex h-12 w-12 items-center justify-center rounded-xl ${
-					tier.highlight ? 'bg-white/10' : 'bg-zinc-100'
-				}`}>
-					<Icon className={`h-6 w-6 ${tier.highlight ? 'text-white' : 'text-zinc-700'}`} />
+			<div className='mb-6'>
+				<div className='mb-4 flex h-12 w-12 items-center justify-center rounded-xl border border-ink/10'>
+					<Icon className='h-6 w-6 text-ink-soft' />
 				</div>
-				<h3 className="text-xl font-semibold">{tier.name}</h3>
-				<p className={`mt-1 text-sm ${tier.highlight ? 'text-zinc-400' : 'text-zinc-500'}`}>
-					{tier.description}
-				</p>
+				<h3 className='text-xl font-medium text-ink'>{tier.name}</h3>
+				<p className='mt-1 text-sm text-ink-soft'>{tier.description}</p>
 			</div>
 
-			<div className="mb-6">
-				<div className="flex items-baseline gap-2">
-					<span className="text-3xl font-bold">{tier.price}</span>
+			<div className='mb-6'>
+				<div className='flex items-baseline gap-2'>
+					<span className='text-3xl font-medium text-ink'>{tier.price}</span>
 				</div>
-				<p className={`text-sm ${tier.highlight ? 'text-zinc-400' : 'text-zinc-500'}`}>
-					{tier.priceSuffix}
-				</p>
+				{tier.priceSuffix && (
+					<p className='font-mono text-xs uppercase tracking-[0.16em] text-ink-faint'>{tier.priceSuffix}</p>
+				)}
 			</div>
 
 			{tier.copyCommand ? (
-				<CopyButton command={tier.copyCommand} highlight={tier.highlight} />
+				<CopyButton command={tier.copyCommand} />
 			) : (
 				<a
 					href={tier.ctaHref}
-					className={`mb-8 flex items-center justify-center gap-2 rounded-lg px-4 py-3 text-sm font-medium transition-colors ${
-						tier.highlight
-							? 'bg-white text-zinc-900 hover:bg-zinc-100'
-							: 'bg-zinc-900 text-white hover:bg-zinc-700'
-					}`}
+					className='mb-8 flex items-center justify-center gap-2 rounded-lg bg-ink px-4 py-3 text-sm font-medium text-cream transition-colors hover:bg-ink/85'
 				>
 					{tier.cta}
-					<ArrowRight className="h-4 w-4" />
+					<ArrowRight className='h-4 w-4' />
 				</a>
 			)}
 
-			<ul className="space-y-3">
+			<ul className='space-y-3'>
 				{tier.features.map((feature) => (
-					<li key={feature.text} className="flex items-start gap-3">
-						<Check className={`mt-0.5 h-4 w-4 flex-shrink-0 ${
-							tier.highlight ? 'text-emerald-400' : 'text-emerald-600'
-						}`} />
-						<span className={`text-sm ${tier.highlight ? 'text-zinc-300' : 'text-zinc-600'}`}>
-							{feature.text}
-						</span>
+					<li key={feature.text} className='flex items-start gap-3'>
+						<Check className='mt-0.5 h-4 w-4 flex-shrink-0 text-ink' />
+						<span className='text-sm text-ink-soft'>{feature.text}</span>
 					</li>
 				))}
 			</ul>
 
 			{showCloudNotice && (
-				<div className="mt-6 pt-6 border-t border-zinc-200">
+				<div className='mt-6 border-t border-ink/10 pt-6'>
 					<a
-						href="https://dashboard.rivet.dev"
-						className="group flex items-center gap-3 rounded-lg bg-zinc-50 p-4 transition-colors hover:bg-zinc-100"
+						href='https://dashboard.rivet.dev'
+						className='group flex items-center gap-3 rounded-lg border border-ink/10 p-4 transition-colors hover:border-ink/25'
 					>
-						<Cloud className="h-5 w-5 text-zinc-500 group-hover:text-zinc-700 transition-colors" />
-						<div className="flex-1">
-							<p className="text-sm font-medium text-zinc-900">Deploy on Rivet Cloud</p>
-							<p className="text-xs text-zinc-500">Scale your agents with managed infrastructure</p>
+						<Cloud className='h-5 w-5 text-ink-soft' />
+						<div className='flex-1'>
+							<p className='text-sm font-medium text-ink'>Deploy on Rivet Cloud</p>
+							<p className='text-xs text-ink-soft'>Scale your agents with managed infrastructure</p>
 						</div>
-						<ArrowRight className="h-4 w-4 text-zinc-400 group-hover:text-zinc-700 transition-colors" />
+						<ArrowRight className='h-4 w-4 text-ink-faint transition-colors group-hover:text-ink' />
 					</a>
 				</div>
 			)}
@@ -174,28 +162,26 @@ const CTASection = () => (
 		whileInView={{ opacity: 1, y: 0 }}
 		viewport={{ once: true }}
 		transition={{ duration: 0.5 }}
-		className="border-t border-zinc-200 px-6 py-24"
+		className='border-t border-ink/10 px-6 py-24'
 	>
-		<div className="mx-auto max-w-3xl text-center">
-			<h2 className="mb-4 text-3xl font-normal tracking-tight text-zinc-900 md:text-4xl">
-				Ready to get started?
-			</h2>
-			<p className="mb-8 text-base leading-relaxed text-zinc-500 md:text-lg">
+		<div className='mx-auto max-w-3xl text-center'>
+			<h2 className={`mb-4 ${SECTION_H2_CLASS}`}>Ready to get started?</h2>
+			<p className='mb-8 text-base leading-relaxed text-ink-soft md:text-lg'>
 				Deploy agentOS today. Start with the open source version or try Rivet Cloud for free.
 			</p>
-			<div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
+			<div className='flex flex-col items-center justify-center gap-4 sm:flex-row'>
 				<a
-					href="/docs/agent-os"
-					className="inline-flex items-center gap-2 rounded-lg bg-zinc-900 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-zinc-700"
+					href='/docs/agent-os'
+					className='inline-flex items-center gap-2 rounded-md bg-accent-deep px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-accent'
 				>
 					Start for Free
-					<ArrowRight className="h-4 w-4" />
+					<ArrowRight className='h-4 w-4' />
 				</a>
 				<a
-					href="/sales"
-					className="inline-flex items-center gap-2 rounded-lg border border-zinc-200 bg-white px-6 py-3 text-sm font-medium text-zinc-900 transition-colors hover:bg-zinc-50"
+					href='/sales'
+					className='inline-flex items-center gap-2 rounded-md border border-ink/20 px-6 py-3 text-sm font-medium text-ink-soft transition-colors hover:border-ink/40 hover:text-ink'
 				>
-					<Headphones className="h-4 w-4" />
+					<Headphones className='h-4 w-4' />
 					Talk to Sales
 				</a>
 			</div>
@@ -205,20 +191,18 @@ const CTASection = () => (
 
 export default function AgentOSPricingPage() {
 	return (
-		<div className="min-h-screen overflow-x-hidden bg-white font-sans text-zinc-600 selection:bg-zinc-200 selection:text-zinc-900">
+		<div className='paper-grain min-h-screen overflow-x-hidden font-sans text-ink-soft'>
 			<main>
 				{/* Hero */}
-				<section className="px-6 pt-24 pb-16 md:pt-32">
-					<div className="mx-auto max-w-5xl text-center">
+				<section className='px-6 pt-24 pb-16 md:pt-32'>
+					<div className='mx-auto max-w-5xl text-center'>
 						<motion.div
 							initial={{ opacity: 0, y: 20 }}
 							animate={{ opacity: 1, y: 0 }}
 							transition={{ duration: 0.5 }}
 						>
-							<h1 className="mb-4 text-4xl font-normal tracking-tight text-zinc-900 md:text-5xl lg:text-6xl">
-								Free and open source.
-							</h1>
-							<p className="mx-auto max-w-2xl text-base leading-relaxed text-zinc-500 md:text-lg">
+							<h1 className={`mb-4 ${HERO_H1_CLASS}`}>Free and open source.</h1>
+							<p className='mx-auto max-w-2xl text-base leading-relaxed text-ink-soft md:text-lg'>
 								agentOS is Apache 2.0 licensed and free to self-host. Use Rivet Cloud for managed infrastructure, or contact us for enterprise support.
 							</p>
 						</motion.div>
@@ -226,9 +210,9 @@ export default function AgentOSPricingPage() {
 				</section>
 
 				{/* Pricing Cards */}
-				<section className="px-6 pb-24">
-					<div className="mx-auto max-w-4xl">
-						<div className="grid gap-8 md:grid-cols-2">
+				<section className='px-6 pb-16 md:pb-32'>
+					<div className='mx-auto max-w-4xl'>
+						<div className='grid gap-6 md:grid-cols-2'>
 							{pricingTiers.map((tier, index) => (
 								<PricingCard key={tier.name} tier={tier} index={index} showCloudNotice={index === 0} />
 							))}
@@ -238,7 +222,7 @@ export default function AgentOSPricingPage() {
 
 				{/* No motion wrapper here. The FAQ must stay visible without JavaScript
 				    because the page's FaqJsonLd requires the content to be on-page. */}
-				<FaqSection items={agentOsPricingFaqs} theme="light" />
+				<FaqSection items={agentOsPricingFaqs} theme='light' />
 				<CTASection />
 			</main>
 		</div>
diff --git a/website/src/components/marketing/solutions/AgentOSUseCasesPage.tsx b/website/src/components/marketing/solutions/AgentOSUseCasesPage.tsx
index 361d4d7e6a..8698348b71 100644
--- a/website/src/components/marketing/solutions/AgentOSUseCasesPage.tsx
+++ b/website/src/components/marketing/solutions/AgentOSUseCasesPage.tsx
@@ -14,6 +14,7 @@ import {
 	Check,
 	Terminal,
 } from 'lucide-react';
+import { HERO_H1_CLASS, SECTION_H2_CLASS } from '@/components/marketing/typography';
 
 // --- Copy Install Button ---
 const CopyInstallButton = () => {
@@ -32,9 +33,9 @@ const CopyInstallButton = () => {
 	return (
 		<button
 			onClick={handleCopy}
-			className='inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border border-zinc-300 px-6 py-3 text-sm text-zinc-500 transition-colors hover:border-zinc-400 hover:text-zinc-900'
+			className='inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border border-ink/20 px-6 py-3 font-mono text-sm text-ink-soft transition-colors hover:border-ink/40 hover:text-ink'
 		>
-			{copied ? <Check className='h-4 w-4 text-green-500' /> : <Terminal className='h-4 w-4' />}
+			{copied ? <Check className='h-4 w-4 text-ink' /> : <Terminal className='h-4 w-4' />}
 			npm install rivetkit
 		</button>
 	);
@@ -55,25 +56,25 @@ const UseCase = ({ icon: Icon, title, description, benefits, example, delay = 0
 		whileInView={{ opacity: 1, y: 0 }}
 		viewport={{ once: true }}
 		transition={{ duration: 0.5, delay }}
-		className='rounded-2xl border border-zinc-200 bg-white p-8'
+		className='flex flex-col border border-ink/10 bg-white/55 p-7'
 	>
-		<div className='mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-zinc-100'>
-			<Icon className='h-6 w-6 text-zinc-700' />
+		<div className='mb-4 flex h-12 w-12 items-center justify-center rounded-xl border border-ink/10'>
+			<Icon className='h-6 w-6 text-ink-soft' />
 		</div>
-		<h3 className='mb-3 text-xl font-medium text-zinc-900'>{title}</h3>
-		<p className='mb-4 text-sm leading-relaxed text-zinc-500'>{description}</p>
-		<ul className='mb-4 space-y-2'>
+		<h3 className='mb-3 text-lg font-medium tracking-[-0.01em] text-ink md:text-xl'>{title}</h3>
+		<p className='mb-4 text-sm leading-relaxed text-ink-soft'>{description}</p>
+		<ul className='mb-5 space-y-2'>
 			{benefits.map((benefit, i) => (
-				<li key={i} className='flex items-start gap-2 text-sm text-zinc-600'>
-					<span className='mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-zinc-400' />
+				<li key={i} className='flex items-start gap-2.5 text-sm text-ink-soft'>
+					<span className='mt-[7px] h-1.5 w-1.5 flex-shrink-0 rounded-full bg-ink/50' />
 					{benefit}
 				</li>
 			))}
 		</ul>
 		{example && (
-			<div className='rounded-lg bg-zinc-50 px-4 py-3'>
-				<span className='text-xs font-medium uppercase tracking-wider text-zinc-400'>Example</span>
-				<p className='mt-1 text-sm text-zinc-600'>{example}</p>
+			<div className='mt-auto border-t border-ink/10 pt-4'>
+				<span className='font-mono text-[11px] uppercase tracking-[0.16em] text-ink-faint'>Example</span>
+				<p className='mt-1.5 text-sm leading-relaxed text-ink-soft'>{example}</p>
 			</div>
 		)}
 	</motion.div>
@@ -168,24 +169,24 @@ const useCases: UseCaseProps[] = [
 
 export default function AgentOSUseCasesPage() {
 	return (
-		<div className='min-h-screen overflow-x-hidden bg-white font-sans text-zinc-600 selection:bg-zinc-200 selection:text-zinc-900'>
+		<div className='paper-grain min-h-screen overflow-x-hidden font-sans text-ink-soft'>
 			<main>
 				{/* Hero */}
-				<section className='relative flex min-h-[50svh] flex-col items-center justify-center px-6 pt-32 overflow-hidden'>
+				<section className='relative flex min-h-[50svh] flex-col items-center justify-center overflow-hidden px-6 pt-32'>
 					<div className='mx-auto w-full max-w-4xl text-center'>
-							<motion.h1
+						<motion.h1
 							initial={{ opacity: 0, y: 20 }}
 							animate={{ opacity: 1, y: 0 }}
-							transition={{ duration: 0.5, delay: 0.05 }}
-							className='mb-6 text-4xl font-normal leading-[1.1] tracking-tight text-zinc-900 md:text-6xl'
+							transition={{ duration: 0.5 }}
+							className={`mb-6 ${HERO_H1_CLASS}`}
 						>
 							Who is agentOS for?
 						</motion.h1>
 						<motion.p
 							initial={{ opacity: 0, y: 20 }}
 							animate={{ opacity: 1, y: 0 }}
-							transition={{ duration: 0.5, delay: 0.1 }}
-							className='mx-auto max-w-2xl text-lg text-zinc-500 md:text-xl'
+							transition={{ duration: 0.5, delay: 0.05 }}
+							className='mx-auto max-w-2xl text-lg text-ink-soft md:text-xl'
 						>
 							From personal assistants to enterprise fleets, agentOS powers every kind of AI agent.
 						</motion.p>
@@ -193,7 +194,7 @@ export default function AgentOSUseCasesPage() {
 				</section>
 
 				{/* Use Cases Grid */}
-				<section className='border-t border-zinc-200 px-6 py-16 md:py-24'>
+				<section className='border-t border-ink/10 px-6 py-16 md:py-32'>
 					<div className='mx-auto max-w-7xl'>
 						<div className='grid gap-6 md:grid-cols-2 lg:grid-cols-3'>
 							{useCases.map((useCase, i) => (
@@ -204,14 +205,14 @@ export default function AgentOSUseCasesPage() {
 				</section>
 
 				{/* CTA */}
-				<section className='border-t border-zinc-200 px-6 py-16 md:py-24'>
+				<section className='border-t border-ink/10 px-6 py-16 md:py-32'>
 					<div className='mx-auto max-w-3xl text-center'>
 						<motion.h2
 							initial={{ opacity: 0, y: 20 }}
 							whileInView={{ opacity: 1, y: 0 }}
 							viewport={{ once: true }}
 							transition={{ duration: 0.5 }}
-							className='mb-4 text-2xl font-normal tracking-tight text-zinc-900 md:text-4xl'
+							className={`mb-4 ${SECTION_H2_CLASS}`}
 						>
 							Ready to build?
 						</motion.h2>
@@ -220,7 +221,7 @@ export default function AgentOSUseCasesPage() {
 							whileInView={{ opacity: 1, y: 0 }}
 							viewport={{ once: true }}
 							transition={{ duration: 0.5, delay: 0.1 }}
-							className='mb-8 text-base leading-relaxed text-zinc-500'
+							className='mb-8 text-base leading-relaxed text-ink-soft'
 						>
 							Get started with agentOS in minutes. One npm install, zero infrastructure.
 						</motion.p>
@@ -233,7 +234,7 @@ export default function AgentOSUseCasesPage() {
 						>
 							<a
 								href='/docs'
-								className='selection-dark inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-zinc-900 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-zinc-700'
+								className='inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-ink px-6 py-3 text-sm font-medium text-cream transition-colors hover:bg-ink/85'
 							>
 								Read the Docs
 								<ArrowRight className='h-4 w-4' />
diff --git a/website/src/components/marketing/solutions/GetStartedPage.tsx b/website/src/components/marketing/solutions/GetStartedPage.tsx
index 3f6cfd6127..8b0b9431f3 100644
--- a/website/src/components/marketing/solutions/GetStartedPage.tsx
+++ b/website/src/components/marketing/solutions/GetStartedPage.tsx
@@ -1,146 +1,11 @@
 'use client';
 
-import { useState, useEffect, useRef, useCallback } from 'react';
+import { useState } from 'react';
 import { motion } from 'framer-motion';
 import { Check, Copy, ArrowRight } from 'lucide-react';
 
-// --- Conway's Game of Life Background ---
-const GameOfLife = () => {
-	const canvasRef = useRef<HTMLCanvasElement>(null);
-	const gridRef = useRef<boolean[][]>([]);
-	const animationRef = useRef<number>();
-
-	const CELL_SIZE = 16;
-	const UPDATE_INTERVAL = 150;
-
-	const initGrid = useCallback((cols: number, rows: number) => {
-		const grid: boolean[][] = [];
-		for (let i = 0; i < rows; i++) {
-			grid[i] = [];
-			for (let j = 0; j < cols; j++) {
-				// Sparse random initialization
-				grid[i][j] = Math.random() < 0.15;
-			}
-		}
-		return grid;
-	}, []);
-
-	const countNeighbors = useCallback((grid: boolean[][], x: number, y: number, rows: number, cols: number) => {
-		let count = 0;
-		for (let i = -1; i <= 1; i++) {
-			for (let j = -1; j <= 1; j++) {
-				if (i === 0 && j === 0) continue;
-				const ni = (y + i + rows) % rows;
-				const nj = (x + j + cols) % cols;
-				if (grid[ni][nj]) count++;
-			}
-		}
-		return count;
-	}, []);
-
-	const nextGeneration = useCallback((grid: boolean[][], rows: number, cols: number) => {
-		const newGrid: boolean[][] = [];
-		for (let i = 0; i < rows; i++) {
-			newGrid[i] = [];
-			for (let j = 0; j < cols; j++) {
-				const neighbors = countNeighbors(grid, j, i, rows, cols);
-				if (grid[i][j]) {
-					newGrid[i][j] = neighbors === 2 || neighbors === 3;
-				} else {
-					newGrid[i][j] = neighbors === 3;
-				}
-			}
-		}
-		return newGrid;
-	}, [countNeighbors]);
-
-	useEffect(() => {
-		const canvas = canvasRef.current;
-		if (!canvas) return;
-
-		const ctx = canvas.getContext('2d');
-		if (!ctx) return;
-
-		const resize = () => {
-			canvas.width = canvas.offsetWidth;
-			canvas.height = canvas.offsetHeight;
-			const cols = Math.ceil(canvas.width / CELL_SIZE);
-			const rows = Math.ceil(canvas.height / CELL_SIZE);
-			gridRef.current = initGrid(cols, rows);
-		};
-
-		resize();
-		window.addEventListener('resize', resize);
-
-		let lastUpdate = 0;
-
-		const draw = (timestamp: number) => {
-			if (!ctx || !canvas) return;
-
-			if (timestamp - lastUpdate > UPDATE_INTERVAL) {
-				const cols = Math.ceil(canvas.width / CELL_SIZE);
-				const rows = Math.ceil(canvas.height / CELL_SIZE);
-
-				// Occasionally add new cells to keep it alive
-				if (Math.random() < 0.02) {
-					const rx = Math.floor(Math.random() * cols);
-					const ry = Math.floor(Math.random() * rows);
-					for (let i = -1; i <= 1; i++) {
-						for (let j = -1; j <= 1; j++) {
-							const ni = (ry + i + rows) % rows;
-							const nj = (rx + j + cols) % cols;
-							if (gridRef.current[ni] && Math.random() < 0.5) {
-								gridRef.current[ni][nj] = true;
-							}
-						}
-					}
-				}
-
-				gridRef.current = nextGeneration(gridRef.current, rows, cols);
-				lastUpdate = timestamp;
-			}
-
-			ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-			const cols = Math.ceil(canvas.width / CELL_SIZE);
-			const rows = Math.ceil(canvas.height / CELL_SIZE);
-
-			for (let i = 0; i < rows; i++) {
-				for (let j = 0; j < cols; j++) {
-					if (gridRef.current[i]?.[j]) {
-						ctx.fillStyle = 'rgba(228, 228, 231, 0.6)'; // zinc-200 with transparency
-						ctx.fillRect(
-							j * CELL_SIZE + 1,
-							i * CELL_SIZE + 1,
-							CELL_SIZE - 2,
-							CELL_SIZE - 2
-						);
-					}
-				}
-			}
-
-			animationRef.current = requestAnimationFrame(draw);
-		};
-
-		animationRef.current = requestAnimationFrame(draw);
-
-		return () => {
-			window.removeEventListener('resize', resize);
-			if (animationRef.current) {
-				cancelAnimationFrame(animationRef.current);
-			}
-		};
-	}, [initGrid, nextGeneration]);
-
-	return (
-		<canvas
-			ref={canvasRef}
-			className='absolute inset-0 w-full h-full'
-			style={{ opacity: 0.8 }}
-		/>
-	);
-};
-
+// The single ink moment on this page: an InkChip-style command strip with a
+// copy affordance. Kept local because the shared InkChip has no copy button.
 const CopyCommand = ({ command }: { command: string }) => {
 	const [copied, setCopied] = useState(false);
 
@@ -151,14 +16,17 @@ const CopyCommand = ({ command }: { command: string }) => {
 	};
 
 	return (
-		<div className='group relative flex items-center gap-3 rounded-xl border border-zinc-200 bg-zinc-50 px-6 py-4 font-mono text-sm'>
-			<span className='text-zinc-400'>$</span>
-			<code className='flex-1 text-zinc-900'>{command}</code>
+		<div className='selection-paper group relative flex items-center gap-3 rounded-lg border border-ink/20 bg-ink px-6 py-4 font-mono text-sm text-cream/85'>
+			<span aria-hidden='true' className='select-none text-sage'>
+				$
+			</span>
+			<code className='flex-1 text-left'>{command}</code>
 			<button
 				onClick={handleCopy}
-				className='flex h-8 w-8 items-center justify-center rounded-md border border-zinc-200 bg-white text-zinc-500 transition-colors hover:border-zinc-300 hover:text-zinc-900'
+				aria-label='Copy install command'
+				className='flex h-8 w-8 items-center justify-center rounded-md border border-cream/15 text-cream/60 transition-colors hover:border-cream/35 hover:text-cream'
 			>
-				{copied ? <Check className='h-4 w-4 text-emerald-500' /> : <Copy className='h-4 w-4' />}
+				{copied ? <Check className='h-4 w-4 text-sage' /> : <Copy className='h-4 w-4' />}
 			</button>
 		</div>
 	);
@@ -166,13 +34,9 @@ const CopyCommand = ({ command }: { command: string }) => {
 
 export default function GetStartedPage() {
 	return (
-		<div className='relative flex min-h-screen flex-col items-center justify-center overflow-x-hidden bg-white selection:bg-zinc-200 selection:text-zinc-900'>
-			{/* Game of Life Background */}
-			<div className='absolute inset-0 z-0'>
-				<GameOfLife />
-			</div>
+		<div className='paper-grain flex min-h-screen flex-col items-center justify-center overflow-x-hidden font-sans text-ink-soft'>
 			{/* Hero */}
-			<section className='relative z-10 px-6'>
+			<section className='px-6'>
 				<div className='mx-auto max-w-3xl text-center'>
 					<motion.div
 						initial={{ opacity: 0, y: 20 }}
@@ -180,26 +44,23 @@ export default function GetStartedPage() {
 						transition={{ duration: 0.5 }}
 						className='mb-10 flex items-center justify-center'
 					>
-						<div className='relative'>
-							<img
-								src='/images/agent-os/agentos-hero-logo.svg'
-								alt='agentOS'
-								className='h-16 w-auto md:h-20'
-							/>
-
-						</div>
+						<img
+							src='/images/agent-os/agentos-hero-logo.svg'
+							alt='agentOS'
+							className='h-16 w-auto md:h-20'
+						/>
 					</motion.div>
 
 					<motion.div
 						initial={{ opacity: 0, y: 20 }}
 						animate={{ opacity: 1, y: 0 }}
 						transition={{ duration: 0.5, delay: 0.1 }}
-						className='mx-auto max-w-xl flex flex-col gap-4'
+						className='mx-auto flex max-w-xl flex-col gap-4'
 					>
 						<CopyCommand command='npm install rivetkit' />
 						<a
 							href='/docs/agent-os/quickstart'
-							className='inline-flex items-center justify-center gap-3 rounded-md bg-zinc-900 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-zinc-700'
+							className='inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border border-ink/20 px-4 py-2 text-sm text-ink-soft transition-colors hover:border-ink/40 hover:text-ink'
 						>
 							Quickstart Guide
 							<ArrowRight className='h-4 w-4' />
diff --git a/website/src/components/marketing/solutions/RegistryPage.tsx b/website/src/components/marketing/solutions/RegistryPage.tsx
deleted file mode 100644
index ce4bf4fd64..0000000000
--- a/website/src/components/marketing/solutions/RegistryPage.tsx
+++ /dev/null
@@ -1,292 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import {
-	Search,
-	FolderOpen,
-	Database,
-	Globe,
-	Terminal,
-	Shield,
-	Package,
-	Code,
-	Zap,
-	GitBranch,
-	Cloud,
-	Lock,
-	Cpu,
-	HardDrive,
-	Network,
-	FileCode,
-	Box,
-	Check,
-	Copy,
-} from 'lucide-react';
-
-// --- Registry Item Data ---
-interface RegistryItem {
-	name: string;
-	description: string;
-	category: string;
-	icon: React.ComponentType<{ className?: string }>;
-	downloads: string;
-	version: string;
-	featured?: boolean;
-}
-
-const registryItems: RegistryItem[] = [
-	// File Systems
-	{ name: 's3-filesystem', description: 'Mount S3 buckets as a virtual file system for agents', category: 'File Systems', icon: FolderOpen, downloads: '12.4k', version: '1.2.0', featured: true },
-	{ name: 'google-drive-fs', description: 'Mount Google Drive as a file system', category: 'File Systems', icon: FolderOpen, downloads: '6.3k', version: '1.0.2' },
-	{ name: 'azure-blob-fs', description: 'Mount Azure Blob Storage as a file system', category: 'File Systems', icon: Cloud, downloads: '3.8k', version: '1.0.1' },
-	{ name: 'dropbox-fs', description: 'Mount Dropbox folders as a file system', category: 'File Systems', icon: FolderOpen, downloads: '2.1k', version: '0.9.0' },
-	{ name: 'local-fs', description: 'Secure access to host file system with sandboxing', category: 'File Systems', icon: HardDrive, downloads: '18.2k', version: '2.0.0' },
-
-	// Databases
-	{ name: 'sqlite-driver', description: 'SQLite database driver with full SQL support', category: 'Databases', icon: Database, downloads: '8.7k', version: '2.0.1', featured: true },
-	{ name: 'postgres-driver', description: 'PostgreSQL database driver with connection pooling', category: 'Databases', icon: Database, downloads: '9.8k', version: '1.3.0' },
-	{ name: 'redis-cache', description: 'Redis caching layer for agent state', category: 'Databases', icon: Zap, downloads: '5.9k', version: '1.0.0' },
-	{ name: 'mongodb-driver', description: 'MongoDB driver with full document support', category: 'Databases', icon: Database, downloads: '4.2k', version: '1.1.0' },
-	{ name: 'mysql-driver', description: 'MySQL and MariaDB database driver', category: 'Databases', icon: Database, downloads: '3.5k', version: '1.0.0' },
-
-	// Integrations
-	{ name: 'github-integration', description: 'Clone, commit, and push to GitHub repositories', category: 'Integrations', icon: GitBranch, downloads: '15.2k', version: '1.5.3', featured: true },
-	{ name: 'vercel-deploy', description: 'Deploy to Vercel directly from agent workflows', category: 'Integrations', icon: Globe, downloads: '7.2k', version: '2.1.0' },
-	{ name: 'slack-notifications', description: 'Send notifications and updates to Slack channels', category: 'Integrations', icon: Globe, downloads: '4.8k', version: '1.2.0' },
-	{ name: 'linear-integration', description: 'Create and manage Linear issues from agents', category: 'Integrations', icon: Box, downloads: '2.9k', version: '1.0.0' },
-	{ name: 'notion-connector', description: 'Read and write to Notion databases and pages', category: 'Integrations', icon: FileCode, downloads: '3.4k', version: '1.1.0' },
-
-	// Tools
-	{ name: 'shell-executor', description: 'Secure shell command execution with sandboxing', category: 'Tools', icon: Terminal, downloads: '21.1k', version: '3.0.0', featured: true },
-	{ name: 'docker-runner', description: 'Run Docker containers within agent sessions', category: 'Tools', icon: Box, downloads: '11.3k', version: '1.4.2' },
-	{ name: 'code-formatter', description: 'Format code with Prettier, Black, and more', category: 'Tools', icon: Code, downloads: '6.7k', version: '1.2.0' },
-	{ name: 'test-runner', description: 'Run tests with Jest, Pytest, and other frameworks', category: 'Tools', icon: Cpu, downloads: '5.4k', version: '1.0.0' },
-	{ name: 'package-manager', description: 'Install npm, pip, and cargo packages securely', category: 'Tools', icon: Package, downloads: '14.2k', version: '2.0.0' },
-
-	// Security
-	{ name: 'network-proxy', description: 'Configurable network proxy with allowlist support', category: 'Security', icon: Network, downloads: '4.5k', version: '1.1.0' },
-	{ name: 'secrets-manager', description: 'Secure secrets injection from various providers', category: 'Security', icon: Lock, downloads: '8.1k', version: '2.0.0' },
-	{ name: 'rate-limiter', description: 'Rate limiting for API calls and resource usage', category: 'Security', icon: Shield, downloads: '3.2k', version: '1.0.0' },
-	{ name: 'audit-logger', description: 'Comprehensive audit logging for compliance', category: 'Security', icon: FileCode, downloads: '2.8k', version: '1.0.0' },
-
-	// Sandboxes
-	{ name: 'e2b-sandbox', description: 'Run agents in E2B cloud sandboxes', category: 'Sandboxes', icon: Cloud, downloads: '9.2k', version: '1.2.0', featured: true },
-	{ name: 'modal-sandbox', description: 'Execute code in Modal serverless containers', category: 'Sandboxes', icon: Box, downloads: '6.8k', version: '1.0.0' },
-	{ name: 'fly-machines', description: 'Spin up Fly.io machines for isolated execution', category: 'Sandboxes', icon: Globe, downloads: '4.1k', version: '1.1.0' },
-	{ name: 'docker-sandbox', description: 'Local Docker container sandboxing', category: 'Sandboxes', icon: Box, downloads: '12.5k', version: '2.0.0' },
-	{ name: 'firecracker-vm', description: 'Firecracker microVM isolation for high security', category: 'Sandboxes', icon: Shield, downloads: '3.4k', version: '0.9.0' },
-];
-
-const categories = ['All', 'Sandboxes', 'File Systems', 'Databases', 'Integrations', 'Tools', 'Security'];
-
-// --- Copy Button ---
-const CopyButton = ({ text }: { text: string }) => {
-	const [copied, setCopied] = useState(false);
-
-	const handleCopy = async () => {
-		await navigator.clipboard.writeText(text);
-		setCopied(true);
-		setTimeout(() => setCopied(false), 2000);
-	};
-
-	return (
-		<button
-			onClick={handleCopy}
-			className='flex h-8 w-8 items-center justify-center rounded-lg bg-zinc-100 text-zinc-500 transition-colors hover:bg-zinc-200 hover:text-zinc-700'
-		>
-			{copied ? <Check className='h-4 w-4 text-green-600' /> : <Copy className='h-4 w-4' />}
-		</button>
-	);
-};
-
-// --- Hero ---
-const Hero = () => (
-	<section className='relative px-6 pt-32 pb-16 md:pt-40 md:pb-24'>
-		<div className='mx-auto max-w-5xl'>
-			<motion.div
-				initial={{ opacity: 0, y: 20 }}
-				animate={{ opacity: 1, y: 0 }}
-				transition={{ duration: 0.5 }}
-				className='text-center'
-			>
-				<h1 className='mb-6 text-4xl font-normal tracking-tight text-zinc-900 md:text-6xl'>
-					agentOS Registry
-				</h1>
-				<p className='mx-auto max-w-2xl text-lg text-zinc-500'>
-					Pre-built tools, integrations, and capabilities for your agents.<br />
-					From file systems to databases to API connectors.
-				</p>
-				<div className='mt-6 flex items-center justify-center gap-4'>
-					<a
-						href='https://github.com/rivet-dev/agent-os/blob/main/registry/CONTRIBUTING.md'
-						target='_blank'
-						rel='noopener noreferrer'
-						className='inline-flex items-center gap-2 rounded-lg border border-zinc-200 bg-white px-4 py-2 text-sm text-zinc-600 transition-colors hover:border-zinc-300 hover:text-zinc-900'
-					>
-						Publish a package
-					</a>
-					<a
-						href='https://github.com/rivet-dev/agent-os/issues'
-						target='_blank'
-						rel='noopener noreferrer'
-						className='inline-flex items-center gap-2 rounded-lg border border-zinc-200 bg-white px-4 py-2 text-sm text-zinc-600 transition-colors hover:border-zinc-300 hover:text-zinc-900'
-					>
-						Request an extension
-					</a>
-				</div>
-			</motion.div>
-		</div>
-	</section>
-);
-
-// --- Search and Filter ---
-const SearchAndFilter = ({
-	search,
-	setSearch,
-	activeCategory,
-	setActiveCategory,
-}: {
-	search: string;
-	setSearch: (s: string) => void;
-	activeCategory: string;
-	setActiveCategory: (c: string) => void;
-}) => (
-	<div className='mx-auto max-w-5xl px-6'>
-		<motion.div
-			initial={{ opacity: 0, y: 20 }}
-			animate={{ opacity: 1, y: 0 }}
-			transition={{ duration: 0.5, delay: 0.1 }}
-			className='mb-8'
-		>
-			{/* Search */}
-			<div className='relative mb-6'>
-				<Search className='absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-zinc-400' />
-				<input
-					type='text'
-					placeholder='Search packages...'
-					value={search}
-					onChange={(e) => setSearch(e.target.value)}
-					className='w-full rounded-xl border border-zinc-200 bg-white py-4 pl-12 pr-4 text-zinc-900 placeholder-zinc-400 outline-none transition-colors focus:border-zinc-400'
-				/>
-			</div>
-
-			{/* Categories */}
-			<div className='flex flex-wrap gap-2'>
-				{categories.map((cat) => (
-					<button
-						key={cat}
-						onClick={() => setActiveCategory(cat)}
-						className={`relative rounded-lg px-4 py-2 text-sm transition-colors ${
-							activeCategory === cat
-								? 'text-white'
-								: 'bg-zinc-100 text-zinc-600 hover:bg-zinc-200'
-						}`}
-					>
-						{activeCategory === cat && (
-							<motion.div
-								layoutId='activeCategory'
-								className='absolute inset-0 rounded-lg bg-zinc-900'
-								transition={{ type: 'spring', bounce: 0.2, duration: 0.4 }}
-							/>
-						)}
-						<span className='relative z-10'>{cat}</span>
-					</button>
-				))}
-			</div>
-		</motion.div>
-	</div>
-);
-
-// --- Package Card ---
-const PackageCard = ({ item }: { item: RegistryItem }) => {
-	const Icon = item.icon;
-	const installCommand = `npm install @agentos/${item.name}`;
-
-	return (
-		<div
-			className='group relative rounded-2xl border border-zinc-200 bg-white p-6 transition-all hover:border-zinc-300 hover:shadow-lg'
-		>
-			<div className='mb-4 flex items-start justify-between'>
-				<div className='flex h-12 w-12 items-center justify-center rounded-xl bg-zinc-100'>
-					<Icon className='h-6 w-6 text-zinc-600' />
-				</div>
-			</div>
-			<h3 className='mb-1 font-mono text-base font-medium text-zinc-900'>
-				{item.name}
-			</h3>
-			<p className='mb-4 text-sm leading-relaxed text-zinc-500'>
-				{item.description}
-			</p>
-
-			{/* Install command */}
-			<div className='flex items-center gap-2 rounded-lg bg-zinc-50 px-3 py-2'>
-				<code className='flex-1 truncate font-mono text-xs text-zinc-600'>
-					{installCommand}
-				</code>
-				<CopyButton text={installCommand} />
-			</div>
-		</div>
-	);
-};
-
-// --- Package Grid ---
-const PackageGrid = ({ items }: { items: RegistryItem[] }) => (
-	<div className='mx-auto max-w-5xl px-6 pb-24'>
-		<AnimatePresence mode='wait'>
-			{items.length === 0 ? (
-				<motion.div
-					key='empty'
-					initial={{ opacity: 0 }}
-					animate={{ opacity: 1 }}
-					exit={{ opacity: 0 }}
-					className='py-16 text-center text-zinc-500'
-				>
-					No packages found matching your criteria.
-				</motion.div>
-			) : (
-				<motion.div
-					key='grid'
-					initial={{ opacity: 0 }}
-					animate={{ opacity: 1 }}
-					exit={{ opacity: 0 }}
-					className='grid gap-6 md:grid-cols-2 lg:grid-cols-3'
-				>
-					{items.map((item) => (
-						<PackageCard key={item.name} item={item} />
-					))}
-				</motion.div>
-			)}
-		</AnimatePresence>
-	</div>
-);
-
-// --- Main Page ---
-export default function RegistryPage() {
-	const [search, setSearch] = useState('');
-	const [activeCategory, setActiveCategory] = useState('All');
-
-	const filteredItems = registryItems.filter((item) => {
-		const matchesSearch =
-			item.name.toLowerCase().includes(search.toLowerCase()) ||
-			item.description.toLowerCase().includes(search.toLowerCase());
-		const matchesCategory =
-			activeCategory === 'All' || item.category === activeCategory;
-		return matchesSearch && matchesCategory;
-	});
-
-	return (
-		<div className='min-h-screen overflow-x-hidden bg-white font-sans text-zinc-600 selection:bg-zinc-200 selection:text-zinc-900'>
-			<main>
-				<Hero />
-				<SearchAndFilter
-					search={search}
-					setSearch={setSearch}
-					activeCategory={activeCategory}
-					setActiveCategory={setActiveCategory}
-				/>
-				<PackageGrid items={filteredItems} />
-			</main>
-		</div>
-	);
-}
diff --git a/website/src/components/marketing/solutions/TimelinePage.tsx b/website/src/components/marketing/solutions/TimelinePage.tsx
index 34d3e41bff..c192914e92 100644
--- a/website/src/components/marketing/solutions/TimelinePage.tsx
+++ b/website/src/components/marketing/solutions/TimelinePage.tsx
@@ -1,6 +1,9 @@
 'use client';
 
 import { motion } from 'framer-motion';
+import { useEffect, useRef } from 'react';
+import { InkPanel } from '@/components/marketing/editorial/InkPanel';
+import { HERO_H1_CLASS, SECTION_H2_CLASS, CAPTION_CLASS } from '@/components/marketing/typography';
 
 // --- Timeline Era ---
 interface EraProps {
@@ -23,25 +26,25 @@ const Era = ({ year, title, lead, body, children, future, delay = 0 }: EraProps)
 	>
 		<div className='flex items-start gap-4 md:flex-col md:items-center'>
 			<span
-				className={`font-mono text-sm font-medium ${future ? 'text-zinc-900' : 'text-zinc-500'}`}
+				className={`font-mono text-sm font-medium ${future ? 'text-pine' : 'text-ink-faint'}`}
 			>
 				{year}
 			</span>
 			<div
-				className={`hidden h-full w-px md:block ${future ? 'bg-zinc-900' : 'bg-zinc-200'}`}
+				className={`hidden h-full w-px md:block ${future ? 'bg-pine/60' : 'bg-pine/25'}`}
 			/>
 		</div>
 		<div className='pb-16'>
 			<h2
-				className={`mb-4 tracking-tight text-zinc-900 ${future ? 'text-3xl font-normal md:text-4xl' : 'text-2xl font-normal md:text-3xl'}`}
+				className={`mb-4 font-medium tracking-[-0.015em] text-ink ${future ? 'text-3xl md:text-4xl' : 'text-2xl md:text-3xl'}`}
 			>
 				{title}
 			</h2>
-			<p className='mb-4 text-base leading-relaxed text-zinc-500 md:text-lg'>
+			<p className='mb-4 text-base leading-relaxed text-ink-soft md:text-lg'>
 				{lead}
 			</p>
 			{body && (
-				<p className='mb-6 text-sm leading-relaxed text-zinc-500 md:text-base'>
+				<p className='mb-6 text-sm leading-relaxed text-ink-soft md:text-base'>
 					{body}
 				</p>
 			)}
@@ -50,18 +53,69 @@ const Era = ({ year, title, lead, body, children, future, delay = 0 }: EraProps)
 	</motion.div>
 );
 
+// Archival exhibit with a printed catalog caption that keeps the
+// attribution link.
+const ArchivalPlate = ({
+	src,
+	alt,
+	caption,
+	className,
+}: {
+	src: string;
+	alt: string;
+	caption: React.ReactNode;
+	className?: string;
+}) => (
+	<figure className={`max-w-2xl ${className ?? ''}`}>
+		<img src={src} alt={alt} className='block h-auto w-full' loading='lazy' />
+		<figcaption className={`${CAPTION_CLASS} mt-3 [&_a]:underline [&_a:hover]:text-ink-soft`}>
+			{caption}
+		</figcaption>
+	</figure>
+);
+
 const PrincipleChip = ({ label, text }: { label: string; text: string }) => (
-	<div className='border-t border-zinc-200 pt-4'>
-		<span className='mb-2 block font-mono text-[11px] font-medium uppercase tracking-wider text-zinc-500'>
+	<div className='border border-ink/10 bg-white/55 p-5'>
+		<span className='mb-2 block font-mono text-[11px] font-medium uppercase tracking-[0.16em] text-ink-faint'>
 			{label}
 		</span>
-		<p className='text-sm leading-relaxed text-zinc-500'>{text}</p>
+		<p className='text-sm leading-relaxed text-ink-soft'>{text}</p>
 	</div>
 );
 
 export default function TimelinePage() {
+	const timelineRef = useRef<HTMLDivElement>(null);
+	const railRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		let frame = 0;
+		const update = () => {
+			frame = 0;
+			const container = timelineRef.current;
+			const rail = railRef.current;
+			if (!container || !rail) return;
+			const rect = container.getBoundingClientRect();
+			// The rail starts filling once the timeline reaches the lower part
+			// of the viewport and is full once its end passes that line.
+			const line = window.innerHeight * 0.6;
+			const progress = Math.min(1, Math.max(0, (line - rect.top) / rect.height));
+			rail.style.transform = `scaleY(${progress})`;
+		};
+		const onScroll = () => {
+			if (!frame) frame = requestAnimationFrame(update);
+		};
+		update();
+		window.addEventListener('scroll', onScroll, { passive: true });
+		window.addEventListener('resize', onScroll);
+		return () => {
+			if (frame) cancelAnimationFrame(frame);
+			window.removeEventListener('scroll', onScroll);
+			window.removeEventListener('resize', onScroll);
+		};
+	}, []);
+
 	return (
-		<div className='min-h-screen overflow-x-hidden bg-white font-sans text-zinc-600 selection:bg-zinc-200 selection:text-zinc-900'>
+		<div className='paper-grain min-h-screen overflow-x-hidden font-sans text-ink-soft'>
 			<main>
 				{/* Hero */}
 				<section className='relative flex min-h-[60svh] flex-col items-center justify-center px-6 pt-32'>
@@ -70,7 +124,7 @@ export default function TimelinePage() {
 							initial={{ opacity: 0, y: 20 }}
 							animate={{ opacity: 1, y: 0 }}
 							transition={{ duration: 0.5 }}
-							className='mb-4 text-4xl font-normal leading-[1.1] tracking-tight text-zinc-900 md:text-6xl'
+							className={`mb-4 ${HERO_H1_CLASS}`}
 						>
 							From Unix to Agents
 						</motion.h1>
@@ -78,7 +132,7 @@ export default function TimelinePage() {
 							initial={{ opacity: 0, y: 20 }}
 							animate={{ opacity: 1, y: 0 }}
 							transition={{ duration: 0.5, delay: 0.05 }}
-							className='text-lg text-zinc-500 md:text-xl'
+							className='text-lg text-ink-soft md:text-xl'
 						>
 							The operating system is being reinvented. Again.
 						</motion.p>
@@ -86,33 +140,39 @@ export default function TimelinePage() {
 				</section>
 
 				{/* Timeline */}
-				<section className='border-t border-zinc-200 py-16 md:py-24'>
-					<div className='mx-auto max-w-7xl px-6'>
+				<section className='border-t border-ink/10 py-16 md:py-32'>
+					<div ref={timelineRef} className='relative mx-auto max-w-7xl px-6'>
+							{/* Scroll-linked rail that draws down the timeline as you read */}
+							<div className='pointer-events-none absolute bottom-0 left-[73px] top-0 hidden w-px bg-pine/15 md:block'>
+								<div
+									ref={railRef}
+									className='h-full w-full origin-top bg-pine transition-transform duration-150 ease-out'
+									style={{ transform: 'scaleY(0)' }}
+								/>
+							</div>
 						<Era
 							year='1969'
 							title='The Unix Foundation'
 							lead='Before Unix, every computer spoke a different language. Programs written for one machine couldn&apos;t run on another. Computing was fragmented, expensive, and inaccessible.'
 							body='Unix changed everything. It introduced a radical idea: a portable operating system with a universal interface. Files, processes, pipes, permissions. Simple primitives that composed into infinite complexity.'
 						>
-							<div className='mb-6 max-w-2xl overflow-hidden rounded-lg border border-zinc-200'>
-								<img
-									src='https://assets.rivet.dev/website/public/images/agent-os/ken-thompson-dennis-ritchie-1973.jpg'
-									alt='Ken Thompson and Dennis Ritchie, creators of Unix, 1973'
-									className='w-full object-cover opacity-90'
-									loading='lazy'
-								/>
-								<p className='bg-zinc-50 px-4 py-2 text-xs text-zinc-600'>
-									Ken Thompson and Dennis Ritchie, 1973.{' '}
-									<a
-										href='https://commons.wikimedia.org/w/index.php?curid=31308'
-										className='underline hover:text-zinc-600'
-										target='_blank'
-										rel='noopener noreferrer'
-									>
-										Public Domain
-									</a>
-								</p>
-							</div>
+							<ArchivalPlate
+								src='https://assets.rivet.dev/website/public/images/agent-os/ken-thompson-dennis-ritchie-1973.jpg'
+								alt='Ken Thompson and Dennis Ritchie, creators of Unix, 1973'
+								className='mb-6'
+								caption={
+									<>
+										Ken Thompson and Dennis Ritchie, 1973.{' '}
+										<a
+											href='https://commons.wikimedia.org/w/index.php?curid=31308'
+											target='_blank'
+											rel='noopener noreferrer'
+										>
+											Public Domain
+										</a>
+									</>
+								}
+							/>
 							<div className='grid grid-cols-1 gap-3 sm:grid-cols-3'>
 								<PrincipleChip
 									label='Philosophy'
@@ -136,25 +196,23 @@ export default function TimelinePage() {
 							body='This openness sparked an explosion of innovation. The kernel became the backbone of servers, phones, cars, and spacecraft. Open source became the default way to build software.'
 							delay={0.1}
 						>
-							<div className='mt-4 max-w-2xl overflow-hidden rounded-lg border border-zinc-200'>
-								<img
-									src='https://assets.rivet.dev/website/public/images/agent-os/first-web-server.jpg'
-									alt='The first web server at CERN'
-									className='w-full object-cover opacity-90'
-									loading='lazy'
-								/>
-								<p className='bg-zinc-50 px-4 py-2 text-xs text-zinc-600'>
-									The first web server at CERN. Photo by Coolcaesar,{' '}
-									<a
-										href='https://commons.wikimedia.org/w/index.php?curid=395096'
-										className='underline hover:text-zinc-600'
-										target='_blank'
-										rel='noopener noreferrer'
-									>
-										CC BY-SA 3.0
-									</a>
-								</p>
-							</div>
+							<ArchivalPlate
+								src='https://assets.rivet.dev/website/public/images/agent-os/first-web-server.jpg'
+								alt='The first web server at CERN'
+								className='mt-4'
+								caption={
+									<>
+										The first web server at CERN. Photo by Coolcaesar,{' '}
+										<a
+											href='https://commons.wikimedia.org/w/index.php?curid=395096'
+											target='_blank'
+											rel='noopener noreferrer'
+										>
+											CC BY-SA 3.0
+										</a>
+									</>
+								}
+							/>
 						</Era>
 
 						<Era
@@ -164,25 +222,23 @@ export default function TimelinePage() {
 							body='But the fundamental model stayed the same: humans writing code, humans operating systems, humans in the loop at every step. The cloud made computing elastic, but it was still computing for humans.'
 							delay={0.2}
 						>
-							<div className='mb-6 max-w-2xl overflow-hidden rounded-lg border border-zinc-200'>
-								<img
-									src='https://assets.rivet.dev/website/public/images/agent-os/nersc-server-racks.jpg'
-									alt='Server racks at NERSC'
-									className='w-full object-cover opacity-90'
-									loading='lazy'
-								/>
-								<p className='bg-zinc-50 px-4 py-2 text-xs text-zinc-600'>
-									Server racks at NERSC. Photo by Derrick Coetzee,{' '}
-									<a
-										href='https://commons.wikimedia.org/w/index.php?curid=17445617'
-										className='underline hover:text-zinc-600'
-										target='_blank'
-										rel='noopener noreferrer'
-									>
-										CC0
-									</a>
-								</p>
-							</div>
+							<ArchivalPlate
+								src='https://assets.rivet.dev/website/public/images/agent-os/nersc-server-racks.jpg'
+								alt='Server racks at NERSC'
+								className='mb-6'
+								caption={
+									<>
+										Server racks at NERSC. Photo by Derrick Coetzee,{' '}
+										<a
+											href='https://commons.wikimedia.org/w/index.php?curid=17445617'
+											target='_blank'
+											rel='noopener noreferrer'
+										>
+											CC0
+										</a>
+									</>
+								}
+							/>
 							<div className='grid grid-cols-1 gap-3 sm:grid-cols-2'>
 								<PrincipleChip
 									label='Model'
@@ -202,62 +258,65 @@ export default function TimelinePage() {
 							body='But agents have different needs than humans. They need persistent memory that survives crashes. They need secure execution environments they can&apos;t escape. They need real-time communication with other agents and systems.'
 							future
 						>
-							<div className='mb-6 max-w-2xl overflow-hidden rounded-lg border border-zinc-200'>
-								<img
-									src='https://assets.rivet.dev/website/public/images/agent-os/data-flock.jpg'
-									alt='Data flock (digits) by Philipp Schmitt'
-									className='w-full object-cover opacity-90'
-									loading='lazy'
-								/>
-								<p className='bg-zinc-50 px-4 py-2 text-xs text-zinc-600'>
-									"Data flock (digits)" by Philipp Schmitt,{' '}
-									<a
-										href='https://commons.wikimedia.org/wiki/File:Data_flock_(digits)_by_Philipp_Schmitt.jpg'
-										className='underline hover:text-zinc-600'
-										target='_blank'
-										rel='noopener noreferrer'
-									>
-										CC BY-SA 4.0
-									</a>
-								</p>
-							</div>
+							<ArchivalPlate
+								src='https://assets.rivet.dev/website/public/images/agent-os/data-flock.jpg'
+								alt='Data flock (digits) by Philipp Schmitt'
+								className='mb-6'
+								caption={
+									<>
+										"Data flock (digits)" by Philipp Schmitt,{' '}
+										<a
+											href='https://commons.wikimedia.org/wiki/File:Data_flock_(digits)_by_Philipp_Schmitt.jpg'
+											target='_blank'
+											rel='noopener noreferrer'
+										>
+											CC BY-SA 4.0
+										</a>
+									</>
+								}
+							/>
 							<motion.p
 								initial={{ opacity: 0 }}
 								whileInView={{ opacity: 1 }}
 								viewport={{ once: true }}
 								transition={{ duration: 0.5, delay: 0.2 }}
-								className='mb-8 text-lg font-medium text-zinc-900'
+								className='mb-8 text-lg font-medium text-ink'
 							>
 								They need an operating system built for them.
 							</motion.p>
 
-							<div className='border-t border-zinc-200 pt-6'>
-								<div className='mb-4 flex gap-3'>
-									<div className='h-6 flex-1 rounded bg-zinc-200' />
-									<div className='h-6 flex-[3] rounded bg-zinc-900' />
-								</div>
-								<div className='flex justify-between text-xs text-zinc-500'>
-									<span>Human operators</span>
-									<span>AI agents</span>
+							<InkPanel
+								caption='Fig. 05 — Computing tasks by operator'
+								className='max-w-2xl'
+							>
+								<div className='p-6'>
+									<div className='mb-4 flex gap-3'>
+										<div className='h-6 flex-1 rounded bg-cream/15' />
+										<div className='h-6 flex-[3] rounded bg-sage' />
+									</div>
+									<div className='flex justify-between font-mono text-[11px] uppercase tracking-[0.16em] text-cream/45'>
+										<span>Human operators</span>
+										<span>AI agents</span>
+									</div>
+									<p className='mt-4 text-sm leading-relaxed text-cream/65'>
+										Soon, more computing tasks will be performed by AI agents than
+										by human operators.
+									</p>
 								</div>
-								<p className='mt-3 text-sm text-zinc-500'>
-									Soon, more computing tasks will be performed by AI agents than
-									by human operators.
-								</p>
-							</div>
+							</InkPanel>
 						</Era>
 					</div>
 				</section>
 
 				{/* CTA */}
-				<section className='border-t border-zinc-200 px-6 py-16 md:py-28 text-center'>
+				<section className='border-t border-ink/10 px-6 py-16 text-center md:py-28'>
 					<div className='mx-auto max-w-3xl'>
 						<motion.h2
 							initial={{ opacity: 0, y: 20 }}
 							whileInView={{ opacity: 1, y: 0 }}
 							viewport={{ once: true }}
 							transition={{ duration: 0.5 }}
-							className='mb-4 text-2xl font-normal tracking-tight text-zinc-900 md:text-4xl'
+							className={`mb-4 ${SECTION_H2_CLASS}`}
 						>
 							The shift is happening now.
 						</motion.h2>
@@ -266,7 +325,7 @@ export default function TimelinePage() {
 							whileInView={{ opacity: 1, y: 0 }}
 							viewport={{ once: true }}
 							transition={{ duration: 0.5, delay: 0.1 }}
-							className='mb-8 text-base leading-relaxed text-zinc-500'
+							className='mb-8 text-base leading-relaxed text-ink-soft'
 						>
 							For fifty years, we built operating systems for human operators.
 							But the next wave of computing won't be operated by humans.
@@ -277,7 +336,7 @@ export default function TimelinePage() {
 							viewport={{ once: true }}
 							transition={{ duration: 0.5, delay: 0.2 }}
 							href='/agent-os'
-							className='selection-dark inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-zinc-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-zinc-700'
+							className='inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-accent-deep px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent'
 						>
 							Explore agentOS
 						</motion.a>
diff --git a/website/src/components/marketing/solutions/page.tsx b/website/src/components/marketing/solutions/page.tsx
deleted file mode 100644
index 6996744019..0000000000
--- a/website/src/components/marketing/solutions/page.tsx
+++ /dev/null
@@ -1,542 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import {
-	Terminal,
-	Zap,
-	Globe,
-	ArrowRight,
-	Box,
-	Database,
-	Check,
-	Cpu,
-	RefreshCw,
-	Clock,
-	Cloud,
-	LayoutGrid,
-	Activity,
-	Wifi,
-	AlertCircle,
-	Gamepad2,
-	MessageSquare,
-	Bot,
-	Users,
-	FileText,
-	Workflow,
-	Gauge,
-	Eye,
-	Brain,
-	Sparkles,
-	Network,
-} from "lucide-react";
-import { motion } from "framer-motion";
-
-// --- Shared Design Components ---
-const Badge = ({ text }: { text: string }) => (
-	<div className="inline-flex items-center gap-2 rounded-full border border-white/10 px-3 py-1 text-xs text-zinc-400 mb-6">
-		<span className="h-1.5 w-1.5 rounded-full bg-[#FF4500]" />
-		{text}
-	</div>
-);
-
-const CodeBlock = ({ code, fileName = "agent.ts" }: { code: string; fileName?: string }) => {
-	const highlightLine = (line: string) => {
-		const tokens: JSX.Element[] = [];
-		let current = line;
-
-		const commentIndex = current.indexOf("//");
-		let comment = "";
-		if (commentIndex !== -1) {
-			comment = current.slice(commentIndex);
-			current = current.slice(0, commentIndex);
-		}
-
-		const parts = current.split(/([a-zA-Z0-9_$]+|"[^"]*"|'[^']*'|\s+|[(){},.;:[\]])/g).filter(Boolean);
-
-		parts.forEach((part, j) => {
-			const trimmed = part.trim();
-
-			if (["import", "from", "export", "const", "return", "async", "await", "function", "let", "var", "if", "else", "while", "true", "false", "null"].includes(trimmed)) {
-				tokens.push(<span key={j} className="text-purple-400">{part}</span>);
-			}
-			else if (["actor", "spawn", "rpc", "ai"].includes(trimmed)) {
-				tokens.push(<span key={j} className="text-blue-400">{part}</span>);
-			}
-			else if (["state", "actions", "broadcast", "c", "run", "queue", "next", "push", "history", "messages"].includes(trimmed)) {
-				tokens.push(<span key={j} className="text-blue-300">{part}</span>);
-			}
-			else if (part.startsWith('"') || part.startsWith("'")) {
-				tokens.push(<span key={j} className="text-[#FF4500]">{part}</span>);
-			}
-			else if (!isNaN(Number(trimmed)) && trimmed !== "") {
-				tokens.push(<span key={j} className="text-purple-400">{part}</span>);
-			}
-			else {
-				tokens.push(<span key={j} className="text-zinc-300">{part}</span>);
-			}
-		});
-
-		if (comment) {
-			tokens.push(<span key="comment" className="text-zinc-500">{comment}</span>);
-		}
-
-		return tokens;
-	};
-
-	return (
-		<div className="relative rounded-lg overflow-hidden border border-white/10 bg-black">
-			<div className="flex items-center justify-between px-4 py-2 border-b border-white/10 bg-white/5">
-				<div className="flex items-center gap-1.5">
-					<div className="w-2.5 h-2.5 rounded-full bg-zinc-700" />
-					<div className="w-2.5 h-2.5 rounded-full bg-zinc-700" />
-					<div className="w-2.5 h-2.5 rounded-full bg-zinc-700" />
-				</div>
-				<div className="text-xs text-zinc-500 font-mono">{fileName}</div>
-			</div>
-			<div className="p-4 overflow-x-auto">
-				<pre className="text-sm font-mono leading-relaxed text-zinc-300">
-					<code>
-						{code.split("\n").map((line, i) => (
-							<div key={i} className="table-row">
-								<span className="table-cell select-none text-right pr-4 text-zinc-600 w-8">
-									{i + 1}
-								</span>
-								<span className="table-cell">{highlightLine(line)}</span>
-							</div>
-						))}
-					</code>
-				</pre>
-			</div>
-		</div>
-	);
-};
-
-// --- Simple Feature Card ---
-const FeatureItem = ({ title, description, icon: Icon }: { title: string; description: string; icon: typeof Database }) => (
-	<div className="border-t border-white/10 pt-6">
-		<div className="mb-3 text-zinc-500">
-			<Icon className="h-4 w-4" />
-		</div>
-		<h3 className="mb-1 text-sm font-normal text-white">{title}</h3>
-		<p className="text-sm leading-relaxed text-zinc-500">{description}</p>
-	</div>
-);
-
-// --- Page Sections ---
-const Hero = () => (
-	<section className="relative overflow-hidden pb-20 pt-32 md:pb-32 md:pt-48">
-		<div className="mx-auto max-w-7xl px-6">
-			<div className="flex flex-col lg:flex-row gap-16 items-center">
-				<div className="flex-1 max-w-2xl">
-					<Badge text="Rivet for Agents" />
-
-					<motion.h1
-						initial={{ opacity: 0, y: 20 }}
-						animate={{ opacity: 1, y: 0 }}
-						transition={{ duration: 0.5 }}
-						className="mb-6 text-4xl font-normal leading-[1.1] tracking-tight text-white md:text-6xl"
-					>
-						Build AI Agents
-					</motion.h1>
-
-					<motion.p
-						initial={{ opacity: 0, y: 20 }}
-						animate={{ opacity: 1, y: 0 }}
-						transition={{ duration: 0.5, delay: 0.1 }}
-						className="mb-8 max-w-lg text-base leading-relaxed text-zinc-500"
-					>
-						LLMs are stateless. Agents shouldn't be. Rivet Actors provide the persistent memory, tool execution environment, and long-running context your agents need to thrive.
-					</motion.p>
-					<motion.div
-						initial={{ opacity: 0, y: 20 }}
-						animate={{ opacity: 1, y: 0 }}
-						transition={{ duration: 0.5, delay: 0.2 }}
-						className="flex flex-col sm:flex-row items-center gap-3"
-					>
-						<a href="/docs" className="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-white px-4 py-2 text-sm font-medium text-black transition-colors hover:bg-zinc-200">
-							Start Building
-							<ArrowRight className="h-4 w-4" />
-						</a>
-						<a href="/docs/agents" className="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border border-white/10 px-4 py-2 text-sm text-zinc-300 transition-colors hover:border-white/20 hover:text-white">
-							View Documentation
-						</a>
-					</motion.div>
-				</div>
-				<div className="flex-1 w-full max-w-xl">
-					<CodeBlock
-							fileName="support_agent.ts"
-							code={`import { actor } from "rivetkit";
-import { openai } from "@ai-sdk/openai";
-
-export const supportAgent = actor({
-  // Context window persists in memory
-  state: { history: [], ticketId: null },
-  actions: {
-    chat: async (c, message) => {
-      c.state.history.push({ role: 'user', content: message });
-      
-      // Stream thought process
-      const result = await streamText({
-        model: openai('gpt-4-turbo'),
-        messages: c.state.history,
-        onChunk: (chunk) => c.broadcast("delta", chunk)
-      });
-      // Automatically save context
-      c.state.history.push({ role: 'assistant', content: result.text });
-      return result.text;
-    }
-  }
-});`}
-						/>
-				</div>
-			</div>
-		</div>
-	</section>
-);
-
-const MemoryArchitecture = () => {
-	// Animation Step State
-	const [step, setStep] = useState(0);
-
-	useEffect(() => {
-		const interval = setInterval(() => setStep((s) => (s + 1) % 3), 2500);
-		return () => clearInterval(interval);
-	}, []);
-
-	return (
-		<section className="border-t border-white/10 py-48">
-			<div className="mx-auto max-w-7xl px-6">
-				<div className="mb-12">
-					<h2 className="mb-2 text-2xl font-normal tracking-tight text-white md:text-4xl">
-						Why Actors for Agents?
-					</h2>
-					<p className="max-w-2xl text-base leading-relaxed text-zinc-500">
-						Traditional architectures force you to fetch conversation history from a database for every single token generated. Rivet Actors keep the context hot in RAM.
-					</p>
-				</div>
-
-				<div className="grid lg:grid-cols-2 gap-12 items-center">
-					{/* Diagram */}
-					<div className="relative h-80 rounded-lg border border-white/10 bg-black flex items-center justify-center overflow-hidden">
-						{/* The Loop */}
-						<div className="relative z-10 flex items-center gap-4">
-							{/* User */}
-							<div className={`flex flex-col items-center transition-opacity duration-500 ${step === 0 ? "opacity-100" : "opacity-40"}`}>
-								<div className="w-12 h-12 rounded-full bg-white flex items-center justify-center mb-2 shadow-[0_0_20px_white]">
-									<Users className="w-6 h-6 text-black" />
-								</div>
-								<span className="text-xs font-mono text-zinc-400">User</span>
-							</div>
-
-							{/* Flow Arrow */}
-							<div className="w-16 h-[2px] bg-zinc-700 relative overflow-hidden">
-								<div className={`absolute inset-0 bg-purple-500 transition-transform duration-1000 ${step === 0 ? "translate-x-0" : "translate-x-full"}`} />
-							</div>
-
-							{/* The Actor (Memory + Compute) */}
-							<div
-								className={`relative w-40 h-40 rounded-full border-2 ${step === 1 ? "border-purple-500 shadow-[0_0_30px_rgba(168,85,247,0.3)]" : "border-zinc-700"} bg-black flex flex-col items-center justify-center transition-all duration-500`}
-							>
-								<div className="absolute inset-2 rounded-full border border-white/5 border-dashed animate-[spin_10s_linear_infinite]" />
-								<Brain className={`w-8 h-8 mb-2 transition-colors ${step === 1 ? "text-purple-400" : "text-zinc-600"}`} />
-								<div className="text-xs font-mono text-zinc-400 text-center">
-									Agent Actor
-									<br />
-									<span className="text-[10px] text-zinc-600">(Hot Context)</span>
-								</div>
-
-								{/* Tool Call Bubble */}
-								<div
-									className={`absolute -top-4 right-0 bg-zinc-800 border border-zinc-600 px-2 py-1 rounded text-[10px] text-orange-400 font-mono transition-all duration-300 ${step === 1 ? "opacity-100 translate-y-0" : "opacity-0 translate-y-2"}`}
-								>
-									Thinking...
-								</div>
-							</div>
-							{/* Flow Arrow */}
-							<div className="w-16 h-[2px] bg-zinc-700 relative overflow-hidden">
-								<div className={`absolute inset-0 bg-purple-500 transition-transform duration-1000 ${step === 2 ? "translate-x-0" : "-translate-x-full"}`} />
-							</div>
-							{/* Tool/Output */}
-							<div className={`flex flex-col items-center transition-opacity duration-500 ${step === 2 ? "opacity-100" : "opacity-40"}`}>
-								<div className="w-12 h-12 rounded-full border border-white/20 bg-zinc-900 flex items-center justify-center mb-2">
-									<Terminal className="w-5 h-5 text-white" />
-								</div>
-								<span className="text-xs font-mono text-zinc-400">Tool</span>
-							</div>
-						</div>
-					</div>
-
-					{/* Feature List */}
-					<div className="space-y-8">
-						<motion.div
-							initial={{ opacity: 0, x: 20 }}
-							whileInView={{ opacity: 1, x: 0 }}
-							viewport={{ once: true }}
-							transition={{ duration: 0.5 }}
-							className="border-t border-white/10 pt-6"
-						>
-							<div className="mb-3 text-zinc-500">
-								<Database className="w-4 h-4" />
-							</div>
-							<h3 className="mb-1 text-sm font-normal text-white">Zero-Latency Context</h3>
-							<p className="text-zinc-500 text-sm leading-relaxed">
-								Conversation history and embedding vectors stay in the Actor's heap. No database queries required to "rehydrate" the agent state for each message.
-							</p>
-						</motion.div>
-						<motion.div
-							initial={{ opacity: 0, x: 20 }}
-							whileInView={{ opacity: 1, x: 0 }}
-							viewport={{ once: true }}
-							transition={{ duration: 0.5, delay: 0.1 }}
-							className="border-t border-white/10 pt-6"
-						>
-							<div className="mb-3 text-zinc-500">
-								<Clock className="w-4 h-4" />
-							</div>
-							<h3 className="mb-1 text-sm font-normal text-white">Long-Running "Thought" Loops</h3>
-							<p className="text-zinc-500 text-sm leading-relaxed">
-								Agents often need to chain multiple tool calls (CoT). Actors can run for minutes or hours, maintaining their state throughout the entire reasoning chain without timeouts.
-							</p>
-						</motion.div>
-						<motion.div
-							initial={{ opacity: 0, x: 20 }}
-							whileInView={{ opacity: 1, x: 0 }}
-							viewport={{ once: true }}
-							transition={{ duration: 0.5, delay: 0.2 }}
-							className="border-t border-white/10 pt-6"
-						>
-							<div className="mb-3 text-zinc-500">
-								<Users className="w-4 h-4" />
-							</div>
-							<h3 className="mb-1 text-sm font-normal text-white">Multi-User Collaboration</h3>
-							<p className="text-zinc-500 text-sm leading-relaxed">
-								Since the Actor is a live process, multiple users can connect to the same Agent instance simultaneously via WebSockets to collaborate or monitor execution.
-							</p>
-						</motion.div>
-					</div>
-				</div>
-			</div>
-		</section>
-	);
-};
-
-const AgentCapabilities = () => {
-	const capabilities = [
-		{
-			title: "Streaming by Default",
-			description: "Native support for SSE and WebSocket streaming. Pipe tokens from the LLM directly to the client with zero overhead.",
-			icon: Wifi,
-		},
-		{
-			title: "Tool Execution Sandbox",
-			description: "Actors provide a secure isolation boundary. Run Python scripts or API calls without blocking your main API fleet.",
-			icon: Terminal,
-		},
-		{
-			title: "Human-in-the-Loop",
-			description: "Pause execution, wait for a human approval signal via RPC, and then resume the agent's context exactly where it left off.",
-			icon: Users,
-		},
-		{
-			title: "Scheduled Wake-ups",
-			description: "Set an alarm for your agent. It can sleep to disk and wake up in 2 days to follow up with a user automatically.",
-			icon: Clock,
-		},
-		{
-			title: "Knowledge Graph State",
-			description: "Keep a complex graph of entities in memory. Update relationships dynamically as the conversation progresses.",
-			icon: Network,
-		},
-		{
-			title: "Vendor Neutral",
-			description: "Swap between OpenAI, Anthropic, or local Llama models instantly. The Actor pattern abstracts the underlying intelligence.",
-			icon: Globe,
-		},
-	];
-
-	return (
-		<section className="border-t border-white/10 py-48">
-			<div className="mx-auto max-w-7xl px-6">
-				<div className="flex flex-col gap-12">
-					<div className="max-w-xl">
-						<h2 className="mb-2 text-2xl font-normal tracking-tight text-white md:text-4xl">Built for the Agentic Future</h2>
-						<p className="text-base leading-relaxed text-zinc-500">The infrastructure primitives you need to move beyond simple chatbots.</p>
-					</div>
-
-					<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-						{capabilities.map((cap, idx) => (
-							<FeatureItem key={idx} {...cap} />
-						))}
-					</div>
-				</div>
-			</div>
-		</section>
-	);
-};
-
-const UseCases = () => (
-	<section className="border-t border-white/10 py-48">
-		<div className="mx-auto max-w-7xl px-6">
-			<div className="grid md:grid-cols-2 gap-16 items-center">
-				<div>
-					<Badge text="Case Study" />
-					<h2 className="mb-2 text-2xl font-normal tracking-tight text-white md:text-4xl">
-						Customer Support Swarms
-					</h2>
-					<p className="mb-8 text-base leading-relaxed text-zinc-500">
-						Deploy a dedicated Actor for every single active support ticket.
-					</p>
-					<ul className="space-y-4">
-						{["Isolation: One crashed agent doesn't affect others", "Context: Full ticket history in memory (up to 128k tokens)", "Handoff: Transfer actor state to a human instantly"].map((item, i) => (
-							<li key={i} className="flex items-center gap-3 text-sm text-zinc-300">
-								<div className="flex h-5 w-5 items-center justify-center rounded-full border border-white/10 bg-white/5">
-									<Check className="h-3 w-3 text-[#FF4500]" />
-								</div>
-								{item}
-							</li>
-						))}
-					</ul>
-				</div>
-				<div className="relative rounded-lg border border-white/10 bg-black p-6">
-					<div className="flex items-center justify-between mb-6 border-b border-white/5 pb-4">
-						<div className="flex items-center gap-3">
-							<div className="flex h-8 w-8 items-center justify-center rounded-lg border border-white/10 bg-white/5">
-								<Bot className="h-4 w-4 text-white" />
-							</div>
-							<div>
-								<div className="text-sm font-medium text-white">Ticket #9402</div>
-								<div className="text-xs text-zinc-500">Agent: Active</div>
-							</div>
-						</div>
-						<div className="rounded border border-[#FF4500]/20 bg-[#FF4500]/10 px-2 py-1 text-xs text-[#FF4500]">Online</div>
-					</div>
-					<div className="space-y-3 font-mono text-sm">
-						<div className="rounded border border-white/5 bg-zinc-900 p-3 text-zinc-400">Analysing user request... accessing database...</div>
-						<div className="rounded border border-white/10 bg-white/5 p-3 text-zinc-300">Found 3 matching orders. Asking clarification...</div>
-						<div className="flex gap-2">
-							<div className="h-2 w-2 animate-bounce rounded-full bg-[#FF4500]" />
-							<div className="h-2 w-2 animate-bounce rounded-full bg-[#FF4500] delay-75" />
-							<div className="h-2 w-2 animate-bounce rounded-full bg-[#FF4500] delay-150" />
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</section>
-);
-
-const OrchestrationSection = () => {
-	return (
-		<section className="border-t border-white/10 py-48">
-			<div className="mx-auto max-w-7xl px-6">
-				<div className="flex flex-col lg:flex-row gap-16 items-center">
-					<div className="flex-1 max-w-xl order-2 lg:order-1">
-						<CodeBlock
-							fileName="orchestrator.ts"
-							code={`import { actor } from "rivetkit";
-
-export const manager = actor({
-  state: { subtasks: [] },
-  actions: {
-    runWorkflow: async (c, goal) => {
-      // 1. Spawn specialized workers
-      const researcher = await c.spawn(researchAgent);
-      const coder = await c.spawn(codingAgent);
-
-      // 2. Parallel execution (RPC)
-      const [context, code] = await Promise.all([
-         researcher.rpc.gatherInfo(goal),
-         coder.rpc.generate(goal)
-      ]);
-
-      // 3. Synthesize results
-      return { context, code, status: 'complete' };
-    }
-  }
-});`}
-						/>
-					</div>
-					<div className="flex-1 order-1 lg:order-2">
-						<Badge text="Multi-Agent Systems" />
-						<h2 className="mb-2 text-2xl font-normal tracking-tight text-white md:text-4xl">
-							Orchestrate Agent Swarms
-						</h2>
-						<p className="mb-8 text-base leading-relaxed text-zinc-500">
-							Don't stop at one. Build hierarchical trees of Actors where managers delegate tasks to specialized workers. Rivet handles the supervision, networking, and message passing between them automatically.
-						</p>
-						<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
-							{[
-								{ title: "Parallel Processing", desc: "Run 100 research agents at once." },
-								{ title: "Supervision Trees", desc: "Restart workers if they hallucinate or crash." },
-								{ title: "Shared State", desc: "Pass context references instantly between actors." },
-								{ title: "Event Bus", desc: "Pub/Sub messaging between swarm members." },
-							].map((item, i) => (
-								<div key={i} className="border-t border-white/10 pt-4">
-									<h4 className="text-sm font-medium text-white mb-1">{item.title}</h4>
-									<p className="text-xs text-zinc-500">{item.desc}</p>
-								</div>
-							))}
-						</div>
-					</div>
-				</div>
-			</div>
-		</section>
-	);
-};
-
-const Ecosystem = () => (
-	<section className="border-t border-white/10 py-48">
-		<div className="mx-auto max-w-7xl px-6 text-center">
-			<h2 className="mb-8 text-2xl font-normal tracking-tight text-white md:text-4xl">
-				Works with your stack
-			</h2>
-			<div className="flex flex-wrap justify-center gap-2">
-				{["LangChain", "LlamaIndex", "Vercel AI SDK", "OpenAI", "Anthropic", "HuggingFace"].map((tech) => (
-					<div
-						key={tech}
-						className="rounded-md border border-white/5 px-2 py-1 text-xs text-zinc-400 transition-colors hover:border-white/20 hover:text-white"
-					>
-						{tech}
-					</div>
-				))}
-			</div>
-		</div>
-	</section>
-);
-
-export default function AgentsPage() {
-	return (
-		<div className="min-h-screen bg-black font-sans text-zinc-300 selection:bg-[#FF4500]/30 selection:text-orange-200">
-			<main>
-				<Hero />
-				<MemoryArchitecture />
-				<AgentCapabilities />
-				<UseCases />
-				<OrchestrationSection />
-				<Ecosystem />
-
-				{/* CTA Section */}
-				<section className="border-t border-white/10 py-48">
-					<div className="mx-auto max-w-3xl px-6 text-center">
-						<h2 className="mb-2 text-2xl font-normal tracking-tight text-white md:text-4xl">
-							Stop building generic bots.
-						</h2>
-						<p className="mb-8 text-base leading-relaxed text-zinc-500">
-							Start building stateful, durable, intelligent agents that actually work.
-						</p>
-						<div className="flex flex-col items-center justify-center gap-3 sm:flex-row">
-							<a href="/docs" className="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-white px-4 py-2 text-sm font-medium text-black transition-colors hover:bg-zinc-200">
-								Start Building
-								<ArrowRight className="h-4 w-4" />
-							</a>
-							<a href="/docs/actors" className="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border border-white/10 px-4 py-2 text-sm text-zinc-300 transition-colors hover:border-white/20 hover:text-white">
-								Read the Docs
-							</a>
-						</div>
-					</div>
-				</section>
-			</main>
-		</div>
-	);
-}
-
diff --git a/website/src/components/marketing/startups/BackgroundPulse.tsx b/website/src/components/marketing/startups/BackgroundPulse.tsx
deleted file mode 100644
index 820767eaeb..0000000000
--- a/website/src/components/marketing/startups/BackgroundPulse.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-'use client';
-
-import { motion } from 'framer-motion';
-
-export function BackgroundPulse() {
-	return (
-		<motion.div
-			animate={{ opacity: [0.3, 0.5, 0.3] }}
-			transition={{ duration: 4, repeat: Infinity }}
-			className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-[#FF4500]/10 via-transparent to-transparent opacity-50"
-		/>
-	);
-}
diff --git a/website/src/components/marketing/startups/StartupsPage.tsx b/website/src/components/marketing/startups/StartupsPage.tsx
index 61d04821cc..19f8ffd422 100644
--- a/website/src/components/marketing/startups/StartupsPage.tsx
+++ b/website/src/components/marketing/startups/StartupsPage.tsx
@@ -73,7 +73,7 @@ const StartupImageCycler = ({ images }: { images: { src: string; alt: string; mo
 				return (
 					<div
 						key={`fan-${i}`}
-						className="absolute inset-0 rounded-lg overflow-hidden border border-white/10 transition-all duration-300 ease-out"
+						className="absolute inset-0 overflow-hidden border border-ink/15 transition-all duration-300 ease-out"
 						style={{
 							transform: `rotate(${rotation}deg) translateX(${translateX}px) translateY(${translateY}px) scale(${scale})`,
 							zIndex: 3 - i,
@@ -94,7 +94,7 @@ const StartupImageCycler = ({ images }: { images: { src: string; alt: string; mo
 
 			{/* Main card */}
 			<div
-				className="absolute inset-0 rounded-lg overflow-hidden border border-white/10 transition-transform duration-300 ease-out"
+				className="absolute inset-0 overflow-hidden border border-ink/15 transition-transform duration-300 ease-out"
 				style={{
 					zIndex: 10,
 					transform: showFan ? 'rotate(-3deg) translateX(-10px)' : 'rotate(0deg) translateX(0px)',
@@ -118,62 +118,6 @@ const StartupImageCycler = ({ images }: { images: { src: string; alt: string; mo
 	);
 };
 
-// Demo day dates - update these when new dates are announced
-const YC_DEMO_DAY = new Date('2026-03-24T00:00:00-07:00');
-const A16Z_DEMO_DAY = new Date('2026-04-14T00:00:00-07:00');
-
-function getTimeRemaining(targetDate: Date) {
-	const now = new Date();
-	const diff = targetDate.getTime() - now.getTime();
-
-	if (diff <= 0) return null;
-
-	const totalHours = Math.floor(diff / (1000 * 60 * 60));
-	const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
-	const seconds = Math.floor((diff % (1000 * 60)) / 1000);
-
-	return { totalHours, minutes, seconds };
-}
-
-function DemoCountdown() {
-	const [ycCountdown, setYcCountdown] = useState(getTimeRemaining(YC_DEMO_DAY));
-	const [a16zCountdown, setA16zCountdown] = useState(getTimeRemaining(A16Z_DEMO_DAY));
-
-	useEffect(() => {
-		const interval = setInterval(() => {
-			setYcCountdown(getTimeRemaining(YC_DEMO_DAY));
-			setA16zCountdown(getTimeRemaining(A16Z_DEMO_DAY));
-		}, 1000);
-
-		return () => clearInterval(interval);
-	}, []);
-
-	const formatCountdown = (countdown: { totalHours: number; minutes: number; seconds: number } | null) => {
-		if (!countdown) return 'Passed';
-		const h = String(countdown.totalHours).padStart(2, '0');
-		const m = String(countdown.minutes).padStart(2, '0');
-		const s = String(countdown.seconds).padStart(2, '0');
-		return `${h}:${m}:${s}`;
-	};
-
-	return (
-		<div className="flex flex-wrap gap-6 font-mono text-xs">
-			{ycCountdown && (
-				<div className="flex items-center gap-2">
-					<span className="text-zinc-500">YC Demo Day</span>
-					<span className="text-zinc-300">{formatCountdown(ycCountdown)}</span>
-				</div>
-			)}
-			{a16zCountdown && (
-				<div className="flex items-center gap-2">
-					<span className="text-zinc-500">a16z Demo Day</span>
-					<span className="text-zinc-300">{formatCountdown(a16zCountdown)}</span>
-				</div>
-			)}
-		</div>
-	);
-}
-
 interface CollapsibleSectionProps {
 	title: string;
 	children: React.ReactNode;
@@ -184,17 +128,17 @@ function CollapsibleSection({ title, children, defaultOpen = false }: Collapsibl
 	const [isOpen, setIsOpen] = useState(defaultOpen);
 
 	return (
-		<div className="border-t border-white/10 px-6">
+		<div className="border-t border-ink/10 px-6">
 			<div className="mx-auto w-full max-w-7xl">
 				<button
 					onClick={() => setIsOpen(!isOpen)}
 					className="flex h-28 w-full items-center justify-between text-left"
 				>
-					<h2 className="text-2xl font-normal tracking-tight text-white md:text-4xl">
+					<h2 className="text-2xl font-medium tracking-[-0.015em] text-ink md:text-4xl">
 						{title}
 					</h2>
 					<ChevronDown
-						className={`h-6 w-6 text-zinc-500 transition-transform duration-200 ${
+						className={`h-6 w-6 text-ink-faint transition-transform duration-200 ${
 							isOpen ? 'rotate-180' : ''
 						}`}
 					/>
@@ -238,7 +182,7 @@ export default function StartupsPage({ foundersImage, speedrunImage }: StartupsP
 	];
 
 	return (
-		<div className="min-h-screen bg-black font-sans text-zinc-300 selection:bg-[#FF4500]/30 selection:text-orange-200">
+		<div className="paper-grain min-h-screen font-sans text-ink-soft">
 			{/* Hero Section */}
 			<section className="relative flex flex-col overflow-hidden lg:min-h-screen">
 				{/* Centered content */}
@@ -246,18 +190,18 @@ export default function StartupsPage({ foundersImage, speedrunImage }: StartupsP
 					<div className="mx-auto w-full max-w-7xl">
 						<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-12 lg:gap-20">
 							<div className="max-w-xl">
-								<h1 className="mb-6 text-4xl font-normal leading-[1.1] tracking-tight text-white md:text-6xl">
+								<h1 className="mb-6 text-4xl font-medium leading-[1.1] tracking-[-0.015em] text-ink md:text-6xl">
 									Built for Demo Day and Beyond
 								</h1>
-								<p className="text-base leading-relaxed text-zinc-500">
+								<p className="text-base leading-relaxed text-ink-soft">
 									As{' '}
-									<span className="inline-flex items-center gap-1.5 whitespace-nowrap rounded-full border border-white/10 bg-white/5 px-2.5 py-0.5 text-sm text-zinc-300 align-middle">
+									<span className="inline-flex items-center gap-1.5 whitespace-nowrap rounded-full border border-ink/15 bg-white/55 px-2.5 py-0.5 text-sm text-ink-soft align-middle">
 										<img src={imgYC.src} alt="Y Combinator logo" width={16} height={16} className="h-4 w-auto" loading="eager" decoding="async" />
 										<span>YC W23</span>
 									</span>
 									{' '}and{' '}
-									<span className="inline-flex items-center gap-1.5 whitespace-nowrap rounded-full border border-white/10 bg-white/5 px-2.5 py-0.5 text-sm text-zinc-300 align-middle">
-										<img src={imgA16z.src} alt="Andreessen Horowitz (a16z) logo" width={16} height={12} className="h-3 w-auto" loading="eager" decoding="async" />
+									<span className="inline-flex items-center gap-1.5 whitespace-nowrap rounded-full border border-ink/15 bg-white/55 px-2.5 py-0.5 text-sm text-ink-soft align-middle">
+										<img src={imgA16z.src} alt="Andreessen Horowitz (a16z) logo" width={16} height={12} className="h-3 w-auto invert" loading="eager" decoding="async" />
 										<span>a16z SR002</span>
 									</span>
 									{' '}alumni, we're offering fellow YC and Speedrun companies pricing and support to ship faster.
@@ -265,7 +209,7 @@ export default function StartupsPage({ foundersImage, speedrunImage }: StartupsP
 							</div>
 							{/* Desktop: Overlapping photos */}
 							<div className="hidden lg:block flex-shrink-0 relative w-[500px] h-[400px]">
-								<div className="absolute top-0 left-0 w-[320px] h-[240px] overflow-hidden rounded-lg border border-white/10">
+								<div className="absolute top-0 left-0 w-[320px] h-[240px] overflow-hidden border border-ink/15">
 									<img
 										src={foundersImage}
 										alt="Rivet founders Nathan Flurry and Nicholas Kissel at Y Combinator W23 Demo Day"
@@ -276,7 +220,7 @@ export default function StartupsPage({ foundersImage, speedrunImage }: StartupsP
 										className="w-full h-full object-cover"
 									/>
 								</div>
-								<div className="absolute bottom-0 right-0 w-[320px] h-[240px] overflow-hidden rounded-lg border border-white/10">
+								<div className="absolute bottom-0 right-0 w-[320px] h-[240px] overflow-hidden border border-ink/15">
 									<img
 										src={speedrunImage}
 										alt="Andreessen Horowitz a16z Speedrun SR002 cohort presentation"
@@ -304,16 +248,13 @@ export default function StartupsPage({ foundersImage, speedrunImage }: StartupsP
 				{/* Bottom section */}
 				<div className="px-6 py-12 lg:absolute lg:bottom-0 lg:left-0 lg:right-0 lg:py-0 lg:pb-24">
 					<div className="mx-auto w-full max-w-7xl">
-						<div className="mb-6">
-							<DemoCountdown />
-						</div>
-						<div className="mb-8 h-px w-full bg-white/10" />
+						<div className="mb-8 h-px w-full bg-ink/10" />
 						<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
 							<div>
-								<h2 className="text-base font-normal text-white">
+								<h2 className="text-base font-medium text-ink">
 									50% off Rivet Cloud for 12 months
 								</h2>
-								<p className="mt-1 text-sm text-zinc-500">
+								<p className="mt-1 text-sm text-ink-soft">
 									Everything you need to build and scale stateful workloads at startup speed.
 								</p>
 							</div>
@@ -321,7 +262,7 @@ export default function StartupsPage({ foundersImage, speedrunImage }: StartupsP
 								href="https://forms.gle/J8USsTND8NAKJ18W9"
 								target="_blank"
 								rel="noopener noreferrer"
-								className="selection-dark inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-white px-4 py-2 text-sm font-medium text-black transition-colors hover:bg-zinc-200"
+								className="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-accent-deep px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent"
 							>
 								Claim the deal
 								<ArrowRight className="h-4 w-4" />
@@ -333,14 +274,14 @@ export default function StartupsPage({ foundersImage, speedrunImage }: StartupsP
 
 			{/* What You Get */}
 			<CollapsibleSection title="What you get">
-				<p className="mb-12 max-w-xl text-base leading-relaxed text-zinc-500">
+				<p className="mb-12 max-w-xl text-base leading-relaxed text-ink-soft">
 					Everything you need to build and scale stateful workloads at startup speed.
 				</p>
 				<div className="grid grid-cols-1 gap-8 md:grid-cols-3">
 					{benefits.map((benefit, idx) => (
-						<div key={idx} className="flex flex-col border-t border-white/10 pt-6">
-							<h3 className="mb-2 text-base font-normal text-white">{benefit.title}</h3>
-							<p className="text-sm leading-relaxed text-zinc-500">{benefit.description}</p>
+						<div key={idx} className="flex flex-col border-t border-ink/10 pt-6">
+							<h3 className="mb-2 text-base font-medium text-ink">{benefit.title}</h3>
+							<p className="text-sm leading-relaxed text-ink-soft">{benefit.description}</p>
 						</div>
 					))}
 				</div>
@@ -350,11 +291,11 @@ export default function StartupsPage({ foundersImage, speedrunImage }: StartupsP
 			<CollapsibleSection title="Eligibility">
 				<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
 					{eligibility.map((item, idx) => (
-						<div key={idx} className="flex items-center gap-3 rounded-md border border-white/10 p-4">
+						<div key={idx} className="flex items-center gap-3 rounded-md border border-ink/10 bg-white/55 p-4">
 							<div className="flex h-5 w-5 flex-shrink-0 items-center justify-center">
-								<Check className="h-4 w-4 text-zinc-500" />
+								<Check className="h-4 w-4 text-pine" />
 							</div>
-							<span className="text-sm text-zinc-300">{item}</span>
+							<span className="text-sm text-ink-soft">{item}</span>
 						</div>
 					))}
 				</div>
@@ -364,21 +305,21 @@ export default function StartupsPage({ foundersImage, speedrunImage }: StartupsP
 			<CollapsibleSection title="How to claim">
 				<div className="grid grid-cols-1 gap-8 md:grid-cols-3">
 					{steps.map((step, idx) => (
-						<div key={idx} className="flex flex-col border-t border-white/10 pt-6">
-							<div className="mb-3 flex h-6 w-6 items-center justify-center rounded-full border border-white/10 text-xs text-zinc-500">
+						<div key={idx} className="flex flex-col border-t border-ink/10 pt-6">
+							<div className="mb-3 flex h-6 w-6 items-center justify-center rounded-full border border-pine/30 font-mono text-xs text-pine">
 								{step.number}
 							</div>
-							<h3 className="mb-2 text-base font-normal text-white">{step.title}</h3>
-							<p className="text-sm leading-relaxed text-zinc-500">{step.description}</p>
+							<h3 className="mb-2 text-base font-medium text-ink">{step.title}</h3>
+							<p className="text-sm leading-relaxed text-ink-soft">{step.description}</p>
 						</div>
 					))}
 				</div>
 			</CollapsibleSection>
 
 			{/* CTA */}
-			<div className="border-t border-white/10 py-24 px-6">
+			<div className="border-t border-ink/10 py-24 px-6">
 				<div className="mx-auto w-full max-w-7xl text-center">
-					<h2 className="mb-6 text-2xl font-normal tracking-tight text-white md:text-4xl">
+					<h2 className="mb-6 text-2xl font-medium tracking-[-0.015em] text-ink md:text-4xl">
 						Ready to build?
 					</h2>
 					<div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
@@ -386,15 +327,15 @@ export default function StartupsPage({ foundersImage, speedrunImage }: StartupsP
 							href="https://forms.gle/J8USsTND8NAKJ18W9"
 							target="_blank"
 							rel="noopener noreferrer"
-							className="selection-dark inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-white px-4 py-2 text-sm font-medium text-black transition-colors hover:bg-zinc-200"
+							className="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-accent-deep px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent"
 						>
 							Claim the deal
 							<ArrowRight className="h-4 w-4" />
 						</a>
 					</div>
-					<p className="mt-8 text-sm text-zinc-500">
+					<p className="mt-8 text-sm text-ink-soft">
 						Questions?{' '}
-						<a href="/support" className="text-zinc-300 transition-colors hover:text-white">
+						<a href="/support" className="text-pine transition-colors hover:text-ink">
 							Contact us
 						</a>
 					</p>
diff --git a/website/src/components/marketing/talk-to-an-engineer/TalkToAnEngineerPageClient.tsx b/website/src/components/marketing/talk-to-an-engineer/TalkToAnEngineerPageClient.tsx
index d1c4872294..c4c7b1dba2 100644
--- a/website/src/components/marketing/talk-to-an-engineer/TalkToAnEngineerPageClient.tsx
+++ b/website/src/components/marketing/talk-to-an-engineer/TalkToAnEngineerPageClient.tsx
@@ -2,13 +2,13 @@ import { TalkToAnEngineerForm } from "./form";
 
 export default function TalkToAnEngineerPageClient() {
 	return (
-		<main className="min-h-screen w-full bg-black selection:bg-[#FF4500]/30 selection:text-orange-200">
+		<main className="paper-grain min-h-screen w-full">
 			<div className="relative overflow-hidden pt-32 md:pt-48 pb-12">
 				<div className="mx-auto max-w-md px-6">
-					<h1 className="mb-4 text-4xl font-normal leading-[1.1] tracking-tight text-white text-center whitespace-nowrap">
+					<h1 className="mb-4 text-4xl font-medium leading-[1.06] tracking-[-0.015em] text-ink text-center">
 						Talk to an Engineer
 					</h1>
-					<p className="mb-10 text-base leading-relaxed text-zinc-500 text-center">
+					<p className="mb-10 text-base leading-relaxed text-ink-soft text-center">
 						Connect with one of our engineers to discuss your
 						technical needs and how Rivet can help.
 					</p>
diff --git a/website/src/components/marketing/talk-to-an-engineer/form.tsx b/website/src/components/marketing/talk-to-an-engineer/form.tsx
index 47b30bf9a8..cb34ef8112 100644
--- a/website/src/components/marketing/talk-to-an-engineer/form.tsx
+++ b/website/src/components/marketing/talk-to-an-engineer/form.tsx
@@ -50,17 +50,17 @@ export function TalkToAnEngineerForm() {
 	if (isSubmitted) {
 		return (
 			<div className="mt-8 text-center">
-				<p className="text-2xl font-normal text-white mb-4">
+				<p className="text-2xl font-medium text-ink mb-4">
 					Thank you for your interest!
 				</p>
-				<p className="text-zinc-400">
+				<p className="text-ink-soft">
 					We will get back to you promptly. In the meantime, feel free to
 					explore our{" "}
-					<a href="/docs" className="text-white hover:text-zinc-300 underline underline-offset-2">
+					<a href="/docs" className="text-pine hover:text-ink underline underline-offset-2">
 						documentation
 					</a>{" "}
 					or{" "}
-					<a href="/changelog" className="text-white hover:text-zinc-300 underline underline-offset-2">
+					<a href="/changelog" className="text-pine hover:text-ink underline underline-offset-2">
 						changelog
 					</a>{" "}
 					for more information.
@@ -69,8 +69,8 @@ export function TalkToAnEngineerForm() {
 		);
 	}
 
-	const inputClasses = "block w-full rounded-md border border-white/10 bg-black px-3 py-2 text-sm text-white placeholder:text-zinc-600 focus:border-white/20 focus:outline-none transition-colors";
-	const labelClasses = "block text-sm font-medium text-zinc-400 mb-1.5";
+	const inputClasses = "block w-full rounded-md border border-ink/15 bg-white/55 px-3 py-2 text-sm text-ink placeholder:text-ink-faint focus:border-pine focus:outline-none transition-colors";
+	const labelClasses = "block text-sm font-medium text-ink-soft mb-1.5";
 
 	return (
 		<form
@@ -160,7 +160,7 @@ export function TalkToAnEngineerForm() {
 			<div className="mt-6 text-center">
 				<button
 					type="submit"
-					className="inline-flex items-center justify-center gap-2 rounded-md bg-white px-4 py-2 text-sm font-medium text-black transition-colors hover:bg-zinc-200 disabled:opacity-50 disabled:cursor-not-allowed"
+					className="inline-flex items-center justify-center gap-2 rounded-md bg-accent-deep px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed"
 					disabled={isSubmitting}
 				>
 					{isSubmitting ? "Submitting..." : "Let's talk"}
diff --git a/website/src/components/marketing/typography.tsx b/website/src/components/marketing/typography.tsx
new file mode 100644
index 0000000000..f1a055b0ab
--- /dev/null
+++ b/website/src/components/marketing/typography.tsx
@@ -0,0 +1,45 @@
+import type { ReactNode } from 'react';
+
+// Canonical marketing typography. These class strings are the single source of
+// truth for heading treatment on marketing surfaces. Use them (or SectionHeading)
+// instead of hand-writing tracking and weight classes on new pages.
+
+// Hero H1 on porcelain marketing pages.
+export const HERO_H1_CLASS =
+	'text-4xl font-medium leading-[1.06] tracking-[-0.015em] text-ink text-balance md:text-6xl';
+
+// Section H2 on porcelain marketing pages.
+export const SECTION_H2_CLASS =
+	'text-3xl font-medium tracking-[-0.015em] text-ink md:text-4xl';
+
+// Muted subtitle that sits under a hero or section heading.
+export const SUBTITLE_CLASS = 'mt-4 text-base leading-relaxed text-ink-soft';
+
+// Letter-spaced mono eyebrow, the museum-catalog section label. Pine on
+// porcelain; use text-sage when the eyebrow sits inside an ink panel.
+export const EYEBROW_CLASS =
+	'font-mono text-[11px] font-medium uppercase tracking-[0.18em] text-pine';
+
+// Printed catalog caption, e.g. "Fig. 02 — Rivet Inspector".
+export const CAPTION_CLASS = 'font-mono text-xs text-ink-faint';
+
+interface SectionHeadingProps {
+	title: ReactNode;
+	subtitle?: ReactNode;
+	eyebrow?: ReactNode;
+	index?: string;
+	className?: string;
+}
+
+export const SectionHeading = ({ title, subtitle, eyebrow, index, className }: SectionHeadingProps) => (
+	<div className={className}>
+		{eyebrow ? (
+			<p className={`${EYEBROW_CLASS} mb-4`}>
+				{index ? <span className="text-ink-faint">{index} — </span> : null}
+				{eyebrow}
+			</p>
+		) : null}
+		<h2 className={SECTION_H2_CLASS}>{title}</h2>
+		{subtitle ? <p className={SUBTITLE_CLASS}>{subtitle}</p> : null}
+	</div>
+);
diff --git a/website/src/components/mdx.jsx b/website/src/components/mdx.jsx
index f4e32f2c7e..820eb758bb 100644
--- a/website/src/components/mdx.jsx
+++ b/website/src/components/mdx.jsx
@@ -1,5 +1,6 @@
 import { Heading } from '@/components/Heading';
 import { SchemaPreview as Schema } from '@/components/SchemaPreview';
+import { Icon, faInfoCircle, faExclamationTriangle, faLightbulbOn } from '@rivet-gg/icons';
 
 // In Astro, we use regular anchor tags instead of Next.js Link
 export const a = (props) => <a {...props} />;
@@ -61,7 +62,7 @@ export const table = function Table(props) {
 
 export const SchemaPreview = ({ schema }) => {
   return (
-    <div className='not-prose rounded-md border p-4'>
+    <div className='not-prose rounded-md border border-ink/10 p-4'>
       <Schema schema={schema} />
     </div>
   );
@@ -76,18 +77,45 @@ export const Lead = ({ children }) => {
 // build-time unwrap step.
 export const LLMOnly = () => null;
 
+// Callouts. The body text inherits the surrounding prose so it stays readable
+// in both the dark docs/learn shells and the porcelain blog. Visual styling
+// lives in the `.mdx-callout` rules in main.css: the default palette suits the
+// dark shells and the `.blog-article` scope swaps to the porcelain palette.
+const Callout = ({ variant, icon, children }) => (
+  <div className={`mdx-callout mdx-callout--${variant}`}>
+    <Icon icon={icon} className='mdx-callout__icon' />
+    <div className='mdx-callout__body'>{children}</div>
+  </div>
+);
+
+export const Note = ({ children }) => (
+  <Callout variant='note' icon={faInfoCircle}>{children}</Callout>
+);
+export const Info = ({ children }) => (
+  <Callout variant='info' icon={faInfoCircle}>{children}</Callout>
+);
+export const Tip = ({ children }) => (
+  <Callout variant='tip' icon={faLightbulbOn}>{children}</Callout>
+);
+export const Warning = ({ children }) => (
+  <Callout variant='warning' icon={faExclamationTriangle}>{children}</Callout>
+);
+
 // Re-export from @rivet-gg/components/mdx but override Tabs with SSR-safe version
+import { Steps as BaseSteps } from '@rivet-gg/components/mdx';
 export {
-  Tip,
-  Warning,
-  Note,
-  Info,
   Image as MdxImage,
   Card as MdxCard,
   CardGroup as MdxCardGroup,
   Step,
-  Steps,
 } from '@rivet-gg/components/mdx';
+
+// The shared Steps draws a left rail and number chips that assume a dark shell.
+// On the porcelain docs page the rail is forced to a warm hairline; the chip
+// palette is handled by the `.docs-article .step:before` rule in main.css.
+export const Steps = ({ className, ...props }) => (
+  <BaseSteps className={`!border-ink/10 ${className ?? ''}`} {...props} />
+);
 // Use our local SSR-safe Tabs instead of the one from @rivet-gg/components/mdx
 export { Tab, Tabs } from '@/components/Tabs';
 export { Resource } from '@/components/Resources';
diff --git a/website/src/components/v2/Code.tsx b/website/src/components/v2/Code.tsx
index 6d73d109aa..9d9d6e5003 100644
--- a/website/src/components/v2/Code.tsx
+++ b/website/src/components/v2/Code.tsx
@@ -101,7 +101,7 @@ export function CodeGroup({ children, className, stacked }: CodeGroupProps) {
 
 	return (
 		<div
-			className={cn("code-group group my-4 overflow-hidden rounded-xl", className)}
+			className={cn("code-group group my-4 overflow-hidden rounded-xl border border-cream/10", className)}
 			data-code-group-container
 			data-code-group-workspace
 		>
@@ -234,7 +234,7 @@ export const pre = ({
 		<div
 			className={cn(
 				"not-prose group/code relative group-[.code-group]:my-0 group-[[data-code-group-workspace]]:border-none group-[[data-code-group-workspace]]:overflow-visible",
-				flush ? "" : "my-4 overflow-hidden rounded-xl border"
+				flush ? "" : "my-4 overflow-hidden rounded-xl border border-cream/10"
 			)}
 			data-code-block
 			data-code-title={displayName}
diff --git a/website/src/components/v2/Header.tsx b/website/src/components/v2/Header.tsx
index 56dca16763..d0288d90fe 100644
--- a/website/src/components/v2/Header.tsx
+++ b/website/src/components/v2/Header.tsx
@@ -6,10 +6,13 @@ import { NavigationStateProvider } from "@/providers/NavigationStateProvider";
 import type { SidebarItem } from "@/lib/sitemap";
 import { registry } from "@/data/registry";
 import logoUrl from "@/images/rivet-logos/icon-text-white.svg";
+import logoTextBlackUrl from "@/images/rivet-logos/icon-text-black.svg";
 import logoIconUrl from "@/images/rivet-logos/icon-white.svg";
 import logoIconWhiteUrl from "@/images/rivet-logos/icon-white.svg";
 
-const WHITE_THEMED_PATHS = ['/agent-os', '/agent-os/use-cases', '/agent-os/pricing', '/agent-os/registry', '/from-unix-to-agents', '/install'];
+// Marketing chrome is light by default; these paths additionally swap the nav
+// content for the agentOS sub-brand (logo lockup, registry links, Install CTA).
+const AGENT_OS_PATHS = ['/agent-os', '/agent-os/use-cases', '/agent-os/pricing', '/agent-os/registry', '/from-unix-to-agents', '/install'];
 const REGISTRY_PACKAGE_COUNT = registry.length;
 const AGENT_OS_DOCS_HREF = "/docs/agent-os";
 const AGENT_OS_REGISTRY_HREF = "/agent-os/registry";
@@ -25,6 +28,7 @@ import {
 	DropdownMenuTrigger,
 } from "@rivet-gg/components";
 import { faChevronDown } from "@rivet-gg/icons";
+import { ArrowRight } from "lucide-react";
 import actorsLogoUrl from "@/images/products/actors-logo.svg";
 import agentosLogoUrl from "@/images/products/agentos-logo.svg";
 import sandboxAgentLogoUrl from "@/images/products/sandbox-agent-logo.svg";
@@ -47,14 +51,16 @@ function TextNavItem({
 	ariaCurrent,
 }: TextNavItemProps) {
 	return (
-		<div
-			className={cn(
-				"px-2.5 py-2 opacity-60 hover:opacity-100 transition-all duration-200",
-				className,
-			)}
-		>
+		<div className={cn("px-2.5 py-2", className)}>
 			<RivetHeader.NavItem asChild>
-				<a href={href} className="text-white" aria-current={ariaCurrent}>
+				<a
+					href={href}
+					className={cn(
+						"text-zinc-400 hover:text-white transition-colors duration-200",
+						ariaCurrent === "page" && "text-white",
+					)}
+					aria-current={ariaCurrent}
+				>
 					{children}
 				</a>
 			</RivetHeader.NavItem>
@@ -65,9 +71,11 @@ function TextNavItem({
 function ProductsDropdown({
 	active,
 	lightTheme = false,
+	align = "center",
 }: {
 	active?: boolean;
 	lightTheme?: boolean;
+	align?: "center" | "start";
 }) {
 	const [isOpen, setIsOpen] = useState(false);
 	const closeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
@@ -130,12 +138,88 @@ function ProductsDropdown({
 		return () => cancelClose();
 	}, []);
 
+	if (lightTheme) {
+		return (
+			<div
+				className={cn("group/products px-2.5 py-2", align === "start" && "relative")}
+				onMouseEnter={handleMouseEnter}
+				onMouseLeave={handleMouseLeave}
+			>
+				<RivetHeader.NavItem asChild>
+					<button
+						type="button"
+						aria-expanded={isOpen}
+						className={cn(
+							"cursor-pointer flex items-center gap-1 relative transition-colors duration-200",
+							"!text-zinc-600 hover:!text-zinc-900",
+							active && "!text-zinc-900",
+							"after:absolute after:left-0 after:right-0 after:top-full after:h-4 after:content-['']",
+						)}
+						onPointerDown={handlePointerDown}
+						onMouseEnter={handleMouseEnter}
+					>
+						Products
+						<Icon
+							icon={faChevronDown}
+							className={cn(
+								"h-3 w-3 ml-0.5 transition-transform duration-200",
+								isOpen && "rotate-180",
+							)}
+						/>
+					</button>
+				</RivetHeader.NavItem>
+				<div
+					className={cn(
+						"z-50 -translate-y-1 overflow-hidden rounded-2xl border border-ink/10 bg-paper/80 p-1.5 opacity-0 shadow-[0_18px_50px_-32px_rgba(27,25,22,0.42)] backdrop-blur-[18px] backdrop-saturate-[1.35] transition-all duration-150 pointer-events-none group-hover/products:pointer-events-auto group-hover/products:translate-y-0 group-hover/products:opacity-100",
+						align === "start"
+							? "absolute left-0 top-full mt-3 w-80"
+							: "fixed left-1/2 top-[63px] w-[min(912px,calc(100vw-3rem))] -translate-x-1/2",
+						isOpen
+							? "pointer-events-auto translate-y-0 opacity-100"
+							: "pointer-events-none -translate-y-1 opacity-0",
+					)}
+					onMouseEnter={handleMouseEnter}
+					onMouseLeave={handleMouseLeave}
+				>
+					<div className="flex flex-col">
+						{products.map((product) => (
+							<a
+								key={product.href}
+								href={product.href}
+								className="group/product-row flex items-center gap-2.5 rounded-xl px-3 py-1 text-ink transition-colors hover:bg-ink/[0.07]"
+							>
+								<img
+									src={product.logo.src}
+									alt={product.label}
+									width={18}
+									height={18}
+									className="h-[18px] w-[18px] shrink-0 invert opacity-85"
+									loading="lazy"
+									decoding="async"
+								/>
+								<div className="min-w-0 flex-1">
+									<div className="text-sm font-medium leading-tight text-ink">
+										{product.label}
+									</div>
+									<div className="text-xs leading-tight text-ink-faint">
+										{product.description}
+									</div>
+								</div>
+								<ArrowRight
+									aria-hidden="true"
+									className="invisible h-4 w-4 text-ink-faint opacity-0 transition-all duration-150 group-hover/product-row:visible group-hover/product-row:translate-x-0.5 group-hover/product-row:opacity-100 group-hover/product-row:text-ink"
+								/>
+							</a>
+						))}
+					</div>
+				</div>
+			</div>
+		);
+	}
+
 	return (
 		<div
-			className={cn(
-				"px-2.5 py-2 opacity-60 hover:opacity-100 transition-all duration-200",
-				lightTheme && "opacity-100",
-			)}
+			className="px-2.5 py-2"
 			onMouseEnter={handleMouseEnter}
 			onMouseLeave={handleMouseLeave}
 		>
@@ -145,9 +229,9 @@ function ProductsDropdown({
 						<button
 							type="button"
 							className={cn(
-								"cursor-pointer flex items-center gap-1 relative",
-								lightTheme ? "!text-zinc-600 hover:!text-zinc-900" : "!text-white",
-								active && "opacity-100",
+								"cursor-pointer flex items-center gap-1 relative transition-colors duration-200",
+								lightTheme ? "!text-zinc-600 hover:!text-zinc-900" : "!text-zinc-400 hover:!text-white",
+								active && !lightTheme && "!text-white",
 								"after:absolute after:left-0 after:right-0 after:top-full after:h-4 after:content-['']",
 							)}
 							onPointerDown={handlePointerDown}
@@ -254,6 +338,7 @@ interface HeaderProps {
 	variant?: "floating" | "full-width";
 	learnMode?: boolean;
 	showDocsTabs?: boolean;
+	light?: boolean;
 	initialPathname?: string;
 }
 
@@ -265,13 +350,11 @@ export function Header({
 	variant = "full-width",
 	learnMode = false,
 	showDocsTabs = false,
+	light = false,
 	initialPathname = "",
 }: HeaderProps) {
 	const [isScrolled, setIsScrolled] = useState(false);
 
-	// Use DocsTabs as subnav if showDocsTabs is true
-	const effectiveSubnav = showDocsTabs ? <DocsTabs /> : subnav;
-
 	useEffect(() => {
 		if (variant === "floating") {
 			const handleScroll = () => {
@@ -285,7 +368,14 @@ export function Header({
 
 	const clientPathname = usePathname();
 	const pathname = clientPathname || initialPathname;
-	const isLightTheme = WHITE_THEMED_PATHS.some((p) => pathname === p || pathname === p + '/') || pathname.startsWith('/agent-os/registry/');
+	// The floating variant only renders on marketing pages, which are all
+	// porcelain. The full-width variant is porcelain for docs (light=true) and
+	// stays dark for the Learn section.
+	const isLightTheme = variant === "floating" || light;
+
+	// Use DocsTabs as subnav if showDocsTabs is true
+	const effectiveSubnav = showDocsTabs ? <DocsTabs light={isLightTheme} /> : subnav;
+	const isAgentOs = AGENT_OS_PATHS.some((p) => pathname === p || pathname === p + '/') || pathname.startsWith('/agent-os/registry/');
 	const isRegistryPage =
 		pathname === AGENT_OS_REGISTRY_HREF || pathname === `${AGENT_OS_REGISTRY_HREF}/`;
 
@@ -310,7 +400,7 @@ export function Header({
 		return (
 			<div
 				className={cn(
-					"fixed top-0 z-50 w-full max-w-[1200px] md:left-1/2 md:top-4 md:-translate-x-1/2 md:px-8",
+					"fixed top-0 z-50 w-full max-w-[960px] md:left-1/2 md:top-4 md:-translate-x-1/2 md:px-6",
 					isLightTheme && "selection:bg-orange-200 selection:text-orange-900"
 				)}
 				data-light-theme={isLightTheme ? "true" : undefined}
@@ -318,22 +408,23 @@ export function Header({
 				<div
 					className={cn(
 						"hero-bg-exclude",
-						isLightTheme
-							? 'relative before:pointer-events-none before:absolute before:inset-[-1px] before:z-20 before:hidden before:rounded-2xl before:border before:border-zinc-200 before:content-[""] before:transition-colors before:duration-300 before:ease-in-out md:before:block'
-							: 'relative before:pointer-events-none before:absolute before:inset-[-1px] before:z-20 before:hidden before:rounded-2xl before:border before:border-white/10 before:content-[""] before:transition-colors before:duration-300 before:ease-in-out md:before:block',
+						'relative before:pointer-events-none before:absolute before:inset-[-1px] before:z-20 before:hidden before:rounded-2xl before:border before:border-ink/10 before:content-[""] before:transition-colors before:duration-300 before:ease-in-out md:before:block',
 					)}
 				>
-					<div className={cn("absolute inset-0 -z-[1] hidden overflow-hidden rounded-2xl backdrop-blur-lg md:block", isLightTheme ? "bg-white/80" : "bg-background/80")} />
+					{/* White glass pill: frosted fill with a soft top sheen. The pill's
+						outline is the ink/10 hairline on the parent's ::before, so this
+						layer carries no border of its own. */}
+					<div className="absolute inset-0 -z-[1] hidden overflow-hidden rounded-2xl bg-white/60 shadow-[inset_0_1px_0_rgba(255,255,255,0.55)] backdrop-blur-[18px] backdrop-saturate-[1.4] md:block" />
 					<RivetHeader
 						className={cn(
 							headerStyles,
-							isLightTheme && "md:bg-transparent [&_button[data-mobile-menu-trigger]]:text-zinc-900 bg-white/95 backdrop-blur-lg md:backdrop-blur-none"
+							"md:bg-transparent [&_button[data-mobile-menu-trigger]]:text-ink bg-paper/95 backdrop-blur-lg md:backdrop-blur-none"
 						)}
 						logo={
 							<>
 								{/* Mobile logo */}
 								<div className="md:hidden ml-1">
-									{isLightTheme ? (
+									{isAgentOs ? (
 										<a href="/" className="flex items-center gap-2">
 											<img
 												src={logoIconWhiteUrl.src}
@@ -342,7 +433,7 @@ export function Header({
 												className="h-6 w-6"
 												alt="Rivet logo"
 											/>
-											<div className="h-4 w-px bg-zinc-300" />
+											<div className="h-4 w-px bg-ink/20" />
 											<img
 												src="/images/agent-os/agentos-hero-logo.svg"
 												className="h-4 w-auto"
@@ -352,7 +443,7 @@ export function Header({
 									) : (
 										<a href="/">
 											<img
-												src={logoUrl.src}
+												src={logoTextBlackUrl.src}
 												width={80}
 												height={24}
 												className="w-20 shrink-0"
@@ -363,7 +454,7 @@ export function Header({
 								</div>
 								{/* Desktop logo */}
 								<div className="hidden md:block">
-									{isLightTheme ? (
+									{isAgentOs ? (
 										<div className="ml-1 flex items-center gap-3">
 											<a href="/">
 												<img
@@ -374,7 +465,7 @@ export function Header({
 													alt="Rivet logo"
 												/>
 											</a>
-											<div className="h-5 w-px bg-zinc-300" />
+											<div className="h-5 w-px bg-ink/20" />
 											<a href="/agent-os">
 												<img
 													src="/images/agent-os/agentos-hero-logo.svg"
@@ -387,7 +478,7 @@ export function Header({
 										<LogoContextMenu>
 											<a href="/">
 												<img
-													src={logoUrl.src}
+													src={logoTextBlackUrl.src}
 													width={80}
 													height={24}
 													className="ml-1 w-20 shrink-0"
@@ -405,22 +496,22 @@ export function Header({
 							<div className="flex flex-row items-center">
 								{variant === "full-width" && <HeaderSearch />}
 								<RivetHeader.NavItem asChild className="p-2 mr-4">
-									<a href="https://rivet.dev/discord" className={isLightTheme ? "text-zinc-500 hover:text-zinc-900" : "text-white/90"}>
-										<Icon icon={faDiscord} className="drop-shadow-md" />
+									<a href="https://rivet.dev/discord" className="!text-ink-soft hover:!text-ink transition-colors">
+										<Icon icon={faDiscord} />
 									</a>
 								</RivetHeader.NavItem>
-								<GitHubDropdown className={cn("inline-flex items-center justify-center whitespace-nowrap rounded-md border px-4 py-2 h-10 text-sm mr-2 transition-colors", isLightTheme ? "border-zinc-200 text-zinc-500 hover:border-zinc-300 hover:text-zinc-900" : "border-white/10 text-white/90 hover:border-white/20 hover:text-white")} />
-								{isLightTheme ? (
+								<GitHubDropdown className="inline-flex items-center justify-center whitespace-nowrap rounded-md border px-4 py-2 h-10 text-sm mr-2 transition-colors border-ink/15 text-ink-soft hover:border-ink/30 hover:text-ink" />
+								{isAgentOs ? (
 									<a
 										href="/install"
-										className="font-v2 subpixel-antialiased inline-flex items-center justify-center whitespace-nowrap rounded-md border border-zinc-200 bg-zinc-900 px-4 py-2 text-sm text-white shadow-sm hover:bg-zinc-700 transition-colors"
+										className="font-v2 subpixel-antialiased inline-flex items-center justify-center whitespace-nowrap rounded-md bg-ink px-4 py-2 text-sm text-cream hover:bg-ink/85 transition-colors"
 									>
 										Install
 									</a>
 								) : (
 									<a
 										href="https://dashboard.rivet.dev"
-										className="font-v2 subpixel-antialiased inline-flex items-center justify-center whitespace-nowrap rounded-md border border-white/10 bg-white/5 px-4 py-2 text-sm text-white shadow-sm hover:border-white/20 transition-colors"
+										className="font-v2 subpixel-antialiased inline-flex items-center justify-center whitespace-nowrap rounded-md bg-ink px-4 py-2 text-sm text-cream hover:bg-ink/85 transition-colors"
 									>
 										Sign In
 									</a>
@@ -432,20 +523,21 @@ export function Header({
 								tree={mobileSidebar}
 								sidebarData={sidebarData}
 								isLightTheme={isLightTheme}
+								isAgentOs={isAgentOs}
 							/>
 						}
-						sheetClassName={isLightTheme ? "!bg-white [&>button]:!bg-white [&>button]:!text-zinc-900 [&>button]:!border-zinc-200" : undefined}
+						sheetClassName="!bg-paper [&>button]:!bg-paper [&>button]:!text-ink [&>button]:!border-ink/15"
 						lightTheme={isLightTheme}
 						breadcrumbs={
-							<div className={cn("flex items-center font-v2 subpixel-antialiased", isLightTheme && "[&_a]:!text-zinc-600 [&_button]:!text-zinc-600")}>
-								{!isLightTheme && <ProductsDropdown active={active === "product"} />}
+							<div className="flex items-center font-v2 subpixel-antialiased [&_a]:!text-ink-soft [&_a:hover]:!text-ink [&_a[aria-current=page]]:!text-ink [&_button]:!text-ink-soft">
+								{!isAgentOs && <ProductsDropdown active={active === "product"} lightTheme />}
 								<TextNavItem
-									href={isLightTheme ? AGENT_OS_DOCS_HREF : "/docs"}
+									href={isAgentOs ? AGENT_OS_DOCS_HREF : "/docs"}
 									ariaCurrent={active === "docs" ? "page" : undefined}
 								>
 									Documentation
 								</TextNavItem>
-								{isLightTheme && (
+								{isAgentOs && (
 									<>
 										<TextNavItem href="/agent-os/use-cases">
 											Use Cases
@@ -456,7 +548,7 @@ export function Header({
 										>
 											<span className="inline-flex items-center gap-2">
 												<span>Registry</span>
-												<span className="inline-flex min-w-6 items-center justify-center rounded-full border border-zinc-200 bg-zinc-100 px-1.5 py-0.5 text-[10px] font-medium leading-none text-zinc-600">
+												<span className="inline-flex min-w-6 items-center justify-center rounded-full border border-ink/15 bg-ink/5 px-1.5 py-0.5 text-[10px] font-medium leading-none text-ink-soft">
 													{REGISTRY_PACKAGE_COUNT}
 												</span>
 											</span>
@@ -466,7 +558,7 @@ export function Header({
 										</TextNavItem>
 									</>
 								)}
-								{!isLightTheme && (
+								{!isAgentOs && (
 									<TextNavItem
 										href="/cookbook"
 										ariaCurrent={active === "cookbook" ? "page" : undefined}
@@ -474,7 +566,12 @@ export function Header({
 										Cookbooks
 									</TextNavItem>
 								)}
-								{!isLightTheme && (
+								{!isAgentOs && (
+									<TextNavItem href="/enterprise">
+										Enterprise
+									</TextNavItem>
+								)}
+								{!isAgentOs && (
 									<TextNavItem
 										href="/cloud"
 										ariaCurrent={active === "pricing" ? "page" : undefined}
@@ -494,19 +591,22 @@ export function Header({
 	return (
 		<RivetHeader
 			className={cn(
-				"sticky top-0 z-50 bg-neutral-950/80 backdrop-blur-lg",
+				"sticky top-0 z-50 backdrop-blur-lg",
+				isLightTheme
+					? "bg-paper/95 border-b border-ink/10 [&_button[data-mobile-menu-trigger]]:text-ink"
+					: "bg-neutral-950/80",
 				"[&>div:first-child]:px-3 md:[&>div:first-child]:max-w-none md:[&>div:first-child]:px-0 md:px-8",
 				// 0 padding on bottom for larger screens when subnav is showing
-				effectiveSubnav ? "pb-2 md:pb-0 md:pt-4" : "md:py-4",
+				effectiveSubnav ? "pb-2 md:pb-0 md:pt-3 md:[&>div:first-child>div:first-child]:min-h-12 md:[&>div:first-child>div:first-child]:mb-3" : "md:py-4",
 				// Learn mode styling
-				learnMode && "bg-[#1c1917] border-b border-[#44403c]",
+				!isLightTheme && learnMode && "bg-[#1c1917] border-b border-[#44403c]",
 			)}
 			logo={
 				<div className="hidden md:block">
 					<LogoContextMenu>
 						<a href="/">
 							<img
-								src={logoUrl.src}
+								src={isLightTheme ? logoTextBlackUrl.src : logoUrl.src}
 								width={80}
 								height={24}
 								className="ml-1 w-20 shrink-0"
@@ -524,27 +624,47 @@ export function Header({
 				<div className="flex flex-row items-center">
 					{!learnMode && (
 						<div className="mr-4">
-							<HeaderSearch />
+							<HeaderSearch light={isLightTheme} />
 						</div>
 					)}
 					<RivetHeader.NavItem asChild className="p-2 mr-4">
-						<a href="https://rivet.dev/discord" className="text-white/90">
+						<a
+							href="https://rivet.dev/discord"
+							className={isLightTheme ? "!text-ink-soft hover:!text-ink transition-colors" : "text-white/90"}
+						>
 							<Icon icon={faDiscord} className="drop-shadow-md" />
 						</a>
 					</RivetHeader.NavItem>
-					<GitHubDropdown className="inline-flex items-center justify-center whitespace-nowrap rounded-md border border-white/10 px-4 py-2 h-10 text-sm mr-2 hover:border-white/20 text-white/90 hover:text-white transition-colors" />
+					<GitHubDropdown
+						className={cn(
+							"inline-flex items-center justify-center whitespace-nowrap rounded-md border px-4 py-2 h-10 text-sm mr-2 transition-colors",
+							isLightTheme
+								? "border-ink/15 text-ink-soft hover:border-ink/30 hover:text-ink"
+								: "border-white/10 hover:border-white/20 text-white/90 hover:text-white",
+						)}
+					/>
 					<a
 						href="https://dashboard.rivet.dev"
-						className="font-v2 subpixel-antialiased inline-flex items-center justify-center whitespace-nowrap rounded-md border border-white/10 bg-white/5 px-4 py-2 text-sm text-white shadow-sm hover:border-white/20 transition-colors"
+						className={cn(
+							"font-v2 subpixel-antialiased inline-flex items-center justify-center whitespace-nowrap rounded-md px-4 py-2 text-sm transition-colors",
+							isLightTheme
+								? "bg-ink text-cream hover:bg-ink/85"
+								: "border border-white/10 bg-white/5 text-white shadow-sm hover:border-white/20",
+						)}
 					>
 						Sign In
 					</a>
 				</div>
 			}
-			mobileBreadcrumbs={<DocsMobileNavigation tree={mobileSidebar} sidebarData={sidebarData} />}
+			lightTheme={isLightTheme}
+			sheetClassName={isLightTheme ? "!bg-paper [&>button]:!bg-paper [&>button]:!text-ink [&>button]:!border-ink/15" : undefined}
+			mobileBreadcrumbs={<DocsMobileNavigation tree={mobileSidebar} sidebarData={sidebarData} isLightTheme={isLightTheme} />}
 			breadcrumbs={
-				<div className="flex items-center font-v2 subpixel-antialiased">
-					<ProductsDropdown active={active === "product"} />
+				<div className={cn(
+					"flex items-center font-v2 subpixel-antialiased",
+					isLightTheme && "[&_a]:!text-ink-soft [&_a:hover]:!text-ink [&_a[aria-current=page]]:!text-ink [&_button]:!text-ink-soft",
+				)}>
+					<ProductsDropdown active={active === "product"} lightTheme={isLightTheme} align="start" />
 					<TextNavItem
 						href="/docs"
 						ariaCurrent={active === "docs" ? "page" : undefined}
@@ -557,6 +677,9 @@ export function Header({
 					>
 						Cookbooks
 					</TextNavItem>
+					<TextNavItem href="/enterprise">
+						Enterprise
+					</TextNavItem>
 					<TextNavItem
 						href="/cloud"
 						ariaCurrent={active === "pricing" ? "page" : undefined}
@@ -573,10 +696,12 @@ function DocsMobileNavigation({
 	tree,
 	sidebarData,
 	isLightTheme = false,
+	isAgentOs = false,
 }: {
 	tree?: ReactNode;
 	sidebarData?: SidebarItem[];
 	isLightTheme?: boolean;
+	isAgentOs?: boolean;
 }) {
 	const pathname = usePathname() || "";
 	const isDocsPage = pathname.startsWith("/docs");
@@ -598,7 +723,7 @@ function DocsMobileNavigation({
 		{ id: "api", label: "API Reference", href: "/docs/api" },
 	];
 
-	const mainLinks = isLightTheme
+	const mainLinks = isAgentOs
 		? [
 			{ href: AGENT_OS_DOCS_HREF, label: "Documentation" },
 			{ href: "/agent-os/use-cases", label: "Use Cases" },
@@ -608,6 +733,7 @@ function DocsMobileNavigation({
 		: [
 			{ href: "/docs", label: "Documentation" },
 			{ href: "/cookbook", label: "Cookbooks" },
+			{ href: "/enterprise", label: "Enterprise" },
 			{ href: "/cloud", label: "Pricing" },
 		];
 
@@ -630,7 +756,7 @@ function DocsMobileNavigation({
 
 	const currentSection = sections.find((s) => s.id === getCurrentSection());
 
-	if (isLightTheme) {
+	if (isLightTheme && isAgentOs) {
 		return (
 			<div className="flex flex-col gap-2 font-v2 subpixel-antialiased text-sm">
 				{/* Home logo with agentOS */}
@@ -642,7 +768,7 @@ function DocsMobileNavigation({
 						height={24}
 						className="h-6 w-6"
 					/>
-					<div className="h-4 w-px bg-zinc-300" />
+					<div className="h-4 w-px bg-ink/20" />
 					<img
 						src="/images/agent-os/agentos-hero-logo.svg"
 						className="h-4 w-auto"
@@ -655,17 +781,17 @@ function DocsMobileNavigation({
 					<a
 						key={href}
 						href={href}
-						className="text-zinc-900 py-2 px-2 hover:bg-zinc-100 rounded-sm transition-colors"
+						className="text-ink py-2 px-2 hover:bg-ink/5 rounded-sm transition-colors"
 					>
 						{label}
 					</a>
 				))}
 
 				{/* Install button */}
-				<div className="mt-4 pt-4 border-t border-zinc-200">
+				<div className="mt-4 pt-4 border-t border-ink/10">
 					<a
 						href="/install"
-						className="flex items-center justify-center w-full rounded-md bg-zinc-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-zinc-700"
+						className="flex items-center justify-center w-full rounded-md bg-ink px-4 py-2 text-sm font-medium text-cream transition-colors hover:bg-ink/85"
 					>
 						Install
 					</a>
@@ -674,6 +800,106 @@ function DocsMobileNavigation({
 		);
 	}
 
+	if (isLightTheme) {
+		return (
+			<div className="flex flex-col gap-2 font-v2 subpixel-antialiased text-sm">
+				{/* Home logo */}
+				<a href="/" className="py-3 px-2">
+					<img
+						src={logoTextBlackUrl.src}
+						alt="Rivet"
+						width={80}
+						height={24}
+						className="w-20"
+					/>
+				</a>
+
+				{/* Products section */}
+				<div className="text-ink-faint py-2 px-2 text-xs uppercase tracking-wide">
+					Products
+				</div>
+				{products.map((product) => (
+					<a
+						key={product.href}
+						href={product.href}
+						target={product.external ? "_blank" : undefined}
+						rel={product.external ? "noopener noreferrer" : undefined}
+						className="text-ink py-2 px-2 pl-4 hover:bg-ink/5 rounded-sm transition-colors flex items-center gap-2"
+					>
+						<img
+							src={product.logo.src}
+							alt={product.label}
+							width={16}
+							height={16}
+							className="h-4 w-4 invert opacity-85"
+							loading="lazy"
+							decoding="async"
+						/>
+						{product.label}
+					</a>
+				))}
+
+				{/* Main navigation links */}
+				{mainLinks.map(({ href, label }) => (
+					<a
+						key={href}
+						href={href}
+						className="text-ink py-2 px-2 hover:bg-ink/5 rounded-sm transition-colors"
+					>
+						{label}
+					</a>
+				))}
+
+				{/* Docs section dropdown + sidebar tree */}
+				{isDocsPage && (
+					<>
+						<div className="border-t-2 border-ink/10 my-2" />
+
+						{/* Section dropdown */}
+						<DropdownMenu>
+							<DropdownMenuTrigger asChild>
+								<Button
+									variant="outline"
+									className="w-full justify-between h-9 text-sm border-ink/15 bg-white/55 text-ink hover:bg-white/70 hover:border-ink/30"
+								>
+									{currentSection?.label || "Select Section"}
+									<Icon icon={faChevronDown} className="h-3.5 w-3.5 ml-2" />
+								</Button>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent className="w-[calc(100vw-3rem)] bg-white border border-ink/10 text-ink [&_[role=menuitem]]:text-ink [&_[role=menuitem][data-highlighted]]:bg-ink/[0.06] [&_[role=menuitem][data-highlighted]]:text-ink">
+								{sections.map(({ id, label, href }) => (
+									<DropdownMenuItem key={id} asChild>
+										<a href={href}>{label}</a>
+									</DropdownMenuItem>
+								))}
+							</DropdownMenuContent>
+						</DropdownMenu>
+
+						{/* Tree/sidebar content */}
+						{tree && <div className="mt-1">{tree}</div>}
+						{!tree && sidebarData && (
+							<NavigationStateProvider>
+								<div className="mt-1">
+									<Tree pages={sidebarData} />
+								</div>
+							</NavigationStateProvider>
+						)}
+					</>
+				)}
+
+				{/* Dashboard button */}
+				<div className="mt-4 pt-4 border-t border-ink/10">
+					<a
+						href="https://dashboard.rivet.dev/"
+						className="flex items-center justify-center w-full rounded-md bg-ink px-4 py-2 text-sm font-medium text-cream transition-colors hover:bg-ink/85"
+					>
+						Dashboard
+					</a>
+				</div>
+			</div>
+		);
+	}
+
 	return (
 		<div className="flex flex-col gap-2 font-v2 subpixel-antialiased text-sm">
 			{/* Home logo - full logo on small screens, icon only on tablet */}
diff --git a/website/src/components/v2/HeaderSearch.tsx b/website/src/components/v2/HeaderSearch.tsx
index db06db76ef..b6517a7206 100644
--- a/website/src/components/v2/HeaderSearch.tsx
+++ b/website/src/components/v2/HeaderSearch.tsx
@@ -1,5 +1,5 @@
 import { TypesenseSearch } from "./TypesenseSearch";
 
-export function HeaderSearch() {
-	return <TypesenseSearch />;
+export function HeaderSearch({ light = false }: { light?: boolean }) {
+	return <TypesenseSearch light={light} />;
 }
diff --git a/website/src/components/v2/TypesenseSearch.tsx b/website/src/components/v2/TypesenseSearch.tsx
index ff830ccbe0..d8e8c714be 100644
--- a/website/src/components/v2/TypesenseSearch.tsx
+++ b/website/src/components/v2/TypesenseSearch.tsx
@@ -40,7 +40,7 @@ interface SearchResult {
 	};
 }
 
-export function TypesenseSearch() {
+export function TypesenseSearch({ light = false }: { light?: boolean }) {
 	const [isOpen, setIsOpen] = useState(false);
 	const [query, setQuery] = useState("");
 	const [results, setResults] = useState<SearchResult[]>([]);
@@ -145,12 +145,20 @@ export function TypesenseSearch() {
 				onClick={() => setIsOpen(true)}
 				variant="outline"
 				className={cn(
-					"relative h-8 w-full justify-start rounded-[0.5rem] bg-background text-sm font-normal text-muted-foreground shadow-none hidden md:flex md:w-24 lg:w-40",
+					"relative h-8 w-full justify-start rounded-[0.5rem] text-sm font-normal shadow-none hidden md:flex md:w-24 lg:w-40",
+					light
+						? "bg-white/60 border-ink/15 text-ink-soft hover:bg-white/70 hover:text-ink"
+						: "bg-background text-muted-foreground",
 				)}
 			>
 				<span className="hidden lg:inline-flex">Search...</span>
 				<span className="inline-flex lg:hidden">Search...</span>
-				<Kbd className="absolute right-[0.3rem] top-1/2 -translate-y-1/2 hidden sm:flex">
+				<Kbd
+					className={cn(
+						"absolute right-[0.3rem] top-1/2 -translate-y-1/2 hidden sm:flex",
+						light && "!border-ink/20 !bg-ink/[0.06] !text-ink-soft",
+					)}
+				>
 					<Kbd.Key />K
 				</Kbd>
 			</Button>
diff --git a/website/src/content/cookbook/vpc-air-gapped.mdx b/website/src/content/cookbook/vpc-air-gapped.mdx
new file mode 100644
index 0000000000..843aba522d
--- /dev/null
+++ b/website/src/content/cookbook/vpc-air-gapped.mdx
@@ -0,0 +1,132 @@
+---
+title: "Deploying Rivet in a VPC or Air-Gapped Network"
+description: "Run Rivet entirely inside your own perimeter: single-binary or Docker Compose install, file system storage with no database infrastructure, and no outbound telemetry by default."
+---
+
+Patterns for running self-hosted Rivet inside a private network: a VPC without internet egress, an on-premises rack, or a fully air-gapped environment. The engine is one service, the recommended single-node storage backend is the local file system, and the engine makes no outbound connections by default. Self-hosting is the only Rivet deployment model that supports air-gapped networks; see the [Self-Hosting Overview](/docs/self-hosting) for the full comparison with BYOC.
+
+## What Runs Inside the Perimeter
+
+A self-hosted deployment has three components, all of which live inside your network:
+
+| Component | Role | Inside the perimeter |
+| --- | --- | --- |
+| Your backend | Your application server, including the runner that executes actor code | Yes |
+| Rivet Engine | Orchestration service that manages actor lifecycle, routes messages, and serves the dashboard and APIs | Yes |
+| Storage | Persistence for actor state. Local file system for single-node, PostgreSQL or FoundationDB for multi-node | Yes |
+
+There is no license server, no Rivet Cloud account, and no callback to `rivet.dev`. Clients inside the perimeter reach actors through the engine's gateway over your private network. See [Architecture](/docs/self-hosting#architecture).
+
+## Single-Binary Install
+
+The engine compiles to a single `rivet-engine` binary. Build it from source outside the perimeter, then copy the binary across the boundary:
+
+```bash
+git clone https://github.com/rivet-dev/rivet.git
+cd rivet
+cargo build --release -p rivet-engine
+# Copy target/release/rivet-engine into the perimeter.
+```
+
+Prebuilt binaries are coming soon; see [Installing Rivet Engine](/docs/self-hosting/install) for current options.
+
+Run it with the file system backend, which stores everything on local disk and is the production-ready choice for single-node deployments. The [File System](/docs/self-hosting/filesystem) docs list air-gapped environments as a primary use case because it needs no database infrastructure:
+
+```bash
+RIVET__database__file_system__path="/var/lib/rivet/data" ./rivet-engine
+```
+
+Configuration can also come from files. The engine discovers config at `/etc/rivet/config.json` on Linux (JSON, JSON5, JSONC, YAML, and YML are all supported), and `--config` overrides the path. Environment variables use the `RIVET__` prefix with `__` as the separator. See [Configuration](/docs/self-hosting/configuration).
+
+The engine serves its own dashboard on port `6420`, so inspection and namespace management work with nothing but a browser inside the perimeter.
+
+## Docker Compose Deployment
+
+For Docker hosts without registry access, move the engine image across the boundary the standard way:
+
+```bash
+# Outside the perimeter.
+docker pull rivetdev/engine:latest
+docker save rivetdev/engine:latest -o rivet-engine.tar
+# Inside the perimeter.
+docker load -i rivet-engine.tar
+```
+
+Then run the engine and your app together in one Compose file:
+
+```yaml
+services:
+  rivet-engine:
+    image: rivetdev/engine:latest
+    ports:
+      - "6420:6420"
+    volumes:
+      - rivet-data:/data
+    environment:
+      RIVET__FILE_SYSTEM__PATH: "/data"
+    restart: unless-stopped
+
+  my-app:
+    build: .
+    environment:
+      RIVET_ENDPOINT: "http://default:admin@rivet-engine:6420"
+    depends_on:
+      - rivet-engine
+    restart: unless-stopped
+
+volumes:
+  rivet-data:
+```
+
+`RIVET_ENDPOINT` uses the format `http://namespace:token@host:port` and tells your app to connect to the engine as a runner instead of running standalone. After both services start, register your runner with the engine through the dashboard or its API. The full walkthrough, including PostgreSQL setup for multi-node deployments, is in [Docker Compose](/docs/self-hosting/docker-compose).
+
+## No Outbound Telemetry
+
+The engine exports traces and metrics only when you opt in with OpenTelemetry. Export is disabled unless `RIVET_OTEL_ENABLED=1` is set, and the export target defaults to a local collector at `http://localhost:4317`. With no configuration, nothing crosses the perimeter.
+
+When you want observability, keep it inside the network:
+
+- Set `RIVET_OTEL_ENABLED=1` and point `RIVET_OTEL_GRPC_ENDPOINT` at a collector you run inside the perimeter.
+- Adjust `RIVET_OTEL_SAMPLER_RATIO` to control trace sampling.
+- Use the engine's health endpoint for liveness and readiness probes.
+
+See the [Production Checklist](/docs/self-hosting/production-checklist) for monitoring guidance.
+
+## Embedding Rivet in a Customer's Environment
+
+If you ship software that runs inside your customers' VPCs, the same setup turns Rivet into an internal component of your product rather than a service your customers must reach over the internet:
+
+- **Ship the engine next to your app.** Add `rivetdev/engine` to the Compose file or chart you already deliver. Your app finds it over the private network via `RIVET_ENDPOINT`, so one artifact deploys the whole stack.
+- **One namespace per install.** The endpoint URL carries the namespace and token (`http://namespace:token@host:port`), so a single image works across customer deployments. See [Endpoints](/docs/general/endpoints).
+- **Generate a strong admin token per install.** Replace the default token and keep it server-side. Never include the admin token in `RIVET_PUBLIC_ENDPOINT` or anywhere clients can read it.
+- **Public endpoint only when needed.** `RIVET_PUBLIC_ENDPOINT` with a public (`pk_`) token is only required when browser clients connect to actors in [serverless runtime mode](/docs/general/runtime-modes). Backend-only deployments can skip it entirely.
+- **TLS at the customer's edge.** Terminate TLS with the customer's reverse proxy or load balancer in front of the engine.
+
+## Scaling Past One Node
+
+| Backend | Use when | Status |
+| --- | --- | --- |
+| [File System](/docs/self-hosting/filesystem) (RocksDB-based) | Single-node deployments, including air-gapped installs | Production-ready, single node only |
+| [PostgreSQL](/docs/self-hosting/postgres) | Multi-node deployments | Recommended for multi-node today, but experimental |
+| FoundationDB | Largest production deployments | [Enterprise](/sales) |
+
+For multi-node deployments, run two or more engine nodes behind a load balancer and add NATS for pub/sub, which replaces the default PostgreSQL `LISTEN`/`NOTIFY` path at high throughput. Neither is needed for a single-node file system install. See the [Production Checklist](/docs/self-hosting/production-checklist).
+
+## Perimeter Checklist
+
+- **Admin token**: Generate a strong, random token for engine authentication and verify it is not exposed to clients.
+- **TLS termination**: Encrypt connections to the engine via a reverse proxy or load balancer.
+- **No public exposure**: Keep port `6420` reachable only from inside the perimeter unless clients outside it genuinely need access.
+- **Health checks**: Configure liveness and readiness probes against the engine health endpoint.
+- **Telemetry**: Leave OpenTelemetry export off, or point it at a collector inside the network.
+- **Backups**: With the file system backend, back up the data directory. With PostgreSQL, configure automated backups and failover.
+
+## Full Configuration
+
+- [Self-Hosting Overview](/docs/self-hosting) for architecture and the self-host vs BYOC comparison
+- [Installing Rivet Engine](/docs/self-hosting/install) for Docker, binary, and source installs
+- [Docker Container](/docs/self-hosting/docker-container) and [Docker Compose](/docs/self-hosting/docker-compose) for container deployments
+- [Kubernetes](/docs/self-hosting/kubernetes) for cluster deployments
+- [Configuration](/docs/self-hosting/configuration) for every option and the full JSON schema
+- [Endpoints](/docs/general/endpoints) for connecting your backend and clients
+- [Production Checklist](/docs/self-hosting/production-checklist) before going live
diff --git a/website/src/data/bench.ts b/website/src/data/bench.ts
index 107294d6d9..553cb6e69e 100644
--- a/website/src/data/bench.ts
+++ b/website/src/data/bench.ts
@@ -24,6 +24,10 @@ export const MEMORY_SHELL_MB = 22;   // memory-sleep.json       (23160422 / 1024
 
 // ── Sandbox baselines (external benchmarks) ──
 
+// Date the external sandbox baselines were last verified. Interpolated wherever
+// marketing copy cites the baselines so a refresh only touches this constant.
+export const BENCHMARK_DATE = 'March 30, 2026';
+
 // Coldstart baseline: E2B (used for cold start comparison only)
 export const SANDBOX_COLDSTART_PROVIDER = 'E2B';
 export const SANDBOX_COLDSTART_MS = { p50: 440, p95: 950, p99: 3150 };
diff --git a/website/src/data/compare/cloudflare-durable-objects.tsx b/website/src/data/compare/cloudflare-durable-objects.tsx
index bf94fd9cec..5dc971886d 100644
--- a/website/src/data/compare/cloudflare-durable-objects.tsx
+++ b/website/src/data/compare/cloudflare-durable-objects.tsx
@@ -10,7 +10,7 @@ export const cloudflareDurableObjects: CompareEntry = {
 	description:
 		'Compare Rivet Actors and Cloudflare Durable Objects: open-source stateful actors on your own infrastructure versus stateful compute tied to Cloudflare.',
 	heroSubtitle:
-		'Cloudflare Durable Objects provide stateful serverless computing with vendor lock-in. Rivet Actors give you the same capabilities as an open-source library that works with your existing infrastructure and technology stack.',
+		'Cloudflare Durable Objects provide stateful serverless computing with vendor lock-in. Rivet Actors give you the same capabilities as an open-source library that works with your existing infrastructure and technology stack. If your workloads must run on-prem, in a customer VPC, or air-gapped, Durable Objects are not an option. Rivet is built for exactly that.',
 	rivetSummary:
 		'Rivet Actors bring the actor model to your existing infrastructure as an open-source library. Build stateful, distributed applications with your preferred technology stack, deployed on your own infrastructure.',
 	competitorSummary:
@@ -248,7 +248,7 @@ export const cloudflareDurableObjects: CompareEntry = {
 					feature: 'Built-in scheduling',
 					rivet: {
 						status: 'yes',
-						text: 'Powerful built-in scheduling system',
+						text: 'Built-in scheduling with durable timers and cron',
 					},
 					competitor: {
 						status: 'partial',
diff --git a/website/src/data/cookbook/covers.ts b/website/src/data/cookbook/covers.ts
index 593f3918ce..29eaea10a4 100644
--- a/website/src/data/cookbook/covers.ts
+++ b/website/src/data/cookbook/covers.ts
@@ -8,6 +8,20 @@
 // transformOrigin zooms into a focal point; filter normalizes exposure so the
 // covers sit at an even darkness on the black page.
 
+// Documentary-style hover motion, tuned per artwork so the slow close-up
+// slides toward that painting's subject (a push onto a face, a descent through
+// the dollhouse rooms, a drift toward a light source) rather than in an
+// arbitrary direction. `x`/`y` are the layer translate at full zoom; by the
+// "to move the camera toward a region, translate the image opposite to it"
+// rule, a subject above center pans with positive y and one to the left with
+// positive x. Magnitudes stay under (scale - 1) / 2 so the frame never
+// reveals its backing.
+export interface CookbookKenBurns {
+	x: string;
+	y: string;
+	scale: number;
+}
+
 export interface CookbookCoverArt {
 	// Artwork title, artist, and date, kept for reference.
 	artwork: string;
@@ -18,15 +32,18 @@ export interface CookbookCoverArt {
 	transform?: string;
 	transformOrigin?: string;
 	filter?: string;
+	ken?: CookbookKenBurns;
 }
 
 export const cookbookCovers: Record<string, CookbookCoverArt> = {
 	"ai-agent": {
 		artwork: "The Thinker, Auguste Rodin, modeled 1880",
-		src: "https://assets.rivet.dev/website/images/thinking/thinker.jpg",
-		width: 3140,
-		height: 4000,
+		src: "https://assets.rivet.dev/website/images/thinking/thinker-rodin-closeup.jpg",
+		width: 2673,
+		height: 3722,
 		objectPosition: "50% 28%",
+		// Push up onto the bowed head and hand at the chin.
+		ken: { x: "0%", y: "3%", scale: 1.2 },
 	},
 	"ai-agent-workspace": {
 		artwork:
@@ -37,6 +54,8 @@ export const cookbookCovers: Record<string, CookbookCoverArt> = {
 		transform: "scale(1.55)",
 		transformOrigin: "26% 74%",
 		filter: "brightness(1.18)",
+		// Drift into the glowing flask at lower-left.
+		ken: { x: "2%", y: "-2%", scale: 1.16 },
 	},
 	"chat-room": {
 		artwork: "Merry Company on a Terrace, Jan Steen, ca. 1670",
@@ -46,6 +65,8 @@ export const cookbookCovers: Record<string, CookbookCoverArt> = {
 		transform: "scale(1.12)",
 		transformOrigin: "45% 42%",
 		filter: "brightness(0.95)",
+		// Lateral pan across the company on the terrace.
+		ken: { x: "-4%", y: "0%", scale: 1.16 },
 	},
 	"collaborative-text-editor": {
 		artwork: "Saint Matthew Writing His Gospel, Carlo Dolci, 1640s",
@@ -54,6 +75,8 @@ export const cookbookCovers: Record<string, CookbookCoverArt> = {
 		height: 2897,
 		objectPosition: "45% 22%",
 		transform: "scale(1.12)",
+		// Settle down from the face onto the page being written.
+		ken: { x: "0%", y: "-3%", scale: 1.18 },
 	},
 	"cron-jobs": {
 		artwork: "The November Meteors, Etienne Leopold Trouvelot, 1881-82",
@@ -62,6 +85,8 @@ export const cookbookCovers: Record<string, CookbookCoverArt> = {
 		height: 2560,
 		objectPosition: "50% 42%",
 		transform: "scale(1.22)",
+		// Slow diagonal drift across the night sky, like time passing.
+		ken: { x: "3%", y: "3%", scale: 1.16 },
 	},
 	"live-cursors": {
 		artwork: "Curiosity, Gerard ter Borch the Younger, ca. 1660-62",
@@ -69,6 +94,8 @@ export const cookbookCovers: Record<string, CookbookCoverArt> = {
 		width: 2935,
 		height: 3638,
 		objectPosition: "50% 30%",
+		// Push in on the peering woman's face.
+		ken: { x: "0%", y: "3%", scale: 1.2 },
 	},
 	"multiplayer-game": {
 		artwork: "The Card Players, Paul Cezanne, 1890-92",
@@ -76,6 +103,8 @@ export const cookbookCovers: Record<string, CookbookCoverArt> = {
 		width: 3909,
 		height: 3112,
 		objectPosition: "50% 35%",
+		// Pan across the table between the two players.
+		ken: { x: "-4%", y: "0%", scale: 1.16 },
 	},
 	"per-tenant-database": {
 		artwork: "Dolls' house of Petronella Oortman, c. 1686-1710",
@@ -84,5 +113,18 @@ export const cookbookCovers: Record<string, CookbookCoverArt> = {
 		height: 3054,
 		objectPosition: "50% 40%",
 		filter: "brightness(0.95)",
+		// Descend through the dollhouse rooms, tenant by tenant.
+		ken: { x: "0%", y: "-4%", scale: 1.18 },
+	},
+	"vpc-air-gapped": {
+		artwork: "A Scholar in His Study ('Faust'), Rembrandt, ca. 1652",
+		src: "https://assets.rivet.dev/website/images/thinking/thinker6.jpg",
+		width: 2523,
+		height: 3347,
+		objectPosition: "50% 38%",
+		transform: "scale(1.12)",
+		filter: "brightness(0.95)",
+		// Drift toward the radiant disc at the window, upper-right.
+		ken: { x: "-3%", y: "2%", scale: 1.16 },
 	},
 };
diff --git a/website/src/layouts/BaseLayout.astro b/website/src/layouts/BaseLayout.astro
index 05b42ab198..45ee03ffae 100644
--- a/website/src/layouts/BaseLayout.astro
+++ b/website/src/layouts/BaseLayout.astro
@@ -21,6 +21,7 @@ interface Props {
 	articleAuthor?: string;
 	articleSection?: string;
 	robots?: string;
+	themeColor?: string;
 }
 
 const {
@@ -34,6 +35,7 @@ const {
 	articleAuthor,
 	articleSection,
 	robots,
+	themeColor = "#EFEFEF",
 } = Astro.props;
 
 // Only add " - Rivet" suffix if not already present (handles Rivet, Rivet Actors, Rivet Templates)
@@ -159,12 +161,12 @@ const showRssFeed = currentPath.startsWith('/blog') || currentPath.startsWith('/
 			]
 		})} />
 
-		<!-- Fonts - Preconnect and preload for performance. All families are
-		     requested in a single css2 stylesheet to avoid serial round-trips. -->
-		<link rel="preconnect" href="https://fonts.googleapis.com" />
-		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-		<link rel="preload" href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Courier+Prime&family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400&family=Open+Sans:wght@400;500;600&display=swap" as="style" />
-		<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Courier+Prime&family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400&family=Open+Sans:wght@400;500;600&display=swap" rel="stylesheet" />
+		<!-- Fonts. Manrope and JetBrains Mono are self-hosted variable fonts
+		     declared in fonts.css; preload them to avoid swap flashes. The
+		     Learn section's serif faces load in LearnLayout only. -->
+		<link rel="preload" href="/fonts/manrope/Manrope-Variable-latin.woff2" as="font" type="font/woff2" crossorigin />
+		<link rel="preload" href="/fonts/jetbrains-mono/JetBrainsMono-Variable-latin.woff2" as="font" type="font/woff2" crossorigin />
+		<slot name="head-fonts" />
 
 		<!-- Favicons -->
 		<link rel="apple-touch-icon" sizes="180x180" href="https://assets.rivet.dev/website/public/icons/apple-touch-icon.png?20240925" />
@@ -172,8 +174,8 @@ const showRssFeed = currentPath.startsWith('/blog') || currentPath.startsWith('/
 		<link rel="icon" type="image/png" sizes="16x16" href="https://assets.rivet.dev/website/public/icons/favicon-16x16.png?20240925" />
 		<link rel="manifest" href="/icons/site.webmanifest?20240925" />
 		<link rel="mask-icon" href="/icons/safari-pinned-tab.svg?20240925" color="#5bbad5" />
-		<meta name="msapplication-TileColor" content="#0c0a09" />
-		<meta name="theme-color" content="#0c0a09" />
+		<meta name="msapplication-TileColor" content={themeColor} />
+		<meta name="theme-color" content={themeColor} />
 
 		<!-- Analytics -->
 		<script is:inline async src="https://analytics.ahrefs.com/analytics.js" data-key="9b9IZaKPAs/KhRrWrBjsrw"></script>
@@ -199,7 +201,7 @@ const showRssFeed = currentPath.startsWith('/blog') || currentPath.startsWith('/
 			</Providers>
 		</TooltipProvider>
 		<EmbedDetector client:load />
-		<Footer client:load />
+		<Footer client:load initialPathname={Astro.url.pathname} />
 		<CopyCodeScript />
 		<TabsScript />
 		<MermaidScript />
diff --git a/website/src/layouts/BlogLayout.astro b/website/src/layouts/BlogLayout.astro
index 93d74b85cf..d75c103260 100644
--- a/website/src/layouts/BlogLayout.astro
+++ b/website/src/layouts/BlogLayout.astro
@@ -65,3 +65,10 @@ const articleSchema = {
 	<Header active="blog" variant="floating" client:load />
 	<slot />
 </BaseLayout>
+
+<!-- Blog and changelog pages sit on the porcelain field. -->
+<style is:global>
+	body {
+		background-color: #efefef;
+	}
+</style>
diff --git a/website/src/layouts/ContentLayout.astro b/website/src/layouts/ContentLayout.astro
index 4ef6064d1b..c832d4a134 100644
--- a/website/src/layouts/ContentLayout.astro
+++ b/website/src/layouts/ContentLayout.astro
@@ -14,9 +14,16 @@ const { title, description, canonicalUrl } = Astro.props;
 
 <BaseLayout title={title} description={description} canonicalUrl={canonicalUrl}>
 	<Header variant="floating" client:load />
-	<div class="md:mt-32 mt-20 pb-8" style="--header-height: 5rem;">
-		<Prose as="article" className="order-3 mt-4 w-full flex-shrink-0 lg:order-2 max-w-prose mx-auto">
+	<div class="paper-grain md:mt-32 mt-20 pb-8 px-6" style="--header-height: 5rem;">
+		<Prose as="article" surface="paper" className="order-3 mt-4 w-full flex-shrink-0 lg:order-2 max-w-prose mx-auto">
 			<slot />
 		</Prose>
 	</div>
 </BaseLayout>
+
+<!-- Legal/content pages sit on the porcelain field. -->
+<style is:global>
+	body {
+		background-color: #efefef;
+	}
+</style>
diff --git a/website/src/layouts/DocsLayout.astro b/website/src/layouts/DocsLayout.astro
index d3056f6e9d..ba3d6e70df 100644
--- a/website/src/layouts/DocsLayout.astro
+++ b/website/src/layouts/DocsLayout.astro
@@ -13,11 +13,20 @@ interface Props {
 const { title, description, canonicalUrl, sidebar } = Astro.props;
 ---
 
-<BaseLayout title={title} description={description} canonicalUrl={canonicalUrl}>
-	<Header variant="full-width" showDocsTabs={true} sidebarData={sidebar} client:load />
-	<div class="w-full relative z-10 font-sans">
-		<div class="mx-auto w-full min-h-content flex flex-col md:grid md:grid-cols-docs" style="--header-height: 6.5rem;">
+<BaseLayout title={title} description={description} canonicalUrl={canonicalUrl} themeColor="#EFEFEF">
+	<Header variant="full-width" showDocsTabs={true} light={true} active="docs" sidebarData={sidebar} client:load />
+	<div class="paper-grain selection-paper w-full relative z-10 font-sans">
+		<div class="mx-auto w-full min-h-content flex flex-col md:grid md:grid-cols-docs" style="--header-height: 8.0625rem;">
 			<slot />
 		</div>
 	</div>
 </BaseLayout>
+
+<!-- Docs sit on the porcelain field, matching the marketing pages. The body
+     itself is painted so overscroll and short pages never flash the dark
+     base. Learn keeps its own dark shell. -->
+<style is:global>
+	body {
+		background-color: #efefef;
+	}
+</style>
diff --git a/website/src/layouts/LearnLayout.astro b/website/src/layouts/LearnLayout.astro
index d70c62d909..fca29a2ee6 100644
--- a/website/src/layouts/LearnLayout.astro
+++ b/website/src/layouts/LearnLayout.astro
@@ -21,7 +21,12 @@ const { title, description, canonicalUrl, act, subtitle, tableOfContents = [], i
 const pageTitle = title.replace(/ - Rivet$/, '');
 ---
 
-<BaseLayout title={title} description={description} canonicalUrl={canonicalUrl}>
+<BaseLayout title={title} description={description} canonicalUrl={canonicalUrl} themeColor="#1c1917">
+	<Fragment slot="head-fonts">
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Courier+Prime&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet" />
+	</Fragment>
 	<Header active="learn" variant="full-width" learnMode client:load />
 
 	<div class="learn-container">
diff --git a/website/src/layouts/MarketingLayout.astro b/website/src/layouts/MarketingLayout.astro
index 5607a61620..a67dbc9c3c 100644
--- a/website/src/layouts/MarketingLayout.astro
+++ b/website/src/layouts/MarketingLayout.astro
@@ -20,3 +20,11 @@ const pathname = Astro.url.pathname;
 	<Header variant="floating" initialPathname={pathname} active={active} client:load />
 	<slot />
 </BaseLayout>
+
+<!-- Marketing pages sit on the porcelain field. The body itself is painted
+     so overscroll and short pages never flash the dark docs background. -->
+<style is:global>
+	body {
+		background-color: #efefef;
+	}
+</style>
diff --git a/website/src/lib/highlight-code.ts b/website/src/lib/highlight-code.ts
index 0d5406b7ed..4b6e0cd4a1 100644
--- a/website/src/lib/highlight-code.ts
+++ b/website/src/lib/highlight-code.ts
@@ -28,14 +28,15 @@ let highlighter: shiki.Highlighter;
 export async function highlightCodeHtml(
 	code: string,
 	lang: shiki.BundledLanguage | string = "ts",
+	theme: shiki.BundledTheme | string = heroTheme.name,
 ) {
 	highlighter ??= await shiki.getSingletonHighlighter({
 		langs: LANGS,
-		themes: [heroTheme],
+		themes: [heroTheme, "ayu-dark"],
 	});
 
 	return highlighter.codeToHtml(code, {
 		lang: (lang as shiki.BundledLanguage) || "text",
-		theme: heroTheme.name,
+		theme,
 	});
 }
diff --git a/website/src/pages/404.astro b/website/src/pages/404.astro
index 9ab03db0e6..5e438b1fd1 100644
--- a/website/src/pages/404.astro
+++ b/website/src/pages/404.astro
@@ -2,7 +2,7 @@
 import { getImage } from 'astro:assets';
 import MarketingLayout from '@/layouts/MarketingLayout.astro';
 import { NotFoundPage } from '@/components/marketing/NotFoundPage';
-const imgThinker = { src: "https://assets.rivet.dev/website/images/thinking/thinker.jpg", width: 3140, height: 4000, format: "jpg" };
+const imgThinker = { src: "https://assets.rivet.dev/website/images/thinking/thinker-rodin-closeup.jpg", width: 2673, height: 3722, format: "jpg" };
 const optimizedImage = await getImage({
   src: imgThinker,
   width: 800,
@@ -16,7 +16,7 @@ const optimizedImage = await getImage({
   description="The page you're looking for doesn't exist."
   robots="noindex, nofollow"
 >
-  <div class="min-h-screen bg-black font-sans text-zinc-300 selection:bg-[#FF4500]/30 selection:text-orange-200">
+  <div class="min-h-screen font-sans text-ink-soft">
     <NotFoundPage thinkingImage={optimizedImage.src} client:load />
   </div>
 </MarketingLayout>
diff --git a/website/src/pages/actors.astro b/website/src/pages/actors.astro
index 1609c479ae..d8e975695c 100644
--- a/website/src/pages/actors.astro
+++ b/website/src/pages/actors.astro
@@ -1,4 +1,7 @@
 ---
+// Page lane: /actors is the canonical home of the Actor primitive and every
+// use case built on it: AI agents, realtime, multiplayer, collaborative state,
+// and durable workflows. There is no separate agent solution page.
 import MarketingLayout from '@/layouts/MarketingLayout.astro';
 import { BuiltInFeatures } from '@/components/marketing/sections/BuiltInFeatures';
 import { ProblemSection } from '@/components/marketing/sections/ProblemSection';
@@ -9,6 +12,31 @@ import { ScrollObserver } from '@/components/ScrollObserver';
 import { FaqSection } from '@/components/faq/FaqSection';
 import FaqJsonLd from '@/components/faq/FaqJsonLd.astro';
 import { actorsFaqs } from '@/data/faqs/actors';
+import { CatalogCard } from '@/components/marketing/editorial/CatalogCard';
+import { HERO_H1_CLASS, SECTION_H2_CLASS, SUBTITLE_CLASS } from '@/components/marketing/typography';
+
+const useCases = [
+	{
+		title: 'AI agents',
+		body: "One Actor per agent. Persistent memory, tool execution, and long-running context that survives restarts — in your existing Node.js or Bun backend.",
+		href: '/docs/actors/ai-and-user-generated-actors',
+	},
+	{
+		title: 'Realtime & multiplayer',
+		body: 'WebSockets and event broadcast built in. One Actor per room, match, or channel keeps every client in sync without a separate realtime service.',
+		href: '/docs/actors/events',
+	},
+	{
+		title: 'Collaborative state',
+		body: 'One Actor per document or workspace. State lives next to compute, so concurrent edits stay consistent without cache-invalidation gymnastics.',
+		href: '/docs/actors/sharing-and-joining-state',
+	},
+	{
+		title: 'Durable workflows',
+		body: 'Queues, schedules, and timers on the same primitive. Multi-step operations pick up where they left off, even across sleeps and deploys.',
+		href: '/docs/actors/queues',
+	},
+];
 ---
 
 <MarketingLayout
@@ -19,24 +47,112 @@ import { actorsFaqs } from '@/data/faqs/actors';
 >
 	<FaqJsonLd items={actorsFaqs} />
 	<ScrollObserver client:load>
-		<div class="min-h-screen bg-black font-sans text-zinc-300 selection:bg-[#FF4500]/30 selection:text-orange-200">
+		<div class="paper-grain min-h-screen font-sans text-ink-soft">
 			<main>
-				<!-- Hero -->
-				<section class="relative flex min-h-[88svh] flex-col justify-center px-6 pt-32 pb-16 md:pt-40 md:pb-24 text-center">
-					<div class="mx-auto w-full max-w-3xl">
-						<h1 class="mb-4 text-4xl font-normal leading-[1.1] tracking-tight text-white md:text-6xl">
-							The primitive for<br />stateful workloads.
-						</h1>
-						<p class="mb-8 text-lg text-zinc-400 md:text-xl">
-							One Actor per agent, per session, per user. State, storage, and networking included.
-						</p>
-						<div class="flex flex-col items-center gap-3 sm:flex-row sm:justify-center">
-							<a href="/docs" class="selection-dark inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-white px-4 py-2 text-sm font-medium text-black transition-colors hover:bg-zinc-200">
-								Start Building
-							</a>
-							<a href="/docs/actors/quickstart" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border border-white/20 px-4 py-2 text-sm text-zinc-300 transition-colors hover:border-white/30 hover:text-white">
-								Quickstart Guide
-							</a>
+				<!-- Hero: full-bleed oil painting fading down into ink, then grading into porcelain on scroll -->
+				<section id="actors-hero" class="relative flex min-h-[100svh] flex-col justify-end overflow-hidden pt-32 pb-16 md:pb-24" style="--actors-content-fade: 1;">
+					<!-- Painting backdrop, a fixed crop inside the clipping box
+					     (overflow-hidden). The gradients sit over it so the
+					     dark fade can hand off to the porcelain gradient on scroll. -->
+					<div id="actors-hero-bg" class="absolute inset-0 z-0 overflow-hidden" aria-hidden="true" style="will-change: opacity;">
+						<img
+							src="https://assets.rivet.dev/website/images/textures/actors-hero-degas-orchestra.webp"
+							alt=""
+							loading="eager"
+							fetchpriority="high"
+							decoding="async"
+							class="absolute inset-x-0 -top-[18%] h-[136%] w-full object-cover object-[center_28%]"
+						/>
+						<!-- Fade to ink at the bottom so the hero text reads before the paper gradient layers over it. -->
+						<div class="absolute inset-0 bg-gradient-to-t from-ink from-[18%] via-ink/70 via-[42%] to-transparent to-[78%]"></div>
+						<!-- Gentle left wash for extra legibility behind the copy -->
+						<div class="absolute inset-0 bg-gradient-to-r from-ink/60 via-ink/20 to-transparent"></div>
+					</div>
+					<!-- Scroll-driven porcelain wash: a static bottom-up porcelain gradient (solid rgb(234,234,234) at the seam, fading to transparent toward the top) whose opacity JS ramps in on scroll. Opacity-only, so there is no blur or per-frame mask raster to jank the scroll. -->
+					<div
+						id="actors-paper-wash"
+						class="pointer-events-none absolute inset-x-0 bottom-0 z-[1] h-[78svh]"
+						style="opacity: 0; will-change: opacity; background-image: linear-gradient(to top, rgb(234,234,234) 0%, rgb(234,234,234) 24%, rgba(234,234,234,0) 64%);"
+					></div>
+
+					<div class="relative z-10 mx-auto w-full max-w-7xl px-6" style="opacity: var(--actors-content-fade);">
+						<div class="max-w-xl">
+							<h1 class={`mb-4 ${HERO_H1_CLASS} !text-cream`}>
+								The primitive for<br />stateful workloads.
+							</h1>
+							<p class="mb-8 max-w-lg text-lg text-cream/70 md:text-xl">
+								One Actor per agent, per session, per user. The same primitive powers realtime apps, multiplayer, and collaborative state.
+							</p>
+							<div class="flex flex-col gap-3 sm:flex-row">
+								<a href="/docs/actors" class="inline-flex items-center justify-center whitespace-nowrap rounded-md bg-white px-4 py-2 text-sm font-medium text-ink transition-colors hover:bg-white/90">
+									Start Building
+								</a>
+								<a href="/docs/actors/quickstart" class="inline-flex items-center justify-center whitespace-nowrap rounded-md border border-cream/25 bg-cream/10 px-4 py-2 text-sm text-cream backdrop-blur-md backdrop-saturate-[1.3] transition-colors hover:border-cream/45 hover:bg-cream/20">
+									Quickstart Guide
+								</a>
+							</div>
+						</div>
+					</div>
+				</section>
+
+				<!-- As the hero scrolls away, ramp the porcelain gradient opacity and dim the painting and copy. Opacity-only animation, no blur or masks, keeps the scroll on the compositor. -->
+				<script>
+					const hero = document.getElementById('actors-hero');
+					const wash = document.getElementById('actors-paper-wash');
+					const bg = document.getElementById('actors-hero-bg');
+					if (hero) {
+						let ticking = false;
+						const smoothstep = (value: number) => value * value * (3 - 2 * value);
+						const update = () => {
+							const h = hero.offsetHeight || window.innerHeight;
+							const scrollRatio = window.scrollY / h;
+							// Ramp the porcelain in gently so it spreads toward the top at a
+							// measured pace while the painting and copy fade underneath it.
+							const progress = Math.min(1, Math.max(0, (scrollRatio - 0.04) / 0.55));
+							const eased = smoothstep(progress);
+							const bell = 1 - Math.pow(1 - eased, 3.2);
+							// Opacity-only animation keeps the scroll on the compositor (no blur, no
+							// per-frame mask raster). A static porcelain gradient fades in from the
+							// bottom, the painting dims, and the copy clears ahead of it.
+							if (wash) wash.style.opacity = bell.toFixed(3);
+							if (bg) bg.style.opacity = (1 - bell * 0.7).toFixed(3);
+							hero.style.setProperty('--actors-content-fade', Math.max(0, 1 - bell * 1.5).toFixed(3));
+							ticking = false;
+						};
+						const onScroll = () => {
+							if (!ticking) {
+								ticking = true;
+								requestAnimationFrame(update);
+							}
+						};
+						update();
+						window.addEventListener('scroll', onScroll, { passive: true });
+						window.addEventListener('resize', onScroll, { passive: true });
+					}
+				</script>
+
+				<!-- Use cases -->
+				<section class="bg-[#EAEAEA] px-6 py-16 md:py-32">
+					<div class="mx-auto w-full max-w-7xl">
+						<div class="mb-12 max-w-3xl">
+							<h2 class={SECTION_H2_CLASS}>One primitive, every stateful workload.</h2>
+							<p class={SUBTITLE_CLASS}>
+								The same Actor that holds an agent's memory holds a game lobby, a shared document, or a running workflow.
+							</p>
+						</div>
+						<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
+							{
+								useCases.map((useCase) => (
+									<CatalogCard
+										title={useCase.title}
+										href={useCase.href}
+										linkLabel="Read the docs"
+										className="flex h-full flex-col"
+									>
+										<p class="mt-2 flex-1 text-sm leading-relaxed text-ink-soft">{useCase.body}</p>
+									</CatalogCard>
+								))
+							}
 						</div>
 					</div>
 				</section>
@@ -45,8 +161,7 @@ import { actorsFaqs } from '@/data/faqs/actors';
 				<ProblemSection client:visible />
 				<BenchmarksSection client:visible />
 				<ObservabilitySection client:visible />
-				<!-- Static render with no client directive. FaqSection is hook-free and uses native details/summary, so it needs no JS. -->
-				<FaqSection items={actorsFaqs} />
+				<FaqSection items={actorsFaqs} theme="light" client:visible />
 				<RedesignedCTA client:visible />
 			</main>
 		</div>
diff --git a/website/src/pages/agent-os/registry/[slug].astro b/website/src/pages/agent-os/registry/[slug].astro
index ffc6d48f6d..c311301ad5 100644
--- a/website/src/pages/agent-os/registry/[slug].astro
+++ b/website/src/pages/agent-os/registry/[slug].astro
@@ -2,6 +2,7 @@
 import MarketingLayout from '@/layouts/MarketingLayout.astro';
 import { Icon } from '@rivet-gg/icons';
 import { registry } from '@/data/registry';
+import { InkChip } from '@/components/marketing/editorial/InkPanel';
 
 export function getStaticPaths() {
 	return registry.map((entry) => ({
@@ -19,13 +20,6 @@ const TYPE_LABELS: Record<string, string> = {
 	"sandbox-extension": "Sandbox Mounting",
 };
 
-const TYPE_COLORS: Record<string, string> = {
-	"file-system": "bg-blue-50 text-blue-600 border-blue-200",
-	tool: "bg-emerald-50 text-emerald-600 border-emerald-200",
-	agent: "bg-orange-50 text-orange-600 border-orange-200",
-	"sandbox-extension": "bg-purple-50 text-purple-600 border-purple-200",
-};
-
 const isComingSoon = entry.status === "coming-soon";
 const installCmd = !isComingSoon ? `npm install ${entry.package}` : null;
 ---
@@ -35,17 +29,17 @@ const installCmd = !isComingSoon ? `npm install ${entry.package}` : null;
 	description={entry.description}
 	canonicalUrl={`https://rivet.dev/agent-os/registry/${entry.slug}/`}
 >
-	<main class="min-h-screen w-full overflow-x-hidden bg-white selection:bg-zinc-200 selection:text-zinc-900">
+	<main class="paper-grain min-h-screen w-full overflow-x-hidden font-sans text-ink-soft">
 		<div class="relative isolate overflow-hidden pt-40">
 			<div class="mx-auto max-w-3xl px-6 lg:px-8">
 				<a
 					href="/agent-os/registry"
-					class="inline-flex items-center text-sm text-zinc-400 hover:text-zinc-900 mb-8 transition-colors no-underline"
+					class="mb-8 inline-flex items-center text-sm text-ink-faint no-underline transition-colors hover:text-ink"
 				>
 					&larr; Back to Registry
 				</a>
 
-				<div class="flex items-center gap-4 mb-4">
+				<div class="mb-4 flex items-center gap-4">
 					{entry.image && (
 						<img
 							src={entry.image}
@@ -56,55 +50,51 @@ const installCmd = !isComingSoon ? `npm install ${entry.package}` : null;
 						/>
 					)}
 					{entry.icon && (
-						<Icon icon={entry.icon} className="text-zinc-900 w-10 h-10" />
+						<Icon icon={entry.icon} className="h-10 w-10 text-olive" />
 					)}
-					<h1 class="text-5xl font-700 text-zinc-900 leading-[1.1] tracking-normal">
+					<h1 class="text-4xl font-medium leading-[1.06] tracking-[-0.015em] text-ink md:text-5xl">
 						{entry.title}
 					</h1>
 					{isComingSoon && (
-						<span class="text-xs px-2.5 py-1 rounded-full border border-zinc-200 text-zinc-400">
+						<span class="rounded-full border border-ink/15 px-2.5 py-1 text-xs text-ink-faint">
 							Coming Soon
 						</span>
 					)}
 				</div>
 
-				<div class="flex gap-2 mt-4">
+				<div class="mt-4 flex gap-2">
 					{entry.types.map((type: string) => (
 						<span
-							class={`text-xs px-2 py-0.5 rounded-full border ${TYPE_COLORS[type]}`}
+							class="rounded-full border border-pine/30 bg-pine/5 px-2 py-0.5 font-mono text-[11px] uppercase tracking-[0.12em] text-pine"
 						>
 							{TYPE_LABELS[type]}
 						</span>
 					))}
 				</div>
 
-				<p class="mt-6 text-lg text-zinc-500 leading-relaxed">
+				<p class="mt-6 text-lg leading-relaxed text-ink-soft">
 					{entry.description}
 				</p>
 			</div>
 		</div>
 
-		<div class="mx-auto max-w-3xl px-6 lg:px-8 pt-10 pb-24">
+		<div class="mx-auto max-w-3xl px-6 pt-10 pb-24 lg:px-8">
 			{isComingSoon ? (
-				<div class="rounded-xl border border-zinc-200 bg-zinc-50 p-8 text-center">
-					<p class="text-zinc-400 text-lg">This integration is coming soon.</p>
+				<div class="border border-ink/10 bg-white/55 p-8 text-center">
+					<p class="text-lg text-ink-faint">This integration is coming soon.</p>
 				</div>
 			) : (
 				<>
 					<section>
-						<h2 class="text-xl font-600 text-zinc-900 mb-3">Install</h2>
-						<div class="flex items-center gap-2 bg-zinc-50 rounded-lg border border-zinc-200 px-4 py-3 mb-6">
-							<code class="text-sm text-zinc-700 flex-1 font-mono">
-								{installCmd}
-							</code>
-						</div>
+						<h2 class="mb-3 text-xl font-medium text-ink">Install</h2>
+						<InkChip command={installCmd!} className="mb-6" />
 					</section>
 
 					<a
 						href={`https://www.npmjs.com/package/${entry.package}`}
 						target="_blank"
 						rel="noopener noreferrer"
-						class="inline-flex items-center justify-center rounded-lg bg-zinc-100 hover:bg-zinc-200 border border-zinc-200 text-zinc-700 text-sm font-medium px-4 py-2 transition-colors no-underline"
+						class="inline-flex items-center justify-center rounded-lg border border-ink/20 px-4 py-2 text-sm font-medium text-ink-soft no-underline transition-colors hover:border-ink/40 hover:text-ink"
 					>
 						View on npm
 					</a>
diff --git a/website/src/pages/agent-os/registry/index.astro b/website/src/pages/agent-os/registry/index.astro
index 997da07e3e..92878b6779 100644
--- a/website/src/pages/agent-os/registry/index.astro
+++ b/website/src/pages/agent-os/registry/index.astro
@@ -2,6 +2,7 @@
 import MarketingLayout from '@/layouts/MarketingLayout.astro';
 import RegistryPageClient from '@/components/marketing/registry/RegistryPageClient';
 import { registry } from '@/data/registry';
+import { HERO_H1_CLASS } from '@/components/marketing/typography';
 ---
 
 <MarketingLayout
@@ -10,13 +11,13 @@ import { registry } from '@/data/registry';
 	canonicalUrl="https://rivet.dev/agent-os/registry/"
 	ogImage="https://assets.rivet.dev/website/public/images/agent-os/agentos-og.png"
 >
-	<main class="min-h-screen w-full bg-white selection:bg-zinc-200 selection:text-zinc-900" style="overflow-x: clip;">
+	<main class="paper-grain min-h-screen w-full font-sans text-ink-soft" style="overflow-x: clip;">
 		<div class="relative isolate pt-40">
 			<div class="mx-auto max-w-4xl px-6 text-center lg:px-8">
-				<h1 class="text-6xl leading-[1.1] tracking-normal text-zinc-900">
+				<h1 class={HERO_H1_CLASS}>
 					agentOS Registry
 				</h1>
-				<p class="mx-auto mt-6 max-w-3xl text-xl font-medium leading-[1.2] tracking-tight text-zinc-500">
+				<p class="mx-auto mt-6 max-w-3xl text-lg leading-relaxed text-ink-soft md:text-xl">
 					Browse agents, tools, file systems, and sandbox mounting for agentOS.
 				</p>
 				<div class="mt-8 flex items-center justify-center gap-3">
@@ -24,7 +25,7 @@ import { registry } from '@/data/registry';
 						href="https://github.com/rivet-dev/agent-os/blob/main/registry/CONTRIBUTING.md"
 						target="_blank"
 						rel="noopener noreferrer"
-						class="inline-flex items-center gap-2 rounded-lg border border-zinc-200 px-5 py-2.5 text-sm font-medium text-zinc-600 no-underline transition-all duration-200 hover:border-zinc-300 hover:text-zinc-900"
+						class="inline-flex items-center gap-2 rounded-lg border border-ink/20 px-5 py-2.5 text-sm font-medium text-ink-soft no-underline transition-colors hover:border-ink/40 hover:text-ink"
 					>
 						Publish a Package
 						<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
@@ -33,7 +34,7 @@ import { registry } from '@/data/registry';
 						href="https://github.com/rivet-dev/agent-os/issues"
 						target="_blank"
 						rel="noopener noreferrer"
-						class="inline-flex items-center gap-2 rounded-lg border border-zinc-200 px-5 py-2.5 text-sm font-medium text-zinc-600 no-underline transition-all duration-200 hover:border-zinc-300 hover:text-zinc-900"
+						class="inline-flex items-center gap-2 rounded-lg border border-ink/20 px-5 py-2.5 text-sm font-medium text-ink-soft no-underline transition-colors hover:border-ink/40 hover:text-ink"
 					>
 						Request an Extension
 						<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
diff --git a/website/src/pages/agent-os/use-cases.astro b/website/src/pages/agent-os/use-cases.astro
index ef757dc044..4169a49a91 100644
--- a/website/src/pages/agent-os/use-cases.astro
+++ b/website/src/pages/agent-os/use-cases.astro
@@ -5,7 +5,7 @@ import AgentOSUseCasesPage from '@/components/marketing/solutions/AgentOSUseCase
 
 <MarketingLayout
 	title="agentOS Use Cases - Who is agentOS for?"
-	description="From background agents to production fleets, programming assistants to multi-agent systems. Discover what you can build with agentOS."
+	description="From background agents to production fleets, programming assistants to multi-agent systems — what you can build with agentOS."
 	canonicalUrl="https://rivet.dev/agent-os/use-cases/"
 >
 	<AgentOSUseCasesPage client:load />
diff --git a/website/src/pages/agent.astro b/website/src/pages/agent.astro
deleted file mode 100644
index 8bf55575da..0000000000
--- a/website/src/pages/agent.astro
+++ /dev/null
@@ -1,12 +0,0 @@
----
-import MarketingLayout from '@/layouts/MarketingLayout.astro';
-import AgentPageClient from '@/components/marketing/solutions/page';
----
-
-<MarketingLayout
-	title="AI Agents - Rivet"
-	description="Build AI agents with stateful backends using Rivet Actors."
-	canonicalUrl="https://rivet.dev/agent/"
->
-	<AgentPageClient client:load />
-</MarketingLayout>
diff --git a/website/src/pages/blog/index.astro b/website/src/pages/blog/index.astro
index 37f3963c61..d7f365cd7f 100644
--- a/website/src/pages/blog/index.astro
+++ b/website/src/pages/blog/index.astro
@@ -1,6 +1,7 @@
 ---
 import { getCollection } from 'astro:content';
 import BlogLayout from '@/layouts/BlogLayout.astro';
+import { CATEGORIES } from '@/lib/article';
 import { formatTimestamp } from '@/lib/formatDate';
 import { getPostImage } from '@/lib/postImage';
 import { Icon, faRss } from '@rivet-gg/icons';
@@ -53,12 +54,12 @@ for (const entry of changelogPosts) {
 ---
 
 <BlogLayout title="Blog - Rivet">
-	<div class="mx-auto mt-20 w-full max-w-7xl px-6 pb-32 md:mt-32 md:pb-48" style="--header-height: 5rem;">
+	<div class="mx-auto w-full max-w-7xl px-6 pb-32 pt-20 md:pb-48 md:pt-32" style="--header-height: 5rem;">
 		<div class="mt-8 flex w-full items-center justify-between">
-			<h1 class="text-4xl font-normal leading-[1.1] tracking-tight text-white md:text-6xl">Blog</h1>
+			<h1 class="text-4xl font-medium leading-[1.06] tracking-[-0.015em] text-ink md:text-6xl">Blog</h1>
 			<a
 				href="/rss/feed.xml"
-				class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border border-white/10 px-4 py-2 text-sm text-zinc-300 transition-colors hover:border-white/20 hover:text-white"
+				class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border border-ink/20 px-4 py-2 text-sm text-ink-soft transition-colors hover:border-ink/40 hover:text-ink"
 			>
 				<Icon icon={faRss} />
 				RSS Feed
@@ -69,14 +70,14 @@ for (const entry of changelogPosts) {
 			<!-- Changelog calendar -->
 			<aside class="order-last lg:order-none">
 				<div class="lg:sticky lg:top-32">
-					<div class="border-b border-white/10 pb-3">
-						<h2 class="text-xs font-semibold uppercase tracking-[0.12em] text-zinc-500">Changelog</h2>
+					<div class="border-b border-ink/10 pb-3">
+						<h2 class="font-mono text-[11px] font-medium uppercase tracking-[0.16em] text-pine">Changelog</h2>
 					</div>
 					<div class="relative">
 						<div class="mt-5 max-h-[calc(100vh-14rem)] space-y-6 overflow-y-auto pb-6 pr-1">
 							{changelogMonths.map((month) => (
 							<div>
-								<p class="text-[0.7rem] font-semibold uppercase tracking-[0.1em] text-zinc-600">{month.label}</p>
+								<p class="font-mono text-[0.7rem] font-medium uppercase tracking-[0.1em] text-ink-faint">{month.label}</p>
 								<ul class="mt-2">
 									{month.items.map((item) => (
 										<li>
@@ -86,11 +87,11 @@ for (const entry of changelogPosts) {
 											>
 												<time
 													datetime={item.published.toISOString()}
-													class="w-6 shrink-0 pt-px text-right text-xs tabular-nums text-zinc-600 transition-colors group-hover:text-accent"
+													class="w-6 shrink-0 pt-px text-right font-mono text-xs tabular-nums text-ink-faint transition-colors group-hover:text-pine"
 												>
 													{item.published.getDate()}
 												</time>
-												<span class="text-sm leading-snug text-zinc-400 transition-colors group-hover:text-white">
+												<span class="text-sm leading-snug text-ink-soft transition-colors group-hover:text-ink">
 													{item.title}
 												</span>
 											</a>
@@ -100,16 +101,16 @@ for (const entry of changelogPosts) {
 							</div>
 						))}
 						</div>
-						<div class="pointer-events-none absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-black to-transparent"></div>
+						<div class="pointer-events-none absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-paper to-transparent"></div>
 					</div>
 				</div>
 			</aside>
 
 			<!-- Blog posts -->
-			<div class="order-first grid grid-cols-1 gap-6 lg:order-none">
+			<div class="order-first grid grid-cols-1 gap-6 md:grid-cols-2 lg:order-none">
 				{blogPosts.map((article) => (
 					<a href={`/blog/${article.slug}/`} class="size-full">
-						<article class="flex size-full flex-col items-start justify-between rounded-md border border-white/10 p-4 transition-colors hover:border-white/20">
+						<article class="flex size-full flex-col items-start justify-between border border-ink/10 bg-white/55 p-4 transition-colors hover:border-ink/25">
 							<div class="w-full">
 								{article.image && (
 									<div class="relative w-full">
@@ -118,22 +119,27 @@ for (const entry of changelogPosts) {
 											alt={article.title}
 											width={1200}
 											height={600}
-											class="aspect-[2/1] w-full rounded-md border border-white/10 object-cover"
+											class="aspect-[2/1] w-full rounded-md border border-ink/10 object-cover"
 											loading="lazy"
 											decoding="async"
 										/>
 									</div>
 								)}
 								<div class="mt-4 flex items-center gap-x-3 text-xs">
-									<time datetime={article.data.published.toISOString()} class="text-zinc-500">
+									{CATEGORIES[article.data.category] && (
+										<span class="font-medium uppercase tracking-[0.1em] text-pine">
+											{CATEGORIES[article.data.category].name}
+										</span>
+									)}
+									<time datetime={article.data.published.toISOString()} class="text-ink-faint">
 										{formatTimestamp(article.data.published)}
 									</time>
 								</div>
 								<div class="group relative">
-									<h3 class="mt-2 text-xl font-normal leading-7 text-white">
+									<h3 class="mt-2 text-xl font-medium leading-7 text-ink">
 										{article.title}
 									</h3>
-									<p class="mt-2 line-clamp-2 text-sm leading-relaxed text-zinc-500">
+									<p class="mt-2 line-clamp-2 text-sm leading-relaxed text-ink-soft">
 										{article.description}
 									</p>
 								</div>
diff --git a/website/src/pages/cloud.astro b/website/src/pages/cloud.astro
index c877daeeb7..12bfd31933 100644
--- a/website/src/pages/cloud.astro
+++ b/website/src/pages/cloud.astro
@@ -69,9 +69,9 @@ const productSchema = {
 	<script type="application/ld+json" set:html={JSON.stringify(productSchema)} />
 	<FaqJsonLd items={cloudFaqs} />
 	<PricingPageClient client:load />
-	{/* Rendered statically outside the island so the FAQ content ships only in
-	    HTML and JSON-LD, not a third time in the island bundle. */}
-	<div class="bg-black font-sans text-zinc-300">
-		<FaqSection items={cloudFaqs} />
+	{/* Hydrated on scroll so the accordion animates; content is still SSR'd
+	    into the HTML (and JSON-LD) for crawlers. */}
+	<div class="paper-grain font-sans text-ink-soft">
+		<FaqSection items={cloudFaqs} theme="light" client:visible />
 	</div>
 </MarketingLayout>
diff --git a/website/src/pages/compare/[slug].astro b/website/src/pages/compare/[slug].astro
index 8cf213b0cd..7c2fb0de55 100644
--- a/website/src/pages/compare/[slug].astro
+++ b/website/src/pages/compare/[slug].astro
@@ -27,7 +27,6 @@ const breadcrumbSchema = {
 	'@type': 'BreadcrumbList',
 	itemListElement: [
 		{ name: 'Home', url: 'https://rivet.dev/' },
-		{ name: 'Compare', url: 'https://rivet.dev/compare/' },
 		{ name: entry.title, url: canonicalUrl },
 	].map((item, index) => ({
 		'@type': 'ListItem',
@@ -57,5 +56,5 @@ const webPageSchema = {
 	<script type="application/ld+json" set:html={jsonLdString(breadcrumbSchema)} />
 	<script type="application/ld+json" set:html={jsonLdString(webPageSchema)} />
 	<FaqJsonLd items={entry.faq} />
-	<ComparePage slug={entry.slug} />
+	<ComparePage slug={entry.slug} client:visible />
 </MarketingLayout>
diff --git a/website/src/pages/compare/index.astro b/website/src/pages/compare/index.astro
deleted file mode 100644
index aba5b3d82a..0000000000
--- a/website/src/pages/compare/index.astro
+++ /dev/null
@@ -1,85 +0,0 @@
----
-import MarketingLayout from '@/layouts/MarketingLayout.astro';
-import { compareEntries } from '@/data/compare';
-import { jsonLdString } from '@/lib/jsonLd';
-
-const title = 'Rivet vs Alternatives';
-const description =
-	'See how Rivet compares with alternative platforms for stateful backends, realtime applications, and durable workflows. Honest feature-by-feature breakdowns.';
-const canonicalUrl = 'https://rivet.dev/compare/';
-
-const breadcrumbSchema = {
-	'@context': 'https://schema.org',
-	'@type': 'BreadcrumbList',
-	itemListElement: [
-		{ name: 'Home', url: 'https://rivet.dev/' },
-		{ name: 'Compare', url: canonicalUrl },
-	].map((item, index) => ({
-		'@type': 'ListItem',
-		position: index + 1,
-		name: item.name,
-		item: item.url,
-	})),
-};
-
-const collectionSchema = {
-	'@context': 'https://schema.org',
-	'@type': 'CollectionPage',
-	name: title,
-	description,
-	url: canonicalUrl,
-	isPartOf: { '@id': 'https://rivet.dev/#website' },
-	mainEntity: {
-		'@type': 'ItemList',
-		itemListElement: compareEntries.map((entry, index) => ({
-			'@type': 'ListItem',
-			position: index + 1,
-			name: entry.title,
-			url: `https://rivet.dev/compare/${entry.slug}/`,
-		})),
-	},
-};
----
-
-<MarketingLayout title={title} description={description} canonicalUrl={canonicalUrl}>
-	<script type="application/ld+json" set:html={jsonLdString(breadcrumbSchema)} />
-	<script type="application/ld+json" set:html={jsonLdString(collectionSchema)} />
-	<div class="min-h-screen bg-black font-sans text-zinc-300 selection:bg-[#FF4500]/30 selection:text-orange-200">
-		<main>
-			<section class="relative flex flex-col justify-center px-6 pt-32 pb-16">
-				<div class="mx-auto w-full max-w-7xl">
-					<div class="max-w-3xl">
-						<h1 class="mb-6 text-4xl font-normal leading-[1.1] tracking-tight text-white md:text-6xl">
-							Rivet vs Alternatives
-						</h1>
-						<p class="text-base leading-relaxed text-zinc-500 md:text-lg">
-							Honest comparisons between Rivet and other platforms for stateful backends,
-							realtime applications, and durable workflows. Each page breaks down features,
-							trade-offs, and when to choose each option.
-						</p>
-					</div>
-				</div>
-			</section>
-			<section class="px-6 pb-32">
-				<div class="mx-auto w-full max-w-7xl">
-					<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
-						{
-							compareEntries.map((entry) => (
-								<a
-									href={`/compare/${entry.slug}/`}
-									class="group flex flex-col rounded-lg border border-white/10 p-6 transition-colors hover:border-white/20 hover:bg-white/5"
-								>
-									<h2 class="mb-2 text-lg font-normal text-white">{entry.title}</h2>
-									<p class="text-sm leading-relaxed text-zinc-500">{entry.description}</p>
-									<span class="mt-4 text-sm text-zinc-300 transition-colors group-hover:text-white">
-										Read the comparison
-									</span>
-								</a>
-							))
-						}
-					</div>
-				</div>
-			</section>
-		</main>
-	</div>
-</MarketingLayout>
diff --git a/website/src/pages/cookbook/[...slug].astro b/website/src/pages/cookbook/[...slug].astro
index 0f3033b910..f66c41cca1 100644
--- a/website/src/pages/cookbook/[...slug].astro
+++ b/website/src/pages/cookbook/[...slug].astro
@@ -130,18 +130,18 @@ if (coverArt) {
 >
 	<script type="application/ld+json" set:html={jsonLdString(breadcrumbSchema)} />
 	<script type="application/ld+json" set:html={jsonLdString(techArticleSchema)} />
-	<main class="min-h-screen bg-black font-sans text-zinc-300 selection:bg-[#FF4500]/30 selection:text-orange-200">
+	<main class="paper-grain min-h-screen font-sans text-ink-soft">
 		<div class="mx-auto max-w-7xl px-6 pb-28 pt-32 md:pt-40">
 			<div class="flex flex-col gap-16 lg:flex-row lg:gap-20 xl:gap-24">
 				<div class="min-w-0 flex-1">
-					<a href="/cookbook" class="inline-flex items-center gap-2 text-xs text-zinc-500 transition-colors hover:text-white">
+					<a href="/cookbook" class="inline-flex items-center gap-2 text-xs text-ink-faint transition-colors hover:text-ink">
 						← Back to Cookbooks
 					</a>
-					<h1 class="mt-8 text-4xl font-medium leading-[1.06] tracking-[-0.015em] text-white md:text-[3.75rem]">
+					<h1 class="mt-8 text-4xl font-medium leading-[1.06] tracking-[-0.015em] text-ink md:text-[3.75rem]">
 						{title}
 					</h1>
 					{description && (
-						<p class="mt-7 max-w-2xl text-lg leading-8 text-zinc-400">
+						<p class="mt-7 max-w-2xl text-lg leading-8 text-ink-soft">
 							{description}
 						</p>
 					)}
@@ -154,19 +154,19 @@ if (coverArt) {
 										href={tpl.githubUrl}
 										target="_blank"
 										rel="noreferrer"
-										class="inline-flex items-center gap-2 rounded-md border border-white/10 bg-white/5 px-3.5 py-2 text-sm text-zinc-200 transition-colors hover:border-white/25 hover:text-white"
+										class="inline-flex items-center gap-2 rounded-md border border-ink/15 bg-white/55 px-3.5 py-2 text-sm text-ink transition-colors hover:border-ink/30"
 									>
-										<span class="text-zinc-500">Example</span>
+										<span class="text-ink-faint">Example</span>
 										{tpl.displayName}
-										<span aria-hidden="true" class="text-zinc-500">↗</span>
+										<span aria-hidden="true" class="text-ink-faint">↗</span>
 									</a>
 								))}
 							</div>
 						)}
-						<div class="relative max-w-md rounded-md border border-white/10 bg-white/5 p-3 pr-11">
-							<code class="select-all break-all font-mono text-xs leading-relaxed text-zinc-300">npx skills add rivet-dev/skills -s {skillId}</code>
+						<div class="selection-paper relative max-w-md rounded-md border border-ink/20 bg-ink p-3 pr-11">
+							<code class="select-all break-all font-mono text-xs leading-relaxed text-cream/85">npx skills add rivet-dev/skills -s {skillId}</code>
 							<button
-								class="copy-skill-btn absolute right-1.5 top-1.5 rounded p-1.5 text-zinc-500 transition-colors hover:bg-white/10 hover:text-white"
+								class="copy-skill-btn absolute right-1.5 top-1.5 rounded p-1.5 text-cream/50 transition-colors hover:bg-cream/10 hover:text-cream"
 								aria-label="Copy to clipboard"
 								data-copy={`npx skills add rivet-dev/skills -s ${skillId}`}
 							>
@@ -181,20 +181,16 @@ if (coverArt) {
 						</div>
 					</div>
 
-					<article class="prose prose-invert prose-zinc mt-20 max-w-prose-docs leading-relaxed prose-headings:scroll-mt-28 prose-headings:font-medium prose-headings:tracking-tight prose-h2:mt-14 prose-h2:text-[1.6rem] prose-h3:mt-10 prose-p:text-zinc-400 prose-a:text-white prose-strong:text-zinc-200 prose-code:text-zinc-300 prose-li:text-zinc-400 prose-th:text-zinc-300">
+					<article class="prose mt-20 max-w-prose-docs leading-relaxed prose-headings:scroll-mt-28 prose-headings:font-medium prose-headings:tracking-tight prose-h2:mt-14 prose-h2:text-[1.6rem] prose-h3:mt-10">
 						<Content components={mdxComponents} />
 					</article>
 				</div>
 
 				<aside class="hidden w-60 flex-shrink-0 lg:block xl:w-64">
-					<div class="h-full space-y-8">
+					<div class="space-y-8 border border-ink/15 p-5">
 						{coverSrc && coverArt && (
 							<div aria-hidden="true" class="group/cover relative">
-								<div class="absolute -inset-x-4 top-0 h-px bg-white/15"></div>
-								<div class="absolute -inset-x-4 bottom-0 h-px bg-white/15"></div>
-								<div class="absolute -inset-y-4 left-0 w-px bg-white/15"></div>
-								<div class="absolute -inset-y-4 right-0 w-px bg-white/15"></div>
-								<div class="relative overflow-hidden bg-zinc-950" style="aspect-ratio: 5 / 7;">
+								<div class="relative overflow-hidden bg-ink" style="aspect-ratio: 5 / 7;">
 									<img
 										src={coverSrc}
 										alt=""
@@ -202,33 +198,12 @@ if (coverArt) {
 										style={`object-position: ${coverArt.objectPosition ?? "50% 50%"};${coverArt.transform ? ` transform: ${coverArt.transform};` : ""}${coverArt.transformOrigin ? ` transform-origin: ${coverArt.transformOrigin};` : ""}${coverArt.filter ? ` filter: ${coverArt.filter};` : ""}`}
 									/>
 								</div>
-								<div class="absolute -bottom-5 -right-5 z-10 h-[5.5rem] w-[5.5rem]">
-									<div class="absolute inset-0 rounded-full border border-white/20 bg-white/[0.07] shadow-[0_12px_32px_rgba(0,0,0,0.5)] backdrop-blur-xl"></div>
-									<div class="absolute inset-0 rounded-full bg-[radial-gradient(circle_at_32%_28%,rgba(255,255,255,0.16),transparent_60%)]"></div>
-									<svg
-										viewBox="0 0 100 100"
-										class="absolute inset-0 h-full w-full animate-[spin_16s_linear_infinite]"
-									>
-										<defs>
-											<path id="cookbook-badge-ring" d="M50,50 m-37,0 a37,37 0 1,1 74,0 a37,37 0 1,1 -74,0" fill="none"></path>
-										</defs>
-										<text class="fill-white/80 font-medium uppercase" style="font-size: 7.5px; letter-spacing: 0.3em;">
-											<textPath href="#cookbook-badge-ring" textLength="231" lengthAdjust="spacingAndGlyphs">Cookbook · Rivet · Cookbook · Rivet ·</textPath>
-										</text>
-									</svg>
-									<div class="absolute inset-0 flex items-center justify-center">
-										<svg viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 opacity-60">
-											<rect x="18.25" y="18.25" width="91.5" height="91.5" rx="25.75" stroke="#F0F0F0" stroke-width="8.5"></rect>
-											<path fill-rule="evenodd" clip-rule="evenodd" d="M57.694 43.098c0-.622-.505-1.126-1.127-1.126h-8.444a5.114 5.114 0 0 0-5.112 5.111v33.824a5.114 5.114 0 0 0 5.112 5.112h8.444c.622 0 1.127-.505 1.127-1.127V43.098Zm24.424 27.869c-1.238-2.222-4.047-4.026-6.27-4.026H62.923c-.684 0-.93.555-.549 1.239l7.703 13.822c1.239 2.223 4.048 4.026 6.27 4.026h12.927c.683 0 .93-.555.548-1.239l-7.703-13.822Zm.538-18.718c0-5.672-4.605-10.277-10.277-10.277H63.31a1.21 1.21 0 0 0-1.209 1.209v18.137c0 .667.542 1.209 1.21 1.209h9.068c5.672 0 10.277-4.605 10.277-10.278Z" fill="#F0F0F0"></path>
-										</svg>
-									</div>
-								</div>
 							</div>
 						)}
 
 						{resolvedTemplates.length > 0 && (
 							<div>
-								<div class="text-xs font-medium uppercase tracking-wider text-zinc-600">
+								<div class="font-mono text-[11px] font-medium uppercase tracking-[0.16em] text-pine">
 									Get started
 								</div>
 								<ul class="mt-3 space-y-2">
@@ -238,10 +213,10 @@ if (coverArt) {
 												href={tpl.githubUrl}
 												target="_blank"
 												rel="noreferrer"
-												class="group flex items-center justify-between gap-2 text-sm text-zinc-300 transition-colors hover:text-white"
+												class="group flex items-center justify-between gap-2 text-sm text-ink-soft transition-colors hover:text-ink"
 											>
 												<span>{tpl.displayName} example</span>
-												<span aria-hidden="true" class="text-zinc-600 transition-colors group-hover:text-zinc-400">↗</span>
+												<span aria-hidden="true" class="text-ink-faint transition-colors group-hover:text-ink-soft">↗</span>
 											</a>
 										</li>
 									))}
@@ -250,13 +225,15 @@ if (coverArt) {
 						)}
 
 						<div>
-							<div class="text-xs font-medium uppercase tracking-wider text-zinc-600">
+							<div class="font-mono text-[11px] font-medium uppercase tracking-[0.16em] text-pine">
 								Agent skill
 							</div>
-							<div class="relative mt-3 rounded-md border border-white/10 bg-white/5 p-3 pr-11">
-								<code class="select-all break-all font-mono text-xs leading-relaxed text-zinc-300">npx skills add rivet-dev/skills -s {skillId}</code>
+							<div class="selection-paper relative mt-3 rounded-md border border-ink/20 bg-ink p-3 pr-11">
+								<div class="overflow-x-auto scrollbar-hide">
+									<code class="select-all whitespace-nowrap font-mono text-xs leading-relaxed text-cream/85">npx skills add rivet-dev/skills -s {skillId}</code>
+								</div>
 								<button
-									class="copy-skill-btn absolute right-1.5 top-1.5 rounded p-1.5 text-zinc-500 transition-colors hover:bg-white/10 hover:text-white"
+									class="copy-skill-btn absolute right-1.5 top-1.5 rounded p-1.5 text-cream/50 transition-colors hover:bg-cream/10 hover:text-cream"
 									aria-label="Copy to clipboard"
 									title="Works with Claude Code, Codex, Cursor, and other AI coding assistants"
 									data-copy={`npx skills add rivet-dev/skills -s ${skillId}`}
@@ -271,35 +248,35 @@ if (coverArt) {
 								</button>
 							</div>
 						</div>
-
-						{tableOfContents.length > 0 && (
-							<nav id="cookbook-toc" class="sticky top-24">
-								<div class="text-xs font-medium uppercase tracking-wider text-zinc-600">
-									On this page
-								</div>
-								<ul class="mt-3 max-h-[calc(100vh-10rem)] space-y-1 overflow-y-auto border-l border-white/10 pl-4 pr-2 [scrollbar-color:rgba(255,255,255,0.25)_transparent] [scrollbar-width:thin]">
-									{tableOfContents.map((section) => (
-										<li>
-											<a href={`#${section.id}`} data-toc-link={section.id} class="block py-0.5 text-[13px] leading-snug text-zinc-500 transition-colors hover:text-white">
-												{section.title}
-											</a>
-											{section.children.length > 0 && (
-												<ul class="space-y-1 pl-3">
-													{section.children.map((child) => (
-														<li>
-															<a href={`#${child.id}`} data-toc-link={child.id} class="block py-0.5 text-[13px] leading-snug text-zinc-500 transition-colors hover:text-white">
-																{child.title}
-															</a>
-														</li>
-													))}
-												</ul>
-											)}
-										</li>
-									))}
-								</ul>
-							</nav>
-						)}
 					</div>
+
+					{tableOfContents.length > 0 && (
+						<nav id="cookbook-toc" class="sticky top-24 mt-8">
+							<div class="font-mono text-[11px] font-medium uppercase tracking-[0.16em] text-pine">
+								On this page
+							</div>
+							<ul class="mt-3 max-h-[calc(100vh-9rem)] space-y-1 overflow-y-auto border-l border-ink/10 pl-4 [scrollbar-color:rgba(27,25,22,0.25)_transparent] [scrollbar-width:thin]">
+								{tableOfContents.map((section) => (
+									<li>
+										<a href={`#${section.id}`} data-toc-link={section.id} class="block py-0.5 text-[13px] leading-snug text-ink-faint transition-colors hover:text-ink">
+											{section.title}
+										</a>
+										{section.children.length > 0 && (
+											<ul class="space-y-1 pl-3">
+												{section.children.map((child) => (
+													<li>
+														<a href={`#${child.id}`} data-toc-link={child.id} class="block py-0.5 text-[13px] leading-snug text-ink-faint transition-colors hover:text-ink">
+															{child.title}
+														</a>
+													</li>
+												))}
+											</ul>
+										)}
+									</li>
+								))}
+							</ul>
+						</nav>
+					)}
 				</aside>
 			</div>
 		</div>
@@ -352,11 +329,11 @@ if (coverArt) {
 					tocLinks.forEach(link => {
 						const linkId = link.getAttribute('data-toc-link');
 						if (linkId === activeId) {
-							link.classList.add('text-white');
-							link.classList.remove('text-zinc-500');
+							link.classList.add('text-ink');
+							link.classList.remove('text-ink-faint');
 						} else {
-							link.classList.remove('text-white');
-							link.classList.add('text-zinc-500');
+							link.classList.remove('text-ink');
+							link.classList.add('text-ink-faint');
 						}
 					});
 				}
diff --git a/website/src/pages/cookbook/index.astro b/website/src/pages/cookbook/index.astro
index f2f80f3580..67c349755c 100644
--- a/website/src/pages/cookbook/index.astro
+++ b/website/src/pages/cookbook/index.astro
@@ -54,6 +54,7 @@ const pages: CookbookPageListItem[] = (
 						transform: coverArt.transform,
 						transformOrigin: coverArt.transformOrigin,
 						filter: coverArt.filter,
+						ken: coverArt.ken,
 					};
 				}
 
diff --git a/website/src/pages/docs/[...slug].astro b/website/src/pages/docs/[...slug].astro
index 042e400b4c..0bcbe0ad1f 100644
--- a/website/src/pages/docs/[...slug].astro
+++ b/website/src/pages/docs/[...slug].astro
@@ -5,7 +5,6 @@ import { DocsNavigation } from '@/components/DocsNavigation';
 import { DocsTableOfContents } from '@/components/DocsTableOfContents';
 import { DocsPageDropdown } from '@/components/DocsPageDropdown';
 import { Prose } from '@/components/Prose';
-import { Button } from '@rivet-gg/components';
 import { Icon, faPencil } from '@rivet-gg/icons';
 import { sitemap } from '@/sitemap/mod';
 import { findActiveTab } from '@/lib/sitemap';
@@ -85,7 +84,7 @@ const breadcrumbSchema = {
 
 <DocsLayout title={`${title} - Rivet`} description={description} canonicalUrl={canonicalUrl} sidebar={foundTab?.tab?.sidebar}>
 	<script type="application/ld+json" set:html={JSON.stringify(breadcrumbSchema)} />
-	<aside class="hidden md:block border-r">
+	<aside class="hidden md:block border-r border-ink/10">
 		{foundTab?.tab?.sidebar && <DocsNavigation sidebar={foundTab.tab.sidebar} client:load />}
 	</aside>
 	<div class="flex justify-center w-full min-w-0">
@@ -101,9 +100,9 @@ const breadcrumbSchema = {
 						/>
 					</div>
 				</div>
-				<Prose as="article" className="max-w-prose-docs lg:max-w-prose-docs mx-auto [&>h1:first-of-type]:pr-44">
+				<Prose as="article" surface="paper" className="docs-article max-w-prose-docs lg:max-w-prose-docs mx-auto prose-headings:font-medium prose-headings:tracking-tight [&>h1:first-of-type]:pr-44">
 					{parentPage && (
-						<div class="eyebrow h-5 text-primary text-sm font-semibold">
+						<div class="eyebrow h-5 text-pine text-sm font-semibold">
 							{parentPage.title}
 						</div>
 					)}
@@ -111,19 +110,18 @@ const breadcrumbSchema = {
 					{description && <p>{description}</p>}
 					<Content components={mdxComponents} />
 				</Prose>
-				<div class="border-t mt-12 pt-6 flex flex-wrap items-center justify-between gap-4">
-					<Button variant="outline" size="sm" asChild>
-						<a
-							href={`https://github.com/rivet-dev/rivet/edit/main/website/src/content/${componentSourcePath}`}
-							target="_blank"
-							rel="noreferrer"
-						>
-							<Icon icon={faPencil} />
-							Edit this page
-						</a>
-					</Button>
+				<div class="border-t border-ink/10 mt-12 pt-6 flex flex-wrap items-center justify-between gap-4">
+					<a
+						href={`https://github.com/rivet-dev/rivet/edit/main/website/src/content/${componentSourcePath}`}
+						target="_blank"
+						rel="noreferrer"
+						class="inline-flex items-center gap-2 rounded-md border border-ink/15 bg-white/55 px-3 py-2 text-sm text-ink transition-colors hover:border-ink/30"
+					>
+						<Icon icon={faPencil} className="text-ink-faint" />
+						Edit this page
+					</a>
 					{lastModifiedFormatted && (
-						<span class="text-xs text-muted-foreground">
+						<span class="text-xs text-ink-faint">
 							Last updated {lastModifiedFormatted}
 						</span>
 					)}
diff --git a/website/src/pages/enterprise.astro b/website/src/pages/enterprise.astro
new file mode 100644
index 0000000000..f92ccd51bd
--- /dev/null
+++ b/website/src/pages/enterprise.astro
@@ -0,0 +1,208 @@
+---
+import MarketingLayout from '@/layouts/MarketingLayout.astro';
+import { jsonLdString } from '@/lib/jsonLd';
+import { PerimeterDiagram } from '@/components/marketing/editorial/PerimeterDiagram';
+import { CatalogCard } from '@/components/marketing/editorial/CatalogCard';
+import { HERO_H1_CLASS, SECTION_H2_CLASS, SUBTITLE_CLASS } from '@/components/marketing/typography';
+
+const title = 'Rivet Enterprise';
+const description =
+	'Run Rivet on-prem, in your VPC, embedded in your customers’ environments, or fully air-gapped. A single binary you control, with no outbound telemetry.';
+const canonicalUrl = 'https://rivet.dev/enterprise/';
+
+const breadcrumbSchema = {
+	'@context': 'https://schema.org',
+	'@type': 'BreadcrumbList',
+	itemListElement: [
+		{ name: 'Home', url: 'https://rivet.dev/' },
+		{ name: 'Enterprise', url: canonicalUrl },
+	].map((item, index) => ({
+		'@type': 'ListItem',
+		position: index + 1,
+		name: item.name,
+		item: item.url,
+	})),
+};
+
+const deploymentModels = [
+	{
+		index: '01',
+		title: 'Your VPC',
+		body: 'Run the same Rivet that powers our cloud as a single binary inside your perimeter. No outbound calls, no telemetry leaving your boundary.',
+	},
+	{
+		index: '02',
+		title: 'Embedded in your customers',
+		body: 'Ship Rivet inside your customer’s VPC, regulated environment, or on-prem hardware. They keep their data, you keep your product.',
+	},
+	{
+		index: '03',
+		title: 'Air-gapped',
+		body: 'Deploy on networks with no internet access. Everything Rivet needs ships in the artifact you install, so disconnected environments run the full platform.',
+	},
+];
+
+const guarantees = [
+	'No outbound connections required',
+	'No telemetry by default',
+	'Your data never leaves your boundary',
+	'Air-gapped installs supported',
+	'No new subprocessor to disclose',
+];
+
+const footprints = [
+	{
+		title: 'Single binary',
+		body: 'One process to install, monitor, and upgrade. Ideal for evaluation, embedded deployments, and air-gapped installs.',
+	},
+	{
+		title: 'Docker Compose',
+		body: 'A complete environment in one file. Stand up Rivet alongside your existing services without changing how you operate them.',
+	},
+	{
+		title: 'Kubernetes',
+		body: 'Scale out across nodes and regions when traffic demands it. The same artifact you evaluated runs in production.',
+	},
+];
+---
+
+<MarketingLayout title={title} description={description} canonicalUrl={canonicalUrl}>
+	<script type="application/ld+json" set:html={jsonLdString(breadcrumbSchema)} />
+	<div class="paper-grain min-h-screen font-sans text-ink-soft">
+		<main>
+			<!-- Hero -->
+			<section class="px-6 pb-20 pt-32 md:pb-28 md:pt-44">
+				<div class="mx-auto w-full max-w-7xl">
+					<div class="grid grid-cols-1 items-center gap-12 lg:grid-cols-2 lg:gap-20">
+						<div>
+							<h1 class={HERO_H1_CLASS}>Run Rivet inside your perimeter.</h1>
+							<p class="mt-4 max-w-xl text-base leading-relaxed text-ink-soft md:text-lg">
+								Deploy Rivet in your VPC, embed it in your customers’ environments, or run it
+								fully air-gapped. The same platform that powers Rivet Cloud, under your control.
+							</p>
+							<div class="mt-8 flex flex-col gap-3 sm:flex-row">
+								<a
+									href="/talk-to-an-engineer"
+									class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-accent-deep px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent"
+								>
+									Talk to an engineer
+								</a>
+								<a
+									href="/docs/self-hosting"
+									class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border border-ink/20 px-4 py-2 text-sm text-ink-soft transition-colors hover:border-ink/40 hover:text-ink"
+								>
+									Read self-hosting docs
+								</a>
+							</div>
+						</div>
+						<PerimeterDiagram />
+					</div>
+				</div>
+			</section>
+
+			<!-- Deployment models -->
+			<section class="border-t border-ink/10 px-6 py-16 md:py-32">
+				<div class="mx-auto w-full max-w-7xl">
+					<div class="max-w-3xl">
+						<h2 class={SECTION_H2_CLASS}>Three ways to deploy.</h2>
+						<p class={SUBTITLE_CLASS}>
+							Rivet ships as software you run, not a service you call out to. Pick the
+							boundary, and Rivet stays inside it.
+						</p>
+					</div>
+					<div class="mt-12 grid grid-cols-1 gap-6 md:grid-cols-3">
+						{
+							deploymentModels.map((model) => (
+								<CatalogCard title={model.title}>
+									<p class="mt-2 text-sm leading-relaxed text-ink-soft">{model.body}</p>
+								</CatalogCard>
+							))
+						}
+					</div>
+				</div>
+			</section>
+
+			<!-- Compliance posture -->
+			<section class="border-y border-ink/10 bg-paper-deep/40 px-6 py-16 md:py-32">
+				<div class="mx-auto w-full max-w-7xl">
+					<div class="grid grid-cols-1 items-center gap-10 lg:grid-cols-2 lg:gap-16">
+						<div>
+							<h2 class={SECTION_H2_CLASS}>Your compliance posture, intact.</h2>
+							<p class={SUBTITLE_CLASS}>
+								Deploy inside the boundary your existing controls already cover. FedRAMP,
+								HIPAA, and sovereign-cloud environments stay within your audit story because
+								nothing leaves your perimeter. No new data processor to assess, no waiting
+								on a vendor’s certification roadmap.
+							</p>
+						</div>
+						<ul class="space-y-4">
+							{
+								guarantees.map((item) => (
+									<li class="flex items-start gap-3 text-sm leading-relaxed text-ink-soft">
+										<span class="mt-0.5 flex h-5 w-5 flex-none items-center justify-center rounded-full border border-pine/30">
+											<svg class="h-3 w-3 text-pine" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+												<path d="M20 6 9 17l-5-5" />
+											</svg>
+										</span>
+										{item}
+									</li>
+								))
+							}
+						</ul>
+					</div>
+				</div>
+			</section>
+
+			<!-- Architecture footprint -->
+			<section class="px-6 py-16 md:py-32">
+				<div class="mx-auto w-full max-w-7xl">
+					<div class="max-w-3xl">
+						<h2 class={SECTION_H2_CLASS}>A footprint your ops team will sign off on.</h2>
+						<p class={SUBTITLE_CLASS}>
+							Rivet self-hosts as a single binary or a Docker Compose file, and scales to
+							Kubernetes when you need it. Most platforms in this space either require a
+							multi-service cluster before you can evaluate them or only run on the vendor’s
+							own cloud. Rivet starts as one process on one machine and grows with your
+							deployment, so a proof of concept takes an afternoon instead of a quarter.
+						</p>
+					</div>
+					<div class="mt-12 grid grid-cols-1 gap-6 md:grid-cols-3">
+						{
+							footprints.map((fp) => (
+								<div class="flex flex-col rounded-xl border border-ink/10 bg-white/55 p-7 transition-colors hover:border-ink/25">
+									<h3 class="text-base font-medium text-ink">{fp.title}</h3>
+									<p class="mt-2 text-sm leading-relaxed text-ink-soft">{fp.body}</p>
+								</div>
+							))
+						}
+					</div>
+				</div>
+			</section>
+
+			<!-- Closing CTA -->
+			<section class="border-t border-ink/10 px-6 py-16 md:py-32">
+				<div class="mx-auto w-full max-w-7xl text-center">
+					<h2 class={SECTION_H2_CLASS}>Bring Rivet inside your boundary.</h2>
+					<p class="mx-auto mt-4 max-w-2xl text-base leading-relaxed text-ink-soft">
+						Walk through your deployment model with an engineer, or start with the
+						self-hosting docs and run it yourself.
+					</p>
+					<div class="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
+						<a
+							href="/talk-to-an-engineer"
+							class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-ink px-4 py-2 text-sm font-medium text-cream transition-colors hover:bg-ink/85"
+						>
+							Talk to an engineer
+						</a>
+						<a
+							href="/docs/self-hosting"
+							class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border border-ink/20 px-4 py-2 text-sm text-ink-soft transition-colors hover:border-ink/40 hover:text-ink"
+						>
+							Read self-hosting docs
+						</a>
+					</div>
+				</div>
+			</section>
+		</main>
+	</div>
+</MarketingLayout>
diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro
index 285123c3cf..92f0aed5f1 100644
--- a/website/src/pages/index.astro
+++ b/website/src/pages/index.astro
@@ -12,7 +12,7 @@ import { RedesignedCTA } from '@/components/marketing/sections/RedesignedCTA';
 import { ScrollObserver } from '@/components/ScrollObserver';
 
 // Import thinking images
-const imgThinker = { src: "https://assets.rivet.dev/website/images/thinking/thinker.jpg", width: 3140, height: 4000, format: "jpg" };
+const imgThinker = { src: "https://assets.rivet.dev/website/images/thinking/thinker-rodin-closeup.jpg", width: 2673, height: 3722, format: "jpg" };
 const imgLadyWriting = { src: "https://assets.rivet.dev/website/images/thinking/a_lady_writing_1962.10.1.jpg", width: 3596, height: 4096, format: "jpg" };
 const imgPortrait = { src: "https://assets.rivet.dev/website/images/thinking/portrait_of_a_man_possibly_jan_snoeck_1967.4.1.jpg", width: 3076, height: 4096, format: "jpg" };
 const imgSaintMark = { src: "https://assets.rivet.dev/website/images/thinking/saint_mark_2012.79.1.jpg", width: 2187, height: 2679, format: "jpg" };
@@ -87,7 +87,7 @@ const latestChangelogTitle = latest?.data.title ?? '';
 	keywords={["agentic infrastructure", "AI agents", "actors", "stateful", "workflows", "long-running processes", "on-prem", "air-gapped", "self-hosted", "agentOS", "durable execution", "VPC"]}
 >
 	<ScrollObserver client:load>
-		<div class="min-h-screen bg-black font-sans text-zinc-300 selection:bg-[#FF4500]/30 selection:text-orange-200">
+		<div class="paper-grain min-h-screen font-sans text-ink-soft">
 			<main>
 				<RedesignedHero latestChangelogTitle={latestChangelogTitle} thinkingImages={thinkingImages} client:load />
 				<ProductSplitSection client:visible />
diff --git a/website/src/pages/oss-friends.astro b/website/src/pages/oss-friends.astro
index af002a7d32..f0c3b40c8b 100644
--- a/website/src/pages/oss-friends.astro
+++ b/website/src/pages/oss-friends.astro
@@ -17,21 +17,21 @@ try {
 	description="Other companies whose code & culture mirrors that at Rivet."
 	canonicalUrl="https://rivet.dev/oss-friends/"
 >
-	<div class="min-h-screen bg-black font-sans text-zinc-300 selection:bg-[#FF4500]/30 selection:text-orange-200">
+	<div class="paper-grain min-h-screen font-sans text-ink-soft">
 		<div class="relative overflow-hidden pb-12 pt-32 md:pt-48">
 			<div class="mx-auto max-w-7xl px-6">
 				<div class="max-w-2xl">
-					<h1 class="mb-6 text-4xl font-normal leading-[1.1] tracking-tight text-white md:text-6xl">
+					<h1 class="mb-6 text-4xl font-medium leading-[1.06] tracking-[-0.015em] text-ink md:text-6xl">
 						Open Source Friends
 					</h1>
-					<p class="text-base leading-relaxed text-zinc-500">
+					<p class="text-base leading-relaxed text-ink-soft">
 						Other companies whose code & culture mirrors that at Rivet.
 					</p>
 				</div>
 			</div>
 		</div>
 
-		<div class="border-t border-white/10 py-16">
+		<div class="border-t border-ink/10 py-16">
 			<div class="mx-auto max-w-7xl px-6">
 				<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
 					{items.map((friend: any) => (
@@ -39,12 +39,12 @@ try {
 							href={friend.href}
 							target="_blank"
 							rel="noopener noreferrer"
-							class="group flex flex-col rounded-lg border border-white/10 p-6 transition-colors hover:border-white/20"
+							class="group flex flex-col border border-ink/10 bg-white/55 p-6 transition-colors hover:border-ink/25"
 						>
-							<h3 class="mb-2 text-base font-normal text-white">
+							<h3 class="mb-2 text-base font-medium text-ink">
 								{friend.name}
 							</h3>
-							<p class="text-sm leading-relaxed text-zinc-500">
+							<p class="text-sm leading-relaxed text-ink-soft">
 								{friend.description}
 							</p>
 						</a>
diff --git a/website/src/pages/support.astro b/website/src/pages/support.astro
index 31874d0513..7f83e79b69 100644
--- a/website/src/pages/support.astro
+++ b/website/src/pages/support.astro
@@ -8,13 +8,13 @@ import { Icon, faBook, faComments, faEnvelope } from "@rivet-gg/icons";
 	description="Get help with Rivet Actors via email, Discord community, or documentation. Troubleshoot issues, request features, and connect with our team."
 	canonicalUrl="https://rivet.dev/support/"
 >
-	<main class="min-h-screen w-full bg-black flex flex-col items-center justify-center">
+	<main class="paper-grain min-h-screen w-full flex flex-col items-center justify-center">
 		<div class="relative isolate overflow-hidden pt-40">
 			<div class="mx-auto max-w-4xl px-6 lg:px-8 text-center">
-				<h1 class="text-6xl font-700 text-white leading-[1.1] tracking-normal">
+				<h1 class="text-4xl font-medium leading-[1.06] tracking-[-0.015em] text-ink md:text-6xl">
 					Support
 				</h1>
-				<p class="mt-6 max-w-3xl mx-auto text-xl leading-[1.2] tracking-tight font-500 text-white/60">
+				<p class="mt-6 max-w-3xl mx-auto text-base leading-relaxed text-ink-soft">
 					Get help with Rivet, from troubleshooting to feature
 					requests.
 				</p>
@@ -26,17 +26,17 @@ import { Icon, faBook, faComments, faEnvelope } from "@rivet-gg/icons";
 				<!-- Email Tile -->
 				<a
 					href="mailto:support@rivet.dev"
-					class="group rounded-xl bg-white/2 border border-white/20 hover:border-white/40 shadow-sm transition-all duration-200 relative overflow-hidden h-[180px] flex flex-col items-center justify-center px-8"
+					class="group border border-ink/10 bg-white/55 hover:border-ink/25 transition-all duration-200 relative overflow-hidden h-[180px] flex flex-col items-center justify-center px-8"
 				>
 					<div class="flex flex-col items-center">
 						<Icon
 							icon={faEnvelope}
-							className="text-3xl text-white mb-2"
+							className="text-3xl text-olive mb-2"
 						/>
-						<span class="font-semibold text-white text-lg mb-1">
+						<span class="font-medium text-ink text-lg mb-1">
 							Email
 						</span>
-						<span class="text-white/60 text-sm">
+						<span class="text-ink-faint text-sm">
 							support@rivet.dev
 						</span>
 					</div>
@@ -46,17 +46,17 @@ import { Icon, faBook, faComments, faEnvelope } from "@rivet-gg/icons";
 					href="https://rivet.dev/discord"
 					target="_blank"
 					rel="noopener noreferrer"
-					class="group rounded-xl bg-white/2 border border-white/20 hover:border-white/40 shadow-sm transition-all duration-200 relative overflow-hidden h-[180px] flex flex-col items-center justify-center px-8"
+					class="group border border-ink/10 bg-white/55 hover:border-ink/25 transition-all duration-200 relative overflow-hidden h-[180px] flex flex-col items-center justify-center px-8"
 				>
 					<div class="flex flex-col items-center">
 						<Icon
 							icon={faComments}
-							className="text-3xl text-white mb-2"
+							className="text-3xl text-olive mb-2"
 						/>
-						<span class="font-semibold text-white text-lg mb-1">
+						<span class="font-medium text-ink text-lg mb-1">
 							Discord
 						</span>
-						<span class="text-white/60 text-sm">
+						<span class="text-ink-faint text-sm">
 							rivet.dev/discord
 						</span>
 					</div>
@@ -66,17 +66,17 @@ import { Icon, faBook, faComments, faEnvelope } from "@rivet-gg/icons";
 					href="https://rivet.dev/docs/actors"
 					target="_blank"
 					rel="noopener noreferrer"
-					class="group rounded-xl bg-white/2 border border-white/20 hover:border-white/40 shadow-sm transition-all duration-200 relative overflow-hidden h-[180px] flex flex-col items-center justify-center px-8"
+					class="group border border-ink/10 bg-white/55 hover:border-ink/25 transition-all duration-200 relative overflow-hidden h-[180px] flex flex-col items-center justify-center px-8"
 				>
 					<div class="flex flex-col items-center">
 						<Icon
 							icon={faBook}
-							className="text-3xl text-white mb-2"
+							className="text-3xl text-olive mb-2"
 						/>
-						<span class="font-semibold text-white text-lg mb-1">
+						<span class="font-medium text-ink text-lg mb-1">
 							Docs
 						</span>
-						<span class="text-white/60 text-sm">
+						<span class="text-ink-faint text-sm">
 							rivet.dev/docs
 						</span>
 					</div>
diff --git a/website/src/styles/fonts.css b/website/src/styles/fonts.css
index 90175707f1..35d96bf43b 100644
--- a/website/src/styles/fonts.css
+++ b/website/src/styles/fonts.css
@@ -1,5 +1,27 @@
-/* Open Sans loaded from Google Fonts CDN */
-@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Open+Sans+Condensed:ital,wght@0,300;0,700;1,300;1,700&family=Manrope:wght@200;300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Playwrite+IE:wght@100;200;300;400&display=swap');
+/* Manrope is the only marketing typeface; JetBrains Mono covers code,
+   eyebrows, and captions. Both are self-hosted variable fonts. */
+@font-face {
+	font-family: "Manrope";
+	src: url("/fonts/manrope/Manrope-Variable-latin.woff2") format("woff2");
+	font-weight: 200 800;
+	font-style: normal;
+	font-display: swap;
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
+		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+	font-family: "JetBrains Mono";
+	src: url("/fonts/jetbrains-mono/JetBrainsMono-Variable-latin.woff2")
+		format("woff2");
+	font-weight: 100 800;
+	font-style: normal;
+	font-display: swap;
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
+		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
 
 @font-face {
 	font-family: "Darker Grotesque";
diff --git a/website/src/styles/main.css b/website/src/styles/main.css
index 0d9632157f..8804bb0f5b 100644
--- a/website/src/styles/main.css
+++ b/website/src/styles/main.css
@@ -32,13 +32,13 @@
 
 /* Text selection styles */
 ::selection {
-  background-color: #ff4f00;
-  color: black;
+  background-color: #CB5A33;
+  color: #F4F1E7;
 }
 
 ::-moz-selection {
-  background-color: #ff4f00;
-  color: black;
+  background-color: #CB5A33;
+  color: #F4F1E7;
 }
 
 /* Selection style for white/light backgrounds */
@@ -52,6 +52,31 @@
   color: white;
 }
 
+/* Pine selection for porcelain marketing surfaces */
+.selection-paper ::selection,
+.selection-paper::selection {
+  background-color: #2e4034;
+  color: #f4f1e7;
+}
+
+.selection-paper ::-moz-selection,
+.selection-paper::-moz-selection {
+  background-color: #2e4034;
+  color: #f4f1e7;
+}
+
+/* Docs prose gets a soft, readable highlight; the solid pine fill is too heavy
+   on long-form text and muddies the selected glyphs. */
+.docs-article ::selection {
+  background-color: rgba(46, 64, 52, 0.16);
+  color: inherit;
+}
+
+.docs-article ::-moz-selection {
+  background-color: rgba(46, 64, 52, 0.16);
+  color: inherit;
+}
+
 .shiki .line {
   @apply break-all;
 }
@@ -99,6 +124,80 @@
     animation: trace-around 1s linear infinite, dark-grow-outer 1s ease-in-out infinite;
   }
 
+  .changelog-pill-border::after {
+    background: radial-gradient(
+      42px 30px at var(--pill-x, 50%) var(--pill-y, 50%),
+      rgba(255, 255, 255, 0.95),
+      rgba(255, 255, 255, 0.55) 38%,
+      rgba(255, 255, 255, 0) 76%
+    );
+    filter: blur(2px);
+  }
+
+  /* Cursor-following border glow for porcelain pills (deploy row, stack chips).
+     Lights ONLY the pill's 1px border ring as the pointer moves — not the fill.
+     `inset: -1px` grows the ::after out to the border-box so the masked ring
+     lands exactly on the pill's border (using `inset: 0` put it one pixel
+     inside, which read as a second inner border). `padding: 1px` + the
+     content-box/border-box mask exclude carves the gradient down to that ring;
+     a small blur gives the gaussian softness. The handler in glowPill.ts feeds
+     --pill-x / --pill-y; defaults keep it centered so there is no first-move
+     flash. */
+  .glow-pill::after {
+    content: "";
+    position: absolute;
+    inset: -1px;
+    border-radius: inherit;
+    padding: 1px;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 150ms ease;
+    background: radial-gradient(
+      58px 40px at var(--pill-x, 50%) var(--pill-y, 50%),
+      rgba(27, 25, 22, 0.65),
+      rgba(27, 25, 22, 0.24) 45%,
+      rgba(27, 25, 22, 0) 80%
+    );
+    -webkit-mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    filter: blur(1.5px);
+  }
+  .glow-pill:hover::after {
+    opacity: 1;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .glow-pill::after {
+      transition: none;
+    }
+  }
+
+  .perimeter-dash-rect {
+    animation: perimeter-dash-rotate 10s linear infinite;
+  }
+
+  /* Registry storefront marquees. Track content is duplicated, so a -50%
+     shift loops seamlessly. Two directions for the opposing rows. */
+  @keyframes registry-marquee-left {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(-50%);
+    }
+  }
+
+  @keyframes registry-marquee-right {
+    from {
+      transform: translateX(-50%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+
   @keyframes trace-around {
     0% {
       stroke-dashoffset: 0;
@@ -153,6 +252,12 @@
     }
   }
 
+  @keyframes perimeter-dash-rotate {
+    to {
+      stroke-dashoffset: -36;
+    }
+  }
+
   .step {
     counter-increment: step;
   }
@@ -163,6 +268,11 @@
     content: counter(step);
   }
 
+  /* Porcelain step marker for the light docs shell. */
+  .docs-article .step:before {
+    @apply border-ink/15 bg-white text-ink;
+  }
+
 	/* Hide scrollbar for Chrome, Safari and Opera */
 	.scrollbar-hide::-webkit-scrollbar {
 		display: none;
@@ -199,9 +309,9 @@
 		width: 80px;
 		height: 80px;
 		border-radius: 50%;
-		background: #ff4500;
+		background: #CB5A33;
 		transform: translate(-50%, -50%);
-		box-shadow: 0 0 40px 10px rgba(255, 69, 0, 0.4);
+		box-shadow: 0 0 40px 10px rgba(203, 90, 51, 0.4);
 		animation: pulse-slow 2.5s infinite alternate;
 	}
 
@@ -277,37 +387,50 @@
 		transform: translate(0, 0) rotate(60deg) scaleY(0.9);
 	}
 
-	/* Bento glow effect */
-	.bento-box {
-		position: relative;
-		overflow: hidden;
-		transition: all 0.3s ease;
+	/* Porcelain editorial surface. The page field is a cool porcelain gray
+	   with a fine paper grain baked into the tile at ~4% opacity. */
+	.paper-grain {
+		background-color: #efefef;
+		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.045 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
 	}
 
-	.bento-box:hover {
-		border-color: #444;
-		transform: scale(1.02);
+	/* Cream-noise variant for large ink panels */
+	.ink-grain {
+		background-color: #1b1916;
+		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.96 0 0 0 0 0.95 0 0 0 0 0.91 0 0 0 0.03 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
 	}
 
-	.bento-box::before {
-		content: "";
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background: radial-gradient(
-			circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
-			rgba(255, 255, 255, 0.08),
-			transparent 40%
+	/* Studio-backdrop depth: darker porcelain pooling in the bottom-left
+	   corner, like a product-photography sweep. Layer over .paper-grain. */
+	.depth-wash {
+		background-image: radial-gradient(
+			115% 105% at 0% 100%,
+			#dcdcde 0%,
+			rgba(220, 220, 222, 0) 58%
 		);
-		opacity: 0;
-		transition: opacity 0.3s ease;
-		pointer-events: none;
 	}
 
-	.bento-box:hover::before {
-		opacity: 1;
+	/* Documentary-style Ken Burns drift for cover imagery. While the parent
+	   .group is hovered the image slowly zooms and pans along a per-card
+	   vector (set via --kb-x / --kb-y / --kb-scale), then settles back gently
+	   on leave. The pan magnitude stays under the scale overshoot so the
+	   frame never reveals its backing. */
+	.ken-burns {
+		transform: scale(1) translate3d(0, 0, 0);
+		transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
+		will-change: transform;
+	}
+	.group:hover .ken-burns {
+		transform: scale(var(--kb-scale, 1.12))
+			translate3d(var(--kb-x, 0%), var(--kb-y, 0%), 0);
+		transition: transform 7000ms cubic-bezier(0.16, 0.6, 0.3, 1);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.ken-burns,
+		.group:hover .ken-burns {
+			transform: none;
+			transition: none;
+		}
 	}
 
 	/* Scroll-triggered animations */
@@ -360,7 +483,7 @@
 	}
 
 	.code-highlight-ref.is-active {
-		background-color: rgba(255, 69, 0, 0.1);
+		background-color: rgba(203, 90, 51, 0.1);
 	}
 
 	.code-highlight-ref.is-active::before {
@@ -370,7 +493,7 @@
 		top: 0;
 		bottom: 0;
 		width: 2px;
-		background-color: #ff4500;
+		background-color: #CB5A33;
 	}
 
 	/* Code syntax colors */
@@ -491,3 +614,124 @@
 ::view-transition-new(root) {
 	animation: none;
 }
+
+/* Decorative animations stop entirely under reduced motion */
+@media (prefers-reduced-motion: reduce) {
+	.animate-spin-slow,
+	.animate-infinite-scroll,
+	.animate-pulse-slow,
+	.perimeter-dash-rect {
+		animation: none;
+	}
+}
+
+/* MDX callouts (Note / Info / Tip / Warning). The body text inherits the
+   surrounding prose, so it stays legible in either shell. The default palette
+   suits the dark Learn shell; the porcelain scope (`.blog-article` /
+   `.docs-article`) swaps to warm ink so callouts read cleanly on the light blog
+   and docs. */
+.mdx-callout {
+	display: flex;
+	gap: 0.75rem;
+	width: 100%;
+	margin: 1.5rem 0;
+	padding: 0.875rem 1.125rem;
+	border-radius: 0.75rem;
+	border: 1px solid transparent;
+}
+.mdx-callout__icon {
+	flex-shrink: 0;
+	width: 1.05rem;
+	height: 1.05rem;
+	margin-top: 0.2rem;
+}
+.mdx-callout__body {
+	min-width: 0;
+	flex: 1 1 auto;
+}
+.mdx-callout__body > :first-child {
+	margin-top: 0;
+}
+.mdx-callout__body > :last-child {
+	margin-bottom: 0;
+}
+
+/* Dark palette (docs / Learn) */
+.mdx-callout--note {
+	background: rgba(160, 160, 160, 0.08);
+	border-color: rgba(180, 180, 180, 0.22);
+}
+.mdx-callout--note .mdx-callout__icon {
+	color: #9ca3af;
+}
+.mdx-callout--info {
+	background: rgba(59, 130, 246, 0.1);
+	border-color: rgba(59, 130, 246, 0.3);
+}
+.mdx-callout--info .mdx-callout__icon {
+	color: #60a5fa;
+}
+.mdx-callout--tip {
+	background: rgba(34, 197, 94, 0.1);
+	border-color: rgba(34, 197, 94, 0.3);
+}
+.mdx-callout--tip .mdx-callout__icon {
+	color: #4ade80;
+}
+.mdx-callout--warning {
+	background: rgba(234, 179, 8, 0.1);
+	border-color: rgba(234, 179, 8, 0.32);
+}
+.mdx-callout--warning .mdx-callout__icon {
+	color: #facc15;
+}
+
+/* Porcelain palette (blog) */
+:is(.blog-article, .docs-article) .mdx-callout--note {
+	background: rgba(27, 25, 22, 0.035);
+	border-color: rgba(27, 25, 22, 0.12);
+}
+:is(.blog-article, .docs-article) .mdx-callout--note .mdx-callout__icon {
+	color: #8a8478;
+}
+:is(.blog-article, .docs-article) .mdx-callout--info {
+	background: rgba(63, 92, 122, 0.06);
+	border-color: rgba(63, 92, 122, 0.22);
+}
+:is(.blog-article, .docs-article) .mdx-callout--info .mdx-callout__icon {
+	color: #3f5c7a;
+}
+:is(.blog-article, .docs-article) .mdx-callout--tip {
+	background: rgba(46, 64, 52, 0.06);
+	border-color: rgba(46, 64, 52, 0.2);
+}
+:is(.blog-article, .docs-article) .mdx-callout--tip .mdx-callout__icon {
+	color: #2e4034;
+}
+:is(.blog-article, .docs-article) .mdx-callout--warning {
+	background: rgba(138, 109, 46, 0.08);
+	border-color: rgba(138, 109, 46, 0.24);
+}
+:is(.blog-article, .docs-article) .mdx-callout--warning .mdx-callout__icon {
+	color: #8a6d2e;
+}
+
+/* Content tabs (the SSR Tabs component). The document root is always `.dark`,
+   so the foreground-colored active state is the default for the dark Learn
+   shell; the porcelain scope (`.blog-article` / `.docs-article`) swaps to warm
+   ink for the light blog and docs. This replaces the old orange active
+   underline so the tabs match the rest of the site. */
+[data-tab-trigger].is-tab-active {
+	color: hsl(var(--foreground));
+	border-bottom-color: hsl(var(--foreground));
+}
+:is(.blog-article, .docs-article) [data-tab-trigger] {
+	color: #56524a;
+}
+:is(.blog-article, .docs-article) [data-tab-trigger]:hover {
+	color: #1b1916;
+}
+:is(.blog-article, .docs-article) [data-tab-trigger].is-tab-active {
+	color: #1b1916;
+	border-bottom-color: #1b1916;
+}
diff --git a/website/src/styles/v2.css b/website/src/styles/v2.css
deleted file mode 100644
index 5228d087c0..0000000000
--- a/website/src/styles/v2.css
+++ /dev/null
@@ -1,305 +0,0 @@
-@config "../../tailwind.v2.config.js";
-@import "@rivet-gg/components/theme.css";
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-	* {
-		@apply border-border;
-	}
-	body {
-		@apply min-h-screen bg-background text-foreground;
-	}
-	#root {
-		@apply min-h-screen;
-	}
-}
-
-:root {
-	--shiki-color-text: theme("colors.white");
-	--shiki-foreground: hsl(var(--foreground));
-	--shiki-token-constant: theme("colors.violet.300");
-	--shiki-token-string: theme("colors.violet.300");
-	--shiki-token-comment: theme("colors.zinc.500");
-	--shiki-token-keyword: theme("colors.sky.300");
-	--shiki-token-parameter: theme("colors.pink.300");
-	--shiki-token-function: theme("colors.violet.300");
-	--shiki-token-string-expression: theme("colors.violet.300");
-	--shiki-token-punctuation: theme("colors.zinc.200");
-}
-
-/* Text selection styles */
-::selection {
-	background-color: #ff4f00;
-	color: black;
-}
-
-::-moz-selection {
-	background-color: #ff4f00;
-	color: black;
-}
-
-.shiki .line {
-	@apply break-all;
-}
-
-.shiki.has-focused .line:not(.focused) {
-	@apply opacity-40 transition-opacity;
-}
-
-.shiki.has-focused:hover .line {
-	@apply opacity-100;
-}
-
-@layer utilities {
-	.step {
-		counter-increment: step;
-	}
-
-	.step:before {
-		@apply absolute inline-flex h-9 w-9 items-center justify-center rounded-full border-4 border-background bg-primary text-center -indent-px font-mono text-base font-medium;
-		@apply ml-[-50px] mt-[-4px];
-		content: counter(step);
-	}
-
-	/* Hide scrollbar for Chrome, Safari and Opera */
-	.scrollbar-hide::-webkit-scrollbar {
-		display: none;
-	}
-	/* Hide scrollbar for IE, Edge and Firefox */
-	.scrollbar-hide {
-		-ms-overflow-style: none; /* IE and Edge */
-		scrollbar-width: none; /* Firefox */
-	}
-}
-
-/* Landing Page Styles */
-@layer components {
-	/* Hide scrollbar */
-	.horizontal-scroller::-webkit-scrollbar {
-		display: none;
-	}
-	.horizontal-scroller {
-		-ms-overflow-style: none;
-		scrollbar-width: none;
-	}
-
-	/* Actor Visualizer */
-	.actor-visualizer {
-		position: relative;
-		width: 280px;
-		height: 280px;
-		margin: 4rem auto 0 auto;
-		transition: transform 0.2s ease-out;
-	}
-
-	.actor-core {
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		width: 80px;
-		height: 80px;
-		border-radius: 50%;
-		background: #ff4500;
-		transform: translate(-50%, -50%);
-		box-shadow: 0 0 40px 10px rgba(255, 69, 0, 0.4);
-		animation: pulse-slow 2.5s infinite alternate;
-	}
-
-	.actor-client-orbit {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		animation: infinite-scroll 20s linear infinite;
-	}
-
-	.actor-client-orbit:nth-child(2) {
-		animation-duration: 30s;
-	}
-	.actor-client-orbit:nth-child(3) {
-		animation-duration: 25s;
-		animation-direction: reverse;
-	}
-
-	.actor-client {
-		position: absolute;
-		width: 12px;
-		height: 12px;
-		border-radius: 50%;
-		background: #a0a0a0;
-	}
-
-	.actor-client::before {
-		content: "";
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		width: 1px;
-		height: 100px;
-		background: #252525;
-		transform-origin: top left;
-		z-index: -1;
-	}
-
-	/* Client positions */
-	.client-1 {
-		top: 0;
-		left: 50%;
-		transform: translateX(-50%);
-	}
-	.client-1::before {
-		transform: translate(0, 0) rotate(180deg) scaleY(1.3);
-	}
-
-	.client-2 {
-		top: 50%;
-		right: 0;
-		transform: translateY(-50%);
-	}
-	.client-2::before {
-		transform: translate(0, 0) rotate(90deg) scaleY(1.3);
-	}
-
-	.client-3 {
-		bottom: 10%;
-		left: 15%;
-	}
-	.client-3::before {
-		transform: translate(0, 0) rotate(-40deg) scaleY(1);
-	}
-
-	.client-4 {
-		top: 20%;
-		right: 10%;
-	}
-	.client-4::before {
-		transform: translate(0, 0) rotate(60deg) scaleY(0.9);
-	}
-
-	/* Bento glow effect */
-	.bento-box {
-		position: relative;
-		overflow: hidden;
-		transition: all 0.3s ease;
-	}
-
-	.bento-box:hover {
-		border-color: #444;
-		transform: scale(1.02);
-	}
-
-	.bento-box::before {
-		content: "";
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background: radial-gradient(
-			circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
-			rgba(255, 255, 255, 0.08),
-			transparent 40%
-		);
-		opacity: 0;
-		transition: opacity 0.3s ease;
-		pointer-events: none;
-	}
-
-	.bento-box:hover::before {
-		opacity: 1;
-	}
-
-	/* Scroll-triggered animations */
-	.animate-on-scroll {
-		opacity: 0;
-		transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
-		transition-delay: var(--scroll-delay, 0s);
-		will-change: opacity, transform;
-	}
-
-	.animate-fade-up {
-		transform: translateY(30px);
-	}
-
-	.animate-on-scroll.is-visible {
-		opacity: 1;
-		transform: translateY(0);
-	}
-
-	.delay-100 {
-		--scroll-delay: 100ms;
-	}
-	.delay-200 {
-		--scroll-delay: 200ms;
-	}
-	.delay-300 {
-		--scroll-delay: 300ms;
-	}
-	.delay-400 {
-		--scroll-delay: 400ms;
-	}
-	.delay-500 {
-		--scroll-delay: 500ms;
-	}
-	.delay-600 {
-		--scroll-delay: 600ms;
-	}
-
-	/* Sticky Code Highlighting */
-	#code-block-sticky-wrapper {
-		min-height: 150vh;
-	}
-
-	.code-highlight-ref {
-		position: relative;
-		transition: background-color 0.3s ease-out;
-		display: block;
-		margin: 0 -1.5rem;
-		padding: 0 1.5rem;
-	}
-
-	.code-highlight-ref.is-active {
-		background-color: rgba(255, 69, 0, 0.1);
-	}
-
-	.code-highlight-ref.is-active::before {
-		content: "";
-		position: absolute;
-		left: 0;
-		top: 0;
-		bottom: 0;
-		width: 2px;
-		background-color: #ff4500;
-	}
-
-	/* Code syntax colors */
-	.code-comment {
-		color: #737373;
-	}
-
-	.code-keyword {
-		color: #c084fc;
-	}
-
-	.code-function {
-		color: #60a5fa;
-	}
-
-	.code-string {
-		color: #4ade80;
-	}
-
-	/* Fonts */
-	.font-heading {
-		font-family: "Open Sans", sans-serif;
-	}
-
-	/* Pause animation on hover */
-	.hover\:pause-animation:hover {
-		animation-play-state: paused;
-	}
-}
diff --git a/website/tailwind.config.mjs b/website/tailwind.config.mjs
index 392b785496..253a184070 100644
--- a/website/tailwind.config.mjs
+++ b/website/tailwind.config.mjs
@@ -32,7 +32,22 @@ export default {
 				'text-primary': '#FAFAFA',
 				'text-secondary': '#A0A0A0',
 				'border': '#252525',
-				'accent': '#FF4500',
+				'accent': '#CB5A33',
+				// Porcelain editorial palette. Marketing pages are light: a cool
+				// porcelain field with warm ink, warm mats, and forest green
+				// structure. Orange remains the single CTA spark per page.
+				'paper': '#EFEFEF',
+				'paper-deep': '#DCDCDE',
+				'paper-mid': '#E3E3E5',
+				'mat': '#EFE9DC',
+				'ink': '#1B1916',
+				'ink-soft': '#56524A',
+				'ink-faint': '#8A8478',
+				'cream': '#F4F1E7',
+				'pine': '#2E4034',
+				'olive': '#5C6B4F',
+				'sage': '#93A286',
+				'accent-deep': '#AB451F',
 				'code-keyword': '#c084fc',
 				'code-function': '#60a5fa',
 				'code-string': '#4ade80',
@@ -51,6 +66,7 @@ export default {
 				'hero-visual': 'hero-p 0.8s ease-out 1s forwards',
 				'infinite-scroll': 'infinite-scroll 25s linear infinite',
 				'pulse-slow': 'pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+				'spin-slow': 'spin 120s linear infinite',
 			},
 			keyframes: {
 				'fade-in-up': {
@@ -80,6 +96,25 @@ export default {
 			typography: ({ theme }) => ({
 				DEFAULT: {
 					css: {
+						// Light (non-inverted) prose palette for porcelain
+						// surfaces. Dark shells use prose-invert, which reads
+						// the --tw-prose-invert-* values below instead.
+						"--tw-prose-body": "#56524A",
+						"--tw-prose-headings": "#1B1916",
+						"--tw-prose-lead": "#56524A",
+						"--tw-prose-links": "#2E4034",
+						"--tw-prose-bold": "#1B1916",
+						"--tw-prose-counters": "#8A8478",
+						"--tw-prose-bullets": "#8A8478",
+						"--tw-prose-hr": "rgba(27, 25, 22, 0.1)",
+						"--tw-prose-quotes": "#56524A",
+						"--tw-prose-quote-borders": "#2E4034",
+						"--tw-prose-captions": "#8A8478",
+						"--tw-prose-code": "#1B1916",
+						"--tw-prose-pre-code": "#F4F1E7",
+						"--tw-prose-pre-bg": "#1B1916",
+						"--tw-prose-th-borders": "rgba(27, 25, 22, 0.15)",
+						"--tw-prose-td-borders": "rgba(27, 25, 22, 0.1)",
 						"--tw-prose-invert-body":
 							"hsl(var(--muted-foreground))",
 						"--tw-prose-invert-headings": "hsl(var(--foreground))",