/* Shared heading geometry for the home, product families, releases and hubs.
   Change these tokens here; page styles only own colours and outer section grids. */
body.office-catalog-dle {
  --hero-heading-size:46px;
  --hero-heading-line:1.12;
  --hero-heading-weight:635;
  --hero-heading-icon-size:94px;
  --hero-heading-column-gap:28px;
  --hero-heading-row-gap:18px;
  --hero-heading-top:48px;
  --hero-heading-frame-gutter:var(--balanced-content-gutter,24px);
  --hero-heading-inner-inset:var(--balanced-inner-inset,20px);
  --hero-heading-subtitle-size:26px;
  --hero-heading-subtitle-gap:6px;
  --hero-heading-description-size:15px;
}
.hero.hero-second-screen .hero-grid.container {
  width:min(var(--balanced-content-width,1280px),calc(100% - var(--hero-heading-frame-gutter) * 2));
  padding-top:var(--hero-heading-top);
}
.hero.hero-second-screen .hero-copy {
  position:relative;
  box-sizing:border-box;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--hero-heading-icon-size);
  grid-template-areas:"heading-title heading-icon" "heading-support heading-support";
  align-items:start;
  gap:var(--hero-heading-row-gap) var(--hero-heading-column-gap);
  width:100%;
  min-width:0;
  max-width:none;
  margin:0;
  padding:0;
  border:0;
  text-align:left;
}
.hero.hero-second-screen .hero-heading-content {
  grid-area:heading-title;
  min-width:0;
  align-self:start;
}
.hero.hero-second-screen .hero-heading-support {
  grid-area:heading-support;
  min-width:0;
}
body.office-catalog-dle main :is(.hero-heading-content,.download-hub-copy,.ch-office-versions-intro,.catalog-aside,.platform-choice-heading,.platform-office-hero-copy) > h1 {
  max-width:none;
  min-width:0;
  margin:0;
  padding:0;
  font-family:var(--site-hero-font);
  font-size:var(--hero-heading-size);
  font-weight:var(--hero-heading-weight);
  line-height:var(--hero-heading-line);
  letter-spacing:normal;
  text-align:left;
  text-wrap:balance;
  white-space:normal;
  overflow-wrap:break-word;
}
.hero.hero-second-screen .hero-copy h1 > span:first-child { display:inline; }
.hero.hero-second-screen .hero-heading-content .hero-title-secondary {
  display:block;
  max-width:650px;
  margin:var(--hero-heading-subtitle-gap) 0 0;
  font-family:var(--site-hero-font);
  font-size:var(--hero-heading-subtitle-size);
  font-weight:460;
  line-height:1.3;
  letter-spacing:normal;
  text-align:left;
}
.hero.hero-second-screen .hero-heading-support .hero-description {
  max-width:680px;
  margin:0;
  padding:0;
  font-family:var(--site-text-font);
  font-size:var(--hero-heading-description-size);
  font-weight:400;
  line-height:1.48;
  letter-spacing:normal;
  text-align:left;
}
.hero.hero-second-screen .hero-heading-icon {
  grid-area:heading-icon;
  display:grid;
  place-items:center;
  align-self:start;
  justify-self:end;
  width:var(--hero-heading-icon-size);
  height:var(--hero-heading-icon-size);
  margin:0;
  padding:0;
  border-width:0;
}
.hero.hero-second-screen .hero-heading-icon img {
  display:block;
  width:var(--hero-heading-icon-size);
  height:var(--hero-heading-icon-size);
  max-width:none;
  max-height:none;
  aspect-ratio:1;
  object-fit:contain;
  transform:none;
}
/* Keep the Microsoft 365 subtitle on one line where the desktop column allows it. */
@media(min-width:1200px) {
  main#top[data-product="microsoft-365"] .hero.hero-second-screen .hero-heading-content .hero-title-secondary {
    max-width:none;
    font-size:clamp(21px,1.82vw,26px);
  }
}
@media(max-width:1080px) {
  body.office-catalog-dle { --hero-heading-top:38px; }
}
/* In a single-column hero, mirror the text frame at the icon edge.
   Demos and download panels remain outside this heading box. */
@media(min-width:761px) and (max-width:1080px) {
  .hero.hero-second-screen .hero-copy { padding-inline-end:var(--hero-heading-inner-inset); }
}
@media(max-width:760px) {
  body.office-catalog-dle {
    --hero-heading-size:36px;
    --hero-heading-icon-size:72px;
    --hero-heading-column-gap:16px;
    --hero-heading-row-gap:14px;
    --hero-heading-top:28px;
    --hero-heading-frame-gutter:12px;
    --hero-heading-subtitle-size:22px;
    --hero-heading-description-size:14px;
  }
}
@media(max-width:480px) {
  body.office-catalog-dle {
    --hero-heading-size:32px;
    --hero-heading-icon-size:56px;
    --hero-heading-column-gap:12px;
    --hero-heading-subtitle-size:20px;
  }
}