Replace the remaining homepage placeholder illustrations with the final screenshot images that now exist in /wwwroot/images/home/.

PlotLine/Views/Home/Index.cshtml

@@ -178,11 +178,13 @@
             </div>
 
             <div class="problem-section reveal-section">
-                <div class="problem-visual visual-threads" aria-hidden="true">
-                    <span>Set up</span>
-                    <span>Complicate</span>
-                    <span>Reveal</span>
-                    <span>Pay off</span>
+                <div class="problem-visual problem-visual--image visual-threads">
+                    <img class="home-feature-image"
+                         src="~/images/home/plot-thread-map.webp"
+                         width="1200"
+                         height="434"
+                         loading="lazy"
+                         alt="Plot threads visualised across scenes in PlotDirector" />
                 </div>
                 <div class="problem-copy">
                     <p class="marketing-eyebrow">Keeping plot threads organised</p>
@@ -192,11 +194,13 @@
             </div>
 
             <div class="problem-section problem-section--reverse reveal-section">
-                <div class="problem-visual visual-series" aria-hidden="true">
-                    <span>Book I</span>
-                    <span>Book II</span>
-                    <span>Book III</span>
-                    <span>Prequel</span>
+                <div class="problem-visual problem-visual--image visual-series">
+                    <img class="home-feature-image"
+                         src="~/images/home/series-dashboard.webp"
+                         width="1200"
+                         height="596"
+                         loading="lazy"
+                         alt="Series dashboard showing books, progress and writing statistics" />
                 </div>
                 <div class="problem-copy">
                     <p class="marketing-eyebrow">Managing series and multiple books</p>
@@ -206,12 +210,13 @@
             </div>
 
             <div class="problem-section reveal-section">
-                <div class="problem-visual visual-flow" aria-hidden="true">
-                    <div class="flow-line"></div>
-                    <span style="--pos: 12%">Quiet</span>
-                    <span style="--pos: 34%">Tension</span>
-                    <span style="--pos: 61%">Break</span>
-                    <span style="--pos: 84%">Climax</span>
+                <div class="problem-visual problem-visual--image visual-flow">
+                    <img class="home-feature-image"
+                         src="~/images/home/story-timeline.webp"
+                         width="1200"
+                         height="660"
+                         loading="lazy"
+                         alt="Story pacing and emotional timeline visualisation in PlotDirector" />
                 </div>
                 <div class="problem-copy">
                     <p class="marketing-eyebrow">Understanding pacing and emotional flow</p>

PlotLine/wwwroot/css/plotline-theme.css

@@ -2357,17 +2357,12 @@ a:focus-visible {
 .home-image-card img,
 .home-feature-image {
   display: block;
+  max-width: 100%;
   width: 100%;
   height: auto;
 }
 
-.home-hero-image {
-  aspect-ratio: 4 / 3;
-}
-
 .home-hero-image img {
-  height: 100%;
-  object-fit: contain;
   background: #f8f1e7;
 }
 
@@ -2732,9 +2727,10 @@ a:focus-visible {
 }
 
 .problem-visual--image .home-feature-image {
+  grid-column: 1 / -1;
+  justify-self: center;
   border-radius: 18px;
   box-shadow: 0 18px 42px rgba(31, 42, 68, 0.12);
-  object-fit: contain;
 }
 
 .visual-plot {