diff --git a/app/login/page.jsx b/app/login/page.jsx
index 2a96247..5b30424 100644
--- a/app/login/page.jsx
+++ b/app/login/page.jsx
@@ -2,11 +2,9 @@ import LoginForm from "@/components/login-form";
 
 export default function LoginPage() {
   return (
-    <main className="mx-auto flex min-h-[calc(100vh-57px)] max-w-[1200px] items-start gap-12 px-6 py-16 lg:flex-row">
-      <section className="flex-1 space-y-8 pr-0 lg:pr-8">
-        <div>
-          <h1 className="text-3xl font-bold tracking-tight text-teal-700">Confidence Engine</h1>
-        </div>
+    <main className="mx-auto grid min-h-[calc(100vh-57px)] max-w-[1200px] grid-cols-1 items-start gap-4 px-6 py-16 md:grid-cols-[minmax(0,1fr)_420px]">
+      <section className="space-y-8">
+        <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>
@@ -14,7 +12,9 @@ export default function LoginPage() {
           <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-8">
         <section className="space-y-4">
           <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">
@@ -28,7 +28,9 @@ 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>
 
-      <LoginForm />
+      <section className="md:col-start-2 md:row-start-1">
+        <LoginForm />
+      </section>
     </main>
   );
 }
\ No newline at end of file
diff --git a/components/login-form.jsx b/components/login-form.jsx
index 5104dbd..2ad16d2 100644
--- a/components/login-form.jsx
+++ b/components/login-form.jsx
@@ -25,7 +25,7 @@ export default function LoginForm() {
   }
 
   return (
-    <section className="w-full shrink-0 space-y-6 lg:w-[420px] lg:pt-6">
+    <section className="w-full shrink-0 space-y-6">
       <div className="rounded-xl border-[2.5px] border-teal-300/70 bg-gradient-to-b from-teal-50/60 to-white px-8 py-9 shadow-sm">
         <p className="mb-3 text-[11px] font-bold uppercase tracking-[.18em] text-teal-700/70">Welcome</p>
         <h1 className="text-3xl font-bold tracking-tight">Confidence Engine</h1>
diff --git a/docs/current-handoff.md b/docs/current-handoff.md
index 9da0ebd..41779b1 100644
--- a/docs/current-handoff.md
+++ b/docs/current-handoff.md
@@ -99,6 +99,12 @@ Jenkins SCM branch used to load the Jenkinsfile is conceptually separate from th
 - existing magic-link authentication unchanged
 - no broader onboarding/tutorial system introduced
 
+### Mobile-first sign-in order (responsive layout fix)
+
+- v0.63f corrected mobile reading order: proposition → sign-in card → supporting explanation
+- CSS Grid with responsive column placement replaces original flexbox; three DOM sections ensure correct mobile stacking without duplicating content
+- desktop two-column presentation (explanation left / sign-in right) preserved unchanged at `md` breakpoint and above
+
 ## CURRENT MVP DIRECTION
 
 Initial-decomposition hardening is frozen for the current MVP stage.