/* Pyonair ambient product view. A clean device frame (laptop or phone) that shows
   the real product from a scrubbed static embed, scrolls a short glimpse once when
   it enters view, then settles. Decorative: no controls, no interaction. Shared
   across pages, so colours are literal (pages differ in token names). */
.pyo-amb{margin:0;position:relative;width:100%;display:block}
.pyo-amb-screen{position:relative;background:#14161B}
.pyo-amb-viewport{position:relative;overflow:hidden;background:#fff;pointer-events:none}
.pyo-amb-viewport iframe{position:absolute;top:0;left:0;border:0;display:block;background:#fff;transform-origin:0 0;pointer-events:none}
.pyo-amb-viewport::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(27,29,34,.06)}
.pyo-amb-cap{margin:12px 0 0;font-size:12px;line-height:1.4;color:#6B7280;text-align:center}

/* laptop */
.pyo-amb-laptop .pyo-amb-screen{border-radius:16px 16px 6px 6px;padding:12px 12px 14px;box-shadow:0 26px 54px rgba(27,29,34,.2),inset 0 0 0 1px rgba(255,255,255,.07)}
.pyo-amb-laptop .pyo-amb-screen::before{content:"";position:absolute;top:4px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#2A2D35;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.pyo-amb-laptop .pyo-amb-viewport{aspect-ratio:1280/800;border-radius:4px}
.pyo-amb-laptop .pyo-amb-base{position:relative;height:14px;margin:0 -4%;background:linear-gradient(#D9DCE2,#AEB3BD);border-radius:3px 3px 14px 14px;box-shadow:0 16px 28px rgba(27,29,34,.16)}
.pyo-amb-laptop .pyo-amb-base::before{content:"";position:absolute;left:50%;top:0;width:14%;height:5px;margin-left:-7%;background:#9aa0ab;border-radius:0 0 7px 7px}
.pyo-amb-laptop .pyo-amb-base::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(27,29,34,.18);border-radius:0 0 14px 14px}

/* phone */
.pyo-amb-phone{width:min(100%,250px);margin:0 auto}
.pyo-amb-phone .pyo-amb-screen{border-radius:38px;padding:10px;box-shadow:0 26px 54px rgba(27,29,34,.24),inset 0 0 0 1px rgba(255,255,255,.08),inset 0 0 0 3px #090a0d}
.pyo-amb-phone .pyo-amb-screen::before{content:"";position:absolute;top:19px;left:50%;width:30%;height:18px;margin-left:-15%;background:#14161B;border-radius:11px;z-index:2;box-shadow:0 0 0 1px rgba(255,255,255,.05)}
.pyo-amb-phone .pyo-amb-screen::after{content:"";position:absolute;right:-3px;top:24%;width:3px;height:13%;background:#2A2D35;border-radius:0 2px 2px 0}
.pyo-amb-phone .pyo-amb-viewport{aspect-ratio:390/844;border-radius:29px}
.pyo-amb-phone .pyo-amb-base{position:absolute;left:-3px;top:18%;width:3px;height:6%;background:#2A2D35;border-radius:2px 0 0 2px}
.pyo-amb-phone .pyo-amb-base::after{content:"";position:absolute;left:0;top:140%;width:3px;height:100%;background:#2A2D35;border-radius:2px 0 0 2px}

@media(max-width:700px){
  .pyo-amb-laptop .pyo-amb-screen{border-radius:10px 10px 4px 4px;padding:7px 7px 9px}
  .pyo-amb-laptop .pyo-amb-screen::before{top:2px;width:4px;height:4px;margin-left:-2px}
  .pyo-amb-laptop .pyo-amb-viewport{border-radius:3px}
  .pyo-amb-laptop .pyo-amb-base{height:9px;border-radius:2px 2px 10px 10px}
  .pyo-amb-phone .pyo-amb-screen{border-radius:34px;padding:9px}
  .pyo-amb-phone .pyo-amb-viewport{border-radius:26px}
}