Unify page layouts, compact headers and shared UI styling

frontend/app/how-it-works/page.tsx

@@ -1,16 +1,11 @@
 'use client'
 
+import PageHeading from '../ui/PageHeading'
+
 export default function HowItWorksPage() {
   return (
     <main className="card how-page">
-      <header className="how-hero">
-        <p className="eyebrow">How it works</p>
-        <h1>How Magent works for users</h1>
-        <p className="lede">
-          Use Magent to find a request, watch it move through the pipeline, and know when it is
-          ready without constantly refreshing the page.
-        </p>
-      </header>
+      <PageHeading title="How it works" description="Request something to watch, follow its progress, and get help when you need it." />
 
       <section className="how-flow">
         <h2>What Magent is for</h2>