// pages-marketing.jsx — Home, Insurify product, Access, About, Contact

// ─── HOME ────────────────────────────────────────────────────────────────────
// Re-imagined home applying guiding principles from peer enterprise-healthcare sites:
//   · inline email capture in the hero (friction-free conversion)
//   · audience-segmented switcher (this is for you)
//   · numbered, capitalized 3-act platform narrative (DOCUMENT → AUTHORIZE → COLLECT)
//   · positively-framed business case with outcome-first metrics
//   · named customer spotlight with supporting pilot stats

function HomePage({ go }) {
  return (
    <div data-screen-label="01 Home">
      <HomeHero go={go} />
      <HomeComparison />
      <SpecialtyRollout go={go} variant="table" />
      <HomeAudienceSwitch go={go} />
      <HomePlatformActs />
      <HomeOutcomes />
      <PlatformFlow />
      <HomeSolutionsScroller go={go} />
      <HomeCustomerSpotlight />
      <HomeSecurityBand go={go} />
      <HomeSplitCTA go={go} />
    </div>);

}

// ── Hero ─────────────────────────────────────────────────────────────────────
function HomeHero({ go }) {
  const heroRef = React.useRef(null);
  const mockRef = React.useRef(null);
  const rafId = React.useRef(0);
  const reduceMotion = React.useRef(false);

  React.useEffect(() => {
    reduceMotion.current = window.matchMedia &&
      window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    return () => cancelAnimationFrame(rafId.current);
  }, []);

  // Cursor-following emerald spotlight over the dark field
  const onHeroMove = (e) => {
    if (reduceMotion.current) return;
    const el = heroRef.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    const x = e.clientX - r.left, y = e.clientY - r.top;
    cancelAnimationFrame(rafId.current);
    rafId.current = requestAnimationFrame(() => {
      el.style.setProperty('--hx', x + 'px');
      el.style.setProperty('--hy', y + 'px');
      el.style.setProperty('--spot', '1');
    });
  };
  const onHeroLeave = () => {
    const el = heroRef.current;
    if (el) el.style.setProperty('--spot', '0');
  };

  // Subtle 3D tilt on the product mock
  const onMockMove = (e) => {
    if (reduceMotion.current) return;
    const el = mockRef.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    const px = (e.clientX - r.left) / r.width - 0.5;
    const py = (e.clientY - r.top) / r.height - 0.5;
    el.style.transform =
      'rotateX(' + (-py * 2.2).toFixed(2) + 'deg) rotateY(' + (px * 2.2).toFixed(2) + 'deg)';
  };
  const onMockLeave = () => {
    const el = mockRef.current;
    if (el) el.style.transform = '';
  };

  return (
    <section className="emerald-field" ref={heroRef}
    onMouseMove={onHeroMove} onMouseLeave={onHeroLeave}
    style={{
      position: 'relative', overflow: 'hidden',
      paddingTop: 52, paddingBottom: 0
    }}>
      <style>{`
        @media (prefers-reduced-motion: no-preference) {
          .hero-rise {
            opacity: 0; transform: translateY(16px);
            animation: heroRise .85s cubic-bezier(.2,.7,.2,1) forwards;
          }
          .hero-rise-1 { animation-delay: .05s; }
          .hero-rise-2 { animation-delay: .18s; }
          .hero-rise-3 { animation-delay: .30s; }
          .hero-rise-4 { animation-delay: .42s; }
          .hero-rise-5 { animation-delay: .50s; animation-duration: 1s; }
          @keyframes heroRise { to { opacity: 1; transform: translateY(0); } }

          /* "by physicians" draws itself in — left-to-right reveal wipe */
          .hero-script-reveal {
            clip-path: inset(0 100% 0 0);
            animation: heroScriptDraw 1.7s cubic-bezier(.45,.05,.35,1) .85s forwards;
          }
          @keyframes heroScriptDraw { to { clip-path: inset(0 0 0 0); } }

          /* —— ambient, video-like motion (continuous, slow, self-playing) —— */
          .hero-aurora { animation: heroAurora 22s ease-in-out infinite alternate; }
          .hero-aurora-2 { animation: heroAurora2 30s ease-in-out infinite alternate; }
          @keyframes heroAurora {
            from { transform: translate3d(-5%, -2%, 0) scale(1); }
            to   { transform: translate3d(9%, 7%, 0) scale(1.2); }
          }
          @keyframes heroAurora2 {
            from { transform: translate3d(7%, 5%, 0) scale(1.12); }
            to   { transform: translate3d(-9%, -5%, 0) scale(0.94); }
          }
          .hero-grid-pan { animation: heroGridPan 80s linear infinite; }
          @keyframes heroGridPan {
            from { background-position: 0 0, 0 0; }
            to   { background-position: -420px -420px, -420px -420px; }
          }
          .hero-glow-pulse { animation: heroGlowPulse 9s ease-in-out infinite alternate; }
          @keyframes heroGlowPulse {
            from { opacity: .7;  transform: translateX(-50%) scale(1); }
            to   { opacity: 1;   transform: translateX(-50%) scale(1.14); }
          }
          .hero-mock-float { animation: heroMockFloat 11s ease-in-out 1.8s infinite; }
          @keyframes heroMockFloat {
            0%, 100% { transform: translateY(0); }
            50%      { transform: translateY(-9px); }
          }
          .hero-script-glow { animation: heroScriptGlow 7s ease-in-out 3s infinite; }
          @keyframes heroScriptGlow {
            0%, 100% { filter: drop-shadow(0 0 0px rgba(95,211,154,0)); }
            50%      { filter: drop-shadow(0 0 7px rgba(95,211,154,0.5)); }
          }
        }
        .hero-spotlight {
          position: absolute; inset: 0; pointer-events: none;
          opacity: var(--spot, 0);
          transition: opacity .5s ease;
          background: radial-gradient(460px circle at var(--hx, 50%) var(--hy, 240px),
            rgba(120,232,172,0.13), transparent 65%);
          mix-blend-mode: screen;
        }
        .hero-cta-row .btn { transition: background .15s ease, border-color .15s ease, transform .2s ease, box-shadow .2s ease; }
        .hero-cta-row .btn:hover { transform: translateY(-1.5px); }
        .hero-cta-row .btn:active { transform: translateY(0); }
        .hero-mock-tilt {
          transition: transform .3s cubic-bezier(.2,.7,.2,1);
          transform-style: preserve-3d;
          will-change: transform;
        }
      `}</style>

      {/* drifting aurora light — gives the field continuous, video-like life */}
      <div className="hero-aurora" style={{
        position: 'absolute', top: '-12%', left: '-16%', width: '62%', height: '85%',
        background: 'radial-gradient(closest-side, rgba(31,115,80,0.5), transparent 70%)',
        filter: 'blur(60px)', pointerEvents: 'none'
      }} />
      <div className="hero-aurora-2" style={{
        position: 'absolute', bottom: '-22%', right: '-12%', width: '56%', height: '78%',
        background: 'radial-gradient(closest-side, rgba(95,211,154,0.14), transparent 70%)',
        filter: 'blur(70px)', pointerEvents: 'none'
      }} />

      {/* fine grid texture for character */}
      <div className="hero-grid-pan" style={{
        position: 'absolute', inset: 0, opacity: 0.05, pointerEvents: 'none',
        backgroundImage:
        'linear-gradient(rgba(255,255,255,.7) 1px, transparent 1px),' +
        'linear-gradient(90deg, rgba(255,255,255,.7) 1px, transparent 1px)',
        backgroundSize: '42px 42px',
        maskImage: 'radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 80%)',
        WebkitMaskImage: 'radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 80%)'
      }} />
      {/* luminous top glow */}
      <div className="hero-glow-pulse" style={{
        position: 'absolute', top: -240, left: '50%', transform: 'translateX(-50%)',
        width: 1000, height: 560, borderRadius: '50%',
        background: 'radial-gradient(closest-side, rgba(120,232,172,0.20), transparent)',
        pointerEvents: 'none'
      }} />
      {/* cursor-following emerald spotlight */}
      <div className="hero-spotlight" />

      <div className="cmd-container" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ textAlign: 'center', maxWidth: 1080, margin: '0 auto' }}>
          <h1 className="h-display hero-rise hero-rise-1" style={{
            textWrap: 'balance', color: '#fff',
            fontSize: 'clamp(28px, 3.6vw, 44px)',
            lineHeight: 1.05, letterSpacing: '-0.025em', margin: 0, whiteSpace: 'nowrap'
          }}>
            Payer-aware solutions for physicians,{' '}
            <span className="hero-script-glow" style={{
              display: 'inline-block', verticalAlign: '-0.42em',
              marginLeft: '0.18em', height: '1.875em', transform: 'translate(-30px, 23px)'
            }}>
              <span className="hero-script-reveal" style={{ display: 'block', height: '100%' }}>
                <img src="assets/by-physicians-cutout2.png" alt="by physicians"
                  className="hero-script-img"
                  style={{ display: 'block', height: '100%', width: 'auto' }} />
              </span>
            </span>
          </h1>
          <p className="hero-rise hero-rise-2" style={{
            fontSize: 21, color: 'rgba(255,255,255,0.78)', lineHeight: 1.55,
            maxWidth: 64 + 'ch', margin: '20px auto 0', fontWeight: 400
          }}>
            One platform addressing the most pressing physician, practice, and enterprise needs across
            documentation, authorization, and reimbursement.
          </p>

          <div className="hero-rise hero-rise-3 hero-cta-row" style={{
            marginTop: 26, display: 'flex', gap: 12, justifyContent: 'center',
            flexWrap: 'wrap'
          }}>
            <button className="btn btn-lg btn-arrow"
            style={{ background: '#fff', color: 'var(--accent-ink)' }}
            onClick={() => go('access')}>
              Get Insurify free <ArrowRight />
            </button>
            <button className="btn btn-lg"
            style={{
              background: 'rgba(255,255,255,0.08)', color: '#fff',
              border: '1px solid rgba(255,255,255,0.28)'
            }}
            onClick={() => go('access')}>
              Request a platform demo
            </button>
          </div>

          <a href="#" onClick={(e) => {e.preventDefault();go('insurify');}}
          className="hero-rise hero-rise-4"
          style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '6px 14px', borderRadius: 999,
            background: 'rgba(255,255,255,0.07)', color: 'rgba(255,255,255,0.92)',
            border: '1px solid rgba(255,255,255,0.16)', fontSize: 13, fontWeight: 500,
            marginTop: 22, letterSpacing: '-0.005em',
            backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)'
          }}>
            <span style={{
              width: 6, height: 6, borderRadius: 999, background: '#5FD39A',
              boxShadow: '0 0 0 3px rgba(95,211,154,0.22)'
            }} />
            Insurify is live in public beta · free for NPI-verified physicians
            <ArrowRight size={11} />
          </a>
        </div>

        <div className="hero-rise hero-rise-5" style={{
          marginTop: 52, position: 'relative',
          maxWidth: 1280, margin: '52px auto 0',
          paddingLeft: 'clamp(0px, 4vw, 80px)',
          paddingRight: 'clamp(0px, 4vw, 80px)',
          paddingBottom: 56,
          perspective: 1400
        }}>
          {/* Soft emerald glow behind mock */}
          <div style={{
            position: 'absolute', inset: '-20px -20px 28px',
            background: 'radial-gradient(60% 50% at 50% 40%, rgba(95,211,154,0.22) 0%, transparent 70%)',
            zIndex: 0, filter: 'blur(14px)', pointerEvents: 'none'
          }} />
          <div className="hero-mock-float">
          <div className="hero-mock-tilt" ref={mockRef}
          onMouseMove={onMockMove} onMouseLeave={onMockLeave}
          style={{
            position: 'relative', zIndex: 1,
            borderRadius: 16,
            boxShadow: '0 40px 90px -30px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06)'
          }}>
            <InsurifyPracticeMock />
            <HeroCallouts />
          </div>
          </div>
        </div>
      </div>
    </section>);

}

// Annotated overlay: three step-labels appear on the mock in sequence, illustrating
// the Insurify workflow as it happens. Loops every 12s. Hidden on narrow viewports.
function HeroCallouts() {
  const STEPS = [
  {
    n: '01',
    title: 'Payer policy detected',
    sub: 'Aetna CPB 0722 attached to the procedure in real time',
    pos: { top: '6%', left: '4%' },
    width: 230,
    anchor: 'tl'
  },
  {
    n: '02',
    title: 'Documentation gaps flagged',
    sub: 'Missing criteria surfaced before the auth goes out',
    pos: { top: '38%', right: '4%' },
    width: 250,
    anchor: 'tr'
  },
  {
    n: '03',
    title: 'Auth packet pre-assembled',
    sub: 'From the criteria already mapped to the chart',
    pos: { bottom: '8%', left: '14%' },
    width: 260,
    anchor: 'bl'
  }];

  return (
    <div className="hero-callouts" aria-hidden="true"
    style={{ position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 4 }}>
      <style>{`
        @keyframes calloutSeq {
          0%   { opacity: 0; transform: translateY(8px) scale(0.97); }
          6%   { opacity: 0; transform: translateY(8px) scale(0.97); }
          12%  { opacity: 1; transform: translateY(0) scale(1); }
          88%  { opacity: 1; transform: translateY(0) scale(1); }
          96%  { opacity: 0; transform: translateY(-4px) scale(1); }
          100% { opacity: 0; transform: translateY(-4px) scale(1); }
        }
        @keyframes calloutSeqMid {
          0%, 28%  { opacity: 0; transform: translateY(8px) scale(0.97); }
          34%, 88% { opacity: 1; transform: translateY(0) scale(1); }
          96%, 100% { opacity: 0; transform: translateY(-4px) scale(1); }
        }
        @keyframes calloutSeqLate {
          0%, 50%  { opacity: 0; transform: translateY(8px) scale(0.97); }
          56%, 88% { opacity: 1; transform: translateY(0) scale(1); }
          96%, 100% { opacity: 0; transform: translateY(-4px) scale(1); }
        }
        @keyframes pinPulse {
          0%, 100% { box-shadow: 0 0 0 0 rgba(31,92,61,0.45); }
          50%      { box-shadow: 0 0 0 8px rgba(31,92,61,0.0); }
        }
        .hero-callout-card {
          position: absolute;
          background: rgba(255,255,255,0.96);
          backdrop-filter: saturate(160%) blur(8px);
          -webkit-backdrop-filter: saturate(160%) blur(8px);
          border: 1px solid var(--line);
          border-radius: 12px;
          padding: 12px 14px 12px 16px;
          box-shadow:
            0 1px 0 rgba(15,20,20,.04),
            0 20px 40px -20px rgba(15,20,20,.22),
            inset 3px 0 0 var(--accent);
          opacity: 0;
          will-change: transform, opacity;
          animation-duration: 12s;
          animation-iteration-count: infinite;
          animation-timing-function: cubic-bezier(.2,.7,.2,1);
        }
        .hero-callout-card-1 { animation-name: calloutSeq; }
        .hero-callout-card-2 { animation-name: calloutSeqMid; }
        .hero-callout-card-3 { animation-name: calloutSeqLate; }

        .hero-callout-num {
          font-family: var(--font-mono);
          font-size: 11px; letter-spacing: .14em;
          color: var(--accent); font-weight: 500;
        }
        .hero-callout-title {
          font-size: 14px; font-weight: 500; color: var(--ink);
          letter-spacing: -0.01em; line-height: 1.3; margin-top: 4px;
        }
        .hero-callout-sub {
          font-size: 12.5px; color: var(--ink-3);
          margin-top: 4px; line-height: 1.4;
        }
        @media (max-width: 900px) {
          .hero-callouts { display: none; }
        }
      `}</style>

      {STEPS.map((s, i) =>
      <div key={i}
      className={'hero-callout-card hero-callout-card-' + (i + 1)}
      style={{
        ...s.pos,
        width: s.width
      }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{
            width: 18, height: 18, borderRadius: 999, background: 'var(--accent)',
            color: '#fff', fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 500,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            flexShrink: 0
          }}>{s.n.slice(1)}</span>
            <span className="hero-callout-num">STEP {s.n}</span>
          </div>
          <div className="hero-callout-title">{s.title}</div>
          <div className="hero-callout-sub">{s.sub}</div>
        </div>
      )}
    </div>);

}

// ── Comparison checklist (CriterionMD vs traditional RCM) ──────────────────
// Paired check/X reveal, row by row, as the section scrolls into view.
function CmpMark({ kind, show, delay }) {
  const good = kind === 'check';
  const base = {
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    width: 34, height: 34, borderRadius: 999,
    background: good ? 'var(--accent-tint)' : '#F7E7E5',
    border: '1px solid ' + (good ? 'var(--accent-tint-2)' : '#EAC9C5'),
    opacity: show ? 1 : 0,
    transform: show ? 'translateY(0) scale(1)' : 'translateY(7px) scale(0.78)',
    transition: 'opacity .42s ease, transform .42s cubic-bezier(.2,.75,.3,1)',
    transitionDelay: (show ? delay : 0) + 'ms',
    willChange: 'opacity, transform'
  };
  return (
    <span style={base} aria-label={good ? 'Yes' : 'No'}>
      {good ? (
        <svg width="17" height="17" viewBox="0 0 16 16" fill="none">
          <path d="M3.5 8.5l3 3 6-7" stroke="var(--accent)" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      ) : (
        <svg width="15" height="15" viewBox="0 0 16 16" fill="none">
          <path d="M4 4l8 8M12 4l-8 8" stroke="var(--danger)" strokeWidth="1.9" strokeLinecap="round"/>
        </svg>
      )}
    </span>
  );
}

function HomeComparison() {
  const ROWS = [
    { cap: 'Reduces prior authorization denials', rcm: true },
    { cap: 'Supports reimbursement and revenue integrity', rcm: true },
    { cap: 'Interprets payer requirements', rcm: true },
    { cap: 'Prevents denials before authorization or claim submission', rcm: false },
    { cap: "Works inside the physician's existing clinical workflow", rcm: false },
    { cap: 'Avoids delays in patient care', rcm: false },
    { cap: 'Avoids additional after-hours physician documentation', rcm: false },
    { cap: 'Converts payer policy into real-time clinical documentation guidance', rcm: false }
  ];
  const ref = React.useRef(null);
  const [inView, setInView] = React.useState(false);
  React.useEffect(() => {
    const reduce = typeof window !== 'undefined' &&
      window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) { setInView(true); return; }
    const el = ref.current;
    if (!el) { setInView(true); return; }
    const check = () => {
      const r = el.getBoundingClientRect();
      if (r.top < (window.innerHeight || 800) * 0.82 && r.bottom > 0) { setInView(true); return true; }
      return false;
    };
    if (check()) return;
    const onScroll = () => { if (check()) cleanup(); };
    const cleanup = () => window.removeEventListener('scroll', onScroll);
    window.addEventListener('scroll', onScroll, { passive: true });
    return cleanup;
  }, []);
  const step = 150;

  return (
    <section className="section section-divider">
      <style>{`
        .cmp-table { display: grid; grid-template-columns: 1fr 210px 230px; }
        .cmp-row { display: contents; }
        .cmp-cell { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
        .cmp-cap { padding: 18px 26px 18px 26px; font-size: 16px; color: var(--ink); font-weight: 450; line-height: 1.35; }
        .cmp-val { justify-content: center; padding: 18px 16px; }
        .cmp-primary { background: var(--accent-tint); }
        .cmp-head .cmp-cell { border-bottom: 1px solid var(--line); }
        .cmp-head .cmp-cap { font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 400; }
        .cmp-head .cmp-val { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
        .cmp-head .cmp-primary { background: var(--accent); color: #fff; border-radius: 12px 12px 0 0; }
        .cmp-row:last-child .cmp-primary { border-radius: 0 0 12px 12px; }
        .cmp-row:last-child .cmp-cell { border-bottom: 0; }
        .cmp-mlabel { display: none; }
        @media (max-width: 760px) {
          .cmp-table { display: flex; flex-direction: column; gap: 12px; }
          .cmp-head { display: none; }
          .cmp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0;
            background: var(--paper); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
          .cmp-cap { grid-column: 1 / -1; padding: 16px 18px 12px; font-size: 15.5px; border-bottom: 1px solid var(--line); }
          .cmp-cell { border-bottom: 0; }
          .cmp-val { flex-direction: column; gap: 8px; padding: 16px; }
          .cmp-primary { background: var(--accent-tint); }
          .cmp-row:last-child .cmp-primary, .cmp-row:last-child .cmp-cell { border-radius: 0; }
          .cmp-mlabel { display: block; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); }
          .cmp-val.cmp-primary .cmp-mlabel { color: var(--accent-ink); }
        }
      `}</style>
      <div className="cmd-container">
        <div style={{ marginBottom: 36 }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>What we do</div>
          <h2 className="h-1" style={{
            fontSize: 'clamp(28px, 3.4vw, 44px)', margin: 0, lineHeight: 1.08
          }}>
            Prevent denials before they become{' '}
            <span style={{ color: 'var(--accent)' }}>revenue cycle problems</span>.
          </h2>
          <p className="lede" style={{ marginTop: 18, fontSize: 18.5, maxWidth: 'none' }}>
            Traditional RCM companies usually respond after documentation gaps, authorization
            issues, or denials already exist. CriterionMD works earlier, at the point of care,
            where medical necessity is documented and denial risk is created.
          </p>
        </div>

        <div ref={ref} className="card" style={{ padding: '8px 8px 0', boxShadow: 'var(--shadow-md)', overflow: 'hidden' }}>
          <div className="cmp-table">
            <div className="cmp-row cmp-head">
              <div className="cmp-cell cmp-cap">Capability</div>
              <div className="cmp-cell cmp-val cmp-primary">
                <img src={(typeof window !== 'undefined' && window.__resources && window.__resources.logoWhite) || 'assets/criterionmd-logo-white.png'}
                     alt="CriterionMD" style={{ height: 30, width: 'auto', objectFit: 'contain' }} />
              </div>
              <div className="cmp-cell cmp-val">Most RCM Companies</div>
            </div>
            {ROWS.map((r, i) => (
              <div className="cmp-row" key={i}>
                <div className="cmp-cell cmp-cap">{r.cap}</div>
                <div className="cmp-cell cmp-val cmp-primary">
                  <span className="cmp-mlabel">CriterionMD</span>
                  <CmpMark kind="check" show={inView} delay={i * step} />
                </div>
                <div className="cmp-cell cmp-val">
                  <span className="cmp-mlabel">Most RCM Cos.</span>
                  <CmpMark kind={r.rcm ? 'check' : 'x'} show={inView} delay={i * step} />
                </div>
              </div>
            ))}
          </div>
        </div>

        <p style={{
          marginTop: 24, marginBottom: 0, fontSize: 'clamp(13px, 1.55vw, 16.5px)', lineHeight: 1.5,
          color: 'var(--ink-2)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'
        }}>
          CriterionMD does not add another layer of administrative work. It moves denial
          prevention upstream, before the revenue cycle problem exists.
        </p>
      </div>
    </section>);

}

// ── Trust bar / logo wall ─────────────────────────────────────────────────
function HomeTrustBar() {
  // Auto-scrolling marquee of clinician/org "logo lockups" — a monogram glyph +
  // org name. The track is duplicated so the loop is seamless; edges fade out.
  const ORGS = [
  { name: 'Insight Health Systems', short: 'IHS', shape: 'square', logo: 'assets/logos/insight.png', logoKey: 'orgInsight' },
  { name: 'UMKC School of Medicine', short: 'UMKC', shape: 'circle', logo: 'assets/logos/umkc.png', logoKey: 'orgUmkc' },
  { name: 'University of Kansas Health', short: 'KU', shape: 'rect', logo: 'assets/logos/ku-health.png', logoKey: 'orgKu' },
  { name: "St Luke's Hospital, Kansas City", short: 'SL', shape: 'pill', logo: 'assets/logos/saint-lukes.png', logoKey: 'orgStLukes' },
  { name: 'College Park Family Care', short: 'CP', shape: 'circle', logo: 'assets/logos/college-park.png', logoKey: 'orgCollegePark' },
  { name: 'Detroit Medical Center', short: 'DMC', shape: 'square', logo: 'assets/logos/dmc.png', logoKey: 'orgDmc' }];

  const loop = [...ORGS, ...ORGS];

  return (
    <section className="section-tight section-divider band-warm">
      <style>{`
        @keyframes clinicianMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
        .clinician-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
        .clinician-track { display: flex; align-items: center; width: max-content; gap: 14px; animation: clinicianMarquee 38s linear infinite; will-change: transform; }
        .clinician-marquee:hover .clinician-track { animation-play-state: paused; }
        @media (prefers-reduced-motion: reduce) { .clinician-track { animation: none; flex-wrap: wrap; justify-content: center; } }
      `}</style>
      <div className="cmd-container">
        <div style={{ textAlign: 'center', marginBottom: 24 }}>
          <span className="eyebrow" style={{ color: 'var(--ink-3)' }}>
            BUILT WITH CLINICIANS AT
          </span>
        </div>
        <div className="clinician-marquee">
          <div className="clinician-track" aria-hidden="false">
            {loop.map((o, i) =>
            <LogoLockup key={i} org={o} />
            )}
          </div>
        </div>
      </div>
    </section>);

}

function LogoLockup({ org }) {
  if (org.logo) {
    const R = (typeof window !== 'undefined' && window.__resources) || {};
    const src = (org.logoKey && R[org.logoKey]) || org.logo;
    return (
      <div style={{
        flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: '0 28px'
      }}>
        <img src={src} alt={org.name} style={{
          height: 56, width: 'auto', objectFit: 'contain',
          opacity: 0.5, filter: 'grayscale(1)'
        }} />
      </div>);
  }
  const radius = org.shape === 'circle' ?
  999 : org.shape === 'pill' ? 999 : org.shape === 'rect' ? 4 : 3;
  const markSize = org.shape === 'pill' ? { w: 38, h: 22 } : { w: 28, h: 28 };
  return (
    <div style={{
      padding: '14px 22px', display: 'flex', alignItems: 'center',
      justifyContent: 'center', gap: 12, minHeight: 60, flexShrink: 0,
      background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 12
    }}>
      <div style={{
        width: markSize.w, height: markSize.h, borderRadius: radius,
        border: '1.5px solid var(--ink-3)',
        color: 'var(--ink-2)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 500,
        letterSpacing: '.04em', flexShrink: 0
      }}>{org.short}</div>
      <div style={{
        fontSize: 14, fontWeight: 500, color: 'var(--ink-2)',
        lineHeight: 1.3, letterSpacing: '-0.005em',
        textAlign: 'left', whiteSpace: 'nowrap'
      }}>{org.name}</div>
    </div>);

}

// ── Specialty rollout list ───────────────────────────────────────────────────
// Shows which procedural specialties Insurify is currently in cohort with and
// which are next on the rollout. Visual pattern adapted from peer practice-
// management sites: a left accent bar + specialty name + status pill, in a
// 3-up grid for the full version, a single inline strip for the compact one.
const SPECIALTY_ROLLOUT = [
{ name: 'Interventional Pain Medicine', status: 'live' },
{ name: 'Orthopedic Surgery', status: 'next' },
{ name: 'Neurosurgery', status: 'next' }];


// Full procedural-specialty roadmap, shown as a table on the home page.
// Status: 'live' = in cohort now, 'next' = launching next, 'roadmap' = planned.
// Edit freely — the table renders whatever is here (sized for 24 / an 8×3 grid).
const SPECIALTIES_ALL = [
{ name: 'Interventional Pain Medicine', status: 'live' },
{ name: 'Orthopedic Surgery', status: 'next' },
{ name: 'Neurosurgery', status: 'next' },
{ name: 'Spine Surgery', status: 'next' },
{ name: 'Sports Medicine', status: 'roadmap' },
{ name: 'Physical Medicine & Rehab', status: 'roadmap' },
{ name: 'Interventional Cardiology', status: 'roadmap' },
{ name: 'Cardiac Electrophysiology', status: 'roadmap' },
{ name: 'Vascular Surgery', status: 'roadmap' },
{ name: 'Gastroenterology', status: 'roadmap' },
{ name: 'Otolaryngology (ENT)', status: 'roadmap' },
{ name: 'Urology', status: 'roadmap' }];


