body[data-page="login"] {
  --login-ink: var(--us-navy, #08274f);
  --login-orange: #df6819;
  --login-red: var(--us-red, #b82f32);
  --login-paper: #f7f1e7;
  --login-line: rgba(8, 39, 79, 0.13);
  --login-shadow: 0 20px 50px rgba(8, 39, 79, 0.12);
  color: var(--login-ink);
  background:
    radial-gradient(circle at 8% 18%, rgba(223, 104, 25, 0.08), rgba(223, 104, 25, 0) 18rem),
    radial-gradient(circle at 88% 72%, rgba(184, 47, 50, 0.07), rgba(184, 47, 50, 0) 20rem),
    linear-gradient(180deg, #f7f1e7 0%, #fffaf2 44rem, #ffffff 100%) !important;
}

body[data-page="login"] .login-page {
  display: grid;
  width: min(92rem, calc(100vw - 3rem)) !important;
  min-height: calc(100svh - 8rem);
  align-items: center;
  gap: clamp(1rem, 2vw, 1.4rem);
  padding-top: clamp(1rem, 2vw, 1.5rem) !important;
  padding-bottom: clamp(2rem, 4vw, 3.5rem) !important;
}

body[data-page="login"] .mokozoo-auth-stage {
  position: relative !important;
  z-index: 1;
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(23rem, 0.92fr) !important;
  gap: 0 !important;
  width: 100% !important;
  min-height: clamp(34rem, 52vw, 43rem) !important;
  margin: 0 auto !important;
  overflow: hidden;
  border: 1px solid var(--login-line) !important;
  border-radius: 0.78rem !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: var(--login-shadow) !important;
}

body[data-page="login"] .login-visual-panel {
  position: relative;
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: grid !important;
  min-height: 100% !important;
  margin: 0;
  overflow: hidden;
  background: var(--login-ink);
}

body[data-page="login"] .login-visual-panel img {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp(34rem, 52vw, 43rem) !important;
  object-fit: cover;
  object-position: center;
}

body[data-page="login"] .login-visual-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 250, 242, 0.9) 0 32%, rgba(255, 250, 242, 0.5) 46%, rgba(8, 39, 79, 0.08) 100%),
    linear-gradient(180deg, rgba(8, 39, 79, 0), rgba(8, 39, 79, 0.24));
  pointer-events: none;
}

body[data-page="login"] .login-visual-copy {
  position: absolute;
  z-index: 1;
  top: clamp(1.5rem, 4vw, 3.4rem);
  left: clamp(1.2rem, 3vw, 3rem);
  display: grid;
  gap: 0.55rem;
  max-width: min(44%, 26rem);
  color: var(--login-ink);
}

body[data-page="login"] .login-visual-copy span,
body[data-page="login"] .login-card-kicker {
  width: max-content;
  max-width: 100%;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  background: rgba(223, 104, 25, 0.12);
  color: #b64e13;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.1;
}

body[data-page="login"] .login-visual-copy h2 {
  max-width: 8em;
  margin: 0;
  color: var(--login-ink);
  font-family: var(--font-sans);
  font-size: clamp(2.55rem, 5vw, 5rem);
  font-weight: 950;
  line-height: 0.98;
  letter-spacing: 0;
}

body[data-page="login"] .login-visual-copy p {
  max-width: 26rem;
  margin: 0;
  color: rgba(8, 39, 79, 0.7);
  font-size: clamp(0.98rem, 1.16vw, 1.1rem);
  font-weight: 850;
  line-height: 1.5;
}

body[data-page="login"] .login-benefit-strip {
  position: absolute;
  z-index: 1;
  right: clamp(1rem, 2.2vw, 1.6rem);
  bottom: clamp(1rem, 2.2vw, 1.6rem);
  left: clamp(1rem, 2.2vw, 1.6rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 34px rgba(8, 39, 79, 0.16);
  backdrop-filter: blur(10px);
}

body[data-page="login"] .login-benefit-strip span {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
  padding: 0.65rem 0.7rem;
  border-right: 1px solid rgba(8, 39, 79, 0.1);
}

body[data-page="login"] .login-benefit-strip span:last-child {
  border-right: 0;
}

body[data-page="login"] .login-benefit-strip strong {
  color: var(--login-ink);
  font-size: clamp(0.86rem, 0.95vw, 0.98rem);
  font-weight: 950;
  line-height: 1.15;
}

body[data-page="login"] .login-benefit-strip small {
  color: rgba(8, 39, 79, 0.58);
  font-size: 0.76rem;
  font-weight: 820;
  line-height: 1.2;
}

body[data-page="login"] .mokozoo-login-card.auth-panel-single {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: stretch !important;
  display: grid !important;
  align-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: clamp(1.3rem, 3vw, 2.8rem) !important;
  border: 0 !important;
  border-left: 1px solid rgba(8, 39, 79, 0.12) !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 96% 10%, rgba(223, 104, 25, 0.08), rgba(223, 104, 25, 0) 14rem),
    rgba(255, 255, 255, 0.96) !important;
  box-shadow: none !important;
}

