/* One phone shell for the Yellow Card product, shared by the case study embed and phone.html.
   The app inside keeps its full 360×800 geometry and is scaled, never cropped. */
.yc-shell { position: relative; box-sizing: border-box; width: min(376px, 100%); aspect-ratio: 376 / 816; padding: 8px; border-radius: 36px; background: #14120c; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 32px 64px -36px rgba(0,0,0,0.85), 0 1px 3px rgba(0,0,0,0.35); }
.yc-shell::after { content: ''; position: absolute; top: 120px; right: -3px; width: 3px; height: 64px; border-radius: 0 3px 3px 0; background: #2a2620; pointer-events: none; }
.yc-shell--fit { width: min(376px, 40.6vh, 100%); height: auto; max-width: 100%; }
.yc-viewport { position: relative; width: 100%; aspect-ratio: 360 / 800; overflow: hidden; border-radius: 28px; background: #FEFEFE; }
.yc-viewport > iframe { position: absolute; top: 0; left: 0; width: 360px; height: 800px; border: 0; display: block; background: #FEFEFE; transform-origin: 0 0; transform: translate(var(--dv-x, 0px), 0) scale(var(--dv-s, 1)); }
@media (max-width: 680px) {
  .yc-shell--fit { width: 100%; }
  .yc-shell { aspect-ratio: 360 / 800; padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .yc-shell::after { content: none; }
  .yc-viewport { border-radius: 0; }
  .yc-viewport > iframe { width: 100%; height: 100%; transform: none; }
}