/* Interactive prototypes share the portfolio's type, surfaces and spacing. */
.case-prototype { background:#fff; padding:clamp(56px,6vw,88px) clamp(20px,5vw,64px); }
.case-prototype__inner { width:100%; max-width:1192px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:40px; }
.case-prototype__copy { width:100%; max-width:760px; text-align:center; }
.case-prototype__copy h2 { margin:0 0 20px; color:#111; }
.case-prototype__copy p { margin:0; font-size:17px; line-height:1.65; color:#4d5b70; }
.case-prototype__viewer { position:relative; width:calc(80% - 3.2px); max-width:312px; height:auto; aspect-ratio:390 / 844; overflow:hidden; background:#fff; border:0; box-shadow:none; }
/* Figma reserves 48px at each side and 60px above/below its canvas.
   Keep those viewer gutters outside the device outline, not around the app. */
.case-prototype__viewer iframe { position:absolute; display:block; left:-48px; top:-60px; width:calc(100% + 96px); height:calc(100% + 120px); max-width:none; border:0; }
.case-prototype--desktop .case-prototype__inner { display:flex; flex-direction:column; gap:40px; }
.case-prototype--desktop .case-prototype__copy { max-width:760px; text-align:center; }
.case-prototype--desktop .case-prototype__copy h2 { margin-bottom:20px; }
.case-prototype--desktop .case-prototype__viewer { max-width:none; aspect-ratio:1440 / 1024; }
@media (max-width:767px) {
  .case-prototype { padding-top:48px; padding-bottom:48px; }
  .case-prototype__inner { gap:28px; }
  .case-prototype__copy { max-width:520px; text-align:left; }
  .case-prototype__copy h2 { margin-bottom:18px; }
  .case-prototype__copy p { font-size:16px; }
  .case-prototype__viewer { max-width:312px; }
  .case-prototype--desktop .case-prototype__inner { gap:28px; }
  .case-prototype--desktop .case-prototype__copy { text-align:left; }
  .case-prototype--desktop .case-prototype__viewer { aspect-ratio:1440 / 1024; }
}

/* A light device outline distinguishes embedded prototypes from the page. */
.case-prototype .case-prototype__viewer {
  box-sizing: content-box;
  padding: 0;
  border: 2px solid #D5DEE8;
  border-radius: clamp(26px, 3vw, 36px);
  box-shadow: var(--site-shadow-lg);
}

.case-prototype--desktop .case-prototype__viewer { border-radius: 18px; }

/* Trim the light source-frame edge and fractional canvas seam in SoundPath.
   The outer device size stays identical to the other mobile prototypes. */
.case-prototype[aria-labelledby="soundpath-prototype-title"] .case-prototype__viewer iframe {
  transform: scale(1.01);
  transform-origin: center;
}