function Methodology() {
  const items = [
    {
      id: "M-01",
      title: "Named entities, not aggregates",
      contrast: "vs. Veritrade raw dumps",
      body: "Every importer is reconciled against SAT registrations, RFC, WHOIS, and corporate filings. Fuzzy matches are flagged in-line; ambiguous shipments are excluded from totals, not silently absorbed.",
      icon: (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
      ),
    },
    {
      id: "M-02",
      title: "Coverage disclosed on every chart",
      contrast: "vs. unfounded \"comprehensive\" claims",
      body: "Every figure carries an explicit coverage percentage and a date stamp. We publish what we don't see, not just what we do. Subject to revision per Banxico release cycle.",
      icon: (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M3 3v18h18"/><path d="M7 14l4-4 4 4 5-7"/></svg>
      ),
    },
    {
      id: "M-03",
      title: "Caveats and limitations explicit",
      contrast: "vs. over-promise marketing",
      body: "Bonded-warehouse leakage, IMMEX re-export adjustment, lagging Banxico revisions — all surfaced in a standing methodology callout, never tucked into a footer disclaimer.",
      icon: (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/></svg>
      ),
    },
  ];

  return (
    <section id="methodology" style={{ background: PALETTE.paper2, borderBottom: `1px solid ${PALETTE.rule}` }}>
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "96px 32px" }} className="vst-section">
        <div style={{ maxWidth: 720, marginBottom: 48 }}>
          <Eyebrow style={{ marginBottom: 14 }}>Why we're different</Eyebrow>
          <h2 className="vst-h2" style={{
            fontFamily: "'Source Serif 4', serif", fontSize: 44, fontWeight: 600,
            lineHeight: 1.12, letterSpacing: "-.018em", color: PALETTE.navy, margin: 0, textWrap: "balance",
          }}>
            Named entity-level rigor. Methodology transparent.
          </h2>
        </div>

        <div className="vst-grid-3" style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28,
        }}>
          {items.map(i => (
            <div key={i.id} style={{
              borderTop: `2px solid ${PALETTE.navy}`,
              paddingTop: 22,
              display: "flex", flexDirection: "column", gap: 12,
            }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span style={{
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  width: 38, height: 38, color: PALETTE.navy,
                  background: PALETTE.white, border: `1px solid ${PALETTE.rule}`,
                  borderRadius: 4,
                }}>{i.icon}</span>
                <span style={{
                  fontFamily: "JetBrains Mono, monospace", fontSize: 11,
                  color: PALETTE.mute2, letterSpacing: ".04em",
                }}>{i.id}</span>
              </div>
              <h3 style={{
                fontFamily: "'Source Serif 4', serif", fontSize: 22, fontWeight: 600,
                color: PALETTE.navy, margin: "8px 0 0", letterSpacing: "-.012em", lineHeight: 1.25,
              }}>{i.title}</h3>
              <div style={{
                fontFamily: "JetBrains Mono, monospace", fontSize: 11,
                color: PALETTE.red, fontStyle: "normal", letterSpacing: ".02em",
              }}>{i.contrast}</div>
              <p style={{
                fontFamily: "'Source Serif 4', serif", fontSize: 15.5,
                lineHeight: 1.6, color: PALETTE.ink, margin: 0,
              }}>{i.body}</p>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 48, paddingTop: 22,
          borderTop: `1px solid ${PALETTE.rule2}`,
          display: "flex", justifyContent: "space-between", alignItems: "center",
          flexWrap: "wrap", gap: 18,
        }}>
          <a href="#" style={{
            fontFamily: "Inter, sans-serif", fontSize: 14, fontWeight: 600,
            color: PALETTE.blue, textDecoration: "none",
            display: "inline-flex", gap: 6, alignItems: "center",
          }}>
            Read the full methodology — ≈ 12 pages <span className="vst-link-arrow">→</span>
          </a>
          <span style={{
            fontFamily: "JetBrains Mono, monospace", fontSize: 11,
            color: PALETTE.mute2, letterSpacing: ".02em",
          }}>Last revised · 12 March 2026 · v0.4.2</span>
        </div>
      </div>
    </section>
  );
}

window.Methodology = Methodology;
