:root{
  --canvas:#E9EEE9;
  --surface:#FFFFFF;
  --surface-soft:#F4F7F4;
  --surface-sunken:#F1F4F1;
  --brand-surface:#CCE2C8;
  --ink:#303030;
  --ink-2:#5A5F5A;
  --ink-3:#85897F;
  --line:#D8DCD8;
  --line-soft:rgba(48,48,48,.06);
  --line-strong:#C5CBC5;
  --signal:#DEF24E;
  --signal-ink:#303030;
  --ok-fill:#DCEFDC;
  --ok-ink:#2E7D4F;
  --ok-dot:#45A06A;
  --bad-fill:#FADEE0;
  --bad-ink:#A8414E;
  --bad-dot:#E2707E;
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:26px;
  --r-pill:999px;
  --sh-1:0 1px 2px rgba(48,48,48,.04);
  --sh-2:0 8px 20px -10px rgba(48,48,48,.10);
  --sh-3:0 20px 44px -22px rgba(48,48,48,.16);
  --font:'Urbanist','Plus Jakarta Sans',-apple-system,'Segoe UI',system-ui,sans-serif;
  --t-fast:140ms;
  --t-base:200ms;
  --ease-out:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{min-height:100%;background:var(--canvas)}
body{
  min-height:100vh;
  min-height:100dvh;
  margin:0;
  overflow-x:hidden;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
}

button,input{font:inherit}
button{font-family:inherit}

.login-shell{
  width:min(100%,1560px);
  min-height:100vh;
  min-height:100dvh;
  margin:0 auto;
  padding:clamp(16px,2.2vw,34px);
  display:grid;
  grid-template-columns:minmax(360px,.88fr) minmax(480px,1.12fr);
  gap:clamp(16px,2vw,30px);
}

.login-brand{
  position:relative;
  isolation:isolate;
  min-height:620px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:clamp(28px,3.5vw,54px);
  border:1px solid color-mix(in srgb,var(--ink) 7%,transparent);
  border-radius:var(--r-xl);
  background:var(--brand-surface);
}

.login-brand::before,
.login-brand::after{
  content:"";
  position:absolute;
  z-index:-1;
  border-radius:50%;
  border:1px solid color-mix(in srgb,var(--ink) 8%,transparent);
  pointer-events:none;
}

.login-brand::before{
  width:360px;
  height:360px;
  right:-180px;
  bottom:-130px;
}

.login-brand::after{
  width:250px;
  height:250px;
  right:-125px;
  bottom:-75px;
}

.brand-lockup,
.mobile-lockup{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.brand-mark{
  display:grid;
  place-items:center;
  flex:0 0 44px;
  width:44px;
  height:44px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
  color:var(--ink);
  font-size:14px;
  font-weight:750;
  letter-spacing:.03em;
  box-shadow:var(--sh-1);
}

.brand-lockup-copy,
.mobile-lockup-copy{
  display:grid;
  gap:2px;
  min-width:0;
}

.brand-lockup strong,
.mobile-lockup strong{
  color:var(--ink);
  font-size:15px;
  font-weight:700;
  line-height:1.2;
}

.brand-lockup small,
.mobile-lockup small{
  color:var(--ink-2);
  font-size:11px;
  line-height:1.25;
}

.brand-message{
  position:relative;
  z-index:1;
  max-width:520px;
}

.brand-kicker{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  margin-bottom:18px;
  padding:5px 10px;
  border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);
  border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--surface) 54%,transparent);
  color:var(--ink-2);
  font-size:11px;
  font-weight:650;
}

.brand-message h2{
  max-width:500px;
  margin:0;
  color:var(--ink);
  font-size:clamp(34px,4.2vw,58px);
  font-weight:350;
  line-height:.98;
  letter-spacing:-.045em;
}

.brand-message p{
  max-width:440px;
  margin:20px 0 0;
  color:var(--ink-2);
  font-size:14px;
  line-height:1.6;
}

.brand-meta{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--ink-2);
  font-size:11px;
  line-height:1.35;
}

.brand-meta i{
  width:8px;
  height:8px;
  border-radius:var(--r-pill);
  background:var(--ok-dot);
  flex:0 0 auto;
}

