@cyber-dash-tech/revela 0.19.1 → 0.19.3

package/designs/summit/design.css

@@ -140,19 +140,27 @@ body { margin: 0; background: var(--bg-frame, #07111f); color: var(--text-primar
 .template-chart-placeholder { width: 76%; height: 56%; border-left: 2px solid var(--line-strong); border-bottom: 2px solid var(--line-strong); display: flex; align-items: end; gap: 28px; padding: 0 28px 24px; }
 .template-visual-slot-panel { width: 100%; min-height: 520px; border: 1px dashed var(--line-strong); border-radius: var(--surface-radius); background: linear-gradient(135deg, rgba(49,94,234,0.08), rgba(24,168,216,0.08)); display: grid; place-items: center; padding: 0; }
 .template-visual-slot-label { font-size: 13px; line-height: 1.35; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-weight: 800; }
-.template-text-panel.template-chart-takeaway-panel { gap: 28px; background: linear-gradient(135deg, #5f82c8 0%, var(--accent-primary) 58%, #18a8d8 115%); color: white; box-shadow: 0 22px 56px rgba(49,94,234,0.24); }
-.template-chart-takeaway-panel .template-text-panel-title { color: white; }
+.template-text-panel.template-chart-takeaway-panel { gap: 28px; }
+.template-text-panel--plain { background: rgba(255,255,255,0.74); border: 1px solid transparent; box-shadow: none; }
+.template-text-panel--clear { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding-left: 0; padding-right: 0; }
+.template-text-panel--color { background: linear-gradient(135deg, #5f82c8 0%, var(--accent-primary) 58%, #18a8d8 115%); color: white; box-shadow: 0 22px 56px rgba(49,94,234,0.24); }
+.template-text-panel--color .template-text-panel-title { color: white; }
+.template-text-panel--color .template-text-panel-body { color: rgba(255,255,255,0.78); }
 .template-chart-takeaway-list { display: grid; gap: 22px; width: 100%; }
 .template-chart-takeaway-item { display: grid; gap: 7px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.24); }
 .template-chart-takeaway-item:first-child { padding-top: 0; border-top: 0; }
 .template-chart-takeaway-item h3 { margin: 0; font-size: 25px; line-height: 1.24; color: white; }
 .template-chart-takeaway-item p { margin: 0; font-size: 20px; line-height: 1.46; color: rgba(255,255,255,0.78); }
 .template-bar { flex: 1; background: linear-gradient(180deg, var(--accent-primary), var(--accent-cyan)); min-height: 80px; }
+.template-table-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 34px; height: 100%; align-items: stretch; }
+.template-table-layout .template-side-panel { grid-column: 1; grid-row: 1; }
+.template-table-region { grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; height: 100%; }
+.template-table-region .template-table-wrap { height: 100%; }
 .template-table-wrap { display: grid; grid-template-rows: minmax(0, auto) auto; gap: 22px; height: 100%; align-content: start; }
 .template-table { width: 100%; border-collapse: collapse; background: rgba(255,255,255,0.86); box-shadow: 0 18px 44px var(--shadow-soft); }
 .template-table th, .template-table td { padding: 22px 24px; border-bottom: 1px solid var(--line); text-align: left; font-size: 21px; }
 .template-table th { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em; font-size: 15px; }
-.template-text-panel { min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 20px; background: rgba(255,255,255,0.74); border-radius: var(--surface-radius); padding: 42px; }
+.template-text-panel { min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 20px; border-radius: var(--surface-radius); padding: 42px; }
 .template-text-panel-title { margin: 0; font-size: 34px; line-height: 1.28; color: var(--text-primary); padding-bottom: 4px; overflow: visible; }
 .template-text-panel-body { margin: 0; font-size: 23px; line-height: 1.52; color: var(--text-secondary); }
 .template-side-panel { align-self: stretch; }
@@ -174,9 +182,7 @@ body { margin: 0; background: var(--bg-frame, #07111f); color: var(--text-primar
 .template-timeline-layout--right { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
 .template-timeline-layout--right .template-timeline { grid-column: 1; grid-row: 1; }
 .template-timeline-layout--right .template-side-panel { grid-column: 2; grid-row: 1; }
-.template-timeline-layout .template-text-panel { background: linear-gradient(135deg, #7a7fe8 0%, #5f82c8 58%, #315eea 115%); color: white; box-shadow: 0 22px 56px rgba(49,94,234,0.22); }
-.template-timeline-layout .template-text-panel-title { color: white; }
-.template-timeline-layout .template-text-panel-body { color: rgba(255,255,255,0.78); }
+.template-timeline-layout .template-text-panel--color { background: linear-gradient(135deg, #7a7fe8 0%, #5f82c8 58%, #315eea 115%); color: white; box-shadow: 0 22px 56px rgba(49,94,234,0.22); }
 .template-timeline--horizontal { grid-template-columns: repeat(var(--timeline-count), 1fr); column-gap: 18px; align-items: stretch; --timeline-axis-y: 86%; }
 .template-timeline--horizontal::before { content: ""; position: absolute; left: 4%; right: 4%; top: var(--timeline-axis-y); border-top: 2px solid var(--line-strong); transform: translateY(-1px); }
 .template-timeline-item { position: relative; min-height: 400px; display: grid; justify-items: center; align-items: center; }
@@ -250,6 +256,10 @@ body { margin: 0; background: var(--bg-frame, #07111f); color: var(--text-primar
 .template-frame--catalog .template-chart-takeaway-item { gap: 4px; padding-top: 11px; }
 .template-frame--catalog .template-chart-takeaway-item h3 { font-size: 19px; line-height: 1.2; }
 .template-frame--catalog .template-chart-takeaway-item p { font-size: 15px; line-height: 1.3; }
+.template-frame--catalog .template-table-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 22px; }
+.template-frame--catalog .template-table-layout .template-text-panel { padding: 22px; gap: 10px; }
+.template-frame--catalog .template-table-layout .template-text-panel-title { font-size: 25px; line-height: 1.3; }
+.template-frame--catalog .template-table-layout .template-text-panel-body { font-size: 18px; line-height: 1.4; }
 .template-frame--catalog .template-table-wrap { gap: 16px; }
 .template-frame--catalog .template-table th,
 .template-frame--catalog .template-table td { padding: 14px 18px; font-size: 17px; line-height: 1.32; }
@@ -316,8 +326,8 @@ body { margin: 0; background: var(--bg-frame, #07111f); color: var(--text-primar
 .template-card h3,
 .template-text-panel-title,
 .template-claim-text-title { letter-spacing: 0; }
-.template-text-panel.template-chart-takeaway-panel,
-.template-timeline-layout .template-text-panel {
+.template-text-panel--color,
+.template-timeline-layout .template-text-panel--color {
   background: linear-gradient(135deg, #176c63 0%, #2a8f84 54%, #b0822e 125%);
 }
 .template-slide[data-design="summit"][data-template="cover"] .slide-canvas,

package/lib/page-templates/built-in-preview.html

@@ -12,7 +12,7 @@
         <div class="slide-canvas">
             <div class="template-frame template-hero template-hero--cover">
                 <div data-template-slot="hero"><header>
-                    <p class="template-eyebrow">Template 01 / 16</p>
+                    <p class="template-eyebrow">Template 01 / 17</p>
                     <h1 class="template-title template-hero-title">cover</h1>
                 </header></div>
                 
@@ -24,7 +24,7 @@
         <div class="slide-canvas">
             <div class="template-frame template-hero template-hero--section-divider">
                 <div data-template-slot="hero"><header>
-                    <p class="template-eyebrow">Template 02 / 16</p>
+                    <p class="template-eyebrow">Template 02 / 17</p>
                     <h1 class="template-title template-hero-title">section-divider</h1>
                 </header></div>
                 
@@ -36,7 +36,7 @@
         <div class="slide-canvas">
             <div class="template-frame template-hero template-hero--closing">
                 <div data-template-slot="hero"><header>
-                    <p class="template-eyebrow">Template 03 / 16</p>
+                    <p class="template-eyebrow">Template 03 / 17</p>
                     <h1 class="template-title template-hero-title">closing</h1>
                 </header></div>
                 
@@ -50,7 +50,7 @@
                 <div class="template-body template-agenda-panel" data-template-slot="agenda">
                     <div class="template-agenda-inner">
                         <div class="template-agenda-header">
-                            <p class="template-eyebrow">Template 04 / 16</p>
+                            <p class="template-eyebrow">Template 04 / 17</p>
                             <h1 class="template-title">agenda</h1>
                             <p class="template-agenda-footer">Structure-First-Design</p>
                         </div>
@@ -66,7 +66,7 @@
         <div class="slide-canvas">
             <div class="template-frame">
                 <header>
-                    <p class="template-eyebrow">Template 05 / 16</p>
+                    <p class="template-eyebrow">Template 05 / 17</p>
                     <h1 class="template-title">executive-summary</h1>
                 </header><div class="template-body template-grid cols-3" data-template-slot="summary-cards"><article class="template-card"><h2>Decision is ready</h2><p>The facts support moving from discussion to selection without adding another analysis cycle.</p><figure class="template-visual-placeholder"><div class="template-visual-placeholder-frame"><span class="template-visual-placeholder-label">image / chart slot (optional)</span></div></figure></article><article class="template-card"><h2>Risk is bounded</h2><p>Known caveats are visible, named, and can be managed through rollout gates.</p><figure class="template-visual-placeholder"><div class="template-visual-placeholder-frame"><span class="template-visual-placeholder-label">image / chart slot (optional)</span></div></figure></article><article class="template-card"><h2>Next step is narrow</h2><p>A pilot decision creates more learning without overcommitting capital or team capacity.</p><figure class="template-visual-placeholder"><div class="template-visual-placeholder-frame"><span class="template-visual-placeholder-label">image / chart slot (optional)</span></div></figure></article></div>
                 
@@ -78,7 +78,7 @@
         <div class="slide-canvas">
             <div class="template-frame">
                 <header>
-                    <p class="template-eyebrow">Template 06 / 16</p>
+                    <p class="template-eyebrow">Template 06 / 17</p>
                     <h1 class="template-title">problem-context</h1>
                 </header><div class="template-body template-grid cols-2"><div class="template-card" data-template-slot="context"><p>Use this template when the audience needs the situation, tension, and implication before seeing recommendations.</p></div><div class="template-card" data-template-slot="supporting-points"><ul class="template-list"><li><strong>Situation</strong> A shift has changed the operating baseline.</li><li><strong>Tension</strong> Current process cannot absorb the new variance cleanly.</li><li><strong>Implication</strong> Delay increases rework and weakens decision confidence.</li></ul></div></div>
                 
@@ -90,7 +90,7 @@
         <div class="slide-canvas">
             <div class="template-frame">
                 <header>
-                    <p class="template-eyebrow">Template 07 / 16</p>
+                    <p class="template-eyebrow">Template 07 / 17</p>
                     <h1 class="template-title">key-message-evidence</h1>
                 </header><div class="template-body template-grid cols-2"><div class="template-key-message-panel" data-template-slot="key-message">
                     <h2 class="template-key-message-kicker">Key message</h2>
@@ -105,7 +105,7 @@
         <div class="slide-canvas">
             <div class="template-frame">
                 <header>
-                    <p class="template-eyebrow">Template 08 / 16</p>
+                    <p class="template-eyebrow">Template 08 / 17</p>
                     <h1 class="template-title">claim-supporting-visual</h1>
                 </header><div class="template-body template-grid cols-2"><div class="template-claim-text-panel" data-template-slot="claim">
                     <h2 class="template-claim-text-title">A single visual should carry one argument.</h2>
@@ -121,7 +121,7 @@
         <div class="slide-canvas">
             <div class="template-frame">
                 <header>
-                    <p class="template-eyebrow">Template 09 / 16</p>
+                    <p class="template-eyebrow">Template 09 / 17</p>
                     <h1 class="template-title">metric-highlight</h1>
                 </header><div class="template-body"><div class="template-metric-layout template-metric-layout--insight-bottom"><div class="template-stat-grid" data-template-slot="metrics"><article class="template-card"><div class="template-stat-value">67%</div><h2>Adoption signal</h2><p>Primary number plus interpretation.</p></article><article class="template-card"><div class="template-stat-value">3x</div><h2>Review speed</h2><p>Comparison is stated beside the metric.</p></article><article class="template-card"><div class="template-stat-value">14d</div><h2>Pilot window</h2><p>Time bound keeps the ask concrete.</p></article></div><div class="template-insight-panel">
                     <h2 class="template-insight-title"><i class="template-insight-icon" data-lucide="scan-search" aria-hidden="true"></i><span>Read the signal</span></h2>
@@ -136,9 +136,9 @@
         <div class="slide-canvas">
             <div class="template-frame">
                 <header>
-                    <p class="template-eyebrow">Template 10 / 16</p>
+                    <p class="template-eyebrow">Template 10 / 17</p>
                     <h1 class="template-title">chart-takeaways</h1>
-                </header><div class="template-body template-grid template-chart-layout"><div class="template-chart-panel template-visual-slot-panel" data-template-slot="visual"><span class="template-visual-slot-label">image / chart slot (optional)</span></div><div class="template-text-panel template-chart-takeaway-panel" data-template-slot="takeaways">
+                </header><div class="template-body template-grid template-chart-layout"><div class="template-chart-panel template-visual-slot-panel" data-template-slot="visual"><span class="template-visual-slot-label">image / chart slot (optional)</span></div><div class="template-text-panel template-text-panel--color template-chart-takeaway-panel" data-template-slot="takeaways">
                     <h2 class="template-text-panel-title">What to read</h2>
                     <div class="template-chart-takeaway-list"><section class="template-chart-takeaway-item"><h3>Trend</h3><p>Call out the movement or comparison the chart is meant to prove, including the direction and the comparison baseline.</p></section><section class="template-chart-takeaway-item"><h3>Driver</h3><p>Name the likely reason without overclaiming; separate observed movement from the interpretation or hypothesis.</p></section><section class="template-chart-takeaway-item"><h3>Decision use</h3><p>Explain how the chart changes the recommendation, what threshold matters, and what follow-up evidence would reduce risk.</p></section></div>
                 </div></div>
@@ -147,11 +147,23 @@
             <div class="template-page-number">10</div>
         </div>
     </section>
-    <section class="slide template-slide" slide-qa="true" data-slide-index="11" data-design="built-in-preview" data-template="table-comparison">
+    <section class="slide template-slide" slide-qa="true" data-slide-index="11" data-design="built-in-preview" data-template="table">
         <div class="slide-canvas">
             <div class="template-frame">
                 <header>
-                    <p class="template-eyebrow">Template 11 / 16</p>
+                    <p class="template-eyebrow">Template 11 / 17</p>
+                    <h1 class="template-title">table</h1>
+                </header><div class="template-body"><div class="template-table-layout"><div class="template-side-panel template-text-panel template-text-panel--clear" data-template-slot="text-card"><h2 class="template-side-panel-title template-text-panel-title">Financial readout</h2><p class="template-side-panel-body template-text-panel-body">Read top-line growth first, then check margin, cash conversion, and retention to see whether the plan is financially durable.</p></div><div class="template-table-region" data-template-slot="table"><div class="template-table-wrap"><table class="template-table"><thead><tr><th>Line item</th><th>FY2025</th><th>FY2026 Plan</th><th>YoY / note</th></tr></thead><tbody><tr><td>Revenue</td><td>$84.2M</td><td>$104.8M</td><td>+24% planned growth</td></tr><tr><td>Gross margin</td><td>68.4%</td><td>71.2%</td><td>+280 bps mix shift</td></tr><tr><td>Operating expense</td><td>$42.7M</td><td>$49.1M</td><td>Scale hiring below revenue growth</td></tr><tr><td>EBITDA</td><td>$14.9M</td><td>$23.6M</td><td>+58% operating leverage</td></tr><tr><td>Free cash flow</td><td>$9.8M</td><td>$16.4M</td><td>Cash conversion improves to 69%</td></tr><tr><td>Net retention</td><td>116%</td><td>121%</td><td>Expansion supports plan quality</td></tr></tbody></table></div></div></div></div>
+                
+            </div>
+            <div class="template-page-number">11</div>
+        </div>
+    </section>
+    <section class="slide template-slide" slide-qa="true" data-slide-index="12" data-design="built-in-preview" data-template="table-comparison">
+        <div class="slide-canvas">
+            <div class="template-frame">
+                <header>
+                    <p class="template-eyebrow">Template 12 / 17</p>
                     <h1 class="template-title">table-comparison</h1>
                 </header><div class="template-body" data-template-slot="table"><div class="template-table-wrap"><table class="template-table"><thead><tr><th>Layer</th><th>Owns</th><th>Agent task</th></tr></thead><tbody><tr><td>Template</td><td>Structure and DOM contract</td><td>Select the page pattern</td></tr><tr><td>Content</td><td>Claim, evidence, caveat</td><td>Fill the meaning</td></tr><tr><td>Design</td><td>Color, type, surfaces</td><td>Skin stable classes</td></tr></tbody></table><div class="template-insight-panel">
                     <h2 class="template-insight-title"><i class="template-insight-icon" data-lucide="lightbulb" aria-hidden="true"></i><span>Insight</span></h2>
@@ -159,15 +171,15 @@
                 </div></div></div>
                 
             </div>
-            <div class="template-page-number">11</div>
+            <div class="template-page-number">12</div>
         </div>
     </section>
-    <section class="slide template-slide" slide-qa="true" data-slide-index="12" data-design="built-in-preview" data-template="timeline-roadmap">
+    <section class="slide template-slide" slide-qa="true" data-slide-index="13" data-design="built-in-preview" data-template="milestone">
         <div class="slide-canvas">
             <div class="template-frame">
                 <header>
-                    <p class="template-eyebrow">Template 12 / 16</p>
-                    <h1 class="template-title">timeline-roadmap</h1>
+                    <p class="template-eyebrow">Template 13 / 17</p>
+                    <h1 class="template-title">milestone</h1>
                 </header><div class="template-body"><div class="template-timeline template-timeline--horizontal" data-template-slot="timeline" style="--timeline-count:5"><article class="template-timeline-item">
                         <div class="template-timeline-copy template-card">
                             <i class="template-insight-icon" data-lucide="scan-search" aria-hidden="true"></i>
@@ -211,16 +223,16 @@
                     </article></div></div>
                 
             </div>
-            <div class="template-page-number">12</div>
+            <div class="template-page-number">13</div>
         </div>
     </section>
-    <section class="slide template-slide" slide-qa="true" data-slide-index="13" data-design="built-in-preview" data-template="timeline-roadmap">
+    <section class="slide template-slide" slide-qa="true" data-slide-index="14" data-design="built-in-preview" data-template="timeline">
         <div class="slide-canvas">
             <div class="template-frame">
                 <header>
-                    <p class="template-eyebrow">Template 13 / 16</p>
-                    <h1 class="template-title">timeline-roadmap-vertical</h1>
-                </header><div class="template-body"><div class="template-timeline-layout template-timeline-layout--left"><div class="template-side-panel template-text-panel" data-template-slot="insight"><h2 class="template-side-panel-title template-text-panel-title">Reading the journey</h2><p class="template-side-panel-body template-text-panel-body">The timeline should show sequence and decision rhythm, while the side panel explains why the milestones matter.</p></div><div class="template-timeline template-timeline--vertical" data-template-slot="timeline" style="--timeline-count:4"><article class="template-timeline-item">
+                    <p class="template-eyebrow">Template 14 / 17</p>
+                    <h1 class="template-title">timeline</h1>
+                </header><div class="template-body"><div class="template-timeline-layout template-timeline-layout--left"><div class="template-side-panel template-text-panel template-text-panel--color" data-template-slot="insight"><h2 class="template-side-panel-title template-text-panel-title">Reading the journey</h2><p class="template-side-panel-body template-text-panel-body">The timeline should show sequence and decision rhythm, while the side panel explains why the milestones matter.</p></div><div class="template-timeline template-timeline--vertical" data-template-slot="timeline" style="--timeline-count:4"><article class="template-timeline-item">
                         <span class="template-timeline-dot" aria-hidden="true"></span>
                         <div class="template-timeline-copy">
                             <p class="template-timeline-date">Mar 2019</p>
@@ -251,43 +263,43 @@
                     </article></div></div></div>
                 
             </div>
-            <div class="template-page-number">13</div>
+            <div class="template-page-number">14</div>
         </div>
     </section>
-    <section class="slide template-slide" slide-qa="true" data-slide-index="14" data-design="built-in-preview" data-template="process-steps">
+    <section class="slide template-slide" slide-qa="true" data-slide-index="15" data-design="built-in-preview" data-template="process-steps">
         <div class="slide-canvas">
             <div class="template-frame">
                 <header>
-                    <p class="template-eyebrow">Template 14 / 16</p>
+                    <p class="template-eyebrow">Template 15 / 17</p>
                     <h1 class="template-title">process-steps</h1>
                 </header><div class="template-body"><div class="template-steps" data-template-slot="steps"><article class="template-card"><div class="template-step-number">1</div><h2>Choose</h2><p>Select the page template that matches the communication job.</p><figure class="template-visual-placeholder"><div class="template-visual-placeholder-frame"><span class="template-visual-placeholder-label">image / chart slot (optional)</span></div></figure></article><article class="template-card"><div class="template-step-number">2</div><h2>Fill</h2><p>Provide only the content fields the template needs.</p><figure class="template-visual-placeholder"><div class="template-visual-placeholder-frame"><span class="template-visual-placeholder-label">image / chart slot (optional)</span></div></figure></article><article class="template-card"><div class="template-step-number">3</div><h2>Style</h2><p>Let the active design control type, color, and surfaces.</p><figure class="template-visual-placeholder"><div class="template-visual-placeholder-frame"><span class="template-visual-placeholder-label">image / chart slot (optional)</span></div></figure></article><article class="template-card"><div class="template-step-number">4</div><h2>QA</h2><p>Run contract and visual checks before export.</p><figure class="template-visual-placeholder"><div class="template-visual-placeholder-frame"><span class="template-visual-placeholder-label">image / chart slot (optional)</span></div></figure></article></div></div>
                 
             </div>
-            <div class="template-page-number">14</div>
+            <div class="template-page-number">15</div>
         </div>
     </section>
-    <section class="slide template-slide" slide-qa="true" data-slide-index="15" data-design="built-in-preview" data-template="recommendation-decision">
+    <section class="slide template-slide" slide-qa="true" data-slide-index="16" data-design="built-in-preview" data-template="recommendation-decision">
         <div class="slide-canvas">
             <div class="template-frame">
                 <header>
-                    <p class="template-eyebrow">Template 15 / 16</p>
+                    <p class="template-eyebrow">Template 16 / 17</p>
                     <h1 class="template-title">recommendation-decision</h1>
                 </header><div class="template-body template-grid cols-3"><div class="template-card" data-template-slot="recommendation"><h2>Recommendation</h2><p>Adopt page templates as the structural layer, with designs remaining user-customizable.</p><figure class="template-image-card"><div class="template-image-frame"><img src="./assets/card-lens.jpg" alt="Lucent design asset"></div><figcaption class="template-image-caption">Design asset example</figcaption></figure></div><div data-template-slot="rationale"><article class="template-card"><h3>Rationale</h3><p>This keeps generation reliable while leaving style expressive and replaceable.</p></article></div><div class="template-card" data-template-slot="next-steps"><h2>Next steps</h2><ol class="template-list"><li><strong>Pilot</strong> Use the built-in preview to tune every template.</li><li><strong>Validate</strong> Promote only contracts that pass QA and browser review.</li><li><strong>Ship</strong> Document the add-slide workflow for agents.</li></ol></div></div>
                 
             </div>
-            <div class="template-page-number">15</div>
+            <div class="template-page-number">16</div>
         </div>
     </section>
-    <section class="slide template-slide" slide-qa="true" data-slide-index="16" data-design="built-in-preview" data-template="risks-tradeoffs">
+    <section class="slide template-slide" slide-qa="true" data-slide-index="17" data-design="built-in-preview" data-template="risks-tradeoffs">
         <div class="slide-canvas">
             <div class="template-frame">
                 <header>
-                    <p class="template-eyebrow">Template 16 / 16</p>
+                    <p class="template-eyebrow">Template 17 / 17</p>
                     <h1 class="template-title">risks-tradeoffs</h1>
                 </header><div class="template-body template-grid cols-3" data-template-slot="risks"><article class="template-card"><h3>Constraint</h3><p>Templates can over-constrain if they become decorative presets instead of communication jobs.</p><figure class="template-image-card"><div class="template-image-frame"><img src="./assets/report-visual.jpg" alt="Report visual"></div><figcaption class="template-image-caption">Design asset example</figcaption></figure></article><article class="template-card"><h3>Mitigation</h3><p>Keep bounded HTML edit flow after scaffold insertion so agents can improve the page directly.</p></article><article class="template-card"><h3>Tradeoff</h3><p>More structure improves QA, but only if template contracts stay small and semantic.</p></article></div>
                 
             </div>
-            <div class="template-page-number">16</div>
+            <div class="template-page-number">17</div>
         </div>
     </section>
     <!-- revela-slides:end -->