/* Standalone HYPERSIT presentation. Synapse owns its eventual shared shell. */
.auth-screen {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  direction: ltr;
  background: #fbfaf8;
}
.auth-brand {
  position: relative;
  min-width: 0;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
  background: #141416;
  isolation: isolate;
}
.auth-brand::after { content: none; }
.auth-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, #141416 0%, #141416bb 18%, #14141611 62%, #141416 100%),
    url('auth-studio-background.png') center 65% / cover no-repeat;
  opacity: .7;
}
.auth-brand-logo {
  position: absolute;
  top: clamp(36px, 5.5vh, 64px);
  left: clamp(36px, 5vw, 76px);
  z-index: 2;
}
.auth-brand-logo img {
  display: block;
  width: clamp(210px, 21vw, 280px);
  max-height: none;
  height: auto;
  margin: 0;
  object-fit: contain;
  filter: none;
}
.auth-product-stage {
  position: absolute;
  inset: 128px 10px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-product-stage .auth-product-image {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: none;
  margin: 0;
  object-fit: contain;
  object-position: center;
  filter: none;
  clip-path: inset(0 1.5%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 92%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
  mask-composite: intersect;
}
.auth-main { min-width: 0; padding: 56px 44px; align-items: center; }
.auth-box { width: 100%; max-width: 365px; }
.auth-module-name {
  margin-bottom: 36px;
  text-align: left;
  font-family: Arial, sans-serif;
  line-height: 1.5;
}
.auth-module-name span { display: block; color: #8c8189; font-size: 12px; font-weight: 600; letter-spacing: 2.4px; }
.auth-module-name strong { display: block; margin-top: 5px; color: #29252c; font-size: 21px; letter-spacing: .4px; font-weight: 750; }
.auth-lock { display: none; }
.auth-box h2 { font-size: 23px; }
.auth-box > .auth-description { color: #807781; }
.auth-footnote { color: #928791; }
.sidebar-logo img { filter: none; }
.sidebar-logo small { font-size: 8px; letter-spacing: .8px; }

@media (min-width: 761px) and (max-height: 720px) {
  .auth-brand-logo { top: 30px; }
  .auth-product-stage { top: 100px; bottom: 0; }
  .auth-main { padding-top: 34px; padding-bottom: 34px; }
  .auth-module-name { margin-bottom: 24px; }
}
@media (max-width: 760px) {
  .auth-screen { display: flex; flex-direction: column; }
  .auth-brand { flex: none; min-height: 0; height: 258px; }
  .auth-brand-logo { top: 34px; left: 32px; }
  .auth-brand-logo img { width: 180px; }
  .auth-product-stage { inset: 24px 8px 0 37%; }
  .auth-main { flex: 1; align-items: flex-start; padding: 38px 32px; }
  .auth-module-name { margin-bottom: 25px; }
  .auth-module-name strong { font-size: 20px; }
}
@media (max-width: 480px) {
  .auth-brand { height: 224px; }
  .auth-brand-logo { top: 28px; left: 23px; }
  .auth-brand-logo img { width: 148px; }
  .auth-product-stage { inset: 31px 0 0 36%; }
  .auth-main { padding: 31px 27px 36px; }
  .auth-module-name span { font-size: 11px; }
  .auth-module-name strong { font-size: 18px; }
  .auth-box h2 { font-size: 21px; }
}