/* Final application-page alignment. Excel remains the geometry reference. */

body:has(main.app-detail-page--word) { --page-app-accent: #185abd; }
body:has(main.app-detail-page--office) { --page-app-accent: #d83b01; }
body:has(main.app-detail-page--powerpoint) { --page-app-accent: #d24726; }
body:has(main.app-detail-page--outlook),
body:has(main.app-detail-page--onedrive) { --page-app-accent: #0078d4; }
body:has(main.app-detail-page--onenote) { --page-app-accent: #7719aa; }
body:has(main.app-detail-page--access) { --page-app-accent: #a4373a; }
body:has(main.app-detail-page--publisher) { --page-app-accent: #077568; }
body:has(main.app-detail-page--teams) { --page-app-accent: #6264a7; }
body:has(main.app-detail-page--visio) { --page-app-accent: #3955a3; }
body:has(main.app-detail-page--project) { --page-app-accent: #31752f; }

.app-detail-page .hero.hero-second-screen {
  border-top: 0 !important;
}

/* The hero mark keeps the same restrained treatment as Excel, in the app colour. */
.app-detail-page .hero.hero-second-screen .hero-heading-icon {
  border-color: rgba(var(--app-accent-rgb), .22) !important;
  background: rgba(var(--app-accent-rgb), .075) !important;
  box-shadow: 0 10px 28px rgba(var(--app-accent-rgb), .11), inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}

/* Trust pictograms are intentionally bare: no tiles, borders or raised backing. */
.app-detail-page .trust-strip .trust-icon {
  color: #fff;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.app-detail-page .trust-strip .trust-icon svg {
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .14));
}

/* Platform actions are universal across products, exactly as on the Excel page. */
.app-detail-page .hero.hero-second-screen .hero-os-actions .os-option:nth-child(1) {
  --cta-bg: #1689d6;
  --cta-bg-end: #0b6fba;
  --cta-border: #0864a8;
  --cta-shadow: rgba(8, 103, 174, .24);
}

.app-detail-page .hero.hero-second-screen .hero-os-actions .os-option:nth-child(2) {
  --cta-bg: #46505a;
  --cta-bg-end: #2d343b;
  --cta-border: #252b31;
  --cta-shadow: rgba(34, 40, 46, .22);
}

.app-detail-page .hero.hero-second-screen .hero-os-actions .os-option:nth-child(3) {
  --cta-bg: #20a469;
  --cta-bg-end: #11824f;
  --cta-border: #0d7245;
  --cta-shadow: rgba(13, 122, 73, .22);
}

.app-detail-page .hero.hero-second-screen .hero-os-actions .os-option:has(.os-download.tertiary) {
  --cta-bg: #687782;
  --cta-bg-end: #4a5862;
  --cta-border: #3f4b54;
  --cta-shadow: rgba(50, 62, 71, .2);
}

/* Unified download labels can be longer than the legacy action copy. */
.hero.hero-second-screen .hero-os-actions .os-download strong {
  overflow: visible;
  line-height: 1.18;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Centre the desktop download stack against the interactive application window. */
@media (min-width: 1081px) {
  main#top:is(.app-detail-page, :is(.product-page, :has(> #excel-download-start)))
  .hero.hero-second-screen aside#download .download-original-view > .hero-os-actions {
    margin-top: 19px;
  }
}

@media (min-width: 1800px) {
  main#top:is(:is(.product-page, :has(> #excel-download-start)), .app-detail-page:not(.app-detail-page--apps)) > #features > .container {
    width: min(1600px, calc(100% - 48px));
  }
}

/* Product release actions keep the glyph beside the label, never below it. */
.app-detail-page #versions .release-row .download {
  display: inline-flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding-inline: 14px;
  white-space: nowrap;
  line-height: 1;
}

.app-detail-page #versions .release-row .download::before {
  width: 15px;
  height: 15px;
  position: static;
  display: block;
  flex: 0 0 15px;
  order: 2;
  margin: 0;
}

.app-detail-page #versions .release-row .download.release-action-open::before {
  transform: rotate(-90deg);
}

.app-detail-page #versions .release-row .download::after {
  content: none !important;
  display: none !important;
}

/* Use the same local platform marks everywhere; class selectors avoid row-order bugs. */
.app-detail-page #versions .platform-tag.platform-windows .platform-dot::before,
.app-detail-page #versions .filter-button[data-filter="windows"]::before {
  -webkit-mask: none !important;
  mask: none !important;
  background: transparent url("os-icons/windows-modern.svg") center / contain no-repeat !important;
}

.app-detail-page #versions .platform-tag.platform-macos .platform-dot::before,
.app-detail-page #versions .filter-button[data-filter="macos"]::before {
  -webkit-mask: none !important;
  mask: none !important;
  background: transparent url("os-icons/apple-modern.svg") center / contain no-repeat !important;
}

.app-detail-page #versions .platform-tag.platform-mobile .platform-dot::before,
.app-detail-page #versions .filter-button[data-filter="mobile"]::before {
  -webkit-mask: none !important;
  mask: none !important;
  background: transparent url("os-icons/android-modern.svg") center / contain no-repeat !important;
}

