// Amara — secondary pages
// Onboarding (5-step birth intake), Reading (long-form atlas excerpt),
// Atlas library (post-purchase), Checkout, Sign-in, Methodology page,
// Single-tradition deep-dive (Vedic Jyotish monograph).
// Reuses everything from science-hifi.jsx + amara-primitives.jsx.

// —— ONBOARDING (5 STEPS) ——————————————————————
function AmaraOnboarding({ step=3 }) {
  const steps = [
    { n:'01', t:'Name & how to address you',     k:'name' },
    { n:'02', t:'Date of birth',                  k:'dob' },
    { n:'03', t:'Time & place',                   k:'tp' },
    { n:'04', t:'A few questions, in your words', k:'q' },
    { n:'05', t:'Consent & delivery',             k:'consent' },
  ];
  const cur = steps[step-1];
  return (
    <div style={{ width:1400, background:SCI.paper, color:SCI.ink, fontFamily:SCI.body, border:`1px solid ${SCI.ink}` }}>
      <AmaraNav active="Methodology"/>
      <div style={{ display:'grid', gridTemplateColumns:'320px 1fr 380px', minHeight:780 }}>
        {/* left rail */}
        <div style={{ borderRight:`1px solid ${SCI.ink}`, padding:'40px 28px', background:SCI.tint2 }}>
          <MonoLabel>§ INTAKE</MonoLabel>
          <div style={{ fontFamily:SCI.display, fontSize:34, lineHeight:1.05, margin:'10px 0 20px', letterSpacing:-0.4 }}>
            Twelve quiet<br/>minutes.
          </div>
          <div style={{ fontSize:13, lineHeight:1.55, color:SCI.ink2, marginBottom:24 }}>
            Tell me what I need to read your chart. Anything you'd rather not share, leave blank — I'll write the atlas anyway, marking what's partial.
          </div>
          {steps.map((s,i)=>{
            const done = i+1 < step, active = i+1===step;
            return (
              <div key={i} style={{
                padding:'12px 14px', marginBottom:6, display:'flex', alignItems:'center', gap:14,
                background: active?SCI.paper:'transparent',
                border: active?`1px solid ${SCI.ink}`:`1px solid transparent`,
              }}>
                <div style={{ width:22, height:22, borderRadius:11, border:`1px solid ${SCI.ink}`,
                  background: done?SCI.ink:active?SCI.orange:'transparent',
                  color: done||active?SCI.paper:SCI.ink,
                  display:'flex', alignItems:'center', justifyContent:'center',
                  fontFamily:SCI.mono, fontSize:10, fontWeight:600
                }}>{done?'✓':s.n}</div>
                <div>
                  <MonoLabel size={9}>{s.n}</MonoLabel>
                  <div style={{ fontSize:13, lineHeight:1.2, marginTop:2 }}>{s.t}</div>
                </div>
              </div>
            );
          })}
        </div>

        {/* center form */}
        <div style={{ padding:'48px 56px', display:'flex', flexDirection:'column' }}>
          <MonoLabel>§ {cur.n} · {cur.t}</MonoLabel>
          <h1 style={{ fontFamily:SCI.display, fontSize:54, lineHeight:0.96, margin:'12px 0 18px', letterSpacing:-0.7, fontWeight:500 }}>
            Where & when, <span style={{fontStyle:'italic'}}>exactly?</span>
          </h1>
          <div style={{ fontSize:15, lineHeight:1.55, color:SCI.ink2, marginBottom:30, maxWidth:560 }}>
            Birth time matters most for Western, Vedic, and Egyptian readings — without it, I lose the houses, about a third of those signals. Place sets the latitude. If you only have a hospital and a city, that's enough.
          </div>

          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:18 }}>
            <div>
              <MonoLabel size={9} style={{marginBottom:6, display:'block'}}>BIRTH TIME (24h, local)</MonoLabel>
              <div style={{ height:64, border:`1px solid ${SCI.ink}`, padding:'0 18px', display:'flex', alignItems:'center', gap:14 }}>
                <span style={{fontFamily:SCI.display, fontSize:36}}>04 <span style={{color:SCI.orange}}>:</span> 17</span>
                <MonoLabel size={9} style={{color:SCI.ink3, marginLeft:'auto'}}>± 5 MIN OK</MonoLabel>
              </div>
              <div style={{ fontFamily:SCI.mono, fontSize:10, color:SCI.ink3, marginTop:6, letterSpacing:0.5 }}>UNCERTAIN? CHECK BIRTH CERTIFICATE OR ASK A PARENT</div>
            </div>
            <div>
              <MonoLabel size={9} style={{marginBottom:6, display:'block'}}>BIRTH PLACE</MonoLabel>
              <div style={{ height:64, border:`1px solid ${SCI.ink}`, padding:'0 18px', display:'flex', alignItems:'center', gap:10 }}>
                <span style={{fontFamily:SCI.display, fontSize:24, lineHeight:1.05}}>Lagos, Nigeria</span>
                <MonoLabel size={9} style={{color:SCI.ink3, marginLeft:'auto'}}>6.45°N · 3.40°E</MonoLabel>
              </div>
              <div style={{ fontFamily:SCI.mono, fontSize:10, color:SCI.ink3, marginTop:6, letterSpacing:0.5 }}>HOSPITAL OR DISTRICT IF YOU HAVE IT</div>
            </div>
          </div>

          <div style={{ marginTop:28, paddingTop:20, borderTop:`1px solid ${SCI.tint}` }}>
            <MonoLabel size={9} style={{marginBottom:8, display:'block'}}>HOW SURE ARE YOU OF THE TIME?</MonoLabel>
            <div style={{ display:'flex', gap:8 }}>
              {['Exact','± 5 min','± 30 min','Unknown'].map((l,i)=>(
                <div key={i} style={{
                  padding:'10px 18px', border:`1px solid ${SCI.ink}`,
                  background: i===1?SCI.ink:'transparent', color: i===1?SCI.paper:SCI.ink,
                  fontFamily:SCI.body, fontSize:13,
                }}>{l}</div>
              ))}
            </div>
          </div>

          <div style={{ marginTop:'auto', paddingTop:36, display:'flex', justifyContent:'space-between', alignItems:'center' }}>
            <SciBtn size="lg" icon="←">Back</SciBtn>
            <div style={{ fontFamily:SCI.mono, fontSize:10, color:SCI.ink3, letterSpacing:0.5 }}>STEP {step} OF 5 · ~7 MIN REMAINING</div>
            <SciBtn size="lg" primary icon="→">Continue</SciBtn>
          </div>
        </div>

        {/* right preview */}
        <div style={{ borderLeft:`1px solid ${SCI.ink}`, padding:'40px 32px', background:SCI.paper, display:'flex', flexDirection:'column' }}>
          <MonoLabel>WHAT I'LL READ</MonoLabel>
          <div style={{ fontFamily:SCI.display, fontSize:22, lineHeight:1.15, margin:'10px 0 18px', letterSpacing:-0.2 }}>
            With this much, I can read all thirteen at full depth.
          </div>
          <div style={{ borderTop:`1px solid ${SCI.tint}` }}>
            {[
              ['Modern psychology', 'after step 4', true],
              ['Western astrology', 'full chart · 12 H', true],
              ['Vedic Jyotish',     'D-1 thru D-9',     true],
              ['Chinese · 4 pillars','year, month, day, hour', true],
              ['Mayan Tzolkin',     'day-sign · tone',  true],
              ['Tibetan elemental', 'element · animal', true],
              ['Celtic tree',       'lunar tree',       true],
              ['Norse runes',       '3-rune cast',      true],
              ['Egyptian decans',   'ascendant face',   true],
              ['Yoruba Ifá',        'odu',              true],
              ['Native medicine wheel', 'direction',    true],
              ['Kabbalah',          'tree of life',     true],
              ['European folk',     'birth flower',     true],
            ].map(([n,sub,ok],i)=>(
              <div key={i} style={{ display:'flex', justifyContent:'space-between', padding:'8px 0', borderBottom:`1px solid ${SCI.tint}`, fontSize:12 }}>
                <span>{ok && <span style={{color:SCI.orange, marginRight:8, fontFamily:SCI.mono}}>✓</span>}{n}</span>
                <span style={{ fontFamily:SCI.mono, fontSize:10, color:SCI.ink3 }}>{sub}</span>
              </div>
            ))}
          </div>
          <div style={{ marginTop:'auto', padding:'18px 0 0', fontSize:12, lineHeight:1.5, color:SCI.ink2 }}>
            <MonoLabel size={9} style={{marginBottom:6, display:'block', color:SCI.orange}}>READY</MonoLabel>
            All thirteen will be readable at full depth with what you've given me.
          </div>
        </div>
      </div>
      <AmaraFooter note="INTAKE PAGE"/>
    </div>
  );
}

