<?php session_start(); ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FinMox — HR Execution Operating System</title>
    <!-- Tailwind CDN (AppWizzy-safe) -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/custom.css">
</head>
<body class="bg-warm">
    <!-- TOP NAV -->
    <header class="max-w-7xl mx-auto px-6 py-5">
        <div class="flex items-center justify-between">
            <div class="font-extrabold text-lg">FinMox</div>
            <div class="hidden md:flex items-center gap-1 text-sm" id="nav-links">
                <!-- Links will be injected by JS -->
            </div>
            <div class="md:hidden">
                <button id="menu-button" class="p-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
                    </svg>
                </button>
            </div>
        </div>
        <!-- Mobile Menu -->
        <div id="mobile-menu" class="hidden md:hidden mt-4">
            <!-- Mobile links will be injected by JS -->
        </div>
    </header>

    <main class="max-w-7xl mx-auto p-6">
        <!-- HOME PAGE -->
        <section id="page-home" class="page fade">
            <!-- HERO -->
            <section class="panel-strong p-8 lg:p-10 text-center">
                <div class="inline-flex items-center gap-2 rounded-full border border-black/10 bg-white/70 px-3 py-1 text-xs">
                    <span class="h-2 w-2 rounded-full bg-black"></span>
                    Now in private beta
                </div>
                <h1 class="mt-5 text-4xl md:text-6xl font-extrabold tracking-tight">
                    The OS for hiring execution.
                </h1>
                <p class="mt-4 text-gray-600 max-w-xl mx-auto">
                    FinMox is an intelligent enterprise system that automates HR, compliance, and operations.
                    Finally, a way to control the entire lifecycle — from role intake to offer letter.
                </p>
                <div class="mt-6 flex items-center justify-center gap-3">
                    <a href="#apply" class="rounded-full bg-black px-5 py-2 text-white text-sm font-semibold">Apply for Beta</a>
                    <a href="#signin" class="rounded-full px-5 py-2 text-sm font-semibold">Sign In</a>
                </div>
            </section>

            <!-- KEY PROCESSES -->
            <section class="mt-10 grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div class="panel-strong p-5 hoverlift">
                    <div class="text-xs text-gray-500">Role Intake</div>
                    <div class="mt-1 font-semibold">Criteria Locked</div>
                    <div class="mt-3 text-xs text-gray-600">
                        Hiring intent standardized. Versioned. No drift.
                    </div>
                    <div class="mt-4 flex flex-wrap gap-2">
                        <span class="chip px-2 py-1 text-xs">Stakeholders</span>
                        <span class="chip px-2 py-1 text-xs">Rubric</span>
                        <span class="chip px-2 py-1 text-xs">Scope freeze</span>
                    </div>
                </div>
                <div class="panel-strong p-5 hoverlift">
                    <div class="text-xs text-gray-500">Structured Qualification</div>
                    <div class="mt-1 font-semibold">Consistent Evaluation</div>
                    <div class="mt-3 text-xs text-gray-600">
                        Same criteria. Required steps. Overrides recorded.
                    </div>
                    <div class="mt-4 flex flex-wrap gap-2">
                        <span class="chip px-2 py-1 text-xs">Scoring</span>
                        <span class="chip px-2 py-1 text-xs">Notes</span>
                        <span class="chip px-2 py-1 text-xs">Rationale</span>
                    </div>
                </div>
                <div class="panel-strong p-5 hoverlift">
                    <div class="text-xs text-gray-500">Candidate Movement</div>
                    <div class="mt-1 font-semibold">No Operational Drag</div>
                    <div class="mt-3 text-xs text-gray-600">
                        Scheduling + follow-ups handled automatically.
                    </div>
                    <div class="mt-4 flex flex-wrap gap-2">
                        <span class="chip px-2 py-1 text-xs">SLAs</span>
                        <span class="chip px-2 py-1 text-xs">Nudges</span>
                        <span class="chip px-2 py-1 text-xs">Status</span>
                    </div>
                </div>
                <div class="panel-strong p-5 hoverlift">
                    <div class="text-xs text-gray-500">Decision Trail</div>
                    <div class="mt-1 font-semibold">Defensible Record</div>
                    <div class="mt-3 text-xs text-gray-600">
                        Who decided, when, why, under which criteria version.
                    </div>
                    <div class="mt-4 flex flex-wrap gap-2">
                        <span class="chip px-2 py-1 text-xs">Timestamped</span>
                        <span class="chip px-2 py-1 text-xs">Versioned</span>
                        <span class="chip px-2 py-1 text-xs">Exportable</span>
                    </div>
                </div>
            </section>
        </section>

<!-- ========================= FEATURES PAGE ========================= -->
<section id="page-features" class="page fade hidden">
    <section class="panel-strong p-8 lg:p-10">
        <!-- Header -->
        <div class="grid lg:grid-cols-12 gap-10 items-start">
            <div class="lg:col-span-5">
                <div class="chip inline-flex px-3 py-1 text-xs">Features</div>
                <h1 class="mt-5 text-4xl font-extrabold tracking-tight">
                    Execution features that actually move hiring forward.
                </h1>
                <p class="mt-5 text-gray-700">
                    FinMox is built around one goal: <strong>control hiring execution</strong>. That means locked criteria, structured evaluation, automated movement, and defensible records — without adding admin work.
                </p>
                <div class="mt-7 panel p-6">
                    <div class="text-sm font-semibold">What you get from day one</div>
                    <ul class="mt-3 text-sm text-gray-700 space-y-2">
                        <li>✔ Criteria locking + version history (no drift)</li>
                        <li>✔ Consistent scoring + structured qualification</li>
                        <li>✔ Candidate movement automation (no chasing)</li>
                        <li>✔ Audit-friendly documentation as a byproduct of execution</li>
                    </ul>
                </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="#faq" onclick="openPage('faq'); return false;" class="chip px-6 py-3 rounded-2xl text-sm hoverlift">
                        Read FAQ →
                    </a>
                </div>
            </div>
            <!-- Right: Feature cards -->
            <div class="lg:col-span-7">
                <div class="grid md:grid-cols-3 gap-6">
                    <!-- Candidate Ranking -->
                    <div class="panel p-6 hoverlift">
                        <div class="rounded-2xl mb-6 bg-white border border-black/10 p-4"> <div class="text-xs text-gray-500 mb-3">Candidate Ranking</div> <div class="space-y-2"> <div class="flex justify-between items-center rounded-xl border px-3 py-2"> <span class="text-sm">A. Johnson</span> <span class="text-sm font-semibold">86</span> </div> <div class="flex justify-between items-center rounded-xl border px-3 py-2"> <span class="text-sm">M. Patel</span> <span class="text-sm font-semibold">82</span> </div> <div class="flex justify-between items-center rounded-xl border px-3 py-2 opacity-60"> <span class="text-sm">S. Nguyen</span> <span class="text-sm">74</span> </div> </div> </div>
                        <h3 class="text-lg font-semibold">Candidate Ranking</h3>
                        <p class="mt-2 text-sm text-gray-600">
                            Every candidate is scored against your role criteria so decisions don’t drift.
                        </p>
                        <div class="mt-4 flex flex-wrap gap-2 text-xs text-gray-600">
                            <span class="chip px-3 py-1">Parsing</span>
                            <span class="chip px-3 py-1">Scoring</span>
                            <span class="chip px-3 py-1">Shortlists</span>
                        </div>
                    </div>
                    <!-- Interview Automation -->
                    <div class="panel p-6 hoverlift">
                        <div class="rounded-2xl mb-6 bg-white border border-black/10 p-4"> <div class="text-xs text-gray-500 mb-3">Interview Automation</div> <div class="space-y-3"> <div class="rounded-xl border px-3 py-2 text-sm"> Question set generated </div> <div class="rounded-xl border px-3 py-2 text-sm"> Interview summary created </div> <div class="rounded-xl border px-3 py-2 text-sm font-semibold"> Recommendation: Proceed </div> </div> </div>
                        <h3 class="text-lg font-semibold">Interview Automation</h3>
                        <p class="mt-2 text-sm text-gray-600">
                            Role-specific questions, summaries, and recommendations — reviewable and exportable.
                        </p>
                        <div class="mt-4 flex flex-wrap gap-2 text-xs text-gray-600">
                            <span class="chip px-3 py-1">Question sets</span>
                            <span class="chip px-3 py-1">Summaries</span>
                            <span class="chip px-3 py-1">Recommendations</span>
                        </div>
                    </div>
                    <!-- Compliance & Analytics -->
                    <div class="panel p-6 hoverlift">
                        <div class="rounded-2xl mb-6 bg-white border border-black/10 p-4"> <div class="text-xs text-gray-500 mb-3">Compliance & Analytics</div> <div class="space-y-3"> <div class="rounded-xl border px-3 py-2 text-sm"> Decision log updated </div> <div class="rounded-xl border px-3 py-2 text-sm"> Audit trail exported </div> <div class="rounded-xl border px-3 py-2 text-sm font-semibold"> Bottleneck identified </div> </div> </div>
                        <h3 class="text-lg font-semibold">Compliance & Analytics</h3>
                        <p class="mt-2 text-sm text-gray-600">
                            Automatic decision trails + execution analytics so you can defend outcomes and fix bottlenecks.
                        </p>
                        <div class="mt-4 flex flex-wrap gap-2 text-xs text-gray-600">
                            <span class="chip px-3 py-1">Decision log</span>
                            <span class="chip px-3 py-1">Audit exports</span>
                            <span class="chip px-3 py-1">Bottleneck insights</span>
                        </div>
                    </div>
                </div> <!-- /grid -->
                <!-- Supporting callouts -->
                <div class="mt-6 panel p-6">
                    <div class="text-sm font-semibold">What “execution control” means in practice</div>
                    <div class="mt-4 grid sm:grid-cols-2 gap-4">
                        <div class="panel-strong p-5">
                            <div class="text-xs text-gray-500">Criteria is locked</div>
                            <div class="mt-2 text-sm text-gray-700">
                                Roles don’t silently change mid-process. If criteria changes, it’s versioned and recorded.
                            </div>
                        </div>
                        <div class="panel-strong p-5">
                            <div class="text-xs text-gray-500">Overrides are captured</div>
                            <div class="mt-2 text-sm text-gray-700">
                                If someone chooses a candidate that scored lower, FinMox requires rationale for defensibility.
                            </div>
                        </div>
                        <div class="panel-strong p-5">
                            <div class="text-xs text-gray-500">Movement is automated</div>
                            <div class="mt-2 text-sm text-gray-700">
                                Follow-ups, handoffs, and reminders reduce drop-off and stalled candidates.
                            </div>
                        </div>
                        <div class="panel-strong p-5">
                            <div class="text-xs text-gray-500">Records are automatic</div>
                            <div class="mt-2 text-sm text-gray-700">
                                If it happened in FinMox, it’s already documented — no extra admin work.
                            </div>
                        </div>
                    </div>
                    <div class="mt-6 flex flex-wrap gap-3">
                        <a href="#how" onclick="openPage('how'); return false;" class="bg-black text-white px-6 py-3 rounded-2xl text-sm hoverlift">
                            See how it works →
                        </a>
                        <a href="#apply" onclick="openPage('apply'); return false;" class="chip px-6 py-3 rounded-2xl text-sm hoverlift">
                            Apply for access
                        </a>
                    </div>
                </div>
            </div> <!-- /Right Column -->
        </div> <!-- /Grid -->
    </section>
