/* Selected A layout: a caption-free, borderless scene matching the hero navy. */
.dc-layout.hero-option-a .hero-reference::before {
 background-image: linear-gradient(#8fb4ea12 1px, transparent 1px), linear-gradient(90deg, #8fb4ea12 1px, transparent 1px);
 background-size: 64px 64px;
 mask-image: linear-gradient(90deg, #000 0%, #000 34%, transparent 57%);
 -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 34%, transparent 57%);
}
.dc-layout.hero-option-a .hero-reference .reference-frame { border: 0; padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
.dc-layout.hero-option-a .hero-reference .reference-screen { border: 0; border-radius: 0; }

@media (max-width: 1000px) {
 .dc-layout.hero-option-a .hero-reference::before {
  mask-image: linear-gradient(180deg, #000 0%, #000 28%, transparent 62%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 28%, transparent 62%);
 }
}
/* Shared content edges for navigation, hero and the following sections. */
.dc-layout.hero-option-a { --dc-content-width: 1240px; }
.dc-layout.hero-option-a .wrap { width: min(var(--dc-content-width), calc(100% - 2 * var(--dc-gutter))); }
.dc-layout.hero-option-a .navigation { width: min(var(--dc-content-width), calc(100% - 2 * var(--dc-gutter))); }
.dc-layout.hero-option-a .hero-reference { padding-inline: max(var(--dc-gutter), calc((100vw - var(--dc-content-width)) / 2)); }
.dc-layout.hero-option-a .hero-reference .dc-hero-intro,
.dc-layout.hero-option-a .hero-reference .reference-product { width: 100%; }
.dc-layout.hero-option-a .visual-example { left: max(var(--dc-gutter), calc((100% - var(--dc-content-width)) / 2)); }