/* Company homepage hero and product showcases. */
.site-header { position: relative; z-index: 5; }
.about {
  min-height: clamp(500px, calc(100svh - 220px), 620px);
  display: flex;
  flex-direction: column;
  padding-top: clamp(56px, 9svh, 84px);
  background: #fff;
  text-align: center;
}
/* Keep decoration in normal flow, below copy of any language or length. */
.about::after {
  content: '';
  display: block;
  flex: 1 0 clamp(104px, 9vw, 144px);
  min-height: clamp(104px, 9vw, 144px);
  margin-top: 24px;
  background: url('assets/hero-contours.svg?v=3') center / 100% 100% no-repeat;
  pointer-events: none;
}
.about-content { flex: none; }
.about h1 { line-height: 1.2; }
.about-copy { max-width: 740px; margin: 32px auto 0; text-wrap: pretty; }
.about-copy p { text-wrap: balance; }
.product-name-nowrap { white-space: nowrap; }
.about-copy p + p { margin-top: 14px; }
/* Space above the section heading; the first row below has its own spacing. */
.products { padding-top: 48px; }
/* Align product copy and media with the shared content container edges. */
.product { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.product-copy { width: 100%; max-width: 350px; justify-self: start; }
.product-visual { margin-inline: 0; justify-self: end; }
.product-cloud {
  min-height: 520px;
}
.product-cloud:first-of-type { padding-block: 16px 64px; }
.product-cloud .product-copy h3 { font-size: var(--text-product); }
.product-cloud .product-copy p { margin-top: 16px; max-width: 350px; }
.cloud-showcase,
.artifact-showcase,
.moli-showcase { display: grid; align-items: center; width: 100%; max-width: 520px; aspect-ratio: 6 / 5; }
.browser-pool-image { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.moli-benchmark-image { display: block; width: 100%; height: auto; mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent); mask-composite: intersect; }
/* The original motion has generous white margins; trim only that outer space. */
.artifact-motion { width: 100%; aspect-ratio: 6 / 5; margin-inline: auto; }
.product-motion-video { display: block; width: 100%; height: 100%; object-fit: cover; mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent); mask-composite: intersect; }
@media (max-width: 1100px) {
  .product-cloud { min-height: 460px; }
  .product-cloud .product-copy h3 { font-size: var(--text-product); }
}
@media (max-width: 800px) {
  .about { min-height: 520px; padding-top: 64px; }
  .about-copy { max-width: 620px; }
  .about-copy .desktop-break { display: none; }
  .products { padding-top: 40px; }
  .product { grid-template-columns: 1fr; gap: 24px; }
  .product-copy { max-width: none; justify-self: stretch; }
  .product-visual { margin-inline: auto; justify-self: center; }
  .product-cloud { grid-template-columns: 1fr; gap: 36px; }
  .product-cloud:first-of-type { padding-block: 16px 64px; }
  .product-cloud .product-copy p { max-width: 540px; margin-top: 16px; }
}
@media (max-width: 640px) {
  .about { min-height: 500px; padding-top: 48px; }
  .about h1 { font-size: 36px; line-height: 1.25; }
  .about-copy { max-width: 440px; margin-top: 26px; font-size: var(--text-body); line-height: 1.8; }
  .about-copy p + p { margin-top: 14px; }
  .products { padding-top: 32px; }
  .product-heading { gap: 16px; }
  .product-logo { flex-basis: 56px; width: 56px; height: 56px; }
  .product-logo img { width: 44px; }
  .product-cloud .product-logo img { width: 56px; }
  .product-logo-artifact img { width: 52px; }
  .product-cloud { min-height: 0; }
  .product-cloud:first-of-type { padding-block: 16px 48px; gap: 26px; }
}
@media (max-width: 359px) {
  .about h1 { font-size: 32px; }
}