/* The closing call-to-action is content on the section surface, not a nested card. */
.app-detail-page .download-return-panel {
  width: 100%;
  max-width: none;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.app-detail-page .download-return-panel h2 {
  font-family: var(--site-display-font);
  font-size: clamp(30px, 2.55vw, 36px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.025em;
}

.app-detail-page .download-return-copy {
  max-width: 720px;
  font-size: 14px;
  line-height: 1.55;
}

/* The generated DLE markup is flat; pin every item to an explicit grid area. */
.app-detail-page .download-return-panel {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(230px, 286px);
  grid-template-areas:
    "mark title action"
    "mark copy action"
    "platforms platforms action";
  column-gap: 20px;
  row-gap: 8px;
  align-items: center;
}

.app-detail-page .download-return-mark {
  grid-area: mark;
  width: 42px;
  height: 42px;
  align-self: start;
  object-fit: contain;
}

.app-detail-page .download-return-panel > h2 {
  grid-area: title;
  margin: 0;
}

.app-detail-page .download-return-panel > .download-return-copy {
  grid-area: copy;
  margin: 0;
}

.app-detail-page .download-return-platforms {
  grid-area: platforms;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.app-detail-page .download-return-platforms li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: #53645b;
  font-size: 11px;
  font-weight: 650;
}

.app-detail-page .download-return-platforms img {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  object-fit: contain;
}

.app-detail-page .download-return-panel > .download-return-button {
  grid-area: action;
  grid-template-columns: minmax(0, 1fr) 18px;
  width: 100%;
  min-height: 54px;
}

.app-detail-page .download-return-panel > .download-return-button > span {
  grid-column: 1;
}

.app-detail-page .download-return-panel > .download-return-button-arrow {
  grid-column: 2;
  width: 18px;
  height: 18px;
}

@media (max-width: 780px) {
  .app-detail-page #versions .release-row .download {
    min-width: 116px;
    justify-self: end;
  }

  .app-detail-page .download-return-panel {
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-areas:
      "mark title"
      "copy copy"
      "platforms platforms"
      "action action";
    column-gap: 13px;
    row-gap: 12px;
  }

  .app-detail-page .download-return-mark {
    width: 36px;
    height: 36px;
  }

  .app-detail-page .download-return-panel > .download-return-button {
    width: min(100%, 320px);
    justify-self: start;
  }
}

/* Excel detail layout repair: five visible release cells need five columns. */
@media (min-width: 781px) {
  main#top:is(:is(.product-page, :has(> #excel-download-start)), .app-detail-page:not(.app-detail-page--apps)) #versions .release-head,
  main#top:is(:is(.product-page, :has(> #excel-download-start)), .app-detail-page:not(.app-detail-page--apps)) #versions .release-row {
    grid-template-columns:
      minmax(0, 1.2fr)
      minmax(0, .65fr)
      minmax(0, .52fr)
      minmax(0, .68fr)
      118px;
  }

  main#top:is(:is(.product-page, :has(> #excel-download-start)), .app-detail-page:not(.app-detail-page--apps)) #versions .release-head > :nth-child(4) {
    display: block;
  }

  main#top:is(:is(.product-page, :has(> #excel-download-start)), .app-detail-page:not(.app-detail-page--apps)) #versions .release-head > :nth-child(5) {
    display: none;
  }
}

