Draw the hero phone's bezel at the phone's own scale

A percentage padding is of the containing block's width, and the hero
phone is positioned absolutely in the hero visual at a quarter of its
width, so its 3.4% bezel came out four times too thick. The bezel is now
the screen's margin, a percentage of the phone's own width wherever the
phone sits; the gallery phones look as before.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

tests/Screenshots/DemoData.php

@@ -42,7 +42,7 @@ final class DemoData
     public static function shares(): void
     {
         $shares = [
-            ['token' => self::DELIVERY_TOKEN, 'daysAgo' => 0, 'expiresAfterDays' => 7, 'downloads' => 3, 'options' => [],
+            ['token' => self::DELIVERY_TOKEN, 'daysAgo' => 0, 'expiresAfterDays' => 7, 'downloads' => 3, 'options' => ['max_downloads' => 5],
                 'files' => ['Q3 Report.pdf' => 2400, 'Contract 2026.pdf' => 380, 'Product photos/hero-shot.jpg' => 4800, 'Product photos/detail.jpg' => 3900]],
             ['token' => self::PROTECTED_TOKEN, 'daysAgo' => 1, 'expiresAfterDays' => 3, 'downloads' => 1, 'options' => ['password' => self::PROTECTED_PASSWORD, 'max_downloads' => 3],
                 'files' => ['Payroll September.xlsx' => 210, 'Tax statement 2025.pdf' => 640]],

website/css/device-frame.css

@@ -113,14 +113,17 @@
 
 /* ---------------------------------------------------------------- phone */
 
+/* The bezel is the screen's margin, not the phone's padding: a percentage margin is of the phone's
+   own width, where a padding would be of whatever the phone is positioned in (the hero). */
 .device--phone {
-    padding: 3.4%;
+    display: flow-root;
     border-radius: 15% / 7%;
     background: var(--bezel);
     box-shadow: inset 0 0 0 2px var(--bezel-edge), 0 24px 48px -20px var(--device-shadow);
 }
 
 .device--phone .device__screen {
+    margin: 3.4%;
     aspect-ratio: 393 / 852;
     border-radius: 12.5% / 5.8%;
 }

website/index.html

@@ -320,7 +320,7 @@
             <article class="feature">
                 <span class="badge-icon" aria-hidden="true"><svg viewBox="0 0 100 100"><use href="#s-cookie-6"/></svg><svg class="icon" aria-hidden="true"><use href="#i-counter-5"/></svg></span>
                 <h3>Download limits</h3>
-                <p>Close a share after a set number of downloads.</p>
+                <p>Close a share after a set number of downloads. The page tells recipients how many are left, and each one then has an hour for all the files and the ZIP.</p>
             </article>
             <article class="feature">
                 <span class="badge-icon badge-icon--secondary" aria-hidden="true"><svg viewBox="0 0 100 100"><use href="#s-cookie-6"/></svg><svg class="icon" aria-hidden="true"><use href="#i-folder-zip"/></svg></span>
@@ -335,7 +335,7 @@
             <article class="feature">
                 <span class="badge-icon" aria-hidden="true"><svg viewBox="0 0 100 100"><use href="#s-cookie-6"/></svg><svg class="icon" aria-hidden="true"><use href="#i-dashboard"/></svg></span>
                 <h3>Admin dashboard</h3>
-                <p>Every share with its size, downloads and expiry; storage use at a glance.</p>
+                <p>Every share with its size, downloads against its limit and expiry; storage use and the installed version at a glance.</p>
             </article>
             <article class="feature">
                 <span class="badge-icon badge-icon--secondary" aria-hidden="true"><svg viewBox="0 0 100 100"><use href="#s-cookie-6"/></svg><svg class="icon" aria-hidden="true"><use href="#i-admin-panel-settings"/></svg></span>
@@ -440,7 +440,7 @@
                                      data-light-src="img/screenshots/desktop/light/04-download-800.webp" data-light-srcset="img/screenshots/desktop/light/04-download-1600.webp 1600w, img/screenshots/desktop/light/04-download-800.webp 800w"
                                      data-dark-src="img/screenshots/desktop/dark/04-download-800.webp" data-dark-srcset="img/screenshots/desktop/dark/04-download-1600.webp 1600w, img/screenshots/desktop/dark/04-download-800.webp 800w"
                                      width="1512" height="982" loading="lazy" decoding="async"
-                                     alt="The download page a recipient sees, listing the shared files">
+                                     alt="The download page a recipient sees, listing the shared files and how many downloads are left">
                             </div>
                         </div>
                     </div>
@@ -456,7 +456,7 @@
                                      data-light-src="img/screenshots/desktop/light/05-admin-dashboard-800.webp" data-light-srcset="img/screenshots/desktop/light/05-admin-dashboard-1600.webp 1600w, img/screenshots/desktop/light/05-admin-dashboard-800.webp 800w"
                                      data-dark-src="img/screenshots/desktop/dark/05-admin-dashboard-800.webp" data-dark-srcset="img/screenshots/desktop/dark/05-admin-dashboard-1600.webp 1600w, img/screenshots/desktop/dark/05-admin-dashboard-800.webp 800w"
                                      width="1512" height="982" loading="lazy" decoding="async"
-                                     alt="The admin dashboard with share and file counts, disk usage and the list of shares with Sort by">
+                                     alt="The admin dashboard with share and file counts, disk usage and the list of shares with Sort by, each with its downloads out of its limit">
                             </div>
                         </div>
                     </div>
@@ -517,7 +517,7 @@
                                  data-light-src="img/screenshots/phone/light/03-download-540.webp" data-light-srcset="img/screenshots/phone/light/03-download-1080.webp 1080w, img/screenshots/phone/light/03-download-540.webp 540w"
                                  data-dark-src="img/screenshots/phone/dark/03-download-540.webp" data-dark-srcset="img/screenshots/phone/dark/03-download-1080.webp 1080w, img/screenshots/phone/dark/03-download-540.webp 540w"
                                  width="393" height="852" loading="lazy" decoding="async"
-                                 alt="The list of shared files on a phone">
+                                 alt="The list of shared files on a phone, with the downloads left">
                         </div>
                     </div>
                     <figcaption><strong>Download on the go</strong><span>Files and a ZIP of all of them.</span></figcaption>