const SPECIALTY_STATUS = {
  live: { tag: 'IN COHORT', dot: 'var(--accent)', tagBg: 'var(--accent-tint)', tagInk: 'var(--accent-ink)', tagBorder: 'var(--accent-tint-2)' },
  next: { tag: 'NEXT', dot: 'var(--accent)', tagBg: 'var(--paper)', tagInk: 'var(--accent)', tagBorder: 'var(--accent-tint-2)' },
  roadmap: { tag: 'ROADMAP', dot: 'var(--ink-4)', tagBg: 'var(--paper-2)', tagInk: 'var(--ink-3)', tagBorder: 'var(--line)' }
};

function SpecialtyRow({ item, dim }) {
  const live = item.status === 'live';
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 14,
      padding: dim ? '8px 0' : '14px 0',
      minWidth: 0
    }}>
      <span style={{
        width: 3, alignSelf: 'stretch',
        background: live ? 'var(--accent)' : 'var(--line)',
        borderRadius: 2, flexShrink: 0
      }} />
      <span style={{
        flex: 1, minWidth: 0,
        fontSize: dim ? 14 : 17,
        fontWeight: 500, letterSpacing: '-0.01em',
        color: live ? 'var(--ink)' : 'var(--ink-3)',
        lineHeight: 1.3
      }}>
        {item.name}
      </span>
      <span style={{
        fontFamily: 'var(--font-mono)',
        fontSize: 10.5, letterSpacing: '.16em', fontWeight: 500,
        padding: '4px 8px', borderRadius: 4, whiteSpace: 'nowrap',
        background: live ? 'var(--accent-tint)' : 'var(--paper-2)',
        color: live ? 'var(--accent-ink)' : 'var(--ink-3)',
        border: '1px solid ' + (live ? 'var(--accent-tint-2)' : 'var(--line)')
      }}>
        {live ? 'IN COHORT NOW' : 'COMING NEXT'}
      </span>
    </div>);

}

function SpecialtyRollout({ go, variant = 'full' }) {
  if (variant === 'table') {
    return (
      <section className="section section-divider">
        <div className="cmd-container">
          <div style={{
            display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
            gap: 24, flexWrap: 'wrap', marginBottom: 24
          }}>
            <div style={{ flex: '1 1 100%' }}>
              <div className="eyebrow" style={{ marginBottom: 12 }}>Specialty rollout</div>
              <h2 className="h-2" style={{
                fontSize: 'clamp(28px, 3.4vw, 44px)', margin: 0,
                letterSpacing: '-0.025em', lineHeight: 1.08
              }}>
                Starting with procedural specialties.<br /><span style={{ color: 'var(--accent)' }}>Built to go everywhere care does.</span>
              </h2>
              <p className="lede" style={{ marginTop: 18, marginBottom: 0, fontSize: 18.5, lineHeight: 1.5, maxWidth: 'none', color: 'var(--ink-2)' }}>
                Live with Interventional Pain Medicine practices today, expanding into in-patient
                and out-patient care, medications, imaging, and beyond.
              </p>
            </div>
            <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', fontSize: 12.5, color: 'var(--ink-3)' }}>
              {[['live', 'In cohort now'], ['next', 'Launching next'], ['roadmap', 'On the roadmap']].map(([k, label]) =>
              <span key={k} style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
                  <span style={{
                  width: 8, height: 8, borderRadius: 999, background: SPECIALTY_STATUS[k].dot,
                  boxShadow: k === 'live' ? '0 0 0 3px rgba(31,92,61,0.18)' : 'none'
                }} />
                  {label}
                </span>
              )}
            </div>
          </div>

          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
            border: '1px solid var(--line)', borderRadius: 14, overflow: 'hidden',
            background: 'var(--paper)'
          }}>
            {SPECIALTIES_ALL.map((s, i) => {
              const st = SPECIALTY_STATUS[s.status] || SPECIALTY_STATUS.roadmap;
              const col = i % 3;
              const row = Math.floor(i / 3);
              const rows = Math.ceil(SPECIALTIES_ALL.length / 3);
              const live = s.status === 'live';
              return (
                <div key={s.name} style={{
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  gap: 10, padding: '13px 16px', minWidth: 0, minHeight: 56,
                  borderRight: col < 2 ? '1px solid var(--line)' : 0,
                  borderBottom: row < rows - 1 ? '1px solid var(--line)' : 0,
                  background: live ? 'var(--accent-tint)' : 'transparent'
                }}>
                  <span style={{ display: 'inline-flex', alignItems: 'flex-start', gap: 10, minWidth: 0 }}>
                    <span style={{
                      width: 7, height: 7, borderRadius: 999, flexShrink: 0, marginTop: 5,
                      background: st.dot,
                      boxShadow: live ? '0 0 0 3px rgba(31,92,61,0.16)' : 'none'
                    }} />
                    <span style={{
                      fontSize: 13.5, fontWeight: 500, letterSpacing: '-0.005em',
                      color: s.status === 'roadmap' ? 'var(--ink-2)' : 'var(--ink)',
                      lineHeight: 1.25
                    }}>{s.name}</span>
                  </span>
                  <span className="mono" style={{
                    fontSize: 9.5, letterSpacing: '.1em', fontWeight: 500, flexShrink: 0,
                    padding: '3px 6px', borderRadius: 4, whiteSpace: 'nowrap',
                    background: st.tagBg, color: st.tagInk, border: '1px solid ' + st.tagBorder
                  }}>{st.tag}</span>
                </div>);

            })}
          </div>

          <p style={{ marginTop: 18, fontSize: 13.5, color: 'var(--ink-3)', lineHeight: 1.5 }}>
            Don't see your specialty?{' '}
            <a href="mailto:development@criterionmd.com"
            style={{ color: 'var(--accent)', borderBottom: '1px solid var(--accent-tint-2)', paddingBottom: 1 }}>
              Tell us what you need built
            </a>{' '}— we prioritize the roadmap with the practices in our cohort.
          </p>
        </div>
      </section>);

  }

  if (variant === 'compact') {
    return (
      <section className="section-tight section-divider">
        <div className="cmd-container">
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            gap: 20, padding: '18px 24px',
            background: 'var(--paper)', border: '1px solid var(--line)',
            borderRadius: 14,
            flexWrap: 'wrap'
          }}>
            <div className="mono" style={{
              fontSize: 11, letterSpacing: '.16em', color: 'var(--ink-3)',
              flexShrink: 0
            }}>SPECIALTY ROLLOUT</div>
            <div style={{
              display: 'flex', flexWrap: 'wrap', gap: 10, flex: 1,
              justifyContent: 'center'
            }}>
              {SPECIALTY_ROLLOUT.map((it) => {
                const live = it.status === 'live';
                return (
                  <span key={it.name} style={{
                    display: 'inline-flex', alignItems: 'center', gap: 8,
                    padding: '6px 12px 6px 10px', borderRadius: 999,
                    background: live ? 'var(--accent-tint)' : 'var(--bg)',
                    border: '1px solid ' + (live ? 'var(--accent-tint-2)' : 'var(--line)'),
                    fontSize: 13, fontWeight: 500,
                    color: live ? 'var(--accent-ink)' : 'var(--ink-2)',
                    whiteSpace: 'nowrap'
                  }}>
                    <span style={{
                      width: 6, height: 6, borderRadius: 999,
                      background: live ? 'var(--accent)' : 'var(--ink-4)',
                      boxShadow: live ? '0 0 0 3px rgba(31,92,61,0.18)' : 'none'
                    }} />
                    {it.name}
                    <span className="mono" style={{
                      fontSize: 10, letterSpacing: '.14em', fontWeight: 500,
                      color: live ? 'var(--accent)' : 'var(--ink-3)',
                      paddingLeft: 4, borderLeft: '1px solid ' + (live ? 'var(--accent-tint-2)' : 'var(--line)')
                    }}>
                      {live ? 'IN COHORT' : 'NEXT'}
                    </span>
                  </span>);

              })}
            </div>
            {go &&
            <a href="#" onClick={(e) => {e.preventDefault();go('insurify');}}
            style={{
              color: 'var(--accent)', fontSize: 13.5, fontWeight: 500,
              display: 'inline-flex', alignItems: 'center', gap: 6,
              borderBottom: '1px solid var(--accent-tint-2)', paddingBottom: 2,
              flexShrink: 0
            }}>
                See the rollout <ArrowRight />
              </a>
            }
          </div>
        </div>
      </section>);

  }

  // Full variant — used on Insurify and Solutions pages
  return (
    <section className="section section-divider">
      <div className="cmd-container">
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 56,
          alignItems: 'start'
        }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 12 }}>Specialty rollout</div>
            <h2 className="h-2" style={{
              fontSize: 'clamp(24px, 2.8vw, 36px)', margin: 0, textWrap: 'balance',
              letterSpacing: '-0.025em'
            }}>
              Starting with procedural specialties.{' '}<span style={{ color: 'var(--accent)' }}>Built to go everywhere care does.</span>
            </h2>
            <p style={{
              marginTop: 16, marginBottom: 0, fontSize: 16, lineHeight: 1.6,
              color: 'var(--ink-2)'
            }}>
              Insurify is currently rolling out with Interventional Pain Medicine practices in our
              design-partner cohort. Procedural specialties come first — then in-patient and
              out-patient care, medications, imaging, and other departments where coverage gets
              in the way.
            </p>
            <a href="mailto:development@criterionmd.com"
            style={{
              display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 18,
              fontSize: 14, fontWeight: 500, color: 'var(--accent)',
              borderBottom: '1px solid var(--accent-tint-2)', paddingBottom: 2
            }}>
              Want your specialty added? Email us <ArrowRight />
            </a>
          </div>
          <div style={{
            background: 'var(--paper)', border: '1px solid var(--line)',
            borderRadius: 14, padding: '14px 28px',
            boxShadow: '0 1px 0 rgba(15,20,20,.03), 0 18px 40px -28px rgba(15,20,20,.10)'
          }}>
            {SPECIALTY_ROLLOUT.map((it, i) =>
            <div key={it.name} style={{
              borderBottom: i < SPECIALTY_ROLLOUT.length - 1 ? '1px solid var(--line-2)' : 0
            }}>
                <SpecialtyRow item={it} />
              </div>
            )}
            <div style={{
              marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--line)',
              fontSize: 13, color: 'var(--ink-3)', lineHeight: 1.5
            }}>
              More procedural specialties on the roadmap, being shaped with our design-partner cohort.
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ── Audience switch ──────────────────────────────────────────────────────────
// Tabs that swap a tailored panel — like Innovaccer's "Health Systems / Primary Care / Payers"
// but framed around procedural-specialty audiences.
function HomeAudienceSwitch({ go }) {
  const [tab, setTab] = React.useState(0);
  const TABS = [
  {
    id: 'physicians',
    label: 'Physicians & APPs',
    headline: 'Spend less time fighting payers, more time with patients.',
    sub: 'Free for individual clinicians. Sign in with your work email and NPI in 90 seconds, and Insurify starts reading every note you write.',
    bullets: [
    'Real-time medical-necessity check as you document',
    'Payer-specific criteria mapped line by line',
    'Documentation gaps surfaced before the auth goes out'],

    products: ['Insurify'],
    cta: 'Start free with NPI',
    ctaRoute: 'access',
    stat: { value: 'Free', label: 'for NPI-verified physicians and APPs' }
  },
  {
    id: 'practices',
    label: 'Practices',
    headline: 'A single board for every auth, every payer, every physician.',
    sub: 'Practice-wide visibility across documentation, authorization, and reimbursement, built around how procedural specialties actually run.',
    bullets: [
    'Practice queue with live SLA, status, and risk flags',
    'Peer-to-peer scheduled in-product, briefing pre-built',
    'Denials clustered by payer, CPT, and physician'],

    products: ['Insurify', '+ practice products in development'],
    cta: 'Scope a practice pilot',
    ctaRoute: 'access',
    stat: { value: '5–11%', label: 'of physician revenue typically recovered' }
  },
  {
    id: 'enterprise',
    label: 'Health systems',
    headline: 'The operating layer between your clinicians and every payer.',
    sub: 'Enterprise rollout across service lines, with audit-grade trails on every authorization and policy revision tied back to the chart.',
    bullets: [
    'Multi-practice deployment with role-based governance',
    'Continuous monitoring of every major payer policy',
    'Reimbursement variance by payer, CPT, and contract'],

    products: ['Insurify', '+ enterprise products in development'],
    cta: 'Talk to the founding team',
    ctaRoute: 'contact',
    stat: { value: '1,000s', label: 'payer-policy revisions monitored per year' }
  }];

  const t = TABS[tab];
  return (
    <section className="section section-divider">
      <div className="cmd-container">
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
          marginBottom: 24, gap: 32, flexWrap: 'wrap'
        }}>
          <div style={{ flex: '1 1 100%' }}>
            <div className="eyebrow" style={{ marginBottom: 12 }}>One platform · three audiences</div>
            <h2 className="h-2" style={{
              fontSize: 'clamp(28px, 3.4vw, 44px)', letterSpacing: '-0.025em', margin: 0,
              lineHeight: 1.08
            }}>
              Whatever your role,{' '}
              <span style={{ color: 'var(--accent)' }}>we meet you where the money leaks.</span>
            </h2>
          </div>
          <div role="tablist" style={{
            display: 'flex', gap: 4, background: 'var(--paper)',
            border: '1px solid var(--line)', borderRadius: 999, padding: 4
          }}>
            {TABS.map((x, i) =>
            <button key={x.id} role="tab" onClick={() => setTab(i)}
            style={{
              appearance: 'none', font: 'inherit', cursor: 'pointer',
              padding: '8px 16px', borderRadius: 999, border: 0,
              background: tab === i ? 'var(--ink)' : 'transparent',
              color: tab === i ? '#fff' : 'var(--ink-2)',
              fontSize: 14, fontWeight: 500, letterSpacing: '-0.005em',
              transition: 'background .2s ease, color .2s ease'
            }}>
                {x.label}
              </button>
            )}
          </div>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 0,
          background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 18,
          overflow: 'hidden',
          boxShadow: '0 1px 0 rgba(15,20,20,.03), 0 28px 60px -32px rgba(15,20,20,.14)'
        }}>
          <div key={t.id} style={{
            padding: '40px 44px',
            animation: 'psPaneIn .45s cubic-bezier(.2,.7,.2,1) both'
          }}>
            <span className="mono" style={{
              fontSize: 12, letterSpacing: '.16em', color: 'var(--ink-3)'
            }}>
              {String(tab + 1).padStart(2, '0')} · {t.label.toUpperCase()}
            </span>
            <h3 style={{
              marginTop: 12, fontSize: 'clamp(22px, 2.1vw, 30px)',
              fontWeight: 500, letterSpacing: '-0.025em', lineHeight: 1.15,
              textWrap: 'balance', color: 'var(--ink)'
            }}>{t.headline}</h3>
            <p style={{
              marginTop: 12, marginBottom: 0, fontSize: 16, lineHeight: 1.55,
              color: 'var(--ink-2)'
            }}>{t.sub}</p>

            <ul style={{
              listStyle: 'none', padding: 0, margin: '20px 0 0',
              display: 'flex', flexDirection: 'column', gap: 10
            }}>
              {t.bullets.map((b, i) =>
              <li key={i} style={{
                display: 'flex', gap: 10, alignItems: 'flex-start',
                fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.5
              }}>
                  <span style={{
                  flexShrink: 0, marginTop: 4,
                  width: 18, height: 18, borderRadius: 999,
                  background: 'var(--accent-tint)', color: 'var(--accent-ink)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center'
                }}><Check size={10} /></span>
                  <span>{b}</span>
                </li>
              )}
            </ul>

            <div style={{ display: 'flex', gap: 6, marginTop: 22, flexWrap: 'wrap' }}>
              {t.products.map((p) =>
              <span key={p} style={{
                fontFamily: 'var(--font-mono)', fontSize: 12,
                letterSpacing: '.04em',
                padding: '4px 10px', borderRadius: 999,
                background: 'var(--bg)', color: 'var(--ink-2)',
                border: '1px solid var(--line)'
              }}>{p}</span>
              )}
            </div>

            <button className="btn btn-lg btn-primary btn-arrow"
            style={{ marginTop: 26 }} onClick={() => go(t.ctaRoute)}>
              {t.cta} <ArrowRight />
            </button>
          </div>

          <div key={'r-' + t.id} style={{
            background: `linear-gradient(165deg, var(--accent) 0%, var(--accent-ink) 100%)`,
            color: '#fff', padding: '40px 44px', position: 'relative', overflow: 'hidden',
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            animation: 'psPaneIn .55s cubic-bezier(.2,.7,.2,1) both'
          }}>
            <div style={{
              position: 'absolute', inset: 0, opacity: 0.07,
              backgroundImage: 'linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px)',
              backgroundSize: '32px 32px', pointerEvents: 'none'
            }} />
            <div style={{
              position: 'absolute', top: -100, right: -100, width: 320, height: 320,
              borderRadius: 999,
              background: 'radial-gradient(closest-side, rgba(255,255,255,.18), transparent)',
              pointerEvents: 'none'
            }} />
            <div style={{ position: 'relative', zIndex: 1 }}>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 12,
                letterSpacing: '.16em', opacity: 0.7
              }}>
                AT A GLANCE
              </div>
              <div style={{
                marginTop: 16, fontSize: 'clamp(48px, 6.5vw, 88px)', fontWeight: 500,
                letterSpacing: '-0.04em', lineHeight: 0.95
              }}>{t.stat.value}</div>
              <div style={{
                marginTop: 12, fontSize: 15, lineHeight: 1.5,
                color: 'rgba(255,255,255,0.88)', maxWidth: 36 + 'ch'
              }}>{t.stat.label}</div>
            </div>
            <div style={{
              position: 'relative', zIndex: 1, fontSize: 12,
              color: 'rgba(255,255,255,0.62)', borderTop: '1px solid rgba(255,255,255,.16)',
              paddingTop: 18, marginTop: 32,
              fontFamily: 'var(--font-mono)', letterSpacing: '.06em'
            }}>
              INDICATIVE FIGURES · SHAPED WITH DESIGN PARTNERS
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ── Three-act platform narrative ─────────────────────────────────────────────
// Echoes peer sites' INGEST / GOVERN / ACTIVATE structure but reframed around the
// physician-payer workflow: DOCUMENT → AUTHORIZE → COLLECT.
function HomePlatformActs() {
  const ACTS = [
  {
    n: '01', label: 'DOCUMENT',
    head: "We read what the physician writes, the moment it's written.",
    body: 'Procedure, payer, and the medical policy attached, all detected in real time as the note is drafted. Documentation gaps surface before the authorization ever goes out.',
    products: ['Insurify · Public beta']
  },
  {
    n: '02', label: 'AUTHORIZE',
    head: 'The authorization assembles itself from criteria already mapped.',
    body: 'Practice-wide queue across every physician and every payer. Peer-to-peer scheduled in-product with the physician briefing already built. No retyping, no copy-paste.',
    products: ['In development']
  },
  {
    n: '03', label: 'COLLECT',
    head: 'Every claim reconciled, every denial routed back to a pattern.',
    body: 'Charge capture, coding accuracy, and reimbursement variance closed before the revenue leaks. Denials clustered and appealed with the citations attached.',
    products: ['In development']
  }];

  return (
    <section className="section section-divider band-emerald emerald-field">
      <div className="cmd-container">
        <div style={{ marginBottom: 36 }}>
          <div className="eyebrow" style={{ marginBottom: 12, color: '#5FD39A' }}>How the platform works</div>
          <h2 className="h-1" style={{
            fontSize: 'clamp(28px, 3.4vw, 44px)', margin: 0, color: '#fff',
            lineHeight: 1.08
          }}>
            One platform, from clinical note to{' '}
            <span style={{ color: '#5FD39A' }}>clean payment.</span>
          </h2>
          <p className="lede" style={{ marginTop: 18, fontSize: 18.5, maxWidth: 'none', color: 'rgba(255,255,255,0.78)' }}>
            Three stages of physician work, each currently failing in a different way. CriterionMD
            connects them, starting where the revenue actually leaks.
          </p>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0,
          border: '1px solid rgba(255,255,255,0.14)', borderRadius: 18, overflow: 'hidden',
          background: 'rgba(255,255,255,0.04)', backdropFilter: 'blur(2px)'
        }}>
          {ACTS.map((a, i) =>
          <div key={a.n} style={{
            padding: '36px 32px 32px',
            borderRight: i < 2 ? '1px solid rgba(255,255,255,0.12)' : 0,
            display: 'flex', flexDirection: 'column', position: 'relative',
            background: i === 1 ? 'rgba(255,255,255,0.05)' : 'transparent'
          }}>
              <div style={{
              display: 'flex', alignItems: 'center', gap: 14, marginBottom: 22
            }}>
                <div style={{
                fontFamily: 'var(--font-mono)',
                fontSize: 'clamp(40px, 5vw, 64px)', fontWeight: 400,
                letterSpacing: '-0.04em', lineHeight: 0.9,
                color: '#5FD39A', opacity: 0.95
              }}>{a.n}</div>
                <div style={{ flex: 1, height: 1, background: 'rgba(255,255,255,0.16)' }} />
                <span className="mono" style={{
                fontSize: 13, letterSpacing: '.16em', color: 'rgba(255,255,255,0.55)'
              }}>{a.label}</span>
              </div>
              <h3 style={{
              fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em',
              lineHeight: 1.2, color: '#fff', margin: 0, textWrap: 'balance'
            }}>
                {a.head}
              </h3>
              <p style={{
              marginTop: 12, marginBottom: 0, fontSize: 15, lineHeight: 1.55,
              color: 'rgba(255,255,255,0.74)', flex: 1
            }}>{a.body}</p>
              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 24 }}>
                {a.products.map((p) =>
              <span key={p} style={{
                fontFamily: 'var(--font-mono)', fontSize: 12,
                letterSpacing: '.04em',
                padding: '4px 10px', borderRadius: 999,
                background: 'rgba(255,255,255,0.08)', color: 'rgba(255,255,255,0.85)',
                border: '1px solid rgba(255,255,255,0.16)'
              }}>{p}</span>
              )}
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ── Outcomes / business case ─────────────────────────────────────────────────
// Reframes the old "Why we exist" stats as a positive business case, in the
// style peer enterprise sites use ("AI that pays for itself, and then some").
function HomeOutcomes() {
  const ITEMS = [
  {
    n: '01',
    head: "Recover the revenue you've already earned.",
    body: 'US ambulatory practices typically lose 5–11% of physician revenue to denials, write-offs, and underpayments. CriterionMD closes that gap at every stage where it leaks.',
    stat: '5–11%', statLabel: 'physician revenue typically lost to denials'
  },
  {
    n: '02',
    head: 'Give physicians their afternoons back.',
    body: 'Most initial denials are never reworked. The documentation work to overturn them is too expensive. CriterionMD makes the work cheap and the queue actually small.',
    stat: '~65%', statLabel: 'of initial denials never reworked or appealed'
  },
  {
    n: '03',
    head: 'See the policy change before the denial.',
    body: 'Major payers publish thousands of medical-policy revisions every year. CriterionMD watches all of them, and tells you which active patients are affected.',
    stat: '1,000s/yr', statLabel: 'payer-policy revisions tracked'
  }];

  return (
    <section className="section section-divider">
      <div className="cmd-container">
        <div style={{ marginBottom: 36 }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>The business case</div>
          <h2 className="h-1" style={{
            fontSize: 'clamp(28px, 3.4vw, 44px)', margin: 0, lineHeight: 1.08
          }}>
            Built to{' '}
            <span style={{ color: 'var(--accent)' }}>pay for itself</span>
            , and then some.
          </h2>
        </div>

        <div className="grid-3" style={{ gap: 20 }}>
          {ITEMS.map((it) =>
          <article key={it.n} style={{
            background: 'var(--paper)', border: '1px solid var(--line)',
            borderRadius: 14, padding: '28px 28px 28px',
            display: 'flex', flexDirection: 'column'
          }}>
              <div style={{
              display: 'flex', justifyContent: 'space-between',
              alignItems: 'baseline', marginBottom: 22
            }}>
                <span className="mono" style={{
                fontSize: 13, color: 'var(--ink-3)', letterSpacing: '.08em'
              }}>
                  {it.n}
                </span>
                <span style={{
                fontSize: 'clamp(32px, 3.4vw, 44px)', fontWeight: 500,
                letterSpacing: '-0.035em', lineHeight: 1, color: 'var(--accent)'
              }}>{it.stat}</span>
              </div>
              <h3 style={{
              fontSize: 20, fontWeight: 500, letterSpacing: '-0.018em',
              lineHeight: 1.25, color: 'var(--ink)', margin: 0, textWrap: 'balance'
            }}>
                {it.head}
              </h3>
              <p style={{
              marginTop: 12, marginBottom: 0, fontSize: 14.5, lineHeight: 1.55,
              color: 'var(--ink-2)', flex: 1
            }}>{it.body}</p>
              <div style={{
              marginTop: 18, paddingTop: 14, borderTop: '1px solid var(--line)',
              fontSize: 12, color: 'var(--ink-3)',
              fontFamily: 'var(--font-mono)', letterSpacing: '.06em',
              textTransform: 'uppercase'
            }}>
                {it.statLabel}
              </div>
            </article>
          )}
        </div>
        <p style={{
          marginTop: 18, marginBottom: 0, fontSize: 12.5, color: 'var(--ink-4)',
          textAlign: 'center', lineHeight: 1.4, whiteSpace: 'nowrap',
          overflow: 'hidden', textOverflow: 'ellipsis'
        }}>
          Ranges synthesized from industry reporting and design-partner interviews.
        </p>
      </div>
    </section>);

}

// ── Solutions scroller (preserved from original) ─────────────────────────────
function HomeSolutionsScroller({ go }) {
  return (
    <section className="section section-divider">
      <div className="cmd-container">
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
          marginBottom: 32, gap: 32, flexWrap: 'wrap'
        }}>
          <div style={{ flex: '1 1 100%', minWidth: 0 }}>
            <div className="eyebrow" style={{ marginBottom: 12 }}>The platform</div>
            <h2 className="h-2" style={{
              fontSize: 'clamp(28px, 3.4vw, 44px)',
              letterSpacing: '-0.025em', margin: 0, lineHeight: 1.08
            }}>
              Practice and enterprise solutions,{' '}
              <span style={{ color: 'var(--accent)' }}>built on one model.</span>
            </h2>
            <p className="lede" style={{ marginTop: 18, fontSize: 18.5, maxWidth: 'none' }}>
              Insurify is free and available today for NPI-verified physicians and APPs. The rest of the platform extends the same model from the exam room out through authorization, coding, and reimbursement.
            </p>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <SolutionsScrollControls />
            <button className="btn btn-outline btn-arrow" onClick={() => go('solutions')}>
              See all solutions <ArrowRight />
            </button>
          </div>
        </div>
      </div>

      <div style={{ position: 'relative' }}>
        <div id="solutions-scroller" style={{
          display: 'flex', gap: 18,
          overflowX: 'auto', overflowY: 'hidden',
          padding: '8px var(--pad-x) 32px',
          scrollSnapType: 'x mandatory',
          scrollPaddingLeft: 'var(--pad-x)',
          scrollbarWidth: 'thin'
        }}>
          {PLATFORM_PRODUCTS.map((p, i) =>
          <SolutionScrollCard key={p.key} p={p} index={i + 1} go={go} />
          )}
          <div style={{ flex: '0 0 var(--pad-x)' }} />
        </div>
        <div style={{
          position: 'absolute', left: 0, top: 0, bottom: 0, width: 56,
          background: 'linear-gradient(90deg, var(--bg), transparent)',
          pointerEvents: 'none', zIndex: 2
        }} />
        <div style={{
          position: 'absolute', right: 0, top: 0, bottom: 0, width: 56,
          background: 'linear-gradient(-90deg, var(--bg), transparent)',
          pointerEvents: 'none', zIndex: 2
        }} />
      </div>
    </section>);

}