/* Restore breathing room between the capability cards on wide screens. */
@media (min-width: 1081px) {
  main#top:is(:is(.product-page, :has(> #excel-download-start)), .app-detail-page:not(.app-detail-page--apps)) #features .excel-capabilities-grid {
    gap: 14px;
    padding: 14px;
  }

  main#top:is(:is(.product-page, :has(> #excel-download-start)), .app-detail-page:not(.app-detail-page--apps)) #features .excel-capability {
    min-height: 184px;
    padding: 28px 22px;
    border: 1px solid rgba(74, 84, 116, .13);
  }
}

/* Separate the FAQ topic rail from the accordion below it. */
main#top:is(:is(.product-page, :has(> #excel-download-start)), .app-detail-page:not(.app-detail-page--apps)) #faq .faq-topic-toolbar {
  margin-bottom: 14px;
}

/* Excel is imported from the standalone prototype and has no app-detail-page class. */
.download-return .download-return-panel {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(230px, 286px);
  grid-template-areas:
    "mark title action"
    "mark copy action"
    "platforms platforms action";
  column-gap: 20px;
  row-gap: 8px;
  align-items: center;
}

.download-return .download-return-mark {
  grid-area: mark;
  width: 42px;
  height: 42px;
  align-self: start;
  object-fit: contain;
}

.download-return .download-return-panel > h2 {
  grid-area: title;
  margin: 0;
}

.download-return .download-return-panel > .download-return-copy {
  grid-area: copy;
  margin: 0;
}

.download-return .download-return-platforms {
  grid-area: platforms;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.download-return .download-return-platforms li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: #53645b;
  font-size: 11px;
  font-weight: 650;
}

.download-return .download-return-platforms a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color 160ms ease;
}

.download-return .download-return-platforms a:hover {
  color: var(--product-brand, #2467a5);
  text-decoration: underline;
}

.download-return .download-return-platforms a:focus-visible {
  color: var(--product-brand, #2467a5);
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

.download-return .download-return-platforms img {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  object-fit: contain;
}

.download-return .download-return-panel > .download-return-button {
  grid-area: action;
  grid-template-columns: minmax(0, 1fr) 18px;
  width: 100%;
  min-height: 54px;
}

.download-return .download-return-panel > .download-return-button > span {
  grid-column: 1;
}

.download-return .download-return-panel > .download-return-button-arrow {
  grid-column: 2;
  width: 18px;
  height: 18px;
}

@media (max-width: 780px) {
  .download-return .download-return-panel {
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-areas:
      "mark title"
      "copy copy"
      "platforms platforms"
      "action action";
    column-gap: 13px;
    row-gap: 12px;
  }

  .download-return .download-return-mark {
    width: 36px;
    height: 36px;
  }

  .download-return .download-return-panel > .download-return-button {
    width: min(100%, 320px);
    justify-self: start;
  }
}

/* Legacy catalog actions have no fixed-height multi-platform card to fill. */
main.catalog-product-page .hero.hero-second-screen .hero-download-panel:has(.os-option:only-child) .download-original-view {
  min-height: 0;
}

/* The disabled status spans the legacy icon/copy/arrow grid. */
main.catalog-product-page .hero.hero-second-screen .hero-download-panel .os-download[data-external-unavailable] > .external-download-note {
  grid-column: 1 / -1;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}