.hero.hero-dual {
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
}

.hero-dual .hero-visual {
  min-width: 0;
  min-height: 550px;
  background: #fff;
}

.hero-dual .hero-series {
  display: none;
}

.hero-dual .cross { display: none; }

.hero-devices {
  position: absolute;
  inset: 9% 0 38px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  isolation: isolate;
}

.hero-device {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  color: var(--ink);
  animation: hero-device-enter .55s ease-out;
  transition: transform .25s ease;
}

.hero-device:hover,
.hero-device:focus-visible {
  transform: translateY(-5px);
}

.hero-device:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.hero-device-standard {
  z-index: 2;
  flex: 0 0 44%;
  height: 84%;
  margin-right: -2%;
}

.hero-device-cabinet {
  z-index: 1;
  flex: 0 0 56%;
  height: 100%;
  animation-delay: .12s;
}

.hero-device svg {
  display: block;
  width: 100%;
  height: calc(100% - 42px);
  min-height: 0;
  mix-blend-mode: multiply;
  filter: drop-shadow(8px 13px 12px #26322618);
}

.hero-device-caption {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: max-content;
  max-width: 100%;
  min-height: 39px;
  padding: 3px 9px;
  background: #f4f4eede;
  border: 1px solid #d9ded3;
  line-height: 1.25;
  text-align: center;
}

.hero-device-caption strong {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .035em;
}

.hero-device-caption span {
  color: var(--muted);
  font-size: 9px;
}

.hero-dual .visual-bottom {
  z-index: 3;
}

@keyframes hero-device-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1100px) {
  .hero-dual .hero-visual { min-height: 475px; }
  .hero-devices { inset: 10% -2% 36px; }
  .hero-device-caption strong { font-size: 9px; }
}

@media (max-width: 760px) {
  .hero.hero-dual { grid-template-columns: 1fr; }
  .hero-dual .hero-visual { min-height: 380px; }
  .hero-dual .hero-series { top: 13px; font-size: clamp(94px, 22vw, 140px); }
  .hero-devices { inset: 11% 0 36px; }
  .hero-device-standard { flex-basis: 43%; }
  .hero-device-cabinet { flex-basis: 57%; }
}

@media (max-width: 420px) {
  .hero-dual .hero-visual { min-height: 325px; }
  .hero-dual .hero-series { font-size: 96px; }
  .hero-devices { inset: 13% -2% 34px; }
  .hero-device svg { height: calc(100% - 36px); }
  .hero-device-caption { min-height: 34px; padding: 3px 4px; }
  .hero-device-caption strong { font-size: 9px; }
  .hero-device-caption span { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-device { animation: none; transition: none; }
}