Fix: stack the landing badge demo the way the tile does

src/content/docs/docs/badges.md

@@ -103,7 +103,7 @@ When a second badge is reporting, a matching pill appears behind the first in th
 
 <figure class="sy-shot">
   <img src="/img/dashboard/badge-labels.png" alt="Three app tiles: two badges show a second pill behind them, one does not" loading="lazy">
-  <figcaption>Requests and Sonarr each have more behind the badge. Plex has one label, so nothing is stacked.</figcaption>
+  <figcaption>Seerr and Jellyfin each have more behind the badge. SABnzbd has one label, so nothing is stacked.</figcaption>
 </figure>
 
 Hover the badge, tap it on a phone, or move focus to the tile with a keyboard. Everything the tile is reporting opens in a list, with the full numbers and no truncation. Press Escape or tap elsewhere to close it. Tapping the badge opens the list without following the link.

src/pages/index.astro

@@ -476,7 +476,7 @@ if (!reduced) {
     .ilabel{width:var(--lblw);font-size:var(--lbl);line-height:1.3846;letter-spacing:-0.0062em;font-weight:500;
       color:rgba(255,255,255,.90);text-shadow:0 1px 4px rgba(0,0,0,.7);text-align:center;
       white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-    .badge{position:absolute;top:calc(-7px * var(--gs));right:calc(-7px * var(--gs));z-index:3;min-width:calc(20px * var(--gs));height:calc(20px * var(--gs));padding:0 calc(5px * var(--gs));border-radius:calc(10px * var(--gs));
+    .badge{position:absolute;top:calc(-7px * var(--gs));right:calc(-7px * var(--gs));z-index:3;min-width:calc(20px * var(--gs));height:calc(20px * var(--gs));padding:0 calc(5px * var(--gs));border-radius:50px;
       display:flex;align-items:center;justify-content:center;font-size:calc(11px * var(--gs));line-height:1;font-weight:700;color:#fff;
       transform:translateZ(0)}
 
@@ -512,8 +512,10 @@ if (!reduced) {
 
     .bdemo{display:grid;grid-template-columns:repeat(2,136px);gap:26px 16px;justify-content:center;width:100%}
     /* The second pill sits behind and to the side, the way the tile draws it
-       when a badge has more to report. */
-    .badge-peek{z-index:2;right:calc(-14px * var(--gs))}
+       when a badge has more to report. The stack keeps its outer edge where a
+       single badge sits, so the front pill shifts inward instead. */
+    .badge-peek{z-index:2;box-shadow:0 0 0 1.5px rgba(0,0,0,.55)}
+    .badge-peek + .badge{right:0}
     .bdemo-item{display:flex;flex-direction:column;align-items:center;gap:12px;width:136px;text-align:center}
     .banchor{position:relative;width:60px;height:60px;border-radius:13.4px;isolation:isolate;flex-shrink:0}
     .banchor::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;
@@ -641,7 +643,7 @@ if (!reduced) {
       .screen-inner .ilabel{width:100%;font-size:var(--lbl)}
       .screen-inner .badge{top:calc(-5px * var(--sc));right:calc(-5px * var(--sc));
         min-width:calc(15px * var(--sc));height:calc(15px * var(--sc));
-        border-radius:calc(7.5px * var(--sc));padding:0 calc(4px * var(--sc));
+        border-radius:50px;padding:0 calc(4px * var(--sc));
         font-size:calc(9px * var(--sc))}
       .screen-inner .wcell,.screen-inner .np{grid-column:span 2;grid-row:span 2;
         width:100%;height:auto;aspect-ratio:1;border-radius:18%;transform:none}