From 3aab28b7a9e461d5b331eaeb20eb84bd0af7d85d Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Sat, 29 Aug 2026 12:59:28 -0700
Subject: [PATCH 1/4] refactor(website): move Footer chrome to chrome.css,
 hover handlers become :hover

Move Footer.tsx's static presentation (root background/border, tagline,
newsletter success/input, column eyebrows, social icons, link colors,
bottom bar) into chrome.css as .footer-* classes. Replace all 23
onMouseEnter/onMouseLeave color-toggle pairs with :hover rules; one
.footer-link class covers the 19 identical column-link styles and one
.footer-social-link covers the two icon links. Footer keeps 'use client'
(NewsletterForm has real submit state).
---
 apps/website/src/components/shared/Footer.tsx | 164 ++++++------------
 apps/website/src/styles/chrome.css            |  52 ++++++
 2 files changed, 103 insertions(+), 113 deletions(-)

diff --git a/apps/website/src/components/shared/Footer.tsx b/apps/website/src/components/shared/Footer.tsx
index 2ba7567e1..658022dbf 100644
--- a/apps/website/src/components/shared/Footer.tsx
+++ b/apps/website/src/components/shared/Footer.tsx
@@ -1,7 +1,6 @@
 'use client';
 import { useState } from 'react';
 import Link from 'next/link';
-import { tokens } from '@threadplane/design-tokens';
 import { analyticsEvents } from '../../lib/analytics/events';
 import { track, trackCtaClick, trackExternalLinkClick } from '../../lib/analytics/client';
 import { SHORT_POSITIONING_DESCRIPTION } from '../../lib/positioning';
@@ -62,7 +61,7 @@ function NewsletterForm() {
   };
 
   if (state === 'done') {
-    return <p className="text-sm mb-4" style={{ color: '#1a7a40' }}>✓ You&apos;re subscribed!</p>;
+    return <p className="text-sm mb-4 footer-newsletter-success">✓ You&apos;re subscribed!</p>;
   }
 
   return (
@@ -77,13 +76,7 @@ function NewsletterForm() {
         onChange={e => setEmail(e.target.value)}
         required
         disabled={state === 'submitting'}
-        className="text-sm rounded-lg px-3 py-2 flex-1 min-w-0"
-        style={{
-          background: tokens.surfaces.surface,
-          border: `1px solid ${tokens.surfaces.border}`,
-          color: tokens.colors.textPrimary,
-          outline: 'none',
-        }}
+        className="text-sm rounded-lg px-3 py-2 flex-1 min-w-0 footer-newsletter-input"
       />
       <Button
         type="submit"
@@ -108,13 +101,7 @@ export function Footer() {
   };
 
   return (
-    <footer
-      className="px-6 md:px-8 py-16 mt-24"
-      style={{
-        background: tokens.surfaces.surface,
-        borderTop: `1px solid ${tokens.surfaces.border}`,
-      }}
-    >
+    <footer className="px-6 md:px-8 py-16 mt-24 footer-root">
       <div className="max-w-6xl mx-auto">
 
         {/* Top section: brand + columns */}
@@ -124,7 +111,7 @@ export function Footer() {
             <div className="mb-2">
               <LogoMark size="md" />
             </div>
-            <p className="text-sm mb-4" style={{ color: tokens.colors.textMuted, maxWidth: '36ch', lineHeight: 1.6 }}>
+            <p className="text-sm mb-4 footer-tagline">
               {SHORT_POSITIONING_DESCRIPTION}
             </p>
             <NewsletterForm />
@@ -138,10 +125,7 @@ export function Footer() {
                   cta_id: 'footer_github_icon',
                   cta_text: 'GitHub',
                 })}
-                className="transition-colors"
-                style={{ color: tokens.colors.textMuted, minWidth: 44, minHeight: 44, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}
-                onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
-                onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textMuted)}
+                className="transition-colors footer-social-link"
                 aria-label="GitHub">
                 <GitHubIcon />
               </a>
@@ -153,10 +137,7 @@ export function Footer() {
                   cta_id: 'footer_npm_icon',
                   cta_text: 'npm',
                 })}
-                className="transition-colors"
-                style={{ color: tokens.colors.textMuted, minWidth: 44, minHeight: 44, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}
-                onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
-                onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textMuted)}
+                className="transition-colors footer-social-link"
                 aria-label="npm">
                 <NpmIcon />
               </a>
@@ -165,182 +146,139 @@ export function Footer() {
 
           {/* Product column */}
           <div className="flex flex-col gap-2.5 text-sm">
-            <Eyebrow tone="accent" style={{ marginBottom: 4 }}>Product</Eyebrow>
-            <Link href="/docs" className="transition-colors" style={{ color: tokens.colors.textSecondary }}
-              onClick={() => trackFooterCta('Documentation', '/docs')}
-              onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
-              onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+            <Eyebrow tone="accent" className="footer-column-eyebrow">Product</Eyebrow>
+            <Link href="/docs" className="transition-colors footer-link"
+              onClick={() => trackFooterCta('Documentation', '/docs')}>
               Documentation
             </Link>
-            <Link href="/docs/langgraph/api/inject-agent" className="transition-colors" style={{ color: tokens.colors.textSecondary }}
-              onClick={() => trackFooterCta('API Reference', '/docs/langgraph/api/inject-agent')}
-              onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
-              onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+            <Link href="/docs/langgraph/api/inject-agent" className="transition-colors footer-link"
+              onClick={() => trackFooterCta('API Reference', '/docs/langgraph/api/inject-agent')}>
               API Reference
             </Link>
             {DEMOS.map((demo) => (
-              <a key={demo.key} href={demo.href} className="transition-colors" style={{ color: tokens.colors.textSecondary }}
+              <a key={demo.key} href={demo.href} className="transition-colors footer-link"
                 onClick={() => trackExternalLinkClick(demo.href, {
                   surface: 'footer',
                   cta_id: `footer_demo_${demoCtaSuffix(demo.key)}`,
                   cta_text: demo.label,
-                })}
-                onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
-                onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+                })}>
                 {demo.label}
               </a>
             ))}
-            <a href="https://cockpit.threadplane.ai" className="transition-colors" style={{ color: tokens.colors.textSecondary }}
+            <a href="https://cockpit.threadplane.ai" className="transition-colors footer-link"
               onClick={() => trackExternalLinkClick('https://cockpit.threadplane.ai', {
                 surface: 'footer',
                 cta_id: 'footer_examples',
                 cta_text: 'Examples',
-              })}
-              onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
-              onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+              })}>
               Examples
             </a>
