/**
 * Frameflow Creatives — Button corner radius
 * Subtle rounding (~5px) matching brand reference. Load last. Colors unchanged.
 */
:root,
.frameflow-light {
  --ff-btn-radius: 5px;
}

.frameflow-light .tf-btn,
.frameflow-light .tf-btn-2,
.frameflow-light .tf-header .header-cta,
.frameflow-light .tf-header .mobile-menu,
.frameflow-light .ff-mobile-cta .tf-btn,
.frameflow-light .portfolio-filters .filter-btn,
.frameflow-light .portfolio-subfilters .subfilter-btn,
.frameflow-light .pricing-tab_btn .tf-btn-tab,
.frameflow-light .ff-pricing-plan__cta,
.frameflow-light .ff-pricing-custom__btn,
.frameflow-light .ff-form-success-modal__actions .tf-btn,
.frameflow-light .ff-form-success-modal__actions .tf-btn-2,
.frameflow-light .ff-newsletter-form .tf-btn,
.frameflow-light .footer-content.newsletter-footer .tf-btn,
.frameflow-light .featured-works-item .view-project,
.frameflow-light .demo-option,
.frameflow-light .ff-site-footer__cta-actions .tf-btn,
.frameflow-light .ff-site-footer__cta-actions .tf-btn-2,
.frameflow-light .section-hero--frameflow .hero-actions .tf-btn,
.frameflow-light .section-hero--frameflow .hero-actions .tf-btn-2,
.frameflow-light .section-hero--frameflow .hero-contact-form--compact .tf-btn,
.frameflow-light .ff-services-banner .tf-btn,
.frameflow-light .ff-services-explore__btn,
.frameflow-light .section-services .ff-services-explore__btn,
.frameflow-light .ff-cta-department .tf-btn,
.frameflow-light .ff-blog-journal__intro .tf-btn-2,
.frameflow-light .ff-ref-section-head .tf-btn-2,
.frameflow-light .ff-team-ref__intro .tf-btn-2,
.frameflow-light .ff-pricing-custom__actions .tf-btn,
.frameflow-light .ff-pricing-custom__actions .tf-btn-2,
.frameflow-light .ff-about-hero__actions .tf-btn,
.frameflow-light .ff-about-hero__actions .tf-btn-2,
.frameflow-light .ff-services-hero__actions .tf-btn,
.frameflow-light .ff-services-hero__actions .tf-btn-2,
.frameflow-light .ff-services-pricing-teaser__actions .tf-btn,
.frameflow-light .ff-services-pricing-teaser__actions .tf-btn-2,
.frameflow-light .ff-portfolio-hero__actions .tf-btn,
.frameflow-light .ff-portfolio-hero__actions .tf-btn-2,
.frameflow-light .ff-portfolio-actions-row .tf-btn-2,
.frameflow-light .ff-contact-hero__actions .tf-btn,
.frameflow-light .ff-contact-hero__actions .tf-btn-2,
.frameflow-light .ff-local-studio__actions .tf-btn,
.frameflow-light .ff-local-studio__actions .tf-btn-2,
.frameflow-light .ff-studio-spotlight__actions .tf-btn,
.frameflow-light .ff-studio-spotlight__actions .tf-btn-2,
.frameflow-light .section-404 .tf-btn,
.frameflow-light .tf-loading,
.frameflow-light .btn-mobile-menu,
.article-blog .btn-action,
.coming-soon-page .tf-btn,
.coming-soon-page .tf-btn-2,
.coming-soon-page .coming-soon-form button,
.coming-soon-page .coming-soon-form input[type="submit"] {
  border-radius: var(--ff-btn-radius) !important;
}

/*
 * Dark purple panels — force BOTH CTAs to solid white so purple
 * primary buttons never blend into the panel background.
 * Prefer .ff-btn-on-dark / .ff-btn-white on the markup; containers are backup.
 */