// ── Customer spotlight (multi-voice carousel) ──────────────────────────────
// Rotates 5 named, titled voices from different settings (single-specialty
// group, academic AMC, enterprise CMIO, surgical center, RCM). Pauses on hover.
// Each voice carries its own three pilot stats — the way peer enterprise
// healthcare sites anchor quotes with measurable outcomes.
function HomeCustomerSpotlight() {
  const VOICES = [
  {
    initials: 'HK', tint: '#1F5C3D',
    quote: `Every practice I've run has had five vendors that sort of solve five different pieces of the same problem. CriterionMD is the first thing I've seen that {connects} them, and starts where the money actually leaks.`,
    name: 'Husban Khan',
    role: 'Clinical Administrator',
    org: 'Southeast Michigan Surgical Hospital',
    setting: 'Multi-specialty surgical hospital',
    stats: [
    { v: '12 days', l: 'avg time saved per authorization' },
    { v: '$83K', l: 'denial revenue recovered, first 90 days' },
    { v: '10 days', l: 'reduction in procedure authorization' }]

  }];


  const STEP_MS = 8000;
  const [idx, setIdx] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  React.useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setIdx((i) => (i + 1) % VOICES.length), STEP_MS);
    return () => clearInterval(t);
  }, [paused]);

  const v = VOICES[idx];

  // Render a quote string with {emphasis} markers as inline accents.
  const renderQuote = (q) => {
    const parts = q.split(/(\{[^}]+\})/g);
    return parts.map((p, i) => {
      if (p.startsWith('{') && p.endsWith('}')) {
        return (
          <em key={i} style={{
            color: 'var(--accent)', fontStyle: 'normal',
            background: 'var(--accent-tint)', padding: '0 4px',
            borderRadius: 4
          }}>{p.slice(1, -1)}</em>);

      }
      return <React.Fragment key={i}>{p}</React.Fragment>;
    });
  };

  return (
    <section className="section section-divider band-emerald emerald-field"
    onMouseEnter={() => setPaused(true)}
    onMouseLeave={() => setPaused(false)}>
      <div className="cmd-container">
        <div style={{
          display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
          marginBottom: 28, gap: 24, flexWrap: 'wrap'
        }}>
          <div style={{ flex: '1 1 100%' }}>
            <div className="eyebrow" style={{ marginBottom: 12, color: '#5FD39A' }}>Design partners</div>
            <h2 className="h-2" style={{
              fontSize: 'clamp(28px, 3.4vw, 44px)', margin: 0, color: '#fff',
              letterSpacing: '-0.025em', lineHeight: 1.08
            }}>
              Built alongside the practices that{' '}
              <span style={{ color: '#5FD39A' }}>actually use it.</span>
            </h2>
          </div>
          {VOICES.length > 1 &&
          <div style={{
            display: 'flex', alignItems: 'center', gap: 12,
            fontFamily: 'var(--font-mono)', fontSize: 12,
            letterSpacing: '.12em', color: 'var(--ink-3)'
          }}>
              {String(idx + 1).padStart(2, '0')} / {String(VOICES.length).padStart(2, '0')}
            </div>
          }
        </div>

        <div style={{
          background: 'var(--paper)', border: '1px solid var(--line)',
          borderRadius: 18, overflow: 'hidden',
          display: 'grid', gridTemplateColumns: '1.5fr 1fr', alignItems: 'stretch',
          boxShadow: '0 1px 0 rgba(15,20,20,.03), 0 24px 60px -32px rgba(15,20,20,.12)',
          minHeight: 360
        }}>
          <div key={'l-' + v.name} style={{
            padding: '44px 44px',
            display: 'flex', flexDirection: 'column',
            justifyContent: 'space-between', gap: 28,
            opacity: 1,
            animation: VOICES.length > 1 ? 'psPaneIn .45s cubic-bezier(.2,.7,.2,1) both' : 'none'
          }}>
            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between'
            }}>
              <svg width="40" height="32" viewBox="0 0 40 32" fill="none"
              style={{ color: 'var(--accent)', opacity: 0.45 }}>
                <path d="M0 32V19.2C0 14.13 0.97 9.79 2.92 6.18C4.93 2.51 7.93 0.45 11.93 0v6.55c-4.5 1.27-6.75 4.55-6.75 9.85h6.75V32H0Zm21.84 0V19.2c0-5.07 1-9.41 2.99-13.02C26.88 2.51 29.89 0.45 33.93 0v6.55c-4.5 1.27-6.75 4.55-6.75 9.85h6.75V32H21.84Z"
                fill="currentColor" />
              </svg>
              <span className="mono" style={{
                fontSize: 11, letterSpacing: '.14em', color: 'var(--ink-3)',
                padding: '4px 10px', borderRadius: 999,
                background: 'var(--bg)', border: '1px solid var(--line)'
              }}>{v.setting.toUpperCase()}</span>
            </div>
            <blockquote style={{
              margin: 0, fontSize: 'clamp(20px, 2.1vw, 28px)', fontWeight: 450,
              letterSpacing: '-0.018em', lineHeight: 1.35, color: 'var(--ink)',
              textWrap: 'pretty'
            }}>
              "{renderQuote(v.quote)}"
            </blockquote>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <div style={{
                width: 44, height: 44, borderRadius: 999,
                background: v.tint + '14', border: '1px solid ' + v.tint + '33',
                color: v.tint,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontWeight: 500, fontSize: 14, letterSpacing: '.02em',
                flexShrink: 0
              }}>{v.initials}</div>
              <div>
                <div style={{ fontWeight: 500, color: 'var(--ink)', fontSize: 15 }}>{v.name}</div>
                <div style={{ fontSize: 13.5, color: 'var(--ink-3)', marginTop: 2 }}>
                  {v.role} · {v.org}
                </div>
              </div>
            </div>
          </div>

          <div key={'r-' + v.name} style={{
            background: 'var(--bg)', borderLeft: '1px solid var(--line)',
            padding: '40px 36px', display: 'flex', flexDirection: 'column',
            justifyContent: 'space-between', gap: 20,
            opacity: 1,
            animation: VOICES.length > 1 ? 'psPaneIn .55s cubic-bezier(.2,.7,.2,1) both' : 'none'
          }}>
            <div className="mono" style={{
              fontSize: 12, letterSpacing: '.16em', color: 'var(--ink-3)'
            }}>
              FROM THE PILOT
            </div>
            <div style={{ display: 'grid', gap: 22 }}>
              {v.stats.map((s, i) =>
              <div key={s.l} style={{
                opacity: 1,
                animation: VOICES.length > 1 ? `psBulletIn .5s ease ${0.15 + i * 0.08}s both` : 'none'
              }}>
                  <div style={{
                  fontSize: 28, fontWeight: 500, letterSpacing: '-0.025em',
                  lineHeight: 1, color: 'var(--accent)'
                }}>{s.v}</div>
                  <div style={{
                  marginTop: 6, fontSize: 13, color: 'var(--ink-3)', lineHeight: 1.4
                }}>{s.l}</div>
                </div>
              )}
            </div>
            <div style={{
              fontSize: 12, color: 'var(--ink-4)',
              fontFamily: 'var(--font-mono)', letterSpacing: '.06em'
            }}>
              DESIGN-PARTNER PILOT · Q1 2026
            </div>
          </div>
        </div>

        {/* Voice picker — dots + names (only when more than one voice) */}
        {VOICES.length > 1 &&
        <div style={{
          marginTop: 20, display: 'flex', justifyContent: 'space-between',
          alignItems: 'center', gap: 16, flexWrap: 'wrap'
        }}>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            {VOICES.map((vv, i) =>
            <button key={vv.name} onClick={() => setIdx(i)}
            style={{
              appearance: 'none', font: 'inherit', cursor: 'pointer',
              padding: '6px 12px', borderRadius: 999, border: '1px solid',
              background: i === idx ? 'var(--ink)' : 'transparent',
              borderColor: i === idx ? 'var(--ink)' : 'var(--line)',
              color: i === idx ? '#fff' : 'var(--ink-3)',
              fontSize: 13, fontWeight: 500,
              transition: 'all .2s ease',
              display: 'inline-flex', alignItems: 'center', gap: 8
            }}>
                <span style={{
                width: 6, height: 6, borderRadius: 999,
                background: i === idx ? '#fff' : vv.tint
              }} />
                {vv.name.split(',')[0]}
              </button>
            )}
          </div>
          <button onClick={() => setIdx((idx + 1) % VOICES.length)}
          style={{
            appearance: 'none', font: 'inherit', cursor: 'pointer',
            background: 'transparent', border: 0, padding: 0,
            color: 'var(--ink-3)', fontSize: 13,
            display: 'inline-flex', alignItems: 'center', gap: 6
          }}>
            Next voice <ArrowRight />
          </button>
        </div>
        }
      </div>
    </section>);

}

// ── Security & trust band ────────────────────────────────────────────────────
// A compact compliance / posture summary near the bottom of the page — the kind
// of band peer healthcare-enterprise sites use to lock in trust before the
// final CTA. Links to the Security page already in the route table.
function HomeSecurityBand({ go }) {
  const ITEMS = [
  {
    title: 'HIPAA aligned',
    sub: 'Administrative, physical, and technical safeguards built in from day one.'
  },
  {
    title: 'SOC 2 Type II',
    sub: 'Audit underway with a Big-4 firm.',
    tag: 'IN PROGRESS'
  },
  {
    title: 'HITRUST CSF',
    sub: 'Controls mapped against the r2 set with quarterly review.'
  },
  {
    title: 'BAA available',
    sub: 'Signed before any PHI ever touches the platform.'
  }];

  return (
    <section className="section section-divider">
      <div className="cmd-container">
        <div style={{
          background: 'var(--paper)', border: '1px solid var(--line)',
          borderRadius: 18, padding: '44px 48px',
          display: 'grid', gridTemplateColumns: '1fr 1.5fr', gap: 56,
          alignItems: 'center',
          boxShadow: '0 1px 0 rgba(15,20,20,.03), 0 24px 60px -32px rgba(15,20,20,.10)'
        }}>
          <div>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14
            }}>
              <span style={{
                width: 36, height: 36, borderRadius: 10, flexShrink: 0,
                background: 'var(--accent-tint)', color: 'var(--accent-ink)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                border: '1px solid var(--accent-tint-2)'
              }}>
                <ShieldIcon />
              </span>
              <span className="eyebrow" style={{ margin: 0 }}>Security &amp; trust</span>
            </div>
            <h2 className="h-2" style={{
              fontSize: 'clamp(22px, 2.4vw, 32px)', margin: 0, textWrap: 'balance',
              letterSpacing: '-0.025em'
            }}>
              Audit-grade,{' '}<span style={{ color: 'var(--accent)' }}>by default.</span>
            </h2>
            <p style={{
              marginTop: 14, marginBottom: 0,
              fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.55
            }}>
              Built for environments where every authorization, policy revision, and revenue decision needs to be traceable back to the chart that produced it.
            </p>
            <a href="#" onClick={(e) => {e.preventDefault();go('security');}}
            style={{
              display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 20,
              fontSize: 14.5, fontWeight: 500, color: 'var(--accent)',
              borderBottom: '1px solid var(--accent-tint-2)', paddingBottom: 2
            }}>
              Read the security overview <ArrowRight />
            </a>
          </div>

          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14
          }}>
            {ITEMS.map((it) =>
            <div key={it.title} style={{
              padding: '20px 20px', background: 'var(--bg)',
              border: '1px solid var(--line)', borderRadius: 12,
              display: 'flex', gap: 14, alignItems: 'flex-start'
            }}>
                <div style={{
                width: 36, height: 36, borderRadius: 10, flexShrink: 0,
                background: 'var(--paper)', border: '1px solid var(--line)',
                color: 'var(--accent)',
                display: 'flex', alignItems: 'center', justifyContent: 'center'
              }}>
                  <ShieldIcon />
                </div>
                <div style={{ minWidth: 0, flex: 1 }}>
                  <div style={{
                  display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap'
                }}>
                    <span style={{
                    fontSize: 14.5, fontWeight: 500, color: 'var(--ink)',
                    letterSpacing: '-0.01em'
                  }}>
                      {it.title}
                    </span>
                    {it.tag &&
                  <span className="mono" style={{
                    fontSize: 10, letterSpacing: '.12em', fontWeight: 500,
                    padding: '2px 6px', borderRadius: 4,
                    background: 'var(--warn-tint)', color: 'var(--warn)'
                  }}>{it.tag}</span>
                  }
                  </div>
                  <div style={{
                  fontSize: 13, color: 'var(--ink-3)',
                  marginTop: 6, lineHeight: 1.45
                }}>{it.sub}</div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

function ShieldIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
      <path d="M9 1.5l6 2v5.5c0 3.6-2.6 6.3-6 7.5C5.6 15.3 3 12.6 3 9V3.5l6-2Z"
      stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" />
      <path d="M6 9l2.4 2.4L12 7.5" stroke="currentColor" strokeWidth="1.4"
      strokeLinecap="round" strokeLinejoin="round" />
    </svg>);

}

// ── Split CTA (preserved from original) ──────────────────────────────────────
function HomeSplitCTA({ go }) {
  return (
    <section className="section section-divider">
      <div className="cmd-container">
        <div className="grid-2" style={{ gap: 20 }}>
          <div style={{
            background: 'radial-gradient(120% 100% at 0% 0%, #1f7350 0%, rgba(31,115,80,0) 55%), linear-gradient(155deg, #0e4733 0%, #082a1f 100%)',
            color: '#fff',
            borderRadius: 18, padding: '48px 40px', border: '1px solid rgba(255,255,255,0.10)',
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 32
          }}>
            <div>
              <span className="pill" style={{ background: '#fff', borderColor: 'transparent' }}>
                For physicians &amp; APPs
              </span>
              <h2 className="h-2" style={{ marginTop: 20, color: '#fff' }}>
                Get Insurify,{' '}<span style={{ color: '#5FD39A' }}>free.</span>
              </h2>
              <p style={{
                fontSize: 15, color: 'rgba(255,255,255,0.82)',
                marginTop: 12, marginBottom: 0, lineHeight: 1.55
              }}>
                Sign up with your work email and NPI. Free for individual clinicians.
                About 90 seconds.
              </p>
            </div>
            <button className="btn btn-lg btn-arrow"
            style={{ background: '#fff', color: 'var(--accent-ink)', alignSelf: 'flex-start' }}
            onClick={() => go('access')}>
              Start free with NPI <ArrowRight />
            </button>
          </div>
          <div style={{
            background: 'var(--accent-tint)', color: 'var(--accent-ink)', borderRadius: 18,
            padding: '48px 40px', border: '1px solid var(--accent-tint-2)',
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 32
          }}>
            <div>
              <span className="pill"
              style={{ background: '#fff', borderColor: 'var(--accent-tint-2)' }}>
                For practices &amp; health orgs
              </span>
              <h2 className="h-2" style={{ marginTop: 20, color: 'var(--accent-ink)' }}>
                Scope a{' '}<span style={{ color: 'var(--accent)' }}>CriterionMD pilot.</span>
              </h2>
              <p style={{
                fontSize: 15, color: 'var(--accent-ink)', opacity: 0.85,
                marginTop: 12, marginBottom: 0, lineHeight: 1.55
              }}>
                Walk through the platform against your real payer mix, see the
                practice and enterprise solutions on the roadmap, and scope a pilot.
                Direct access to the founding team.
              </p>
            </div>
            <button className="btn btn-lg btn-primary btn-arrow"
            style={{ alignSelf: 'flex-start' }} onClick={() => go('access')}>
              Request a platform demo <ArrowRight />
            </button>
          </div>
        </div>
      </div>
    </section>);

}

function SolutionsScrollControls() {
  const scroll = (dir) => {
    const el = document.getElementById('solutions-scroller');
    if (!el) return;
    const cardWidth = 340 + 18; // approx card + gap
    el.scrollBy({ left: dir * cardWidth, behavior: 'smooth' });
  };
  const btn = {
    width: 38, height: 38, borderRadius: 999,
    border: '1px solid var(--line)', background: '#fff',
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    cursor: 'pointer', color: 'var(--ink-2)',
    transition: 'border-color .15s, color .15s'
  };
  return (
    <div style={{ display: 'flex', gap: 8 }}>
      <button aria-label="Scroll left" onClick={() => scroll(-1)} style={btn}
      onMouseEnter={(e) => {e.currentTarget.style.borderColor = 'var(--ink-3)';e.currentTarget.style.color = 'var(--ink)';}}
      onMouseLeave={(e) => {e.currentTarget.style.borderColor = 'var(--line)';e.currentTarget.style.color = 'var(--ink-2)';}}>
        <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M10 4L6 8l4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
      </button>
      <button aria-label="Scroll right" onClick={() => scroll(1)} style={btn}
      onMouseEnter={(e) => {e.currentTarget.style.borderColor = 'var(--ink-3)';e.currentTarget.style.color = 'var(--ink)';}}
      onMouseLeave={(e) => {e.currentTarget.style.borderColor = 'var(--line)';e.currentTarget.style.color = 'var(--ink-2)';}}>
        <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M6 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
      </button>
    </div>);

}

// Per-product brand colors. Each product gets its own identity while staying within a
// disciplined, premium palette. Insurify keeps the platform's pine green.
const PRODUCT_COLORS = {
  insurify: { tile: '#1F5C3D', glyph: '#FFFFFF', soft: '#EEF3EE', soft2: '#DDE7DE', ink: '#143C28' }, // forest
  codequickref: { tile: '#0E7A72', glyph: '#FFFFFF', soft: '#E4F3F1', soft2: '#BFE1DC', ink: '#0A4F49' }, // teal
  notes: { tile: '#3F3A89', glyph: '#FFFFFF', soft: '#EFEEF7', soft2: '#DCDAEF', ink: '#272566' }, // indigo
  authdesk: { tile: '#1E8A55', glyph: '#FFFFFF', soft: '#E6F2EC', soft2: '#C8E1D3', ink: '#0F5536' }, // emerald
  rcmiq: { tile: '#8A5A1B', glyph: '#FFFFFF', soft: '#F7EFE0', soft2: '#EAD9B8', ink: '#5A3D14' }, // copper
  denials: { tile: '#A33A2E', glyph: '#FFFFFF', soft: '#F7E8E5', soft2: '#EBC9C3', ink: '#6F2820' }, // crimson
  policy: { tile: '#28557A', glyph: '#FFFFFF', soft: '#E6EEF5', soft2: '#C5D5E3', ink: '#1A3C56' } // slate blue
};

function ProductMark({ k, size = 28 }) {
  // ScribeAware uses its own uploaded logo image on a white plate so it reads
  // on any background (dark product tiles, gradients, light menus).
  if (k === 'notes') {
    return (
      <span style={{
        width: size, height: size, borderRadius: Math.round(size * 0.22),
        background: '#fff', display: 'inline-flex', alignItems: 'center',
        justifyContent: 'center', overflow: 'hidden', flexShrink: 0
      }}>
        <img src={typeof window !== 'undefined' && window.__resources && window.__resources.scribeawareLogo || "assets/products/scribeaware.png"} alt="ScribeAware"
        width={Math.round(size * 0.82)} height={Math.round(size * 0.82)}
        style={{ display: 'block', objectFit: 'contain' }} />
      </span>);

  }
  const c = PRODUCT_COLORS[k] || PRODUCT_COLORS.insurify;
  const stroke = c.glyph;
  const accent = 'rgba(255,255,255,0.85)';
  const dim = 'rgba(255,255,255,0.35)';

  switch (k) {
    case 'insurify':{
        // Shield with a checkmark inside — verification / coverage
        return (
          <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
            <path d="M16 4 L26 7 L26 16 C26 22 22 26.5 16 28.5 C10 26.5 6 22 6 16 L6 7 Z"
            stroke={stroke} strokeWidth="1.8" strokeLinejoin="round" />
            <path d="M11 16.5 L14.5 20 L21 12.5"
            stroke={stroke} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>);
      }
    case 'notes':{
        // ScribeAware — bold diagonal pen stroke with a parallel dotted echo (AI awareness)
        return (
          <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
          <path d="M6 24L22 4" stroke={dim} strokeWidth="1.5" strokeLinecap="round" strokeDasharray="1.4 3" />
          <path d="M10 28L26 8" stroke={stroke} strokeWidth="3" strokeLinecap="round" />
          <circle cx="26" cy="8" r="2.4" fill={accent} stroke="none" />
        </svg>);

      }
    case 'authdesk':{
        // Greenlight — three nested chevrons pointing right, accelerating opacity
        return (
          <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
          <path d="M6 8l6 8-6 8" stroke={stroke} strokeWidth="2.2"
            strokeLinecap="round" strokeLinejoin="round" opacity="0.3" />
          <path d="M13 8l6 8-6 8" stroke={stroke} strokeWidth="2.2"
            strokeLinecap="round" strokeLinejoin="round" opacity="0.65" />
          <path d="M20 8l6 8-6 8" stroke={accent} strokeWidth="2.6"
            strokeLinecap="round" strokeLinejoin="round" />
        </svg>);

      }
    case 'rcmiq':{
        // Reckon — offset stacked ledger bars (financial balance)
        return (
          <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
          <rect x="5" y="6" width="18" height="4" rx="1.5" fill={stroke} opacity="0.45" />
          <rect x="9" y="14" width="18" height="4" rx="1.5" fill={stroke} opacity="0.75" />
          <rect x="5" y="22" width="13" height="4" rx="1.5" fill={accent} />
          <circle cx="20" cy="24" r="2.2" fill={accent} stroke="none" />
        </svg>);

      }
    case 'denials':{
        // Rebound — a tight U-curve with an arrowhead pointing up-right (denial reversed)
        return (
          <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
          <path d="M22 6c0 8-12 6-12 14a6 6 0 0 0 11 3.3"
            stroke={stroke} strokeWidth="2"
            strokeLinecap="round" strokeLinejoin="round" />
          <path d="M16 22l5.6 1.6L20 29" stroke={accent} strokeWidth="2"
            strokeLinecap="round" strokeLinejoin="round" />
          <circle cx="22" cy="6" r="2.2" fill={accent} stroke="none" />
        </svg>);

      }
    case 'policy':{
        // Sentinel — center point with two asymmetric arcing brackets (radar watch)
        return (
          <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
          <path d="M5 11a12 12 0 0 1 9-6" stroke={stroke} strokeWidth="2"
            strokeLinecap="round" opacity="0.5" />
          <path d="M27 21a12 12 0 0 1-9 6" stroke={stroke} strokeWidth="2"
            strokeLinecap="round" opacity="0.5" />
          <circle cx="16" cy="16" r="5.5" stroke={stroke} strokeWidth="1.8" />
          <circle cx="16" cy="16" r="2.3" fill={accent} stroke="none" />
        </svg>);

      }
    case 'codequickref':{
        // Code QuickRef — magnifying glass over a code bracket (quick lookup)
        return (
          <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
          <path d="M11 8l-6 8 6 8" stroke={stroke} strokeWidth="2"
            strokeLinecap="round" strokeLinejoin="round" opacity="0.5" />
          <path d="M18 8l6 8-6 8" stroke={stroke} strokeWidth="2"
            strokeLinecap="round" strokeLinejoin="round" opacity="0.5" />
          <circle cx="15" cy="15" r="5" stroke={accent} strokeWidth="2" />
          <path d="M18.8 18.8L22.5 22.5" stroke={accent} strokeWidth="2.2" strokeLinecap="round" />
        </svg>);

      }
    default:
      return null;
  }
}

function SolutionScrollCard({ p, index, go }) {
  const avail = p.status === 'available';
  const c = PRODUCT_COLORS[p.key] || PRODUCT_COLORS.insurify;
  return (
    <div
      onClick={avail ? () => go(p.route || 'insurify') : undefined}
      style={{
        flex: '0 0 340px',
        scrollSnapAlign: 'start',
        cursor: avail ? 'pointer' : 'default',
        borderRadius: 14,
        background: `linear-gradient(180deg, ${c.soft} 0%, #fff 100%)`,
        border: '1px solid ' + c.soft2,
        boxShadow: '0 1px 0 rgba(15,20,20,.03), 0 12px 32px -16px rgba(15,20,20,.08)',
        overflow: 'hidden',
        position: 'relative',
        display: 'flex', flexDirection: 'column',
        height: 400,
        transition: 'transform .25s ease, box-shadow .25s ease, border-color .25s ease'
      }}
      onMouseEnter={avail ? (e) => {
        e.currentTarget.style.transform = 'translateY(-4px)';
        e.currentTarget.style.boxShadow = '0 1px 0 rgba(15,20,20,.03), 0 28px 60px -20px rgba(15,20,20,.18)';
      } : undefined}
      onMouseLeave={avail ? (e) => {
        e.currentTarget.style.transform = 'translateY(0)';
        e.currentTarget.style.boxShadow = '0 1px 0 rgba(15,20,20,.03), 0 12px 32px -16px rgba(15,20,20,.08)';
      } : undefined}>
      
      {/* Card header — index + status */}
      <div style={{ padding: '20px 22px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span className="mono" style={{ fontSize: 12, color: c.ink, letterSpacing: '.12em', opacity: 0.6 }}>
          {String(index).padStart(2, '0')} / 0{PLATFORM_PRODUCTS.length}
        </span>
        <span className={'pill ' + (avail ? '' : 'pill-neutral')}
        style={{ height: 22, fontSize: 12, background: '#fff' }}>
          <span className="pill-dot"></span> {avail ? 'in public beta' : 'coming soon'}
        </span>
      </div>

      {/* Glyph */}
      <div style={{ padding: '24px 22px 12px' }}>
        <div style={{
          width: 56, height: 56, borderRadius: 14,
          background: c.tile,
          color: c.glyph,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: `0 8px 24px -8px ${c.tile}99, inset 0 1px 0 rgba(255,255,255,0.15)`
        }}>
          <ProductMark k={p.key} size={28} />
        </div>
      </div>

      {/* Title + description */}
      <div style={{ padding: '0 22px 0', flex: 1 }}>
        <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.025em', lineHeight: 1.15, color: 'var(--ink)' }}>{p.name}</div>
        <p style={{
          fontSize: 14, marginTop: 10, marginBottom: 0, lineHeight: 1.55,
          color: c.ink,
          opacity: 0.85
        }}>{p.desc}</p>
      </div>

      {/* Footer */}
      <div style={{
        padding: '16px 22px 18px',
        borderTop: '1px solid ' + c.soft2,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        background: 'rgba(255,255,255,0.5)'
      }}>
        <span style={{ fontSize: 13.5, color: 'var(--ink-3)' }}>{p.audience}</span>
        {avail &&
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 4,
          fontSize: 14, fontWeight: 500,
          color: c.tile
        }}>
            Open
            <svg width="11" height="11" viewBox="0 0 16 16" fill="none">
              <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </span>
        }
      </div>

      {/* Coming-soon cover — blurs the card, surfaces name + logo only */}
      {!avail &&
      <div style={{
        position: 'absolute', inset: 0,
        backdropFilter: 'blur(7px)', WebkitBackdropFilter: 'blur(7px)',
        background: 'rgba(255,255,255,0.6)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        gap: 14, textAlign: 'center', padding: 24
      }}>
        <div style={{
          width: 52, height: 52, borderRadius: 14,
          background: c.tile, color: c.glyph,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: `0 8px 24px -8px ${c.tile}99, inset 0 1px 0 rgba(255,255,255,0.15)`
        }}>
          <ProductMark k={p.key} size={26} />
        </div>
        <div style={{ fontSize: 17, fontWeight: 500, letterSpacing: '-0.02em', color: 'var(--ink)' }}>{p.name}</div>
        <span className="pill pill-neutral" style={{ height: 24, fontSize: 12, background: '#fff' }}>
          <span className="pill-dot"></span> Coming soon
        </span>
      </div>
      }
    </div>);

}

// ─── SOLUTIONS PAGE ───────────────────────────────────────────────────────────

