.app-container {
  .simple-cta {
    max-width: 768px;
    margin: auto;

    .simple-cta__logo {
      height: 138px;
      display: flex;
      justify-content: center;
      margin-bottom: 16px;
      img {
        height: 100%;
        width: auto;
        object-fit: contain;
      }
    }
    .simple-cta__container {
      position: relative;
      padding: 48px;
      background-color: #f6fdfd;
      border-radius: 8px;
      z-index: 2;
      width: 100%;
      margin: auto;
      @media (max-width: 1000px) {
        padding: 32px;
      }
    
      @media (max-width: 768px) {
        flex-direction: column;
      }
       p {
        text-align: center;
        margin-bottom: 0;
       }
      p.title {
        font-weight: 600;
        font-size: 24px;
        line-height: 1.2;
        margin-bottom: 16px;
        color: #020202;
        text-align: center;

        font-family: var(--mainfont);

        position: relative;
        @media (max-width: 1000px) {
          font-size: 20px;
        }
        em {
          position: relative;
          font-style: normal;
          &::after {
            content: "";
            position: absolute;
            left: -1px;
            bottom: -3px;
            z-index: -1;
            display: block;
            width: 66px;
            height:7px;
          
            background: url("data:image/svg+xml;utf8,<svg width='66' height='7' viewBox='0 0 66 7' xmlns='http://www.w3.org/2000/svg' fill='none'><path d='M2.5 3.50003C15.408 2.88142 26.8827 2.42292 39.857 2.25557C48.2188 2.1477 55.6442 2.12951 64 2.25555' stroke='%232EA49D' stroke-width='3' stroke-linecap='round' stroke-dasharray='300.21 0.1'/></svg>")
                        no-repeat left center;
            background-size: contain;
          }
        }
      }
    }
  }
}

.simple-cta.is-prep .title,
.simple-cta.is-prep .button {
  opacity: 0;
  transform: translateY(24px);
}

.simple-cta.animate-in .title {
  animation: ctaFadeUp 0.7s cubic-bezier(0.22, 0.65, 0.25, 1) both;
}
.simple-cta.animate-in .button {
  animation: ctaSlideIn 0.6s cubic-bezier(0.22, 0.65, 0.25, 1) 0.2s both;
}

@keyframes ctaFadeUp {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
@keyframes ctaSlideIn {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.simple-cta .button {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .simple-cta.animate-in .title,
  .simple-cta.animate-in .button {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}
