/* Shared account pages */
.product-auth { --auth-radius: 6px; --auth-panel: #102c47; }
.product-auth :is(.login-brand, .su-art) {
  background: var(--auth-panel) url('../img/brand/pitch-lines.svg') right -100px bottom -110px / min(620px, 115%) auto no-repeat;
  border-right: 1px solid #294862;
}
.product-auth .login-brand h2, .product-auth .su-art-copy h2 {
  max-width: 15ch;
  margin: 0;
  font-size: clamp(32px, 4vw, 55px);
  line-height: 1.08;
  letter-spacing: -.05em;
  color: #fff;
}
.product-auth .login-brand .lead { max-width: 43ch; color: #d7e5f2; font-size: 15px; line-height: 1.6; margin-top: 16px; }
.product-auth .login-brand li { color: #d7e5f2; font-size: 13px; }
.product-auth .login-brand li svg { color: #78c9f5; }
.product-auth .login-brand .foot { color: #b4c9dc; font-size: 12px; }
.product-auth .su-art { justify-content: flex-start; gap: clamp(80px, 16vh, 200px); }
.product-auth .su-art-copy { position: relative; }
.product-auth .login-form { align-items: flex-start; padding-top: clamp(44px, 13vh, 150px); }
.product-auth .login-card { max-width: 430px; }
.product-auth .login-card h1 { font-size: clamp(30px, 4vw, 39px); line-height: 1.14; }
.product-auth .login-card .sub { font-size: 15px; line-height: 1.55; margin-block: 10px 22px; }
.product-auth .login-card form { margin-top: 0; gap: 15px; }
.product-auth .login-card .field label { font-size: 14px; }
.product-auth .login-card .small, .product-auth .login-card .row, .product-auth .login-card .back { font-size: 13px; }
.product-auth .login-card .row { justify-content: flex-end; flex-wrap: wrap; }
.product-auth #signedInBox { margin-bottom: 18px; }
.product-auth #signedInBox .row { justify-content: flex-start; }
.product-auth .login-card .demo { padding: 14px; border: 1px solid var(--line); border-radius: var(--auth-radius); }
.product-auth .login-card .back:hover, .product-auth .su-login:hover { text-decoration: underline; text-underline-offset: 4px; }
.product-auth :is(.input, .textarea, .select, .btn, .alert, .su-google, .su-role, .su-role-ic, .su-bar, .su-bar i, .su-next, .demo-accounts button, .demo-accounts code) { border-radius: var(--auth-radius); }
.product-auth :is(.input, .textarea, .select) { font-size: 16px; }
.product-auth :is(.login-card .btn-block, .su-next) { min-height: 48px; font-size: 15px; }
.product-auth .su-role { min-height: 74px; }
.product-auth .su-progress-row { font-variant-numeric: tabular-nums; }

@media (min-width: 901px) {
  .product-auth .login { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}
@media (max-width: 900px) {
  .product-auth .login-form { padding: 32px 20px 44px; }
  .product-auth .login-card .mob-logo { margin-bottom: 36px; }
}
@media (min-width: 980px) {
  .product-auth .su { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .product-auth .su-top, .product-auth .su-card { max-width: 450px; }
}