diff --git a/apps/website/src/components/blog/AuthorByline.tsx b/apps/website/src/components/blog/AuthorByline.tsx
index a7a1766b3..ec0f41b60 100644
--- a/apps/website/src/components/blog/AuthorByline.tsx
+++ b/apps/website/src/components/blog/AuthorByline.tsx
@@ -2,28 +2,20 @@ import type { Author } from '../../lib/blog-authors';
 
 export function AuthorByline({ author }: { author: Author }) {
   return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: 12,
-        fontSize: 14,
-        opacity: 0.8,
-      }}
-    >
+    <div className="author-byline">
       {author.avatar ? (
         <img
           src={author.avatar}
           alt={`${author.name} avatar`}
           width={32}
           height={32}
-          style={{ borderRadius: '50%' }}
+          className="author-byline-avatar"
         />
       ) : null}
       <div>
-        <span style={{ fontWeight: 600 }}>{author.name}</span>
+        <span className="author-byline-name">{author.name}</span>
         {author.role ? (
-          <span style={{ opacity: 0.7 }}> · {author.role}</span>
+          <span className="author-byline-role"> · {author.role}</span>
         ) : null}
       </div>
     </div>
diff --git a/apps/website/src/components/blog/BlogTagFilter.tsx b/apps/website/src/components/blog/BlogTagFilter.tsx
index 585c0615e..59cdb64e8 100644
--- a/apps/website/src/components/blog/BlogTagFilter.tsx
+++ b/apps/website/src/components/blog/BlogTagFilter.tsx
@@ -1,5 +1,4 @@
 import Link from 'next/link';
-import { tokens } from '@threadplane/design-tokens';
 
 interface BlogTagFilterProps {
   /** Currently active tag from ?tag=. Undefined when on /blog. */
@@ -8,47 +7,17 @@ interface BlogTagFilterProps {
   tags: string[];
 }
 
-const PILL_BASE: React.CSSProperties = {
-  padding: '6px 12px',
-  borderRadius: 999,
-  fontSize: 13,
-  fontWeight: 500,
-  textDecoration: 'none',
-  lineHeight: 1.2,
-  cursor: 'pointer',
-  display: 'inline-block',
-};
-
-const ACTIVE: React.CSSProperties = {
-  ...PILL_BASE,
-  background: tokens.colors.accent,
-  color: '#ffffff',
-};
-
-const INACTIVE: React.CSSProperties = {
-  ...PILL_BASE,
-  background: tokens.colors.accentSurface,
-  color: tokens.colors.accent,
-};
-
 export function BlogTagFilter({ activeTag, tags }: BlogTagFilterProps) {
   const sorted = [...tags].sort((a, b) => a.localeCompare(b));
   return (
-    <div
-      style={{
-        display: 'flex',
-        gap: 8,
-        flexWrap: 'wrap',
-        marginBottom: 32,
-      }}
-    >
+    <div className="blog-tag-filter">
       {/* "All" pill */}
       {activeTag ? (
-        <Link href="/blog" style={INACTIVE}>
+        <Link href="/blog" className="blog-tag-pill">
           All
         </Link>
       ) : (
-        <span style={{ ...ACTIVE, cursor: 'default' }} aria-current="page">
+        <span className="blog-tag-pill" data-active data-static aria-current="page">
           All
         </span>
       )}
@@ -61,13 +30,14 @@ export function BlogTagFilter({ activeTag, tags }: BlogTagFilterProps) {
           <Link
             key={tag}
             href={href}
-            style={ACTIVE}
+            className="blog-tag-pill"
+            data-active
             aria-current="page"
           >
             {tag}
           </Link>
         ) : (
-          <Link key={tag} href={href} style={INACTIVE}>
+          <Link key={tag} href={href} className="blog-tag-pill">
             {tag}
           </Link>
         );
diff --git a/apps/website/src/components/blog/FeaturedPostCard.tsx b/apps/website/src/components/blog/FeaturedPostCard.tsx
index a81107a88..5563ad380 100644
--- a/apps/website/src/components/blog/FeaturedPostCard.tsx
+++ b/apps/website/src/components/blog/FeaturedPostCard.tsx
@@ -1,5 +1,4 @@
 import Link from 'next/link';
-import { tokens } from '@threadplane/design-tokens';
 import type { Post } from '../../lib/blog';
 import { formatCardDate, readingTimeMin } from '../../lib/blog';
 import { getAuthor } from '../../lib/blog-authors';
@@ -16,65 +15,18 @@ export function FeaturedPostCard({ post }: { post: Post }) {
       href={`/blog/${slug}`}
       data-ui="card"
       data-hoverable
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 16,
-        padding: 32,
-        borderRadius: 16,
-        background: tokens.surfaces.surface,
-        border: `1px solid ${tokens.colors.accent}`,
-        color: tokens.colors.textPrimary,
-        textDecoration: 'none',
-        cursor: 'pointer',
-        marginBottom: 32,
-      }}
+      className="featured-post-card"
     >
       <Eyebrow tone="accent">Featured</Eyebrow>
-      <h2
-        style={{
-          fontFamily: tokens.typography.h2.family,
-          fontSize: tokens.typography.h2.size,
-          lineHeight: tokens.typography.h2.line,
-          fontWeight: 700,
-          letterSpacing: '-0.02em',
-          margin: 0,
-        }}
-      >
+      <h2 className="featured-post-card-title">
         {frontmatter.title}
       </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="featured-post-card-description">
         {frontmatter.description}
       </p>
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          gap: 16,
-          marginTop: 8,
-          flexWrap: 'wrap',
-        }}
-      >
+      <div className="featured-post-card-footer">
         <AuthorByline author={author} />
-        <span
-          style={{
-            fontFamily: tokens.typography.eyebrow.family,
-            fontSize: tokens.typography.eyebrow.size,
-            fontWeight: tokens.typography.eyebrow.weight,
-            letterSpacing: tokens.typography.eyebrow.letterSpacing,
-            textTransform: tokens.typography.eyebrow.transform,
-            color: tokens.colors.textMuted,
-          }}
-        >
+        <span className="featured-post-card-meta">
           {formatCardDate(frontmatter.date)} · {minutes} min read
         </span>
       </div>
diff --git a/apps/website/src/components/blog/PostCard.tsx b/apps/website/src/components/blog/PostCard.tsx
index 241e9f45b..678f1d26c 100644
--- a/apps/website/src/components/blog/PostCard.tsx
+++ b/apps/website/src/components/blog/PostCard.tsx
@@ -1,5 +1,4 @@
 import Link from 'next/link';
-import { tokens } from '@threadplane/design-tokens';
 import type { Post } from '../../lib/blog';
 import { formatCardDate, readingTimeMin } from '../../lib/blog';
 
@@ -12,66 +11,21 @@ export function PostCard({ post }: { post: Post }) {
       href={`/blog/${slug}`}
       data-ui="card"
       data-hoverable
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 12,
-        padding: 24,
-        borderRadius: 12,
-        background: tokens.surfaces.surfaceTinted,
-        border: `1px solid ${tokens.surfaces.border}`,
-        color: tokens.colors.textPrimary,
-        textDecoration: 'none',
-        cursor: 'pointer',
-      }}
+      className="post-card"
     >
-      <span
-        style={{
-          fontFamily: tokens.typography.eyebrow.family,
-          fontSize: tokens.typography.eyebrow.size,
-          fontWeight: tokens.typography.eyebrow.weight,
-          letterSpacing: tokens.typography.eyebrow.letterSpacing,
-          textTransform: tokens.typography.eyebrow.transform,
-          color: tokens.colors.textMuted,
-        }}
-      >
+      <span className="post-card-meta">
         {formatCardDate(frontmatter.date)} · {minutes} min read
       </span>
-      <h3
-        style={{
-          fontFamily: tokens.typography.h3.family,
-          fontSize: tokens.typography.h3.size,
-          lineHeight: tokens.typography.h3.line,
-          fontWeight: tokens.typography.h3.weight,
-          letterSpacing: '-0.01em',
-          margin: 0,
-        }}
-      >
+      <h3 className="post-card-title">
         {frontmatter.title}
       </h3>
