function HowItWorks() {
  const steps = [
    { n: '01', title: 'Connect your tools.', body: 'Email, Slack, calendar, docs. genz reads what you read, no more.' },
    { n: '02', title: 'Tell it what to handle.', body: 'A few lines in plain language. "Triage my inbox. Draft replies. Leave the rest for me."' },
    { n: '03', title: 'Review the morning brief.', body: 'genz works overnight. You wake up to a recap and a queue of drafts ready to send.' },
  ];
  return (
    <section style={{ borderTop: '1px solid var(--line)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '128px 32px' }}>
        <div style={{ maxWidth: 720, marginBottom: 80 }}>
          <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 500, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--fg-subtle)', marginBottom: 20 }}>How it works</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 }}>Three steps, then quiet.</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'var(--line)', border: '1px solid var(--line)' }}>
          {steps.map(s => (
            <div key={s.n} style={{ background: 'var(--bg)', padding: '40px 32px', display: 'flex', flexDirection: 'column', gap: 18, minHeight: 280 }}>
              <div style={{ fontFamily: 'var(--font-serif)', fontSize: 56, color: 'var(--brand)', lineHeight: 1, letterSpacing: '-0.02em' }}>{s.n}</div>
              <h3 style={{ fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 28, lineHeight: 1.15, letterSpacing: '-0.015em', color: 'var(--fg)', margin: 0 }}>{s.title}</h3>
              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.6, color: 'var(--fg-muted)', margin: 0 }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.HowItWorks = HowItWorks;