function CapabilityCard({ eyebrow, title, body }) {
  return (
    <article style={{
      background: 'var(--bg-elev)', border: '1px solid var(--line)',
      borderRadius: 12, padding: '32px 28px',
      display: 'flex', flexDirection: 'column', gap: 16,
    }}>
      <div style={{
        fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 500,
        letterSpacing: '0.12em', textTransform: 'uppercase',
        color: 'var(--fg-subtle)',
      }}>{eyebrow}</div>
      <h3 style={{
        fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 32,
        lineHeight: 1.1, letterSpacing: '-0.015em', color: 'var(--fg)',
        margin: 0,
      }}>{title}</h3>
      <p style={{
        fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.6,
        color: 'var(--fg-muted)', margin: 0,
      }}>{body}</p>
    </article>
  );
}

function CapabilityRail() {
  return (
    <section id="product" style={{ maxWidth: 1200, margin: '0 auto', padding: '128px 32px', scrollMarginTop: 80 }}>
      <div style={{ maxWidth: 720, marginBottom: 64 }}>
        <div style={{
          fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 500,
          letterSpacing: '0.12em', textTransform: 'uppercase',
          color: 'var(--fg-subtle)', marginBottom: 20,
        }}>What it does</div>
        <h2 style={{
          fontFamily: 'var(--font-serif)', fontWeight: 400,
          fontSize: 'clamp(40px, 5vw, 64px)', lineHeight: 1.05,
          letterSpacing: '-0.02em', color: 'var(--fg)', margin: 0,
        }}>
          Hand off the work<br/>you'd rather not.
        </h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
        <CapabilityCard eyebrow="01 · Inbox" title="Reply, archive, route." body="genz drafts replies in your voice, archives the noise, and routes anything that needs you to your inbox." />
        <CapabilityCard eyebrow="02 · Threads" title="Summarize the long ones." body="A 40-message Slack thread, a 2-hour meeting, a project channel — distilled to what changed and what's next." />
        <CapabilityCard eyebrow="03 · Calendar" title="Consolidate the week." body="Three 30-minute meetings become one async note. genz protects deep-work blocks before you ask." />
      </div>
    </section>
  );
}
window.CapabilityRail = CapabilityRail;