/* Private portal slider — Charity Craig coaching page
   Depends on design-system tokens already in your brand CSS:
   --cc-space-*, --cc-text-*, --cc-font-display, --cc-track-heading,
   --cc-so-much-more, --cc-fg-on-deep-muted, --cc-border-on-deep, --cc-ease-out
   Also expects the existing .sec / .navy / .wrap / .eyebrow / .h-alt / .h2 /
   .btn.primary / .reveal classes from the page. */
.ps{max-width:1000px;margin:0 auto;--ps-w:min(66vw,660px);overflow-x:clip}
.ps-stage{position:relative;width:var(--ps-w);max-width:100%;margin:0 auto;aspect-ratio:1.42}
.ps-card{position:absolute;left:50%;top:0;margin:0;width:100%;cursor:pointer;transform:translateX(-50%) scale(.8);opacity:0;pointer-events:none;transition:transform 520ms var(--cc-ease-out),opacity 420ms var(--cc-ease-out)}
.ps-screen{display:block;position:relative;background:#1f2733;border:1px solid rgba(255,255,255,.22);border-radius:10px 10px 3px 3px;padding:1.7% 1.7% 2.6%;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.ps-screen img{width:100%;aspect-ratio:16/10;object-fit:contain;object-position:center;display:block;background:#fff;padding:3.2%;box-sizing:border-box}
.ps-base{display:block;position:relative;width:118%;margin:0 -9%;height:2.2%;min-height:10px;background:linear-gradient(#cfd4dc,#9aa3b0);border-radius:0 0 8px 8px;box-shadow:0 14px 26px rgba(0,0,0,.3)}
.ps-base::after{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:13%;height:42%;background:rgba(61,73,91,.4);border-radius:0 0 6px 6px}
.ps-card.side{opacity:.5;z-index:1;pointer-events:auto}
.ps-card.side .ps-screen::after{content:"";position:absolute;inset:0;background:var(--cc-so-much-more);opacity:.42;border-radius:9px}
.ps-card.prev{transform:translateX(calc(-50% - 43%)) scale(.88)}
.ps-card.next{transform:translateX(calc(-50% + 43%)) scale(.88)}
.ps-card.on{opacity:1;z-index:3;pointer-events:auto;transform:translateX(-50%) scale(1);cursor:default}
.ps-caps{position:relative;min-height:140px;margin-top:var(--cc-space-7);text-align:center}
.ps-cap{position:absolute;inset:0;opacity:0;transform:translateY(10px);transition:opacity 380ms var(--cc-ease-out) 120ms,transform 380ms var(--cc-ease-out) 120ms;pointer-events:none}
.ps-cap.on{opacity:1;transform:none}
.ps-cap b{display:block;font-family:var(--cc-font-display);font-weight:600;text-transform:uppercase;letter-spacing:var(--cc-track-heading);font-size:var(--cc-text-lg);color:#fff}
.ps-cap p{margin:var(--cc-space-4) auto 0;max-width:520px;color:var(--cc-fg-on-deep-muted);font-weight:300;font-size:var(--cc-text-base)}
.ps-nav{display:flex;align-items:center;justify-content:center;gap:var(--cc-space-6);margin-top:var(--cc-space-5)}
.ps-arrow{background:transparent;border:1px solid rgba(255,255,255,.34);color:#fff;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--cc-dur-base) var(--cc-ease-out)}
.ps-arrow:hover{background:rgba(255,255,255,.12);border-color:#fff}
.ps-arrow:active{transform:scale(.96)}
.ps-dots{display:flex;gap:12px}
.ps-dot{width:8px;height:8px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:transparent;cursor:pointer;transition:all var(--cc-dur-base)}
.ps-dot.on{background:var(--cc-golden-hour);border-color:var(--cc-golden-hour)}
.pt-extra{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--cc-space-7);margin-top:var(--cc-space-9);padding-top:var(--cc-space-7);border-top:1px solid var(--cc-border-on-deep)}
.pt-extra b{display:block;font-family:var(--cc-font-display);font-weight:600;text-transform:uppercase;letter-spacing:var(--cc-track-heading);font-size:var(--cc-text-base);color:#fff}
.pt-extra span{display:block;color:var(--cc-fg-on-deep-muted);font-size:var(--cc-text-sm);font-weight:300;margin-top:8px}
@media (max-width:900px){.pt-extra{grid-template-columns:1fr}.ps{--ps-w:78vw}.ps-card.prev{transform:translateX(calc(-50% - 40%)) scale(.86)}.ps-card.next{transform:translateX(calc(-50% + 40%)) scale(.86)}.ps-caps{min-height:170px}}
@media (max-width:600px){
  .ps{--ps-w:92vw;overflow-x:clip}
  /* On mobile, hide side cards to avoid horizontal overflow */
  .ps-card.side{display:none}
  .ps-card.on{transform:translateX(-50%) scale(1)}
  .ps-caps{min-height:auto;position:relative}
  .ps-cap{position:static;opacity:0;transform:translateY(8px);height:0;overflow:hidden;pointer-events:none;transition:none}
  .ps-cap.on{opacity:1;transform:none;height:auto;overflow:visible;pointer-events:auto;transition:opacity 320ms var(--cc-ease-out) 100ms,transform 320ms var(--cc-ease-out) 100ms}
  .ps-cap b{font-size:var(--cc-text-base)}
  .ps-cap p{font-size:var(--cc-text-sm);margin-top:var(--cc-space-3)}
  .ps-nav{gap:var(--cc-space-4);margin-top:var(--cc-space-4)}
  .ps-arrow{width:40px;height:40px;min-width:44px;min-height:44px;width:44px;height:44px}
  /* pt-extra: reduce gap */
  .pt-extra{margin-top:var(--cc-space-7);padding-top:var(--cc-space-5);gap:var(--cc-space-5)}
  .pt-extra b{font-size:var(--cc-text-sm)}
}