-            <Link href="/pricing" className="transition-colors" style={{ color: tokens.colors.textSecondary }}
-              onClick={() => trackFooterCta('Pricing', '/pricing')}
-              onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
-              onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+            <Link href="/pricing" className="transition-colors footer-link"
+              onClick={() => trackFooterCta('Pricing', '/pricing')}>
               Pricing
             </Link>
             <a href="https://github.com/cacheplane/angular-agent-framework"
               target="_blank" rel="noopener noreferrer"
-              className="transition-colors" style={{ color: tokens.colors.textSecondary }}
+              className="transition-colors footer-link"
               onClick={() => trackExternalLinkClick('https://github.com/cacheplane/angular-agent-framework', {
                 surface: 'footer',
                 cta_id: 'footer_github',
                 cta_text: 'GitHub',
-              })}
-              onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
-              onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+              })}>
               GitHub
             </a>
           </div>
 
           {/* Libraries column */}
           <div className="flex flex-col gap-2.5 text-sm">
-            <Eyebrow tone="accent" style={{ marginBottom: 4 }}>Libraries</Eyebrow>
-            <Link href="/langgraph" className="transition-colors" style={{ color: tokens.colors.textSecondary }}
-              onClick={() => trackFooterCta('LangGraph', '/langgraph')}
-              onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
-              onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+            <Eyebrow tone="accent" className="footer-column-eyebrow">Libraries</Eyebrow>
+            <Link href="/langgraph" className="transition-colors footer-link"
+              onClick={() => trackFooterCta('LangGraph', '/langgraph')}>
               LangGraph
             </Link>
-            <Link href="/ag-ui" className="transition-colors" style={{ color: tokens.colors.textSecondary }}
-              onClick={() => trackFooterCta('AG-UI', '/ag-ui')}
-              onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
-              onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+            <Link href="/ag-ui" className="transition-colors footer-link"
+              onClick={() => trackFooterCta('AG-UI', '/ag-ui')}>
               AG-UI
             </Link>
-            <Link href="/render" className="transition-colors" style={{ color: tokens.colors.textSecondary }}
-              onClick={() => trackFooterCta('Render', '/render')}
-              onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
-              onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+            <Link href="/render" className="transition-colors footer-link"
+              onClick={() => trackFooterCta('Render', '/render')}>
               Render
             </Link>
-            <Link href="/chat" className="transition-colors" style={{ color: tokens.colors.textSecondary }}
-              onClick={() => trackFooterCta('Chat', '/chat')}
-              onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
-              onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+            <Link href="/chat" className="transition-colors footer-link"
+              onClick={() => trackFooterCta('Chat', '/chat')}>
               Chat
             </Link>
           </div>
 
           {/* Solutions column */}
           <div className="flex flex-col gap-2.5 text-sm">
-            <Eyebrow tone="accent" style={{ marginBottom: 4 }}>Solutions</Eyebrow>
-            <Link href="/solutions/compliance" className="transition-colors" style={{ color: tokens.colors.textSecondary }}
-              onClick={() => trackFooterCta('Compliance', '/solutions/compliance')}
-              onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
-              onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+            <Eyebrow tone="accent" className="footer-column-eyebrow">Solutions</Eyebrow>
+            <Link href="/solutions/compliance" className="transition-colors footer-link"
+              onClick={() => trackFooterCta('Compliance', '/solutions/compliance')}>
               Compliance
             </Link>
-            <Link href="/solutions/analytics" className="transition-colors" style={{ color: tokens.colors.textSecondary }}
-              onClick={() => trackFooterCta('Analytics', '/solutions/analytics')}
-              onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
-              onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+            <Link href="/solutions/analytics" className="transition-colors footer-link"
+              onClick={() => trackFooterCta('Analytics', '/solutions/analytics')}>
               Analytics
             </Link>
-            <Link href="/solutions/customer-support" className="transition-colors" style={{ color: tokens.colors.textSecondary }}
-              onClick={() => trackFooterCta('Customer Support', '/solutions/customer-support')}
-              onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
-              onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+            <Link href="/solutions/customer-support" className="transition-colors footer-link"
+              onClick={() => trackFooterCta('Customer Support', '/solutions/customer-support')}>
               Customer Support
             </Link>
-            <Link href="/solutions" className="transition-colors" style={{ color: tokens.colors.textSecondary }}
-              onClick={() => trackFooterCta('All Solutions', '/solutions')}
-              onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
-              onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+            <Link href="/solutions" className="transition-colors footer-link"
+              onClick={() => trackFooterCta('All Solutions', '/solutions')}>
               All solutions
             </Link>
           </div>
 
           {/* Resources column */}
           <div className="flex flex-col gap-2.5 text-sm">
-            <Eyebrow tone="accent" style={{ marginBottom: 4 }}>Resources</Eyebrow>
-            <Link href="/pilot-to-prod" className="transition-colors" style={{ color: tokens.colors.textSecondary }}
-              onClick={() => trackFooterCta('Pilot to Prod', '/pilot-to-prod')}
-              onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
-              onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+            <Eyebrow tone="accent" className="footer-column-eyebrow">Resources</Eyebrow>
+            <Link href="/pilot-to-prod" className="transition-colors footer-link"
+              onClick={() => trackFooterCta('Pilot to Prod', '/pilot-to-prod')}>
               Pilot to Prod
             </Link>
-            <Link href="/blog" className="transition-colors" style={{ color: tokens.colors.textSecondary }}
-              onClick={() => trackFooterCta('Blog', '/blog')}
-              onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
-              onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+            <Link href="/blog" className="transition-colors footer-link"
+              onClick={() => trackFooterCta('Blog', '/blog')}>
               Blog
             </Link>
             <a href="https://www.npmjs.com/package/@threadplane/langgraph"
               target="_blank" rel="noopener noreferrer"
-              className="transition-colors" style={{ color: tokens.colors.textSecondary }}
+              className="transition-colors footer-link"
               onClick={() => trackExternalLinkClick('https://www.npmjs.com/package/@threadplane/langgraph', {
                 surface: 'footer',
                 cta_id: 'footer_npm_package',
                 cta_text: 'npm Package',
-              })}
-              onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
-              onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+              })}>
               npm Package
             </a>
