/* One approved mark for every application brand surface. */
#seafix-demo .sf-brand-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}
#seafix-demo .sf-brand-mark,
#seafix-demo .sf-email-brand > span {
  flex-shrink: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: #000;
}
#seafix-demo .sf-topbar .sf-brand-lockup {
  display: flex; align-items: center; flex: 1 1 auto; gap: 14px;
}
#seafix-demo .sf-topbar .sf-brand {
  color: light-dark(#000, #fff); font-size: 24px; font-weight: 750;
  line-height: 1.15; letter-spacing: -.035em; white-space: nowrap;
}
#seafix-demo .sf-topbar .sf-brand-mark { width: 44px; height: 44px; border-radius: 12px; }
#seafix-demo .sf-topbar .sf-top-actions { flex-shrink: 0; }
@media (max-width: 479px) {
  #seafix-demo .sf-topbar .sf-brand-lockup { gap: 11px; }
  #seafix-demo .sf-topbar .sf-brand { font-size: 22px; }
  #seafix-demo .sf-topbar .sf-brand-mark { width: 40px; height: 40px; border-radius: 11px; }
}
@media (max-width: 370px) {
  #seafix-demo .sf-topbar .sf-brand-lockup { gap: 8px; }
  #seafix-demo .sf-topbar .sf-brand { font-size: 18px; }
  #seafix-demo .sf-topbar .sf-brand-mark { width: 34px; height: 34px; border-radius: 9px; }
}
#seafix-demo .sf-email-brand > span { width: 44px; height: 44px; border-radius: 12px; }
#seafix-demo .sf-email-brand strong { display: block; font-size: 1.0625rem; line-height: 1.2; }
#seafix-demo .sf-email-brand small { display: block; margin-top: 4px; color: var(--sf-muted); font-size: .75rem; line-height: 1.4; }
#seafix-demo .sf-auth-shell .sf-login-brand.sf-recovery-brand {
  gap: 0;
  margin-bottom: 28px;
}
#seafix-demo .sf-recovery-brand-lockup {
  display: flex;
  align-items: center;
  gap: 16px;
}
#seafix-demo .sf-recovery-wordmark {
  color: var(--sf-heading);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.035em;
}
#seafix-demo .sf-recovery-intro { margin-bottom: 24px; }
#seafix-demo .sf-recovery-intro h2 {
  margin: 0;
  color: var(--sf-heading);
  font-size: 1.625rem;
  font-weight: 550;
  line-height: 1.2;
  letter-spacing: -.035em;
}
#seafix-demo .sf-recovery-intro p {
  margin: 6px 0 0;
  color: var(--sf-muted);
  font-size: 1rem;
  line-height: 1.45;
}
@media (max-width: 370px) {
  #seafix-demo .sf-recovery-wordmark { font-size: 1.375rem; }
  #seafix-demo .sf-recovery-brand-lockup { gap: 12px; }
}