// Verification-first sections — Products / Method / Trust
const { useState: _uS, useEffect: _uE, useRef: _uR } = React;

// ============================== PRODUCTS (flagship) ==============================
function Products({ t }) {
  const [ref, seen] = window.useReveal();
  const p = t.products;
  return (
    <section id="verified" ref={ref} style={{ padding: '7vh 28px 0', position: 'relative', borderBottom: '1px solid var(--line)' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', position: 'relative' }}>
        <SectionEyebrow num="01" label={p.eyebrow} />
        <div className="products-head" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'end', marginBottom: 6 }}>
          <h2 className={`reveal ${seen ? 'in' : ''}`} style={{ fontSize: 'clamp(26px, 2.9vw, 40px)', letterSpacing: '-.03em', lineHeight: 1.38, margin: 0, whiteSpace: 'pre-line' }}>
            <em>{p.titleAccent}</em>{p.titleRest}
          </h2>
          <p className={`reveal ${seen ? 'in' : ''}`} style={{ transitionDelay: '90ms', margin: 0, fontSize: 14.5, color: 'var(--fg-2)', lineHeight: 1.8, paddingBottom: 8, whiteSpace: 'pre-line' }}>{p.sub}</p>
        </div>

        <div className="products-grid" style={{ marginTop: 42, display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 18 }}>
          {p.items.map((it, i) => <ProductPanel key={it.id} it={it} i={i} seen={seen} last={i === p.items.length - 1} />)}
        </div>

        <div className={`reveal ${seen ? 'in' : ''}`} style={{ transitionDelay: '240ms', marginTop: 18, padding: '18px 24px', background: 'var(--surface-2)', border: '1px solid var(--line)', display: 'flex', alignItems: 'center', gap: 12, fontSize: 13.5, color: 'var(--fg-2)', lineHeight: 1.55 }}>
          <span style={{ width: 14, height: 2, background: 'var(--accent)', flexShrink: 0 }}></span>
          <span>{p.note}</span>
        </div>
      </div>
    </section>);
}

function ProductPanel({ it, i, seen, last }) {
  const [hover, setHover] = _uS(false);
  return (
    <div id={it.id}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      className={`reveal ${seen ? 'in' : ''} product-card`}
      style={{
        transitionDelay: `${i * 100}ms`, position: 'relative',
        padding: '38px 32px 30px', display: 'flex', flexDirection: 'column',
        background: 'var(--surface)',
        border: '1px solid var(--line)',
        borderTop: `2px solid ${hover ? 'var(--accent)' : 'var(--navy)'}`,
        transform: hover ? 'translateY(-3px)' : 'none',
        boxShadow: hover ? '0 18px 40px -26px rgba(11,26,54,.34)' : 'none',
        transitionProperty: 'opacity, transform, border-color, box-shadow', transitionDuration: '.35s'
      }}>

      {/* badge + name */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 18, marginBottom: 26 }}>
        <img src={it.mark} alt="" style={{ width: 74, height: 74, objectFit: 'contain', flexShrink: 0 }} />
        <div style={{ minWidth: 0 }}>
          <div style={{ fontSize: 19, fontWeight: 700, letterSpacing: '-.02em', color: 'var(--fg)' }}>{it.name}</div>
          <div className="mono-ko" style={{ fontSize: 12.5, color: 'var(--fg-2)', marginTop: 5, fontWeight: 500 }}>{it.tagline}</div>
        </div>
      </div>

      <p style={{ margin: 0, fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.85 }}>{it.desc}</p>

      <div style={{ marginTop: 'auto', paddingTop: 26 }}>
        <a href="#contact" aria-label={it.name} style={{
          marginTop: 22, display: 'inline-flex', alignItems: 'center',
          fontSize: 20, color: 'var(--accent)', fontWeight: 400,
          transform: hover ? 'translateX(4px)' : 'none', transition: 'transform .2s'
        }}>→</a>
      </div>
    </div>);
}

