.auth-with-art {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  min-height: 100svh;
}
.auth-with-art .auth-story {
  padding: clamp(28px, 3.5vw, 58px);
  background: radial-gradient(ellipse at 35% 40%, #4e4e4e, #333333 85%);
  gap: 30px;
}
.auth-with-art .auth-story::after { display: none; }
.auth-with-art .brand { position: relative; z-index: 1; align-self: flex-start; }
.auth-with-art .auth-showcase { display: block; width: 100%; margin: auto 0; }
.auth-with-art .auth-copy { position: relative; z-index: 1; }
.auth-with-art .auth-copy .eyebrow { font-size:11px; line-height: 1.7; color: #c5c5c5; }
.auth-with-art .auth-story h1 {
  font-size: clamp(34px, 3.6vw, 54px);
  font-weight: 550;
  letter-spacing: -1.7px;
  line-height: 1.16;
  margin: 18px 0;
}
.auth-with-art .auth-story h1 span { color: #d8d8d8; }
.auth-with-art .auth-copy p { color: #c0c0c0; font-size:15px; line-height: 1.8; max-width: 340px; margin-bottom: 0; }
.auth-with-art .auth-art { margin: 28px -16px 0; }
.auth-with-art .auth-art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  border-radius: 22px;
  box-shadow: 0 22px 50px #24242436;
}
.auth-with-art .auth-story-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 15px;
  padding-top: 20px;
  border-top: 1px solid #ffffff1c;
}
.auth-with-art .auth-feature { display: inline-flex; align-items: center; gap: 8px; color: #c6c6c6; font-size:12px; }
.auth-with-art .auth-feature .icon { width: 15px; height: 15px; color: #c5c5c5; }
.auth-with-art .auth-form { padding: 44px clamp(25px, 5vw, 80px); background: #fbfbfb; min-width: 0; }
.auth-with-art .auth-card { width: 380px; }
.auth-with-art .auth-card h2 { font-size:36px; margin-top: 14px; }
.auth-with-art .auth-card label { margin-top: 20px; }
.auth-with-art .auth-card input { padding: 14px; border-radius: 9px; }
.auth-with-art .auth-card .btn { padding: 15px; border-radius: 9px; margin-top: 24px; }
.auth-with-art .auth-security { line-height: 1.6; text-align: center; }
.password-group { margin-top: 20px; }
.auth-with-art .auth-card .password-group > label { margin: 0 0 8px; }
.password-field { position: relative; }
.auth-with-art .auth-card .password-field input { width: 100%; padding-right: 52px; }
.password-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 7px; color: #919191; background: transparent; }
.password-toggle:hover { background: #f3f3f3; color: #616161; }
.password-toggle[aria-pressed="true"] { color: #616161; }
.login-options { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.auth-with-art .auth-card .remember-label { display: inline-flex; flex-direction: row; align-items: center; gap: 9px; margin: 0; min-height: 32px; cursor: pointer; font-size:14px; }
.auth-with-art .auth-card .remember-label input { width: 16px; height: 16px; margin: 0; padding: 0; border-radius: 4px; flex-shrink: 0; }
.remember-duration { color: #a4a4a4; font-size:13px; }
@media (min-width: 901px) and (max-height: 760px) {
  .auth-with-art .auth-story { padding: 28px 38px; gap: 20px; }
  .auth-with-art .auth-art { max-width: 460px; margin: 20px auto 0; }
  .auth-with-art .auth-story h1 { font-size:39px; margin: 12px 0; }
}
@media (max-width: 900px) {
  .auth-with-art { grid-template-columns: minmax(0, 1fr); }
  .auth-with-art .auth-story { min-height: auto; padding: 26px 32px; gap: 24px; }
  .auth-with-art .auth-showcase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 280px); align-items: center; gap: 24px; }
  .auth-with-art .auth-story h1 { font-size:36px; letter-spacing: -1px; margin: 10px 0; }
  .auth-with-art .auth-copy p { font-size:13px; max-width: 270px; }
  .auth-with-art .auth-art { margin: 0; }
  .auth-with-art .auth-story-footer { display: none; }
  .auth-with-art .auth-form { padding: 42px 28px 48px; align-items: flex-start; }
}
@media (max-width: 600px) {
  .auth-with-art .auth-story { padding: 22px 20px; gap: 21px; }
  .auth-with-art .brand { font-size:23px; }
  .auth-with-art .brand-mark { width: 30px; height: 30px; font-size:30px; }
  .auth-with-art .auth-showcase { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; }
  .auth-with-art .auth-copy .eyebrow { font-size:9px; letter-spacing: 1px; margin-bottom: 8px; }
  .auth-with-art .auth-story h1 { font-size: clamp(22px, 5vw, 30px); letter-spacing: -.7px; margin: 8px 0; }
  .auth-with-art .auth-copy p { font-size:12px; line-height: 1.6; }
  .auth-with-art .auth-art img { border-radius: 12px; }
  .auth-with-art .auth-form { padding: 32px 24px 40px; }
  .auth-with-art .auth-card h2 { font-size:31px; }
  .auth-with-art .auth-card > .muted { margin-bottom: 23px; }
}
.auth-with-art .auth-art{max-width:none}
@media(min-width:901px){.auth-with-art{grid-template-columns:minmax(0,1.18fr) minmax(0,1fr)}.auth-with-art .auth-story{padding-left:clamp(28px,3vw,48px);padding-right:clamp(28px,3vw,48px)}.auth-with-art .auth-art{width:calc(100% + 48px);margin:20px -24px 0;max-width:none}}
@media(min-width:601px) and (max-width:900px){.auth-with-art .auth-showcase{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}}
@media(max-width:600px){.auth-with-art .auth-showcase{grid-template-columns:minmax(0,1fr);gap:14px}.auth-with-art .auth-art{width:100%;max-width:360px;margin:0 auto}}
/* Keep the sign-in illustration within the available viewport height. */
@media(min-width:901px){
 .auth-with-art .auth-story{padding-top:24px;padding-bottom:24px;gap:14px}
 .auth-with-art .auth-story h1{font-size:clamp(30px,3vw,44px);margin:10px 0}
 .auth-with-art .auth-art{width:100%;max-width:540px;margin:12px auto 0}
 .auth-with-art .auth-art img{max-height:clamp(180px,calc(100svh - 330px),360px);object-fit:contain}
 .auth-with-art .auth-story-footer{padding-top:12px}
 .auth-with-art .auth-form{padding-top:28px;padding-bottom:24px}
}
@media(min-width:901px) and (max-height:800px){
 .auth-with-art .auth-card h2{font-size:30px;margin-top:8px}
 .auth-with-art .auth-card label,.password-group{margin-top:12px}
 .auth-with-art .auth-card input{padding:11px 14px}
 .auth-with-art .auth-card .btn{padding:12px;margin-top:16px}
 .auth-with-art .login-options{margin-top:10px}
}
@media(max-width:600px){.auth-with-art .auth-showcase{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:12px}.auth-with-art .auth-art{max-width:180px}.auth-with-art .auth-art img{max-height:120px;object-fit:contain}}