templates/agenda.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Agenda card</title>
<style>
  /* ======== BRAND (edit these per product) ======== */
  :root {
    --brand: #4c6ef5;
    --ink: #18181b;
    --grey: #52525b;
    --line: #e4e7f2;
    --step1: #4c6ef5; --step2: #0ea5b7; --step3: #f59e0b; --step4: #7c3aed;
    --mono: ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
    --sans: system-ui, -apple-system, 'Segoe UI', sans-serif;
  }
  /* ================================================ */
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { width: 1920px; height: 1080px; overflow: hidden; }
  body { font-family: var(--sans); background: #ffffff; position: relative; padding: 64px 80px; }
  .header { display: flex; align-items: center; gap: 18px; }
  .header .wordmark { font-family: var(--mono); font-weight: 800; font-size: 28px; letter-spacing: -1px; color: var(--brand); }
  .brand-label { margin-left: 40px; font-family: var(--mono); font-size: 22px; font-weight: 600; color: var(--ink); letter-spacing: 3px; text-transform: uppercase; }
  h1 { font-family: var(--mono); margin-top: 64px; font-size: 70px; font-weight: 800; color: var(--ink); letter-spacing: -1.5px; }
  h1 .lead { color: var(--brand); }
  .subtitle { margin-top: 18px; color: var(--grey); font-size: 27px; }
  .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 56px; }
  .step {
    background: #fff; border: 1px solid var(--line); border-radius: 18px;
    box-shadow: 0 6px 20px rgba(24,24,27,0.08); padding: 38px 32px 42px; position: relative;
  }
  .step::before { content: ''; position: absolute; top: -4px; left: 26px; width: 86px; height: 8px; border-radius: 4px; background: var(--bar); }
  .num { width: 56px; height: 56px; border-radius: 14px; background: var(--bar); color: #fff; font-family: var(--mono); font-size: 28px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
  .step h3 { font-family: var(--mono); margin-top: 28px; font-size: 28px; font-weight: 700; color: var(--ink); line-height: 1.28; letter-spacing: -0.5px; }
  .step p { margin-top: 18px; font-size: 22px; color: var(--grey); line-height: 1.5; }
  .s1 { --bar: var(--step1); } .s2 { --bar: var(--step2); } .s3 { --bar: var(--step3); } .s4 { --bar: var(--step4); }
  .callout {
    margin-top: 54px; background: color-mix(in srgb, var(--brand) 8%, white);
    border-left: 8px solid var(--brand);
    border-radius: 8px; padding: 28px 38px; font-size: 26px; color: var(--ink); font-weight: 500;
  }
  .footer { position: absolute; left: 80px; right: 80px; bottom: 40px; border-top: 1px solid var(--line); padding-top: 18px; display: flex; justify-content: space-between; font-family: var(--mono); color: #9aa3b8; font-size: 20px; }
</style>
</head>
<body>
  <div class="header">
    <span class="wordmark">Acme</span>
    <div class="brand-label">Product demo</div>
  </div>

  <h1><span class="lead">In this demo:</span> from sign-in to insights</h1>
  <p class="subtitle">Live product · the data on screen is real</p>

  <div class="grid">
    <div class="step s1">
      <div class="num">1</div>
      <h3>First feature</h3>
      <p>One sentence on what the viewer will see and why it matters.</p>
    </div>
    <div class="step s2">
      <div class="num">2</div>
      <h3>Second feature</h3>
      <p>One sentence on what the viewer will see and why it matters.</p>
    </div>
    <div class="step s3">
      <div class="num">3</div>
      <h3>Third feature</h3>
      <p>One sentence on what the viewer will see and why it matters.</p>
    </div>
    <div class="step s4">
      <div class="num">4</div>
      <h3>Getting started</h3>
      <p>How the viewer can try it themselves.</p>
    </div>
  </div>

  <div class="callout">Recorded on the live product — the data on screen is real.</div>

  <div class="footer">
    <span>acme.example</span>
    <span>Product demo · 2026</span>
  </div>
</body>
</html>