code-ai-installer 4.0.0 → 4.0.1-b

package/domains/product/locales/en/.agents/skills/html-pdf-report/SKILL.md

@@ -1,6 +1,23 @@
 ---
 name: html-pdf-report
 description: Generating a PRD or Product Review Deck from HTML/CSS to PDF — self-contained, print-ready
+type: triggered
+domain: product
+owners:
+  - layouter
+gates:
+  - LAYOUTER
+tech: []
+topic: []
+triggers:
+  - "html-pdf-report"
+  - "HTML PDF"
+  - "PRD PDF"
+  - "product review deck"
+related:
+  - html-pdf-report-reference
+budget_lines: 297
+schema_version: 1
 ---
 # HTML/PDF Report — Generating a PRD or Product Review Deck as PDF
 
@@ -69,120 +86,7 @@ description: Generating a PRD or Product Review Deck from HTML/CSS to PDF — se
 
 Full working CSS block:
 
-```css
-/* ========== RESET & BASE ========== */
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-body {
-    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
-    font-size: 11pt;
-    line-height: 1.6;
-    color: #1a1a2e;
-    background: #fff;
-}
-.report { max-width: 210mm; margin: 0 auto; padding: 20mm; }
-
-/* ========== TYPOGRAPHY ========== */
-h1 { font-size: 24pt; font-weight: 700; margin-bottom: 0.5em; color: var(--primary); }
-h2 { font-size: 18pt; font-weight: 600; margin: 1.5em 0 0.5em; padding-bottom: 0.3em;
-     border-bottom: 2px solid var(--primary); color: var(--primary); }
-h3 { font-size: 14pt; font-weight: 600; margin: 1.2em 0 0.4em; color: var(--secondary); }
-h4 { font-size: 12pt; font-weight: 600; margin: 1em 0 0.3em; }
-p { margin-bottom: 0.8em; }
-blockquote { border-left: 4px solid var(--accent); padding: 0.8em 1.2em;
-             margin: 1em 0; background: var(--bg-light); font-style: italic; }
-
-/* ========== CSS VARIABLES (from palette) ========== */
-:root {
-    --primary: #1a1a2e;    /* Replace from Design Spec */
-    --secondary: #16213e;
-    --accent: #0f3460;
-    --highlight: #e94560;
-    --bg-light: #f5f5f5;
-    --border: #e0e0e0;
-    --success: #2ecc71;
-    --warning: #f39c12;
-    --danger: #e74c3c;
-}
-
-/* ========== TITLE PAGE ========== */
-.title-page {
-    display: flex; flex-direction: column; justify-content: center; align-items: center;
-    min-height: 100vh; text-align: center;
-}
-.title-page h1 { font-size: 32pt; margin-bottom: 0.3em; }
-.title-page .subtitle { font-size: 16pt; color: var(--secondary); margin-bottom: 2em; }
-.title-page .meta { font-size: 10pt; color: #666; }
-
-/* ========== TOC ========== */
-.toc-list { list-style: none; counter-reset: toc; }
-.toc-list li { padding: 0.4em 0; border-bottom: 1px dotted var(--border); }
-.toc-list li::before { counter-increment: toc; content: counter(toc) ". "; font-weight: 600; }
-.toc-list a { text-decoration: none; color: var(--primary); }
-.toc-list a:hover { color: var(--accent); }
-
-/* ========== DATA TABLE ========== */
-.data-table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 10pt; }
-.data-table th { background: var(--primary); color: #fff; padding: 8px 12px;
-                 text-align: left; font-weight: 600; }
-.data-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); }
-.data-table tr:nth-child(even) { background: var(--bg-light); }
-.data-table .highlight { background: rgba(233, 69, 96, 0.1); font-weight: 600; }
-
-/* ========== MATRIX 2x2 ========== */
-.matrix-2x2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
-              margin: 1em 0; border: 2px solid var(--border); }
-.matrix-2x2 .cell { padding: 1.2em; }
-.matrix-2x2 .cell-header { background: var(--primary); color: #fff; font-weight: 600;
-                            text-align: center; padding: 0.6em; }
-.matrix-2x2 .cell-tl { background: #e8f5e9; } /* Top-left: green */
-.matrix-2x2 .cell-tr { background: #fff3e0; } /* Top-right: orange */
-.matrix-2x2 .cell-bl { background: #e3f2fd; } /* Bottom-left: blue */
-.matrix-2x2 .cell-br { background: #fce4ec; } /* Bottom-right: red */
-
-/* ========== CALLOUT BOX ========== */
-.callout { padding: 1em 1.2em; margin: 1em 0; border-radius: 6px; border-left: 4px solid; }
-.callout-info { background: #e3f2fd; border-color: #2196f3; }
-.callout-success { background: #e8f5e9; border-color: var(--success); }
-.callout-warning { background: #fff3e0; border-color: var(--warning); }
-.callout-danger { background: #fce4ec; border-color: var(--danger); }
-.callout-title { font-weight: 700; margin-bottom: 0.3em; }
-
-/* ========== PULL QUOTE ========== */
-.pull-quote { font-size: 14pt; font-weight: 300; text-align: center;
-              padding: 1.5em 2em; margin: 1.5em 0; color: var(--accent);
-              border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); }
-
-/* ========== CHART CONTAINER ========== */
-.chart-container { position: relative; margin: 1.5em 0; max-width: 100%; }
-.chart-container canvas { max-width: 100%; }
-.chart-container figcaption { font-size: 9pt; color: #666; text-align: center;
-                              margin-top: 0.5em; font-style: italic; }
-
-/* ========== SCORE / BADGE ========== */
-.score-badge { display: inline-block; padding: 0.2em 0.8em; border-radius: 12px;
-               font-weight: 700; font-size: 10pt; }
-.score-high { background: var(--success); color: #fff; }
-.score-mid { background: var(--warning); color: #fff; }
-.score-low { background: var(--danger); color: #fff; }
-
-/* ========== PRINT ========== */
-@media print {
-    @page { size: A4 portrait; margin: 20mm; }
-    body { font-size: 10pt; }
-    .report { max-width: none; padding: 0; }
-    .title-page { min-height: auto; page-break-after: always; }
-    .toc { page-break-after: always; }
-    .executive-summary { page-break-after: always; }
-    .appendix { page-break-before: always; }
-    .data-table, .chart-container, .matrix-2x2, .mermaid, figure {
-        page-break-inside: avoid;
-    }
-    h2, h3 { page-break-after: avoid; }
-    .callout { page-break-inside: avoid; }
-    a { color: inherit; text-decoration: none; }
-    canvas { max-width: 100% !important; height: auto !important; }
-}
-```
+> 📦 <!--SPLIT-POINTER--> Полный блок — в `$html-pdf-report-reference` (§ Step 2 — CSS (Base + Print)).
 
 > **Palette:** replace CSS variables from Design Spec. All colors — via `var(--name)` so the palette changes in one place.
 