function RoadmapCard({ status, name, desc, active }) {
  return (
    <div className="card card-pad" style={{
      borderColor: active ? 'var(--accent-tint-2)' : 'var(--line)',
      background: active ? 'var(--accent-tint)' : 'var(--paper)'
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
        <span className="mono" style={{ fontSize: 12, letterSpacing: '.06em', color: active ? 'var(--accent-ink)' : 'var(--ink-3)' }}>
          {status.toUpperCase()}
        </span>
        {active &&
        <span style={{
          width: 8, height: 8, borderRadius: 999, background: 'var(--accent)',
          boxShadow: '0 0 0 4px rgba(31, 92, 61, 0.15)'
        }} />
        }
      </div>
      <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em', color: 'var(--ink)' }}>{name}</div>
      <p style={{ fontSize: 14, color: 'var(--ink-2)', marginTop: 10, marginBottom: 0, lineHeight: 1.55 }}>{desc}</p>
    </div>);

}

// ─── SOLUTIONS PAGE ───────────────────────────────────────────────────────────
// Short capability bullets per product, shown in the ProductShowcase.
const SOLUTION_HIGHLIGHTS = {
  insurify: [
  'Reads the clinical note in real time',
  'Detects procedure, payer, and applicable medical policy',
  'Maps every criterion line by line',
  'Surfaces gaps before the auth goes out'],

  // Non-Insurify products are intentionally described in broad strokes — what
  // problem they sit on, not what's inside them. Subject to change as we build
  // alongside design partners.
  notes: ['Lives inside the physician\u2019s documentation workflow', 'Co-developed with practicing clinicians'],
  authdesk: ['Sits between the chart and the payer for the practice', 'Co-developed with practice administrators'],
  rcmiq: ['Closes the loop on reimbursement integrity', 'Co-developed with revenue-cycle leaders'],
  denials: ['Turns the denial queue into a structured signal', 'Co-developed with practices in our cohort'],
  policy: ['Keeps practices ahead of payer-policy change', 'Co-developed with compliance and operations leads'],

  codequickref: [
  'Describe a symptom or diagnosis in plain language',
  'Suggests the closest-matching ICD-10 codes, ranked by fit',
  'Runs as a Chrome extension inside any EHR',
  'No need to know the exact code verbiage or hierarchy']

};

function ProductShowcase({ go }) {
  const STEP_MS = 4200;
  const [idx, setIdx] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  React.useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setIdx((i) => (i + 1) % PLATFORM_PRODUCTS.length), STEP_MS);
    return () => clearInterval(t);
  }, [paused, STEP_MS]);

  const product = PLATFORM_PRODUCTS[idx];
  const c = PRODUCT_COLORS[product.key] || PRODUCT_COLORS.insurify;
  const avail = product.status === 'available';

  return (
    <div
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
      style={{
        display: 'grid', gridTemplateColumns: '320px 1fr', gap: 24,
        alignItems: 'stretch'
      }}>

      <style>{`
        @keyframes psFillBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
        @keyframes psPaneIn {
          0%   { opacity: 0; transform: translate3d(24px, 0, 0); }
          100% { opacity: 1; transform: translate3d(0, 0, 0); }
        }
        @keyframes psGlyphIn {
          0%   { opacity: 0; transform: scale(0.7) rotate(-8deg); }
          60%  { opacity: 1; transform: scale(1.06) rotate(2deg); }
          100% { opacity: 1; transform: scale(1) rotate(0deg); }
        }
        @keyframes psBulletIn {
          0%   { opacity: 0; transform: translate3d(0, 8px, 0); }
          100% { opacity: 1; transform: translate3d(0, 0, 0); }
        }
        .ps-tab {
          all: unset;
          display: grid;
          grid-template-columns: 26px 32px 1fr;
          align-items: center;
          gap: 12px;
          padding: 14px 14px 14px 0;
          cursor: pointer;
          border-radius: 0;
          position: relative;
          transition: background .2s ease;
        }
        .ps-tab + .ps-tab { border-top: 1px solid var(--line); }
        .ps-tab:hover { background: rgba(15,20,20,0.02); }
        .ps-tab-rail {
          position: relative;
          width: 3px; height: 100%;
          background: var(--line);
          margin-left: 11px;
          border-radius: 999px;
        }
        .ps-tab-rail > span {
          position: absolute; inset: 0;
          background: var(--bar-color, var(--accent));
          border-radius: 999px;
          transform-origin: top;
          transform: scaleY(0);
        }
        .ps-tab.active .ps-tab-rail > span {
          animation: psFillBar var(--step-ms, 4200ms) linear forwards;
        }
        .ps-tab.paused .ps-tab-rail > span {
          animation-play-state: paused;
        }
        .ps-tab.done .ps-tab-rail > span { transform: scaleY(1); }
        .ps-num {
          font-family: var(--font-mono);
          font-size: 12px; letter-spacing: .08em; color: var(--ink-3);
          text-align: right;
          transition: color .2s ease;
        }
        .ps-tab.active .ps-num { color: var(--ink); }
        .ps-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
        .ps-mini {
          width: 32px; height: 32px; border-radius: 8px;
          background: var(--paper-2);
          color: var(--ink-3);
          border: 1px solid var(--line);
          display: flex; align-items: center; justify-content: center;
          flex-shrink: 0;
          transition: background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease;
        }
        .ps-tab.active .ps-mini {
          background: var(--bar-color);
          color: #fff;
          border-color: var(--bar-color);
          transform: scale(1.05);
        }
        .ps-tab-name {
          font-size: 15px; font-weight: 500; letter-spacing: -0.015em;
          color: var(--ink-2);
          transition: color .2s ease;
        }
        .ps-tab.active .ps-tab-name { color: var(--ink); }
        .ps-tab-aud { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
      `}</style>

      {/* LEFT — vertical product list */}
      <div style={{
        display: 'flex', flexDirection: 'column',
        borderTop: '1px solid var(--line)',
        borderBottom: '1px solid var(--line)'
      }}>
        {PLATFORM_PRODUCTS.map((p, i) => {
          const pc = PRODUCT_COLORS[p.key] || PRODUCT_COLORS.insurify;
          const active = i === idx;
          const done = i < idx;
          return (
            <button
              key={p.key}
              className={'ps-tab' + (active ? ' active' : '') + (done ? ' done' : '') + (paused ? ' paused' : '')}
              style={{
                '--bar-color': pc.tile,
                '--step-ms': `${STEP_MS}ms`
              }}
              onClick={() => setIdx(i)}>
              <span className="ps-num">{String(i + 1).padStart(2, '0')}</span>
              <div className="ps-tab-rail"><span /></div>
              <div>
                <div className="ps-row">
                  <div className="ps-mini" style={active ? { boxShadow: `0 6px 14px -6px ${pc.tile}88` } : {}}>
                    <ProductMark k={p.key} size={16} />
                  </div>
                  <div style={{ minWidth: 0 }}>
                    <div className="ps-tab-name">{p.name}</div>
                    <div className="ps-tab-aud">{p.audience}</div>
                  </div>
                </div>
              </div>
            </button>);

        })}
      </div>

      {/* RIGHT — animated detail pane */}
      <div
        key={product.key}
        style={{
          borderRadius: 18,
          background: `linear-gradient(155deg, ${c.tile} 0%, ${c.ink} 100%)`,
          color: '#fff',
          padding: '36px 40px 32px',
          position: 'relative',
          overflow: 'hidden',
          minHeight: 460,
          display: 'flex', flexDirection: 'column',
          animation: 'psPaneIn .55s cubic-bezier(.2,.7,.2,1)',
          boxShadow: `0 1px 0 rgba(15,20,20,.04), 0 30px 80px -20px ${c.tile}55`
        }}>

        <div style={{
          position: 'absolute', inset: 0, opacity: 0.08,
          backgroundImage: 'linear-gradient(rgba(255,255,255,0.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.6) 1px, transparent 1px)',
          backgroundSize: '40px 40px',
          pointerEvents: 'none'
        }} />

        <div style={{
          position: 'absolute', top: -120, right: -120, width: 360, height: 360, borderRadius: 999,
          background: 'radial-gradient(closest-side, rgba(255,255,255,0.22), transparent)',
          pointerEvents: 'none'
        }} />

        <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', zIndex: 1 }}>
          <span className="mono" style={{ fontSize: 12, letterSpacing: '.16em', opacity: 0.7 }}>
            {String(idx + 1).padStart(2, '0')} / 0{PLATFORM_PRODUCTS.length}
          </span>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '4px 10px', borderRadius: 999,
            background: 'rgba(255,255,255,0.18)',
            fontSize: 12, fontWeight: 500
          }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: '#fff', boxShadow: '0 0 0 4px rgba(255,255,255,0.22)' }} />
            {avail ? 'In public beta' : 'Coming soon'}
          </span>
        </div>

        <div style={{
          marginTop: 28, position: 'relative', zIndex: 1,
          width: 84, height: 84, borderRadius: 18,
          background: 'rgba(255,255,255,0.16)',
          border: '1px solid rgba(255,255,255,0.28)',
          backdropFilter: 'blur(8px)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          animation: 'psGlyphIn .7s cubic-bezier(.2,.7,.2,1) .05s both'
        }}>
          <ProductMark k={product.key} size={44} />
        </div>

        <div style={{ marginTop: 24, position: 'relative', zIndex: 1 }}>
          <h3 style={{
            fontSize: 32, fontWeight: 500, letterSpacing: '-0.03em',
            color: '#fff', margin: 0, lineHeight: 1.05,
            animation: 'psBulletIn .5s ease .15s both'
          }}>{product.name}</h3>
          <p style={{
            margin: '10px 0 0', fontSize: 16, lineHeight: 1.5,
            color: 'rgba(255,255,255,0.85)', maxWidth: 56 + 'ch',
            animation: 'psBulletIn .5s ease .25s both'
          }}>
            {product.desc}
          </p>
        </div>

        <ul style={{
          listStyle: 'none', padding: 0, margin: '24px 0 0',
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px 24px',
          position: 'relative', zIndex: 1
        }}>
          {(SOLUTION_HIGHLIGHTS[product.key] || []).map((h, i) =>
          <li key={i} style={{
            display: 'flex', gap: 10, alignItems: 'flex-start',
            fontSize: 14, color: 'rgba(255,255,255,0.92)', lineHeight: 1.45,
            animation: `psBulletIn .5s ease ${0.35 + i * 0.07}s both`
          }}>
              <span style={{
              flexShrink: 0, marginTop: 5,
              width: 6, height: 6, borderRadius: 999,
              background: 'rgba(255,255,255,0.9)',
              boxShadow: '0 0 0 3px rgba(255,255,255,0.18)'
            }} />
              <span>{h}</span>
            </li>
          )}
        </ul>

        <div style={{
          marginTop: 'auto', paddingTop: 24, position: 'relative', zIndex: 1,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          borderTop: '1px solid rgba(255,255,255,0.16)'
        }}>
          <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '.1em', opacity: 0.7 }}>FOR</div>
            <div style={{ marginTop: 2, fontWeight: 500, fontSize: 13 }}>{product.audience}</div>
          </div>
          {avail ?
          <button
            onClick={() => go(product.route || 'insurify')}
            style={{
              appearance: 'none', border: 0,
              background: '#fff', color: c.ink,
              padding: '10px 16px', borderRadius: 999,
              fontFamily: 'inherit', fontSize: 13, fontWeight: 500,
              display: 'inline-flex', alignItems: 'center', gap: 6,
              cursor: 'pointer'
            }}>
              Open {product.name} <ArrowRight />
            </button> :

          <span style={{
            fontSize: 12, color: 'rgba(255,255,255,0.7)',
            padding: '8px 14px', borderRadius: 999,
            background: 'rgba(255,255,255,0.12)',
            border: '1px solid rgba(255,255,255,0.18)'
          }}>
              On the roadmap
            </span>
          }
        </div>

        {/* Coming-soon cover — blurs the detail pane, surfaces name + logo only. Mirrors the home-page platform scroller treatment. */}
        {!avail &&
        <div style={{
          position: 'absolute', inset: 0, zIndex: 2,
          borderRadius: 18,
          backdropFilter: 'blur(7px)', WebkitBackdropFilter: 'blur(7px)',
          background: 'rgba(255,255,255,0.6)',
          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
          gap: 14, textAlign: 'center', padding: 24
        }}>
          <div style={{
            width: 56, height: 56, borderRadius: 14,
            background: c.tile, color: c.glyph,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: `0 8px 24px -8px ${c.tile}99, inset 0 1px 0 rgba(255,255,255,0.15)`
          }}>
            <ProductMark k={product.key} size={28} />
          </div>
          <div style={{ fontSize: 19, fontWeight: 500, letterSpacing: '-0.02em', color: 'var(--ink)' }}>{product.name}</div>
          <span className="pill pill-neutral" style={{ height: 24, fontSize: 12, background: '#fff' }}>
            <span className="pill-dot"></span> Coming soon
          </span>
        </div>
        }
      </div>
    </div>);

}

// ── Insurify spotlight (Solutions page) ─────────────────────────────────────
// Scroll-triggered reveal: pill, heading, copy, CTAs and mock rise in on a
// staggered delay the first time the section enters view.
function InsurifySpotlight({ go }) {
  const ref = React.useRef(null);
  const [inView, setInView] = React.useState(false);
  React.useEffect(() => {
    const reduce = typeof window !== 'undefined' &&
      window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) { setInView(true); return; }
    const el = ref.current;
    if (!el) { setInView(true); return; }
    const check = () => {
      const r = el.getBoundingClientRect();
      if (r.top < (window.innerHeight || 800) * 0.85 && r.bottom > 0) { setInView(true); return true; }
      return false;
    };
    if (check()) return;
    const onScroll = () => { if (check()) cleanup(); };
    const cleanup = () => window.removeEventListener('scroll', onScroll);
    window.addEventListener('scroll', onScroll, { passive: true });
    return cleanup;
  }, []);

  return (
    <section className="section section-divider" style={{ paddingTop: 32 }} ref={ref}>
      <style>{`
        @media (prefers-reduced-motion: no-preference) {
          .ib-rise { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
          .ib-inview .ib-rise { opacity: 1; transform: translateY(0); }
          .ib-inview .ib-rise-1 { transition-delay: .02s; }
          .ib-inview .ib-rise-2 { transition-delay: .12s; }
          .ib-inview .ib-rise-3 { transition-delay: .22s; }
          .ib-inview .ib-rise-4 { transition-delay: .30s; }
          .ib-inview .ib-rise-5 { transition-delay: .18s; }
          .ib-mock-float { animation: ibFloat 6s ease-in-out infinite; }
          @keyframes ibFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
        }
        .ib-pulse-dot { position: relative; }
        .ib-pulse-dot::after {
          content: ""; position: absolute; inset: -3px; border-radius: 999px;
          border: 1.5px solid var(--accent); opacity: 0;
        }
        @media (prefers-reduced-motion: no-preference) {
          .ib-pulse-dot::after { animation: ibPulse 2.2s ease-out infinite; }
        }
        @keyframes ibPulse { 0% { opacity: 0.55; transform: scale(0.6); } 100% { opacity: 0; transform: scale(2.2); } }
      `}</style>
      <div className={'cmd-container' + (inView ? ' ib-inview' : '')}>
        <div className="ib-rise ib-rise-1" style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
          <span className="eyebrow">In public beta</span>
          <span style={{ flex: 1, height: 1, background: 'var(--line)' }} />
        </div>
        <div className="card" style={{
          padding: 0, overflow: 'hidden',
          display: 'grid', gridTemplateColumns: '1fr 1.2fr', alignItems: 'stretch',
          background: 'var(--accent-tint)', borderColor: 'var(--accent-tint-2)'
        }}>
          <div style={{
            padding: '40px 40px', display: 'flex', flexDirection: 'column',
            justifyContent: 'space-between', gap: 24
          }}>
            <div>
              <div className="ib-rise ib-rise-2" style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
                <span className="pill">
                  <span className="pill-dot ib-pulse-dot"></span> In public beta
                </span>
                <span className="pill pill-neutral" style={{ background: '#fff' }}>Free · NPI verified</span>
              </div>
              <h2 className="ib-rise ib-rise-3 h-2" style={{ color: 'var(--accent-ink)', textWrap: 'balance' }}>
                Insurify:{' '}<span style={{ color: 'var(--accent)' }}>Real-time documentation and medical-necessity assistant.</span>
              </h2>
              <p className="ib-rise ib-rise-3" style={{
                fontSize: 15, color: 'var(--accent-ink)', opacity: 0.85,
                marginTop: 14, marginBottom: 0, lineHeight: 1.55
              }}>
                Reads the clinical note as it's written, identifies the procedure and payer,
                maps the documentation against the medical policy, and surfaces what's still
                missing before the authorization goes out. Free for NPI-verified physicians and APPs.
              </p>
            </div>
            <div className="ib-rise ib-rise-4" style={{ display: 'flex', gap: 10 }}>
              <button className="btn btn-lg btn-arrow"
              style={{ background: 'var(--accent)', color: '#fff' }}
              onClick={() => go('access')}>
                Try Insurify now <ArrowRight />
              </button>
              <button className="btn btn-lg btn-outline"
              onClick={() => go('insurify')} style={{ background: '#fff' }}>
                Product details
              </button>
            </div>
          </div>
          <div className="ib-rise ib-rise-5" style={{ padding: '32px 32px 32px 0', display: 'flex', alignItems: 'center' }}>
            <div className="ib-mock-float" style={{ width: '100%' }}>
              <InsurifyMock />
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function SolutionsPage({ go }) {
  return (
    <div data-screen-label="02 Solutions">
      <SolutionsHero go={go} />

      {/* Interactive product showcase */}
      <section style={{ paddingBottom: 56 }}>
        <div className="cmd-container">
          <ProductShowcase go={go} />
        </div>
      </section>

      {/* In public beta: Insurify (Document layer) */}
      <InsurifySpotlight go={go} />

      {/* Specialty rollout — which specialties Insurify is rolling out for */}
      <SpecialtyRollout />

      {/* In public beta: Code QuickRef (coding assist, browser extension) */}
      <section className="section section-divider">
        <div className="cmd-container">
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
            <span className="eyebrow">In public beta</span>
            <span style={{ flex: 1, height: 1, background: 'var(--line)' }} />
          </div>
          <div className="card" style={{
            padding: 0, overflow: 'hidden',
            display: 'grid', gridTemplateColumns: '1.2fr 1fr', alignItems: 'stretch',
            background: PRODUCT_COLORS.codequickref.soft, borderColor: PRODUCT_COLORS.codequickref.soft2
          }}>
            <div style={{
              padding: '40px 40px', display: 'flex', flexDirection: 'column',
              justifyContent: 'space-between', gap: 24
            }}>
              <div>
                <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
                  <span className="pill" style={{ background: '#fff', color: PRODUCT_COLORS.codequickref.ink }}>
                    <span className="pill-dot" style={{ background: PRODUCT_COLORS.codequickref.tile }}></span> In public beta
                  </span>
                  <span className="pill pill-neutral" style={{ background: '#fff' }}>Free · Chrome extension</span>
                </div>
                <h2 className="h-2" style={{ color: PRODUCT_COLORS.codequickref.ink, textWrap: 'balance' }}>
                  Code QuickRef:{' '}<span style={{ color: PRODUCT_COLORS.codequickref.tile }}>Find the right ICD-10 code without knowing its exact verbiage.</span>
                </h2>
                <p style={{
                  fontSize: 15, color: PRODUCT_COLORS.codequickref.ink, opacity: 0.85,
                  marginTop: 14, marginBottom: 0, lineHeight: 1.55
                }}>
                  Describe a symptom or diagnosis the way you'd say it out loud, and Code QuickRef
                  suggests the closest-matching ICD-10 codes, ranked by fit. Runs as a Chrome
                  extension inside any EHR, so lookup never leaves the chart.
                </p>
              </div>
              <div style={{ display: 'flex', gap: 10 }}>
                <button className="btn btn-lg btn-arrow"
                style={{ background: PRODUCT_COLORS.codequickref.tile, color: '#fff' }}
                onClick={(e) => e.preventDefault()}>
                  Add to Chrome, free <ArrowRight />
                </button>
              </div>
            </div>
            <div style={{ padding: '32px 40px 32px 0', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <CodeQuickRefMock />
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="cmd-container">
          <InDevelopmentCard
            n="02"
            productKey="notes"
            name="ScribeAware™"
            tagline="Clinical documentation that lives inside the physician's workflow."
            audience="Physicians & APPs"
            body="Sitting in the documentation layer, ScribeAware is being designed alongside practicing physicians. Scope and capabilities are intentionally fluid while we build with our cohort."
            themes={['Documentation layer', 'Co-developed with practicing physicians']} />
        </div>
      </section>
    </div>);

}

// ── Solutions hero ───────────────────────────────────────────────────────────
function SolutionsHero({ go }) {
  return (
    <section style={{ paddingTop: 40, paddingBottom: 24 }}>
      <div className="cmd-container">
        <div style={{ textAlign: 'center', maxWidth: 1080, margin: '0 auto' }}>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '6px 14px', borderRadius: 999,
            background: 'var(--paper)', color: 'var(--ink-2)',
            border: '1px solid var(--line)', fontSize: 13, fontWeight: 500,
            marginBottom: 22, letterSpacing: '-0.005em'
          }}>
            <span style={{
              width: 6, height: 6, borderRadius: 999, background: 'var(--accent)',
              boxShadow: '0 0 0 3px rgba(31,92,61,0.18)'
            }} />
            Solutions for Physicians and Practices
          </span>

          <h1 className="h-display" style={{
            fontSize: 'clamp(28px, 3.6vw, 44px)',
            lineHeight: 1.05, letterSpacing: '-0.025em', whiteSpace: 'nowrap', margin: 0
          }}>
            From clinical note to clean payment,{' '}
            <span style={{ color: 'var(--accent)' }}>on one platform.</span>
          </h1>
          <p style={{
            fontSize: 21, color: 'var(--ink-2)', lineHeight: 1.55,
            maxWidth: 68 + 'ch', margin: '18px auto 0', fontWeight: 400
          }}>
            CriterionMD forms the operating layer of a procedural-specialty practice.
          </p>
          <p style={{
            fontSize: 21, color: 'var(--ink-2)', lineHeight: 1.55,
            maxWidth: 68 + 'ch', margin: '8px auto 0', fontWeight: 400
          }}>
            Each product solves a specific failure point in the physician-payer workflow.
          </p>

          <div style={{
            marginTop: 26, display: 'flex', gap: 12, justifyContent: 'center',
            flexWrap: 'wrap'
          }}>
            <button className="btn btn-lg btn-primary btn-arrow"
            onClick={() => go('access')}>
              Request a platform demo <ArrowRight />
            </button>
            <button className="btn btn-lg btn-outline"
            onClick={() => go('access')}>
              Try Insurify free
            </button>
          </div>
        </div>
      </div>
    </section>);

}

// ── Act header (DOCUMENT / AUTHORIZE / COLLECT) ──────────────────────────────
// A full-bleed section divider that groups the products under three platform
// layers — the three-act narrative reused from the home page, adapted as
// section markers between the deep product blocks.
function ActHeader({ n, label, title, sub }) {
  return (
    <section style={{
      borderTop: '1px solid var(--line)',
      background: 'var(--paper-2)',
      padding: '56px 0'
    }}>
      <div className="cmd-container">
        <div style={{
          display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 32,
          alignItems: 'center'
        }}>
          <div style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center',
            gap: 8, flexShrink: 0
          }}>
            <div style={{
              fontFamily: 'var(--font-mono)',
              fontSize: 'clamp(56px, 8vw, 96px)', fontWeight: 400,
              letterSpacing: '-0.05em', lineHeight: 0.85,
              color: 'var(--accent)', opacity: 0.92
            }}>{n}</div>
            <span className="mono" style={{
              fontSize: 12, letterSpacing: '.18em', color: 'var(--accent-ink)',
              fontWeight: 500
            }}>{label}</span>
          </div>
          <div>
            <h2 className="h-2" style={{
              fontSize: 'clamp(24px, 2.8vw, 36px)', textWrap: 'balance',
              margin: 0, letterSpacing: '-0.025em'
            }}>
              {title}
            </h2>
            <p style={{
              marginTop: 14, marginBottom: 0,
              fontSize: 17, color: 'var(--ink-2)', lineHeight: 1.55,
              maxWidth: 64 + 'ch'
            }}>
              {sub}
            </p>
          </div>
        </div>
      </div>
    </section>);

}

// ── Co-development invitation ────────────────────────────────────────────────
// Reinforces that the product roadmap is intentionally fluid and shaped with
// practicing physicians and practices — sets up the development@criterionmd.com
// channel as the main intake for collaboration.
function SolutionsCoDevelopment({ go }) {
  return (
    <section className="section section-divider">
      <div className="cmd-container">
        <div style={{
          position: 'relative', overflow: 'hidden',
          borderRadius: 18, padding: '48px 48px',
          background: 'linear-gradient(155deg, var(--accent) 0%, var(--accent-ink) 100%)',
          color: '#fff',
          boxShadow: '0 1px 0 rgba(15,20,20,.04), 0 30px 80px -28px rgba(31,92,61,.45)',
          display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 48, alignItems: 'center'
        }}>
          <div style={{
            position: 'absolute', inset: 0, opacity: 0.07,
            backgroundImage: 'linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px)',
            backgroundSize: '36px 36px', pointerEvents: 'none'
          }} />
          <div style={{ position: 'relative', zIndex: 1 }}>
            <div className="mono" style={{
              fontSize: 12, letterSpacing: '.18em', opacity: 0.8, marginBottom: 14
            }}>BUILD WITH US</div>
            <h2 className="h-1" style={{
              color: '#fff', textWrap: 'balance', margin: 0,
              fontSize: 'clamp(28px, 3.2vw, 40px)'
            }}>
              Have a workflow we should be{' '}
              <span style={{ color: 'var(--accent-tint-2)' }}>solving for?</span>
            </h2>
            <p style={{
              marginTop: 18, marginBottom: 0,
              fontSize: 17, lineHeight: 1.55,
              color: 'rgba(255,255,255,0.88)', maxWidth: 58 + 'ch'
            }}>
              We're actively developing new products with practicing physicians, practices,
              and health systems. If you're a doctor or a practice with a real problem you'd
              like to see solved, talk to us. We'll co-develop with you.
            </p>
          </div>
          <div style={{
            position: 'relative', zIndex: 1,
            background: 'rgba(255,255,255,0.08)',
            border: '1px solid rgba(255,255,255,0.2)',
            borderRadius: 14, padding: '28px 28px',
            backdropFilter: 'blur(6px)'
          }}>
            <div className="mono" style={{
              fontSize: 11, letterSpacing: '.16em',
              color: 'rgba(255,255,255,0.7)', marginBottom: 10
            }}>EMAIL THE DEVELOPMENT TEAM</div>
            <a href="mailto:development@criterionmd.com"
            style={{
              color: '#fff', fontSize: 22, fontWeight: 500,
              letterSpacing: '-0.015em', display: 'inline-block',
              borderBottom: '1px solid rgba(255,255,255,0.4)',
              paddingBottom: 4, wordBreak: 'break-all'
            }}>
              development@criterionmd.com
            </a>
            <p style={{
              marginTop: 16, marginBottom: 16,
              fontSize: 14, color: 'rgba(255,255,255,0.78)', lineHeight: 1.55
            }}>
              Tell us what you're stuck on. We read every note, and we'll route it to the
              founder closest to the problem.
            </p>
            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              <a href="mailto:development@criterionmd.com" className="btn btn-lg btn-arrow"
              style={{ background: '#fff', color: 'var(--accent-ink)' }}>
                Email us <ArrowRight />
              </a>
              <button className="btn btn-lg btn-outline"
              onClick={() => go('contact')}
              style={{
                background: 'transparent', color: '#fff',
                borderColor: 'rgba(255,255,255,0.3)'
              }}>
                Visit Contact
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ── Solutions outcomes / business case ───────────────────────────────────────
// Positive-framed numbered business case section, sized for the Solutions page.
function SolutionsOutcomes() {
  const ITEMS = [
  {
    n: '01',
    head: 'A single workflow, end to end.',
    body: 'One vendor between the chart and the payer, not five. Documentation, authorization, and collection sit on the same model of the patient, the procedure, and the policy.',
    tag: 'PLATFORM'
  },
  {
    n: '02',
    head: 'Revenue you would otherwise lose.',
    body: 'Denials caught earlier, underpayments surfaced earlier, peer-to-peers won more often. Every step where revenue typically leaks gets closed by the next product in the stack.',
    tag: 'OUTCOME'
  },
  {
    n: '03',
    head: 'Built around how procedural specialties actually work.',
    body: 'Spine, pain, orthopedics, EP, GI, ENT. Each product is designed by physicians in those specialties, with the payer-policy logic that actually applies to those procedures.',
    tag: 'POSTURE'
  }];

  return (
    <section className="section section-divider band-warm">
      <div className="cmd-container">
        <div style={{ maxWidth: 820, marginBottom: 36 }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>The business case</div>
          <h2 className="h-1" style={{
            fontSize: 'clamp(28px, 3.4vw, 44px)', margin: 0, textWrap: 'balance'
          }}>
            Multiple products,{' '}<span style={{ color: 'var(--accent)' }}>one outcome.</span>
          </h2>
          <p className="lede" style={{ marginTop: 16, fontSize: 18 }}>
            What you get when documentation, authorization, and collection are owned by the same platform, instead of five.
          </p>
        </div>
        <div className="grid-3" style={{ gap: 20 }}>
          {ITEMS.map((it) =>
          <article key={it.n} style={{
            background: 'var(--paper)', border: '1px solid var(--line)',
            borderRadius: 14, padding: '28px 28px 28px',
            display: 'flex', flexDirection: 'column'
          }}>
              <div style={{
              display: 'flex', justifyContent: 'space-between',
              alignItems: 'baseline', marginBottom: 22
            }}>
                <span className="mono" style={{
                fontSize: 13, color: 'var(--ink-3)', letterSpacing: '.08em'
              }}>{it.n}</span>
                <span className="mono" style={{
                fontSize: 10, letterSpacing: '.14em', color: 'var(--accent)',
                padding: '4px 8px', borderRadius: 4,
                background: 'var(--accent-tint)', border: '1px solid var(--accent-tint-2)'
              }}>{it.tag}</span>
              </div>
              <h3 style={{
              fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em',
              lineHeight: 1.2, color: 'var(--ink)', margin: 0, textWrap: 'balance'
            }}>{it.head}</h3>
              <p style={{
              marginTop: 14, marginBottom: 0, fontSize: 14.5, lineHeight: 1.55,
              color: 'var(--ink-2)', flex: 1
            }}>{it.body}</p>
            </article>
          )}
        </div>
      </div>
    </section>);

}

function SolutionDeep({ n, name, tagline, body, audience, bullets, reverse, viz }) {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center',
      padding: '32px 0', borderBottom: '1px solid var(--line)'
    }}>
      <div style={{ order: reverse ? 2 : 1 }}>
        <h3 className="h-2" style={{ textWrap: 'balance' }}>{name}</h3>
        <div style={{ fontSize: 18, color: 'var(--accent)', fontWeight: 500, marginTop: 8 }}>{tagline}</div>
        <p style={{ fontSize: 17, color: 'var(--ink-2)', marginTop: 18, lineHeight: 1.6 }}>{body}</p>
        <div style={{ display: 'flex', gap: 8, marginTop: 16, flexWrap: 'wrap' }}>
          <span className="pill pill-neutral">{audience}</span>
          <span className="pill pill-neutral"><span className="pill-dot"></span> Coming soon</span>
        </div>
        <ul style={{ listStyle: 'none', padding: 0, margin: '24px 0 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
          {bullets.map((b, i) =>
          <li key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.55 }}>
              <div style={{
              width: 20, height: 20, borderRadius: 999, background: 'var(--accent-tint)',
              color: 'var(--accent-ink)', display: 'flex', alignItems: 'center', justifyContent: 'center',
              marginTop: 2, flexShrink: 0
            }}><Check size={11} /></div>
              <span>{b}</span>
            </li>
          )}
        </ul>
      </div>
      <div style={{ order: reverse ? 1 : 2 }}>{viz}</div>
    </div>);

}

