:root { color-scheme: light; --ink:#203b32; --muted:#65716b; --green:#245d47; --line:#dde4dd; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#fbfcf9; font:14px/1.55 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button { cursor:pointer; }
a:focus-visible,button:focus-visible { outline:3px solid #78a98c; outline-offset:5px; }
[hidden] { display:none!important; }
.auth-skip { position:fixed; top:12px; left:12px; padding:12px; background:white; z-index:5; transform:translateY(-200%); }
.auth-skip:focus { transform:none; }
.auth-layout { display:grid; grid-template-columns:minmax(400px,46%) minmax(0,1fr); min-height:100svh; }
.auth-story { position:relative; display:flex; flex-direction:column; overflow:hidden; padding:44px clamp(32px,4.5vw,76px) 30px; background:#193f32; color:#f6f7ec; }
.auth-story::after { content:""; position:absolute; width:600px; height:600px; border:1px solid #ffffff08; border-radius:50%; bottom:-380px; left:-200px; pointer-events:none; }
.auth-brand { display:inline-flex; align-items:center; align-self:flex-start; gap:10px; font-size:25px; font-weight:700; letter-spacing:-1px; }
.auth-brand-mark { display:grid; place-items:center; width:37px; height:37px; border:1px solid #c7dbc547; border-radius:10px; font-size:30px; font-weight:400; line-height:1; background:#ffffff08; }
.brand-period { color:#bdd390; margin-left:-10px; }
.story-content { margin:auto 0; padding:65px 0 48px; }
.story-eyebrow { display:flex; align-items:center; gap:10px; color:#bccbbd; font-size:9px; letter-spacing:1.8px; font-weight:600; }
.story-eyebrow>span { width:6px; height:6px; background:#c4d697; border-radius:50%; }
.story-content h2 { font-size:clamp(38px,4.2vw,67px); line-height:1.12; letter-spacing:-2.7px; font-weight:500; margin:24px 0; }
.story-content h2 em { font-family:Georgia,"Times New Roman",serif; color:#d1dfa8; font-weight:400; }
.story-description { color:#c0cfc3; max-width:350px; font-size:14px; line-height:1.9; }
.opportunity-art { position:relative; height:216px; margin:36px -12px 0; isolation:isolate; }
.art-grid { position:absolute; inset:0; background-image:linear-gradient(#b7cead12 1px,transparent 1px),linear-gradient(90deg,#b7cead12 1px,transparent 1px); background-size:42px 42px; mask-image:radial-gradient(ellipse,black 15%,transparent 74%); }
.art-path { position:absolute; left:15%; top:29px; width:66%; height:144px; border:1px dashed #a9c28c66; border-radius:65% 35% 30% 40%; transform:rotate(-10deg); }
.art-point { position:absolute; width:10px; height:10px; background:#c9d9a0; border:3px solid #355b44; outline:1px solid #9eb98055; border-radius:50%; }
.point-one { left:17%; top:36px; }.point-two { right:13%; top:83px; }.point-three { left:41%; bottom:39px; }
.research-note { position:absolute; top:64px; left:1%; right:3%; padding:20px 17px; background:#f3f5e9; border:1px solid #fff7; border-radius:12px; color:#284335; display:flex; gap:13px; align-items:center; box-shadow:0 18px 40px #051b2033; transform:rotate(-3deg); }
.note-icon { display:grid; place-items:center; flex:0 0 38px; height:42px; border-radius:9px; background:#e1e8d6; font-size:23px; }
.note-caption { display:block; font-size:7px; letter-spacing:1.1px; color:#697d67; font-weight:700; }
.research-note strong { display:block; margin-top:5px; font-size:11px; font-weight:600; }
.note-lines { display:flex; gap:5px; margin-top:10px; }.note-lines span { height:4px; border-radius:3px; width:48px; background:#d6dfce; }.note-lines span+span { width:29px; background:#e0e6d9; }
.note-check { margin-left:auto; font-size:11px; color:#567a4c; }
.art-tag { position:absolute; bottom:17px; right:0; display:flex; align-items:center; gap:8px; padding:9px 13px; font-size:9px; background:#2c5140; border:1px solid #6c896c66; border-radius:7px; color:#dfebc6; transform:rotate(3deg); }
.art-tag span { font-size:15px; }
.story-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; color:#aabfb0; font-size:9px; letter-spacing:.2px; border-top:1px solid #8ba88930; padding-top:20px; }
.auth-main { display:flex; flex-direction:column; padding:40px clamp(30px,6vw,100px) 26px; min-width:0; }
.auth-topline { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:12px; min-height:38px; color:var(--muted); font-size:12px; }
.auth-topline a { color:var(--green); font-weight:600; padding:8px 0; }.auth-topline a span { margin-left:6px; }
.auth-card { width:100%; max-width:410px; margin:auto; padding:66px 0 52px; }
.auth-eyebrow { color:#71856c; font-size:9px; letter-spacing:1.7px; font-weight:700; }
.auth-heading h1 { white-space:pre-line; font-size:36px; letter-spacing:-1.35px; line-height:1.18; font-weight:600; margin:15px 0 13px; }
.auth-heading p { color:var(--muted); line-height:1.8; margin:0 0 30px; max-width:370px; }
.auth-form { display:flex; flex-direction:column; gap:21px; }
.auth-field { display:flex; flex-direction:column; gap:8px; }
.auth-field label { font-size:12px; font-weight:600; color:#344b40; }
.field-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.field-heading a { font-size:11px; font-weight:500; color:var(--green); }
.auth-field input { display:block; width:100%; min-height:49px; padding:13px 14px; border:1px solid #d8e0d6; border-radius:8px; background:#fff; color:var(--ink); outline:none; transition:border-color .15s,box-shadow .15s; font-size:13px; }
.auth-field input::placeholder { color:#88948b; opacity:1; }.auth-field input:focus { border-color:#4a8064; box-shadow:0 0 0 3px #33704b13; }.auth-field input:user-invalid { border-color:#b76252; }
.password-control { position:relative; }.password-control input { padding-right:49px; }
.password-toggle { position:absolute; right:3px; top:3px; bottom:3px; width:43px; border:0; border-radius:5px; background:transparent; color:#76877b; display:grid; place-items:center; }.password-toggle:hover { background:#eef3eb; color:var(--green); }.password-toggle svg { width:20px; height:20px; }.eye-slash { display:none; }.password-toggle[aria-pressed=true] .eye-slash { display:block; }
.field-hint { font-size:11px; color:#717e73; line-height:1.6; margin:0; }.caps-warning { font-size:11px; color:#9b5934; margin:0; }
.auth-submit { display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; min-height:49px; padding:13px 18px; margin-top:3px; border:1px solid #245d47; border-radius:8px; background:var(--green); color:#fff; font-size:12px; font-weight:600; box-shadow:0 3px 4px #1e402c0c; transition:background .15s,transform .15s; }.auth-submit:hover { background:#194732; }.auth-submit>span:last-child { font-size:19px; font-weight:400; line-height:1; }.auth-submit:active { transform:translateY(1px); }.auth-submit:disabled { opacity:.7; cursor:wait; }
.trial-note { display:flex; gap:11px; align-items:center; border:1px solid #e1e7d7; background:#f0f4e9; border-radius:9px; padding:13px 12px; margin-bottom:26px; }.trial-icon { font-size:23px; color:#6b8351; }.trial-note strong { display:block; font-size:11px; font-weight:600; }.trial-note div>span { display:block; font-size:10px; color:#738068; margin-top:3px; }.trial-badge { font-size:7px; font-weight:700; letter-spacing:.7px; white-space:nowrap; margin-left:auto; color:#667c50; padding:4px 6px; background:#e4ebd8; border-radius:4px; }
.form-reassurance { margin:-8px 0 0; text-align:center; color:#71806e; font-size:10px; }
.auth-bottom-link { margin-top:29px; padding-top:24px; border-top:1px solid #e5e9e0; font-size:11px; text-align:center; color:#788174; }.auth-bottom-link a { color:var(--green); font-weight:600; margin-left:3px; }
.auth-footer { margin-top:auto; display:flex; gap:7px; align-items:center; justify-content:center; font-size:10px; color:#788774; }.auth-footer svg { width:16px; height:16px; }
.auth-notice { padding:13px 15px; border:1px solid #d9e3d3; border-radius:8px; background:#eff5e9; color:#345239; font-size:12px; margin-bottom:23px; }.auth-notice.error { background:#fdf0eb; border-color:#efd1c5; color:#8a4030; }
.auth-step-icon { display:grid; place-items:center; width:49px; height:49px; border:1px solid #dce6d5; border-radius:13px; background:#edf3e6; color:#567549; font-size:24px; margin-bottom:25px; }
.recovery-note { border:1px solid #e0e6d9; background:#f2f5ec; padding:18px; border-radius:9px; margin-bottom:24px; font-size:12px; overflow-wrap:anywhere; }.recovery-note strong { display:block; font-weight:600; }.recovery-note p { color:var(--muted); line-height:1.8; margin:7px 0 0; }
@media(min-width:1600px) { .auth-story { padding-left:7vw; padding-right:7vw; }.story-content { max-width:470px; }.auth-card { max-width:430px; } }
@media(max-width:1000px) { .auth-layout { grid-template-columns:43% 57%; }.auth-story { padding:32px 28px 24px; }.story-content h2 { font-size:43px; letter-spacing:-1.8px; }.story-eyebrow { font-size:7px; letter-spacing:1px; }.auth-main { padding:30px 40px 25px; }.research-note { padding:17px 12px; gap:8px; }.note-caption { font-size:6px; }.research-note strong { font-size:10px; }.note-icon { display:none; }.story-footer span+span { display:none; } }
@media(max-width:740px) { .auth-layout { display:block; min-height:100svh; }.auth-story { padding:21px 26px; }.auth-brand { font-size:23px; }.auth-brand-mark { width:32px; height:32px; font-size:25px; }.story-content,.story-footer { display:none; }.auth-main { min-height:calc(100svh - 74px); padding:20px 26px 24px; }.auth-topline { justify-content:center; min-height:30px; font-size:11px; }.auth-card { padding:42px 0 40px; max-width:410px; }.auth-heading h1 { font-size:33px; }.auth-heading p { font-size:13px; }.auth-field input { font-size:16px; }.auth-footer { padding-top:8px; }.auth-heading p { margin-bottom:26px; } }
.recovery-note small { display:block; color:var(--muted); line-height:1.7; margin-top:7px; }
.policy-copy { line-height:1.7; color:#425248; }.policy-copy h2 { color:var(--ink);font-size:17px;margin:24px 0 6px; }.policy-copy p { margin:0 0 12px; }.form-reassurance a { color:var(--green);font-weight:650; }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; } }