// —— READING (long-form atlas excerpt page) ————
function AmaraReadingPage() {
  return (
    <div style={{ width:1400, background:SCI.paper, color:SCI.ink, fontFamily:SCI.body, border:`1px solid ${SCI.ink}` }}>
      <AmaraNav active="Sample atlas"/>
      {/* meta strip */}
      <div style={{ padding:'10px 56px', borderBottom:`1px solid ${SCI.tint}`, fontFamily:SCI.mono, fontSize:10, color:SCI.ink2, display:'flex', justifyContent:'space-between' }}>
        <span>L. KOWALSKI · ATLAS · § IV OF VIII</span>
        <span>9 OF 13 TRADITIONS AGREE · CONVERGENCE 0.91</span>
        <span>WRITTEN 14.MAR.2026 · A. IDRIS</span>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'260px 1fr 320px', minHeight:1200 }}>
        {/* left: chapter index */}
        <div style={{ borderRight:`1px solid ${SCI.ink}`, padding:'36px 24px', background:SCI.tint2 }}>
          <MonoLabel>CHAPTERS · 8</MonoLabel>
          <div style={{ marginTop:18 }}>
            {[
              ['I',  'The opening', 7,   false],
              ['II', 'Self & shadow', 8, false],
              ['III','How you love', 7,  false],
              ['IV', 'The Saturn dasha', 9, true],
              ['V',  'Work & vocation', 8, false],
              ['VI', 'Three places', 7,  false],
              ['VII','The next two years', 8, false],
              ['VIII','Closing', 7,     false],
            ].map(([n,t,c,a],i)=>(
              <div key={i} style={{
                padding:'10px 12px', display:'flex', justifyContent:'space-between', alignItems:'center', gap:8,
                background: a?SCI.paper:'transparent',
                border: a?`1px solid ${SCI.ink}`:`1px solid transparent`,
                marginBottom:4,
              }}>
                <div>
                  <MonoLabel size={9}>§ {n}</MonoLabel>
                  <div style={{ fontSize:13, lineHeight:1.2, marginTop:2, fontFamily:SCI.display }}>{t}</div>
                </div>
                <span style={{ fontFamily:SCI.mono, fontSize:10, color: c>=8?SCI.orange:SCI.ink3 }}>{c}/13</span>
              </div>
            ))}
          </div>
          <div style={{ marginTop:24, paddingTop:18, borderTop:`1px solid ${SCI.tint}` }}>
            <MonoLabel>AUDIO · MY VOICE</MonoLabel>
            <div style={{ marginTop:10, padding:'12px 14px', border:`1px solid ${SCI.ink}`, display:'flex', alignItems:'center', gap:12 }}>
              <div style={{ width:32, height:32, borderRadius:16, background:SCI.ink, color:SCI.paper, display:'flex', alignItems:'center', justifyContent:'center', fontFamily:SCI.mono, fontSize:12 }}>▶</div>
              <div style={{ flex:1 }}>
                <div style={{ fontFamily:SCI.mono, fontSize:10, color:SCI.ink3 }}>04:32 / 38:21</div>
                <div style={{ height:3, background:SCI.tint, marginTop:4, position:'relative' }}>
                  <div style={{ position:'absolute', left:0, top:0, bottom:0, width:'12%', background:SCI.orange }}/>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* center: long-form */}
        <div style={{ padding:'48px 72px' }}>
          <MonoLabel>§ IV · The Saturn dasha</MonoLabel>
          <h1 style={{ fontFamily:SCI.display, fontSize:78, lineHeight:0.95, margin:'14px 0 22px', letterSpacing:-1.2, fontWeight:500 }}>
            A builder, in a<br/><span style={{fontStyle:'italic'}}>quiet decade.</span>
          </h1>

          <div style={{ display:'flex', gap:8, marginBottom:30 }}>
            <Pill dark>9 / 13 agree</Pill>
            <Pill>Saturn dasha</Pill>
            <Pill>Conscientiousness 93</Pill>
            <Pill>Earth Ox</Pill>
          </div>

          {/* drop cap */}
          <p style={{ fontSize:18, lineHeight:1.65, color:SCI.ink, margin:'0 0 22px' }}>
            <span style={{ float:'left', fontFamily:SCI.display, fontSize:96, lineHeight:0.85, padding:'4px 12px 0 0', color:SCI.orange }}>Y</span>
            ou are inside a Saturn major-period that began the same year your second Saturn return finished — the universe doubling down on the same instruction. The Big Five places your <strong>Conscientiousness at the 93rd percentile</strong>: you are, by the math, more steady than ninety-two of every hundred people who sit down to take this test. You already know this; the chart does not, in this respect, surprise you.
          </p>

          <p style={{ fontSize:17, lineHeight:1.7, color:SCI.ink2, margin:'0 0 22px' }}>
            What might surprise you is who else thought so. The Vedic chart finds Saturn exalted in the tenth house — the placement classical astrologers reserve for the lifelong worker who is paid in the slow, late, tangible kind of credit. The Chinese pillars give you an Earth Ox month beneath an Earth Ox year: the same animal twice, the same element twice, and the Ox is the one in the zodiac that already knows what work is. The Tibetan elemental reading concurs: earth doubled. The Norse cast for the question came back <em>Eihwaz · Isa · Jera</em> — the yew tree, the patient ice, the slow harvest — three runes which describe, one after another, the practice of waiting through a winter.
          </p>

          {/* pull quote */}
          <div style={{ borderLeft:`3px solid ${SCI.orange}`, padding:'8px 0 8px 28px', margin:'30px 0' }}>
            <div style={{ fontFamily:SCI.display, fontSize:34, lineHeight:1.15, letterSpacing:-0.3, color:SCI.ink }}>
              Nine of the thirteen traditions, asked separately and on different days, returned the same single image: a builder, in a quiet decade.
            </div>
          </div>

          <p style={{ fontSize:17, lineHeight:1.7, color:SCI.ink2, margin:'0 0 22px' }}>
            The four traditions that did <em>not</em> agree are interesting in the way disagreements always are. Yoruba Ifá gave you Ọ̀wọ́nrín-Méjì, a sign about reciprocity and the keeping of a promise, which speaks not to the work itself but to whom the work is owed. Mayan Tzolkin gave Eb', the road, which is movement when the rest say sit still. The Mediterranean folk-calendar puts your birthday under the rosemary, which is not unrelated to memory and to keeping a hearth — but rosemary is also a wedding herb, which complicates the quiet decade somewhat. Kabbalah placed you on the path between Tiferet and Yesod, which is, of all paths, the one most concerned with foundations becoming visible.
          </p>

          <p style={{ fontSize:17, lineHeight:1.7, color:SCI.ink2, margin:'0 0 22px' }}>
            I have written elsewhere about how a strong convergence is rarely the end of a reading. It is, more often, the part of the reading you can take for granted — the bedrock the rest of the chart is built on top of. So: take the bedrock. You are a builder. You are inside a quiet decade. The chart, almost in unanimity, is telling you to build something that takes ten years.
          </p>

          {/* footnotes panel */}
          <div style={{ marginTop:36, padding:'22px 24px', background:SCI.tint2, border:`1px solid ${SCI.tint}` }}>
            <MonoLabel>FOOTNOTES · § IV</MonoLabel>
            <div style={{ marginTop:10, fontSize:13, lineHeight:1.6, color:SCI.ink2 }}>
              <div><sup>1</sup> Big Five score from your IPIP-NEO answers, normed against the 184k-respondent sample (Goldberg, 2006). 93rd percentile means 93 out of 100.</div>
              <div style={{marginTop:6}}><sup>2</sup> Saturn major-period (mahādaśā) computed from your moon's nakshatra (Pushya, 4° pada).</div>
              <div style={{marginTop:6}}><sup>3</sup> Norse cast: 3-rune past-present-future, drawn 18 March 2026 at 04:40 GMT.</div>
            </div>
          </div>

          <div style={{ marginTop:32, display:'flex', justifyContent:'space-between', borderTop:`1px solid ${SCI.tint}`, paddingTop:18 }}>
            <SciBtn icon="←">§ III · How you love</SciBtn>
            <SciBtn primary icon="→">§ V · Work & vocation</SciBtn>
          </div>
        </div>

        {/* right: convergence panel */}
        <div style={{ borderLeft:`1px solid ${SCI.ink}`, padding:'36px 24px', background:SCI.paper, display:'flex', flexDirection:'column' }}>
          <MonoLabel>§ IV · CONVERGENCE</MonoLabel>
          <div style={{ fontFamily:SCI.display, fontSize:64, lineHeight:0.95, margin:'10px 0 4px', letterSpacing:-1 }}>
            <span style={{color:SCI.orange}}>9</span><span style={{color:SCI.ink3, fontSize:38}}>/13</span>
          </div>
          <MonoLabel size={9} style={{color:SCI.ink3}}>traditions agreed · 0.91 score</MonoLabel>

          <div style={{ marginTop:24 }}>
            <MonoLabel size={9} style={{marginBottom:8, display:'block'}}>WHO AGREED</MonoLabel>
            {[
              ['Big Five',  '93rd %ile Conscientiousness', true],
              ['MBTI',      'Si · Te (steady · structural)', true],
              ['Enneagram', '1 (the perfectionist)',         true],
              ['Western',   'Saturn return finished 2024',   true],
              ['Vedic',     'Saturn dasha · 10th house',     true],
              ['Chinese',   'Earth Ox month, Earth Ox year', true],
              ['Tibetan',   'Earth element doubled',         true],
              ['Norse',     'Eihwaz · Isa · Jera',           true],
              ['Egyptian',  'Anuket decan · slow water',     true],
              ['Yoruba',    'Ọ̀wọ́nrín-Méjì · reciprocity',   false],
              ['Mayan',     'Eb\' · the road',                false],
              ['Kabbalah',  'path Tiferet → Yesod',          false],
              ['Folk',      'rosemary · hearth & wedding',   false],
            ].map(([n,note,ok],i)=>(
              <div key={i} style={{ display:'grid', gridTemplateColumns:'18px 78px 1fr', gap:8, padding:'7px 0', borderBottom:`1px solid ${SCI.tint}`, fontSize:11 }}>
                <span style={{fontFamily:SCI.mono, color: ok?SCI.orange:SCI.ink3}}>{ok?'✓':'·'}</span>
                <span style={{ fontWeight:500 }}>{n}</span>
                <span style={{ color:SCI.ink2 }}>{note}</span>
              </div>
            ))}
          </div>

          <div style={{ marginTop:24, paddingTop:18, borderTop:`1px solid ${SCI.tint}` }}>
            <MonoLabel size={9} style={{marginBottom:8, display:'block'}}>CONVERGENCE TREND · CHAPTER</MonoLabel>
            <Sparkline data={[0.42,0.51,0.62,0.68,0.74,0.81,0.86,0.91]} color={SCI.orange} height={50}/>
          </div>
        </div>
      </div>
      <AmaraFooter note="ATLAS · § IV"/>
    </div>
  );
}

