diff --git a/src/app/login/[role]/page.tsx b/src/app/login/[role]/page.tsx
deleted file mode 100644
index 268b03e..0000000
--- a/src/app/login/[role]/page.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { notFound, redirect } from "next/navigation";
-import { roles, type Role } from "@/modules/auth/types";
-
-export const dynamic = "force-dynamic";
-
-export default async function RoleLoginCompatibilityPage({ params }: { params: Promise<{ role: string }> }) {
-  const { role } = await params;
-  if (!roles.includes(role as Role)) notFound();
-  redirect(`/login?intent=${role}`);
-}
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 8989635..088508b 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -1,85 +1,103 @@
 import Link from "next/link";
 import { redirect } from "next/navigation";
+import { UserRound, Search, Building2, Shield, ClipboardCheck } from "lucide-react";
 import { getSession } from "@/modules/auth/session";
 import { LoginForm } from "@/modules/auth/LoginForm";
 import { ThemeToggle } from "@/modules/theme/ThemeToggle";
-import { isRole, type Role } from "@/modules/auth/types";
 
 export const dynamic = "force-dynamic";
 
-const loginHints: Record<Role, string> = {
-  admin: "Admin access is detected after authentication.",
-  staff: "Staff access is detected after authentication.",
-  company: "Company contact access is detected after authentication.",
-  candidate: "Candidate access is detected after authentication.",
-  inspector: "Inspector access is detected after authentication."
-};
+const roleNotes = [
+  { icon: UserRound, label: "Students", detail: "Profile, jobs, hours, pay" },
+  { icon: Search, label: "Staff", detail: "Requests, candidates, CVs, time" },
+  { icon: Building2, label: "Companies", detail: "Requests, candidates, invoices" },
+  { icon: Shield, label: "Admin", detail: "Finance, approvals, migration" },
+  { icon: ClipboardCheck, label: "Inspectors", detail: "ID review, document queues" }
+];
 
 export default async function LoginPage({
   searchParams
 }: {
-  searchParams: Promise<{ intent?: string; error?: string }>;
+  searchParams: Promise<{ error?: string }>;
 }) {
   const session = await getSession();
   if (session) redirect("/app");
   const params = await searchParams;
-  const intent = params.intent ?? null;
-  const hint = isRole(intent) ? loginHints[intent] : null;
 
   return (
-    <main className="roleLoginShell unifiedLoginShell">
-      <nav className="landingNav" aria-label="StudentHub login navigation">
-        <Link className="landingBrand" href="/">
-          <span>SH</span>
+    <main className="min-h-svh w-[min(1160px,calc(100%_-_28px))] mx-auto grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_minmax(400px,500px)] content-start items-start gap-4 pt-[18px] pb-[42px] max-sm:w-[min(calc(100%_-_20px),720px)]">
+      {/* Nav - spans full width */}
+      <nav
+        className="col-span-full sticky top-3 z-20 min-h-[62px] flex items-center justify-between gap-3.5 border border-[color-mix(in_srgb,var(--line)_84%,transparent)] rounded-lg bg-[color-mix(in_srgb,var(--surface)_92%,transparent)] p-2 shadow-[0_18px_50px_rgba(16,24,40,0.08)] max-sm:static max-sm:flex-col max-sm:items-stretch"
+        aria-label="StudentHub login navigation"
+      >
+        <Link
+          className="inline-flex items-center gap-2.5 text-[var(--ink)] px-2 no-underline"
+          href="/"
+        >
+          <span className="size-9 inline-flex items-center justify-center rounded-lg bg-[var(--ink)] text-[var(--surface)] font-black">
+            SH
+          </span>
           <strong>StudentHub</strong>
         </Link>
         <ThemeToggle />
       </nav>
 
-      <section className="roleLoginIntro unifiedLoginIntro">
+      {/* Intro */}
+      <section className="overflow-hidden rounded-lg border border-[var(--line)] bg-[linear-gradient(135deg,color-mix(in_srgb,var(--blue)_9%,transparent),transparent_48%),var(--surface)] p-[clamp(22px,4vw,48px)]">
         <div>
-          <p className="eyebrow">One StudentHub login</p>
-          <h1>Sign in once. We’ll open the right workspace.</h1>
-          <p>
+          <p className="text-[var(--blue)] text-[11px] font-black uppercase">One StudentHub login</p>
+          <h1 className="mt-0 max-w-[760px] text-[clamp(44px,6.4vw,92px)] leading-[0.94] max-sm:text-[40px]">
+            Sign in once. We&rsquo;ll open the right workspace.
+          </h1>
+          <p className="text-[var(--muted)] max-w-[620px] leading-relaxed">
             No more guessing whether you are entering as admin, staff, candidate, company, or inspector. Your production
             credentials decide what you can see and do.
           </p>
-          <div className="roleLoginPromise">
-            <span>Production-compatible credentials</span>
-            <span>Server-side account detection</span>
-            <span>Capability-scoped workspaces</span>
+          <div className="flex flex-wrap gap-2 mt-[18px]">
+            {["Production-compatible credentials", "Server-side account detection", "Capability-scoped workspaces"].map(
+              (item) => (
+                <span
+                  key={item}
+                  className="min-h-8 inline-flex items-center border border-[var(--line)] rounded-full bg-[color-mix(in_srgb,var(--surface)_88%,transparent)] px-3 text-[var(--blue)] text-[11px] font-black uppercase"
+                >
+                  {item}
+                </span>
+              )
+            )}
           </div>
         </div>
-        <Link className="switchPortalLink" href="/">
+        <Link href="/" className="inline-block mt-4 text-sm no-underline text-[var(--muted)] hover:text-[var(--blue)]">
           Back to landing
         </Link>
       </section>
 
-      <section className="loginPanel appLoginPanel unifiedLoginPanel" aria-label="StudentHub sign in">
+      {/* Login panel */}
+      <section
+        className="self-start border border-[#c5cfdd] rounded-lg bg-[var(--surface)] shadow-[0_30px_90px_rgba(16,24,40,0.16)] dark:border-[var(--line)]"
+        aria-label="StudentHub sign in"
+      >
         {params.error === "expired" ? (
-          <p className="formError">That verified account choice expired. Sign in again to continue.</p>
+          <p className="text-[var(--destructive)] font-bold m-0 p-4 pb-0">That verified account choice expired. Sign in again to continue.</p>
         ) : null}
-        {params.error === "account" ? <p className="formError">Choose a verified account to continue.</p> : null}
-        <LoginForm hint={hint ?? undefined} />
+        {params.error === "account" ? (
+          <p className="text-[var(--destructive)] font-bold m-0 p-4 pb-0">Choose a verified account to continue.</p>
+        ) : null}
+        <LoginForm />
       </section>
 
-      <section className="unifiedLoginNotes" aria-label="Account detection notes">
-        <article>
-          <span>Students</span>
-          <strong>Profile, jobs, hours, pay</strong>
-        </article>
-        <article>
-          <span>Staff</span>
-          <strong>Requests, candidates, CVs, time</strong>
-        </article>
-        <article>
-          <span>Companies</span>
-          <strong>Requests, candidates, invoices</strong>
-        </article>
-        <article>
-          <span>Admin</span>
-          <strong>Finance, approvals, migration</strong>
-        </article>
+      {/* Role notes - spans full width */}
+      <section className="col-span-full grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-2.5" aria-label="Account detection notes">
+        {roleNotes.map(({ icon: Icon, label, detail }) => (
+          <article
+            key={label}
+            className="grid gap-1.5 border border-[var(--line)] rounded-lg bg-[var(--surface)] p-3.5"
+          >
+            <Icon className="size-4 text-[var(--blue)] shrink-0" aria-hidden="true" />
+            <span className="text-[var(--muted)] text-xs font-extrabold uppercase">{label}</span>
+            <strong className="text-sm">{detail}</strong>
+          </article>
+        ))}
       </section>
     </main>
   );
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6a8aac7..de6fdf6 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,139 +1,208 @@
 import Link from "next/link";
 import type { Route } from "next";
+import { UserRound, Briefcase, Building2, Shield, ClipboardCheck } from "lucide-react";
 import { getSession } from "@/modules/auth/session";
 import { portalContent } from "@/modules/auth/portalContent";
 import { ThemeToggle } from "@/modules/theme/ThemeToggle";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
 
 export const dynamic = "force-dynamic";
 
-const portalIcons: Record<(typeof portalRoles)[number], string> = {
-  candidate: "🎓",
-  staff: "📋",
-  company: "🏭",
-  admin: "⚙️",
-  inspector: "🔍",
-};
-
 const benefits = [
   {
     title: "Purpose-built portals",
-    body: "Each role gets exactly the right tools — no clutter, no missing features, no one-size-fits-all compromises.",
+    body: "Each role gets exactly the right tools — no clutter, no missing features, no one-size-fits-all compromises."
   },
   {
     title: "Smart candidate search",
-    body: "Typo-tolerant, filter-rich search across countries, skills, and statuses. Saved searches for repeat workflows.",
+    body: "Typo-tolerant, filter-rich search across countries, skills, and statuses. Saved searches for repeat workflows."
   },
   {
     title: "End-to-end workflows",
-    body: "From profile readiness to timesheets and payments — every step is connected in one system.",
+    body: "From profile readiness to timesheets and payments — every step is connected in one system."
   },
   {
     title: "Production-grade foundation",
-    body: "Built for real data volumes, real teams, and real compliance — not a prototype.",
-  },
+    body: "Built for real data volumes, real teams, and real compliance — not a prototype."
+  }
 ];
 
 const portalRoles = ["candidate", "staff", "company", "admin", "inspector"] as const;
 
