@font-face {
  font-family: "Bootstrap Icons";
  src: url("/app/assets/plugins/global/fonts/bootstrap-icons/bootstrap-icons.woff2") format("woff2");
  font-display: block;
}

.app-login-page { margin: 0; color: #101b3b; background: #fff; font-family: Inter, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.app-login-page *, .app-login-page *::before, .app-login-page *::after { box-sizing: border-box; }
.app-login-page a { color: inherit; }
.app-login-page button, .app-login-page input { font: inherit; }
.app-login-icon::before { display: inline-block; font-family: "Bootstrap Icons"; font-style: normal; font-weight: normal; line-height: 1; }
.app-login-icon-send::before { content: "\f6c0"; }
.app-login-icon-chat::before, .app-login-icon-envelope::before { content: "\f32f"; }
.app-login-icon-check::before { content: "\f633"; }
.app-login-icon-lock::before { content: "\f47b"; }
.app-login-icon-eye::before { content: "\f340"; }
.app-login-password-toggle[aria-pressed="true"] .app-login-icon-eye::before { content: "\f341"; }
.app-login-icon-arrow-right::before { content: "\f138"; }
.app-login-icon-arrow-left::before { content: "\f12f"; }
.app-login-icon-person::before { content: "\f4e1"; }
.app-login-icon-phone::before { content: "\f5c1"; }
.app-login-icon-info::before { content: "\f431"; }

.app-login { display: grid; grid-template-columns: minmax(0, 56.5%) minmax(0, 43.5%); min-height: 100vh; }
.app-login-story { position: relative; min-width: 0; overflow: hidden; color: #fff; background: #08266d; }
.app-login-story-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; }
.app-login-story-content { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh; padding: 42px clamp(40px, 4.4vw, 68px) 45px; }
.app-login-brand { display: inline-flex; align-self: flex-start; flex: none; }
.app-login-brand img { display: block; width: clamp(220px, 20vw, 280px); height: auto; }
.app-login-story-main { flex: 1; padding-top: clamp(25px, 3vh, 40px); }
.app-login-story h2 { max-width: 690px; margin: 0; color: #fff; font-size: clamp(46px, 4.25vw, 66px); font-weight: 800; letter-spacing: -.055em; line-height: 1.06; text-wrap: balance; }
.app-login-story h2 span { color: #66eaff; }
.app-login-story-subtitle { max-width: 600px; margin: 24px 0 0; color: #e6f0ff; font-size: clamp(18px, 1.55vw, 23px); line-height: 1.42; }
.app-login-journey { width: min(685px, 100%); margin-top: clamp(42px, 5.5vh, 62px); padding: 30px 27px 34px; border: 1px solid #dce9ff; border-radius: 18px; color: #102047; background: #f9fcff; box-shadow: 0 20px 50px #00164870; }
.app-login-journey h3 { margin: 0; font-size: 18px; font-weight: 750; letter-spacing: -.025em; }
.app-login-journey-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 24px 0 0; padding: 0; list-style: none; }
.app-login-journey-steps::before { position: absolute; top: 38px; right: 15%; left: 15%; height: 2px; background: #c7dafa; content: ""; }
.app-login-journey-steps li { position: relative; min-width: 0; text-align: center; }
.app-login-step-icon { display: grid; width: 76px; height: 76px; margin: 0 auto; place-items: center; border-radius: 50%; font-size: 33px; }
.app-login-step-icon-blue { color: #1267dd; background: #dfebff; }
.app-login-step-icon-mint { color: #078d7b; background: #d9f9f3; }
.app-login-step-icon-violet { color: #6237d2; background: #ede7ff; }
.app-login-journey-steps strong { display: block; max-width: 160px; margin: 16px auto 0; font-size: 15px; font-weight: 750; line-height: 1.26; }
.app-login-journey-steps p { max-width: 170px; margin: 8px auto 0; color: #516183; font-size: 13px; line-height: 1.36; }
.app-login-story-footnote { max-width: 290px; margin: 30px 0 0; color: #dfeaff; font-size: 14px; font-weight: 500; line-height: 1.45; }

.app-login-form-side { display: flex; flex-direction: column; min-width: 0; padding: 46px clamp(40px, 4.3vw, 68px) 30px; background: #fff; }
.app-login-form-content { width: min(545px, 100%); margin: auto; padding: 62px 0 32px; }
.app-login-eyebrow { margin: 0 0 22px; color: #1759b5; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.app-login-form-content h1 { margin: 0; color: #111a38; font-size: clamp(35px, 3.1vw, 50px); font-weight: 800; letter-spacing: -.052em; line-height: 1.1; text-wrap: balance; }
.app-login-intro { margin: 14px 0 0; color: #566587; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.4; }
.app-login-form { display: grid; gap: 30px; margin-top: clamp(39px, 5vh, 57px); }
.app-login-field label { display: block; margin-bottom: 11px; color: #142044; font-size: 15px; font-weight: 700; }
.app-login-input-wrap { display: flex; align-items: center; width: 100%; height: 65px; border: 1px solid #c7d6f1; border-radius: 10px; background: #fff; transition: border-color .16s, box-shadow .16s; }
.app-login-input-wrap:focus-within { border-color: #137fdd; box-shadow: 0 0 0 3px #137fdd30; }
.app-login-input-wrap > .app-login-icon { flex: 0 0 63px; color: #294275; font-size: 21px; text-align: center; }
.app-login-input-wrap input { flex: 1; width: 100%; min-width: 0; height: 100%; padding: 0 16px 0 0; border: 0; outline: 0; color: #142044; background: transparent; font-size: 16px; }
.app-login-input-wrap input::placeholder { color: #5e7198; opacity: 1; }
.app-login-password-toggle { display: grid; flex: 0 0 58px; width: 58px; height: 58px; margin-right: 3px; place-items: center; border: 0; border-radius: 8px; color: #4a5e88; background: transparent; font-size: 22px; cursor: pointer; }
.app-login-password-toggle:hover { color: #075db6; background: #eef6ff; }
.app-login-submit { display: flex; align-items: center; justify-content: center; gap: 18px; width: 100%; min-height: 66px; margin-top: 3px; border: 0; border-radius: 10px; color: #fff; background: #0872c7; box-shadow: 0 10px 22px #0769ba22; font-size: 17px; font-weight: 750; cursor: pointer; transition: background-color .16s, transform .16s; }
.app-login-submit:hover { background: #0066bd; }
.app-login-submit:active { transform: translateY(1px); }
.app-login-submit .app-login-icon { font-size: 22px; }
.app-login-help { display: block; width: fit-content; margin: 30px auto 0; color: #075cb5 !important; font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.app-login-register { margin: 42px 0 0; color: #536382; font-size: 15px; text-align: center; }
.app-login-register a { color: #075cb5; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.app-login-error { display: flex; flex-direction: column; gap: 4px; margin: 28px 0 -12px; padding: 13px 16px; border: 1px solid #e6a8b5; border-radius: 9px; color: #8b1b38; background: #fff2f4; font-size: 14px; line-height: 1.45; }
.app-login-error.app-login-notice { border-color: #a5cede; color: #1b4f69; background: #eef9fd; }
.app-login-footer { display: flex; justify-content: space-between; gap: 16px; width: min(545px, 100%); margin: 0 auto; padding-top: 25px; border-top: 1px solid #d8e1f1; color: #285690; font-size: 13px; }
.app-login-footer a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.app-login-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.app-login-page :is(a, button, input):focus-visible { outline: 3px solid #1485e3; outline-offset: 3px; }

.app-signup-page .app-login-form-content { margin: 0 auto auto; padding: 20px 0 22px; }
.app-signup-page .app-login-eyebrow { margin-bottom: 18px; }
.app-signup-page .app-login-intro { margin-top: 10px; }
.app-signup-form { display: flex; flex-direction: column; gap: 13px; margin-top: 36px; }
.app-signup-section-title { margin: 0 0 1px; color: #142044; font-size: 17px; font-weight: 750; line-height: 1.35; }
.app-signup-access-title { margin-top: 17px; }
.app-signup-name-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.app-signup-field { min-width: 0; }
.app-signup-field .app-login-input-wrap { height: 57px; }
.app-signup-field .app-login-input-wrap > .app-login-icon { flex-basis: 57px; }
.app-signup-field .app-login-input-wrap input { font-size: 15px; }
.app-signup-field .app-login-password-toggle { width: 49px; height: 49px; flex-basis: 49px; }
.app-signup-strength { display: flex; align-items: center; gap: 15px; margin-top: 12px; color: #536382; font-size: 12px; line-height: 1.3; white-space: nowrap; }
.app-signup-strength-bars { display: grid; flex: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.app-signup-strength-bars span { height: 8px; border-radius: 4px; background: #dce4f1; transition: background-color .16s; }
.app-signup-strength[data-strength="1"] .app-signup-strength-bars span:nth-child(-n+1) { background: #cf6944; }
.app-signup-strength[data-strength="2"] .app-signup-strength-bars span:nth-child(-n+2) { background: #dc9630; }
.app-signup-strength[data-strength="3"] .app-signup-strength-bars span:nth-child(-n+3) { background: #288eae; }
.app-signup-strength[data-strength="4"] .app-signup-strength-bars span { background: #138c74; }
.app-signup-password-hint { margin: 8px 0 0; color: #536382; font-size: 13px; line-height: 1.4; }
.app-signup-consent { display: flex; align-items: flex-start; gap: 13px; margin-top: 17px; color: #17264b; font-size: 14px; line-height: 1.5; cursor: pointer; }
.app-signup-consent input { flex: none; width: 22px; height: 22px; margin: 0; border: 1px solid #5674ac; accent-color: #0872c7; cursor: pointer; }
.app-signup-consent a, .app-signup-signin a { color: #075cb5; text-decoration: underline; text-underline-offset: 3px; }
.app-signup-notice { display: flex; align-items: flex-start; gap: 13px; margin: 6px 0 9px; color: #536382; font-size: 13px; line-height: 1.4; }
.app-signup-notice .app-login-icon { flex: none; width: 22px; color: #0a70cc; font-size: 21px; }
.app-signup-page .app-login-submit { min-height: 68px; margin-top: 7px; }
.app-signup-signin { margin: 12px 0 0; color: #52617f; font-size: 14px; text-align: center; }
.app-signup-honeypot, .app-signup-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 1220px) {
  .app-login-story-content { padding-right: 39px; padding-left: 39px; }
  .app-login-story h2 { font-size: clamp(42px, 4.3vw, 54px); }
  .app-login-form-side { padding-right: 38px; padding-left: 38px; }
  .app-login-journey { padding-right: 18px; padding-left: 18px; }
}
@media (max-width: 1050px) {
  .app-login { display: flex; flex-direction: column; }
  .app-login-story { min-height: 285px; }
  .app-login-story-content { min-height: 285px; padding: 23px 30px 28px; }
  .app-login-brand img { width: 205px; }
  .app-login-story-main { padding-top: 24px; }
  .app-login-story h2 { max-width: 780px; font-size: clamp(34px, 4.6vw, 43px); }
  .app-login-story-subtitle { max-width: 650px; margin-top: 12px; font-size: 16px; }
  .app-login-journey, .app-login-story-footnote { display: none; }
  .app-login-form-side { min-height: calc(100vh - 285px); padding: 0 30px 25px; }
  .app-login-form-content { padding: 42px 0 45px; }
  .app-login-footer { margin-top: auto; }
  .app-signup-page .app-login-form-content { padding: 42px 0 45px; }
}
@media (max-width: 600px) {
  .app-login-story, .app-login-story-content { min-height: 315px; }
  .app-login-story-content { padding: 23px 22px 25px; }
  .app-login-brand img { width: 170px; }
  .app-login-story-main { padding-top: 23px; }
  .app-login-story h2 { font-size: clamp(27px, 7.2vw, 36px); letter-spacing: -.045em; }
  .app-login-story-subtitle { margin-top: 11px; font-size: 14px; line-height: 1.4; }
  .app-login-form-side { min-height: calc(100vh - 315px); padding: 0 22px 22px; }
  .app-login-form-content { padding: 36px 0 42px; }
  .app-login-form-content h1 { font-size: clamp(32px, 8.2vw, 40px); }
  .app-login-intro { font-size: 16px; }
  .app-login-form { gap: 22px; margin-top: 33px; }
  .app-login-input-wrap { height: 57px; }
  .app-login-password-toggle { height: 51px; }
  .app-login-submit { min-height: 58px; }
  .app-login-register { margin-top: 30px; }
  .app-login-footer { padding-top: 19px; }
  .app-signup-page .app-login-form-content { padding: 36px 0 42px; }
  .app-signup-form { margin-top: 28px; }
  .app-signup-name-row { gap: 9px; }
  .app-signup-field .app-login-input-wrap > .app-login-icon { flex-basis: 47px; }
  .app-signup-field .app-login-input-wrap input { font-size: 14px; }
  .app-signup-strength { white-space: normal; }
}
@media (max-width: 420px) {
  .app-signup-name-row { grid-template-columns: 1fr; }
}
@media (max-width: 355px) {
  .app-login-story, .app-login-story-content { min-height: 330px; }
  .app-login-story h2 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-login-input-wrap, .app-login-submit { transition: none; }
  .app-signup-strength-bars span { transition: none; }
}