// —— ATLAS LIBRARY (post-purchase) ——————————————
function AmaraAtlas() {
  return (
    <div style={{ width:1400, background:SCI.paper, color:SCI.ink, fontFamily:SCI.body, border:`1px solid ${SCI.ink}` }}>
      <AmaraNav active="Sample atlas"/>
      {/* hero header */}
      <div style={{ padding:'40px 56px 28px', borderBottom:`1px solid ${SCI.ink}`, display:'grid', gridTemplateColumns:'1fr 380px', gap:40, alignItems:'end' }}>
        <div>
          <MonoLabel>§ ATLAS · L. KOWALSKI</MonoLabel>
          <h1 style={{ fontFamily:SCI.display, fontSize:72, lineHeight:0.95, margin:'12px 0 0', letterSpacing:-1.2, fontWeight:500 }}>
            Your atlas, <span style={{fontStyle:'italic'}}>complete.</span>
          </h1>
          <div style={{ marginTop:12, fontSize:14, lineHeight:1.55, color:SCI.ink2, maxWidth:600 }}>
            All thirteen traditions, all thirty-eight readings. Eight chapters, 8,142 words, 38 minutes of audio. Delivered seven days after intake. Yours, kept on your account, exportable any time.
          </div>
        </div>
        <div style={{ padding:'20px 24px', border:`1px solid ${SCI.ink}`, background:SCI.tint2 }}>
          <MonoLabel>DELIVERED</MonoLabel>
          <div style={{ fontFamily:SCI.display, fontSize:30, lineHeight:1, margin:'4px 0' }}>14 · MAR · 2026</div>
          <div style={{ fontFamily:SCI.mono, fontSize:10, color:SCI.ink3, letterSpacing:0.5 }}>BY A. IDRIS · 7 DAYS AFTER INTAKE</div>
          <div style={{ display:'flex', gap:8, marginTop:14 }}>
            <SciBtn size="sm" primary icon="↓">Export PDF</SciBtn>
            <SciBtn size="sm" icon="♪">Audio</SciBtn>
          </div>
        </div>
      </div>

      {/* chapter cards */}
      <div style={{ padding:'40px 56px', borderBottom:`1px solid ${SCI.ink}` }}>
        <MonoLabel>§ CHAPTERS · 8 · WHERE THE 13 AGREED</MonoLabel>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:0, marginTop:20, border:`1px solid ${SCI.ink}` }}>
          {[
            ['I','The opening',7,'How the chart introduces you'],
            ['II','Self & shadow',8,'Where you are honest with yourself'],
            ['III','How you love',7,'Attachment, friction, repair'],
            ['IV','The Saturn dasha',9,'A builder, in a quiet decade'],
            ['V','Work & vocation',8,'What ten of thirteen call your work'],
            ['VI','Three places',7,'Cities the chart wants you in'],
            ['VII','The next two years',8,'What is shifting · 2026 → 2028'],
            ['VIII','Closing',7,'What you can take for granted'],
          ].map(([n,t,c,sub],i)=>(
            <div key={i} style={{
              padding:'22px 22px', minHeight:200,
              borderRight: (i%4)<3?`1px solid ${SCI.ink}`:'none',
              borderBottom: i<4?`1px solid ${SCI.ink}`:'none',
              display:'flex', flexDirection:'column', gap:10,
              background: c>=8?SCI.tint2:SCI.paper,
            }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
                <div style={{ fontFamily:SCI.display, fontSize:38, lineHeight:1, color: c===9?SCI.orange:SCI.ink }}>§ {n}</div>
                <MonoLabel size={9} style={{color: c>=8?SCI.orange:SCI.ink3}}>{c}/13</MonoLabel>
              </div>
              <div style={{ fontFamily:SCI.display, fontSize:22, lineHeight:1.1 }}>{t}</div>
              <div style={{ fontSize:13, lineHeight:1.45, color:SCI.ink2 }}>{sub}</div>
              <div style={{ marginTop:'auto', fontFamily:SCI.mono, fontSize:10, color:SCI.ink3, letterSpacing:0.5 }}>READ →</div>
            </div>
          ))}
        </div>
      </div>

      {/* 38 readings index */}
      <div style={{ padding:'40px 56px', borderBottom:`1px solid ${SCI.ink}`, background:SCI.tint2 }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'end' }}>
          <div>
            <MonoLabel>§ ALL 38 READINGS · INDEX</MonoLabel>
            <div style={{ fontFamily:SCI.display, fontSize:36, lineHeight:1, margin:'8px 0 0', letterSpacing:-0.5 }}>The full record.</div>
          </div>
          <MonoLabel size={10} style={{color:SCI.ink3}}>ALL TIMESTAMPED · ALL EXPORTABLE</MonoLabel>
        </div>

        <div style={{ display:'grid', gridTemplateColumns:'repeat(13, 1fr)', gap:0, marginTop:24, border:`1px solid ${SCI.ink}`, background:SCI.paper }}>
          {TRADITION_CELLS.map((t,i)=>(
            <div key={i} style={{ padding:'14px 10px 12px', borderRight: i<12?`1px solid ${SCI.tint}`:'none', display:'flex', flexDirection:'column', gap:8, minHeight:200 }}>
              <div style={{ width:28 }}><TraditionGlyph kind={t.k}/></div>
              <div style={{ fontFamily:SCI.display, fontSize:13, lineHeight:1.1 }}>{t.n}</div>
              <div style={{ marginTop:'auto', borderTop:`1px solid ${SCI.tint}`, paddingTop:6 }}>
                {Array.from({length:t.count}).map((_,j)=>(
                  <div key={j} style={{ fontFamily:SCI.mono, fontSize:9, color:SCI.ink2, padding:'2px 0', letterSpacing:0.3 }}>
                    {String(i+1).padStart(2,'0')}.{String(j+1).padStart(2,'0')}
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop:14, fontFamily:SCI.mono, fontSize:10, color:SCI.ink3, letterSpacing:0.5, textAlign:'right' }}>
          TOTAL · 38 READINGS · 1 ATLAS
        </div>
      </div>

      <AmaraFooter note="LIBRARY · UNIVERSAL ATLAS"/>
    </div>
  );
}

// —— CHECKOUT —————————————————————————————————
function AmaraCheckout() {
  return (
    <div style={{ width:1400, background:SCI.paper, color:SCI.ink, fontFamily:SCI.body, border:`1px solid ${SCI.ink}` }}>
      <AmaraNav active="Pricing"/>
      <div style={{ padding:'10px 56px', borderBottom:`1px solid ${SCI.tint}`, fontFamily:SCI.mono, fontSize:10, color:SCI.ink2, display:'flex', justifyContent:'space-between' }}>
        <span>§ CHECKOUT · 1 OF 1</span>
        <span>SECURE · STRIPE · NO STORED CARDS</span>
        <span>26.APR.2026</span>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'1.1fr 1fr', minHeight:780 }}>
        <div style={{ padding:'48px 56px', borderRight:`1px solid ${SCI.ink}` }}>
          <MonoLabel>§ PAYMENT</MonoLabel>
          <h1 style={{ fontFamily:SCI.display, fontSize:54, lineHeight:0.96, margin:'12px 0 24px', letterSpacing:-0.7, fontWeight:500 }}>
            One payment, <span style={{fontStyle:'italic'}}>once.</span>
          </h1>

          <MonoLabel size={9} style={{display:'block', marginBottom:6}}>EMAIL FOR DELIVERY</MonoLabel>
          <div style={{ height:54, border:`1px solid ${SCI.ink}`, padding:'0 18px', display:'flex', alignItems:'center', marginBottom:18 }}>
            <span style={{fontFamily:SCI.mono, fontSize:14}}>l.kowalski@arch.studio</span>
          </div>

          <MonoLabel size={9} style={{display:'block', marginBottom:6}}>CARD NUMBER</MonoLabel>
          <div style={{ height:54, border:`1px solid ${SCI.ink}`, padding:'0 18px', display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:18 }}>
            <span style={{fontFamily:SCI.mono, fontSize:14, letterSpacing:1}}>4242 · 4242 · 4242 · 4242</span>
            <span style={{fontFamily:SCI.display, fontSize:18, color:SCI.ink3}}>VISA</span>
          </div>

          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:14, marginBottom:24 }}>
            {[['EXPIRES','11 / 28'],['CVC','· · ·'],['ZIP','11211']].map(([k,v],i)=>(
              <div key={i}>
                <MonoLabel size={9} style={{display:'block', marginBottom:6}}>{k}</MonoLabel>
                <div style={{ height:54, border:`1px solid ${SCI.ink}`, padding:'0 18px', display:'flex', alignItems:'center' }}>
                  <span style={{fontFamily:SCI.mono, fontSize:14, letterSpacing:1}}>{v}</span>
                </div>
              </div>
            ))}
          </div>

          <div style={{ padding:'18px 0', borderTop:`1px solid ${SCI.tint}`, borderBottom:`1px solid ${SCI.tint}`, marginBottom:24 }}>
            <div style={{ display:'flex', alignItems:'center', gap:12 }}>
              <div style={{ width:18, height:18, border:`1.5px solid ${SCI.ink}`, background:SCI.ink, display:'flex', alignItems:'center', justifyContent:'center', color:SCI.paper, fontSize:10 }}>✓</div>
              <span style={{ fontSize:13 }}>I understand my atlas takes about a week. Amara reads by hand.</span>
            </div>
            <div style={{ display:'flex', alignItems:'center', gap:12, marginTop:10 }}>
              <div style={{ width:18, height:18, border:`1.5px solid ${SCI.ink}`, background:SCI.ink, display:'flex', alignItems:'center', justifyContent:'center', color:SCI.paper, fontSize:10 }}>✓</div>
              <span style={{ fontSize:13 }}>I have read the privacy notice and may delete my data anytime.</span>
            </div>
          </div>

          <SciBtn primary size="lg" w="100%" icon="→">Pay $129 · begin atlas</SciBtn>
          <div style={{ fontFamily:SCI.mono, fontSize:10, color:SCI.ink3, letterSpacing:0.5, marginTop:12, textAlign:'center' }}>
            FULL REFUND IF AMARA HASN'T STARTED YET · 7-DAY DELIVERY
          </div>
        </div>

        <div style={{ padding:'48px 56px', background:SCI.tint2 }}>
          <MonoLabel>§ ORDER</MonoLabel>
          <div style={{ fontFamily:SCI.display, fontSize:34, lineHeight:1, margin:'12px 0 18px', letterSpacing:-0.4 }}>The Universal Atlas</div>
          <div style={{ fontSize:13, lineHeight:1.6, color:SCI.ink2, marginBottom:22 }}>
            All thirteen traditions, all thirty-eight readings, the convergence map, the long-form atlas — only the chapters where the thirteen agreed. Audio in my voice.
          </div>
          <div style={{ borderTop:`1px solid ${SCI.ink}` }}>
            {[
              ['Universal Atlas',           '$129.00'],
              ['Audio (38 min · my voice)', 'Included'],
              ['Convergence map',           'Included'],
              ['Lifetime PDF + edits',      'Included'],
              ['Sales tax (NY)',            '$11.46'],
            ].map(([k,v],i)=>(
              <div key={i} style={{ display:'flex', justifyContent:'space-between', padding:'12px 0', borderBottom:`1px solid ${SCI.tint}` }}>
                <span style={{ fontSize:13 }}>{k}</span>
                <span style={{ fontFamily:SCI.mono, fontSize:13 }}>{v}</span>
              </div>
            ))}
            <div style={{ display:'flex', justifyContent:'space-between', padding:'18px 0 6px', alignItems:'baseline' }}>
              <span style={{ fontFamily:SCI.display, fontSize:22 }}>Total</span>
              <span style={{ fontFamily:SCI.display, fontSize:42, letterSpacing:-0.5 }}>$140.46</span>
            </div>
            <div style={{ fontFamily:SCI.mono, fontSize:10, color:SCI.ink3, letterSpacing:0.5, textAlign:'right' }}>USD · CHARGED ONCE</div>
          </div>

          <div style={{ marginTop:32, padding:'18px 20px', background:SCI.paper, border:`1px solid ${SCI.ink}` }}>
            <MonoLabel>WHEN YOU'LL HAVE IT</MonoLabel>
            <div style={{ fontFamily:SCI.display, fontSize:24, lineHeight:1.1, margin:'6px 0' }}>~ 03 · MAY · 2026</div>
            <div style={{ fontFamily:SCI.mono, fontSize:10, color:SCI.ink3, letterSpacing:0.5 }}>SEVEN DAYS · DELIVERED BY EMAIL</div>
          </div>
        </div>
      </div>
      <AmaraFooter note="CHECKOUT"/>
    </div>
  );
}