+const portalIcons: Record<(typeof portalRoles)[number], React.ComponentType<{ className?: string }>> = {
+  candidate: UserRound,
+  staff: Briefcase,
+  company: Building2,
+  admin: Shield,
+  inspector: ClipboardCheck
+};
+
 export default async function Home() {
   const session = await getSession();
 
   return (
-    <main className="landingShell">
-      <nav className="landingNav" aria-label="StudentHub public navigation">
-        <Link className="landingBrand" href="/">
-          <span>SH</span>
+    <main className="min-h-svh w-[min(1320px,calc(100%_-_28px))] mx-auto grid content-start gap-4 pt-[18px] pb-[42px] max-sm:w-[min(calc(100%_-_20px),720px)]">
+      {/* Nav */}
+      <nav
+        className="sticky top-3 z-20 min-h-[62px] flex items-center justify-between gap-3.5 border border-[color-mix(in_srgb,var(--line)_84%,transparent)] rounded-lg bg-[color-mix(in_srgb,var(--surface)_92%,transparent)] p-2 shadow-[0_18px_50px_rgba(16,24,40,0.08)] max-sm:static max-sm:flex-col max-sm:items-stretch"
+        aria-label="StudentHub public navigation"
+      >
+        <Link
+          className="inline-flex items-center gap-2.5 text-[var(--ink)] px-2 no-underline min-h-11"
+          href="/"
+        >
+          <span className="size-9 inline-flex items-center justify-center rounded-lg bg-[var(--ink)] text-[var(--surface)] font-black">
+            SH
+          </span>
           <strong>StudentHub</strong>
         </Link>
-        <div>
-          {session ? <Link href="/app">Open app</Link> : <Link href="/login">Sign in</Link>}
+        <div className="flex items-center gap-3.5 max-sm:flex-col max-sm:items-stretch">
+          {session ? (
+            <Button variant="outline" asChild>
+              <Link href="/app">Open app</Link>
+            </Button>
+          ) : (
+            <Button variant="outline" asChild>
+              <Link href="/login">Sign in</Link>
+            </Button>
+          )}
           <ThemeToggle />
         </div>
       </nav>
 
-      <section className="landingHero">
-        <div className="landingHeroStage" aria-hidden="true">
-          <div className="landingOpsFrame">
-            <div className="landingOpsRail">
-              {["Search", "Queue", "Work", "Money"].map((item) => (
-                <span key={item}>{item}</span>
+      {/* Hero */}
+      <section className="relative min-h-[min(760px,calc(100svh_-_96px))] grid grid-cols-1 items-center overflow-hidden border border-[var(--line)] rounded-lg bg-[var(--surface)] p-[clamp(22px,5vw,76px)] max-lg:min-h-auto max-lg:p-7 after:absolute after:inset-0 after:pointer-events-none after:bg-[linear-gradient(90deg,var(--surface)_0%,color-mix(in_srgb,var(--surface)_94%,transparent)_38%,transparent_78%),linear-gradient(180deg,transparent_72%,var(--surface)_100%)] max-lg:after:bg-[linear-gradient(180deg,var(--surface)_0%,color-mix(in_srgb,var(--surface)_94%,transparent)_56%,var(--surface)_100%)]">
+        {/* Decorative stage */}
+        <div
+          className="absolute inset-0 grid place-items-center place-content-end p-[clamp(20px,4vw,58px)] opacity-[0.96] max-lg:relative max-lg:min-h-[360px] max-lg:order-2 max-lg:p-0 max-lg:pt-[18px]"
+          aria-hidden="true"
+        >
+          <div className="w-[min(880px,72vw)] min-h-[510px] grid grid-cols-[132px_minmax(0,1fr)_220px] gap-2.5 border border-[var(--line)] rounded-lg bg-[color-mix(in_srgb,var(--surface-soft)_92%,transparent)] p-2.5 shadow-[var(--shadow)] max-lg:w-full max-lg:min-h-[360px] max-lg:grid-cols-[92px_minmax(0,1fr)] max-sm:grid-cols-1">
+            {/* Rail */}
+            <div className="grid content-start gap-2 p-3 border border-[var(--line)] rounded-lg bg-[color-mix(in_srgb,var(--surface)_94%,transparent)] max-sm:grid-cols-4">
+              {["Search", "Queue", "Work", "Money"].map((item, i) => (
+                <span
+                  key={item}
+                  className={
+                    i === 0
+                      ? "min-h-9 flex items-center rounded-[7px] bg-[color-mix(in_srgb,var(--blue)_12%,var(--surface))] text-[var(--blue)] text-xs font-black px-2.5 max-sm:justify-center max-sm:px-1.5"
+                      : "min-h-9 flex items-center rounded-[7px] text-[var(--muted)] text-xs font-black px-2.5 max-sm:justify-center max-sm:px-1.5"
+                  }
+                >
+                  {item}
+                </span>
               ))}
             </div>
-            <div className="landingOpsMain">
-              <div className="landingOpsSearch">
-                <span>Candidate search</span>
-                <strong>find talent</strong>
-                <small>80 results · filtered · ready for review</small>
+            {/* Main */}
+            <div className="grid content-start gap-2.5 p-3.5 border border-[var(--line)] rounded-lg bg-[color-mix(in_srgb,var(--surface)_94%,transparent)]">
+              <div className="min-h-[170px] grid content-end gap-2 border border-[var(--line)] rounded-lg bg-[var(--surface-soft)] p-[18px]">
+                <span className="text-[var(--blue)] text-[11px] font-black uppercase">Candidate search</span>
+                <strong className="text-[clamp(42px,6vw,76px)] leading-[0.88]">jaafar</strong>
+                <small className="text-[var(--muted)]">80 scoped results · FAD · needs review · Lebanon</small>
               </div>
-              <div className="landingOpsColumns">
+              <div className="grid grid-cols-4 gap-2.5 max-sm:grid-cols-1">
                 {[
-                  { label: "Profile", status: "Live" },
+                  { label: "Profile ready", status: "Live" },
                   { label: "CV export", status: "PDF" },
                   { label: "Timesheet", status: "Live" },
                   { label: "Payment", status: "Live" },
                 ].map((item) => (
-                  <div key={item.label}>
-                    <span>{item.label}</span>
-                    <strong>{item.status}</strong>
+                  <div
+                    key={item.label}
+                    className="min-h-[138px] grid content-between border border-[var(--line)] rounded-lg bg-[var(--surface)] p-3.5 max-sm:min-h-[92px]"
+                  >
+                    <span className="text-[var(--blue)] text-[11px] font-black uppercase">{item.label}</span>
+                    <strong className="text-2xl">{item.status}</strong>
                   </div>
                 ))}
               </div>
             </div>
-            <div className="landingOpsAside">
-              <span>Actions</span>
-              <strong>Send CVs</strong>
-              <small>One click to share with employers.</small>
+            {/* Aside */}
+            <div className="grid content-end gap-2 p-4 border border-[var(--line)] rounded-lg bg-[color-mix(in_srgb,var(--surface)_94%,transparent)] max-lg:hidden">
+              <span className="text-[var(--blue)] text-[11px] font-black uppercase">Command</span>
+              <strong className="text-[22px] leading-[1.08]">Send CVs to employer</strong>
+              <small className="text-[var(--muted)]">Same action layer for staff and admin, scoped by role.</small>
             </div>
           </div>
         </div>
-        <div className="landingHeroCopy">
-          <p className="eyebrow">The StudentHub platform</p>
-          <h1>Every role gets its own workspace.</h1>
-          <p>
-            Candidates find jobs, staff place talent, companies hire, admins oversee, and inspectors verify — all
-            from a single platform with role-specific portals that adapt to how each person works.
+        {/* Hero copy */}
+        <div className="relative z-[2] max-w-[690px] max-lg:max-w-none">
+          <p className="text-[var(--blue)] text-[11px] font-black uppercase">Next-generation StudentHub</p>
+          <h1 className="mt-0 text-[clamp(44px,6.4vw,92px)] leading-[0.94] max-sm:text-[40px]">
+            One modern platform, purpose-built portals.
+          </h1>
+          <p className="max-w-[620px] text-[clamp(17px,1.7vw,21px)]">
+            A Silicon Valley-grade rebuild for candidates, staff, companies, inspectors, and admins. One login opens the
+            right workspace, while shared modules keep search, documents, payments, and reporting unified.
           </p>
-          <div className="landingActions">
-            <Link className="primary" href="/login">Get started</Link>
-            <Link href="/login">Explore portals</Link>
+          <div className="flex flex-wrap items-center gap-3.5 mt-4 max-sm:flex-col max-sm:items-stretch">
+            <Button size="lg" asChild>
+              <Link href="/login">Sign in</Link>
+            </Button>
           </div>
-          <div className="landingHeroStats" aria-label="Platform highlights">
-            <span>5 role-specific portals</span>
-            <span>Unified search &amp; documents</span>
-            <span>End-to-end workflows</span>
+          <div className="flex flex-wrap gap-2 mt-[18px]" aria-label="StudentHub platform goals">
+            {["Role-specific workspaces", "Shared search and documents", "Production-data migration path"].map(
+              (stat) => (
+                <span
+                  key={stat}
+                  className="min-h-8 inline-flex items-center border border-[var(--line)] rounded-full bg-[color-mix(in_srgb,var(--surface)_88%,transparent)] px-3 text-[var(--blue)] text-[11px] font-black uppercase"
+                >
+                  {stat}
+                </span>
+              )
+            )}
           </div>
         </div>
       </section>
 
-      <section className="portalGrid" aria-label="StudentHub portals">
+      {/* Portal grid */}
+      <section className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-2.5 max-sm:gap-2" aria-label="StudentHub portals">
         {portalRoles.map((role) => {
           const portal = portalContent[role];
+          const Icon = portalIcons[role];
           return (
-            <Link href={portal.href as Route} key={role}>
-              <span className="portalIcon" aria-hidden="true">{portalIcons[role]}</span>
-              <span>{portal.label}</span>
-              <strong>{portal.audience}</strong>
-              <small>{portal.promise}</small>
+            <Link
+              href={portal.href as Route}
+              key={role}
+              className="group no-underline transition-[border-color,background,transform,box-shadow] duration-140"
+            >
+              <Card className="h-full group-hover:-translate-y-0.5 group-hover:shadow-[0_16px_45px_rgba(16,24,40,0.1)]">
+                <CardContent className="flex flex-col gap-2 p-4">
+                  <Icon className="size-5 text-[var(--blue)] shrink-0" aria-hidden="true" />
+                  <span className="text-[var(--blue)] text-[11px] font-black uppercase">{portal.label}</span>
+                  <strong className="text-sm">{portal.audience}</strong>
+                  <small className="text-[var(--muted)] text-xs leading-relaxed">{portal.promise}</small>
+                </CardContent>
+              </Card>
             </Link>
           );
         })}
       </section>
 
-      <section className="landingBenefitsSection">
+      {/* Benefits section */}
+      <section
+        className="grid grid-cols-[1fr] lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] items-center rounded-lg bg-[color-mix(in_srgb,var(--surface)_94%,transparent)] p-[clamp(24px,4vw,48px)] gap-[clamp(18px,3vw,38px)] shadow-[0_18px_60px_rgba(16,24,40,0.08)]"
+        aria-label="Why StudentHub"
+      >
         <div>
-          <p className="eyebrow">Why StudentHub</p>
-          <h2>Built for how staffing actually works.</h2>
-          <p>
+          <p className="text-[var(--blue)] text-[11px] font-black uppercase">Why StudentHub</p>
+          <h2 className="text-[clamp(28px,4vw,42px)] leading-[1.08] m-0">
+            Built for how staffing actually works.
+          </h2>
+          <p className="text-[var(--muted)] leading-relaxed">
             Not a generic dashboard. Every feature is shaped by real placement workflows — search, shortlisting,
             document exchange, timesheets, and payments run in one system.
           </p>
         </div>
-        <div className="benefitGrid">
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5">
           {benefits.map((b) => (
-            <article key={b.title}>
-              <strong>{b.title}</strong>
-              <p>{b.body}</p>
-            </article>
+            <Card key={b.title}>
+              <CardContent className="grid content-start gap-1 p-4">
+                <strong className="text-sm">{b.title}</strong>
+                <p className="text-[var(--muted)] text-xs leading-relaxed m-0">{b.body}</p>
+              </CardContent>
+            </Card>
           ))}
         </div>
       </section>
diff --git a/src/app/styles.css b/src/app/styles.css
index be38a3a..07a0add 100644
--- a/src/app/styles.css
+++ b/src/app/styles.css
@@ -195,7 +195,7 @@ body {
 }
 
 .uiButton_defaultSize {
-  min-height: 40px;
+  min-height: 44px;
   padding: 0 14px;
 }
 
@@ -309,164 +309,23 @@ body {
   color: var(--muted-foreground);
 }
 
-.landingShell,
-.portalChooserShell,
-.roleLoginShell {
-  min-height: 100svh;
-  width: min(1240px, calc(100% - 32px));
-  margin: 0 auto;
-  display: grid;
-  align-content: start;
-  gap: 18px;
-  padding: 18px 0 42px;
-}
 
-.landingNav {
-  min-height: 58px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 14px;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: color-mix(in srgb, var(--surface) 88%, transparent);
-  padding: 8px;
-}
 
-.landingNav.compact {
-  border: 0;
-  background: transparent;
-  padding: 0;
-}
 
-.landingBrand,
-.landingNav > div,
-.landingActions,
-.portalGrid a,
-.portalChoiceGrid a,
-.switchPortalLink {
-  text-decoration: none;
-}
 
-.landingBrand {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  color: var(--ink);
-  padding: 0 8px;
-}
 
-.landingBrand span {
-  width: 36px;
-  height: 36px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 8px;
-  background: var(--ink);
-  color: var(--surface);
-  font-weight: 900;
-}
 
-.landingNav > div,
-.landingActions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
 
-.landingNav a:not(.landingBrand),
-.landingActions a,
-.switchPortalLink {
-  min-height: 40px;
-  display: inline-flex;
-  align-items: center;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: var(--surface-soft);
-  color: var(--ink);
-  padding: 0 12px;
-  font-weight: 900;
-  white-space: nowrap;
-}
 
-.landingNav .themeToggle,
-.landingNav.compact .themeToggle,
-.loginMasthead .loginThemeToggle {
-  width: auto;
-  min-width: 112px;
-  padding: 0 12px;
-}
 
-.landingActions a.primary {
-  border-color: var(--ink);
-  background: var(--ink);
-  color: var(--surface);
-}
 
-.landingHero {
-  min-height: min(720px, calc(100svh - 100px));
-  display: grid;
-  grid-template-columns: minmax(360px, 0.95fr) minmax(0, 1.05fr);
-  align-items: center;
-  gap: 22px;
-}
 
-.landingHeroMedia {
-  min-height: 560px;
-  display: grid;
-  place-items: center;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  overflow: hidden;
-  background:
-    linear-gradient(135deg, color-mix(in srgb, var(--blue) 16%, transparent), transparent 42%),
-    radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--green) 18%, transparent), transparent 34%),
-    var(--surface);
-}
 
-.landingMockWindow {
-  width: min(520px, calc(100% - 36px));
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: color-mix(in srgb, var(--surface) 92%, transparent);
-  box-shadow: var(--shadow);
-  overflow: hidden;
-}
 
-.landingMockBar,
-.landingSearchDemo,
-.landingResultDemo div {
-  border-bottom: 1px solid var(--line);
-}
 
-.landingMockBar {
-  min-height: 48px;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 0 14px;
-}
 
-.landingMockBar span {
-  width: 10px;
-  height: 10px;
-  border-radius: 999px;
-  background: var(--rose);
-  box-shadow: 18px 0 0 var(--amber), 36px 0 0 var(--green);
-}
 
-.landingSearchDemo {
-  display: grid;
-  gap: 7px;
-  padding: 18px;
-}
 
-.landingSearchDemo span,
-.landingResultDemo span,
-.portalGrid span,
-.portalChoiceGrid span,
-.searchSignalGrid span,
 .lockedRole span {
   color: var(--blue);
   font-size: 11px;
@@ -474,132 +333,29 @@ body {
   text-transform: uppercase;
 }
 
-.landingSearchDemo strong {
-  font-size: 36px;
-}
 
-.landingSearchDemo small,
-.landingResultDemo strong {
-  color: var(--muted);
-}
 
-.landingResultDemo {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
 
-.landingResultDemo div {
-  min-height: 100px;
-  display: grid;
-  align-content: center;
-  gap: 6px;
-  border-right: 1px solid var(--line);
-  padding: 14px;
-}
 
-.landingResultDemo div:nth-child(2n) {
-  border-right: 0;
-}
 
-.landingHeroCopy h1,
 .portalChooserHero h1,
-.roleLoginIntro h1 {
-  max-width: 760px;
-  font-size: clamp(42px, 5vw, 76px);
-  line-height: 0.96;
-  margin-bottom: 14px;
-}
 
-.landingHeroCopy p:not(.eyebrow),
 .portalChooserHero p:not(.eyebrow),
-.roleLoginIntro p:not(.eyebrow),
-.landingSearchSection p {
-  max-width: 720px;
-  color: var(--muted);
-  font-size: 17px;
-  line-height: 1.55;
-}
 
-.portalGrid,
-.portalChoiceGrid {
-  display: grid;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
-  gap: 10px;
-}
 
-.portalGrid a,
-.portalChoiceGrid a,
-.searchSignalGrid article {
-  min-width: 0;
-  display: grid;
-  align-content: start;
-  gap: 8px;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: var(--surface);
-  color: var(--ink);
-  padding: 14px;
-}
 
-.portalGrid a:hover,
-.portalChoiceGrid a:hover {
-  border-color: var(--blue);
-  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
-}
 
-.portalGrid strong,
-.portalChoiceGrid strong {
-  line-height: 1.2;
-}
 
-.portalGrid small,
-.portalChoiceGrid small {
-  color: var(--muted);
-  line-height: 1.4;
-}
 
-.landingSearchSection {
-  display: grid;
-  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
-  gap: 16px;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: var(--surface);
-  padding: 18px;
-}
 
-.landingSearchSection h2 {
-  font-size: 34px;
-  line-height: 1.05;
-}
 
-.searchSignalGrid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px;
-}
 
 .portalChooserHero {
   max-width: 820px;
   padding: 42px 0 12px;
 }
 
-.roleLoginShell {
-  grid-template-columns: minmax(0, 1fr) minmax(420px, 500px);
-  align-items: center;
-  min-height: 100svh;
-}
 
-.roleLoginIntro {
-  min-height: calc(100svh - 36px);
-  display: grid;
-  align-content: space-between;
-  gap: 22px;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: color-mix(in srgb, var(--surface) 82%, transparent);
-  padding: 24px;
-}
 
 [data-theme="dark"] .topbar,
 [data-theme="dark"] .accountBox,
@@ -1004,14 +760,6 @@ h2 {
 }
 
 .accountBox button,
-.loginForm button {
-  min-height: 38px;
-  border: 0;
-  background: var(--blue);
-  color: #fff;
-  font-weight: 700;
-  cursor: pointer;
-}
 
 .accountBox button {
   width: 100%;
@@ -1029,26 +777,8 @@ h2 {
   padding: 28px 0;
 }
 
-.loginBrandPanel {
-  min-height: calc(100svh - 56px);
-  display: grid;
-  align-content: space-between;
-  gap: 34px;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: color-mix(in srgb, var(--surface) 78%, transparent);
-  padding: 28px;
-}
 
-.loginMasthead {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-}
 
-.loginMasthead .loginThemeToggle {
-  margin-left: auto;
-}
 
 .brandMark {
   width: 44px;
@@ -1061,16 +791,8 @@ h2 {
   font-weight: 900;
 }
 
-.loginMasthead div {
-  display: grid;
-  gap: 3px;
-}
 
-.loginMasthead strong {
-  font-size: 18px;
-}
 
-.loginMasthead small,
 .loginSignal span,
 .loginProof span {
   color: var(--muted);
@@ -1105,49 +827,11 @@ h2 {
   background: #fff;
 }
 
-.loginPath {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  overflow: hidden;
-  background: var(--surface);
-}
 
-.loginPath article {
-  min-height: 128px;
-  display: grid;
-  align-content: start;
-  gap: 8px;
-  border-right: 1px solid var(--line);
-  padding: 16px;
-}
 
-.loginPath article:last-child {
-  border-right: 0;
-}
 
-.loginPath span {
-  width: 26px;
-  height: 26px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 999px;
-  background: #eef5ff;
-  color: var(--blue);
-  font-size: 12px;
-  font-weight: 900;
-}
 
-.loginPath strong {
-  font-size: 15px;
-}
 
-.loginPath small {
-  color: var(--muted);
-  line-height: 1.4;
-}
 
 .loginProof div {
   min-height: 104px;
@@ -1187,64 +871,14 @@ h2 {
   font-size: 14px;
 }
 
-.loginPanel {
-  border: 1px solid #c5cfdd;
-  border-radius: 8px;
-  background: var(--surface);
-  box-shadow: 0 30px 90px rgba(16, 24, 40, 0.16);
-}
 
-.loginStack {
-  display: grid;
-  gap: 14px;
-}
 
-.loginForm {
-  display: grid;
-  gap: 18px;
-  padding: 30px;
-}
 
-.loginFormHeader {
-  display: grid;
-  gap: 7px;
-  padding-bottom: 8px;
-}
 
-.loginFormHeader strong {
-  font-size: 28px;
-  line-height: 1.1;
-}
 
-.loginFormHeader p {
-  color: var(--muted);
-  line-height: 1.45;
-  margin: 0;
-}
 
-.loginFormHeader span {
-  color: var(--blue);
-  font-size: 12px;
-  font-weight: 900;
-  text-transform: uppercase;
-}
 
-.loginFormHeader small {
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: color-mix(in srgb, var(--green) 10%, var(--surface));
-  color: var(--ink);
-  padding: 10px 12px;
-  line-height: 1.4;
-}
 
-.loginForm label {
-  display: grid;
-  gap: 8px;
-  color: var(--muted);
-  font-size: 13px;
-  font-weight: 700;
-}
 
 .rolePicker {
   display: grid;
@@ -1339,39 +973,10 @@ h2 {
   font-size: 12px;
 }
 
-.loginForm input,
-.loginForm select {
-  width: 100%;
-  min-height: 50px;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: var(--surface-soft);
-  color: var(--ink);
-  padding: 0 14px;
-  font: inherit;
-}
 
-.loginForm input:focus,
-.loginForm select:focus {
-  outline: 3px solid rgba(11, 99, 206, 0.14);
-  border-color: var(--blue);
-  background: var(--surface);
-}
 
-.loginForm button {
-  min-height: 52px;
-  border-radius: 8px;
-  background: var(--blue);
-}
 
-.loginForm button:hover {
-  background: var(--blue-deep);
-}
 
-.loginForm button:disabled {
-  cursor: wait;
-  opacity: 0.7;
-}
 
 .formError {
   color: var(--rose);
@@ -1477,110 +1082,24 @@ h2 {
   color: var(--muted-foreground);
 }
 
-.unifiedLoginShell {
-  align-items: start;
-}
 
-.unifiedLoginShell .landingNav {
-  grid-column: 1 / -1;
-}
 
-.unifiedLoginIntro {
-  min-height: auto;
-}
 
-.unifiedLoginPanel {
-  align-self: start;
-}
 
-.verifiedAccounts {
-  display: grid;
-  gap: 10px;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: var(--surface);
-  padding: 18px;
-}
 
-.verifiedAccounts > div {
-  display: grid;
-  gap: 4px;
-}
 
-.verifiedAccounts span {
-  color: var(--blue);
-  font-size: 12px;
-  font-weight: 900;
-  text-transform: uppercase;
-}
 
-.verifiedAccounts p {
-  color: var(--muted);
-  margin: 0;
-}
 
-.verifiedAccounts form {
-  margin: 0;
-}
 
-.verifiedAccounts button {
-  width: 100%;
-  min-height: 72px;
-  display: grid;
-  gap: 4px;
-  text-align: left;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: var(--surface-soft);
-  color: var(--ink);
-  padding: 12px 14px;
-  cursor: pointer;
-}
 
-.verifiedAccounts button:hover {
-  border-color: var(--blue);
-  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
-}
 
-.verifiedAccounts button strong {
-  font-size: 16px;
-}
 
-.verifiedAccounts button small {
-  color: var(--muted);
-}
 
-.unifiedLoginNotes {
-  grid-column: 1 / -1;
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 10px;
-}
 
-.unifiedLoginNotes article {
-  display: grid;
-  gap: 5px;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: var(--surface);
-  padding: 14px;
-}
 
-.unifiedLoginNotes span {
-  color: var(--muted);
-  font-size: 12px;
-  font-weight: 800;
-  text-transform: uppercase;
-}
 
-.unifiedLoginNotes strong {
-  font-size: 14px;
-}
 
 @media (max-width: 760px) {
-  .unifiedLoginNotes {
-    grid-template-columns: 1fr;
-  }
 }
 
 .environment span,
@@ -5494,14 +5013,6 @@ kbd {
     grid-template-columns: 1fr;
   }
 
-  .loginBrandPanel {
-    align-content: start;
-    align-self: start;
-    min-height: 0;
-    height: auto;
-    gap: 14px;
-    padding: 22px 24px;
-  }
 
   .loginHero h1 {
     max-width: 560px;
@@ -5535,38 +5046,12 @@ kbd {
     padding: 16px 0 32px;
   }
 
-  .landingHero,
-  .landingSearchSection,
-  .roleLoginShell {
-    grid-template-columns: 1fr;
-  }
-
-  .landingHero {
-    min-height: 0;
-  }
 
-  .landingHeroMedia {
-    min-height: 420px;
-    order: 2;
-  }
 
-  .portalGrid,
-  .portalChoiceGrid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
 
-  .roleLoginIntro {
-    min-height: 0;
-  }
 
-  .loginForm {
-    gap: 14px;
-    padding: 24px;
-  }
 
-  .loginFormHeader strong {
-    font-size: 26px;
-  }
+
 
   .studentOS {
     grid-template-columns: 1fr;
@@ -6498,50 +5983,14 @@ kbd {
     border-top: 1px solid var(--line);
   }
 
-  .landingShell,
-  .portalChooserShell,
-  .roleLoginShell {
-    width: min(100% - 20px, 720px);
-    padding: 10px 0 28px;
-  }
 
-  .landingNav,
-  .landingNav > div,
-  .landingActions {
-    align-items: stretch;
-    flex-direction: column;
-  }
 
-  .landingBrand {
-    min-height: 42px;
-  }
 
-  .landingHeroCopy h1,
   .portalChooserHero h1,
-  .roleLoginIntro h1 {
-    font-size: 38px;
-  }
 
-  .landingHeroMedia {
-    min-height: 340px;
-  }
 
-  .portalGrid,
-  .portalChoiceGrid,
-  .searchSignalGrid,
-  .landingResultDemo {
-    grid-template-columns: 1fr;
-  }
 
-  .landingResultDemo div,
-  .landingResultDemo div:nth-child(2n),
-  .loginPath article {
-    border-right: 0;
-  }
 
-  .loginPath {
-    grid-template-columns: 1fr;
-  }
 
   .row {
     grid-template-columns: 1fr;
@@ -6757,254 +6206,42 @@ kbd {
 }
 
 /* Public product entry points */
-.landingShell {
-  width: min(1320px, calc(100% - 28px));
-  gap: 16px;
-}
 
-.landingNav {
-  position: sticky;
-  top: 12px;
-  z-index: 20;
-  min-height: 62px;
-  border-color: color-mix(in srgb, var(--line) 84%, transparent);
-  background: color-mix(in srgb, var(--surface) 92%, transparent);
-  box-shadow: 0 18px 50px rgba(16, 24, 40, 0.08);
-}
 
-.landingNav a:not(.landingBrand),
-.landingActions a,
-.switchPortalLink {
-  text-decoration: none;
-}
 
-.landingNav a:not(.landingBrand):hover,
-.landingActions a:hover,
-.switchPortalLink:hover {
-  border-color: var(--blue);
-  color: var(--blue);
-}
 
-.landingHero {
-  position: relative;
-  min-height: min(760px, calc(100svh - 96px));
-  display: grid;
-  grid-template-columns: 1fr;
-  align-items: center;
-  overflow: hidden;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: var(--surface);
-  padding: clamp(22px, 5vw, 76px);
-}
 
-.landingHero::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background:
-    linear-gradient(90deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 94%, transparent) 38%, transparent 78%),
-    linear-gradient(180deg, transparent 72%, var(--surface) 100%);
-  pointer-events: none;
-}
 
-.landingHeroStage {
-  position: absolute;
-  inset: 0;
-  display: grid;
-  place-items: center end;
-  padding: clamp(20px, 4vw, 58px);
-  opacity: 0.96;
-}
 
-.landingOpsFrame {
-  width: min(880px, 72vw);
-  min-height: 510px;
-  display: grid;
-  grid-template-columns: 132px minmax(0, 1fr) 220px;
-  gap: 10px;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: color-mix(in srgb, var(--surface-soft) 92%, transparent);
-  box-shadow: var(--shadow);
-  padding: 10px;
-}
 
-.landingOpsRail,
-.landingOpsMain,
-.landingOpsAside {
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: color-mix(in srgb, var(--surface) 94%, transparent);
-}
 
-.landingOpsRail {
-  display: grid;
-  align-content: start;
-  gap: 8px;
-  padding: 12px;
-}
 
-.landingOpsRail span {
-  min-height: 36px;
-  display: flex;
-  align-items: center;
-  border-radius: 7px;
-  color: var(--muted);
-  font-size: 12px;
-  font-weight: 900;
-  padding: 0 10px;
-}
 
-.landingOpsRail span:first-child {
-  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
-  color: var(--blue);
-}
 
-.landingOpsMain {
-  display: grid;
-  align-content: start;
-  gap: 10px;
-  padding: 14px;
-}
 
-.landingOpsSearch {
-  min-height: 170px;
-  display: grid;
-  align-content: end;
-  gap: 8px;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: var(--surface-soft);
-  padding: 18px;
-}
 
-.landingOpsSearch span,
-.landingOpsColumns span,
-.landingOpsAside span,
 .portalChooserPromise span,
-.roleLoginPromise span,
-.landingHeroStats span {
-  color: var(--blue);
-  font-size: 11px;
-  font-weight: 900;
-  text-transform: uppercase;
-}
 
-.landingOpsSearch strong {
-  font-size: clamp(42px, 6vw, 76px);
-  line-height: 0.88;
-}
 
-.landingOpsSearch small,
-.landingOpsAside small {
-  color: var(--muted);
-}
 
-.landingOpsColumns {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 10px;
-}
 
-.landingOpsColumns div {
-  min-height: 138px;
-  display: grid;
-  align-content: space-between;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: var(--surface);
-  padding: 14px;
-}
 
-.landingOpsColumns strong {
-  font-size: 24px;
-}
 
-.landingOpsAside {
-  display: grid;
-  align-content: end;
-  gap: 8px;
-  padding: 16px;
-}
 
-.landingOpsAside strong {
-  font-size: 22px;
-  line-height: 1.08;
-}
 
-.landingHeroCopy {
-  position: relative;
-  z-index: 2;
-  max-width: 690px;
-}
 
-.landingHeroCopy h1,
 .portalChooserHero h1,
-.roleLoginIntro h1 {
-  margin-top: 0;
-  font-size: clamp(44px, 6.4vw, 92px);
-  line-height: 0.94;
-}
 
-.landingHeroCopy p:not(.eyebrow) {
-  max-width: 620px;
-  font-size: clamp(17px, 1.7vw, 21px);
-}
 
-.landingActions a {
-  min-height: 46px;
-  padding: 0 16px;
-}
 
-.landingHeroStats,
 .portalChooserPromise,
-.roleLoginPromise {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 18px;
-}
 
-.landingHeroStats span,
 .portalChooserPromise span,
-.roleLoginPromise span {
-  min-height: 32px;
-  display: inline-flex;
-  align-items: center;
-  border: 1px solid var(--line);
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--surface) 88%, transparent);
-  padding: 0 12px;
-}
 
-.portalGrid {
-  grid-template-columns: repeat(5, minmax(0, 1fr));
-}
 
-.portalGrid a,
-.portalChoiceGrid a,
-.searchSignalGrid article {
-  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
-}
 
-.portalGrid a:hover,
-.portalChoiceGrid a:hover,
-.searchSignalGrid article:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 16px 45px rgba(16, 24, 40, 0.1);
-}
 
-.landingSearchSection {
-  align-items: center;
-  border-radius: 8px;
-  background: color-mix(in srgb, var(--surface) 94%, transparent);
-  box-shadow: 0 18px 60px rgba(16, 24, 40, 0.08);
-}
 
-.portalChooserShell {
-  width: min(1160px, calc(100% - 28px));
-}
 
 .portalChooserHero {
   max-width: 900px;
@@ -7015,53 +6252,15 @@ kbd {
   max-width: 900px;
 }
 
-.portalChoiceGrid {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
 
-.portalChoiceGrid a {
-  min-height: 150px;
-  padding: 18px;
-}
 
-.roleLoginShell {
-  width: min(1160px, calc(100% - 28px));
-  grid-template-columns: minmax(0, 1fr) minmax(400px, 500px);
-  gap: 16px;
-}
 
-.roleLoginIntro {
-  overflow: hidden;
-  background:
-    linear-gradient(135deg, color-mix(in srgb, var(--blue) 9%, transparent), transparent 48%),
-    var(--surface);
-}
 
-.roleLoginIntro h1 {
-  max-width: 760px;
-}
 
-.appLoginPanel {
-  box-shadow: 0 24px 80px rgba(16, 24, 40, 0.14);
-}
 
-.loginForm {
-  gap: 16px;
-}
 
-.loginFormHeader strong {
-  font-size: 30px;
-}
 
-.loginForm input {
-  min-height: 54px;
-}
 
-.loginForm button {
-  border: 0;
-  color: #fff;
-  font-weight: 900;
-}
 
 [data-theme="dark"] .landingHero::after {
   background:
@@ -7083,122 +6282,7 @@ kbd {
   background-color: var(--surface);
 }
 
-@media (max-width: 1040px) {
-  .landingHero {
-    min-height: auto;
-    padding: 28px;
-  }
-
-  .landingHero::after {
-    background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 94%, transparent) 56%, var(--surface) 100%);
-  }
-
-  .landingHeroStage {
-    position: relative;
-    min-height: 360px;
-    order: 2;
-    padding: 18px 0 0;
-  }
-
-  .landingHeroCopy {
-    max-width: none;
-  }
-
-  .landingOpsFrame {
-    width: 100%;
-    min-height: 360px;
-    grid-template-columns: 92px minmax(0, 1fr);
-  }
-
-  .landingOpsAside {
-    display: none;
-  }
-
-  .portalGrid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .landingSearchSection,
-  .roleLoginShell {
-    grid-template-columns: 1fr;
-  }
-
-  .roleLoginIntro {
-    min-height: auto;
-  }
-}
-
-@media (max-width: 680px) {
-  .landingShell,
-  .portalChooserShell,
-  .roleLoginShell {
-    width: min(100% - 20px, 720px);
-  }
-
-  .landingNav {
-    position: static;
-    align-items: stretch;
-    flex-direction: column;
-  }
-
-  .landingNav > div,
-  .landingActions {
-    align-items: stretch;
-    flex-direction: column;
-  }
-
-  .landingNav a:not(.landingBrand),
-  .landingNav .themeToggle {
-    justify-content: center;
-  }
-
-  .landingHero {
-    padding: 18px;
-  }
-
-  .landingHeroCopy h1,
-  .portalChooserHero h1,
-  .roleLoginIntro h1 {
-    font-size: 40px;
-  }
-
-  .landingOpsFrame {
-    grid-template-columns: 1fr;
-  }
-
-  .landingOpsRail {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-
-  .landingOpsRail span {
-    justify-content: center;
-    padding: 0 6px;
-  }
-
-  .landingOpsColumns,
-  .portalGrid,
-  .portalChoiceGrid,
-  .searchSignalGrid {
-    grid-template-columns: 1fr;
-  }
-
-  .landingOpsColumns div {
-    min-height: 92px;
-  }
-
-  .roleLoginShell {
-    grid-template-columns: 1fr;
-  }
-
-  .roleLoginIntro,
-  .loginForm {
-    padding: 18px;
-  }
-}
 
-.switchPortalLink {
-  justify-self: start;
-}
 
 .journeyWorkbench .previewPanel {
   grid-column: 1 / -1;
@@ -7216,18 +6300,8 @@ kbd {
 }
 
 @media (min-width: 760px) and (max-width: 1040px) {
-  .roleLoginShell {
-    grid-template-columns: minmax(0, 0.9fr) minmax(340px, 0.72fr);
-    align-items: center;
-  }
 
-  .roleLoginIntro {
-    min-height: calc(100svh - 36px);
-  }
 
-  .roleLoginIntro h1 {
-    font-size: clamp(42px, 5.2vw, 64px);
-  }
 }
 
 /* Candidate search operating system */
@@ -8628,7 +7702,7 @@ kbd {
 }
 
 .candidateProfileActions a {
-  min-height: 36px;
+  min-height: 44px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
new file mode 100644
index 0000000..bcad8bf
--- /dev/null
+++ b/src/components/ui/label.tsx
@@ -0,0 +1,16 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+function Label({ className, ...props }: React.LabelHTMLAttributes<HTMLLabelElement>) {
+  return (
+    <label
+      className={cn(
+        "text-[13px] font-bold text-muted-foreground leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };
diff --git a/src/modules/auth/LoginForm.tsx b/src/modules/auth/LoginForm.tsx
index 9fff4e0..9d68bda 100644
--- a/src/modules/auth/LoginForm.tsx
+++ b/src/modules/auth/LoginForm.tsx
@@ -1,48 +1,62 @@
 "use client";
 
 import { useActionState } from "react";
+import { LogIn } from "lucide-react";
 import { chooseAccountAction, loginAction } from "./actions";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import type { LoginAccountChoice } from "./types";
 
-export function LoginForm({ hint }: { hint?: string }) {
+export function LoginForm() {
   const [state, action, pending] = useActionState(loginAction, {});
   const accounts = state.accounts ?? [];
 
   return (
-    <div className="loginStack">
-      <form action={action} className="loginForm">
-        <div className="loginFormHeader">
-          <span>Secure sign in</span>
-          <strong>Continue to StudentHub</strong>
-          <p>
+    <div className="grid gap-[14px]">
+      <form action={action} className="grid gap-[18px] p-[30px]">
+        <div className="grid gap-[7px] pb-2">
+          <span className="text-[var(--blue)] text-xs font-black uppercase">Secure sign in</span>
+          <strong className="text-[28px] leading-[1.1]">Continue to StudentHub</strong>
+          <p className="text-[var(--muted)] leading-relaxed m-0">
             Use your existing production credentials. StudentHub will detect the right account and permissions after
             your password is verified.
           </p>
-          {hint ? <small>{hint}</small> : null}
         </div>
 
-        <label>
-          Email
-          <input
+        <div className="grid gap-2">
+          <Label htmlFor="login-email">Email</Label>
+          <Input
+            id="login-email"
             name="email"
             type="email"
             autoComplete="email"
             defaultValue={state.email ?? ""}
             placeholder="name@studenthub.app"
             required
+            className="min-h-[46px]"
           />
-        </label>
+        </div>
 
-        <label>
-          Password
-          <input name="password" type="password" autoComplete="current-password" placeholder="Your password" required />
-        </label>
+        <div className="grid gap-2">
+          <Label htmlFor="login-password">Password</Label>
+          <Input
+            id="login-password"
+            name="password"
+            type="password"
+            autoComplete="current-password"
+            placeholder="Your password"
+            required
+            className="min-h-[46px]"
+          />
+        </div>
 
-        {state.error ? <p className="formError">{state.error}</p> : null}
+        {state.error ? <p className="text-[var(--destructive)] font-bold m-0">{state.error}</p> : null}
 
-        <button type="submit" disabled={pending} className="primaryButton">
+        <Button type="submit" disabled={pending} size="lg" className="min-h-[52px]">
+          <LogIn className="size-4" />
           {pending ? "Checking credentials..." : "Sign in"}
-        </button>
+        </Button>
       </form>
 
       {accounts.length ? <VerifiedAccountChooser accounts={accounts} /> : null}
@@ -52,20 +66,25 @@ export function LoginForm({ hint }: { hint?: string }) {
 
 function VerifiedAccountChooser({ accounts }: { accounts: LoginAccountChoice[] }) {
   return (
-    <section className="verifiedAccounts" aria-label="Verified StudentHub accounts">
-      <div>
-        <span>Verified accounts</span>
-        <strong>Choose where to continue</strong>
-        <p>Your password matched more than one active account. Only verified accounts are shown here.</p>
+    <section className="grid gap-[14px] p-[30px] pt-0 border-t border-[var(--line)]" aria-label="Verified StudentHub accounts">
+      <div className="grid gap-[7px]">
+        <span className="text-[var(--blue)] text-xs font-black uppercase">Verified accounts</span>
+        <strong className="text-[28px] leading-[1.1]">Choose where to continue</strong>
+        <p className="text-[var(--muted)] leading-relaxed m-0">Your password matched more than one active account. Only verified accounts are shown here.</p>
       </div>
       {accounts.map((account) => (
         <form action={chooseAccountAction} key={account.accountKey}>
           <input name="accountKey" type="hidden" value={account.accountKey} />
-          <button type="submit">
-            <span>{account.label}</span>
-            <strong>{account.name}</strong>
-            <small>{account.email}</small>
-          </button>
+          <Button
+            type="submit"
+            variant="outline"
+            className="w-full min-h-[62px] justify-start h-auto p-3 gap-3 text-left"
+          >
+            <span className="grid gap-1 min-w-0">
+              <strong className="text-sm">{account.name}</strong>
+              <small className="text-[var(--muted)] text-xs font-normal">{account.email}</small>
+            </span>
+          </Button>
         </form>
       ))}
     </section>