function StepIcon({ kind }) {
  const c = 'var(--fg-2)';
  const a = 'var(--accent)';
  const m = {
    intake: <><rect x="5" y="3.5" width="14" height="17" rx="1.6" stroke={c} strokeWidth="1.2" fill="none"/><path d="M12 15V8.6M9.4 11l2.6-2.6L14.6 11" stroke={a} strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/></>,
    chip: <><rect x="6.5" y="6.5" width="11" height="11" rx="1.6" stroke={c} strokeWidth="1.2" fill="none"/><path d="M10.2 10.2h3.6v3.6h-3.6z" stroke={a} strokeWidth="1.3" fill="none"/><path d="M9.5 3.5v3M14.5 3.5v3M9.5 17.5v3M14.5 17.5v3M3.5 9.5h3M3.5 14.5h3M17.5 9.5h3M17.5 14.5h3" stroke={c} strokeWidth="1.1" strokeLinecap="round"/></>,
    expert: <><circle cx="11" cy="8.5" r="3.6" stroke={c} strokeWidth="1.2" fill="none"/><path d="M4.5 20c0-3.3 2.9-6 6.5-6s6.5 2.7 6.5 6" stroke={c} strokeWidth="1.2" fill="none" strokeLinecap="round"/><circle cx="18" cy="15" r="3.4" stroke={a} strokeWidth="1.3" fill="none"/><path d="M20.6 17.6L23 20" stroke={a} strokeWidth="1.3" strokeLinecap="round"/></>,
    report: <><rect x="5" y="3.5" width="14" height="17" rx="1.6" stroke={c} strokeWidth="1.2" fill="none"/><path d="M8.4 8.5h7M8.4 12h7M8.4 15.5h4" stroke={c} strokeWidth="1.1" strokeLinecap="round"/><path d="M14.6 16.4l1.8 1.8 3-3" stroke={a} strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/></>,
    verified: <><circle cx="12" cy="12" r="8.6" stroke={c} strokeWidth="1.2" fill="none"/><path d="M8.2 12.2l2.8 2.8 5.2-5.2" stroke={a} strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/></>
  };
  return <svg viewBox="0 0 24 24" width="24" height="24" fill="none" aria-hidden>{m[kind]}</svg>;
}

