/* AOM Traders V50.0 — deterministic Guide layout and Back alignment. */

:root {
  --aom-v50-page-width: 1440px;
  --aom-v50-gutter: clamp(24px, 3.2vw, 64px);
}

/* Back uses the exact same horizontal boundary as the Guide canvas. */
html body.page-app main#main > .aom-page-back-wrap {
  box-sizing: border-box !important;
  width: min(
    var(--aom-v50-page-width),
    calc(100% - (var(--aom-v50-gutter) * 2))
  ) !important;
  max-width: var(--aom-v50-page-width) !important;
  min-height: 52px !important;
  height: 52px !important;
  margin: 0 auto !important;
  padding: 12px 0 0 !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
}

html body.page-app main#main > .aom-page-back-wrap .aom-page-back {
  margin: 0 !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
}

/* One layout owner for the current Guide markup. */
html body.page-app main#main > section.aom-guide-final-stage {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 16px var(--aom-v50-gutter) 34px !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
}

html body.page-app main#main .aom-guide-final-stage > .aom-guide-final-grid {
  box-sizing: border-box !important;
  width: min(var(--aom-v50-page-width), 100%) !important;
  max-width: var(--aom-v50-page-width) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(280px, 0.36fr) minmax(0, 1fr) !important;
  grid-template-areas:
    "intro access"
    ". steps" !important;
  column-gap: clamp(24px, 3vw, 44px) !important;
  row-gap: 16px !important;
  align-items: stretch !important;
  justify-content: center !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
}

html body.page-app main#main .aom-guide-final-grid > .aom-guide-final-intro {
  box-sizing: border-box !important;
  grid-area: intro !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: clamp(24px, 2.4vw, 36px) !important;
  display: flex !important;
  align-items: center !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
}

html body.page-app main#main .aom-guide-final-intro > div,
html body.page-app main#main .aom-guide-final-intro h1,
html body.page-app main#main .aom-guide-final-intro .lead {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  text-align: left !important;
}

html body.page-app main#main .aom-guide-final-intro > div {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.page-app main#main .aom-guide-final-intro h1 {
  max-width: 430px !important;
  margin: 12px 0 16px !important;
  font-size: clamp(38px, 3.3vw, 58px) !important;
  line-height: 1.02 !important;
}

html body.page-app main#main .aom-guide-final-intro .lead {
  max-width: 410px !important;
  margin: 0 !important;
}

html body.page-app main#main .aom-guide-final-grid > .aom-guide-final-access {
  box-sizing: border-box !important;
  grid-area: access !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
}

html body.page-app main#main .aom-guide-final-access > .container,
html body.page-app main#main .aom-guide-final-access .installer-grid {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
}

/* Reset every historical .hero-mini rule that previously collapsed this strip. */
html body.page-app.aom-access-redesign-v12 main#main .aom-guide-final-grid > .hero-mini.aom-guide-final-steps,
html body.page-app main#main .aom-guide-final-grid > .hero-mini.aom-guide-final-steps {
  box-sizing: border-box !important;
  grid-area: steps !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
}

html body.page-app.aom-access-redesign-v12 main#main .aom-guide-final-steps > div,
html body.page-app main#main .aom-guide-final-steps > div {
  box-sizing: border-box !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 82px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 16px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  overflow: hidden !important;
}

html body.page-app.aom-access-redesign-v12 main#main .aom-guide-final-steps span,
html body.page-app main#main .aom-guide-final-steps span {
  width: auto !important;
  margin: 0 0 6px !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  writing-mode: horizontal-tb !important;
}

html body.page-app.aom-access-redesign-v12 main#main .aom-guide-final-steps b,
html body.page-app main#main .aom-guide-final-steps b {
  width: auto !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  writing-mode: horizontal-tb !important;
}

@media (max-width: 980px) {
  html body.page-app main#main .aom-guide-final-stage > .aom-guide-final-grid {
    width: min(820px, 100%) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "intro"
      "access"
      "steps" !important;
  }

  html body.page-app main#main .aom-guide-final-grid > .aom-guide-final-intro {
    min-height: 0 !important;
  }

  html body.page-app main#main .aom-guide-final-intro h1,
  html body.page-app main#main .aom-guide-final-intro .lead {
    max-width: 720px !important;
  }
}

@media (max-width: 680px) {
  :root { --aom-v50-gutter: 15px; }

  html body.page-app main#main > .aom-page-back-wrap {
    width: calc(100% - 30px) !important;
    min-height: 48px !important;
    height: 48px !important;
    padding-top: 10px !important;
  }

  html body.page-app main#main > section.aom-guide-final-stage {
    padding-top: 10px !important;
    padding-bottom: 26px !important;
  }

  html body.page-app main#main .aom-guide-final-grid > .aom-guide-final-intro {
    padding: 24px 20px !important;
  }

  html body.page-app main#main .aom-guide-final-intro h1 {
    font-size: clamp(34px, 10vw, 46px) !important;
  }

  html body.page-app.aom-access-redesign-v12 main#main .aom-guide-final-grid > .hero-mini.aom-guide-final-steps,
  html body.page-app main#main .aom-guide-final-grid > .hero-mini.aom-guide-final-steps {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}