code-ai-installer 4.0.0 → 4.0.1-a

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

@@ -0,0 +1,699 @@
+---
+name: html-pdf-report-reference
+description: Generating a PRD or Product Review Deck from HTML/CSS to PDF — self-contained, print-ready — reference (code & worked-example library)
+type: reference
+domain: product
+owners:
+  - layouter
+gates:
+  - LAYOUTER
+tech: []
+topic: []
+triggers:
+  - "html-pdf-report"
+  - "HTML PDF"
+  - "PRD PDF"
+  - "product review deck"
+related:
+  - html-pdf-report
+budget_lines: 699
+schema_version: 1
+---
+# html-pdf-report — Reference (code & worked-example library)
+
+> Verbatim code blocks and the worked example extracted from `$html-pdf-report` (workflow). Copy-paste library; the procedure lives in the workflow skill.
+
+## Step 2 — CSS (Base + Print)
+
+```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; }
+}
+```
+
+## Step 3 — Chart.js
+
+```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' } }
+        }
+    }
+});
+```
+
+## Step 4 — Mermaid
+
+```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>
+```
+
+## 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>
+```
+
+## 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.