-      <p
-        style={{
-          fontSize: 15,
-          lineHeight: 1.55,
-          color: tokens.colors.textSecondary,
-          margin: 0,
-        }}
-      >
+      <p className="post-card-description">
         {frontmatter.description}
       </p>
       {frontmatter.tags && frontmatter.tags.length > 0 ? (
-        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 4 }}>
+        <div className="post-card-tags">
           {frontmatter.tags.map((tag) => (
-            <span
-              key={tag}
-              style={{
-                fontSize: 12,
-                padding: '2px 8px',
-                borderRadius: 999,
-                background: tokens.colors.accentSurface,
-                color: tokens.colors.accent,
-              }}
-            >
+            <span key={tag} className="post-card-tag">
               {tag}
             </span>
           ))}
diff --git a/apps/website/src/components/blog/TagChips.tsx b/apps/website/src/components/blog/TagChips.tsx
index 1f41ed287..0a5fc2758 100644
--- a/apps/website/src/components/blog/TagChips.tsx
+++ b/apps/website/src/components/blog/TagChips.tsx
@@ -1,5 +1,4 @@
 import Link from 'next/link';
-import { tokens } from '@threadplane/design-tokens';
 
 /**
  * Tag pills on the article page. Each pill links to the blog landing page
@@ -9,30 +8,9 @@ import { tokens } from '@threadplane/design-tokens';
 export function TagChips({ tags }: { tags: string[] }) {
   if (tags.length === 0) return null;
   return (
-    <div
-      style={{
-        display: 'flex',
-        gap: 8,
-        flexWrap: 'wrap',
-        marginBottom: 24,
-      }}
-    >
+    <div className="tag-chips">
       {tags.map((tag) => (
-        <Link
-          key={tag}
-          href={`/blog?tag=${encodeURIComponent(tag)}`}
-          style={{
-            fontSize: 13,
-            padding: '4px 10px',
-            borderRadius: 999,
-            background: tokens.colors.accentSurface,
-            color: tokens.colors.accent,
-            textDecoration: 'none',
-            cursor: 'pointer',
-            display: 'inline-block',
-            lineHeight: 1.2,
-          }}
-        >
+        <Link key={tag} href={`/blog?tag=${encodeURIComponent(tag)}`} className="tag-chip">
           {tag}
         </Link>
       ))}
diff --git a/apps/website/src/components/contact/AltChannelRow.tsx b/apps/website/src/components/contact/AltChannelRow.tsx
index 8744101fb..f07555819 100644
--- a/apps/website/src/components/contact/AltChannelRow.tsx
+++ b/apps/website/src/components/contact/AltChannelRow.tsx
@@ -1,22 +1,14 @@
 // SPDX-License-Identifier: MIT
 import React from 'react';
-import { tokens } from '@threadplane/design-tokens';
-
-const linkStyle: React.CSSProperties = {
-  color: tokens.colors.accent,
-  textDecoration: 'none',
-  fontSize: tokens.typography.body.size,
-  fontFamily: tokens.typography.body.family,
-};
 
 export function AltChannelRow() {
   return (
-    <p style={{ display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap', margin: 0 }}>
-      <a href="/docs" style={linkStyle}>docs</a>
-      <span style={{ color: tokens.colors.textMuted }}>·</span>
-      <a href="https://github.com/cacheplane/angular-agent-framework/issues" style={linkStyle}>GitHub issues</a>
-      <span style={{ color: tokens.colors.textMuted }}>·</span>
-      <a href="https://discord.gg/cacheplane" style={linkStyle}>Discord</a>
+    <p className="contact-alt-row">
+      <a href="/docs" className="contact-alt-link">docs</a>
+      <span className="contact-alt-sep">·</span>
+      <a href="https://github.com/cacheplane/angular-agent-framework/issues" className="contact-alt-link">GitHub issues</a>
+      <span className="contact-alt-sep">·</span>
+      <a href="https://discord.gg/cacheplane" className="contact-alt-link">Discord</a>
     </p>
   );
 }
diff --git a/apps/website/src/components/contact/ContactForm.tsx b/apps/website/src/components/contact/ContactForm.tsx
index 56bfe8f8e..f512ae1bd 100644
--- a/apps/website/src/components/contact/ContactForm.tsx
+++ b/apps/website/src/components/contact/ContactForm.tsx
@@ -3,7 +3,6 @@
 
 import React, { useState } from 'react';
 import { useSearchParams } from 'next/navigation';
-import { tokens } from '@threadplane/design-tokens';
 import { Button } from '../ui/Button';
 import { track } from '../../lib/analytics/client';
 import { analyticsEvents } from '../../lib/analytics/events';
@@ -82,28 +81,15 @@ export function ContactForm() {
 
   if (status === 'sent') {
     return (
-      <div role="status" style={{ color: tokens.colors.textPrimary, padding: 24 }}>
+      <div role="status" className="contact-form-sent">
         Thanks. We&apos;ll be in touch within one business day.
       </div>
     );
   }
 
-  const inputStyle: React.CSSProperties = {
-    display: 'block',
-    width: '100%',
-    padding: '10px 12px',
-    fontSize: tokens.typography.body.size,
-    fontFamily: tokens.typography.body.family,
-    color: tokens.colors.textPrimary,
-    background: tokens.surfaces.surface,
-    border: `1px solid ${tokens.surfaces.border}`,
-    borderRadius: 6,
-    marginTop: 4,
-  };
-
   return (
-    <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 480 }}>
-      <label style={{ fontSize: tokens.typography.body.size, color: tokens.colors.textPrimary }}>
+    <form onSubmit={handleSubmit} className="contact-form">
+      <label className="contact-form-label">
         Email
         <input
           type="email"
@@ -111,44 +97,44 @@ export function ContactForm() {
           required
           value={email}
           onChange={(e) => setEmail(e.target.value)}
-          style={inputStyle}
+          className="contact-form-input"
         />
       </label>
-      <label style={{ fontSize: tokens.typography.body.size, color: tokens.colors.textPrimary }}>
-        Name <span style={{ color: tokens.colors.textMuted }}>(optional)</span>
+      <label className="contact-form-label">
+        Name <span className="contact-form-optional">(optional)</span>
         <input
           type="text"
           autoComplete="name"
           value={name}
           onChange={(e) => setName(e.target.value)}
-          style={inputStyle}
+          className="contact-form-input"
         />
       </label>
-      <label style={{ fontSize: tokens.typography.body.size, color: tokens.colors.textPrimary }}>
-        Company <span style={{ color: tokens.colors.textMuted }}>(optional)</span>
+      <label className="contact-form-label">
+        Company <span className="contact-form-optional">(optional)</span>
         <input
           type="text"
           autoComplete="organization"
           value={company}
           onChange={(e) => setCompany(e.target.value)}
-          style={inputStyle}
+          className="contact-form-input"
         />
       </label>
-      <label style={{ fontSize: tokens.typography.body.size, color: tokens.colors.textPrimary }}>
-        Message <span style={{ color: tokens.colors.textMuted }}>(optional)</span>
+      <label className="contact-form-label">
+        Message <span className="contact-form-optional">(optional)</span>
         <textarea
           rows={5}
           value={message}
           onChange={(e) => setMessage(e.target.value)}
           placeholder="What are you shipping?"
-          style={{ ...inputStyle, resize: 'vertical' }}
+          className="contact-form-input contact-form-textarea"
         />
       </label>
       <Button variant="primary" size="lg" type="submit" disabled={status === 'sending'}>
         {status === 'sending' ? 'Sending…' : 'Send'}
       </Button>
       {status === 'error' && (
-        <div role="alert" style={{ color: '#c00' }}>
+        <div role="alert" className="contact-form-error">
           Something went wrong. Please try again or email us directly.
         </div>
       )}
diff --git a/apps/website/src/components/contact/GitHubStarsPill.tsx b/apps/website/src/components/contact/GitHubStarsPill.tsx
index efc0eee8f..5a014c7a3 100644
--- a/apps/website/src/components/contact/GitHubStarsPill.tsx
+++ b/apps/website/src/components/contact/GitHubStarsPill.tsx
@@ -14,7 +14,7 @@ export async function GitHubStarsPill() {
       href={REPO_URL}
       target="_blank"
       rel="noopener noreferrer"
-      style={{ textDecoration: 'none' }}
+      className="gh-stars-pill-link"
     >
       <Pill variant="neutral">{label}</Pill>
     </a>
diff --git a/apps/website/src/components/contact/SlaCard.tsx b/apps/website/src/components/contact/SlaCard.tsx
index 303c79e53..c337a7e60 100644
--- a/apps/website/src/components/contact/SlaCard.tsx
+++ b/apps/website/src/components/contact/SlaCard.tsx
@@ -1,20 +1,11 @@
 // SPDX-License-Identifier: MIT
 import React from 'react';
-import { tokens } from '@threadplane/design-tokens';
 import { Card } from '../ui/Card';
 
 export function SlaCard() {
   return (
-    <Card style={{ padding: 20, maxWidth: 480 }}>
-      <p
-        style={{
-          margin: 0,
-          color: tokens.colors.textPrimary,
-          fontSize: tokens.typography.body.size,
-          fontFamily: tokens.typography.body.family,
-          lineHeight: tokens.typography.body.line,
-        }}
-      >
+    <Card className="sla-card">
+      <p className="sla-card-text">
         Brian or someone on the team replies personally — from a real inbox, not <code>noreply@</code>. We read every message.
       </p>
     </Card>
diff --git a/apps/website/src/components/pricing/CompareTable.tsx b/apps/website/src/components/pricing/CompareTable.tsx
index 7f3609653..48db280a1 100644
--- a/apps/website/src/components/pricing/CompareTable.tsx
+++ b/apps/website/src/components/pricing/CompareTable.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { useState } from 'react';
-import { tokens } from '@threadplane/design-tokens';
 import { Button } from '../ui/Button';
 import { trackCtaClick } from '../../lib/analytics/client';
 import type { CtaId } from '../../lib/analytics/events';
@@ -100,16 +99,16 @@ function allInclusive(): Record<TierConfig['slug'], CellValue> {
 }
 
 const Check = () => (
-  <span style={{ color: tokens.colors.accent, fontWeight: 700 }} aria-label="included">✓</span>
+  <span className="pricing-compare-check" aria-label="included">✓</span>
 );
 const Dash = () => (
-  <span style={{ color: tokens.colors.textMuted }} aria-label="not included">—</span>
+  <span className="pricing-compare-dash" aria-label="not included">—</span>
 );
 
 function renderCell(value: CellValue): React.ReactNode {
   if (typeof value === 'boolean') return value ? <Check /> : <Dash />;
   if (value === '—') return <Dash />;
-  return <span style={{ color: tokens.colors.textSecondary }}>{value}</span>;
+  return <span className="pricing-compare-cell-text">{value}</span>;
 }
 
 function PlanButton({ tier, cycle }: { tier: TierConfig; cycle: BillingCycle }) {
@@ -118,7 +117,7 @@ function PlanButton({ tier, cycle }: { tier: TierConfig; cycle: BillingCycle })
   const common = {
     variant,
     size: 'md' as const,
-    style: { width: '100%' },
+    className: 'pricing-plan-btn',
   };
   if (cta.stripeBuyable) {
     return (
@@ -172,42 +171,15 @@ function BillingToggle({
   setCycle: (c: BillingCycle) => void;
   discountPct: number;
 }) {
-  const baseBtn = {
-    fontFamily: tokens.typography.fontSans,
-    fontSize: 13,
-    fontWeight: 600,
-    padding: '8px 16px',
-    border: 'none',
-    cursor: 'pointer',
-    transition: 'background 150ms ease, color 150ms ease',
-    background: 'transparent',
-    color: tokens.colors.textSecondary,
-    borderRadius: 999,
-  } as const;
-  const activeBtn = {
-    ...baseBtn,
-    background: tokens.colors.accent,
-    color: '#fff',
-  } as const;
   return (
-    <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 32 }}>
-      <div
-        role="tablist"
-        aria-label="Billing cycle"
-        style={{
-          display: 'inline-flex',
-          padding: 4,
-          background: tokens.surfaces.surfaceTinted,
-          border: `1px solid ${tokens.surfaces.border}`,
-          borderRadius: 999,
-          gap: 4,
-        }}
-      >
+    <div className="pricing-billing-toggle-wrap">
+      <div role="tablist" aria-label="Billing cycle" className="pricing-billing-toggle">
         <button
           role="tab"
           aria-selected={cycle === 'monthly'}
           onClick={() => setCycle('monthly')}
-          style={cycle === 'monthly' ? activeBtn : baseBtn}
+          className="pricing-billing-tab"
+          data-active={cycle === 'monthly' || undefined}
         >
           Monthly
         </button>
@@ -215,7 +187,8 @@ function BillingToggle({
           role="tab"
           aria-selected={cycle === 'annual'}
           onClick={() => setCycle('annual')}
-          style={cycle === 'annual' ? activeBtn : baseBtn}
+          className="pricing-billing-tab"
+          data-active={cycle === 'annual' || undefined}
         >
           Annual{discountPct > 0 ? ` — save ${discountPct}%` : ''}
         </button>
@@ -236,83 +209,28 @@ function SectionTable({
   showPrice: boolean;
 }) {
   return (
-    <div style={{ overflowX: 'auto' }}>
-      <div
-        style={{
-          background: tokens.surfaces.surface,
-          border: `1px solid ${tokens.surfaces.border}`,
-          borderRadius: tokens.radius.lg,
-          overflow: 'hidden',
-          minWidth: 960,
-        }}
-      >
-        <table
-          style={{
-            width: '100%',
-            borderCollapse: 'collapse',
-            fontFamily: tokens.typography.fontSans,
-            fontSize: 14,
-          }}
-        >
+    <div className="pricing-compare-scroll">
+      <div className="pricing-compare-box">
+        <table className="pricing-compare-table">
           <thead>
             <tr>
-              <th
-                style={{
-                  textAlign: 'left',
-                  padding: '20px 18px 14px',
-                  color: tokens.colors.textMuted,
-                  fontFamily: tokens.typography.fontMono,
-                  fontSize: 11,
-                  textTransform: 'uppercase',
-                  letterSpacing: '0.08em',
-                  fontWeight: 600,
-                  width: LABEL_COL_WIDTH,
-                  background: tokens.surfaces.surface,
-                }}
-              >
+              <th className="pricing-compare-th-label">
                 {title}
               </th>
               {TIERS.map((tier) => (
                 <th
                   key={tier.slug}
-                  style={{
-                    textAlign: 'center',
-                    padding: '20px 14px 14px',
-                    background: tier.highlight ? tokens.surfaces.surfaceTinted : tokens.surfaces.surface,
-                    position: 'relative',
-                  }}
+                  className="pricing-compare-th-tier"
+                  data-highlight={tier.highlight || undefined}
                 >
                   {tier.highlight && (
-                    <div
-                      style={{
-                        position: 'absolute',
-                        top: 6,
-                        left: '50%',
-                        transform: 'translateX(-50%)',
-                        background: tokens.colors.accent,
-                        color: '#fff',
-                        fontFamily: tokens.typography.fontSans,
-                        fontSize: 9,
-                        fontWeight: 700,
-                        letterSpacing: '0.08em',
-                        padding: '2px 8px',
-                        borderRadius: 999,
-                        whiteSpace: 'nowrap',
-                      }}
-                    >
+                    <div className="pricing-compare-badge">
                       MOST POPULAR
                     </div>
                   )}
                   <div
-                    style={{
-                      fontFamily: tokens.typography.fontSans,
-                      color: tokens.colors.accent,
-                      fontSize: 11,
-                      fontWeight: 700,
-                      letterSpacing: '0.08em',
-                      textTransform: 'uppercase',
-                      marginTop: tier.highlight ? 12 : 0,
-                    }}
+                    className="pricing-compare-tier-name"
+                    data-highlight={tier.highlight || undefined}
                   >
                     {tier.name}
                   </div>
@@ -321,19 +239,7 @@ function SectionTable({
             </tr>
             {showPrice ? (
               <tr>
-                <th
-                  scope="row"
-                  style={{
-                    textAlign: 'left',
-                    padding: '0 18px 20px',
-                    color: tokens.colors.textPrimary,
-                    fontFamily: tokens.typography.fontSans,
-                    fontSize: 13,
-                    fontWeight: 600,
-                    background: tokens.surfaces.surface,
-                    borderBottom: `1px solid ${tokens.surfaces.border}`,
-                  }}
-                >
+                <th scope="row" className="pricing-compare-price-label-th">
                   Price
                 </th>
                 {TIERS.map((tier) => {
@@ -341,33 +247,15 @@ function SectionTable({
                   return (
                     <th
                       key={tier.slug}
-                      style={{
-                        textAlign: 'center',
-                        padding: '0 14px 20px',
-                        background: tier.highlight ? tokens.surfaces.surfaceTinted : tokens.surfaces.surface,
-                        borderBottom: `1px solid ${tokens.surfaces.border}`,
-                      }}
+                      className="pricing-compare-price-th"
+                      data-highlight={tier.highlight || undefined}
                     >
-                      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'center', gap: 4 }}>
-                        <span
-                          style={{
-                            fontFamily: tokens.typography.fontSerif,
-                            fontWeight: 700,
-                            fontSize: 28,
-                            color: tokens.colors.textPrimary,
-                            lineHeight: 1,
-                          }}
-                        >
+                      <div className="pricing-compare-price-row">
+                        <span className="pricing-compare-price-amount">
                           {p.display}
                         </span>
                         {p.period && (
-                          <span
-                            style={{
-                              fontFamily: tokens.typography.fontSans,
-                              fontSize: 12,
-                              color: tokens.colors.textMuted,
-                            }}
-                          >
+                          <span className="pricing-compare-price-period">
                             {p.period}
                           </span>
                         )}
@@ -378,21 +266,12 @@ function SectionTable({
               </tr>
             ) : (
               <tr>
-                <th
-                  style={{
-                    padding: '0 18px 12px',
-                    background: tokens.surfaces.surface,
-                    borderBottom: `1px solid ${tokens.surfaces.border}`,
-                  }}
-                />
+                <th className="pricing-compare-spacer-label-th" />
                 {TIERS.map((tier) => (
                   <th
                     key={tier.slug}
-                    style={{
-                      padding: '0 14px 12px',
-                      background: tier.highlight ? tokens.surfaces.surfaceTinted : tokens.surfaces.surface,
-                      borderBottom: `1px solid ${tokens.surfaces.border}`,
-                    }}
+                    className="pricing-compare-spacer-th"
+                    data-highlight={tier.highlight || undefined}
                   />
                 ))}
               </tr>
@@ -402,31 +281,17 @@ function SectionTable({
             {rows.map((row, i) => (
               <tr
                 key={row.feature}
-                style={{
-                  borderBottom: i === rows.length - 1 ? 'none' : `1px solid ${tokens.surfaces.border}`,
-                }}
+                className="pricing-compare-row"
+                data-last={i === rows.length - 1 || undefined}
               >
-                <td
-                  style={{
-                    padding: '14px 18px',
-                    color: tokens.colors.textPrimary,
-                    fontFamily: tokens.typography.fontSans,
-                    fontSize: 13,
-                    fontWeight: 500,
-                  }}
-                >
+                <td className="pricing-compare-td-label">
                   {row.feature}
                 </td>
                 {TIERS.map((tier) => (
                   <td
                     key={tier.slug}
-                    style={{
-                      padding: '14px 14px',
-                      textAlign: 'center',
-                      fontFamily: tokens.typography.fontSans,
-                      fontSize: 13,
-                      background: tier.highlight ? tokens.surfaces.surfaceTinted : 'transparent',
-                    }}
+                    className="pricing-compare-td"
+                    data-highlight={tier.highlight || undefined}
                   >
                     {renderCell(row.cells[tier.slug])}
                   </td>
@@ -454,15 +319,8 @@ function CtaStrip({ cycle }: { cycle: BillingCycle }) {
     >
       <div />
       {TIERS.map((tier) => (
-        <div
-          key={tier.slug}
-          style={{
-            padding: '0 14px',
-            display: 'flex',
-            justifyContent: 'center',
-          }}
-        >
-          <div style={{ width: '100%', maxWidth: 220 }}>
+        <div key={tier.slug} className="pricing-compare-cta-cell">
+          <div className="pricing-compare-cta-btn-wrap">
             <PlanButton tier={tier} cycle={cycle} />
           </div>
         </div>
@@ -476,25 +334,18 @@ export function CompareTable() {
   const discountPct = annualDiscountPercent();
 
   return (
-    <section
-      style={{
-        maxWidth: 1280,
-        margin: '0 auto',
-        padding: '32px 24px',
-      }}
-      aria-label="Pricing comparison"
-    >
+    <section className="pricing-compare-section" aria-label="Pricing comparison">
       <BillingToggle cycle={cycle} setCycle={setCycle} discountPct={discountPct} />
 
       <SectionTable title="Licensing" rows={LICENSING_ROWS} cycle={cycle} showPrice />
-      <div style={{ overflowX: 'auto' }}>
+      <div className="pricing-compare-scroll">
         <CtaStrip cycle={cycle} />
       </div>
 
-      <div style={{ height: 56 }} />
+      <div className="pricing-compare-spacer" />
 
       <SectionTable title="What's in the box" rows={FEATURE_ROWS} cycle={cycle} showPrice={false} />
-      <div style={{ overflowX: 'auto' }}>
+      <div className="pricing-compare-scroll">
         <CtaStrip cycle={cycle} />
       </div>
     </section>
diff --git a/apps/website/src/components/pricing/CompatibilityMatrix.tsx b/apps/website/src/components/pricing/CompatibilityMatrix.tsx
index 589263c0d..43dd46874 100644
--- a/apps/website/src/components/pricing/CompatibilityMatrix.tsx
+++ b/apps/website/src/components/pricing/CompatibilityMatrix.tsx
@@ -1,6 +1,5 @@
 // SPDX-License-Identifier: MIT
 import React from 'react';
-import { tokens } from '@threadplane/design-tokens';
 
 interface Row {
   label: string;
@@ -15,47 +14,16 @@ const ROWS: ReadonlyArray<Row> = [
   { label: 'Unsupported',  versions: 'Angular ≤19',    tone: 'muted'   },
 ];
 
-const TONE_COLORS: Record<Row['tone'], string> = {
-  success: '#16a34a',
-  warn:    '#d97706',
-  info:    tokens.colors.accent,
-  muted:   tokens.colors.textMuted,
-};
-
 export function CompatibilityMatrix() {
   return (
-    <div
-      style={{
-        border: `1px solid ${tokens.surfaces.border}`,
-        borderRadius: 8,
-        overflow: 'hidden',
-      }}
-    >
-      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+    <div className="compat-matrix">
+      <table className="compat-matrix-table">
         <thead>
-          <tr style={{ background: tokens.surfaces.surface }}>
-            <th
-              style={{
-                textAlign: 'left',
-                padding: '12px 16px',
-                fontWeight: 600,
-                color: tokens.colors.textPrimary,
-                fontSize: tokens.typography.body.size,
-                borderBottom: `1px solid ${tokens.surfaces.border}`,
-              }}
-            >
+          <tr className="compat-matrix-head-row">
+            <th className="compat-matrix-th">
               Status
             </th>
-            <th
-              style={{
-                textAlign: 'left',
-                padding: '12px 16px',
-                fontWeight: 600,
-                color: tokens.colors.textPrimary,
-                fontSize: tokens.typography.body.size,
-                borderBottom: `1px solid ${tokens.surfaces.border}`,
-              }}
-            >
+            <th className="compat-matrix-th">
               Angular versions
             </th>
           </tr>
@@ -63,26 +31,10 @@ export function CompatibilityMatrix() {
         <tbody>
           {ROWS.map((row) => (
             <tr key={row.label}>
-              <td
-                style={{
-                  padding: '12px 16px',
-                  fontSize: tokens.typography.body.size,
-                  color: TONE_COLORS[row.tone],
-                  fontWeight: 500,
-                  borderBottom: `1px solid ${tokens.surfaces.border}`,
-                }}
-              >
+              <td className="compat-matrix-td-label" data-tone={row.tone}>
                 {row.label}
               </td>
-              <td
-                style={{
-                  padding: '12px 16px',
-                  fontSize: tokens.typography.body.size,
-                  color: tokens.colors.textSecondary,
-                  fontFamily: tokens.typography.fontMono,
-                  borderBottom: `1px solid ${tokens.surfaces.border}`,
-                }}
-              >
+              <td className="compat-matrix-td-versions">
                 {row.versions}
               </td>
             </tr>
diff --git a/apps/website/src/components/pricing/LeadForm.tsx b/apps/website/src/components/pricing/LeadForm.tsx
index c3d816720..287793845 100644
--- a/apps/website/src/components/pricing/LeadForm.tsx
+++ b/apps/website/src/components/pricing/LeadForm.tsx
@@ -1,6 +1,5 @@
 'use client';
 import { useState } from 'react';
-import { tokens } from '@threadplane/design-tokens';
 import { analyticsEvents } from '../../lib/analytics/events';
 import { track } from '../../lib/analytics/client';
 import { Container } from '../ui/Container';
@@ -73,131 +72,41 @@ export function LeadForm() {
     }
   };
 
-  const inputStyle: React.CSSProperties = {
-    background: tokens.surfaces.surface,
-    border: `1px solid ${tokens.surfaces.border}`,
-    color: tokens.colors.textPrimary,
-    borderRadius: tokens.radius.md,
-    padding: '10px 14px',
-    width: '100%',
-    fontFamily: tokens.typography.body.family,
-    fontSize: 14,
-    outline: 'none',
-  };
-
-  const handleFocus = (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
-    e.target.style.borderColor = tokens.colors.accent;
-    e.target.style.boxShadow = tokens.shadows.focus;
-  };
-  const handleBlur = (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
-    e.target.style.borderColor = tokens.surfaces.border;
-    e.target.style.boxShadow = 'none';
-  };
-
   return (
     <Section id="lead-form" surface="canvas" ariaLabelledBy="lead-form-heading">
       <Container>
-        <div style={{ maxWidth: 1080, margin: '0 auto' }}>
-          <div style={{ textAlign: 'center', marginBottom: 48, maxWidth: 720, marginLeft: 'auto', marginRight: 'auto' }}>
-            <Eyebrow tone="accent" style={{ marginBottom: 12 }}>Enterprise</Eyebrow>
-            <h2
-              id="lead-form-heading"
-              style={{
-                fontFamily: tokens.typography.h2.family,
-                fontWeight: 700,
-                fontSize: 'clamp(28px, 3.5vw, 42px)',
-                color: tokens.colors.textPrimary,
-                marginTop: 0,
-                marginBottom: 16,
-                letterSpacing: '-0.02em',
-                lineHeight: 1.1,
-              }}
-            >
+        <div className="lead-form-wrap">
+          <div className="lead-form-header">
+            <Eyebrow tone="accent" className="lead-form-eyebrow">Enterprise</Eyebrow>
+            <h2 id="lead-form-heading" className="lead-form-heading">
               Built for procurement.<br />Backed by delivery.
             </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="lead-form-subhead">
               Volume licensing, custom contract, and optional concierge delivery — so your first Angular agent ships, not just compiles.
             </p>
           </div>
 
-          <div
-            style={{
-              display: 'grid',
-              gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
-              gap: 24,
-              alignItems: 'start',
-            }}
-          >
+          <div className="lead-form-grid">
             {/* Value props column */}
