/* Refined proportions: calm, compact typography with the same responsive flow. */
.topbar {
  height: 72px;
  padding-inline: clamp(22px, 3vw, 44px);
}

.brand-mark {
  width: 32px;
  height: 38px;
  margin-right: 14px;
}

.brand-mark::before { inset: 7px 8px 7px 12px; }
.brand-mark span { height: 24px; top: 7px; }
.brand-name { max-width: 260px; font-size: 21px; }
.brand-divider { height: 24px; margin-inline: 18px; }
.brand-company,
.home-link { font-size: 14px; }

.auth-layout {
  min-height: calc(100vh - 72px);
  grid-template-columns: minmax(340px, 42%) 1fr;
}

.form-panel { padding: 44px clamp(32px, 7vw, 110px); }
.login-shell { width: min(420px, 100%); }
.form-heading { margin-bottom: 30px; }

.form-heading h1 {
  margin-bottom: 10px;
  font-size: 34px;
  letter-spacing: .04em;
}

.form-heading p { font-size: 15px; }
.field { margin-bottom: 20px; }
.control { height: 52px; }
.form-tools { margin: -2px 0 24px; }
.primary-button { height: 52px; font-size: 16px; }
.switch-line { margin-top: 22px; font-size: 14px; }
.legal-links { gap: 34px; margin-top: 36px; font-size: 14px; }

.register-layout { grid-template-columns: minmax(390px, 40%) 1fr; }
.register-brand { margin: 34px 38px; }
.register-brand strong { margin-bottom: 6px; font-size: 24px; }
.register-brand span { font-size: 14px; }
.register-panel { padding: 58px 6vw 34px; }
.register-home { top: 24px; right: 34px; font-size: 14px; }
.form-heading.compact { margin-bottom: 18px; }
.form-heading.compact h1 { font-size: 32px; }
.form-heading.compact p { font-size: 14px; }
.field-row { margin-bottom: 12px; }
.field-row > label { font-size: 14px; }
.field-row .control,
.captcha-box,
.secondary-button { height: 42px; }
.register-shell .primary-button { height: 46px; }

@media (max-width: 900px) {
  .topbar { height: 68px; }
  .auth-layout { min-height: calc(100vh - 68px); }
  .form-panel { padding: 42px 28px; }
  .register-panel { padding: 62px 28px 36px; }
}

@media (max-width: 600px) {
  .topbar { padding-inline: 16px; }
  .brand-mark { width: 28px; height: 34px; margin-right: 10px; }
  .brand-name { font-size: 18px; }
  .form-panel { padding: 34px 20px; }
  .form-heading { margin-bottom: 28px; }
  .form-heading h1 { font-size: 30px; }
  .control,
  .primary-button { height: 50px; }
  .legal-links { margin-top: 32px; }
  .register-panel { padding: 58px 18px 30px; }
  .form-heading.compact h1 { font-size: 28px; }
}