.comp-page { background: #fff; }
.comp-stream { padding-top: 88px; overflow: clip; }
.comp-hero { height: calc(100svh - 88px); min-height: 620px; margin: 0; padding: clamp(28px,4.5vw,72px); display: grid; place-items: center; background: #dff8ea; overflow: hidden; }
.comp-hero img { display: block; width: min(100%,1500px); max-height: 100%; object-fit: contain; box-shadow: 0 28px 90px rgba(0,92,62,.14); }
.comp-frame { margin: 0; padding: clamp(22px,4.5vw,76px); display: grid; place-items: center; overflow: hidden; }
.comp-frame img { display: block; width: 100%; height: auto; box-shadow: 0 22px 70px rgba(18,29,25,.11); }
.comp-frame--mist { background: #f1f3f1; }
.comp-frame--green { background: #c7f5d8; }
.comp-frame--ink { background: #15211c; }
.comp-frame--violet { background: #eae6ff; }
.comp-frame--error { background: #fff0ef; }
.comp-frame--dark { background: #171717; }
.comp-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.comp-pair .comp-frame { align-content: center; }
.client-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 32px; font: 400 .75rem "Fragment Mono",monospace; text-transform: uppercase; border-bottom: 1px solid currentColor; }
@media screen and (max-width:900px) {
  .comp-stream { padding-top: 72px; }
  .comp-hero { height: auto; min-height: 0; padding: 50px 16px; }
  .comp-pair { grid-template-columns: 1fr; }
  .comp-frame { padding: 34px 14px; }
}