/* Weather House uses the shared Cuckoo Clock typography and product components. */
.weather-page main { color: #d7e4ef; }
.weather-page main *, .weather-page .main-nav a { letter-spacing: 0; }
.weather-page main section[id] { scroll-margin-top: 180px; }
.weather-page main a:focus-visible { outline: 3px solid #83c2ff; outline-offset: 5px; }
.wh-wrap { width: min(1120px, calc(100% - 56px)); margin: 0 auto; }
.wh-hero { position: relative; background: #0e1823; overflow: hidden; }
.wh-hero-inner { display: flex; align-items: center; min-height: 620px; }
.wh-hero-copy { width: 60%; max-width: 650px; padding: 36px 0; }
.weather-page .cuckoo-copy h1 { font-size: 52px; }
.wh-subtitle { color: #e6edf5; font-size: 28px; line-height: 1.25; font-weight: 630; margin: 0 0 22px; }
.weather-page .cuckoo-copy .lead { font-size: 16px; line-height: 1.75; max-width: 590px; color: #b9c9d8; }
.wh-hero-poster { position: absolute; top: 50%; transform: translateY(-50%); right: max(28px, calc((100% - 1120px) / 2)); height: auto; width: 322px; max-width: 35%; object-fit: contain; display: block; }
.weather-page .hero-actions { margin-top: 24px; }
.weather-page .cuckoo-highlights { gap: 6px; font-size: 14px; margin-top: 22px; }
.weather-page .cuckoo-highlights li { color: #c6d4e1; }
.weather-page .cuckoo-highlights li::before { color: #eab776; }
.weather-page .section { padding-top: 66px; padding-bottom: 66px; }
.weather-page .section-heading { max-width: 780px; }
.weather-page .section-heading h2 { font-size: 36px; }
.weather-page .section-heading p { color: #b9c9d8; font-size: 16px; line-height: 1.75; }
.weather-page .story-card, .weather-page .feature-tile { border-radius: 8px; }
.weather-page .story-card h3, .weather-page .feature-tile h3 { font-size: 21px; line-height: 1.25; }
.weather-page .story-card p, .weather-page .feature-tile p { font-size: 15px; line-height: 1.7; }
.wh-features { border-top: 1px solid #253240; }
.wh-showcase-band { padding: 66px 0; background: #0d1620; }
.wh-alternate { background: #111b25; }
.wh-showcase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 76px; align-items: center; }
.wh-poster { margin: 0; min-width: 0; }
.wh-poster img { display: block; width: min(100%, 420px); height: auto; margin: 0 auto; }
.weather-page .showcase-copy h2, .weather-page .cta-copy h2 { font-size: 34px; }
.weather-page .showcase-copy p, .weather-page .cta-copy p { font-size: 16px; line-height: 1.75; }
.wh-reverse .wh-poster { order: 2; }
.wh-reverse .showcase-copy { order: 1; }
.weather-page .wh-availability { background: #0f1a26; margin: 0; padding: 64px 28px; }
.wh-badge-wrap { flex-direction: column; gap: 14px; }
.wh-badge-wrap a { display: block; }
.weather-page .app-store-badge { width: 300px; max-width: 100%; height: auto; }
.weather-page .wh-release { font-size: 13px; color: #b9c9d8; margin: 8px 0 0; }
@media (max-width: 1000px) {
  .wh-hero-inner { min-height: 610px; }
  .wh-hero-copy { width: 57%; }
  .wh-hero-poster { width: 309px; }
  .weather-page .cuckoo-copy h1 { font-size: 44px; }
  .wh-subtitle { font-size: 24px; }
  .wh-showcase { gap: 40px; }
}
@media (max-width: 760px) {
  .wh-wrap { width: calc(100% - 40px); }
  .weather-page main section[id] { scroll-margin-top: 190px; }
  .wh-hero-inner { min-height: 0; }
  .wh-hero-copy { width: 100%; max-width: none; padding: 18px 0 10px; }
  .weather-page .cuckoo-copy h1 { font-size: 38px; margin: 0; }
  .wh-subtitle { font-size: 22px; margin-bottom: 15px; }
  .wh-subtitle br { display: none; }
  .wh-hero-copy .section-kicker, .wh-hero-copy .wh-subtitle, .wh-hero-copy .lead, .wh-hero-copy .hero-actions, .wh-hero-copy .cuckoo-highlights { display: none; }
  .wh-hero-poster { position: static; transform: none; height: 350px; width: auto; max-width: 100%; margin: 0 auto 20px; }
  .wh-hero { display: flex; flex-direction: column; }
  .wh-hero-inner { order: 0; }
  .wh-hero-poster { order: 1; }
  .weather-page .section { padding: 48px 20px; }
  .weather-page .wh-story { padding-top: 20px; }
  .weather-page .section-heading h2 { font-size: 29px; }
  .weather-page .section-heading p { font-size: 15px; }
  .wh-showcase-band { padding: 48px 0; }
  .wh-showcase { grid-template-columns: 1fr; gap: 26px; }
  .wh-showcase .showcase-copy { order: 0; }
  .wh-showcase .wh-poster { order: 1; }
  .weather-page .showcase-copy h2, .weather-page .cta-copy h2 { font-size: 29px; }
  .weather-page .showcase-copy p, .weather-page .cta-copy p { font-size: 15px; }
  .weather-page .wh-availability { padding: 48px 20px; }
}