@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');
:root { --paper:#f3f0e8; --ink:#11152d; --blue:#4c5cff; --acid:#ddff50; --white:#fffdf8; --muted:#737787; --line:rgba(17,21,45,.14); --danger:#b93832; --success:#16764e; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'Manrope',sans-serif; overflow-x:hidden; }
button,input { font:inherit; }
.auth-shell { min-width:0; min-height:100vh; display:grid; grid-template-columns:minmax(400px,.95fr) minmax(500px,1.05fr); }
.auth-story { min-height:100vh; padding:42px clamp(34px,5vw,78px); display:flex; flex-direction:column; color:white; background:var(--ink); overflow:hidden; position:relative; }
.auth-story::before { content:''; position:absolute; width:620px; height:620px; right:-290px; top:8%; border:1px solid rgba(221,255,80,.15); border-radius:50%; box-shadow:0 0 0 75px rgba(221,255,80,.025),0 0 0 150px rgba(221,255,80,.018); }
.brand { position:relative; display:flex; align-items:center; gap:12px; color:white; text-decoration:none; font:700 19px 'Space Grotesk'; letter-spacing:.08em; }.brand>span { width:31px; height:31px; position:relative; border:1px solid var(--acid); border-radius:7px; transform:rotate(45deg); }.brand i { position:absolute; width:3px; height:3px; border-radius:50%; background:var(--acid); }.brand i:nth-child(1){left:7px;top:14px}.brand i:nth-child(2){left:14px;top:7px}.brand i:nth-child(3){right:7px;bottom:7px}
.story-copy { position:relative; margin:auto 0; max-width:620px; }.story-copy>span { color:var(--acid); font:500 9px 'DM Mono'; letter-spacing:.12em; }.story-copy h1 { margin:20px 0; font:700 clamp(48px,5vw,78px)/.98 'Space Grotesk'; letter-spacing:-.055em; }.story-copy h1 em { color:var(--acid); font-style:normal; }.story-copy p { max-width:540px; color:rgba(255,255,255,.56); font-size:13px; line-height:1.8; }
.workflow { position:relative; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.15); }.workflow div { padding:18px 10px 0 0; display:flex; gap:9px; flex-direction:column; }.workflow b { color:var(--acid); font:500 8px 'DM Mono'; }.workflow span { color:rgba(255,255,255,.65); font-size:9px; font-weight:700; }
.auth-panel { min-width:0; min-height:100vh; padding:42px 28px; display:grid; place-items:center; }.auth-card { width:min(100%,480px); max-width:100%; min-width:0; padding:28px; border:1px solid var(--line); border-radius:18px; background:var(--white); box-shadow:0 26px 80px rgba(17,21,45,.1); }.auth-card form { min-width:0; }.auth-tabs { display:grid; grid-template-columns:1fr 1fr; padding:4px; border-radius:9px; background:#ebe9e2; }.auth-tabs button { height:38px; border:0; border-radius:7px; color:var(--muted); background:transparent; cursor:pointer; font-size:10px; font-weight:800; }.auth-tabs button.active { color:var(--ink); background:white; box-shadow:0 3px 10px rgba(17,21,45,.08); }
form header { margin:26px 0 20px; }form header>span { color:var(--blue); font:500 8px 'DM Mono'; letter-spacing:.1em; }form h2 { margin:7px 0 5px; font:700 29px 'Space Grotesk'; letter-spacing:-.03em; }form header p { margin:0; color:var(--muted); font-size:10px; line-height:1.55; }form>label,.signup-step>label { width:100%; margin-top:13px; display:block; color:var(--muted); font:500 8px 'DM Mono'; text-transform:uppercase; }form>label input,.signup-step>label input { width:100%; height:45px; margin-top:6px; padding:0 11px; display:block; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:white; outline:none; font:600 11px 'Manrope'; }form>label input:focus,.signup-step>label input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(76,92,255,.1); }form>label small,.signup-step>label small { display:block; margin-top:5px; color:var(--muted); font:400 7px 'Manrope'; text-transform:none; }
.account-types { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.account-types label { min-height:82px; padding:12px; display:grid; grid-template-columns:auto 1fr; gap:8px; border:1px solid var(--line); border-radius:9px; cursor:pointer; }.account-types label:has(input:checked) { border-color:var(--blue); background:#f2f3ff; }.account-types input { margin:3px 0 0; accent-color:var(--blue); }.account-types span { display:flex; flex-direction:column; gap:4px; }.account-types b { font-size:9px; }.account-types small { color:var(--muted); font-size:7px; line-height:1.45; }
.form-meta { margin:13px 0 0; display:flex; justify-content:space-between; align-items:center; }.remember { color:var(--muted); font-size:8px; }.remember input,.terms input { accent-color:var(--blue); }.form-meta button,.switch-copy button { padding:0; border:0; color:var(--blue); background:transparent; cursor:pointer; font-size:8px; font-weight:700; }.terms { display:grid!important; grid-template-columns:auto 1fr; gap:8px; align-items:start; color:var(--muted)!important; font:500 8px/1.5 'Manrope'!important; text-transform:none!important; }.terms input { width:auto!important; height:auto!important; margin:2px 0 0!important; }.submit-button { width:100%; height:48px; margin-top:18px; padding:0 15px; display:flex; align-items:center; justify-content:space-between; border:0; border-radius:8px; color:white; background:var(--blue); cursor:pointer; font-size:10px; font-weight:800; }.submit-button span { color:var(--acid); }.submit-button.secondary { justify-content:center; color:var(--ink); background:var(--acid); }.submit-button:disabled { opacity:.55; cursor:wait; }.switch-copy { margin:14px 0 0; color:var(--muted); text-align:center; font-size:8px; }.auth-message { margin:16px 0 0; padding:11px; border-radius:8px; color:var(--success); background:#e8f6ef; font-size:9px; line-height:1.5; }.auth-message a { color:inherit; font-weight:800; text-underline-offset:2px; }.auth-message.error { color:var(--danger); background:#fdecea; }.security-note { width:min(100%,480px); margin:14px 0 0; color:var(--muted); text-align:center; font-size:8px; line-height:1.5; }
@media(max-width:850px){.auth-shell{display:block}.auth-story{min-height:260px;padding:26px 20px}.story-copy{min-width:0;margin:50px 0 38px}.story-copy h1{max-width:100%;font-size:clamp(36px,10.5vw,42px);overflow-wrap:break-word}.story-copy p{max-width:100%;font-size:11px;overflow-wrap:anywhere}.workflow{display:none}.auth-panel{min-height:auto;padding:20px 14px 50px}.auth-card{padding:21px;border-radius:14px}.account-types{grid-template-columns:1fr}}

/* Readability pass for account creation and sign-in. */
.story-copy>span { font-size: 10px; }
.workflow b { font-size: 10px; }
.workflow span { font-size: 11px; }
.auth-tabs button { font-size: 12px; }
form header>span { font-size: 10px; }
form header p { font-size: 12px; }
form>label { font-size: 10px; }
form>label input { font-size: 13px; }
form>label small { font-size: 10px; }
.account-types b { font-size: 12px; }
.account-types small { font-size: 10px; }
.remember,.form-meta button,.switch-copy button { font-size: 11px; }
.terms { font-size: 11px !important; }
.submit-button { font-size: 12px; }
.switch-copy { font-size: 11px; }
.auth-message { font-size: 11px; }
.security-note { font-size: 10px; }
@media(max-width:850px){.story-copy p{font-size:13px}}

/* Two-step, visual account creation. */
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.login-role-note { margin:-6px 0 18px; padding:10px 12px; display:flex; align-items:center; gap:9px; border:1px solid rgba(22,118,78,.18); border-radius:9px; color:#385348; background:#edf7f1; font-size:11px; line-height:1.45; }
.login-role-note>span { width:20px; height:20px; flex:0 0 20px; display:grid; place-items:center; border-radius:50%; color:white; background:var(--success); font-size:10px; font-weight:800; }
.signup-header { position:relative; padding-top:8px; }
.signup-progress { position:absolute; right:0; top:0; display:flex; align-items:center; gap:6px; }
.signup-progress span { width:24px; height:24px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--muted); background:white; font:600 9px 'DM Mono'; }
.signup-progress span.active { border-color:var(--blue); color:white; background:var(--blue); }
.signup-progress i { width:20px; height:1px; background:var(--line); }
.account-types { margin:0; padding:0; border:0; gap:10px; }
.account-types label.account-type { min-height:228px; padding:0; display:block; position:relative; overflow:hidden; border-radius:14px; background:white; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.account-types label.account-type:hover { transform:translateY(-2px); border-color:rgba(76,92,255,.45); box-shadow:0 12px 28px rgba(17,21,45,.08); }
.account-types label.account-type:has(input:focus-visible) { outline:3px solid rgba(76,92,255,.22); outline-offset:2px; }
.account-types label.account-type:has(input:checked) { border-color:var(--blue); background:#f4f5ff; box-shadow:inset 0 0 0 1px var(--blue); }
.role-card-content { min-height:228px; padding:18px; display:flex!important; align-items:flex-start; flex-direction:column; gap:0!important; }
.role-visual { width:58px; height:58px; margin-bottom:20px; display:block!important; position:relative; overflow:hidden; border-radius:15px; background:var(--ink); }
.role-visual i,.role-visual b { position:absolute; display:block; }
.buyer-visual i:first-child { width:25px; height:32px; left:14px; top:12px; border:2px solid var(--acid); border-radius:4px; }
.buyer-visual i:nth-child(2) { width:14px; height:2px; left:21px; top:23px; background:var(--acid); box-shadow:0 7px 0 var(--acid); }
.buyer-visual b { right:6px; bottom:5px; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; color:var(--ink); background:var(--acid); font-size:13px; }
.producer-visual { background:var(--blue); }
.producer-visual i:first-child { width:32px; height:22px; left:13px; bottom:12px; border:2px solid white; border-top:0; border-radius:0 0 5px 5px; }
.producer-visual i:nth-child(2) { width:6px; height:17px; left:19px; top:14px; background:white; box-shadow:13px 0 0 white; }
.producer-visual b { right:5px; top:4px; color:var(--acid); font-size:20px!important; line-height:1; }
.role-card-content>small { color:var(--blue); font:600 9px 'DM Mono'; letter-spacing:.09em; }
.role-card-content>strong { margin-top:8px; font:700 17px/1.15 'Space Grotesk'; letter-spacing:-.02em; }
.role-card-content>em { margin-top:8px; color:var(--muted); font-size:10px; line-height:1.55; font-style:normal; }
.role-choice { width:100%; margin-top:auto; padding-top:14px; flex-direction:row!important; align-items:center; justify-content:space-between; border-top:1px solid var(--line); color:var(--muted); font-size:10px; font-weight:800; }
.role-choice b { width:21px; height:21px; display:grid; place-items:center; border-radius:50%; color:var(--muted); background:var(--paper); font-size:10px; }
.account-type:has(input:checked) .role-choice { color:var(--blue); }
.account-type:has(input:checked) .role-choice b { color:white; background:var(--blue); }
.signup-next { margin-top:12px; }
.signup-back { margin:-3px 0 13px; padding:0; border:0; color:var(--blue); background:transparent; cursor:pointer; font-size:10px; font-weight:800; }
.role-summary { margin-bottom:6px; padding:11px 12px; display:flex; align-items:center; gap:10px; border-radius:10px; color:var(--ink); background:#eef0ff; }
.role-summary>span { width:24px; height:24px; display:grid; place-items:center; flex:0 0 24px; border-radius:50%; color:white; background:var(--blue); font-size:11px; font-weight:800; }
.role-summary>div { display:flex; flex-direction:column; gap:2px; }
.role-summary small { color:var(--blue); font:600 8px 'DM Mono'; letter-spacing:.08em; }
.role-summary b { font-size:11px; }
.terms a,.privacy-notice a,.security-note a { color:var(--blue); font-weight:800; text-decoration-thickness:1px; text-underline-offset:2px; }
.privacy-notice { margin:9px 0 0 25px; color:var(--muted); font-size:10px; line-height:1.5; }
.privacy-notice a { color:var(--ink); }
.security-note a { display:inline-block; margin-top:5px; }
@media(max-width:850px){
  .signup-header{padding-right:70px}.account-types{grid-template-columns:1fr 1fr}.account-types label.account-type,.role-card-content{min-height:218px}.role-card-content{padding:15px}.role-visual{width:52px;height:52px;margin-bottom:16px}.buyer-visual i:first-child{left:12px;top:10px}.buyer-visual i:nth-child(2){left:19px;top:21px}.producer-visual i:first-child{left:10px;bottom:10px}.producer-visual i:nth-child(2){left:16px;top:12px}.role-card-content>strong{font-size:15px}.role-card-content>em{font-size:9px}.privacy-notice{font-size:10px}
}
@media(max-width:430px){
  .account-types{grid-template-columns:1fr}.account-types label.account-type,.role-card-content{min-height:174px}.role-card-content{padding:14px 15px 13px 84px;position:relative}.role-visual{position:absolute;left:14px;top:15px}.role-choice{margin-top:17px}.signup-header h2{font-size:26px}.signup-step>label{margin-top:15px}.signup-step>label input{height:48px;font-size:14px}.terms{margin-top:18px!important}.terms a,.privacy-notice a{font-size:11px}.privacy-notice{margin-left:25px;font-size:11px}
}