/* Portrait-only experience on phones. Do not constrain tablets or desktop.
   Browser pages cannot physically lock device orientation, so cover the
   landscape UI until the phone rotates upright. */
.ms-phone-portrait-only{display:none}
@media screen and (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  html,body{overscroll-behavior:none!important}
  body{overflow:hidden!important}
  body > .ms-phone-portrait-only{
    position:fixed!important;inset:0!important;z-index:2147483647!important;
    display:flex!important;flex-direction:column;align-items:center;justify-content:center;
    gap:13px;box-sizing:border-box;
    width:100vw;height:100dvh;
    padding:24px max(28px,env(safe-area-inset-right)) 24px max(28px,env(safe-area-inset-left));
    overflow:auto;touch-action:none;
    background:#f7f9fc!important;color:#25394f!important;text-align:center;
    font-family:"DM Sans",system-ui,sans-serif!important
  }
  .ms-phone-portrait-icon{
    display:grid;place-items:center;width:57px;height:57px;
    border:1px solid #c9d6e6;border-radius:17px;background:#eaf1fa;
    color:#35577f;font-size:36px;line-height:1
  }
  .ms-phone-portrait-only strong{
    color:#25394f;font-family:"Fredoka","DM Sans",system-ui,sans-serif;
    font-size:clamp(21px,3.6vw,29px);font-weight:600;line-height:1.25
  }
  .ms-phone-portrait-only p{
    max-width:350px;margin:0;color:#66788d;font-size:13px;line-height:1.55
  }
}