body[data-page="login"] .mokozoo-login-card .account-auth-form-zone {
  display: grid;
  width: min(100%, 30rem) !important;
  justify-self: center;
  gap: clamp(0.85rem, 1.5vw, 1.15rem) !important;
  padding: 0 !important;
  border: 0 !important;
}

body[data-page="login"] .login-card-mark {
  display: none !important;
}

body[data-page="login"] .mokozoo-login-card .module-section-head {
  display: block !important;
  width: 100%;
  margin: 0 !important;
}

body[data-page="login"] .mokozoo-login-card .module-section-head h1 {
  max-width: 8em;
  margin: 0.52rem 0 0 !important;
  color: var(--login-ink) !important;
  font-family: var(--font-sans) !important;
  font-size: clamp(2.35rem, 4.2vw, 4.2rem) !important;
  font-weight: 950 !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body[data-page="login"] .mokozoo-login-card .module-section-head p {
  max-width: 26rem !important;
  margin: 0.55rem 0 0 !important;
  color: rgba(8, 39, 79, 0.68) !important;
  font-size: clamp(0.96rem, 1.08vw, 1.05rem) !important;
  font-weight: 820 !important;
  line-height: 1.48 !important;
}

body[data-page="login"] .mokozoo-login-card .auth-guest,
body[data-page="login"] .mokozoo-login-card .auth-form-stack {
  display: grid !important;
  width: 100% !important;
}

body[data-page="login"] .mokozoo-login-card .auth-form-stack {
  gap: 0.78rem !important;
}

body[data-page="login"] .mokozoo-login-card .field {
  display: grid !important;
  gap: 0.38rem !important;
}

body[data-page="login"] .mokozoo-login-card .field > span {
  color: var(--login-ink) !important;
  font-size: 0.85rem !important;
  font-weight: 950 !important;
  line-height: 1.1;
}

body[data-page="login"] .mokozoo-login-card .field input {
  width: 100%;
  min-height: 3.42rem !important;
  padding: 0 0.9rem 0 3.2rem !important;
  border: 1px solid rgba(8, 39, 79, 0.17) !important;
  border-radius: 0.5rem !important;
  background-color: #fff !important;
  background-position: 1.08rem center !important;
  background-repeat: no-repeat !important;
  background-size: 1.12rem 1.12rem !important;
  color: var(--login-ink) !important;
  font-size: 0.96rem !important;
  font-weight: 850 !important;
  box-shadow: none !important;
}

body[data-page="login"] .mokozoo-login-card input[name="email"] {
  background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%238391a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") !important;
}

body[data-page="login"] .mokozoo-login-card input[name="password"] {
  background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%238391a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3Cpath d='M12 15v2'/%3E%3C/svg%3E") !important;
}

body[data-page="login"] .login-form-support-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.12rem;
  color: rgba(8, 39, 79, 0.66);
  font-size: 0.84rem;
  font-weight: 850;
}

body[data-page="login"] .login-remember {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

body[data-page="login"] .login-remember input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--login-orange);
}

body[data-page="login"] .login-form-support-row a {
  color: var(--login-orange);
  font-weight: 950;
  text-decoration: none;
}

body[data-page="login"] .mokozoo-login-card .button-primary {
  width: 100%;
  min-height: 3.55rem !important;
  margin-top: 0.25rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--login-orange) !important;
  color: #fff !important;
  font-family: var(--font-sans) !important;
  font-size: 1rem !important;
  font-weight: 950 !important;
  text-transform: none !important;
  box-shadow: 0 16px 28px rgba(223, 104, 25, 0.22) !important;
}

body[data-page="login"] .login-divider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  color: rgba(8, 39, 79, 0.52);
  font-size: 0.82rem;
  font-weight: 850;
}

body[data-page="login"] .login-divider::before,
body[data-page="login"] .login-divider::after {
  content: "";
  height: 1px;
  background: rgba(8, 39, 79, 0.12);
}

body[data-page="login"] .mokozoo-login-card .auth-switch-row {
  justify-content: center !important;
  margin: 0 !important;
  text-align: center;
}

body[data-page="login"] .mokozoo-login-card .auth-create-account-copy {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.38rem;
  margin: 0;
  color: rgba(8, 39, 79, 0.66);
  font-size: 0.94rem;
  font-weight: 850;
  line-height: 1.35;
}

body[data-page="login"] .mokozoo-login-card .auth-switch-link {
  display: inline-flex !important;
  min-height: 0 !important;
  padding: 0 !important;
  color: var(--login-orange) !important;
  font-size: inherit !important;
  font-weight: 950 !important;
  text-decoration: none !important;
}

