npm - @cola1900/dsh-ppt - Versions diffs - 0.1.2 - Mend

@cola1900/dsh-ppt 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (730) hide show

package/licenses/zara/templates/editorial-forest/template.html ADDED Viewed

@@ -0,0 +1,843 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<title>Editorial Deck Template</title>
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,300;8..60,400;8..60,500;8..60,600;8..60,700;8..60,800&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
+<script src="deck-stage.js"></script>
+<style>
+  :root {
+    --green: #2e4a2a;
+    --green-deep: #243a21;
+    --green-lite: #3a5a36;
+    --pink: #e89cb1;
+    --pink-deep: #d27e96;
+    --cream: #efe7d4;
+    --cream-2: #e6dcc4;
+    --ink: #1a1a17;
+    --serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
+    --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
+  }
+  html, body { margin: 0; padding: 0; background: #111; }
+  deck-stage { font-family: var(--serif); color: var(--ink); }
+  section {
+    box-sizing: border-box;
+    width: 1920px;
+    height: 1080px;
+    padding: 96px 120px;
+    background: var(--cream);
+    color: var(--ink);
+    position: relative;
+    overflow: hidden;
+  }
+  .label {
+    font-family: var(--mono);
+    font-size: 26px;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    font-weight: 500;
+  }
+  /* ============ 01 — Cover ============ */
+  .cover {
+    background: var(--green);
+    color: var(--pink);
+    padding: 100px 140px;
+  }
+  .cover .topbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: var(--pink);
+  }
+  .cover .topbar .label { color: var(--pink); }
+  .cover .mark {
+    width: 130px;
+    height: 130px;
+    border-radius: 50%;
+    border: 2px solid var(--pink);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--mono);
+    font-size: 28px;
+    letter-spacing: 0.1em;
+    font-weight: 500;
+  }
+  .cover h1 {
+    font-family: var(--serif);
+    font-weight: 500;
+    font-size: 220px;
+    line-height: 0.92;
+    letter-spacing: -0.02em;
+    margin: 40px 0 0 0;
+  }
+  .cover .footline {
+    position: absolute;
+    bottom: 80px;
+    left: 140px;
+    right: 140px;
+    display: flex;
+    justify-content: space-between;
+    font-family: var(--mono);
+    font-size: 28px;
+    color: var(--pink);
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    font-weight: 500;
+  }
+  /* ============ 02 — Agenda (tiles) ============ */
+  .agenda {
+    background: var(--cream);
+    padding: 90px 120px;
+    display: grid;
+    grid-template-rows: auto 1fr;
+    gap: 36px;
+  }
+  .agenda .head {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    gap: 40px;
+  }
+  .agenda h2 {
+    font-family: var(--serif);
+    font-weight: 500;
+    font-size: 96px;
+    line-height: 0.96;
+    letter-spacing: -0.02em;
+    color: var(--green);
+    margin: 0;
+    white-space: nowrap;
+  }
+  .agenda .head .label { color: var(--green); white-space: nowrap; }
+  .agenda-grid {
+    display: grid;
+    grid-template-columns: 1.5fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    gap: 24px;
+  }
+  .topic {
+    border-radius: 6px;
+    position: relative;
+    padding: 40px 40px 36px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    min-height: 0;
+  }
+  .topic.t-green { background: var(--green); color: var(--pink); grid-row: span 2; }
+  .topic.t-pink { background: var(--pink); color: var(--green-deep); }
+  .topic.t-greenLite { background: var(--green-lite); color: var(--pink); }
+  .topic.t-cream { background: var(--cream-2); color: var(--green); border: 2px solid var(--green); }
+  .topic .num {
+    font-family: var(--mono);
+    font-size: 26px;
+    letter-spacing: 0.14em;
+    font-weight: 500;
+  }
+  .topic h3 {
+    font-family: var(--serif);
+    font-weight: 500;
+    font-size: 56px;
+    line-height: 0.98;
+    letter-spacing: -0.01em;
+    margin: 28px 0 0 0;
+  }
+  .topic.t-green h3 { font-size: 84px; }
+  .topic p {
+    font-family: var(--serif);
+    font-size: 26px;
+    line-height: 1.32;
+    margin: 16px 0 0 0;
+    max-width: 100%;
+    font-weight: 400;
+  }
+  .topic .foot {
+    font-family: var(--mono);
+    font-size: 24px;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    font-weight: 500;
+    margin-top: 20px;
+  }
+  /* ============ 03 — Statement (big idea) ============ */
+  .statement {
+    background: var(--pink);
+    color: var(--green-deep);
+    padding: 130px 160px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  .statement .label { color: var(--green-deep); }
+  .statement blockquote {
+    margin: 48px 0 0 0;
+    font-family: var(--serif);
+    font-weight: 500;
+    font-size: 140px;
+    line-height: 1.02;
+    letter-spacing: -0.02em;
+    max-width: 1560px;
+  }
+  .statement .attrib {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    margin-top: 60px;
+    font-family: var(--mono);
+    font-size: 26px;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    font-weight: 500;
+    gap: 60px;
+  }
+  .statement .attrib > div { display: flex; flex-direction: column; gap: 14px; white-space: nowrap; }
+  .statement .attrib .name {
+    font-family: var(--serif);
+    font-size: 44px;
+    text-transform: none;
+    letter-spacing: 0;
+    font-weight: 600;
+    line-height: 1;
+  }
+  /* ============ 04 — Two-column with image ============ */
+  .two-col {
+    background: var(--cream);
+    display: grid;
+    grid-template-columns: 880px 1fr;
+    gap: 100px;
+    align-items: stretch;
+    padding: 110px 120px;
+  }
+  .two-col .col-img {
+    background: var(--green);
+    color: var(--pink);
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    overflow: hidden;
+  }
+  .two-col .col-img .figure {
+    font-family: var(--serif);
+    font-size: 56px;
+    color: var(--pink);
+    font-weight: 500;
+    text-align: center;
+    padding: 0 40px;
+    line-height: 1.05;
+  }
+  .two-col .col-img .caption {
+    position: absolute;
+    bottom: 36px;
+    left: 36px;
+    right: 36px;
+    display: flex;
+    justify-content: space-between;
+    font-family: var(--mono);
+    font-size: 26px;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    font-weight: 500;
+    color: var(--pink);
+  }
+  .two-col .col-text { display: flex; flex-direction: column; padding-top: 8px; }
+  .two-col .eyebrow {
+    font-family: var(--mono);
+    font-size: 26px;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: var(--green);
+    font-weight: 500;
+    margin-bottom: 32px;
+  }
+  .two-col h2 {
+    font-family: var(--serif);
+    font-weight: 500;
+    font-size: 96px;
+    line-height: 0.96;
+    letter-spacing: -0.02em;
+    color: var(--green);
+    margin: 0 0 40px 0;
+  }
+  .two-col p {
+    font-family: var(--serif);
+    font-size: 30px;
+    line-height: 1.38;
+    color: var(--ink);
+    margin: 0 0 24px 0;
+    max-width: 760px;
+    font-weight: 400;
+    text-wrap: pretty;
+  }
+  .two-col .meta {
+    margin-top: auto;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 36px;
+    border-top: 2px solid var(--green);
+    padding-top: 32px;
+  }
+  .two-col .meta dt {
+    font-family: var(--mono);
+    font-size: 24px;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--green);
+    font-weight: 500;
+    margin-bottom: 8px;
+  }
+  .two-col .meta dd {
+    font-family: var(--serif);
+    font-size: 32px;
+    color: var(--ink);
+    margin: 0;
+    font-weight: 500;
+  }
+  /* ============ 05 — Data / chart ============ */
+  .data { background: var(--green); color: var(--cream); padding: 100px 120px; }
+  .data .head {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 60px;
+  }
+  .data .head .label { color: var(--pink); }
+  .data h2 {
+    font-family: var(--serif);
+    font-weight: 500;
+    font-size: 84px;
+    line-height: 1.0;
+    letter-spacing: -0.02em;
+    color: var(--cream);
+    margin: 16px 0 0 0;
+    max-width: 1200px;
+  }
+  .data .legend {
+    display: flex;
+    gap: 36px;
+    margin-top: 18px;
+    font-family: var(--mono);
+    font-size: 26px;
+    letter-spacing: 0.1em;
+    color: var(--cream);
+    text-transform: uppercase;
+    font-weight: 500;
+    white-space: nowrap;
+  }
+  .data .legend .sw {
+    display: inline-block;
+    width: 26px;
+    height: 26px;
+    margin-right: 12px;
+    vertical-align: -4px;
+    border-radius: 2px;
+  }
+  .chart {
+    margin-top: 110px;
+    height: 520px;
+    display: grid;
+    grid-template-columns: 80px 1fr;
+    grid-template-rows: 1fr 60px;
+    column-gap: 24px;
+  }
+  .chart .yaxis {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    font-family: var(--mono);
+    font-size: 26px;
+    color: var(--cream);
+    text-align: right;
+    padding-right: 8px;
+    font-weight: 500;
+  }
+  .chart .plot {
+    position: relative;
+    border-left: 2px solid var(--cream);
+    border-bottom: 2px solid var(--cream);
+    padding: 0 30px;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 30px;
+  }
+  .chart .grid-lines {
+    position: absolute;
+    inset: 0;
+    background-image: repeating-linear-gradient(to top, transparent 0 calc(25% - 1px), rgba(239,231,212,0.18) calc(25% - 1px) 25%);
+    pointer-events: none;
+  }
+  .bar-group { display: flex; flex-direction: column; align-items: center; flex: 1; height: 100%; justify-content: flex-end; gap: 8px; }
+  .bar-pair { display: flex; align-items: flex-end; gap: 12px; height: 100%; width: 100%; justify-content: center; }
+  .bar { width: 56px; border-radius: 3px 3px 0 0; position: relative; }
+  .bar.a { background: var(--pink); }
+  .bar.b { background: var(--cream); }
+  .bar .val {
+    position: absolute;
+    top: -38px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-family: var(--mono);
+    font-size: 24px;
+    color: var(--cream);
+    font-weight: 500;
+  }
+  .chart .xlabel-row {
+    grid-column: 2;
+    display: flex;
+    justify-content: space-between;
+    padding: 18px 30px 0;
+    font-family: var(--mono);
+    font-size: 26px;
+    color: var(--cream);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    font-weight: 500;
+  }
+  .chart .xlabel { flex: 1; text-align: center; }
+  .data .footnote {
+    position: absolute;
+    bottom: 60px;
+    left: 120px;
+    right: 120px;
+    display: flex;
+    justify-content: space-between;
+    font-family: var(--mono);
+    font-size: 26px;
+    color: var(--pink);
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    font-weight: 500;
+  }
+  /* ============ 06 — Framework / 4 steps ============ */
+  .framework { background: var(--cream); padding: 100px 120px; }
+  .framework .head {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    gap: 40px;
+  }
+  .framework .head .label { color: var(--green); white-space: nowrap; }
+  .framework h2 {
+    font-family: var(--serif);
+    font-weight: 500;
+    font-size: 96px;
+    line-height: 0.96;
+    letter-spacing: -0.02em;
+    color: var(--green);
+    margin: 24px 0 0 0;
+    max-width: 1500px;
+  }
+  .flow {
+    margin-top: 70px;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 28px;
+    align-items: stretch;
+  }
+  .step {
+    border-radius: 8px;
+    padding: 40px 32px 32px;
+    display: flex;
+    flex-direction: column;
+    min-height: 470px;
+    border: 2.5px solid var(--green);
+    background: var(--cream);
+    color: var(--green);
+  }
+  .step.fill { background: var(--green); color: var(--pink); border-color: var(--green); }
+  .step.pinkfill { background: var(--pink); color: var(--green-deep); border-color: var(--pink-deep); }
+  .step .num {
+    font-family: var(--mono);
+    font-size: 26px;
+    letter-spacing: 0.16em;
+    font-weight: 500;
+  }
+  .step h3 {
+    font-family: var(--serif);
+    font-size: 68px;
+    line-height: 0.96;
+    letter-spacing: -0.01em;
+    font-weight: 500;
+    margin: 24px 0 24px 0;
+  }
+  .step p {
+    font-family: var(--serif);
+    font-size: 26px;
+    line-height: 1.34;
+    margin: 0;
+    font-weight: 400;
+  }
+  .step .marker {
+    margin-top: auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    padding-top: 24px;
+    border-top: 2px solid currentColor;
+    font-family: var(--mono);
+    font-size: 24px;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    font-weight: 500;
+  }
+  /* ============ 07 — Big stats / KPI callouts ============ */
+  .stats { background: var(--green); color: var(--cream); padding: 100px 120px; }
+  .stats .head {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    gap: 40px;
+  }
+  .stats .head .label { color: var(--pink); white-space: nowrap; }
+  .stats h2 {
+    font-family: var(--serif);
+    font-weight: 500;
+    font-size: 80px;
+    line-height: 0.98;
+    letter-spacing: -0.02em;
+    color: var(--cream);
+    margin: 18px 0 0 0;
+    max-width: 1400px;
+  }
+  .kpi-row {
+    margin-top: 80px;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 60px;
+    border-top: 2px solid var(--pink);
+    padding-top: 56px;
+  }
+  .kpi { display: flex; flex-direction: column; gap: 16px; }
+  .kpi .tag {
+    font-family: var(--mono);
+    font-size: 24px;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--pink);
+    font-weight: 500;
+  }
+  .kpi .big {
+    font-family: var(--serif);
+    font-size: 220px;
+    line-height: 0.92;
+    letter-spacing: -0.03em;
+    color: var(--pink);
+    font-weight: 500;
+  }
+  .kpi .big .unit {
+    font-size: 110px;
+    color: var(--cream);
+    margin-left: 4px;
+  }
+  .kpi .desc {
+    font-family: var(--serif);
+    font-size: 30px;
+    line-height: 1.32;
+    color: var(--cream);
+    margin: 8px 0 0 0;
+    font-weight: 400;
+  }
+  /* ============ 08 — Summary / closing ============ */
+  .summary { background: var(--green); color: var(--cream); padding: 110px 140px; }
+  .summary .topbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .summary .topbar .label { color: var(--pink); }
+  .summary h2 {
+    font-family: var(--serif);
+    font-weight: 500;
+    font-size: 220px;
+    line-height: 0.94;
+    letter-spacing: -0.02em;
+    color: var(--pink);
+    margin: 50px 0 0 0;
+  }
+  .summary .grid-cols {
+    margin-top: 70px;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 60px;
+    border-top: 2px solid var(--pink);
+    padding-top: 36px;
+  }
+  .summary .grid-cols h4 {
+    font-family: var(--mono);
+    font-size: 26px;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--pink);
+    margin: 0 0 18px 0;
+    font-weight: 500;
+  }
+  .summary .grid-cols p {
+    font-family: var(--serif);
+    font-size: 32px;
+    line-height: 1.32;
+    margin: 0;
+    color: var(--cream);
+    font-weight: 400;
+  }
+</style>
+</head>
+<body>
+<deck-stage aspect="1920/1080" no-rail>
+  <!-- ============ 01 — Cover ============ -->
+  <section class="cover" data-screen-label="01 Cover">
+    <div class="topbar">
+      <span class="label">A Presentation Template</span>
+      <div class="mark">01</div>
+    </div>
+    <h1>Quarterly<br/>Review<br/>2026</h1>
+    <div class="footline">
+      <span>Studio Placeholder</span>
+      <span>Presented by Name Placeholder</span>
+    </div>
+  </section>
+  <!-- ============ 02 — Agenda (tile grid) ============ -->
+  <section class="agenda" data-screen-label="02 Agenda">
+    <div class="head">
+      <h2>Agenda.</h2>
+      <span class="label">Five topics &middot; ninety minutes</span>
+    </div>
+    <div class="agenda-grid">
+      <div class="topic t-green">
+        <div>
+          <div class="num">01</div>
+          <h3>Where<br/>we stand<br/>today.</h3>
+        </div>
+        <div class="foot">Context</div>
+      </div>
+      <div class="topic t-pink">
+        <div>
+          <div class="num">02</div>
+          <h3>The big shift.</h3>
+        </div>
+        <div class="foot">Insight</div>
+      </div>
+      <div class="topic t-cream">
+        <div>
+          <div class="num">03</div>
+          <h3>By the numbers.</h3>
+        </div>
+        <div class="foot">Data</div>
+      </div>
+      <div class="topic t-greenLite">
+        <div>
+          <div class="num">04</div>
+          <h3>How we&rsquo;ll get there.</h3>
+        </div>
+        <div class="foot">Plan</div>
+      </div>
+      <div class="topic t-pink">
+        <div>
+          <div class="num">05</div>
+          <h3>What it adds up to.</h3>
+        </div>
+        <div class="foot">Outcomes</div>
+      </div>
+    </div>
+  </section>
+  <!-- ============ 03 — Big statement ============ -->
+  <section class="statement" data-screen-label="03 Statement">
+    <div>
+      <span class="label">The shift</span>
+      <blockquote>The next twelve months are about doing fewer things, and doing them with more conviction.</blockquote>
+    </div>
+    <div class="attrib">
+      <div>
+        <div class="name">Name Placeholder</div>
+        <div style="margin-top: 8px;">Role Placeholder</div>
+      </div>
+      <div>Section 02</div>
+    </div>
+  </section>
+  <!-- ============ 04 — Two-column with image ============ -->
+  <section class="two-col" data-screen-label="04 Two Column">
+    <div class="col-img">
+      <div class="figure">[ image &middot; 880 &times; 760 ]</div>
+      <div class="caption">
+        <span>Visual 01</span>
+        <span>Replace with photo</span>
+      </div>
+    </div>
+    <div class="col-text">
+      <div class="eyebrow">The big shift</div>
+      <h2>Fewer bets, stronger commitments.</h2>
+      <p>Placeholder body copy sits here as a stand&#8209;in for the supporting narrative. Open with the point you want the audience to remember when they walk out of the room.</p>
+      <p>Use the second paragraph to add proof &mdash; a customer, a moment in market, a number that earns the claim. Keep one idea per paragraph; trust the audience to follow.</p>
+      <dl class="meta">
+        <div><dt>Owner</dt><dd>Team Placeholder</dd></div>
+        <div><dt>Timeframe</dt><dd>Q2 &mdash; Q4</dd></div>
+        <div><dt>Status</dt><dd>On track</dd></div>
+      </dl>
+    </div>
+  </section>
+  <!-- ============ 05 — Data chart ============ -->
+  <section class="data" data-screen-label="05 Data">
+    <div class="head">
+      <div>
+        <div class="label">By the numbers</div>
+        <h2>Revenue by quarter,<br/>year over year.</h2>
+      </div>
+      <div class="legend">
+        <span><span class="sw" style="background: var(--pink);"></span>This year</span>
+        <span><span class="sw" style="background: var(--cream);"></span>Last year</span>
+      </div>
+    </div>
+    <div class="chart">
+      <div class="yaxis">
+        <span>100</span><span>75</span><span>50</span><span>25</span><span>0</span>
+      </div>
+      <div class="plot">
+        <div class="grid-lines"></div>
+        <div class="bar-group"><div class="bar-pair">
+          <div class="bar a" style="height: 62%;"><span class="val">62</span></div>
+          <div class="bar b" style="height: 48%;"><span class="val">48</span></div>
+        </div></div>
+        <div class="bar-group"><div class="bar-pair">
+          <div class="bar a" style="height: 74%;"><span class="val">74</span></div>
+          <div class="bar b" style="height: 55%;"><span class="val">55</span></div>
+        </div></div>
+        <div class="bar-group"><div class="bar-pair">
+          <div class="bar a" style="height: 81%;"><span class="val">81</span></div>
+          <div class="bar b" style="height: 67%;"><span class="val">67</span></div>
+        </div></div>
+        <div class="bar-group"><div class="bar-pair">
+          <div class="bar a" style="height: 88%;"><span class="val">88</span></div>
+          <div class="bar b" style="height: 72%;"><span class="val">72</span></div>
+        </div></div>
+        <div class="bar-group"><div class="bar-pair">
+          <div class="bar a" style="height: 92%;"><span class="val">92</span></div>
+          <div class="bar b" style="height: 78%;"><span class="val">78</span></div>
+        </div></div>
+      </div>
+      <div class="xlabel-row">
+        <span class="xlabel">Q1</span>
+        <span class="xlabel">Q2</span>
+        <span class="xlabel">Q3</span>
+        <span class="xlabel">Q4</span>
+        <span class="xlabel">YTD</span>
+      </div>
+    </div>
+    <div class="footnote">
+      <span>Source &middot; Internal data, 2026</span>
+      <span>Indexed to plan</span>
+    </div>
+  </section>
+  <!-- ============ 06 — Framework / 4 steps ============ -->
+  <section class="framework" data-screen-label="06 Framework">
+    <div class="head">
+      <span class="label">How we&rsquo;ll get there</span>
+      <span class="label">Four steps</span>
+    </div>
+    <h2>A simple plan,<br/>in four moves.</h2>
+    <div class="flow">
+      <div class="step">
+        <div class="num">Step 01</div>
+        <h3>Listen</h3>
+        <p>Open the quarter with structured conversations across teams. Capture what we hear without filtering.</p>
+        <div class="marker"><span>Weeks 1&ndash;2</span><span>Owner</span></div>
+      </div>
+      <div class="step pinkfill">
+        <div class="num">Step 02</div>
+        <h3>Align</h3>
+        <p>Cluster signals into themes. Name them plainly so everyone uses the same language in every room.</p>
+        <div class="marker"><span>Week 3</span><span>Owner</span></div>
+      </div>
+      <div class="step fill">
+        <div class="num">Step 03</div>
+        <h3>Build</h3>
+        <p>Translate the themes into a short list of bets. Decide what we&rsquo;re keeping, and what we&rsquo;re cutting.</p>
+        <div class="marker"><span>Weeks 4&ndash;6</span><span>Owner</span></div>
+      </div>
+      <div class="step">
+        <div class="num">Step 04</div>
+        <h3>Ship</h3>
+        <p>Put the work in market on a known cadence. Measure against the plan; adjust without losing the thread.</p>
+        <div class="marker"><span>Weeks 7&ndash;12</span><span>Owner</span></div>
+      </div>
+    </div>
+  </section>
+  <!-- ============ 07 — Big stats / KPI callouts ============ -->
+  <section class="stats" data-screen-label="07 Stats">
+    <div class="head">
+      <span class="label">What it adds up to</span>
+      <span class="label">Year to date</span>
+    </div>
+    <h2>Three numbers that<br/>tell the story.</h2>
+    <div class="kpi-row">
+      <div class="kpi">
+        <span class="tag">Growth</span>
+        <span class="big">+42<span class="unit">%</span></span>
+        <p class="desc">Year over year increase in active accounts, ahead of the plan we set in January.</p>
+      </div>
+      <div class="kpi">
+        <span class="tag">Retention</span>
+        <span class="big">94<span class="unit">%</span></span>
+        <p class="desc">Net retention across the top customer cohort, a four&#8209;point lift from last year.</p>
+      </div>
+      <div class="kpi">
+        <span class="tag">Reach</span>
+        <span class="big">3.1<span class="unit">M</span></span>
+        <p class="desc">People served this quarter, across the markets we entered in the spring.</p>
+      </div>
+    </div>
+  </section>
+  <!-- ============ 08 — Summary / closing ============ -->
+  <section class="summary" data-screen-label="08 Summary">
+    <div class="topbar">
+      <span class="label">In summary</span>
+      <span class="label">Thank you</span>
+    </div>
+    <h2>Three<br/>things to take.</h2>
+    <div class="grid-cols">
+      <div>
+        <h4>One</h4>
+        <p>The strategy holds. We are doing fewer things, and the right things.</p>
+      </div>
+      <div>
+        <h4>Two</h4>
+        <p>The numbers back the bets. Growth, retention, and reach are all ahead of plan.</p>
+      </div>
+      <div>
+        <h4>Three</h4>
+        <p>Next quarter, we keep the pace and add focus where the data points us.</p>
+      </div>
+    </div>
+  </section>
+</deck-stage>
+</body>
+</html>