/* swipe-snap.css — dependency-free horizontal swipe via CSS scroll-snap.
   Loaded LAST so it overrides the Swipe Pages framework rules that assumed the
   jQuery/flickity runtime. Shared across all landing pages. */

/* Static fallback for the responsive units before swipe.js refines them per-slide
   (prevents a flash of mis-sized text on first paint). */
:root { --sw: 3.8; --sh: 6; }

/* Navy backdrop everywhere so desktop margins match the phone column. */
body { background: #0b1021; }

/* The original hid these until the runtime initialised — reveal them. */
.swipe { visibility: visible; }
.sp-animate, .sp-line-animate { visibility: visible; }

/* Horizontal scroll-snap track (replaces the swipe.js library translateX).
   Uses 3 classes to out-rank the base `div.ED div.sp-slides-wrap{overflow:hidden}`. */
.carousel.swipe.sp-slides-wrap {
  flex: 1 1 auto;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel.swipe.sp-slides-wrap::-webkit-scrollbar { display: none; }

/* NB: .YD keeps the base width:100% (a definite size). Giving it an intrinsic
   width (max-content) while children use `flex-basis:90%` creates a sizing loop. */
.sp-slide-wrap { flex: 0 0 90%; scroll-snap-align: center; }

/* Desktop: keep the mobile-style full-card swipe but centre it like a phone
   column and show the prev/next arrows (hidden on touch). */
@media (min-width: 768px) {
  .lC { max-width: 480px; margin: 0 auto; }
  .sp-slide-nav-btn { display: block; }
}