// ============================== METHOD (AI + human) ==============================
function Method({ t }) {
  const [ref, seen] = window.useReveal();
  const m = t.method;
  return (
    <section id="method" ref={ref} style={{ padding: '13vh 28px', background: 'var(--bg-2)', borderBottom: '1px solid var(--line)', position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden style={{ position: 'absolute', inset: 0, pointerEvents: 'none', backgroundImage: 'linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px)', backgroundSize: '72px 72px', opacity: .3, maskImage: 'radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 78%)', WebkitMaskImage: 'radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 78%)' }}></div>
      <div style={{ maxWidth: 1320, margin: '0 auto', position: 'relative' }}>
        <SectionEyebrow num="02" label={m.eyebrow} />
        <div className="products-head" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'end' }}>
          <h2 className={`reveal ${seen ? 'in' : ''}`} style={{ fontSize: 'clamp(26px, 2.9vw, 40px)', letterSpacing: '-.03em', lineHeight: 1.38, margin: 0, whiteSpace: 'pre-line' }}>
            <span style={{ color: 'var(--fg)' }}>{m.titleAccent}</span><em>{m.titleRest}</em>
          </h2>
          <p className={`reveal ${seen ? 'in' : ''}`} style={{ transitionDelay: '90ms', margin: 0, fontSize: 14.5, color: 'var(--fg-2)', lineHeight: 1.8, paddingBottom: 8, whiteSpace: 'pre-line' }}>{m.sub}</p>
        </div>

        <div className="method-rail" style={{ marginTop: 54, position: 'relative', display: 'grid', gridTemplateColumns: `repeat(${m.steps.length}, minmax(0, 1fr))`, gap: 0 }}>
          <div aria-hidden className="method-rule" style={{ position: 'absolute', top: 26, left: '10%', right: '10%', height: 1, background: 'var(--line-strong)' }}></div>
          {m.steps.map((st, i) => (
            <div key={st.n} className={`reveal ${seen ? 'in' : ''}`} style={{ transitionDelay: `${i * 90}ms`, position: 'relative', textAlign: 'center', padding: '0 14px' }}>
              <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 20 }}>
                <span style={{ width: 52, height: 52, borderRadius: '50%', background: 'var(--bg)', border: '1px solid var(--line)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                  <StepIcon kind={st.icon} />
                </span>
              </div>
              <div className="mono" style={{ fontSize: 15, fontWeight: 700, color: 'var(--fg)', letterSpacing: '.02em' }}>{st.n}</div>
              <div style={{ fontSize: 14.5, fontWeight: 700, color: 'var(--fg)', marginTop: 10, letterSpacing: '-.01em' }}>{st.k}</div>
              <p style={{ margin: '10px 0 0', fontSize: 12.5, color: 'var(--fg-2)', lineHeight: 1.7 }}>{st.v}</p>
              {i < m.steps.length - 1 && (
                <span aria-hidden className="method-chevron" style={{ position: 'absolute', bottom: -26, right: -8, color: 'var(--fg-3)', fontSize: 13 }}>→</span>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>);
}

// ============================== TRUST (credentials) ==============================
function AwardIcon({ kind }) {
  const w = 'rgba(255,255,255,.92)';
  const a = 'var(--accent)';
  if (kind === 'trophy') return (
    <svg viewBox="0 0 72 72" width="72" height="72" fill="none" aria-hidden>
      <path d="M36 12v6M26 14l-3-6M46 14l3-6" stroke={a} strokeWidth="2.4" strokeLinecap="round"/>
      <path d="M22 22h28v10a14 14 0 0 1-28 0V22Z" stroke={w} strokeWidth="2.4" fill="none"/>
      <path d="M22 25h-5a6 6 0 0 0 6 6M50 25h5a6 6 0 0 1-6 6" stroke={w} strokeWidth="2.4" fill="none"/>
      <path d="M36 46v8M28 58h16" stroke={w} strokeWidth="2.4" strokeLinecap="round"/>
      <path d="M36 26.5l2.3 4.7 5.2.8-3.8 3.6.9 5.1-4.6-2.4-4.6 2.4.9-5.1-3.8-3.6 5.2-.8L36 26.5Z" fill={a}/>
    </svg>);
  if (kind === 'ai') return (
    <svg viewBox="0 0 72 72" width="72" height="72" fill="none" aria-hidden>
      <rect x="22" y="22" width="28" height="28" rx="6" stroke={w} strokeWidth="2.4" fill="none"/>
      <path d="M30 22v-5M42 22v-5M30 55v-5M42 55v-5M22 30h-5M22 42h-5M55 30h-5M55 42h-5" stroke={w} strokeWidth="2.2" strokeLinecap="round"/>
      <path d="M31 45l5-16 5 16M32.7 39.6h6.6" stroke={a} strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>);
  if (kind === 'rocket') return (
    <svg viewBox="0 0 72 72" width="72" height="72" fill="none" aria-hidden>
      <path d="M36 11c8 4.5 12.5 12.5 12.5 23l-3.5 5.5H27L23.5 34c0-10.5 4.5-18.5 12.5-23Z" stroke={w} strokeWidth="2.4" fill="none"/>
      <circle cx="36" cy="29" r="4.2" stroke={a} strokeWidth="2.4" fill="none"/>
      <path d="M27 40l-6.5 4.5 2.5-9M45 40l6.5 4.5-2.5-9" stroke={w} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
      <path d="M32 45l4 12 4-12" stroke={a} strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>);
  if (kind === 'medal') return (
    <svg viewBox="0 0 72 72" width="72" height="72" fill="none" aria-hidden>
      <path d="M27 12l-8 2 6.5 18M45 12l8 2-6.5 18" stroke={w} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
      <circle cx="36" cy="43" r="14" stroke={w} strokeWidth="2.4" fill="none"/>
      <path d="M36 35l2.4 4.9 5.4.8-3.9 3.8.9 5.4-4.8-2.5-4.8 2.5.9-5.4-3.9-3.8 5.4-.8L36 35Z" fill={a}/>
    </svg>);
  return (
    <svg viewBox="0 0 72 72" width="72" height="72" fill="none" aria-hidden>
      <path d="M22 26h28a12 12 0 0 1 11.6 15l-1.6 6a7 7 0 0 1-12.4 2.4L44 44H28l-3.6 5.4A7 7 0 0 1 12 47l-1.6-6A12 12 0 0 1 22 26Z" stroke={w} strokeWidth="2.4" fill="none"/>
      <path d="M24 33v8M20 37h8" stroke={a} strokeWidth="2.6" strokeLinecap="round"/>
      <circle cx="48" cy="34" r="1.9" fill={w}/><circle cx="54" cy="40" r="1.9" fill={w}/><circle cx="42" cy="40" r="1.9" fill={w}/>
    </svg>);
}

function CredIcon({ kind }) {
  const n = 'var(--navy)';
  const a = 'var(--accent)';
  const m = {
    shield: <><path d="M18 5l11 4.6v8.6c0 6.7-4.6 12.4-11 14.2-6.4-1.8-11-7.5-11-14.2V9.6L18 5Z" stroke={n} strokeWidth="1.5" fill="none"/><path d="M13 18.2l3.6 3.6L24 14.4" stroke={a} strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></>,
    check: <><circle cx="18" cy="18" r="12.4" stroke={n} strokeWidth="1.5" fill="none"/><path d="M12.4 18.6l4 4L25 13.6" stroke={a} strokeWidth="2.2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></>,
    people: <><circle cx="14" cy="12.5" r="4.4" stroke={n} strokeWidth="1.5" fill="none"/><path d="M5.6 29c.6-4.6 4.1-7.4 8.4-7.4s7.8 2.8 8.4 7.4" stroke={n} strokeWidth="1.5" fill="none" strokeLinecap="round"/><circle cx="25.6" cy="15" r="3.4" stroke={a} strokeWidth="1.6" fill="none"/><path d="M20.6 29c.4-3.4 2.6-5.6 5-5.6s4.6 2.2 5 5.6" stroke={a} strokeWidth="1.6" fill="none" strokeLinecap="round"/></>,
    doc: <><path d="M9 4.5h12l6 6v21H9v-27Z" stroke={n} strokeWidth="1.5" fill="none"/><path d="M20.5 4.5v6.6h6.4" stroke={n} strokeWidth="1.5" fill="none"/><ellipse cx="23" cy="24" rx="5.4" ry="2.2" stroke={a} strokeWidth="1.6" fill="none"/><path d="M17.6 24v4.4c0 1.2 2.4 2.2 5.4 2.2s5.4-1 5.4-2.2V24" stroke={a} strokeWidth="1.6" fill="none"/></>
  };
  return <svg viewBox="0 0 36 36" width="34" height="34" fill="none" aria-hidden>{m[kind]}</svg>;
}

function AwardCardBox({ aw, i, seen }) {
  return (
    <div className={`reveal ${seen ? 'in' : ''} award-card`} style={{
      transitionDelay: `${i * 90}ms`, display: 'grid', gridTemplateColumns: '148px 1fr',
      background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 14,
      overflow: 'hidden', boxShadow: '0 16px 40px -30px rgba(11,26,54,.32)'
    }}>
      <div className="award-cap" style={{ background: 'var(--navy)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '20px 0' }}>
        <AwardIcon kind={aw.icon} />
      </div>
      <div style={{ padding: '18px 26px 20px' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14 }}>
          <span className="mono" style={{ fontSize: 11.5, fontWeight: 700, letterSpacing: '.16em', color: 'var(--accent)' }}>{aw.kind}</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, border: '1px solid var(--line)', borderRadius: 999, padding: '5px 12px' }}>
            <span style={{ width: 5, height: 5, borderRadius: 999, background: 'var(--accent)' }}></span>
            <span className="mono" style={{ fontSize: 12, color: 'var(--fg-2)', fontWeight: 600 }}>{aw.year}</span>
          </span>
        </div>
        <div style={{ fontSize: 'clamp(16px, 1.4vw, 20px)', fontWeight: 700, letterSpacing: '-.025em', lineHeight: 1.35, color: 'var(--navy)', marginTop: 10, whiteSpace: 'pre-line' }}>{aw.title}</div>
        <p style={{ margin: '9px 0 0', fontSize: 13, color: 'var(--fg-2)', lineHeight: 1.55, whiteSpace: 'pre-line' }}>{aw.desc}</p>
      </div>
    </div>);
}

function Trust({ t }) {
  const [ref, seen] = window.useReveal();
  const tr = t.trust;
  return (
    <section id="trust" ref={ref} style={{ padding: '13vh 28px', position: 'relative', borderBottom: '1px solid var(--line)' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <SectionEyebrow num="03" label={tr.eyebrow} />
        <div className="trust-head" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'start', marginBottom: 46 }}>
          <div>
            <h2 className={`reveal ${seen ? 'in' : ''}`} style={{
              fontSize: 'clamp(32px, 4vw, 56px)', letterSpacing: '-.04em', lineHeight: 1.08,
              fontWeight: 700, margin: 0, fontFamily: 'var(--font-sans)'
            }}>
              <span style={{ color: 'var(--accent)' }}>{tr.titleAccent}</span>
              <span style={{ color: 'var(--navy)' }}>{tr.titleRest}</span>
            </h2>
            <div className={`reveal ${seen ? 'in' : ''}`} style={{ transitionDelay: '70ms', width: 40, height: 3, background: 'var(--accent)', marginTop: 24 }}></div>
          </div>
          <p className={`reveal ${seen ? 'in' : ''}`} style={{ transitionDelay: '90ms', margin: 0, fontSize: 14.5, color: 'var(--fg-2)', lineHeight: 1.95, whiteSpace: 'pre-line', paddingTop: 10 }}>{tr.sub}</p>
        </div>

        {/* confirmed awards — 2 wide on top */}
        <div className="trust-awards" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(420px, 1fr))', gap: 22 }}>
          {tr.awards.map((aw, i) => <AwardCardBox key={aw.title} aw={aw} i={i} seen={seen} />)}
        </div>

        {/* in-progress / finalist — row of 3 below */}
        {tr.awardsSub && tr.awardsSub.length > 0 && (
          <>
            {tr.awardsSubTitle && (
              <div className={`reveal ${seen ? 'in' : ''} mono`} style={{ transitionDelay: '120ms', margin: '26px 0 12px', fontSize: 10.5, letterSpacing: '.2em', color: 'var(--fg-3)', fontWeight: 600, display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ width: 5, height: 5, borderRadius: 999, background: 'var(--accent)', flexShrink: 0 }}></span>
                {tr.awardsSubTitle}
              </div>
            )}
            <div className="trust-awards" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 22, marginTop: 22 }}>
              {tr.awardsSub.map((aw, i) => <AwardCardBox key={aw.title} aw={aw} i={i} seen={seen} />)}
            </div>
          </>
        )}

        {/* research lab — KOITA-certified institute */}
        {tr.lab && (
          <div className={`reveal ${seen ? 'in' : ''}`} style={{
            transitionDelay: '150ms', marginTop: 22, display: 'flex', alignItems: 'center', gap: 22, flexWrap: 'wrap',
            padding: '24px 28px', border: '1px solid var(--line)', borderRadius: 14, background: 'var(--surface)',
            borderLeft: '3px solid var(--accent)'
          }}>
            <span style={{ width: 54, height: 54, borderRadius: '50%', background: 'var(--bg-2)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }} aria-hidden>
              <svg viewBox="0 0 36 36" width="30" height="30" fill="none">
                <path d="M18 5l12 6H6l12-6Z" stroke="var(--navy)" strokeWidth="1.5" strokeLinejoin="round"/>
                <path d="M9 13v13M15 13v13M21 13v13M27 13v13" stroke="var(--navy)" strokeWidth="1.5" strokeLinecap="round"/>
                <path d="M6 30h24" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round"/>
              </svg>
            </span>
            <div style={{ flex: 1, minWidth: 220 }}>
              <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--navy)', letterSpacing: '-.01em' }}>{tr.lab.name}</div>
              <div style={{ fontSize: 13.5, color: 'var(--fg-2)', marginTop: 4, lineHeight: 1.5 }}>{tr.lab.desc}</div>
              <div className="mono" style={{ fontSize: 12, color: 'var(--fg-3)', marginTop: 8, letterSpacing: '.02em' }}>{tr.lab.meta}</div>
            </div>
            <a href={tr.lab.href} target="_blank" rel="noopener noreferrer" style={{
              flexShrink: 0, display: 'inline-flex', alignItems: 'center', gap: 8, padding: '11px 20px',
              border: '1px solid var(--line-strong)', borderRadius: 3, fontSize: 13.5, fontWeight: 600, color: 'var(--navy)',
              transition: 'border-color .2s, color .2s'
            }}
            onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--accent)'; e.currentTarget.style.color = 'var(--accent)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--line-strong)'; e.currentTarget.style.color = 'var(--navy)'; }}>
              {tr.lab.cta} <span className="mono" style={{ fontSize: 11 }}>↗</span>
            </a>
          </div>
        )}

        {/* credentials + logo wall */}
        <div className={`reveal ${seen ? 'in' : ''}`} style={{ transitionDelay: '200ms', marginTop: 22, border: '1px solid var(--line)', borderRadius: 14, background: 'var(--surface)' }}>
          <div className="trust-creds" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))' }}>
            {tr.creds.map((cd, i) => (
              <div key={cd.k} style={{ display: 'flex', gap: 16, padding: '30px 26px', borderLeft: i === 0 ? 'none' : '1px solid var(--line)' }}>
                <span style={{ width: 54, height: 54, borderRadius: '50%', background: 'var(--bg-2)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <CredIcon kind={cd.icon} />
                </span>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--navy)', letterSpacing: '-.01em', lineHeight: 1.4 }}>{cd.k}</div>
                  <p style={{ margin: '9px 0 0', fontSize: 12.5, color: 'var(--fg-2)', lineHeight: 1.7, whiteSpace: 'pre-line' }}>{cd.v}</p>
                </div>
              </div>
            ))}
          </div>
          {tr.logosTitle && (
            <div style={{ borderTop: '1px solid var(--line)', padding: '16px 26px 0' }}>
              <span className="mono" style={{ fontSize: 10.5, letterSpacing: '.2em', color: 'var(--fg-3)', fontWeight: 600 }}>{tr.logosTitle}</span>
            </div>
          )}
          <div className="trust-logos" style={{ display: 'grid', gridTemplateColumns: `repeat(${tr.logos.length}, minmax(0, 1fr))`, alignItems: 'center' }}>
            {tr.logos.map((lg, i) => (
              <div key={lg.alt} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '22px 14px', borderLeft: i === 0 ? 'none' : '1px solid var(--line)', minHeight: 128 }}>
                <img src={lg.src} alt={lg.alt} decoding="async" style={{ height: lg.h, width: 'auto', maxWidth: '100%', objectFit: 'contain' }} />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>);
}

Object.assign(window, { Products, Method, Trust });