/* Self-contained: rendered inside a Shadow DOM, so global site CSS does not
   apply. Site variables (--_theme---*, --_typography---*, etc.) still inherit
   through the shadow boundary. */

* {
  box-sizing: border-box;
}

/* --- Slider mode (Slider: Yes) ------------------------------------------ */

.swiper {
  position: relative;
  overflow: hidden;
  width: 100%;
  background-color: transparent;
}

/* Vertical padding must exceed the icon circle's overhang (~26.5px). */
.swiper.is-carousel {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  padding-top: var(--_spacing---space--32);
  padding-bottom: var(--_spacing---space--32);
}

.swiper-wrapper {
  display: flex;
  width: 100%;
  align-items: stretch;
}

.swiper-slide {
  width: 100%;
  flex: 0 0 auto;
}

.swiper-slide > * {
  width: 100%;
}

.swiper-slide.is-feature-cards {
  height: auto !important;
}

/* Set by the carousel script when cards don't fill one view. */
.swiper.is-carousel.is-grid-mode .swiper-wrapper {
  gap: 24px;
}

.swiper.is-carousel.is-grid-mode .swiper-slide {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

.swiper.is-carousel.is-grid-mode .slider_gradient {
  display: none;
}

.slider_gradient {
  --gradient-color: var(--_theme---background);
  position: absolute;
  inset: 0% auto 0% 0%;
  top: 0;
  left: 0;
  z-index: 2;
  width: 15%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(270deg,
    color-mix(in srgb, var(--gradient-color) 0%, transparent) 0%,
    color-mix(in srgb, var(--gradient-color) 0.552296%, transparent) 8.07%,
    color-mix(in srgb, var(--gradient-color) 2.17837%, transparent) 15.54%,
    color-mix(in srgb, var(--gradient-color) 4.832%, transparent) 22.5%,
    color-mix(in srgb, var(--gradient-color) 8.46696%, transparent) 29.04%,
    color-mix(in srgb, var(--gradient-color) 13.037%, transparent) 35.26%,
    color-mix(in srgb, var(--gradient-color) 18.496%, transparent) 41.25%,
    color-mix(in srgb, var(--gradient-color) 24.7976%, transparent) 47.1%,
    color-mix(in srgb, var(--gradient-color) 31.8957%, transparent) 52.9%,
    color-mix(in srgb, var(--gradient-color) 39.744%, transparent) 58.75%,
    color-mix(in srgb, var(--gradient-color) 48.2963%, transparent) 64.74%,
    color-mix(in srgb, var(--gradient-color) 57.5064%, transparent) 70.96%,
    color-mix(in srgb, var(--gradient-color) 67.328%, transparent) 77.5%,
    color-mix(in srgb, var(--gradient-color) 77.715%, transparent) 84.46%,
    color-mix(in srgb, var(--gradient-color) 88.621%, transparent) 91.93%,
    var(--gradient-color) 100%
  );
}

.slider_gradient.is-right {
  left: auto;
  right: 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--gradient-color) 0%, transparent) 0%,
    color-mix(in srgb, var(--gradient-color) 0.552296%, transparent) 8.07%,
    color-mix(in srgb, var(--gradient-color) 2.17837%, transparent) 15.54%,
    color-mix(in srgb, var(--gradient-color) 4.832%, transparent) 22.5%,
    color-mix(in srgb, var(--gradient-color) 8.46696%, transparent) 29.04%,
    color-mix(in srgb, var(--gradient-color) 13.037%, transparent) 35.26%,
    color-mix(in srgb, var(--gradient-color) 18.496%, transparent) 41.25%,
    color-mix(in srgb, var(--gradient-color) 24.7976%, transparent) 47.1%,
    color-mix(in srgb, var(--gradient-color) 31.8957%, transparent) 52.9%,
    color-mix(in srgb, var(--gradient-color) 39.744%, transparent) 58.75%,
    color-mix(in srgb, var(--gradient-color) 48.2963%, transparent) 64.74%,
    color-mix(in srgb, var(--gradient-color) 57.5064%, transparent) 70.96%,
    color-mix(in srgb, var(--gradient-color) 67.328%, transparent) 77.5%,
    color-mix(in srgb, var(--gradient-color) 77.715%, transparent) 84.46%,
    color-mix(in srgb, var(--gradient-color) 88.621%, transparent) 91.93%,
    var(--gradient-color) 100%
  );
}

/* --- Grid mode (Slider: No) --------------------------------------------- */

/* Larger row gap leaves room for the icon circle's overhang. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols-desktop, 3), minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 48px;
  width: 100%;
  padding-top: var(--_spacing---space--32);
  padding-bottom: var(--_spacing---space--32);
}

@media (max-width: 991px) {
  .card-grid {
    grid-template-columns: repeat(var(--grid-cols-tablet, 2), minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .card-grid {
    grid-template-columns: repeat(var(--grid-cols-mobile, 1), minmax(0, 1fr));
  }
}

/* --- Scroll-in reveal ---------------------------------------------------- */

.card-reveal {
  width: 100%;
  height: 100%;
  min-width: 0;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.21, 0.47, 0.32, 0.98), transform 0.6s cubic-bezier(0.21, 0.47, 0.32, 0.98);
}

.card-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Slider cards off-screen at reveal time: shown without animation. */
.card-reveal.is-instant {
  transition: none;
}

