diff --git a/apps/website/scripts/check-style-migration.mts b/apps/website/scripts/check-style-migration.mts
index 8869892ba..5802e179b 100644
--- a/apps/website/scripts/check-style-migration.mts
+++ b/apps/website/scripts/check-style-migration.mts
@@ -64,8 +64,12 @@ function normProp(p: string): string {
   return p.replace(/[A-Z]/g, (c) => '-' + c.toLowerCase());
 }
 function normValue(prop: string, raw: string): string {
-  let v = raw.trim().replace(/^['"`]|['"`]$/g, '');
-  const tok = v.match(/^tokens\.([a-zA-Z.]+)$/);
+  let v = raw.trim();
+  // Strip quotes only when one pair wraps the WHOLE value; stripping a lone
+  // leading quote mangled internally-quoted font stacks ('"X", monospace').
+  const q = v[0];
+  if ((q === '"' || q === "'" || q === '`') && v.endsWith(q)) v = v.slice(1, -1);
+  const tok = v.match(/^tokens\.([a-zA-Z0-9.]+)$/);
   if (tok) v = tokenValue(tok[1]) ?? v;
   v = v.replace(/var\((--[a-z0-9-]+)\)/g, (_, name) => cssVars.get(name) ?? _);
   if (/^-?\d+(\.\d+)?$/.test(v) && !UNITLESS.has(prop)) v = `${v}px`;
diff --git a/apps/website/src/app/about/page.tsx b/apps/website/src/app/about/page.tsx
index 0f63937a9..aaee94e05 100644
--- a/apps/website/src/app/about/page.tsx
+++ b/apps/website/src/app/about/page.tsx
@@ -1,6 +1,5 @@
 // SPDX-License-Identifier: MIT
 import Link from 'next/link';
-import { tokens } from '@threadplane/design-tokens';
 import { Container } from '../../components/ui/Container';
 import { Section } from '../../components/ui/Section';
 import { Eyebrow } from '../../components/ui/Eyebrow';
@@ -31,26 +30,6 @@ export const metadata = createPageMetadata({
   type: 'website',
 });
 
-const bodyStyle = {
-  fontFamily: tokens.typography.bodyLg.family,
-  fontSize: tokens.typography.bodyLg.size,
-  lineHeight: tokens.typography.bodyLg.line,
-  color: tokens.colors.textSecondary,
-  margin: 0,
-  marginBottom: 16,
-  maxWidth: '60ch',
-} as const;
-
-const headingStyle = {
-  fontFamily: tokens.typography.h2.family,
-  fontSize: tokens.typography.h2.size,
-  color: tokens.colors.textPrimary,
-  margin: 0,
-  marginBottom: 12,
-} as const;
-
-const linkStyle = { color: tokens.colors.accent } as const;
-
 export default function AboutPage() {
   return (
     <>
@@ -58,41 +37,29 @@ export default function AboutPage() {
 
       <Section surface="canvas" ariaLabelledBy="about-heading">
         <Container>
-          <div style={{ maxWidth: 720 }}>
-            <Eyebrow tone="accent" style={{ marginBottom: 16 }}>About</Eyebrow>
-            <h1
-              id="about-heading"
-              style={{
-                fontFamily: tokens.typography.h1.family,
-                fontSize: tokens.typography.h1.size,
-                lineHeight: tokens.typography.h1.line,
-                fontWeight: 700,
-                color: tokens.colors.textPrimary,
-                margin: 0,
-                marginBottom: 16,
-                letterSpacing: '-0.02em',
-              }}
-            >
+          <div className="about-section-inner">
+            <Eyebrow tone="accent" className="about-eyebrow-spaced">About</Eyebrow>
+            <h1 id="about-heading" className="about-h1">
               Who writes Threadplane
             </h1>
-            <p style={bodyStyle}>{ABOUT_INTRO}</p>
+            <p className="about-body">{ABOUT_INTRO}</p>
 
-            <h2 style={{ ...headingStyle, marginTop: 32 }}>{ABOUT_HISTORY_HEADING}</h2>
+            <h2 className="about-h2 about-h2-spaced">{ABOUT_HISTORY_HEADING}</h2>
             {ABOUT_HISTORY.map((paragraph) => (
-              <p key={paragraph} style={bodyStyle}>
+              <p key={paragraph} className="about-body">
                 {paragraph}
               </p>
             ))}
 
-            <p style={bodyStyle}>{ABOUT_PRINCIPLES}</p>
-            <p style={bodyStyle}>{ABOUT_PERSONAL}</p>
+            <p className="about-body">{ABOUT_PRINCIPLES}</p>
+            <p className="about-body">{ABOUT_PERSONAL}</p>
 
-            <p style={{ ...bodyStyle, marginBottom: 0 }}>
+            <p className="about-body about-body-last">
               <a
                 href={`https://github.com/${author.github}`}
                 target="_blank"
                 rel="noopener noreferrer"
-                style={linkStyle}
+                className="about-link"
               >
                 github.com/{author.github}
               </a>
@@ -103,12 +70,12 @@ export default function AboutPage() {
 
       <Section surface="tinted">
         <Container>
-          <div style={{ maxWidth: 720 }}>
-            <h2 style={headingStyle}>What Threadplane is</h2>
-            <p style={bodyStyle}>{LONG_SUBHEAD}</p>
-            <p style={{ ...bodyStyle, marginBottom: 0 }}>
+          <div className="about-section-inner">
+            <h2 className="about-h2">What Threadplane is</h2>
+            <p className="about-body">{LONG_SUBHEAD}</p>
+            <p className="about-body about-body-last">
               The source is public at{' '}
-              <a href={REPOSITORY_URL} target="_blank" rel="noopener noreferrer" style={linkStyle}>
+              <a href={REPOSITORY_URL} target="_blank" rel="noopener noreferrer" className="about-link">
                 github.com/cacheplane/angular-agent-framework
               </a>
               .
@@ -119,23 +86,23 @@ export default function AboutPage() {
 
       <Section surface="canvas">
         <Container>
-          <div style={{ maxWidth: 720 }}>
-            <h2 style={headingStyle}>How it is licensed</h2>
-            <p style={bodyStyle}>
+          <div className="about-section-inner">
+            <h2 className="about-h2">How it is licensed</h2>
+            <p className="about-body">
               <code>@threadplane/chat</code> is free for noncommercial use under PolyForm
               Noncommercial 1.0.0; commercial production use requires a Threadplane Commercial
               license. The other libraries are MIT. The{' '}
-              <Link href="/docs/licensing" style={linkStyle}>
+              <Link href="/docs/licensing" className="about-link">
                 licensing docs
               </Link>{' '}
-              and the <Link href="/pricing" style={linkStyle}>pricing page</Link> have the details.
+              and the <Link href="/pricing" className="about-link">pricing page</Link> have the details.
             </p>
-            <p style={{ ...bodyStyle, marginBottom: 0 }}>
+            <p className="about-body about-body-last">
               Questions about a specific build go to{' '}
-              <Link href="/contact" style={linkStyle}>
+              <Link href="/contact" className="about-link">
                 contact
               </Link>
-              ; ongoing writing is on the <Link href="/blog" style={linkStyle}>blog</Link>.
+              ; ongoing writing is on the <Link href="/blog" className="about-link">blog</Link>.
             </p>
           </div>
         </Container>
diff --git a/apps/website/src/app/ag-ui/page.tsx b/apps/website/src/app/ag-ui/page.tsx
index b0b2d2aab..e1e5c10db 100644
--- a/apps/website/src/app/ag-ui/page.tsx
+++ b/apps/website/src/app/ag-ui/page.tsx
@@ -1,5 +1,4 @@
 import Link from 'next/link';
-import { tokens } from '@threadplane/design-tokens';
 import { Container } from '../../components/ui/Container';
 import { Section } from '../../components/ui/Section';
 import { Eyebrow } from '../../components/ui/Eyebrow';
@@ -24,61 +23,29 @@ export default async function AgUiPage() {
       {/* Hero */}
       <Section surface="canvas" ariaLabelledBy="ag-ui-hero-heading">
         <Container>
-          <div style={{ maxWidth: 820, margin: '0 auto', textAlign: 'center' }}>
-            <Eyebrow tone="accent" style={{ marginBottom: 16 }}>@threadplane/ag-ui</Eyebrow>
-            <h1
-              id="ag-ui-hero-heading"
-              style={{
-                fontFamily: tokens.typography.h1.family,
-                fontSize: tokens.typography.h1.size,
-                lineHeight: tokens.typography.h1.line,
-                fontWeight: 700,
-                color: tokens.colors.textPrimary,
-                margin: 0,
-                marginBottom: 24,
-                letterSpacing: '-0.02em',
-              }}
-            >
+          <div className="ag-ui-page-hero-inner">
+            <Eyebrow tone="accent" className="ag-ui-page-eyebrow-spaced">@threadplane/ag-ui</Eyebrow>
+            <h1 id="ag-ui-hero-heading" className="ag-ui-page-h1">
               One adapter. Eight backends.
             </h1>
-            <p
-              style={{
-                fontFamily: tokens.typography.bodyLg.family,
-                fontSize: tokens.typography.bodyLg.size,
-                lineHeight: tokens.typography.bodyLg.line,
-                color: tokens.colors.textSecondary,
-                margin: '0 auto 32px',
-                maxWidth: 680,
-              }}
-            >
+            <p className="ag-ui-page-hero-subtitle">
               Build an Angular agent UI on any AG-UI-compatible runtime — CrewAI, Mastra, Microsoft Agent Framework, AG2, Pydantic AI, AWS Strands, CopilotKit, or LangGraph fronted by AG-UI. Same Agent contract and chat surface; runtime-specific history and checkpoint behavior stays with the backend.
             </p>
-            <div style={{ display: 'flex', justifyContent: 'center', gap: 12, flexWrap: 'wrap', marginBottom: 12 }}>
+            <div className="ag-ui-page-hero-buttons">
               <Button variant="primary" size="lg" href="/docs/ag-ui/getting-started/quickstart">Get started</Button>
               <Button variant="secondary" size="lg" href="https://github.com/cacheplane/angular-agent-framework" target="_blank" rel="noopener noreferrer">View source</Button>
             </div>
-            <p style={{ fontSize: 13, color: tokens.colors.textMuted, marginBottom: 20 }}>
-              Talking to LangGraph Platform directly? See <a href="/docs/choosing-an-adapter" style={{ color: tokens.colors.accent }}>Choosing an adapter</a>.
+            <p className="ag-ui-page-adapter-note">
+              Talking to LangGraph Platform directly? See <a href="/docs/choosing-an-adapter" className="ag-ui-page-adapter-link">Choosing an adapter</a>.
             </p>
-            <div style={{ display: 'flex', justifyContent: 'center', gap: 8, flexWrap: 'wrap', marginBottom: 24 }}>
+            <div className="ag-ui-page-hero-pills">
               <Pill variant="accent">MIT</Pill>
               <Pill variant="angular">Angular 20+</Pill>
               <Pill variant="neutral">AG-UI protocol</Pill>
             </div>
-            <p
-              style={{
-                fontFamily: tokens.typography.fontSans,
-                fontSize: 13,
-                color: tokens.colors.textMuted,
-                margin: '0 auto',
-                maxWidth: 520,
-              }}
-            >
+            <p className="ag-ui-page-langgraph-note">
               Already on LangGraph?{' '}
-              <Link
-                href="/langgraph"
-                style={{ color: tokens.colors.accent, textDecoration: 'none', fontWeight: 600 }}
-              >
+              <Link href="/langgraph" className="ag-ui-page-langgraph-link">
                 See @threadplane/langgraph
               </Link>{' '}
               for native streaming, checkpoints, and the typed LangGraph SDK path.
@@ -127,17 +94,7 @@ export default async function AgUiPage() {
         visualLeft
         visual={
           <BrowserFrame url="app.config.ts" elevation="md">
-            <pre style={{
-              margin: 0,
-              padding: '20px 22px',
-              background: '#1a1b26',
-              color: '#a9b1d6',
-              fontFamily: tokens.typography.fontMono,
-              fontSize: 13,
-              lineHeight: 1.6,
-              minHeight: 320,
-              overflow: 'auto',
-            }}>
+            <pre className="ag-ui-page-code-pre">
 {`import { provideAgent, injectAgent } from '@threadplane/ag-ui';
 import { ChatComponent } from '@threadplane/chat';
 
diff --git a/apps/website/src/app/blog/[slug]/page.tsx b/apps/website/src/app/blog/[slug]/page.tsx
index ce64c7712..629fa79d4 100644
--- a/apps/website/src/app/blog/[slug]/page.tsx
+++ b/apps/website/src/app/blog/[slug]/page.tsx
@@ -1,6 +1,5 @@
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
-import { tokens } from '@threadplane/design-tokens';
 import { MdxRenderer } from '../../../components/docs/MdxRenderer';
 import { DocsTOC } from '../../../components/docs/DocsTOC';
 import { AuthorByline } from '../../../components/blog/AuthorByline';
@@ -88,50 +87,22 @@ export default async function BlogPostPage({ params }: Params) {
   ]);
 
   return (
-    <div style={{ paddingTop: 80, background: tokens.surfaces.canvas, minHeight: '100vh' }}>
+    <div className="blog-post-page">
       {postData ? <JsonLd data={postData} /> : null}
       <JsonLd data={breadcrumbs} />
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'flex-start',
-          maxWidth: 1280,
-          margin: '0 auto',
-          gap: 0,
-        }}
-      >
-      <article style={{ width: '100%', maxWidth: 768, padding: '64px 24px', flexShrink: 0 }}>
-        <header style={{ marginBottom: 48 }}>
-          <Eyebrow tone="accent" style={{ marginBottom: 24 }}>
+      <div className="blog-post-layout">
+      <article className="blog-post-article">
+        <header className="blog-post-header">
+          <Eyebrow tone="accent" className="blog-post-eyebrow-spaced">
             {primaryTag} · {formatPostDate(post.frontmatter.date)} · {minutes} min read
           </Eyebrow>
-          <h1
-            style={{
-              fontFamily: tokens.typography.h1.family,
-              fontSize: tokens.typography.h1.size,
-              lineHeight: tokens.typography.h1.line,
-              fontWeight: 700,
-              letterSpacing: '-0.02em',
-              color: tokens.colors.textPrimary,
-              margin: '0 0 24px',
-            }}
-          >
+          <h1 className="blog-post-h1">
             {post.frontmatter.title}
           </h1>
-          <p
-            style={{
-              fontFamily: tokens.typography.bodyLg.family,
-              fontSize: tokens.typography.bodyLg.size,
-              lineHeight: tokens.typography.bodyLg.line,
-              color: tokens.colors.textSecondary,
-              margin: '0 0 32px',
-              maxWidth: '60ch',
-            }}
-          >
+          <p className="blog-post-subtitle">
             {post.frontmatter.description}
           </p>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 20, flexWrap: 'wrap', marginBottom: 20 }}>
+          <div className="blog-post-byline-row">
             <AuthorByline author={author} />
           </div>
           {post.frontmatter.tags && post.frontmatter.tags.length > 0 ? (
diff --git a/apps/website/src/app/blog/page.tsx b/apps/website/src/app/blog/page.tsx
index 67a2bb25d..4535a055c 100644
--- a/apps/website/src/app/blog/page.tsx
+++ b/apps/website/src/app/blog/page.tsx
@@ -1,5 +1,4 @@
 import Link from 'next/link';
-import { tokens } from '@threadplane/design-tokens';
 import { createPageMetadata } from '../../lib/site-metadata';
 import { getAllPosts, getFeaturedPost, getAllTags } from '../../lib/blog';
 import { FeaturedPostCard } from '../../components/blog/FeaturedPostCard';
@@ -34,35 +33,16 @@ export default async function BlogIndexPage({ searchParams }: Props) {
   const grid = featured ? filtered.filter((p) => p.slug !== featured.slug) : filtered;
 
   return (
-    <div style={{ paddingTop: 80, background: tokens.surfaces.canvas, minHeight: '100vh' }}>
-      <div style={{ maxWidth: 960, margin: '0 auto', padding: '35px 24px 64px' }}>
-        <header style={{ marginBottom: 32 }}>
-          <Eyebrow tone="accent" style={{ marginBottom: 16 }}>
+    <div className="blog-index-page">
+      <div className="blog-index-inner">
+        <header className="blog-index-header">
+          <Eyebrow tone="accent" className="blog-index-eyebrow-spaced">
             Blog
           </Eyebrow>
-          <h1
-            style={{
-              fontFamily: tokens.typography.h1.family,
-              fontSize: tokens.typography.h1.size,
-              lineHeight: tokens.typography.h1.line,
-              fontWeight: 700,
-              letterSpacing: '-0.02em',
-              color: tokens.colors.textPrimary,
-              margin: '0 0 16px',
-            }}
-          >
+          <h1 className="blog-index-h1">
             Articles from Threadplane
           </h1>
-          <p
-            style={{
-              fontFamily: tokens.typography.bodyLg.family,
-              fontSize: tokens.typography.bodyLg.size,
-              lineHeight: tokens.typography.bodyLg.line,
-              color: tokens.colors.textSecondary,
-              margin: 0,
-              maxWidth: '60ch',
-            }}
-          >
+          <p className="blog-index-subtitle">
             Writing on agent UI for Angular &mdash; production patterns, design
             choices, and what we&apos;re shipping.
           </p>
@@ -73,45 +53,16 @@ export default async function BlogIndexPage({ searchParams }: Props) {
         {featured ? <FeaturedPostCard post={featured} /> : null}
 
         {grid.length === 0 ? (
-          <div
-            style={{
-              padding: 48,
-              textAlign: 'center',
-              background: tokens.surfaces.surfaceTinted,
-              border: `1px solid ${tokens.surfaces.border}`,
-              borderRadius: 12,
-            }}
-          >
-            <p
-              style={{
-                fontFamily: tokens.typography.bodyLg.family,
-                fontSize: tokens.typography.bodyLg.size,
-                lineHeight: tokens.typography.bodyLg.line,
-                color: tokens.colors.textSecondary,
-                margin: '0 0 16px',
-              }}
-            >
+          <div className="blog-index-empty">
+            <p className="blog-index-empty-text">
               No posts tagged <em>{activeTag}</em> yet.
             </p>
-            <Link
-              href="/blog"
-              style={{
-                color: tokens.colors.accent,
-                textDecoration: 'underline',
-                fontWeight: 500,
-              }}
-            >
+            <Link href="/blog" className="blog-index-empty-link">
               View all posts
             </Link>
           </div>
         ) : (
-          <div
-            style={{
-              display: 'grid',
-              gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
-              gap: 16,
-            }}
-          >
+          <div className="blog-index-grid">
             {grid.map((p) => (
               <PostCard key={p.slug} post={p} />
             ))}
diff --git a/apps/website/src/app/chat/page.tsx b/apps/website/src/app/chat/page.tsx
index edd086ea7..7f392f831 100644
--- a/apps/website/src/app/chat/page.tsx
+++ b/apps/website/src/app/chat/page.tsx
@@ -1,4 +1,3 @@
-import { tokens } from '@threadplane/design-tokens';
 import { Container } from '../../components/ui/Container';
 import { Section } from '../../components/ui/Section';
 import { Eyebrow } from '../../components/ui/Eyebrow';
@@ -24,42 +23,21 @@ export default async function ChatPage() {
       {/* Hero */}
       <Section surface="canvas" ariaLabelledBy="chat-hero-heading">
         <Container>
-          <div style={{ maxWidth: 820, margin: '0 auto', textAlign: 'center' }}>
-            <Eyebrow tone="accent" style={{ marginBottom: 16 }}>@threadplane/chat</Eyebrow>
-            <h1
-              id="chat-hero-heading"
-              style={{
-                fontFamily: tokens.typography.h1.family,
-                fontSize: tokens.typography.h1.size,
-                lineHeight: tokens.typography.h1.line,
-                fontWeight: 700,
-                color: tokens.colors.textPrimary,
-                margin: 0,
-                marginBottom: 24,
-                letterSpacing: '-0.02em',
-              }}
-            >
+          <div className="chat-page-hero-inner">
+            <Eyebrow tone="accent" className="chat-page-eyebrow-spaced">@threadplane/chat</Eyebrow>
+            <h1 id="chat-hero-heading" className="chat-page-h1">
               Drop-in chat for Angular agents.
             </h1>
-            <p
-              style={{
-                fontFamily: tokens.typography.bodyLg.family,
-                fontSize: tokens.typography.bodyLg.size,
-                lineHeight: tokens.typography.bodyLg.line,
-                color: tokens.colors.textSecondary,
-                margin: '0 auto 32px',
-                maxWidth: 640,
-              }}
-            >
+            <p className="chat-page-hero-subtitle">
               chat-timeline + chat-debug + GenUI surfaces. Production-shaped from day one, themable to your design system, or use the headless primitives if you want full control.
             </p>
-            <div style={{ display: 'flex', justifyContent: 'center', gap: 12, flexWrap: 'wrap', marginBottom: 20 }}>
+            <div className="chat-page-hero-buttons">
               <Button variant="primary" size="lg" href="/docs/chat/getting-started/introduction">Get started</Button>
               <Button variant="ghost" size="lg" href="https://cockpit.threadplane.ai" target="_blank" rel="noopener noreferrer">
                 See it live →
               </Button>
             </div>
-            <div style={{ display: 'flex', justifyContent: 'center', gap: 8, flexWrap: 'wrap' }}>
+            <div className="chat-page-hero-pills">
               <Pill variant="accent">MIT</Pill>
               <Pill variant="neutral">Vercel json-render</Pill>
               <Pill variant="neutral">Google A2UI</Pill>
@@ -87,27 +65,19 @@ export default async function ChatPage() {
         cta={{ label: 'See @threadplane/chat docs', href: '/docs/chat/getting-started/introduction' }}
         visual={
           <BrowserFrame url="cockpit.threadplane.ai/chat/core-capabilities/debug/overview/python" elevation="md">
-            <div style={{ padding: 24, minHeight: 320, background: 'linear-gradient(180deg, #fff, #f8fafc)' }}>
-              <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
+            <div className="chat-page-visual-panel">
+              <div className="chat-page-visual-pills-row">
                 <Pill variant="accent">streaming</Pill>
                 <Pill variant="neutral">3 tools</Pill>
                 <Pill variant="neutral">1 interrupt</Pill>
               </div>
-              <div style={{ fontFamily: tokens.typography.fontMono, fontSize: 11, color: tokens.colors.textMuted, marginBottom: 8 }}>
+              <div className="chat-page-tool-label">
                 tool · query_inventory · 240ms
               </div>
-              <div style={{
-                background: tokens.surfaces.surfaceTinted,
-                border: `1px solid ${tokens.surfaces.border}`,
-                borderRadius: tokens.radius.md,
-                padding: 12,
-                fontFamily: tokens.typography.fontMono,
-                fontSize: 12,
-                color: tokens.colors.textPrimary,
-              }}>
+              <div className="chat-page-result-block">
                 {`{ items: 47, low_stock: 3, total_value: 12400 }`}
               </div>
-              <div style={{ marginTop: 16, paddingTop: 12, borderTop: `1px solid ${tokens.surfaces.border}`, fontFamily: tokens.typography.fontMono, fontSize: 11, color: tokens.colors.textSecondary }}>
+              <div className="chat-page-replay-footer">
                 replay · 0:24 · paused on interrupt
               </div>
             </div>
diff --git a/apps/website/src/app/contact/page.tsx b/apps/website/src/app/contact/page.tsx
index 81d2f6d7a..35dceb2df 100644
--- a/apps/website/src/app/contact/page.tsx
+++ b/apps/website/src/app/contact/page.tsx
@@ -1,6 +1,5 @@
 // SPDX-License-Identifier: MIT
 import React, { Suspense } from 'react';
-import { tokens } from '@threadplane/design-tokens';
 import { Container } from '../../components/ui/Container';
 import { Section } from '../../components/ui/Section';
 import { Eyebrow } from '../../components/ui/Eyebrow';
@@ -21,43 +20,21 @@ export default function ContactPage() {
   return (
     <Section surface="canvas" ariaLabelledBy="contact-heading">
       <Container>
-        <div style={{ maxWidth: 720 }}>
-          <Eyebrow tone="accent" style={{ marginBottom: 16 }}>Contact</Eyebrow>
-          <h1
-            id="contact-heading"
-            style={{
-              fontFamily: tokens.typography.h1.family,
-              fontSize: tokens.typography.h1.size,
-              lineHeight: tokens.typography.h1.line,
-              fontWeight: 700,
-              color: tokens.colors.textPrimary,
-              margin: 0,
-              marginBottom: 16,
-              letterSpacing: '-0.02em',
-            }}
-          >
+        <div className="contact-page-inner">
+          <Eyebrow tone="accent" className="contact-page-eyebrow-spaced">Contact</Eyebrow>
+          <h1 id="contact-heading" className="contact-page-h1">
             Talk to an engineer.
           </h1>
-          <p
-            style={{
-              fontFamily: tokens.typography.bodyLg.family,
-              fontSize: tokens.typography.bodyLg.size,
-              lineHeight: tokens.typography.bodyLg.line,
-              color: tokens.colors.textSecondary,
-              margin: 0,
-              marginBottom: 24,
-              maxWidth: '60ch',
-            }}
-          >
+          <p className="contact-page-subtitle">
             Tell us what you&apos;re shipping. We&apos;ll reply within one business day — usually with code, not a calendar invite.
           </p>
-          <div style={{ marginBottom: 24 }}>
+          <div className="contact-page-sla-wrap">
             <SlaCard />
           </div>
           <Suspense>
             <ContactForm />
           </Suspense>
-          <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 16 }}>
+          <div className="contact-page-links-row">
             <GitHubStarsPill />
             <AltChannelRow />
           </div>
diff --git a/apps/website/src/app/error.tsx b/apps/website/src/app/error.tsx
index 73ca655e3..5e89581f7 100644
--- a/apps/website/src/app/error.tsx
+++ b/apps/website/src/app/error.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { useEffect } from 'react';
-import { tokens } from '@threadplane/design-tokens';
 import { Container } from '../components/ui/Container';
 import { Section } from '../components/ui/Section';
 import { Eyebrow } from '../components/ui/Eyebrow';
@@ -28,51 +27,23 @@ export default function ErrorBoundary({ error, reset }: ErrorBoundaryProps) {
   return (
     <Section surface="canvas" ariaLabelledBy="error-heading">
       <Container>
-        <div style={{ maxWidth: 640, margin: '0 auto', textAlign: 'center' }}>
-          <Eyebrow tone="angular" style={{ marginBottom: 16 }}>Error</Eyebrow>
-          <h1
-            id="error-heading"
-            style={{
-              fontFamily: tokens.typography.h1.family,
-              fontSize: tokens.typography.h1.size,
-              lineHeight: tokens.typography.h1.line,
-              fontWeight: 700,
-              color: tokens.colors.textPrimary,
-              margin: 0,
-              marginBottom: 16,
-              letterSpacing: '-0.02em',
-            }}
-          >
+        <div className="error-page-inner">
+          <Eyebrow tone="angular" className="error-page-eyebrow-spaced">Error</Eyebrow>
+          <h1 id="error-heading" className="error-page-h1">
             Something went wrong.
           </h1>
-          <p
-            style={{
-              fontFamily: tokens.typography.bodyLg.family,
-              fontSize: tokens.typography.bodyLg.size,
-              lineHeight: tokens.typography.bodyLg.line,
-              color: tokens.colors.textSecondary,
-              margin: '0 auto 12px',
-              maxWidth: 480,
-            }}
-          >
+          <p className="error-page-body">
             An unexpected error stopped this page from rendering. The team has been
             notified. You can try again, or head back home.
           </p>
           {error.digest ? (
-            <p
-              style={{
-                fontFamily: tokens.typography.fontMono,
-                fontSize: 12,
-                color: tokens.colors.textMuted,
-                margin: '0 0 28px',
-              }}
-            >
+            <p className="error-page-digest">
               Error ID: {error.digest}
             </p>
           ) : (
-            <div style={{ height: 28 }} />
+            <div className="error-page-spacer" />
           )}
-          <div style={{ display: 'flex', justifyContent: 'center', gap: 12, flexWrap: 'wrap' }}>
+          <div className="error-page-buttons">
             <Button variant="primary" size="lg" onClick={reset}>
               Try again
             </Button>
diff --git a/apps/website/src/app/langgraph/page.tsx b/apps/website/src/app/langgraph/page.tsx
index 56c70920c..7f84472df 100644
--- a/apps/website/src/app/langgraph/page.tsx
+++ b/apps/website/src/app/langgraph/page.tsx
@@ -1,4 +1,3 @@
-import { tokens } from '@threadplane/design-tokens';
 import { Container } from '../../components/ui/Container';
 import { Section } from '../../components/ui/Section';
 import { Eyebrow } from '../../components/ui/Eyebrow';
@@ -24,43 +23,22 @@ export default async function LangGraphPage() {
       {/* Hero */}
       <Section surface="canvas" ariaLabelledBy="angular-hero-heading">
         <Container>
-          <div style={{ maxWidth: 820, margin: '0 auto', textAlign: 'center' }}>
-            <Eyebrow tone="angular" style={{ marginBottom: 16 }}>@threadplane/langgraph</Eyebrow>
-            <h1
-              id="angular-hero-heading"
-              style={{
-                fontFamily: tokens.typography.h1.family,
-                fontSize: tokens.typography.h1.size,
-                lineHeight: tokens.typography.h1.line,
-                fontWeight: 700,
-                color: tokens.colors.textPrimary,
-                margin: 0,
-                marginBottom: 24,
-                letterSpacing: '-0.02em',
-              }}
-            >
+          <div className="langgraph-page-hero-inner">
+            <Eyebrow tone="angular" className="langgraph-page-eyebrow-spaced">@threadplane/langgraph</Eyebrow>
+            <h1 id="angular-hero-heading" className="langgraph-page-h1">
               LangGraph agent UI for Angular.
             </h1>
-            <p
-              style={{
-                fontFamily: tokens.typography.bodyLg.family,
-                fontSize: tokens.typography.bodyLg.size,
-                lineHeight: tokens.typography.bodyLg.line,
-                color: tokens.colors.textSecondary,
-                margin: '0 auto 32px',
-                maxWidth: 640,
-              }}
-            >
+            <p className="langgraph-page-hero-subtitle">
               Ship LangGraph agents inside your Angular 20+ app with headless chat, durable threads, interrupts, branch/history, tool progress, and generative UI.
             </p>
-            <div style={{ display: 'flex', justifyContent: 'center', gap: 12, flexWrap: 'wrap', marginBottom: 12 }}>
+            <div className="langgraph-page-hero-buttons">
               <Button variant="primary" size="lg" href="/docs/langgraph/getting-started/introduction">Get started</Button>
               <Button variant="secondary" size="lg" href="https://github.com/cacheplane/angular-agent-framework" target="_blank" rel="noopener noreferrer">View source</Button>
             </div>
-            <p style={{ fontSize: 13, color: tokens.colors.textMuted, marginBottom: 20 }}>
-              Not sure if LangGraph is right for your backend? See <a href="/docs/choosing-an-adapter" style={{ color: tokens.colors.accent }}>Choosing an adapter</a>.
+            <p className="langgraph-page-adapter-note">
+              Not sure if LangGraph is right for your backend? See <a href="/docs/choosing-an-adapter" className="langgraph-page-adapter-link">Choosing an adapter</a>.
             </p>
-            <div style={{ display: 'flex', justifyContent: 'center', gap: 8, flexWrap: 'wrap' }}>
+            <div className="langgraph-page-hero-pills">
               <Pill variant="accent">MIT</Pill>
               <Pill variant="angular">Angular 20+</Pill>
               <Pill variant="neutral">LangGraph + AG-UI</Pill>
@@ -88,17 +66,7 @@ export default async function LangGraphPage() {
         cta={{ label: 'API reference', href: '/docs/langgraph/api/inject-agent' }}
         visual={
           <BrowserFrame url="app.config.ts" elevation="md">
-            <pre style={{
-              margin: 0,
-              padding: '20px 22px',
-              background: '#1a1b26',
-              color: '#a9b1d6',
-              fontFamily: tokens.typography.fontMono,
-              fontSize: 13,
-              lineHeight: 1.6,
-              minHeight: 320,
-              overflow: 'auto',
-            }}>
+            <pre className="langgraph-page-code-pre">
 {`import { provideAgent } from '@threadplane/langgraph';
 
 export const appConfig: ApplicationConfig = {
diff --git a/apps/website/src/app/not-found.tsx b/apps/website/src/app/not-found.tsx
index 1c3857d60..b11d978d1 100644
--- a/apps/website/src/app/not-found.tsx
+++ b/apps/website/src/app/not-found.tsx
@@ -1,4 +1,3 @@
-import { tokens } from '@threadplane/design-tokens';
 import { Container } from '../components/ui/Container';
 import { Section } from '../components/ui/Section';
 import { Eyebrow } from '../components/ui/Eyebrow';
@@ -13,37 +12,16 @@ export default function NotFound() {
   return (
     <Section surface="canvas" ariaLabelledBy="not-found-heading">
       <Container>
-        <div style={{ maxWidth: 640, margin: '0 auto', textAlign: 'center' }}>
-          <Eyebrow tone="accent" style={{ marginBottom: 16 }}>404</Eyebrow>
-          <h1
-            id="not-found-heading"
-            style={{
-              fontFamily: tokens.typography.h1.family,
-              fontSize: tokens.typography.h1.size,
-              lineHeight: tokens.typography.h1.line,
-              fontWeight: 700,
-              color: tokens.colors.textPrimary,
-              margin: 0,
-              marginBottom: 16,
-              letterSpacing: '-0.02em',
-            }}
-          >
+        <div className="nf-inner">
+          <Eyebrow tone="accent" className="nf-eyebrow-spaced">404</Eyebrow>
+          <h1 id="not-found-heading" className="nf-h1">
             Page not found.
           </h1>
-          <p
-            style={{
-              fontFamily: tokens.typography.bodyLg.family,
-              fontSize: tokens.typography.bodyLg.size,
-              lineHeight: tokens.typography.bodyLg.line,
-              color: tokens.colors.textSecondary,
-              margin: '0 auto 32px',
-              maxWidth: 480,
-            }}
-          >
+          <p className="nf-body">
             The page you were looking for doesn&apos;t exist. It may have moved, or the link
             you followed might be broken.
           </p>
-          <div style={{ display: 'flex', justifyContent: 'center', gap: 12, flexWrap: 'wrap' }}>
+          <div className="nf-buttons">
             <Button variant="primary" size="lg" href="/">
               Back home
             </Button>
diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx
index 28cd0e628..883de97ef 100644
--- a/apps/website/src/app/page.tsx
+++ b/apps/website/src/app/page.tsx
@@ -18,7 +18,6 @@ import { FinalCTA } from '../components/landing/FinalCTA';
 import { RecentArticles } from '../components/landing/RecentArticles';
 import { Section } from '../components/ui/Section';
 import { Container } from '../components/ui/Container';
-import { tokens } from '@threadplane/design-tokens';
 import { createPageMetadata, LONG_SUBHEAD, PRIMARY_TAGLINE } from '../lib/site-metadata';
 
 export const metadata = createPageMetadata({
@@ -57,7 +56,7 @@ async function buildPanes(media: SectionMedia, clipUrl: string): Promise<MediumP
       key: 'code',
       label: codeBlocks.length > 1 ? block.label : 'Code',
       content: (
-        <div style={{ borderRadius: 14, overflow: 'hidden', border: `1px solid ${tokens.surfaces.border}` }}>
+        <div className="home-code-frame">
           <HighlightedCode code={block.source} lang={block.language} />
         </div>
       ),
@@ -72,7 +71,7 @@ async function buildPanes(media: SectionMedia, clipUrl: string): Promise<MediumP
       label: 'Live',
       content: (
         <BrowserFrame url={clipUrl} elevation="lg">
-          <div style={{ position: 'relative', width: '100%', aspectRatio: '16 / 10', background: '#15161f' }}>
+          <div className="home-live-frame">
             {/*
               Mounted only when its tab is selected — `MediumSwitcher` renders
               one pane at a time, so this iframe is never requested on page load.
@@ -84,7 +83,7 @@ async function buildPanes(media: SectionMedia, clipUrl: string): Promise<MediumP
               src={`https://demo.threadplane.ai/${mode}?featured=${encodeURIComponent(media.live.featured)}`}
               title="Threadplane live demo"
               loading="lazy"
-              style={{ width: '100%', height: '100%', border: 'none', display: 'block' }}
+              className="home-live-iframe"
             />
           </div>
         </BrowserFrame>
@@ -122,7 +121,7 @@ export default async function HomePage() {
         headline="Build the Angular UI layer for production agents."
         body={
           <>
-            <code style={{ fontFamily: tokens.typography.fontMono }}>provideAgent</code> + <code style={{ fontFamily: tokens.typography.fontMono }}>injectAgent()</code> give you headless chat, durable threads, interrupts, tool progress, and generative UI. LangGraph and AG-UI adapters share the contract, so teams can swap runtimes without rewriting the Angular surface.
+            <code className="home-code">provideAgent</code> + <code className="home-code">injectAgent()</code> give you headless chat, durable threads, interrupts, tool progress, and generative UI. LangGraph and AG-UI adapters share the contract, so teams can swap runtimes without rewriting the Angular surface.
           </>
         }
         bullets={[
@@ -195,10 +194,10 @@ export default async function HomePage() {
         headline="Nothing irreversible happens without a human."
         body={
           <>
-            <code style={{ fontFamily: tokens.typography.fontMono }}>interrupt()</code> freezes the graph
+            <code className="home-code">interrupt()</code> freezes the graph
             mid-run and the pause lives in the checkpoint, not in component state. Your UI renders the
             proposal, the human answers, and{' '}
-            <code style={{ fontFamily: tokens.typography.fontMono }}>submit({'{ resume }'})</code> continues
+            <code className="home-code">submit({'{ resume }'})</code> continues
             the run — with the decision written back beside the action it gated.
           </>
         }
diff --git a/apps/website/src/app/pilot-to-prod/page.tsx b/apps/website/src/app/pilot-to-prod/page.tsx
index ebf8de61f..1c01c2dd2 100644
--- a/apps/website/src/app/pilot-to-prod/page.tsx
+++ b/apps/website/src/app/pilot-to-prod/page.tsx
@@ -1,4 +1,3 @@
-import { tokens } from '@threadplane/design-tokens';
 import { Container } from '../../components/ui/Container';
 import { Section } from '../../components/ui/Section';
 import { Eyebrow } from '../../components/ui/Eyebrow';
@@ -25,40 +24,19 @@ export default function PilotToProdPage() {
       {/* Hero */}
       <Section surface="canvas" ariaLabelledBy="pilot-hero-heading">
         <Container>
-          <div style={{ maxWidth: 880, margin: '0 auto', textAlign: 'center' }}>
-            <Eyebrow tone="accent" style={{ marginBottom: 16 }}>Pilot to production</Eyebrow>
-            <h1
-              id="pilot-hero-heading"
-              style={{
-                fontFamily: tokens.typography.h1.family,
-                fontSize: tokens.typography.h1.size,
-                lineHeight: tokens.typography.h1.line,
-                fontWeight: 700,
-                color: tokens.colors.textPrimary,
-                margin: 0,
-                marginBottom: 24,
-                letterSpacing: '-0.02em',
-              }}
-            >
+          <div className="pilot-hero-inner">
+            <Eyebrow tone="accent" className="pilot-eyebrow-spaced">Pilot to production</Eyebrow>
+            <h1 id="pilot-hero-heading" className="pilot-h1">
               8 weeks. One working agent. Production-ready patterns.
             </h1>
-            <p
-              style={{
-                fontFamily: tokens.typography.bodyLg.family,
-                fontSize: tokens.typography.bodyLg.size,
-                lineHeight: tokens.typography.bodyLg.line,
-                color: tokens.colors.textSecondary,
-                margin: '0 auto 32px',
-                maxWidth: 640,
-              }}
-            >
+            <p className="pilot-hero-subtitle">
               Pilot-to-Prod is a concierge engagement. We ship your first Angular agent on your real data, in your real app — and your engineers own it at the end.
             </p>
-            <div style={{ display: 'flex', justifyContent: 'center', gap: 12, flexWrap: 'wrap', marginBottom: 20 }}>
+            <div className="pilot-hero-buttons">
               <Button variant="primary" size="lg" href="#whitepaper-block">Read the field report</Button>
               <Button variant="secondary" size="lg" href="#contact">Book a discovery call</Button>
             </div>
-            <div style={{ display: 'flex', justifyContent: 'center', gap: 8, flexWrap: 'wrap' }}>
+            <div className="pilot-hero-pills">
               <Pill variant="accent">Fixed scope</Pill>
               <Pill variant="neutral">Source delivered</Pill>
               <Pill variant="neutral">IP yours</Pill>
@@ -88,9 +66,9 @@ export default function PilotToProdPage() {
         cta={{ label: 'See sample roadmap', href: '#whitepaper-block' }}
         visual={
           <BrowserFrame url="discover · scope · plan" elevation="md">
-            <div style={{ padding: 28, minHeight: 320, background: tokens.surfaces.surface }}>
-              <Eyebrow tone="accent" style={{ marginBottom: 12 }}>Roadmap draft</Eyebrow>
-              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
+            <div className="pilot-visual-panel">
+              <Eyebrow tone="accent" className="pilot-eyebrow-tight">Roadmap draft</Eyebrow>
+              <ul className="pilot-roadmap-list">
                 {[
                   ['W1', 'Stakeholder interviews + workflow audit'],
                   ['W2', 'Agent shortlist + integration plan'],
@@ -98,15 +76,9 @@ export default function PilotToProdPage() {
                   ['W6–7', 'Harden + observability + deploy'],
                   ['W8', 'Train your team · handoff'],
                 ].map(([w, desc]) => (
-                  <li key={w} style={{ display: 'flex', gap: 12, alignItems: 'baseline' }}>
-                    <span style={{
-                      fontFamily: tokens.typography.fontMono,
-                      fontSize: 11,
-                      color: tokens.colors.accent,
-                      fontWeight: 700,
-                      flex: '0 0 40px',
-                    }}>{w}</span>
-                    <span style={{ fontSize: 14, color: tokens.colors.textSecondary }}>{desc}</span>
+                  <li key={w} className="pilot-roadmap-item">
+                    <span className="pilot-roadmap-week">{w}</span>
+                    <span className="pilot-roadmap-desc">{desc}</span>
                   </li>
                 ))}
               </ul>
@@ -139,7 +111,7 @@ export default function PilotToProdPage() {
             <img
               src="/screenshots/cockpit-run.webp"
               alt="Cockpit reference app — live chat surface ready to receive a message"
-              style={{ display: 'block', width: '100%', height: 'auto' }}
+              className="pilot-screenshot"
               loading="lazy"
               decoding="async"
             />
@@ -168,9 +140,9 @@ export default function PilotToProdPage() {
         cta={{ label: 'Production patterns', href: '/docs/langgraph/guides/deployment' }}
         visual={
           <BrowserFrame url="grafana · agent dashboard" elevation="md">
-            <div style={{ padding: 28, minHeight: 320, background: tokens.surfaces.surface }}>
-              <Eyebrow tone="accent" style={{ marginBottom: 12 }}>Production checklist</Eyebrow>
-              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
+            <div className="pilot-visual-panel">
+              <Eyebrow tone="accent" className="pilot-eyebrow-tight">Production checklist</Eyebrow>
+              <ul className="pilot-checklist-list">
                 {[
                   'Streaming latency budget defined',
                   'Tool-call error boundaries wired',
@@ -179,13 +151,8 @@ export default function PilotToProdPage() {
                   'On-call runbook delivered',
                   'Deploy + rollback tested',
                 ].map((item) => (
-                  <li key={item} style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 14, color: tokens.colors.textSecondary }}>
-                    <span style={{
-                      width: 18, height: 18, borderRadius: tokens.radius.full,
-                      background: tokens.colors.accent, color: tokens.colors.textInverted,
-                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
-                      fontSize: 11, fontWeight: 700,
-                    }}>✓</span>
+                  <li key={item} className="pilot-checklist-item">
+                    <span className="pilot-checklist-badge">✓</span>
                     {item}
                   </li>
                 ))}
@@ -198,32 +165,13 @@ export default function PilotToProdPage() {
       {/* Outcomes */}
       <Section surface="tinted" ariaLabelledBy="outcomes-heading">
         <Container>
-          <div style={{ maxWidth: 720, margin: '0 auto', textAlign: 'center', marginBottom: 48 }}>
-            <Eyebrow tone="accent" style={{ marginBottom: 16 }}>What you walk away with</Eyebrow>
-            <h2
-              id="outcomes-heading"
-              style={{
-                fontFamily: tokens.typography.h2.family,
-                fontSize: tokens.typography.h2.size,
-                lineHeight: tokens.typography.h2.line,
-                fontWeight: 700,
-                color: tokens.colors.textPrimary,
-                margin: 0,
-                letterSpacing: '-0.015em',
-              }}
-            >
+          <div className="pilot-section-header">
+            <Eyebrow tone="accent" className="pilot-eyebrow-spaced">What you walk away with</Eyebrow>
+            <h2 id="outcomes-heading" className="pilot-h2">
               A working agent. A trained team. A runbook.
             </h2>
           </div>
-          <div
-            style={{
-              display: 'grid',
-              gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
-              gap: 16,
-              maxWidth: 1000,
-              margin: '0 auto',
-            }}
-          >
+          <div className="pilot-outcomes-grid">
             {[
               { t: 'Working demo', d: 'Live on your data, in your app — not in a sandbox.' },
               { t: 'Hardened patterns', d: 'Error/fallback/observability built in from the start.' },
@@ -231,24 +179,10 @@ export default function PilotToProdPage() {
               { t: 'Trained team', d: 'Your engineers own the framework and the runbook.' },
             ].map((o) => (
               <Card key={o.t} padding="lg">
-                <h3 style={{
-                  fontFamily: tokens.typography.h3.family,
-                  fontSize: 17,
-                  lineHeight: 1.3,
-                  fontWeight: 600,
-                  color: tokens.colors.textPrimary,
-                  margin: 0,
-                  marginBottom: 8,
-                }}>
+                <h3 className="pilot-outcome-h3">
                   {o.t}
                 </h3>
-                <p style={{
-                  fontFamily: tokens.typography.body.family,
-                  fontSize: 14,
-                  lineHeight: tokens.typography.body.line,
-                  color: tokens.colors.textSecondary,
-                  margin: 0,
-                }}>
+                <p className="pilot-outcome-body">
                   {o.d}
                 </p>
               </Card>
@@ -263,30 +197,12 @@ export default function PilotToProdPage() {
       {/* Contact anchor */}
       <Section id="contact" surface="white" ariaLabelledBy="contact-heading">
         <Container>
-          <div style={{ maxWidth: 720, margin: '0 auto', textAlign: 'center' }}>
-            <Eyebrow tone="accent" style={{ marginBottom: 16 }}>Discovery call</Eyebrow>
-            <h2
-              id="contact-heading"
-              style={{
-                fontFamily: tokens.typography.h2.family,
-                fontSize: tokens.typography.h2.size,
-                lineHeight: tokens.typography.h2.line,
-                fontWeight: 700,
-                color: tokens.colors.textPrimary,
-                margin: 0,
-                marginBottom: 16,
-                letterSpacing: '-0.015em',
-              }}
-            >
+          <div className="pilot-contact-inner">
+            <Eyebrow tone="accent" className="pilot-eyebrow-spaced">Discovery call</Eyebrow>
+            <h2 id="contact-heading" className="pilot-h2 pilot-h2-spaced">
               Tell us about your stack.
             </h2>
-            <p style={{
-              fontFamily: tokens.typography.bodyLg.family,
-              fontSize: tokens.typography.bodyLg.size,
-              lineHeight: tokens.typography.bodyLg.line,
-              color: tokens.colors.textSecondary,
-              margin: '0 0 32px 0',
-            }}>
+            <p className="pilot-contact-body">
               30-minute discovery call. We&apos;ll dig into your Angular surface, your agent-eligible workflows, and whether Pilot-to-Prod is the right fit. No pitch deck.
             </p>
             <Button variant="primary" size="lg" href="/pricing#lead-form">
diff --git a/apps/website/src/app/pricing/page.tsx b/apps/website/src/app/pricing/page.tsx
index e3ea2e729..42c5403e8 100644
--- a/apps/website/src/app/pricing/page.tsx
+++ b/apps/website/src/app/pricing/page.tsx
@@ -1,4 +1,3 @@
-import { tokens } from '@threadplane/design-tokens';
 import { Container } from '../../components/ui/Container';
 import { Section } from '../../components/ui/Section';
 import { Eyebrow } from '../../components/ui/Eyebrow';
@@ -22,20 +21,9 @@ export default function PricingPage() {
     <>
       <Section surface="canvas" ariaLabelledBy="pricing-heading">
         <Container>
-          <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto' }}>
-            <Eyebrow tone="accent" style={{ marginBottom: 16 }}>Pricing</Eyebrow>
-            <h1
-              id="pricing-heading"
-              style={{
-                fontFamily: tokens.typography.h1.family,
-                fontWeight: 700,
-                fontSize: tokens.typography.h1.size,
-                lineHeight: tokens.typography.h1.line,
-                color: tokens.colors.textPrimary,
-                margin: 0,
-                letterSpacing: '-0.02em',
-              }}
-            >
+          <div className="pricing-page-hero-inner">
+            <Eyebrow tone="accent" className="pricing-page-eyebrow-spaced">Pricing</Eyebrow>
+            <h1 id="pricing-heading" className="pricing-page-h1">
               Simple, transparent pricing
             </h1>
           </div>
@@ -46,26 +34,11 @@ export default function PricingPage() {
 
       <Section surface="canvas">
         <Container>
-          <Eyebrow style={{ marginBottom: 12 }}>Compatibility</Eyebrow>
-          <h2
-            style={{
-              fontFamily: tokens.typography.h2.family,
-              fontSize: tokens.typography.h2.size,
-              margin: 0,
-              marginBottom: 16,
-              color: tokens.colors.textPrimary,
-            }}
-          >
+          <Eyebrow className="pricing-page-eyebrow-tight">Compatibility</Eyebrow>
+          <h2 className="pricing-page-h2">
             Angular version support
           </h2>
-          <p
-            style={{
-              margin: 0,
-              marginBottom: 24,
-              color: tokens.colors.textSecondary,
-              maxWidth: '60ch',
-            }}
-          >
+          <p className="pricing-page-compat-body">
             We ship against the versions our CI tests. Other versions may work but aren&apos;t guaranteed.
           </p>
           <CompatibilityMatrix />
diff --git a/apps/website/src/app/render/page.tsx b/apps/website/src/app/render/page.tsx
index 2027a0606..6bf61b2f7 100644
--- a/apps/website/src/app/render/page.tsx
+++ b/apps/website/src/app/render/page.tsx
@@ -1,4 +1,3 @@
-import { tokens } from '@threadplane/design-tokens';
 import { Container } from '../../components/ui/Container';
 import { Section } from '../../components/ui/Section';
 import { Eyebrow } from '../../components/ui/Eyebrow';
@@ -24,40 +23,19 @@ export default async function RenderPage() {
       {/* Hero */}
       <Section surface="canvas" ariaLabelledBy="render-hero-heading">
         <Container>
-          <div style={{ maxWidth: 820, margin: '0 auto', textAlign: 'center' }}>
-            <Eyebrow tone="accent" style={{ marginBottom: 16 }}>@threadplane/render</Eyebrow>
-            <h1
-              id="render-hero-heading"
-              style={{
-                fontFamily: tokens.typography.h1.family,
-                fontSize: tokens.typography.h1.size,
-                lineHeight: tokens.typography.h1.line,
-                fontWeight: 700,
-                color: tokens.colors.textPrimary,
-                margin: 0,
-                marginBottom: 24,
-                letterSpacing: '-0.02em',
-              }}
-            >
+          <div className="render-page-hero-inner">
+            <Eyebrow tone="accent" className="render-page-eyebrow-spaced">@threadplane/render</Eyebrow>
+            <h1 id="render-hero-heading" className="render-page-h1">
               Generative UI without a second framework.
             </h1>
-            <p
-              style={{
-                fontFamily: tokens.typography.bodyLg.family,
-                fontSize: tokens.typography.bodyLg.size,
-                lineHeight: tokens.typography.bodyLg.line,
-                color: tokens.colors.textSecondary,
-                margin: '0 auto 32px',
-                maxWidth: 640,
-              }}
-            >
+            <p className="render-page-hero-subtitle">
               Server-emitted JSON specs render into Angular components you already own. Vercel json-render and Google A2UI both supported. Per-component fallback, readiness gate, no surprises.
             </p>
-            <div style={{ display: 'flex', justifyContent: 'center', gap: 12, flexWrap: 'wrap', marginBottom: 20 }}>
+            <div className="render-page-hero-buttons">
               <Button variant="primary" size="lg" href="/docs/render/getting-started/introduction">Get started</Button>
               <Button variant="secondary" size="lg" href="https://github.com/cacheplane/angular-agent-framework" target="_blank" rel="noopener noreferrer">View source</Button>
             </div>
-            <div style={{ display: 'flex', justifyContent: 'center', gap: 8, flexWrap: 'wrap' }}>
+            <div className="render-page-hero-pills">
               <Pill variant="accent">MIT</Pill>
               <Pill variant="neutral">Vercel json-render</Pill>
               <Pill variant="neutral">Google A2UI</Pill>
@@ -85,18 +63,8 @@ export default async function RenderPage() {
         cta={{ label: 'See @threadplane/render docs', href: '/docs/render/getting-started/introduction' }}
         visual={
           <BrowserFrame url="render · spec → component" elevation="md">
-            <div style={{ padding: 24, minHeight: 320, background: tokens.surfaces.surface }}>
-              <div style={{
-                background: tokens.surfaces.surfaceTinted,
-                border: `1px solid ${tokens.surfaces.border}`,
-                borderRadius: tokens.radius.md,
-                padding: 12,
-                marginBottom: 12,
-                fontFamily: tokens.typography.fontMono,
-                fontSize: 11,
-                color: tokens.colors.textSecondary,
-                whiteSpace: 'pre',
-              }}>
+            <div className="render-page-visual-panel">
+              <div className="render-page-spec-block">
 {`{
   "type": "card",
   "props": {
@@ -106,19 +74,14 @@ export default async function RenderPage() {
   }
 }`}
               </div>
-              <div style={{
-                background: tokens.surfaces.surface,
-                border: `1px solid ${tokens.surfaces.border}`,
-                borderRadius: tokens.radius.md,
-                padding: 16,
-              }}>
-                <div style={{ fontFamily: tokens.typography.fontMono, fontSize: 11, color: tokens.colors.accent, marginBottom: 8 }}>
+              <div className="render-page-rendered-card">
+                <div className="render-page-ai-label">
                   AI-rendered · YourCardComponent
                 </div>
-                <div style={{ fontFamily: tokens.typography.fontSerif, fontSize: 18, fontWeight: 700, color: tokens.colors.textPrimary, marginBottom: 4 }}>
+                <div className="render-page-card-title">
                   Q3 revenue: $4.2M
                 </div>
-                <div style={{ fontSize: 13, color: tokens.colors.textSecondary }}>+18% vs Q2</div>
+                <div className="render-page-card-value">+18% vs Q2</div>
               </div>
             </div>
           </BrowserFrame>
diff --git a/apps/website/src/app/solutions/[slug]/page.tsx b/apps/website/src/app/solutions/[slug]/page.tsx
index 790ad2a9d..f4bbdfa5b 100644
--- a/apps/website/src/app/solutions/[slug]/page.tsx
+++ b/apps/website/src/app/solutions/[slug]/page.tsx
@@ -1,6 +1,5 @@
 import { notFound } from 'next/navigation';
 import Link from 'next/link';
-import { tokens } from '@threadplane/design-tokens';
 import {
   getSolutionBySlug,
   getAllSolutionSlugs,
@@ -47,56 +46,19 @@ function PainPoints({ items, accent }: { items: SolutionPainPoint[]; accent: str
   return (
     <Section surface="canvas" ariaLabelledBy="problem-heading">
       <Container>
-        <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 48px' }}>
-          <Eyebrow style={{ color: accent, marginBottom: 12 }}>The problem</Eyebrow>
-          <h2
-            id="problem-heading"
-            style={{
-              fontFamily: tokens.typography.h2.family,
-              fontSize: tokens.typography.h2.size,
-              lineHeight: tokens.typography.h2.line,
-              fontWeight: 700,
-              color: tokens.colors.textPrimary,
-              margin: 0,
-              letterSpacing: '-0.015em',
-            }}
-          >
+        <div className="sol-page-section-header">
+          <Eyebrow style={{ color: accent }} className="sol-page-eyebrow-tight">The problem</Eyebrow>
+          <h2 id="problem-heading" className="sol-page-h2">
             Why this is hard today.
           </h2>
         </div>
-        <div
-          style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
-            gap: 16,
-            maxWidth: 1100,
-            margin: '0 auto',
-          }}
-        >
+        <div className="sol-page-grid-260">
           {items.map((p) => (
             <Card key={p.title} padding="lg">
-              <h3
-                style={{
-                  fontFamily: tokens.typography.h3.family,
-                  fontSize: 18,
-                  lineHeight: 1.3,
-                  fontWeight: 600,
-                  color: tokens.colors.textPrimary,
-                  margin: 0,
-                  marginBottom: 10,
-                }}
-              >
+              <h3 className="sol-page-card-h3">
                 {p.title}
               </h3>
-              <p
-                style={{
-                  fontFamily: tokens.typography.body.family,
-                  fontSize: tokens.typography.body.size,
-                  lineHeight: tokens.typography.body.line,
-                  color: tokens.colors.textSecondary,
-                  margin: 0,
-                }}
-              >
+              <p className="sol-page-card-body">
                 {p.description}
               </p>
             </Card>
@@ -119,90 +81,38 @@ function Architecture({
   return (
     <Section surface="tinted" ariaLabelledBy="arch-heading">
       <Container>
-        <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 48px' }}>
-          <Eyebrow style={{ color: accent, marginBottom: 12 }}>Architecture</Eyebrow>
-          <h2
-            id="arch-heading"
-            style={{
-              fontFamily: tokens.typography.h2.family,
-              fontSize: tokens.typography.h2.size,
-              lineHeight: tokens.typography.h2.line,
-              fontWeight: 700,
-              color: tokens.colors.textPrimary,
-              margin: 0,
-              marginBottom: 16,
-              letterSpacing: '-0.015em',
-            }}
-          >
+        <div className="sol-page-section-header">
+          <Eyebrow style={{ color: accent }} className="sol-page-eyebrow-tight">Architecture</Eyebrow>
+          <h2 id="arch-heading" className="sol-page-h2 sol-page-h2-spaced">
             How the three libraries compose.
           </h2>
-          <p
-            style={{
-              fontFamily: tokens.typography.bodyLg.family,
-              fontSize: tokens.typography.bodyLg.size,
-              lineHeight: tokens.typography.bodyLg.line,
-              color: tokens.colors.textSecondary,
-              margin: 0,
-            }}
-          >
+          <p className="sol-page-section-intro">
             {intro}
           </p>
         </div>
-        <div
-          style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
-            gap: 16,
-            maxWidth: 1100,
-            margin: '0 auto',
-          }}
-        >
+        <div className="sol-page-grid-280">
           {layers.map((l) => {
             const href = LIBRARY_HREF[l.library];
             const cardInner = (
-              <Card padding="lg" hoverable={!!href} style={{ height: '100%' }}>
-                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 12 }}>
-                  <h3
-                    style={{
-                      fontFamily: tokens.typography.fontSerif,
-                      fontSize: 22,
-                      fontWeight: 700,
-                      color: tokens.colors.textPrimary,
-                      margin: 0,
-                    }}
-                  >
+              <Card padding="lg" hoverable={!!href} className="sol-page-arch-card">
+                <div className="sol-page-arch-card-header">
+                  <h3 className="sol-page-arch-title">
                     {l.library}
                   </h3>
                   <Pill variant="accent">{l.pkg}</Pill>
                 </div>
-                <p
-                  style={{
-                    fontFamily: tokens.typography.body.family,
-                    fontSize: tokens.typography.body.size,
-                    lineHeight: tokens.typography.body.line,
-                    color: tokens.colors.textSecondary,
-                    margin: 0,
-                    marginBottom: href ? 16 : 0,
-                  }}
-                >
+                <p className={href ? 'sol-page-role sol-page-role-linked' : 'sol-page-role'}>
                   {l.role}
                 </p>
                 {href ? (
-                  <span
-                    style={{
-                      fontFamily: tokens.typography.fontSans,
-                      fontSize: 14,
-                      fontWeight: 600,
-                      color: tokens.colors.accent,
-                    }}
-                  >
+                  <span className="sol-page-arch-cta">
                     See {l.library} docs →
                   </span>
                 ) : null}
               </Card>
             );
             return href ? (
-              <Link key={l.library} href={href} style={{ textDecoration: 'none' }}>
+              <Link key={l.library} href={href} className="sol-page-link-plain">
                 {cardInner}
               </Link>
             ) : (
@@ -219,57 +129,19 @@ function Capabilities({ items, accent }: { items: ProofPoint[]; accent: string }
   return (
     <Section surface="canvas" ariaLabelledBy="capabilities-heading">
       <Container>
-        <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 48px' }}>
-          <Eyebrow style={{ color: accent, marginBottom: 12 }}>What you ship</Eyebrow>
-          <h2
-            id="capabilities-heading"
-            style={{
-              fontFamily: tokens.typography.h2.family,
-              fontSize: tokens.typography.h2.size,
-              lineHeight: tokens.typography.h2.line,
-              fontWeight: 700,
-              color: tokens.colors.textPrimary,
-              margin: 0,
-              letterSpacing: '-0.015em',
-            }}
-          >
+        <div className="sol-page-section-header">
+          <Eyebrow style={{ color: accent }} className="sol-page-eyebrow-tight">What you ship</Eyebrow>
+          <h2 id="capabilities-heading" className="sol-page-h2">
             Capabilities the framework delivers.
           </h2>
         </div>
-        <div
-          style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
-            gap: 16,
-            maxWidth: 1100,
-            margin: '0 auto',
-          }}
-        >
+        <div className="sol-page-grid-260">
           {items.map((p) => (
             <Card key={p.metric + p.label} padding="lg">
-              <div
-                style={{
-                  fontFamily: tokens.typography.fontSerif,
-                  fontStyle: 'italic',
-                  fontSize: 32,
-                  fontWeight: 700,
-                  color: accent,
-                  lineHeight: 1.1,
-                  margin: 0,
-                  marginBottom: 12,
-                }}
-              >
+              <div style={{ color: accent }} className="sol-page-metric">
                 {p.metric}
               </div>
-              <p
-                style={{
-                  fontFamily: tokens.typography.body.family,
-                  fontSize: tokens.typography.body.size,
-                  lineHeight: tokens.typography.body.line,
-                  color: tokens.colors.textSecondary,
-                  margin: 0,
-                }}
-              >
+              <p className="sol-page-card-body">
                 {p.label}
               </p>
             </Card>
@@ -290,37 +162,15 @@ export default async function SolutionPage({ params }: PageProps) {
       {/* Hero — solution-tinted accent */}
       <Section surface="canvas" ariaLabelledBy="solution-hero-heading">
         <Container>
-          <div style={{ maxWidth: 820, margin: '0 auto', textAlign: 'center' }}>
-            <Eyebrow style={{ color: solution.color, marginBottom: 16 }}>{solution.eyebrow}</Eyebrow>
-            <h1
-              id="solution-hero-heading"
-              style={{
-                fontFamily: tokens.typography.h1.family,
-                fontSize: tokens.typography.h1.size,
-                lineHeight: tokens.typography.h1.line,
-                fontWeight: 700,
-                color: tokens.colors.textPrimary,
-                margin: 0,
-                marginBottom: 24,
-                letterSpacing: '-0.02em',
-                whiteSpace: 'pre-line',
-              }}
-            >
+          <div className="sol-page-hero-inner">
+            <Eyebrow style={{ color: solution.color }} className="sol-page-eyebrow-spaced">{solution.eyebrow}</Eyebrow>
+            <h1 id="solution-hero-heading" className="sol-page-h1">
               {solution.title}
             </h1>
-            <p
-              style={{
-                fontFamily: tokens.typography.bodyLg.family,
-                fontSize: tokens.typography.bodyLg.size,
-                lineHeight: tokens.typography.bodyLg.line,
-                color: tokens.colors.textSecondary,
-                margin: '0 auto 32px',
-                maxWidth: 640,
-              }}
-            >
+            <p className="sol-page-hero-subtitle">
               {solution.subtitle}
             </p>
-            <div style={{ display: 'flex', justifyContent: 'center', gap: 12, flexWrap: 'wrap' }}>
+            <div className="sol-page-hero-buttons">
               <Button variant="primary" size="lg" href="#whitepaper-block">
                 Read the field report
               </Button>
diff --git a/apps/website/src/app/solutions/page.tsx b/apps/website/src/app/solutions/page.tsx
index a57572b67..1cc5a4afa 100644
--- a/apps/website/src/app/solutions/page.tsx
+++ b/apps/website/src/app/solutions/page.tsx
@@ -1,5 +1,4 @@
 import Link from 'next/link';
-import { tokens } from '@threadplane/design-tokens';
 import { Container } from '../../components/ui/Container';
 import { Section } from '../../components/ui/Section';
 import { Eyebrow } from '../../components/ui/Eyebrow';
@@ -23,33 +22,12 @@ export default function SolutionsIndexPage() {
       {/* Hero */}
       <Section surface="canvas" ariaLabelledBy="solutions-hero-heading">
         <Container>
-          <div style={{ maxWidth: 820, margin: '0 auto', textAlign: 'center' }}>
-            <Eyebrow tone="accent" style={{ marginBottom: 16 }}>Solutions</Eyebrow>
-            <h1
-              id="solutions-hero-heading"
-              style={{
-                fontFamily: tokens.typography.h1.family,
-                fontSize: tokens.typography.h1.size,
-                lineHeight: tokens.typography.h1.line,
-                fontWeight: 700,
-                color: tokens.colors.textPrimary,
-                margin: 0,
-                marginBottom: 24,
-                letterSpacing: '-0.02em',
-              }}
-            >
+          <div className="sol-index-hero-inner">
+            <Eyebrow tone="accent" className="sol-index-eyebrow-spaced">Solutions</Eyebrow>
+            <h1 id="solutions-hero-heading" className="sol-index-h1">
               AI agents for how enterprises actually work.
             </h1>
-            <p
-              style={{
-                fontFamily: tokens.typography.bodyLg.family,
-                fontSize: tokens.typography.bodyLg.size,
-                lineHeight: tokens.typography.bodyLg.line,
-                color: tokens.colors.textSecondary,
-                margin: '0 auto',
-                maxWidth: 640,
-              }}
-            >
+            <p className="sol-index-hero-body">
               Streaming, generative UI, and human-in-the-loop patterns that enterprise use cases demand — wired into Angular from day one.
             </p>
           </div>
@@ -59,78 +37,31 @@ export default function SolutionsIndexPage() {
       {/* Solutions grid */}
       <Section surface="canvas" ariaLabelledBy="solutions-grid-heading">
         <Container>
-          <div style={{ textAlign: 'center', marginBottom: 48 }}>
-            <Eyebrow style={{ marginBottom: 12 }}>By use case</Eyebrow>
-            <h2
-              id="solutions-grid-heading"
-              style={{
-                fontFamily: tokens.typography.h2.family,
-                fontSize: tokens.typography.h2.size,
-                lineHeight: tokens.typography.h2.line,
-                fontWeight: 700,
-                color: tokens.colors.textPrimary,
-                margin: 0,
-                letterSpacing: '-0.015em',
-              }}
-            >
+          <div className="sol-index-grid-header">
+            <Eyebrow className="sol-index-eyebrow-tight">By use case</Eyebrow>
+            <h2 id="solutions-grid-heading" className="sol-index-h2">
               Where agents earn their keep.
             </h2>
           </div>
-          <div
-            style={{
-              display: 'grid',
-              gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
-              gap: 16,
-              maxWidth: 1100,
-              margin: '0 auto',
-            }}
-          >
+          <div className="sol-index-grid">
             {SOLUTIONS.map((s) => (
-              <Link key={s.slug} href={`/solutions/${s.slug}`} style={{ textDecoration: 'none' }}>
-                <Card padding="lg" hoverable style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-                  <Eyebrow tone="accent" style={{ marginBottom: 12 }}>{s.eyebrow}</Eyebrow>
-                  <h3
-                    style={{
-                      fontFamily: tokens.typography.h3.family,
-                      fontSize: 22,
-                      lineHeight: 1.25,
-                      fontWeight: 600,
-                      color: tokens.colors.textPrimary,
-                      margin: 0,
-                      marginBottom: 12,
-                      whiteSpace: 'pre-line',
-                    }}
-                  >
+              <Link key={s.slug} href={`/solutions/${s.slug}`} className="sol-index-card-link">
+                <Card padding="lg" hoverable className="sol-index-card">
+                  <Eyebrow tone="accent" className="sol-index-eyebrow-tight">{s.eyebrow}</Eyebrow>
+                  <h3 className="sol-index-card-title">
                     {s.title.replace('\n', ' ')}
                   </h3>
-                  <p
-                    style={{
-                      fontFamily: tokens.typography.body.family,
-                      fontSize: tokens.typography.body.size,
-                      lineHeight: tokens.typography.body.line,
-                      color: tokens.colors.textSecondary,
-                      margin: 0,
-                      marginBottom: 16,
-                      flex: 1,
-                    }}
-                  >
+                  <p className="sol-index-card-subtitle">
                     {s.subtitle}
                   </p>
-                  <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 16 }}>
+                  <div className="sol-index-pills-row">
                     {s.proofPoints.slice(0, 2).map((p) => (
                       <Pill key={p.label} variant="neutral">
                         {p.metric} {p.label}
                       </Pill>
                     ))}
                   </div>
-                  <span
-                    style={{
-                      fontFamily: tokens.typography.fontSans,
-                      fontSize: 14,
-                      fontWeight: 600,
-                      color: tokens.colors.accent,
-                    }}
-                  >
+                  <span className="sol-index-cta">
                     See the solution →
                   </span>
                 </Card>
diff --git a/apps/website/src/app/thanks/page.tsx b/apps/website/src/app/thanks/page.tsx
index fdcb58c4f..b8d76328c 100644
--- a/apps/website/src/app/thanks/page.tsx
+++ b/apps/website/src/app/thanks/page.tsx
@@ -1,5 +1,4 @@
 // SPDX-License-Identifier: MIT
-import { tokens } from '@threadplane/design-tokens';
 import { Container } from '../../components/ui/Container';
 import { Section } from '../../components/ui/Section';
 import { Eyebrow } from '../../components/ui/Eyebrow';
@@ -26,46 +25,18 @@ export default async function ThanksPage({ searchParams }: PageProps) {
   return (
     <Section surface="canvas" ariaLabelledBy="thanks-heading">
       <Container>
-        <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto' }}>
-          <Eyebrow tone="accent" style={{ marginBottom: 16 }}>Payment received</Eyebrow>
-          <h1
-            id="thanks-heading"
-            style={{
-              fontFamily: tokens.typography.h1.family,
-              fontWeight: 700,
-              fontSize: tokens.typography.h1.size,
-              lineHeight: tokens.typography.h1.line,
-              color: tokens.colors.textPrimary,
-              margin: 0,
-              marginBottom: 16,
-              letterSpacing: '-0.02em',
-            }}
-          >
+        <div className="thanks-inner">
+          <Eyebrow tone="accent" className="thanks-eyebrow-spaced">Payment received</Eyebrow>
+          <h1 id="thanks-heading" className="thanks-h1">
             Thanks for your purchase.
           </h1>
-          <p
-            style={{
-              fontFamily: tokens.typography.bodyLg.family,
-              fontSize: tokens.typography.bodyLg.size,
-              lineHeight: tokens.typography.bodyLg.line,
-              color: tokens.colors.textSecondary,
-              margin: '0 auto 24px',
-            }}
-          >
-            Your <code style={{ fontFamily: tokens.typography.fontMono }}>@threadplane/chat</code> license token will be emailed to the address on your receipt within a few minutes. Paste it into your app's <code style={{ fontFamily: tokens.typography.fontMono }}>provideChat()</code> config to activate.
+          <p className="thanks-body">
+            Your <code className="thanks-code">@threadplane/chat</code> license token will be emailed to the address on your receipt within a few minutes. Paste it into your app's <code className="thanks-code">provideChat()</code> config to activate.
           </p>
-          <p
-            style={{
-              fontFamily: tokens.typography.body.family,
-              fontSize: 13,
-              lineHeight: 1.6,
-              color: tokens.colors.textMuted,
-              margin: '0 auto 32px',
-            }}
-          >
+          <p className="thanks-note">
             If you don't see the email within 10 minutes, check spam or contact us.
           </p>
-          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
+          <div className="thanks-buttons">
             <Button variant="primary" size="md" href="/docs/licensing">
               Installation & licensing
             </Button>
diff --git a/apps/website/src/styles/pages.css b/apps/website/src/styles/pages.css
index df170a587..d988f24c7 100644
--- a/apps/website/src/styles/pages.css
+++ b/apps/website/src/styles/pages.css
@@ -369,3 +369,1040 @@
 .docs-shell-body {
   background: var(--color-surface);
 }
+
+/* About page — app/about/page.tsx */
+.about-section-inner {
+  max-width: 720px;
+}
+.about-eyebrow-spaced {
+  margin-bottom: 16px;
+}
+.about-h1 {
+  font-family: var(--font-garamond);
+  font-size: var(--text-h1);
+  line-height: var(--text-h1--line-height);
+  font-weight: 700;
+  color: var(--color-text-primary);
+  margin: 0;
+  margin-bottom: 16px;
+  letter-spacing: -0.02em;
+}
+.about-body {
+  font-family: var(--font-inter);
+  font-size: var(--text-body-lg);
+  line-height: var(--text-body-lg--line-height);
+  color: var(--color-text-secondary);
+  margin: 0;
+  margin-bottom: 16px;
+  max-width: 60ch;
+}
+.about-body-last {
+  margin-bottom: 0;
+}
+.about-h2 {
+  font-family: var(--font-garamond);
+  font-size: var(--text-h2);
+  color: var(--color-text-primary);
+  margin: 0;
+  margin-bottom: 12px;
+}
+.about-h2-spaced {
+  margin-top: 32px;
+}
+.about-link {
+  color: var(--color-accent);
+}
+
+/* Solutions index page — app/solutions/page.tsx */
+.sol-index-hero-inner {
+  max-width: 820px;
+  margin: 0 auto;
+  text-align: center;
+}
+.sol-index-eyebrow-spaced {
+  margin-bottom: 16px;
+}
+.sol-index-h1 {
+  font-family: var(--font-garamond);
+  font-size: var(--text-h1);
+  line-height: var(--text-h1--line-height);
+  font-weight: 700;
+  color: var(--color-text-primary);
+  margin: 0;
+  margin-bottom: 24px;
+  letter-spacing: -0.02em;
+}
+.sol-index-hero-body {
+  font-family: var(--font-inter);
+  font-size: var(--text-body-lg);
+  line-height: var(--text-body-lg--line-height);
+  color: var(--color-text-secondary);
+  margin: 0 auto;
+  max-width: 640px;
+}
+.sol-index-grid-header {
+  text-align: center;
+  margin-bottom: 48px;
+}
+.sol-index-eyebrow-tight {
+  margin-bottom: 12px;
+}
+.sol-index-h2 {
+  font-family: var(--font-garamond);
+  font-size: var(--text-h2);
+  line-height: var(--text-h2--line-height);
+  font-weight: 700;
+  color: var(--color-text-primary);
+  margin: 0;
+  letter-spacing: -0.015em;
+}
+.sol-index-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 16px;
+  max-width: 1100px;
+  margin: 0 auto;
+}
+.sol-index-card-link {
+  text-decoration: none;
+}
+.sol-index-card {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.sol-index-card-title {
+  font-family: var(--font-inter);
+  font-size: 22px;
+  line-height: 1.25;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin: 0;
+  margin-bottom: 12px;
+  white-space: pre-line;
+}
+.sol-index-card-subtitle {
+  font-family: var(--font-inter);
+  font-size: var(--text-body);
+  line-height: var(--text-body--line-height);
+  color: var(--color-text-secondary);
+  margin: 0;
+  margin-bottom: 16px;
+  flex: 1;
+}
+.sol-index-pills-row {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 16px;
+}
+.sol-index-cta {
+  font-family: Inter, system-ui, sans-serif;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-accent);
+}
+
+/* Solution detail page — app/solutions/[slug]/page.tsx */
+.sol-page-section-header {
+  text-align: center;
+  max-width: 720px;
+  margin: 0 auto 48px;
+}
+.sol-page-eyebrow-tight {
+  margin-bottom: 12px;
+}
+.sol-page-h2 {
+  font-family: var(--font-garamond);
+  font-size: var(--text-h2);
+  line-height: var(--text-h2--line-height);
+  font-weight: 700;
+  color: var(--color-text-primary);
+  margin: 0;
+  letter-spacing: -0.015em;
+}
+.sol-page-h2-spaced {
+  margin-bottom: 16px;
+}
+.sol-page-section-intro {
+  font-family: var(--font-inter);
+  font-size: var(--text-body-lg);
+  line-height: var(--text-body-lg--line-height);
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+.sol-page-grid-260 {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 16px;
+  max-width: 1100px;
+  margin: 0 auto;
+}
+.sol-page-grid-280 {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 16px;
+  max-width: 1100px;
+  margin: 0 auto;
+}
+.sol-page-card-h3 {
+  font-family: var(--font-inter);
+  font-size: 18px;
+  line-height: 1.3;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin: 0;
+  margin-bottom: 10px;
+}
+.sol-page-card-body {
+  font-family: var(--font-inter);
+  font-size: var(--text-body);
+  line-height: var(--text-body--line-height);
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+.sol-page-arch-card {
+  height: 100%;
+}
+.sol-page-arch-card-header {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+.sol-page-arch-title {
+  font-family: "EB Garamond", Georgia, serif;
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--color-text-primary);
+  margin: 0;
+}
+.sol-page-role {
+  font-family: var(--font-inter);
+  font-size: var(--text-body);
+  line-height: var(--text-body--line-height);
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+.sol-page-role-linked {
+  margin-bottom: 16px;
+}
+.sol-page-arch-cta {
+  font-family: Inter, system-ui, sans-serif;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-accent);
+}
+.sol-page-link-plain {
+  text-decoration: none;
+}
+.sol-page-metric {
+  font-family: "EB Garamond", Georgia, serif;
+  font-style: italic;
+  font-size: 32px;
+  font-weight: 700;
+  line-height: 1.1;
+  margin: 0;
+  margin-bottom: 12px;
+}
+.sol-page-hero-inner {
+  max-width: 820px;
+  margin: 0 auto;
+  text-align: center;
+}
+.sol-page-eyebrow-spaced {
+  margin-bottom: 16px;
+}
+.sol-page-h1 {
+  font-family: var(--font-garamond);
+  font-size: var(--text-h1);
+  line-height: var(--text-h1--line-height);
+  font-weight: 700;
+  color: var(--color-text-primary);
+  margin: 0;
+  margin-bottom: 24px;
+  letter-spacing: -0.02em;
+  white-space: pre-line;
+}
+.sol-page-hero-subtitle {
+  font-family: var(--font-inter);
+  font-size: var(--text-body-lg);
+  line-height: var(--text-body-lg--line-height);
+  color: var(--color-text-secondary);
+  margin: 0 auto 32px;
+  max-width: 640px;
+}
+.sol-page-hero-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+/* Pilot-to-Prod page — app/pilot-to-prod/page.tsx */
+.pilot-hero-inner {
+  max-width: 880px;
+  margin: 0 auto;
+  text-align: center;
+}
+.pilot-eyebrow-spaced {
+  margin-bottom: 16px;
+}
+.pilot-h1 {
+  font-family: var(--font-garamond);
+  font-size: var(--text-h1);
+  line-height: var(--text-h1--line-height);
+  font-weight: 700;
+  color: var(--color-text-primary);
+  margin: 0;
+  margin-bottom: 24px;
+  letter-spacing: -0.02em;
+}
+.pilot-hero-subtitle {
+  font-family: var(--font-inter);
+  font-size: var(--text-body-lg);
+  line-height: var(--text-body-lg--line-height);
+  color: var(--color-text-secondary);
+  margin: 0 auto 32px;
+  max-width: 640px;
+}
+.pilot-hero-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+}
+.pilot-hero-pills {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.pilot-visual-panel {
+  padding: 28px;
+  min-height: 320px;
+  background: var(--color-surface);
+}
+.pilot-eyebrow-tight {
+  margin-bottom: 12px;
+}
+.pilot-roadmap-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.pilot-roadmap-item {
+  display: flex;
+  gap: 12px;
+  align-items: baseline;
+}
+.pilot-roadmap-week {
+  font-family: "JetBrains Mono", monospace;
+  font-size: 11px;
+  color: var(--color-accent);
+  font-weight: 700;
+  flex: 0 0 40px;
+}
+.pilot-roadmap-desc {
+  font-size: 14px;
+  color: var(--color-text-secondary);
+}
+.pilot-screenshot {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+.pilot-checklist-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.pilot-checklist-item {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  font-size: 14px;
+  color: var(--color-text-secondary);
+}
+.pilot-checklist-badge {
+  width: 18px;
+  height: 18px;
+  border-radius: var(--radius-full);
+  background: var(--color-accent);
+  color: var(--color-text-inverted);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 700;
+}
+.pilot-section-header {
+  max-width: 720px;
+  margin: 0 auto;
+  text-align: center;
+  margin-bottom: 48px;
+}
+.pilot-h2 {
+  font-family: var(--font-garamond);
+  font-size: var(--text-h2);
+  line-height: var(--text-h2--line-height);
+  font-weight: 700;
+  color: var(--color-text-primary);
+  margin: 0;
+  letter-spacing: -0.015em;
+}
+.pilot-h2-spaced {
+  margin-bottom: 16px;
+}
+.pilot-outcomes-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 16px;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+.pilot-outcome-h3 {
+  font-family: var(--font-inter);
+  font-size: 17px;
+  line-height: 1.3;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin: 0;
+  margin-bottom: 8px;
+}
+.pilot-outcome-body {
+  font-family: var(--font-inter);
+  font-size: 14px;
+  line-height: var(--text-body--line-height);
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+.pilot-contact-inner {
+  max-width: 720px;
+  margin: 0 auto;
+  text-align: center;
+}
+.pilot-contact-body {
+  font-family: var(--font-inter);
+  font-size: var(--text-body-lg);
+  line-height: var(--text-body-lg--line-height);
+  color: var(--color-text-secondary);
+  margin: 0 0 32px 0;
+}
+
+/* Render landing page — app/render/page.tsx */
+.render-page-hero-inner {
+  max-width: 820px;
+  margin: 0 auto;
+  text-align: center;
+}
+.render-page-eyebrow-spaced {
+  margin-bottom: 16px;
+}
+.render-page-h1 {
+  font-family: var(--font-garamond);
+  font-size: var(--text-h1);
+  line-height: var(--text-h1--line-height);
+  font-weight: 700;
+  color: var(--color-text-primary);
+  margin: 0;
+  margin-bottom: 24px;
+  letter-spacing: -0.02em;
+}
+.render-page-hero-subtitle {
+  font-family: var(--font-inter);
+  font-size: var(--text-body-lg);
+  line-height: var(--text-body-lg--line-height);
+  color: var(--color-text-secondary);
+  margin: 0 auto 32px;
+  max-width: 640px;
+}
+.render-page-hero-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+}
+.render-page-hero-pills {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.render-page-visual-panel {
+  padding: 24px;
+  min-height: 320px;
+  background: var(--color-surface);
+}
+.render-page-spec-block {
+  background: var(--color-surface-tinted);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 12px;
+  margin-bottom: 12px;
+  font-family: "JetBrains Mono", monospace;
+  font-size: 11px;
+  color: var(--color-text-secondary);
+  white-space: pre;
+}
+.render-page-rendered-card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 16px;
+}
+.render-page-ai-label {
+  font-family: "JetBrains Mono", monospace;
+  font-size: 11px;
+  color: var(--color-accent);
+  margin-bottom: 8px;
+}
+.render-page-card-title {
+  font-family: "EB Garamond", Georgia, serif;
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--color-text-primary);
+  margin-bottom: 4px;
+}
+.render-page-card-value {
+  font-size: 13px;
+  color: var(--color-text-secondary);
+}
+
+/* Chat landing page — app/chat/page.tsx */
+.chat-page-hero-inner {
+  max-width: 820px;
+  margin: 0 auto;
+  text-align: center;
+}
+.chat-page-eyebrow-spaced {
+  margin-bottom: 16px;
+}
+.chat-page-h1 {
+  font-family: var(--font-garamond);
+  font-size: var(--text-h1);
+  line-height: var(--text-h1--line-height);
+  font-weight: 700;
+  color: var(--color-text-primary);
+  margin: 0;
+  margin-bottom: 24px;
+  letter-spacing: -0.02em;
+}
+.chat-page-hero-subtitle {
+  font-family: var(--font-inter);
+  font-size: var(--text-body-lg);
+  line-height: var(--text-body-lg--line-height);
+  color: var(--color-text-secondary);
+  margin: 0 auto 32px;
+  max-width: 640px;
+}
+.chat-page-hero-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+}
+.chat-page-hero-pills {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.chat-page-visual-panel {
+  padding: 24px;
+  min-height: 320px;
+  background: linear-gradient(180deg, #fff, #f8fafc);
+}
+.chat-page-visual-pills-row {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+.chat-page-tool-label {
+  font-family: "JetBrains Mono", monospace;
+  font-size: 11px;
+  color: var(--color-text-muted);
+  margin-bottom: 8px;
+}
+.chat-page-result-block {
+  background: var(--color-surface-tinted);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 12px;
+  font-family: "JetBrains Mono", monospace;
+  font-size: 12px;
+  color: var(--color-text-primary);
+}
+.chat-page-replay-footer {
+  margin-top: 16px;
+  padding-top: 12px;
+  border-top: 1px solid var(--color-border);
+  font-family: "JetBrains Mono", monospace;
+  font-size: 11px;
+  color: var(--color-text-secondary);
+}
+
+/* AG-UI landing page — app/ag-ui/page.tsx */
+.ag-ui-page-hero-inner {
+  max-width: 820px;
+  margin: 0 auto;
+  text-align: center;
+}
+.ag-ui-page-eyebrow-spaced {
+  margin-bottom: 16px;
+}
+.ag-ui-page-h1 {
+  font-family: var(--font-garamond);
+  font-size: var(--text-h1);
+  line-height: var(--text-h1--line-height);
+  font-weight: 700;
+  color: var(--color-text-primary);
+  margin: 0;
+  margin-bottom: 24px;
+  letter-spacing: -0.02em;
+}
+.ag-ui-page-hero-subtitle {
+  font-family: var(--font-inter);
+  font-size: var(--text-body-lg);
+  line-height: var(--text-body-lg--line-height);
+  color: var(--color-text-secondary);
+  margin: 0 auto 32px;
+  max-width: 680px;
+}
+.ag-ui-page-hero-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+}
+.ag-ui-page-adapter-note {
+  font-size: 13px;
+  color: var(--color-text-muted);
+  margin-bottom: 20px;
+}
+.ag-ui-page-adapter-link {
+  color: var(--color-accent);
+}
+.ag-ui-page-hero-pills {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 24px;
+}
+.ag-ui-page-langgraph-note {
+  font-family: Inter, system-ui, sans-serif;
+  font-size: 13px;
+  color: var(--color-text-muted);
+  margin: 0 auto;
+  max-width: 520px;
+}
+.ag-ui-page-langgraph-link {
+  color: var(--color-accent);
+  text-decoration: none;
+  font-weight: 600;
+}
+.ag-ui-page-code-pre {
+  margin: 0;
+  padding: 20px 22px;
+  background: #1a1b26;
+  color: #a9b1d6;
+  font-family: "JetBrains Mono", monospace;
+  font-size: 13px;
+  line-height: 1.6;
+  min-height: 320px;
+  overflow: auto;
+}
+
+/* LangGraph landing page — app/langgraph/page.tsx */
+.langgraph-page-hero-inner {
+  max-width: 820px;
+  margin: 0 auto;
+  text-align: center;
+}
+.langgraph-page-eyebrow-spaced {
+  margin-bottom: 16px;
+}
+.langgraph-page-h1 {
+  font-family: var(--font-garamond);
+  font-size: var(--text-h1);
+  line-height: var(--text-h1--line-height);
+  font-weight: 700;
+  color: var(--color-text-primary);
+  margin: 0;
+  margin-bottom: 24px;
+  letter-spacing: -0.02em;
+}
+.langgraph-page-hero-subtitle {
+  font-family: var(--font-inter);
+  font-size: var(--text-body-lg);
+  line-height: var(--text-body-lg--line-height);
+  color: var(--color-text-secondary);
+  margin: 0 auto 32px;
+  max-width: 640px;
+}
+.langgraph-page-hero-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+}
+.langgraph-page-adapter-note {
+  font-size: 13px;
+  color: var(--color-text-muted);
+  margin-bottom: 20px;
+}
+.langgraph-page-adapter-link {
+  color: var(--color-accent);
+}
+.langgraph-page-hero-pills {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.langgraph-page-code-pre {
+  margin: 0;
+  padding: 20px 22px;
+  background: #1a1b26;
+  color: #a9b1d6;
+  font-family: "JetBrains Mono", monospace;
+  font-size: 13px;
+  line-height: 1.6;
+  min-height: 320px;
+  overflow: auto;
+}
+
+/* Blog index page — app/blog/page.tsx */
+.blog-index-page {
+  padding-top: 80px;
+  background: var(--color-canvas);
+  min-height: 100vh;
+}
+.blog-index-inner {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 35px 24px 64px;
+}
+.blog-index-header {
+  margin-bottom: 32px;
+}
+.blog-index-eyebrow-spaced {
+  margin-bottom: 16px;
+}
+.blog-index-h1 {
+  font-family: var(--font-garamond);
+  font-size: var(--text-h1);
+  line-height: var(--text-h1--line-height);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--color-text-primary);
+  margin: 0 0 16px;
+}
+.blog-index-subtitle {
+  font-family: var(--font-inter);
+  font-size: var(--text-body-lg);
+  line-height: var(--text-body-lg--line-height);
+  color: var(--color-text-secondary);
+  margin: 0;
+  max-width: 60ch;
+}
+.blog-index-empty {
+  padding: 48px;
+  text-align: center;
+  background: var(--color-surface-tinted);
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+}
+.blog-index-empty-text {
+  font-family: var(--font-inter);
+  font-size: var(--text-body-lg);
+  line-height: var(--text-body-lg--line-height);
+  color: var(--color-text-secondary);
+  margin: 0 0 16px;
+}
+.blog-index-empty-link {
+  color: var(--color-accent);
+  text-decoration: underline;
+  font-weight: 500;
+}
+.blog-index-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 16px;
+}
+
+/* Blog post page — app/blog/[slug]/page.tsx */
+.blog-post-page {
+  padding-top: 80px;
+  background: var(--color-canvas);
+  min-height: 100vh;
+}
+.blog-post-layout {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  max-width: 1280px;
+  margin: 0 auto;
+  gap: 0;
+}
+.blog-post-article {
+  width: 100%;
+  max-width: 768px;
+  padding: 64px 24px;
+  flex-shrink: 0;
+}
+.blog-post-header {
+  margin-bottom: 48px;
+}
+.blog-post-eyebrow-spaced {
+  margin-bottom: 24px;
+}
+.blog-post-h1 {
+  font-family: var(--font-garamond);
+  font-size: var(--text-h1);
+  line-height: var(--text-h1--line-height);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--color-text-primary);
+  margin: 0 0 24px;
+}
+.blog-post-subtitle {
+  font-family: var(--font-inter);
+  font-size: var(--text-body-lg);
+  line-height: var(--text-body-lg--line-height);
+  color: var(--color-text-secondary);
+  margin: 0 0 32px;
+  max-width: 60ch;
+}
+.blog-post-byline-row {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+}
+
+/* Thanks page — app/thanks/page.tsx */
+.thanks-inner {
+  text-align: center;
+  max-width: 640px;
+  margin: 0 auto;
+}
+.thanks-eyebrow-spaced {
+  margin-bottom: 16px;
+}
+.thanks-h1 {
+  font-family: var(--font-garamond);
+  font-weight: 700;
+  font-size: var(--text-h1);
+  line-height: var(--text-h1--line-height);
+  color: var(--color-text-primary);
+  margin: 0;
+  margin-bottom: 16px;
+  letter-spacing: -0.02em;
+}
+.thanks-body {
+  font-family: var(--font-inter);
+  font-size: var(--text-body-lg);
+  line-height: var(--text-body-lg--line-height);
+  color: var(--color-text-secondary);
+  margin: 0 auto 24px;
+}
+.thanks-code {
+  font-family: "JetBrains Mono", monospace;
+}
+.thanks-note {
+  font-family: var(--font-inter);
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--color-text-muted);
+  margin: 0 auto 32px;
+}
+.thanks-buttons {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+/* Error boundary page — app/error.tsx */
+.error-page-inner {
+  max-width: 640px;
+  margin: 0 auto;
+  text-align: center;
+}
+.error-page-eyebrow-spaced {
+  margin-bottom: 16px;
+}
+.error-page-h1 {
+  font-family: var(--font-garamond);
+  font-size: var(--text-h1);
+  line-height: var(--text-h1--line-height);
+  font-weight: 700;
+  color: var(--color-text-primary);
+  margin: 0;
+  margin-bottom: 16px;
+  letter-spacing: -0.02em;
+}
+.error-page-body {
+  font-family: var(--font-inter);
+  font-size: var(--text-body-lg);
+  line-height: var(--text-body-lg--line-height);
+  color: var(--color-text-secondary);
+  margin: 0 auto 12px;
+  max-width: 480px;
+}
+.error-page-digest {
+  font-family: "JetBrains Mono", monospace;
+  font-size: 12px;
+  color: var(--color-text-muted);
+  margin: 0 0 28px;
+}
+.error-page-spacer {
+  height: 28px;
+}
+.error-page-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+/* Pricing page — app/pricing/page.tsx */
+.pricing-page-hero-inner {
+  text-align: center;
+  max-width: 760px;
+  margin: 0 auto;
+}
+.pricing-page-eyebrow-spaced {
+  margin-bottom: 16px;
+}
+.pricing-page-h1 {
+  font-family: var(--font-garamond);
+  font-weight: 700;
+  font-size: var(--text-h1);
+  line-height: var(--text-h1--line-height);
+  color: var(--color-text-primary);
+  margin: 0;
+  letter-spacing: -0.02em;
+}
+.pricing-page-eyebrow-tight {
+  margin-bottom: 12px;
+}
+.pricing-page-h2 {
+  font-family: var(--font-garamond);
+  font-size: var(--text-h2);
+  margin: 0;
+  margin-bottom: 16px;
+  color: var(--color-text-primary);
+}
+.pricing-page-compat-body {
+  margin: 0;
+  margin-bottom: 24px;
+  color: var(--color-text-secondary);
+  max-width: 60ch;
+}
+
+/* Home page — app/page.tsx */
+.home-code-frame {
+  border-radius: 14px;
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+}
+.home-live-frame {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 10;
+  background: #15161f;
+}
+.home-live-iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  display: block;
+}
+.home-code {
+  font-family: "JetBrains Mono", monospace;
+}
+
+/* Contact page — app/contact/page.tsx */
+.contact-page-inner {
+  max-width: 720px;
+}
+.contact-page-eyebrow-spaced {
+  margin-bottom: 16px;
+}
+.contact-page-h1 {
+  font-family: var(--font-garamond);
+  font-size: var(--text-h1);
+  line-height: var(--text-h1--line-height);
+  font-weight: 700;
+  color: var(--color-text-primary);
+  margin: 0;
+  margin-bottom: 16px;
+  letter-spacing: -0.02em;
+}
+.contact-page-subtitle {
+  font-family: var(--font-inter);
+  font-size: var(--text-body-lg);
+  line-height: var(--text-body-lg--line-height);
+  color: var(--color-text-secondary);
+  margin: 0;
+  margin-bottom: 24px;
+  max-width: 60ch;
+}
+.contact-page-sla-wrap {
+  margin-bottom: 24px;
+}
+.contact-page-links-row {
+  margin-top: 32px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* Not-found page — app/not-found.tsx */
+.nf-inner {
+  max-width: 640px;
+  margin: 0 auto;
+  text-align: center;
+}
+.nf-eyebrow-spaced {
+  margin-bottom: 16px;
+}
+.nf-h1 {
+  font-family: var(--font-garamond);
+  font-size: var(--text-h1);
+  line-height: var(--text-h1--line-height);
+  font-weight: 700;
+  color: var(--color-text-primary);
+  margin: 0;
+  margin-bottom: 16px;
+  letter-spacing: -0.02em;
+}
+.nf-body {
+  font-family: var(--font-inter);
+  font-size: var(--text-body-lg);
+  line-height: var(--text-body-lg--line-height);
+  color: var(--color-text-secondary);
+  margin: 0 auto 32px;
+  max-width: 480px;
+}
+.nf-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}