diff --git a/docs-app/src/styles/app.css b/docs-app/src/styles/app.css
index dbc69b8..ff66705 100644
--- a/docs-app/src/styles/app.css
+++ b/docs-app/src/styles/app.css
@@ -185,32 +185,65 @@ body {
   justify-content: space-around;
 }
 
-/* demo container tweaks */
-.featured-demo {
-  button {
-    color: black;
-    background: white;
-    border: 1px solid;
-    padding: 0 0.25rem;
-  }
-
-  &[data-demo-fit] {
-    .glimdown-render {
-      max-height: unset;
-    }
-  }
-
-  &[data-demo-tight] {
-    .glimdown-render {
-      padding: 2rem;
-    }
-  }
+/*
+ * Live demo presentation
+ *
+ * kolay renders every ```gjs live``` fence's output into a
+ * .glimdown-render element; style it as a card so demos are visually
+ * contained in both themes, and keep the demos' native form controls
+ * legible in dark mode.
+ */
+.repl-sdk__demo,
+.glimdown-render {
+  border: 1px solid light-dark(#e2e8f0, #334155);
+  border-radius: 0.5rem;
+  padding: 1.5rem;
+  margin-block: 1rem;
+  background: light-dark(#f8fafc, #0b1120);
+  color: light-dark(#0f172a, #e2e8f0);
+}
+
+.repl-sdk__demo input,
+.repl-sdk__demo select,
+.repl-sdk__demo textarea,
+.glimdown-render input,
+.glimdown-render select,
+.glimdown-render textarea {
+  background: light-dark(white, #1e293b);
+  color: light-dark(black, #e2e8f0);
+  border-color: light-dark(#94a3b8, #475569);
+}
+
+.repl-sdk__demo button,
+.glimdown-render button {
+  color: light-dark(black, white);
+  background: light-dark(white, #334155);
+  border: 1px solid light-dark(#94a3b8, #475569);
+  border-radius: 0.25rem;
+  padding: 0.125rem 0.75rem;
+}
+
+.repl-sdk__demo button:hover,
+.glimdown-render button:hover {
+  background: light-dark(#f1f5f9, #475569);
+}
+
+.repl-sdk__demo a,
+.glimdown-render a {
+  color: light-dark(#4f46e5, #93c5fd);
+}
+
+.featured-demo[data-demo-fit] .repl-sdk__demo,
+.glimdown-render {
+  max-height: unset;
 }
 
+.featured-demo[data-demo-tight] .repl-sdk__demo,
 .glimdown-render {
-  input,
-  select,
-  textarea {
-    color: black;
-  }
+  padding: 2rem;
+}
+
+hr {
+  border: none;
+  border-top: 1px solid light-dark(#e2e8f0, #334155);
 }
diff --git a/docs-app/src/templates/index.gts b/docs-app/src/templates/index.gts
index 1b74967..460d55a 100644
--- a/docs-app/src/templates/index.gts
+++ b/docs-app/src/templates/index.gts
@@ -17,8 +17,11 @@ import {
       </TopRight>
     </:header>
     <:tagline>
-      <h1 class="landing-title">Form</h1>
-      <p>
+      <header class="landing-hero">
+        <p class="landing-scope">@universal-ember/</p>
+        <h1 class="landing-title">form</h1>
+      </header>
+      <p class="landing-tagline">
         The Ember.js library that distills the common behavior and accessibility
         best practices of forms into reusable components, without any opinions
         on specific markup or styling. Use it to build your forms directly, or
@@ -42,8 +45,6 @@ import {
         is none of this: all the flexibility, without reinventing the wheel.
       </div>
 
-      <br /><br />
-
       <div class="landing-features">
         <Article class="flex flex-wrap gap-12 justify-around">
 
@@ -91,21 +92,55 @@ import {
       </div>
 
       <style>
+        .landing-hero {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          gap: 0.25rem;
+        }
+
+        .landing-scope {
+          font-family: var(--font-display);
+          font-style: normal;
+          font-size: clamp(1rem, 2.5vw, 1.5rem);
+          font-weight: 500;
+          letter-spacing: 0.05em;
+          opacity: 0.85;
+          margin: 0;
+        }
+
         .landing-title {
-          font-size: 1.875rem;
-          margin-bottom: 1rem;
+          font-family: var(--font-display);
+          font-style: normal;
+          font-size: clamp(4rem, 12vw, 7rem);
+          font-weight: 800;
+          line-height: 1;
+          margin: 0 0 1rem;
+          padding: 0.05em 0.25em 0.12em;
+          border-radius: 0.12em;
+          background: rgb(30 30 42 / 85%);
+          color: white;
+          box-shadow: 0 8px 24px rgb(0 0 0 / 35%);
+        }
+
+        .landing-tagline {
+          max-width: 46ch;
+          margin: 0;
         }
 
         .landing-blurb {
           font-size: 1.5rem;
-          width: 50%;
+          max-width: 60ch;
           margin-inline: auto;
-          padding: 2rem;
+          padding: 2rem 1.5rem;
+          text-align: center;
+          text-wrap: balance;
         }
 
         .landing-features {
-          width: 66%;
+          max-width: 72rem;
           margin-inline: auto;
+          padding: 1rem 1.5rem 3rem;
         }
 
         .landing-feature {