Show the spotlight's claim on two devices

Resources/css/styles.css

@@ -593,10 +593,10 @@ pre {
     border: 1px solid var(--rule);
     border-radius: 1.5rem;
     padding: clamp(2rem, 5vw, 3.5rem);
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: clamp(2rem, 5vw, 3.5rem);
-    align-items: center;
+}
+
+.spotlight-copy {
+    max-width: 34em;
 }
 
 .spotlight-title {
@@ -613,25 +613,46 @@ pre {
     margin-bottom: 0;
 }
 
-@media (max-width: 800px) {
-    .spotlight {
-        grid-template-columns: 1fr;
-    }
+/* Window and phone standing on one line. At this size the silhouettes carry the section's
+   claim, not the pixels — so they are sized to be told apart, not to be read. */
+.device-row {
+    margin-top: clamp(2.5rem, 5vw, 3.5rem);
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    gap: clamp(1rem, 3vw, 2.25rem);
 }
 
-/* The screenshot is a bare capture, so the rounding and shadow give it its device edge.
-   Cropped from the top: the first rows of the archive carry the message. */
-.spotlight-shot {
-    width: 100%;
-    max-width: 22rem;
-    max-height: 30rem;
-    margin-inline: auto;
-    object-fit: cover;
-    object-position: top;
-    border-radius: 1.5rem;
+/* Bare captures: the rounding and the shadow are what give them a device edge. The
+   aspect ratio holds the box before the image arrives, so the section below cannot jump. */
+.device-shot {
+    height: auto;
     box-shadow: 0 30px 60px -30px rgba(20, 28, 39, 0.5);
-    /* The crop would otherwise cut a row in half; fading it out reads as "the list goes on". */
-    mask-image: linear-gradient(to bottom, #000 80%, transparent);
+}
+
+/* The capture carries the window's own squircle corners as alpha, which a circular radius can
+   never match — so the radius here only shapes the shadow, and the corners come from the file. */
+.device-mac {
+    width: 58%;
+    aspect-ratio: 1440 / 900;
+    border-radius: 1.15rem;
+}
+
+.device-iphone {
+    width: 18%;
+    aspect-ratio: 630 / 1368;
+    border-radius: 1rem;
+}
+
+/* Narrow enough that the pair would shrink out of recognition; they take more of the row. */
+@media (max-width: 700px) {
+    .device-mac {
+        width: 66%;
+    }
+
+    .device-iphone {
+        width: 21%;
+    }
 }
 
 /* ---------- Keep it: the arc closes, same filename, at rest ---------- */

Sources/PDFArchiverWebsite/Localization/SiteStrings+English.swift

@@ -66,8 +66,18 @@ extension SiteStrings {
             folder.
             """
         ],
-        spotlightImagePath: "/assets/img/screenshots/archive-iphone-en.png",
-        spotlightImageAlt: "The PDF Archiver archive on an iPhone, listing documents with their dates and tags",
+        spotlightShots: [
+            Screenshot(
+                device: "mac",
+                path: "/assets/img/screenshots/tagging-mac-en.png",
+                alt: "Tagging a scanned receipt on a Mac: the document beside its date, description and tags"
+            ),
+            Screenshot(
+                device: "iphone",
+                path: "/assets/img/screenshots/archive-iphone-en.png",
+                alt: "The same archive on an iPhone, listing documents with their dates and tags"
+            )
+        ],
 
         keepTitle: "Keep\u{00A0}it.",
         keepLead: """

Sources/PDFArchiverWebsite/Localization/SiteStrings+German.swift

@@ -66,8 +66,18 @@ extension SiteStrings {
             Download-Ordner.
             """
         ],
-        spotlightImagePath: "/assets/img/screenshots/archive-iphone-de.png",
-        spotlightImageAlt: "Das Archiv von PDF Archiver auf einem iPhone, mit Dokumenten samt Datum und Tags",
+        spotlightShots: [
+            Screenshot(
+                device: "mac",
+                path: "/assets/img/screenshots/tagging-mac-de.png",
+                alt: "Ein gescannter Beleg wird am Mac getaggt: das Dokument neben Datum, Beschreibung und Tags"
+            ),
+            Screenshot(
+                device: "iphone",
+                path: "/assets/img/screenshots/archive-iphone-de.png",
+                alt: "Dasselbe Archiv auf einem iPhone, mit Dokumenten samt Datum und Tags"
+            )
+        ],
 
         keepTitle: "Keep\u{00A0}it.",
         keepLead: """

Sources/PDFArchiverWebsite/Localization/SiteStrings.swift

@@ -36,6 +36,14 @@ struct SiteStrings {
         let body: String
     }
 
+    /// One capture in the spotlight's device row.
+    struct Screenshot {
+        /// Names the `.device-<value>` class the stylesheet sizes and rounds the shot by.
+        let device: String
+        let path: String
+        let alt: String
+    }
+
     struct Testimonial {
         let initials: String
         let source: String
@@ -72,8 +80,8 @@ struct SiteStrings {
 
     let spotlightTitle: String
     let spotlightBody: [String]
-    let spotlightImagePath: String
-    let spotlightImageAlt: String
+    /// Mac and iPhone, in the order the row puts them in.
+    let spotlightShots: [Screenshot]
 
     let keepTitle: String
     let keepLead: String

Sources/PDFArchiverWebsite/Theme/HomeContent.swift

@@ -136,19 +136,21 @@ private extension Node where Context == HTML.BodyContext {
                 .div(
                     .class("spotlight"),
                     .div(
+                        .class("spotlight-copy"),
                         .h3(.class("spotlight-title"), .text(strings.spotlightTitle)),
                         .forEach(strings.spotlightBody) { .p(.text($0)) }
                     ),
-                    .img(
-                        .class("spotlight-shot"),
-                        .src(strings.spotlightImagePath),
-                        .alt(strings.spotlightImageAlt),
-                        // The intrinsic size of the screenshot: it reserves the box before the
-                        // image arrives, so the section below it does not jump.
-                        .attribute(named: "width", value: "1320"),
-                        .attribute(named: "height", value: "2868"),
-                        .attribute(named: "loading", value: "lazy"),
-                        .attribute(named: "decoding", value: "async")
+                    .div(
+                        .class("device-row"),
+                        .forEach(strings.spotlightShots) { shot in
+                            .img(
+                                .class("device-shot device-\(shot.device)"),
+                                .src(shot.path),
+                                .alt(shot.alt),
+                                .attribute(named: "loading", value: "lazy"),
+                                .attribute(named: "decoding", value: "async")
+                            )
+                        }
                     )
                 )
             )