/* TEMPORARY hero video experiment. Remove: delete this file, hero-video.js, images/hero-dev*, and the HERO-VIDEO blocks in index.html.
   Compare: add ?hero=static (or ?hero=video) to the homepage URL. */
.hero-video { display: none; }
html.hv .hero { background: var(--ink); isolation: isolate; }
html.hv .hero::before, html.hv .hero::after { display: none; }
html.hv .hero-video { display: block; position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--ink) center / cover no-repeat url(images/hero-dev-poster.jpg); }
html.hv .hero-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html.hv .hero-video-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,18,32,.88) 0%, rgba(11,18,32,.66) 55%, rgba(11,18,32,.42) 100%); }
html.hv .hero .eyebrow { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); color: #fff; }
html.hv .hero .h1, html.hv .hero .lead { color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.3); }
html.hv .hero .h1 .hl { color: #fff; }
html.hv .hero .lead { color: rgba(255,255,255,.82); }
html.hv .hero .btn-line { border-color: #fff; color: #fff; }
html.hv .hero .btn-line:hover { background: #fff; color: var(--ink); }
html.hv .hero .chips li { color: rgba(255,255,255,.9); }
html.hv .hero .chips .ic { stroke: var(--mint); }
html.hv .hero .pills-label { color: rgba(255,255,255,.7); }
html.hv .hero .pill { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); color: #fff; }
html.hv .hero .pill:hover { background: rgba(255,255,255,.16); }
html.hv .hero .pill-price, html.hv .hero .pill-price small { color: var(--mint); }
@media (prefers-reduced-motion: reduce) { html.hv .hero-video video { display: none; } }

/* Video-mode layout: single centered column, no collage/floating stickers */
html.hv .hero { padding: 0; }
html.hv .hero .collage { display: none; }
html.hv .hero-grid { grid-template-columns: 1fr; min-height: min(78vh, 720px); align-content: center; justify-items: center; text-align: center; padding-block: 72px; }
html.hv .hero-grid > div { max-width: 820px; display: flex; flex-direction: column; align-items: center; }
html.hv .hero .h1 { font-size: clamp(2.5rem, 6vw, 4.4rem); }
html.hv .hero .lead { max-width: 60ch; margin-inline: auto; }
html.hv .hero .hero-cta { justify-content: center; }
html.hv .hero .chips { justify-content: center; }
html.hv .hero .plan-pills { justify-content: center; }
html.hv .hero-video-scrim { background: radial-gradient(ellipse 75% 85% at 50% 50%, rgba(11,18,32,.82) 0%, rgba(11,18,32,.66) 60%, rgba(11,18,32,.5) 100%); }
@media (max-width: 860px) { html.hv .hero-grid { padding-block: 56px; min-height: 0; } }
html.hv .hero-grid > div { width: 100%; min-width: 0; }
html.hv .hero .h1 { overflow-wrap: anywhere; }