-            <Link href="/about" className="transition-colors" style={{ color: tokens.colors.textSecondary }}
-              onClick={() => trackFooterCta('About', '/about')}
-              onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
-              onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+            <Link href="/about" className="transition-colors footer-link"
+              onClick={() => trackFooterCta('About', '/about')}>
               About
             </Link>
-            <Link href="/docs/licensing" className="transition-colors" style={{ color: tokens.colors.textSecondary }}
-              onClick={() => trackFooterCta('Licensing', '/docs/licensing')}
-              onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
-              onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+            <Link href="/docs/licensing" className="transition-colors footer-link"
+              onClick={() => trackFooterCta('Licensing', '/docs/licensing')}>
               Licensing
             </Link>
           </div>
         </div>
 
         {/* Bottom bar */}
-        <div className="mt-12 pt-8 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 text-xs"
-          style={{ borderTop: `1px solid ${tokens.surfaces.border}`, color: tokens.colors.textMuted }}>
+        <div className="mt-12 pt-8 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 text-xs footer-bottom-bar">
           <span>&copy; {new Date().getFullYear()} Threadplane. All rights reserved.</span>
           <span>
             <Link
               href="/docs/licensing"
-              className="transition-colors"
+              className="transition-colors footer-legal-link"
               onClick={() => trackFooterCta('Licensing Bottom', '/docs/licensing')}
-              onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
-              onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textMuted)}
             >
               Licensing
             </Link>
             &nbsp;&middot;&nbsp;
             <Link
               href="/pricing"
-              className="transition-colors"
+              className="transition-colors footer-legal-link"
               onClick={() => trackFooterCta('Pricing Bottom', '/pricing')}
-              onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
-              onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textMuted)}
             >
               Pricing
             </Link>
diff --git a/apps/website/src/styles/chrome.css b/apps/website/src/styles/chrome.css
index 30c39d9c4..afb1c62d3 100644
--- a/apps/website/src/styles/chrome.css
+++ b/apps/website/src/styles/chrome.css
@@ -7,4 +7,56 @@
  * these in @layer would let utilities win and change rendering.
  *
  * Migration: docs/superpowers/plans/2026-08-29-inline-style-substrate-migration.md
+ *
+ * Font-family exception: see the top of ui.css for the next/font
+ * shadowing rationale. Verbatim raw-stack literals below
+ * ('Inter, sans-serif', 'var(--font-mono,"JetBrains Mono",monospace)',
+ * 'var(--font-garamond,"EB Garamond",Georgia,serif)') are intentional.
  */
+
+/* Footer */
+.footer-root {
+  background: var(--color-surface);
+  border-top: 1px solid var(--color-border);
+}
+.footer-tagline {
+  color: var(--color-text-muted);
+  max-width: 36ch;
+  line-height: 1.6;
+}
+.footer-newsletter-success {
+  color: #1a7a40;
+}
+.footer-newsletter-input {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  color: var(--color-text-primary);
+  outline: none;
+}
+.footer-column-eyebrow {
+  margin-bottom: 4px;
+}
+.footer-social-link {
+  color: var(--color-text-muted);
+  min-width: 44px;
+  min-height: 44px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.footer-social-link:hover {
+  color: var(--color-accent);
+}
+.footer-link {
+  color: var(--color-text-secondary);
+}
+.footer-link:hover {
+  color: var(--color-accent);
+}
+.footer-bottom-bar {
+  border-top: 1px solid var(--color-border);
+  color: var(--color-text-muted);
+}
+.footer-legal-link:hover {
+  color: var(--color-accent);
+}

From 24bf2a3bf39e80e3d29a1ba4a57f5324f0f5c383 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Sat, 29 Aug 2026 13:02:55 -0700
Subject: [PATCH 2/4] refactor(website): move Nav chrome to chrome.css

Move Nav.tsx's static presentation into chrome.css as .nav-* classes:
desktop links/GitHub icon (.nav-link), the demo dropdown
(.nav-demo-dropdown/-trigger/-caret/-menu/-item), the nav bar and
hamburger hit-area (comment preserved), the mobile overlay and its tab
bars (tabStyle/subTabStyle become .nav-mtab/.nav-msubtab with
[data-active]), and the mobile link lists (.nav-mobile-item/-site-link/
-github-link/-demo-link/-section-toggle/-chevron). Replace the 5
onMouseEnter/onMouseLeave color-toggle pairs with :hover rules; bounded
active-state ternaries become data-active/data-open attributes. The
mobile overlay's `top: 57` offset and the hamburger's negative-margin
hit-area trick move verbatim. Nav keeps 'use client' (menu/dropdown
state).
---
 apps/website/src/components/shared/Nav.tsx | 158 ++++----------
 apps/website/src/styles/chrome.css         | 239 +++++++++++++++++++++
 2 files changed, 275 insertions(+), 122 deletions(-)

diff --git a/apps/website/src/components/shared/Nav.tsx b/apps/website/src/components/shared/Nav.tsx
index ce5d765ca..4509be2b5 100644
--- a/apps/website/src/components/shared/Nav.tsx
+++ b/apps/website/src/components/shared/Nav.tsx
@@ -51,26 +51,20 @@ function DemoDropdown() {
     return () => document.removeEventListener('mousedown', handler);
   }, []);
   return (
-    <div ref={ref} style={{ position: 'relative' }}>
+    <div ref={ref} className="nav-demo-dropdown">
       <button
         onClick={() => setOpen((o) => !o)}
-        className="text-sm font-mono transition-colors"
-        style={{ color: tokens.colors.textSecondary, background: 'none', border: 'none', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 4 }}
-        onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
-        onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}
+        className="text-sm font-mono transition-colors nav-demo-trigger"
         aria-haspopup="true" aria-expanded={open}
       >
