:root{
  --bg:#fff;
  --ink:#0b0b0b;
  --accent:#10f7e2;
  --chip:#fff;
  --shadow:0 25px 40px rgba(0,0,0,.06);
  --stage-pad: clamp(40px, 6vh, 80px);
  --slide-h: clamp(220px, 48vh, 520px);
  --controls-gap: clamp(8px, 2vh, 24px);
}

.slp .stage{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding:var(--stage-pad) 0; position:relative; overflow:hidden; color:var(--ink); background:var(--bg); }
.slp .viewport{ width:100vw; position:relative; overflow:visible; }
.slp .track{ display:flex; align-items:center; gap:clamp(16px,3vw,40px); will-change:transform; transform:translate3d(0,0,0); }
.slp .slide{ flex:0 0 clamp(280px,62vw,980px); height:var(--slide-h); border-radius:24px; background:var(--accent); box-shadow:var(--shadow); position:relative; overflow:hidden; transform-origin:center center; }
.slp .slide .media{ position:absolute; inset:0; z-index:0 }
.slp .slide .media::after{ content:""; position:absolute; inset:0; background:var(--accent); opacity:var(--overlay-opacity, .5); pointer-events:none }
.slp .slide .media img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block }

.slp .card-inner{ position:absolute; inset:0; z-index:1; padding:clamp(18px,3.5vw,48px); display:flex; flex-direction:column; justify-content:center; max-width:min(720px,80%); }
.slp .eyebrow{ opacity:.85; font-size:clamp(12px,.9vw,14px) }
.slp .title{ font-size:clamp(28px,4.6vw,54px); line-height:1.05; font-weight:800; margin:.1em 0 .2em }
.slp .desc{ font-size:clamp(14px,1.3vw,18px); opacity:.85 }
.slp .chips{ display:flex; gap:10px; margin:.9rem 0 1.2rem }
.slp .chip{ background:var(--chip); border-radius:999px; padding:.45rem .85rem; font-size:12px; box-shadow:0 4px 10px rgba(0,0,0,.06) }
.slp .cta{ display:inline-flex; align-items:center; gap:.45rem; font-weight:600; text-decoration:none; color:inherit }
.slp .cta svg{ width:18px; height:18px; transform:translateX(0); transition:transform .25s ease }
.slp .cta:hover svg{ transform:translateX(4px) }

/* Controls just below the cards */
.slp .controls{ position:absolute; left:50%; top:calc(var(--stage-pad) + var(--slide-h) + var(--controls-gap)); translate:-50% 0; display:flex; gap:20px; z-index:3 }
.slp .btn{ appearance:none; border:0; background:transparent; padding:0; cursor:pointer; width:56px; height:56px; border-radius:50%; background:var(--accent); box-shadow:var(--shadow); display:grid; place-items:center; transition:transform .2s ease, filter .2s ease }
.slp .btn:hover{ filter:brightness(1.02); transform:translateY(-2px) }
.slp .btn:active{ transform:translateY(0) scale(.98) }
.slp .btn svg{ width:28px; height:28px }
.slp .btn:focus-visible{ outline:3px solid #111; outline-offset:3px }

/* Dots pagination near the bottom edge of the card */
.slp .dots{ position:absolute; left:50%; top:calc(var(--stage-pad) + var(--slide-h) - clamp(22px, 1.8vh, 36px)); translate:-50% 0; display:flex; gap:10px; z-index:5 }
.slp .dot{ width:10px; height:10px; border-radius:999px; background:rgba(0,0,0,.15); box-shadow:var(--shadow); border:0; padding:0; cursor:pointer }
.slp .dot[aria-selected="true"]{ background:var(--accent) }

@media (max-width:680px){
  .slp .controls{ gap:14px }
  .slp .btn{ width:48px; height:48px }
  .slp .btn svg{ width:24px; height:24px }
  .slp .chip {display: none;}
}

@media (prefers-reduced-motion: reduce){
  .slp .track, .slp .slide, .slp .cta svg{ transition:none !important }
}