// —— SIGN-IN ———————————————————————————————
function AmaraSignIn() {
  return (
    <div style={{ width:1400, background:SCI.paper, color:SCI.ink, fontFamily:SCI.body, border:`1px solid ${SCI.ink}` }}>
      <AmaraNav active="Pricing"/>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', minHeight:760 }}>
        <div style={{ padding:'72px 72px 56px', borderRight:`1px solid ${SCI.ink}`, display:'flex', flexDirection:'column', justifyContent:'center' }}>
          <MonoLabel>§ SIGN IN</MonoLabel>
          <h1 style={{ fontFamily:SCI.display, fontSize:62, lineHeight:0.95, margin:'12px 0 18px', letterSpacing:-0.9, fontWeight:500 }}>
            Welcome back<span style={{color:SCI.orange}}>.</span>
          </h1>
          <div style={{ fontSize:15, lineHeight:1.55, color:SCI.ink2, marginBottom:32, maxWidth:480 }}>
            Your atlas, your audio, your reading history. We don't keep birth data on the server unless you tell us to — sign-in is by email link only.
          </div>

          <MonoLabel size={9} style={{display:'block', marginBottom:6}}>EMAIL</MonoLabel>
          <div style={{ height:56, border:`1px solid ${SCI.ink}`, padding:'0 18px', display:'flex', alignItems:'center', marginBottom:18 }}>
            <span style={{fontFamily:SCI.mono, fontSize:14, color:SCI.ink3}}>your@email</span>
          </div>
          <SciBtn primary size="lg" w="100%" icon="→">Send sign-in link</SciBtn>
          <div style={{ fontFamily:SCI.mono, fontSize:10, color:SCI.ink3, letterSpacing:0.5, marginTop:14, textAlign:'center' }}>
            NO PASSWORD · ONE-TIME LINK · EXPIRES IN 15 MIN
          </div>

          <div style={{ marginTop:38, paddingTop:22, borderTop:`1px solid ${SCI.tint}` }}>
            <MonoLabel size={9} style={{display:'block', marginBottom:8}}>NEW HERE?</MonoLabel>
            <div style={{ fontSize:13, lineHeight:1.5, color:SCI.ink2 }}>
              You can read methodology, sample chapters, and the FAQ without an account. An account is created the moment you place an order.
            </div>
            <div style={{ marginTop:10 }}>
              <SciBtn icon="→">Begin intake instead</SciBtn>
            </div>
          </div>
        </div>

        <div style={{ padding:'72px 72px', background:SCI.ink, color:SCI.paper, display:'flex', flexDirection:'column', justifyContent:'center' }}>
          <MonoLabel style={{color:'rgba(243,239,228,0.5)'}}>§ A NOTE FROM AMARA</MonoLabel>
          <blockquote style={{
            fontFamily:SCI.display, fontSize:38, lineHeight:1.18, letterSpacing:-0.3,
            margin:'18px 0 28px', maxWidth:560,
          }}>
            “If you've come back to your atlas, please come back slowly. The chapters were written to be re-read, not skimmed. <span style={{color:SCI.orange, fontStyle:'italic'}}>The audio is best in headphones, at night.</span>”
          </blockquote>
          <div style={{ display:'flex', alignItems:'center', gap:14, fontFamily:SCI.mono, fontSize:11, letterSpacing:0.5, color:'rgba(243,239,228,0.7)' }}>
            <div style={{width:42,height:42,borderRadius:24,background:'rgba(243,239,228,0.1)',border:'1px solid rgba(243,239,228,0.3)', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:SCI.display, fontSize:18, fontStyle:'italic', color:SCI.paper}}>A</div>
            <div>
              <div>AMARA IDRIS</div>
              <div style={{fontSize:10,opacity:0.6}}>SOLE READER · SINCE 2017</div>
            </div>
          </div>
        </div>
      </div>
      <AmaraFooter note="SIGN IN"/>
    </div>
  );
}

