New renders: front in the hero, back beside the pilot form

index.html

@@ -56,7 +56,7 @@
   </div>
   <div class="hero-media">
     <div class="render-box">
-      <img src="assets/case-front.webp" width="1400" height="871" fetchpriority="high" alt="The PrivacyNote unit, a small case with a dark lid, beside a phone showing a recording waveform">
+      <img src="assets/unit-front.webp" width="1200" height="750" fetchpriority="high" alt="The PrivacyNote unit, a small black case with two antennas, beside a phone showing a recording waveform">
     </div>
   </div>
 </section>
@@ -262,6 +262,9 @@
       <p class="eyebrow">The pilot</p>
       <h2 id="pilot-title">Take one of the first pilots.</h2>
       <p>One free unit, one clinician, a few weeks. If it does not earn its shelf space, we take it back. You keep your numbers and the evidence either way.</p>
+      <div class="render-box pilot-render">
+        <img src="assets/unit-back.webp" width="1200" height="750" loading="lazy" alt="The back of the PrivacyNote unit: two antennas and a row of ports">
+      </div>
     </div>
     <div class="form-card">
       <form id="pilot-form" action="https://formspree.io/f/mrpekree" method="POST">

styles.css

@@ -245,6 +245,9 @@ a.ev-title { color: var(--link); text-decoration: underline; text-underline-offs
 .pilot-text { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
 .pilot h2 { font-family: var(--serif); font-weight: 600; font-size: 44px; line-height: 1.1; letter-spacing: -0.01em; color: var(--band-text); }
 .pilot-text p { font-size: 19px; line-height: 1.55; color: var(--band-soft); max-width: 480px; }
+.pilot-render { max-width: 480px; margin-top: 12px; }
+/* Phones: the form comes first. Lazy loading means a hidden render is never downloaded. */
+@media (max-width: 719px) { .pilot-render { display: none; } }
 .form-card { flex: 1 1 460px; min-width: 0; background: var(--surface); color: var(--text); border-radius: 16px; padding: 32px; }
 .form-card form { display: flex; flex-direction: column; gap: 18px; }
 .field { display: flex; flex-direction: column; gap: 6px; }