From 6ada1adc47a0c7d7d426d2f37d00ee08d51391c1 Mon Sep 17 00:00:00 2001
From: Kristopher <kristopherleads@gmail.com>
Date: Thu, 20 Aug 2026 12:09:39 -0700
Subject: [PATCH 01/11] Create index.vue

---
 nuxt/pages/product/how-it-works/index.vue | 292 ++++++++++++++++++++++
 1 file changed, 292 insertions(+)
 create mode 100644 nuxt/pages/product/how-it-works/index.vue

diff --git a/nuxt/pages/product/how-it-works/index.vue b/nuxt/pages/product/how-it-works/index.vue
new file mode 100644
index 0000000000..eb93886215
--- /dev/null
+++ b/nuxt/pages/product/how-it-works/index.vue
@@ -0,0 +1,292 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'how-it-works' })
+useSeoMeta({
+  title: 'How FlowFuse Works',
+  description: 'Understand FlowFuse and why it matters: what it is, the pieces you build with, how it fits every team, why it pays off, and a worked example — a guided tour for buyers and champions, with links to the full technical documentation.',
+  ogUrl: 'https://flowfuse.com/product/how-it-works/',
+  twitterSite: '@FlowFuseinc',
+})
+const capture = useCapture()
+
+function jump (e: MouseEvent, slug: string) {
+  const el = document.getElementById(slug)
+  if (!el) return
+  e.preventDefault()
+  el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  history.replaceState(null, '', `#${slug}`)
+}
+
+const whyDifferent = [
+  { title: 'Open, Not a Black Box', body: 'Built on open-source Node-RED. You can see and change how everything works.' },
+  { title: 'Yours to Own', body: 'Run it on your infrastructure or ours. Your flows are portable — no lock-in.' },
+  { title: 'The Layer Above Your Data', body: 'It sits on top of the brokers, historians and machines you already run.' },
+]
+
+const corePieces = [
+  { title: 'Instances', body: 'Your Node-RED runtimes — in the cloud, on your server, or on edge hardware. Same platform, wherever they live.' },
+  { title: 'Team Broker', body: 'A shared message bus — your Unified Namespace — that ties data together across lines, sites and systems.' },
+  { title: 'Tables', body: 'One shared operational database, built in. No separate service to stand up.' },
+  { title: 'Dashboards', body: 'Operator-facing screens for the people who actually run the line.' },
+  { title: 'Device & Fleet Management', body: 'Deploy, update and roll back across many devices, lines and plants from one place.' },
+  { title: 'Governance & Security', body: 'SSO, role-based access and audit built in — the enterprise controls IT expects.' },
+]
+
+const teams = [
+  { key: 'ot', badge: 'FlowFuse Edge · OT', name: 'Run the Plant Floor', who: 'OT & digitalization teams', builds: ['Connect PLCs, machines & controllers', 'Standardize automation across every site', 'Run apps right at the edge'], value: 'One way to automate — every plant.' },
+  { key: 'it', badge: 'FlowFuse Hub · IT', name: 'Move Data Across the Business', who: 'Central IT & enterprise architects', builds: ['Integrate ERPs, databases & cloud APIs', 'Govern centrally, not app by app', 'Serve the whole organisation'], value: 'One governed integration layer.' },
+  { key: 'fleet', badge: 'FlowFuse Fleet', name: 'Manage a Fleet of Devices', who: 'OEMs, partners & asset operators', builds: ['Ship & roll back flows remotely', 'Update thousands of devices at once', 'One live view across the field'], value: 'Update the fleet without a truck roll.' },
+]
+
+const values = [
+  { icon: 'bolt', grad: 'linear-gradient(135deg,#6366f1,#4338ca)', title: 'Speed to Value', body: 'First app running in days, not a multi-year project. Reuse building blocks and ship changes through pipelines.' },
+  { icon: 'layers', grad: 'linear-gradient(135deg,#14b8a6,#0d9488)', title: 'One Platform, Every Team', body: 'OT, IT and field teams build on the same governed foundation — no silos, one standard.' },
+  { icon: 'lock', grad: 'linear-gradient(135deg,#fb7185,#DA3D0B)', title: 'Own It, No Lock-In', body: 'Open and built on Node-RED. Run it on your infrastructure or ours, and take your work with you.' },
+  { icon: 'scale', grad: 'linear-gradient(135deg,#a78bfa,#7c3aed)', title: 'Scales Without Breaking', body: 'From one line to thousands of sites and devices — the same pieces, centrally managed.' },
+]
+
+const workedPieces = [
+  { title: 'Edge Block', body: 'Reads machine signals at the edge and publishes state. Built once, rolled out to every line.' },
+  { title: 'Team Broker', body: 'Carries machine state from edge to cloud. The edge publishes; the cloud app subscribes.' },
+  { title: 'Data-Driven App', body: 'Computes availability, performance and quality, and shows the OEE dashboard.' },
+  { title: 'Time-Series DB', body: 'Every reading is written so trends can be charted over time.' },
+]
+
+const storiesTeam = [
+  { slug: 'scaling-industrial-iot-operations-while-maintaining-competitive-edge', name: 'Walter', note: 'Connected machines and scaled operations without adding IT overhead.', image: '/images/stories/walter.png' },
+  { slug: 'energinet-streamlining-critical-infrastructure-data-management', name: 'Energinet', note: "Governs real-time data across 7,000 km of Denmark's power grid.", image: '/images/stories/energinet.jpg' },
+]
+const storiesPayoff = [
+  { slug: 'scaling-manufacturing-automation-with-flowfuse', name: 'Arch Systems', note: 'Automated 100+ databases and scaled real-time manufacturing data.', image: '/images/stories/arch_systems.jpeg' },
+  { slug: 'manufacturing-digital-transformation', name: 'Large US Manufacturer', note: 'Deployed thousands of instances across the enterprise.', image: '/images/stories/large-us-manufacturing.jpg' },
+]
+const storiesAction = [
+  { slug: 'leveraging-node-red-and-flowfuse-to-automate-precision-manufacturing', name: 'Abrasive Technology', note: 'Automated precision manufacturing and streamlined machine communication.', image: '/images/stories/abrasive_tech.jpg' },
+  { slug: 'opto22-embraces-node-red', name: 'Opto 22', note: 'Brought flow-based automation into their hardware platform.', image: '/images/stories/opto22.jpg' },
+]
+</script>
+
+<template>
+  <div class="hiw-page">
+    <!-- ===================== HERO ===================== -->
+    <div class="hiw-hero">
+      <span class="hiw-pill">How It Works</span>
+      <h1 class="hiw-hero__title">Understand FlowFuse — <span class="text-indigo-600">And Why It's Yours</span></h1>
+      <p class="hiw-hero__lead">A five-minute tour of what FlowFuse is, how it fits the way your team works, and why it pays off. No jargon — just the understanding you need to know if it's right for you. When you want the technical detail, every stop links to the full documentation.</p>
+      <a class="hiw-hero__start" href="#what-flowfuse-is" @click="jump($event, 'what-flowfuse-is')">Take the Tour <span aria-hidden="true">&darr;</span></a>
+    </div>
+
+    <!-- ===================== 01 WHAT FLOWFUSE IS ===================== -->
+    <section id="what-flowfuse-is" class="hiw-section hiw-sec--it">
+      <div class="hiw-section__head">
+        <span class="hiw-section__step hiw-step--it">01</span>
+        <div class="hiw-section__intro">
+          <span class="hiw-persona-chip hiw-persona-chip--it">The Big Idea</span>
+          <h2 class="hiw-section__title">What FlowFuse Is</h2>
+          <p class="hiw-section__lead">FlowFuse is the industrial application platform — the place you build the applications that actually run your operation. It sits on top of the data and machines you already have, and unlike a closed product, it's open and yours to own.</p>
+        </div>
+        <HiwSectionShare slug="what-flowfuse-is" />
+      </div>
+
+      <div class="hiw-stack">
+        <div class="hiw-stack__layer">
+          <div class="hiw-stack__label">What You Build</div>
+          <div class="hiw-stack__title">Your Applications<small>OEE, dashboards, integrations, alerts, MES-style apps</small></div>
+        </div>
+        <div class="hiw-stack__arrow" aria-hidden="true">&uarr; runs on</div>
+        <div class="hiw-stack__layer hiw-stack__layer--you">
+          <span class="hiw-stack__own">You Own This</span>
+          <div class="hiw-stack__label">The Platform</div>
+          <div class="hiw-stack__title">FlowFuse<small>build · deploy · govern — on managed Node-RED</small></div>
+        </div>
+        <div class="hiw-stack__arrow" aria-hidden="true">&uarr; sits on</div>
+        <div class="hiw-stack__layer">
+          <div class="hiw-stack__label">What You Already Have</div>
+          <div class="hiw-stack__title">Your Data &amp; Machines<small>PLCs, sensors, brokers, historians, ERPs</small></div>
+        </div>
+      </div>
+
+      <h3 class="hiw-h3">Why That's Different</h3>
+      <div class="hiw-cards">
+        <div v-for="w in whyDifferent" :key="w.title" class="hiw-cardp">
+          <div class="hiw-cardp__title">{{ w.title }}</div>
+          <div class="hiw-cardp__body">{{ w.body }}</div>
+        </div>
+      </div>
+
+      <HiwGoDeeper :links="[{ slug: 'foundations', title: 'Foundations' }]" />
+    </section>
+
+    <div class="hiw-divider" aria-hidden="true"></div>
+
+    <!-- ===================== 02 BUILDING BLOCKS ===================== -->
+    <section id="building-blocks" class="hiw-section hiw-sec--it">
+      <div class="hiw-section__head">
+        <span class="hiw-section__step hiw-step--it">02</span>
+        <div class="hiw-section__intro">
+          <span class="hiw-persona-chip hiw-persona-chip--it">The Building Blocks</span>
+          <h2 class="hiw-section__title">The Pieces You Build With</h2>
+          <p class="hiw-section__lead">Every FlowFuse application — however big — is assembled from the same six pieces. Learn these and you understand the whole platform.</p>
+        </div>
+        <HiwSectionShare slug="building-blocks" />
+      </div>
+
+      <div class="hiw-diagram" role="img" aria-label="FlowFuse platform: services bridge through the Device Agent to remote instances on edge hardware.">
+        <div class="hiw-lane hiw-lane--it">
+          <div class="hiw-lane__label">The Platform — Runs and Connects Everything</div>
+          <div class="hiw-nodes">
+            <div class="hiw-node hiw-node--it"><b>Instances</b><small>cloud or edge</small></div>
+            <div class="hiw-node hiw-node--it"><b>Dashboards</b><small>live operator UI</small></div>
+            <div class="hiw-node hiw-node--broker"><b>Team Broker</b><small>your UNS</small></div>
+            <div class="hiw-node hiw-node--it"><b>Tables</b><small>shared database</small></div>
+          </div>
+        </div>
+        <HiwFlow tone="indigo" label="Device Agent — bridges the platform to the edge" />
+        <div class="hiw-lane hiw-lane--edge">
+          <div class="hiw-lane__label">Your Machines &amp; Data</div>
+          <div class="hiw-nodes">
+            <div class="hiw-node hiw-node--muted"><b>PLCs</b><small>controllers</small></div>
+            <div class="hiw-node hiw-node--muted"><b>Sensors</b><small>signals</small></div>
+            <div class="hiw-node hiw-node--muted"><b>Historians</b><small>time-series</small></div>
+            <div class="hiw-node hiw-node--muted"><b>ERPs / APIs</b><small>business systems</small></div>
+          </div>
+        </div>
+      </div>
+
+      <h3 class="hiw-h3">The Six Pieces</h3>
+      <div class="hiw-cards">
+        <div v-for="c in corePieces" :key="c.title" class="hiw-cardp">
+          <div class="hiw-cardp__title">{{ c.title }}</div>
+          <div class="hiw-cardp__body">{{ c.body }}</div>
+        </div>
+      </div>
+
+      <HiwGoDeeper :links="[{ slug: 'foundations', title: 'Foundations' }, { slug: 'data-plane', title: 'Data Plane' }]" />
+    </section>
+
+    <div class="hiw-divider" aria-hidden="true"></div>
+
+    <!-- ===================== 03 FITS EVERY TEAM ===================== -->
+    <section id="fits-your-team" class="hiw-section hiw-sec--all">
+      <div class="hiw-section__head">
+        <span class="hiw-section__step hiw-step--all">03</span>
+        <div class="hiw-section__intro">
+          <span class="hiw-persona-chip hiw-persona-chip--all">OT · IT · Fleet</span>
+          <h2 class="hiw-section__title">It Fits Every Team</h2>
+          <p class="hiw-section__lead">The plant floor, the business systems, and the devices in the field are different worlds — but the same platform and the same building blocks serve all three. That's how one company standardizes on FlowFuse instead of a tool per team.</p>
+        </div>
+        <HiwSectionShare slug="fits-your-team" />
+      </div>
+
+      <div class="hiw-tri">
+        <div v-for="t in teams" :key="t.key" class="hiw-tri__col" :class="`hiw-tri__col--${t.key}`">
+          <span class="hiw-tri__badge">{{ t.badge }}</span>
+          <div class="hiw-tri__name">{{ t.name }}</div>
+          <div class="hiw-tri__who">{{ t.who }}</div>
+          <ul class="hiw-tri__list">
+            <li v-for="b in t.builds" :key="b">{{ b }}</li>
+          </ul>
+          <div class="hiw-tri__value">{{ t.value }}</div>
+        </div>
+      </div>
+
+      <HiwStories :items="storiesTeam" />
+
+      <HiwGoDeeper :links="[{ slug: 'hardware-apps', title: 'Hardware Apps' }, { slug: 'software-apps', title: 'Software Apps' }, { slug: 'ot-architectures', title: 'OT Architectures' }, { slug: 'it-architectures', title: 'IT Architectures' }, { slug: 'iiot-architectures', title: 'IIoT Architectures' }]" />
+    </section>
+
+    <div class="hiw-divider" aria-hidden="true"></div>
+
+    <!-- ===================== 04 WHY IT PAYS OFF ===================== -->
+    <section id="build-and-own" class="hiw-section hiw-sec--it">
+      <div class="hiw-section__head">
+        <span class="hiw-section__step hiw-step--it">04</span>
+        <div class="hiw-section__intro">
+          <span class="hiw-persona-chip hiw-persona-chip--it">The Payoff</span>
+          <h2 class="hiw-section__title">Why It Pays Off</h2>
+          <p class="hiw-section__lead">Anyone can connect a PLC to a dashboard once. The reason teams standardize on FlowFuse is what happens next — shipping fast, governing centrally, scaling everywhere, and never getting locked in.</p>
+        </div>
+        <HiwSectionShare slug="build-and-own" />
+      </div>
+
+      <div class="hiw-values">
+        <div v-for="v in values" :key="v.title" class="hiw-value">
+          <span class="hiw-value__ic" :style="{ background: v.grad }" aria-hidden="true">
+            <svg v-if="v.icon === 'bolt'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 3L5 13h6l-1 8 7-11h-6l1-7z" stroke-linejoin="round"/></svg>
+            <svg v-else-if="v.icon === 'layers'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M12 3l9 5-9 5-9-5 9-5z" stroke-linejoin="round"/><path d="M3 12l9 5 9-5M3 16.5l9 5 9-5" stroke-linejoin="round"/></svg>
+            <svg v-else-if="v.icon === 'lock'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="5" y="10.5" width="14" height="9" rx="1.6"/><path d="M8 10.5V7a4 4 0 017.5-1.9" stroke-linecap="round"/></svg>
+            <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          </span>
+          <div class="hiw-value__title">{{ v.title }}</div>
+          <div class="hiw-value__body">{{ v.body }}</div>
+        </div>
+      </div>
+
+      <HiwStories :items="storiesPayoff" />
+
+      <HiwGoDeeper :links="[{ slug: 'app-delivery-methods', title: 'App Delivery Methods' }, { slug: 'architectures', title: 'Architectures' }]" />
+    </section>
+
+    <div class="hiw-divider" aria-hidden="true"></div>
+
+    <!-- ===================== 05 SEE IT IN ACTION ===================== -->
+    <section id="in-action" class="hiw-section hiw-sec--fleet">
+      <div class="hiw-section__head">
+        <span class="hiw-section__step hiw-step--fleet">05</span>
+        <div class="hiw-section__intro">
+          <span class="hiw-persona-chip hiw-persona-chip--fleet">End to End</span>
+          <h2 class="hiw-section__title">See It in Action</h2>
+          <p class="hiw-section__lead">Here's every piece working together in one real application: OEE — how much good product a line makes versus its potential — from the machine at the edge to a live dashboard in the cloud.</p>
+        </div>
+        <HiwSectionShare slug="in-action" />
+      </div>
+
+      <div class="hiw-diagram">
+        <div class="hiw-lane hiw-lane--ot">
+          <div class="hiw-lane__label">At the Edge — Built Once, Rolled Out per Line</div>
+          <div class="hiw-nodes"><div class="hiw-node hiw-node--ot"><b>Line A</b><small>Edge block</small></div><div class="hiw-node hiw-node--ot"><b>Line B</b><small>Edge block</small></div><div class="hiw-node hiw-node--ot"><b>Line C</b><small>Edge block</small></div></div>
+        </div>
+        <HiwFlow tone="ot" label="Publish machine state over MQTT / UNS" />
+        <div class="hiw-lane hiw-lane--broker">
+          <div class="hiw-lane__label">Team Broker</div>
+          <div class="hiw-nodes"><div class="hiw-node hiw-node--broker"><b>Machine State</b><small>edge &rarr; cloud</small></div></div>
+        </div>
+        <HiwFlow tone="broker" label="Subscribe · Write History" />
+        <div class="hiw-lane hiw-lane--it">
+          <div class="hiw-lane__label">In the Cloud</div>
+          <div class="hiw-nodes"><div class="hiw-node hiw-node--it"><b>Data-Driven App</b><small>computes + shows OEE</small></div><div class="hiw-node hiw-node--it"><b>Time-Series DB</b><small>history &amp; trends</small></div></div>
+        </div>
+      </div>
+
+      <div class="hiw-cards">
+        <div v-for="p in workedPieces" :key="p.title" class="hiw-cardp">
+          <div class="hiw-cardp__title">{{ p.title }}</div>
+          <div class="hiw-cardp__body">{{ p.body }}</div>
+        </div>
+      </div>
+      <p class="hiw-p">Four pieces, two connections — and you can see how the same pattern powers everything from energy monitoring to full MES.</p>
+
+      <HiwStories :items="storiesAction" />
+
+      <HiwGoDeeper :links="[{ slug: 'worked-example', title: 'Worked Example' }]" />
+    </section>
+
+    <div class="hiw-divider" aria-hidden="true"></div>
+
+    <!-- ===================== FIND YOUR FIT ===================== -->
+    <div id="find-your-fit" class="hiw-fitwrap">
+      <HiwFit />
+    </div>
+
+    <!-- ===================== CTA ===================== -->
+    <div class="hiw-cta">
+      <div class="rounded-xl px-9 py-12 flex flex-col items-center gap-6 text-center ff-get-started-bg">
+        <p class="text-white text-3xl sm:text-4xl font-medium m-0 max-w-2xl">That's FlowFuse. Now See It Built for Your Plant.</p>
+        <p class="text-indigo-50 font-light text-lg max-w-2xl m-0">Bring a use case and we'll show you how it works for you, start to finish.</p>
+        <div class="flex flex-col sm:flex-row gap-4 items-center">
+          <CtaBookDemo variant="highlight" position="how-it-works" />
+          <a class="ff-btn" href="/pricing/" @click="capture('cta-pricing', { position: 'how-it-works' })"><span class="text-base uppercase text-white hover:text-gray-200">View Pricing</span></a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

