diff --git a/index.html b/index.html
index 1ebaef8..e0bca31 100644
--- a/index.html
+++ b/index.html
@@ -399,13 +399,25 @@ 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}
+/* ---------- Lighter hero (owner, 2026-10-29) ----------
+ Opt-in via the .hero-light class on header.hero: the two notes lose their
+ white boxes and the four stats lose their grey tiles, so the top of the page
+ has fewer framed blocks. Existing hero rules are left untouched. */
+header.hero.hero-light .fiat-bar{background:transparent;border:0;border-left:2px solid var(--accent);
+ border-radius:0;box-shadow:none;padding:2px 0 2px 14px}
+header.hero.hero-light .fiat-bar.latest-post{margin-top:14px}
+header.hero.hero-light .hero-card{box-shadow:var(--shadow)}
+header.hero.hero-light .hero-card .stats{gap:0 18px;padding-top:14px}
+header.hero.hero-light .hero-card .stat{background:transparent;border:0;border-top:1px solid var(--line);
+ border-radius:0;padding:12px 4px 6px}
/* ---------- 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-strip{padding:40px 0 44px;background:var(--panel);border-bottom:1px solid var(--line)}
+/* white band, no frame around the card: breaks the long light-grey block under the hero (owner, 2026-10-29) */
.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)}
+ background:transparent;border:0;padding:0}
+.how-cover{position:relative;display:block;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.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;
@@ -418,7 +430,7 @@ footer .built{font-size:13px;color:var(--muted);margin-top: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-card{grid-template-columns:1fr;gap:18px}
.how-text h2{font-size:23px}
}
@@ -533,7 +545,7 @@ footer .built{font-size:13px;color:var(--muted);margin-top:8px}
-
+