/* Give the headline and product preview their own wider canvas. */
.site-header { position: sticky; top: 0; z-index: 40; background: #f8f7f2f5; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.nav-cta > .nav-apple { width: 18px; height: 18px; }
.hero .hero-actions { flex-direction: column; align-items: center; gap: 7px; }
.hero .hero-actions > .button-quiet { min-height: 44px; padding: 5px 10px; font-size: 14px; gap: 9px; }
.hero .hero-actions > .button-quiet:hover { background: transparent; text-decoration: underline; text-underline-offset: 4px; }
.hero .hero-actions .play-circle { width: 21px; height: 21px; }
.hero.container { width: 100%; max-width: none; }
.hero .hero-headline {
  width: min(1480px, calc(100% - 80px));
  margin: 25px auto 27px;
  font-size: clamp(64px, 6.6vw, 110px);
  line-height: 1.04;
  letter-spacing: -.055em;
}
.hero-title, .hero-subtitle { display: block; }
.hero-title-ending { white-space: nowrap; display: inline-block; position: relative; font-weight: 700; }
.hero .hero-subtitle {
  margin-top: 16px;
  font-size: clamp(32px, 3.65vw, 60px);
  line-height: 1.15;
  letter-spacing: -.045em;
}
.hero .hero-headline em { font-size: 1.17em; letter-spacing: -.025em; }
.hero .hero-star { right: -54px; top: 14px; width: 40px; height: 40px; }
.hero .stage-sticker { top: -65px; }
.hero .sticker-arrow { transform: translateY(-8px) rotate(-10deg); color: #9aa58d; }
.hero .hero-description { padding-inline: 20px; }
.hero .product-stage {
  width: min(1920px, calc(100% - 80px));
  margin-top: 64px;
  padding: 24px 32px 30px;
}
.hero .preview-controls { width: min(1920px, calc(100% - 80px)); margin-inline: auto; }
@media (max-width: 1100px) {
  .hero .hero-headline { width: calc(100% - 60px); }
  .hero .product-stage, .hero .preview-controls { width: calc(100% - 48px); }
  .hero .product-stage { padding: 22px 24px 28px; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .nav-inner { gap: 16px; }
  .desktop-nav { gap: 14px; }
}
@media (max-width: 600px) {
  .hero .hero-actions > .button-dark { width: 100%; }
  .hero .hero-headline { width: calc(100% - 40px); font-size: clamp(42px, 9vw, 56px); letter-spacing: -.055em; }
  .hero .hero-subtitle { font-size: 28px; line-height: 1.18; margin-top: 18px; }
  .hero .hero-star { right: -34px; top: 4px; width: 24px; height: 24px; }
  .hero .stage-sticker { top: -56px; }
  .hero .sticker-arrow { transform: translateY(-5px) rotate(-10deg); }
  .hero .hero-description { padding-inline: 0; }
  .hero .product-stage, .hero .preview-controls { width: calc(100% - 40px); }
  .hero .product-stage { margin-top: 72px; padding: 12px 10px 30px; }
}
@media (max-width: 360px) {
  .hero .hero-headline { width: calc(100% - 30px); font-size: 38px; }
  .hero .hero-subtitle { font-size: 26px; }
  .hero .product-stage, .hero .preview-controls { width: calc(100% - 30px); }
}