// Science hi-fi — chat + astrocartography + checkout + confirmation

// =========================================================
// Chat interface — two-panel (thread + live context)
// =========================================================
function SciChatDesktop() {
  return (
    <div style={{ width:1400, background:SCI.paper, color:SCI.ink, fontFamily:SCI.body, border:`1px solid ${SCI.ink}` }}>
      <div style={{ display:'flex', alignItems:'stretch', height:56, borderBottom:`1px solid ${SCI.ink}` }}>
        <div style={{ padding:'0 28px', display:'flex', alignItems:'center', gap:10, borderRight:`1px solid ${SCI.ink}` }}>
          <div style={{ width:14, height:14, border:`1.5px solid ${SCI.ink}`, display:'grid', gridTemplateColumns:'1fr 1fr', gridTemplateRows:'1fr 1fr' }}>
            <div style={{background:SCI.ink}}/><div/><div/><div style={{background:SCI.ink}}/>
          </div>
          <div style={{ fontFamily:SCI.display, fontSize:20 }}>Persona</div>
        </div>
        <div style={{ flex:1, padding:'0 28px', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
          <MonoLabel>§ Chat · session 04 · 21.APR.2026</MonoLabel>
          <div style={{ display:'flex', gap:8 }}><Pill>↻ New</Pill><Pill>⇣ Export</Pill><Pill dark>Inner Circle</Pill></div>
        </div>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'1.7fr 1fr', minHeight:820 }}>
        {/* Thread */}
        <div style={{ borderRight:`1px solid ${SCI.ink}`, display:'flex', flexDirection:'column' }}>
          <div style={{ flex:1, padding:'36px 48px 24px', overflow:'hidden' }}>
            {/* User bubble */}
            <div style={{ display:'flex', justifyContent:'flex-end', marginBottom:22 }}>
              <div style={{ maxWidth:'70%', background:SCI.ink, color:SCI.paper, padding:'16px 20px', border:`1px solid ${SCI.ink}` }}>
                <MonoLabel size={9} style={{color:'rgba(243,239,228,0.5)', marginBottom:6, display:'block'}}>J.D. · 14:32</MonoLabel>
                <div style={{ fontSize:15, lineHeight:1.5 }}>Why do I burn out on jobs that everyone else seems to love?</div>
              </div>
            </div>
            {/* Assistant bubble */}
            <div style={{ marginBottom:22 }}>
              <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:10 }}>
                <div style={{ width:22, height:22, border:`1.5px solid ${SCI.ink}`, display:'grid', gridTemplateColumns:'1fr 1fr', gridTemplateRows:'1fr 1fr' }}>
                  <div style={{background:SCI.ink}}/><div/><div/><div style={{background:SCI.ink}}/>
                </div>
                <MonoLabel>Persona · drawing from § 02 · § 04 · § 07</MonoLabel>
                <MonoLabel size={9} style={{color:SCI.ink3}}>0.89 confidence</MonoLabel>
              </div>
              <div style={{ padding:'4px 2px' }}>
                <p style={{ fontFamily:SCI.display, fontSize:26, lineHeight:1.25, letterSpacing:-0.2, margin:'0 0 14px' }}>
                  Because the shape of the job is wrong for you, not the content.
                </p>
                <p style={{ fontSize:15, lineHeight:1.65, color:SCI.ink2, margin:'0 0 12px' }}>
                  Your Human Design <span style={{background:'rgba(198,90,42,0.18)'}}>Projector</span> type and MBTI Ni-Te axis both describe someone whose energy runs in pulses, not grids. The psychometric read from §02 adds the missing piece — your <strong>22nd-percentile neuroticism</strong> means you don't feel the warning signs until you are already depleted.
                </p>
                <p style={{ fontSize:15, lineHeight:1.65, color:SCI.ink2, margin:'0 0 14px' }}>
                  Roles that run on continuous availability (standups, hot desks, Slack-native teams) extract a cost you cannot feel until week six<span style={{ display:'inline-block', width:9, height:16, background:SCI.ink, marginLeft:3, verticalAlign:'bottom' }}/>
                </p>
                {/* Sources */}
                <div style={{ display:'flex', gap:8, marginTop:16, flexWrap:'wrap' }}>
                  <Pill>§ 02 · Big Five</Pill>
                  <Pill>§ 04 · Enneagram 8</Pill>
                  <Pill dark>§ 05 · HD Projector</Pill>
                  <Pill>§ 07 · Vocation</Pill>
                </div>
              </div>
            </div>
          </div>

          {/* Prompt chips + input */}
          <div style={{ borderTop:`1px solid ${SCI.ink}`, padding:'16px 48px 24px' }}>
            <div style={{ display:'flex', gap:8, marginBottom:14, flexWrap:'wrap' }}>
              {['Suggest a work rhythm that fits','What does this mean for 2026?','Compare with my partner','When will this ease?'].map((p,i)=>(
                <div key={i} style={{ padding:'7px 14px', border:`1px solid ${SCI.ink}`, fontSize:12, fontFamily:SCI.body, background:SCI.paper, cursor:'pointer' }}>{p}</div>
              ))}
            </div>
            <div style={{ border:`1px solid ${SCI.ink}`, background:SCI.paper, display:'flex', alignItems:'stretch' }}>
              <div style={{ padding:'16px 18px', flex:1, fontSize:14, color:SCI.ink3, display:'flex', alignItems:'center' }}>
                Ask about your chart…
              </div>
              <div style={{ borderLeft:`1px solid ${SCI.ink}`, padding:'0 18px', display:'flex', alignItems:'center', gap:10 }}>
                <MonoLabel size={9} style={{color:SCI.ink3}}>CTRL ↵</MonoLabel>
                <SciBtn primary size="sm" icon="↑">Send</SciBtn>
              </div>
            </div>
          </div>
        </div>

        {/* Context panel */}
        <div style={{ background:SCI.tint2, padding:'32px 36px', display:'flex', flexDirection:'column', gap:20, overflow:'hidden' }}>
          <div>
            <MonoLabel>§ Active context · this answer</MonoLabel>
            <div style={{ fontFamily:SCI.display, fontSize:26, lineHeight:1.15, letterSpacing:-0.2, marginTop:8 }}>
              What the engine read<br/>to answer you<span style={{color:SCI.orange}}>.</span>
            </div>
          </div>

          {/* radar */}
          <div style={{ background:SCI.paper, border:`1px solid ${SCI.ink}`, padding:16 }}>
            <div style={{ display:'flex', justifyContent:'space-between', marginBottom:6 }}>
              <MonoLabel size={10}>Cross-system agreement · 0.89</MonoLabel>
              <MonoLabel size={9} style={{color:SCI.ink3}}>7 / 10 instruments</MonoLabel>
            </div>
            <div style={{ aspectRatio:'1/1', maxWidth:240, margin:'0 auto' }}>
              <EnneaRadar values={[0.42,0.38,0.48,0.55,0.62,0.58,0.72,0.95,0.61]}/>
            </div>
          </div>

          {/* Instrument contribution list */}
          <div style={{ background:SCI.paper, border:`1px solid ${SCI.ink}` }}>
            <div style={{ padding:'10px 14px', borderBottom:`1px solid ${SCI.ink}`, display:'flex', justifyContent:'space-between' }}>
              <MonoLabel size={9}>Instrument</MonoLabel>
              <MonoLabel size={9}>Weight</MonoLabel>
            </div>
            {[
              ['Big Five · Neuroticism',0.92,true],
              ['HD · Projector type',  0.88,true],
              ['MBTI · Ni-Te axis',    0.81,true],
              ['Enneagram 8w7',        0.74,true],
              ['Vocation § 07',        0.68,true],
              ['Astrology · 6H Saturn',0.52,false],
              ['Numerology · LP 7',    0.41,false],
              ['I Ching · hex 39',     0.22,false],
            ].map(([l,w,active],i)=>(
              <div key={i} style={{ display:'grid', gridTemplateColumns:'1fr 80px 40px', gap:10, padding:'8px 14px', borderBottom: i<7?`1px solid ${SCI.tint}`:'none', alignItems:'center', opacity: active?1:0.5 }}>
                <span style={{ fontSize:12 }}>{l}</span>
                <div style={{ height:5, background:SCI.tint, position:'relative' }}>
                  <div style={{ position:'absolute', inset:0, right:'auto', width:`${w*100}%`, background: active?SCI.orange:SCI.ink3 }}/>
                </div>
                <span style={{ fontFamily:SCI.mono, fontSize:10, textAlign:'right' }}>{w.toFixed(2)}</span>
              </div>
            ))}
          </div>

          <div style={{ fontSize:12, lineHeight:1.5, color:SCI.ink2 }}>
            Five instruments cleared the 0.6 weight threshold to enter the answer. You can see the full calculation in <span style={{textDecoration:'underline'}}>methodology → conversational read</span>.
          </div>
        </div>
      </div>
    </div>
  );
}

