fix(confidence-engine): simplify responsive login layout

app/login/page.jsx

@@ -4,10 +4,14 @@ 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>
 
-          <div className="mt-4 space-y-4 text-base leading-relaxed text-gray-700">
+            <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>
@@ -15,11 +19,7 @@ export default function LoginPage() {
             </div>
           </section>
 
-        <section className="md:col-start-2 md:w-full">
-          <LoginForm />
-        </section>
-
-        <section className="space-y-4">
+          <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>
             <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>
@@ -30,6 +30,14 @@ export default function LoginPage() {
 
             <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>
   );