/* Keep the title focused on identity and move secondary guidance below the
   preview, so the preview and download choices meet the heading sooner. */
body.office-catalog-dle:has(main#top.product-page > #product-download-start) main#top #product-download-start .hero-copy {
  grid-area: copy;
  grid-template-areas: "heading-title heading-icon" !important;
  grid-template-rows: auto !important;
  row-gap: 0 !important;
}

body.office-catalog-dle:has(main#top.product-page > #product-download-start) main#top #product-download-start .hero-preview-support {
  grid-area: preview-support;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px 28px;
  box-sizing: border-box;
  min-width: 0;
  margin: 30px 0 0;
  padding: 0 var(--balanced-inner-inset, 20px);
}

body.office-catalog-dle:has(main#top.product-page > #product-download-start) main#top #product-download-start .hero-preview-support .hero-description {
  max-width: 540px;
  color: #5d6d7d;
  font-size: 14px;
  line-height: 1.5;
}

body.office-catalog-dle:has(main#top.product-page > #product-download-start) main#top #product-download-start .hero-preview-support .product-platform-navigation {
  justify-self: end;
  justify-content: flex-end;
  width: auto;
  margin: 0;
}

@media (min-width: 1081px) {
  body.office-catalog-dle:has(main#top.product-page > #product-download-start) main#top #product-download-start .hero-grid {
    padding-bottom: 80px !important;
  }

  body.office-catalog-dle:has(main#top.product-page > #product-download-start) main#top #product-download-start .hero-layout {
    grid-template-areas:
      "copy ."
      "workbook downloads"
      "preview-support ." !important;
  }

  body.office-catalog-dle:has(main#top.product-page > #product-download-start) main#top #product-download-start :is(.workbook-stage, #download) {
    margin-top: 44px !important;
  }

  /* The demo controls are positioned below the preview. Reserve their own
     vertical band so they never compete with the supporting copy. */
  body.office-catalog-dle:has(main#top.product-page > #product-download-start) main#top #product-download-start .workbook-stage {
    margin-bottom: 52px !important;
  }

  body.office-catalog-dle:has(main#top.product-page > #product-download-start) main#top #product-download-start .hero-preview-support {
    align-items: center;
    margin-top: 24px;
  }
}

@media (min-width: 1001px) and (max-width: 1080px) {
  body.office-catalog-dle:has(main#top.product-page > #product-download-start) main#top #product-download-start .hero-layout {
    grid-template-areas:
      "copy"
      "downloads"
      "workbook"
      "preview-support" !important;
  }
}

@media (max-width: 1000px) {
  body.office-catalog-dle:has(main#top.product-page > #product-download-start) main#top #product-download-start .hero-preview-support {
    margin-top: 8px;
    padding-inline: 0;
  }
}

@media (max-width: 760px) {
  /* On Office release pages, show the file choice before the decorative artwork. */
  body.office-catalog-dle:has(main#top.product-page > #product-download-start) main#top #product-download-start .hero-layout:has(.office-hero-artwork) {
    grid-template-areas:
      "copy"
      "downloads"
      "workbook"
      "preview-support" !important;
  }

  body.office-catalog-dle:has(main#top.product-page > #product-download-start) main#top #product-download-start .hero-preview-support {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  body.office-catalog-dle:has(main#top.product-page > #product-download-start) main#top #product-download-start .hero-preview-support .hero-description {
    max-width: none;
  }

  body.office-catalog-dle:has(main#top.product-page > #product-download-start) main#top #product-download-start .hero-preview-support .product-platform-navigation {
    justify-self: start;
    justify-content: flex-start;
  }
}