diff --git a/web/app/about/page.tsx b/web/app/about/page.tsx
index 2e6833d1..139f861f 100644
--- a/web/app/about/page.tsx
+++ b/web/app/about/page.tsx
@@ -6,7 +6,7 @@ import { HomePosterText } from '../../components/home/HomePosterText';
 import { ScribbleUnderline } from '../../components/home/icons';
 import { SiteFooter } from '../../components/SiteFooter';
 import { SiteNav } from '../../components/SiteNav';
-import { HOME_OG_IMAGE_PATH, ogImage } from '../../lib/og-meta';
+import { DEFAULT_OG_IMAGE_PATH, ogImage } from '../../lib/og-meta';
 import { absoluteUrl } from '../../lib/site';
 import s from '../landing.module.css';
 
@@ -53,14 +53,14 @@ export const metadata: Metadata = {
       'Communication infrastructure for software teams moving from human-centered tools to agent-centered engineering.',
     url: absoluteUrl('/about'),
     type: 'website',
-    images: [ogImage(HOME_OG_IMAGE_PATH, 'Agent Relay')],
+    images: [ogImage(DEFAULT_OG_IMAGE_PATH, 'Agent Relay')],
   },
   twitter: {
     card: 'summary_large_image',
     title: 'Agent Relay',
     description:
       'Communication infrastructure for software teams moving from human-centered tools to agent-centered engineering.',
-    images: [absoluteUrl(HOME_OG_IMAGE_PATH)],
+    images: [absoluteUrl(DEFAULT_OG_IMAGE_PATH)],
   },
 };
 
