@cyber-dash-tech/revela 0.14.0 → 0.15.1

package/designs/summit/DESIGN.md

@@ -57,7 +57,7 @@ Accent usage guidance:
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
   ```
-- cover h1: `108px` to `124px`, weight `600` to `700`, line-height `0.88` to `0.94`, uppercase
+- cover h1: `108px` to `124px`, weight `600` to `700`, line-height `0.88` to `0.94`, Title Case
 - inner-layout h2: `30px` to `36px`, weight `600` to `700`, line-height `1.06` to `1.12`
 - inner-layout h3: `20px` to `24px`, weight `600`, line-height `1.12` to `1.18`
 - Body: `17px`, line-height `1.6`
@@ -66,6 +66,7 @@ Accent usage guidance:
 - Never use text shadows or glow.
 - Never switch to a serif typeface; Summit is strictly sans-serif.
 - Foundation owns the default text scale. In components, let `p`, `li`, `.caption`, `.eyebrow`, and `h3` inherit the foundation sizes unless a component has a clear structural reason to differ.
+- Titles use Title Case, not all caps. Use uppercase only for eyebrows, captions, metadata labels, short codes, and date/code-like roadmap markers.
 
 All sizes are fixed `px` for the 1920x1080 canvas. JS `transform: scale()` handles viewport adaptation. Never use `clamp()` or viewport-relative units.
 
@@ -207,6 +208,16 @@ body {
     color: var(--text-muted);
 }
 
+.source,
+.source-note {
+    font-family: "Times New Roman", Times, serif;
+    font-size: 11px;
+    line-height: 1.35;
+    letter-spacing: 0;
+    text-transform: none;
+    color: var(--text-muted);
+}
+
 h1, h2, h3, h4 {
     font-family: var(--font-display);
     font-weight: 600;
@@ -273,6 +284,15 @@ p, li {
     color: var(--text-muted);
 }
 
+.media-caption.source,
+.media-caption.source-note {
+    font-family: "Times New Roman", Times, serif;
+    font-size: 11px;
+    line-height: 1.35;
+    letter-spacing: 0;
+    text-transform: none;
+}
+
 /* editorial-list: square bullet + optional <strong> lead phrase per item.
    Usage: <li><strong>Lead phrase.</strong> Supporting copy.</li>
    Dark bg override: set --accent-earth to rgba(247,244,238,0.72) on the list wrapper. */
@@ -418,6 +438,11 @@ These rules are mandatory for Summit.
 - **Sparse slides depend on image weight.** If content is light, the photo or page framing must hold the composition.
 - **No glass cards, neon KPI styling, or startup-product chrome.** Summit is editorial and print-adjacent.
 - **Visual hierarchy is strict:** eyebrow -> heading -> body -> caption.
+- **Content pages need a stable title block.** Except cover, TOC, closing, section divider, and full-bleed hero slides, every normal content slide should include a visible title block from the upper-left safe area. It should contain a compact chapter/section label plus a slide title written as the page's claim or takeaway.
+- **Do not hide the page title inside a card.** Body components may have their own headings, but the slide-level title block should remain separate and easy to scan unless the chosen layout explicitly defines a compact side-title variant.
+- **Text panels are not decorative rule panels.** Do not add a default left border, vertical accent bar, yellow/gold line, or inline rule to `text-panel`. Use typography, spacing, boxes, stats, quotes, or layout-level dividers for emphasis.
+- **Titles are Title Case.** Do not set `text-transform:uppercase` on `h1`, `h2`, `h3`, or `h4` titles. Uppercase is reserved for eyebrows, captions, metadata labels, short codes, and date/code-like markers.
+- **Components are transparent by default.** Component primitives should not bring their own paper/background fill. Let `.page`, layout containers, or explicit modifier variants provide background color when needed.
 
 ### Common Mistakes
 
@@ -447,21 +472,23 @@ These rules are mandatory for Summit.
 
 Each `<section class="slide">` must set `slide-qa="true"` or `slide-qa="false"`. It must also set `data-slide-index="N"`, where `N` is the 1-based `DECKS.json` `slides[].index` value. Use the QA column to decide which value to write. Fetch any layout with the `revela-designs` tool (`action: "read"`, `layout: "<name>"`).
 
+Normal `qa=true` content layouts should start with a slide-level title block unless the layout marker explicitly says otherwise. Use an eyebrow for chapter/section context, then an `h2` that states the slide's claim or takeaway. Body boxes, charts, media, tables, and text panels should sit below or beside that title region rather than replacing it.
+
 <!-- @layout:fullbleed:start qa=false -->
 #### Fullbleed
 
 Full-canvas layout for slides where a single image dominates the entire canvas with text composited over it. Use for opening (cover) and closing slides, or atmospheric section dividers.
 
 Structural intent:
-- Single slot: place one `image-title` component directly inside `.page`. The component is self-contained — it manages its own image, blur, overlay, and text layers internally.
+- Single slot: place one `hero` component directly inside `.page`. The component is self-contained — it manages its own image, blur, overlay, and text layers internally.
 
 ```html
 <section class="slide" slide-qa="false" data-slide-index="N">
   <div class="slide-canvas">
     <div class="page" style="padding:0;">
 
-      <!-- [slot: content] — use image-title component; set --left for cover, --right for closing -->
-      <!-- image-title handles all internal z-index layering (image → blur → overlay → text) -->
+      <!-- [slot: content] — use hero component; set --left for cover, --right for closing -->
+      <!-- hero handles all internal z-index layering (image → blur → overlay → text) -->
 
     </div>
   </div>
