/* ManyChat comparison art direction: social signal → governed business system. */
.mc-page {
  --sp-night: #081323;
  --sp-slate: #17243a;
  --sp-blue: #3164f4;
  --sp-blue-dark: #1943b6;
  --sp-blue-soft: #eef3ff;
  --sp-amber: #ff6b78;
  --sp-amber-soft: #fff0f2;
  --sp-mint: #72dfc0;
  --sp-mint-dark: #0c7058;
  --sp-rose: #ff6b78;
}

.mc-page .sp-hero {
  background:
    radial-gradient(circle at 88% 7%, rgba(49, 100, 244, 0.17), transparent 31%),
    radial-gradient(circle at 53% 93%, rgba(255, 107, 120, 0.16), transparent 30%),
    linear-gradient(145deg, #fcfdff 0%, #f2f5fb 58%, #fff7f7 100%);
}

.mc-page .sp-founder {
  background: #101a29;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.1),
    0 34px 80px rgba(18, 35, 61, 0.2),
    0 72px 130px rgba(49, 100, 244, 0.1);
}

.mc-page .hero-copy h1 {
  font-size: clamp(44px, 4.55vw, 66px);
  text-wrap: balance;
}

.mc-page .hero-lead,
.mc-page .section-heading > p,
.mc-page .faq-layout > div:first-child > p {
  text-wrap: pretty;
}

.mc-page .sp-founder > img {
  object-position: 50% center;
}

.mc-page .sp-overlay span:first-child i {
  background: var(--sp-rose);
  box-shadow: 0 0 0 4px rgba(255, 107, 120, 0.18);
}

.mc-page .sp-overlay span:nth-child(2) i {
  background: var(--sp-mint);
  box-shadow: 0 0 0 4px rgba(114, 223, 192, 0.16);
}

.mc-page .sp-overlay span:last-child i {
  background: #8ba8ff;
  box-shadow: 0 0 0 4px rgba(139, 168, 255, 0.18);
}

.mc-page .sp-decision-section {
  background:
    radial-gradient(circle at 11% 15%, rgba(255, 107, 120, 0.14), transparent 28%),
    var(--sp-surface);
}

.mc-page .sp-decision-panel {
  background:
    radial-gradient(circle at 83% 9%, rgba(49, 100, 244, 0.3), transparent 35%),
    radial-gradient(circle at 12% 100%, rgba(255, 107, 120, 0.1), transparent 34%),
    linear-gradient(128deg, #081323, #10233e 62%, #1b3454);
}

.mc-page .sp-route-map li.is-active::before {
  background: linear-gradient(90deg, rgba(114, 223, 192, 0.28), rgba(114, 223, 192, 0.9));
}

.mc-page .sp-route-map li.is-active span {
  position: absolute;
  box-shadow: 0 0 0 6px rgba(114, 223, 192, 0.11);
}

.mc-page .sp-route-map li.is-active span::after {
  position: absolute;
  inset: -6px;
  border: 1px solid rgba(114, 223, 192, 0.45);
  border-radius: inherit;
  content: "";
  animation: mc-signal 2.4s cubic-bezier(.16, 1, .3, 1) infinite;
}

.mc-page .sp-architecture-grid article.is-featured {
  border-color: rgba(49, 100, 244, 0.27);
  background:
    radial-gradient(circle at 90% 7%, rgba(255, 107, 120, 0.1), transparent 30%),
    #fff;
}

.mc-page .mc-boundaries {
  background:
    radial-gradient(circle at 92% 12%, rgba(49, 100, 244, 0.08), transparent 25%),
    #fff;
}

.mc-page .mc-boundaries .sp-fit-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mc-page .mc-boundaries .sp-fit-grid article {
  min-height: 320px;
}

.mc-page .mc-boundaries .sp-fit-grid article:last-child {
  color: var(--sp-night);
  border-color: var(--sp-line);
  background: #fff;
}

.mc-page .mc-boundaries .sp-fit-grid article:last-child h3 {
  color: var(--sp-night);
}

.mc-page .mc-boundaries .sp-fit-grid p {
  margin: 0;
  color: #536177;
  line-height: 1.7;
}

.mc-page .sp-pricing {
  background:
    radial-gradient(circle at 87% 12%, rgba(255, 107, 120, 0.12), transparent 28%),
    linear-gradient(180deg, #fff 0%, #f7f9fd 100%);
}

.mc-page .sp-capability-grid article,
.mc-page .sp-source-grid a,
.mc-page .related-grid > a {
  transition:
    transform 220ms cubic-bezier(.16, 1, .3, 1),
    border-color 220ms ease,
    box-shadow 220ms ease;
}

@media (hover: hover) {
  .mc-page .sp-capability-grid article:hover,
  .mc-page .sp-source-grid a:hover,
  .mc-page .related-grid > a:hover {
    transform: translate3d(0, -5px, 0);
    border-color: rgba(49, 100, 244, 0.2);
    box-shadow: 0 22px 54px rgba(20, 42, 77, 0.1);
  }

  .mc-page .button:active,
  .mc-page .sp-scenario-tab:active {
    transform: scale(0.97);
  }
}

@keyframes mc-signal {
  0% {
    opacity: 0.7;
    transform: scale(0.7);
  }
  72%,
  100% {
    opacity: 0;
    transform: scale(1.8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mc-page *,
  .mc-page *::before,
  .mc-page *::after {
    scroll-behavior: auto !important;
  }

  .mc-page .sp-route-map li.is-active span::after {
    animation: none;
  }

  .mc-page .sp-capability-grid article,
  .mc-page .sp-source-grid a,
  .mc-page .related-grid > a {
    transition: none;
  }
}

@media (max-width: 760px) {
  .mc-page .mc-boundaries .sp-fit-grid {
    grid-template-columns: 1fr;
  }

  .mc-page .mc-boundaries .sp-fit-grid article {
    min-height: 0;
  }
}