:root{color-scheme:light;
    --ink:#173e32;
    --muted:#748078;
    --lime:#d6ec86;
    --cream:#f8f9f4}
*{box-sizing:border-box}
body{margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:'Segoe UI',sans-serif}
.login-shell{min-height:100svh;
    display:grid;
    grid-template-columns:1.08fr 1fr;
    padding:16px;
    gap:16px}
.story{position:relative;
    overflow:hidden;
    min-height:740px;
    border-radius:18px;
    background:#163f32;
    color:#fff;
    padding:44px;
    display:flex;
    flex-direction:column}
.brand{display:flex;
    align-items:center;
    gap:10px;
    color:#fff;
    text-decoration:none;
    font-size:28px;
    font-weight:600;
    letter-spacing:-1.4px}
.brand-mark{color:var(--lime);
    font-size:42px;
    line-height:1}
.brand sup{font-size:12px;
    align-self:flex-start;
    letter-spacing:0}
.story-copy{position:relative;
    z-index:2;
    margin-top:40px}
.eyebrow{font-size:10px;
    font-weight:700;
    letter-spacing:2px}
.story .eyebrow{color:#c5dbb8}
h1{font-size:clamp(32px,3.2vw,50px);
    font-weight:500;
    letter-spacing:-2.8px;
    line-height:1.17;
    margin:18px 0}
h1 em{font-style:normal;
    color:var(--lime)}
.story-copy p{font-size:15px;
    line-height:1.65;
    color:#c4d3c9}
.landscape{position:relative;
    flex:1;
    min-height:240px;
    margin:12px -44px -44px;
    overflow:hidden}
.sun{position:absolute;
    right:15%;
    top:12%;
    width:110px;
    height:110px;
    border-radius:50%;
    background:#d6ec86;
    box-shadow:0 0 80px #d6ec861c;
    animation:sunrise 1.6s ease-out both}
.hill{position:absolute;
    width:140%;
    height:90%;
    border-radius:50% 50% 0 0;
    bottom:-42%;
    transform:rotate(-18deg);
    left:-15%}
.back{background:#547b4d;
    bottom:-27%;
    left:20%;
    transform:rotate(-24deg)}
.front{background:#86a760;
    z-index:1;
    transform:rotate(17deg);
    left:-35%;
    bottom:-46%}
.field-lines{position:absolute;
    z-index:2;
    width:160%;
    height:110%;
    left:-25%;
    bottom:-63%;
    border-radius:50%;
    transform:rotate(16deg);
    background:repeating-radial-gradient(ellipse at 50% -100%,transparent 0 23px,#254f355e 24px 26px,transparent 27px 42px);
    animation:fields 2s ease-out both}
.field-label{position:absolute;
    z-index:3;
    bottom:94px;
    left:44px;
    font-size:9px;
    letter-spacing:2px;
    color:#e7f1d4}
.story-footer{display:flex;
    justify-content:space-between;
    gap:12px;
    margin-top:auto;
    z-index:3;
    font-size:8px;
    letter-spacing:1.2px;
    padding-top:28px}
.form-panel{padding:32px 40px 18px;
    display:flex;
    flex-direction:column}
.panel-top{display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:8px;
    font-size:9px;
    letter-spacing:1.6px;
    color:#6d786e}
.status-dot{width:6px;
    height:6px;
    background:#658844;
    border-radius:50%;
    box-shadow:0 0 0 4px #65884412}
.form-content{width:100%;
    max-width:380px;
    margin:auto;
    padding:48px 0 36px;
    animation:enter .75s ease-out both}
.welcome-icon{width:46px;
    height:46px;
    border:1px solid #dce2d5;
    border-radius:14px;
    display:grid;
    place-items:center;
    font-size:26px;
    margin-bottom:32px}
.form-content>.eyebrow{color:#63715d;
    font-size:9px}
h2{font-weight:600;
    font-size:29px;
    letter-spacing:-1.3px;
    margin:13px 0 10px}
.intro{color:var(--muted);
    font-size:13px;
    margin:0 0 34px}
form>label:not(.remember){display:block;
    font-size:12px;
    font-weight:600;
    margin:22px 0 9px}
.input-wrap{display:flex;
    align-items:center;
    border:1px solid #dce1d6;
    border-radius:9px;
    background:#fff;
    padding:0 15px;
    transition:border-color .2s,box-shadow .2s}
.input-wrap:focus-within{border-color:#527b44;
    box-shadow:0 0 0 4px #527b4412}
.input-wrap>span{color:#7b8979;
    font-size:18px;
    width:26px}
.input-wrap input{border:0;
    outline:0;
    background:transparent;
    min-width:0;
    flex:1;
    padding:17px 4px;
    color:var(--ink);
    font:inherit;
    font-size:12px}
.input-wrap input::placeholder{color:#777f73}
.reveal{border:0;
    background:none;
    color:#5a6b57;
    font-size:10px;
    cursor:pointer;
    padding:8px}
.remember{display:flex;
    align-items:center;
    gap:8px;
    font-size:11px;
    margin-top:21px;
    cursor:pointer}
.remember input{accent-color:var(--ink);
    width:15px;
    height:15px;
    margin:0}
.remember-note{color:#65715f;
    font-size:10px;
    line-height:1.5;
    margin:7px 0 23px 23px}
.submit{width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border:0;
    border-radius:9px;
    padding:17px 20px;
    background:var(--ink);
    color:white;
    font:inherit;
    font-size:12px;
    font-weight:500;
    cursor:pointer;
    transition:transform .2s,background .2s,box-shadow .2s}
.submit:hover{background:#285440;
    transform:translateY(-2px);
    box-shadow:0 8px 20px #163f3220}
.submit:disabled{cursor:wait;
    opacity:.75}
.submit-arrow{font-size:20px;
    line-height:1}
.loading .submit-arrow{animation:pulse .8s ease-in-out infinite alternate}
.submit-status{min-height:12px;
    font-size:10px;
    color:var(--muted);
    margin:8px 0}
.secure-note{border-top:1px solid #e3e7dc;
    padding-top:22px;
    text-align:center;
    font-size:10px;
    color:#65715f}
.form-panel footer{display:flex;
    justify-content:space-between;
    gap:12px;
    color:#65715f;
    font-size:9px}
.error{padding:12px 14px;
    background:#fff0e9;
    border:1px solid #e9c4b4;
    border-radius:8px;
    color:#8f3728;
    font-size:12px;
    line-height:1.5}
button:focus-visible,a:focus-visible,input[type=checkbox]:focus-visible{outline:3px solid #87a752;
    outline-offset:4px}
@keyframes enter{from{opacity:0;
    transform:translateY(18px)}
to{opacity:1;
    transform:none}
}
@keyframes sunrise{from{opacity:0;
    transform:translateY(70px)}
to{opacity:1;
    transform:none}
}
@keyframes fields{from{opacity:0;
    translate:0 30px}
to{opacity:1;
    translate:0 0}
}
@keyframes pulse{to{transform:translate(3px,-3px)}
}
@media(min-width:1500px){.story{padding:60px}
.story-copy{margin-top:48px}
.landscape{margin:12px -60px -60px}
}
@media(max-width:900px){.story{padding:30px}
.story-copy{margin-top:36px}
.landscape{margin:12px -30px -30px}
h1{font-size:38px}
.form-panel{padding:30px 20px}
.story-footer{font-size:7px}
.story-footer span:last-child{display:none}
}
@media(max-width:680px){.login-shell{display:flex;
    flex-direction:column;
    padding:10px;
    gap:0}
.story{min-height:270px;
    padding:24px}
.brand{font-size:23px}
.brand-mark{font-size:32px}
.story-copy{margin-top:28px}
.story-copy .eyebrow,.story-copy p,.story-footer,.field-label{display:none}
h1{font-size:32px;
    letter-spacing:-1.5px;
    margin:12px 0}
.landscape{display:none}
.sun{width:65px;
    height:65px}
.form-panel{padding:24px 20px 16px}
.panel-top{display:none}
.form-content{padding:14px 0 30px}
.welcome-icon{display:none}
h2{font-size:27px}
.intro{margin-bottom:26px}
.form-panel footer{font-size:8px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;
    transition:none!important}
}

/* Keep the original logo colors legible against the dark panel. */
.brand {
    align-self: flex-start;
    max-width: 100%;
    padding: 12px 16px;
    background: #fff;
    border-radius: 10px;
}
.brand-logo {
    display: block;
    width: 220px;
    max-width: 100%;
    height: auto;
}
@media (max-width: 680px) {
    .brand { padding: 10px 12px; }
    .brand-logo { width: 180px; }
}