/* FLODent — iPhone/mobile production corrections
   Loaded after site.bundle.css. Keeps the first screen compact and centers the app mockup. */

@media (max-width: 820px){
  /* First mobile screen: compact composition instead of a tall empty middle. */
  .reference-mobile-stage.mobile-home-coded{
    overflow:hidden!important;
  }
  .mobile-home-shell{
    padding-left:16px!important;
    padding-right:16px!important;
    padding-bottom:14px!important;
  }
  .mobile-home-cta{
    margin-top:20px!important;
  }
  .mobile-home-scene{
    position:relative!important;
    isolation:isolate!important;
    width:100%!important;
    height:clamp(480px,108vw,540px)!important;
    min-height:480px!important;
    max-height:540px!important;
    margin:18px auto 0!important;
    overflow:visible!important;
  }
  .mobile-home-halo{
    left:50%!important;
    top:17%!important;
    width:clamp(178px,45vw,260px)!important;
    opacity:.42!important;
    border-color:rgba(70,165,255,.52)!important;
    box-shadow:0 0 22px rgba(49,133,255,.22),inset 0 0 28px rgba(77,83,255,.10)!important;
  }
  .mobile-home-mascot{
    left:50%!important;
    bottom:13%!important;
    width:clamp(174px,43%,238px)!important;
    max-width:238px!important;
    transform:translateX(-50%)!important;
    z-index:2!important;
  }
  .mobile-home-card{
    z-index:3!important;
  }
  .mobile-home-card.points{
    left:0!important;
    top:0!important;
    width:34%!important;
    max-width:202px!important;
    transform:rotate(-3deg)!important;
  }
  .mobile-home-card.appointment{
    right:0!important;
    top:0!important;
    width:35%!important;
    max-width:210px!important;
    transform:rotate(3deg)!important;
  }
  .mobile-home-card.habits{
    left:0!important;
    bottom:0!important;
    width:35%!important;
    max-width:210px!important;
    transform:rotate(-1deg)!important;
  }
  .mobile-home-card.calendar{
    right:0!important;
    bottom:0!important;
    width:35%!important;
    max-width:210px!important;
    transform:rotate(1deg)!important;
  }

  /* App mockup: visually center the angled phone between the two arrows. */
  .app-mobile-visual-wrap{
    position:relative!important;
  }
  .app-mobile-phone,
  .app-mobile-phone.active{
    left:calc(50% - 38px)!important;
    top:50%!important;
    transform:translate(-50%,-50%) scale(1)!important;
  }
  .app-mobile-phone:not(.active){
    transform:translate(-50%,-50%) scale(.982)!important;
  }
  .app-mobile-phone-shadow{
    left:calc(50% - 38px)!important;
  }
  .app-mobile-arrow.prev{left:5px!important}
  .app-mobile-arrow.next{right:5px!important}

  /* Broken-image UI should never be visible while a fallback request is attempted. */
  .mobile-home-card img,
  .mobile-home-mascot img,
  .mobile-home-logo img,
  .app-mobile-phone img{
    color:transparent!important;
  }
}

@media (max-width: 430px){
  .mobile-home-shell{
    padding-left:14px!important;
    padding-right:14px!important;
  }
  .mobile-home-scene{
    height:480px!important;
    min-height:480px!important;
    max-height:480px!important;
    margin-top:16px!important;
  }
  .mobile-home-halo{
    top:18%!important;
    width:46%!important;
  }
  .mobile-home-mascot{
    width:44%!important;
    bottom:14%!important;
  }
  .mobile-home-card.points{width:35%!important}
  .mobile-home-card.appointment{width:36%!important}
  .mobile-home-card.habits{width:36%!important}
  .mobile-home-card.calendar{width:36%!important}

  .app-mobile-phone,
  .app-mobile-phone.active{
    left:calc(50% - 40px)!important;
  }
  .app-mobile-phone-shadow{
    left:calc(50% - 40px)!important;
  }
}

@media (max-width: 380px){
  .mobile-home-scene{
    height:455px!important;
    min-height:455px!important;
    max-height:455px!important;
  }
  .mobile-home-mascot{width:43%!important;bottom:14%!important}
  .mobile-home-card.points{width:34%!important}
  .mobile-home-card.appointment{width:35%!important}
  .mobile-home-card.habits{width:35%!important}
  .mobile-home-card.calendar{width:35%!important}
  .app-mobile-phone,
  .app-mobile-phone.active{left:calc(50% - 34px)!important}
  .app-mobile-phone-shadow{left:calc(50% - 34px)!important}
}

@media (max-width:820px){
  html.flodent-critical-loading .mobile-home-logo img,
  html.flodent-critical-loading .mobile-home-card img,
  html.flodent-critical-loading .mobile-home-mascot img,
  html.flodent-critical-loading .app-mobile-phone img{
    opacity:0!important;
  }
  .mobile-home-logo img,
  .mobile-home-card img,
  .mobile-home-mascot img,
  .app-mobile-phone img{
    transition:opacity .28s ease!important;
  }
}