/* Dots and arrows shared by all sliders. Colors follow the text color around
   the slider, so they work on light and dark sections.

   Dots: the active dot stretches to a pill (3x width). With autoplay a fill
   slides into the pill from the left with --_progress (0–1), set by useSlider. */
.dV7VhpF69LvAezk69ipz {
  --_dot: 0.4rem;
  --_t: var(--transition-base, 0.3s cubic-bezier(0.65, 0, 0.35, 1));

  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* Set by the slider around it, e.g. Card List's Controls inset. */
  padding-inline: var(--tt-slider-inset, 0);
}

.mmOxD9ihEiSbSmDBuH2b {
  display: block;
}

.dV7VhpF69LvAezk69ipz [data-part="dots"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--_dot) * 0.75);
}

/* The button is larger than the dot it draws, so it's easy to hit. */
.dV7VhpF69LvAezk69ipz [data-part="dot"] {
  display: flex;
  align-items: center;
  width: var(--_dot);
  height: calc(var(--_dot) * 3);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: width var(--_t);
}

.dV7VhpF69LvAezk69ipz [data-part="dot"][data-active] {
  width: calc(var(--_dot) * 3);
}

/* The visible dot / pill. overflow: hidden clips the fill to the pill shape. */
.dV7VhpF69LvAezk69ipz [data-part="pill"] {
  position: relative;
  /* isolation: Safari otherwise ignores the rounded clip for a transformed child. */
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  height: var(--_dot);
  border-radius: var(--_dot);
  background: color-mix(in srgb, currentColor 22%, transparent);
  transition: background-color var(--_t);
}

.dV7VhpF69LvAezk69ipz [data-part="dot"]:hover [data-part="pill"] {
  background: color-mix(in srgb, currentColor 40%, transparent);
}

/* Full-width fill that slides in from the left. Moving it with transform keeps
   its shape (and any gradient) intact and costs no layout work. Inactive dots
   keep it outside the pill. */
.dV7VhpF69LvAezk69ipz [data-part="fill"] {
  position: absolute;
  inset: 0;
  background: var(--tt-slider-fill, currentColor);
  transform: translateX(-100%);
}

/* Without autoplay the active pill is simply full. */
.dV7VhpF69LvAezk69ipz [data-part="dot"][data-active] [data-part="fill"] {
  transform: none;
}

.dV7VhpF69LvAezk69ipz[data-autoplay] [data-part="dot"][data-active] [data-part="fill"] {
  transform: translateX(calc((var(--_progress, 0) - 1) * 100%));
}

.dV7VhpF69LvAezk69ipz[data-progress-color="brand"] {
  --tt-slider-fill: var(--purple-600, #6f00ff);
}

.dV7VhpF69LvAezk69ipz[data-progress-color="gradient"] {
  --tt-slider-fill: linear-gradient(90deg, #6085ff 10%, #75acff 38%, #a46bff 90%);
}

.dV7VhpF69LvAezk69ipz [data-part="dot"]:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.55);
  outline-offset: 2px;
  border-radius: var(--_dot);
}

