/* Product illustrations and the six home-page benefit cards. */
.process-tabs_item.has-product-demo {
  gap: 2rem;
  isolation: isolate;
}

.process-demo {
  position: relative;
  flex: 1 1 54%;
  min-width: 0;
  max-width: 42rem;
  padding: 1.5rem 2rem 2.5rem 0;
  color: #173f38;
}

.process-demo svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: Haffer, Arial, sans-serif;
}

.demo-window {
  filter: drop-shadow(0 14px 18px rgba(42, 64, 44, .10));
}

.demo-toast {
  filter: drop-shadow(0 8px 10px rgba(42, 64, 44, .10));
}

.demo-motion {
  animation-duration: 9s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

.process-demo.is-in-view:not(.is-paused) .demo-motion {
  animation-play-state: running;
}

.demo-float { animation-name: demo-float; }
.demo-progress {
  transform-box: fill-box;
  transform-origin: left center;
  animation-name: demo-progress;
}
.demo-step-one { animation-name: demo-step-one; }
.demo-step-two { animation-name: demo-step-two; }
.demo-step-three { animation-name: demo-step-three; }
.demo-success { animation-name: demo-success; }
.demo-chart {
  stroke-dasharray: 400;
  animation-name: demo-chart;
}
.demo-bar {
  transform-box: fill-box;
  transform-origin: bottom;
  animation-name: demo-bar;
}
.demo-ring { animation-name: demo-ring; }

.demo-toggle {
  position: absolute;
  right: 2rem;
  bottom: .75rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .65rem;
  border: 1px solid rgba(23, 63, 56, .2);
  border-radius: 2rem;
  background: rgba(255, 255, 255, .55);
  color: #31564a;
  font: inherit;
  font-size: .7rem;
  line-height: 1.4;
  cursor: pointer;
}

.demo-toggle:hover { background: #fff; }
.demo-toggle:focus-visible { outline: 2px solid #173f38; outline-offset: 3px; }
.demo-toggle[hidden] { display: none; }

.section-home-testimonial .home-testimonial_item {
  background-color: #dfefd7;
  box-shadow: inset 0 0 0 1px rgba(57, 116, 91, .05);
  transition: transform .28s ease, box-shadow .28s ease, background-color .28s ease;
}

.section-home-testimonial .home-testimonial_item-category-wrapper {
  transition: background-color .28s ease, border-color .28s ease;
}

@media (hover: hover) and (pointer: fine) {
  .section-home-testimonial .home-testimonial_item:hover {
    transform: translateY(-8px);
    background-color: #d3e8c8;
    box-shadow: 0 16px 32px rgba(42, 72, 45, .13), inset 0 0 0 1px rgba(57, 116, 91, .2);
  }
  .section-home-testimonial .home-testimonial_item:hover .home-testimonial_item-category-wrapper {
    background-color: #f4f9ef;
    border-color: #77986c;
  }
}

@keyframes demo-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes demo-progress {
  0%, 8% { transform: scaleX(.06); }
  28% { transform: scaleX(.34); }
  48% { transform: scaleX(.67); }
  68%, 92% { transform: scaleX(1); }
  100% { transform: scaleX(.06); }
}
@keyframes demo-step-one {
  0%, 12%, 100% { opacity: .18; }
  22%, 92% { opacity: 1; }
}
@keyframes demo-step-two {
  0%, 32%, 100% { opacity: .18; }
  42%, 92% { opacity: 1; }
}
@keyframes demo-step-three {
  0%, 52%, 100% { opacity: .18; }
  62%, 92% { opacity: 1; }
}
@keyframes demo-success {
  0%, 60%, 100% { opacity: 0; transform: translateY(12px); }
  70%, 92% { opacity: 1; transform: translateY(0); }
}
@keyframes demo-chart {
  0%, 8% { stroke-dashoffset: 400; }
  65%, 92% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 400; }
}
@keyframes demo-bar {
  0%, 10%, 100% { transform: scaleY(.2); }
  60%, 92% { transform: scaleY(1); }
}
@keyframes demo-ring {
  0%, 10%, 100% { stroke-dasharray: 0 189; }
  65%, 92% { stroke-dasharray: 147 189; }
}

@media (max-width: 991px) {
  .process-demo {
    flex: none;
    width: 100%;
    align-self: center;
    padding: 0 0 2rem;
  }
  .demo-toggle { right: 0; bottom: 0; }
  .section-home-testimonial .home-testimonial_item { padding: 1.5rem; }
}

@media (max-width: 479px) {
  .section-home-testimonial .home-testimonial_list {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .section-home-testimonial .home-testimonial_component { padding: 0; }
  .process-tabs_item.has-product-demo { gap: 1rem; }
  .process-demo { width: calc(100% + 1rem); max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .process-demo .demo-motion { animation: none; }
  .demo-toggle { display: none; }
  .section-home-testimonial .home-testimonial_item { transition: none; }
  .section-home-testimonial .home-testimonial_item:hover { transform: none; }
  .section-home-testimonial .home-testimonial_item-category-wrapper { transition: none; }
}