<!-- stat-grid.html — 3-column metric card grid -->
<section style="padding: 24px 0;">
  <div style="
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  ">

    <div style="
      padding: 16px;
      background: var(--color-neutral-2);
      border: 1px solid var(--color-border);
      border-radius: 10px;
    ">
      <p style="
        margin: 0 0 4px;
        font-family: var(--font-sans);
        font-size: 11px;
        font-weight: 500;
        color: var(--color-neutral-6);
      ">Sessions today</p>
      <p style="
        margin: 0 0 8px;
        font-family: var(--font-sans);
        font-size: 30px;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: -0.02em;
        color: var(--color-neutral-9);
      ">142</p>
      <span style="
        display: inline-flex;
        align-items: center;
        gap: 3px;
        padding: 2px 6px;
        background: rgba(16,185,129,0.1);
        border-radius: 9999px;
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 500;
        color: var(--color-success);
      ">+12%</span>
    </div>

    <div style="
      padding: 16px;
      background: var(--color-neutral-2);
      border: 1px solid var(--color-border);
      border-radius: 10px;
    ">
      <p style="
        margin: 0 0 4px;
        font-family: var(--font-sans);
        font-size: 11px;
        font-weight: 500;
        color: var(--color-neutral-6);
      ">Active agents</p>
      <p style="
        margin: 0 0 8px;
        font-family: var(--font-sans);
        font-size: 30px;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: -0.02em;
        color: var(--color-neutral-9);
      ">8</p>
      <span style="
        display: inline-flex;
        align-items: center;
        gap: 3px;
        padding: 2px 6px;
        background: rgba(245,158,11,0.1);
        border-radius: 9999px;
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 500;
        color: var(--color-warning);
      ">−2 idle</span>
    </div>

    <div style="
      padding: 16px;
      background: var(--color-neutral-2);
      border: 1px solid var(--color-border);
      border-radius: 10px;
    ">
      <p style="
        margin: 0 0 4px;
        font-family: var(--font-sans);
        font-size: 11px;
        font-weight: 500;
        color: var(--color-neutral-6);
      ">Documents indexed</p>
      <p style="
        margin: 0 0 8px;
        font-family: var(--font-sans);
        font-size: 30px;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: -0.02em;
        color: var(--color-neutral-9);
      ">2.4k</p>
      <span style="
        display: inline-flex;
        align-items: center;
        gap: 3px;
        padding: 2px 6px;
        background: rgba(59,130,246,0.1);
        border-radius: 9999px;
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 500;
        color: var(--color-accent);
      ">+48 new</span>
    </div>

  </div>
</section>
