/* TitleVerifi — Pricing page.
   Same vocabulary as landing-page.jsx: serif headers + italic vermilion accents,
   monospace meta labels, hairline rules, comparison-table pattern. */

const Pricing = () => {
  const [billing, setBilling] = React.useState('per-file'); // 'per-file' | 'monthly'
  return (
  <div style={{
    width: 1440, background: 'var(--paper)', color: 'var(--ink)',
    fontFamily: 'var(--font-sans)',
  }}>
    {/* Nav (consistent w/ landing) */}
    <nav style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '20px 56px', borderBottom: '1px solid var(--rule)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 48 }}>
        <a href="index.html" aria-label="TitleVerifi home" style={{ display: 'inline-flex', alignItems: 'center', textDecoration: 'none', color: 'inherit' }}>
          <Wordmark size={28} />
        </a>
        <div style={{ display: 'flex', gap: 28, fontSize: 14, color: 'var(--ink-2)' }}>
          <a style={pgNavLink} href="index.html#product">Product</a>
          <a style={pgNavLink} href="index.html#how-it-works">How it works</a>
          <a style={{ ...pgNavLink, color: 'var(--ink)', fontWeight: 500, borderBottom: '1.5px solid var(--accent)', paddingBottom: 2 }} href="pricing.html">Pricing</a>
          <a style={pgNavLink} href="index.html#customers">Customers</a>
          <a style={pgNavLink} href="index.html#docs">Docs</a>
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 20, fontSize: 14 }}>
        <a style={{ ...pgNavLink, color: 'var(--ink-2)' }} href="signin.html?return=product.html">Sign in</a>
        <a style={pgBtnPrimary} href="signin.html?return=product.html">Request access →</a>
      </div>
    </nav>

    {/* Hero */}
    <section style={{ padding: '80px 56px 72px', borderBottom: '1px solid var(--rule)' }}>
      <div className="meta" style={{ marginBottom: 18 }}>§ PRICING — PILOT DRAFT</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 80, alignItems: 'flex-end' }}>
        <h1 style={{
          fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 80,
          lineHeight: 0.98, letterSpacing: '-0.025em', margin: 0,
        }}>
          Priced like<br/>
          a title search.<br/>
          <em style={{ color: 'var(--accent)' }}>Not like software.</em>
        </h1>
        <p style={{ fontSize: 18, lineHeight: 1.55, color: 'var(--ink-2)', margin: 0 }}>
          You already know what an examiner-hour costs and what a search package
          costs. We price against those — per file, with volume tiers — so the
          economics are obvious on a single line item, not buried in a per-seat
          contract.
        </p>
      </div>

      {/* Billing toggle */}
      <div style={{ marginTop: 56, display: 'flex', alignItems: 'center', gap: 16 }}>
        <span className="meta">BILLING</span>
        <div style={{
          display: 'inline-flex', border: '1px solid var(--rule-strong)', borderRadius: 4,
          padding: 3, background: 'var(--paper-2)',
        }}>
          {[
            { id: 'per-file', label: 'Per file' },
            { id: 'monthly', label: 'Monthly bundle' },
          ].map(o => (
            <button key={o.id} onClick={() => setBilling(o.id)} style={{
              padding: '8px 16px', fontSize: 13, fontFamily: 'inherit', border: 'none',
              background: billing === o.id ? 'var(--paper)' : 'transparent',
              color: billing === o.id ? 'var(--ink)' : 'var(--ink-3)',
              boxShadow: billing === o.id ? 'var(--shadow-1)' : 'none',
              borderRadius: 3, cursor: 'pointer', fontWeight: billing === o.id ? 500 : 400,
            }}>{o.label}</button>
          ))}
        </div>
        <span className="meta" style={{ color: 'var(--ink-3)', marginLeft: 8 }}>
          MONTHLY BUNDLE = ~17% OFF · COMMITTED VOLUME
        </span>
      </div>
    </section>

    {/* Plans */}
    <section style={{ padding: '64px 56px 80px', borderBottom: '1px solid var(--rule)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'var(--rule-strong)', border: '1px solid var(--rule-strong)' }}>
        <Plan
          n="01" name="Examiner" billing={billing}
          price={billing === 'per-file' ? '$49' : '$1,200'}
          unit={billing === 'per-file' ? '/ file' : '/ mo · 30 files'}
          for_="Solo abstractors and small shops"
          included={[
            { t: 'Up to 250 pages per package', em: true },
            { t: 'Chain of title — full reconstruction' },
            { t: 'Mortgage & lien analysis' },
            { t: 'Curative requirements' },
            { t: 'Source-cited PDF + web view' },
            { t: '48h SLA · email support' },
          ]}
          excluded={['Custom report templates','API access','Underwriter handoff']}
        />
        <Plan
          n="02" name="Closer" billing={billing} featured
          price={billing === 'per-file' ? '$39' : '$3,600'}
          unit={billing === 'per-file' ? '/ file · ≥ 25 / mo' : '/ mo · 100 files'}
          for_="Closing services teams · 25–500 files / mo"
          included={[
            { t: 'Up to 500 pages per package', em: true },
            { t: 'Everything in Examiner' },
            { t: 'Custom report templates · branded PDF', em: true },
            { t: 'Underwriter handoff package' },
            { t: 'Artifact-backed local API' },
            { t: 'Manual review status workflow' },
            { t: '24h SLA · priority support' },
          ]}
          excluded={['Live provider integrations']}
        />
        <Plan
          n="03" name="Underwriter" billing={billing}
          price="Custom" unit="annual contract"
          for_="National underwriters & multi-state shops"
          included={[
            { t: 'Unlimited pages per package' },
            { t: 'Everything in Closer' },
            { t: 'Future platform deployment planning', em: true },
            { t: 'Custom extractors · jurisdiction packs' },
            { t: 'Audit export planning' },
            { t: 'Dedicated examiner success lead' },
            { t: 'Pilot governance · support planning' },
          ]}
          excluded={[]}
        />
      </div>

      {/* Footnotes under plans */}
      <div style={{ marginTop: 28, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32, fontSize: 12, color: 'var(--ink-3)' }}>
        <Footnote n="¹">All plans include unlimited re-runs on a file for 30 days. A re-run is not a new file.</Footnote>
        <Footnote n="²">Page overage billed at $0.08/page after the included tier. Hard cap configurable.</Footnote>
        <Footnote n="³">Failed extractions (unreadable scans, encrypted PDFs) are not billed. Only completed reports count.</Footnote>
      </div>
    </section>

    {/* Volume pricing table */}
    <section style={{ padding: '88px 56px', borderBottom: '1px solid var(--rule)', background: 'var(--paper-2)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '380px 1fr', gap: 64, alignItems: 'flex-start' }}>
        <div style={{ position: 'sticky', top: 32 }}>
          <div className="meta" style={{ marginBottom: 16 }}>§ 02 — VOLUME</div>
          <h2 style={{
            fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 44,
            letterSpacing: '-0.02em', lineHeight: 1.05, margin: '0 0 20px',
          }}>
            Per-file price<br/>
            <em style={{ color: 'var(--accent)' }}>scales with you.</em>
          </h2>
          <p style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--ink-2)', margin: 0 }}>
            Volume tiers apply automatically to whichever plan you're on.
            Tier resets monthly. No retroactive changes — you always pay the
            tier rate for files completed in that month.
          </p>
        </div>
        <div style={{ background: 'var(--paper)', border: '1px solid var(--rule-strong)' }}>
          <VolHead/>
          <VolRow tier="0–24"     base="$49" closer="—"   under="—" first/>
          <VolRow tier="25–99"    base="$45" closer="$39" under="—"/>
          <VolRow tier="100–249"  base="$42" closer="$36" under="$30"/>
          <VolRow tier="250–499"  base="$39" closer="$33" under="$27" highlight/>
          <VolRow tier="500–999"  base="$36" closer="$30" under="$24"/>
          <VolRow tier="1,000+"   base="—"   closer="—"   under="Custom" last/>
        </div>
      </div>
    </section>

    {/* Comparison */}
    <section style={{ padding: '88px 56px', borderBottom: '1px solid var(--rule)' }}>
      <div className="meta" style={{ marginBottom: 16 }}>§ 03 — WHAT'S IN A FILE</div>
      <h2 style={{
        fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 52,
        letterSpacing: '-0.02em', lineHeight: 1.05, margin: '0 0 56px', maxWidth: 920,
      }}>
        One price. <em style={{ color: 'var(--ink-3)' }}>Everything that goes into a finished, citable report.</em>
      </h2>
      <div style={{ border: '1px solid var(--rule-strong)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', borderBottom: '1px solid var(--rule-strong)', background: 'var(--paper-2)' }}>
          <PgTh>Capability</PgTh>
          <PgTh>Examiner</PgTh>
          <PgTh accent>Closer</PgTh>
          <PgTh>Underwriter</PgTh>
        </div>
        <PgRow label="Chain of title reconstruction" a="●" b="●" c="●" />
        <PgRow label="Mortgage & lien analysis" a="●" b="●" c="●" />
        <PgRow label="Curative actions" a="●" b="●" c="●" />
        <PgRow label="Source-cited interactive web view" a="●" b="●" c="●" />
        <PgRow label="Branded PDF · custom templates" a="○" b="●" c="●" />
        <PgRow label="Artifact-backed local Product API" a="○" b="●" c="●" />
        <PgRow label="Manual review status workflow" a="○" b="●" c="●" />
        <PgRow label="Underwriter handoff package" a="○" b="●" c="●" />
        <PgRow label="Custom jurisdiction extractors" a="○" b="○" c="●" />
        <PgRow label="Future deployment planning" a="○" b="○" c="●" />
        <PgRow label="Audit export planning" a="○" b="○" c="●" />
        <PgRow label="Dedicated success lead" a="○" b="○" c="●" last />
      </div>
    </section>

    {/* ROI calculator (illustrative, static) */}
    <section style={{ padding: '88px 56px', borderBottom: '1px solid var(--rule)', background: 'var(--paper-2)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'flex-start' }}>
        <div>
          <div className="meta" style={{ marginBottom: 16 }}>§ 04 — THE MATH</div>
          <h2 style={{
            fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 48,
            letterSpacing: '-0.02em', lineHeight: 1.05, margin: '0 0 24px',
          }}>
            A senior examiner<br/>
            costs <em style={{ color: 'var(--accent)' }}>$140 / hour.</em>
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.55, color: 'var(--ink-2)', maxWidth: 480, margin: '0 0 20px' }}>
            A typical first-pass review takes 90 minutes. With TitleVerifi the
            chain, mortgages, and curative are already drafted and cited — the
            examiner reviews and signs. First pass drops to ~14 minutes.
          </p>
          <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--ink-3)', margin: 0, fontStyle: 'italic' }}>
            Numbers below are an illustrative model from a 200-file/mo pilot.
            Yours will differ — request a tailored estimate.
          </p>
        </div>
        <div style={{ background: 'var(--paper)', border: '1px solid var(--rule-strong)' }}>
          <div style={{ padding: '20px 24px', borderBottom: '1px solid var(--rule)', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <div>
              <div className="meta">PILOT MODEL · 200 FILES / MO</div>
              <div style={{ fontFamily: 'var(--font-serif)', fontSize: 24, marginTop: 4 }}>Cardinal Title Co. · West region</div>
            </div>
            <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>FY2025-Q4</span>
          </div>
          <RoiRow label="Examiner cost / file (90 min @ $140)"            value="$210.00" />
          <RoiRow label="TitleVerifi · Closer · 100–249 tier"             value="−$36.00" sub />
          <RoiRow label="Reviewed examiner cost (14 min @ $140)"          value="−$32.67" sub />
          <RoiRow label="Net cost / file" value="$141.33" totalA />
          <div style={{ borderTop: '1px solid var(--rule-strong)' }}>
            <RoiRow label="Savings / file"                                  value="$68.67" totalB />
            <RoiRow label="Savings / month · 200 files"                     value="$13,734" totalB />
            <RoiRow label="Throughput uplift"                               value="6.4×" last totalB />
          </div>
        </div>
      </div>
    </section>

    {/* FAQ */}
    <section style={{ padding: '88px 56px', borderBottom: '1px solid var(--rule)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '380px 1fr', gap: 64, alignItems: 'flex-start' }}>
        <div>
          <div className="meta" style={{ marginBottom: 16 }}>§ 05 — QUESTIONS</div>
          <h2 style={{
            fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 44,
            letterSpacing: '-0.02em', lineHeight: 1.05, margin: 0,
          }}>
            Things examiners ask <em style={{ color: 'var(--accent)' }}>before signing.</em>
          </h2>
        </div>
        <div>
          <Faq q="What counts as a 'file'?" a="One property search package. You can re-run it as many times as you want for 30 days. Re-runs are free — they're not new files."/>
          <Faq q="What if the package has 800 pages?" a="On Examiner you'll hit the 250-page cap and we'll prompt you to upgrade or split. Closer goes to 500. Underwriter is unlimited. Page overages on the lower plans are $0.08/page if you'd rather not split."/>
          <Faq q="Do failed extractions count?" a="No. If we can't deliver a report — encrypted PDFs, illegible scans, missing pages — you don't pay for that file. Only completed, signed-off reports are billed."/>
          <Faq q="How does the volume tier reset?" a="Monthly, on the first. There's no retroactive billing — you pay the tier rate for files completed inside that calendar month."/>
          <Faq q="Annual contracts?" a="Closer and Underwriter both offer annual commitments at 12% off the monthly rate. Underwriter is annual-only."/>
          <Faq q="What about state-specific quirks?" a="State readiness is rolling, corpus-backed, and legally reviewed. Pennsylvania package replay is the current strongest evidence base; the target-state program is adding fixtures, report tests, and signoff state by state."/>
          <Faq q="Where does my data live?" a="The current Phase 1 product API is local and filesystem-backed against retained package artifacts. SaaS hosting, tenancy, VPC, webhooks, and live provider integrations are Phase 2 platform work." last/>
        </div>
      </div>
    </section>

    {/* CTA */}
    <section style={{ padding: '96px 56px', borderBottom: '1px solid var(--rule)', background: 'var(--paper-3)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, alignItems: 'center' }}>
        <div>
          <h2 style={{
            fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 56,
            letterSpacing: '-0.02em', lineHeight: 1.05, margin: '0 0 20px',
          }}>
            Run the math on<br/>
            <em style={{ color: 'var(--accent)' }}>your own file.</em>
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--ink-2)', margin: 0, maxWidth: 560 }}>
            Send us a search package you've already closed. We'll generate the
            report, walk you through every citation, and put a quote next to
            the actual examiner-hours it would have replaced.
          </p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <a style={{...pgBtnPrimary, padding: '14px 22px', fontSize: 15}} href="signin.html?return=product.html">Request a tailored quote →</a>
          <a style={pgBtnGhost} href="signin.html?return=product.html">Talk to an examiner-success lead</a>
          <span className="meta" style={{ color: 'var(--ink-3)', marginTop: 4 }}>~ 48H · ALL TIERS</span>
        </div>
      </div>
    </section>

    {/* Footer */}
    <footer style={{ padding: '48px 56px', display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr', gap: 32, fontSize: 13, color: 'var(--ink-3)' }}>
      <div>
        <a href="index.html" aria-label="TitleVerifi home" style={{ display: 'inline-flex', alignItems: 'center', textDecoration: 'none', color: 'inherit' }}>
          <Wordmark size={20} />
        </a>
        <p style={{ marginTop: 16, lineHeight: 1.6, maxWidth: 280 }}>
          AI title intelligence for closing services. Made for examiners.
        </p>
      </div>
      <PgFootCol head="Product" items={['Overview','Report','Pricing','Security','Changelog']} />
      <PgFootCol head="Company" items={['About','Customers','Careers','Press']} />
      <PgFootCol head="Resources" items={['Docs','API','Sample report','Support']} />
      <PgFootCol head="Legal" items={['Terms','Privacy','SOC 2 readiness','Subprocessors']} />
    </footer>
  </div>
  );
};

const pgBtnPrimary = {
  background: 'var(--ink)', color: 'var(--paper)', border: 'none',
  padding: '10px 16px', borderRadius: 'var(--r-2)', fontSize: 14,
  fontFamily: 'inherit', fontWeight: 500, cursor: 'pointer',
  textDecoration: 'none', display: 'inline-flex', alignItems: 'center',
  justifyContent: 'center',
};
const pgBtnGhost = {
  background: 'transparent', color: 'var(--ink)',
  border: '1px solid var(--rule-strong)', padding: '12px 18px',
  borderRadius: 'var(--r-2)', fontSize: 15, fontFamily: 'inherit',
  fontWeight: 500, cursor: 'pointer', textDecoration: 'none',
  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
};
const pgNavLink = {
  color: 'inherit',
  textDecoration: 'none',
  cursor: 'pointer',
};

const Plan = ({ n, name, price, unit, for_, included, excluded, billing, featured }) => (
  <div style={{
    background: 'var(--paper)',
    padding: '36px 28px 32px',
    display: 'flex', flexDirection: 'column',
    minHeight: 720,
    position: 'relative',
    boxShadow: featured ? 'inset 0 0 0 2px var(--accent)' : 'none',
  }}>
    {featured && (
      <span style={{
        position: 'absolute', top: -1, right: 24,
        background: 'var(--accent)', color: 'var(--paper)',
        fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.08em',
        padding: '4px 10px',
      }}>◆ MOST CHOSEN</span>
    )}
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 18 }}>
      <span className="mono" style={{ fontSize: 11, color: 'var(--accent)' }}>§ {n}</span>
      <span className="mono" style={{ fontSize: 10, color: 'var(--ink-3)' }}>{billing === 'monthly' ? 'BUNDLE' : 'PER FILE'}</span>
    </div>
    <h3 style={{ fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 38, letterSpacing: '-0.02em', margin: '0 0 6px', lineHeight: 1 }}>{name}</h3>
    <div style={{ fontSize: 13, color: 'var(--ink-3)', marginBottom: 24 }}>{for_}</div>

    <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 4 }}>
      <span style={{ fontFamily: 'var(--font-serif)', fontSize: 56, lineHeight: 1, letterSpacing: '-0.025em' }}>{price}</span>
      <span style={{ fontSize: 14, color: 'var(--ink-3)' }}>{unit}</span>
    </div>
    <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', marginBottom: 28, paddingBottom: 24, borderBottom: '1px solid var(--rule)' }}>
      {price === 'Custom' ? '→ scoped on a discovery call' : (billing === 'monthly' ? '→ overage at per-file rate' : '→ invoiced monthly · NET-15')}
    </div>

    <div className="meta" style={{ marginBottom: 14 }}>INCLUDED</div>
    <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 24px', display: 'flex', flexDirection: 'column', gap: 10 }}>
      {included.map((it, i) => (
        <li key={i} style={{ display: 'flex', gap: 10, fontSize: 14, lineHeight: 1.4, color: it.em ? 'var(--ink)' : 'var(--ink-2)', fontWeight: it.em ? 500 : 400 }}>
          <span style={{ color: 'var(--accent)', fontFamily: 'var(--font-mono)', flexShrink: 0 }}>●</span>
          <span>{it.t}</span>
        </li>
      ))}
    </ul>

    {excluded.length > 0 && (
      <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 28px', display: 'flex', flexDirection: 'column', gap: 8 }}>
        {excluded.map((t, i) => (
          <li key={i} style={{ display: 'flex', gap: 10, fontSize: 13, color: 'var(--ink-4)', textDecoration: 'line-through', textDecorationColor: 'var(--rule-strong)' }}>
            <span style={{ fontFamily: 'var(--font-mono)', flexShrink: 0, textDecoration: 'none' }}>○</span>
            <span>{t}</span>
          </li>
        ))}
      </ul>
    )}

    <div style={{ marginTop: 'auto' }}>
      <a href="signin.html?return=product.html" style={{
        ...(featured ? pgBtnPrimary : pgBtnGhost),
        width: '100%', padding: '14px 18px', fontSize: 14,
      }}>
        {price === 'Custom' ? 'Talk to sales →' : 'Request access →'}
      </a>
    </div>
  </div>
);

const Footnote = ({ n, children }) => (
  <p style={{ margin: 0, lineHeight: 1.55, fontSize: 12 }}>
    <span className="mono" style={{ color: 'var(--accent)', marginRight: 4 }}>{n}</span>
    {children}
  </p>
);

const VolHead = () => (
  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '1px solid var(--rule-strong)', background: 'var(--paper-2)' }}>
    <PgTh>Files / month</PgTh>
    <PgTh>Examiner</PgTh>
    <PgTh accent>Closer</PgTh>
    <PgTh>Underwriter</PgTh>
  </div>
);

const VolRow = ({ tier, base, closer, under, first, last, highlight }) => (
  <div style={{
    display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr',
    borderBottom: last ? 'none' : '1px solid var(--rule)',
    background: highlight ? 'var(--paper-2)' : 'transparent',
  }}>
    <div style={{ padding: '14px 18px', fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--ink)' }}>{tier}</div>
    <div style={{ padding: '14px 18px', fontSize: 14, color: base === '—' ? 'var(--ink-4)' : 'var(--ink-2)' }}>{base}</div>
    <div style={{ padding: '14px 18px', fontSize: 14, fontWeight: 500, color: closer === '—' ? 'var(--ink-4)' : 'var(--accent)' }}>{closer}</div>
    <div style={{ padding: '14px 18px', fontSize: 14, color: under === '—' ? 'var(--ink-4)' : 'var(--ink-2)', fontStyle: under === 'Custom' ? 'italic' : 'normal' }}>{under}</div>
  </div>
);

const PgTh = ({ children, accent }) => (
  <div style={{ padding: '14px 18px', fontSize: 12, fontFamily: 'var(--font-mono)', color: accent ? 'var(--accent)' : 'var(--ink-3)', letterSpacing: '0.04em' }}>{children}</div>
);
const PgRow = ({ label, a, b, c, last }) => (
  <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', borderBottom: last ? 'none' : '1px solid var(--rule)' }}>
    <div style={{ padding: '14px 18px', fontSize: 14 }}>{label}</div>
    <div style={{ padding: '14px 18px', fontSize: 16, color: a === '●' ? 'var(--ink)' : 'var(--ink-4)' }}>{a}</div>
    <div style={{ padding: '14px 18px', fontSize: 16, color: b === '●' ? 'var(--accent)' : 'var(--ink-4)' }}>{b}</div>
    <div style={{ padding: '14px 18px', fontSize: 16, color: c === '●' ? 'var(--ink)' : 'var(--ink-4)' }}>{c}</div>
  </div>
);

const RoiRow = ({ label, value, sub, totalA, totalB, last }) => (
  <div style={{
    display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
    padding: '14px 24px',
    borderBottom: last ? 'none' : '1px solid var(--rule)',
    background: totalA ? 'var(--paper-2)' : 'transparent',
  }}>
    <span style={{
      fontSize: totalA || totalB ? 14 : 13,
      color: sub ? 'var(--ink-3)' : 'var(--ink-2)',
      fontWeight: totalA || totalB ? 500 : 400,
    }}>{label}</span>
    <span style={{
      fontFamily: totalA || totalB ? 'var(--font-serif)' : 'var(--font-mono)',
      fontSize: totalA ? 22 : (totalB ? 24 : 13),
      color: totalB ? 'var(--accent)' : (sub ? 'var(--ink-3)' : 'var(--ink)'),
      fontWeight: totalA ? 500 : 400,
      letterSpacing: totalA || totalB ? '-0.01em' : 0,
    }}>{value}</span>
  </div>
);

const Faq = ({ q, a, last }) => (
  <div style={{ padding: '20px 0', borderBottom: last ? 'none' : '1px solid var(--rule)' }}>
    <h4 style={{
      fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 22,
      letterSpacing: '-0.015em', margin: '0 0 8px',
    }}>{q}</h4>
    <p style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--ink-2)', margin: 0, maxWidth: 720 }}>{a}</p>
  </div>
);

const PgFootCol = ({ head, items }) => (
  <div>
    <div className="meta" style={{ marginBottom: 12 }}>{head.toUpperCase()}</div>
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      {items.map(i => <a key={i} style={{ color: 'inherit', textDecoration: 'none' }} href={pricingFooterHref(i)}>{i}</a>)}
    </div>
  </div>
);

const pricingFooterHref = (label) => {
  const key = label.toLowerCase();
  if (key.includes('overview')) return 'index.html';
  if (key.includes('report')) return 'signin.html?return=product.html';
  if (key.includes('pricing')) return 'pricing.html';
  if (key.includes('security')) return 'security.html';
  if (key.includes('changelog')) return 'changelog.html';
  if (key.includes('about')) return 'about.html';
  if (key.includes('support')) return 'support.html';
  if (key.includes('terms')) return 'terms.html';
  if (key.includes('privacy')) return 'privacy.html';
  if (key.includes('docs')) return 'index.html#docs';
  if (key.includes('api') || key.includes('sample')) return 'signin.html?return=product.html';
  if (key.includes('customers')) return 'index.html#customers';
  // TODO: stub pages for Careers, Press, SOC 2 readiness, Subprocessors
  return 'index.html#docs';
};

window.Pricing = Pricing;