*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;background:#080614;color:#f1f5f9;-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.5}
::selection{background:#fbbf24;color:#020617}
h1,h2,h3,p{margin:0}
.serif{font-family:"Cinzel",Georgia,"Times New Roman",serif}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
label{cursor:pointer;-webkit-tap-highlight-color:transparent}

/* icons */
.ic-xs{width:14px;height:14px;flex-shrink:0}
.ic-sm{width:16px;height:16px;flex-shrink:0}
.ic-md{width:20px;height:20px}
.ic-lg{width:32px;height:32px;color:#fcd34d}
.ic-xl{width:40px;height:40px;color:#fcd34d;position:relative;z-index:1}
.amber{color:rgba(251,191,36,.9)}

/* app frame */
.app{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:space-between;overflow-x:hidden;color:#f1f5f9;
 background:radial-gradient(ellipse at center,#1e1b4b 0%,#0f0c29 50%,#060411 100%)}
.bg{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.glow{position:absolute;left:50%;transform:translateX(-50%);border-radius:50%}
.glow-a{top:-10%;width:540px;height:540px;background:rgba(147,51,234,.15);filter:blur(120px)}
.glow-b{bottom:-10%;width:600px;height:600px;background:rgba(79,70,229,.10);filter:blur(140px)}
.glow-c{top:33.333%;width:380px;height:380px;background:rgba(245,158,11,.05);filter:blur(90px)}
.star{position:absolute;border-radius:50%;background:#fef3c7;animation:twinkle 3s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.85)}50%{opacity:.95;transform:scale(1.15)}}

.shell{position:relative;z-index:10;width:100%;max-width:28rem;margin:0 auto;padding:1rem;flex:1;display:flex;flex-direction:column;justify-content:space-between}
.top{padding:.5rem 0 .75rem}
.brand{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.25rem 0}
.brand span{font-size:.75rem;text-transform:uppercase;letter-spacing:.25em;color:rgba(253,230,138,.7)}
.quizbar{display:none}
.qb-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}
.back{display:none;align-items:center;gap:.375rem;font-size:.75rem;font-weight:500;color:rgba(253,230,138,.8);padding:.25rem .5rem;margin-left:-.5rem;border-radius:.5rem;transition:background .15s,color .15s}
.back:hover{color:#fde68a;background:rgba(255,255,255,.05)}
.stepn{font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;font-weight:600;color:rgba(252,211,77,.8)}
.stepn>span{display:none}
.bar{width:100%;height:6px;background:rgba(255,255,255,.1);border-radius:999px;overflow:hidden;padding:1px}
.bar-fill{height:100%;width:0;border-radius:999px;background:linear-gradient(to right,#fbbf24,#fcd34d,#fef08a);box-shadow:0 0 10px rgba(245,158,11,.5);transition:width .35s ease-out}

main{flex:1;display:flex;flex-direction:column;justify-content:center;padding:.5rem 0;margin:auto 0}

/* screens */
.scr{display:none;width:100%;padding:.5rem 0;animation:slidein .25s ease both}
@keyframes slidein{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* landing */
.scr-landing{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem 0;animation:fadeup .3s ease both}
.emblem{position:relative;margin-bottom:1.5rem}
.emb-circle{position:relative;width:96px;height:96px;border-radius:50%;border:1px solid rgba(251,191,36,.3);background:linear-gradient(to bottom,rgba(49,46,129,.4),rgba(59,7,100,.6));display:flex;align-items:center;justify-content:center;box-shadow:0 0 35px rgba(168,85,247,.25)}
.emb-r1{position:absolute;inset:4px;border-radius:50%;border:1px dashed rgba(252,211,77,.25)}
.emb-r2{position:absolute;inset:12px;border-radius:50%;border:1px dotted rgba(192,132,252,.3)}
.emb-spark{position:absolute;top:-4px;right:-4px;color:#fbbf24}
.hero-h1{font-size:1.875rem;line-height:1.25;font-weight:700;letter-spacing:-.025em;max-width:24rem;margin-bottom:.75rem;
 background:linear-gradient(to bottom,#fef3c7,#fde68a,#fbbf24);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{color:#cbd5e1;font-size:1rem;margin-bottom:2rem;max-width:20rem;line-height:1.625}
.hero-fine{font-size:11px;color:rgba(148,163,184,.8);margin-top:.75rem;font-weight:500;letter-spacing:.025em}
@media (min-width:640px){.hero-h1{font-size:2.25rem}.hero-sub{font-size:1.125rem}}

/* buttons */
.btn{width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem 1.5rem;border-radius:1rem;border:0;text-decoration:none;
 background:linear-gradient(to right,#fbbf24,#fcd34d,#f59e0b);color:#020617;font-weight:700;font-size:1.125rem;letter-spacing:.025em;
 box-shadow:0 4px 25px rgba(245,158,11,.35);transition:box-shadow .2s,transform .1s;cursor:pointer}
.btn:hover{box-shadow:0 6px 35px rgba(245,158,11,.5)}
.btn:active{transform:scale(.98)}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(4px)}
.app:has(#start:focus-visible) .btn-start{outline:2px solid #fef3c7;outline-offset:3px}
.nohas{display:none}

/* question header */
.q-head{text-align:center;margin-bottom:1.25rem}
.q-head h2{font-size:1.5rem;line-height:1.3;font-weight:700;color:#fef3c7;letter-spacing:-.025em;margin-bottom:.375rem}
.q-head p{font-size:.75rem;color:rgba(203,213,225,.8)}
@media (min-width:640px){.q-head h2{font-size:1.875rem}.q-head p{font-size:.875rem}}

/* zodiac grid */
.zgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:.625rem}
.zbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:76px;padding:.625rem;border-radius:1rem;
 border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#e2e8f0;transition:all .15s}
.zbtn:hover{border-color:rgba(251,191,36,.4);background:rgba(255,255,255,.07)}
.zbtn:active{transform:scale(.95)}
.zsym{font-size:1.5rem;line-height:1.2;color:#fcd34d;margin-bottom:2px;transition:transform .15s}
.zbtn:hover .zsym{transform:scale(1.1)}
.zname{font-weight:600;font-size:.75rem;letter-spacing:.025em;color:#f1f5f9}
.zdate{font-size:10px;color:rgba(148,163,184,.8);line-height:1;margin-top:2px}
@media (min-width:640px){.zgrid{gap:.75rem}.zbtn{min-height:82px;padding:.75rem}.zname{font-size:.875rem}}

/* option cards */
.olist{display:flex;flex-direction:column;gap:.75rem}
.obtn{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:58px;padding:1rem;border-radius:1rem;text-align:left;
 border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#e2e8f0;transition:all .15s}
.obtn:hover{border-color:rgba(251,191,36,.5);background:rgba(255,255,255,.08)}
.obtn:active{transform:scale(.98)}
.oleft{display:flex;align-items:center;gap:.75rem}
.odot{width:10px;height:10px;border-radius:50%;border:1px solid rgba(251,191,36,.5);display:flex;align-items:center;justify-content:center}
.odot i{display:none;width:6px;height:6px;border-radius:50%;background:#fbbf24}
.otxt{font-weight:500;font-size:1rem;color:#f1f5f9}
.oarr{color:rgba(251,191,36,.6);font-size:.875rem}
@media (min-width:640px){.obtn{padding:1.25rem}.otxt{font-size:1.125rem}}
input:checked+.zbtn,input:checked+.obtn{background:rgba(251,191,36,.15);border-color:#fbbf24;color:#fef3c7;box-shadow:0 0 15px rgba(245,158,11,.25)}
input:checked+.obtn .odot i{display:block}
input:focus-visible+.zbtn,input:focus-visible+.obtn{outline:2px solid #fcd34d;outline-offset:2px}

/* reading + result share one grid cell */
.scr-done{grid-template-areas:"x";animation:none}
.reading,.result{grid-area:x}
.reading{align-self:center;padding:2.5rem 0;text-align:center;display:flex;flex-direction:column;align-items:center;animation:readout .3s ease 2.5s forwards}
@keyframes readout{to{opacity:0;visibility:hidden;transform:scale(1.05)}}
.result{visibility:hidden;opacity:0;animation:resultin .35s ease 2.5s forwards;display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem;padding:.5rem 0}
@keyframes resultin{from{visibility:visible;opacity:0;transform:translateY(16px)}to{visibility:visible;opacity:1;transform:none}}

.wheel{position:relative;width:144px;height:144px;margin-bottom:2rem;display:flex;align-items:center;justify-content:center}
.w-glow{position:absolute;inset:0;border-radius:50%;background:rgba(251,191,36,.15);filter:blur(24px)}
.w-ring1{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(251,191,36,.3)}
.w-ring2{position:absolute;inset:12px;border-radius:50%;border:2px dashed rgba(192,132,252,.4)}
.w-ring3{position:absolute;inset:28px;border-radius:50%;border:1px solid rgba(252,211,77,.2)}
.w-core{position:relative;z-index:1;width:64px;height:64px;border-radius:50%;background:linear-gradient(to bottom,#1e1b4b,#3b0764);border:1px solid rgba(252,211,77,.4);display:flex;align-items:center;justify-content:center;box-shadow:0 0 25px rgba(245,158,11,.35)}
.orbit{position:absolute;inset:0;animation:spin 2.5s linear infinite}
.orbit i{position:absolute;top:0;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#fcd34d;box-shadow:0 0 8px #fde047}
.r-title{font-size:1.5rem;font-weight:700;color:#fef3c7;letter-spacing:-.025em;margin-bottom:.5rem}
.msgbox{position:relative;height:2rem;width:100%}
.msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(252,211,77,.9);font-size:.875rem;font-weight:500;letter-spacing:.025em;opacity:0;animation:msg .62s ease both}
@keyframes msg{0%{opacity:0;transform:translateY(6px)}20%,80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
.r-bar{width:12rem;height:4px;background:rgba(255,255,255,.1);border-radius:999px;margin-top:1.5rem;overflow:hidden}
.r-bar div{height:100%;width:0;background:linear-gradient(to right,#fbbf24,#fef08a);animation:grow 2.5s ease-in-out forwards}
@keyframes grow{to{width:100%}}

.badge{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .75rem;border-radius:999px;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.3);color:#fde68a;font-size:.75rem;letter-spacing:.05em;text-transform:uppercase}
.badge svg{color:#fbbf24}
.v{display:none}
.arch-title{font-size:1.5rem;font-weight:700;background:linear-gradient(to right,#fde68a,#fef3c7,#fcd34d);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:.25rem}
.arch-sub{font-size:.75rem;color:rgba(252,211,77,.75);font-style:italic}
@media (min-width:640px){.arch-title{font-size:1.875rem}}
.portrait{position:relative;width:100%;max-width:280px;aspect-ratio:4/4.5;margin:0 auto;border-radius:1.5rem;border:1px solid rgba(251,191,36,.3);
 background:linear-gradient(to bottom,#181335,#120d28,#0a0718);padding:.75rem;box-shadow:0 0 35px rgba(245,158,11,.2);display:flex;flex-direction:column;align-items:center;justify-content:space-between;overflow:hidden}
@media (min-width:640px){.portrait{max-width:300px}}
.corner{position:absolute;width:12px;height:12px;border-color:rgba(252,211,77,.6);border-style:solid;border-width:0}
.tl{top:8px;left:8px;border-top-width:1px;border-left-width:1px}.tr{top:8px;right:8px;border-top-width:1px;border-right-width:1px}
.bl{bottom:8px;left:8px;border-bottom-width:1px;border-left-width:1px}.br{bottom:8px;right:8px;border-bottom-width:1px;border-right-width:1px}
.aura{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(251,191,36,.15),rgba(147,51,234,.15),transparent);filter:blur(6px)}
.sil{position:relative;width:100%;height:180px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.sil svg{width:100%;height:100%;filter:blur(9px);opacity:.8}
.sil-ring{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.sil-ring div{width:112px;height:112px;border-radius:50%;border:1px dashed rgba(252,211,77,.2)}
.lockbar{position:relative;z-index:1;width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem .75rem;border-radius:1rem;background:rgba(2,6,23,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(251,191,36,.25)}
.lockbar svg{color:#fcd34d}
.lockbar span{font-size:11px;font-weight:500;color:#fef3c7;letter-spacing:.025em}
.cta-wrap{width:100%}
.cta{display:none}
.cta-top{font-size:1rem;animation:ctapulse 2.2s cubic-bezier(.4,0,.6,1) infinite;box-shadow:0 4px 25px rgba(245,158,11,.4)}
.cta-bot{font-size:1rem;padding:.875rem 1.5rem;box-shadow:0 4px 20px rgba(245,158,11,.3)}
@media (min-width:640px){.cta-top{font-size:1.125rem}}
@keyframes ctapulse{0%,100%{box-shadow:0 0 15px rgba(245,158,11,.25),0 0 30px rgba(168,85,247,.2);transform:scale(1)}50%{box-shadow:0 0 25px rgba(245,158,11,.45),0 0 50px rgba(168,85,247,.35);transform:scale(1.02)}}
.narr{width:100%;padding:1rem;border-radius:1rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);text-align:left}
.narr-h{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:#fcd34d;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}
.narr-h svg{color:#fbbf24}
.narr p{font-size:.75rem;color:#e2e8f0;line-height:1.625}
@media (min-width:640px){.narr{padding:1.25rem}.narr p{font-size:.875rem}}

/* motion helpers */
.spin{animation:spin 16s linear infinite}
.spin-rev{animation:spin 22s linear infinite reverse}
.pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{opacity:.5}}

/* below-the-fold sections */
.seo{position:relative;z-index:10;width:100%}
.sec{max-width:72rem;margin:0 auto;padding:4rem 1.5rem;border-top:1px solid rgba(255,255,255,.05)}
.sec.first{border-top:0}
.sec-head{text-align:center;max-width:48rem;margin:0 auto 3.5rem}
.sec-head h2{font-size:1.875rem;line-height:1.25;font-weight:700;color:#fef3c7;letter-spacing:-.025em;margin-bottom:1rem}
.sec-head p{color:#cbd5e1;font-size:1rem;line-height:1.625}
.grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
.card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:1rem;padding:1.5rem;transition:border-color .3s,background .3s}
.card:hover{border-color:rgba(251,191,36,.3);background:rgba(255,255,255,.07)}
.card h3{font-size:1.25rem;font-weight:600;color:#fde68a;margin-bottom:.625rem;line-height:1.35}
.card p{color:#cbd5e1;font-size:.875rem;line-height:1.625}
.c-ico{width:48px;height:48px;border-radius:.75rem;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.2);display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem;color:#fbbf24}
.c-ico svg{width:24px;height:24px}
.stepnum{display:block;font-size:2.25rem;font-weight:700;color:#fbbf24;margin-bottom:1rem;letter-spacing:-.025em;line-height:1}
.small{text-align:center;font-size:.75rem;color:rgba(148,163,184,.8);max-width:42rem;margin:2.5rem auto 0}
.tbl-wrap{overflow-x:auto;border-radius:1rem;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);margin:0 -.5rem}
table{width:100%;min-width:640px;border-collapse:collapse;text-align:left;font-size:.875rem}
th{padding:1rem 1.5rem;font-weight:600;color:#fde68a;font-size:1rem;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.1)}
td{padding:1.25rem 1.5rem;color:#cbd5e1;vertical-align:top;border-top:1px solid rgba(255,255,255,.1)}
tbody tr:first-child td{border-top:0}
tbody tr:hover{background:rgba(255,255,255,.04)}
.t-opt{font-weight:500;color:#f1f5f9}
.t-cost{font-weight:500;color:#e2e8f0;white-space:nowrap}

/* FAQ */
.tabs{display:none;align-items:center;justify-content:center;gap:.75rem;margin-bottom:2.5rem;flex-wrap:wrap}
.tab{padding:.75rem 1.25rem;border-radius:.75rem;font-size:.875rem;font-weight:600;letter-spacing:.025em;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#cbd5e1;transition:all .2s}
.tab:hover{background:rgba(255,255,255,.08);color:#fde68a}
.faq-list{max-width:56rem;margin:0 auto}
.faq-panel{margin-bottom:1.5rem}
.faq-group{font-size:1.25rem;font-weight:700;color:#fde68a;padding:0 .25rem;margin-bottom:.75rem}
details{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:1rem;overflow:hidden;margin-bottom:.75rem;transition:border-color .2s}
details[open]{border-color:rgba(251,191,36,.4)}
summary{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:1rem;cursor:pointer;list-style:none;font-size:1rem;font-weight:600;color:#f1f5f9;transition:color .2s}
summary::-webkit-details-marker{display:none}
details[open] summary{color:#fcd34d}
.chev{width:20px;height:20px;color:#94a3b8;flex-shrink:0;transition:transform .2s}
details[open] .chev{transform:rotate(180deg);color:#fbbf24}
summary:focus-visible{outline:2px solid #fcd34d;outline-offset:-2px;border-radius:1rem}
.ans{padding:.75rem 1rem 1rem;color:#cbd5e1;font-size:.875rem;line-height:1.625;border-top:1px solid rgba(255,255,255,.05)}

/* final CTA */
.final{position:relative;overflow:hidden;max-width:42rem;margin:0 auto;text-align:center;padding:2rem;border-radius:1.5rem;border:1px solid rgba(255,255,255,.1);
 background:linear-gradient(to bottom,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:0 0 50px rgba(168,85,247,.15)}
.final>*{position:relative;z-index:1}
.final .final-aura{position:absolute;z-index:0;top:0;left:50%;transform:translateX(-50%);width:18rem;height:18rem;border-radius:50%;background:rgba(251,191,36,.1);filter:blur(64px);pointer-events:none}
.final h2{font-size:1.875rem;font-weight:700;color:#fef3c7;letter-spacing:-.025em;margin-bottom:1rem;line-height:1.2}
.final-sub{color:#e2e8f0;font-size:1.125rem;font-weight:500;margin-bottom:2rem}
.final-btn{max-width:28rem;margin:0 auto;padding:1rem 2rem}
.pills{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.625rem;margin-top:1.5rem}
.pill{display:inline-flex;align-items:center;padding:.25rem .75rem;border-radius:999px;font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.3);color:#fde68a}
.pdot{color:rgba(251,191,36,.4);font-size:.75rem}
.fine{font-size:.75rem;color:rgba(148,163,184,.8);margin-top:1.5rem}

.foot{position:relative;z-index:10;width:100%;max-width:72rem;margin:0 auto;padding:2rem 1.5rem 1.5rem;border-top:1px solid rgba(255,255,255,.05);text-align:center}
.foot p{font-size:10px;line-height:1.625;color:rgba(148,163,184,.8);max-width:24rem;margin:0 auto}

@media (min-width:640px){.tbl-wrap{margin:0}}
@media (min-width:768px){
 .sec{padding:6rem 1.5rem}
 .sec-head h2{font-size:2.25rem}
 .sec-head p{font-size:1.125rem}
 .g3{grid-template-columns:repeat(3,1fr)}
 .g4{grid-template-columns:repeat(4,1fr)}
 .g2{grid-template-columns:repeat(2,1fr)}
 .card{padding:2rem}
 .g4 .card{padding:1.75rem}
 .card p{font-size:1rem}
 .stepnum{font-size:3rem}
 .small{font-size:.875rem}
 table{font-size:1rem}
 .tabs{display:flex}
 .faq-panel{display:none;margin-bottom:0}
 .faq-group{display:none}
 details{margin-bottom:1rem}
 summary{padding:1.5rem;font-size:1.125rem}
 .ans{padding:1rem 1.5rem 1.5rem;font-size:1rem}
 .final{padding:3.5rem}
 .final h2{font-size:3rem}
 .final-sub{font-size:1.25rem}
}

/* state machine (generated) */
.app:has(#start:checked) .scr-landing, .app:has(#start:checked) .seo {display:none}
.app:has(#start:checked):has(#z-none:checked) .scr-q1 {display:block}
.app:has(#start:checked):has(#z-none:checked) .brand {display:none}
.app:has(#start:checked):has(#z-none:checked) .quizbar {display:block}
.app:has(#start:checked):not(:has(#z-none:checked)):has(#p-none:checked) .scr-q2 {display:block}
.app:has(#start:checked):not(:has(#z-none:checked)):has(#p-none:checked) .brand {display:none}
.app:has(#start:checked):not(:has(#z-none:checked)):has(#p-none:checked) .quizbar {display:block}
.app:has(#start:checked):not(:has(#z-none:checked)):not(:has(#p-none:checked)):has(#q-none:checked) .scr-q3 {display:block}
.app:has(#start:checked):not(:has(#z-none:checked)):not(:has(#p-none:checked)):has(#q-none:checked) .brand {display:none}
.app:has(#start:checked):not(:has(#z-none:checked)):not(:has(#p-none:checked)):has(#q-none:checked) .quizbar {display:block}
.app:has(#start:checked):not(:has(#z-none:checked)):not(:has(#p-none:checked)):not(:has(#q-none:checked)):has(#d-none:checked) .scr-q4 {display:block}
.app:has(#start:checked):not(:has(#z-none:checked)):not(:has(#p-none:checked)):not(:has(#q-none:checked)):has(#d-none:checked) .brand {display:none}
.app:has(#start:checked):not(:has(#z-none:checked)):not(:has(#p-none:checked)):not(:has(#q-none:checked)):has(#d-none:checked) .quizbar {display:block}
.app:has(#start:checked):has(#z-none:checked) .stepn-1 {display:inline}
.app:has(#start:checked):has(#z-none:checked) .bar-fill {width:25%}
.app:has(#start:checked):has(#z-none:checked) .back-q1 {display:flex}
.app:has(#start:checked):not(:has(#z-none:checked)):has(#p-none:checked) .stepn-2 {display:inline}
.app:has(#start:checked):not(:has(#z-none:checked)):has(#p-none:checked) .bar-fill {width:50%}
.app:has(#start:checked):not(:has(#z-none:checked)):has(#p-none:checked) .back-q2 {display:flex}
.app:has(#start:checked):not(:has(#z-none:checked)):not(:has(#p-none:checked)):has(#q-none:checked) .stepn-3 {display:inline}
.app:has(#start:checked):not(:has(#z-none:checked)):not(:has(#p-none:checked)):has(#q-none:checked) .bar-fill {width:75%}
.app:has(#start:checked):not(:has(#z-none:checked)):not(:has(#p-none:checked)):has(#q-none:checked) .back-q3 {display:flex}
.app:has(#start:checked):not(:has(#z-none:checked)):not(:has(#p-none:checked)):not(:has(#q-none:checked)):has(#d-none:checked) .stepn-4 {display:inline}
.app:has(#start:checked):not(:has(#z-none:checked)):not(:has(#p-none:checked)):not(:has(#q-none:checked)):has(#d-none:checked) .bar-fill {width:100%}
.app:has(#start:checked):not(:has(#z-none:checked)):not(:has(#p-none:checked)):not(:has(#q-none:checked)):has(#d-none:checked) .back-q4 {display:flex}
.app:has(#start:checked):not(:has(#z-none:checked)):not(:has(#p-none:checked)):not(:has(#q-none:checked)):not(:has(#d-none:checked)) .scr-done {display:grid}
.faq:has(#faq-1:checked) label[for=faq-1] {background:#fbbf24;color:#020617;border-color:#fbbf24;box-shadow:0 0 20px rgba(245,158,11,.35)}
.faq:has(#faq-1:focus-visible) label[for=faq-1] {outline:2px solid #fcd34d;outline-offset:3px}
@media (min-width:768px){.faq:has(#faq-1:checked) .faq-panel-1 {display:block}}
.faq:has(#faq-2:checked) label[for=faq-2] {background:#fbbf24;color:#020617;border-color:#fbbf24;box-shadow:0 0 20px rgba(245,158,11,.35)}
.faq:has(#faq-2:focus-visible) label[for=faq-2] {outline:2px solid #fcd34d;outline-offset:3px}
@media (min-width:768px){.faq:has(#faq-2:checked) .faq-panel-2 {display:block}}
.faq:has(#faq-3:checked) label[for=faq-3] {background:#fbbf24;color:#020617;border-color:#fbbf24;box-shadow:0 0 20px rgba(245,158,11,.35)}
.faq:has(#faq-3:focus-visible) label[for=faq-3] {outline:2px solid #fcd34d;outline-offset:3px}
@media (min-width:768px){.faq:has(#faq-3:checked) .faq-panel-3 {display:block}}
.faq:has(#faq-4:checked) label[for=faq-4] {background:#fbbf24;color:#020617;border-color:#fbbf24;box-shadow:0 0 20px rgba(245,158,11,.35)}
.faq:has(#faq-4:focus-visible) label[for=faq-4] {outline:2px solid #fcd34d;outline-offset:3px}
@media (min-width:768px){.faq:has(#faq-4:checked) .faq-panel-4 {display:block}}

/* browsers without :has() support: skip the quiz, link straight to the offer */
@supports not selector(:has(*)){
 .btn-start{display:none}
 .nohas{display:flex}
}

@media (prefers-reduced-motion:reduce){
 .star,.spin,.spin-rev,.pulse,.cta-top,.orbit{animation:none}
 .scr,.scr-landing{animation:none}
}


/* ---- single result CTA + expanded result ---- */
.app .cta-one{display:flex}
.r-sign{display:inline}
.r-more{width:100%;padding:1rem;border-radius:1rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);text-align:left;font-size:.8125rem;color:#e2e8f0;line-height:1.6}
.r-more h4{margin:0 0 .5rem;font-family:"Cinzel",Georgia,serif;font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;color:#fcd34d}
.r-more ul{list-style:none;margin:0 0 .75rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.r-more li a{display:inline-block;padding:.25rem .75rem;border-radius:999px;border:1px solid rgba(251,191,36,.3);background:rgba(251,191,36,.08);color:#fde68a;text-decoration:none;font-size:.8125rem}
.r-more .r-guide{color:#fcd34d}
.r-more p{margin:0 0 .875rem}
.r-more .r-fun{font-size:.6875rem;color:#94a3b8;font-style:italic}
.r-note{font-size:.75rem;color:rgba(203,213,225,.85);text-align:center;margin-top:.25rem}

/* ---- shared links ---- */
.prose a,.ans a,.r-more a.r-guide,.foot a,.crumbs a,.sec-head a{color:#fcd34d;text-decoration:underline;text-decoration-color:rgba(252,211,77,.35);text-underline-offset:3px}
.prose a:hover,.ans a:hover,.foot a:hover{text-decoration-color:#fcd34d}
.prose a.btn,.quizbox a.btn,.hopbox a.btn{color:#020617;text-decoration:none}

/* ---- sign grid (home + hub) ---- */
.signgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;max-width:56rem;margin:0 auto}
.signcard{display:flex;flex-direction:column;align-items:center;text-align:center;padding:1rem .75rem;border-radius:1rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);text-decoration:none;color:#f1f5f9;transition:border-color .2s,background .2s}
.signcard:hover{border-color:rgba(251,191,36,.4);background:rgba(255,255,255,.08)}
.signcard .sym{font-size:1.5rem;color:#fbbf24;line-height:1}
.signcard .nm{font-family:"Cinzel",Georgia,serif;font-weight:600;color:#fde68a;margin-top:.375rem}
.signcard .dt{font-size:.6875rem;color:#94a3b8;margin-top:.125rem}
.signcard .mt{font-size:.75rem;color:#cbd5e1;margin-top:.5rem}
@media (min-width:640px){.signgrid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:900px){.signgrid{grid-template-columns:repeat(4,1fr)}}
.center-link{text-align:center;margin-top:2rem;font-size:.9375rem}
.center-link a{color:#fcd34d}

/* ---- sub pages ---- */
.page{position:relative;min-height:100vh;background:radial-gradient(ellipse at top,#1e1b4b 0%,#0f0c29 45%,#060411 100%);overflow-x:hidden}
.nav{position:relative;z-index:10;max-width:72rem;margin:0 auto;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.nav .brand{padding:0;text-decoration:none}
.nav-links{display:flex;gap:1.25rem;font-size:.8125rem}
.nav-links a{color:#cbd5e1;text-decoration:none}
.nav-links a:hover{color:#fde68a}
.wrap{position:relative;z-index:10;max-width:46rem;margin:0 auto;padding:1rem 1.5rem 4rem}
.wrap.wide{max-width:72rem}
.crumbs{font-size:.75rem;color:#94a3b8;margin-bottom:1.5rem}
.crumbs span{margin:0 .375rem;color:#64748b}
.page h1{font-family:"Cinzel",Georgia,serif;font-size:2rem;line-height:1.2;font-weight:700;color:#fef3c7;letter-spacing:-.02em;margin-bottom:1rem}
@media (min-width:640px){.page h1{font-size:2.75rem}}
.facts{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.75rem}
.facts span{padding:.25rem .75rem;border-radius:999px;font-size:.75rem;background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.25);color:#fde68a}
.prose{color:#cbd5e1;font-size:1rem;line-height:1.75}
.prose p{margin:0 0 1.25rem}
.prose .lede{font-size:1.125rem;color:#e2e8f0}
.prose h2{font-family:"Cinzel",Georgia,serif;font-size:1.5rem;line-height:1.3;color:#fde68a;margin:2.75rem 0 1rem;font-weight:700}
.prose h3{font-family:"Cinzel",Georgia,serif;font-size:1.125rem;color:#fde68a;margin:0 0 .5rem}
.prose ul,.prose ol{margin:0 0 1.5rem;padding-left:1.25rem}
.prose li{margin-bottom:.5rem}
.prose strong{color:#f1f5f9}
.prose .tbl-wrap{margin:0 0 1.5rem}
.prose table{min-width:560px;font-size:.875rem}
.prose td,.prose th{padding:.875rem 1rem}
.matches{display:grid;gap:.75rem;margin-bottom:1.5rem}
.match{display:block;padding:1.125rem 1.25rem;border-radius:1rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.match.hard{background:rgba(255,255,255,.03)}
.match h3 a{color:#fde68a;text-decoration:none}
.match h3 a:hover{text-decoration:underline}
.match p{margin:0;font-size:.9375rem}
.quizbox{margin:2rem 0 2.5rem;padding:1.5rem;border-radius:1.25rem;text-align:center;border:1px solid rgba(251,191,36,.25);background:linear-gradient(to bottom,rgba(49,46,129,.35),rgba(59,7,100,.35))}
.quizbox h2,.quizbox .qb-title{font-family:"Cinzel",Georgia,serif;font-size:1.25rem;color:#fef3c7;margin:0 0 .5rem;font-weight:700}
.quizbox p{font-size:.875rem;color:#cbd5e1;margin:0 0 1rem}
.quizbox .btn{max-width:22rem;margin:0 auto}
.hopbox{margin:2.5rem 0 1rem;padding:1.25rem;border-radius:1rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);text-align:center}
.hopbox p{font-size:.875rem;margin:0 0 .875rem;color:#cbd5e1}
.hopbox .btn{max-width:22rem;margin:0 auto}
.hopbox small{display:block;margin-top:.75rem;font-size:.6875rem;color:#94a3b8}
.page .faq-block details{margin-bottom:.75rem}
.pn{display:flex;justify-content:space-between;gap:1rem;margin-top:2.5rem;font-size:.875rem}
.pn a{color:#fcd34d;text-decoration:none}
.note{font-size:.8125rem;color:#94a3b8;font-style:italic}

/* ---- compatibility chart ---- */
.compat{min-width:720px;font-size:.75rem;text-align:center}
.compat th,.compat td{padding:.5rem .25rem;border:1px solid rgba(255,255,255,.06)}
.compat th{font-size:.75rem}
.compat th a{color:#fde68a;text-decoration:none}
.compat td{color:#0f0c29;font-weight:700}
.c-mirror{background:#e2e8f0}
.c-natural{background:#fbbf24}
.c-easy{background:#fde68a}
.c-magnetic{background:#c084fc}
.c-friction{background:#64748b;color:#f1f5f9!important}
.c-growth{background:#334155;color:#cbd5e1!important}
.legend{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;margin:1rem 0 1.5rem;font-size:.8125rem;color:#cbd5e1}
.legend i{display:inline-block;width:.875rem;height:.875rem;border-radius:.25rem;margin-right:.375rem;vertical-align:-2px}

/* ---- footer ---- */
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.375rem 1rem;max-width:44rem;margin:0 auto 1.25rem;font-size:.75rem}
.foot-links a{color:#cbd5e1;text-decoration:none}
.foot-links a:hover{color:#fde68a}
.foot-h{font-family:"Cinzel",Georgia,serif;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:#fcd34d;margin-bottom:.5rem}