.frameflow-light a.tf-btn.ff-btn-on-dark,
.frameflow-light a.tf-btn-2.ff-btn-on-dark,
.frameflow-light a.tf-btn.ff-btn-white,
.frameflow-light button.tf-btn.ff-btn-on-dark,
.frameflow-light button.tf-btn.ff-btn-white,
.frameflow-light .ff-studio-spotlight__actions .tf-btn,
.frameflow-light .ff-studio-spotlight__actions .tf-btn-2,
.frameflow-light .ff-cta-department .tf-btn,
.frameflow-light .ff-cta-department .tf-btn-2,
.frameflow-light .ff-services-pricing-teaser__actions .tf-btn,
.frameflow-light .ff-services-pricing-teaser__actions .tf-btn-2,
.frameflow-light .ff-services-hero__actions .tf-btn,
.frameflow-light .ff-services-hero__actions .tf-btn-2,
.frameflow-light .ff-about-hero__actions .tf-btn,
.frameflow-light .ff-about-hero__actions .tf-btn-2,
.frameflow-light .ff-portfolio-hero__actions .tf-btn,
.frameflow-light .ff-portfolio-hero__actions .tf-btn-2,
.frameflow-light .ff-contact-hero__actions .tf-btn,
.frameflow-light .ff-contact-hero__actions .tf-btn-2,
.frameflow-light .ff-local-studio__actions .tf-btn,
.frameflow-light .ff-local-studio__actions .tf-btn-2,
.frameflow-light .ff-motion-team-extension .tf-btn,
.frameflow-light .ff-motion-team-extension .tf-btn-2,
.frameflow-light .ff-about-talent .tf-btn,
.frameflow-light .ff-about-talent .tf-btn-2,
.frameflow-light .ff-pricing-custom__actions .tf-btn,
.frameflow-light .ff-pricing-custom__actions .tf-btn-2,
.frameflow-light .section-about-us .col-left .tf-btn,
.frameflow-light .ff-about-studio-card .tf-btn,
.frameflow-light .ff-not-found__actions .tf-btn,
.frameflow-light .ff-not-found__actions .tf-btn-2 {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #432692 !important;
  -webkit-text-fill-color: #432692 !important;
  border: none !important;
  box-shadow: 0 10px 24px -12px rgba(19, 7, 45, 0.35) !important;
  font-weight: 700 !important;
}

.frameflow-light a.tf-btn.ff-btn-on-dark:hover,
.frameflow-light a.tf-btn-2.ff-btn-on-dark:hover,
.frameflow-light a.tf-btn.ff-btn-white:hover,
.frameflow-light button.tf-btn.ff-btn-on-dark:hover,
.frameflow-light button.tf-btn.ff-btn-white:hover,
.frameflow-light .ff-studio-spotlight__actions .tf-btn:hover,
.frameflow-light .ff-studio-spotlight__actions .tf-btn-2:hover,
.frameflow-light .ff-cta-department .tf-btn:hover,
.frameflow-light .ff-cta-department .tf-btn-2:hover,
.frameflow-light .ff-services-pricing-teaser__actions .tf-btn:hover,
.frameflow-light .ff-services-pricing-teaser__actions .tf-btn-2:hover,
.frameflow-light .ff-services-hero__actions .tf-btn:hover,
.frameflow-light .ff-services-hero__actions .tf-btn-2:hover,
.frameflow-light .ff-about-hero__actions .tf-btn:hover,
.frameflow-light .ff-about-hero__actions .tf-btn-2:hover,
.frameflow-light .ff-portfolio-hero__actions .tf-btn:hover,
.frameflow-light .ff-portfolio-hero__actions .tf-btn-2:hover,
.frameflow-light .ff-contact-hero__actions .tf-btn:hover,
.frameflow-light .ff-contact-hero__actions .tf-btn-2:hover,
.frameflow-light .ff-local-studio__actions .tf-btn:hover,
.frameflow-light .ff-local-studio__actions .tf-btn-2:hover,
.frameflow-light .ff-motion-team-extension .tf-btn:hover,
.frameflow-light .ff-motion-team-extension .tf-btn-2:hover,
.frameflow-light .ff-about-talent .tf-btn:hover,
.frameflow-light .ff-about-talent .tf-btn-2:hover,
.frameflow-light .ff-pricing-custom__actions .tf-btn:hover,
.frameflow-light .ff-pricing-custom__actions .tf-btn-2:hover,
.frameflow-light .section-about-us .col-left .tf-btn:hover,
.frameflow-light .ff-about-studio-card .tf-btn:hover,
.frameflow-light .ff-not-found__actions .tf-btn:hover,
.frameflow-light .ff-not-found__actions .tf-btn-2:hover {
  background: #ede8ff !important;
  background-color: #ede8ff !important;
  background-image: none !important;
  color: #2b0e8a !important;
  -webkit-text-fill-color: #2b0e8a !important;
}

/* Brand 2026 variant (backup / alternate homepage) */
.ff-brand-2026.home-page .tf-btn,
.ff-brand-2026.home-page .tf-btn-2,
.ff-brand-2026.home-page .header-cta {
  border-radius: var(--ff-btn-radius) !important;
}

/* Equal sizing for primary/secondary CTAs — .tf-btn-2 has a 1px border
   that .tf-btn lacks, so pin both to the same rendered height. */
.frameflow-light .tf-btn,
.frameflow-light .tf-btn-2 {
  min-height: 52px;
  padding-top: 0;
  padding-bottom: 0;
}