/* СайдВуд desktop/laptop viewport fit.
 * Physical screen height is usually 100–150px taller than the browser viewport.
 */

@media (min-width: 901px) {
  .home-page .hero2 {
    height: calc(100svh / var(--sidwood-zoom, 1));
    min-height: calc(600px / var(--sidwood-zoom, 1));
  }

  .home-page .hero2__left {
    height: calc((100svh / var(--sidwood-zoom, 1)) - 74px);
    min-height: 0;
  }

  .home-page .hero2__down {
    flex: 0 0 52px;
    min-width: 52px;
    min-height: 52px;
  }

  /* Keep the title in place; move only the supporting copy and benefits down. */
  .home-page .hero2__lead {
    margin-top: clamp(28px, 4.2vh, 48px);
  }

  .home-page .hero2__cta {
    gap: 10px;
    flex-wrap: nowrap;
  }

  .home-page .hero2__cta .btn { padding-inline: 18px; }
}

@media (min-width: 901px) and (max-height: 900px) {
  .home-page .hero2__left {
    width: min(56vw, 820px);
    padding: clamp(24px, 3.6vh, 34px) clamp(28px, 4.2vw, 62px) 22px;
    gap: clamp(9px, 1.5vh, 14px);
  }

  .home-page .hero2__meta {
    gap: 10px;
    font-size: 13px;
  }

  .home-page .hero2__meta .meta-tag { padding: 7px 15px; }

  .home-page .hero2__kicker {
    margin-top: 0;
    padding-left: 19px;
    max-width: 400px;
    font-size: 15px;
    line-height: 1.4;
  }

  .home-page .hero2__kicker::before {
    width: 7px;
    height: 7px;
  }

  .home-page .hero2__title {
    max-width: 740px;
    font-size: clamp(48px, 4.15vw, 62px);
    line-height: 1;
  }

  .home-page .hero2__lead {
    max-width: 520px;
    font-size: 15px;
    line-height: 1.42;
  }

  .home-page .hero2__benefits { width: min(100%, 390px); }

  .home-page .hero2__benefits li {
    min-height: 43px;
    gap: 13px;
    font-size: 15px;
  }

  .home-page .hero2__benefit-icon {
    width: 30px;
    flex-basis: 30px;
    font-size: 23px;
  }

  .home-page .hero2__cta {
    gap: 9px;
    flex-wrap: nowrap;
    margin-top: auto;
  }

  .home-page .hero2__cta .btn {
    gap: 8px;
    padding: 11px 15px;
    font-size: 13px;
  }

  .home-page .hero2__down {
    display: flex;
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin-top: 10px;
    font-size: 21px;
  }

  .home-page .hero2__textures {
    --hero-texture-pad-x: 24px;
    right: clamp(20px, 3vw, 44px);
    bottom: clamp(14px, 2.2vh, 24px);
    width: min(42vw, 600px);
    padding: 0 var(--hero-texture-pad-x) 19px;
    border-radius: 24px;
  }

  .home-page .hero2__formats {
    width: 100%;
    margin-bottom: 14px;
  }

  .home-page .hero2__format {
    padding: 17px 14px 13px;
    font-size: 16px;
  }

  .home-page .hero2__texture-list { gap: 14px; }
  .home-page .hero2__texture { gap: 8px; font-size: 12px; }
  .home-page .hero2__texture .panel-photo { width: 66px; height: 66px; }
}

@media (min-width: 901px) and (max-height: 720px) {
  .home-page .hero2 { min-height: calc(560px / var(--sidwood-zoom, 1)); }

  .home-page .hero2__left {
    padding-top: 18px;
    padding-bottom: 16px;
    gap: 8px;
  }

  .home-page .hero2__meta .meta-tag { padding: 6px 13px; }
  .home-page .hero2__kicker { font-size: 14px; line-height: 1.3; }
  .home-page .hero2__title { font-size: clamp(43px, 3.8vw, 54px); }
  .home-page .hero2__lead { margin-top: 18px; font-size: 14px; line-height: 1.34; }
  .home-page .hero2__benefits li { min-height: 39px; font-size: 14px; }
  .home-page .hero2__benefit-icon { font-size: 21px; }
  .home-page .hero2__cta .btn { padding: 9px 13px; font-size: 12px; }
  .home-page .hero2__down {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    margin-top: 8px;
    font-size: 19px;
  }

  .home-page .hero2__textures {
    --hero-texture-pad-x: 20px;
    bottom: 12px;
    padding: 0 var(--hero-texture-pad-x) 16px;
  }

  .home-page .hero2__formats { margin-bottom: 10px; }
  .home-page .hero2__format { padding-block: 9px; font-size: 15px; }
  .home-page .hero2__texture-list { gap: 11px; }
  .home-page .hero2__texture .panel-photo { width: 58px; height: 58px; }
}

@media (min-width: 901px) and (max-width: 1100px) and (max-height: 900px) {
  .home-page .hero2__cta { gap: 6px; }
  .home-page .hero2__cta .btn {
    gap: 5px;
    padding-inline: 8px;
    font-size: 11px;
  }
}