@font-face {
  font-family: Nunito;
  src: url('/assets/relio-nunito-regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Nunito;
  src: url('/assets/relio-nunito-extrabold.ttf') format('truetype');
  font-weight: 800;
  font-display: swap;
}
:root {
  font: 16px/1.5 Nunito, sans-serif;
  background: #f7f3eb;
  color: #211126;
}
* { box-sizing: border-box; }
body { margin: 0; }
.login { min-height: 100dvh; display: grid; grid-template-columns: 44% 1fr; }
.brand-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 3rem;
  background: radial-gradient(ellipse at 8% 100%, #442452, #1c0823 63%);
  color: #d6c0e7;
}
.brand-lockup { position: relative; z-index: 1; text-align: center; mix-blend-mode: lighten; }
.brand-lockup img { display: block; width: clamp(10rem, 21vw, 21rem); height: auto; filter: contrast(1.2); }
.brand-lockup p { margin: .65rem 0 0; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .18em; }
.brand-lines {
  position: absolute;
  bottom: -34vw;
  left: -23vw;
  width: 57vw;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid #d6c0e755;
  box-shadow: 0 0 0 24px #d6c0e729, 0 0 0 50px #d6c0e71a, 0 0 0 78px #d6c0e710;
  pointer-events: none;
}
.login-panel { display: grid; place-items: center; padding: clamp(1.5rem, 7vw, 7rem); }
.login-content { width: min(100%, 26rem); }
h1 { margin: 0; font-size: clamp(2.75rem, 6vw, 5rem); line-height: 1; font-weight: 800; letter-spacing: -.065em; }
.intro { margin: 1rem 0 2.35rem; color: #654f6a; font-size: 1.08rem; }
form { display: grid; gap: .5rem; }
label { font-size: .91rem; font-weight: 800; }
input, button { width: 100%; border-radius: .75rem; min-height: 3.3rem; font: inherit; }
input { margin-bottom: .85rem; border: 1px solid #ac9bab; background: #fffdf8; color: inherit; padding: .75rem 1rem; }
button { display: flex; justify-content: space-between; align-items: center; margin-top: .4rem; padding: .75rem 1rem; border: 0; background: #1c0823; color: #f7f3eb; font-weight: 800; cursor: pointer; }
button span { color: #d6c0e7; }
button:hover { background: #442452; }
:focus-visible { outline: 3px solid #805b9b; outline-offset: 3px; }
.error { border: 1px solid #ddb1b6; border-radius: .65rem; color: #842940; padding: .65rem .85rem; }
@media (max-width: 660px) {
  .login { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .brand-panel { padding: 2.25rem 1.25rem; }
  .brand-lines { bottom: -40vw; }
  .login-panel { align-items: start; padding-top: 2.75rem; }
}

.password-field { position: relative; }
.password-field input { padding-inline-end: 3.5rem; }
.password-field button:not([hidden]) {
  position: absolute;
  top: .25rem;
  right: .3rem;
  display: grid;
  place-items: center;
  width: 2.8rem;
  min-height: 2.8rem;
  margin: 0;
  padding: 0;
  color: #654f6a;
  background: transparent;
}
.password-field button:hover { background: #eee4f2; }
.password-field button[hidden] { display: none; }

.legal-links { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: 2rem; font-size: .85rem; }
.legal-links a, .legal a { color: #654f6a; }
.legal { width: min(100% - 2rem, 48rem); margin: 0 auto; padding: 2.5rem 0 3rem; overflow-wrap: anywhere; }
.legal h1 { font-size: clamp(2.2rem, 6vw, 3.5rem); margin-top: 1rem; }
.legal h2 { margin: 2.2rem 0 .6rem; font-size: 1.3rem; }
.legal-back { font-weight: 800; text-decoration: none; }
.legal table { width: 100%; border-collapse: collapse; font-size: .92rem; display: block; overflow-x: auto; }
.legal th, .legal td { border-bottom: 1px solid #ddd2dc; padding: .55rem .5rem; text-align: left; vertical-align: top; }
.legal .notice { padding: .8rem 1rem; border-radius: .7rem; background: #eee4f2; }

.notice { border: 1px solid #b9d3bf; border-radius: .65rem; color: #24583a; padding: .65rem .85rem; }
.form-links { margin: 1rem 0 0; text-align: center; font-size: .93rem; }
.form-links a { color: #654f6a; font-weight: 800; }