.slider{container-type:inline-size;aspect-ratio:1/1;display:flex;flex-direction:column;background:#fff}
.slides{flex:1;min-height:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.slides::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:start;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(18px,5cqw,34px);overflow:hidden}
.slide.s-hero{padding:12px 0}
.slider .slide .tag{margin-bottom:clamp(10px,3cqw,18px);font-size:clamp(1rem,3.4cqw,1.4rem)}
.slider .slide h1{font-size:clamp(2.6rem,14.5cqw,6.2rem);line-height:.92}
.slider .slide h2{font-size:clamp(2.2rem,10.5cqw,4.4rem);line-height:.95}
.slider .slide p{margin-top:clamp(10px,2.6cqw,16px);max-width:40ch;font-size:clamp(.95rem,2.6cqw,1.1rem);color:inherit}
.slider .slide.s-hero p{color:var(--muted)}
.slider .slide .cta{margin-top:clamp(14px,3.5cqw,22px);gap:12px}
.slider .slide .btn{padding:10px 20px;box-shadow:4px 4px 0 var(--ink)}
.slider .slide .btn.main{box-shadow:4px 4px 0 var(--cyan)}
.kicker{display:inline-block;margin-bottom:12px;padding-bottom:2px;border-bottom:3px solid currentColor;font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.f-cyan{background:var(--cyan);color:var(--ink)}
.f-pink{background:var(--pink);color:var(--ink)}
.f-violet{background:var(--violet);color:#fff}
.f-blue{background:var(--blue);color:#fff}
.slide.has-img{justify-content:flex-end;color:#fff;background-size:cover;background-position:center}
.slide.has-img::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(13,14,20,.88),rgba(13,14,20,.1) 70%)}
.slide.has-img>*{position:relative}
.ctrl{flex:none;display:flex;align-items:center;justify-content:space-between;height:56px;padding:0}
.dots{display:flex;gap:10px}
.dots button{position:relative;width:12px;height:12px;padding:0;background:#c9ccd6;border:0;cursor:pointer}
.dots button::after{content:"";position:absolute;inset:-9px}
.dots button[aria-current="true"]{background:var(--ink)}
.arrows{display:flex;gap:8px}
.arrows button{width:42px;height:42px;display:grid;place-items:center;background:none;border:0;color:var(--ink);cursor:pointer}
.arrows button:hover,.arrows button:focus-visible{color:var(--pink)}
.arrows svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:3}
.hero .wrap>*{min-width:0}
@media (max-width:960px){.slider{max-width:640px}}
@media (max-width:560px){.slider{aspect-ratio:3/4}}