.testimonial-line_vertical::before,
.testimonial-line_vertical::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  translate: -50% 0;
  background-color: var(--swatch--quantro-yellow);
}

.testimonial-line_vertical::before {
  top: 0;
}

.testimonial-line_vertical::after {
  bottom: 0;
}
.card-testimonial.swiper-slide {
  display: flex;
  flex-direction: column;
  justify-content: end;
}
@media (max-width: 767px) {
  .slider_wrap {
    padding-right: 16px;
  }
}

.toc_icon_wrap {
  opacity: 0;
}
.capabailities-link.w--current {
  color: var(--swatch--quantro-yellow);
}

.capabailities-link.w--current .toc_icon_wrap {
  opacity: 1;
}

.diagram_outcome_card {
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--swatch--quantro-yellow) 25%,
    var(--swatch--quantro-yellow) 75%,
    transparent 100%
  );
}
@media (max-width: 479px) {
  .diagram_outcome_card {
    background: linear-gradient(
      to right,
      transparent 0%,
      var(--swatch--quantro-yellow) 0%,
      var(--swatch--quantro-yellow) 100%,
      transparent 100%
    );
  }
}
    
  }
/* Desktop: show all connectors */
.connectors .connector-desktop,
.connectors .connector-tablet,
.connectors .connector-mobile {
  display: block;
}
/* Tablet: keep desktop only */
@media (max-width: 991px) {
  .connectors .connector-desktop,
  .connectors .connector-mobile {
    display: none;
  }
}
/* Mobile: keep mobile only */
@media (max-width: 479px) {
  .connectors .connector-desktop,
  .connectors .connector-tablet {
    display: none;
  }
  .connectors .connector-mobile {
    display: block; /* re-show after tablet hid it */
  }
}

/* Hide the to-be-animated bits up front ONLY when JS is active,
     so there's no flash and it degrades gracefully (no JS = all shown). */
html.dgm-js .diagram_component .tag_mini,
html.dgm-js .diagram_component .diagram-connectors svg,
html.dgm-js .diagram_component .diagram_outcome_card {
  opacity: 0;
}

/* Resize-proof yellow border: beats the inline stroke="#3E3F3F"
     presentation attribute and survives initCardShape() rewrites. */
.diagram_component .card.is-solution > .card-border-svg > path {
  stroke: var(--swatch--quantro-yellow, #ffbc11);
}

  /* No flash before JS runs: hide the cards only while JS is active. */
  html.qpc-js [data-connector] { opacity: 0; }

  .qpc-layer { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
  .qpc-conn  { position: absolute; }
  .qpc-base, .qpc-fill {
    position: absolute;
    background: var(--qpc-track, #474948);
    border-radius: 99px;
  }
  .qpc-fill { background: var(--qpc-accent, #FFBC11); }
  /* start endpoint = plain yellow circle (left side) */
  .qpc-dot {
    position: absolute;
    width: var(--qpc-dot, 8px);
    height: var(--qpc-dot, 8px);
    border-radius: 50%;
    background: var(--qpc-accent, #FFBC11);
  }
  /* travelling endpoint = yellow arrowhead (right side), built via CSS triangle */
  .qpc-arrow { position: absolute; width: 0; height: 0; border-style: solid; }

.w-dyn-item:not(:last-child) [data-card-bento='after']::after {
  content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.33331 8H12.6666' stroke='%23171819' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath 
  d='M8 3.33337L12.6667 8.00004L8 12.6667' stroke='%23171819' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  display: block;
}