/* Decorative section artwork, not a hero: content keeps its original flow. */
.gu-ambient-main {
  position: relative;
  isolation: isolate;
  display: flow-root;
  min-height: 380px;
  padding-top: 28px;
}
.gu-ambient-art {
  position: absolute;
  z-index: -1;
  inset: -24px 0 auto;
  width: min(1220px, calc(100% - 48px));
  margin-inline: auto;
  height: clamp(280px, 28vw, 370px);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  opacity: .46;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(#000 0%, #000 35%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(#000 0%, #000 35%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.gu-ambient-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #080b0f 2%, rgb(8 11 15 / .9) 25%, rgb(8 11 15 / .12) 65%, rgb(8 11 15 / .22)), linear-gradient(rgb(8 11 15 / .1), rgb(8 11 15 / .5));
}
.gu-ambient-art picture, .gu-ambient-art img {
  display: block;
  width: 100%;
  height: 100%;
}
.gu-ambient-art img { object-fit: cover; object-position: center 45%; }
body.gu-ui-system .gu-ambient-main .gu-page-intro--ambient {
  min-height: 140px;
  padding-block: 30px 28px;
  margin-block: 12px 24px;
  border-bottom-color: rgb(185 202 224 / .15);
  gap: 14px 24px;
}
.gu-ambient-main .gu-page-intro--ambient .gu-page-intro__copy {
  display: block;
  flex: 1 1 420px;
}
.gu-ambient-main .gu-page-intro--ambient h1 {
  font-size: clamp(26px, 2.6vw, 34px);
  letter-spacing: -.035em;
}
.gu-ambient-main .gu-page-intro--ambient .gu-page-intro__message {
  margin: 8px 0 0;
  max-width: 660px;
  font-size: 14px;
  line-height: 1.6;
  color: #bcc6d4;
}
/* The product page already has a useful introduction; retain its beta notice. */
.gu-ambient-main .public-beta > section:first-child {
  background: linear-gradient(90deg, rgb(8 11 15 / .86), rgb(8 11 15 / .3));
  border-color: rgb(185 202 224 / .18);
}
/* Welcome copy uses the same ambient treatment; existing highlight media stays intact. */
.home-page .gu-ambient-main > .gu-page-intro--ambient { margin-bottom: 30px; }
@media (max-width: 900px) {
  .gu-ambient-art { width: min(1220px, calc(100% - 32px)); }
}
@media (max-width: 700px) {
  .gu-ambient-main { padding-top: 16px; }
  .gu-ambient-art { top: -12px; height: 280px; opacity: .3; }
  .gu-ambient-art img { object-position: 65% center; }
  .gu-ambient-art::after { background: linear-gradient(90deg, rgb(8 11 15 / .65), rgb(8 11 15 / .2)), linear-gradient(transparent, #080b0f); }
  body.gu-ui-system .gu-ambient-main .gu-page-intro--ambient { padding-block: 24px; min-height: 0; margin-bottom: 20px; gap: 14px; }
  .gu-ambient-main .gu-page-intro--ambient .gu-page-intro__copy { flex-basis: 100%; }
  .gu-ambient-main .gu-page-intro--ambient .gu-page-intro__support { margin-left: 0; }
}
@media (prefers-contrast: more) { .gu-ambient-art { opacity: .12; } }
@media (forced-colors: active) { .gu-ambient-art { display: none; } }