diff --git a/frontend/src/app/pages/landing/landing.component.html b/frontend/src/app/pages/landing/landing.component.html
index e5bc125..3cb3bd5 100644
--- a/frontend/src/app/pages/landing/landing.component.html
+++ b/frontend/src/app/pages/landing/landing.component.html
@@ -1,7 +1,4 @@
 <main class="landing-shell">
-  <div class="landing-orb landing-orb--purple"></div>
-  <div class="landing-orb landing-orb--azure"></div>
-
   <nav class="landing-nav" aria-label="Primary navigation">
     <a routerLink="/" class="brand" aria-label="EchoEd home">
       <span>EE</span>
@@ -9,150 +6,104 @@
     </a>
 
     <div class="nav-links">
-      <a href="#demo">Today&apos;s Demo</a>
-      <a href="#roadmap">Roadmap</a>
-      <a href="#walkthrough">Walkthrough</a>
+      <a href="#product">Product</a>
+      <a href="#solutions">Solutions</a>
+      <a href="#demo">Demo</a>
+      <a href="#resources">Resources</a>
+      <a href="#about">About</a>
     </div>
 
     <div class="auth-links">
       <a routerLink="/login" class="ghost-link">Sign in</a>
-      <a routerLink="/registration" class="nav-cta">Create account</a>
+      <a routerLink="/registration" class="nav-cta">Book a Demo</a>
     </div>
   </nav>
 
   <section class="hero" aria-labelledby="landing-title">
     <div class="hero-copy">
-      <p class="eyebrow">AI-native learning product platform</p>
-      <h1 id="landing-title">Transform expert knowledge into trusted learning products.</h1>
+      <p class="eyebrow"><span></span>K-5 Demo Experience</p>
+      <h1 id="landing-title">EchoEd - Beautiful learning journeys rooted in <em>African & African-American history.</em></h1>
       <p class="hero-lede">
-        EchoEd gives schools, enterprises, teachers, parents, and investors a premium command center for
-        knowledge intake, governed review, learner delivery, and product health.
+        Culturally grounded curriculum, intuitive dashboards, and immersive lessons that scale across classrooms, homes, and communities.
       </p>
 
       <div class="hero-actions" aria-label="Primary calls to action">
-        <a routerLink="/registration" class="button button--primary">Schedule Demo</a>
-        <a routerLink="/login" class="button button--secondary">Launch Demo</a>
+        <a routerLink="/registration" class="button button--primary">Book a Demo <span aria-hidden="true">-&gt;</span></a>
+        <a routerLink="/login" class="button button--secondary">Explore EchoEd</a>
       </div>
 
-      <div class="audience-row" aria-label="Audience fit">
-        <span *ngFor="let audience of audienceCards">{{ audience }}</span>
-      </div>
+      <a routerLink="/login" class="tour-link">Start Demo Tour <span aria-hidden="true">-&gt;</span></a>
     </div>
 
-    <aside class="feature-panel" aria-label="EchoEd platform preview">
+    <aside class="feature-panel" aria-label="EchoEd demo preview">
       <div class="panel-header">
-        <span>Live platform model</span>
-        <strong>V2 Demo Ready</strong>
+        <span>Demo Mode</span>
+        <strong>K-5 Preview</strong>
       </div>
 
       <div class="signal-grid">
-        <article>
-          <span>Products</span>
-          <strong>Ready</strong>
-        </article>
-        <article>
-          <span>Review</span>
-          <strong>Governed</strong>
-        </article>
-        <article>
-          <span>Access</span>
-          <strong>Granted</strong>
-        </article>
-        <article>
-          <span>Analytics</span>
-          <strong>Live</strong>
-        </article>
-      </div>
-
-      <div class="animated-stack">
         <article *ngFor="let card of animatedCards; let i = index" [style.--i]="i">
-          <span>{{ card.label }}</span>
-          <strong>{{ card.value }}</strong>
-          <p>{{ card.detail }}</p>
+          <span class="mini-icon" aria-hidden="true"></span>
+          <strong>{{ card.label }}</strong>
+          <p>{{ card.value }}</p>
         </article>
       </div>
-    </aside>
-  </section>
-
-  <section class="feature-grid" aria-labelledby="feature-title">
-    <div class="section-heading">
-      <p class="eyebrow">Premium workspace</p>
-      <h2 id="feature-title">Built for the people deciding what learning becomes.</h2>
-    </div>
-
-    <article *ngFor="let feature of featureHighlights">
-      <span>{{ feature.kicker }}</span>
-      <h3>{{ feature.title }}</h3>
-      <p>{{ feature.description }}</p>
-    </article>
-  </section>
 
-  <section class="split-section" id="demo" aria-labelledby="demo-title">
-    <article class="demo-card demo-card--primary">
-      <p class="eyebrow">Today&apos;s Demo</p>
-      <h2 id="demo-title">A coherent end-to-end V2 walkthrough.</h2>
-      <p>
-        Show a workspace, project, knowledge sources, artifacts, product wrapper, review status,
-        access grant, learner visibility, and analytics without empty screens.
-      </p>
-      <a routerLink="/login" class="button button--light">Launch Demo</a>
-    </article>
-
-    <article class="demo-card" id="roadmap">
-      <p class="eyebrow">Roadmap</p>
-      <h2>What comes next.</h2>
-      <div class="roadmap-list">
-        <div *ngFor="let item of roadmap">
-          <strong>{{ item.title }}</strong>
-          <span>{{ item.detail }}</span>
+      <div class="trust-strip">
+        <span aria-hidden="true">EE</span>
+        <div>
+          <strong>Secure, accessible, and WCAG AA conscious</strong>
+          <p>Built for the trust of school leaders and families.</p>
         </div>
       </div>
-    </article>
+    </aside>
   </section>
 
-  <section class="testimonials" aria-labelledby="testimonial-title">
-    <div class="section-heading">
-      <p class="eyebrow">Testimonials</p>
-      <h2 id="testimonial-title">A product story that resonates across buyers.</h2>
-    </div>
-
-    <article *ngFor="let testimonial of testimonials">
-      <p>&quot;{{ testimonial.quote }}&quot;</p>
+  <section class="feature-grid" id="product" aria-label="EchoEd highlights">
+    <article *ngFor="let feature of featureHighlights; let i = index">
+      <span class="feature-icon" aria-hidden="true">{{ feature.kicker }}</span>
       <div>
-        <strong>{{ testimonial.name }}</strong>
-        <span>{{ testimonial.role }}</span>
+        <h2>{{ feature.title }}</h2>
+        <p>{{ feature.description }}</p>
       </div>
     </article>
   </section>
 
-  <section class="walkthrough" id="walkthrough" aria-labelledby="walkthrough-title">
-    <div>
-      <p class="eyebrow">Walkthrough</p>
-      <h2 id="walkthrough-title">Five minutes from knowledge command center to learner delivery.</h2>
-      <p>
-        The demo is designed to explain EchoEd itself: knowledge in, AI understanding prepared,
-        review and governance, product publishing, learner delivery, and analytics.
-      </p>
+  <section class="demo-section" id="demo" aria-labelledby="demo-title">
+    <div class="demo-heading">
+      <div>
+        <p class="eyebrow"><span></span>Live K-5 Demo Today</p>
+        <h2 id="demo-title">Today's Demo vs. What's Next</h2>
+        <p>Investors and school leaders can see the live K-5 experience, plus a clear roadmap to upper grades.</p>
+      </div>
+      <div class="audience-row" aria-label="Roadmap status">
+        <span *ngFor="let audience of audienceCards">{{ audience }}</span>
+      </div>
     </div>
 
-    <ol>
-      <li *ngFor="let step of walkthroughSteps; let i = index">
-        <span>{{ i + 1 }}</span>
-        <p>{{ step }}</p>
-      </li>
-    </ol>
-  </section>
-
-  <section class="final-cta" aria-labelledby="cta-title">
-    <p class="eyebrow">Ready for a closer look?</p>
-    <h2 id="cta-title">See EchoEd as a premium knowledge product platform.</h2>
-    <p>
-      Walk through the V2 dashboard, Product Studio, Review Center, Learner Portal, and Analytics with a
-      demo story built for investors, schools, enterprises, parents, and teachers.
-    </p>
-    <div class="hero-actions">
-      <a routerLink="/registration" class="button button--primary">Schedule Demo</a>
-      <a routerLink="/login" class="button button--secondary">Launch Demo</a>
+    <div class="demo-grid">
+      <article class="demo-card">
+        <p class="card-kicker">Today's Demo</p>
+        <h3>K-5 Experience</h3>
+        <ul>
+          <li>Story-led lessons with activities</li>
+          <li>Dashboards for students, teachers, admins</li>
+          <li>Badges, streaks, and progress insights</li>
+        </ul>
+      </article>
+
+      <article class="demo-card roadmap-card">
+        <p class="card-kicker">Coming Soon</p>
+        <div class="roadmap-list">
+          <div *ngFor="let item of roadmap">
+            <span aria-hidden="true"></span>
+            <div>
+              <strong>{{ item.title }}</strong>
+              <p>{{ item.detail }}</p>
+            </div>
+          </div>
+        </div>
+      </article>
     </div>
   </section>
 </main>
