.research-hero {
  position: relative;
  width: 100%;
  margin: 0 auto 20px;
}

main > .research-hero {
  width: min(100%, 720px);
}

.research-hero-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1672 / 941;
  border: 0;
  border-radius: 16px;
  background: #e9f2fb;
  box-shadow: none;
  isolation: isolate;
}

.research-hero-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(6, 26, 48, .08));
}

.research-hero picture,
.research-hero img {
  display: block;
  width: 100%;
  height: 100%;
}

.research-hero img {
  object-fit: cover;
  object-position: center;
  transform: scale(1.015);
}

.plan-box > h1 { margin-bottom: 10px; }
.site-header .top-offer-bar { flex-direction: row; gap: 8px; }
.top-offer-bar .offer-timer { width: 1.97rem; height: 1.97rem; object-fit: contain; flex: none; }
.site-header .brand strong, .site-footer .footer-brand strong { line-height: 1.1; }
.site-header .brand small, .site-footer .footer-brand small { font-size: 10px; line-height: 1.2; margin-top: 3px; letter-spacing: .3px; text-transform: none; }
@media (min-width: 721px) {
  .site-header .brand small, .site-footer .footer-brand small { font-size: 13px; }
}
.hero-sound-toggle { position: absolute; right: 12px; bottom: 12px; z-index: 2; border: 0; border-radius: 50%; background: rgba(35,39,44,.2732); color: white; width: 44px; height: 44px; display: grid; place-items: center; padding: 10px; cursor: pointer; }
.hero-sound-toggle:not(.is-playing) { color: #c4c8cc; }
.hero-sound-toggle.is-playing { color: rgba(255,255,255,.9); }
.hero-sound-toggle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero-sound-toggle .speaker-waves { display: block; opacity: .42; }
.hero-sound-toggle .speaker-muted { display: block; opacity: .72; }
.hero-sound-toggle.is-playing .speaker-waves { opacity: 1; }
.hero-sound-toggle.is-playing .speaker-muted { display: none; }
.hero-sound-toggle:focus-visible { outline: 3px solid #2e8bff; outline-offset: 3px; }

.research-hero-audio {
  display: none;
}

.plan-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: none;
}
.hero-sound-toggle { display: none !important; }
/* Opacity-only blue layers avoid extra filters. Callback cadence is checked in JS;
   compositor promotion and physical presentation timing still depend on the browser/device. */
.plan-white-glow { position: absolute; inset: 0; background: rgb(143, 208, 255); opacity: 0; will-change: opacity; }
body > main, body > .site-footer { position: relative; z-index: 1; }
/* A second sheet, placed inside main so it shares main's stacking context. It covers the
   opaque panels that the background layer cannot reach, which stops them holding still and
   giving the eye a reference edge. It sits outside the header and footer, and the hero is
   lifted above it, so neither picks up any of it. */
.plan-content-glow {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: rgb(143, 208, 255);
  opacity: 0;
  will-change: opacity;
}
/* Lifts the hero above the content sheet wherever it sits in the tree, so the photo stays
   untouched. A descendant selector is required: it is not always a direct child of main. */
.research-hero { position: relative; z-index: 10; }

@media (max-width: 720px) {
  .top-offer-bar .offer-timer { width: 1.67rem; height: 1.67rem; padding-bottom: 2.71px; box-sizing: border-box; }
  .site-header .top-offer-bar { flex-direction: column; gap: 3px; }
  .research-hero {
    margin-bottom: 16px;
  }

  .research-hero-frame {
    border-radius: 12px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .research-hero img {
    animation: none !important;
    transform: none;
  }
}