@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap');

:root { --navy:#125648; --navy-2:#186a6f; --blue:#21b799; --gold:#21b799; --ink:#212529; --muted:#68736f; --line:#d8e6e2; --paper:#fafafa; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; }
button,input { font:inherit; }
.shell { min-height:100vh; display:grid; grid-template-columns:minmax(420px, 1.05fr) minmax(520px, .95fr); }
.story { position:relative; overflow:hidden; min-height:100vh; padding:52px 7vw 44px; color:white; background:radial-gradient(circle at 88% 82%, rgba(33,183,153,.30), transparent 27%), linear-gradient(145deg,var(--navy),var(--navy-2)); display:flex; flex-direction:column; justify-content:space-between; }
.story::before { content:""; position:absolute; inset:auto -12% -17% auto; width:65%; aspect-ratio:1; border:1px solid rgba(255,255,255,.08); border-radius:50%; box-shadow:0 0 0 80px rgba(255,255,255,.025),0 0 0 160px rgba(255,255,255,.018); }
.brand { position:relative; color:white; text-decoration:none; font-family:Manrope,sans-serif; font-size:20px; font-weight:700; letter-spacing:.18em; display:flex; align-items:center; gap:12px; }
.brand-mark { display:grid; place-items:center; width:37px; height:37px; color:white; background:var(--blue); border-radius:10px 2px 10px 2px; letter-spacing:0; font-size:18px; }
.brand-dot { color:var(--gold); }
.story-copy { position:relative; max-width:640px; margin:50px 0; }
.eyebrow,.step { font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.eyebrow { display:flex; align-items:center; gap:12px; color:#b8ccdc; }
.eyebrow span { width:30px; height:2px; background:var(--gold); }
h1 { margin:25px 0 24px; font:600 clamp(48px,5vw,78px)/1.04 Manrope,sans-serif; letter-spacing:-.055em; }
h1 em { color:#8fe1d0; font-style:normal; }
.lede { max-width:550px; color:#c6d4df; font-size:18px; line-height:1.7; }
.promise { margin-top:44px; padding-top:25px; border-top:1px solid rgba(255,255,255,.14); display:flex; gap:17px; align-items:center; }
.promise-icon { width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:rgba(227,170,69,.16);color:var(--gold);font-size:20px; }
.promise strong,.promise small { display:block; }
.promise small { color:#91a9bb;margin-top:4px; }
.story footer { position:relative; display:flex; justify-content:space-between; color:#7892a6; font-size:12px; letter-spacing:.06em; }
.access { min-height:100vh; display:grid; place-items:center; padding:48px; background:linear-gradient(135deg,#fff 0%,#e4f3f0 100%); }
.access-inner { width:min(100%,500px); }
.step { color:var(--blue); margin:0 0 13px; }
h2 { margin:0; font:600 40px/1.2 Manrope,sans-serif; letter-spacing:-.04em; }
.intro { color:var(--muted); margin:12px 0 32px; }
.role-switch { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:34px; }
.role { appearance:none; text-align:left; display:flex; gap:12px; align-items:center; padding:15px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:white; cursor:pointer; transition:.2s ease; }
.role:hover { border-color:#91bad3; transform:translateY(-1px); }
.role.active { border-color:var(--blue); box-shadow:0 0 0 3px rgba(22,136,212,.1); }
.role-symbol { flex:0 0 auto; width:35px;height:35px;display:grid;place-items:center;border-radius:9px;background:#edf2f5;color:#718191;font-weight:700; }
.role.active .role-symbol { background:var(--navy);color:white; }
.role strong,.role small { display:block; }
.role strong { font-size:13px; }
.role small { margin-top:3px;color:#8a96a3;font-size:10px; }
label { display:block; margin:0 0 9px; font-size:13px; font-weight:600; }
input { width:100%; height:52px; border:1px solid var(--line); border-radius:9px; padding:0 15px; background:white; outline:none; transition:.2s; }
input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(22,136,212,.1); }
#email { margin-bottom:22px; }
.password-row { display:flex; justify-content:space-between; }
.password-row a { color:var(--blue); font-size:12px;text-decoration:none; }
.password-wrap { position:relative; }
.password-wrap input { padding-right:60px; }
#show-password { position:absolute;right:12px;top:0;height:52px;border:0;background:none;color:var(--blue);font-size:11px;font-weight:700;cursor:pointer; }
.message { min-height:19px;margin:10px 0 4px;color:#b33636;font-size:12px; }
.message.success { color:#19734a; }
.submit { width:100%;height:54px;border:0;border-radius:9px;padding:0 19px;color:white;background:var(--blue);font-weight:700;display:flex;justify-content:center;align-items:center;gap:12px;cursor:pointer;box-shadow:0 12px 24px rgba(22,136,212,.2);transition:.2s; }
.submit:hover { background:#0878c0; transform:translateY(-1px); }
.submit:disabled { opacity:.65;cursor:wait; }
.privacy { margin:26px 0 0;text-align:center;color:#98a4af;font-size:11px; }
@media (max-width:850px) { .shell{grid-template-columns:1fr}.story{min-height:390px;padding:32px 28px}.story-copy{margin:55px 0 35px}.story h1{font-size:43px}.story .lede,.promise{display:none}.access{min-height:auto;padding:48px 24px 60px}.story footer{display:none} }
@media (max-width:480px) { .role-switch{grid-template-columns:1fr}.access{padding-inline:20px}h2{font-size:34px} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{scroll-behavior:auto!important;transition:none!important} }