/* The home banner's picture (Appearance → Home banner): the pieces all five
   designs share. Each design's own styles are in hero-<n>.css, and only the
   chosen one loads. hero.js adds .is-ready (entrances wait) and .is-live
   (they play); without script every design shows at rest, and the theme
   turns all motion off for people who ask for less of it. */

.s-hv { position: relative; margin: 0; width: 100%; max-width: 720px; justify-self: end; color: var(--ink); font-family: var(--font-body); }
.s-hv p { margin: 0; }
.s-hv ul, .s-hv ol { margin: 0; padding: 0; list-style: none; }
.s-hv svg { flex: none; }

/* Entrances. */
.s-hv [data-in] { transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); transition-delay: var(--d, 0s); }
.s-hv.is-ready:not(.is-live) [data-in] { opacity: 0; transform: translateY(14px); }

/* Shared pieces. */
.hv-win { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-4); }
.hv-float { position: absolute; z-index: 3; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-3); }
.s-hv.is-live .hv-float { animation: hv-float 6s calc(var(--d, 0s) + 1s) ease-in-out infinite alternate; }
.hv-site { display: inline-flex; align-items: center; gap: 9px; font: 600 15px/1.2 var(--font-body); color: var(--ink); }
.hv-site i { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #2f5d50; color: #fff; font: 700 13px/1 var(--font-display); font-style: normal; }
.hv-grade { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--font-body); color: var(--ink-2); }
.hv-label { display: flex; align-items: center; gap: 7px; font: 600 11.5px/1.3 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.hv-label svg { width: 14px; height: 14px; color: var(--gold); }
.hv-icon { flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--canvas); color: var(--ink-2); }
.hv-icon svg { width: 20px; height: 20px; }
.hv-icon--gold { background: var(--gold-soft); color: var(--gold-ink); }
.hv-dots { display: flex; gap: 6px; }
.hv-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.hv-dot { display: inline-block; width: 7px; height: 7px; margin: 0 5px 1px 8px; border-radius: 50%; background: var(--high); }
.hv-mark { display: block; width: 40px; height: auto; }
.s-hv .is-a { --tone: var(--grade-a); }
.s-hv .is-b { --tone: var(--grade-b); }
.s-hv .is-c { --tone: var(--grade-c); }
.s-hv .is-d { --tone: var(--grade-d); }
.s-hv .is-f { --tone: var(--grade-f); }
@keyframes hv-float { to { transform: translateY(-8px); } }
@keyframes hv-grow { from { transform: scaleX(0); } }

/* ── Smaller screens ─────────────────────────────────────────────────── */
@media (max-width: 960px) {
	.s-hv { justify-self: start; }
}
@media (max-width: 640px) {
	.s-hv .hv-float { position: relative; inset: auto; width: auto; margin: 12px 0 0; animation: none; }
}