.login-stage{
  min-width:0;
  display:grid;
  place-items:center;
  padding:clamp(12px,3vw,48px);
}

.login-card{
  width:min(100%,460px);
  padding:clamp(26px,3.2vw,40px);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  background:var(--surface);
  box-shadow:var(--sh-2);
}

.mobile-lockup{
  display:none;
  margin-bottom:30px;
}

.login-eyebrow{
  margin:0 0 8px;
  color:var(--ink-3);
  font-size:11px;
  font-weight:650;
  line-height:1.2;
}

.login-card h1{
  margin:0;
  color:var(--ink);
  font-size:clamp(28px,3vw,36px);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.035em;
}

.login-subtitle{
  margin:12px 0 28px;
  color:var(--ink-2);
  font-size:13px;
  line-height:1.55;
}

.login-error{
  display:grid;
  grid-template-columns:8px minmax(0,1fr);
  align-items:start;
  gap:10px;
  margin:0 0 20px;
  padding:12px 14px;
  border-radius:var(--r-md);
  background:var(--bad-fill);
  color:var(--bad-ink);
  font-size:12px;
  line-height:1.4;
}

.login-error::before{
  content:"";
  width:8px;
  height:8px;
  margin-top:4px;
  border-radius:var(--r-pill);
  background:var(--bad-dot);
}

.login-form{
  display:grid;
  gap:17px;
}

.login-field{
  display:grid;
  gap:7px;
}

.login-field label{
  color:var(--ink-2);
  font-size:12px;
  font-weight:650;
  line-height:1.2;
}

.login-field input{
  width:100%;
  min-height:48px;
  padding:11px 13px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  outline:0;
  background:var(--surface-soft);
  color:var(--ink);
  font-size:14px;
  line-height:1.2;
  transition:
    border-color var(--t-fast) var(--ease-out),
    background var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out);
}

.login-field input:hover{
  border-color:var(--line-strong);
}

.login-field input:focus-visible{
  border-color:var(--ink);
  background:var(--surface);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-surface) 72%,transparent);
}

.login-field input::placeholder{
  color:var(--ink-3);
}

.login-submit{
  width:100%;
  min-height:48px;
  margin-top:3px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:0;
  border-radius:var(--r-sm);
  outline:0;
  background:var(--signal);
  color:var(--signal-ink);
  font-size:13px;
  font-weight:750;
  cursor:pointer;
  box-shadow:none;
  transition:
    transform var(--t-fast) var(--ease-out),
    filter var(--t-fast) var(--ease-out);
}

.login-submit svg{
  width:17px;
  height:17px;
  flex:0 0 auto;
}

.login-submit:hover{
  filter:brightness(.97);
  transform:translateY(-1px);
}

.login-submit:active{
  transform:translateY(0);
}

.login-submit:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
}

.login-security{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:18px;
  color:var(--ink-3);
  font-size:11px;
  line-height:1.35;
}

.login-security svg{
  width:16px;
  height:16px;
  color:var(--ok-ink);
  flex:0 0 auto;
}

@media(max-width:960px){
  .login-shell{
    grid-template-columns:minmax(300px,.82fr) minmax(420px,1.18fr);
    padding:16px;
    gap:16px;
  }
  .login-brand{
    min-height:560px;
    padding:30px;
  }
  .brand-message h2{
    font-size:clamp(32px,5vw,44px);
  }
  .login-stage{
    padding:20px;
  }
}

@media(max-width:760px){
  .login-shell{
    min-height:100dvh;
    display:block;
    padding:16px;
  }
  .login-brand{
    display:none;
  }
  .login-stage{
    min-height:calc(100dvh - 32px);
    padding:0;
  }
  .login-card{
    width:min(100%,480px);
    padding:28px 24px;
    border-radius:var(--r-lg);
  }
  .mobile-lockup{
    display:flex;
  }
}

@media(max-width:430px){
  .login-shell{
    padding:10px;
  }
  .login-stage{
    min-height:calc(100dvh - 20px);
  }
  .login-card{
    padding:24px 18px;
    border-radius:18px;
  }
  .login-field input{
    font-size:16px;
  }
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important;
  }
}