/* Narrated homepage videos: the hero story beside the hero copy, and the Flares explainer in its
   section. Script: scripts/hero-video.js. Playback (play on screen, pause off screen, controls
   when autoplay is blocked) is shared with the feature videos in scripts/feature-videos.js. */
@media (min-width: 1001px) { #foldStage { grid-template-columns: minmax(0, 540px) minmax(0, 1fr); } }
.hero-video { position: relative; width: 100%; max-width: 680px; justify-self: end; font-family: var(--cs-sans); }
.hero-video__frame { position: relative; overflow: hidden; border-radius: 24px; background: #f2efea; box-shadow: var(--cs-shadow); }
.hero-video__media { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.hero-video__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* One control, two states. The story is narrated but starts muted, so while it is muted the
   control is a play button centred on the video; with sound on it becomes a small mute pill. */
.hero-video__sound { position: absolute; display: inline-flex; align-items: center; justify-content: center; border: 0; background: rgb(3 3 2 / .78); color: #fff; font: 600 12.5px/1 var(--cs-sans); letter-spacing: -.005em; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color .2s, transform .2s; }
.hero-video__sound:hover { background: rgb(3 3 2 / .92); }
.hero-video__sound svg { flex: none; }
.hero-video__sound[data-on="false"] { inset: 0; width: 72px; height: 72px; margin: auto; border-radius: 50%; box-shadow: 0 0 0 1px rgb(255 255 255 / .16), 0 8px 24px rgb(3 3 2 / .28); }
.hero-video__sound[data-on="false"]:hover { transform: scale(1.06); }
.hero-video__sound[data-on="false"]:active { transform: scale(.96); }
.hero-video__sound[data-on="false"] .hero-video__play { width: 28px; height: 28px; margin-left: 3px; }
.hero-video__sound[data-on="false"] .hero-video__speaker { display: none; }
.hero-video__sound[data-on="false"] span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero-video__sound[data-on="true"] { right: 12px; bottom: 12px; gap: 8px; min-height: 36px; padding: 0 14px 0 12px; border-radius: 999px; }
.hero-video__sound[data-on="true"]:active { transform: scale(.97); }
.hero-video__sound[data-on="true"] .hero-video__speaker { width: 16px; height: 16px; }
.hero-video__sound[data-on="true"] .hero-video__play { display: none; }
.hero-video__frame:has(.hero-video__sound[data-on="false"]) .hero-video__media:not([data-manual]) { cursor: pointer; }
.hero-video__media[data-manual] ~ .hero-video__sound { display: none; }

@media (max-width: 1000px) {
  .hero-video { order: 6; justify-self: stretch; max-width: none; margin-top: 16px; }
}
@media (max-width: 640px) {
  .hero-video__frame { border-radius: 22px; }
  .hero-video__sound[data-on="false"] { width: 56px; height: 56px; }
  .hero-video__sound[data-on="false"] .hero-video__play { width: 22px; height: 22px; }
  .hero-video__sound[data-on="true"] { right: 10px; bottom: 10px; width: 36px; padding: 0; }
  .hero-video__sound[data-on="true"] span { display: none; }
}

/* Flares section: the explainer sits in a pastel frame like the other feature videos */
.home-light #flares { --cs-frame: var(--cs-peach); }
.courwrap .hero-video__frame { border-radius: 16px; box-shadow: 0 0 0 1px var(--cs-hair-soft, #0000000f); }

/* Hero paragraph under the headline: a quiet first sentence, a brighter second one, and a small italic aside.
   When the copy column stacks it stays between the headline and the invite button. */
#foldStage .hero-copy .sub { max-width: 34em; margin: 22px 0 36px; font-size: clamp(17px, 1.45vw, 19px); line-height: 1.6; letter-spacing: -0.005em; text-wrap: pretty; }
.hero-sub__base { display: block; color: var(--g-text-2); }
.hero-sub__lead { display: block; margin-top: 10px; color: var(--g-text); font-weight: 500; }
.hero-sub__aside { display: block; margin-top: 12px; color: var(--g-text-2); font-family: var(--cs-serif); font-size: 1.1em; font-style: italic; letter-spacing: 0; }
@media (max-width: 1000px) { #foldStage .hero-copy .sub { order: 3; margin: 14px 0 12px; } }

/* Hero invite: one early-bird button instead of the per-platform buttons */
.hero-invite { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
:is(#foldStage .hero-copy, section.cta) .hero-invite__btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; background: var(--cs-ink); color: var(--cs-beige); font: 600 16px/1 var(--cs-sans); letter-spacing: -0.01em; text-decoration: none; box-shadow: var(--cs-shadow-sm); transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s; }
:is(#foldStage .hero-copy, section.cta) .hero-invite__btn:hover { transform: translateY(-2px); box-shadow: var(--cs-shadow); }
.hero-invite__btn:active { transform: translateY(0); }
.hero-invite__btn:focus-visible { outline: 3px solid var(--cs-blue); outline-offset: 3px; }
.hero-invite__note { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--g-text-2); font-size: 13px; line-height: 1.4; }
.hero-invite__note i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--g-green); animation: hero-invite-pulse 2.4s ease-in-out infinite; }
@keyframes hero-invite-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--g-green) 55%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }
/* Closing CTA: the same button, centred on the mint panel */
section.cta .hero-invite { align-items: center; }
section.cta .hero-invite__note { margin: 0; color: var(--cs-cta-ink); font-family: var(--cs-sans); font-size: 13px; }