From 8e9c602eb63dbe8026084bc564608616d81da246 Mon Sep 17 00:00:00 2001
From: Kristopher <kristopherleads@gmail.com>
Date: Thu, 15 Oct 2026 07:41:12 -0700
Subject: [PATCH 1/4] Implement video display section for AI builds

Added a section to display videos of AI builds with titles and durations.
---
 nuxt/pages/ai/index.vue | 47 +++++++++++++++++++++++++++++++++++------
 1 file changed, 40 insertions(+), 7 deletions(-)

diff --git a/nuxt/pages/ai/index.vue b/nuxt/pages/ai/index.vue
index 35a51d3c26..6ad6865321 100644
--- a/nuxt/pages/ai/index.vue
+++ b/nuxt/pages/ai/index.vue
@@ -59,6 +59,16 @@ useSchemaOrg([
 // have just copied.
 const CODING_NOTE = 'Other command-line and editor agents, such as Cursor, Visual Studio Code and Gemini CLI, connect to the same URL.'
 
+// What a connected agent actually builds, in place of the starter prompts this page
+// used to carry. The prompts carousel still lives on the blog post that embeds it.
+// `title` is the YouTube title, used for the embed's accessible name; `label` is the
+// shorter caption shown under each video.
+const BUILD_VIDEOS = [
+    { id: '2e8-CXt-RsM', label: 'Machine alerts in Slack, from legacy PLCs to new equipment', duration: '14 min', title: 'Machine Alerts in Slack, From Legacy PLCs to New Equipment I Built in 14 minutes' },
+    { id: 'dgwB7oFL_YY', label: 'An AI agent builds an OEE monitoring app', duration: '44 min', title: 'Industrial AI Agent Builds an OEE Monitoring App in 44 Minutes | FlowFuse + Claude MCP' },
+    { id: 'kPBLW-kMfsg', label: 'An AI agent builds a torque monitoring app', duration: '68 min', title: 'Industrial AI Agent Builds a Torque Monitoring App in 68 Minutes | FlowFuse + Claude MCP' },
+]
+
 const GOVERNANCE = {
     title: 'AI Governance you can <span class="text-indigo-600">prove</span>',
     subtitle: 'The control plane every AI action runs through, the same one that governs your teams.',
@@ -231,13 +241,36 @@ onUnmounted(() => {
               </span>
             </a>
 
-            <!-- What to ask once the picker above has you connected. Placed after the
-                 docs note rather than between it and the picker, so the note stays
-                 attached to the steps it belongs to, and the three read in order:
-                 how to connect, where to read more, what to say first.
-                 surface="ai" keeps these copies separable in PostHog from the same
-                 component on the blog post. -->
-            <PromptCarousel surface="ai" />
+            <!-- What a connected agent builds. Placed after the docs note rather than
+                 between it and the picker, so the note stays attached to the steps it
+                 belongs to, and the three read in order: how to connect, where to read
+                 more, what it looks like in practice. Carded with the same tinted
+                 header rail as the agent picker, so the two read as one family. -->
+            <section class="mt-8 mb-8 overflow-hidden rounded-xl border border-indigo-100 bg-white shadow-sm" aria-labelledby="ai-build-videos">
+              <div class="border-b border-indigo-100 bg-indigo-50/60 px-4 py-3">
+                <h2 id="ai-build-videos" class="m-0 font-mono text-xs font-semibold uppercase leading-4 tracking-[0.04em] text-indigo-600">
+                  Watch it build
+                </h2>
+              </div>
+              <ul class="m-0 grid list-none grid-cols-1 gap-6 p-4 md:grid-cols-3 md:p-5">
+                <li v-for="video in BUILD_VIDEOS" :key="video.id" class="m-0 flex flex-col gap-3">
+                  <!-- height auto lets lite-youtube's own 16:9 ratio size the frame, in
+                       place of the component's fixed 480px, which suits a full-width
+                       blog hero but not a third of a column. -->
+                  <LiteYoutube
+                    :videoid="video.id"
+                    :title="video.title"
+                    :poster="`https://i.ytimg.com/vi/${video.id}/hqdefault.jpg`"
+                    class="overflow-hidden rounded-lg"
+                    style="height: auto; max-width: none; background-size: cover; background-position: center;"
+                  />
+                  <p class="m-0 text-sm font-medium text-gray-900">
+                    {{ video.label }}
+                    <span class="block mt-1 text-xs font-normal text-gray-500">{{ video.duration }}</span>
+                  </p>
+                </li>
+              </ul>
+            </section>
           </div>
         </div>
       </div>

From 32315e4694abc2a0161c0bf9c28f4b7880b60da6 Mon Sep 17 00:00:00 2001
From: Kristopher <kristopherleads@gmail.com>
Date: Fri, 16 Oct 2026 13:35:01 -0700
Subject: [PATCH 2/4] Edits to the index.vue page to redesign content

---
 nuxt/pages/ai/index.vue | 720 ++++++++++++++++++++++------------------
 1 file changed, 404 insertions(+), 316 deletions(-)

diff --git a/nuxt/pages/ai/index.vue b/nuxt/pages/ai/index.vue
index 6ad6865321..d817287243 100644
--- a/nuxt/pages/ai/index.vue
+++ b/nuxt/pages/ai/index.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { getAllBlogPosts } from '~/utils/sharedContent'
 import { faqAnswerText } from '../../lib/faq-answer.mjs'
-// Ported from src/ai.njk (11ty), which this replaces. Same page, same copy, same
-// classes from nuxt/assets/css/style.css, which nuxt.config.ts already links here.
+// The /ai landing page. Originally ported from src/ai.njk (11ty), then rebuilt in
+// Oct 2026 around the Industrial AI positioning: it does the work, it already
+// reaches the plant, it cannot move without you, and it stays yours.
 //
-// What the port changes on purpose:
+// What the original port changed on purpose:
 //  - The two hand-rolled DOM scripts (agent tabs, showcase rotation) become
 //    reactive state. That was ~120 lines of querySelectorAll in the .njk.
 //  - The copy button becomes <FfCommand>, and the whole agent picker becomes
@@ -17,15 +17,20 @@ import { faqAnswerText } from '../../lib/faq-answer.mjs'
 //    ("Start a free trial", "GET STARTED") and reused cta-try-it-out.
 useSeoMeta({
     title: 'AI for Industrial Applications: Governed AI for Industry',
-    description: 'AI for industrial applications, without losing control: use FlowFuse Expert, or connect Copilot, ChatGPT, Claude or a local model to your operations.',
+    description: 'The Industrial AI that does the work: FlowFuse Expert or your own agent builds the change and ships it to every site, behind your approvals and permissions.',
     ogUrl: 'https://flowfuse.com/ai/',
     twitterSite: '@FlowFuseinc',
 })
 
-const capture = useCapture()
-
 const LINK = 'text-indigo-600 hover:text-indigo-800 underline'
 
+const capture = useCapture()
+
+// Every governance claim on this page is held to the MCP and Expert docs as of
+// FlowFuse 3.1 (docs/user/mcp.md, docs/user/expert/chat.md). Agents CAN delete
+// and deploy when a person grants Destructive access or turns on AI Flow Deploy,
+// so the claims are about who grants what, not about tools that do not exist.
+// Re-check those pages before strengthening any of them.
 const FAQ = [
     {
         question: 'What is AI for industrial applications?',
@@ -39,13 +44,37 @@ const FAQ = [
         question: 'What are examples of AI for industrial applications?',
         answer: 'Examples include AI-assisted engineering, automated visual inspection, natural-language access to production data, AI agents that interact with industrial systems, and AI models running locally at the edge. With FlowFuse, teams can use FlowFuse Expert to build and explain applications, connect external AI agents over MCP, run ONNX vision models, and use cloud or local LLMs within industrial workflows.',
     },
+    {
+        question: 'How is FlowFuse different from other industrial AI?',
+        answer: 'Most industrial AI analyses a copy of your data and hands you a recommendation, and a person still has to go and make the change. FlowFuse AI works inside the Node-RED flows already connected to your machines, so what it produces is the change itself: built, reviewed by you, and shipped to every site that needs it. FlowFuse sells no hardware and works with any vendor\'s equipment and any AI model.',
+    },
+    {
+        question: 'Does FlowFuse AI work with my existing PLCs and systems?',
+        answer: 'Yes. FlowFuse is built on Node-RED, which connects to OPC UA, Modbus, EtherNet/IP, Siemens S7, MQTT and more, plus over 5,000 community nodes. It is designed for brownfield sites, so it works alongside your existing PLCs, MES, ERP and SCADA rather than replacing them, and anything FlowFuse can reach, the AI can work with.',
+    },
     {
         question: 'Can I use my own AI agent with FlowFuse?',
-        answer: 'Yes. FlowFuse acts as an MCP server, so Microsoft Copilot, ChatGPT, Claude or a local model can connect to it and work your platform. You add one address, sign in, and choose which teams the agent may act on and whether it has editing rights or read access only. Because the agent is yours, so is the model behind it.',
+        answer: 'Yes. FlowFuse acts as an MCP server, so Microsoft Copilot, ChatGPT, Claude or a local model can connect to it and work your platform. You add one address, sign in, and choose which teams the agent may act on and whether it gets Read, Write or Destructive access in each. Because the agent is yours, so is the model behind it.',
+    },
+    {
+        question: 'Does FlowFuse work with Cursor, Visual Studio Code or Gemini CLI?',
+        answer: 'Yes. Command-line and editor agents such as Cursor, Visual Studio Code, Gemini CLI, Claude Code and Codex connect to FlowFuse over MCP, using the same URL as any other agent. On a self-hosted platform, use your own FlowFuse domain instead. Setup for each client is in the [third-party agents documentation](/docs/user/expert/third-party-agents/).',
     },
     {
         question: 'How do you keep AI from making changes you did not approve?',
-        answer: 'Every AI action runs through the same permissions and role-based access control that govern your teams, enforced on every call, so a read-only grant is refused whatever the agent tries. No agent can delete an instance, an application, a snapshot or a team, deploying stays with a person, and every action is logged and attributed in the audit log.',
+        answer: 'Every AI action runs through the permissions you grant, checked on every call: Read, Write or Destructive, set team by team, so a call that reaches past its grant is refused. By default FlowFuse Expert shows you each change and waits for your approval before it writes or deletes anything. Nothing goes live on its own unless a team owner turns on agent deploy, and every action is recorded in the audit log, marked as coming from Expert or from your own agent.',
+    },
+    {
+        question: 'Does FlowFuse Expert send my data to OpenAI?',
+        answer: 'Some FlowFuse Expert features use the OpenAI API, so the context you choose to share, such as a flow, your palette or debug logs, is sent to OpenAI to answer the request. No FlowFuse data is used to train models, and OpenAI deletes API data after 30 days of abuse monitoring. See [data privacy](/docs/user/expert/#data-privacy) for details.',
+    },
+    {
+        question: 'Can I run industrial AI without sending data to the cloud?',
+        answer: 'Yes, for the AI that runs in your flows. You can self-host FlowFuse on your own infrastructure, including air-gapped sites, run ONNX vision models at the edge, and use the Ollama node against a local model with no API key. You can also connect an agent that runs on your own model. FlowFuse Expert itself uses a hosted model, so it needs an outbound connection.',
+    },
+    {
+        question: 'Is FlowFuse Expert included in FlowFuse?',
+        answer: 'Yes. Every FlowFuse product, Edge, Hub and Fleet, includes FlowFuse Expert, and it is installed automatically in every hosted and remote instance. On self-hosted installations it needs an Enterprise license.',
     },
 ]
 
@@ -54,403 +83,462 @@ useSchemaOrg([
     ...FAQ.map(item => defineQuestion({ question: item.question, answer: faqAnswerText(item.answer) })),
 ])
 
-// The Cloud address. Self-hosted platforms answer on their own domain, so the block
-// takes one (host-swap) rather than telling the reader in prose to edit what they
-// have just copied.
-const CODING_NOTE = 'Other command-line and editor agents, such as Cursor, Visual Studio Code and Gemini CLI, connect to the same URL.'
+// The message runs in one order down the page: it does the work, it can already
+// reach the plant, it cannot move without you, and it stays yours. Keep new
+// sections inside that order rather than adding a fifth argument.
+
+// LAND: the difference from general-purpose AI assistants, shown as two short
+// sequences. The generic side leans negative on purpose: the point is the handoff.
+const GENERIC_STEPS = [
+    'You describe a problem',
+    'It tries to create a solution',
+    'You copy it and hope it works',
+    'Someone has to pick up the pieces later',
+]
+const FLOWFUSE_STEPS = [
+    'Works in the flows already wired to your machines',
+    'Builds the change',
+    'You review and approve it',
+    'Ships it to every site that needs it',
+]
+// For engineers: the work it takes off them. Never framed as headcount.
+const TEDIOUS_WORK = [
+    'Configuring the same flow forty times',
+    'Hand-typing a shift report from data you already have',
+    'Copying tag lists between systems',
+    'Reverse-engineering a flow someone left in 2019',
+    'Watching twenty small changes wait a quarter to ship',
+]
 
 // What a connected agent actually builds, in place of the starter prompts this page
 // used to carry. The prompts carousel still lives on the blog post that embeds it.
 // `title` is the YouTube title, used for the embed's accessible name; `label` is the
-// shorter caption shown under each video.
+// shorter caption shown under each video. The automotive build sits in the middle so
+// the two manufacturing examples are spread out rather than side by side.
 const BUILD_VIDEOS = [
-    { id: '2e8-CXt-RsM', label: 'Machine alerts in Slack, from legacy PLCs to new equipment', duration: '14 min', title: 'Machine Alerts in Slack, From Legacy PLCs to New Equipment I Built in 14 minutes' },
-    { id: 'dgwB7oFL_YY', label: 'An AI agent builds an OEE monitoring app', duration: '44 min', title: 'Industrial AI Agent Builds an OEE Monitoring App in 44 Minutes | FlowFuse + Claude MCP' },
-    { id: 'kPBLW-kMfsg', label: 'An AI agent builds a torque monitoring app', duration: '68 min', title: 'Industrial AI Agent Builds a Torque Monitoring App in 68 Minutes | FlowFuse + Claude MCP' },
+    { id: '2e8-CXt-RsM', label: 'Send machine alerts from any PLC to Slack', duration: '14 min', title: 'Machine Alerts in Slack, From Legacy PLCs to New Equipment I Built in 14 minutes' },
+    { id: 'kPBLW-kMfsg', label: 'Build an automotive torque monitoring app', duration: '68 min', title: 'Industrial AI Agent Builds a Torque Monitoring App in 68 Minutes | FlowFuse + Claude MCP' },
+    { id: 'dgwB7oFL_YY', label: 'Build an OEE monitoring app for any line', duration: '44 min', title: 'Industrial AI Agent Builds an OEE Monitoring App in 44 Minutes | FlowFuse + Claude MCP' },
 ]
 
-const GOVERNANCE = {
-    title: 'AI Governance you can <span class="text-indigo-600">prove</span>',
-    subtitle: 'The control plane every AI action runs through, the same one that governs your teams.',
-    items: [
-        { icon: 'i-lucide-lock', title: 'Only the teams you grant', description: 'AI reaches the teams you allow and nothing else, enforced by the platform on every call.' },
-        { icon: 'i-lucide-shield-check', title: 'Role-based access', description: 'The same RBAC that governs your teams governs what AI can see and do.' },
-        { icon: 'i-lucide-circle-check', title: 'Nothing gets deleted', description: 'No agent can remove an instance, an application, a snapshot or a team. There is no tool for it.' },
-        { icon: 'i-lucide-clipboard-check', title: 'Audit on everything', description: 'Every action AI takes is logged and attributed, so you can show exactly what happened and when.' },
-    ],
-}
+// BELIEVE: what the AI can reach. Protocol list matches the certified OT nodes and
+// the Device Agent page; "5,000+" is the figure the rest of the site uses. Each
+// pill links to the deepest page the site has on it, and where the Device Agent
+// page links the same protocol, it uses the same target so the two stay in step.
+const PROTOCOLS = [
+    { label: 'OPC UA', href: '/integrations/opcua/' },
+    { label: 'Modbus TCP & RTU', href: '/docs/flowfuse-nodes/edge/modbus/' },
+    { label: 'EtherNet/IP', href: '/blog/2025/10/using-ethernet-ip-with-flowfuse/' },
+    { label: 'Siemens S7', href: '/docs/flowfuse-nodes/edge/s7/' },
+    { label: 'MQTT', href: '/blog/2024/06/how-to-use-mqtt-in-node-red/' },
+    { label: 'RTSP cameras', href: '/blog/2026/06/process-rtsp-camera-feeds-at-the-edge/' },
+    { label: 'REST', href: '/docs/node-red/integration-technologies/rest/' },
+    { label: 'SQL', href: '/docs/node-red/database/mysql/' },
+    { label: 'Kafka', href: '/blog/2024/03/using-kafka-with-node-red/' },
+    { label: '5,000+ Node-RED nodes', href: '/integrations/' },
+]
+const REACH = [
+    { icon: 'i-lucide-factory', title: 'Brownfield first', description: 'Works with your existing PLCs, MES, ERP and SCADA. Nothing gets ripped out.' },
+    { icon: 'i-lucide-cpu', title: 'Already at the edge', description: 'The Device Agent runs next to the machine, outbound only, and keeps flows running if the link drops.' },
+    { icon: 'i-lucide-network', title: 'Every site at once', description: 'Device groups and pipelines take one approved change to the whole fleet.' },
+]
 
 const CAPABILITY_INTRO = {
-    title: 'Every way AI shows up in <span class="text-indigo-600">your operations</span>',
-    subtitle: 'From accelerating how you build, to acting inside live flows, to connecting the AI your company already trusts. Each one runs on the same governed platform.',
+    title: 'Where AI fits in <span class="text-indigo-600">your operations</span>',
+    subtitle: 'Build, operate and connect AI on one governed platform.',
 }
 
 // NOTE: Predictive analytics and Edge ML are intentionally omitted from public
 // claims (not shipped / not on the roadmap). Do not add them here without product
 // sign-off.
+//
+// Three cards side by side rather than eleven full-width rows: one sentence per
+// capability, so the section reads as an overview a person can take in at once.
+// `note` is the qualification for external agents, where a capability does not
+// behave the same as with Expert. `badge` marks anything not yet generally available.
 const CAPABILITY_GROUPS = [
     {
         id: 'build',
-        title: 'Accelerate engineering',
         eyebrow: 'Build',
-        subtitle: 'FlowFuse Expert turns intent into working industrial applications, right in the editor.',
+        title: 'Accelerate engineering',
+        subtitle: 'FlowFuse Expert, right in the editor.',
         items: [
-            { name: 'AI-assisted engineering', diagram: 'assisted-engineering', description: `Generate and edit <a href="/node-red/" class="${LINK}">Node-RED</a> flows, Function node JavaScript, SQL queries and dashboard UI from plain language, and ask Expert to explain any existing flow so any engineer can pick it up. It works inline in the editor your team already uses, so there is no separate tool to context-switch into. That turns unfamiliar or inherited flows into something the whole team can read and maintain.` },
-            { name: 'Prompt-to-app', diagram: 'prompt-to-app', description: 'Describe the application you need and FlowFuse Expert agentically builds the starting flows and logic directly in your workspace. You begin from a working draft instead of a blank canvas, then refine it like any other flow. Everything it creates stays inside the platform, so the same permissions and review apply from the first node.' },
-            { name: 'Build your own AI agents', diagram: 'build-agents', description: `Start from an agent blueprint, like the <a href="/blueprints/ai/llm-chat-agent/" class="${LINK}">LLM chat agent</a> or <a href="/blueprints/ai/rag-chat-agent/" class="${LINK}">RAG chat agent</a>, to stand up a task-specific AI agent grounded in your own data, tools and context. It gives you a proven structure to adapt rather than wiring an agent up from scratch. With MCP servers you can give the agent access to anything, including your RAG applications. Because it runs on the platform, the agent operates within the access you grant it.` },
-            { name: 'Built-in product knowledge', diagram: 'product-knowledge', description: 'A chat assistant with answers grounded in FlowFuse and Node-RED documentation, so guidance comes from the product, not stale wikis. Ask how a node works or how to approach a build and get an answer without leaving your workspace. It shortens the path from question to working flow for new and experienced users alike.' },
+            { icon: 'i-lucide-sparkles', name: 'AI-assisted engineering', description: `Generate and explain <a href="/node-red/" class="${LINK}">Node-RED</a> flows from plain language.` },
+            { icon: 'i-lucide-wand-sparkles', name: 'Prompt-to-app', description: 'Describe an app and get a working first draft.' },
+            { icon: 'i-lucide-bot', name: 'Build your own AI agents', description: `Start from an <a href="/blueprints/ai/llm-chat-agent/" class="${LINK}">LLM</a> or <a href="/blueprints/ai/rag-chat-agent/" class="${LINK}">RAG</a> agent blueprint.` },
+            { icon: 'i-lucide-book-open', name: 'Built-in product knowledge', description: 'Answers from the FlowFuse and Node-RED docs.' },
         ],
     },
     {
         id: 'operate',
-        title: 'Operate with AI, safely',
         eyebrow: 'Operate',
-        subtitle: 'AI that acts inside your flows and answers questions about live operations, always behind your controls.',
+        title: 'Operate with AI, safely',
+        subtitle: 'AI on live systems, behind your controls.',
         items: [
-            { name: 'Governed autonomous operations', diagram: 'governed-operations', externalNote: 'For external agents, approval cards do not apply. The access you granted is the control, enforced on every call.', description: 'Platform Automations let AI act on live systems, with every write behind an approval card, session-scoped and fully audited. A person approves, edits or rejects each proposed change before it reaches a machine. Nothing runs outside the permissions and RBAC that already govern your teams.' },
-            { name: 'Ask your plant anything', diagram: 'ask-your-plant', externalNote: 'For external agents, whether they can reach the MCP servers you build in your own flows depends on the agent.', description: 'In Insights mode, ask questions in natural language and get answers grounded in live machine state, alarms and logs. Operators and engineers can check what is happening on the floor without building a report or querying a database by hand. Table and MQTT-broker reading are coming soon.' },
-            { name: 'Automated visual inspection', diagram: 'visual-inspection', description: `Run <a href="/docs/flowfuse-nodes/ai/onnx/" class="${LINK}">ONNX</a> vision models inside flows next to the machine, with camera ingest over <a href="/docs/flowfuse-nodes/edge/rtsp/" class="${LINK}">RTSP</a>, for inference that works offline and keeps data on your network. Detection results flow into the same logic as any other signal, so you can trigger alerts or actions from what the model sees. Running at the edge means no round trip to the cloud and no image data leaving the plant.` },
-            { name: 'Use any model within flows', diagram: 'any-model', description: `<a href="/docs/flowfuse-nodes/ai/llm-nodes/" class="${LINK}">Certified LLM nodes</a> bring OpenAI, Anthropic, Gemini or local models via Ollama into any flow with your own keys. Choose the provider that fits each task, or keep everything on local models when data cannot leave your network. Because you supply the keys, model access and spend stay under your control.` },
+            { icon: 'i-lucide-shield-check', name: 'Platform Automations', description: 'Expert creates instances, takes snapshots and registers devices, asking first by default.', note: 'For external agents, the access you grant is the control.' },
+            { icon: 'i-lucide-message-circle-question', name: 'Ask your plant anything', description: `Ask questions of live data through <a href="/docs/flowfuse-nodes/mcp/" class="${LINK}">MCP servers</a> you build in your flows.` },
+            { icon: 'i-lucide-scan-eye', name: 'Automated visual inspection', description: `Run <a href="/docs/flowfuse-nodes/ai/onnx/" class="${LINK}">ONNX</a> vision models on <a href="/docs/flowfuse-nodes/edge/rtsp/" class="${LINK}">RTSP</a> cameras at the edge.` },
+            { icon: 'i-lucide-cpu', name: 'LLMs inside your flows', description: `Use OpenAI, Anthropic, Gemini or Ollama via <a href="/docs/flowfuse-nodes/ai/llm-nodes/" class="${LINK}">certified LLM nodes</a>.` },
         ],
     },
     {
         id: 'connect',
-        title: 'Connect your own agent',
         eyebrow: 'Connect',
-        subtitle: 'The agent your company already approved, working your platform and building in Node-RED. Your agent, your model, on a boundary you set.',
-        items: [
-            { name: 'Bring your own AI agent', diagram: 'bring-your-agent', description: `Point Microsoft Copilot, ChatGPT, Claude or a local model at FlowFuse, sign in, and it can <a href="/docs/user/mcp/" class="${LINK}">query your teams and instances and build Node-RED applications</a> for you. Where company policy only permits an approved AI agent, this is how that agent reaches your operations, instead of nobody getting AI on the platform at all.` },
-            { name: 'You decide what it reaches', diagram: 'you-decide', description: 'Signing in asks which teams the agent may act on and whether it may make changes at all. FlowFuse holds you to that on every call, so a read-only grant is refused whatever the agent tries. Nothing an agent reaches can delete an instance, an application, a snapshot or a team, and deploying stays yours.' },
-        ],
-    },
-    {
-        id: 'expose',
-        title: 'Expose your own tools',
-        eyebrow: 'Expose',
-        subtitle: 'The other direction. Your flows become tools that an agent can call as part of its work.',
+        title: 'Connect your own agent',
+        subtitle: 'Your approved agent, on a boundary you set.',
         items: [
-            { name: 'AI that uses your tools', diagram: 'your-tools', externalNote: 'Anyone can build them. For external agents, whether they can call them depends on the agent.', description: `Build your own <a href="/docs/flowfuse-nodes/mcp/" class="${LINK}">MCP servers</a> and let Insights-mode agents call your tools and services as part of a workflow. Wrap an internal API or system as a tool once, then let agents use it wherever it fits. The agent stays inside the workflow you designed, calling only the tools you register.` },
+            { icon: 'i-lucide-plug', name: 'Bring your own AI agent', description: `Connect Copilot, ChatGPT, Claude or a local model <a href="/docs/user/mcp/" class="${LINK}">over MCP</a>.` },
+            { icon: 'i-lucide-lock', name: 'You decide what it reaches', description: 'Grant Read, Write or Destructive access, team by team.' },
+            { icon: 'i-lucide-wrench', name: 'Expose your own tools', description: `Turn flows into <a href="/docs/flowfuse-nodes/mcp/" class="${LINK}">MCP servers</a> agents can call.`, note: 'Support varies by external agent.' },
         ],
     },
 ]
 
-// Curated rather than "latest in /blog/ai/", but rendered from the real post
-// records so the tiles carry the same date, image, summary and byline as every
-// other post listing on the site. Titles are no longer restated here - they come
-// from the posts, so they cannot drift when a post is retitled.
-const FURTHER_READING_PATHS = [
-    '/blog/2026/03/ai-usecases-in-factory',
-    '/blog/2026/03/last-mile-problem-ai',
-    '/blog/2026/06/process-rtsp-camera-feeds-at-the-edge',
-    '/blog/2026/02/motor-anomaly-detector-ai',
+// TRUST: what holds the AI back. Each tile is a claim the docs back as written.
+const GOVERNANCE = [
+    { icon: 'i-lucide-lock', title: 'Access you grant, checked every call', description: 'Read, Write or Destructive, team by team. A call beyond the grant is refused.' },
+    { icon: 'i-lucide-hand', title: 'Asks before it changes anything', description: 'By default, Expert shows the exact change and waits for your approval.' },
+    { icon: 'i-lucide-rocket', title: 'Nothing goes live on its own', description: 'Agent deploy stays off until a team owner turns it on.' },
+    { icon: 'i-lucide-clipboard-check', title: 'On the record, and reversible', description: 'The audit log marks every action via Expert or via MCP. Snapshots roll back any change.' },
 ]
 
-const FURTHER_READING_COUNT = 3
-
-const { data: furtherReading } = await useAsyncData('ai-further-reading', async () => {
-    const all = await getAllBlogPosts()
-    const byPath = new Map(all.map(entry => [String(entry.path).replace(/\/$/, ''), entry]))
-    return FURTHER_READING_PATHS
-        .map(path => byPath.get(path))
-        .filter(Boolean)
-        .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
-        .slice(0, FURTHER_READING_COUNT)
-})
-
-// Capability group nav. Same behaviour as the product page's tier list: whichever
-// group's top has last crossed the viewport midpoint is the active one, so walking
-// them in DOM order and overwriting on each match leaves the deepest match winning.
-// A midpoint check rather than an IntersectionObserver for the same reason it is
-// there - the gaps between groups are taller than any sensible observer band, so a
-// scroll through a gap would leave nothing intersecting and the marker stranded.
-const activeGroup = ref(CAPABILITY_GROUPS[0].id)
-const groupRefs = ref<Record<string, HTMLElement | null>>({})
-
-function updateActiveGroup () {
-    const groups = Object.entries(groupRefs.value).filter((entry): entry is [string, HTMLElement] => !!entry[1])
-    if (!groups.length) return
-    const mid = window.innerHeight / 2
-    let current = groups[0][0]
-    for (const [id, el] of groups) {
-        if (el.getBoundingClientRect().top <= mid) current = id
-    }
-    activeGroup.value = current
-}
-
-let groupTicking = false
-function onGroupScroll () {
-    if (!groupTicking) { groupTicking = true; requestAnimationFrame(() => { groupTicking = false; updateActiveGroup() }) }
-}
-
-onMounted(() => {
-    window.addEventListener('scroll', onGroupScroll, { passive: true })
-    window.addEventListener('resize', onGroupScroll, { passive: true })
-    updateActiveGroup()
-})
+// OWNERSHIP: independence and data handling as one list, so it reads as "and it
+// stays yours" straight after the proof. Say what we are not (a hardware vendor),
+// never what nobody owns. Data claims follow docs/user/expert/index.md.
+const OWNERSHIP = [
+    { icon: 'i-lucide-git-branch', title: 'Open at the core', description: 'Built on Node-RED and an Apache-2.0 core. Your flows are portable JSON.' },
+    { icon: 'i-lucide-cog', title: 'Any vendor\'s equipment', description: 'Siemens, Rockwell, Schneider or a 20-year-old PLC. We sell no hardware, so we take no sides.' },
+    { icon: 'i-lucide-sparkles', title: 'Any model, any agent', description: 'Expert, Copilot, ChatGPT or Claude, or keep inference local with Ollama and ONNX.' },
+    { icon: 'i-lucide-server', title: 'Runs where you do', description: 'FlowFuse Cloud in the EU, your own data centre, or fully air-gapped on-prem.' },
+    { icon: 'i-lucide-eye', title: 'You choose the context', description: 'Expert only sees the flows, palette or logs you share with it.' },
+    { icon: 'i-lucide-shield-off', title: 'Never used for training', description: 'No FlowFuse data trains third-party models. OpenAI deletes API data after 30 days.' },
+]
 
-onUnmounted(() => {
-    window.removeEventListener('scroll', onGroupScroll)
-    window.removeEventListener('resize', onGroupScroll)
-})
+// PROOF: platform results from published customer stories. None of these are AI
+// results and the copy must not imply they are - no customer story mentions AI yet.
+const RESULTS = [
+    { logo: '/images/stories/logos/walter-logo.png', brand: 'Walter Tools', number: '1 → 130+', text: 'instances, run by the same seven-person IT team', href: '/customer-stories/scaling-industrial-iot-operations-while-maintaining-competitive-edge/' },
+    { logo: '/images/stories/logos/aperia-technologies.png', brand: 'Aperia Technologies', number: 'Minutes', text: 'to ship a torque spec to 15 controllers across 5 lines, once done station by station', href: '/customer-stories/aperia-technologies-plc-replacement/' },
+    { logo: '/images/home-logos/energinet-logo.png', brand: 'Energinet', number: '7,000 km', text: 'of grid data, governed by a small team', href: '/customer-stories/energinet-streamlining-critical-infrastructure-data-management/' },
+]
 
 </script>
 
 <template>
   <div class="w-full">
-    <!-- HERO: the agent picker is the primary action on this page, so it lives here
-         rather than below a wall of positioning copy. -->
-    <!-- No bg-white: the layout's main already paints .gradient-bg, a radial indigo
-         wash anchored at the top right, and an opaque hero sits exactly over it. The
-         connector card below keeps its own white, because that is a card. -->
+    <!-- HERO: names the category and makes the one promise. The argument lives in
+         the sections below it; the hero never argues. The eyebrow keeps the page's
+         search phrase in visible copy now that the h1 no longer carries it.
+         No bg-white: the layout's main already paints .gradient-bg. -->
     <section class="w-full relative">
-      <!-- pb-0: the recording below is the picker's own result, so the space between
-           them belongs to that section's pt rather than being split across a section
-           boundary here. Two paddings meeting in the middle of one thread is what
-           left 128px of empty gradient under the docs card. -->
       <div class="relative z-10 w-full px-6 pt-12 md:pt-24 pb-0">
         <div class="sm:max-w-screen-lg mt-6 sm:mt-12 mx-auto">
           <div class="container m-auto text-left max-w-screen-lg">
-            <div class="max-w-3xl mx-auto">
-              <h1 class="font-medium home m-auto text-center text-gray-900 mb-6 max-w-2xl">
-                <span class="text-indigo-600">AI for Industrial Applications,</span> Governed and Built-In
+            <div class="max-w-3xl mx-auto text-center">
+              <p class="m-0 mb-5 text-xs font-semibold uppercase tracking-[0.16em] text-indigo-600">AI for industrial applications</p>
+              <h1 class="font-medium home m-auto text-gray-900 mb-6 max-w-2xl">
+                The Industrial AI that <span class="text-indigo-600">does the work.</span>
               </h1>
-              <p class="text-center text-xl md:text-2xl font-medium text-gray-800 max-w-2xl mx-auto mb-6">
-                The platform is the <span class="text-indigo-600">control plane.</span> AI is the <span class="text-indigo-600">accelerator.</span>
+              <p class="text-xl md:text-2xl font-medium text-gray-800 max-w-2xl mx-auto mb-6">
+                Builds the change. Ships it to every site. Nothing reaches a machine until you allow it.
               </p>
-              <p class="text-center max-w-4xl mx-auto text-gray-600">
-                Use FlowFuse Expert, or bring the agent your company already approved. Both reach only the teams you allow, and every action is logged.
+              <p class="max-w-2xl mx-auto text-gray-600">
+                Use FlowFuse Expert, or bring the agent your company already approved. Either way it works in your flows, on your permissions, in your audit log.
               </p>
+              <!-- Two audiences, two doors: the demo for whoever signs off, the setup
+                   steps for the engineer who wants to try it now. -->
+              <div class="mt-8 flex flex-col sm:flex-row gap-4 items-center justify-center">
+                <CtaBookDemo variant="highlight" position="hero" />
+                <a
+                  href="#connect"
+                  class="inline-flex items-center gap-2 font-medium text-indigo-600 no-underline hover:text-indigo-800"
+                  @click="capture('cta-ai-connect', { position: 'hero' })"
+                >
+                  Connect your agent
+                  <UIcon name="i-lucide-arrow-down" class="size-4" aria-hidden="true" />
+                </a>
+              </div>
             </div>
 
-            <!-- CONNECTOR: pick your agent, then three steps specific to it, so the
-                 reader only sees the instructions that apply to them. -->
-            <AgentSetupTabs class="mt-12" />
-            <!-- Docs pointer, not a step. Carded in the same tinted, hover-lifting
-                 treatment the platform page uses for its How-it-works blocks, so it
-                 reads as somewhere to go rather than as fine print under step 03.
-                 The whole card is the link, which is what marks it as navigable. -->
-            <a
-              href="/docs/user/expert/"
-              class="ff-doc-note mt-5 flex items-start gap-4 rounded-lg border border-indigo-100 bg-indigo-50/50 p-5 no-underline transition duration-300 ease-in-out hover:bg-indigo-50 hover:no-underline"
-              @click="capture('cta-ai-docs', { position: 'connector-note' })"
-            >
-              <UIcon name="i-lucide-terminal" class="size-6 flex-none text-indigo-600" aria-hidden="true" />
-              <span class="min-w-0">
-                <span class="block text-sm text-gray-600">{{ CODING_NOTE }}</span>
-                <span class="mt-2 block text-sm font-semibold text-indigo-600">See the documentation &rarr;</span>
-              </span>
-            </a>
+            <!-- PRODUCT SHOT: the Claude connector recording, straight under the
+                 headline so the page opens on the product doing the thing the h1
+                 claims, consent screen included. Sharp and framed rather than a faded
+                 backdrop: it is the proof, so it has to be readable.
+                 Autoplaying muted loop. The controls stay on because at 57 seconds
+                 moving content needs a way to stop it. WebM only, no MP4 fallback:
+                 full WebM support starts at Safari 16 / iOS 17.4, which leaves about
+                 1.1% of users with the poster, against 1.9MB for an H.264 copy. Kept
+                 as a <source> with a type so a browser that cannot play WebM never
+                 fetches it. The recording has no audio track, so muted is also the
+                 truth, and playsinline stops iOS taking it fullscreen.
+                 The frame is the wrapper, not the video, and it clips: Chrome draws
+                 its control bar in shadow DOM and ignores a radius on the video. -->
+            <div class="mt-12 overflow-hidden rounded-xl border border-indigo-100 bg-white shadow-2xl">
+              <video
+                class="block w-full"
+                poster="/images/ai/demo-claude-connector-poster.jpg"
+                width="1562"
+                height="1080"
+                autoplay
+                loop
+                muted
+                playsinline
+                controls
+                aria-label="Screen recording: Claude adds the FlowFuse connector from its connector directory, signs in, is granted access on the FlowFuse consent screen, and then answers which instances are running, listing five hosted Node-RED instances."
+              >
+                <source src="/images/ai/demo-claude-connector.webm" type="video/webm">
+              </video>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
 
-            <!-- What a connected agent builds. Placed after the docs note rather than
-                 between it and the picker, so the note stays attached to the steps it
-                 belongs to, and the three read in order: how to connect, where to read
-                 more, what it looks like in practice. Carded with the same tinted
-                 header rail as the agent picker, so the two read as one family. -->
-            <section class="mt-8 mb-8 overflow-hidden rounded-xl border border-indigo-100 bg-white shadow-sm" aria-labelledby="ai-build-videos">
-              <div class="border-b border-indigo-100 bg-indigo-50/60 px-4 py-3">
-                <h2 id="ai-build-videos" class="m-0 font-mono text-xs font-semibold uppercase leading-4 tracking-[0.04em] text-indigo-600">
-                  Watch it build
-                </h2>
-              </div>
-              <ul class="m-0 grid list-none grid-cols-1 gap-6 p-4 md:grid-cols-3 md:p-5">
-                <li v-for="video in BUILD_VIDEOS" :key="video.id" class="m-0 flex flex-col gap-3">
-                  <!-- height auto lets lite-youtube's own 16:9 ratio size the frame, in
-                       place of the component's fixed 480px, which suits a full-width
-                       blog hero but not a third of a column. -->
-                  <LiteYoutube
-                    :videoid="video.id"
-                    :title="video.title"
-                    :poster="`https://i.ytimg.com/vi/${video.id}/hqdefault.jpg`"
-                    class="overflow-hidden rounded-lg"
-                    style="height: auto; max-width: none; background-size: cover; background-position: center;"
-                  />
-                  <p class="m-0 text-sm font-medium text-gray-900">
-                    {{ video.label }}
-                    <span class="block mt-1 text-xs font-normal text-gray-500">{{ video.duration }}</span>
-                  </p>
-                </li>
-              </ul>
-            </section>
+    <!-- LOGOS: the shared customer marquee. These are platform customers; nothing
+         here says they use the AI. -->
+    <div class="w-full px-6 pt-8">
+      <SocialProof eyebrow="Trusted by companies across the globe" />
+    </div>
+
+    <!-- LAND: it does the work. The contrast with insight-only AI is the reason to
+         buy, so it comes before anything about how. -->
+    <section class="w-full px-6 pt-16 pb-12 sm:pt-24 sm:pb-16">
+      <div class="md:max-w-screen-lg m-auto">
+        <div class="max-w-3xl">
+          <h2 class="m-0">Not a recommendation. <span class="text-indigo-600">A deployed change.</span></h2>
+          <p class="mt-3 text-gray-600">Most industrial AI stops at advice. FlowFuse AI works in the software that already runs your plant, so what it hands you is the finished change.</p>
+        </div>
+        <div class="mt-10 grid grid-cols-1 gap-6 md:grid-cols-2">
+          <div class="rounded-xl border border-gray-200 bg-gray-50 p-6">
+            <p class="m-0 text-xs font-semibold uppercase tracking-[0.16em] text-gray-500">Generalized AI</p>
+            <ol class="m-0 mt-5 list-none space-y-3 p-0">
+              <li v-for="(step, i) in GENERIC_STEPS" :key="step" class="m-0 flex items-start gap-3 text-gray-500">
+                <span class="mt-0.5 flex size-6 flex-none items-center justify-center rounded-full border border-gray-300 font-mono text-xs">{{ i + 1 }}</span>
+                <span>{{ step }}</span>
+              </li>
+            </ol>
+          </div>
+          <div class="rounded-xl border border-indigo-200 bg-white p-6 shadow-sm">
+            <p class="m-0 text-xs font-semibold uppercase tracking-[0.16em] text-indigo-600">FlowFuse AI</p>
+            <ol class="m-0 mt-5 list-none space-y-3 p-0">
+              <li v-for="(step, i) in FLOWFUSE_STEPS" :key="step" class="m-0 flex items-start gap-3 text-gray-900">
+                <span class="mt-0.5 flex size-6 flex-none items-center justify-center rounded-full bg-indigo-600 font-mono text-xs text-white">{{ i + 1 }}</span>
+                <span>{{ step }}</span>
+              </li>
+            </ol>
           </div>
         </div>
       </div>
     </section>
 
-    <!-- DEMO: the payoff of the picker above. Those three steps say how to connect
-         an outside agent; this is what it looks like when you do, consent screen
-         included - the part a reader does not take on faith. It also hands off to
-         the governance section directly below, which is the same grant stated as a
-         claim rather than shown.
-         Autoplaying muted loop, the same treatment the install animation uses. The
-         controls stay on for one reason: at 57 seconds this runs long enough that
-         moving content needs a way to stop it, and the play/pause button is it.
-         Browsers pause an offscreen muted autoplay video by themselves, so there is
-         no observer here, and no preload hint either - autoplay settles that. The
-         poster still earns its place as the first paint before playback starts.
-         WebM only, and no MP4 fallback: full WebM support starts at Safari 16 and
-         iOS 17.4, which leaves 1.1% of global users out, and an H.264 copy costs
-         1.9MB to reach them - more than the WebM itself, on a video that now
-         autoplays for everyone. Those readers get the poster and a play button that
-         does nothing, which is the trade. Kept as a <source> with a type rather than
-         src on the video so a browser that cannot play WebM never fetches it.
-         The recording has no audio track at all, so muted is both the autoplay
-         precondition and the truth, and playsinline stops iOS taking it fullscreen.
-         pb-0 for the same reason the hero has it: these three sections are all
-         transparent, so a boundary between them is space and nothing else, and each
-         one owning only its top padding keeps that space to a single 64px. Doubling
-         up here put 128px above the governance card while the card sat 64px above
-         the capabilities band, which reads as the card floating low in a gap rather
-         than as a section change. Doubling is for boundaries that also change
-         background, the way the capabilities band does. -->
-    <section class="ff-ai-demo w-full px-6 pb-12 sm:pb-16 pt-24">
+    <!-- START: the agent picker and what it builds. The hero's "Connect your agent"
+         link lands here. -->
+    <section id="connect" class="w-full px-6 pt-12 pb-12 sm:pt-16 sm:pb-16 scroll-mt-16" aria-labelledby="ai-connect-title">
       <div class="md:max-w-screen-lg m-auto">
-        <h2 class="max-md:text-center">Connect and build <span class="text-red-600">faster than ever</span></h2>
-        <p class="mt-3 text-gray-600 max-w-3xl">
-          Connect in seconds and start building. Use natural-language to leverage your company-sanctioned AI in a secure and governed way.
-        </p>
-        <!-- The frame is the wrapper, not the video, and it clips: Chrome builds its
-             native control bar in shadow DOM and ignores the video's own
-             border-radius, so a radius set directly on the video left the bar's
-             square corners poking out past the rounded border. Same rounded /
-             bordered / shadowed treatment the product page gives its hero shot.
-             A plain div rather than a figure now the caption is gone - a figure with
-             nothing to caption is just a wrapper. -->
-        <div class="mt-8 overflow-hidden rounded-lg border-2 border-red-100 shadow-2xl">
-          <video
-            class="block w-full"
-            poster="/images/ai/demo-claude-connector-poster.jpg"
-            width="1562"
-            height="1080"
-            autoplay
-            loop
-            muted
-            playsinline
-            controls
-            aria-label="Screen recording: Claude adds the FlowFuse connector from its connector directory, signs in, is granted access on the FlowFuse consent screen, and then answers which instances are running, listing five hosted Node-RED instances."
-          >
-            <source src="/images/ai/demo-claude-connector.webm" type="video/webm">
-          </video>
+        <div class="max-w-3xl">
+          <h2 id="ai-connect-title" class="m-0">Start <span class="text-indigo-600">in minutes</span></h2>
+          <p class="mt-3 text-gray-600">Pick your agent. Three steps and it's building in your workspace.</p>
         </div>
+        <!-- CONNECTOR: pick your agent, then three steps specific to it, so the
+             reader only sees the instructions that apply to them. -->
+        <AgentSetupTabs class="mt-8" />
+
+        <!-- What a connected agent builds, straight after the picker: how to
+             connect, then what it looks like in practice. Carded with the same
+             tinted header rail as the agent picker, so the two read as one family. -->
+        <section class="mt-8 overflow-hidden rounded-xl border border-indigo-100 bg-white shadow-sm" aria-labelledby="ai-build-videos">
+          <div class="border-b border-indigo-100 bg-indigo-50/60 px-4 py-3">
+            <h3 id="ai-build-videos" class="m-0 font-mono text-xs font-semibold uppercase leading-4 tracking-[0.04em] text-indigo-600">
+              Watch AI build real industrial applications from start to finish
+            </h3>
+          </div>
+          <ul class="m-0 grid list-none grid-cols-1 gap-6 p-4 md:grid-cols-3 md:p-5">
+            <li v-for="video in BUILD_VIDEOS" :key="video.id" class="m-0 flex flex-col gap-3">
+              <!-- height auto lets lite-youtube's own 16:9 ratio size the frame, in
+                   place of the component's fixed 480px, which suits a full-width
+                   blog hero but not a third of a column. -->
+              <LiteYoutube
+                :videoid="video.id"
+                :title="video.title"
+                :poster="`https://i.ytimg.com/vi/${video.id}/hqdefault.jpg`"
+                class="overflow-hidden rounded-lg"
+                style="height: auto; max-width: none; background-size: cover; background-position: center;"
+              />
+              <p class="m-0 text-sm font-medium text-gray-900">
+                {{ video.label }}
+                <span class="block mt-1 text-xs font-normal text-gray-500">Built in {{ video.duration }}</span>
+              </p>
+            </li>
+          </ul>
+        </section>
       </div>
     </section>
 
-    <!-- GOVERNANCE: the control plane every AI action runs through. Path-neutral,
-         which is what lets it sit above the picker rather than under Expert. -->
-    <div class="ff-ai-governance w-full px-6 py-12 sm:py-16 sm:pb-32">
-      <div class="md:max-w-screen-lg m-auto ff-blue-card pt-12 pb-12 px-6 md:px-10">
-        <div class="text-center max-w-3xl mx-auto">
-          <!-- eslint-disable-next-line vue/no-v-html -->
-          <h2 class="w-full" v-html="GOVERNANCE.title" />
-          <p class="mt-3 text-gray-600">{{ GOVERNANCE.subtitle }}</p>
+    <!-- BELIEVE: why it can do the work. It is already holding the wire, so it can
+         take the repetitive work off your engineers. -->
+    <section class="w-full px-6 pt-12 pb-16 sm:pt-16 sm:pb-24" aria-labelledby="ai-reach-title">
+      <div class="md:max-w-screen-lg m-auto">
+        <div class="max-w-3xl">
+          <h2 id="ai-reach-title" class="m-0">Already wired <span class="text-indigo-600">to your plant</span></h2>
+          <p class="mt-3 text-gray-600">AI is only as useful as what it can reach. FlowFuse runs on Node-RED, which already talks to the equipment you have, from new lines to decades-old PLCs.</p>
         </div>
-        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 mt-12">
-          <div v-for="tile in GOVERNANCE.items" :key="tile.title" class="flex flex-col items-center text-center gap-3">
-            <UIcon :name="tile.icon" class="size-8 text-indigo-600" aria-hidden="true" />
-            <p class="font-medium text-indigo-700 m-0">{{ tile.title }}</p>
-            <p class="text-sm text-gray-600 font-light m-0">{{ tile.description }}</p>
+        <!-- Two halves of one argument: what it can reach on the left, and so what
+             it can take off your engineers on the right. -->
+        <div class="mt-10 grid grid-cols-1 gap-12 md:grid-cols-2">
+          <div>
+            <ul class="m-0 flex list-none flex-wrap gap-2 p-0" aria-label="Supported protocols and systems">
+              <li v-for="protocol in PROTOCOLS" :key="protocol.label" class="m-0">
+                <NuxtLink
+                  :to="protocol.href"
+                  class="inline-flex items-center rounded-full border border-indigo-100 bg-white px-3 py-1 text-sm font-medium text-gray-700 no-underline transition-colors duration-150 hover:border-indigo-600 hover:bg-indigo-50 hover:text-indigo-600 hover:no-underline"
+                >{{ protocol.label }}</NuxtLink>
+              </li>
+            </ul>
+            <div class="mt-8 flex flex-col gap-6">
+              <div v-for="item in REACH" :key="item.title" class="flex gap-3">
+                <UIcon :name="item.icon" class="mt-0.5 size-6 flex-none text-indigo-600" aria-hidden="true" />
+                <div>
+                  <p class="m-0 font-medium text-gray-900">{{ item.title }}</p>
+                  <p class="m-0 mt-1 text-sm text-gray-600">{{ item.description }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="rounded-xl border border-indigo-100 bg-white p-6 shadow-sm">
+            <h3 class="m-0 text-xl font-medium text-gray-900 leading-snug">FlowFuse AI does the work nobody became an engineer to do</h3>
+            <p class="m-0 mt-2 text-sm text-gray-600">You can build your solution without having to waste time on boilerplate or endlessly repeating configurations.</p>
+            <ul class="m-0 mt-4 list-none p-0">
+              <li v-for="item in TEDIOUS_WORK" :key="item" class="m-0 flex items-center gap-3 border-b border-indigo-50 py-3 text-gray-700 last:border-b-0 last:pb-0">
+                <UIcon name="i-lucide-x" class="size-4 flex-none text-red-400" aria-hidden="true" />
+                {{ item }}
+              </li>
+            </ul>
           </div>
         </div>
       </div>
-    </div>
+    </section>
 
-    <!-- CAPABILITIES: every AI use case, grouped by how it shows up in operations.
-         A sticky contents list on the left tracks which group you are in. -->
+    <!-- CAPABILITIES: every AI use case, grouped by how it shows up in operations,
+         as three cards side by side so the whole set fits on about one screen.
+         Below lg the cards stack. -->
     <div id="capabilities" class="w-full px-6 py-12 sm:py-16 bg-indigo-50/60 border-t border-gray-100 scroll-mt-16">
       <div class="md:max-w-screen-lg m-auto">
-        <div class="max-w-4xl">
+        <div class="max-w-3xl">
           <!-- eslint-disable-next-line vue/no-v-html -->
           <h2 class="w-full" v-html="CAPABILITY_INTRO.title" />
           <p class="mt-3 text-gray-600">{{ CAPABILITY_INTRO.subtitle }}</p>
         </div>
-        <!-- Group nav on the left, groups stacked on the right - the same contents
-             list the product page uses for Edge / Hub / Fleet. It replaces the old
-             per-group headers that pinned and alternated sides: with four groups and
-             eleven items, a reader needed to know what the section contained and how
-             far through it they were, which alternating headers could not tell them.
-             Desktop only; below lg the groups simply stack and each header does the
-             work on its own. -->
-        <div class="mt-16 flex flex-col lg:flex-row lg:gap-12">
-          <nav class="hidden lg:block lg:w-44 shrink-0" aria-label="Capability groups">
-            <ul class="sticky top-24 flex list-none flex-col border-l border-indigo-200 p-0">
-              <li v-for="group in CAPABILITY_GROUPS" :key="group.id" class="m-0">
-                <a
-                  :href="`#cap-${group.id}`"
-                  class="-ml-px block border-l-2 py-[0.6rem] pl-5 font-medium no-underline transition-colors duration-200"
-                  :class="activeGroup === group.id ? 'border-indigo-600 text-indigo-600' : 'border-transparent text-gray-500 hover:text-indigo-600'"
-                  :aria-current="activeGroup === group.id ? 'true' : undefined"
-                >{{ group.eyebrow }}</a>
-              </li>
-            </ul>
-          </nav>
-          <div class="min-w-0 flex-1">
-        <section
-          v-for="(group, gi) in CAPABILITY_GROUPS"
-          :id="`cap-${group.id}`"
-          :key="group.title"
-          :ref="(el) => { groupRefs[group.id] = el as HTMLElement | null }"
-          class="ff-cap-group scroll-mt-24"
-          :class="gi > 0 ? 'mt-20 pt-20 border-t border-indigo-200/70' : ''"
-        >
-          <div class="mb-10">
-            <p class="flex items-center gap-3 text-xs font-semibold uppercase tracking-[0.16em] text-indigo-600 m-0">
-              <span class="font-mono text-indigo-600">0{{ gi + 1 }}</span>
+        <div class="mt-10 grid grid-cols-1 gap-6 lg:grid-cols-3">
+          <section
+            v-for="(group, gi) in CAPABILITY_GROUPS"
+            :id="`cap-${group.id}`"
+            :key="group.id"
+            class="flex flex-col rounded-xl border border-indigo-100 bg-white p-6 shadow-sm scroll-mt-24"
+            :aria-labelledby="`cap-${group.id}-title`"
+          >
+            <p class="flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.16em] text-indigo-600 m-0">
+              <span class="font-mono">0{{ gi + 1 }}</span>
               <span>{{ group.eyebrow }}</span>
             </p>
-            <h3 class="text-3xl md:text-4xl font-medium text-gray-900 leading-tight mt-4 mb-0">{{ group.title }}</h3>
-            <p class="text-gray-600 font-light max-w-2xl mt-4 mb-0">{{ group.subtitle }}</p>
-          </div>
-          <div>
-            <div
-              v-for="(item, ii) in group.items"
-              :key="item.name"
-              class="ff-cap-item"
-              :class="ii === 0 ? 'pb-10' : 'mt-10 pt-10 pb-10 border-t border-indigo-100'"
-            >
-              <!-- MEDIA WELL: the capability's schematic, one shared three-column
-                   layout across all of them, so the section reads as one platform
-                   rather than eleven unrelated pictures. -->
-              <div class="ff-cap-well">
-                <AiCapabilityDiagram :kind="item.diagram" />
-              </div>
-              <div class="flex flex-wrap items-center gap-x-3 gap-y-2 mt-5">
-                <span class="text-xl font-medium text-gray-900">{{ item.name }}</span>
-              </div>
-              <!-- eslint-disable-next-line vue/no-v-html -->
-              <p class="text-gray-600 font-light mt-2 mb-0" v-html="item.description" />
-              <p v-if="item.externalNote" class="ff-cap-differs mt-3 mb-0">{{ item.externalNote }}</p>
-            </div>
-          </div>
-        </section>
-          </div>
+            <h3 :id="`cap-${group.id}-title`" class="text-xl font-medium text-gray-900 leading-snug mt-2 mb-0">{{ group.title }}</h3>
+            <p class="text-sm text-gray-600 mt-2 mb-0">{{ group.subtitle }}</p>
+            <ul class="m-0 mt-5 list-none border-t border-indigo-100 p-0">
+              <li v-for="item in group.items" :key="item.name" class="m-0 flex gap-3 border-b border-indigo-50 py-4 last:border-b-0 last:pb-0">
+                <UIcon :name="item.icon" class="mt-0.5 size-5 flex-none text-indigo-600" aria-hidden="true" />
+                <div class="min-w-0">
+                  <p class="m-0 flex flex-wrap items-center gap-2 font-medium text-gray-900">
+                    {{ item.name }}
+                    <span v-if="item.badge" class="inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-[0.6875rem] font-semibold uppercase tracking-[0.06em] text-amber-700">{{ item.badge }}</span>
+                  </p>
+                  <!-- eslint-disable-next-line vue/no-v-html -->
+                  <p class="m-0 mt-1 text-sm text-gray-600" v-html="item.description" />
+                  <p v-if="item.note" class="ff-cap-differs m-0 mt-2 !text-xs">{{ item.note }}</p>
+                </div>
+              </li>
+            </ul>
+          </section>
         </div>
       </div>
     </div>
 
-    <!-- FURTHER READING: keeps the page from being a dead end and points at where
-         the depth actually is. -->
-    <div class="w-full px-6 py-12 sm:py-16">
+    <!-- TRUST: it can't move without you. Governance only; data handling and
+         independence follow the proof, as what keeps the platform yours. -->
+    <section class="ff-ai-governance w-full px-6 pt-16 pb-16 sm:pt-24 sm:pb-24" aria-labelledby="ai-trust-title">
+      <div class="md:max-w-screen-lg m-auto ff-blue-card pt-12 pb-12 px-6 md:px-10">
+        <div class="text-center max-w-3xl mx-auto">
+          <h2 id="ai-trust-title" class="w-full m-0">It can't move <span class="text-indigo-600">without you</span></h2>
+          <p class="mt-3 text-gray-600">Every AI action runs through the same platform that governs your teams.</p>
+        </div>
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-10 mt-12">
+          <div v-for="tile in GOVERNANCE" :key="tile.title" class="flex flex-col items-center text-center gap-3">
+            <UIcon :name="tile.icon" class="size-8 text-indigo-600" aria-hidden="true" />
+            <p class="font-medium text-indigo-700 m-0">{{ tile.title }}</p>
+            <p class="text-sm text-gray-600 font-light m-0">{{ tile.description }}</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- PROOF: platform results from published stories, labelled as platform
+         results. The AI works on this platform; these are not AI case studies.
+         Then why it stays yours, then a customer quote that says the same. -->
+    <section class="w-full px-6 py-12 sm:py-16 bg-indigo-50/60 border-t border-gray-100" aria-labelledby="ai-proof-title">
       <div class="md:max-w-screen-lg m-auto">
-        <h2 class="max-md:text-center">More on <span class="text-indigo-600">industrial AI</span></h2>
-        <p class="mt-3 text-gray-600 max-w-3xl">
-          Worked examples and the thinking behind them, from the
+        <div class="max-w-3xl">
+          <h2 id="ai-proof-title" class="m-0">The platform it runs on, <span class="text-indigo-600">in production today</span></h2>
+          <p class="mt-3 text-gray-600">FlowFuse AI works in the same platform these teams already run their plants on.</p>
+        </div>
+        <ul class="m-0 mt-10 grid list-none grid-cols-1 gap-6 p-0 md:grid-cols-3">
+          <li v-for="result in RESULTS" :key="result.brand" class="m-0">
+            <a :href="result.href" class="group flex h-full flex-col rounded-xl border border-indigo-100 bg-white p-6 no-underline shadow-sm transition hover:border-indigo-300 hover:no-underline">
+              <img :src="result.logo" :alt="result.brand" class="h-8 w-auto max-w-40 self-start object-contain object-left">
+              <p class="m-0 mt-6 text-4xl font-semibold text-indigo-600">{{ result.number }}</p>
+              <p class="m-0 mt-2 text-gray-600">{{ result.text }}</p>
+              <span class="mt-auto pt-6 text-sm font-semibold text-indigo-600 group-hover:text-indigo-800">Read the {{ result.brand }} story &rarr;</span>
+            </a>
+          </li>
+        </ul>
+        <!-- Then why it stays yours, then a customer saying so. -->
+        <div class="mt-16 border-t border-indigo-200/70 pt-12">
+          <h3 class="m-0 text-2xl md:text-3xl font-medium text-gray-900 leading-snug">Still yours <span class="text-indigo-600">in ten years</span></h3>
+          <p class="m-0 mt-3 text-gray-600">No hardware to sell you, no model to lock you into, and your data under your control. SOC 2 Type I and II audited.</p>
+          <div class="mt-8 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+            <div v-for="item in OWNERSHIP" :key="item.title" class="flex gap-3">
+              <UIcon :name="item.icon" class="mt-0.5 size-6 flex-none text-indigo-600" aria-hidden="true" />
+              <div>
+                <p class="m-0 font-medium text-gray-900">{{ item.title }}</p>
+                <p class="m-0 mt-1 text-sm text-gray-600">{{ item.description }}</p>
+              </div>
+            </div>
+          </div>
+          <p class="m-0 mt-8 flex flex-col gap-2 text-sm sm:flex-row sm:gap-6">
+            <a href="/docs/user/expert/#data-privacy" :class="LINK">Read the Expert data privacy notes</a>
+            <a href="/platform/security/" :class="LINK">See security and compliance details</a>
+          </p>
+        </div>
+        <QuoteBlock
+          class="mt-14"
+          quote="FlowFuse removes most of our concerns about scalability and reliability. It's also making it a lot easier for us to complete security audits for our customers. FlowFuse's stack is open, widely used and well documented which gives auditors confidence in our applications built on your platform."
+          author="Alan Yeung"
+          role="CTO, Power Workplace"
+          result="Read the Power Workplace story."
+          result-link-text="Power Workplace story"
+          result-href="/customer-stories/node-red-building-management/"
+        />
+        <p class="m-0 mt-10 text-gray-600">
+          More worked examples, and the thinking behind them, on the
           <a href="/blog/ai/" :class="LINK">FlowFuse AI blog</a>.
         </p>
-        <!-- Same tile as the blog index, tag pages and author pages: BlogListItem
-             renders its own <li>, so this is the flex-wrap <ul> those listings use
-             rather than a grid of our own. -->
-        <ul class="mt-6 flex flex-wrap">
-          <BlogListItem v-for="post in furtherReading" :key="post.path" :entry="post" />
-        </ul>
       </div>
-    </div>
+    </section>
 
     <!-- FINAL CTA: the same block that closes /product/, so the two pages end the
          same way rather than each inventing a sign-off. -->
     <div class="w-full px-6 py-12 sm:py-16">
       <div class="max-w-screen-lg mx-auto">
         <div class="rounded-xl px-9 py-12 flex flex-col items-center gap-8 text-center ff-get-started-bg">
-          <p class="text-white text-4xl sm:text-5xl font-medium m-0">Get Started with FlowFuse</p>
-          <p class="text-indigo-50 font-light text-xl max-w-2xl m-0">Your first operational application could be running this week. Request a demo to see how, or explore pricing to find the right fit.</p>
+          <p class="text-white text-4xl sm:text-5xl font-medium m-0">See it do the work</p>
+          <p class="text-indigo-50 font-light text-xl max-w-2xl m-0">Bring one change your team keeps putting off. We'll show you FlowFuse AI building it, behind your approvals.</p>
           <div class="flex flex-col sm:flex-row gap-4 items-center">
             <CtaBookDemo variant="highlight" position="get-started" />
             <CtaPricing variant="ghost" color="white" position="get-started" icon="i-lucide-arrow-right" />

From 27dae5cb65600dbacbf21a52150d6db73e5ad9f2 Mon Sep 17 00:00:00 2001
From: Kristopher <kristopherleads@gmail.com>
Date: Fri, 16 Oct 2026 13:35:30 -0700
Subject: [PATCH 3/4] Updating CSS

---
 nuxt/assets/css/style.css | 109 --------------------------------------
 1 file changed, 109 deletions(-)

diff --git a/nuxt/assets/css/style.css b/nuxt/assets/css/style.css
index 79076bf728..9c1fd25f1c 100644
--- a/nuxt/assets/css/style.css
+++ b/nuxt/assets/css/style.css
@@ -3367,18 +3367,6 @@ lite-youtube::before {
     height: 1.25rem;
 }
 
-/* Capability marker icon: the item's own icon stands in for the old number
-   chip, so the blocks read as a parallel list rather than an ordered sequence.
-   Sized slot, indigo to match the brand accent, aligned to the block top. */
-.ff-cap-icon {
-    flex: none;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 2.5rem;
-    height: 2.5rem;
-    color: var(--color-indigo-600);
-}
 /* "Differs by agent" clause: sits under a capability whose behaviour is not identical
    on the FlowFuse Expert path and the bring-your-own-agent path. Quieter than the body
    copy, and set off by a rule, so it reads as a qualification rather than a feature. */
@@ -3601,103 +3589,6 @@ lite-youtube::before {
     padding-bottom: 0;
 }
 
-/* Media well: the frame around each capability's schematic. */
-.ff-cap-well {
-    /* Matches the diagram's 720x150 viewBox, so the frame hugs the drawing instead
-       of leaving a 16:9 box mostly empty. Full column width - the drawing is wide
-       enough to fill it, so the width costs nothing in height. */
-    aspect-ratio: 720 / 150;
-    width: 100%;
-    overflow: hidden;
-    background-color: var(--color-white);
-    border: 1px solid var(--color-indigo-100);
-    border-radius: 0.5rem;
-}
-
-.ff-cap-icon svg {
-    width: 1.875rem;
-    height: 1.875rem;
-}
-
-/* Capability schematics (AiCapabilityDiagram): a neutral card for the parts that
-   are yours, an accent card for the FlowFuse piece, a static arrow for direction.
-   The SVG's 720x150 viewBox fills the well, so nothing is scaled up.
-
-   Colour is set once per column on the group (.is-accent) rather than per element,
-   so a card, its glyph and its label cannot end up in different states. */
-.ff-aidiag {
-    display: block;
-    width: 100%;
-    height: 100%;
-    font-family: inherit;
-}
-.ff-aidiag__card {
-    fill: var(--color-white);
-    stroke: var(--color-indigo-100);
-    stroke-width: 1.25;
-}
-.ff-aidiag__glyph {
-    fill: none;
-    stroke: var(--color-gray-400);
-    stroke-width: 1.5;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-}
-/* 12 in a 720-wide viewBox that renders at ~800: about 13px on screen, so a
-   diagram label sits below the 16px body copy rather than competing with it. */
-.ff-aidiag__label {
-    font-size: 12px;
-    fill: var(--color-gray-600);
-}
-
-/* The FlowFuse column: filled, brand-bordered, and its glyph and label lift with
-   it, so the governed piece is what the eye lands on. */
-.ff-aidiag .is-accent .ff-aidiag__card {
-    fill: var(--color-indigo-50);
-    stroke: var(--color-indigo-600);
-}
-.ff-aidiag .is-accent .ff-aidiag__glyph {
-    stroke: var(--color-indigo-600);
-    stroke-width: 1.7;
-}
-.ff-aidiag .is-accent .ff-aidiag__label {
-    fill: var(--color-indigo-800);
-    font-weight: 500;
-}
-
-/* Static connector. Eleven of these scroll past on one page, so direction is
-   carried by an arrowhead rather than by animation - travelling dots at that count
-   read as eleven things moving at the reader. */
-.ff-aidiag__flow {
-    stroke: var(--color-indigo-300);
-    stroke-width: 2;
-    stroke-linecap: round;
-}
-.ff-aidiag__arrowhead {
-    fill: var(--color-indigo-300);
-}
-
-/* "Coming soon" pill: shape and type only. The amber colour comes from utility
-   classes on the element (bg-amber-50 / text-amber-700 / border-amber-200), so
-   the palette stays in sync with the design tokens. Amber reads as
-   in-development, not the error-red it used before. */
-.ff-cap-soon {
-    display: inline-flex;
-    align-items: center;
-    font-size: 0.6875rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    padding: 0.125rem 0.5rem;
-    border-radius: 9999px;
-}
-
-/* Capability blocks are informational, not interactive: no hover fill, no
-   focus ring, no click affordance. The rounded corners are cosmetic only. */
-.ff-cap-item {
-    border-radius: 0.5rem;
-}
-
 /* Top utility bar (AppUtilityBar.vue). These rules once lived in an inline <style>
    in the Eleventy include only, which left the Nuxt bar without the hover underline.
    Deliberately unlayered, so the hover rule outranks the hover:no-underline utility

From 876b01dff6b01e33fbc2cfa4ea4e43fb35e4e0f6 Mon Sep 17 00:00:00 2001
From: Kristopher <kristopherleads@gmail.com>
Date: Fri, 16 Oct 2026 13:36:01 -0700
Subject: [PATCH 4/4] Delete nuxt/components/AiCapabilityDiagram.vue

---
 nuxt/components/AiCapabilityDiagram.vue | 214 ------------------------
 1 file changed, 214 deletions(-)
 delete mode 100644 nuxt/components/AiCapabilityDiagram.vue

diff --git a/nuxt/components/AiCapabilityDiagram.vue b/nuxt/components/AiCapabilityDiagram.vue
deleted file mode 100644
index cc19b0464d..0000000000
--- a/nuxt/components/AiCapabilityDiagram.vue
+++ /dev/null
@@ -1,214 +0,0 @@
-<script setup lang="ts">
-// The schematic that fills each capability's media well on /ai.
-//
-// Shared three-column spine - something goes in, the platform does something to
-// it, something comes out - because that is genuinely the shape of every
-// capability on the page, and eleven unrelated drawings would undercut the
-// section's own argument that these all run on one platform.
-//
-// What makes them not-flat is per-column iconography: each column carries a glyph
-// drawn for its subject (a camera for RTSP ingest, a chip for a model, a shield
-// for RBAC). Neutral card for the parts that are yours, accent card for the
-// FlowFuse piece. Connectors are static arrows - eleven of these scroll past on
-// one page, so nothing here moves.
-const props = defineProps<{ kind: string }>()
-
-// Marker ids are document-global and eleven of these render on one page, so each
-// instance needs its own or they would collide.
-const uid = useId()
-const arrowId = computed(() => `aidiag-arrow-${uid}`)
-
-// A wide, short frame: 720x150. The width is deliberate - the well spans its
-// column, so the viewBox has to be wide enough that the cards fill that width
-// rather than being scaled up to reach it. The earlier 480-wide frame stretched by
-// ~1.4x at column width and took its type up with it, which is what made the
-// labels look oversized; at 720 the scale factor is roughly 1.
-const COLS = [
-    { x: 34, w: 180 },
-    { x: 270, w: 180 },
-    { x: 506, w: 180 },
-]
-const CARD_Y = 20
-const CARD_H = 110
-const FLOW_Y = CARD_Y + CARD_H / 2
-const GLYPH_Y = CARD_Y + 32
-const LABEL_MID = CARD_Y + 78
-const LINE_H = 17
-
-// Line glyphs on a 24x24 grid, scaled and centred into each card. Stroke-only, so
-// they inherit the card's colour and turn indigo on the accent column for free.
-const GLYPHS: Record<string, string[]> = {
-    prompt: ['M3 5h18v11H8l-5 4z'],
-    answer: ['M3 5h18v11H8l-5 4z', 'M7 9h10', 'M7 12.5h6'],
-    expert: ['M10 3l1.5 4.2L15.7 8.7l-4.2 1.5L10 14.4 8.5 10.2 4.3 8.7l4.2-1.5z', 'M17.5 14l.9 2.4 2.4.9-2.4.9-.9 2.4-.9-2.4-2.4-.9 2.4-.9z'],
-    flow: ['M3 5.5h5v4H3z', 'M16 14.5h5v4h-5z', 'M8 7.5h3a2 2 0 012 2v5a2 2 0 002 2h1'],
-    app: ['M3 4h18v16H3z', 'M3 9h18', 'M9 9v11'],
-    blueprint: ['M4 4h16v16H4z', 'M8.5 8.5h7v7h-7z'],
-    agent: ['M6.5 8h11v8h-11z', 'M12 4.5V8', 'M9.8 11.8h.01', 'M14.2 11.8h.01'],
-    tools: ['M14.5 5.5a4 4 0 105 5l-9.2 9.2-3-3z'],
-    docs: ['M6 3h9l4 4v14H6z', 'M15 3v4h4', 'M9 12h7', 'M9 15.5h5'],
-    approve: ['M12 3a9 9 0 100 18 9 9 0 000-18z', 'M8 12l3 3 5-6'],
-    machine: ['M12 8.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7z', 'M12 2.5v3.5', 'M12 18v3.5', 'M2.5 12H6', 'M18 12h3.5', 'M5.2 5.2l2.5 2.5', 'M16.3 16.3l2.5 2.5', 'M18.8 5.2l-2.5 2.5', 'M7.7 16.3l-2.5 2.5'],
-    live: ['M3 17l4.5-6.5L12 14l4-8 5 11'],
-    camera: ['M3 8h4l2-2h6l2 2h4v12H3z', 'M12 12.5a3.2 3.2 0 100 6.4 3.2 3.2 0 000-6.4z'],
-    inspect: ['M4 8.5V4h4.5', 'M15.5 4H20v4.5', 'M20 15.5V20h-4.5', 'M8.5 20H4v-4.5', 'M9 10h6v4H9z'],
-    model: ['M6.5 6.5h11v11h-11z', 'M9.5 3v3.5', 'M14.5 3v3.5', 'M9.5 17.5V21', 'M14.5 17.5V21', 'M3 9.5h3.5', 'M3 14.5h3.5', 'M17.5 9.5H21', 'M17.5 14.5H21'],
-    key: ['M15 6.5a4 4 0 11-3.8 5.2H8.5l-2.5 2.5v3H3.5v-3l4-4h3.7A4 4 0 0115 6.5z'],
-    plug: ['M9 3v6', 'M15 3v6', 'M6 9h12v2.5a6 6 0 01-12 0z', 'M12 17.5V21'],
-    shield: ['M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z', 'M9 12l2 2 4-4.5'],
-    platform: ['M3 5h18v5H3z', 'M3 14h18v5H3z', 'M6.5 7.5h.01', 'M6.5 16.5h.01'],
-    terminal: ['M3.5 4.5h17v15h-17z', 'M8 9.5l2.5 2.5L8 14.5', 'M12.5 14.5h4'],
-}
-
-type Col = { glyph: string, lines: string[], accent?: boolean }
-type Spec = { alt: string, cols: [Col, Col, Col] }
-
-const SPECS: Record<string, Spec> = {
-    'assisted-engineering': {
-        alt: 'Plain language goes to FlowFuse Expert, which produces a working Node-RED flow.',
-        cols: [
-            { glyph: 'prompt', lines: ['Plain', 'language'] },
-            { glyph: 'expert', lines: ['FlowFuse', 'Expert'], accent: true },
-            { glyph: 'flow', lines: ['Working', 'flow'] },
-        ],
-    },
-    'prompt-to-app': {
-        alt: 'A described application goes to FlowFuse Expert, which builds a draft in your workspace.',
-        cols: [
-            { glyph: 'prompt', lines: ['Describe', 'the app'] },
-            { glyph: 'expert', lines: ['Expert', 'builds it'], accent: true },
-            { glyph: 'app', lines: ['Draft in your', 'workspace'] },
-        ],
-    },
-    'build-agents': {
-        alt: 'An agent blueprint becomes your own agent, grounded in your data and tools.',
-        cols: [
-            { glyph: 'blueprint', lines: ['Agent', 'blueprint'] },
-            { glyph: 'agent', lines: ['Your', 'agent'], accent: true },
-            { glyph: 'tools', lines: ['Your data', 'and tools'] },
-        ],
-    },
-    'product-knowledge': {
-        alt: 'Your question is answered from FlowFuse and Node-RED documentation, without leaving the workspace.',
-        cols: [
-            { glyph: 'prompt', lines: ['Your', 'question'] },
-            { glyph: 'docs', lines: ['FlowFuse and', 'Node-RED docs'], accent: true },
-            { glyph: 'answer', lines: ['Answer in', 'context'] },
-        ],
-    },
-    'governed-operations': {
-        alt: 'AI proposes a change, a person approves it, and only then does it reach the machine.',
-        cols: [
-            { glyph: 'agent', lines: ['AI', 'proposes'], accent: true },
-            { glyph: 'approve', lines: ['A person', 'approves'] },
-            { glyph: 'machine', lines: ['Change', 'lands'] },
-        ],
-    },
-    'ask-your-plant': {
-        alt: 'A natural language question is answered from live machine state, alarms and logs.',
-        cols: [
-            { glyph: 'prompt', lines: ['Your', 'question'] },
-            { glyph: 'live', lines: ['Live machine', 'state'], accent: true },
-            { glyph: 'answer', lines: ['Answer,', 'grounded'] },
-        ],
-    },
-    'visual-inspection': {
-        alt: 'A camera feed over RTSP runs through an ONNX model at the edge, producing a pass or fail.',
-        cols: [
-            { glyph: 'camera', lines: ['Camera', 'over RTSP'] },
-            { glyph: 'model', lines: ['ONNX model', 'at the edge'], accent: true },
-            { glyph: 'inspect', lines: ['Pass', 'or fail'] },
-        ],
-    },
-    'any-model': {
-        alt: 'Your flow calls a certified LLM node, using your own model and your own key.',
-        cols: [
-            { glyph: 'flow', lines: ['Your', 'flow'] },
-            { glyph: 'model', lines: ['Certified', 'LLM node'], accent: true },
-            { glyph: 'key', lines: ['Your model,', 'your key'] },
-        ],
-    },
-    'bring-your-agent': {
-        alt: 'Copilot, ChatGPT or Claude connects over MCP and reaches your teams and instances.',
-        cols: [
-            { glyph: 'agent', lines: ['Copilot, ChatGPT', 'or Claude'] },
-            { glyph: 'plug', lines: ['MCP', 'connector'], accent: true },
-            { glyph: 'platform', lines: ['Your teams', 'and instances'] },
-        ],
-    },
-    'you-decide': {
-        alt: 'Your agent is held to the permissions and role-based access control you granted it.',
-        cols: [
-            { glyph: 'agent', lines: ['Your', 'agent'] },
-            { glyph: 'shield', lines: ['Permissions', 'and RBAC'], accent: true },
-            { glyph: 'approve', lines: ['Only what', 'you allowed'] },
-        ],
-    },
-    'your-tools': {
-        alt: 'Your flows become an MCP server, and an agent calls the tools you registered.',
-        cols: [
-            { glyph: 'flow', lines: ['Your', 'flows'] },
-            { glyph: 'platform', lines: ['MCP', 'server'], accent: true },
-            { glyph: 'terminal', lines: ['Agent calls', 'your tools'] },
-        ],
-    },
-}
-
-const spec = computed(() => SPECS[props.kind])
-
-// 24x24 glyph scaled to 26 and centred over its card.
-const GLYPH_SCALE = 26 / 24
-function glyphTransform (i: number) {
-    const cx = COLS[i].x + COLS[i].w / 2
-    return `translate(${cx - 13}, ${GLYPH_Y - 13}) scale(${GLYPH_SCALE})`
-}
-
-function labelY (lineCount: number, index: number) {
-    const top = LABEL_MID - ((lineCount - 1) * LINE_H) / 2
-    return top + index * LINE_H + 5
-}
-</script>
-
-<template>
-  <svg v-if="spec" class="ff-aidiag" viewBox="0 0 720 150" role="img" :aria-label="spec.alt">
-    <defs>
-      <marker :id="arrowId" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
-        <path d="M0 1l7 4-7 4z" class="ff-aidiag__arrowhead" />
-      </marker>
-    </defs>
-
-    <!-- Connectors first, so each card paints over their ends. -->
-    <line
-      v-for="gap in [0, 1]"
-      :key="`flow-${gap}`"
-      class="ff-aidiag__flow"
-      :x1="COLS[gap].x + COLS[gap].w + 8"
-      :y1="FLOW_Y"
-      :x2="COLS[gap + 1].x - 12"
-      :y2="FLOW_Y"
-      :marker-end="`url(#${arrowId})`"
-    />
-
-    <g v-for="(col, i) in spec.cols" :key="`col-${i}`" :class="{ 'is-accent': col.accent }">
-      <rect
-        class="ff-aidiag__card"
-        :x="COLS[i].x"
-        :y="CARD_Y"
-        :width="COLS[i].w"
-        :height="CARD_H"
-        rx="14"
-      />
-      <g class="ff-aidiag__glyph" :transform="glyphTransform(i)">
-        <path v-for="(d, pi) in GLYPHS[col.glyph]" :key="`g-${pi}`" :d="d" />
-      </g>
-      <text
-        v-for="(line, li) in col.lines"
-        :key="`line-${li}`"
-        class="ff-aidiag__label"
-        :x="COLS[i].x + COLS[i].w / 2"
-        :y="labelY(col.lines.length, li)"
-        text-anchor="middle"
-      >{{ line }}</text>
-    </g>
-  </svg>
-</template>