return (

<section

className="how-it-works-section"

style={{

padding: '5rem 1rem',

borderTop: '1px solid var(--pts-border)',

borderBottom: '1px solid var(--pts-border)',

}}

>

<style>{`

<div style={{ width: '100%', maxWidth: 'var(--pts-content-max)', margin: '0 auto' }}>

<div className="how-header">

<p className="how-eyebrow">How it works</p>

<h2 className="how-title">Get started in 4 simple steps</h2>

<p className="how-sub">From your first message to live expert support — often within hours, not days.</p>

</div>

<div className="how-timeline-wrap">

<div className="how-timeline-line" aria-hidden />

<div className="how-steps">

{howItWorksSteps.map((step) => (

<div key={step.number} className="how-step">

<div className="how-bubble" aria-hidden>

{step.number}

</div>

<h3 className="how-step-title">{step.title}</h3>

<p className="how-step-desc">{step.description}</p>

</div>

))}

</div>

</div>

<p style={{ textAlign: 'center', marginTop: '2.5rem', fontSize: '0.95rem', color: 'var(--pts-text-subtle)', lineHeight: 1.6 }}>

⚡ Same-day support may be available for proxy interviews, production issues, and time-sensitive project needs.

</p>

</div>

</section>

);