/* ============================================================
   Sign-in and invite — split layout, navy brand panel.
   ============================================================ */

.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background: var(--surface-page);
}
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth__brand { display: none; }
}

/* ---------- Brand panel ---------- */
.auth__brand {
  position: relative;
  overflow: hidden;
  background: var(--surface-inverse);
  color: #fff;
  padding: var(--space-10);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
}
/* A single soft bloom, echoing the board-review cover. */
.auth__brand::after {
  content: "";
  position: absolute;
  right: -170px; bottom: -170px;
  width: 460px; height: 460px;
  border-radius: 50%;
  /* Multiple stops so it reads as a bloom, not a disc with a hard edge. */
  background: radial-gradient(circle,
    rgba(0, 71, 222, 0.42) 0%,
    rgba(0, 71, 222, 0.22) 38%,
    rgba(0, 71, 222, 0.07) 62%,
    rgba(0, 71, 222, 0) 78%);
  filter: blur(6px);
  pointer-events: none;
}
.auth__brand > * { position: relative; z-index: 1; }

.auth__brand-top { display: flex; flex-direction: column; gap: var(--space-3); }
.auth__logo { height: 26px; width: auto; align-self: flex-start; }
.auth__product {
  font: var(--font-overline);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.auth__pitch { display: flex; flex-direction: column; gap: var(--space-7); }
.auth__tagline {
  font: var(--font-h2);
  color: #fff;
  max-width: 18ch;
  letter-spacing: var(--tracking-tight);
}
.auth__benefits { list-style: none; display: flex; flex-direction: column; gap: var(--space-4); }
.auth__benefits li {
  display: flex; gap: var(--space-4); align-items: flex-start;
  color: rgba(255, 255, 255, 0.82);
  font: var(--font-body-sm);
  line-height: var(--leading-relaxed);
}
.auth__benefits svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 3px; color: var(--color-accent); }

.auth__foot { font: var(--font-caption); color: rgba(255, 255, 255, 0.45); }

/* ---------- Form panel ---------- */
.auth__form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-6);
}
.auth__card {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.auth__heading { display: flex; flex-direction: column; gap: var(--space-2); }
.auth__title { font: var(--font-h2); color: var(--text-strong); letter-spacing: var(--tracking-tight); }
.auth__sub { font: var(--font-body-sm); color: var(--text-muted); }
.auth__note { font: var(--font-caption); color: var(--text-subtle); text-align: center; }

/* On small screens the brand panel is hidden, so the mark moves inline. */
.auth__mobile-logo { display: none; }
@media (max-width: 900px) {
  .auth__mobile-logo { display: block; height: 24px; width: auto; margin-bottom: var(--space-5); }
}