@@ -469,10 +496,10 @@ Structural intent:
 ```
 
 ##### Tips
-- **Use `image-title` as the sole child.** The component is self-contained and fills `width:100%; height:100%` automatically. Do not add extra wrapper divs around it.
-- **Cover vs closing.** Cover: `image-title--left` with a diagonal overlay (`105deg`, left-dark to right-transparent) and left-biased blur mask. Closing: `image-title--right` with a bottom-heavy overlay (`180deg`) and right-biased blur mask.
-- **Page number.** Use `.page-number--light` — position it inside `.page` at `z-index:10` so it sits above the `image-title` stacking context.
-- **Text opacity.** For atmospheric section dividers where content is minimal, add `style="opacity:0.85"` on the `.image-title` container to soften the foreground text layer against the image.
+- **Use `hero` as the sole child.** The component is self-contained and fills `width:100%; height:100%` automatically. Do not add extra wrapper divs around it.
+- **Cover vs closing.** Cover: `hero--left` with a diagonal overlay (`105deg`, left-dark to right-transparent) and left-biased blur mask. Closing: `hero--right` with a bottom-heavy overlay (`180deg`) and right-biased blur mask.
+- **Page number.** Use `.page-number--light` — position it inside `.page` at `z-index:10` so it sits above the `hero` stacking context.
+- **Text opacity.** For atmospheric section dividers where content is minimal, add `style="opacity:0.85"` on the `.hero` container to soften the foreground text layer against the image.
 <!-- @layout:fullbleed:end -->
 
 <!-- @layout:narrative:start qa=true -->
@@ -491,13 +518,17 @@ Every slot accepts 1 or more components. The LLM decides what each slot contains
 <section class="slide" slide-qa="true" data-slide-index="N">
   <div class="slide-canvas">
     <div class="page" style="padding:0;overflow:hidden;">
-      <div class="narrative-grid">
+      <div style="display:flex;flex-direction:column;gap:10px;margin:56px 64px 28px;max-width:760px;position:relative;z-index:2;">
+        <p class="eyebrow">Chapter / Section</p>
+        <h2>Slide Claim or Takeaway</h2>
+      </div>
+      <div class="narrative-grid" style="height:calc(100% - 150px);">
 
-        <!-- [slot: left] — 1+ components; suggested: image-title, echart-panel, text-panel -->
+        <!-- [slot: left] — 1+ components; suggested: hero, media, echart-panel, text-panel, box -->
         <div>
         </div>
 
-        <!-- [slot: right] — 1+ components; suggested: text-panel, toc, flow-vertical, data-table -->
+        <!-- [slot: right] — 1+ components; suggested: text-panel, toc, steps, data-table, box -->
         <div>
         </div>
 
@@ -551,13 +582,17 @@ Every slot accepts 1 or more components. The LLM decides what each slot contains
 <section class="slide" slide-qa="true" data-slide-index="N">
   <div class="slide-canvas">
     <div class="page" style="padding:0;overflow:hidden;">
-      <div class="narrative-grid narrative-grid--reverse">
+      <div style="display:flex;flex-direction:column;gap:10px;margin:56px 64px 28px;max-width:760px;position:relative;z-index:2;">
+        <p class="eyebrow">Chapter / Section</p>
+        <h2>Slide Claim or Takeaway</h2>
+      </div>
+      <div class="narrative-grid narrative-grid--reverse" style="height:calc(100% - 150px);">
 
-        <!-- [slot: left] — 1+ components; suggested: text-panel, toc, flow-vertical, echart-panel -->
+        <!-- [slot: left] — 1+ components; suggested: text-panel, toc, steps, echart-panel, box -->
         <div>
         </div>
 
-        <!-- [slot: right] — 1+ components; suggested: image-title, echart-panel, data-table -->
+        <!-- [slot: right] — 1+ components; suggested: hero, media, echart-panel, data-table -->
         <div>
         </div>
 
@@ -578,7 +613,7 @@ Every slot accepts 1 or more components. The LLM decides what each slot contains
 
 Equal N-column layout. Use when 3 or more parallel items of roughly equal visual weight should appear side by side — proof blocks, highlights, feature comparisons, stat groups, or any multi-column editorial spread.
 
-A short section header is optional but recommended. In Summit, that header should stay lean: eyebrow plus title only, with no intro paragraph competing with the columns below.
+A short section header is the default for normal content uses. In Summit, that header should stay lean: eyebrow plus title only, with no intro paragraph competing with the columns below. Omit it only for deliberate focus/structural exceptions.
 
 Structural intent:
 - each slot: 1fr column — any component(s)
@@ -592,20 +627,20 @@ Every slot accepts 1 or more components. Add or remove child divs to control col
     <div class="page">
       <div style="display:flex;flex-direction:column;gap:10px;margin-bottom:28px;max-width:520px;">
         <p class="eyebrow">Section Label</p>
-        <h2 style="font-size:52px;line-height:0.94;text-transform:uppercase;">Short framing title for the parallel columns</h2>
+        <h2 style="font-size:48px;line-height:1.02;">Short Framing Title for the Parallel Columns</h2>
       </div>
 
       <div class="highlight-cols-grid" style="flex:1;min-height:0;">
 
-        <!-- [slot: 1] — 1+ components; suggested: editorial-image-top, editorial-text-top, echart-panel -->
+        <!-- [slot: 1] — 1+ components; suggested: box, media, text-panel, echart-panel -->
         <div>
         </div>
 
-        <!-- [slot: 2] — 1+ components; suggested: editorial-text-top, echart-panel, flow-vertical -->
+        <!-- [slot: 2] — 1+ components; suggested: box, text-panel, echart-panel, steps -->
         <div>
         </div>
 
-        <!-- [slot: 3] — 1+ components; suggested: editorial-image-top, editorial-text-top, echart-panel -->
+        <!-- [slot: 3] — 1+ components; suggested: box, media, text-panel, echart-panel -->
         <div>
         </div>
 
@@ -636,7 +671,7 @@ Every slot accepts 1 or more components. Add or remove child divs to control col
 - **Column count = number of direct child divs.** `repeat(auto-fit, minmax(0, 1fr))` distributes available width equally across however many children exist. Add a 4th or 5th div to get 4 or 5 columns — no CSS change needed.
 - **Equal columns — no hierarchy.** All slots carry the same visual weight. Adjust content density to suit the slide purpose; do not artificially inflate one column to create false hierarchy.
 - **When using 4-5 columns, compress the header.** Keep the title to one or two short lines so the grid retains most of the slide height.
-- **Do not set fixed heights on editorial components.** Let components fill height via flexbox stretch.
+- **Use boxes for semantic groups.** Normal content slides should usually contain 2-4 `box` components unless using a deliberate focus layout.
 <!-- @layout:highlight-cols:end -->
 
 <!-- @layout:halves:start qa=true -->
@@ -655,9 +690,13 @@ Every slot accepts 1 or more components. The LLM decides what each slot contains
 <section class="slide" slide-qa="true" data-slide-index="N">
   <div class="slide-canvas">
     <div class="page" style="overflow:hidden;">
+      <div style="display:flex;flex-direction:column;gap:10px;margin-bottom:28px;max-width:760px;">
+        <p class="eyebrow">Chapter / Section</p>
+        <h2 style="font-size:48px;line-height:1.02;">Slide Claim or Takeaway</h2>
+      </div>
       <div class="halves-grid" style="flex:1;min-height:0;">
 
-        <!-- [slot: left] — 1+ components; suggested: echart-panel, data-table, editorial-image-top -->
+        <!-- [slot: left] — 1+ components; suggested: echart-panel, data-table, box, media -->
         <div>
         </div>
 
@@ -708,17 +747,23 @@ Every slot accepts 1 or more components. The LLM decides what each slot contains
 ```html
 <section class="slide" slide-qa="true" data-slide-index="N">
   <div class="slide-canvas">
-    <div class="page" style="padding:0;">
-      <div class="stacked-grid">
+    <div class="page">
+      <div style="display:flex;flex-direction:column;gap:10px;margin-bottom:28px;max-width:760px;">
+        <p class="eyebrow">Chapter / Section</p>
+        <h2 style="font-size:48px;line-height:1.02;">Slide Claim or Takeaway</h2>
+      </div>
+      <div style="flex:1;min-height:0;">
+        <div class="stacked-grid">
 
-        <!-- [slot: top] — 1+ components; suggested: flow-horizontal, stat-row -->
-        <div class="stacked-top">
-        </div>
+          <!-- [slot: top] — 1+ components; suggested: steps, stat-card, box -->
+          <div class="stacked-top">
+          </div>
 