// —— METHODOLOGY (long page) —————————————————
function AmaraMethodology() {
  return (
    <div style={{ width:1400, background:SCI.paper, color:SCI.ink, fontFamily:SCI.body, border:`1px solid ${SCI.ink}` }}>
      <AmaraNav active="Methodology"/>
      <div style={{ padding:'10px 56px', borderBottom:`1px solid ${SCI.tint}`, fontFamily:SCI.mono, fontSize:10, color:SCI.ink2, display:'flex', justifyContent:'space-between' }}>
        <span>§ METHODOLOGY · A.IDRIS · v.13</span>
        <span>OPEN · CITED · UPDATED 11.JAN.2026</span>
        <span>~ 14 MIN READ</span>
      </div>

      {/* hero */}
      <div style={{ padding:'56px 56px 36px', borderBottom:`1px solid ${SCI.ink}`, display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:48 }}>
        <div>
          <MonoLabel>§ 00 · WHAT THIS DOCUMENT IS</MonoLabel>
          <h1 style={{ fontFamily:SCI.display, fontSize:78, lineHeight:0.95, margin:'14px 0 18px', letterSpacing:-1.1, fontWeight:500 }}>
            How I read,<br/><span style={{fontStyle:'italic'}}>and where I disagree with myself.</span>
          </h1>
          <div style={{ fontSize:16, lineHeight:1.65, color:SCI.ink2 }}>
            This is the working methodology behind every atlas I write. It is updated when I change my mind — I publish the diff. Read it before you order, or don't; it is here either way.
          </div>
        </div>
        <div style={{ padding:'24px 28px', background:SCI.tint2, border:`1px solid ${SCI.ink}` }}>
          <MonoLabel>CONTENTS</MonoLabel>
          <div style={{ marginTop:14 }}>
            {[
              ['§ 01','The thirteen, by category'],
              ['§ 02','How a reading is run'],
              ['§ 03','How convergence is computed'],
              ['§ 04','What I will not write'],
              ['§ 05','Source list'],
              ['§ 06','Changelog'],
            ].map(([n,t],i)=>(
              <div key={i} style={{ display:'grid', gridTemplateColumns:'56px 1fr', gap:10, padding:'8px 0', borderBottom:`1px solid ${SCI.tint}`, fontSize:13 }}>
                <span style={{fontFamily:SCI.mono, fontSize:11, color:SCI.ink3}}>{n}</span>
                <span>{t}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* § 01 categories */}
      <div style={{ padding:'48px 56px', borderBottom:`1px solid ${SCI.ink}` }}>
        <MonoLabel>§ 01 · The thirteen, by category</MonoLabel>
        <h2 style={{ fontFamily:SCI.display, fontSize:42, lineHeight:1, margin:'10px 0 24px', letterSpacing:-0.5, fontWeight:500 }}>Six categories. Different weights. Honest about it.</h2>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(6, 1fr)', gap:0, border:`1px solid ${SCI.ink}` }}>
          {[
            ['Empirical',   'Big Five · MBTI · Enneagram',            'High statistical weight'],
            ['Archetypal',  'Western · Vedic',                         'Symbolic, structural'],
            ['Calendrical', 'Chinese · Mayan · Egyptian',              'Time-based, cyclic'],
            ['Esoteric',    'Tibetan · Kabbalah',                      'Inner-tradition'],
            ['Oral',        'Yoruba Ifá · Native medicine wheel',      'Living lineages'],
            ['Oracular',    'Norse runes · Celtic · Folk',             'Drawn-on-the-day'],
          ].map(([cat,which,w],i)=>(
            <div key={i} style={{ padding:'18px 18px 22px', borderRight: i<5?`1px solid ${SCI.ink}`:'none', display:'flex', flexDirection:'column', gap:10, minHeight:200 }}>
              <MonoLabel size={9} style={{color:SCI.orange}}>0{i+1}</MonoLabel>
              <div style={{ fontFamily:SCI.display, fontSize:22, lineHeight:1.05 }}>{cat}</div>
              <div style={{ fontSize:13, lineHeight:1.4, color:SCI.ink2, flex:1 }}>{which}</div>
              <MonoLabel size={9} style={{color:SCI.ink3}}>{w}</MonoLabel>
            </div>
          ))}
        </div>
      </div>

      {/* § 02 reading run */}
      <div style={{ padding:'48px 56px', borderBottom:`1px solid ${SCI.ink}`, background:SCI.tint2 }}>
        <MonoLabel>§ 02 · How a reading is run</MonoLabel>
        <h2 style={{ fontFamily:SCI.display, fontSize:42, lineHeight:1, margin:'10px 0 18px', letterSpacing:-0.5, fontWeight:500 }}>Three quiet hours, one direction at a time.</h2>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:0, border:`1px solid ${SCI.ink}`, background:SCI.paper }}>
          {[
            ['00:00','Calm down · open intake · re-read your words',],
            ['00:30','Run all 13 traditions, in fixed order, in one sitting',],
            ['02:00','Step away · note the convergences · sleep on it',],
            ['02:30','Write the atlas · graphite first, ink later',],
          ].map(([t,b],i)=>(
            <div key={i} style={{ padding:'22px 22px', borderRight: i<3?`1px solid ${SCI.ink}`:'none', display:'flex', flexDirection:'column', gap:10, minHeight:170 }}>
              <div style={{ fontFamily:SCI.display, fontSize:32, color: i===2?SCI.orange:SCI.ink, letterSpacing:-0.4 }}>{t}</div>
              <div style={{ fontSize:13.5, lineHeight:1.5, color:SCI.ink2 }}>{b}</div>
            </div>
          ))}
        </div>
      </div>

      {/* § 03 convergence math */}
      <div style={{ padding:'48px 56px', borderBottom:`1px solid ${SCI.ink}` }}>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:48 }}>
          <div>
            <MonoLabel>§ 03 · Convergence</MonoLabel>
            <h2 style={{ fontFamily:SCI.display, fontSize:42, lineHeight:1, margin:'10px 0 18px', letterSpacing:-0.5, fontWeight:500 }}>The math is open.</h2>
            <div style={{ fontSize:14, lineHeight:1.65, color:SCI.ink2, marginBottom:18 }}>
              For each claim a tradition makes, I count how many of the other twelve, read independently, return something I judge equivalent. The judgement is mine. The counting is the math. The chapters in your atlas are only the claims with a count of <strong>seven or higher</strong>.
            </div>
            <div style={{ padding:'20px 24px', background:SCI.ink, color:SCI.paper, fontFamily:SCI.mono, fontSize:13, lineHeight:1.7 }}>
              c(claim) = | {`{`} t ∈ T-{`{`}t₀{`}`} : t ⊨ claim {`}`} |<br/>
              chapter ⇐ c(claim) ≥ <span style={{color:SCI.orange}}>7</span>
            </div>
          </div>
          <div>
            <MonoLabel>SAMPLE · 13 × 13</MonoLabel>
            <div style={{ marginTop:14 }}><ConvergenceMatrix13/></div>
          </div>
        </div>
      </div>

      {/* § 04 will not write */}
      <div style={{ padding:'48px 56px', borderBottom:`1px solid ${SCI.ink}`, background:SCI.ink, color:SCI.paper }}>
        <MonoLabel style={{color:'rgba(243,239,228,0.55)'}}>§ 04 · WHAT I WILL NOT WRITE</MonoLabel>
        <h2 style={{ fontFamily:SCI.display, fontSize:48, lineHeight:1, margin:'10px 0 24px', letterSpacing:-0.5, fontWeight:500 }}>Five lines I do not cross.</h2>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap:0, borderTop:'1px solid rgba(243,239,228,0.2)' }}>
          {[
            ['Specific death dates','I read longevity in tendencies, not dates.'],
            ['Medical predictions','Bodies are not chart objects.'],
            ['Whether to leave a person','You will know. The chart only confirms.'],
            ['Anything I cannot footnote','If I cannot cite it, it does not go in the atlas.'],
            ['Anyone else\'s chart','I read only the person who hired me.'],
          ].map(([t,b],i)=>(
            <div key={i} style={{ padding:'22px 22px 28px', borderRight: i<4?'1px solid rgba(243,239,228,0.2)':'none', minHeight:180 }}>
              <div style={{ fontFamily:SCI.display, fontSize:22, lineHeight:1.15, color:SCI.orange, marginBottom:10 }}>—</div>
              <div style={{ fontFamily:SCI.display, fontSize:20, lineHeight:1.15, marginBottom:8 }}>{t}</div>
              <div style={{ fontSize:13, lineHeight:1.5, opacity:0.78 }}>{b}</div>
            </div>
          ))}
        </div>
      </div>

      <AmaraFooter note="METHODOLOGY · v.13"/>
    </div>
  );
}

