/* v50 SEO/GEO + responsive polish
   Goal: keep the approved visual direction while reducing desktop/laptop scale
   to match Kevin's 1920x1080 feedback that Chrome at ~90% feels best.
   This avoids browser zoom hacks and uses real CSS sizing so layout remains crawlable,
   responsive, and mobile-friendly. */

@media (min-width: 1041px) {
  :root {
    --hero-max: 1080px;
  }

  .section-shell,
  .hero__nav,
  .hero__content {
    width: min(var(--hero-max), calc(100% - 72px)) !important;
  }

  .hero {
    min-height: min(92vh, 900px) !important;
  }

  .hero__content {
    max-width: 600px !important;
    padding-top: clamp(96px, 15.5vh, 176px) !important;
    padding-bottom: clamp(82px, 10.5vh, 132px) !important;
  }

  .hero h1,
  .hero__content h1 {
    max-width: 600px !important;
    font-size: clamp(40px, 4.85vw, 70px) !important;
    line-height: .94 !important;
  }

  .hero__subheadline {
    max-width: 560px !important;
    font-size: clamp(15.5px, 1.08vw, 18.5px) !important;
    line-height: 1.58 !important;
  }

  .battery-section,
  .ecosystem-section,
  .installer-section,
  .mobile-app-section,
  .faq-section,
  .contact-section,
  .ag-property-section {
    padding-top: clamp(54px, 6.2vw, 102px) !important;
    padding-bottom: clamp(58px, 6.6vw, 110px) !important;
  }

  .battery-copy h2,
  .ecosystem-intro h2,
  .installer-intro h2,
  .mobile-app-copy h2,
  .faq-intro h2,
  .contact-copy h2,
  .ag-property-copy h2,
  .section-copy h2,
  .section-intro h2 {
    font-size: clamp(34px, 4.35vw, 64px) !important;
    line-height: .98 !important;
  }

  .battery-section .lead,
  .ecosystem-intro p,
  .installer-lead,
  .mobile-app-copy p,
  .faq-lead,
  .contact-copy p,
  .ag-property-copy p {
    font-size: clamp(15.5px, 1.04vw, 18px) !important;
    line-height: 1.68 !important;
  }

  .battery-layout,
  .ecosystem-grid,
  .installer-layout,
  .mobile-app-layout,
  .contact-layout,
  .ag-property-section {
    gap: clamp(30px, 4.4vw, 66px) !important;
  }

  .mini-proof__number,
  .installer-speed-number,
  .contact-proof-number {
    font-size: clamp(50px, 5.1vw, 88px) !important;
  }

  .battery-visual-card,
  .ecosystem-card,
  .installer-visual,
  .mobile-app-visual,
  .contact-card,
  .ag-map-card {
    transform: scale(.96);
    transform-origin: center center;
  }
}

@media (min-width: 1041px) and (max-width: 1500px) {
  :root { --hero-max: 1020px; }

  .hero h1,
  .hero__content h1 {
    font-size: clamp(38px, 4.55vw, 62px) !important;
  }

  .battery-copy h2,
  .ecosystem-intro h2,
  .installer-intro h2,
  .mobile-app-copy h2,
  .faq-intro h2,
  .contact-copy h2,
  .ag-property-copy h2,
  .section-copy h2,
  .section-intro h2 {
    font-size: clamp(32px, 4.05vw, 58px) !important;
  }
}

@media (max-width: 1040px) {
  /* Keep tablet/mobile visual decisions intact; only tighten long-section rhythm slightly. */
  .battery-section,
  .ecosystem-section,
  .installer-section,
  .mobile-app-section,
  .faq-section,
  .contact-section,
  .ag-property-section {
    padding-top: clamp(58px, 9vw, 92px) !important;
    padding-bottom: clamp(62px, 9vw, 98px) !important;
  }
}