/* The landing page: hero over looping gameplay, story, features, Legendaries, screenshots, stores. */
.hero { position: relative; min-height: min(92vh, 860px); display: grid; align-items: end; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line); }
.hero-media { position: absolute; inset: 0; z-index: -2; background: #0b0614 url('/assets/art/bg/sanctuary-lg.webp') center / cover no-repeat; }
.hero-media video, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 6, 20, 0.15) 0%, rgba(11, 6, 20, 0.35) 40%, rgba(18, 10, 32, 0.92) 82%, var(--night-1) 100%), radial-gradient(120% 70% at 50% 100%, rgba(18, 10, 32, 0.6), transparent 70%); }
.hero-inner { display: grid; justify-items: center; text-align: center; padding-block: clamp(80px, 14vh, 160px) clamp(40px, 7vh, 80px); }
.hero-logo { width: min(760px, 92%); height: auto; margin-bottom: clamp(10px, 2vh, 22px); filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.6)); animation: drop-in 0.9s cubic-bezier(0.2, 0.9, 0.25, 1.15) both; }
@keyframes drop-in { from { transform: translateY(-24px) scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero-logo { animation: none; } }
.hero h1 { max-width: 20ch; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6); }
.hero .lead { margin-inline: auto; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }
.hero-cta { justify-content: center; margin-top: 0.4rem; }
.hero-launch { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; justify-content: center; align-items: center; }

.story { background: linear-gradient(180deg, transparent, rgba(107, 68, 168, 0.12), transparent); }
.story-grid { align-items: center; }

.features .feature { padding: 0; overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.features .feature .shot { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; display: block; border-bottom: 1px solid var(--line); }
.features .feature .txt { padding: 1.1rem 1.25rem 1.3rem; }
.features .feature .txt p { margin: 0; color: var(--ink-2); }
.features .feature .tag { display: inline-block; margin-bottom: 0.45rem; }

.legends { background: radial-gradient(80% 60% at 50% 0%, rgba(255, 210, 77, 0.08), transparent 70%); }
.leg-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.leg-grid .mon-card .mon-art { aspect-ratio: 3 / 4; }
.leg-grid .left { font-size: 0.85rem; color: var(--ink-3); font-weight: 700; }

.mon-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr); gap: 16px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.mon-strip > * { scroll-snap-align: start; }
.mon-strip .rule { font-size: 0.88rem; color: var(--ink-3); line-height: 1.4; }

.registry-teaser .season-line { display: grid; gap: 0.8rem; }
.registry-teaser .cert-grid { grid-template-columns: 1fr; }

.extras { margin-top: 18px; }
.demo-card { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; }
.demo-card .ic { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(180deg, var(--plum-2), var(--plum)); box-shadow: 0 8px 20px rgba(107, 68, 168, 0.4); }
.demo-card .ic svg { width: 34px; height: 34px; fill: #fff; }
.faq-wrap { max-width: 860px; }
/* /#buy (the game's Buy buttons land here while a store has no page yet): clear of the sticky header */
#buy { scroll-margin-top: calc(var(--head-h, 64px) + 16px); }