/* Portada y páginas de texto del sitio (usa los tokens de /m/mixtape.css). */
.page .win-body { padding: 22px 20px 24px; }
.landing { text-align: center; }
.landing .hero-icon { display: block; margin: 6px auto 14px; border-radius: 28px; box-shadow: 0 10px 24px rgba(var(--shade), .35); }
.landing h1 { margin: 0; color: var(--accent); font: 400 clamp(38px, 10vw, 54px)/1.05 var(--font-hand); }
.landing .lead { max-width: 440px; margin: 10px auto 18px; color: var(--ink-2); font-size: 17px; }
.landing .play-badge { margin: 0 auto; }
.feature-list { display: grid; gap: 10px; max-width: 460px; margin: 22px auto 0; padding: 0; list-style: none; text-align: left; }
.feature-list li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.feature-list b { display: block; }
.feature-list span[aria-hidden] { font-size: 24px; line-height: 1.2; text-align: center; }
.prose { color: var(--ink); }
.prose h1 { margin: 0 0 4px; font: 400 34px/1.1 var(--font-hand); color: var(--accent); }
.prose h2 { margin: 22px 0 6px; font-size: 18px; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul { padding-left: 20px; }
.prose .updated { margin: 0 0 14px; color: var(--ink-3); font: 400 20px/1 var(--font-pixel); letter-spacing: .06em; }
.prose hr { margin: 28px 0; border: 0; border-top: 1px dashed var(--line); }