diff --git a/hugo/assets/css/directives-ui.css b/hugo/assets/css/directives-ui.css
index 66b27d8ce..023ecca68 100644
--- a/hugo/assets/css/directives-ui.css
+++ b/hugo/assets/css/directives-ui.css
@@ -157,6 +157,103 @@
   display: none;
 }
 
+/* ---------------------------------------------------------------------------
+ * tut-prereq-card — the ::requires[slug] prerequisite card
+ * Emitted by layouts/shortcodes/tut-requires.html. Without these rules the card
+ * collapses to 0x0 (the selectors existed in no stylesheet before this).
+ * ------------------------------------------------------------------------- */
+
+.tut-prereq-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin: 1rem 0;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--sapList_BorderColor, #d9d9d9);
+  border-left: 4px solid var(--sapUiHighlight, #0070f2);
+  border-radius: 6px;
+  background: var(--sapList_Background, #fff);
+}
+
+.tut-prereq-card > a {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  text-decoration: none;
+  color: inherit;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.tut-prereq-card > a:hover .prereq-title {
+  text-decoration: underline;
+}
+
+.tut-prereq-card .prereq-title {
+  font-weight: 600;
+  color: var(--sapLinkColor, #0070f2);
+}
+
+.tut-prereq-card .prereq-meta {
+  font-size: 0.85em;
+  color: var(--sapContent_LabelColor, #6a6d70);
+}
+
+.tut-prereq-card .prereq-status {
+  flex: 0 0 auto;
+  font-size: 0.85em;
+  color: var(--sapContent_LabelColor, #6a6d70);
+}
+
+.tut-prereq-card .prereq-status:empty {
+  display: none;
+}
+
+/* ---------------------------------------------------------------------------
+ * tut-tested-with — collapsible panel of tested tool versions, from the
+ * testedWith frontmatter map. Rendered inline by u1-object-page.html (the
+ * shortcode is never injected into the composed body).
+ * ------------------------------------------------------------------------- */
+
+.tut-tested-with {
+  margin: 1rem 0;
+}
+
+.tut-tested-with details {
+  border: 1px solid var(--sapList_BorderColor, #d9d9d9);
+  border-radius: 6px;
+  background: var(--sapList_Background, #fff);
+  padding: 0.5rem 0.75rem;
+}
+
+.tut-tested-with summary {
+  cursor: pointer;
+  font-weight: 600;
+  color: var(--sapTextColor, #32363a);
+}
+
+.tut-tested-with ul {
+  margin: 0.5rem 0 0;
+  padding-left: 1.25rem;
+  list-style: none;
+}
+
+.tut-tested-with li {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.15rem 0;
+}
+
+.tut-tested-with .pkg {
+  font-family: var(--sapCode_FontFamily, monospace);
+  color: var(--sapTextColor, #32363a);
+}
+
+.tut-tested-with .ver {
+  color: var(--sapContent_LabelColor, #6a6d70);
+}
+
 /* ---------------------------------------------------------------------------
  * Print: hide interactive / icon-only elements
  * tut-menu and tut-kbd print as-is (their text content is meaningful in print)
diff --git a/hugo/assets/css/sap-fundamental.src.css b/hugo/assets/css/sap-fundamental.src.css
index 2525f8fb7..22b17b25c 100644
--- a/hugo/assets/css/sap-fundamental.src.css
+++ b/hugo/assets/css/sap-fundamental.src.css
@@ -847,6 +847,11 @@ a:hover {
   margin: 0;
   border-radius: 0;
   border: none;
+  /* Long single lines (e.g. a console command with a full URL) must not run off
+     the page. Default to horizontal scroll; the opt-in data-tut-code-wrap="on"
+     preference (ui5-overrides.css) switches this to wrapping. */
+  white-space: pre;
+  overflow-x: auto;
 }
 
 pre {
diff --git a/hugo/assets/css/ui5-overrides.css b/hugo/assets/css/ui5-overrides.css
index 3f806780a..3a8e33eac 100644
--- a/hugo/assets/css/ui5-overrides.css
+++ b/hugo/assets/css/ui5-overrides.css
@@ -777,16 +777,20 @@ html[data-tut-header="autohide"][data-page-kind="tutorial"] .op-header:focus-wit
 }
 
 /* Auto-hide footer: park it off the bottom edge; reveal on hover. Taskbar-style —
-   content is not padded for it; it overlays on reveal. */
-html[data-tut-footer="autohide"][data-page-kind="tutorial"] footer {
+   content is not padded for it; it overlays on reveal.
+   Scoped to `body > footer.site-footer` (the page footer) — a bare `footer`
+   descendant selector also matched the Joule panel's nested
+   `<footer class="joule-panel__footer">`, forcing it position:fixed/left:0/right:0
+   so the chat input spanned the whole viewport instead of docking in the panel. */
+html[data-tut-footer="autohide"][data-page-kind="tutorial"] body > footer.site-footer {
   position: fixed;
   left: 0; right: 0; bottom: 0;
   transform: translateY(calc(100% - 8px)); /* 8px reveal strip keeps footer hover-reachable */
   transition: transform 200ms ease;
   z-index: 25;
 }
-html[data-tut-footer="autohide"][data-page-kind="tutorial"] footer:hover,
-html[data-tut-footer="autohide"][data-page-kind="tutorial"] footer:focus-within {
+html[data-tut-footer="autohide"][data-page-kind="tutorial"] body > footer.site-footer:hover,
+html[data-tut-footer="autohide"][data-page-kind="tutorial"] body > footer.site-footer:focus-within {
   transform: translateY(0);
 }
 
@@ -796,7 +800,7 @@ html[data-tut-feedback="off"][data-page-kind="tutorial"] #op-discussion { displa
 
 @media (prefers-reduced-motion: reduce) {
   html[data-tut-header="autohide"][data-page-kind="tutorial"] .op-header,
-  html[data-tut-footer="autohide"][data-page-kind="tutorial"] footer { transition: none; }
+  html[data-tut-footer="autohide"][data-page-kind="tutorial"] body > footer.site-footer { transition: none; }
 }
 
 /* #1966 batch 2 — reading preferences. All rules tutorial-scoped. */
diff --git a/hugo/hugo.toml b/hugo/hugo.toml
index b66c9eca7..13f0e960f 100644
--- a/hugo/hugo.toml
+++ b/hugo/hugo.toml
@@ -88,6 +88,14 @@ enableRobotsTXT = false  # we ship our own via the robots output format
     [markup.goldmark.renderer]
       unsafe = true
     [markup.goldmark.parser]
+      # #directive-hotspots: a standalone image with a following block-attribute
+      # line (`![](img)\n{hotspots=…}`) only has its attributes delivered to the
+      # image render hook's .Attributes when the image is NOT wrapped in a <p>.
+      # With the default (true) goldmark wraps it and the attribute block never
+      # attaches, so `{hotspots=…}` leaked as literal text and no overlay rendered.
+      # The render hooks already emit <figure>/<div> wrappers, so dropping the
+      # redundant <p> is also cleaner HTML. No CSS depends on p>img (checked).
+      wrapStandAloneImageWithinParagraph = false
       [markup.goldmark.parser.attribute]
         block = true
         title = true
diff --git a/hugo/layouts/_default/_markup/render-codeblock.html b/hugo/layouts/_default/_markup/render-codeblock.html
index 00f504a0e..57c8debc2 100644
--- a/hugo/layouts/_default/_markup/render-codeblock.html
+++ b/hugo/layouts/_default/_markup/render-codeblock.html
@@ -235,18 +235,27 @@
              ├── or └── connectors → stripped (depth comes from │ count);
              lone ─ → stripped */}}
         {{- $normalized := $line | replaceRE `│\s{0,3}` "  " | replaceRE `[├└]─*\s*` "" | replaceRE `─` "" -}}
-        {{/* Count leading spaces for depth using strings.TrimLeft */}}
-        {{- $stripped := strings.TrimLeft $normalized " " -}}
+        {{/* State prefix (+ ~ -): the author writes the glyph in column 0, so a
+             state line indents one level LESS than a same-depth unprefixed line.
+             Replace a single leading glyph with ONE space so indentation (and thus
+             depth) is measured consistently — e.g. "+ srv/" → "  srv/" (depth 1,
+             sibling of "  db/"), "+   cat-service.cds" → "    cat-service.cds"
+             (depth 2). Capture the glyph first for the state CSS class. */}}
+        {{- $state := "" -}}
+        {{- if findRE `^[+~-] ` $normalized -}}
+          {{- $state = substr $normalized 0 1 -}}
+          {{- $normalized = printf " %s" (substr $normalized 1 (len $normalized)) -}}
+        {{- end -}}
+        {{/* Count leading spaces for depth. NB: Hugo's strings.TrimLeft takes the
+             CUTSET first, then the string — `strings.TrimLeft " " $s` strips
+             leading spaces from $s. (The old code had the args reversed, which
+             trimmed the filename chars off a single space and produced garbage
+             depths + empty labels — the step-4 tree rendering bug.) */}}
+        {{- $stripped := strings.TrimLeft " " $normalized -}}
         {{- $leading := sub (len $normalized) (len $stripped) -}}
-        {{/* depth = floor(leading / 2) — use integer division (truncating = floor for positive) */}}
+        {{/* depth = floor(leading / 2) — integer division (floor for positive) */}}
         {{- $depth := div $leading 2 -}}
         {{- $rest := trim $stripped " \t" -}}
-        {{/* Extract state prefix (+ ~ -) */}}
-        {{- $state := "" -}}
-        {{- if or (hasPrefix $rest "+ ") (hasPrefix $rest "~ ") (hasPrefix $rest "- ") -}}
-          {{- $state = substr $rest 0 1 -}}
-          {{- $rest = substr $rest 2 (len $rest) -}}
-        {{- end -}}
         {{/* Extract annotation: two or more spaces + # */}}
         {{- $annotation := "" -}}
         {{- if findRE `\s{2,}# ` $rest -}}
diff --git a/hugo/layouts/shortcodes/tut-walkthrough.html b/hugo/layouts/shortcodes/tut-walkthrough.html
index 014f565ca..2cab14200 100644
--- a/hugo/layouts/shortcodes/tut-walkthrough.html
+++ b/hugo/layouts/shortcodes/tut-walkthrough.html
@@ -17,8 +17,33 @@
 */}}
 {{- $code := .Get "code" | replaceRE "&#13;" "" | replaceRE "&#10;" "\n" -}}
 {{- $notes := .Get "notes" | replaceRE "&#13;" "" | replaceRE "&#10;" "\n" -}}
+{{/* Render the fenced code through Hugo's `highlight` function rather than
+     markdownify. code-walkthrough.ts highlights per-line by selecting
+     `.tut-walkthrough-code .line`, and Chroma's `highlight` output wraps every
+     line in `<span class="line">` (noClasses=false in hugo.toml) — whereas a
+     plain `markdownify` of the same fence emits NO per-line spans, so the
+     click-to-highlight found zero `.line` elements and highlighted nothing.
+     Strip the ``` fences and extract the language token from the first line. */}}
+{{- $codeTrimmed := trim $code "\n" -}}
+{{- $codeLines := split $codeTrimmed "\n" -}}
+{{- $lang := "" -}}
+{{- $body := $codeTrimmed -}}
+{{- if and (gt (len $codeLines) 0) (hasPrefix (index $codeLines 0) "```") -}}
+  {{- $lang = trim (strings.TrimPrefix "```" (index $codeLines 0)) " \t" -}}
+  {{/* Drop the opening fence line and any trailing closing fence line. */}}
+  {{- $inner := after 1 $codeLines -}}
+  {{- if and (gt (len $inner) 0) (eq (trim (index $inner (sub (len $inner) 1)) " \t") "```") -}}
+    {{- $inner = first (sub (len $inner) 1) $inner -}}
+  {{- end -}}
+  {{- $body = delimit $inner "\n" -}}
+{{- end -}}
+{{- if eq $lang "" -}}{{- $lang = "text" -}}{{- end -}}
 <div class="tut-walkthrough" data-walkthrough>
-  <div class="tut-walkthrough-code">{{ $code | markdownify }}</div>
+  {{/* security-reviewed: $body is the author's fenced code content; `highlight`
+       renders it through Chroma which HTML-escapes the source. $lang is the
+       fence's language token (alnum). Only Chroma's fixed line/token span
+       scaffold is emitted — no attacker-controlled HTML. */}}
+  <div class="tut-walkthrough-code">{{ highlight $body $lang "" }}</div>
   <div class="tut-walkthrough-notes">{{ $notes | markdownify }}</div>
   {{- with .Inner }}{{ . }}{{ end -}}
 </div>
diff --git a/hugo/layouts/tutorials/u1-object-page.html b/hugo/layouts/tutorials/u1-object-page.html
index 6ce8caa21..d47a4c260 100644
--- a/hugo/layouts/tutorials/u1-object-page.html
+++ b/hugo/layouts/tutorials/u1-object-page.html
@@ -329,6 +329,22 @@ <h3>You will learn</h3>
             <ul>{{ range . }}<li><span class="check-icon">✔</span><span class="check-text">{{ . | markdownify }}</span></li>{{ end }}</ul>
           </div>
           {{ end }}
+          {{/* "Tested with" panel — rendered from the testedWith frontmatter map.
+               The tut-tested-with shortcode is never injected into the composed
+               body (render-frontmatter.ts emits the param but no call), so the
+               layout renders it here directly. Mirrors shortcodes/tut-tested-with.html. */}}
+          {{ with .Params.testedWith }}
+          <div class="tut-tested-with">
+            <details>
+              <summary>Tested with</summary>
+              <ul>
+                {{- range $k, $v := . -}}
+                <li><span class="pkg">{{ $k }}</span> <span class="ver">{{ $v }}</span></li>
+                {{- end -}}
+              </ul>
+            </details>
+          </div>
+          {{ end }}
           {{ partial "tutorial-author.html" . }}
           {{ if not site.Params.previewMode }}{{ partial "more-from-author.html" . }}{{ end }}
         </section>
diff --git a/scripts/__tests__/images.test.ts b/scripts/__tests__/images.test.ts
index 6615287ac..a404d8503 100644
--- a/scripts/__tests__/images.test.ts
+++ b/scripts/__tests__/images.test.ts
@@ -67,4 +67,40 @@ describe('resolveImageURLs', () => {
       expect(result).toContain(`${base}/27.png`)
     })
   })
+
+  describe('moves inline image {attributes} to a block-attribute line (hotspots)', () => {
+    // goldmark only attaches {key=val} attribute lists to BLOCK elements, not to
+    // an inline image inside a paragraph. Authors write hotspots inline:
+    //   ![alt](img.png){hotspots="1:22%,34% …"}
+    // which leaks as literal text (no overlay). Moving the {…} onto the next line
+    // under a standalone image makes goldmark attach it → render-image hook reads
+    // .Attributes.hotspots and emits the .tut-hotspot overlay anchors.
+    it('splits a standalone image + attr onto two lines', () => {
+      const input = '![Deployed apps](cockpit-space-apps.png){hotspots="1:22%,34% 2:55%,34%"}'
+      const result = resolveImageURLs(input, opts)
+      expect(result).toBe(
+        `![Deployed apps](${base}/cockpit-space-apps.png)\n{hotspots="1:22%,34% 2:55%,34%"}`
+      )
+    })
+
+    it('preserves leading indentation on both lines', () => {
+      const input = '  ![a](27.png){hotspots="1:10%,10%"}'
+      const result = resolveImageURLs(input, opts)
+      expect(result).toBe(`  ![a](${base}/27.png)\n  {hotspots="1:10%,10%"}`)
+    })
+
+    it('does NOT split an image that is inline within prose', () => {
+      // An attribute block cannot attach to an inline image anyway, and splitting
+      // mid-sentence would corrupt the paragraph.
+      const input = 'see ![a](27.png){x=1} here'
+      const result = resolveImageURLs(input, opts)
+      expect(result).toContain(`![a](${base}/27.png){x=1}`)
+      expect(result).not.toContain('\n{x=1}')
+    })
+
+    it('leaves a plain standalone image (no attrs) unchanged aside from URL', () => {
+      const input = '![a](27.png)'
+      expect(resolveImageURLs(input, opts)).toBe(`![a](${base}/27.png)`)
+    })
+  })
 })
diff --git a/scripts/fetch-tutorials.ts b/scripts/fetch-tutorials.ts
index 3baea6b9f..c0b8835fd 100644
--- a/scripts/fetch-tutorials.ts
+++ b/scripts/fetch-tutorials.ts
@@ -5,6 +5,7 @@ import { performance } from 'node:perf_hooks'
 import { hugoFrontmatterStringify as yamlStringify } from './lib/hugo-yaml.js'
 import { flushDimensionsCache, populateImageDimensions, exportDimensionsForHugo } from './parsers/image-dimensions.js'
 import { composeTutorial } from './parsers/compose.js'
+import { extractFrontmatter } from './parsers/frontmatter.js'
 import { DirectiveParseError } from './parsers/directives.js'
 import './parsers/directives/register-all.js' // side-effect: registers all content-reuse directives
 import { findUnexpandedDirectives } from './parsers/guard-unexpanded-directives.js'
@@ -650,6 +651,8 @@ export function writeHugoPage(
   variables?: import('./parsers/variables.js').TutorialVariable[],
   syncKeysUsed?: Set<string>,
   syncGroups?: import('./parsers/types.js').TutorialFrontmatter['syncGroups'],
+  testedWith?: import('./parsers/types.js').TutorialFrontmatter['testedWith'],
+  requires?: import('./parsers/types.js').TutorialFrontmatter['requires'],
 ): void {
   const content = renderHugoFrontmatter({
     slug,
@@ -678,6 +681,8 @@ export function writeHugoPage(
     variables,
     syncKeysUsed,
     syncGroups,
+    testedWith,
+    requires,
   })
 
   mkdirSync(outputDir, { recursive: true })
@@ -1226,8 +1231,8 @@ async function main() {
     console.log(`[snippets] fetched ${snippetMap.size} snippet(s) from ${uniqueRepos.length} repo(s)`)
   }
 
-  // #directive-xref-validation: existence catalog for the `:tutorial` and
-  // `::requires` directives. Both validate their slug against ctx.catalogBySlug
+  // #directive-xref-validation: existence + metadata catalog for the `:tutorial`
+  // and `::requires` directives. Both validate their slug against ctx.catalogBySlug
   // and throw DirectiveParseError (→ fatal composeFailures) when it's present but
   // the slug is missing; when it's undefined they fail-open. We enable the fatal
   // path ONLY when discovery came from the authoritative GitHub tier, because the
@@ -1235,19 +1240,52 @@ async function main() {
   // the filter never shrinks allTutorials). A disk/hana/rest fallback could be a
   // stale/partial set and would throw false positives, so we pass undefined there.
   //
-  // Value carries slug-as-title (existence is the load-bearing check; there is no
-  // pre-compose source of real titles for ALL slugs) + time 0. `::requires` reads
-  // entry.title into its card; a real title is a nice-to-have, not required to
-  // catch a dead cross-ref. Keyed lowercase to match the directives' slug casing.
+  // Value carries the REAL title + time, read from each tutorial's frontmatter in
+  // the on-disk cache (every <slug>.md is already written to CACHE_DIR by this
+  // point — the :help prefetch loop above reads the same files). `::requires`
+  // renders entry.title/entry.time into its card and `:tutorial` uses entry.title
+  // as the link label; without real values they showed the raw slug + "0 min".
+  // Fail-open to slug/0 when the file or field is missing (existence still holds).
   let catalogBySlug: Map<string, { title: string; time: number }> | undefined
   if (discoverySource === 'github') {
     catalogBySlug = new Map()
+    // #3091 follow-up: the CAP /build/catalog carries a real title for EVERY
+    // tutorial slug (not just the ones composed this run). On a slug-targeted
+    // rebuild the referenced tutorial's own <slug>.md is NOT fetched into
+    // CACHE_DIR, so the per-file lookup below falls back to slug-as-title and the
+    // xref/prereq card renders a raw slug. Seed a slug→title map from the cached
+    // catalog first; the on-disk frontmatter (which also has `time`) overrides it
+    // when present. loadCapCache() is already read at the fingerprint step above,
+    // so this is a cheap disk read with no extra network.
+    const catalogTitleBySlug = new Map<string, string>()
+    try {
+      for (const m of (loadCapCache()?.tutorialMetas ?? [])) {
+        if (m.title) catalogTitleBySlug.set(m.slug.toLowerCase(), m.title)
+      }
+    } catch { /* no cache yet — per-file + slug fallback still hold */ }
     for (const t of allTutorials) {
-      catalogBySlug.set(t.slug.toLowerCase(), { title: t.slug, time: 0 })
+      const slugLc = t.slug.toLowerCase()
+      let title = catalogTitleBySlug.get(slugLc) ?? t.slug
+      let time = 0
+      const cacheFile = join(CACHE_DIR, `${t.slug}.md`)
+      if (existsSync(cacheFile)) {
+        try {
+          const fm = extractFrontmatter(readFileSync(cacheFile, 'utf-8'))
+          // title is a top-level field on FrontmatterResult; time lives on the
+          // nested `frontmatter` object (coerced to a number by extractFrontmatter).
+          if (fm.title) title = fm.title
+          const t = fm.frontmatter?.time
+          if (typeof t === 'number' && Number.isFinite(t)) time = t
+        } catch {
+          // Corrupt/unreadable cache entry — keep catalog/slug fallback (existence
+          // check is what the fatal guard depends on; metadata is best-effort).
+        }
+      }
+      catalogBySlug.set(slugLc, { title, time })
     }
-    console.log(`[xref] slug-existence catalog enabled (${catalogBySlug.size} slugs; dead :tutorial/::requires refs now fail the build)`)
+    console.log(`[xref] slug catalog enabled (${catalogBySlug.size} slugs; ${catalogTitleBySlug.size} titles from CAP catalog, frontmatter overrides where cached; dead :tutorial/::requires refs now fail the build)`)
   } else {
-    console.log(`[xref] slug-existence catalog DISABLED — discovery source '${discoverySource ?? 'cache'}' is not authoritative (fail-open on cross-ref validation)`)
+    console.log(`[xref] slug catalog DISABLED — discovery source '${discoverySource ?? 'cache'}' is not authoritative (fail-open on cross-ref validation)`)
   }
 
   // Build-time safety net (#directive-rollout): names of directives that SHOULD
@@ -1687,6 +1725,8 @@ async function main() {
           composed.variables,
           composed.syncKeysUsed.size > 0 ? composed.syncKeysUsed : undefined,
           composed.syncGroups,
+          composed.testedWith,
+          composed.requires,
         )
         authorRows.push({
           authorProfile: frontmatter.author_profile ?? '',
diff --git a/scripts/highlight-cds.ts b/scripts/highlight-cds.ts
index 24be5d8b4..8e91fbdcb 100644
--- a/scripts/highlight-cds.ts
+++ b/scripts/highlight-cds.ts
@@ -67,11 +67,12 @@ export function replaceCdsBlocks(
   html: string,
   highlightFn: (rawCode: string) => string,
   marker = 'data-lang=cds'
-): { result: string; changed: boolean; processedBlocks: number } {
+): { result: string; changed: boolean; processedBlocks: number; skippedDiffBlocks: number } {
   let result = '';
   let cursor = 0;
   let changed = false;
   let processedBlocks = 0;
+  let skippedDiffBlocks = 0;
 
   while (true) {
     const markerIdx = html.indexOf(marker, cursor);
@@ -105,6 +106,27 @@ export function replaceCdsBlocks(
     if (bodyEnd === -1) { cursor = markerIdx + 1; continue; }
 
     const bodyContent = html.substring(bodyContentStart, bodyEnd);
+
+    // Preserve Chroma's diff/highlight markup. When a `cds` fence carries inline
+    // `// [!code highlight|focus|++|--]` markers, render-codeblock.html injects
+    // `diff-highlight` / `diff-focus` / `diff-added` / `diff-removed` line classes
+    // into the Chroma output (and the matching CSS targets those). Shiki is called
+    // WITHOUT notation transformers, so replacing the block with Shiki's output
+    // silently drops every highlight — the step-2 "highlight not working" bug.
+    // Leave those blocks as Chroma so the highlight survives; Shiki still takes
+    // over plain cds blocks (its grammar is nicer) where nothing is lost.
+    if (/\bdiff-(highlight|focus|added|removed)\b/.test(bodyContent)) {
+      skippedDiffBlocks++;
+      // Keep this block exactly as Chroma rendered it: emit everything from the
+      // current cursor THROUGH the block's closing tags, then advance past them.
+      // (A bare `cursor = …; continue` would drop the block from `result`, since
+      // result only accumulates on the replace path below.)
+      const blockEnd = bodyEnd + bodyEndTag.length;
+      result += html.substring(cursor, blockEnd);
+      cursor = blockEnd;
+      continue;
+    }
+
     const rawCode = extractCode(bodyContent);
 
     if (!rawCode) { cursor = bodyEnd + bodyEndTag.length; continue; }
@@ -125,7 +147,7 @@ export function replaceCdsBlocks(
   }
 
   result += html.substring(cursor);
-  return { result, changed, processedBlocks };
+  return { result, changed, processedBlocks, skippedDiffBlocks };
 }
 
 async function main() {
@@ -142,13 +164,14 @@ async function main() {
   let filesWithMarker = 0;
 
   const MARKER = 'data-lang=cds';
+  let skippedDiffBlocks = 0;
 
   for (const file of htmlFiles) {
     let html = readFileSync(file, 'utf-8');
     if (!html.includes(MARKER)) continue;
     filesWithMarker++;
 
-    const { result, changed, processedBlocks: blocksInFile } = replaceCdsBlocks(
+    const { result, changed, processedBlocks: blocksInFile, skippedDiffBlocks: skippedInFile } = replaceCdsBlocks(
       html,
       (rawCode) => highlighter.codeToHtml(rawCode, {
         lang: 'cds',
@@ -158,6 +181,7 @@ async function main() {
       MARKER
     );
     processedBlocks += blocksInFile;
+    skippedDiffBlocks += skippedInFile;
 
     if (changed) {
       writeFileSync(file, result, 'utf-8');
@@ -165,15 +189,18 @@ async function main() {
     }
   }
 
-  console.log(`CDS highlighting: ${processedBlocks} blocks in ${processedFiles} files (dir: ${OUTPUT_DIR})`);
+  console.log(`CDS highlighting: ${processedBlocks} blocks in ${processedFiles} files (${skippedDiffBlocks} diff/highlight block(s) kept as Chroma) (dir: ${OUTPUT_DIR})`);
   highlighter.dispose();
 
   // Regression guard (#1657): if the `data-lang=cds` marker is present but we
-  // replaced zero blocks, the block structure this matcher relies on (emitted
-  // by render-codeblock.html, minified by Hugo) has drifted. Failing here turns
-  // a silent revert-to-Chroma-SQL (braces rendered as red `.err` tokens) into a
-  // red build BEFORE the un-highlighted HTML is published to HANA.
-  if (filesWithMarker > 0 && processedBlocks === 0) {
+  // neither replaced NOR intentionally skipped any block, the block structure
+  // this matcher relies on (emitted by render-codeblock.html, minified by Hugo)
+  // has drifted. Failing here turns a silent revert-to-Chroma-SQL (braces
+  // rendered as red `.err` tokens) into a red build BEFORE the un-highlighted
+  // HTML is published to HANA. A block deliberately kept as Chroma because it
+  // carries `// [!code …]` diff/highlight markers (skippedDiffBlocks) is NOT
+  // drift — those blocks render correctly via Chroma's diff-* line classes.
+  if (filesWithMarker > 0 && processedBlocks === 0 && skippedDiffBlocks === 0) {
     console.error(
       `highlight-cds: found ${filesWithMarker} file(s) with the '${MARKER}' marker but replaced 0 CDS blocks — ` +
         `the code-block markup likely drifted from what this script matches. Refusing to leave the Chroma-SQL fallback in place.`
diff --git a/scripts/parsers/__tests__/cap-catalog-title.test.ts b/scripts/parsers/__tests__/cap-catalog-title.test.ts
new file mode 100644
index 000000000..800a52587
--- /dev/null
+++ b/scripts/parsers/__tests__/cap-catalog-title.test.ts
@@ -0,0 +1,43 @@
+// scripts/parsers/__tests__/cap-catalog-title.test.ts
+// #3091 follow-up: fetchBuildCatalog must carry each tutorial's `title` into
+// tutorialMetas. fetch-tutorials.ts seeds the xref/prereq catalogBySlug from
+// these titles so :tutorial / ::requires cross-references render a real title
+// (not the raw slug) even on slug-targeted rebuilds, where the referenced
+// tutorial's own <slug>.md is never fetched into CACHE_DIR.
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { fetchBuildCatalog } from '../cap.js';
+
+const CATALOG = {
+  missions: [],
+  hierarchies: [],
+  standaloneGroups: [],
+  categories: [],
+  tutorials: [
+    { slug: 'hana-cloud-mission-trial-1', title: 'Understand How the SAP HANA Cloud Free Tier Service can be Used', categorySlugs: [] },
+    { slug: 'no-title-slug', categorySlugs: ['cat-a'] }, // title absent → omitted, not slug-filled
+  ],
+  featured: [],
+};
+
+afterEach(() => vi.restoreAllMocks());
+
+describe('fetchBuildCatalog title capture (#3091)', () => {
+  it('threads tutorials[].title into tutorialMetas', async () => {
+    vi.stubGlobal('fetch', vi.fn(async () => ({
+      ok: true,
+      status: 200,
+      statusText: 'OK',
+      json: async () => CATALOG,
+    })));
+
+    const res = await fetchBuildCatalog('http://localhost:4004');
+    const bySlug = new Map(res.tutorialMetas.map(m => [m.slug, m]));
+
+    expect(bySlug.get('hana-cloud-mission-trial-1')?.title)
+      .toBe('Understand How the SAP HANA Cloud Free Tier Service can be Used');
+    // A tutorial with no title must NOT get a fabricated one — the slug-as-title
+    // fallback lives in fetch-tutorials.ts, not here; here title stays undefined.
+    expect(bySlug.get('no-title-slug')?.title).toBeUndefined();
+    expect(bySlug.get('no-title-slug')?.categorySlugs).toEqual(['cat-a']);
+  });
+});
diff --git a/scripts/parsers/__tests__/render-frontmatter-testedwith.test.ts b/scripts/parsers/__tests__/render-frontmatter-testedwith.test.ts
new file mode 100644
index 000000000..6bc6b9080
--- /dev/null
+++ b/scripts/parsers/__tests__/render-frontmatter-testedwith.test.ts
@@ -0,0 +1,63 @@
+import { describe, it, expect } from 'vitest'
+import { parse as parseYaml } from 'yaml'
+import { renderHugoFrontmatter } from '../render-frontmatter.js'
+import type { RenderHugoFrontmatterArgs } from '../render-frontmatter.js'
+import type { TutorialNavEntry } from '../types.js'
+
+// #directive-demos: testedWith + requires were parsed, composed, and accepted by
+// renderHugoFrontmatter — but writeHugoPage (fetch-tutorials.ts) never forwarded
+// them, so .Params.testedWith was always empty and the "Tested with" panel never
+// rendered. The only prior testedWith test covered checkTestedWithFreshness, not
+// the generated frontmatter — which is why the drop went unnoticed. These lock
+// the rendered-frontmatter contract the u1 layout + prereq card depend on.
+
+const minimalNav: TutorialNavEntry = {
+  slug: 'demo', title: 'Demo', description: '', time: 5, level: 'beginner',
+  stepCount: 1, primaryTag: '', displayTags: [], displayTagSlugs: [],
+  repo: 'sap-tutorials/demo', branch: 'main', prev: null, next: null,
+}
+
+function fmFrom(content: string): Record<string, unknown> {
+  const m = content.match(/^---\r?\n([\s\S]*?)\r?\n---/)
+  if (!m) throw new Error('no frontmatter')
+  return parseYaml(m[1]) as Record<string, unknown>
+}
+
+describe('renderHugoFrontmatter — testedWith + requires', () => {
+  const baseArgs: RenderHugoFrontmatterArgs = {
+    slug: 'demo', title: 'Demo', description: '', time: 5, level: 'beginner',
+    tags: [], primaryTag: '', author: 'Thomas Jung',
+    authorProfile: 'https://github.com/jung-thomas', youWillLearn: [],
+    prerequisites: '', steps: [{ number: 1, title: 'Step 1', content: '' }],
+    nav: minimalNav, lastUpdated: '', createdAt: '', contributors: [],
+  }
+
+  it('emits testedWith map into the frontmatter (→ .Params.testedWith)', () => {
+    const content = renderHugoFrontmatter({
+      ...baseArgs,
+      testedWith: { '@sap/cds': '10.x', node: '22' },
+    })
+    expect(content).toContain('testedWith:')
+    const fm = fmFrom(content)
+    expect(fm.testedWith).toEqual({ '@sap/cds': '10.x', node: '22' })
+  })
+
+  it('emits requires list into the frontmatter (→ .Params.requires)', () => {
+    const content = renderHugoFrontmatter({
+      ...baseArgs,
+      requires: ['hana-cloud-mission-trial-1'],
+    })
+    const fm = fmFrom(content)
+    expect(fm.requires).toEqual(['hana-cloud-mission-trial-1'])
+  })
+
+  it('omits testedWith when empty/unset', () => {
+    expect('testedWith' in fmFrom(renderHugoFrontmatter(baseArgs))).toBe(false)
+    expect('testedWith' in fmFrom(renderHugoFrontmatter({ ...baseArgs, testedWith: {} }))).toBe(false)
+  })
+
+  it('omits requires when empty/unset', () => {
+    expect('requires' in fmFrom(renderHugoFrontmatter(baseArgs))).toBe(false)
+    expect('requires' in fmFrom(renderHugoFrontmatter({ ...baseArgs, requires: [] }))).toBe(false)
+  })
+})
diff --git a/scripts/parsers/cap.ts b/scripts/parsers/cap.ts
index 5670e3406..bd3b0b046 100644
--- a/scripts/parsers/cap.ts
+++ b/scripts/parsers/cap.ts
@@ -80,12 +80,16 @@ export async function fetchBuildCatalog(baseUrl: string): Promise<{
     hierarchies: MissionHierarchy[]
     standaloneGroups?: StandaloneGroup[]
     categories?: CategoryMeta[]
-    tutorials?: Array<{ slug: string; categorySlugs?: string[] }>
+    tutorials?: Array<{ slug: string; title?: string; categorySlugs?: string[] }>
     featured?: BrowseFeaturedEntry[]
   }
   const tutorialMetas: CatalogTutorialMeta[] = (data.tutorials ?? []).map(t => ({
     slug: t.slug,
     categorySlugs: t.categorySlugs ?? [],
+    // #3091 follow-up: carry the real title so the xref/prereq catalog can label
+    // :tutorial / ::requires links with it even on slug-targeted rebuilds (where
+    // the referenced tutorial's own <slug>.md is not fetched into CACHE_DIR).
+    ...(typeof t.title === 'string' && t.title ? { title: t.title } : {}),
   }))
   return {
     missions: data.missions,
diff --git a/scripts/parsers/images.ts b/scripts/parsers/images.ts
index e60b1f6ae..20109b17d 100644
--- a/scripts/parsers/images.ts
+++ b/scripts/parsers/images.ts
@@ -47,5 +47,30 @@ export function resolveImageURLs(content: string, opts: ImageResolveOpts): strin
     )
   }
 
+  result = moveInlineImageAttributesToBlock(result)
   return stripImageDirectiveComments(result)
 }
+
+/**
+ * Hugo's goldmark attribute parser (`markup.goldmark.parser.attribute.block=true`)
+ * attaches `{key=val}` attribute lists to BLOCK elements only — NOT to an inline
+ * image sitting inside a paragraph. Authors write image hotspots as an inline
+ * suffix: `![alt](img.png){hotspots="1:22%,34% …"}` — which goldmark leaves as
+ * literal text after the image (the leak observed on directive-rich-media), so
+ * the render-image hook never sees `hotspots` in `.Attributes` and no overlay
+ * dots render.
+ *
+ * Fix: when an image is ALONE on its line with a trailing `{…}` attribute block,
+ * move the `{…}` onto the FOLLOWING line. A standalone image is its own block,
+ * and a block-attribute line directly beneath it IS attached by goldmark → the
+ * render hook receives `.Attributes`. Images that are not alone on their line
+ * (inline in prose) are left untouched — an attribute block can't attach there
+ * anyway, and splitting would corrupt the sentence.
+ */
+export function moveInlineImageAttributesToBlock(content: string): string {
+  return content.replace(
+    // ^(indent)(![alt](path))(  {attrs})$  — the whole line is image + attr block
+    /^([ \t]*)(!\[[^\]]*\]\([^)]+\))[ \t]*(\{[^}\n]*\})[ \t]*$/gm,
+    (_m, indent: string, img: string, attrs: string) => `${indent}${img}\n${indent}${attrs}`
+  )
+}
diff --git a/scripts/parsers/types.ts b/scripts/parsers/types.ts
index 8f685c843..89f8648f5 100644
--- a/scripts/parsers/types.ts
+++ b/scripts/parsers/types.ts
@@ -414,6 +414,7 @@ export interface CategoryMeta {
 export interface CatalogTutorialMeta {
   slug: string
   categorySlugs: string[]
+  title?: string
 }
 
 // Full CodeCheckSpec — used by the publish pipeline. NEVER ship to the
diff --git a/scripts/sync-approuter-css.cjs b/scripts/sync-approuter-css.cjs
index e33cdc688..f375bbd98 100644
--- a/scripts/sync-approuter-css.cjs
+++ b/scripts/sync-approuter-css.cjs
@@ -127,6 +127,43 @@ async function main() {
   const base = approuterUrl.replace(/\/+$/, '');
   const pages = page ? [page] : DEFAULT_PAGES;
 
+  // 0) PREFER SOURCE WHEN THE DEPLOY ALREADY SHIPPED IT (#3091 follow-up).
+  //    #2920's sync-from-approuter exists to avoid baking a hash the approuter
+  //    does NOT serve (→ 404 / unstyled). But it has a failure mode: a CSS-only
+  //    SOURCE change ships on a deploy (build:css rotates the fingerprinted file,
+  //    and the new file IS served) yet NEVER reaches HANA pages — every rebuild
+  //    re-pins the OLD hash it scrapes from the (still-stale) served pages, a
+  //    self-perpetuating loop (observed 2026-11-10: console line-wrap CSS fix
+  //    deployed as 863da9b0… but all pages kept referencing 9dbb07c7…).
+  //
+  //    Break it WITHOUT reintroducing drift: build from source, then verify the
+  //    approuter actually SERVES the source-built hash (200). If it does, the
+  //    deploy already shipped these exact bytes — baking the source hash is safe
+  //    (no 404) AND propagates the new CSS to republished pages. If it does not
+  //    (source is ahead of the deploy — the pre-#2920 drift the guard blocks),
+  //    fall through to the sync-from-approuter path below unchanged.
+  try {
+    buildFromSource();
+    const srcBytes = fs.readFileSync(outFile);
+    const srcHash = crypto.createHash('sha256').update(srcBytes).digest('hex');
+    const srcUrl = `/css/sap-fundamental.${srcHash}.css`;
+    const probe = await fetchWithRetry(base + srcUrl, { asBuffer: true });
+    if (probe.ok && probe.body) {
+      const servedHash = crypto.createHash('sha256').update(probe.body).digest('hex');
+      if (servedHash === srcHash) {
+        log(`source CSS hash ${srcHash.slice(0, 12)} IS served by the approuter → keeping source build (deploy already shipped it; new CSS will propagate to republished pages)`);
+        return 0;
+      }
+      // Served bytes at the source URL don't match (edge-mangled / corrupt) —
+      // don't trust it; fall through to the canonical discover-and-pin path.
+      log(`source hash ${srcHash.slice(0, 12)} returned 200 but bytes mismatch — falling through to approuter sync`);
+    } else {
+      log(`approuter does NOT serve source hash ${srcHash.slice(0, 12)} (HTTP ${probe.status}) → source is ahead of the deploy; syncing from approuter to avoid drift`);
+    }
+  } catch (e) {
+    log(`source pre-build/probe failed (${e && e.message ? e.message : e}); syncing from approuter`);
+  }
+
   // 1) Discover the served sap-fundamental href from a rendered page.
   let href = '';
   for (const p of pages) {
diff --git a/test/unit/highlight-cds-div-balance.test.js b/test/unit/highlight-cds-div-balance.test.js
index 61c72c021..b5d55fb22 100644
--- a/test/unit/highlight-cds-div-balance.test.js
+++ b/test/unit/highlight-cds-div-balance.test.js
@@ -63,6 +63,27 @@ describe('replaceCdsBlocks div balance (#1657)', () => {
     expect(result).not.toContain('class=chroma');
   });
 
+  it('keeps a diff/highlight-marked CDS block as Chroma (preserves diff-* line classes)', () => {
+    // A cds fence with `// [!code focus]` markers: render-codeblock.html injects
+    // diff-focus line classes into the Chroma output. Replacing with Shiki (no
+    // notation transformers) would drop every highlight — the step-2 bug. The
+    // block must be LEFT as Chroma, and counted as skippedDiffBlocks (not drift).
+    const DIFF_BLOCK =
+      '<div class=code-block data-lang=cds>' +
+        '<div class=code-block-body data-diff=true>' +
+          '<div class=highlight><pre tabindex=0 class=chroma><code>' +
+            '<span class=line>entity Books {</span>' +
+            '<span class="line diff-focus">key ID : UUID;</span>' +
+          '</code></pre></div>' +
+        '</div>' +
+      '</div>';
+    const { result, processedBlocks, skippedDiffBlocks } = replaceCdsBlocks(DIFF_BLOCK, shikiStub);
+    expect(processedBlocks, 'diff block must NOT be replaced by Shiki').toBe(0);
+    expect(skippedDiffBlocks, 'diff block must be counted as an intentional skip').toBe(1);
+    expect(result, 'Chroma output (with diff-focus) must survive untouched').toContain('diff-focus');
+    expect(result).not.toContain('class="shiki"');
+  });
+
   it('processes a LONG collapsible block (#2228: data-collapsed body)', () => {
     const { result, processedBlocks } = replaceCdsBlocks(CDS_BLOCK_LONG, shikiStub);
     expect(processedBlocks, 'long-block body-open tag must be matched despite attributes').toBe(1);