The poster holds still, names its price, and points at the stores

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

promo/index.html

@@ -81,6 +81,39 @@
     font-size: .7rem; color: var(--acid); letter-spacing: .14em;
   }
 
+  /* ---- store badges (pseudo — the apps are not out yet) ---- */
+  .stores { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.6rem; }
+  .store {
+    display: inline-flex; align-items: center; gap: .7em; position: relative;
+    background: #000; color: var(--chalk); border: 3px solid var(--chalk);
+    padding: .55em 1.1em; box-shadow: 0 5px 0 #00000088; cursor: default;
+  }
+  .store svg { flex: 0 0 auto; }
+  .store .txt { display: flex; flex-direction: column; text-align: left; line-height: 1.25; }
+  .store .txt small { font-family: 'Silkscreen', monospace; font-size: .5rem; letter-spacing: .1em; color: var(--dim); }
+  .store .txt b { font-family: 'Silkscreen', monospace; font-weight: 700; font-size: .8rem; letter-spacing: .06em; }
+  .store .soon {
+    position: absolute; top: -.7em; right: -.7em; background: var(--blood); color: #fff;
+    font-family: 'Silkscreen', monospace; font-size: .5rem; letter-spacing: .08em;
+    padding: .25em .5em; border: 2px solid var(--chalk); transform: rotate(4deg);
+  }
+
+  /* ---- pricing ---- */
+  .price { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.2rem; margin-top: 2rem; }
+  .tier { border: 1px solid var(--line); background: var(--panel); padding: 1.6rem 1.4rem 1.5rem; }
+  .tier.paid { border: 2px solid var(--blood); background: linear-gradient(135deg, #1c0e0e, #0c140e 65%); }
+  .tier .big { font-family: 'Bangers', cursive; font-size: 2.4rem; line-height: 1; display: block; margin-bottom: .1em; }
+  .tier.paid .big { color: var(--blood); }
+  .tier h3 { font-size: .8rem; letter-spacing: .08em; color: var(--acid); margin-bottom: .9rem; }
+  .tier ul { list-style: none; }
+  .tier li {
+    font-family: 'Silkscreen', monospace; font-size: .68rem; letter-spacing: .05em;
+    padding: .4em 0 .4em 1.5em; position: relative; color: var(--chalk);
+  }
+  .tier li::before { content: '■'; position: absolute; left: 0; color: var(--blood); }
+  .tier li.dim { color: var(--dim); }
+  .tier li.dim::before { color: var(--dim); }
+
   /* ---- pitch + phone ---- */
   .split { display: flex; gap: 3rem; align-items: center; flex-wrap: wrap; }
   .split > div { flex: 1 1 320px; }
@@ -133,8 +166,6 @@
     height: 100%; width: auto; image-rendering: pixelated;
     filter: drop-shadow(0 3px 0 #00000080);
   }
-  .sprite img + img { opacity: 0; animation: shamble .8s steps(1) infinite; }
-  @keyframes shamble { 50% { opacity: 1; } }
   .z h3 { font-size: .72rem; letter-spacing: .04em; }
   .z .sub {
     font-family: 'Silkscreen', monospace; font-size: .56rem; color: var(--blood);
@@ -187,7 +218,26 @@
   <p class="under">SNES-STYLE PSEUDO-3D · UMPIRE VOICE · 15/30/40 · AND THE DEAD</p>
   <a class="cta" href="/">▶ PLAY NOW</a>
   <a class="cta ghost" href="#dead">MEET THE DEAD</a>
-  <span class="free">FREE · IN YOUR BROWSER · NO DOWNLOAD · NO ACCOUNT</span>
+  <span class="free">PLAY FREE IN YOUR BROWSER · NO ACCOUNT</span>
+  <div class="stores">
+    <span class="store">
+      <svg viewBox="0 0 8 8" width="26" height="26" fill="currentColor" aria-hidden="true">
+        <rect x="4" y="0" width="1" height="2"/><rect x="5" y="1" width="2" height="1"/>
+        <rect x="1" y="2" width="6" height="1"/><rect x="0" y="3" width="8" height="3"/>
+        <rect x="1" y="6" width="6" height="1"/><rect x="2" y="7" width="4" height="1"/>
+      </svg>
+      <span class="txt"><small>DOWNLOAD ON THE</small><b>APP STORE</b></span>
+      <span class="soon">SOON</span>
+    </span>
+    <span class="store">
+      <svg viewBox="0 0 8 8" width="26" height="26" fill="currentColor" aria-hidden="true">
+        <rect x="0" y="0" width="2" height="8"/><rect x="2" y="1" width="2" height="6"/>
+        <rect x="4" y="2" width="2" height="4"/><rect x="6" y="3" width="1" height="2"/>
+      </svg>
+      <span class="txt"><small>GET IT ON</small><b>GOOGLE PLAY</b></span>
+      <span class="soon">SOON</span>
+    </span>
+  </div>
 </header>
 
 <section>
@@ -252,31 +302,61 @@
   </div>
 </section>
 
+<section>
+  <p class="kicker">What it costs</p>
+  <h2>Free to play. Then <span>2€</span>. Once.</h2>
+  <p class="lead">No subscription, no coins, no energy bar. You try the club for free — on your
+  phone or right here in the browser — and if it gets its teeth into you, one payment opens
+  everything. For good.</p>
+  <div class="price">
+    <div class="tier">
+      <span class="big">FREE</span>
+      <h3>TRY THE CLUB</h3>
+      <ul>
+        <li>THE FIRST 10 GORE LEVELS</li>
+        <li>ZOMBIE TENNIS · THE FIRST 5 OPPONENTS</li>
+        <li>SAME FREE MODES IN THE BROWSER</li>
+        <li>NO ACCOUNT · NO ADS</li>
+      </ul>
+    </div>
+    <div class="tier paid">
+      <span class="big">2€ · ONCE</span>
+      <h3>THE FULL MEMBERSHIP</h3>
+      <ul>
+        <li>EVERY MODE, EVERY LEVEL, EVERY BOSS</li>
+        <li>ALL FUTURE CONTENT INCLUDED</li>
+        <li>LIFETIME · PAY ONCE, NEVER AGAIN</li>
+        <li>NEVER ADS. NEVER.</li>
+      </ul>
+    </div>
+  </div>
+</section>
+
 <section id="dead">
   <p class="kicker">Know your enemy</p>
   <h2>Meet <span>the dead</span></h2>
   <p class="lead">Everyone who worked, watched or played at this club is still here. They have kept
   their jobs. The jobs have changed.</p>
   <div class="roster">
-    <div class="z"><div class="sprite"><img src="/assets/z_a1.png" alt=""><img src="/assets/z_a2.png" alt=""></div>
+    <div class="z"><div class="sprite"><img src="/assets/z_a1.png" alt=""></div>
       <h3>SHAMBLER</h3><span class="sub">THE ORDINARY DEAD</span><q>He was here before any of this.</q></div>
-    <div class="z"><div class="sprite"><img src="/assets/z_e1.png" alt=""><img src="/assets/z_e2.png" alt=""></div>
+    <div class="z"><div class="sprite"><img src="/assets/z_e1.png" alt=""></div>
       <h3>THE BALL BOY</h3><span class="sub">STILL FETCHING</span><q>He still fetches. He just bites now.</q></div>
-    <div class="z"><div class="sprite"><img src="/assets/z_s1.png" alt=""><img src="/assets/z_s2.png" alt=""></div>
+    <div class="z"><div class="sprite"><img src="/assets/z_s1.png" alt=""></div>
       <h3>THE SPECTATOR</h3><span class="sub">BLOCKS WITH HIS CHAIR</span><q>He paid for the whole seat.</q></div>
-    <div class="z"><div class="sprite"><img src="/assets/z_d1.png" alt=""><img src="/assets/z_d2.png" alt=""></div>
+    <div class="z"><div class="sprite"><img src="/assets/z_d1.png" alt=""></div>
       <h3>THE STEWARD</h3><span class="sub">HI-VIS · ONE HIT TOUGHER</span><q>He is asking you to leave.</q></div>
-    <div class="z"><div class="sprite"><img src="/assets/z_f1.png" alt=""><img src="/assets/z_f2.png" alt=""></div>
+    <div class="z"><div class="sprite"><img src="/assets/z_f1.png" alt=""></div>
       <h3>THE RUNNER</h3><span class="sub">ONE HIT · BUT HE SPRINTS</span><q>He covers the court. All of it.</q></div>
-    <div class="z"><div class="sprite"><img src="/assets/z_g1.png" alt=""><img src="/assets/z_g2.png" alt=""></div>
+    <div class="z"><div class="sprite"><img src="/assets/z_g1.png" alt=""></div>
       <h3>THE BRUTE</h3><span class="sub">SLOW · DRAGS A POLE</span><q>Nothing gets past him twice.</q></div>
-    <div class="z"><div class="sprite"><img src="/assets/z_h1.png" alt=""><img src="/assets/z_h2.png" alt=""></div>
+    <div class="z"><div class="sprite"><img src="/assets/z_h1.png" alt=""></div>
       <h3>THE BOUNCER</h3><span class="sub">BUILT LIKE A DOOR</span><q>Name's not on the list.</q></div>
-    <div class="z"><div class="sprite"><img src="/assets/z_k1.png" alt=""><img src="/assets/z_k2.png" alt=""></div>
+    <div class="z"><div class="sprite"><img src="/assets/z_k1.png" alt=""></div>
       <h3>THE ROLLER MAN</h3><span class="sub">HAULS THE COURT ROLLER</span><q>He flattened this court. Then the rest.</q></div>
-    <div class="z"><div class="sprite"><img src="/assets/z_r1.png" alt=""><img src="/assets/z_r2.png" alt=""></div>
+    <div class="z"><div class="sprite"><img src="/assets/z_r1.png" alt=""></div>
       <h3>THE CLUB PRO</h3><span class="sub">STILL HAS A BACKHAND</span><q>Beat him and his weapon is yours.</q></div>
-    <div class="z"><div class="sprite"><img src="/assets/z_mach1.png" alt=""><img src="/assets/z_mach2.png" alt=""></div>
+    <div class="z"><div class="sprite"><img src="/assets/z_mach1.png" alt=""></div>
       <h3>THE BALL MACHINE</h3><span class="sub">FIRES BACK · FURNITURE</span><q>Somebody left it on.</q></div>
   </div>
 </section>
@@ -288,26 +368,26 @@
   court, clears the stage, and volleys at you until one of you stops moving. They don't shamble.
   They remember the game.</p>
   <div class="roster boss-grid">
-    <div class="z"><div class="sprite"><img src="/assets/z_boss1.png" alt=""><img src="/assets/z_boss2.png" alt=""></div>
+    <div class="z"><div class="sprite"><img src="/assets/z_boss1.png" alt=""></div>
       <h3>THE GROUNDSKEEPER</h3><q>He mowed this lawn for thirty years.</q></div>
-    <div class="z"><div class="sprite"><img src="/assets/z_judge1.png" alt=""><img src="/assets/z_judge2.png" alt=""></div>
+    <div class="z"><div class="sprite"><img src="/assets/z_judge1.png" alt=""></div>
       <h3>THE LINE JUDGE</h3><q>Every ball of yours is out.</q></div>
-    <div class="z"><div class="sprite"><img src="/assets/z_chair1.png" alt=""><img src="/assets/z_chair2.png" alt=""></div>
+    <div class="z"><div class="sprite"><img src="/assets/z_chair1.png" alt=""></div>
       <h3>THE CHAIR UMPIRE</h3><q>His call was always final.</q></div>
-    <div class="z"><div class="sprite"><img src="/assets/z_coach1.png" alt=""><img src="/assets/z_coach2.png" alt=""></div>
+    <div class="z"><div class="sprite"><img src="/assets/z_coach1.png" alt=""></div>
       <h3>THE HEAD COACH</h3><q>He taught you every shot you have.</q></div>
-    <div class="z"><div class="sprite"><img src="/assets/z_physio1.png" alt=""><img src="/assets/z_physio2.png" alt=""></div>
+    <div class="z"><div class="sprite"><img src="/assets/z_physio1.png" alt=""></div>
       <h3>THE PHYSIO</h3><q>He knows exactly where it hurts.</q></div>
-    <div class="z"><div class="sprite"><img src="/assets/z_mascot1.png" alt=""><img src="/assets/z_mascot2.png" alt=""></div>
+    <div class="z"><div class="sprite"><img src="/assets/z_mascot1.png" alt=""></div>
       <h3>THE SPONSOR MASCOT</h3><q>The crowd still loves him.</q></div>
-    <div class="z"><div class="sprite"><img src="/assets/z_string1.png" alt=""><img src="/assets/z_string2.png" alt=""></div>
+    <div class="z"><div class="sprite"><img src="/assets/z_string1.png" alt=""></div>
       <h3>THE STRINGER</h3><q>He strung your racket. He knows its limit.</q></div>
-    <div class="z"><div class="sprite"><img src="/assets/z_dir1.png" alt=""><img src="/assets/z_dir2.png" alt=""></div>
+    <div class="z"><div class="sprite"><img src="/assets/z_dir1.png" alt=""></div>
       <h3>THE TOURNAMENT DIRECTOR</h3><q>He is calling security.</q></div>
-    <div class="z"><div class="sprite"><img src="/assets/z_berry1.png" alt=""><img src="/assets/z_berry2.png" alt=""></div>
+    <div class="z"><div class="sprite"><img src="/assets/z_berry1.png" alt=""></div>
       <h3>THE STRAWBERRY SELLER</h3><q>Cream with that?</q></div>
     <div class="champ">
-      <div class="sprite"><img src="/assets/z_champ1.png" alt=""><img src="/assets/z_champ2.png" alt=""></div>
+      <div class="sprite"><img src="/assets/z_champ1.png" alt=""></div>
       <div>
         <span class="sub">EVERY TENTH CHAPTER · THE FINAL</span>
         <h3>THE CHAMPION</h3>
@@ -337,7 +417,7 @@
 <section class="foot">
   <p class="tag">The umpire is still calling the score.</p>
   <a class="cta" href="/">▶ PLAY SPLATTER TENNIS</a>
-  <p class="fine">FREE · NO DOWNLOAD · NO ADS · NO ACCOUNT<br>
+  <p class="fine">FREE TO PLAY · 2€ ONCE FOR EVERYTHING, FOREVER · NEVER ADS<br>
   BEST ON A PHONE, HELD IN ONE HAND · ADD IT TO YOUR HOME SCREEN<br>
   ZERO DEPENDENCIES · HANDMADE PIXELS · QUIET, PLEASE</p>
 </section>