/* Homepage (itch-first) additions, Nov 2 2026 */
.hero h1 { max-width: 24ch; }
.hero-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 32px; }
.hero-strip img, .pack img { display: block; width: 100%; height: auto; aspect-ratio: 630 / 500; image-rendering: pixelated; background: #121019; border-radius: var(--radius); border: 1px solid var(--line); }
.pack-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 24px; }
.pack-grid-1 { grid-template-columns: minmax(0, 560px); }
.pack { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.pack img { border: 0; border-radius: 0; }
.pack-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pack-body h3 { margin: 0; } .pack-body h3 a { color: var(--text); text-decoration: none; }
.pack-body p { margin: 0; }
.pack-body .btn { align-self: flex-start; margin-top: auto; }
.badge { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.badge-free { color: var(--gold); }
.full { color: var(--text); }
.btn-sm { padding: 8px 14px; font-size: .9rem; }
@media (max-width: 860px) { .hero-strip { grid-template-columns: repeat(2, 1fr); } .pack-grid { grid-template-columns: 1fr; } }