// ── In-development product card ─────────────────────────────────────────────
// Used in place of SolutionDeep for non-Insurify products. Intentionally vague:
// product is named (trademarks are public), but body/themes are framed broadly
// so we don't pigeon-hole a scope that's still being shaped with design partners.
function InDevelopmentCard({ n, productKey, name, tagline, audience, body, themes, reverse }) {
  const c = typeof PRODUCT_COLORS !== 'undefined' && PRODUCT_COLORS[productKey] ||
  { tile: '#1F5C3D', ink: '#143C28', soft: '#EEF3EE', soft2: '#DDE7DE' };
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center',
      padding: '32px 0', borderBottom: '1px solid var(--line)'
    }}>
      <div style={{ order: reverse ? 2 : 1 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
          <span className="mono" style={{
            fontSize: 12, letterSpacing: '.14em', color: 'var(--ink-3)'
          }}>{n}</span>
          <span style={{ flex: '0 0 24px', height: 1, background: 'var(--line)' }} />
          <span className="pill pill-neutral">
            <span className="pill-dot"></span> In development
          </span>
        </div>
        <h3 className="h-2" style={{ textWrap: 'balance', margin: 0 }}>{name}</h3>
        <div style={{ fontSize: 17, color: 'var(--accent)', fontWeight: 500, marginTop: 10 }}>
          {tagline}
        </div>
        <p style={{
          fontSize: 16, color: 'var(--ink-2)', marginTop: 16, marginBottom: 0,
          lineHeight: 1.6
        }}>{body}</p>
        <div style={{ display: 'flex', gap: 8, marginTop: 18, flexWrap: 'wrap' }}>
          <span className="pill pill-neutral">{audience}</span>
          {themes.map((t, i) =>
          <span key={i} style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '4px 10px', borderRadius: 999,
            background: 'var(--bg)', color: 'var(--ink-2)',
            border: '1px solid var(--line)',
            fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '.04em'
          }}>{t}</span>
          )}
        </div>
      </div>

      {/* Abstract panel — intentionally non-specific. Just the product mark on
           the brand tile, with a subtle in-development indicator. No mock UI. */}
      <div style={{ order: reverse ? 1 : 2 }}>
        <div style={{
          position: 'relative', overflow: 'hidden',
          borderRadius: 18, padding: '40px 36px', minHeight: 280,
          background: `linear-gradient(155deg, ${c.tile} 0%, ${c.ink} 100%)`,
          color: '#fff',
          boxShadow: `0 1px 0 rgba(15,20,20,.04), 0 30px 80px -28px ${c.tile}55`,
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between'
        }}>
          {/* subtle grid */}
          <div style={{
            position: 'absolute', inset: 0, opacity: 0.06,
            backgroundImage: 'linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px)',
            backgroundSize: '36px 36px', pointerEvents: 'none'
          }} />
          {/* glow */}
          <div style={{
            position: 'absolute', top: -120, right: -120, width: 320, height: 320,
            borderRadius: 999,
            background: 'radial-gradient(closest-side, rgba(255,255,255,0.22), transparent)',
            pointerEvents: 'none'
          }} />

          <div style={{
            position: 'relative', zIndex: 1, display: 'flex',
            alignItems: 'center', justifyContent: 'space-between'
          }}>
            <span className="mono" style={{
              fontSize: 12, letterSpacing: '.16em', opacity: 0.75
            }}>{n} · {name.replace(/™$/, '').toUpperCase()}</span>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '4px 10px', borderRadius: 999,
              background: 'rgba(255,255,255,0.18)',
              fontSize: 12, fontWeight: 500
            }}>
              <span style={{
                width: 6, height: 6, borderRadius: 999, background: '#fff',
                boxShadow: '0 0 0 4px rgba(255,255,255,0.22)'
              }} />
              In development
            </span>
          </div>

          <div style={{
            position: 'relative', zIndex: 1,
            width: 92, height: 92, borderRadius: 20,
            background: productKey === 'notes' ? '#fff' : 'rgba(255,255,255,0.16)',
            border: '1px solid rgba(255,255,255,0.28)',
            backdropFilter: 'blur(8px)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            margin: '8px 0', overflow: 'hidden'
          }}>
            <ProductMark k={productKey} size={productKey === 'notes' ? 64 : 48} />
          </div>

          <div style={{
            position: 'relative', zIndex: 1,
            borderTop: '1px solid rgba(255,255,255,0.16)', paddingTop: 16,
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            gap: 16, flexWrap: 'wrap'
          }}>
            <div>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 11,
                letterSpacing: '.14em', opacity: 0.7
              }}>SHAPED WITH</div>
              <div style={{ marginTop: 4, fontSize: 13, fontWeight: 500 }}>
                {themes[1] ? themes[1].replace(/^Co-developed (with|across) /, '') : 'Design partners'}
              </div>
            </div>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 11,
              letterSpacing: '.14em', opacity: 0.7
            }}>
              SCOPE FLUID
            </div>
          </div>
        </div>
      </div>
    </div>);

}

// ─── Solution previews ───────────────────────────────────────────────────────
function NotesViz() {
  return (
    <div className="mock">
      <div className="mock-bar" style={{ justifyContent: 'space-between' }}>
        <span>AI Note Completion · physician draft</span>
        <span className="mono">style · M. Okafor, MD</span>
      </div>
      <div style={{ padding: '20px 22px', fontSize: 13, lineHeight: 1.65, color: 'var(--ink-2)' }}>
        <div className="eyebrow" style={{ marginBottom: 8 }}>ASSESSMENT / PLAN</div>
        <p style={{ margin: 0 }}>
          Lumbar facet-mediated pain, L4-5 and L5-S1 bilateral.
          <br />
          Plan to proceed with diagnostic{' '}
          <mark style={{ background: 'var(--accent-tint)', color: 'var(--accent-ink)', padding: '0 3px', borderRadius: 3, position: 'relative' }}>
            lumbar medial branch block
          </mark>{' '}
          to target the{' '}
          <span style={{ position: 'relative', borderBottom: '1.5px dashed var(--warn)', cursor: 'help' }}>
            bilateral L4 to S1 facet joints
          </span>.
        </p>
        <div style={{
          marginTop: 14, padding: '10px 12px', background: 'var(--paper-2)',
          border: '1px solid var(--line)', borderRadius: 8, fontSize: 12,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{
              width: 16, height: 16, borderRadius: 999, background: 'var(--warn-tint)',
              color: 'var(--warn)', display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontWeight: 600, fontSize: 12
            }}>!</div>
            <span style={{ color: 'var(--ink-2)' }}>
              Inferred from prior notes. Confirm before signing.
            </span>
          </div>
          <div style={{ display: 'flex', gap: 6 }}>
            <button className="btn btn-sm" style={{ height: 26, padding: '0 10px', background: 'var(--accent)', color: '#fff' }}>Accept</button>
            <button className="btn btn-sm btn-outline" style={{ height: 26, padding: '0 10px' }}>Edit</button>
          </div>
        </div>
        <div className="eyebrow" style={{ marginTop: 18, marginBottom: 8 }}>STYLE LEARNED FROM DR. OKAFOR</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
          {['Concise A/P', 'Levels-first format', 'Cites prior PT duration', 'Notes laterality early', 'No bullet lists'].map((t, i) =>
          <span key={i} className="pill pill-neutral" style={{ height: 22, fontSize: 12 }}>{t}</span>
          )}
        </div>
      </div>
    </div>);

}

function AuthDeskViz() {
  const items = [
  { p: 'Alvarez, R.', proc: 'Lumbar MBB · L4-5', payer: 'Aetna PPO', stage: 'Submitted', day: 'D+2', tone: 'progress' },
  { p: 'Chen, W.', proc: 'Cervical RFA · C5-C6', payer: 'BCBS NY', stage: 'Pending review', day: 'D+4', tone: 'wait' },
  { p: 'Diaz, A.', proc: 'Lumbar ESI · L4-5', payer: 'UHC', stage: 'Approved', day: 'D+6', tone: 'done' },
  { p: 'Fischer, H.', proc: 'SI joint inj.', payer: 'Cigna', stage: 'Add\'l info', day: 'D+3', tone: 'warn' },
  { p: 'Gomes, P.', proc: 'Lumbar RFA · L4', payer: 'Medicare', stage: 'P2P scheduled', day: 'D+5', tone: 'wait' }];

  return (
    <div className="mock">
      <div className="mock-bar" style={{ justifyContent: 'space-between' }}>
        <span>Authorization Desk · queue</span>
        <span className="mono">14 pending · 6 ready</span>
      </div>
      <div style={{ padding: 18 }}>
        {items.map((x, i) =>
        <div key={i} style={{
          display: 'grid', gridTemplateColumns: '1.2fr 1.2fr 0.9fr 1.2fr 0.6fr',
          gap: 10, padding: '12px 6px',
          borderBottom: i < items.length - 1 ? '1px solid var(--line-2)' : 0,
          fontSize: 12, alignItems: 'center'
        }}>
            <span style={{ fontWeight: 500 }}>{x.p}</span>
            <span style={{ color: 'var(--ink-2)' }}>{x.proc}</span>
            <span style={{ color: 'var(--ink-3)' }}>{x.payer}</span>
            <span className={'pill ' + (x.tone === 'warn' ? 'pill-warn' : x.tone === 'done' ? '' : 'pill-neutral')}
          style={{ height: 20, fontSize: 12 }}>
              <span className="pill-dot"></span> {x.stage}
            </span>
            <span className="mono" style={{ fontSize: 12, color: 'var(--ink-3)', textAlign: 'right' }}>{x.day}</span>
          </div>
        )}
      </div>
    </div>);

}

function RcmViz() {
  return (
    <div className="mock" style={{ padding: 22 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <span className="eyebrow">Reimbursement variance · this month</span>
        <span className="mono" style={{ fontSize: 12 }}>−$24,180</span>
      </div>
      <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {[
        { p: 'Aetna PPO', cpt: '64493', exp: '$310', got: '$278', d: '−10.3%' },
        { p: 'BCBS NY', cpt: '64635', exp: '$520', got: '$520', d: '0%' },
        { p: 'UHC', cpt: '64636', exp: '$280', got: '$224', d: '−20.0%' },
        { p: 'Cigna', cpt: '27096', exp: '$240', got: '$240', d: '0%' },
        { p: 'Medicare', cpt: '64493', exp: '$198', got: '$198', d: '0%' }].
        map((r, i) =>
        <div key={i} style={{
          display: 'grid', gridTemplateColumns: '1fr 0.6fr 0.6fr 0.6fr 0.6fr',
          gap: 12, fontSize: 12, alignItems: 'center'
        }}>
            <span style={{ fontWeight: 450 }}>{r.p}</span>
            <span className="mono" style={{ color: 'var(--ink-3)' }}>{r.cpt}</span>
            <span className="mono">{r.exp}</span>
            <span className="mono">{r.got}</span>
            <span className="mono" style={{
            color: r.d.startsWith('−') ? 'var(--danger)' : 'var(--ink-3)',
            textAlign: 'right', fontWeight: 500
          }}>{r.d}</span>
          </div>
        )}
      </div>
      <hr className="divider" style={{ margin: '20px 0 14px' }} />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
        <PortalStat label="Net collection" value="94.1%" delta="+1.2 pts" />
        <PortalStat label="Days in A/R" value="34" delta="−3" />
        <PortalStat label="Recovered" value="$8.4K" delta="month-to-date" />
      </div>
    </div>);

}

function DenialViz() {
  return (
    <div className="mock" style={{ padding: 22 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 16 }}>
        <span className="eyebrow">Top denial clusters · last 30 days</span>
        <span className="mono" style={{ fontSize: 12 }}>62 denials</span>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {[
        { c: 'CO-50 · Not medically necessary', p: 'Aetna · 64493', n: 18, pct: 100 },
        { c: 'CO-197 · Auth required', p: 'BCBS · 64635', n: 14, pct: 78 },
        { c: 'CO-15 · Auth invalid', p: 'UHC · multiple', n: 11, pct: 61 },
        { c: 'CO-11 · Diagnosis inconsistent', p: 'Cigna · 27096', n: 9, pct: 50 },
        { c: 'CO-29 · Time-limit exceeded', p: 'Medicare · 64493', n: 6, pct: 33 }].
        map((d, i) =>
        <div key={i}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 6 }}>
              <span style={{ fontWeight: 450 }}>{d.c}</span>
              <span className="mono" style={{ color: 'var(--ink-3)' }}>{d.n} · {d.p}</span>
            </div>
            <div style={{ height: 5, background: 'var(--line-2)', borderRadius: 999, overflow: 'hidden' }}>
              <div style={{ width: `${d.pct}%`, height: '100%', background: i === 0 ? 'var(--danger)' : 'var(--warn)' }} />
            </div>
          </div>
        )}
      </div>
      <div style={{ marginTop: 18, padding: '10px 12px', background: 'var(--accent-tint)', border: '1px solid var(--accent-tint-2)', borderRadius: 8, fontSize: 12, color: 'var(--accent-ink)' }}>
        <strong style={{ fontWeight: 500 }}>Pattern detected.</strong> 12 of 18 Aetna CO-50 denials cite missing
        VAS history. Draft appeal templates ready for review.
      </div>
    </div>);

}

function PolicyViz() {
  return (
    <div className="mock" style={{ padding: 0 }}>
      <div className="mock-bar" style={{ justifyContent: 'space-between' }}>
        <span>Payer Policy Monitor · recent changes</span>
        <span className="mono">3 affect your patients</span>
      </div>
      <div style={{ padding: 18, display: 'flex', flexDirection: 'column', gap: 14 }}>
        {[
        { p: 'UnitedHealth', pol: 'MPM 2026T0590S · Facet joint injections', date: 'Effective Nov 1, 2026', impact: '3 patients', urgent: true },
        { p: 'Aetna', pol: 'CPB 0722 · Medial branch blocks · rev. 09', date: 'Effective Sep 15, 2026', impact: '11 patients', urgent: false },
        { p: 'BCBS NY', pol: 'MP 6.01.30 · Cervical RFA', date: 'Effective Jul 1, 2026', impact: 'No active patients', urgent: false }].
        map((p, i) =>
        <div key={i} style={{
          padding: '12px 14px', border: '1px solid var(--line)', borderRadius: 8,
          background: p.urgent ? 'var(--warn-tint)' : '#fff',
          borderColor: p.urgent ? '#F1D9BB' : 'var(--line)'
        }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <div style={{ fontSize: 13, fontWeight: 500 }}>{p.p}</div>
              <span className={'pill ' + (p.urgent ? 'pill-warn' : 'pill-neutral')} style={{ height: 20, fontSize: 12 }}>
                <span className="pill-dot"></span> {p.urgent ? 'action required' : 'monitored'}
              </span>
            </div>
            <div style={{ fontSize: 12, color: 'var(--ink-2)', marginTop: 4 }}>{p.pol}</div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8, fontSize: 12, color: 'var(--ink-3)' }}>
              <span>{p.date}</span>
              <span className="mono">{p.impact}</span>
            </div>
          </div>
        )}
      </div>
    </div>);

}

// ─── INSURIFY PRODUCT PAGE ───────────────────────────────────────────────────
function InsurifyPage({ go }) {
  return (
    <div data-screen-label="03 Insurify">
      {/* Hero */}
      <section style={{ paddingTop: 40, paddingBottom: 24 }}>
        <div className="cmd-container">
          <div style={{ textAlign: 'center', maxWidth: 1080, margin: '0 auto' }}>
            <h1 className="h-display" style={{
              fontSize: 'clamp(28px, 3.6vw, 44px)',
              lineHeight: 1.05,
              letterSpacing: '-0.025em',
              whiteSpace: 'nowrap',
              margin: 0
            }}>
              Real-time medical-necessity,{' '}
              <span style={{ color: 'var(--accent)' }}>inside the note.</span>
            </h1>
            <p style={{
              fontSize: 21, color: 'var(--ink-2)', lineHeight: 1.55,
              maxWidth: 68 + 'ch', margin: '18px auto 0', fontWeight: 400
            }}>
              Provides real-time feedback to physicians as the note is written, so documentation meets payer criteria and stays compliant from a medicolegal and audit standpoint.
            </p>
            <div style={{ marginTop: 18, display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap', justifyContent: 'center', fontSize: 12, color: 'var(--ink-3)' }}>
              <span className="pill"><span className="pill-dot"></span> Public beta · NPI verified providers</span>
              <span className="pill pill-neutral">Free</span>
              <span>EHR-agnostic</span>
            </div>

            {/* Beta callout — daily updates driven by user feedback */}
            <div style={{
              marginTop: 22,
              maxWidth: 680, marginLeft: 'auto', marginRight: 'auto',
              background: 'var(--paper)', border: '1px solid var(--accent-tint-2)',
              borderRadius: 14, padding: '14px 18px',
              display: 'flex', alignItems: 'center', gap: 14,
              textAlign: 'left',
              boxShadow: '0 1px 0 rgba(15,20,20,.03), 0 12px 30px -20px rgba(31,92,61,.18)'
            }}>
              <div style={{
                width: 36, height: 36, borderRadius: 10, flexShrink: 0,
                background: 'var(--accent-tint)', color: 'var(--accent-ink)',
                display: 'flex', alignItems: 'center', justifyContent: 'center'
              }}>
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
                  <path d="M3 9a6 6 0 0 1 10.2-4.24M15 9a6 6 0 0 1-10.2 4.24"
                  stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
                  <path d="M13 2v3h-3M5 16v-3h3" stroke="currentColor"
                  strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{
                  fontSize: 14, fontWeight: 500, color: 'var(--ink)',
                  letterSpacing: '-0.005em'
                }}>
                  This is an active beta. Expect daily updates.
                </div>
                <div style={{
                  fontSize: 13, color: 'var(--ink-3)', marginTop: 4, lineHeight: 1.5
                }}>
                  Insurify provides updates based on physician feedback from the cohort.
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Big product mock */}
      <section style={{ paddingBottom: 36 }} id="insurify-mock-anchor">
        <div className="cmd-container">
          <InsurifyMock />
          <div className="grid-3" style={{ marginTop: 32 }}>
            <Footnote label="Procedure detection" />
            <Footnote label="Payer matched" />
            <Footnote label="Auth readiness" />
          </div>
        </div>
      </section>

      {/* Feature deep-dives */}
      <section className="section-divider" style={{ padding: '54px 0' }}>
        <div className="cmd-container">
          <FeatureRow
            num="01"
            kicker="Procedure detection"
            title={<>Reads the note <span style={{ color: 'var(--accent)' }}>as you write it.</span></>}
            body="Insurify identifies the procedure, the laterality, the levels, and the diagnostic intent from your own clinical language. No templates, no dropdowns, no extra clicks. It meets the clinician where they are, in their own documentation style, to ensure payer criteria are met for the recommended procedure."
            mock={<MiniDetect />} />
          
          <FeatureRow
            num="02"
            kicker="Payer + policy resolution"
            title={<>Finds the policy that actually applies to{' '}<span style={{ color: 'var(--accent)' }}>this patient.</span></>}
            body="Insurify matches the patient's insurance policy against the medical-necessity criteria, through a proprietary algorithm, to reduce the risk of unnecessary denials and to alert the clinician if a criterion is missing from the note, before they finish their documentation. No unnecessary uncompensated after-hours patient calls to update the plan of care because of an insurance denial. No unnecessary delays in patient care."
            reverse
            mock={<MiniPayer />} />
          
          <FeatureRow
            num="03"
            kicker="Medical-necessity mapping"
            title={<>Every criterion. Every line.<br /><span style={{ color: 'var(--accent)' }}>Every visit.</span></>}
            body="Insurify walks the payer's published criteria one at a time and looks for the supporting evidence in this note, prior notes, exam findings, imaging reports, and prior conservative therapy. Met requirements are highlighted; gaps are flagged with the exact sentence the policy is looking for."
            mock={<MiniMap />} />
          
          <FeatureRow
            num="04"
            kicker="Authorization readiness"
            title={<>A score that{' '}<span style={{ color: 'var(--accent)' }}>means something.</span></>}
            body="Authorization readiness rolls up every required and supporting criterion into a single number, with the gaps listed in priority order. When readiness hits the threshold for that payer, the note is ready to submit, and the supporting bundle is ready to attach."
            reverse
            mock={<MiniReadiness />} />
          
        </div>
      </section>

      {/* Specialty rollout */}
      <SpecialtyRollout />

      {/* Workflow */}
      <section className="section section-divider band-warm">
        <div className="cmd-container">
          <div className="eyebrow" style={{ marginBottom: 16 }}>Workflow</div>
          <h2 className="h-2" style={{ maxWidth: 720 }}>Designed around the way pain clinics{' '}<span style={{ color: 'var(--accent)' }}>actually run.</span></h2>
          <div className="grid-2" style={{ marginTop: 48, gap: 32 }}>
            <WorkflowCol
              role="Physician"
              points={[
              'Write the note the way you always have.',
              'Glance at the side panel when you want to.',
              'See gaps inline, in your own words, with the policy citation.',
              'Sign once the criteria are met. No re-work after denials.']
              } />
            
            <WorkflowCol
              role="Practice administrator"
              points={[
              'See every chart heading to authorization on a single board.',
              'Sort by payer, by procedure, by readiness, by physician.',
              'Push gaps back to the physician without re-opening the note.',
              'Submit when readiness clears the threshold for that payer.']
              } />
            
          </div>
        </div>
      </section>

      {/* Integrations */}
      <section className="section section-divider">
        <div className="cmd-container">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24, marginBottom: 32 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>Integrations</div>
              <h2 className="h-2" style={{ maxWidth: 720 }}>EHR-agnostic. Works alongside{' '}<span style={{ color: 'var(--accent)' }}>what you already have.</span></h2>
            </div>
            <span className="pill pill-neutral"><span className="pill-dot"></span> Coming soon</span>
          </div>
          <p style={{ fontSize: 17, color: 'var(--ink-2)', lineHeight: 1.55, maxWidth: 760, marginTop: 0 }}>
            EHR integrations are in active development. Insurify is being designed to plug into the major ambulatory and procedural EHRs through sidebar apps, embedded panels, and direct API access. We'll share named integrations as each goes live.
          </p>
        </div>
      </section>

      {/* Security */}
      <section className="section section-divider band-tint">
        <div className="cmd-container">
          <div className="eyebrow" style={{ marginBottom: 16 }}>Trust, security &amp; data handling</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 48, alignItems: 'flex-start' }}>
            <h2 className="h-2">Designed to earn{' '}<span style={{ color: 'var(--accent)' }}>physician trust.</span></h2>
            <p style={{ fontSize: 17, color: 'var(--ink-2)', lineHeight: 1.55, margin: 0 }}>
              Insurify is built on three commitments: independent clinical and payer logic, mandatory physician verification on every inferred element, and compliance by design. We treat protected health information as a first-class concern from the architecture up. We are not yet certifying compliance frameworks; we'll publish status transparently as we progress.
            </p>
          </div>
        </div>
        <div style={{ position: 'relative', marginTop: 28 }}>
          <div id="sec-scroller" style={{
            display: 'flex', gap: 14,
            overflowX: 'auto', overflowY: 'hidden',
            padding: '4px var(--pad-x) 24px',
            scrollSnapType: 'x mandatory',
            scrollPaddingLeft: 'var(--pad-x)',
            scrollbarWidth: 'thin'
          }}>
            <SecCard t="Independent clinical and payer logic" s="The product's clinical and payer-policy output is independent. It is not shaped by anything outside the chart, the policy, and the evidence." />
            <SecCard t="Mandatory physician verification" s="Every inferred or auto-generated element requires explicit physician acceptance, editing, or rejection before it lands in the chart." />
            <SecCard t="Compliance by design" s="Legal, regulatory, and clinical review shape the product architecture from inception, not as an afterthought." />
            <SecCard t="In-transit and at-rest encryption" s="TLS 1.3 in transit · AES-256 at rest · per-tenant key isolation." />
            <SecCard t="Role-based access" s="Physician, mid-level, administrator, and billing roles with separate scopes." />
            <SecCard t="Audit trail" s="Every read and write to PHI surfaces in an admin-visible audit log." />
            <SecCard t="Compliance posture" s="HIPAA-aligned architecture · BAAs available for practice pilots · SOC 2 Type I planned." pending />
            <SecCard t="Data residency" s="US-only. PHI never leaves the United States." />
            <div style={{ flex: '0 0 var(--pad-x)' }} />
          </div>
          <div style={{
            position: 'absolute', left: 0, top: 0, bottom: 0, width: 56,
            background: 'linear-gradient(90deg, var(--bg), transparent)',
            pointerEvents: 'none', zIndex: 2
          }} />
          <div style={{
            position: 'absolute', right: 0, top: 0, bottom: 0, width: 56,
            background: 'linear-gradient(-90deg, var(--bg), transparent)',
            pointerEvents: 'none', zIndex: 2
          }} />
        </div>
      </section>

      {/* CTA */}
      <section className="section section-divider">
        <div className="cmd-container">
          <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto' }}>
            <h2 className="h-2">See Insurify against{' '}<span style={{ color: 'var(--accent)' }}>your actual payer mix.</span></h2>
            <p className="lede" style={{ margin: '20px auto 32px' }}>
              We'll run a private demo against the payers you actually see, with the procedures you actually do.
            </p>
            <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
              <button className="btn btn-lg btn-primary btn-arrow" onClick={() => go('access')}>
                Request access <ArrowRight />
              </button>
              <button className="btn btn-lg btn-outline" onClick={() => go('contact')}>Talk to founders</button>
            </div>
          </div>
        </div>
      </section>
    </div>);

}

function Footnote({ label, body }) {
  return (
    <div style={{ textAlign: 'center' }}>
      <div className="eyebrow" style={{ marginBottom: body ? 6 : 0 }}>{label}</div>
      {body && <div style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.5 }}>{body}</div>}
    </div>);

}

