*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#0b1020;background:#f4f8fd}
a{color:#087bff;text-decoration:none}
button,input{font:inherit}
button,a,input{outline-offset:5px}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #247fff}
button:hover,.primary:hover{filter:brightness(.96)}
.brand{display:inline-flex;align-items:center;gap:22px;color:#070809;font-size:clamp(28px,3.1vw,48px);font-weight:700;letter-spacing:-1.5px}
.brand img{width:clamp(54px,5.6vw,92px);height:auto;border-radius:22%}
.landing{min-height:100vh;background:#f4f8fd url('assets/calm-landscape.png') center/cover no-repeat}
.landing header{display:flex;align-items:center;justify-content:space-between;padding:6vh 7.7vw}
.landing nav{display:flex;gap:52px}
.landing nav button{border:0;background:none;color:#5d739c;font-size:20px}
.hero{padding:3vh 7.7vw 5vh}
.hero h1,.story h1{font-size:clamp(44px,5.5vw,90px);line-height:1.07;letter-spacing:-3px;color:#5d759e;margin:0 0 34px;font-weight:700}
.hero h1 strong,.story h1 strong{color:#087cff}
.blue-line{display:block;width:65px;height:5px;background:#087cff;border-radius:3px;margin-bottom:30px}
.tagline{font-size:clamp(21px,2vw,32px);line-height:1.35;color:#667fa5;margin:0 0 38px}
.primary{display:flex;justify-content:center;align-items:center;gap:26px;background:#087dff;color:white;border:1px solid #0075ff;border-radius:12px;min-height:58px;font-size:21px;font-weight:600;padding:15px 28px;box-shadow:0 7px 15px #1684ff12}
.get-started{width:325px;min-height:76px;font-size:28px}
.get-started span{font-size:38px;font-weight:400}
.guest{display:block;text-align:center;font-size:15px;font-weight:600}
.landing-guest{text-align:left;margin-top:20px;width:325px;padding-left:64px}
.auth{padding:3.5vh 2.6vw;min-height:100vh}
.auth-shell{display:grid;grid-template-columns:53% 47%;min-height:93vh;max-width:1800px;margin:auto;border:1px solid #e1e8f2;border-radius:26px;overflow:hidden;box-shadow:0 12px 40px #233e6a0b}
.story{padding:6.7vh 4vw;background:#edf5ff url('assets/calm-landscape.png') 65% bottom/auto 100% no-repeat}
.story .brand{margin-bottom:8vh}
.story h1{font-size:clamp(36px,4.25vw,70px);letter-spacing:-2px;line-height:1.08;margin-bottom:30px}
.story .tagline{font-size:clamp(20px,1.8vw,29px)}
.form-panel{background:#ffffffed;display:flex;align-items:center;padding:5vh 5vw}
.form-content{width:100%;max-width:630px;margin:auto}
.form-content h2{font-size:clamp(29px,2.65vw,44px);line-height:1.15;letter-spacing:-1.3px;margin:0 0 10px}
.subtitle{font-size:clamp(18px,1.7vw,27px);color:#6a7f9e;line-height:1.3;margin:0 0 30px}
.field{display:flex;align-items:center;border:1.5px solid #d9e0ea;border-radius:10px;margin:14px 0;min-height:61px;padding:0 19px;gap:17px;background:#fff}
.field:focus-within{border-color:#1680ff;box-shadow:0 0 0 3px #1680ff14}
.field input{border:0;outline:none;background:transparent;min-width:0;width:100%;padding:16px 0;font-size:20px;color:#17233b}
.field input::placeholder{color:#7c8da8}
.field-icon{font-size:27px;color:#71839e;width:24px;text-align:center}
.reveal{border:0;background:none;color:#71839e;font-size:25px;padding:4px}
.submit{width:100%;margin-top:25px}
.text-button{background:none;border:0;color:#087bff;font-size:18px}
.forgot{display:block;margin:10px 0 0 auto;padding:2px 0}
.divider{display:flex;align-items:center;gap:20px;margin:24px 0;color:#70819a;font-size:20px}
.divider:before,.divider:after{content:"";height:1px;flex:1;background:#dbe2ed}
.google{display:flex;align-items:center;justify-content:center;gap:22px;width:100%;min-height:61px;background:#fff;border:1.5px solid #cdd6e3;border-radius:10px;font-size:20px;font-weight:600;color:#101525}
.google-g{font-size:31px;font-weight:700;color:#4285f4}
.switch{text-align:center;font-size:18px;color:#6f82a0;margin:27px 0 20px}
.preview-note{text-align:center;color:#71819a;font-size:13px;margin:0 0 12px}
.form-status{font-size:14px;line-height:1.5;color:#435d80;margin:14px 0 0}
.form-status:empty{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
dialog{border:1px solid #dbe4f1;border-radius:24px;padding:40px;max-width:530px;color:#1a2b47;line-height:1.6;box-shadow:0 24px 80px #23416a30}
dialog::backdrop{background:#23395b55;backdrop-filter:blur(4px)}
dialog h2{line-height:1.2;font-size:30px}
.dialog-close{float:right;border:0;background:none;font-size:28px;color:#637999}
@media(max-height:760px){.story .brand{margin-bottom:6vh}
.form-panel{padding-top:25px;padding-bottom:25px}
.field{min-height:52px;margin:11px 0}
.field input{padding:13px 0}
.subtitle{margin-bottom:20px}
.divider{margin:18px 0}
.switch{margin:20px 0 15px}
.hero h1{font-size:clamp(44px,5vw,76px)}
.hero .tagline{margin-bottom:24px}
.get-started{min-height:62px}
.landing header{padding-top:4vh;padding-bottom:4vh}
}
@media(max-width:1000px){.auth{padding:20px}
.auth-shell{grid-template-columns:48% 52%}
.story{padding:40px 25px}
.story h1{font-size:40px}
.form-panel{padding:35px}
.brand{gap:12px}
.landing nav{gap:22px}
}
@media(max-width:650px){.auth-shell{display:block}
.story{padding:25px}
.story .brand{margin:0}
.story h1,.story .blue-line,.story .tagline{display:none}
.form-panel{padding:30px 24px}
.landing header{padding:25px}
.landing nav{gap:10px}
.landing nav button{font-size:14px}
.hero{padding:40px 25px}
.hero h1{font-size:46px;letter-spacing:-2px}
.brand{font-size:25px}
.brand img{width:44px}
}

.field-icon svg,.reveal svg{width:24px;height:24px;display:block}
.field-icon{display:flex;align-items:center}
.reveal{display:flex;align-items:center}

/* Login landing: separate card over a full-page landscape. */
.login-landing{min-height:100vh;background:#f5f9ff url('assets/login-landscape.png') center bottom/cover no-repeat}
.login-layout{display:grid;grid-template-columns:57% 43%;min-height:100vh;padding:6.5vh 2.7vw 5.7vh 4vw;gap:0}
.login-header{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-right:5.4vw}
.login-header .brand{font-size:clamp(27px,2.4vw,40px);gap:20px;letter-spacing:-1.3px}
.login-header .brand img{width:clamp(55px,4.5vw,75px)}
.login-header nav{display:flex;gap:3vw;white-space:nowrap}
.login-header nav button{border:0;background:none;color:#5d739c;font-size:20px;padding:8px 0}
.login-message{padding:9.8vh 1.5vw 0}
.login-message h1{font-size:clamp(44px,4.3vw,72px);line-height:1.065;letter-spacing:-2px;color:#566f98;margin:0 0 24px;font-weight:700}
.login-message h1 strong{color:#008bff}
.login-message .blue-line{margin-bottom:28px}
.login-message .tagline{font-size:clamp(21px,1.65vw,28px);line-height:1.2}
.login-landing .form-panel{margin-top:2.5vh;padding:7vh 3.9vw 4vh;border:1.5px solid #dfebfd;border-radius:26px;background:#ffffffdb;box-shadow:0 12px 36px #448cde07;align-self:start;min-height:85vh}
.login-landing .form-content h2{font-size:clamp(36px,3.25vw,55px);letter-spacing:-1.5px}
.login-landing .subtitle{font-size:clamp(21px,1.85vw,31px);margin-bottom:38px}
.login-landing .field{min-height:68px;margin:18px 0}
.login-landing .field input{font-size:23px}
.login-landing .forgot{font-size:21px;margin-top:18px}
.login-landing .submit{min-height:72px;margin-top:28px;font-size:25px;background:#008bff}
.login-landing .google{min-height:72px;font-size:23px}
.login-landing .divider{margin:20px 0 16px}
.login-landing .switch{font-size:22px;margin:30px 0 20px}
@media(max-width:1200px){.login-header{padding-right:30px;gap:18px}.login-header nav{gap:20px}.login-header nav button{font-size:16px}.login-landing .form-panel{padding:40px 30px}.login-message h1{font-size:clamp(42px,4.3vw,60px)}}
@media(max-height:820px){.login-message{padding-top:8vh}.login-message h1{font-size:clamp(42px,4vw,65px)}.login-landing .form-panel{padding-top:35px;padding-bottom:25px}.login-landing .subtitle{margin-bottom:24px}.login-landing .field{min-height:54px;margin:13px 0}.login-landing .field input{font-size:20px;padding:13px 0}.login-landing .submit,.login-landing .google{min-height:56px;font-size:20px}.login-landing .switch{font-size:18px;margin:22px 0 15px}.login-landing .forgot{font-size:18px}.login-landing .form-content h2{font-size:40px}}
@media(max-width:850px){.login-layout{grid-template-columns:1fr;padding:25px}.login-message{padding:35px 0}.login-message h1{font-size:44px}.login-header{padding:0}.login-landing .form-panel{min-height:0;margin-top:10px}.login-message .tagline{margin-bottom:0}}

.signup-header{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:8vh}
.story .signup-header .brand{margin-bottom:0;font-size:clamp(27px,2.4vw,40px);gap:15px}
.signup-header .brand img{width:clamp(54px,4.3vw,72px)}
.signup-header nav{display:flex;gap:24px}
.signup-header nav button{border:0;background:none;color:#5d739c;font-size:18px;padding:8px 0;white-space:nowrap}
@media(max-height:760px){.signup-header{margin-bottom:6vh}}
@media(max-width:650px){.signup-header{margin-bottom:0}}