/* Fixed branding is independent of the seven fading crew photographs. */
@media (min-width: 960px) {
  #seafix-demo.is-logged-out .sf-main { padding-inline: 40px; }
  #seafix-demo.is-logged-out .sf-auth-shell { width: 100%; max-width: none; margin-inline: auto; }
  #seafix-demo .sf-login-visual { container-type: inline-size; }
  #seafix-demo .sf-auth-shell .sf-login-slide img { object-position: center; }
  #seafix-demo .sf-auth-shell [data-slide-scene="safety"] img { object-position: 75% center; }
  #seafix-demo .sf-login-visual .sf-login-slides::after {
    content: ""; position: absolute; z-index: 2; inset: auto 0 0; height: 170px;
    background: linear-gradient(transparent, rgb(0 0 0 / .58)); pointer-events: none;
  }
  #seafix-demo .sf-login-visual .sf-login-overlay {
    position: absolute; z-index: 3; left: 32px; right: 56px; bottom: 32px;
    display: flex; align-items: center; gap: 12px; color: #fff;
    pointer-events: none; text-shadow: 0 1px 8px rgb(0 0 0 / .35);
  }
  #seafix-demo .sf-login-overlay > img {
    display: block; width: 54px; height: 54px; flex: 0 0 auto; border-radius: 12px;
  }
  #seafix-demo .sf-login-overlay-copy { position: relative; width: max-content; min-width: 0; padding-bottom: 16px; }
  #seafix-demo .sf-login-overlay-copy strong {
    display: block; color: #fff; font-size: 36px; font-weight: 750;
    line-height: 1.02; letter-spacing: -.035em; white-space: nowrap;
  }
  #seafix-demo .sf-login-slogan {
    position: absolute; inset: auto 0 0; color: #fff; font-size: 13px;
    font-weight: 550; line-height: 16px; white-space: pre;
  }
  #seafix-demo .sf-login-slogan-letters { display: flex; justify-content: space-between; }
  #seafix-demo .sf-auth-shell .sf-login-slide-controls { z-index: 4; right: 56px; bottom: 26px; }
  /* Keep seven selectors clear of the lockup on smaller desktop panels. */
  @container (max-width: 780px) {
    #seafix-demo .sf-auth-shell .sf-login-slide-controls { top: 24px; bottom: auto; }
  }
}