function FeatureRow({ num, kicker, title, body, mock, reverse }) {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 64, alignItems: 'center',
      padding: '36px 0', borderBottom: '1px solid var(--line)'
    }}>
      <div style={{ order: reverse ? 2 : 1 }}>
        <h3 className="h-2" style={{ textWrap: 'balance' }}>{title}</h3>
        <p className="lede" style={{ marginTop: 18, fontSize: 18 }}>{body}</p>
      </div>
      <div style={{ order: reverse ? 1 : 2 }}>{mock}</div>
    </div>);

}

function WorkflowCol({ role, points }) {
  return (
    <div className="card card-pad">
      <div className="eyebrow" style={{ marginBottom: 16 }}>{role}</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
        {points.map((p, i) =>
        <li key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
            <span className="mono" style={{
            flexShrink: 0, fontSize: 12, color: 'var(--accent)',
            width: 22, height: 22, display: 'flex', alignItems: 'center', justifyContent: 'center',
            borderRadius: 999, background: 'var(--accent-tint)', marginTop: 1
          }}>{(i + 1).toString().padStart(2, '0').slice(1)}</span>
            <span style={{ fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.5 }}>{p}</span>
          </li>
        )}
      </ul>
    </div>);

}

function SecRow({ t, s, pending }) {
  return (
    <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start', padding: '16px 0', borderTop: '1px solid var(--line)' }}>
      <div style={{
        width: 22, height: 22, borderRadius: 999, marginTop: 2, flexShrink: 0,
        background: pending ? 'var(--paper-2)' : 'var(--accent-tint)',
        color: pending ? 'var(--ink-3)' : 'var(--accent-ink)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        border: '1px solid ' + (pending ? 'var(--line)' : 'var(--accent-tint-2)'),
        fontSize: 12, fontWeight: 600
      }}>
        {pending ? '…' : <Check size={12} />}
      </div>
      <div>
        <div style={{ fontSize: 15, fontWeight: 500 }}>{t}</div>
        <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 2 }}>{s}</div>
      </div>
    </div>);

}

function SecCard({ t, s, pending }) {
  return (
    <div style={{
      flex: '0 0 320px', scrollSnapAlign: 'start',
      padding: 22, borderRadius: 12,
      background: pending ? 'var(--paper-2)' : '#fff',
      border: '1px solid ' + (pending ? 'var(--line)' : 'var(--accent-tint-2)'),
      display: 'flex', flexDirection: 'column', gap: 12
    }}>
      <div style={{
        width: 36, height: 36, borderRadius: 10,
        background: pending ? '#fff' : 'var(--accent-tint)',
        color: pending ? 'var(--ink-3)' : 'var(--accent-ink)',
        border: '1px solid ' + (pending ? 'var(--line)' : 'var(--accent-tint-2)'),
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 14, fontWeight: 600
      }}>
        {pending ? <Check size={16} /> : <Check size={16} />}
      </div>
      <div style={{ fontSize: 17, fontWeight: 500, letterSpacing: '-0.01em', color: 'var(--ink)' }}>{t}</div>
      <p style={{ fontSize: 14, color: 'var(--ink-2)', margin: 0, lineHeight: 1.55 }}>{s}</p>
    </div>);

}

// Feature-row mini mocks
function MiniDetect() {
  return (
    <div className="mock" style={{ padding: 24 }}>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, lineHeight: 1.7, color: 'var(--ink-2)' }}>
        <div>Plan for <span style={{ background: 'var(--accent-tint)', color: 'var(--accent-ink)', padding: '1px 5px', borderRadius: 3 }}>diagnostic</span></div>
        <div><span style={{ background: 'var(--accent-tint)', color: 'var(--accent-ink)', padding: '1px 5px', borderRadius: 3 }}>lumbar medial branch block</span></div>
        <div>at <span style={{ background: 'var(--accent-tint)', color: 'var(--accent-ink)', padding: '1px 5px', borderRadius: 3 }}>L4, L5</span> dorsal rami,</div>
        <div><span style={{ background: 'var(--accent-tint)', color: 'var(--accent-ink)', padding: '1px 5px', borderRadius: 3 }}>bilateral</span>.</div>
      </div>
      <hr className="divider" style={{ margin: '20px 0' }} />
      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
        <span className="eyebrow">Detected →</span>
        <span className="pill"><span className="mono">64493</span></span>
        <span className="pill"><span className="mono">64494</span></span>
        <span className="pill pill-neutral">×2 levels</span>
        <span className="pill pill-neutral">bilateral</span>
      </div>
    </div>);

}

function MiniPayer() {
  return (
    <div className="mock" style={{ padding: 0 }}>
      <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--line)' }}>
        <div className="eyebrow">Patient coverage</div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 8 }}>
          <div>
            <div style={{ fontWeight: 500 }}>Aetna PPO · Open Access</div>
            <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>Member ID W482******** · Active 2026</div>
          </div>
          <span className="pill"><Check size={11} /> verified</span>
        </div>
      </div>
      <div style={{ padding: '16px 20px' }}>
        <div className="eyebrow" style={{ marginBottom: 10 }}>Applicable policy</div>
        <div style={{
          padding: '12px 14px', background: 'var(--paper-2)', borderRadius: 8,
          border: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between'
        }}>
          <div>
            <div style={{ fontSize: 14, fontWeight: 500 }}>CPB 0722</div>
            <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>Facet joint injections, medial branch blocks, neurotomies</div>
          </div>
          <span className="mono" style={{ fontSize: 12, color: 'var(--ink-3)' }}>rev 2026-03</span>
        </div>
      </div>
    </div>);

}

function MiniMap() {
  return (
    <div className="mock" style={{ padding: 0 }}>
      <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between' }}>
        <span className="eyebrow">Criteria mapping</span>
        <span style={{ fontSize: 12, color: 'var(--ink-3)' }} className="mono">5 / 7 met</span>
      </div>
      <CriteriaList tick={0} />
    </div>);

}

function MiniReadiness() {
  return (
    <div className="mock" style={{ padding: 24 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <div className="eyebrow">Authorization readiness</div>
        <span className="mono" style={{ fontSize: 13 }}>72%</span>
      </div>
      <div style={{ height: 8, background: 'var(--line-2)', borderRadius: 999, marginTop: 12, overflow: 'hidden' }}>
        <div style={{ width: '72%', height: '100%', background: 'var(--accent)' }} />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginTop: 24, paddingTop: 20, borderTop: '1px solid var(--line)' }}>
        <div>
          <div className="mono" style={{ fontSize: 12, color: 'var(--ink-3)', letterSpacing: '.06em' }}>MET</div>
          <div style={{ fontSize: 22, fontWeight: 500, marginTop: 4 }}>5</div>
        </div>
        <div>
          <div className="mono" style={{ fontSize: 12, color: 'var(--warn)', letterSpacing: '.06em' }}>GAPS</div>
          <div style={{ fontSize: 22, fontWeight: 500, marginTop: 4 }}>2</div>
        </div>
        <div>
          <div className="mono" style={{ fontSize: 12, color: 'var(--ink-3)', letterSpacing: '.06em' }}>THRESHOLD</div>
          <div style={{ fontSize: 22, fontWeight: 500, marginTop: 4 }}>86%</div>
        </div>
      </div>
      <div style={{ display: 'flex', gap: 8, marginTop: 20 }}>
        <button className="btn btn-sm btn-primary">Address gaps <ArrowRight /></button>
        <button className="btn btn-sm btn-outline">Submit anyway</button>
      </div>
    </div>);

}

// ─── ACCESS — split: physician free signup + practice demo ───────────────────
function AccessPage({ go }) {
  const [tab, setTab] = React.useState('physician');
  const [sent, setSent] = React.useState(null);
  if (sent) return <AccessSent kind={sent} go={go} reset={() => setSent(null)} />;

  return (
    <div data-screen-label="04 Get access">
      <section style={{ paddingTop: 56, paddingBottom: 0 }}>
        <div className="cmd-container">
          <div className="eyebrow" style={{ marginBottom: 20 }}>Get access</div>
          <h1 className="h-1" style={{ textWrap: 'balance', maxWidth: 20 + 'ch' }}>
            Pick the path{' '}<span style={{ color: 'var(--accent)' }}>that fits.</span>
          </h1>
          <p className="lede" style={{ marginTop: 16 }}>
            Insurify is free for individual physicians and APPs. The broader platform (Authorization Desk, RCM Intelligence, Denial Analytics, Payer Policy Monitor) is scoped per practice.
          </p>

          {/* Tab switcher */}
          <div style={{ marginTop: 36, display: 'inline-flex', padding: 4, background: 'var(--paper-2)', borderRadius: 999, border: '1px solid var(--line)' }}>
            <TabBtn active={tab === 'physician'} onClick={() => setTab('physician')}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--accent)', display: 'inline-block', marginRight: 8 }} />
              I'm a physician or APP. Get Insurify free
            </TabBtn>
            <TabBtn active={tab === 'practice'} onClick={() => setTab('practice')}>
              I represent a practice or health org. Request a demo
            </TabBtn>
          </div>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 36 }}>
        <div className="cmd-container">
          {tab === 'physician' ?
          <PhysicianSignup onSubmit={() => setSent('physician')} /> :
          <PracticeDemo onSubmit={() => setSent('practice')} />}
        </div>
      </section>
    </div>);

}

function TabBtn({ active, onClick, children }) {
  return (
    <button onClick={onClick} style={{
      appearance: 'none', border: 0, padding: '10px 18px', borderRadius: 999,
      background: active ? '#fff' : 'transparent',
      color: active ? 'var(--ink)' : 'var(--ink-3)',
      fontSize: 13, fontWeight: 500, fontFamily: 'inherit',
      boxShadow: active ? 'var(--shadow-sm)' : 'none',
      transition: 'all .15s ease'
    }}>{children}</button>);

}

function PhysicianSignup({ onSubmit }) {
  const [npi, setNpi] = React.useState('1487359201');
  const [verified, setVerified] = React.useState(false);
  const looksValid = /^\d{10}$/.test(npi);
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.05fr', gap: 56, alignItems: 'flex-start' }}>
      <div>
        <div className="card card-pad" style={{ background: 'var(--accent-tint)', borderColor: 'var(--accent-tint-2)' }}>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 12 }}>
            <span className="pill" style={{ background: '#fff', borderColor: 'var(--accent-tint-2)' }}>
              <span className="pill-dot"></span> Free
            </span>
            <span className="pill pill-neutral" style={{ background: '#fff' }}>NPI required</span>
          </div>
          <div style={{ fontSize: 19, fontWeight: 500, color: 'var(--accent-ink)' }}>
            Insurify is free for licensed clinicians.
          </div>
          <p style={{ fontSize: 14, color: 'var(--accent-ink)', opacity: 0.85, marginTop: 8, marginBottom: 0, lineHeight: 1.55 }}>
            Sign up with your work email. We verify your NPI against the NPPES registry, then you're in. No credit card, no practice contract, no usage limits.
          </p>
        </div>

        <ul style={{ listStyle: 'none', padding: 0, margin: '32px 0 0', display: 'flex', flexDirection: 'column', gap: 14 }}>
          {[
          { t: 'Free for individual clinicians', s: 'No tier shenanigans. The free tier is the only tier for physicians.' },
          { t: 'About 90 seconds to set up', s: 'Email → NPI verification → first note.' },
          { t: 'EHR-agnostic', s: 'Sidebar app for Epic and athena · embedded for ModMed and AdvancedMD · web for everyone else.' },
          { t: 'Your data, your patients', s: 'PHI processed under standard BAA terms. We don\'t train models on your notes.' }].
          map((x, i) =>
          <li key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
              <div style={{
              width: 22, height: 22, borderRadius: 999, marginTop: 2,
              background: 'var(--accent-tint)', color: 'var(--accent-ink)',
              display: 'flex', alignItems: 'center', justifyContent: 'center'
            }}><Check size={12} /></div>
              <div>
                <div style={{ fontSize: 15, fontWeight: 500 }}>{x.t}</div>
                <div style={{ fontSize: 13, color: 'var(--ink-3)' }}>{x.s}</div>
              </div>
            </li>
          )}
        </ul>
      </div>

      <form className="card" style={{ padding: 32 }} onSubmit={(e) => {e.preventDefault();onSubmit();}}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 4 }}>
          <h3 className="h-3">Create your free account</h3>
          <span className="mono" style={{ fontSize: 12, color: 'var(--ink-3)', letterSpacing: '.06em' }}>STEP 1 / 1</span>
        </div>
        <p style={{ fontSize: 13, color: 'var(--ink-3)', margin: '0 0 20px' }}>
          Physicians and APPs only. We verify against NPPES.
        </p>

        <div className="grid-2" style={{ gap: 14 }}>
          <div><label className="label">First name</label><input className="input" defaultValue="Marin" /></div>
          <div><label className="label">Last name</label><input className="input" defaultValue="Okafor" /></div>
        </div>

        <div style={{ marginTop: 14 }}>
          <label className="label">Work email</label>
          <input className="input" type="email" defaultValue="marin.okafor@hudsonpain.com" />
        </div>

        <div style={{ marginTop: 14 }}>
          <label className="label">Role</label>
          <select className="select">
            <option>Physician (MD / DO)</option>
            <option>Nurse practitioner (NP)</option>
            <option>Physician assistant (PA)</option>
            <option>Other licensed APP</option>
          </select>
        </div>

        <div style={{ marginTop: 14 }}>
          <label className="label">NPI <span style={{ color: 'var(--ink-4)' }}>(10 digits · we'll check NPPES)</span></label>
          <div style={{ display: 'flex', gap: 8 }}>
            <input
              className="input mono"
              value={npi}
              onChange={(e) => {setNpi(e.target.value.replace(/\D/g, '').slice(0, 10));setVerified(false);}}
              placeholder="1487359201"
              style={{ letterSpacing: '.04em', flex: 1 }} />
            
            <button type="button" className="btn btn-outline btn-sm"
            disabled={!looksValid}
            onClick={() => setVerified(true)}
            style={{ height: 44, opacity: looksValid ? 1 : 0.5 }}>
              Verify NPI
            </button>
          </div>
          {verified && looksValid &&
          <div style={{
            marginTop: 10, padding: '10px 12px', background: 'var(--accent-tint)',
            border: '1px solid var(--accent-tint-2)', borderRadius: 8,
            display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12
          }}>
              <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
                <div style={{
                width: 22, height: 22, borderRadius: 999, background: 'var(--accent)',
                color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center'
              }}><Check size={12} /></div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--accent-ink)' }}>
                    Matched · Marin J. Okafor, MD
                  </div>
                  <div style={{ fontSize: 12, color: 'var(--accent-ink)', opacity: 0.7 }}>
                    Anesthesiology · Subspecialty: Pain Medicine · NY, active
                  </div>
                </div>
              </div>
              <span className="mono" style={{ fontSize: 12, color: 'var(--accent-ink)', opacity: 0.6 }}>NPPES</span>
            </div>
          }
          {!verified &&
          <div style={{ marginTop: 8, fontSize: 12, color: 'var(--ink-3)' }}>
              We don't store your full NPI record, only that you've been verified.
            </div>
          }
        </div>

        <div style={{ marginTop: 14 }}>
          <label className="label">Practice or organization <span style={{ color: 'var(--ink-4)' }}>(optional)</span></label>
          <input className="input" placeholder="Hudson Pain Group" />
        </div>

        <label style={{ display: 'flex', gap: 10, marginTop: 18, fontSize: 12, color: 'var(--ink-3)', lineHeight: 1.5 }}>
          <input type="checkbox" defaultChecked style={{ marginTop: 2 }} />
          <span>I agree to the <a href="#" onClick={(e) => e.preventDefault()} style={{ color: 'var(--accent)' }}>terms</a> and the <a href="#" onClick={(e) => e.preventDefault()} style={{ color: 'var(--accent)' }}>privacy policy</a>, and I confirm I am a licensed clinician.</span>
        </label>

        <button type="submit" className="btn btn-lg btn-primary btn-arrow" style={{ marginTop: 18, width: '100%' }}
        disabled={!verified}>
          Create free account <ArrowRight />
        </button>
        <p style={{ fontSize: 12, color: 'var(--ink-3)', textAlign: 'center', marginTop: 12, marginBottom: 0 }}>
          No credit card. You can invite practice colleagues from inside your account.
        </p>
      </form>
    </div>);

}

function PracticeDemo({ onSubmit }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.05fr', gap: 56, alignItems: 'flex-start' }}>
      <div>
        <div className="card card-pad">
          <div style={{ display: 'flex', gap: 8, marginBottom: 14 }}>
            <span className="pill pill-neutral">Practice & enterprise</span>
            <span className="pill pill-neutral">Paid platform</span>
          </div>
          <div style={{ fontSize: 19, fontWeight: 500 }}>A demo scoped to your practice.</div>
          <p style={{ fontSize: 14, color: 'var(--ink-3)', marginTop: 8, marginBottom: 0, lineHeight: 1.55 }}>
            Walk through Insurify against your real payer mix, see Authorization Desk and the rest of the roadmap, and scope a pilot. Direct access to the founding team.
          </p>
        </div>

        <div style={{ marginTop: 28 }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>What a pilot typically covers</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
            {[
            { t: '45-minute scoping call', s: 'We map your payer mix, EHR, current denial patterns, and bottlenecks.' },
            { t: 'Custom demo', s: 'Insurify run against your actual procedures and payers; preview of paid products as they come online.' },
            { t: '60–90 day pilot', s: 'Hands-on with a defined cohort. Co-defined success metrics.' },
            { t: 'Pilot pricing', s: 'Scoped only after we agree on success metrics. No charge during the pilot period.' }].
            map((x, i) =>
            <li key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                <span className="mono" style={{
                width: 22, height: 22, borderRadius: 999, background: 'var(--accent-tint)',
                color: 'var(--accent-ink)', display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 12, marginTop: 2, flexShrink: 0
              }}>{String(i + 1).padStart(2, '0')}</span>
                <div>
                  <div style={{ fontSize: 15, fontWeight: 500 }}>{x.t}</div>
                  <div style={{ fontSize: 13, color: 'var(--ink-3)' }}>{x.s}</div>
                </div>
              </li>
            )}
          </ul>
        </div>
      </div>

      <form className="card" style={{ padding: 32 }} onSubmit={(e) => {e.preventDefault();onSubmit();}}>
        <h3 className="h-3" style={{ marginBottom: 4 }}>Request a platform demo</h3>
        <p style={{ fontSize: 13, color: 'var(--ink-3)', margin: '0 0 20px' }}>
          We respond within two business days.
        </p>

        <div className="grid-2" style={{ gap: 14 }}>
          <div><label className="label">First name</label><input className="input" /></div>
          <div><label className="label">Last name</label><input className="input" /></div>
        </div>
        <div style={{ marginTop: 14 }}>
          <label className="label">Work email</label>
          <input className="input" type="email" placeholder="dana@your-practice.com" />
        </div>
        <div className="grid-2" style={{ gap: 14, marginTop: 14 }}>
          <div>
            <label className="label">Organization</label>
            <input className="input" placeholder="Practice or health system" />
          </div>
          <div>
            <label className="label">Role</label>
            <select className="select">
              <option>Practice administrator</option>
              <option>Executive / owner</option>
              <option>Revenue cycle leader</option>
              <option>CIO / IT</option>
              <option>Investor / partner</option>
              <option>Other</option>
            </select>
          </div>
        </div>
        <div className="grid-2" style={{ gap: 14, marginTop: 14 }}>
          <div>
            <label className="label">Physicians in organization</label>
            <select className="select">
              <option>1 (solo)</option>
              <option>2–5</option>
              <option>6–15</option>
              <option>16–50</option>
              <option>51+</option>
            </select>
          </div>
          <div>
            <label className="label">Specialty focus</label>
            <select className="select">
              <option>Interventional pain</option>
              <option>Orthopedics / spine</option>
              <option>Multispecialty</option>
              <option>Other</option>
            </select>
          </div>
        </div>
        <div style={{ marginTop: 14 }}>
          <label className="label">Which products interest you most? <span style={{ color: 'var(--ink-4)' }}>(select any)</span></label>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 6 }}>
            {['Insurify', 'Authorization Desk', 'RCM Intelligence', 'Denial Analytics', 'Payer Policy Monitor'].map((p, i) =>
            <ProductChip key={p} label={p} initial={i === 0 || i === 1} />
            )}
          </div>
        </div>
        <div style={{ marginTop: 14 }}>
          <label className="label">What's the most important thing to solve? <span style={{ color: 'var(--ink-4)' }}>(optional)</span></label>
          <textarea className="textarea" placeholder="e.g. Our Aetna MBB denial rate is 22% and we don't have visibility into which physicians or what gaps drive it…" />
        </div>
        <button type="submit" className="btn btn-lg btn-primary btn-arrow" style={{ marginTop: 18, width: '100%' }}>
          Request demo <ArrowRight />
        </button>
      </form>
    </div>);

}

function ProductChip({ label, initial }) {
  const [on, setOn] = React.useState(!!initial);
  return (
    <button type="button" onClick={() => setOn(!on)} style={{
      appearance: 'none', fontFamily: 'inherit', fontSize: 12, padding: '6px 12px',
      borderRadius: 999, border: '1px solid ' + (on ? 'var(--accent)' : 'var(--line)'),
      background: on ? 'var(--accent-tint)' : '#fff',
      color: on ? 'var(--accent-ink)' : 'var(--ink-2)',
      display: 'inline-flex', gap: 6, alignItems: 'center', cursor: 'pointer'
    }}>
      {on && <Check size={10} />}
      {label}
    </button>);

}

function AccessSent({ kind, go, reset }) {
  const physician = kind === 'physician';
  return (
    <section className="section" data-screen-label="04 Access — submitted">
      <div className="cmd-container" style={{ maxWidth: 640, textAlign: 'center' }}>
        <div style={{
          width: 56, height: 56, borderRadius: 999, background: 'var(--accent-tint)',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--accent-ink)'
        }}><Check size={24} /></div>
        <h1 className="h-1" style={{ marginTop: 24 }}>
          {physician ?
          <>You're{' '}<span style={{ color: 'var(--accent)' }}>in.</span></> :
          <>Request{' '}<span style={{ color: 'var(--accent)' }}>received.</span></>
          }
        </h1>
        <p className="lede" style={{ margin: '16px auto 32px' }}>
          {physician ?
          'We sent a confirmation to your work email. Open it to set a password and log in to your free CriterionMD account. Insurify is ready to go.' :
          'One of the founders will reach out within two business days to schedule a private walkthrough.'}
        </p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
          <button className="btn btn-primary" onClick={() => go(physician ? 'login' : 'home')}>
            {physician ? 'Go to log in' : 'Back to home'}
          </button>
          <button className="btn btn-outline" onClick={reset}>Submit another</button>
        </div>
      </div>
    </section>);

}

// ─── ABOUT · EXECUTIVE LEADERSHIP ───────────────────────────────────────────
// The About page is now the Executive Leadership page: founders only.
// Advisory boards live on their own routes (physician-board, general-board).
function AboutPage({ go }) {
  return (
    <div data-screen-label="05 Executive Leadership">
      <section style={{ paddingTop: 40, paddingBottom: 24 }}>
        <div className="cmd-container">
          <div style={{ textAlign: 'center', maxWidth: 1080, margin: '0 auto' }}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>Executive Leadership</div>
            <h1 className="h-display" style={{
              fontSize: 'clamp(28px, 3.6vw, 44px)',
              lineHeight: 1.05, letterSpacing: '-0.025em',
              whiteSpace: 'nowrap', margin: 0
            }}>
              A physician-led company,{' '}
              <span style={{ color: 'var(--accent)' }}>built with AI experts.</span>
            </h1>
            <p style={{
              fontSize: 21, color: 'var(--ink-2)', lineHeight: 1.5,
              maxWidth: 64 + 'ch', margin: '18px auto 0', fontWeight: 400
            }}>CriterionMD was founded by a practicing physician and a product leader with clinical judgment guiding every product decision. We build with active input from physicians across the country.



            </p>
          </div>
        </div>
      </section>

      {/* Founders */}
      <section className="section-divider band-warm" style={{ padding: '48px 0' }}>
        <div className="cmd-container">
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28,
            maxWidth: 1180, margin: '0 auto'
          }}>
            <FounderCard
              n="Farhan Mustafa"
              r="Chief Executive Officer"
              b="Farhan is a co-founder and CEO of CriterionMD, and a product leader with over a decade across analytics, ML, AI, and natural-language search. Previously Director of Product at Tableau (acquired by Salesforce) and co-founder/CEO of Grafiti, both successful exits. Farhan grew up around physicians and healthcare executives. He leads on the conviction that software built with physicians rather than at them is the most defensible thing a healthcare company can deploy in a clinic."
              img={typeof window !== 'undefined' && window.__resources && window.__resources.farhanPhoto || "assets/team/farhan-mustafa.webp"}
              i="FM" />
            <FounderCard
              n="Nasir Khatri, MD"
              r="President & Chief Medical Officer"
              b="Dr. Khatri is a board-certified anesthesiologist and interventional pain medicine specialist, currently Director of Neuromodulation at Insight Health Systems in Michigan. He founded CriterionMD on the conviction that modern AI, shaped by direct clinical judgment rather than dropped on top of the workflow, can give physicians their time back. He owns the clinical model behind every product on the platform and still sees patients every week."
              img={typeof window !== 'undefined' && window.__resources && window.__resources.nasirPhoto || "assets/team/nasir-khatri.jpeg"}
              i="NK" />
          </div>
        </div>
      </section>

      {/* Physician-led conviction band */}
      <section className="section section-divider">
        <div className="cmd-container">
          <div style={{
            position: 'relative', overflow: 'hidden',
            borderRadius: 18, padding: '44px 48px',
            background: 'linear-gradient(155deg, var(--accent) 0%, var(--accent-ink) 100%)',
            color: '#fff',
            boxShadow: '0 1px 0 rgba(15,20,20,.04), 0 30px 80px -28px rgba(31,92,61,.45)'
          }}>
            <div style={{
              position: 'absolute', inset: 0, opacity: 0.07,
              backgroundImage: 'linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px)',
              backgroundSize: '36px 36px', pointerEvents: 'none'
            }} />
            <div style={{ position: 'relative', zIndex: 1, maxWidth: 820 }}>
              <div className="mono" style={{
                fontSize: 12, letterSpacing: '.18em', opacity: 0.8, marginBottom: 14
              }}>PHYSICIAN-LED, BY DESIGN</div>
              <h2 className="h-2" style={{
                color: '#fff', textWrap: 'balance', margin: 0,
                fontSize: 'clamp(24px, 2.8vw, 36px)'
              }}>
                The clinical judgment comes first.<br />
                <span style={{ color: 'var(--accent-tint-2)' }}>The software follows.</span>
              </h2>
              <p style={{
                marginTop: 16, marginBottom: 0, fontSize: 17, lineHeight: 1.6,
                color: 'rgba(255,255,255,0.88)'
              }}>
                Every product decision runs through practicing physicians, from the founder who owns
                the clinical model to the advisory boards guiding the platform. We build with
                physicians across the country, not at them.
              </p>
              <div style={{ display: 'flex', gap: 10, marginTop: 26, flexWrap: 'wrap' }}>
                <button className="btn btn-lg btn-arrow"
                style={{ background: '#fff', color: 'var(--accent-ink)' }}
                onClick={() => go('physician-board')}>
                  Physician Advisory Board <ArrowRight />
                </button>
                <button className="btn btn-lg btn-outline"
                onClick={() => go('general-board')}
                style={{ background: 'transparent', color: '#fff', borderColor: 'rgba(255,255,255,0.3)' }}>
                  Advisory Board
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

    </div>);

}

