From 7409aec953ad5591916c0e4676e6cc1d8d8323b4 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Sat, 29 Aug 2026 14:35:45 -0700
Subject: [PATCH 1/3] refactor(website): move hero and feature landing blocks
 to landing.css

---
 .../src/components/landing/Differentiator.tsx | 123 +----
 .../src/components/landing/FeatureBlock.tsx   | 139 +-----
 apps/website/src/components/landing/Hero.tsx  | 114 +----
 .../components/landing/WhitePaperBlock.tsx    | 169 +------
 apps/website/src/styles/landing.css           | 459 ++++++++++++++++++
 5 files changed, 520 insertions(+), 484 deletions(-)

diff --git a/apps/website/src/components/landing/Differentiator.tsx b/apps/website/src/components/landing/Differentiator.tsx
index 4404e7267..fc5c12b13 100644
--- a/apps/website/src/components/landing/Differentiator.tsx
+++ b/apps/website/src/components/landing/Differentiator.tsx
@@ -77,7 +77,7 @@ function CheckIcon() {
       strokeLinecap="round"
       strokeLinejoin="round"
       aria-hidden="true"
-      style={{ flexShrink: 0, marginTop: 4 }}
+      className="differentiator-check-icon"
     >
       <path d="M3 8.5l3.5 3.5L13 5" />
     </svg>
@@ -89,107 +89,33 @@ export function Differentiator() {
     <Section
       surface="canvas"
       ariaLabelledBy="differentiator-heading"
-      style={{ paddingTop: 72 }}
+      className="differentiator-section"
     >
       <Container>
-        <div style={{ maxWidth: 1020, margin: '0 auto 44px', textAlign: 'center' }}>
-          <Eyebrow tone="accent" style={{ marginBottom: 16 }}>Why this exists</Eyebrow>
-          <h2
-            id="differentiator-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: 20,
-              letterSpacing: '-0.015em',
-            }}
-          >
+        <div className="differentiator-intro">
+          <Eyebrow tone="accent" className="differentiator-eyebrow">Why this exists</Eyebrow>
+          <h2 id="differentiator-heading" className="differentiator-heading">
             Everything an Angular agent needs once the demo works.
           </h2>
-          <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: 760,
-            }}
-          >
+          <p className="differentiator-subhead">
             A streaming chat tutorial takes an hour. Shipping a real agent — durable, interruptible, observable, on your design system — takes most teams six months. Threadplane gives the Angular surface that the rest of the stack assumes you&apos;ve already built.
           </p>
         </div>
 
-        <ul
-          style={{
-            listStyle: 'none',
-            padding: 0,
-            margin: '0 auto',
-            maxWidth: 980,
-            borderTop: `1px solid ${tokens.surfaces.border}`,
-          }}
-        >
+        <ul className="differentiator-list">
           {PRODUCTION_ROWS.map((row) => (
-            <li
-              key={row.need}
-              className="why-row"
-              style={{
-                display: 'flex',
-                alignItems: 'flex-start',
-                gap: 16,
-                padding: '18px 8px',
-                borderBottom: `1px solid ${tokens.surfaces.border}`,
-              }}
-            >
+            <li key={row.need} className="why-row">
               <CheckIcon />
-              <div
-                className="why-row__body"
-                style={{
-                  flex: 1,
-                  display: 'flex',
-                  gap: 16,
-                  alignItems: 'baseline',
-                  flexWrap: 'wrap',
-                }}
-              >
-                <div style={{ flex: '1 1 200px', minWidth: 0 }}>
-                  <span
-                    style={{
-                      fontFamily: tokens.typography.body.family,
-                      fontSize: tokens.typography.body.size,
-                      lineHeight: tokens.typography.body.line,
-                      fontWeight: 600,
-                      color: tokens.colors.textPrimary,
-                      marginRight: 8,
-                    }}
-                  >
+              <div className="why-row__body">
+                <div className="why-row__text">
+                  <span className="why-row__need">
                     {row.need}
                   </span>
-                  <span
-                    style={{
-                      fontFamily: tokens.typography.body.family,
-                      fontSize: tokens.typography.body.size,
-                      lineHeight: tokens.typography.body.line,
-                      color: tokens.colors.textSecondary,
-                    }}
-                  >
+                  <span className="why-row__description">
                     {row.description}
                   </span>
                 </div>
-                <code
-                  style={{
-                    fontFamily: tokens.typography.fontMono,
-                    fontSize: 13,
-                    color: tokens.colors.textMuted,
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    maxWidth: '100%',
-                  }}
-                >
+                <code className="why-row__primitive">
                   {row.primitive}
                 </code>
               </div>
@@ -197,17 +123,7 @@ export function Differentiator() {
           ))}
         </ul>
 
-        <p
-          style={{
-            margin: '24px auto 0',
-            maxWidth: 980,
-            textAlign: 'center',
-            fontFamily: tokens.typography.body.family,
-            fontSize: tokens.typography.body.size,
-            lineHeight: tokens.typography.body.line,
-            color: tokens.colors.textMuted,
-          }}
-        >
+        <p className="differentiator-footer">
           Want help walking these on your codebase?{' '}
           <a
             href="/pilot-to-prod"
@@ -219,20 +135,11 @@ export function Differentiator() {
                 cta_text: 'Pilot to Prod',
               })
             }
-            style={{ color: tokens.colors.accent, textDecoration: 'none', fontWeight: 600 }}
+            className="differentiator-footer-link"
           >
             Pilot to Prod →
           </a>
         </p>
-
-        <style>{`
-          @media (max-width: 640px) {
-            .why-row__body {
-              flex-direction: column !important;
-              gap: 6px !important;
-            }
-          }
-        `}</style>
       </Container>
     </Section>
   );
diff --git a/apps/website/src/components/landing/FeatureBlock.tsx b/apps/website/src/components/landing/FeatureBlock.tsx
index 271e4c884..b913053ed 100644
--- a/apps/website/src/components/landing/FeatureBlock.tsx
+++ b/apps/website/src/components/landing/FeatureBlock.tsx
@@ -1,6 +1,5 @@
 import type { ReactNode } from 'react';
 import Link from 'next/link';
-import { tokens } from '@threadplane/design-tokens';
 import { Container } from '../ui/Container';
 import { Section } from '../ui/Section';
 import { Eyebrow } from '../ui/Eyebrow';
@@ -38,86 +37,20 @@ export function FeatureBlock({
   return (
     <Section surface={surface} id={id} ariaLabelledBy={headingId}>
       <Container>
-        <div
-          className="feature-block-grid"
-          style={{
-            display: 'grid',
-            gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)',
-            gap: 64,
-            alignItems: 'center',
-          }}
-        >
+        <div className="feature-block-grid" data-visual-left={visualLeft || undefined}>
           {/* Text column */}
-          <div style={{ order: visualLeft ? 2 : 1 }}>
-            <Eyebrow tone="accent" style={{ marginBottom: 16 }}>{eyebrow}</Eyebrow>
-            <h2
-              id={headingId}
-              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: 20,
-                letterSpacing: '-0.015em',
-              }}
-            >
+          <div className="feature-block-text">
+            <Eyebrow tone="accent" className="feature-block-eyebrow">{eyebrow}</Eyebrow>
+            <h2 id={headingId} className="feature-block-heading">
               {headline}
             </h2>
-            <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,
-              }}
-            >
+            <p className="feature-block-body">
               {body}
             </p>
-            <ul
-              style={{
-                listStyle: 'none',
-                padding: 0,
-                margin: '0 0 32px 0',
-                display: 'flex',
-                flexDirection: 'column',
-                gap: 12,
-              }}
-            >
+            <ul className="feature-block-bullets">
               {bullets.map((b) => (
-                <li
-                  key={b}
-                  style={{
-                    display: 'flex',
-                    alignItems: 'flex-start',
-                    gap: 10,
-                    fontFamily: tokens.typography.body.family,
-                    fontSize: tokens.typography.body.size,
-                    lineHeight: tokens.typography.body.line,
-                    color: tokens.colors.textPrimary,
-                  }}
-                >
-                  <span
-                    aria-hidden="true"
-                    style={{
-                      flex: '0 0 18px',
-                      height: 18,
-                      marginTop: 4,
-                      borderRadius: tokens.radius.full,
-                      background: tokens.colors.accentSurface,
-                      border: `1px solid ${tokens.colors.accentBorder}`,
-                      color: tokens.colors.accent,
-                      fontSize: 11,
-                      fontWeight: 700,
-                      display: 'inline-flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      lineHeight: 1,
-                    }}
-                  >
+                <li key={b} className="feature-block-bullet">
+                  <span aria-hidden="true" className="feature-block-bullet-check">
                     ✓
                   </span>
                   <span>{b}</span>
@@ -126,73 +59,27 @@ export function FeatureBlock({
             </ul>
 
             {/* Supporting card row */}
-            <div
-              style={{
-                display: 'grid',
-                gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))',
-                gap: 8,
-                marginBottom: 24,
-              }}
-            >
+            <div className="feature-block-card-row">
               {supportingCards.map((sc) => (
                 <Card key={sc.title} padding="md" surface="tinted">
-                  <div
-                    style={{
-                      fontFamily: tokens.typography.fontMono,
-                      fontSize: 12,
-                      fontWeight: 700,
-                      color: tokens.colors.accent,
-                      marginBottom: 4,
-                    }}
-                  >
+                  <div className="feature-block-card-title">
                     {sc.title}
                   </div>
-                  <div
-                    style={{
-                      fontFamily: tokens.typography.caption.family,
-                      fontSize: tokens.typography.caption.size,
-                      lineHeight: tokens.typography.caption.line,
-                      color: tokens.colors.textSecondary,
-                    }}
-                  >
+                  <div className="feature-block-card-desc">
                     {sc.description}
                   </div>
                 </Card>
               ))}
             </div>
 
-            <Link
-              href={cta.href}
-              style={{
-                fontFamily: tokens.typography.fontSans,
-                fontSize: 15,
-                fontWeight: 600,
-                color: tokens.colors.accent,
-                textDecoration: 'none',
-                display: 'inline-flex',
-                alignItems: 'center',
-                gap: 6,
-              }}
-            >
+            <Link href={cta.href} className="feature-block-cta">
               {cta.label} →
             </Link>
           </div>
 
           {/* Visual column */}
-          <div style={{ order: visualLeft ? 1 : 2 }}>{visual}</div>
+          <div className="feature-block-visual">{visual}</div>
         </div>
-
-        <style>{`
-          @media (max-width: 900px) {
-            .feature-block-grid {
-              grid-template-columns: 1fr !important;
-              gap: 32px !important;
-            }
-            .feature-block-grid > div {
-              order: unset !important;
-            }
-          }
-        `}</style>
       </Container>
     </Section>
   );
diff --git a/apps/website/src/components/landing/Hero.tsx b/apps/website/src/components/landing/Hero.tsx
index 2d21342a3..da769a751 100644
--- a/apps/website/src/components/landing/Hero.tsx
+++ b/apps/website/src/components/landing/Hero.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import React, { useCallback, useState } from 'react';
-import { tokens } from '@threadplane/design-tokens';
 import { Container } from '../ui/Container';
 import { Section } from '../ui/Section';
 import { Eyebrow } from '../ui/Eyebrow';
@@ -65,61 +64,23 @@ export function Hero() {
   return (
     <Section surface="canvas" ariaLabelledBy="hero-heading">
       <Container>
-        <div
-          className="hero-grid"
-          style={{
-            display: 'grid',
-            gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)',
-            gap: 64,
-            alignItems: 'center',
-          }}
-        >
+        <div className="hero-grid">
           {/* Left column */}
           <div>
-            <Eyebrow tone="accent" style={{ marginBottom: 16 }}>
+            <Eyebrow tone="accent" className="hero-eyebrow">
               Threadplane · Angular agent UI
             </Eyebrow>
-            <h1
-              id="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',
-              }}
-            >
+            <h1 id="hero-heading" className="hero-heading">
               Ship production agent UIs in 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,
-                marginBottom: 32,
-                maxWidth: '54ch',
-              }}
-            >
+            <p className="hero-subhead">
               {HERO_SUBHEAD}
             </p>
