<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Northwind — Q3 Financial Report</title>
<style>
  :root {
    --bg: #f7f6f2;
    --paper: #ffffff;
    --ink: #11141a;
    --muted: #5f6573;
    --line: #e6e3dd;
    --line-strong: #c8c2b6;
    --accent: #1f6e8c;
    --accent-soft: #e7f0f4;
    --positive: #1f8c5c;
    --negative: #b13b3b;
    --display: 'Iowan Old Style', 'Charter', 'Iowan', Georgia, serif;
    --body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--body);
    font-size: 14px;
    line-height: 1.55;
  }
  .page {
    max-width: 980px;
    margin: 32px auto;
    padding: 56px 64px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(28,27,26,0.06);
  }
  header.masthead { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 18px; border-bottom: 2px solid var(--ink); margin-bottom: 28px; }
  .mast-left { display: flex; flex-direction: column; gap: 6px; }
  .mast-co { font-family: var(--display); font-size: 32px; letter-spacing: -0.01em; font-weight: 700; }
  .mast-meta { font-family: var(--mono); font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
  .mast-badge {
    font-family: var(--mono); font-size: 11px; padding: 5px 10px; border-radius: 4px;
    border: 1px solid var(--ink); color: var(--ink); text-transform: uppercase; letter-spacing: 0.08em;
  }

  h2 { font-family: var(--display); font-size: 19px; margin: 36px 0 14px; letter-spacing: -0.005em; font-weight: 700; }
  h2 .accent { color: var(--accent); }
  .lede { color: var(--muted); max-width: 64ch; }

  /* KPI strip */
  .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 8px 0 28px; }
  .kpi { padding: 16px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
  .kpi .label { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
  .kpi .value { font-family: var(--display); font-size: 28px; font-weight: 700; margin-top: 6px; line-height: 1; letter-spacing: -0.01em; }
  .kpi .delta { font-family: var(--mono); font-size: 11.5px; margin-top: 6px; }
  .delta.up { color: var(--positive); }
  .delta.down { color: var(--negative); }
  .delta.flat { color: var(--muted); }

  /* Charts */
  .chart-row { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; }
  .card { padding: 18px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
  .card h3 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
  .card .sub { font-size: 12px; color: var(--muted); }
  .chart svg { width: 100%; height: 200px; display: block; margin-top: 8px; }
  .legend { display: flex; gap: 14px; font-size: 11.5px; color: var(--muted); margin-top: 6px; }
  .legend .swatch { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
  .legend .a { background: var(--accent); }
  .legend .b { background: var(--ink); opacity: 0.6; }

  /* Bars */
  .bars { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
  .bar-row { display: grid; grid-template-columns: 110px 1fr 60px; gap: 10px; align-items: center; font-size: 12.5px; }
  .bar-row .label { color: var(--muted); }
  .bar-track { background: var(--accent-soft); border-radius: 4px; height: 10px; position: relative; overflow: hidden; }
  .bar-fill { background: var(--accent); height: 100%; border-radius: 4px; }
  .bar-value { font-family: var(--mono); font-size: 11.5px; text-align: right; color: var(--ink); }

  /* Tables */
  table { width: 100%; border-collapse: collapse; margin-top: 6px; }
  th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: middle; }
  th { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); border-bottom: 1px solid var(--line-strong); }
  td.num, th.num { text-align: right; font-family: var(--mono); }
  tr.total td { font-weight: 700; border-top: 2px solid var(--ink); border-bottom: none; padding-top: 14px; }
  .badge { display: inline-block; padding: 2px 8px; font-size: 11px; border-radius: 999px; font-weight: 500; }
  .badge.green { background: #e7f4ee; color: var(--positive); }
  .badge.amber { background: #fbf0d6; color: #8a6912; }
  .badge.red { background: #f7e1e1; color: var(--negative); }
  .logo { display: inline-flex; width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, var(--accent), #2c98c5); margin-right: 10px; vertical-align: middle; }

  /* Outlook */
  .outlook { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
  .outlook .quote { padding: 18px; background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: 6px; font-family: var(--display); font-size: 16px; line-height: 1.5; }
  .outlook .signoff { font-size: 13px; color: var(--muted); }
  .outlook .signoff strong { color: var(--ink); display: block; font-family: var(--display); font-size: 16px; margin-bottom: 2px; }
  footer { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }

  @media (max-width: 760px) {
    .page { padding: 32px 24px; margin: 0; border-radius: 0; }
    .kpis { grid-template-columns: 1fr 1fr; }
    .chart-row { grid-template-columns: 1fr; }
    .outlook { grid-template-columns: 1fr; }
  }
</style>
</head>
<body>
<div class="page">
  <header class="masthead">
    <div class="mast-left">
      <div class="mast-meta">Northwind Trading · Q3 FY25</div>
      <div class="mast-co">Quarterly Financial Report</div>
      <div class="mast-meta">Prepared by Finance · Issued 14 October 2025</div>
    </div>
    <div class="mast-badge">Confidential</div>
  </header>

  <p class="lede">Q3 closed ahead of plan on revenue and gross margin, with cash runway extending to 27 months on the back of a leaner cost base. Mid-market and enterprise both expanded; SMB churn remains the watch item heading into Q4.</p>

  <h2>Headline KPIs</h2>
  <div class="kpis">
    <div class="kpi">
      <div class="label">Revenue</div>
      <div class="value">$8.42M</div>
      <div class="delta up">▲ 14.6% QoQ</div>
    </div>
    <div class="kpi">
      <div class="label">Net new MRR</div>
      <div class="value">$184k</div>
      <div class="delta up">▲ 22.0% QoQ</div>
    </div>
    <div class="kpi">
      <div class="label">Gross margin</div>
      <div class="value">82%</div>
      <div class="delta up">▲ 3 pp YoY</div>
    </div>
    <div class="kpi">
      <div class="label">Cash runway</div>
      <div class="value">27 mo</div>
      <div class="delta up">▲ 4 mo QoQ</div>
    </div>
  </div>

  <h2>Revenue & costs</h2>
  <div class="chart-row">
    <div class="card">
      <h3>Revenue · trailing 12 months</h3>
      <div class="sub">USD millions, monthly</div>
      <div class="chart">
        <svg viewBox="0 0 720 200" preserveAspectRatio="none">
          <defs>
            <linearGradient id="lg" x1="0" x2="0" y1="0" y2="1">
              <stop offset="0%" stop-color="var(--accent)" stop-opacity="0.32"/>
              <stop offset="100%" stop-color="var(--accent)" stop-opacity="0"/>
            </linearGradient>
          </defs>
          <polygon fill="url(#lg)" points="20,180 20,150 80,140 140,128 200,118 260,110 320,98 380,92 440,80 500,72 560,60 620,52 680,40 700,40 700,180" />
          <polyline fill="none" stroke="var(--accent)" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"
            points="20,150 80,140 140,128 200,118 260,110 320,98 380,92 440,80 500,72 560,60 620,52 680,40" />
          <polyline fill="none" stroke="#11141a" stroke-opacity="0.45" stroke-width="1.5" stroke-dasharray="3 3"
            points="20,165 80,158 140,150 200,142 260,134 320,128 380,122 440,116 500,108 560,102 620,96 680,90" />
          <circle cx="680" cy="40" r="3.5" fill="var(--accent)"/>
        </svg>
        <div class="legend">
          <span><span class="swatch a"></span>Revenue</span>
          <span><span class="swatch b"></span>Plan</span>
        </div>
      </div>
    </div>
    <div class="card">
      <h3>Operating costs</h3>
      <div class="sub">USD thousands, Q3</div>
      <div class="bars">
        <div class="bar-row"><span class="label">R&amp;D</span><div class="bar-track"><div class="bar-fill" style="width: 78%"></div></div><span class="bar-value">$1.42M</span></div>
        <div class="bar-row"><span class="label">Sales & GTM</span><div class="bar-track"><div class="bar-fill" style="width: 60%"></div></div><span class="bar-value">$1.10M</span></div>
        <div class="bar-row"><span class="label">G&amp;A</span><div class="bar-track"><div class="bar-fill" style="width: 36%"></div></div><span class="bar-value">$660k</span></div>
        <div class="bar-row"><span class="label">Marketing</span><div class="bar-track"><div class="bar-fill" style="width: 28%"></div></div><span class="bar-value">$510k</span></div>
        <div class="bar-row"><span class="label">Infrastructure</span><div class="bar-track"><div class="bar-fill" style="width: 18%"></div></div><span class="bar-value">$330k</span></div>
      </div>
    </div>
  </div>

  <h2>P&amp;L summary</h2>
  <table>
    <thead>
      <tr>
        <th>Line item</th>
        <th class="num">Q3 FY25</th>
        <th class="num">Q2 FY25</th>
        <th class="num">Δ QoQ</th>
        <th class="num">Q3 FY24</th>
        <th class="num">Δ YoY</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>Revenue</td><td class="num">$8.42M</td><td class="num">$7.34M</td><td class="num" style="color: var(--positive);">+14.6%</td><td class="num">$5.92M</td><td class="num" style="color: var(--positive);">+42.2%</td></tr>
      <tr><td>Cost of revenue</td><td class="num">($1.51M)</td><td class="num">($1.46M)</td><td class="num" style="color: var(--negative);">+3.4%</td><td class="num">($1.18M)</td><td class="num" style="color: var(--negative);">+28.0%</td></tr>
      <tr><td>Gross profit</td><td class="num">$6.91M</td><td class="num">$5.88M</td><td class="num" style="color: var(--positive);">+17.5%</td><td class="num">$4.74M</td><td class="num" style="color: var(--positive);">+45.8%</td></tr>
      <tr><td>Operating expenses</td><td class="num">($4.02M)</td><td class="num">($4.18M)</td><td class="num" style="color: var(--positive);">−3.8%</td><td class="num">($3.66M)</td><td class="num" style="color: var(--negative);">+9.8%</td></tr>
      <tr class="total"><td>Operating income</td><td class="num">$2.89M</td><td class="num">$1.70M</td><td class="num" style="color: var(--positive);">+70.0%</td><td class="num">$1.08M</td><td class="num" style="color: var(--positive);">+167.5%</td></tr>
    </tbody>
  </table>

  <h2>Top accounts</h2>
  <table>
    <thead>
      <tr>
        <th>Customer</th>
        <th>Plan</th>
        <th>Region</th>
        <th class="num">ARR</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr><td><span class="logo"></span>Pioneer Robotics</td><td>Enterprise</td><td>EMEA</td><td class="num">$612k</td><td><span class="badge green">Renewed</span></td></tr>
      <tr><td><span class="logo"></span>Atlas Cooperative</td><td>Enterprise</td><td>APAC</td><td class="num">$486k</td><td><span class="badge green">Expanded</span></td></tr>
      <tr><td><span class="logo"></span>Foundry Group</td><td>Team Plus</td><td>NA</td><td class="num">$320k</td><td><span class="badge amber">In renewal</span></td></tr>
      <tr><td><span class="logo"></span>Voltage Co.</td><td>Enterprise</td><td>NA</td><td class="num">$298k</td><td><span class="badge green">Renewed</span></td></tr>
      <tr><td><span class="logo"></span>Lattice Health</td><td>Team Plus</td><td>EMEA</td><td class="num">$214k</td><td><span class="badge red">At risk</span></td></tr>
    </tbody>
  </table>

  <h2>Outlook · Q4</h2>
  <div class="outlook">
    <div class="quote">"We're entering Q4 with the strongest pipeline coverage of the year — 3.4× plan — and the operating leverage to convert it without expanding the cost base."</div>
    <div class="signoff">
      <strong>Mira Okafor, CFO</strong>
      We expect revenue of $9.1–9.4M, net new MRR of $200–220k, and gross margin holding above 80%. The two open items are SMB churn (we'll publish a recovery plan with the November update) and the EMEA infra migration, which moves to GA in mid-November.
    </div>
  </div>

  <footer>
    <span>Northwind Trading · Q3 FY25 · Internal use only</span>
    <span>Page 1 of 1</span>
  </footer>
</div>
</body>
</html>
