/* Shared styles for the Build-A-Tin style pages (Pick 6). */
.bat-hero{position:relative;overflow:hidden;background:#143154;min-height:clamp(440px,36vw,620px);display:flex}
.bat-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center}
.bat-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,49,84,.75) 0,rgba(20,49,84,.35) 45%,rgba(20,49,84,0) 65%)}
.bat-hero__inner{position:relative;z-index:2;width:100%;max-width:80rem;margin:0 auto;padding:4.5rem 1.5rem 3.5rem;display:flex;align-items:center}
.bat-hero__copy{max-width:34rem;color:#fff}
.bat-hero__tag{display:inline-flex;align-items:center;gap:.4rem;background:#f8d349;color:#143154;border:2px solid #143154;border-radius:9999px;padding:.3rem .9rem;font-weight:700;font-size:.95rem;transform:rotate(-3deg);box-shadow:3px 3px 0 #143154}
.bat-hero__title{font-size:clamp(3rem,6vw,5.25rem);font-weight:700;line-height:1;margin:.9rem 0 0;color:#fff;text-shadow:0 3px 0 rgba(20,49,84,.6)}
.bat-hero__squiggle{display:block;width:230px;height:16px;margin:.5rem 0 1rem}
.bat-hero__sub{font-size:1.15rem;font-weight:600;line-height:1.55;margin:0 0 1.75rem;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.bat-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem}
.bat-hero__btn{display:inline-block;background:#f8d349;color:#143154;border:3px solid #143154;border-radius:9999px;padding:.7rem 1.6rem;font-size:1.15rem;font-weight:700;box-shadow:4px 4px 0 #143154;transition:transform .15s ease,box-shadow .15s ease}
.bat-hero__btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #143154;color:#143154}
.bat-hero__link{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.bat-hero__link:hover{color:#f8d349}
@media (max-width:767px){
.bat-hero{min-height:520px}
.bat-hero__img{object-position:78% center}
.bat-hero::after{background:linear-gradient(0deg,rgba(20,49,84,.85) 0,rgba(20,49,84,.55) 55%,rgba(20,49,84,.25) 100%)}
.bat-hero__inner{align-items:flex-end;padding:3rem 1.25rem 3.5rem}
}
.bat-wrap{max-width:56rem;margin:0 auto;padding:0 1.5rem;position:relative;z-index:1}
.bat-wrap--wide{max-width:80rem}
.clusters-popcorn-border{position:relative;z-index:20;height:64px;margin:-32px 0;background-repeat:repeat-x;background-position:center;background-size:600px 64px;pointer-events:none}
.bat-intro{background-color:#e8f5fc;padding:5.5rem 0 5rem;position:relative}
.bat-wave{position:relative;z-index:5;height:90px;margin-bottom:-90px;line-height:0;pointer-events:none}
.bat-wave svg{display:block;width:100%;height:100%}
.bat-wave--news ~ section .pt-10{padding-top:7rem!important}
@media (max-width:767px){.bat-wave{height:50px;margin-bottom:-50px}.bat-wave--news ~ section .pt-10{padding-top:5rem!important}}
.bat-fresh{display:flex;align-items:center;gap:1.75rem;background:#f8d349;border:3px solid #143154;border-radius:1.5rem;box-shadow:8px 8px 0 #143154;padding:1.5rem 1.75rem;transform:rotate(-1deg);color:#143154}
.bat-fresh__head{font-size:1.6rem;font-weight:700;line-height:1.15;margin:0 0 .35rem}
.bat-fresh__body{font-size:1.1rem;font-weight:600;margin:0;line-height:1.5}
.bat-stamp{position:relative;flex:0 0 120px;width:120px;height:120px}
.bat-stamp__ring{width:120px;height:120px;display:block;animation:bat-spin 20s linear infinite}
.bat-stamp__tin{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px}
.bat-stamp__tin .clusters-tin-art{width:62px;height:62px;display:block}
@keyframes bat-spin{to{transform:rotate(360deg)}}
.bat-perks{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;list-style:none;margin:2.75rem 0 0;padding:0}
.bat-perks li{display:inline-flex;align-items:center;gap:.5rem;background:#fff;border:2px solid #143154;border-radius:9999px;padding:.4rem 1rem .4rem .45rem;font-family:Fredoka,sans-serif;font-weight:600;color:#143154;box-shadow:3px 3px 0 #143154}
.bat-perks__icon{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:9999px;background:#f8d349;color:#143154}
.bat-steps{background-color:#f8d349;background-size:140px 140px;padding:9rem 0 6.5rem;position:relative;color:#143154}
@media (max-width:767px){.bat-intro{padding:4rem 0 3.5rem}.bat-steps{padding:6rem 0 4.5rem}#build>div{padding-top:5.5rem!important}}
.bat-steps__title{text-align:center;font-weight:700;margin:0;color:#143154}
.bat-steps__squiggle{display:block;width:220px;height:16px;margin:.4rem auto 1rem}
.bat-steps__lead{text-align:center;font-size:1.15rem;font-weight:600;margin:0 0 3.75rem}
.bat-cards{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media (min-width:768px){.bat-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}}
.bat-card{position:relative;background:#fff;border:3px solid #143154;border-radius:1.5rem;box-shadow:6px 6px 0 #143154;padding:2rem 1.5rem 1.75rem;text-align:center;transition:transform .2s ease,box-shadow .2s ease}
.bat-card:nth-child(1){transform:rotate(-2deg)}
.bat-card:nth-child(2){transform:rotate(1.5deg)}
.bat-card:nth-child(3){transform:rotate(-1deg)}
.bat-card:hover{transform:rotate(0) translateY(-6px);box-shadow:10px 10px 0 #143154}
.bat-card__num{position:absolute;top:-1.1rem;left:-1rem;width:3.25rem;height:3.25rem;border-radius:9999px;background:#143154;color:#f8d349;border:3px solid #fff;display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:700;transform:rotate(-10deg);box-shadow:3px 3px 0 rgba(20,49,84,.35)}
.bat-card__art{display:flex;justify-content:center;margin-bottom:1rem}
.bat-card__art .clusters-tin-art{width:170px;height:170px;transition:transform .35s ease}
.bat-card:hover .clusters-tin-art{transform:rotate(14deg) scale(1.04)}
.bat-card__title{font-size:1.6rem;font-weight:700;margin:0 0 .35rem}
.bat-card p{margin:0;font-size:1.05rem}
@media (max-width:767px){
.bat-fresh{flex-direction:column;text-align:center;transform:none;padding:1.5rem 1.25rem}
.bat-fresh__head{font-size:1.35rem}
.bat-card:nth-child(n){transform:none}
}
@media (prefers-reduced-motion:reduce){.bat-stamp__ring{animation:none}.bat-card,.bat-card .clusters-tin-art{transition:none}}
.clusters-tin-layout{display:flex;flex-direction:column;gap:2rem;align-items:center}
.clusters-tin-layout__photo img{display:block;width:100%;max-width:300px;height:auto;margin:0 auto}
.clusters-tin-layout__form{width:100%;max-width:64rem}
.clusters-tin-layout__form .clusters-tin-builder{background:#fff;border:2px solid #143154;border-radius:1.25rem;box-shadow:6px 6px 0 #143154;padding:1.75rem}
.clusters-tin-builder__step h3{color:#143154}
.clusters-tin-builder__card{border-radius:.9rem}
.clusters-tin-builder__choice input:checked+.clusters-tin-builder__card{background:#fff8d6;border-color:#143154;box-shadow:3px 3px 0 #143154}
.bat-size-art{display:block;margin:0 auto .35rem;width:52px;height:52px}
.bat-size-art .clusters-tin-art{width:52px;height:52px;display:block}
.clusters-tin-builder .clusters-flavor-picker__hint+.clusters-flavor-picker__hint{background:#fff8d6;border-left:4px solid #f8d349;border-radius:.5rem;padding:.6rem .85rem;opacity:1}
.clusters-tin-builder__total{border-top:0;background:#e8f5fc;border-radius:.9rem;padding:1rem 1.25rem;margin-top:.5rem}
.bat-more{margin:5rem auto 1rem;max-width:46rem;text-align:center;background:#fff8d6;border:2px solid #143154;border-radius:1.25rem;box-shadow:6px 6px 0 #143154;padding:1.75rem 1.5rem 1.5rem;position:relative}
.bat-more__title{font-weight:700;font-size:1.5rem;margin:0 0 1rem;color:#143154}
.bat-more__pop{position:absolute;top:-30px;left:50%;width:56px;height:56px;margin-left:-28px;background:#fff;border:2px solid #143154;border-radius:9999px;padding:4px}
.bat-more__pop .clusters-tin-art{width:100%;height:100%;display:block}
#build{padding-bottom:2rem}
@media (max-width:640px){.clusters-tin-layout__form .clusters-tin-builder{padding:1.1rem;box-shadow:4px 4px 0 #143154}}
@media (min-width:1024px){
.clusters-tin-layout{flex-direction:row;align-items:flex-start}
.clusters-tin-layout__photo{flex:0 0 34%;position:sticky;top:9rem}
.clusters-tin-layout__photo img{max-width:100%}
.clusters-tin-layout__form{flex:1 1 auto}
}
/* Hero variant: solid colour with an image card on the right. */
.bat-hero--card{background:#143154}
.bat-hero--card::after{display:none}
.bat-hero--card .bat-hero__inner{gap:3rem;justify-content:space-between}
.bat-hero__card{flex:0 0 auto;width:min(420px,38vw);background:#fff;border:3px solid #f8d349;border-radius:1.5rem;padding:.6rem;box-shadow:10px 10px 0 rgba(0,0,0,.28);transform:rotate(2.5deg)}
.bat-hero__card img{display:block;width:100%;height:auto;border-radius:1rem}
@media (max-width:767px){.bat-hero--card .bat-hero__inner{flex-direction:column-reverse;align-items:flex-start;gap:2rem;padding-top:2.5rem}.bat-hero__card{width:min(300px,80vw);align-self:center}}
/* Bag cartoons. */
.bat-card__art .clusters-bag-art{width:170px;height:170px;transition:transform .35s ease}
.bat-card:hover .clusters-bag-art{transform:rotate(-6deg) scale(1.04)}
.bat-stamp__tin .clusters-bag-art{width:62px;height:62px;display:block}
.bat-size-art .clusters-bag-art{width:64px;height:64px;display:block}
.bat-more__pop .clusters-bag-art{width:100%;height:100%;display:block}