</section>
<!-- ========================= END FEATURES PAGE ========================= -->

                <!-- ========================= PROBLEM PAGE ========================= -->
        <section id="page-problem" 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 Column -->
              <div class="lg:col-span-5">
                <div class="chip inline-flex px-3 py-1 text-xs">The Problem</div>
                <h1 class="mt-5 text-4xl font-extrabold tracking-tight">
                  Hiring breaks when execution isn’t controlled.
                </h1>
                <p class="mt-5 text-gray-700">
                  Most teams don’t suffer from a lack of tools — they suffer from <strong>uncontrolled execution</strong>: role requirements drift, stakeholders evaluate differently, candidates stall, and nothing is documented cleanly.
                </p>
                <p class="mt-4 text-gray-700">
                  An ATS stores data. FinMox controls decisions and documents execution.
                </p>
                <div class="mt-7 flex gap-3">
                  <a href="#why" onclick="openPage('why'); return false;" class="bg-black text-white px-6 py-3 rounded-2xl text-sm hoverlift">
                    Why FinMox →
                  </a>
                  <a href="#apply" onclick="openPage('apply'); return false;" class="chip px-6 py-3 rounded-2xl text-sm hoverlift">
                    Apply
                  </a>
                </div>
              </div>
              <!-- Right Column -->
              <div class="lg:col-span-7">
                <div class="panel p-6">
                  <div class="text-sm font-semibold">The failure pattern</div>
                  <div class="mt-4 grid sm:grid-cols-2 gap-4">
                    <div class="panel-strong p-5">
                      <div class="text-xs text-gray-500">Decision drift</div>
                      <ul class="mt-3 text-sm text-gray-700 space-y-2">
                        <li>• Role changes mid-process</li>
                        <li>• Different evaluators, different standards</li>
                        <li>• Emotional overrides without rationale</li>
                      </ul>
                    </div>
                    <div class="panel-strong p-5">
                      <div class="text-xs text-gray-500">Execution drag</div>
                      <ul class="mt-3 text-sm text-gray-700 space-y-2">
                        <li>• HR chasing feedback</li>
                        <li>• Scheduling back-and-forth</li>
                        <li>• Candidates stalling + dropping off</li>
                      </ul>
                    </div>
                  </div>
                    <div class="mt-5 text-sm text-gray-600">
                      Result: slower hiring, inconsistent decisions, higher risk exposure, and burned-out teams.
                    </div>
                </div>
                <!-- Reframe -->
                <div class="mt-6 panel p-6">
                  <div class="text-sm font-semibold">FinMox reframe</div>
                  <div class="mt-2 text-sm text-gray-700">
                    This isn’t an HR tooling problem — it’s an execution problem. FinMox is the execution layer that standardizes intent, enforces structured movement, and creates a defensible record automatically.
                  </div>
                  <div class="mt-4 flex flex-wrap gap-2">
                    <span class="chip px-3 py-1 text-xs">Control</span>
                    <span class="chip px-3 py-1 text-xs">Consistency</span>
                    <span class="chip px-3 py-1 text-xs">Defensibility</span>
                    <span class="chip px-3 py-1 text-xs">Speed</span>
                  </div>
                </div>
                <!-- What it costs -->
                <div class="mt-6 panel p-6">
                  <div class="text-sm font-semibold">What this costs you</div>
                  <div class="mt-3 grid sm:grid-cols-3 gap-4">
                    <div class="panel-strong p-5">
                      <div class="text-xs text-gray-500">Time</div>
                      <div class="mt-2 text-sm text-gray-700">
                        Weeks lost to indecision, reschedules, and rework.
                      </div>
                    </div>
                    <div class="panel-strong p-5">
                      <div class="text-xs text-gray-500">Quality</div>
                      <div class="mt-2 text-sm text-gray-700">
                        Inconsistent evaluation leads to wrong hires or missed talent.
                      </div>
                    </div>
                    <div class="panel-strong p-5">
                      <div class="text-xs text-gray-500">Risk</div>
                      <div class="mt-2 text-sm text-gray-700">
                        No clean record of “why” decisions were made when challenged.
                      </div>
                    </div>
                  </div>
                </div>
                <!-- CTA -->
                <div class="mt-6 panel p-6">
                    <div class="text-sm font-semibold">What changes with FinMox</div>
                    <div class="mt-2 text-sm text-gray-700">
                        Criteria is locked up front. Qualification is structured. Candidate movement is automated. Every decision and override is recorded as a byproduct of execution — without extra admin work.
                    </div>
                    <div class="mt-5 flex flex-wrap gap-3">
                        <a href="#how" onclick="openPage('how'); return false;" class="bg-black text-white px-6 py-3 rounded-2xl text-sm hoverlift">
                            See how it works →
                        </a>
                        <a href="#trust" onclick="openPage('trust'); return false;" class="chip px-6 py-3 rounded-2xl text-sm hoverlift">
                            Security →
                        </a>
                    </div>
                </div>
            </div> <!-- /Right Column -->
        </div> <!-- /Grid -->
        </section>
        </section>
        <!-- ========================= END PROBLEM PAGE ========================= -->

                <!-- ========================= WHY FINMOX PAGE ========================= -->
        <section id="page-why" 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 Column -->
              <div class="lg:col-span-5">
                <div class="chip inline-flex px-3 py-1 text-xs">Why FinMox</div>
                <h1 class="mt-5 text-4xl font-extrabold tracking-tight">
                  Not another HR tool.
                </h1>
                <p class="mt-5 text-gray-700">
                  FinMox is an <strong>HR Execution Operating System</strong>. It sits on top of your stack and enforces how hiring work happens: decision logic, movement, documentation — without replacing your ATS or HR team.
                </p>
                <div class="mt-7 grid gap-3">
                  <div class="panel p-5">
                    <div class="text-sm font-semibold">What FinMox is</div>
                    <ul class="mt-3 text-sm text-gray-700 space-y-2">
                      <li>✔ Decision clarity at intake (criteria locked + versioned)</li>
                      <li>✔ Structured qualification (consistent evaluation)</li>
                      <li>✔ Automated movement (no chasing)</li>
                      <li>✔ Decision trail + audit exports</li>
                      <li>✔ Integrations with your existing tools</li>
                    </ul>
                  </div>
                  <div class="panel p-5">
                    <div class="text-sm font-semibold">What FinMox is not</div>
                    <ul class="mt-3 text-sm text-gray-700 space-y-2">
                      <li>✖ Not an ATS replacement</li>
                      <li>✖ Not payroll/attendance/benefits</li>
                      <li>✖ Not AI making hiring decisions</li>
                      <li>✖ Not added admin work</li>
                    </ul>
                    <div class="mt-4 text-xs text-gray-600">
                      We integrate with systems of record. FinMox is the execution layer.
                    </div>
                  </div>
                </div>
              </div>
              <!-- Right Column -->
              <div class="lg:col-span-7">
                <div class="panel p-6">
                  <div class="flex items-center justify-between gap-4">
                    <div>
                      <div class="text-sm font-semibold">The FinMox execution model</div>
                      <div class="text-sm text-gray-600 mt-1">Humans define intent. Systems enforce execution.</div>
                    </div>
                    <div class="flex gap-2">
                      <button class="why-tab bg-black text-white px-4 py-2 rounded-2xl text-sm" data-tab="why-control">
                        Control
                      </button>
                      <button class="why-tab px-4 py-2 rounded-2xl text-sm" data-tab="why-guardrails">
                        Guardrails
                      </button>
                      <button class="why-tab px-4 py-2 rounded-2xl text-sm" data-tab="why-records">
                        Recordkeeping
                      </button>
                    </div>
                  </div>
                  <!-- Tab Content -->
                  <div class="mt-5">
                    <!-- Tab: Control -->
                    <div id="why-control" class="why-content">
                      <div class="grid sm:grid-cols-2 gap-4">
                        <div class="panel-strong p-5">
                          <div class="text-xs text-gray-500">Criteria lock</div>
                          <div class="mt-2 text-sm">
                            Role requirements are defined and locked before the first candidate is reviewed.
                          </div>
                        </div>
                        <div class="panel-strong p-5">
                          <div class="text-xs text-gray-500">Structured qualification</div>
                          <div class="mt-2 text-sm">
                            Every stakeholder qualifies candidates against the same rubric.
                          </div>
                        </div>
                        <div class="panel-strong p-5">
                          <div class="text-xs text-gray-500">Automated movement</div>
                          <div class="mt-2 text-sm">
                            Candidates advance, are rejected, or schedule automatically based on decisions.
                          </div>
                        </div>
                        <div class="panel-strong p-5">
                          <div class="text-xs text-gray-500">Required actions</div>
                          <div class="mt-2 text-sm">
                            Ensure key steps — like feedback submission — are completed on time.
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- Tab: Guardrails -->
                    <div id="why-guardrails" class="why-content hidden">
                      <div class="grid sm:grid-cols-2 gap-4">
                        <div class="panel-strong p-5">
                          <div class="text-xs text-gray-500">Human-in-the-loop</div>
                          <div class="mt-2 text-sm">
                            FinMox supports decisions — it does not make them. Final calls stay with your team.
                          </div>
                        </div>
                        <div class="panel-strong p-5">
                          <div class="text-xs text-gray-500">No silent changes</div>
                          <div class="mt-2 text-sm">
                            Criteria changes require explicit approval and are versioned for defensibility.
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- Tab: Recordkeeping -->
                    <div id="why-records" class="why-content hidden">
                      <div class="grid sm:grid-cols-2 gap-4">
                        <div class="panel-strong p-5">
                          <div class="text-xs text-gray-500">Automatic documentation</div>
                          <div class="mt-2 text-sm">
                            Records are created as execution happens — no extra steps or admin work.
                          </div>
                        </div>
                        <div class="panel-strong p-5">
                          <div class="text-xs text-gray-500">Defensible trail</div>
                          <div class="mt-2 text-sm">
                            Who decided, when, why, and under which criteria version — exportable when needed.
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- Operator promise -->
                <div class="mt-6 panel p-6">
                  <div class="text-sm font-semibold">The operator promise</div>
                  <div class="mt-2 text-sm text-gray-700">
                    FinMox removes execution friction from hiring so teams can scale without adding risk, headcount, or chaos.
                  </div>
                  <div class="mt-4 grid sm:grid-cols-3 gap-4">
                    <div class="panel-strong p-5">
                      <div class="text-xs text-gray-500">Clarity</div>
                      <div class="mt-2 text-sm text-gray-700">Criteria locked before candidates move.</div>
                    </div>
                    <div class="panel-strong p-5">
                      <div class="text-xs text-gray-500">Quality</div>
                      <div class="mt-2 text-sm text-gray-700">Consistent rubric means better, fairer outcomes.</div>
                    </div>
                    <div class="panel-strong p-5">
                      <div class="text-xs text-gray-500">Speed</div>
                      <div class="mt-2 text-sm text-gray-700">Automated movement = faster decisions.</div>
                    </div>
                  </div>
                </div>
                <!-- CTA -->
                <div class="mt-6 panel p-6">
                  <div class="text-sm font-semibold">If you already have tools, you’re the target customer.</div>
                  <div class="mt-2 text-sm text-gray-700">
                    FinMox doesn’t ask you to migrate systems. It enforces execution across what you already use — and documents everything automatically.
                  </div>
                  <div class="mt-5 flex flex-wrap gap-3">
                    <a href="#pricing" onclick="openPage('pricing'); return false;" class="bg-black text-white px-6 py-3 rounded-2xl text-sm hoverlift">
                      View pricing →
                    </a>
                    <a href="#apply" onclick="openPage('apply'); return false;" class="chip px-6 py-3 rounded-2xl text-sm hoverlift">
                      Apply for access
                    </a>
                  </div>
                </div>
              </div>
              <!-- /Right Column -->
            </div>
            <!-- /Grid -->
          </section>
        </section>
        <!-- ========================= END WHY FINMOX PAGE ========================= -->

        <!-- ========================= ROI PAGE ========================= -->
        <section id="page-roi" class="page fade hidden">
            <section class="max-w-7xl mx-auto px-6 py-24">
                <div class="max-w-3xl">
                    <span class="inline-block text-sm px-4 py-1 rounded-full bg-gray-100 mb-6"> ROI </span>
                    <h1 class="text-5xl font-semibold leading-tight mb-6"> Hiring execution that pays for itself. </h1>
                    <p class="text-lg text-gray-600 mb-8"> FinMox removes operational drag from hiring so teams can move faster, make consistent decisions, and scale without adding HR headcount or risk. </p>
                    <div class="flex gap-4">
                        <a href="/apply" class="bg-black text-white px-6 py-3 rounded-xl"> Apply for access </a>
                        <a href="/pricing" class="border px-6 py-3 rounded-xl"> View pricing → </a>
                    </div>
                </div>
            </section>
