/* The portrait is deliberately unframed: it blends into the hero as an object. */
.portrait-plane { display: none; }

.hero-device-wrap {
  width: min(100%, 460px);
  min-height: 570px;
}

.portrait-lockup {
  position: absolute;
  z-index: 2;
  right: -4.8rem;
  bottom: -4.8rem;
  width: min(100%, 510px);
  height: 620px;
  margin: 0;
  pointer-events: none;
}

.portrait-lockup::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 18%;
  right: 18%;
  bottom: 18%;
  height: 18%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(111, 140, 255, .34), transparent 70%);
  filter: blur(24px);
}

.portrait-lockup img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  filter: contrast(1.05) saturate(.94) drop-shadow(0 34px 42px rgba(0, 0, 0, .52));
  transform: perspective(1100px) rotateY(-7deg) rotateX(1deg) scale(1.06);
  transform-origin: 70% 56%;
  -webkit-mask-image: radial-gradient(ellipse 85% 82% at 60% 55%, #000 65%, transparent 100%);
  mask-image: radial-gradient(ellipse 85% 82% at 60% 55%, #000 65%, transparent 100%);
}

.hero-craft-canvas {
  z-index: 1;
  right: -2rem;
  bottom: -1rem;
  opacity: .72;
}

.device-chip,
.device-caption,
.device-label {
  z-index: 4;
}

@media (max-width: 800px) {
  .hero-device-wrap { min-height: 420px; }
  .portrait-lockup { right: -2.5rem; bottom: -3rem; width: 330px; height: 430px; }
  .hero-craft-canvas { width: 220px; height: 240px; right: -3rem; bottom: 0; }
}