/* Photo-only review: keep all changes scoped to the main photograph. */
.hero-visual.hero-photo-review {
  --iphone-width: clamp(170px, 18vw, 236px);
  --hero-phone-left: clamp(24px, 4%, 52px);
}

.hero-visual.hero-photo-review .hero-photo {
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: 0;
  transform: none;
  object-fit: cover;
  object-position: center 48%;
  border-radius: inherit;
}

.hero-visual.hero-photo-review .hero-phone {
  width: var(--iphone-width);
  height: auto;
  min-height: 0;
  aspect-ratio: 71.9 / 150;
  left: var(--hero-phone-left);
  right: auto;
  border: 3px solid #161719;
  border-radius: calc(var(--iphone-width) * .15);
  background: #161719;
  box-shadow: 0 0 0 1px #a5a6a8, 12px 20px 32px #10101030;
  transform-origin: center;
}

.hero-visual.hero-photo-review .hero-notification {
  position: absolute;
  left: calc(var(--hero-phone-left) + var(--iphone-width) / 2);
  right: auto;
  top: 5%;
  width: max-content;
  max-width: min(calc(100% - 48px), calc(var(--hero-phone-left) * 2 + var(--iphone-width) - 24px));
  margin: 0;
  transform: translateX(-50%) rotate(7deg);
  transform-origin: center;
  animation: none;
}

.hero-photo-review .hero-notification .notification-symbol {
  background: #a5c1d0;
}

.hero-photo-review .hero-phone-screen {
  position: absolute;
  inset: 1px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: calc(var(--iphone-width) * .15 - 4px);
  background: #f8f9fb;
}

.hero-photo-review .hero-phone-screen > img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Front hardware details; the supplied app screenshot remains untouched. */
.hero-photo-review .hero-phone-screen::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 3%;
  left: 50%;
  width: 23%;
  height: 3%;
  border-radius: 999px;
  background: radial-gradient(circle at 84% 50%, #1c2534 0 1px, transparent 2px), #070708;
  transform: translateX(-50%);
}

.hero-photo-review .hero-phone-screen::after {
  content: "";
  position: absolute;
  bottom: 2%;
  left: 34%;
  width: 32%;
  height: 3px;
  border-radius: 999px;
  background: #161719;
}

/* Align to the tilted phone's upper center, not its overall bounding-box center. */
@media (min-width: 901px) {
  .hero-visual.hero-photo-review .hero-notification {
    left: calc(var(--hero-phone-left) + var(--iphone-width) / 2 + var(--iphone-width) * .12);
  }
}

@media (max-width: 650px) {
  .hero-visual.hero-photo-review {
    --iphone-width: 132px;
    --hero-phone-left: 14px;
    display: block;
    height: 320px;
    padding: 0;
    gap: 0;
  }

  .hero-visual.hero-photo-review .hero-photo {
    object-position: 72% center;
  }

  .hero-visual.hero-photo-review .hero-phone {
    position: absolute;
    inset: auto;
    left: 14px;
    top: 26px;
    margin: 0;
  }

  .hero-visual.hero-photo-review .hero-notification {
    top: 8px;
    max-width: calc(100% - 28px);
    padding: 8px 10px;
    transform: translateX(-50%) scale(.66);
    box-shadow: 0 7px 22px #10101020;
  }
}