-        Demo <span style={{ fontSize: 10, transition: 'transform .2s', transform: open ? 'rotate(180deg)' : 'rotate(0)' }}>&#9662;</span>
+        Demo <span className="nav-demo-caret" data-open={open || undefined}>&#9662;</span>
       </button>
       {open && (
-        <div style={{ position: 'absolute', top: '100%', left: 0, marginTop: 8, minWidth: 180, background: tokens.surfaces.surface, border: `1px solid ${tokens.surfaces.border}`, borderRadius: 8, boxShadow: tokens.shadows.md, overflow: 'hidden', zIndex: 60 }}>
+        <div className="nav-demo-menu">
           {DEMOS.map((demo) => (
             <a key={demo.key} href={demo.href} target="_blank" rel="noopener noreferrer"
               onClick={() => { setOpen(false); trackExternalLinkClick(demo.href, { surface: 'nav', cta_id: `nav_demo_${demoCtaSuffix(demo.key)}`, cta_text: demo.label }); }}
-              className="text-sm font-mono"
-              style={{ display: 'block', padding: '10px 14px', color: tokens.colors.textSecondary, textDecoration: 'none' }}
-              onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
-              onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+              className="text-sm font-mono nav-demo-item">
               {demo.label}
             </a>
           ))}
@@ -117,25 +111,6 @@ export function Nav() {
     });
   };
 
-  const tabStyle = (active: boolean): React.CSSProperties => ({
-    flex: 1, textAlign: 'center', padding: '10px 0',
-    fontSize: 15, fontWeight: 500, fontFamily: 'Inter, sans-serif',
-    background: active ? tokens.colors.accentSurface : 'transparent',
-    color: active ? tokens.colors.accent : tokens.colors.textMuted,
-    border: 'none', borderRadius: 8, cursor: 'pointer',
-    minHeight: 44,
-  });
-
-  const subTabStyle = (active: boolean): React.CSSProperties => ({
-    flex: 1, textAlign: 'center', padding: '8px 0',
-    fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
-    fontSize: '0.75rem', fontWeight: 600,
-    background: active ? tokens.colors.accentSurface : 'transparent',
-    color: active ? tokens.colors.accent : tokens.colors.textMuted,
-    border: 'none', borderRadius: 6, cursor: 'pointer',
-    minHeight: 36,
-  });
-
   const currentLib = docsConfig.find(lib => lib.id === mobileLibrary);
   const trackNavLink = (label: string, href: string, external: boolean, surface: 'nav' | 'mobile_nav') => {
     const slug = label.toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_|_$/g, '');
@@ -150,17 +125,10 @@ export function Nav() {
 
   return (
     <>
-    <nav
-      className="fixed top-0 left-0 right-0 z-50"
-      style={{
-        background: tokens.surfaces.surface,
-        borderBottom: `1px solid ${tokens.surfaces.border}`,
-        boxShadow: tokens.shadows.sm,
-      }}
-    >
+    <nav className="fixed top-0 left-0 right-0 z-50 nav-bar">
       {/* Top bar */}
       <div className="flex items-center justify-between px-6 py-4 md:px-8 md:py-5">
-        <Link href="/" style={{ textDecoration: 'none' }}>
+        <Link href="/" className="nav-logo-link">
           <LogoMark size="md" />
         </Link>
 
@@ -171,19 +139,13 @@ export function Nav() {
               target="_blank"
               rel="noopener noreferrer"
               onClick={() => trackNavLink(l.label, l.href, true, 'nav')}
-              className="text-sm font-mono transition-colors"
-              style={{ color: tokens.colors.textSecondary }}
-              onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
-              onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+              className="text-sm font-mono transition-colors nav-link">
               {l.label}
             </a>
           ) : (
             <Link key={l.href} href={l.href}
               onClick={() => trackNavLink(l.label, l.href, false, 'nav')}
-              className="text-sm font-mono transition-colors"
-              style={{ color: tokens.colors.textSecondary }}
-              onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
-              onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+              className="text-sm font-mono transition-colors nav-link">
               {l.label}
             </Link>
           ))}
@@ -196,10 +158,7 @@ export function Nav() {
               cta_id: 'nav_github',
               cta_text: 'GitHub',
             })}
-            className="transition-colors"
-            style={{ color: tokens.colors.textSecondary }}
-            onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
-            onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}
+            className="transition-colors nav-link"
             aria-label="GitHub repository">
             <GitHubIcon />
           </a>
