:root {
  --heading-accent-blue: #2a93d1;
  --heading-accent-cyan: #22b8c7;
  --heading-accent-purple: #7f3d8d;
}

/*
 * A clean tapered ribbon gives headings a visible, reusable brand accent.
 * The geometric edge separates it from a hand-drawn marker treatment.
 */
.hero-pc__copy h1 span,
.hero-sp__copy h1 .hero-sp__accent,
.problems-pc h2 span,
.problems-sp h2 span,
.overview-pc h2 span,
.marker,
.benefits__accent,
.benefits-sp__accent,
.integrated-flow__accent,
.integrated-flow-sp__accent,
.reasons__accent,
.reasons-sp__accent,
.product-interface__accent,
.product-interface-sp__accent,
.support-section__accent,
.support-section-sp__accent,
.implementation-steps__accent,
.implementation-steps-sp__accent,
.suitable-companies__accent,
.suitable-companies-sp__accent,
.faq-section__accent,
.faq-section-sp__accent,
.contact-section__accent,
.contact-section-sp__accent {
  position: relative;
  z-index: 0;
  display: inline-block;
  padding-inline: .025em;
}

.hero-pc__copy h1 span::before,
.hero-sp__copy h1 .hero-sp__accent::before,
.problems-pc h2 span::before,
.problems-sp h2 span::before,
.overview-pc h2 span::before,
.marker::before,
.benefits__accent::before,
.benefits-sp__accent::before,
.integrated-flow__accent::before,
.integrated-flow-sp__accent::before,
.reasons__accent::before,
.reasons-sp__accent::before,
.product-interface__accent::before,
.product-interface-sp__accent::before,
.support-section__accent::before,
.support-section-sp__accent::before,
.implementation-steps__accent::before,
.implementation-steps-sp__accent::before,
.suitable-companies__accent::before,
.suitable-companies-sp__accent::before,
.faq-section__accent::before,
.faq-section-sp__accent::before,
.contact-section__accent::before,
.contact-section-sp__accent::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: .035em;
  height: .25em;
  min-height: 9px;
  border-radius: 999px 5px 5px 999px;
  background: linear-gradient(90deg,var(--heading-accent-blue) 0%,var(--heading-accent-cyan) 68%,var(--heading-accent-purple) 100%);
  clip-path: polygon(0 20%,94% 0,100% 50%,94% 100%,0 80%);
  opacity: .78;
  transform: none;
}

.hero-pc__copy h1 span::after,
.hero-sp__copy h1 .hero-sp__accent::after,
.problems-pc h2 span::after,
.problems-sp h2 span::after,
.overview-pc h2 span::after,
.marker::after,
.benefits__accent::after,
.benefits-sp__accent::after,
.integrated-flow__accent::after,
.integrated-flow-sp__accent::after,
.reasons__accent::after,
.reasons-sp__accent::after,
.product-interface__accent::after,
.product-interface-sp__accent::after,
.support-section__accent::after,
.support-section-sp__accent::after,
.implementation-steps__accent::after,
.implementation-steps-sp__accent::after,
.suitable-companies__accent::after,
.suitable-companies-sp__accent::after,
.faq-section__accent::after,
.faq-section-sp__accent::after,
.contact-section__accent::after,
.contact-section-sp__accent::after {
  content: none;
}

@media (max-width: 767px) {
  .hero-sp__copy h1 .hero-sp__accent::before,
  .problems-sp h2 span::before,
  .marker::before,
  .benefits-sp__accent::before,
  .integrated-flow-sp__accent::before,
  .reasons-sp__accent::before,
  .product-interface-sp__accent::before,
  .support-section-sp__accent::before,
  .implementation-steps-sp__accent::before,
  .suitable-companies-sp__accent::before,
  .faq-section-sp__accent::before,
  .contact-section-sp__accent::before {
    bottom: .04em;
    height: .27em;
    min-height: 7px;
  }
}