diff --git a/docs/Introduction.md b/docs/Introduction.md
index 4f9ebd5b..ac3e6410 100644
--- a/docs/Introduction.md
+++ b/docs/Introduction.md
@@ -17,9 +17,7 @@ hide_title: true
           <path d="M160-391h45l23-66h104l24 66h44l-97-258h-46l-97 258Zm81-103 38-107h2l38 107h-78Zm319-80v-48q33-14 67.5-21t72.5-7q26 0 51 4t49 10v44q-24-9-48.5-13.5T700-610q-38 0-73 9.5T560-574Zm0 220v-49q33-13.5 67.5-20.25T700-430q26 0 51 4t49 10v44q-24-9-48.5-13.5T700-390q-38 0-73 9t-67 27Zm0-110v-48q33-14 67.5-21t72.5-7q26 0 51 4t49 10v44q-24-9-48.5-13.5T700-500q-38 0-73 9.5T560-464ZM248-300q53.57 0 104.28 12.5Q403-275 452-250v-427q-45-30-97.62-46.5Q301.76-740 248-740q-38 0-74.5 9.5T100-707v434q31-14 70.5-20.5T248-300Zm264 50q50-25 98-37.5T712-300q38 0 78.5 6t69.5 16v-429q-34-17-71.82-25-37.82-8-76.18-8-54 0-104.5 16.5T512-677v427Zm-30 90q-51-38-111-58.5T248-239q-36.54 0-71.77 9T106-208q-23.1 11-44.55-3Q40-225 40-251v-463q0-15 7-27.5T68-761q42-20 87.39-29.5 45.4-9.5 92.61-9.5 63 0 122.5 17T482-731q51-35 109.5-52T712-800q46.87 0 91.93 9.5Q849-781 891-761q14 7 21.5 19.5T920-714v463q0 27.89-22.5 42.45Q875-194 853-208q-34-14-69.23-22.5Q748.54-239 712-239q-63 0-121 21t-109 58ZM276-495Z" />
         </svg>
       </h2>
-      <p className="intro-tagline-subtitle">
-        Welcome to the Documentation - let's put your media server on autopilot!
-      </p>
+      <p className="intro-tagline-subtitle">Welcome to the Documentation - let's put your media server on autopilot!</p>
     </div>
     <div className="intro-cta-row">
       <a className="button button--primary" href="/installation">Get Started</a>
diff --git a/src/css/custom.css b/src/css/custom.css
index 7e097c6d..1836395e 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -145,11 +145,58 @@
   color: #fff;
 }
 
-@media (max-width: 576px) {
+/* On phones and small tablets the desktop 1600/915 panel becomes a short, wide
+   letterbox that crops the art and leaves the gold text floating over a busy
+   photo. Below 768px we drop the fixed ratio, let the content size the panel,
+   fill it with the art under a stronger scrim, and stack the CTA buttons. */
+@media (max-width: 768px) {
+  .intro-landing {
+    margin: 1.25rem auto 2rem;
+  }
+
   .intro-hero-panel {
-    padding: 1.75rem 1rem;
+    aspect-ratio: auto;
+    min-height: 13rem;
+    padding: 2.25rem 1.25rem;
+    /* Fill the panel with the art (the desktop 1600/915 ratio would otherwise
+       leave a short letterbox) under a slightly stronger scrim for legibility. */
+    background-image:
+      linear-gradient(rgba(15, 23, 42, 0.66), rgba(15, 23, 42, 0.66)),
+      url("/img/banner3.webp");
+    background-size: cover, cover;
     background-position: center;
   }
+
+  .intro-tagline-block {
+    padding: 1.1rem 1rem;
+    background: rgba(17, 24, 39, 0.45);
+  }
+
+  .intro-tagline {
+    gap: 0.45rem;
+    margin-bottom: 0.75rem;
+    font-size: clamp(1.8rem, 8vw, 2.4rem);
+  }
+
+  .intro-tagline svg {
+    width: 1.9rem;
+    height: 1.9rem;
+  }
+
+  .intro-tagline-subtitle {
+    font-size: 1rem;
+  }
+
+  .intro-cta-row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.6rem;
+    margin-top: 1.5rem;
+  }
+
+  .intro-cta-row .button {
+    width: 100%;
+  }
 }
 
 .hero-shell {
diff --git a/versioned_docs/version-3.14.0/Introduction.md b/versioned_docs/version-3.14.0/Introduction.md
index 4f9ebd5b..ac3e6410 100644
--- a/versioned_docs/version-3.14.0/Introduction.md
+++ b/versioned_docs/version-3.14.0/Introduction.md
@@ -17,9 +17,7 @@ hide_title: true
           <path d="M160-391h45l23-66h104l24 66h44l-97-258h-46l-97 258Zm81-103 38-107h2l38 107h-78Zm319-80v-48q33-14 67.5-21t72.5-7q26 0 51 4t49 10v44q-24-9-48.5-13.5T700-610q-38 0-73 9.5T560-574Zm0 220v-49q33-13.5 67.5-20.25T700-430q26 0 51 4t49 10v44q-24-9-48.5-13.5T700-390q-38 0-73 9t-67 27Zm0-110v-48q33-14 67.5-21t72.5-7q26 0 51 4t49 10v44q-24-9-48.5-13.5T700-500q-38 0-73 9.5T560-464ZM248-300q53.57 0 104.28 12.5Q403-275 452-250v-427q-45-30-97.62-46.5Q301.76-740 248-740q-38 0-74.5 9.5T100-707v434q31-14 70.5-20.5T248-300Zm264 50q50-25 98-37.5T712-300q38 0 78.5 6t69.5 16v-429q-34-17-71.82-25-37.82-8-76.18-8-54 0-104.5 16.5T512-677v427Zm-30 90q-51-38-111-58.5T248-239q-36.54 0-71.77 9T106-208q-23.1 11-44.55-3Q40-225 40-251v-463q0-15 7-27.5T68-761q42-20 87.39-29.5 45.4-9.5 92.61-9.5 63 0 122.5 17T482-731q51-35 109.5-52T712-800q46.87 0 91.93 9.5Q849-781 891-761q14 7 21.5 19.5T920-714v463q0 27.89-22.5 42.45Q875-194 853-208q-34-14-69.23-22.5Q748.54-239 712-239q-63 0-121 21t-109 58ZM276-495Z" />
         </svg>
       </h2>
-      <p className="intro-tagline-subtitle">
-        Welcome to the Documentation - let's put your media server on autopilot!
-      </p>
+      <p className="intro-tagline-subtitle">Welcome to the Documentation - let's put your media server on autopilot!</p>
     </div>
     <div className="intro-cta-row">
       <a className="button button--primary" href="/installation">Get Started</a>