function ObChrome({step,total=8,children,foot=true}){return <div style={{minHeight:'100vh',display:'flex',flexDirection:'column'}}>
 <header className="ob-hdr"><div><Logo/></div><div className="prog"><div className="prog-t"><i style={{width:(step/total*100)+'%'}}></i></div><span className="tiny" style={{whiteSpace:'nowrap'}}>{step} of {total}</span></div><div className="ob-r tiny" style={{textAlign:'right'}}>pausa.pt · hello@pausa.pt</div></header>
 <main style={{flex:1}}><div className="ob-body reveal" key={step}>{children}</div></main>
 {foot&&<p className="ob-foot"><Icon n="shield" s={15}/><span>Your fund never sees that you are here. We never sell your data. <a href="#/confidentiality">See privacy policy</a>.</span></p>}</div>}
function ObNav({back,next,ok,label='Continue'}){return <div className="row" style={{justifyContent:'space-between',marginTop:28}}>{back?<a className="tlink" href={back} style={{display:'inline-flex',alignItems:'center',gap:6,textDecoration:'none'}}><Icon n="back" s={14}/>Back</a>:<span></span>}<Btn onClick={next} disabled={!ok}>{label}</Btn></div>}

const PW_RULES=[['Minimum 12 characters',p=>p.length>=12],['At least 1 lowercase letter',p=>/[a-z]/.test(p)],['At least 1 uppercase letter',p=>/[A-Z]/.test(p)],['At least 1 number',p=>/\d/.test(p)],['At least 1 special character',p=>/[^A-Za-z0-9\s]/.test(p)],['No spaces',p=>p.length>0&&!/\s/.test(p)]];