<section class="max-w-7xl mx-auto px-6 py-20"> <div class="grid md:grid-cols-3 gap-8"> <div class="rounded-3xl bg-white p-8 shadow-sm text-center"> <p class="text-sm text-gray-500 mb-2">Time saved per role</p> <p class="text-4xl font-semibold">30–40 hrs</p> </div> <div class="rounded-3xl bg-white p-8 shadow-sm text-center"> <p class="text-sm text-gray-500 mb-2">Time-to-hire reduction</p> <p class="text-4xl font-semibold">~60%</p> </div> <div class="rounded-3xl bg-white p-8 shadow-sm text-center"> <p class="text-sm text-gray-500 mb-2">Equivalent headcount</p> <p class="text-4xl font-semibold">1 HR analyst</p> </div> </div> </section>
<section class="max-w-7xl mx-auto px-6 py-24"> <div class="grid md:grid-cols-2 gap-12 items-start"> <div> <h2 class="text-3xl font-semibold mb-4"> Where teams actually save time </h2> <p class="text-gray-600 mb-6"> FinMox removes the invisible work that slows hiring and introduces risk. These gains compound across every role. </p> <ul class="space-y-4 text-gray-700"> <li>✔ No resume triage or manual shortlisting</li> <li>✔ No interview question prep or note consolidation</li> <li>✔ No chasing feedback or scheduling coordination</li> <li>✔ No post-hoc documentation for audits or disputes</li> </ul> </div> <div class="rounded-3xl bg-[#FAF8F6] p-8"> <h3 class="font-semibold mb-4">Before FinMox</h3> <p class="text-gray-600 mb-6"> Hiring decisions live in Slack, email, and memory. Documentation is created only when something goes wrong. </p> <h3 class="font-semibold mb-4 mt-8">With FinMox</h3> <p class="text-gray-600"> Execution is structured, movement is automated, and documentation is created as a byproduct of work. </p> </div> </div> </section>
<section class="max-w-7xl mx-auto px-6 py-24"> <div class="rounded-3xl bg-white p-10 shadow-sm"> <h2 class="text-3xl font-semibold mb-6"> ROI isn’t just time — it’s risk reduction. </h2> <div class="grid md:grid-cols-3 gap-8"> <div> <h4 class="font-semibold mb-2">Decision defensibility</h4> <p class="text-gray-600"> Every hiring action is timestamped, attributed, and tied to locked criteria. </p> </div> <div> <h4 class="font-semibold mb-2">Consistency at scale</h4> <p class="text-gray-600"> Required evaluation steps prevent emotional or ad-hoc hiring decisions. </p> </div> <div> <h4 class="font-semibold mb-2">Audit readiness</h4> <p class="text-gray-600"> Exportable records eliminate scramble during compliance or legal review. </p> </div> </div> </div> </section>
<section class="max-w-7xl mx-auto px-6 py-24 text-center"> <h2 class="text-3xl font-semibold mb-4"> Scale hiring without scaling chaos. </h2> <p class="text-gray-600 mb-8"> FinMox removes execution friction so your team can focus on judgment — not admin work. </p> <div class="flex justify-center gap-4"> <a href="/apply" class="bg-black text-white px-8 py-4 rounded-xl"> Apply for access </a> <a href="/pricing" class="border px-8 py-4 rounded-xl"> View pricing → </a> </div> </section>
        </section>
        <!-- ========================= END ROI PAGE ========================= -->

        <!-- ========================= PRICING PAGE ========================= -->
        <section id="page-pricing" class="page fade hidden">