/* --- Card ---------------------------------------------------------------- */

.integrations_card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: var(--_spacing---space--48) var(--_spacing---space--24) var(--_spacing---space--32);
  border-radius: var(--_default---radius--main);
  background-color: var(--_theme---background-2);
  background-image: radial-gradient(
    ellipse 320px 260px at 50% -110px,
    rgba(214, 172, 224, 0.45) 0%,
    rgba(214, 172, 224, 0.4) 45%,
    rgba(214, 172, 224, 0) 100%
  );
  text-align: center;
  transition: box-shadow 0.5s ease, transform 0.5s ease;
}

/* Hover lift, limited to fine pointers to avoid sticky hover on touch. */
@media (hover: hover) and (pointer: fine) {
  .integrations_card:hover {
    transform: translateY(-4px);
    box-shadow: 0px 20px 40px -12px rgba(52, 34, 55, 0.18);
  }
}

.integrations_card.is-plain {
  background-image: none;
}

/* Overlaps the card's top edge. */
.integration_circle {
  position: absolute;
  inset: -1.656rem 0% auto;
  width: 3.313rem;
  height: 3.313rem;
  margin-right: auto;
  margin-left: auto;
  padding: var(--_spacing---space--4);
  border-radius: var(--_default---radius--round);
  background-color: var(--_theme---background);
  box-shadow:
    rgba(0, 0, 0, 0.08) 0px 0px 1px 0px,
    rgba(10, 13, 18, 0.02) 0px 21px 8px 0px,
    rgba(10, 13, 18, 0.06) 0px 12px 7px 0px,
    rgba(10, 13, 18, 0.1) 0px 5px 5px 0px,
    rgba(10, 13, 18, 0.11) 0px 1px 3px 0px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Overridden inline by the app's theme color. */
.integration_circle_icon {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  border-radius: var(--_default---radius--round);
  background-color: #69586c;
}

.integration_img {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
}

/* Margin replicates webflow.css's base <p> margin, which doesn't reach the shadow root. */
.integration_title {
  margin: 0 0 10px;
  font-family: var(--_typography---font--primary-family);
  font-size: var(--_typography---font-size--text-xlarge);
  line-height: var(--_typography---line-height--xl);
  font-weight: var(--_typography---font--primary-medium);
  letter-spacing: 0px;
  color: inherit;
}

.color_secondary {
  width: 100%;
  color: var(--_theme---text-secondary);
}

/* Clamped to 2 lines; words break only when they can't fit on a line. */
.integration_desc {
  margin: 0 0 10px;
  font-family: var(--_typography---font--primary-family);
  font-size: var(--_typography---font-size--text-main);
  line-height: var(--_typography---line-height--md);
  font-weight: var(--_typography---font--primary-regular);
  letter-spacing: 0px;
  color: inherit;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* Full-card link overlay. */
.clickable {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}

/* Focus ring is drawn on the card; the transparent outline remains for
   Windows High Contrast mode. */
.clickable:focus-visible {
  outline: 2px solid transparent;
}

/* Outline, not box-shadow: box-shadow is transitioned for hover and would
   make the ring fade out slowly. */
.integrations_card:has(.clickable:focus-visible) {
  outline: 2px solid var(--_default---swatch--brand-500-main);
  outline-offset: 2px;
}

/* Make room for the focus ring on edge cards without shifting layout. */
.swiper.is-carousel:has(.clickable:focus-visible) {
  width: calc(100% + 8px);
  max-width: none;
  margin-left: -4px;
  padding-left: 4px;
  padding-right: 4px;
}

/* --- Loading skeleton ---------------------------------------------------- */

.integration_circle_icon.is-skeleton,
.skeleton-block {
  background-color: var(--_theme---background-skeleton, var(--_theme---hover));
  animation: integrations_card_pulse 1.4s ease-in-out infinite;
}

.skeleton-block {
  display: block;
  border-radius: var(--_default---radius--small);
}

.skeleton-title {
  width: 55%;
  height: 1.5rem;
  margin-bottom: 0.875rem;
}

.skeleton-line {
  width: 100%;
  height: 0.875rem;
  margin-bottom: 0.5rem;
}

.skeleton-line-short {
  width: 70%;
  margin-bottom: 0;
}

@keyframes integrations_card_pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

/* --- Error state ---------------------------------------------------------- */

.integrations-cards_message {
  width: 100%;
  padding: var(--_spacing---space--32) 0;
  text-align: center;
  color: var(--_theme---text-secondary);
  font-family: var(--_typography---font--primary-family);
  font-size: var(--_typography---font-size--text-main);
  line-height: var(--_typography---line-height--md);
}

.integrations-cards_message p {
  margin: 0;
}

/* --- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .card-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .integrations_card {
    transition: none;
  }

  .integration_circle_icon.is-skeleton,
  .skeleton-block {
    animation: none;
  }
}

/* Names the overlay card link as text inside the <a> rather than an
   aria-label: GTM's Click Text reads the link's own text, and was empty. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Reveal (keep last) ------------------------------------------------- */

/* The site head hides code islands until their CSS loads, preventing a flash
   of unstyled content. Shadow-tree !important declarations win, so this
   reveals the component once this file applies. */
:host {
  display: contents !important;
  height: auto !important;
  overflow: visible !important;
  visibility: visible !important;
}