blog: use the built-in note, drop the carousel CTA, and let the post CTA fill the column

The coming soon note goes back to a plain ::note with the title as its leading
bold text. That is what the built-in gives without help: Callout's slot is
mdc-unwrap="p", so the icon and the title share a line by default. Promoting the
title to a block, as the previous commit did, is what pushed the icon onto a line
of its own, and the custom class it needed is gone with it.

The prompt carousel loses its Try it out. The connect steps at the end of the
post carry the same CTA, and the post's own CTA card follows them, so a third one
beside the position dots was the same next step asked three times.

BlogPostCta drops max-w-prose. At 65ch that is narrower than the article column
the card sits in, so it was inset on both sides while every other block ran the
full measure. Now 704px like the rest. Applies to every post carrying a cta
block, which is most of them.

Author: dimitrieh

nuxt/components/BlogPostCta.vue

@@ -51,7 +51,10 @@ function onCtaClick (event: MouseEvent) {
 </script>
 
 <template>
-  <div class="ff-blue-card blog-post-cta p-8 sm:p-12 m-auto max-w-prose">
+  <!-- No max-w-prose: at 65ch that is narrower than the article column the card sits
+       in, so it was inset on both sides while every other block in the post, the
+       agent picker and the prompt carousel included, ran the full measure. -->
+  <div class="ff-blue-card blog-post-cta p-8 sm:p-12">
     <div class="flex flex-col gap-6 sm:gap-8 text-center sm:text-left">
       <h3 class="mt-0 mb-0 !text-3xl text-indigo-800">{{ cta?.title || currentCta.title }}</h3>
       <p class="mt-0 mb-0 max-w-4xl mx-auto sm:mx-0 leading-relaxed">{{ cta?.description || currentCta.description }}</p>

nuxt/components/content/PromptCarousel.vue

@@ -266,10 +266,7 @@ onUnmounted(() => {
       </article>
     </div>
 
-    <!-- The widget's own bar: position on the left, the onward action on the right.
-         One Try it out for the whole set, not one per card - the prompts all run
-         against the same platform, so nine identical CTAs would just be nine copies
-         of the same next step. -->
+    <!-- The widget's own bar, carrying the position readout. -->
     <div class="ff-prompts__bar">
       <!-- One dot per prompt rather than per view: nine is few enough to show them
            all, and a dot can carry the prompt's own name for a screen reader in a way
@@ -287,18 +284,6 @@ onUnmounted(() => {
           @click="goTo(index)"
         />
       </div>
-      <!-- CtaSignUp rather than a hand-written link: the label, the destination and
-           the cta-sign-up event are fixed there per destination and only position
-           varies per insertion, so this stays in the same PostHog series as every
-           other Try it out on the site. -->
-      <div class="ff-prompts__try">
-        <CtaSignUp
-          variant="primary-outlined"
-          :position="`${surface}-prompts`"
-          :uppercase="false"
-          icon="i-lucide-arrow-up-right"
-        />
-      </div>
     </div>
   </div>
 </template>

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

@@ -114,10 +114,8 @@ It's one address. Everyone still signs in with their own FlowFuse account, and s
 
 We're also working on removing the question at all.
 
-::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.
+::note
+**Coming soon:** FlowFuse in the Microsoft Copilot, Claude and ChatGPT connector directories. No custom connector, no admin request. FlowFuse Cloud only.
 ::
 
 ## Where to start

src/css/style.css

@@ -3839,35 +3839,16 @@ lite-youtube::before {
     flex: none;
 }
 
-/* CtaSignUp renders a UButton at the site's full button metrics (text-base, 8px/16px
-   padding), which is the right size for a page CTA and too heavy for a card footer.
-   Trimmed here rather than by passing different props, because those metrics are
-   fixed per destination in CtaButton on purpose. */
-.ff-prompts__try a {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    padding: 0.375rem 0.75rem;
-    gap: 0.25rem;
-    white-space: nowrap;
-}
-
-/* The widget's bar: the position readout on the left, the one onward action on the
-   right. Wraps to two centred rows rather than squeezing, since nine dots and a
-   button do not fit a phone's width side by side. */
+/* The widget's bar, holding the position readout. */
 .ff-prompts__bar {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: center;
     gap: 0.75rem;
     flex-wrap: wrap;
     border-top: 1px solid var(--color-indigo-100);
     padding: 0.75rem 1rem;
 }
-@container (max-width: 26rem) {
-    .ff-prompts__bar {
-        justify-content: center;
-    }
-}
 
 /* Dots as the position readout and as a jump target. Nine is few enough to show them
    all; a "3 / 9" counter would say where you are without offering to move you. */
@@ -3923,24 +3904,3 @@ 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;
-}