diff --git a/.claude/CLAUDE.md b/.claude/CLAUDE.md
index cdac3713c1..5851d1ca9b 100644
--- a/.claude/CLAUDE.md
+++ b/.claude/CLAUDE.md
@@ -268,9 +268,9 @@ This also covers old `/docs/**` paths left behind by a rename in `flowfuse/flowf
 
 ## Call-to-Action components
 
-**Nuxt only** — 11ty pages still use hand-written `<a class="ff-btn ...">` links; these components have no 11ty equivalent yet.
+Both frameworks have their own implementation of the same system — Vue components on Nuxt, Nunjucks macros on 11ty (see **11ty equivalent** below). The rendering/styling code itself is kept in sync by hand (Vue and Nunjucks share nothing at that level), but the *data* — event name, href, and fixed label per destination — lives in one file, `src/_data/ctaDestinations.json`, imported by both the Vue components and the Nunjucks macros (via a Nunjucks global, see below) so the two can't drift apart on copy or event names without both sides being touched. `site.json`'s `appURL` is combined with `ctaDestinations`' `hrefSuffix` for `signUp`/`signIn`, since the base URL differs per environment and doesn't belong duplicated a third time in `ctaDestinations.json`.
 
-There are exactly four CTA destinations, each with its own component with **fixed copy and href** (a PostHog audit found dozens of different button texts pointing at the same four URLs, which made it impossible to tell which copy converted best — see `/handbook/marketing/website#call-to-action-buttons` for the non-engineer-facing explanation and a live gallery of every variant):
+There are exactly five CTA destinations, each with its own component with **fixed copy and href** (a PostHog audit found dozens of different button texts pointing at the same handful of URLs, which made it impossible to tell which copy converted best — see `/handbook/marketing/website#call-to-action-buttons` for the non-engineer-facing explanation and a live gallery of every variant):
 
 | Component | href | Fixed label |
 |---|---|---|
@@ -278,8 +278,9 @@ There are exactly four CTA destinations, each with its own component with **fixe
 | `nuxt/components/CtaSignIn.vue` | `site.appURL` | "Sign In" |
 | `nuxt/components/CtaContactUs.vue` | `/contact-us/` | "Contact Us" |
 | `nuxt/components/CtaBookDemo.vue` | `/book-demo/` | "Book a Demo" |
+| `nuxt/components/CtaPricing.vue` | `/pricing/` | "View Pricing" |
 