@@ -220,19 +179,9 @@ export function Nav() {
 
         {/* Mobile hamburger */}
         <button
-          className="lg:hidden inline-flex items-center justify-center"
+          className="lg:hidden inline-flex items-center justify-center nav-hamburger"
           onClick={() => { setOpen(!open); if (!open) setMobileTab(isDocsPage ? 'docs' : 'site'); }}
-          aria-label={open ? 'Close menu' : 'Open menu'}
-          style={{
-            color: tokens.colors.textPrimary,
-            // Expand hit area to >=44x44 without shifting visual layout.
-            // NOTE: display/centering live in the className (inline-flex
-            // items-center justify-center) so `lg:hidden` can win at >=lg.
-            // An inline `display` would override the utility and leak the
-            // hamburger onto desktop, pushing the nav links to center.
-            padding: 12,
-            margin: -12,
-          }}>
+          aria-label={open ? 'Close menu' : 'Open menu'}>
           {open ? <CloseIcon /> : <MenuIcon />}
         </button>
       </div>
@@ -241,30 +190,21 @@ export function Nav() {
 
     {/* Mobile full-screen overlay — rendered outside nav to avoid stacking context issues */}
     {open && (
-      <div className="lg:hidden fixed left-0 right-0 bottom-0"
-        style={{
-          top: 57,
-          zIndex: 9999,
-          background: tokens.surfaces.surface,
-          borderTop: `1px solid ${tokens.surfaces.border}`,
-          boxShadow: tokens.shadows.lg,
-          overflowY: 'auto',
-          WebkitOverflowScrolling: 'touch',
-        }}>
-          <div style={{ padding: '16px 24px', display: 'flex', flexDirection: 'column', gap: 16, minHeight: '100%' }}>
+      <div className="lg:hidden fixed left-0 right-0 bottom-0 nav-mobile-overlay">
+          <div className="nav-mobile-overlay-inner">
 
             {/* Primary tabs — only on docs pages */}
             {isDocsPage && (
-              <div style={{ display: 'flex', gap: 6, padding: '4px', background: 'rgba(0,0,0,0.03)', borderRadius: 10 }}>
-                <button onClick={() => setMobileTab('site')} style={tabStyle(mobileTab === 'site')}>Site</button>
-                <button onClick={() => setMobileTab('docs')} style={tabStyle(mobileTab === 'docs')}>Docs</button>
+              <div className="nav-mtabs">
+                <button onClick={() => setMobileTab('site')} className="nav-mtab" data-active={mobileTab === 'site' || undefined}>Site</button>
+                <button onClick={() => setMobileTab('docs')} className="nav-mtab" data-active={mobileTab === 'docs' || undefined}>Docs</button>
               </div>
             )}
 
             {/* Library sub-tabs — only when Docs tab active */}
             {isDocsPage && mobileTab === 'docs' && (
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-                <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+              <div className="nav-msubtabs-wrap">
+                <div className="nav-mobile-list">
                   {specialDocsPages.map((page) => {
                     const isActive = pathname === page.path;
                     return (
@@ -281,22 +221,17 @@ export function Nav() {
                           });
                           setOpen(false);
                         }}
-                        style={{
-                          display: 'block', padding: '12px 14px', borderRadius: 8,
-                          fontSize: 16, lineHeight: '24px', minHeight: 44,
-                          color: isActive ? tokens.colors.accent : tokens.colors.textSecondary,
-                          background: isActive ? tokens.colors.accentSurface : 'transparent',
-                          textDecoration: 'none', fontFamily: 'Inter, sans-serif', fontWeight: 600,
-                        }}
+                        className="nav-mobile-item nav-mobile-item--strong"
+                        data-active={isActive || undefined}
                       >
                         {page.title}
                       </Link>
                     );
                   })}
                 </div>
-                <div style={{ display: 'flex', gap: 4, padding: '3px', background: 'rgba(0,0,0,0.03)', borderRadius: 8 }}>
+                <div className="nav-msubtabs">
                   {docsConfig.map(lib => (
-                    <button key={lib.id} onClick={() => setMobileLibrary(lib.id)} style={subTabStyle(mobileLibrary === lib.id)}>
+                    <button key={lib.id} onClick={() => setMobileLibrary(lib.id)} className="nav-msubtab" data-active={mobileLibrary === lib.id || undefined}>
                       {lib.title}
                     </button>
                   ))}
@@ -306,7 +241,7 @@ export function Nav() {
 
             {/* Docs content */}
             {(mobileTab === 'docs' && isDocsPage && currentLib) && (
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+              <div className="nav-mobile-content-list">
                 {currentLib.demoUrl && (
                   <a href={currentLib.demoUrl} target="_blank" rel="noopener noreferrer"
                     onClick={() => {
@@ -315,7 +250,7 @@ export function Nav() {
                       trackExternalLinkClick(demoUrl, { surface: 'mobile_nav', cta_id: `mobile_nav_docs_demo_${currentLib.id}`, cta_text: currentLib.demoLabel ?? 'Live demo' });
                       setOpen(false);
                     }}
-                    style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 14px', borderRadius: 8, minHeight: 44, color: tokens.colors.accent, background: tokens.colors.accentSurface, textDecoration: 'none', fontFamily: 'Inter, sans-serif', fontWeight: 600 }}>
+                    className="nav-mobile-demo-link">
                     <span>{currentLib.demoLabel ?? 'Live demo'}</span><span aria-hidden="true">↗</span>
                   </a>
                 )}
@@ -324,22 +259,16 @@ export function Nav() {
                     <div key={section.id}>
                       <button
                         onClick={() => toggleSection(section.id)}
-                        style={{
-                          width: '100%', textAlign: 'left', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-                          background: 'none', border: 'none', cursor: 'pointer',
-                          padding: '12px 14px', minHeight: 48, borderRadius: 8,
-                          fontFamily: 'Inter, sans-serif', fontSize: 16, lineHeight: '24px',
-                          color: tokens.colors.textPrimary,
-                        }}
+                        className="nav-mobile-section-toggle"
                       >
                         {section.title}
                         <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke={tokens.colors.textMuted} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
-                          style={{ transition: 'transform 0.25s ease', transform: openSections.has(section.id) ? 'rotate(180deg)' : 'rotate(0)', flexShrink: 0 }}>
+                          className="nav-mobile-chevron" data-open={openSections.has(section.id) || undefined}>
                           <path d="M5 7.5l5 5 5-5" />
                         </svg>
                       </button>
                       {openSections.has(section.id) && (
-                        <nav style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+                        <nav className="nav-mobile-list">
                           {section.pages.map((page) => {
                             const isActive = page.section === activeSection && page.slug === activeSlug && mobileLibrary === activeLibrary;
                             return (
@@ -356,13 +285,8 @@ export function Nav() {
                                   });
                                   setOpen(false);
                                 }}
-                                style={{
-                                  display: 'block', padding: '12px 14px', borderRadius: 8,
-                                  fontSize: 16, lineHeight: '24px', minHeight: 44,
-                                  color: isActive ? tokens.colors.accent : tokens.colors.textSecondary,
-                                  background: isActive ? tokens.colors.accentSurface : 'transparent',
-                                  textDecoration: 'none', fontFamily: 'Inter, sans-serif',
-                                }}
+                                className="nav-mobile-item"
+                                data-active={isActive || undefined}
                               >
                                 {page.title}
                               </Link>
@@ -378,7 +302,7 @@ export function Nav() {
 
             {/* Site content */}
             {(mobileTab === 'site' || !isDocsPage) && (
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+              <div className="nav-mobile-list">
                 {links.map((l) => {
                   const LinkEl = l.external ? 'a' : Link;
                   const extraProps = l.external ? { target: '_blank', rel: 'noopener noreferrer' } : {};
@@ -388,12 +312,7 @@ export function Nav() {
                         trackNavLink(l.label, l.href, l.external, 'mobile_nav');
                         setOpen(false);
                       }}
-                      style={{
-                        display: 'block', padding: '14px 14px', borderRadius: 8,
-                        fontSize: 16, lineHeight: '24px', minHeight: 48,
-                        color: tokens.colors.textSecondary, textDecoration: 'none',
-                        fontFamily: 'Inter, sans-serif',
-                      }}
+                      className="nav-mobile-site-link"
                     >
                       {l.label}
                     </LinkEl>
@@ -402,7 +321,7 @@ export function Nav() {
                 {DEMOS.map((demo) => (
                   <a key={demo.key} href={demo.href} target="_blank" rel="noopener noreferrer"
                     onClick={() => { trackExternalLinkClick(demo.href, { surface: 'mobile_nav', cta_id: `mobile_nav_demo_${demoCtaSuffix(demo.key)}`, cta_text: demo.label }); setOpen(false); }}
-                    style={{ display: 'block', padding: '14px 14px', borderRadius: 8, fontSize: 16, lineHeight: '24px', minHeight: 48, color: tokens.colors.textSecondary, textDecoration: 'none', fontFamily: 'Inter, sans-serif' }}>
+                    className="nav-mobile-site-link">
                     {demo.label}
                   </a>
                 ))}
@@ -416,15 +335,10 @@ export function Nav() {
                     });
                     setOpen(false);
                   }}
-                  style={{
-                    display: 'flex', alignItems: 'center', gap: 10,
-                    padding: '14px 14px', borderRadius: 8, minHeight: 48,
-                    color: tokens.colors.textSecondary, textDecoration: 'none',
-                    fontFamily: 'Inter, sans-serif', fontSize: 16,
-                  }}>
+                  className="nav-mobile-github-link">
                   <GitHubIcon /> GitHub
                 </a>
-                <div style={{ marginTop: 8 }}>
+                <div className="nav-mobile-cta-wrap">
                   <Button
                     variant="primary"
                     size="lg"
@@ -438,7 +352,7 @@ export function Nav() {
                       });
                       setOpen(false);
                     }}
-                    style={{ width: '100%', justifyContent: 'center' }}
+                    className="nav-mobile-cta"
                   >
                     Talk to Us
                   </Button>
diff --git a/apps/website/src/styles/chrome.css b/apps/website/src/styles/chrome.css
index afb1c62d3..b9ba93fef 100644
--- a/apps/website/src/styles/chrome.css
+++ b/apps/website/src/styles/chrome.css
@@ -60,3 +60,242 @@
 .footer-legal-link:hover {
   color: var(--color-accent);
 }
+
+/* Nav */
+.nav-logo-link {
+  text-decoration: none;
+}
+.nav-link {
+  color: var(--color-text-secondary);
+}
+.nav-link:hover {
+  color: var(--color-accent);
+}
+.nav-demo-dropdown {
+  position: relative;
+}
+.nav-demo-trigger {
+  color: var(--color-text-secondary);
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.nav-demo-trigger:hover {
+  color: var(--color-accent);
+}
+.nav-demo-caret {
+  font-size: 10px;
+  transition: transform 0.2s;
+  transform: rotate(0);
+}
+.nav-demo-caret[data-open] {
+  transform: rotate(180deg);
+}
+.nav-demo-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 8px;
+  min-width: 180px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  box-shadow: var(--shadow-md);
+  overflow: hidden;
+  z-index: 60;
+}
+.nav-demo-item {
+  display: block;
+  padding: 10px 14px;
+  color: var(--color-text-secondary);
+  text-decoration: none;
+}
+.nav-demo-item:hover {
+  color: var(--color-accent);
+}
+.nav-bar {
+  background: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
+  box-shadow: var(--shadow-sm);
+}
+.nav-hamburger {
+  color: var(--color-text-primary);
+  /* Expand hit area to >=44x44 without shifting visual layout.
+   * NOTE: display/centering live in the className (inline-flex
+   * items-center justify-center) so `lg:hidden` can win at >=lg.
+   * An inline `display` would override the utility and leak the
+   * hamburger onto desktop, pushing the nav links to center. */
+  padding: 12px;
+  margin: -12px;
+}
+.nav-mobile-overlay {
+  top: 57px;
+  z-index: 9999;
+  background: var(--color-surface);
+  border-top: 1px solid var(--color-border);
+  box-shadow: var(--shadow-lg);
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.nav-mobile-overlay-inner {
+  padding: 16px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-height: 100%;
+}
+.nav-mtabs {
+  display: flex;
+  gap: 6px;
+  padding: 4px;
+  background: rgba(0, 0, 0, 0.03);
+  border-radius: 10px;
+}
+.nav-mtab {
+  flex: 1;
+  text-align: center;
+  padding: 10px 0;
+  font-size: 15px;
+  font-weight: 500;
+  font-family: Inter, sans-serif;
+  background: transparent;
+  color: var(--color-text-muted);
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  min-height: 44px;
+}
+.nav-mtab[data-active] {
+  background: var(--color-accent-surface);
+  color: var(--color-accent);
+}
+.nav-msubtabs-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.nav-mobile-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.nav-mobile-content-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.nav-mobile-item {
+  display: block;
+  padding: 12px 14px;
+  border-radius: 8px;
+  font-size: 16px;
+  line-height: 24px;
+  min-height: 44px;
+  text-decoration: none;
+  font-family: Inter, sans-serif;
+  color: var(--color-text-secondary);
+  background: transparent;
+}
+.nav-mobile-item[data-active] {
+  color: var(--color-accent);
+  background: var(--color-accent-surface);
+}
+.nav-mobile-item--strong {
+  font-weight: 600;
+}
+.nav-msubtabs {
+  display: flex;
+  gap: 4px;
+  padding: 3px;
+  background: rgba(0, 0, 0, 0.03);
+  border-radius: 8px;
+}
+.nav-msubtab {
+  flex: 1;
+  text-align: center;
+  padding: 8px 0;
+  font-family: var(--font-mono,"JetBrains Mono",monospace);
+  font-size: 0.75rem;
+  font-weight: 600;
+  background: transparent;
+  color: var(--color-text-muted);
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  min-height: 36px;
+}
+.nav-msubtab[data-active] {
+  background: var(--color-accent-surface);
+  color: var(--color-accent);
+}
+.nav-mobile-demo-link {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 14px;
+  border-radius: 8px;
+  min-height: 44px;
+  color: var(--color-accent);
+  background: var(--color-accent-surface);
+  text-decoration: none;
+  font-family: Inter, sans-serif;
+  font-weight: 600;
+}
+.nav-mobile-section-toggle {
+  width: 100%;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 12px 14px;
+  min-height: 48px;
+  border-radius: 8px;
+  font-family: Inter, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--color-text-primary);
+}
+.nav-mobile-chevron {
+  transition: transform 0.25s ease;
+  flex-shrink: 0;
+  transform: rotate(0);
+}
+.nav-mobile-chevron[data-open] {
+  transform: rotate(180deg);
+}
+.nav-mobile-site-link {
+  display: block;
+  padding: 14px 14px;
+  border-radius: 8px;
+  font-size: 16px;
+  line-height: 24px;
+  min-height: 48px;
+  color: var(--color-text-secondary);
+  text-decoration: none;
+  font-family: Inter, sans-serif;
+}
+.nav-mobile-github-link {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 14px;
+  border-radius: 8px;
+  min-height: 48px;
+  color: var(--color-text-secondary);
+  text-decoration: none;
+  font-family: Inter, sans-serif;
+  font-size: 16px;
+}
+.nav-mobile-cta-wrap {
+  margin-top: 8px;
+}
+.nav-mobile-cta {
+  width: 100%;
+  justify-content: center;
+}

From 09a816bb62d5ce0193a101cce5dcefce5ec2422f Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Sat, 29 Aug 2026 13:04:01 -0700
Subject: [PATCH 3/4] refactor(website): move AnnouncementToast chrome to
 chrome.css
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Move AnnouncementToast.tsx's static box/text presentation into
chrome.css as .toast-* classes. Root keeps only opacity/transform
inline (interpolated from the entrance-animation `mounted` state); all
other root styling (position, sizing, background/border/shadow,
padding, transition) moves. The one hardcoded hex success color
(#1a7a40) moves verbatim, unmapped to a token as in the source.

Also converts the email input's onFocus/onBlur border-color toggle
(the same presentation-only DOM-mutation pattern as the batch's hover
handlers, just focus-triggered) into a :focus rule — :focus rather
than :focus-visible so any focus method reproduces the original
behavior exactly.
---
 .../components/shared/AnnouncementToast.tsx   | 103 +++---------------
 apps/website/src/styles/chrome.css            |  97 +++++++++++++++++
 2 files changed, 110 insertions(+), 90 deletions(-)

diff --git a/apps/website/src/components/shared/AnnouncementToast.tsx b/apps/website/src/components/shared/AnnouncementToast.tsx
index 01acbd8e9..b51411dbd 100644
--- a/apps/website/src/components/shared/AnnouncementToast.tsx
+++ b/apps/website/src/components/shared/AnnouncementToast.tsx
@@ -1,6 +1,5 @@
 'use client';
 import { useState, useEffect } from 'react';
-import { tokens } from '@threadplane/design-tokens';
 import { analyticsEvents } from '../../lib/analytics/events';
 import { track, trackWhitepaperDownloadClick } from '../../lib/analytics/client';
 import { Button } from '../ui/Button';
@@ -83,97 +82,43 @@ export function AnnouncementToast() {
     setTimeout(dismiss, 4000);
   };
 
-  const inputStyle: React.CSSProperties = {
-    width: '100%',
-    background: tokens.surfaces.surface,
-    border: `1px solid ${tokens.surfaces.border}`,
-    borderRadius: tokens.radius.md,
-    padding: '8px 12px',
-    fontSize: '0.82rem',
-    color: tokens.colors.textPrimary,
-    fontFamily: 'Inter, sans-serif',
-    outline: 'none',
-  };
-
   if (!visible) return null;
 
   return (
     <div
       role="alert"
       aria-live="polite"
+      className="toast-root"
       style={{
-        position: 'fixed',
-        bottom: 24,
-        right: 24,
-        zIndex: 100,
-        maxWidth: 360,
-        width: 'calc(100vw - 48px)',
-        background: tokens.surfaces.surface,
-        border: `1px solid ${tokens.surfaces.border}`,
-        boxShadow: tokens.shadows.lg,
-        borderRadius: tokens.radius.lg,
-        padding: '20px 24px',
         opacity: mounted ? 1 : 0,
         transform: mounted ? 'translateY(0)' : 'translateY(12px)',
-        transition: 'opacity 200ms ease, transform 240ms ease',
       }}
     >
       {/* Dismiss button */}
       <button
         onClick={dismiss}
         aria-label="Dismiss"
-        style={{
-          position: 'absolute',
-          top: 10,
-          right: 12,
-          background: 'none',
-          border: 'none',
-          cursor: 'pointer',
-          color: tokens.colors.textMuted,
-          fontSize: 18,
-          lineHeight: 1,
-          padding: 4,
-        }}
+        className="toast-close"
       >
         ×
       </button>
 
       {/* Eyebrow */}
-      <p style={{
-        fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
-        fontSize: '0.62rem',
-        textTransform: 'uppercase',
-        letterSpacing: '0.1em',
-        fontWeight: 700,
-        color: tokens.colors.accent,
-        marginBottom: 8,
-      }}>
+      <p className="toast-eyebrow">
         Free Guide
       </p>
 
       {/* Title */}
-      <p style={{
-        fontFamily: 'var(--font-garamond,"EB Garamond",Georgia,serif)',
-        fontSize: '1.05rem',
-        fontWeight: 700,
-        color: tokens.colors.textPrimary,
-        lineHeight: 1.3,
-        marginBottom: 6,
-      }}>
+      <p className="toast-title">
         From Prototype to Production
       </p>
 
       {step === 'cta' && (
         <>
-          <p style={{
-            fontSize: '0.82rem',
-            color: tokens.colors.textSecondary,
-            lineHeight: 1.5,
-            marginBottom: 16,
-          }}>
+          <p className="toast-cta-copy">
             Six production-readiness dimensions for Angular agents. Get the guide.
           </p>
-          <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
+          <div className="toast-button-row">
             <Button
               variant="primary"
               size="md"
@@ -190,16 +135,7 @@ export function AnnouncementToast() {
             </Button>
             <button
               onClick={dismiss}
-              style={{
-                background: 'none',
-                border: 'none',
-                cursor: 'pointer',
-                fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
-                fontSize: '0.68rem',
-                color: tokens.colors.textMuted,
-                textDecoration: 'underline',
-                padding: '8px 4px',
-              }}
+              className="toast-not-now"
             >
               Not now
             </button>
@@ -208,7 +144,7 @@ export function AnnouncementToast() {
       )}
 
       {step === 'form' && (
-        <form onSubmit={handleSubmit} style={{ marginTop: 8 }}>
+        <form onSubmit={handleSubmit} className="toast-mt-section">
           <label htmlFor="toast-email" className="sr-only">Email address</label>
           <input
             id="toast-email"
@@ -219,11 +155,9 @@ export function AnnouncementToast() {
             required
             disabled={submitting}
             autoFocus
-            style={{ ...inputStyle, marginBottom: 10 }}
-            onFocus={e => (e.currentTarget.style.borderColor = tokens.colors.accent)}
-            onBlur={e => (e.currentTarget.style.borderColor = tokens.surfaces.border)}
+            className="toast-input"
           />
-          <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
+          <div className="toast-button-row">
             <Button
               type="submit"
               variant="primary"
@@ -244,14 +178,7 @@ export function AnnouncementToast() {
               });
               dismiss();
             }}
-            style={{
-              display: 'inline-block',
-              marginTop: 10,
-              fontSize: '0.7rem',
-              color: tokens.colors.textMuted,
-              textDecoration: 'underline',
-              fontFamily: 'Inter, sans-serif',
-            }}
+            className="toast-download-link"
           >
             or download directly
           </a>
@@ -259,12 +186,8 @@ export function AnnouncementToast() {
       )}
 
       {step === 'sent' && (
-        <div style={{ marginTop: 8 }}>
-          <p style={{
-            fontSize: '0.85rem',
-            color: '#1a7a40',
-            lineHeight: 1.5,
-          }}>
+        <div className="toast-mt-section">
+          <p className="toast-success-text">
             ✓ Check your inbox — the guide is on its way!
           </p>
         </div>
diff --git a/apps/website/src/styles/chrome.css b/apps/website/src/styles/chrome.css
index b9ba93fef..b92cbe396 100644
--- a/apps/website/src/styles/chrome.css
+++ b/apps/website/src/styles/chrome.css
@@ -299,3 +299,100 @@
   width: 100%;
   justify-content: center;
 }
+
+/* AnnouncementToast */
+.toast-root {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  z-index: 100;
+  max-width: 360px;
+  width: calc(100vw - 48px);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  box-shadow: var(--shadow-lg);
+  border-radius: var(--radius-lg);
+  padding: 20px 24px;
+  transition: opacity 200ms ease, transform 240ms ease;
+}
+.toast-close {
+  position: absolute;
+  top: 10px;
+  right: 12px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--color-text-muted);
+  font-size: 18px;
+  line-height: 1;
+  padding: 4px;
+}
+.toast-eyebrow {
+  font-family: var(--font-mono,"JetBrains Mono",monospace);
+  font-size: 0.62rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-weight: 700;
+  color: var(--color-accent);
+  margin-bottom: 8px;
+}
+.toast-title {
+  font-family: var(--font-garamond,"EB Garamond",Georgia,serif);
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: var(--color-text-primary);
+  line-height: 1.3;
+  margin-bottom: 6px;
+}
+.toast-cta-copy {
+  font-size: 0.82rem;
+  color: var(--color-text-secondary);
+  line-height: 1.5;
+  margin-bottom: 16px;
+}
+.toast-button-row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+.toast-not-now {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-family: var(--font-mono,"JetBrains Mono",monospace);
+  font-size: 0.68rem;
+  color: var(--color-text-muted);
+  text-decoration: underline;
+  padding: 8px 4px;
+}
+.toast-mt-section {
+  margin-top: 8px;
+}
+.toast-input {
+  width: 100%;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 8px 12px;
+  font-size: 0.82rem;
+  color: var(--color-text-primary);
+  font-family: Inter, sans-serif;
+  outline: none;
+  margin-bottom: 10px;
+}
+.toast-input:focus {
+  border-color: var(--color-accent);
+}
+.toast-download-link {
+  display: inline-block;
+  margin-top: 10px;
+  font-size: 0.7rem;
+  color: var(--color-text-muted);
+  text-decoration: underline;
+  font-family: Inter, sans-serif;
+}
+.toast-success-text {
+  font-size: 0.85rem;
+  color: #1a7a40;
+  line-height: 1.5;
+}

From de15bc13cf14dbeb971d349c6cde5faa91bd8cd8 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Sat, 29 Aug 2026 13:12:08 -0700
Subject: [PATCH 4/4] fix(website): hoist the style-scope @imports to the top
 of global.css

Late @import is invalid CSS. The production pipeline forgives it by hoisting,
but turbopack dev silently DROPS the imported files - no error, the rules never
load, intermittently across recompiles. Found when the batch-2 verification
baseline captured the nav with ui.css dropped (the logo measured Inter 400
where ui.css says Garamond 700). Production was never affected - verified the
deployed CSS contains every batch-1 rule.

Also updates the plan's Task 0 caution, which wrongly assumed the failure mode
would be a build error.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 apps/website/src/app/global.css               | 20 +++++++++++++------
 ...-08-29-inline-style-substrate-migration.md |  9 +++++++--
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/apps/website/src/app/global.css b/apps/website/src/app/global.css
index efe57991a..417bc6d4a 100644
--- a/apps/website/src/app/global.css
+++ b/apps/website/src/app/global.css
@@ -1,6 +1,20 @@
 @import "tailwindcss";
 @import "@threadplane/design-tokens/theme.css";
 
+/*
+ * Scope files for the inline-style migration. These MUST sit with the other
+ * @imports at the top: @import after any rule is invalid CSS — the production
+ * pipeline (Lightning CSS) forgives it by hoisting, but turbopack dev can
+ * silently DROP the imported files, unstyling everything they cover. Found
+ * the hard way in Batch 2.
+ */
+@import "../styles/ui.css";
+@import "../styles/chrome.css";
+@import "../styles/docs.css";
+@import "../styles/landing.css";
+@import "../styles/marketing.css";
+@import "../styles/pages.css";
+
 /*
  * Local, non-token constants.
  *
@@ -30,12 +44,6 @@
   --docs-accent-tint-line: color-mix(in srgb, var(--color-accent) 10%, transparent);
 }
 
-@import "../styles/ui.css";
-@import "../styles/chrome.css";
-@import "../styles/docs.css";
-@import "../styles/landing.css";
-@import "../styles/marketing.css";
-@import "../styles/pages.css";
 
 * {
   box-sizing: border-box;
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 0cca8d46a..e588f57f1 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
@@ -253,8 +253,13 @@ used 9×. This is why the 106 variable-shaped sites are cheap: one rule, not N.
  */
 ```
 
-- [ ] **Step 2: Wire imports.** In `global.css`, immediately after the two
-existing `@import` lines and the local `:root` block, add:
+- [ ] **Step 2: Wire imports.** ~~after the `:root` block~~ **CORRECTED IN
+BATCH 2: the imports MUST sit at the very top, directly after the two existing
+`@import` lines.** Late `@import` is invalid CSS; the production pipeline
+(Lightning CSS) forgives it by hoisting, but **turbopack dev silently DROPS
+the imported files** — no error, the rules just never load, intermittently
+across recompiles. It poisoned a verification baseline before being caught
+(the nav logo measured Inter 400 where ui.css says Garamond 700). Add:
 
 ```css
 @import "../styles/ui.css";