/* S1 · Hero (SITE-21). Corgi's centred hero over Jurni's pixel-cloud field. The section runs up under the sticky nav
   (−64px) so the field shows through the frosted bar, as Jurni's does. Everything fits one 1440×900 screen: text,
   CTAs and the ~340px visual. */

.hero { margin-top: -64px; padding-top: 64px; overflow: hidden; }
.hero > .sky { --sky-h: 100%; }
.hero__in { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: clamp(40px, 1rem + 3vw, 64px); }
.hero__h { margin-top: 24px; max-width: 12em; }
.hero__sub { margin-top: 20px; max-width: 32em; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.hero__note { margin-top: 16px; color: var(--ink-58); }

/* The sky (founder's pick: PAINTED SKY = under). SITE-20's .sky__paint is Corgi's painting at .6 under a field of white
   dots. Where the field is its still (phones, software GL, no WebGL) the still keeps the same white dots, not the sand
   ones, so the painting reads the same everywhere. */
.hero .sky[data-sky-tone="white"].sky--fallback { background: none; }
/* The painting as an <img> (hero.mjs), under SITE-20's .sky__paint mask and opacity, instead of its background. */
.hero__paint { background: none; }
.hero__paint img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
@media (max-width: 768px) {
  .hero .sky[data-sky-tone="white"].sky--fallback::before { background: conic-gradient(at 2px 2px, transparent 75%, rgb(255 255 255 / .22) 0) 0 0 / 4px 4px; }
  .hero .sky[data-sky-tone="white"].sky--fallback::after { background: conic-gradient(rgb(255 255 255 / .22) 25%, transparent 0 50%, rgb(255 255 255 / .22) 0 75%, transparent 0) 0 0 / 4px 4px; }
}

/* The visual: SITE-29's Unfold, full width (it may bleed past the rails), sized by the kit (--uf-h: 344px at 1440,
   300px at ≤ 760), then the examples line, inset like all text. */
.hero__visual { position: relative; margin-top: 40px; }
/* Until the kit's carousel.css arrives (preloaded without blocking, hero.mjs): the slot at its final size and the
   slides invisible. Its own rules come later in the cascade and take over (.ck-uf__set.is-on is visible), so nothing
   moves when they land. */
.hero .ck-uf { position: relative; height: var(--uf-h, clamp(300px, 200px + 10vw, 344px)); }
.hero .ck-uf__set { position: absolute; inset: 0; visibility: hidden; }
.hero .ck-uf__cap { text-wrap: balance; }   /* no orphan ("found") when the caption wraps at 390 */
.hero__examples { max-width: 100%; margin: 4px auto 0; padding-inline: calc(var(--rail-inset) + var(--inset)); text-align: center; text-wrap: balance; }

@media (max-width: 760px) {
  .hero__in { padding-top: 32px; }
  .hero__h { margin-top: 20px; }
  .hero__sub { margin-top: 16px; }
  .hero__cta { width: 100%; margin-top: 28px; flex-wrap: nowrap; gap: 10px; }
  .hero__cta .btn { flex: 1 1 auto; height: 48px; padding: 0 16px; font-size: 15px; }
  .hero__visual { margin-top: 32px; }
  /* At ≤ 760 the kit's cards are 196px tall plus its 52px caption band, so the slot needs 252px, not the default 300
     (it would leave an empty band above the examples line). The kit allows --uf-h on the element. */
  .hero .ck-uf { --uf-h: 268px; }
}