-All four are thin wrappers around `nuxt/components/cta/CtaButton.vue`, which does the actual styling/tracking and isn't meant to be used directly. If a page needs different wording, that's a sign a fifth destination-specific component is needed — not a prop that lets callers override copy on these four.
+All five are thin wrappers around `nuxt/components/cta/CtaButton.vue`, which does the actual styling/tracking and isn't meant to be used directly. If a page needs different wording, that's a sign a sixth destination-specific component is needed — not a prop that lets callers override copy on these five.
 
 **Props** (all optional except `variant`/`position`): `variant` (`primary` | `primary-outlined` | `highlight` | `highlight-outlined` | `ghost` | `nav-text`), `position` (free string, sent to PostHog — describes where on the page, e.g. `hero`, `pricing-card`), `plan` (e.g. `edge`/`hub`/`fleet`, sent to PostHog), `color` (`primary`|`highlight`|`white`, only for `variant="ghost"`, which has no background of its own), `icon` (Nuxt Icon name for a trailing icon), `uppercase`, `padded` (only for `variant="nav-text"` — whether it has the header-`<ul>` link padding or is true zero-padding inline text), `preview` (renders identically but doesn't navigate or call `capture()` — used by the handbook's live example gallery so clicking a doc example can't send a real event or leave the page).
 
@@ -287,7 +288,7 @@ All four are thin wrappers around `nuxt/components/cta/CtaButton.vue`, which doe
 
 There's no `size` prop — every real-button variant's padding/font-size is hardcoded to match `.ff-btn` exactly (see the Computed-tab note in the gotchas below), so a size knob would only ever have affected icon dimensions. It was removed once confirmed nothing used a non-default value.
 
-Click tracking: `capture(event, { position, variant, plan? })` via `nuxt/composables/useCapture.ts`, which wraps the global `window.capture()` from `src/_includes/analytics/body.html` (shared with 11ty, no-ops without analytics consent). Event names: `cta-sign-up`, `cta-sign-in`, `cta-contact-us`, `cta-book-demo`.
+Click tracking: `capture(event, { position, variant, plan? })` via `nuxt/composables/useCapture.ts`, which wraps the global `window.capture()` from `src/_includes/analytics/body.html` (shared with 11ty, no-ops without analytics consent). Event names: `cta-sign-up`, `cta-sign-in`, `cta-contact-us`, `cta-book-demo`, `cta-pricing`.
 
 ### Gotchas already solved here (don't re-discover them)
 
@@ -299,6 +300,16 @@ Click tracking: `capture(event, { position, variant, plan? })` via `nuxt/composa
 - **The `ui` prop override doesn't reach compoundVariants-driven classes.** The gotcha above (full-string replacement) only applies to the app.config-level base extension; UButton's own `variant`/`color`-driven classes (e.g. `ghost`'s `hover:bg-{color}/10`) are computed separately and still get merged in via `tv()` regardless of what `ui.base` says. `CtaButton.vue`'s ghost color classes explicitly add `hover:bg-transparent` to cancel that default hover background, since a ghost CTA should have none at all.
 - **UButton's `to` prop treats any same-origin-looking path as a Nuxt route, even if Nuxt doesn't serve it.** `CtaContactUs`/`CtaBookDemo` point at `/contact-us/` and `/book-demo/`, which are still 11ty — without `external`, clicking does a client-side Vue Router navigation instead of a real page load, and 404s instead of reaching the server-side 11ty proxy. `CtaButton.vue` takes a fixed (non-caller-configurable) `external` prop per destination; `CtaContactUs`/`CtaBookDemo` set it `true`, `CtaSignUp`/`CtaSignIn` set it `false` (moot — those hrefs are already cross-origin). **When `/contact-us/` or `/book-demo/` actually migrates to Nuxt, flip that destination's `external` to `false`** — leaving it `true` would keep forcing a full page reload where a client-side nav would work fine.
 
+### 11ty equivalent
+
+`src/_includes/components/cta/` holds five Nunjucks macros (`ctaSignUp`, `ctaSignIn`, `ctaContactUs`, `ctaBookDemo`, `ctaPricing`) mirroring the Vue components above — same fixed copy/href/event per destination, same `{ position, variant }` capture payload (no `preview` or `external` prop: 11ty has no handbook gallery to guard against, and every `<a>` is a real page load already, no Vue Router to fight). All five delegate to a shared `ctaButton` macro in the same folder (`cta-button.njk`) for the actual class-building/tracking, same relationship as `CtaButton.vue` to its wrappers.
+
+No `plan` param on the 11ty side — that's only used on the pricing table, which is Nuxt-only (there's no 11ty pricing page to call it from). If 11ty ever grows a caller that needs it, add it back rather than passing it unused today.
+
+`ctaSignUp`/`ctaSignIn` take `site` as their first argument (`site.appURL` for the href) instead of reading it from the calling template's context — Nunjucks macros don't inherit the caller's context unless explicitly imported `with context`, and passing `site` explicitly avoids relying on that import mode everywhere the macro is used.
+
+Every hand-written `<a class="ff-btn ...">` pointing at one of the five destinations has been migrated to these macros — there should be no new ones. A link to a URL outside the five fixed destinations (e.g. `/ai/`) is not part of this system and stays hand-written.
+
 ## Naming conventions
 
 - All slugs: **kebab-case**
diff --git a/.eleventy.js b/.eleventy.js
index 01105ef345..18e6ed43e4 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -150,6 +150,31 @@ module.exports = function(eleventyConfig) {
         watch: ["_site/**/*.css", "_site/**/*.js"],
     })
 
+    // CTA event/href/label data (single source of truth shared with the Nuxt
+    // Cta* components, which import the same src/_data/ctaDestinations.json)
+    // registered as a Nunjucks *global* rather than page data: the five
+    // ctaSignUp/ctaSignIn/ctaContactUs/ctaBookDemo/ctaPricing macros need to
+    // read it, and Nunjucks macros don't see page-context data
+    // (addGlobalData) unless it's explicitly passed in as an argument -
+    // addNunjucksGlobal makes it visible everywhere, macros included, with no
+    // per-call-site plumbing.
+    // Registered once with a stable object reference, then refreshed IN PLACE
+    // on every build (not re-registered via a second addNunjucksGlobal call,
+    // which only affected later builds - templates already held a reference
+    // to the first, now-stale value, so mid-watch edits rendered `undefined`
+    // until the whole process restarted). Mutating the same object's keys
+    // means every template holding a reference to it sees the update too.
+    const ctaDestinationsPath = require.resolve('./src/_data/ctaDestinations.json')
+    const ctaDestinations = require(ctaDestinationsPath)
+    eleventyConfig.addNunjucksGlobal('ctaDestinations', ctaDestinations)
+    eleventyConfig.addWatchTarget(ctaDestinationsPath)
+    eleventyConfig.on('eleventy.before', () => {
+        delete require.cache[ctaDestinationsPath]
+        const fresh = require(ctaDestinationsPath)
+        Object.keys(ctaDestinations).forEach(key => delete ctaDestinations[key])
+        Object.assign(ctaDestinations, fresh)
+    })
+
     // make global accessible in src/_includes/layouts/base.njk for loading of PH scripts
     eleventyConfig.addGlobalData('POSTHOG_APIKEY', () => process.env.POSTHOG_APIKEY || '' )
     eleventyConfig.addGlobalData('DEV_MODE', () => DEV_MODE || DEV_MODE_POSTS)
diff --git a/nuxt/components/BlogPostCta.vue b/nuxt/components/BlogPostCta.vue
index 7a00f80ac6..a8d5500557 100644
--- a/nuxt/components/BlogPostCta.vue
+++ b/nuxt/components/BlogPostCta.vue
@@ -4,10 +4,9 @@ const props = defineProps<{
     cta?: { type?: string, title?: string, description?: string } | null
 }>()
 
-// 'sign-up' / 'demo' / 'contact' now render one of the unified Cta* components
-// (fixed copy/href/event) instead of a local buttonText/buttonUrl pair, so the
-// blog CTA can't drift from the rest of the site's copy. 'pricing' isn't one
-// of the four unified destinations, so it keeps its own link.
+// All four types now render one of the unified Cta* components (fixed
+// copy/href/event) instead of a local buttonText/buttonUrl pair, so the blog
+// CTA can't drift from the rest of the site's copy.
 const CTA_VARIANTS: Record<string, { title: string, description: string }> = {
     'sign-up': {
         title: 'Start building with your own industrial data',
@@ -60,7 +59,7 @@ function onCtaClick (event: MouseEvent) {
         <CtaSignUp v-if="ctaType === 'sign-up'" variant="highlight" position="blog-post-cta" />
         <CtaBookDemo v-else-if="ctaType === 'demo'" variant="highlight" position="blog-post-cta" />
         <CtaContactUs v-else-if="ctaType === 'contact'" variant="highlight" position="blog-post-cta" />
-        <a v-else class="ff-btn ff-btn--highlight uppercase items-center text-base no-underline" href="/pricing">View Pricing</a>
+        <CtaPricing v-else variant="highlight" position="blog-post-cta" />
       </div>
     </div>
   </div>
diff --git a/nuxt/components/CtaBookDemo.vue b/nuxt/components/CtaBookDemo.vue
index c22e704d5a..0dfb276d78 100644
--- a/nuxt/components/CtaBookDemo.vue
+++ b/nuxt/components/CtaBookDemo.vue
@@ -2,6 +2,8 @@
 // Fixed destination, copy, and tracked event - only the look (variant) and
 // where it lives on the page (position) vary per insertion.
 import CtaButton from './cta/CtaButton.vue'
+// Shared with the equivalent 11ty macro (cta-book-demo.njk) - see CtaSignUp.vue.
+import ctaDestinations from '../../src/_data/ctaDestinations.json'
 
 withDefaults(defineProps<{
     variant: 'primary' | 'primary-outlined' | 'highlight' | 'highlight-outlined' | 'nav-text' | 'ghost'
@@ -14,9 +16,10 @@ withDefaults(defineProps<{
     icon?: string
 }>(), { uppercase: undefined })
 
-const EVENT = 'cta-book-demo'
-const HREF = '/book-demo/'
-const LABEL = 'Book a Demo'
+const dest = ctaDestinations.bookDemo
+const EVENT = dest.event
+const HREF = dest.href
+const LABEL = dest.label
 // /book-demo/ is still served by 11ty, not a Nuxt route - see CtaButton.vue's
 // `external` prop.
 </script>
diff --git a/nuxt/components/CtaContactUs.vue b/nuxt/components/CtaContactUs.vue
index e6d5f03185..fbfed47f84 100644
--- a/nuxt/components/CtaContactUs.vue
+++ b/nuxt/components/CtaContactUs.vue
@@ -2,6 +2,8 @@
 // Fixed destination, copy, and tracked event - only the look (variant) and
 // where it lives on the page (position) vary per insertion.
 import CtaButton from './cta/CtaButton.vue'
+// Shared with the equivalent 11ty macro (cta-contact-us.njk) - see CtaSignUp.vue.
+import ctaDestinations from '../../src/_data/ctaDestinations.json'
 
 withDefaults(defineProps<{
     variant: 'primary' | 'primary-outlined' | 'highlight' | 'highlight-outlined' | 'nav-text' | 'ghost'
@@ -14,9 +16,10 @@ withDefaults(defineProps<{
     icon?: string
 }>(), { uppercase: undefined })
 
-const EVENT = 'cta-contact-us'
-const HREF = '/contact-us/'
-const LABEL = 'Contact Us'
+const dest = ctaDestinations.contactUs
+const EVENT = dest.event
+const HREF = dest.href
+const LABEL = dest.label
 // /contact-us/ is still served by 11ty, not a Nuxt route - see CtaButton.vue's
 // `external` prop.
 </script>
diff --git a/nuxt/components/CtaPricing.vue b/nuxt/components/CtaPricing.vue
new file mode 100644
index 0000000000..669b6359b7
--- /dev/null
+++ b/nuxt/components/CtaPricing.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+// Fixed destination, copy, and tracked event - only the look (variant) and
+// where it lives on the page (position) vary per insertion.
+import CtaButton from './cta/CtaButton.vue'
+// Shared with the equivalent 11ty macro (cta-pricing.njk) - see CtaSignUp.vue.
+import ctaDestinations from '../../src/_data/ctaDestinations.json'
+
+withDefaults(defineProps<{
+    variant: 'primary' | 'primary-outlined' | 'highlight' | 'highlight-outlined' | 'nav-text' | 'ghost'
+    position: string
+    plan?: string
+    color?: 'primary' | 'highlight' | 'white'
+    uppercase?: boolean
+    padded?: boolean
+    preview?: boolean
+    icon?: string
+}>(), { uppercase: undefined })
+
+const dest = ctaDestinations.pricing
+const EVENT = dest.event
+const HREF = dest.href
+const LABEL = dest.label
+// /pricing/ is a Nuxt route (nuxt/pages/pricing/index.vue), not 11ty - see
+// CtaButton.vue's `external` prop.
+</script>
+
+<template>
+  <CtaButton :event="EVENT" :href="HREF" :external="false" :label="LABEL" :variant="variant" :position="position" :plan="plan" :icon="icon" :uppercase="uppercase" :padded="padded" :color="color" :preview="preview" />
+</template>
diff --git a/nuxt/components/CtaSignIn.vue b/nuxt/components/CtaSignIn.vue
index b12149277d..2fd317cc80 100644
--- a/nuxt/components/CtaSignIn.vue
+++ b/nuxt/components/CtaSignIn.vue
@@ -4,6 +4,8 @@
 // First component to give the Sign In link any tracking at all.
 import CtaButton from './cta/CtaButton.vue'
 import site from '../../src/_data/site.json'
+// Shared with the equivalent 11ty macro (cta-sign-in.njk) - see CtaSignUp.vue.
+import ctaDestinations from '../../src/_data/ctaDestinations.json'
 
 withDefaults(defineProps<{
     variant: 'primary' | 'primary-outlined' | 'highlight' | 'highlight-outlined' | 'nav-text' | 'ghost'
@@ -16,9 +18,10 @@ withDefaults(defineProps<{
     icon?: string
 }>(), { uppercase: undefined })
 
-const EVENT = 'cta-sign-in'
-const HREF = site.appURL
-const LABEL = 'Sign In'
+const dest = ctaDestinations.signIn
+const EVENT = dest.event
+const HREF = `${site.appURL}${dest.hrefSuffix}`
+const LABEL = dest.label
 </script>
 
 <template>
diff --git a/nuxt/components/CtaSignUp.vue b/nuxt/components/CtaSignUp.vue
index 5b0402b8b7..17b0b76ab7 100644
--- a/nuxt/components/CtaSignUp.vue
+++ b/nuxt/components/CtaSignUp.vue
@@ -3,6 +3,11 @@
 // where it lives on the page (position) vary per insertion.
 import CtaButton from './cta/CtaButton.vue'
 import site from '../../src/_data/site.json'
+// Event/href-suffix/label all come from this single JSON file, which the
+// equivalent 11ty macro (src/_includes/components/cta/cta-sign-up.njk) also
+// reads - the one place these can drift between the two frameworks if only
+// one side gets updated.
+import ctaDestinations from '../../src/_data/ctaDestinations.json'
 
 const props = withDefaults(defineProps<{
     variant: 'primary' | 'primary-outlined' | 'highlight' | 'highlight-outlined' | 'nav-text' | 'ghost'
@@ -15,16 +20,17 @@ const props = withDefaults(defineProps<{
     icon?: string
 }>(), { uppercase: undefined })
 
-const EVENT = 'cta-sign-up'
-const HREF = `${site.appURL}/account/create`
+const dest = ctaDestinations.signUp
+const EVENT = dest.event
+const HREF = `${site.appURL}${dest.hrefSuffix}`
 
 // Copy varies by placement, per the PostHog CTA analysis: the nav's
 // sitewide "Free Trial" and everywhere else's "Try it out" were the two
 // highest-volume variants for this destination, each proven in its own
 // context. Kept as a fixed lookup (not a caller-supplied prop) so callers
 // can't reintroduce arbitrary copy variants - only `position` decides.
-const NAV_POSITIONS = new Set(['main-nav', 'mobile-cta-bar'])
-const LABEL = computed(() => NAV_POSITIONS.has(props.position) ? 'Free Trial' : 'Try it out')
+const NAV_POSITIONS = new Set(dest.navPositions)
+const LABEL = computed(() => NAV_POSITIONS.has(props.position) ? dest.navLabel : dest.label)
 </script>
 
 <template>
diff --git a/nuxt/content/handbook/marketing/website.md b/nuxt/content/handbook/marketing/website.md
index 9ae8f51cde..8fa7817eba 100644
--- a/nuxt/content/handbook/marketing/website.md
+++ b/nuxt/content/handbook/marketing/website.md
@@ -130,7 +130,7 @@ meta:
 
 ## Call-to-Action Buttons
 
-The site has four main call-to-action destinations, each with **fixed copy** — you cannot write new button text for these, only choose how the button looks and where it sits on the page:
+The site has five main call-to-action destinations, each with **fixed copy** — you cannot write new button text for these, only choose how the button looks and where it sits on the page:
 
 | Component        | Goes to                           | Button text                                          |
 | ---------------- | --------------------------------- | ---------------------------------------------------- |
@@ -138,10 +138,11 @@ The site has four main call-to-action destinations, each with **fixed copy** —
 | `<CtaSignIn>`    | `app.flowfuse.com`                | "Sign In"                                            |
 | `<CtaContactUs>` | `/contact-us/`                    | "Contact Us"                                         |
 | `<CtaBookDemo>`  | `/book-demo/`                     | "Book a Demo"                                        |
+| `<CtaPricing>`   | `/pricing/`                       | "View Pricing"                                       |
 
-If a page needs different wording than what's listed above, that's a sign the destination needs a fifth CTA, not a new prop on these four or custom inline code.
+If a page needs different wording than what's listed above, that's a sign the destination needs a sixth CTA, not a new prop on these five or custom inline code.
 
-**These components only exist on Nuxt-rendered pages** (`nuxt/pages/`, `nuxt/content/`), part of the site is still served by Eleventy and doesn't have access to them yet. On an Eleventy page, a CTA is still a hand-written `<a class="ff-btn ...">` link.
+**These exact components only exist on Nuxt-rendered pages** (`nuxt/pages/`, `nuxt/content/`). The part of the site still served by Eleventy uses the equivalent Nunjucks macros described in [11ty pages](#11ty-pages) below — same five destinations, same fixed copy, same tracking, just written differently since the two frameworks don't share templates.
 
 ### Choosing a style
 
@@ -222,6 +223,20 @@ The dark card above is just to make the white text visible in this doc, use `col
 | `color`    | No       | Only for `variant="ghost"`: `primary`, `highlight`, or `white` — which text color to use, since a ghost button has no background to imply one |
 | `icon`     | No       | An icon name to show after the button text, e.g. `i-lucide-arrow-right`                                                                       |
 
+### 11ty pages
+
+Pages still served by Eleventy (most of the site outside the handbook, docs, and a handful of migrated Nuxt pages) use five Nunjucks macros instead of the Vue components above, in `src/_includes/components/cta/`: `ctaSignUp`, `ctaSignIn`, `ctaContactUs`, `ctaBookDemo`, `ctaPricing`. Same five destinations, same fixed copy, same variants, and the same tracking (they send the same `cta-sign-up`/`cta-sign-in`/`cta-contact-us`/`cta-book-demo`/`cta-pricing` events with `{ position, variant }`), so a PostHog report doesn't need to care which framework a click came from.
+
+```njk
+{% from "components/cta/cta-book-demo.njk" import ctaBookDemo %}
+...
+{{ ctaBookDemo('highlight', 'hero') }}
+```
+
+`ctaSignUp` and `ctaSignIn` need `site` (the global 11ty site data) as their first argument, since Nunjucks macros don't automatically see the calling page's variables: `{{ ctaSignUp(site, 'primary-outlined', 'footer') }}`.
+
+There's no `plan` prop on the 11ty side (nothing on Eleventy calls the pricing table, which is Nuxt-only) — everything else in the props reference above applies the same way, just as positional/keyword macro arguments instead of Vue props.
+
 ## Requesting New Website Pages
 
 If you would like the marketing team to create a new page, landing page, or apply website
diff --git a/nuxt/pages/product/[tier].vue b/nuxt/pages/product/[tier].vue
index 2278576cae..44cc7a2c84 100644
--- a/nuxt/pages/product/[tier].vue
+++ b/nuxt/pages/product/[tier].vue
@@ -30,8 +30,6 @@ useSeoMeta({
     ogUrl: `https://flowfuse.com/product/${tierId}/`,
     twitterSite: '@FlowFuseinc',
 })
-
-const capture = useCapture()
 </script>
 
 <template>
@@ -49,12 +47,7 @@ const capture = useCapture()
           <p class="mt-6 text-lg max-w-xl mx-auto md:mx-0" v-html="tier.description" />
           <div class="mt-8 flex flex-row flex-wrap gap-4 items-center justify-center md:justify-start">
             <CtaBookDemo variant="highlight" :position="`${tierId}-hero`" />
-            <a class="ff-btn group flex flex-col" href="/pricing/" @click="capture('cta-pricing', { position: `${tierId}-hero` })">
-              <span class="flex items-center justify-center gap-2 text-base uppercase text-indigo-600 hover:text-indigo-800">
-                <span>VIEW PRICING</span>
-                <IconsArrowRightIcon class="w-5 h-5" />
-              </span>
-            </a>
+            <CtaPricing variant="ghost" :position="`${tierId}-hero`" icon="i-lucide-arrow-right" />
           </div>
         </div>
         <div class="rounded-lg shadow-2xl border-2 border-red-100 overflow-hidden">
diff --git a/nuxt/pages/product/index.vue b/nuxt/pages/product/index.vue
index 60eb7d3481..36147c5567 100644
--- a/nuxt/pages/product/index.vue
+++ b/nuxt/pages/product/index.vue
@@ -119,12 +119,7 @@ onUnmounted(() => {
               <p class="mt-6 text-lg max-w-xl mx-auto lg:mx-0">Bridge the gap between OT and IT teams using FlowFuse, the only comprehensive application platform with industrial AI and governance baked in.</p>
               <div class="mt-8 flex flex-row flex-wrap gap-4 items-center justify-center lg:justify-start">
                 <CtaBookDemo variant="highlight" position="hero" />
-                <a class="ff-btn group flex flex-col" href="/pricing/" @click="capture('cta-pricing', { position: 'hero' })">
-                  <span class="flex items-center justify-center gap-2 text-base uppercase text-indigo-600 hover:text-indigo-800">
-                    <span>VIEW PRICING</span>
-                    <IconsArrowRightIcon class="w-5 h-5" />
-                  </span>
-                </a>
+                <CtaPricing variant="ghost" position="hero" icon="i-lucide-arrow-right" />
               </div>
             </div>
             <div class="w-full">
@@ -219,12 +214,7 @@ onUnmounted(() => {
           <p class="text-indigo-50 font-light text-xl max-w-2xl m-0">Your first operational application could be running this week. Request a demo to see how, or explore pricing to find the right fit.</p>
           <div class="flex flex-col sm:flex-row gap-4 items-center">
             <CtaBookDemo variant="highlight" position="get-started" />
-            <a class="ff-btn group flex flex-col" href="/pricing/" @click="capture('cta-pricing', { position: 'get-started' })">
-              <span class="text-base uppercase items-center text-base flex gap-2 uppercase items-center text-white hover:text-gray-200">
-              <span>VIEW PRICING</span>
-                <IconsArrowRightIcon class="w-5 h-5" />
-              </span>
-            </a>
+            <CtaPricing variant="ghost" color="white" position="get-started" icon="i-lucide-arrow-right" />
           </div>
         </div>
       </div>
diff --git a/src/_data/ctaDestinations.json b/src/_data/ctaDestinations.json
new file mode 100644
index 0000000000..c0319ab5bb
--- /dev/null
+++ b/src/_data/ctaDestinations.json
@@ -0,0 +1,29 @@
+{
+    "signUp": {
+        "event": "cta-sign-up",
+        "hrefSuffix": "/account/create",
+        "label": "Try it out",
+        "navLabel": "Free Trial",
+        "navPositions": ["main-nav", "mobile-cta-bar"]
+    },
+    "signIn": {
+        "event": "cta-sign-in",
+        "hrefSuffix": "",
+        "label": "Sign In"
+    },
+    "contactUs": {
+        "event": "cta-contact-us",
+        "href": "/contact-us/",
+        "label": "Contact Us"
+    },
+    "bookDemo": {
+        "event": "cta-book-demo",
+        "href": "/book-demo/",
+        "label": "Book a Demo"
+    },
+    "pricing": {
+        "event": "cta-pricing",
+        "href": "/pricing/",
+        "label": "View Pricing"
+    }
+}
diff --git a/src/_includes/common-cta.njk b/src/_includes/common-cta.njk
index fb44ca0dde..023aefb16e 100644
--- a/src/_includes/common-cta.njk
+++ b/src/_includes/common-cta.njk
@@ -1,3 +1,5 @@
+{% from "components/cta/cta-sign-up.njk" import ctaSignUp %}
+{% from "components/cta/cta-contact-us.njk" import ctaContactUs %}
 <div class="w-full bg-white pt-12 pb-10">
     <h3 class="flex items-center text-center justify-center">
         <div class="flex flex-col leading-9 text-3xl mb-4 red-gradient font-semibold">
@@ -13,8 +15,7 @@
                 </p>
             </div>
             <div class="flex flex-col items-center">
-                <a class='ff-btn ff-btn--primary-outlined uppercase align-baseline w-full' href='/contact-us/'
-                onclick="capture('cta-contact-us', {'position': 'secondary'}, {'reference': '{{ title or meta.title or "common-cta" }}'})">Contact Us</a>
+                {{ ctaContactUs('primary-outlined', 'secondary', extraClass='align-baseline w-full') }}
             </div>
         </div>
         <div class="features-card">
@@ -25,7 +26,7 @@
                 </p>
             </div>
             <div class="flex flex-col items-center">
-                <a class="ff-btn ff-btn--primary uppercase align-baseline w-full" href="{% include "sign-up-url.njk" %}" onclick="capture('cta-join', {'position': 'secondary'})">TRY FOR FREE</a>
+                {{ ctaSignUp(site, 'primary', 'secondary', extraClass='align-baseline w-full') }}
             </div>
         </div>
     </div>
diff --git a/src/_includes/components/cta/cta-book-demo.njk b/src/_includes/components/cta/cta-book-demo.njk
new file mode 100644
index 0000000000..4081cbf059
--- /dev/null
+++ b/src/_includes/components/cta/cta-book-demo.njk
@@ -0,0 +1,15 @@
+{% from "components/cta/cta-button.njk" import ctaButton %}
+{#
+  Fixed destination, copy, and tracked event - only the look (variant) and
+  where it lives on the page (position) vary per insertion. Mirrors
+  nuxt/components/CtaBookDemo.vue. Already the one destination that was
+  consistently named 'cta-book-demo' across all of 11ty, so no rename needed
+  here - just centralising the markup.
+
+  Event/href/label come from src/_data/ctaDestinations.json - the single
+  source of truth shared with the Nuxt component.
+#}
+{% macro ctaBookDemo(variant, position, color=none, icon=false, uppercase=none, padded=false, extraClass='') %}
+{%- set dest = ctaDestinations.bookDemo -%}
+{{ ctaButton(dest.event, dest.href, dest.label, variant, position, color, icon, uppercase, padded, extraClass) }}
+{%- endmacro %}
diff --git a/src/_includes/components/cta/cta-button.njk b/src/_includes/components/cta/cta-button.njk
new file mode 100644
index 0000000000..4358f09b82
--- /dev/null
+++ b/src/_includes/components/cta/cta-button.njk
@@ -0,0 +1,57 @@
+{#
+  Internal building block for the destination-specific CTA macros in this
+  folder (cta-sign-up.njk, cta-sign-in.njk, cta-contact-us.njk,
+  cta-book-demo.njk). Not meant to be included directly elsewhere - event
+  name, href, and copy are fixed per destination on purpose, so this macro
+  only ever handles *how it looks*.
+
+  Mirrors nuxt/components/cta/CtaButton.vue - event names and the
+  {position, variant} capture payload must stay identical to the Nuxt side so
+  PostHog reports can group clicks from both halves of the site under one
+  event name. No `plan` param here (unlike Nuxt's CtaButton): that's only
+  used on the pricing table, which is Nuxt-only - no 11ty caller needs it.
+#}
+{% macro ctaButton(event, href, label, variant, position, color=none, icon=false, uppercase=none, padded=false, extraClass='') %}
+{%- set isNavText = variant == 'nav-text' -%}
+{%- set isGhost = variant == 'ghost' -%}
+{#- Vue's CtaButton defaults uppercase to `!isNavTextVariant` when the caller
+    doesn't pass it; `none` here is that same "not passed" sentinel. -#}
+{%- set showUppercase = uppercase if uppercase != none else not isNavText -%}
+{%- set caseClass = 'uppercase' if showUppercase else 'normal-case' -%}
+{%- if isNavText -%}
+    {#- ff-nav-freetrial (header "Free Trial") vs a plain inline link (utility
+        bar "Sign In") both come through as extraClass from the caller, same
+        as Nuxt. Font-weight is deliberately NOT set here (unlike Nuxt's
+        CtaButton, which hardcodes font-normal): Nuxt can get away with that
+        because Nuxt UI merges its `ui.base` and the caller's `class` through
+        tailwind-merge, which resolves a font-normal/font-medium clash by
+        override intent (the caller's class always wins). A plain <a class="">
+        here has no such merge step - two conflicting font-weight utilities
+        on the same element resolve by whichever rule Tailwind happened to
+        emit later in the compiled stylesheet, not by which one is "meant" to
+        win, so hardcoding font-normal previously fought Sign In's own
+        font-medium (from extraClass) and silently won, undoing it. Free
+        Trial still renders font-normal correctly without this - it comes
+        from the pre-existing `.ff-website header .cta a { font-normal }`
+        rule in style.css, which matches directly on the element and beats
+        inheritance cleanly (no utility-class collision involved). -#}
+    {%- set padClass = 'px-3 py-4' if padded else 'p-0' -%}
+    {%- set classes = caseClass ~ ' no-underline ' ~ padClass -%}
+{%- elif isGhost -%}
+    {%- set classes = 'ff-btn ff-btn--ghost ff-btn--ghost-' ~ (color if color else 'primary') ~ ' ' ~ caseClass -%}
+{%- else -%}
+    {%- set classes = 'ff-btn ff-btn--' ~ variant ~ ' ' ~ caseClass -%}
+{%- endif -%}
+{%- if extraClass -%}{%- set classes = classes ~ ' ' ~ extraClass -%}{%- endif -%}
+{%- set captureProps = {'position': position, 'variant': variant} -%}
+{#- The label+icon span is ONLY added when there's actually an icon to lay
+    out next to - a plain label stays a bare text node like before. Wrapping
+    unconditionally broke header CTAs: several `header ul span` / `header
+    span` rules (see style.css, written for the mega-menu's own label spans)
+    target any <span> under `header` with an explicit `:not(.ff-nav-label)`
+    escape hatch - a generic wrapper span here has neither that class nor
+    .ff-icon, so it got caught by those rules (forced padding, dark text)
+    instead of the button's own white/ff-btn styling. Icon usages (hero,
+    "Try it out", why-flowfuse) all live outside <header>, so this is safe. -#}
+<a class="{{ classes }}" href="{{ href }}" onclick='capture("{{ event }}", {{ captureProps | json | safe }})'>{% if isNavText %}<span class="ff-nav-label">{{ label }}</span>{% elif icon %}<span class="inline-flex items-center gap-2">{{ label }}{% include "components/icons/arrow-right.svg" %}</span>{% else %}{{ label }}{% endif %}</a>
+{%- endmacro %}
diff --git a/src/_includes/components/cta/cta-contact-us.njk b/src/_includes/components/cta/cta-contact-us.njk
new file mode 100644
index 0000000000..d2c8897992
--- /dev/null
+++ b/src/_includes/components/cta/cta-contact-us.njk
@@ -0,0 +1,18 @@
+{% from "components/cta/cta-button.njk" import ctaButton %}
+{#
+  Fixed destination, copy, and tracked event - only the look (variant) and
+  where it lives on the page (position) vary per insertion. Mirrors
+  nuxt/components/CtaContactUs.vue.
+
+  Event/href/label come from src/_data/ctaDestinations.json - the single
+  source of truth shared with the Nuxt component.
+
+  Standardises on the 'cta-contact-us' event name used by Nuxt - previously
+  11ty fired five different names for this same destination (cta-talk-us,
+  cta-talk-to-sales, cta-talk-to-expert, cta-contact, plus this one), which
+  made it impossible to report "all Contact Us clicks" as a single metric.
+#}
+{% macro ctaContactUs(variant, position, color=none, icon=false, uppercase=none, padded=false, extraClass='') %}
+{%- set dest = ctaDestinations.contactUs -%}
+{{ ctaButton(dest.event, dest.href, dest.label, variant, position, color, icon, uppercase, padded, extraClass) }}
+{%- endmacro %}
diff --git a/src/_includes/components/cta/cta-pricing.njk b/src/_includes/components/cta/cta-pricing.njk
new file mode 100644
index 0000000000..eaec678c18
--- /dev/null
+++ b/src/_includes/components/cta/cta-pricing.njk
@@ -0,0 +1,13 @@
+{% from "components/cta/cta-button.njk" import ctaButton %}
+{#
+  Fixed destination, copy, and tracked event - only the look (variant) and
+  where it lives on the page (position) vary per insertion. Mirrors
+  nuxt/components/CtaPricing.vue.
+
+  Event/href/label come from src/_data/ctaDestinations.json - the single
+  source of truth shared with the Nuxt component.
+#}
+{% macro ctaPricing(variant, position, color=none, icon=false, uppercase=none, padded=false, extraClass='') %}
+{%- set dest = ctaDestinations.pricing -%}
+{{ ctaButton(dest.event, dest.href, dest.label, variant, position, color, icon, uppercase, padded, extraClass) }}
+{%- endmacro %}
diff --git a/src/_includes/components/cta/cta-sign-in.njk b/src/_includes/components/cta/cta-sign-in.njk
new file mode 100644
index 0000000000..c020606fe0
--- /dev/null
+++ b/src/_includes/components/cta/cta-sign-in.njk
@@ -0,0 +1,16 @@
+{% from "components/cta/cta-button.njk" import ctaButton %}
+{#
+  Fixed destination, copy, and tracked event - only the look (variant) and
+  where it lives on the page (position) vary per insertion. Mirrors
+  nuxt/components/CtaSignIn.vue.
+
+  Event/href-suffix/label come from src/_data/ctaDestinations.json - the
+  single source of truth shared with the Nuxt component.
+
+  First 11ty usage to give the Sign In link any tracking at all - it
+  previously had no capture() call anywhere on the site.
+#}
+{% macro ctaSignIn(site, variant, position, color=none, icon=false, uppercase=none, padded=false, extraClass='') %}
+{%- set dest = ctaDestinations.signIn -%}
+{{ ctaButton(dest.event, site.appURL ~ dest.hrefSuffix, dest.label, variant, position, color, icon, uppercase, padded, extraClass) }}
+{%- endmacro %}
diff --git a/src/_includes/components/cta/cta-sign-up.njk b/src/_includes/components/cta/cta-sign-up.njk
new file mode 100644
index 0000000000..48bc53a31f
--- /dev/null
+++ b/src/_includes/components/cta/cta-sign-up.njk
@@ -0,0 +1,25 @@
+{% from "components/cta/cta-button.njk" import ctaButton %}
+{#
+  Fixed destination, copy, and tracked event - only the look (variant) and
+  where it lives on the page (position) vary per insertion. Mirrors
+  nuxt/components/CtaSignUp.vue.
+
+  Event/href-suffix/label all come from src/_data/ctaDestinations.json - the
+  single source of truth shared with the Nuxt component, which imports the
+  same file - so the two never drift apart on those without both being
+  updated at once.
+
+  `site` is passed explicitly (rather than relied on via `with context`
+  import) so this macro works the same regardless of how it's imported.
+  `ctaDestinations` isn't a parameter: it's a Nunjucks global (see
+  .eleventy.js), so it doesn't need one.
+#}
+{% macro ctaSignUp(site, variant, position, color=none, icon=false, uppercase=none, padded=false, extraClass='') %}
+{#- Copy varies by placement, per the PostHog CTA analysis referenced in
+    CtaSignUp.vue: "Free Trial" in the nav, "Try it out" everywhere else.
+    Fixed lookup, not a caller-supplied prop, so callers can't reintroduce
+    arbitrary copy variants - only `position` decides. -#}
+{%- set dest = ctaDestinations.signUp -%}
+{%- set label = dest.navLabel if position in dest.navPositions else dest.label -%}
+{{ ctaButton(dest.event, site.appURL ~ dest.hrefSuffix, label, variant, position, color, icon, uppercase, padded, extraClass) }}
+{%- endmacro %}
diff --git a/src/_includes/components/top-utility-bar.njk b/src/_includes/components/top-utility-bar.njk
index 84704b6561..94b8a0e3d2 100644
--- a/src/_includes/components/top-utility-bar.njk
+++ b/src/_includes/components/top-utility-bar.njk
@@ -1,3 +1,4 @@
+{% from "components/cta/cta-sign-in.njk" import ctaSignIn %}
 {# Slim top utility bar: rotating announcements (left) + quick links (right).
    Pattern adapted from tailscale.com's slim top bar. The announcement slot
    rotates through every entry in src/_data/events.yaml; entries without an
@@ -23,7 +24,7 @@
             {% endfor %}
         </div>
         <!-- Mobile Sign In (quick-links nav below is hidden under md) -->
-        <a href="{{ site.appURL }}" class="md:hidden shrink-0 text-indigo-100 hover:text-white no-underline hover:no-underline font-medium">Sign In</a>
+        {{ ctaSignIn(site, 'nav-text', 'utility-bar-mobile', extraClass='md:hidden shrink-0 text-indigo-100 hover:text-white no-underline hover:no-underline font-medium') }}
         <!-- Quick links (right) -->
         <nav class="hidden md:flex items-center gap-5 shrink-0" aria-label="Quick links">
             <a href="/about/" class="text-indigo-100 hover:text-white no-underline hover:no-underline">About us</a>
@@ -32,7 +33,7 @@
             <a href="/support/" class="text-indigo-100 hover:text-white no-underline hover:no-underline">Support</a>
             <a href="/platform/device-agent/" class="text-indigo-100 hover:text-white no-underline hover:no-underline">Install on edge</a>
             <span class="h-4 w-px bg-indigo-400/40" aria-hidden="true"></span>
-            <a href="{{ site.appURL }}" class="text-indigo-100 hover:text-white no-underline hover:no-underline font-medium">Sign In</a>
+            {{ ctaSignIn(site, 'nav-text', 'utility-bar', extraClass='text-indigo-100 hover:text-white no-underline hover:no-underline font-medium') }}
         </nav>
     </div>
 </div>
diff --git a/src/_includes/cta-get-started.njk b/src/_includes/cta-get-started.njk
index cd9ee2e768..5e7e972756 100644
--- a/src/_includes/cta-get-started.njk
+++ b/src/_includes/cta-get-started.njk
@@ -1,5 +1,10 @@
+{% from "components/cta/cta-book-demo.njk" import ctaBookDemo %}
+{#- Every caller of this include sets cta.buttonLink to /book-demo/ - the
+    fixed CtaBookDemo destination/copy/event replace the old data-driven
+    buttonLink/buttonText/event trio, so only cta.title/description (and
+    cta.position, for tracking) still come from the caller. -#}
 <div class="rounded-xl px-9 py-12 flex flex-col items-center gap-8 text-center ff-get-started-bg">
     <p class="text-white text-5xl font-medium m-0">{{ cta.title }}</p>
     <p class="text-indigo-50 font-light text-xl max-w-2xl m-0">{{ cta.description }}</p>
-    <a class="ff-btn ff-btn--highlight" href="{{ cta.buttonLink }}" onclick="capture('cta-book-demo', {'position': '{{ cta.position }}'})">{{ cta.buttonText }}</a>
+    {{ ctaBookDemo('highlight', cta.position) }}
 </div>
diff --git a/src/_includes/get-started.njk b/src/_includes/get-started.njk
index 5e6cbc9a4a..bc82276149 100644
--- a/src/_includes/get-started.njk
+++ b/src/_includes/get-started.njk
@@ -1,3 +1,5 @@
+{% from "components/cta/cta-sign-up.njk" import ctaSignUp %}
+{% from "components/cta/cta-contact-us.njk" import ctaContactUs %}
 <div class="m-auto w-full text-center sm:text-left mb-2">
     <h2 class="font-bold"><span class="text-red-600">Get Started</span> with FlowFuse</h2>
     <p class="-mt-1">Explore our <a href="/pricing/" class="underline">pricing</a></p>
@@ -11,9 +13,7 @@
             <h3 class="flex justify-center sm:justify-start font-semibold text-xl">FlowFuse Cloud</h3>
             <p class="font-light mt-6">Our managed hosted solution, maintained and supported by the FlowFuse team. Experience flexibility, scalability, and expert assistance to drive your business forward.</p>
         </div>
-        <a class="mt-4 ff-btn ff-btn--highlight uppercase inline-block self-center sm:self-start"
-            href="{% include "sign-up-url.njk" %}"
-            onclick="capture('cta-try-it-now', {'position': 'secondary'})">Try it out</a>
+        {{ ctaSignUp(site, 'highlight', 'secondary', extraClass='mt-4 inline-block self-center sm:self-start') }}
     </div>
     <div class="w-full mt-4 md:mt-0 flex flex-col justify-between">
         <div>
@@ -23,8 +23,6 @@
             <h3 class="flex justify-center sm:justify-start font-semibold text-xl">On Premise</h3>
             <p class="font-light mt-6">Deploy FlowFuse on your hardware for enhanced flexibility. Opt for self-hosted deployment with FlowFuse, enabling on-premises installation and full control over your deployment process.</p>
         </div>
-        <a class="mt-4 mb-6 sm:mb-0 ff-btn ff-btn--primary uppercase inline-block self-center sm:self-start"
-            href="/contact-us/" onclick="capture('cta-trial-license', {'position': 'secondary'})">CONTACT US
-        </a>
+        {{ ctaContactUs('primary', 'secondary', extraClass='mt-4 mb-6 sm:mb-0 inline-block self-center sm:self-start') }}
     </div>
 </div>
\ No newline at end of file
diff --git a/src/_includes/layouts/abm-landing.njk b/src/_includes/layouts/abm-landing.njk
index 19c436ddd3..1c78feb388 100644
--- a/src/_includes/layouts/abm-landing.njk
+++ b/src/_includes/layouts/abm-landing.njk
@@ -2,6 +2,8 @@
 layout: page
 nohero: true
 ---
+{% from "components/cta/cta-sign-up.njk" import ctaSignUp %}
+{% from "components/cta/cta-book-demo.njk" import ctaBookDemo %}
 <!--Hero Content-->
 <div class="w-full px-6">
     <div class="w-full py-12 md:pt-6">
@@ -21,25 +23,8 @@ nohero: true
                     </ul>
                 </div>
                 <div class="md:mt-3 gap-4 hidden md:flex md:flex-row md:inline md:items-start md:justify-start md:m-0">
-                    {% macro freeDemoButton(desktop=true) %}
-                    <a class="ff-btn ff-btn--primary text-base flex inline uppercase {% if desktop %}min-h-[40px]{% else %}w-full m-auto mt-12{% endif %}"
-                        href="{{ hero.buttonLink }}"
-                        onclick="capture('cta-demo', {'reference': '{{ hero.buttonReference }}'})">
-                        {{ hero.buttonText }}
-                    </a>
-                    {% endmacro %}
-                    {{freeDemoButton() }}
-                    {% macro tryItOutButton(desktop=true) %}
-                    <a class="ff-btn uppercase text-base {% if desktop %}inline{% else %}flex flex-col w-full m-auto sm:mt-12{% endif %}"
-                        href="{% include "sign-up-url.njk" %}"
-                        onclick="capture('cta-try-now', {'reference': '{{ hero.buttonReference }}'})">
-                        <span class="flex gap-2 uppercase items-center text-indigo-600 hover:text-indigo-800">
-                            <span>Start Free Trial</span>
-                            {% include "components/icons/arrow-right.svg" %}
-                        </span>
-                    </a>
-                    {% endmacro %}
-                    {{ tryItOutButton() }}
+                    {{ ctaBookDemo('primary', 'hero', extraClass='inline min-h-[40px]') }}
+                    {{ ctaSignUp(site, 'ghost', 'hero', icon=true, extraClass='inline') }}
                 </div>
             </div>
             <div class="md:w-2/5 flex-grow relative">
@@ -49,8 +34,8 @@ nohero: true
                 </div>
             </div>
             <div class="flex flex-col sm:flex-row md:hidden gap-3">
-                {{ freeDemoButton(false) }}
-                {{ tryItOutButton(false) }}
+                {{ ctaBookDemo('primary', 'hero-mobile', extraClass='w-full mt-12 min-h-[40px]') }}
+                {{ ctaSignUp(site, 'ghost', 'hero-mobile', icon=true, extraClass='flex flex-col w-full m-auto sm:mt-12') }}
             </div>
         </div>
     </div>
@@ -184,8 +169,8 @@ nohero: true
         <h3 class="mb-6 w-full text-center">{{ ctaSection.title }}</h3>
         <p class="text-center">{{ ctaSection.description }}</p>
         <div class="flex max-sm:flex-col max-md:mx-auto gap-3 justify-center mt-8">
-            <a class="ff-btn ff-btn--primary min-h-[40px] uppercase" href="{{ hero.buttonLink }}" onclick="capture('cta-demo', {'position': 'secondary'}, {'reference': '{{ hero.buttonReference }}'})">{{ ctaSection.primaryCta }}</a>
-            <a class="ff-btn ff-btn--primary-outlined min-h-[40px] uppercase" href="{% include "sign-up-url.njk" %}" onclick="capture('cta-try-now', {'position': 'secondary'}, {'reference': '{{ hero.buttonReference }}'})">{{ ctaSection.secondaryCta }}</a>
+            {{ ctaBookDemo('primary', 'secondary', extraClass='min-h-[40px]') }}
+            {{ ctaSignUp(site, 'primary-outlined', 'secondary', extraClass='min-h-[40px]') }}
         </div>
     </div>
 </div>
diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk
index bf62556b3b..85bab4fadb 100644
--- a/src/_includes/layouts/base.njk
+++ b/src/_includes/layouts/base.njk
@@ -23,6 +23,9 @@ eleventyComputed:
     keywords: "{{ meta.keywords }}"
 ---
 
+{% from "components/cta/cta-sign-up.njk" import ctaSignUp %}
+{% from "components/cta/cta-sign-in.njk" import ctaSignIn %}
+{% from "components/cta/cta-contact-us.njk" import ctaContactUs %}
 <!doctype html>
 <html lang="en">
 <head>
@@ -179,9 +182,7 @@ eleventyComputed:
                         {% include "components/flowfuse-square.svg" %}
                     </a>
                     <div class="flex items-center gap-2 md:hidden relative z-20">
-                        <a class="ff-btn ff-btn--primary uppercase text-sm inline-flex whitespace-nowrap" href="/contact-us" onclick="capture('cta-talk-us', {'position': 'header-mobile'})">
-                            Contact Us
-                        </a>
+                        {{ ctaContactUs('primary', 'header-mobile', extraClass='text-sm inline-flex whitespace-nowrap') }}
                         <button id="nav-toggle" class="text-gray-700 flex items-center text-red-hero">
                             <svg class="burger fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
                             <svg class="close fill-current h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
@@ -218,21 +219,19 @@ eleventyComputed:
                     </ul>
                     <!-- CTAs -->
                     <ul class="cta hidden md:flex flex-row items-center justify-end font-medium text no-underline z-10 bg-transparent w-auto">
-			            <li class="hidden md:flex"><a class="ff-nav-freetrial" href="{% include "sign-up-url.njk" %}" onclick="capture('cta-join', {'position': 'header'})"><span class="ff-nav-label">Free Trial</span></a></li>
+			            <li class="hidden md:flex">{{ ctaSignUp(site, 'nav-text', 'main-nav', padded=true, extraClass='ff-nav-freetrial text-base') }}</li>
                         <li class="flex">
-                            <a class="ml-2 ff-btn ff-btn--primary uppercase text-sm inline-flex whitespace-nowrap" href="/contact-us" onclick="capture('cta-talk-us', {'position': 'header'})">
-                                Contact Us
-                            </a>
+                            {{ ctaContactUs('primary', 'main-nav', extraClass='ml-2 text-sm inline-flex whitespace-nowrap') }}
                         </li>
                     </ul>
                 </nav>
                 <!-- Mobile CTAs -->
                 <div id="mobile-ctas" class="hidden fixed bottom-0 z-20">
                     <div class="grid grid-cols-2 gap-2">
-                        <a href="{{ site.appURL }}" class="ff-btn ff-btn--primary-outlined">Sign In</a>
-                        <a href="{% include "sign-up-url.njk" %}" onclick="capture('cta-join', {'position': 'header'})" class="ff-btn ff-btn--primary-outlined">Free Trial</a>
+                        {{ ctaSignIn(site, 'primary-outlined', 'mobile-cta-bar') }}
+                        {{ ctaSignUp(site, 'primary-outlined', 'mobile-cta-bar') }}
                     </div>
-                    <a class="ff-btn ff-btn--primary" href="/contact-us" onclick="capture('cta-talk-to-sales', {'position': 'header'})">Contact Us</a>
+                    {{ ctaContactUs('primary', 'mobile-cta-bar') }}
                 </div>
             </header>
     <!-- Main Content: wrapped in the flex-grow base so the column layout still
diff --git a/src/_includes/layouts/industry.njk b/src/_includes/layouts/industry.njk
index 3918797a9f..f7871a6ee8 100644
--- a/src/_includes/layouts/industry.njk
+++ b/src/_includes/layouts/industry.njk
@@ -1,6 +1,8 @@
 ---
 layout: default
 ---
+{% from "components/cta/cta-book-demo.njk" import ctaBookDemo %}
+{% from "components/cta/cta-contact-us.njk" import ctaContactUs %}
 <div class="w-full">
 
     <!-- ============================================================
@@ -25,21 +27,8 @@ layout: default
                     <div class="md:mt-3 gap-2 hidden md:flex md:flex-col md:items-start md:justify-start">
                         {% if hero.subCta %}<p class="text-sm text-gray-600 m-0 mb-1">{{ hero.subCta }}</p>{% endif %}
                         <div class="flex gap-4 items-center flex-row">
-                            <a class="ff-btn ff-btn--highlight min-h-[40px] uppercase"
-                                href="{{ hero.primaryCtaLink }}"
-                                onclick="capture('cta-book-demo', {'position': 'hero', 'page': '{{ slug }}'})">
-                                <span class="text-base uppercase items-center">
-                                    {{ hero.primaryCta }}
-                                </span>
-                            </a>
-                            <a class="ff-btn flex items-center gap-2 text-base uppercase text-indigo-600 hover:text-indigo-800"
-                                href="{{ hero.secondaryCtaLink }}"
-                                onclick="capture('cta-contact', {'position': 'hero', 'page': '{{ slug }}'})">
-                                <span class="text-base uppercase items-center flex gap-2 uppercase items-center text-indigo-600 hover:text-indigo-800">
-                                {{ hero.secondaryCta }}
-                                {% include "components/icons/arrow-right.svg" %}
-                                </span>
-                            </a>
+                            {{ ctaBookDemo('highlight', 'hero', extraClass='min-h-[40px]') }}
+                            {{ ctaContactUs('ghost', 'hero', icon=true) }}
                         </div>
                     </div>
                 </div>
@@ -51,21 +40,8 @@ layout: default
                 <div class="flex flex-col md:hidden gap-3 mt-8 items-start">
                     {% if hero.subCta %}<p class="text-sm text-gray-600 m-0 mb-1">{{ hero.subCta }}</p>{% endif %}
                     <div class="flex flex-row gap-4 items-center justify-start flex-wrap">
-                        <a class="ff-btn ff-btn--highlight min-h-[40px] uppercase"
-                            href="{{ hero.primaryCtaLink }}"
-                            onclick="capture('cta-book-demo', {'position': 'hero-mobile', 'page': '{{ slug }}'})">
-                            <span class="text-base uppercase items-center">
-                                {{ hero.primaryCta }}
-                            </span>
-                        </a>
-                        <a class="ff-btn flex items-center gap-2 text-base uppercase text-indigo-600 hover:text-indigo-800"
-                            href="{{ hero.secondaryCtaLink }}"
-                            onclick="capture('cta-contact', {'position': 'hero-mobile', 'page': '{{ slug }}'})">
-                            <span class="text-base uppercase items-center flex gap-2 uppercase items-center text-indigo-600 hover:text-indigo-800">
-                                {{ hero.secondaryCta }}
-                                {% include "components/icons/arrow-right.svg" %}
-                            </span>
-                        </a>
+                        {{ ctaBookDemo('highlight', 'hero-mobile', extraClass='min-h-[40px]') }}
+                        {{ ctaContactUs('ghost', 'hero-mobile', icon=true) }}
                     </div>
                 </div>
             </div>
@@ -209,11 +185,7 @@ layout: default
             <h3 class="mb-4 w-full text-center">{{ cta.title }}</h3>
             <p class="text-center text-gray-600 mb-8 max-w-2xl mx-auto">{{ cta.description }}</p>
             <div class="flex justify-center">
-                <a class="ff-btn ff-btn--highlight min-h-[40px] uppercase"
-                    href="{{ cta.buttonLink }}"
-                    onclick="capture('cta-book-demo', {'position': 'cta', 'page': '{{ slug }}'})">
-                    {{ cta.buttonText }}
-                </a>
+                {{ ctaBookDemo('highlight', 'cta', extraClass='min-h-[40px]') }}
             </div>
         </div>
     </div>
diff --git a/src/_includes/layouts/story.njk b/src/_includes/layouts/story.njk
index abc0697a71..8c4afb7a93 100644
--- a/src/_includes/layouts/story.njk
+++ b/src/_includes/layouts/story.njk
@@ -1,7 +1,7 @@
 ---
 layout: layouts/base.njk
 ---
-
+{% from "components/cta/cta-book-demo.njk" import ctaBookDemo %}
 <div class="w-full page post story">
     {% if title %}
     <div class="w-full py-6 bg-cover bg-center md:py-9 md:min-h-[272px] md:flex md:content-center" style="background-image: linear-gradient(to right, #1F2937, #1F293700), url({{ image }})">
@@ -94,8 +94,7 @@ layout: layouts/base.njk
                                 {% endfor %}
                             </ul>
                         </div>
-                        <a class="md:self-end ff-btn ff-btn--primary uppercase align-baseline w-full mt-3" href="/book-demo/"
-                        onclick="capture('cta-book-demo', {'reference': 'Customer Story: {{ title }}'})">BOOK A DEMO</a>
+                        {{ ctaBookDemo('primary', 'story-cta', extraClass='md:self-end align-baseline w-full mt-3') }}
                     </div>
                     {% if hubspot.formId %}
                     <div class="flex flex-col mt-6 px-6">
diff --git a/src/_includes/layouts/use-case.njk b/src/_includes/layouts/use-case.njk
index d3a0372a73..210b1d51fd 100644
--- a/src/_includes/layouts/use-case.njk
+++ b/src/_includes/layouts/use-case.njk
@@ -2,6 +2,8 @@
 layout: layouts/base.njk
 sitemapPriority: 0.7
 ---
+{% from "components/cta/cta-sign-up.njk" import ctaSignUp %}
+{% from "components/cta/cta-book-demo.njk" import ctaBookDemo %}
 {# ============================================================
    USE CASE LAYOUT (content-driven, pain-led narrative)
 
@@ -39,7 +41,7 @@ sitemapPriority: 0.7
             <h1 class="m-auto max-w-3xl font-medium"><span class="text-indigo-600">{{ title }}</span></h1>
             <p class="mt-6 max-w-2xl mx-auto text-lg text-gray-600">{{ problem }}</p>
             <div class="mt-10 flex flex-wrap gap-4 justify-center">
-                <a class="ff-btn ff-btn--highlight min-h-[40px] uppercase" href="/book-demo/" onclick="capture('cta-talk-to-expert', {'position': 'hero', 'usecase': '{{ page.fileSlug }}'})">Talk to an expert</a>
+                {{ ctaBookDemo('highlight', 'hero', extraClass='min-h-[40px]') }}
             </div>
         </div>
     </div>
@@ -315,8 +317,8 @@ sitemapPriority: 0.7
             <h3 class="mb-4 w-full text-center">{{ closingCta.heading or "See it on your operations" }}</h3>
             <p class="text-gray-600 mb-8 max-w-xl mx-auto text-center">{{ closingCta.description or "Talk to an expert, or get started with FlowFuse today." }}</p>
             <div class="flex flex-wrap gap-4 justify-center">
-                <a class="ff-btn ff-btn--highlight min-h-[40px] uppercase" href="/book-demo/" onclick="capture('cta-talk-to-expert', {'position': 'footer', 'usecase': '{{ page.fileSlug }}'})">Talk to an expert</a>
-                <a class="ff-btn ff-btn--primary-outlined min-h-[40px] uppercase" href="{% include "sign-up-url.njk" %}" onclick="capture('cta-join', {'position': 'footer', 'usecase': '{{ page.fileSlug }}'})">Get started</a>
+                {{ ctaBookDemo('highlight', 'footer', extraClass='min-h-[40px]') }}
+                {{ ctaSignUp(site, 'primary-outlined', 'footer', extraClass='min-h-[40px]') }}
             </div>
         </div>
     </div>
diff --git a/src/css/style.css b/src/css/style.css
index ab9bda62e3..a11ffaa797 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -2545,6 +2545,34 @@ lite-youtube::before {
         border: 1px solid var(--color-red-700);
     }
 
+    /* Ghost: reads like a real button (bold, uppercase, same padding via the
+       shared .ff-btn rule above) but has no background/border of its own -
+       e.g. the homepage hero "Try it out" over a photo. Mirrors
+       CtaButton.vue's ghost variant; -color modifier picks the text color
+       since a transparent button has none to imply one. */
+    .ff-website .ff-btn.ff-btn--ghost {
+        background-color: transparent;
+        border: 0;
+    }
+    .ff-website .ff-btn.ff-btn--ghost-primary {
+        color: var(--color-indigo-600);
+    }
+    .ff-website .ff-btn.ff-btn--ghost-primary:hover {
+        color: var(--color-indigo-800);
+    }
+    .ff-website .ff-btn.ff-btn--ghost-highlight {
+        color: var(--color-red-600);
+    }
+    .ff-website .ff-btn.ff-btn--ghost-highlight:hover {
+        color: var(--color-red-800);
+    }
+    .ff-website .ff-btn.ff-btn--ghost-white {
+        color: white;
+    }
+    .ff-website .ff-btn.ff-btn--ghost-white:hover {
+        color: var(--color-gray-200);
+    }
+
     /* Shared "Get Started" CTA backdrop - homepage (cta-get-started.njk and
        its includers) and the /product page both use this exact gradient. */
     .ff-get-started-bg {
diff --git a/src/events/proveit-2026.njk b/src/events/proveit-2026.njk
index f3fce68020..8cfea4099f 100644
--- a/src/events/proveit-2026.njk
+++ b/src/events/proveit-2026.njk
@@ -18,6 +18,7 @@ sessionHighlights:
     - Real-world integration with the ProveIt! ecosystem showcasing efficiency gains
     - Practical steps to implement unified industrial architectures
 ---
+{% from "components/cta/cta-book-demo.njk" import ctaBookDemo %}
 <div class="w-full nohero py-20">
     <!-- Hero Section -->
     <div class="w-full px-6">
@@ -137,9 +138,7 @@ sessionHighlights:
                 <p>Take control of your industrial data and improve efficiency across your operations.</p>
             </div>
             <div class="flex items-start justify-start sm:order-2 order-3 sm:self-end sm:pb-6 max-sm:mt-6">
-                <a class="ff-btn ff-btn--primary uppercase items-center text-base" href="/book-demo/">
-                    BOOK A DEMO
-                </a>
+                {{ ctaBookDemo('primary', 'hero', extraClass='items-center') }}
             </div>
         </div>
     </div>
diff --git a/src/index.njk b/src/index.njk
index b7f03ee6c6..e302833933 100644
--- a/src/index.njk
+++ b/src/index.njk
@@ -112,6 +112,8 @@ hubspot:
   cta: "cta-blog-subscribe"
   reference: "homepage"
 ---
+{% from "components/cta/cta-sign-up.njk" import ctaSignUp %}
+{% from "components/cta/cta-book-demo.njk" import ctaBookDemo %}
 <!--Hero Content-->
 <section class="w-full relative bg-indigo-800 md:min-h-[800px]">
     {% if heroImages.length %}
@@ -141,18 +143,8 @@ hubspot:
                     </p>
                     <div class="flex flex-col mt-12">
                         <div class="m-auto flex gap-4 items-center justify-center flex-row">
-                            <a class="ff-btn ff-btn--highlight flex flex-col mb-6" href="/book-demo/" onclick="capture('cta-book-demo', {'position': 'hero'})">
-                                <span class="text-base uppercase items-center">
-                                    BOOK A DEMO
-                                </span>
-                            </a>
-                            <a class="ff-btn group flex flex-col mb-6" href="{% include 'sign-up-url.njk' %}"
-                            onclick="capture('cta-try-it-now', {'position': 'hero'})">
-                                <span class="text-base uppercase items-center text-base flex gap-2 uppercase items-center text-white hover:text-gray-200">
-                                    <span>TRY IT OUT</span>
-                                    {% include "components/icons/arrow-right.svg" %}
-                                </span>
-                            </a>
+                            {{ ctaBookDemo('highlight', 'hero', extraClass='flex flex-col mb-6') }}
+                            {{ ctaSignUp(site, 'ghost', 'hero', color='white', icon=true, extraClass='flex flex-col mb-6') }}
                         </div>
                     </div>
                 </div>
@@ -263,10 +255,8 @@ hubspot:
         <h2 class="mt-4 md:text-5xl">FlowFuse is the industrial application platform that sits between your systems and your operations</h2>
         <p>Whether you're extending an existing system, standardizing a proven solution across sites, or connecting OT and IT data flows, FlowFuse gives your team the platform to <strong>build once and run everywhere</strong>.</p>
         <div class="flex gap-4 items-center max-md:justify-center flex-wrap mt-6">
-            <a class="ff-btn ff-btn--primary" href="/book-demo/" onclick="capture('cta-book-demo', {'position': 'secondary'})">BOOK A DEMO</a>
-            <a class="ff-btn" href="{% include 'sign-up-url.njk' %}" onclick="capture('cta-try-it-out', {'position': 'secondary'})">
-                <span class="text-base uppercase flex gap-2 items-center text-indigo-600 hover:text-indigo-800"><span>TRY IT OUT</span> {% include "components/icons/arrow-right.svg" %}</span>
-            </a>
+            {{ ctaBookDemo('primary', 'secondary') }}
+            {{ ctaSignUp(site, 'ghost', 'secondary', icon=true) }}
         </div>
     </div>
 </div>
@@ -346,7 +336,7 @@ hubspot:
                         <p class="text-indigo-50 font-light text-xl leading-6 m-0">That's how a small team manages operations across dozens of sites, without rebuilding from scratch every time.</p>
                         <p class="text-red-50 font-medium text-xl leading-6 m-0">Ready to build yours?</p>
                         <div class="flex justify-center md:justify-end mt-2">
-                            <a class="ff-btn ff-btn--highlight" href="/book-demo/" onclick="capture('cta-book-demo', {'position': 'oas'})">BOOK A DEMO</a>
+                            {{ ctaBookDemo('highlight', 'oas') }}
                         </div>
                     </div>
                 </div>
@@ -400,7 +390,14 @@ hubspot:
                     </div>
                     <p class="text-gray-700 font-light m-0">Speed without governance creates new debt. FlowFuse provides the production layer where AI-assisted work becomes visible, versioned, secure, and reusable, across the enterprise.</p>
                 </div>
-                <a href="/book-demo/" class="group hover:no-underline flex items-center justify-end gap-1.5 text-indigo-600 mt-6" onclick="capture('cta-book-demo', {'position': 'ai'})">
+                {#- No plain-text-link variant exists yet in the shared Cta*
+                    system (CLAUDE.md reserves `text` for that), and ghost is
+                    too heavy (bold/uppercase/button padding) for this inline
+                    sentence-style link - kept hand-written until that variant
+                    exists, but still fires the same unified event/props
+                    shape as the real CtaBookDemo would, tagged variant="text"
+                    so it's identifiable in PostHog as this one-off style. -#}
+                <a href="/book-demo/" class="group hover:no-underline flex items-center justify-end gap-1.5 text-indigo-600 mt-6" onclick='capture("cta-book-demo", {"position": "ai", "variant": "text"})'>
                     <span class="group-hover:underline">Book a demo</span>
                     <span class="w-5 h-5 shrink-0 flex items-center [&>svg]:w-full [&>svg]:h-full">{% include "components/icons/arrow-long-right.svg" %}</span>
                 </a>
diff --git a/src/industries.njk b/src/industries.njk
index 84e78f343f..3bb97cb45b 100644
--- a/src/industries.njk
+++ b/src/industries.njk
@@ -6,6 +6,8 @@ meta:
   title: "Industries"
   description: "FlowFuse helps industrial teams connect, automate, and standardize operations across sectors. Explore how FlowFuse is applied in your industry."
 ---
+{% from "components/cta/cta-sign-up.njk" import ctaSignUp %}
+{% from "components/cta/cta-contact-us.njk" import ctaContactUs %}
 <div class="w-full">
 
     <!-- HERO with CTA buttons -->
@@ -15,7 +17,7 @@ meta:
             <h1 class="m-auto max-w-3xl font-medium">Built for the way <span class="text-indigo-600">your industry</span> operates</h1>
             <p class="mt-6 max-w-2xl mx-auto text-lg text-gray-600">FlowFuse meets manufacturers where they are, connecting OT and IT systems, automating workflows, and standardizing operations across every site.</p>
             <div class="mt-10 flex flex-wrap gap-4 justify-center">
-                <a class="ff-btn ff-btn--highlight min-h-[40px] uppercase" href="/contact-us/" onclick="capture('cta-talk-to-expert', {'position': 'hero', 'page': 'industries-hub'})">Talk to an expert</a>
+                {{ ctaContactUs('highlight', 'hero', extraClass='min-h-[40px]') }}
             </div>
         </div>
     </div>
@@ -52,8 +54,8 @@ meta:
             <h3 class="mb-4 w-full text-center">See it in your plant</h3>
             <p class="text-gray-600 mb-8 max-w-xl mx-auto text-center">Talk to an expert, or get started with FlowFuse today.</p>
             <div class="flex flex-wrap gap-4 justify-center">
-                <a class="ff-btn ff-btn--highlight min-h-[40px] uppercase" href="/contact-us/" onclick="capture('cta-talk-to-expert', {'position': 'footer', 'page': 'industries-hub'})">Talk to an expert</a>
-                <a class="ff-btn ff-btn--primary-outlined min-h-[40px] uppercase" href="{% include "sign-up-url.njk" %}" onclick="capture('cta-join', {'position': 'footer', 'page': 'industries-hub'})">Get started</a>
+                {{ ctaContactUs('highlight', 'footer', extraClass='min-h-[40px]') }}
+                {{ ctaSignUp(site, 'primary-outlined', 'footer', extraClass='min-h-[40px]') }}
             </div>
         </div>
     </div>
diff --git a/src/industries/aerospace-components.md b/src/industries/aerospace-components.md
index b14858145c..a993d32b36 100644
--- a/src/industries/aerospace-components.md
+++ b/src/industries/aerospace-components.md
@@ -8,10 +8,6 @@ hero:
   eyebrowIcon: "components/icons/cog-6-tooth.svg"
   heading: "<span class='text-red-600'>First Article Inspection shouldn't take days to assemble.</span> Neither should a SCAR response."
   description: "Connect ERP, CMMs, machining centres, special process suppliers, and inspection systems in one place. FlowFuse helps component shops automate traceability, enforce NADCAP and customer compliance, and standardize workflows across cells and sites."
-  primaryCta: "BOOK A 30-MINUTE DEMO"
-  primaryCtaLink: "/book-demo/"
-  secondaryCta: "CONTACT US"
-  secondaryCtaLink: "/contact-us/"
   image: "/images/industries/aerospace-components.jpg"
   imageAlt: "Quality engineer inspecting a precision-machined aerospace component using a coordinate measuring machine (CMM)"
 problemImage: "images/industries/aerospace-components-problem.svg"
diff --git a/src/industries/automotive.njk b/src/industries/automotive.njk
index a0ee670999..2adbc4c32c 100644
--- a/src/industries/automotive.njk
+++ b/src/industries/automotive.njk
@@ -24,10 +24,6 @@ hero:
   eyebrowIcon: "components/icons/car.svg"
   heading: '<span class="text-red-600">Scale automotive operations</span> without rewiring your stack'
   description: "Connect PLCs, SCADA, MES, and plant IT systems in one place. FlowFuse helps teams monitor, automate, and standardize production workflows across plants in real time."
-  primaryCta: "BOOK A DEMO"
-  primaryCtaLink: "/book-demo/"
-  secondaryCta: "VIEW PRICING"
-  secondaryCtaLink: "/pricing/"
   image: "/images/industries/automotive.jpg"
   imageAlt: "Aerial view of an automotive manufacturing plant floor"
   testimonial:
@@ -118,6 +114,8 @@ cta:
   buttonLink: "/book-demo/"
   position: "final-cta"
 ---
+{% from "components/cta/cta-book-demo.njk" import ctaBookDemo %}
+{% from "components/cta/cta-pricing.njk" import ctaPricing %}
 <!-- ============================================================
      HERO
 ============================================================ -->
@@ -138,17 +136,8 @@ cta:
                 </h1>
                 <p class="mt-6 text-gray-700">{{ hero.description }}</p>
                 <div class="mt-8 flex gap-4 items-center max-md:justify-center flex-wrap">
-                    <a class="ff-btn ff-btn--highlight uppercase"
-                        href="{{ hero.primaryCtaLink }}"
-                        onclick="capture('cta-book-demo', {'position': 'hero'})">
-                        {{ hero.primaryCta }}
-                    </a>
-                    <a class="flex items-center gap-2 text-base uppercase font-bold text-indigo-600 hover:text-indigo-800"
-                        href="{{ hero.secondaryCtaLink }}"
-                        onclick="capture('cta-pricing', {'position': 'hero'})">
-                        {{ hero.secondaryCta }}
-                        {% include "components/icons/arrow-right.svg" %}
-                    </a>
+                    {{ ctaBookDemo('highlight', 'hero') }}
+                    {{ ctaPricing('ghost', 'hero', icon=true) }}
                 </div>
             </div>
             <div class="w-full md:flex md:items-center">
diff --git a/src/industries/aviation-aerospace.md b/src/industries/aviation-aerospace.md
index 914562cafc..db74d06f81 100644
--- a/src/industries/aviation-aerospace.md
+++ b/src/industries/aviation-aerospace.md
@@ -8,10 +8,6 @@ hero:
   eyebrowIcon: "components/icons/airplane.svg"
   heading: "Build the complete traceability record your AS9100 audit requires, <span class=\"text-red-600\">without manual reconstruction.</span>"
   description: "Connect ERP, MES, torque tools, NDT systems, and shop floor stations in one place. FlowFuse helps teams link process data to part serials at point of operation, automate NCR workflows, and standardize execution across programs and sites."
-  primaryCta: "BOOK A 30-MINUTE DEMO"
-  primaryCtaLink: "/book-demo/"
-  secondaryCta: "CONTACT US"
-  secondaryCtaLink: "/contact-us/"
   image: "/images/industries/aviation-aerospace.jpg"
   imageAlt: "Technicians assembling aircraft structures across multiple aerospace production stations in a large manufacturing facility"
   subCta: ""
diff --git a/src/industries/electronics-appliances.md b/src/industries/electronics-appliances.md
index 259b8c8411..6e68adda95 100644
--- a/src/industries/electronics-appliances.md
+++ b/src/industries/electronics-appliances.md
@@ -8,10 +8,6 @@ hero:
   eyebrowIcon: "components/icons/computer-desktop.svg"
   heading: "Process variation visible in your data but never acted on is <span class=\"text-red-600\">what drives field failures</span>"
   description: "Connect SMT lines, test stations, ERP, PLM, and inspection systems in one place. FlowFuse helps teams turn process signals into immediate operational responses, and maintain serialized traceability from line to field."
-  primaryCta: "BOOK A 30-MINUTE DEMO"
-  primaryCtaLink: "/book-demo/"
-  secondaryCta: "CONTACT US"
-  secondaryCtaLink: "/contact-us/"
   image: "/images/industries/electronics-appliances.jpg"
   imageAlt: "Automated SMT production line with pick-and-place machines and PCB conveyors inside a modern electronics manufacturing facility"
   subCta: ""
diff --git a/src/industries/food-beverage.md b/src/industries/food-beverage.md
index 6718019343..ec3a8cd896 100644
--- a/src/industries/food-beverage.md
+++ b/src/industries/food-beverage.md
@@ -8,10 +8,6 @@ hero:
   eyebrowIcon: "components/icons/factory.svg"
   heading: "When a CCP breaches, containment should be automatic, <span class=\"text-red-600\">not operator-dependent.</span>"
   description: "Connect filling lines, packaging equipment, MES, ERP, and lab systems in one place. FlowFuse helps teams automate food safety response, maintain complete lot traceability, and standardize workflows across every line and site."
-  primaryCta: "BOOK A 30-MINUTE DEMO"
-  primaryCtaLink: "/book-demo/"
-  secondaryCta: "CONTACT US"
-  secondaryCtaLink: "/contact-us/"
   image: "/images/industries/food-beverage.jpg"
   imageAlt: "Wide-angle view of a modern beverage manufacturing plant with automated bottling lines, stainless steel processing equipment, and high-speed conveyors transporting bottles through production."
   subCta: ""
diff --git a/src/industries/life-sciences.md b/src/industries/life-sciences.md
index 4bd77d5ff3..d0a046eee5 100644
--- a/src/industries/life-sciences.md
+++ b/src/industries/life-sciences.md
@@ -8,10 +8,6 @@ hero:
   eyebrowIcon: "components/icons/academic-cap.svg"
   heading: "Your Electronic Batch Record should be built during production, <span class=\"text-red-600\">not assembled after it ends</span>"
   description: "Connect bioreactors, analytical instruments, LIMS, MES, ELN, and ERP in one place. FlowFuse helps teams automate batch stage coordination, maintain 21 CFR Part 11 data integrity, and carry process logic from development through to commercial GMP production."
-  primaryCta: "BOOK A 30-MINUTE DEMO"
-  primaryCtaLink: "/book-demo/"
-  secondaryCta: "CONTACT US"
-  secondaryCtaLink: "/contact-us/"
   image: "/images/industries/life-sciences.jpg"
   imageAlt: "Wide view of a GMP biopharmaceutical manufacturing facility with stainless steel bioreactors, automated process equipment, and cleanroom production infrastructure."
   subCta: ""
diff --git a/src/industries/renewables.md b/src/industries/renewables.md
index 3cf7dc108f..e5d69aedf2 100644
--- a/src/industries/renewables.md
+++ b/src/industries/renewables.md
@@ -8,10 +8,6 @@ hero:
   eyebrowIcon: "components/icons/wind-turbine.svg"
   heading: "<span class=\"text-red-600\">Scale renewable operations</span> without vendor lock-in"
   description: "Connect solar, wind, and storage assets in one place. FlowFuse helps your team monitor, automate, and optimize every site in real time, without rewriting your entire stack."
-  primaryCta: "BOOK A 30-MINUTE DEMO"
-  primaryCtaLink: "/book-demo/"
-  secondaryCta: "CONTACT US"
-  secondaryCtaLink: "/contact-us/"
   image: "/images/industries/renewable-energies.png"
   imageAlt: "Aerial view of a wind and solar farm with data overlay showing real-time monitoring metrics."
   subCta: "See a sample renewable dashboard"
diff --git a/src/industries/semiconductors.md b/src/industries/semiconductors.md
index b7ea9b6709..df2ca498ed 100644
--- a/src/industries/semiconductors.md
+++ b/src/industries/semiconductors.md
@@ -8,10 +8,6 @@ hero:
   eyebrowIcon: "components/icons/chip.svg"
   heading: "<span class=\"text-red-600\">Zero-Downtime</span> Precision Manufacturing"
   description: "FlowFuse unifies cleanroom monitoring, SMT orchestration, and yield optimization, whether you're running fabs or high-mix electronics lines. No proprietary lock-in."
-  primaryCta: "SCHEDULE PRECISION DEMO"
-  primaryCtaLink: "/book-demo/"
-  secondaryCta: "CONTACT US"
-  secondaryCtaLink: "/contact-us/"
   image: "/images/industries/semiconductors.jpg"
   imageAlt: "Engineers monitoring semiconductor manufacturing equipment in a cleanroom production facility"
   subCta: "See a sample precision manufacturing dashboard"
diff --git a/src/landing/edge-connectivity.njk b/src/landing/edge-connectivity.njk
index 6150e4ddc8..2468f3e7ee 100644
--- a/src/landing/edge-connectivity.njk
+++ b/src/landing/edge-connectivity.njk
@@ -10,10 +10,6 @@ values:
     - "Connect ANY device or protocol – no vendor lock-in"
     - "Deploy and scale Node-RED flows across hundreds of edge locations"
     - "See real-time data from every sensor and machine – instantly"
-hero:
-    buttonText: "Get a Free Demo"
-    buttonLink: "/book-demo/"
-    buttonReference: "abm-edge"
 problem:
     title: "Stuck in <span class='text-indigo-600'>Edge Data Jail?</span>"
     description:
@@ -81,6 +77,4 @@ features:
 ctaSection:
     title: "Take Back Control of Your Edge Data"
     description: "Stop letting vendors hold your data hostage. See how FlowFuse delivers open, scalable edge connectivity in a live demo."
-    primaryCta: "Schedule Your Demo"
-    secondaryCta: "Start Free Trial"
 ---
\ No newline at end of file
diff --git a/src/landing/enterprise-integration.njk b/src/landing/enterprise-integration.njk
index a84441afde..d577e78a05 100644
--- a/src/landing/enterprise-integration.njk
+++ b/src/landing/enterprise-integration.njk
@@ -10,10 +10,6 @@ values:
   - "Real-time integration: factory data in your ERP, cloud, or dashboards"
   - "Out-of-the-box connectors for SAP, Oracle, Dynamics, Power BI, more"
   - "Enterprise-grade security, governance, and deployment flexibility"
-hero:
-  buttonText: "Request an Enterprise Demo"
-  buttonLink: "/book-demo/"
-  buttonReference: "abm-enterprise"
 problem:
   title: "Factory Data and IT Systems <span class='text-indigo-600'>Not Connected?</span>"
   description:
@@ -77,6 +73,4 @@ features:
 ctaSection:
   title: "Connect Your Factory to the Enterprise"
   description: "See FlowFuse unify your shop floor and enterprise in real time. Request a demo and make IT/OT convergence a reality."
-  primaryCta: "Request Enterprise Demo"
-  secondaryCta: "Start Free Trial"
 ---
\ No newline at end of file
diff --git a/src/landing/line-control.njk b/src/landing/line-control.njk
index d435a75721..a75ca21f52 100644
--- a/src/landing/line-control.njk
+++ b/src/landing/line-control.njk
@@ -10,10 +10,6 @@ values:
     - "Custom HMIs built and deployed in days – not months"
     - "Real-time alarms and production data delivered to any screen"
     - "Empower engineers to adapt, own, and improve their lines"
-hero:
-    buttonText: "Request a Demo"
-    buttonLink: "/book-demo/"
-    buttonReference: "abm-line"
 problem:
     title: "Alarm Fatigue. Manual Controls. <span class='text-indigo-600'>Flying Blind?</span>"
     description:
@@ -78,6 +74,4 @@ features:
 ctaSection:
     title: "Put Control Back in Operator Hands"
     description: "See how FlowFuse empowers your line teams to improve efficiency, reduce downtime, and own their workflows."
-    primaryCta: "Request a Demo"
-    secondaryCta: "Start Free Trial"
 ---
\ No newline at end of file
diff --git a/src/landing/plant-orchestration.njk b/src/landing/plant-orchestration.njk
index 6e577cedef..26e71bd9be 100644
--- a/src/landing/plant-orchestration.njk
+++ b/src/landing/plant-orchestration.njk
@@ -10,10 +10,6 @@ values:
     - "Coordinate across lines, teams, and recipes, all in one open platform"
     - "Automate reporting, handoffs, and continuous improvement projects"
     - "Centralized dashboards and workflows accessible plant-wide"
-hero:
-    buttonText: "Request a Demo"
-    buttonLink: "/book-demo/"
-    buttonReference: "abm-plant"
 problem:
     title: "<span class='text-indigo-600'></span>Manual Plant Management</span> Holding You Back?"
     description:
@@ -78,6 +74,4 @@ features:
 ctaSection:
     title: "Move From Spreadsheets to Smart Plant"
     description: "See how FlowFuse lets you orchestrate and automate at scale. Book a live demo and transform your plant operations."
-    primaryCta: "Book a Demo"
-    secondaryCta: "Start Free Trial"
 ---
\ No newline at end of file
diff --git a/src/landing/plc.njk b/src/landing/plc.njk
index b45326c17f..25f322200e 100644
--- a/src/landing/plc.njk
+++ b/src/landing/plc.njk
@@ -141,7 +141,9 @@ resources:
     alt: "Diagnosing and fixing PLC communication latency"
     url: "/blog/2026/06/plc-communication-latency-causes-and-fixes/"
 ---
-
+{% from "components/cta/cta-sign-up.njk" import ctaSignUp %}
+{% from "components/cta/cta-contact-us.njk" import ctaContactUs %}
+{% from "components/cta/cta-book-demo.njk" import ctaBookDemo %}
 <div class="nohero w-full">
 
     <!-- ============================================================
@@ -158,8 +160,8 @@ resources:
                         FlowFuse bridges Programmable Logic Controllers, Siemens, Allen-Bradley, Omron, and more, to MQTT, OPC UA, cloud platforms, and enterprise systems. No expensive gateways, no custom code.
                     </p>
                     <div class="flex gap-3 max-md:max-w-sm max-md:mx-auto max-sm:flex-col max-md:justify-center">
-                        <a class="ff-btn ff-btn--primary min-h-[40px]" href="/contact-us/" onclick="capture('cta-talk-to-an-expert', {'position': 'primary'}, {'page': 'plc'})">TALK TO AN EXPERT</a>
-                        <a class="ff-btn ff-btn--primary-outlined min-h-[40px]" href="{% include "sign-up-url.njk" %}" onclick="capture('cta-get-started', {'position': 'primary'}, {'page': 'plc'})">GET STARTED NOW</a>
+                        {{ ctaContactUs('primary', 'primary', extraClass='min-h-[40px]') }}
+                        {{ ctaSignUp(site, 'primary-outlined', 'primary', extraClass='min-h-[40px]') }}
                     </div>
                 </div>
                 <div class="md:w-2/5 flex-grow relative">
@@ -256,7 +258,7 @@ resources:
                 </div>
             </div>
             <div class="mt-10">
-                <a class="ff-btn ff-btn--primary-outlined" href="/book-demo/" onclick="capture('cta-plc-to-cloud', {'position': 'mid-page'}, {'page': 'plc'})">See a Live PLC-to-Cloud Demo →</a>
+                {{ ctaBookDemo('ghost', 'mid-page', icon=true) }}
             </div>
         </div>
     </div>
@@ -445,7 +447,7 @@ resources:
                 {% endfor %}
             </div>
             <div class="text-center mt-8">
-                <a href="/blog/plc/" class="ff-btn ff-btn--primary-outlined">See All PLC Articles →</a>
+                <a href="/blog/plc/" class="ff-btn uppercase">See All PLC Articles →</a>
             </div>
         </div>
     </div>
@@ -461,8 +463,8 @@ resources:
                     Stop paying for expensive gateways and inflexible SCADA licenses. See how FlowFuse connects your PLCs to the modern industrial stack, in a live demo or a free trial.
                 </p>
                 <div class="flex max-sm:flex-col max-md:mx-auto gap-3 justify-center">
-                    <a class="ff-btn ff-btn--primary min-h-[40px] uppercase" href="/book-demo/" onclick="capture('cta-book-demo', {'position': 'secondary'}, {'page': 'plc'})">Book a Demo</a>
-                    <a class="ff-btn ff-btn--primary-outlined min-h-[40px] uppercase" href="{% include "sign-up-url.njk" %}" onclick="capture('cta-get-started-free', {'position': 'secondary'}, {'page': 'plc'})">Get Started Free</a>
+                    {{ ctaBookDemo('primary', 'secondary', extraClass='min-h-[40px]') }}
+                    {{ ctaSignUp(site, 'primary-outlined', 'secondary', extraClass='min-h-[40px]') }}
                 </div>
             </div>
         </div>
diff --git a/src/node-red/index.njk b/src/node-red/index.njk
index fac367cc3c..a79d12d831 100644
--- a/src/node-red/index.njk
+++ b/src/node-red/index.njk
@@ -55,6 +55,8 @@ meta:
 description: Node-RED is the low-code programming language of choice for industrial applications. Industrial engineers use Node-RED to collect, transform, and integrate data through visualized dashboards.
 sitemapPriority: 0.8
 ---
+{% from "components/cta/cta-sign-up.njk" import ctaSignUp %}
+{% from "components/cta/cta-book-demo.njk" import ctaBookDemo %}
 <!--First two sections-->
 <div class="nohero w-full">
     <!--Hero Content-->
@@ -70,12 +72,12 @@ sitemapPriority: 0.8
             </p>
             <p><span class="font-semibold">FlowFuse enhances Node-RED with enterprise features</span> to accelerate digitalization and optimize industrial processes.</p>
             <p class="md:mb-10">Ready to <span class="font-semibold">get started building with Node-RED</span>?</p>
-            <a class="ff-btn ff-btn--primary hidden min-h-[40px] md:inline" href="{% include "sign-up-url.njk" %}" onclick="capture('cta-try-it-now', {'position': 'nodered'})">TRY IT NOW</a>
+            {{ ctaSignUp(site, 'primary', 'nodered', extraClass='hidden min-h-[40px] md:inline') }}
         </div>
         <div class="max-w-md md:w-1/2 m-auto border-4 border-indigo-200 rounded-xl ff-image-cover">
             {% image "../images/pseudo-editor.png", "Node-RED pseudo UI", [500] %}
         </div>
-        <a class="ff-btn ff-btn--primary flex flex-col w-full md:hidden max-w-md" href="{% include "sign-up-url.njk" %}" onclick="capture('cta-try-it-now', {'position': 'nodered'})">TRY IT NOW</a>
+        {{ ctaSignUp(site, 'primary', 'nodered-mobile', extraClass='flex flex-col w-full md:hidden max-w-md') }}
     </div>   
 </div>
 
@@ -327,7 +329,11 @@ sitemapPriority: 0.8
                                 {{ card.description }}
                             </p>
                         </div>
-                        <a class="md:self-end ff-btn ff-btn--primary-outlined uppercase align-baseline w-full mt-3" href="{{ card.buttonLink }}" {% if card.onClick %}onclick="{{ card.onClick }}"{% endif %}>{{ card.buttonText }}</a>
+                        {% if card.buttonLink == '/book-demo/' %}
+                        {{ ctaBookDemo('primary-outlined', 'nodered-deployment', extraClass='md:self-end align-baseline w-full mt-3') }}
+                        {% else %}
+                        <a class="md:self-end ff-btn ff-btn--primary-outlined uppercase align-baseline w-full mt-3" href="{{ card.buttonLink }}">{{ card.buttonText }}</a>
+                        {% endif %}
                     </div>
                 {% endfor %}
             </div>
diff --git a/src/partners/certify-hardware.njk b/src/partners/certify-hardware.njk
index d09599a106..18667f0d65 100644
--- a/src/partners/certify-hardware.njk
+++ b/src/partners/certify-hardware.njk
@@ -4,6 +4,7 @@ meta:
     title: How to Certify Your Hardware
     description: Follow these steps to get your hardware certified for compatibility with FlowFuse and Node-RED
 ---
+{% from "components/cta/cta-contact-us.njk" import ctaContactUs %}
 <div class="py-20 px-6 md:px-0">
     <h1><div class="m-auto max-w-xl text-center">How to Certify Your Hardware</div></h1>
     <div class="max-w-[550px] m-auto gap-6 md:gap-2">
@@ -52,10 +53,8 @@ meta:
         <div class="flex flex-col gap-6 md:px-10">
             <p class="w-full">After successfully navigating the technical qualification, take the next step by booking a meeting with our team. Together, we'll work towards ensuring your device is fully compatible with FlowFuse and Node-RED.</p>
             <ul class="flex flex-row justify-center w-full items-center">
-                <li class="pb-6 hover:transition-opacity hover:opacity-75 transition ease-in duration-300">
-                    <a href="https://meetings-eu1.hubspot.com/marian-demme" class="inline-block ff-btn ff-btn--primary uppercase w-[218px] m-auto text-center">
-                        <span>BOOK A MEETING</span>
-                    </a>
+                <li class="pb-6">
+                    {{ ctaContactUs('primary', 'certify-hardware', extraClass='inline-block w-[218px] text-center') }}
                 </li>
             </ul>
         </div>
diff --git a/src/partners/ctrlx.njk b/src/partners/ctrlx.njk
index 0f945848a6..1780b1ee39 100644
--- a/src/partners/ctrlx.njk
+++ b/src/partners/ctrlx.njk
@@ -8,6 +8,7 @@ description:
     
 sitemapPriority: 0.6
 ---
+{% from "components/cta/cta-book-demo.njk" import ctaBookDemo %}
 <div class="nohero w-full px-6">
     <!--Hero Content-->
     <div class="w-full px-6 pt-8 md:pt-16 pb-16 md:px-0">
@@ -113,11 +114,7 @@ sitemapPriority: 0.6
                         </p>
                     </div>
                     <div class="container m-auto text-center max-w-4xl flex flex-col md:items-start mt-6 md:mt-8">
-                        <a class="ff-btn ff-btn--primary no-underline flex flex-col" href="/book-demo">
-                            <span class="text-base uppercase md:px-4">
-                                BOOK A DEMO
-                            </span>
-                        </a>
+                        {{ ctaBookDemo('primary', 'hero', extraClass='no-underline flex flex-col') }}
                     </div>
                 </div>
             </div>
diff --git a/src/platform/why-flowfuse.njk b/src/platform/why-flowfuse.njk
index b2cc878813..051f69572c 100644
--- a/src/platform/why-flowfuse.njk
+++ b/src/platform/why-flowfuse.njk
@@ -60,6 +60,8 @@ meta:
           answer: >
             Yes! FlowFuse is designed for seamless migration, fully compatible with existing Node-RED logic and integrations. 
 ---
+{% from "components/cta/cta-sign-up.njk" import ctaSignUp %}
+{% from "components/cta/cta-book-demo.njk" import ctaBookDemo %}
 <div class="nohero w-full px-6">
     <!--Hero Content-->
     <div class="w-full pt-12 pb-20 md:pt-6 md:pb-8">
@@ -81,8 +83,8 @@ meta:
                     </lite-youtube>
                 </div>
                 <div class="flex gap-3 max-md:mx-auto max-sm:flex-col max-md:justify-center">
-                    <a class="ff-btn ff-btn--primary min-h-[40px]" href="/book-demo/" onclick="capture('cta-book-demo', {'position': 'primary'}, {'page': 'why-flowfuse'})">GET A FREE DEMO</a>
-                    <a class="ff-btn min-h-[40px] flex gap-2" href="{% include "sign-up-url.njk" %}" onclick="capture('cta-get-started', {'position': 'primary'}, {'page': 'why-flowfuse'})"><span class="flex gap-2 items-center text-indigo-600 hover:text-indigo-800"><span>GET STARTED</span> {% include "components/icons/arrow-right.svg" %}</span></a>
+                    {{ ctaBookDemo('primary', 'primary', extraClass='min-h-[40px]') }}
+                    {{ ctaSignUp(site, 'ghost', 'primary', icon=true, extraClass='min-h-[40px]') }}
                 </div>
             </div>
             <div class="flex max-md:hidden justify-center m-auto max-w-[550px] ff-image-rounded rounded-lg drop-shadow-lg w-full">
diff --git a/src/use-cases.njk b/src/use-cases.njk
index 82582abfae..4b23bbdd04 100644
--- a/src/use-cases.njk
+++ b/src/use-cases.njk
@@ -6,6 +6,8 @@ meta:
   title: "Use Cases"
   description: "Generic operational workflow patterns for industrial teams. Turn events into action with FlowFuse. Placeholder skeleton hub."
 ---
+{% from "components/cta/cta-sign-up.njk" import ctaSignUp %}
+{% from "components/cta/cta-contact-us.njk" import ctaContactUs %}
 <div class="w-full">
 
     <!-- HERO with CTA buttons -->
@@ -15,7 +17,7 @@ meta:
             <h1 class="m-auto max-w-3xl font-medium">Turn industrial events into <span class="text-indigo-600">action</span></h1>
             <p class="mt-6 max-w-2xl mx-auto text-lg text-gray-600">Operational workflow patterns that follow Event, Decision, Action. Explore how each one is operationalized with FlowFuse.</p>
             <div class="mt-10 flex flex-wrap gap-4 justify-center">
-                <a class="ff-btn ff-btn--highlight min-h-[40px] uppercase" href="/contact-us/" onclick="capture('cta-talk-to-expert', {'position': 'hero', 'page': 'use-cases-hub'})">Talk to an expert</a>
+                {{ ctaContactUs('highlight', 'hero', extraClass='min-h-[40px]') }}
             </div>
         </div>
     </div>
@@ -70,8 +72,8 @@ meta:
             <h3 class="mb-4 w-full text-center">See it on your workflow</h3>
             <p class="text-gray-600 mb-8 max-w-xl mx-auto text-center">Talk to an expert, or get started with FlowFuse today.</p>
             <div class="flex flex-wrap gap-4 justify-center">
-                <a class="ff-btn ff-btn--highlight min-h-[40px] uppercase" href="/contact-us/" onclick="capture('cta-talk-to-expert', {'position': 'footer', 'page': 'use-cases-hub'})">Talk to an expert</a>
-                <a class="ff-btn ff-btn--primary-outlined min-h-[40px] uppercase" href="{% include "sign-up-url.njk" %}" onclick="capture('cta-join', {'position': 'footer', 'page': 'use-cases-hub'})">Get started</a>
+                {{ ctaContactUs('highlight', 'footer', extraClass='min-h-[40px]') }}
+                {{ ctaSignUp(site, 'primary-outlined', 'footer', extraClass='min-h-[40px]') }}
             </div>
         </div>
     </div>
diff --git a/src/use-cases/data-integration.njk b/src/use-cases/data-integration.njk
index dbe5775902..8e16f569b8 100644
--- a/src/use-cases/data-integration.njk
+++ b/src/use-cases/data-integration.njk
@@ -8,10 +8,10 @@ heroImg: ./images/pictograms/data_integration_blue.png
 description:
     <p class="mt-0">Data integration can be a challenging task, especially when dealing with multiple data formats, protocols, and sources. FlowFuse's low-code industrial application platform allows anyone to collect data from multiple sources, apply the data, and update, store, and transmit data to a new service.</p>
 ---
-
+{% from "components/cta/cta-contact-us.njk" import ctaContactUs %}
 <div>
     <div class="mt-6 text-center">
-        <a href="/contact-us/" class="inline-block ff-btn ff-btn--highlight shadow">GET IN TOUCH</a>
+        {{ ctaContactUs('highlight', 'hero', extraClass='inline-block shadow') }}
     </div>
 </div>
 
@@ -137,7 +137,7 @@ description:
             Discover how FlowFuse can power your Data Integration.
         </p>
         <div>
-            <a href="/contact-us" class="inline-block ff-btn ff-btn--primary m-auto">GET IN TOUCH</a>
+            {{ ctaContactUs('primary', 'footer', extraClass='inline-block m-auto') }}
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/use-cases/edge-connectivity.njk b/src/use-cases/edge-connectivity.njk
index 2603228122..3c51173c28 100644
--- a/src/use-cases/edge-connectivity.njk
+++ b/src/use-cases/edge-connectivity.njk
@@ -8,10 +8,10 @@ heroImg: ./images/pictograms/edge_blue.png
 description:
     <p>FlowFuse simplifies the management of deployments to edge devices in manufacturing, from equipment to <a href="/landing/plc/">PLCs</a>. Our platform ensures secure and reliable handling of large-scale deployments, providing seamless edge connectivity solutions.</p>
 ---
-
+{% from "components/cta/cta-contact-us.njk" import ctaContactUs %}
 <div>
     <div class="mt-6 text-center">
-        <a href="/contact-us/" class="inline-block ff-btn ff-btn--highlight shadow uppercase">Speak to our team</a>
+        {{ ctaContactUs('highlight', 'hero', extraClass='inline-block shadow') }}
     </div>
 </div>
 
@@ -91,7 +91,7 @@ description:
             Ready to learn more?
         </p>
         <div>
-            <a href="/contact-us/" class="inline-block ff-btn ff-btn--primary m-auto">Get in touch</a>
+            {{ ctaContactUs('primary', 'footer', extraClass='inline-block m-auto') }}
         </div>
     </div>
 </div>
diff --git a/src/use-cases/it-ot-middleware.njk b/src/use-cases/it-ot-middleware.njk
index e85e5ae475..bb9ec13a6c 100644
--- a/src/use-cases/it-ot-middleware.njk
+++ b/src/use-cases/it-ot-middleware.njk
@@ -29,10 +29,11 @@ heroImg: ./images/pictograms/factory_blue.png
 description:
     <p>FlowFuse streamlines manufacturing automation, from production monitoring to supply chain management. Our intuitive, customizable platform enables simple creation of custom solutions for unique manufacturing needs.</p>
 ---
-
+{% from "components/cta/cta-sign-up.njk" import ctaSignUp %}
+{% from "components/cta/cta-book-demo.njk" import ctaBookDemo %}
 <div class="w-full flex justify-center mt-6">
     <div class="mx-auto text-center flex flex-row gap-8">
-        <a href="/book-demo/" class="inline-block ff-btn ff-btn--highlight shadow uppercase">Book a demo</a>
+        {{ ctaBookDemo('highlight', 'hero', extraClass='inline-block shadow') }}
         <a href="#whitepapers" onclick="scrollToAnchor(event, 'whitepapers')" class="inline-block ff-btn ff-btn--primary-outlined shadow uppercase">Read Whitepaper</a>
     </div>
 </div>
@@ -253,7 +254,7 @@ description:
                             The easiest way to start building industrial applications. No installation required! Simply sign up and gain immediate access to the editor.
                         </p>
                     </div>
-                    <a class="md:self-end ff-btn ff-btn--primary-outlined uppercase align-baseline w-full mt-3" href="{% include "sign-up-url.njk" %}" onclick="capture('cta-join', {'position': 'manufacturing'})">SIGN UP</a>
+                    {{ ctaSignUp(site, 'primary-outlined', 'manufacturing', extraClass='md:self-end align-baseline w-full mt-3') }}
                 </div>
                 <div class="deployment-card white-bg">
                     <div>
diff --git a/src/use-cases/mes.njk b/src/use-cases/mes.njk
index 6a925abe63..97524ab51c 100644
--- a/src/use-cases/mes.njk
+++ b/src/use-cases/mes.njk
@@ -54,6 +54,9 @@ meta:
     description: "FlowFuse provides everything you need to build the robust Manufacturing Execution System (MES) you want, providing everything from production tracking to data analysis, with the components you need and the flexibility to customize as you see fit."
     keywords: "FlowFuse, manufacturing, MES, Industry 4.0, Siemens S7, PLC, Sentron"
 ---
+{% from "components/cta/cta-sign-up.njk" import ctaSignUp %}
+{% from "components/cta/cta-contact-us.njk" import ctaContactUs %}
+{% from "components/cta/cta-book-demo.njk" import ctaBookDemo %}
 <div class="nohero w-full px-6">
     <!--Hero Content-->
     <div class="w-full pt-12 pb-20 md:pt-6 md:pb-8">
@@ -71,8 +74,8 @@ meta:
                     {% image image, imageAlt, [400] %}
                 </div>
                 <div class="flex gap-3 max-md:max-w-sm max-md:mx-auto max-sm:flex-col max-md:justify-center">
-                    <a class="ff-btn ff-btn--primary min-h-[40px]" href="/contact-us/" onclick="capture('cta-talk-to-an-expert', {'position': 'primary'}, {'page': 'mes'})">TALK TO AN EXPERT</a>
-                    <a class="ff-btn ff-btn--primary-outlined min-h-[40px]" href="{% include "sign-up-url.njk" %}" onclick="capture('cta-get-started', {'position': 'primary'}, {'page': 'mes'})">GET STARTED</a>
+                    {{ ctaContactUs('primary', 'primary', extraClass='min-h-[40px]') }}
+                    {{ ctaSignUp(site, 'primary-outlined', 'primary', extraClass='min-h-[40px]') }}
                 </div>
             </div>
             <div class="flex max-md:hidden justify-center m-auto max-w-[550px]">
@@ -140,8 +143,8 @@ meta:
     <div class="ff-blue-card max-sm:max-w-none">
         <h4 class="mb-6 w-full text-center">{{ ctaSection.title }}</h4>
         <div class="flex max-sm:flex-col max-md:mx-auto gap-3 justify-center">
-            <a class="ff-btn ff-btn--primary min-h-[40px] uppercase" href="{{ ctaSection.primaryUrl }}" onclick="capture('cta-contact-us-for-demo', {'position': 'secondary'}, {'page': 'mes'})">{{ ctaSection.primaryCta }}</a>
-            <a class="ff-btn ff-btn--primary-outlined min-h-[40px] uppercase" href="{% if ctaSection.secondaryUrl == 'sign-up-url' %}{% include "sign-up-url.njk" %}{% else %}{{ ctaSection.secondaryUrl }}{% endif %}" onclick="capture('cta-try-flowfuse-now', {'position': 'secondary'}, {'page': 'mes'})">{{ ctaSection.secondaryCta }}</a>
+            {{ ctaBookDemo('primary', 'secondary', extraClass='min-h-[40px]') }}
+            {{ ctaSignUp(site, 'primary-outlined', 'secondary', extraClass='min-h-[40px]') }}
         </div>
     </div>
 </div>
diff --git a/src/use-cases/scada.njk b/src/use-cases/scada.njk
index aa90ef22c0..2a116b3e78 100644
--- a/src/use-cases/scada.njk
+++ b/src/use-cases/scada.njk
@@ -48,6 +48,9 @@ meta:
     description: "FlowFuse provides SCADA value in an Industry 4.0 way and unlocks the potential to modernize your SCADA system with its powerful, customizable, modular components that streamline operations, reduce dependence on costly, monolithic solutions."
     keywords: "FlowFuse, manufacturing, SCADA, Industry 4.0, Siemens S7, PLC, Sentron"
 ---
+{% from "components/cta/cta-sign-up.njk" import ctaSignUp %}
+{% from "components/cta/cta-contact-us.njk" import ctaContactUs %}
+{% from "components/cta/cta-book-demo.njk" import ctaBookDemo %}
 <div class="nohero w-full px-6">
     <!--Hero Content-->
     <div class="w-full pt-12 pb-20 md:pt-6 md:pb-8">
@@ -65,8 +68,8 @@ meta:
                     {% image image, imageAlt, [400] %}
                 </div>
                 <div class="flex gap-3 max-md:max-w-sm max-md:mx-auto max-sm:flex-col max-md:justify-center">
-                    <a class="ff-btn ff-btn--primary min-h-[40px]" href="/contact-us/" onclick="capture('cta-talk-to-an-expert', {'position': 'primary'}, {'page': 'scada'})">TALK TO AN EXPERT</a>
-                    <a class="ff-btn ff-btn--primary-outlined min-h-[40px]" href="{% include "sign-up-url.njk" %}" onclick="capture('cta-get-started', {'position': 'primary'}, {'page': 'scada'})">GET STARTED</a>
+                    {{ ctaContactUs('primary', 'primary', extraClass='min-h-[40px]') }}
+                    {{ ctaSignUp(site, 'primary-outlined', 'primary', extraClass='min-h-[40px]') }}
                 </div>
             </div>
             <div class="flex max-md:hidden justify-center m-auto max-w-[450px]">
@@ -124,8 +127,8 @@ meta:
     <div class="ff-blue-card max-sm:max-w-none">
         <h4 class="mb-6 w-full text-center">{{ ctaSection.title }}</h4>
         <div class="flex max-sm:flex-col max-md:mx-auto gap-3 justify-center">
-            <a class="ff-btn ff-btn--primary min-h-[40px] uppercase" href="{{ ctaSection.primaryUrl }}" onclick="capture('cta-contact-us-for-demo', {'position': 'secondary'}, {'page': 'scada'})">{{ ctaSection.primaryCta }}</a>
-            <a class="ff-btn ff-btn--primary-outlined min-h-[40px] uppercase" href="{% if ctaSection.secondaryUrl == 'sign-up-url' %}{% include "sign-up-url.njk" %}{% else %}{{ ctaSection.secondaryUrl }}{% endif %}" onclick="capture('cta-try-flowfuse-now', {'position': 'secondary'}, {'page': 'scada'})">{{ ctaSection.secondaryCta }}</a>
+            {{ ctaBookDemo('primary', 'secondary', extraClass='min-h-[40px]') }}
+            {{ ctaSignUp(site, 'primary-outlined', 'secondary', extraClass='min-h-[40px]') }}
         </div>
     </div>
 </div>
diff --git a/src/use-cases/uns.njk b/src/use-cases/uns.njk
index cf660121f9..6d2f10af49 100644
--- a/src/use-cases/uns.njk
+++ b/src/use-cases/uns.njk
@@ -9,6 +9,9 @@ meta:
     description: "FlowFuse simplifies UNS adoption for manufacturing companies by providing a user-friendly, low-code platform for deploying and using data from a UNS."
     keywords: "FlowFuse, UNS, Unified Namespace, manufacturing, data, data integration, data management, data visualization, data analysis, data-driven decisions, data silos, real-time data, collaboration, Node-RED, MQTT Broker, low-code, open-source, rapid implementation, seamless integration"
 ---
+{% from "components/cta/cta-sign-up.njk" import ctaSignUp %}
+{% from "components/cta/cta-contact-us.njk" import ctaContactUs %}
+{% from "components/cta/cta-book-demo.njk" import ctaBookDemo %}
 <!--First two sections-->
 <div class="nohero w-full">
     <!--Hero Content-->
@@ -25,8 +28,8 @@ meta:
                     {% image "./images/solutions/ff-uns.png", "FlowFuse connected to many industrial devices", [400] %}
                 </div>
                 <div class="flex gap-3 max-md:max-w-sm max-md:mx-auto max-sm:flex-col max-md:justify-center">
-                    <a class="ff-btn ff-btn--primary min-h-[40px]" href="/contact-us/" onclick="capture('cta-talk-to-an-expert', {'position': 'primary'}, {'page': 'uns'})">TALK TO AN EXPERT</a>
-                    <a class="ff-btn ff-btn--primary-outlined min-h-[40px]" href="{% include "sign-up-url.njk" %}" onclick="capture('cta-get-started', {'position': 'primary'}, {'page': 'uns'})">GET STARTED</a>
+                    {{ ctaContactUs('primary', 'primary', extraClass='min-h-[40px]') }}
+                    {{ ctaSignUp(site, 'primary-outlined', 'primary', extraClass='min-h-[40px]') }}
                 </div>
             </div>
             <div class="flex max-md:hidden justify-center m-auto max-w-[400px]">
@@ -149,8 +152,8 @@ meta:
     <div class="ff-blue-card max-sm:max-w-none">
         <h4 class="mb-6 w-full text-center">Ready to simplify your UNS journey and unlock the power of your industrial data?</h4>
         <div class="flex max-sm:flex-col max-md:mx-auto gap-3 justify-center">
-            <a class="ff-btn ff-btn--primary min-h-[40px]" href="/book-demo/" onclick="capture('cta-contact-us-for-demo', {'position': 'secondary'}, {'page': 'uns'})">CONTACT US FOR DEMO</a>
-            <a class="ff-btn ff-btn--primary-outlined min-h-[40px]" href="{% include "sign-up-url.njk" %}" onclick="capture('cta-try-it-on-the-cloud', {'position': 'secondary'}, {'page': 'uns'})">TRY IT ON THE CLOUD</a>
+            {{ ctaBookDemo('primary', 'secondary', extraClass='min-h-[40px]') }}
+            {{ ctaSignUp(site, 'primary-outlined', 'secondary', extraClass='min-h-[40px]') }}
         </div>
     </div>
     <!-- Learn UNS -->
diff --git a/src/vs/ignition.njk b/src/vs/ignition.njk
index c880e62662..787d4ff3e0 100644
--- a/src/vs/ignition.njk
+++ b/src/vs/ignition.njk
@@ -54,6 +54,7 @@ cta:
     title: "Exploring Alternatives to Ignition?"
     content: "Most teams don't replace Ignition overnight, they start by building the next application somewhere else. <a href='https://meetings-eu1.hubspot.com/michael-davis/round-robin-michael-omar-kasheef?utm_campa[…]113138546&utm_content=113138546&utm_source=hs_automation' class='font-semibold'>Book a demo with a FlowFuse expert</a>."
 ---
+{% from "components/cta/cta-sign-up.njk" import ctaSignUp %}
 <!--Hero Content-->
 <div class="w-full px-6">
     <div class="w-full pt-12 pb-20 md:pt-6 md:pb-8">
@@ -74,17 +75,7 @@ cta:
                     </a>
                     {% endmacro %}
                     {{ migrationExpertButton() }}
-                    {% macro tryItOutButton(desktop=true) %}
-                    <a class="ff-btn uppercase text-base {% if desktop %}inline-flex items-center{% else %}flex flex-col w-full m-auto sm:mt-12{% endif %}"
-                    href="{% include "sign-up-url.njk" %}"
-                    onclick="capture('try-it-out', {'reference': '{{ hero.buttonReference }}'})">
-                        <span class="flex gap-2 uppercase items-center text-indigo-600 hover:text-indigo-800">
-                            <span>TRY IT OUT</span>
-                            {% include "components/icons/arrow-right.svg" %}
-                        </span>
-                    </a>
-                    {% endmacro %}
-                    {{ tryItOutButton() }}
+                    {{ ctaSignUp(site, 'ghost', 'hero', icon=true, extraClass='inline-flex items-center') }}
                 </div>
             </div>
             <div class="md:w-1/2 flex-grow relative">
@@ -95,7 +86,7 @@ cta:
             </div>
             <div class="flex flex-col sm:flex-row md:hidden gap-3">
                 {{ migrationExpertButton(false) }}
-                {{ tryItOutButton(false) }}
+                {{ ctaSignUp(site, 'ghost', 'hero-mobile', icon=true, extraClass='flex flex-col w-full m-auto sm:mt-12') }}
             </div>
         </div>
     </div>
diff --git a/src/vs/kepware.njk b/src/vs/kepware.njk
index 7d3bbcc08d..601543e807 100644
--- a/src/vs/kepware.njk
+++ b/src/vs/kepware.njk
@@ -54,6 +54,7 @@ cta:
     title: "Ready to Leave Kepware Behind?"
     content: "See how FlowFuse helps teams like yours modernize their industrial automation infrastructure, faster, more flexibly, and at lower cost. <a href='https://meetings-eu1.hubspot.com/michael-davis/round-robin-michael-omar-kasheef?utm_campa[…]113138546&utm_content=113138546&utm_source=hs_automation' class='font-semibold'>Book a Demo with a FlowFuse Expert</a>."
 ---
+{% from "components/cta/cta-sign-up.njk" import ctaSignUp %}
 <!--Hero Content-->
 <div class="w-full">
     <div class="w-full pt-12 pb-20 md:pt-6 md:pb-12">
@@ -74,17 +75,7 @@ cta:
                     </a>
                     {% endmacro %}
                     {{ migrationExpertButton() }}
-                    {% macro tryItOutButton(desktop=true) %}
-                    <a class="ff-btn uppercase text-base {% if desktop %}inline{% else %}flex flex-col w-full m-auto sm:mt-12{% endif %}" 
-                    href="{% include "sign-up-url.njk" %}" 
-                    onclick="capture('try-it-out', {'reference': '{{ hero.buttonReference }}'})">
-                        <span class="flex gap-2 uppercase items-center text-indigo-600 hover:text-indigo-800">
-                            <span>TRY IT OUT</span>
-                            {% include "components/icons/arrow-right.svg" %}
-                        </span>
-                    </a>
-                    {% endmacro %}
-                    {{ tryItOutButton() }}
+                    {{ ctaSignUp(site, 'ghost', 'hero', icon=true, extraClass='inline') }}
                 </div>
             </div>
             <div class="md:w-1/2 flex justify-center items-end m-auto relative">
@@ -95,7 +86,7 @@ cta:
             </div>
             <div class="flex flex-col sm:flex-row md:hidden gap-3">
                 {{ migrationExpertButton(false) }}
-                {{ tryItOutButton(false) }}
+                {{ ctaSignUp(site, 'ghost', 'hero-mobile', icon=true, extraClass='flex flex-col w-full m-auto sm:mt-12') }}
             </div>
         </div>   
     </div>
diff --git a/src/vs/litmus.njk b/src/vs/litmus.njk
index 052bdd205a..c019e8f0c2 100644
--- a/src/vs/litmus.njk
+++ b/src/vs/litmus.njk
@@ -51,6 +51,7 @@ cta:
     title: "Exploring Alternatives to Litmus?"
     content: "Discover how FlowFuse can help your team modernize its industrial edge and data infrastructure with an open, flexible platform that complements your existing AI and analytics strategy. <a href='https://meetings-eu1.hubspot.com/michael-davis/round-robin-michael-omar-kasheef?utm_campa[…]113138546&utm_content=113138546&utm_source=hs_automation' class='font-semibold'>Book a Demo with a FlowFuse Expert</a>."
 ---
+{% from "components/cta/cta-sign-up.njk" import ctaSignUp %}
 <!--Hero Content-->
 <div class="w-full px-6">
     <div class="w-full pt-12 pb-20 md:pt-6 md:pb-8">
@@ -71,17 +72,7 @@ cta:
                     </a>
                     {% endmacro %}
                     {{ migrationExpertButton() }}
-                    {% macro tryItOutButton(desktop=true) %}
-                    <a class="ff-btn uppercase text-base {% if desktop %}inline{% else %}flex flex-col w-full m-auto sm:mt-12{% endif %}" 
-                    href="{% include "sign-up-url.njk" %}" 
-                    onclick="capture('try-it-out', {'reference': '{{ hero.buttonReference }}'})">
-                        <span class="flex gap-2 uppercase items-center text-indigo-600 hover:text-indigo-800">
-                            <span>TRY IT OUT</span>
-                            {% include "components/icons/arrow-right.svg" %}
-                        </span>
-                    </a>
-                    {% endmacro %}
-                    {{ tryItOutButton() }}
+                    {{ ctaSignUp(site, 'ghost', 'hero', icon=true, extraClass='inline') }}
                 </div>
             </div>
             <div class="md:w-1/2 flex-grow relative">
@@ -92,7 +83,7 @@ cta:
             </div>
             <div class="flex flex-col sm:flex-row md:hidden gap-3">
                 {{ migrationExpertButton(false) }}
-                {{ tryItOutButton(false) }}
+                {{ ctaSignUp(site, 'ghost', 'hero-mobile', icon=true, extraClass='flex flex-col w-full m-auto sm:mt-12') }}
             </div>
         </div>   
     </div>