<section class="max-w-7xl mx-auto px-6 py-24"> <div class="max-w-3xl"> <span class="inline-block text-sm px-4 py-1 rounded-full bg-gray-100 mb-6"> Pricing </span> <h1 class="text-5xl font-semibold leading-tight mb-6"> Pricing based on execution risk — not seat count. </h1> <p class="text-lg text-gray-600 mb-8"> FinMox is priced around how much hiring complexity and decision risk you’re managing — not how many users you invite. </p> <p class="text-sm text-gray-500"> Most teams start with a small pilot and expand once execution improvements are proven. </p> </div> </section>
<section class="max-w-7xl mx-auto px-6 py-20"> <div class="grid lg:grid-cols-3 gap-8"> <!-- Starter --> <div class="rounded-3xl bg-white p-8 shadow-sm border"> <h3 class="text-xl font-semibold mb-2">Starter</h3> <p class="text-3xl font-semibold mb-4">$750 / month</p> <p class="text-gray-600 mb-6"> For lean teams who need hiring discipline without complexity. </p> <ul class="space-y-3 text-gray-700 mb-8"> <li>✔ Role intake & criteria locking</li> <li>✔ Structured candidate qualification</li> <li>✔ Weekly execution summary</li> <li>✔ Basic decision trail export</li> <li>✔ Light integrations</li> </ul> <a href="/apply" class="block text-center border px-6 py-3 rounded-xl"> Apply for access </a> </div> <!-- Growth --> <div class="rounded-3xl bg-black text-white p-8 shadow-lg"> <h3 class="text-xl font-semibold mb-2"> Growth <span class="text-sm font-normal opacity-70">(Most teams)</span> </h3> <p class="text-3xl font-semibold mb-4">$2,500 – $5,000 / month</p> <p class="opacity-90 mb-6"> For teams hiring consistently with multiple stakeholders and real risk exposure. </p> <ul class="space-y-3 opacity-95 mb-8"> <li>✔ Advanced execution automation</li> <li>✔ SLA nudges & escalation logic</li> <li>✔ Role templates & guardrails</li> <li>✔ Enhanced decision trail depth</li> <li>✔ Priority onboarding & support</li> </ul> <a href="/apply" class="block text-center bg-white text-black px-6 py-3 rounded-xl"> Apply for access </a> </div> <!-- Enterprise --> <div class="rounded-3xl bg-white p-8 shadow-sm border"> <h3 class="text-xl font-semibold mb-2">Enterprise / Custom</h3> <p class="text-3xl font-semibold mb-4">$10,000+ / month</p> <p class="text-gray-600 mb-6"> For complex orgs that require deeper governance, auditability, and integration depth. </p> <ul class="space-y-3 text-gray-700 mb-8"> <li>✔ Custom execution logic</li> <li>✔ Advanced audit & compliance exports</li> <li>✔ Enterprise-grade integrations</li> <li>✔ Security review collaboration</li> <li>✔ SLA & support agreemen</section>
<section class="max-w-7xl mx-auto px-6 py-24"> <div class="rounded-3xl bg-[#FAF8F6] p-10"> <h2 class="text-3xl font-semibold mb-4"> How teams typically get started </h2> <p class="text-gray-600 mb-6"> We recommend starting with a pilot so value is proven before expanding scope. </p> <ul class="space-y-3 text-gray-700"> <li>• Pilot on 1–2 active roles</li> <li>• Tune intake, qualification, and movement logic</li> <li>• Measure time saved and execution consistency</li> <li>• Expand once ROI is clear</li> </ul> </div> </section>
<section class="max-w-7xl mx-auto px-6 py-24"> <div class="grid md:grid-cols-2 gap-12"> <div> <h3 class="text-2xl font-semibold mb-4">What pricing includes</h3> <ul class="space-y-3 text-gray-700"> <li>✔ Execution control logic</li> <li>✔ Automation & enforcement</li> <li>✔ Decision documentation</li> <li>✔ Integration support</li> </ul> </div> <div> <h3 class="text-2xl font-semibold mb-4">What pricing does not assume</h3> <ul class="space-y-3 text-gray-700"> <li>• No seat-based upsells</li> <li>• No replacement of your HRIS</li> <li>• No autonomous hiring decisions</li> <li>• No forced migrations</li> </ul> </div> </div> </section>
<section class="max-w-7xl mx-auto px-6 py-24 text-center"> <h2 class="text-3xl font-semibold mb-4"> Start with control. Expand with confidence. </h2> <p class="text-gray-600 mb-8"> FinMox is designed to earn trust before it earns scale. </p> <div class="flex justify-center gap-4"> <a href="/apply" class="bg-black text-white px-8 py-4 rounded-xl"> Apply for access </a> <a href="/roi" class="border px-8 py-4 rounded-xl"> View ROI → </a> </div> </section>
        </section>
        <!-- ========================= END PRICING PAGE ========================= -->

        <!-- ========================= SECURITY & TRUST PAGE ========================= -->
        <section id="page-trust" 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 --> <div class="lg:col-span-5"> <div class="chip inline-flex px-3 py-1 text-xs">Trust Center</div> <h1 class="mt-5 text-4xl font-extrabold tracking-tight">Built to be trusted.</h1> <p class="mt-5 text-gray-700"> FinMox is designed for consistent execution and defensible hiring records. Security is part of the workflow — not a checklist at the end. </p> <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"> Request Access </a> <a href="#faq" onclick="openPage('faq'); return false;" class="chip px-6 py-3 rounded-2xl text-sm hoverlift"> Read FAQ </a> </div> <div class="mt-7 flex flex-wrap gap-2 text-xs text-gray-600"> <span class="chip px-3 py-1">Human-in-the-loop</span> <span class="chip px-3 py-1">Audit-ready trails</span> <span class="chip px-3 py-1">Least privilege</span> <span class="chip px-3 py-1">Encryption</span> <span class="chip px-3 py-1">SOC 2 path</span> </div> <div class="mt-7 panel p-6"> <div class="text-sm font-semibold">Trust by design</div> <div class="mt-2 text-sm text-gray-700"> FinMox enforces execution steps (intake → qualification → movement → decision trail), so records are created automatically — without extra admin work. </div> <div class="mt-4 flex flex-wrap gap-2"> <span class="chip px-3 py-1 text-xs">Criteria versioning</span> <span class="chip px-3 py-1 text-xs">Override rationale</span> <span class="chip px-3 py-1 text-xs">Exportable logs</span> </div> </div> </div><!-- TRUST PAGE (PART 2/3) --> <!-- Right --> <div class="lg:col-span-7"> <div class="panel p-6"> <div class="text-sm font-semibold">Security summary (procurement-friendly)</div> <div class="mt-1 text-sm text-gray-600"> The controls enterprise reviewers expect — written plainly. </div> <div class="mt-5 grid sm:grid-cols-2 gap-4"> <div class="panel-strong p-5 hoverlift"> <div class="text-xs text-gray-500">Decision integrity</div> <div class="mt-2 text-sm text-gray-700"> Criteria is versioned. Overrides require rationale. Actions are logged. </div> <div class="mt-4 flex flex-wrap gap-2"> <span class="chip px-2 py-1 text-xs">Versioned</span> <span class="chip px-2 py-1 text-xs">Rationale</span> <span class="chip px-2 py-1 text-xs">Logged</span> </div> </div> <div class="panel-strong p-5 hoverlift"> <div class="text-xs text-gray-500">Access controls</div> <div class="mt-2 text-sm text-gray-700"> Role-based access supported. Least privilege by default. </div> <div class="mt-4 flex flex-wrap gap-2"> <span class="chip px-2 py-1 text-xs">RBAC</span> <span class="chip px-2 py-1 text-xs">Least privilege</span> <span class="chip px-2 py-1 text-xs">Reviews</span> </div> </div> <div class="panel-strong p-5 hoverlift"> <div class="text-xs text-gray-500">Encryption</div> <div class="mt-2 text-sm text-gray-700"> Encryption in transit + at rest (provider-supported). </div> <div class="mt-4 flex flex-wrap gap-2"> <span class="chip px-2 py-1 text-xs">TLS</span> <span class="chip px-2 py-1 text-xs">At-rest</span> <span class="chip px-2 py-1 text-xs">Keys</span> </div> </div> <div class="panel-strong p-5 hoverlift"> <div class="text-xs text-gray-500">Audit exports</div> <div class="mt-2 text-sm text-gray-700"> Decision trails are exportable for audit and compliance workflows. </div> <div class="mt-4 flex flex-wrap gap-2"> <span class="chip px-2 py-1 text-xs">Decision log</span> <span class="chip px-2 py-1 text-xs">Exports</span> <span class="chip px-2 py-1 text-xs">Records</span> </div></div></div> <div class="mt-6 panel p-6"> <div class="text-sm font-semibold">Common security questions</div> <div class="mt-4 grid gap-3"> <details class="panel-strong p-5"> <summary class="flex items-center justify-between"> <span>Is AI making hiring decisions?</span> <span class="chip px-2 py-1 text-xs text-gray-600">No</span> </summary> <div class="mt-3 text-sm text-gray-700"> Humans define criteria and make final decisions. FinMox enforces execution and records outcomes. </div> </details> <details class="panel-strong p-5"> <summary class="flex items-center justify-between"> <span>Do you support role-based access?</span> <span class="chip px-2 py-1 text-xs text-gray-600">Yes</span> </summary> <div class="mt-3 text-sm text-gray-700"> Teams can scope access by role and follow least-privilege practices. </div> </details> <details class="panel-strong p-5"> <summary class="flex items-center justify-between"> <span>Are actions logged and exportable?</span> <span class="chip px-2 py-1 text-xs text-gray-600">Yes</span> </summary> <div class="mt-3 text-sm text-gray-700"> Execution events create a defensible record: criteria versions, timestamps, overrides, and outcomes. </div> </details> <details class="panel-strong p-5"> <summary class="flex items-center justify-between"> <span>Are you SOC 2 certified?</span> <span class="chip px-2 py-1 text-xs text-gray-600">In progress</span> </summary> <div class="mt-3 text-sm text-gray-700"> SOC 2 prep is in progress. We won’t claim certification until it’s complete. </div> </details> </div> </div> <div class="mt-6 panel-strong p-8"> <div class="flex flex-col md:flex-row md:items-center justify-between gap-6"> <div> <div class="text-sm font-semibold">Need a security packet for procurement?</div> <div class="text-sm text-gray-600 mt-1"> Request access and we’ll share the right artifacts for your review. </div> </div> <div class="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"> Request Access </a> </div> </div> </div> </div> </div> </section>
        </section>
        <!-- ========================= END SECURITY & TRUST 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>

    
        <!-- WHO PAGE (PART 1/3) --> <section id="page-who" 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 --> <div class="lg:col-span-5"> <div class="chip inline-flex px-3 py-1 text-xs">Who it’s for</div> <h1 class="mt-5 text-4xl font-extrabold tracking-tight"> Built for teams before hiring turns into chaos. </h1> <p class="mt-5 text-gray-700"> FinMox is for operators who need consistency, speed, and defensible execution — without rebuilding their HR stack or adding admin work. </p> <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 class="mt-7 panel p-6"> <div class="text-sm font-semibold">Typical buying signal</div> <div class="mt-2 text-sm text-gray-700"> “We’re hiring more, stakeholders are involved, and execution is slipping — candidates stall, criteria drifts, and documentation is weak.” </div> <div class="mt-4 flex flex-wrap gap-2"> <span class="chip px-3 py-1 text-xs">Multiple evaluators</span> <span class="chip px-3 py-1 text-xs">Drift happens</span> <span class="chip px-3 py-1 text-xs">Chasing feedback</span> <span class="chip px-3 py-1 text-xs">Need defensibility</span> </div> </div> </div><!-- WHO PAGE (PART 2/3) --> <!-- Right --> <div class="lg:col-span-7"> <div class="grid md:grid-cols-2 gap-4"> <!-- Great fit --> <div class="panel p-6 hoverlift"> <div class="text-sm font-semibold">Great fit</div> <ul class="mt-3 text-sm text-gray-700 space-y-2"> <li>✔ 10–200 employee companies</li> <li>✔ Hiring 1–10 roles/month</li> <li>✔ Multiple stakeholders deciding</li> <li>✔ HR / Ops stretched thin</li> <li>✔ You want audit-ready records</li> </ul> <div class="mt-5 flex flex-wrap gap-2"> <span class="chip px-3 py-1 text-xs">Founder-led teams</span> <span class="chip px-3 py-1 text-xs">COO-led ops</span> <span class="chip px-3 py-1 text-xs">People Ops</span> <span class="chip px-3 py-1 text-xs">Sales hiring</span> </div> </div> <!-- Not yet --> <div class="panel p-6 hoverlift"> <div class="text-sm font-semibold">Not built for (yet)</div> <ul class="mt-3 text-sm text-gray-700 space-y-2"> <li>• High-volume hourly hiring at scale</li> <li>• Multi-country compliance engines</li> <li>• Full HRIS replacement (payroll/benefits)</li> </ul> <div class="mt-5 text-xs text-gray-600"> FinMox integrates with systems of record — it’s the execution layer. </div> </div> </div> <div class="mt-6 panel p-6"> <div class="text-sm font-semibold">Teams that get value fast</div> <div class="mt-4 grid sm:grid-cols-3 gap-4"> <div class="panel-strong p-5"> <div class="text-xs text-gray-500">HR / People Ops</div> <div class="mt-2 text-sm text-gray-700"> “I need consistency without more admin.” </div> <div class="mt-4 flex flex-wrap gap-2"> <span class="chip px-2 py-1 text-xs">Guardrails</span> <span class="chip px-2 py-1 text-xs">Templates</span> </div> </div> <div class="panel-strong p-5"> <div class="text-xs text-gray-500">Ops / COO</div> <div class="mt-2 text-sm text-gray-700"> “Hiring is stalling — execution is the bottleneck.” </div> <div class="mt-4 flex flex-wrap gap-2"> <span class="chip px-2 py-1 text-xs">SLAs</span> <span class="chip px-2 py-1 text-xs">Movement</span> </div> </div></div></div><!-- WHO PAGE (PART 3/3) -->  <div class="mt-6 panel p-6"> <div class="text-sm font-semibold">Most common starting pilots</div> <div class="mt-4 grid sm:grid-cols-2 gap-4"> <div class="panel-strong p-5 hoverlift"> <div class="text-xs text-gray-500">Sales hiring</div> <div class="mt-2 text-sm text-gray-700"> Standardize evaluation + stop candidate drop-off with structured movement. </div> <div class="mt-4 flex flex-wrap gap-2"> <span class="chip px-2 py-1 text-xs">Scorecards</span> <span class="chip px-2 py-1 text-xs">Follow-ups</span> <span class="chip px-2 py-1 text-xs">Summaries</span> </div> </div> <div class="panel-strong p-5 hoverlift"> <div class="text-xs text-gray-500">Ops / Admin roles</div> <div class="mt-2 text-sm text-gray-700"> Reduce drift and speed decisions when multiple stakeholders are involved. </div> <div class="mt-4 flex flex-wrap gap-2"> <span class="chip px-2 py-1 text-xs">Criteria lock</span> <span class="chip px-2 py-1 text-xs">Rationale</span> <span class="chip px-2 py-1 text-xs">Exports</span> </div> </div> </div> </div> <div class="mt-6 panel-strong p-8"> <div class="flex flex-col md:flex-row md:items-center justify-between gap-6"> <div> <div class="text-sm font-semibold">Not sure if you’re a fit?</div> <div class="text-sm text-gray-600 mt-1"> Start with a pilot (1–2 roles). Prove execution improvement, then expand. </div> </div> <div class="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 </a> <a href="#faq" onclick="openPage('faq'); return false;" class="chip px-6 py-3 rounded-2xl text-sm hoverlift"> Read FAQ → </a> </div> </div> </div> </div><!-- /Right --> </div><!-- /Grid --> </section> </section>

        <!-- ROADMAP PAGE (PART 1/3) --> <section id="page-roadmap" 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 --> <div class="lg:col-span-5"> <div class="chip inline-flex px-3 py-1 text-xs">Product roadmap</div> <h1 class="mt-5 text-4xl font-extrabold tracking-tight"> Built deliberately. Shipped responsibly. </h1> <p class="mt-5 text-gray-700"> FinMox is designed as an execution system — not a feature factory. Every release strengthens control, defensibility, and reliability. </p> <div class="mt-7 panel p-6"> <div class="text-sm font-semibold">Our product philosophy</div> <ul class="mt-3 text-sm text-gray-700 space-y-2"> <li>✔ Execution before expansion</li> <li>✔ Guardrails before automation</li> <li>✔ Auditability before intelligence</li> <li>✔ Trust before scale</li> </ul> <div class="mt-4 flex flex-wrap gap-2"> <span class="chip px-3 py-1 text-xs">Enterprise-ready</span> <span class="chip px-3 py-1 text-xs">SOC 2 aligned</span> <span class="chip px-3 py-1 text-xs">Human-in-the-loop</span> </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="#trust" onclick="openPage('trust'); return false;" class="chip px-6 py-3 rounded-2xl text-sm hoverlift"> View Trust → </a> </div> </div><!-- ROADMAP PAGE (PART 2/3) --> <!-- Right --> <div class="lg:col-span-7"> <div class="grid gap-6"> <!-- Now --> <div class="panel p-6 hoverlift"> <div class="flex items-center justify-between"> <div class="text-sm font-semibold">Now (Private Beta)</div> <span class="chip px-3 py-1 text-xs">Live</span> </div> <ul class="mt-4 text-sm text-gray-700 space-y-2"> <li>✔ Criteria locking + version history</li> <li>✔ Structured candidate scoring</li> <li>✔ Interview summaries + recommendations</li> <li>✔ Decision trail (who / why / when)</li> <li>✔ Exportable audit records</li> </ul> <div class="mt-4 flex flex-wrap gap-2"> <span class="chip px-2 py-1 text-xs">Hiring execution</span> <span class="chip px-2 py-1 text-xs">Defensible records</span> </div> </div> <!-- Next --> <div class="panel p-6 hoverlift"> <div class="flex items-center justify-between"> <div class="text-sm font-semibold">Next (Early 2025)</div> <span class="chip px-3 py-1 text-xs">In progress</span> </div> <ul class="mt-4 text-sm text-gray-700 space-y-2"> <li>• SLA-based candidate movement</li> <li>• Hiring bottleneck analytics</li> <li>• Approval workflows + overrides</li> <li>• Enhanced role-based permissions</li> </ul> <div class="mt-4 flex flex-wrap gap-2"> <span class="chip px-2 py-1 text-xs">Operational visibility</span> <span class="chip px-2 py-1 text-xs">Execution insights</span> </div> </div> <!-- Later --> <div class="panel p-6 hoverlift"> <div class="flex items-center justify-between"> <div class="text-sm font-semibold">Later (Post-GA)</div> <span class="chip px-3 py-1 text-xs">Planned</span> </div> <ul class="mt-4 text-sm text-gray-700 space-y-2"> <li>• Advanced compliance mappings</li> <li>• Cross-role execution analytics</li> <li>• Secure API + integrations</li> <li>• Expanded enterprise reporting</li> </ul> <div class="mt-4 flex flex-wrap gap-2"> <span class="chip px-2 py-1 text-xs">Enterprise scale</span> <span class="chip px-2 py-1 text-xs">Platform depth</span> </div> </div> </div><!-- ROADMAP PAGE (PART 3/3) --> <div class="mt-6 panel p-6"> <div class="text-sm font-semibold">What we intentionally don’t build</div> <ul class="mt-3 text-sm text-gray-700 space-y-2"> <li>• Generic AI hiring chatbots</li> <li>• Black-box scoring without rationale</li> <li>• Payroll, benefits, or HRIS replacement</li> <li>• Automation without human accountability</li> </ul> <div class="mt-4 text-xs text-gray-600"> FinMox exists to control execution — not replace judgment. </div> </div> <div class="mt-6 panel-strong p-8"> <div class="flex flex-col md:flex-row md:items-center justify-between gap-6"> <div> <div class="text-sm font-semibold">Want influence over the roadmap?</div> <div class="text-sm text-gray-600 mt-1"> Early customers help shape what ships next — responsibly. </div> </div> <div class="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 Beta </a> <a href="#faq" onclick="openPage('faq'); return false;" class="chip px-6 py-3 rounded-2xl text-sm hoverlift"> Read FAQ → </a> </div> </div> </div> </div><!-- /Right --> </div><!-- /Grid --> </section> </section>

        <!-- ========================= FAQ PAGE ========================= -->
        <section id="page-faq" class="page fade hidden">
            <section class="max-w-7xl mx-auto px-6 py-24">
                <div class="max-w-3xl">
                    <span class="inline-block text-sm px-4 py-1 rounded-full bg-gray-100 mb-6"> FAQ </span>
                    <h1 class="text-5xl font-semibold leading-tight mb-6"> Real questions. Straight answers. </h1>
                    <p class="text-lg text-gray-600 mb-8"> These are the questions teams ask before trusting a system that touches hiring decisions. </p>
                </div>
            </section>
            <section class="max-w-7xl mx-auto px-6 py-20"> <div class="grid md:grid-cols-2 gap-10"> <div> <h3 class="text-xl font-semibold mb-2">Is FinMox an ATS?</h3> <p class="text-gray-700"> No. FinMox does not replace your ATS. It sits on top of your existing tools and controls how hiring decisions are executed, documented, and moved forward. </p> </div> <div> <h3 class="text-xl font-semibold mb-2">Does FinMox replace my HR team?</h3> <p class="text-gray-700"> No. FinMox removes execution friction — not human judgment. Your team defines intent and makes final decisions. </p> </div> <div> <h3 class="text-xl font-semibold mb-2">Is AI making hiring decisions?</h3> <p class="text-gray-700"> Never. FinMox enforces structured execution and records outcomes. Humans remain accountable for every decision. </p> </div> <div> <h3 class="text-xl font-semibold mb-2">What problem does FinMox actually solve?</h3> <p class="text-gray-700"> Execution drift. Inconsistent evaluation. Operational drag. Missing documentation. FinMox controls how hiring work happens. </p> </div> </div> </section>
            <section class="max-w-7xl mx-auto px-6 py-20 bg-[#FAF8F6] rounded-3xl"> <div class="grid md:grid-cols-2 gap-10"> <div> <h3 class="text-xl font-semibold mb-2"> How does FinMox document automatically? </h3> <p class="text-gray-700"> Documentation is generated from actions — not manual input. Criteria locks, stage changes, evaluator input, overrides, timestamps, and decisions are recorded automatically. </p> </div> <div> <h3 class="text-xl font-semibold mb-2"> What happens if criteria changes mid-process? </h3> <p class="text-gray-700"> Changes require explicit approval and are versioned. FinMox preserves what changed, when, and why. </p> </div> <div> <h3 class="text-xl font-semibold mb-2"> Can stakeholders override recommendations? </h3> <p class="text-gray-700"> Yes — but overrides are recorded with rationale. This preserves accountability and defensibility. </p> </div> <div> <h3 class="text-xl font-semibold mb-2"> How quickly can we go live? </h3> <p class="text-gray-700"> Most teams launch within days using a pilot (1–2 roles). No migrations required. </p> </div> </div> </section>
            <section class="max-w-7xl mx-auto px-6 py-24"> <div class="grid md:grid-cols-2 gap-10"> <div> <h3 class="text-xl font-semibold mb-2"> Is FinMox SOC 2 certified? </h3> <p class="text-gray-700"> Not yet. We do not claim certifications we haven’t completed. Our systems and processes are designed with SOC 2 readiness in mind. </p> </div> <div> <h3 class="text-xl font-semibold mb-2"> How is access controlled? </h3> <p class="text-gray-700"> Role-based access, explicit user attribution, and restricted administrative permissions are enforced. </p> </div> <div> <h3 class="text-xl font-semibold mb-2"> Do you store candidate data long-term? </h3> <p class="text-gray-700"> Data retention is minimized and configurable. FinMox does not sell or repurpose customer data. </p> </div> <div> <h3 class="text-xl font-semibold mb-2"> Will this pass security review? </h3> <p class="text-gray-700"> Many teams use FinMox in pilots while procurement review is underway. We provide clear documentation and honest answers. </p> </div> </div> </section>
            <section class="max-w-7xl mx-auto px-6 py-24 bg-[#FAF8F6] rounded-3xl"> <div class="grid md:grid-cols-2 gap-10"> <div> <h3 class="text-xl font-semibold mb-2"> Why isn’t pricing per seat? </h3> <p class="text-gray-700"> Risk and complexity don’t scale with seats. FinMox is priced on execution control and decision volume. </p> </div> <div> <h3 class="text-xl font-semibold mb-2"> Can we start small? </h3> <p class="text-gray-700"> Yes. Most customers start with a limited pilot before expanding scope. </p> </div> <div> <h3 class="text-xl font-semibold mb-2"> Is there a long-term contract? </h3> <p class="text-gray-700"> Early customers typically start month-to-month while value is validated. </p> </div> <div> <h3 class="text-xl font-semibold mb-2"> What happens if we outgrow FinMox? </h3> <p class="text-gray-700"> FinMox is designed to scale with your hiring complexity. We expand execution depth — not tool sprawl. </p> </div> </div> </section>
            <section class="max-w-7xl mx-auto px-6 py-24"> <div class="rounded-3xl bg-white p-10 shadow-sm"> <h2 class="text-3xl font-semibold mb-6"> Common objections — answered honestly </h2> <ul class="space-y-6 text-gray-700"> <li> <strong>“We already have tools.”</strong><br/> Most teams do. FinMox makes them work together by enforcing execution. </li> <li> <strong>“We don’t want AI deciding who we hire.”</strong><br/> Neither do we. FinMox never makes hiring decisions. </li> <li> <strong>“We’re not ready for enterprise tooling.”</strong><br/> FinMox is enterprise-minded without enterprise bloat. </li> <li> <strong>“This feels like process overhead.”</strong><br/> FinMox removes work — it doesn’t add it. </li> </ul> </div> </section>
            <section class="max-w-7xl mx-auto px-6 py-24 text-center"> <h2 class="text-3xl font-semibold mb-4"> Still have questions? </h2> <p class="text-gray-600 mb-8"> We’d rather answer them directly than hide behind marketing. </p> <div class="flex justify-center gap-4"> <a href="/apply.php" class="bg-black text-white px-8 py-4 rounded-xl"> Apply for access </a> <a href="/trust.php" class="border px-8 py-4 rounded-xl"> Security & Trust → </a> </div> </section>
        </section>