function SciChatMobile() {
  return (
    <div style={{ width:390, background:SCI.paper, color:SCI.ink, fontFamily:SCI.body, border:`1px solid ${SCI.ink}` }}>
      <div style={{ height:52, borderBottom:`1px solid ${SCI.ink}`, display:'flex', alignItems:'center', padding:'0 18px', justifyContent:'space-between' }}>
        <MonoLabel>§ Chat</MonoLabel>
        <MonoLabel size={9} style={{color:SCI.ink3}}>CONTEXT ▾</MonoLabel>
      </div>
      <div style={{ padding:'20px' }}>
        <div style={{ display:'flex', justifyContent:'flex-end', marginBottom:18 }}>
          <div style={{ maxWidth:'80%', background:SCI.ink, color:SCI.paper, padding:'12px 14px' }}>
            <div style={{ fontSize:13, lineHeight:1.5 }}>Why do I burn out on jobs everyone else loves?</div>
          </div>
        </div>
        <MonoLabel style={{marginBottom:8, display:'block'}}>Persona · § 02 · § 04 · § 07</MonoLabel>
        <p style={{ fontFamily:SCI.display, fontSize:20, lineHeight:1.25, margin:'0 0 10px' }}>
          Because the shape of the job is wrong for you, not the content.
        </p>
        <p style={{ fontSize:13, lineHeight:1.6, color:SCI.ink2 }}>
          Your HD <span style={{background:'rgba(198,90,42,0.18)'}}>Projector</span> type + 22nd-percentile neuroticism means you don't feel the cost until you're depleted.
        </p>
        <div style={{ display:'flex', gap:6, marginTop:12, flexWrap:'wrap' }}>
          <Pill>§ 02</Pill><Pill>§ 04</Pill><Pill dark>§ 05</Pill><Pill>§ 07</Pill>
        </div>
      </div>
      <div style={{ borderTop:`1px solid ${SCI.ink}`, padding:'14px 20px' }}>
        <div style={{ display:'flex', gap:6, marginBottom:10, overflow:'hidden' }}>
          {['Suggest work rhythm','2026?','Partner'].map((p,i)=>(<div key={i} style={{padding:'6px 10px', border:`1px solid ${SCI.ink}`, fontSize:11, whiteSpace:'nowrap'}}>{p}</div>))}
        </div>
        <div style={{ border:`1px solid ${SCI.ink}`, display:'flex', alignItems:'stretch' }}>
          <div style={{ padding:'12px 14px', flex:1, fontSize:13, color:SCI.ink3 }}>Ask your chart…</div>
          <div style={{ borderLeft:`1px solid ${SCI.ink}`, padding:'0 12px', display:'flex', alignItems:'center' }}>
            <SciBtn primary size="sm" icon="↑">Send</SciBtn>
          </div>
        </div>
      </div>
    </div>
  );
}

