/* Scale-to-fit: 1920px design fills viewport width */

html {
  overflow-x: hidden;
  width: 100%;
  background: #050915;
}

body {
  overflow-x: hidden;
  width: 100%;
  margin: 0;
  background: #050915;
}

#page-scale-viewport {
  margin: 0;
  position: relative;
  background: #050915;
  transform-origin: top left;
}

._1920-w-dark {
  margin: 0;
  transform-origin: top left;
}

/* Desktop: zoom scales layout box (handles browser zoom-out correctly) */
@media (min-width: 1280px) {
  html.is-scaled-fit:not(.is-mobile),
  html:not(.is-mobile) {
    overflow-x: hidden !important;
    width: 100% !important;
  }

  /* Homepage ONLY — the 7908px Figma canvas. Inner pages must never get this. */
  html.is-scaled-fit:not(.is-mobile):not(.is-inner-page) body,
  html:not(.is-mobile):not(.is-inner-page) body {
    overflow-x: hidden !important;
    width: 100% !important;
    min-height: calc(8458px * var(--fit-scale, calc(100vw / 1920)));
  }

  html.is-scaled-fit:not(.is-mobile):not(.is-inner-page) #page-scale-viewport,
  html:not(.is-mobile):not(.is-inner-page) #page-scale-viewport {
    width: 1920px !important;
    height: 8458px !important;
    max-width: none !important;
    overflow: hidden !important;
    margin: 0 !important;
    zoom: var(--fit-scale, calc(100vw / 1920)) !important;
    transform: none !important;
  }

  html.is-scaled-fit:not(.is-mobile):not(.is-inner-page) ._1920-w-dark,
  html:not(.is-mobile):not(.is-inner-page) ._1920-w-dark {
    display: block !important;
    position: relative !important;
    width: 1920px !important;
    min-width: 1920px !important;
    max-width: none !important;
    height: 8458px !important;
    margin: 0 !important;
    transform: none !important;
    zoom: 1 !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    gap: unset !important;
  }

  html:not(.is-mobile):not(.is-inner-page) .frame,
  html:not(.is-mobile):not(.is-inner-page) .section,
  html:not(.is-mobile):not(.is-inner-page) .section2,
  html:not(.is-mobile):not(.is-inner-page) .section3,
  html:not(.is-mobile):not(.is-inner-page) .section4,
  html:not(.is-mobile):not(.is-inner-page) .section5,
  html:not(.is-mobile):not(.is-inner-page) .section6,
  html:not(.is-mobile):not(.is-inner-page) .section-link-lightbox,
  html:not(.is-mobile):not(.is-inner-page) .loan-types-section,
  html:not(.is-mobile):not(.is-inner-page) .calculator-section,
  html:not(.is-mobile):not(.is-inner-page) .overlay-border-shadow6,
  html:not(.is-mobile):not(.is-inner-page) .overlay-border-shadow7,
  html:not(.is-mobile):not(.is-inner-page) .overlay-border-shadow8 {
    position: absolute !important;
  }

  /* Inner pages: scale width like homepage, but height follows content (no 7908px canvas). */
  html.is-inner-page.is-scaled-fit:not(.is-mobile) body,
  html.is-inner-page:not(.is-mobile) body {
    overflow-x: hidden !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    background: #050915;
  }

  html.is-inner-page.is-scaled-fit:not(.is-mobile) #page-scale-viewport,
  html.is-inner-page:not(.is-mobile) #page-scale-viewport {
    width: 1920px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    max-width: none !important;
    overflow: visible !important;
    margin: 0 !important;
    zoom: var(--fit-scale, calc(100vw / 1920)) !important;
    transform: none !important;
  }

  html.is-inner-page.is-scaled-fit:not(.is-mobile) ._1920-w-dark,
  html.is-inner-page:not(.is-mobile) ._1920-w-dark {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    width: 1920px !important;
    min-width: 1920px !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    transform: none !important;
    zoom: 1 !important;
  }

  html.is-inner-page:not(.is-mobile) .frame,
  html.is-inner-page:not(.is-mobile) .section,
  html.is-inner-page:not(.is-mobile) .car-page,
  html.is-inner-page:not(.is-mobile) .about-page,
  html.is-inner-page:not(.is-mobile) .careers-page,
  html.is-inner-page:not(.is-mobile) .contact-page,
  html.is-inner-page:not(.is-mobile) .legal-page {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
  }

  html.is-inner-page:not(.is-mobile) .section {
    flex-grow: 0 !important;
    margin-top: 0 !important;
  }
}

/* Mobile: flex column layout */
@media (max-width: 1279px) {
  html.is-mobile,
  body.is-mobile {
    overflow-x: hidden;
    width: 100%;
  }

  html.is-mobile {
    zoom: 1 !important;
  }

  body.is-mobile #page-scale-viewport,
  body.is-mobile ._1920-w-dark {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    height: auto !important;
    overflow-x: hidden !important;
    zoom: 1 !important;
    transform: none !important;
  }

  #page-scale-viewport {
    max-width: 100%;
    overflow: visible !important;
    height: auto !important;
  }

  ._1920-w-dark {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    transform: none !important;
    zoom: 1 !important;
    height: auto !important;
  }
}