<!-- SIGNIN PAGE (PART 1/2) --> <section id="page-signin" 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: Trust / context --> <div class="lg:col-span-5"> <div class="chip inline-flex px-3 py-1 text-xs">Account</div> <h1 class="mt-5 text-4xl font-extrabold tracking-tight"> Sign in to FinMox </h1> <p class="mt-5 text-gray-700"> Access your workspace to review hiring execution, decision trails, and audit-ready outputs. </p> <div class="mt-7 panel p-6"> <div class="text-sm font-semibold">What you can do inside</div> <ul class="mt-3 text-sm text-gray-700 space-y-2"> <li>✔ Review ranked candidates + structured scoring</li> <li>✔ See interview summaries + recommendations</li> <li>✔ Track movement + SLA nudges</li> <li>✔ Export decision logs for audits</li> </ul> <div class="mt-4 flex flex-wrap gap-2"> <span class="chip px-3 py-1 text-xs">Role-based access</span> <span class="chip px-3 py-1 text-xs">Least privilege</span> <span class="chip px-3 py-1 text-xs">Audit trail</span> </div> </div> <div class="mt-7 panel p-6"> <div class="text-sm font-semibold">Need access?</div> <p class="mt-2 text-sm text-gray-700"> FinMox is onboarding teams through private beta. Apply and we’ll confirm fit. </p> <div class="mt-4 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="#trust" onclick="openPage('trust'); return false;" class="chip px-6 py-3 rounded-2xl text-sm hoverlift"> Security & Trust → </a> </div> </div> </div><!-- SIGNIN PAGE (PART 2/2) --> <!-- Right: Sign in card --> <div class="lg:col-span-7"> <div class="panel p-7"> <div class="flex items-center justify-between gap-4"> <div> <div class="text-sm font-semibold">Welcome back</div> <div class="text-sm text-gray-600 mt-1">Sign in to continue.</div> </div> <span class="chip px-3 py-1 text-xs">Private beta</span> </div>          <form class="mt-6 grid gap-3">
            <input type="email" id="signinEmail" placeholder="Work email" class="panel-strong px-4 py-3 rounded-2xl" />
            <input type="password" id="signinPassword" placeholder="Password" class="panel-strong px-4 py-3 rounded-2xl" />
            <button type="button" onclick="signIn(event)" class="bg-black text-white py-3 rounded-2xl hoverlift">
              Sign in
            </button>
            <div id="signinMsg" class="hidden text-sm text-red-600"></div>
          </form> <div class="mt-6 grid md:grid-cols-3 gap-3"> <div class="panel-strong p-5"> <div class="text-xs text-gray-500">Access control</div> <div class="mt-2 text-sm text-gray-700">Role-based permissions supported.</div> </div> <div class="panel-strong p-5"> <div class="text-xs text-gray-500">Session security</div> <div class="mt-2 text-sm text-gray-700">Least-privilege by default.</div> </div> <div class="panel-strong p-5"> <div class="text-xs text-gray-500">Auditability</div> <div class="mt-2 text-sm text-gray-700">Actions map to decision trail.</div> </div> </div> <div class="mt-6 panel-strong p-6"> <div class="text-sm font-semibold">New here?</div> <div class="mt-2 text-sm text-gray-700"> Apply for beta access and we’ll onboard your team with a short process.</div></div></div></div></section></section>

