.morrow-auth-overlay{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:24px;
  background:#f5f2ea;
}
.morrow-auth-overlay[hidden]{display:none}
.morrow-auth-card{
  width:min(100%,420px);
  margin:auto;
  background:#fff;
  border-radius:28px;
  padding:32px;
  box-shadow:0 20px 60px rgba(15,34,56,.14);
}
.morrow-auth-logo{display:block;width:230px;max-width:76%;margin:0 auto 28px}
.morrow-auth-card h1{margin:0 0 10px;font-size:28px;line-height:1.15;color:#0f2238}
.morrow-auth-card p{color:#5d6874;line-height:1.5}
.morrow-auth-card label{display:grid;gap:8px;margin:24px 0 14px;color:#0f2238;font-weight:600}
.morrow-auth-card input{width:100%;box-sizing:border-box;border:1px solid #d7dce1;border-radius:14px;padding:14px 16px;font:inherit;font-weight:400}
.morrow-auth-card button{width:100%}
#morrowAuthCodeForm .btn + .btn{margin-top:8px}
.morrow-auth-status{min-height:24px;margin:14px 0 0;font-size:14px}
.morrow-auth-card code{word-break:break-word}
.morrow-auth-legal{margin:12px 4px 4px!important;font-size:12px;text-align:center;color:#74808c!important}
.morrow-auth-legal[hidden]{display:none!important}
.morrow-auth-legal a{color:#c85f52;font-weight:700;text-underline-offset:2px}
body.morrow-auth-open{overflow:hidden}

@media(max-width:560px){
  .morrow-auth-overlay{
    align-items:flex-start;
    padding:
      max(18px,env(safe-area-inset-top))
      14px
      max(28px,env(safe-area-inset-bottom));
  }

  .morrow-auth-card{
    margin:0 auto;
    padding:26px 24px 32px;
    border-radius:24px;
  }

  .morrow-auth-logo{
    width:220px;
    max-width:82%;
    margin-bottom:26px;
  }
}

@media(prefers-color-scheme:dark){
  .morrow-auth-overlay{
    background:#0f1822;
  }

  .morrow-auth-card{
    background:#182431;
    border:1px solid #334250;
    box-shadow:0 20px 60px rgba(0,0,0,.34);
  }

  .morrow-auth-logo{
    box-sizing:content-box;
    padding:0;
    border-radius:0;
    background:transparent;
  }

  .morrow-auth-card h1,
  .morrow-auth-card label{
    color:#f4f1eb;
  }

  .morrow-auth-card p{
    color:#aeb9bb;
  }

  .morrow-auth-card input{
    background:#202d3a;
    border-color:#41515f;
    color:#f4f1eb;
  }

  .morrow-auth-card input::placeholder{
    color:#829094;
  }

  .morrow-auth-card .btn.primary{
    background:#080f17!important;
    color:#f4f1eb!important;
    border:1px solid #536473!important;
  }

  .morrow-auth-card .btn.neutral{
    background:#202d3a!important;
    color:#f4f1eb!important;
    border:1px solid #41515f!important;
  }

  .morrow-auth-legal{
    color:#9fabad!important;
  }

  .morrow-auth-legal a{
    color:#c6b6e6;
  }
}

/* Landing demo: reuse the finger to swipe through the full Home screenshot. */
@media (prefers-reduced-motion:no-preference){
  body .landing-option-one .morrow-result-phone .landing-phone-frame{
    position:relative;
    overflow:hidden;
    height:clamp(300px,50vh,455px);
  }

  body .landing-option-one .morrow-result-phone .landing-phone-frame img{
    opacity:0;
    pointer-events:none;
  }

  body .landing-option-one .morrow-result-phone .landing-phone-frame::before{
    content:"";
    position:absolute;
    inset:10px;
    border-radius:36px;
    background-image:url('../images/landing-home-preview.jpeg');
    background-repeat:no-repeat;
    background-position:center top;
    background-size:100% auto;
  }

  body .landing-option-one .morrow-story-demo.demo-visible .morrow-result-phone .landing-phone-frame::before{
    animation:morrowHomeScreenshotScroll 2.35s cubic-bezier(.25,.72,.22,1) 7.15s forwards;
  }

  body .landing-option-one .morrow-story-demo.demo-visible .morrow-drag-cursor{
    animation:morrowCursorIn .25s ease 2.45s forwards,
      morrowFingerClickThenDrag 2.65s cubic-bezier(.35,.05,.25,1) 2.85s forwards,
      morrowCursorOut .22s ease 5.50s forwards,
      morrowHomeFingerReturn .28s ease 6.86s forwards,
      morrowHomeFingerSwipe 2.05s cubic-bezier(.25,.72,.22,1) 7.10s forwards,
      morrowCursorOut .24s ease 9.18s forwards !important;
  }

  @keyframes morrowHomeScreenshotScroll{
    0%,10%{background-position:center top;}
    100%{background-position:center bottom;}
  }

  @keyframes morrowHomeFingerReturn{
    0%{opacity:0;transform:translate(126px,-35px) scale(.92);}
    100%{opacity:1;transform:translate(142px,42px) scale(.92);}
  }

  @keyframes morrowHomeFingerSwipe{
    0%,10%{opacity:1;transform:translate(142px,42px) scale(.92);}
    16%{opacity:1;transform:translate(142px,42px) scale(.72);}
    25%{opacity:1;transform:translate(142px,42px) scale(.92);}
    100%{opacity:1;transform:translate(142px,-128px) scale(.92);}
  }
}

@media(max-width:600px) and (prefers-reduced-motion:no-preference){
  body .landing-option-one .morrow-result-phone .landing-phone-frame{
    height:380px;
    padding:7px;
  }

  body .landing-option-one .morrow-result-phone .landing-phone-frame::before{
    inset:7px;
    border-radius:27px;
  }

  body .landing-option-one .morrow-story-demo.demo-visible .morrow-drag-cursor{
    animation:morrowCursorIn .25s ease 2.45s forwards,
      morrowFingerClickThenDragMobile 2.65s cubic-bezier(.35,.05,.25,1) 2.85s forwards,
      morrowCursorOut .22s ease 5.50s forwards,
      morrowHomeFingerReturnMobile .28s ease 6.86s forwards,
      morrowHomeFingerSwipeMobile 2.05s cubic-bezier(.25,.72,.22,1) 7.10s forwards,
      morrowCursorOut .24s ease 9.18s forwards !important;
  }

  @keyframes morrowHomeFingerReturnMobile{
    0%{opacity:0;transform:translate(30px,5px) scale(.9);}
    100%{opacity:1;transform:translate(36px,88px) scale(.9);}
  }

  @keyframes morrowHomeFingerSwipeMobile{
    0%,10%{opacity:1;transform:translate(36px,88px) scale(.9);}
    16%{opacity:1;transform:translate(36px,88px) scale(.7);}
    25%{opacity:1;transform:translate(36px,88px) scale(.9);}
    100%{opacity:1;transform:translate(36px,-52px) scale(.9);}
  }
}