/* A bright, shared welcome for sign-in, invitations, and account recovery. */
.auth-body { background: #f8f9ff; }
.auth-body .auth-shell { grid-template-columns: minmax(400px, 51%) minmax(0, 1fr); min-height: 100svh; }
.auth-body .auth-story { min-height: calc(100svh - 32px); margin: 16px 0 16px 16px; padding: 34px clamp(32px, 4.5vw, 70px) 28px; border-radius: 27px; background: #3446bd; background-image: radial-gradient(ellipse at 0 0, #5479ee70, transparent 55%), radial-gradient(ellipse at 90% 82%, #a27dff38, transparent 55%), linear-gradient(145deg, #253896, #4146bc 46%, #6239a9); box-shadow: inset 0 1px 0 #ffffff33; }
.auth-body .auth-story::before { background-image: radial-gradient(#ffffff24 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(120deg, transparent 15%, #000 90%); }
.auth-body .auth-story::after { width: 660px; height: 660px; top: 27%; left: 35%; border-color: #ffffff15; box-shadow: 0 0 0 60px #ffffff06, 0 0 0 120px #ffffff04; }
.auth-body .auth-story .brand { gap: 14px; }
.auth-body .auth-story .brand-logo { width: 60px; height: 60px; border-radius: 17px; border: 1px solid #ffffffe6; background: #fff; box-shadow: 0 8px 20px #20126426; }
.auth-body .auth-story .brand-title { color: #fff; font-size: 21px; letter-spacing: -.5px; }
.auth-body .auth-story .brand-descriptor { margin-top: 6px; color: #ececff; font-size: 8px; letter-spacing: 2px; }
.auth-body .auth-story-content { width: 100%; max-width: 540px; margin: auto 0; padding: 44px 0 14px; }
.auth-body .auth-eyebrow { display: inline-flex; gap: 9px; padding: 7px 11px; border: 1px solid #ffffff3b; border-radius: 100px; background: #ffffff0a; color: #f5f4ff; font-size: 8px; font-weight: 650; letter-spacing: 1.35px; }
.auth-body .auth-eyebrow .small-status-dot { width: 5px; height: 5px; margin: 0; background: #d9ff9c; box-shadow: 0 0 0 4px #dcffae19; }
.auth-body .auth-story h2 { margin: 25px 0 20px; color: #fff; font-size: clamp(44px, 4.5vw, 70px); font-weight: 750; line-height: 1.12; letter-spacing: -2.9px; }
.auth-body .auth-story h2 span { color: #ddffa4; }
.auth-body .auth-story-lede { max-width: 360px; color: #ececff; font-size: 14px; line-height: 1.85; }
.auth-body .auth-workflow-art { width: calc(100% + 42px); max-width: 530px; margin: 17px -21px 0; }
.auth-body .auth-workflow-art > svg { display: block; width: 100%; height: auto; overflow: visible; }
.auth-body .auth-workflow-art text { font-family: Manrope, sans-serif; }
.auth-body .auth-story-bottom { padding-top: 12px; }
.auth-body .auth-principles { gap: 14px 25px; padding: 17px 0; border-top: 1px solid #ffffff30; border-bottom: 0; color: #f1f1ff; font-size: 11px; }
.auth-body .auth-principles span { gap: 8px; }
.auth-body .auth-principles span::before { display: none; }
.auth-body .auth-principles .icon { width: 15px; height: 15px; color: #ddffa4; }
.auth-body .auth-story-footer { margin: 1px 0 0; color: #e7e7ff; font-size: 10px; }
.auth-body .auth-main { position: relative; min-height: 100svh; padding: 55px clamp(26px, 4.2vw, 70px) 28px; background-color: #f8f9ff; background-image: radial-gradient(ellipse at 95% 5%, #eae8ffb8, transparent 52%), radial-gradient(ellipse at 20% 98%, #e6f3ffa6, transparent 50%); }
.auth-body .auth-form-wrap { position: relative; width: 100%; max-width: 465px; padding: 44px 38px 33px; border: 1px solid #e9ecf6; border-radius: 26px; background: #fff; box-shadow: 0 3px 8px #34378b03, 0 18px 45px #34378b08, 0 35px 85px #34378b05; }
.auth-body .auth-form-wrap::before { position: absolute; top: -1px; left: 38px; width: 65px; height: 4px; border-radius: 0 0 5px 5px; background: linear-gradient(90deg, #465fff, #9863e9); content: ""; }
.auth-body .auth-kicker { margin-bottom: 14px; color: #4054cc; font-size: 9px; letter-spacing: 1.9px; }
.auth-body .auth-form-wrap h1 { margin-bottom: 14px; color: #202b4d; font-size: 35px; font-weight: 750; line-height: 1.18; letter-spacing: -1.45px; }
.auth-body .auth-form-wrap h1 .heading-dot { color: #465fff; }
.auth-body .auth-description { margin-bottom: 27px; color: #626e86; font-size: 13px; line-height: 1.8; }
.auth-body .auth-form { margin-top: 27px; }
.auth-body .auth-form .form-field { margin-bottom: 19px; }
.auth-body .auth-form .form-field label { color: #364262; font-size: 12px; font-weight: 650; }
.auth-body .auth-form .form-field input { min-height: 51px; padding: 13px 14px; border: 1px solid #dfe3ef; border-radius: 10px; background: #f8f9fd; color: #202b4d; font-size: 13px; box-shadow: inset 0 1px 2px #2c3b6303; }
.auth-body .auth-form .form-field input::placeholder { color: #626e86; }
.auth-body .auth-form .form-field input:focus { border-color: #465fff; outline: 2px solid #465fff; outline-offset: 2px; background: #fff; box-shadow: 0 0 0 5px #465fff0d; }
.auth-body :focus-visible { outline: 3px solid #465fff; outline-offset: 4px; }
.auth-body .auth-story :focus-visible { outline-color: #ddffa4; }
.auth-body .auth-form .button-full, .auth-body .auth-form-wrap > .button-primary { min-height: 51px; border-color: #4057ee; border-radius: 10px; background: linear-gradient(110deg, #4057ee, #6644cf); color: #fff; box-shadow: 0 6px 15px #465fff2b, inset 0 1px 0 #ffffff25; font-size: 13px; font-weight: 750; }
.auth-body .auth-form .button-full:hover, .auth-body .auth-form-wrap > .button-primary:hover { border-color: #3146ca; background: linear-gradient(110deg, #354bd5, #5938bd); box-shadow: 0 8px 19px #465fff38; }
.auth-body .auth-forgot { margin-top: -4px; margin-bottom: 16px; }
.auth-body .auth-forgot a, .auth-body .auth-switch a { color: #4054cc; }
.auth-body .auth-switch { color: #626e86; font-size: 12px; }
.auth-body .auth-security-note { gap: 9px; padding-top: 22px; border-color: #e8ebf4; color: #69748e; }
.auth-body .auth-security-note p { color: #626e86; font-size: 10px; line-height: 1.9; }
.auth-body .auth-security-note > .icon { color: #647492; }
.auth-body .auth-result-icon { border: 1px solid #dce1ff; border-radius: 16px; background: #edf0ff; color: #4057d9; }
.auth-body .auth-main > footer { max-width: 100%; padding-top: 32px; color: #5c6680; font-size: 10px; line-height: 1.8; }
.auth-body .field-help { color: #626e86; }
.auth-body .required-indicator { color: #4054cc; }
.auth-body .notice { border-color: #dce3fa; border-left: 3px solid #6b7be6; background: #f0f4ff; color: #42557e; }
.auth-body .notice-success { border-color: #c5eadc; border-left-color: #279671; background: #eefaf4; color: #256e57; }
.auth-body .notice-error, .auth-body .errorlist { border-color: #f0d4d5; background: #fff3f1; color: #a74749; }
.auth-body .invited-email { border-color: #dce1f5; background: #f2f4ff; color: #4e5d8a; }

@media (min-width: 1600px) {
  .auth-body .auth-story { padding-left: clamp(75px, 7vw, 135px); padding-right: 75px; }
  .auth-body .auth-story-content { max-width: 560px; }
  .auth-body .auth-workflow-art { max-width: 550px; }
  .auth-body .auth-form-wrap { max-width: 485px; padding: 48px 44px 37px; }
}
@media (max-width: 1100px) {
  .auth-body .auth-shell { grid-template-columns: minmax(340px, 47%) minmax(0, 1fr); }
  .auth-body .auth-story { padding: 33px 34px 27px; }
  .auth-body .auth-story h2 { font-size: 43px; letter-spacing: -1.9px; }
  .auth-body .auth-story-content { padding-top: 46px; }
  .auth-body .auth-story-lede { font-size: 13px; }
  .auth-body .auth-main { padding: 42px 25px 25px; }
  .auth-body .auth-form-wrap { padding: 35px 28px 28px; }
  .auth-body .auth-form-wrap h1 { font-size: 32px; }
  .auth-body .auth-principles { gap: 11px 18px; font-size: 10px; }
}
@media (max-width: 820px) {
  .auth-body .auth-shell { display: block; }
  .auth-body .auth-story { min-height: 0; margin: 12px 12px 0; padding: 18px 24px; border-radius: 20px; }
  .auth-body .auth-story::after { top: -470px; left: 43%; }
  .auth-body .auth-story .brand { gap: 12px; }
  .auth-body .auth-story .brand-logo { width: 51px; height: 51px; border-radius: 13px; }
  .auth-body .auth-story .brand-title { font-size: 20px; }
  .auth-body .auth-story .brand-descriptor { margin-top: 5px; font-size: 8px; }
  .auth-body .auth-story-content, .auth-body .auth-story-bottom { display: none; }
  .auth-body .auth-main { min-height: calc(100svh - 99px); padding: 36px 24px 23px; }
  .auth-body .auth-form-wrap { max-width: 455px; padding: 38px 35px 29px; }
  .auth-body .auth-form-wrap h1 { font-size: 34px; }
  .auth-body .auth-main > footer { padding-top: 27px; }
}
@media (max-width: 480px) {
  .auth-body .auth-story { margin: 10px 10px 0; padding: 15px 20px; border-radius: 18px; }
  .auth-body .auth-story .brand-logo { width: 46px; height: 46px; border-radius: 12px; }
  .auth-body .auth-story .brand-title { font-size: 19px; }
  .auth-body .auth-story .brand-descriptor { font-size: 7px; letter-spacing: 1.8px; }
  .auth-body .auth-main { min-height: calc(100svh - 86px); padding: 26px 16px 22px; }
  .auth-body .auth-form-wrap { padding: 32px 24px 25px; border-radius: 20px; }
  .auth-body .auth-form-wrap::before { left: 24px; }
  .auth-body .auth-form-wrap h1 { font-size: 30px; letter-spacing: -1.15px; }
  .auth-body .auth-description { font-size: 12px; }
  .auth-body .auth-form .form-field input { font-size: 16px; }
  .auth-body .auth-main > footer { font-size: 9px; }
}
@media (max-width: 360px) {
  .auth-body .auth-main { padding-right: 13px; padding-left: 13px; }
  .auth-body .auth-form-wrap { padding-right: 21px; padding-left: 21px; }
  .auth-body .auth-form-wrap h1 { font-size: 28px; }
  .auth-body .auth-switch { font-size: 11px; }
}