@@ -194,99 +98,7 @@ For each chart from the Visualization Map:
 
 **Configurations by type:**
 
-```javascript
-// ========== BAR CHART (competitor comparison, scoring) ==========
-new Chart(document.getElementById('chart-competitors'), {
-    type: 'bar',
-    data: {
-        labels: ['Competitor A', 'Competitor B', 'Competitor C', 'Our Product'],
-        datasets: [{
-            label: 'Threat Score',
-            data: [7.2, 7.3, 4.8, null],
-            backgroundColor: ['#e74c3c', '#e74c3c', '#f39c12', '#2ecc71'],
-            borderWidth: 0,
-            borderRadius: 4
-        }]
-    },
-    options: {
-        animation: false, responsive: true,
-        plugins: { legend: { display: false },
-                   title: { display: true, text: 'Competitor Threat Score', font: { size: 14 } } },
-        scales: { y: { beginAtZero: true, max: 10, title: { display: true, text: 'Score' } } }
-    }
-});
-
-// ========== RADAR CHART (multi-criteria comparison) ==========
-new Chart(document.getElementById('chart-radar'), {
-    type: 'radar',
-    data: {
-        labels: ['Features', 'Price', 'UX', 'Support', 'Ecosystem', 'Brand'],
-        datasets: [
-            { label: 'Our Product', data: [7, 8, 6, 5, 4, 3],
-              borderColor: '#0f3460', backgroundColor: 'rgba(15,52,96,0.1)', borderWidth: 2 },
-            { label: 'Market Leader', data: [9, 4, 8, 7, 9, 9],
-              borderColor: '#e94560', backgroundColor: 'rgba(233,69,96,0.1)', borderWidth: 2 }
-        ]
-    },
-    options: {
-        animation: false, responsive: true,
-        scales: { r: { beginAtZero: true, max: 10, ticks: { stepSize: 2 } } }
-    }
-});
-
-// ========== PIE / DOUGHNUT (shares, distribution) ==========
-new Chart(document.getElementById('chart-share'), {
-    type: 'doughnut',
-    data: {
-        labels: ['Segment A', 'Segment B', 'Segment C', 'Other'],
-        datasets: [{ data: [35, 28, 22, 15],
-                     backgroundColor: ['#1a1a2e', '#0f3460', '#e94560', '#ccc'],
-                     borderWidth: 2, borderColor: '#fff' }]
-    },
-    options: {
-        animation: false, responsive: true,
-        plugins: { legend: { position: 'right' } }
-    }
-});
-
-// ========== LINE CHART (trends, retention curves) ==========
-new Chart(document.getElementById('chart-retention'), {
-    type: 'line',
-    data: {
-        labels: ['M0', 'M1', 'M2', 'M3', 'M6', 'M12'],
-        datasets: [
-            { label: 'Jan Cohort', data: [100, 42, 31, 26, 20, 16],
-              borderColor: '#e94560', fill: false, tension: 0.3 },
-            { label: 'Mar Cohort', data: [100, 55, 44, 38, null, null],
-              borderColor: '#2ecc71', fill: false, tension: 0.3 }
-        ]
-    },
-    options: {
-        animation: false, responsive: true,
-        scales: { y: { beginAtZero: true, max: 100, title: { display: true, text: 'Retention %' } } }
-    }
-});
-
-// ========== SCATTER (2D positioning) ==========
-new Chart(document.getElementById('chart-positioning'), {
-    type: 'scatter',
-    data: {
-        datasets: [
-            { label: 'Competitor A', data: [{ x: 8, y: 7 }], pointRadius: 10,
-              backgroundColor: '#e74c3c' },
-            { label: 'Our Product', data: [{ x: 5, y: 6 }], pointRadius: 12,
-              backgroundColor: '#2ecc71', pointStyle: 'star' }
-        ]
-    },
-    options: {
-        animation: false, responsive: true,
-        scales: {
-            x: { min: 0, max: 10, title: { display: true, text: 'Features' } },
-            y: { min: 0, max: 10, title: { display: true, text: 'Price' } }
-        }
-    }
-});
-```
+> 📦 <!--SPLIT-POINTER--> Полный блок — в `$html-pdf-report-reference` (§ Step 3 — Chart.js).
 
 ### Step 4 — Mermaid
 
