/* Sign-in page, WSP version of the shared WSP sign-in: black plate with a red glow, white form side.
   Light only by design (the brand plate carries the dark). No inline styles, so the CSP stays strict. */
@font-face{font-family:'PP Neue Montreal';font-weight:400;font-display:swap;src:url(/fonts/PPNeueMontreal-Regular.woff2) format('woff2')}
@font-face{font-family:'PP Neue Montreal';font-weight:500;font-display:swap;src:url(/fonts/PPNeueMontreal-Medium.woff2) format('woff2')}
@font-face{font-family:'PP Neue Montreal';font-weight:700;font-display:swap;src:url(/fonts/PPNeueMontreal-Bold.woff2) format('woff2')}
:root{
  color-scheme:light;
  --ink:#111;--mute:#666;--rule-strong:#d7d7d2;--plate:#0b0b0b;
  --red:#FF372F;--red1:#CC2126;
  --lens:radial-gradient(90% 120% at 100% 0%,rgba(255,55,47,.55) 0%,rgba(255,55,47,.18) 38%,rgba(255,55,47,0) 66%);
  --font:'PP Neue Montreal',Arial,Helvetica,sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-emph:cubic-bezier(.05,.7,.1,1);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font:400 14px/1.45 var(--font);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
:where(button,input):focus-visible{outline:2px solid var(--red1);outline-offset:2px}
.mark{display:block;height:18px;width:38px;flex:none;background:var(--red);
  -webkit-mask:url(/wsp-logo.svg) left center/contain no-repeat;mask:url(/wsp-logo.svg) left center/contain no-repeat}
.note{font-size:13px;color:var(--mute)}

.gate{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);background:#fff}
.gate .plate{background:var(--lens),var(--plate);color:#fff;padding:48px 56px;display:flex;flex-direction:column;justify-content:space-between;gap:40px;position:relative;overflow:hidden}
/* the app's hairline pattern (soil samples and salinity isolines), anchored to the glow's corner;
   its own mask keeps it off the lockup and the headline */
.gate .plate .pat{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right top;pointer-events:none;user-select:none}
.gate .plate>div{position:relative}
.gate .plate .top{display:flex;align-items:center;gap:14px}
.gate .plate .top b{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.gate .plate h1{font-size:clamp(34px,4.6vw,64px);font-weight:500;line-height:1.02;letter-spacing:-.025em;max-width:11ch;text-wrap:balance}
.gate .plate p{color:rgba(255,255,255,.72);font-size:15px;max-width:40ch;margin-top:18px}
.gate .plate .rail{height:2px;background:rgba(255,255,255,.18);position:relative;max-width:420px}
.gate .plate .rail i{position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(.36);animation:grow 1.1s var(--ease-emph) .2s both}
.gate .plate .rail b{position:absolute;top:-5px;left:36%;width:2px;height:12px;background:var(--red)}
.gate .plate small{display:block;margin-top:14px;color:rgba(255,255,255,.62);font-size:12px}
.gate .form-side{display:grid;place-items:center;padding:40px 24px}
.gatecard{width:min(380px,100%);padding:8px 32px 56px;display:grid;gap:18px;animation:rise .5s var(--ease-out) .1s both}
.gatecard h2{font-size:28px;font-weight:500;letter-spacing:-.015em}
.gatecard form{display:grid;gap:14px}
.field{display:grid;gap:6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);min-width:0}
.field input{border:1px solid var(--rule-strong);border-radius:8px;padding:8px 10px;font-size:13.5px;background:#fff;text-transform:none;letter-spacing:0;color:var(--ink);width:100%;min-width:0;
  transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.field input:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(0,0,0,.06);outline:none}
.gatecard .err{color:var(--red1);font-size:13px}
.gatecard button[type=submit]{border:0;background:var(--ink);color:#fff;border-radius:999px;padding:12px;font-size:14px;font-weight:500;cursor:pointer;margin-top:4px;
  transition:transform .2s var(--ease-out),background-color .2s var(--ease-out)}
.gatecard button[type=submit]:hover{background:#000}
.gatecard button[type=submit]:active{transform:scale(.985)}
.gatecard button[type=submit]:disabled{opacity:.6;cursor:progress}
@media (max-width:900px){.gatecard{padding:8px 16px 48px}}
@media (max-width:800px){.gate{grid-template-columns:minmax(0,1fr)}.gate .plate{padding:28px 20px;gap:22px}.gate .plate h1{font-size:34px}}

@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}