/* MStheory website — How it works */
function HowItWorks({ t }) {
  return (
    <section id="how" style={{ position: "relative", paddingBlock: "var(--space-32)", background: "var(--grad-ink)", borderBlock: "1px solid var(--border-subtle)" }}>
      <div className="ms-container">
        <div style={{ textAlign: "center", maxWidth: "640px", margin: "0 auto var(--space-16)" }}>
          <p className="ms-eyebrow">{t.how.eyebrow}</p>
          <h2 style={{ fontSize: "var(--text-2xl)", marginTop: "12px" }}>{t.how.title}</h2>
        </div>
        <div className="ms-how-grid">
          {t.how.steps.map((s, i) => (
            <div key={i} className="ms-step">
              <div className="ms-step-num">{String(i + 1).padStart(2, "0")}</div>
              <h3 style={{ fontSize: "var(--text-lg)", marginBottom: "8px" }}>{s.t}</h3>
              <p style={{ color: "var(--text-secondary)", fontSize: "var(--text-sm)", lineHeight: "var(--lh-relaxed)", margin: 0 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.HowItWorks = HowItWorks;