From ccff832c5523622b336d1098dc71693e81eb1698 Mon Sep 17 00:00:00 2001
From: Kristopher <kristopherleads@gmail.com>
Date: Thu, 20 Aug 2026 12:10:11 -0700
Subject: [PATCH 02/11] Add how-it-works layout with navigation and progress

---
 nuxt/layouts/how-it-works.vue | 75 +++++++++++++++++++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 nuxt/layouts/how-it-works.vue

diff --git a/nuxt/layouts/how-it-works.vue b/nuxt/layouts/how-it-works.vue
new file mode 100644
index 0000000000..3d7c422ede
--- /dev/null
+++ b/nuxt/layouts/how-it-works.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+// Single-page guide layout: normal FlowFuse chrome, a sticky section nav on the left,
+// the content in the middle, and a reading-progress rail on the right. Scroll-spy and
+// progress are computed here and passed down, so the rails track one scrolling page.
+import '~/assets/css/how-it-works.css'
+
+const activeId = ref('')
+const progress = ref(0)
+let observer: IntersectionObserver | null = null
+let onScroll: (() => void) | null = null
+
+onMounted(() => {
+  const sections = Array.from(document.querySelectorAll<HTMLElement>('.hiw-section[id]'))
+  if (sections.length) {
+    activeId.value = sections[0].id
+    observer = new IntersectionObserver((entries) => {
+      entries.forEach((e) => { if (e.isIntersecting) activeId.value = (e.target as HTMLElement).id })
+    }, { rootMargin: '-45% 0px -50% 0px', threshold: 0 })
+    sections.forEach(s => observer!.observe(s))
+  }
+  const content = document.getElementById('hiw-content')
+  onScroll = () => {
+    if (!content) return
+    const total = content.offsetHeight - window.innerHeight
+    const scrolled = Math.max(0, -content.getBoundingClientRect().top)
+    progress.value = Math.round(Math.min(100, Math.max(0, (scrolled / Math.max(total, 1)) * 100)))
+  }
+  window.addEventListener('scroll', onScroll, { passive: true })
+  onScroll()
+})
+onBeforeUnmount(() => {
+  observer?.disconnect()
+  if (onScroll) window.removeEventListener('scroll', onScroll)
+})
+</script>
+
+<template>
+  <div class="font-sans ff-website leading-normal tracking-normal text-gray-500 min-h-screen flex flex-col">
+    <a href="#hiw-content" class="skip-to-main">Skip to main content</a>
+    <AppUtilityBar />
+    <AppHeader />
+    <div class="flex-grow base bg-white">
+      <div class="hiw-shell">
+        <aside class="hiw-sidebar">
+          <div class="hiw-sidebar__inner"><HiwLeftNav :active="activeId" /></div>
+        </aside>
+        <main id="hiw-content" class="hiw-main">
+          <div class="hiw-topbar"><HiwShare /></div>
+          <slot />
+        </main>
+        <aside class="hiw-rail">
+          <div class="hiw-rail__inner"><HiwProgress :progress="progress" :active="activeId" /></div>
+        </aside>
+      </div>
+    </div>
+    <AppFooter />
+  </div>
+</template>
+
+<style scoped>
+.hiw-shell { max-width: 86rem; margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1fr; }
+.hiw-sidebar, .hiw-rail { display: none; }
+.hiw-main { min-width: 0; padding: 0 1.5rem; }
+.hiw-topbar { display: flex; justify-content: flex-end; padding-top: 1.25rem; }
+@media (min-width: 1024px) {
+  .hiw-shell { grid-template-columns: 220px minmax(0, 1fr); column-gap: 2rem; }
+  .hiw-sidebar { display: block; }
+  .hiw-sidebar__inner { position: sticky; top: 1.25rem; max-height: calc(100vh - 2.5rem); overflow-y: auto; padding: 1.75rem 0 1.75rem 1.5rem; }
+}
+@media (min-width: 1280px) {
+  .hiw-shell { grid-template-columns: 220px minmax(0, 1fr) 200px; }
+  .hiw-rail { display: block; }
+  .hiw-rail__inner { position: sticky; top: 1.75rem; padding: 1.75rem 0; }
+}
+</style>

From 9fefeb1880fbbc247e356d1b7c068ba76acebdda Mon Sep 17 00:00:00 2001
From: Kristopher <kristopherleads@gmail.com>
Date: Thu, 20 Aug 2026 12:10:52 -0700
Subject: [PATCH 03/11] Add HIW_BASE constant and HiwSection interface

Defines constants and types for the How It Works sections.
---
 nuxt/utils/hiwSections.ts | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 nuxt/utils/hiwSections.ts

diff --git a/nuxt/utils/hiwSections.ts b/nuxt/utils/hiwSections.ts
new file mode 100644
index 0000000000..da36bc4f9b
--- /dev/null
+++ b/nuxt/utils/hiwSections.ts
@@ -0,0 +1,23 @@
+export const HIW_BASE = '/product/how-it-works'
+
+export type HiwTone = 'ot' | 'it' | 'fleet' | 'all'
+export interface HiwSection {
+  slug: string
+  title: string
+  persona: string
+  blurb: string
+  tone: HiwTone
+}
+
+export const HIW_SECTIONS: HiwSection[] = [
+  { slug: 'what-flowfuse-is', title: 'What FlowFuse Is', persona: 'The Big Idea', tone: 'it',
+    blurb: 'The platform where you build the applications that run your operation — open, and yours to own.' },
+  { slug: 'building-blocks', title: 'The Pieces You Build With', persona: 'The Building Blocks', tone: 'it',
+    blurb: 'Six pieces make up every FlowFuse application. Learn these and you understand the whole platform.' },
+  { slug: 'fits-your-team', title: 'It Fits Every Team', persona: 'OT · IT · Fleet', tone: 'all',
+    blurb: 'Plant floor, business systems, or devices in the field — one platform, arranged for how each team works.' },
+  { slug: 'build-and-own', title: 'Why It Pays Off', persona: 'The Payoff', tone: 'it',
+    blurb: 'Ship in days, govern centrally, scale without rework — and never get locked in.' },
+  { slug: 'in-action', title: 'See It in Action', persona: 'End to End', tone: 'fleet',
+    blurb: 'One real application — OEE from the edge to the dashboard — with every piece working together.' },
+]

From fc111b7749ebc83f9d0ef1522732fbcdeaa2fc69 Mon Sep 17 00:00:00 2001
From: Kristopher <kristopherleads@gmail.com>
Date: Thu, 20 Aug 2026 12:11:35 -0700
Subject: [PATCH 04/11] Create how-it-works.css

---
 nuxt/assets/css/how-it-works.css | 219 +++++++++++++++++++++++++++++++
 1 file changed, 219 insertions(+)
 create mode 100644 nuxt/assets/css/how-it-works.css

