Homepage: add 'How it works' card linking to the animated guides

- Add a card under the hero with the cover image, a quick tour button
  (8 steps) and a full guide button (15 steps); new .how-* CSS only.
- Publish the narrated guides in /how-it-works/, regenerated from the
  explainer source, without noindex; remove the hidden /preview-2a86b5/.
- Add both guide pages to sitemap.xml.

index.html

@@ -399,6 +399,28 @@ footer .built{font-size:13px;color:var(--muted);margin-top:8px}
 }
 @media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
 :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
+/* ---------- Animated guides card (under the hero) ----------
+   Links to the two narrated animations in /how-it-works/. Only the cover image
+   is loaded here (lazy); the pages and their audio load only when opened. */
+.how-strip{padding:34px 0 40px}
+.how-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center;
+  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
+.how-cover{position:relative;display:block;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
+.how-cover img{display:block;width:100%;height:auto}
+.how-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
+  background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;
+  font-size:24px;padding-left:4px;box-shadow:0 6px 18px rgba(45,108,223,.35);transition:transform .15s}
+.how-cover:hover .how-play{transform:scale(1.08)}
+.how-text h2{font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:-.01em;margin:0 0 10px}
+.how-text p{color:var(--muted);font-size:16px;margin:0 0 18px}
+.how-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
+.how-pills{display:flex;flex-wrap:wrap;gap:8px}
+.how-pills span{font-family:var(--mono);font-size:12px;color:var(--accent);background:var(--accent-soft);
+  border:1px solid #cfe0fb;border-radius:999px;padding:3px 10px}
+@media (max-width:760px){
+  .how-card{grid-template-columns:1fr;gap:18px;padding:14px}
+  .how-text h2{font-size:23px}
+}
 </style>
 <script type="application/ld+json">
 {
@@ -555,6 +577,28 @@ footer .built{font-size:13px;color:var(--muted);margin-top:8px}
 
 <main>
 
+<!-- ===== Animated guides: card linking to /how-it-works/ (no audio or script loaded here) ===== -->
+<section class="section how-strip" id="guides">
+  <div class="wrap">
+    <div class="how-card">
+      <a class="how-cover" href="/how-it-works/simple.html" aria-label="Play the quick tour of the BAL protocol">
+        <img src="/how-it-works/cover.jpg" alt="" loading="lazy" width="1200" height="630">
+        <span class="how-play" aria-hidden="true">&#9654;</span>
+      </a>
+      <div class="how-text">
+        <span class="eyebrow">Animated guide</span>
+        <h2>See the protocol in action</h2>
+        <p>Two animated guides, narrated in English, Italian and Spanish. Pick the one that fits your time.</p>
+        <div class="how-actions">
+          <a class="btn" href="/how-it-works/simple.html">&#9654; Quick tour · 8 steps, 3 min</a>
+          <a class="btn ghost" href="/how-it-works/">Full guide · 15 steps</a>
+        </div>
+        <div class="how-pills"><span>EN · IT · ES</span><span>No tracking</span></div>
+      </div>
+    </div>
+  </div>
+</section>
+
 <!-- ===== Key features ===== -->
 <section class="section alt" id="features">
   <div class="wrap">

sitemap.xml

@@ -1,6 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-  <url><loc>https://bitcoin-after.life/index.html</loc><lastmod>2026-10-11</lastmod><priority>1.0</priority></url>
+  <url><loc>https://bitcoin-after.life/index.html</loc><lastmod>2026-10-29</lastmod><priority>1.0</priority></url>
+  <url><loc>https://bitcoin-after.life/how-it-works/</loc><lastmod>2026-10-29</lastmod><priority>0.7</priority></url>
+  <url><loc>https://bitcoin-after.life/how-it-works/simple.html</loc><lastmod>2026-10-29</lastmod><priority>0.7</priority></url>
   <url><loc>https://bitcoin-after.life/manifesto.html</loc><lastmod>2026-09-05</lastmod><priority>0.8</priority></url>
   <url><loc>https://bitcoin-after.life/blog.html</loc><lastmod>2026-10-11</lastmod><priority>0.6</priority></url>
   <url><loc>https://bitcoin-after.life/blog/bal-is-a-protocol-not-a-plugin.html</loc><lastmod>2026-10-11</lastmod><priority>0.5</priority></url>