<!-- APPLY PAGE (PART 1/3) -->
<section id="page-apply" 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: Positioning + fit -->
      <div class="lg:col-span-5">
        <div class="chip inline-flex px-3 py-1 text-xs">Founding Access</div>
        <h1 class="mt-5 text-4xl font-extrabold tracking-tight">
          Apply for FinMox
        </h1>
        <p class="mt-5 text-gray-700">
          We onboard a limited number of teams to keep outcomes strong,
          execution tight, and iteration fast. Most customers start with a pilot
          on <strong>1–2 roles</strong>.
        </p>
        <div class="mt-7 panel p-6">
          <div class="text-sm font-semibold">What you’re applying for</div>
          <ul class="mt-3 text-sm text-gray-700 space-y-2">
            <li>✔ A controlled hiring execution layer (not another ATS)</li>
            <li>✔ Locked criteria + structured qualification</li>
            <li>✔ Automated movement (follow-ups + handoffs)</li>
            <li>✔ Automatic decision trail + exportable logs</li>
          </ul>
          <div class="mt-4 flex flex-wrap gap-2">
            <span class="chip px-3 py-1 text-xs">Human-in-the-loop</span>
            <span class="chip px-3 py-1 text-xs">No AI decisions</span>
            <span class="chip px-3 py-1 text-xs">Audit-ready</span>
          </div>
        </div>
        <div class="mt-7 panel p-6">
          <div class="text-sm font-semibold">Best fit</div>
          <ul class="mt-3 text-sm text-gray-700 space-y-2">
            <li>✔ 10–200 employees</li>
            <li>✔ Hiring 1–10 roles/month</li>
            <li>✔ Multiple stakeholders deciding</li>
            <li>✔ You want defensibility + consistency</li>
          </ul>
          <div class="mt-4 text-xs text-gray-600">
            If you’re doing high-volume hourly hiring or need payroll/benefits
            built-in, FinMox may not be the right fit (yet).
          </div>
        </div>
      </div>
      <!-- Right: Application form -->
      <div class="lg:col-span-7">
        <div class="panel p-7">
          <div class="flex items-center justify-between gap-4">
            <div>
              <div class="text-sm font-semibold">Application</div>
              <div class="text-sm text-gray-600 mt-1">
                Tell us your workflow so we can confirm fit.
              </div>
            </div>
            <span class="chip px-3 py-1 text-xs">Pilot-first</span>
          </div>
          <form id="applyForm" class="mt-6 grid gap-3" onsubmit="return false;">
            <div class="grid md:grid-cols-2 gap-3">
              <input id="companyName" type="text" placeholder="Company name" class="panel-strong px-4 py-3 rounded-2xl" />
              <input id="yourName" type="text" placeholder="Your name" class="panel-strong px-4 py-3 rounded-2xl" />
            </div>
            <div class="grid md:grid-cols-2 gap-3">
              <input id="workEmail" type="email" placeholder="Work email" class="panel-strong px-4 py-3 rounded-2xl" />
              <input id="role" type="text" placeholder="Role / title" class="panel-strong px-4 py-3 rounded-2xl" />
            </div>
            <div class="grid md:grid-cols-3 gap-3">
              <input id="employees" type="number" placeholder="Employees" class="panel-strong px-4 py-3 rounded-2xl" />
              <input id="rolesPerMonth" type="number" placeholder="Roles per month" class="panel-strong px-4 py-3 rounded-2xl" />
              <input id="candidatesPerRole" type="number" placeholder="Candidates per role" class="panel-strong px-4 py-3 rounded-2xl" />
            </div>
            <div class="grid md:grid-cols-2 gap-3">
              <input id="ats" type="text" placeholder="ATS (Greenhouse, Lever, etc.)" class="panel-strong px-4 py-3 rounded-2xl" />
              <input id="scheduling" type="text" placeholder="Scheduling (Calendly, Google, etc.)" class="panel-strong px-4 py-3 rounded-2xl" />
            </div>
            <textarea id="painPoints" rows="4" placeholder="Where does hiring execution break today? (drift, delays, inconsistency, documentation)" class="panel-strong px-4 py-3 rounded-2xl"></textarea>
            <textarea id="successMetrics" rows="3" placeholder="What does success look like in 30 days? (faster decisions, less chasing, audit trail, etc.)" class="panel-strong px-4 py-3 rounded-2xl"></textarea>
            <div id="applyMsg" class="hidden text-sm text-red-600"></div>
            <div class="grid md:grid-cols-2 gap-3">
              <select id="hiringFocus" class="panel-strong px-4 py-3 rounded-2xl">
                <option>Primary hiring focus</option>
                <option>Engineering</option>
                <option>Sales</option>
                <option>Marketing</option>
                <option>Other</option>
              </select>
              <button type="button" id="applyNowBtn" class="bg-black text-white py-3 rounded-2xl hoverlift" > Apply Now </button>
            </div>
          </form>
        </div>

        <!-- APPLY PAGE (PART 3/3) -->
        <div class="mt-6 grid md:grid-cols-2 gap-4">
          <div class="panel p-6">
            <div class="text-sm font-semibold">
              What happens after you apply
            </div>
            <ol class="mt-3 text-sm text-gray-700 space-y-2">
              <li>
                <strong>1)</strong> Fit check (volume, stakeholders, workflow)
              </li>
              <li>
                <strong>2)</strong> Pilot plan (1–2 roles, locked criteria +
                rubric)
              </li>
              <li>
                <strong>3)</strong> Execution tuning (movement, follow-ups,
                handoffs)
              </li>
              <li><strong>4)</strong> Results review + expansion decision</li>
            </ol>
          </div>
          <div class="panel p-6">
            <div class="text-sm font-semibold">What we’ll need from you</div>
            <ul class="mt-3 text-sm text-gray-700 space-y-2">
              <li>• Your current job description (even if messy)</li>
              <li>• Your interview stages + stakeholders</li>
              <li>• Your “must-have” criteria for the role</li>
              <li>• Your current ATS/scheduling tools</li>
            </ul>
          </div>
        </div>

        <div class="mt-6 panel-strong p-6">
          <div class="flex items-center justify-between gap-4">
            <div>
              <div class="text-sm font-semibold">
                Trust basics (early access)
              </div>
              <div class="text-sm text-gray-600 mt-1">
                We build like a system that will be security-reviewed — even
                before enterprise rollout.
              </div>
            </div>
            <a href="#trust" onclick="openPage('trust'); return false;" class="underline text-sm text-gray-700">
              View Security & Trust →
            </a>
          </div>
          <div class="mt-4 grid sm:grid-cols-3 gap-3">
            <div class="panel p-5">
              <div class="text-xs text-gray-500">No AI decisions</div>
              <div class="mt-2 text-sm text-gray-700">
                Humans decide. FinMox enforces + records.
              </div>
            </div>
            <div class="panel p-5">
              <div class="text-xs text-gray-500">
                Automatic documentation
              </div>
              <div class="mt-2 text-sm text-gray-700">
                Decision trail created from execution events.
              </div>
            </div>
            <div class="panel p-5">
              <div class="text-xs text-gray-500">
                Integrates with your stack
              </div>
              <div class="mt-2 text-sm text-gray-700">
                No forced migration required.
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- /Right -->
    </div>
    <!-- /Grid -->
  </section>
