/* SSSTikTok UI reliability fixes — shared by every rendered page */

/* Never leave the Why Choose section blank if an animation script is delayed. */
.wc-item {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}
.wc-item.reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* Stable feature-card layout on desktop/tablet/mobile. */
.features {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
}
.feature {
  min-width: 0;
  height: 100%;
}
.feature > div:last-child {
  min-width: 0;
}
.feature p,
.wc-item p,
.faq-btn span,
.faq-panel p {
  overflow-wrap: anywhere;
}

/* FAQ accordion interaction and spacing. Existing page colors are preserved. */
.faq-btn {
  min-height: 58px;
  font: inherit;
}
.faq-btn:focus-visible {
  outline: 3px solid rgba(124, 58, 237, .28);
  outline-offset: -3px;
}
.faq-panel {
  box-sizing: border-box;
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  padding: 0 16px !important;
  transition: max-height .35s ease, opacity .25s ease, padding .35s ease !important;
}
.faq-item.active .faq-panel {
  max-height: 1200px !important;
  opacity: 1 !important;
  padding: 16px !important;
}
.faq-panel p {
  margin: 0;
}

@media (max-width: 720px) {
  .features {
    grid-template-columns: 1fr !important;
  }
  .faq-btn {
    padding: 16px 14px !important;
    gap: 14px;
  }
  .faq-item.active .faq-panel {
    padding: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-panel,
  .faq-btn .ico,
  .wc-item {
    transition: none !important;
  }
}