/* justaskelijah.com: the same look as the Elijah app. Night blue, Elijah's sky-blue light, cream, his signature E. */
:root{
  --night:#040814; --night-2:#081130; --panel:#0B1533; --line:rgba(140,190,255,.16); --line-2:rgba(253,240,219,.22);
  --ink:#EAF2FF; --muted:#9AAACF; --cream:#FDF0DB; --sky:#6CC4FF; --sky-rgb:108,196,255; --ok:#4ACB8E; --bad:#FF7A70;
  --f-display:"Cormorant Garamond",Georgia,serif; --f-body:"Figtree","Segoe UI",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} [hidden]{display:none!important}
body{margin:0;background:radial-gradient(1100px 700px at 70% -10%, rgba(30,80,160,.30), transparent 70%),
  radial-gradient(800px 600px at -10% 40%, rgba(80,60,180,.12), transparent 70%), var(--night);
  color:var(--ink);font:16px/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
a{color:var(--sky)} :focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:6px}
.wrap{width:min(1120px,100% - 32px);margin:0 auto}
/* nav */
.nav{position:sticky;top:0;z-index:10;backdrop-filter:blur(14px);background:rgba(4,8,20,.72);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.brand{display:flex;align-items:center;gap:10px;color:var(--cream);text-decoration:none;font-family:var(--f-display);font-style:italic;font-size:28px}
.brand img{height:22px}
.links{display:flex;align-items:center;gap:22px;font-size:14.5px}
.links a{color:var(--muted);text-decoration:none} .links a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:12px 22px;
  background:var(--cream);color:#0A1A40;font:600 15px var(--f-body);text-decoration:none;cursor:pointer}
.btn:hover{background:#fff} .btn.small{padding:9px 16px;font-size:14px}
.btn.ghost{background:transparent;color:var(--cream);border:1px solid var(--line-2)} .btn.ghost:hover{border-color:var(--sky)}
@media (max-width:820px){ .links a:not(.btn){display:none} }
/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:72px 0 56px}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--sky)}
h1{font-family:var(--f-display);font-style:italic;font-weight:500;font-size:clamp(44px,6.4vw,76px);line-height:1.02;margin:14px 0 18px;color:var(--cream);text-wrap:balance}
h1 em{color:var(--sky);font-style:italic}
.lede{font-size:clamp(17px,1.6vw,19px);color:#C9D5EE;max-width:560px;margin:0 0 28px}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.meaning{margin-top:26px;font-size:13.5px;color:var(--muted)} .meaning b{color:var(--cream);font-weight:600}
.orbBox{position:relative;aspect-ratio:1;width:min(440px,100%);justify-self:center}
#orb{position:absolute;inset:0;width:100%;height:100%}
@media (max-width:860px){ .hero{grid-template-columns:1fr;padding:44px 0 32px;text-align:left} .orbBox{width:min(320px,80%);order:-1} }
/* sections */
section{padding:56px 0}
h2{font-family:var(--f-display);font-style:italic;font-weight:500;font-size:clamp(34px,4.4vw,50px);line-height:1.1;margin:8px 0 14px;color:var(--cream);text-wrap:balance}
.sub{color:var(--muted);max-width:640px;margin:0 0 30px;font-size:17px}
.paths{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:860px){ .paths{grid-template-columns:1fr} }
.path{background:linear-gradient(180deg,rgba(16,30,66,.75),rgba(9,18,44,.75));border:1px solid var(--line);border-radius:24px;padding:28px 28px 24px}
.path h3{font-family:var(--f-display);font-style:italic;font-weight:500;font-size:34px;margin:6px 0 6px;color:var(--cream)}
.path p.one{color:#C9D5EE;margin:0 0 16px}
.path ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.path li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start}
.path li svg{width:18px;height:18px;margin-top:4px;color:var(--sky)}
.path li b{color:var(--ink);font-weight:600}
.path li span{color:var(--muted)}
.soon{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sky);
  border:1px solid rgba(var(--sky-rgb),.4);border-radius:999px;padding:1px 8px;margin-left:6px;vertical-align:2px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
@media (max-width:860px){ .steps{grid-template-columns:1fr} }
.step{border-top:1px solid var(--line-2);padding-top:18px}
.step .n{font-family:var(--f-display);font-style:italic;font-size:44px;color:var(--sky);line-height:1}
.step h3{margin:8px 0 6px;font-size:19px;color:var(--ink)} .step p{margin:0;color:var(--muted)}
.quote{margin:26px 0 0;padding:18px 22px;border-left:2px solid var(--sky);background:rgba(var(--sky-rgb),.06);border-radius:0 14px 14px 0;
  font-family:var(--f-display);font-style:italic;font-size:22px;color:var(--cream);max-width:760px}
.quote small{display:block;font-family:var(--f-body);font-style:normal;font-size:13px;color:var(--muted);margin-top:6px}
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:980px){ .trust{grid-template-columns:1fr 1fr} } @media (max-width:560px){ .trust{grid-template-columns:1fr} }
.t{border:1px solid var(--line);border-radius:18px;padding:20px;background:rgba(255,255,255,.02)}
.t b{display:block;color:var(--cream);margin-bottom:6px;font-size:16px} .t span{color:var(--muted);font-size:14.5px}
.plans{border:1px solid var(--line-2);border-radius:24px;padding:30px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  background:linear-gradient(120deg,rgba(var(--sky-rgb),.08),rgba(253,240,219,.04))}
.plans h2{margin:0 0 6px} .plans p{margin:0;color:var(--muted)}
/* waitlist */
.join{display:grid;grid-template-columns:.9fr 1.1fr;gap:36px;align-items:start}
@media (max-width:860px){ .join{grid-template-columns:1fr} }
form.wl{background:var(--panel);border:1px solid var(--line-2);border-radius:24px;padding:26px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
form.wl .full{grid-column:1 / -1}
@media (max-width:560px){ form.wl{grid-template-columns:1fr} }
label{display:block;font-size:13.5px;color:var(--muted);margin:0 0 6px}
input,select{width:100%;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:12px;padding:12px 13px;color:var(--ink);font:15px var(--f-body);outline:none}
input:focus,select:focus{border-color:rgba(var(--sky-rgb),.7)}
.seg{display:flex;gap:8px} .seg label{flex:1;margin:0;cursor:pointer}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg span{display:block;text-align:center;border:1px solid var(--line);border-radius:12px;padding:11px;color:var(--muted)}
.seg input:checked + span{border-color:var(--cream);color:var(--cream);background:rgba(253,240,219,.06)}
.seg input:focus-visible + span{outline:2px solid var(--sky);outline-offset:2px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.note{font-size:12.5px;color:var(--muted);margin:0} .err{color:var(--bad);font-size:14px;margin:0;min-height:20px}
.thanks{background:var(--panel);border:1px solid rgba(var(--sky-rgb),.5);border-radius:24px;padding:30px}
.thanks h3{font-family:var(--f-display);font-style:italic;font-weight:500;font-size:34px;margin:0 0 6px;color:var(--cream)}
/* footer */
footer{border-top:1px solid var(--line);padding:30px 0 40px;color:var(--muted);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:var(--muted)} footer a:hover{color:var(--ink)} footer nav{display:flex;gap:18px;flex-wrap:wrap}
/* legal pages */
.doc{max-width:760px;padding:48px 0 30px}
.doc h1{font-size:clamp(40px,5vw,58px)}
.doc h2{font-size:30px;margin-top:36px}
.doc p,.doc li{color:#C9D5EE} .doc ul{padding-left:20px} .doc li{margin:6px 0}
.doc .updated{color:var(--muted);font-size:14px}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
/* any business: the tiles */
.biz{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1020px){ .biz{grid-template-columns:repeat(2,1fr)} } @media (max-width:560px){ .biz{grid-template-columns:1fr} }
.b{border:1px solid var(--line);border-radius:18px;padding:18px;background:rgba(255,255,255,.025)}
.b b{display:block;color:var(--cream);font-size:16.5px;margin-bottom:6px} .b span{color:var(--muted);font-size:14.5px}
.b.more{border-style:dashed;border-color:var(--line-2);background:transparent}
.callout{border:1px solid rgba(var(--sky-rgb),.45);background:rgba(var(--sky-rgb),.07);border-radius:16px;padding:16px 20px;margin:22px 0}
.callout b{color:var(--cream)} .callout p{margin:6px 0 0}