-        <!-- [slot: bottom] — 1+ components; suggested: echart-panel, data-table -->
-        <div class="stacked-bottom">
-        </div>
+          <!-- [slot: bottom] — 1+ components; suggested: echart-panel, data-table -->
+          <div class="stacked-bottom">
+          </div>
 
+        </div>
       </div>
     </div>
   </div>
@@ -761,6 +806,53 @@ Every slot accepts 1 or more components. The LLM decides what each slot contains
 
 Use these components when a page needs repeatable editorial modules inside a larger layout. Components define the block itself, not the page grid around it.
 
+Use this hierarchy: `layout -> box/card -> text-panel + media/chart/table/stat/quote`.
+
+Component defaults are transparent. Use explicit variants such as `box--paper`, `box--dark`, `text-panel--light`, or `text-panel--dark` only when a component intentionally needs its own reading field. Do not add default fills to component primitives.
+
+Source and citation text should use `.source` or `.source-note`, not `.caption`. Source text uses Times New Roman at 11px and never uses uppercase letter-spacing treatment.
+
+LLM-facing vocabulary:
+- `box` — card/group primitive for one idea, case, evidence item, metric, objection, risk, or action.
+- `text-panel` — language module for title, body text, bullets, and source notes.
+- `media` — normal image/screenshot/diagram/logo/portrait component; use `hero` for full-bleed covers.
+- `echart-panel` — chart frame with caption/source structure.
+- `data-table` — structured table component for tabular data and source notes.
+- `steps` — process or phase sequence; compatibility implementation may use `.flow-*` classes.
+- `roadmap-horizontal` and `roadmap-vertical` — dated phases, milestones, historical evolution, or future plans; compatibility implementation may use `.tjh` and `.tjv` classes.
+- `hero` — full-bleed cover, section divider, closing, or strong visual statement with overlaid title/subtitle.
+- `stat-card`, `quote`, and `toc` — pattern components for their specific use cases.
+- `page-number` and `brand-watermark` — utility components.
+
+Do not expose `image-title`, `media--cover`, `editorial-*`, `flow-*`, `timeline-journey-*`, or decorative SVG as new component choices. Old classes may remain in CSS as compatibility implementation details.
+
+Density guidance: normal content slides usually need 2-4 boxes. Evidence slides should use 2-3 evidence boxes or one main chart/table with 2 supporting boxes. Process slides should use 3-5 steps. Use one dominant element only for covers, section dividers, closing asks, full-screen charts/visuals, or deliberate emphasis.
+
+<!-- @component:box:start -->
+#### Box
+
+Card/group primitive for one idea, case, evidence item, metric, objection, risk, or action. Put `text-panel`, `media`, `echart-panel`, `data-table`, `stat-card`, or `quote` inside a box when they support the same idea.
+
+```html
+<div class="box">
+  <div class="text-panel text-panel--plain">
+    <div class="text-panel-body">
+      <p class="eyebrow">Evidence</p>
+      <h3>One clear idea</h3>
+      <p>Short supporting copy or source-bound explanation.</p>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.box { height: 100%; min-height: 0; padding: 28px; border: 1px solid var(--line); background: transparent; display: flex; flex-direction: column; gap: 18px; overflow: hidden; }
+.box--quiet { background: transparent; }
+.box--paper { background: rgba(247,244,238,0.72); }
+.box--dark { background: #2c2828; --text-primary:#f7f4ee; --text-secondary:rgba(247,244,238,0.72); --text-muted:rgba(247,244,238,0.55); --line:rgba(247,244,238,0.16); }
+```
+<!-- @component:box:end -->
+
 
 
 <!-- @component:text-panel:start -->
@@ -770,12 +862,14 @@ Use these components when a page needs repeatable editorial modules inside a lar
 
 Unified narrative text container. Use inside any layout slot that needs a self-contained reading surface with heading, body copy, and optional footer metadata. The body zone accepts prose, a bullet list, or both — choose based on content, not convention.
 
