/* Thematic mastheads: photographic scenes and informative screenshots have distinct treatments. */
.thematic-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #101b26;
  color: #fff;
}
.thematic-hero--photo {
  display: flex;
  align-items: center;
  min-height: 37rem;
  padding: clamp(3.5rem, 6vw, 6rem) 0;
}
.thematic-hero .hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.thematic-hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(7,15,23,.97) 0%, rgba(7,15,23,.91) 34%, rgba(7,15,23,.62) 57%, rgba(7,15,23,.08) 100%);
}
.thematic-hero .thematic-hero-copy { min-width: 0; }
.contact-hero.thematic-hero > .wrap { width: 100%; }
.thematic-hero--photo > .so-wrap > div,
.thematic-hero--photo > .so-wrap > :is(h1,p,.so-hero-actions),
.thematic-hero--photo .inner-hero-content > .thematic-hero-copy,
.thematic-hero--photo .az-hero-copy,
.contact-hero.thematic-hero .thematic-hero-copy > :is(h1,p) { max-width: 40rem; }
.thematic-hero.az-hero .az-hero-grid { display: block; }
.thematic-hero.so-hero h1,
.thematic-hero.az-hero h1,
.thematic-hero.inner-hero h1,
.thematic-hero.error-page h1 { color: #fff; }
.thematic-hero.so-hero :is(.so-lead,.so-eyebrow),
.thematic-hero.az-hero :is(.az-lead,.az-eyebrow),
.thematic-hero .page-lead { color: #edf1f4; }
.thematic-hero.so-hero .so-eyebrow,
.thematic-hero.az-hero .az-eyebrow { color: #8cdeed; }
.thematic-hero.az-hero .az-h1-line--end { color: #8cdeed; }
.thematic-hero.so-hero .so-more { color: #d4f5fc; }
.thematic-hero.so-hero .so-more:hover { color: #fff; }
.thematic-hero :is(a,button):focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.thematic-hero.thematic-hero--compact { min-height: 23rem; padding-block: 3.25rem; }
.thematic-hero.error-page { text-align: center; }
.thematic-hero.error-page::before { background: rgba(7,15,23,.78); }
.thematic-hero.error-page p { max-width: 48rem; margin-inline: auto; }
/* Screens and covers stay whole, beside the text rather than behind it. */
.thematic-hero--product,
.thematic-hero--catalog,
.thematic-hero--cover { min-height: 32rem; padding-block: 4rem; background: linear-gradient(130deg, #0b1722, #192d40); }
.thematic-hero--product::before,
.thematic-hero--catalog::before,
.thematic-hero--cover::before { display: none; }
.thematic-hero:is(.thematic-hero--product,.thematic-hero--catalog,.thematic-hero--cover) .inner-hero-content {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(2rem,4vw,4rem);
  align-items: center;
}
.thematic-hero--cover { min-height: 26rem; padding-block: 3rem; }
.thematic-hero--cover h1 { max-width: 32ch; }
.hero-media {
  min-width: 0;
  margin: 0;
  background: #fff;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: .6rem;
  overflow: hidden;
  box-shadow: 0 1.25rem 3.5rem rgba(0,0,0,.2);
}
.hero-media img.hero-media-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 27rem;
  object-fit: contain;
  margin: 0;
}
.hero-media--cover { padding: .8rem; }
.hero-media .hero-product-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 4.5rem;
  padding: .85rem 1.2rem;
  border-bottom: 1px solid #dce3e8;
}
.hero-media .hero-product-logo img { width: auto; height: auto; max-width: 9rem; max-height: 3.25rem; object-fit: contain; }
.hero-media .hero-product-logo--dark { background: #0c1929; border-color: #263746; }
.hero-capture-link { display: block; color: #273d4d; text-decoration: none; }
.hero-capture-link:hover { color: #00697f; }
.hero-capture-label { display: flex; justify-content: space-between; padding: .65rem 1rem; border-top: 1px solid #dce3e8; font-size: .9rem; background: #f4f8fa; }
.hero-media :is(a,button):focus-visible { outline-color: #007b93; outline-offset: -4px; }
.hero-gallery { display: grid; gap: 1px; background: #dce3e8; }
.hero-gallery-item { display: grid; grid-template-columns: 6rem minmax(0,1fr); align-items: center; gap: 1rem; padding: .8rem 1rem; background: #fff; color: #192d40; text-decoration: none; }
.hero-gallery-item:hover { background: #f0fafc; }
.hero-gallery-item span { font-family: var(--v2-display, Montserrat, sans-serif); font-size: .95rem; font-weight: 600; }
.hero-gallery-item img { width: 100%; height: 6rem; object-fit: contain; }
/* Keep the existing diagrams as a compact continuation of the photographic masthead. */
.hero-diagram-band { padding: 1.75rem 0; border-bottom: 1px solid #dce5e8; background: #f8fbfc; }
.hero-diagram-band :is(.so-mast-index,.so-rail,.so-arch,.so-otflow,.so-strata,.so-trace) { margin: 0; }
.hero-diagram-band .so-mast-index { border-top: 0; }
.hero-diagram-band .so-mast-index a { text-decoration: none; }
.hero-diagram-band .so-mast-index li { padding-top: 0; }
.hero-diagram-band .so-arch li:nth-child(n) { margin-top: 0; min-height: 0; }
.hero-diagram-band .so-strata { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; }
.hero-diagram-band .so-strata li:nth-child(n) { width: 100%; }
.hero-diagram-band .so-trace { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1.5rem; padding: 0; border: 0; }
.hero-diagram-band .so-trace li { padding: .2rem 0 .2rem 1.3rem; }
.hero-diagram-band .so-trace li::before { top: .55rem; left: 0; }
.hero-diagram-band .so-ops-panel h2 { font-size: 1.35rem; margin: 0; }
.hero-diagram-band .so-ops { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem 1.5rem; margin-top: 1rem; }
.hero-diagram-band .so-ops li { padding-bottom: 0; }
.hero-diagram-band .so-note { margin-bottom: 0; }
.hero-diagram-band--business-central-365 > .so-wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: start; }
.hero-diagram-band--business-central-365 .so-lockup { margin: 0; padding: 1.3rem; }
.hero-diagram-band--business-central-365 .so-lockup p:last-child { margin-bottom: 0; }
@media (max-width: 1000px) and (min-width: 861px) {
  .thematic-hero--photo > .so-wrap > div,
  .thematic-hero--photo > .so-wrap > :is(h1,p,.so-hero-actions),
  .thematic-hero--photo .az-hero-copy { max-width: 35rem; }
}
@media (max-width: 860px) {
  /* The scene is visible above the text on small screens; the text continues onto solid dark colour. */
  .thematic-hero.thematic-hero--photo { min-height: 0; padding: 16rem 0 2.5rem; }
  .thematic-hero--photo .hero-backdrop { height: 22rem; }
  .thematic-hero--photo::before { background: linear-gradient(180deg, rgba(7,15,23,.03), rgba(7,15,23,.03) 9rem, #101b26 22rem); }
  .thematic-hero.thematic-hero--compact { padding-top: 12rem; padding-bottom: 2.25rem; }
  .thematic-hero--compact .hero-backdrop { height: 17rem; }
  .thematic-hero--compact::before { background: linear-gradient(180deg, rgba(7,15,23,.07), rgba(7,15,23,.12) 5rem, #101b26 17rem); }
  .thematic-hero.error-page::before { background: linear-gradient(180deg, rgba(7,15,23,.07), #101b26 17rem); }
  .thematic-hero--photo > .so-wrap > div,
  .thematic-hero--photo > .so-wrap > :is(h1,p,.so-hero-actions),
  .thematic-hero--photo .az-hero-copy { max-width: none; }
  .thematic-hero:is(.thematic-hero--product,.thematic-hero--catalog,.thematic-hero--cover) .inner-hero-content { grid-template-columns: minmax(0,1fr); gap: 2rem; }
  .thematic-hero:is(.thematic-hero--product,.thematic-hero--catalog,.thematic-hero--cover) { min-height: 0; padding-block: 2.5rem; }
  .hero-media { width: 100%; max-width: 42rem; }
  .hero-diagram-band .so-strata,
  .hero-diagram-band .so-trace,
  .hero-diagram-band .so-ops { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hero-diagram-band--business-central-365 > .so-wrap { grid-template-columns: minmax(0,1fr); gap: 1.2rem; }
}
@media (max-width: 480px) {
  .hero-diagram-band .so-trace,
  .hero-diagram-band .so-ops { grid-template-columns: minmax(0,1fr); }
  .hero-diagram-band .so-strata { gap: .5rem; }
  .hero-diagram-band .so-strata li { padding: .85rem; }
  .hero-gallery-item { grid-template-columns: 4.5rem minmax(0,1fr); gap: .6rem; padding: .65rem; }
  .hero-gallery-item img { height: 4.5rem; }
  .hero-gallery-item span { font-size: .8rem; }
}
@media (max-width: 359px) {
  .thematic-hero.so-hero h1 { font-size: clamp(1.875rem,9.4vw,2.15rem); }
}