docs: replace demo animation with screenshots

docs/index.html

@@ -148,10 +148,23 @@
         <div class="container">
           <div class="demo-frame">
             <div class="demo-caption">
-              <strong>Workspaces, sessions, transcripts, terminals — one Pi web UI.</strong>
+              <strong>Workspaces, sessions, transcripts, files — one Pi web UI on every screen.</strong>
               <span>Bring your own repositories.</span>
             </div>
-            <img src="assets/pi-web-demo.gif" alt="PI WEB browser UI demo" />
+            <div class="demo-gallery" aria-label="PI WEB screenshots">
+              <figure class="demo-shot demo-shot-desktop">
+                <img src="assets/pi-web-desktop.png" alt="PI WEB desktop screenshot showing an agent-created pi-web.dev screenshot selected in the file preview" />
+                <figcaption>Desktop: chat beside workspace file preview.</figcaption>
+              </figure>
+              <figure class="demo-shot">
+                <img src="assets/pi-web-tablet.png" alt="PI WEB tablet screenshot" />
+                <figcaption>Tablet: the same session from a wider touch screen.</figcaption>
+              </figure>
+              <figure class="demo-shot demo-shot-mobile">
+                <img src="assets/pi-web-mobile.png" alt="PI WEB mobile chat screenshot" />
+                <figcaption>Mobile: the chat stays readable on the go.</figcaption>
+              </figure>
+            </div>
           </div>
         </div>
       </section>

docs/styles.css

@@ -618,6 +618,44 @@ code .comment,
   color: var(--muted);
 }
 
+.demo-gallery {
+  display: grid;
+  grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.72fr);
+  gap: 18px;
+  padding: 18px;
+}
+
+.demo-shot {
+  display: grid;
+  gap: 10px;
+  align-content: start;
+  margin: 0;
+}
+
+.demo-shot-desktop {
+  grid-row: span 2;
+}
+
+.demo-shot img {
+  overflow: hidden;
+  width: 100%;
+  border: 1px solid var(--line);
+  border-radius: 16px;
+  background: var(--panel-strong);
+  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.2);
+}
+
+.demo-shot-mobile img {
+  width: min(100%, 250px);
+  margin-inline: auto;
+}
+
+.demo-shot figcaption {
+  color: var(--muted-2);
+  font-size: 0.9rem;
+  line-height: 1.45;
+}
+
 .manifesto-section {
   padding-top: 46px;
 }
@@ -1076,6 +1114,14 @@ html[data-theme="light"] .comment {
   .manifesto-lines {
     align-content: start;
   }
+
+  .demo-gallery {
+    grid-template-columns: 1fr;
+  }
+
+  .demo-shot-desktop {
+    grid-row: auto;
+  }
 }
 
 @media (max-width: 820px) {