/* Scoped to Step 1: the reading, wheel, offer and sticky bar retain their styles. */
body:has(#step-landing.active){background:#071748}
#step-landing{position:relative;isolation:isolate;overflow:hidden;padding:0;color:white;background:radial-gradient(ellipse at 50% 70%,#db83a7 0,transparent 32%),radial-gradient(ellipse at 72% 45%,#6d27b9,transparent 60%),#061d61;min-height:0}
.cosmic-sky{position:absolute;inset:0;z-index:-1;pointer-events:none;background: url('/assets/decoder/sky-left.webp') left top / 26% 100% no-repeat,url('/assets/decoder/sky-right.webp') right top / 26% 100% no-repeat}
.nebula{position:absolute;inset:-5%;background:radial-gradient(ellipse at 12% 46%,#168bff66,transparent 35%),radial-gradient(ellipse at 85% 60%,#ff149366,transparent 32%);animation:nebula-drift 32s ease-in-out infinite alternate}
.stars,.gold-dust{position:absolute;inset:0;background-image:radial-gradient(circle,#fff 1px,transparent 2px),radial-gradient(circle,#88cbff 1px,transparent 2px);background-size:113px 131px,179px 163px;background-position:15px 38px,61px 11px;animation:star-glow 7s ease-in-out infinite alternate;opacity:.6}
.gold-dust{inset:40% 8% 5%;background-image:radial-gradient(circle,#ffd36a 1px,transparent 2px);background-size:97px 83px;animation:dust-drift 26s linear infinite}
.destiny-landing{max-width:1360px;margin:auto;text-align:center;padding:14px 30px 40px}.landing-header{padding:0 0 12px}.landing-brand{color:#ffe28a;font:600 clamp(16px,2.5vw,32px)/1.4 'Inter',sans-serif;letter-spacing:.14em;text-decoration:none;text-shadow:0 2px 8px #051240}
.graphic-eyebrow{display:inline-block;background:linear-gradient(100deg,#d99b22,#fff0a0,#d99b22);color:#16151b;padding:5px 30px;margin:0 0 8px;font:700 clamp(11px,1.8vw,23px)/1.4 'Inter',sans-serif;clip-path:polygon(2% 0,98% 0,100% 50%,98% 100%,2% 100%,0 50%)}
#step-landing h1{color:white;font:700 clamp(38px,5.4vw,77px)/.99 Georgia,serif;letter-spacing:-.025em;margin:0 auto 16px;text-shadow:0 3px 14px #060f49;max-width:1200px;animation:decoder-enter .8s both}#step-landing h1 em{color:#ffdc72}
.landing-intro{max-width:1070px;margin:0 auto;color:white;font:500 clamp(15px,1.8vw,25px)/1.35 'Inter',sans-serif;text-wrap:balance;text-shadow:0 2px 8px #081443}
.decoder-stage{position:relative;max-width:920px;margin:38px auto 40px;perspective:1200px}.decoder{position:relative;border:5px double #ffdf78;border-radius:40px 40px 22px 22px;background:linear-gradient(145deg,#080d36ed,#210a3de8);padding:34px 30px 25px;box-shadow:0 0 8px 3px #fff0ad,0 0 25px #ffb827,0 0 55px #ff39dd77,inset 0 0 20px #ffc33b88;animation:decoder-enter .8s both}
.decoder h2{position:absolute;top:-27px;left:50%;transform:translateX(-50%);width:max-content;max-width:90%;margin:0;padding:6px 45px;border:3px double #ffcc59;background:linear-gradient(#260655,#14042e);color:#ffe28a;font:600 clamp(16px,2.3vw,30px)/1.2 'Inter',sans-serif;box-shadow:0 0 16px #ff47c8}
.chambers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.chamber-wrap{position:relative;min-width:0}.chamber{--chamber:#168bff;width:100%;height:218px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;color:white;border:4px double var(--chamber);border-radius:18px 18px 12px 12px;background:radial-gradient(ellipse at bottom,color-mix(in srgb,var(--chamber) 55%,transparent),transparent 60%),linear-gradient(145deg,#081333,#130c30);box-shadow:0 0 12px var(--chamber),inset 0 0 15px var(--chamber);cursor:pointer;transition:transform .2s,filter .2s;animation:chamber-glow 8s ease-in-out infinite;animation-delay:calc(var(--i)*2s)}
.chamber-wrap:nth-child(2) .chamber{--chamber:#ae51ff}.chamber-wrap:nth-child(3) .chamber{--chamber:#ff1493}.chamber-wrap:nth-child(4) .chamber{--chamber:#00e5d4}.chamber:hover,.chamber:focus-visible{filter:brightness(1.3);transform:translateY(-3px)}.chamber:focus-visible,.landing-reveal:focus-visible,.landing-brand:focus-visible{outline:3px solid white;outline-offset:5px}
.chamber-symbol{font:60px/1 Georgia,serif;color:var(--chamber);text-shadow:0 0 9px var(--chamber),0 0 4px white}.chamber-label{font:600 15px/1.18 'Inter',sans-serif;max-width:130px;white-space:normal}.chamber-result{font:700 27px/1 Georgia,serif;color:#ffe697;min-height:38px;display:flex;align-items:center;justify-content:center}.lock-icon{width:36px;height:42px;fill:#ffda6c;filter:drop-shadow(0 0 7px #fff3a5);animation:lock-shine 9s ease-in-out infinite}.chamber.unlocked .chamber-result{animation:unlock .5s both}.chamber.unlocked{border-color:#ffe28a}
.decoder-tooltip{position:absolute;z-index:5;left:50%;bottom:100%;transform:translateX(-50%);width:215px;max-width:70vw;padding:12px;border:1px solid #ffd36a;border-radius:8px;color:white;background:#101335;box-shadow:0 5px 20px #030923;font:14px/1.45 'Inter',sans-serif;animation:decoder-enter .18s both}.decoder-tooltip[hidden]{display:none}
.energy-orbit{position:absolute;z-index:2;pointer-events:none;inset:28% -8% 13%;border:3px solid #ffda78;border-radius:50%;transform:rotate(-7deg);box-shadow:0 0 7px white,0 0 16px #ffaf38,inset 0 0 10px #ffd36a;opacity:.8}.energy-orbit:after{content:'';position:absolute;inset:-9px;border:1px solid #ffd36a99;border-radius:50%}.energy-orbit i{position:absolute;inset:0;animation:orbit 28s linear infinite}.energy-orbit i:before{content:'✦';position:absolute;top:0;left:45%;color:#fff4b4;font-size:26px;text-shadow:0 0 12px #ffbf35}.decoder-stage:after{content:'';position:absolute;bottom:-26px;left:15%;right:15%;height:17px;background:#fff3c5;border-radius:50%;filter:blur(12px);box-shadow:0 0 30px 15px #ffb546}
.landing-action{max-width:850px;margin:0 auto 28px}#step-landing .landing-reveal{position:relative;overflow:hidden;width:100%;max-width:none;border:5px double #ffe586;border-radius:44px;background:linear-gradient(#ff23bf,#c50076 65%,#ff258e);box-shadow:0 0 8px white,0 0 25px #ffce4e,0 8px 30px #ff149377;color:white;padding:19px 22px;font:700 clamp(16px,2.3vw,30px)/1.2 'Inter',sans-serif;letter-spacing:0;animation:cta-breathe 5s ease-in-out infinite;transition:transform .2s}#step-landing .landing-reveal:after{content:'';position:absolute;inset:-50%;background:linear-gradient(100deg,transparent 45%,#ffffff55 50%,transparent 55%);animation:cta-sweep 9s infinite;pointer-events:none}#step-landing .landing-reveal:hover{transform:translateY(-3px);filter:brightness(1.12)}#step-landing .landing-reveal:active{transform:translateY(1px)}
.landing-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1150px;margin:auto}.landing-benefits>div{display:flex;align-items:center;text-align:left;gap:15px;font:600 clamp(13px,1.4vw,19px)/1.4 'Inter',sans-serif;border-right:1px solid #ffda6c88}.landing-benefits>div:last-child{border:0}.landing-benefits span{font:56px/1 Georgia,serif;color:#ffdc78;text-shadow:0 0 10px #ffba55}
body:has(#step-landing.active) .compact-landing-footer{background:#071541;color:#c9d1ec;border-top:1px solid #ffd36a55}body:has(#step-landing.active) .compact-landing-footer a{color:#ffe28a}
#birth-dialog{color:#fff;background:radial-gradient(at top right,#53248b,#0b1c50 75%);border:1px solid #ffd36a;box-shadow:0 0 70px #673ee866}#birth-dialog h2,#birth-dialog p,#birth-dialog label,#birth-dialog legend,#birth-dialog .btn-text{color:inherit}#birth-dialog input,#birth-dialog select{background:#101d42;color:white;border-color:#8e83b0}#birth-dialog input::placeholder{color:#b7bfdb}#birth-dialog .dialog-close,#birth-dialog .sandra-intro-toolbar button{color:#ffe28a}#birth-dialog .sandra-message{background:#152658;border-color:#8065b1}#birth-dialog .btn-primary{background:linear-gradient(#ee159a,#b40076);color:white;border:1px solid #ffd36a}
.decoder-compact{margin:18px 0 24px}.decoder-compact .decoder{padding:12px;border-width:2px;border-radius:14px;animation:none}.decoder-compact .decoder h2{position:static;transform:none;width:auto;max-width:none;border:0;box-shadow:none;background:none;font-size:13px;padding:0 0 12px}.decoder-compact .chambers{gap:8px}.decoder-compact .chamber{height:110px;border-width:2px;gap:5px;border-radius:9px}.decoder-compact .chamber-symbol{display:none}.decoder-compact .chamber-label{font-size:9px;max-width:80px}.decoder-compact .chamber-result{font-size:19px}.decoder-compact .lock-icon{height:25px;width:22px}.code-reveal{padding:14px 5px 0;text-align:center;color:#ffe28a;font:500 13px/1.5 'Inter',sans-serif}.code-reveal strong{display:block;letter-spacing:.06em;margin-bottom:7px}.code-reveal p{margin:8px 0}.code-reveal[hidden]{display:none}.decoder.completed{animation:unlock 1.2s both}.decoder-stage.pulsing{animation:unlock .6s}.decoder-reading-reveal{position:fixed;z-index:50;bottom:20px;left:50%;transform:translateX(-50%);width:min(540px,90vw);padding:18px;background:#101d42;color:#ffe28a;border:1px solid #ffd36a;border-radius:16px;box-shadow:0 0 25px #b356dd;pointer-events:none;text-align:center}
@keyframes nebula-drift{to{transform:translate3d(3%,2%,0) scale(1.06)}}@keyframes star-glow{to{opacity:.22}}@keyframes dust-drift{to{transform:translate3d(30px,-40px,0)}}@keyframes decoder-enter{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}@keyframes orbit{to{transform:rotate(360deg)}}@keyframes chamber-glow{0%,35%,100%{filter:brightness(1)}15%{filter:brightness(1.22)}}@keyframes lock-shine{0%,80%,100%{opacity:1}90%{opacity:.55}}@keyframes unlock{0%,100%{filter:brightness(1)}40%{filter:brightness(1.55)}}@keyframes cta-breathe{50%{filter:brightness(1.12)}}@keyframes cta-sweep{0%,70%{transform:translateX(-75%)}100%{transform:translateX(75%)}}
@media(max-width:650px){.destiny-landing{padding:14px 17px 26px}.landing-header{padding-bottom:12px}.landing-brand{font-size:16px;letter-spacing:.08em}.graphic-eyebrow{font-size:10px;padding:6px 12px}.desktop-break{display:none}#step-landing h1{font-size:clamp(32px,8.5vw,48px);line-height:1.03;margin:4px 0 14px}.landing-intro{font-size:13px;line-height:1.45}.decoder-stage{max-width:370px;margin:34px auto 28px}.decoder{padding:26px 14px 16px;border-radius:25px}.decoder h2{font-size:16px;top:-18px;padding:5px 20px}.chambers{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.chamber{height:137px;gap:7px}.chamber-symbol{font-size:35px}.chamber-label{font-size:11px}.chamber-result{font-size:22px;min-height:28px}.lock-icon{height:28px;width:26px}.energy-orbit{inset:30% -5% 23%;transform:rotate(-13deg)}.decoder-tooltip{width:160px}.chamber-wrap:nth-child(odd) .decoder-tooltip{left:0;transform:none}.chamber-wrap:nth-child(even) .decoder-tooltip{left:auto;right:0;transform:none}.landing-action{margin-bottom:24px}#step-landing .landing-reveal{font-size:15px;padding:16px 15px;min-height:64px}.landing-benefits{grid-template-columns:1fr 1fr;gap:18px 10px}.landing-benefits>div{font-size:11px;gap:9px;border:0}.landing-benefits span{font-size:36px}.decoder-compact .chambers{grid-template-columns:repeat(4,minmax(0,1fr))}.decoder-compact .chamber{height:91px}.decoder-compact .decoder-tooltip{width:140px}.cosmic-sky{background-size:40% 100%,40% 100%}#birth-dialog{padding-bottom:max(20px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){#step-landing *,#birth-dialog .decoder *,#birth-dialog .decoder,.decoder-reading-reveal{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Feather the extracted atmosphere into the live scene; no flattened UI imagery. */
.cosmic-sky{background:none}.cosmic-sky:before,.cosmic-sky:after{content:'';position:absolute;inset:0 auto 0 0;width:38%;background:url('/assets/decoder/sky-left.webp') left top/100% 100% no-repeat;mask-image:linear-gradient(90deg,#000 25%,transparent 100%)}.cosmic-sky:after{left:auto;right:0;background-image:url('/assets/decoder/sky-right.webp');mask-image:linear-gradient(270deg,#000 25%,transparent 100%)}
#step-landing h1{font-size:clamp(38px,4.8vw,72px);max-width:1300px}.energy-orbit{z-index:0}.decoder{z-index:1}.energy-orbit{inset:24% -10% 12%;border-width:2px}.decoder{background:linear-gradient(145deg,#080d36d9,#210a3ddd)}
@media(max-width:650px){#step-landing h1{font-size:clamp(32px,8.5vw,48px)}.cosmic-sky:before,.cosmic-sky:after{width:65%}.energy-orbit{inset:30% -7% 23%}}
.energy-orbit svg{width:100%;height:100%;overflow:visible}.energy-orbit ellipse{fill:none;stroke:#fffbd3;stroke-width:3;stroke-dasharray:2 210;filter:drop-shadow(0 0 4px #ffd36a);animation:gold-stream 28s linear infinite}.stars{animation:none;opacity:.6}.stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:white;box-shadow:0 0 5px #aee4ff;animation:star-glow 5s ease-in-out infinite alternate}.decoder,.chamber{border-radius:20px 7px 20px 7px}.decoder h2{padding-inline:35px;clip-path:polygon(4% 0,96% 0,100% 50%,96% 100%,4% 100%,0 50%)}
@keyframes gold-stream{to{stroke-dashoffset:-2120}}
@media(max-width:650px){.decoder{border-radius:22px 9px}.chamber{border-radius:12px 5px}.decoder h2{padding-inline:20px}.decoder-compact .decoder{border-radius:12px}.decoder-compact .decoder h2{padding-inline:0}#birth-dialog .date-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}#birth-dialog .date-row select{padding-inline:5px;font-size:13px}}
.landing-benefits span{flex:0 0 52px;display:block}.landing-benefits svg{display:block;width:52px;height:52px;filter:drop-shadow(0 0 5px #ffc35577)}@media(max-width:650px){.landing-benefits span{flex-basis:32px}.landing-benefits svg{width:32px;height:32px}}
@media(prefers-reduced-motion:reduce){#step-landing *::before,#step-landing *::after{animation:none!important;transition:none!important}}

/* Approximate location stays within the existing headline area. */
.landing-location{display:flex;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;width:fit-content;max-width:min(100%,1000px);margin:14px auto 0;padding:7px 16px;border-radius:999px;background:rgba(12,10,35,.78);color:#fff1d2;font:600 clamp(13px,1.45vw,20px)/1.5 'Inter',sans-serif;text-align:center;text-shadow:0 1px 3px #060518;overflow-wrap:anywhere;text-wrap:balance}
.location-message{min-width:0}
.location-beacon{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 24px;width:24px;height:28px;color:#ffd34f}
.location-beacon::before{content:'';position:absolute;top:0;left:0;width:24px;height:24px;box-sizing:border-box;border:1px solid #ffd34f;border-radius:50%;background:radial-gradient(circle,#ffd34f20,transparent 70%);opacity:0;animation:location-pulse 2.8s ease-out infinite;pointer-events:none}
.location-pin{position:relative;display:block;width:22px;height:26px;filter:drop-shadow(0 0 3px #ffc94d88)}
.location-dot{fill:#fff0a6;stroke:#ffe47b;filter:drop-shadow(0 0 2px #ffd34f)}
.location-highlight{color:#ffda64;font-weight:700}
.location-revealed .location-message{animation:location-fade .4s ease-out both}
@keyframes location-fade{from{opacity:.2}to{opacity:1}}
@keyframes location-pulse{0%{transform:scale(.65);opacity:0}12%{opacity:.55}75%,100%{transform:scale(1.85);opacity:0}}
@media(max-width:650px){.landing-location{font-size:13px;margin-top:12px;padding:8px 14px;gap:9px}}
@media(prefers-reduced-motion:reduce){.location-revealed .location-message,.location-beacon::before{animation:none}.location-beacon::before{opacity:.25;transform:none}}