diff --git a/frontend/src/pages/how-it-works.tsx b/frontend/src/pages/how-it-works.tsx
new file mode 100644
index 0000000..5ea70e0
--- /dev/null
+++ b/frontend/src/pages/how-it-works.tsx
@@ -0,0 +1,693 @@
+import React from 'react';
+import type { ReactElement } from 'react';
+import Head from 'next/head';
+import Link from 'next/link';
+import LayoutGuest from '../layouts/Guest';
+import { getPageTitle } from '../config';
+
+const ui = {
+  page: 'bg-[#fffdf9] text-[#19192d]',
+  banner:
+    'bg-gradient-to-r from-[#35b7a5] via-[#95b76e] to-[#c38a25] text-white',
+  navShell:
+    'rounded-full bg-white shadow-[0_18px_60px_rgba(31,31,50,0.08)] ring-1 ring-[#19192d]/5',
+  ink: 'text-[#19192d]',
+  muted: 'text-[#72798a]',
+  accent: 'text-[#35b7a5]',
+  gold: 'text-[#b17a1e]',
+  border: 'border-[#19192d]/10',
+  surface: 'bg-white',
+  softSurface: 'bg-[#fbf8f1]',
+  darkPanel: 'bg-[#19192d] text-white',
+  darkMuted: 'text-white/70',
+  button:
+    'bg-gradient-to-r from-[#36b39f] to-[#b98624] text-white shadow-[0_18px_45px_rgba(54,179,159,0.24)] transition hover:brightness-105',
+  section: 'mx-auto max-w-7xl px-5 py-20 lg:px-8',
+  card: 'rounded-[1.75rem] border border-[#19192d]/10 bg-white shadow-[0_18px_50px_rgba(31,31,50,0.05)]',
+  softCard: 'rounded-[1.75rem] border border-[#19192d]/10 bg-[#fbf8f1]',
+  overline: 'text-sm font-bold uppercase tracking-[0.28em] text-[#b17a1e]',
+  heading: 'font-serif font-semibold tracking-tight text-[#19192d]',
+};
+
+const weekSteps = [
+  {
+    eyebrow: 'Session day',
+    title: 'You coach. The workspace captures.',
+    copy: 'Run the session the way you already do. Drop in raw notes, transcript snippets, or a quick debrief, then let the workspace organize themes, commitments, breakthroughs, and follow-up opportunities.',
+    proof: 'Zero extra admin after the session you already ran.',
+    mockup: 'capture',
+  },
+  {
+    eyebrow: 'After',
+    title: 'Review the notes before anything is shared.',
+    copy: 'Session memory turns rough material into coach-readable notes: summary, patterns, commitments, homework, and follow-up copy. You edit what needs your voice and approve only what is ready.',
+    proof: 'Nothing reaches the client without your explicit action.',
+    mockup: 'review',
+  },
+  {
+    eyebrow: 'Between',
+    title: 'Your client stays connected to the work.',
+    copy: 'Clients keep seeing approved prompts, resources, and action items that reference the real language of their sessions. The support feels like it comes from the coach, not a generic chatbot.',
+    proof: 'You stay present without manually texting every follow-up.',
+    mockup: 'between',
+  },
+  {
+    eyebrow: 'Before next',
+    title: 'Walk in with the thread already visible.',
+    copy: 'Before the next session, prep briefs surface what happened last time, what changed since, what is still open, and where the next conversation could start.',
+    proof: 'No more spending the first 15 minutes reconnecting.',
+    mockup: 'prep',
+  },
+  {
+    eyebrow: 'Ongoing',
+    title: 'Your method becomes a reusable client space.',
+    copy: 'When the engagement ends, the same client portal can keep approved notes, resources, commitments, and coaching context in one place.',
+    proof: 'A cleaner client experience and a stronger coaching signature.',
+    mockup: 'space',
+  },
+];
+
+const deeperItems = [
+  [
+    'Session Notes & Coaching Insights',
+    'What the AI extracts from raw notes and how the coach reviews it.',
+  ],
+  [
+    'Between-Session Support',
+    'How approved reflection prompts and commitments keep clients moving.',
+  ],
+  [
+    'Session Preparation',
+    'How briefs bring back context before the next call.',
+  ],
+  [
+    'Client Portal',
+    'What your clients see after you share approved notes and resources.',
+  ],
+];
+
+const clientExperience = [
+  [
+    'Your name, your voice',
+    'Clients see coaching support from you, reviewed and approved by you.',
+  ],
+  [
+    'Connected to real sessions',
+    'Prompts reference actual goals, commitments, and language.',
+  ],
+  [
+    'Private by default',
+    'Client records are organized around confidentiality and role-based access.',
+  ],
+  [
+    'Easy to introduce',
+    'Use the portal as a clean home for notes, resources, and next actions.',
+  ],
+];
+
+const faq = [
+  [
+    'How fast do I get the first session memory?',
+    'Paste notes or a transcript after a session and generate structured memory immediately.',
+  ],
+  [
+    'Do coaches need to change their workflow?',
+    'No. The template supports raw notes, transcripts, resources, prep briefs, and client follow-up around the coaching workflow you already use.',
+  ],
+  [
+    'Can the coach edit AI output?',
+    'Yes. Every generated insight, prompt, and shared note is meant to be reviewed before the client sees it.',
+  ],
+  [
+    'Can I start with one client?',
+    'Yes. The workspace is built so a coach can test the full loop with a single client first.',
+  ],
+];
+
+function Nav() {
+  return (
+    <header className='sticky top-4 z-50 px-5 pt-7'>
+      <div
+        className={`mx-auto flex max-w-6xl items-center justify-between gap-5 px-5 py-4 backdrop-blur-xl md:px-7 md:py-5 ${ui.navShell}`}
+      >
+        <Link
+          href='/'
+          className='flex items-center gap-3 text-lg font-semibold tracking-tight'
+        >
+          <span className='flex h-11 w-11 items-center justify-center rounded-2xl bg-[#f3fbf8] text-2xl font-black text-[#35b7a5]'>
+            C
+          </span>
+          <span className='sr-only'>Coaching SaaS Workspace</span>
+        </Link>
+        <nav
+          className={`hidden items-center gap-8 text-lg font-medium ${ui.ink} md:flex`}
+        >
+          <Link href='/how-it-works/'>How it works</Link>
+          <Link href='/client-portal/'>Coachee</Link>
+          <a href='#pricing'>Pricing</a>
+          <a href='#client-experience'>Compare</a>
+          <a href='#control'>Trust</a>
+        </nav>
+        <Link
+          href='/register/'
+          className={`rounded-full px-7 py-3 text-base font-semibold ${ui.button}`}
+        >
+          Join waitlist
+        </Link>
+      </div>
+    </header>
+  );
+}
+
+function WaveDivider({
+  from = '#fffdf9',
+  to = '#19192d',
+  flip = false,
+}: {
+  from?: string;
+  to?: string;
+  flip?: boolean;
+}) {
+  return (
+    <div
+      className='relative h-24 overflow-hidden'
+      style={{ backgroundColor: from }}
+    >
+      <svg
+        className={`absolute inset-x-0 bottom-0 h-full w-full ${flip ? 'rotate-180' : ''}`}
+        viewBox='0 0 1440 160'
+        preserveAspectRatio='none'
+        aria-hidden='true'
+      >
+        <path
+          fill={to}
+          d='M0,96 C180,122 330,136 520,124 C720,112 865,58 1090,72 C1248,82 1356,106 1440,96 L1440,160 L0,160 Z'
+        />
+      </svg>
+    </div>
+  );
+}
+
+function Mockup({ type }: { type: string }) {
+  if (type === 'capture') {
+    return (
+      <div className={`${ui.card} p-5`}>
+        <div className='flex items-center justify-between border-b border-[#19192d]/10 pb-4'>
+          <p className={`${ui.overline} text-xs`}>Recording</p>
+          <span className='rounded-full bg-[#e8f6f2] px-3 py-1 text-sm font-semibold text-[#248b7e]'>
+            Zoom connected
+          </span>
+        </div>
+        <div className='mt-6 text-center'>
+          <p className='font-serif text-6xl font-semibold'>38:12</p>
+          <p className={`mt-2 ${ui.muted}`}>
+            Session 4 · Leadership transition
+          </p>
+        </div>
+        <div className='mt-6 grid gap-3'>
+          {[
+            'Key themes & patterns',
+            'Client commitments',
+            'Breakthrough moments',
+            'Reflection opportunities',
+          ].map((item) => (
+            <div
+              key={item}
+              className='flex items-center gap-3 rounded-2xl bg-[#fbf8f1] p-3'
+            >
+              <span className='flex h-7 w-7 items-center justify-center rounded-full bg-[#35b7a5] text-sm text-white'>
+                ✓
+              </span>
+              <span className='font-medium'>{item}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (type === 'review') {
+    return (
+      <div className={`${ui.card} p-5`}>
+        <p className={`${ui.overline} text-xs`}>Session notes</p>
+        <h3 className='mt-2 text-2xl font-semibold'>
+          Sarah Mitchell · Session 4
+        </h3>
+        <div className='mt-5 rounded-2xl bg-[#fbf8f1] p-4'>
+          <p className='text-sm font-semibold text-[#b17a1e]'>Summary</p>
+          <p className='mt-2 leading-7'>
+            Explored over-preparing for presentations and the shift from proving
+            competence to trusting it.
+          </p>
+        </div>
+        <div className='mt-4 flex flex-wrap gap-2'>
+          {['Confidence', 'Delegation', 'Breakthrough'].map((item) => (
+            <span
+              key={item}
+              className='rounded-full bg-[#e8f6f2] px-3 py-1 text-sm font-semibold text-[#248b7e]'
+            >
+              {item}
+            </span>
+          ))}
+        </div>
+        <div className='mt-5 flex gap-3'>
+          <button
+            className={`rounded-full px-5 py-3 font-semibold ${ui.button}`}
+          >
+            Looks good
+          </button>
+          <button className='rounded-full border border-[#19192d]/10 px-5 py-3 font-semibold'>
+            Edit
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  if (type === 'between') {
+    return (
+      <div className={`${ui.card} p-5`}>
+        <div className='mb-5 flex items-center justify-between'>
+          <p className={`${ui.overline} text-xs`}>Between sessions</p>
+          <span className={ui.muted}>Day 3</span>
+        </div>
+        <div className='space-y-4'>
+          <div className='rounded-2xl bg-[#fbf8f1] p-4'>
+            <p className='text-sm font-semibold text-[#72798a]'>You sent</p>
+            <p className='mt-2 leading-7'>
+              Last session you mentioned confidence feels different in small
+              groups vs large meetings. What did you notice this week?
+            </p>
+          </div>
+          <div className='ml-8 rounded-2xl bg-white p-4 ring-1 ring-[#19192d]/10'>
+            <p className='text-sm font-semibold'>Sarah Mitchell</p>
+            <p className='mt-2 leading-7'>
+              I led the Monday standup and it felt easier. I think naming it
+              helped.
+            </p>
+          </div>
+          <div className='rounded-2xl bg-[#e8f6f2] p-4'>
+            <p className='text-sm font-semibold text-[#248b7e]'>
+              Coach-approved suggestion
+            </p>
+            <p className='mt-2 leading-7'>
+              That is a real shift. What made it feel easier?
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (type === 'prep') {
+    return (
+      <div className={`${ui.card} p-5`}>
+        <p className={`${ui.overline} text-xs`}>Prep brief</p>
+        <h3 className='mt-2 text-2xl font-semibold'>Session 5</h3>
+        <div className='mt-5 grid gap-3'>
+          <div className='rounded-2xl bg-[#fbf8f1] p-4'>
+            <p className='font-semibold'>Last session themes</p>
+            <p className={`mt-2 ${ui.muted}`}>
+              Confidence · Delegation · Board presence
+            </p>
+          </div>
+          <div className='rounded-2xl bg-[#fbf8f1] p-4'>
+            <p className='font-semibold'>Open commitments</p>
+            <p className={`mt-2 ${ui.muted}`}>
+              Lead Monday standup without notes. Delegate Q2 report.
+            </p>
+          </div>
+          <div className={`${ui.darkPanel} rounded-2xl p-4`}>
+            <p className='text-sm font-semibold text-[#c79a38]'>
+              Suggested opening
+            </p>
+            <p className='mt-2 leading-7'>
+              How did the standup go? You sounded energized about it on Day 3.
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`${ui.card} p-5`}>
+      <div className={`${ui.darkPanel} rounded-[1.5rem] p-5`}>
+        <p className='text-sm font-semibold uppercase tracking-[0.18em] text-[#c79a38]'>
+          Your coaching space
+        </p>
+        <h3 className='mt-2 text-2xl font-semibold'>Sarah's Coaching</h3>
+        <p className={`mt-2 ${ui.darkMuted}`}>Private · coach-approved</p>
+      </div>
+      <div className='mt-4 space-y-3'>
+        {['Messages', 'Notes', 'Commitments', 'Resources'].map((item) => (
+          <div
+            key={item}
+            className='flex items-center justify-between rounded-2xl bg-[#fbf8f1] p-4'
+          >
+            <span className='font-medium'>{item}</span>
+            <span className={ui.accent}>→</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function StepSection({
+  step,
+  index,
+}: {
+  step: (typeof weekSteps)[number];
+  index: number;
+}) {
+  const text = (
+    <div>
+      <p className={ui.overline}>{step.eyebrow}</p>
+      <p className={`mt-5 font-serif text-6xl font-semibold ${ui.accent}`}>
+        {index + 1}
+      </p>
+      <h2 className={`${ui.heading} mt-5 text-4xl leading-tight md:text-5xl`}>
+        {step.title}
+      </h2>
+      <p className={`mt-5 text-lg leading-8 ${ui.muted}`}>{step.copy}</p>
+      <p className='mt-6 rounded-2xl bg-[#e8f6f2] px-5 py-4 font-semibold text-[#248b7e]'>
+        {step.proof}
+      </p>
+    </div>
+  );
+
+  const visual = <Mockup type={step.mockup} />;
+
+  return (
+    <section className={ui.section}>
+      <div className='grid grid-cols-1 items-center gap-10 lg:grid-cols-2'>
+        {index % 2 === 0 ? (
+          <>
+            {text}
+            {visual}
+          </>
+        ) : (
+          <>
+            <div className='lg:order-2'>{text}</div>
+            <div className='lg:order-1'>{visual}</div>
+          </>
+        )}
+      </div>
+    </section>
+  );
+}
+
+export default function HowItWorks() {
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('How It Works')}</title>
+      </Head>
+
+      <main className={`min-h-screen ${ui.page}`}>
+        <div className={`${ui.banner} px-5 py-4 text-center text-lg`}>
+          <p className='text-xs font-bold uppercase tracking-[0.34em]'>
+            Still human
+          </p>
+          <p className='mt-2 text-xl font-medium md:text-2xl'>
+            AI is not a coach. Keep the real relationship at the center.
+          </p>
+          <p className='mt-2 text-base text-white/90 md:text-lg'>
+            Launch a modern coaching workspace.
+            <Link
+              href='/login/'
+              className='ml-2 font-semibold underline decoration-white underline-offset-4'
+            >
+              Open workspace
+            </Link>
+          </p>
+        </div>
+
+        <Nav />
+
+        <section className='mx-auto max-w-6xl px-5 pb-16 pt-14 text-center lg:px-8'>
+          <p className={ui.overline}>How it works</p>
+          <h1
+            className={`${ui.heading} mx-auto mt-6 max-w-5xl text-5xl leading-[1.08] md:text-7xl`}
+          >
+            Your coaching week, without the admin drag.
+          </h1>
+          <p className={`mx-auto mt-7 max-w-3xl text-xl leading-9 ${ui.muted}`}>
+            Before the session, between sessions, and after the engagement ends:
+            the workspace keeps client context, session memory, and follow-up in
+            one coach-supervised flow.
+          </p>
+          <div className='mt-9 flex flex-wrap justify-center gap-4'>
+            <Link
+              href='/register/'
+              className={`rounded-full px-8 py-4 font-semibold ${ui.button}`}
+            >
+              Join waitlist
+            </Link>
+            <a
+              href='#coaching-week'
+              className='rounded-full border border-[#19192d]/10 bg-white px-8 py-4 font-semibold'
+            >
+              See your coaching week
+            </a>
+          </div>
+          <p className={`mt-5 ${ui.muted}`}>
+            Start with one client. 5-minute setup. Coach-approved outputs.
+          </p>
+        </section>
+
+        <section
+          id='coaching-week'
+          className={`border-y px-5 py-16 ${ui.border} ${ui.softSurface}`}
+        >
+          <div className='mx-auto max-w-6xl text-center'>
+            <p className={ui.overline}>Your coaching week</p>
+            <h2 className={`${ui.heading} mt-4 text-4xl md:text-6xl`}>
+              What if the busywork just was not there?
+            </h2>
+            <p
+              className={`mx-auto mt-5 max-w-3xl text-lg leading-8 ${ui.muted}`}
+            >
+              Five moments a week. You get your time back, your clients get
+              clearer support, and your coaching signature gets stronger.
+            </p>
+          </div>
+        </section>
+
+        {weekSteps.map((step, index) => (
+          <StepSection key={step.eyebrow} step={step} index={index} />
+        ))}
+
+        <WaveDivider from='#fffdf9' to='#19192d' />
+
+        <section className={`px-5 pb-20 pt-10 ${ui.darkPanel}`}>
+          <div className='mx-auto max-w-7xl lg:px-8'>
+            <div className='grid grid-cols-1 gap-10 lg:grid-cols-[0.9fr_1.1fr]'>
+              <div>
+                <p className='text-sm font-semibold uppercase tracking-[0.18em] text-[#c79a38]'>
+                  Go deeper
+                </p>
+                <h2 className='mt-4 font-serif text-5xl font-semibold leading-tight md:text-6xl'>
+                  Curious about a specific part?
+                </h2>
+                <p className={`mt-6 text-lg leading-8 ${ui.darkMuted}`}>
+                  Each part of the workflow can stand alone, but the real value
+                  shows up when session memory, client prompts, resources, and
+                  prep briefs reinforce each other.
+                </p>
+              </div>
+              <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+                {deeperItems.map(([title, copy]) => (
+                  <div
+                    key={title}
+                    className='rounded-[1.5rem] border border-white/10 bg-white/5 p-6'
+                  >
+                    <h3 className='text-xl font-semibold'>{title}</h3>
+                    <p className={`mt-3 leading-7 ${ui.darkMuted}`}>{copy}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <WaveDivider from='#fffdf9' to='#19192d' flip />
+
+        <section id='client-experience' className={`${ui.section} pt-10`}>
+          <div className='grid grid-cols-1 items-center gap-10 lg:grid-cols-[0.95fr_1.05fr]'>
+            <div className={`${ui.card} overflow-hidden`}>
+              <div className={`p-6 ${ui.darkPanel}`}>
+                <p className='text-sm font-semibold uppercase tracking-[0.18em] text-[#c79a38]'>
+                  Client view
+                </p>
+                <h3 className='mt-2 text-2xl font-semibold'>
+                  Sarah's Coaching
+                </h3>
+                <p className={`mt-2 ${ui.darkMuted}`}>
+                  Private workspace · approved by coach
+                </p>
+              </div>
+              <div className='grid gap-4 p-6'>
+                <div className='rounded-2xl bg-[#fbf8f1] p-4'>
+                  <p className='font-semibold'>Reflection prompt</p>
+                  <p className={`mt-2 leading-7 ${ui.muted}`}>
+                    What is one boundary you could set this week to protect
+                    strategic thinking time?
+                  </p>
+                </div>
+                <div className='rounded-2xl border border-[#19192d]/10 p-4'>
+                  <p className='font-semibold'>Session notes 6 shared</p>
+                  <p className={`mt-2 ${ui.muted}`}>
+                    Board presence, CPO conversations, delegation trust.
+                  </p>
+                </div>
+                <div className='rounded-2xl border border-[#19192d]/10 p-4'>
+                  <p className='font-semibold'>Commitments</p>
+                  <p className={`mt-2 ${ui.muted}`}>2 open · 5 done</p>
+                </div>
+              </div>
+            </div>
+            <div>
+              <p className={ui.overline}>The client experience</p>
+              <h2
+                className={`${ui.heading} mt-4 text-5xl leading-tight md:text-6xl`}
+              >
+                What your client actually sees.
+              </h2>
+              <p className={`mt-6 text-lg leading-8 ${ui.muted}`}>
+                Your client receives support that feels like it comes from you,
+                because it is based on your sessions, reviewed by you, and
+                shared by you.
+              </p>
+              <div className='mt-8 grid grid-cols-1 gap-4 md:grid-cols-2'>
+                {clientExperience.map(([title, copy]) => (
+                  <div key={title} className={ui.softCard + ' p-5'}>
+                    <h3 className='font-semibold'>{title}</h3>
+                    <p className={`mt-2 leading-7 ${ui.muted}`}>{copy}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section id='control' className={`px-5 py-20 ${ui.softSurface}`}>
+          <div className='mx-auto grid max-w-7xl grid-cols-1 gap-10 lg:grid-cols-[0.8fr_1.2fr]'>
+            <div>
+              <p className={ui.overline}>Coach-supervised AI</p>
+              <h2
+                className={`${ui.heading} mt-4 text-5xl leading-tight md:text-6xl`}
+              >
+                You control everything.
+              </h2>
+              <p className={`mt-6 text-lg leading-8 ${ui.muted}`}>
+                The workspace is opinionated about one thing: AI output should
+                be visible to the coach before it becomes client-facing.
+              </p>
+            </div>
+            <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+              {[
+                'You see every suggestion first',
+                'You edit the wording and tone',
+                'You can skip anything',
+                'Your client data stays structured',
+              ].map((item) => (
+                <div key={item} className={`${ui.card} p-6`}>
+                  <p className='text-3xl text-[#35b7a5]'>✓</p>
+                  <h3 className='mt-4 text-xl font-semibold'>{item}</h3>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        <section id='pricing' className='px-5 py-20'>
+          <div
+            className={`mx-auto grid max-w-7xl grid-cols-1 overflow-hidden rounded-[2rem] border lg:grid-cols-[0.9fr_1.1fr] ${ui.border} ${ui.darkPanel}`}
+          >
+            <div className='p-8 md:p-12'>
+              <p className='text-sm font-semibold uppercase tracking-[0.18em] text-[#c79a38]'>
+                Simple pricing
+              </p>
+              <h2 className='mt-4 font-serif text-5xl font-semibold leading-tight'>
+                One workspace for the whole coaching loop.
+              </h2>
+            </div>
+            <div className={`p-8 md:p-12 ${ui.surface} ${ui.ink}`}>
+              <p className={ui.overline}>During coaching</p>
+              <h3 className='mt-3 text-4xl font-semibold'>
+                $14 / client / month
+              </h3>
+              <p className={`mt-4 leading-7 ${ui.muted}`}>
+                Everything included: session memory, prep briefs, resources,
+                client portal, and approved follow-up prompts.
+              </p>
+              <Link
+                href='/register/'
+                className={`mt-8 inline-flex rounded-full px-7 py-4 font-semibold ${ui.button}`}
+              >
+                Join waitlist
+              </Link>
+            </div>
+          </div>
+        </section>
+
+        <section className={`${ui.section} pt-0`}>
+          <div className='mx-auto max-w-4xl'>
+            <p className={`${ui.overline} text-center`}>
+              Questions before you start
+            </p>
+            <h2
+              className={`${ui.heading} mt-4 text-center text-4xl md:text-5xl`}
+            >
+              The questions coaches ask first.
+            </h2>
+            <div className='mt-10 grid gap-4'>
+              {faq.map(([question, answer]) => (
+                <div key={question} className={`${ui.card} p-6`}>
+                  <h3 className='text-xl font-semibold'>{question}</h3>
+                  <p className={`mt-3 leading-7 ${ui.muted}`}>{answer}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        <section className={`px-5 py-20 text-center ${ui.darkPanel}`}>
+          <p className='text-sm font-semibold uppercase tracking-[0.18em] text-[#c79a38]'>
+            Ready to try it?
+          </p>
+          <h2 className='mx-auto mt-4 max-w-3xl font-serif text-5xl font-semibold leading-tight md:text-6xl'>
+            Start with one client and see the full loop.
+          </h2>
+          <div className='mt-8 flex justify-center'>
+            <Link
+              href='/register/'
+              className={`rounded-full px-8 py-4 font-semibold ${ui.button}`}
+            >
+              Join waitlist
+            </Link>
+          </div>
+        </section>
+
+        <footer className={`border-t px-5 py-10 ${ui.border}`}>
+          <div
+            className={`mx-auto flex max-w-7xl flex-col justify-between gap-5 text-sm md:flex-row ${ui.muted}`}
+          >
+            <p>© 2026 Coaching SaaS Workspace. Coaching beyond the session.</p>
+            <div className='flex gap-5'>
+              <Link href='/privacy-policy/'>Privacy Policy</Link>
+              <Link href='/terms-of-use/'>Terms of Use</Link>
+              <Link href='/login/'>Login</Link>
+            </div>
+          </div>
+        </footer>
+      </main>
+    </>
+  );
+}
+
+HowItWorks.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutGuest>{page}</LayoutGuest>;
+};
diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
index 0b3e4a5..c462510 100644
--- a/frontend/src/pages/index.tsx
+++ b/frontend/src/pages/index.tsx
@@ -7,8 +7,10 @@ import { getPageTitle } from '../config';
 
 const ui = {
   page: 'bg-[#fffdf9] text-[#19192d]',
-  banner: 'bg-gradient-to-r from-[#35b7a5] via-[#95b76e] to-[#c38a25] text-white',
-  navShell: 'rounded-full bg-white shadow-[0_18px_60px_rgba(31,31,50,0.08)] ring-1 ring-[#19192d]/5',
+  banner:
+    'bg-gradient-to-r from-[#35b7a5] via-[#95b76e] to-[#c38a25] text-white',
+  navShell:
+    'rounded-full bg-white shadow-[0_18px_60px_rgba(31,31,50,0.08)] ring-1 ring-[#19192d]/5',
   ink: 'text-[#19192d]',
   muted: 'text-[#72798a]',
   accent: 'text-[#35b7a5]',
@@ -18,7 +20,8 @@ const ui = {
   softSurface: 'bg-[#fbf8f1]',
   darkPanel: 'bg-[#19192d] text-white',
   darkMuted: 'text-white/70',
-  button: 'bg-gradient-to-r from-[#36b39f] to-[#b98624] text-white shadow-[0_18px_45px_rgba(54,179,159,0.24)] transition hover:brightness-105',
+  button:
+    'bg-gradient-to-r from-[#36b39f] to-[#b98624] text-white shadow-[0_18px_45px_rgba(54,179,159,0.24)] transition hover:brightness-105',
   section: 'mx-auto max-w-7xl px-5 py-20 lg:px-8',
   card: 'rounded-[1.75rem] border border-[#19192d]/10 bg-white shadow-[0_18px_50px_rgba(31,31,50,0.05)]',
   softCard: 'rounded-[1.75rem] border border-[#19192d]/10 bg-[#fbf8f1]',
@@ -26,25 +29,56 @@ const ui = {
   heading: 'font-serif font-semibold tracking-tight text-[#19192d]',
 };
 
-const trustItems = ['Coach-reviewed AI', 'Private client records', 'Built for coaching'];
+const trustItems = [
+  'Coach-reviewed AI',
+  'Private client records',
+  'Built for coaching',
+];
 
 const stats = [
-  ['30 min', 'saved after every session with structured notes and follow-up drafts'],
+  [
+    '30 min',
+    'saved after every session with structured notes and follow-up drafts',
+  ],
   ['23 days', 'between sessions where client momentum needs support'],
-  ['6 outputs', 'summary, commitments, blockers, homework, prep, and client notes'],
+  [
+    '6 outputs',
+    'summary, commitments, blockers, homework, prep, and client notes',
+  ],
 ];
 
 const workflow = [
-  ['After every session', 'Capture themes, commitments, patterns, and follow-up copy while the coach stays present.'],
-  ['Between sessions', 'Keep clients connected to approved notes, resources, and action items inside their portal.'],
-  ['Before the next session', 'Surface open commitments, recent patterns, and a focused opening question.'],
+  [
+    'After every session',
+    'Capture themes, commitments, patterns, and follow-up copy while the coach stays present.',
+  ],
+  [
+    'Between sessions',
+    'Keep clients connected to approved notes, resources, and action items inside their portal.',
+  ],
+  [
+    'Before the next session',
+    'Surface open commitments, recent patterns, and a focused opening question.',
+  ],
 ];
 
 const trustCards = [
-  ['Your method', 'Capture language, frameworks, and recurring patterns from real sessions.'],
-  ['Your approval', 'Review notes, prompts, resources, and messages before they reach the client.'],
-  ['Your data', 'Keep client records structured around confidentiality and role-based access.'],
-  ['Your client portal', 'Share only the commitments, resources, and reflections that move the work forward.'],
+  [
+    'Your method',
+    'Capture language, frameworks, and recurring patterns from real sessions.',
+  ],
+  [
+    'Your approval',
+    'Review notes, prompts, resources, and messages before they reach the client.',
+  ],
+  [
+    'Your data',
+    'Keep client records structured around confidentiality and role-based access.',
+  ],
+  [
+    'Your client portal',
+    'Share only the commitments, resources, and reflections that move the work forward.',
+  ],
 ];
 
 const testimonials = [
@@ -75,16 +109,19 @@ function WaveDivider({
   flip?: boolean;
 }) {
   return (
-    <div className="relative h-28 overflow-hidden" style={{ backgroundColor: from }}>
+    <div
+      className='relative h-28 overflow-hidden'
+      style={{ backgroundColor: from }}
+    >
       <svg
         className={`absolute inset-x-0 bottom-0 h-full w-full ${flip ? 'rotate-180' : ''}`}
-        viewBox="0 0 1440 160"
-        preserveAspectRatio="none"
-        aria-hidden="true"
+        viewBox='0 0 1440 160'
+        preserveAspectRatio='none'
+        aria-hidden='true'
       >
         <path
           fill={to}
-          d="M0,96 C180,122 330,136 520,124 C720,112 865,58 1090,72 C1248,82 1356,106 1440,96 L1440,160 L0,160 Z"
+          d='M0,96 C180,122 330,136 520,124 C720,112 865,58 1090,72 C1248,82 1356,106 1440,96 L1440,160 L0,160 Z'
         />
       </svg>
     </div>
@@ -100,59 +137,90 @@ export default function Starter() {
 
       <main className={`min-h-screen ${ui.page}`}>
         <div className={`${ui.banner} px-5 py-4 text-center text-lg`}>
-          <p className="text-xs font-bold uppercase tracking-[0.34em]">Still human</p>
-          <p className="mt-2 text-xl font-medium md:text-2xl">AI is not a coach. Keep the real relationship at the center.</p>
-          <p className="mt-2 text-base text-white/90 md:text-lg">
+          <p className='text-xs font-bold uppercase tracking-[0.34em]'>
+            Still human
+          </p>
+          <p className='mt-2 text-xl font-medium md:text-2xl'>
+            AI is not a coach. Keep the real relationship at the center.
+          </p>
+          <p className='mt-2 text-base text-white/90 md:text-lg'>
             Launch a modern coaching workspace.
-            <Link href="/login/" className="ml-2 font-semibold underline decoration-white underline-offset-4">
+            <Link
+              href='/login/'
+              className='ml-2 font-semibold underline decoration-white underline-offset-4'
+            >
               Open workspace
             </Link>
           </p>
         </div>
 
-        <header className="sticky top-4 z-50 px-5 pt-7">
-          <div className={`mx-auto flex max-w-6xl items-center justify-between gap-5 px-5 py-4 backdrop-blur-xl md:px-7 md:py-5 ${ui.navShell}`}>
-            <Link href="/" className="flex items-center gap-3 text-lg font-semibold tracking-tight">
-              <span className="flex h-11 w-11 items-center justify-center rounded-2xl bg-[#f3fbf8] text-2xl font-black text-[#35b7a5]">
+        <header className='sticky top-4 z-50 px-5 pt-7'>
+          <div
+            className={`mx-auto flex max-w-6xl items-center justify-between gap-5 px-5 py-4 backdrop-blur-xl md:px-7 md:py-5 ${ui.navShell}`}
+          >
+            <Link
+              href='/'
+              className='flex items-center gap-3 text-lg font-semibold tracking-tight'
+            >
+              <span className='flex h-11 w-11 items-center justify-center rounded-2xl bg-[#f3fbf8] text-2xl font-black text-[#35b7a5]'>
                 C
               </span>
-              <span className="sr-only">Coaching SaaS Workspace</span>
+              <span className='sr-only'>Coaching SaaS Workspace</span>
             </Link>
-            <nav className={`hidden items-center gap-8 text-lg font-medium ${ui.ink} md:flex`}>
-              <a href="#how-it-works">How it works</a>
-              <a href="#coachee">Coachee</a>
-              <a href="#pricing">Pricing</a>
-              <a href="#session-memory">Compare</a>
-              <a href="#trust">Trust</a>
-              <a href="#events">Events</a>
-              <a href="#pricing">Packages</a>
+            <nav
+              className={`hidden items-center gap-8 text-lg font-medium ${ui.ink} md:flex`}
+            >
+              <Link href='/how-it-works/'>How it works</Link>
+              <Link href='/client-portal/'>Coachee</Link>
+              <a href='#pricing'>Pricing</a>
+              <a href='#session-memory'>Compare</a>
+              <a href='#trust'>Trust</a>
+              <a href='#events'>Events</a>
+              <a href='#pricing'>Packages</a>
             </nav>
-            <Link href="/register/" className={`rounded-full px-7 py-3 text-base font-semibold ${ui.button}`}>
+            <Link
+              href='/register/'
+              className={`rounded-full px-7 py-3 text-base font-semibold ${ui.button}`}
+            >
               Join waitlist
             </Link>
           </div>
         </header>
 
-        <section className="mx-auto max-w-7xl px-5 pb-16 pt-7 text-center lg:px-8">
-          <div className="mx-auto max-w-4xl">
-            <p className={`mb-6 ${ui.overline}`}>For leadership and executive coaches</p>
-            <h1 className={`${ui.heading} text-5xl leading-[1.08] md:text-6xl xl:text-[5.4rem]`}>
+        <section className='mx-auto max-w-7xl px-5 pb-16 pt-7 text-center lg:px-8'>
+          <div className='mx-auto max-w-4xl'>
+            <p className={`mb-6 ${ui.overline}`}>
+              For leadership and executive coaches
+            </p>
+            <h1
+              className={`${ui.heading} text-5xl leading-[1.08] md:text-6xl xl:text-[5.4rem]`}
+            >
               What happens when your best coaching{' '}
               <span className={ui.accent}>keeps going.</span>
             </h1>
-            <p className={`mx-auto mt-7 max-w-3xl text-xl leading-8 md:text-2xl md:leading-9 ${ui.muted}`}>
-              Show up fully present. No note-taking. No admin. Your workspace captures what makes
-              your coaching yours, so clients stay connected to the work between sessions.
+            <p
+              className={`mx-auto mt-7 max-w-3xl text-xl leading-8 md:text-2xl md:leading-9 ${ui.muted}`}
+            >
+              Show up fully present. No note-taking. No admin. Your workspace
+              captures what makes your coaching yours, so clients stay connected
+              to the work between sessions.
             </p>
-            <div className="mt-9 flex justify-center">
-              <Link href="/register/" className={`rounded-full px-10 py-5 text-lg font-semibold ${ui.button}`}>
+            <div className='mt-9 flex justify-center'>
+              <Link
+                href='/register/'
+                className={`rounded-full px-10 py-5 text-lg font-semibold ${ui.button}`}
+              >
                 Join waitlist
               </Link>
             </div>
-            <p className={`mt-5 text-lg ${ui.muted}`}>$14/client/month. Everything included.</p>
-            <div className={`mx-auto mt-7 flex max-w-3xl flex-wrap justify-center gap-x-9 gap-y-4 text-lg ${ui.muted}`}>
+            <p className={`mt-5 text-lg ${ui.muted}`}>
+              $14/client/month. Everything included.
+            </p>
+            <div
+              className={`mx-auto mt-7 flex max-w-3xl flex-wrap justify-center gap-x-9 gap-y-4 text-lg ${ui.muted}`}
+            >
               {trustItems.map((item) => (
-                <span key={item} className="flex items-center gap-2">
+                <span key={item} className='flex items-center gap-2'>
                   <span className={ui.accent}>✦</span>
                   {item}
                 </span>
@@ -160,68 +228,103 @@ export default function Starter() {
             </div>
           </div>
 
-          <div className="relative mx-auto mt-12 max-w-4xl">
-            <div className="absolute -inset-12 rounded-full bg-[#35b7a5]/10 blur-3xl" />
-            <div className={`relative rounded-[2rem] border p-4 shadow-[0_24px_80px_rgba(31,31,50,0.10)] ${ui.border} ${ui.surface}`}>
+          <div className='relative mx-auto mt-12 max-w-4xl'>
+            <div className='absolute -inset-12 rounded-full bg-[#35b7a5]/10 blur-3xl' />
+            <div
+              className={`relative rounded-[2rem] border p-4 shadow-[0_24px_80px_rgba(31,31,50,0.10)] ${ui.border} ${ui.surface}`}
+            >
               <div className={`rounded-[1.5rem] p-4 ${ui.darkPanel}`}>
-                <div className="mb-4 flex items-center justify-between">
+                <div className='mb-4 flex items-center justify-between'>
                   <div>
-                    <p className="text-xs uppercase tracking-[0.16em] text-[#c79a38]">Session insights</p>
-                    <h2 className="mt-1 text-2xl font-semibold">Maya Chen · Session 4</h2>
+                    <p className='text-xs uppercase tracking-[0.16em] text-[#c79a38]'>
+                      Session insights
+                    </p>
+                    <h2 className='mt-1 text-2xl font-semibold'>
+                      Maya Chen · Session 4
+                    </h2>
                   </div>
-                  <span className="rounded-full bg-[#c79a38] px-3 py-1 text-sm font-semibold text-white">
+                  <span className='rounded-full bg-[#c79a38] px-3 py-1 text-sm font-semibold text-white'>
                     Review
                   </span>
                 </div>
 
-                <div className="grid grid-cols-1 gap-3 md:grid-cols-3">
-                  {['Delegation trust', 'Decision rights', 'Founder visibility'].map((topic) => (
-                    <div key={topic} className="rounded-2xl bg-white/10 p-4">
-                      <p className="text-sm font-medium text-white">{topic}</p>
+                <div className='grid grid-cols-1 gap-3 md:grid-cols-3'>
+                  {[
+                    'Delegation trust',
+                    'Decision rights',
+                    'Founder visibility',
+                  ].map((topic) => (
+                    <div key={topic} className='rounded-2xl bg-white/10 p-4'>
+                      <p className='text-sm font-medium text-white'>{topic}</p>
                     </div>
                   ))}
                 </div>
 
-                <div className="mt-4 rounded-2xl bg-white p-5 text-[#19192d]">
-                  <p className={`text-sm font-semibold uppercase tracking-[0.14em] ${ui.gold}`}>Commitments</p>
-                  <ul className="mt-4 space-y-3 text-sm leading-6">
+                <div className='mt-4 rounded-2xl bg-white p-5 text-[#19192d]'>
+                  <p
+                    className={`text-sm font-semibold uppercase tracking-[0.14em] ${ui.gold}`}
+                  >
+                    Commitments
+                  </p>
+                  <ul className='mt-4 space-y-3 text-sm leading-6'>
                     <li>Draft a decision-rights matrix before Friday.</li>
-                    <li>Choose three decisions the team can own without founder approval.</li>
+                    <li>
+                      Choose three decisions the team can own without founder
+                      approval.
+                    </li>
                     <li>Review customer escalation rules with the COO.</li>
                   </ul>
                 </div>
 
-                <div className="mt-4 grid grid-cols-1 gap-4 lg:grid-cols-[0.9fr_1.1fr]">
-                  <div className="rounded-2xl bg-white/10 p-5">
-                    <p className="text-sm font-semibold text-[#c79a38]">Pattern</p>
+                <div className='mt-4 grid grid-cols-1 gap-4 lg:grid-cols-[0.9fr_1.1fr]'>
+                  <div className='rounded-2xl bg-white/10 p-5'>
+                    <p className='text-sm font-semibold text-[#c79a38]'>
+                      Pattern
+                    </p>
                     <p className={`mt-2 leading-7 ${ui.darkMuted}`}>
-                      Maya is moving from control as quality assurance toward explicit decision boundaries.
+                      Maya is moving from control as quality assurance toward
+                      explicit decision boundaries.
                     </p>
                   </div>
-                  <div className="rounded-2xl bg-white/10 p-5">
-                    <p className="text-sm font-semibold text-[#c79a38]">Follow-up draft</p>
+                  <div className='rounded-2xl bg-white/10 p-5'>
+                    <p className='text-sm font-semibold text-[#c79a38]'>
+                      Follow-up draft
+                    </p>
                     <p className={`mt-2 leading-7 ${ui.darkMuted}`}>
-                      This week is about making delegation visible enough that trust can become operational.
+                      This week is about making delegation visible enough that
+                      trust can become operational.
                     </p>
                   </div>
                 </div>
               </div>
 
-              <div className={`absolute -bottom-8 right-8 hidden w-80 p-5 text-left lg:block ${ui.card}`}>
-                <p className={`text-xs font-semibold uppercase tracking-[0.16em] ${ui.gold}`}>Client message</p>
-                <p className={`mt-3 leading-7 ${ui.muted}`}>
-                  “The board conversation went better than expected. I led with the narrative instead of defending the roadmap.”
+              <div
+                className={`absolute -bottom-8 right-8 hidden w-80 p-5 text-left lg:block ${ui.card}`}
+              >
+                <p
+                  className={`text-xs font-semibold uppercase tracking-[0.16em] ${ui.gold}`}
+                >
+                  Client message
                 </p>
-                <p className={`mt-4 rounded-2xl p-3 text-sm font-medium ${ui.softSurface}`}>
-                  Suggested reply: What changed in the room when you led that way?
+                <p className={`mt-3 leading-7 ${ui.muted}`}>
+                  “The board conversation went better than expected. I led with
+                  the narrative instead of defending the roadmap.”
+                </p>
+                <p
+                  className={`mt-4 rounded-2xl p-3 text-sm font-medium ${ui.softSurface}`}
+                >
+                  Suggested reply: What changed in the room when you led that
+                  way?
                 </p>
               </div>
             </div>
           </div>
         </section>
 
-        <section className={`border-y px-5 py-10 ${ui.border} ${ui.softSurface}`}>
-          <div className="mx-auto grid max-w-7xl grid-cols-1 gap-6 md:grid-cols-3">
+        <section
+          className={`border-y px-5 py-10 ${ui.border} ${ui.softSurface}`}
+        >
+          <div className='mx-auto grid max-w-7xl grid-cols-1 gap-6 md:grid-cols-3'>
             {stats.map(([value, label]) => (
               <div key={value} className={`border-l pl-5 ${ui.border}`}>
                 <p className={`${ui.heading} text-5xl`}>{value}</p>
@@ -231,22 +334,27 @@ export default function Starter() {
           </div>
         </section>
 
-        <section id="how-it-works" className={ui.section}>
-          <div className="grid grid-cols-1 gap-10 lg:grid-cols-[0.8fr_1.2fr]">
+        <section id='how-it-works' className={ui.section}>
+          <div className='grid grid-cols-1 gap-10 lg:grid-cols-[0.8fr_1.2fr]'>
             <div>
               <p className={ui.overline}>The new practice rhythm</p>
-              <h2 className={`${ui.heading} mt-4 text-5xl leading-tight md:text-6xl`}>
+              <h2
+                className={`${ui.heading} mt-4 text-5xl leading-tight md:text-6xl`}
+              >
                 Before, between, and after every session.
               </h2>
             </div>
-            <div className="grid grid-cols-1 gap-4">
+            <div className='grid grid-cols-1 gap-4'>
               {workflow.map(([title, copy], index) => (
-                <div key={title} className={`grid grid-cols-[3rem_1fr] gap-5 p-5 ${ui.card}`}>
-                  <div className="flex h-12 w-12 items-center justify-center rounded-full bg-[#35b7a5] font-semibold text-white">
+                <div
+                  key={title}
+                  className={`grid grid-cols-[3rem_1fr] gap-5 p-5 ${ui.card}`}
+                >
+                  <div className='flex h-12 w-12 items-center justify-center rounded-full bg-[#35b7a5] font-semibold text-white'>
                     {index + 1}
                   </div>
                   <div>
-                    <h3 className="text-xl font-semibold">{title}</h3>
+                    <h3 className='text-xl font-semibold'>{title}</h3>
                     <p className={`mt-2 leading-7 ${ui.muted}`}>{copy}</p>
                   </div>
                 </div>
@@ -255,88 +363,129 @@ export default function Starter() {
           </div>
         </section>
 
-        <WaveDivider from="#fffdf9" to="#19192d" />
+        <WaveDivider from='#fffdf9' to='#19192d' />
 
-        <section id="session-memory" className={`px-5 pb-20 pt-10 ${ui.darkPanel}`}>
-          <div className="mx-auto grid max-w-7xl grid-cols-1 gap-10 lg:grid-cols-[0.95fr_1.05fr] lg:px-8">
-            <div className="flex flex-col justify-center">
-              <p className="text-sm font-semibold uppercase tracking-[0.18em] text-[#c79a38]">Session memory</p>
-              <h2 className="mt-4 font-serif text-5xl font-semibold leading-tight md:text-6xl">
+        <section
+          id='session-memory'
+          className={`px-5 pb-20 pt-10 ${ui.darkPanel}`}
+        >
+          <div className='mx-auto grid max-w-7xl grid-cols-1 gap-10 lg:grid-cols-[0.95fr_1.05fr] lg:px-8'>
+            <div className='flex flex-col justify-center'>
+              <p className='text-sm font-semibold uppercase tracking-[0.18em] text-[#c79a38]'>
+                Session memory
+              </p>
+              <h2 className='mt-4 font-serif text-5xl font-semibold leading-tight md:text-6xl'>
                 Stop opening old notes before every call.
               </h2>
               <p className={`mt-6 text-lg leading-8 ${ui.darkMuted}`}>
-                The workspace pulls together open commitments, themes across sessions, client messages,
-                and a suggested opening question. You review everything first.
+                The workspace pulls together open commitments, themes across
+                sessions, client messages, and a suggested opening question. You
+                review everything first.
               </p>
-              <div className="mt-8 grid grid-cols-2 gap-4">
-                {['Open commitments', 'Client patterns', 'Shared notes', 'Prep questions'].map((item) => (
-                  <div key={item} className="rounded-2xl border border-white/10 bg-white/5 p-4">
-                    <p className="font-semibold">{item}</p>
+              <div className='mt-8 grid grid-cols-2 gap-4'>
+                {[
+                  'Open commitments',
+                  'Client patterns',
+                  'Shared notes',
+                  'Prep questions',
+                ].map((item) => (
+                  <div
+                    key={item}
+                    className='rounded-2xl border border-white/10 bg-white/5 p-4'
+                  >
+                    <p className='font-semibold'>{item}</p>
                   </div>
                 ))}
               </div>
             </div>
 
-            <div className={`rounded-[2rem] border p-5 ${ui.border} ${ui.surface} ${ui.ink}`}>
-              <div className={`flex flex-wrap items-center justify-between gap-4 border-b pb-5 ${ui.border}`}>
+            <div
+              className={`rounded-[2rem] border p-5 ${ui.border} ${ui.surface} ${ui.ink}`}
+            >
+              <div
+                className={`flex flex-wrap items-center justify-between gap-4 border-b pb-5 ${ui.border}`}
+              >
                 <div>
-                  <p className={`text-sm font-semibold uppercase tracking-[0.16em] ${ui.gold}`}>Session prep</p>
-                  <h3 className="mt-1 text-2xl font-semibold">Maya Chen · Session 5</h3>
+                  <p
+                    className={`text-sm font-semibold uppercase tracking-[0.16em] ${ui.gold}`}
+                  >
+                    Session prep
+                  </p>
+                  <h3 className='mt-1 text-2xl font-semibold'>
+                    Maya Chen · Session 5
+                  </h3>
                 </div>
-                <span className="rounded-full bg-[#e8f6f2] px-4 py-2 text-sm font-semibold text-[#248b7e]">
+                <span className='rounded-full bg-[#e8f6f2] px-4 py-2 text-sm font-semibold text-[#248b7e]'>
                   Ready when you are
                 </span>
               </div>
 
-              <div className="mt-5 grid grid-cols-3 gap-3">
+              <div className='mt-5 grid grid-cols-3 gap-3'>
                 {[
                   ['4', 'messages'],
                   ['2', 'open commitments'],
                   ['3', 'goals in focus'],
                 ].map(([value, label]) => (
-                  <div key={label} className={`rounded-2xl p-4 ${ui.softSurface}`}>
-                    <p className="text-3xl font-semibold">{value}</p>
+                  <div
+                    key={label}
+                    className={`rounded-2xl p-4 ${ui.softSurface}`}
+                  >
+                    <p className='text-3xl font-semibold'>{value}</p>
                     <p className={`mt-1 text-sm ${ui.muted}`}>{label}</p>
                   </div>
                 ))}
               </div>
 
               <div className={`mt-5 rounded-2xl border p-5 ${ui.border}`}>
-                <p className={`text-sm font-semibold uppercase tracking-[0.14em] ${ui.gold}`}>Top thread</p>
-                <p className="mt-3 text-lg font-semibold">Decision rights are clear on paper, but still feel risky in practice.</p>
+                <p
+                  className={`text-sm font-semibold uppercase tracking-[0.14em] ${ui.gold}`}
+                >
+                  Top thread
+                </p>
+                <p className='mt-3 text-lg font-semibold'>
+                  Decision rights are clear on paper, but still feel risky in
+                  practice.
+                </p>
                 <p className={`mt-3 leading-7 ${ui.muted}`}>
-                  The last two sessions both returned to trust, escalation rules, and what Maya needs to see before stepping back.
+                  The last two sessions both returned to trust, escalation
+                  rules, and what Maya needs to see before stepping back.
                 </p>
               </div>
 
               <div className={`mt-5 rounded-2xl p-5 ${ui.darkPanel}`}>
-                <p className="text-sm font-semibold text-[#c79a38]">Suggested opening</p>
-                <p className="mt-3 text-xl leading-8">
-                  “Where did delegation feel cleaner this week, and where did your body still want to take the wheel?”
+                <p className='text-sm font-semibold text-[#c79a38]'>
+                  Suggested opening
+                </p>
+                <p className='mt-3 text-xl leading-8'>
+                  “Where did delegation feel cleaner this week, and where did
+                  your body still want to take the wheel?”
                 </p>
               </div>
             </div>
           </div>
         </section>
 
-        <WaveDivider from="#fffdf9" to="#19192d" flip />
+        <WaveDivider from='#fffdf9' to='#19192d' flip />
 
-        <section id="trust" className={`${ui.section} pt-10`}>
-          <div className="grid grid-cols-1 gap-10 lg:grid-cols-[0.9fr_1.1fr]">
+        <section id='trust' className={`${ui.section} pt-10`}>
+          <div className='grid grid-cols-1 gap-10 lg:grid-cols-[0.9fr_1.1fr]'>
             <div>
               <p className={ui.overline}>Coach supervised</p>
-              <h2 className={`${ui.heading} mt-4 text-5xl leading-tight md:text-6xl`}>
+              <h2
+                className={`${ui.heading} mt-4 text-5xl leading-tight md:text-6xl`}
+              >
                 The AI proposes. The coach decides.
               </h2>
               <p className={`mt-6 text-lg leading-8 ${ui.muted}`}>
-                Private notes stay private. Shared notes are approved. Client-facing content carries the coach's voice,
-                not a generic chatbot voice.
+                Private notes stay private. Shared notes are approved.
+                Client-facing content carries the coach's voice, not a generic
+                chatbot voice.
               </p>
             </div>
-            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
               {trustCards.map(([title, copy]) => (
                 <div key={title} className={`p-6 ${ui.card}`}>
-                  <h3 className="text-xl font-semibold">{title}</h3>
+                  <h3 className='text-xl font-semibold'>{title}</h3>
                   <p className={`mt-3 leading-7 ${ui.muted}`}>{copy}</p>
                 </div>
               ))}
@@ -344,23 +493,30 @@ export default function Starter() {
           </div>
         </section>
 
-        <section id="events" className={`px-5 py-20 ${ui.softSurface}`}>
-          <div className="mx-auto max-w-7xl">
-            <div className="mb-8 flex flex-col justify-between gap-4 md:flex-row md:items-end">
+        <section id='events' className={`px-5 py-20 ${ui.softSurface}`}>
+          <div className='mx-auto max-w-7xl'>
+            <div className='mb-8 flex flex-col justify-between gap-4 md:flex-row md:items-end'>
               <div>
                 <p className={ui.overline}>Built with coaches</p>
-                <h2 className={`${ui.heading} mt-4 text-5xl`}>Designed for real client work.</h2>
+                <h2 className={`${ui.heading} mt-4 text-5xl`}>
+                  Designed for real client work.
+                </h2>
               </div>
-              <Link href="/register/" className={`rounded-full px-6 py-3 text-center font-semibold ${ui.button}`}>
+              <Link
+                href='/register/'
+                className={`rounded-full px-6 py-3 text-center font-semibold ${ui.button}`}
+              >
                 Start your workspace
               </Link>
             </div>
-            <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+            <div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
               {testimonials.map(([quote, name, role]) => (
                 <figure key={name} className={`p-6 ${ui.card}`}>
-                  <blockquote className={`leading-8 ${ui.ink}`}>“{quote}”</blockquote>
-                  <figcaption className="mt-6">
-                    <p className="font-semibold">{name}</p>
+                  <blockquote className={`leading-8 ${ui.ink}`}>
+                    “{quote}”
+                  </blockquote>
+                  <figcaption className='mt-6'>
+                    <p className='font-semibold'>{name}</p>
                     <p className={`text-sm ${ui.muted}`}>{role}</p>
                   </figcaption>
                 </figure>
@@ -369,27 +525,43 @@ export default function Starter() {
           </div>
         </section>
 
-        <section id="pricing" className="px-5 py-20">
-          <div className={`mx-auto grid max-w-7xl grid-cols-1 overflow-hidden rounded-[2rem] border lg:grid-cols-[0.9fr_1.1fr] ${ui.border} ${ui.darkPanel}`}>
-            <div className="p-8 md:p-12">
-              <p className="text-sm font-semibold uppercase tracking-[0.18em] text-[#c79a38]">Template package</p>
-              <h2 className="mt-4 font-serif text-5xl font-semibold leading-tight">
+        <section id='pricing' className='px-5 py-20'>
+          <div
+            className={`mx-auto grid max-w-7xl grid-cols-1 overflow-hidden rounded-[2rem] border lg:grid-cols-[0.9fr_1.1fr] ${ui.border} ${ui.darkPanel}`}
+          >
+            <div className='p-8 md:p-12'>
+              <p className='text-sm font-semibold uppercase tracking-[0.18em] text-[#c79a38]'>
+                Template package
+              </p>
+              <h2 className='mt-4 font-serif text-5xl font-semibold leading-tight'>
                 Launch a coaching practice with the workspace already inside.
               </h2>
             </div>
             <div className={`p-8 md:p-12 ${ui.surface} ${ui.ink}`}>
-              <h3 className="text-2xl font-semibold">Executive Momentum</h3>
+              <h3 className='text-2xl font-semibold'>Executive Momentum</h3>
               <p className={`mt-3 leading-7 ${ui.muted}`}>
-                A ready-made package page, client records, session memory, prep briefs, resources, and portal flow.
+                A ready-made package page, client records, session memory, prep
+                briefs, resources, and portal flow.
               </p>
-              <div className="mt-7 grid grid-cols-1 gap-3 sm:grid-cols-2">
-                {['6 coaching sessions', 'AI-assisted session notes', 'Shared resources', 'Client portal access'].map((item) => (
-                  <div key={item} className={`rounded-2xl p-4 font-medium ${ui.softSurface}`}>
+              <div className='mt-7 grid grid-cols-1 gap-3 sm:grid-cols-2'>
+                {[
+                  '6 coaching sessions',
+                  'AI-assisted session notes',
+                  'Shared resources',
+                  'Client portal access',
+                ].map((item) => (
+                  <div
+                    key={item}
+                    className={`rounded-2xl p-4 font-medium ${ui.softSurface}`}
+                  >
                     {item}
                   </div>
                 ))}
               </div>
-              <Link href="/register/" className={`mt-8 inline-flex rounded-full px-7 py-4 font-semibold ${ui.button}`}>
+              <Link
+                href='/register/'
+                className={`mt-8 inline-flex rounded-full px-7 py-4 font-semibold ${ui.button}`}
+              >
                 Create workspace
               </Link>
             </div>
@@ -397,12 +569,14 @@ export default function Starter() {
         </section>
 
         <footer className={`border-t px-5 py-10 ${ui.border}`}>
-          <div className={`mx-auto flex max-w-7xl flex-col justify-between gap-5 text-sm md:flex-row ${ui.muted}`}>
+          <div
+            className={`mx-auto flex max-w-7xl flex-col justify-between gap-5 text-sm md:flex-row ${ui.muted}`}
+          >
             <p>© 2026 Coaching SaaS Workspace. Coaching beyond the session.</p>
-            <div className="flex gap-5">
-              <Link href="/privacy-policy/">Privacy Policy</Link>
-              <Link href="/terms-of-use/">Terms of Use</Link>
-              <Link href="/login/">Login</Link>
+            <div className='flex gap-5'>
+              <Link href='/privacy-policy/'>Privacy Policy</Link>
+              <Link href='/terms-of-use/'>Terms of Use</Link>
+              <Link href='/login/'>Login</Link>
             </div>
           </div>
         </footer>