function Signup({n}){const[s,set]=useStore();const step=Math.min(8,Math.max(1,+n||1));
 const[route,setRoute]=useState(s.route||null);const[code,setCode]=useState('');const[fund,setFund]=useState('');const[fq,setFq]=useState('');const[co,setCo]=useState('');
 const[email,setEmail]=useState(s.email||'');const[pw,setPw]=useState('Northlight2026');const[pw2,setPw2]=useState('');const[show,setShow]=useState(false);
 const[name,setName]=useState('');const[yr,setYr]=useState('');const[agree,setAgree]=useState(false);
 if(step===1)return <ObChrome step={1}><h1 className="q">How do you have access?</h1><p className="hint">This tells us who covers your sessions. Nothing more.</p>
 <div className="ob-card"><div className="opts">{['Through a fund that backs my company','Through my company','I have an invitation code'].map((o,i)=><Option key={o} on={route===i} onClick={()=>setRoute(i)}>{o}</Option>)}</div>
 <ObNav ok={route!=null} next={()=>{set({route});go(route===2?'#/signup/2':route===0?'#/signup/3':'#/signup/4')}}/></div>
 <p className="small" style={{textAlign:'center',marginTop:20}}>Already have an account? <a href="#/app">Log in</a></p></ObChrome>;
 if(step===2){const ok=/^[A-Z]{3,}-[A-Z0-9]{4}$/.test(code);return <ObChrome step={2}><h1 className="q">Enter your access code.</h1><p className="hint">Your fund sent this in the email introducing Pausa. It tells us which fund covers your sessions. It does not tell them that you used it.</p>
 <div className="ob-card"><div className="field"><label htmlFor="code">Access code</label><input id="code" className="inp hl mono" style={{fontSize:18}} placeholder="ANANDA-7K2M" value={code} onChange={e=>setCode(e.target.value.toUpperCase().replace(/[^A-Z0-9-]/g,'').slice(0,14))} autoFocus/></div>
 <ObNav back="#/signup/1" ok={ok} next={()=>go('#/signup/4')}/><p className="small" style={{textAlign:'center',marginTop:18}}>No code? <a href="#/signup/3">Use your work email instead.</a></p></div></ObChrome>}
 if(step===3){const opts=PD.FUNDS.filter(f=>f.toLowerCase().includes(fq.toLowerCase()));return <ObChrome step={3}><h1 className="q">Which fund backs your company?</h1><p className="hint">We check that your company is in their portfolio. That check happens on our side. Nothing is sent to the fund.</p>
 <div className="ob-card" style={{display:'grid',gap:18}}><div className="field" style={{position:'relative'}}><label htmlFor="fund">Fund</label><div style={{position:'relative'}}><Icon n="search" s={16} style={{position:'absolute',left:16,top:16,color:'var(--ink3)'}}/><input id="fund" className="inp hl" style={{paddingLeft:42}} placeholder="Search for your fund" value={fund||fq} onChange={e=>{setFund('');setFq(e.target.value)}}/></div>
 {fq&&!fund&&<div className="menu" style={{top:76,left:0,right:0}}>{opts.length?opts.slice(0,6).map(o=><button key={o} onClick={()=>{setFund(o);setFq(o)}}>{o}</button>):<p className="small" style={{padding:10}}>Not listed yet. Use an invitation code, or tell us at hello@pausa.pt.</p>}</div>}</div>
 <div className="field"><label htmlFor="co">Your company</label><input id="co" className="inp" value={co} onChange={e=>setCo(e.target.value)}/></div>
 <ObNav back="#/signup/1" ok={fund&&co} next={()=>{set({fund,company:co});go('#/signup/4')}}/></div></ObChrome>}
 if(step===4){const allOk=PW_RULES.every(([,f])=>f(pw));const ok=/\S+@\S+\.\S+/.test(email)&&allOk&&pw===pw2;return <ObChrome step={4}><h1 className="q">Create your account.</h1><p className="hint">Use any email you like. It does not need to be your work address.</p>
 <div className="ob-card" style={{display:'grid',gap:16}}><div className="field"><label htmlFor="em">Email</label><input id="em" type="email" className="inp" value={email} onChange={e=>setEmail(e.target.value)}/></div>
 <div className="field"><label htmlFor="pw">Password</label><div className="pw"><input id="pw" type={show?'text':'password'} className="inp" value={pw} onChange={e=>setPw(e.target.value)} style={{paddingRight:44}}/><button type="button" onClick={()=>setShow(!show)} aria-label={show?'Hide password':'Show password'}><Icon n={show?'eyeoff':'eye'} s={18}/></button></div>
 <ul className="rule-list">{PW_RULES.map(([l,f])=>{const o=f(pw);return <li key={l} className={o?'ok':''}><Icon n={o?'check':'x'} s={13} w={2}/>{l}</li>})}</ul></div>
 <div className="field"><label htmlFor="pw2">Confirm password</label><input id="pw2" type={show?'text':'password'} className="inp" value={pw2} onChange={e=>setPw2(e.target.value)}/>{pw2&&pw!==pw2&&<span className="small" style={{color:'#7a2d2d'}}>Passwords do not match yet.</span>}</div>
 <ObNav back="#/signup/1" ok={ok} next={()=>{set({email});go('#/signup/5')}}/>
 <div className="or" style={{margin:'8px 0'}}>OR</div><div className="grid2" style={{gap:10}}><button className="btn btn-ghost" onClick={()=>go('#/signup/5')}>Continue with Google</button><button className="btn btn-ghost" onClick={()=>go('#/signup/5')}>Continue with Apple</button></div></div></ObChrome>}
 if(step===5)return <ObChrome step={5}><h1 className="q">What should we call you?</h1><p className="hint">First name is all we need. Your clinician will know it. Your fund will not.</p>
 <div className="ob-card"><div className="field"><label htmlFor="fn">First name</label><input id="fn" className="inp" value={name} onChange={e=>setName(e.target.value)} autoFocus/></div><ObNav back="#/signup/4" ok={name.trim()} next={()=>{set({name:name.trim()});go('#/signup/6')}}/></div></ObChrome>;
 if(step===6){const y=+yr;const full=yr.length===4;const age=2026-y;const under=full&&age<18;const ok=full&&age>=18&&age<110;return <ObChrome step={6}><h1 className="q">What year were you born?</h1><p className="hint">Only to confirm you are 18 or over.</p>
 <div className="ob-card"><div className="field"><label htmlFor="yr">Year</label><input id="yr" inputMode="numeric" className="inp" style={{maxWidth:160,fontSize:18,letterSpacing:2}} placeholder="YYYY" value={yr} onChange={e=>setYr(e.target.value.replace(/\D/g,'').slice(0,4))}/></div>
 {under&&<div className="inline-note" style={{marginTop:16}}>Pausa is built for founders aged 18 and over. If you need support now, SNS 24 on 808 24 24 24, option 4, is free and open 24 hours.</div>}
 <ObNav back="#/signup/5" ok={ok} next={()=>go('#/signup/7')}/></div></ObChrome>}
 if(step===7)return <ObChrome step={7}><h1 className="q">What your fund sees, and what it <em>never</em> sees.</h1>
 <div className="ob-card" style={{display:'grid',gap:22}}>{[['lock','Your sessions are confidential.','Your clinician is bound by professional confidentiality under Ordem dos Psicólogos Portugueses rules. Pausa never receives session content.'],['users','Your fund sees numbers, never names.','Your fund receives usage totals once a quarter, and only when at least ten founders in their portfolio are using Pausa. Your name, your company, your bookings and your sessions are never part of that.'],['shield','Special-category data, handled accordingly.','What you tell us is health data under GDPR. We hold it on the legal basis set out in the privacy notice, in the EU, we use it to match you, and we do not sell it to anyone.']].map(([ic,h,p])=><div key={h} style={{display:'flex',gap:16}}><span className="cred-ic"><Icon n={ic} s={17}/></span><div><h3 style={{fontSize:15,fontWeight:600}}>{h}</h3><p className="body" style={{fontSize:14,marginTop:4}}>{p}</p></div></div>)}
 <label style={{display:'flex',gap:10,fontSize:13,color:'var(--ink2)',alignItems:'flex-start',borderTop:'1px solid var(--border2)',paddingTop:18}}><input type="checkbox" checked={agree} onChange={e=>setAgree(e.target.checked)} style={{marginTop:4,accentColor:'var(--green)',width:16,height:16}}/>I have read and agree to the <a href="#/confidentiality">privacy notice</a> and the <a href="#/confidentiality">terms of use</a>.</label>
 <ObNav back="#/signup/6" ok={agree} label="Create account" next={()=>go('#/signup/8')}/></div></ObChrome>;
 return <ObChrome step={8}><div style={{textAlign:'center'}}><div style={{width:84,height:84,borderRadius:'50%',background:'#fff',border:'1px solid var(--border)',display:'grid',placeItems:'center',margin:'0 auto 28px',position:'relative',color:'var(--green)'}}><Icon n="mail" s={34} w={1.3}/><span style={{position:'absolute',top:16,right:16,width:12,height:12,borderRadius:'50%',background:'var(--lime)',border:'2px solid #fff'}}></span></div>
 <h1 className="q">Verify your email.</h1><p className="body" style={{marginTop:14}}>Check your inbox for the verification link. We sent it to:</p><p style={{fontWeight:600,marginTop:6}}>{s.email}</p>
 <p className="small" style={{marginTop:28}}><a href="#/signup/4">Wrong address? Change it.</a></p>
 <p className="tiny" style={{marginTop:48}}>Beta preview: <a href="#/app?state=first">open the link from the email</a></p></div></ObChrome>}

Object.assign(window,{Signup,ObChrome});