blog: step number on the heading's line, and a titled coming soon note

The connect widget's step number and heading now share a line, in both the stacked
and the three-across layout, with the number set at the heading's own size, face
and weight so the two read as one line of text and only the colour separates them.

The prompt cards drop their numbers: the dots already say which of the nine you
are on, so a number on the card repeated it.

Coming soon goes back to being a plain note inside The conversation with IT
rather than its own section, with Coming soon as a heading inside the note. That
needs the leading strong promoted to a block, because Callout's slot is
mdc-unwrap="p" and strips the paragraphs, which ran the heading straight into the
body text. Also drops the closing marketplace sentence, which the note above now
says.

Author: dimitrieh

nuxt/components/content/AgentSetupTabs.vue

@@ -148,8 +148,10 @@ function selectClient (id: string) {
       class="ff-agent-panel"
     >
       <div class="ff-agent-step">
-        <p class="ff-agent-step__num">01</p>
-        <p class="ff-agent-step__title">{{ client.builtIn ? client.step1Title : STEP1.title }}</p>
+        <div class="ff-agent-step__head">
+          <p class="ff-agent-step__num">01</p>
+          <p class="ff-agent-step__title">{{ client.builtIn ? client.step1Title : STEP1.title }}</p>
+        </div>
         <p class="ff-agent-step__body">{{ client.builtIn ? client.step1Body : STEP1.description }}</p>
         <div v-if="client.builtIn" class="ff-agent-step__cta">
           <CtaSignUp variant="primary" :position="`${surface}-tab-expert`" class="w-full" />
@@ -160,8 +162,10 @@ function selectClient (id: string) {
       </div>
 
       <div class="ff-agent-step">
-        <p class="ff-agent-step__num">02</p>
-        <p class="ff-agent-step__title">{{ client.step2Title }}</p>
+        <div class="ff-agent-step__head">
+          <p class="ff-agent-step__num">02</p>
+          <p class="ff-agent-step__title">{{ client.step2Title }}</p>
+        </div>
         <p class="ff-agent-step__body">{{ client.step2Body }}</p>
         <div class="ff-agent-step__cta">
           <CtaCustom
@@ -178,8 +182,10 @@ function selectClient (id: string) {
       </div>
 
       <div class="ff-agent-step">
-        <p class="ff-agent-step__num">03</p>
-        <p class="ff-agent-step__title">{{ client.step3Title || STEP3.title }}</p>
+        <div class="ff-agent-step__head">
+          <p class="ff-agent-step__num">03</p>
+          <p class="ff-agent-step__title">{{ client.step3Title || STEP3.title }}</p>
+        </div>
         <p class="ff-agent-step__body">{{ client.step3Body || STEP3.description }}</p>
         <div v-if="signup && !client.noStep3Cta" class="ff-agent-step__cta">
           <CtaSignUp variant="primary" :position="`${surface}-connect-step3`" class="w-full" />

nuxt/components/content/PromptCarousel.vue

@@ -249,7 +249,6 @@ onUnmounted(() => {
         aria-roledescription="slide"
         :aria-label="`${index + 1} of ${PROMPTS.length}: ${prompt.label}`"
       >
-        <p class="ff-prompts__num">{{ String(index + 1).padStart(2, '0') }}</p>
         <p class="ff-prompts__label">{{ prompt.label }}</p>
         <p class="ff-prompts__text">{{ prompt.text }}</p>
         <!-- Copy is per card, since what it copies is this card's prompt. The

src/blog/2026/08/industrial-ai-agent.md

@@ -112,11 +112,11 @@ Most people reading this can't add a connector on their company sanctioned AI ag
 
 It's one address. Everyone still signs in with their own FlowFuse account, and still chooses their own scopes, so nobody inherits anyone else's access. Nothing about it makes FlowFuse a new data processor for your organisation.
 
-## Coming soon
-
 We're also working on removing the question at all.
 
-::note
+::note{.ff-note--titled}
+**Coming soon**
+
 FlowFuse in the Microsoft Copilot, Claude and ChatGPT connector directories. No custom connector, no admin request. FlowFuse Cloud only.
 ::
 
@@ -137,5 +137,3 @@ Three steps, and they depend on which agent you would like to use.
 
 ::agent-setup-tabs{:exclude-expert="true" surface="blog"}
 ::
-
-*Very soon connecting with FlowFuse will also be supported through the connector marketplace of your own AI provider, starting with Microsoft Copilot, Claude, and ChatGPT.*

src/css/style.css

@@ -3428,16 +3428,28 @@ lite-youtube::before {
     background-color: var(--color-gray-50);
     padding: 1.25rem;
 }
+/* Same size, face and weight as the heading beside it, so the two read as one line
+   of text rather than a label stuck to a title. Only the colour separates them. */
 .ff-agent-step__num {
     margin: 0;
-    font-family: var(--font-mono);
-    font-size: 0.75rem;
-    font-weight: 600;
-    line-height: 1rem;
+    font-size: 1.125rem;
+    font-weight: 500;
+    line-height: 1.75rem;
     color: var(--color-indigo-600);
 }
+/* The number and the heading share one line, in both layouts. Baseline rather than
+   centre, so the mono digits sit on the heading's baseline instead of floating
+   against its cap height. Wraps when a long heading needs two lines, and the number
+   stays put on the first. */
+.ff-agent-step__head {
+    display: flex;
+    align-items: baseline;
+    gap: 0.5rem;
+}
+/* No top margin any more: the gap that used to separate it from the number above is
+   now the row gap beside it. */
 .ff-agent-step__title {
-    margin: 0.5rem 0 0;
+    margin: 0;
     font-size: 1.125rem;
     font-weight: 500;
     line-height: 1.75rem;
@@ -3760,16 +3772,8 @@ lite-youtube::before {
     background-color: var(--color-gray-50);
     padding: 1.25rem;
 }
-.ff-prompts__num {
-    margin: 0;
-    font-family: var(--font-mono);
-    font-size: 0.75rem;
-    font-weight: 600;
-    line-height: 1rem;
-    color: var(--color-indigo-600);
-}
 .ff-prompts__label {
-    margin: 0.5rem 0 0;
+    margin: 0;
     font-size: 1.125rem;
     font-weight: 500;
     line-height: 1.75rem;
@@ -3919,3 +3923,24 @@ lite-youtube::before {
         transform: none;
     }
 }
+
+/* A note with a heading. Nuxt UI's ::note is Callout color="info" and takes no title
+   prop, and its slot is <slot mdc-unwrap="p">, so the paragraphs written in markdown
+   are unwrapped and the heading would otherwise run straight into the body text on
+   the same line. The heading is the note's leading <strong>, which survives the
+   unwrap as a direct child, promoted to its own line here. A real markdown heading
+   would also survive but would claim an anchor and a place in the page's heading
+   outline, which a callout should not have.
+
+   Scoped to the ff-note--titled class rather than restyling prose.callout, because
+   that theme is shared with the handbook's notes and with ::product-update-note in
+   around twenty other posts. Unlayered, so it beats the utilities the callout theme
+   applies. The colour is left alone: this is the site's standard info note. */
+.prose .ff-note--titled > strong:first-of-type {
+    display: block;
+    margin-bottom: 0.125rem;
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.5rem;
+    color: inherit;
+}