diff --git a/assets/js/main.js b/assets/js/main.js
index 5b9144b..945c619 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -1,4 +1,4 @@
-const pages = ['home', 'problem', 'why', 'features', 'how', 'roi', 'pricing', 'who', 'trust', 'roadmap', 'faq', 'signin', 'apply'];
+const pages = ['home','problem','why','features','how','roi','pricing','who','trust','roadmap','faq','signin','apply'];
 
 function openPage(pageId) {
     if (!pages.includes(pageId)) {
diff --git a/index.php b/index.php
index bc71550..eadbe86 100644
--- a/index.php
+++ b/index.php
@@ -503,6 +503,80 @@
         </section>
         <!-- ========================= END WHY FINMOX PAGE ========================= -->
 
+        <!-- ========================= PAGE: HOW (Part 1/3) AppWizzy-safe section ========================= -->
+<section id="page-how" class="page fade hidden">
+    <section class="panel-strong p-8 lg:p-10">
+        <div class="grid lg:grid-cols-12 gap-10 items-start">
+            <!-- Left: Header -->
+            <div class="lg:col-span-5">
+                <div class="chip inline-flex px-3 py-1 text-xs">How It Works</div>
+                <h1 class="mt-5 text-4xl font-extrabold tracking-tight">Three steps. Clean execution.</h1>
+                <p class="mt-5 text-gray-700">
+                    You define intent. FinMox enforces execution. Every action creates a record automatically — no chasing, no drift, no extra admin work.
+                </p>
+                <div class="mt-7 flex gap-3">
+                    <a href="#apply" onclick="openPage('apply'); return false;" class="bg-black text-white px-6 py-3 rounded-2xl text-sm hoverlift">Apply</a>
+                    <a href="#roi" onclick="openPage('roi'); return false;" class="chip px-6 py-3 rounded-2xl text-sm hoverlift">See ROI →</a>
+                </div>
+                <div class="mt-8 panel p-6">
+                    <div class="text-sm font-semibold">What FinMox standardizes</div>
+                    <ul class="mt-3 text-sm text-gray-700 space-y-2">
+                        <li>✔ Role criteria is locked (versioned, no drift)</li>
+                        <li>✔ Evaluation steps are required (consistent qualification)</li>
+                        <li>✔ Movement is automated (no chasing feedback)</li>
+                        <li>✔ Documentation is automatic (defensible record)</li>
+                    </ul>
+                </div>
+            </div>
+            <!-- Right: Steps -->
+            <div class="lg:col-span-7">
+                <div class="grid md:grid-cols-3 gap-6">
+                    <div class="panel-strong p-5">
+                        <div class="text-xs text-gray-500">Candidate ranking</div>
+                        <div class="mt-2 text-sm">Scored against locked criteria (no drift).</div>
+                        <div class="mt-3 flex flex-wrap gap-2">
+                            <span class="chip px-3 py-1 text-xs">Parsing</span>
+                            <span class="chip px-3 py-1 text-xs">Scoring</span>
+                            <span class="chip px-3 py-1 text-xs">Shortlists</span>
+                        </div>
+                    </div>
+                    <div class="panel-strong p-5">
+                        <div class="text-xs text-gray-500">Interview automation</div>
+                        <div class="mt-2 text-sm">Questions, summaries, recommendations — human-reviewed.</div>
+                        <div class="mt-3 flex flex-wrap gap-2">
+                            <span class="chip px-3 py-1 text-xs">Rubrics</span>
+                            <span class="chip px-3 py-1 text-xs">Summaries</span>
+                            <span class="chip px-3 py-1 text-xs">Next steps</span>
+                        </div>
+                    </div>
+                    <div class="panel-strong p-5">
+                        <div class="text-xs text-gray-500">Decision trail</div>
+                        <div class="mt-2 text-sm">Who decided, when, why — with criteria version.</div>
+                        <div class="mt-3 flex flex-wrap gap-2">
+                            <span class="chip px-3 py-1 text-xs">Timestamped</span>
+                            <span class="chip px-3 py-1 text-xs">Versioned</span>
+                            <span class="chip px-3 py-1 text-xs">Exportable</span>
+                        </div>
+                    </div>
+                    <div class="panel-strong p-5">
+                        <div class="text-xs text-gray-500">Compliance-ready exports</div>
+                        <div class="mt-2 text-sm">Audit-friendly logs without extra admin work.</div>
+                        <div class="mt-3 flex flex-wrap gap-2">
+                            <span class="chip px-3 py-1 text-xs">Decision log</span>
+                            <span class="chip px-3 py-1 text-xs">Audit export</span>
+                            <span class="chip px-3 py-1 text-xs">Records</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="mt-7 flex flex-wrap gap-3">
+                    <a href="#apply" onclick="openPage('apply'); return false;" class="bg-black text-white px-6 py-3 rounded-2xl text-sm hoverlift">Apply for Access</a>
+                    <a href="#pricing" onclick="openPage('pricing'); return false;" class="chip px-6 py-3 rounded-2xl text-sm hoverlift">View Pricing →</a>
+                </div>
+            </div>
+        </div>
+    </section>
+</section>
+
     </main>
 
     <!-- FOOTER -->