diff --git a/site/index.html b/site/index.html
index 7c1eaf9..da4b85b 100644
--- a/site/index.html
+++ b/site/index.html
@@ -235,9 +235,9 @@ <h2 class="section__title" id="s2">
 
       <p class="examples__intro">One-shotted. No shared theme. No shared layout.</p>
 
-      <div class="examples-rail" role="list" aria-label="Example landing pages">
+      <div class="examples-rail" role="group" aria-label="Example landing pages">
 
-        <a class="ex-card" style="--scroll-dur:3.3s" role="listitem" href="examples/hum-07/" target="_blank" rel="noopener" aria-label="Open the Bubble example, a guided sourdough app, Hum, in a new tab">
+        <a class="ex-card" style="--scroll-dur:3.3s" href="examples/hum-07/" target="_blank" rel="noopener" aria-label="Open the Bubble example, a guided sourdough app, Hum, in a new tab">
           <div class="ex-card__thumb" aria-hidden="true">
             <img src="_tests/_thumbs/hum-07.jpg?v=24" alt="" loading="lazy" width="1600" height="1000" />
           </div>
@@ -247,91 +247,91 @@ <h2 class="section__title" id="s2">
         <!-- Custom / bespoke showcase. One featured bespoke build; the others live under
              site/examples/custom-*. Scroll preview via Remotion (see examples/scroll-demos.json);
              once rendered, swap the <img> for <video data-hover-play src="..." poster="...">. -->
-        <a class="ex-card" style="--scroll-dur:4s" role="listitem" href="examples/custom-04/" target="_blank" rel="noopener" aria-label="Open the Mend Assembly example, a repair-café manifesto poster, custom, in a new tab">
+        <a class="ex-card" style="--scroll-dur:4s" href="examples/custom-04/" target="_blank" rel="noopener" aria-label="Open the Mend Assembly example, a repair-café manifesto poster, custom, in a new tab">
           <div class="ex-card__thumb" aria-hidden="true">
             <img src="_tests/_thumbs/custom-04.jpg?v=24" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a repair-café manifesto poster, custom</p>
         </a>
 
-        <a class="ex-card" style="--scroll-dur:3.6s" role="listitem" href="examples/garden-01/" target="_blank" rel="noopener" aria-label="Open the Hollowback Apiary example, a small-batch honey farm, Garden, in a new tab">
+        <a class="ex-card" style="--scroll-dur:3.6s" href="examples/garden-01/" target="_blank" rel="noopener" aria-label="Open the Hollowback Apiary example, a small-batch honey farm, Garden, in a new tab">
           <div class="ex-card__thumb" aria-hidden="true">
             <img src="_tests/_thumbs/garden-01.jpg?v=24" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a landing page for a small-batch honey farm</p>
         </a>
 
-        <a class="ex-card" style="--scroll-dur:4.6s" role="listitem" href="examples/riso-01/" target="_blank" rel="noopener" aria-label="Open the Off-Register example, an indie risograph print fair, Riso, in a new tab">
+        <a class="ex-card" style="--scroll-dur:4.6s" href="examples/riso-01/" target="_blank" rel="noopener" aria-label="Open the Off-Register example, an indie risograph print fair, Riso, in a new tab">
           <div class="ex-card__thumb" aria-hidden="true">
             <img src="_tests/_thumbs/riso-01.jpg?v=24" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a page for an indie risograph print fair</p>
         </a>
 
-        <a class="ex-card" style="--scroll-dur:4.7s" role="listitem" href="examples/press-01/" target="_blank" rel="noopener" aria-label="Open the Press Quaternary example, an experimental type studio, in a new tab">
+        <a class="ex-card" style="--scroll-dur:4.7s" href="examples/press-01/" target="_blank" rel="noopener" aria-label="Open the Press Quaternary example, an experimental type studio, in a new tab">
           <div class="ex-card__thumb" aria-hidden="true">
             <img src="_tests/_thumbs/press-01.jpg?v=24" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a portfolio for an experimental typographer</p>
         </a>
 
-        <a class="ex-card" style="--scroll-dur:3.6s" role="listitem" href="examples/tally/" target="_blank" rel="noopener" aria-label="Open the Tally example, a SaaS product page, modern-minimal, in a new tab">
+        <a class="ex-card" style="--scroll-dur:3.6s" href="examples/tally/" target="_blank" rel="noopener" aria-label="Open the Tally example, a SaaS product page, modern-minimal, in a new tab">
           <div class="ex-card__thumb" aria-hidden="true">
             <img src="_tests/_thumbs/tally.jpg?v=24" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a SaaS product page, modern-minimal</p>
         </a>
 
