feat: clarify coaching process page

frontend/src/pages/how-it-works.tsx

@@ -64,6 +64,34 @@ const weekSteps = [
   },
 ];
 
+const processSteps = [
+  {
+    title: 'Assessment',
+    copy: 'A prospective client submits goals, role context, current pressure points, and what they want from coaching.',
+    output: 'Intake lead and prep context for the coach.',
+  },
+  {
+    title: 'Coaching engagement',
+    copy: 'The coach converts the lead into a client workspace, runs sessions, and keeps relationship context in one place.',
+    output: 'Client profile, session history, resources, and commitments.',
+  },
+  {
+    title: 'Session memory',
+    copy: 'After each session, the coach records or uploads audio, reviews the transcript, and generates a coach-owned memory draft.',
+    output: 'Summary, topics, commitments, homework, quotes, and private coach notes.',
+  },
+  {
+    title: 'Approved follow-up',
+    copy: 'The coach edits what AI produced and chooses what becomes client-facing. Nothing is shared automatically.',
+    output: 'Approved notes, action items, resources, and follow-up copy.',
+  },
+  {
+    title: 'Client portal',
+    copy: 'The client logs in to see only the work the coach approved: shared notes, commitments, reflections, and resources.',
+    output: 'A private client area that keeps progress visible between sessions.',
+  },
+];
+
 const deeperItems = [
   [
     'Session Notes & Coaching Insights',
@@ -444,10 +472,10 @@ export default function HowItWorks() {
               Start assessment
             </Link>
             <a
-              href='#coaching-week'
+              href='#coaching-process'
               className='rounded-none border border-[#19192d]/10 bg-white px-8 py-4 font-semibold'
             >
-              See your coaching week
+              See the process
             </a>
           </div>
           <p className={`mt-5 ${ui.muted}`}>
@@ -455,6 +483,64 @@ export default function HowItWorks() {
           </p>
         </section>
 
+        <section
+          id='coaching-process'
+          className={`border-y px-5 py-16 ${ui.border} ${ui.softSurface}`}
+        >
+          <div className='mx-auto max-w-7xl lg:px-8'>
+            <div className='grid gap-10 lg:grid-cols-[0.85fr_1.15fr] lg:items-start'>
+              <div>
+                <p className={ui.overline}>The full coaching process</p>
+                <h2 className={`${ui.heading} mt-4 text-4xl leading-tight md:text-6xl`}>
+                  From public assessment to private client workspace.
+                </h2>
+                <p className={`mt-6 text-lg leading-8 ${ui.muted}`}>
+                  Founder-style coaching sites explain the offer. This
+                  workspace connects that public offer to the operational flow
+                  behind it: intake, client management, session memory, and
+                  client follow-through.
+                </p>
+                <div className='mt-8 flex flex-wrap gap-3'>
+                  <Link
+                    href='/intake/'
+                    className={`rounded-none px-7 py-4 font-semibold ${ui.button}`}
+                  >
+                    Start assessment
+                  </Link>
+                  <Link
+                    href='/services/'
+                    className='rounded-none border border-[#19192d]/10 bg-white px-7 py-4 font-semibold'
+                  >
+                    View services
+                  </Link>
+                </div>
+              </div>
+
+              <div className='grid gap-4'>
+                {processSteps.map((step, index) => (
+                  <div
+                    key={step.title}
+                    className={`${ui.card} grid gap-4 p-5 md:grid-cols-[4rem_1fr]`}
+                  >
+                    <div className='flex h-14 w-14 items-center justify-center rounded-none bg-[#19192d] font-serif text-2xl font-semibold text-white'>
+                      {index + 1}
+                    </div>
+                    <div>
+                      <h3 className='text-2xl font-semibold'>{step.title}</h3>
+                      <p className={`mt-3 leading-7 ${ui.muted}`}>
+                        {step.copy}
+                      </p>
+                      <p className='mt-4 rounded-none bg-[#fffdf9] px-4 py-3 text-sm font-semibold text-[#35b7a5]'>
+                        {step.output}
+                      </p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </section>
+
         <section
           id='coaching-week'
           className={`border-y px-5 py-16 ${ui.border} ${ui.softSurface}`}