diff --git a/web/app/flows/FlowExamples.tsx b/web/app/flows/FlowExamples.tsx
new file mode 100644
index 00000000..1d8f6870
--- /dev/null
+++ b/web/app/flows/FlowExamples.tsx
@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import { highlightCode } from '../../lib/syntax';
+import { flowExamples } from './flow-examples';
+import { FlowScriptCarousel } from './FlowScriptCarousel';
+
+export async function FlowExamples({ introductoryCode }: { introductoryCode: ReactNode }) {
+  const examples = await Promise.all(flowExamples.map(async ({ code, ...example }, index) => ({
+    ...example,
+    codeHtml: index === 0 ? '' : (await highlightCode(code, 'typescript')).codeHtml,
+  })));
+
+  return <FlowScriptCarousel examples={examples} introductoryCode={introductoryCode} />;
+}
diff --git a/web/app/flows/FlowScriptCarousel.tsx b/web/app/flows/FlowScriptCarousel.tsx
new file mode 100644
index 00000000..82437b8d
--- /dev/null
+++ b/web/app/flows/FlowScriptCarousel.tsx
@@ -0,0 +1,86 @@
+'use client';
+
+import { useId, useState, type ReactNode } from 'react';
+import Link from 'next/link';
+import { ArrowRight } from 'lucide-react';
+import s from './flows.module.css';
+
+type Example = {
+  id: string;
+  label: string;
+  title: string;
+  description: string;
+  filename: string;
+  codeHtml: string;
+};
+
+export function FlowScriptCarousel({ examples, introductoryCode }: {
+  examples: Example[];
+  introductoryCode: ReactNode;
+}) {
+  const [active, setActive] = useState(0);
+  const id = useId();
+  const example = examples[active];
+
+  return (
+    <div className={`${s.codeSection} ${s.scriptCarousel}`} role="region" aria-roledescription="carousel" aria-label="Example Flow scripts">
+      <div className={s.codeCopy}>
+        <div id={`${id}-explanation`} className={s.selectedExplanation}>
+          <h2>{active === 0 ? 'A Flow is a script that runs your agents.' : example.title}</h2>
+          <p>
+            {active === 0
+              ? 'You write the steps in TypeScript: which agent does the work, what it should produce, and what to check before continuing.'
+              : example.description}
+          </p>
+          <p>
+            When the flow runs, you&apos;ve got a dependable, auditable script that babysits your agents for you.
+          </p>
+        </div>
+
+        <Link href="/docs/relayflows" className={s.textLink}>
+          Explore the docs <ArrowRight size={16} aria-hidden="true" />
+        </Link>
+      </div>
+
+      <div id={`${id}-script`} className={s.codeBlock} role="group" aria-label={`${example.label} script`}>
+        <div className={s.codeHeader}>
+          <div className={s.codeChrome} aria-hidden="true"><span /><span /><span /></div>
+          <span>{example.filename}</span>
+        </div>
+        <div className={s.scriptViewport}>
+          <div className={s.scriptSizeReference} aria-hidden="true">{introductoryCode}</div>
+          <div key={example.id} className={s.scriptScroll} tabIndex={0} role="region" aria-label={`${example.label} TypeScript example`}>
+
+          {active === 0 ? introductoryCode : (
+            <pre
+              className={`${s.codePre} ${s.carouselCode}`}
+              aria-label={`${example.label} TypeScript example`}
+            >
+              <code dangerouslySetInnerHTML={{ __html: example.codeHtml }} />
+            </pre>
+          )}
+          </div>
+        </div>
+      </div>
+      <div className={s.useCasePicker}>
+        <p id={`${id}-picker-label`} className={s.useCaseLabel}>Explore use cases</p>
+        <span className={s.visuallyHidden} aria-live="polite" aria-atomic="true">{example.label}</span>
+        <div className={s.useCaseGrid} role="group" aria-labelledby={`${id}-picker-label`}>
+          {examples.map((item, index) => (
+            <button
+              key={item.id}
+              type="button"
+              className={s.useCaseOption}
+              aria-pressed={active === index}
+              aria-controls={`${id}-explanation ${id}-script`}
+              onClick={() => setActive(index)}
+            >
+              <span className={s.useCaseNumber}>{String(index + 1).padStart(2, '0')}</span>
+              {item.label}
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/web/app/flows/IntegrationMarquee.tsx b/web/app/flows/IntegrationMarquee.tsx
new file mode 100644
index 00000000..a3fd1ea4
--- /dev/null
+++ b/web/app/flows/IntegrationMarquee.tsx
@@ -0,0 +1,84 @@
+'use client';
+
+import { useLayoutEffect, useRef, useState, type CSSProperties } from 'react';
+import Image from 'next/image';
+import { DatabaseBackup } from 'lucide-react';
+import { SiPostgresql, SiRedis, SiPosthog } from 'react-icons/si';
+import s from './flows.module.css';
+
+function brand(name: string, slug: string) {
+  return { name, logo: <Image src={`/integration-logos/${slug}.svg`} alt="" width={36} height={36} /> };
+}
+
+const integrations = [
+  brand('GitHub', 'github'),
+  brand('Linear', 'linear'),
+  brand('Slack', 'slack'),
+  brand('Jira', 'jira'),
+  brand('Notion', 'notion'),
+  brand('Stripe', 'stripe'),
+  brand('HubSpot', 'hubspot'),
+  brand('Intercom', 'intercom'),
+  { name: 'Postgres', logo: <SiPostgresql size={36} aria-hidden="true" /> },
+  { name: 'Redis', logo: <SiRedis size={36} aria-hidden="true" /> },
+  { name: 'S3', logo: <DatabaseBackup size={36} aria-hidden="true" /> },
+  brand('Cloudflare', 'cloudflare'),
+  brand('Sendgrid', 'sendgrid'),
+  brand('Mailgun', 'mailgun'),
+  brand('Gmail', 'gmail'),
+  brand('Google Calendar', 'google-calendar'),
+  brand('Segment', 'segment'),
+  { name: 'PostHog', logo: <SiPosthog size={36} aria-hidden="true" /> },
+];
+
+function IntegrationRow({ row }: { row: typeof integrations }) {
+  const trackRef = useRef<HTMLDivElement>(null);
+  const [copies, setCopies] = useState(2);
+
+  useLayoutEffect(() => {
+    const track = trackRef.current;
+    const window = track?.parentElement;
+    const group = track?.firstElementChild;
+    if (!track || !window || !group) return;
+
+    const resize = () => {
+      const groupWidth = group.getBoundingClientRect().width;
+      if (groupWidth > 0) {
+        setCopies(Math.max(2, Math.ceil(window.clientWidth / groupWidth) + 1));
+      }
+    };
+    resize();
+    const observer = new ResizeObserver(resize);
+    observer.observe(window);
+    observer.observe(group);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div ref={trackRef} className={s.integrationTrack}
+      style={{ '--integration-copies': copies } as CSSProperties}>
+      {Array.from({ length: copies }, (_, copy) => (
+        <ul key={copy} className={s.integrationGroup} aria-hidden={copy > 0 || undefined}>
+          {row.map(({ name, logo }) => (
+            <li key={name} className={s.integrationLogo}>
+              {logo}
+              <span>{name}</span>
+            </li>
+          ))}
+        </ul>
+      ))}
+    </div>
+  );
+}
+
+export function IntegrationMarquee() {
+  return (
+    <div className={s.integrationsMarquee}>
+      <div className={s.integrationWindow}>
+        {[integrations.slice(0, 9), integrations.slice(9)].map((row, index) => (
+          <IntegrationRow key={index} row={row} />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/web/app/flows/flow-examples.ts b/web/app/flows/flow-examples.ts
new file mode 100644
index 00000000..ef4291ad
--- /dev/null
+++ b/web/app/flows/flow-examples.ts
@@ -0,0 +1,66 @@
+export const flowExamples = [
+  {
+    "id": "software-factory",
+    "label": "Software factory",
+    "title": "Turn a ticket into a pull request.",
+    "description": "Plan the change, write the code, and run the tests before opening a PR.",
+    "filename": "software-factory.flow.ts",
+    "code": "import { flow } from \"@relayflows/surface\";\n\ntype Input = {\n  repo: string;\n  ticket: string;\n};\n\nexport default flow<Input>(\n  \"software-factory\",\n  { budget: \"$5/run\" },\n  async (f, input) => {\n    await f.agent(\"planner\", {\n      task: `${input.ticket} Write a plan to plan.md.`,\n    }).gate((r) => r.artifacts.includes(\"plan.md\"));\n\n    await f.agent(\"implementer\", {\n      task: \"Read plan.md. Implement it on branch flow/fix. \" +\n        \"Write the PR description to summary.md.\",\n    }).gate((r) => r.artifacts.includes(\"summary.md\"));\n\n    // The tests run outside the agent.\n    // The agent cannot lie about the exit code.\n    await f.run(\"git checkout flow/fix && npm test\");\n\n    await f.agent(\"reviewer\", {\n      task: \"Review the diff against main. \" +\n        \"Write review.passed only if ready for a PR.\",\n    }).gate((r) => r.artifacts.includes(\"review.passed\"));\n\n    // Deterministic step, not an agent decision.\n    await f.github.createPullRequest({\n      repo: input.repo,\n      head: \"flow/fix\",\n      base: \"main\",\n      bodyPath: \"summary.md\",\n    });\n    f.done(\"success\");\n  },\n);"
+  },
+  {
+    "id": "pr-review",
+    "label": "Code review",
+    "title": "Give every PR a second opinion.",
+    "description": "Review a diff for security, correctness, and performance in parallel. Then reconcile the findings.",
+    "filename": "pr-review.flow.ts",
+    "code": "import { flow } from \"@relayflows/surface\";\n\nexport default flow(\n  \"pr-review\",\n  { budget: \"$5/run\" },\n  async (f) => {\n    const diff = await f.run(\"git diff main...HEAD\");\n    const lenses = [\"security\", \"correctness\", \"performance\"];\n\n    await Promise.all(lenses.map((lens) =>\n      f.agent(`${lens}-reviewer`, {\n        task: `Review this diff for ${lens}: ${diff}. ` +\n          `Write findings to review/${lens}.md.`,\n        workspace: \"review/: readwrite\",\n      }).gate((r) =>\n        r.artifacts.includes(`review/${lens}.md`)\n      )\n    ));\n\n    // Resolve disagreements between reviewers.\n    await f.agent(\"reconciler\", {\n      task: \"Read the three reviews in review/. \" +\n        \"Resolve disagreements, flag unresolved issues, \" +\n        \"and write review/consensus.md.\",\n      workspace: \"review/: readwrite\",\n    }).gate((r) =>\n      r.artifacts.includes(\"review/consensus.md\")\n    );\n    f.done(\"success\");\n  },\n);"
+  },
+  {
+    "id": "support-triage",
+    "label": "Customer support",
+    "title": "Draft the reply. Let a human decide.",
+    "description": "Draft a response to a support thread, get approval, and reply in Slack.",
+    "filename": "support-triage.flow.ts",
+    "code": "import { flow } from \"@relayflows/surface\";\n\ntype Input = {\n  message: string;\n  channel: string;\n  threadTs: string;\n  approver: string;\n};\n\nexport default flow<Input>(\n  \"support-triage\",\n  { budget: \"$5/run\" },\n  async (f, input) => {\n    await f.agent(\"triage\", {\n      task: `Classify this request: ${input.message}. ` +\n        \"Write the category and urgency to triage.md.\",\n    }).gate((r) => r.artifacts.includes(\"triage.md\"));\n\n    await f.agent(\"writer\", {\n      task: `Read triage.md and draft a reply to: ` +\n        `${input.message}. Write only the reply to reply.md.`,\n    }).gate((r) => r.artifacts.includes(\"reply.md\"));\n\n    const reply = await f.run(\"cat reply.md\");\n    const approved = await f.human(\n      `Send this reply?\\n\\n${reply}`,\n      { to: input.approver },\n    );\n    if (!approved) return f.done(\"canceled\");\n\n    // Send only after a human approves.\n    await f.slack.reply(input.channel, input.threadTs, reply);\n    f.done(\"success\");\n  },\n);"
+  },
+  {
+    "id": "content-pipeline",
+    "label": "Content publishing",
+    "title": "Put a fact-check between draft and publish.",
+    "description": "Research, draft, and check a post before a human approves sharing it in Slack.",
+    "filename": "content-pipeline.flow.ts",
+    "code": "import { flow } from \"@relayflows/surface\";\n\ntype Input = {\n  topic: string;\n  channel: string;\n  approver: string;\n};\n\nexport default flow<Input>(\n  \"content-pipeline\",\n  { budget: \"$5/run\" },\n  async (f, input) => {\n    await f.agent(\"researcher\", {\n      task: `Research ${input.topic}. Cite your sources. ` +\n        \"Write research.md.\",\n    }).gate((r) => r.artifacts.includes(\"research.md\"));\n\n    await f.agent(\"writer\", {\n      task: \"Use research.md to write post.md. \" +\n        \"Keep the source links with each claim.\",\n    }).gate((r) => r.artifacts.includes(\"post.md\"));\n\n    await f.agent(\"fact-checker\", {\n      task: \"Check post.md against its sources. \" +\n        \"Write checked.passed only if all claims hold up.\",\n    }).gate((r) => r.artifacts.includes(\"checked.passed\"));\n\n    const post = await f.run(\"cat post.md\");\n    const approved = await f.human(\n      `Publish this post?\\n\\n${post}`,\n      { to: input.approver },\n    );\n    if (!approved) return f.done(\"canceled\");\n\n    await f.slack.post(input.channel, post);\n    f.done(\"success\");\n  },\n);"
+  },
+  {
+    "id": "repo-migration",
+    "label": "Repo migrations",
+    "title": "Make the same change across repositories.",
+    "description": "Apply a migration in each local checkout, test it, and open a PR.",
+    "filename": "repo-migration.flow.ts",
+    "code": "import { flow } from \"@relayflows/surface\";\n\ntype Input = {\n  repos: { path: string; slug: string }[];\n  instructions: string;\n};\n\nexport default flow<Input>(\n  \"repo-migration\",\n  { budget: \"$5/run\" },\n  async (f, input) => {\n    for (const repo of input.repos) {\n      // Quote the local checkout path for shell commands.\n      const dir = \"'\" + repo.path.replaceAll(\"'\", \"'\\\"'\\\"'\") + \"'\";\n\n      await f.agent(`migrate-${repo.slug}`, {\n        cwd: repo.path,\n        task: `${input.instructions} ` +\n          \"Use branch flow/migration and commit the change. \" +\n          \"Write migration.md with a summary.\",\n      }).gate((r) => r.artifacts.includes(\"migration.md\"));\n\n      await f.run(`cd ${dir} && npm test`);\n\n      await f.agent(`review-${repo.slug}`, {\n        cwd: repo.path,\n        task: \"Review this migration against main. \" +\n          \"Write review.passed only if it is ready.\",\n      }).gate((r) => r.artifacts.includes(\"review.passed\"));\n\n      // Each checkout opens its own pull request.\n      await f.run(\n        `cd ${dir} && gh pr create --base main ` +\n        '--head flow/migration --title \"Apply migration\" ' +\n        '--body-file migration.md'\n      );\n    }\n    f.done(\"success\");\n  },\n);"
+  },
+  {
+    "id": "voicemail-follow-up",
+    "label": "Voicemail follow-up",
+    "title": "Turn a voicemail into a callback brief.",
+    "description": "Use a transcript to prepare the callback, then send the approved brief to a teammate.",
+    "filename": "voicemail-follow-up.flow.ts",
+    "code": "import { flow } from \"@relayflows/surface\";\n\ntype Input = {\n  transcript: string;\n  approver: string;\n  callbackOwner: string;\n};\n\nexport default flow<Input>(\n  \"voicemail-follow-up\",\n  { budget: \"$5/run\" },\n  async (f, input) => {\n    await f.agent(\"triage\", {\n      task: `Read this voicemail: ${input.transcript}. ` +\n        \"Identify urgency and the caller's request. \" +\n        \"Write triage.md.\",\n    }).gate((r) => r.artifacts.includes(\"triage.md\"));\n\n    await f.agent(\"callback-writer\", {\n      task: \"Read triage.md. Prepare a callback brief \" +\n        \"with the questions we need to answer. \" +\n        \"Write callback.md.\",\n    }).gate((r) => r.artifacts.includes(\"callback.md\"));\n\n    const brief = await f.run(\"cat callback.md\");\n    const approved = await f.human(\n      `Ready for a callback?\\n\\n${brief}`,\n      { to: input.approver },\n    );\n    if (!approved) return f.done(\"canceled\");\n\n    await f.slack.dm(input.callbackOwner, brief);\n    f.done(\"success\");\n  },\n);"
+  },
+  {
+    "id": "research-report",
+    "label": "Research reports",
+    "title": "Bring independent research into one report.",
+    "description": "Give researchers different angles, combine their findings, and ask another agent to check the citations.",
+    "filename": "research-report.flow.ts",
+    "code": "import { flow } from \"@relayflows/surface\";\n\ntype Input = {\n  question: string;\n};\n\nexport default flow<Input>(\n  \"research-report\",\n  { budget: \"$5/run\" },\n  async (f, input) => {\n    const angles = [\"technical\", \"commercial\", \"risks\"];\n\n    await Promise.all(angles.map((angle) =>\n      f.agent(`research-${angle}`, {\n        task: `Research ${input.question} from a ${angle} ` +\n          `angle. Cite sources in research/${angle}.md.`,\n        workspace: \"research/: readwrite\",\n      }).gate((r) =>\n        r.artifacts.includes(`research/${angle}.md`)\n      )\n    ));\n\n    await f.agent(\"editor\", {\n      task: \"Read research/*.md. Combine the findings, \" +\n        \"keep disagreements visible, and cite sources. \" +\n        \"Write report.md.\",\n    }).gate((r) => r.artifacts.includes(\"report.md\"));\n\n    await f.agent(\"citation-reviewer\", {\n      task: \"Open every source in report.md and check \" +\n        \"the claims it supports. Write citations.passed \" +\n        \"only when every citation checks out.\",\n    }).gate((r) => r.artifacts.includes(\"citations.passed\"));\n    f.done(\"success\");\n  },\n);"
+  },
+  {
+    "id": "redacted-summary",
+    "label": "Sensitive data",
+    "title": "Choose what the summarizer gets to see.",
+    "description": "Select the fields needed for the task before putting a record into the agent prompt.",
+    "filename": "redacted-summary.flow.ts",
+    "code": "import { flow } from \"@relayflows/surface\";\n\ntype Input = {\n  record: { category: string; status: string; email: string };\n  approver: string;\n};\n\nexport default flow<Input>(\n  \"redacted-summary\",\n  { budget: \"$5/run\" },\n  async (f, input) => {\n    // Select fields in code before building the prompt.\n    // The email address is excluded from this input.\n    const selected = {\n      category: input.record.category,\n      status: input.record.status,\n    };\n\n    await f.agent(\"summarizer\", {\n      task: `Summarize this record: ` +\n        `${JSON.stringify(selected)}. Write summary.md.`,\n    }).gate((r) => r.artifacts.includes(\"summary.md\"));\n\n    const summary = await f.run(\"cat summary.md\");\n    const approved = await f.human(\n      `Review this summary before sharing:\\n\\n${summary}`,\n      { to: input.approver },\n    );\n    if (!approved) return f.done(\"canceled\");\n\n    f.done(\"success\");\n  },\n);"
+  }
+];
diff --git a/web/app/flows/flows.module.css b/web/app/flows/flows.module.css
new file mode 100644
index 00000000..b6890fa8
--- /dev/null
+++ b/web/app/flows/flows.module.css
@@ -0,0 +1,1356 @@
+.page {
+  --flows-bg: #071724;
+  --flows-surface: rgba(13, 32, 49, 0.76);
+  --flows-surface-strong: rgba(18, 43, 63, 0.92);
+  --flows-line: rgba(116, 184, 226, 0.18);
+  --flows-line-strong: rgba(116, 184, 226, 0.32);
+  --flows-text: #edf4fb;
+  --flows-muted: #a8b8c8;
+  --flows-faint: #77879a;
+  --flows-accent: #74b8e2;
+  --flows-accent-strong: #9fd4f5;
+  --flows-orange: #d97757;
+  --flows-band-blue:
+    radial-gradient(circle at 18% 24%, rgba(116, 184, 226, 0.16), transparent 32%),
+    linear-gradient(180deg, #10273a 0%, #17364c 52%, #0d2638 100%);
+  --flows-band-dark: #0b1c2a;
+  --flows-band-deep: #081723;
+  min-height: 100vh;
+  overflow-x: hidden;
+  background: linear-gradient(180deg, #10273a 0%, #0d2638 38%, #0b1c2a 100%);
+  color: var(--flows-text);
+}
+
+.main {
+  position: relative;
+  width: min(100%, 1180px);
+  margin: 0 auto;
+  padding: 0 1.25rem 6.5rem;
+}
+
+.hero {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  min-height: 0;
+  padding: clamp(3.5rem, 7vw, 5.5rem) 0 3.5rem;
+  text-align: center;
+  isolation: isolate;
+}
+
+.heroCopy {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  justify-items: center;
+  gap: 1.35rem;
+  width: min(100%, 920px);
+  margin: 0 auto;
+}
+
+.hero::before,
+.hero::after {
+  position: absolute;
+  inset: 0 calc(50% - 50vw);
+  pointer-events: none;
+  content: '';
+}
+
+.hero::before {
+  z-index: -2;
+  background: var(--flows-band-blue);
+}
+
+.hero::after {
+  z-index: -1;
+  opacity: 0.22;
+  background:
+    linear-gradient(90deg, transparent 0%, rgba(116, 184, 226, 0.2) 48%, transparent 74%),
+    linear-gradient(180deg, rgba(116, 184, 226, 0.09) 1px, transparent 1px);
+  background-size:
+    460px 100%,
+    100% 96px;
+  transform: skewY(-3deg) translateY(18%);
+}
+
+.hero h1,
+.sectionIntro h2,
+.assetCopy h2,
+.planCopy h2,
+.managerHead h2,
+.finalCta h2 {
+  margin: 0;
+  font-family: var(--font-heading), sans-serif;
+  font-weight: 720;
+  letter-spacing: 0;
+  color: var(--flows-text);
+}
+
+.hero h1 {
+  max-width: 22ch;
+  font-size: clamp(2.25rem, 4.5vw, 3.8rem);
+  line-height: 1.12;
+  letter-spacing: -0.035em;
+}
+
+.headlineLine {
+  display: block;
+  white-space: normal;
+}
+
+.heroLead {
+  max-width: 35rem;
+  margin: 0;
+  color: var(--flows-muted);
+  font-size: clamp(1.05rem, 1.8vw, 1.28rem);
+  line-height: 1.55;
+}
+
+.ctaRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.85rem;
+  align-items: center;
+  justify-content: center;
+  margin-top: 0.35rem;
+}
+
+.ctaPrimary {
+  composes: btn btn-primary from global;
+  white-space: nowrap;
+}
+
+.ctaSecondary {
+  composes: btn btn-secondary from global;
+  white-space: nowrap;
+}
+
+.waveBreak {
+  position: relative;
+  z-index: 3;
+  width: 100vw;
+  height: 84px;
+  margin: -38px calc(50% - 50vw);
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.waveBreak::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 126vw;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, currentColor 48%, transparent);
+  opacity: 0.34;
+  transform: translate(-50%, -50%) rotate(2deg);
+  content: '';
+}
+
+.waveBreak svg {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 132vw;
+  height: 92px;
+  overflow: visible;
+  color: currentColor;
+  opacity: 0.5;
+  transform: translate(-50%, -50%) rotate(2deg);
+}
+
+.waveBreak path {
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-width: 1.2;
+  vector-effect: non-scaling-stroke;
+}
+
+.waveBreak path:nth-child(2) {
+  opacity: 0.42;
+}
+
+.waveBreakBlue {
+  color: var(--flows-accent);
+}
+
+.waveBreakOrange {
+  color: var(--flows-orange);
+}
+
+.sectionBand {
+  position: relative;
+  z-index: 1;
+  margin-top: 0;
+  padding: clamp(5.5rem, 10vw, 7.5rem) 0;
+  isolation: isolate;
+}
+
+.sectionBand::before,
+.sectionBand::after {
+  position: absolute;
+  inset: 0 calc(50% - 50vw);
+  pointer-events: none;
+  content: '';
+}
+
+.sectionBand::before {
+  z-index: -2;
+  background: var(--section-bg, var(--flows-band-dark));
+  border-top: 1px solid rgba(237, 244, 251, 0.05);
+  border-bottom: 1px solid rgba(237, 244, 251, 0.05);
+}
+
+.sectionBand::after {
+  z-index: -1;
+  opacity: var(--section-pattern-opacity, 0.16);
+  background: var(
+    --section-pattern,
+    linear-gradient(90deg, rgba(116, 184, 226, 0.12) 1px, transparent 1px)
+  );
+  background-size: var(--section-pattern-size, 96px 96px);
+}
+
+.bandCapture {
+  --section-bg: var(--flows-band-dark);
+  --section-pattern:
+    linear-gradient(90deg, rgba(116, 184, 226, 0.08) 1px, transparent 1px),
+    linear-gradient(180deg, rgba(116, 184, 226, 0.06) 1px, transparent 1px);
+  --section-pattern-size:
+    92px 92px,
+    92px 92px;
+}
+
+.bandLearn {
+  --section-bg: linear-gradient(180deg, #10273a 0%, #0d2638 100%);
+  --section-pattern:
+    radial-gradient(circle at 18% 12%, rgba(217, 119, 87, 0.18), transparent 22rem),
+    linear-gradient(120deg, rgba(217, 119, 87, 0.12), transparent 32%);
+  --section-pattern-opacity: 0.44;
+}
+
+.bandProof {
+  --section-bg: var(--flows-band-deep);
+  --section-pattern:
+    linear-gradient(130deg, transparent 0 38%, rgba(116, 184, 226, 0.09) 38% 39%, transparent 39% 100%),
+    linear-gradient(90deg, rgba(237, 244, 251, 0.05) 1px, transparent 1px);
+  --section-pattern-size:
+    160px 160px,
+    80px 80px;
+}
+
+.bandPlan {
+  --section-bg: var(--flows-band-blue);
+  --section-pattern:
+    radial-gradient(circle at 80% 20%, rgba(116, 184, 226, 0.2), transparent 24rem),
+    linear-gradient(90deg, rgba(237, 244, 251, 0.08) 1px, transparent 1px);
+  --section-pattern-opacity: 0.35;
+  --section-pattern-size:
+    auto,
+    74px 74px;
+}
+
+.bandPair {
+  --section-bg: #0a1926;
+  --section-pattern:
+    linear-gradient(90deg, transparent 0%, rgba(217, 119, 87, 0.12) 50%, transparent 100%),
+    linear-gradient(180deg, rgba(116, 184, 226, 0.05) 1px, transparent 1px);
+  --section-pattern-size:
+    520px 100%,
+    100% 86px;
+}
+
+.bandManager {
+  --section-bg: linear-gradient(180deg, #10273a 0%, #0b1c2a 100%);
+  --section-pattern:
+    radial-gradient(circle at 8% 18%, rgba(116, 184, 226, 0.18), transparent 20rem),
+    radial-gradient(circle at 92% 24%, rgba(217, 119, 87, 0.14), transparent 22rem);
+  --section-pattern-opacity: 0.72;
+}
+
+.bandFinal {
+  --section-bg: #071724;
+  --section-pattern:
+    linear-gradient(90deg, rgba(116, 184, 226, 0.08) 1px, transparent 1px),
+    linear-gradient(180deg, rgba(116, 184, 226, 0.05) 1px, transparent 1px);
+  --section-pattern-size:
+    70px 70px,
+    70px 70px;
+}
+
+.captureSection,
+.learnSection,
+.pairSection,
+.managerSection {
+  margin-top: 0;
+}
+
+.sectionIntro {
+  display: grid;
+  gap: 1rem;
+  max-width: 48rem;
+}
+
+.sectionIntro h2,
+.assetCopy h2,
+.planCopy h2,
+.managerHead h2,
+.finalCta h2 {
+  font-size: clamp(2.3rem, 5vw, 4.2rem);
+  line-height: 1;
+}
+
+.sectionIntro p,
+.assetCopy p,
+.planCopy p,
+.managerHead p {
+  max-width: 43rem;
+  margin: 0;
+  color: var(--flows-muted);
+  font-size: 1.04rem;
+  line-height: 1.68;
+}
+
+.captureGrid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.7fr);
+  gap: 1rem;
+  margin-top: 2rem;
+}
+
+.signalPanel,
+.privacyPanel,
+.patternCard,
+.promptPanel,
+.warningCard {
+  border: 1px solid var(--flows-line);
+  border-radius: 22px;
+  background: var(--flows-surface);
+}
+
+.signalPanel {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.75rem;
+  padding: 1rem;
+}
+
+.signalRow {
+  display: flex;
+  align-items: center;
+  min-height: 78px;
+  padding: 1rem;
+  border: 1px solid rgba(116, 184, 226, 0.12);
+  border-radius: 16px;
+  background: rgba(7, 17, 26, 0.42);
+  color: var(--flows-text);
+  font-weight: 660;
+}
+
+.privacyPanel {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: 1rem;
+  padding: 1.3rem;
+  background:
+    radial-gradient(circle at 86% 10%, rgba(193, 103, 75, 0.18), transparent 14rem),
+    var(--flows-surface-strong);
+}
+
+.privacyPanel svg,
+.assetCopy svg,
+.finalCta svg {
+  color: var(--flows-accent);
+}
+
+.privacyPanel h3,
+.patternCard h3 {
+  margin: 0;
+  color: var(--flows-text);
+  font-family: var(--font-heading), sans-serif;
+  font-size: 1.45rem;
+  line-height: 1.12;
+  letter-spacing: 0;
+}
+
+.privacyPanel p,
+.patternCard p,
+.warningCard p {
+  margin: 0;
+  color: var(--flows-muted);
+  line-height: 1.62;
+}
+
+.patternGrid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+  margin-top: 2rem;
+}
+
+.patternCard {
+  min-height: 250px;
+  padding: 1.25rem;
+}
+
+.patternCard svg {
+  margin-bottom: 2rem;
+  color: var(--flows-accent);
+}
+
+.visualProof {
+  display: grid;
+  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.7fr);
+  gap: clamp(1rem, 4vw, 2.5rem);
+  align-items: center;
+  margin-top: 0;
+}
+
+.assetFrame {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--flows-line);
+  border-radius: 24px;
+  padding: 0 34px 14px 0;
+  background: linear-gradient(135deg, #7eb8da 0%, #4a90c2 48%, #2d6a9c 100%);
+  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.24);
+  isolation: isolate;
+}
+
+.assetFrame::before,
+.assetFrame::after {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: '';
+}
+
+.assetFrame::before {
+  z-index: -2;
+  background:
+    radial-gradient(ellipse 50% 70% at 18% 26%, rgba(255, 255, 255, 0.16) 0%, transparent 70%),
+    radial-gradient(ellipse 42% 50% at 82% 76%, rgba(255, 255, 255, 0.12) 0%, transparent 66%);
+}
+
+.assetFrame::after {
+  z-index: -1;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 320'%3E%3Cpath d='M-20,70 Q110,20 250,110 T500,80' fill='none' stroke='rgba(255,255,255,0.24)' stroke-width='2'/%3E%3Cpath d='M-20,130 Q120,70 280,160 T520,130' fill='none' stroke='rgba(255,255,255,0.16)' stroke-width='1.5'/%3E%3Cpath d='M-20,210 Q80,160 220,235 T500,210' fill='none' stroke='rgba(255,255,255,0.12)' stroke-width='1.25'/%3E%3C/svg%3E");
+  background-size: cover;
+}
+
+.skillMemoryVisual {
+  position: relative;
+  display: grid;
+  gap: 1rem;
+  min-height: 440px;
+  padding: clamp(1.25rem, 3vw, 1.65rem) clamp(1rem, 2.8vw, 1.28rem) clamp(1rem, 2.8vw, 1.28rem);
+  overflow: hidden;
+  border: 1px solid color-mix(in srgb, #9ccfff 16%, transparent);
+  border-radius: 0 0 14px 0;
+  background: #07111f;
+  box-shadow: 10px 10px 28px color-mix(in srgb, #020712 42%, transparent);
+  isolation: isolate;
+}
+
+.skillMemoryVisual::before {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(circle at 72% 18%, rgba(74, 144, 194, 0.16), transparent 34%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 42%),
+    linear-gradient(90deg, rgba(126, 184, 218, 0.07) 1px, transparent 1px),
+    linear-gradient(180deg, rgba(126, 184, 218, 0.045) 1px, transparent 1px);
+  background-size: 48px 48px;
+  opacity: 1;
+  content: '';
+}
+
+.skillMemoryGrid {
+  position: relative;
+  z-index: 1;
+}
+
+.skillMemoryGrid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.28fr) minmax(168px, 0.58fr);
+  gap: 0.85rem;
+  align-items: stretch;
+}
+
+.skillTreePane,
+.skillSignalPane {
+  border: 1px solid rgba(156, 207, 255, 0.13);
+  border-radius: 16px;
+  background: rgba(5, 13, 21, 0.68);
+  backdrop-filter: blur(10px);
+}
+
+.skillTreePane {
+  position: relative;
+  padding: 1rem 1rem 1rem 2.75rem;
+}
+
+.skillTreePane::before {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 1.5rem;
+  width: 1px;
+  background: linear-gradient(
+    180deg,
+    rgba(126, 184, 218, 0.28),
+    rgba(126, 184, 218, 0.36) 10%,
+    rgba(126, 184, 218, 0.2) 55%,
+    rgba(126, 184, 218, 0.24) 82%,
+    rgba(126, 184, 218, 0.18)
+  );
+  content: '';
+}
+
+.treeRoot {
+  display: inline-flex;
+  padding: 0.42rem 0.58rem;
+  border: 1px solid rgba(116, 184, 226, 0.16);
+  border-radius: 10px;
+  background: rgba(116, 184, 226, 0.08);
+  color: var(--flows-accent-strong);
+  font-family: var(--font-geist-mono), monospace;
+  font-size: 0.78rem;
+  font-weight: 800;
+}
+
+.fileTree {
+  display: grid;
+  gap: 0.7rem;
+  margin: 1rem 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.fileTreeItem {
+  position: relative;
+  display: grid;
+  gap: 0.24rem;
+  padding: 0.78rem 0.86rem;
+  border: 1px solid rgba(156, 207, 255, 0.13);
+  border-radius: 14px;
+  background: rgba(15, 27, 45, 0.72);
+  box-shadow: 0 10px 24px rgba(2, 7, 18, 0.22);
+}
+
+.fileTreeItem::before {
+  position: absolute;
+  top: 50%;
+  left: -2rem;
+  display: grid;
+  place-items: center;
+  width: 1rem;
+  height: 1rem;
+  color: #28c840;
+  font-family: var(--font-geist-mono), monospace;
+  font-size: 0.9rem;
+  font-weight: 850;
+  line-height: 1;
+  transform: translateY(-50%);
+  content: '\2713';
+}
+
+.filePath {
+  overflow: hidden;
+  color: var(--flows-text);
+  font-family: var(--font-geist-mono), monospace;
+  font-size: clamp(0.74rem, 1vw, 0.84rem);
+  font-weight: 760;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.fileMeta {
+  color: var(--flows-muted);
+  font-size: 0.82rem;
+  line-height: 1.45;
+}
+
+.skillSignalPane {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  justify-content: flex-end;
+  padding: 1rem;
+  background:
+    radial-gradient(circle at 100% 0%, rgba(126, 184, 218, 0.18), transparent 9rem),
+    rgba(15, 27, 45, 0.7);
+}
+
+.skillSignalPane span {
+  color: color-mix(in srgb, var(--flows-accent) 74%, white 26%);
+  font-size: 0.74rem;
+  font-weight: 850;
+  text-transform: uppercase;
+}
+
+.skillSignalPane p {
+  margin: 0;
+  padding: 0.72rem 0.78rem;
+  border: 1px solid rgba(156, 207, 255, 0.13);
+  border-radius: 12px;
+  background: rgba(15, 27, 45, 0.72);
+  color: var(--flows-text);
+  font-size: 0.84rem;
+  line-height: 1.45;
+}
+
+.assetCopy,
+.planCopy,
+.managerHead {
+  display: grid;
+  gap: 1rem;
+}
+
+.planSection {
+  display: grid;
+  grid-template-columns: minmax(280px, 0.68fr) minmax(0, 1fr);
+  gap: clamp(1.5rem, 5vw, 4rem);
+  align-items: center;
+  margin-top: 0;
+}
+
+.promptPanel {
+  position: relative;
+  overflow: hidden;
+  padding: 0;
+  background:
+    linear-gradient(180deg, rgba(13, 18, 26, 0.98), rgba(4, 8, 13, 0.99)),
+    #070b10;
+  box-shadow:
+    inset 0 1px 0 rgba(237, 244, 251, 0.07),
+    inset 0 -1px 0 rgba(116, 184, 226, 0.08),
+    0 24px 72px rgba(0, 0, 0, 0.36);
+}
+
+.promptPanel::before {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background:
+    linear-gradient(90deg, rgba(116, 184, 226, 0.045) 1px, transparent 1px),
+    linear-gradient(180deg, rgba(116, 184, 226, 0.035) 1px, transparent 1px);
+  background-size: 44px 44px;
+  opacity: 0.24;
+  content: '';
+}
+
+.promptPanel::after {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(110deg, transparent 0 42%, rgba(159, 212, 245, 0.12) 50%, transparent 58% 100%);
+  opacity: 0;
+  content: '';
+}
+
+.terminalHeader,
+.terminalBody {
+  position: relative;
+  z-index: 1;
+}
+
+.terminalHeader {
+  display: grid;
+  grid-template-columns: 5.8rem minmax(0, 1fr) auto;
+  gap: 0.75rem;
+  align-items: center;
+  min-height: 3rem;
+  padding: 0.72rem 1rem;
+  border-bottom: 1px solid rgba(237, 244, 251, 0.08);
+  background:
+    linear-gradient(180deg, rgba(18, 23, 31, 0.98), rgba(8, 12, 18, 0.98)),
+    #0a0d13;
+  font-family: var(--font-geist-mono), monospace;
+}
+
+.terminalChrome {
+  display: flex;
+  gap: 0.48rem;
+  align-items: center;
+}
+
+.terminalChrome span {
+  width: 0.76rem;
+  height: 0.76rem;
+  border: 1px solid rgba(0, 0, 0, 0.34);
+  border-radius: 999px;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.45),
+    0 0 0 1px rgba(255, 255, 255, 0.03);
+}
+
+.terminalChrome span:nth-child(1) {
+  background: #ff5f57;
+}
+
+.terminalChrome span:nth-child(2) {
+  background: #ffbd2e;
+}
+
+.terminalChrome span:nth-child(3) {
+  background: #28c840;
+}
+
+.terminalTitle {
+  justify-self: center;
+  color: rgba(237, 244, 251, 0.76);
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+
+.terminalState {
+  padding: 0.28rem 0.5rem;
+  border: 1px solid rgba(116, 184, 226, 0.18);
+  border-radius: 999px;
+  background: rgba(116, 184, 226, 0.07);
+  color: var(--flows-accent-strong);
+  font-size: 0.68rem;
+  font-weight: 700;
+}
+
+.terminalBody {
+  display: grid;
+  gap: 0.8rem;
+  padding: clamp(1rem, 3vw, 1.3rem);
+  background: rgba(3, 8, 13, 0.62);
+  font-family: var(--font-geist-mono), monospace;
+}
+
+.terminalLine {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: 0.75rem;
+  align-items: center;
+  min-height: 3rem;
+  padding: 0.78rem 0.9rem;
+  border: 1px solid rgba(116, 184, 226, 0.13);
+  border-radius: 14px;
+  background: rgba(9, 18, 28, 0.9);
+  color: var(--flows-text);
+  font-size: clamp(0.78rem, 1.35vw, 0.94rem);
+  line-height: 1.45;
+}
+
+.terminalSearch {
+  min-height: 2.65rem;
+  background: rgba(5, 11, 18, 0.86);
+  color: var(--flows-muted);
+}
+
+.terminalPrompt {
+  color: var(--flows-accent);
+  font-weight: 800;
+}
+
+.terminalCursor {
+  width: 0.55rem;
+  height: 1.05rem;
+  border-radius: 2px;
+  background: var(--flows-accent-strong);
+  box-shadow: 0 0 18px rgba(116, 184, 226, 0.34);
+}
+
+.terminalAnswer {
+  padding: 1rem 1.05rem;
+  border: 1px solid rgba(116, 184, 226, 0.1);
+  border-radius: 16px;
+  background: rgba(7, 12, 18, 0.82);
+}
+
+.terminalAnswer p {
+  margin: 0 0 0.85rem;
+  color: var(--flows-muted);
+  font-size: clamp(0.82rem, 1.25vw, 0.94rem);
+  line-height: 1.6;
+}
+
+.terminalAnswer ol {
+  counter-reset: terminal-step;
+  display: grid;
+  gap: 0.72rem;
+  margin: 0;
+  padding: 0;
+  color: var(--flows-text);
+  list-style: none;
+}
+
+.terminalAnswer li {
+  counter-increment: terminal-step;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 0.75rem;
+  align-items: start;
+  color: var(--flows-text);
+  font-size: clamp(0.82rem, 1.25vw, 0.94rem);
+  line-height: 1.55;
+}
+
+.terminalAnswer li::before {
+  color: var(--flows-accent);
+  font-weight: 800;
+  content: '0' counter(terminal-step);
+}
+
+.terminalAnswer li span {
+  min-width: 0;
+}
+
+.terminalCommand,
+.terminalSearch,
+.terminalAnswer p,
+.terminalAnswer li {
+  opacity: 1;
+  transform: none;
+}
+
+.terminalAnswer li::marker {
+  color: var(--flows-accent);
+  font-weight: 800;
+}
+
+.warningGrid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+  margin-top: 2rem;
+}
+
+.warningCard {
+  padding: 1.15rem;
+  background: rgba(9, 24, 38, 0.72);
+}
+
+.warningCard svg {
+  margin-bottom: 1.4rem;
+  color: var(--flows-accent);
+}
+
+.managerSection {
+  display: grid;
+  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.8fr);
+  gap: clamp(1.5rem, 5vw, 4rem);
+  align-items: start;
+  padding: clamp(5.5rem, 10vw, 7.5rem) 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.questionGrid {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.questionItem {
+  padding: 0.95rem 1rem;
+  border: 1px solid rgba(116, 184, 226, 0.14);
+  border-radius: 16px;
+  background: rgba(7, 17, 26, 0.48);
+  color: var(--flows-text);
+  font-weight: 650;
+}
+
+.finalCta {
+  display: flex;
+  gap: 1.5rem;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 0;
+  padding: clamp(5.5rem, 10vw, 7.5rem) 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.finalCta > div {
+  display: grid;
+  gap: 1rem;
+}
+
+.finalCta h2 {
+  max-width: 12ch;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .hero::after {
+    animation: reflexHeroDrift 15s ease-in-out infinite alternate;
+    will-change: transform;
+  }
+
+  .waveBreak svg {
+    animation: reflexWaveDrift 9s ease-in-out infinite alternate;
+    will-change: transform;
+  }
+
+  .sectionBand::after {
+    animation: reflexBandDrift 18s ease-in-out infinite alternate;
+    will-change: transform;
+  }
+
+  .promptPanel::after {
+    animation: terminalSweep 4.8s ease-in-out 1.2s infinite;
+  }
+
+  .terminalCommand,
+  .terminalSearch,
+  .terminalAnswer p,
+  .terminalAnswer li {
+    opacity: 0;
+    transform: translateY(10px);
+    animation: terminalLineIn 0.55s var(--ease-out-quint) forwards;
+    will-change: transform, opacity;
+  }
+
+  .terminalCommand {
+    animation-delay: 0.12s;
+  }
+
+  .terminalSearch {
+    animation-delay: 0.72s;
+  }
+
+  .terminalAnswer p {
+    animation-delay: 1.18s;
+  }
+
+  .terminalAnswer li:nth-child(1) {
+    animation-delay: 1.58s;
+  }
+
+  .terminalAnswer li:nth-child(2) {
+    animation-delay: 1.82s;
+  }
+
+  .terminalAnswer li:nth-child(3) {
+    animation-delay: 2.06s;
+  }
+
+  .terminalAnswer li:nth-child(4) {
+    animation-delay: 2.3s;
+  }
+
+  .terminalCursor {
+    animation: terminalCursorBlink 1s steps(2, end) infinite;
+  }
+
+  .patternCard,
+  .warningCard,
+  .fileTreeItem,
+  .skillSignalPane p,
+  .signalRow,
+  .questionItem {
+    transition:
+      transform 0.25s var(--ease-out-quint),
+      border-color 0.25s,
+      background 0.25s;
+  }
+
+  .patternCard:hover,
+  .warningCard:hover,
+  .fileTreeItem:hover,
+  .skillSignalPane p:hover,
+  .signalRow:hover,
+  .questionItem:hover {
+    transform: translateY(-2px);
+    border-color: var(--flows-line-strong);
+    background-color: rgba(16, 39, 58, 0.82);
+  }
+}
+
+@keyframes reflexHeroDrift {
+  from {
+    transform: skewY(-3deg) translate3d(-18px, 18%, 0);
+  }
+  to {
+    transform: skewY(-3deg) translate3d(22px, 18%, 0);
+  }
+}
+
+@keyframes reflexWaveDrift {
+  from {
+    transform: translate(-51%, -50%) rotate(2deg);
+  }
+  to {
+    transform: translate(-49%, -50%) rotate(2deg);
+  }
+}
+
+@keyframes reflexBandDrift {
+  from {
+    transform: translate3d(-18px, 0, 0);
+  }
+  to {
+    transform: translate3d(18px, 0, 0);
+  }
+}
+
+@keyframes terminalLineIn {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes terminalCursorBlink {
+  0%,
+  46% {
+    opacity: 1;
+  }
+  47%,
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes terminalSweep {
+  0%,
+  52% {
+    opacity: 0;
+    transform: translateX(-120%);
+  }
+  62% {
+    opacity: 1;
+  }
+  82%,
+  100% {
+    opacity: 0;
+    transform: translateX(120%);
+  }
+}
+
+@media (max-width: 980px) {
+  .captureGrid,
+  .visualProof,
+  .planSection,
+  .managerSection {
+    grid-template-columns: 1fr;
+  }
+
+  .hero h1 {
+    max-width: 22ch;
+  }
+
+  .patternGrid,
+  .warningGrid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 680px) {
+  .main {
+    padding-inline: 1rem;
+  }
+
+  .hero {
+    gap: 2rem;
+  }
+
+  .hero h1 {
+    font-size: clamp(2.15rem, 7.2vw, 3.1rem);
+  }
+
+  .headlineLine {
+    white-space: normal;
+  }
+
+  .signalPanel {
+    grid-template-columns: 1fr;
+  }
+
+  .skillMemoryGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .finalCta {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
+
+/* ── flows-specific: use case grid, code block, gate strip ── */
+
+.textLink { display: inline-flex; align-items: center; gap: 0.5rem; width: fit-content; margin-top: 0.5rem; color: var(--flows-accent-strong); font-size: 0.95rem; }
+.textLink:hover { text-decoration: underline; text-underline-offset: 0.3em; }
+.textLink:focus-visible { outline: 2px solid var(--flows-accent-strong); outline-offset: 5px; border-radius: 2px; }
+
+.codeSection {
+  display: grid;
+  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
+  gap: clamp(1rem, 4vw, 2.5rem);
+  align-items: center;
+}
+
+.codeCopy {
+  display: grid;
+  gap: 1rem;
+  max-width: 32rem;
+}
+
+.codeCopy h2,
+.bandIntegrations .sectionIntro h2,
+.workflowSection > div > div > h3 {
+  margin: 0;
+  font-family: var(--font-heading), sans-serif;
+  font-weight: 620;
+  font-size: clamp(2rem, 3.4vw, 3rem);
+  line-height: 1.16;
+  letter-spacing: -0.035em;
+  color: var(--flows-text);
+}
+
+.codeCopy p {
+  margin: 0;
+  color: var(--flows-muted);
+  font-size: 1.04rem;
+  line-height: 1.66;
+}
+
+.codeBlock {
+  overflow: hidden;
+  border: 1px solid var(--flows-line);
+  border-radius: 20px;
+  background: #050f18;
+  min-width: 0;
+}
+
+.codeHeader {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.7rem 1rem;
+  border-bottom: 1px solid var(--flows-line);
+  background: rgba(255, 255, 255, 0.02);
+  color: var(--flows-faint);
+  font-size: 0.82rem;
+  font-family: var(--font-geist-mono), monospace;
+}
+
+.codeChrome {
+  display: flex;
+  gap: 0.35rem;
+}
+
+.codeChrome span {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+
+.codeChrome span:nth-child(1) { background: #ff5f57; }
+.codeChrome span:nth-child(2) { background: #febc2e; }
+.codeChrome span:nth-child(3) { background: #28c840; }
+
+.codePre {
+  margin: 0;
+  padding: 1.15rem 1.35rem;
+  overflow-x: auto;
+  color: var(--flows-text);
+  font-family: var(--font-geist-mono), 'JetBrains Mono', 'Fira Code', monospace;
+  font-size: 0.85rem;
+  line-height: 1.62;
+  white-space: pre;
+  tab-size: 2;
+}
+
+.codeKw { color: #d97757; }
+.codeFn { color: #9fd4f5; }
+.codeStr { color: #a8dda2; }
+.codeCmt { color: var(--flows-faint); font-style: italic; }
+.codeMuted { color: var(--flows-muted); }
+
+.gateStrip {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+  margin-top: 2rem;
+}
+
+.gateCard {
+  padding: 1.4rem;
+  border: 1px solid var(--flows-line);
+  border-radius: 22px;
+  background: var(--flows-surface);
+}
+
+.gateCard h3 {
+  margin: 0 0 0.55rem;
+  color: var(--flows-text);
+  font-family: var(--font-heading), sans-serif;
+  font-size: 1.3rem;
+  line-height: 1.15;
+}
+
+.gateCard p {
+  margin: 0;
+  color: var(--flows-muted);
+  line-height: 1.62;
+}
+
+.gateBad h3 { color: #e6957a; }
+.gateGood h3 { color: #b1e0c7; }
+
+.integrationsMarquee { margin-top: 2rem; width: 100vw; margin-inline: calc(50% - 50vw); }
+.integrationWindow { overflow: hidden; }
+.integrationTrack { display: flex; width: max-content; animation: integrationScroll 55s linear infinite; }
+.integrationTrack + .integrationTrack { margin-top: 0.5rem; animation-direction: reverse; animation-duration: 65s; }
+.integrationGroup { flex-shrink: 0; display: flex; gap: 0.5rem; list-style: none; padding: 0 0.5rem 0 0; margin: 0; }
+.integrationLogo {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.6rem;
+  width: 124px;
+  min-height: 96px;
+  border: 1px solid var(--flows-line);
+  border-radius: 9px;
+  background: rgba(7, 17, 26, 0.45);
+  color: var(--flows-accent-strong);
+}
+.integrationLogo img { object-fit: contain; }
+.integrationLogo img, .integrationLogo > svg { width: 28px; height: 28px; }
+.integrationLogo span { color: var(--flows-muted); font-size: 0.75rem; white-space: nowrap; }
+.integrationWindow:hover .integrationTrack { animation-play-state: paused; }
+@keyframes integrationScroll { to { transform: translateX(calc(-100% / var(--integration-copies, 2))); } }
+@media (max-width: 680px) {
+  .integrationLogo { width: 112px; min-height: 88px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .integrationWindow { mask-image: none; }
+  .integrationTrack { animation: none; width: 100%; }
+  .integrationGroup { flex-wrap: wrap; justify-content: center; width: 100%; padding: 0; }
+  .integrationGroup[aria-hidden='true'] { display: none; }
+  .integrationLogo { flex: 1 0 112px; }
+}
+
+.bandCases {
+  --section-bg: var(--flows-band-dark);
+  --section-pattern:
+    linear-gradient(90deg, rgba(116, 184, 226, 0.08) 1px, transparent 1px),
+    linear-gradient(180deg, rgba(116, 184, 226, 0.06) 1px, transparent 1px);
+  --section-pattern-size:
+    92px 92px,
+    92px 92px;
+}
+
+.bandCode {
+  --section-bg: linear-gradient(180deg, #10273a 0%, #0d2638 100%);
+  --section-pattern:
+    radial-gradient(circle at 18% 12%, rgba(116, 184, 226, 0.18), transparent 22rem),
+    linear-gradient(120deg, rgba(116, 184, 226, 0.1), transparent 32%);
+  --section-pattern-opacity: 0.44;
+}
+
+.bandGate {
+  --section-bg: var(--flows-band-deep);
+  --section-pattern:
+    radial-gradient(circle at 80% 20%, rgba(217, 119, 87, 0.16), transparent 24rem),
+    linear-gradient(90deg, rgba(237, 244, 251, 0.05) 1px, transparent 1px);
+  --section-pattern-opacity: 0.5;
+}
+
+.bandIntegrations {
+  --section-bg: #21435B;
+  --section-pattern-opacity: 0;
+  --section-pattern:
+    linear-gradient(90deg, transparent 0%, rgba(116, 184, 226, 0.1) 50%, transparent 100%),
+    linear-gradient(180deg, rgba(116, 184, 226, 0.05) 1px, transparent 1px);
+  --section-pattern-size:
+    520px 100%,
+    100% 86px;
+}
+
+@media (max-width: 980px) {
+  .codeSection {
+    grid-template-columns: 1fr;
+  }
+  .gateStrip {
+    grid-template-columns: 1fr;
+  }
+}
+
+.finalCtaLead {
+  max-width: 34rem;
+  margin: 0.9rem 0 0;
+  color: var(--flows-muted);
+  font-size: 1.02rem;
+  line-height: 1.62;
+}
+
+.gateCard > svg { margin-bottom: 1rem; color: var(--flows-accent); }
+
+@media (max-width: 680px) {
+  .codePre { padding: 1rem; font-size: 0.72rem; }
+}
+
+.scriptCarousel { min-width: 0; }
+.selectedExplanation { display: grid; gap: 1rem; }
+.useCasePicker { grid-column: 1 / -1; display: grid; gap: 1rem; min-width: 0; }
+.useCaseLabel { margin: 0; color: var(--flows-text); font-size: 1rem; font-weight: 500; text-align: left; }
+.useCaseGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
+.useCaseOption {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-height: 64px;
+  padding: 1rem;
+  border: 1px solid var(--flows-line);
+  border-radius: 10px;
+  background: rgba(5, 15, 24, 0.5);
+  color: var(--flows-muted);
+  font: inherit;
+  font-size: 0.92rem;
+  text-align: left;
+  cursor: pointer;
+  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
+}
+.useCaseOption:hover { border-color: var(--flows-line-strong); background: #19394e; color: var(--flows-text); }
+.useCaseOption[aria-pressed='true'] { background: #2d6b9c; border-color: #74b8e2; color: #fff; }
+.useCaseNumber { font-family: var(--font-geist-mono), monospace; font-size: 0.75rem; opacity: 0.7; }
+@media (prefers-reduced-motion: reduce) { .useCaseOption { transition: none; } }
+.scriptCarousel button:focus-visible,
+.carouselCode:focus-visible { outline: 2px solid var(--flows-accent-strong); outline-offset: 3px; }
+.carouselCode { min-height: 40rem; overflow: auto; }
+.carouselCode span { color: var(--shiki-dark, inherit) !important; }
+.visuallyHidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
+
+@media (max-width: 980px) {
+  .scriptCarousel { gap: 2rem; }
+  .useCaseGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@media (max-width: 680px) {
+  .useCaseOption { padding: 0.75rem; gap: 0.5rem; font-size: 0.85rem; }
+  .carouselCode { min-height: 30rem; }
+}
+
+.capabilityWaveBreak {
+  position: relative;
+  z-index: 3;
+  height: 84px;
+  margin: -38px 0;
+  pointer-events: none;
+}
+
+.capabilityWaveBreak > div {
+  height: 84px;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.scriptViewport { position: relative; min-width: 0; }
+.scriptSizeReference { visibility: hidden; pointer-events: none; }
+/* Let scrolling continue onto the page at the script's top and bottom edges. */
+.scriptScroll { position: absolute; inset: 0; overflow: auto; overscroll-behavior-x: contain; overscroll-behavior-y: auto; }
+.scriptScroll > pre { min-height: 100%; overflow: visible; box-sizing: border-box; }
+.scriptScroll:focus-visible { outline: 2px solid var(--flows-accent-strong); outline-offset: -2px; }
diff --git a/web/app/flows/page.tsx b/web/app/flows/page.tsx
new file mode 100644
index 00000000..d09f5dea
--- /dev/null
+++ b/web/app/flows/page.tsx
@@ -0,0 +1,190 @@
+import { DeploymentCall } from '../../components/home/DeploymentCall';
+import { WaveDivider } from '../../components/home/icons';
+import { FlowGatePreview } from '../../components/home/FlowGatePreview';
+import type { Metadata } from 'next';
+import { ArrowRight } from 'lucide-react';
+
+import { MessagingFeature } from '../../components/home/MessagingFeature';
+import { DurableWorkflowFeature } from '../../components/home/DeliveryFeature';
+import { InvestorStrip } from '../../components/InvestorStrip';
+
+import { SiteFooter } from '../../components/SiteFooter';
+import { SiteNav } from '../../components/SiteNav';
+import { HOME_OG_IMAGE_PATH, ogImage } from '../../lib/og-meta';
+import { absoluteUrl } from '../../lib/site';
+import home from '../landing.module.css';
+import s from './flows.module.css';
+import { FlowExamples } from './FlowExamples';
+import { IntegrationMarquee } from './IntegrationMarquee';
+
+export const metadata: Metadata = {
+  title: 'Relayflows: Script your agents',
+  description:
+    'Write the steps once. Relayflows runs your agents in order, checks their work, and pauses for human approval.',
+  alternates: {
+    canonical: absoluteUrl('/flows'),
+  },
+  openGraph: {
+    title: 'Relayflows: Script your agents',
+    description:
+      'Write the steps once. Relayflows runs your agents in order, checks their work, and pauses for human approval.',
+    url: absoluteUrl('/flows'),
+    type: 'website',
+    images: [ogImage(HOME_OG_IMAGE_PATH, 'Relayflows by Agent Relay')],
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'Relayflows: Script your agents',
+    description: 'Write the steps once. Relayflows runs your agents and checks their work before moving on.',
+    images: [absoluteUrl(HOME_OG_IMAGE_PATH)],
+  },
+};
+
+// The cloud app mounts its Google OAuth entry point under /cloud.
+const FLOWS_SIGN_IN_URL =
+  'https://agentrelay.com/cloud/api/auth/google/start?next=%2Fdashboard&ref=flows&utm_source=agentrelay.com&utm_medium=flows_landing&utm_campaign=flows';
+
+function flowsSignInHref(utmContent: string) {
+  return `${FLOWS_SIGN_IN_URL}&utm_content=${utmContent}`;
+}
+
+function WaveBreak({ tone = 'blue' }: { tone?: 'blue' | 'orange' }) {
+  return (
+    <div className={`${s.waveBreak} ${tone === 'orange' ? s.waveBreakOrange : s.waveBreakBlue}`} aria-hidden="true">
+      <svg viewBox="0 0 1440 110" preserveAspectRatio="none">
+        <path d="M-80 58C86 18 160 92 300 58C440 24 524 18 660 58C796 98 888 90 1030 58C1172 26 1260 18 1520 58" />
+        <path d="M-80 78C86 38 160 112 300 78C440 44 524 38 660 78C796 118 888 110 1030 78C1172 46 1260 38 1520 78" />
+      </svg>
+    </div>
+  );
+}
+
+
+
+export default function FlowsPage() {
+  const navGetStartedLink = (
+    <a href={flowsSignInHref('nav')} className={`${home.ctaPrimary} ${home.homeNavAction}`}>
+      Try Free with Cloud
+    </a>
+  );
+  const mobileGetStartedLink = (
+    <a href={flowsSignInHref('mobile_nav')} className={`${home.ctaPrimary} ${home.homeNavAction}`}>
+      Try Free with Cloud
+    </a>
+  );
+
+  return (
+    <div className={s.page}>
+      <SiteNav actions={navGetStartedLink} mobileMenuContent={mobileGetStartedLink} hideLinks />
+
+      <main className={s.main}>
+        <section className={s.hero}>
+          <div className={s.heroCopy}>
+            <h1>
+              <span className={s.headlineLine}>Stop babysitting agents.</span>{' '}
+              <span className={s.headlineLine}>Script them.</span>
+            </h1>
+            <p className={s.heroLead}>
+              Use Agent Relay Flows to define complex sequences of tasks instead
+              of relying on the vibes of an agent. Predictable, auditable and dependable.
+            </p>
+            <div className={s.ctaRow}>
+              <a href={flowsSignInHref('hero')} className={s.ctaPrimary}>
+                Try Free with Cloud
+                <ArrowRight aria-hidden="true" size={17} strokeWidth={2} />
+              </a>
+              <a href="/khaliq" className={s.ctaSecondary}>
+                Chat with founders
+              </a>
+            </div>
+          </div>
+        </section>
+
+        <InvestorStrip />
+
+        <WaveBreak />
+
+        <section id="use-cases" className={`${s.sectionBand} ${s.bandCode}`}>
+          <FlowExamples introductoryCode={
+              <pre className={s.codePre}>
+{`export default `}<span className={s.codeFn}>flow</span>{`<TicketInput>(
+  `}<span className={s.codeStr}>&quot;software-factory&quot;</span>{`,
+  { budget: `}<span className={s.codeStr}>&quot;$8/run&quot;</span>{` },
+  `}<span className={s.codeKw}>async</span>{` (f, input) => {
+    `}<span className={s.codeKw}>await</span>{` f
+      .`}<span className={s.codeFn}>agent</span>{`(`}<span className={s.codeStr}>&quot;planner&quot;</span>{`, { model: `}<span className={s.codeStr}>&quot;claude-sonnet-5&quot;</span>{`, task: ... })
+      .`}<span className={s.codeFn}>gate</span>{`((r) => r.artifacts.includes(`}<span className={s.codeStr}>&quot;plan/plan.md&quot;</span>{`));
+
+    `}<span className={s.codeKw}>await</span>{` f
+      .`}<span className={s.codeFn}>agent</span>{`(`}<span className={s.codeStr}>&quot;implementer&quot;</span>{`, { model: `}<span className={s.codeStr}>&quot;claude-opus-5&quot;</span>{`, task: ... })
+      .`}<span className={s.codeFn}>gate</span>{`((r) => r.artifacts.includes(`}<span className={s.codeStr}>&quot;impl/branch.txt&quot;</span>{`));
+
+    `}<span className={s.codeCmt}>{`// The tests run outside the agent.
+    // The agent cannot lie about the exit code.`}</span>{`
+    `}<span className={s.codeKw}>await</span>{` f
+      .`}<span className={s.codeFn}>run</span>{`(`}<span className={s.codeStr}>{`\`git checkout $(cat impl/branch.txt) && npm test\``}</span>{`)
+      .`}<span className={s.codeFn}>gate</span>{`((out) => /failed:\\s*0/.test(out));
+
+    `}<span className={s.codeCmt}>{`// Different model. Its only job is to break the PR.`}</span>{`
+    `}<span className={s.codeKw}>await</span>{` f
+      .`}<span className={s.codeFn}>agent</span>{`(`}<span className={s.codeStr}>&quot;adversary&quot;</span>{`, { model: `}<span className={s.codeStr}>&quot;gpt-5&quot;</span>{`, task: ... })
+      .`}<span className={s.codeFn}>gate</span>{`((r) => r.artifacts.includes(`}<span className={s.codeStr}>&quot;adversary/clean&quot;</span>{`));
+
+    `}<span className={s.codeCmt}>{`// Deterministic step, not an agent decision.`}</span>{`
+    `}<span className={s.codeKw}>await</span>{` f.github.`}<span className={s.codeFn}>createPullRequest</span>{`({
+      repo: input.repo,
+      head: `}<span className={s.codeStr}>{`\`feat/\${input.ticketId}\``}</span>{`,
+      base: input.baseBranch,
+      bodyPath: `}<span className={s.codeStr}>&quot;impl/summary.md&quot;</span>{`,
+    });
+
+    f.`}<span className={s.codeFn}>done</span>{`(`}<span className={s.codeStr}>&quot;success&quot;</span>{`);
+  },
+);`}
+              </pre>
+          } />
+        </section>
+
+        <WaveBreak />
+
+        <section className={s.workflowSection} aria-label="Skills make suggestions. Flows enforce steps.">
+          <MessagingFeature
+            title="Skills make suggestions. Flows enforce steps."
+            preview={<FlowGatePreview />}
+            items={[
+              'Require files, run scripts, and check results before the next step starts.',
+              'Enforce requirements in code instead of relying on an agent to follow markdown instructions.',
+              'Save tokens by running deterministic steps directly, without asking and hoping the LLM does them.',
+            ]}
+          />
+        </section>
+
+        <div className={s.capabilityWaveBreak}>
+          <WaveDivider variant="capability" />
+        </div>
+
+        <section className={s.workflowSection} aria-label="Durable. Observable. Repeatable.">
+          <DurableWorkflowFeature title="Durable. Observable. Repeatable." showCapabilities={false} />
+        </section>
+
+        <WaveBreak />
+
+        <section className={`${s.sectionBand} ${s.bandIntegrations}`}>
+          <div className={s.sectionIntro}>
+            <h2>Connect the tools you already use.</h2>
+            <p>
+              Built on top of Agent Relay, so your Flows can open pull requests, send Slack messages,
+              and update tickets in the tools your team already uses.
+            </p>
+          </div>
+
+          <IntegrationMarquee />
+        </section>
+
+        <DeploymentCall />
+      </main>
+
+      <SiteFooter />
+    </div>
+  );
+}
diff --git a/web/app/landing.module.css b/web/app/landing.module.css
index 2d9481d1..8e848c84 100644
--- a/web/app/landing.module.css
+++ b/web/app/landing.module.css
@@ -1955,6 +1955,7 @@
 /* ---- HERO ---- */
 
 .heroSection {
+  --investor-strip-padding-top: 3rem;
   position: relative;
   background: var(--agent-tools-band-bg);
   transition: background 0.3s ease;
@@ -8022,7 +8023,7 @@
   }
 }
 
-/* ---- WORKS WITH EVERY AGENT (pyramid diagram) ---- */
+/* ---- ALL AGENTS WORK ON THE RELAY ---- */
 
 /* Same band fill + separation as the surrounding feature bands. */
 .howItWorks {
@@ -8031,7 +8032,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 88px 0 92px;
+  padding: 64px 0 68px;
   isolation: isolate;
 }
 
@@ -8051,8 +8052,8 @@
 }
 
 .howHeader {
-  max-width: 660px;
-  margin: 0 0 48px;
+  max-width: 800px;
+  margin: 0 0 32px;
   text-align: center;
 }
 
@@ -8074,387 +8075,29 @@
   max-width: 56ch;
 }
 
-/* pyramid: relay (top) -> connector pipes -> two agent groups (bottom) */
-.howStage {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  max-width: 680px;
-  margin: 0 auto;
-}
-
-/* apex zone: relay box (top) over the connector; wires + dots span both so a
-   message can travel up behind the relay box and pop back out */
-.howApex {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-}
-
-/* --- relay hub at the apex (sits above the dots so they hide behind it) --- */
-.howCore {
-  position: relative;
-  z-index: 2;
-  display: flex;
-  justify-content: center;
-}
-
-.howCoreNode {
-  position: relative;
+.howIconList {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 14px;
-  height: 72px;
-  padding: 0 28px;
-  border-radius: 18px;
-  border: 1px solid color-mix(in srgb, var(--primary) 42%, transparent);
-  background:
-    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 72%),
-    #0e2031;
-  box-shadow:
-    0 0 0 4px color-mix(in srgb, var(--primary) 6%, transparent),
-    0 16px 44px color-mix(in srgb, #04101c 52%, transparent);
-}
-
-/* A close, low halo that separates the hub from the band without blooming. */
-.howCoreNode::before {
-  content: '';
-  position: absolute;
-  inset: -14px;
-  z-index: -1;
-  border-radius: 50%;
-  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 9%, transparent), transparent 70%);
-  pointer-events: none;
-}
-
-.howCoreMark {
-  width: 40px;
-  height: auto;
-}
-
-.howCoreWordmark {
-  width: 138px;
-  height: auto;
-}
-
-/* --- connector spacer: fixed height so pipes + dots align at any width.
-       Combined with the 72px relay box, the apex zone is a known height. --- */
-.howLink {
-  width: 100%;
-  height: 72px;
-}
-
-.howWires {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.howWire {
-  fill: none;
-  stroke: color-mix(in srgb, var(--primary) 38%, transparent);
-  stroke-width: 1.5;
-  stroke-linejoin: round;
-  stroke-linecap: round;
-  vector-effect: non-scaling-stroke;
-}
-
-.howMsgs {
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  pointer-events: none;
-  /* Size container so the dots can be positioned with container-query units
-     (cqw/cqh) driven through GPU-composited transforms instead of animating
-     left/top. The box is sized by `inset: 0` (not its contents), so size
-     containment is safe here. */
-  container-type: size;
-}
-
-.howMsg {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 10px;
-  height: 10px;
-  margin: -5px 0 0 -5px;
-  border-radius: 50%;
-  background: var(--c);
-  box-shadow:
-    0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent),
-    0 0 7px 1px color-mix(in srgb, var(--c) 55%, transparent);
-  opacity: 0;
-  /* Position is driven by the individual `translate` property and the size is
-     driven by the individual `scale` property; both composite on the GPU and
-     interpolate independently, mirroring the old left/top vs transform split. */
-  will-change: translate, scale, opacity;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .howMsg {
-    animation: none;
-  }
-}
-
-/* Three messages, each its own colour, routed up to the relay and back down. */
-.howMsg1 {
-  --c: #74b8e2; /* blue — CLI -> custom */
-  animation: howMsg_m1 4.6s linear 0s infinite;
-}
-.howMsg2 {
-  --c: #d97757; /* Claude orange — custom -> CLI */
-  animation: howMsg_m2 5s linear 1.8s infinite;
-}
-.howMsg3 {
-  --c: #a6d388; /* green — CLI -> CLI */
-  animation: howMsg_m3 4.4s linear 3.6s infinite;
-}
-
-@keyframes howMsg_m1 {
-  0% {
-    translate: 25cqw 100cqh;
-    opacity: 0;
-    scale: 1;
-  }
-  4% {
-    opacity: 1;
-  }
-  9% {
-    translate: 25cqw 75cqh;
-  }
-  22% {
-    translate: 50cqw 75cqh;
-    animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.2);
-  }
-  37% {
-    translate: 50cqw 50cqh;
-    opacity: 1;
-    scale: 0.5;
-  }
-  43% {
-    translate: 50cqw 40cqh;
-    opacity: 0;
-    scale: 0.25;
-  }
-  49% {
-    translate: 50cqw 40cqh;
-    opacity: 0;
-    scale: 0.25;
-  }
-  50% {
-    translate: 50cqw 50cqh;
-    opacity: 1;
-    scale: 1.55;
-    animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1);
-  }
-  56% {
-    translate: 50cqw 57cqh;
-    scale: 1;
-  }
-  66% {
-    translate: 50cqw 75cqh;
-  }
-  82% {
-    translate: 75cqw 75cqh;
-  }
-  86% {
-    opacity: 1;
-  }
-  91% {
-    translate: 75cqw 100cqh;
-    opacity: 0;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-@keyframes howMsg_m2 {
-  0% {
-    translate: 75cqw 100cqh;
-    opacity: 0;
-    scale: 1;
-  }
-  4% {
-    opacity: 1;
-  }
-  9% {
-    translate: 75cqw 75cqh;
-  }
-  22% {
-    translate: 50cqw 75cqh;
-    animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.2);
-  }
-  37% {
-    translate: 50cqw 50cqh;
-    opacity: 1;
-    scale: 0.5;
-  }
-  43% {
-    translate: 50cqw 40cqh;
-    opacity: 0;
-    scale: 0.25;
-  }
-  49% {
-    translate: 50cqw 40cqh;
-    opacity: 0;
-    scale: 0.25;
-  }
-  50% {
-    translate: 50cqw 50cqh;
-    opacity: 1;
-    scale: 1.55;
-    animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1);
-  }
-  56% {
-    translate: 50cqw 57cqh;
-    scale: 1;
-  }
-  66% {
-    translate: 50cqw 75cqh;
-  }
-  82% {
-    translate: 25cqw 75cqh;
-  }
-  86% {
-    opacity: 1;
-  }
-  91% {
-    translate: 25cqw 100cqh;
-    opacity: 0;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-@keyframes howMsg_m3 {
-  0% {
-    translate: 25cqw 100cqh;
-    opacity: 0;
-    scale: 1;
-  }
-  4% {
-    opacity: 1;
-  }
-  9% {
-    translate: 25cqw 75cqh;
-  }
-  22% {
-    translate: 50cqw 75cqh;
-    animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.2);
-  }
-  37% {
-    translate: 50cqw 50cqh;
-    opacity: 1;
-    scale: 0.5;
-  }
-  43% {
-    translate: 50cqw 40cqh;
-    opacity: 0;
-    scale: 0.25;
-  }
-  49% {
-    translate: 50cqw 40cqh;
-    opacity: 0;
-    scale: 0.25;
-  }
-  50% {
-    translate: 50cqw 50cqh;
-    opacity: 1;
-    scale: 1.55;
-    animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1);
-  }
-  56% {
-    translate: 50cqw 57cqh;
-    scale: 1;
-  }
-  66% {
-    translate: 50cqw 75cqh;
-  }
-  82% {
-    translate: 25cqw 75cqh;
-  }
-  86% {
-    opacity: 1;
-  }
-  91% {
-    translate: 25cqw 100cqh;
-    opacity: 0;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-/* --- agent groups at the base --- */
-.howRow {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: clamp(16px, 4vw, 40px);
-  width: 100%;
-}
-
-.howCol {
-  display: flex;
-  justify-content: center;
-}
-
-.howGroup {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+  flex-wrap: wrap;
   gap: 12px;
-  padding: 22px 18px;
-  border-radius: 18px;
-  border: 1px solid var(--line);
-  background: color-mix(in srgb, var(--card-bg) 92%, #07111c 8%);
-  box-shadow: 0 14px 38px color-mix(in srgb, #04101c 36%, transparent);
-}
-
-.howGroupLabel {
-  font-family: var(--font-heading), sans-serif;
-  font-size: 1.05rem;
-  font-weight: 700;
-  letter-spacing: -0.01em;
-  color: var(--fg);
-  text-align: center;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  max-width: 100%;
 }
 
-.howGroupLogos {
+.howIcon {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 10px;
-  flex-wrap: wrap;
-}
-
-.howChip {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
   width: 44px;
   height: 44px;
-  border-radius: 12px;
-  border: 1px solid var(--line);
-  background: color-mix(in srgb, var(--card-bg) 55%, #060f1a 45%);
-  /* Mono brand marks (Codex, OpenCode, Cursor, GitHub, Hermes) inherit this. */
   color: #e6edf5;
-  transition:
-    transform 0.2s,
-    border-color 0.2s;
 }
 
-.howChip:hover {
-  transform: translateY(-2px);
-  border-color: var(--card-hover-border);
+.howIcon > span {
+  display: flex;
 }
 
 .howChipSvg {
@@ -8462,90 +8105,21 @@
   height: 24px;
 }
 
-.howGroupCaption {
-  margin: 0;
-  font-size: 0.8rem;
-  line-height: 1.45;
-  color: var(--fg-faint);
-  text-align: center;
-}
-
 @media (max-width: 600px) {
   .howItWorks {
-    padding: 64px 0 72px;
-  }
-
-  .howHeader {
-    margin-bottom: 38px;
-  }
-
-  .howCoreWordmark {
-    width: 120px;
-  }
-
-  /* Keep the relay box and connector equal so the apex coordinate math
-     (relay bottom 50%, bus 75%) holds at this breakpoint too. */
-  .howCoreNode {
-    height: 60px;
-  }
-
-  .howLink {
-    height: 60px;
-  }
-
-  .howRow {
-    gap: 12px;
-  }
-
-  .howGroup {
-    padding: 16px 8px;
-    gap: 10px;
-  }
-
-  /* Cap the logo row at three chips wide so the five icons wrap evenly to a
-     3-over-2 grid (the bottom two stay centred). */
-  .howGroupLogos {
-    gap: 8px;
-    max-width: 140px;
-    margin: 0 auto;
+    padding: 48px 0;
   }
 
-  .howChip {
-    width: 41px;
-    height: 41px;
-  }
-
-  .howChipSvg {
-    width: 24px;
-    height: 24px;
-  }
-
-  .howGroupLabel {
-    font-size: 0.95rem;
-  }
-
-  .howGroupCaption {
-    font-size: 0.74rem;
+  .howIconList {
+    display: grid;
+    grid-template-columns: repeat(5, 44px);
+    gap: 8px 12px;
   }
 }
 
-/* Reduced motion: park the three messages on the pipes instead of animating. */
-@media (prefers-reduced-motion: reduce) {
-  .howMsg {
-    animation: none;
-    opacity: 1;
-    transform: none;
-  }
-  .howMsg1 {
-    left: 25%;
-    top: 88%;
-  }
-  .howMsg2 {
-    left: 50%;
-    top: 62%;
-  }
-  .howMsg3 {
-    left: 75%;
-    top: 88%;
-  }
+.featureDescription {
+  margin: 0;
+  color: var(--fg-muted);
+  font-size: 1.05rem;
+  line-height: 1.7;
 }
diff --git a/web/app/og-home.png/route.tsx b/web/app/og-home.png/route.tsx
index d7f06b4d..19450fd9 100644
--- a/web/app/og-home.png/route.tsx
+++ b/web/app/og-home.png/route.tsx
@@ -1,27 +1,9 @@
-import { ImageResponse } from 'next/og';
+import { HOME_OG_IMAGE_PATH } from '../../lib/og-meta';
+import { absoluteUrl } from '../../lib/site';
 
-import { LandingVariant, loadBrandFonts, OG_SIZE } from '../../lib/og/template';
-
-export const runtime = 'nodejs';
-// Prerender at build time: the homepage card never changes between deploys, so
-// there is no reason to re-render (and re-fetch the brand fonts) per request.
 export const dynamic = 'force-static';
 
-/**
- * The homepage's rich Open Graph card: the landing variant (logo + wordmark,
- * hero headline, tagline, and the live-style chat panel). Served as a `.png`
- * route handler so the URL ends in a real image extension — some scrapers key
- * off the extension rather than the `Content-Type`. `app/page.tsx` points its
- * `openGraph.images` here.
- */
-export async function GET() {
-  const { fonts, headingFamily, bodyFamily } = await loadBrandFonts();
-
-  return new ImageResponse(<LandingVariant headingFamily={headingFamily} bodyFamily={bodyFamily} />, {
-    ...OG_SIZE,
-    // Render 👍 (and any emoji) as Twemoji graphics rather than relying on a
-    // system emoji font satori may not have.
-    emoji: 'twemoji',
-    ...(fonts.length > 0 ? { fonts } : {}),
-  });
+// Keep the legacy URL aligned with the static card used by homepage metadata.
+export function GET() {
+  return Response.redirect(absoluteUrl(HOME_OG_IMAGE_PATH), 307);
 }
diff --git a/web/app/page.tsx b/web/app/page.tsx
index 156a9acf..8f0b8f41 100644
--- a/web/app/page.tsx
+++ b/web/app/page.tsx
@@ -2,7 +2,7 @@ import type { Metadata } from 'next';
 
 import { MessagingLandingPage } from '../components/home/MessagingLandingPage';
 import { HOME_HERO_DESCRIPTION, HOME_HERO_TITLE } from '../lib/home-copy';
-import { HOME_OG_IMAGE_PATH, ogImage } from '../lib/og-meta';
+import { HOME_OG_ALT, HOME_OG_IMAGE_PATH, ogImage } from '../lib/og-meta';
 import { absoluteUrl } from '../lib/site';
 
 export const metadata: Metadata = {
@@ -16,7 +16,7 @@ export const metadata: Metadata = {
     description: HOME_HERO_DESCRIPTION,
     url: absoluteUrl('/'),
     type: 'website',
-    images: [ogImage(HOME_OG_IMAGE_PATH, HOME_HERO_TITLE)],
+    images: [ogImage(HOME_OG_IMAGE_PATH, HOME_OG_ALT)],
   },
   twitter: {
     card: 'summary_large_image',
@@ -27,5 +27,5 @@ export const metadata: Metadata = {
 };
 
 export default function HomePage() {
-  return <MessagingLandingPage />;
+  return <MessagingLandingPage showInvestors />;
 }
diff --git a/web/components/InvestorStrip.tsx b/web/components/InvestorStrip.tsx
new file mode 100644
index 00000000..ba9f2ff3
--- /dev/null
+++ b/web/components/InvestorStrip.tsx
@@ -0,0 +1,25 @@
+import Image from 'next/image';
+import s from './investor-strip.module.css';
+
+export function InvestorStrip() {
+  return (
+    <section className={s.backers} aria-label="Agent Relay investors">
+      <p>Backed by</p>
+      <div className={s.investorGroup}>
+        <Image className={s.investorHustle} src="/investors/hustle-fund.svg" alt="Hustle Fund" width={205} height={27} />
+        <Image className={s.investorActive} src="/investors/active-capital.svg" alt="Active Capital" width={185} height={30} />
+        <span className={s.investorYc} role="img" aria-label="Y Combinator">
+          <span aria-hidden="true">Y</span><strong aria-hidden="true">Combinator</strong>
+        </span>
+        <Image className={s.investorCortical} src="/investors/cortical-ventures.webp" alt="Cortical Ventures" width={220} height={32} />
+        <span className={s.investorYonder} role="img" aria-label="Yonder">
+          <svg aria-hidden="true" viewBox="0 0 28 28">
+            <circle cx="14" cy="14" r="12" fill="none" stroke="currentColor" strokeWidth="2" />
+            <path d="M4.5 18.5 10.6 9l3.5 5 3.1-4.3 6.3 8.8" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+          <strong aria-hidden="true">YONDER</strong>
+        </span>
+      </div>
+    </section>
+  );
+}
diff --git a/web/components/SiteFooter.tsx b/web/components/SiteFooter.tsx
index bead4f65..b6025660 100644
--- a/web/components/SiteFooter.tsx
+++ b/web/components/SiteFooter.tsx
@@ -21,8 +21,8 @@ const footerColumns: FooterColumn[] = [
     title: 'Products',
     links: [
       { label: 'Relay Cloud', href: 'https://agentrelay.com/cloud' },
-      { label: 'Enterprise', href: '/enterprise' },
-      { label: 'Reflex', href: '/reflex' },
+      { label: 'Flows', href: '/flows' },
+      { label: 'Skip', href: 'https://heyskip.dev' },
       { label: 'Pear', href: '/pear' },
     ],
   },
@@ -32,7 +32,7 @@ const footerColumns: FooterColumn[] = [
       { label: 'Relay', href: '/messaging' },
       { label: 'RelayFile', href: 'https://github.com/AgentWorkforce/relayfile' },
       { label: 'RelayAuth', href: 'https://github.com/AgentWorkforce/relayauth' },
-      { label: 'RelayFlows', href: 'https://github.com/AgentWorkforce/relayflows' },
+      { label: 'RelayFlows', href: 'https://github.com/agentworkforce/flows' },
       { label: 'Agents', href: '/agents' },
     ],
   },
diff --git a/web/components/blog/blog.module.css b/web/components/blog/blog.module.css
index fa36d1f5..add2943d 100644
--- a/web/components/blog/blog.module.css
+++ b/web/components/blog/blog.module.css
@@ -5,7 +5,7 @@
   --blog-band-bg:
     radial-gradient(circle at 18% 24%, rgba(116, 184, 226, 0.16), transparent 32%),
     linear-gradient(180deg, #10273a 0%, #17364c 52%, #0d2638 100%);
-  --blog-shell-bg: #08111a;
+  --blog-shell-bg: #0b1c2a;
   --blog-post-hero-bg: #0b1c2a;
   min-height: 100vh;
   background: var(--blog-band-bg);
diff --git a/web/components/home/DeliveryFeature.tsx b/web/components/home/DeliveryFeature.tsx
index f38673b1..c07be8a0 100644
--- a/web/components/home/DeliveryFeature.tsx
+++ b/web/components/home/DeliveryFeature.tsx
@@ -50,10 +50,12 @@ export function DeliveryFeature({
   title = 'The hard parts of delivery, handled',
   items = DEFAULT_ITEMS,
   previewVariant = 'delivery',
+  showCapabilities = true,
 }: {
   title?: string;
   items?: readonly string[];
   previewVariant?: 'delivery' | 'workflow';
+  showCapabilities?: boolean;
 } = {}) {
   return (
     <FadeIn direction="up" delay={120} className={`${s.featureCol} ${s.deliveryFeature}`}>
@@ -96,7 +98,26 @@ export function DeliveryFeature({
         </ul>
       </div>
 
-      <ContextCapabilities />
+      {showCapabilities && <ContextCapabilities />}
     </FadeIn>
   );
 }
+
+export function DurableWorkflowFeature({
+  showCapabilities = true,
+  title = 'Build durable workflows',
+}: { showCapabilities?: boolean; title?: string }) {
+  return (
+    <DeliveryFeature
+      title={title}
+      previewVariant="workflow"
+      showCapabilities={showCapabilities}
+      items={[
+        'Persist every transition so long-running work survives restarts and deploys.',
+        'Retry individual steps without repeating successful work or duplicating side effects.',
+        'Trace every input, output, model action, artifact, and intervention in one run history.',
+        'Trigger workflows from schedules and events, then execute them close to your systems.',
+      ]}
+    />
+  );
+}
diff --git a/web/components/home/DeploymentCall.tsx b/web/components/home/DeploymentCall.tsx
new file mode 100644
index 00000000..f0d751b0
--- /dev/null
+++ b/web/components/home/DeploymentCall.tsx
@@ -0,0 +1,51 @@
+import { FlowFileAnimation } from './FlowFileAnimation';
+import Image from 'next/image';
+import { ArrowRight, Check } from 'lucide-react';
+import { FadeIn } from '../FadeIn';
+import s from '../../app/enterprise/enterprise.module.css';
+import layout from './deployment-call.module.css';
+
+export function DeploymentCall() {
+  return (
+        <section className={`${s.ctaSection} ${layout.section}`}>
+          <FadeIn className={s.ctaInner}>
+            <div className={s.ctaCopy}>
+              <h2>Become a design partner</h2>
+              <p>
+                We&apos;re actively looking for design partners who are tired of agents letting them down. You&apos;ll have direct access to our team and great discounts on all paid plans.
+              </p>
+
+              <ul className={s.ctaChecklist} aria-label="Topics covered on the call">
+                <li>
+                  <Check aria-hidden="true" />
+                  Walk us through a flaky workflow your humans or agents handle
+                </li>
+                <li>
+                  <Check aria-hidden="true" />
+                  We&apos;ll help you write your flows and deploy them
+                </li>
+                <li>
+                  <Check aria-hidden="true" />
+                  Review hosted, private cloud, or self-managed options
+                </li>
+                <li>
+                  <Check aria-hidden="true" />
+                  Leave with a clear path from discovery to production
+                </li>
+              </ul>
+
+              <div className={`${s.ctaOwner} ${layout.owner}`}>
+                <Image alt="Khaliq Gant" height={56} src="/authors/khaliq.jpeg" width={56} />
+                <div>
+                  <strong>Khaliq Gant</strong>
+                  <span>Founder and CTO</span>
+                </div>
+                <a className={`${s.salesButton} ${layout.bookCall}`} href="/khaliq">Book Call<ArrowRight aria-hidden="true" /></a>
+              </div>
+            </div>
+
+            <FlowFileAnimation />
+          </FadeIn>
+        </section>
+  );
+}
diff --git a/web/components/home/FlowFileAnimation.tsx b/web/components/home/FlowFileAnimation.tsx
new file mode 100644
index 00000000..f903c325
--- /dev/null
+++ b/web/components/home/FlowFileAnimation.tsx
@@ -0,0 +1,76 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import s from './flow-file-animation.module.css';
+
+const prefix = `import { flow } from "@relayflows/surface";
+
+export default flow(
+  "customer-reply",
+  { budget: "$5/run" },
+  async (f) => {
+    await f.agent("researcher", {
+      task: "Research and write findings.md",
+    });
+
+    `;
+const correction = 'await f.agent("send-reply");';
+const ending = `// Verify before drafting.
+    await f.run("test -s findings.md");
+
+    await f.agent("responder", {
+      task: "Use findings.md to draft reply.md",
+    });
+
+    f.done("success");
+  },
+);`;
+const finalCode = prefix + ending;
+const frames: { text: string; delay: number }[] = [{ text: '', delay: 600 }];
+for (let i = 1; i <= prefix.length + correction.length; i++) {
+  frames.push({ text: (prefix + correction).slice(0, i), delay: i === prefix.length + correction.length ? 1100 : 22 });
+}
+for (let i = correction.length - 1; i >= 0; i--) frames.push({ text: prefix + correction.slice(0, i), delay: i === 0 ? 450 : 38 });
+for (let i = 1; i <= ending.length; i++) frames.push({ text: prefix + ending.slice(0, i), delay: i === ending.length ? 4500 : 25 });
+
+function highlight(text: string) {
+  return text.split(/("[^"\n]*"|\/\/[^\n]*|\b(?:import|from|export|default|async|await|const)\b)/g).map((part, i) => (
+    <span key={i} className={part.startsWith('"') ? s.string : part.startsWith('//') ? s.comment : /^(import|from|export|default|async|await|const)$/.test(part) ? s.keyword : undefined}>{part}</span>
+  ));
+}
+
+export function FlowFileAnimation() {
+  const root = useRef<HTMLDivElement>(null);
+  const [code, setCode] = useState('');
+  useEffect(() => {
+    const motion = matchMedia('(prefers-reduced-motion: reduce)');
+    let frame = 0;
+    let visible = false;
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    const schedule = () => {
+      clearTimeout(timer);
+      if (motion.matches) { setCode(finalCode); return; }
+      if (!visible || document.hidden) return;
+      timer = setTimeout(() => {
+        frame = (frame + 1) % frames.length;
+        setCode(frames[frame].text);
+        schedule();
+      }, frames[frame].delay);
+    };
+    const observer = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; schedule(); }, { threshold: 0.15 });
+    if (root.current) observer.observe(root.current);
+    motion.addEventListener('change', schedule);
+    document.addEventListener('visibilitychange', schedule);
+    return () => { clearTimeout(timer); observer.disconnect(); motion.removeEventListener('change', schedule); document.removeEventListener('visibilitychange', schedule); };
+  }, []);
+  return (
+    <div ref={root} className={s.editor} role="img" aria-label="flow.ts being written: a researcher creates findings, a premature reply step is backspaced and replaced with a file check, then a responder drafts the reply.">
+      <div className={s.header} aria-hidden="true"><div className={s.dots}><i /><i /><i /></div><span>flow.ts</span><small>TypeScript</small></div>
+      <div className={s.body} aria-hidden="true">
+        <div className={s.numbers}>{finalCode.split('\n').map((_, i) => <span key={i}>{i + 1}</span>)}</div>
+        <pre><code>{highlight(code)}<span className={s.cursor} /></code></pre>
+      </div>
+      <div className={s.footer} aria-hidden="true"><span>{code === finalCode ? 'Saved' : 'Editing'}</span><span>UTF-8</span></div>
+    </div>
+  );
+}
diff --git a/web/components/home/FlowGatePreview.tsx b/web/components/home/FlowGatePreview.tsx
new file mode 100644
index 00000000..f54d9441
--- /dev/null
+++ b/web/components/home/FlowGatePreview.tsx
@@ -0,0 +1,96 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { Check, FileCheck2, LockKeyhole, Terminal } from 'lucide-react';
+import ClaudeCode from '@lobehub/icons/es/ClaudeCode';
+import Image from 'next/image';
+import Grok from '@lobehub/icons/es/Grok';
+import Codex from '@lobehub/icons/es/Codex';
+import s from './flow-gate-preview.module.css';
+
+export function FlowGatePreview() {
+  const [phase, setPhase] = useState(0);
+  const root = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const media = window.matchMedia('(prefers-reduced-motion: reduce)');
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    let visible = false;
+    let current = 0;
+    const delays = [1200, 1400, 3200, 1400, 2200, 2400];
+    const start = () => {
+      clearTimeout(timer);
+      if (media.matches) { setPhase(2); return; }
+      if (!visible || document.hidden) return;
+      timer = setTimeout(() => {
+        current = (current + 1) % delays.length;
+        setPhase(current);
+        start();
+      }, delays[current]);
+    };
+    const observer = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; start(); }, { threshold: 0.2 });
+    if (root.current) observer.observe(root.current);
+    media.addEventListener('change', start);
+    document.addEventListener('visibilitychange', start);
+    return () => { clearTimeout(timer); observer.disconnect(); media.removeEventListener('change', start); document.removeEventListener('visibilitychange', start); };
+  }, []);
+  const passed = phase === 5;
+  const stages = [
+    { label: 'Gmail', task: 'Receive mail', step: 0, x: 7, y: 45, icon: <Image src="/integration-logos/gmail.svg" alt="" width={21} height={21} /> },
+    { label: 'Script', task: 'Classify', step: 1, x: 23, y: 45, icon: <Terminal size={19} /> },
+    { label: 'Grok', task: 'Research competitors', step: 2, x: 43, y: 0, icon: <Grok size={21} /> },
+    { label: 'Claude', task: 'Review backlog', step: 2, x: 43, y: 90, icon: <ClaudeCode size={21} /> },
+    { label: 'Script', task: 'Verify conclusions', step: 3, x: 70, y: 45, icon: <Terminal size={19} /> },
+    { label: 'Codex', task: 'Draft response', step: 4, x: 92, y: 45, icon: <Codex size={21} /> },
+  ];
+  const messages = [
+    ['GMAIL', 'Customer email received.'],
+    ['SCRIPT', 'Classifying the request.'],
+    ['AGENTS', 'Researching competitors and reviewing backlog.'],
+    ['SCRIPT', 'Verifying conclusions from both agents.'],
+    ['CODEX', 'Drafting a response from the findings.'],
+    ['CODEX', 'Response draft ready.'],
+  ];
+  const status = [
+    'Email received. Classification is next.',
+    'Running the classification script.',
+    'Verification waits for both agent outputs.',
+    'Requirements met. Codex can start.',
+    'Codex is preparing the response.',
+    'Response draft ready. Flow complete.',
+  ];
+  return (
+    <div ref={root} className={s.panel} role="img" aria-label="Email workflow: Gmail receives mail, a script classifies it, Grok researches competitors and Claude reviews the backlog in parallel. A script verifies conclusions from both outputs, then Codex drafts a response.">
+      <div aria-hidden="true" className={s.content}>
+        <div className={s.branchNodes}>
+          <svg className={s.branchLines} viewBox="0 0 100 168" preserveAspectRatio="none">
+            <path className={phase >= 1 ? s.pathDone : ''} d="M7 63 L23 63" />
+            <path className={phase >= 2 ? s.pathDone : ''} d="M23 63 L43 18 M23 63 L43 108" />
+            <path className={phase >= 3 ? s.pathDone : ''} d="M43 18 L70 63 M43 108 L70 63" />
+            <path className={phase >= 4 ? s.pathDone : ''} d="M70 63 L92 63" />
+          </svg>
+          {stages.map((stage) => (
+            <div key={`${stage.label}-${stage.task}`} className={`${s.node} ${s.branchNode}`} style={{ left: `${stage.x}%`, top: stage.y }}>
+              <span className={stage.step < phase ? s.complete : stage.step === phase ? s.active : s.locked}>{stage.icon}</span>
+              <b>{stage.label}</b><small>{stage.task}</small>
+            </div>
+          ))}
+        </div>
+        <div className={s.agent}><span>{messages[phase][0]}</span><span>{messages[phase][1]}</span><Check size={14} /></div>
+        <div className={s.requirements}>
+          {[
+            { file: 'classification.json', ready: phase >= 2, waiting: 'Classifying' },
+            { file: 'research + backlog', ready: phase >= 3, waiting: 'Awaiting both' },
+            { file: 'response.md', ready: phase >= 5, waiting: 'Pending' },
+          ].map((item) => (
+            <div key={item.file} className={`${s.row} ${!item.ready && phase === 2 && item.file === 'research + backlog' ? s.missing : ''}`}>
+              <code>{item.file}</code><span className={item.ready ? s.good : s.pending}>{item.ready ? <><Check size={14} /> Ready</> : item.waiting}</span>
+            </div>
+          ))}
+        </div>
+        <div className={`${s.status} ${passed ? s.success : ''}`} key={phase}>
+          {passed ? <FileCheck2 size={17} /> : <LockKeyhole size={17} />}<span>{status[phase]}</span>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/web/components/home/Hero.tsx b/web/components/home/Hero.tsx
index a4d37125..a563e938 100644
--- a/web/components/home/Hero.tsx
+++ b/web/components/home/Hero.tsx
@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import { InvestorStrip } from '../InvestorStrip';
 import { ArrowRight } from 'lucide-react';
 
 import { HOME_HERO_DESCRIPTION, HOME_HERO_TITLE } from '../../lib/home-copy';
@@ -6,7 +7,7 @@ import { HeroTerminalMarquee } from './HeroTerminalMarquee';
 import s from '../../app/landing.module.css';
 import { GitHubIcon } from './icons';
 
-export function Hero() {
+export function Hero({ showInvestors = false }: { showInvestors?: boolean }) {
   return (
     <div className={s.heroSection}>
       <section className={s.heroCenter}>
@@ -35,6 +36,7 @@ export function Hero() {
         </div>
       </section>
 
+      {showInvestors && <InvestorStrip />}
       <HeroTerminalMarquee />
     </div>
   );
diff --git a/web/components/home/HowItWorks.tsx b/web/components/home/HowItWorks.tsx
index e2094dfa..40a92cef 100644
--- a/web/components/home/HowItWorks.tsx
+++ b/web/components/home/HowItWorks.tsx
@@ -41,110 +41,25 @@ const CUSTOM_LOGOS: readonly LogoItem[] = [
   { key: 'github', label: 'GitHub', node: <Github size={ICON_SIZE} /> },
 ];
 
-/**
- * Pyramid layout: the Agent Relay hub sits at the top; the two agent groups
- * sit below it. A fixed-height connector zone between them carries the
- * orthogonal pipes (relay → bus → each group) and the animated messages.
- * Coordinates are percentages of that connector zone, so the pipes and dots
- * line up at every width. Three message dots ({@link MESSAGE_CLASSES}) travel
- * the pipes up to the relay and back down to another agent (CLI → custom,
- * custom → CLI, CLI → CLI).
- */
-// Apex coords (% of the relay+connector zone): relay bottom 50%, bus 75%,
-// card tops 100%. The pipes connect the relay box down to each agent group.
-const WIRES: readonly string[] = [
-  '50,50 50,75', // relay down to the bus
-  '25,75 75,75', // bus across
-  '25,75 25,100', // bus down to CLI agents
-  '75,75 75,100', // bus down to custom agents
-];
-
-const MESSAGE_CLASSES = [s.howMsg1, s.howMsg2, s.howMsg3] as const;
-
-function AgentGroup({
-  label,
-  logos,
-  caption,
-}: {
-  label: string;
-  logos: readonly LogoItem[];
-  caption: string;
-}) {
-  return (
-    <div className={s.howGroup}>
-      <span className={s.howGroupLabel}>{label}</span>
-      <div className={s.howGroupLogos}>
-        {logos.map((logo) => (
-          <span key={logo.key} className={s.howChip} aria-label={logo.label} title={logo.label}>
-            {logo.node}
-          </span>
-        ))}
-      </div>
-      <p className={s.howGroupCaption}>{caption}</p>
-    </div>
-  );
-}
-
 export function HowItWorks() {
   return (
     <section className={s.howItWorks} aria-labelledby="how-it-works-title">
       <FadeIn direction="up" className={s.howHeader}>
         <h2 id="how-it-works-title" className={s.howTitle}>
-          Works with all of them
+          All agents work on the relay
         </h2>
         <p className={s.howSubtitle}>
           It's not a harness, and it's not a framework. Our PTY based driver can power any CLI agent or you
           can drop in our SDK for your custom orchestrator.
         </p>
       </FadeIn>
-
-      <div className={s.howStage}>
-        {/* Apex zone = relay box (top) + connector (below). Wires and message
-            dots span the whole zone so a dot can travel up behind the relay
-            box and pop back out. */}
-        <div className={s.howApex}>
-          <svg className={s.howWires} viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
-            {WIRES.map((points, i) => (
-              <polyline key={i} points={points} className={s.howWire} />
-            ))}
-          </svg>
-          <div className={s.howMsgs} aria-hidden="true">
-            {MESSAGE_CLASSES.map((cls, i) => (
-              <span key={i} className={`${s.howMsg} ${cls}`} />
-            ))}
-          </div>
-
-          <div className={s.howCore}>
-            <div className={s.howCoreNode}>
-              <img
-                src="/brand-kit/agent-relay-mark.svg"
-                alt=""
-                width={46}
-                height={38}
-                className={s.howCoreMark}
-              />
-              <img
-                src="/brand-kit/agent-relay-wordmark.svg"
-                alt="Agent Relay"
-                width={150}
-                height={30}
-                className={s.howCoreWordmark}
-              />
-            </div>
-          </div>
-
-          <div className={s.howLink} aria-hidden="true" />
-        </div>
-
-        <div className={s.howRow}>
-          <FadeIn direction="right" className={s.howCol}>
-            <AgentGroup label="CLI agents" logos={CLI_LOGOS} caption="PTY driven, real-time injection" />
-          </FadeIn>
-          <FadeIn direction="left" delay={80} className={s.howCol}>
-            <AgentGroup label="Your custom agents" logos={CUSTOM_LOGOS} caption="Drop-in SDK + bindings" />
-          </FadeIn>
-        </div>
-      </div>
+      <ul className={s.howIconList} aria-label="CLI agents and custom agents">
+        {[...CLI_LOGOS, ...CUSTOM_LOGOS].map((logo) => (
+          <li key={logo.key} className={s.howIcon} title={logo.label}>
+            <span role="img" aria-label={logo.label}>{logo.node}</span>
+          </li>
+        ))}
+      </ul>
     </section>
   );
 }
diff --git a/web/components/home/MessagingFeature.tsx b/web/components/home/MessagingFeature.tsx
index b26a4b39..67dd4518 100644
--- a/web/components/home/MessagingFeature.tsx
+++ b/web/components/home/MessagingFeature.tsx
@@ -1,24 +1,34 @@
+import type { ReactNode } from 'react';
 import { ChannelMessagesPreview } from '../ChannelMessagesPreview';
 import { FadeIn } from '../FadeIn';
 import s from '../../app/landing.module.css';
 
-export function MessagingFeature() {
+const DEFAULT_ITEMS = [
+  'Channels and messages to coordinate work in shared spaces.',
+  'Threads and reactions to keep decisions attached to the right context.',
+  'DMs and @mentions to route handoffs to the right agent.',
+  'Searchable history so agents can recover decisions without asking humans.',
+];
+
+export function MessagingFeature({
+  title = 'Let your agents talk. Directly.',
+  items = DEFAULT_ITEMS,
+  description,
+  preview,
+}: { title?: string; items?: readonly string[]; description?: string; preview?: ReactNode } = {}) {
   return (
     <FadeIn direction="up" delay={0} className={`${s.featureCol} ${s.messagingFeature}`}>
       <div className={s.featurePreview}>
         <div className={s.previewAccent} />
         <div className={s.previewChat}>
-          <ChannelMessagesPreview />
+          {preview ?? <ChannelMessagesPreview />}
         </div>
       </div>
       <div className={s.featureCopy}>
-        <h3 className={s.featureTitle}>Let your agents talk. Directly.</h3>
-        <ul className={s.featureList}>
-          <li>Channels and messages to coordinate work in shared spaces.</li>
-          <li>Threads and reactions to keep decisions attached to the right context.</li>
-          <li>DMs and @mentions to route handoffs to the right agent.</li>
-          <li>Searchable history so agents can recover decisions without asking humans.</li>
-        </ul>
+        <h3 className={s.featureTitle}>{title}</h3>
+        {description ? <p className={s.featureDescription}>{description}</p> : <ul className={s.featureList}>
+          {items.map((item) => <li key={item}>{item}</li>)}
+        </ul>}
       </div>
     </FadeIn>
   );
diff --git a/web/components/home/MessagingLandingPage.tsx b/web/components/home/MessagingLandingPage.tsx
index 06ff59e3..de961183 100644
--- a/web/components/home/MessagingLandingPage.tsx
+++ b/web/components/home/MessagingLandingPage.tsx
@@ -1,3 +1,4 @@
+import { DurableWorkflowFeature } from './DeliveryFeature';
 import { GitHubStarsBadge } from '../GitHubStars';
 import { SiteFooter } from '../SiteFooter';
 import { SiteNav } from '../SiteNav';
@@ -5,7 +6,6 @@ import {
   A2AFeature,
   AgentToolsFeature,
   Deploy,
-  DeliveryFeature,
   Hero,
   HowItWorks,
   MessagingFeature,
@@ -15,7 +15,7 @@ import {
 } from './index';
 import s from '../../app/landing.module.css';
 
-export function MessagingLandingPage() {
+export function MessagingLandingPage({ showInvestors = false }: { showInvestors?: boolean }) {
   return (
     <div className={`${s.page} ${s.messagingPage}`}>
       <a className="skip-link" href="#main">
@@ -25,22 +25,13 @@ export function MessagingLandingPage() {
       <SiteNav actions={<GitHubStarsBadge />} />
 
       <main id="main">
-        <Hero />
+        <Hero showInvestors={showInvestors} />
 
         <div className={s.featuresWrapper}>
           <section className={s.featuresSection}>
             <MessagingFeature />
             <HowItWorks />
-            <DeliveryFeature
-              title="Build durable workflows"
-              previewVariant="workflow"
-              items={[
-                'Persist every transition so long-running work survives restarts and deploys.',
-                'Retry individual steps without repeating successful work or duplicating side effects.',
-                'Trace every input, output, model action, artifact, and intervention in one run history.',
-                'Trigger workflows from schedules and events, then execute them close to your systems.',
-              ]}
-            />
+            <DurableWorkflowFeature />
             <QuickStart />
             <WaveDivider variant="feature" />
             <AgentToolsFeature />
diff --git a/web/components/home/deployment-call.module.css b/web/components/home/deployment-call.module.css
new file mode 100644
index 00000000..a758e4bc
--- /dev/null
+++ b/web/components/home/deployment-call.module.css
@@ -0,0 +1,18 @@
+.section {
+  --enterprise-line: rgba(116, 184, 226, 0.2);
+  --enterprise-line-strong: rgba(116, 184, 226, 0.34);
+  --enterprise-text: #edf4fb;
+  --enterprise-muted: #a8b8c8;
+  --enterprise-faint: #77879a;
+  --enterprise-accent: #74b8e2;
+  width: 100vw;
+  margin-inline: calc(50% - 50vw);
+  box-sizing: border-box;
+}
+
+.owner { flex-wrap: wrap; }
+.owner > img { flex-shrink: 0; }
+.bookCall { margin-left: auto; }
+@media (max-width: 420px) { .bookCall { margin-left: 0; } }
+
+section.section { background: #0B1C2A; }
diff --git a/web/components/home/flow-file-animation.module.css b/web/components/home/flow-file-animation.module.css
new file mode 100644
index 00000000..1c1711d1
--- /dev/null
+++ b/web/components/home/flow-file-animation.module.css
@@ -0,0 +1,19 @@
+.editor { min-width: 0; width: 100%; border: 1px solid #29475d; border-radius: 14px; background: #07131e; overflow: hidden; color: #d3e3ef; box-shadow: 0 24px 65px #020a1040; }
+.header { height: 48px; padding: 0 18px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid #243a4c; background: #102130; font: 12px monospace; }
+.header small { margin-left: auto; color: #7995ac; font-size: 10px; }
+.dots { display: flex; gap: 6px; }
+.dots i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
+.dots i:nth-child(2) { background: #febc2e; }
+.dots i:nth-child(3) { background: #28c840; }
+.body { display: flex; gap: 14px; padding: 22px 16px; height: 482px; box-sizing: border-box; overflow-x: auto; }
+.numbers { display: flex; flex-direction: column; color: #435e74; text-align: right; user-select: none; }
+.body pre, .numbers { margin: 0; font: 11px/20px var(--font-geist-mono), monospace; }
+.body pre { tab-size: 2; }
+.keyword { color: #74b8e2; }
+.string { color: #cd866a; }
+.comment { color: #70899d; }
+.cursor { display: inline-block; height: 13px; width: 2px; vertical-align: -2px; background: #9fd4f5; animation: blink 1s steps(1) infinite; }
+.footer { border-top: 1px solid #243a4c; display: flex; justify-content: space-between; padding: 10px 18px; color: #7995ac; font: 10px monospace; }
+@keyframes blink { 50% { opacity: 0; } }
+@media (prefers-reduced-motion: reduce) { .cursor { animation: none; display: none; } }
+@media (max-width: 600px) { .body { gap: 9px; padding-inline: 10px; } .body pre, .numbers { font-size: 10px; } }
diff --git a/web/components/home/flow-gate-preview.module.css b/web/components/home/flow-gate-preview.module.css
new file mode 100644
index 00000000..d4614c38
--- /dev/null
+++ b/web/components/home/flow-gate-preview.module.css
@@ -0,0 +1,73 @@
+.panel { height: 100%; color: #dce9f4; font-family: var(--font-sans), sans-serif; }
+.content { height: 100%; display: flex; flex-direction: column; gap: clamp(10px, 1.5vw, 20px); padding: 4px 8px; }
+.nodes { display: flex; align-items: center; padding: 7px 9px 0; }
+.node { display: grid; justify-items: center; gap: 8px; min-width: 58px; }
+.node > span { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid; border-radius: 50%; transition: color .4s, background .4s, border-color .4s; }
+.node b { font-size: 11px; font-weight: 500; }
+.complete { color: #74b8e2; background: #173449; border-color: #427fa5 !important; }
+.active { color: #cd866a; background: #3b2926; border-color: #c1674b !important; }
+.locked { color: #8092a5; background: #162232; border-color: #354558 !important; }
+.connector { flex: 1; height: 2px; background: #354558; margin: -39px 0 0; position: relative; overflow: hidden; transition: background .6s; }
+.lit { background: #427fa5; }
+.lit::after { content: ''; position: absolute; inset: 0; width: 18px; background: #9fd4f5; animation: travel 1.6s ease-in-out infinite; }
+.agent { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #2b4053; font-size: 12px; }
+.agent > span:first-child { font: 9px monospace; color: #8ea5b8; }
+.agent svg { margin-left: auto; color: #74b8e2; }
+.requirements { display: grid; gap: 4px; }
+.caption { font: 9px/1.5 monospace; letter-spacing: .08em; color: #8ea5b8; margin-bottom: 5px; }
+.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px; border: 1px solid transparent; border-radius: 5px; transition: background .4s, border-color .4s; }
+.row code { font-size: 12px; }
+.row > span { display: flex; align-items: center; gap: 5px; font-size: 11px; white-space: nowrap; }
+.good { color: #74b8e2; }
+.pending { color: #cd866a; }
+.missing { background: #cd866a10; border-color: #cd866a38; }
+.status { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 10px 0 3px; color: #cd866a; font-size: 11px; animation: appear .3s ease-out; }
+.success { color: #74b8e2; }
+@keyframes travel { from { transform: translateX(-20px); } to { transform: translateX(150px); } }
+@keyframes appear { from { opacity: .3; } to { opacity: 1; } }
+@media (max-width: 600px) { .content { gap: 9px; padding: 0; } .row { padding: 7px; } .nodes { padding-top: 2px; } .agent { font-size: 11px; } }
+@media (prefers-reduced-motion: reduce) { .panel *, .panel *::after { animation: none; transition: none; } }
+
+.node small { font-size: 9px; line-height: 1.3; color: #a7bed0; white-space: nowrap; }
+
+/* Fixed tracks keep every stage in place throughout the animation. */
+.panel { width: 100%; min-width: 0; }
+.content { width: 100%; box-sizing: border-box; min-width: 0; gap: 14px; }
+.nodes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 4px 0 0; flex: 0 0 82px; }
+.node { position: relative; min-width: 0; grid-template-rows: 40px 14px 12px; gap: 4px; align-content: start; }
+.node > span { position: relative; z-index: 1; box-sizing: border-box; }
+.node:not(:last-child)::after { content: ''; position: absolute; height: 2px; top: 19px; left: calc(50% + 20px); width: calc(100% - 40px); background: #354558; transition: background .4s; }
+.node.done::after { background: #427fa5; }
+.node small { font-size: 9px; }
+.agent { display: grid; grid-template-columns: 44px minmax(0, 1fr) 14px; box-sizing: border-box; height: 45px; flex: 0 0 45px; gap: 6px; padding: 5px 0; font-size: 11px; }
+.agent > span:nth-child(2) { min-width: 0; }
+.row { box-sizing: border-box; height: 37px; }
+.status { min-height: 32px; flex-shrink: 0; box-sizing: border-box; }
+.status svg { flex-shrink: 0; }
+@media (max-width: 600px) { .content { gap: 7px; } .nodes { flex-basis: 77px; } .node b { font-size: 10px; } .agent { font-size: 10px; height: 38px; flex-basis: 38px; } .row { height: 33px; } }
+
+.branchNodes { position: relative; width: 100%; height: 156px; flex: 0 0 156px; }
+.branchLines { position: absolute; inset: 0; width: 100%; height: 156px; overflow: visible; }
+.branchLines path { fill: none; stroke: #354558; stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: stroke .4s; }
+.branchLines .pathDone { stroke: #427fa5; }
+.branchNode { position: absolute; width: 20%; transform: translateX(-50%); }
+.branchNode::after { display: none; }
+.content { gap: 8px; }
+@media (max-width: 600px) { .content { gap: 3px; } .branchNodes { margin-bottom: -8px; } .agent { height: 30px; flex-basis: 30px; } .row { height: 28px; padding-top: 3px; padding-bottom: 3px; } .status { padding-top: 3px; font-size: 10px; } }
+
+.branchNodes { height: 168px; flex-basis: 168px; width: calc(100% - 16px); }
+.branchLines { height: 168px; }
+.branchNode { width: 16%; grid-template-rows: 36px 14px 26px; gap: 3px; }
+.branchNode > span { width: 36px; height: 36px; }
+.branchNode b { font-size: 10px; }
+.branchNode small { white-space: normal; text-align: center; font-size: 8px; line-height: 1.3; width: 100%; }
+.agent { font-size: 10px; }
+@media (max-width: 600px) { .branchNode b { font-size: 9px; } .branchNode small { font-size: 7px; } .branchNode > span { width: 30px; height: 30px; margin-top: 3px; } }
+
+@media (max-width: 680px) {
+  .content { justify-content: center; }
+  .branchNodes { margin-bottom: 0; }
+  .agent,
+  .requirements,
+  .status { display: none; }
+}
diff --git a/web/components/investor-strip.module.css b/web/components/investor-strip.module.css
new file mode 100644
index 00000000..90606f4b
--- /dev/null
+++ b/web/components/investor-strip.module.css
@@ -0,0 +1,55 @@
+.backers {
+  width: min(calc(100% - 2rem), 1140px);
+  margin-inline: auto;
+  position: relative;
+  z-index: 2;
+  padding: var(--investor-strip-padding-top, 1.5rem) 0 3.5rem;
+  text-align: center;
+}
+
+.backers > p {
+  margin: 0 0 1.75rem;
+  color: #a8b8c8;
+  font-size: 0.75rem;
+  font-weight: 500;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.investorGroup {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 1.75rem clamp(1.5rem, 4vw, 3.5rem);
+}
+
+.investorGroup > img { display: block; height: auto; object-fit: contain; }
+.investorHustle { width: 148px; }
+.investorActive { width: 140px; }
+.investorCortical { width: 155px; filter: grayscale(1) brightness(0) invert(1); }
+.investorYc,
+.investorYonder { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
+.investorYc > span {
+  display: grid;
+  place-items: center;
+  width: 29px;
+  height: 29px;
+  background: #ff5a1f;
+  color: white;
+  font: 22px/1 Arial, sans-serif;
+}
+.investorYc strong { color: #ff936f; font: 17px/1 Arial, sans-serif; }
+.investorYonder { color: #6acf95; }
+.investorYonder svg { width: 25px; height: 25px; }
+.investorYonder strong { font-size: 1rem; font-weight: 720; letter-spacing: 0.015em; }
+
+@media (max-width: 680px) {
+  .backers { padding-bottom: 3rem; }
+  .investorGroup { gap: 1.5rem 1.25rem; }
+  .investorHustle { width: 125px; }
+  .investorActive { width: 122px; }
+  .investorCortical { width: 130px; }
+  .investorYc strong { font-size: 15px; }
+  .investorYonder strong { font-size: 0.9rem; }
+}
diff --git a/web/content/blog/promptgramming.mdx b/web/content/blog/promptgramming.mdx
new file mode 100644
index 00000000..4b293204
--- /dev/null
+++ b/web/content/blog/promptgramming.mdx
@@ -0,0 +1,159 @@
+---
+title: 'Promptgramming'
+description: 'Many have said this before but STOP BABYSITTING YOUR AGENTS and stop using glued together systems. Instead script your agents. Script your systems.'
+date: '2026-09-12'
+author: 'Khaliq Gant'
+category: 'Opinion'
+tags:
+  - Promptgramming
+  - Relayflows
+  - Agent Relay
+  - Workflows
+  - Multi-agent orchestration
+coverImage: '/blog-images/promptgramming-cover.png'
+coverImageAlt: 'A frustrated developer at a desk staring at a terminal chat agent'
+---
+
+I have been a developer for over 15 years. Back in my day we used to write the code by hand! Way before agents started putting their slimy hands all in the codebase! 
+
+At this point most agree that the process of creating software has changed, but also as a result the entire industry is having to rethink first principles and reinvent a lot of age old practices. As the pendulum continues to swing and settle on how to best create software I'd like to try and push us all towards scripting out prompts or what I'd like to call promptgramming.
+
+![A frustrated developer at a desk staring at a terminal chat agent](/blog-images/promptgramming-cover.png)
+
+This is a lot of us today, frantically prompting and steering agents as they keep telling us the fix is just one deploy away and that we're "right to push back on that". It's a frustratingly exhilarating roller coaster of an experience that very quickly makes for a nice looking demo. Anyone that has gone deep knows that to make a high quality product takes real work and iterations. Agents are confidently wrong and as my fellow AI Vampires know that when it gets to 1 or 2 am, the inclination to tell the agent yes to every question gets higher with every underslept minute.
+
+Let's take a few scenarios. One: you make an amazing plan and are feeling super hyped about it and three hours into the agent session it has deviated away from it so far that you even yourself forgot what the original intent was. Two: you're CTO of a nursing platform. The customer success team has three different LLM tools: one tags tickets, one drafts replies, and one handles voicemail callbacks. Between these tools are six humans copy-pasting text from one window to the next, with no verification but rather humans using a "system" that has been glued together.
+
+Many have said this before but STOP BABYSITTING YOUR AGENTS and stop using glued together systems. Instead script your agents. Script your systems. Produce prompts that are part of a deterministic script and gate the outcomes with deterministic checks. A skill is a suggestion, a recommendation and only that. My three year old happily takes a suggestion and tosses it right into the trash. A hard line, a gate is a mandatory requirement that if doesn't get met fails the entire operation. A plan that isn't enforced isn't a plan at all but just an outdated artifact causing future confusion for your agent. If you promptgram, you can not only add in deterministic checks but also add in different agents from different models and harnesses to verify and review the agents work. Those things you end up always telling your agent? Stop doing that and script it out and let your agent run in a script autonomously.
+
+So what does this look like? It is a workflow. Claude released [dynamic workflows](https://code.claude.com/docs/en/workflows) earlier this year which is a super powerful abstraction but I'm talking about writing workflows intentionally ahead of time with proper planning and even stack workflows to create rich applications.
+
+```ts
+import { flow } from "@relayflows/surface";
+
+export interface SocialPostInput {
+  topic: string;
+  brand: string;
+}
+
+export default flow<SocialPostInput>(
+  "social-post-pipeline",
+  { budget: "$5/run" },
+  async (f, input) => {
+    const research = await f
+      .agent("researcher", {
+        cli: "claude",
+        model: "claude-sonnet-5
+        task:
+          `Research current, verifiable facts about "${input.topic}" for ` +
+          `${input.brand}. Cite a source for every claim. Write your findings ` +
+          `to research/notes.md.`,
+        permissions: { fileGlobs: ["research/**"], accessPreset: "readwrite" },
+      })
+      .gate(
+        (r) => r.artifacts.includes("research/notes.md"),
+        "the researcher must write research/notes.md, not just summarize in chat",
+      );
+
+    const draft = await f
+      .agent("writer", {
+        cli: "codex",
+        model: "gpt-6-astra",
+        task:
+          `Read research/notes.md and draft one social post for ${input.brand} ` +
+          `about "${input.topic}". Do not state anything the research does not ` +
+          `support. Write the draft to drafts/post.md.`,
+        permissions: { fileGlobs: ["drafts/**"], accessPreset: "readwrite" },
+      })
+      .gate(
+        (r) => r.artifacts.includes("drafts/post.md"),
+        "the writer must write drafts/post.md",
+      );
+  },
+);
+```
+
+The flow is multi-agent and also supports any model and harness. The gate is a runtime verification against the actual filesystem. Many other systems gate on the agent's own output, for instance a substring in the message, or a specific schema in its reply.
+
+Workflows are the underpinnings of a lot of our infrastructure. Imagine you're building an autonomous software factory. There are a sequence of steps that the agent or agents will go through to successfully pick up a ticket and satisfy the requirements. You could try and achieve this with a single agent and skills but why prompt and pray? Promptgram and profit, I say.
+
+```ts
+import { flow } from "@relayflows/surface";
+
+export interface TicketInput {
+  owner: string;
+  repo: string;
+  ticketId: string;
+  requirements: string;
+  baseBranch: string;
+}
+
+export default flow<TicketInput>(
+  "software-factory",
+  { budget: "$8/run" },
+  async (f, input) => {
+    await f
+      .agent("planner", {
+        model: "claude-sonnet-5",
+        task:
+          `Decompose the ticket. Each step names the file it touches and ` +
+          `the test that proves it works. Write plan/plan.md.\n\n` +
+          `${input.requirements}`,
+        permissions: { fileGlobs: ["plan/**"], accessPreset: "readwrite" },
+      })
+      .gate((r) => r.artifacts.includes("plan/plan.md"), "no plan, no code");
+
+    await f
+      .agent("implementer", {
+        model: "claude-opus-5",
+        cli: "claude",
+        task:
+          `Follow plan/plan.md. Branch feat/${input.ticketId} off ` +
+          `${input.baseBranch}. Write code, tests, and a PR body in ` +
+          `impl/summary.md. Record the branch in impl/branch.txt.`,
+        permissions: {
+          fileGlobs: ["impl/**", "src/**", "tests/**"],
+          accessPreset: "readwrite",
+        },
+      })
+      .gate((r) => r.artifacts.includes("impl/branch.txt"), "no branch, no PR");
+
+    // The runtime runs the tests and checks the exit code. The agent cannot lie about it.
+    await f.run(
+      `branch=$(cat impl/branch.txt); ` +
+      `case "$branch" in feat/*) ;; *) exit 1 ;; esac; ` +
+      `git checkout "$branch" && npm test`,
+    );
+
+    // Different model. Its only job is to break the PR.
+    await f
+      .agent("adversary", {
+        model: "gpt-5.6-sol",
+        task:
+          `Try to sink branch $(cat impl/branch.txt). Find one concrete ` +
+          `failure the tests miss. If you can't after honest effort, ` +
+          `write adversary/clean.`,
+        permissions: { fileGlobs: ["adversary/**"], accessPreset: "readwrite" },
+      })
+      .gate((r) => r.artifacts.includes("adversary/clean"), "adversary found an issue");
+
+    // Deterministic step, not an agent decision. Journal-backed and idempotent.
+    const summary = await f.run("cat impl/summary.md");
+    await f.github.createPullRequest({
+      owner: input.owner,
+      repo: input.repo,
+      title: input.ticketId,
+      head: `feat/${input.ticketId}`,
+      base: input.baseBranch,
+      body: summary,
+    });
+
+    f.done("success");
+  },
+);
+```
+
+Sow are we using relayflows today? We have a relayflow that iterates over every single feature in our [cli relay surface](https://github.com/AgentWorkforce/relay/blob/main/workflows/verify-features.ts). It uses agent intelligence and deterministic checks to run a full end to end QA of every command and mapped feature. We built a [proactive Hacker news agent](https://github.com/AgentWorkforce/agents/blob/main/hn-monitor/workflows/scheduled-digest.ts) that fetches the latest from the site, filters by topics we're interested in and surfaces what we're interested in and posts a summary of those noteworthy posts to slack.
+Deterministic and consistent output with an agent doing its thing to do the hard part.
+
+If a task is well defined and can be decomposed into a series of well defined steps then you should be reaching for a relayflow. Hard constraints win over soft ones every time. Let's get back to programming, but with agents aka promptgramming. Get started: https://agentrelay.com/docs/relayflows/introduction
diff --git a/web/lib/og-meta.ts b/web/lib/og-meta.ts
index 9eff5293..5417552e 100644
--- a/web/lib/og-meta.ts
+++ b/web/lib/og-meta.ts
@@ -49,7 +49,8 @@ export function ogImage(path: string, alt: string): OgImage {
 export const DEFAULT_OG_ALT = 'Agent Relay — Headless Slack for Agents';
 
 /** Static public card paths. Change the version suffix when the visual changes to bust social caches. */
-export const HOME_OG_IMAGE_PATH = '/og/agent-relay-home-v20260831.png';
+export const HOME_OG_ALT = 'Agent Relay Flows — a TypeScript script that runs agents and checks their work';
+export const HOME_OG_IMAGE_PATH = '/og/agent-relay-flows-v20260913.png';
 export const DEFAULT_OG_IMAGE_PATH = '/og/agent-relay-default-v20260610.png';
 
 /** The site-wide default card. */
diff --git a/web/next.config.mjs b/web/next.config.mjs
index a39610ab..707a07ee 100644
--- a/web/next.config.mjs
+++ b/web/next.config.mjs
@@ -104,6 +104,12 @@ const nextConfig = {
   },
   async redirects() {
     return [
+      // Mirror the router's calendar alias for direct Next.js and local dev requests.
+      {
+        source: '/khaliq',
+        destination: 'https://calendly.com/khaliq-agent-relay/30min',
+        permanent: false,
+      },
       // In-person event banner QR code → homepage, tagged so the traffic is
       // attributable to the physical banner at the current event. Temporary
       // (not permanent) so /banner can be repointed at the next event without
diff --git a/web/public/blog-images/promptgramming-cover.png b/web/public/blog-images/promptgramming-cover.png
new file mode 100644
index 00000000..adcf1529
Binary files /dev/null and b/web/public/blog-images/promptgramming-cover.png differ
diff --git a/web/public/investors/active-capital.svg b/web/public/investors/active-capital.svg
new file mode 100644
index 00000000..6b74dafd
--- /dev/null
+++ b/web/public/investors/active-capital.svg
@@ -0,0 +1,3 @@
+<svg width="154" height="25" viewBox="0 0 154 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5835 6.59864H13.8365V19.1973H10.5835V17.7199C10.0861 18.3245 9.45495 18.8052 8.73983 19.124C8.02471 19.4427 7.24525 19.5908 6.46306 19.5565C3.0745 19.5565 0.329773 16.6627 0.329773 12.9081C0.329773 9.15361 3.10839 6.25301 6.46306 6.25301C7.24595 6.21845 8.0261 6.36709 8.74143 6.68711C9.45677 7.00712 10.0875 7.48968 10.5835 8.09638V6.59864ZM7.073 16.4526C7.54217 16.47 8.00985 16.3898 8.44638 16.217C8.88291 16.0441 9.27876 15.7825 9.60883 15.4486C9.9389 15.1147 10.196 14.7159 10.3638 14.2774C10.5316 13.8389 10.6064 13.3703 10.5835 12.9014C10.6043 12.4287 10.5292 11.9568 10.3627 11.514C10.1962 11.0711 9.94167 10.6666 9.61458 10.3248C9.28749 9.98304 8.89457 9.71102 8.45951 9.52518C8.02444 9.33934 7.55625 9.24353 7.08316 9.24353C6.61007 9.24353 6.14188 9.33934 5.70682 9.52518C5.27175 9.71102 4.87883 9.98304 4.55174 10.3248C4.22465 10.6666 3.97018 11.0711 3.80365 11.514C3.63712 11.9568 3.56199 12.4287 3.58279 12.9014C3.56011 13.3685 3.63439 13.8353 3.80096 14.2724C3.96752 14.7095 4.22277 15.1073 4.55062 15.4409C4.87847 15.7745 5.27184 16.0366 5.70594 16.2107C6.14005 16.3848 6.6055 16.4671 7.073 16.4526ZM22.8027 19.5497C23.9606 19.5644 25.1013 19.2686 26.106 18.6929C27.1108 18.1172 27.9429 17.2827 28.5158 16.2764L25.6829 14.6634C25.4069 15.187 24.9876 15.6211 24.4739 15.9152C23.9603 16.2092 23.3736 16.3509 22.7823 16.3238C22.334 16.3359 21.888 16.2566 21.4714 16.0906C21.0548 15.9246 20.6764 15.6754 20.3593 15.3583C20.0421 15.0412 19.793 14.6628 19.627 14.2462C19.461 13.8296 19.3816 13.3835 19.3938 12.9352C19.3742 12.4819 19.4479 12.0293 19.6103 11.6056C19.7728 11.1819 20.0206 10.796 20.3382 10.472C20.6559 10.1479 21.0368 9.89258 21.4572 9.72176C21.8776 9.55094 22.3287 9.46828 22.7823 9.47892C23.3727 9.45986 23.9565 9.6082 24.4661 9.9068C24.9758 10.2054 25.3906 10.6421 25.6626 11.1664L28.4819 9.49925C27.9208 8.49609 27.0983 7.66381 26.1018 7.09098C25.1054 6.51816 23.9722 6.22622 22.823 6.24623C21.9428 6.2259 21.0677 6.38405 20.2503 6.71113C19.4329 7.03821 18.6903 7.52745 18.0671 8.14935C17.4439 8.77124 16.9532 9.51291 16.6244 10.3296C16.2957 11.1463 16.1358 12.0212 16.1543 12.9014C16.1358 13.7795 16.2952 14.6523 16.6228 15.4673C16.9503 16.2822 17.4394 17.0225 18.0604 17.6436C18.6815 18.2647 19.4218 18.7537 20.2368 19.0813C21.0517 19.4088 21.9245 19.5682 22.8027 19.5497ZM37.5564 9.72289V6.59864H34.7033V3.07455L31.4435 4.05723V6.59864H29.2477V9.72289H31.4435V14.9684C31.4435 18.3569 32.9819 19.7123 37.5429 19.1973V16.2492C35.6724 16.3509 34.6897 16.3238 34.6897 14.9684V9.72289H37.5564ZM41.6701 5.08735C42.0756 5.09538 42.4742 4.98197 42.8147 4.76169C43.1552 4.54142 43.4221 4.22434 43.581 3.85122C43.7399 3.4781 43.7836 3.06599 43.7064 2.66785C43.6293 2.26971 43.4348 1.90374 43.148 1.61697C42.8613 1.33021 42.4953 1.13576 42.0972 1.05861C41.699 0.981461 41.2869 1.02514 40.9138 1.18404C40.5407 1.34294 40.2236 1.60979 40.0033 1.9503C39.783 2.29081 39.6696 2.68941 39.6777 3.09488C39.6881 3.62006 39.9013 4.12083 40.2728 4.49226C40.6442 4.86369 41.145 5.07695 41.6701 5.08735ZM40.0572 19.1973H43.3102V6.59864H40.0572V19.1973ZM54.6008 6.59864L51.524 15.4157L48.4676 6.60542H44.8825L49.6807 19.2041H53.3877L58.1927 6.60542L54.6008 6.59864ZM62.5097 14.2364C62.9638 15.8968 64.3531 16.6017 66.0677 16.6017C66.605 16.623 67.1399 16.5204 67.6312 16.3018C68.1224 16.0832 68.5567 15.7545 68.9006 15.3411L71.5233 16.8524C70.9074 17.73 70.0805 18.4384 69.1187 18.9121C68.157 19.3859 67.0914 19.6098 66.0203 19.5633C61.7778 19.5633 59.1008 16.6694 59.1008 12.9149C59.0697 12.0319 59.2204 11.152 59.5437 10.3297C59.8669 9.50743 60.3558 8.76041 60.9799 8.13502C61.604 7.50964 62.3501 7.01925 63.1717 6.69433C63.9933 6.36941 64.8729 6.21688 65.756 6.24623C69.4902 6.24623 72.14 9.19428 72.14 12.9014C72.1394 13.3559 72.0986 13.8095 72.018 14.2568L62.5097 14.2364ZM62.4555 11.7154H68.9006C68.7759 10.9809 68.3879 10.317 67.8091 9.84795C67.2302 9.37891 66.5003 9.13689 65.756 9.16717C64.9899 9.11697 64.2318 9.34818 63.6241 9.81737C63.0163 10.2866 62.6008 10.9615 62.4555 11.7154ZM80.5911 19.5023C81.7444 19.5271 82.8824 19.2343 83.8805 18.6557C84.8785 18.0772 85.6983 17.2353 86.2499 16.2221L84.8606 15.4157C84.4408 16.177 83.8216 16.8095 83.0693 17.2453C82.3171 17.6812 81.4603 17.9038 80.5911 17.8893C79.2991 17.8417 78.0759 17.295 77.1787 16.3641C76.2816 15.4333 75.7803 14.1908 75.7803 12.898C75.7803 11.6051 76.2816 10.3627 77.1787 9.43181C78.0759 8.50095 79.2991 7.95424 80.5911 7.90663C81.4456 7.87932 82.2901 8.09789 83.0241 8.53638C83.7581 8.97487 84.3509 9.61484 84.7319 10.3803L86.0873 9.6009C85.581 8.57632 84.7901 7.71941 83.8093 7.13284C82.8285 6.54627 81.6993 6.25491 80.5572 6.29367C79.6821 6.27248 78.8117 6.42865 77.9986 6.75278C77.1854 7.07691 76.4463 7.56228 75.8258 8.17967C75.2052 8.79706 74.7161 9.53368 74.3878 10.3452C74.0595 11.1566 73.8989 12.0262 73.9156 12.9014C73.8996 13.7789 74.062 14.6506 74.3927 15.4636C74.7235 16.2766 75.2159 17.014 75.84 17.6311C76.4641 18.2483 77.207 18.7323 78.0236 19.0539C78.8403 19.3756 79.7137 19.5281 80.5911 19.5023ZM99.5127 6.62575H101.18V19.1973H99.5127V16.7304C98.9751 17.5949 98.2221 18.305 97.3275 18.7909C96.4329 19.2768 95.4274 19.5219 94.4096 19.5023C92.6946 19.4473 91.0683 18.7274 89.8746 17.4949C88.6809 16.2623 88.0135 14.6138 88.0135 12.898C88.0135 11.1821 88.6809 9.53359 89.8746 8.30105C91.0683 7.0685 92.6946 6.34862 94.4096 6.29367C95.4274 6.27401 96.4329 6.51915 97.3275 7.00506C98.2221 7.49097 98.9751 8.20099 99.5127 9.06551V6.62575ZM94.5316 17.9164C95.5206 17.9204 96.4885 17.6308 97.3127 17.0841C98.1369 16.5374 98.7803 15.7584 99.1612 14.8456C99.5422 13.9329 99.6436 12.9277 99.4526 11.9573C99.2617 10.9869 98.7869 10.095 98.0885 9.39473C97.3901 8.69444 96.4995 8.21725 95.5297 8.02364C94.5598 7.83003 93.5543 7.92871 92.6405 8.30719C91.7268 8.68566 90.946 9.32689 90.3971 10.1496C89.8482 10.9723 89.5558 11.9394 89.5572 12.9285C89.5527 13.5823 89.6783 14.2306 89.9269 14.8354C90.1754 15.4402 90.5419 15.9895 91.0049 16.4512C91.4679 16.913 92.0182 17.2779 92.6236 17.5248C93.2291 17.7717 93.8777 17.8956 94.5316 17.8893V17.9164ZM111.474 6.32078C113.189 6.37573 114.816 7.09561 116.009 8.32816C117.203 9.5607 117.87 11.2092 117.87 12.9251C117.87 14.6409 117.203 16.2894 116.009 17.522C114.816 18.7545 113.189 19.4744 111.474 19.5294C110.456 19.5497 109.451 19.3048 108.556 18.8189C107.661 18.3329 106.908 17.6225 106.371 16.7575V24.2395H104.704V6.61898H106.371V9.08584C106.906 8.21608 107.659 7.50102 108.555 7.01133C109.452 6.52165 110.46 6.27428 111.481 6.29367L111.474 6.32078ZM111.346 17.9164C112.335 17.9204 113.303 17.6308 114.127 17.0841C114.951 16.5374 115.594 15.7584 115.975 14.8456C116.356 13.9329 116.458 12.9277 116.267 11.9573C116.076 10.9869 115.601 10.095 114.903 9.39473C114.204 8.69444 113.314 8.21725 112.344 8.02364C111.374 7.83003 110.368 7.92871 109.455 8.30719C108.541 8.68566 107.76 9.32689 107.211 10.1496C106.662 10.9723 106.37 11.9394 106.371 12.9285C106.367 13.5829 106.493 14.2317 106.742 14.837C106.99 15.4422 107.358 15.9918 107.821 16.4537C108.285 16.9155 108.836 17.2803 109.442 17.5268C110.049 17.7733 110.698 17.8965 111.352 17.8893L111.346 17.9164ZM121.599 3.95557C121.84 3.95691 122.075 3.88691 122.275 3.75443C122.476 3.62195 122.632 3.43296 122.725 3.21142C122.818 2.98987 122.843 2.74575 122.797 2.50999C122.751 2.27422 122.636 2.05744 122.466 1.8871C122.297 1.71677 122.081 1.60056 121.845 1.5532C121.61 1.50584 121.366 1.52946 121.143 1.62107C120.921 1.71269 120.732 1.86817 120.598 2.06781C120.464 2.26744 120.393 2.50225 120.393 2.74247C120.393 3.06303 120.52 3.37057 120.746 3.59787C120.972 3.82518 121.279 3.95378 121.599 3.95557ZM120.773 19.2244H122.433V6.59864H120.766V19.1973L120.773 19.2244ZM132.673 8.23193V6.59864H129.034V3.07455L127.367 3.57605V6.59864H124.717V8.23193H127.367V15.8494C127.367 18.872 129.264 19.7056 132.673 19.1973V17.7199C130.22 17.8215 129.034 17.9977 129.034 15.8358V8.23193H132.673ZM146.309 6.61898H147.976V19.1973H146.309V16.7304C145.773 17.5953 145.022 18.3058 144.128 18.7919C143.234 19.2779 142.229 19.5228 141.212 19.5023C139.497 19.4473 137.871 18.7274 136.677 17.4949C135.484 16.2623 134.816 14.6138 134.816 12.898C134.816 11.1821 135.484 9.53359 136.677 8.30105C137.871 7.0685 139.497 6.34862 141.212 6.29367C142.229 6.27318 143.234 6.51802 144.128 7.00406C145.022 7.49011 145.773 8.20059 146.309 9.06551V6.61898ZM141.334 17.9096C142.323 17.9137 143.291 17.624 144.115 17.0773C144.94 16.5306 145.583 15.7516 145.964 14.8389C146.345 13.9262 146.446 12.9209 146.255 11.9505C146.064 10.9801 145.59 10.0882 144.891 9.38795C144.193 8.68766 143.302 8.21047 142.332 8.01686C141.362 7.82325 140.357 7.92194 139.443 8.30041C138.529 8.67889 137.749 9.32011 137.2 10.1428C136.651 10.9655 136.359 11.9327 136.36 12.9217C136.354 13.5764 136.478 14.2258 136.726 14.8318C136.974 15.4378 137.34 15.9882 137.803 16.4509C138.266 16.9135 138.817 17.2791 139.424 17.5261C140.03 17.7731 140.68 17.8966 141.334 17.8893V17.9096ZM151.5 19.2176H153.181V0.777107H151.514L151.5 19.2176Z" fill="white"/>
+</svg>
diff --git a/web/public/investors/cortical-ventures.webp b/web/public/investors/cortical-ventures.webp
new file mode 100644
index 00000000..efd1b539
Binary files /dev/null and b/web/public/investors/cortical-ventures.webp differ
diff --git a/web/public/investors/hustle-fund.svg b/web/public/investors/hustle-fund.svg
new file mode 100644
index 00000000..ffc1b8d8
--- /dev/null
+++ b/web/public/investors/hustle-fund.svg
@@ -0,0 +1,16 @@
+<svg width="2819" height="355" viewBox="0 0 2819 355" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M789.402 124.773C772.725 108.535 750.783 100.197 724.013 100.197C693.732 100.197 670.034 112.046 653.358 135.305V20.3262H605.962V327.522H653.358V213.86C653.358 191.478 658.624 173.924 669.156 160.759C679.689 147.593 694.61 141.01 713.48 141.01C731.035 141.01 744.2 146.715 753.416 157.687C762.632 169.097 767.459 185.334 767.459 206.399V327.522H814.855V203.766C814.855 167.78 806.078 141.449 789.402 124.773Z" fill="#edf4fb"/>
+<path d="M1055 102.83H1007.61V214.298C1007.61 237.558 1002.34 255.989 992.247 269.155C981.715 282.32 967.671 288.903 949.678 288.903C932.124 288.903 919.398 283.198 910.621 271.788C901.844 260.378 897.455 243.701 897.455 221.759V102.83H850.059V226.586C850.059 263.011 857.959 289.342 874.635 305.579C890.872 322.256 912.376 330.155 938.707 330.155C967.671 330.155 990.93 320.062 1008.05 298.997L1013.31 327.522H1055V102.83Z" fill="#edf4fb"/>
+<path d="M1135.06 253.356H1089.42C1089.86 277.493 1099.52 296.364 1117.95 309.968C1136.38 323.572 1160.95 330.155 1191.24 330.155C1208.79 330.155 1225.03 327.522 1239.51 321.817C1253.55 316.112 1264.96 307.774 1273.3 297.241C1281.2 286.709 1285.59 273.982 1285.59 259.939C1285.59 244.14 1281.64 231.852 1273.74 222.637C1265.84 213.421 1255.31 206.838 1242.14 202.449C1228.98 198.061 1212.74 194.989 1193.43 192.795C1178.95 191.039 1168.41 189.723 1162.27 188.406C1155.69 187.09 1150.42 184.895 1146.03 181.385C1141.64 177.874 1139.89 173.046 1139.89 166.025C1139.89 157.248 1143.84 149.787 1152.62 144.521C1160.95 139.255 1171.93 136.622 1185.97 136.622C1199.57 136.622 1210.98 140.133 1220.2 146.715C1228.98 153.298 1234.24 161.636 1235.56 171.73H1281.64C1279.88 148.91 1270.23 131.356 1252.67 118.629C1235.12 106.341 1211.86 99.7582 1183.77 99.7582C1166.22 99.7582 1150.86 102.83 1137.26 108.535C1123.65 114.679 1113.12 123.017 1105.22 133.55C1097.32 144.082 1093.81 156.37 1093.81 169.974C1093.81 184.895 1097.32 196.306 1105.22 205.083C1113.12 213.86 1123.21 220.003 1135.94 223.953C1148.67 227.903 1164.9 230.975 1184.65 233.169C1198.7 234.924 1209.23 236.68 1216.25 238.435C1223.27 240.191 1228.54 242.824 1232.93 246.335C1236.88 250.284 1239.07 255.989 1239.07 263.45C1239.07 272.666 1234.24 280.126 1225.47 285.392C1216.69 290.659 1204.84 293.292 1190.8 293.292C1174.56 293.292 1161.39 289.781 1151.3 282.32C1141.21 274.86 1135.94 265.205 1135.06 253.356Z" fill="#edf4fb"/>
+<path d="M1334.13 144.521V266.522C1334.13 287.587 1338.95 302.946 1348.61 312.601C1358.26 322.695 1374.06 327.522 1395.56 327.522H1441.21V285.831H1405.22C1396.44 285.831 1390.74 284.076 1387.23 280.565C1383.72 277.054 1381.96 270.471 1381.96 261.694V144.521H1435.94V102.83H1381.96V40.0745H1334.13V102.83H1295.07V144.521H1334.13Z" fill="#edf4fb"/>
+<path d="M1475.42 20.3262V327.522H1522.81V20.3262H1475.42Z" fill="#edf4fb"/>
+<path d="M1570.15 155.054C1560.94 172.608 1556.55 192.795 1556.55 215.615C1556.55 238.435 1560.94 258.622 1570.59 275.738C1580.25 293.292 1593.41 306.457 1610.97 316.112C1628.52 325.767 1648.71 330.155 1672.4 330.155C1699.17 330.155 1721.56 323.134 1739.55 308.213C1757.54 293.73 1768.51 274.86 1772.9 252.04H1725.51C1721.99 264.766 1715.41 274.421 1705.76 281.443C1695.66 288.464 1683.38 291.536 1668.89 291.536C1650.46 291.536 1635.54 285.831 1624.57 274.421C1613.16 263.011 1607.02 247.651 1606.14 227.903V225.27H1775.53C1776.41 219.126 1776.85 213.421 1776.85 207.277C1776.41 185.773 1771.59 166.902 1761.93 150.665C1752.28 134.866 1739.55 122.14 1722.87 113.363C1706.2 104.586 1687.33 100.197 1665.82 100.197C1644.32 100.197 1625.45 105.024 1608.77 114.679C1592.09 124.334 1579.37 137.499 1570.15 155.054ZM1728.58 190.6H1607.89C1609.65 174.802 1615.79 162.514 1627.2 152.859C1638.61 143.205 1651.78 138.377 1667.58 138.377C1684.25 138.377 1697.86 143.205 1708.83 152.42C1719.8 161.636 1726.38 174.363 1728.58 190.6Z" fill="#edf4fb"/>
+<path d="M1905.17 102.831H1866.11V144.521H1905.17V327.52H1953V144.521H2013.12V102.831H1953V83.9607C1953 76.5003 1954.32 70.7953 1957.83 67.2845C1961.34 63.7738 1966.6 62.0184 1974.5 62.0184H2013.56V20.3281H1967.92C1946.42 20.3281 1930.62 25.5943 1920.52 35.6877C1909.99 45.7811 1905.17 60.7019 1905.17 80.4499V102.831Z" fill="#edf4fb"/>
+<path d="M2251.42 102.831H2204.02V214.298C2204.02 237.556 2198.76 255.988 2188.66 269.153C2178.13 282.319 2164.09 288.901 2146.09 288.901C2128.54 288.901 2115.81 283.196 2107.04 271.786C2098.26 260.376 2093.87 243.7 2093.87 221.758V102.831H2046.48V226.585C2046.48 263.009 2054.38 289.34 2071.05 305.577C2087.29 322.253 2108.79 330.153 2135.12 330.153C2164.09 330.153 2187.35 320.059 2204.46 298.995L2209.73 327.52H2251.42V102.831Z" fill="#edf4fb"/>
+<path d="M2477.17 124.773C2460.5 108.536 2438.55 100.198 2412.22 100.198C2381.07 100.198 2356.93 111.169 2340.25 132.234L2334.99 102.831H2293.73V327.52H2341.13V214.298C2341.13 191.478 2346.4 173.924 2356.93 160.759C2367.46 147.593 2382.38 141.01 2401.25 141.01C2418.81 141.01 2431.97 146.715 2441.19 157.687C2449.96 169.097 2454.79 185.334 2454.79 206.398V327.52H2502.63V203.765C2502.63 167.78 2493.85 141.449 2477.17 124.773Z" fill="#edf4fb"/>
+<path d="M2763.83 20.3281H2716.44V133.989C2708.54 123.457 2698.88 115.557 2686.6 109.414C2674.31 103.27 2659.83 100.198 2643.59 100.198C2623.4 100.198 2604.97 105.025 2589.17 114.68C2572.94 124.334 2560.21 137.5 2550.99 155.054C2541.78 172.607 2537.39 192.355 2537.39 215.175C2537.39 238.873 2541.78 259.06 2550.99 276.614C2559.77 294.167 2572.5 307.333 2588.73 316.548C2604.53 325.764 2622.96 330.153 2643.59 330.153C2674.31 330.153 2698.88 318.304 2716.88 293.729L2722.58 327.52H2763.83V20.3281ZM2698.88 269.592C2686.6 283.635 2670.8 290.218 2651.49 290.218C2631.74 290.218 2615.94 283.635 2604.09 269.592C2591.81 255.549 2586.1 237.556 2586.1 215.175C2586.1 193.233 2591.81 175.679 2604.09 161.636C2615.94 147.593 2631.74 140.572 2651.49 140.572C2670.8 140.572 2686.6 147.593 2698.88 161.636C2710.73 175.679 2716.88 193.672 2716.88 216.053C2716.88 237.995 2710.73 255.988 2698.88 269.592Z" fill="#edf4fb"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M208.801 193.305L76.6013 325.505C74.3924 327.714 71.3967 328.955 68.2729 328.955C65.1492 328.955 62.1534 327.714 59.9446 325.505L4.28662 269.847C2.07781 267.638 0.836914 264.642 0.836914 261.519C0.836914 258.395 2.07782 255.399 4.28663 253.19L74.8802 182.597C77.089 180.388 78.3299 177.392 78.3299 174.268C78.3299 171.145 77.089 168.149 74.8802 165.94L4.28666 95.3464C2.07785 93.1376 0.836936 90.1418 0.836937 87.0181C0.836937 83.8943 2.07784 80.8985 4.28666 78.6897L59.9446 23.0317C62.1534 20.8229 65.1492 19.582 68.273 19.582C71.3967 19.582 74.3925 20.8229 76.6013 23.0317L208.801 155.231C213.848 160.281 216.684 167.129 216.684 174.268C216.684 181.408 213.848 188.255 208.801 193.305Z" fill="#ADA1ED"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M302.343 193.305L170.143 325.505C167.934 327.714 164.939 328.955 161.815 328.955C158.691 328.955 155.695 327.714 153.487 325.505L97.8286 269.847C95.6198 267.638 94.3789 264.642 94.3789 261.519C94.3789 258.395 95.6198 255.399 97.8286 253.19L168.422 182.597C170.631 180.388 171.872 177.392 171.872 174.268C171.872 171.145 170.631 168.149 168.422 165.94L97.8286 95.3464C95.6198 93.1376 94.3789 90.1418 94.3789 87.0181C94.3789 83.8943 95.6198 80.8985 97.8286 78.6897L153.487 23.0317C155.695 20.8229 158.691 19.582 161.815 19.582C164.939 19.582 167.934 20.8229 170.143 23.0317L302.343 155.231C307.39 160.281 310.226 167.129 310.226 174.268C310.226 181.408 307.39 188.255 302.343 193.305Z" fill="#D75856"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M395.885 193.305L263.685 325.505C261.477 327.714 258.481 328.955 255.357 328.955C252.233 328.955 249.238 327.714 247.029 325.505L191.371 269.847C189.162 267.638 187.921 264.642 187.921 261.519C187.921 258.395 189.162 255.399 191.371 253.19L261.964 182.597C264.173 180.388 265.414 177.392 265.414 174.268C265.414 171.145 264.173 168.149 261.964 165.94L191.371 95.3464C189.162 93.1376 187.921 90.1418 187.921 87.0181C187.921 83.8943 189.162 80.8985 191.371 78.6897L247.029 23.0317C249.238 20.8229 252.233 19.582 255.357 19.582C258.481 19.582 261.477 20.8229 263.685 23.0317L395.885 155.231C400.933 160.281 403.768 167.129 403.768 174.268C403.768 181.408 400.933 188.255 395.885 193.305Z" fill="#E88149"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M489.427 193.305L357.228 325.505C355.019 327.714 352.023 328.955 348.899 328.955C345.776 328.955 342.78 327.714 340.571 325.505L284.913 269.847C282.704 267.638 281.463 264.642 281.463 261.519C281.463 258.395 282.704 255.399 284.913 253.19L355.507 182.597C357.715 180.388 358.956 177.392 358.956 174.268C358.956 171.145 357.715 168.149 355.507 165.94L284.913 95.3464C282.704 93.1376 281.463 90.1418 281.463 87.0181C281.463 83.8943 282.704 80.8985 284.913 78.6897L340.571 23.0317C342.78 20.8229 345.776 19.582 348.899 19.582C352.023 19.582 355.019 20.8229 357.228 23.0317L489.427 155.231C494.475 160.281 497.31 167.129 497.31 174.268C497.31 181.408 494.475 188.255 489.427 193.305Z" fill="#F4CA66"/>
+</svg>
diff --git a/web/public/og/agent-relay-flows-v20260913.png b/web/public/og/agent-relay-flows-v20260913.png
new file mode 100644
index 00000000..03110f51
Binary files /dev/null and b/web/public/og/agent-relay-flows-v20260913.png differ
diff --git a/web/scripts/generate-flows-og.mjs b/web/scripts/generate-flows-og.mjs
new file mode 100644
index 00000000..50b51685
--- /dev/null
+++ b/web/scripts/generate-flows-og.mjs
@@ -0,0 +1,85 @@
+// Run from web: node scripts/generate-flows-og.mjs
+// Local asset rendering only; no server or deployed preview is needed.
+import { chromium } from '@playwright/test';
+import { codeToHtml } from 'shiki';
+import { fileURLToPath } from 'node:url';
+import { createJiti } from 'jiti';
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+const jiti = createJiti(import.meta.url, { jsx: { runtime: 'automatic' } });
+const { BrandLockup, SwoopLines, loadBrandFonts } = await jiti.import('../lib/og/template.tsx');
+const { fonts } = await loadBrandFonts();
+if (!fonts.some(font => font.name === 'Sora') || !fonts.some(font => font.name === 'Inter')) {
+  throw new Error('Brand fonts are required to preserve the original card design');
+}
+const fontCss = fonts.map(font => `@font-face { font-family: ${font.name}; font-weight: ${font.weight}; src: url(data:font/woff;base64,${Buffer.from(font.data).toString('base64')}); }`).join('\n');
+const brand = renderToStaticMarkup(React.createElement(BrandLockup, { scale: 1.4 }));
+const waves = renderToStaticMarkup(React.createElement(SwoopLines, { top: 420, opacity: 0.18 }));
+
+const script = `export default flow<TicketInput>(
+  "software-factory",
+  { budget: "$8/run" },
+  async (f, input) => {
+    await f
+      .agent("planner", { task: "Write the plan" })
+      .gate(r => r.artifacts.includes("plan/plan.md"));
+
+    await f
+      .agent("implementer", { task: "Build the plan" });
+
+    // Tests run outside the agent.
+    await f.run("npm test")
+      .gate(out => /failed:\\s*0/.test(out));
+
+    await f
+      .agent("adversary", { task: "Review changes" })
+      .gate(r => r.artifacts.includes("adversary/clean"));
+
+    f.done("success");
+  },
+);`;
+
+const code = await codeToHtml(script, { lang: 'typescript', theme: 'github-dark' });
+const browser = await chromium.launch();
+try {
+  const page = await browser.newPage({ viewport: { width: 1200, height: 630 }, deviceScaleFactor: 1 });
+  await page.setContent(`<!doctype html><html><head><style>
+    ${fontCss}
+    * { box-sizing: border-box; }
+    body { margin: 0; width: 1200px; height: 630px; overflow: hidden; color: #edf4fb;
+      font-family: Inter, sans-serif; background: #08111a;
+      background-image: radial-gradient(900px 540px at 6% -12%, rgba(116,184,226,.20) 0%, transparent 60%), radial-gradient(720px 500px at 106% 116%, rgba(116,184,226,.10) 0%, transparent 55%), linear-gradient(165deg, #0b1a29 0%, #08111a 55%, #060d15 100%); }
+    main { position: relative; display: flex; height: 100%; }
+    aside { position: relative; display: flex; flex-direction: column; justify-content: center; width: 600px; padding-left: 80px; flex-shrink: 0; }
+    .brand { margin-bottom: 44px; }
+    h1 { font-family: Sora; font-weight: 800; font-size: 48px; line-height: 1; letter-spacing: -.045em; margin: 0; }
+    p { max-width: 470px; font-size: 23px; line-height: 1.5; color: #a8b8c8; margin: 26px 0 0; }
+    .accent { position: absolute; left: 606px; top: 90px; width: 594px; height: 540px; border-radius: 21.6px 0 0; overflow: hidden; background: linear-gradient(135deg, #c1674b, #a8543b); }
+    section { position: absolute; left: 34.2px; top: 19.8px; width: 559.8px; height: 520.2px; background: #0f1b29; border: 2px solid rgba(116,184,226,.30); border-radius: 14.4px 0 0; padding: 18px; box-shadow: -16px 16px 44px rgba(0,0,0,.5); }
+    header { display: flex; align-items: center; gap: 8px; height: 36px; border-bottom: 1px solid rgba(116,184,226,.18); padding-bottom: 11px; }
+    .ts { border-radius: 5px; padding: 4px; color: #94cbef; background: #243e51; font: 700 12px Inter; }
+    header span { font: 700 15px Inter; }
+    pre { margin: 0; padding: 15px 0 0; background: transparent !important; }
+    code { font: 12.5px/19.5px Menlo, Consolas, monospace; }
+  </style></head><body><main>${waves}
+    <aside><div class="brand">${brand}</div>
+      <h1>A Flow is a script<br>that runs your agents.</h1>
+      <p>Coordinate Claude, Codex, and other coding agents across shared work, approvals, and long-running workflows</p>
+    </aside>
+    <div class="accent">
+      <svg width="576" height="576" viewBox="0 0 640 640" fill="none" style="position:absolute;left:0;top:0"><g stroke="#fff" stroke-width="1.6" stroke-linecap="round"><line x1="-60" y1="150" x2="170" y2="-80" opacity=".22"/><line x1="-60" y1="220" x2="240" y2="-80" opacity=".18"/><line x1="-60" y1="430" x2="120" y2="250" opacity=".16"/><line x1="-40" y1="600" x2="150" y2="410" opacity=".13"/></g></svg>
+      <section><header><b class="ts">TS</b><span>software-factory.flow.ts</span></header>${code}</section>
+    </div>
+  </main></body></html>`);
+  await page.evaluate(() => document.fonts.ready);
+  const fits = await page.evaluate(() => {
+    const code = document.querySelector('pre');
+    const panel = document.querySelector('section');
+    return code.scrollWidth <= panel.clientWidth && code.getBoundingClientRect().bottom <= panel.getBoundingClientRect().bottom;
+  });
+  if (!fits) throw new Error('Script overflows the OG image');
+  await page.screenshot({ path: fileURLToPath(new URL('../public/og/agent-relay-flows-v20260913.png', import.meta.url)) });
+} finally {
+  await browser.close();
+}