/* Enquadramento das capturas reais do produto. */
.screen,
.media,
.timer-screen {
  background: #070907;
}

.screen img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  object-position: center;
  background: #070907;
}

.media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: center;
  background: #070907;
}

.form-media {
  max-height: none;
  display: grid;
  place-items: center;
  padding: 18px;
}

.form-media img {
  width: min(100%, 500px);
  height: min(540px, 65vh);
  aspect-ratio: auto;
  object-fit: contain;
  object-position: top center;
  border-radius: 10px;
  background: #eef0ee;
}

.phone img,
.phone-large img {
  width: 100%;
  aspect-ratio: 9 / 18;
  object-fit: contain;
  object-position: top center;
  background: #050605;
}

.leaderboard {
  overflow: visible;
}

.phone-stage {
  min-width: 0;
  min-height: 720px;
  overflow: visible;
}

.phone.phone-large {
  position: relative;
  right: auto;
  bottom: auto;
  width: min(285px, 68vw);
  padding: 6px;
  transform: none;
}

.phone.phone-large img {
  border-radius: 19px;
}

.iphone-crop {
  position: relative;
  z-index: 3;
  width: min(350px, 72vw);
  aspect-ratio: 350 / 670;
  overflow: hidden;
  border-radius: 38px;
  background: #050605;
  filter: drop-shadow(0 35px 65px #000);
}

.iphone-shot {
  position: absolute;
  top: -3.1%;
  left: -0.6%;
  width: 106.5%;
  max-width: none;
  height: 106%;
  object-fit: fill;
}

.iphone-product-shot {
  position: relative;
  z-index: 3;
  display: block;
  width: min(390px, 76vw);
  max-height: 710px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 35px 65px #000b);
}

.feature-grid {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1000px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.timer-screen img {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 700px) {
  .screen img {
    aspect-ratio: 16 / 10;
  }

  .form-media {
    padding: 10px;
  }

  .form-media img {
    height: min(500px, 70vh);
  }

  .phone-stage {
    min-height: 610px;
  }

  .phone.phone-large {
    width: min(245px, 68vw);
  }

  .iphone-crop {
    width: min(300px, 78vw);
    border-radius: 32px;
  }

  .iphone-product-shot {
    width: min(330px, 82vw);
    max-height: 610px;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }
}

.product-showcase {
  padding-top: 90px;
}

.showcase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 55px;
}

.showcase-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  transition: transform .25s ease, border-color .25s ease;
}

.showcase-card:hover {
  transform: translateY(-4px);
  border-color: #b8f52d66;
}

.showcase-wide {
  grid-column: 1 / -1;
}

.showcase-copy {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 25px 28px;
  border-bottom: 1px solid var(--border);
}

.showcase-copy > span {
  color: var(--primary);
  font: 700 .75rem monospace;
}

.showcase-copy h3,
.showcase-copy p {
  margin: 0;
}

.showcase-copy p {
  margin-top: 5px;
  color: var(--text-muted);
  font-size: .88rem;
}

.showcase-media {
  aspect-ratio: 16 / 9;
  padding: 10px;
  background: #070907;
}

.showcase-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 9px;
}

@media (max-width: 700px) {
  .showcase-grid {
    grid-template-columns: 1fr;
  }

  .showcase-wide {
    grid-column: auto;
  }

  .showcase-copy {
    padding: 20px;
  }
}