﻿/* Source screenshots sit inside device-specific hardware, without image cropping. */
body.pf-system.pf-unified[data-portfolio='pawsitive'] #final-result .screen-comparison-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
body.pf-system.pf-unified[data-portfolio='pawsitive'] #final-result .screen-device-stage {
  height: 420px; min-height: 0; padding: 24px 20px 38px; display: flex;
  align-items: center; justify-content: center; overflow: visible;
  background: linear-gradient(145deg,#fff8ee,#f4e5d9); border-radius: 8px;
}
body.pf-system.pf-unified[data-portfolio='pawsitive'] #final-result .screen-device {
  position: relative; display: block; flex: none; width: min(100%,440px);
  margin: 0; padding: 10px 10px 22px; border: 1px solid #55585e;
  border-radius: 12px; background: #22252b; overflow: visible;
  box-shadow: 0 16px 26px -16px #23181470, inset 0 0 0 2px #ffffff0c;
  cursor: default; transform: none !important; transition: none;
}
body.pf-system.pf-unified[data-portfolio='pawsitive'] #final-result .pf-device-display { overflow: hidden; border-radius: 3px; background: #080b0d; }
body.pf-system.pf-unified[data-portfolio='pawsitive'] #final-result .screen-device img {
  display: block; width: 100%; height: auto; max-height: none; object-fit: contain;
  border-radius: 0; transform: none !important; filter: none;
}
#final-result .pf-device-camera { position: absolute; left: calc(50% - 2px); top: 3px; width: 4px; height: 4px; border-radius: 50%; background: #0b0e15; box-shadow: inset 0 0 0 1px #3e4654; }
#final-result .screen-card-desktop .screen-device::before { content: ''; position: absolute; width: 54px; height: 30px; top: 100%; left: calc(50% - 27px); background: linear-gradient(90deg,#85878c,#b9babd,#797b82); clip-path: polygon(20% 0,80% 0,100% 100%,0 100%); }
#final-result .screen-card-desktop .screen-device::after { content: ''; position: absolute; width: 142px; height: 8px; top: calc(100% + 28px); left: calc(50% - 71px); border-radius: 50% 50% 4px 4px; background: linear-gradient(#c6c7ca,#8b8e93); box-shadow: 0 8px 12px #33281820; }
body.pf-system.pf-unified[data-portfolio='pawsitive'] #final-result .screen-card-tablet .screen-device { width: min(100%,248px); padding: 14px; border-radius: 25px; }
body.pf-system.pf-unified[data-portfolio='pawsitive'] #final-result .screen-card-tablet .pf-device-display { border-radius: 12px; }
#final-result .screen-card-tablet .pf-device-camera { top: 5px; }
body.pf-system.pf-unified[data-portfolio='pawsitive'] #final-result .screen-card-phone .screen-device { width: min(100%,168px); padding: 20px 8px 17px; border-radius: 29px; }
body.pf-system.pf-unified[data-portfolio='pawsitive'] #final-result .screen-card-phone .pf-device-display { border-radius: 18px; }
#final-result .screen-card-phone .pf-device-camera { top: 8px; left: calc(50% + 17px); }
#final-result .screen-card-phone .screen-device::before { content: ''; position: absolute; top: 9px; left: calc(50% - 14px); width: 26px; height: 3px; border-radius: 4px; background: #080b10; }
#final-result .screen-card-phone .screen-device::after { content: ''; position: absolute; right: -3px; top: 66px; width: 3px; height: 30px; border-radius: 0 3px 3px 0; background: #54565c; }
body.pf-system.pf-unified[data-portfolio='pawsitive'] #final-result .screen-card-landscape .screen-device { width: min(100%,422px); padding: 8px 22px; border-radius: 29px; }
body.pf-system.pf-unified[data-portfolio='pawsitive'] #final-result .screen-card-landscape .pf-device-display { border-radius: 17px; }
#final-result .screen-card-landscape .pf-device-camera { left: 8px; top: calc(50% + 16px); }
#final-result .screen-card-landscape .screen-device::before { content: ''; position: absolute; left: 9px; top: calc(50% - 14px); height: 26px; width: 3px; border-radius: 4px; background: #080b10; }
#final-result .screen-card-landscape .screen-device::after { content: ''; position: absolute; top: -3px; left: 66px; height: 3px; width: 30px; border-radius: 3px 3px 0 0; background: #54565c; }
@media(max-width:700px) {
  body.pf-system.pf-unified[data-portfolio='pawsitive'] #final-result .screen-comparison-grid { grid-template-columns: 1fr; }
  body.pf-system.pf-unified[data-portfolio='pawsitive'] #final-result .screen-device-stage { height: auto; min-height: 240px; padding: 28px 14px 48px; }
  body.pf-system.pf-unified[data-portfolio='pawsitive'] #final-result .screen-card-phone .screen-device-stage { min-height: 390px; padding-block: 24px; }
  body.pf-system.pf-unified[data-portfolio='pawsitive'] #final-result .screen-card-tablet .screen-device-stage { min-height: 350px; padding-block: 24px; }
}