body[data-page="login"] .login-trust-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  padding-top: 0.4rem;
}

body[data-page="login"] .login-trust-strip span {
  display: inline-flex;
  min-width: 0;
  min-height: 2.4rem;
  align-items: center;
  justify-content: center;
  padding: 0.42rem 0.55rem;
  border: 1px solid rgba(8, 39, 79, 0.1);
  border-radius: 0.42rem;
  background: rgba(247, 241, 231, 0.72);
  color: rgba(8, 39, 79, 0.72);
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
}

body[data-page="login"] .mokozoo-login-card .auth-status:empty {
  display: none !important;
}

body[data-page="login"] .auth-session-card {
  border-color: rgba(8, 39, 79, 0.12) !important;
  border-radius: 0.55rem !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: none !important;
}

@media (max-width: 1060px) {
  body[data-page="login"] .mokozoo-auth-stage {
    grid-template-columns: minmax(0, 0.88fr) minmax(21rem, 1fr) !important;
  }

  body[data-page="login"] .login-benefit-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="login"] .login-benefit-strip span {
    border-right: 0;
  }
}

@media (max-width: 860px) {
  body[data-page="login"] .login-page {
    width: min(100%, calc(100vw - 0.9rem)) !important;
    min-height: 0;
    padding-top: 0.85rem !important;
    padding-bottom: calc(4.8rem + env(safe-area-inset-bottom)) !important;
  }

  body[data-page="login"] .mokozoo-auth-stage {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
    border-radius: 0.62rem !important;
  }

  body[data-page="login"] .login-visual-panel {
    grid-column: 1 !important;
    grid-row: auto !important;
    min-height: 18rem !important;
  }

  body[data-page="login"] .login-visual-panel img {
    min-height: 18rem !important;
    max-height: 23rem;
  }

  body[data-page="login"] .login-visual-panel::after {
    background:
      linear-gradient(180deg, rgba(255, 250, 242, 0.92) 0 36%, rgba(255, 250, 242, 0.42) 70%, rgba(8, 39, 79, 0.22) 100%);
  }

  body[data-page="login"] .login-visual-copy {
    top: 0.9rem;
    left: 0.9rem;
    max-width: min(72%, 22rem);
  }

  body[data-page="login"] .login-visual-copy h2 {
    font-size: clamp(1.5rem, 8vw, 2.4rem);
    line-height: 1.02;
  }

  html[lang="es"] body[data-page="login"] .login-visual-copy h2 {
    font-size: clamp(1.28rem, 7vw, 2rem);
    line-height: 1.05;
  }

  body[data-page="login"] .login-visual-copy p {
    display: none;
  }

  body[data-page="login"] .login-benefit-strip {
    right: 0.7rem;
    bottom: 0.7rem;
    left: 0.7rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    padding: 0.5rem;
  }

  body[data-page="login"] .login-benefit-strip span {
    padding: 0.45rem 0.5rem;
  }

  body[data-page="login"] .login-benefit-strip strong {
    font-size: 0.78rem;
  }

  body[data-page="login"] .login-benefit-strip small {
    font-size: 0.68rem;
  }

  body[data-page="login"] .mokozoo-login-card.auth-panel-single {
    grid-column: 1 !important;
    grid-row: auto !important;
    padding: 1rem !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(8, 39, 79, 0.1) !important;
  }

  body[data-page="login"] .mokozoo-login-card .account-auth-form-zone {
    gap: 0.82rem !important;
  }

  body[data-page="login"] .mokozoo-login-card .module-section-head h1 {
    font-size: clamp(2rem, 11vw, 2.6rem) !important;
    line-height: 1.02 !important;
  }

  body[data-page="login"] .mokozoo-login-card .module-section-head p {
    font-size: 0.88rem !important;
    line-height: 1.38 !important;
  }

  body[data-page="login"] .mokozoo-login-card .field input {
    min-height: 3.28rem !important;
    font-size: 0.9rem !important;
  }

  body[data-page="login"] .login-form-support-row {
    font-size: 0.78rem;
  }
}

@media (max-width: 430px) {
  body[data-page="login"] .login-visual-panel,
  body[data-page="login"] .login-visual-panel img {
    min-height: 15.5rem !important;
  }

  body[data-page="login"] .login-visual-copy h2 {
    max-width: 7em;
  }

  html[lang="es"] body[data-page="login"] .login-visual-copy h2 {
    max-width: 11em;
  }

  body[data-page="login"] .login-benefit-strip {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    grid-area: auto;
    margin: -2.7rem 0.7rem 0.7rem;
  }

  body[data-page="login"] .login-trust-strip {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
  }

  body[data-page="login"] .login-form-support-row {
    display: grid;
    justify-content: stretch;
  }
}