-            <div style={{ display: 'flex', gap: 12, marginBottom: 24, flexWrap: 'wrap' }}>
+            <div className="hero-cta-row">
               <PrimaryInstallButton />
               <SecondaryTalkButton />
             </div>
-            <div
-              style={{
-                display: 'flex',
-                gap: 8,
-                alignItems: 'center',
-                flexWrap: 'wrap',
-                marginBottom: 12,
-              }}
-            >
+            <div className="hero-proof-row">
               {POSITIONING_PROOF_POINTS.map((proofPoint, index) => (
                 <a
                   key={proofPoint.label}
@@ -131,7 +92,7 @@ export function Hero() {
                       surface: 'home',
                     })
                   }
-                  style={{ textDecoration: 'none' }}
+                  className="hero-proof-link"
                 >
                   <Pill variant={index === 0 ? 'accent' : 'neutral'} className="hero-proof-pill">
                     {proofPoint.label}
@@ -139,17 +100,7 @@ export function Hero() {
                 </a>
               ))}
             </div>
-            <p
-              style={{
-                margin: 0,
-                fontFamily: tokens.typography.body.family,
-                fontSize: tokens.typography.body.size,
-                lineHeight: tokens.typography.body.line,
-                color: tokens.colors.textMuted,
-                fontStyle: 'italic',
-                maxWidth: '60ch',
-              }}
-            >
+            <p className="hero-caption">
               Not another backend agent runtime. Keep LangGraph, Genkit, Mastra, CrewAI, or your own service. Threadplane solves the Angular UI layer.
             </p>
           </div>
@@ -167,33 +118,25 @@ export function Hero() {
                   surface: 'home',
                 })
               }
-              style={{ display: 'block', textDecoration: 'none' }}
+              className="hero-demo-link"
               aria-label="Open the generative UI example running in cockpit"
             >
               <BrowserFrame
                 url="demo.threadplane.ai"
                 rotate={-1}
                 elevation="lg"
-                style={{ width: '100%' }}
+                className="hero-demo-frame"
               >
                 <img
                   src="/screenshots/canonical-demo-generative-ui.webp"
                   alt="Canonical demo — agent renders a live airline operations dashboard with KPI cards, charts, and a disruptions table"
-                  style={{ display: 'block', width: '100%', height: 'auto' }}
+                  className="hero-demo-img"
                   loading="lazy"
                   decoding="async"
                 />
               </BrowserFrame>
             </a>
-            <p
-              style={{
-                margin: '12px 0 0',
-                textAlign: 'center',
-                fontFamily: tokens.typography.body.family,
-                fontSize: 13,
-                color: tokens.colors.textMuted,
-              }}
-            >
+            <p className="hero-demo-caption">
               <a
                 href="https://cockpit.threadplane.ai/langgraph/core-capabilities/streaming/overview/python"
                 target="_blank"
@@ -205,44 +148,13 @@ export function Hero() {
                     surface: 'home',
                   })
                 }
-                style={{ color: tokens.colors.accent, textDecoration: 'none', fontWeight: 600 }}
+                className="hero-demo-caption-link"
               >
                 Open in cockpit →
               </a>
             </p>
           </div>
         </div>
-
-        <style>{`
-          @keyframes blink { to { visibility: hidden; } }
-          @media (max-width: 900px) {
-            .hero-grid {
-              grid-template-columns: 1fr !important;
-              gap: 40px !important;
-            }
-          }
-          .hero-proof-pill {
-            transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
-            will-change: transform;
-          }
-          a:hover > .hero-proof-pill,
-          a:focus-visible > .hero-proof-pill {
-            transform: translateY(-1px);
-            background: ${tokens.colors.accentSurface} !important;
-            border-color: ${tokens.colors.accentBorder} !important;
-            color: ${tokens.colors.accent} !important;
-            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
-          }
-          a:active > .hero-proof-pill {
-            transform: translateY(0);
-            box-shadow: none;
-          }
-          @media (prefers-reduced-motion: reduce) {
-            .hero-proof-pill { transition: none; }
-            a:hover > .hero-proof-pill,
-            a:focus-visible > .hero-proof-pill { transform: none; }
-          }
-        `}</style>
       </Container>
     </Section>
   );
diff --git a/apps/website/src/components/landing/WhitePaperBlock.tsx b/apps/website/src/components/landing/WhitePaperBlock.tsx
index a7425dbf9..5c7fd73c3 100644
--- a/apps/website/src/components/landing/WhitePaperBlock.tsx
+++ b/apps/website/src/components/landing/WhitePaperBlock.tsx
@@ -1,6 +1,5 @@
 'use client';
 import { useState } from 'react';
-import { tokens } from '@threadplane/design-tokens';
 import { Container } from '../ui/Container';
 import { Section } from '../ui/Section';
 import { Eyebrow } from '../ui/Eyebrow';
@@ -70,79 +69,23 @@ export function WhitePaperBlock({ paper = 'overview' }: WhitePaperBlockProps = {
   return (
     <Section surface="white" id="whitepaper-block" ariaLabelledBy="wp-heading">
       <Container>
-        <div
-          className="wp-grid"
-          style={{
-            display: 'grid',
-            gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)',
-            gap: 64,
-            alignItems: 'center',
-          }}
-        >
+        <div className="wp-grid">
           <div>
-            <Eyebrow tone="accent" style={{ marginBottom: 16 }}>Field report</Eyebrow>
-            <h2
-              id="wp-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: 20,
-                letterSpacing: '-0.015em',
-              }}
-            >
+            <Eyebrow tone="accent" className="wp-eyebrow">Field report</Eyebrow>
+            <h2 id="wp-heading" className="wp-heading">
               The last-mile gap in Angular AI.
             </h2>
