/* Keep caption, actions and model selector in separate layout rows. */
.hero-scroll { height: calc(100svh + var(--hero-stage-height, max(820px, 100svh))); min-height: 0; }
.hero-scroll .hero-pin {
  --hero-nav-height: clamp(88px, 8.5svh, 112px);
  height: var(--hero-stage-height, max(820px, 100svh));
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-top: var(--hero-nav-height);
}
.hero-scroll .hero {
  position: relative;
  top: auto;
  display: grid;
  flex: 1 0 auto;
  height: auto;
  min-height: 0;
  max-height: none;
}
.hero-scroll .hero-scene {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
  min-width: 0;
}
.hero-scroll .hero-copy-panel {
  position: relative;
  inset: auto;
  width: 35%;
  margin-left: 12.5%;
  padding: max(48px, calc(20svh - var(--hero-nav-height))) 0 36px;
  gap: 24px;
}
.hero-scroll .hero-caption { pointer-events: none; }
.hero-scroll .hero-caption.active { pointer-events: auto; }
.hero-scroll .hero-bottom {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  padding: 20px 12.5% 32px;
  opacity: 1;
  background: #0b100f;
}
.hero-scroll .hero-film {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  mask-image: none;
}
.hero-scroll .film-actions { display: flex; flex-wrap: wrap; }
.hero-scroll .hero-caption h1 { font-size: clamp(34px, 3vw, 60px); }
.hero-scroll .hero-caption .metric { position: static; max-width: none; }

.home-light { background: #0b100e; }
.home-light-inner { width: min(calc(100% - 96px), 1280px); margin: 0 auto; padding: 72px 0 40px; }
.home-light h2 { font-size: clamp(44px, 5.2vw, 80px); line-height: 1.08; margin: 0 0 36px; }
.home-light .compare-view { height: auto; aspect-ratio: 822 / 380; --split: 50%; }
.home-light .compare-view > img, .home-light .dark-scene img { object-position: center; }
.home-light .compare-line span {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  letter-spacing: 0;
  padding: 0;
  line-height: 1;
  color: #111;
}
.home-light-detail { background: #000; padding: 32px max(24px, calc((100% - 1428px) / 2)) 80px; }
.home-light-detail h3 { color: #fff; font: 700 34px/1.3 'DM Sans', Arial, sans-serif; letter-spacing: 0; margin: 0 0 18px; }
.home-light-detail p { font-size: 14px; line-height: 22px; color: #d5dadc; }
.home-light-detail > img { display: block; width: min(100%, 1108px); height: auto; margin: 60px auto 0; }
.home-products { background: #0c100f; padding: 72px max(24px, calc((100% - 1428px) / 2)) 0; }
.home-products > h2 { font: 500 48px/1.2 'Manrope', Arial, sans-serif; letter-spacing: -.03em; color: #fff; margin: 0 0 32px; }
.home-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.home-product-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid #1c2635; background: linear-gradient(180deg, #080d16, #0e141f); }
.home-product-image { display: flex; justify-content: center; align-items: center; padding: 24px; height: 280px; border-bottom: 1px dashed #293442; }
.home-product-image img { display: block; max-width: 100%; width: auto; height: 100%; object-fit: contain; }
.home-product-copy { padding: 26px; flex: 1; display: flex; flex-direction: column; }
.home-product-copy h3 { color: #e9eef7; font: 700 26px/1.3 'DM Sans', Arial, sans-serif; letter-spacing: -.02em; margin: 0 0 8px; }
.home-product-copy p, .home-product-copy li { color: #8b99ae; font-size: 16px; line-height: 1.6; }
.home-product-copy ul { margin: 20px 0 28px; padding: 0; list-style: none; }
.home-product-copy li { position: relative; padding-left: 20px; }
.home-product-copy li::before { content: '◆'; position: absolute; left: 0; color: #3d8bff; font-size: 11px; top: 3px; }
.home-product-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: auto; }
.home-amazon-button { display: inline-flex; align-items: center; justify-content: center; padding: 14px 24px; border-radius: 50px; background: linear-gradient(135deg, #3d8bff, #2456c4); color: #fff; font: 700 16px/1.4 'DM Sans', Arial, sans-serif; text-align: center; transition: filter .2s; }
.home-amazon-button:hover { filter: brightness(1.15); }
.home-learn { color: #3d8bff; font-size: 16px; font-weight: 600; }
.home-night-cta { width: 100%; padding: 84px 24px 88px; background: radial-gradient(ellipse at 50% 100%, #09152d, transparent 75%), #06080d; text-align: center; }
.home-night-cta h2 { color: #e9eef7; font: 700 38px/1.3 'DM Sans', Arial, sans-serif; letter-spacing: -.03em; }
.home-night-cta p { margin: 20px 0 30px; font-size: 18px; color: #8b99ae; }
.home-night-cta .home-amazon-button { font-size: 18px; padding: 18px 32px; }
@media (min-width: 701px) and (max-width: 1200px) {
  .hero-scroll .hero-copy-panel { width: 44%; margin-left: 8%; }
  .hero-scroll .hero-bottom { padding-left: 8%; padding-right: 8%; }
}
/* Natural page flow on short screens leaves room for every caption and button. */
@media (max-width: 700px), (max-height: 650px) {
  .hero-scroll { height: auto; min-height: 0; }
  .hero-scroll .hero-pin { position: relative; top: auto; height: auto; min-height: 0; }
  .hero-scroll .hero-copy-panel { padding-top: 110px; padding-bottom: 32px; }
  .hero-scroll .hero-bottom { padding-top: 8px; padding-bottom: 28px; }
  .hero-scroll .hero-caption h1 { font-size: 34px; }
  .hero-scroll .hero-caption p { font-size: 14px; }
  .hero-scroll .hero-caption .metric strong { font-size: 25px; }
}
@media (max-width: 700px) {
  .hero-scroll .hero-copy-panel { width: auto; margin: 0 24px; padding-top: calc(clamp(240px, 62vw, 340px) + 32px); gap: 20px; }
  .hero-scroll .hero-film { inset: 0 0 auto; width: 100%; height: clamp(240px, 62vw, 340px); object-fit: cover; mask-image: none; }
  .hero-scroll .film-shade { display: none; }
  .hero-scroll .hero-caption h1 { font-size: 32px; }
  .hero-scroll .hero-bottom { padding-left: 24px; padding-right: 24px; }
  .home-light-inner { width: calc(100% - 40px); padding: 48px 0 28px; }
  .home-light h2 { font-size: clamp(36px, 8vw, 54px); margin-bottom: 26px; }
  .home-light .compare-view { aspect-ratio: 1.4; }
  .home-light-detail { padding: 32px 20px 48px; }
  .home-light-detail h3 { font-size: 28px; }
  .home-light-detail > img { margin-top: 32px; }
  .home-products { padding: 48px 20px 0; }
  .home-products > h2 { font-size: 36px; }
  .home-product-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .home-product-image { height: 240px; padding: 20px; }
  .home-product-copy { padding: 22px; }
  .home-night-cta { padding: 60px 20px; }
  .home-night-cta h2 { font-size: 30px; }
}