// ─── ABOUT · PHYSICIAN ADVISORY BOARD ───────────────────────────────────────
function PhysicianBoardPage({ go }) {
  return (
    <div data-screen-label="05 Physician Advisory Board">
      <section style={{ paddingTop: 40, paddingBottom: 24 }}>
        <div className="cmd-container">
          <div style={{ textAlign: 'center', maxWidth: 1080, margin: '0 auto' }}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>About Us · Physician Advisory Board</div>
            <h1 className="h-display" style={{
              fontSize: 'clamp(28px, 3.6vw, 44px)',
              lineHeight: 1.05, letterSpacing: '-0.025em',
              whiteSpace: 'nowrap', margin: 0
            }}>
              Guided by physicians who{' '}
              <span style={{ color: 'var(--accent)' }}>still see patients.</span>
            </h1>
            <p style={{
              fontSize: 21, color: 'var(--ink-2)', lineHeight: 1.5,
              maxWidth: 64 + 'ch', margin: '18px auto 0', fontWeight: 400
            }}>
              CriterionMD is a physician-led organization. Our Physician Advisory Board brings active
              clinical input from specialists practicing across the country, so every product reflects
              how medicine is really delivered, not how software assumes it works.
            </p>
          </div>
        </div>
      </section>

      <section className="section-divider band-warm" style={{ padding: '48px 0' }}>
        <div className="cmd-container">
          {/* Chair on top, centered */}
          <div style={{ maxWidth: 380, margin: '0 auto' }}>
            <PersonCard
              n="Zubair Sarmast, MD"
              r="Board Certified Orthopedic Surgeon"
              tag="Chair, Physician Advisory Board"
              img={typeof window !== 'undefined' && window.__resources && window.__resources.zubairPhoto || "assets/team/zubair-sarmast.jpg"}
              i="ZS" />
          </div>
          {/* Remaining advisors below */}
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20,
            maxWidth: 760, margin: '20px auto 0'
          }}>
            <PersonCard
              n="Brian Kim, MD"
              r="Board Certified Interventional Pain Medicine Physician"
              img={typeof window !== 'undefined' && window.__resources && window.__resources.brianPhoto || "assets/team/brian-kim.webp"}
              i="BK" />
            <PersonCard
              n="Ty Concannon, MD"
              r="Board Certified Interventional Pain Medicine Physician"
              img={typeof window !== 'undefined' && window.__resources && window.__resources.tyPhoto || "assets/team/ty-concannon.webp"}
              i="TC" />
          </div>
          <p style={{
            textAlign: 'center', fontSize: 15, color: 'var(--ink-3)',
            lineHeight: 1.6, margin: '36px auto 0', whiteSpace: 'nowrap'
          }}>
            Our physician advisors span orthopedic surgery and interventional pain medicine, with more procedural specialties joining as the platform expands.
          </p>
        </div>
      </section>

      {/* Built with clinicians */}
      <HomeTrustBar />
    </div>);

}

// ─── ABOUT · GENERAL ADVISORY BOARD ─────────────────────────────────────────
function GeneralBoardPage({ go }) {
  return (
    <div data-screen-label="05 Advisory Board">
      <section style={{ paddingTop: 40, paddingBottom: 24 }}>
        <div className="cmd-container">
          <div style={{ textAlign: 'center', maxWidth: 1080, margin: '0 auto' }}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>About Us · Advisory Board</div>
            <h1 className="h-display" style={{
              fontSize: 'clamp(28px, 3.6vw, 44px)',
              lineHeight: 1.05, letterSpacing: '-0.025em',
              whiteSpace: 'nowrap', margin: 0
            }}>
              The advisors behind{' '}
              <span style={{ color: 'var(--accent)' }}>the build.</span>
            </h1>
            <p style={{
              fontSize: 21, color: 'var(--ink-2)', lineHeight: 1.5,
              maxWidth: 64 + 'ch', margin: '18px auto 0', fontWeight: 400
            }}>
              A broad bench of advisors guides our operations, practice management, and legal and ethical
              compliance. Each one brings real-world experience in healthcare to the decisions we make.
            </p>
          </div>
        </div>
      </section>

      <section className="section-divider band-warm" style={{ padding: '48px 0' }}>
        <div className="cmd-container">
          <div className="grid-3" style={{ gap: 20 }}>
            <PersonCard
              n="Uzair Siddiqui"
              r="Practice Management Advisor"
              img={typeof window !== 'undefined' && window.__resources && window.__resources.uzairPhoto || "assets/team/uzair-siddiqui.png"}
              i="US" />
            <div style={{
              padding: 24, border: '1px dashed var(--line)', borderRadius: 14,
              background: 'var(--paper-2)', display: 'flex', flexDirection: 'column',
              justifyContent: 'center', alignItems: 'flex-start', gap: 8
            }}>
              <div className="mono" style={{ fontSize: 12, color: 'var(--ink-3)', letterSpacing: '.08em' }}>
                MORE ADVISORS TO COME
              </div>
              <p style={{ fontSize: 14, color: 'var(--ink-3)', margin: 0, lineHeight: 1.55 }}>
                We're building out the advisory board across clinical, payer, and operating leadership.
              </p>
            </div>
            <div style={{ display: 'none' }} />
          </div>
        </div>
      </section>

      <BoardCTA go={go} other="physician" />
    </div>);

}

// Shared CTA used by both board pages — always reinforces physician leadership
// and cross-links to the other board.
function BoardCTA({ go, other }) {
  const toPhysician = other === 'physician';
  return (
    <section className="section section-divider">
      <div className="cmd-container">
        <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto' }}>
          <h2 className="h-2">
            Built{' '}<span style={{ color: 'var(--accent)' }}>with physicians,</span>{' '}not at them.
          </h2>
          <p className="lede" style={{ margin: '20px auto 32px', whiteSpace: 'nowrap' }}>
            Active clinical input from physicians across the country shapes every product we ship.
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <button className="btn btn-lg btn-primary btn-arrow"
            onClick={() => go(toPhysician ? 'physician-board' : 'general-board')}>
              {toPhysician ? 'Physician Advisory Board' : 'Advisory Board'} <ArrowRight />
            </button>
            <button className="btn btn-lg btn-outline" onClick={() => go('about')}>
              Executive Leadership
            </button>
          </div>
        </div>
      </div>
    </section>);

}

// Member card — vertical layout (circular photo or initials at top), used on
// the advisory board pages.
function PersonCard({ n, r, b, i, img, tag }) {
  const avatarSize = 168;
  return (
    <div className="card card-pad" style={{
      display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center'
    }}>
      {img ?
      <img src={img} alt={n} style={{
        width: avatarSize, height: avatarSize, borderRadius: 999,
        objectFit: 'cover', objectPosition: 'center top',
        marginBottom: 20, flexShrink: 0,
        border: '1px solid var(--line)'
      }} /> :

      <div style={{
        width: avatarSize, height: avatarSize, borderRadius: 999,
        background: 'var(--accent-tint)', color: 'var(--accent-ink)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 44, fontWeight: 500, letterSpacing: '.02em',
        marginBottom: 20, flexShrink: 0
      }}>{i}</div>
      }
      {tag &&
      <span className="mono" style={{
        fontSize: 10.5, letterSpacing: '.14em', fontWeight: 500,
        padding: '4px 10px', borderRadius: 999, marginBottom: 10,
        background: 'var(--accent-tint)', color: 'var(--accent-ink)',
        border: '1px solid var(--accent-tint-2)', textTransform: 'uppercase'
      }}>{tag}</span>
      }
      <div style={{ fontSize: 18, fontWeight: 500, letterSpacing: '-0.015em' }}>{n}</div>
      <div style={{ fontSize: 15, color: 'var(--accent)', marginTop: 4, marginBottom: b ? 14 : 0, fontWeight: 500 }}>{r}</div>
      {b && <p style={{ fontSize: 14, color: 'var(--ink-2)', margin: 0, lineHeight: 1.6 }}>{b}</p>}
    </div>);

}

// Founder card — vertical layout, large circular photo at top.
function FounderCard({ n, r, b, i, img }) {
  const avatarSize = 240;
  return (
    <div className="card card-pad" style={{
      display: 'flex', flexDirection: 'column', alignItems: 'center',
      textAlign: 'center', padding: '40px 36px'
    }}>
      {img ?
      <img src={img} alt={n} style={{
        width: avatarSize, height: avatarSize, borderRadius: 999,
        objectFit: 'cover', objectPosition: 'center top',
        marginBottom: 24, flexShrink: 0,
        border: '1px solid var(--line)'
      }} /> :

      <div style={{
        width: avatarSize, height: avatarSize, borderRadius: 999,
        background: 'var(--accent-tint)', color: 'var(--accent-ink)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 64, fontWeight: 500, letterSpacing: '.02em',
        marginBottom: 24, flexShrink: 0
      }}>{i}</div>
      }
      <div style={{ fontSize: 24, fontWeight: 500, letterSpacing: '-0.015em' }}>{n}</div>
      <div style={{ fontSize: 16, color: 'var(--accent)', marginTop: 6, marginBottom: 18, fontWeight: 500 }}>{r}</div>
      <p style={{ fontSize: 15, color: 'var(--ink-2)', margin: 0, lineHeight: 1.6, textWrap: 'pretty' }}>{b}</p>
    </div>);

}

// ─── PRESS RELEASES ──────────────────────────────────────────────────────────
// Templated press/news page. Empty for now — drop entries into PRESS_ITEMS
// (external coverage) and BLOG_ITEMS (our own posts) and the page fills in.
// Each press item: { date, source, title, href, summary }.
const PRESS_ITEMS = [
  // { date: 'May 2026', source: 'MedCity News', title: 'Headline goes here',
  //   href: 'https://…', summary: 'One or two lines of context.' },
];
// Each blog item: { date, title, href, summary }.
// Items with a `route` open a full article page in-app instead of an external link.
const BLOG_ITEMS = [
  {
    date: 'June 5, 2026',
    route: 'press-advisors',
    title: 'CriterionMD Welcomes Two New Members to the Physician Advisory Board',
    summary: 'CriterionMD adds its first two physician advisors, both practicing interventional pain physicians, to keep its products grounded in the realities of clinical workflow.',
  },
  {
    date: 'May 4, 2026',
    route: 'press-pilot',
    title: 'CriterionMD Launches First Pilot Across Michigan Clinical and Surgical Sites',
    summary: 'CriterionMD launches its first pilot across Insight Health System, Southeast Michigan Surgical Hospital, and Charter Surgery Center, testing physician-led documentation and medical necessity support in live clinical and surgical settings.',
  },
];

function PressPage({ go }) {
  const hasPress = PRESS_ITEMS.length > 0;
  const hasBlog = BLOG_ITEMS.length > 0;
  return (
    <div data-screen-label="07 Press Releases">
      <section style={{ paddingTop: 40, paddingBottom: 24 }}>
        <div className="cmd-container">
          <div style={{ textAlign: 'center', maxWidth: 1080, margin: '0 auto' }}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>About Us · Press Releases</div>
            <h1 className="h-display" style={{
              fontSize: 'clamp(28px, 3.6vw, 44px)',
              lineHeight: 1.05, letterSpacing: '-0.025em',
              whiteSpace: 'nowrap', margin: 0
            }}>
              News &amp; company{' '}
              <span style={{ color: 'var(--accent)' }}>updates.</span>
            </h1>
            <p style={{
              fontSize: 21, color: 'var(--ink-2)', lineHeight: 1.5,
              maxWidth: 60 + 'ch', margin: '18px auto 0', fontWeight: 400
            }}>
              Coverage of CriterionMD and posts from our team.<br />
              Check back as we share progress on building the operating layer for physician revenue.
            </p>
          </div>
        </div>
      </section>

      {/* In the news */}
      <section className="section-divider band-warm" style={{ padding: '48px 0' }}>
        <div className="cmd-container">
          <div style={{
            display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24
          }}>
            <span className="eyebrow" style={{ margin: 0 }}>In the news</span>
            <span style={{ flex: 1, height: 1, background: 'var(--line)' }} />
          </div>
          {hasPress ?
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {PRESS_ITEMS.map((item, i) =>
            <PressRow key={i} item={item} external />
            )}
            </div> :

          <PressEmptyState
            kind="coverage"
            go={go} />
          }
        </div>
      </section>

      {/* From the team */}
      <section className="section-divider" style={{ padding: '48px 0' }}>
        <div className="cmd-container">
          <div style={{
            display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24
          }}>
            <span className="eyebrow" style={{ margin: 0 }}>From the team</span>
            <span style={{ flex: 1, height: 1, background: 'var(--line)' }} />
          </div>
          {hasBlog ?
          <div className="grid-3" style={{ gap: 20 }}>
              {BLOG_ITEMS.map((item, i) =>
            <BlogCard key={i} item={item} go={go} />
            )}
            </div> :

          <PressEmptyState kind="posts" go={go} />
          }
        </div>
      </section>

      {/* Media contact */}
      <section className="section section-divider">
        <div className="cmd-container">
          <div style={{
            background: 'var(--paper)', border: '1px solid var(--line)',
            borderRadius: 18, padding: '36px 40px',
            display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 40, alignItems: 'center'
          }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 12 }}>Media inquiries</div>
              <h2 className="h-2" style={{ margin: 0, fontSize: 'clamp(22px, 2.2vw, 30px)' }}>
                Writing about{' '}<span style={{ color: 'var(--accent)' }}>CriterionMD?</span>
              </h2>
              <p style={{ fontSize: 15, color: 'var(--ink-2)', marginTop: 12, marginBottom: 0, lineHeight: 1.55 }}>
                For interviews, founder bios, logos, and product imagery, reach the team directly.
              </p>
            </div>
            <div style={{ textAlign: 'left' }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '.16em', color: 'var(--ink-3)', marginBottom: 8 }}>
                PRESS CONTACT
              </div>
              <a href="mailto:press@criterionmd.com"
              style={{
                color: 'var(--accent)', fontSize: 18, fontWeight: 500,
                borderBottom: '1px solid var(--accent-tint-2)', paddingBottom: 3
              }}>
                press@criterionmd.com
              </a>
            </div>
          </div>
        </div>
      </section>
    </div>);

}

function PressRow({ item, external }) {
  return (
    <a href={item.href || '#'}
    target={external ? '_blank' : undefined}
    rel={external ? 'noopener noreferrer' : undefined}
    className="card"
    style={{
      display: 'grid', gridTemplateColumns: '160px 1fr auto', gap: 24,
      alignItems: 'center', padding: '20px 24px', textDecoration: 'none'
    }}>
      <div className="mono" style={{ fontSize: 12, color: 'var(--ink-3)', letterSpacing: '.06em' }}>
        {item.date}{item.source ? ` · ${item.source}` : ''}
      </div>
      <div>
        <div style={{ fontSize: 17, fontWeight: 500, color: 'var(--ink)', letterSpacing: '-0.01em' }}>
          {item.title}
        </div>
        {item.summary &&
        <p style={{ fontSize: 14, color: 'var(--ink-2)', margin: '6px 0 0', lineHeight: 1.5 }}>
            {item.summary}
          </p>
        }
      </div>
      <span style={{ color: 'var(--accent)', display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 14, fontWeight: 500 }}>
        Read <ArrowRight />
      </span>
    </a>);

}

function BlogCard({ item, go }) {
  const internal = !!item.route;
  return (
    <a href={item.href || '#'}
    onClick={internal ? (e) => { e.preventDefault(); go(item.route); } : undefined}
    className="card card-pad" style={{
      display: 'flex', flexDirection: 'column', gap: 10, textDecoration: 'none', minHeight: 180
    }}>
      <div className="mono" style={{ fontSize: 12, color: 'var(--ink-3)', letterSpacing: '.06em' }}>
        {item.date}
      </div>
      <div style={{ fontSize: 18, fontWeight: 500, color: 'var(--ink)', letterSpacing: '-0.015em', lineHeight: 1.25 }}>
        {item.title}
      </div>
      {item.summary &&
      <p style={{ fontSize: 14, color: 'var(--ink-2)', margin: 0, lineHeight: 1.55, flex: 1 }}>
          {item.summary}
        </p>
      }
      <span style={{ color: 'var(--accent)', display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 14, fontWeight: 500, marginTop: 4 }}>
        Read post <ArrowRight />
      </span>
    </a>);

}

function PressEmptyState({ kind, go }) {
  const copy = kind === 'coverage' ?
  { title: 'No coverage to share yet.', body: 'When CriterionMD is featured in the press, the articles will be linked here.' } :
  { title: 'No posts yet.', body: 'Company updates and notes from the team will appear here as we publish them.' };
  return (
    <div style={{
      border: '1px dashed var(--line)', borderRadius: 14, background: 'var(--paper-2)',
      padding: '40px 32px', textAlign: 'center'
    }}>
      <div style={{
        width: 40, height: 40, borderRadius: 10, margin: '0 auto 16px',
        background: 'var(--paper)', border: '1px solid var(--line)',
        color: 'var(--ink-3)', display: 'flex', alignItems: 'center', justifyContent: 'center'
      }}>
        <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
          <path d="M4 3h7l3 3v9H4V3Z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" />
          <path d="M10.5 3v3.5H14M6 9h6M6 11.5h6" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </div>
      <div style={{ fontSize: 17, fontWeight: 500, color: 'var(--ink)', letterSpacing: '-0.01em' }}>
        {copy.title}
      </div>
      <p style={{ fontSize: 14.5, color: 'var(--ink-3)', margin: '8px auto 0', maxWidth: 44 + 'ch', lineHeight: 1.55 }}>
        {copy.body}
      </p>
    </div>);

}

// ─── PRESS ARTICLE: Physician advisors ───────────────────────────────────────
const ADVISOR_RELEASE = {
  date: 'June 5, 2026',
  kicker: 'Press Release',
  screenLabel: '07 Press Release · Physician Advisors',
  titleNowrap: true,
  title: 'CriterionMD Welcomes Two New Members to the Physician Advisory Board',
  dek: 'Brian Kim, MD and Ty Concannon, MD join as the most recent additions to the company\u2019s growing Physician Advisory team. Both practicing interventional pain physicians, they bring direct clinical experience and procedural expertise to CriterionMD\u2019s physician-led product work.',
  body: [
    { type: 'p', text: 'CriterionMD is pleased to announce the addition of its first two physician advisors, Brian Kim, MD and Ty Concannon, MD. Both are practicing interventional pain physicians who bring direct clinical experience, procedural expertise, and practical insight into the real-world challenges facing physicians, APPs, practices, and health systems.' },
    { type: 'p', text: 'Dr. Kim practices in Overland Park, Kansas at College Park Medical Group, where he serves as Medical Director of Pain Management. Dr. Concannon is an interventional pain physician at Saint Luke\u2019s, part of BJC Health System. Their addition marks an important step in CriterionMD\u2019s mission to build physician-led technology for the clinical and administrative realities of modern medical practice.' },
    { type: 'p', text: 'CriterionMD was founded on a simple premise: the healthcare system is built around the work of physicians and clinical teams, but most healthcare technology is not built from their point of view. In pain medicine, this gap is obvious. Physicians are expected to deliver high-quality care, document complex clinical reasoning, satisfy payer rules, support staff workflows, reduce denials, and protect revenue integrity, often while using tools that were never designed around how physicians actually think or work.' },
    { type: 'lead', text: 'CriterionMD is being built to close that gap.' },
    { type: 'p', text: 'The company\u2019s first products focus on the intersection of clinical documentation, payer policy, medical necessity, and physician workflow. These are not abstract administrative problems. They affect whether patients receive the procedures they need, whether practices are paid for the work they perform, and whether physicians can spend their time on patient care rather than endless documentation cleanup, authorization friction, and denial management.' },
    { type: 'p', text: 'The addition of Dr. Kim and Dr. Concannon gives CriterionMD early access to two physicians who understand these issues at the point of care. As interventional pain physicians, they work in a specialty where documentation quality, payer-specific medical necessity rules, procedural decision-making, and revenue cycle performance are tightly linked. Their experience will help CriterionMD stay grounded in the realities of the exam room, the procedure suite, and the practice back office.' },
    { type: 'quote', text: 'CriterionMD is intentionally physician-led because the deepest workflow problems in healthcare cannot be solved from the outside looking in. Dr. Kim and Dr. Concannon understand the day-to-day pressure physicians face. They know what it means to make clinical decisions, document them correctly, support a team, and deal with payer requirements that often fail to match the pace of clinical care. Their guidance will help us build products that are useful, practical, and credible.', attrib: 'Nasir Khatri, MD', role: 'Co-Founder & Chief Medical Officer, CriterionMD' },
    { type: 'p', text: 'Dr. Kim and Dr. Concannon will advise CriterionMD on physician workflow, interventional pain documentation, payer-facing medical necessity logic, clinical usability, and product strategy. Their role will be especially important as CriterionMD develops tools designed to help physicians and practices identify documentation gaps before they become authorization delays, denials, or revenue leakage.' },
    { type: 'p', text: 'This advisor group is also a signal of how CriterionMD intends to build. The company is not approaching healthcare as a generic software market. It is starting with a specific, high-friction clinical domain where physicians feel the problem every day. Interventional pain medicine is procedure-heavy, documentation-sensitive, payer-dependent, and operationally complex. That makes it an ideal first proving ground for technology that can later expand into other specialties facing similar clinical and administrative pressure.' },
    { type: 'p', text: 'CriterionMD\u2019s goal is not to add another layer of software to the physician\u2019s day. The goal is to remove unnecessary friction from the work that already exists. That means helping physicians document more effectively, helping practices prepare stronger authorizations, helping administrators see risk earlier, and helping the entire clinical operation function with less waste.' },
    { type: 'p', text: 'The company believes the best healthcare technology will not simply automate tasks. It will understand clinical intent, payer expectations, workflow timing, and the economic reality of medical practice. That requires physicians to be involved from the beginning, not brought in at the end as validators.' },
    { type: 'p', text: 'By adding Dr. Kim and Dr. Concannon as physician advisors, CriterionMD is strengthening its connection to the physicians it intends to serve. Their guidance will help ensure that the company\u2019s products remain practical, clinically relevant, and aligned with the daily needs of interventional pain practices.' },
    { type: 'p', text: 'This is an early milestone for CriterionMD, but an important one. The company is building around a core belief: healthcare technology should respect the physician\u2019s role, reduce unnecessary administrative burden, and support better care without forcing clinicians to work around poorly designed systems.' },
    { type: 'p', text: 'CriterionMD welcomes Dr. Brian Kim and Dr. Ty Concannon and looks forward to working with them as the company continues developing physician-centered tools for modern medical practice.' },
  ],
  advisors: [
    { name: 'Brian Kim, MD', role: 'Medical Director of Pain Management', org: 'College Park Medical Group · Overland Park, KS' },
    { name: 'Ty Concannon, MD', role: 'Interventional Pain Physician', org: 'Saint Luke\u2019s · BJC Health System' },
  ],
};

// ─── PRESS ARTICLE: Michigan pilot ───────────────────────────────────────────
const MICHIGAN_RELEASE = {
  date: 'May 4, 2026',
  kicker: 'Press Release',
  screenLabel: '07 Press Release · Michigan Pilot',
  titleNowrap: true,
  titleSize: 'clamp(14px, 2vw, 27px)',
  title: 'CriterionMD Launches First Pilot Across Michigan Clinical and Surgical Sites',
  dek: 'CriterionMD launches its first pilot across Insight Health System, Southeast Michigan Surgical Hospital, and Charter Surgery Center, putting physician-led documentation and medical necessity support to work in live clinical and surgical settings.',
  body: [
    { type: 'p', text: 'CriterionMD has launched its first pilot across multiple clinical and surgical sites in Michigan, marking an important step in the company\u2019s mission to build physician-led technology for real clinical workflows.' },
    { type: 'p', text: 'The pilot includes Insight Health System locations in Dearborn, Flint, Warren, Coldwater, and Novi, along with Southeast Michigan Surgical Hospital in Warren and Charter Surgery Center in Flint. The launch gives CriterionMD the opportunity to evaluate its platform across a broad range of care settings, including outpatient clinics, hospital-based environments, and ambulatory surgery centers.' },
    { type: 'p', text: 'CriterionMD was created to solve a specific problem in healthcare: physicians and clinical teams are being asked to deliver care, document medical necessity, satisfy payer requirements, support authorization workflows, and protect revenue integrity while using systems that were not built around how physicians actually practice.' },
    { type: 'p', text: 'This pilot is designed to test CriterionMD in the real world, where documentation quality, payer policy, clinical decision-making, and operational workflow all intersect.' },
    { type: 'p', text: 'The first phase of the pilot will focus on interventional pain management, a specialty where the need is immediate and measurable. Interventional pain physicians routinely manage complex patients, procedure-heavy treatment plans, payer-specific medical necessity rules, and authorization requirements that vary across insurers. A small documentation gap can lead to a delayed authorization, a denial, a peer-to-peer review, a cancelled procedure, or unnecessary administrative work for staff and physicians.' },
    { type: 'lead', text: 'CriterionMD is being developed to identify those issues earlier in the workflow.' },
    { type: 'p', text: 'The platform is designed to help physicians and practices evaluate whether documentation supports the recommended procedure, whether key medical necessity elements are present, and whether the clinical note is aligned with payer expectations before the case enters the authorization process. The goal is not to add more work to the physician\u2019s day. The goal is to reduce avoidable friction, improve documentation quality, and help practices move from reactive denial management to proactive workflow support.' },
    { type: 'quote', text: 'Launching our first pilot in live clinical environments is a major milestone for CriterionMD. Healthcare technology often fails because it is built too far away from the physician workflow. We are starting at the point where the problem actually lives: the clinical encounter, the documentation, the payer requirement, and the operational handoff that follows.', attrib: 'Farhan Mustafa', role: 'Co-Founder & Chief Executive Officer, CriterionMD' },
    { type: 'p', text: 'The participating sites give CriterionMD a meaningful testing environment across several types of care delivery. Insight Health System\u2019s Michigan locations provide exposure to multi-site clinical operations across Dearborn, Flint, Warren, Coldwater, and Novi. Southeast Michigan Surgical Hospital and Charter Surgery Center allow the company to evaluate how the platform may support procedural workflows, authorization readiness, and documentation alignment in surgical settings.' },
    { type: 'p', text: 'For CriterionMD, the pilot is not only a product test. It is a proof point for the company\u2019s broader thesis that physician-centered technology can create value for multiple stakeholders at once.' },
    { type: 'p', text: 'When physicians document more effectively, patients may experience fewer delays. When practices identify documentation gaps earlier, staff spend less time chasing missing information. When authorizations are cleaner, administrators have better visibility into avoidable revenue leakage. When workflows are designed around clinical reality, the entire system functions with less waste.' },
    { type: 'lead', text: 'CriterionMD believes this is where healthcare technology should be focused.' },
    { type: 'p', text: 'The company is not building generic automation for healthcare. It is building tools that understand the relationship between clinical intent, documentation, medical necessity, payer policy, and practice economics. That requires close partnership with physicians, clinical staff, administrators, and real practice environments.' },
    { type: 'p', text: 'This first pilot will allow CriterionMD to collect practical feedback from the people who live inside these workflows every day. The company will use that feedback to refine product design, improve usability, strengthen payer logic, and ensure that the platform supports clinical teams without disrupting patient care.' },
    { type: 'p', text: 'The launch also reflects CriterionMD\u2019s commitment to building from the ground up with physicians and operators, rather than designing in isolation and asking practices to adapt later. The company\u2019s long-term vision is to create a suite of physician-centered tools that help medical practices operate with more clarity, less administrative drag, and stronger alignment between patient care and financial performance.' },
    { type: 'p', text: 'The first pilot across Insight Health System, Southeast Michigan Surgical Hospital, and Charter Surgery Center represents the beginning of that work.' },
    { type: 'p', text: 'CriterionMD will continue expanding its platform in close collaboration with clinical partners as it develops technology for the next generation of physician workflow, documentation intelligence, and medical necessity support.' },
  ],
  sites: [
    { name: 'Insight Health System', role: 'Multi-site clinical operations', org: 'Dearborn · Flint · Warren · Coldwater · Novi, MI' },
    { name: 'Southeast Michigan Surgical Hospital', role: 'Hospital-based surgical setting', org: 'Warren, MI' },
    { name: 'Charter Surgery Center', role: 'Ambulatory surgery center', org: 'Flint, MI' },
  ],
};