-            <ul
-              style={{
-                listStyle: 'none',
-                padding: 0,
-                margin: '0 0 24px 0',
-                display: 'flex',
-                flexDirection: 'column',
-                gap: 10,
-              }}
-            >
+            <ul className="wp-bullets">
               {BULLETS.map((b) => (
-                <li
-                  key={b}
-                  style={{
-                    display: 'flex',
-                    alignItems: 'flex-start',
-                    gap: 10,
-                    fontFamily: tokens.typography.bodyLg.family,
-                    fontSize: tokens.typography.bodyLg.size,
-                    lineHeight: tokens.typography.bodyLg.line,
-                    color: tokens.colors.textSecondary,
-                  }}
-                >
-                  <span
-                    aria-hidden="true"
-                    style={{
-                      flex: '0 0 6px',
-                      height: 6,
-                      marginTop: 12,
-                      borderRadius: tokens.radius.full,
-                      background: tokens.colors.accent,
-                    }}
-                  />
+                <li key={b} className="wp-bullet">
+                  <span aria-hidden="true" className="wp-bullet-dot" />
                   <span>{b}</span>
                 </li>
               ))}
             </ul>
 
             {state === 'done' ? (
-              <div
-                style={{
-                  fontFamily: tokens.typography.body.family,
-                  fontSize: tokens.typography.body.size,
-                  color: '#1a7a40',
-                  marginBottom: 16,
-                }}
-              >
+              <div className="wp-success">
                 ✓ Check your inbox — the guide is on its way.{' '}
                 <a
                   href={pdf.href}
@@ -154,16 +97,13 @@ export function WhitePaperBlock({ paper = 'overview' }: WhitePaperBlockProps = {
                       cta_id: 'home_whitepaper_direct',
                     })
                   }
-                  style={{ color: tokens.colors.accent }}
+                  className="wp-success-link"
                 >
                   Or download directly.
                 </a>
               </div>
             ) : (
-              <form
-                onSubmit={submit}
-                style={{ display: 'flex', gap: 8, flexWrap: 'wrap', maxWidth: 480 }}
-              >
+              <form onSubmit={submit} className="wp-form">
                 <label htmlFor="wp-email" className="sr-only">Email address</label>
                 <input
                   id="wp-email"
@@ -174,17 +114,7 @@ export function WhitePaperBlock({ paper = 'overview' }: WhitePaperBlockProps = {
                   onChange={(e) => setEmail(e.target.value)}
                   required
                   disabled={state === 'submitting'}
-                  style={{
-                    flex: '1 1 240px',
-                    background: tokens.surfaces.surface,
-                    border: `1px solid ${tokens.surfaces.border}`,
-                    borderRadius: tokens.radius.md,
-                    padding: '12px 14px',
-                    fontFamily: tokens.typography.body.family,
-                    fontSize: tokens.typography.body.size,
-                    color: tokens.colors.textPrimary,
-                    outline: 'none',
-                  }}
+                  className="wp-email-input"
                 />
                 <Button
                   type="submit"
@@ -197,23 +127,16 @@ export function WhitePaperBlock({ paper = 'overview' }: WhitePaperBlockProps = {
               </form>
             )}
             {state === 'error' && (
-              <p style={{ marginTop: 12, color: tokens.colors.angularRed, fontSize: 14 }}>
+              <p className="wp-error">
                 Something went wrong — please try again or{' '}
-                <a href={pdf.href} download={pdf.download} style={{ color: tokens.colors.accent }}>
+                <a href={pdf.href} download={pdf.download} className="wp-error-link">
                   download directly
                 </a>
                 .
               </p>
             )}
             {state !== 'done' && (
-              <p
-                style={{
-                  marginTop: 12,
-                  fontSize: 13,
-                  color: tokens.colors.textMuted,
-                  fontFamily: tokens.typography.body.family,
-                }}
-              >
+              <p className="wp-already">
                 Already on the list?{' '}
                 <a
                   href={pdf.href}
@@ -225,7 +148,7 @@ export function WhitePaperBlock({ paper = 'overview' }: WhitePaperBlockProps = {
                       cta_id: 'home_whitepaper_direct_inline',
                     })
                   }
-                  style={{ color: tokens.colors.accent, textDecoration: 'underline' }}
+                  className="wp-already-link"
                 >
                   Download the PDF directly.
                 </a>
@@ -234,84 +157,32 @@ export function WhitePaperBlock({ paper = 'overview' }: WhitePaperBlockProps = {
           </div>
 
           {/* Tilted whitepaper cover */}
-          <div style={{ display: 'flex', justifyContent: 'center' }}>
+          <div className="wp-cover-wrap">
             <BrowserFrame
               url="angular-agent-readiness-guide.pdf"
               rotate={-2}
               elevation="lg"
               maxWidth={420}
             >
-              <div
-                style={{
-                  aspectRatio: '8.5 / 11',
-                  background: 'linear-gradient(135deg, #fafbfc 0%, #eaf3ff 100%)',
-                  padding: '48px 36px',
-                  display: 'flex',
-                  flexDirection: 'column',
-                  justifyContent: 'space-between',
-                }}
-              >
+              <div className="wp-cover">
                 <div>
-                  <div
-                    style={{
-                      fontFamily: tokens.typography.fontMono,
-                      fontSize: 11,
-                      textTransform: 'uppercase',
-                      letterSpacing: '0.15em',
-                      color: tokens.colors.accent,
-                      marginBottom: 14,
-                    }}
-                  >
+                  <div className="wp-cover-badge">
                     Field report · 18 pages
                   </div>
-                  <div
-                    style={{
-                      fontFamily: tokens.typography.fontSerif,
-                      fontSize: 28,
-                      lineHeight: 1.15,
-                      fontWeight: 700,
-                      color: tokens.colors.textPrimary,
-                      marginBottom: 12,
-                      fontStyle: 'italic',
-                    }}
-                  >
+                  <div className="wp-cover-title">
                     From Prototype to Production
                   </div>
-                  <div
-                    style={{
-                      fontFamily: tokens.typography.fontSans,
-                      fontSize: 14,
-                      lineHeight: 1.5,
-                      color: tokens.colors.textSecondary,
-                    }}
-                  >
+                  <div className="wp-cover-desc">
                     Six production-readiness dimensions for Angular AI teams.
                   </div>
                 </div>
-                <div
-                  style={{
-                    fontFamily: tokens.typography.fontMono,
-                    fontSize: 11,
-                    color: tokens.colors.textMuted,
-                    textTransform: 'uppercase',
-                    letterSpacing: '0.1em',
-                  }}
-                >
+                <div className="wp-cover-footer">
                   Threadplane
                 </div>
               </div>
             </BrowserFrame>
           </div>
         </div>
-
-        <style>{`
-          @media (max-width: 900px) {
-            .wp-grid {
-              grid-template-columns: 1fr !important;
-              gap: 40px !important;
-            }
-          }
-        `}</style>
       </Container>
     </Section>
   );
diff --git a/apps/website/src/styles/landing.css b/apps/website/src/styles/landing.css
index 599cc6f63..0e9a50f31 100644
--- a/apps/website/src/styles/landing.css
+++ b/apps/website/src/styles/landing.css
@@ -8,3 +8,462 @@
  *
  * Migration: docs/superpowers/plans/2026-08-29-inline-style-substrate-migration.md
  */
+
+/* Hero — components/landing/Hero.tsx */
+.hero-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 64px;
+  align-items: center;
+}
+.hero-eyebrow {
+  margin-bottom: 16px;
+}
+.hero-heading {
+  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;
+}
+.hero-subhead {
+  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: 32px;
+  max-width: 54ch;
+}
+.hero-cta-row {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
+}
+.hero-proof-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+}
+.hero-proof-link {
+  text-decoration: none;
+}
+.hero-caption {
+  margin: 0;
+  font-family: var(--font-inter);
+  font-size: var(--text-body);
+  line-height: var(--text-body--line-height);
+  color: var(--color-text-muted);
+  font-style: italic;
+  max-width: 60ch;
+}
+.hero-demo-link {
+  display: block;
+  text-decoration: none;
+}
+.hero-demo-frame {
+  width: 100%;
+}
+.hero-demo-img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+.hero-demo-caption {
+  margin: 12px 0 0;
+  text-align: center;
+  font-family: var(--font-inter);
+  font-size: 13px;
+  color: var(--color-text-muted);
+}
+.hero-demo-caption-link {
+  color: var(--color-accent);
+  text-decoration: none;
+  font-weight: 600;
+}
+@keyframes blink { to { visibility: hidden; } }
+@media (max-width: 900px) {
+  .hero-grid {
+    grid-template-columns: 1fr !important;
+    gap: 40px !important;
+  }
+}
+.hero-proof-pill {
+  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
+  will-change: transform;
+}
+.hero-proof-link:hover > .hero-proof-pill,
+.hero-proof-link:focus-visible > .hero-proof-pill {
+  transform: translateY(-1px);
+  background: var(--color-accent-surface) !important;
+  border-color: var(--color-accent-border) !important;
+  color: var(--color-accent) !important;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+.hero-proof-link:active > .hero-proof-pill {
+  transform: translateY(0);
+  box-shadow: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .hero-proof-pill { transition: none; }
+  .hero-proof-link:hover > .hero-proof-pill,
+  .hero-proof-link:focus-visible > .hero-proof-pill { transform: none; }
+}
+
+/* FeatureBlock — components/landing/FeatureBlock.tsx */
+.feature-block-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 64px;
+  align-items: center;
+}
+.feature-block-text {
+  order: 1;
+}
+.feature-block-visual {
+  order: 2;
+}
+.feature-block-grid[data-visual-left] .feature-block-text {
+  order: 2;
+}
+.feature-block-grid[data-visual-left] .feature-block-visual {
+  order: 1;
+}
+.feature-block-eyebrow {
+  margin-bottom: 16px;
+}
+.feature-block-heading {
+  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;
+  margin-bottom: 20px;
+  letter-spacing: -0.015em;
+}
+.feature-block-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: 24px;
+}
+.feature-block-bullets {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 32px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.feature-block-bullet {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  font-family: var(--font-inter);
+  font-size: var(--text-body);
+  line-height: var(--text-body--line-height);
+  color: var(--color-text-primary);
+}
+.feature-block-bullet-check {
+  flex: 0 0 18px;
+  height: 18px;
+  margin-top: 4px;
+  border-radius: var(--radius-full);
+  background: var(--color-accent-surface);
+  border: 1px solid var(--color-accent-border);
+  color: var(--color-accent);
+  font-size: 11px;
+  font-weight: 700;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+.feature-block-card-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 8px;
+  margin-bottom: 24px;
+}
+.feature-block-card-title {
+  font-family: "JetBrains Mono", monospace;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--color-accent);
+  margin-bottom: 4px;
+}
+.feature-block-card-desc {
+  font-family: var(--font-inter);
+  font-size: var(--text-caption);
+  line-height: var(--text-caption--line-height);
+  color: var(--color-text-secondary);
+}
+.feature-block-cta {
+  font-family: Inter, system-ui, sans-serif;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--color-accent);
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+@media (max-width: 900px) {
+  .feature-block-grid {
+    grid-template-columns: 1fr !important;
+    gap: 32px !important;
+  }
+  .feature-block-grid > div {
+    order: unset !important;
+  }
+}
+
+/* Differentiator — components/landing/Differentiator.tsx */
+.differentiator-check-icon {
+  flex-shrink: 0;
+  margin-top: 4px;
+}
+.differentiator-section {
+  padding-top: 72px;
+}
+.differentiator-intro {
+  max-width: 1020px;
+  margin: 0 auto 44px;
+  text-align: center;
+}
+.differentiator-eyebrow {
+  margin-bottom: 16px;
+}
+.differentiator-heading {
+  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;
+  margin-bottom: 20px;
+  letter-spacing: -0.015em;
+}
+.differentiator-subhead {
+  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: 760px;
+}
+.differentiator-list {
+  list-style: none;
+  padding: 0;
+  margin: 0 auto;
+  max-width: 980px;
+  border-top: 1px solid var(--color-border);
+}
+.why-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 18px 8px;
+  border-bottom: 1px solid var(--color-border);
+}
+.why-row__body {
+  flex: 1;
+  display: flex;
+  gap: 16px;
+  align-items: baseline;
+  flex-wrap: wrap;
+}
+.why-row__text {
+  flex: 1 1 200px;
+  min-width: 0;
+}
+.why-row__need {
+  font-family: var(--font-inter);
+  font-size: var(--text-body);
+  line-height: var(--text-body--line-height);
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin-right: 8px;
+}
+.why-row__description {
+  font-family: var(--font-inter);
+  font-size: var(--text-body);
+  line-height: var(--text-body--line-height);
+  color: var(--color-text-secondary);
+}
+.why-row__primitive {
+  font-family: "JetBrains Mono", monospace;
+  font-size: 13px;
+  color: var(--color-text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+.differentiator-footer {
+  margin: 24px auto 0;
+  max-width: 980px;
+  text-align: center;
+  font-family: var(--font-inter);
+  font-size: var(--text-body);
+  line-height: var(--text-body--line-height);
+  color: var(--color-text-muted);
+}
+.differentiator-footer-link {
+  color: var(--color-accent);
+  text-decoration: none;
+  font-weight: 600;
+}
+@media (max-width: 640px) {
+  .why-row__body {
+    flex-direction: column !important;
+    gap: 6px !important;
+  }
+}
+
+/* WhitePaperBlock — components/landing/WhitePaperBlock.tsx */
+.wp-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 64px;
+  align-items: center;
+}
+.wp-eyebrow {
+  margin-bottom: 16px;
+}
+.wp-heading {
+  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;
+  margin-bottom: 20px;
+  letter-spacing: -0.015em;
+}
+.wp-bullets {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 24px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.wp-bullet {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  font-family: var(--font-inter);
+  font-size: var(--text-body-lg);
+  line-height: var(--text-body-lg--line-height);
+  color: var(--color-text-secondary);
+}
+.wp-bullet-dot {
+  flex: 0 0 6px;
+  height: 6px;
+  margin-top: 12px;
+  border-radius: var(--radius-full);
+  background: var(--color-accent);
+}
+.wp-success {
+  font-family: var(--font-inter);
+  font-size: var(--text-body);
+  color: #1a7a40;
+  margin-bottom: 16px;
+}
+.wp-success-link {
+  color: var(--color-accent);
+}
+.wp-form {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  max-width: 480px;
+}
+.wp-email-input {
+  flex: 1 1 240px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 12px 14px;
+  font-family: var(--font-inter);
+  font-size: var(--text-body);
+  color: var(--color-text-primary);
+  outline: none;
+}
+.wp-error {
+  margin-top: 12px;
+  color: var(--color-angular-red);
+  font-size: 14px;
+}
+.wp-error-link {
+  color: var(--color-accent);
+}
+.wp-already {
+  margin-top: 12px;
+  font-size: 13px;
+  color: var(--color-text-muted);
+  font-family: var(--font-inter);
+}
+.wp-already-link {
+  color: var(--color-accent);
+  text-decoration: underline;
+}
+.wp-cover-wrap {
+  display: flex;
+  justify-content: center;
+}
+.wp-cover {
+  aspect-ratio: 8.5 / 11;
+  background: linear-gradient(135deg, #fafbfc 0%, #eaf3ff 100%);
+  padding: 48px 36px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.wp-cover-badge {
+  font-family: "JetBrains Mono", monospace;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  color: var(--color-accent);
+  margin-bottom: 14px;
+}
+.wp-cover-title {
+  font-family: "EB Garamond", Georgia, serif;
+  font-size: 28px;
+  line-height: 1.15;
+  font-weight: 700;
+  color: var(--color-text-primary);
+  margin-bottom: 12px;
+  font-style: italic;
+}
+.wp-cover-desc {
+  font-family: Inter, system-ui, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--color-text-secondary);
+}
+.wp-cover-footer {
+  font-family: "JetBrains Mono", monospace;
+  font-size: 11px;
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+@media (max-width: 900px) {
+  .wp-grid {
+    grid-template-columns: 1fr !important;
+    gap: 40px !important;
+  }
+}
+

From fbb2579821782e1fc676dc968425e922b4e08ac9 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Sat, 29 Aug 2026 14:35:52 -0700
Subject: [PATCH 2/3] refactor(website): move landing section strip to
 landing.css

---
 .../src/components/landing/EcosystemStrip.tsx | 142 +------
 .../src/components/landing/FinalCTA.tsx       |  40 +-
 .../src/components/landing/HomeFAQ.tsx        |  20 +-
 .../src/components/landing/PilotBlock.tsx     | 130 +-----
 .../src/components/landing/Promises.tsx       |  61 +--
 .../src/components/landing/RecentArticles.tsx |  37 +-
 .../components/landing/ag-ui/BackendsGrid.tsx |  44 +-
 apps/website/src/styles/landing.css           | 390 ++++++++++++++++++
 8 files changed, 442 insertions(+), 422 deletions(-)

diff --git a/apps/website/src/components/landing/EcosystemStrip.tsx b/apps/website/src/components/landing/EcosystemStrip.tsx
index a58d64140..3171a681b 100644
--- a/apps/website/src/components/landing/EcosystemStrip.tsx
+++ b/apps/website/src/components/landing/EcosystemStrip.tsx
@@ -1,4 +1,3 @@
-import { tokens } from '@threadplane/design-tokens';
 import { Container } from '../ui/Container';
 import { Section } from '../ui/Section';
 import { Eyebrow } from '../ui/Eyebrow';
@@ -51,22 +50,7 @@ const ECOSYSTEM_GROUPS: EcosystemGroup[] = [
 
 function EcosystemTile({ item }: { item: EcosystemItem }) {
   return (
-    <div
-      data-ui="ecosystem-tile"
-      style={{
-        minHeight: 76,
-        border: `1px solid ${tokens.surfaces.border}`,
-        borderRadius: tokens.radius.sm,
-        background: tokens.surfaces.surface,
-        boxShadow: tokens.shadows.sm,
-        padding: '14px 16px',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'flex-start',
-        gap: 5,
-        transition: 'border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease',
-      }}
-    >
+    <div data-ui="ecosystem-tile">
       {item.logoSrc ? (
         <img
           src={item.logoSrc}
@@ -74,37 +58,14 @@ function EcosystemTile({ item }: { item: EcosystemItem }) {
           aria-hidden="true"
           loading="lazy"
           decoding="async"
-          style={{
-            width: 24,
-            height: 24,
-            objectFit: 'contain',
-            flex: '0 0 auto',
-            marginRight: 8,
-          }}
+          className="ecosystem-tile-logo"
         />
       ) : null}
-      <div style={{ minWidth: 0 }}>
-        <div
-          style={{
-            fontFamily: tokens.typography.fontSans,
-            fontSize: 15,
-            lineHeight: 1.25,
-            fontWeight: 700,
-            color: tokens.colors.textPrimary,
-          }}
-        >
+      <div className="ecosystem-tile-body">
+        <div className="ecosystem-tile-name">
           {item.name}
         </div>
-        <div
-          style={{
-            fontFamily: tokens.typography.fontMono,
-            fontSize: 10,
-            lineHeight: 1.4,
-            textTransform: 'uppercase',
-            letterSpacing: '0.08em',
-            color: tokens.colors.textMuted,
-          }}
-        >
+        <div className="ecosystem-tile-note">
           {item.note}
         </div>
       </div>
@@ -116,78 +77,25 @@ export function EcosystemStrip() {
   return (
     <Section surface="tinted" tight ariaLabelledBy="ecosystem-heading">
       <Container>
-        <div style={{ maxWidth: 780, margin: '0 auto 28px', textAlign: 'center' }}>
-          <Eyebrow tone="accent" style={{ marginBottom: 12 }}>
+        <div className="ecosystem-intro">
+          <Eyebrow tone="accent" className="ecosystem-eyebrow">
             Works with your agent stack
           </Eyebrow>
-          <h2
-            id="ecosystem-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: 14,
-              letterSpacing: 0,
-            }}
-          >
+          <h2 id="ecosystem-heading" className="ecosystem-heading">
             Bring the model, runtime, and UI protocol you already use.
           </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="ecosystem-subhead">
             Threadplane gives Angular teams production-ready chat, durable threads, interrupts, subagents, planning, memory, and generative UI without locking the backend to one provider.
           </p>
         </div>
 
-        <div
-          style={{
-            display: 'grid',
-            gap: 18,
-            maxWidth: 1080,
-            margin: '0 auto',
-          }}
-        >
+        <div className="ecosystem-groups">
           {ECOSYSTEM_GROUPS.map((group) => (
-            <div
-              key={group.title}
-              style={{
-                display: 'grid',
-                gridTemplateColumns: '170px minmax(0, 1fr)',
-                gap: 14,
-                alignItems: 'start',
-              }}
-              className="ecosystem-row"
-            >
-              <div
-                style={{
-                  fontFamily: tokens.typography.fontMono,
-                  fontSize: 11,
-                  lineHeight: 1.5,
-                  fontWeight: 700,
-                  textTransform: 'uppercase',
-                  letterSpacing: '0.1em',
-                  color: tokens.colors.accent,
-                  paddingTop: 16,
-                }}
-              >
+            <div key={group.title} className="ecosystem-row">
+              <div className="ecosystem-row-title">
                 {group.title}
               </div>
-              <div
-                style={{
-                  display: 'grid',
-                  gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
-                  gap: 10,
-                }}
-              >
+              <div className="ecosystem-row-tiles">
                 {group.items.map((item) => (
                   <EcosystemTile key={`${group.title}-${item.name}`} item={item} />
                 ))}
@@ -195,30 +103,6 @@ export function EcosystemStrip() {
             </div>
           ))}
         </div>
-
-        <style>{`
-          [data-ui="ecosystem-tile"]:hover {
-            border-color: ${tokens.colors.accentBorderHover};
-            box-shadow: ${tokens.shadows.md};
-            transform: translateY(-1px);
-          }
-
-          @media (max-width: 760px) {
-            .ecosystem-row {
-              grid-template-columns: 1fr !important;
-              gap: 8px !important;
-            }
-            .ecosystem-row > div:first-child {
-              padding-top: 0 !important;
-            }
-          }
-
-          @media (prefers-reduced-motion: reduce) {
-            [data-ui="ecosystem-tile"]:hover {
-              transform: none;
-            }
-          }
-        `}</style>
       </Container>
     </Section>
   );
diff --git a/apps/website/src/components/landing/FinalCTA.tsx b/apps/website/src/components/landing/FinalCTA.tsx
index d99cc7773..2a36f3415 100644
--- a/apps/website/src/components/landing/FinalCTA.tsx
+++ b/apps/website/src/components/landing/FinalCTA.tsx
@@ -1,4 +1,3 @@
-import { tokens } from '@threadplane/design-tokens';
 import { Container } from '../ui/Container';
 import { Section } from '../ui/Section';
 import { Button } from '../ui/Button';
@@ -29,36 +28,14 @@ export function FinalCTA({
   return (
     <Section surface="tinted" ariaLabelledBy="final-cta-heading">
       <Container>
-        <div style={{ maxWidth: 720, margin: '0 auto', textAlign: 'center' }}>
-          <h2
-            id="final-cta-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',
-              fontStyle: 'italic',
-            }}
-          >
+        <div className="final-cta-inner">
+          <h2 id="final-cta-heading" className="final-cta-heading">
             {headline}
           </h2>
-          <p
-            style={{
-              fontFamily: tokens.typography.bodyLg.family,
-              fontSize: tokens.typography.bodyLg.size,
-              lineHeight: tokens.typography.bodyLg.line,
-              color: tokens.colors.textSecondary,
-              margin: 0,
-              marginBottom: 32,
-            }}
-          >
+          <p className="final-cta-subtext">
             {subtext}
           </p>
-          <div style={{ display: 'flex', justifyContent: 'center', gap: 12, flexWrap: 'wrap', marginBottom: 16 }}>
+          <div className="final-cta-row">
             {primary ? (
               <Button
                 variant="primary"
@@ -83,14 +60,7 @@ export function FinalCTA({
             ) : null}
           </div>
           {caption ? (
-            <p
-              style={{
-                fontFamily: tokens.typography.caption.family,
-                fontSize: tokens.typography.caption.size,
-                color: tokens.colors.textMuted,
-                margin: 0,
-              }}
-            >
+            <p className="final-cta-caption">
               {caption}
             </p>
           ) : null}
diff --git a/apps/website/src/components/landing/HomeFAQ.tsx b/apps/website/src/components/landing/HomeFAQ.tsx
index 95a9895a6..132c10e09 100644
--- a/apps/website/src/components/landing/HomeFAQ.tsx
+++ b/apps/website/src/components/landing/HomeFAQ.tsx
@@ -1,4 +1,3 @@
-import { tokens } from '@threadplane/design-tokens';
 import { Container } from '../ui/Container';
 import { Section } from '../ui/Section';
 import { Eyebrow } from '../ui/Eyebrow';
@@ -55,26 +54,15 @@ export function HomeFAQ() {
   return (
     <Section surface="white" ariaLabelledBy="faq-heading">
       <Container>
-        <div style={{ textAlign: 'center', marginBottom: 48 }}>
-          <Eyebrow tone="accent" style={{ marginBottom: 16 }}>
+        <div className="home-faq-intro">
+          <Eyebrow tone="accent" className="home-faq-eyebrow">
             Questions
           </Eyebrow>
-          <h2
-            id="faq-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',
-            }}
-          >
+          <h2 id="faq-heading" className="home-faq-heading">
             Frequently asked questions.
           </h2>
         </div>
-        <div style={{ maxWidth: 800, margin: '0 auto' }}>
+        <div className="home-faq-body">
           <FAQ items={ITEMS} />
         </div>
       </Container>
diff --git a/apps/website/src/components/landing/PilotBlock.tsx b/apps/website/src/components/landing/PilotBlock.tsx
index da93486ee..d83903c88 100644
--- a/apps/website/src/components/landing/PilotBlock.tsx
+++ b/apps/website/src/components/landing/PilotBlock.tsx
@@ -1,4 +1,3 @@
-import { tokens } from '@threadplane/design-tokens';
 import { Container } from '../ui/Container';
 import { Section } from '../ui/Section';
 import { Eyebrow } from '../ui/Eyebrow';
@@ -23,138 +22,44 @@ export function PilotBlock() {
   return (
     <Section surface="tinted" ariaLabelledBy="pilot-heading">
       <Container>
-        <div
-          className="pilot-block-grid"
-          style={{
-            display: 'grid',
-            gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)',
-            gap: 64,
-            alignItems: 'center',
-          }}
-        >
+        <div className="pilot-block-grid">
           <div>
-            <Eyebrow tone="accent" style={{ marginBottom: 16 }}>For teams</Eyebrow>
-            <h2
-              id="pilot-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: 20,
-                letterSpacing: '-0.015em',
-              }}
-            >
+            <Eyebrow tone="accent" className="pilot-eyebrow">For teams</Eyebrow>
+            <h2 id="pilot-heading" className="pilot-heading">
               Ship your first Angular agent in 8 weeks.
             </h2>
-            <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,
-              }}
-            >
+            <p className="pilot-subhead">
               Pilot-to-Prod is a concierge delivery — concrete outcomes, your engineers in the driver&apos;s seat, no lock-in.
             </p>
-            <ul
-              style={{
-                listStyle: 'none',
-                padding: 0,
-                margin: '0 0 32px 0',
-                display: 'flex',
-                flexDirection: 'column',
-                gap: 10,
-              }}
-            >
+            <ul className="pilot-outcomes">
               {OUTCOMES.map((o) => (
-                <li
-                  key={o}
-                  style={{
-                    display: 'flex',
-                    alignItems: 'flex-start',
-                    gap: 10,
-                    fontFamily: tokens.typography.body.family,
-                    fontSize: tokens.typography.body.size,
-                    lineHeight: tokens.typography.body.line,
-                    color: tokens.colors.textPrimary,
-                  }}
-                >
-                  <span
-                    aria-hidden="true"
-                    style={{
-                      flex: '0 0 18px',
-                      height: 18,
-                      marginTop: 4,
-                      borderRadius: tokens.radius.full,
-                      background: tokens.colors.accent,
-                      color: tokens.colors.textInverted,
-                      fontSize: 11,
-                      fontWeight: 700,
-                      display: 'inline-flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      lineHeight: 1,
-                    }}
-                  >
+                <li key={o} className="pilot-outcome">
+                  <span aria-hidden="true" className="pilot-outcome-check">
                     ✓
                   </span>
                   <span>{o}</span>
                 </li>
               ))}
             </ul>
-            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
+            <div className="pilot-cta-row">
               <Button variant="primary" size="lg" href="/pilot-to-prod">See the program</Button>
               <Button variant="secondary" size="lg" href="/pilot-to-prod#contact">Book a call</Button>
             </div>
           </div>
 
           {/* Timeline */}
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+          <div className="pilot-timeline">
             {TIMELINE.map((t) => (
               <Card key={t.phase} padding="md">
-                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 16 }}>
-                  <div
-                    style={{
-                      flex: '0 0 36px',
-                      height: 36,
-                      borderRadius: tokens.radius.full,
-                      background: tokens.colors.accent,
-                      color: tokens.colors.textInverted,
-                      fontFamily: tokens.typography.fontMono,
-                      fontSize: 14,
-                      fontWeight: 700,
-                      display: 'inline-flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                    }}
-                  >
+                <div className="pilot-timeline-row">
+                  <div className="pilot-timeline-phase">
                     {t.phase}
                   </div>
                   <div>
-                    <div
-                      style={{
-                        fontFamily: tokens.typography.fontSans,
-                        fontSize: 17,
-                        fontWeight: 600,
-                        color: tokens.colors.textPrimary,
-                        marginBottom: 4,
-                      }}
-                    >
+                    <div className="pilot-timeline-title">
                       {t.title}
                     </div>
-                    <div
-                      style={{
-                        fontFamily: tokens.typography.body.family,
-                        fontSize: tokens.typography.body.size,
-                        lineHeight: tokens.typography.body.line,
-                        color: tokens.colors.textSecondary,
-                      }}
-                    >
+                    <div className="pilot-timeline-body">
                       {t.body}
                     </div>
                   </div>
@@ -163,15 +68,6 @@ export function PilotBlock() {
             ))}
           </div>
         </div>
-
-        <style>{`
-          @media (max-width: 900px) {
-            .pilot-block-grid {
-              grid-template-columns: 1fr !important;
-              gap: 40px !important;
-            }
-          }
-        `}</style>
       </Container>
     </Section>
   );
diff --git a/apps/website/src/components/landing/Promises.tsx b/apps/website/src/components/landing/Promises.tsx
index 1a2d289aa..140f05837 100644
--- a/apps/website/src/components/landing/Promises.tsx
+++ b/apps/website/src/components/landing/Promises.tsx
@@ -1,4 +1,3 @@
-import { tokens } from '@threadplane/design-tokens';
 import { Container } from '../ui/Container';
 import { Section } from '../ui/Section';
 import { Eyebrow } from '../ui/Eyebrow';
@@ -31,70 +30,24 @@ export function Promises() {
   return (
     <Section surface="canvas" ariaLabelledBy="promises-heading">
       <Container>
-        <div style={{ textAlign: 'center', marginBottom: 56 }}>
-          <Eyebrow tone="accent" style={{ marginBottom: 16 }}>
+        <div className="promises-intro">
+          <Eyebrow tone="accent" className="promises-eyebrow">
             Built on principles
           </Eyebrow>
-          <h2
-            id="promises-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: 12,
-              letterSpacing: '-0.015em',
-            }}
-          >
+          <h2 id="promises-heading" className="promises-heading">
             What we won&apos;t do.
           </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="promises-subhead">
             Honest commitments, not aspirations.
           </p>
         </div>
-        <div
-          style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
-            gap: 16,
-            maxWidth: 1100,
-            margin: '0 auto',
-          }}
-        >
+        <div className="promises-grid">
           {PROMISES.map((p) => (
             <Card key={p.title} 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="promises-card-title">
                 {p.title}
               </h3>
-              <p
-                style={{
-                  fontFamily: tokens.typography.body.family,
-                  fontSize: 14,
-                  lineHeight: tokens.typography.body.line,
-                  color: tokens.colors.textSecondary,
-                  margin: 0,
-                }}
-              >
+              <p className="promises-card-body">
                 {p.body}
               </p>
             </Card>
diff --git a/apps/website/src/components/landing/RecentArticles.tsx b/apps/website/src/components/landing/RecentArticles.tsx
index fca9b3ab3..eaaf54e35 100644
--- a/apps/website/src/components/landing/RecentArticles.tsx
+++ b/apps/website/src/components/landing/RecentArticles.tsx
@@ -1,5 +1,4 @@
 import Link from 'next/link';
-import { tokens } from '@threadplane/design-tokens';
 import { Section } from '../ui/Section';
 import { Container } from '../ui/Container';
 import { Eyebrow } from '../ui/Eyebrow';
@@ -18,47 +17,23 @@ export function RecentArticles() {
   return (
     <Section surface="canvas" ariaLabelledBy="recent-articles-heading">
       <Container>
-        <div style={{ marginBottom: 32 }}>
-          <Eyebrow tone="accent" style={{ marginBottom: 16 }}>
+        <div className="recent-articles-header">
+          <Eyebrow tone="accent" className="recent-articles-eyebrow">
             Blog
           </Eyebrow>
-          <h2
-            id="recent-articles-heading"
-            style={{
-              fontFamily: tokens.typography.h2.family,
-              fontSize: tokens.typography.h2.size,
-              lineHeight: tokens.typography.h2.line,
-              fontWeight: 700,
-              letterSpacing: '-0.015em',
-              color: tokens.colors.textPrimary,
-              margin: 0,
-            }}
-          >
+          <h2 id="recent-articles-heading" className="recent-articles-heading">
             Recent articles
           </h2>
         </div>
 
-        <div
-          style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
-            gap: 16,
-          }}
-        >
+        <div className="recent-articles-grid">
           {posts.map((p) => (
             <PostCard key={p.slug} post={p} />
           ))}
         </div>
 
-        <div style={{ marginTop: 32, textAlign: 'center' }}>
-          <Link
-            href="/blog"
-            style={{
-              color: tokens.colors.accent,
-              fontWeight: 500,
-              textDecoration: 'none',
-            }}
-          >
+        <div className="recent-articles-footer">
+          <Link href="/blog" className="recent-articles-link">
             View all articles →
           </Link>
         </div>
diff --git a/apps/website/src/components/landing/ag-ui/BackendsGrid.tsx b/apps/website/src/components/landing/ag-ui/BackendsGrid.tsx
index ee8515c77..358c604ef 100644
--- a/apps/website/src/components/landing/ag-ui/BackendsGrid.tsx
+++ b/apps/website/src/components/landing/ag-ui/BackendsGrid.tsx
@@ -1,5 +1,3 @@
-import { tokens } from '@threadplane/design-tokens';
-
 interface Backend {
   readonly name: string;
   readonly note: string;
@@ -18,47 +16,13 @@ const BACKENDS: readonly Backend[] = [
 
 export function BackendsGrid() {
   return (
-    <div
-      style={{
-        display: 'grid',
-        gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))',
-        gap: 10,
-        padding: 16,
-        background: tokens.surfaces.surfaceTinted,
-        border: `1px solid ${tokens.surfaces.border}`,
-        borderRadius: tokens.radius.lg,
-      }}
-    >
+    <div className="backends-grid">
       {BACKENDS.map((b) => (
-        <div
-          key={b.name}
-          style={{
-            padding: '14px 14px',
-            background: tokens.surfaces.surface,
-            border: `1px solid ${tokens.surfaces.border}`,
-            borderRadius: tokens.radius.md,
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 4,
-          }}
-        >
-          <div
-            style={{
-              fontFamily: tokens.typography.fontSans,
-              fontSize: 14,
-              fontWeight: 600,
-              color: tokens.colors.textPrimary,
-            }}
-          >
+        <div key={b.name} className="backends-grid-item">
+          <div className="backends-grid-name">
             {b.name}
           </div>
-          <div
-            style={{
-              fontFamily: tokens.typography.fontMono,
-              fontSize: 11,
-              color: tokens.colors.textMuted,
-            }}
-          >
+          <div className="backends-grid-note">
             {b.note}
           </div>
         </div>
diff --git a/apps/website/src/styles/landing.css b/apps/website/src/styles/landing.css
index 0e9a50f31..300de6d0a 100644
--- a/apps/website/src/styles/landing.css
+++ b/apps/website/src/styles/landing.css
@@ -467,3 +467,393 @@
   }
 }
 
+/* PilotBlock — components/landing/PilotBlock.tsx */
+.pilot-block-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 64px;
+  align-items: center;
+}
+.pilot-eyebrow {
+  margin-bottom: 16px;
+}
+.pilot-heading {
+  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;
+  margin-bottom: 20px;
+  letter-spacing: -0.015em;
+}
+.pilot-subhead {
+  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;
+}
+.pilot-outcomes {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 32px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.pilot-outcome {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  font-family: var(--font-inter);
+  font-size: var(--text-body);
+  line-height: var(--text-body--line-height);
+  color: var(--color-text-primary);
+}
+.pilot-outcome-check {
+  flex: 0 0 18px;
+  height: 18px;
+  margin-top: 4px;
+  border-radius: var(--radius-full);
+  background: var(--color-accent);
+  color: var(--color-text-inverted);
+  font-size: 11px;
+  font-weight: 700;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+.pilot-cta-row {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.pilot-timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.pilot-timeline-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+}
+.pilot-timeline-phase {
+  flex: 0 0 36px;
+  height: 36px;
+  border-radius: var(--radius-full);
+  background: var(--color-accent);
+  color: var(--color-text-inverted);
+  font-family: "JetBrains Mono", monospace;
+  font-size: 14px;
+  font-weight: 700;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.pilot-timeline-title {
+  font-family: Inter, system-ui, sans-serif;
+  font-size: 17px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin-bottom: 4px;
+}
+.pilot-timeline-body {
+  font-family: var(--font-inter);
+  font-size: var(--text-body);
+  line-height: var(--text-body--line-height);
+  color: var(--color-text-secondary);
+}
+@media (max-width: 900px) {
+  .pilot-block-grid {
+    grid-template-columns: 1fr !important;
+    gap: 40px !important;
+  }
+}
+
+/* EcosystemStrip — components/landing/EcosystemStrip.tsx */
+[data-ui="ecosystem-tile"] {
+  min-height: 76px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-sm);
+  padding: 14px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 5px;
+  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
+}
+.ecosystem-tile-logo {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
+  flex: 0 0 auto;
+  margin-right: 8px;
+}
+.ecosystem-tile-body {
+  min-width: 0;
+}
+.ecosystem-tile-name {
+  font-family: Inter, system-ui, sans-serif;
+  font-size: 15px;
+  line-height: 1.25;
+  font-weight: 700;
+  color: var(--color-text-primary);
+}
+.ecosystem-tile-note {
+  font-family: "JetBrains Mono", monospace;
+  font-size: 10px;
+  line-height: 1.4;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--color-text-muted);
+}
+.ecosystem-intro {
+  max-width: 780px;
+  margin: 0 auto 28px;
+  text-align: center;
+}
+.ecosystem-eyebrow {
+  margin-bottom: 12px;
+}
+.ecosystem-heading {
+  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;
+  margin-bottom: 14px;
+  letter-spacing: 0;
+}
+.ecosystem-subhead {
+  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;
+}
+.ecosystem-groups {
+  display: grid;
+  gap: 18px;
+  max-width: 1080px;
+  margin: 0 auto;
+}
+.ecosystem-row {
+  display: grid;
+  grid-template-columns: 170px minmax(0, 1fr);
+  gap: 14px;
+  align-items: start;
+}
+.ecosystem-row-title {
+  font-family: "JetBrains Mono", monospace;
+  font-size: 11px;
+  line-height: 1.5;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--color-accent);
+  padding-top: 16px;
+}
+.ecosystem-row-tiles {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 10px;
+}
+[data-ui="ecosystem-tile"]:hover {
+  border-color: var(--color-accent-border-hover);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-1px);
+}
+@media (max-width: 760px) {
+  .ecosystem-row {
+    grid-template-columns: 1fr !important;
+    gap: 8px !important;
+  }
+  .ecosystem-row > div:first-child {
+    padding-top: 0 !important;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-ui="ecosystem-tile"]:hover {
+    transform: none;
+  }
+}
+
+/* Promises — components/landing/Promises.tsx */
+.promises-intro {
+  text-align: center;
+  margin-bottom: 56px;
+}
+.promises-eyebrow {
+  margin-bottom: 16px;
+}
+.promises-heading {
+  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;
+  margin-bottom: 12px;
+  letter-spacing: -0.015em;
+}
+.promises-subhead {
+  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;
+}
+.promises-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+  max-width: 1100px;
+  margin: 0 auto;
+}
+.promises-card-title {
+  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;
+}
+.promises-card-body {
+  font-family: var(--font-inter);
+  font-size: 14px;
+  line-height: var(--text-body--line-height);
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+
+/* RecentArticles — components/landing/RecentArticles.tsx */
+.recent-articles-header {
+  margin-bottom: 32px;
+}
+.recent-articles-eyebrow {
+  margin-bottom: 16px;
+}
+.recent-articles-heading {
+  font-family: var(--font-garamond);
+  font-size: var(--text-h2);
+  line-height: var(--text-h2--line-height);
+  font-weight: 700;
+  letter-spacing: -0.015em;
+  color: var(--color-text-primary);
+  margin: 0;
+}
+.recent-articles-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 16px;
+}
+.recent-articles-footer {
+  margin-top: 32px;
+  text-align: center;
+}
+.recent-articles-link {
+  color: var(--color-accent);
+  font-weight: 500;
+  text-decoration: none;
+}
+
+/* FinalCTA — components/landing/FinalCTA.tsx */
+.final-cta-inner {
+  max-width: 720px;
+  margin: 0 auto;
+  text-align: center;
+}
+.final-cta-heading {
+  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;
+  margin-bottom: 16px;
+  letter-spacing: -0.015em;
+  font-style: italic;
+}
+.final-cta-subtext {
+  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: 32px;
+}
+.final-cta-row {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 16px;
+}
+.final-cta-caption {
+  font-family: var(--font-inter);
+  font-size: var(--text-caption);
+  color: var(--color-text-muted);
+  margin: 0;
+}
+
+/* HomeFAQ — components/landing/HomeFAQ.tsx */
+.home-faq-intro {
+  text-align: center;
+  margin-bottom: 48px;
+}
+.home-faq-eyebrow {
+  margin-bottom: 16px;
+}
+.home-faq-heading {
+  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;
+}
+.home-faq-body {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+/* BackendsGrid — components/landing/ag-ui/BackendsGrid.tsx */
+.backends-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 10px;
+  padding: 16px;
+  background: var(--color-surface-tinted);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+}
+.backends-grid-item {
+  padding: 14px 14px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.backends-grid-name {
+  font-family: Inter, system-ui, sans-serif;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+.backends-grid-note {
+  font-family: "JetBrains Mono", monospace;
+  font-size: 11px;
+  color: var(--color-text-muted);
+}
+

From e58d278c6c77dbc667364b4274a996f28c57d64b Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Sat, 29 Aug 2026 14:36:00 -0700
Subject: [PATCH 3/3] refactor(website): move demo and code-showcase landing
 styles to landing.css

---
 .../src/components/landing/DemoModal.tsx      |  53 +--
 .../src/components/landing/DemoShowcase.tsx   |  20 +-
 .../components/landing/HighlightedCode.tsx    |   2 +-
 .../chat-landing/ChatLandingCodeShowcase.tsx  |  38 +-
 .../langgraph/LangGraphCodeShowcase.tsx       |  38 +-
 .../landing/render/RenderCodeShowcase.tsx     |  38 +-
 apps/website/src/styles/landing.css           | 358 ++++++++++++++++++
 7 files changed, 404 insertions(+), 143 deletions(-)

diff --git a/apps/website/src/components/landing/DemoModal.tsx b/apps/website/src/components/landing/DemoModal.tsx
index c45311cec..ef53861d1 100644
--- a/apps/website/src/components/landing/DemoModal.tsx
+++ b/apps/website/src/components/landing/DemoModal.tsx
@@ -1,7 +1,6 @@
 // apps/website/src/components/landing/DemoModal.tsx
 'use client';
 import { useEffect, useRef } from 'react';
-import { tokens } from '@threadplane/design-tokens';
 import { trackExternalLinkClick } from '../../lib/analytics/client';
 
 type TabKey = 'langgraph' | 'ag-ui';
@@ -62,67 +61,39 @@ export function DemoModal({ open, onClose, tabs, active, onActive }: DemoModalPr
       aria-modal="true"
       aria-label="Live demo"
       onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}
-      style={{
-        position: 'fixed', inset: 0, zIndex: 100,
-        display: 'flex', alignItems: 'center', justifyContent: 'center',
-        background: 'rgba(16,18,32,.55)',
-        animation: 'demoModalBackdrop .16s ease-out',
-      }}
+      className="demo-modal"
     >
-      <style>{`
-        @keyframes demoModalBackdrop { from { opacity: 0 } to { opacity: 1 } }
-        @keyframes demoModalFrame { from { transform: scale(.96); opacity:.6 } to { transform: scale(1); opacity:1 } }
-        .demo-modal__frame {
-          width: min(96vw, calc(90vh * 16 / 10));
-          background: ${tokens.surfaces.surface};
-          border-radius: ${tokens.radius.lg};
-          box-shadow: 0 24px 60px rgba(0,0,0,.45);
-          overflow: hidden;
-          display: flex; flex-direction: column;
-          animation: demoModalFrame .16s ease-out;
-        }
-        .demo-modal__body { width: 100%; aspect-ratio: 16 / 10; background: #15161f; }
-        @media (max-width: 640px) {
-          .demo-modal__frame { width: 100vw; height: 100dvh; border-radius: 0; }
-          .demo-modal__body { aspect-ratio: auto; flex: 1 1 auto; }
-        }
-        @media (prefers-reduced-motion: reduce) {
-          [role="dialog"], .demo-modal__frame { animation: none !important; }
-        }
-      `}</style>
-
       <div ref={frameRef} className="demo-modal__frame">
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 12px', background: tokens.surfaces.surfaceTinted, borderBottom: `1px solid ${tokens.surfaces.border}` }}>
-          <div style={{ display: 'flex', gap: 5 }} aria-hidden="true">
-            {[0, 1, 2].map((i) => <span key={i} style={{ width: 8, height: 8, borderRadius: '50%', background: '#cdd2df' }} />)}
+        <div className="demo-modal__titlebar">
+          <div className="demo-modal__dots" aria-hidden="true">
+            {[0, 1, 2].map((i) => <span key={i} className="demo-modal__dot" />)}
           </div>
-          <div role="tablist" aria-label="Demo backend" style={{ display: 'flex', gap: 5 }}>
+          <div role="tablist" aria-label="Demo backend" className="demo-modal__tabs">
             {tabs.map((t) => {
               const on = t.key === active;
               return (
                 <button key={t.key} role="tab" aria-selected={on} onClick={() => onActive(t.key)}
-                  style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, fontWeight: 600, padding: '6px 12px', borderRadius: 7, border: 'none', cursor: 'pointer',
-                    background: on ? tokens.colors.accent : tokens.colors.accentSurface, color: on ? tokens.colors.textInverted : tokens.colors.textMuted }}>
+                  className="demo-modal__tab">
                   {t.tabLabel}
                 </button>
               );
             })}
           </div>
-          <span style={{ flex: 1, textAlign: 'center', fontFamily: tokens.typography.fontMono, fontSize: 12, fontWeight: 600, color: tokens.colors.textMuted, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{tab.url}</span>
+          <span className="demo-modal__url">{tab.url}</span>
           <button ref={closeBtnRef} onClick={onClose} aria-label="Close demo"
-            style={{ width: 28, height: 28, borderRadius: 7, border: 'none', cursor: 'pointer', background: tokens.colors.accentSurface, color: tokens.colors.textSecondary, fontSize: 16, lineHeight: 1 }}>&#215;</button>
+            className="demo-modal__close">&#215;</button>
         </div>
 
         <div className="demo-modal__body">
           <iframe src={tab.href} title={`${tab.tabLabel} live demo`}
-            style={{ width: '100%', height: '100%', border: 'none', display: 'block' }} />
+            className="demo-modal__iframe" />
         </div>
 
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 14px', borderTop: `1px solid ${tokens.surfaces.border}`, background: tokens.surfaces.surface }}>
-          <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, color: tokens.colors.textMuted }}>Esc or click outside to close &middot; no signup</span>
+        <div className="demo-modal__footer">
+          <span className="demo-modal__hint">Esc or click outside to close &middot; no signup</span>
           <a href={tab.href} target="_blank" rel="noopener noreferrer"
             onClick={() => trackExternalLinkClick(tab.href, { surface: 'home_demo', cta_id: `home_demo_full_${tab.key.replace(/-/g, '_')}`, cta_text: 'Open the full demo' })}
-            style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, fontWeight: 600, color: tokens.colors.accent, textDecoration: 'none' }}>Open the full demo &#8599;</a>
+            className="demo-modal__open-link">Open the full demo &#8599;</a>
         </div>
       </div>
     </div>
diff --git a/apps/website/src/components/landing/DemoShowcase.tsx b/apps/website/src/components/landing/DemoShowcase.tsx
index c7aaa6888..208ee7ed7 100644
--- a/apps/website/src/components/landing/DemoShowcase.tsx
+++ b/apps/website/src/components/landing/DemoShowcase.tsx
@@ -1,6 +1,5 @@
 'use client';
 import { useState } from 'react';
-import { tokens } from '@threadplane/design-tokens';
 import { ClipPlayer } from '../ui/ClipPlayer';
 import { TabGroup } from '../ui/TabGroup';
 import { Button } from '../ui/Button';
@@ -35,12 +34,12 @@ export function DemoShowcase() {
   };
 
   return (
-    <div style={{ maxWidth: 760, margin: '0 auto', textAlign: 'center' }}>
-      <p style={{ fontFamily: tokens.typography.fontMono, fontSize: 12, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: tokens.colors.accent, margin: 0 }}>See it running</p>
-      <h2 style={{ fontFamily: tokens.typography.h2.family, fontSize: tokens.typography.h2.size, lineHeight: tokens.typography.h2.line, fontWeight: 700, color: tokens.colors.textPrimary, margin: '10px 0 8px', letterSpacing: '-0.015em' }}>
+    <div className="demo-showcase">
+      <p className="demo-showcase__eyebrow">See it running</p>
+      <h2 className="demo-showcase__heading">
         One chat UI. Two runtimes. Same code.
       </h2>
-      <p style={{ fontFamily: tokens.typography.bodyLg.family, fontSize: tokens.typography.bodyLg.size, lineHeight: tokens.typography.bodyLg.line, color: tokens.colors.textSecondary, maxWidth: 560, margin: '0 auto 20px' }}>
+      <p className="demo-showcase__subhead">
         The identical Threadplane chat surface, running live against a LangGraph backend and an AG-UI backend. Switch tabs to compare — the front end never changes.
       </p>
 
@@ -62,10 +61,9 @@ export function DemoShowcase() {
               clip={m}
               overlay={
                 <button onClick={() => launch(m)} aria-label={`Launch ${m.tabLabel} live demo`}
-                  style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 10,
-                    background: 'linear-gradient(180deg, rgba(16,18,32,.15), rgba(16,18,32,.45))', border: 'none', cursor: 'pointer' }}>
-                  <span style={{ width: 56, height: 56, borderRadius: '50%', background: 'rgba(255,255,255,.95)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#15161f', fontSize: 22 }}>&#9654;</span>
-                  <span style={{ fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 13, color: '#fff', background: 'rgba(0,0,0,.5)', padding: '8px 14px', borderRadius: 8 }}>Launch live demo</span>
+                  className="demo-showcase__launch-btn">
+                  <span className="demo-showcase__launch-icon">&#9654;</span>
+                  <span className="demo-showcase__launch-label">Launch live demo</span>
                 </button>
               }
             />
@@ -74,13 +72,13 @@ export function DemoShowcase() {
         onSelect={(pane) => setActive(pane.id as TabKey)}
       />
 
-      <div style={{ display: 'flex', gap: 10, justifyContent: 'center', flexWrap: 'wrap', marginTop: 18 }}>
+      <div className="demo-showcase__cta-row">
         <DemoCtaPair surface="home_demo" size="lg" />
         <Button variant="ghost" size="lg" href="https://cockpit.threadplane.ai" target="_blank" rel="noopener noreferrer">
           See each feature in action →
         </Button>
       </div>
-      <p style={{ fontFamily: tokens.typography.caption.family, fontSize: tokens.typography.caption.size, color: tokens.colors.textMuted, margin: '14px 0 0' }}>
+      <p className="demo-showcase__caption">
         Video loops instantly · click Launch to open the live, interactive demo · no signup
       </p>
       <DemoModal
diff --git a/apps/website/src/components/landing/HighlightedCode.tsx b/apps/website/src/components/landing/HighlightedCode.tsx
index 55959cba3..d6a70164f 100644
--- a/apps/website/src/components/landing/HighlightedCode.tsx
+++ b/apps/website/src/components/landing/HighlightedCode.tsx
@@ -14,7 +14,7 @@ export async function HighlightedCode({ code, lang = 'typescript' }: Highlighted
   return (
     <div
       className="shiki"
-      style={{ margin: 0, borderRadius: 0, padding: '16px 20px', fontSize: '0.78rem', lineHeight: 1.65 }}
+      data-ui="highlighted-code"
       dangerouslySetInnerHTML={{ __html: html }}
     />
   );
diff --git a/apps/website/src/components/landing/chat-landing/ChatLandingCodeShowcase.tsx b/apps/website/src/components/landing/chat-landing/ChatLandingCodeShowcase.tsx
index 14512ec4d..a8667e603 100644
--- a/apps/website/src/components/landing/chat-landing/ChatLandingCodeShowcase.tsx
+++ b/apps/website/src/components/landing/chat-landing/ChatLandingCodeShowcase.tsx
@@ -1,4 +1,3 @@
-import { tokens } from '@threadplane/design-tokens';
 import { HighlightedCode } from '../HighlightedCode';
 
 const SNIPPET_1 = `import { injectAgent, provideAgent } from '@threadplane/langgraph';
@@ -38,42 +37,21 @@ const SNIPPETS = [
 
 export async function ChatLandingCodeShowcase() {
   return (
-    <section className="chat-code" style={{ padding: '80px 32px' }}>
-      <style>{`@media (max-width: 767px) { .chat-code { padding: 60px 20px !important; } }`}</style>
-      <div style={{ textAlign: 'center', marginBottom: 48 }}>
-        <p style={{
-          fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
-          fontSize: '0.7rem', textTransform: 'uppercase', letterSpacing: '0.12em',
-          fontWeight: 700, color: tokens.colors.chatPurple, marginBottom: 14,
-        }}>
+    <section className="chat-code">
+      <div className="chat-show-intro">
+        <p className="chat-show-eyebrow">
           Developer Experience
         </p>
-        <h2 style={{
-          fontFamily: 'var(--font-garamond,"EB Garamond",Georgia,serif)',
-          fontSize: 'clamp(26px,3.5vw,42px)', fontWeight: 800, lineHeight: 1.1,
-          color: tokens.colors.textPrimary,
-        }}>
+        <h2 className="chat-show-heading">
           Full-featured chat in a few lines
         </h2>
       </div>
 
-      <div style={{
-        maxWidth: 900, margin: '0 auto',
-        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(380px, 100%), 1fr))', gap: 24,
-      }}>
+      <div className="chat-show-grid">
         {SNIPPETS.map((s) => (
-          <div
-            key={s.title}
-            style={{ borderRadius: 14, overflow: 'hidden', border: `1px solid ${tokens.surfaces.border}` }}
-          >
-            <div style={{
-              padding: '10px 20px', background: 'rgba(90,0,200,0.04)',
-              borderBottom: `1px solid ${tokens.surfaces.border}`,
-            }}>
-              <span style={{
-                fontFamily: "'JetBrains Mono', monospace", fontSize: '0.68rem',
-                fontWeight: 700, color: tokens.colors.chatPurple,
-              }}>
+          <div key={s.title} className="chat-show-card">
+            <div className="chat-show-card-head">
+              <span className="chat-show-card-title">
                 {s.title}
               </span>
             </div>
diff --git a/apps/website/src/components/landing/langgraph/LangGraphCodeShowcase.tsx b/apps/website/src/components/landing/langgraph/LangGraphCodeShowcase.tsx
index 4e22e7962..906ea600a 100644
--- a/apps/website/src/components/landing/langgraph/LangGraphCodeShowcase.tsx
+++ b/apps/website/src/components/landing/langgraph/LangGraphCodeShowcase.tsx
@@ -1,4 +1,3 @@
-import { tokens } from '@threadplane/design-tokens';
 import { HighlightedCode } from '../HighlightedCode';
 
 const SNIPPET_1 = `// app.config.ts
@@ -46,42 +45,21 @@ const SNIPPETS = [
 
 export async function LangGraphCodeShowcase() {
   return (
-    <section className="angular-code" style={{ padding: '80px 32px' }}>
-      <style>{`@media (max-width: 767px) { .angular-code { padding: 60px 20px !important; } }`}</style>
-      <div style={{ textAlign: 'center', marginBottom: 48 }}>
-        <p style={{
-          fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
-          fontSize: '0.7rem', textTransform: 'uppercase', letterSpacing: '0.12em',
-          fontWeight: 700, color: tokens.colors.accent, marginBottom: 14,
-        }}>
+    <section className="angular-code">
+      <div className="lg-show-intro">
+        <p className="lg-show-eyebrow">
           Developer Experience
         </p>
-        <h2 style={{
-          fontFamily: 'var(--font-garamond,"EB Garamond",Georgia,serif)',
-          fontSize: 'clamp(26px,3.5vw,42px)', fontWeight: 800, lineHeight: 1.1,
-          color: tokens.colors.textPrimary,
-        }}>
+        <h2 className="lg-show-heading">
           Production streaming in a few lines
         </h2>
       </div>
 
-      <div style={{
-        maxWidth: 900, margin: '0 auto',
-        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(380px, 100%), 1fr))', gap: 24,
-      }}>
+      <div className="lg-show-grid">
         {SNIPPETS.map((s) => (
-          <div
-            key={s.title}
-            style={{ borderRadius: 14, overflow: 'hidden', border: `1px solid ${tokens.surfaces.border}` }}
-          >
-            <div style={{
-              padding: '10px 20px', background: 'rgba(0,64,144,0.04)',
-              borderBottom: `1px solid ${tokens.surfaces.border}`,
-            }}>
-              <span style={{
-                fontFamily: "'JetBrains Mono', monospace", fontSize: '0.68rem',
-                fontWeight: 700, color: tokens.colors.accent,
-              }}>
+          <div key={s.title} className="lg-show-card">
+            <div className="lg-show-card-head">
+              <span className="lg-show-card-title">
                 {s.title}
               </span>
             </div>
diff --git a/apps/website/src/components/landing/render/RenderCodeShowcase.tsx b/apps/website/src/components/landing/render/RenderCodeShowcase.tsx
index 93dd43f84..ab9b2819d 100644
--- a/apps/website/src/components/landing/render/RenderCodeShowcase.tsx
+++ b/apps/website/src/components/landing/render/RenderCodeShowcase.tsx
@@ -1,4 +1,3 @@
-import { tokens } from '@threadplane/design-tokens';
 import { HighlightedCode } from '../HighlightedCode';
 
 const SNIPPET_1 = `import { defineAngularRegistry } from '@threadplane/render';
@@ -24,42 +23,21 @@ const SNIPPETS = [
 
 export async function RenderCodeShowcase() {
   return (
-    <section className="render-code" style={{ padding: '80px 32px' }}>
-      <style>{`@media (max-width: 767px) { .render-code { padding: 60px 20px !important; } }`}</style>
-      <div style={{ textAlign: 'center', marginBottom: 48 }}>
-        <p style={{
-          fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
-          fontSize: '0.7rem', textTransform: 'uppercase', letterSpacing: '0.12em',
-          fontWeight: 700, color: tokens.colors.accent, marginBottom: 14,
-        }}>
+    <section className="render-code">
+      <div className="render-show-intro">
+        <p className="render-show-eyebrow">
           Developer Experience
         </p>
-        <h2 style={{
-          fontFamily: 'var(--font-garamond,"EB Garamond",Georgia,serif)',
-          fontSize: 'clamp(26px,3.5vw,42px)', fontWeight: 800, lineHeight: 1.1,
-          color: tokens.colors.textPrimary,
-        }}>
+        <h2 className="render-show-heading">
           Generative UI in a few lines
         </h2>
       </div>
 
-      <div style={{
-        maxWidth: 900, margin: '0 auto',
-        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(380px, 100%), 1fr))', gap: 24,
-      }}>
+      <div className="render-show-grid">
         {SNIPPETS.map((s) => (
-          <div
-            key={s.title}
-            style={{ borderRadius: 14, overflow: 'hidden', border: `1px solid ${tokens.surfaces.border}` }}
-          >
-            <div style={{
-              padding: '10px 20px', background: 'rgba(26,122,64,0.04)',
-              borderBottom: `1px solid ${tokens.surfaces.border}`,
-            }}>
-              <span style={{
-                fontFamily: "'JetBrains Mono', monospace", fontSize: '0.68rem',
-                fontWeight: 700, color: tokens.colors.renderGreen,
-              }}>
+          <div key={s.title} className="render-show-card">
+            <div className="render-show-card-head">
+              <span className="render-show-card-title">
                 {s.title}
               </span>
             </div>
diff --git a/apps/website/src/styles/landing.css b/apps/website/src/styles/landing.css
index 300de6d0a..ac3360c28 100644
--- a/apps/website/src/styles/landing.css
+++ b/apps/website/src/styles/landing.css
@@ -857,3 +857,361 @@
   color: var(--color-text-muted);
 }
 
+/* DemoModal — components/landing/DemoModal.tsx */
+.demo-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(16, 18, 32, .55);
+  animation: demoModalBackdrop .16s ease-out;
+}
+@keyframes demoModalBackdrop { from { opacity: 0 } to { opacity: 1 } }
+@keyframes demoModalFrame { from { transform: scale(.96); opacity: .6 } to { transform: scale(1); opacity: 1 } }
+.demo-modal__frame {
+  width: min(96vw, calc(90vh * 16 / 10));
+  background: var(--color-surface);
+  border-radius: var(--radius-lg);
+  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  animation: demoModalFrame .16s ease-out;
+}
+.demo-modal__body {
+  width: 100%;
+  aspect-ratio: 16 / 10;
+  background: #15161f;
+}
+.demo-modal__titlebar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--color-surface-tinted);
+  border-bottom: 1px solid var(--color-border);
+}
+.demo-modal__dots {
+  display: flex;
+  gap: 5px;
+}
+.demo-modal__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #cdd2df;
+}
+.demo-modal__tabs {
+  display: flex;
+  gap: 5px;
+}
+.demo-modal__tab {
+  font-family: Inter, sans-serif;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 6px 12px;
+  border-radius: 7px;
+  border: none;
+  cursor: pointer;
+  background: var(--color-accent-surface);
+  color: var(--color-text-muted);
+}
+.demo-modal__tab[aria-selected="true"] {
+  background: var(--color-accent);
+  color: var(--color-text-inverted);
+}
+.demo-modal__url {
+  flex: 1;
+  text-align: center;
+  font-family: "JetBrains Mono", monospace;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.demo-modal__close {
+  width: 28px;
+  height: 28px;
+  border-radius: 7px;
+  border: none;
+  cursor: pointer;
+  background: var(--color-accent-surface);
+  color: var(--color-text-secondary);
+  font-size: 16px;
+  line-height: 1;
+}
+.demo-modal__iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  display: block;
+}
+.demo-modal__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 14px;
+  border-top: 1px solid var(--color-border);
+  background: var(--color-surface);
+}
+.demo-modal__hint {
+  font-family: Inter, sans-serif;
+  font-size: 12px;
+  color: var(--color-text-muted);
+}
+.demo-modal__open-link {
+  font-family: Inter, sans-serif;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-accent);
+  text-decoration: none;
+}
+@media (max-width: 640px) {
+  .demo-modal__frame { width: 100vw; height: 100dvh; border-radius: 0; }
+  .demo-modal__body { aspect-ratio: auto; flex: 1 1 auto; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .demo-modal, .demo-modal__frame { animation: none !important; }
+}
+
+/* DemoShowcase — components/landing/DemoShowcase.tsx */
+.demo-showcase {
+  max-width: 760px;
+  margin: 0 auto;
+  text-align: center;
+}
+.demo-showcase__eyebrow {
+  font-family: "JetBrains Mono", monospace;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-accent);
+  margin: 0;
+}
+.demo-showcase__heading {
+  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: 10px 0 8px;
+  letter-spacing: -0.015em;
+}
+.demo-showcase__subhead {
+  font-family: var(--font-inter);
+  font-size: var(--text-body-lg);
+  line-height: var(--text-body-lg--line-height);
+  color: var(--color-text-secondary);
+  max-width: 560px;
+  margin: 0 auto 20px;
+}
+.demo-showcase__launch-btn {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  background: linear-gradient(180deg, rgba(16, 18, 32, .15), rgba(16, 18, 32, .45));
+  border: none;
+  cursor: pointer;
+}
+.demo-showcase__launch-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, .95);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #15161f;
+  font-size: 22px;
+}
+.demo-showcase__launch-label {
+  font-family: Inter, sans-serif;
+  font-weight: 600;
+  font-size: 13px;
+  color: #fff;
+  background: rgba(0, 0, 0, .5);
+  padding: 8px 14px;
+  border-radius: 8px;
+}
+.demo-showcase__cta-row {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-top: 18px;
+}
+.demo-showcase__caption {
+  font-family: var(--font-inter);
+  font-size: var(--text-caption);
+  color: var(--color-text-muted);
+  margin: 14px 0 0;
+}
+
+/* HighlightedCode — components/landing/HighlightedCode.tsx
+ * `.shiki[data-ui="highlighted-code"]` (specificity 0,2,0) intentionally beats
+ * the plain `.shiki` rule in docs.css (0,1,0) regardless of stylesheet import
+ * order, so this landing-only override of margin/padding/font-size/line-height
+ * keeps winning the way the inline style used to. */
+.shiki[data-ui="highlighted-code"] {
+  margin: 0;
+  border-radius: 0;
+  padding: 16px 20px;
+  font-size: 0.78rem;
+  line-height: 1.65;
+}
+
+/* RenderCodeShowcase — components/landing/render/RenderCodeShowcase.tsx */
+.render-code {
+  padding: 80px 32px;
+}
+@media (max-width: 767px) { .render-code { padding: 60px 20px !important; } }
+.render-show-intro {
+  text-align: center;
+  margin-bottom: 48px;
+}
+.render-show-eyebrow {
+  font-family: var(--font-mono,"JetBrains Mono",monospace);
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  font-weight: 700;
+  color: var(--color-accent);
+  margin-bottom: 14px;
+}
+.render-show-heading {
+  font-family: var(--font-garamond,"EB Garamond",Georgia,serif);
+  font-size: clamp(26px, 3.5vw, 42px);
+  font-weight: 800;
+  line-height: 1.1;
+  color: var(--color-text-primary);
+}
+.render-show-grid {
+  max-width: 900px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
+  gap: 24px;
+}
+.render-show-card {
+  border-radius: 14px;
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+}
+.render-show-card-head {
+  padding: 10px 20px;
+  background: rgba(26, 122, 64, 0.04);
+  border-bottom: 1px solid var(--color-border);
+}
+.render-show-card-title {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.68rem;
+  font-weight: 700;
+  color: var(--color-render-green);
+}
+
+/* LangGraphCodeShowcase — components/landing/langgraph/LangGraphCodeShowcase.tsx */
+.angular-code {
+  padding: 80px 32px;
+}
+@media (max-width: 767px) { .angular-code { padding: 60px 20px !important; } }
+.lg-show-intro {
+  text-align: center;
+  margin-bottom: 48px;
+}
+.lg-show-eyebrow {
+  font-family: var(--font-mono,"JetBrains Mono",monospace);
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  font-weight: 700;
+  color: var(--color-accent);
+  margin-bottom: 14px;
+}
+.lg-show-heading {
+  font-family: var(--font-garamond,"EB Garamond",Georgia,serif);
+  font-size: clamp(26px, 3.5vw, 42px);
+  font-weight: 800;
+  line-height: 1.1;
+  color: var(--color-text-primary);
+}
+.lg-show-grid {
+  max-width: 900px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
+  gap: 24px;
+}
+.lg-show-card {
+  border-radius: 14px;
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+}
+.lg-show-card-head {
+  padding: 10px 20px;
+  background: rgba(0, 64, 144, 0.04);
+  border-bottom: 1px solid var(--color-border);
+}
+.lg-show-card-title {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.68rem;
+  font-weight: 700;
+  color: var(--color-accent);
+}
+
+/* ChatLandingCodeShowcase — components/landing/chat-landing/ChatLandingCodeShowcase.tsx */
+.chat-code {
+  padding: 80px 32px;
+}
+@media (max-width: 767px) { .chat-code { padding: 60px 20px !important; } }
+.chat-show-intro {
+  text-align: center;
+  margin-bottom: 48px;
+}
+.chat-show-eyebrow {
+  font-family: var(--font-mono,"JetBrains Mono",monospace);
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  font-weight: 700;
+  color: var(--color-chat-purple);
+  margin-bottom: 14px;
+}
+.chat-show-heading {
+  font-family: var(--font-garamond,"EB Garamond",Georgia,serif);
+  font-size: clamp(26px, 3.5vw, 42px);
+  font-weight: 800;
+  line-height: 1.1;
+  color: var(--color-text-primary);
+}
+.chat-show-grid {
+  max-width: 900px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
+  gap: 24px;
+}
+.chat-show-card {
+  border-radius: 14px;
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+}
+.chat-show-card-head {
+  padding: 10px 20px;
+  background: rgba(90, 0, 200, 0.04);
+  border-bottom: 1px solid var(--color-border);
+}
+.chat-show-card-title {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.68rem;
+  font-weight: 700;
+  color: var(--color-chat-purple);
+}