.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 7fr) minmax(360px, 3fr); }
.auth-intro { display: flex; flex-direction: column; justify-content: space-between; padding: 48px clamp(32px, 7vw, 96px); background: var(--msk-navy); color: #fff; }
.auth-intro h1 { max-width: 560px; color: #fff; font-size: clamp(2.4rem, 5vw, 4.4rem); }
.auth-intro p { max-width: 460px; color: rgba(255,255,255,.78); font-size: 1.05rem; line-height: 1.65; }
.auth-highlights { display: grid; gap: 12px; max-width: 560px; margin: 30px 0 0; padding: 0; list-style: none; }
.auth-highlights li { display: grid; grid-template-columns: minmax(132px, .7fr) 1.6fr; gap: 18px; align-items: baseline; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.2); }
.auth-highlights strong { color: var(--msk-gold); font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.auth-highlights span { color: rgba(255,255,255,.78); font-size: .9rem; line-height: 1.45; }
.auth-intro .wordmark { color: #fff; }
.auth-note { color: rgba(255,255,255,.62); font-size: .88rem; }
.auth-panel { display: grid; place-items: center; padding: 56px 40px; background: #fff; }
.auth-form { width: min(100%, 420px); }
.auth-form h2 { margin-bottom: 8px; font-size: 2rem; font-weight: 500; letter-spacing: -0.045em; }
.auth-form > p { color: var(--msk-muted); line-height: 1.55; }
/* Shared PawPass / PawPort form language. Labels are deliberately quieter
   than form values; the same rules cover every native field type. */
.auth-field { display: grid; gap: 7px; margin: 16px 0; color: var(--msk-muted); font-size: 11px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
.auth-field input, .auth-field select, .auth-field textarea { box-sizing: border-box; width: 100%; min-height: var(--msk-control-height, 42px); padding: 0 12px; border: 1px solid var(--msk-line); border-radius: var(--msk-radius); background: var(--msk-white); color: var(--msk-ink); font: inherit; font-size: .94rem; font-weight: 400; letter-spacing: 0; }
.auth-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .auth-field select { height: var(--msk-control-height, 42px); }
.auth-field input[type="checkbox"], .auth-field input[type="radio"] { width: 16px; min-height: 16px; height: 16px; margin: 0; padding: 0; }
.auth-field input[type="file"] { height: var(--msk-control-height, 42px); padding: 4px; line-height: 32px; }
.auth-field input[type="file"]::file-selector-button { height: 32px; margin: 0 10px 0 0; padding: 0 11px; border: 0; background: color-mix(in srgb, var(--msk-navy) 8%, white); color: var(--msk-ink); font: inherit; cursor: pointer; }
.auth-field textarea { min-height: 116px; padding-block: 11px; resize: vertical; }
.auth-field input:focus, .auth-field select:focus, .auth-field textarea:focus { outline: 2px solid color-mix(in srgb, var(--msk-navy) 35%, white); border-color: var(--msk-navy); }
.auth-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; }
.auth-link { color: var(--msk-navy); font-size: .92rem; }
.auth-message { min-height: 22px; margin-top: 18px; color: var(--msk-muted); font-size: .9rem; }
.auth-message--error { color: var(--msk-danger); }
.pawpass-theme .button, .pawport-theme .button { box-sizing: border-box; min-height: var(--msk-control-height, 42px); }
@media (max-width: 760px) { .auth-shell { grid-template-columns: 1fr; } .auth-intro { min-height: 285px; padding: 28px; } .auth-intro h1 { font-size: 2.25rem; } .auth-intro p { margin-bottom: 0; } .auth-highlights { gap: 9px; margin-top: 23px; } .auth-highlights li { grid-template-columns: 1fr; gap: 4px; padding-top: 9px; } .auth-note { display: none; } .auth-panel { padding: 38px 28px; } }

/* Consistent login-page eyebrow label treatment used on PawPass/PawPort auth landing. */
.product-login-label {
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 0;
  margin-bottom: 9px;
}