/* Fetchly Testimonial Carousel — from Figma node 14083:24451.
   Values are the Figma mock unscaled by /0.7984 (the node is a 0.798x instance). */

/* Make the component instance fill and center inside whatever element it is
   dropped into. :host targets the shadow root host in Webflow; margin auto
   centers it in flex/grid parents. */
:host {
  display: block;
  width: 100%;
  height: 100%;
  margin: auto;
}

.GFFUd7WYFWmyjBIffk_M {
  /* Prop overrides (--tcx-*) → site variables → Figma/brand fallbacks */
  --_bg: var(--tcx-bg, #f5f3ef);
  --_line: var(--tcx-line, #e5e4df);
  --_card: var(--tcx-card, #ffffff);
  --_star: var(--tcx-star, #ecb114);
  --_text: var(--tcx-text, var(--_primitives---colors--neutral-darkest, #09090b));
  --_muted: var(--tcx-muted, #71717a);
  --_pattern: var(--tcx-pattern, var(--_line));

  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: var(--tcx-min-h, 432px);
  margin: auto;
  padding: var(--tcx-pad, 44px); /* gap between tile edge and card */
  background: var(--_bg);
  border: 1px solid var(--_line);
  border-radius: var(--tcx-radius, 22px);
  overflow: hidden; /* clips the contour bleed AND the flicked cards */
  font-family: var(--_typography---font-styles--body, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

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

/* Contour pattern, anchored top right and bleeding past the edge (clipped) */
.NR4nR4iD_qxvEa_pjtQ9 {
  /* Covers the tile at any aspect ratio, anchored top right with the Figma
     bleed; preserveAspectRatio="xMaxYMin slice" crops like background cover. */
  position: absolute;
  top: -1px;
  right: -143px;
  width: max(538px, calc(100% + 143px));
  height: max(497px, calc(100% + 2px));
  color: var(--_pattern);
  pointer-events: none;
}

.G_7wVJJ9USnYSYDRJZ1J {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  /* Card fills the tile minus the Padding prop on the root */
  width: 100%;
  min-width: 0;
}

/* Stage stacks every card in the same grid cell so height = tallest card */
.o4hkDR0ADpmonYeG2NJ6 {
  display: grid;
  width: 100%;
  touch-action: pan-y;
  cursor: grab;
}

.SgaTXy5EKocAvrsYIExj {
  cursor: grabbing;
}

.NyQB__rjctaj3zik8VOn {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 236px;
  padding: 16px;
  background: var(--_card);
  border-radius: 10px;
  box-shadow: 0 9px 6px rgba(0, 0, 0, 0.03);
  user-select: none;
  -webkit-user-select: none;
  will-change: transform, opacity;
}

.m3quhAmmPOP0Bi3axq62 {
  z-index: 2;
  opacity: 1;
  transform: translateX(0) rotate(0deg);
  transition:
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 240ms ease;
}

.rK5UeukafmZC8kbIKcYB,
.OcgQ3GyssLtpFpYtmpfb {
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition:
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 300ms ease 260ms; /* stays visible while flying, fades near the edge */
}

.rK5UeukafmZC8kbIKcYB {
  transform: translateX(-135%) rotate(-8deg);
}

.OcgQ3GyssLtpFpYtmpfb {
  transform: translateX(135%) rotate(8deg);
}

/* Parked cards wait offscreen on the entry side, with no transition so they
   jump into position instantly and animate only when they become active. */
.Ed7OeFBNhlWSd6yuvq6k,
.MmVm6dTn0J_nQiStofWA {
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: none;
}

.Ed7OeFBNhlWSd6yuvq6k {
  transform: translateX(135%) rotate(8deg);
}

.MmVm6dTn0J_nQiStofWA {
  transform: translateX(-135%) rotate(-8deg);
}

.tAlscjvC_Rmm4VWHAFAX {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
}

.MdXulnjvEUqvn58i6lgC {
  width: 20px;
  height: 20px;
  color: var(--_star);
  flex-shrink: 0;
}

.T6e8GRFBPHtxN3a6902g {
  flex: 1 0 0;
  margin: 0 0 16px;
  padding-bottom: 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--_text);
  overflow-wrap: break-word;
}

.p6i6BZvReJtvM7JtsQZW {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.Sy4qiZy51QTLb1fW9Bvw,
.eo7MWbDkscST7YZxVy7_ {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.24px;
  white-space: nowrap;
}

.Sy4qiZy51QTLb1fW9Bvw {
  color: var(--_text);
}

.eo7MWbDkscST7YZxVy7_ {
  color: var(--_muted);
}

.QP_GLy5CProLrSsoW1AJ {
  display: flex;
  align-items: center;
  gap: 8px;
}

.MN79O153uYHBoBmpm2Xb {
  width: 14px;
  height: 14px;
  padding: 0;
  background: var(--_card);
  border: 1px solid var(--_line);
  border-radius: 999px;
  cursor: pointer;
  transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1);
  appearance: none;
  -webkit-appearance: none;
}

.kzK00n0QDic5TPysLH9H {
  width: 38px;
}

.MN79O153uYHBoBmpm2Xb:focus-visible {
  outline: 2px solid var(--_text);
  outline-offset: 2px;
}

/* Mobile compact mode (Webflow mobile portrait, 479px and below): white tile,
   no pattern, no indicators, card stretches to fill the whole tile. */
@media (max-width: 479px) {
  .sZtpaLrbhzwTJM8Z3BQg {
    background: var(--_card);
    padding: 0;
  }

  .sZtpaLrbhzwTJM8Z3BQg .NR4nR4iD_qxvEa_pjtQ9,
  .sZtpaLrbhzwTJM8Z3BQg .QP_GLy5CProLrSsoW1AJ {
    display: none;
  }

  .sZtpaLrbhzwTJM8Z3BQg .G_7wVJJ9USnYSYDRJZ1J {
    width: 100%;
    align-self: stretch;
    gap: 0;
  }

  .sZtpaLrbhzwTJM8Z3BQg .o4hkDR0ADpmonYeG2NJ6 {
    flex: 1;
  }

  .sZtpaLrbhzwTJM8Z3BQg .NyQB__rjctaj3zik8VOn {
    border-radius: 0;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .m3quhAmmPOP0Bi3axq62,
  .rK5UeukafmZC8kbIKcYB,
  .OcgQ3GyssLtpFpYtmpfb {
    transition: opacity 300ms ease;
    transform: none;
  }

  .Ed7OeFBNhlWSd6yuvq6k,
  .MmVm6dTn0J_nQiStofWA {
    transform: none;
  }

  .MN79O153uYHBoBmpm2Xb {
    transition: none;
  }
}