-        <a class="ex-card" style="--scroll-dur:3s" role="listitem" href="examples/wayfare/" target="_blank" rel="noopener" aria-label="Open the Wayfare example, a travel booking site, atmospheric, in a new tab">
+        <a class="ex-card" style="--scroll-dur:3s" href="examples/wayfare/" target="_blank" rel="noopener" aria-label="Open the Wayfare example, a travel booking site, atmospheric, in a new tab">
           <div class="ex-card__thumb" aria-hidden="true">
             <img src="_tests/_thumbs/wayfare.jpg?v=24" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a travel booking site, atmospheric</p>
         </a>
 
-        <a class="ex-card" style="--scroll-dur:3.2s" role="listitem" href="examples/bananastudio/" target="_blank" rel="noopener" aria-label="Open the BananaStudio example, a creative studio with playful motion, in a new tab">
+        <a class="ex-card" style="--scroll-dur:3.2s" href="examples/bananastudio/" target="_blank" rel="noopener" aria-label="Open the BananaStudio example, a creative studio with playful motion, in a new tab">
           <div class="ex-card__thumb" aria-hidden="true">
             <img src="_tests/_thumbs/bananastudio.jpg?v=24" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a creative studio with playful motion</p>
         </a>
 
-        <a class="ex-card" style="--scroll-dur:1.8s" role="listitem" href="_tests/06-anya-portfolio/" target="_blank" rel="noopener" aria-label="Open the Anya Reis example, a software architect personal site, in a new tab">
+        <a class="ex-card" style="--scroll-dur:1.8s" href="_tests/06-anya-portfolio/" target="_blank" rel="noopener" aria-label="Open the Anya Reis example, a software architect personal site, in a new tab">
           <div class="ex-card__thumb" aria-hidden="true">
             <img src="_tests/_thumbs/anya.jpg?v=24" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a software architect personal site</p>
         </a>
 
-        <a class="ex-card" style="--scroll-dur:2s" role="listitem" href="examples/najm/" target="_blank" rel="noopener" aria-label="Open the NAJM example, a Moroccan fashion brand landing page, in a new tab">
+        <a class="ex-card" style="--scroll-dur:2s" href="examples/najm/" target="_blank" rel="noopener" aria-label="Open the NAJM example, a Moroccan fashion brand landing page, in a new tab">
           <div class="ex-card__thumb" aria-hidden="true">
             <img src="_tests/_thumbs/najm.jpg?v=24" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a Moroccan fashion brand landing page</p>
         </a>
 
-        <a class="ex-card" style="--scroll-dur:3.5s" role="listitem" href="examples/hyperlane/" target="_blank" rel="noopener" aria-label="Open the Hyperlane example, a developer infrastructure landing page, in a new tab">
+        <a class="ex-card" style="--scroll-dur:3.5s" href="examples/hyperlane/" target="_blank" rel="noopener" aria-label="Open the Hyperlane example, a developer infrastructure landing page, in a new tab">
           <div class="ex-card__thumb" aria-hidden="true">
             <img src="_tests/_thumbs/hyperlane.jpg?v=24" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a developer infrastructure landing page</p>
         </a>
 
-        <a class="ex-card" style="--scroll-dur:2.5s" role="listitem" href="examples/cobalt-01/" target="_blank" rel="noopener" aria-label="Open the Distil example, a content-extraction API, Cobalt, in a new tab">
+        <a class="ex-card" style="--scroll-dur:2.5s" href="examples/cobalt-01/" target="_blank" rel="noopener" aria-label="Open the Distil example, a content-extraction API, Cobalt, in a new tab">
           <div class="ex-card__thumb" aria-hidden="true">
             <img src="_tests/_thumbs/cobalt-01.jpg?v=24" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a content-extraction API, Cobalt</p>
         </a>
 
-        <a class="ex-card" style="--scroll-dur:2.7s" role="listitem" href="examples/carnival-01/" target="_blank" rel="noopener" aria-label="Open the Cold Snap example, a record-label EP page, Carnival, in a new tab">
+        <a class="ex-card" style="--scroll-dur:2.7s" href="examples/carnival-01/" target="_blank" rel="noopener" aria-label="Open the Cold Snap example, a record-label EP page, Carnival, in a new tab">
           <div class="ex-card__thumb" aria-hidden="true">
             <img src="_tests/_thumbs/carnival-01.jpg?v=24" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a record-label EP page, Carnival</p>
         </a>
 
-        <a class="ex-card" style="--scroll-dur:3.1s" role="listitem" href="examples/lumen-01/" target="_blank" rel="noopener" aria-label="Open the Cinder example, an AI reasoning tool, Lumen, in a new tab">
+        <a class="ex-card" style="--scroll-dur:3.1s" href="examples/lumen-01/" target="_blank" rel="noopener" aria-label="Open the Cinder example, an AI reasoning tool, Lumen, in a new tab">
           <div class="ex-card__thumb" aria-hidden="true">
             <img src="_tests/_thumbs/lumen-01.jpg?v=24" alt="" loading="lazy" width="1600" height="1000" />
           </div>