From 6974b710de2cd63b02f4be1d026567d6a09c0627 Mon Sep 17 00:00:00 2001
From: robbond <rob@rdbsolutions.co.uk>
Date: Wed, 9 Sep 2026 16:33:06 +0100
Subject: [PATCH] fix(confidence-engine): refine landing page layout

---
 app/login/page.jsx | 94 +++++++++++++++++++++++++++++++++++++---------
 1 file changed, 77 insertions(+), 17 deletions(-)

diff --git a/app/login/page.jsx b/app/login/page.jsx
index 32b58d9..0790c8b 100644
--- a/app/login/page.jsx
+++ b/app/login/page.jsx
@@ -4,41 +4,101 @@ export default function LoginPage() {
   return (
     <main className="mx-auto min-h-[calc(100vh-57px)] max-w-[1200px] px-6 py-16">
       <div className="mx-auto flex flex-col gap-y-8 md:grid md:grid-cols-[minmax(0,1fr)_420px] md:gap-x-8 md:items-start">
-
         {/* Left column wrapper — contents on mobile for flex ordering, block on desktop as one grid cell */}
         <div className="contents md:block">
-
           <section>
-            <h1 className="text-3xl font-bold tracking-tight text-teal-700">Confidence Engine</h1>
+            <h1 className="text-3xl font-bold tracking-tight text-teal-700">
+              Confidence Engine
+            </h1>
 
             <div className="space-y-4 text-base leading-relaxed text-gray-700">
-              <h2 className="text-xl font-semibold tracking-tight text-gray-900">Get clearer about what{'\''}s really going on.</h2>
-              <p>Confidence Engine helps you work through situations that feel uncertain, complicated or difficult to act on.</p>
-              <p>Describe the situation in your own words. Confidence Engine will help reconstruct what is known, what may be happening, and what is still unclear — then let you decide what to explore further.</p>
-              <p className="text-gray-600">It doesn{'\''}t try to make the decision for you. The aim is to help you reach a clearer understanding so you can decide what to do with more confidence.</p>
+              <h2 className="text-xl font-semibold tracking-tight text-gray-900">
+                Get clearer about what{"'"}s really going on.
+              </h2>
+              <p>
+                Confidence Engine helps you work through situations that feel
+                uncertain, complicated or difficult to act on.
+              </p>
+              <p>
+                Describe the situation in your own words. Confidence Engine will
+                help reconstruct what is known, what may be happening, and what
+                is still unclear — then let you decide what to explore further.
+              </p>
+              <p className="text-gray-600">
+                It doesn{"'"}t try to make the decision for you. The aim is to
+                help you reach a clearer understanding so you can decide what to
+                do with more confidence.
+              </p>
             </div>
           </section>
 
-          <section className="space-y-4 mt-8 md:mt-0">
-            <h2 className="text-sm font-semibold uppercase tracking-[.18em] text-teal-700/70">How it works</h2>
+          <section className="space-y-4 mt-8 md:mt-8">
+            <h2 className="text-sm font-semibold uppercase tracking-[.18em] text-teal-700/70">
+              How it works
+            </h2>
+
             <ol className="space-y-3 text-base leading-relaxed text-gray-700">
-              <li><strong>1. Describe your situation</strong><br/><span className="text-gray-600">As much or as little as you currently know.</span></li>
-              <li><strong>2. Explore what{'\''}s unclear</strong><br/><span className="text-gray-600">Answer the questions that feel useful; skip the ones that don{'\''}t.</span></li>
-              <li><strong>3. Build your Current Understanding</strong><br/><span className="text-gray-600">Your picture of the situation develops as you learn more.</span></li>
-              <li><strong>4. Stop when you have enough</strong><br/><span className="text-gray-600">You don{'\''}t have to answer everything. Your investigation is saved so you can return later.</span></li>
+              <li className="grid grid-cols-[1.5rem_1fr]">
+                <span className="font-bold">1.</span>
+                <div>
+                  <strong>Describe your situation</strong>
+                  <br />
+                  <span className="text-gray-600">
+                    As much or as little as you currently know.
+                  </span>
+                </div>
+              </li>
+
+              <li className="grid grid-cols-[1.5rem_1fr]">
+                <span className="font-bold">2.</span>
+                <div>
+                  <strong>Explore what{"'"}s unclear</strong>
+                  <br />
+                  <span className="text-gray-600">
+                    Answer the questions that feel useful; skip the ones that
+                    don{"'"}t.
+                  </span>
+                </div>
+              </li>
+
+              <li className="grid grid-cols-[1.5rem_1fr]">
+                <span className="font-bold">3.</span>
+                <div>
+                  <strong>Build your Current Understanding</strong>
+                  <br />
+                  <span className="text-gray-600">
+                    Your picture of the situation develops as you learn more.
+                  </span>
+                </div>
+              </li>
+
+              <li className="grid grid-cols-[1.5rem_1fr]">
+                <span className="font-bold">4.</span>
+                <div>
+                  <strong>Stop when you have enough</strong>
+                  <br />
+                  <span className="text-gray-600">
+                    You don{"'"}t have to answer everything. Your investigation
+                    is saved so you can return later.
+                  </span>
+                </div>
+              </li>
             </ol>
 
-            <p className="text-sm italic text-gray-500">Try it with something real.<br/>A decision you{'\''}re unsure about. A problem that doesn{'\''}t quite make sense. A situation where you feel you may be missing something.</p>
+            <p className="text-sm italic text-gray-500">
+              Try it with something real.
+              <br />A decision you{"'"}re unsure about. A problem that doesn
+              {"'"}t quite make sense. A situation where you feel you may be
+              missing something.
+            </p>
           </section>
-
         </div>
 
         {/* Right column — login card, explicitly positioned to top-right on desktop */}
         <section className="md:col-start-2 md:row-start-1">
           <LoginForm />
         </section>
-
       </div>
     </main>
   );
-}
\ No newline at end of file
+}