// =========================================================
// Astrocartography
// =========================================================
function SciMapDesktop() {
  return (
    <div style={{ width:1400, background:SCI.paper, color:SCI.ink, fontFamily:SCI.body, border:`1px solid ${SCI.ink}` }}>
      <div style={{ display:'flex', alignItems:'stretch', height:56, borderBottom:`1px solid ${SCI.ink}` }}>
        <div style={{ padding:'0 28px', display:'flex', alignItems:'center', gap:10, borderRight:`1px solid ${SCI.ink}` }}>
          <div style={{ width:14, height:14, border:`1.5px solid ${SCI.ink}`, display:'grid', gridTemplateColumns:'1fr 1fr', gridTemplateRows:'1fr 1fr' }}>
            <div style={{background:SCI.ink}}/><div/><div/><div style={{background:SCI.ink}}/>
          </div>
          <div style={{ fontFamily:SCI.display, fontSize:20 }}>Persona</div>
        </div>
        <div style={{ flex:1, padding:'0 28px', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
          <MonoLabel>§ 09 · Astrocartography · relocational chart</MonoLabel>
          <div style={{ display:'flex', gap:8 }}>
            <Pill dark>All lines</Pill><Pill>Career</Pill><Pill>Love</Pill><Pill>Spiritual</Pill><Pill>Challenges</Pill>
          </div>
        </div>
      </div>

      {/* Meta strip */}
      <div style={{ padding:'10px 28px', fontFamily:SCI.mono, fontSize:10, color:SCI.ink2, borderBottom:`1px solid ${SCI.tint}`, display:'flex', justifyContent:'space-between' }}>
        <span>FIG. 08 · EQUIRECTANGULAR · PLATE CARRÉE</span>
        <span>PROJECTED FROM 40.68° N · 73.94° W @ 14:32 UTC−5</span>
        <span>10 PLANETARY LINES · 12 PARANS</span>
      </div>

      {/* Map */}
      <div style={{ borderBottom:`1px solid ${SCI.ink}`, padding:24, background:SCI.tint2 }}>
        <div style={{ background:SCI.paper, border:`1px solid ${SCI.ink}`, padding:0, position:'relative' }}>
          <svg viewBox="0 0 1400 560" style={{ width:'100%', height:'auto', display:'block' }}>
            {/* graticule */}
            {Array.from({length:15}).map((_,i)=>(
              <line key={'v'+i} x1={i*100} y1="0" x2={i*100} y2="560" stroke={SCI.tint} strokeWidth="0.6"/>
            ))}
            {Array.from({length:7}).map((_,i)=>(
              <line key={'h'+i} x1="0" y1={i*93} x2="1400" y2={i*93} stroke={SCI.tint} strokeWidth="0.6"/>
            ))}
            {/* equator / tropics emphasized */}
            <line x1="0" y1="280" x2="1400" y2="280" stroke={SCI.ink3} strokeWidth="0.8"/>
            <line x1="0" y1="180" x2="1400" y2="180" stroke={SCI.ink3} strokeWidth="0.4" strokeDasharray="3 3"/>
            <line x1="0" y1="380" x2="1400" y2="380" stroke={SCI.ink3} strokeWidth="0.4" strokeDasharray="3 3"/>

            {/* continents */}
            <g fill={SCI.ink} opacity="0.88">
              <path d="M110,170 Q140,130 220,120 L320,140 L380,200 L360,280 L300,340 L210,350 L150,310 L100,240 Z"/>
              <path d="M340,400 L390,360 L460,380 L450,500 L400,540 L360,500 L330,440 Z"/>
              <path d="M540,120 L640,100 L740,110 L820,140 L840,220 L820,290 L740,340 L680,310 L580,280 L550,220 Z"/>
              <path d="M700,360 L770,340 L830,380 L820,460 L760,490 L710,460 L690,400 Z"/>
              <path d="M870,170 L1020,140 L1140,170 L1200,220 L1200,280 L1140,330 L1040,340 L950,320 L880,270 Z"/>
              <path d="M1060,400 L1130,380 L1180,420 L1160,480 L1100,500 L1060,450 Z"/>
              <path d="M1240,120 Q1280,100 1340,110 L1370,160 L1340,220 L1290,240 L1240,200 Z"/>
            </g>

            {/* planetary lines — curvy */}
            <g strokeWidth="1.6" fill="none">
              <path d="M180,0 Q200,140 160,280 Q120,420 190,560" stroke={SCI.orange}/>
              <path d="M420,0 Q440,140 430,280 Q420,420 450,560" stroke={SCI.forest}/>
              <path d="M620,0 Q640,140 680,280 Q720,420 690,560" stroke={SCI.ink}/>
              <path d="M880,0 Q860,140 900,280 Q940,420 910,560" stroke={SCI.orange} strokeDasharray="4 3"/>
              <path d="M1100,0 Q1080,140 1120,280 Q1160,420 1130,560" stroke={SCI.ink} strokeDasharray="2 2"/>
              <path d="M0,180 Q400,130 800,180 Q1100,220 1400,170" stroke={SCI.sand}/>
              <path d="M0,340 Q400,380 800,340 Q1100,310 1400,360" stroke={SCI.orange} strokeDasharray="6 4"/>
            </g>

            {/* Line labels */}
            <g fontFamily={SCI.mono} fontSize="10" fill={SCI.ink}>
              <text x="150" y="12">☉ MC</text>
              <text x="400" y="12" fill={SCI.forest}>♃ MC</text>
              <text x="660" y="12">♄ AC</text>
              <text x="870" y="12" fill={SCI.orange}>♀ IC</text>
              <text x="1080" y="12">☿ DC</text>
            </g>

            {/* City pins */}
            {[
              [172,236,'Brooklyn','home'],
              [596,206,'Lisbon','career'],
              [760,262,'Marrakech','love'],
              [966,208,'Jaipur','spiritual'],
              [880,406,'Cape Town','challenge'],
              [1190,276,'Kyoto','spiritual'],
            ].map(([x,y,n,k],i)=>(
              <g key={i}>
                <circle cx={x} cy={y} r="6" fill={k==='career'?SCI.forest:(k==='love'?SCI.orange:(k==='challenge'?'#b02d2d':SCI.ink))}/>
                <circle cx={x} cy={y} r="12" fill="none" stroke={SCI.ink} strokeWidth="0.8"/>
                <text x={x+16} y={y-4} fontFamily={SCI.mono} fontSize="10" fill={SCI.ink}>{n.toUpperCase()}</text>
                <text x={x+16} y={y+8} fontFamily={SCI.mono} fontSize="8" fill={SCI.ink3}>{k}</text>
              </g>
            ))}

            {/* Legend */}
            <g transform="translate(20, 500)">
              <rect x="-4" y="-14" width="280" height="50" fill={SCI.paper} stroke={SCI.ink}/>
              <text fontFamily={SCI.mono} fontSize="8" fill={SCI.ink2} y="0">LEGEND</text>
              <line x1="0" y1="12" x2="24" y2="12" stroke={SCI.orange} strokeWidth="1.6"/>
              <text x="30" y="15" fontFamily={SCI.mono} fontSize="8" fill={SCI.ink}>☉ Sun</text>
              <line x1="76" y1="12" x2="100" y2="12" stroke={SCI.forest} strokeWidth="1.6"/>
              <text x="106" y="15" fontFamily={SCI.mono} fontSize="8" fill={SCI.ink}>♃ Jupiter</text>
              <line x1="0" y1="26" x2="24" y2="26" stroke={SCI.ink} strokeWidth="1.6" strokeDasharray="2 2"/>
              <text x="30" y="29" fontFamily={SCI.mono} fontSize="8" fill={SCI.ink}>☿ Mercury</text>
              <line x1="106" y1="26" x2="130" y2="26" stroke={SCI.orange} strokeWidth="1.6" strokeDasharray="6 4"/>
              <text x="136" y="29" fontFamily={SCI.mono} fontSize="8" fill={SCI.ink}>♀ Venus paran</text>
            </g>
          </svg>
        </div>
      </div>

      {/* Selected city detail + table */}
      <div style={{ display:'grid', gridTemplateColumns:'1.3fr 1fr', borderBottom:`1px solid ${SCI.ink}` }}>
        <div style={{ padding:'36px 48px', borderRight:`1px solid ${SCI.ink}` }}>
          <MonoLabel>§ Selected · Lisbon, Portugal · 38.72° N · 9.14° W</MonoLabel>
          <h2 style={{ fontFamily:SCI.display, fontSize:54, lineHeight:0.95, letterSpacing:-0.8, fontWeight:500, margin:'14px 0 16px' }}>
            Your Jupiter-MC line runs <span style={{fontStyle:'italic'}}>straight through</span>.
          </h2>
          <p style={{ fontSize:15, lineHeight:1.65, color:SCI.ink2, maxWidth:520, margin:0 }}>
            Lisbon sits within 0.3° of where your natal Jupiter crosses the midheaven — the most recognized vocational signal in astrocartography. Persona's convergence engine scores this location <span style={{background:'rgba(198,90,42,0.18)'}}>0.84 for career</span>, the highest of any European capital in your chart.
          </p>
          <div style={{ marginTop:24, display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:0, border:`1px solid ${SCI.ink}` }}>
            {[
              ['Career',   '0.84', 'Jupiter-MC'],
              ['Love',     '0.41', 'Venus trine'],
              ['Home',     '0.38', 'Moon weak'],
              ['Spiritual','0.62', 'Neptune paran'],
            ].map(([k,v,s],i)=>(
              <div key={i} style={{ padding:'14px 16px', borderRight: i<3?`1px solid ${SCI.tint}`:'none' }}>
                <MonoLabel size={9}>{k}</MonoLabel>
                <div style={{ fontFamily:SCI.display, fontSize:30, lineHeight:1, margin:'4px 0 2px' }}>{v}</div>
                <MonoLabel size={9} style={{color:SCI.ink3}}>{s}</MonoLabel>
              </div>
            ))}
          </div>
        </div>
        <div style={{ padding:'28px 40px', background:SCI.tint2 }}>
          <MonoLabel>Top 6 locations · your chart</MonoLabel>
          <div style={{ marginTop:12, background:SCI.paper, border:`1px solid ${SCI.ink}` }}>
            <div style={{ display:'grid', gridTemplateColumns:'36px 1fr 70px 70px', padding:'10px 14px', borderBottom:`1px solid ${SCI.ink}`, background:SCI.tint2 }}>
              {['','City','Theme','Score'].map((h,i)=>(<MonoLabel key={i} size={9}>{h}</MonoLabel>))}
            </div>
            {[
              ['01','Lisbon · PT',     'Career',   0.84, true],
              ['02','Kyoto · JP',      'Spiritual',0.78, false],
              ['03','Jaipur · IN',     'Spiritual',0.74, false],
              ['04','Marrakech · MA',  'Love',     0.71, false],
              ['05','Cape Town · ZA',  'Challenge',0.68, false],
              ['06','Reykjavík · IS',  'Solitude', 0.66, false],
            ].map(([n,c,t,s,sel],i)=>(
              <div key={i} style={{
                display:'grid', gridTemplateColumns:'36px 1fr 70px 70px',
                padding:'10px 14px', alignItems:'center',
                borderBottom: i<5?`1px solid ${SCI.tint}`:'none',
                background: sel?'rgba(198,90,42,0.08)':SCI.paper,
              }}>
                <MonoLabel size={10}>{n}</MonoLabel>
                <span style={{ fontSize:13 }}>{c}</span>
                <MonoLabel size={10} style={{color:SCI.ink3}}>{t}</MonoLabel>
                <span style={{ fontFamily:SCI.mono, fontSize:12, textAlign:'right' }}>{s.toFixed(2)}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function SciMapMobile() {
  return (
    <div style={{ width:390, background:SCI.paper, color:SCI.ink, fontFamily:SCI.body, border:`1px solid ${SCI.ink}` }}>
      <div style={{ height:52, borderBottom:`1px solid ${SCI.ink}`, display:'flex', alignItems:'center', padding:'0 18px', justifyContent:'space-between' }}>
        <MonoLabel>§ 09 · Carto</MonoLabel>
        <MonoLabel size={9} style={{color:SCI.ink3}}>6 CITIES</MonoLabel>
      </div>
      <div style={{ padding:'12px 18px', fontFamily:SCI.mono, fontSize:9, color:SCI.ink3, borderBottom:`1px solid ${SCI.tint}`, display:'flex', gap:6, overflow:'hidden' }}>
        {['All','Career','Love','Spirit.','Chall.'].map((f,i)=>(<Pill key={i} dark={i===0}>{f}</Pill>))}
      </div>
      <div style={{ padding:16, background:SCI.tint2, borderBottom:`1px solid ${SCI.ink}` }}>
        <div style={{ background:SCI.paper, border:`1px solid ${SCI.ink}` }}>
          <svg viewBox="0 0 400 200" style={{width:'100%', display:'block'}}>
            <g fill={SCI.ink} opacity="0.85">
              <path d="M30,70 Q50,50 80,55 L110,78 L100,120 L70,130 L40,110 Z"/>
              <path d="M150,60 L200,50 L230,70 L235,110 L200,130 L165,115 Z"/>
              <path d="M250,70 L320,55 L360,80 L355,130 L300,145 L260,115 Z"/>
              <path d="M100,160 L125,150 L140,175 L120,190 Z"/>
              <path d="M250,165 L275,155 L290,180 L265,190 Z"/>
            </g>
            <path d="M50,0 Q60,100 55,200" stroke={SCI.orange} strokeWidth="1.3" fill="none"/>
            <path d="M180,0 Q200,100 190,200" stroke={SCI.forest} strokeWidth="1.3" fill="none"/>
            <path d="M290,0 Q280,100 295,200" stroke={SCI.ink} strokeWidth="1.3" strokeDasharray="3 2" fill="none"/>
            <circle cx="55" cy="90" r="4" fill={SCI.ink}/>
            <circle cx="180" cy="82" r="4" fill={SCI.forest}/>
            <circle cx="290" cy="95" r="4" fill={SCI.orange}/>
          </svg>
        </div>
      </div>
      <div style={{ padding:'20px' }}>
        <MonoLabel>Lisbon · 0.84 career</MonoLabel>
        <h2 style={{ fontFamily:SCI.display, fontSize:30, lineHeight:1, margin:'8px 0 10px', letterSpacing:-0.4, fontWeight:500 }}>
          Jupiter-MC runs <span style={{fontStyle:'italic'}}>straight through</span>.
        </h2>
        <div style={{ fontSize:13, lineHeight:1.55, color:SCI.ink2 }}>
          0.3° from your natal Jupiter's midheaven — highest vocational score in your chart.
        </div>
      </div>
      <div style={{ padding:'14px 20px 20px', borderTop:`1px solid ${SCI.ink}` }}>
        <MonoLabel>Top cities</MonoLabel>
        <div style={{ marginTop:8 }}>
          {[['01','Lisbon','Career','0.84',true],['02','Kyoto','Spiritual','0.78',false],['03','Jaipur','Spiritual','0.74',false],['04','Marrakech','Love','0.71',false]].map(([n,c,t,s,sel],i)=>(
            <div key={i} style={{ display:'grid', gridTemplateColumns:'26px 1fr 80px 40px', gap:8, alignItems:'center', padding:'9px 0', borderBottom: i<3?`1px solid ${SCI.tint}`:'none', background:sel?'rgba(198,90,42,0.08)':'transparent', paddingLeft:sel?6:0 }}>
              <MonoLabel size={9}>{n}</MonoLabel>
              <span style={{fontSize:12}}>{c}</span>
              <MonoLabel size={9} style={{color:SCI.ink3}}>{t}</MonoLabel>
              <span style={{fontFamily:SCI.mono, fontSize:11, textAlign:'right'}}>{s}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// =========================================================
// Checkout
// =========================================================
function SciCheckoutDesktop() {
  return (
    <div style={{ width:1400, background:SCI.paper, color:SCI.ink, fontFamily:SCI.body, border:`1px solid ${SCI.ink}` }}>
      <div style={{ display:'flex', alignItems:'stretch', height:56, borderBottom:`1px solid ${SCI.ink}` }}>
        <div style={{ padding:'0 28px', display:'flex', alignItems:'center', gap:10, borderRight:`1px solid ${SCI.ink}` }}>
          <div style={{ width:14, height:14, border:`1.5px solid ${SCI.ink}`, display:'grid', gridTemplateColumns:'1fr 1fr', gridTemplateRows:'1fr 1fr' }}>
            <div style={{background:SCI.ink}}/><div/><div/><div style={{background:SCI.ink}}/>
          </div>
          <div style={{ fontFamily:SCI.display, fontSize:20 }}>Persona</div>
        </div>
        <div style={{ flex:1, padding:'0 28px', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
          <MonoLabel>§ Checkout · order № 092,409</MonoLabel>
          <MonoLabel size={10} style={{color:SCI.ink3}}>🔒 TLS 1.3 · STRIPE · PCI-DSS</MonoLabel>
        </div>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'1.1fr 1fr', minHeight:800 }}>
        {/* Left — Summary */}
        <div style={{ padding:'48px 56px', borderRight:`1px solid ${SCI.ink}`, background:SCI.tint2 }}>
          <MonoLabel>§ 01 · Order summary</MonoLabel>
          <h1 style={{ fontFamily:SCI.display, fontSize:56, lineHeight:0.95, letterSpacing:-0.8, fontWeight:500, margin:'12px 0 28px' }}>
            $108.00
          </h1>

          <div style={{ background:SCI.paper, border:`1px solid ${SCI.ink}` }}>
            {/* Line items */}
            <div style={{ padding:'18px 20px', borderBottom:`1px solid ${SCI.tint}`, display:'grid', gridTemplateColumns:'1fr 80px', gap:12, alignItems:'baseline' }}>
              <div>
                <div style={{ fontFamily:SCI.display, fontSize:22, lineHeight:1.1 }}>Blueprint</div>
                <MonoLabel size={9} style={{color:SCI.ink3, marginTop:4, display:'block'}}>Tier 02 · one-time · all 10 instruments</MonoLabel>
              </div>
              <div style={{ fontFamily:SCI.display, fontSize:22, textAlign:'right' }}>$79</div>
            </div>

            <div style={{ padding:'18px 20px', borderBottom:`1px solid ${SCI.tint}`, display:'grid', gridTemplateColumns:'1fr 80px', gap:12, alignItems:'baseline' }}>
              <div>
                <div style={{ fontFamily:SCI.display, fontSize:18, lineHeight:1.1 }}>+ Relationship pairing</div>
                <MonoLabel size={9} style={{color:SCI.ink3, marginTop:4, display:'block'}}>Add-on · compare with partner</MonoLabel>
              </div>
              <div style={{ fontFamily:SCI.display, fontSize:20, textAlign:'right' }}>$29</div>
            </div>

            <div style={{ padding:'14px 20px', borderBottom:`1px solid ${SCI.tint}`, display:'grid', gridTemplateColumns:'1fr 80px', gap:12, alignItems:'center' }}>
              <div style={{ display:'flex', alignItems:'center', gap:12 }}>
                <div style={{ width:18, height:18, border:`1.5px solid ${SCI.ink3}` }}/>
                <div>
                  <div style={{ fontSize:13 }}>Monthly subscription</div>
                  <MonoLabel size={9} style={{color:SCI.ink3, marginTop:2, display:'block'}}>Dashboard · chat · transits · $12/mo</MonoLabel>
                </div>
              </div>
              <MonoLabel size={10} style={{color:SCI.ink3, textAlign:'right'}}>OFF</MonoLabel>
            </div>

            {/* Totals */}
            <div style={{ padding:'14px 20px', borderTop:`1px solid ${SCI.tint}`, display:'flex', justifyContent:'space-between', fontSize:13 }}>
              <span>Subtotal</span><span style={{fontFamily:SCI.mono}}>$108.00</span>
            </div>
            <div style={{ padding:'10px 20px', display:'flex', justifyContent:'space-between', fontSize:13, color:SCI.ink2 }}>
              <span>Estimated tax (NY 8.875%)</span><span style={{fontFamily:SCI.mono}}>$9.59</span>
            </div>
            <div style={{ padding:'10px 20px', display:'flex', justifyContent:'space-between', fontSize:13, color:SCI.ink2, borderBottom:`1px solid ${SCI.tint}` }}>
              <span>Promo · FRIENDS10</span><span style={{fontFamily:SCI.mono, color:SCI.orange}}>−$10.80</span>
            </div>
            <div style={{ padding:'18px 20px', display:'flex', justifyContent:'space-between', alignItems:'baseline', background:SCI.tint2 }}>
              <span style={{ fontFamily:SCI.display, fontSize:22 }}>Total</span>
              <span style={{ fontFamily:SCI.display, fontSize:32, letterSpacing:-0.5 }}>$106.79</span>
            </div>
          </div>

          <div style={{ marginTop:18, display:'flex', gap:10 }}>
            <div style={{ flex:1, height:44, border:`1px solid ${SCI.ink}`, background:SCI.paper, display:'flex', alignItems:'center', padding:'0 14px', fontFamily:SCI.mono, fontSize:12, color:SCI.ink3 }}>
              Promo code
            </div>
            <SciBtn>Apply</SciBtn>
          </div>
        </div>

        {/* Right — Payment */}
        <div style={{ padding:'48px 56px' }}>
          <MonoLabel>§ 02 · Payment</MonoLabel>
          <h2 style={{ fontFamily:SCI.display, fontSize:36, lineHeight:1, letterSpacing:-0.4, fontWeight:500, margin:'12px 0 24px' }}>
            Card details.
          </h2>

          <div style={{ display:'flex', gap:10, marginBottom:22 }}>
            <SciBtn primary w="40%" size="md">💳 Card</SciBtn>
            <SciBtn w="30%" size="md">Apple Pay</SciBtn>
            <SciBtn w="30%" size="md">Link</SciBtn>
          </div>

          <FieldDesktop label="Cardholder name" value="Jane Doe"/>
          <div style={{height:14}}/>
          <FieldDesktop label="Card number" value="4242 4242 4242 4242" mono/>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14, marginTop:14 }}>
            <FieldDesktop label="Expiry" value="05 / 28" mono/>
            <FieldDesktop label="CVC"    value="• • •" mono/>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'2fr 1fr', gap:14, marginTop:14 }}>
            <FieldDesktop label="Country" value="United States"/>
            <FieldDesktop label="ZIP"     value="10001" mono/>
          </div>

          <div style={{ marginTop:28 }}>
            <SciBtn primary size="lg" w="100%" icon="→">Pay $106.79</SciBtn>
            <MonoLabel size={9} style={{color:SCI.ink3, marginTop:10, display:'block', textAlign:'center'}}>NO SUBSCRIPTION ATTACHED · CANCEL ANYTIME</MonoLabel>
          </div>
        </div>
      </div>
    </div>
  );
}

function SciCheckoutMobile() {
  return (
    <div style={{ width:390, background:SCI.paper, color:SCI.ink, fontFamily:SCI.body, border:`1px solid ${SCI.ink}` }}>
      <div style={{ height:52, borderBottom:`1px solid ${SCI.ink}`, display:'flex', alignItems:'center', padding:'0 18px', justifyContent:'space-between' }}>
        <MonoLabel>§ Checkout</MonoLabel>
        <MonoLabel size={9} style={{color:SCI.ink3}}>🔒 SECURE</MonoLabel>
      </div>

      <div style={{ padding:'24px 20px', background:SCI.tint2, borderBottom:`1px solid ${SCI.ink}` }}>
        <MonoLabel>§ Order</MonoLabel>
        <div style={{ fontFamily:SCI.display, fontSize:44, lineHeight:1, letterSpacing:-0.6, fontWeight:500, marginTop:8 }}>$106.79</div>
        <div style={{ marginTop:14, background:SCI.paper, border:`1px solid ${SCI.ink}` }}>
          {[['Blueprint','$79'],['+ Relationship','$29'],['Tax (NY)','$9.59'],['FRIENDS10','−$10.80']].map(([l,v],i)=>(
            <div key={i} style={{ display:'flex', justifyContent:'space-between', padding:'10px 14px', borderBottom: i<3?`1px solid ${SCI.tint}`:'none', fontSize:13 }}>
              <span>{l}</span><span style={{fontFamily:SCI.mono, color: l==='FRIENDS10'?SCI.orange:SCI.ink}}>{v}</span>
            </div>
          ))}
        </div>
      </div>

      <div style={{ padding:'22px 20px 28px' }}>
        <MonoLabel>§ Payment</MonoLabel>
        <div style={{ display:'flex', gap:6, margin:'10px 0 16px' }}>
          <SciBtn primary size="sm" w="40%">💳 Card</SciBtn>
          <SciBtn size="sm" w="30%">Apple</SciBtn>
          <SciBtn size="sm" w="30%">Link</SciBtn>
        </div>
        <FieldDesktop label="Card number" value="4242 4242 4242 4242" mono/>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:10, marginTop:10 }}>
          <FieldDesktop label="MM / YY" value="05 / 28" mono/>
          <FieldDesktop label="CVC" value="• • •" mono/>
        </div>
        <div style={{ marginTop:10 }}><FieldDesktop label="ZIP" value="10001" mono/></div>
        <div style={{ marginTop:20 }}>
          <SciBtn primary size="lg" w="100%" icon="→">Pay $106.79</SciBtn>
        </div>
      </div>
    </div>
  );
}

// =========================================================
// Post-purchase confirmation
// =========================================================
function SciConfirmDesktop() {
  return (
    <div style={{ width:1400, background:SCI.paper, color:SCI.ink, fontFamily:SCI.body, border:`1px solid ${SCI.ink}` }}>
      <div style={{ display:'flex', alignItems:'stretch', height:56, borderBottom:`1px solid ${SCI.ink}` }}>
        <div style={{ padding:'0 28px', display:'flex', alignItems:'center', gap:10, borderRight:`1px solid ${SCI.ink}` }}>
          <div style={{ width:14, height:14, border:`1.5px solid ${SCI.ink}`, display:'grid', gridTemplateColumns:'1fr 1fr', gridTemplateRows:'1fr 1fr' }}>
            <div style={{background:SCI.ink}}/><div/><div/><div style={{background:SCI.ink}}/>
          </div>
          <div style={{ fontFamily:SCI.display, fontSize:20 }}>Persona</div>
        </div>
        <div style={{ flex:1, padding:'0 28px', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
          <MonoLabel>§ Order confirmed · № 092,409 · 21.APR.2026 · 14:58</MonoLabel>
          <MonoLabel size={10} style={{color:SCI.ink3}}>RECEIPT EMAILED TO JANE@EMAIL.COM</MonoLabel>
        </div>
      </div>

      {/* Hero */}
      <div style={{ borderBottom:`1px solid ${SCI.ink}`, background:SCI.paper }}>
        <div style={{ padding:'72px 56px 56px', display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:48, alignItems:'center' }}>
          <div>
            <MonoLabel>§ 00 · Receipt</MonoLabel>
            <h1 style={{ fontFamily:SCI.display, fontSize:108, lineHeight:0.9, letterSpacing:-2, fontWeight:500, margin:'18px 0 14px' }}>
              Payment<br/><span style={{fontStyle:'italic'}}>received</span><span style={{color:SCI.orange}}>.</span>
            </h1>
            <div style={{ fontSize:16, lineHeight:1.6, color:SCI.ink2, maxWidth:520 }}>
              Your Blueprint is queued for compute. You'll get an email in about two minutes when the report is ready to read — or you can watch it build in real time.
            </div>
            <div style={{ marginTop:30, display:'flex', gap:12 }}>
              <SciBtn primary size="lg" icon="→">Watch report build</SciBtn>
              <SciBtn size="lg">Download receipt</SciBtn>
            </div>
          </div>

          {/* Receipt card */}
          <div style={{ background:SCI.tint2, border:`1px solid ${SCI.ink}`, padding:0 }}>
            <div style={{ padding:'16px 20px', borderBottom:`1px solid ${SCI.ink}`, display:'flex', justifyContent:'space-between' }}>
              <MonoLabel>Receipt · № 092,409</MonoLabel>
              <MonoLabel size={9} style={{color:SCI.ink3}}>VISA •••• 4242</MonoLabel>
            </div>
            {[
              ['Blueprint tier',        '$79.00'],
              ['Relationship pairing',  '$29.00'],
              ['Tax (NY 8.875%)',       '$9.59'],
              ['Promo · FRIENDS10',     '−$10.80'],
            ].map(([l,v],i)=>(
              <div key={i} style={{ padding:'12px 20px', borderBottom:`1px solid ${SCI.tint}`, display:'flex', justifyContent:'space-between', fontSize:13 }}>
                <span>{l}</span>
                <span style={{ fontFamily:SCI.mono, color: l.startsWith('Promo')?SCI.orange:SCI.ink }}>{v}</span>
              </div>
            ))}
            <div style={{ padding:'18px 20px', display:'flex', justifyContent:'space-between', alignItems:'baseline', background:SCI.paper }}>
              <span style={{ fontFamily:SCI.display, fontSize:20 }}>Paid</span>
              <span style={{ fontFamily:SCI.display, fontSize:32, letterSpacing:-0.5 }}>$106.79</span>
            </div>
          </div>
        </div>
      </div>

      {/* Report build status */}
      <div style={{ display:'grid', gridTemplateColumns:'1.2fr 1fr', borderBottom:`1px solid ${SCI.ink}` }}>
        <div style={{ padding:'40px 56px', borderRight:`1px solid ${SCI.ink}`, background:SCI.tint2 }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:16 }}>
            <MonoLabel>§ 01 · Report status</MonoLabel>
            <MonoLabel size={10} style={{color:SCI.ink3}}>EST 01:52 REMAINING</MonoLabel>
          </div>
          <div style={{ fontFamily:SCI.display, fontSize:88, lineHeight:0.95, letterSpacing:-1.5, fontWeight:500 }}>
            42<span style={{color:SCI.orange, fontSize:40, verticalAlign:'super'}}>%</span>
          </div>
          <div style={{ marginTop:16, background:SCI.paper, border:`1px solid ${SCI.ink}`, padding:3, height:14 }}>
            <div style={{ width:'42%', height:'100%', background:SCI.ink }}/>
          </div>
          <div style={{ marginTop:22, display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap:6 }}>
            {['Big Five','MBTI','Ennea','HD','Astro','Num','Carto','IChing','Genes','Chin'].map((n,i)=>(
              <div key={i} style={{
                padding:'10px 8px',
                border:`1px solid ${i<4?SCI.ink:SCI.tint}`,
                background: i<4?SCI.ink:(i===4?'rgba(198,90,42,0.15)':SCI.paper),
                color: i<4?SCI.paper:SCI.ink,
                textAlign:'center',
              }}>
                <div style={{ fontFamily:SCI.mono, fontSize:9, letterSpacing:0.5 }}>{i<4?'✓':(i===4?'●':'·')}</div>
                <div style={{ fontSize:11, marginTop:3 }}>{n}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Upsell */}
        <div style={{ padding:'40px 48px', background:SCI.ink, color:SCI.paper }}>
          <MonoLabel style={{color:'rgba(243,239,228,0.5)'}}>§ 02 · While you wait</MonoLabel>
          <h2 style={{ fontFamily:SCI.display, fontSize:44, lineHeight:0.98, letterSpacing:-0.6, fontWeight:500, margin:'14px 0 14px' }}>
            Upgrade to Inner Circle<br/>for <span style={{color:SCI.orange, fontStyle:'italic'}}>$120 more</span>.
          </h2>
          <div style={{ fontSize:14, lineHeight:1.6, opacity:0.85, marginBottom:18 }}>
            Unlock chat with your chart, quarterly transit re-runs, and the full relationship suite. Retroactive credit applied — your $106.79 counts.
          </div>
          <div style={{ borderTop:'1px solid rgba(243,239,228,0.2)' }}>
            {['Chat with your chart · unlimited','Quarterly transit updates','Full relationship suite','Priority human support'].map((f,i)=>(
              <div key={i} style={{ padding:'8px 0', borderBottom:'1px solid rgba(243,239,228,0.15)', display:'flex', gap:10, fontSize:13 }}>
                <span style={{color:SCI.orange}}>+</span>{f}
              </div>
            ))}
          </div>
          <div style={{ marginTop:20 }}>
            <SciBtn size="lg" icon="→" style={{background:SCI.paper, color:SCI.ink, border:`1px solid ${SCI.paper}`}}>Upgrade for $120</SciBtn>
          </div>
        </div>
      </div>

      {/* Share row */}
      <div style={{ padding:'32px 56px', display:'grid', gridTemplateColumns:'1fr auto', gap:24, alignItems:'center' }}>
        <div>
          <MonoLabel>§ 03 · Tell a friend</MonoLabel>
          <div style={{ fontFamily:SCI.display, fontSize:22, lineHeight:1.2, marginTop:6 }}>Give $10, get $10 — every friend you refer.</div>
        </div>
        <div style={{ display:'flex', gap:8 }}>
          {['Copy link','X','Instagram','Email'].map((p,i)=>(<SciBtn key={i}>{p}</SciBtn>))}
        </div>
      </div>
    </div>
  );
}

function SciConfirmMobile() {
  return (
    <div style={{ width:390, background:SCI.paper, color:SCI.ink, fontFamily:SCI.body, border:`1px solid ${SCI.ink}` }}>
      <div style={{ height:52, borderBottom:`1px solid ${SCI.ink}`, display:'flex', alignItems:'center', padding:'0 18px', justifyContent:'space-between' }}>
        <MonoLabel>§ Confirmed</MonoLabel>
        <MonoLabel size={9} style={{color:SCI.ink3}}>№ 092,409</MonoLabel>
      </div>
      <div style={{ padding:'34px 20px 24px' }}>
        <MonoLabel>§ 00 · Receipt</MonoLabel>
        <h1 style={{ fontFamily:SCI.display, fontSize:48, lineHeight:0.9, letterSpacing:-0.8, fontWeight:500, margin:'12px 0 14px' }}>
          Payment <span style={{fontStyle:'italic'}}>received</span><span style={{color:SCI.orange}}>.</span>
        </h1>
        <div style={{ fontSize:14, lineHeight:1.55, color:SCI.ink2, marginBottom:18 }}>
          Blueprint queued. Email in about two minutes, or watch it build now.
        </div>
        <SciBtn primary size="lg" w="100%" icon="→">Watch report build</SciBtn>
      </div>
      <div style={{ padding:'18px 20px', background:SCI.tint2, borderTop:`1px solid ${SCI.ink}`, borderBottom:`1px solid ${SCI.ink}` }}>
        <MonoLabel>Report status</MonoLabel>
        <div style={{ fontFamily:SCI.display, fontSize:56, lineHeight:0.95, letterSpacing:-0.8, marginTop:6 }}>42<span style={{color:SCI.orange, fontSize:24, verticalAlign:'super'}}>%</span></div>
        <div style={{ marginTop:8, background:SCI.paper, border:`1px solid ${SCI.ink}`, padding:2, height:10 }}>
          <div style={{ width:'42%', height:'100%', background:SCI.ink }}/>
        </div>
      </div>
      <div style={{ padding:'20px', background:SCI.ink, color:SCI.paper }}>
        <MonoLabel style={{color:'rgba(243,239,228,0.5)'}}>§ Upgrade</MonoLabel>
        <div style={{ fontFamily:SCI.display, fontSize:24, lineHeight:1.1, margin:'8px 0 10px' }}>
          Inner Circle · <span style={{color:SCI.orange, fontStyle:'italic'}}>$120 more</span>
        </div>
        <div style={{ fontSize:12, lineHeight:1.5, opacity:0.85, marginBottom:12 }}>
          Chat + quarterly transits + relationship suite. Your $106.79 credits.
        </div>
        <SciBtn size="md" w="100%" icon="→" style={{background:SCI.paper, color:SCI.ink, border:`1px solid ${SCI.paper}`}}>Upgrade</SciBtn>
      </div>
      <div style={{ padding:'18px 20px', borderTop:`1px solid ${SCI.ink}` }}>
        <MonoLabel>Share</MonoLabel>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:6, marginTop:8 }}>
          {['Copy link','X','Instagram','Email'].map((p,i)=>(<SciBtn key={i} size="sm">{p}</SciBtn>))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  SciChatDesktop, SciChatMobile, SciMapDesktop, SciMapMobile,
  SciCheckoutDesktop, SciCheckoutMobile, SciConfirmDesktop, SciConfirmMobile,
});