/* Shared welcome, invitation, and account recovery presentation. */
.auth-body { background: #f5f7fb; }
.auth-body .auth-shell { grid-template-columns: minmax(400px, 51%) minmax(0, 1fr); min-height: 100svh; }
.auth-body .auth-story { min-height: 100svh; padding: 38px clamp(34px, 5vw, 80px) 30px; background: #142f3b; background-image: radial-gradient(ellipse at 12% 8%, #1c5262 0, transparent 50%), radial-gradient(ellipse at 90% 82%, #147c6659 0, transparent 50%), radial-gradient(ellipse at 10% 90%, #6965bf24 0, transparent 42%); }
.auth-body .auth-story::before { background-image: radial-gradient(#bdebd217 1px, transparent 1px); background-size: 21px 21px; mask-image: linear-gradient(120deg, transparent 10%, #000 90%); }
.auth-body .auth-story::after { width: 740px; height: 740px; top: 29%; left: 38%; border-color: #8ff0c715; box-shadow: 0 0 0 70px #87ecc407, 0 0 0 140px #88dfc504; }
.auth-body .auth-story .brand { gap: 14px; }
.auth-body .auth-story .brand-logo { width: 62px; height: 62px; border-radius: 17px; border: 1px solid #ffffffe6; background: #fff; box-shadow: 0 8px 20px #08192426; }
.auth-body .auth-story .brand-title { color: #fff; font-size: 21px; letter-spacing: -.5px; }
.auth-body .auth-story .brand-descriptor { margin-top: 6px; color: #accbd2; font-size: 8px; letter-spacing: 2px; }
.auth-body .auth-story-content { width: 100%; max-width: 530px; margin: auto 0; padding: 48px 0 16px; }
.auth-body .auth-eyebrow { display: inline-flex; gap: 10px; padding: 7px 11px; border: 1px solid #8aded537; border-radius: 100px; background: #9edfc00b; color: #c7eee3; font-size: 9px; font-weight: 650; letter-spacing: 1.65px; }
.auth-body .auth-eyebrow .small-status-dot { width: 5px; height: 5px; margin: 0; background: #7ce0bc; box-shadow: 0 0 0 4px #7ce0bc12; }
.auth-body .auth-story h2 { margin: 24px 0 20px; color: #f6fbff; font-size: clamp(48px, 5.15vw, 78px); font-weight: 650; line-height: 1.09; letter-spacing: -3.6px; }
.auth-body .auth-story h2 span { color: #83e2bc; }
.auth-body .auth-story-lede { max-width: 365px; color: #b6ced7; font-size: 14px; line-height: 1.85; }
.auth-body .auth-workflow-art { width: calc(100% + 42px); max-width: 510px; margin: 16px -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 #b8d4e025; border-bottom: 0; color: #e0edf0; 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: #7edab9; }
.auth-body .auth-story-footer { margin: 1px 0 0; color: #a8c4cd; font-size: 10px; }
.auth-body .auth-main { position: relative; min-height: 100svh; padding: 55px clamp(26px, 4.2vw, 70px) 28px; background-color: #f5f7fb; background-image: radial-gradient(ellipse at 95% 1%, #e1edfbc7, transparent 52%), radial-gradient(ellipse at 0 98%, #daf5e4a8, transparent 50%); }
.auth-body .auth-form-wrap { position: relative; width: 100%; max-width: 465px; padding: 42px 38px 32px; border: 1px solid #fff; border-radius: 25px; background: #fff; box-shadow: 0 1px 3px #17374905, 0 16px 50px #2148670a, 0 40px 100px #21486706; }
.auth-body .auth-form-wrap::before { position: absolute; top: -1px; left: 38px; width: 43px; height: 4px; border-radius: 0 0 5px 5px; background: #0d9f78; content: ""; }
.auth-body .auth-kicker { margin-bottom: 14px; color: #078162; font-size: 9px; letter-spacing: 1.9px; }
.auth-body .auth-form-wrap h1 { margin-bottom: 14px; color: #142f3b; font-size: 35px; font-weight: 750; line-height: 1.18; letter-spacing: -1.45px; }
.auth-body .auth-form-wrap h1 .heading-dot { color: #0d9f78; }
.auth-body .auth-description { margin-bottom: 27px; color: #617384; 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: #314c5d; font-size: 12px; font-weight: 650; }
.auth-body .auth-form .form-field input { min-height: 49px; padding: 12px 14px; border: 1px solid #dbe4eb; border-radius: 10px; background: #f8fafc; color: #142f3b; font-size: 13px; box-shadow: inset 0 1px 2px #1c425503; }
.auth-body .auth-form .form-field input::placeholder { color: #617384; }
.auth-body .auth-form .form-field input:focus { border-color: #0d9f78; outline: 2px solid #b1eedb; outline-offset: 2px; background: #fff; }
.auth-body .auth-form .button-full, .auth-body .auth-form-wrap > .button-primary { min-height: 49px; border-color: #078664; border-radius: 10px; background: linear-gradient(110deg, #078664, #076f58); color: #fff; box-shadow: 0 5px 13px #0d9f781b, 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: #066d51; background: #087f60; box-shadow: 0 7px 17px #0d9f7826; }
.auth-body .auth-forgot { margin-top: -4px; margin-bottom: 16px; }
.auth-body .auth-forgot a, .auth-body .auth-switch a { color: #087b61; }
.auth-body .auth-switch { color: #617384; font-size: 12px; }
.auth-body .auth-security-note { gap: 9px; padding-top: 22px; border-color: #e7edf2; color: #718598; }
.auth-body .auth-security-note p { color: #617384; font-size: 10px; line-height: 1.9; }
.auth-body .auth-security-note > .icon { color: #688090; }
.auth-body .auth-result-icon { border: 1px solid #b4ead7; border-radius: 16px; background: #e6f8f1; color: #0b906d; }
.auth-body .auth-main > footer { max-width: 100%; padding-top: 32px; color: #536778; font-size: 10px; line-height: 1.8; }

@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: 54px; letter-spacing: -2.6px; }
  .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; padding: 20px 30px; }
  .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 - 91px); 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 { padding: 17px 22px; }
  .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 - 80px); 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; }
}