</section>
    <!-- FORGOT ACCESS PAGE (PART 1/3) --> <section id="page-forgot" 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: Context --> <div class="lg:col-span-5"> <div class="chip inline-flex px-3 py-1 text-xs">Account</div> <h1 class="mt-5 text-4xl font-extrabold tracking-tight"> Forgot access? </h1> <p class="mt-5 text-gray-700"> Enter the email you used for FinMox and we’ll send a secure reset link. If your company is in private beta, we’ll also confirm your access status. </p> <div class="mt-7 panel p-6"> <div class="text-sm font-semibold">What happens next</div> <ol class="mt-3 text-sm text-gray-700 space-y-2"> <li><strong>1)</strong> You request a reset link</li> <li><strong>2)</strong> We verify the email + access</li> <li><strong>3)</strong> You set a new password</li> <li><strong>4)</strong> You’re back in your workspace</li> </ol> <div class="mt-4 flex flex-wrap gap-2"> <span class="chip px-3 py-1 text-xs">Least privilege</span> <span class="chip px-3 py-1 text-xs">Audit-friendly</span> <span class="chip px-3 py-1 text-xs">Secure links</span> </div> </div> <div class="mt-7 panel p-6"> <div class="text-sm font-semibold">Having trouble?</div> <div class="mt-2 text-sm text-gray-700"> If you don’t receive an email within a few minutes, check spam/junk and ensure you typed the correct address. </div> <div class="mt-3 text-xs text-gray-600"> Tip: If you’re not approved for beta yet, use the Apply page to request access. </div> </div> </div><!-- FORGOT ACCESS PAGE (PART 2/3) --> <!-- Right: Form --> <div class="lg:col-span-7"> <div class="panel p-7"> <div class="flex items-center justify-between gap-4"> <div> <div class="text-sm font-semibold">Reset your access</div> <div class="text-sm text-gray-600 mt-1">We’ll email a secure link if this account exists.</div> </div> <span class="chip px-3 py-1 text-xs">Private beta</span> </div> <form class="mt-6 grid gap-3" onsubmit="return false;"> <input id="forgotEmail" type="email" placeholder="Work email" class="panel-strong px-4 py-3 rounded-2xl" /> <div class="grid md:grid-cols-2 gap-3"> <input type="text" placeholder="Company name (optional)" class="panel-strong px-4 py-3 rounded-2xl" /> <input type="text" placeholder="Your role (optional)" class="panel-strong px-4 py-3 rounded-2xl" /> </div> <button type="button" class="bg-black text-white py-3 rounded-2xl hoverlift" onclick="forgotAccessSend();"> Send reset link </button> <div id="forgotMsg" class="text-sm text-gray-700 hidden"></div> <div class="text-xs text-gray-600"> Demo placeholder. Wire to your auth later (AppWizzy auth, Supabase, Clerk, etc.). For now, this simulates the flow without exposing whether a user exists. </div> <div class="mt-4 flex flex-wrap gap-3"> <a href="#signin" onclick="openPage('signin'); return false;" class="underline text-sm text-gray-700"> Back to Sign in → </a> <a href="#apply" onclick="openPage('apply'); return false;" class="underline text-sm text-gray-700"> Apply for access → </a> </div> </form> </div><!-- FORGOT ACCESS PAGE (PART 3/3) --> <div class="mt-6 grid md:grid-cols-3 gap-4"> <div class="panel p-6"> <div class="text-xs text-gray-500">Access control</div> <div class="mt-2 text-sm text-gray-700">Role-based permissions supported.</div> </div> <div class="panel p-6"> <div class="text-xs text-gray-500">Session security</div> <div class="mt-2 text-sm text-gray-700">Least-privilege by default.</div> </div> <div class="panel p-6"> <div class="text-xs text-gray-500">Auditability</div> <div class="mt-2 text-sm text-gray-700">Actions map to decision trail.</div> </div> </div> </div><!-- /Right --> </div><!-- /Grid --> </section> <script> // Safe demo behavior: doesn't break the site, doesn't reveal account existence. function forgotAccessSend(){ var emailEl = document.getElementById('forgotEmail'); var msgEl = document.getElementById('forgotMsg'); if(!emailEl || !msgEl) return; var email = (emailEl.value || '').trim(); msgEl.classList.remove('hidden'); if(!email || email.indexOf('@') === -1){ msgEl.innerHTML = "Please enter a valid email address."; return; } msgEl.innerHTML = "If this email is on file, you’ll receive a secure reset link shortly. " + "If you don’t see it, check spam/junk or apply for access."; } </script> </section>
    </main>


    <!-- FOOTER -->
    <footer class="max-w-7xl mx-auto px-6 pb-16">
        <div class="panel-strong p-6 flex flex-col md:flex-row md:items-center justify-between gap-4 text-sm text-gray-600">
            <div>FinMox © 2025</div>
            <div id="footer-links" class="flex flex-wrap gap-3">
                <!-- Footer links will be injected by JS -->
            </div>
        </div>
    </footer>

    <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
</body>
</html>