/* FollowX real-screen fit: no left/right text cropping or blocked bottom nav. */
.fx-site .fx-phone-inner {position:relative;background:#070d1a}
.fx-site .fx-phone-inner>img {
  position:absolute;top:25px;left:50%;
  width:calc(100% - 6px);height:calc(100% - 31px);
  max-width:none;object-fit:contain;object-position:center top;
  transform:translateX(-50%);transform-origin:center top;
}
.fx-site .fx-phone-frame {
  transform:rotate(-2.4deg);
  animation:fx-phone-fit-float 9s ease-in-out infinite;
}
.fx-site .fx-app-shot {position:relative;background:#070d1a;transform:rotate(-2deg)}
.fx-site .fx-app-shot>img {
  position:absolute;top:27px;left:50%;
  width:calc(100% - 16px);height:calc(100% - 35px);
  max-width:none;padding:0;margin:0;border:0;border-radius:0;
  object-fit:contain;object-position:center top;
  transform:translateX(-50%);transform-origin:center top;
}
.fx-site .fx-app-shot.is-changing>img {animation:fx-screen-fit-change .35s ease both}
/* The selected tab already labels the screen; this caption obscured the app's bottom navigation. */
.fx-site .fx-app-shot figcaption {display:none}
@keyframes fx-phone-fit-float{
  0%,100%{transform:translateY(0) rotate(-2.4deg)}
  50%{transform:translateY(-7px) rotate(-1.8deg)}
}
@keyframes fx-screen-fit-change{
  from{opacity:.5;transform:translateX(-50%) scale(.99)}
  to{opacity:1;transform:translateX(-50%) scale(1)}
}
@media(max-width:940px){
  .fx-site .fx-phone-inner>img{top:22px;height:calc(100% - 28px)}
  .fx-site .fx-app-shot>img{top:24px;height:calc(100% - 32px)}
}
@media(max-width:520px){
  .fx-site .fx-phone-inner>img{top:18px;height:calc(100% - 23px);width:calc(100% - 5px)}
  .fx-site .fx-app-shot>img{top:20px;height:calc(100% - 26px);width:calc(100% - 12px)}
  .fx-site .fx-phone-frame{transform:rotate(-1.5deg);animation:fx-phone-fit-mobile 9s ease-in-out infinite}
  .fx-site .fx-app-shot{transform:rotate(-1deg)}
}
@keyframes fx-phone-fit-mobile{
  0%,100%{transform:translateY(0) rotate(-1.5deg)}
  50%{transform:translateY(-5px) rotate(-1deg)}
}
@media(prefers-reduced-motion:reduce){
  .fx-site .fx-phone-frame,.fx-site .fx-app-shot.is-changing>img{animation:none!important}
}