+`text-panel` is a neutral language container. Do not add a default left border, vertical accent bar, yellow/gold rule, or decorative stripe to it. Summit may use thin rules at the layout level or in `toc`, but not as a default `text-panel` treatment.
+
 ```html
 <!-- variant A: prose only (--dark) -->
 <div class="text-panel text-panel--dark">
   <div style="max-width:420px;">
     <p class="eyebrow" style="color:rgba(243,238,230,0.72);">Section label / annual review</p>
-    <h2 style="margin-top:16px;font-size:60px;line-height:0.92;letter-spacing:-0.03em;text-transform:uppercase;color:#f7f4ee;max-width:360px;">Narrative heading</h2>
+    <h2 style="margin-top:16px;font-size:56px;line-height:1;letter-spacing:-0.03em;color:#f7f4ee;max-width:390px;">Narrative Heading</h2>
     <div class="text-panel-body" style="margin-top:20px;">
       <p style="color:rgba(243,238,230,0.84);max-width:390px;">Use one or two compact paragraphs when continuous prose fits the content better than a list.</p>
     </div>
@@ -835,6 +929,11 @@ Unified narrative text container. Use inside any layout slot that needs a self-c
     justify-content: space-between;
 }
 
+.text-panel--plain {
+    padding: 0;
+    background: transparent;
+}
+
 .text-panel--dark {
     background: #2c2828;
     color: #f3eee6;
@@ -864,7 +963,7 @@ Unified narrative text container. Use inside any layout slot that needs a self-c
 Rules:
 - `.text-panel-body` is the only required structural child. Place `<p>` elements, an `<ul class="editorial-list">`, or both inside it.
 - Eyebrow, heading, and footer are all optional — include them only when the content calls for them.
-- Choose `--dark` or `--light` to match the slide's tone. Do not mix variants within a single panel.
+- Default text panels should remain transparent. Choose `--dark` or `--light` only when the component intentionally needs its own reading field; do not mix variants within a single panel.
 - Pair with a visually dominant neighbor (image, chart) when the layout needs strong contrast against the text zone.
 
 ##### Tips
@@ -875,6 +974,35 @@ Rules:
 - **`editorial-list` inside `--dark`.** Add `style="--accent-earth:rgba(247,244,238,0.72)"` on the `<ul>` wrapper so the bullet squares read against the dark background.
 <!-- @component:text-panel:end -->
 
+<!-- @component:media:start -->
+#### Media
+
+Normal image, screenshot, diagram, logo, or portrait component. Keep important visual information understandable. Do not use `media` for full-bleed covers/dividers/closings; use `hero` for those.
+
+```html
+<figure class="media">
+  <div class="media-frame">
+    <img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?q=80&w=1200&auto=format&fit=crop" alt="Alpine ridge at dawn">
+  </div>
+  <figcaption class="media-caption source-note">Optional source or field note</figcaption>
+</figure>
+```
+
+```css
+.media { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
+.media-frame { position: relative; overflow: hidden; background: transparent; width: 100%; flex: 1; min-height: 0; }
+.media-frame img { width: 100%; height: 100%; display: block; object-fit: cover; }
+.media--contain .media-frame img { object-fit: contain; }
+.media-caption { margin-top: 0; font-size: var(--font-size-meta); line-height: 1.5; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
+.media-caption.source, .media-caption.source-note { font-family: "Times New Roman", Times, serif; font-size: 11px; line-height: 1.35; letter-spacing: 0; text-transform: none; }
+```
+
+Rules:
+- Use `media` for screenshots, charts exported as images, diagrams, logos, portraits, and evidence visuals that must stay readable.
+- Use `object-fit: contain` through `media--contain` for screenshots, diagrams, and logos when cropping would remove information.
+- Put `media` inside a `box` when the visual and text support one semantic idea.
+<!-- @component:media:end -->
+
 <!-- @component:stat-card:start -->
 #### Stat Card
 
@@ -888,7 +1016,7 @@ This is **not** a dashboard card. It has no border, no background fill, no shado
   <p class="caption" style="color:var(--text-muted);">Performance signal</p>
   <div class="stat-card-value" style="color: var(--accent-gold);">27%</div>
   <div class="text-panel-body" style="gap:10px;max-width:330px;">
-    <h3 style="line-height:1.04;text-transform:uppercase;">EBIT Margin</h3>
+    <h3 style="line-height:1.08;">EBIT Margin</h3>
     <p>Expanded for the third consecutive quarter as premium mix offset freight pressure and held pricing discipline through softer volume.</p>
   </div>
 </div>
@@ -900,7 +1028,7 @@ This is **not** a dashboard card. It has no border, no background fill, no shado
     <div class="stat-card-value" style="color: var(--accent-olive);">4.8x</div>
   </div>
   <div class="text-panel-body" style="gap:10px;max-width:330px;">
-    <h3 style="line-height:1.04;text-transform:uppercase;">Inventory Turnover</h3>
+    <h3 style="line-height:1.08;">Inventory Turnover</h3>
     <p>Higher cycle efficiency reduced working-capital drag without adding new capacity, leaving more headroom for seasonal demand swings.</p>
   </div>
 </div>
@@ -948,7 +1076,7 @@ Rules:
 - **Do not over-explain.** If the description starts to become paragraph-length, switch to `text-panel` or pair the stat card with a narrative component in the neighboring slot.
 <!-- @component:stat-card:end -->
 
-<!-- @component:editorial-image-top:start -->
+<!-- @compat:editorial-image-top:start -->
 #### Editorial Image Top
 
 Image-first editorial module: image on top, text below. Best for highlight grids, product/material stories, and any module where the picture should lead before the reader enters the copy.
@@ -1032,9 +1160,9 @@ Rules:
 - **Image aspect ratio.** Aim for 16:9 or 3:2 crops for the image block. Portrait crops create tall image zones that push text down and unbalance the composition.
 - **Kicker icon size.** Keep Lucide SVG icons at 16–20px. Larger icons shift visual weight from the image to the label zone.
 - **`editorial-list` sizing.** Reuse the foundation list size. If a narrow column needs more room, shorten the copy before introducing a component-specific font override.
-<!-- @component:editorial-image-top:end -->
+<!-- @compat:editorial-image-top:end -->
 
-<!-- @component:editorial-text-top:start -->
+<!-- @compat:editorial-text-top:start -->
 #### Editorial Text Top
 
 Text-first editorial module: text on top, image below. Best for narrative snippets, report-style explanations, or blocks where the image serves as evidence rather than the primary hook.
@@ -1098,9 +1226,9 @@ Rules:
 - **Same height/stretch rule as `editorial-image-top`.** Do not set fixed heights; let parent grid stretch control the column.
 - **When used as a center spine in `highlight-cols`,** this is the one component that may legitimately be taller than its neighbors. That density imbalance is intentional — do not try to equalize it with padding or extra content in the outer columns.
 - **`editorial-list` sizing.** Reuse the foundation list size. If a narrow column needs more room, shorten the copy before introducing a component-specific font override.
-<!-- @component:editorial-text-top:end -->
+<!-- @compat:editorial-text-top:end -->
 
-<!-- @component:editorial-text-left:start -->
+<!-- @compat:editorial-text-left:start -->
 #### Editorial Text Left
 
 Horizontal editorial module: a full-width title band on top, with text on the left and a visual slot on the right below. Best for compact feature rows or any slot where a wide-but-short frame suits a side-by-side composition with a clear heading above.
@@ -1108,14 +1236,14 @@ Horizontal editorial module: a full-width title band on top, with text on the le
 Structure:
 - **header zone** (full width): holds the `h3` module title — independent of the copy below
 - **left: `.editorial-text-left-copy`** — kicker, then `text-panel-body` (prose, bullets, or both)
-- **right: `.editorial-text-left-visual`** — accepts any of: `media-frame img`, `echart-container`, or `image-title`
+- **right: `.editorial-text-left-visual`** — accepts any of: `media-frame img`, `echart-container`, or the legacy `image-title` implementation used by `hero`
 
 ```html
 <div class="editorial-text-left">
 
   <!-- header: module title spans full width -->
   <div class="editorial-text-left-header">
-    <h3 style="line-height:1.08;">Module title — a single standalone heading above both columns</h3>
+    <h3 style="line-height:1.08;">Module Title — a Single Standalone Heading Above Both Columns</h3>
   </div>
 
   <div class="editorial-text-left-content">
@@ -1150,7 +1278,7 @@ Structure:
       <!-- option B: echart -->
       <!-- <div class="echart-container" id="chart-unique-id" style="width:100%;height:100%;"></div> -->
 
-      <!-- option C: image-title (self-contained, handles its own overlay and text layers) -->
+      <!-- option C: hero/image-title compatibility implementation -->
       <!-- <div class="image-title image-title--right"> ... </div> -->
 
     </div>
@@ -1201,7 +1329,7 @@ Structure:
 Rules:
 - The `h3` in `.editorial-text-left-header` is the module's top-level title; it must not be repeated inside the copy zone.
 - The left copy zone holds a kicker row followed by a `text-panel-body`. The body accepts prose `<p>`, an `<ul class="editorial-list">`, or both — choose based on content.
-- The right visual slot is open: use a plain `media-frame img`, an `echart-container`, or a full `image-title` component. Choose based on content — there is no default.
+- The right visual slot is open: use a plain `media-frame img`, an `echart-container`, or a full `hero` implementation. Choose based on content — there is no default.
 - When using `editorial-list` inside `text-panel-body`, add `<strong>` around the first 2–5 words of each `<li>` to create a bold lead phrase for scannable hierarchy.
 - When the card carries a large statistic or callout number, place it between the header and the copy zone using an inline style (`font-size: 48px; font-family: var(--font-display); font-weight: 700; color: var(--accent-gold); line-height: 1;`).
 
@@ -1210,9 +1338,9 @@ Rules:
 - **Text-to-visual flex ratio.** Default is `1.1 : 1` (copy slightly wider). For more copy, try `1.3 : 1`. For a visually dominant right panel, try `1 : 1.2`. Do not go below `0.8` on the copy side.
 - **`editorial-list` inside copy zone.** Keep the foundation size. If the column feels cramped, reduce the amount of copy or widen the text side instead of introducing a smaller local text scale.
 - **`echart-container` in visual slot.** Set `width:100%;height:100%` on the container and call `echarts.init()` after `SlidePresentation` is instantiated. The `position:relative;overflow:hidden` on `.editorial-text-left-visual` contains the canvas correctly.
-- **`image-title` in visual slot.** The component is self-contained and fills `width:100%;height:100%` automatically. Use `image-title--right` modifier with a bottom-heavy overlay and right-biased blur mask for the most common editorial orientation.
+- **Hero implementation in visual slot.** The component is self-contained and fills `width:100%;height:100%` automatically. Use right alignment with a bottom-heavy overlay and right-biased blur mask for the most common editorial orientation.
 - **Dark background.** Override CSS variables on `.editorial-text-left` to cascade into both the copy and visual zones: `--text-primary`, `--text-secondary`, `--text-muted`, `--line`, `--line-strong` — all set to white-family values.
-<!-- @component:editorial-text-left:end -->
+<!-- @compat:editorial-text-left:end -->
 
 <!-- @component:echart-panel:start -->
 #### EChart Panel
@@ -1227,7 +1355,7 @@ Chart layout frame for data visualisation. Defines the structural container and
     <p class="chart-subtitle">Optional context or unit note</p>
   </div>
   <div class="echart-container" id="chart-01"></div>
-  <p class="chart-caption">Source: Organisation / Year</p>
+  <p class="chart-caption source-note">Source: Organisation / Year</p>
 </div>
 
 <script>
@@ -1273,10 +1401,6 @@ chart.setOption({ /* LLM selects type and config */ });
 .chart-caption {
     flex-shrink: 0;
     margin-top: 12px;
-    font-size: var(--font-size-meta);
-    letter-spacing: 0.12em;
-    text-transform: uppercase;
-    color: var(--text-muted);
 }
 ```
 
@@ -1295,30 +1419,30 @@ Rules:
 - **Chart sizing for `narrative-hero-left-dark`.** The left 7.8fr column is wide. A donut or candlestick chart works best centered with some breathing room. Add `padding: 24px 32px` to `.echart-container` to prevent the chart from touching the column edges.
 <!-- @component:echart-panel:end -->
 
-<!-- @component:flow-horizontal:start -->
-#### Flow Horizontal
+<!-- @component:steps:start -->
+#### Steps
 
-Horizontal step or phase sequence. Use for process stages, numbered definitions, or parallel concepts that should be read left to right. Suitable for 2–5 items.
+Process or phase sequence. Use 3-5 steps. Use the horizontal variant for wide slots and the vertical variant for side panels or narrow slots. Legacy `.flow-horizontal` and `.flow-vertical` classes may remain only as compatibility implementation details.
 
 ```html
-<div class="flow-horizontal">
-  <div class="flow-item">
-    <div class="flow-number">01</div>
-    <div class="flow-body">
+<div class="steps steps--horizontal">
+  <div class="step-item">
+    <div class="step-number">01</div>
+    <div class="step-body">
       <h4>Step Title</h4>
       <p>Brief description of this step or phase.</p>
     </div>
   </div>
-  <div class="flow-item">
-    <div class="flow-number">02</div>
-    <div class="flow-body">
+  <div class="step-item">
+    <div class="step-number">02</div>
+    <div class="step-body">
       <h4>Step Title</h4>
       <p>Brief description of this step or phase.</p>
     </div>
   </div>
-  <div class="flow-item">
-    <div class="flow-number">03</div>
-    <div class="flow-body">
+  <div class="step-item">
+    <div class="step-number">03</div>
+    <div class="step-body">
       <h4>Step Title</h4>
       <p>Brief description of this step or phase.</p>
     </div>
@@ -1327,8 +1451,13 @@ Horizontal step or phase sequence. Use for process stages, numbered definitions,
 ```
 
 ```css
-/* Shared by flow-horizontal and flow-vertical */
-.flow-number {
+.steps--horizontal { position: relative; display: flex; align-items: flex-start; width: 100%; }
+.steps--horizontal::before { content: ''; position: absolute; top: 17px; left: 0; right: 0; height: 1px; background: var(--line-strong); z-index: 0; }
+.steps--horizontal .step-item { flex: 1; display: flex; flex-direction: column; gap: 18px; padding-right: 40px; }
+.steps--horizontal .step-item:last-child { padding-right: 0; }
+.steps--horizontal .step-number { position: relative; z-index: 1; background: var(--bg-page); }
+
+.step-number {
     font-family: var(--font-display);
     font-size: var(--font-size-meta);
     font-weight: 700;
@@ -1343,17 +1472,18 @@ Horizontal step or phase sequence. Use for process stages, numbered definitions,
     flex-shrink: 0;
 }
 
-.flow-body h4 {
+.step-body h4 {
     font-size: 20px;
     font-weight: 600;
     line-height: 1.14;
 }
 
-.flow-body p {
+.step-body p {
     line-height: 1.6;
     color: var(--text-secondary);
 }
 
+/* Compatibility aliases for older generated decks */
 .flow-horizontal {
     position: relative;
     display: flex;
@@ -1389,6 +1519,10 @@ Horizontal step or phase sequence. Use for process stages, numbered definitions,
     z-index: 1;
     background: var(--bg-page);
 }
+
+.flow-number { font-family: var(--font-display); font-size: var(--font-size-meta); font-weight: 700; letter-spacing: 0.12em; color: var(--text-muted); border: 1px solid var(--line-strong); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+.flow-body h4 { font-size: 20px; font-weight: 600; line-height: 1.14; }
+.flow-body p { line-height: 1.6; color: var(--text-secondary); }
 ```
 
 Rules:
@@ -1398,44 +1532,41 @@ Rules:
 - Keep each item's body copy short — this is a reference summary, not a detailed explanation.
 
 ##### Tips
-- **Dark background color overrides.** Flow-number: `border-color:rgba(247,244,238,0.3); color:rgba(247,244,238,0.6); background:<dark-bg-color>`. Heading h4: `color:#f7f4ee`. Body p: `color:rgba(247,244,238,0.7)`. Apply inline on each element — CSS cascade does not automatically inherit from the slide background.
+- **Dark background color overrides.** Step number: `border-color:rgba(247,244,238,0.3); color:rgba(247,244,238,0.6); background:<dark-bg-color>`. Heading h4: `color:#f7f4ee`. Body p: `color:rgba(247,244,238,0.7)`. Apply inline on each element — CSS cascade does not automatically inherit from the slide background.
 - **Step copy length directly affects column balance.** One step with a long paragraph will push its column taller than the others and break the horizontal rhythm. Trim all steps to roughly equal length (2–4 lines each).
-- **Horizontal rule connector.** The `::before` pseudo-element on `.flow-horizontal` draws a full-width line at `top: 17px` (vertical centre of the 34px number box). `.flow-number` sits above it via `z-index: 1` and `background: var(--bg-page)`, creating the effect of the line threading through the numbers. On dark backgrounds, override `background` on `.flow-number` to match the slide background color, and set `.flow-horizontal::before { background: rgba(247,244,238,0.15); }`.
-<!-- @component:flow-horizontal:end -->
-
-<!-- @component:flow-vertical:start -->
-#### Flow Vertical
+- **Horizontal rule connector.** The `::before` pseudo-element on `.steps--horizontal` draws a full-width line at `top: 17px`. `.step-number` sits above it via `z-index: 1` and `background: var(--bg-page)`, creating the effect of the line threading through the numbers. On dark backgrounds, override `background` on `.step-number` to match the slide background color, and set `.steps--horizontal::before { background: rgba(247,244,238,0.15); }`.
+#### Vertical Variant
 
 Vertical step or timeline sequence. Use for chronological phases, execution stages, or progress narratives that should be read top to bottom. Suitable for 2–6 items.
 
 ```html
-<div class="flow-vertical">
-  <div class="flow-item">
-    <div class="flow-marker">
-      <div class="flow-number">01</div>
-      <div class="flow-line"></div>
+<div class="steps steps--vertical">
+  <div class="step-item">
+    <div class="step-marker">
+      <div class="step-number">01</div>
+      <div class="step-line"></div>
     </div>
-    <div class="flow-body">
+    <div class="step-body">
       <h4>Phase Title</h4>
       <p>Description of this stage or milestone.</p>
     </div>
   </div>
-  <div class="flow-item">
-    <div class="flow-marker">
-      <div class="flow-number">02</div>
-      <div class="flow-line"></div>
+  <div class="step-item">
+    <div class="step-marker">
+      <div class="step-number">02</div>
+      <div class="step-line"></div>
     </div>
-    <div class="flow-body">
+    <div class="step-body">
       <h4>Phase Title</h4>
       <p>Description of this stage or milestone.</p>
     </div>
   </div>
-  <div class="flow-item last">
-    <div class="flow-marker">
-      <div class="flow-number">03</div>
-      <!-- no flow-line on last item -->
+  <div class="step-item last">
+    <div class="step-marker">
+      <div class="step-number">03</div>
+      <!-- no step-line on last item -->
     </div>
-    <div class="flow-body">
+    <div class="step-body">
       <h4>Phase Title</h4>
       <p>Description of this stage or milestone.</p>
     </div>
@@ -1450,6 +1581,15 @@ Vertical step or timeline sequence. Use for chronological phases, execution stag
     width: 100%;
 }
 
+.steps--vertical { display: flex; flex-direction: column; width: 100%; }
+.steps--vertical .step-item { display: flex; gap: 28px; align-items: flex-start; }
+.step-marker { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
+.step-line { width: 1px; flex: 1; min-height: 28px; background: var(--line-strong); margin: 6px 0; }
+.steps--vertical .step-body { padding-bottom: 32px; }
+.steps--vertical .step-item.last .step-body { padding-bottom: 0; }
+.steps--vertical .step-body h4 { margin-top: 4px; }
+.steps--vertical .step-body p { margin-top: 8px; }
+
 .flow-vertical .flow-item {
     display: flex;
     gap: 28px;
@@ -1489,18 +1629,18 @@ Vertical step or timeline sequence. Use for chronological phases, execution stag
 ```
 
 Rules:
-- Add class `last` to the final `.flow-item` and omit the `.flow-line` div inside it.
+- Add class `last` to the final `.step-item` and omit the `.step-line` div inside it.
 - The connecting line grows to fill the vertical space between items via `flex: 1`.
-- Number boxes share the same border-only square style as `flow-horizontal` for visual consistency.
+- Number boxes share the same border-only square style as the horizontal variant for visual consistency.
 - Copy per item can be slightly longer than horizontal flow since vertical reading allows more density.
 - Combine with `text-panel` or `echart-panel` on the opposing side of a layout when needed.
 
 ##### Tips
-- **`.last` class on final item is mandatory.** Without it, the connecting line extends past the last item and exits the component boundary. Always add `.last` to the final `div.flow-item`.
-- **Dark background with background image.** When the column containing `flow-vertical` has a background image, use the same three-layer z-index pattern: background `z-index:0`, dark scrim `z-index:1`, component content `z-index:2`. Set the parent column to `position:relative;overflow:hidden`.
-- **Dark text overrides (same as flow-horizontal).** Flow-number border `rgba(247,244,238,0.3)`, color `rgba(247,244,238,0.6)`; h4 `#f7f4ee`; p `rgba(247,244,238,0.7)`. Also override the connecting line color: `background:rgba(247,244,238,0.2)`.
-- **Column height constraint.** `flow-vertical` expands naturally with content. In a two-column layout, ensure the opposing column (`text-panel` or `echart-panel`) has enough content to avoid a large height mismatch.
-<!-- @component:flow-vertical:end -->
+- **`.last` class on final item is mandatory.** Without it, the connecting line extends past the last item and exits the component boundary. Always add `.last` to the final `div.step-item`.
+- **Dark background with background image.** When the column containing `steps` has a background image, use the same three-layer z-index pattern: background `z-index:0`, dark scrim `z-index:1`, component content `z-index:2`. Set the parent column to `position:relative;overflow:hidden`.
+- **Dark text overrides.** Step-number border `rgba(247,244,238,0.3)`, color `rgba(247,244,238,0.6)`; h4 `#f7f4ee`; p `rgba(247,244,238,0.7)`. Also override the connecting line color: `background:rgba(247,244,238,0.2)`.
+- **Column height constraint.** Vertical steps expand naturally with content. In a two-column layout, ensure the opposing column (`text-panel` or `echart-panel`) has enough content to avoid a large height mismatch.
+<!-- @component:steps:end -->
 
 <!-- @component:data-table:start -->
 #### Data Table
@@ -1551,7 +1691,7 @@ Annual-report format data table. Use for year-on-year comparisons, emissions dat
       </tr>
     </tbody>
   </table>
-  <p class="table-caption">Thousands of tonnes CO₂e · Source: Company Disclosures 2024</p>
+  <p class="table-caption source-note">Thousands of tonnes CO₂e · Source: Company Disclosures 2024</p>
 </div>
 ```
 
@@ -1661,10 +1801,6 @@ Annual-report format data table. Use for year-on-year comparisons, emissions dat
 
 .table-caption {
     margin-top: 12px;
-    font-size: var(--font-size-meta);
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-    color: var(--text-muted);
 }
 ```
 
@@ -1677,7 +1813,7 @@ Rules:
 - Use `.col-highlight` on both `th` and `td` in a column to spotlight the current or most important period.
 - `.delta.positive` and `.delta.negative` use Summit accent colours, not generic green/red. `.delta.neutral` for flat movement.
 - Use `data-table-label` as a heading above the table when multiple tables are stacked.
-- Include `.table-caption` below with the data source and unit.
+- Include `.table-caption.source-note` below with the data source and unit.
 
 ##### Tips
 - **Dense tables.** Keep the table on the foundation text scale when possible. If the dataset is too large, simplify the table, split it into multiple tables, or reduce the number of columns before introducing a smaller local text size.
@@ -1694,18 +1830,18 @@ Rules:
 
 
 
-<!-- @component:image-title:start -->
-#### Image Title
+<!-- @component:hero:start -->
+#### Hero
 
-Self-contained full-canvas component: a dominant photograph with a directional blur layer, a gradient overlay, and a foreground text stack — all composited inside one element. Use for cover slides, closing slides, atmospheric section dividers, or any full-bleed spread where a single image should dominate the entire canvas.
+Self-contained full-canvas component: a dominant photograph with a directional blur layer, a gradient overlay, and a foreground text stack — all composited inside one element. Use for cover slides, closing slides, atmospheric section dividers, or any full-bleed spread where a single image should dominate the entire canvas. Never use `hero` inside a `box`. Never use it for screenshots, charts, tables, diagrams, or source evidence that must stay fully readable.
 
 The LLM controls three key variables via inline style or modifier class:
-- **Alignment**: `image-title--left` (cover default), `image-title--right` (closing default), `image-title--center`
+- **Alignment**: `hero--left`/`image-title--left` (cover default), `hero--right`/`image-title--right` (closing default), `hero--center`/`image-title--center`
 - **Overlay opacity / direction**: set the `background` gradient on `.image-title-overlay` inline
-- **Text opacity**: set `opacity` on `.image-title` itself (range `0.7`–`1.0`; default `1.0`)
+- **Text opacity**: set `opacity` on `.hero` itself (range `0.7`–`1.0`; default `1.0`)
 
 ```html
-<div class="image-title image-title--left">
+<div class="hero hero--left image-title image-title--left">
 
   <!-- Layer 0: background image -->
   <img class="image-title-media" src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?q=80&w=1920&auto=format&fit=crop" alt="Alpine ridge at dawn">
@@ -1749,6 +1885,14 @@ The LLM controls three key variables via inline style or modifier class:
     color: #f7f4ee;
 }
 
+.hero {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    color: #f7f4ee;
+}
+
 /* Layer 0: background image */
 .image-title-media {
     position: absolute;
@@ -1792,21 +1936,27 @@ The LLM controls three key variables via inline style or modifier class:
     max-width: 680px;
 }
 
+.hero--left .image-title-body { max-width: 680px; }
+
 .image-title--right .image-title-fg {
     text-align: right;
 }
+.hero--right .image-title-fg { text-align: right; }
 .image-title--right .image-title-body {
     max-width: 860px;
     margin-left: auto;
 }
+.hero--right .image-title-body { max-width: 860px; margin-left: auto; }
 
 .image-title--center .image-title-fg {
     text-align: center;
     align-items: center;
 }
+.hero--center .image-title-fg { text-align: center; align-items: center; }
 .image-title--center .image-title-body {
     max-width: 900px;
 }
+.hero--center .image-title-body { max-width: 900px; }
 
 /* Text elements */
 .image-title-eyebrow {
@@ -1823,7 +1973,6 @@ The LLM controls three key variables via inline style or modifier class:
     font-size: 96px;
     line-height: 0.92;
     letter-spacing: -0.03em;
-    text-transform: uppercase;
 }
 
 .image-title-subtitle {
@@ -1843,7 +1992,7 @@ The LLM controls three key variables via inline style or modifier class:
 ```
 
 Rules:
-- Always use one of the three modifier classes: `image-title--left`, `image-title--right`, or `image-title--center`. Never omit the modifier.
+- Always use one of the three hero modifier classes: `hero--left`, `hero--right`, or `hero--center`. Keep legacy `image-title--*` classes only for compatibility when reusing the built-in CSS.
 - Set the `background` gradient on `.image-title-overlay` inline — never use a static class value. The direction and opacity must match the text position: dense dark on the text side, fading toward the open image side.
 - The blur mask direction must mirror the text alignment: `--left` uses `to left`, `--right` uses `to right`. Both `-webkit-mask-image` and `mask-image` are required for cross-browser support.
 - All text inside `.image-title-fg` must be white-family: headings `#f7f4ee`, body `rgba(247,244,238,0.72)`, captions and eyebrows `rgba(247,244,238,0.50–0.55)`.
@@ -1858,7 +2007,7 @@ Rules:
 - **`--right` closing variant.** Mirror the blur mask: use `mask-image:linear-gradient(to right, transparent 0%, transparent 20%, black 100%)`. The right side stays blurred (text zone); the left side of the image stays sharp.
 - **`--center` variant.** Use a radial or symmetric overlay: `radial-gradient(ellipse at center, rgba(5,5,5,0.72) 0%, rgba(5,5,5,0.20) 100%)` or a flat `rgba(5,5,5,0.55)`. Center blur mask: `mask-image:radial-gradient(ellipse at center, black 0%, transparent 80%)`.
 - **Subtitle width on `--right`.** `.image-title-subtitle` inherits `max-width:480px` which is set for left-aligned text. On `--right`, override to match the `.image-title-body` width: `style="max-width:520px;margin-left:auto;"`.
-<!-- @component:image-title:end -->
+<!-- @component:hero:end -->
 
 <!-- @component:toc:start -->
 #### TOC Panel
@@ -1870,15 +2019,15 @@ Narrow editorial panel for table-of-contents slides. A 3px accent-gold vertical
   <div style="width:3px;background:var(--accent-gold);flex:0 0 3px;"></div>
   <div style="padding-left:22px;display:flex;flex-direction:column;justify-content:space-between;flex:1;">
     <div>
-      <h2 style="font-size:34px;line-height:0.94;letter-spacing:-0.03em;text-transform:uppercase;max-width:220px;">Table of Contents</h2>
-      <p style="margin-top:18px;letter-spacing:0.04em;color:var(--text-secondary);max-width:255px;">Short introductory note describing the scope of the sections that follow.</p>
-      <ol style="list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:26px;">
-        <li style="display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:center;line-height:1.45;text-transform:uppercase;letter-spacing:0.06em;border-bottom:1px solid var(--line);padding-bottom:8px;"><span style="font-weight:700;">01</span><span>Chapter title or section theme</span></li>
-        <li style="display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:center;line-height:1.45;text-transform:uppercase;letter-spacing:0.06em;border-bottom:1px solid var(--line);padding-bottom:8px;"><span style="font-weight:700;">02</span><span>Chapter title or section theme</span></li>
-        <li style="display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:center;line-height:1.45;text-transform:uppercase;letter-spacing:0.06em;border-bottom:1px solid var(--line);padding-bottom:8px;"><span style="font-weight:700;">03</span><span>Chapter title or section theme</span></li>
-        <li style="display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:center;line-height:1.45;text-transform:uppercase;letter-spacing:0.06em;border-bottom:1px solid var(--line);padding-bottom:8px;"><span style="font-weight:700;">04</span><span>Chapter title or section theme</span></li>
-        <li style="display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:center;line-height:1.45;text-transform:uppercase;letter-spacing:0.06em;border-bottom:1px solid var(--line);padding-bottom:8px;"><span style="font-weight:700;">05</span><span>Chapter title or section theme</span></li>
-        <li style="display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:center;line-height:1.45;text-transform:uppercase;letter-spacing:0.06em;"><span style="font-weight:700;">06</span><span>Chapter title or section theme</span></li>
+      <h2 style="font-size:28px;line-height:1.04;letter-spacing:-0.02em;max-width:220px;">Table of Contents</h2>
+      <p style="margin-top:14px;font-size:15px;line-height:1.45;color:var(--text-secondary);max-width:255px;">Short introductory note describing the scope of the sections that follow.</p>
+      <ol style="list-style:none;display:flex;flex-direction:column;gap:7px;margin-top:20px;">
+        <li style="display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:center;font-size:14px;line-height:1.35;letter-spacing:0.01em;border-bottom:1px solid var(--line);padding-bottom:6px;"><span style="font-weight:700;">01</span><span>Chapter Title or Section Theme</span></li>
+        <li style="display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:center;font-size:14px;line-height:1.35;letter-spacing:0.01em;border-bottom:1px solid var(--line);padding-bottom:6px;"><span style="font-weight:700;">02</span><span>Chapter Title or Section Theme</span></li>
+        <li style="display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:center;font-size:14px;line-height:1.35;letter-spacing:0.01em;border-bottom:1px solid var(--line);padding-bottom:6px;"><span style="font-weight:700;">03</span><span>Chapter Title or Section Theme</span></li>
+        <li style="display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:center;font-size:14px;line-height:1.35;letter-spacing:0.01em;border-bottom:1px solid var(--line);padding-bottom:6px;"><span style="font-weight:700;">04</span><span>Chapter Title or Section Theme</span></li>
+        <li style="display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:center;font-size:14px;line-height:1.35;letter-spacing:0.01em;border-bottom:1px solid var(--line);padding-bottom:6px;"><span style="font-weight:700;">05</span><span>Chapter Title or Section Theme</span></li>
+        <li style="display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:center;font-size:14px;line-height:1.35;letter-spacing:0.01em;"><span style="font-weight:700;">06</span><span>Chapter Title or Section Theme</span></li>
       </ol>
     </div>
     <div style="display:flex;flex-direction:column;gap:14px;">
@@ -1897,15 +2046,16 @@ Narrow editorial panel for table-of-contents slides. A 3px accent-gold vertical
 
 ```css
 .toc-panel {
-    background: var(--bg-page);
+    background: transparent;
     height: 100%;
-    padding: 42px 38px 30px;
+    padding: 38px 34px 28px;
     display: flex;
 }
 ```
 
 ##### Tips
 - **Chapter numbers must be `font-weight:700`.** Without bold, the numbers dissolve visually into the lighter chapter title text.
+- **Keep TOC compact.** Use a smaller title and 14px chapter items so the agenda reads as a navigation panel, not a main content slide.
 - **Last `li` has no `border-bottom`.** Every item except the last carries `border-bottom:1px solid var(--line)`. Remove it from the final entry to avoid a floating rule at the bottom of the list.
 - **accent-gold vertical rule.** The 3px left rule uses `var(--accent-gold)`. Do not substitute another color — it is the primary editorial accent in Summit.
 - **`justify-content:space-between` requires a defined height on the parent.** The panel must sit inside a container with a known height (grid cell, absolute position, or `height:100%` chain) or the footer will not pin to the bottom.
@@ -2100,13 +2250,13 @@ Omit `--light` only on slides with a white/light background.
 
 <!-- @component:page-number:end -->
 
-<!-- @component:timeline-journey-horizontal:start -->
-#### Timeline Journey Horizontal
+<!-- @component:roadmap-horizontal:start -->
+#### Roadmap Horizontal
 
 A horizontal milestone timeline with a central axis line. Nodes sit on the axis; a dashed vertical stem leads to a tip node, with date, title, and description text alongside. Alternate nodes above and below the axis for rhythm. Suitable for 4–8 milestones across a chronological arc, transformation story, or multi-year programme recap.
 
 ```html
-<div class="tjh">
+<div class="roadmap-horizontal tjh" data-preview-component="roadmap-horizontal">
   <div class="tjh-axis"></div>
 
   <!-- UP node: item bottom edge sits on axis, content grows upward.
@@ -2150,6 +2300,8 @@ A horizontal milestone timeline with a central axis line. Nodes sit on the axis;
   height: 360px;
 }
 
+.roadmap-horizontal { position: relative; width: 100%; height: 360px; }
+
 /* Axis line */
 .tjh-axis {
   position: absolute;
@@ -2260,17 +2412,17 @@ Rules:
 - **Adjust stem length**: Change `--tjh-stem-h` to lengthen or shorten the dashed connector.
 - **Dark background overrides**: Set `--line-strong: rgba(247,244,238,0.25)` on `.tjh`, override `.tjh-axis { background }`, set `.tjh-title { color: #f7f4ee }`, `.tjh-text { color: rgba(247,244,238,0.7) }`. The `--tjh-item-color` accent colours work on dark backgrounds without change.
 - **Fewer nodes**: For 4–5 nodes, widen `--tjh-col` by using a smaller denominator (e.g. `calc(100% / 5)`), and space `left` values accordingly.
-<!-- @component:timeline-journey-horizontal:end -->
+<!-- @component:roadmap-horizontal:end -->
 
-<!-- @component:timeline-journey-vertical:start -->
-#### Timeline Journey Vertical
+<!-- @component:roadmap-vertical:start -->
+#### Roadmap Vertical
 
 A vertical milestone timeline with a central axis line. Nodes sit on the axis; a horizontal dashed stem leads to a tip dot, with date, title, and description text alongside. Alternate nodes left and right of the axis for rhythm. Suitable for 3–8 milestones across a chronological arc, transformation story, or multi-year programme recap.
 
 Can be placed inside any layout slot that provides a defined height (`narrative`, `halves`, `highlight-cols`, `stacked`, or a full-page content zone). The component fills `width: 100%; height: 100%` of its parent.
 
 ```html
-<div class="tjv">
+<div class="roadmap-vertical tjv" data-preview-component="roadmap-vertical">
   <div class="tjv-axis"></div>
 
   <!-- LEFT node: DOM order axis-dot → stem → tip-dot → label.
@@ -2315,6 +2467,8 @@ Can be placed inside any layout slot that provides a defined height (`narrative`
   height: 100%;
 }
 
+.roadmap-vertical { position: relative; width: 100%; height: 100%; }
+
 /* Vertical axis — horizontally centered, full height */
 .tjv-axis {
   position: absolute;
@@ -2457,6 +2611,6 @@ Rules:
 - **Dark background overrides**: set on the `.tjv` wrapper — `--line-strong: rgba(247,244,238,0.25)` (axis + stem), `.tjv-title { color: #f7f4ee }`, `.tjv-text { color: rgba(247,244,238,0.7) }`. The `--tjv-item-color` accent colours work on dark backgrounds without change.
 - **Fewer nodes (3–4)**: increase spacing — use `top` values like `15%, 35%, 55%, 75%` to prevent the timeline from clustering at the top.
 - **More nodes (6–8)**: keep `.tjv-text` to 1–2 lines and increase vertical spacing before shrinking the text scale.
-<!-- @component:timeline-journey-vertical:end -->
+<!-- @component:roadmap-vertical:end -->
 
 <!-- @design:components:end -->