diff --git a/frontend/src/app/pages/landing/landing.component.scss b/frontend/src/app/pages/landing/landing.component.scss
index 3fad6d1..7627a3a 100644
--- a/frontend/src/app/pages/landing/landing.component.scss
+++ b/frontend/src/app/pages/landing/landing.component.scss
@@ -4,82 +4,60 @@
 
 .landing-shell {
   background:
-    radial-gradient(circle at 14% 10%, rgba(124, 58, 237, 0.36), transparent 28rem),
-    radial-gradient(circle at 88% 12%, rgba(92, 200, 255, 0.22), transparent 28rem),
-    radial-gradient(circle at 70% 82%, rgba(244, 201, 93, 0.14), transparent 30rem),
-    linear-gradient(135deg, #050614, #0b1026 48%, #090817);
-  color: #f7f3ff;
+    radial-gradient(circle at 82% 8%, rgba(137, 44, 119, 0.55), transparent 20rem),
+    radial-gradient(circle at 54% 38%, rgba(56, 28, 118, 0.5), transparent 28rem),
+    linear-gradient(180deg, rgba(5, 8, 30, 0.1) 0 58%, rgba(255, 169, 76, 0.18) 59%, rgba(11, 7, 20, 0.96) 72%),
+    linear-gradient(135deg, #05091d, #09072a 46%, #16072a);
+  border: 1px solid rgba(128, 151, 224, 0.44);
+  border-radius: 18px;
+  color: #f8f4ff;
   display: grid;
-  gap: clamp(3rem, 8vw, 6rem);
-  min-height: 100vh;
+  gap: 2rem;
+  margin: min(1.6vw, 1.75rem);
+  min-height: calc(100vh - min(3.2vw, 3.5rem));
   overflow: hidden;
-  padding: clamp(1rem, 3vw, 2rem);
+  padding: clamp(1rem, 3vw, 3rem);
   position: relative;
 }
 
-.landing-shell::before {
-  background:
-    linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
-  background-size: 64px 64px;
+.landing-shell::before,
+.landing-shell::after {
   content: '';
   inset: 0;
   pointer-events: none;
   position: absolute;
 }
 
-.landing-shell > *:not(.landing-orb) {
-  margin-inline: auto;
-  max-width: 1180px;
-  position: relative;
-  width: 100%;
-  z-index: 1;
-}
-
-.landing-orb {
-  border-radius: 999px;
-  filter: blur(20px);
-  opacity: 0.75;
-  pointer-events: none;
-  position: absolute;
-}
-
-.landing-orb--purple {
-  background: rgba(167, 139, 250, 0.18);
-  height: 22rem;
-  left: -8rem;
-  top: 10rem;
-  width: 22rem;
+.landing-shell::before {
+  background:
+    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.6) 0 1px, transparent 2px),
+    radial-gradient(circle at 74% 9%, rgba(255, 188, 120, 0.8) 0 1px, transparent 2px),
+    linear-gradient(160deg, transparent 0 37%, rgba(134, 77, 214, 0.2) 38%, transparent 48%);
+  opacity: 0.5;
 }
 
-.landing-orb--azure {
-  background: rgba(92, 200, 255, 0.14);
-  height: 26rem;
-  right: -10rem;
-  top: 4rem;
-  width: 26rem;
+.landing-shell::after {
+  background:
+    radial-gradient(ellipse at 50% 73%, rgba(244, 128, 67, 0.52), transparent 11rem),
+    linear-gradient(180deg, transparent 63%, rgba(6, 7, 18, 0.32) 64%, #050713 84%);
 }
 
 .landing-nav,
-.feature-panel,
-.feature-grid article,
-.demo-card,
-.testimonials article,
-.walkthrough,
-.final-cta {
-  background: linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.035));
-  backdrop-filter: blur(24px) saturate(1.18);
-  border: 1px solid rgba(184, 197, 255, 0.16);
-  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36);
+.hero,
+.feature-grid,
+.demo-section {
+  margin-inline: auto;
+  max-width: 1420px;
+  position: relative;
+  width: 100%;
+  z-index: 1;
 }
 
 .landing-nav {
   align-items: center;
-  border-radius: 999px;
   display: flex;
   gap: 1rem;
   justify-content: space-between;
-  padding: 0.7rem;
 }
 
 .brand,
@@ -93,108 +71,111 @@
 
 .brand {
   color: #fff;
-  gap: 0.65rem;
+  gap: 0.7rem;
   text-decoration: none;
 }
 
 .brand span {
-  align-items: center;
-  background: linear-gradient(135deg, #7c3aed, #5cc8ff);
-  border-radius: 999px;
-  display: inline-flex;
+  background: linear-gradient(135deg, #6d4be8, #261b5e);
+  border: 1px solid rgba(185, 166, 255, 0.24);
+  border-radius: 10px;
+  box-shadow: 0 10px 24px rgba(89, 50, 212, 0.32);
+  display: grid;
+  font-size: 0.9rem;
   font-weight: 900;
-  height: 2.45rem;
-  justify-content: center;
-  width: 2.45rem;
+  height: 2.35rem;
+  place-items: center;
+  width: 2.35rem;
 }
 
 .brand strong {
-  font-size: 1rem;
+  font-size: 1.35rem;
 }
 
-.nav-links,
-.auth-links {
-  gap: 0.35rem;
+.nav-links {
+  gap: 2.2rem;
 }
 
 .nav-links a,
 .ghost-link,
 .nav-cta,
-.button {
-  border-radius: 999px;
-  color: #f7f3ff;
-  font-weight: 850;
-  min-height: 2.65rem;
-  padding: 0.72rem 1rem;
+.button,
+.tour-link {
+  color: #fff;
+  font-size: 0.88rem;
+  font-weight: 800;
   text-decoration: none;
-  transition:
-    transform var(--ee-duration-base, 180ms) var(--ee-easing-standard, ease),
-    border-color var(--ee-duration-base, 180ms) var(--ee-easing-standard, ease),
-    background var(--ee-duration-base, 180ms) var(--ee-easing-standard, ease),
-    box-shadow var(--ee-duration-base, 180ms) var(--ee-easing-standard, ease);
-}
-
-.nav-links a,
-.ghost-link,
-.button--secondary {
-  background: rgba(255, 255, 255, 0.055);
-  border: 1px solid rgba(184, 197, 255, 0.16);
 }
 
-.nav-cta,
-.button--primary {
-  background: linear-gradient(135deg, #7c3aed, #a78bfa 52%, #5cc8ff);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  box-shadow: 0 16px 38px rgba(92, 200, 255, 0.18);
+.nav-links a::after {
+  content: 'v';
+  font-size: 0.7rem;
+  margin-left: 0.4rem;
 }
 
-.button--light {
-  background: #f7f3ff;
-  color: #0b1026;
+.nav-links a:nth-child(3)::after {
+  content: '';
 }
 
-.nav-links a:hover,
-.ghost-link:hover,
-.nav-cta:hover,
-  .button:hover {
-  transform: var(--ee-hover-lift, translateY(-3px));
+.auth-links {
+  gap: 0.8rem;
 }
 
-.button:active,
-.nav-cta:active,
-.ghost-link:active {
-  transform: var(--ee-press-scale, scale(0.98));
+.ghost-link,
+.nav-cta,
+.button {
+  border-radius: 999px;
+  min-height: 2.75rem;
+  padding: 0.78rem 1.35rem;
 }
 
-.hero-copy {
-  animation: ee-motion-slide-up var(--ee-duration-slow, 260ms) var(--ee-easing-standard, ease) both;
+.ghost-link,
+.button--secondary {
+  background: rgba(12, 12, 38, 0.58);
+  border: 1px solid rgba(213, 202, 255, 0.35);
 }
 
-.feature-panel {
-  animation: ee-motion-card-enter var(--ee-duration-slow, 260ms) var(--ee-easing-emphasized, ease) 80ms both;
+.nav-cta,
+.button--primary {
+  background: linear-gradient(135deg, #ffe28e, #f3ae3d);
+  border: 1px solid rgba(255, 230, 160, 0.8);
+  box-shadow: 0 16px 32px rgba(240, 160, 52, 0.24);
+  color: #160d22;
 }
 
 .hero {
   align-items: center;
   display: grid;
-  gap: clamp(1.5rem, 4vw, 3rem);
-  grid-template-columns: minmax(0, 1.05fr) minmax(21rem, 0.75fr);
+  gap: clamp(2rem, 7vw, 7rem);
+  grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.66fr);
+  min-height: 29rem;
 }
 
 .hero-copy {
   display: grid;
-  gap: 1.25rem;
+  gap: 1.45rem;
+  max-width: 52rem;
 }
 
 .eyebrow {
-  color: #f4c95d;
-  font-size: 0.76rem;
+  align-items: center;
+  color: #c4a9ff;
+  display: flex;
+  font-size: 0.78rem;
   font-weight: 900;
-  letter-spacing: 0.18em;
+  gap: 0.55rem;
+  letter-spacing: 0.12em;
   margin: 0;
   text-transform: uppercase;
 }
 
+.eyebrow span {
+  background: #f3b24d;
+  border-radius: 999px;
+  height: 0.55rem;
+  width: 0.55rem;
+}
+
 h1,
 h2,
 h3,
@@ -203,67 +184,57 @@ p {
 }
 
 h1 {
-  font-size: clamp(3.4rem, 9vw, 7.5rem);
-  letter-spacing: 0;
-  line-height: 0.87;
-  max-width: 10ch;
-}
-
-h2 {
-  font-size: clamp(2rem, 5vw, 4rem);
+  color: #fff;
+  font-size: clamp(3.4rem, 4.35vw, 5rem);
   letter-spacing: 0;
-  line-height: 0.95;
-}
-
-h3 {
-  font-size: 1.35rem;
-  line-height: 1.05;
+  line-height: 0.93;
+  max-width: 13ch;
 }
 
-.hero-lede,
-.section-heading,
-.demo-card p,
-.walkthrough p,
-.final-cta p,
-.feature-grid p,
-.testimonials p,
-.roadmap-list span,
-.animated-stack p {
-  color: #c8c6df;
-  line-height: 1.65;
+h1 em {
+  color: #c49cff;
+  font-style: normal;
 }
 
 .hero-lede {
-  font-size: clamp(1.05rem, 2vw, 1.28rem);
-  max-width: 62ch;
+  color: #eee9ff;
+  font-size: 1.05rem;
+  line-height: 1.65;
+  max-width: 58ch;
 }
 
 .hero-actions {
   flex-wrap: wrap;
-  gap: 0.8rem;
+  gap: 1rem;
 }
 
-.audience-row {
-  flex-wrap: wrap;
-  gap: 0.55rem;
-  max-width: 50rem;
+.button {
+  align-items: center;
+  display: inline-flex;
+  gap: 0.75rem;
+  justify-content: center;
 }
 
-.audience-row span {
-  background: rgba(255, 255, 255, 0.065);
-  border: 1px solid rgba(184, 197, 255, 0.14);
-  border-radius: 999px;
-  color: #ddd4ff;
-  font-size: 0.82rem;
-  font-weight: 800;
-  padding: 0.45rem 0.72rem;
+.tour-link {
+  color: #f5bd63;
+  width: fit-content;
+}
+
+.feature-panel,
+.feature-grid article,
+.demo-section,
+.demo-card {
+  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035));
+  backdrop-filter: blur(24px) saturate(1.2);
+  border: 1px solid rgba(184, 197, 255, 0.18);
+  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
 }
 
 .feature-panel {
-  border-radius: 28px;
+  border-radius: 20px;
   display: grid;
   gap: 1rem;
-  padding: clamp(1rem, 3vw, 1.35rem);
+  padding: 1.35rem;
 }
 
 .panel-header {
@@ -273,18 +244,21 @@ h3 {
 }
 
 .panel-header span,
-.signal-grid span,
-.animated-stack span,
-.feature-grid article span {
-  color: #9694b4;
-  font-size: 0.72rem;
+.card-kicker {
+  color: #b69aff;
+  font-size: 0.75rem;
   font-weight: 900;
   letter-spacing: 0.12em;
   text-transform: uppercase;
 }
 
-.panel-header strong {
-  color: #baf8df;
+.panel-header strong,
+.audience-row span {
+  border: 1px solid rgba(246, 178, 75, 0.58);
+  border-radius: 999px;
+  color: #f6bd64;
+  font-size: 0.78rem;
+  padding: 0.35rem 0.65rem;
 }
 
 .signal-grid {
@@ -293,276 +267,221 @@ h3 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
-.signal-grid article,
-.animated-stack article {
-  background: rgba(255, 255, 255, 0.055);
+.signal-grid article {
+  background: rgba(255, 255, 255, 0.045);
   border: 1px solid rgba(184, 197, 255, 0.14);
-  border-radius: 20px;
+  border-radius: 10px;
   display: grid;
-  gap: 0.2rem;
+  gap: 0.35rem;
+  min-height: 9rem;
   padding: 1rem;
 }
 
-.signal-grid strong,
-.animated-stack strong {
-  color: #f7f3ff;
-}
-
-.animated-stack {
-  display: grid;
-  gap: 0.75rem;
+.mini-icon,
+.feature-icon,
+.roadmap-list span,
+.trust-strip > span {
+  background: linear-gradient(135deg, #7047d9, #2b225c);
+  border: 1px solid rgba(195, 172, 255, 0.25);
+  border-radius: 10px;
+  box-shadow: 0 10px 24px rgba(90, 62, 200, 0.26);
 }
 
-.animated-stack article {
-  animation: ee-motion-card-enter var(--ee-duration-slow, 260ms) var(--ee-easing-standard, ease) both;
-  animation-delay: calc(var(--i) * 55ms + 120ms);
+.mini-icon {
+  height: 1.55rem;
+  width: 1.55rem;
 }
 
-.feature-grid,
-.testimonials {
-  display: grid;
-  gap: 1rem;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+.signal-grid strong,
+.trust-strip strong,
+.demo-card h3 {
+  color: #ffd36c;
+  font-size: 1.08rem;
 }
 
-.section-heading {
-  grid-column: 1 / -1;
-  max-width: 52rem;
+.signal-grid p,
+.trust-strip p,
+.feature-grid p,
+.demo-section p,
+.demo-card li,
+.roadmap-list p {
+  color: #e5ddff;
+  line-height: 1.5;
 }
 
-.feature-grid article,
-.testimonials article {
-  border-radius: 24px;
+.trust-strip {
+  align-items: start;
+  background: rgba(255, 255, 255, 0.045);
+  border-radius: 14px;
   display: grid;
   gap: 0.8rem;
-  min-height: 15rem;
-  padding: clamp(1rem, 3vw, 1.4rem);
-  transition:
-    transform var(--ee-duration-base, 180ms) var(--ee-easing-standard, ease),
-    border-color var(--ee-duration-base, 180ms) var(--ee-easing-standard, ease);
+  grid-template-columns: auto 1fr;
+  padding: 1rem;
 }
 
-.feature-grid article:hover,
-.testimonials article:hover,
-.demo-card:hover {
-  transform: var(--ee-hover-lift, translateY(-3px));
+.trust-strip > span {
+  color: #fff;
+  display: grid;
+  font-size: 0.75rem;
+  font-weight: 900;
+  height: 2.35rem;
+  place-items: center;
+  width: 2.35rem;
 }
 
-.feature-grid article span {
-  color: #f4c95d;
+.feature-grid {
+  display: grid;
+  gap: clamp(1rem, 3vw, 2rem);
+  grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
-.split-section {
+.feature-grid article {
+  align-items: start;
+  border-radius: 14px;
   display: grid;
   gap: 1rem;
-  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
+  grid-template-columns: auto 1fr;
+  min-height: 10rem;
+  padding: 1.35rem;
 }
 
-.demo-card {
-  border-radius: 28px;
+.feature-icon {
+  color: #f7d27e;
   display: grid;
-  gap: 1rem;
-  padding: clamp(1.3rem, 4vw, 2.2rem);
+  font-size: 0.75rem;
+  font-weight: 900;
+  height: 2.45rem;
+  place-items: center;
+  width: 2.45rem;
 }
 
-.demo-card--primary {
-  background:
-    radial-gradient(circle at 86% 16%, rgba(244, 201, 93, 0.18), transparent 18rem),
-    linear-gradient(145deg, rgba(124, 58, 237, 0.32), rgba(255, 255, 255, 0.055));
+.feature-grid h2 {
+  color: #fff;
+  font-size: 1.1rem;
+  line-height: 1.2;
 }
 
-.roadmap-list {
+.demo-section {
+  border-radius: 16px;
   display: grid;
-  gap: 0.75rem;
+  gap: 1rem;
+  padding: clamp(1.2rem, 3vw, 2rem);
 }
 
-.roadmap-list div {
-  background: rgba(255, 255, 255, 0.055);
-  border: 1px solid rgba(184, 197, 255, 0.14);
-  border-radius: 18px;
-  display: grid;
-  gap: 0.25rem;
-  padding: 0.9rem;
+.demo-heading {
+  align-items: start;
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
 }
 
-.testimonials article {
-  min-height: 13rem;
+.demo-heading h2 {
+  color: #fff;
+  font-size: clamp(1.8rem, 4vw, 3rem);
+  line-height: 1;
+  margin: 0.5rem 0;
 }
 
-.testimonials article div {
-  align-self: end;
-  display: grid;
-  gap: 0.15rem;
+.audience-row {
+  align-content: start;
+  flex-wrap: wrap;
+  gap: 0.65rem;
+  justify-content: flex-end;
+  max-width: 22rem;
 }
 
-.testimonials span {
-  color: #9694b4;
+.demo-grid {
+  display: grid;
+  gap: 0;
+  grid-template-columns: 0.92fr 1.08fr;
 }
 
-.walkthrough {
-  align-items: start;
-  border-radius: 28px;
+.demo-card {
+  border-radius: 12px;
   display: grid;
-  gap: clamp(1rem, 4vw, 2rem);
-  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
-  padding: clamp(1.3rem, 4vw, 2.4rem);
+  gap: 0.9rem;
+  min-height: 15rem;
+  padding: 1.35rem 2rem;
 }
 
-.walkthrough ol {
+.demo-card ul {
   display: grid;
-  gap: 0.75rem;
+  gap: 1rem;
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
-.walkthrough li {
-  align-items: start;
-  background: rgba(255, 255, 255, 0.055);
-  border: 1px solid rgba(184, 197, 255, 0.14);
-  border-radius: 18px;
-  display: grid;
-  gap: 0.75rem;
-  grid-template-columns: auto 1fr;
-  padding: 0.9rem;
-}
-
-.walkthrough li span {
-  align-items: center;
-  background: linear-gradient(135deg, #7c3aed, #5cc8ff);
+.demo-card li::before {
+  border: 1px solid #f4bc56;
   border-radius: 999px;
-  display: inline-flex;
-  font-weight: 900;
-  height: 2rem;
-  justify-content: center;
-  width: 2rem;
+  color: #f4bc56;
+  content: '\2713';
+  display: inline-grid;
+  font-size: 0.72rem;
+  height: 1.2rem;
+  margin-right: 0.7rem;
+  place-items: center;
+  width: 1.2rem;
 }
 
-.final-cta {
-  border-radius: 32px;
+.roadmap-list {
   display: grid;
-  gap: 1rem;
-  justify-items: center;
-  margin-bottom: clamp(1rem, 3vw, 2rem);
-  padding: clamp(1.5rem, 5vw, 3.5rem);
-  position: relative;
-  text-align: center;
-  overflow: hidden;
-}
-
-.final-cta::after {
-  animation: cta-glow 5s var(--ee-easing-standard, ease) infinite;
-  background: linear-gradient(90deg, transparent, rgba(92, 200, 255, 0.16), transparent);
-  content: '';
-  height: 1px;
-  inset: auto 12% 0;
-  position: absolute;
+  gap: 1.15rem;
 }
 
-.final-cta h2 {
-  max-width: 14ch;
-}
-
-.final-cta p {
-  max-width: 64ch;
+.roadmap-list div {
+  align-items: start;
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: auto 1fr;
 }
 
-@keyframes cta-glow {
-  0%, 100% { opacity: 0.35; transform: translateX(-8%); }
-  50% { opacity: 0.9; transform: translateX(8%); }
+.roadmap-list span {
+  height: 2.6rem;
+  width: 2.6rem;
 }
 
-@keyframes float-card {
-  0% {
-    opacity: 0;
-    transform: translateY(10px) scale(0.985);
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
+.roadmap-list strong {
+  color: #c4a9ff;
+  font-size: 1.1rem;
 }
 
-@media (max-width: 980px) {
+@media (max-width: 1040px) {
   .nav-links {
     display: none;
   }
 
   .hero,
-  .split-section,
-  .walkthrough,
   .feature-grid,
-  .testimonials {
+  .demo-grid {
     grid-template-columns: 1fr;
   }
-
-  h1 {
-    max-width: 11ch;
-  }
 }
 
-@media (max-width: 640px) {
+@media (max-width: 680px) {
   .landing-shell {
-    padding: 0.75rem;
+    margin: 0;
+    min-height: 100vh;
+    border-radius: 0;
   }
 
-  .landing-nav {
+  .landing-nav,
+  .demo-heading {
     align-items: stretch;
-    border-radius: 24px;
     flex-direction: column;
   }
 
   .auth-links {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    width: 100%;
-  }
-
-  .ghost-link,
-  .nav-cta {
-    justify-content: center;
-    text-align: center;
   }
 
   h1 {
-    font-size: clamp(3rem, 18vw, 4.2rem);
+    font-size: clamp(3rem, 16vw, 4.2rem);
   }
 
   .signal-grid {
     grid-template-columns: 1fr;
   }
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .animated-stack article,
-  .nav-links a,
-  .ghost-link,
-  .nav-cta,
-  .button {
-    animation: none;
-    transition: none;
-  }
-
-  .hero-copy,
-  .feature-panel,
-  .animated-stack article,
-  .final-cta::after {
-    animation: none;
-  }
-
-  .nav-links a:hover,
-  .ghost-link:hover,
-  .nav-cta:hover,
-  .button:hover,
-  .button:active,
-  .nav-cta:active,
-  .ghost-link:active,
-  .feature-grid article:hover,
-  .testimonials article:hover,
-  .demo-card:hover {
-    transform: none;
-  }
-}
diff --git a/frontend/src/app/pages/landing/landing.component.ts b/frontend/src/app/pages/landing/landing.component.ts
index a4c3e3a..d3d96a1 100644
--- a/frontend/src/app/pages/landing/landing.component.ts
+++ b/frontend/src/app/pages/landing/landing.component.ts
@@ -12,26 +12,27 @@ import { RouterModule } from '@angular/router';
 export class LandingComponent {
   featureHighlights = [
     {
-      title: 'AI-native knowledge studio',
-      description: 'Turn institutional expertise, source material, and instructional goals into governed products without losing human review.',
-      kicker: 'Knowledge in'
+      title: 'Culturally grounded curriculum',
+      description: 'Stories, primary sources, and activities that celebrate African and African-American history with respect and rigor.',
+      kicker: '01'
     },
     {
-      title: 'Governed learner delivery',
-      description: 'Package learning experiences for schools, enterprises, parents, and teachers while existing lesson readiness stays authoritative.',
-      kicker: 'Trust built in'
+      title: 'Student progress intelligence',
+      description: 'Live visibility into mastery, pacing, and engagement for every learner.',
+      kicker: '02'
     },
     {
-      title: 'Product health analytics',
-      description: 'See product readiness, learner engagement, access, review, and knowledge pipeline signal from one premium workspace.',
-      kicker: 'Operator clarity'
+      title: 'Built for any learning model',
+      description: 'Perfect for private schools, microschools, homeschool families, and community learning pods.',
+      kicker: '03'
     },
   ];
 
   animatedCards = [
-    { label: 'Workspace', value: 'Command center', detail: 'Projects, products, review, learners, analytics' },
-    { label: 'Review', value: 'Human governed', detail: 'Artifact and product decisions stay separate from runtime publishing' },
-    { label: 'Learner Portal', value: 'Product first', detail: 'Existing lessons continue through governed runtime paths' },
+    { label: 'Educator-first', value: 'Admin & teacher control centers', detail: 'Curriculum tools, cohorts, and progress views' },
+    { label: 'Learner delight', value: 'Immersive lessons & achievements', detail: 'Story-led lessons, badges, and momentum' },
+    { label: 'Families', value: 'Simple onboarding', detail: 'Parent-friendly account creation and access' },
+    { label: 'Middle + HS', value: 'Coming soon', detail: 'Upper grade pathways are already in motion' },
   ];
 
   walkthroughSteps = [
@@ -61,15 +62,12 @@ export class LandingComponent {
   ];
 
   roadmap = [
-    { title: 'Commercial packaging', detail: 'Public product pages, pricing placeholders, and branded product presentation.' },
-    { title: 'Access expansion', detail: 'Manual grants today, with future memberships, teams, invitations, and enterprise seats.' },
-    { title: 'AI generation execution', detail: 'Future controlled generation runs after review and governance foundations are stable.' },
+    { title: 'Future Grades', detail: 'Middle School Suites expanding into grades 6-8 with civics-rich projects and debates.' },
+    { title: 'High School Pathways', detail: 'College-ready modules with primary-source analysis and AP-aligned rigor.' },
   ];
 
   audienceCards = [
-    'Investors evaluating a premium SaaS platform',
-    'Schools modernizing curriculum operations',
-    'Enterprises packaging internal knowledge',
-    'Parents and teachers seeking trusted learner delivery',
+    'K-5 content live today',
+    'Middle & High School in motion',
   ];
 }
diff --git a/frontend/src/app/pages/login/login.component.html b/frontend/src/app/pages/login/login.component.html
index 1937140..01ee528 100644
--- a/frontend/src/app/pages/login/login.component.html
+++ b/frontend/src/app/pages/login/login.component.html
@@ -1,59 +1,41 @@
 <main class="login-shell">
   <section class="login-stage" aria-labelledby="login-title">
-    <aside class="login-story" aria-label="EchoEd welcome and security information">
+    <aside class="login-story" aria-label="EchoEd welcome information">
       <a routerLink="/" class="brand-link" aria-label="Back to EchoEd home">
         <span>EE</span>
         <strong>EchoEd</strong>
       </a>
 
       <div class="story-copy">
-        <p class="eyebrow">Premium workspace access</p>
-        <h1 id="login-title">Welcome back to the knowledge product command center.</h1>
-        <p>
-          Sign in to continue through the EchoEd V2 demo: workspace, Product Studio, Review Center,
-          Learner Portal, Analytics, and governed lesson delivery.
-        </p>
+        <h1 id="login-title">Welcome back to EchoEd</h1>
+        <p>Access student, teacher, and admin views in demo mode to showcase the full EchoEd experience.</p>
       </div>
 
-      <div class="benefit-grid" aria-label="EchoEd benefits">
+      <div class="story-list" aria-label="EchoEd sign in notes">
         <article>
-          <span>01</span>
-          <strong>Built for trusted learning</strong>
-          <p>Human review, product readiness, and existing lesson governance stay visible.</p>
+          <span aria-hidden="true">01</span>
+          <p>WCAG AA mindful inputs & focus states</p>
         </article>
         <article>
-          <span>02</span>
-          <strong>Demo-ready workspace</strong>
-          <p>Use seeded V2 data to explain EchoEd to schools, enterprises, parents, and investors.</p>
+          <span aria-hidden="true">02</span>
+          <p>Private, microschool, and homeschool-ready</p>
         </article>
         <article>
-          <span>03</span>
-          <strong>Security-minded access</strong>
-          <p>Your session is established through the existing EchoEd authentication flow.</p>
+          <span aria-hidden="true">03</span>
+          <p>Investor tour: landing -> login -> dashboards</p>
         </article>
       </div>
-
-      <div class="security-note" role="note">
-        <span aria-hidden="true">Lock</span>
-        <div>
-          <strong>Secure session bootstrap</strong>
-          <p>Authentication, organization context, and role routing are unchanged by this redesign.</p>
-        </div>
-      </div>
     </aside>
 
     <section class="login-card" aria-labelledby="login-card-title">
       <div class="card-heading">
-        <div>
-          <p class="eyebrow">Secure sign in</p>
-          <h2 id="login-card-title">Access EchoEd</h2>
-        </div>
+        <h2 id="login-card-title">Secure sign in</h2>
         <span class="demo-badge">Demo Mode</span>
       </div>
 
       <form #loginForm="ngForm" (submit)="login($event)" class="login-form" novalidate>
         <label class="field" for="username">
-          <span>Email or username</span>
+          <span>Email or Username</span>
           <input
             #usernameModel="ngModel"
             type="text"
@@ -65,35 +47,29 @@ <h2 id="login-card-title">Access EchoEd</h2>
             placeholder="you@example.com"
             aria-required="true"
             [attr.aria-invalid]="usernameModel.invalid && usernameModel.touched"
-            aria-describedby="username-help username-error"
+            aria-describedby="username-error"
           />
-          <small id="username-help">Use the username or email assigned to your EchoEd account.</small>
           <small id="username-error" class="field-error" *ngIf="usernameModel.invalid && usernameModel.touched">
             Username is required.
           </small>
         </label>
 
         <label class="field" for="password">
-          <span>Password</span>
-          <div class="password-row">
-            <input
-              #passwordModel="ngModel"
-              [type]="showPassword ? 'text' : 'password'"
-              id="password"
-              name="password"
-              [(ngModel)]="password"
-              required
-              autocomplete="current-password"
-              placeholder="Enter your password"
-              aria-required="true"
-              [attr.aria-invalid]="passwordModel.invalid && passwordModel.touched"
-              aria-describedby="password-help password-error"
-            />
-            <button type="button" class="show-password" (click)="showPassword = !showPassword">
-              {{ showPassword ? 'Hide' : 'Show' }}
-            </button>
-          </div>
-          <small id="password-help">Your password stays private and is submitted through the existing auth endpoint.</small>
+          <span>Password <button type="button" class="text-toggle" (click)="showPassword = !showPassword">{{ showPassword ? 'Hide password' : 'Show password' }}</button></span>
+          <input
+            #passwordModel="ngModel"
+            [type]="showPassword ? 'text' : 'password'"
+            id="password"
+            name="password"
+            [(ngModel)]="password"
+            required
+            autocomplete="current-password"
+            placeholder="password"
+            aria-required="true"
+            [attr.aria-invalid]="passwordModel.invalid && passwordModel.touched"
+            aria-describedby="password-error"
+          />
+          <a routerLink="/login" class="forgot-link">Forgot password?</a>
           <small id="password-error" class="field-error" *ngIf="passwordModel.invalid && passwordModel.touched">
             Password is required.
           </small>
@@ -102,13 +78,13 @@ <h2 id="login-card-title">Access EchoEd</h2>
         <p class="auth-error" *ngIf="errorMessage" role="alert">{{ errorMessage }}</p>
 
         <button type="submit" class="primary-cta" [disabled]="loginForm.invalid">
-          Login
+          Sign in <span aria-hidden="true">-&gt;</span>
         </button>
       </form>
 
       <div class="login-footer">
         <p>New to EchoEd? <a routerLink="/registration">Create an account</a></p>
-        <p>For demo access, use the credentials provided with your walkthrough.</p>
+        <p>For demo access, use any valid credentials provided to you.</p>
       </div>
     </section>
   </section>
diff --git a/frontend/src/app/pages/login/login.component.scss b/frontend/src/app/pages/login/login.component.scss
index fc63dcb..08eb008 100644
--- a/frontend/src/app/pages/login/login.component.scss
+++ b/frontend/src/app/pages/login/login.component.scss
@@ -3,102 +3,80 @@
 }
 
 .login-shell {
-  align-items: center;
   background:
-    radial-gradient(circle at 15% 15%, rgba(124, 58, 237, 0.34), transparent 27rem),
-    radial-gradient(circle at 88% 18%, rgba(92, 200, 255, 0.2), transparent 28rem),
-    radial-gradient(circle at 70% 86%, rgba(244, 201, 93, 0.12), transparent 28rem),
-    linear-gradient(135deg, #050614, #0b1026 48%, #090817);
-  color: #f7f3ff;
-  display: grid;
+    radial-gradient(circle at 82% 88%, rgba(116, 53, 188, 0.35), transparent 22rem),
+    radial-gradient(circle at 15% 16%, rgba(58, 49, 141, 0.34), transparent 22rem),
+    linear-gradient(135deg, #05091d, #070a24 52%, #100724);
+  color: #f8f4ff;
   min-height: 100vh;
-  overflow: hidden;
   padding: clamp(1rem, 3vw, 2rem);
+}
+
+.login-stage {
+  align-items: center;
+  border: 1px solid rgba(128, 151, 224, 0.44);
+  border-radius: 18px;
+  display: grid;
+  gap: clamp(1.5rem, 4vw, 4rem);
+  grid-template-columns: minmax(0, 0.95fr) minmax(17rem, 0.72fr);
+  margin-inline: auto;
+  max-width: 1280px;
+  min-height: min(42rem, calc(100vh - 4rem));
+  overflow: hidden;
+  padding: clamp(1.5rem, 4vw, 4rem);
   position: relative;
 }
 
-.login-shell::before {
+.login-stage::before {
   background:
-    linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
-  background-size: 64px 64px;
+    radial-gradient(circle at 70% 34%, rgba(124, 58, 237, 0.28), transparent 22rem),
+    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.035));
   content: '';
   inset: 0;
   pointer-events: none;
   position: absolute;
 }
 
-.login-stage {
-  display: grid;
-  gap: clamp(1rem, 4vw, 2rem);
-  grid-template-columns: minmax(0, 1.05fr) minmax(24rem, 0.78fr);
-  margin-inline: auto;
-  max-width: 1120px;
-  position: relative;
-  width: 100%;
-  z-index: 1;
-}
-
 .login-story,
 .login-card {
-  background: linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035));
-  backdrop-filter: blur(24px) saturate(1.18);
-  border: 1px solid rgba(184, 197, 255, 0.16);
-  border-radius: 30px;
-  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36);
+  position: relative;
+  z-index: 1;
 }
 
 .login-story {
-  animation: ee-motion-slide-up var(--ee-duration-slow, 260ms) var(--ee-easing-standard, ease) both;
   display: grid;
-  gap: clamp(1.4rem, 4vw, 2.4rem);
-  padding: clamp(1.4rem, 4vw, 2.6rem);
+  gap: 2.1rem;
+  max-width: 30rem;
 }
 
 .brand-link {
   align-items: center;
   color: #fff;
   display: inline-flex;
-  gap: 0.65rem;
+  gap: 0.9rem;
   text-decoration: none;
   width: fit-content;
 }
 
 .brand-link span {
-  align-items: center;
-  background: linear-gradient(135deg, #7c3aed, #5cc8ff);
-  border-radius: 999px;
-  display: inline-flex;
+  background: linear-gradient(135deg, #6d4be8, #261b5e);
+  border: 1px solid rgba(185, 166, 255, 0.24);
+  border-radius: 12px;
+  display: grid;
+  font-size: 1.15rem;
   font-weight: 900;
-  height: 2.55rem;
-  justify-content: center;
-  width: 2.55rem;
+  height: 3.55rem;
+  place-items: center;
+  width: 3.55rem;
 }
 
 .brand-link strong {
-  font-size: 1rem;
-}
-
-.story-copy,
-.benefit-grid,
-.security-note,
-.login-card,
-.login-form,
-.login-footer {
-  display: grid;
+  font-size: 1.8rem;
 }
 
 .story-copy {
-  gap: 1rem;
-}
-
-.eyebrow {
-  color: #f4c95d;
-  font-size: 0.76rem;
-  font-weight: 900;
-  letter-spacing: 0.18em;
-  margin: 0;
-  text-transform: uppercase;
+  display: grid;
+  gap: 0.85rem;
 }
 
 h1,
@@ -108,110 +86,80 @@ p {
 }
 
 h1 {
-  font-size: clamp(3rem, 8vw, 6.3rem);
-  letter-spacing: 0;
-  line-height: 0.9;
-  max-width: 10ch;
-}
-
-h2 {
-  font-size: clamp(2rem, 5vw, 3rem);
-  letter-spacing: 0;
-  line-height: 0.96;
+  color: #eee8ff;
+  font-size: clamp(1.8rem, 3.3vw, 2.45rem);
+  line-height: 1.05;
+  max-width: 13ch;
 }
 
 .story-copy p,
-.benefit-grid p,
-.security-note p,
-.field small,
+.story-list p,
 .login-footer p {
-  color: #c8c6df;
-  line-height: 1.6;
+  color: #d8d1ed;
+  line-height: 1.55;
 }
 
-.benefit-grid {
-  gap: 0.75rem;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
-.benefit-grid article,
-.security-note {
-  background: rgba(255, 255, 255, 0.055);
-  border: 1px solid rgba(184, 197, 255, 0.14);
-  border-radius: 20px;
-  padding: 1rem;
-}
-
-.benefit-grid article {
-  animation: ee-motion-card-enter var(--ee-duration-slow, 260ms) var(--ee-easing-standard, ease) both;
+.story-list {
+  border-top: 1px solid rgba(184, 197, 255, 0.08);
   display: grid;
-  gap: 0.45rem;
-}
-
-.benefit-grid article:nth-child(2) {
-  animation-delay: 45ms;
-}
-
-.benefit-grid article:nth-child(3) {
-  animation-delay: 90ms;
-}
-
-.benefit-grid span {
-  color: #9694b4;
-  font-size: 0.72rem;
-  font-weight: 900;
-  letter-spacing: 0.12em;
+  gap: 1.2rem;
+  padding-top: 1.7rem;
 }
 
-.benefit-grid strong,
-.security-note strong {
-  color: #f7f3ff;
-}
-
-.security-note {
-  align-items: start;
-  gap: 0.85rem;
+.story-list article {
+  align-items: center;
+  display: grid;
+  gap: 0.8rem;
   grid-template-columns: auto 1fr;
 }
 
-.security-note > span {
-  align-items: center;
-  background: rgba(101, 230, 179, 0.13);
-  border: 1px solid rgba(101, 230, 179, 0.34);
+.story-list span {
+  background: rgba(151, 117, 255, 0.16);
+  border: 1px solid rgba(184, 197, 255, 0.16);
   border-radius: 999px;
-  color: #baf8df;
-  display: inline-flex;
-  font-size: 0.75rem;
+  color: #d8c6ff;
+  display: grid;
+  font-size: 0.72rem;
   font-weight: 900;
-  height: 2.35rem;
-  justify-content: center;
-  text-transform: uppercase;
-  width: 2.35rem;
+  height: 2rem;
+  place-items: center;
+  width: 2rem;
 }
 
 .login-card {
-  animation: ee-motion-card-enter var(--ee-duration-slow, 260ms) var(--ee-easing-emphasized, ease) 70ms both;
-  align-content: center;
-  gap: 1.4rem;
-  padding: clamp(1.25rem, 4vw, 2rem);
+  background: linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035));
+  border: 1px solid rgba(184, 197, 255, 0.16);
+  border-radius: 20px;
+  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36);
+  display: grid;
+  gap: 1.45rem;
+  padding: clamp(1.4rem, 3vw, 2.4rem);
 }
 
 .card-heading {
-  align-items: start;
+  align-items: center;
   display: flex;
-  gap: 1rem;
   justify-content: space-between;
 }
 
+h2 {
+  color: #f6f0ff;
+  font-size: 1.35rem;
+}
+
 .demo-badge {
-  background: rgba(244, 201, 93, 0.13);
-  border: 1px solid rgba(244, 201, 93, 0.34);
+  background: rgba(124, 58, 237, 0.18);
+  border: 1px solid rgba(180, 146, 255, 0.3);
   border-radius: 999px;
-  color: #ffe5a2;
-  font-size: 0.76rem;
-  font-weight: 900;
-  padding: 0.38rem 0.72rem;
-  white-space: nowrap;
+  color: #c7a8ff;
+  font-size: 0.78rem;
+  font-weight: 850;
+  padding: 0.42rem 0.72rem;
+}
+
+.login-form,
+.field {
+  display: grid;
 }
 
 .login-form {
@@ -219,108 +167,78 @@ h2 {
 }
 
 .field {
-  color: #f7f3ff;
-  display: grid;
+  color: #f8f4ff;
+  font-size: 0.88rem;
   font-weight: 850;
-  gap: 0.45rem;
+  gap: 0.5rem;
 }
 
 .field > span {
-  font-size: 0.95rem;
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
 }
 
-.field input {
-  background: rgba(255, 255, 255, 0.08);
-  border: 1px solid rgba(184, 197, 255, 0.18);
-  border-radius: 18px;
-  color: #f7f3ff;
+input {
+  background: rgba(2, 6, 23, 0.62);
+  border: 1px solid rgba(184, 197, 255, 0.12);
+  border-radius: 8px;
+  color: #f8f4ff;
   font: inherit;
-  font-size: 1.05rem;
-  min-height: 3.55rem;
-  padding: 0.95rem 1rem;
+  min-height: 3.45rem;
+  padding: 0.9rem 1rem;
   width: 100%;
-  transition:
-    border-color var(--ee-duration-fast, 120ms) var(--ee-easing-standard, ease),
-    background var(--ee-duration-fast, 120ms) var(--ee-easing-standard, ease),
-    box-shadow var(--ee-duration-fast, 120ms) var(--ee-easing-standard, ease);
 }
 
-.field input::placeholder {
-  color: rgba(200, 198, 223, 0.72);
+input::placeholder {
+  color: rgba(216, 209, 237, 0.55);
 }
 
-.field input.ng-invalid.ng-touched {
-  border-color: rgba(255, 122, 154, 0.62);
-}
-
-.password-row {
-  position: relative;
-}
-
-.password-row input {
-  padding-right: 5.3rem;
-}
-
-.show-password {
-  background: rgba(255, 255, 255, 0.075);
-  border: 1px solid rgba(184, 197, 255, 0.16);
-  border-radius: 999px;
-  color: #f7f3ff;
+.text-toggle,
+.forgot-link {
+  background: none;
+  border: 0;
+  color: #e2b96f;
   cursor: pointer;
   font: inherit;
-  font-size: 0.82rem;
-  font-weight: 900;
-  min-height: 2.25rem;
-  padding: 0 0.75rem;
-  position: absolute;
-  right: 0.65rem;
-  top: 0.65rem;
-  transition:
-    transform var(--ee-duration-fast, 120ms) var(--ee-easing-standard, ease),
-    background var(--ee-duration-fast, 120ms) var(--ee-easing-standard, ease);
+  font-size: 0.78rem;
+  padding: 0;
+  text-decoration: underline;
 }
 
-.show-password:active {
-  transform: var(--ee-press-scale, scale(0.98));
+.forgot-link {
+  justify-self: end;
 }
 
 .field-error,
 .auth-error {
-  color: #ffc4d2 !important;
+  color: #ffc4d2;
 }
 
 .auth-error {
-  animation: ee-motion-slide-up var(--ee-duration-base, 180ms) var(--ee-easing-standard, ease) both;
   background: rgba(255, 122, 154, 0.12);
   border: 1px solid rgba(255, 122, 154, 0.3);
-  border-radius: 16px;
+  border-radius: 10px;
   font-weight: 800;
   padding: 0.8rem 0.9rem;
 }
 
 .primary-cta {
-  background: linear-gradient(135deg, #7c3aed, #a78bfa 52%, #5cc8ff);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 999px;
-  box-shadow: 0 16px 38px rgba(92, 200, 255, 0.18);
+  align-items: center;
+  background: linear-gradient(135deg, #8b4df4, #5b2dff);
+  border: 1px solid rgba(210, 190, 255, 0.24);
+  border-radius: 8px;
+  box-shadow: 0 16px 34px rgba(97, 51, 240, 0.22);
   color: #fff;
   cursor: pointer;
+  display: inline-flex;
   font: inherit;
+  font-size: 1.05rem;
   font-weight: 900;
-  min-height: 3.35rem;
+  gap: 1rem;
+  justify-content: center;
+  min-height: 3.55rem;
   padding: 0.9rem 1.1rem;
-  transition:
-    transform var(--ee-duration-fast, 120ms) var(--ee-easing-standard, ease),
-    opacity var(--ee-duration-base, 180ms) var(--ee-easing-standard, ease),
-    box-shadow var(--ee-duration-base, 180ms) var(--ee-easing-standard, ease);
-}
-
-.primary-cta:hover:not(:disabled) {
-  transform: var(--ee-hover-lift, translateY(-3px));
-}
-
-.primary-cta:active:not(:disabled) {
-  transform: var(--ee-press-scale, scale(0.98));
 }
 
 .primary-cta:disabled {
@@ -329,69 +247,47 @@ h2 {
 }
 
 .login-footer {
-  gap: 0.35rem;
+  display: grid;
+  gap: 1rem;
   text-align: center;
 }
 
+.login-footer p:first-child {
+  color: #fff;
+}
+
 .login-footer a {
-  color: #f4c95d;
+  color: #fff;
   font-weight: 900;
+  text-decoration: underline;
 }
 
 :where(a, button, input):focus-visible {
-  outline: 2px solid rgba(92, 200, 255, 0.92);
+  outline: 2px solid rgba(132, 92, 255, 0.94);
   outline-offset: 3px;
-  box-shadow: 0 0 0 5px rgba(92, 200, 255, 0.16);
 }
 
-@media (max-width: 980px) {
+@media (max-width: 900px) {
   .login-stage {
-    grid-template-columns: 1fr;
+    gap: 1.5rem;
+    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.82fr);
+    padding: 1.5rem;
   }
 
-  .benefit-grid {
-    grid-template-columns: 1fr;
-  }
-
-  h1 {
-    max-width: 11ch;
+  .story-list p,
+  .story-copy p {
+    font-size: 0.9rem;
   }
 }
 
-@media (max-width: 560px) {
+@media (max-width: 720px) {
   .login-shell {
-    padding: 0.75rem;
-  }
-
-  .login-story,
-  .login-card {
-    border-radius: 24px;
-  }
-
-  .card-heading {
-    flex-direction: column;
-  }
-
-  h1 {
-    font-size: clamp(2.7rem, 17vw, 4rem);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .primary-cta {
-    transition: none;
+    padding: 0;
   }
 
-  .login-story,
-  .login-card,
-  .benefit-grid article,
-  .auth-error {
-    animation: none;
-  }
-
-  .primary-cta:hover:not(:disabled),
-  .primary-cta:active:not(:disabled),
-  .show-password:active {
-    transform: none;
+  .login-stage {
+    border-radius: 0;
+    grid-template-columns: 1fr;
+    min-height: 100vh;
   }
 }
diff --git a/frontend/src/app/pages/registration/registration.component.html b/frontend/src/app/pages/registration/registration.component.html
index a4df500..5d76dbe 100644
--- a/frontend/src/app/pages/registration/registration.component.html
+++ b/frontend/src/app/pages/registration/registration.component.html
@@ -1,307 +1,134 @@
 <main class="registration-shell">
   <section class="registration-stage" aria-labelledby="registration-title">
     <section class="registration-card" aria-label="Create your EchoEd account">
-      <a routerLink="/" class="brand-link" aria-label="Back to EchoEd home">
-        <span>EE</span>
-        <strong>EchoEd</strong>
-      </a>
-
       <div class="card-heading">
         <p class="eyebrow">Create account</p>
-        <h1 id="registration-title">Start with a trusted workspace.</h1>
-        <p>
-          Create your profile first. If you are setting up a school, family space, or creator workspace,
-          EchoEd will guide you through organization setup after sign in.
-        </p>
+        <h1 id="registration-title">Build your EchoEd profile</h1>
+        <p>For educators, families, and school leaders exploring the K-5 demo and beyond.</p>
       </div>
 
       <form [formGroup]="registrationForm" (ngSubmit)="onSubmit()" class="registration-form" novalidate>
-        <section class="form-section" aria-labelledby="identity-heading">
-          <div class="section-title">
-            <span>01</span>
-            <div>
-              <h2 id="identity-heading">Your profile</h2>
-              <p>Use the name and email you want attached to your EchoEd workspace.</p>
-            </div>
-          </div>
-
-          <div class="field-grid">
-            <label class="field" for="firstName">
-              <span>First name</span>
-              <input
-                type="text"
-                id="firstName"
-                formControlName="firstName"
-                required
-                autocomplete="given-name"
-                placeholder="Ada"
-                aria-required="true"
-              />
-              <small class="field-error" *ngIf="registrationForm.get('firstName')?.hasError('required') && registrationForm.get('firstName')?.touched">
-                First name is required.
-              </small>
-            </label>
-
-            <label class="field" for="lastName">
-              <span>Last name</span>
-              <input
-                type="text"
-                id="lastName"
-                formControlName="lastName"
-                required
-                autocomplete="family-name"
-                placeholder="Lovelace"
-                aria-required="true"
-              />
-              <small class="field-error" *ngIf="registrationForm.get('lastName')?.hasError('required') && registrationForm.get('lastName')?.touched">
-                Last name is required.
-              </small>
-            </label>
-          </div>
-
-          <label class="field" for="email">
-            <span>Email</span>
-            <input
-              type="email"
-              id="email"
-              formControlName="email"
-              required
-              autocomplete="email"
-              placeholder="you@example.com"
-              aria-required="true"
-            />
-            <small>Used for secure sign-in and workspace notifications.</small>
-            <small class="field-error" *ngIf="registrationForm.get('email')?.hasError('required') && registrationForm.get('email')?.touched">
-              Email is required.
-            </small>
-            <small class="field-error" *ngIf="registrationForm.get('email')?.hasError('email') && registrationForm.get('email')?.touched">
-              Enter a valid email address.
+        <div class="field-grid">
+          <label class="field" for="firstName">
+            <span>First name</span>
+            <input type="text" id="firstName" formControlName="firstName" required autocomplete="given-name" placeholder="First name" aria-required="true" />
+            <small class="field-error" *ngIf="registrationForm.get('firstName')?.hasError('required') && registrationForm.get('firstName')?.touched">
+              First name is required.
             </small>
           </label>
-        </section>
-
-        <section class="form-section" aria-labelledby="role-heading">
-          <div class="section-title">
-            <span>02</span>
-            <div>
-              <h2 id="role-heading">Your role</h2>
-              <p>Role selection helps EchoEd prepare the right workspace and onboarding path.</p>
-            </div>
-          </div>
 
-          <label class="field" for="role">
-            <span>Role</span>
-            <select id="role" formControlName="role" required [disabled]="loadingRoles" aria-required="true">
-              <option value="" disabled>
-                {{ loadingRoles ? "Loading roles..." : "Select your role" }}
-              </option>
-              <option *ngFor="let r of roleOptions" [value]="r.value">
-                {{ r.label }}
-              </option>
-            </select>
-            <small *ngIf="loadingRoles">Role options are loading from EchoEd metadata.</small>
-            <small class="field-error" *ngIf="registrationForm.get('role')?.hasError('required') && registrationForm.get('role')?.touched">
-              Select the role that best matches how you will use EchoEd.
+          <label class="field" for="lastName">
+            <span>Last name</span>
+            <input type="text" id="lastName" formControlName="lastName" required autocomplete="family-name" placeholder="Last name" aria-required="true" />
+            <small class="field-error" *ngIf="registrationForm.get('lastName')?.hasError('required') && registrationForm.get('lastName')?.touched">
+              Last name is required.
             </small>
           </label>
+        </div>
 
-          <div class="role-preview" aria-label="Role explanations">
-            <article>
-              <strong>Teacher</strong>
-              <span>Create and deliver governed learning experiences.</span>
-            </article>
-            <article>
-              <strong>Parent</strong>
-              <span>Support learners through a family workspace.</span>
-            </article>
-            <article>
-              <strong>Student</strong>
-              <span>Join assigned products and continue lessons safely.</span>
-            </article>
-            <article>
-              <strong>Instructor</strong>
-              <span>Package expertise into trusted learning products.</span>
-            </article>
-          </div>
-        </section>
-
-        <section class="org-section" aria-labelledby="organization-heading">
-          <div class="org-header">
-            <div>
-              <p class="eyebrow">Optional setup</p>
-              <h2 id="organization-heading">Create an organization now</h2>
-              <p>Use this when you are setting up a school, family, instructor, or workspace-owned demo.</p>
-            </div>
-            <label class="switch">
-              <input type="checkbox" formControlName="createOrganization" />
-              <span></span>
-            </label>
-          </div>
-
-          <div class="org-disclosure" *ngIf="registrationForm.get('createOrganization')?.value">
-            <label class="field" for="organizationName">
-              <span>Organization name</span>
-              <input
-                id="organizationName"
-                type="text"
-                formControlName="organizationName"
-                placeholder="Bright Futures Academy"
-              />
-              <small>We will save this and continue setup after you sign in.</small>
-              <small
-                class="field-error"
-                *ngIf="
-                  registrationForm.get('organizationName')?.hasError('required') &&
-                  (registrationForm.get('organizationName')?.touched || registrationSubmitted)
-                "
-              >
-                Add an organization name to continue with setup.
-              </small>
-            </label>
-
-            <div class="setup-summary">
-              <strong>Suggested type: {{ inferredOrgTypeLabel }}</strong>
-              <span>{{ organizationSetupSummary }}</span>
-              <span class="warning" *ngIf="showStudentOrgHint">
-                Students usually join an existing organization, but a family space can be created if needed.
-              </span>
-            </div>
-          </div>
+        <label class="field" for="email">
+          <span>Email</span>
+          <input type="email" id="email" formControlName="email" required autocomplete="email" placeholder="you@example.com" aria-required="true" />
+          <small>We use this for secure sign-in and demo follow-ups.</small>
+          <small class="field-error" *ngIf="registrationForm.get('email')?.hasError('required') && registrationForm.get('email')?.touched">
+            Email is required.
+          </small>
+          <small class="field-error" *ngIf="registrationForm.get('email')?.hasError('email') && registrationForm.get('email')?.touched">
+            Enter a valid email address.
+          </small>
+        </label>
+
+        <label class="field" for="role">
+          <span>Role</span>
+          <select id="role" formControlName="role" required [disabled]="loadingRoles" aria-required="true">
+            <option value="" disabled>{{ loadingRoles ? "Loading roles..." : "Select your role" }}</option>
+            <option *ngFor="let r of roleOptions" [value]="r.value">{{ r.label }}</option>
+          </select>
+          <small *ngIf="loadingRoles">Role options are loading from EchoEd metadata.</small>
+          <small class="field-error" *ngIf="registrationForm.get('role')?.hasError('required') && registrationForm.get('role')?.touched">
+            Select the role that best matches how you will use EchoEd.
+          </small>
+        </label>
+
+        <section class="org-inline" aria-labelledby="organization-heading">
+          <label class="check-row">
+            <input type="checkbox" formControlName="createOrganization" />
+            <span>
+              <strong id="organization-heading">Create an organization now</strong>
+              Choose this if you want your first sign-in to continue directly into organization setup.
+            </span>
+          </label>
 
-          <p class="setup-summary setup-summary--flat" *ngIf="!registrationForm.get('createOrganization')?.value">
-            {{ organizationSetupSummary }}
-          </p>
+          <label class="field" for="organizationName" *ngIf="registrationForm.get('createOrganization')?.value">
+            <span>Organization name</span>
+            <input id="organizationName" type="text" formControlName="organizationName" placeholder="Bright Futures Academy" />
+            <small>Suggested type: {{ inferredOrgTypeLabel }}</small>
+            <small class="field-error" *ngIf="registrationForm.get('organizationName')?.hasError('required') && (registrationForm.get('organizationName')?.touched || registrationSubmitted)">
+              Add an organization name to continue with setup.
+            </small>
+          </label>
         </section>
 
-        <section class="form-section" aria-labelledby="security-heading">
-          <div class="section-title">
-            <span>03</span>
-            <div>
-              <h2 id="security-heading">Secure access</h2>
-              <p>Choose a password for your EchoEd account.</p>
-            </div>
-          </div>
-
-          <div class="field-grid">
-            <label class="field" for="password">
-              <span>Password</span>
-              <div class="password-row">
-                <input
-                  [type]="showPassword ? 'text' : 'password'"
-                  id="password"
-                  formControlName="password"
-                  required
-                  autocomplete="new-password"
-                  placeholder="Minimum 6 characters"
-                  aria-required="true"
-                />
-                <button type="button" class="show-password" (click)="showPassword = !showPassword">
-                  {{ showPassword ? "Hide" : "Show" }}
-                </button>
-              </div>
-              <small>Use at least 6 characters.</small>
-              <small class="field-error" *ngIf="registrationForm.get('password')?.hasError('required') && registrationForm.get('password')?.touched">
-                Password is required.
-              </small>
-              <small class="field-error" *ngIf="registrationForm.get('password')?.hasError('minlength') && registrationForm.get('password')?.touched">
-                Password must be at least 6 characters.
-              </small>
-            </label>
+        <div class="field-grid">
+          <label class="field" for="password">
+            <span>Password <button type="button" class="text-toggle" (click)="showPassword = !showPassword">{{ showPassword ? "Hide" : "Show" }}</button></span>
+            <input [type]="showPassword ? 'text' : 'password'" id="password" formControlName="password" required autocomplete="new-password" aria-required="true" />
+            <small class="field-error" *ngIf="registrationForm.get('password')?.hasError('required') && registrationForm.get('password')?.touched">
+              Password is required.
+            </small>
+            <small class="field-error" *ngIf="registrationForm.get('password')?.hasError('minlength') && registrationForm.get('password')?.touched">
+              Password must be at least 6 characters.
+            </small>
+          </label>
 
-            <label class="field" for="confirmPassword">
-              <span>Confirm password</span>
-              <div class="password-row">
-                <input
-                  [type]="showConfirm ? 'text' : 'password'"
-                  id="confirmPassword"
-                  formControlName="confirmPassword"
-                  required
-                  autocomplete="new-password"
-                  placeholder="Re-enter password"
-                  aria-required="true"
-                />
-                <button type="button" class="show-password" (click)="showConfirm = !showConfirm">
-                  {{ showConfirm ? "Hide" : "Show" }}
-                </button>
-              </div>
-              <small class="field-error" *ngIf="registrationForm.get('confirmPassword')?.hasError('required') && registrationForm.get('confirmPassword')?.touched">
-                Confirm your password.
-              </small>
-              <small
-                class="field-error"
-                *ngIf="
-                  registrationForm.get('confirmPassword')?.errors?.['passwordMismatch'] &&
-                  registrationForm.get('confirmPassword')?.touched
-                "
-              >
-                Passwords do not match.
-              </small>
-            </label>
-          </div>
-        </section>
+          <label class="field" for="confirmPassword">
+            <span>Confirm password <button type="button" class="text-toggle" (click)="showConfirm = !showConfirm">{{ showConfirm ? "Hide" : "Show" }}</button></span>
+            <input [type]="showConfirm ? 'text' : 'password'" id="confirmPassword" formControlName="confirmPassword" required autocomplete="new-password" aria-required="true" />
+            <small class="field-error" *ngIf="registrationForm.get('confirmPassword')?.hasError('required') && registrationForm.get('confirmPassword')?.touched">
+              Confirm your password.
+            </small>
+            <small class="field-error" *ngIf="registrationForm.get('confirmPassword')?.errors?.['passwordMismatch'] && registrationForm.get('confirmPassword')?.touched">
+              Passwords do not match.
+            </small>
+          </label>
+        </div>
 
         <p class="auth-error" *ngIf="errorMessage" role="alert">{{ errorMessage }}</p>
 
         <button type="submit" class="registration-submit" [disabled]="registrationForm.invalid">
-          {{ submitLabel }}
+          {{ submitLabel }} <span aria-hidden="true">-&gt;</span>
         </button>
       </form>
 
       <p class="login-link">
         Already registered?
-        <a routerLink="/login">Login here</a>
+        <a routerLink="/login">Sign in</a>
       </p>
     </section>
 
-    <aside class="registration-story" aria-label="Why create an EchoEd account">
-      <div class="image-panel" role="img" aria-label="Abstract premium product workspace preview">
-        <div class="preview-card preview-card--one">
-          <span>Product Studio</span>
-          <strong>Create governed products</strong>
+    <aside class="registration-story" aria-label="What EchoEd provides">
+      <p class="story-title">With EchoEd, you get:</p>
+      <article>
+        <span aria-hidden="true">01</span>
+        <div>
+          <strong>Student journeys</strong>
+          <p>Progress dashboards, streaks, and immersive lessons.</p>
         </div>
-        <div class="preview-card preview-card--two">
-          <span>Review Center</span>
-          <strong>Trust before delivery</strong>
+      </article>
+      <article>
+        <span aria-hidden="true">02</span>
+        <div>
+          <strong>Teacher controls</strong>
+          <p>Assign courses, run live lessons, and view reports.</p>
         </div>
-        <div class="preview-card preview-card--three">
-          <span>Learner Portal</span>
-          <strong>Product-first access</strong>
+      </article>
+      <article>
+        <span aria-hidden="true">03</span>
+        <div>
+          <strong>Admin command center</strong>
+          <p>User management, course creation, and badge governance.</p>
         </div>
-      </div>
-
-      <section class="story-section">
-        <p class="eyebrow">Why EchoEd</p>
-        <h2>Professional enough for operators. Warm enough for families.</h2>
-        <p>
-          EchoEd helps teams transform knowledge into learning products while preserving governance,
-          access control, and learner-safe delivery.
-        </p>
-      </section>
-
-      <section class="benefit-list" aria-label="Benefits">
-        <article>
-          <span>Trust</span>
-          <strong>Human review and readiness stay visible.</strong>
-        </article>
-        <article>
-          <span>Clarity</span>
-          <strong>Roles and organization setup are explained before onboarding.</strong>
-        </article>
-        <article>
-          <span>Momentum</span>
-          <strong>Create an account now and continue setup after sign in.</strong>
-        </article>
-      </section>
-
-      <section class="journey-preview" aria-label="Account journey preview">
-        <p class="eyebrow">Journey preview</p>
-        <ol>
-          <li><span>1</span><p>Create profile</p></li>
-          <li><span>2</span><p>Choose role</p></li>
-          <li><span>3</span><p>Optional organization setup</p></li>
-          <li><span>4</span><p>Enter EchoEd workspace</p></li>
-        </ol>
-      </section>
+      </article>
     </aside>
   </section>
 </main>
diff --git a/frontend/src/app/pages/registration/registration.component.scss b/frontend/src/app/pages/registration/registration.component.scss
index d7c8871..26f8851 100644
--- a/frontend/src/app/pages/registration/registration.component.scss
+++ b/frontend/src/app/pages/registration/registration.component.scss
@@ -4,406 +4,200 @@
 
 .registration-shell {
   background:
-    radial-gradient(circle at 14% 12%, rgba(124, 58, 237, 0.34), transparent 28rem),
-    radial-gradient(circle at 86% 18%, rgba(92, 200, 255, 0.2), transparent 28rem),
-    radial-gradient(circle at 72% 82%, rgba(244, 201, 93, 0.12), transparent 28rem),
-    linear-gradient(135deg, #050614, #0b1026 48%, #090817);
-  color: #f7f3ff;
+    radial-gradient(circle at 82% 88%, rgba(126, 58, 194, 0.44), transparent 22rem),
+    radial-gradient(circle at 18% 16%, rgba(58, 49, 141, 0.3), transparent 24rem),
+    linear-gradient(135deg, #05091d, #080a24 52%, #170a2d);
+  color: #f8f4ff;
   min-height: 100vh;
-  overflow: hidden;
   padding: clamp(1rem, 3vw, 2rem);
-  position: relative;
-}
-
-.registration-shell::before {
-  background:
-    linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
-  background-size: 64px 64px;
-  content: '';
-  inset: 0;
-  pointer-events: none;
-  position: absolute;
 }
 
 .registration-stage {
+  align-items: stretch;
+  border: 1px solid rgba(128, 151, 224, 0.44);
+  border-radius: 18px;
   display: grid;
-  gap: clamp(1rem, 4vw, 2rem);
-  grid-template-columns: minmax(0, 1.02fr) minmax(22rem, 0.85fr);
+  gap: clamp(1.4rem, 4vw, 3.5rem);
+  grid-template-columns: minmax(0, 0.98fr) minmax(17rem, 0.68fr);
   margin-inline: auto;
-  max-width: 1180px;
+  max-width: 1280px;
+  min-height: min(50rem, calc(100vh - 4rem));
+  overflow: hidden;
+  padding: clamp(1.5rem, 4vw, 4rem);
   position: relative;
-  width: 100%;
-  z-index: 1;
 }
 
-.registration-card,
-.registration-story,
-.form-section,
-.org-section,
-.role-preview article,
-.benefit-list article,
-.journey-preview,
-.image-panel {
-  background: linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.035));
-  backdrop-filter: blur(24px) saturate(1.18);
-  border: 1px solid rgba(184, 197, 255, 0.16);
-  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
+.registration-stage::before {
+  background:
+    radial-gradient(circle at 76% 54%, rgba(124, 58, 237, 0.32), transparent 24rem),
+    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.035));
+  content: '';
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
 }
 
 .registration-card,
 .registration-story {
-  border-radius: 30px;
-  display: grid;
-  gap: 1.25rem;
-  padding: clamp(1.25rem, 4vw, 2rem);
+  position: relative;
+  z-index: 1;
 }
 
 .registration-card {
-  animation: ee-motion-card-enter var(--ee-duration-slow, 260ms) var(--ee-easing-emphasized, ease) both;
-}
-
-.registration-story {
-  align-content: start;
-  animation: ee-motion-slide-up var(--ee-duration-slow, 260ms) var(--ee-easing-standard, ease) 70ms both;
-  position: sticky;
-  top: 1rem;
-}
-
-.brand-link {
-  align-items: center;
-  color: #fff;
-  display: inline-flex;
-  gap: 0.65rem;
-  text-decoration: none;
-  width: fit-content;
-}
-
-.brand-link span {
-  align-items: center;
-  background: linear-gradient(135deg, #7c3aed, #5cc8ff);
-  border-radius: 999px;
-  display: inline-flex;
-  font-weight: 900;
-  height: 2.55rem;
-  justify-content: center;
-  width: 2.55rem;
-}
-
-.brand-link strong {
-  font-size: 1rem;
-}
-
-.card-heading,
-.registration-form,
-.form-section,
-.org-section,
-.story-section,
-.benefit-list,
-.journey-preview,
-.setup-summary {
   display: grid;
+  gap: 1rem;
 }
 
-.card-heading,
-.story-section {
-  gap: 0.75rem;
+.card-heading {
+  border-bottom: 1px solid rgba(184, 197, 255, 0.08);
+  display: grid;
+  gap: 0.45rem;
+  padding-bottom: 1rem;
 }
 
 .eyebrow {
-  color: #f4c95d;
-  font-size: 0.76rem;
+  color: #d7c4ff;
+  font-size: 0.75rem;
   font-weight: 900;
-  letter-spacing: 0.18em;
+  letter-spacing: 0.08em;
   margin: 0;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 h1,
-h2,
 p {
   margin: 0;
 }
 
 h1 {
-  font-size: clamp(2.7rem, 7vw, 5.1rem);
-  letter-spacing: 0;
-  line-height: 0.9;
-  max-width: 10ch;
-}
-
-h2 {
-  font-size: clamp(1.25rem, 3vw, 2rem);
-  letter-spacing: 0;
-  line-height: 1.05;
+  color: #fff;
+  font-size: clamp(1.8rem, 3.3vw, 2.5rem);
+  line-height: 1.02;
 }
 
 .card-heading p,
-.section-title p,
 .field small,
-.story-section p,
-.setup-summary,
-.role-preview span,
-.journey-preview p {
-  color: #c8c6df;
-  line-height: 1.55;
+.check-row span,
+.registration-story p,
+.login-link {
+  color: #d8d1ed;
+  line-height: 1.45;
 }
 
 .registration-form {
-  gap: 1rem;
-}
-
-.form-section,
-.org-section {
-  border-radius: 24px;
-  gap: 1rem;
-  padding: clamp(1rem, 3vw, 1.25rem);
-  animation: ee-motion-card-enter var(--ee-duration-slow, 260ms) var(--ee-easing-standard, ease) both;
-}
-
-.registration-form > :nth-child(2) {
-  animation-delay: 45ms;
-}
-
-.registration-form > :nth-child(3) {
-  animation-delay: 90ms;
-}
-
-.registration-form > :nth-child(4) {
-  animation-delay: 135ms;
-}
-
-.section-title,
-.org-header {
-  align-items: start;
   display: grid;
   gap: 0.85rem;
-  grid-template-columns: auto 1fr;
-}
-
-.org-header {
-  grid-template-columns: 1fr auto;
-}
-
-.section-title > span {
-  align-items: center;
-  background: rgba(92, 200, 255, 0.13);
-  border: 1px solid rgba(92, 200, 255, 0.34);
-  border-radius: 999px;
-  color: #c7efff;
-  display: inline-flex;
-  font-size: 0.8rem;
-  font-weight: 900;
-  height: 2.25rem;
-  justify-content: center;
-  width: 2.25rem;
 }
 
 .field-grid {
   display: grid;
-  gap: 1rem;
+  gap: 0.85rem;
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
 .field {
-  color: #f7f3ff;
+  color: #f8f4ff;
   display: grid;
+  font-size: 0.82rem;
   font-weight: 850;
-  gap: 0.45rem;
+  gap: 0.4rem;
 }
 
 .field > span {
-  font-size: 0.95rem;
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
 }
 
-.field input,
-.field select {
-  background: rgba(255, 255, 255, 0.08);
-  border: 1px solid rgba(184, 197, 255, 0.18);
-  border-radius: 18px;
-  color: #f7f3ff;
+input,
+select {
+  background: rgba(2, 6, 23, 0.62);
+  border: 1px solid rgba(184, 197, 255, 0.14);
+  border-radius: 8px;
+  color: #f8f4ff;
   font: inherit;
-  font-size: 1rem;
-  min-height: 3.35rem;
-  padding: 0.9rem 1rem;
+  min-height: 2.75rem;
+  padding: 0.72rem 0.85rem;
   width: 100%;
-  transition:
-    border-color var(--ee-duration-fast, 120ms) var(--ee-easing-standard, ease),
-    background var(--ee-duration-fast, 120ms) var(--ee-easing-standard, ease),
-    box-shadow var(--ee-duration-fast, 120ms) var(--ee-easing-standard, ease);
-}
-
-.field input::placeholder {
-  color: rgba(200, 198, 223, 0.72);
-}
-
-.field select option {
-  background: #0b1026;
-  color: #f7f3ff;
 }
 
-.field input.ng-invalid.ng-touched,
-.field select.ng-invalid.ng-touched {
-  border-color: rgba(255, 122, 154, 0.62);
+input::placeholder {
+  color: rgba(216, 209, 237, 0.55);
 }
 
-.field-error,
-.auth-error,
-.warning {
-  color: #ffc4d2 !important;
+select option {
+  background: #080a24;
+  color: #f8f4ff;
 }
 
-.role-preview {
+.org-inline {
+  background: rgba(255, 255, 255, 0.035);
+  border: 1px solid rgba(184, 197, 255, 0.12);
+  border-radius: 10px;
   display: grid;
   gap: 0.75rem;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.role-preview article,
-.benefit-list article {
-  border-radius: 18px;
-  display: grid;
-  gap: 0.25rem;
-  padding: 0.9rem;
-}
-
-.role-preview strong,
-.benefit-list strong,
-.setup-summary strong {
-  color: #f7f3ff;
-}
-
-.org-section {
-  background:
-    radial-gradient(circle at 90% 12%, rgba(244, 201, 93, 0.13), transparent 18rem),
-    linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035));
-}
-
-.switch {
-  cursor: pointer;
-  display: inline-flex;
+  padding: 0.75rem 0.85rem;
 }
 
-.switch input {
-  height: 1px;
-  opacity: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.switch span {
-  background: rgba(255, 255, 255, 0.08);
-  border: 1px solid rgba(184, 197, 255, 0.2);
-  border-radius: 999px;
-  height: 2rem;
-  position: relative;
-  transition: background 180ms ease, border-color 180ms ease;
-  width: 3.65rem;
-}
-
-.switch span::after {
-  background: #c8c6df;
-  border-radius: 999px;
-  content: '';
-  height: 1.42rem;
-  left: 0.25rem;
-  position: absolute;
-  top: 0.23rem;
-  transition: transform 180ms ease, background 180ms ease;
-  width: 1.42rem;
-}
-
-.switch input:checked + span {
-  background: rgba(92, 200, 255, 0.18);
-  border-color: rgba(92, 200, 255, 0.45);
-}
-
-.switch input:checked + span::after {
-  background: #5cc8ff;
-  transform: translateX(1.62rem);
-}
-
-.org-disclosure {
-  animation: reveal 180ms ease both;
+.check-row {
+  align-items: start;
   display: grid;
-  gap: 1rem;
+  gap: 0.6rem;
+  grid-template-columns: auto 1fr;
 }
 
-.setup-summary {
-  background: rgba(255, 255, 255, 0.055);
-  border: 1px solid rgba(184, 197, 255, 0.14);
-  border-radius: 18px;
-  gap: 0.35rem;
-  padding: 0.9rem;
+.check-row input {
+  accent-color: #8b4df4;
+  min-height: auto;
+  margin-top: 0.1rem;
+  width: auto;
 }
 
-.setup-summary--flat {
+.check-row strong {
+  color: #fff;
   display: block;
 }
 
-.password-row {
-  position: relative;
-}
-
-.password-row input {
-  padding-right: 5.3rem;
-}
-
-.show-password {
-  background: rgba(255, 255, 255, 0.075);
-  border: 1px solid rgba(184, 197, 255, 0.16);
-  border-radius: 999px;
-  color: #f7f3ff;
+.text-toggle {
+  background: none;
+  border: 0;
+  color: #d6b26b;
   cursor: pointer;
   font: inherit;
-  font-size: 0.82rem;
-  font-weight: 900;
-  min-height: 2.15rem;
-  padding: 0 0.75rem;
-  position: absolute;
-  right: 0.6rem;
-  top: 0.6rem;
-  transition:
-    transform var(--ee-duration-fast, 120ms) var(--ee-easing-standard, ease),
-    background var(--ee-duration-fast, 120ms) var(--ee-easing-standard, ease);
+  font-size: 0.72rem;
+  padding: 0;
+  text-decoration: underline;
 }
 
-.show-password:active {
-  transform: var(--ee-press-scale, scale(0.98));
+.field-error,
+.auth-error,
+.warning {
+  color: #ffc4d2;
 }
 
 .auth-error {
-  animation: ee-motion-slide-up var(--ee-duration-base, 180ms) var(--ee-easing-standard, ease) both;
   background: rgba(255, 122, 154, 0.12);
   border: 1px solid rgba(255, 122, 154, 0.3);
-  border-radius: 16px;
+  border-radius: 10px;
   font-weight: 800;
-  padding: 0.8rem 0.9rem;
+  padding: 0.75rem 0.85rem;
 }
 
 .registration-submit {
-  background: linear-gradient(135deg, #7c3aed, #a78bfa 52%, #5cc8ff);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 999px;
-  box-shadow: 0 16px 38px rgba(92, 200, 255, 0.18);
+  align-items: center;
+  background: linear-gradient(135deg, #8b4df4, #5b2dff);
+  border: 1px solid rgba(210, 190, 255, 0.24);
+  border-radius: 8px;
+  box-shadow: 0 16px 34px rgba(97, 51, 240, 0.22);
   color: #fff;
   cursor: pointer;
+  display: inline-flex;
   font: inherit;
   font-weight: 900;
-  min-height: 3.35rem;
-  padding: 0.9rem 1.1rem;
-  transition:
-    transform var(--ee-duration-fast, 120ms) var(--ee-easing-standard, ease),
-    opacity var(--ee-duration-base, 180ms) var(--ee-easing-standard, ease),
-    box-shadow var(--ee-duration-base, 180ms) var(--ee-easing-standard, ease);
-}
-
-.registration-submit:hover:not(:disabled) {
-  transform: var(--ee-hover-lift, translateY(-3px));
-}
-
-.registration-submit:active:not(:disabled) {
-  transform: var(--ee-press-scale, scale(0.98));
+  gap: 1rem;
+  justify-content: center;
+  min-height: 3rem;
+  padding: 0.78rem 1rem;
 }
 
 .registration-submit:disabled {
@@ -412,177 +206,91 @@ h2 {
 }
 
 .login-link {
-  color: #c8c6df;
+  font-size: 0.82rem;
   text-align: center;
 }
 
 .login-link a {
-  color: #f4c95d;
+  color: #fff;
   font-weight: 900;
+  text-decoration: underline;
 }
 
-.image-panel {
-  border-radius: 28px;
-  min-height: 18rem;
-  overflow: hidden;
-  padding: 1rem;
-  position: relative;
-}
-
-.image-panel::before {
-  background:
-    radial-gradient(circle at 25% 25%, rgba(167, 139, 250, 0.34), transparent 10rem),
-    radial-gradient(circle at 75% 30%, rgba(92, 200, 255, 0.24), transparent 11rem),
-    radial-gradient(circle at 60% 85%, rgba(244, 201, 93, 0.16), transparent 12rem);
-  content: '';
-  inset: 0;
-  position: absolute;
-}
-
-.preview-card {
-  background: rgba(8, 10, 28, 0.62);
-  border: 1px solid rgba(184, 197, 255, 0.18);
-  border-radius: 18px;
+.registration-story {
+  background: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
+  border: 1px solid rgba(184, 197, 255, 0.14);
+  border-radius: 10px;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
   display: grid;
-  gap: 0.25rem;
-  padding: 0.9rem;
-  position: absolute;
-  width: min(16rem, 72%);
-  animation: ee-motion-card-enter var(--ee-duration-slow, 260ms) var(--ee-easing-standard, ease) both;
+  gap: 1.2rem;
+  padding: clamp(1.2rem, 3vw, 2rem);
 }
 
-.preview-card span,
-.benefit-list span {
-  color: #f4c95d;
-  font-size: 0.72rem;
+.story-title {
+  color: #fff;
   font-weight: 900;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-}
-
-.preview-card--one {
-  left: 1.2rem;
-  top: 1.2rem;
-}
-
-.preview-card--two {
-  animation-delay: 60ms;
-  right: 1.2rem;
-  top: 7rem;
 }
 
-.preview-card--three {
-  animation-delay: 120ms;
-  bottom: 1.2rem;
-  left: 2.5rem;
-}
-
-.benefit-list {
-  gap: 0.75rem;
-}
-
-.journey-preview {
-  border-radius: 24px;
+.registration-story article {
+  align-items: center;
+  border-bottom: 1px solid rgba(184, 197, 255, 0.08);
+  display: grid;
   gap: 1rem;
-  padding: 1rem;
+  grid-template-columns: auto 1fr;
+  min-height: 6rem;
+  padding-block: 1rem;
 }
 
-.journey-preview ol {
-  display: grid;
-  gap: 0.75rem;
-  list-style: none;
-  margin: 0;
-  padding: 0;
+.registration-story article:last-child {
+  border-bottom: 0;
 }
 
-.journey-preview li {
-  align-items: center;
+.registration-story span {
+  background: linear-gradient(135deg, #7047d9, #2b225c);
+  border: 1px solid rgba(195, 172, 255, 0.25);
+  border-radius: 10px;
+  color: #f7d27e;
   display: grid;
-  gap: 0.75rem;
-  grid-template-columns: auto 1fr;
-}
-
-.journey-preview li span {
-  align-items: center;
-  background: linear-gradient(135deg, #7c3aed, #5cc8ff);
-  border-radius: 999px;
-  display: inline-flex;
+  font-size: 0.78rem;
   font-weight: 900;
-  height: 2rem;
-  justify-content: center;
-  width: 2rem;
+  height: 3rem;
+  place-items: center;
+  width: 3rem;
 }
 
-:where(a, button, input, select):focus-visible,
-.switch input:focus-visible + span {
-  outline: 2px solid rgba(92, 200, 255, 0.92);
-  outline-offset: 3px;
-  box-shadow: 0 0 0 5px rgba(92, 200, 255, 0.16);
+.registration-story strong {
+  color: #eee8ff;
 }
 
-@keyframes reveal {
-  from {
-    opacity: 0;
-    transform: translateY(-6px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+:where(a, button, input, select):focus-visible {
+  outline: 2px solid rgba(132, 92, 255, 0.94);
+  outline-offset: 3px;
 }
 
-@media (max-width: 1020px) {
+@media (max-width: 960px) {
   .registration-stage {
-    grid-template-columns: 1fr;
+    gap: 1.5rem;
+    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.82fr);
+    padding: 1.5rem;
   }
 
   .registration-story {
-    position: static;
+    padding: 1rem;
   }
 }
 
-@media (max-width: 680px) {
+@media (max-width: 760px) {
   .registration-shell {
-    padding: 0.75rem;
-  }
-
-  .registration-card,
-  .registration-story {
-    border-radius: 24px;
+    padding: 0;
   }
 
-  .field-grid,
-  .role-preview {
+  .registration-stage {
+    border-radius: 0;
     grid-template-columns: 1fr;
+    min-height: 100vh;
   }
 
-  .org-header {
+  .field-grid {
     grid-template-columns: 1fr;
   }
-
-  h1 {
-    font-size: clamp(2.65rem, 17vw, 4rem);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .registration-submit,
-  .switch span,
-  .switch span::after,
-  .org-disclosure,
-  .registration-card,
-  .registration-story,
-  .form-section,
-  .org-section,
-  .auth-error,
-  .preview-card {
-    animation: none;
-    transition: none;
-  }
-
-  .registration-submit:hover:not(:disabled),
-  .registration-submit:active:not(:disabled),
-  .show-password:active {
-    transform: none;
-  }
 }