/* Save, Spend & Splurge: equip screen and the three picks */
.hero{position:relative;display:grid;grid-template-columns:560px 1fr;gap:56px;align-items:center;max-width:1280px;margin:0 auto;padding:40px 48px 48px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 34% 60% at 24% 50%,var(--glow) 0%,transparent 72%)}
.shot{position:relative;height:500px}
.hero .portrait{width:330px}
.hero .portrait figcaption{padding:40px 20px 16px}
.btl{position:absolute;right:20px;bottom:0;height:86%;z-index:2}
.btl::after{content:"";position:absolute;left:50%;bottom:-2%;width:110%;height:44px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);z-index:-1}
.btl img{height:100%;width:auto;max-width:none;filter:drop-shadow(0 30px 50px rgba(0,0,0,.7));transform:rotate(4deg);animation:float 6s ease-in-out infinite}
.btl img.swap{animation:equip .45s cubic-bezier(.2,1,.3,1),float 6s ease-in-out .45s infinite}
@keyframes equip{from{opacity:0;transform:rotate(4deg) translateY(-30px) scale(.9)}}
.kicker{font:700 15px var(--h);letter-spacing:.24em;text-transform:uppercase;color:var(--acc)}
.hero h1{font:700 72px/.92 var(--h);text-transform:uppercase;margin-top:8px}
.game{margin-top:6px;font:600 16px var(--h);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.intro p{margin-top:18px;max-width:480px;font-size:18px;color:var(--soft)}
.eq{display:flex;align-items:center;gap:12px;margin-top:26px;padding-top:16px;border-top:1px solid var(--line);font:700 14px var(--h);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.eq b{font-size:22px;letter-spacing:.04em;color:var(--ink)}
.sss-prose{max-width:776px;margin:0 auto 64px;padding:0 48px}

.picks{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1280px;margin:0 auto;padding:0 48px 64px}
.picks:empty{display:none}
.pick{position:relative;display:flex;flex-direction:column;background:var(--tile);border:1px solid var(--line);border-top:3px solid var(--r);transition:border-color .15s,transform .15s}
.pick:hover{transform:translateY(-3px)}
.pick.on{border-color:var(--r);box-shadow:0 0 0 1px var(--r)}
.ptop{display:flex;justify-content:space-between;align-items:center;padding:16px 20px 0}
.ptop h2{font:700 30px/1 var(--h);text-transform:uppercase;letter-spacing:.04em}
.ptop .rar{font-size:13px}
.pimg{display:grid;place-items:center;height:220px;margin:12px 20px 0;background:radial-gradient(ellipse 60% 40% at 50% 85%,rgba(0,0,0,.45),transparent),var(--sky1)}
.pimg img{height:180px;width:auto;filter:drop-shadow(0 14px 18px rgba(0,0,0,.6))}
.pbody{display:flex;flex-direction:column;flex:1;padding:16px 20px 20px}
.pbody small{font-size:13px;color:var(--dim)}
.pbody h3{font:700 26px/1.05 var(--h);text-transform:uppercase}
.pbody .shop{margin-top:10px}
.pbody .shop a{padding:6px 12px}
.pbody .shop b{font-size:18px}
.pbody .disclose{margin-top:6px;font-size:12px}
.ptext p{margin-top:12px;font:400 16px/1.6 var(--b);color:var(--soft)}
.pfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:18px}
.equip{display:inline-flex;gap:10px;align-items:center;font:700 16px var(--h);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.equip kbd{border-radius:50%;width:24px;height:24px;padding:0}
.equip:hover{color:var(--ink)}
.pick.on .equip{color:var(--r)}
.more{font:700 14px var(--h);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.more:hover{color:var(--ink)}

@media(max-width:1100px){.hero{grid-template-columns:1fr 1fr;gap:32px}.hero .portrait{width:280px}.picks{grid-template-columns:1fr 1fr}}
@media(max-width:900px){
 .hero{grid-template-columns:1fr;gap:20px;padding:24px 16px 32px}
 .shot{height:330px}.hero .portrait{width:220px}.btl{right:0}
 .hero h1{font-size:50px}.intro p{font-size:17px}
 .picks{grid-template-columns:1fr;padding:0 16px 40px}
 .sss-prose{padding:0 16px}
}