// —— VEDIC JYOTISH MONOGRAPH (single-tradition deep-dive) ——
function AmaraVedicMonograph() {
  return (
    <div style={{ width:1400, background:SCI.paper, color:SCI.ink, fontFamily:SCI.body, border:`1px solid ${SCI.ink}` }}>
      <AmaraNav active="Traditions"/>
      <div style={{ padding:'10px 56px', borderBottom:`1px solid ${SCI.tint}`, fontFamily:SCI.mono, fontSize:10, color:SCI.ink2, display:'flex', justifyContent:'space-between' }}>
        <span>§ TRADITION · 03 / 13</span>
        <span>VEDIC JYOTISH · ARCHETYPAL · 5 READINGS</span>
        <span>READ TIME ~ 9 MIN</span>
      </div>

      {/* hero */}
      <div style={{ padding:'56px 56px 36px', borderBottom:`1px solid ${SCI.ink}`, display:'grid', gridTemplateColumns:'1fr 1fr', gap:56, alignItems:'center' }}>
        <div>
          <MonoLabel>§ 03 / 13 · Tradition</MonoLabel>
          <h1 style={{ fontFamily:SCI.display, fontSize:96, lineHeight:0.92, margin:'14px 0 14px', letterSpacing:-2, fontWeight:500 }}>
            Vedic <span style={{fontStyle:'italic'}}>Jyotish</span><span style={{color:SCI.orange}}>.</span>
          </h1>
          <div style={{ fontSize:17, lineHeight:1.6, color:SCI.ink2, marginBottom:22 }}>
            The Indian sidereal-zodiac tradition I learned first and still trust most for the long arc of a life. Jyotish, the science of light. Five readings: D-1 birth chart, D-9 marriage chart, vimśottarī daśā, nakṣatra of moon, and yogas.
          </div>
          <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
            <Pill dark>5 readings</Pill>
            <Pill>Archetypal</Pill>
            <Pill>Sidereal zodiac</Pill>
            <Pill>2,000+ yrs</Pill>
          </div>
        </div>
        <div style={{ display:'flex', justifyContent:'center' }}>
          <div style={{ width:380 }}><TraditionGlyph kind="vedic"/></div>
        </div>
      </div>

      {/* the 5 readings */}
      <div style={{ padding:'48px 56px', borderBottom:`1px solid ${SCI.ink}`, background:SCI.tint2 }}>
        <MonoLabel>§ THE FIVE READINGS</MonoLabel>
        <h2 style={{ fontFamily:SCI.display, fontSize:42, lineHeight:1, margin:'10px 0 24px', letterSpacing:-0.5, fontWeight:500 }}>Read in this order, every time.</h2>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(5,1fr)', gap:0, border:`1px solid ${SCI.ink}`, background:SCI.paper }}>
          {[
            ['D-1','Rāśi chart',   'The birth chart proper · houses · lords'],
            ['D-9','Navāṃśa',      'The marriage / dharma chart · finer detail'],
            ['Daśā','Vimśottarī',  'Major-period schedule · 120 yrs · sequenced'],
            ['Nak.','Nakṣatra',    '27 lunar mansions · the moon\'s neighborhood'],
            ['Yogas','Combinations','Specific planet pairings the tradition names'],
          ].map(([k,t,b],i)=>(
            <div key={i} style={{ padding:'22px 22px', borderRight: i<4?`1px solid ${SCI.ink}`:'none', minHeight:200, display:'flex', flexDirection:'column', gap:10 }}>
              <MonoLabel size={9} style={{color: i===2?SCI.orange:SCI.ink3}}>READING 0{i+1}</MonoLabel>
              <div style={{ fontFamily:SCI.display, fontSize:36, lineHeight:1, color: i===2?SCI.orange:SCI.ink, letterSpacing:-0.5 }}>{k}</div>
              <div style={{ fontFamily:SCI.display, fontSize:18, lineHeight:1.1 }}>{t}</div>
              <div style={{ fontSize:12.5, lineHeight:1.5, color:SCI.ink2 }}>{b}</div>
            </div>
          ))}
        </div>
      </div>

      {/* sample chart breakdown */}
      <div style={{ padding:'48px 56px', borderBottom:`1px solid ${SCI.ink}`, display:'grid', gridTemplateColumns:'1fr 1fr', gap:40 }}>
        <div>
          <MonoLabel>§ SAMPLE READING · L. KOWALSKI</MonoLabel>
          <h2 style={{ fontFamily:SCI.display, fontSize:38, lineHeight:1.05, margin:'10px 0 18px', letterSpacing:-0.4, fontWeight:500 }}>Saturn, exalted in the tenth.</h2>
          <p style={{ fontSize:16, lineHeight:1.7, color:SCI.ink2, margin:'0 0 16px' }}>
            The native's lagna is Cancer; the moon sits in Pushya, fourth pāda — a nakṣatra ruled by Saturn. Saturn itself is exalted in Libra, occupying the tenth house from lagna and the seventh from the moon. This is the configuration the classical tradition calls <em>Śaśa Yoga</em>: a slow, late, monumental kind of work-life.
          </p>
          <p style={{ fontSize:15, lineHeight:1.7, color:SCI.ink2, margin:'0 0 16px' }}>
            The current daśā: <strong>Saturn-Mercury</strong>, running until February 2027. Saturn-Mercury is the daśā of writing things down — contracts, blueprints, treatises. Mercury rules the third house from lagna here, which is the house of effort and crafted things. Conscientiousness 93rd %ile, MBTI Si-Te, Big Five — the empirical traditions arrive at the same word: <em>steady</em>.
          </p>
          <p style={{ fontSize:15, lineHeight:1.7, color:SCI.ink2, margin:'0 0 0' }}>
            Among the thirteen, Vedic agreed with: Big Five (steadiness), MBTI (Si dominance), Western (Saturn return), Chinese (Earth Ox), Tibetan (earth doubled), Norse (Eihwaz · Isa · Jera). Six of twelve. Combined with the empirical layer: nine of thirteen.
          </p>
        </div>
        <div>
          <MonoLabel>§ NORTH-INDIAN CHART · D-1</MonoLabel>
          <div style={{ marginTop:14, padding:'24px 24px', border:`1px solid ${SCI.ink}`, background:SCI.tint2 }}>
            <svg viewBox="0 0 300 300" style={{ width:'100%', display:'block' }}>
              <rect x="20" y="20" width="260" height="260" fill={SCI.paper} stroke={SCI.ink} strokeWidth="1.4"/>
              <line x1="20" y1="20" x2="280" y2="280" stroke={SCI.ink}/>
              <line x1="280" y1="20" x2="20" y2="280" stroke={SCI.ink}/>
              <line x1="150" y1="20" x2="20" y2="150" stroke={SCI.ink}/>
              <line x1="150" y1="20" x2="280" y2="150" stroke={SCI.ink}/>
              <line x1="150" y1="280" x2="20" y2="150" stroke={SCI.ink}/>
              <line x1="150" y1="280" x2="280" y2="150" stroke={SCI.ink}/>
              {/* labels */}
              <text x="150" y="50" fontFamily={SCI.mono} fontSize="10" textAnchor="middle" fill={SCI.ink2}>I · Cn</text>
              <text x="80" y="80" fontFamily={SCI.mono} fontSize="10" textAnchor="middle" fill={SCI.ink2}>XII</text>
              <text x="220" y="80" fontFamily={SCI.mono} fontSize="10" textAnchor="middle" fill={SCI.ink2}>II</text>
              <text x="50" y="150" fontFamily={SCI.mono} fontSize="10" textAnchor="middle" fill={SCI.ink2}>XI</text>
              <text x="250" y="150" fontFamily={SCI.mono} fontSize="10" textAnchor="middle" fill={SCI.ink2}>III</text>
              <text x="80" y="220" fontFamily={SCI.mono} fontSize="10" textAnchor="middle" fill={SCI.ink2}>X · Sa↑</text>
              <text x="220" y="220" fontFamily={SCI.mono} fontSize="10" textAnchor="middle" fill={SCI.ink2}>IV</text>
              <text x="150" y="160" fontFamily={SCI.mono} fontSize="10" textAnchor="middle" fill={SCI.ink}>Mo · Pu</text>
              <text x="150" y="260" fontFamily={SCI.mono} fontSize="10" textAnchor="middle" fill={SCI.ink2}>VII</text>
              {/* highlight Saturn 10th */}
              <circle cx="80" cy="240" r="8" fill={SCI.orange}/>
              <text x="80" y="244" fontFamily={SCI.mono} fontSize="9" textAnchor="middle" fill={SCI.paper} fontWeight="600">Sa</text>
            </svg>
            <div style={{ display:'flex', justifyContent:'space-between', fontFamily:SCI.mono, fontSize:10, color:SCI.ink3, marginTop:10, letterSpacing:0.5 }}>
              <span>LAGNA · CANCER</span>
              <span>SA · LIBRA · 10H · EXALTED</span>
            </div>
          </div>
          <div style={{ marginTop:18, fontFamily:SCI.mono, fontSize:11, color:SCI.ink2 }}>
            DAŚĀ NOW · Sa-Me · until 02 / 2027 · 33 mo. remain
          </div>
          <div style={{ height:6, background:SCI.tint, marginTop:8, position:'relative' }}>
            <div style={{ position:'absolute', left:0, top:0, bottom:0, width:'62%', background:SCI.orange }}/>
          </div>
        </div>
      </div>

      {/* what I trust / cautious */}
      <div style={{ padding:'48px 56px', borderBottom:`1px solid ${SCI.ink}` }}>
        <MonoLabel>§ MY POSITION</MonoLabel>
        <h2 style={{ fontFamily:SCI.display, fontSize:38, lineHeight:1, margin:'10px 0 22px', letterSpacing:-0.4, fontWeight:500 }}>What I trust here, and where I'm cautious.</h2>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:0, border:`1px solid ${SCI.ink}` }}>
          <div style={{ padding:'24px 24px', borderRight:`1px solid ${SCI.ink}`, background:SCI.tint2 }}>
            <MonoLabel size={9} style={{color:SCI.orange, display:'block'}}>I TRUST</MonoLabel>
            <div style={{ fontFamily:SCI.display, fontSize:22, lineHeight:1.1, margin:'8px 0 14px' }}>The daśā schedule. The yogas. The nakṣatra of the moon.</div>
            <div style={{ fontSize:13.5, lineHeight:1.55, color:SCI.ink2 }}>These are the parts of the tradition that arrive at the same answer when re-derived from the same data, and the parts that keep showing up in the convergence column when the other twelve traditions are honest.</div>
          </div>
          <div style={{ padding:'24px 24px', background:SCI.paper }}>
            <MonoLabel size={9} style={{display:'block', color:SCI.ink3}}>I'M CAUTIOUS</MonoLabel>
            <div style={{ fontFamily:SCI.display, fontSize:22, lineHeight:1.1, margin:'8px 0 14px' }}>Remedies. Specific marriage timing. Anything sold as guarantee.</div>
            <div style={{ fontSize:13.5, lineHeight:1.55, color:SCI.ink2 }}>Jyotish has a tradition of remedial measures (gemstones, mantras, fasts). I read but do not prescribe. If a vendor charges you to "fix your chart," walk away — your atlas is a record, not a treatment plan.</div>
          </div>
        </div>
      </div>

      <AmaraFooter note="VEDIC JYOTISH · MONOGRAPH"/>
    </div>
  );
}

Object.assign(window, { AmaraOnboarding, AmaraReadingPage, AmaraAtlas, AmaraCheckout, AmaraSignIn, AmaraMethodology, AmaraVedicMonograph });