.dV7VhpF69LvAezk69ipz [data-part="arrows"] {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

/* Stacked: dots and arrows centered, one above the other. */
.dV7VhpF69LvAezk69ipz[data-layout="stacked"] {
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.75rem;
}

.dV7VhpF69LvAezk69ipz[data-layout="stacked"] [data-part="arrows"] {
  margin-left: 0;
}

.dV7VhpF69LvAezk69ipz [data-part="arrow"] {
  display: inline-flex;
  transition: opacity var(--_t);
}

.dV7VhpF69LvAezk69ipz [data-part="arrow"][data-disabled] {
  opacity: 0.3;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .dV7VhpF69LvAezk69ipz [data-part="dot"] {
    transition: none;
  }
}

/* One class on the root, everything else via data-* (see README "Rules").
   The list owns the layout; cards only take --tt-card-width (set inline by
   CardList.tsx on each slotted card). Columns set how many cards sit side by
   side per breakpoint. As a grid they wrap and center the last row, like
   .tt-feature-list on the live site; from the Slider breakpoint on they scroll
   natively with scroll-snap (replacing the Splide card sliders) and the next
   card peeks in.

   Breakpoints match Webflow: Tablet <= 991px, Mobile <= 767px. */
.nZNW1JNS7RNEDDcSWYHE {
  --_gap: 1rem;
  --_cols: 3;
  /* How far the next card shows in a slider; 0 in columns. */
  --_peek-size: 2rem;
  --_peek: 0px;
  --_min-card: 13rem;
  --_card-width: calc((100% - (var(--_cols) - 1) * var(--_gap) - var(--_peek)) / var(--_cols));
  /* A scrolling track clips everything outside it. Sliders get this much
     invisible room (padding pulled back with a negative margin), so a card's
     hover growth and shadow aren't cut off. */
  --_room-x: 0.75rem;
  --_room-y: 3rem;
  --_room-start: var(--_room-x);
  --_room-end: var(--_room-x);

  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.nZNW1JNS7RNEDDcSWYHE,
.nZNW1JNS7RNEDDcSWYHE *,
.nZNW1JNS7RNEDDcSWYHE::before,
.nZNW1JNS7RNEDDcSWYHE::after {
  box-sizing: border-box;
}

.QPDlul5m3GV2rLWMReYp {
  display: block;
}

/* ---------- Header ----------
   Heading slot above the cards, optionally with the arrows next to it.
   z-index: a slider track reaches up into this area with its invisible room
   (see --_room-y) and would otherwise cover the arrows. */
.nZNW1JNS7RNEDDcSWYHE [data-part="header"] {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.nZNW1JNS7RNEDDcSWYHE [data-part="header"][data-empty] {
  display: none;
}

.nZNW1JNS7RNEDDcSWYHE [data-part="header"][data-layout="center"] {
  align-items: center;
  text-align: center;
}

.nZNW1JNS7RNEDDcSWYHE [data-part="header"][data-layout="left-with-arrows"] {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
}

.nZNW1JNS7RNEDDcSWYHE [data-part="heading"] {
  min-width: 0;
}

/* ---------- Track ---------- */

/* contain: inline-size keeps a long slider from reporting all its cards as
   minimum width, which would stretch grid or flex parents on the page. */
.nZNW1JNS7RNEDDcSWYHE [data-part="track"] {
  --tt-card-width: var(--_card-width);

  contain: inline-size;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--_gap);
}

/* Webflow wraps slot content in one element; display: contents lets each
   card become a flex item of the track. */
.nZNW1JNS7RNEDDcSWYHE [data-part="track"] ::slotted(*) {
  display: contents;
}

.nZNW1JNS7RNEDDcSWYHE[data-align="left"] [data-part="track"] {
  justify-content: flex-start;
}

/* ---------- Gap and peek ---------- */

.nZNW1JNS7RNEDDcSWYHE[data-gap="small"] { --_gap: 0.5rem; }
.nZNW1JNS7RNEDDcSWYHE[data-gap="large"] { --_gap: 1.5rem; }
.nZNW1JNS7RNEDDcSWYHE[data-gap="x-large"] { --_gap: 2.5rem; }

.nZNW1JNS7RNEDDcSWYHE[data-peek="none"] { --_peek-size: 0px; }
.nZNW1JNS7RNEDDcSWYHE[data-peek="large"] { --_peek-size: 5rem; }

/* Controls inset: dots and arrows move in from the sides, Medium to the
   text inside the cards (their padding: 1.5rem, 1rem on mobile). */
.nZNW1JNS7RNEDDcSWYHE[data-controls-inset="small"] { --tt-slider-inset: 0.75rem; }
.nZNW1JNS7RNEDDcSWYHE[data-controls-inset="medium"] { --tt-slider-inset: 1.5rem; }

@media (max-width: 767px) {
  .nZNW1JNS7RNEDDcSWYHE[data-controls-inset="medium"] { --tt-slider-inset: 1rem; }
}

/* Bleed: Screen edge. The track's room reaches out to the window edges
   (distances from useBleed.ts), so the cards keep the grid width and the next
   ones show outside the frame. They do the peeking, so Peek is off. */
.nZNW1JNS7RNEDDcSWYHE[data-bleed] {
  --_peek-size: 0px;
  --_room-start: var(--_bleed-start, var(--_room-x));
  --_room-end: var(--_bleed-end, var(--_room-x));
}

/* ---------- Columns per breakpoint ----------
   The number of cards side by side, in a grid and in a slider alike. */

.nZNW1JNS7RNEDDcSWYHE[data-desktop="1"] { --_cols: 1; }
.nZNW1JNS7RNEDDcSWYHE[data-desktop="2"] { --_cols: 2; }
.nZNW1JNS7RNEDDcSWYHE[data-desktop="3"] { --_cols: 3; }
.nZNW1JNS7RNEDDcSWYHE[data-desktop="4"] { --_cols: 4; }

@media (max-width: 991px) {
  .nZNW1JNS7RNEDDcSWYHE[data-tablet="1"] { --_cols: 1; }
  .nZNW1JNS7RNEDDcSWYHE[data-tablet="2"] { --_cols: 2; }
  .nZNW1JNS7RNEDDcSWYHE[data-tablet="3"] { --_cols: 3; }
  .nZNW1JNS7RNEDDcSWYHE[data-tablet="4"] { --_cols: 4; }
}

@media (max-width: 767px) {
  .nZNW1JNS7RNEDDcSWYHE[data-mobile="1"] { --_cols: 1; }
  .nZNW1JNS7RNEDDcSWYHE[data-mobile="2"] { --_cols: 2; }
  .nZNW1JNS7RNEDDcSWYHE[data-mobile="3"] { --_cols: 3; }
  .nZNW1JNS7RNEDDcSWYHE[data-mobile="4"] { --_cols: 4; }
}

/* ---------- Slider from a breakpoint on ----------
   The grid turns into a slider at the chosen breakpoint and stays one below
   it: same columns, plus a peek of the next card. */

.nZNW1JNS7RNEDDcSWYHE[data-slider="always"],
.nZNW1JNS7RNEDDcSWYHE[data-slider="auto"] {
  --_peek: var(--_peek-size);
}

/* Auto: one row of columns that only scrolls when the cards would get
   narrower than the minimum width (like the old "slider only when it
   overflows"). Wide screens show a plain row, small ones a slider. */
.nZNW1JNS7RNEDDcSWYHE[data-slider="auto"] {
  --_card-width: max(
    calc((100% - (var(--_cols) - 1) * var(--_gap) - var(--_peek)) / var(--_cols)),
    var(--_min-card)
  );
}

.nZNW1JNS7RNEDDcSWYHE[data-min-card="small"] { --_min-card: 11rem; }
.nZNW1JNS7RNEDDcSWYHE[data-min-card="large"] { --_min-card: 16rem; }

.nZNW1JNS7RNEDDcSWYHE[data-slider="always"] [data-part="track"],
.nZNW1JNS7RNEDDcSWYHE[data-slider="auto"] [data-part="track"] {
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: var(--_room-y) var(--_room-end) var(--_room-y) var(--_room-start);
  margin: calc(var(--_room-y) * -1) calc(var(--_room-end) * -1) calc(var(--_room-y) * -1) calc(var(--_room-start) * -1);
  scroll-padding-inline: var(--_room-start) var(--_room-end);
}

@media (max-width: 991px) {
  .nZNW1JNS7RNEDDcSWYHE[data-slider="tablet"] {
    --_peek: var(--_peek-size);
  }

  .nZNW1JNS7RNEDDcSWYHE[data-slider="tablet"] [data-part="track"] {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: var(--_room-y) var(--_room-end) var(--_room-y) var(--_room-start);
    margin: calc(var(--_room-y) * -1) calc(var(--_room-end) * -1) calc(var(--_room-y) * -1) calc(var(--_room-start) * -1);
    scroll-padding-inline: var(--_room-start) var(--_room-end);
  }
}

@media (max-width: 767px) {
  .nZNW1JNS7RNEDDcSWYHE[data-slider="mobile"] {
    --_peek: var(--_peek-size);
  }

  .nZNW1JNS7RNEDDcSWYHE[data-slider="mobile"] [data-part="track"] {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: var(--_room-y) var(--_room-end) var(--_room-y) var(--_room-start);
    margin: calc(var(--_room-y) * -1) calc(var(--_room-end) * -1) calc(var(--_room-y) * -1) calc(var(--_room-start) * -1);
    scroll-padding-inline: var(--_room-start) var(--_room-end);
  }
}

/* When all cards fit, a slider has nothing to peek at: cards fill the row. */
.nZNW1JNS7RNEDDcSWYHE:not([data-overflow]) {
  --_peek: 0px;
}

.nZNW1JNS7RNEDDcSWYHE [data-part="track"]::-webkit-scrollbar {
  display: none;
}

/* Mouse drag (useSlider): no snapping or text selection while dragging. */
.nZNW1JNS7RNEDDcSWYHE [data-part="track"][data-dragging] {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}