function PressArticlePage({ go, release }) {  const r = release || ADVISOR_RELEASE;
  return (
    <div data-screen-label={r.screenLabel || '07 Press Release'}>
      {/* Article header */}
      <section style={{ paddingTop: 32, paddingBottom: 8 }}>
        <div className="cmd-container" style={{ maxWidth: 'none', paddingLeft: '120px', paddingRight: '120px' }}>
          <button onClick={() => go('press')}
            style={{
              appearance: 'none', font: 'inherit', cursor: 'pointer', background: 'transparent',
              border: 0, padding: 0, color: 'var(--ink-3)', fontSize: 13.5,
              display: 'inline-flex', alignItems: 'center', gap: 7, marginBottom: 28
            }}>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style={{ transform: 'rotate(180deg)' }}>
              <path d="M3 7h8M8 4l3 3-3 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
            Press Releases
          </button>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
            <span className="eyebrow" style={{ margin: 0 }}>{r.kicker}</span>
            <span style={{ width: 4, height: 4, borderRadius: 999, background: 'var(--line)' }} />
            <span className="mono" style={{ fontSize: 12, color: 'var(--ink-3)', letterSpacing: '.06em' }}>{r.date}</span>
          </div>
          <h1 className="h-display" style={{
            fontSize: r.titleSize || 'clamp(18px, 2.4vw, 32px)', lineHeight: 1.1, letterSpacing: '-0.025em',
            textAlign: 'center', margin: '0 auto',
            ...(r.titleNowrap ? { whiteSpace: 'nowrap' } : { textWrap: 'balance', maxWidth: '26ch' })
          }}>
            {r.title}
          </h1>
          <p style={{
            fontSize: 20, color: 'var(--ink-2)', lineHeight: 1.5, fontWeight: 400,
            margin: '20px 0 0', textWrap: 'pretty', textAlign: 'center'
          }}>
            {r.dek}
          </p>
        </div>
      </section>

      <div className="cmd-container" style={{ maxWidth: 'none', paddingLeft: '120px', paddingRight: '120px' }}>
        <span style={{ display: 'block', height: 1, background: 'var(--line)', margin: '28px 0' }} />
      </div>

      {/* Article body */}
      <section style={{ paddingTop: 8, paddingBottom: 40 }}>
        <div className="cmd-container" style={{ maxWidth: 'none', paddingLeft: '120px', paddingRight: '120px' }}>
          <article style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
            {r.body.map((b, i) => {
              if (b.type === 'lead') {
                return (
                  <p key={i} style={{
                    fontSize: 22, fontWeight: 500, color: 'var(--ink)', lineHeight: 1.4,
                    letterSpacing: '-0.015em', margin: '6px 0', textWrap: 'pretty'
                  }}>{b.text}</p>
                );
              }
              if (b.type === 'quote') {
                return (
                  <figure key={i} style={{
                    margin: '12px 0', padding: '28px 32px', borderRadius: 16,
                    background: 'var(--accent-tint)', border: '1px solid var(--accent-tint-2)'
                  }}>
                    <blockquote style={{
                      margin: 0, fontSize: 20, lineHeight: 1.5, color: 'var(--accent-ink)',
                      fontWeight: 450, letterSpacing: '-0.01em', textWrap: 'pretty'
                    }}>
                      &ldquo;{b.text}&rdquo;
                    </blockquote>
                    <figcaption style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 2 }}>
                      <span style={{ fontSize: 15, fontWeight: 600, color: 'var(--ink)' }}>{b.attrib}</span>
                      <span style={{ fontSize: 13.5, color: 'var(--ink-2)' }}>{b.role}</span>
                    </figcaption>
                  </figure>
                );
              }
              return (
                <p key={i} style={{
                  fontSize: 17.5, lineHeight: 1.68, color: 'var(--ink-2)', margin: 0, textWrap: 'pretty'
                }}>{b.text}</p>
              );
            })}
          </article>

          {/* Advisor cards */}
          {r.advisors && r.advisors.length > 0 &&
          <div style={{ marginTop: 40 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
              <span className="eyebrow" style={{ margin: 0 }}>The advisors</span>
              <span style={{ flex: 1, height: 1, background: 'var(--line)' }} />
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
              {r.advisors.map((a, i) => (
                <div key={i} className="card card-pad" style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                  <div style={{ fontSize: 18, fontWeight: 600, color: 'var(--ink)', letterSpacing: '-0.015em' }}>{a.name}</div>
                  <div style={{ fontSize: 14.5, color: 'var(--accent)', fontWeight: 500 }}>{a.role}</div>
                  <div style={{ fontSize: 13.5, color: 'var(--ink-3)', lineHeight: 1.5 }}>{a.org}</div>
                </div>
              ))}
            </div>
          </div>
          }

          {/* Pilot sites */}
          {r.sites && r.sites.length > 0 &&
          <div style={{ marginTop: 40 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
              <span className="eyebrow" style={{ margin: 0 }}>The pilot sites</span>
              <span style={{ flex: 1, height: 1, background: 'var(--line)' }} />
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
              {r.sites.map((a, i) => (
                <div key={i} className="card card-pad" style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                  <div style={{ fontSize: 17, fontWeight: 600, color: 'var(--ink)', letterSpacing: '-0.015em', textWrap: 'balance' }}>{a.name}</div>
                  <div style={{ fontSize: 14.5, color: 'var(--accent)', fontWeight: 500 }}>{a.role}</div>
                  <div style={{ fontSize: 13.5, color: 'var(--ink-3)', lineHeight: 1.5 }}>{a.org}</div>
                </div>
              ))}
            </div>
          </div>
          }
          <div style={{
            marginTop: 36, paddingTop: 24, borderTop: '1px solid var(--line)',
            display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: 16
          }}>
            <div className="mono" style={{ fontSize: 12, color: 'var(--ink-3)', letterSpacing: '.06em' }}>
              MEDIA CONTACT ·{' '}
              <a href="mailto:press@criterionmd.com" style={{ color: 'var(--accent)' }}>press@criterionmd.com</a>
            </div>
            <button onClick={() => go('press')} className="btn btn-outline">
              All press releases
            </button>
          </div>
        </div>
      </section>
    </div>);

}

// ─── CONTACT ─────────────────────────────────────────────────────────────────
// Each Contact Us dropdown section is its own focused page: a short audience-
// specific intro, a message form, and the ONE email address for that audience.
// No generic / catch-all contact info.
const CONTACT_AUDIENCES = {
  demos: {
    screen: '06 Contact · Demos & Pilots',
    eyebrow: 'Contact · Product Demos & Pilots',
    title: ['Book a demo, or scope a ', 'pilot.'],
    intro: "Walk through the platform against your real payer mix and patient panel. Best for physicians, practices, and health systems ready to see specifics.",
    email: 'pilots@criterionmd.com',
    emailNote: 'Goes straight to the founding team. We usually reply within one business day.',
    formTitle: 'Request a demo or pilot',
    formNote: 'Tell us about your practice and what you want to see.',
    orgLabel: 'Practice / organization',
    topics: ['Product demo', 'Pilot scoping', 'Onboarding question'],
    points: [
    'Demos are run by the founders, not a sales team',
    'Bring your real payer mix and we will map it live',
    'Pilots scoped cohort by cohort']

  },
  media: {
    screen: '06 Contact · Media',
    eyebrow: 'Contact · Media Inquiries',
    title: ['For press and ', 'editorial.'],
    intro: 'Interviews, founder bios, logos, and product imagery. We respond to journalists and editors quickly.',
    email: 'press@criterionmd.com',
    emailNote: 'Monitored by the team for media requests. Include your outlet and deadline.',
    formTitle: 'Media inquiry',
    formNote: 'Tell us your outlet, angle, and any deadline.',
    orgLabel: 'Outlet / publication',
    topics: ['Interview request', 'Press kit / assets', 'Fact check', 'Other'],
    points: [
    'Founder interviews available on request',
    'Logos and product imagery in our press kit',
    'We work to your deadline where we can']

  },
  investors: {
    screen: '06 Contact · Investor Relations',
    eyebrow: 'Contact · Investor Relations',
    title: ['Investor ', 'relations.'],
    intro: 'We are not actively raising, but we are always glad to keep the conversation going with aligned investors.',
    email: 'investors@criterionmd.com',
    emailNote: 'Read by the CEO. A short note about your fund and thesis is the best start.',
    formTitle: 'Investor inquiry',
    formNote: 'A little about your fund and what draws you to the space.',
    orgLabel: 'Fund / firm',
    topics: ['Introduction', 'Updates & materials', 'Other'],
    points: [
    'Not actively raising today',
    'Happy to share periodic updates',
    'Physician-led, building deliberately']

  },
  development: {
    screen: '06 Contact · Product Development',
    eyebrow: 'Contact · Product Development',
    title: ['Build it ', 'with us.'],
    intro: "We are actively developing new products with practicing physicians, practices, and health systems. If you have a real problem you want solved, tell us.",
    email: 'development@criterionmd.com',
    emailNote: 'We read every note and route it to the founder closest to the problem.',
    formTitle: 'Tell us what to build',
    formNote: 'Describe the workflow or problem you would like solved.',
    orgLabel: 'Practice / specialty',
    topics: ['Co-development idea', 'Feature request', 'Workflow problem', 'Other'],
    points: [
    'Co-develop directly with our team',
    'Shaped around real clinical workflows',
    'Physician feedback drives the roadmap']

  },
  careers: {
    screen: '06 Contact · Careers',
    eyebrow: 'Contact · Careers',
    title: ['Come ', 'build with us.'],
    intro: 'We are a small, physician-led team building the operating layer for physician revenue. If that sounds like your kind of problem, get in touch.',
    email: 'careers@criterionmd.com',
    emailNote: 'Send a note and your resume or a link to your work. A real person reads it.',
    formTitle: 'Introduce yourself',
    formNote: 'Tell us what you would want to work on, and link your work.',
    orgLabel: 'Current role / company',
    topics: ['Engineering', 'Product / design', 'Clinical', 'Operations', 'General interest'],
    points: [
    'Small team, real ownership',
    'Physician-led, clinically grounded',
    'Remote-friendly, NYC roots']

  }
};

function ContactAudiencePage({ go, cfg }) {
  return (
    <div data-screen-label={cfg.screen}>
      <section style={{ paddingTop: 40, paddingBottom: 24 }}>
        <div className="cmd-container">
          <div style={{ textAlign: 'center', maxWidth: 1080, margin: '0 auto' }}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>{cfg.eyebrow}</div>
            <h1 className="h-display" style={{
              fontSize: 'clamp(28px, 3.6vw, 44px)',
              lineHeight: 1.05, letterSpacing: '-0.025em',
              whiteSpace: 'nowrap', margin: 0
            }}>
              {cfg.title[0]}<span style={{ color: 'var(--accent)' }}>{cfg.title[1]}</span>
            </h1>
            <p style={{
              fontSize: 21, color: 'var(--ink-2)', lineHeight: 1.5,
              maxWidth: 62 + 'ch', margin: '18px auto 0', fontWeight: 400
            }}>
              {cfg.intro}
            </p>
          </div>
        </div>
      </section>

      <ContactFormSection cfg={cfg} />
      <div style={{ height: 64 }}></div>
    </div>);

}

// The form + audience-specific email/context block. Reused by the audience
// contact pages and by the Careers page (at the bottom).
function ContactFormSection({ cfg, heading, sub }) {
  return (
    <section className="section-divider" style={{ padding: '40px 0 24px' }}>
      <div className="cmd-container">
        {heading &&
        <div style={{ maxWidth: 1040, margin: '0 auto 24px' }}>
            <h2 className="h-2" style={{ margin: 0, fontSize: 'clamp(22px, 2.2vw, 30px)' }}>{heading}</h2>
            {sub && <p style={{ fontSize: 16, color: 'var(--ink-2)', marginTop: 10, marginBottom: 0, lineHeight: 1.55 }}>{sub}</p>}
          </div>
        }
        <div style={{
          display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 32,
          maxWidth: 1040, margin: '0 auto', alignItems: 'start'
        }}>
          {/* Form */}
          <form className="card" style={{ padding: 32 }} onSubmit={(e) => e.preventDefault()}>
            <h3 className="h-3" style={{ marginBottom: 4 }}>{cfg.formTitle}</h3>
            <p style={{ fontSize: 14, color: 'var(--ink-3)', margin: '0 0 20px' }}>
              {cfg.formNote}
            </p>
            <div className="grid-2" style={{ gap: 14 }}>
              <div><label className="label">Name</label><input className="input" /></div>
              <div><label className="label">Email</label><input className="input" type="email" /></div>
            </div>
            <div style={{ marginTop: 14 }}>
              <label className="label">{cfg.orgLabel}</label>
              <input className="input" />
            </div>
            {cfg.topics &&
            <div style={{ marginTop: 14 }}>
                <label className="label">Topic</label>
                <select className="select">
                  {cfg.topics.map((t) => <option key={t}>{t}</option>)}
                </select>
              </div>
            }
            <div style={{ marginTop: 14 }}>
              <label className="label">Message</label>
              <textarea className="textarea" rows={5} placeholder="A few sentences is plenty…" />
            </div>
            <button className="btn btn-lg btn-primary btn-arrow" style={{ marginTop: 20, width: '100%' }}>
              Send <ArrowRight />
            </button>
          </form>

          {/* Audience-specific email + context */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            <div className="card card-pad" style={{
              background: 'var(--accent-tint)', borderColor: 'var(--accent-tint-2)'
            }}>
              <div className="mono" style={{
                fontSize: 11, letterSpacing: '.16em', color: 'var(--accent-ink)', opacity: 0.75
              }}>
                EMAIL US DIRECTLY
              </div>
              <a href={`mailto:${cfg.email}`} style={{
                display: 'inline-block', marginTop: 10,
                fontSize: 20, fontWeight: 500, color: 'var(--accent-ink)',
                letterSpacing: '-0.015em',
                borderBottom: '1px solid var(--accent-tint-2)', paddingBottom: 3,
                wordBreak: 'break-all'
              }}>
                {cfg.email}
              </a>
              <p style={{
                fontSize: 13.5, color: 'var(--accent-ink)', opacity: 0.85,
                marginTop: 12, marginBottom: 0, lineHeight: 1.55
              }}>
                {cfg.emailNote}
              </p>
            </div>
            <div className="card card-pad">
              <ul style={{
                listStyle: 'none', padding: 0, margin: 0,
                display: 'flex', flexDirection: 'column', gap: 12
              }}>
                {cfg.points.map((p, i) =>
                <li key={i} style={{
                  display: 'flex', gap: 10, alignItems: 'flex-start',
                  fontSize: 14.5, color: 'var(--ink-2)', lineHeight: 1.5
                }}>
                    <span style={{
                    flexShrink: 0, marginTop: 3,
                    width: 18, height: 18, borderRadius: 999,
                    background: 'var(--accent-tint)', color: 'var(--accent-ink)',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center'
                  }}><Check size={10} /></span>
                    <span>{p}</span>
                  </li>
                )}
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// Thin per-audience wrappers (one route each)
function DemosPage({ go }) {return <ContactAudiencePage go={go} cfg={CONTACT_AUDIENCES.demos} />;}
function MediaPage({ go }) {return <ContactAudiencePage go={go} cfg={CONTACT_AUDIENCES.media} />;}
function InvestorsPage({ go }) {return <ContactAudiencePage go={go} cfg={CONTACT_AUDIENCES.investors} />;}
function DevelopmentPage({ go }) {return <ContactAudiencePage go={go} cfg={CONTACT_AUDIENCES.development} />;}

// ─── CAREERS ─────────────────────────────────────────────────────────────────
// Open positions on top, then the same contact block at the bottom.
// Edit JOB_POSTINGS to add / change / remove roles.
const JOB_POSTINGS = [
{
  title: 'Software Engineer',
  type: 'Part-time',
  location: 'Remote-friendly',
  team: 'Engineering',
  blurb: "Build the core of a physician-led platform that sits between clinical documentation and payers. You'll work directly with the founders on real product, shipping into the hands of practicing physicians.",
  responsibilities: [
  'Design and build product features across the stack, from clinical-document ingestion to payer-policy logic',
  'Work hands-on with applied AI / LLM systems in a production setting',
  'Partner directly with the founding team and practicing physicians on what to build',
  'Own features end to end in a small, fast-moving team'],

  requirements: [
  'Minimum 5 years of professional software engineering experience',
  'Demonstrated, hands-on experience building with AI / ML / LLM systems',
  'Healthcare or health-tech experience strongly preferred',
  'Comfort with ambiguity and a bias toward shipping',
  'Care about clinical accuracy and patient trust'],

  comp: 'Compensation not disclosed; will be competitive and commensurate with experience.'
},
{
  title: 'In-House Counsel',
  type: 'Part-time',
  location: 'Remote-friendly',
  team: 'Legal & Compliance',
  blurb: "Help a physician-led healthcare-AI company build responsibly. You'll advise on the medical-legal and technology questions that shape both the product and the company.",
  responsibilities: [
  'Advise on medical-legal, regulatory, and compliance questions across the platform',
  'Guide privacy and data-handling practices (HIPAA and related frameworks)',
  'Review and structure commercial, partner, and vendor agreements',
  'Advise on the legal and ethical dimensions of healthcare AI',
  'Partner with the founders to keep compliance built in by design'],

  requirements: [
  'Minimum 5 years of relevant legal experience',
  'Working knowledge of medical-legal and healthcare regulatory matters',
  'Familiarity with AI / technology law and data privacy',
  'Licensed and in good standing',
  'Comfortable operating as a generalist in an early-stage company'],

  comp: 'Compensation not disclosed; will be competitive and commensurate with experience.'
}];


function JobPosting({ job }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
      <button
        onClick={() => setOpen((o) => !o)}
        aria-expanded={open}
        style={{
          appearance: 'none', font: 'inherit', cursor: 'pointer', width: '100%',
          background: 'transparent', border: 0, textAlign: 'left',
          display: 'grid', gridTemplateColumns: '1fr auto', gap: 20,
          alignItems: 'center', padding: '24px 28px'
        }}>
        <div>
          <div style={{ fontSize: 20, fontWeight: 500, color: 'var(--ink)', letterSpacing: '-0.015em' }}>
            {job.title}
          </div>
          <div style={{ display: 'flex', gap: 8, marginTop: 10, flexWrap: 'wrap' }}>
            {[job.team, job.type, job.location].map((m, i) =>
            <span key={i} style={{
              fontFamily: 'var(--font-mono)', fontSize: 11.5, letterSpacing: '.04em',
              padding: '4px 10px', borderRadius: 999,
              background: 'var(--bg)', color: 'var(--ink-2)', border: '1px solid var(--line)'
            }}>{m}</span>
            )}
          </div>
        </div>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          color: 'var(--accent)', fontSize: 14, fontWeight: 500, whiteSpace: 'nowrap'
        }}>
          {open ? 'Hide' : 'View role'}
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none"
          style={{ transition: 'transform .2s ease', transform: open ? 'rotate(180deg)' : 'rotate(0deg)' }}>
            <path d="M3 4.5l3 3 3-3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </span>
      </button>

      {open &&
      <div style={{
        padding: '4px 28px 28px',
        animation: 'psPaneIn .3s cubic-bezier(.2,.7,.2,1) both'
      }}>
          <div style={{ height: 1, background: 'var(--line)', marginBottom: 22 }} />
          <p style={{ fontSize: 15.5, color: 'var(--ink-2)', margin: '0 0 22px', lineHeight: 1.6, maxWidth: 76 + 'ch' }}>
            {job.blurb}
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 12 }}>What you'll do</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {job.responsibilities.map((r, i) =>
              <li key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 14.5, color: 'var(--ink-2)', lineHeight: 1.5 }}>
                    <span style={{ flexShrink: 0, marginTop: 4, width: 16, height: 16, borderRadius: 999, background: 'var(--accent-tint)', color: 'var(--accent-ink)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><Check size={9} /></span>
                    <span>{r}</span>
                  </li>
              )}
              </ul>
            </div>
            <div>
              <div className="eyebrow" style={{ marginBottom: 12 }}>What we're looking for</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {job.requirements.map((r, i) =>
              <li key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 14.5, color: 'var(--ink-2)', lineHeight: 1.5 }}>
                    <span style={{ flexShrink: 0, marginTop: 4, width: 16, height: 16, borderRadius: 999, background: 'var(--accent-tint)', color: 'var(--accent-ink)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><Check size={9} /></span>
                    <span>{r}</span>
                  </li>
              )}
              </ul>
            </div>
          </div>
          <div style={{
          marginTop: 22, paddingTop: 18, borderTop: '1px solid var(--line)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 20, flexWrap: 'wrap'
        }}>
            <div style={{ fontSize: 13.5, color: 'var(--ink-3)', lineHeight: 1.5, maxWidth: 64 + 'ch' }}>
              {job.comp}
            </div>
            <a className="btn btn-primary btn-arrow"
          href={`mailto:careers@criterionmd.com?subject=${encodeURIComponent('Application · ' + job.title)}`}>
              Apply for this role <ArrowRight />
            </a>
          </div>
        </div>
      }
    </div>);

}

function CareersPage({ go }) {
  const cfg = CONTACT_AUDIENCES.careers;
  return (
    <div data-screen-label="06 Contact · Careers">
      <section style={{ paddingTop: 40, paddingBottom: 24 }}>
        <div className="cmd-container">
          <div style={{ textAlign: 'center', maxWidth: 1080, margin: '0 auto' }}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>{cfg.eyebrow}</div>
            <h1 className="h-display" style={{
              fontSize: 'clamp(28px, 3.6vw, 44px)',
              lineHeight: 1.05, letterSpacing: '-0.025em',
              whiteSpace: 'nowrap', margin: 0
            }}>
              {cfg.title[0]}<span style={{ color: 'var(--accent)' }}>{cfg.title[1]}</span>
            </h1>
            <p style={{
              fontSize: 21, color: 'var(--ink-2)', lineHeight: 1.5,
              maxWidth: 62 + 'ch', margin: '18px auto 0', fontWeight: 400
            }}>
              {cfg.intro}
            </p>
          </div>
        </div>
      </section>

      {/* Open positions */}
      <section className="section-divider band-warm" style={{ padding: '48px 0' }}>
        <div className="cmd-container">
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24 }}>
            <span className="eyebrow" style={{ margin: 0 }}>Open positions</span>
            <span style={{ flex: 1, height: 1, background: 'var(--line)' }} />
            <span className="mono" style={{ fontSize: 12, color: 'var(--ink-3)', letterSpacing: '.06em' }}>
              {JOB_POSTINGS.length} OPEN
            </span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14, maxWidth: 960, margin: '0 auto' }}>
            {JOB_POSTINGS.map((job, i) => <JobPosting key={i} job={job} />)}
          </div>
        </div>
      </section>

      {/* Contact at the bottom */}
      <ContactFormSection
        cfg={cfg}
        heading="Don't see your role?"
        sub="We're a small team and always glad to meet sharp people. Send a note and tell us what you'd want to work on." />
      <div style={{ height: 64 }}></div>
    </div>);

}

// Contact hub — routes visitors to the right focused page. No generic catch-all.
const CONTACT_HUB_ITEMS = [
{ route: 'contact-demos', label: 'Product Demos & Pilots', sub: 'See the platform against your real payer mix.', email: 'pilots@criterionmd.com' },
{ route: 'contact-media', label: 'Media Inquiries', sub: 'Interviews, bios, logos, and product imagery.', email: 'press@criterionmd.com' },
{ route: 'contact-investors', label: 'Investor Relations', sub: 'Keep the conversation going.', email: 'investors@criterionmd.com' },
{ route: 'contact-development', label: 'Product Development', sub: 'Co-develop a workflow with our team.', email: 'development@criterionmd.com' },
{ route: 'contact-careers', label: 'Careers', sub: 'Build with a physician-led team.', email: 'careers@criterionmd.com' }];


function ContactPage({ go }) {
  return (
    <div data-screen-label="06 Contact">
      <section style={{ paddingTop: 40, paddingBottom: 24 }}>
        <div className="cmd-container">
          <div style={{ textAlign: 'center', maxWidth: 1080, margin: '0 auto' }}>
            <h1 className="h-display" style={{
              fontSize: 'clamp(28px, 3.6vw, 44px)',
              lineHeight: 1.05, letterSpacing: '-0.025em',
              whiteSpace: 'nowrap', margin: 0
            }}>
              Let's find the{' '}
              <span style={{ color: 'var(--accent)' }}>right person.</span>
            </h1>
            <p style={{
              fontSize: 21, color: 'var(--ink-2)', lineHeight: 1.55,
              maxWidth: 64 + 'ch', margin: '18px auto 0', fontWeight: 400
            }}>
              Pick what you're reaching out about and you'll land with the person who can actually help.
            </p>
          </div>
        </div>
      </section>

      <section className="section-divider band-warm" style={{ padding: '48px 0' }}>
        <div className="cmd-container">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 880, margin: '0 auto' }}>
            {CONTACT_HUB_ITEMS.map((item) =>
            <button key={item.route}
            onClick={() => go(item.route)}
            className="card"
            style={{
              appearance: 'none', font: 'inherit', cursor: 'pointer', textAlign: 'left',
              display: 'grid', gridTemplateColumns: '1fr auto', gap: 20,
              alignItems: 'center', padding: '22px 26px', width: '100%'
            }}>
                <div>
                  <div style={{ fontSize: 18, fontWeight: 500, color: 'var(--ink)', letterSpacing: '-0.015em' }}>
                    {item.label}
                  </div>
                  <div style={{ fontSize: 14.5, color: 'var(--ink-2)', marginTop: 4, lineHeight: 1.5 }}>
                    {item.sub}
                  </div>
                  <div className="mono" style={{ fontSize: 12.5, color: 'var(--ink-3)', marginTop: 8, letterSpacing: '.02em' }}>
                    {item.email}
                  </div>
                </div>
                <span style={{ color: 'var(--accent)', display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 14, fontWeight: 500 }}>
                  Go <ArrowRight />
                </span>
              </button>
            )}
          </div>
        </div>
      </section>
      <div style={{ height: 64 }}></div>
    </div>);

}

function ContactCoDevelopmentCallout() {
  return (
    <div style={{
      marginTop: 48, position: 'relative', overflow: 'hidden',
      borderRadius: 18, padding: '40px 44px',
      background: 'linear-gradient(155deg, var(--accent) 0%, var(--accent-ink) 100%)',
      color: '#fff',
      boxShadow: '0 1px 0 rgba(15,20,20,.04), 0 30px 80px -28px rgba(31,92,61,.45)',
      display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 40, alignItems: 'center'
    }}>
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.07,
        backgroundImage: 'linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px)',
        backgroundSize: '36px 36px', pointerEvents: 'none'
      }} />
      <div style={{ position: 'relative', zIndex: 1 }}>
        <div className="mono" style={{
          fontSize: 12, letterSpacing: '.18em', opacity: 0.8, marginBottom: 12
        }}>BUILD WITH US</div>
        <h2 className="h-2" style={{
          color: '#fff', textWrap: 'balance', margin: 0,
          fontSize: 'clamp(24px, 2.6vw, 34px)'
        }}>
          Have a workflow we should be{' '}
          <span style={{ color: 'var(--accent-tint-2)' }}>solving for?</span>
        </h2>
        <p style={{
          marginTop: 14, marginBottom: 0,
          fontSize: 16, lineHeight: 1.55,
          color: 'rgba(255,255,255,0.88)', maxWidth: 58 + 'ch'
        }}>
          We're actively developing new products with practicing physicians, practices,
          and health systems. If you're a doctor or a practice with a real problem you'd
          like to see solved, talk to us. We'll co-develop with you.
        </p>
      </div>
      <div style={{
        position: 'relative', zIndex: 1,
        background: 'rgba(255,255,255,0.08)',
        border: '1px solid rgba(255,255,255,0.2)',
        borderRadius: 14, padding: '22px 24px',
        backdropFilter: 'blur(6px)'
      }}>
        <div className="mono" style={{
          fontSize: 11, letterSpacing: '.16em',
          color: 'rgba(255,255,255,0.7)', marginBottom: 10
        }}>EMAIL THE DEVELOPMENT TEAM</div>
        <a href="mailto:development@criterionmd.com"
        style={{
          color: '#fff', fontSize: 19, fontWeight: 500,
          letterSpacing: '-0.015em', display: 'inline-block',
          borderBottom: '1px solid rgba(255,255,255,0.4)',
          paddingBottom: 4, wordBreak: 'break-all'
        }}>
          development@criterionmd.com
        </a>
        <p style={{
          marginTop: 14, marginBottom: 0,
          fontSize: 13.5, color: 'rgba(255,255,255,0.78)', lineHeight: 1.55
        }}>
          Tell us what you're stuck on. We read every note, and route it to the founder
          closest to the problem.
        </p>
      </div>
    </div>);

}

function ContactCard({ audience, email, body }) {
  return (
    <div className="card card-pad">
      <div className="eyebrow" style={{ marginBottom: 10 }}>{audience}</div>
      <div className="mono" style={{ fontSize: 17, color: 'var(--ink)', fontWeight: 500 }}>{email}</div>
      <p style={{ fontSize: 16, color: 'var(--ink-2)', marginTop: 14, marginBottom: 0, lineHeight: 1.55 }}>{body}</p>
    </div>);

}

Object.assign(window, { HomePage, SolutionsPage, InsurifyPage, AccessPage, AboutPage, PhysicianBoardPage, GeneralBoardPage, PressPage, PressArticlePage, ContactPage, DemosPage, MediaPage, InvestorsPage, DevelopmentPage, CareersPage, ProductMark, PRODUCT_COLORS, MICHIGAN_RELEASE });