@@ -296,51 +108,7 @@ mermaid.initialize({ startOnLoad: true, theme: 'neutral', securityLevel: 'loose'
 
 **Diagrams by type:**
 
-```html
-<!-- ========== FLOWCHART (processes, pipelines) ========== -->
-<div class="mermaid">
-flowchart TD
-    A[Awareness] --> B[Consideration]
-    B --> C[Decision]
-    C --> D[Purchase]
-    D --> E[Retention]
-    E --> F[Advocacy]
-    E -.->|churn| G[Exit]
-    style G fill:#fce4ec,stroke:#e74c3c
-</div>
-
-<!-- ========== MINDMAP (structure, hierarchy) ========== -->
-<div class="mermaid">
-mindmap
-  root((Growth Strategy))
-    Penetration
-      Upsell
-      Cross-sell
-    Market Development
-      CIS
-      Enterprise
-    Product Development
-      AI module
-      Mobile app
-    Diversification
-      White-label
-</div>
-
-<!-- ========== QUADRANT CHART (2x2 matrices) ========== -->
-<div class="mermaid">
-quadrantChart
-    title Impact vs Effort
-    x-axis Low Effort --> High Effort
-    y-axis Low Impact --> High Impact
-    quadrant-1 Big Bets
-    quadrant-2 Quick Wins
-    quadrant-3 Fill-ins
-    quadrant-4 Avoid
-    Action A: [0.3, 0.8]
-    Action B: [0.7, 0.9]
-    Action C: [0.2, 0.3]
-</div>
-```
+> 📦 <!--SPLIT-POINTER--> Полный блок — в `$html-pdf-report-reference` (§ Step 4 — Mermaid).
 
 > Each Mermaid diagram is wrapped in `<figure>` with `<figcaption>` and `page-break-inside: avoid`.
 
@@ -452,43 +220,7 @@ quadrantChart
 
 ## Example — Executive Summary Section
 
-```html
-<section class="executive-summary" id="executive-summary">
-    <h2>Executive Summary</h2>
-
-    <div class="pull-quote">
-        «AI-powered 1:1 summarization solves 45-60 min/week admin overhead for 5,000+
-        managers in TeamFlow base. Projected +$2.4M ARR expansion over 12 months, NRR +4pp.»
-    </div>
-
-    <h3>Key Findings</h3>
-    <div class="callout callout-success">
-        <div class="callout-title">✅ Main Insight</div>
-        <p>Mid-market and enterprise customers are ready to pay $8-12/seat premium for AI summarization.
-        6 of 8 buyer interviews confirm value, 4/4 enterprise accounts ready for beta.</p>
-    </div>
-
-    <table class="data-table">
-        <caption>Summary of Key Metrics</caption>
-        <thead>
-            <tr><th scope="col">Metric</th><th scope="col">Value</th><th scope="col">Benchmark</th><th scope="col">Rating</th></tr>
-        </thead>
-        <tbody>
-            <tr><td>TAM</td><td>$4.2B</td><td>—</td>
-                <td><span class="score-badge score-high">Large</span></td></tr>
-            <tr><td>SOM (Year 1)</td><td>$180M</td><td>—</td>
-                <td><span class="score-badge score-mid">Medium</span></td></tr>
-            <tr><td>Top Threat</td><td>Competitor X</td><td>Score 7.6</td>
-                <td><span class="score-badge score-low">High</span></td></tr>
-        </tbody>
-    </table>
-
-    <figure class="chart-container" role="img" aria-label="Threat Score: A=7.2, B=6.8, C=7.6, D=4.1, E=5.3">
-        <canvas id="chart-exec-threats"></canvas>
-        <figcaption>Fig. 1 — Threat Score of key competitors</figcaption>
-    </figure>
-</section>
-```
+> 📦 <!--SPLIT-POINTER--> Полный блок — в `$html-pdf-report-reference` (§ Example — Executive Summary Section).
 
 ## Validation (Quality Gate)
 
@@ -563,377 +295,3 @@ Transfer format: `report.html` (single file) + PDF printing instructions.
 ### PDF Instructions
 Chrome/Edge → Ctrl+P → Save as PDF → Portrait → A4 → Default margins → **Background graphics: ON** → Save
 ```
-
-## Worked Example — TeamFlow Product Review Deck (HTML skeleton)
-
-**Context:** Full Pipeline A `/ship-right-thing` completed. Designer prepared design spec (see `$report-design`). Layouter converts to production HTML/PDF — Product Review Deck for exec sign-off.
-
-### Target Structure
-
-- 12 slide-like pages (each `page-break` separated)
-- Cover → TL;DR → Problem → Strategy → PRD highlights → Metrics → Risks → Rollout → Appendices
-- Executive style: dense but readable, no decoration, data-forward
-- PDF size target < 5MB for email distribution
-
-### Self-contained HTML Skeleton
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>TeamFlow AI Summarization — Product Review Deck · Q2 2026</title>
-  <meta name="description" content="Product Review Deck for executive sign-off: AI-powered 1:1 summarization initiative">
-  <style>
-    /* ============ CSS Tokens ============ */
-    :root {
-      --color-primary: #0A2540;      /* TeamFlow deep blue */
-      --color-accent: #F2A900;        /* TeamFlow amber */
-      --color-text: #1A1A1A;
-      --color-text-muted: #6B6B6B;
-      --color-bg: #FFFFFF;
-      --color-bg-alt: #F7F9FB;
-      --color-success: #22A06B;
-      --color-warning: #E67E22;
-      --color-danger: #C0392B;
-      --color-border: #E1E4E8;
-      --font-body: 'Inter', -apple-system, sans-serif;
-      --font-serif: 'Source Serif Pro', Georgia, serif;
-      --space-1: 4px; --space-2: 8px; --space-3: 16px;
-      --space-4: 24px; --space-5: 32px; --space-6: 48px;
-    }
-    
-    /* ============ Reset + Base ============ */
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-    body {
-      font-family: var(--font-body);
-      color: var(--color-text);
-      font-size: 14px;
-      line-height: 1.5;
-      background: var(--color-bg);
-    }
-    
-    /* ============ Page Structure (print-ready) ============ */
-    @page {
-      size: A4 portrait;
-      margin: 2cm 1.8cm;
-    }
-    .page {
-      page-break-after: always;
-      min-height: 24cm;
-      padding: 2cm 1.5cm;
-      position: relative;
-    }
-    .page:last-child { page-break-after: auto; }
-    .page-footer {
-      position: absolute;
-      bottom: 0.8cm;
-      left: 1.5cm;
-      right: 1.5cm;
-      font-size: 10px;
-      color: var(--color-text-muted);
-      border-top: 1px solid var(--color-border);
-      padding-top: 8px;
-      display: flex;
-      justify-content: space-between;
-    }
-    @media screen { .page { border-bottom: 2px dashed var(--color-border); margin-bottom: 2cm; } }
-    
-    /* ============ Typography ============ */
-    h1 { font-size: 32px; font-weight: 700; color: var(--color-primary); letter-spacing: -0.5px; margin-bottom: var(--space-4); }
-    h2 { font-size: 22px; font-weight: 600; color: var(--color-primary); margin: var(--space-5) 0 var(--space-3); }
-    h3 { font-size: 16px; font-weight: 600; color: var(--color-text); margin: var(--space-3) 0 var(--space-2); }
-    p { margin-bottom: var(--space-2); }
-    .lead { font-size: 16px; line-height: 1.6; color: var(--color-text); }
-    .pull-quote {
-      font-family: var(--font-serif);
-      font-size: 20px; line-height: 1.4;
-      color: var(--color-primary);
-      border-left: 3px solid var(--color-accent);
-      padding: var(--space-3) var(--space-4);
-      margin: var(--space-4) 0;
-      background: var(--color-bg-alt);
-    }
-    
-    /* ============ Components ============ */
-    .meta-bar {
-      display: flex;
-      justify-content: space-between;
-      border-top: 3px solid var(--color-accent);
-      border-bottom: 1px solid var(--color-border);
-      padding: var(--space-3) 0;
-      font-size: 12px;
-      color: var(--color-text-muted);
-      margin-bottom: var(--space-5);
-    }
-    .callout {
-      border-left: 4px solid var(--color-accent);
-      padding: var(--space-3);
-      background: var(--color-bg-alt);
-      margin: var(--space-3) 0;
-    }
-    .callout-title {
-      font-weight: 600;
-      color: var(--color-primary);
-      margin-bottom: var(--space-1);
-    }
-    .callout-success { border-left-color: var(--color-success); }
-    .callout-warning { border-left-color: var(--color-warning); }
-    .callout-danger { border-left-color: var(--color-danger); }
-    
-    table {
-      width: 100%;
-      border-collapse: collapse;
-      margin: var(--space-3) 0;
-      font-size: 12px;
-    }
-    th, td {
-      padding: var(--space-2) var(--space-3);
-      text-align: left;
-      border-bottom: 1px solid var(--color-border);
-    }
-    th {
-      font-weight: 600;
-      background: var(--color-bg-alt);
-      color: var(--color-primary);
-    }
-    tr:hover { background: var(--color-bg-alt); }
-    .metric-positive { color: var(--color-success); font-weight: 600; }
-    .metric-negative { color: var(--color-danger); font-weight: 600; }
-    .metric-neutral { color: var(--color-text-muted); }
-    
-    .status-badge {
-      display: inline-block;
-      padding: 2px 8px;
-      font-size: 10px;
-      font-weight: 600;
-      border-radius: 3px;
-      text-transform: uppercase;
-    }
-    .status-green { background: var(--color-success); color: white; }
-    .status-amber { background: var(--color-warning); color: white; }
-    .status-red { background: var(--color-danger); color: white; }
-    
-    /* Grid layouts */
-    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
-    .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-3); }
-    .kpi-card {
-      padding: var(--space-4);
-      background: var(--color-bg-alt);
-      border: 1px solid var(--color-border);
-      border-left: 3px solid var(--color-accent);
-    }
-    .kpi-value {
-      font-size: 32px; font-weight: 700;
-      color: var(--color-primary);
-      margin-bottom: var(--space-1);
-    }
-    .kpi-label {
-      font-size: 11px;
-      color: var(--color-text-muted);
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-    }
-    
-    /* Roadmap columns */
-    .roadmap {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr;
-      gap: var(--space-3);
-      margin: var(--space-4) 0;
-    }
-    .roadmap-column {
-      padding: var(--space-3);
-      background: var(--color-bg-alt);
-      border-top: 3px solid var(--color-accent);
-    }
-    .roadmap-column h4 {
-      font-size: 13px;
-      font-weight: 700;
-      text-transform: uppercase;
-      color: var(--color-primary);
-      margin-bottom: var(--space-2);
-    }
-    .roadmap-column ul { list-style: none; padding-left: 0; }
-    .roadmap-column li { padding: 6px 0; border-bottom: 1px solid var(--color-border); font-size: 12px; }
-    
-    /* ============ Print Optimizations ============ */
-    @media print {
-      body { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
-      .page { page-break-after: always; }
-      table { page-break-inside: avoid; }
-      .callout { page-break-inside: avoid; }
-      h2, h3 { page-break-after: avoid; }
-    }
-  </style>
-</head>
-<body>
-
-  <!-- PAGE 1: COVER -->
-  <section class="page" id="cover">
-    <div style="margin-top: 8cm; text-align: center;">
-      <p style="font-size: 13px; color: var(--color-text-muted); letter-spacing: 2px;">PRODUCT REVIEW DECK · CONFIDENTIAL</p>
-      <h1 style="font-size: 42px; margin-top: var(--space-4);">AI 1:1 Summarization</h1>
-      <p class="lead" style="margin-top: var(--space-3); color: var(--color-text-muted);">
-        TeamFlow Q2 2026 Launch Proposal · Executive Sign-Off
-      </p>
-      <div style="margin-top: 4cm;">
-        <p style="font-size: 12px; color: var(--color-text-muted);">Prepared by Product Team · April 17, 2026</p>
-        <p style="font-size: 12px; color: var(--color-text-muted);">Alex K., Product · Priya S., Engineering · Jordan M., Design · Sam P., Data</p>
-      </div>
-    </div>
-  </section>
-
-  <!-- PAGE 2: TL;DR / EXECUTIVE SUMMARY -->
-  <section class="page" id="summary">
-    <div class="meta-bar">
-      <span>TeamFlow AI Summarization</span>
-      <span>Page 2 · Executive Summary</span>
-    </div>
-    <h1>Executive Summary</h1>
-    <div class="pull-quote">
-      «AI-powered 1:1 summarization solves 45-60 min/week admin overhead for 3,000+ managers in TeamFlow base. Projected +$2.4M ARR expansion over 12 months, NRR +4pp.»
-    </div>
-    <div class="grid-3" style="margin: var(--space-5) 0;">
-      <div class="kpi-card">
-        <div class="kpi-value">40</div>
-        <div class="kpi-label">Target Team Tier Upgrades (Q2)</div>
-      </div>
-      <div class="kpi-card">
-        <div class="kpi-value">+$8</div>
-        <div class="kpi-label">Per-Seat Premium (Team Tier)</div>
-      </div>
-      <div class="kpi-card">
-        <div class="kpi-value">3 hrs</div>
-        <div class="kpi-label">Weekly Manager Time Saved</div>
-      </div>
-    </div>
-    <h2>What we're proposing</h2>
-    <p class="lead">Launch AI Summarization as flagship feature of new Team Tier ($23/seat/month). Core capability: generate structured summary + action items within 60 seconds of 1:1 meeting end. Privacy-first architecture — opt-in per meeting, zero data retention with LLM providers, SOC 2 Type II attestation.</p>
-    <h2>Why now</h2>
-    <p class="lead">Mid-market and enterprise customers face growing manager efficiency crisis — 3-4 hrs/week admin burden is #2 churn risk factor per exit interviews. Competitors (Lattice, 15Five) haven't shipped AI summarization — 6-12 month first-mover window exists. Our 3-year behavioral data corpus enables superior quality vs standalone tools.</p>
-    <div class="callout callout-success">
-      <div class="callout-title">Expected Outcome</div>
-      <p>Mid-market base ($5M ARR) → +30% NRR lift over 12 months via Team Tier upgrades. Enterprise tier foundation enables $2-3M ARR expansion opportunity through Q3.</p>
-    </div>
-    <div class="page-footer">
-      <span>TeamFlow AI Summarization · Product Review · April 17, 2026</span>
-      <span>2 / 12</span>
-    </div>
-  </section>
-
-  <!-- PAGE 3: PROBLEM -->
-  <section class="page" id="problem">
-    <div class="meta-bar">
-      <span>TeamFlow AI Summarization</span>
-      <span>Page 3 · The Problem</span>
-    </div>
-    <h1>The Problem</h1>
-    <p class="lead">People managers managing 5-15 direct reports at mid-market B2B SaaS companies experience severe admin overhead in 1:1 workflow. This manifests across three dimensions:</p>
-    
-    <div class="grid-3" style="margin: var(--space-4) 0;">
-      <div class="kpi-card">
-        <div class="kpi-value" style="color: var(--color-danger);">3-4 hrs</div>
-        <div class="kpi-label">Manager admin time / week on 1:1s (8 reports avg)</div>
-      </div>
-      <div class="kpi-card">
-        <div class="kpi-value" style="color: var(--color-danger);">40%</div>
-        <div class="kpi-label">Action items dropped / never completed</div>
-      </div>
-      <div class="kpi-card">
-        <div class="kpi-value" style="color: var(--color-danger);">0%</div>
-        <div class="kpi-label">VP HR visibility into manager 1:1 quality</div>
-      </div>
-    </div>
-    
-    <h2>Evidence from Discovery</h2>
-    <p>8 customer interviews (4 buyers VP HR, 4 end-user managers) + 120 support tickets Q1 2026 + internal product analytics. Direct quotes:</p>
-    
-    <div class="callout">
-      <p><em>«25 minutes of prep every week for each of 8 reports. That's ~3 hours per week.»</em></p>
-      <p style="text-align: right; font-size: 11px; margin-top: 8px; color: var(--color-text-muted);">— Interview E3 (Engineering Manager, mid-market)</p>
-    </div>
-    <div class="callout">
-      <p><em>«Some managers run amazing 1:1s, others literally cancel them. I have no visibility, no levers.»</em></p>
-      <p style="text-align: right; font-size: 11px; margin-top: 8px; color: var(--color-text-muted);">— Interview B2 (VP HR, 450-employee B2B SaaS)</p>
-    </div>
-    
-    <div class="page-footer">
-      <span>TeamFlow AI Summarization · Product Review · April 17, 2026</span>
-      <span>3 / 12</span>
-    </div>
-  </section>
-
-  <!-- PAGES 4-12: abbreviated ... full deck continues with Strategy / PRD / Metrics / Risks / Rollout / Appendix -->
-
-  <!-- PAGE 12: APPENDIX — Roadmap -->
-  <section class="page" id="roadmap">
-    <div class="meta-bar">
-      <span>TeamFlow AI Summarization</span>
-      <span>Page 12 · Roadmap</span>
-    </div>
-    <h1>Product Roadmap — Now / Next / Later</h1>
-    <div class="roadmap">
-      <div class="roadmap-column">
-        <h4>Now (Q2 2026)</h4>
-        <ul>
-          <li>✨ AI Summarization Core (Team Tier)</li>
-          <li>✨ Auto Action Items Extraction</li>
-          <li>✨ Action Items Reminders</li>
-          <li>🔐 SOC 2 Type II (AI features)</li>
-          <li>🔐 SSO SAML + SCIM</li>
-        </ul>
-      </div>
-      <div class="roadmap-column">
-        <h4>Next (Q3 2026)</h4>
-        <ul>
-          <li>📊 Aggregate Dashboard (Enterprise)</li>
-          <li>⏱️ Real-time Transcription</li>
-          <li>🎯 Manager Health Score</li>
-          <li>🔗 Zoom / Meet Import</li>
-        </ul>
-      </div>
-      <div class="roadmap-column">
-        <h4>Later (Q4+)</h4>
-        <ul>
-          <li>🌍 Multi-language Support</li>
-          <li>📱 Native Mobile App</li>
-          <li>🔍 AI Coaching Insights</li>
-          <li>📈 Predictive Attrition Model</li>
-        </ul>
-      </div>
-    </div>
-    <div class="page-footer">
-      <span>TeamFlow AI Summarization · Product Review · April 17, 2026</span>
-      <span>12 / 12</span>
-    </div>
-  </section>
-
-</body>
-</html>
-```
-
-### Quality Checks Passed
-- [x] Self-contained (single HTML file, all CSS inlined)
-- [x] No broken references
-- [x] Print-ready (@page, @media print directives)
-- [x] Page breaks between sections
-- [x] Executive dense without overwhelm
-- [x] Color consistent with TeamFlow brand (deep blue + amber)
-- [x] Accessible (semantic HTML, alt text on images if any)
-- [x] File size estimate < 2MB (no embedded images yet; with logos/charts might grow to 3-4MB)
-
-### PDF Generation
-
-```bash
-# Via puppeteer (preferred, automation-friendly)
-puppeteer-pdf product-review-deck.html --format=A4 --margin-top=2cm --print-background
-
-# Via WeasyPrint
-weasyprint product-review-deck.html product-review-deck.pdf
-
-# Manual via Chrome
-open product-review-deck.html; Ctrl+P; Save as PDF; Background graphics ON
-```
-
-> **html-pdf-report lesson:** Self-contained = single HTML + inline CSS. Component tokens (CSS variables) enable consistency + easy re-skin. @page + @media print rules critical for PDF output. KPI cards with single large number + small label — reading pattern optimized for exec scanning. Callouts (colored left border) > inline quotes for visual hierarchy. Page footers with page numbers + title help reader navigate printed PDF.