diff --git a/nuxt/assets/css/how-it-works.css b/nuxt/assets/css/how-it-works.css
new file mode 100644
index 0000000000..f5b9052c8a
--- /dev/null
+++ b/nuxt/assets/css/how-it-works.css
@@ -0,0 +1,219 @@
+/* Article shell */
+.hiw-article { max-width: 46rem; padding: 2.25rem 0 4rem; }
+.hiw-crumb { display: flex; gap: .5rem; align-items: center; font-size: .8rem; color: #9ca3af; }
+.hiw-crumb a { color: #4f46e5; text-decoration: none; }
+.hiw-crumb a:hover { text-decoration: underline; }
+.hiw-crumb__track { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .72rem; color: #4f46e5; }
+.hiw-crumb__track[data-track="node-red"] { color: #0d9488; }
+.hiw-title { font-size: 2.25rem; font-weight: 700; line-height: 1.15; margin: 1rem 0 0; color: #111827; }
+.hiw-lead { margin: .75rem 0 0; font-size: 1.15rem; color: #6b7280; line-height: 1.5; }
+.hiw-h2 { font-size: 1.5rem; font-weight: 700; margin: 2.5rem 0 1rem; color: #111827; }
+.hiw-p { color: #4b5563; line-height: 1.55; margin: 1rem 0 0; }
+
+/* Pill */
+.hiw-pill { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #4f46e5; background: #eef2ff; border: 1px solid #e0e4ff; border-radius: 9999px; padding: .3rem .8rem; }
+
+/* ── Single-page structure: hero, numbered sections, step badges ── */
+.hiw-page { padding-bottom: 1rem; }
+
+/* Hero — vibrant gradient panel */
+.hiw-hero { position: relative; margin-top: 1.5rem; padding: 3rem 2.25rem 2.75rem; border-radius: 1.5rem; overflow: hidden; color: #fff; background: linear-gradient(135deg, #4f46e5 0%, #6d28d9 55%, #221a63 100%); box-shadow: 0 24px 60px rgba(79,70,229,0.25); }
+.hiw-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(55% 90% at 100% -10%, rgba(255,110,74,0.35), transparent 60%), radial-gradient(45% 80% at -10% 120%, rgba(13,148,136,0.4), transparent 60%); }
+.hiw-hero > * { position: relative; z-index: 1; }
+.hiw-hero .hiw-pill { color: #fff; background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.28); }
+.hiw-hero__title { font-size: 2.5rem; line-height: 1.08; font-weight: 800; color: #fff; letter-spacing: -0.02em; margin: 1rem 0 0; }
+.hiw-hero__title .text-indigo-600 { color: #c7d2fe !important; }
+@media (min-width: 640px) { .hiw-hero__title { font-size: 3rem; } }
+.hiw-hero__lead { font-size: 1.12rem; color: rgba(255,255,255,0.86); line-height: 1.55; margin: 1.1rem 0 0; max-width: 42rem; }
+.hiw-hero__start { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.6rem; background: #fff; color: #4338ca; font-weight: 700; font-size: .9rem; padding: .7rem 1.35rem; border-radius: 9999px; text-decoration: none; box-shadow: 0 10px 24px rgba(2,6,13,0.25); transition: transform .12s ease; }
+.hiw-hero__start:hover { transform: translateY(-1px); text-decoration: none; }
+.hiw-hero__start span { transition: transform .15s ease; }
+.hiw-hero__start:hover span { transform: translateY(2px); }
+
+/* Sections — tone-coded, with a colour-tinted header panel */
+.hiw-section { scroll-margin-top: 96px; padding: 2.25rem 0; --tone: #64748b; --tone-tint: #f1f5f9; --tone-line: #e2e8f0; }
+.hiw-sec--it { --tone: #4f46e5; --tone-tint: #eef2ff; --tone-line: #e0e4ff; }
+.hiw-sec--ot { --tone: #DA3D0B; --tone-tint: #ffe8e5; --tone-line: #ffd7cc; }
+.hiw-sec--fleet { --tone: #0d9488; --tone-tint: #e6faf6; --tone-line: #b8efe2; }
+.hiw-sec--all { --tone: #64748b; --tone-tint: #f1f5f9; --tone-line: #e2e8f0; }
+.hiw-section__head { display: flex; gap: 1.1rem; align-items: flex-start; margin-bottom: 1.5rem; padding: 1.3rem 1.45rem; border-radius: 1rem; background: linear-gradient(105deg, var(--tone-tint), rgba(255,255,255,0) 80%); border: 1px solid var(--tone-line); border-left: 4px solid var(--tone); }
+.hiw-section__step { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .8rem; font-size: 1rem; font-weight: 800; color: #fff; box-shadow: 0 4px 12px rgba(2,6,13,0.12); }
+.hiw-step--all { background: linear-gradient(135deg, #94a3b8, #64748b); }
+.hiw-step--it { background: linear-gradient(135deg, #6366f1, #4338ca); box-shadow: 0 4px 12px rgba(79,70,229,0.28); }
+.hiw-step--ot { background: linear-gradient(135deg, #f97316, #DA3D0B); box-shadow: 0 4px 12px rgba(218,61,11,0.28); }
+.hiw-step--fleet { background: linear-gradient(135deg, #14b8a6, #0d9488); box-shadow: 0 4px 12px rgba(13,148,136,0.28); }
+.hiw-section__intro { min-width: 0; flex: 1; }
+.hiw-section__intro .hiw-persona-chip { display: inline-block; margin-bottom: .5rem; }
+.hiw-section__title { font-size: 1.85rem; font-weight: 800; color: #0f172a; letter-spacing: -0.02em; margin: 0; }
+.hiw-section__lead { font-size: 1.05rem; color: #475569; line-height: 1.55; margin: .5rem 0 0; }
+.hiw-section__head .hiw-secshare { flex: none; align-self: flex-start; }
+.hiw-h3 { font-size: 1.05rem; font-weight: 800; color: #334155; margin: 1.75rem 0 .5rem; }
+.hiw-cta { padding: 2.5rem 0 3rem; }
+
+/* ── Layer stack (what FlowFuse is / you own this) ── */
+.hiw-stack { display: flex; flex-direction: column; gap: .4rem; margin-top: 1.15rem; }
+.hiw-stack__layer { position: relative; border-radius: .9rem; padding: 1.1rem 1.3rem; border: 1px solid #e7e9ee; background: #fff; }
+.hiw-stack__label { font-size: .64rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #94a3b8; }
+.hiw-stack__title { font-weight: 700; color: #0f172a; margin-top: .15rem; }
+.hiw-stack__title small { display: block; font-weight: 400; font-size: .84rem; color: #64748b; margin-top: .2rem; }
+.hiw-stack__layer--you { background: linear-gradient(120deg, #4f46e5, #6d28d9); border: 0; box-shadow: 0 16px 36px rgba(79,70,229,0.28); }
+.hiw-stack__layer--you .hiw-stack__label { color: rgba(255,255,255,0.72); }
+.hiw-stack__layer--you .hiw-stack__title { color: #fff; }
+.hiw-stack__layer--you .hiw-stack__title small { color: rgba(255,255,255,0.82); }
+.hiw-stack__own { position: absolute; top: 1.05rem; right: 1.2rem; font-size: .64rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.38); border-radius: 9999px; padding: .28rem .6rem; }
+.hiw-stack__arrow { text-align: center; color: #cbd5e1; font-size: .95rem; line-height: 1; padding: .1rem 0; }
+
+/* ── Tri-team panel (fits every team) ── */
+.hiw-tri { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.15rem; }
+@media (min-width: 720px) { .hiw-tri { grid-template-columns: repeat(3, 1fr); } }
+.hiw-tri__col { border: 1px solid #e7e9ee; border-top: 4px solid var(--c); border-radius: .9rem; padding: 1.3rem 1.35rem; background: #fff; box-shadow: 0 1px 2px rgba(2,6,13,0.04); }
+.hiw-tri__col--ot { --c: #DA3D0B; }
+.hiw-tri__col--it { --c: #4f46e5; }
+.hiw-tri__col--fleet { --c: #0d9488; }
+.hiw-tri__badge { display: inline-block; font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--c); border-radius: 9999px; padding: .26rem .6rem; }
+.hiw-tri__col--ot .hiw-tri__badge { background: #ffe8e5; }
+.hiw-tri__col--it .hiw-tri__badge { background: #eef2ff; }
+.hiw-tri__col--fleet .hiw-tri__badge { background: #e6faf6; }
+.hiw-tri__name { font-size: 1.15rem; font-weight: 800; color: #0f172a; margin-top: .65rem; }
+.hiw-tri__who { font-size: .82rem; color: #64748b; margin-top: .15rem; }
+.hiw-tri__list { list-style: none; margin: .95rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
+.hiw-tri__list li { display: flex; gap: .5rem; font-size: .86rem; color: #374151; align-items: flex-start; line-height: 1.4; }
+.hiw-tri__list li::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 2px; margin-top: .35rem; background: var(--c); }
+.hiw-tri__value { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid #f0f1f4; font-size: .85rem; font-weight: 700; color: var(--c); }
+
+/* ── Value cards (why it pays off) ── */
+.hiw-values { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.15rem; }
+.hiw-value { border: 1px solid #e7e9ee; border-radius: .9rem; padding: 1.3rem 1.35rem; background: #fff; box-shadow: 0 1px 2px rgba(2,6,13,0.04); transition: box-shadow .18s ease, transform .12s ease; }
+.hiw-value:hover { box-shadow: 0 12px 28px rgba(2,6,13,0.08); transform: translateY(-2px); }
+.hiw-value__ic { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .75rem; color: #fff; margin-bottom: .8rem; box-shadow: 0 4px 12px rgba(2,6,13,0.14); }
+.hiw-value__ic svg { width: 1.35rem; height: 1.35rem; }
+.hiw-value__title { font-weight: 800; color: #0f172a; letter-spacing: -0.01em; }
+.hiw-value__body { font-size: .86rem; color: #64748b; line-height: 1.5; margin-top: .35rem; }
+
+/* Hub: tracks + cards */
+.hiw-track__head { border-top: 3px solid #4f46e5; padding-top: 1rem; margin-bottom: 1.25rem; }
+.hiw-track--nr .hiw-track__head { border-top-color: #0d9488; }
+.hiw-track__eyebrow { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #4f46e5; }
+.hiw-track__eyebrow[data-track="node-red"] { color: #0d9488; }
+.hiw-track__lead { margin: .35rem 0 0; font-size: 1.35rem; font-weight: 600; color: #111827; letter-spacing: -0.01em; }
+.hiw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
+.hiw-card { position: relative; display: flex; flex-direction: column; border: 1px solid #e5e7eb; border-radius: .85rem; padding: 1.25rem 1.35rem; background: #fff; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
+.hiw-card:hover { border-color: #c7d2fe; box-shadow: 0 10px 26px rgba(2,6,13,0.08); text-decoration: none; }
+.hiw-card__num { font-size: .75rem; font-weight: 800; color: #c7cbd4; letter-spacing: .05em; }
+.hiw-card__num[data-track="node-red"] { color: #99e6da; }
+.hiw-card__title { font-size: 1.05rem; font-weight: 700; color: #111827; margin-top: .3rem; }
+.hiw-card__blurb { font-size: .86rem; color: #6b7280; line-height: 1.45; margin-top: .35rem; }
+.hiw-card__arrow { color: #a5b4fc; margin-top: .75rem; font-weight: 700; }
+.hiw-card:hover .hiw-card__arrow { color: #4f46e5; }
+
+/* Persona cards (hub) — colour-coded by the buyer they speak to */
+.hiw-pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
+.hiw-pcard { --tone: #4f46e5; --tone-tint: #eef2ff; position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid #e5e7eb; border-top: 3px solid var(--tone); border-radius: .9rem; padding: 1.35rem 1.4rem; text-decoration: none; transition: border-color .15s ease, box-shadow .18s ease, transform .12s ease; }
+.hiw-pcard:hover { box-shadow: 0 14px 32px rgba(2,6,13,0.10); transform: translateY(-2px); text-decoration: none; border-color: #d7dbe3; }
+.hiw-pcard--ot { --tone: #DA3D0B; --tone-tint: #ffe8e5; }
+.hiw-pcard--it { --tone: #4f46e5; --tone-tint: #eef2ff; }
+.hiw-pcard--fleet { --tone: #0d9488; --tone-tint: #e6faf6; }
+.hiw-pcard--all { --tone: #64748b; --tone-tint: #f1f5f9; }
+.hiw-pcard__persona { align-self: flex-start; font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--tone); background: var(--tone-tint); border-radius: 9999px; padding: .28rem .6rem; }
+.hiw-pcard__title { font-size: 1.15rem; font-weight: 700; color: #111827; margin-top: .8rem; }
+.hiw-pcard__blurb { font-size: .88rem; color: #6b7280; line-height: 1.5; margin-top: .4rem; }
+.hiw-pcard__go { margin-top: 1rem; font-size: .84rem; font-weight: 700; color: var(--tone); display: inline-flex; align-items: center; gap: .3rem; }
+.hiw-pcard:hover .hiw-pcard__go { gap: .5rem; }
+
+/* Section-page persona chip (in the crumb row) */
+.hiw-persona-chip { font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; border-radius: 9999px; padding: .28rem .6rem; }
+.hiw-persona-chip--ot { color: #DA3D0B; background: #ffe8e5; }
+.hiw-persona-chip--it { color: #4f46e5; background: #eef2ff; }
+.hiw-persona-chip--fleet { color: #0d9488; background: #e6faf6; }
+.hiw-persona-chip--all { color: #64748b; background: #f1f5f9; }
+
+/* Diagram — polished marketing flow figure */
+.hiw-diagram { position: relative; border: 1px solid #e6e8f0; border-radius: 1.25rem; padding: 1.9rem 1.75rem 1.6rem; margin-top: 1.25rem; overflow: hidden; background: radial-gradient(130% 130% at 50% -15%, #ffffff 0%, #f3f5fc 72%); box-shadow: 0 12px 34px rgba(2,6,13,0.06), inset 0 1px 0 #fff; display: flex; flex-direction: column; }
+.hiw-diagram::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(79,70,229,0.07) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.4), transparent 72%); mask-image: linear-gradient(180deg, rgba(0,0,0,0.4), transparent 72%); }
+.hiw-diagram > * { position: relative; z-index: 1; }
+.hiw-lane { position: relative; border-radius: 1rem; padding: 1.5rem 1.15rem 1.15rem; border: 1px solid var(--l-line, #e6e8f0); background: var(--l-bg, #fff); }
+.hiw-lane--it { --l-bg: linear-gradient(180deg, rgba(99,102,241,0.08), rgba(99,102,241,0.015)); --l-line: rgba(99,102,241,0.22); --l-dot: #6366f1; }
+.hiw-lane--ot { --l-bg: linear-gradient(180deg, rgba(218,61,11,0.07), rgba(218,61,11,0.015)); --l-line: rgba(218,61,11,0.22); --l-dot: #DA3D0B; }
+.hiw-lane--edge { --l-bg: linear-gradient(180deg, rgba(100,116,139,0.09), rgba(100,116,139,0.02)); --l-line: rgba(100,116,139,0.22); --l-dot: #64748b; }
+.hiw-lane--broker { --l-bg: linear-gradient(180deg, rgba(13,148,136,0.09), rgba(13,148,136,0.02)); --l-line: rgba(13,148,136,0.24); --l-dot: #0d9488; }
+.hiw-lane__label { position: absolute; top: -.72rem; left: 1rem; display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: .63rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #475569; background: #fff; border: 1px solid var(--l-line); border-radius: 9999px; padding: .32rem .7rem; box-shadow: 0 1px 2px rgba(2,6,13,0.05); }
+.hiw-lane__label::before { content: ""; width: .5rem; height: .5rem; border-radius: 9999px; background: var(--l-dot); }
+.hiw-nodes { display: flex; flex-wrap: wrap; gap: .6rem; }
+.hiw-node { flex: 1 1 128px; min-width: 116px; position: relative; border-radius: .7rem; padding: .75rem .85rem; background: linear-gradient(180deg, #fff, #fdfdff); border: 1px solid #e7e9f2; box-shadow: 0 2px 6px rgba(2,6,13,0.06); display: flex; flex-direction: column; gap: .12rem; transition: transform .12s ease, box-shadow .15s ease; }
+.hiw-node:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(2,6,13,0.09); }
+.hiw-node::before { content: ""; position: absolute; left: 0; top: .7rem; bottom: .7rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--n, #cbd5e1); }
+.hiw-node b { font-size: .84rem; color: #0f172a; font-weight: 700; letter-spacing: -0.01em; padding-left: .35rem; }
+.hiw-node small { font-size: .7rem; color: #94a3b8; padding-left: .35rem; }
+.hiw-node--it { --n: #6366f1; }
+.hiw-node--ot { --n: #DA3D0B; }
+.hiw-node--broker { --n: #0d9488; }
+.hiw-node--muted { --n: #cbd5e1; }
+/* connector between lanes: a subtle guide line + a chevron */
+.hiw-link { position: relative; width: max-content; max-width: 92%; margin: 1.15rem auto; padding: .42rem .9rem; border-radius: 9999px; background: #fff; border: 1px solid #e2e6f0; box-shadow: 0 2px 6px rgba(2,6,13,0.06); font-size: .63rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #64748b; text-align: center; }
+.hiw-link::before { content: ""; position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); width: 2px; height: .75rem; background: #cfd5e6; }
+.hiw-link::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #cfd5e6; }
+.hiw-legend { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid #eef0f3; font-size: .72rem; color: #64748b; font-weight: 600; }
+.hiw-legend span { display: inline-flex; align-items: center; gap: .4rem; }
+.hiw-dot { width: .7rem; height: .7rem; border-radius: 3px; display: inline-block; }
+.hiw-dot--it { background: #6366f1; }
+.hiw-dot--ot { background: #DA3D0B; }
+.hiw-dot--broker { background: #0d9488; }
+.hiw-dot--muted { background: #cbd5e1; }
+.hiw-figcap { font-size: .8rem; color: #94a3b8; margin-top: .7rem; }
+
+/* Section divider — hairline with a soft gradient node */
+.hiw-divider { position: relative; height: 1px; margin: 3.75rem 0; background: linear-gradient(90deg, transparent, #e1e5f0 18%, #e1e5f0 82%, transparent); }
+.hiw-divider::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 9999px; transform: translate(-50%, -50%) rotate(45deg); background: linear-gradient(135deg, #a5b4fc, #6366f1); box-shadow: 0 0 0 4px #fff, 0 0 0 5px #eef0f7; }
+
+/* Core-piece / concept cards */
+.hiw-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .85rem; margin-top: 1.1rem; }
+.hiw-cardp { border: 1px solid #e7e9ee; border-radius: .8rem; padding: 1.1rem 1.2rem; background: #fff; box-shadow: 0 1px 2px rgba(2,6,13,0.04); transition: box-shadow .18s ease, transform .12s ease, border-color .18s ease; }
+.hiw-cardp:hover { box-shadow: 0 12px 26px rgba(2,6,13,0.08); transform: translateY(-2px); border-color: #dde0e7; }
+.hiw-cardp__title { font-weight: 700; color: #4338ca; font-size: .95rem; letter-spacing: -0.01em; }
+.hiw-cardp__body { font-size: .86rem; color: #6b7280; line-height: 1.5; margin-top: .35rem; }
+
+/* Definition table (Node-RED core pieces) */
+.hiw-deflist { margin-top: 1rem; border: 1px solid #e5e7eb; border-radius: .7rem; overflow: hidden; }
+.hiw-deflist > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: .8rem 1rem; border-top: 1px solid #f0f0f4; }
+.hiw-deflist > div:first-child { border-top: 0; }
+.hiw-deflist dt { font-weight: 700; color: #111827; font-size: .88rem; margin: 0; }
+.hiw-deflist dd { margin: 0; font-size: .86rem; color: #6b7280; line-height: 1.45; }
+
+/* Shape / pattern blocks — polished spec cards (Use it when / How it works / Watch out) */
+.hiw-shape { border: 1px solid #e7e9ee; border-radius: .9rem; padding: 1.4rem 1.5rem; background: #fff; margin-top: 1.1rem; box-shadow: 0 1px 2px rgba(2,6,13,0.04); transition: box-shadow .18s ease, border-color .18s ease; }
+.hiw-shape:hover { box-shadow: 0 12px 30px rgba(2,6,13,0.07); border-color: #dde0e7; }
+.hiw-shape__head { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }
+.hiw-shape__title { font-size: 1.2rem; font-weight: 700; color: #111827; margin: 0; letter-spacing: -0.01em; }
+.hiw-shape__tag { font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #4f46e5; background: #eef2ff; border-radius: 9999px; padding: .28rem .62rem; }
+.hiw-shape__body { color: #4b5563; line-height: 1.55; margin: .7rem 0 0; font-size: .95rem; }
+/* the label/value block, styled as a clean spec panel */
+.hiw-meta { margin: 1.15rem 0 0; border-top: 1px solid #eef0f3; }
+.hiw-meta > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid #eef0f3; }
+.hiw-meta > div:last-child { border-bottom: 0; padding-bottom: .1rem; }
+.hiw-meta dt, .hiw-meta__label { position: relative; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #4f46e5; margin: .14rem 0 0; padding-left: .75rem; }
+.hiw-meta dt::before, .hiw-meta__label::before { content: ""; position: absolute; left: 0; top: .1rem; width: 3px; height: .72rem; border-radius: 2px; background: #a5b4fc; }
+.hiw-meta dd, .hiw-meta__val { margin: 0; font-size: .9rem; color: #374151; line-height: 1.5; }
+@media (max-width: 640px) { .hiw-meta > div { grid-template-columns: 1fr; gap: .3rem; padding: .7rem 0; } .hiw-meta dt::before, .hiw-meta__label::before { display: none; } .hiw-meta dt, .hiw-meta__label { padding-left: 0; } }
+
+/* Steps */
+.hiw-steps { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
+.hiw-steps li { display: flex; gap: .85rem; align-items: flex-start; }
+.hiw-steps__num { flex: none; width: 1.8rem; height: 1.8rem; border-radius: 9999px; background: linear-gradient(135deg, #6366f1, #4338ca); color: #fff; font-weight: 800; font-size: .85rem; display: grid; place-items: center; box-shadow: 0 3px 8px rgba(79,70,229,0.28); }
+.hiw-steps__title { font-weight: 700; color: #111827; }
+.hiw-steps__body { font-size: .88rem; color: #6b7280; line-height: 1.45; margin-top: .1rem; }
+
+.hiw-inline { color: #4f46e5; text-decoration: none; }
+.hiw-inline:hover { text-decoration: underline; }
+
+/* Callout note */
+.hiw-note { margin-top: 2rem; border: 1px solid #e0e4ff; background: #f8f9ff; border-left: 4px solid #4f46e5; border-radius: .6rem; padding: 1.1rem 1.25rem; }
+.hiw-note__label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #4f46e5; margin-bottom: .4rem; }
+.hiw-note a { display: inline-block; margin-top: .6rem; }
+
+/* Pager */
+.hiw-pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; border-top: 1px solid #f0f0f4; padding-top: 1.25rem; }
+.hiw-pager__link { display: flex; flex-direction: column; text-decoration: none; border: 1px solid #e5e7eb; border-radius: .6rem; padding: .75rem 1rem; min-width: 45%; transition: border-color .15s ease; }
+.hiw-pager__link:hover { border-color: #c7d2fe; text-decoration: none; }
+.hiw-pager__link--next { text-align: right; margin-left: auto; }
+.hiw-pager__dir { font-size: .74rem; color: #9ca3af; font-weight: 600; }
+.hiw-pager__title { font-weight: 700; color: #4f46e5; }

From 3b6daaabc029bd482f8cde6594211896e13ec9a6 Mon Sep 17 00:00:00 2001
From: Kristopher <kristopherleads@gmail.com>
Date: Thu, 20 Aug 2026 12:12:23 -0700
Subject: [PATCH 05/11] Add files via upload

---
 nuxt/components/HiwFit.vue          | 199 ++++++++++++++++++++++++++++
 nuxt/components/HiwFlow.vue         |  49 +++++++
 nuxt/components/HiwGoDeeper.vue     |  41 ++++++
 nuxt/components/HiwLeftNav.vue      |  43 ++++++
 nuxt/components/HiwProgress.vue     |  74 +++++++++++
 nuxt/components/HiwSectionShare.vue |  49 +++++++
 nuxt/components/HiwShare.vue        |  61 +++++++++
 nuxt/components/HiwStories.vue      |  45 +++++++
 8 files changed, 561 insertions(+)
 create mode 100644 nuxt/components/HiwFit.vue
 create mode 100644 nuxt/components/HiwFlow.vue
 create mode 100644 nuxt/components/HiwGoDeeper.vue
 create mode 100644 nuxt/components/HiwLeftNav.vue
 create mode 100644 nuxt/components/HiwProgress.vue
 create mode 100644 nuxt/components/HiwSectionShare.vue
 create mode 100644 nuxt/components/HiwShare.vue
 create mode 100644 nuxt/components/HiwStories.vue

diff --git a/nuxt/components/HiwFit.vue b/nuxt/components/HiwFit.vue
new file mode 100644
index 0000000000..bed21ecd3a
--- /dev/null
+++ b/nuxt/components/HiwFit.vue
@@ -0,0 +1,199 @@
+<script setup lang="ts">
+// Guided product-fit finder. Four questions map an answer to Edge / Hub / Fleet
+// using the same discriminators as the product pages (data origin, unit of scale,
+// sponsoring team, protocol needs). Highest score wins; Q1 (data origin) is weighted.
+const capture = useCapture()
+
+type Tier = 'edge' | 'hub' | 'fleet'
+const TONE: Record<Tier, string> = { edge: '#DA3D0B', hub: '#6366f1', fleet: '#14b8a6' }
+
+interface Q { q: string; weight?: number; options: { label: string; tier: Tier }[] }
+const questions: Q[] = [
+  { q: 'Where does most of your data come from?', weight: 2, options: [
+    { label: 'Machines on the plant floor — PLCs, SCADA, sensors', tier: 'edge' },
+    { label: 'Software systems — ERPs, databases, cloud APIs', tier: 'hub' },
+    { label: 'Devices deployed across many remote sites', tier: 'fleet' },
+  ] },
+  { q: 'What are you trying to scale?', options: [
+    { label: 'Production and automation across one or more plants', tier: 'edge' },
+    { label: 'Governed integrations that serve the whole business', tier: 'hub' },
+    { label: 'A fleet of distributed devices, updated remotely', tier: 'fleet' },
+  ] },
+  { q: "Who's driving the project?", options: [
+    { label: 'An OT or digitalization team', tier: 'edge' },
+    { label: 'Central IT or an integration team', tier: 'hub' },
+    { label: 'A hardware OEM or asset operator shipping a product', tier: 'fleet' },
+  ] },
+  { q: 'Do you need industrial protocol connectivity — OPC-UA, Modbus, EtherNet/IP?', options: [
+    { label: 'Yes — connecting to industrial hardware is core', tier: 'edge' },
+    { label: "No — it's software-to-software integration", tier: 'hub' },
+    { label: 'It lives on the devices we ship and manage', tier: 'fleet' },
+  ] },
+]
+
+const results: Record<Tier, { label: string; eyebrow: string; why: string }> = {
+  edge: { label: 'FlowFuse Edge', eyebrow: 'For OT & Digitalization Teams', why: "Your data starts at the machines, and you're standardizing production across the plant floor." },
+  hub: { label: 'FlowFuse Hub', eyebrow: 'For IT & Integration Teams', why: "You're building governed integration between software systems, sponsored by central IT." },
+  fleet: { label: 'FlowFuse Fleet', eyebrow: 'For Hardware OEMs & Asset Operators', why: 'Distributed devices are your unit of scale — you need remote updates, rollback, and fleet-wide visibility.' },
+}
+
+const ORDER: Tier[] = ['edge', 'hub', 'fleet']
+const maxScore = questions.reduce((n, q) => n + (q.weight ?? 1), 0)
+
+const step = ref(0)
+const answers = ref<(Tier | null)[]>(Array(questions.length).fill(null))
+
+const answeredCount = computed(() => answers.value.filter(Boolean).length)
+const finished = computed(() => answers.value.every(Boolean))
+const progress = computed(() => Math.round((answeredCount.value / questions.length) * 100))
+
+const scores = computed(() => {
+  const s: Record<Tier, number> = { edge: 0, hub: 0, fleet: 0 }
+  answers.value.forEach((a, i) => { if (a) s[a] += questions[i].weight ?? 1 })
+  return s
+})
+const best = computed<Tier>(() => {
+  const s = scores.value
+  let top = ORDER[0]
+  for (const t of ORDER) if (s[t] > s[top]) top = t
+  const tied = ORDER.filter(t => s[t] === s[top])
+  if (tied.length > 1 && answers.value[0]) return answers.value[0] as Tier
+  return top
+})
+const others = computed(() => ORDER.filter(t => t !== best.value))
+
+function choose (tier: Tier) {
+  answers.value[step.value] = tier
+  capture('hiw-fit-answer', { step: step.value + 1, choice: tier })
+  if (step.value < questions.length - 1) setTimeout(() => { step.value++ }, 170)
+  else capture('hiw-fit-result', { result: best.value })
+}
+function back () { if (step.value > 0) step.value-- }
+function restart () { answers.value = Array(questions.length).fill(null); step.value = 0; capture('hiw-fit-restart', {}) }
+</script>
+
+<template>
+  <div class="hiw-fit">
+    <div class="hiw-fit__head">
+      <span class="hiw-fit__eyebrow">Find Your Fit</span>
+      <h2 class="hiw-fit__title">Which FlowFuse Is Right for You?</h2>
+      <p class="hiw-fit__sub">Answer four quick questions and we'll point you to the right product to start with — Edge, Hub, or Fleet.</p>
+    </div>
+
+    <div class="hiw-fit__bar" role="progressbar" :aria-valuenow="progress" aria-valuemin="0" aria-valuemax="100">
+      <span :style="{ width: progress + '%' }"></span>
+    </div>
+
+    <Transition name="fit" mode="out-in">
+      <!-- QUESTION -->
+      <div v-if="!finished" :key="step" class="hiw-fit__card">
+        <div class="hiw-fit__count">Question {{ step + 1 }} of {{ questions.length }}</div>
+        <div class="hiw-fit__q">{{ questions[step].q }}</div>
+        <div class="hiw-fit__opts">
+          <button
+            v-for="o in questions[step].options"
+            :key="o.label"
+            type="button"
+            class="hiw-fit__opt"
+            :class="{ 'is-picked': answers[step] === o.tier }"
+            :style="{ '--t': TONE[o.tier] }"
+            @click="choose(o.tier)"
+          >
+            <span class="hiw-fit__optdot" aria-hidden="true"></span>
+            <span class="hiw-fit__optlabel">{{ o.label }}</span>
+            <svg class="hiw-fit__optarrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          </button>
+        </div>
+        <button v-if="step > 0" type="button" class="hiw-fit__back" @click="back">&larr; Back</button>
+      </div>
+
+      <!-- RESULT -->
+      <div v-else key="result" class="hiw-fit__result" :style="{ '--t': TONE[best] }">
+        <div class="hiw-fit__resulthead">
+          <span class="hiw-fit__resulteyebrow">Your best fit</span>
+          <div class="hiw-fit__resultname">{{ results[best].label }}</div>
+          <div class="hiw-fit__resultrole">{{ results[best].eyebrow }}</div>
+          <p class="hiw-fit__resultwhy">{{ results[best].why }}</p>
+        </div>
+
+        <div class="hiw-fit__scores">
+          <div v-for="t in ORDER" :key="t" class="hiw-fit__score" :class="{ 'is-best': t === best }" :style="{ '--t': TONE[t] }">
+            <span class="hiw-fit__scorelabel">{{ results[t].label.replace('FlowFuse ', '') }}</span>
+            <span class="hiw-fit__scoretrack"><span :style="{ width: (scores[t] / maxScore * 100) + '%' }"></span></span>
+          </div>
+        </div>
+
+        <div class="hiw-fit__actions">
+          <a class="hiw-fit__cta" :href="`/product/${best}/`" @click="capture('hiw-fit-explore', { result: best })">
+            Explore {{ results[best].label }} <span aria-hidden="true">&rarr;</span>
+          </a>
+          <div class="hiw-fit__also">
+            <span>Also worth a look:</span>
+            <a v-for="t in others" :key="t" :href="`/product/${t}/`" @click="capture('hiw-fit-other', { tier: t })">{{ results[t].label.replace('FlowFuse ', '') }}</a>
+          </div>
+        </div>
+
+        <button type="button" class="hiw-fit__restart" @click="restart">&#8635; Start over</button>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.hiw-fit { position: relative; border-radius: 1.5rem; padding: 2.25rem 2rem; overflow: hidden; background: radial-gradient(120% 120% at 0% 0%, #f5f7ff 0%, #ffffff 55%); border: 1px solid #e6e8f4; box-shadow: 0 18px 44px rgba(2,6,13,0.07); }
+.hiw-fit__head { text-align: center; max-width: 34rem; margin: 0 auto 1.5rem; }
+.hiw-fit__eyebrow { display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #6366f1; margin-bottom: .5rem; }
+.hiw-fit__title { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; color: #0f172a; margin: 0; }
+.hiw-fit__sub { font-size: .95rem; color: #64748b; margin: .5rem 0 0; }
+
+.hiw-fit__bar { max-width: 34rem; margin: 0 auto 1.4rem; height: 5px; border-radius: 9999px; background: #eceefb; overflow: hidden; }
+.hiw-fit__bar span { display: block; height: 100%; border-radius: 9999px; background: linear-gradient(90deg, #818cf8, #4f46e5); transition: width .4s cubic-bezier(.4,0,.2,1); }
+
+.hiw-fit__card { max-width: 40rem; margin: 0 auto; }
+.hiw-fit__count { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #94a3b8; text-align: center; }
+.hiw-fit__q { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; color: #0f172a; text-align: center; margin: .5rem 0 1.4rem; line-height: 1.3; }
+.hiw-fit__opts { display: flex; flex-direction: column; gap: .7rem; }
+.hiw-fit__opt { display: flex; align-items: center; gap: .85rem; width: 100%; text-align: left; padding: 1rem 1.15rem; border-radius: .9rem; border: 1.5px solid #e5e7f0; background: #fff; cursor: pointer; transition: border-color .16s ease, box-shadow .18s ease, transform .12s ease, background .16s ease; }
+.hiw-fit__opt:hover { border-color: var(--t); box-shadow: 0 10px 22px rgba(2,6,13,0.08); transform: translateY(-1px); }
+.hiw-fit__opt.is-picked { border-color: var(--t); background: color-mix(in srgb, var(--t) 7%, #fff); }
+.hiw-fit__optdot { flex: none; width: 1.15rem; height: 1.15rem; border-radius: 9999px; border: 2px solid #d5d9e6; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
+.hiw-fit__opt:hover .hiw-fit__optdot, .hiw-fit__opt.is-picked .hiw-fit__optdot { border-color: var(--t); background: var(--t); box-shadow: 0 0 0 4px color-mix(in srgb, var(--t) 18%, transparent); }
+.hiw-fit__optlabel { flex: 1; font-size: .95rem; font-weight: 500; color: #1e293b; line-height: 1.4; }
+.hiw-fit__optarrow { flex: none; width: 1.1rem; height: 1.1rem; color: var(--t); opacity: 0; transform: translateX(-4px); transition: opacity .16s ease, transform .16s ease; }
+.hiw-fit__opt:hover .hiw-fit__optarrow { opacity: 1; transform: translateX(0); }
+.hiw-fit__back { display: block; margin: 1.2rem auto 0; font-size: .82rem; font-weight: 600; color: #64748b; background: none; border: none; cursor: pointer; }
+.hiw-fit__back:hover { color: #4f46e5; }
+
+/* result */
+.hiw-fit__result { max-width: 40rem; margin: 0 auto; text-align: center; }
+.hiw-fit__resulthead { position: relative; border-radius: 1.1rem; padding: 1.6rem 1.5rem; background: color-mix(in srgb, var(--t) 8%, #fff); border: 1px solid color-mix(in srgb, var(--t) 28%, transparent); }
+.hiw-fit__resulthead::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 1.1rem 1.1rem 0 0; background: var(--t); }
+.hiw-fit__resulteyebrow { display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--t); }
+.hiw-fit__resultname { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; color: #0f172a; margin-top: .25rem; }
+.hiw-fit__resultrole { font-size: .82rem; font-weight: 600; color: #64748b; margin-top: .2rem; }
+.hiw-fit__resultwhy { font-size: .98rem; color: #334155; line-height: 1.55; margin: .8rem auto 0; max-width: 30rem; }
+
+.hiw-fit__scores { display: flex; flex-direction: column; gap: .5rem; margin: 1.4rem auto; max-width: 24rem; }
+.hiw-fit__score { display: grid; grid-template-columns: 4.5rem 1fr; align-items: center; gap: .7rem; opacity: .55; }
+.hiw-fit__score.is-best { opacity: 1; }
+.hiw-fit__scorelabel { font-size: .8rem; font-weight: 700; color: #334155; text-align: right; }
+.hiw-fit__scoretrack { height: 8px; border-radius: 9999px; background: #eef0f7; overflow: hidden; }
+.hiw-fit__scoretrack span { display: block; height: 100%; border-radius: 9999px; background: var(--t); transition: width .5s cubic-bezier(.4,0,.2,1); }
+
+.hiw-fit__actions { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
+.hiw-fit__cta { display: inline-flex; align-items: center; gap: .45rem; padding: .8rem 1.5rem; border-radius: 9999px; background: var(--t); color: #fff; font-weight: 700; font-size: .95rem; text-decoration: none; box-shadow: 0 8px 20px color-mix(in srgb, var(--t) 35%, transparent); transition: transform .12s ease, box-shadow .18s ease; }
+.hiw-fit__cta:hover { transform: translateY(-2px); box-shadow: 0 14px 28px color-mix(in srgb, var(--t) 42%, transparent); text-decoration: none; color: #fff; }
+.hiw-fit__also { font-size: .85rem; color: #94a3b8; display: inline-flex; flex-wrap: wrap; align-items: center; gap: .55rem; justify-content: center; }
+.hiw-fit__also a { font-weight: 700; color: #4338ca; text-decoration: none; }
+.hiw-fit__also a:hover { color: #4f46e5; text-decoration: underline; }
+.hiw-fit__restart { display: block; margin: 1.3rem auto 0; font-size: .82rem; font-weight: 600; color: #94a3b8; background: none; border: none; cursor: pointer; }
+.hiw-fit__restart:hover { color: #4f46e5; }
+
+/* transitions */
+.fit-enter-active, .fit-leave-active { transition: opacity .26s ease, transform .26s cubic-bezier(.4,0,.2,1); }
+.fit-enter-from { opacity: 0; transform: translateY(10px); }
+.fit-leave-to { opacity: 0; transform: translateY(-8px); }
+@media (prefers-reduced-motion: reduce) {
+  .fit-enter-active, .fit-leave-active, .hiw-fit__bar span, .hiw-fit__scoretrack span { transition: none; }
+}
+</style>
diff --git a/nuxt/components/HiwFlow.vue b/nuxt/components/HiwFlow.vue
new file mode 100644
index 0000000000..5cffea00a9
--- /dev/null
+++ b/nuxt/components/HiwFlow.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+// Animated flow connector between diagram lanes.
+// A faint track + continuously flowing dashes (stroke-dashoffset) + a GPU-driven
+// glow "packet" (transform: translateY) travelling the line. Reduced-motion aware.
+const props = defineProps<{ label: string; tone?: 'ot' | 'it' | 'fleet' | 'broker' | 'indigo' }>()
+const TONE: Record<string, string> = {
+  ot: '#DA3D0B', it: '#6366f1', fleet: '#14b8a6', broker: '#0d9488', indigo: '#6366f1',
+}
+const color = computed(() => TONE[props.tone ?? 'indigo'])
+</script>
+
+<template>
+  <div class="hiw-flow" :style="{ '--flow': color }">
+    <svg class="hiw-flow__svg" width="24" height="104" viewBox="0 0 24 104" preserveAspectRatio="none" aria-hidden="true">
+      <line x1="12" y1="2" x2="12" y2="102" class="hiw-flow__track" />
+      <line x1="12" y1="2" x2="12" y2="102" class="hiw-flow__dash" />
+    </svg>
+    <span class="hiw-flow__dot" aria-hidden="true"></span>
+    <span class="hiw-flow__pill">{{ label }}</span>
+    <svg class="hiw-flow__arrow" width="16" height="9" viewBox="0 0 16 9" aria-hidden="true">
+      <path d="M1.5 1.5L8 7.5l6.5-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
+  </div>
+</template>
+
+<style scoped>
+.hiw-flow { position: relative; height: 104px; display: grid; place-items: center; margin: .2rem 0; }
+.hiw-flow__svg { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 104px; overflow: visible; }
+.hiw-flow__track { stroke: #dfe3ee; stroke-width: 2; stroke-linecap: round; }
+.hiw-flow__dash { stroke: var(--flow); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 11; stroke-dashoffset: 0; opacity: .85; animation: hiw-flow-dash .85s linear infinite; }
+
+/* glow packet — transform-animated for buttery smoothness */
+.hiw-flow__dot { position: absolute; top: 0; left: 50%; width: 9px; height: 9px; border-radius: 9999px; background: var(--flow); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--flow) 55%, transparent); transform: translate(-50%, 0); animation: hiw-flow-dot 2.1s linear infinite; will-change: transform, opacity; }
+
+.hiw-flow__pill { position: relative; z-index: 2; padding: .42rem .9rem; border-radius: 9999px; background: #fff; border: 1px solid #e2e6f0; box-shadow: 0 2px 8px rgba(2,6,13,0.07); font-size: .63rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #64748b; text-align: center; max-width: 92%; }
+.hiw-flow__arrow { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); z-index: 1; color: var(--flow); opacity: .75; }
+
+@keyframes hiw-flow-dash { to { stroke-dashoffset: -13; } }
+@keyframes hiw-flow-dot {
+  0% { transform: translate(-50%, 2px); opacity: 0; }
+  14% { opacity: 1; }
+  86% { opacity: 1; }
+  100% { transform: translate(-50%, 96px); opacity: 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .hiw-flow__dash { animation: none; }
+  .hiw-flow__dot { display: none; }
+}
+</style>
diff --git a/nuxt/components/HiwGoDeeper.vue b/nuxt/components/HiwGoDeeper.vue
new file mode 100644
index 0000000000..9438c9098c
--- /dev/null
+++ b/nuxt/components/HiwGoDeeper.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+// End-of-section hand-off to the deep technical reference (Drew's Application Guide).
+// A tour stop consolidates several technical topics, so this takes a list of links.
+const props = defineProps<{ links: { slug: string; title: string }[] }>()
+const capture = useCapture()
+</script>
+
+<template>
+  <div class="hiw-godeeper">
+    <div class="hiw-godeeper__head">
+      <span class="hiw-godeeper__ic" aria-hidden="true">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M4 5.5A1.5 1.5 0 015.5 4H11v16H5.5A1.5 1.5 0 014 18.5v-13zM20 5.5A1.5 1.5 0 0018.5 4H13v16h5.5a1.5 1.5 0 001.5-1.5v-13z" stroke-linejoin="round"/></svg>
+      </span>
+      <div>
+        <div class="hiw-godeeper__eyebrow">Go deeper · technical reference</div>
+        <div class="hiw-godeeper__sub">The technical documentation covers the how-to in detail.</div>
+      </div>
+    </div>
+    <div class="hiw-godeeper__links">
+      <a
+        v-for="l in links"
+        :key="l.slug"
+        :href="`/application-guide/flowfuse/${l.slug}/`"
+        class="hiw-godeeper__link"
+        @click="capture('hiw-docs', { section: l.slug })"
+      >{{ l.title }} <span aria-hidden="true">&rarr;</span></a>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.hiw-godeeper { margin-top: 1.75rem; padding: 1.15rem 1.3rem; border-radius: .9rem; background: linear-gradient(105deg, #eef2ff, #f7f8ff 75%); border: 1px solid #e0e4ff; }
+.hiw-godeeper__head { display: flex; align-items: center; gap: .8rem; }
+.hiw-godeeper__ic { flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: .6rem; background: #fff; color: #4f46e5; border: 1px solid #e0e4ff; }
+.hiw-godeeper__ic svg { width: 1.2rem; height: 1.2rem; }
+.hiw-godeeper__eyebrow { font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6366f1; }
+.hiw-godeeper__sub { font-size: .85rem; color: #64748b; margin-top: .1rem; }
+.hiw-godeeper__links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
+.hiw-godeeper__link { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 600; color: #4338ca; background: #fff; border: 1px solid #dfe3f3; border-radius: 9999px; padding: .4rem .8rem; text-decoration: none; transition: border-color .15s ease, background .15s ease; }
+.hiw-godeeper__link:hover { border-color: #a5b4fc; background: #f5f7ff; text-decoration: none; }
+</style>
diff --git a/nuxt/components/HiwLeftNav.vue b/nuxt/components/HiwLeftNav.vue
new file mode 100644
index 0000000000..81a24227f0
--- /dev/null
+++ b/nuxt/components/HiwLeftNav.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+// In-page section nav for the single-page guide. `active` (the slug in view) comes
+// from the layout's scroll-spy. Clicking smooth-scrolls to the section.
+defineProps<{ active?: string }>()
+
+function go (e: MouseEvent, slug: string) {
+  const el = document.getElementById(slug)
+  if (!el) return
+  e.preventDefault()
+  el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  history.replaceState(null, '', `#${slug}`)
+}
+</script>
+
+<template>
+  <nav class="hiw-nav" aria-label="On this page">
+    <p class="hiw-nav__eyebrow">The guide</p>
+    <ol class="hiw-nav__list">
+      <li v-for="(s, i) in HIW_SECTIONS" :key="s.slug">
+        <a
+          :href="`#${s.slug}`"
+          class="hiw-nav__link"
+          :class="{ 'hiw-nav__link--active': active === s.slug }"
+          @click="go($event, s.slug)"
+        >
+          <span class="hiw-nav__num">{{ String(i + 1).padStart(2, '0') }}</span>
+          <span class="hiw-nav__text">{{ s.title }}</span>
+        </a>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<style scoped>
+.hiw-nav { font-size: .875rem; }
+.hiw-nav__eyebrow { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #9ca3af; margin: 0 0 .8rem; }
+.hiw-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .05rem; }
+.hiw-nav__link { display: flex; align-items: baseline; gap: .6rem; padding: .4rem .7rem; border-radius: .45rem; color: #64748b; text-decoration: none; border-left: 2px solid transparent; line-height: 1.3; transition: color .12s ease, background .12s ease; }
+.hiw-nav__link:hover { color: #111827; background: #f5f6f8; text-decoration: none; }
+.hiw-nav__num { font-size: .66rem; font-weight: 800; color: #cbd5e1; letter-spacing: .04em; flex: none; }
+.hiw-nav__link--active { color: #4338ca; background: #eef2ff; border-left-color: #4f46e5; font-weight: 600; }
+.hiw-nav__link--active .hiw-nav__num { color: #4f46e5; }
+</style>
diff --git a/nuxt/components/HiwProgress.vue b/nuxt/components/HiwProgress.vue
new file mode 100644
index 0000000000..8f1e30dc77
--- /dev/null
+++ b/nuxt/components/HiwProgress.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+// Reading-progress rail. `progress` (0–100) and `active` (slug in view) come from the layout.
+const props = defineProps<{ progress?: number; active?: string }>()
+const activeIndex = computed(() => {
+  const i = HIW_SECTIONS.findIndex(s => s.slug === props.active)
+  return i < 0 ? 0 : i
+})
+function go (e: MouseEvent, slug: string) {
+  const el = document.getElementById(slug)
+  if (!el) return
+  e.preventDefault()
+  el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  history.replaceState(null, '', `#${slug}`)
+}
+
+const shared = ref(false)
+let timer: ReturnType<typeof setTimeout> | null = null
+function shareActive () {
+  const slug = props.active || HIW_SECTIONS[0].slug
+  const url = `${location.origin}${location.pathname}#${slug}`
+  const done = () => { shared.value = true; if (timer) clearTimeout(timer); timer = setTimeout(() => { shared.value = false }, 1800) }
+  if (navigator.clipboard?.writeText) navigator.clipboard.writeText(url).then(done).catch(done)
+  else { const ta = document.createElement('textarea'); ta.value = url; ta.style.position = 'fixed'; ta.style.opacity = '0'; document.body.appendChild(ta); ta.select(); try { document.execCommand('copy') } catch { /* no-op */ } ta.remove(); done() }
+}
+</script>
+
+<template>
+  <div class="hiw-prog">
+    <div class="hiw-prog__head">
+      <span class="hiw-prog__pct">{{ progress ?? 0 }}<small>%</small></span>
+      <span class="hiw-prog__cap">complete</span>
+    </div>
+    <ol class="hiw-prog__steps">
+      <li
+        v-for="(s, i) in HIW_SECTIONS"
+        :key="s.slug"
+        :class="{ 'is-done': i < activeIndex, 'is-active': i === activeIndex }"
+      >
+        <a :href="`#${s.slug}`" @click="go($event, s.slug)">
+          <span class="hiw-prog__dot" aria-hidden="true"></span>
+          <span class="hiw-prog__name">{{ s.title }}</span>
+        </a>
+      </li>
+    </ol>
+    <button type="button" class="hiw-prog__share" :class="{ 'is-copied': shared }" @click="shareActive">
+      <svg v-if="!shared" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-3 3a4.5 4.5 0 01-6.364-6.364l1.5-1.5m6.364-2.828l1.5-1.5a4.5 4.5 0 016.364 6.364l-3 3a4.5 4.5 0 01-6.364 0" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" aria-hidden="true"><path d="M4.5 12.75l6 6 9-13.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      <span>{{ shared ? 'Link copied' : 'Share this section' }}</span>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.hiw-prog { font-size: .8rem; }
+.hiw-prog__head { display: flex; align-items: baseline; gap: .35rem; margin-bottom: 1.1rem; }
+.hiw-prog__pct { font-size: 1.9rem; font-weight: 800; color: #4f46e5; letter-spacing: -0.02em; line-height: 1; }
+.hiw-prog__pct small { font-size: .9rem; font-weight: 700; }
+.hiw-prog__cap { font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #9ca3af; }
+.hiw-prog__steps { list-style: none; margin: 0; padding: 0; position: relative; }
+/* the connecting track */
+.hiw-prog__steps::before { content: ""; position: absolute; left: 5px; top: .5rem; bottom: .5rem; width: 2px; background: #eef0f3; }
+.hiw-prog__steps li a { display: flex; align-items: center; gap: .55rem; padding: .3rem 0; color: #94a3b8; text-decoration: none; line-height: 1.25; transition: color .12s ease; }
+.hiw-prog__steps li a:hover { color: #4f46e5; text-decoration: none; }
+.hiw-prog__dot { position: relative; z-index: 1; flex: none; width: 12px; height: 12px; border-radius: 9999px; background: #fff; border: 2px solid #d7dbe3; transition: background .15s ease, border-color .15s ease; }
+.hiw-prog__name { font-size: .76rem; }
+.hiw-prog__steps li.is-done a { color: #64748b; }
+.hiw-prog__steps li.is-done .hiw-prog__dot { background: #a5b4fc; border-color: #a5b4fc; }
+.hiw-prog__steps li.is-active a { color: #4338ca; font-weight: 700; }
+.hiw-prog__steps li.is-active .hiw-prog__dot { background: #4f46e5; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,0.18); }
+.hiw-prog__share { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.4rem; font-size: .72rem; font-weight: 700; color: #4f46e5; background: #eef2ff; border: 1px solid #e0e4ff; border-radius: 9999px; padding: .4rem .7rem; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; }
+.hiw-prog__share:hover { background: #e0e7ff; border-color: #c7d2fe; }
+.hiw-prog__share svg { width: .9rem; height: .9rem; }
+.hiw-prog__share.is-copied { color: #0f766e; background: #e6faf6; border-color: #99e6da; }
+</style>
diff --git a/nuxt/components/HiwSectionShare.vue b/nuxt/components/HiwSectionShare.vue
new file mode 100644
index 0000000000..2cc2e08f79
--- /dev/null
+++ b/nuxt/components/HiwSectionShare.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+// Per-section share: copies a deep link to this section (page URL + #slug).
+const props = defineProps<{ slug: string }>()
+const copied = ref(false)
+let timer: ReturnType<typeof setTimeout> | null = null
+
+function share () {
+  const url = `${location.origin}${location.pathname.replace(/\/$/, '/')}#${props.slug}`
+  const done = () => {
+    copied.value = true
+    if (timer) clearTimeout(timer)
+    timer = setTimeout(() => { copied.value = false }, 1800)
+  }
+  if (navigator.clipboard?.writeText) {
+    navigator.clipboard.writeText(url).then(done).catch(done)
+  } else {
+    const ta = document.createElement('textarea')
+    ta.value = url; ta.style.position = 'fixed'; ta.style.opacity = '0'
+    document.body.appendChild(ta); ta.select()
+    try { document.execCommand('copy') } catch { /* no-op */ }
+    ta.remove(); done()
+  }
+}
+</script>
+
+<template>
+  <button
+    type="button"
+    class="hiw-secshare"
+    :class="{ 'is-copied': copied }"
+    :aria-label="copied ? 'Section link copied' : 'Copy a link to this section'"
+    @click="share"
+  >
+    <svg v-if="!copied" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+      <path d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-3 3a4.5 4.5 0 01-6.364-6.364l1.5-1.5m6.364-2.828l1.5-1.5a4.5 4.5 0 016.364 6.364l-3 3a4.5 4.5 0 01-6.364 0" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+    <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" aria-hidden="true">
+      <path d="M4.5 12.75l6 6 9-13.5" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+    <span>{{ copied ? 'Copied' : 'Share' }}</span>
+  </button>
+</template>
+
+<style scoped>
+.hiw-secshare { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 700; color: #64748b; background: #fff; border: 1px solid #e5e7eb; border-radius: 9999px; padding: .32rem .7rem; cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease; }
+.hiw-secshare:hover { color: #4f46e5; border-color: #c7d2fe; background: #f5f7ff; }
+.hiw-secshare svg { width: .9rem; height: .9rem; }
+.hiw-secshare.is-copied { color: #0f766e; border-color: #99e6da; background: #e6faf6; }
+</style>
diff --git a/nuxt/components/HiwShare.vue b/nuxt/components/HiwShare.vue
new file mode 100644
index 0000000000..1d6fb4cb66
--- /dev/null
+++ b/nuxt/components/HiwShare.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+// Copy-the-current-URL share button for the how-it-works guide. Lives in the
+// layout so it's on every guide page. Client-only work happens in the click handler,
+// so there's nothing to guard for SSR.
+const copied = ref(false)
+let timer: ReturnType<typeof setTimeout> | null = null
+
+async function share () {
+  const url = window.location.href
+  try {
+    await navigator.clipboard.writeText(url)
+  } catch {
+    // Fallback for older browsers / non-secure contexts.
+    const ta = document.createElement('textarea')
+    ta.value = url
+    ta.style.position = 'fixed'
+    ta.style.opacity = '0'
+    document.body.appendChild(ta)
+    ta.select()
+    try { document.execCommand('copy') } catch { /* no-op */ }
+    document.body.removeChild(ta)
+  }
+  copied.value = true
+  if (timer) clearTimeout(timer)
+  timer = setTimeout(() => { copied.value = false }, 2000)
+  if (typeof (window as any).capture === 'function') {
+    (window as any).capture('hiw-share', { url })
+  }
+}
+</script>
+
+<template>
+  <button
+    type="button"
+    class="hiw-share"
+    :class="{ 'hiw-share--copied': copied }"
+    :aria-label="copied ? 'Link copied to clipboard' : 'Copy link to this page'"
+    @click="share"
+  >
+    <svg v-if="!copied" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+      <path d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-3 3a4.5 4.5 0 01-6.364-6.364l1.5-1.5m6.364-2.828l1.5-1.5a4.5 4.5 0 016.364 6.364l-3 3a4.5 4.5 0 01-6.364 0" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+    <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" aria-hidden="true">
+      <path d="M4.5 12.75l6 6 9-13.5" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+    <span>{{ copied ? 'Copied!' : 'Share' }}</span>
+  </button>
+</template>
+
+<style scoped>
+.hiw-share {
+  display: inline-flex; align-items: center; gap: .4rem;
+  font-size: .82rem; font-weight: 600; color: #4f46e5;
+  background: #fff; border: 1px solid #e0e4ff; border-radius: 9999px;
+  padding: .4rem .85rem; cursor: pointer;
+  transition: background .15s ease, border-color .15s ease, color .15s ease;
+}
+.hiw-share:hover { background: #eef2ff; border-color: #c7d2fe; }
+.hiw-share svg { width: 1rem; height: 1rem; }
+.hiw-share--copied { color: #0f766e; border-color: #99e6da; background: #e6faf6; }
+</style>
diff --git a/nuxt/components/HiwStories.vue b/nuxt/components/HiwStories.vue
new file mode 100644
index 0000000000..a594c2149f
--- /dev/null
+++ b/nuxt/components/HiwStories.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+// Proof cards — real customer stories, linked out to the full write-up.
+const props = defineProps<{ items: { slug: string; name: string; note: string; image: string }[] }>()
+const capture = useCapture()
+</script>
+
+<template>
+  <div class="hiw-stories">
+    <div class="hiw-stories__eyebrow">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M12 3l2.6 5.3 5.9.9-4.2 4.1 1 5.8L12 17l-5.3 2.9 1-5.8-4.2-4.1 5.9-.9L12 3z" stroke-linejoin="round"/></svg>
+      Proof it works — in production today
+    </div>
+    <div class="hiw-stories__grid">
+      <a
+        v-for="s in items"
+        :key="s.slug"
+        :href="`/customer-stories/${s.slug}/`"
+        class="hiw-story"
+        @click="capture('hiw-story', { story: s.slug })"
+      >
+        <span class="hiw-story__thumb" :style="{ backgroundImage: `url(${s.image})` }" aria-hidden="true"></span>
+        <span class="hiw-story__body">
+          <span class="hiw-story__name">{{ s.name }}</span>
+          <span class="hiw-story__note">{{ s.note }}</span>
+          <span class="hiw-story__cta">Read the story <span aria-hidden="true">&rarr;</span></span>
+        </span>
+      </a>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.hiw-stories { margin-top: 1.75rem; }
+.hiw-stories__eyebrow { display: inline-flex; align-items: center; gap: .45rem; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #b45309; margin-bottom: .9rem; }
+.hiw-stories__eyebrow svg { width: 1rem; height: 1rem; color: #f59e0b; }
+.hiw-stories__grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
+.hiw-story { display: flex; align-items: center; gap: .9rem; padding: .85rem; border-radius: .9rem; background: linear-gradient(180deg, #fff, #fdfdff); border: 1px solid #e9ebf3; box-shadow: 0 2px 8px rgba(2,6,13,0.05); text-decoration: none; transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease; }
+.hiw-story:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(2,6,13,0.10); border-color: #d9deee; text-decoration: none; }
+.hiw-story__thumb { flex: none; width: 60px; height: 60px; border-radius: .7rem; background-size: cover; background-position: center; background-color: #eef1f8; box-shadow: inset 0 0 0 1px rgba(2,6,13,0.06); }
+.hiw-story__body { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
+.hiw-story__name { font-size: .92rem; font-weight: 700; color: #0f172a; letter-spacing: -0.01em; }
+.hiw-story__note { font-size: .8rem; color: #64748b; line-height: 1.35; }
+.hiw-story__cta { font-size: .76rem; font-weight: 700; color: #4338ca; margin-top: .3rem; }
+.hiw-story:hover .hiw-story__cta { color: #4f46e5; }
+</style>

From 395ab85f509b6220f5f8f0accdba455cc6a5c990 Mon Sep 17 00:00:00 2001
From: Kristopher <kristopherleads@gmail.com>
Date: Thu, 20 Aug 2026 12:13:13 -0700
Subject: [PATCH 06/11] Update index.vue

---
 nuxt/pages/product/index.vue | 32 +++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/nuxt/pages/product/index.vue b/nuxt/pages/product/index.vue
index 91e2df81fa..b0c859a17f 100644
--- a/nuxt/pages/product/index.vue
+++ b/nuxt/pages/product/index.vue
@@ -40,6 +40,24 @@ const TIERS = [
     },
 ]
 
+const DIFFERENTIATORS = [
+    {
+        heading: 'Vendor-Free Open Source',
+        description: 'Every factory is different, so why deploy the same solution as everyone else? Build your way with <a class="text-indigo-600 hover:underline" href="/blueprints/">ready-made blueprints</a>, your own app store, or anything in between — we never dictate your tools.',
+        icon: 'i-lucide-puzzle',
+    },
+    {
+        heading: 'Flexible and Secure',
+        description: 'From whole-factory rollouts to last-mile fixes across any industry. Build your solution, then secure it with <a class="text-indigo-600 hover:underline" href="/blog/2024/04/role-based-access-control-rbac-for-node-red-with-flowfuse/">granular RBAC</a>, auditing, <a class="text-indigo-600 hover:underline" href="/blog/2024/09/node-red-version-control-with-snapshots/">version control</a>, and traceability.',
+        icon: 'i-lucide-shield-check',
+    },
+    {
+        heading: 'Seamless Collaboration',
+        description: 'OT teams prototype and deploy fast while IT keeps the governance, security, and auditability they need — no trade-offs.',
+        icon: 'i-lucide-handshake',
+    },
+]
+
 const CAPABILITIES = [
     { label: 'Industrial AI', to: '/ai/' },
     { label: 'IT/OT Middleware', to: '/use-cases/it-ot-middleware/' },
@@ -122,7 +140,17 @@ onUnmounted(() => {
           <h2 class="mb-10 max-md:text-center">
             The needs of modern industry requires <span class="text-indigo-600">modern solutions</span>
           </h2>
-          <DifferentiatorCards class="mb-16" />
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
+            <div
+              v-for="diff in DIFFERENTIATORS"
+              :key="diff.heading"
+              class="rounded-lg bg-gradient-to-br from-indigo-50/50 to-red-50/50 p-6 pt-8 flex flex-col gap-4 text-center md:text-left"
+            >
+              <Icon :name="diff.icon" class="w-6 h-6 text-indigo-600 mx-auto md:mx-0" />
+              <h3 class="text-xl font-semibold text-indigo-600">{{ diff.heading }}</h3>
+              <p class="mb-0" v-html="diff.description" />
+            </div>
+          </div>
 
           <!-- Tier scrollytelling -->
           <div class="max-w-screen-lg mx-auto pt-8 pb-20">
@@ -168,6 +196,8 @@ onUnmounted(() => {
           <div class="max-w-screen-lg mx-auto pt-8 pb-20 text-center lg:text-left">
             <h2 class="m-0">The FlowFuse platform is <span class="text-indigo-600">the foundation for all of your IT/OT applications</span></h2>
             <p class="mt-6 text-gray-500">Leveraging enterprise-grade development, deployment, and governance solutions, you can build faster, scale more efficiently, and secure deployments of any size.</p>
+            <p class="mt-4 text-gray-500">Every application is assembled from the same core pieces — managed Node-RED instances running in the cloud or at the edge, a built-in Team Broker for your Unified Namespace, shared Tables for operational data, operator dashboards, and fleet-wide device management. The same building blocks arrange into the IT, OT, and IIoT architectures that fit how you run — wherever the work happens.</p>
+            <NuxtLink class="mt-6 inline-flex items-center gap-1 font-medium text-indigo-600 hover:underline" to="/product/how-it-works/" @click="capture('cta-learn-more', { position: 'how-it-works' })">Learn how it works &rarr;</NuxtLink>
             <div class="mt-10">
               <div class="text-sm font-semibold uppercase tracking-wide text-gray-500 mb-4">Integrations</div>
               <div class="product-cap-links flex flex-nowrap sm:flex-wrap justify-center lg:justify-start gap-2">

From 4360fb4c01886a97098e7ed66916bab2eacc1cad Mon Sep 17 00:00:00 2001
From: Kristopher <kristopherleads@gmail.com>
Date: Thu, 20 Aug 2026 12:13:56 -0700
Subject: [PATCH 07/11] Modify Overview column and add How It Works link

Updated listClasses for Overview column and added How It Works link.
---
 src/_data/chrome.json | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/_data/chrome.json b/src/_data/chrome.json
index 6ba6b99864..8a32337c79 100644
--- a/src/_data/chrome.json
+++ b/src/_data/chrome.json
@@ -8,7 +8,7 @@
                     {
                         "title": "Overview",
                         "titleGrid": "xl:col-start-2 xl:row-start-1",
-                        "listClasses": "row-span-6 xl:col-start-2 xl:row-start-2",
+                        "listClasses": "row-span-[7] xl:col-start-2 xl:row-start-2",
                         "links": [
                             {
                                 "label": "Product",
@@ -33,6 +33,12 @@
                                 "icon": "server-stack",
                                 "indent": true
                             },
+                            {
+                                "label": "How It Works",
+                                "href": "/product/how-it-works/",
+                                "icon": "book-open",
+                                "indent": true
+                            },
                             {
                                 "label": "Security Statement",
                                 "href": "/platform/security/",
@@ -453,6 +459,10 @@
                                 "label": "FlowFuse Fleet",
                                 "href": "/product/fleet/"
                             },
+                            {
+                                "label": "How It Works",
+                                "href": "/product/how-it-works/"
+                            },
                             {
                                 "label": "Security Statement",
                                 "href": "/platform/security/"

From 675fabd41fd1b803fdd2b2966cc4138856d10b98 Mon Sep 17 00:00:00 2001
From: Kristopher <kristopherleads@gmail.com>
Date: Fri, 21 Aug 2026 08:26:50 -0700
Subject: [PATCH 08/11] Update nuxt.config.ts

---
 nuxt/nuxt.config.ts | 41 +++++++++++++----------------------------
 1 file changed, 13 insertions(+), 28 deletions(-)

diff --git a/nuxt/nuxt.config.ts b/nuxt/nuxt.config.ts
index bc27002f20..d108e1d367 100644
--- a/nuxt/nuxt.config.ts
+++ b/nuxt/nuxt.config.ts
@@ -40,17 +40,17 @@ function collectChangelogRoutes(dir: string, basePath: string): { routes: string
     return { routes, entryCount }
 }
 
-// The Application Guide pages are markdown (`applicationGuideDoc`, a `page` collection).
-// Their routes are largely discoverable by @nuxt/content, but we keep an explicit prerender
-// list for the section index + each page. File names are <slug>.md and match the `slug` field.
+// The Application Guide pages are a `data` collection (see content.config.ts), so their routes
+// are not discoverable from @nuxt/content page paths. Derive them from the file names, which
+// are NN-<slug>.yml and match each file's `slug` field.
 function collectApplicationGuideRoutes(dir: string): string[] {
     const routes = ['/application-guide/']
     for (const guide of readdirSync(dir)) {
         const guideDir = join(dir, guide)
         if (!statSync(guideDir).isDirectory()) continue
         for (const file of readdirSync(guideDir)) {
-            if (!file.endsWith('.md')) continue
-            routes.push(`/application-guide/${guide}/${basename(file, '.md').replace(/^\d+-/, '')}/`)
+            if (!file.endsWith('.yml')) continue
+            routes.push(`/application-guide/${guide}/${basename(file, '.yml').replace(/^\d+-/, '')}/`)
         }
     }
     return routes
@@ -170,16 +170,6 @@ export default defineNuxtConfig({
         notes: [
             'This file only covers pages served by the Nuxt frontend. Some sections of flowfuse.com are still served by a legacy Eleventy site not represented here.',
         ],
-
-        // /raw/<path>.md, the per-page markdown endpoint the links below point at, is served
-        // by @nuxt/content's own llms feature rather than by nuxt-llms, and it searches every
-        // page-type collection by default. That included the handbook, so the exclusion above
-        // only held for llms.txt while /raw/handbook/company.md answered with the same content
-        // in markdown. Same reasoning applies to both surfaces.
-        contentRawMarkdown: {
-            excludeCollections: ['handbook'],
-        },
-
         sections: [
             {
                 title: 'Documentation',
@@ -321,17 +311,11 @@ export default defineNuxtConfig({
     routeRules: {
         '/terms': { robots: false },
         '/privacy-policy': { robots: false },
-        '/thank-you/**': { robots: false },
         ...redirects,
     },
 
     nitro: {
         preset: 'netlify',
-        // Nitro emits a .mjs.map next to every server chunk, so the Netlify functions bundle
-        // ships one map file per chunk. Skipping them keeps the bundle smaller and the
-        // server build a little shorter. The cost is that a server-side stack trace in the
-        // function logs no longer resolves back to the original source.
-        sourceMap: false,
         serverAssets: [
             {
                 baseName: 'analytics',
@@ -350,9 +334,9 @@ export default defineNuxtConfig({
         ],
         prerender: {
             routes: (() => {
-                // The changelog listing is a single page now (grouped by release, revealed
-                // as you scroll), so there are no /changelog/<n>/ pages to enumerate.
                 const changelog = collectChangelogRoutes(join(__dirname, '../src/changelog'), '/changelog')
+                const changelogPageCount = Math.max(1, Math.ceil(changelog.entryCount / 19))
+                const changelogListingRoutes = ['/changelog/', ...Array.from({ length: changelogPageCount - 1 }, (_, i) => `/changelog/${i + 2}/`)]
 
                 const blogListingRoutes = paginatedListingRoutes('/blog', blogFiles.length)
                 const blogTagRoutes = BLOG_TAGS.flatMap(tag =>
@@ -365,6 +349,11 @@ export default defineNuxtConfig({
                     '/integrations',
                     '/pricing',
                     '/product',
+                    // Static hub page under /product/. collectProductRoutes only enumerates
+                    // the tier pages (/product/{edge,hub,fleet}/) from content/products/*.yml,
+                    // and crawlLinks is off, so this file-based page must be listed explicitly
+                    // or it never prerenders and the nav link to it 404s site-wide.
+                    '/product/how-it-works/',
                     ...collectProductRoutes(join(__dirname, 'content/products')),
                     // Without this, @nuxtjs/sitemap only bakes /sitemap.xml statically when
                     // isNuxtGenerate() is true, which checks for nitro.static/preset "static" -
@@ -375,10 +364,6 @@ export default defineNuxtConfig({
                     // content-urls.get.ts) silently resolves to undefined. Explicitly listing
                     // it here bakes it at build time instead, inside the git checkout.
                     '/sitemap.xml',
-                    '/contact-us',
-                    '/book-demo',
-                    '/support',
-                    '/professional-services',
                     '/ebooks/beginner-guide-to-a-professional-nodered/',
                     '/ebooks/ultimate-guide-to-building-applications-with-flowfuse-dashboard-for-node-red/',
                     '/whitepaper/uns-decoupling-data-producers-and-consumers/',
@@ -388,7 +373,7 @@ export default defineNuxtConfig({
                     '/resources/publications/',
                     ...collectApplicationGuideRoutes(join(__dirname, 'content/application-guide')),
                     '/changelog/index.xml',
-                    '/changelog/',
+                    ...changelogListingRoutes,
                     ...changelog.routes,
                     '/blog/index.xml',
                     ...blogListingRoutes,

From bceb8cbf42b712d91bfbb34d80a9a42ab8b85b92 Mon Sep 17 00:00:00 2001
From: Kristopher <kristopherleads@gmail.com>
Date: Fri, 28 Aug 2026 13:38:04 -0700
Subject: [PATCH 09/11] Delete nuxt/layouts/how-it-works.vue

---
 nuxt/layouts/how-it-works.vue | 75 -----------------------------------
 1 file changed, 75 deletions(-)
 delete mode 100644 nuxt/layouts/how-it-works.vue

diff --git a/nuxt/layouts/how-it-works.vue b/nuxt/layouts/how-it-works.vue
deleted file mode 100644
index 3d7c422ede..0000000000
--- a/nuxt/layouts/how-it-works.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<script setup lang="ts">
-// Single-page guide layout: normal FlowFuse chrome, a sticky section nav on the left,
-// the content in the middle, and a reading-progress rail on the right. Scroll-spy and
-// progress are computed here and passed down, so the rails track one scrolling page.
-import '~/assets/css/how-it-works.css'
-
-const activeId = ref('')
-const progress = ref(0)
-let observer: IntersectionObserver | null = null
-let onScroll: (() => void) | null = null
-
-onMounted(() => {
-  const sections = Array.from(document.querySelectorAll<HTMLElement>('.hiw-section[id]'))
-  if (sections.length) {
-    activeId.value = sections[0].id
-    observer = new IntersectionObserver((entries) => {
-      entries.forEach((e) => { if (e.isIntersecting) activeId.value = (e.target as HTMLElement).id })
-    }, { rootMargin: '-45% 0px -50% 0px', threshold: 0 })
-    sections.forEach(s => observer!.observe(s))
-  }
-  const content = document.getElementById('hiw-content')
-  onScroll = () => {
-    if (!content) return
-    const total = content.offsetHeight - window.innerHeight
-    const scrolled = Math.max(0, -content.getBoundingClientRect().top)
-    progress.value = Math.round(Math.min(100, Math.max(0, (scrolled / Math.max(total, 1)) * 100)))
-  }
-  window.addEventListener('scroll', onScroll, { passive: true })
-  onScroll()
-})
-onBeforeUnmount(() => {
-  observer?.disconnect()
-  if (onScroll) window.removeEventListener('scroll', onScroll)
-})
-</script>
-
-<template>
-  <div class="font-sans ff-website leading-normal tracking-normal text-gray-500 min-h-screen flex flex-col">
-    <a href="#hiw-content" class="skip-to-main">Skip to main content</a>
-    <AppUtilityBar />
-    <AppHeader />
-    <div class="flex-grow base bg-white">
-      <div class="hiw-shell">
-        <aside class="hiw-sidebar">
-          <div class="hiw-sidebar__inner"><HiwLeftNav :active="activeId" /></div>
-        </aside>
-        <main id="hiw-content" class="hiw-main">
-          <div class="hiw-topbar"><HiwShare /></div>
-          <slot />
-        </main>
-        <aside class="hiw-rail">
-          <div class="hiw-rail__inner"><HiwProgress :progress="progress" :active="activeId" /></div>
-        </aside>
-      </div>
-    </div>
-    <AppFooter />
-  </div>
-</template>
-
-<style scoped>
-.hiw-shell { max-width: 86rem; margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1fr; }
-.hiw-sidebar, .hiw-rail { display: none; }
-.hiw-main { min-width: 0; padding: 0 1.5rem; }
-.hiw-topbar { display: flex; justify-content: flex-end; padding-top: 1.25rem; }
-@media (min-width: 1024px) {
-  .hiw-shell { grid-template-columns: 220px minmax(0, 1fr); column-gap: 2rem; }
-  .hiw-sidebar { display: block; }
-  .hiw-sidebar__inner { position: sticky; top: 1.25rem; max-height: calc(100vh - 2.5rem); overflow-y: auto; padding: 1.75rem 0 1.75rem 1.5rem; }
-}
-@media (min-width: 1280px) {
-  .hiw-shell { grid-template-columns: 220px minmax(0, 1fr) 200px; }
-  .hiw-rail { display: block; }
-  .hiw-rail__inner { position: sticky; top: 1.75rem; padding: 1.75rem 0; }
-}
-</style>

From a93e6477ebdabe785e025b6be77f70ccb22dac9a Mon Sep 17 00:00:00 2001
From: Kristopher <kristopherleads@gmail.com>
Date: Fri, 28 Aug 2026 13:38:57 -0700
Subject: [PATCH 10/11] Create getting-started.vue

---
 nuxt/layouts/getting-started.vue | 78 ++++++++++++++++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 nuxt/layouts/getting-started.vue

diff --git a/nuxt/layouts/getting-started.vue b/nuxt/layouts/getting-started.vue
new file mode 100644
index 0000000000..fdfbfb62a6
--- /dev/null
+++ b/nuxt/layouts/getting-started.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+// Single-page guide layout: normal FlowFuse chrome, the reading-progress rail +
+// section nav on the LEFT, content in the middle, and a sticky conversion CTA on
+// the right. Scroll-spy and progress are computed here and passed down, so the
+// left rail tracks one scrolling page.
+import '~/assets/css/getting-started.css'
+
+const activeId = ref('')
+const progress = ref(0)
+let observer: IntersectionObserver | null = null
+let onScroll: (() => void) | null = null
+
+onMounted(() => {
+  const sections = Array.from(document.querySelectorAll<HTMLElement>('.gs-section[id]'))
+  if (sections.length) {
+    activeId.value = sections[0].id
+    observer = new IntersectionObserver((entries) => {
+      entries.forEach((e) => { if (e.isIntersecting) activeId.value = (e.target as HTMLElement).id })
+    }, { rootMargin: '-45% 0px -50% 0px', threshold: 0 })
+    sections.forEach(s => observer!.observe(s))
+  }
+  const content = document.getElementById('gs-content')
+  onScroll = () => {
+    if (!content) return
+    const total = content.offsetHeight - window.innerHeight
+    const scrolled = Math.max(0, -content.getBoundingClientRect().top)
+    progress.value = Math.round(Math.min(100, Math.max(0, (scrolled / Math.max(total, 1)) * 100)))
+  }
+  window.addEventListener('scroll', onScroll, { passive: true })
+  onScroll()
+})
+onBeforeUnmount(() => {
+  observer?.disconnect()
+  if (onScroll) window.removeEventListener('scroll', onScroll)
+})
+</script>
+
+<template>
+  <div class="font-sans ff-website leading-normal tracking-normal text-gray-500 min-h-screen flex flex-col">
+    <a href="#gs-content" class="skip-to-main">Skip to main content</a>
+    <AppUtilityBar />
+    <AppHeader />
+    <div class="flex-grow base bg-white">
+      <div class="gs-shell">
+        <aside class="gs-sidebar">
+          <div class="gs-sidebar__inner"><GsProgress :progress="progress" :active="activeId" /></div>
+        </aside>
+        <main id="gs-content" class="gs-main">
+          <div class="gs-topbar"><GsShare /></div>
+          <slot />
+        </main>
+        <aside class="gs-rail">
+          <div class="gs-rail__inner"><GsStickyCta /></div>
+        </aside>
+      </div>
+    </div>
+    <AppFooter />
+  </div>
+</template>
+
+<style scoped>
+.gs-shell { max-width: 86rem; margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1fr; }
+.gs-sidebar, .gs-rail { display: none; }
+.gs-main { min-width: 0; padding: 0 1.5rem; }
+.gs-topbar { display: flex; justify-content: flex-end; padding-top: 1.25rem; }
+@media (min-width: 1024px) {
+  .gs-shell { grid-template-columns: 232px minmax(0, 1fr); column-gap: 2rem; }
+  .gs-sidebar { display: block; }
+  /* top clears the sticky site header (~75px) so the rail isn't hidden behind
+     it once the page scrolls; matches the sections' scroll-margin-top. */
+  .gs-sidebar__inner { position: sticky; top: 5.75rem; max-height: calc(100vh - 7.25rem); overflow-y: auto; padding: 0.25rem 0 1.75rem 1.5rem; }
+}
+@media (min-width: 1280px) {
+  .gs-shell { grid-template-columns: 232px minmax(0, 1fr) 248px; }
+  .gs-rail { display: block; }
+  .gs-rail__inner { position: sticky; top: 5.75rem; padding: 0.25rem 1.5rem 1.75rem 0; }
+}
+</style>

From 0cb4cf92039b5812f8e79fe4484c715e1c03abba Mon Sep 17 00:00:00 2001
From: Kristopher <kristopherleads@gmail.com>
Date: Fri, 28 Aug 2026 13:39:26 -0700
Subject: [PATCH 11/11] Delete nuxt/assets/css/how-it-works.css

---
 nuxt/assets/css/how-it-works.css | 219 -------------------------------
 1 file changed, 219 deletions(-)
 delete mode 100644 nuxt/assets/css/how-it-works.css

diff --git a/nuxt/assets/css/how-it-works.css b/nuxt/assets/css/how-it-works.css
deleted file mode 100644
index f5b9052c8a..0000000000
--- a/nuxt/assets/css/how-it-works.css
+++ /dev/null
@@ -1,219 +0,0 @@
-/* Article shell */
-.hiw-article { max-width: 46rem; padding: 2.25rem 0 4rem; }
-.hiw-crumb { display: flex; gap: .5rem; align-items: center; font-size: .8rem; color: #9ca3af; }
-.hiw-crumb a { color: #4f46e5; text-decoration: none; }
-.hiw-crumb a:hover { text-decoration: underline; }
-.hiw-crumb__track { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .72rem; color: #4f46e5; }
-.hiw-crumb__track[data-track="node-red"] { color: #0d9488; }
-.hiw-title { font-size: 2.25rem; font-weight: 700; line-height: 1.15; margin: 1rem 0 0; color: #111827; }
-.hiw-lead { margin: .75rem 0 0; font-size: 1.15rem; color: #6b7280; line-height: 1.5; }
-.hiw-h2 { font-size: 1.5rem; font-weight: 700; margin: 2.5rem 0 1rem; color: #111827; }
-.hiw-p { color: #4b5563; line-height: 1.55; margin: 1rem 0 0; }
-
-/* Pill */
-.hiw-pill { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #4f46e5; background: #eef2ff; border: 1px solid #e0e4ff; border-radius: 9999px; padding: .3rem .8rem; }
-
-/* ── Single-page structure: hero, numbered sections, step badges ── */
-.hiw-page { padding-bottom: 1rem; }
-
-/* Hero — vibrant gradient panel */
-.hiw-hero { position: relative; margin-top: 1.5rem; padding: 3rem 2.25rem 2.75rem; border-radius: 1.5rem; overflow: hidden; color: #fff; background: linear-gradient(135deg, #4f46e5 0%, #6d28d9 55%, #221a63 100%); box-shadow: 0 24px 60px rgba(79,70,229,0.25); }
-.hiw-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(55% 90% at 100% -10%, rgba(255,110,74,0.35), transparent 60%), radial-gradient(45% 80% at -10% 120%, rgba(13,148,136,0.4), transparent 60%); }
-.hiw-hero > * { position: relative; z-index: 1; }
-.hiw-hero .hiw-pill { color: #fff; background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.28); }
-.hiw-hero__title { font-size: 2.5rem; line-height: 1.08; font-weight: 800; color: #fff; letter-spacing: -0.02em; margin: 1rem 0 0; }
-.hiw-hero__title .text-indigo-600 { color: #c7d2fe !important; }
-@media (min-width: 640px) { .hiw-hero__title { font-size: 3rem; } }
-.hiw-hero__lead { font-size: 1.12rem; color: rgba(255,255,255,0.86); line-height: 1.55; margin: 1.1rem 0 0; max-width: 42rem; }
-.hiw-hero__start { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.6rem; background: #fff; color: #4338ca; font-weight: 700; font-size: .9rem; padding: .7rem 1.35rem; border-radius: 9999px; text-decoration: none; box-shadow: 0 10px 24px rgba(2,6,13,0.25); transition: transform .12s ease; }
-.hiw-hero__start:hover { transform: translateY(-1px); text-decoration: none; }
-.hiw-hero__start span { transition: transform .15s ease; }
-.hiw-hero__start:hover span { transform: translateY(2px); }
-
-/* Sections — tone-coded, with a colour-tinted header panel */
-.hiw-section { scroll-margin-top: 96px; padding: 2.25rem 0; --tone: #64748b; --tone-tint: #f1f5f9; --tone-line: #e2e8f0; }
-.hiw-sec--it { --tone: #4f46e5; --tone-tint: #eef2ff; --tone-line: #e0e4ff; }
-.hiw-sec--ot { --tone: #DA3D0B; --tone-tint: #ffe8e5; --tone-line: #ffd7cc; }
-.hiw-sec--fleet { --tone: #0d9488; --tone-tint: #e6faf6; --tone-line: #b8efe2; }
-.hiw-sec--all { --tone: #64748b; --tone-tint: #f1f5f9; --tone-line: #e2e8f0; }
-.hiw-section__head { display: flex; gap: 1.1rem; align-items: flex-start; margin-bottom: 1.5rem; padding: 1.3rem 1.45rem; border-radius: 1rem; background: linear-gradient(105deg, var(--tone-tint), rgba(255,255,255,0) 80%); border: 1px solid var(--tone-line); border-left: 4px solid var(--tone); }
-.hiw-section__step { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .8rem; font-size: 1rem; font-weight: 800; color: #fff; box-shadow: 0 4px 12px rgba(2,6,13,0.12); }
-.hiw-step--all { background: linear-gradient(135deg, #94a3b8, #64748b); }
-.hiw-step--it { background: linear-gradient(135deg, #6366f1, #4338ca); box-shadow: 0 4px 12px rgba(79,70,229,0.28); }
-.hiw-step--ot { background: linear-gradient(135deg, #f97316, #DA3D0B); box-shadow: 0 4px 12px rgba(218,61,11,0.28); }
-.hiw-step--fleet { background: linear-gradient(135deg, #14b8a6, #0d9488); box-shadow: 0 4px 12px rgba(13,148,136,0.28); }
-.hiw-section__intro { min-width: 0; flex: 1; }
-.hiw-section__intro .hiw-persona-chip { display: inline-block; margin-bottom: .5rem; }
-.hiw-section__title { font-size: 1.85rem; font-weight: 800; color: #0f172a; letter-spacing: -0.02em; margin: 0; }
-.hiw-section__lead { font-size: 1.05rem; color: #475569; line-height: 1.55; margin: .5rem 0 0; }
-.hiw-section__head .hiw-secshare { flex: none; align-self: flex-start; }
-.hiw-h3 { font-size: 1.05rem; font-weight: 800; color: #334155; margin: 1.75rem 0 .5rem; }
-.hiw-cta { padding: 2.5rem 0 3rem; }
-
-/* ── Layer stack (what FlowFuse is / you own this) ── */
-.hiw-stack { display: flex; flex-direction: column; gap: .4rem; margin-top: 1.15rem; }
-.hiw-stack__layer { position: relative; border-radius: .9rem; padding: 1.1rem 1.3rem; border: 1px solid #e7e9ee; background: #fff; }
-.hiw-stack__label { font-size: .64rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #94a3b8; }
-.hiw-stack__title { font-weight: 700; color: #0f172a; margin-top: .15rem; }
-.hiw-stack__title small { display: block; font-weight: 400; font-size: .84rem; color: #64748b; margin-top: .2rem; }
-.hiw-stack__layer--you { background: linear-gradient(120deg, #4f46e5, #6d28d9); border: 0; box-shadow: 0 16px 36px rgba(79,70,229,0.28); }
-.hiw-stack__layer--you .hiw-stack__label { color: rgba(255,255,255,0.72); }
-.hiw-stack__layer--you .hiw-stack__title { color: #fff; }
-.hiw-stack__layer--you .hiw-stack__title small { color: rgba(255,255,255,0.82); }
-.hiw-stack__own { position: absolute; top: 1.05rem; right: 1.2rem; font-size: .64rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.38); border-radius: 9999px; padding: .28rem .6rem; }
-.hiw-stack__arrow { text-align: center; color: #cbd5e1; font-size: .95rem; line-height: 1; padding: .1rem 0; }
-
-/* ── Tri-team panel (fits every team) ── */
-.hiw-tri { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.15rem; }
-@media (min-width: 720px) { .hiw-tri { grid-template-columns: repeat(3, 1fr); } }
-.hiw-tri__col { border: 1px solid #e7e9ee; border-top: 4px solid var(--c); border-radius: .9rem; padding: 1.3rem 1.35rem; background: #fff; box-shadow: 0 1px 2px rgba(2,6,13,0.04); }
-.hiw-tri__col--ot { --c: #DA3D0B; }
-.hiw-tri__col--it { --c: #4f46e5; }
-.hiw-tri__col--fleet { --c: #0d9488; }
-.hiw-tri__badge { display: inline-block; font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--c); border-radius: 9999px; padding: .26rem .6rem; }
-.hiw-tri__col--ot .hiw-tri__badge { background: #ffe8e5; }
-.hiw-tri__col--it .hiw-tri__badge { background: #eef2ff; }
-.hiw-tri__col--fleet .hiw-tri__badge { background: #e6faf6; }
-.hiw-tri__name { font-size: 1.15rem; font-weight: 800; color: #0f172a; margin-top: .65rem; }
-.hiw-tri__who { font-size: .82rem; color: #64748b; margin-top: .15rem; }
-.hiw-tri__list { list-style: none; margin: .95rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
-.hiw-tri__list li { display: flex; gap: .5rem; font-size: .86rem; color: #374151; align-items: flex-start; line-height: 1.4; }
-.hiw-tri__list li::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 2px; margin-top: .35rem; background: var(--c); }
-.hiw-tri__value { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid #f0f1f4; font-size: .85rem; font-weight: 700; color: var(--c); }
-
-/* ── Value cards (why it pays off) ── */
-.hiw-values { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.15rem; }
-.hiw-value { border: 1px solid #e7e9ee; border-radius: .9rem; padding: 1.3rem 1.35rem; background: #fff; box-shadow: 0 1px 2px rgba(2,6,13,0.04); transition: box-shadow .18s ease, transform .12s ease; }
-.hiw-value:hover { box-shadow: 0 12px 28px rgba(2,6,13,0.08); transform: translateY(-2px); }
-.hiw-value__ic { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .75rem; color: #fff; margin-bottom: .8rem; box-shadow: 0 4px 12px rgba(2,6,13,0.14); }
-.hiw-value__ic svg { width: 1.35rem; height: 1.35rem; }
-.hiw-value__title { font-weight: 800; color: #0f172a; letter-spacing: -0.01em; }
-.hiw-value__body { font-size: .86rem; color: #64748b; line-height: 1.5; margin-top: .35rem; }
-
-/* Hub: tracks + cards */
-.hiw-track__head { border-top: 3px solid #4f46e5; padding-top: 1rem; margin-bottom: 1.25rem; }
-.hiw-track--nr .hiw-track__head { border-top-color: #0d9488; }
-.hiw-track__eyebrow { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #4f46e5; }
-.hiw-track__eyebrow[data-track="node-red"] { color: #0d9488; }
-.hiw-track__lead { margin: .35rem 0 0; font-size: 1.35rem; font-weight: 600; color: #111827; letter-spacing: -0.01em; }
-.hiw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
-.hiw-card { position: relative; display: flex; flex-direction: column; border: 1px solid #e5e7eb; border-radius: .85rem; padding: 1.25rem 1.35rem; background: #fff; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
-.hiw-card:hover { border-color: #c7d2fe; box-shadow: 0 10px 26px rgba(2,6,13,0.08); text-decoration: none; }
-.hiw-card__num { font-size: .75rem; font-weight: 800; color: #c7cbd4; letter-spacing: .05em; }
-.hiw-card__num[data-track="node-red"] { color: #99e6da; }
-.hiw-card__title { font-size: 1.05rem; font-weight: 700; color: #111827; margin-top: .3rem; }
-.hiw-card__blurb { font-size: .86rem; color: #6b7280; line-height: 1.45; margin-top: .35rem; }
-.hiw-card__arrow { color: #a5b4fc; margin-top: .75rem; font-weight: 700; }
-.hiw-card:hover .hiw-card__arrow { color: #4f46e5; }
-
-/* Persona cards (hub) — colour-coded by the buyer they speak to */
-.hiw-pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
-.hiw-pcard { --tone: #4f46e5; --tone-tint: #eef2ff; position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid #e5e7eb; border-top: 3px solid var(--tone); border-radius: .9rem; padding: 1.35rem 1.4rem; text-decoration: none; transition: border-color .15s ease, box-shadow .18s ease, transform .12s ease; }
-.hiw-pcard:hover { box-shadow: 0 14px 32px rgba(2,6,13,0.10); transform: translateY(-2px); text-decoration: none; border-color: #d7dbe3; }
-.hiw-pcard--ot { --tone: #DA3D0B; --tone-tint: #ffe8e5; }
-.hiw-pcard--it { --tone: #4f46e5; --tone-tint: #eef2ff; }
-.hiw-pcard--fleet { --tone: #0d9488; --tone-tint: #e6faf6; }
-.hiw-pcard--all { --tone: #64748b; --tone-tint: #f1f5f9; }
-.hiw-pcard__persona { align-self: flex-start; font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--tone); background: var(--tone-tint); border-radius: 9999px; padding: .28rem .6rem; }
-.hiw-pcard__title { font-size: 1.15rem; font-weight: 700; color: #111827; margin-top: .8rem; }
-.hiw-pcard__blurb { font-size: .88rem; color: #6b7280; line-height: 1.5; margin-top: .4rem; }
-.hiw-pcard__go { margin-top: 1rem; font-size: .84rem; font-weight: 700; color: var(--tone); display: inline-flex; align-items: center; gap: .3rem; }
-.hiw-pcard:hover .hiw-pcard__go { gap: .5rem; }
-
-/* Section-page persona chip (in the crumb row) */
-.hiw-persona-chip { font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; border-radius: 9999px; padding: .28rem .6rem; }
-.hiw-persona-chip--ot { color: #DA3D0B; background: #ffe8e5; }
-.hiw-persona-chip--it { color: #4f46e5; background: #eef2ff; }
-.hiw-persona-chip--fleet { color: #0d9488; background: #e6faf6; }
-.hiw-persona-chip--all { color: #64748b; background: #f1f5f9; }
-
-/* Diagram — polished marketing flow figure */
-.hiw-diagram { position: relative; border: 1px solid #e6e8f0; border-radius: 1.25rem; padding: 1.9rem 1.75rem 1.6rem; margin-top: 1.25rem; overflow: hidden; background: radial-gradient(130% 130% at 50% -15%, #ffffff 0%, #f3f5fc 72%); box-shadow: 0 12px 34px rgba(2,6,13,0.06), inset 0 1px 0 #fff; display: flex; flex-direction: column; }
-.hiw-diagram::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(79,70,229,0.07) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.4), transparent 72%); mask-image: linear-gradient(180deg, rgba(0,0,0,0.4), transparent 72%); }
-.hiw-diagram > * { position: relative; z-index: 1; }
-.hiw-lane { position: relative; border-radius: 1rem; padding: 1.5rem 1.15rem 1.15rem; border: 1px solid var(--l-line, #e6e8f0); background: var(--l-bg, #fff); }
-.hiw-lane--it { --l-bg: linear-gradient(180deg, rgba(99,102,241,0.08), rgba(99,102,241,0.015)); --l-line: rgba(99,102,241,0.22); --l-dot: #6366f1; }
-.hiw-lane--ot { --l-bg: linear-gradient(180deg, rgba(218,61,11,0.07), rgba(218,61,11,0.015)); --l-line: rgba(218,61,11,0.22); --l-dot: #DA3D0B; }
-.hiw-lane--edge { --l-bg: linear-gradient(180deg, rgba(100,116,139,0.09), rgba(100,116,139,0.02)); --l-line: rgba(100,116,139,0.22); --l-dot: #64748b; }
-.hiw-lane--broker { --l-bg: linear-gradient(180deg, rgba(13,148,136,0.09), rgba(13,148,136,0.02)); --l-line: rgba(13,148,136,0.24); --l-dot: #0d9488; }
-.hiw-lane__label { position: absolute; top: -.72rem; left: 1rem; display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: .63rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #475569; background: #fff; border: 1px solid var(--l-line); border-radius: 9999px; padding: .32rem .7rem; box-shadow: 0 1px 2px rgba(2,6,13,0.05); }
-.hiw-lane__label::before { content: ""; width: .5rem; height: .5rem; border-radius: 9999px; background: var(--l-dot); }
-.hiw-nodes { display: flex; flex-wrap: wrap; gap: .6rem; }
-.hiw-node { flex: 1 1 128px; min-width: 116px; position: relative; border-radius: .7rem; padding: .75rem .85rem; background: linear-gradient(180deg, #fff, #fdfdff); border: 1px solid #e7e9f2; box-shadow: 0 2px 6px rgba(2,6,13,0.06); display: flex; flex-direction: column; gap: .12rem; transition: transform .12s ease, box-shadow .15s ease; }
-.hiw-node:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(2,6,13,0.09); }
-.hiw-node::before { content: ""; position: absolute; left: 0; top: .7rem; bottom: .7rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--n, #cbd5e1); }
-.hiw-node b { font-size: .84rem; color: #0f172a; font-weight: 700; letter-spacing: -0.01em; padding-left: .35rem; }
-.hiw-node small { font-size: .7rem; color: #94a3b8; padding-left: .35rem; }
-.hiw-node--it { --n: #6366f1; }
-.hiw-node--ot { --n: #DA3D0B; }
-.hiw-node--broker { --n: #0d9488; }
-.hiw-node--muted { --n: #cbd5e1; }
-/* connector between lanes: a subtle guide line + a chevron */
-.hiw-link { position: relative; width: max-content; max-width: 92%; margin: 1.15rem auto; padding: .42rem .9rem; border-radius: 9999px; background: #fff; border: 1px solid #e2e6f0; box-shadow: 0 2px 6px rgba(2,6,13,0.06); font-size: .63rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #64748b; text-align: center; }
-.hiw-link::before { content: ""; position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); width: 2px; height: .75rem; background: #cfd5e6; }
-.hiw-link::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #cfd5e6; }
-.hiw-legend { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid #eef0f3; font-size: .72rem; color: #64748b; font-weight: 600; }
-.hiw-legend span { display: inline-flex; align-items: center; gap: .4rem; }
-.hiw-dot { width: .7rem; height: .7rem; border-radius: 3px; display: inline-block; }
-.hiw-dot--it { background: #6366f1; }
-.hiw-dot--ot { background: #DA3D0B; }
-.hiw-dot--broker { background: #0d9488; }
-.hiw-dot--muted { background: #cbd5e1; }
-.hiw-figcap { font-size: .8rem; color: #94a3b8; margin-top: .7rem; }
-
-/* Section divider — hairline with a soft gradient node */
-.hiw-divider { position: relative; height: 1px; margin: 3.75rem 0; background: linear-gradient(90deg, transparent, #e1e5f0 18%, #e1e5f0 82%, transparent); }
-.hiw-divider::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 9999px; transform: translate(-50%, -50%) rotate(45deg); background: linear-gradient(135deg, #a5b4fc, #6366f1); box-shadow: 0 0 0 4px #fff, 0 0 0 5px #eef0f7; }
-
-/* Core-piece / concept cards */
-.hiw-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .85rem; margin-top: 1.1rem; }
-.hiw-cardp { border: 1px solid #e7e9ee; border-radius: .8rem; padding: 1.1rem 1.2rem; background: #fff; box-shadow: 0 1px 2px rgba(2,6,13,0.04); transition: box-shadow .18s ease, transform .12s ease, border-color .18s ease; }
-.hiw-cardp:hover { box-shadow: 0 12px 26px rgba(2,6,13,0.08); transform: translateY(-2px); border-color: #dde0e7; }
-.hiw-cardp__title { font-weight: 700; color: #4338ca; font-size: .95rem; letter-spacing: -0.01em; }
-.hiw-cardp__body { font-size: .86rem; color: #6b7280; line-height: 1.5; margin-top: .35rem; }
-
-/* Definition table (Node-RED core pieces) */
-.hiw-deflist { margin-top: 1rem; border: 1px solid #e5e7eb; border-radius: .7rem; overflow: hidden; }
-.hiw-deflist > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: .8rem 1rem; border-top: 1px solid #f0f0f4; }
-.hiw-deflist > div:first-child { border-top: 0; }
-.hiw-deflist dt { font-weight: 700; color: #111827; font-size: .88rem; margin: 0; }
-.hiw-deflist dd { margin: 0; font-size: .86rem; color: #6b7280; line-height: 1.45; }
-
-/* Shape / pattern blocks — polished spec cards (Use it when / How it works / Watch out) */
-.hiw-shape { border: 1px solid #e7e9ee; border-radius: .9rem; padding: 1.4rem 1.5rem; background: #fff; margin-top: 1.1rem; box-shadow: 0 1px 2px rgba(2,6,13,0.04); transition: box-shadow .18s ease, border-color .18s ease; }
-.hiw-shape:hover { box-shadow: 0 12px 30px rgba(2,6,13,0.07); border-color: #dde0e7; }
-.hiw-shape__head { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }
-.hiw-shape__title { font-size: 1.2rem; font-weight: 700; color: #111827; margin: 0; letter-spacing: -0.01em; }
-.hiw-shape__tag { font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #4f46e5; background: #eef2ff; border-radius: 9999px; padding: .28rem .62rem; }
-.hiw-shape__body { color: #4b5563; line-height: 1.55; margin: .7rem 0 0; font-size: .95rem; }
-/* the label/value block, styled as a clean spec panel */
-.hiw-meta { margin: 1.15rem 0 0; border-top: 1px solid #eef0f3; }
-.hiw-meta > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid #eef0f3; }
-.hiw-meta > div:last-child { border-bottom: 0; padding-bottom: .1rem; }
-.hiw-meta dt, .hiw-meta__label { position: relative; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #4f46e5; margin: .14rem 0 0; padding-left: .75rem; }
-.hiw-meta dt::before, .hiw-meta__label::before { content: ""; position: absolute; left: 0; top: .1rem; width: 3px; height: .72rem; border-radius: 2px; background: #a5b4fc; }
-.hiw-meta dd, .hiw-meta__val { margin: 0; font-size: .9rem; color: #374151; line-height: 1.5; }
-@media (max-width: 640px) { .hiw-meta > div { grid-template-columns: 1fr; gap: .3rem; padding: .7rem 0; } .hiw-meta dt::before, .hiw-meta__label::before { display: none; } .hiw-meta dt, .hiw-meta__label { padding-left: 0; } }
-
-/* Steps */
-.hiw-steps { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
-.hiw-steps li { display: flex; gap: .85rem; align-items: flex-start; }
-.hiw-steps__num { flex: none; width: 1.8rem; height: 1.8rem; border-radius: 9999px; background: linear-gradient(135deg, #6366f1, #4338ca); color: #fff; font-weight: 800; font-size: .85rem; display: grid; place-items: center; box-shadow: 0 3px 8px rgba(79,70,229,0.28); }
-.hiw-steps__title { font-weight: 700; color: #111827; }
-.hiw-steps__body { font-size: .88rem; color: #6b7280; line-height: 1.45; margin-top: .1rem; }
-
-.hiw-inline { color: #4f46e5; text-decoration: none; }
-.hiw-inline:hover { text-decoration: underline; }
-
-/* Callout note */
-.hiw-note { margin-top: 2rem; border: 1px solid #e0e4ff; background: #f8f9ff; border-left: 4px solid #4f46e5; border-radius: .6rem; padding: 1.1rem 1.25rem; }
-.hiw-note__label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #4f46e5; margin-bottom: .4rem; }
-.hiw-note a { display: inline-block; margin-top: .6rem; }
-
-/* Pager */
-.hiw-pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; border-top: 1px solid #f0f0f4; padding-top: 1.25rem; }
-.hiw-pager__link { display: flex; flex-direction: column; text-decoration: none; border: 1px solid #e5e7eb; border-radius: .6rem; padding: .75rem 1rem; min-width: 45%; transition: border-color .15s ease; }
-.hiw-pager__link:hover { border-color: #c7d2fe; text-decoration: none; }
-.hiw-pager__link--next { text-align: right; margin-left: auto; }
-.hiw-pager__dir { font-size: .74rem; color: #9ca3af; font-weight: 600; }
-.hiw-pager__title { font-weight: 700; color: #4f46e5; }