/* Hero composition measured against the 1440px design reference. */
.site-header { height: 96px; }
.header-inner nav { gap: 32px; font-size: 15px; }
.header-inner nav .button { padding: 16px 24px; }
.hero { min-height: 820px; background: #b9eaf3; overflow: hidden; }
.hero-inner { position: relative; display: block; min-height: 820px; }
.hero-copy { position: absolute; left: 10px; top: 196px; width: 560px; z-index: 4; }
.hero-copy .pill { color: #285b38; font-size: 13px; line-height: 18px; letter-spacing: 0; padding: 7px 14px; box-shadow: 0 8px 16px #2455660a; }
.hero h1 { font-family: 'Fredoka', 'Arial Rounded MT Bold', sans-serif; font-weight: 700; font-size: 72px; line-height: 1; letter-spacing: -1.5px; margin: 25px 0 27px; }
.hero .intro { font-size: 20px; line-height: 30px; font-weight: 400; width: 550px; max-width: 100%; }
.hero .button-row { gap: 14px; margin-top: 16px; }
.hero .button { font-size: 15px; padding: 16px 24px; }
.hero .outline { padding: 16px 24px; }
.hero-note { font-size: 14px; line-height: 20px; gap: 14px; margin-top: 23px; color: #4d6070; }
.little-dots i { width: 18px; height: 18px; margin-right: -1px; }
.hero-art { position: absolute; left: 590px; top: 110px; width: 640px; height: auto; aspect-ratio: 640 / 620; transform: none; margin: 0; }
.hero-art::before { content: ''; position: absolute; width: 64.6875%; aspect-ratio: 1; left: 18.125%; top: 13.87097%; background: #fff2b0; border-radius: 50%; }
.book-stack { position: absolute; inset: 0; }
.book-stack img { filter: none; transform: none; }
.book-stack .stack-tippy { width: 47.96875%; left: .625%; top: 26.6129%; z-index: 2; }
.book-stack .stack-adam { width: 43.90625%; left: 29.375%; top: 8.2258%; z-index: 1; }
.book-stack .stack-sally { width: 47.96875%; left: 51.71875%; top: 20.64516%; z-index: 3; }
.hero-art .cloud-one { width: 25.46875%; top: 0; left: .3125%; }
.hero-art .hero-star { width: 6.5625%; right: auto; left: 84.6875%; top: 9.35484%; }
.hero-art .cloud-two { width: 21.875%; left: 69.84375%; top: 84.03226%; bottom: auto; right: auto; }
.stack-caption { left: 32.8125%; top: 84.35484%; bottom: auto; margin: 0; padding: 10px 18px; font-size: 14px; line-height: 20px; white-space: nowrap; box-shadow: 0 12px 22px #305f6c20; }
@media (min-width: 1000px) and (max-width: 1439px) {
  .hero-art { left: auto; right: -10px; width: 53.33333%; }
  .hero-copy { width: 46.66667%; }
  .hero h1 { font-size: clamp(48px, 5vw, 72px); }
  .hero .intro { font-size: clamp(17px, 1.38889vw, 20px); line-height: 1.5; }
  .hero-art .stack-caption { font-size: 12px; padding: 9px 16px; }
}
@media (min-width: 651px) and (max-width: 999px) {
  .hero, .hero-inner { min-height: 670px; }
  .hero-copy { width: 47%; left: 0; top: 150px; }
  .hero h1 { font-size: clamp(34px, 5vw, 50px); margin: 22px 0 24px; }
  .hero-copy .pill { font-size: 9px; padding: 6px 10px; }
  .hero .intro { font-size: 16px; line-height: 1.5; }
  .hero .button { padding: 13px 17px; font-size: 12px; }
  .hero .button-row { gap: 10px; }
  .hero-note { font-size: 10px; gap: 8px; }
  .little-dots i { width: 13px; height: 13px; }
  .hero-art { left: auto; right: -10px; top: 140px; width: 53.33333%; }
  .stack-caption { font-size: 10px; line-height: 16px; padding: 6px 12px; }
}
@media (max-width: 650px) {
  .site-header { height: 80px; }
  .hero, .hero-inner { min-height: 0; }
  .hero-inner { display: flex; flex-direction: column; padding: 58px 0 45px; }
  .hero-copy { position: relative; left: auto; top: auto; width: 100%; }
  .hero-copy .pill { font-size: 10px; line-height: 16px; padding: 6px 11px; }
  .hero h1 { font-size: clamp(38px, 10.8vw, 64px); margin: 24px 0; letter-spacing: -1px; }
  .hero .intro { font-size: 16px; line-height: 25px; width: 100%; }
  .hero .button { padding: 14px 20px; font-size: 13px; }
  .hero-note { font-size: 11px; gap: 10px; margin-top: 22px; }
  .little-dots i { width: 15px; height: 15px; }
  .hero-art { position: relative; left: auto; right: auto; top: auto; width: 100%; height: auto; margin: 40px 0 0; transform: none; }
  .stack-caption { font-size: 10px; line-height: 16px; padding: 7px 11px; }
}