/* Device fitting rules. Loaded last so old fixed-height rules cannot distort UI.
   Screenshots keep their aspect ratio. Device safe areas sit outside the UI. */
.project-visual{--mockup-width:190px}
.option-visual .project-visual{--mockup-width:132px}
.project-visual>.handset{width:var(--mockup-width)!important;max-width:100%;min-height:0!important;flex-shrink:0}
.project-visual>.paylink-handset{height:auto!important;aspect-ratio:190/430!important;border:5px solid #22232d;border-radius:calc(var(--mockup-width)*.15);display:flex;flex-direction:column;background:#eeecff;padding:0;box-shadow:0 12px 24px #192d4e20;overflow:hidden}
.mockup-camera{width:28%;height:2.8%;min-height:6px;margin:4% auto 3%;background:#17171c;border-radius:20px;flex-shrink:0}
.mockup-display{flex:1;min-height:0;position:relative;overflow:hidden;display:flex;align-items:center;background:linear-gradient(#eeecff,#fff)}
.project-visual>.paylink-handset .mockup-display img{width:100%;height:100%;max-height:100%;object-fit:contain;object-position:center;display:block}
.mockup-home{height:3px;width:30%;margin:3% auto;background:#202027;border-radius:5px;flex-shrink:0}
/* LinkedInEXT already includes a device: crop only its surrounding artwork.
   The source is 576×1120; the device crop is 522×1078 at x29,y21. */
.project-visual>.screen-crop.handset{width:var(--mockup-width)!important;height:auto!important;aspect-ratio:522/1078!important;min-height:0!important;border:0;background:transparent;border-radius:12%/6%;box-shadow:0 12px 24px #192d4e18}
.project-visual>.screen-crop.handset img{position:absolute;width:110.3448275862%!important;height:103.8961038961%!important;max-width:none;left:-5.5555555556%!important;top:-1.9480519481%!important;object-fit:fill}
/* GatherCircle is HTML at its original 240×517.895 layout size.
   Scale the entire device uniformly, including text, frame and safe areas. */
.project-visual>.gather-device{width:var(--mockup-width)!important;height:calc(var(--mockup-width)*2.1578958333)!important;min-height:0!important;border:0!important;background:none;aspect-ratio:auto!important;border-radius:calc(var(--mockup-width)*.1525);overflow:hidden!important;box-shadow:0 12px 24px #192d4e18}
.project-visual>.gather-device .gather-mobile{width:240px;height:517.895px;min-height:517.895px;max-height:517.895px;zoom:1;transform:scale(calc(var(--mockup-width)/240px))!important;transform-origin:0 0}
/* Case study device frames: responsive safe areas, complete source image. */
.pl-iphone{aspect-ratio:190/430;border-width:5px;border-radius:28px;padding:0;background:#f6f4fc}
.pl-screen{display:flex;align-items:center;justify-content:center;flex:1;min-height:0;overflow:hidden}
.pl-screen:not(.pl-half) img{position:static;width:100%;height:100%;object-fit:contain;object-position:center}
.pl-island{height:8px;width:28%;margin:7px auto 6px}
.pl-home-indicator{height:3px;margin:6px auto;width:30%}
/* Two early screenshots share one source image, with a dark gutter between. */
.mockup-half-crop{width:100%;position:relative;overflow:hidden;flex-shrink:0}
.pl-left .mockup-half-crop{aspect-ratio:363/822}
.pl-right .mockup-half-crop{aspect-ratio:366/822}
.pl-half .mockup-half-crop img{position:absolute;height:100%;max-width:none;object-fit:fill;top:0}
.pl-left .mockup-half-crop img{width:216.2534435262%;left:0;right:auto}
.pl-right .mockup-half-crop img{width:214.4808743169%;right:0;left:auto}
/* Exploration crops also retain their measured source proportions. */
.pl-floating-screen{width:auto;max-width:100%;height:350px;flex-shrink:0}
@media(max-width:760px){.option-visual .project-visual{--mockup-width:132px}.project-visual{--mockup-width:175px}.pl-five .pl-iphone{max-width:170px}}