:root{--green:#08753d;--dark:#063b27;--lime:#63bd1a;--muted:#718078;--line:#e1e8e3}*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,Arial,sans-serif;color:#16241d;background:#f5f8f5}
a{text-decoration:none}
.page{min-height:100vh;display:grid;grid-template-columns:52% 48%}
.visual{min-height:100vh;background:linear-gradient(135deg,rgba(3,52,32,.97),rgba(8,117,61,.88)),url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?auto=format&fit=crop&w=1600&q=85') center/cover;color:#fff}
.visual-inner{max-width:650px;height:100vh;margin:auto;padding:48px 60px;display:flex;flex-direction:column;justify-content:space-between}
.copy{max-width:560px;margin-top: 100px;}
.eyebrow{display:inline-block;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.18);padding:8px 12px;border-radius:50px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1px;margin-bottom:18px}
.copy h1{font-size:clamp(35px,4vw,53px);line-height:1.07;letter-spacing:-2px;margin-bottom:18px}
.copy>p{font-size:14px;line-height:1.7;color:rgba(255,255,255,.76)}
.benefits{margin-top:34px;display:grid;gap:13px}
.benefits>div{display:flex;align-items:center;gap:12px}
.benefits>div>i{width:43px;height:43px;display:grid;place-items:center;border-radius:12px;background:rgba(255,255,255,.11);color:#7bd32d}
.benefits b,.benefits small{display:block}
.benefits b{font-size:12px}
.benefits small{font-size:10px;color:rgba(255,255,255,.62);margin-top:2px}
.visual-footer{display:flex;justify-content:space-between;font-size:9px;color:rgba(255,255,255,.5)}
.login-area{min-height:100vh;background:#fff;display:grid;place-items:center;padding:35px}
.login-box{width:min(430px,100%)}

.mobile-logo{display:block;width: 100%;text-align: center;}
.mobile-logo img{width:190px;margin-bottom:35px}

.heading{margin-bottom:30px}
.heading>span{color:var(--lime);font-size:10px;font-weight:800;letter-spacing:1.2px}
.heading h2{color:var(--dark);font-size:30px;letter-spacing:-1px;margin:8px 0 7px}
.heading p{color:var(--muted);font-size:12px}
.field{margin-bottom:19px}
.field label{display:block;color:#35443c;font-size:11px;font-weight:700;margin-bottom:7px}
.label-row{display:flex;justify-content:space-between}
.label-row a{color:var(--green);font-size:10px;font-weight:700}
.input{height:49px;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;background:#fbfcfb}
.input:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(8,117,61,.08);background:#fff}
.input>i{color:#87948d;margin-left:15px;font-size:13px}
.input input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;padding:0 12px;font-size:12px}
.input button{width:42px;height:100%;border:0;background:transparent;color:#8a9690}
.field-error,.input small{display:block;color:#d44b4b;font-size:9px;margin-top:5px}


.submit{width:100%;height:49px;border:0;border-radius:10px;background:var(--green);color:#fff;font-size:12px;font-weight:800}
.submit:hover{background:var(--dark)}
.submit i{margin-left:8px}
.divider{height:1px;background:var(--line);position:relative;margin:30px 0 22px}
.divider span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;padding:0 12px;color:#9aa49f;font-size:10px}
.signup{text-align:center;color:var(--muted);font-size:10px}
.signup a{color:var(--green);font-weight:800;margin-left:4px}
.security{text-align:center;margin-top:32px;color:#9aa59f;font-size:9px}
.security i{color:var(--green);margin-right:5px}
.toast{position:fixed;right:22px;bottom:22px;background:var(--dark);color:#fff;padding:12px 16px;border-radius:9px;font-size:11px;opacity:0;transform:translateY(15px);
    transition:.25s}
.toast.show{opacity:1;transform:translateY(0)}
@media(max-width:900px){
    .page{grid-template-columns:1fr}
    .visual{display:none}
    .login-area{padding:30px 20px}
    .mobile-logo{display:block;text-align:center;}
    .mobile-logo img{width:190px}
}
@media(max-width:480px){
    .login-area{padding:25px 18px}
    .mobile-logo{margin-bottom:35px}
    .heading h2{font-size:27px}
}