From 2f16ab8031ed1d4ab55d3198c0d34f70ef8d382f Mon Sep 17 00:00:00 2001
From: James Titus <titusjames299@gmail.com>
Date: Thu, 13 Aug 2026 10:03:53 +0530
Subject: [PATCH 1/6] chore: agent.md update & removed some unused files

---
 AGENT.md                          |  28 ++-
 src/scopes/Scope.ts               |  42 -----
 src/scopes/__test__/scope.test.js |  58 ------
 src/scopes/lucidreactScope.ts     | 286 ------------------------------
 src/scopes/motionScope.ts         |   9 -
 src/scopes/rechartScope.ts        | 112 ------------
 6 files changed, 25 insertions(+), 510 deletions(-)
 delete mode 100644 src/scopes/Scope.ts
 delete mode 100644 src/scopes/__test__/scope.test.js
 delete mode 100644 src/scopes/lucidreactScope.ts
 delete mode 100644 src/scopes/motionScope.ts
 delete mode 100644 src/scopes/rechartScope.ts

diff --git a/AGENT.md b/AGENT.md
index 58a7872..f7045b6 100644
--- a/AGENT.md
+++ b/AGENT.md
@@ -4,7 +4,7 @@ Agent instructions for working in this repository. Read this before making chang
 
 ## What this project is
 
-**`react-code-canvas`** is a published React/TypeScript **library** (npm package, currently `4.2.0-beta.18`). It provides a browser-based canvas that **renders React components from code strings at runtime** and supports live text editing of the rendered output.
+**`react-code-canvas`** is a published React/TypeScript **library** (npm package, currently `5.0.0`). It provides a browser-based canvas that **renders React components from code strings at runtime** and supports live text editing of the rendered output.
 
 Primary use cases: previewing JSX from strings, exposing a scoped set of components/libraries to evaluated code, and validating generated React code before saving it.
 
@@ -32,11 +32,13 @@ Top-level layout (build artifacts and `node_modules` omitted):
 
 ```
 .
-├── src/                  # library source — the published code (see Architecture)
+├── src/                  # library source — the published code (see Scope resolution)
 ├── dist/                 # build output: CJS + ESM bundles + .d.ts  (gitignored)
 ├── doc_site/             # Docusaurus documentation site (own package + bun.lock)
 ├── scripts/
+│   ├── generate-scope-maps.mjs  # emits src/scopes/generated/ from node_modules
 │   └── manual/           # manual, run-by-hand scripts (e.g. transformer walkthrough)
+├── skills/               # react-code-canvas agent skill, shipped in the package
 ├── public/               # static assets (e.g. rrc.png used by the README)
 ├── storybook-static/     # built static Storybook  (gitignored)
 ├── coverage/             # jest coverage output  (gitignored)
@@ -44,7 +46,7 @@ Top-level layout (build artifacts and `node_modules` omitted):
 ├── .github/              # workflows (test, deploy-docs), issue/PR templates
 ├── rollup.config.mjs     # library bundler config
 ├── babel.config.js       # babel presets used by jest (babel-jest)
-├── jest.config.js        # currently empty → jest defaults
+├── jest.config.js        # transformIgnorePatterns: lucide-react is ESM-only, must go through babel
 ├── tsconfig.json         # TS config; emits declarations to dist/
 ├── package.json          # name, version, exports/types, scripts, deps
 ├── bun.lock              # the committed lockfile (never commit package-lock.json)
@@ -55,6 +57,26 @@ Top-level layout (build artifacts and `node_modules` omitted):
 └── bundle-analysis.html  # rollup-plugin-visualizer output  (gitignored via *.html)
 ```
 
+## Scope resolution
+
+`src/scopes/lazyScope.ts` is the **only** scope path. It regex-scans the code for
+identifiers and loads just what is referenced: lucide icons one file at a time,
+recharts / motion / `react-icons/fa` whole (they are not per-component
+splittable). `resolveScope` is async; `useResolvedScope` returns `readyCode` so
+code is never evaluated against a scope that has not finished loading.
+
+The name → loader tables in `src/scopes/generated/` are produced from the
+installed dependencies by `bun run generate:scopes`, which runs automatically as
+part of `bun run build`. **Never hand-edit `src/scopes/generated/`.** Import
+specifiers must be string literals or Vite/Rollup cannot split them — that is
+why the tables are generated rather than computed.
+
+The old eager scope (`src/scopes/Scope.ts` and the per-package
+`lucidreactScope` / `rechartScope` / `motionScope` modules) was removed in
+5.0.0. It spread every export of every package into one object at module load,
+forcing ~300 KB (brotli) into the first chunk and handing ~5800 parameters to
+`new Function` on every evaluation. Do not reintroduce it.
+
 ## Commands
 
 Bun is the package manager; the committed lockfile is `bun.lock` (never commit `package-lock.json`).
diff --git a/src/scopes/Scope.ts b/src/scopes/Scope.ts
deleted file mode 100644
index 3f5eada..0000000
--- a/src/scopes/Scope.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { rechartsScope } from "./rechartScope";
-import { lucideScope } from "./lucidreactScope";
-import { editComponentScope } from "./editComponentScope";
-import motion, { motionHooksComponents } from "./motionScope";
-import helmetScope from "./helmetScope"
-
-import React, {
-  useState,
-  useEffect,
-  useContext,
-  useReducer,
-  useRef,
-  useMemo,
-  useCallback,
-} from "react";
-
-// react scope
-const reactScope = {
-  React,
-  useState,
-  useEffect,
-  useContext,
-  useReducer,
-  useRef,
-  useMemo,
-  useCallback,
-};
-
-// Export all the components and scope needed.
-//
-// react-icons/fa was removed: it added ~424KB gzipped (roughly half the
-// bundle) for 1611 icons that duplicate what lucide-react already covers with
-// 5673. Code that referenced `Fa*` names must switch to lucide equivalents.
-export const scope: any = {
-  ...lucideScope,
-  ...rechartsScope,
-  ...reactScope,
-  ...editComponentScope,
-  motion, // has to be named motion - <motion.div>
-  ...motionHooksComponents, // motion hooks, components
-  ...helmetScope,
-};
diff --git a/src/scopes/__test__/scope.test.js b/src/scopes/__test__/scope.test.js
deleted file mode 100644
index 8334f1d..0000000
--- a/src/scopes/__test__/scope.test.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import { scope } from "../Scope";
-
-// Test Scope
-describe("scope object", () => {
-    test("contains React and hooks", () => {
-        expect(scope.React).toBeDefined();
-        expect(scope.useState).toBeDefined();
-        expect(scope.useEffect).toBeDefined();
-        expect(scope.useContext).toBeDefined();
-        expect(scope.useReducer).toBeDefined();
-        expect(scope.useRef).toBeDefined();
-        expect(scope.useMemo).toBeDefined();
-        expect(scope.useCallback).toBeDefined();
-    });
-
-    test("contains motion and motion hooks/components", () => {
-        expect(scope.motion).toBeDefined();
-        expect(scope.useAnimate).toBeDefined();
-        expect(scope.useScroll).toBeDefined();
-        expect(scope.LazyMotion).toBeDefined();
-        expect(scope.useReducedMotion).toBeDefined();
-    });
-
-    test("contains recharts components", () => {
-        expect(scope.AreaChart).toBeDefined();
-        expect(scope.ResponsiveContainer).toBeDefined();
-        expect(scope.CartesianGrid).toBeDefined();
-        expect(scope.LineChart).toBeDefined();
-        expect(scope.XAxis).toBeDefined();
-    });
-
-    test("contains lucid react components", () => {
-        expect(scope.Camera).toBeDefined();
-        expect(scope.StarHalf).toBeDefined();
-        expect(scope.Smile).toBeDefined();
-        expect(scope.Landmark).toBeDefined();
-        expect(scope.House).toBeDefined();
-    });
-
-    // Fa icons are available, but only through the lazy scope -- referencing one
-    // fetches the pack (~424KB gzipped) on demand. This eager scope must stay
-    // free of them, or every consumer pays that cost whether they use it or not.
-    test("does NOT contain react-icons/fa components", () => {
-        expect(scope.FaBeer).toBeUndefined();
-        expect(scope.FaHeart).toBeUndefined();
-        expect(Object.keys(scope).filter((k) => /^Fa[A-Z0-9]/.test(k))).toHaveLength(0);
-    });
-
-    test("contains EditableText custom components", () => {
-        expect(scope.EditableText).toBeDefined();
-    });
-
-    test("contains Helmet-async", () => {
-        expect(scope.Helmet).toBeDefined();
-        expect(scope.HelmetProvider).toBeDefined();
-    });
-
-});
diff --git a/src/scopes/lucidreactScope.ts b/src/scopes/lucidreactScope.ts
deleted file mode 100644
index b7f39c2..0000000
--- a/src/scopes/lucidreactScope.ts
+++ /dev/null
@@ -1,286 +0,0 @@
-// import {
-//     // Icons
-//     Activity,
-//     AlertCircle,
-//     AlertTriangle,
-//     Archive,
-//     ArrowDown,
-//     ArrowLeft,
-//     ArrowRight,
-//     ArrowUp,
-//     BarChart,
-//     Bell,
-//     Book,
-//     Bookmark,
-//     Calendar,
-//     Camera,
-//     Check,
-//     CheckCircle,
-//     ChevronDown,
-//     ChevronLeft,
-//     ChevronRight,
-//     ChevronUp,
-//     Clock,
-//     Cloud,
-//     Code,
-//     Coffee,
-//     Command,
-//     Copy,
-//     CreditCard,
-//     Database,
-//     Download,
-//     Edit,
-//     Eye,
-//     EyeOff,
-//     File,
-//     FileText,
-//     Filter,
-//     Folder,
-//     Github,
-//     Globe,
-//     Grid,
-//     HardDrive,
-//     Hash,
-//     Heart,
-//     Home,
-//     Image,
-//     Inbox,
-//     Info,
-//     Key,
-//     Layers,
-//     Layout,
-//     Link,
-//     List,
-//     Lock,
-//     LogIn,
-//     LogOut,
-//     Mail,
-//     Map,
-//     Menu,
-//     MessageCircle,
-//     MessageSquare,
-//     Mic,
-//     Moon,
-//     MoreHorizontal,
-//     MoreVertical,
-//     Move,
-//     Music,
-//     Paperclip,
-//     Pause,
-//     Phone,
-//     Play,
-//     Plus,
-//     PlusCircle,
-//     Power,
-//     Printer,
-//     Radio,
-//     RefreshCw,
-//     Save,
-//     Search,
-//     Send,
-//     Settings,
-//     Share,
-//     Shield,
-//     ShoppingBag,
-//     ShoppingCart,
-//     Shuffle,
-//     Slack,
-//     Slash,
-//     Sliders,
-//     Smartphone,
-//     Smile,
-//     Speaker,
-//     Square,
-//     Star,
-//     Sun,
-//     Table,
-//     Tablet,
-//     Tag,
-//     Target,
-//     Terminal,
-//     Thermometer,
-//     ThumbsDown,
-//     ThumbsUp,
-//     Trash,
-//     Trash2,
-//     Trophy,
-//     Twitter,
-//     Upload,
-//     User,
-//     UserPlus,
-//     Users,
-//     Video,
-//     Voicemail,
-//     Volume,
-//     Volume1,
-//     Volume2,
-//     VolumeX,
-//     Watch,
-//     Wifi,
-//     X,
-//     XCircle,
-//     ZapOff,
-//     Zap,
-//     // YouTube,
-
-//     // Core attributes and properties
-//     // createIcon,
-//     // icons,
-
-//     // Icon variants
-//     IconNode,
-//     LucideIcon,
-//     LucideProps
-// } from "lucide-react";
-
-// // lucide-react scope
-// export const lucideScope = {
-//     // Icons
-//     Activity,
-//     AlertCircle,
-//     AlertTriangle,
-//     Archive,
-//     ArrowDown,
-//     ArrowLeft,
-//     ArrowRight,
-//     ArrowUp,
-//     BarChart,
-//     Bell,
-//     Book,
-//     Bookmark,
-//     Calendar,
-//     Camera,
-//     Check,
-//     CheckCircle,
-//     ChevronDown,
-//     ChevronLeft,
-//     ChevronRight,
-//     ChevronUp,
-//     Clock,
-//     Cloud,
-//     Code,
-//     Coffee,
-//     Command,
-//     Copy,
-//     CreditCard,
-//     Database,
-//     Download,
-//     Edit,
-//     Eye,
-//     EyeOff,
-//     File,
-//     FileText,
-//     Filter,
-//     Folder,
-//     Github,
-//     Globe,
-//     Grid,
-//     HardDrive,
-//     Hash,
-//     Heart,
-//     Home,
-//     Image,
-//     Inbox,
-//     Info,
-//     Key,
-//     Layers,
-//     Layout,
-//     Link,
-//     List,
-//     Lock,
-//     LogIn,
-//     LogOut,
-//     Mail,
-//     Map,
-//     Menu,
-//     MessageCircle,
-//     MessageSquare,
-//     Mic,
-//     Moon,
-//     MoreHorizontal,
-//     MoreVertical,
-//     Move,
-//     Music,
-//     Paperclip,
-//     Pause,
-//     Phone,
-//     Play,
-//     Plus,
-//     PlusCircle,
-//     Power,
-//     Printer,
-//     Radio,
-//     RefreshCw,
-//     Save,
-//     Search,
-//     Send,
-//     Settings,
-//     Share,
-//     Shield,
-//     ShoppingBag,
-//     ShoppingCart,
-//     Shuffle,
-//     Slack,
-//     Slash,
-//     Sliders,
-//     Smartphone,
-//     Smile,
-//     Speaker,
-//     Square,
-//     Star,
-//     Sun,
-//     Table,
-//     Tablet,
-//     Tag,
-//     Target,
-//     Terminal,
-//     Thermometer,
-//     ThumbsDown,
-//     ThumbsUp,
-//     Trash,
-//     Trash2,
-//     Trophy,
-//     Twitter,
-//     Upload,
-//     User,
-//     UserPlus,
-//     Users,
-//     Video,
-//     Voicemail,
-//     Volume,
-//     Volume1,
-//     Volume2,
-//     VolumeX,
-//     Watch,
-//     Wifi,
-//     X,
-//     XCircle,
-//     ZapOff,
-//     Zap,
-//     // YouTube,
-
-//     // Core attributes and properties
-//     // createIcon,
-//     // icons,
-
-//     // Icon variants
-//     // IconNode,
-//     // LucideIcon,
-//     // LucideProps
-// };
-
-// https://www.npmjs.com/package/lucide-react
-// https://lucide.dev/guide/packages/lucide-react
-
-import * as LucideIcons from "lucide-react";
-
-// Create scope with only the actual components using type assertion
-const componentNames = Object.keys(LucideIcons).filter(key =>
-    typeof (LucideIcons as any)[key] === 'function' || typeof (LucideIcons as any)[key] === 'object'
-);
-
-// Create scope with type assertion
-export const lucideScope = componentNames.reduce((acc, name) => {
-    acc[name] = (LucideIcons as any)[name];
-    return acc;
-}, {} as Record<string, any>);
\ No newline at end of file
diff --git a/src/scopes/motionScope.ts b/src/scopes/motionScope.ts
deleted file mode 100644
index d150518..0000000
--- a/src/scopes/motionScope.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// https://motion.dev/docs/react
-
-
-import * as Motion from "motion/react";
-
-const { motion, ...motionHooksComponents }: any = Motion;
-
-export default motion;
-export { motionHooksComponents };
diff --git a/src/scopes/rechartScope.ts b/src/scopes/rechartScope.ts
deleted file mode 100644
index b254c2d..0000000
--- a/src/scopes/rechartScope.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-// import {
-//     AreaChart,
-//     BarChart,
-//     LineChart,
-//     ComposedChart,
-//     PieChart,
-//     RadarChart,
-//     RadialBarChart,
-//     ScatterChart,
-//     FunnelChart,
-//     Treemap,
-//     ResponsiveContainer,
-//     Legend,
-//     Tooltip,
-//     Cell,
-//     Text,
-//     Label,
-//     LabelList,
-//     Customized,
-//     Area,
-//     Bar,
-//     Line,
-//     Scatter,
-//     XAxis,
-//     YAxis,
-//     ZAxis,
-//     Brush,
-//     CartesianAxis,
-//     CartesianGrid,
-//     ReferenceLine,
-//     ReferenceDot,
-//     ReferenceArea,
-//     ErrorBar,
-//     Funnel,
-//     Cross,
-//     Curve,
-//     Dot,
-//     Polygon,
-//     Rectangle,
-//     Sector,
-//     Pie,
-//     Radar,
-//     RadialBar,
-//     PolarAngleAxis,
-//     PolarGrid,
-//     PolarRadiusAxis,
-// } from "recharts";
-
-
-// // recharts scope
-// export const rechartsScope = {
-//     AreaChart,
-//     BarChart,
-//     LineChart,
-//     ComposedChart,
-//     PieChart,
-//     RadarChart,
-//     RadialBarChart,
-//     ScatterChart,
-//     FunnelChart,
-//     Treemap,
-//     ResponsiveContainer,
-//     Legend,
-//     Tooltip,
-//     Cell,
-//     Text,
-//     Label,
-//     LabelList,
-//     Customized,
-//     Area,
-//     Bar,
-//     Line,
-//     Scatter,
-//     XAxis,
-//     YAxis,
-//     ZAxis,
-//     Brush,
-//     CartesianAxis,
-//     CartesianGrid,
-//     ReferenceLine,
-//     ReferenceDot,
-//     ReferenceArea,
-//     ErrorBar,
-//     Funnel,
-//     Cross,
-//     Curve,
-//     Dot,
-//     Polygon,
-//     Rectangle,
-//     Sector,
-//     Pie,
-//     Radar,
-//     RadialBar,
-//     PolarAngleAxis,
-//     PolarGrid,
-//     PolarRadiusAxis,
-// };
-
-// https://www.npmjs.com/package/recharts
-
-import * as ReChartComponents from 'recharts';
-
-// Filter only actual components (functions or objects)
-const reComponentNames = Object.keys(ReChartComponents).filter(
-    key => typeof (ReChartComponents as any)[key] === 'function' || typeof (ReChartComponents as any)[key] === 'object'
-);
-
-// Create the scope
-export const rechartsScope = reComponentNames.reduce((acc, name) => {
-    acc[name] = (ReChartComponents as any)[name];
-    return acc;
-}, {} as Record<string, any>);
\ No newline at end of file

From e89762100fd753d1216d72c30b7589b085fe52b2 Mon Sep 17 00:00:00 2001
From: James Titus <titusjames299@gmail.com>
Date: Thu, 13 Aug 2026 11:58:07 +0530
Subject: [PATCH 2/6] chore: buildStandaloneSite is functional

---
 .gitignore                                    |   4 +
 AGENT.md                                      |  25 +-
 README.md                                     |  49 +++
 bun.lock                                      |  13 +
 doc_site/docs/standalone-site.md              | 151 +++++++++
 doc_site/docusaurus.config.ts                 |   4 +
 doc_site/sidebars.ts                          |   1 +
 package.json                                  |  28 +-
 rollup.config.mjs                             |  55 +++-
 scripts/manual/fixtures/demo-page.jsx         |  94 ++++++
 scripts/manual/test-standalone-site.mjs       | 188 +++++++++++
 skills/react-code-canvas/SKILL.md             | 223 ++++++++++++-
 .../references/performance.md                 |   7 +
 src/analyzer/analyzeReactCode.ts              |  14 +-
 src/builder/__tests__/entry.test.js           | 164 ++++++++++
 src/builder/entry.ts                          | 173 ++++++++++
 src/builder/standalone.ts                     | 300 ++++++++++++++++++
 src/coreComponents/core/custom-transformer.js |   2 +-
 src/scopes/__test__/lazyScope.test.js         |  20 ++
 src/scopes/lazyScope.ts                       |  29 +-
 20 files changed, 1522 insertions(+), 22 deletions(-)
 create mode 100644 doc_site/docs/standalone-site.md
 create mode 100644 scripts/manual/fixtures/demo-page.jsx
 create mode 100644 scripts/manual/test-standalone-site.mjs
 create mode 100644 src/builder/__tests__/entry.test.js
 create mode 100644 src/builder/entry.ts
 create mode 100644 src/builder/standalone.ts

diff --git a/.gitignore b/.gitignore
index f2b2319..00478e0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -31,3 +31,7 @@ bundle-analysis.html
 
 # Agent
 .claude/
+
+# manual demo output
+/demo-site
+/out
diff --git a/AGENT.md b/AGENT.md
index f7045b6..9856be4 100644
--- a/AGENT.md
+++ b/AGENT.md
@@ -22,6 +22,24 @@ The package entry is `src/index.ts`. It exports two components, their prop types
 
 Prop types `ReactCanvasProps` and `EditReactCanvasProps` are exported alongside, plus the analyzer's `AnalysisResult`, `AnalyzeOptions`, `CodeIssue` and `IssueType`.
 
+### Second entry: `react-code-canvas/builder` (Node only)
+
+| Export | Source | Purpose |
+| --- | --- | --- |
+| `buildStandaloneSite` | `src/builder/standalone.ts` | Build a code string into a deployable static site; returns a `path -> contents` map. |
+| `writeStandaloneSite` | `src/builder/standalone.ts` | The same, written to a directory. |
+
+Emits `index.html` plus hashed `assets/`, with React, every referenced library and
+compiled Tailwind bundled in — no network at runtime. **Never import this from `src/index.ts`**: it
+pulls in `esbuild`, `node:*` and `react-dom/server`, none of which may reach a consumer's browser
+bundle. `esbuild` and `tailwindcss` are *optional* peer dependencies, loaded via dynamic import at
+point of use.
+
+The pure string half lives in `src/builder/entry.ts`, separate only because `standalone.ts` uses
+`import.meta.url` (for esbuild's `resolveDir`), which is a syntax error under jest's CJS runtime —
+so anything a test imports has to live outside it. Jest covers `entry.ts`; the end-to-end build runs
+via `bun run test:manual:site` against `dist/builder.mjs`.
+
 **Contract for consumer-supplied `code`:** must `export default` a component (or call `render(...)`), must **not** contain `import` statements — dependencies are injected through the `scope` prop instead.
 
 **Code persistence:** `ReactCanvas` and `EditTextReactCanvas` accept `persistKey?: string` (saves/restores code in `localStorage`) and `onCodeChange?: (code: string) => void` (notifies on change so the host can persist however it likes). For `EditTextReactCanvas` these operate on the **final saved JSX**, not the intermediate EditableText form. Shared, SSR-safe storage helpers live in `src/coreComponents/core/storage.ts`.
@@ -37,7 +55,7 @@ Top-level layout (build artifacts and `node_modules` omitted):
 ├── doc_site/             # Docusaurus documentation site (own package + bun.lock)
 ├── scripts/
 │   ├── generate-scope-maps.mjs  # emits src/scopes/generated/ from node_modules
-│   └── manual/           # manual, run-by-hand scripts (e.g. transformer walkthrough)
+│   └── manual/           # manual, run-by-hand scripts (transformer, analyzer, site builder)
 ├── skills/               # react-code-canvas agent skill, shipped in the package
 ├── public/               # static assets (e.g. rrc.png used by the README)
 ├── storybook-static/     # built static Storybook  (gitignored)
@@ -84,7 +102,10 @@ Bun is the package manager; the committed lockfile is `bun.lock` (never commit `
 ```bash
 bun install --frozen-lockfile
 bun run test            # jest
-bun run build           # rollup -c  -> dist/
+bun run build           # rollup -c  -> dist/  (browser entry + dist/builder.mjs)
+bun run test:manual:site # end-to-end site build; needs `bun run build` first
+bun run test:manual:site ./Page.jsx [outDir]   # build one canvas-format file instead
+bun run demo:site        # the same, on scripts/manual/fixtures/demo-page.jsx
 bun run dev             # storybook dev on :6006
 bun run build-storybook # static Storybook -> storybook-static/
 bun run size            # size-limit check
diff --git a/README.md b/README.md
index 3cc40c4..4554bad 100644
--- a/README.md
+++ b/README.md
@@ -106,6 +106,55 @@ import { EditTextReactCanvas } from "react-code-canvas";
 
 `EditTextReactCanvas` adds text editing behavior to rendered React code (beta).
 
+### Build a standalone website
+
+Turn a code string into a deployable static site — `index.html` plus hashed `assets/`, with React,
+every library the code references and compiled Tailwind bundled in. No CDN, no network at runtime.
+
+```js
+// Node only. Ships as a separate entry so nothing here reaches your browser bundle.
+import { writeStandaloneSite } from "react-code-canvas/builder";
+
+await writeStandaloneSite(CODE, "./out");
+// -> out/index.html, out/assets/app-<hash>.js, out/assets/style-<hash>.css
+```
+
+Then deploy `out/` anywhere that serves files. Use `buildStandaloneSite` instead to get a
+`path -> contents` map and handle delivery yourself.
+
+Requires the optional peers it actually uses: `npm i -D esbuild`, plus `tailwindcss` if your code
+uses `className`. Neither is loaded otherwise.
+
+#### Options
+
+| Option | Type | Description |
+| --- | --- | --- |
+| `title` | `string` | `<title>` for code that emits none of its own. A `<Helmet><title>` in the code wins. |
+| `lang` | `string` | `<html lang>`. Default `'en'`. |
+| `tailwind` | `boolean` | Compile Tailwind for the classes found in the code. Default `true`; only runs when the code contains `className`. |
+| `css` | `string` | Extra CSS, appended after the compiled Tailwind. |
+| `head` | `string` | Raw HTML appended to `<head>` — fonts, favicon, OG tags, analytics. |
+| `prerender` | `boolean` | Bake the initial markup into the HTML for SEO, then hydrate. Default `true`. |
+| `minify` | `boolean` | Default `true`. |
+| `target` | `string` | esbuild target. Default `'es2020'`. |
+
+Notes:
+
+- **Styling all works**: inline `style` objects, in-component `<style>` tags, and Tailwind classes
+  are compiled into a real stylesheet. Unlike the canvas, the built site does not need the host to
+  provide Tailwind.
+- **Prerendering is best-effort.** Code that touches `document` or `window` *during render* throws
+  in Node; the build warns and emits a client-only shell instead of failing. Guard with
+  `typeof document !== "undefined"` to keep the prerender. `useEffect` never runs during prerender,
+  so it is always safe.
+- `<Helmet>` finally does something here — React 19 hoists its `<title>`/`<meta>` and the builder
+  lifts them into `<head>`, where crawlers read them.
+- Machine-generated `<EditableText>` tags from an `EditTextReactCanvas` session are reversed back to
+  plain JSX; a deployed page does not keep click-to-edit fields.
+- **recharts charts do not prerender** — measured: they render nothing server-side, fixed size or
+  not, and appear on hydration. The rest of the page still prerenders normally, so only the chart
+  area is blank in the initial HTML.
+
 ## Notes
 
 - Code should export a default component, for example `export default function ComponentName() {}`.
diff --git a/bun.lock b/bun.lock
index 0118f64..b554225 100644
--- a/bun.lock
+++ b/bun.lock
@@ -41,8 +41,10 @@
         "@testing-library/react": "^16.3.2",
         "@types/jest": "^30.0.0",
         "@types/react": "^19.2.17",
+        "@types/react-dom": "^19.2.4",
         "@types/react-helmet": "^6.1.11",
         "babel-jest": "^30.4.1",
+        "esbuild": "^0.28.1",
         "jest": "^30.4.2",
         "jest-environment-jsdom": "^30.4.1",
         "package-size": "^2.3.0",
@@ -55,11 +57,18 @@
         "rollup-plugin-visualizer": "^7.0.1",
         "size-limit": "^13.0.2",
         "storybook": "^10.5.5",
+        "tailwindcss": "^4.3.3",
       },
       "peerDependencies": {
+        "esbuild": ">=0.20",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "tailwindcss": ">=4.0",
       },
+      "optionalPeers": [
+        "esbuild",
+        "tailwindcss",
+      ],
     },
   },
   "trustedDependencies": [
@@ -815,6 +824,8 @@
 
     "@types/react": ["@types/react@19.2.17", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw=="],
 
+    "@types/react-dom": ["@types/react-dom@19.2.4", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-Bsc+QHgp+P/F02XDzNCY9jnZNCUuLki36KT7VKrTXXLdHf+vHMNZnW1rVu5DNW/rCK+fya3DATySbLM4yhtKUw=="],
+
     "@types/react-helmet": ["@types/react-helmet@6.1.11", "", { "dependencies": { "@types/react": "*" } }, "sha512-0QcdGLddTERotCXo3VFlUSWO3ztraw8nZ6e3zJSgG7apwV5xt+pJUS8ewPBqT4NYB1optGLprNQzFleIY84u/g=="],
 
     "@types/resolve": ["@types/resolve@1.20.2", "", {}, "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q=="],
@@ -2403,6 +2414,8 @@
 
     "synckit": ["synckit@0.11.13", "", { "dependencies": { "@pkgr/core": "^0.3.6" } }, "sha512-eNRKgb3z66Yp3D2CixVujOUvXLFUTij/zVnV8KRyvFdQwpz7I5DS8UfRkTeLzb64u+dkzDSdelE24izu+zSSUg=="],
 
+    "tailwindcss": ["tailwindcss@4.3.3", "", {}, "sha512-gOhV3P7ufE62QDGg1zVaTgCR+EtPv92k2nIhVcVKcLmxT1sUBsQGhnZj175j+MqRt4zLF7ic+sCYjfhxMxj7YQ=="],
+
     "tapable": ["tapable@1.1.3", "", {}, "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA=="],
 
     "tar-fs": ["tar-fs@3.1.3", "", { "dependencies": { "pump": "^3.0.0", "tar-stream": "^3.1.5" }, "optionalDependencies": { "bare-fs": "^4.0.1", "bare-path": "^3.0.0" } }, "sha512-/hU4AXnIdZu+Gvl1pk0oI5f5HxWsCJRtY2aFaJdk9VvyL48DWU6iU5WAIPG+wIi1YvWA6eTJvIviP/tMAZZNwQ=="],
diff --git a/doc_site/docs/standalone-site.md b/doc_site/docs/standalone-site.md
new file mode 100644
index 0000000..c218a71
--- /dev/null
+++ b/doc_site/docs/standalone-site.md
@@ -0,0 +1,151 @@
+---
+sidebar_position: 7
+title: Standalone site
+---
+
+# Build a standalone website
+
+The canvas renders code inside a host page. `buildStandaloneSite` takes the same code string and
+turns it into a **deployable static site** — `index.html` plus hashed `assets/` — with React, every
+library the code references, and compiled Tailwind bundled in.
+
+No CDN, no import map, no network at runtime. Copy the directory to Netlify, Vercel, S3, GitHub
+Pages, or any host that serves files.
+
+:::info Node only
+This ships as a separate entry, `react-code-canvas/builder`. It imports `esbuild`, `node:*` builtins
+and `react-dom/server`, so it must never reach a browser bundle. Importing
+`react-code-canvas` itself never pulls any of it in.
+:::
+
+## Install
+
+```bash
+npm i -D esbuild
+npm i -D tailwindcss   # only if your code uses className
+```
+
+Both are **optional peer dependencies**, loaded on demand. Code styled entirely with inline `style`
+never needs `tailwindcss` at all.
+
+## Usage
+
+```js
+import { writeStandaloneSite } from "react-code-canvas/builder";
+
+const CODE = `
+export default function Page() {
+  const [n, setN] = useState(0);
+  return (
+    <main className="flex flex-col gap-4 p-8 bg-slate-900 text-white">
+      <h1 className="text-3xl font-bold">Count: {n}</h1>
+      <button className="rounded bg-blue-600 px-4 py-2" onClick={() => setN(n + 1)}>
+        increment
+      </button>
+    </main>
+  );
+}
+`;
+
+await writeStandaloneSite(CODE, "./out");
+```
+
+```
+out/
+├── index.html
+└── assets/
+    ├── app-8bf13721.js       react + everything the code imports
+    └── style-067d3221.css    compiled Tailwind
+```
+
+```bash
+npx serve out
+```
+
+For full control over delivery, use `buildStandaloneSite`, which returns a `path -> contents` map and
+touches no filesystem:
+
+```js
+import { buildStandaloneSite } from "react-code-canvas/builder";
+
+const files = await buildStandaloneSite(CODE);
+// { 'index.html': '<!doctype html>…', 'assets/app-<hash>.js': '…', … }
+```
+
+## Options
+
+| Option | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` | `string` | — | `<title>` for code that emits none. A `<Helmet><title>` in the code wins. |
+| `lang` | `string` | `'en'` | `<html lang>`. |
+| `tailwind` | `boolean` | `true` | Compile Tailwind for the classes found in the code. |
+| `css` | `string` | — | Extra CSS, appended after the compiled Tailwind. |
+| `head` | `string` | — | Raw HTML appended to `<head>` — fonts, favicon, OG tags, analytics. |
+| `prerender` | `boolean` | `true` | Bake initial markup into the HTML, then hydrate. |
+| `minify` | `boolean` | `true` | Minify both the JS and the CSS. |
+| `target` | `string` | `'es2020'` | esbuild target. |
+
+## Styling
+
+All three styling approaches work, and none of them need anything from a host page:
+
+- **Inline `style={{…}}`** — carried into the bundle as ordinary props.
+- **In-component `<style>` tags** — the CSS text is part of the bundle. This is how you express
+  pseudo-classes, media queries and keyframes.
+- **Tailwind `className`** — compiled into a real stylesheet at build time.
+
+This is the one place the [Scope](./scope.md) guidance about avoiding Tailwind does not apply. That
+advice is about the canvas, where classes are inert unless the host loads Tailwind. Here there is a
+compile step, so they simply work.
+
+Class names are collected from every string and template literal in the source, which covers
+conditional and template forms:
+
+```jsx
+<p className={active ? "bg-green-500" : "bg-red-500"} />
+<p className={`p-4 ${spacing}`} />
+```
+
+Only the static parts of a template literal can be seen, so a fully computed class name
+(`` `bg-${color}-500` ``) will not be compiled. Write the alternatives out in full.
+
+## Prerendering
+
+By default the initial markup is rendered in Node and baked into `index.html`, then hydrated on the
+client — so crawlers and a slow first paint both see real content.
+
+Prerendering **executes your code in Node**, where there is no DOM. It is best-effort:
+
+- `useEffect` never runs during prerender. Always safe.
+- Touching `document` or `window` *during render* throws. The build warns and emits a client-only
+  shell rather than failing. The page still works; it just starts empty.
+
+```jsx
+// prerenders
+const isDark = typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+// falls back to a client-only shell
+const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+```
+
+Pass `prerender: false` to skip it entirely.
+
+`<Helmet>` is genuinely useful here: React 19 hoists its `<title>` and `<meta>` tags, and the builder
+lifts them into `<head>` where crawlers read them. In the canvas, `<Helmet>` has no effect unless the
+host renders a provider.
+
+**recharts charts do not prerender.** Measured: they render nothing server-side, whether sized
+explicitly or wrapped in `ResponsiveContainer`, and appear once the client hydrates. Everything else
+on the page still prerenders, so only the chart area is blank in the initial HTML — fine for a
+dashboard, worth knowing if a chart is your above-the-fold content.
+
+## Notes
+
+- The code contract is the same as the canvas: `export default` a component (or call `render(...)`),
+  and **no `import` statements** — dependencies come from the scope. The builder validates with
+  [`analyzeReactCode`](./react-canvas.md) first and throws with the specific issues if the code
+  cannot render.
+- Machine-generated `<EditableText>` tags from an `EditTextReactCanvas` session are reversed back to
+  plain JSX. A deployed page does not keep click-to-edit fields.
+- Only what the code references is bundled. Two lucide icons cost about 2 KB, not the whole pack.
+- Asset filenames are content-hashed, so a redeploy busts caches on its own.
diff --git a/doc_site/docusaurus.config.ts b/doc_site/docusaurus.config.ts
index 08d9bfa..df496d2 100644
--- a/doc_site/docusaurus.config.ts
+++ b/doc_site/docusaurus.config.ts
@@ -10,6 +10,10 @@ import type {
 // `react-code-canvas/package.json`. The package's `exports` map only exposes
 // ".", so a subpath import of package.json fails with ERR_PACKAGE_PATH_NOT_EXPORTED
 // on versions that ship that field. fs bypasses exports resolution entirely.
+//
+// The exports map now carries "./package.json", but this stays until the docs
+// depend on a published version that has it -- the pin above is 5.0.0, which
+// does not, and switching early would silently degrade to 'unknown'.
 function readCanvasVersion(): string {
   try {
     const pkgPath = path.join(
diff --git a/doc_site/sidebars.ts b/doc_site/sidebars.ts
index 53745f6..db06004 100644
--- a/doc_site/sidebars.ts
+++ b/doc_site/sidebars.ts
@@ -11,6 +11,7 @@ const sidebars: SidebarsConfig = {
       items: ['react-canvas', 'edit-text-react-canvas'],
     },
     'scope',
+    'standalone-site',
     'security',
     'contributing',
   ],
diff --git a/package.json b/package.json
index 74604b2..afe2e83 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,12 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.esm.js",
       "require": "./dist/index.js"
-    }
+    },
+    "./builder": {
+      "types": "./dist/builder/standalone.d.ts",
+      "import": "./dist/builder.mjs"
+    },
+    "./package.json": "./package.json"
   },
   "files": [
     "dist",
@@ -25,6 +30,8 @@
     "test:coverage": "jest --coverage",
     "test:manual:transformer": "bun run scripts/manual/test-custom-transformer.js",
     "test:manual:analyzer": "bun run scripts/manual/test-analyze-react-code.js",
+    "test:manual:site": "bun run scripts/manual/test-standalone-site.mjs",
+    "demo:site": "bun run test:manual:site scripts/manual/fixtures/demo-page.jsx demo-site",
     "size": "bun run build && size-limit",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
@@ -52,7 +59,17 @@
   },
   "peerDependencies": {
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "esbuild": ">=0.20",
+    "tailwindcss": ">=4.0"
+  },
+  "peerDependenciesMeta": {
+    "esbuild": {
+      "optional": true
+    },
+    "tailwindcss": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@babel/preset-env": "^7.29.7",
@@ -65,7 +82,9 @@
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^1.0.0",
     "@size-limit/preset-big-lib": "^13.0.2",
+    "@storybook/addon-docs": "^10.5.5",
     "@storybook/addon-links": "^10.5.5",
+    "@storybook/addon-mcp": "^0.7.0",
     "@storybook/addon-onboarding": "^10.5.5",
     "@storybook/addon-webpack5-compiler-babel": "^4.0.1",
     "@storybook/addon-webpack5-compiler-swc": "^4.0.3",
@@ -76,8 +95,10 @@
     "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",
     "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.4",
     "@types/react-helmet": "^6.1.11",
     "babel-jest": "^30.4.1",
+    "esbuild": "^0.28.1",
     "jest": "^30.4.2",
     "jest-environment-jsdom": "^30.4.1",
     "package-size": "^2.3.0",
@@ -90,8 +111,7 @@
     "rollup-plugin-visualizer": "^7.0.1",
     "size-limit": "^13.0.2",
     "storybook": "^10.5.5",
-    "@storybook/addon-mcp": "^0.7.0",
-    "@storybook/addon-docs": "^10.5.5"
+    "tailwindcss": "^4.3.3"
   },
   "overrides": {
     "typescript": "^5.8.2"
diff --git a/rollup.config.mjs b/rollup.config.mjs
index b6ddfe1..83fd112 100644
--- a/rollup.config.mjs
+++ b/rollup.config.mjs
@@ -40,7 +40,7 @@ const external = [
   "react-helmet-async",
 ];
 
-const config = {
+const browserConfig = {
   input: "src/index.ts",
   // `dir` rather than `file`: the editor is dynamically imported (see
   // LazyLiveEditor), and a local dynamic import can only become its own chunk
@@ -103,4 +103,55 @@ const config = {
   ],
 };
 
-export default config;
+// The standalone site builder. Node-only, and kept out of the browser entry
+// entirely: it pulls in esbuild, node:* builtins and react-dom/server, none of
+// which may reach a consumer's client bundle. Published as `./builder`.
+//
+// ESM only, emitted as .mjs: the package has no "type" field, so a .js file
+// here would be parsed as CJS and fail. The extension also makes the
+// `import.meta.url` that esbuild's resolveDir depends on legal.
+const builderConfig = {
+  input: "src/builder/standalone.ts",
+  output: {
+    dir: "dist",
+    format: "esm",
+    entryFileNames: "builder.mjs",
+    chunkFileNames: "chunks/builder/[name]-[hash].js",
+    sourcemap: false,
+  },
+  external: (id) =>
+    id.startsWith("node:") ||
+    id === "esbuild" ||
+    id === "tailwindcss" ||
+    external.some((pkg) => id === pkg || id.startsWith(`${pkg}/`)),
+  plugins: [
+    json(),
+    typescript({
+      tsconfig: "./tsconfig.json",
+      // clean:false so this run does not wipe the cache the browser config
+      // above just populated -- with clean:true the two configs fight and the
+      // second build recompiles everything from scratch.
+      clean: false,
+      exclude: storybookExclude,
+      useTsconfigDeclarationDir: true,
+    }),
+    // preferBuiltins is the opposite of the browser config: node:fs and friends
+    // must stay external rather than being shimmed.
+    resolve({
+      preferBuiltins: true,
+      extensions: [".js", ".jsx", ".ts", ".tsx", ".json"],
+    }),
+    commonjs(),
+    babel({
+      babelHelpers: "bundled",
+      exclude: ["node_modules/**", ...storybookExclude],
+      presets: ["@babel/preset-react"],
+      extensions: [".js", ".jsx", ".ts", ".tsx"],
+    }),
+    terser(),
+    // No visualizer here: it has `open: true` and would launch a second browser
+    // tab on every build.
+  ],
+};
+
+export default [browserConfig, builderConfig];
diff --git a/scripts/manual/fixtures/demo-page.jsx b/scripts/manual/fixtures/demo-page.jsx
new file mode 100644
index 0000000..88acc8d
--- /dev/null
+++ b/scripts/manual/fixtures/demo-page.jsx
@@ -0,0 +1,94 @@
+// A canvas-format page for eyeballing a built site in a real browser.
+//
+//   bun run build && bun run demo:site && npx serve demo-site
+//
+// Deliberately combines the things contract-level assertions cannot judge:
+// hydration (the counter is in the prerendered HTML but dead until JS runs),
+// a <motion.div> member expression, a recharts chart whose name also exists in
+// lucide, Helmet tags that must reach <head>, an in-component <style> block, and
+// Tailwind classes that only work if the compile step ran. The two bugs this
+// caught -- `motion is not defined` and <LineChart> rendering as a 24x24 icon --
+// now have regression tests, but the combination is still the fastest way to see
+// whether a change broke something a browser would notice.
+
+export default function Dashboard() {
+  const [count, setCount] = useState(0);
+
+  const data = [
+    { name: "Mon", v: 12 }, { name: "Tue", v: 19 }, { name: "Wed", v: 8 },
+    { name: "Thu", v: 24 }, { name: "Fri", v: 17 }, { name: "Sat", v: 29 },
+  ];
+
+  return (
+    <main className="min-h-screen bg-slate-950 text-slate-100 p-8">
+      <Helmet>
+        <title>Standalone Demo</title>
+        <meta name="description" content="Built by react-code-canvas/builder" />
+      </Helmet>
+
+      <style>{`
+        .demo-card { transition: transform .2s ease, border-color .2s ease; }
+        .demo-card:hover { transform: translateY(-3px); border-color: #38bdf8; }
+        @media (max-width: 700px) { .demo-grid { grid-template-columns: 1fr !important; } }
+      `}</style>
+
+      <header className="flex items-center gap-3 mb-8">
+        <Rocket />
+        <h1 className="text-3xl font-bold">Standalone site demo</h1>
+      </header>
+
+      <p className="text-slate-400 mb-8 max-w-2xl">
+        Everything on this page was bundled from a single code string. No CDN, no network.
+        Turn off your wifi and reload — it still works.
+      </p>
+
+      <div className="demo-grid grid gap-6 mb-8" style={{ gridTemplateColumns: "1fr 1fr" }}>
+        <div className="demo-card rounded-xl border border-slate-800 bg-slate-900 p-6">
+          <div className="flex items-center gap-2 mb-4">
+            <Activity />
+            <h2 className="text-xl font-semibold">Interactivity</h2>
+          </div>
+          <p className="text-slate-400 mb-4">Proves hydration: this button only works after the JS loads.</p>
+          <div className="flex items-center gap-4">
+            <button
+              className="rounded-lg bg-sky-600 hover:bg-sky-500 px-4 py-2 font-medium"
+              onClick={() => setCount(count + 1)}
+            >
+              clicked {count} times
+            </button>
+            <button className="rounded-lg border border-slate-700 px-4 py-2" onClick={() => setCount(0)}>
+              reset
+            </button>
+          </div>
+        </div>
+
+        <div className="demo-card rounded-xl border border-slate-800 bg-slate-900 p-6">
+          <div className="flex items-center gap-2 mb-4">
+            <Sparkles />
+            <h2 className="text-xl font-semibold">Animation</h2>
+          </div>
+          <p className="text-slate-400 mb-4">motion/react, bundled and tree-shaken.</p>
+          <motion.div
+            className="h-12 w-12 rounded-lg bg-gradient-to-br from-sky-400 to-indigo-600"
+            animate={{ rotate: 360 }}
+            transition={{ duration: 3, repeat: Infinity, ease: "linear" }}
+          />
+        </div>
+      </div>
+
+      <div className="demo-card rounded-xl border border-slate-800 bg-slate-900 p-6">
+        <div className="flex items-center gap-2 mb-4">
+          <ChartColumn />
+          <h2 className="text-xl font-semibold">recharts</h2>
+        </div>
+        <LineChart width={640} height={260} data={data}>
+          <CartesianGrid stroke="#1e293b" />
+          <XAxis dataKey="name" stroke="#64748b" />
+          <YAxis stroke="#64748b" />
+          <Tooltip contentStyle={{ background: "#0f172a", border: "1px solid #334155" }} />
+          <Line type="monotone" dataKey="v" stroke="#38bdf8" strokeWidth={2} />
+        </LineChart>
+      </div>
+    </main>
+  );
+}
diff --git a/scripts/manual/test-standalone-site.mjs b/scripts/manual/test-standalone-site.mjs
new file mode 100644
index 0000000..f6c9d59
--- /dev/null
+++ b/scripts/manual/test-standalone-site.mjs
@@ -0,0 +1,188 @@
+/**
+ * End-to-end check for the standalone site builder.
+ *
+ * Lives here rather than in the jest suite because it needs the built
+ * dist/builder.mjs: the builder is ESM-only and uses `import.meta.url`, which
+ * is a syntax error under jest's CJS runtime. The pure half is covered by
+ * src/builder/__tests__/entry.test.js, which does run in CI.
+ *
+ *   bun run build && bun run test:manual:site
+ *
+ * Pass a file to build that instead of the built-in suite. The file holds the
+ * same canvas-format string ReactCanvas takes -- a default export (or a
+ * render(...) call) and no import statements, with dependencies coming from the
+ * scope:
+ *
+ *   bun run test:manual:site ./MyPage.jsx
+ *   bun run test:manual:site ./MyPage.jsx ./out
+ */
+
+import { readFile, rm } from "node:fs/promises";
+import { buildStandaloneSite, writeStandaloneSite } from "../../dist/builder.mjs";
+
+const OUT = "/tmp/react-code-canvas-site";
+
+let failures = 0;
+const check = (label, ok, detail = "") => {
+  console.log(`${ok ? "  ok  " : "  FAIL"} ${label}${detail ? ` -- ${detail}` : ""}`);
+  if (!ok) failures++;
+};
+
+const rootOf = (html) => html.match(/<div id="root">([\s\S]*?)<\/div>\n<script/)?.[1] ?? "";
+const kb = (s) => `${(Buffer.byteLength(s) / 1024).toFixed(1)} KB`;
+
+/* -------------------------------------------------------------------------- */
+/* file mode                                                                  */
+/* -------------------------------------------------------------------------- */
+
+const [fileArg, outArg] = process.argv.slice(2);
+
+if (fileArg) {
+  const outDir = outArg ?? "out";
+
+  let code;
+  try {
+    code = await readFile(fileArg, "utf8");
+  } catch {
+    console.error(`\ncannot read ${fileArg}\n`);
+    process.exit(1);
+  }
+
+  console.log(`\nbuilding ${fileArg} -> ${outDir}/`);
+
+  // Imports do resolve here, unlike in the canvas: sucrase rewrites them to
+  // `require(...)` and esbuild bundles those calls (verified -- no `require`
+  // survives in the output). Worth flagging anyway, because the same file
+  // pasted into a ReactCanvas would render unstyled or throw.
+  if (/^\s*import\s/m.test(code)) {
+    console.log(
+      "\n  note: this file has import statements. They resolve here because the\n" +
+        "  builder bundles, but the canvas strips them -- the same file would not\n" +
+        "  render in a ReactCanvas. Drop them to keep it portable.\n"
+    );
+  }
+
+  let files;
+  try {
+    files = await buildStandaloneSite(code, { title: fileArg.split("/").pop() });
+  } catch (err) {
+    console.error(`\n${err.message}\n`);
+    process.exit(1);
+  }
+
+  const html = files["index.html"];
+  const js = files[Object.keys(files).find((k) => k.includes("app-"))];
+  const css = files[Object.keys(files).find((k) => k.includes("style-"))];
+  const markup = rootOf(html);
+
+  console.log("");
+  for (const [name, contents] of Object.entries(files)) {
+    console.log(`  ${name.padEnd(32)} ${kb(contents)}`);
+  }
+  console.log("");
+  console.log(`  prerendered   ${markup ? `yes, ${kb(markup)} of markup` : "no -- client-only shell (see warning above)"}`);
+  console.log(`  stylesheet    ${css ? "yes, Tailwind compiled" : "none -- no className in the code"}`);
+  console.log(`  bundle        ${kb(js)}`);
+
+  await rm(outDir, { recursive: true, force: true });
+  const written = await writeStandaloneSite(code, outDir, {
+    title: fileArg.split("/").pop(),
+  });
+  console.log(`\n  wrote ${written.length} files\n\n  npx serve ${outDir}\n`);
+  process.exit(0);
+}
+
+// --- a full page: hooks, an icon, Helmet, a <style> tag, Tailwind classes -----
+const page = `
+export default function Page() {
+  const [n, setN] = useState(0);
+  return (
+    <main className="flex flex-col gap-4 p-8 bg-slate-900 text-white">
+      <Helmet><title>Counter</title><meta name="description" content="demo" /></Helmet>
+      <h1 className="text-3xl font-bold">Count: {n}</h1>
+      <Camera />
+      <button className="rounded bg-blue-600 px-4 py-2" onClick={() => setN(n + 1)}>inc</button>
+    </main>
+  );
+}
+`;
+
+console.log("\nfull page");
+const t0 = Date.now();
+const files = await buildStandaloneSite(page, { title: "Fallback" });
+const ms = Date.now() - t0;
+const html = files["index.html"];
+const js = files[Object.keys(files).find((k) => k.includes("app-"))];
+const css = files[Object.keys(files).find((k) => k.includes("style-"))];
+
+check("built in under 2s", ms < 2000, `${ms}ms`);
+check("emits index.html + hashed js + hashed css", Object.keys(files).length === 3, Object.keys(files).join(", "));
+check("prerendered the markup", html.includes("Count: "));
+check("prerendered the lucide icon as real svg", html.includes("<svg"));
+check("hoisted the code's own <title> into <head>", /<head>[\s\S]*<title>Counter<\/title>/.test(html));
+check("the code's title beat the title option", !html.includes("Fallback"));
+check("hoisted <meta name=\"description\"> into <head>", /<head>[\s\S]*<meta name="description"/.test(html));
+check("linked the stylesheet", /<link rel="stylesheet" href="assets\/style-/.test(html));
+check("compiled every Tailwind utility used",
+  ["flex", "flex-col", "gap-4", "p-8", "bg-slate-900", "text-white", "text-3xl", "font-bold", "rounded", "bg-blue-600", "px-4", "py-2"]
+    .every((c) => css.includes(`.${c}`)));
+check("bundled react + deps, no CDN", js.length > 100_000 && !js.includes("https://esm.sh"));
+check("emitted both hydrate and render branches", js.includes("hydrateRoot") || js.includes("hydrateRoot"));
+check("#root has no stray whitespace", !/<div id="root">\s/.test(html));
+
+// --- motion + recharts: the two that a naive scan gets wrong ------------------
+// <motion.div> is a JSX member expression whose lowercase object is a real
+// binding; missing it shipped a bundle that died on `motion is not defined` and
+// took the whole page with it. LineChart exists in both lucide and recharts.
+console.log("\nmotion + recharts");
+const charty = await buildStandaloneSite(`
+export default () => (
+  <div>
+    <motion.div animate={{ rotate: 360 }} />
+    <LineChart width={300} height={150} data={[{ n: "a", v: 1 }]}>
+      <Line dataKey="v" stroke="#abcdef" />
+    </LineChart>
+  </div>
+)`);
+const chartyJs = charty[Object.keys(charty).find((k) => k.includes("app-"))];
+check("bundled motion/react", /framer|motion/i.test(chartyJs));
+check("bundled recharts, not the lucide LineChart icon",
+  chartyJs.includes("recharts") || chartyJs.length > 400_000);
+check("did not prerender a lucide icon in place of the chart",
+  !charty["index.html"].includes('class="lucide lucide-chart'));
+
+// --- prerender falls back rather than failing the build ----------------------
+console.log("\nprerender fallback (module-level document access)");
+const shell = await buildStandaloneSite('export default () => { const t = document.title; return <p>{t}</p> }');
+check("still produced a site", !!shell["index.html"]);
+check("#root is empty so the client calls createRoot", rootOf(shell["index.html"]) === "");
+
+// --- the analyzer gate -------------------------------------------------------
+console.log("\nvalidation gate");
+let threw = null;
+try { await buildStandaloneSite("export default () => <MissingWidget/>"); } catch (e) { threw = e; }
+check("rejects an unresolvable identifier", !!threw && threw.message.includes("MissingWidget"));
+
+// --- no className means tailwindcss is never needed --------------------------
+console.log("\ninline-styled page");
+const inline = await buildStandaloneSite('export default () => <p style={{ color: "red" }}>hi</p>');
+check("emits no stylesheet", !Object.keys(inline).some((k) => k.endsWith(".css")), Object.keys(inline).join(", "));
+
+// --- EditableText is stripped back to plain JSX ------------------------------
+console.log("\nEditTextReactCanvas output");
+const edited = await buildStandaloneSite(
+  'export default () => <EditableText elementType="p" tailwindStyles="text-lg" textContent="Hello" nodeId="n1"/>'
+);
+check("reversed EditableText to a plain tag", /<p[^>]*>Hello<\/p>/.test(edited["index.html"]), rootOf(edited["index.html"]));
+check("compiled the class it carried", Object.keys(edited).some((k) => k.endsWith(".css")));
+
+// --- writeStandaloneSite -----------------------------------------------------
+console.log("\nwriteStandaloneSite");
+await rm(OUT, { recursive: true, force: true });
+const written = await writeStandaloneSite(page, OUT);
+check("created the nested assets/ directory", written.some((p) => p.includes("/assets/")), written.length + " files");
+
+console.log(
+  failures ? `\n${failures} check(s) failed\n` : `\nall checks passed -- serve ${OUT} to view\n`
+);
+process.exit(failures ? 1 : 0);
diff --git a/skills/react-code-canvas/SKILL.md b/skills/react-code-canvas/SKILL.md
index 5500f18..7424911 100644
--- a/skills/react-code-canvas/SKILL.md
+++ b/skills/react-code-canvas/SKILL.md
@@ -1,9 +1,9 @@
 ---
 name: react-code-canvas
 metadata:
-  version: 0.0.3
+  version: 0.0.4
   library-version: "^5.0.0"
-description: "Constraints for authoring React component code that will be rendered by react-code-canvas (ReactCanvas / EditTextReactCanvas). Use whenever generating, editing, reviewing, or validating a code string that gets passed to the canvas as its `code` prop — including LLM prompt construction in the host app. Covers the injected scope, forbidden patterns, entry shape, name collisions, performance rules, and programmatic validation."
+description: "Constraints for authoring React component code that will be rendered by react-code-canvas (ReactCanvas / EditTextReactCanvas) or built into a static site with buildStandaloneSite. Use whenever generating, editing, reviewing, or validating a code string that gets passed to the canvas as its `code` prop or to the site builder — including LLM prompt construction in the host app. Covers the injected scope, forbidden patterns, entry shape, name collisions, React DOM property casing, standalone-build rules (Tailwind, prerender safety), performance, and programmatic validation."
 ---
 
 # react-code-canvas — authoring constraints
@@ -143,6 +143,12 @@ inline styles simply don't have.
 Use Tailwind only when the host explicitly guarantees it; never mix — a page
 half-styled by each is the worst of both.
 
+**Exception — code destined for `buildStandaloneSite`.** The site builder compiles Tailwind for real and ships the CSS with
+the output, so there is no host to depend on and no CDN. If you know the code is
+being built into a standalone site rather than rendered in someone's canvas,
+Tailwind is fully available and costs nothing at runtime. The guidance above is
+about the *canvas*, where no such compile step exists.
+
 ```jsx
 // ✅ self-contained, styled on any host
 <div style={{ display: 'flex', gap: 12, padding: '2rem' }}>
@@ -205,7 +211,113 @@ start on the first commit. Nothing to do about this while authoring — it only
 matters if you are writing tests against the canvas, which must await the render
 rather than assert immediately.
 
-## 7. Performance
+## 7. React DOM properties, not HTML attributes
+
+JSX takes React's camelCase property names, not the HTML attribute spellings. Copying
+markup from an HTML snippet or a docs page is the usual way this gets in.
+
+React warns, then does one of two things — and the second is the dangerous one:
+
+```jsx
+// ⚠️ warns, but renders anyway (React passes unknown lowercase attributes through)
+<p class="p-4">          <label for="x">          <input maxlength="10" />
+
+// ❌ warns and is SILENTLY DROPPED from the output
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<input autofocus readonly />
+```
+
+That `crossorigin` case is the one that bites: the `<link>` still renders, so the page
+looks fine, but the preconnect has lost its CORS mode and the font never benefits.
+Same shape for `autofocus` and `readonly` — the element renders, the behaviour is gone.
+
+```jsx
+// ✅
+<p className="p-4">
+<label htmlFor="x">
+<input maxLength={10} autoFocus readOnly />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+```
+
+The ones worth memorising, because they are the ones people paste:
+
+| HTML | JSX |
+| --- | --- |
+| `class` | `className` |
+| `for` | `htmlFor` |
+| `crossorigin` | `crossOrigin` |
+| `charset` | `charSet` |
+| `http-equiv` | `httpEquiv` |
+| `srcset` | `srcSet` |
+| `tabindex` | `tabIndex` |
+| `maxlength` / `minlength` | `maxLength` / `minLength` |
+| `autofocus` / `autocomplete` | `autoFocus` / `autoComplete` |
+| `readonly` / `novalidate` | `readOnly` / `noValidate` |
+| `colspan` / `rowspan` | `colSpan` / `rowSpan` |
+| `referrerpolicy` | `referrerPolicy` |
+| `playsinline` / `autoplay` | `playsInline` / `autoPlay` |
+| `datetime` | `dateTime` |
+| `enctype` | `encType` |
+| `spellcheck` / `contenteditable` | `spellCheck` / `contentEditable` |
+
+`data-*` and `aria-*` keep their dashes and are the only exceptions.
+
+Inline `style` is an object with camelCase keys, never a string — `style="color:red"`
+throws. Unitless numbers become px: `{{ padding: 16 }}` is `16px`, `{{ lineHeight: 1.5 }}`
+stays unitless.
+
+```jsx
+<div style={{ backgroundColor: '#111', paddingTop: 16, borderRadius: 8 }}>
+```
+
+## 8. Building to a standalone site
+
+Code that renders in the canvas can also be built into a deployable static site with
+`buildStandaloneSite` (see the `react-code-canvas/builder` entry). The contract is the
+same — default export, no imports, scope-provided dependencies — with four differences
+worth writing for up front.
+
+**Tailwind is available.** The builder compiles the classes your code uses into a real
+stylesheet, so the warning in §5 does not apply to a page you know is being built. Write
+`className="flex gap-4 p-8"` freely. It still will not work in a bare canvas, so if the
+same code must do both, stay with inline `style`.
+
+**Class names must appear literally.** Same rule as scope names: the compiler collects
+candidates from the source text, so a computed class is invisible and its CSS is never
+emitted.
+
+```jsx
+// ✅ both branches are in the source
+<div className={active ? "bg-green-500" : "bg-red-500"}>
+// ❌ nothing to collect -- renders unstyled
+<div className={`bg-${color}-500`}>
+```
+
+**Guard DOM access during render, or lose the prerender.** The builder renders the first
+frame in Node, where there is no DOM. Touching `document` or `window` *while rendering*
+throws; the build warns and falls back to a client-only shell, so the page still works but
+ships empty HTML and loses the SEO the prerender existed for. `useEffect` never runs
+during prerender, so it is always safe.
+
+```jsx
+// ✅ prerenders
+const dark = typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches;
+// ✅ prerenders -- effects do not run server-side
+useEffect(() => { document.title = 'Ready'; }, []);
+// ❌ throws in Node, drops the whole page to a client-only shell
+const dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+```
+
+**`<Helmet>` becomes real.** In the canvas it is a no-op unless the host renders a
+provider; in a built site React 19 hoists its tags and the builder lifts them into
+`<head>`. Use it for `<title>` and `<meta name="description">` — that is what crawlers
+read.
+
+One thing that does not prerender at all: **recharts**. Charts render nothing server-side
+and appear on hydration. Everything around them still prerenders, so this only matters if
+a chart is your above-the-fold content.
+
+## 9. Performance
 
 Every name in the source decides what gets downloaded, and the whole string is
 re-evaluated on every change — so authoring choices are directly load-time and
@@ -227,6 +339,99 @@ main-thread choices. The rules that matter, in order of cost:
    ships a ~124 KB browser JIT on every visit; inline `style` (plus a `<style>`
    tag for hover/media/keyframes) costs nothing and works everywhere. See .5.
 
+### Standalone builds: different economics
+
+The rules above describe the *canvas*, which has no bundler and fetches whole
+packages at runtime. A standalone build bundles and tree-shakes, so the costs
+change — measured, brotli, what actually goes over the wire:
+
+| Page contains | JS (brotli) | Δ over baseline |
+| --- | --- | --- |
+| nothing but React | **51 KB** | — the floor, unavoidable |
+| + 1 lucide icon | 51 KB | ~0 |
+| + 8 lucide icons | 52 KB | **~1 KB total** |
+| + one `Fa*` icon | 52 KB | **~1 KB** (not 420 KB) |
+| + `motion` | 86 KB | **+35 KB** |
+| + `recharts` | 123 KB | **+72 KB** |
+
+Two of the canvas rules invert here:
+
+- **Rule 1 does not apply.** esbuild drops the 1610 Font Awesome icons you did not
+  reference, so one `Fa*` name costs ~1 KB rather than the whole pack. Still prefer
+  lucide for consistency, but it is no longer a performance emergency.
+- **Rule 2 does not apply.** Imports are derived from an AST, not a regex, so
+  `// like a LineChart` in a comment or string pulls in nothing.
+
+What still costs: **`motion` and `recharts` are the only real levers.** Together they
+roughly quadruple the payload. CSS is not a lever — Tailwind output measured 1.2 KB
+brotli for a small page and 2.2 KB for one using ~30 utilities, most of it preflight.
+
+### First contentful paint
+
+**Prerendering is the whole ballgame.** With it, the text is in the HTML and paints
+before any JS parses; without it the browser has 51 KB+ of React to fetch, parse and
+execute before anything appears.
+
+```
+prerender: true   ->  <div id="root"><main><h1>Title</h1><p>Some body copy…
+prerender: false  ->  <div id="root"></div>
+```
+
+So the FCP rules are mostly "do not lose the prerender":
+
+1. **Never touch `document`/`window` during render.** One unguarded access drops the
+   *entire page* to a client-only shell — see §8. This is the single most expensive
+   mistake available.
+2. **Keep charts below the fold.** recharts renders nothing server-side, so a chart
+   at the top of the page means an empty first paint no matter what else you do.
+   Lead with text or a static hero.
+3. **Render the shell before the data.** Same as canvas rule 4, and it matters more
+   here: returning `null` until a `fetch` resolves throws away the prerendered HTML
+   you already paid for. Prerender the skeleton, fill it in on the client.
+4. **Do not animate the first paint.** An element that starts at `opacity: 0` and
+   animates in is, to a crawler and to a user on a slow connection, blank. Animate
+   things below the fold, or start from a visible state.
+
+### Images and assets
+
+**The builder bundles code, not files.** Nothing on disk is copied into the output —
+`<img src="./photo.png" />` emits the markup and no file, so the built site 404s.
+Two options that work:
+
+```jsx
+// ✅ absolute URL to something you already host
+<img src="https://cdn.example.com/photo.avif" alt="" />
+// ✅ data URI, for small assets -- inlined into the HTML, no extra request
+<img src="data:image/svg+xml;base64,PHN2Zy…" alt="" />
+```
+
+Keep data URIs to genuinely small assets: base64 adds ~33 %, it cannot be cached
+separately, and it is markup the prerender has to carry.
+
+Then the ordinary rules, which the builder does nothing to enforce:
+
+- **Always set `width` and `height`.** Prerendered HTML means the image box exists
+  before the image does; without dimensions every image is a layout shift.
+- **`loading="lazy"` and `decoding="async"`** on anything below the fold. Both are
+  plain lowercase DOM attributes and need no React casing.
+- **Never lazy-load the hero.** `loading="lazy"` above the fold delays the LCP
+  element by a round trip.
+- **Prefer SVG for icons you already have** — lucide icons are inline SVG in the
+  bundle, so they cost no request at all and cannot shift layout.
+- **Fonts: preconnect, and mind the casing.** `crossOrigin` — the HTML spelling is
+  silently dropped (§7) and the preconnect then does nothing useful. Pair with
+  `font-display: swap` so text paints in a fallback rather than waiting.
+
+```jsx
+<Helmet>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+</Helmet>
+<style>{`@font-face { font-family: 'X'; src: url(…); font-display: swap; }`}</style>
+```
+
+A self-hosted or system font stack avoids the round trip entirely and is the fastest
+option if the design allows it.
+
 Full guidance with copy-paste patterns:
 
 - [references/performance.md](references/performance.md) — the rules above in
@@ -234,14 +439,14 @@ Full guidance with copy-paste patterns:
 - [references/patterns.md](references/patterns.md) — known-good page skeletons
   (static page, chart page, animated page, data-driven page)
 
-## 8. Security
+## 10. Security
 
 Code is evaluated in the **host page's own context** — same origin, full access to
 `document`, `window`, cookies, `localStorage`, and authenticated `fetch`. There is no
 iframe sandbox. Never pass untrusted or unreviewed code to the canvas without adding
 isolation appropriate to your application.
 
-## 9. Validate programmatically
+## 11. Validate programmatically
 
 Do not rely on review alone. The library ships a static analyzer that runs in Node —
 no DOM, no React render — suitable for CI, batch audits, and migrations:
@@ -296,5 +501,11 @@ watch its `onError` callback.
 - [ ] lucide icons, not `Fa*`, unless the page already pays for Font Awesome
 - [ ] no recharts/motion names in comments or strings unless the page charts/animates
 - [ ] static shell renders before any data fetch resolves
-- [ ] styled with inline `style` / in-code `<style>`, not Tailwind (unless the host guarantees it)
+- [ ] styled with inline `style` / in-code `<style>`, not Tailwind (unless the host guarantees it, or it is being built to a standalone site)
+- [ ] DOM props in React casing — `className`, `htmlFor`, `crossOrigin`, `autoFocus`, `readOnly` — never the HTML spelling
+- [ ] `style` is an object with camelCase keys, never a string
+- [ ] if building to a standalone site: class names written literally, DOM access during render guarded with `typeof window !== 'undefined'`
+- [ ] images use absolute URLs or data URIs — local file paths are not copied into the build
+- [ ] every `<img>` has `width`/`height`; below-the-fold ones have `loading="lazy"`, the hero does not
+- [ ] nothing above the fold starts invisible (`opacity: 0`) or depends on a chart
 - [ ] `analyzeReactCode()` returns `valid: true`
diff --git a/skills/react-code-canvas/references/performance.md b/skills/react-code-canvas/references/performance.md
index c103938..34f6242 100644
--- a/skills/react-code-canvas/references/performance.md
+++ b/skills/react-code-canvas/references/performance.md
@@ -4,6 +4,13 @@ How the canvas loads things, and what that means for the code you write. Each ru
 names the internal mechanism so the reasoning survives library upgrades — if the
 mechanism changes, the rule may too.
 
+> **Scope: the canvas, which has no bundler.** If the code is being built into a
+> static site with `buildStandaloneSite`, rules 1 and 2 do not apply — esbuild
+> tree-shakes, so one `Fa*` icon costs ~1 KB instead of the whole pack, and a
+> library name in a comment costs nothing because imports come from an AST rather
+> than a regex. See "Standalone builds: different economics" in SKILL.md for the
+> measured figures and the first-contentful-paint rules that replace these.
+
 ## How loading works (the 30-second model)
 
 Before evaluating your code, the canvas scans the **entire source string** with an
diff --git a/src/analyzer/analyzeReactCode.ts b/src/analyzer/analyzeReactCode.ts
index 5ce33ad..787cb02 100644
--- a/src/analyzer/analyzeReactCode.ts
+++ b/src/analyzer/analyzeReactCode.ts
@@ -245,8 +245,18 @@ export async function analyzeReactCode(
       const name = node.name;
       if (!name) return;
 
-      // Lowercase JSX names are intrinsic HTML tags (<div>), not identifiers.
-      if (t.isJSXIdentifier(node) && /^[a-z]/.test(name)) return;
+      // Lowercase JSX names are intrinsic HTML tags (<div>), not identifiers --
+      // except when the name is the object of a member expression. In
+      // `<motion.div>` the `motion` half is a real binding that has to come from
+      // the scope, while the `div` half is still just a property. Skipping both
+      // hid `motion` from referencedGlobals entirely, which the canvas survives
+      // (its regex scanner finds it anyway) but the site builder does not: it
+      // derives the bundle's import statements from this list, so the name went
+      // unimported and the page died with `motion is not defined`.
+      const isMemberObject =
+        t.isJSXMemberExpression(path.parent) && path.parent.object === node;
+      if (t.isJSXIdentifier(node) && /^[a-z]/.test(name) && !isMemberObject)
+        return;
 
       // Locally declared (params, consts, function names, imports) -> fine.
       if (path.scope.hasBinding(name, true)) return;
diff --git a/src/builder/__tests__/entry.test.js b/src/builder/__tests__/entry.test.js
new file mode 100644
index 0000000..2924879
--- /dev/null
+++ b/src/builder/__tests__/entry.test.js
@@ -0,0 +1,164 @@
+import {
+  entryFor,
+  extractCandidates,
+  importLines,
+  splitHoisted,
+} from '../entry'
+
+/** The import line for a package, or undefined if the entry does not import it. */
+const importOf = (entry, pkg) =>
+  entry.split('\n').find((line) => line.endsWith(`from "${pkg}";`))
+
+describe('importLines', () => {
+  it('emits React even when the source never spells it', () => {
+    expect(importLines([])).toBe('import React from "react";')
+  })
+
+  it('routes hooks to react and helmet to react-helmet-async', () => {
+    const out = importLines(['useState', 'Helmet'])
+    expect(out).toContain('import { useState } from "react";')
+    expect(out).toContain('import { Helmet } from "react-helmet-async";')
+  })
+
+  // The alias table is generated and inverts 1029 names; SortDesc is a rename,
+  // not a mechanical kebab-case of its file (arrow-down-wide-narrow).
+  it('resolves a lucide alias to the bare package', () => {
+    expect(importLines(['SortDesc'])).toContain(
+      'import { SortDesc } from "lucide-react";'
+    )
+  })
+
+  // Eleven names exist in both lucide and recharts. Recharts wins at runtime
+  // today, so it must win here -- this is the rule most likely to flip silently.
+  it('gives recharts the names it shares with lucide', () => {
+    const out = importLines(['Text', 'LineChart'])
+    expect(out).toContain('import { LineChart, Text } from "recharts";')
+    expect(out).not.toContain('lucide-react')
+  })
+
+  it('keeps motion lowercase and takes it from motion/react', () => {
+    expect(importLines(['motion'])).toContain(
+      'import { motion } from "motion/react";'
+    )
+  })
+
+  it('takes Fa icons from react-icons/fa', () => {
+    expect(importLines(['FaUser'])).toContain(
+      'import { FaUser } from "react-icons/fa";'
+    )
+  })
+
+  it('does not import runtime globals', () => {
+    const out = importLines(['document', 'Math', 'fetch'])
+    expect(out).toBe('import React from "react";')
+  })
+})
+
+describe('entryFor', () => {
+  // The whole reason the builder reads analyzeReactCode's referencedGlobals
+  // instead of lazyScope's regex scanner: the regex matches inside strings and
+  // would pull ~145KB of recharts in for a component that renders none of it.
+  it('ignores a package name that only appears inside a string', async () => {
+    const entry = await entryFor(
+      'export default () => { const s = "LineChart"; return <p>{s}</p> }'
+    )
+    expect(importOf(entry, 'recharts')).toBeUndefined()
+  })
+
+  // A local declaration shadowing an injected global would otherwise be
+  // imported AND declared -- a duplicate declaration, and a bundle error.
+  it('ignores a local declaration that shadows a lucide icon', async () => {
+    const entry = await entryFor(
+      'function Card(){ return <p>x</p> } export default () => <Card/>'
+    )
+    expect(importOf(entry, 'lucide-react')).toBeUndefined()
+  })
+
+  // <motion.div> is a JSX member expression whose lowercase object is a real
+  // binding. The analyzer used to skip it along with intrinsic tags like <div>,
+  // so no import was emitted and the built page died with `motion is not
+  // defined` -- taking the whole app down, not just the animation.
+  it('imports motion for a <motion.div> member expression', async () => {
+    const entry = await entryFor('export default () => <motion.div animate={{ x: 1 }}/>')
+    expect(importOf(entry, 'motion/react')).toBe(
+      'import { motion } from "motion/react";'
+    )
+  })
+
+  it('still ignores intrinsic lowercase tags', async () => {
+    const entry = await entryFor('export default () => <div><span>hi</span></div>')
+    expect(entry.split('\n').filter((l) => l.startsWith('import '))).toEqual([
+      'import React from "react";',
+      'import { createRoot, hydrateRoot } from "react-dom/client";',
+    ])
+  })
+
+  it('imports an icon the code actually references', async () => {
+    const entry = await entryFor('export default () => <Camera/>')
+    expect(importOf(entry, 'lucide-react')).toBe(
+      'import { Camera } from "lucide-react";'
+    )
+  })
+
+  it.each([
+    ['export default', 'export default () => <p>hi</p>'],
+    ['render()', 'render(<p>hi</p>)'],
+    // Only becomes a default export after normalizeCode, so analysing the raw
+    // source would reject it for having no default export.
+    ['bare expression', '<p>hi</p>'],
+  ])('accepts the %s entry shape', async (_label, code) => {
+    const entry = await entryFor(code)
+    expect(entry).toContain('hydrateRoot')
+    expect(entry).toContain('createRoot')
+  })
+
+  it('rejects code referencing something nothing provides', async () => {
+    await expect(entryFor('export default () => <MissingWidget/>')).rejects.toThrow(
+      /MissingWidget/
+    )
+  })
+})
+
+describe('extractCandidates', () => {
+  it('pulls class names out of a plain className', () => {
+    expect(extractCandidates('<p className="flex gap-3 p-8"/>')).toEqual(
+      expect.arrayContaining(['flex', 'gap-3', 'p-8'])
+    )
+  })
+
+  // The form an attribute-only regex would miss: neither branch is the value of
+  // the className attribute, they are operands inside an expression container.
+  it('pulls both branches of a conditional className', () => {
+    const out = extractCandidates(
+      '<p className={ok ? "bg-green-500" : "bg-red-500"}/>'
+    )
+    expect(out).toEqual(expect.arrayContaining(['bg-green-500', 'bg-red-500']))
+  })
+
+  it('pulls the static chunks of a template literal', () => {
+    const out = extractCandidates('<p className={`p-4 ${x} m-2`}/>')
+    expect(out).toEqual(expect.arrayContaining(['p-4', 'm-2']))
+    expect(out).not.toContain('${x}')
+  })
+
+  it('returns nothing for code with no literals', () => {
+    expect(extractCandidates('export default () => <p>{x}</p>')).toEqual([])
+  })
+})
+
+describe('splitHoisted', () => {
+  it('moves leading title/meta out of the body', () => {
+    const { head, body } = splitHoisted(
+      '<title>T</title><meta name="description" content="d"/><div>hi</div>'
+    )
+    expect(head).toBe('<title>T</title><meta name="description" content="d"/>')
+    expect(body).toBe('<div>hi</div>')
+  })
+
+  // Degrades to today's behaviour rather than reordering anything.
+  it('leaves markup alone when nothing is hoisted', () => {
+    const { head, body } = splitHoisted('<div>hi</div>')
+    expect(head).toBe('')
+    expect(body).toBe('<div>hi</div>')
+  })
+})
diff --git a/src/builder/entry.ts b/src/builder/entry.ts
new file mode 100644
index 0000000..e906cb3
--- /dev/null
+++ b/src/builder/entry.ts
@@ -0,0 +1,173 @@
+// The pure half of the site builder: source string in, source string out.
+//
+// Split from standalone.ts purely so it is testable. standalone.ts needs
+// `import.meta.url` for esbuild's resolveDir, and jest runs as CJS, where that
+// is a hard syntax error -- so nothing importable from a test may live in the
+// same file. Everything here is plain string and AST work with no node:
+// builtins, no bundler and no filesystem.
+
+import { analyzeReactCode } from "../analyzer/analyzeReactCode";
+import { transform, normalizeCode } from "../coreComponents/core/transform";
+import {
+  baseScope,
+  isFaName,
+  isIconName,
+  isMotionName,
+  isRechartsName,
+} from "../scopes/lazyScope";
+
+// Order matters and mirrors the canvas: resolveScope spreads the recharts and
+// motion namespaces over the per-icon assignments, and SKILL.md documents
+// recharts as the owner of Text/Label/Legend/Tooltip. Eleven names collide
+// between lucide and recharts (AreaChart BarChart Brush Cross Dot Funnel
+// LineChart PieChart Radar ScatterChart Text) -- recharts wins here because it
+// wins at runtime today.
+const GROUPS: [string, (name: string) => boolean][] = [
+  ["recharts", isRechartsName],
+  ["motion/react", isMotionName],
+  ["react-icons/fa", isFaName],
+  ["lucide-react", isIconName],
+];
+
+/**
+ * Turn the globals the code relies on into real import statements.
+ *
+ * Bare specifiers only -- `lucide-react`, not the per-icon
+ * `lucide-react/dist/esm/icons/*.js` paths ICON_LOADERS uses. The canvas needs
+ * per-file dynamic imports because it has no bundler at runtime; here there is
+ * one, and every one of these packages sets `sideEffects: false`, so esbuild
+ * drops what the code does not reference. Measured: two lucide icons bundle to
+ * 2.2 KB, one Fa icon to 3 KB out of 1611.
+ */
+export function importLines(referencedGlobals: string[]): string {
+  const byPackage = new Map<string, Set<string>>();
+  const add = (pkg: string, name: string) => {
+    const names = byPackage.get(pkg) ?? new Set<string>();
+    names.add(name);
+    byPackage.set(pkg, names);
+  };
+
+  for (const name of referencedGlobals) {
+    // Emitted unconditionally below -- sucrase produces React.createElement
+    // whether or not the source ever spells `React`.
+    if (name === "React") continue;
+
+    if (name in baseScope) {
+      add(
+        name === "Helmet" || name === "HelmetProvider"
+          ? "react-helmet-async"
+          : "react",
+        name
+      );
+      continue;
+    }
+
+    const group = GROUPS.find(([, test]) => test(name));
+    if (group) add(group[0], name);
+    // Anything else is a runtime global (document, Math, fetch) -- no import.
+  }
+
+  return [
+    'import React from "react";',
+    ...[...byPackage].map(
+      ([pkg, names]) =>
+        `import { ${[...names].sort().join(", ")} } from "${pkg}";`
+    ),
+  ].join("\n");
+}
+
+/**
+ * The module esbuild bundles.
+ *
+ * The code is run through the same `transform(normalizeCode(...))` the canvas
+ * uses, so client semantics are byte-identical. Sucrase compiles ESM to CJS,
+ * which means the output writes to `exports` and may call
+ * `Object.defineProperty(exports, ...)`; declaring `exports` and `render` as
+ * locals satisfies all three supported entry shapes (export default,
+ * render(...), bare expression) without an esbuild plugin or a virtual module.
+ */
+export async function entryFor(code: string): Promise<string> {
+  // normalizeCode first: it is what the canvas evaluates, and a bare leading
+  // expression only becomes a default export after it. Analysing the raw source
+  // instead would reject `<h1>hi</h1>` for having no default export, which the
+  // canvas renders happily. Idempotent -- the regex needs a leading
+  // `<`/`function`/`()`/`class`, which normalised code no longer has.
+  const normalized = normalizeCode(code);
+  const analysis = await analyzeReactCode(normalized);
+  if (!analysis.valid) {
+    throw new Error(
+      "react-code-canvas: code cannot be built:\n" +
+        analysis.issues.map((i) => `  - [${i.type}] ${i.message}`).join("\n")
+    );
+  }
+
+  return [
+    importLines(analysis.referencedGlobals),
+    'import { createRoot, hydrateRoot } from "react-dom/client";',
+    "const exports = {};",
+    "const render = (v) => { exports.default = v; };",
+    transform(normalized),
+    // The same three result shapes generateElement resolves (core/utils.ts).
+    "const __r = exports.default;",
+    "const __tree = React.isValidElement(__r) ? __r",
+    '  : typeof __r === "function" ? React.createElement(__r)',
+    '  : typeof __r === "string" ? __r : null;',
+    'const __root = document.getElementById("root");',
+    // firstChild is the prerender flag: empty means the prerender was skipped
+    // or threw, and hydrateRoot on an empty container would warn and re-render
+    // anyway. Nothing to keep in sync -- the DOM carries the signal.
+    "if (__root.firstChild) hydrateRoot(__root, __tree);",
+    "else createRoot(__root).render(__tree);",
+  ].join("\n");
+}
+
+// Every string and template literal in the source. Over-matching is free:
+// Tailwind's build() ignores candidates that are not utilities, so a prose
+// string like "Hello world" contributes nothing. Under-matching would ship an
+// unstyled page. Same trade collectIdentifiers makes in lazyScope, for the same
+// reason -- and it catches every className form, including both branches of
+// `className={ok ? "bg-green-500" : "bg-red-500"}` and the static chunks of a
+// template literal, without parsing JSX attributes.
+const STRING_LITERALS =
+  /"([^"\\]*(?:\\.[^"\\]*)*)"|'([^'\\]*(?:\\.[^'\\]*)*)'|`([^`\\]*(?:\\.[^`\\]*)*)`/g;
+
+/** Candidate class names to hand to Tailwind's `build()`. */
+export function extractCandidates(code: string): string[] {
+  const found = new Set<string>();
+  for (const match of code.matchAll(STRING_LITERALS)) {
+    const value = match[1] ?? match[2] ?? match[3] ?? "";
+    // ${...} splits a template literal into its static chunks; the interpolated
+    // expression cannot be known statically and is skipped.
+    for (const token of value.split(/[\s${}]+/)) {
+      if (token) found.add(token);
+    }
+  }
+  return [...found];
+}
+
+// React 19 flushes hoistable tags at the front of the render. Leaving them
+// inside #root puts <meta name="description"> in <body> where crawlers ignore
+// it, and puts component <style> rules after the content they style. Moving
+// them to <head> is also where React looks for them when hydrating.
+const HOISTED =
+  /^\s*(<title\b[^>]*>[\s\S]*?<\/title>|<style\b[^>]*>[\s\S]*?<\/style>|<(?:meta|link)\b[^>]*\/?>)/;
+
+export function splitHoisted(markup: string): { head: string; body: string } {
+  let head = "";
+  let body = markup;
+  let match: RegExpExecArray | null;
+  while ((match = HOISTED.exec(body))) {
+    head += match[1];
+    body = body.slice(match[0].length);
+  }
+  return { head, body };
+}
+
+export const escapeHtml = (value: string): string =>
+  value.replace(
+    /[&<>"']/g,
+    (c) =>
+      ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[
+        c
+      ] as string
+  );
diff --git a/src/builder/standalone.ts b/src/builder/standalone.ts
new file mode 100644
index 0000000..c9edf35
--- /dev/null
+++ b/src/builder/standalone.ts
@@ -0,0 +1,300 @@
+// Node-only. Builds a canvas code string into a self-contained static site.
+//
+// This file must never be reachable from src/index.ts -- it imports esbuild,
+// node:* builtins and react-dom/server, none of which belong in the browser
+// bundle that ReactCanvas consumers load. It ships as a separate
+// `react-code-canvas/builder` entry instead.
+//
+// The pure string half lives in ./entry, which is where anything a jest test
+// needs to import has to live: `import.meta.url` below is a syntax error under
+// jest's CJS runtime.
+
+import { createHash } from "node:crypto";
+import { mkdir, writeFile } from "node:fs/promises";
+import { readFileSync } from "node:fs";
+import { createRequire } from "node:module";
+import { dirname, resolve as resolvePath, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { renderToString } from "react-dom/server";
+
+import {
+  loadTransformer,
+  transformEditableTextToJSX,
+} from "../coreComponents/core/custom-transformer";
+import { generateElement } from "../coreComponents/core/utils";
+import { resolveScope } from "../scopes/lazyScope";
+import { entryFor, escapeHtml, extractCandidates, splitHoisted } from "./entry";
+
+export { entryFor, extractCandidates, importLines } from "./entry";
+
+/** Where esbuild and require.resolve look for bare specifiers. See bundleEntry. */
+const BUILDER_DIR = fileURLToPath(new URL(".", import.meta.url));
+const requireFrom = createRequire(import.meta.url);
+
+export type StandaloneOptions = {
+  /** <title> to use when the code emits none of its own */
+  title?: string;
+  /** <html lang>, default 'en' */
+  lang?: string;
+  /** compile Tailwind for the classes found in the code. Default true */
+  tailwind?: boolean;
+  /** extra CSS, appended after the compiled Tailwind */
+  css?: string;
+  /** raw HTML appended to <head> -- fonts, favicon, OG tags, analytics */
+  head?: string;
+  /** bake the initial markup into the HTML. Default true */
+  prerender?: boolean;
+  /** default true */
+  minify?: boolean;
+  /** esbuild target. Default 'es2020' */
+  target?: string;
+};
+
+/* -------------------------------------------------------------------------- */
+/* optional peers                                                             */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * esbuild and tailwindcss are optional peers: a hard dependency would make
+ * every ReactCanvas consumer download a ~10MB platform binary for a feature
+ * most never call. Imported at point of use so the failure is actionable.
+ */
+async function loadEsbuild() {
+  try {
+    return await import("esbuild");
+  } catch {
+    throw new Error(
+      "react-code-canvas: buildStandaloneSite needs esbuild. Run `npm i -D esbuild`."
+    );
+  }
+}
+
+async function loadTailwind() {
+  try {
+    return await import("tailwindcss");
+  } catch {
+    throw new Error(
+      "react-code-canvas: this code uses Tailwind classes. Run `npm i -D tailwindcss`, " +
+        "or pass { tailwind: false } to skip CSS compilation."
+    );
+  }
+}
+
+/* -------------------------------------------------------------------------- */
+/* pipeline                                                                   */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Machine-generated <EditableText> tags come back from an EditTextReactCanvas
+ * session. A deployed site should not carry click-to-edit fields, so reverse
+ * them to plain JSX. Guarded because the round-trip regenerates the whole file
+ * through Babel with retainLines -- no reason to put untouched code through it.
+ */
+async function stripEditableText(code: string): Promise<string> {
+  if (!code.includes("EditableText")) return code;
+
+  await loadTransformer();
+  const { transformedCode, error } = transformEditableTextToJSX(code) as {
+    transformedCode: string | null;
+    error: unknown;
+  };
+  if (error || !transformedCode) {
+    throw new Error(
+      `react-code-canvas: could not convert EditableText back to JSX: ${
+        error instanceof Error ? error.message : String(error)
+      }`
+    );
+  }
+  return transformedCode;
+}
+
+/** Bundle an already-assembled entry module into a single IIFE. */
+export async function bundleEntry(
+  entry: string,
+  { minify = true, target = "es2020" }: StandaloneOptions = {}
+): Promise<string> {
+  const esbuild = await loadEsbuild();
+
+  const result = await esbuild.build({
+    stdin: {
+      contents: entry,
+      loader: "js",
+      sourcefile: "canvas-entry.js",
+      // The builder's own directory, deliberately not process.cwd(). Node
+      // resolution walks up from here into this package's node_modules (where
+      // recharts/lucide/motion/react-icons always live, they are hard deps) and
+      // then on to the consumer's (react, react-dom -- the peers). Under pnpm's
+      // strict layout the consumer root cannot see recharts at all, but our own
+      // directory always can.
+      resolveDir: BUILDER_DIR,
+    },
+    bundle: true,
+    write: false,
+    // Not esm: an `assets/app.js` loaded as type="module" hits CORS over
+    // file://, so a locally-opened build would silently render nothing.
+    format: "iife",
+    platform: "browser",
+    // react-dom reads this; without the define the bundle throws on `process`.
+    define: { "process.env.NODE_ENV": '"production"' },
+    minify,
+    target,
+    legalComments: "none",
+  });
+
+  return result.outputFiles[0].text;
+}
+
+/* -------------------------------------------------------------------------- */
+/* css                                                                        */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Resolve `@import "tailwindcss"` and the relative theme/preflight/utilities
+ * imports inside it. Tailwind v4 is pure JS with no runtime dependencies -- the
+ * Rust scanner lives in the separate @tailwindcss/oxide package and exists only
+ * to find candidates by scanning files on disk, which we do not need because we
+ * already hold the source.
+ */
+const loadStylesheet = async (id: string, base: string) => {
+  const path =
+    id === "tailwindcss"
+      ? requireFrom.resolve("tailwindcss/index.css")
+      : resolvePath(base, id);
+  return { path, base: dirname(path), content: readFileSync(path, "utf8") };
+};
+
+async function compileCss(
+  code: string,
+  { tailwind = true, css = "", minify = true }: StandaloneOptions
+): Promise<string> {
+  let out = "";
+
+  // Never reached for code with no className, so a project that styles inline
+  // never needs the tailwindcss dependency at all.
+  if (tailwind && code.includes("className")) {
+    const { compile } = await loadTailwind();
+    const compiler = await compile('@import "tailwindcss";', { loadStylesheet });
+    out = compiler.build(extractCandidates(code));
+  }
+
+  out += css;
+  if (!out.trim()) return "";
+
+  if (minify) {
+    const esbuild = await loadEsbuild();
+    // esbuild is already needed here, so this avoids pulling Lightning CSS in
+    // for the sake of minification alone.
+    out = (await esbuild.transform(out, { loader: "css", minify: true })).code;
+  }
+  return out;
+}
+
+/* -------------------------------------------------------------------------- */
+/* prerender                                                                  */
+/* -------------------------------------------------------------------------- */
+
+async function prerenderMarkup(code: string): Promise<string> {
+  try {
+    const scope = await resolveScope(code);
+    const element = generateElement({ code, scope });
+    return element ? renderToString(element) : "";
+  } catch (err: unknown) {
+    // Prerender is an SEO optimisation, never a correctness requirement -- the
+    // client bundle renders the same tree either way. The usual cause is
+    // module-level document/window access, which SKILL.md actively recommends.
+    //
+    // ponytail: no timeout -- renderToString is synchronous and uninterruptible.
+    // Move it to a worker_threads Worker with terminate() if a build ever hangs.
+    console.warn(
+      "[react-code-canvas] prerender failed, emitting a client-only shell:",
+      err instanceof Error ? err.message : String(err)
+    );
+    return "";
+  }
+}
+
+const hash = (content: string): string =>
+  createHash("sha256").update(content).digest("hex").slice(0, 8);
+
+/* -------------------------------------------------------------------------- */
+/* public api                                                                 */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Build a canvas code string into a static site.
+ *
+ * Returns a path -> contents map rather than writing anything, so the caller
+ * decides delivery and the whole thing stays testable without a temp directory.
+ * Use writeStandaloneSite to put it on disk.
+ */
+export async function buildStandaloneSite(
+  code: string,
+  options: StandaloneOptions = {}
+): Promise<Record<string, string>> {
+  const { title, lang = "en", head = "", prerender = true } = options;
+
+  const source = await stripEditableText(code);
+  const entry = await entryFor(source);
+
+  const [js, css] = await Promise.all([
+    bundleEntry(entry, options),
+    compileCss(source, options),
+  ]);
+
+  const markup = prerender ? await prerenderMarkup(source) : "";
+  const { head: hoisted, body } = splitHoisted(markup);
+
+  const files: Record<string, string> = {};
+  const jsPath = `assets/app-${hash(js)}.js`;
+  files[jsPath] = js;
+
+  let cssLink = "";
+  if (css) {
+    const cssPath = `assets/style-${hash(css)}.css`;
+    files[cssPath] = css;
+    cssLink = `<link rel="stylesheet" href="${cssPath}">`;
+  }
+
+  // The code's own <title> wins; `title` is the fallback for code that emits none.
+  const titleTag =
+    hoisted.includes("<title") || !title
+      ? ""
+      : `<title>${escapeHtml(title)}</title>`;
+
+  // #root must contain no stray whitespace: the client checks root.firstChild
+  // to decide hydrate vs render, and a newline would be a text node.
+  const html = `<!doctype html>
+<html lang="${escapeHtml(lang)}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+${titleTag}${hoisted}${cssLink}${head}
+</head>
+<body>
+<div id="root">${body}</div>
+<script src="${jsPath}"></script>
+</body>
+</html>
+`;
+
+  files["index.html"] = html;
+  return files;
+}
+
+/** buildStandaloneSite, written to disk. Returns the paths written. */
+export async function writeStandaloneSite(
+  code: string,
+  outDir: string,
+  options: StandaloneOptions = {}
+): Promise<string[]> {
+  const files = await buildStandaloneSite(code, options);
+  const written: string[] = [];
+
+  for (const [name, contents] of Object.entries(files)) {
+    const target = join(outDir, name);
+    await mkdir(dirname(target), { recursive: true });
+    await writeFile(target, contents, "utf8");
+    written.push(target);
+  }
+  return written;
+}
diff --git a/src/coreComponents/core/custom-transformer.js b/src/coreComponents/core/custom-transformer.js
index 7523aa8..b78dfaf 100644
--- a/src/coreComponents/core/custom-transformer.js
+++ b/src/coreComponents/core/custom-transformer.js
@@ -336,7 +336,7 @@ export function transformEditableTextToJSX(code) {
     return { transformedCode: transformedCode, error: null };
   }
   catch (error) {
-    return { transformedCode: null, error: "error" };
+    return { transformedCode: null, error };
   }
 }
 
diff --git a/src/scopes/__test__/lazyScope.test.js b/src/scopes/__test__/lazyScope.test.js
index 6872013..d007806 100644
--- a/src/scopes/__test__/lazyScope.test.js
+++ b/src/scopes/__test__/lazyScope.test.js
@@ -33,6 +33,26 @@ describe('collectIdentifiers', () => {
   })
 })
 
+describe('resolveScope name collisions', () => {
+  // Eleven names exist in both lucide and recharts. The winner used to be
+  // whichever dynamic import resolved last, so a warm recharts cache let the
+  // icon overwrite it and <LineChart> rendered a 24x24 icon instead of a chart.
+  it.each([
+    'AreaChart', 'BarChart', 'Brush', 'Cross', 'Dot',
+    'Funnel', 'LineChart', 'PieChart', 'Radar', 'ScatterChart', 'Text',
+  ])('gives recharts %s, not the lucide icon of the same name', async (name) => {
+    const recharts = await import('recharts')
+    const scope = await resolveScope(`export default () => <${name}/>`)
+    expect(scope[name]).toBe(recharts[name])
+  })
+
+  it('still resolves a non-colliding icon from lucide', async () => {
+    const scope = await resolveScope('export default () => <Camera/>')
+    const camera = await import('lucide-react/dist/esm/icons/camera.js')
+    expect(scope.Camera).toBe(camera.default)
+  })
+})
+
 describe('iconLoaderFor', () => {
   it('resolves a plain icon name', () => {
     expect(iconLoaderFor('ChevronRight')).toBeInstanceOf(Function)
diff --git a/src/scopes/lazyScope.ts b/src/scopes/lazyScope.ts
index ce37b6a..5b086d2 100644
--- a/src/scopes/lazyScope.ts
+++ b/src/scopes/lazyScope.ts
@@ -185,10 +185,24 @@ export async function resolveScope(
     );
   }
 
+  // The namespaces are captured here and merged after the await, NOT written
+  // straight into `scope` from their .then. Eleven names exist in both lucide
+  // and recharts (AreaChart BarChart Brush Cross Dot Funnel LineChart PieChart
+  // Radar ScatterChart Text), and writing from inside the callbacks made the
+  // winner whichever import happened to resolve last: on a cold cache the ~0.7KB
+  // icon file beat recharts and recharts won, but once recharts was warm it
+  // resolved first and the icon overwrote it -- so <LineChart> silently rendered
+  // a 24x24 icon instead of a chart. Merging in a fixed order after the await
+  // makes the precedence the documented one: icons first, charts/motion over
+  // them, matching SKILL.md's "recharts owns Text/Label/Legend/Tooltip".
+  let rechartsMod: Record<string, unknown> | undefined;
+  let motionMod: Record<string, unknown> | undefined;
+  let faMod: Record<string, unknown> | undefined;
+
   if (needsRecharts) {
     pending.push(
       import("recharts").then((mod) => {
-        assignNamespace(scope, mod);
+        rechartsMod = mod as Record<string, unknown>;
       }),
     );
   }
@@ -197,7 +211,7 @@ export async function resolveScope(
     pending.push(
       // `motion` has to keep its name -- <motion.div> resolves against it.
       import("motion/react").then((mod) => {
-        assignNamespace(scope, mod);
+        motionMod = mod as Record<string, unknown>;
       }),
     );
   }
@@ -210,13 +224,18 @@ export async function resolveScope(
     // modules from the pack ourselves, or move the code to lucide equivalents.
     pending.push(
       import("react-icons/fa").then((mod: Record<string, unknown>) => {
-        // Assign only what the code referenced, not all 1611 exports: these
-        // become `new Function` parameters on every evaluation.
-        for (const name of faNames) scope[name] = mod[name];
+        faMod = mod;
       }),
     );
   }
 
   await Promise.all(pending);
+
+  if (rechartsMod) assignNamespace(scope, rechartsMod);
+  if (motionMod) assignNamespace(scope, motionMod);
+  // Assign only what the code referenced, not all 1611 exports: these become
+  // `new Function` parameters on every evaluation.
+  if (faMod) for (const name of faNames) scope[name] = faMod[name];
+
   return { ...scope, ...extra };
 }

From 4debbf121d81870d59e3ab429911db6668569930 Mon Sep 17 00:00:00 2001
From: James Titus <titusjames299@gmail.com>
Date: Thu, 13 Aug 2026 12:41:10 +0530
Subject: [PATCH 3/6] chore: buildStandaloneSite css building

---
 scripts/manual/test-standalone-site.mjs       |   16 +-
 skills/react-code-canvas/SKILL.md             |  220 +-
 .../react-code-canvas/references/patterns.md  |    2 +-
 .../references/performance.md                 |    6 +-
 src/builder/__tests__/entry.test.js           |   39 +
 src/builder/entry.ts                          |   22 +-
 src/builder/standalone.ts                     |   31 +-
 t.jsx                                         | 1873 +++++++++++++++++
 8 files changed, 2100 insertions(+), 109 deletions(-)
 create mode 100644 t.jsx

diff --git a/scripts/manual/test-standalone-site.mjs b/scripts/manual/test-standalone-site.mjs
index f6c9d59..6c5867c 100644
--- a/scripts/manual/test-standalone-site.mjs
+++ b/scripts/manual/test-standalone-site.mjs
@@ -113,16 +113,24 @@ const files = await buildStandaloneSite(page, { title: "Fallback" });
 const ms = Date.now() - t0;
 const html = files["index.html"];
 const js = files[Object.keys(files).find((k) => k.includes("app-"))];
-const css = files[Object.keys(files).find((k) => k.includes("style-"))];
+// Small CSS is inlined into the HTML rather than emitted as a file, so read it
+// from whichever place it landed.
+const css = files[Object.keys(files).find((k) => k.includes("style-"))]
+  ?? html.match(/<style>([\s\S]*?)<\/style>/)?.[1]
+  ?? "";
 
 check("built in under 2s", ms < 2000, `${ms}ms`);
-check("emits index.html + hashed js + hashed css", Object.keys(files).length === 3, Object.keys(files).join(", "));
+check("emits index.html + hashed js, with small css inlined", Object.keys(files).length === 2, Object.keys(files).join(", "));
 check("prerendered the markup", html.includes("Count: "));
 check("prerendered the lucide icon as real svg", html.includes("<svg"));
 check("hoisted the code's own <title> into <head>", /<head>[\s\S]*<title>Counter<\/title>/.test(html));
 check("the code's title beat the title option", !html.includes("Fallback"));
 check("hoisted <meta name=\"description\"> into <head>", /<head>[\s\S]*<meta name="description"/.test(html));
-check("linked the stylesheet", /<link rel="stylesheet" href="assets\/style-/.test(html));
+// Render-blocking CSS in a separate file costs a round trip before first paint.
+check("inlined the stylesheet, no extra request", /<style>/.test(html) && !/<link rel="stylesheet"/.test(html));
+// Deferred and in <head>: discovered by the preload scanner immediately, executed
+// after the document parses, so it never blocks the prerendered markup painting.
+check("script is deferred and in <head>", /<head>[\s\S]*<script defer src="assets\/app-[^"]+\.js"><\/script>[\s\S]*<\/head>/.test(html));
 check("compiled every Tailwind utility used",
   ["flex", "flex-col", "gap-4", "p-8", "bg-slate-900", "text-white", "text-3xl", "font-bold", "rounded", "bg-blue-600", "px-4", "py-2"]
     .every((c) => css.includes(`.${c}`)));
@@ -174,7 +182,7 @@ const edited = await buildStandaloneSite(
   'export default () => <EditableText elementType="p" tailwindStyles="text-lg" textContent="Hello" nodeId="n1"/>'
 );
 check("reversed EditableText to a plain tag", /<p[^>]*>Hello<\/p>/.test(edited["index.html"]), rootOf(edited["index.html"]));
-check("compiled the class it carried", Object.keys(edited).some((k) => k.endsWith(".css")));
+check("compiled the class it carried", /<style>[\s\S]*\.text-lg/.test(edited["index.html"]));
 
 // --- writeStandaloneSite -----------------------------------------------------
 console.log("\nwriteStandaloneSite");
diff --git a/skills/react-code-canvas/SKILL.md b/skills/react-code-canvas/SKILL.md
index 7424911..e911cbb 100644
--- a/skills/react-code-canvas/SKILL.md
+++ b/skills/react-code-canvas/SKILL.md
@@ -1,7 +1,7 @@
 ---
 name: react-code-canvas
 metadata:
-  version: 0.0.4
+  version: 0.0.5
   library-version: "^5.0.0"
 description: "Constraints for authoring React component code that will be rendered by react-code-canvas (ReactCanvas / EditTextReactCanvas) or built into a static site with buildStandaloneSite. Use whenever generating, editing, reviewing, or validating a code string that gets passed to the canvas as its `code` prop or to the site builder — including LLM prompt construction in the host app. Covers the injected scope, forbidden patterns, entry shape, name collisions, React DOM property casing, standalone-build rules (Tailwind, prerender safety), performance, and programmatic validation."
 ---
@@ -61,8 +61,8 @@ export default function Page() {
 | React | `React`, `useState`, `useEffect`, `useContext`, `useReducer`, `useRef`, `useMemo`, `useCallback` | free (base) |
 | Icons (preferred) | all **5841** `lucide-react` exports, e.g. `<Activity/>`, `<User/>`, `<ChevronRight/>` | ~0.8 KB gz per icon |
 | Icons (legacy) | all **1611** `react-icons/fa` exports, e.g. `<FaUser/>`, `<FaHome/>` | **whole pack, ~420 KB gz** — one `Fa*` name fetches all of it |
-| Charts | all **101** `recharts` exports, e.g. `ResponsiveContainer`, `LineChart`, `XAxis`, `CartesianGrid` | whole library, ~145 KB gz |
-| Animation | `motion` (as `<motion.div>`) plus motion's **383** hooks/components | whole library, ~61 KB gz |
+| Charts | all **101** `recharts` exports, e.g. `ResponsiveContainer`, `LineChart`, `XAxis`, `CartesianGrid` | whole library, ~158 KB gz |
+| Animation | `motion` (as `<motion.div>`) plus motion's **383** hooks/components | whole library, ~64 KB gz |
 | Head | `Helmet`, `HelmetProvider` | free (base) |
 | Entry | `render`, `exports`, `require` | free (base) |
 
@@ -99,7 +99,7 @@ table above.
 
 ## 4. Name collisions — the sharpest edge
 
-The scope draws on ~7850 flat global names. Declaring a component or variable with a
+The scope draws on ~7950 flat global names. Declaring a component or variable with a
 name that already exists silently shadows it, or worse, your JSX resolves to a chart
 primitive.
 
@@ -116,12 +116,19 @@ So `<Text>hello</Text>` is a *chart* component, not a text element. Use them onl
 inside a chart tree. For generic UI use plain tags (`<span>`, `<p>`) or a distinctly
 named component.
 
-**Lucide owns most common UI nouns.** Of 70 everyday component names checked
-(`Navigation`, `Menu`, `Image`, `Link`, `Table`, `Search`, `Layout`, `Grid`, `Map`,
-`Card`-adjacent words, …), **68 collide** with a lucide icon.
+**Lucide owns most common UI nouns.** Measured against `isIconName`, **54 of 70**
+everyday component names collide — `Navigation`, `Menu`, `Image`, `Link`, `Table`,
+`Search`, `Layout`, `Grid`, `Map`, `User`, `File`, `Folder`, `Calendar`, `Settings`
+and so on.
 
-Therefore: **prefix your own components.** `SiteNavigation`, not `Navigation`.
-`ProductCard`, not `Card`. `PageHeader`, not `Header`.
+A useful few do *not*, and are safe to use unprefixed: `Card`, `Header`, `Footer`,
+`Button`, `Input`, `Modal`, `Panel`, `Alert`, `Tabs`, `Dialog`, `Chart`. That list is
+only as stable as the lucide version, though — a future release adding a `Card` icon
+turns a working page into a duplicate declaration.
+
+Therefore: **prefix your own components anyway.** `SiteNavigation`, not `Navigation`.
+`DataTable`, not `Table`. `AppSearch`, not `Search`. Prefixing costs nothing and does
+not depend on which names lucide happens to ship today.
 
 Never declare a module-scope name matching an injected global — including React hooks,
 lucide icons, recharts components, motion exports, or the editing helpers
@@ -282,17 +289,46 @@ stylesheet, so the warning in §5 does not apply to a page you know is being bui
 `className="flex gap-4 p-8"` freely. It still will not work in a bare canvas, so if the
 same code must do both, stay with inline `style`.
 
+**Core Tailwind only — no plugins, no custom theme.** The builder compiles
+`@import "tailwindcss"` with stock defaults. There is no config file, so anything that
+would come from a plugin or a `theme.extend` block produces no CSS and the element
+renders unstyled. The classes that bite most often:
+
+| Class | From | Instead |
+| --- | --- | --- |
+| `animate-in`, `slide-in-from-top-2`, `fade-in` | `tailwindcss-animate` plugin | a `<style>` block with `@keyframes` |
+| `prose`, `prose-lg` | `@tailwindcss/typography` | style the elements directly |
+| `bg-brand-500`, `text-primary` | a custom `theme.extend` palette | the arbitrary value: `bg-[#0071E3]` |
+
+**Arbitrary values are core and do work** — verified compiling: `text-[#1D1D1F]`,
+`w-[80vw]`, `bg-white/10`, `hover:bg-black/[0.02]`, `focus:border-[#0071E3]`,
+`lg:col-span-5`. So any brand colour or one-off size is available without a config;
+write it inline rather than inventing a theme name.
+
 **Class names must appear literally.** Same rule as scope names: the compiler collects
-candidates from the source text, so a computed class is invisible and its CSS is never
+candidates from the source, so a fully computed class is invisible and its CSS is never
 emitted.
 
 ```jsx
 // ✅ both branches are in the source
 <div className={active ? "bg-green-500" : "bg-red-500"}>
+// ✅ static chunks of a template are collected
+<div className={`p-4 ${extra}`}>
 // ❌ nothing to collect -- renders unstyled
 <div className={`bg-${color}-500`}>
 ```
 
+**Your own class names need a `<style>` block.** A class Tailwind does not recognise is
+simply dropped, so `className="apple-card"` styles nothing unless the component also
+defines it:
+
+```jsx
+<style>{`.apple-card { border-radius: 18px; backdrop-filter: blur(20px); }`}</style>
+<div className="apple-card p-8">…</div>
+```
+
+That CSS ships inside the JS bundle and works — it is not Tailwind's to compile.
+
 **Guard DOM access during render, or lose the prerender.** The builder renders the first
 frame in Node, where there is no DOM. Touching `document` or `window` *while rendering*
 throws; the build warns and falls back to a client-only shell, so the page still works but
@@ -317,125 +353,125 @@ One thing that does not prerender at all: **recharts**. Charts render nothing se
 and appear on hydration. Everything around them still prerenders, so this only matters if
 a chart is your above-the-fold content.
 
-## 9. Performance
+## 9. Performance — standalone builds
 
-Every name in the source decides what gets downloaded, and the whole string is
-re-evaluated on every change — so authoring choices are directly load-time and
-main-thread choices. The rules that matter, in order of cost:
+**Load time of the built site.** For canvas-only code, skip to §9b.
 
-1. **Never emit an `Fa*` name unless the page already uses Font Awesome.** One
-   `Fa*` reference fetches the whole ~420 KB gz pack; the lucide equivalent is
-   one ~0.8 KB file. `FaUser` → `User`, `FaHome` → `House`.
-2. **Do not mention chart/animation names you don't render.** The scanner is a
-   regex over the whole source — `recharts` (~145 KB gz) and `motion` (~61 KB gz)
-   load even when the name only appears in a **comment or string literal**.
-   `// like a LineChart` costs 145 KB.
-3. **Keep module level empty.** Top-level statements re-run on every evaluation,
-   including the re-execution after a failed edit. Constants are fine; work is not.
-4. **Render the shell before the data.** The canvas paints as soon as evaluation
-   returns — a component that returns `null` until a `fetch` resolves wastes that
-   paint and pushes the host page's LCP onto your network call.
-5. **Style inline, not with Tailwind.** Tailwind classes only render if the host
-   ships a ~124 KB browser JIT on every visit; inline `style` (plus a `<style>`
-   tag for hover/media/keyframes) costs nothing and works everywhere. See .5.
+The builder already does the page-level work for you, so do not hand-write it: the
+CSS is inlined when small (no render-blocking request), the script is `defer`red in
+`<head>` (discovered immediately, never blocks the parse), asset names are
+content-hashed (safe to cache immutably), and the markup is prerendered. A built page
+is **two requests**: the HTML and the JS.
 
-### Standalone builds: different economics
+What is left is entirely decided by what you write.
 
-The rules above describe the *canvas*, which has no bundler and fetches whole
-packages at runtime. A standalone build bundles and tree-shakes, so the costs
-change — measured, brotli, what actually goes over the wire:
+### The payload
 
-| Page contains | JS (brotli) | Δ over baseline |
+Measured, brotli, over the wire:
+
+| Page contains | JS | Δ |
 | --- | --- | --- |
-| nothing but React | **51 KB** | — the floor, unavoidable |
-| + 1 lucide icon | 51 KB | ~0 |
-| + 8 lucide icons | 52 KB | **~1 KB total** |
-| + one `Fa*` icon | 52 KB | **~1 KB** (not 420 KB) |
+| nothing but React | **51 KB** | the floor — unavoidable |
+| + 8 lucide icons | 52 KB | ~1 KB total |
+| + one `Fa*` icon | 52 KB | ~1 KB — esbuild tree-shakes the other 1610 |
 | + `motion` | 86 KB | **+35 KB** |
 | + `recharts` | 123 KB | **+72 KB** |
 
-Two of the canvas rules invert here:
+**`motion` and `recharts` are the only levers.** Together they roughly quadruple the
+payload. Everything else is noise: icons are ~free, and Tailwind output measured 1.2 KB
+brotli for a small page, 2.2 KB at ~30 utilities, inlined either way.
 
-- **Rule 1 does not apply.** esbuild drops the 1610 Font Awesome icons you did not
-  reference, so one `Fa*` name costs ~1 KB rather than the whole pack. Still prefer
-  lucide for consistency, but it is no longer a performance emergency.
-- **Rule 2 does not apply.** Imports are derived from an AST, not a regex, so
-  `// like a LineChart` in a comment or string pulls in nothing.
+So: do not import a charting library to draw one sparkline, and do not pull in `motion`
+for an effect a CSS transition does. A `<style>` block with `transition` or
+`@keyframes` costs bytes already in the HTML; `motion` costs 35 KB.
 
-What still costs: **`motion` and `recharts` are the only real levers.** Together they
-roughly quadruple the payload. CSS is not a lever — Tailwind output measured 1.2 KB
-brotli for a small page and 2.2 KB for one using ~30 utilities, most of it preflight.
+The canvas rules about names in comments do **not** apply here — imports come from an
+AST, so `// like a LineChart` costs nothing.
 
 ### First contentful paint
 
-**Prerendering is the whole ballgame.** With it, the text is in the HTML and paints
-before any JS parses; without it the browser has 51 KB+ of React to fetch, parse and
-execute before anything appears.
-
-```
-prerender: true   ->  <div id="root"><main><h1>Title</h1><p>Some body copy…
-prerender: false  ->  <div id="root"></div>
-```
-
-So the FCP rules are mostly "do not lose the prerender":
+The prerendered HTML paints before any of that 51 KB parses, so FCP is almost entirely
+about not throwing that away:
 
 1. **Never touch `document`/`window` during render.** One unguarded access drops the
-   *entire page* to a client-only shell — see §8. This is the single most expensive
-   mistake available.
-2. **Keep charts below the fold.** recharts renders nothing server-side, so a chart
-   at the top of the page means an empty first paint no matter what else you do.
-   Lead with text or a static hero.
-3. **Render the shell before the data.** Same as canvas rule 4, and it matters more
-   here: returning `null` until a `fetch` resolves throws away the prerendered HTML
-   you already paid for. Prerender the skeleton, fill it in on the client.
-4. **Do not animate the first paint.** An element that starts at `opacity: 0` and
-   animates in is, to a crawler and to a user on a slow connection, blank. Animate
-   things below the fold, or start from a visible state.
+   *whole page* to an empty shell (§8) and FCP becomes "after React boots". This is the
+   most expensive mistake available and the easiest to make.
+2. **Keep charts below the fold.** recharts renders nothing server-side, so a chart at
+   the top means an empty first paint no matter what else you do. Lead with text.
+3. **Render the shell, not `null`.** Returning `null` until a `fetch` resolves throws
+   away the prerendered HTML you already paid for. Prerender a skeleton; fill it in on
+   the client.
+4. **Nothing above the fold starts invisible.** An element animating in from
+   `opacity: 0` is blank to a crawler and to a slow connection. Animate below the fold,
+   or start visible.
 
 ### Images and assets
 
-**The builder bundles code, not files.** Nothing on disk is copied into the output —
-`<img src="./photo.png" />` emits the markup and no file, so the built site 404s.
-Two options that work:
+**The builder bundles code, not files.** Nothing on disk is copied — `<img
+src="./photo.png" />` emits markup and no file, so the built site 404s.
 
 ```jsx
 // ✅ absolute URL to something you already host
-<img src="https://cdn.example.com/photo.avif" alt="" />
-// ✅ data URI, for small assets -- inlined into the HTML, no extra request
+<img src="https://cdn.example.com/photo.avif" alt="" width={800} height={450} />
+// ✅ data URI for small assets -- no extra request
 <img src="data:image/svg+xml;base64,PHN2Zy…" alt="" />
 ```
 
-Keep data URIs to genuinely small assets: base64 adds ~33 %, it cannot be cached
-separately, and it is markup the prerender has to carry.
-
-Then the ordinary rules, which the builder does nothing to enforce:
+Data URIs only for genuinely small assets: base64 adds ~33 %, cannot be cached
+separately, and is markup the prerender has to carry.
 
 - **Always set `width` and `height`.** Prerendered HTML means the image box exists
   before the image does; without dimensions every image is a layout shift.
-- **`loading="lazy"` and `decoding="async"`** on anything below the fold. Both are
-  plain lowercase DOM attributes and need no React casing.
-- **Never lazy-load the hero.** `loading="lazy"` above the fold delays the LCP
-  element by a round trip.
-- **Prefer SVG for icons you already have** — lucide icons are inline SVG in the
-  bundle, so they cost no request at all and cannot shift layout.
+- **`loading="lazy"` and `decoding="async"`** below the fold — plain lowercase
+  attributes, no React casing needed.
+- **Never lazy-load the hero.** It delays the LCP element by a round trip.
+- **Prefer lucide icons over image files** — they are inline SVG in the bundle, so they
+  cost no request and cannot shift layout.
 - **Fonts: preconnect, and mind the casing.** `crossOrigin` — the HTML spelling is
-  silently dropped (§7) and the preconnect then does nothing useful. Pair with
-  `font-display: swap` so text paints in a fallback rather than waiting.
+  silently dropped (§7) and the preconnect then does nothing.
+- **Set `font-display`.** The default blocks text for up to 3 s, and invisible text is
+  not a contentful paint, so FCP waits on the font. `swap` paints immediately in a
+  fallback but reflows when the real font lands; `optional` gets the fast paint with no
+  shift, at the cost of some first visits using the fallback. Prefer `optional` unless
+  the brand font is non-negotiable.
 
 ```jsx
 <Helmet>
   <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
 </Helmet>
-<style>{`@font-face { font-family: 'X'; src: url(…); font-display: swap; }`}</style>
+<style>{`@font-face { font-family: 'X'; src: url(…); font-display: optional; }`}</style>
 ```
 
-A self-hosted or system font stack avoids the round trip entirely and is the fastest
-option if the design allows it.
+A system font stack avoids all of it — no request, no invisible text, no shift — and is
+the fastest option whenever the design allows. Tailwind's default `font-sans` already is
+one.
+
+## 9b. Performance — canvas rendering
+
+Different machine, different rules. The canvas has no bundler: it scans the source with
+a **regex** and fetches whole packages at runtime, and re-evaluates the entire string on
+every change. So authoring choices are directly load-time and main-thread choices:
+
+1. **Never emit an `Fa*` name unless the page already uses Font Awesome.** One
+   `Fa*` reference fetches the whole ~420 KB gz pack; the lucide equivalent is
+   one ~0.8 KB file. `FaUser` → `User`, `FaHome` → `House`.
+2. **Do not mention chart/animation names you don't render.** The scanner is a
+   regex over the whole source — `recharts` (~158 KB gz) and `motion` (~64 KB gz)
+   load even when the name only appears in a **comment or string literal**.
+   `// like a LineChart` costs 158 KB.
+3. **Keep module level empty.** Top-level statements re-run on every evaluation,
+   including the re-execution after a failed edit. Constants are fine; work is not.
+4. **Render the shell before the data.** The canvas paints as soon as evaluation
+   returns — a component that returns `null` until a `fetch` resolves wastes that
+   paint and pushes the host page's LCP onto your network call.
+5. **Style inline, not with Tailwind.** Tailwind classes only render if the host
+   ships a ~124 KB browser JIT on every visit; inline `style` (plus a `<style>`
+   tag for hover/media/keyframes) costs nothing and works everywhere. See .5.
 
 Full guidance with copy-paste patterns:
 
-- [references/performance.md](references/performance.md) — the rules above in
-  depth, with the internals that explain them
+- [references/performance.md](references/performance.md) — the canvas rules above
+  in depth, with the internals that explain them
 - [references/patterns.md](references/patterns.md) — known-good page skeletons
   (static page, chart page, animated page, data-driven page)
 
@@ -494,7 +530,7 @@ watch its `onError` callback.
 
 - [ ] default export (or `render()` call) present
 - [ ] zero `import` statements
-- [ ] own components prefixed so they cannot shadow the ~7850 injected globals
+- [ ] own components prefixed so they cannot shadow the ~7950 injected globals
 - [ ] every scope name spelled out literally, never built from strings
 - [ ] `Text`/`Label`/`Tooltip`/`Line`/`Bar`/etc. used only inside chart trees
 - [ ] top-level side effects guarded against re-execution
@@ -505,6 +541,8 @@ watch its `onError` callback.
 - [ ] DOM props in React casing — `className`, `htmlFor`, `crossOrigin`, `autoFocus`, `readOnly` — never the HTML spelling
 - [ ] `style` is an object with camelCase keys, never a string
 - [ ] if building to a standalone site: class names written literally, DOM access during render guarded with `typeof window !== 'undefined'`
+- [ ] no plugin classes (`animate-in`, `slide-in-from-*`, `prose`) and no custom theme names (`bg-brand-500`) — core Tailwind and arbitrary values only
+- [ ] every non-Tailwind class used is defined in a `<style>` block in the component
 - [ ] images use absolute URLs or data URIs — local file paths are not copied into the build
 - [ ] every `<img>` has `width`/`height`; below-the-fold ones have `loading="lazy"`, the hero does not
 - [ ] nothing above the fold starts invisible (`opacity: 0`) or depends on a chart
diff --git a/skills/react-code-canvas/references/patterns.md b/skills/react-code-canvas/references/patterns.md
index 0568c4a..b265d96 100644
--- a/skills/react-code-canvas/references/patterns.md
+++ b/skills/react-code-canvas/references/patterns.md
@@ -87,7 +87,7 @@ export default function RevenuePage() {
 ```
 
 Referencing one recharts name loads the whole library, so a page either charts or
-it doesn't — a lone `<Tooltip>` outside a chart tree costs the same 145 KB and is
+it doesn't — a lone `<Tooltip>` outside a chart tree costs the same 158 KB and is
 a collision bug besides (SKILL.md .4). `REVENUE` at module level is fine: it is
 data, not work.
 
diff --git a/skills/react-code-canvas/references/performance.md b/skills/react-code-canvas/references/performance.md
index 34f6242..ade0ef1 100644
--- a/skills/react-code-canvas/references/performance.md
+++ b/skills/react-code-canvas/references/performance.md
@@ -17,8 +17,8 @@ Before evaluating your code, the canvas scans the **entire source string** with
 identifier regex and loads what it finds:
 
 - a lucide icon name → one dynamic import, ~0.8 KB gz for that icon's file
-- any recharts name → the whole recharts library (~145 KB gz) in one import
-- any motion name → the whole motion library (~61 KB gz) in one import
+- any recharts name → the whole recharts library (~158 KB gz) in one import
+- any motion name → the whole motion library (~64 KB gz) in one import
 - any `Fa*` (Font Awesome) name → the whole `react-icons/fa` pack (~420 KB gz,
   1.3 MB raw) in one import — there are no per-icon files to split
 
@@ -54,7 +54,7 @@ pack is a single fetch. Mixing sets on one page pays both loaders; pick one.
 ## Rule 2 — library names in comments and strings still cost
 
 ```jsx
-// ❌ this comment costs ~145 KB gz — "LineChart" matches the recharts name list
+// ❌ this comment costs ~158 KB gz — "LineChart" matches the recharts name list
 // TODO: maybe swap this table for a LineChart later
 export default function StatsTable() { ... }
 
diff --git a/src/builder/__tests__/entry.test.js b/src/builder/__tests__/entry.test.js
index 2924879..c5d90e9 100644
--- a/src/builder/__tests__/entry.test.js
+++ b/src/builder/__tests__/entry.test.js
@@ -1,4 +1,5 @@
 import {
+  candidatesFor,
   entryFor,
   extractCandidates,
   importLines,
@@ -146,6 +147,44 @@ describe('extractCandidates', () => {
   })
 })
 
+describe('candidatesFor', () => {
+  // The bug this exists to prevent. JSX text is not a string literal, so an
+  // apostrophe in prose reads as an opening quote. A lone one is harmless -- it
+  // finds no partner and matches nothing -- but a SECOND apostrophe closes the
+  // fake string, and every className between the two is swallowed. Real prose
+  // has apostrophes in pairs constantly ("Founder's", "What's", "Can't"), so on
+  // a 1872-line page this silently dropped whole sections of the stylesheet and
+  // deployed a half-styled site with no error anywhere.
+  it('is not thrown off by apostrophes in JSX text', () => {
+    const code = `export default () => (
+      <div>
+        <p className="text-lg">Founder's Series</p>
+        <div className="mt-8 justify-end">between</div>
+        <p className="py-5">What's Included</p>
+      </div>
+    )`
+    // the raw-JSX trap: everything between the two apostrophes disappears
+    const raw = extractCandidates(code)
+    expect(raw).not.toContain('mt-8')
+    expect(raw).not.toContain('justify-end')
+
+    expect(candidatesFor(code)).toEqual(
+      expect.arrayContaining(['text-lg', 'mt-8', 'justify-end', 'py-5'])
+    )
+  })
+
+  it('still collects conditional and template classes', () => {
+    const code = `export default () => (
+      <div className={ok ? "bg-green-500" : "bg-red-500"}>
+        <p className={\`p-4 \${x} m-2\`}>Don't break</p>
+      </div>
+    )`
+    expect(candidatesFor(code)).toEqual(
+      expect.arrayContaining(['bg-green-500', 'bg-red-500', 'p-4', 'm-2'])
+    )
+  })
+})
+
 describe('splitHoisted', () => {
   it('moves leading title/meta out of the body', () => {
     const { head, body } = splitHoisted(
diff --git a/src/builder/entry.ts b/src/builder/entry.ts
index e906cb3..5685144 100644
--- a/src/builder/entry.ts
+++ b/src/builder/entry.ts
@@ -131,7 +131,14 @@ export async function entryFor(code: string): Promise<string> {
 const STRING_LITERALS =
   /"([^"\\]*(?:\\.[^"\\]*)*)"|'([^'\\]*(?:\\.[^'\\]*)*)'|`([^`\\]*(?:\\.[^`\\]*)*)`/g;
 
-/** Candidate class names to hand to Tailwind's `build()`. */
+/**
+ * Candidate class names to hand to Tailwind's `build()`.
+ *
+ * MUST be given transpiled JS, not raw JSX -- see candidatesFor. JSX text is not
+ * a string literal, so an apostrophe in prose ("Founder's Series") looks like an
+ * opening quote to this regex and desynchronises every quote pair after it,
+ * silently dropping the class names in the rest of the file.
+ */
 export function extractCandidates(code: string): string[] {
   const found = new Set<string>();
   for (const match of code.matchAll(STRING_LITERALS)) {
@@ -163,6 +170,19 @@ export function splitHoisted(markup: string): { head: string; body: string } {
   return { head, body };
 }
 
+/**
+ * The Tailwind candidates for a source file.
+ *
+ * Transpiles first, deliberately. After sucrase, JSX text is a properly quoted
+ * string literal and every className -- static, conditional, or template -- is a
+ * real string in the output, so the scan can no longer be thrown off by an
+ * apostrophe in prose. Scanning raw JSX dropped every class after the first
+ * `Founder's` in the file, which shipped a half-styled page with no error.
+ */
+export function candidatesFor(code: string): string[] {
+  return extractCandidates(transform(normalizeCode(code)));
+}
+
 export const escapeHtml = (value: string): string =>
   value.replace(
     /[&<>"']/g,
diff --git a/src/builder/standalone.ts b/src/builder/standalone.ts
index c9edf35..060ef7b 100644
--- a/src/builder/standalone.ts
+++ b/src/builder/standalone.ts
@@ -23,9 +23,9 @@ import {
 } from "../coreComponents/core/custom-transformer";
 import { generateElement } from "../coreComponents/core/utils";
 import { resolveScope } from "../scopes/lazyScope";
-import { entryFor, escapeHtml, extractCandidates, splitHoisted } from "./entry";
+import { candidatesFor, entryFor, escapeHtml, splitHoisted } from "./entry";
 
-export { entryFor, extractCandidates, importLines } from "./entry";
+export { candidatesFor, entryFor, extractCandidates, importLines } from "./entry";
 
 /** Where esbuild and require.resolve look for bare specifiers. See bundleEntry. */
 const BUILDER_DIR = fileURLToPath(new URL(".", import.meta.url));
@@ -174,7 +174,7 @@ async function compileCss(
   if (tailwind && code.includes("className")) {
     const { compile } = await loadTailwind();
     const compiler = await compile('@import "tailwindcss";', { loadStylesheet });
-    out = compiler.build(extractCandidates(code));
+    out = compiler.build(candidatesFor(code));
   }
 
   out += css;
@@ -213,6 +213,9 @@ async function prerenderMarkup(code: string): Promise<string> {
   }
 }
 
+/** Below this, CSS is inlined into the HTML instead of fetched. See buildStandaloneSite. */
+const INLINE_CSS_LIMIT = 14 * 1024;
+
 const hash = (content: string): string =>
   createHash("sha256").update(content).digest("hex").slice(0, 8);
 
@@ -248,11 +251,21 @@ export async function buildStandaloneSite(
   const jsPath = `assets/app-${hash(js)}.js`;
   files[jsPath] = js;
 
-  let cssLink = "";
+  // CSS is render-blocking: the browser will not paint until it has it. An
+  // external file therefore costs a whole round trip before first paint, which
+  // for a page this size is the single largest slice of FCP. Under ~14 KB it
+  // goes inline instead and arrives in the same response as the HTML -- 14 KB
+  // being roughly the first TCP congestion window, so it is free in practice.
+  // Larger than that, a separate cacheable file is the better trade.
+  let cssTag = "";
   if (css) {
-    const cssPath = `assets/style-${hash(css)}.css`;
-    files[cssPath] = css;
-    cssLink = `<link rel="stylesheet" href="${cssPath}">`;
+    if (Buffer.byteLength(css) <= INLINE_CSS_LIMIT) {
+      cssTag = `<style>${css}</style>`;
+    } else {
+      const cssPath = `assets/style-${hash(css)}.css`;
+      files[cssPath] = css;
+      cssTag = `<link rel="stylesheet" href="${cssPath}">`;
+    }
   }
 
   // The code's own <title> wins; `title` is the fallback for code that emits none.
@@ -268,11 +281,11 @@ export async function buildStandaloneSite(
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-${titleTag}${hoisted}${cssLink}${head}
+${titleTag}${hoisted}${cssTag}${head}
+<script defer src="${jsPath}"></script>
 </head>
 <body>
 <div id="root">${body}</div>
-<script src="${jsPath}"></script>
 </body>
 </html>
 `;
diff --git a/t.jsx b/t.jsx
new file mode 100644
index 0000000..4ded6ac
--- /dev/null
+++ b/t.jsx
@@ -0,0 +1,1873 @@
+/* ============================================================
+   MODULE-SCOPE CONSTANTS, HELPERS & ANALYTICS
+   ============================================================ */
+
+// Declare in module scope & attach to window to prevent ReferenceError across all execution contexts
+const trackAnalyticsEvent = (eventName, action, data = {}, silent = false) => {
+  try {
+    if (typeof window !== "undefined") {
+      if (typeof window.gtag === "function") {
+        window.gtag("event", action || eventName, data);
+      } else if (typeof window.fbq === "function") {
+        window.fbq("track", eventName, data);
+      } else if (Array.isArray(window.dataLayer)) {
+        window.dataLayer.push({ event: eventName, action, ...data });
+      }
+    }
+  } catch (e) {
+    // Fail silently in development or sandbox environments
+  }
+};
+
+if (typeof window !== "undefined") {
+  window.trackAnalyticsEvent = trackAnalyticsEvent;
+}
+
+const YEAR = new Date().getFullYear();
+
+const cld = (url, w = 800) => {
+  if (!url || typeof url !== "string") return url;
+  if (!url.includes("/image/upload/")) return url;
+  return url.replace("/image/upload/", `/image/upload/f_auto,q_auto,w_${w}/`);
+};
+
+// BRANDING & ASSET URLS
+const LOGO_ICON_URL = "https://imagedelivery.net/O-X2p33aPnIKIdnqc35LFA/e7060ec5-dfe9-47aa-3b9d-1afe5ff14500/public";
+const HERO_BACKGROUND_ICON_URL = "https://imagedelivery.net/O-X2p33aPnIKIdnqc35LFA/6925fb42-97ee-4e23-6b7e-aub77fa55800/public";
+const TEAM_PHOTO_URL = "https://imagedelivery.net/O-X2p33aPnIKIdnqc35LFA/f6af7456-3e61-4a44-c279-7bfa47cad400/public";
+const NEW_STRAVA_LOGO = "https://imagedelivery.net/O-X2p33aPnIKIdnqc35LFA/3f62b5a5-6bf0-4c41-f462-5b90f10aa100/public";
+
+// GLOBAL LIGHT APPLE-STYLE CSS
+const GLOBAL_CSS = `
+  :root {
+    --safe-top: env(safe-area-inset-top, 0px);
+    --safe-bottom: env(safe-area-inset-bottom, 0px);
+  }
+
+  html {
+    scroll-behavior: smooth;
+  }
+
+  body {
+    -webkit-tap-highlight-color: transparent;
+    background-color: #F5F5F7;
+    color: #1D1D1F;
+    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Inter", sans-serif;
+  }
+
+  section {
+    scroll-margin-top: 80px;
+  }
+
+  .font-mono { font-family: 'JetBrains Mono', monospace; }
+  .font-manrope { font-family: 'Manrope', sans-serif; }
+  
+  .hide-scrollbar::-webkit-scrollbar { display: none; }
+  .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
+
+  .apple-card {
+    background: #FFFFFF;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
+    border-radius: 24px;
+  }
+
+  .apple-glass {
+    background: rgba(255, 255, 255, 0.88);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+  }
+
+  .hero-mesh-bg {
+    background-image: 
+      radial-gradient(circle at 50% 20%, rgba(0, 113, 227, 0.08) 0%, transparent 60%),
+      radial-gradient(circle at 80% 80%, rgba(0, 113, 227, 0.04) 0%, transparent 50%),
+      radial-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 0);
+    background-size: 100% 100%, 100% 100%, 24px 24px;
+  }
+`;
+const GLOBAL_CSS_HTML = { __html: GLOBAL_CSS };
+
+// ECOSYSTEM PARTNER LOGOS
+const PARTNER_LOGOS = [
+  { name: "Strava", logo: "https://imagedelivery.net/O-X2p33aPnIKIdnqc35LFA/3f62b5a5-6bf0-4c41-f462-5b90f10aa100/public" },
+  { name: "Garmin", logo: "https://imagedelivery.net/O-X2p33aPnIKIdnqc35LFA/2d62241d-5772-45b6-1d8b-e8d7824b9700/public" },
+  { name: "Wahoo", logo: "https://imagedelivery.net/O-X2p33aPnIKIdnqc35LFA/5a377286-2b4f-44f4-7a5a-7d68d83acb00/public" },
+  { name: "Intervals.icu", logo: "https://imagedelivery.net/O-X2p33aPnIKIdnqc35LFA/1a3df848-0e2e-4ee8-f085-2af1a3de3f00/public" },
+  { name: "TrainingPeaks", logo: "https://imagedelivery.net/O-X2p33aPnIKIdnqc35LFA/62493290-aa25-4b4e-ebf2-85ecee52d700/public" },
+  { name: "Join.cc", logo: "https://imagedelivery.net/O-X2p33aPnIKIdnqc35LFA/e2956a2c-bf20-4737-fd1b-4b74a225ee00/public" },
+  { name: "Zwift", logo: "https://imagedelivery.net/O-X2p33aPnIKIdnqc35LFA/6a708b40-5084-4fa7-cdaf-6a9ace4de300/public" },
+  { name: "TrainerRoad", logo: "https://imagedelivery.net/O-X2p33aPnIKIdnqc35LFA/3b457199-567a-4823-ab70-598116f24600/public" }
+];
+
+const APPAREL_SLIDES = [
+  { title: "Domestique.live Cycling Jersey", img: cld("https://res.cloudinary.com/ddbxywpjr/image/upload/v1782984468/tshirt_salpoy.png", 600) },
+  { title: "Domestique.live Cycling Short", img: cld("https://res.cloudinary.com/ddbxywpjr/image/upload/v1782984468/shorts_bygnkw.png", 600) },
+  { title: "Domestique.live Leg Sleeves", img: cld("https://res.cloudinary.com/ddbxywpjr/image/upload/v1782984468/leg_sleves_zizrer.png", 600) },
+  { title: "Domestique.live Ride Gloves", img: cld("https://res.cloudinary.com/ddbxywpjr/image/upload/v1782984467/gloves_jcexrx.png", 600) },
+  { title: "Domestique.live Cap", img: cld("https://res.cloudinary.com/ddbxywpjr/image/upload/v1782984467/cap_tu2hvd.png", 600) },
+];
+
+const FEATURES = [
+  { 
+    id: "01", 
+    title: "Adaptive Push", 
+    video: "https://res.cloudinary.com/ddbxywpjr/video/upload/v1781515380/PERFORMANCE_RIDE_hiplyg.mp4", 
+    quote: "Heart rate rising but power is dropping. Maintain effort.",
+    whyItMatters: "Post-ride analysis only tells you that you faded. Real-time audio catches fatigue mid-interval, giving you the micro-adjustment needed to finish the set cleanly."
+  },
+  { 
+    id: "02", 
+    title: "Pacing & Group Rides", 
+    video: "https://res.cloudinary.com/ddbxywpjr/video/upload/v1781515364/GROUP_RIDE_1_yxjgtb.mp4", 
+    quote: "Pacing optimal for this break. Hold current output.",
+    whyItMatters: "Stop getting baited into burning matches early on group rides. Your digital coach calculates your threshold headroom live so you stay fresh for the final sprint."
+  },
+  { 
+    id: "03", 
+    title: "Live Course Routing", 
+    video: "https://res.cloudinary.com/ddbxywpjr/video/upload/v1781515350/SIGHTSEEING_1_wskvbo.mp4", 
+    quote: "Climb starting in 200 meters. Shift gears and settle into Zone 3.",
+    whyItMatters: "Eliminates surprise gradient shifts. You hear gear and cadence cues ahead of terrain changes so you hit climbs with optimal momentum."
+  },
+  { 
+    id: "04", 
+    title: "Threshold Protection", 
+    video: "https://res.cloudinary.com/ddbxywpjr/video/upload/v1781515388/COMMUTE_RIDE_1_dys5hm.mp4", 
+    quote: "Over-pacing detected on early slope. Ease off 15 watts to save legs.",
+    whyItMatters: "Preventing a blowout beat-by-beat is 10x more valuable than reading a red graph on Strava 2 hours later."
+  },
+  { 
+    id: "05", 
+    title: "Active Recovery", 
+    video: "https://res.cloudinary.com/ddbxywpjr/video/upload/v1781515384/coffee_ride_la0byt.mp4", 
+    poster: "https://res.cloudinary.com/ddbxywpjr/video/upload/v1781515384/coffee_ride_la0byt.jpg", 
+    quote: "Great interval block. Drop to Zone 2 and recover for 3 minutes.",
+    whyItMatters: "Optimizes rest periods between efforts so you clear lactate efficiently and hit the next rep at maximum target wattage."
+  },
+  { 
+    id: "06", 
+    title: "Zone Control", 
+    video: "https://res.cloudinary.com/ddbxywpjr/video/upload/v1782300028/full_video_1_wjqxd6.mp4", 
+    quote: "You are drifting into Zone 4 prematurely. Dial back cadence.",
+    whyItMatters: "Ensures Zone 2 rides actually stay in Zone 2. Protects your physiological adaptations from accidental over-exertion."
+  }
+];
+
+const PRODUCT_IMAGES = [
+  "https://res.cloudinary.com/ddbxywpjr/image/upload/v1779102005/Home_Pgae_img_nt6cwl.png",
+  "https://res.cloudinary.com/ddbxywpjr/image/upload/v1779102372/card-2_whrzwh.png",
+  "https://res.cloudinary.com/ddbxywpjr/image/upload/v1779102373/card-3_lnse1m.png",
+  "https://res.cloudinary.com/ddbxywpjr/image/upload/v1779102372/card-4_n2g3e3.png"
+];
+
+const HERO_SLOGANS = [
+  "LOOK AT THE ROAD. LISTEN TO THE COACH.",
+  "STOP WAITING FOR POST-RIDE ANALYTICS.",
+  "MID-RIDE GUIDANCE, NOT POST-MORTEMS.",
+  "YOUR DIGITAL DOMESTIQUE IN YOUR EAR.",
+  "MAKE THE MOST OF EVERY TRAINING RIDE."
+];
+
+const FLOW_STEPS = [
+  { step: "01", icon: Compass, title: "Pre-Ride Target Sync", desc: "Open Domestique.live. It imports your planned workout or route, creating target zone parameters before you clip in." },
+  { step: "02", icon: Gauge, title: "Live Sensor Feed", desc: "Your Bluetooth power meter, heart rate monitor, and cadence sensors stream telemetry directly into our edge engine." },
+  { step: "03", icon: Volume2, title: "Open-Ear Bone Conduction", desc: "Lightweight audio sits cleanly on your cheekbones. You hear ambient traffic, your friends, and crisp voice coaching." },
+  { step: "04", icon: Cpu, title: "Real-Time Adaptations", desc: "Our engine continuously compares live output against target wattage, adjusting coaching based on real-time fatigue." },
+  { step: "05", icon: Zap, title: "In-Ride Execution", desc: "Immediate audio cues tell you when to push, when to recover, and how to complete intervals at maximum quality." }
+];
+
+const SETUP_ITEMS = ["Domestique Hardware Unit", "12-Month Intelligence License", "Magnetic Rapid-Charge Cable", "Ecosystem Integration Guide"];
+
+const TABLE_ECOSYSTEM_DATA = [
+  {
+    tool: "Garmin & Wahoo",
+    category: "GPS Bike Computers",
+    icon: Smartphone,
+    legacyApproach: "Shows numbers on glass screens that require you to constantly glance down at speed.",
+    domestiqueApproach: "Reads Bluetooth streams live and delivers voice coaching without taking eyes off the road."
+  },
+  {
+    tool: "Strava & Intervals.icu",
+    category: "Post-Ride Analytics",
+    icon: Activity,
+    legacyApproach: "Provides post-mortem graphs telling you why you blew up 2 hours after your ride finishes.",
+    domestiqueApproach: "Intervenes mid-effort before you hit the wall, calculating live threshold headroom."
+  },
+  {
+    tool: "TrainingPeaks & Join.cc",
+    category: "Training Calendars",
+    icon: Award,
+    legacyApproach: "Creates structured calendar workouts, but leaves real-world pacing execution up to memory.",
+    domestiqueApproach: "Executes your workout step-by-step on open roads with precise voice-guided interval timing."
+  },
+  {
+    tool: "Zwift & TrainerRoad",
+    category: "Indoor ERG Simulators",
+    icon: Repeat,
+    legacyApproach: "Offers strict indoor ERG-mode control, but provides zero active pacing guidance outdoors.",
+    domestiqueApproach: "Brings structured, adaptive workout execution directly onto dynamic real-world outdoor terrain."
+  }
+];
+
+const RESEARCH_PAPERS = [
+  {
+    title: "The Cognitive, Physiological, and Technological Efficacy of AI-Driven Auditory Coaching in Cycling",
+    url: "https://www.alphanome.ai/post/the-cognitive-physiological-and-technological-efficacy-of-ai-driven-auditory-coaching-in-cycling",
+    tag: "Cognitive Load & Auditory Science",
+    summary: "Examines how voice-based audio instruction significantly reduces cognitive friction and visual distraction compared to handlebar screens, lowering perceived exertion (RPE) during high-threshold intervals."
+  },
+  {
+    title: "The Temporal Dynamics of AI in Endurance Cycling: A Comparative Analysis of Real-Time Auditory Coaching",
+    url: "https://www.alphanome.ai/post/the-temporal-dynamics-of-ai-in-endurance-cycling-a-comparative-analysis-of-real-time-auditory-coach",
+    tag: "Physiological Pacing & W' Bal",
+    summary: "Analyzes the math and physiological benefits of sub-second mid-ride feedback over post-ride data analysis, detailing how real-time W' balance calculations prevent premature anaerobic exhaustion."
+  },
+  {
+    title: "How Wearable ADAS for Cyclists (Advanced Driver Assistance Systems) Prevents Fatalities",
+    url: "https://www.alphanome.ai/post/how-wearable-adas-for-cyclist-advanced-driver-assistance-systems-prevent-vulnerable-road-user-fata",
+    tag: "Acoustic Safety & Open-Ear Hardware",
+    summary: "Explores open-ear acoustic transparency, directional micro-audio cues, and the safety engineering behind keeping the ear canal completely unobstructed while training in dynamic traffic environments."
+  }
+];
+
+const PREORDER_FAQS = [
+  { q: "Will the audio interrupt me constantly during a ride?", a: "Silence is a primary feature. Domestique.live is not a radio DJ; it acts as an experienced digital domestique. It only speaks when a biometric threshold is crossed or an interval target demands adjustment. Otherwise, it leaves you in total peace." },
+  { q: "Why use this instead of a traditional bike computer?", a: "A bike computer requires constant visual glances. Domestique.live works alongside your Garmin or Wahoo to deliver live audio interpretation so you never take your eyes off the road." },
+  { q: "What sensors does the Domestique app support?", a: "It connects directly via Bluetooth to standard power meters, heart rate monitors, and cadence sensors parallel to your existing head unit." },
+  { q: "How is bone-conduction audio better than standard earbuds?", a: "Traditional earbuds trap wind noise and seal off your ears. Open-ear bone conduction transmits acoustic vibrations through your cheekbones, keeping your ear canal 100% open for ambient awareness." },
+  { q: "What happens if I lose cellular service on a remote climb?", a: "The system runs localized edge calculations. Your strategy and route parameters are cached pre-ride, ensuring full live coaching even without cellular signal." },
+  { q: "Will this interfere with my Spotify music or podcasts?", a: "No. Domestique.live utilizes intelligent 'audio ducking'. When the coach speaks, music volume drops smoothly and returns to normal immediately afterward." },
+  { q: "What occurs after the included 12-month license expires?", a: "The live intelligence platform transitions to a standard €15/month subscription. You retain full ownership of your hardware unit." },
+  { q: "How does this differ from Strava or TrainingPeaks?", a: "Strava and TrainingPeaks analyze past workouts. Domestique.live works live during the effort, guiding your output in real time." }
+];
+
+const PRIMARY_PERKS = [
+  {
+    tier: "TIER 1", tag: "PRIORITY ACCESS", name: "THE DOMESTIQUE", price: "€290",
+    featured: false, delivery: "Q1 2027 - First Batch", stripeBuyButtonId: "buy_btn_1Tp94sIVuCvdmBxBbTNIwUQf",
+    includes: ["Domestique.live Hardware Unit", "12-Month Intelligence License", "Closed Beta App Access", "Domestique.live Performance T-Shirt"]
+  },
+  {
+    tier: "TIER 2", tag: "COMPLETE SYSTEM", name: "THE PUNCHEUR", price: "€390",
+    featured: true, delivery: "Q1 2027 - First Batch", stripeBuyButtonId: "buy_btn_1TjmdCIVuCvdmBxBOxo03kE8",
+    includes: ["Everything in The Domestique plus:", "Domestique.live Cycling Jersey", "Domestique.live Cycling Short", "Domestique.live Leg Sleeves"]
+  },
+  {
+    tier: "TIER 3", tag: "LIFETIME VIP", name: "THE DIRECTEUR SPORTIF", price: "€520",
+    featured: false, delivery: "Q1 2027 - First Batch", stripeBuyButtonId: "buy_btn_1TjmkEIVuCvdmBxBiLAtFvU6",
+    includes: ["Everything in The Puncheur plus:", "Domestique.live Ride Gloves", "Domestique.live Cap", "24-Month Extended License", "Lifetime 30% Vanguard Discount"]
+  }
+];
+
+const BATCH_2_PERK = {
+  tier: "BATCH 2 RESERVATION", tag: "SECOND DELIVERY RUN", name: "RESERVE BATCH 2 SPOT", price: "€10",
+  delivery: "Q2 2027 - Second Batch", stripeBuyButtonId: "buy_btn_1TyImOIVuCvdmBxB9SdcXtOw",
+  includes: [
+    "Priority Spot in Q2 2027 Delivery Batch",
+    "Locks in Early Founder Discount Price",
+    "Fully Refundable Deposit Option",
+    "€10 Deposit Credited Toward Final Order"
+  ]
+};
+
+const PERKS_WITH_APPAREL = PRIMARY_PERKS.map((perk) => ({
+  ...perk,
+  apparel: perk.includes
+    .map((title) => {
+      const index = APPAREL_SLIDES.findIndex((s) => s.title === title);
+      return index >= 0 ? { ...APPAREL_SLIDES[index], index } : null;
+    })
+    .filter(Boolean)
+}));
+
+const MAILERLITE_SUBSCRIBE_URL = "https://assets.mailerlite.com/jsonp/2507589/forms/192902572178146649/subscribe";
+
+const TikTokIcon = ({ className }) => (
+  <svg className={className} viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/>
+  </svg>
+);
+
+const TwitterXIcon = ({ className }) => (
+  <svg className={className} viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
+  </svg>
+);
+
+/* Helper Component: Order Card Trust Bar */
+const CardTrustBadges = React.memo(function CardTrustBadges() {
+  return (
+    <div className="mt-4 pt-3 border-t border-black/5 space-y-2">
+      <div className="flex items-center justify-between text-[11px] text-[#515154] font-medium">
+        <span className="flex items-center gap-1">
+          <Globe className="w-3.5 h-3.5 text-[#0071E3]" /> Free Express Shipping
+        </span>
+        <span className="flex items-center gap-1">
+          <RotateCcw className="w-3.5 h-3.5 text-[#0071E3]" /> 100% Guaranteed
+        </span>
+      </div>
+      <div className="flex items-center justify-center gap-2 pt-1 text-[10px] text-[#86868B]">
+        <Lock className="w-3 h-3 text-[#0071E3]" />
+        <span>256-Bit Encrypted Stripe Checkout</span>
+      </div>
+    </div>
+  );
+});
+
+/* Helper Component: Large D Logo Background Watermark */
+const BackgroundLogoWatermark = React.memo(function BackgroundLogoWatermark() {
+  return (
+    <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none opacity-[0.07] z-0 overflow-hidden">
+      <img src={LOGO_ICON_URL} alt="" className="w-[500px] sm:w-[650px] h-[500px] sm:h-[650px] object-contain" />
+    </div>
+  );
+});
+
+/* Helper function for strictly ref-based smooth scrolling */
+const scrollToRef = (ref) => {
+  if (ref && ref.current) {
+    ref.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  }
+};
+
+/* ============================================================
+   NAVIGATION
+   ============================================================ */
+const SiteNavigation = React.memo(function SiteNavigation({ isMobileMenuOpen, setIsMobileMenuOpen, sectionRefs }) {
+  return (
+    <nav className="fixed top-0 left-0 w-full z-[100] apple-glass border-b border-black/5" style={{ paddingTop: 'var(--safe-top)' }}>
+      <div className="max-w-6xl mx-auto h-16 px-4 md:px-8 flex items-center justify-between">
+        <button 
+          id="nav-logo-btn"
+          type="button"
+          className="cursor-pointer flex items-center gap-2.5 group touch-manipulation border-none bg-transparent p-0 text-left" 
+          onClick={() => scrollToRef(sectionRefs.hero)}
+        >
+          <img src={LOGO_ICON_URL} alt="Domestique.live Icon" className="h-8 w-8 object-contain group-hover:scale-105 transition-transform" />
+          <span className="font-semibold tracking-tight text-lg text-[#1D1D1F] font-manrope">Domestique<span className="text-[#0071E3]">.live</span></span>
+        </button>
+
+        <div className="hidden md:flex items-center gap-8 text-sm font-medium text-[#515154]">
+          <button id="nav-btn-coach" type="button" onClick={() => scrollToRef(sectionRefs.coach)} className="hover:text-[#0071E3] transition-colors">Real-Time Coach</button>
+          <button id="nav-btn-flow" type="button" onClick={() => scrollToRef(sectionRefs.flow)} className="hover:text-[#0071E3] transition-colors">How It Works</button>
+          <button id="nav-btn-ecosystem" type="button" onClick={() => scrollToRef(sectionRefs.ecosystem)} className="hover:text-[#0071E3] transition-colors">Ecosystem</button>
+          <button id="nav-btn-hardware" type="button" onClick={() => scrollToRef(sectionRefs.hardware)} className="hover:text-[#0071E3] transition-colors">Hardware</button>
+          <button id="nav-btn-team" type="button" onClick={() => scrollToRef(sectionRefs.team)} className="hover:text-[#0071E3] transition-colors">Our Story</button>
+          <button id="nav-btn-faq" type="button" onClick={() => scrollToRef(sectionRefs.faq)} className="hover:text-[#0071E3] transition-colors">FAQ</button>
+          <button id="nav-btn-community" type="button" onClick={() => scrollToRef(sectionRefs.instagram)} className="hover:text-[#0071E3] transition-colors">Community</button>
+          <button 
+            id="nav-btn-preorder"
+            type="button"
+            onClick={() => {
+              trackAnalyticsEvent('InitiateCheckout', 'begin_checkout', { content_name: 'Nav Pre-Order Button' });
+              scrollToRef(sectionRefs.pricing);
+            }} 
+            className="bg-[#0071E3] text-white hover:bg-[#0077ED] px-5 py-2 rounded-full font-medium transition-all shadow-sm hover:shadow"
+          >
+            Pre-Order Now
+          </button>
+        </div>
+
+        <button id="nav-toggle-mobile" type="button" className="md:hidden p-2 text-[#1D1D1F] touch-manipulation" onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}>
+          {isMobileMenuOpen ? <X className="w-6 h-6"/> : <Menu className="w-6 h-6"/>}
+        </button>
+      </div>
+
+      {isMobileMenuOpen && (
+        <div className="md:hidden apple-glass border-b border-black/10 px-6 py-6 flex flex-col gap-4 font-medium text-lg text-[#1D1D1F] animate-in slide-in-from-top-2">
+          <button id="mobile-nav-coach" type="button" onClick={() => { setIsMobileMenuOpen(false); scrollToRef(sectionRefs.coach); }} className="text-left py-2 border-b border-black/5 touch-manipulation">Real-Time Coach</button>
+          <button id="mobile-nav-flow" type="button" onClick={() => { setIsMobileMenuOpen(false); scrollToRef(sectionRefs.flow); }} className="text-left py-2 border-b border-black/5 touch-manipulation">How It Works</button>
+          <button id="mobile-nav-ecosystem" type="button" onClick={() => { setIsMobileMenuOpen(false); scrollToRef(sectionRefs.ecosystem); }} className="text-left py-2 border-b border-black/5 touch-manipulation">Ecosystem Comparison</button>
+          <button id="mobile-nav-hardware" type="button" onClick={() => { setIsMobileMenuOpen(false); scrollToRef(sectionRefs.hardware); }} className="text-left py-2 border-b border-black/5 touch-manipulation">Hardware</button>
+          <button id="mobile-nav-team" type="button" onClick={() => { setIsMobileMenuOpen(false); scrollToRef(sectionRefs.team); }} className="text-left py-2 border-b border-black/5 touch-manipulation">Our Story & Team</button>
+          <button id="mobile-nav-faq" type="button" onClick={() => { setIsMobileMenuOpen(false); scrollToRef(sectionRefs.faq); }} className="text-left py-2 border-b border-black/5 touch-manipulation">FAQ & Questions</button>
+          <button id="mobile-nav-community" type="button" onClick={() => { setIsMobileMenuOpen(false); scrollToRef(sectionRefs.instagram); }} className="text-left py-2 border-b border-black/5 touch-manipulation">Community & Reels</button>
+          <button 
+            id="mobile-nav-preorder"
+            type="button"
+            onClick={() => {
+              setIsMobileMenuOpen(false);
+              trackAnalyticsEvent('InitiateCheckout', 'begin_checkout', { content_name: 'Mobile Nav Pre-Order Button' });
+              scrollToRef(sectionRefs.pricing);
+            }} 
+            className="bg-[#0071E3] text-white text-center py-3 rounded-xl font-semibold mt-2 touch-manipulation"
+          >
+            Pre-Order Now
+          </button>
+        </div>
+      )}
+    </nav>
+  );
+});
+
+/* ============================================================
+   MAIN SINGLE-PAGE COMPONENT
+   ============================================================ */
+export default function DomestiqueWebsite() {
+  const topRef = useRef(null);
+  
+  /* STRICT SECTION REFS FOR ALL SCROLLING */
+  const heroRef = useRef(null);
+  const coachRef = useRef(null);
+  const flowRef = useRef(null);
+  const ecosystemRef = useRef(null);
+  const hardwareRef = useRef(null);
+  const pricingRef = useRef(null);
+  const teamRef = useRef(null);
+  const faqRef = useRef(null);
+  const instagramRef = useRef(null);
+
+  const sectionRefs = {
+    hero: heroRef,
+    coach: coachRef,
+    flow: flowRef,
+    ecosystem: ecosystemRef,
+    hardware: hardwareRef,
+    pricing: pricingRef,
+    team: teamRef,
+    faq: faqRef,
+    instagram: instagramRef
+  };
+
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [selectedImage, setSelectedImage] = useState(null);
+  const [apparelSliderOpen, setApparelSliderOpen] = useState(false);
+  const [apparelSliderIndex, setApparelSliderIndex] = useState(0);
+
+  // POLICY MODAL STATES ('return' | 'shipping' | 'privacy' | null)
+  const [activePolicy, setActivePolicy] = useState(null);
+
+  const [showDiscountPopup, setShowDiscountPopup] = useState(false);
+  const [discountCopied, setDiscountCopied] = useState(false);
+  const [openFaq, setOpenFaq] = useState(0);
+  const [newsletterStatus, setNewsletterStatus] = useState('idle');
+  const [newsletterError, setNewsletterError] = useState('');
+  const [sloganIndex, setSloganIndex] = useState(0);
+
+  // TECHNICAL ARCHITECTURE & SCIENCE MODAL STATES
+  const [showArchitectureModal, setShowArchitectureModal] = useState(false);
+  const [showScienceModal, setShowScienceModal] = useState(false);
+
+  const [questionSent, setQuestionSent] = useState(false);
+  const [userQuestion, setUserQuestion] = useState({ name: '', email: '', message: '' });
+
+  const featuresScrollRef = useRef(null);
+  const productsScrollRef = useRef(null);
+
+  useEffect(() => {
+    if (!document.getElementById('stripe-buy-button-script')) {
+      const script = document.createElement('script');
+      script.id = 'stripe-buy-button-script';
+      script.src = 'https://js.stripe.com/v3/buy-button.js';
+      script.async = true;
+      document.body.appendChild(script);
+    }
+  }, []);
+
+  useEffect(() => {
+    const sloganTimer = setInterval(() => {
+      setSloganIndex((prev) => (prev + 1) % HERO_SLOGANS.length);
+    }, 3500);
+    return () => clearInterval(sloganTimer);
+  }, []);
+
+  useEffect(() => {
+    trackAnalyticsEvent('PageView', 'page_view');
+  }, []);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setShowDiscountPopup(true), 30000);
+    return () => clearInterval(timer);
+  }, []);
+
+  /* RELIABLE CROSS-PLATFORM CAROUSEL SCROLL MECHANISM */
+  const scrollCarousel = (ref, direction) => {
+    if (ref.current) {
+      const scrollAmount = window.innerWidth < 768 ? Math.round(window.innerWidth * 0.8) : 400;
+      const delta = direction === 'left' ? -scrollAmount : scrollAmount;
+      ref.current.scrollBy({ left: delta, behavior: 'smooth' });
+    }
+  };
+
+  const handleNewsletterSubmit = async (event) => {
+    event.preventDefault();
+    if (newsletterStatus === 'loading') return;
+
+    const form = event.currentTarget;
+    const formData = new FormData(form);
+    const params = new URLSearchParams();
+    formData.forEach((value, key) => params.append(key, String(value)));
+    params.set('ajax', '1');
+
+    setNewsletterStatus('loading');
+    setNewsletterError('');
+
+    try {
+      const response = await fetch(`${MAILERLITE_SUBSCRIBE_URL}?${params.toString()}`, {
+        method: 'GET',
+        headers: { Accept: 'application/json' }
+      });
+      if (!response.ok) throw new Error('Could not subscribe. Please try again.');
+
+      const result = await response.json();
+      if (!result.success) {
+        const emailErrors = result.errors?.fields?.email;
+        throw new Error(Array.isArray(emailErrors) && emailErrors[0] ? emailErrors[0] : 'Could not subscribe.');
+      }
+
+      form.reset();
+      setNewsletterStatus('success');
+      trackAnalyticsEvent('Lead', 'generate_lead', { content_name: 'Newsletter Subscription' });
+    } catch (error) {
+      setNewsletterError(error instanceof Error ? error.message : 'Could not subscribe.');
+      setNewsletterStatus('error');
+    }
+  };
+
+  const handleQuestionSubmit = (e) => {
+    e.preventDefault();
+    setQuestionSent(true);
+    trackAnalyticsEvent('Contact', 'submit_question', { email: userQuestion.email });
+    setTimeout(() => {
+      setQuestionSent(false);
+      setUserQuestion({ name: '', email: '', message: '' });
+    }, 4000);
+  };
+
+  const handleCopyDiscount = () => {
+    if (typeof navigator !== 'undefined' && navigator.clipboard) {
+      navigator.clipboard.writeText("25OFF");
+    }
+    setDiscountCopied(true);
+    trackAnalyticsEvent('Lead', 'generate_lead', { content_name: 'Discount Copied' });
+    setTimeout(() => setDiscountCopied(false), 2000);
+  };
+
+  return (
+    <HelmetProvider>
+      <div ref={topRef} className="bg-[#F5F5F7] text-[#1D1D1F] min-h-screen selection:bg-[#0071E3] selection:text-white">
+        <Helmet>
+          <title>Domestique.live - Real-Time AI Cycling Coach</title>
+          <meta name="description" content="Domestique.live delivers live audio coaching and open-ear bone conduction performance guidance while you ride." />
+          <link rel="preconnect" href="https://fonts.googleapis.com" />
+          <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+          <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap" />
+        </Helmet>
+        
+        <style dangerouslySetInnerHTML={GLOBAL_CSS_HTML} />
+
+        <SiteNavigation isMobileMenuOpen={isMobileMenuOpen} setIsMobileMenuOpen={setIsMobileMenuOpen} sectionRefs={sectionRefs} />
+
+        {/* HERO SECTION WITH NEW HEADER BACKGROUND IMAGE */}
+        <section ref={heroRef} id="hero" className="hero-mesh-bg relative pt-32 pb-16 md:pt-40 md:pb-24 px-4 sm:px-6 max-w-6xl mx-auto text-center overflow-hidden border-b border-black/5">
+          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none opacity-[0.08] z-0 overflow-hidden">
+            <img src={HERO_BACKGROUND_ICON_URL} alt="" loading="lazy" decoding="async" className="w-[500px] sm:w-[650px] h-[500px] sm:h-[650px] object-contain" />
+          </div>
+
+          <div className="relative z-10">
+            <div className="inline-flex items-center gap-2 bg-white/80 backdrop-blur-md border border-black/10 px-4 py-1.5 rounded-full text-xs font-semibold text-[#0071E3] shadow-sm mb-6">
+              <Radio className="w-3.5 h-3.5 animate-pulse text-[#0071E3]" /> Q1 2027 Founder's Series Open
+            </div>
+
+            <div className="relative h-20 sm:h-28 md:h-32 mb-4 flex items-center justify-center max-w-4xl mx-auto">
+              {HERO_SLOGANS.map((slogan, i) => (
+                <h1
+                  key={slogan}
+                  className={`absolute inset-0 flex items-center justify-center font-extrabold text-3xl sm:text-5xl md:text-6xl tracking-tight text-[#1D1D1F] transition-all duration-700 ease-in-out ${
+                    i === sloganIndex ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4 pointer-events-none'
+                  }`}
+                >
+                  {slogan}
+                </h1>
+              ))}
+            </div>
+
+            <p className="text-lg sm:text-xl md:text-2xl text-[#86868B] max-w-3xl mx-auto leading-relaxed mb-10 font-normal">
+              Post-ride charts show where you failed. <strong className="text-[#1D1D1F] font-semibold">Domestique.live</strong> guides you in real-time. Our open-ear bone conduction headset and AI Digital Domestique deliver voice pacing, interval timing, and recovery cues <span className="underline decoration-[#0071E3] underline-offset-4 font-semibold text-[#1D1D1F]">while you are still pedaling</span>.
+            </p>
+
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-4 max-w-md mx-auto mb-12">
+              <button
+                id="hero-cta-preorder"
+                type="button"
+                onClick={() => {
+                  trackAnalyticsEvent('InitiateCheckout', 'begin_checkout', { content_name: 'Hero Primary CTA' });
+                  scrollToRef(pricingRef);
+                }}
+                className="w-full sm:w-auto bg-[#0071E3] text-white hover:bg-[#0077ED] font-semibold text-base px-8 py-4 rounded-full transition-all shadow-md hover:shadow-lg flex items-center justify-center gap-2 touch-manipulation"
+              >
+                Pre-Order Your Advantage <ArrowRight className="w-4 h-4" />
+              </button>
+              <button
+                id="hero-cta-how-it-works"
+                type="button"
+                onClick={() => scrollToRef(coachRef)}
+                className="w-full sm:w-auto bg-white border border-black/10 hover:border-black/20 text-[#1D1D1F] font-semibold text-base px-8 py-4 rounded-full transition-all touch-manipulation"
+              >
+                How It Works
+              </button>
+            </div>
+
+            {/* HIGH-VISIBILITY CORE PILLARS BANNER */}
+            <div className="max-w-4xl mx-auto apple-card p-6 md:p-8 bg-gradient-to-br from-white via-white to-[#F5F5F7] border-2 border-[#0071E3]/20 shadow-md">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div className="flex flex-col items-center text-center p-4 rounded-2xl bg-[#F5F5F7]/80 border border-black/5 hover:border-[#0071E3]/30 transition-all">
+                  <div className="p-3 bg-[#0071E3] text-white rounded-2xl mb-3 shadow-sm">
+                    <Volume2 className="w-6 h-6" />
+                  </div>
+                  <h3 className="font-extrabold text-base text-[#1D1D1F] mb-1">Bone Conduction</h3>
+                  <span className="inline-block text-xs font-bold text-[#0071E3] bg-[#0071E3]/10 px-3 py-1 rounded-full uppercase tracking-wider">
+                    100% Open Ears
+                  </span>
+                  <p className="text-xs text-[#86868B] mt-2 leading-relaxed">
+                    Acoustic transducers transmit cues directly through cheekbones, keeping your ear canal totally open for traffic and group chats.
+                  </p>
+                </div>
+
+                <div className="flex flex-col items-center text-center p-4 rounded-2xl bg-[#F5F5F7]/80 border border-black/5 hover:border-[#0071E3]/30 transition-all">
+                  <div className="p-3 bg-[#0071E3] text-white rounded-2xl mb-3 shadow-sm">
+                    <Zap className="w-6 h-6" />
+                  </div>
+                  <h3 className="font-extrabold text-base text-[#1D1D1F] mb-1">Real-Time Pacing</h3>
+                  <span className="inline-block text-xs font-bold text-[#0071E3] bg-[#0071E3]/10 px-3 py-1 rounded-full uppercase tracking-wider">
+                    Zero Screen Distraction
+                  </span>
+                  <p className="text-xs text-[#86868B] mt-2 leading-relaxed">
+                    Spoken target wattages and cadence adjustments mean you keep your eyes strictly on the road, not down at handlebars.
+                  </p>
+                </div>
+
+                <div className="flex flex-col items-center text-center p-4 rounded-2xl bg-[#F5F5F7]/80 border border-black/5 hover:border-[#0071E3]/30 transition-all">
+                  <div className="p-3 bg-[#0071E3] text-white rounded-2xl mb-3 shadow-sm">
+                    <Activity className="w-6 h-6" />
+                  </div>
+                  <h3 className="font-extrabold text-base text-[#1D1D1F] mb-1">In-Ride Execution</h3>
+                  <span className="inline-block text-xs font-bold text-[#0071E3] bg-[#0071E3]/10 px-3 py-1 rounded-full uppercase tracking-wider">
+                    Digital Domestique
+                  </span>
+                  <p className="text-xs text-[#86868B] mt-2 leading-relaxed">
+                    Adaptive AI algorithms calculate fatigue and threshold headroom live to guide interval timing and pacing beat-by-beat.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* CORE VALUE PROP: REAL-TIME COACH */}
+        <section ref={coachRef} id="coach" className="py-16 md:py-24 px-4 sm:px-6 max-w-6xl mx-auto">
+          <div className="text-center mb-12">
+            <span className="text-sm md:text-base font-extrabold text-[#0071E3] uppercase tracking-wider block mb-2 flex items-center justify-center gap-2">
+              <Sparkles className="w-4 h-4 text-[#0071E3]" /> Real-Time Vs. Post-Ride Analysis
+            </span>
+            <h2 className="text-3xl sm:text-5xl font-extrabold text-[#1D1D1F] tracking-tight">Why Active Cyclists Need In-Ride Coaching</h2>
+            <p className="text-lg text-[#86868B] max-w-2xl mx-auto mt-3">Post-training software provides a post-mortem. Real-time audio coaching intervenes when it actually counts: during the effort.</p>
+          </div>
+
+          <div ref={featuresScrollRef} className="flex overflow-x-auto snap-x snap-mandatory gap-6 hide-scrollbar pb-6">
+            {FEATURES.map((feature) => (
+              <div key={feature.id} className="w-[85vw] sm:w-[380px] shrink-0 snap-center apple-card p-6 flex flex-col justify-between">
+                <div>
+                  <div className="rounded-xl overflow-hidden mb-4 border border-black/5 bg-black">
+                    <video 
+                      controls 
+                      playsInline 
+                      preload="metadata" 
+                      poster={feature.poster} 
+                      className="w-full aspect-[4/3] object-cover"
+                      onPlay={() => trackAnalyticsEvent('WatchVideo', 'video_start', { video_title: feature.title }, true)}
+                    >
+                      <source src={feature.video} type="video/mp4" />
+                    </video>
+                  </div>
+                  
+                  <div className="flex items-center gap-2 mb-2">
+                    <Activity className="w-4 h-4 text-[#0071E3]" />
+                    <h3 className="font-bold text-lg text-[#1D1D1F]">{feature.title}</h3>
+                  </div>
+
+                  <div className="bg-[#F5F5F7] p-3.5 rounded-xl border border-black/5 mb-4">
+                    <p className="text-xs text-[#515154] italic font-semibold">"{feature.quote}"</p>
+                  </div>
+                </div>
+
+                <div className="pt-3 border-t border-black/5">
+                  <span className="text-xs font-bold text-[#0071E3] uppercase tracking-wider block mb-1">Why This Beats Post-Ride Data</span>
+                  <p className="text-xs text-[#515154] leading-relaxed">{feature.whyItMatters}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div className="flex justify-center gap-3 mt-4">
+            <button id="carousel-btn-features-left" type="button" onClick={() => scrollCarousel(featuresScrollRef, 'left')} className="p-3 apple-card hover:bg-black/5 touch-manipulation"><ChevronLeft className="w-5 h-5"/></button>
+            <button id="carousel-btn-features-right" type="button" onClick={() => scrollCarousel(featuresScrollRef, 'right')} className="p-3 apple-card hover:bg-black/5 touch-manipulation"><ChevronRight className="w-5 h-5"/></button>
+          </div>
+        </section>
+
+        {/* STEP-BY-STEP FLOW & EMBEDDED YOUTUBE DEMO VIDEO */}
+        <section ref={flowRef} id="flow" className="relative py-16 md:py-24 px-4 sm:px-6 bg-[#EBEBEF] border-y border-black/5 overflow-hidden">
+          <BackgroundLogoWatermark />
+
+          <div className="max-w-6xl mx-auto relative z-10">
+            <div className="text-center mb-12">
+              <span className="text-sm md:text-base font-extrabold text-[#0071E3] uppercase tracking-wider block mb-2 flex items-center justify-center gap-2">
+                <RefreshCw className="w-4 h-4 text-[#0071E3]" /> How It Works
+              </span>
+              <h2 className="text-3xl sm:text-5xl font-extrabold text-[#1D1D1F] tracking-tight">The In-Ride Coaching Loop</h2>
+              <p className="text-lg text-[#86868B] max-w-2xl mx-auto mt-3">From pre-ride targets to real-time audio execution on open roads.</p>
+            </div>
+
+            {/* EMBEDDED YOUTUBE DEMO VIDEO */}
+            <div className="max-w-4xl mx-auto mb-16 apple-card overflow-hidden shadow-lg border border-black/10 bg-black">
+              <div className="relative w-full aspect-video">
+                <iframe 
+                  className="absolute inset-0 w-full h-full rounded-2xl"
+                  loading="lazy"
+                  src="https://www.youtube.com/embed/VyHThpEzqhI?si=O7ehuVv3CwypiaMy" 
+                  title="Domestique.live How It Works Video Player" 
+                  frameBorder="0" 
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+                  referrerPolicy="strict-origin-when-cross-origin" 
+                  allowFullScreen
+                ></iframe>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-5 gap-6">
+              {FLOW_STEPS.map((step) => {
+                const StepIcon = step.icon;
+                return (
+                  <div key={step.step} className="apple-card p-6 flex flex-col justify-between hover:shadow-md transition-shadow relative overflow-hidden group">
+                    <div className="absolute top-0 left-0 w-full h-1 bg-[#0071E3] opacity-0 group-hover:opacity-100 transition-opacity"></div>
+                    <div>
+                      <div className="flex items-center justify-between mb-3">
+                        <span className="text-xs font-mono font-bold text-[#0071E3]">{step.step}</span>
+                        <StepIcon className="w-4 h-4 text-[#86868B] group-hover:text-[#0071E3] transition-colors" />
+                      </div>
+                      <h4 className="font-bold text-base text-[#1D1D1F] mb-2">{step.title}</h4>
+                      <p className="text-xs text-[#86868B] leading-relaxed">{step.desc}</p>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </section>
+
+        {/* MOBILE-OPTIMIZED ECOSYSTEM COMPARISON & LOGO GRID */}
+        <section ref={ecosystemRef} id="ecosystem" className="py-16 md:py-24 px-4 sm:px-6 max-w-6xl mx-auto">
+          <div className="text-center mb-12">
+            <span className="text-sm md:text-base font-extrabold text-[#0071E3] uppercase tracking-wider block mb-2 flex items-center justify-center gap-2">
+              <Sliders className="w-4 h-4 text-[#0071E3]" /> Complementary Architecture
+            </span>
+            <h2 className="text-3xl sm:text-5xl font-extrabold text-[#1D1D1F] tracking-tight">How Domestique.live Enhances Your Tools</h2>
+            <p className="text-lg text-[#86868B] max-w-2xl mx-auto mt-3">Domestique.live does not replace your current tools. It connects parallel to your existing sensors and head unit, adding an active voice layer.</p>
+          </div>
+
+          {/* Mobile View (< 768px) */}
+          <div className="block md:hidden space-y-4 mb-12">
+            {TABLE_ECOSYSTEM_DATA.map((row) => {
+              const RowIcon = row.icon;
+              return (
+                <div key={row.tool} className="apple-card p-5 border border-black/10">
+                  <div className="flex items-center gap-3 mb-4 pb-3 border-b border-black/5">
+                    <div className="p-2.5 bg-[#0071E3]/10 text-[#0071E3] rounded-xl shrink-0">
+                      <RowIcon className="w-5 h-5" />
+                    </div>
+                    <div>
+                      <h3 className="font-bold text-base text-[#1D1D1F]">{row.tool}</h3>
+                      <span className="text-[10px] text-[#86868B] uppercase font-mono">{row.category}</span>
+                    </div>
+                  </div>
+
+                  <div className="space-y-3">
+                    <div className="p-3.5 bg-[#F5F5F7] rounded-xl border border-black/5">
+                      <span className="text-[10px] font-bold text-[#86868B] uppercase block mb-1">Legacy Approach</span>
+                      <p className="text-xs text-[#515154] leading-relaxed">{row.legacyApproach}</p>
+                    </div>
+
+                    <div className="p-3.5 bg-[#0071E3]/5 rounded-xl border border-[#0071E3]/20">
+                      <span className="text-[10px] font-bold text-[#0071E3] uppercase block mb-1">Domestique.live Real-Time Advantage</span>
+                      <p className="text-xs font-medium text-[#1D1D1F] leading-relaxed flex items-start gap-1.5">
+                        <Check className="w-3.5 h-3.5 text-[#0071E3] shrink-0 mt-0.5" />
+                        <span>{row.domestiqueApproach}</span>
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+
+          {/* Desktop View (>= 768px) */}
+          <div className="hidden md:block apple-card overflow-hidden shadow-md border border-black/10 mb-16">
+            <div className="overflow-x-auto">
+              <table className="w-full text-left border-collapse">
+                <thead>
+                  <tr className="bg-[#1D1D1F] text-white text-xs font-bold uppercase tracking-wider">
+                    <th className="py-4 px-6 border-r border-white/10 w-1/3">Cyclist Tool & Category</th>
+                    <th className="py-4 px-6 border-r border-white/10 w-1/3">Standard Legacy Function</th>
+                    <th className="py-4 px-6 bg-[#0071E3] w-1/3 text-white">Domestique.live Real-Time Advantage</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-black/10 text-xs">
+                  {TABLE_ECOSYSTEM_DATA.map((row) => {
+                    const RowIcon = row.icon;
+                    return (
+                      <tr key={row.tool} className="hover:bg-black/[0.02] transition-colors">
+                        <td className="py-5 px-6 font-semibold border-r border-black/5 bg-[#F5F5F7]/50">
+                          <div className="flex items-center gap-3">
+                            <div className="p-2 bg-[#0071E3]/10 text-[#0071E3] rounded-lg shrink-0">
+                              <RowIcon className="w-4 h-4" />
+                            </div>
+                            <div>
+                              <span className="font-bold text-sm text-[#1D1D1F] block">{row.tool}</span>
+                              <span className="text-[10px] text-[#86868B] uppercase font-mono">{row.category}</span>
+                            </div>
+                          </div>
+                        </td>
+                        <td className="py-5 px-6 border-r border-black/5 text-[#515154] leading-relaxed">
+                          {row.legacyApproach}
+                        </td>
+                        <td className="py-5 px-6 font-medium text-[#1D1D1F] bg-[#0071E3]/5 leading-relaxed">
+                          <div className="flex items-start gap-2">
+                            <Check className="w-4 h-4 text-[#0071E3] shrink-0 mt-0.5" />
+                            <span>{row.domestiqueApproach}</span>
+                          </div>
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          {/* LOGO SECTION UNDER THE TABLE */}
+          <div className="apple-card p-8 bg-gradient-to-br from-white via-[#F5F5F7] to-white border border-black/10 text-center">
+            <div className="flex items-center justify-center gap-2 mb-2 text-[#0071E3]">
+              <Layers className="w-5 h-5" />
+              <span className="text-xs font-bold uppercase tracking-wider">Seamless Integration</span>
+            </div>
+            <h3 className="text-xl sm:text-2xl font-extrabold text-[#1D1D1F] mb-2">
+              We Connect With All The Tools You Already Use & Love
+            </h3>
+            <p className="text-xs sm:text-sm text-[#86868B] max-w-xl mx-auto mb-8">
+              Domestique.live hooks into your existing sensor network and favorite cycling apps in parallel—no lock-in, no ecosystem changes required.
+            </p>
+
+            <div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-4 items-center justify-center mb-6">
+              {PARTNER_LOGOS.map((partner) => (
+                <div key={partner.name} className="flex flex-col items-center justify-center p-3 rounded-2xl bg-white border border-black/5 hover:border-[#0071E3]/30 transition-all shadow-sm">
+                  <img 
+                    src={partner.logo} 
+                    alt={partner.name} 
+                    loading="lazy"
+                    decoding="async"
+                    className="h-8 w-auto max-w-[80px] object-contain mb-2 filter grayscale hover:grayscale-0 transition-all"
+                  />
+                  <span className="text-[11px] font-bold text-[#1D1D1F]">{partner.name}</span>
+                </div>
+              ))}
+            </div>
+
+            <p className="text-xs text-[#86868B] font-medium italic">
+              ...and many more standard Bluetooth, ANT+, and REST API training platforms.
+            </p>
+          </div>
+        </section>
+
+        {/* HARDWARE & OPEN-EAR TECH */}
+        <section ref={hardwareRef} id="hardware" className="relative py-16 md:py-24 px-4 sm:px-6 bg-[#EBEBEF] border-y border-black/5 overflow-hidden">
+          <BackgroundLogoWatermark />
+
+          <div className="max-w-6xl mx-auto relative z-10">
+            <div className="text-center mb-12">
+              <span className="text-sm md:text-base font-extrabold text-[#0071E3] uppercase tracking-wider block mb-2 flex items-center justify-center gap-2">
+                <Cpu className="w-4 h-4 text-[#0071E3]" /> Ergonomic Precision
+              </span>
+              <h2 className="text-3xl sm:text-5xl font-extrabold text-[#1D1D1F] tracking-tight">Bone-Conduction Architecture</h2>
+              <p className="text-lg text-[#86868B] max-w-2xl mx-auto mt-3">Weighted at 26 grams. Bypasses the eardrum so your situational awareness and group conversations remain intact.</p>
+            </div>
+
+            {/* YOUTUBE VIDEO EMBEDDED ON TOP OF PRODUCT IMAGES */}
+            <div className="max-w-4xl mx-auto mb-12 apple-card overflow-hidden shadow-lg border border-black/10 bg-black">
+              <div className="relative w-full aspect-video">
+                <iframe 
+                  className="absolute inset-0 w-full h-full rounded-2xl"
+                  loading="lazy"
+                  src="https://www.youtube.com/embed/k9lesOKGIvM?si=Rg2DKO9m3bCyAFR-" 
+                  title="YouTube video player" 
+                  frameBorder="0" 
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+                  referrerPolicy="strict-origin-when-cross-origin" 
+                  allowFullScreen
+                ></iframe>
+              </div>
+            </div>
+
+            <div ref={productsScrollRef} className="flex overflow-x-auto snap-x snap-mandatory gap-6 hide-scrollbar pb-6 mb-8">
+              {PRODUCT_IMAGES.map((img, idx) => (
+                <button 
+                  key={img} 
+                  id={`product-img-btn-${idx}`}
+                  type="button"
+                  className="w-[80vw] sm:w-[320px] shrink-0 snap-center apple-card p-6 text-left hover:shadow-md transition-all touch-manipulation border border-black/5 cursor-pointer"
+                  onClick={() => {
+                    trackAnalyticsEvent('InspectProduct', 'view_item', { image_url: img }, true);
+                    setSelectedImage(img);
+                  }}
+                >
+                  <img src={cld(img, 800)} alt={`Hardware ${idx + 1}`} loading="lazy" decoding="async" className="w-full h-48 object-contain mb-4" />
+                  <span className="text-xs font-semibold text-[#0071E3] block text-center">Tap to inspect hardware detail</span>
+                </button>
+              ))}
+            </div>
+
+            <div className="flex justify-center gap-3 mb-12">
+              <button id="carousel-btn-products-left" type="button" onClick={() => scrollCarousel(productsScrollRef, 'left')} className="p-3 apple-card hover:bg-black/5 touch-manipulation"><ChevronLeft className="w-5 h-5"/></button>
+              <button id="carousel-btn-products-right" type="button" onClick={() => scrollCarousel(productsScrollRef, 'right')} className="p-3 apple-card hover:bg-black/5 touch-manipulation"><ChevronRight className="w-5 h-5"/></button>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div className="apple-card p-8 flex flex-col justify-between">
+                <div>
+                  <div className="flex items-center gap-2 mb-4">
+                    <Cpu className="w-5 h-5 text-[#0071E3]" />
+                    <h3 className="font-bold text-xl text-[#1D1D1F]">What's Included in the Box</h3>
+                  </div>
+                  <ul className="space-y-3 mb-6">
+                    {SETUP_ITEMS.map((item) => (
+                      <li key={item} className="flex items-center gap-3 text-sm text-[#515154]">
+                        <Check className="w-4 h-4 text-[#0071E3] shrink-0" /> {item}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+                <div className="pt-4 border-t border-black/5 text-xs text-[#86868B]">
+                  Includes 12-month license, rapid charger, and ecosystem setup documentation.
+                </div>
+              </div>
+
+              <div className="apple-card p-8 bg-white border border-black/5 flex flex-col justify-between">
+                <div>
+                  <div className="flex items-center gap-2 mb-4">
+                    <Volume2 className="w-5 h-5 text-[#0071E3]" />
+                    <h3 className="font-bold text-xl text-[#1D1D1F]">Why Bone-Conduction Audio?</h3>
+                  </div>
+                  <p className="text-sm text-[#515154] leading-relaxed mb-4">
+                    Standard earbuds block external noise and create wind turbulence. Bone-conduction transducers transmit acoustic vibrations directly through your cheekbones, leaving your ear canal 100% open for ambient sounds and riding buddies.
+                  </p>
+                </div>
+                <div className="pt-4 border-t border-black/10 flex items-center justify-between text-xs font-semibold text-[#0071E3]">
+                  <span>26 Grams Ultra-Light</span>
+                  <span>10-Hour Battery Life</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* PRICING & TIER PRE-ORDERS */}
+        <section ref={pricingRef} id="pricing" className="py-16 md:py-24 px-4 sm:px-6 max-w-6xl mx-auto">
+          <div className="text-center mb-12">
+            <span className="text-sm md:text-base font-extrabold text-[#0071E3] uppercase tracking-wider block mb-2 flex items-center justify-center gap-2">
+              <Lock className="w-4 h-4 text-[#0071E3]" /> Pre-Order Allocation
+            </span>
+            <h2 className="text-3xl sm:text-5xl font-extrabold text-[#1D1D1F] tracking-tight">Reserve Your System</h2>
+            <p className="text-lg text-[#86868B] max-w-2xl mx-auto mt-3">Select your batch preference. Includes free worldwide shipping and a 100% money-back guarantee prior to shipment.</p>
+          </div>
+
+          {/* HIGH VISIBILITY GUARANTEE BOX (MOVED ABOVE TIERS) */}
+          <div className="apple-card p-8 bg-gradient-to-br from-[#0071E3]/5 via-white to-white border-2 border-[#0071E3]/30 shadow-md max-w-3xl mx-auto mb-12">
+            <div className="flex flex-col sm:flex-row items-center gap-6 text-center sm:text-left">
+              <div className="p-4 bg-[#0071E3] text-white rounded-2xl shrink-0 shadow-sm">
+                <ShieldCheck className="w-10 h-10" />
+              </div>
+              <div>
+                <div className="inline-flex items-center gap-1.5 text-xs font-bold text-[#0071E3] uppercase tracking-wider mb-1">
+                  <Check className="w-4 h-4 text-[#0071E3]" /> Risk-Free Commitment
+                </div>
+                <h3 className="text-2xl font-extrabold text-[#1D1D1F] mb-2">
+                  100% Pre-Order Confidence Guarantee
+                </h3>
+                <p className="text-sm text-[#515154] leading-relaxed">
+                  Plans change? All pre-orders and reservations can be fully refunded anytime prior to batch dispatch—no questions asked.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* 3 Main Tiers Grid */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
+            {PERKS_WITH_APPAREL.map((perk, i) => (
+              <div key={perk.tier} className={`apple-card p-8 flex flex-col justify-between relative ${perk.featured ? 'border-2 border-[#0071E3] shadow-lg' : ''}`}>
+                {perk.featured && (
+                  <span className="absolute -top-3.5 left-1/2 -translate-x-1/2 bg-[#0071E3] text-white text-[10px] font-bold px-4 py-1 rounded-full uppercase tracking-wider">
+                    Most Popular
+                  </span>
+                )}
+                <div>
+                  <div className="flex justify-between text-xs text-[#86868B] font-semibold mb-2">
+                    <span>{perk.tier}</span>
+                    <span className="text-[#0071E3]">{perk.tag}</span>
+                  </div>
+                  <h3 className="text-2xl font-bold text-[#1D1D1F] mb-2">{perk.name}</h3>
+                  <div className="text-4xl font-extrabold text-[#1D1D1F] mb-6">{perk.price}</div>
+
+                  {perk.apparel.length > 0 && (
+                    <div className="mb-6">
+                      <span className="text-xs font-semibold text-[#86868B] block mb-2">Founder Gear Included:</span>
+                      <div className="flex gap-2">
+                        {perk.apparel.map((slide) => (
+                          <button
+                            key={slide.title}
+                            id={`apparel-thumb-${slide.index}`}
+                            type="button"
+                            className="p-0 border-none bg-transparent cursor-pointer touch-manipulation"
+                            onClick={() => {
+                              setApparelSliderIndex(slide.index);
+                              setApparelSliderOpen(true);
+                            }}
+                          >
+                            <img 
+                              src={slide.img} 
+                              alt={slide.title} 
+                              loading="lazy"
+                              decoding="async"
+                              className="w-10 h-10 object-contain apple-card p-1" 
+                            />
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  <ul className="space-y-3 text-sm text-[#515154] mb-8">
+                    {perk.includes.map((item) => (
+                      <li key={item} className="flex items-start gap-2">
+                        <Check className="w-4 h-4 text-[#0071E3] shrink-0 mt-0.5" />
+                        <span>{item}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+
+                <div>
+                  <div 
+                    onClickCapture={() => {
+                      trackAnalyticsEvent('InitiateCheckout', 'begin_checkout', { 
+                        content_name: perk.name, 
+                        value: parseFloat(perk.price.replace('€', '')), 
+                        currency: 'EUR' 
+                      });
+                    }}
+                  >
+                    <stripe-buy-button 
+                      id={`stripe-buy-btn-${i}`} 
+                      buy-button-id={perk.stripeBuyButtonId} 
+                      publishable-key="pk_live_51IdtRfIVuCvdmBxBUsmabzHvOXTFcGtZtEqntzEL3250bwSyUPtjAdz3DYb19hkLrjjGVtw5bQXUiI7wFgSbNSA6005OSynoUX"
+                    ></stripe-buy-button>
+                  </div>
+                  <CardTrustBadges />
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* Dedicated Full-Width Banner for Batch 2 Reservation (€10 Deposit) */}
+          <div className="apple-card p-6 md:p-8 bg-gradient-to-r from-white via-[#F5F5F7] to-white border border-[#0071E3]/20 shadow-sm mb-12 flex flex-col md:flex-row items-center justify-between gap-6">
+            <div className="flex items-start gap-4">
+              <div className="p-3 bg-[#0071E3]/10 text-[#0071E3] rounded-2xl shrink-0">
+                <BookmarkPlus className="w-6 h-6" />
+              </div>
+              <div>
+                <div className="flex items-center gap-2 mb-1">
+                  <span className="text-xs font-bold text-[#0071E3] uppercase">{BATCH_2_PERK.tier}</span>
+                  <span className="text-[10px] bg-[#0071E3]/10 text-[#0071E3] font-semibold px-2 py-0.5 rounded-full">{BATCH_2_PERK.delivery}</span>
+                </div>
+                <h3 className="text-xl font-bold text-[#1D1D1F]">{BATCH_2_PERK.name} — {BATCH_2_PERK.price} Deposit</h3>
+                <p className="text-xs text-[#86868B] mt-1 max-w-xl">
+                  Reserve your spot in the second production run for €10. Locks in your early pricing and holds your place in line.
+                </p>
+              </div>
+            </div>
+            <div className="w-full md:w-auto shrink-0 flex flex-col items-center">
+              <div 
+                className="w-full md:w-auto"
+                onClickCapture={() => {
+                  trackAnalyticsEvent('InitiateCheckout', 'begin_checkout', { content_name: 'Batch 2 Reservation Deposit', value: 10, currency: 'EUR' });
+                }}
+              >
+                <stripe-buy-button 
+                  id="stripe-buy-btn-batch2" 
+                  buy-button-id={BATCH_2_PERK.stripeBuyButtonId} 
+                  publishable-key="pk_live_51IdtRfIVuCvdmBxBUsmabzHvOXTFcGtZtEqntzEL3250bwSyUPtjAdz3DYb19hkLrjjGVtw5bQXUiI7wFgSbNSA6005OSynoUX"
+                ></stripe-buy-button>
+              </div>
+              <span className="text-[10px] text-[#86868B] mt-2 flex items-center gap-1">
+                <Lock className="w-3 h-3 text-[#0071E3]" /> Fully Refundable €10 Deposit
+              </span>
+            </div>
+          </div>
+        </section>
+
+        {/* TEAM & FOUNDING STORY SECTION */}
+        <section ref={teamRef} id="team" className="relative py-16 md:py-24 px-4 sm:px-6 bg-[#EBEBEF] border-y border-black/5 overflow-hidden">
+          <BackgroundLogoWatermark />
+
+          <div className="max-w-6xl mx-auto relative z-10">
+            <div className="text-center mb-12">
+              <span className="text-sm md:text-base font-extrabold text-[#0071E3] uppercase tracking-wider block mb-2 flex items-center justify-center gap-2">
+                <Award className="w-4 h-4 text-[#0071E3]" /> Built by Cyclists
+              </span>
+              <h2 className="text-3xl sm:text-5xl font-extrabold text-[#1D1D1F] tracking-tight">Our Story</h2>
+            </div>
+
+            {/* FOUNDING STORY CARD WITH INTEGRATED GROUP PHOTO */}
+            <div className="apple-card p-8 md:p-12 bg-white border border-black/10 shadow-sm relative overflow-hidden flex flex-col md:flex-row items-center gap-12">
+              <div className="w-full md:w-1/2">
+                <div className="flex items-center gap-3 mb-4 text-[#0071E3]">
+                  <Lightbulb className="w-6 h-6" />
+                  <span className="text-xs font-bold uppercase tracking-widest">Why We Built Domestique.live</span>
+                </div>
+                
+                <h3 className="text-2xl sm:text-4xl font-extrabold text-[#1D1D1F] tracking-tight mb-6 leading-tight">
+                  The Missing Piece in Modern Cycling Tech
+                </h3>
+
+                <div className="space-y-4 text-sm text-[#515154] leading-relaxed">
+                  <p>
+                    As active road cyclists, we noticed a glaring gap in the market. On one hand, we had incredible tools for pre-ride workout planning (TrainingPeaks, Join, Zwift). On the other, we had endless post-ride post-mortem platforms (Strava, Intervals.icu) telling us exactly why we blew up two hours after the ride was already finished.
+                  </p>
+                  <p className="font-semibold text-[#1D1D1F]">
+                    What was completely missing was something actively helping you mid-ride, when it actually matters.
+                  </p>
+                  <p>
+                    Glancing down at glass computer screens while traveling at 40 km/h is distracting and inefficient. We wanted the experience that pro peloton riders have: a digital domestique in the car radio, giving precise audio cues on pacing, cadence, and interval timing.
+                  </p>
+                  <p>
+                    That's why we engineered <strong className="text-[#0071E3]">Domestique.live</strong>—pairing open-ear bone conduction audio with real-time biometric AI to give every passionate cyclist an active in-ride advantage.
+                  </p>
+
+                  <a 
+                    id="link-linkedin-story"
+                    href="https://www.linkedin.com/company/domestiquelive" 
+                    target="_blank" 
+                    rel="noreferrer"
+                    className="inline-flex items-center gap-2 text-[#0071E3] font-bold mt-6 hover:underline touch-manipulation"
+                  >
+                    Follow our journey on LinkedIn <ArrowRight className="w-4 h-4" />
+                  </a>
+                </div>
+              </div>
+
+              <div className="w-full md:w-1/2">
+                <img 
+                  src={TEAM_PHOTO_URL} 
+                  alt="Domestique.live Founding Team" 
+                  loading="lazy"
+                  decoding="async"
+                  className="w-full h-auto rounded-2xl shadow-sm border border-black/5 object-cover"
+                />
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* FAQ & SEND A QUESTION SECTION */}
+        <section ref={faqRef} id="faq" className="py-16 md:py-24 px-4 sm:px-6 max-w-6xl mx-auto border-b border-black/5">
+          <div className="text-center mb-12">
+            <span className="text-sm md:text-base font-extrabold text-[#0071E3] uppercase tracking-wider block mb-2 flex items-center justify-center gap-2">
+              <HelpCircle className="w-4 h-4 text-[#0071E3]" /> Got Questions?
+            </span>
+            <h2 className="text-3xl sm:text-5xl font-extrabold text-[#1D1D1F] tracking-tight">Frequently Asked Questions</h2>
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
+            <div className="lg:col-span-7 space-y-3">
+              {PREORDER_FAQS.map((faq, index) => (
+                <button 
+                  key={faq.q} 
+                  id={`faq-toggle-btn-${index}`}
+                  type="button"
+                  className="w-full text-left apple-card p-5 cursor-pointer hover:shadow-sm transition-all touch-manipulation border border-black/5"
+                  onClick={() => setOpenFaq(openFaq === index ? -1 : index)}
+                >
+                  <div className="font-semibold text-sm text-[#1D1D1F] flex justify-between items-center gap-4">
+                    <span>{faq.q}</span>
+                    <span className="text-[#0071E3] text-lg font-bold">{openFaq === index ? '−' : '+'}</span>
+                  </div>
+                  {openFaq === index && (
+                    <p className="text-xs text-[#86868B] mt-3 leading-relaxed pt-3 border-t border-black/5">{faq.a}</p>
+                  )}
+                </button>
+              ))}
+            </div>
+
+            <div className="lg:col-span-5 apple-card p-8 bg-white border border-black/10">
+              <div className="flex items-center gap-2 mb-2">
+                <HelpCircle className="w-5 h-5 text-[#0071E3]" />
+                <h3 className="font-bold text-xl text-[#1D1D1F]">Have a Question?</h3>
+              </div>
+              <p className="text-xs text-[#86868B] mb-6">Can't find the answer you're looking for? Ask our product team directly.</p>
+
+              {questionSent ? (
+                <div className="bg-[#F5F5F7] p-6 rounded-xl border border-black/5 text-center">
+                  <Check className="w-8 h-8 text-[#0071E3] mx-auto mb-2" />
+                  <h4 className="font-bold text-sm text-[#1D1D1F] mb-1">Question Received!</h4>
+                  <p className="text-xs text-[#86868B]">We will reply to your email shortly.</p>
+                </div>
+              ) : (
+                <form onSubmit={handleQuestionSubmit} className="space-y-4">
+                  <div>
+                    <label htmlFor="user-question-name" className="block text-xs font-semibold text-[#515154] mb-1">Your Name</label>
+                    <input 
+                      id="user-question-name"
+                      type="text" 
+                      required 
+                      value={userQuestion.name}
+                      onChange={(e) => setUserQuestion({ ...userQuestion, name: e.target.value })}
+                      placeholder="e.g. Alex" 
+                      className="w-full text-xs p-3 rounded-xl bg-[#F5F5F7] border border-black/5 focus:outline-none focus:border-[#0071E3]"
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="user-question-email" className="block text-xs font-semibold text-[#515154] mb-1">Email Address</label>
+                    <input 
+                      id="user-question-email"
+                      type="email" 
+                      required 
+                      value={userQuestion.email}
+                      onChange={(e) => setUserQuestion({ ...userQuestion, email: e.target.value })}
+                      placeholder="alex@peloton.com" 
+                      className="w-full text-xs p-3 rounded-xl bg-[#F5F5F7] border border-black/5 focus:outline-none focus:border-[#0071E3]"
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="user-question-message" className="block text-xs font-semibold text-[#515154] mb-1">Question</label>
+                    <textarea 
+                      id="user-question-message"
+                      rows={4} 
+                      required 
+                      value={userQuestion.message}
+                      onChange={(e) => setUserQuestion({ ...userQuestion, message: e.target.value })}
+                      placeholder="Ask us anything about sensor compatibility, audio clarity, or shipping..." 
+                      className="w-full text-xs p-3 rounded-xl bg-[#F5F5F7] border border-black/5 focus:outline-none focus:border-[#0071E3]"
+                    ></textarea>
+                  </div>
+                  <button id="btn-submit-question" type="submit" className="w-full bg-[#0071E3] text-white font-semibold text-xs py-3 rounded-xl hover:bg-[#0077ED] transition-colors flex items-center justify-center gap-2 touch-manipulation">
+                    <Send className="w-3.5 h-3.5" /> Send Question
+                  </button>
+                </form>
+              )}
+            </div>
+          </div>
+        </section>
+
+        {/* COMMUNITY & STRAVA CLUB SECTION (UPDATED LOGO) */}
+        <section ref={instagramRef} id="instagram-feed" className="py-16 md:py-24 px-4 sm:px-6 max-w-6xl mx-auto">
+          {/* CENTERED STRAVA CALL TO ACTION */}
+          <div className="apple-card p-8 md:p-12 bg-gradient-to-br from-white via-[#F5F5F7] to-white border border-[#FC4C02]/20 shadow-sm mb-16 text-center max-w-3xl mx-auto flex flex-col items-center">
+            <div className="flex items-center justify-center gap-2.5 mb-4">
+              <img src={NEW_STRAVA_LOGO} alt="Strava" loading="lazy" decoding="async" className="h-8 w-auto object-contain" />
+              <span className="text-sm font-bold text-[#FC4C02] uppercase tracking-wider">Official Strava Club</span>
+            </div>
+            <h3 className="text-3xl sm:text-4xl font-extrabold text-[#1D1D1F] mb-4">Ride With Domestique.live</h3>
+            <p className="text-sm sm:text-base text-[#86868B] leading-relaxed mb-8 max-w-lg mx-auto">
+              Track peloton training rides, compare leaderboard efforts, and connect with early adopters testing our real-time coaching system on open roads.
+            </p>
+            <a 
+              id="link-strava-club"
+              href="https://www.strava.com/clubs/2143975?oq=domestiqu" 
+              target="_blank" 
+              rel="noreferrer"
+              className="bg-[#FC4C02] text-white text-sm font-bold px-8 py-4 rounded-full hover:bg-[#e04300] transition-colors flex items-center gap-2 shadow-sm touch-manipulation"
+            >
+              Join Strava Club <ArrowRight className="w-4 h-4" />
+            </a>
+          </div>
+        </section>
+
+        {/* FOOTER */}
+        <footer className="bg-[#1D1D1F] text-white py-16 px-4 sm:px-6 border-t border-black/10">
+          <div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
+            <div>
+              <span className="font-bold text-lg block mb-3">Domestique.live</span>
+              <p className="text-xs text-[#86868B] leading-relaxed mb-3">
+                Real-time AI audio coaching and open-ear bone conduction intelligence for active cyclists.
+              </p>
+              
+              <div className="pt-2 space-y-2">
+                <span className="text-[11px] text-[#86868B] block">
+                  Powered by <a id="link-alphanome-home" href="https://www.alphanome.ai/" target="_blank" rel="noreferrer" className="text-[#0071E3] font-semibold hover:underline">Alphanome.AI</a>
+                </span>
+                <span className="text-[11px] text-[#86868B] block mt-1">
+                  Genève, Switzerland
+                </span>
+              </div>
+            </div>
+
+            <div>
+              <h5 className="text-xs font-bold uppercase text-[#86868B] mb-3">Navigation</h5>
+              <div className="flex flex-col gap-2 text-xs text-[#86868B]">
+                <button id="footer-btn-coach" type="button" onClick={() => scrollToRef(coachRef)} className="text-left hover:text-white touch-manipulation">Real-Time Coach</button>
+                <button id="footer-btn-flow" type="button" onClick={() => scrollToRef(flowRef)} className="text-left hover:text-white touch-manipulation">How It Works</button>
+                <button id="footer-btn-ecosystem" type="button" onClick={() => scrollToRef(ecosystemRef)} className="text-left hover:text-white touch-manipulation">Ecosystem</button>
+                <button id="footer-btn-hardware" type="button" onClick={() => scrollToRef(hardwareRef)} className="text-left hover:text-white touch-manipulation">Hardware</button>
+                <button id="footer-btn-team" type="button" onClick={() => scrollToRef(teamRef)} className="text-left hover:text-white touch-manipulation">Our Story</button>
+                <button id="footer-btn-pricing" type="button" onClick={() => scrollToRef(pricingRef)} className="text-left hover:text-white touch-manipulation">Pre-Order</button>
+                <button id="footer-btn-community" type="button" onClick={() => scrollToRef(instagramRef)} className="text-left hover:text-white touch-manipulation">Community</button>
+              </div>
+            </div>
+
+            <div>
+              <h5 className="text-xs font-bold uppercase text-[#86868B] mb-3">Legal & Research</h5>
+              <div className="flex flex-col gap-2 text-xs text-[#86868B]">
+                <button id="footer-policy-return" type="button" onClick={() => setActivePolicy('return')} className="text-left hover:text-white touch-manipulation">Return & Refund Policy</button>
+                <button id="footer-policy-shipping" type="button" onClick={() => setActivePolicy('shipping')} className="text-left hover:text-white touch-manipulation">Shipping Policy</button>
+                <button id="footer-policy-privacy" type="button" onClick={() => setActivePolicy('privacy')} className="text-left hover:text-white touch-manipulation">Privacy Policy</button>
+                
+                {/* SYSTEM ARCHITECTURE LINK */}
+                <button 
+                  id="footer-modal-architecture"
+                  type="button"
+                  onClick={() => setShowArchitectureModal(true)} 
+                  className="text-left text-[#0071E3] font-semibold hover:underline flex items-center gap-1.5 pt-1 touch-manipulation"
+                >
+                  <Server className="w-3.5 h-3.5" /> System Architecture
+                </button>
+
+                {/* SCIENCE & RESEARCH LINK */}
+                <button 
+                  id="footer-modal-science"
+                  type="button"
+                  onClick={() => setShowScienceModal(true)} 
+                  className="text-left text-[#0071E3] font-semibold hover:underline flex items-center gap-1.5 touch-manipulation"
+                >
+                  <BookOpen className="w-3.5 h-3.5" /> Science & Research
+                </button>
+              </div>
+            </div>
+
+            <div>
+              <h5 className="text-xs font-bold uppercase text-[#86868B] mb-3">Newsletter</h5>
+              <form onSubmit={handleNewsletterSubmit} className="flex flex-col gap-2">
+                <input 
+                  type="email" 
+                  name="fields[email]" 
+                  placeholder="Enter email address" 
+                  required 
+                  className="bg-white/10 text-white placeholder-white/40 border border-white/10 text-xs px-3 py-2 rounded-lg focus:outline-none"
+                />
+                <button id="newsletter-submit-btn" type="submit" className="bg-[#0071E3] text-white text-xs font-semibold py-2 rounded-lg hover:bg-[#0077ED] touch-manipulation">Subscribe</button>
+              </form>
+            </div>
+          </div>
+
+          <div className="max-w-6xl mx-auto border-t border-white/10 pt-6 flex flex-col sm:flex-row justify-between items-center text-[10px] text-[#86868B] gap-4">
+            <span>&copy; {YEAR} Domestique.live. All rights reserved.</span>
+            <div className="flex flex-wrap gap-4 items-center">
+              <a id="link-facebook" href="https://www.facebook.com/domestiquelive" target="_blank" rel="noreferrer" className="hover:text-white transition-colors touch-manipulation" title="Facebook"><Facebook className="w-4 h-4"/></a>
+              <a id="link-tiktok" href="https://www.tiktok.com/@domestiquelive" target="_blank" rel="noreferrer" className="hover:text-white transition-colors touch-manipulation" title="TikTok"><TikTokIcon className="w-4 h-4"/></a>
+              <a id="link-instagram" href="https://www.instagram.com/domestique.live/" target="_blank" rel="noreferrer" className="hover:text-white transition-colors touch-manipulation" title="Instagram"><Instagram className="w-4 h-4"/></a>
+              <a id="link-linkedin" href="https://www.linkedin.com/company/domestiquelive/" target="_blank" rel="noreferrer" className="hover:text-white transition-colors touch-manipulation" title="LinkedIn"><Linkedin className="w-4 h-4"/></a>
+              <a id="link-twitter" href="https://x.com/domestiquelive" target="_blank" rel="noreferrer" className="hover:text-white transition-colors touch-manipulation" title="X"><TwitterXIcon className="w-4 h-4"/></a>
+              <a id="link-strava-footer" href="https://www.strava.com/clubs/2143975" target="_blank" rel="noreferrer" className="hover:text-white transition-colors touch-manipulation" title="Strava">
+                <img src={NEW_STRAVA_LOGO} alt="Strava" loading="lazy" decoding="async" className="h-3.5 w-auto object-contain opacity-70 hover:opacity-100 transition-opacity" />
+              </a>
+            </div>
+          </div>
+        </footer>
+
+        {/* DETAILED TECHNICAL ARCHITECTURE MODAL */}
+        {showArchitectureModal && (
+          <div className="fixed inset-0 z-[200] bg-black/60 backdrop-blur-md flex items-center justify-center p-4">
+            <div className="bg-[#F5F5F7] rounded-3xl p-6 sm:p-8 max-w-4xl w-full max-h-[88vh] overflow-y-auto relative text-[#1D1D1F] border border-black/10 shadow-2xl">
+              <button 
+                id="close-architecture-modal"
+                type="button"
+                onClick={() => setShowArchitectureModal(false)} 
+                className="absolute top-5 right-5 text-gray-500 hover:text-black p-2 rounded-full bg-white border border-black/5 touch-manipulation"
+              >
+                <X className="w-5 h-5" />
+              </button>
+
+              <div className="flex items-center gap-3 mb-2">
+                <div className="p-2.5 bg-[#0071E3] text-white rounded-xl">
+                  <Server className="w-6 h-6" />
+                </div>
+                <div>
+                  <h3 className="text-2xl font-extrabold text-[#1D1D1F]">System Architecture Specification</h3>
+                  <span className="text-xs font-mono font-bold text-[#0071E3] uppercase tracking-wider">Domestique.live Engine v2.4</span>
+                </div>
+              </div>
+
+              <p className="text-xs text-[#86868B] mb-8 leading-relaxed max-w-2xl">
+                Domestique.live operates a decoupled, hybrid edge-cloud ecosystem engineered to execute sub-second physiological feedback loops in offline environments while syncing to post-ride training platforms.
+              </p>
+
+              <div className="space-y-6">
+                {/* Architecture Block 1 */}
+                <div className="apple-card p-6 bg-white border border-black/5">
+                  <div className="flex items-center justify-between mb-3">
+                    <div className="flex items-center gap-2.5 text-[#0071E3]">
+                      <Gauge className="w-5 h-5" />
+                      <h4 className="font-bold text-base text-[#1D1D1F]">1. Multi-Channel BLE Intercept & Concurrent Multiplexing</h4>
+                    </div>
+                    <span className="text-[10px] font-mono font-bold px-2.5 py-1 rounded-full bg-[#0071E3]/10 text-[#0071E3]">50Hz Sampling Pipeline</span>
+                  </div>
+                  <p className="text-xs text-[#515154] leading-relaxed mb-3">
+                    The client application maintains secondary passive GATT profile connections (Cycling Power <code className="font-mono bg-[#F5F5F7] px-1.5 py-0.5 rounded text-[#0071E3]">0x1818</code>, Heart Rate <code className="font-mono bg-[#F5F5F7] px-1.5 py-0.5 rounded text-[#0071E3]">0x180D</code>, Cadence <code className="font-mono bg-[#F5F5F7] px-1.5 py-0.5 rounded text-[#0071E3]">0x1816</code>) alongside primary bike computers (Garmin, Wahoo). This multiplexed topology captures uncompressed raw telemetry streams without locking peripheral channels or interrupting FIT file logging.
+                  </p>
+                  <div className="grid grid-cols-1 sm:grid-cols-3 gap-2.5 pt-2 border-t border-black/5 text-[11px] font-mono text-[#86868B]">
+                    <div className="p-2 bg-[#F5F5F7] rounded-lg">
+                      <span className="font-bold text-[#1D1D1F] block">Power GATT (0x1818)</span>
+                      Instantaneous Wattage & L/R balance
+                    </div>
+                    <div className="p-2 bg-[#F5F5F7] rounded-lg">
+                      <span className="font-bold text-[#1D1D1F] block">HR Profile (0x180D)</span>
+                      R-R intervals & BPM dynamics
+                    </div>
+                    <div className="p-2 bg-[#F5F5F7] rounded-lg">
+                      <span className="font-bold text-[#1D1D1F] block">Cadence (0x1816)</span>
+                      Pedal velocity & torque effectiveness
+                    </div>
+                  </div>
+                </div>
+
+                {/* Architecture Block 2 */}
+                <div className="apple-card p-6 bg-white border border-black/5">
+                  <div className="flex items-center justify-between mb-3">
+                    <div className="flex items-center gap-2.5 text-[#0071E3]">
+                      <Cpu className="w-5 h-5" />
+                      <h4 className="font-bold text-base text-[#1D1D1F]">2. Local Biometric Edge AI Engine</h4>
+                    </div>
+                    <span className="text-[10px] font-mono font-bold px-2.5 py-1 rounded-full bg-[#0071E3]/10 text-[#0071E3]">&lt;20ms Execution Latency</span>
+                  </div>
+                  <p className="text-xs text-[#515154] leading-relaxed mb-3">
+                    All physiological calculations run on-device via a compiled local C++ math core. The engine evaluates real-time effort against pre-cached FTP parameters, target interval profiles, and 3D elevation topology maps.
+                  </p>
+                  <ul className="space-y-1.5 text-xs text-[#515154] pl-2 border-l-2 border-[#0071E3]">
+                    <li>• <strong>Anaerobic Work Capacity ($W'$ Bal):</strong> Continuous differential modeling of $W'$ depletion and recharge rates during VO2Max and anaerobic efforts.</li>
+                    <li>• <strong>Aerobic Decoupling & Cardiac Drift:</strong> Evaluates internal physiological strain by cross-correlating HR escalation against steady-state power output.</li>
+                    <li>• <strong>Terrain Gradient Anticipation:</strong> Cross-references GPS velocity vectors with cached GPX altitude matrices to prompt optimal gear shifts before gradients increase.</li>
+                  </ul>
+                </div>
+
+                {/* Architecture Block 3 */}
+                <div className="apple-card p-6 bg-white border border-black/5">
+                  <div className="flex items-center justify-between mb-3">
+                    <div className="flex items-center gap-2.5 text-[#0071E3]">
+                      <Volume2 className="w-5 h-5" />
+                      <h4 className="font-bold text-base text-[#1D1D1F]">3. Low-Latency DSP & Audio Ducking Subsystem</h4>
+                    </div>
+                    <span className="text-[10px] font-mono font-bold px-2.5 py-1 rounded-full bg-[#0071E3]/10 text-[#0071E3]">CoreAudio / AudioTrack API</span>
+                  </div>
+                  <p className="text-xs text-[#515154] leading-relaxed mb-3">
+                    Delivers concise, non-intrusive voice directives through open-ear bone-conduction transducers. The audio pipeline intercepts native media sessions to duck background music dynamically during coaching events.
+                  </p>
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs text-[#515154]">
+                    <div className="p-3 bg-[#F5F5F7] rounded-xl">
+                      <span className="font-bold text-[#1D1D1F] block mb-1">Acoustic Transducer Drivers</span>
+                      26-gram ear-canal-free body designed for aerodynamic helmet strap alignment and zero ear occlusion.
+                    </div>
+                    <div className="p-3 bg-[#F5F5F7] rounded-xl">
+                      <span className="font-bold text-[#1D1D1F] block mb-1">Dynamic Audio Ducking</span>
+                      Smoothly attenuates ambient media volume (Spotify/Podcasts) by 12dB prior to coaching transmission.
+                    </div>
+                  </div>
+                </div>
+
+                {/* Architecture Block 4 */}
+                <div className="apple-card p-6 bg-white border border-black/5">
+                  <div className="flex items-center justify-between mb-3">
+                    <div className="flex items-center gap-2.5 text-[#0071E3]">
+                      <Database className="w-5 h-5" />
+                      <h4 className="font-bold text-base text-[#1D1D1F]">4. Resilient Offline Caching & Cloud Synchronization</h4>
+                    </div>
+                    <span className="text-[10px] font-mono font-bold px-2.5 py-1 rounded-full bg-[#0071E3]/10 text-[#0071E3]">TLS 1.3 REST / OAuth2</span>
+                  </div>
+                  <p className="text-xs text-[#515154] leading-relaxed mb-3">
+                    When a ride concludes, encrypted SQLite telemetry logs sync to Alphanome.AI cloud infrastructure to update chronic training load (CTL) models and trigger direct webhooks to connected platforms.
+                  </p>
+                  <div className="flex flex-wrap gap-2 text-[11px] font-semibold text-[#1D1D1F]">
+                    <span className="px-3 py-1 bg-[#F5F5F7] rounded-lg border border-black/5">Strava v3 API</span>
+                    <span className="px-3 py-1 bg-[#F5F5F7] rounded-lg border border-black/5">Intervals.icu REST</span>
+                    <span className="px-3 py-1 bg-[#F5F5F7] rounded-lg border border-black/5">TrainingPeaks Connect</span>
+                    <span className="px-3 py-1 bg-[#F5F5F7] rounded-lg border border-black/5">Garmin Health API</span>
+                  </div>
+                </div>
+              </div>
+
+              <div className="mt-8 pt-4 border-t border-black/10 flex items-center justify-between">
+                <span className="text-[10px] font-mono text-[#86868B]">Alphanome.AI Proprietary Architecture &copy; {YEAR}</span>
+                <button 
+                  id="btn-close-arch-spec"
+                  type="button"
+                  onClick={() => setShowArchitectureModal(false)}
+                  className="bg-[#0071E3] text-white text-xs font-semibold px-6 py-2.5 rounded-full hover:bg-[#0077ED] transition-colors touch-manipulation"
+                >
+                  Close Specification
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* SCIENTIFIC RESEARCH & PAPERS OVERVIEW MODAL */}
+        {showScienceModal && (
+          <div className="fixed inset-0 z-[200] bg-black/60 backdrop-blur-md flex items-center justify-center p-4">
+            <div className="bg-[#F5F5F7] rounded-3xl p-6 sm:p-8 max-w-4xl w-full max-h-[88vh] overflow-y-auto relative text-[#1D1D1F] border border-black/10 shadow-2xl">
+              <button 
+                id="close-science-modal"
+                type="button"
+                onClick={() => setShowScienceModal(false)} 
+                className="absolute top-5 right-5 text-gray-500 hover:text-black p-2 rounded-full bg-white border border-black/5 touch-manipulation"
+              >
+                <X className="w-5 h-5" />
+              </button>
+
+              <div className="flex items-center gap-3 mb-2">
+                <div className="p-2.5 bg-[#0071E3] text-white rounded-xl">
+                  <BookOpen className="w-6 h-6" />
+                </div>
+                <div>
+                  <h3 className="text-2xl font-extrabold text-[#1D1D1F]">Scientific Research & Whitepapers</h3>
+                  <span className="text-xs font-mono font-bold text-[#0071E3] uppercase tracking-wider">Alphanome.AI Endurance Publications</span>
+                </div>
+              </div>
+
+              <p className="text-xs text-[#86868B] mb-8 leading-relaxed max-w-2xl">
+                Discover the physiological research, cognitive load studies, and acoustic safety frameworks that power the Domestique.live real-time AI coaching engine.
+              </p>
+
+              <div className="space-y-6">
+                {RESEARCH_PAPERS.map((paper, idx) => (
+                  <div key={paper.title} className="apple-card p-6 bg-white border border-black/5 flex flex-col justify-between">
+                    <div>
+                      <div className="flex items-center justify-between mb-2">
+                        <span className="text-[10px] font-mono font-bold px-2.5 py-1 rounded-full bg-[#0071E3]/10 text-[#0071E3]">
+                          Paper 0{idx + 1} — {paper.tag}
+                        </span>
+                      </div>
+
+                      <h4 className="font-extrabold text-base text-[#1D1D1F] mb-3 leading-snug">
+                        {paper.title}
+                      </h4>
+
+                      <p className="text-xs text-[#515154] leading-relaxed mb-4">
+                        {paper.summary}
+                      </p>
+                    </div>
+
+                    <div className="pt-3 border-t border-black/5 flex justify-end">
+                      <a 
+                        id={`link-research-paper-${idx}`}
+                        href={paper.url} 
+                        target="_blank" 
+                        rel="noreferrer"
+                        className="inline-flex items-center gap-2 text-xs font-bold text-[#0071E3] hover:underline touch-manipulation"
+                      >
+                        Read Full Article on Alphanome.AI <ExternalLink className="w-3.5 h-3.5" />
+                      </a>
+                    </div>
+                  </div>
+                ))}
+              </div>
+
+              <div className="mt-8 pt-4 border-t border-black/10 flex items-center justify-between">
+                <span className="text-[10px] font-mono text-[#86868B]">Alphanome.AI Research Series &copy; {YEAR}</span>
+                <button 
+                  id="btn-close-science-modal"
+                  type="button"
+                  onClick={() => setShowScienceModal(false)}
+                  className="bg-[#0071E3] text-white text-xs font-semibold px-6 py-2.5 rounded-full hover:bg-[#0077ED] transition-colors touch-manipulation"
+                >
+                  Close Research
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* FULL DETAILED POLICY MODAL */}
+        {activePolicy && (
+          <div className="fixed inset-0 z-[200] bg-black/60 backdrop-blur-md flex items-center justify-center p-4">
+            <div className="bg-[#F5F5F7] rounded-3xl p-6 sm:p-10 max-w-4xl w-full max-h-[88vh] overflow-y-auto relative text-[#1D1D1F] border border-black/10 shadow-2xl">
+              <button 
+                id="close-policy-modal"
+                type="button"
+                onClick={() => setActivePolicy(null)} 
+                className="absolute top-5 right-5 text-gray-500 hover:text-black p-2 rounded-full bg-white border border-black/5 touch-manipulation"
+              >
+                <X className="w-5 h-5" />
+              </button>
+
+              {/* RETURN & REFUND POLICY CONTENT */}
+              {activePolicy === 'return' && (
+                <div className="space-y-6 text-xs text-[#515154] leading-relaxed">
+                  <div className="border-b border-black/10 pb-4 mb-6">
+                    <span className="text-xs font-mono font-bold text-[#0071E3] uppercase tracking-wider block mb-1">Consumer Protection</span>
+                    <h2 className="text-2xl sm:text-3xl font-extrabold text-[#1D1D1F] tracking-tight">RETURN & REFUND POLICY</h2>
+                    <p className="text-[11px] font-mono text-[#86868B] mt-1">Effective Date: July 22, 2026</p>
+                  </div>
+
+                  <p className="text-sm text-[#1D1D1F]">
+                    At Domestique.live (a project of Alphanome.AI, Geneva, Switzerland), we want you to support our vision with total peace of mind. We stand behind our hardware, intelligence layer, and gear, which is why we offer a risk-free pre-order experience and standard post-delivery consumer protections.
+                  </p>
+
+                  <div className="apple-card p-5 bg-white border border-black/5 space-y-3">
+                    <h3 className="font-bold text-sm text-[#1D1D1F]">1. Pre-Order Guarantee: No-Questions-Asked Refunds</h3>
+                    <p>We understand that development timelines and personal circumstances change.</p>
+                    <p><strong className="text-[#1D1D1F]">100% Refundable:</strong> All purchases, tier pre-orders, and reservations made during the pre-order stage can be canceled and refunded in full, no questions asked, at any time until the official product release and dispatch date (Q1 2027).</p>
+                    <p><strong className="text-[#1D1D1F]">How to Cancel:</strong> Simply send an email to <a href="mailto:info@domestique.live" className="text-[#0071E3] font-semibold">info@domestique.live</a> with your order number or confirmation details.</p>
+                    <p><strong className="text-[#1D1D1F]">Processing:</strong> Refunds will be credited back to your original payment method (via Stripe) within 3–5 business days. No processing or cancellation fees apply.</p>
+                  </div>
+
+                  <div className="apple-card p-5 bg-white border border-black/5 space-y-3">
+                    <h3 className="font-bold text-sm text-[#1D1D1F]">2. Post-Release Returns (After Dispatch)</h3>
+                    <p>Once your hardware unit or merchandise has been delivered following official release, standard return rights apply:</p>
+                    <p><strong className="text-[#1D1D1F]">30-Day Evaluation Period:</strong> You have 30 calendar days from the date of delivery to initiate a return.</p>
+                    <p><strong className="text-[#1D1D1F]">Condition of Goods:</strong> To be eligible for a post-delivery refund:</p>
+                    <ul className="list-disc pl-5 space-y-1">
+                      <li>Hardware units, accessories, and bone-conduction headsets must be in their original packaging, complete with all cables, user guides, and components.</li>
+                      <li>Founder's apparel (jerseys, bib shorts, caps, gloves) must be unworn, unwashed, and returned with original tags intact.</li>
+                    </ul>
+                    <p><strong className="text-[#1D1D1F]">Return Authorization:</strong> Before shipping items back, please email <a href="mailto:info@domestique.live" className="text-[#0071E3] font-semibold">info@domestique.live</a> to receive a Return Merchandise Authorization (RMA) label and designated return address.</p>
+                  </div>
+
+                  <div className="apple-card p-5 bg-white border border-black/5 space-y-3">
+                    <h3 className="font-bold text-sm text-[#1D1D1F]">3. Refunds & Payment Processing</h3>
+                    <p><strong className="text-[#1D1D1F]">Pre-Order Stage:</strong> 100% of the transaction amount (including taxes/fees) is refunded directly to the payment card used at checkout.</p>
+                    <p><strong className="text-[#1D1D1F]">Post-Delivery Stage:</strong> Once your returned item is received and inspected at our fulfillment facility, a refund will be issued to your original payment method within 5–7 business days.</p>
+                    <p><strong className="text-[#1D1D1F]">Return Shipping Fees:</strong> For post-delivery returns driven by personal preference, customers are responsible for return freight costs unless the item is defective or shipped in error.</p>
+                  </div>
+
+                  <div className="apple-card p-5 bg-white border border-black/5 space-y-3">
+                    <h3 className="font-bold text-sm text-[#1D1D1F]">4. Warranty & Defective Products</h3>
+                    <p>All Domestique.live hardware units come with a 2-Year Limited Manufacturer Warranty covering electronic, acoustic, and structural defects.</p>
+                    <p>If your hardware fails to perform, encounters technical faults, or arrives damaged, we will repair or replace your unit at zero cost to you. Contact <a href="mailto:info@domestique.live" className="text-[#0071E3] font-semibold">info@domestique.live</a> for immediate troubleshooting and warranty replacements.</p>
+                  </div>
+
+                  <div className="pt-2 text-[11px] text-[#86868B]">
+                    <strong>Contact Us:</strong> <a href="mailto:info@domestique.live" className="text-[#0071E3]">info@domestique.live</a> | Parent Company: Alphanome.AI, Geneva, Switzerland
+                  </div>
+                </div>
+              )}
+
+              {/* SHIPPING POLICY CONTENT */}
+              {activePolicy === 'shipping' && (
+                <div className="space-y-6 text-xs text-[#515154] leading-relaxed">
+                  <div className="border-b border-black/10 pb-4 mb-6">
+                    <span className="text-xs font-mono font-bold text-[#0071E3] uppercase tracking-wider block mb-1">Global Logistics</span>
+                    <h2 className="text-2xl sm:text-3xl font-extrabold text-[#1D1D1F] tracking-tight">SHIPPING POLICY</h2>
+                    <p className="text-[11px] font-mono text-[#86868B] mt-1">Effective Date: July 22, 2026</p>
+                  </div>
+
+                  <p className="text-sm text-[#1D1D1F]">
+                    At Domestique.live (a brand under Alphanome.AI, Geneva, Switzerland), we are committed to providing a seamless experience for cyclists worldwide. This Shipping Policy outlines our fulfillment terms, delivery expectations, and shipping protocols for all hardware units and physical merchandise.
+                  </p>
+
+                  <div className="apple-card p-5 bg-white border border-black/5 space-y-3">
+                    <h3 className="font-bold text-sm text-[#1D1D1F]">1. Free Global Shipping</h3>
+                    <p>We believe premium cycling technology should be accessible everywhere. We are proud to offer 100% Free Standard Global Shipping on all orders, including:</p>
+                    <ul className="list-disc pl-5 space-y-1">
+                      <li>Domestique.live Hardware Units (standalone or tier packages)</li>
+                      <li>Pre-order Founder’s Apparel & Gear</li>
+                      <li>Replacement hardware accessories</li>
+                    </ul>
+                    <p>There are no hidden freight charges or delivery fees applied at checkout.</p>
+                  </div>
+
+                  <div className="apple-card p-5 bg-white border border-black/5 space-y-3">
+                    <h3 className="font-bold text-sm text-[#1D1D1F]">2. Pre-Orders & Production Timeline (Q1 2027 Series)</h3>
+                    <p>Because Domestique.live hardware is produced in dedicated limited-run batches, please note the following fulfillment details for pre-orders:</p>
+                    <p><strong className="text-[#1D1D1F]">Estimated Fulfillment Window:</strong> Orders placed under the Q1 2027 Founder's Series are scheduled for dispatch during Q1 2027.</p>
+                    <p><strong className="text-[#1D1D1F]">Batch Tracking:</strong> Once your unit enters final assembly and packaging, you will receive email updates regarding your specific batch dispatch schedule.</p>
+                    <p><strong className="text-[#1D1D1F]">Address Updates:</strong> You may update your shipping destination anytime prior to final dispatch by contacting our support team at <a href="mailto:info@domestique.live" className="text-[#0071E3] font-semibold">info@domestique.live</a>.</p>
+                  </div>
+
+                  <div className="apple-card p-5 bg-white border border-black/5 space-y-3">
+                    <h3 className="font-bold text-sm text-[#1D1D1F]">3. Shipping Methods & Estimated Delivery Times</h3>
+                    <p>Once your package is processed and handed to our international carrier partners (e.g., DHL Express, FedEx, or national postal services), estimated transit times are as follows:</p>
+                    
+                    <div className="overflow-x-auto rounded-xl border border-black/10 my-3">
+                      <table className="w-full text-left border-collapse">
+                        <thead>
+                          <tr className="bg-[#1D1D1F] text-white text-[11px] uppercase font-bold">
+                            <th className="p-3 border-r border-white/10">Destination / Region</th>
+                            <th className="p-3">Estimated Transit Time (After Dispatch)</th>
+                          </tr>
+                        </thead>
+                        <tbody className="divide-y divide-black/10 bg-[#F5F5F7]">
+                          <tr>
+                            <td className="p-3 font-semibold border-r border-black/5">Switzerland & European Union (EU)</td>
+                            <td className="p-3">3 – 5 Business Days</td>
+                          </tr>
+                          <tr>
+                            <td className="p-3 font-semibold border-r border-black/5">United Kingdom & North America</td>
+                            <td className="p-3">5 – 8 Business Days</td>
+                          </tr>
+                          <tr>
+                            <td className="p-3 font-semibold border-r border-black/5">Asia-Pacific & Rest of World</td>
+                            <td className="p-3">7 – 12 Business Days</td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </div>
+                    <p className="text-[10px] text-[#86868B]">Note: Delivery estimates do not account for potential customs processing delays at destination borders.</p>
+                  </div>
+
+                  <div className="apple-card p-5 bg-white border border-black/5 space-y-3">
+                    <h3 className="font-bold text-sm text-[#1D1D1F]">4. Order Tracking</h3>
+                    <p>As soon as your order is dispatched, a Shipment Confirmation Email will be sent containing your unique tracking code and a direct link to the carrier’s portal. Please allow up to 24–48 hours for tracking activity to register in the carrier’s system.</p>
+                  </div>
+
+                  <div className="apple-card p-5 bg-white border border-black/5 space-y-3">
+                    <h3 className="font-bold text-sm text-[#1D1D1F]">5. Customs, Duties & Import Taxes</h3>
+                    <p><strong className="text-[#1D1D1F]">European Union, Switzerland & UK:</strong> Applicable local Value Added Tax (VAT) is calculated and disclosed in accordance with regional consumer laws.</p>
+                    <p><strong className="text-[#1D1D1F]">International Destinations (Rest of World):</strong> Packages are shipped DDU (Delivered Duty Unpaid) unless otherwise explicitly stated. Any local import duties, tariffs, or governmental customs fees levied upon entry into your country remain the responsibility of the recipient.</p>
+                  </div>
+
+                  <div className="apple-card p-5 bg-white border border-black/5 space-y-3">
+                    <h3 className="font-bold text-sm text-[#1D1D1F]">6. Damaged, Lost, or Delayed Shipments</h3>
+                    <p>We take full responsibility for ensuring your hardware arrives safely.</p>
+                    <p><strong className="text-[#1D1D1F]">Damaged in Transit:</strong> If your package arrives visibly damaged or tampered with, please take photos immediately and contact <a href="mailto:info@domestique.live" className="text-[#0071E3] font-semibold">info@domestique.live</a> within 7 days of delivery. We will arrange a replacement unit at no cost.</p>
+                    <p><strong className="text-[#1D1D1F]">Lost Packages:</strong> If your tracking status shows no movement for more than 14 business days, please report it to us. We will initiate an official carrier investigation and replace lost units accordingly.</p>
+                  </div>
+
+                  <div className="pt-2 text-[11px] text-[#86868B]">
+                    <strong>Contact Us:</strong> <a href="mailto:info@domestique.live" className="text-[#0071E3]">info@domestique.live</a> | Parent Company: Alphanome.AI, Geneva, Switzerland
+                  </div>
+                </div>
+              )}
+
+              {/* PRIVACY POLICY CONTENT */}
+              {activePolicy === 'privacy' && (
+                <div className="space-y-6 text-xs text-[#515154] leading-relaxed">
+                  <div className="border-b border-black/10 pb-4 mb-6">
+                    <span className="text-xs font-mono font-bold text-[#0071E3] uppercase tracking-wider block mb-1">Data Governance</span>
+                    <h2 className="text-2xl sm:text-3xl font-extrabold text-[#1D1D1F] tracking-tight">PRIVACY POLICY</h2>
+                    <p className="text-[11px] font-mono text-[#86868B] mt-1">Last Updated: July 22, 2026</p>
+                  </div>
+
+                  <div className="apple-card p-5 bg-white border border-black/5 space-y-3">
+                    <h3 className="font-bold text-sm text-[#1D1D1F]">1. Introduction & Data Controller</h3>
+                    <p>Welcome to Domestique.live. Domestique.live is a project and brand operated by Alphanome.AI, a company registered in Geneva, Switzerland (referred to as "Alphanome.AI", "we", "us", or "our").</p>
+                    <p>We are committed to protecting your privacy and handling your personal data with transparency and care. This Privacy Policy explains how we collect, use, process, and safeguard your information when you visit <a href="https://domestique.live" target="_blank" rel="noreferrer" className="text-[#0071E3]">https://domestique.live</a>, purchase our products, or use our hardware, application, and real-time audio coaching services (collectively, the "Services").</p>
+                    <p><strong className="text-[#1D1D1F]">Contact Information / Data Controller:</strong><br />
+                    Company Name: Alphanome.AI<br />
+                    Registered Location: Geneva, Switzerland<br />
+                    General Privacy Inquiries: <a href="mailto:info@domestique.live" className="text-[#0071E3]">info@domestique.live</a><br />
+                    Partnerships & Business Data: <a href="mailto:partners@domestique.live" className="text-[#0071E3]">partners@domestique.live</a></p>
+                  </div>
+
+                  <div className="apple-card p-5 bg-white border border-black/5 space-y-3">
+                    <h3 className="font-bold text-sm text-[#1D1D1F]">2. Information We Collect</h3>
+                    <p>We collect information to provide, personalize, and improve our performance intelligence layer for cycling.</p>
+                    
+                    <p><strong className="text-[#1D1D1F]">A. Information You Provide Directly:</strong></p>
+                    <ul className="list-disc pl-5 space-y-1">
+                      <li><strong>Account & Identity Data:</strong> Name, email address, physical address, and communication preferences provided during newsletter subscription, pre-orders, or account creation.</li>
+                      <li><strong>Payment & Financial Data:</strong> Payment card details, billing address, and transaction histories. Payment processing is handled securely by Stripe; we do not directly store full credit card numbers.</li>
+                      <li><strong>Support & Feedback Data:</strong> Information submitted during customer support inquiries.</li>
+                    </ul>
+
+                    <p><strong className="text-[#1D1D1F]">B. Fitness, Sensor & Telemetry Data (App & Hardware Users):</strong></p>
+                    <p>When you connect your cycling sensors or head unit to the Domestique.live application, we process:</p>
+                    <ul className="list-disc pl-5 space-y-1">
+                      <li><strong>Real-Time Biometrics:</strong> Heart rate, power output (watts), cadence, speed, and real-time effort zones.</li>
+                      <li><strong>Location & Routing Data:</strong> GPS coordinates, elevation, route maps, and velocity.</li>
+                      <li><strong>Third-Party Integrations:</strong> Data synced via Bluetooth or connected platforms (Strava, Garmin Connect) with explicit authorization.</li>
+                    </ul>
+
+                    <p><strong className="text-[#1D1D1F]">C. Technical & Automated Collection:</strong></p>
+                    <ul className="list-disc pl-5 space-y-1">
+                      <li><strong>Usage & Analytics Data:</strong> IP address, browser type, operating system, and timestamp logs.</li>
+                      <li><strong>Cookies & Tracking:</strong> Essential cookies ensuring platform functionality and web traffic analysis.</li>
+                    </ul>
+                  </div>
+
+                  <div className="apple-card p-5 bg-white border border-black/5 space-y-3">
+                    <h3 className="font-bold text-sm text-[#1D1D1F]">3. How We Use Your Information</h3>
+                    <ul className="list-disc pl-5 space-y-1">
+                      <li><strong>Service Delivery & Execution:</strong> Processing pre-orders, delivering hardware, and executing real-time AI audio coaching algorithms.</li>
+                      <li><strong>Personalization:</strong> Tailoring voice instructions, pacing strategies, and recovery prompts based on biometric threshold zones.</li>
+                      <li><strong>Communication:</strong> Transaction confirmations, product delivery updates, and technical alerts.</li>
+                      <li><strong>Marketing (Opt-in):</strong> Delivering newsletter insights regarding upcoming production batches or apparel releases.</li>
+                      <li><strong>Security & Integrity:</strong> Monitoring and preventing fraudulent activities under Swiss law.</li>
+                    </ul>
+                  </div>
+
+                  <div className="apple-card p-5 bg-white border border-black/5 space-y-3">
+                    <h3 className="font-bold text-sm text-[#1D1D1F]">4. Legal Basis for Processing</h3>
+                    <p>We process personal data in accordance with the Swiss Federal Act on Data Protection (FADP) and Article 6 of the EU GDPR:</p>
+                    <ul className="list-disc pl-5 space-y-1">
+                      <li><strong>Contractual Necessity:</strong> Required to fulfill pre-order contracts and operate real-time AI services.</li>
+                      <li><strong>Consent:</strong> Explicit opt-ins for marketing newsletters and third-party integrations.</li>
+                      <li><strong>Legitimate Interests:</strong> Maintaining platform security, preventing fraud, and optimizing algorithms.</li>
+                    </ul>
+                  </div>
+
+                  <div className="apple-card p-5 bg-white border border-black/5 space-y-3">
+                    <h3 className="font-bold text-sm text-[#1D1D1F]">5. Information Sharing & Third-Party Service Providers</h3>
+                    <p>We do not sell, rent, or trade your personal data. Data is shared strictly with authorized infrastructure providers:</p>
+                    <ul className="list-disc pl-5 space-y-1">
+                      <li><strong>Payment Processors:</strong> Stripe (secure payment gateway).</li>
+                      <li><strong>Email Providers:</strong> MailerLite (newsletter distribution).</li>
+                      <li><strong>Hosting & Cloud:</strong> Amazon Web Services (AWS) / Cloudflare / Cloudinary.</li>
+                    </ul>
+                  </div>
+
+                  <div className="apple-card p-5 bg-white border border-black/5 space-y-3">
+                    <h3 className="font-bold text-sm text-[#1D1D1F]">6. Your Rights & Regulatory Authorities</h3>
+                    <p>Under Swiss FADP and EU GDPR, you hold rights to access, rectify, erase ("Right to be Forgotten"), restrict, or export your data. Contact <a href="mailto:info@domestique.live" className="text-[#0071E3] font-semibold">info@domestique.live</a> to exercise your rights.</p>
+                    <p>You also have the right to lodge a complaint with the Swiss Federal Data Protection and Information Commissioner (FDPIC):<br />
+                    Feldeggweg 1, CH-3003 Berne, Switzerland | Website: <a href="https://www.edoeb.admin.ch" target="_blank" rel="noreferrer" className="text-[#0071E3]">https://www.edoeb.admin.ch</a></p>
+                  </div>
+
+                  <div className="pt-2 text-[11px] text-[#86868B]">
+                    <strong>Contact Us:</strong> <a href="mailto:info@domestique.live" className="text-[#0071E3]">info@domestique.live</a> | Parent Company: Alphanome.AI, Geneva, Switzerland
+                  </div>
+                </div>
+              )}
+
+              <div className="mt-8 pt-4 border-t border-black/10 flex justify-end">
+                <button 
+                  id="btn-close-active-policy"
+                  type="button"
+                  onClick={() => setActivePolicy(null)}
+                  className="bg-[#0071E3] text-white text-xs font-semibold px-6 py-2.5 rounded-full hover:bg-[#0077ED] transition-colors touch-manipulation"
+                >
+                  Close Policy
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* DISCOUNT MODAL */}
+        {showDiscountPopup && (
+          <div className="fixed inset-0 z-[200] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
+            <div className="bg-white rounded-2xl p-6 max-w-sm w-full text-center relative shadow-2xl">
+              <button id="close-discount-popup" type="button" onClick={() => setShowDiscountPopup(false)} className="absolute top-3 right-3 text-gray-400 touch-manipulation">×</button>
+              <span className="text-xs font-bold text-[#0071E3] uppercase block mb-1">Exclusive Offer</span>
+              <h3 className="text-2xl font-bold mb-2">Claim 25% Off</h3>
+              <p className="text-xs text-[#86868B] mb-4">Use discount code at checkout for your pre-order.</p>
+              <div className="bg-[#F5F5F7] border border-black/10 rounded-xl p-3 mb-4 flex items-center justify-between">
+                <span className="font-mono font-bold text-lg">25OFF</span>
+                <button id="btn-copy-discount-code" type="button" onClick={handleCopyDiscount} className="bg-[#0071E3] text-white text-xs font-semibold px-3 py-1.5 rounded-lg touch-manipulation">
+                  {discountCopied ? 'Copied!' : 'Copy'}
+                </button>
+              </div>
+              <button id="btn-discount-preorder-now" type="button" onClick={() => { setShowDiscountPopup(false); scrollToRef(pricingRef); }} className="w-full bg-[#0071E3] text-white text-xs font-semibold py-3 rounded-xl touch-manipulation">Pre-Order Now</button>
+            </div>
+          </div>
+        )}
+      </div>
+    </HelmetProvider>
+  );
+}
\ No newline at end of file

From e51547f8be3a19172f55c0a5707b04c2c4e71173 Mon Sep 17 00:00:00 2001
From: James Titus <titusjames299@gmail.com>
Date: Thu, 13 Aug 2026 12:41:50 +0530
Subject: [PATCH 4/6] chore: remove file

---
 t.jsx | 1873 ---------------------------------------------------------
 1 file changed, 1873 deletions(-)
 delete mode 100644 t.jsx

diff --git a/t.jsx b/t.jsx
deleted file mode 100644
index 4ded6ac..0000000
--- a/t.jsx
+++ /dev/null
@@ -1,1873 +0,0 @@
-/* ============================================================
-   MODULE-SCOPE CONSTANTS, HELPERS & ANALYTICS
-   ============================================================ */
-
-// Declare in module scope & attach to window to prevent ReferenceError across all execution contexts
-const trackAnalyticsEvent = (eventName, action, data = {}, silent = false) => {
-  try {
-    if (typeof window !== "undefined") {
-      if (typeof window.gtag === "function") {
-        window.gtag("event", action || eventName, data);
-      } else if (typeof window.fbq === "function") {
-        window.fbq("track", eventName, data);
-      } else if (Array.isArray(window.dataLayer)) {
-        window.dataLayer.push({ event: eventName, action, ...data });
-      }
-    }
-  } catch (e) {
-    // Fail silently in development or sandbox environments
-  }
-};
-
-if (typeof window !== "undefined") {
-  window.trackAnalyticsEvent = trackAnalyticsEvent;
-}
-
-const YEAR = new Date().getFullYear();
-
-const cld = (url, w = 800) => {
-  if (!url || typeof url !== "string") return url;
-  if (!url.includes("/image/upload/")) return url;
-  return url.replace("/image/upload/", `/image/upload/f_auto,q_auto,w_${w}/`);
-};
-
-// BRANDING & ASSET URLS
-const LOGO_ICON_URL = "https://imagedelivery.net/O-X2p33aPnIKIdnqc35LFA/e7060ec5-dfe9-47aa-3b9d-1afe5ff14500/public";
-const HERO_BACKGROUND_ICON_URL = "https://imagedelivery.net/O-X2p33aPnIKIdnqc35LFA/6925fb42-97ee-4e23-6b7e-aub77fa55800/public";
-const TEAM_PHOTO_URL = "https://imagedelivery.net/O-X2p33aPnIKIdnqc35LFA/f6af7456-3e61-4a44-c279-7bfa47cad400/public";
-const NEW_STRAVA_LOGO = "https://imagedelivery.net/O-X2p33aPnIKIdnqc35LFA/3f62b5a5-6bf0-4c41-f462-5b90f10aa100/public";
-
-// GLOBAL LIGHT APPLE-STYLE CSS
-const GLOBAL_CSS = `
-  :root {
-    --safe-top: env(safe-area-inset-top, 0px);
-    --safe-bottom: env(safe-area-inset-bottom, 0px);
-  }
-
-  html {
-    scroll-behavior: smooth;
-  }
-
-  body {
-    -webkit-tap-highlight-color: transparent;
-    background-color: #F5F5F7;
-    color: #1D1D1F;
-    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Inter", sans-serif;
-  }
-
-  section {
-    scroll-margin-top: 80px;
-  }
-
-  .font-mono { font-family: 'JetBrains Mono', monospace; }
-  .font-manrope { font-family: 'Manrope', sans-serif; }
-  
-  .hide-scrollbar::-webkit-scrollbar { display: none; }
-  .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
-
-  .apple-card {
-    background: #FFFFFF;
-    border: 1px solid rgba(0, 0, 0, 0.08);
-    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
-    border-radius: 24px;
-  }
-
-  .apple-glass {
-    background: rgba(255, 255, 255, 0.88);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-  }
-
-  .hero-mesh-bg {
-    background-image: 
-      radial-gradient(circle at 50% 20%, rgba(0, 113, 227, 0.08) 0%, transparent 60%),
-      radial-gradient(circle at 80% 80%, rgba(0, 113, 227, 0.04) 0%, transparent 50%),
-      radial-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 0);
-    background-size: 100% 100%, 100% 100%, 24px 24px;
-  }
-`;
-const GLOBAL_CSS_HTML = { __html: GLOBAL_CSS };
-
-// ECOSYSTEM PARTNER LOGOS
-const PARTNER_LOGOS = [
-  { name: "Strava", logo: "https://imagedelivery.net/O-X2p33aPnIKIdnqc35LFA/3f62b5a5-6bf0-4c41-f462-5b90f10aa100/public" },
-  { name: "Garmin", logo: "https://imagedelivery.net/O-X2p33aPnIKIdnqc35LFA/2d62241d-5772-45b6-1d8b-e8d7824b9700/public" },
-  { name: "Wahoo", logo: "https://imagedelivery.net/O-X2p33aPnIKIdnqc35LFA/5a377286-2b4f-44f4-7a5a-7d68d83acb00/public" },
-  { name: "Intervals.icu", logo: "https://imagedelivery.net/O-X2p33aPnIKIdnqc35LFA/1a3df848-0e2e-4ee8-f085-2af1a3de3f00/public" },
-  { name: "TrainingPeaks", logo: "https://imagedelivery.net/O-X2p33aPnIKIdnqc35LFA/62493290-aa25-4b4e-ebf2-85ecee52d700/public" },
-  { name: "Join.cc", logo: "https://imagedelivery.net/O-X2p33aPnIKIdnqc35LFA/e2956a2c-bf20-4737-fd1b-4b74a225ee00/public" },
-  { name: "Zwift", logo: "https://imagedelivery.net/O-X2p33aPnIKIdnqc35LFA/6a708b40-5084-4fa7-cdaf-6a9ace4de300/public" },
-  { name: "TrainerRoad", logo: "https://imagedelivery.net/O-X2p33aPnIKIdnqc35LFA/3b457199-567a-4823-ab70-598116f24600/public" }
-];
-
-const APPAREL_SLIDES = [
-  { title: "Domestique.live Cycling Jersey", img: cld("https://res.cloudinary.com/ddbxywpjr/image/upload/v1782984468/tshirt_salpoy.png", 600) },
-  { title: "Domestique.live Cycling Short", img: cld("https://res.cloudinary.com/ddbxywpjr/image/upload/v1782984468/shorts_bygnkw.png", 600) },
-  { title: "Domestique.live Leg Sleeves", img: cld("https://res.cloudinary.com/ddbxywpjr/image/upload/v1782984468/leg_sleves_zizrer.png", 600) },
-  { title: "Domestique.live Ride Gloves", img: cld("https://res.cloudinary.com/ddbxywpjr/image/upload/v1782984467/gloves_jcexrx.png", 600) },
-  { title: "Domestique.live Cap", img: cld("https://res.cloudinary.com/ddbxywpjr/image/upload/v1782984467/cap_tu2hvd.png", 600) },
-];
-
-const FEATURES = [
-  { 
-    id: "01", 
-    title: "Adaptive Push", 
-    video: "https://res.cloudinary.com/ddbxywpjr/video/upload/v1781515380/PERFORMANCE_RIDE_hiplyg.mp4", 
-    quote: "Heart rate rising but power is dropping. Maintain effort.",
-    whyItMatters: "Post-ride analysis only tells you that you faded. Real-time audio catches fatigue mid-interval, giving you the micro-adjustment needed to finish the set cleanly."
-  },
-  { 
-    id: "02", 
-    title: "Pacing & Group Rides", 
-    video: "https://res.cloudinary.com/ddbxywpjr/video/upload/v1781515364/GROUP_RIDE_1_yxjgtb.mp4", 
-    quote: "Pacing optimal for this break. Hold current output.",
-    whyItMatters: "Stop getting baited into burning matches early on group rides. Your digital coach calculates your threshold headroom live so you stay fresh for the final sprint."
-  },
-  { 
-    id: "03", 
-    title: "Live Course Routing", 
-    video: "https://res.cloudinary.com/ddbxywpjr/video/upload/v1781515350/SIGHTSEEING_1_wskvbo.mp4", 
-    quote: "Climb starting in 200 meters. Shift gears and settle into Zone 3.",
-    whyItMatters: "Eliminates surprise gradient shifts. You hear gear and cadence cues ahead of terrain changes so you hit climbs with optimal momentum."
-  },
-  { 
-    id: "04", 
-    title: "Threshold Protection", 
-    video: "https://res.cloudinary.com/ddbxywpjr/video/upload/v1781515388/COMMUTE_RIDE_1_dys5hm.mp4", 
-    quote: "Over-pacing detected on early slope. Ease off 15 watts to save legs.",
-    whyItMatters: "Preventing a blowout beat-by-beat is 10x more valuable than reading a red graph on Strava 2 hours later."
-  },
-  { 
-    id: "05", 
-    title: "Active Recovery", 
-    video: "https://res.cloudinary.com/ddbxywpjr/video/upload/v1781515384/coffee_ride_la0byt.mp4", 
-    poster: "https://res.cloudinary.com/ddbxywpjr/video/upload/v1781515384/coffee_ride_la0byt.jpg", 
-    quote: "Great interval block. Drop to Zone 2 and recover for 3 minutes.",
-    whyItMatters: "Optimizes rest periods between efforts so you clear lactate efficiently and hit the next rep at maximum target wattage."
-  },
-  { 
-    id: "06", 
-    title: "Zone Control", 
-    video: "https://res.cloudinary.com/ddbxywpjr/video/upload/v1782300028/full_video_1_wjqxd6.mp4", 
-    quote: "You are drifting into Zone 4 prematurely. Dial back cadence.",
-    whyItMatters: "Ensures Zone 2 rides actually stay in Zone 2. Protects your physiological adaptations from accidental over-exertion."
-  }
-];
-
-const PRODUCT_IMAGES = [
-  "https://res.cloudinary.com/ddbxywpjr/image/upload/v1779102005/Home_Pgae_img_nt6cwl.png",
-  "https://res.cloudinary.com/ddbxywpjr/image/upload/v1779102372/card-2_whrzwh.png",
-  "https://res.cloudinary.com/ddbxywpjr/image/upload/v1779102373/card-3_lnse1m.png",
-  "https://res.cloudinary.com/ddbxywpjr/image/upload/v1779102372/card-4_n2g3e3.png"
-];
-
-const HERO_SLOGANS = [
-  "LOOK AT THE ROAD. LISTEN TO THE COACH.",
-  "STOP WAITING FOR POST-RIDE ANALYTICS.",
-  "MID-RIDE GUIDANCE, NOT POST-MORTEMS.",
-  "YOUR DIGITAL DOMESTIQUE IN YOUR EAR.",
-  "MAKE THE MOST OF EVERY TRAINING RIDE."
-];
-
-const FLOW_STEPS = [
-  { step: "01", icon: Compass, title: "Pre-Ride Target Sync", desc: "Open Domestique.live. It imports your planned workout or route, creating target zone parameters before you clip in." },
-  { step: "02", icon: Gauge, title: "Live Sensor Feed", desc: "Your Bluetooth power meter, heart rate monitor, and cadence sensors stream telemetry directly into our edge engine." },
-  { step: "03", icon: Volume2, title: "Open-Ear Bone Conduction", desc: "Lightweight audio sits cleanly on your cheekbones. You hear ambient traffic, your friends, and crisp voice coaching." },
-  { step: "04", icon: Cpu, title: "Real-Time Adaptations", desc: "Our engine continuously compares live output against target wattage, adjusting coaching based on real-time fatigue." },
-  { step: "05", icon: Zap, title: "In-Ride Execution", desc: "Immediate audio cues tell you when to push, when to recover, and how to complete intervals at maximum quality." }
-];
-
-const SETUP_ITEMS = ["Domestique Hardware Unit", "12-Month Intelligence License", "Magnetic Rapid-Charge Cable", "Ecosystem Integration Guide"];
-
-const TABLE_ECOSYSTEM_DATA = [
-  {
-    tool: "Garmin & Wahoo",
-    category: "GPS Bike Computers",
-    icon: Smartphone,
-    legacyApproach: "Shows numbers on glass screens that require you to constantly glance down at speed.",
-    domestiqueApproach: "Reads Bluetooth streams live and delivers voice coaching without taking eyes off the road."
-  },
-  {
-    tool: "Strava & Intervals.icu",
-    category: "Post-Ride Analytics",
-    icon: Activity,
-    legacyApproach: "Provides post-mortem graphs telling you why you blew up 2 hours after your ride finishes.",
-    domestiqueApproach: "Intervenes mid-effort before you hit the wall, calculating live threshold headroom."
-  },
-  {
-    tool: "TrainingPeaks & Join.cc",
-    category: "Training Calendars",
-    icon: Award,
-    legacyApproach: "Creates structured calendar workouts, but leaves real-world pacing execution up to memory.",
-    domestiqueApproach: "Executes your workout step-by-step on open roads with precise voice-guided interval timing."
-  },
-  {
-    tool: "Zwift & TrainerRoad",
-    category: "Indoor ERG Simulators",
-    icon: Repeat,
-    legacyApproach: "Offers strict indoor ERG-mode control, but provides zero active pacing guidance outdoors.",
-    domestiqueApproach: "Brings structured, adaptive workout execution directly onto dynamic real-world outdoor terrain."
-  }
-];
-
-const RESEARCH_PAPERS = [
-  {
-    title: "The Cognitive, Physiological, and Technological Efficacy of AI-Driven Auditory Coaching in Cycling",
-    url: "https://www.alphanome.ai/post/the-cognitive-physiological-and-technological-efficacy-of-ai-driven-auditory-coaching-in-cycling",
-    tag: "Cognitive Load & Auditory Science",
-    summary: "Examines how voice-based audio instruction significantly reduces cognitive friction and visual distraction compared to handlebar screens, lowering perceived exertion (RPE) during high-threshold intervals."
-  },
-  {
-    title: "The Temporal Dynamics of AI in Endurance Cycling: A Comparative Analysis of Real-Time Auditory Coaching",
-    url: "https://www.alphanome.ai/post/the-temporal-dynamics-of-ai-in-endurance-cycling-a-comparative-analysis-of-real-time-auditory-coach",
-    tag: "Physiological Pacing & W' Bal",
-    summary: "Analyzes the math and physiological benefits of sub-second mid-ride feedback over post-ride data analysis, detailing how real-time W' balance calculations prevent premature anaerobic exhaustion."
-  },
-  {
-    title: "How Wearable ADAS for Cyclists (Advanced Driver Assistance Systems) Prevents Fatalities",
-    url: "https://www.alphanome.ai/post/how-wearable-adas-for-cyclist-advanced-driver-assistance-systems-prevent-vulnerable-road-user-fata",
-    tag: "Acoustic Safety & Open-Ear Hardware",
-    summary: "Explores open-ear acoustic transparency, directional micro-audio cues, and the safety engineering behind keeping the ear canal completely unobstructed while training in dynamic traffic environments."
-  }
-];
-
-const PREORDER_FAQS = [
-  { q: "Will the audio interrupt me constantly during a ride?", a: "Silence is a primary feature. Domestique.live is not a radio DJ; it acts as an experienced digital domestique. It only speaks when a biometric threshold is crossed or an interval target demands adjustment. Otherwise, it leaves you in total peace." },
-  { q: "Why use this instead of a traditional bike computer?", a: "A bike computer requires constant visual glances. Domestique.live works alongside your Garmin or Wahoo to deliver live audio interpretation so you never take your eyes off the road." },
-  { q: "What sensors does the Domestique app support?", a: "It connects directly via Bluetooth to standard power meters, heart rate monitors, and cadence sensors parallel to your existing head unit." },
-  { q: "How is bone-conduction audio better than standard earbuds?", a: "Traditional earbuds trap wind noise and seal off your ears. Open-ear bone conduction transmits acoustic vibrations through your cheekbones, keeping your ear canal 100% open for ambient awareness." },
-  { q: "What happens if I lose cellular service on a remote climb?", a: "The system runs localized edge calculations. Your strategy and route parameters are cached pre-ride, ensuring full live coaching even without cellular signal." },
-  { q: "Will this interfere with my Spotify music or podcasts?", a: "No. Domestique.live utilizes intelligent 'audio ducking'. When the coach speaks, music volume drops smoothly and returns to normal immediately afterward." },
-  { q: "What occurs after the included 12-month license expires?", a: "The live intelligence platform transitions to a standard €15/month subscription. You retain full ownership of your hardware unit." },
-  { q: "How does this differ from Strava or TrainingPeaks?", a: "Strava and TrainingPeaks analyze past workouts. Domestique.live works live during the effort, guiding your output in real time." }
-];
-
-const PRIMARY_PERKS = [
-  {
-    tier: "TIER 1", tag: "PRIORITY ACCESS", name: "THE DOMESTIQUE", price: "€290",
-    featured: false, delivery: "Q1 2027 - First Batch", stripeBuyButtonId: "buy_btn_1Tp94sIVuCvdmBxBbTNIwUQf",
-    includes: ["Domestique.live Hardware Unit", "12-Month Intelligence License", "Closed Beta App Access", "Domestique.live Performance T-Shirt"]
-  },
-  {
-    tier: "TIER 2", tag: "COMPLETE SYSTEM", name: "THE PUNCHEUR", price: "€390",
-    featured: true, delivery: "Q1 2027 - First Batch", stripeBuyButtonId: "buy_btn_1TjmdCIVuCvdmBxBOxo03kE8",
-    includes: ["Everything in The Domestique plus:", "Domestique.live Cycling Jersey", "Domestique.live Cycling Short", "Domestique.live Leg Sleeves"]
-  },
-  {
-    tier: "TIER 3", tag: "LIFETIME VIP", name: "THE DIRECTEUR SPORTIF", price: "€520",
-    featured: false, delivery: "Q1 2027 - First Batch", stripeBuyButtonId: "buy_btn_1TjmkEIVuCvdmBxBiLAtFvU6",
-    includes: ["Everything in The Puncheur plus:", "Domestique.live Ride Gloves", "Domestique.live Cap", "24-Month Extended License", "Lifetime 30% Vanguard Discount"]
-  }
-];
-
-const BATCH_2_PERK = {
-  tier: "BATCH 2 RESERVATION", tag: "SECOND DELIVERY RUN", name: "RESERVE BATCH 2 SPOT", price: "€10",
-  delivery: "Q2 2027 - Second Batch", stripeBuyButtonId: "buy_btn_1TyImOIVuCvdmBxB9SdcXtOw",
-  includes: [
-    "Priority Spot in Q2 2027 Delivery Batch",
-    "Locks in Early Founder Discount Price",
-    "Fully Refundable Deposit Option",
-    "€10 Deposit Credited Toward Final Order"
-  ]
-};
-
-const PERKS_WITH_APPAREL = PRIMARY_PERKS.map((perk) => ({
-  ...perk,
-  apparel: perk.includes
-    .map((title) => {
-      const index = APPAREL_SLIDES.findIndex((s) => s.title === title);
-      return index >= 0 ? { ...APPAREL_SLIDES[index], index } : null;
-    })
-    .filter(Boolean)
-}));
-
-const MAILERLITE_SUBSCRIBE_URL = "https://assets.mailerlite.com/jsonp/2507589/forms/192902572178146649/subscribe";
-
-const TikTokIcon = ({ className }) => (
-  <svg className={className} viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-    <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/>
-  </svg>
-);
-
-const TwitterXIcon = ({ className }) => (
-  <svg className={className} viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
-  </svg>
-);
-
-/* Helper Component: Order Card Trust Bar */
-const CardTrustBadges = React.memo(function CardTrustBadges() {
-  return (
-    <div className="mt-4 pt-3 border-t border-black/5 space-y-2">
-      <div className="flex items-center justify-between text-[11px] text-[#515154] font-medium">
-        <span className="flex items-center gap-1">
-          <Globe className="w-3.5 h-3.5 text-[#0071E3]" /> Free Express Shipping
-        </span>
-        <span className="flex items-center gap-1">
-          <RotateCcw className="w-3.5 h-3.5 text-[#0071E3]" /> 100% Guaranteed
-        </span>
-      </div>
-      <div className="flex items-center justify-center gap-2 pt-1 text-[10px] text-[#86868B]">
-        <Lock className="w-3 h-3 text-[#0071E3]" />
-        <span>256-Bit Encrypted Stripe Checkout</span>
-      </div>
-    </div>
-  );
-});
-
-/* Helper Component: Large D Logo Background Watermark */
-const BackgroundLogoWatermark = React.memo(function BackgroundLogoWatermark() {
-  return (
-    <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none opacity-[0.07] z-0 overflow-hidden">
-      <img src={LOGO_ICON_URL} alt="" className="w-[500px] sm:w-[650px] h-[500px] sm:h-[650px] object-contain" />
-    </div>
-  );
-});
-
-/* Helper function for strictly ref-based smooth scrolling */
-const scrollToRef = (ref) => {
-  if (ref && ref.current) {
-    ref.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
-  }
-};
-
-/* ============================================================
-   NAVIGATION
-   ============================================================ */
-const SiteNavigation = React.memo(function SiteNavigation({ isMobileMenuOpen, setIsMobileMenuOpen, sectionRefs }) {
-  return (
-    <nav className="fixed top-0 left-0 w-full z-[100] apple-glass border-b border-black/5" style={{ paddingTop: 'var(--safe-top)' }}>
-      <div className="max-w-6xl mx-auto h-16 px-4 md:px-8 flex items-center justify-between">
-        <button 
-          id="nav-logo-btn"
-          type="button"
-          className="cursor-pointer flex items-center gap-2.5 group touch-manipulation border-none bg-transparent p-0 text-left" 
-          onClick={() => scrollToRef(sectionRefs.hero)}
-        >
-          <img src={LOGO_ICON_URL} alt="Domestique.live Icon" className="h-8 w-8 object-contain group-hover:scale-105 transition-transform" />
-          <span className="font-semibold tracking-tight text-lg text-[#1D1D1F] font-manrope">Domestique<span className="text-[#0071E3]">.live</span></span>
-        </button>
-
-        <div className="hidden md:flex items-center gap-8 text-sm font-medium text-[#515154]">
-          <button id="nav-btn-coach" type="button" onClick={() => scrollToRef(sectionRefs.coach)} className="hover:text-[#0071E3] transition-colors">Real-Time Coach</button>
-          <button id="nav-btn-flow" type="button" onClick={() => scrollToRef(sectionRefs.flow)} className="hover:text-[#0071E3] transition-colors">How It Works</button>
-          <button id="nav-btn-ecosystem" type="button" onClick={() => scrollToRef(sectionRefs.ecosystem)} className="hover:text-[#0071E3] transition-colors">Ecosystem</button>
-          <button id="nav-btn-hardware" type="button" onClick={() => scrollToRef(sectionRefs.hardware)} className="hover:text-[#0071E3] transition-colors">Hardware</button>
-          <button id="nav-btn-team" type="button" onClick={() => scrollToRef(sectionRefs.team)} className="hover:text-[#0071E3] transition-colors">Our Story</button>
-          <button id="nav-btn-faq" type="button" onClick={() => scrollToRef(sectionRefs.faq)} className="hover:text-[#0071E3] transition-colors">FAQ</button>
-          <button id="nav-btn-community" type="button" onClick={() => scrollToRef(sectionRefs.instagram)} className="hover:text-[#0071E3] transition-colors">Community</button>
-          <button 
-            id="nav-btn-preorder"
-            type="button"
-            onClick={() => {
-              trackAnalyticsEvent('InitiateCheckout', 'begin_checkout', { content_name: 'Nav Pre-Order Button' });
-              scrollToRef(sectionRefs.pricing);
-            }} 
-            className="bg-[#0071E3] text-white hover:bg-[#0077ED] px-5 py-2 rounded-full font-medium transition-all shadow-sm hover:shadow"
-          >
-            Pre-Order Now
-          </button>
-        </div>
-
-        <button id="nav-toggle-mobile" type="button" className="md:hidden p-2 text-[#1D1D1F] touch-manipulation" onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}>
-          {isMobileMenuOpen ? <X className="w-6 h-6"/> : <Menu className="w-6 h-6"/>}
-        </button>
-      </div>
-
-      {isMobileMenuOpen && (
-        <div className="md:hidden apple-glass border-b border-black/10 px-6 py-6 flex flex-col gap-4 font-medium text-lg text-[#1D1D1F] animate-in slide-in-from-top-2">
-          <button id="mobile-nav-coach" type="button" onClick={() => { setIsMobileMenuOpen(false); scrollToRef(sectionRefs.coach); }} className="text-left py-2 border-b border-black/5 touch-manipulation">Real-Time Coach</button>
-          <button id="mobile-nav-flow" type="button" onClick={() => { setIsMobileMenuOpen(false); scrollToRef(sectionRefs.flow); }} className="text-left py-2 border-b border-black/5 touch-manipulation">How It Works</button>
-          <button id="mobile-nav-ecosystem" type="button" onClick={() => { setIsMobileMenuOpen(false); scrollToRef(sectionRefs.ecosystem); }} className="text-left py-2 border-b border-black/5 touch-manipulation">Ecosystem Comparison</button>
-          <button id="mobile-nav-hardware" type="button" onClick={() => { setIsMobileMenuOpen(false); scrollToRef(sectionRefs.hardware); }} className="text-left py-2 border-b border-black/5 touch-manipulation">Hardware</button>
-          <button id="mobile-nav-team" type="button" onClick={() => { setIsMobileMenuOpen(false); scrollToRef(sectionRefs.team); }} className="text-left py-2 border-b border-black/5 touch-manipulation">Our Story & Team</button>
-          <button id="mobile-nav-faq" type="button" onClick={() => { setIsMobileMenuOpen(false); scrollToRef(sectionRefs.faq); }} className="text-left py-2 border-b border-black/5 touch-manipulation">FAQ & Questions</button>
-          <button id="mobile-nav-community" type="button" onClick={() => { setIsMobileMenuOpen(false); scrollToRef(sectionRefs.instagram); }} className="text-left py-2 border-b border-black/5 touch-manipulation">Community & Reels</button>
-          <button 
-            id="mobile-nav-preorder"
-            type="button"
-            onClick={() => {
-              setIsMobileMenuOpen(false);
-              trackAnalyticsEvent('InitiateCheckout', 'begin_checkout', { content_name: 'Mobile Nav Pre-Order Button' });
-              scrollToRef(sectionRefs.pricing);
-            }} 
-            className="bg-[#0071E3] text-white text-center py-3 rounded-xl font-semibold mt-2 touch-manipulation"
-          >
-            Pre-Order Now
-          </button>
-        </div>
-      )}
-    </nav>
-  );
-});
-
-/* ============================================================
-   MAIN SINGLE-PAGE COMPONENT
-   ============================================================ */
-export default function DomestiqueWebsite() {
-  const topRef = useRef(null);
-  
-  /* STRICT SECTION REFS FOR ALL SCROLLING */
-  const heroRef = useRef(null);
-  const coachRef = useRef(null);
-  const flowRef = useRef(null);
-  const ecosystemRef = useRef(null);
-  const hardwareRef = useRef(null);
-  const pricingRef = useRef(null);
-  const teamRef = useRef(null);
-  const faqRef = useRef(null);
-  const instagramRef = useRef(null);
-
-  const sectionRefs = {
-    hero: heroRef,
-    coach: coachRef,
-    flow: flowRef,
-    ecosystem: ecosystemRef,
-    hardware: hardwareRef,
-    pricing: pricingRef,
-    team: teamRef,
-    faq: faqRef,
-    instagram: instagramRef
-  };
-
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-  const [selectedImage, setSelectedImage] = useState(null);
-  const [apparelSliderOpen, setApparelSliderOpen] = useState(false);
-  const [apparelSliderIndex, setApparelSliderIndex] = useState(0);
-
-  // POLICY MODAL STATES ('return' | 'shipping' | 'privacy' | null)
-  const [activePolicy, setActivePolicy] = useState(null);
-
-  const [showDiscountPopup, setShowDiscountPopup] = useState(false);
-  const [discountCopied, setDiscountCopied] = useState(false);
-  const [openFaq, setOpenFaq] = useState(0);
-  const [newsletterStatus, setNewsletterStatus] = useState('idle');
-  const [newsletterError, setNewsletterError] = useState('');
-  const [sloganIndex, setSloganIndex] = useState(0);
-
-  // TECHNICAL ARCHITECTURE & SCIENCE MODAL STATES
-  const [showArchitectureModal, setShowArchitectureModal] = useState(false);
-  const [showScienceModal, setShowScienceModal] = useState(false);
-
-  const [questionSent, setQuestionSent] = useState(false);
-  const [userQuestion, setUserQuestion] = useState({ name: '', email: '', message: '' });
-
-  const featuresScrollRef = useRef(null);
-  const productsScrollRef = useRef(null);
-
-  useEffect(() => {
-    if (!document.getElementById('stripe-buy-button-script')) {
-      const script = document.createElement('script');
-      script.id = 'stripe-buy-button-script';
-      script.src = 'https://js.stripe.com/v3/buy-button.js';
-      script.async = true;
-      document.body.appendChild(script);
-    }
-  }, []);
-
-  useEffect(() => {
-    const sloganTimer = setInterval(() => {
-      setSloganIndex((prev) => (prev + 1) % HERO_SLOGANS.length);
-    }, 3500);
-    return () => clearInterval(sloganTimer);
-  }, []);
-
-  useEffect(() => {
-    trackAnalyticsEvent('PageView', 'page_view');
-  }, []);
-
-  useEffect(() => {
-    const timer = setTimeout(() => setShowDiscountPopup(true), 30000);
-    return () => clearInterval(timer);
-  }, []);
-
-  /* RELIABLE CROSS-PLATFORM CAROUSEL SCROLL MECHANISM */
-  const scrollCarousel = (ref, direction) => {
-    if (ref.current) {
-      const scrollAmount = window.innerWidth < 768 ? Math.round(window.innerWidth * 0.8) : 400;
-      const delta = direction === 'left' ? -scrollAmount : scrollAmount;
-      ref.current.scrollBy({ left: delta, behavior: 'smooth' });
-    }
-  };
-
-  const handleNewsletterSubmit = async (event) => {
-    event.preventDefault();
-    if (newsletterStatus === 'loading') return;
-
-    const form = event.currentTarget;
-    const formData = new FormData(form);
-    const params = new URLSearchParams();
-    formData.forEach((value, key) => params.append(key, String(value)));
-    params.set('ajax', '1');
-
-    setNewsletterStatus('loading');
-    setNewsletterError('');
-
-    try {
-      const response = await fetch(`${MAILERLITE_SUBSCRIBE_URL}?${params.toString()}`, {
-        method: 'GET',
-        headers: { Accept: 'application/json' }
-      });
-      if (!response.ok) throw new Error('Could not subscribe. Please try again.');
-
-      const result = await response.json();
-      if (!result.success) {
-        const emailErrors = result.errors?.fields?.email;
-        throw new Error(Array.isArray(emailErrors) && emailErrors[0] ? emailErrors[0] : 'Could not subscribe.');
-      }
-
-      form.reset();
-      setNewsletterStatus('success');
-      trackAnalyticsEvent('Lead', 'generate_lead', { content_name: 'Newsletter Subscription' });
-    } catch (error) {
-      setNewsletterError(error instanceof Error ? error.message : 'Could not subscribe.');
-      setNewsletterStatus('error');
-    }
-  };
-
-  const handleQuestionSubmit = (e) => {
-    e.preventDefault();
-    setQuestionSent(true);
-    trackAnalyticsEvent('Contact', 'submit_question', { email: userQuestion.email });
-    setTimeout(() => {
-      setQuestionSent(false);
-      setUserQuestion({ name: '', email: '', message: '' });
-    }, 4000);
-  };
-
-  const handleCopyDiscount = () => {
-    if (typeof navigator !== 'undefined' && navigator.clipboard) {
-      navigator.clipboard.writeText("25OFF");
-    }
-    setDiscountCopied(true);
-    trackAnalyticsEvent('Lead', 'generate_lead', { content_name: 'Discount Copied' });
-    setTimeout(() => setDiscountCopied(false), 2000);
-  };
-
-  return (
-    <HelmetProvider>
-      <div ref={topRef} className="bg-[#F5F5F7] text-[#1D1D1F] min-h-screen selection:bg-[#0071E3] selection:text-white">
-        <Helmet>
-          <title>Domestique.live - Real-Time AI Cycling Coach</title>
-          <meta name="description" content="Domestique.live delivers live audio coaching and open-ear bone conduction performance guidance while you ride." />
-          <link rel="preconnect" href="https://fonts.googleapis.com" />
-          <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
-          <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap" />
-        </Helmet>
-        
-        <style dangerouslySetInnerHTML={GLOBAL_CSS_HTML} />
-
-        <SiteNavigation isMobileMenuOpen={isMobileMenuOpen} setIsMobileMenuOpen={setIsMobileMenuOpen} sectionRefs={sectionRefs} />
-
-        {/* HERO SECTION WITH NEW HEADER BACKGROUND IMAGE */}
-        <section ref={heroRef} id="hero" className="hero-mesh-bg relative pt-32 pb-16 md:pt-40 md:pb-24 px-4 sm:px-6 max-w-6xl mx-auto text-center overflow-hidden border-b border-black/5">
-          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none opacity-[0.08] z-0 overflow-hidden">
-            <img src={HERO_BACKGROUND_ICON_URL} alt="" loading="lazy" decoding="async" className="w-[500px] sm:w-[650px] h-[500px] sm:h-[650px] object-contain" />
-          </div>
-
-          <div className="relative z-10">
-            <div className="inline-flex items-center gap-2 bg-white/80 backdrop-blur-md border border-black/10 px-4 py-1.5 rounded-full text-xs font-semibold text-[#0071E3] shadow-sm mb-6">
-              <Radio className="w-3.5 h-3.5 animate-pulse text-[#0071E3]" /> Q1 2027 Founder's Series Open
-            </div>
-
-            <div className="relative h-20 sm:h-28 md:h-32 mb-4 flex items-center justify-center max-w-4xl mx-auto">
-              {HERO_SLOGANS.map((slogan, i) => (
-                <h1
-                  key={slogan}
-                  className={`absolute inset-0 flex items-center justify-center font-extrabold text-3xl sm:text-5xl md:text-6xl tracking-tight text-[#1D1D1F] transition-all duration-700 ease-in-out ${
-                    i === sloganIndex ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4 pointer-events-none'
-                  }`}
-                >
-                  {slogan}
-                </h1>
-              ))}
-            </div>
-
-            <p className="text-lg sm:text-xl md:text-2xl text-[#86868B] max-w-3xl mx-auto leading-relaxed mb-10 font-normal">
-              Post-ride charts show where you failed. <strong className="text-[#1D1D1F] font-semibold">Domestique.live</strong> guides you in real-time. Our open-ear bone conduction headset and AI Digital Domestique deliver voice pacing, interval timing, and recovery cues <span className="underline decoration-[#0071E3] underline-offset-4 font-semibold text-[#1D1D1F]">while you are still pedaling</span>.
-            </p>
-
-            <div className="flex flex-col sm:flex-row items-center justify-center gap-4 max-w-md mx-auto mb-12">
-              <button
-                id="hero-cta-preorder"
-                type="button"
-                onClick={() => {
-                  trackAnalyticsEvent('InitiateCheckout', 'begin_checkout', { content_name: 'Hero Primary CTA' });
-                  scrollToRef(pricingRef);
-                }}
-                className="w-full sm:w-auto bg-[#0071E3] text-white hover:bg-[#0077ED] font-semibold text-base px-8 py-4 rounded-full transition-all shadow-md hover:shadow-lg flex items-center justify-center gap-2 touch-manipulation"
-              >
-                Pre-Order Your Advantage <ArrowRight className="w-4 h-4" />
-              </button>
-              <button
-                id="hero-cta-how-it-works"
-                type="button"
-                onClick={() => scrollToRef(coachRef)}
-                className="w-full sm:w-auto bg-white border border-black/10 hover:border-black/20 text-[#1D1D1F] font-semibold text-base px-8 py-4 rounded-full transition-all touch-manipulation"
-              >
-                How It Works
-              </button>
-            </div>
-
-            {/* HIGH-VISIBILITY CORE PILLARS BANNER */}
-            <div className="max-w-4xl mx-auto apple-card p-6 md:p-8 bg-gradient-to-br from-white via-white to-[#F5F5F7] border-2 border-[#0071E3]/20 shadow-md">
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-                <div className="flex flex-col items-center text-center p-4 rounded-2xl bg-[#F5F5F7]/80 border border-black/5 hover:border-[#0071E3]/30 transition-all">
-                  <div className="p-3 bg-[#0071E3] text-white rounded-2xl mb-3 shadow-sm">
-                    <Volume2 className="w-6 h-6" />
-                  </div>
-                  <h3 className="font-extrabold text-base text-[#1D1D1F] mb-1">Bone Conduction</h3>
-                  <span className="inline-block text-xs font-bold text-[#0071E3] bg-[#0071E3]/10 px-3 py-1 rounded-full uppercase tracking-wider">
-                    100% Open Ears
-                  </span>
-                  <p className="text-xs text-[#86868B] mt-2 leading-relaxed">
-                    Acoustic transducers transmit cues directly through cheekbones, keeping your ear canal totally open for traffic and group chats.
-                  </p>
-                </div>
-
-                <div className="flex flex-col items-center text-center p-4 rounded-2xl bg-[#F5F5F7]/80 border border-black/5 hover:border-[#0071E3]/30 transition-all">
-                  <div className="p-3 bg-[#0071E3] text-white rounded-2xl mb-3 shadow-sm">
-                    <Zap className="w-6 h-6" />
-                  </div>
-                  <h3 className="font-extrabold text-base text-[#1D1D1F] mb-1">Real-Time Pacing</h3>
-                  <span className="inline-block text-xs font-bold text-[#0071E3] bg-[#0071E3]/10 px-3 py-1 rounded-full uppercase tracking-wider">
-                    Zero Screen Distraction
-                  </span>
-                  <p className="text-xs text-[#86868B] mt-2 leading-relaxed">
-                    Spoken target wattages and cadence adjustments mean you keep your eyes strictly on the road, not down at handlebars.
-                  </p>
-                </div>
-
-                <div className="flex flex-col items-center text-center p-4 rounded-2xl bg-[#F5F5F7]/80 border border-black/5 hover:border-[#0071E3]/30 transition-all">
-                  <div className="p-3 bg-[#0071E3] text-white rounded-2xl mb-3 shadow-sm">
-                    <Activity className="w-6 h-6" />
-                  </div>
-                  <h3 className="font-extrabold text-base text-[#1D1D1F] mb-1">In-Ride Execution</h3>
-                  <span className="inline-block text-xs font-bold text-[#0071E3] bg-[#0071E3]/10 px-3 py-1 rounded-full uppercase tracking-wider">
-                    Digital Domestique
-                  </span>
-                  <p className="text-xs text-[#86868B] mt-2 leading-relaxed">
-                    Adaptive AI algorithms calculate fatigue and threshold headroom live to guide interval timing and pacing beat-by-beat.
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
-
-        {/* CORE VALUE PROP: REAL-TIME COACH */}
-        <section ref={coachRef} id="coach" className="py-16 md:py-24 px-4 sm:px-6 max-w-6xl mx-auto">
-          <div className="text-center mb-12">
-            <span className="text-sm md:text-base font-extrabold text-[#0071E3] uppercase tracking-wider block mb-2 flex items-center justify-center gap-2">
-              <Sparkles className="w-4 h-4 text-[#0071E3]" /> Real-Time Vs. Post-Ride Analysis
-            </span>
-            <h2 className="text-3xl sm:text-5xl font-extrabold text-[#1D1D1F] tracking-tight">Why Active Cyclists Need In-Ride Coaching</h2>
-            <p className="text-lg text-[#86868B] max-w-2xl mx-auto mt-3">Post-training software provides a post-mortem. Real-time audio coaching intervenes when it actually counts: during the effort.</p>
-          </div>
-
-          <div ref={featuresScrollRef} className="flex overflow-x-auto snap-x snap-mandatory gap-6 hide-scrollbar pb-6">
-            {FEATURES.map((feature) => (
-              <div key={feature.id} className="w-[85vw] sm:w-[380px] shrink-0 snap-center apple-card p-6 flex flex-col justify-between">
-                <div>
-                  <div className="rounded-xl overflow-hidden mb-4 border border-black/5 bg-black">
-                    <video 
-                      controls 
-                      playsInline 
-                      preload="metadata" 
-                      poster={feature.poster} 
-                      className="w-full aspect-[4/3] object-cover"
-                      onPlay={() => trackAnalyticsEvent('WatchVideo', 'video_start', { video_title: feature.title }, true)}
-                    >
-                      <source src={feature.video} type="video/mp4" />
-                    </video>
-                  </div>
-                  
-                  <div className="flex items-center gap-2 mb-2">
-                    <Activity className="w-4 h-4 text-[#0071E3]" />
-                    <h3 className="font-bold text-lg text-[#1D1D1F]">{feature.title}</h3>
-                  </div>
-
-                  <div className="bg-[#F5F5F7] p-3.5 rounded-xl border border-black/5 mb-4">
-                    <p className="text-xs text-[#515154] italic font-semibold">"{feature.quote}"</p>
-                  </div>
-                </div>
-
-                <div className="pt-3 border-t border-black/5">
-                  <span className="text-xs font-bold text-[#0071E3] uppercase tracking-wider block mb-1">Why This Beats Post-Ride Data</span>
-                  <p className="text-xs text-[#515154] leading-relaxed">{feature.whyItMatters}</p>
-                </div>
-              </div>
-            ))}
-          </div>
-
-          <div className="flex justify-center gap-3 mt-4">
-            <button id="carousel-btn-features-left" type="button" onClick={() => scrollCarousel(featuresScrollRef, 'left')} className="p-3 apple-card hover:bg-black/5 touch-manipulation"><ChevronLeft className="w-5 h-5"/></button>
-            <button id="carousel-btn-features-right" type="button" onClick={() => scrollCarousel(featuresScrollRef, 'right')} className="p-3 apple-card hover:bg-black/5 touch-manipulation"><ChevronRight className="w-5 h-5"/></button>
-          </div>
-        </section>
-
-        {/* STEP-BY-STEP FLOW & EMBEDDED YOUTUBE DEMO VIDEO */}
-        <section ref={flowRef} id="flow" className="relative py-16 md:py-24 px-4 sm:px-6 bg-[#EBEBEF] border-y border-black/5 overflow-hidden">
-          <BackgroundLogoWatermark />
-
-          <div className="max-w-6xl mx-auto relative z-10">
-            <div className="text-center mb-12">
-              <span className="text-sm md:text-base font-extrabold text-[#0071E3] uppercase tracking-wider block mb-2 flex items-center justify-center gap-2">
-                <RefreshCw className="w-4 h-4 text-[#0071E3]" /> How It Works
-              </span>
-              <h2 className="text-3xl sm:text-5xl font-extrabold text-[#1D1D1F] tracking-tight">The In-Ride Coaching Loop</h2>
-              <p className="text-lg text-[#86868B] max-w-2xl mx-auto mt-3">From pre-ride targets to real-time audio execution on open roads.</p>
-            </div>
-
-            {/* EMBEDDED YOUTUBE DEMO VIDEO */}
-            <div className="max-w-4xl mx-auto mb-16 apple-card overflow-hidden shadow-lg border border-black/10 bg-black">
-              <div className="relative w-full aspect-video">
-                <iframe 
-                  className="absolute inset-0 w-full h-full rounded-2xl"
-                  loading="lazy"
-                  src="https://www.youtube.com/embed/VyHThpEzqhI?si=O7ehuVv3CwypiaMy" 
-                  title="Domestique.live How It Works Video Player" 
-                  frameBorder="0" 
-                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
-                  referrerPolicy="strict-origin-when-cross-origin" 
-                  allowFullScreen
-                ></iframe>
-              </div>
-            </div>
-
-            <div className="grid grid-cols-1 md:grid-cols-5 gap-6">
-              {FLOW_STEPS.map((step) => {
-                const StepIcon = step.icon;
-                return (
-                  <div key={step.step} className="apple-card p-6 flex flex-col justify-between hover:shadow-md transition-shadow relative overflow-hidden group">
-                    <div className="absolute top-0 left-0 w-full h-1 bg-[#0071E3] opacity-0 group-hover:opacity-100 transition-opacity"></div>
-                    <div>
-                      <div className="flex items-center justify-between mb-3">
-                        <span className="text-xs font-mono font-bold text-[#0071E3]">{step.step}</span>
-                        <StepIcon className="w-4 h-4 text-[#86868B] group-hover:text-[#0071E3] transition-colors" />
-                      </div>
-                      <h4 className="font-bold text-base text-[#1D1D1F] mb-2">{step.title}</h4>
-                      <p className="text-xs text-[#86868B] leading-relaxed">{step.desc}</p>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-        </section>
-
-        {/* MOBILE-OPTIMIZED ECOSYSTEM COMPARISON & LOGO GRID */}
-        <section ref={ecosystemRef} id="ecosystem" className="py-16 md:py-24 px-4 sm:px-6 max-w-6xl mx-auto">
-          <div className="text-center mb-12">
-            <span className="text-sm md:text-base font-extrabold text-[#0071E3] uppercase tracking-wider block mb-2 flex items-center justify-center gap-2">
-              <Sliders className="w-4 h-4 text-[#0071E3]" /> Complementary Architecture
-            </span>
-            <h2 className="text-3xl sm:text-5xl font-extrabold text-[#1D1D1F] tracking-tight">How Domestique.live Enhances Your Tools</h2>
-            <p className="text-lg text-[#86868B] max-w-2xl mx-auto mt-3">Domestique.live does not replace your current tools. It connects parallel to your existing sensors and head unit, adding an active voice layer.</p>
-          </div>
-
-          {/* Mobile View (< 768px) */}
-          <div className="block md:hidden space-y-4 mb-12">
-            {TABLE_ECOSYSTEM_DATA.map((row) => {
-              const RowIcon = row.icon;
-              return (
-                <div key={row.tool} className="apple-card p-5 border border-black/10">
-                  <div className="flex items-center gap-3 mb-4 pb-3 border-b border-black/5">
-                    <div className="p-2.5 bg-[#0071E3]/10 text-[#0071E3] rounded-xl shrink-0">
-                      <RowIcon className="w-5 h-5" />
-                    </div>
-                    <div>
-                      <h3 className="font-bold text-base text-[#1D1D1F]">{row.tool}</h3>
-                      <span className="text-[10px] text-[#86868B] uppercase font-mono">{row.category}</span>
-                    </div>
-                  </div>
-
-                  <div className="space-y-3">
-                    <div className="p-3.5 bg-[#F5F5F7] rounded-xl border border-black/5">
-                      <span className="text-[10px] font-bold text-[#86868B] uppercase block mb-1">Legacy Approach</span>
-                      <p className="text-xs text-[#515154] leading-relaxed">{row.legacyApproach}</p>
-                    </div>
-
-                    <div className="p-3.5 bg-[#0071E3]/5 rounded-xl border border-[#0071E3]/20">
-                      <span className="text-[10px] font-bold text-[#0071E3] uppercase block mb-1">Domestique.live Real-Time Advantage</span>
-                      <p className="text-xs font-medium text-[#1D1D1F] leading-relaxed flex items-start gap-1.5">
-                        <Check className="w-3.5 h-3.5 text-[#0071E3] shrink-0 mt-0.5" />
-                        <span>{row.domestiqueApproach}</span>
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-
-          {/* Desktop View (>= 768px) */}
-          <div className="hidden md:block apple-card overflow-hidden shadow-md border border-black/10 mb-16">
-            <div className="overflow-x-auto">
-              <table className="w-full text-left border-collapse">
-                <thead>
-                  <tr className="bg-[#1D1D1F] text-white text-xs font-bold uppercase tracking-wider">
-                    <th className="py-4 px-6 border-r border-white/10 w-1/3">Cyclist Tool & Category</th>
-                    <th className="py-4 px-6 border-r border-white/10 w-1/3">Standard Legacy Function</th>
-                    <th className="py-4 px-6 bg-[#0071E3] w-1/3 text-white">Domestique.live Real-Time Advantage</th>
-                  </tr>
-                </thead>
-                <tbody className="divide-y divide-black/10 text-xs">
-                  {TABLE_ECOSYSTEM_DATA.map((row) => {
-                    const RowIcon = row.icon;
-                    return (
-                      <tr key={row.tool} className="hover:bg-black/[0.02] transition-colors">
-                        <td className="py-5 px-6 font-semibold border-r border-black/5 bg-[#F5F5F7]/50">
-                          <div className="flex items-center gap-3">
-                            <div className="p-2 bg-[#0071E3]/10 text-[#0071E3] rounded-lg shrink-0">
-                              <RowIcon className="w-4 h-4" />
-                            </div>
-                            <div>
-                              <span className="font-bold text-sm text-[#1D1D1F] block">{row.tool}</span>
-                              <span className="text-[10px] text-[#86868B] uppercase font-mono">{row.category}</span>
-                            </div>
-                          </div>
-                        </td>
-                        <td className="py-5 px-6 border-r border-black/5 text-[#515154] leading-relaxed">
-                          {row.legacyApproach}
-                        </td>
-                        <td className="py-5 px-6 font-medium text-[#1D1D1F] bg-[#0071E3]/5 leading-relaxed">
-                          <div className="flex items-start gap-2">
-                            <Check className="w-4 h-4 text-[#0071E3] shrink-0 mt-0.5" />
-                            <span>{row.domestiqueApproach}</span>
-                          </div>
-                        </td>
-                      </tr>
-                    );
-                  })}
-                </tbody>
-              </table>
-            </div>
-          </div>
-
-          {/* LOGO SECTION UNDER THE TABLE */}
-          <div className="apple-card p-8 bg-gradient-to-br from-white via-[#F5F5F7] to-white border border-black/10 text-center">
-            <div className="flex items-center justify-center gap-2 mb-2 text-[#0071E3]">
-              <Layers className="w-5 h-5" />
-              <span className="text-xs font-bold uppercase tracking-wider">Seamless Integration</span>
-            </div>
-            <h3 className="text-xl sm:text-2xl font-extrabold text-[#1D1D1F] mb-2">
-              We Connect With All The Tools You Already Use & Love
-            </h3>
-            <p className="text-xs sm:text-sm text-[#86868B] max-w-xl mx-auto mb-8">
-              Domestique.live hooks into your existing sensor network and favorite cycling apps in parallel—no lock-in, no ecosystem changes required.
-            </p>
-
-            <div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-4 items-center justify-center mb-6">
-              {PARTNER_LOGOS.map((partner) => (
-                <div key={partner.name} className="flex flex-col items-center justify-center p-3 rounded-2xl bg-white border border-black/5 hover:border-[#0071E3]/30 transition-all shadow-sm">
-                  <img 
-                    src={partner.logo} 
-                    alt={partner.name} 
-                    loading="lazy"
-                    decoding="async"
-                    className="h-8 w-auto max-w-[80px] object-contain mb-2 filter grayscale hover:grayscale-0 transition-all"
-                  />
-                  <span className="text-[11px] font-bold text-[#1D1D1F]">{partner.name}</span>
-                </div>
-              ))}
-            </div>
-
-            <p className="text-xs text-[#86868B] font-medium italic">
-              ...and many more standard Bluetooth, ANT+, and REST API training platforms.
-            </p>
-          </div>
-        </section>
-
-        {/* HARDWARE & OPEN-EAR TECH */}
-        <section ref={hardwareRef} id="hardware" className="relative py-16 md:py-24 px-4 sm:px-6 bg-[#EBEBEF] border-y border-black/5 overflow-hidden">
-          <BackgroundLogoWatermark />
-
-          <div className="max-w-6xl mx-auto relative z-10">
-            <div className="text-center mb-12">
-              <span className="text-sm md:text-base font-extrabold text-[#0071E3] uppercase tracking-wider block mb-2 flex items-center justify-center gap-2">
-                <Cpu className="w-4 h-4 text-[#0071E3]" /> Ergonomic Precision
-              </span>
-              <h2 className="text-3xl sm:text-5xl font-extrabold text-[#1D1D1F] tracking-tight">Bone-Conduction Architecture</h2>
-              <p className="text-lg text-[#86868B] max-w-2xl mx-auto mt-3">Weighted at 26 grams. Bypasses the eardrum so your situational awareness and group conversations remain intact.</p>
-            </div>
-
-            {/* YOUTUBE VIDEO EMBEDDED ON TOP OF PRODUCT IMAGES */}
-            <div className="max-w-4xl mx-auto mb-12 apple-card overflow-hidden shadow-lg border border-black/10 bg-black">
-              <div className="relative w-full aspect-video">
-                <iframe 
-                  className="absolute inset-0 w-full h-full rounded-2xl"
-                  loading="lazy"
-                  src="https://www.youtube.com/embed/k9lesOKGIvM?si=Rg2DKO9m3bCyAFR-" 
-                  title="YouTube video player" 
-                  frameBorder="0" 
-                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
-                  referrerPolicy="strict-origin-when-cross-origin" 
-                  allowFullScreen
-                ></iframe>
-              </div>
-            </div>
-
-            <div ref={productsScrollRef} className="flex overflow-x-auto snap-x snap-mandatory gap-6 hide-scrollbar pb-6 mb-8">
-              {PRODUCT_IMAGES.map((img, idx) => (
-                <button 
-                  key={img} 
-                  id={`product-img-btn-${idx}`}
-                  type="button"
-                  className="w-[80vw] sm:w-[320px] shrink-0 snap-center apple-card p-6 text-left hover:shadow-md transition-all touch-manipulation border border-black/5 cursor-pointer"
-                  onClick={() => {
-                    trackAnalyticsEvent('InspectProduct', 'view_item', { image_url: img }, true);
-                    setSelectedImage(img);
-                  }}
-                >
-                  <img src={cld(img, 800)} alt={`Hardware ${idx + 1}`} loading="lazy" decoding="async" className="w-full h-48 object-contain mb-4" />
-                  <span className="text-xs font-semibold text-[#0071E3] block text-center">Tap to inspect hardware detail</span>
-                </button>
-              ))}
-            </div>
-
-            <div className="flex justify-center gap-3 mb-12">
-              <button id="carousel-btn-products-left" type="button" onClick={() => scrollCarousel(productsScrollRef, 'left')} className="p-3 apple-card hover:bg-black/5 touch-manipulation"><ChevronLeft className="w-5 h-5"/></button>
-              <button id="carousel-btn-products-right" type="button" onClick={() => scrollCarousel(productsScrollRef, 'right')} className="p-3 apple-card hover:bg-black/5 touch-manipulation"><ChevronRight className="w-5 h-5"/></button>
-            </div>
-
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-              <div className="apple-card p-8 flex flex-col justify-between">
-                <div>
-                  <div className="flex items-center gap-2 mb-4">
-                    <Cpu className="w-5 h-5 text-[#0071E3]" />
-                    <h3 className="font-bold text-xl text-[#1D1D1F]">What's Included in the Box</h3>
-                  </div>
-                  <ul className="space-y-3 mb-6">
-                    {SETUP_ITEMS.map((item) => (
-                      <li key={item} className="flex items-center gap-3 text-sm text-[#515154]">
-                        <Check className="w-4 h-4 text-[#0071E3] shrink-0" /> {item}
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-                <div className="pt-4 border-t border-black/5 text-xs text-[#86868B]">
-                  Includes 12-month license, rapid charger, and ecosystem setup documentation.
-                </div>
-              </div>
-
-              <div className="apple-card p-8 bg-white border border-black/5 flex flex-col justify-between">
-                <div>
-                  <div className="flex items-center gap-2 mb-4">
-                    <Volume2 className="w-5 h-5 text-[#0071E3]" />
-                    <h3 className="font-bold text-xl text-[#1D1D1F]">Why Bone-Conduction Audio?</h3>
-                  </div>
-                  <p className="text-sm text-[#515154] leading-relaxed mb-4">
-                    Standard earbuds block external noise and create wind turbulence. Bone-conduction transducers transmit acoustic vibrations directly through your cheekbones, leaving your ear canal 100% open for ambient sounds and riding buddies.
-                  </p>
-                </div>
-                <div className="pt-4 border-t border-black/10 flex items-center justify-between text-xs font-semibold text-[#0071E3]">
-                  <span>26 Grams Ultra-Light</span>
-                  <span>10-Hour Battery Life</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
-
-        {/* PRICING & TIER PRE-ORDERS */}
-        <section ref={pricingRef} id="pricing" className="py-16 md:py-24 px-4 sm:px-6 max-w-6xl mx-auto">
-          <div className="text-center mb-12">
-            <span className="text-sm md:text-base font-extrabold text-[#0071E3] uppercase tracking-wider block mb-2 flex items-center justify-center gap-2">
-              <Lock className="w-4 h-4 text-[#0071E3]" /> Pre-Order Allocation
-            </span>
-            <h2 className="text-3xl sm:text-5xl font-extrabold text-[#1D1D1F] tracking-tight">Reserve Your System</h2>
-            <p className="text-lg text-[#86868B] max-w-2xl mx-auto mt-3">Select your batch preference. Includes free worldwide shipping and a 100% money-back guarantee prior to shipment.</p>
-          </div>
-
-          {/* HIGH VISIBILITY GUARANTEE BOX (MOVED ABOVE TIERS) */}
-          <div className="apple-card p-8 bg-gradient-to-br from-[#0071E3]/5 via-white to-white border-2 border-[#0071E3]/30 shadow-md max-w-3xl mx-auto mb-12">
-            <div className="flex flex-col sm:flex-row items-center gap-6 text-center sm:text-left">
-              <div className="p-4 bg-[#0071E3] text-white rounded-2xl shrink-0 shadow-sm">
-                <ShieldCheck className="w-10 h-10" />
-              </div>
-              <div>
-                <div className="inline-flex items-center gap-1.5 text-xs font-bold text-[#0071E3] uppercase tracking-wider mb-1">
-                  <Check className="w-4 h-4 text-[#0071E3]" /> Risk-Free Commitment
-                </div>
-                <h3 className="text-2xl font-extrabold text-[#1D1D1F] mb-2">
-                  100% Pre-Order Confidence Guarantee
-                </h3>
-                <p className="text-sm text-[#515154] leading-relaxed">
-                  Plans change? All pre-orders and reservations can be fully refunded anytime prior to batch dispatch—no questions asked.
-                </p>
-              </div>
-            </div>
-          </div>
-
-          {/* 3 Main Tiers Grid */}
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
-            {PERKS_WITH_APPAREL.map((perk, i) => (
-              <div key={perk.tier} className={`apple-card p-8 flex flex-col justify-between relative ${perk.featured ? 'border-2 border-[#0071E3] shadow-lg' : ''}`}>
-                {perk.featured && (
-                  <span className="absolute -top-3.5 left-1/2 -translate-x-1/2 bg-[#0071E3] text-white text-[10px] font-bold px-4 py-1 rounded-full uppercase tracking-wider">
-                    Most Popular
-                  </span>
-                )}
-                <div>
-                  <div className="flex justify-between text-xs text-[#86868B] font-semibold mb-2">
-                    <span>{perk.tier}</span>
-                    <span className="text-[#0071E3]">{perk.tag}</span>
-                  </div>
-                  <h3 className="text-2xl font-bold text-[#1D1D1F] mb-2">{perk.name}</h3>
-                  <div className="text-4xl font-extrabold text-[#1D1D1F] mb-6">{perk.price}</div>
-
-                  {perk.apparel.length > 0 && (
-                    <div className="mb-6">
-                      <span className="text-xs font-semibold text-[#86868B] block mb-2">Founder Gear Included:</span>
-                      <div className="flex gap-2">
-                        {perk.apparel.map((slide) => (
-                          <button
-                            key={slide.title}
-                            id={`apparel-thumb-${slide.index}`}
-                            type="button"
-                            className="p-0 border-none bg-transparent cursor-pointer touch-manipulation"
-                            onClick={() => {
-                              setApparelSliderIndex(slide.index);
-                              setApparelSliderOpen(true);
-                            }}
-                          >
-                            <img 
-                              src={slide.img} 
-                              alt={slide.title} 
-                              loading="lazy"
-                              decoding="async"
-                              className="w-10 h-10 object-contain apple-card p-1" 
-                            />
-                          </button>
-                        ))}
-                      </div>
-                    </div>
-                  )}
-
-                  <ul className="space-y-3 text-sm text-[#515154] mb-8">
-                    {perk.includes.map((item) => (
-                      <li key={item} className="flex items-start gap-2">
-                        <Check className="w-4 h-4 text-[#0071E3] shrink-0 mt-0.5" />
-                        <span>{item}</span>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-
-                <div>
-                  <div 
-                    onClickCapture={() => {
-                      trackAnalyticsEvent('InitiateCheckout', 'begin_checkout', { 
-                        content_name: perk.name, 
-                        value: parseFloat(perk.price.replace('€', '')), 
-                        currency: 'EUR' 
-                      });
-                    }}
-                  >
-                    <stripe-buy-button 
-                      id={`stripe-buy-btn-${i}`} 
-                      buy-button-id={perk.stripeBuyButtonId} 
-                      publishable-key="pk_live_51IdtRfIVuCvdmBxBUsmabzHvOXTFcGtZtEqntzEL3250bwSyUPtjAdz3DYb19hkLrjjGVtw5bQXUiI7wFgSbNSA6005OSynoUX"
-                    ></stripe-buy-button>
-                  </div>
-                  <CardTrustBadges />
-                </div>
-              </div>
-            ))}
-          </div>
-
-          {/* Dedicated Full-Width Banner for Batch 2 Reservation (€10 Deposit) */}
-          <div className="apple-card p-6 md:p-8 bg-gradient-to-r from-white via-[#F5F5F7] to-white border border-[#0071E3]/20 shadow-sm mb-12 flex flex-col md:flex-row items-center justify-between gap-6">
-            <div className="flex items-start gap-4">
-              <div className="p-3 bg-[#0071E3]/10 text-[#0071E3] rounded-2xl shrink-0">
-                <BookmarkPlus className="w-6 h-6" />
-              </div>
-              <div>
-                <div className="flex items-center gap-2 mb-1">
-                  <span className="text-xs font-bold text-[#0071E3] uppercase">{BATCH_2_PERK.tier}</span>
-                  <span className="text-[10px] bg-[#0071E3]/10 text-[#0071E3] font-semibold px-2 py-0.5 rounded-full">{BATCH_2_PERK.delivery}</span>
-                </div>
-                <h3 className="text-xl font-bold text-[#1D1D1F]">{BATCH_2_PERK.name} — {BATCH_2_PERK.price} Deposit</h3>
-                <p className="text-xs text-[#86868B] mt-1 max-w-xl">
-                  Reserve your spot in the second production run for €10. Locks in your early pricing and holds your place in line.
-                </p>
-              </div>
-            </div>
-            <div className="w-full md:w-auto shrink-0 flex flex-col items-center">
-              <div 
-                className="w-full md:w-auto"
-                onClickCapture={() => {
-                  trackAnalyticsEvent('InitiateCheckout', 'begin_checkout', { content_name: 'Batch 2 Reservation Deposit', value: 10, currency: 'EUR' });
-                }}
-              >
-                <stripe-buy-button 
-                  id="stripe-buy-btn-batch2" 
-                  buy-button-id={BATCH_2_PERK.stripeBuyButtonId} 
-                  publishable-key="pk_live_51IdtRfIVuCvdmBxBUsmabzHvOXTFcGtZtEqntzEL3250bwSyUPtjAdz3DYb19hkLrjjGVtw5bQXUiI7wFgSbNSA6005OSynoUX"
-                ></stripe-buy-button>
-              </div>
-              <span className="text-[10px] text-[#86868B] mt-2 flex items-center gap-1">
-                <Lock className="w-3 h-3 text-[#0071E3]" /> Fully Refundable €10 Deposit
-              </span>
-            </div>
-          </div>
-        </section>
-
-        {/* TEAM & FOUNDING STORY SECTION */}
-        <section ref={teamRef} id="team" className="relative py-16 md:py-24 px-4 sm:px-6 bg-[#EBEBEF] border-y border-black/5 overflow-hidden">
-          <BackgroundLogoWatermark />
-
-          <div className="max-w-6xl mx-auto relative z-10">
-            <div className="text-center mb-12">
-              <span className="text-sm md:text-base font-extrabold text-[#0071E3] uppercase tracking-wider block mb-2 flex items-center justify-center gap-2">
-                <Award className="w-4 h-4 text-[#0071E3]" /> Built by Cyclists
-              </span>
-              <h2 className="text-3xl sm:text-5xl font-extrabold text-[#1D1D1F] tracking-tight">Our Story</h2>
-            </div>
-
-            {/* FOUNDING STORY CARD WITH INTEGRATED GROUP PHOTO */}
-            <div className="apple-card p-8 md:p-12 bg-white border border-black/10 shadow-sm relative overflow-hidden flex flex-col md:flex-row items-center gap-12">
-              <div className="w-full md:w-1/2">
-                <div className="flex items-center gap-3 mb-4 text-[#0071E3]">
-                  <Lightbulb className="w-6 h-6" />
-                  <span className="text-xs font-bold uppercase tracking-widest">Why We Built Domestique.live</span>
-                </div>
-                
-                <h3 className="text-2xl sm:text-4xl font-extrabold text-[#1D1D1F] tracking-tight mb-6 leading-tight">
-                  The Missing Piece in Modern Cycling Tech
-                </h3>
-
-                <div className="space-y-4 text-sm text-[#515154] leading-relaxed">
-                  <p>
-                    As active road cyclists, we noticed a glaring gap in the market. On one hand, we had incredible tools for pre-ride workout planning (TrainingPeaks, Join, Zwift). On the other, we had endless post-ride post-mortem platforms (Strava, Intervals.icu) telling us exactly why we blew up two hours after the ride was already finished.
-                  </p>
-                  <p className="font-semibold text-[#1D1D1F]">
-                    What was completely missing was something actively helping you mid-ride, when it actually matters.
-                  </p>
-                  <p>
-                    Glancing down at glass computer screens while traveling at 40 km/h is distracting and inefficient. We wanted the experience that pro peloton riders have: a digital domestique in the car radio, giving precise audio cues on pacing, cadence, and interval timing.
-                  </p>
-                  <p>
-                    That's why we engineered <strong className="text-[#0071E3]">Domestique.live</strong>—pairing open-ear bone conduction audio with real-time biometric AI to give every passionate cyclist an active in-ride advantage.
-                  </p>
-
-                  <a 
-                    id="link-linkedin-story"
-                    href="https://www.linkedin.com/company/domestiquelive" 
-                    target="_blank" 
-                    rel="noreferrer"
-                    className="inline-flex items-center gap-2 text-[#0071E3] font-bold mt-6 hover:underline touch-manipulation"
-                  >
-                    Follow our journey on LinkedIn <ArrowRight className="w-4 h-4" />
-                  </a>
-                </div>
-              </div>
-
-              <div className="w-full md:w-1/2">
-                <img 
-                  src={TEAM_PHOTO_URL} 
-                  alt="Domestique.live Founding Team" 
-                  loading="lazy"
-                  decoding="async"
-                  className="w-full h-auto rounded-2xl shadow-sm border border-black/5 object-cover"
-                />
-              </div>
-            </div>
-          </div>
-        </section>
-
-        {/* FAQ & SEND A QUESTION SECTION */}
-        <section ref={faqRef} id="faq" className="py-16 md:py-24 px-4 sm:px-6 max-w-6xl mx-auto border-b border-black/5">
-          <div className="text-center mb-12">
-            <span className="text-sm md:text-base font-extrabold text-[#0071E3] uppercase tracking-wider block mb-2 flex items-center justify-center gap-2">
-              <HelpCircle className="w-4 h-4 text-[#0071E3]" /> Got Questions?
-            </span>
-            <h2 className="text-3xl sm:text-5xl font-extrabold text-[#1D1D1F] tracking-tight">Frequently Asked Questions</h2>
-          </div>
-
-          <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
-            <div className="lg:col-span-7 space-y-3">
-              {PREORDER_FAQS.map((faq, index) => (
-                <button 
-                  key={faq.q} 
-                  id={`faq-toggle-btn-${index}`}
-                  type="button"
-                  className="w-full text-left apple-card p-5 cursor-pointer hover:shadow-sm transition-all touch-manipulation border border-black/5"
-                  onClick={() => setOpenFaq(openFaq === index ? -1 : index)}
-                >
-                  <div className="font-semibold text-sm text-[#1D1D1F] flex justify-between items-center gap-4">
-                    <span>{faq.q}</span>
-                    <span className="text-[#0071E3] text-lg font-bold">{openFaq === index ? '−' : '+'}</span>
-                  </div>
-                  {openFaq === index && (
-                    <p className="text-xs text-[#86868B] mt-3 leading-relaxed pt-3 border-t border-black/5">{faq.a}</p>
-                  )}
-                </button>
-              ))}
-            </div>
-
-            <div className="lg:col-span-5 apple-card p-8 bg-white border border-black/10">
-              <div className="flex items-center gap-2 mb-2">
-                <HelpCircle className="w-5 h-5 text-[#0071E3]" />
-                <h3 className="font-bold text-xl text-[#1D1D1F]">Have a Question?</h3>
-              </div>
-              <p className="text-xs text-[#86868B] mb-6">Can't find the answer you're looking for? Ask our product team directly.</p>
-
-              {questionSent ? (
-                <div className="bg-[#F5F5F7] p-6 rounded-xl border border-black/5 text-center">
-                  <Check className="w-8 h-8 text-[#0071E3] mx-auto mb-2" />
-                  <h4 className="font-bold text-sm text-[#1D1D1F] mb-1">Question Received!</h4>
-                  <p className="text-xs text-[#86868B]">We will reply to your email shortly.</p>
-                </div>
-              ) : (
-                <form onSubmit={handleQuestionSubmit} className="space-y-4">
-                  <div>
-                    <label htmlFor="user-question-name" className="block text-xs font-semibold text-[#515154] mb-1">Your Name</label>
-                    <input 
-                      id="user-question-name"
-                      type="text" 
-                      required 
-                      value={userQuestion.name}
-                      onChange={(e) => setUserQuestion({ ...userQuestion, name: e.target.value })}
-                      placeholder="e.g. Alex" 
-                      className="w-full text-xs p-3 rounded-xl bg-[#F5F5F7] border border-black/5 focus:outline-none focus:border-[#0071E3]"
-                    />
-                  </div>
-                  <div>
-                    <label htmlFor="user-question-email" className="block text-xs font-semibold text-[#515154] mb-1">Email Address</label>
-                    <input 
-                      id="user-question-email"
-                      type="email" 
-                      required 
-                      value={userQuestion.email}
-                      onChange={(e) => setUserQuestion({ ...userQuestion, email: e.target.value })}
-                      placeholder="alex@peloton.com" 
-                      className="w-full text-xs p-3 rounded-xl bg-[#F5F5F7] border border-black/5 focus:outline-none focus:border-[#0071E3]"
-                    />
-                  </div>
-                  <div>
-                    <label htmlFor="user-question-message" className="block text-xs font-semibold text-[#515154] mb-1">Question</label>
-                    <textarea 
-                      id="user-question-message"
-                      rows={4} 
-                      required 
-                      value={userQuestion.message}
-                      onChange={(e) => setUserQuestion({ ...userQuestion, message: e.target.value })}
-                      placeholder="Ask us anything about sensor compatibility, audio clarity, or shipping..." 
-                      className="w-full text-xs p-3 rounded-xl bg-[#F5F5F7] border border-black/5 focus:outline-none focus:border-[#0071E3]"
-                    ></textarea>
-                  </div>
-                  <button id="btn-submit-question" type="submit" className="w-full bg-[#0071E3] text-white font-semibold text-xs py-3 rounded-xl hover:bg-[#0077ED] transition-colors flex items-center justify-center gap-2 touch-manipulation">
-                    <Send className="w-3.5 h-3.5" /> Send Question
-                  </button>
-                </form>
-              )}
-            </div>
-          </div>
-        </section>
-
-        {/* COMMUNITY & STRAVA CLUB SECTION (UPDATED LOGO) */}
-        <section ref={instagramRef} id="instagram-feed" className="py-16 md:py-24 px-4 sm:px-6 max-w-6xl mx-auto">
-          {/* CENTERED STRAVA CALL TO ACTION */}
-          <div className="apple-card p-8 md:p-12 bg-gradient-to-br from-white via-[#F5F5F7] to-white border border-[#FC4C02]/20 shadow-sm mb-16 text-center max-w-3xl mx-auto flex flex-col items-center">
-            <div className="flex items-center justify-center gap-2.5 mb-4">
-              <img src={NEW_STRAVA_LOGO} alt="Strava" loading="lazy" decoding="async" className="h-8 w-auto object-contain" />
-              <span className="text-sm font-bold text-[#FC4C02] uppercase tracking-wider">Official Strava Club</span>
-            </div>
-            <h3 className="text-3xl sm:text-4xl font-extrabold text-[#1D1D1F] mb-4">Ride With Domestique.live</h3>
-            <p className="text-sm sm:text-base text-[#86868B] leading-relaxed mb-8 max-w-lg mx-auto">
-              Track peloton training rides, compare leaderboard efforts, and connect with early adopters testing our real-time coaching system on open roads.
-            </p>
-            <a 
-              id="link-strava-club"
-              href="https://www.strava.com/clubs/2143975?oq=domestiqu" 
-              target="_blank" 
-              rel="noreferrer"
-              className="bg-[#FC4C02] text-white text-sm font-bold px-8 py-4 rounded-full hover:bg-[#e04300] transition-colors flex items-center gap-2 shadow-sm touch-manipulation"
-            >
-              Join Strava Club <ArrowRight className="w-4 h-4" />
-            </a>
-          </div>
-        </section>
-
-        {/* FOOTER */}
-        <footer className="bg-[#1D1D1F] text-white py-16 px-4 sm:px-6 border-t border-black/10">
-          <div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
-            <div>
-              <span className="font-bold text-lg block mb-3">Domestique.live</span>
-              <p className="text-xs text-[#86868B] leading-relaxed mb-3">
-                Real-time AI audio coaching and open-ear bone conduction intelligence for active cyclists.
-              </p>
-              
-              <div className="pt-2 space-y-2">
-                <span className="text-[11px] text-[#86868B] block">
-                  Powered by <a id="link-alphanome-home" href="https://www.alphanome.ai/" target="_blank" rel="noreferrer" className="text-[#0071E3] font-semibold hover:underline">Alphanome.AI</a>
-                </span>
-                <span className="text-[11px] text-[#86868B] block mt-1">
-                  Genève, Switzerland
-                </span>
-              </div>
-            </div>
-
-            <div>
-              <h5 className="text-xs font-bold uppercase text-[#86868B] mb-3">Navigation</h5>
-              <div className="flex flex-col gap-2 text-xs text-[#86868B]">
-                <button id="footer-btn-coach" type="button" onClick={() => scrollToRef(coachRef)} className="text-left hover:text-white touch-manipulation">Real-Time Coach</button>
-                <button id="footer-btn-flow" type="button" onClick={() => scrollToRef(flowRef)} className="text-left hover:text-white touch-manipulation">How It Works</button>
-                <button id="footer-btn-ecosystem" type="button" onClick={() => scrollToRef(ecosystemRef)} className="text-left hover:text-white touch-manipulation">Ecosystem</button>
-                <button id="footer-btn-hardware" type="button" onClick={() => scrollToRef(hardwareRef)} className="text-left hover:text-white touch-manipulation">Hardware</button>
-                <button id="footer-btn-team" type="button" onClick={() => scrollToRef(teamRef)} className="text-left hover:text-white touch-manipulation">Our Story</button>
-                <button id="footer-btn-pricing" type="button" onClick={() => scrollToRef(pricingRef)} className="text-left hover:text-white touch-manipulation">Pre-Order</button>
-                <button id="footer-btn-community" type="button" onClick={() => scrollToRef(instagramRef)} className="text-left hover:text-white touch-manipulation">Community</button>
-              </div>
-            </div>
-
-            <div>
-              <h5 className="text-xs font-bold uppercase text-[#86868B] mb-3">Legal & Research</h5>
-              <div className="flex flex-col gap-2 text-xs text-[#86868B]">
-                <button id="footer-policy-return" type="button" onClick={() => setActivePolicy('return')} className="text-left hover:text-white touch-manipulation">Return & Refund Policy</button>
-                <button id="footer-policy-shipping" type="button" onClick={() => setActivePolicy('shipping')} className="text-left hover:text-white touch-manipulation">Shipping Policy</button>
-                <button id="footer-policy-privacy" type="button" onClick={() => setActivePolicy('privacy')} className="text-left hover:text-white touch-manipulation">Privacy Policy</button>
-                
-                {/* SYSTEM ARCHITECTURE LINK */}
-                <button 
-                  id="footer-modal-architecture"
-                  type="button"
-                  onClick={() => setShowArchitectureModal(true)} 
-                  className="text-left text-[#0071E3] font-semibold hover:underline flex items-center gap-1.5 pt-1 touch-manipulation"
-                >
-                  <Server className="w-3.5 h-3.5" /> System Architecture
-                </button>
-
-                {/* SCIENCE & RESEARCH LINK */}
-                <button 
-                  id="footer-modal-science"
-                  type="button"
-                  onClick={() => setShowScienceModal(true)} 
-                  className="text-left text-[#0071E3] font-semibold hover:underline flex items-center gap-1.5 touch-manipulation"
-                >
-                  <BookOpen className="w-3.5 h-3.5" /> Science & Research
-                </button>
-              </div>
-            </div>
-
-            <div>
-              <h5 className="text-xs font-bold uppercase text-[#86868B] mb-3">Newsletter</h5>
-              <form onSubmit={handleNewsletterSubmit} className="flex flex-col gap-2">
-                <input 
-                  type="email" 
-                  name="fields[email]" 
-                  placeholder="Enter email address" 
-                  required 
-                  className="bg-white/10 text-white placeholder-white/40 border border-white/10 text-xs px-3 py-2 rounded-lg focus:outline-none"
-                />
-                <button id="newsletter-submit-btn" type="submit" className="bg-[#0071E3] text-white text-xs font-semibold py-2 rounded-lg hover:bg-[#0077ED] touch-manipulation">Subscribe</button>
-              </form>
-            </div>
-          </div>
-
-          <div className="max-w-6xl mx-auto border-t border-white/10 pt-6 flex flex-col sm:flex-row justify-between items-center text-[10px] text-[#86868B] gap-4">
-            <span>&copy; {YEAR} Domestique.live. All rights reserved.</span>
-            <div className="flex flex-wrap gap-4 items-center">
-              <a id="link-facebook" href="https://www.facebook.com/domestiquelive" target="_blank" rel="noreferrer" className="hover:text-white transition-colors touch-manipulation" title="Facebook"><Facebook className="w-4 h-4"/></a>
-              <a id="link-tiktok" href="https://www.tiktok.com/@domestiquelive" target="_blank" rel="noreferrer" className="hover:text-white transition-colors touch-manipulation" title="TikTok"><TikTokIcon className="w-4 h-4"/></a>
-              <a id="link-instagram" href="https://www.instagram.com/domestique.live/" target="_blank" rel="noreferrer" className="hover:text-white transition-colors touch-manipulation" title="Instagram"><Instagram className="w-4 h-4"/></a>
-              <a id="link-linkedin" href="https://www.linkedin.com/company/domestiquelive/" target="_blank" rel="noreferrer" className="hover:text-white transition-colors touch-manipulation" title="LinkedIn"><Linkedin className="w-4 h-4"/></a>
-              <a id="link-twitter" href="https://x.com/domestiquelive" target="_blank" rel="noreferrer" className="hover:text-white transition-colors touch-manipulation" title="X"><TwitterXIcon className="w-4 h-4"/></a>
-              <a id="link-strava-footer" href="https://www.strava.com/clubs/2143975" target="_blank" rel="noreferrer" className="hover:text-white transition-colors touch-manipulation" title="Strava">
-                <img src={NEW_STRAVA_LOGO} alt="Strava" loading="lazy" decoding="async" className="h-3.5 w-auto object-contain opacity-70 hover:opacity-100 transition-opacity" />
-              </a>
-            </div>
-          </div>
-        </footer>
-
-        {/* DETAILED TECHNICAL ARCHITECTURE MODAL */}
-        {showArchitectureModal && (
-          <div className="fixed inset-0 z-[200] bg-black/60 backdrop-blur-md flex items-center justify-center p-4">
-            <div className="bg-[#F5F5F7] rounded-3xl p-6 sm:p-8 max-w-4xl w-full max-h-[88vh] overflow-y-auto relative text-[#1D1D1F] border border-black/10 shadow-2xl">
-              <button 
-                id="close-architecture-modal"
-                type="button"
-                onClick={() => setShowArchitectureModal(false)} 
-                className="absolute top-5 right-5 text-gray-500 hover:text-black p-2 rounded-full bg-white border border-black/5 touch-manipulation"
-              >
-                <X className="w-5 h-5" />
-              </button>
-
-              <div className="flex items-center gap-3 mb-2">
-                <div className="p-2.5 bg-[#0071E3] text-white rounded-xl">
-                  <Server className="w-6 h-6" />
-                </div>
-                <div>
-                  <h3 className="text-2xl font-extrabold text-[#1D1D1F]">System Architecture Specification</h3>
-                  <span className="text-xs font-mono font-bold text-[#0071E3] uppercase tracking-wider">Domestique.live Engine v2.4</span>
-                </div>
-              </div>
-
-              <p className="text-xs text-[#86868B] mb-8 leading-relaxed max-w-2xl">
-                Domestique.live operates a decoupled, hybrid edge-cloud ecosystem engineered to execute sub-second physiological feedback loops in offline environments while syncing to post-ride training platforms.
-              </p>
-
-              <div className="space-y-6">
-                {/* Architecture Block 1 */}
-                <div className="apple-card p-6 bg-white border border-black/5">
-                  <div className="flex items-center justify-between mb-3">
-                    <div className="flex items-center gap-2.5 text-[#0071E3]">
-                      <Gauge className="w-5 h-5" />
-                      <h4 className="font-bold text-base text-[#1D1D1F]">1. Multi-Channel BLE Intercept & Concurrent Multiplexing</h4>
-                    </div>
-                    <span className="text-[10px] font-mono font-bold px-2.5 py-1 rounded-full bg-[#0071E3]/10 text-[#0071E3]">50Hz Sampling Pipeline</span>
-                  </div>
-                  <p className="text-xs text-[#515154] leading-relaxed mb-3">
-                    The client application maintains secondary passive GATT profile connections (Cycling Power <code className="font-mono bg-[#F5F5F7] px-1.5 py-0.5 rounded text-[#0071E3]">0x1818</code>, Heart Rate <code className="font-mono bg-[#F5F5F7] px-1.5 py-0.5 rounded text-[#0071E3]">0x180D</code>, Cadence <code className="font-mono bg-[#F5F5F7] px-1.5 py-0.5 rounded text-[#0071E3]">0x1816</code>) alongside primary bike computers (Garmin, Wahoo). This multiplexed topology captures uncompressed raw telemetry streams without locking peripheral channels or interrupting FIT file logging.
-                  </p>
-                  <div className="grid grid-cols-1 sm:grid-cols-3 gap-2.5 pt-2 border-t border-black/5 text-[11px] font-mono text-[#86868B]">
-                    <div className="p-2 bg-[#F5F5F7] rounded-lg">
-                      <span className="font-bold text-[#1D1D1F] block">Power GATT (0x1818)</span>
-                      Instantaneous Wattage & L/R balance
-                    </div>
-                    <div className="p-2 bg-[#F5F5F7] rounded-lg">
-                      <span className="font-bold text-[#1D1D1F] block">HR Profile (0x180D)</span>
-                      R-R intervals & BPM dynamics
-                    </div>
-                    <div className="p-2 bg-[#F5F5F7] rounded-lg">
-                      <span className="font-bold text-[#1D1D1F] block">Cadence (0x1816)</span>
-                      Pedal velocity & torque effectiveness
-                    </div>
-                  </div>
-                </div>
-
-                {/* Architecture Block 2 */}
-                <div className="apple-card p-6 bg-white border border-black/5">
-                  <div className="flex items-center justify-between mb-3">
-                    <div className="flex items-center gap-2.5 text-[#0071E3]">
-                      <Cpu className="w-5 h-5" />
-                      <h4 className="font-bold text-base text-[#1D1D1F]">2. Local Biometric Edge AI Engine</h4>
-                    </div>
-                    <span className="text-[10px] font-mono font-bold px-2.5 py-1 rounded-full bg-[#0071E3]/10 text-[#0071E3]">&lt;20ms Execution Latency</span>
-                  </div>
-                  <p className="text-xs text-[#515154] leading-relaxed mb-3">
-                    All physiological calculations run on-device via a compiled local C++ math core. The engine evaluates real-time effort against pre-cached FTP parameters, target interval profiles, and 3D elevation topology maps.
-                  </p>
-                  <ul className="space-y-1.5 text-xs text-[#515154] pl-2 border-l-2 border-[#0071E3]">
-                    <li>• <strong>Anaerobic Work Capacity ($W'$ Bal):</strong> Continuous differential modeling of $W'$ depletion and recharge rates during VO2Max and anaerobic efforts.</li>
-                    <li>• <strong>Aerobic Decoupling & Cardiac Drift:</strong> Evaluates internal physiological strain by cross-correlating HR escalation against steady-state power output.</li>
-                    <li>• <strong>Terrain Gradient Anticipation:</strong> Cross-references GPS velocity vectors with cached GPX altitude matrices to prompt optimal gear shifts before gradients increase.</li>
-                  </ul>
-                </div>
-
-                {/* Architecture Block 3 */}
-                <div className="apple-card p-6 bg-white border border-black/5">
-                  <div className="flex items-center justify-between mb-3">
-                    <div className="flex items-center gap-2.5 text-[#0071E3]">
-                      <Volume2 className="w-5 h-5" />
-                      <h4 className="font-bold text-base text-[#1D1D1F]">3. Low-Latency DSP & Audio Ducking Subsystem</h4>
-                    </div>
-                    <span className="text-[10px] font-mono font-bold px-2.5 py-1 rounded-full bg-[#0071E3]/10 text-[#0071E3]">CoreAudio / AudioTrack API</span>
-                  </div>
-                  <p className="text-xs text-[#515154] leading-relaxed mb-3">
-                    Delivers concise, non-intrusive voice directives through open-ear bone-conduction transducers. The audio pipeline intercepts native media sessions to duck background music dynamically during coaching events.
-                  </p>
-                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs text-[#515154]">
-                    <div className="p-3 bg-[#F5F5F7] rounded-xl">
-                      <span className="font-bold text-[#1D1D1F] block mb-1">Acoustic Transducer Drivers</span>
-                      26-gram ear-canal-free body designed for aerodynamic helmet strap alignment and zero ear occlusion.
-                    </div>
-                    <div className="p-3 bg-[#F5F5F7] rounded-xl">
-                      <span className="font-bold text-[#1D1D1F] block mb-1">Dynamic Audio Ducking</span>
-                      Smoothly attenuates ambient media volume (Spotify/Podcasts) by 12dB prior to coaching transmission.
-                    </div>
-                  </div>
-                </div>
-
-                {/* Architecture Block 4 */}
-                <div className="apple-card p-6 bg-white border border-black/5">
-                  <div className="flex items-center justify-between mb-3">
-                    <div className="flex items-center gap-2.5 text-[#0071E3]">
-                      <Database className="w-5 h-5" />
-                      <h4 className="font-bold text-base text-[#1D1D1F]">4. Resilient Offline Caching & Cloud Synchronization</h4>
-                    </div>
-                    <span className="text-[10px] font-mono font-bold px-2.5 py-1 rounded-full bg-[#0071E3]/10 text-[#0071E3]">TLS 1.3 REST / OAuth2</span>
-                  </div>
-                  <p className="text-xs text-[#515154] leading-relaxed mb-3">
-                    When a ride concludes, encrypted SQLite telemetry logs sync to Alphanome.AI cloud infrastructure to update chronic training load (CTL) models and trigger direct webhooks to connected platforms.
-                  </p>
-                  <div className="flex flex-wrap gap-2 text-[11px] font-semibold text-[#1D1D1F]">
-                    <span className="px-3 py-1 bg-[#F5F5F7] rounded-lg border border-black/5">Strava v3 API</span>
-                    <span className="px-3 py-1 bg-[#F5F5F7] rounded-lg border border-black/5">Intervals.icu REST</span>
-                    <span className="px-3 py-1 bg-[#F5F5F7] rounded-lg border border-black/5">TrainingPeaks Connect</span>
-                    <span className="px-3 py-1 bg-[#F5F5F7] rounded-lg border border-black/5">Garmin Health API</span>
-                  </div>
-                </div>
-              </div>
-
-              <div className="mt-8 pt-4 border-t border-black/10 flex items-center justify-between">
-                <span className="text-[10px] font-mono text-[#86868B]">Alphanome.AI Proprietary Architecture &copy; {YEAR}</span>
-                <button 
-                  id="btn-close-arch-spec"
-                  type="button"
-                  onClick={() => setShowArchitectureModal(false)}
-                  className="bg-[#0071E3] text-white text-xs font-semibold px-6 py-2.5 rounded-full hover:bg-[#0077ED] transition-colors touch-manipulation"
-                >
-                  Close Specification
-                </button>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* SCIENTIFIC RESEARCH & PAPERS OVERVIEW MODAL */}
-        {showScienceModal && (
-          <div className="fixed inset-0 z-[200] bg-black/60 backdrop-blur-md flex items-center justify-center p-4">
-            <div className="bg-[#F5F5F7] rounded-3xl p-6 sm:p-8 max-w-4xl w-full max-h-[88vh] overflow-y-auto relative text-[#1D1D1F] border border-black/10 shadow-2xl">
-              <button 
-                id="close-science-modal"
-                type="button"
-                onClick={() => setShowScienceModal(false)} 
-                className="absolute top-5 right-5 text-gray-500 hover:text-black p-2 rounded-full bg-white border border-black/5 touch-manipulation"
-              >
-                <X className="w-5 h-5" />
-              </button>
-
-              <div className="flex items-center gap-3 mb-2">
-                <div className="p-2.5 bg-[#0071E3] text-white rounded-xl">
-                  <BookOpen className="w-6 h-6" />
-                </div>
-                <div>
-                  <h3 className="text-2xl font-extrabold text-[#1D1D1F]">Scientific Research & Whitepapers</h3>
-                  <span className="text-xs font-mono font-bold text-[#0071E3] uppercase tracking-wider">Alphanome.AI Endurance Publications</span>
-                </div>
-              </div>
-
-              <p className="text-xs text-[#86868B] mb-8 leading-relaxed max-w-2xl">
-                Discover the physiological research, cognitive load studies, and acoustic safety frameworks that power the Domestique.live real-time AI coaching engine.
-              </p>
-
-              <div className="space-y-6">
-                {RESEARCH_PAPERS.map((paper, idx) => (
-                  <div key={paper.title} className="apple-card p-6 bg-white border border-black/5 flex flex-col justify-between">
-                    <div>
-                      <div className="flex items-center justify-between mb-2">
-                        <span className="text-[10px] font-mono font-bold px-2.5 py-1 rounded-full bg-[#0071E3]/10 text-[#0071E3]">
-                          Paper 0{idx + 1} — {paper.tag}
-                        </span>
-                      </div>
-
-                      <h4 className="font-extrabold text-base text-[#1D1D1F] mb-3 leading-snug">
-                        {paper.title}
-                      </h4>
-
-                      <p className="text-xs text-[#515154] leading-relaxed mb-4">
-                        {paper.summary}
-                      </p>
-                    </div>
-
-                    <div className="pt-3 border-t border-black/5 flex justify-end">
-                      <a 
-                        id={`link-research-paper-${idx}`}
-                        href={paper.url} 
-                        target="_blank" 
-                        rel="noreferrer"
-                        className="inline-flex items-center gap-2 text-xs font-bold text-[#0071E3] hover:underline touch-manipulation"
-                      >
-                        Read Full Article on Alphanome.AI <ExternalLink className="w-3.5 h-3.5" />
-                      </a>
-                    </div>
-                  </div>
-                ))}
-              </div>
-
-              <div className="mt-8 pt-4 border-t border-black/10 flex items-center justify-between">
-                <span className="text-[10px] font-mono text-[#86868B]">Alphanome.AI Research Series &copy; {YEAR}</span>
-                <button 
-                  id="btn-close-science-modal"
-                  type="button"
-                  onClick={() => setShowScienceModal(false)}
-                  className="bg-[#0071E3] text-white text-xs font-semibold px-6 py-2.5 rounded-full hover:bg-[#0077ED] transition-colors touch-manipulation"
-                >
-                  Close Research
-                </button>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* FULL DETAILED POLICY MODAL */}
-        {activePolicy && (
-          <div className="fixed inset-0 z-[200] bg-black/60 backdrop-blur-md flex items-center justify-center p-4">
-            <div className="bg-[#F5F5F7] rounded-3xl p-6 sm:p-10 max-w-4xl w-full max-h-[88vh] overflow-y-auto relative text-[#1D1D1F] border border-black/10 shadow-2xl">
-              <button 
-                id="close-policy-modal"
-                type="button"
-                onClick={() => setActivePolicy(null)} 
-                className="absolute top-5 right-5 text-gray-500 hover:text-black p-2 rounded-full bg-white border border-black/5 touch-manipulation"
-              >
-                <X className="w-5 h-5" />
-              </button>
-
-              {/* RETURN & REFUND POLICY CONTENT */}
-              {activePolicy === 'return' && (
-                <div className="space-y-6 text-xs text-[#515154] leading-relaxed">
-                  <div className="border-b border-black/10 pb-4 mb-6">
-                    <span className="text-xs font-mono font-bold text-[#0071E3] uppercase tracking-wider block mb-1">Consumer Protection</span>
-                    <h2 className="text-2xl sm:text-3xl font-extrabold text-[#1D1D1F] tracking-tight">RETURN & REFUND POLICY</h2>
-                    <p className="text-[11px] font-mono text-[#86868B] mt-1">Effective Date: July 22, 2026</p>
-                  </div>
-
-                  <p className="text-sm text-[#1D1D1F]">
-                    At Domestique.live (a project of Alphanome.AI, Geneva, Switzerland), we want you to support our vision with total peace of mind. We stand behind our hardware, intelligence layer, and gear, which is why we offer a risk-free pre-order experience and standard post-delivery consumer protections.
-                  </p>
-
-                  <div className="apple-card p-5 bg-white border border-black/5 space-y-3">
-                    <h3 className="font-bold text-sm text-[#1D1D1F]">1. Pre-Order Guarantee: No-Questions-Asked Refunds</h3>
-                    <p>We understand that development timelines and personal circumstances change.</p>
-                    <p><strong className="text-[#1D1D1F]">100% Refundable:</strong> All purchases, tier pre-orders, and reservations made during the pre-order stage can be canceled and refunded in full, no questions asked, at any time until the official product release and dispatch date (Q1 2027).</p>
-                    <p><strong className="text-[#1D1D1F]">How to Cancel:</strong> Simply send an email to <a href="mailto:info@domestique.live" className="text-[#0071E3] font-semibold">info@domestique.live</a> with your order number or confirmation details.</p>
-                    <p><strong className="text-[#1D1D1F]">Processing:</strong> Refunds will be credited back to your original payment method (via Stripe) within 3–5 business days. No processing or cancellation fees apply.</p>
-                  </div>
-
-                  <div className="apple-card p-5 bg-white border border-black/5 space-y-3">
-                    <h3 className="font-bold text-sm text-[#1D1D1F]">2. Post-Release Returns (After Dispatch)</h3>
-                    <p>Once your hardware unit or merchandise has been delivered following official release, standard return rights apply:</p>
-                    <p><strong className="text-[#1D1D1F]">30-Day Evaluation Period:</strong> You have 30 calendar days from the date of delivery to initiate a return.</p>
-                    <p><strong className="text-[#1D1D1F]">Condition of Goods:</strong> To be eligible for a post-delivery refund:</p>
-                    <ul className="list-disc pl-5 space-y-1">
-                      <li>Hardware units, accessories, and bone-conduction headsets must be in their original packaging, complete with all cables, user guides, and components.</li>
-                      <li>Founder's apparel (jerseys, bib shorts, caps, gloves) must be unworn, unwashed, and returned with original tags intact.</li>
-                    </ul>
-                    <p><strong className="text-[#1D1D1F]">Return Authorization:</strong> Before shipping items back, please email <a href="mailto:info@domestique.live" className="text-[#0071E3] font-semibold">info@domestique.live</a> to receive a Return Merchandise Authorization (RMA) label and designated return address.</p>
-                  </div>
-
-                  <div className="apple-card p-5 bg-white border border-black/5 space-y-3">
-                    <h3 className="font-bold text-sm text-[#1D1D1F]">3. Refunds & Payment Processing</h3>
-                    <p><strong className="text-[#1D1D1F]">Pre-Order Stage:</strong> 100% of the transaction amount (including taxes/fees) is refunded directly to the payment card used at checkout.</p>
-                    <p><strong className="text-[#1D1D1F]">Post-Delivery Stage:</strong> Once your returned item is received and inspected at our fulfillment facility, a refund will be issued to your original payment method within 5–7 business days.</p>
-                    <p><strong className="text-[#1D1D1F]">Return Shipping Fees:</strong> For post-delivery returns driven by personal preference, customers are responsible for return freight costs unless the item is defective or shipped in error.</p>
-                  </div>
-
-                  <div className="apple-card p-5 bg-white border border-black/5 space-y-3">
-                    <h3 className="font-bold text-sm text-[#1D1D1F]">4. Warranty & Defective Products</h3>
-                    <p>All Domestique.live hardware units come with a 2-Year Limited Manufacturer Warranty covering electronic, acoustic, and structural defects.</p>
-                    <p>If your hardware fails to perform, encounters technical faults, or arrives damaged, we will repair or replace your unit at zero cost to you. Contact <a href="mailto:info@domestique.live" className="text-[#0071E3] font-semibold">info@domestique.live</a> for immediate troubleshooting and warranty replacements.</p>
-                  </div>
-
-                  <div className="pt-2 text-[11px] text-[#86868B]">
-                    <strong>Contact Us:</strong> <a href="mailto:info@domestique.live" className="text-[#0071E3]">info@domestique.live</a> | Parent Company: Alphanome.AI, Geneva, Switzerland
-                  </div>
-                </div>
-              )}
-
-              {/* SHIPPING POLICY CONTENT */}
-              {activePolicy === 'shipping' && (
-                <div className="space-y-6 text-xs text-[#515154] leading-relaxed">
-                  <div className="border-b border-black/10 pb-4 mb-6">
-                    <span className="text-xs font-mono font-bold text-[#0071E3] uppercase tracking-wider block mb-1">Global Logistics</span>
-                    <h2 className="text-2xl sm:text-3xl font-extrabold text-[#1D1D1F] tracking-tight">SHIPPING POLICY</h2>
-                    <p className="text-[11px] font-mono text-[#86868B] mt-1">Effective Date: July 22, 2026</p>
-                  </div>
-
-                  <p className="text-sm text-[#1D1D1F]">
-                    At Domestique.live (a brand under Alphanome.AI, Geneva, Switzerland), we are committed to providing a seamless experience for cyclists worldwide. This Shipping Policy outlines our fulfillment terms, delivery expectations, and shipping protocols for all hardware units and physical merchandise.
-                  </p>
-
-                  <div className="apple-card p-5 bg-white border border-black/5 space-y-3">
-                    <h3 className="font-bold text-sm text-[#1D1D1F]">1. Free Global Shipping</h3>
-                    <p>We believe premium cycling technology should be accessible everywhere. We are proud to offer 100% Free Standard Global Shipping on all orders, including:</p>
-                    <ul className="list-disc pl-5 space-y-1">
-                      <li>Domestique.live Hardware Units (standalone or tier packages)</li>
-                      <li>Pre-order Founder’s Apparel & Gear</li>
-                      <li>Replacement hardware accessories</li>
-                    </ul>
-                    <p>There are no hidden freight charges or delivery fees applied at checkout.</p>
-                  </div>
-
-                  <div className="apple-card p-5 bg-white border border-black/5 space-y-3">
-                    <h3 className="font-bold text-sm text-[#1D1D1F]">2. Pre-Orders & Production Timeline (Q1 2027 Series)</h3>
-                    <p>Because Domestique.live hardware is produced in dedicated limited-run batches, please note the following fulfillment details for pre-orders:</p>
-                    <p><strong className="text-[#1D1D1F]">Estimated Fulfillment Window:</strong> Orders placed under the Q1 2027 Founder's Series are scheduled for dispatch during Q1 2027.</p>
-                    <p><strong className="text-[#1D1D1F]">Batch Tracking:</strong> Once your unit enters final assembly and packaging, you will receive email updates regarding your specific batch dispatch schedule.</p>
-                    <p><strong className="text-[#1D1D1F]">Address Updates:</strong> You may update your shipping destination anytime prior to final dispatch by contacting our support team at <a href="mailto:info@domestique.live" className="text-[#0071E3] font-semibold">info@domestique.live</a>.</p>
-                  </div>
-
-                  <div className="apple-card p-5 bg-white border border-black/5 space-y-3">
-                    <h3 className="font-bold text-sm text-[#1D1D1F]">3. Shipping Methods & Estimated Delivery Times</h3>
-                    <p>Once your package is processed and handed to our international carrier partners (e.g., DHL Express, FedEx, or national postal services), estimated transit times are as follows:</p>
-                    
-                    <div className="overflow-x-auto rounded-xl border border-black/10 my-3">
-                      <table className="w-full text-left border-collapse">
-                        <thead>
-                          <tr className="bg-[#1D1D1F] text-white text-[11px] uppercase font-bold">
-                            <th className="p-3 border-r border-white/10">Destination / Region</th>
-                            <th className="p-3">Estimated Transit Time (After Dispatch)</th>
-                          </tr>
-                        </thead>
-                        <tbody className="divide-y divide-black/10 bg-[#F5F5F7]">
-                          <tr>
-                            <td className="p-3 font-semibold border-r border-black/5">Switzerland & European Union (EU)</td>
-                            <td className="p-3">3 – 5 Business Days</td>
-                          </tr>
-                          <tr>
-                            <td className="p-3 font-semibold border-r border-black/5">United Kingdom & North America</td>
-                            <td className="p-3">5 – 8 Business Days</td>
-                          </tr>
-                          <tr>
-                            <td className="p-3 font-semibold border-r border-black/5">Asia-Pacific & Rest of World</td>
-                            <td className="p-3">7 – 12 Business Days</td>
-                          </tr>
-                        </tbody>
-                      </table>
-                    </div>
-                    <p className="text-[10px] text-[#86868B]">Note: Delivery estimates do not account for potential customs processing delays at destination borders.</p>
-                  </div>
-
-                  <div className="apple-card p-5 bg-white border border-black/5 space-y-3">
-                    <h3 className="font-bold text-sm text-[#1D1D1F]">4. Order Tracking</h3>
-                    <p>As soon as your order is dispatched, a Shipment Confirmation Email will be sent containing your unique tracking code and a direct link to the carrier’s portal. Please allow up to 24–48 hours for tracking activity to register in the carrier’s system.</p>
-                  </div>
-
-                  <div className="apple-card p-5 bg-white border border-black/5 space-y-3">
-                    <h3 className="font-bold text-sm text-[#1D1D1F]">5. Customs, Duties & Import Taxes</h3>
-                    <p><strong className="text-[#1D1D1F]">European Union, Switzerland & UK:</strong> Applicable local Value Added Tax (VAT) is calculated and disclosed in accordance with regional consumer laws.</p>
-                    <p><strong className="text-[#1D1D1F]">International Destinations (Rest of World):</strong> Packages are shipped DDU (Delivered Duty Unpaid) unless otherwise explicitly stated. Any local import duties, tariffs, or governmental customs fees levied upon entry into your country remain the responsibility of the recipient.</p>
-                  </div>
-
-                  <div className="apple-card p-5 bg-white border border-black/5 space-y-3">
-                    <h3 className="font-bold text-sm text-[#1D1D1F]">6. Damaged, Lost, or Delayed Shipments</h3>
-                    <p>We take full responsibility for ensuring your hardware arrives safely.</p>
-                    <p><strong className="text-[#1D1D1F]">Damaged in Transit:</strong> If your package arrives visibly damaged or tampered with, please take photos immediately and contact <a href="mailto:info@domestique.live" className="text-[#0071E3] font-semibold">info@domestique.live</a> within 7 days of delivery. We will arrange a replacement unit at no cost.</p>
-                    <p><strong className="text-[#1D1D1F]">Lost Packages:</strong> If your tracking status shows no movement for more than 14 business days, please report it to us. We will initiate an official carrier investigation and replace lost units accordingly.</p>
-                  </div>
-
-                  <div className="pt-2 text-[11px] text-[#86868B]">
-                    <strong>Contact Us:</strong> <a href="mailto:info@domestique.live" className="text-[#0071E3]">info@domestique.live</a> | Parent Company: Alphanome.AI, Geneva, Switzerland
-                  </div>
-                </div>
-              )}
-
-              {/* PRIVACY POLICY CONTENT */}
-              {activePolicy === 'privacy' && (
-                <div className="space-y-6 text-xs text-[#515154] leading-relaxed">
-                  <div className="border-b border-black/10 pb-4 mb-6">
-                    <span className="text-xs font-mono font-bold text-[#0071E3] uppercase tracking-wider block mb-1">Data Governance</span>
-                    <h2 className="text-2xl sm:text-3xl font-extrabold text-[#1D1D1F] tracking-tight">PRIVACY POLICY</h2>
-                    <p className="text-[11px] font-mono text-[#86868B] mt-1">Last Updated: July 22, 2026</p>
-                  </div>
-
-                  <div className="apple-card p-5 bg-white border border-black/5 space-y-3">
-                    <h3 className="font-bold text-sm text-[#1D1D1F]">1. Introduction & Data Controller</h3>
-                    <p>Welcome to Domestique.live. Domestique.live is a project and brand operated by Alphanome.AI, a company registered in Geneva, Switzerland (referred to as "Alphanome.AI", "we", "us", or "our").</p>
-                    <p>We are committed to protecting your privacy and handling your personal data with transparency and care. This Privacy Policy explains how we collect, use, process, and safeguard your information when you visit <a href="https://domestique.live" target="_blank" rel="noreferrer" className="text-[#0071E3]">https://domestique.live</a>, purchase our products, or use our hardware, application, and real-time audio coaching services (collectively, the "Services").</p>
-                    <p><strong className="text-[#1D1D1F]">Contact Information / Data Controller:</strong><br />
-                    Company Name: Alphanome.AI<br />
-                    Registered Location: Geneva, Switzerland<br />
-                    General Privacy Inquiries: <a href="mailto:info@domestique.live" className="text-[#0071E3]">info@domestique.live</a><br />
-                    Partnerships & Business Data: <a href="mailto:partners@domestique.live" className="text-[#0071E3]">partners@domestique.live</a></p>
-                  </div>
-
-                  <div className="apple-card p-5 bg-white border border-black/5 space-y-3">
-                    <h3 className="font-bold text-sm text-[#1D1D1F]">2. Information We Collect</h3>
-                    <p>We collect information to provide, personalize, and improve our performance intelligence layer for cycling.</p>
-                    
-                    <p><strong className="text-[#1D1D1F]">A. Information You Provide Directly:</strong></p>
-                    <ul className="list-disc pl-5 space-y-1">
-                      <li><strong>Account & Identity Data:</strong> Name, email address, physical address, and communication preferences provided during newsletter subscription, pre-orders, or account creation.</li>
-                      <li><strong>Payment & Financial Data:</strong> Payment card details, billing address, and transaction histories. Payment processing is handled securely by Stripe; we do not directly store full credit card numbers.</li>
-                      <li><strong>Support & Feedback Data:</strong> Information submitted during customer support inquiries.</li>
-                    </ul>
-
-                    <p><strong className="text-[#1D1D1F]">B. Fitness, Sensor & Telemetry Data (App & Hardware Users):</strong></p>
-                    <p>When you connect your cycling sensors or head unit to the Domestique.live application, we process:</p>
-                    <ul className="list-disc pl-5 space-y-1">
-                      <li><strong>Real-Time Biometrics:</strong> Heart rate, power output (watts), cadence, speed, and real-time effort zones.</li>
-                      <li><strong>Location & Routing Data:</strong> GPS coordinates, elevation, route maps, and velocity.</li>
-                      <li><strong>Third-Party Integrations:</strong> Data synced via Bluetooth or connected platforms (Strava, Garmin Connect) with explicit authorization.</li>
-                    </ul>
-
-                    <p><strong className="text-[#1D1D1F]">C. Technical & Automated Collection:</strong></p>
-                    <ul className="list-disc pl-5 space-y-1">
-                      <li><strong>Usage & Analytics Data:</strong> IP address, browser type, operating system, and timestamp logs.</li>
-                      <li><strong>Cookies & Tracking:</strong> Essential cookies ensuring platform functionality and web traffic analysis.</li>
-                    </ul>
-                  </div>
-
-                  <div className="apple-card p-5 bg-white border border-black/5 space-y-3">
-                    <h3 className="font-bold text-sm text-[#1D1D1F]">3. How We Use Your Information</h3>
-                    <ul className="list-disc pl-5 space-y-1">
-                      <li><strong>Service Delivery & Execution:</strong> Processing pre-orders, delivering hardware, and executing real-time AI audio coaching algorithms.</li>
-                      <li><strong>Personalization:</strong> Tailoring voice instructions, pacing strategies, and recovery prompts based on biometric threshold zones.</li>
-                      <li><strong>Communication:</strong> Transaction confirmations, product delivery updates, and technical alerts.</li>
-                      <li><strong>Marketing (Opt-in):</strong> Delivering newsletter insights regarding upcoming production batches or apparel releases.</li>
-                      <li><strong>Security & Integrity:</strong> Monitoring and preventing fraudulent activities under Swiss law.</li>
-                    </ul>
-                  </div>
-
-                  <div className="apple-card p-5 bg-white border border-black/5 space-y-3">
-                    <h3 className="font-bold text-sm text-[#1D1D1F]">4. Legal Basis for Processing</h3>
-                    <p>We process personal data in accordance with the Swiss Federal Act on Data Protection (FADP) and Article 6 of the EU GDPR:</p>
-                    <ul className="list-disc pl-5 space-y-1">
-                      <li><strong>Contractual Necessity:</strong> Required to fulfill pre-order contracts and operate real-time AI services.</li>
-                      <li><strong>Consent:</strong> Explicit opt-ins for marketing newsletters and third-party integrations.</li>
-                      <li><strong>Legitimate Interests:</strong> Maintaining platform security, preventing fraud, and optimizing algorithms.</li>
-                    </ul>
-                  </div>
-
-                  <div className="apple-card p-5 bg-white border border-black/5 space-y-3">
-                    <h3 className="font-bold text-sm text-[#1D1D1F]">5. Information Sharing & Third-Party Service Providers</h3>
-                    <p>We do not sell, rent, or trade your personal data. Data is shared strictly with authorized infrastructure providers:</p>
-                    <ul className="list-disc pl-5 space-y-1">
-                      <li><strong>Payment Processors:</strong> Stripe (secure payment gateway).</li>
-                      <li><strong>Email Providers:</strong> MailerLite (newsletter distribution).</li>
-                      <li><strong>Hosting & Cloud:</strong> Amazon Web Services (AWS) / Cloudflare / Cloudinary.</li>
-                    </ul>
-                  </div>
-
-                  <div className="apple-card p-5 bg-white border border-black/5 space-y-3">
-                    <h3 className="font-bold text-sm text-[#1D1D1F]">6. Your Rights & Regulatory Authorities</h3>
-                    <p>Under Swiss FADP and EU GDPR, you hold rights to access, rectify, erase ("Right to be Forgotten"), restrict, or export your data. Contact <a href="mailto:info@domestique.live" className="text-[#0071E3] font-semibold">info@domestique.live</a> to exercise your rights.</p>
-                    <p>You also have the right to lodge a complaint with the Swiss Federal Data Protection and Information Commissioner (FDPIC):<br />
-                    Feldeggweg 1, CH-3003 Berne, Switzerland | Website: <a href="https://www.edoeb.admin.ch" target="_blank" rel="noreferrer" className="text-[#0071E3]">https://www.edoeb.admin.ch</a></p>
-                  </div>
-
-                  <div className="pt-2 text-[11px] text-[#86868B]">
-                    <strong>Contact Us:</strong> <a href="mailto:info@domestique.live" className="text-[#0071E3]">info@domestique.live</a> | Parent Company: Alphanome.AI, Geneva, Switzerland
-                  </div>
-                </div>
-              )}
-
-              <div className="mt-8 pt-4 border-t border-black/10 flex justify-end">
-                <button 
-                  id="btn-close-active-policy"
-                  type="button"
-                  onClick={() => setActivePolicy(null)}
-                  className="bg-[#0071E3] text-white text-xs font-semibold px-6 py-2.5 rounded-full hover:bg-[#0077ED] transition-colors touch-manipulation"
-                >
-                  Close Policy
-                </button>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* DISCOUNT MODAL */}
-        {showDiscountPopup && (
-          <div className="fixed inset-0 z-[200] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
-            <div className="bg-white rounded-2xl p-6 max-w-sm w-full text-center relative shadow-2xl">
-              <button id="close-discount-popup" type="button" onClick={() => setShowDiscountPopup(false)} className="absolute top-3 right-3 text-gray-400 touch-manipulation">×</button>
-              <span className="text-xs font-bold text-[#0071E3] uppercase block mb-1">Exclusive Offer</span>
-              <h3 className="text-2xl font-bold mb-2">Claim 25% Off</h3>
-              <p className="text-xs text-[#86868B] mb-4">Use discount code at checkout for your pre-order.</p>
-              <div className="bg-[#F5F5F7] border border-black/10 rounded-xl p-3 mb-4 flex items-center justify-between">
-                <span className="font-mono font-bold text-lg">25OFF</span>
-                <button id="btn-copy-discount-code" type="button" onClick={handleCopyDiscount} className="bg-[#0071E3] text-white text-xs font-semibold px-3 py-1.5 rounded-lg touch-manipulation">
-                  {discountCopied ? 'Copied!' : 'Copy'}
-                </button>
-              </div>
-              <button id="btn-discount-preorder-now" type="button" onClick={() => { setShowDiscountPopup(false); scrollToRef(pricingRef); }} className="w-full bg-[#0071E3] text-white text-xs font-semibold py-3 rounded-xl touch-manipulation">Pre-Order Now</button>
-            </div>
-          </div>
-        )}
-      </div>
-    </HelmetProvider>
-  );
-}
\ No newline at end of file

From 96da0610f5affeee98d609126b6b847a63b31b42 Mon Sep 17 00:00:00 2001
From: James Titus <titusjames299@gmail.com>
Date: Thu, 13 Aug 2026 15:44:13 +0530
Subject: [PATCH 5/6] chore: v 5.1.0-beta.1

---
 package.json                            |  2 +-
 scripts/manual/test-standalone-site.mjs | 22 +++++++++++++---------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index afe2e83..b0adf79 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-code-canvas",
-  "version": "5.0.0",
+  "version": "5.1.0-beta.1",
   "packageManager": "bun@1.3.14",
   "sideEffects": false,
   "description": "A browser-based canvas for rendering React components at runtime",
diff --git a/scripts/manual/test-standalone-site.mjs b/scripts/manual/test-standalone-site.mjs
index 6c5867c..556ae7b 100644
--- a/scripts/manual/test-standalone-site.mjs
+++ b/scripts/manual/test-standalone-site.mjs
@@ -15,12 +15,20 @@
  *
  *   bun run test:manual:site ./MyPage.jsx
  *   bun run test:manual:site ./MyPage.jsx ./out
+ *
+ * The output directory is the second positional, or --out=DIR in suite mode
+ * where there is no file to put first:
+ *
+ *   bun run test:manual:site --out=./out
  */
 
 import { readFile, rm } from "node:fs/promises";
 import { buildStandaloneSite, writeStandaloneSite } from "../../dist/builder.mjs";
 
-const OUT = "/tmp/react-code-canvas-site";
+const args = process.argv.slice(2);
+const outFlag = args.find((a) => a.startsWith("--out="))?.slice("--out=".length);
+const [fileArg, outArg] = args.filter((a) => !a.startsWith("-"));
+const OUT = outFlag ?? outArg ?? "/tmp/react-code-canvas-site";
 
 let failures = 0;
 const check = (label, ok, detail = "") => {
@@ -35,11 +43,7 @@ const kb = (s) => `${(Buffer.byteLength(s) / 1024).toFixed(1)} KB`;
 /* file mode                                                                  */
 /* -------------------------------------------------------------------------- */
 
-const [fileArg, outArg] = process.argv.slice(2);
-
 if (fileArg) {
-  const outDir = outArg ?? "out";
-
   let code;
   try {
     code = await readFile(fileArg, "utf8");
@@ -48,7 +52,7 @@ if (fileArg) {
     process.exit(1);
   }
 
-  console.log(`\nbuilding ${fileArg} -> ${outDir}/`);
+  console.log(`\nbuilding ${fileArg} -> ${OUT}/`);
 
   // Imports do resolve here, unlike in the canvas: sucrase rewrites them to
   // `require(...)` and esbuild bundles those calls (verified -- no `require`
@@ -84,11 +88,11 @@ if (fileArg) {
   console.log(`  stylesheet    ${css ? "yes, Tailwind compiled" : "none -- no className in the code"}`);
   console.log(`  bundle        ${kb(js)}`);
 
-  await rm(outDir, { recursive: true, force: true });
-  const written = await writeStandaloneSite(code, outDir, {
+  await rm(OUT, { recursive: true, force: true });
+  const written = await writeStandaloneSite(code, OUT, {
     title: fileArg.split("/").pop(),
   });
-  console.log(`\n  wrote ${written.length} files\n\n  npx serve ${outDir}\n`);
+  console.log(`\n  wrote ${written.length} files\n\n  npx serve ${OUT}\n`);
   process.exit(0);
 }
 

From 1367714c688b82a94dab6e494ab1b2eece156a0b Mon Sep 17 00:00:00 2001
From: James Titus <titusjames299@gmail.com>
Date: Fri, 14 Aug 2026 14:30:47 +0530
Subject: [PATCH 6/6] chore: v 5.1.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b0adf79..ce2283d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-code-canvas",
-  "version": "5.1.0-beta.1",
+  "version": "5.1.0",
   "packageManager": "bun@1.3.14",
   "sideEffects": false,
   "description": "A browser-based canvas for rendering React components at runtime",