function HowItWorksPage() {
  return (
    <>
      <header style={{padding: "120px 64px 64px", background: "var(--cream)", maxWidth: 1180, margin: "0 auto"}}>
        <span className="eyebrow">How it works</span>
        <h1 className="h-display" style={{marginTop: 16}}>One menu.<br/>One delivery.<br/>Every Sunday.</h1>
      </header>

      <section className="section section--cream" style={{paddingTop:0}}>
        <div className="section__inner">
          <div className="timeline">
            {RITUAL.map((r,i) => (
              <React.Fragment key={i}>
                <div className="timeline__cell">
                  <div className="timeline__day">{r.day}</div>
                  <div className="timeline__time">{r.time}</div>
                </div>
                <div className="timeline__cell">
                  <h3 className="timeline__what">{r.what}</h3>
                  <p className="timeline__note">{r.note}</p>
                </div>
              </React.Fragment>
            ))}
          </div>
        </div>
      </section>

      <section className="section section--forest">
        <div className="section__inner" style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap: 64, alignItems:"center"}}>
          <div className="stack gap-5">
            <span className="eyebrow eyebrow--cream">What you'll find inside</span>
            <h2 className="h2">Wax-sealed. Hand-signed. Never plastic.</h2>
            <p className="lede lede--cream">
              Glass and recycled fibre. A handwritten card. The n. seal on every order.
              One in a hundred drops carries a gold-foil sticker — the order is on us.
            </p>
          </div>
          <div style={{aspectRatio:"4/5", backgroundImage:"url(assets/placeholder-oak.svg)", backgroundSize:"cover", borderRadius:"var(--r-md)"}}/>
        </div>
      </section>

      <EmailCapture/>
    </>
  );
}
window.HowItWorksPage = HowItWorksPage;