/* Screenshotové listy mají stejnou kompozici jako Výroba a provoz. */
.hero { grid-template-columns: minmax(280px, .72fr) minmax(560px, 1.28fr); gap: 5vw; }
.production .wide-screen { position: relative; z-index: 4; padding: 0; border: 0; background: transparent; box-shadow: 0 20px 55px rgba(12,12,18,.18); }
.production .wide-screen img { border-radius: 8px; }
.noise.is-hidden { opacity: 0; }

.helios-slides > .showcase {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 38px;
  overflow-y: auto;
}

/* Výrobní screenshot může přesáhnout výšku viewportu, proto se list posouvá uvnitř. */
.helios-slides > .production { overflow-y: auto; }
.helios-slides > .feature-split { overflow-y: auto; }
.helios-slides > .security { overflow-y: auto; }

.security-grid { margin-top: 44px; }
.security-grid article { min-height: 190px; padding: 22px 25px; }
.security-grid h3 { margin-top: 24px; }
.security-screen { margin-top: 34px; }
.security-screen img { position: relative; z-index: 4; width: 100%; height: auto; }

@media (max-width: 800px) {
  .security-grid article { min-height: 0; }
}

.showcase-copy {
  width: 100%;
  max-width: 100%;
}

.showcase .screen-frame {
  width: min(1090px, 100%);
  margin: 0 auto;
}

@media (max-width: 800px) {
  .hero { grid-template-columns: 1fr; gap: 45px; }
  .helios-slides > .showcase { gap: 28px; }
}

/* Původní kompozice Mobilního UI, jen s většími telefony. */
.feature-split .phone { width: 290px; }
.feature-split .phone-back { right: 42%; }
@media (max-width: 800px) { .feature-split .phone { width: 225px; } }