/* Home: hero (copy + clip carousel) and the payment ribbon. */
.hero { background: radial-gradient(ellipse 60% 70% at 100% 100%, var(--stone), transparent 70%); }
.hero-grid { max-width: 1400px; margin: 0 auto; padding: 56px 40px 56px; display: grid; grid-template-columns: 1.02fr 1fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(39px, 4.15vw, 60px); line-height: 1.15; letter-spacing: -.025em; margin: 0 0 .5em; font-weight: 400; color: var(--ink-alt); }
.hero h1 span { color: var(--link); }
.hero-lead { font-size: 22px; line-height: 1.5; max-width: 34em; }
.hero-detail { font-size: 17px; line-height: 1.65; color: var(--muted); max-width: 32em; }
.hero-detail a { font-weight: 700; }
.hero-platform { font-size: 14px; color: var(--muted); margin-bottom: .6em; }
.hero-platform a { font-weight: 600; }
.hero-guidance { font-size: 16px; color: var(--muted); max-width: 30em; }
.hero-media { min-width: 0; }
.carousel { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--well-blog); }
.carousel:focus-visible { outline-offset: 4px; }
.carousel-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--well-blog); }
.carousel-incoming { opacity: 0; transition: opacity .9s ease; }
.carousel-incoming.carousel-visible { opacity: 1; }
.carousel-video .carousel-slide { object-fit: contain; }
.ribbon { background: linear-gradient(90deg, var(--ribbon), transparent 85%); }
.ribbon-inner { max-width: 1400px; margin: 0 auto; padding: 24px 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ribbon-title { font-size: 20px; margin: 0 0 4px; }
.ribbon-text { font-size: 15px; color: var(--muted); margin: 0; }
.ribbon-links { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 850px) {
  .hero-grid { grid-template-columns: 1fr; gap: 28px; padding: 28px 20px 32px; min-height: 0; }
  .ribbon-inner { padding: 22px 20px; }
}