-            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 16 }}>
+            <ul className="lead-form-value-list">
               {VALUE_PROPS.map((vp) => (
                 <li
                   key={vp.title}
-                  style={{
-                    padding: '16px 18px',
-                    background: vp.highlight ? tokens.surfaces.surfaceTinted : 'transparent',
-                    border: vp.highlight ? `1px solid ${tokens.colors.accent}` : `1px solid transparent`,
-                    borderRadius: tokens.radius.md,
-                    display: 'flex',
-                    gap: 12,
-                  }}
+                  className="lead-form-value-item"
+                  data-highlight={vp.highlight || undefined}
                 >
-                  <span
-                    aria-hidden="true"
-                    style={{
-                      color: tokens.colors.accent,
-                      fontSize: 18,
-                      fontWeight: 700,
-                      lineHeight: 1.4,
-                      flexShrink: 0,
-                    }}
-                  >
+                  <span aria-hidden="true" className="lead-form-value-check">
                     ✓
                   </span>
                   <div>
-                    <div
-                      style={{
-                        fontFamily: tokens.typography.fontSans,
-                        fontSize: 15,
-                        fontWeight: 600,
-                        color: tokens.colors.textPrimary,
-                        marginBottom: 4,
-                      }}
-                    >
+                    <div className="lead-form-value-title">
                       {vp.title}
                     </div>
-                    <p
-                      style={{
-                        fontFamily: tokens.typography.fontSans,
-                        fontSize: 14,
-                        lineHeight: 1.5,
-                        color: tokens.colors.textSecondary,
-                        margin: 0,
-                      }}
-                    >
+                    <p className="lead-form-value-body">
                       {vp.body}
                     </p>
                     {vp.link && (
-                      <a
-                        href={vp.link.href}
-                        style={{
-                          display: 'inline-block',
-                          marginTop: 6,
-                          fontFamily: tokens.typography.fontSans,
-                          fontSize: 13,
-                          color: tokens.colors.accent,
-                          textDecoration: 'none',
-                          fontWeight: 600,
-                        }}
-                      >
+                      <a href={vp.link.href} className="lead-form-value-link">
                         {vp.link.label}
                       </a>
                     )}
@@ -209,13 +118,13 @@ export function LeadForm() {
             {/* Form column */}
             {status === 'sent' ? (
               <Card padding="lg">
-                <p style={{ textAlign: 'center', color: tokens.colors.textSecondary, margin: 0 }}>
+                <p className="lead-form-sent-message">
                   Thanks &mdash; we&apos;ll be in touch within one business day.
                 </p>
               </Card>
             ) : (
               <Card padding="lg">
-                <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+                <form onSubmit={handleSubmit} className="lead-form-form">
                   <label htmlFor="lf-name" className="sr-only">Name</label>
                   <input
                     id="lf-name"
@@ -224,9 +133,7 @@ export function LeadForm() {
                     aria-label="Name"
                     placeholder="Name"
                     required
-                    style={inputStyle}
-                    onFocus={handleFocus}
-                    onBlur={handleBlur}
+                    className="lead-form-input"
                   />
                   <label htmlFor="lf-email" className="sr-only">Work email</label>
                   <input
@@ -237,9 +144,7 @@ export function LeadForm() {
                     aria-label="Work email"
                     placeholder="Work email"
                     required
-                    style={inputStyle}
-                    onFocus={handleFocus}
-                    onBlur={handleBlur}
+                    className="lead-form-input"
                   />
                   <label htmlFor="lf-company" className="sr-only">Company</label>
                   <input
@@ -249,33 +154,18 @@ export function LeadForm() {
                     aria-label="Company"
                     placeholder="Company"
                     required
-                    style={inputStyle}
-                    onFocus={handleFocus}
-                    onBlur={handleBlur}
+                    className="lead-form-input"
                   />
 
-                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
+                  <div className="lead-form-field-row">
                     <div>
-                      <label
-                        htmlFor="lf-team-size"
-                        style={{
-                          display: 'block',
-                          fontSize: 11,
-                          fontWeight: 600,
-                          color: tokens.colors.textMuted,
-                          textTransform: 'uppercase',
-                          letterSpacing: '0.06em',
-                          marginBottom: 4,
-                        }}
-                      >
+                      <label htmlFor="lf-team-size" className="lead-form-field-label">
                         Team size
                       </label>
                       <select
                         id="lf-team-size"
                         name="team_size"
-                        style={{ ...inputStyle, padding: '9px 14px' }}
-                        onFocus={handleFocus}
-                        onBlur={handleBlur}
+                        className="lead-form-input lead-form-select"
                         defaultValue=""
                       >
                         <option value="" disabled>Select…</option>
@@ -286,26 +176,13 @@ export function LeadForm() {
                       </select>
                     </div>
                     <div>
-                      <label
-                        htmlFor="lf-timeline"
-                        style={{
-                          display: 'block',
-                          fontSize: 11,
-                          fontWeight: 600,
-                          color: tokens.colors.textMuted,
-                          textTransform: 'uppercase',
-                          letterSpacing: '0.06em',
-                          marginBottom: 4,
-                        }}
-                      >
+                      <label htmlFor="lf-timeline" className="lead-form-field-label">
                         Timeline
                       </label>
                       <select
                         id="lf-timeline"
                         name="timeline"
-                        style={{ ...inputStyle, padding: '9px 14px' }}
-                        onFocus={handleFocus}
-                        onBlur={handleBlur}
+                        className="lead-form-input lead-form-select"
                         defaultValue=""
                       >
                         <option value="" disabled>Select…</option>
@@ -317,40 +194,13 @@ export function LeadForm() {
                     </div>
                   </div>
 
-                  <fieldset
-                    style={{
-                      border: `1px solid ${tokens.surfaces.border}`,
-                      borderRadius: tokens.radius.md,
-                      padding: '10px 14px',
-                      margin: 0,
-                    }}
-                  >
-                    <legend
-                      style={{
-                        fontSize: 11,
-                        fontWeight: 600,
-                        color: tokens.colors.textMuted,
-                        textTransform: 'uppercase',
-                        letterSpacing: '0.06em',
-                        padding: '0 6px',
-                      }}
-                    >
+                  <fieldset className="lead-form-fieldset">
+                    <legend className="lead-form-legend">
                       Pilot-to-Prod
                     </legend>
-                    <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', marginTop: 6 }}>
+                    <div className="lead-form-radio-row">
                       {(['yes', 'maybe', 'no'] as const).map((value) => (
-                        <label
-                          key={value}
-                          style={{
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: 6,
-                            fontSize: 13,
-                            fontFamily: tokens.typography.fontSans,
-                            color: tokens.colors.textSecondary,
-                            cursor: 'pointer',
-                          }}
-                        >
+                        <label key={value} className="lead-form-radio-label">
                           <input
                             type="radio"
                             name="pilot_interest"
@@ -373,9 +223,7 @@ export function LeadForm() {
                     aria-label="Tell us about your use case"
                     placeholder="Tell us about your use case (optional)"
                     rows={3}
-                    style={{ ...inputStyle, resize: 'vertical' }}
-                    onFocus={handleFocus}
-                    onBlur={handleBlur}
+                    className="lead-form-input lead-form-textarea"
                   />
 
                   <Button
@@ -383,12 +231,12 @@ export function LeadForm() {
                     variant="primary"
                     size="md"
                     disabled={status === 'sending'}
-                    style={{ width: '100%', justifyContent: 'center', marginTop: 4 }}
+                    className="lead-form-submit"
                   >
                     {status === 'sending' ? 'Sending…' : 'Request enterprise quote'}
                   </Button>
                   {status === 'error' && (
-                    <p style={{ fontSize: 13, textAlign: 'center', color: tokens.colors.angularRed, margin: 0 }}>
+                    <p className="lead-form-error">
                       Something went wrong &mdash; try again or email us directly.
                     </p>
                   )}
diff --git a/apps/website/src/components/pricing/PricingFAQ.tsx b/apps/website/src/components/pricing/PricingFAQ.tsx
index 87bb44a18..129bf4cf8 100644
--- a/apps/website/src/components/pricing/PricingFAQ.tsx
+++ b/apps/website/src/components/pricing/PricingFAQ.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';
@@ -35,26 +34,15 @@ export function PricingFAQ() {
   return (
     <Section surface="white" ariaLabelledBy="pricing-faq-heading">
       <Container>
-        <div id="faq" style={{ textAlign: 'center', marginBottom: 48 }}>
-          <Eyebrow tone="accent" style={{ marginBottom: 16 }}>
+        <div id="faq" className="pricing-faq-header">
+          <Eyebrow tone="accent" className="pricing-faq-eyebrow">
             Questions
           </Eyebrow>
-          <h2
-            id="pricing-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="pricing-faq-heading" className="pricing-faq-heading">
             Licensing FAQ.
           </h2>
         </div>
-        <div style={{ maxWidth: 800, margin: '0 auto' }}>
+        <div className="pricing-faq-items">
           <FAQ items={ITEMS} />
         </div>
       </Container>
diff --git a/apps/website/src/components/solutions/SolutionCodeBlock.tsx b/apps/website/src/components/solutions/SolutionCodeBlock.tsx
index 68961e44f..6a94bbab6 100644
--- a/apps/website/src/components/solutions/SolutionCodeBlock.tsx
+++ b/apps/website/src/components/solutions/SolutionCodeBlock.tsx
@@ -1,6 +1,5 @@
 // SPDX-License-Identifier: MIT
 import { codeToHtml } from 'shiki';
-import { tokens } from '@threadplane/design-tokens';
 import { Container } from '../ui/Container';
 import { Section } from '../ui/Section';
 import { Eyebrow } from '../ui/Eyebrow';
@@ -31,35 +30,18 @@ export async function SolutionCodeBlock({ code, accent }: { code: SolutionCodeBl
   return (
     <Section surface="canvas" ariaLabelledBy="solution-code-heading">
       <Container>
-        <div style={{ maxWidth: 820, margin: '0 auto' }}>
+        <div className="sol-code-wrap">
           <Eyebrow style={{ color: accent, marginBottom: 12 }}>In practice</Eyebrow>
-          <h2
-            id="solution-code-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="solution-code-heading" className="sol-code-heading">
             What it looks like in your codebase
           </h2>
           {rendered.map((block, index) => (
-            <div key={block.label} style={{ marginTop: index === 0 ? 0 : 24 }}>
-              <p
-                style={{
-                  fontFamily: tokens.typography.fontMono,
-                  fontSize: 12,
-                  fontWeight: 700,
-                  letterSpacing: '0.04em',
-                  color: tokens.colors.textMuted,
-                  margin: '0 0 10px',
-                }}
-              >
+            <div
+              key={block.label}
+              className="sol-code-block-item"
+              data-first={index === 0 || undefined}
+            >
+              <p className="sol-code-block-label">
                 {block.label}
               </p>
           {/*
@@ -71,12 +53,6 @@ export async function SolutionCodeBlock({ code, accent }: { code: SolutionCodeBl
           */}
               <div
                 className="solution-code"
-                style={{
-                  borderRadius: 12,
-                  overflow: 'hidden',
-                  border: `1px solid ${tokens.surfaces.border}`,
-                  fontSize: 14,
-                }}
                 dangerouslySetInnerHTML={{ __html: block.html }}
               />
             </div>
diff --git a/apps/website/src/components/solutions/SolutionDemoBlock.tsx b/apps/website/src/components/solutions/SolutionDemoBlock.tsx
index 85c803e96..29849dcef 100644
--- a/apps/website/src/components/solutions/SolutionDemoBlock.tsx
+++ b/apps/website/src/components/solutions/SolutionDemoBlock.tsx
@@ -1,5 +1,4 @@
 // SPDX-License-Identifier: MIT
-import { tokens } from '@threadplane/design-tokens';
 import { Container } from '../ui/Container';
 import { Section } from '../ui/Section';
 import { Eyebrow } from '../ui/Eyebrow';
@@ -23,52 +22,24 @@ export function SolutionDemoBlock({ clip, accent }: { clip: DemoClip; accent: st
   return (
     <Section surface="tinted" ariaLabelledBy="solution-demo-heading">
       <Container>
-        <div style={{ maxWidth: 820, margin: '0 auto' }}>
+        <div className="sol-demo-wrap">
           <Eyebrow style={{ color: accent, marginBottom: 12 }}>See it running</Eyebrow>
-          <h2
-            id="solution-demo-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="solution-demo-heading" className="sol-demo-heading">
             The approval gate, in the product
           </h2>
-          <p
-            style={{
-              fontFamily: tokens.typography.bodyLg.family,
-              fontSize: tokens.typography.bodyLg.size,
-              lineHeight: tokens.typography.bodyLg.line,
-              color: tokens.colors.textSecondary,
-              margin: '0 0 20px',
-              maxWidth: '62ch',
-            }}
-          >
+          <p className="sol-demo-caption">
             {clip.caption}
           </p>
 
           <ClipPlayer clip={clip} />
 
-          <p
-            style={{
-              fontFamily: tokens.typography.body.family,
-              fontSize: tokens.typography.body.size,
-              color: tokens.colors.textMuted,
-              margin: '14px 0 0',
-            }}
-          >
+          <p className="sol-demo-note">
             Recorded from the{' '}
             <a
               href="https://demo.threadplane.ai"
               target="_blank"
               rel="noopener noreferrer"
-              style={{ color: tokens.colors.accent }}
+              className="sol-demo-note-link"
             >
               live demo
             </a>
diff --git a/apps/website/src/styles/marketing.css b/apps/website/src/styles/marketing.css
index 9fcbb1c50..99c8b5505 100644
--- a/apps/website/src/styles/marketing.css
+++ b/apps/website/src/styles/marketing.css
@@ -8,3 +8,737 @@
  *
  * Migration: docs/superpowers/plans/2026-08-29-inline-style-substrate-migration.md
  */
+
+/* CompareTable — components/pricing/CompareTable.tsx */
+.pricing-billing-toggle-wrap {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 32px;
+}
+.pricing-billing-toggle {
+  display: inline-flex;
+  padding: 4px;
+  background: var(--color-surface-tinted);
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
+  gap: 4px;
+}
+.pricing-billing-tab {
+  font-family: Inter, system-ui, sans-serif;
+  font-size: 13px;
+  font-weight: 600;
+  padding: 8px 16px;
+  border: none;
+  cursor: pointer;
+  transition: background 150ms ease, color 150ms ease;
+  background: transparent;
+  color: var(--color-text-secondary);
+  border-radius: 999px;
+}
+.pricing-billing-tab[data-active] {
+  background: var(--color-accent);
+  color: #fff;
+}
+.pricing-compare-scroll {
+  overflow-x: auto;
+}
+.pricing-compare-box {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  min-width: 960px;
+}
+.pricing-compare-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: Inter, system-ui, sans-serif;
+  font-size: 14px;
+}
+.pricing-compare-th-label {
+  text-align: left;
+  padding: 20px 18px 14px;
+  color: var(--color-text-muted);
+  font-family: "JetBrains Mono", monospace;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-weight: 600;
+  width: 22%;
+  background: var(--color-surface);
+}
+.pricing-compare-th-tier {
+  text-align: center;
+  padding: 20px 14px 14px;
+  background: var(--color-surface);
+  position: relative;
+}
+.pricing-compare-th-tier[data-highlight] {
+  background: var(--color-surface-tinted);
+}
+.pricing-compare-badge {
+  position: absolute;
+  top: 6px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--color-accent);
+  color: #fff;
+  font-family: Inter, system-ui, sans-serif;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  padding: 2px 8px;
+  border-radius: 999px;
+  white-space: nowrap;
+}
+.pricing-compare-tier-name {
+  font-family: Inter, system-ui, sans-serif;
+  color: var(--color-accent);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin-top: 0;
+}
+.pricing-compare-tier-name[data-highlight] {
+  margin-top: 12px;
+}
+.pricing-compare-price-label-th {
+  text-align: left;
+  padding: 0 18px 20px;
+  color: var(--color-text-primary);
+  font-family: Inter, system-ui, sans-serif;
+  font-size: 13px;
+  font-weight: 600;
+  background: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
+}
+.pricing-compare-price-th {
+  text-align: center;
+  padding: 0 14px 20px;
+  background: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
+}
+.pricing-compare-price-th[data-highlight] {
+  background: var(--color-surface-tinted);
+}
+.pricing-compare-price-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: 4px;
+}
+.pricing-compare-price-amount {
+  font-family: "EB Garamond", Georgia, serif;
+  font-weight: 700;
+  font-size: 28px;
+  color: var(--color-text-primary);
+  line-height: 1;
+}
+.pricing-compare-price-period {
+  font-family: Inter, system-ui, sans-serif;
+  font-size: 12px;
+  color: var(--color-text-muted);
+}
+.pricing-compare-spacer-label-th {
+  padding: 0 18px 12px;
+  background: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
+}
+.pricing-compare-spacer-th {
+  padding: 0 14px 12px;
+  background: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
+}
+.pricing-compare-spacer-th[data-highlight] {
+  background: var(--color-surface-tinted);
+}
+.pricing-compare-row {
+  border-bottom: 1px solid var(--color-border);
+}
+.pricing-compare-row[data-last] {
+  border-bottom: none;
+}
+.pricing-compare-td-label {
+  padding: 14px 18px;
+  color: var(--color-text-primary);
+  font-family: Inter, system-ui, sans-serif;
+  font-size: 13px;
+  font-weight: 500;
+}
+.pricing-compare-td {
+  padding: 14px 14px;
+  text-align: center;
+  font-family: Inter, system-ui, sans-serif;
+  font-size: 13px;
+  background: transparent;
+}
+.pricing-compare-td[data-highlight] {
+  background: var(--color-surface-tinted);
+}
+.pricing-compare-check {
+  color: var(--color-accent);
+  font-weight: 700;
+}
+.pricing-compare-dash {
+  color: var(--color-text-muted);
+}
+.pricing-compare-cell-text {
+  color: var(--color-text-secondary);
+}
+.pricing-plan-btn {
+  width: 100%;
+}
+.pricing-compare-cta-cell {
+  padding: 0 14px;
+  display: flex;
+  justify-content: center;
+}
+.pricing-compare-cta-btn-wrap {
+  width: 100%;
+  max-width: 220px;
+}
+.pricing-compare-section {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 32px 24px;
+}
+.pricing-compare-spacer {
+  height: 56px;
+}
+
+/* LeadForm — components/pricing/LeadForm.tsx */
+.lead-form-wrap {
+  max-width: 1080px;
+  margin: 0 auto;
+}
+.lead-form-header {
+  text-align: center;
+  margin-bottom: 48px;
+  max-width: 720px;
+  margin-left: auto;
+  margin-right: auto;
+}
+.lead-form-eyebrow {
+  margin-bottom: 12px;
+}
+.lead-form-heading {
+  font-family: var(--font-garamond);
+  font-weight: 700;
+  font-size: clamp(28px, 3.5vw, 42px);
+  color: var(--color-text-primary);
+  margin-top: 0;
+  margin-bottom: 16px;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+}
+.lead-form-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;
+}
+.lead-form-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 24px;
+  align-items: start;
+}
+.lead-form-value-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.lead-form-value-item {
+  padding: 16px 18px;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  display: flex;
+  gap: 12px;
+}
+.lead-form-value-item[data-highlight] {
+  background: var(--color-surface-tinted);
+  border-color: var(--color-accent);
+}
+.lead-form-value-check {
+  color: var(--color-accent);
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1.4;
+  flex-shrink: 0;
+}
+.lead-form-value-title {
+  font-family: Inter, system-ui, sans-serif;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin-bottom: 4px;
+}
+.lead-form-value-body {
+  font-family: Inter, system-ui, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+.lead-form-value-link {
+  display: inline-block;
+  margin-top: 6px;
+  font-family: Inter, system-ui, sans-serif;
+  font-size: 13px;
+  color: var(--color-accent);
+  text-decoration: none;
+  font-weight: 600;
+}
+.lead-form-sent-message {
+  text-align: center;
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+.lead-form-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.lead-form-input {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  color: var(--color-text-primary);
+  border-radius: var(--radius-md);
+  padding: 10px 14px;
+  width: 100%;
+  font-family: var(--font-inter);
+  font-size: 14px;
+  outline: none;
+}
+.lead-form-input:focus {
+  border-color: var(--color-accent);
+  box-shadow: var(--shadow-focus);
+}
+.lead-form-field-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+.lead-form-field-label {
+  display: block;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-bottom: 4px;
+}
+.lead-form-select {
+  padding: 9px 14px;
+}
+.lead-form-fieldset {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 10px 14px;
+  margin: 0;
+}
+.lead-form-legend {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 0 6px;
+}
+.lead-form-radio-row {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+  margin-top: 6px;
+}
+.lead-form-radio-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-family: Inter, system-ui, sans-serif;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+}
+.lead-form-textarea {
+  resize: vertical;
+}
+.lead-form-submit {
+  width: 100%;
+  justify-content: center;
+  margin-top: 4px;
+}
+.lead-form-error {
+  font-size: 13px;
+  text-align: center;
+  color: var(--color-angular-red);
+  margin: 0;
+}
+
+/* CompatibilityMatrix — components/pricing/CompatibilityMatrix.tsx */
+.compat-matrix {
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  overflow: hidden;
+}
+.compat-matrix-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.compat-matrix-head-row {
+  background: var(--color-surface);
+}
+.compat-matrix-th {
+  text-align: left;
+  padding: 12px 16px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  font-size: var(--text-body);
+  border-bottom: 1px solid var(--color-border);
+}
+.compat-matrix-td-label {
+  padding: 12px 16px;
+  font-size: var(--text-body);
+  font-weight: 500;
+  border-bottom: 1px solid var(--color-border);
+}
+.compat-matrix-td-label[data-tone="success"] { color: #16a34a; }
+.compat-matrix-td-label[data-tone="warn"] { color: #d97706; }
+.compat-matrix-td-label[data-tone="info"] { color: var(--color-accent); }
+.compat-matrix-td-label[data-tone="muted"] { color: var(--color-text-muted); }
+.compat-matrix-td-versions {
+  padding: 12px 16px;
+  font-size: var(--text-body);
+  color: var(--color-text-secondary);
+  font-family: "JetBrains Mono", monospace;
+  border-bottom: 1px solid var(--color-border);
+}
+
+/* PricingFAQ — components/pricing/PricingFAQ.tsx */
+.pricing-faq-header {
+  text-align: center;
+  margin-bottom: 48px;
+}
+.pricing-faq-eyebrow {
+  margin-bottom: 16px;
+}
+.pricing-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;
+}
+.pricing-faq-items {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+/* PostCard — components/blog/PostCard.tsx */
+.post-card {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 24px;
+  border-radius: 12px;
+  background: var(--color-surface-tinted);
+  border: 1px solid var(--color-border);
+  color: var(--color-text-primary);
+  text-decoration: none;
+  cursor: pointer;
+}
+.post-card-meta {
+  font-family: var(--font-mono);
+  font-size: var(--text-eyebrow);
+  font-weight: var(--text-eyebrow--font-weight);
+  letter-spacing: var(--text-eyebrow--letter-spacing);
+  text-transform: uppercase;
+  color: var(--color-text-muted);
+}
+.post-card-title {
+  font-family: var(--font-inter);
+  font-size: var(--text-h3);
+  line-height: var(--text-h3--line-height);
+  font-weight: var(--text-h3--font-weight);
+  letter-spacing: -0.01em;
+  margin: 0;
+}
+.post-card-description {
+  font-size: 15px;
+  line-height: 1.55;
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+.post-card-tags {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-top: 4px;
+}
+.post-card-tag {
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: var(--color-accent-surface);
+  color: var(--color-accent);
+}
+
+/* FeaturedPostCard — components/blog/FeaturedPostCard.tsx */
+.featured-post-card {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 32px;
+  border-radius: 16px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-accent);
+  color: var(--color-text-primary);
+  text-decoration: none;
+  cursor: pointer;
+  margin-bottom: 32px;
+}
+.featured-post-card-title {
+  font-family: var(--font-garamond);
+  font-size: var(--text-h2);
+  line-height: var(--text-h2--line-height);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  margin: 0;
+}
+.featured-post-card-description {
+  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;
+}
+.featured-post-card-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-top: 8px;
+  flex-wrap: wrap;
+}
+.featured-post-card-meta {
+  font-family: var(--font-mono);
+  font-size: var(--text-eyebrow);
+  font-weight: var(--text-eyebrow--font-weight);
+  letter-spacing: var(--text-eyebrow--letter-spacing);
+  text-transform: uppercase;
+  color: var(--color-text-muted);
+}
+
+/* BlogTagFilter — components/blog/BlogTagFilter.tsx */
+.blog-tag-filter {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 32px;
+}
+.blog-tag-pill {
+  padding: 6px 12px;
+  border-radius: 999px;
+  font-size: 13px;
+  font-weight: 500;
+  text-decoration: none;
+  line-height: 1.2;
+  cursor: pointer;
+  display: inline-block;
+  background: var(--color-accent-surface);
+  color: var(--color-accent);
+}
+.blog-tag-pill[data-active] {
+  background: var(--color-accent);
+  color: #ffffff;
+}
+.blog-tag-pill[data-static] {
+  cursor: default;
+}
+
+/* AuthorByline — components/blog/AuthorByline.tsx */
+.author-byline {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 14px;
+  opacity: 0.8;
+}
+.author-byline-avatar {
+  border-radius: 50%;
+}
+.author-byline-name {
+  font-weight: 600;
+}
+.author-byline-role {
+  opacity: 0.7;
+}
+
+/* TagChips — components/blog/TagChips.tsx */
+.tag-chips {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 24px;
+}
+.tag-chip {
+  font-size: 13px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: var(--color-accent-surface);
+  color: var(--color-accent);
+  text-decoration: none;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1.2;
+}
+
+/* ContactForm — components/contact/ContactForm.tsx */
+.contact-form-sent {
+  color: var(--color-text-primary);
+  padding: 24px;
+}
+.contact-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 480px;
+}
+.contact-form-label {
+  font-size: var(--text-body);
+  color: var(--color-text-primary);
+}
+.contact-form-optional {
+  color: var(--color-text-muted);
+}
+.contact-form-input {
+  display: block;
+  width: 100%;
+  padding: 10px 12px;
+  font-size: var(--text-body);
+  font-family: var(--font-inter);
+  color: var(--color-text-primary);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  margin-top: 4px;
+}
+.contact-form-textarea {
+  resize: vertical;
+}
+.contact-form-error {
+  color: #c00;
+}
+
+/* AltChannelRow — components/contact/AltChannelRow.tsx */
+.contact-alt-row {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  flex-wrap: wrap;
+  margin: 0;
+}
+.contact-alt-link {
+  color: var(--color-accent);
+  text-decoration: none;
+  font-size: var(--text-body);
+  font-family: var(--font-inter);
+}
+.contact-alt-sep {
+  color: var(--color-text-muted);
+}
+
+/* SlaCard — components/contact/SlaCard.tsx */
+.sla-card {
+  padding: 20px;
+  max-width: 480px;
+}
+.sla-card-text {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-size: var(--text-body);
+  font-family: var(--font-inter);
+  line-height: var(--text-body--line-height);
+}
+
+/* GitHubStarsPill — components/contact/GitHubStarsPill.tsx */
+.gh-stars-pill-link {
+  text-decoration: none;
+}
+
+/* SolutionDemoBlock — components/solutions/SolutionDemoBlock.tsx */
+.sol-demo-wrap {
+  max-width: 820px;
+  margin: 0 auto;
+}
+.sol-demo-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;
+}
+.sol-demo-caption {
+  font-family: var(--font-inter);
+  font-size: var(--text-body-lg);
+  line-height: var(--text-body-lg--line-height);
+  color: var(--color-text-secondary);
+  margin: 0 0 20px;
+  max-width: 62ch;
+}
+.sol-demo-note {
+  font-family: var(--font-inter);
+  font-size: var(--text-body);
+  color: var(--color-text-muted);
+  margin: 14px 0 0;
+}
+.sol-demo-note-link {
+  color: var(--color-accent);
+}
+
+/* SolutionCodeBlock — components/solutions/SolutionCodeBlock.tsx */
+.sol-code-wrap {
+  max-width: 820px;
+  margin: 0 auto;
+}
+.sol-code-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;
+}
+.sol-code-block-item {
+  margin-top: 24px;
+}
+.sol-code-block-item[data-first] {
+  margin-top: 0;
+}
+.sol-code-block-label {
+  font-family: "JetBrains Mono", monospace;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  color: var(--color-text-muted);
+  margin: 0 0 10px;
+}
+.solution-code {
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+  font-size: 14px;
+}
diff --git a/docs/superpowers/plans/2026-08-29-inline-style-substrate-migration.md b/docs/superpowers/plans/2026-08-29-inline-style-substrate-migration.md
index e588f57f1..8565cfd77 100644
--- a/docs/superpowers/plans/2026-08-29-inline-style-substrate-migration.md
+++ b/docs/superpowers/plans/2026-08-29-inline-style-substrate-migration.md
@@ -59,11 +59,12 @@ and this never bites.
 
 - Dev server: Browser pane `preview_start` with the `website-dev` launch entry.
   Never `npm run dev` via Bash.
-- Website tests: `cd apps/website && npx vitest run --config vite.config.mts`
-  — there is **no `nx test website` target**. Baseline: `5 failed | 341 passed`
-  (pre-existing content-assertion drift in `PostCard`, `Differentiator`,
-  `thanks/page`). Exactly those 5 must still fail after every batch; a 6th is
-  yours.
+- Website tests: `npx nx test website` — **SUPERSEDED mid-arc (2026-08-29):
+  #851 gave the suite an nx target and repaired the three rotted spec files.**
+  The "5 pre-existing failures" baseline that batches 1-4 asserted against is
+  retired; the suite is fully green (347+ tests) and every remaining batch
+  must keep it that way. Any failure is yours. (The direct
+  `cd apps/website && npx vitest run --config vite.config.mts` still works.)
 - Lint errors (CI fails on errors, tolerates warnings; strip ANSI first):
   `npx nx lint website 2>&1 | sed -r 's/\x1b\[[0-9;]*m//g' | grep -cE '  error  '`
 - Prod build gate before every PR: `npx nx build website --configuration=production`