.ss{position:relative;overflow:hidden;background:var(--popcorn-beige)}
.ss__track{display:grid}
.ss__slide{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:32px;padding:56px max(88px,calc((100% - 1200px)/2)) 72px;background:var(--ss-bg);color:var(--ss-ink);opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s}
.ss__slide.is-active{opacity:1;visibility:visible}
.ss__stripes{position:absolute;inset:0;background:repeating-linear-gradient(-35deg,transparent 0 60px,var(--ss-stripe) 60px 120px);pointer-events:none}
.ss__content{position:relative;display:flex;flex-direction:column;gap:16px;max-width:520px}
.ss__eyebrow{font-family:var(--font-display);font-size:var(--text-lg);transform:rotate(-2deg);align-self:flex-start}
.ss__title{margin:0;font-family:var(--font-display);font-size:clamp(40px,6vw,72px);line-height:1;text-wrap:balance}
.ss__copy{margin:0;font-size:var(--text-md);line-height:var(--leading-normal);text-wrap:pretty}
.ss__tag{align-self:flex-start;font-family:var(--font-heading);font-weight:600;font-size:var(--text-sm);letter-spacing:var(--tracking-wide);text-transform:uppercase;background:var(--ss-ink);color:var(--ss-bg);padding:6px 14px;border-radius:999px}
.ss__ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:6px}
.ss__btn{display:inline-flex;align-items:center;font-family:var(--font-heading);font-weight:600;letter-spacing:var(--tracking-wide);text-transform:uppercase;font-size:var(--text-md);padding:14px 30px;border-radius:999px;background:#fff;color:var(--ink-900);border:3px solid var(--ink-900);box-shadow:4px 4px 0 var(--ink-900);text-decoration:none;transition:transform .15s,box-shadow .15s}
.ss__btn:hover{transform:translateY(-2px)}
.ss__btn:active{transform:translateY(2px);box-shadow:1px 1px 0 var(--ink-900)}
.ss__price{font-family:var(--font-heading);font-weight:700;font-size:var(--text-lg)}
.ss__art{position:relative;display:flex;justify-content:center}
.ss__art img:not(.ss__mascot){height:clamp(320px,38vw,480px);width:auto;max-width:100%;object-fit:contain;transform:rotate(4deg) scale(.92);filter:drop-shadow(0 18px 24px rgba(60,30,10,.35));transition:transform .7s cubic-bezier(.34,1.56,.64,1)}
.ss__slide.is-active .ss__art img:not(.ss__mascot){transform:rotate(4deg) scale(1)}
.ss__mascot{position:absolute;left:4%;bottom:-6%;width:clamp(130px,16vw,220px);height:auto;transform:translateY(30px) rotate(-6deg) scale(.6);opacity:0;filter:drop-shadow(0 10px 14px rgba(60,30,10,.3));transition:transform .6s cubic-bezier(.34,1.56,.64,1) .25s,opacity .3s .25s}
.ss__slide.is-active .ss__mascot{transform:translateY(0) rotate(-6deg) scale(1);opacity:1}
.ss__nav{position:absolute;left:0;right:0;bottom:22px;display:flex;justify-content:center;align-items:center;gap:14px;z-index:2}
.ss__dot{width:12px;height:12px;border-radius:999px;border:2px solid var(--ss-dot,#fff);background:transparent;padding:0;cursor:pointer;transition:width .3s}
.ss__dot.is-active{width:32px;background:var(--ss-dot,#fff)}
.ss__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:48px;height:48px;border-radius:999px;border:3px solid var(--ink-900);background:#fff;color:var(--ink-900);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:3px 3px 0 var(--ink-900)}
.ss__arrow--prev{left:16px}.ss__arrow--next{right:16px}
@media (max-width:749px){
.ss__slide{grid-template-columns:1fr;padding:32px 20px 64px;text-align:center;gap:8px}
.ss__art{order:-1}.ss__art img:not(.ss__mascot){height:300px}.ss__mascot{width:120px;left:2%}
.ss__content{align-items:center;margin:0 auto}
.ss__eyebrow,.ss__tag{align-self:center}
.ss__ctas{justify-content:center}
.ss__arrow{display:none}
}
@media (prefers-reduced-motion:reduce){.ss__slide,.ss__art img,.ss__mascot{transition:none}}

.ss__stripes{z-index:0}
.ss__content,.ss__art{position:relative;z-index:1}
.ss .ss__copy,.ss .ss__eyebrow,.ss .ss__price{color:var(--ss-ink)}
.ss .ss__title{color:#fff}
.ss .ss__tag{color:var(--ss-bg);background:var(--ss-ink)}
@media (max-width:749px){.ss__title{font-size:clamp(34px,10vw,48px)}.ss__copy{font-size:var(--text-base)}.ss__art img:not(.ss__mascot){height:260px}.ss__mascot{width:96px;left:4%;bottom:-4%}}
