(() => {
const { Icon } = window.SwivelDesignSystem_a628db;
const STEPS = [
  ['01','Scope','One call to map your market, your currencies and your compliance obligations. You leave with a launch plan, not a proposal.'],
  ['02','Configure','Your brand, your lobby, your coin packages and your bonus rules set up in the back office. No development on your side.'],
  ['03','Integrate','Payments and any content you already licence connect through one integration. Everything else is already wired.'],
  ['04','Launch','You go live with support, risk and KYC operations running from day one. Adding the next vertical starts back at step two.'],
];
function LaunchPath() {
  return <section style={{background:'var(--swivel-signal-black)',padding:'var(--section-y-lg) 0',position:'relative',overflow:'hidden'}}>
    <div aria-hidden="true" style={{position:'absolute',width:640,height:640,borderRadius:'50%',border:'2px solid var(--grey-900)',top:-200,left:-220,pointerEvents:'none'}}/>
    <div style={{position:'relative',maxWidth:'var(--container-max)',margin:'0 auto',padding:'0 var(--gutter-page-lg)'}}>
      <p style={{fontFamily:'var(--font-display)',fontSize:'var(--size-2xs)',fontWeight:'var(--weight-bold)',textTransform:'uppercase',letterSpacing:'var(--tracking-eyebrow)',color:'var(--swivel-portal-yellow)',margin:0}}>The launch path</p>
      <h2 style={{fontFamily:'var(--font-display)',fontWeight:'var(--weight-bold)',fontSize:'clamp(32px,4vw,var(--size-6xl))',lineHeight:'var(--leading-tight)',letterSpacing:'var(--tracking-display)',textTransform:'uppercase',color:'var(--swivel-white)',margin:'16px 0 0',maxWidth:'22ch'}}>Four steps. One integration.</h2>
      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(220px,1fr))',gap:'var(--space-9)',marginTop:'var(--space-12)'}}>
        {STEPS.map(([n,t,d],i)=>(
          <div key={n} style={{borderTop:'2px solid '+(i===0?'var(--swivel-portal-yellow)':'var(--grey-800)'),paddingTop:'var(--space-7)'}}>
            <div style={{display:'flex',alignItems:'center',justifyContent:'space-between'}}>
              <span style={{fontFamily:'var(--font-display)',fontWeight:'var(--weight-bold)',fontSize:'var(--size-2xs)',letterSpacing:'var(--tracking-label)',color:i===0?'var(--swivel-portal-yellow)':'var(--grey-500)'}}>{n}</span>
              {i<3 && <Icon name="arrow-right" size={14} style={{color:'var(--grey-700)'}}/>}
            </div>
            <h3 style={{fontFamily:'var(--font-display)',fontWeight:'var(--weight-bold)',fontSize:'var(--size-2xl)',letterSpacing:'var(--tracking-heading)',textTransform:'uppercase',color:'var(--swivel-white)',margin:'var(--space-6) 0 0'}}>{t}</h3>
            <p style={{fontFamily:'var(--font-body)',fontSize:'var(--size-md)',lineHeight:'var(--leading-normal)',color:'var(--grey-400)',margin:'12px 0 0',textWrap:'pretty'}}>{d}</p>
          </div>
        ))}
      </div>
    </div>
  </section>;
}
Object.assign(window, { LaunchPath });
})();