diff --git a/site/components/Header.tsx b/site/components/Header.tsx
index f60278496..072eabc62 100644
--- a/site/components/Header.tsx
+++ b/site/components/Header.tsx
@@ -9,7 +9,9 @@ const LINK_ACTIVE =
   "font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--green);border-bottom:var(--rule) solid var(--green);padding-bottom:1px;";
 
 /** `active` marks the top-level section the current page belongs to. */
-export function Header({ active }: { active?: "docs" } = {}) {
+export function Header(
+  { active }: { active?: "docs" | "workflows" } = {},
+) {
   return (
     <header style="position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:var(--rule) solid var(--line);">
       <div
@@ -20,6 +22,12 @@ export function Header({ active }: { active?: "docs" } = {}) {
           <Wordmark size="1rem" fold />
         </a>
         <nav style="display:flex;align-items:center;gap:1.125rem;font-size:0.8125rem;">
+          <a
+            href="/designing-workflows"
+            style={active === "workflows" ? LINK_ACTIVE : LINK}
+          >
+            Designing workflows
+          </a>
           <a href="/docs" style={active === "docs" ? LINK_ACTIVE : LINK}>
             Docs
           </a>
diff --git a/site/components/Prose.tsx b/site/components/Prose.tsx
new file mode 100644
index 000000000..bdec2694e
--- /dev/null
+++ b/site/components/Prose.tsx
@@ -0,0 +1,71 @@
+import { Fragment } from "preact";
+import type { ComponentChildren } from "preact";
+
+/* The type scale the marketing pages set their prose at. Sizes carry their
+ * own measure where the design gives them one, so a page states a style
+ * rather than restating a stack of declarations. */
+
+export const MONO = "font-family:var(--font-mono);";
+
+export const H3 =
+  "margin:0;font-size:1.0625rem;font-weight:800;letter-spacing:-0.01em;line-height:1.25;";
+export const P_SM =
+  "margin:0;font-size:0.875rem;line-height:1.6;color:var(--body);";
+export const P_MD =
+  "margin:0;max-width:74ch;font-size:0.9375rem;line-height:1.6;color:var(--body);";
+export const P_MEASURED = `${P_SM}max-width:74ch;`;
+
+/** A claim set at the weight of a heading, opening a panel or closing a list. */
+export const CLAIM =
+  "margin:0;font-size:1.0625rem;line-height:1.45;color:var(--ink);font-weight:800;letter-spacing:-0.01em;";
+
+export const CHAIN_ITEM =
+  `${MONO}font-size:0.8125rem;font-weight:700;color:var(--ink);`;
+
+/** An inline identifier: monospace, at full contrast against body prose. */
+export function Term({ children }: { children: ComponentChildren }) {
+  return (
+    <code style={`${MONO}font-weight:700;color:var(--ink);`}>{children}</code>
+  );
+}
+
+/** A ruled arrow chain, e.g. `Repository → Worktree → Implementor`. */
+export function Chain(
+  { steps, boxed }: { steps: string[]; boxed?: boolean },
+) {
+  return (
+    <div
+      style={`display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;${
+        boxed
+          ? "border:var(--rule) solid var(--line);padding:0.75rem 0.875rem;"
+          : "padding-top:0.125rem;"
+      }`}
+    >
+      {steps.map((step, i) => (
+        <Fragment key={step}>
+          <span style={CHAIN_ITEM}>{step}</span>
+          {i < steps.length - 1
+            ? <span style="color:var(--dim);">→</span>
+            : null}
+        </Fragment>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * The marketing pages close on a production note rather than the docs
+ * footer's link set — see `Footer.tsx` for the one the docs carry.
+ */
+export function PageFooter() {
+  return (
+    <footer style="border-top:var(--rule) solid var(--line);padding:1.5rem 0;margin-top:1rem;">
+      <div
+        class="container"
+        style={`${MONO}font-size:0.8125rem;color:var(--dim);`}
+      >
+        Made with ❤️ Effection.
+      </div>
+    </footer>
+  );
+}
diff --git a/site/components/Source.tsx b/site/components/Source.tsx
new file mode 100644
index 000000000..bf426a1cf
--- /dev/null
+++ b/site/components/Source.tsx
@@ -0,0 +1,41 @@
+import { Fragment } from "preact";
+
+/**
+ * One run of source text. A bare string is unstyled; a tuple carries the
+ * token class the design system paints it with, and `bold` is the Markdown
+ * structure (headings) that reads at full weight rather than as a token.
+ */
+export type Tok = string | ["key" | "str" | "mod" | "dim" | "bold", string];
+
+export const key = (text: string): Tok => ["key", text];
+export const str = (text: string): Tok => ["str", text];
+export const mod = (text: string): Tok => ["mod", text];
+export const dim = (text: string): Tok => ["dim", text];
+export const bold = (text: string): Tok => ["bold", text];
+
+const TOK_CLASS = {
+  key: "tok-key",
+  str: "tok-str",
+  mod: "tok-mod",
+  dim: "tok-dim",
+} as const;
+
+/** Source lines, joined with newlines so `<pre>` lays them out. */
+export function Source({ lines }: { lines: Tok[][] }) {
+  return (
+    <>
+      {lines.map((parts, line) => (
+        <Fragment key={line}>
+          {line > 0 ? "\n" : null}
+          {parts.map((part, i) =>
+            typeof part === "string"
+              ? part
+              : part[0] === "bold"
+              ? <span key={i} style="font-weight:700;">{part[1]}</span>
+              : <span key={i} class={TOK_CLASS[part[0]]}>{part[1]}</span>
+          )}
+        </Fragment>
+      ))}
+    </>
+  );
+}
diff --git a/site/routes/_app.tsx b/site/routes/_app.tsx
index 33b8d6b11..9e83beb04 100644
--- a/site/routes/_app.tsx
+++ b/site/routes/_app.tsx
@@ -16,7 +16,16 @@ const DEFAULT_DESC =
 
 // Per-route metadata so each page has a distinct title and its own canonical URL.
 const META: Record<string, { title: string; desc: string }> = {
-  "/": { title: DEFAULT_TITLE, desc: DEFAULT_DESC },
+  "/": {
+    title: "executable.md — turn repeatable work into programs",
+    desc:
+      "Turn repeatable work into readable Markdown programs. Encode what you already know how to do, and use agents only where judgment remains.",
+  },
+  "/designing-workflows": {
+    title: "Designing workflows · executable.md",
+    desc:
+      "Use the least autonomy that works: encode what you already know how to do, and reserve agents for the judgment that remains.",
+  },
   "/docs": {
     title: "Getting started · executable.md docs",
     desc:
diff --git a/site/routes/designing-workflows.tsx b/site/routes/designing-workflows.tsx
new file mode 100644
index 000000000..bf2ac2d06
--- /dev/null
+++ b/site/routes/designing-workflows.tsx
@@ -0,0 +1,246 @@
+import { define } from "../utils.ts";
+import { Header } from "../components/Header.tsx";
+import { CodeBlock } from "../components/Code.tsx";
+import { Chain, CLAIM, P_MD, PageFooter, Term } from "../components/Prose.tsx";
+import { dim, key, mod, Source, str, type Tok } from "../components/Source.tsx";
+
+const ISSUES = "https://github.com/taras/executable.md/issues/new";
+
+/** The ladder of mechanisms, weakest first. Reach right only when you must. */
+const POWER = [
+  "static value",
+  "deterministic operation",
+  "control flow",
+  "bounded agent judgment",
+  "autonomous agent",
+];
+
+/** How a task travels as it stops being unknown. */
+const MATURITY = ["unknown", "agentic", "understood", "encoded"];
+
+/** The practices that follow from encoding what is already known. */
+const PRACTICES = [
+  "Do not ask an agent to decide something the workflow already knows.",
+  "If you know how to do it, encode it.",
+  "Use agents where judgment or genuine uncertainty remains.",
+  "Give each agent a specific purpose and bounded responsibility.",
+  "Supply known context explicitly rather than asking agents to rediscover it.",
+  "Prefer deterministic validation and control flow when success conditions are known.",
+  "Put sequencing, retries, lifecycle, cleanup, and anything else you already know how to do into the workflow rather than prompts whenever possible.",
+  "Prefer composing bounded agents over giving one autonomous agent responsibility for an entire known multi-step procedure.",
+  "When repeated executions show that an agent makes the same decision in the same way, consider moving that decision into the program.",
+  "Keep workflow semantics independent of the execution environment and model/provider assignments when possible.",
+];
+
+/** The prompt that hands one agent the whole procedure. */
+const AUTONOMOUS: Tok[][] = [
+  ["Agent: find the issue, inspect the"],
+  ["repository, determine the relevant"],
+  ["standards, create a worktree,"],
+  ["implement it, test it, review it,"],
+  ["fix problems..."],
+];
+
+/** The same job, with everything already known encoded around the agents. */
+const ENCODED: Tok[][] = [
+  [key("<Repository"), " name", dim("="), str('"project"')],
+  ["            ", "url", dim("="), mod("{props.repository}"), key(">")],
+  ["  ", key("<Worktree"), " name", dim("="), str('"implementation"')],
+  ["            ", "branch", dim("="), mod("{props.branch}"), key(">")],
+  [
+    "    ",
+    key("<Implementor"),
+    " issue",
+    dim("="),
+    mod("{props.issue}"),
+    " ",
+    key("/>"),
+  ],
+  ["    ", key("<Reviewer"), " ", key("/>")],
+  ["  ", key("</Worktree>")],
+  [key("</Repository>")],
+];
+
+export default define.page(function DesigningWorkflows() {
+  return (
+    <>
+      <Header active="workflows" />
+
+      <div class="container" id="top">
+        <section style="padding-block:2.5rem 1.5rem;display:flex;flex-direction:column;gap:1.25rem;">
+          <span class="eyebrow eyebrow-mark">Documentation</span>
+          <h1 style="margin:0;max-width:24ch;font-size:clamp(2.1rem,4.4vw,3.2rem);line-height:1.04;font-weight:800;letter-spacing:-0.03em;">
+            Designing workflows
+          </h1>
+          <p style="margin:0;max-width:56ch;font-size:clamp(1.05rem,2.2vw,1.2rem);line-height:1.5;color:var(--body);">
+            What is the least autonomous workflow that will get the job done?
+          </p>
+          <p style={P_MD}>
+            This is the principle of least power applied to workflow design: use
+            the least powerful mechanism capable of reliably expressing the
+            behavior.
+          </p>
+        </section>
+
+        <section class="section" style="gap:1.25rem;">
+          <div class="section-head">
+            <h2>Use the least autonomy that works.</h2>
+          </div>
+          <Chain steps={POWER} boxed />
+          <p style={P_MD}>
+            Move toward the more powerful mechanism only when the less powerful
+            mechanism cannot adequately express the task.
+          </p>
+        </section>
+
+        <section class="section" style="gap:1.25rem;">
+          <div class="section-head">
+            <h2>Encode what is known.</h2>
+          </div>
+          <ul class="marks" style="max-width:74ch;">
+            {PRACTICES.map((practice) => <li key={practice}>{practice}</li>)}
+          </ul>
+          <p style={CLAIM}>Don't give an agent autonomy it doesn't need.</p>
+          <p style={P_MD}>
+            Don't keep paying an agent to figure out something you already know
+            how to do.
+          </p>
+        </section>
+
+        <section class="section" style="gap:1.25rem;">
+          <div class="section-head">
+            <h2>When you don't know how, let an agent figure it out.</h2>
+          </div>
+          <div
+            class="grid"
+            style="grid-template-columns:repeat(auto-fit,minmax(340px,1fr));align-items:start;"
+          >
+            <div style="display:flex;flex-direction:column;gap:0.625rem;min-width:0;">
+              <span class="eyebrow" style="color:var(--code-expr);">
+                Too autonomous
+              </span>
+              <CodeBlock>
+                <Source lines={AUTONOMOUS} />
+              </CodeBlock>
+            </div>
+            <div style="display:flex;flex-direction:column;gap:0.625rem;min-width:0;">
+              <span class="eyebrow">xmd</span>
+              <CodeBlock>
+                <Source lines={ENCODED} />
+              </CodeBlock>
+            </div>
+          </div>
+          <p style={P_MD}>
+            Both approaches may accomplish the goal. The <Term>xmd</Term>{" "}
+            version encodes everything we already know how to do and reserves
+            agent autonomy for the parts that still require judgment. It does
+            not eliminate agents or make them deterministic.
+          </p>
+        </section>
+
+        <section class="section" style="gap:1.25rem;">
+          <div class="section-head">
+            <h2>Progressive formalization.</h2>
+          </div>
+          <p style={P_MD}>
+            A task may start with a coding agent because nobody knows how to do
+            it yet. The agent discovers a successful way to accomplish it. As
+            that way becomes understood and repeated, move the known parts into
+            the program. Agents remain where genuine judgment or uncertainty
+            remains.
+          </p>
+          <Chain steps={MATURITY} boxed />
+          <p style={P_MD}>
+            As a workflow matures, it should generally become more program and
+            less prompt. This is not about eliminating AI. It is about reserving
+            AI for the places where intelligence is actually valuable.
+          </p>
+        </section>
+
+        <section class="section" style="gap:1.25rem;">
+          <div class="section-head">
+            <h2>Keep the workflow portable.</h2>
+          </div>
+          <p style={P_MD}>
+            The workflow owns what happens. The agent owns the judgment assigned
+            to it. The environment owns how and where it runs, including which
+            model or provider fulfills each role. Once known behavior is
+            encoded, run the same workflow locally, in CI, or in another sandbox
+            without redesigning it around that environment.
+          </p>
+          <p style={P_MD}>
+            When you don't know how, let an agent figure it out. Once you know
+            how, make it a program. Then run that program anywhere.
+          </p>
+        </section>
+
+        <section class="section" style="gap:1.25rem;">
+          <div class="section-head">
+            <h2>Why this matters.</h2>
+          </div>
+          <p style={P_MD}>
+            <Term>xmd</Term>{" "}
+            is not primarily an alternative to production-agent frameworks or
+            durable cloud workflow systems. Production agents are applications
+            with dedicated infrastructure and engineering attention.{" "}
+            <Term>xmd</Term>{" "}
+            is especially useful for the agentic work on the way to production —
+            implementation, review, testing, debugging, releases, migrations,
+            investigation, CI, repository maintenance, and development
+            automation that need reliability without a dedicated workflow
+            application.
+          </p>
+        </section>
+
+        <section class="section" style="gap:1.25rem;">
+          <div class="section-head">
+            <h2>Prefer xmd primitives to unnecessary JavaScript.</h2>
+          </div>
+          <p style={P_MD}>
+            JavaScript is appropriate when the problem genuinely requires
+            general-purpose computation. It should not become the default way to
+            express workflow semantics. Prefer{" "}
+            <Term>xmd</Term>'s declarative primitives and composition model when
+            they naturally represent the intent.
+          </p>
+          <p style={P_MD}>
+            If something that belongs in a workflow is unexpectedly difficult to
+            express, requires a large JavaScript workaround, or repeatedly needs
+            the same workaround, treat that as feedback about <Term>xmd</Term>
+            {" "}
+            itself.{" "}
+            <a class="link-rule" href={ISSUES} rel="noopener">File an issue</a>
+            {" "}
+            describing what you were trying to accomplish, why the existing
+            primitives made it difficult, and the workaround you needed.
+          </p>
+          <p style={P_MD}>
+            An AI helping author <Term>xmd</Term>{" "}
+            should not enthusiastically generate a large JavaScript workaround
+            for a missing generally useful primitive and call the problem
+            solved. If the workflow is complicated because the problem is
+            complicated, that is fine. If it is complicated because{" "}
+            <Term>xmd</Term> makes the problem difficult to express, tell us.
+          </p>
+        </section>
+
+        <section class="section" style="gap:1.25rem;">
+          <div class="section-head">
+            <h2>Guidance for components.</h2>
+          </div>
+          <p style={P_MD}>
+            Before using an{" "}
+            <Term>Agent</Term>, ask whether the operation actually requires
+            model judgment. Do not delegate context discovery when the workflow
+            already knows the context. Prefer deterministic validation and
+            control flow over asking an agent to decide known conditions. Future
+            component reference pages should link back to Designing workflows
+            rather than repeat this philosophy.
+          </p>
+        </section>
+      </div>
+
+      <PageFooter />
+    </>
+  );
+});
diff --git a/site/routes/index.tsx b/site/routes/index.tsx
index 80a8710ee..a9ae23630 100644
--- a/site/routes/index.tsx
+++ b/site/routes/index.tsx
@@ -3,20 +3,31 @@ import type { ComponentChildren } from "preact";
 import { define } from "../utils.ts";
 import { Header } from "../components/Header.tsx";
 import { CodeBlock } from "../components/Code.tsx";
+import {
+  Chain,
+  CLAIM,
+  H3,
+  MONO,
+  P_MD,
+  P_MEASURED,
+  P_SM,
+  PageFooter,
+  Term,
+} from "../components/Prose.tsx";
+import {
+  bold,
+  dim,
+  key,
+  mod,
+  Source,
+  str,
+  type Tok,
+} from "../components/Source.tsx";
 
 const GITHUB = "https://github.com/taras/executable.md";
 const SPEC = `${GITHUB}/blob/main/specs/executable-mdx-spec.md`;
 const VERSION = "v0.8.1";
 
-const MONO = "font-family:var(--font-mono);";
-const H3 =
-  "margin:0;font-size:1.0625rem;font-weight:800;letter-spacing:-0.01em;line-height:1.25;";
-const P_SM = "margin:0;font-size:0.875rem;line-height:1.6;color:var(--body);";
-const P_MD =
-  "margin:0;max-width:74ch;font-size:0.9375rem;line-height:1.6;color:var(--body);";
-const P_MEASURED = `${P_SM}max-width:74ch;`;
-const CHAIN_ITEM =
-  `${MONO}font-size:0.8125rem;font-weight:700;color:var(--ink);`;
 const STEP_NUMBER =
   `${MONO}font-size:0.8125rem;font-weight:700;letter-spacing:0.1em;color:var(--green);`;
 const SPLIT = "display:flex;flex-direction:column;gap:0.5rem;min-width:0;";
@@ -31,50 +42,6 @@ const PAIR =
 const PAGE_CSS = ".release-link{color:inherit;letter-spacing:inherit;}" +
   ".release-link:hover{color:var(--green);}";
 
-/* ------------------------------------------------------------------ *
- * Hand-tokenized document source
- * ------------------------------------------------------------------ */
-
-/**
- * One run of source text. A bare string is unstyled; a tuple carries the
- * token class the design system paints it with, and `bold` is the Markdown
- * structure (headings) that reads at full weight rather than as a token.
- */
-type Tok = string | ["key" | "str" | "mod" | "dim" | "bold", string];
-
-const key = (text: string): Tok => ["key", text];
-const str = (text: string): Tok => ["str", text];
-const mod = (text: string): Tok => ["mod", text];
-const dim = (text: string): Tok => ["dim", text];
-const bold = (text: string): Tok => ["bold", text];
-
-const TOK_CLASS = {
-  key: "tok-key",
-  str: "tok-str",
-  mod: "tok-mod",
-  dim: "tok-dim",
-} as const;
-
-/** Source lines, joined with newlines so `<pre>` lays them out. */
-function Source({ lines }: { lines: Tok[][] }) {
-  return (
-    <>
-      {lines.map((parts, line) => (
-        <Fragment key={line}>
-          {line > 0 ? "\n" : null}
-          {parts.map((part, i) =>
-            typeof part === "string"
-              ? part
-              : part[0] === "bold"
-              ? <span key={i} style="font-weight:700;">{part[1]}</span>
-              : <span key={i} class={TOK_CLASS[part[0]]}>{part[1]}</span>
-          )}
-        </Fragment>
-      ))}
-    </>
-  );
-}
-
 const RELEASE_MD: Tok[][] = [
   [bold("# Release")],
   [],
@@ -396,13 +363,6 @@ const HANDOFF_MD: Tok[][] = [
  * Page pieces
  * ------------------------------------------------------------------ */
 
-/** An inline identifier: monospace, at full contrast against body prose. */
-function Term({ children }: { children: ComponentChildren }) {
-  return (
-    <code style={`${MONO}font-weight:700;color:var(--ink);`}>{children}</code>
-  );
-}
-
 /** The shell prompt that opens each line of a terminal slab. */
 function Prompt() {
   return (
@@ -410,28 +370,6 @@ function Prompt() {
   );
 }
 
-/** A ruled arrow chain, e.g. `Repository → Worktree → Implementor`. */
-function Chain({ steps, boxed }: { steps: string[]; boxed?: boolean }) {
-  return (
-    <div
-      style={`display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;${
-        boxed
-          ? "border:var(--rule) solid var(--line);padding:0.75rem 0.875rem;"
-          : "padding-top:0.125rem;"
-      }`}
-    >
-      {steps.map((step, i) => (
-        <Fragment key={step}>
-          <span style={CHAIN_ITEM}>{step}</span>
-          {i < steps.length - 1
-            ? <span style="color:var(--dim);">→</span>
-            : null}
-        </Fragment>
-      ))}
-    </div>
-  );
-}
-
 /** The rule-and-arrow that carries the eye from one durability step to the next. */
 function Descent() {
   return (
@@ -475,6 +413,13 @@ function Step(
 }
 
 /** One of the three runtimes the same CLI installs under. */
+/** Where the work goes once you know how to do it. */
+const PRINCIPLES: { label: string; body: string }[] = [
+  { label: "Don't know how", body: "Use an agent to figure it out." },
+  { label: "Know how", body: "Make it a program." },
+  { label: "Judgment remains", body: "Keep only that part agentic." },
+];
+
 const RUNTIMES: { name: string; body: string; lines: string[][] }[] = [
   {
     name: "Deno",
@@ -563,7 +508,7 @@ export default define.page(function Home({ url }) {
             <div class="panel">
               <div class="panel-head">What you read is what runs</div>
               <div class="panel-body">
-                <p style="margin:0;font-size:1.0625rem;line-height:1.45;color:var(--ink);font-weight:800;letter-spacing:-0.01em;">
+                <p style={CLAIM}>
                   There is no workflow hidden behind the document. The document
                   is the workflow.
                 </p>
@@ -581,12 +526,12 @@ export default define.page(function Home({ url }) {
             <h2>The README as a CLI.</h2>
           </div>
           <p style={P_MD}>
-            Procedure belongs in the document; judgment belongs where the
-            document asks for it. <Term>xmd</Term>{" "}
-            moves procedure out of probabilistic interpretation and into
+            What you already know how to do belongs in the document; judgment
+            belongs where the document asks for it. <Term>xmd</Term>{" "}
+            moves known work out of probabilistic interpretation and into
             executable software: tests, file loading, sequencing, retries, and
             cleanup run as code, while planning, review, interpretation, and
-            design decisions stay with people or agents. Once procedure is
+            design decisions stay with people or agents. Once known work is
             executable, documentation does not need a parallel implementation to
             stay in sync — a README can explain the work to a person and expose
             the same work as runnable entry points for a CLI or an agent.
@@ -655,6 +600,59 @@ export default define.page(function Home({ url }) {
           </p>
         </section>
 
+        {/* Principles */}
+        <section id="principles" class="section" style="gap:1.5rem;">
+          <div class="section-head">
+            <h2>When you know how, make it a program.</h2>
+          </div>
+          <p style={P_MD}>
+            <Term>xmd</Term>{" "}
+            is not trying to make agents more autonomous. It is trying to
+            minimize how much work needs to remain agentic. When you know what
+            you want but don't know how to get there, use an agent. When you
+            know how to get there, make it a program and leave the agent only
+            the judgment that remains.
+          </p>
+
+          <div class="panel">
+            <div class="panel-head">The point</div>
+            <div class="panel-body">
+              <p style={CLAIM}>
+                The goal isn't autonomous agents. It's to minimize how much work
+                needs to remain agentic.
+              </p>
+            </div>
+          </div>
+
+          <div class="grid grid-3" style="align-items:stretch;">
+            {PRINCIPLES.map((principle) => (
+              <div
+                key={principle.label}
+                class="card"
+                style="display:flex;flex-direction:column;gap:0.5625rem;min-width:0;"
+              >
+                <span class="eyebrow">{principle.label}</span>
+                <p style="margin:0;font-size:0.875rem;line-height:1.55;color:var(--body);">
+                  {principle.body}
+                </p>
+              </div>
+            ))}
+          </div>
+
+          <p style={P_MD}>
+            One-off work can stay agentic. Repeated work that you know how to do
+            can become an <Term>xmd</Term> workflow.
+          </p>
+
+          <a
+            class="link-rule"
+            href="/designing-workflows"
+            style="align-self:flex-start;"
+          >
+            Designing workflows →
+          </a>
+        </section>
+
         {/* Agents */}
         <section id="agent" class="section" style="gap:1.5rem;">
           <div class="section-head">
@@ -992,14 +990,7 @@ export default define.page(function Home({ url }) {
         </section>
       </div>
 
-      <footer style="border-top:var(--rule) solid var(--line);padding:1.5rem 0;margin-top:1rem;">
-        <div
-          class="container"
-          style={`${MONO}font-size:0.8125rem;color:var(--dim);`}
-        >
-          Made with ❤️ Effection.
-        </div>
-      </footer>
+      <PageFooter />
 
       <style dangerouslySetInnerHTML={{ __html: PAGE_CSS }} />
     </>