/* ========================================
   BUTTON STANDARDIZATION CSS
   ========================================

   Reference: Pricing "Join Waitlist" button

   Key characteristics (NOT fat):
   - height: 40px
   - padding: 0 1.5rem (horizontal only)
   - font-size: 0.9375rem (15px)
   - font-weight: 600
   - border-radius: 12px
   - box-shadow: inset 0px -3px rgba(0, 0, 0, 0.25) - 3D pressed effect

   Updated: January 2026
   ======================================== */

/* ========================================
   CSS CUSTOM PROPERTIES (Variables)
   ======================================== */
:root {
  --btn-height: 40px;
  --btn-padding: 0 1.5rem;
  --btn-font-size: 0.9375rem;
  --btn-font-weight: 600;
  --btn-border-radius: 12px;
  --btn-lime: #d1fe17;
  --btn-black: #000000;
  --btn-white: #ffffff;
  --btn-lime-shadow: inset 0px -3px rgba(0, 0, 0, 0.25);
  --btn-black-shadow: inset 0px -3px rgba(255, 255, 255, 0.15);
  --btn-lime-hover-shadow: inset 0px -3px rgba(0, 0, 0, 0.1);
}

/* ========================================
   LIME GREEN BUTTONS (Primary CTA on dark backgrounds)
   All buttons with #d1fe17 background
   ======================================== */

/* Base lime button standardization */
.btn-lime,
.btn-cta-lime,
.btn-primary-lime,
.pricing-card.featured-card .pricing-cta,
.cf-home-hero__cta-primary,
.hero-cta-lime,
.cta-lime,
.waitlist-btn-lime,
button[style*="background: #d1fe17"],
button[style*="background-color: #d1fe17"],
a[style*="background: #d1fe17"],
a[style*="background-color: #d1fe17"] {
  background: var(--btn-lime) !important;
  color: var(--btn-black) !important;
  border: none !important;
  font-weight: var(--btn-font-weight) !important;
  padding: var(--btn-padding) !important;
  height: var(--btn-height) !important;
  font-size: var(--btn-font-size) !important;
  border-radius: var(--btn-border-radius) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  box-shadow: var(--btn-lime-shadow) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Lime button hover state */
.btn-lime:hover,
.btn-cta-lime:hover,
.btn-primary-lime:hover,
.pricing-card.featured-card .pricing-cta:hover,
.cf-home-hero__cta-primary:hover,
.hero-cta-lime:hover,
.cta-lime:hover,
.waitlist-btn-lime:hover {
  background: var(--btn-white) !important;
  color: var(--btn-black) !important;
  box-shadow: var(--btn-lime-hover-shadow) !important;
  transform: none !important;
}

/* ========================================
   NAV PRIMARY BUTTON (Get Started Free)
   Default: BLACK (for light backgrounds)
   Dark hero pages: LIME (for visibility)
   ======================================== */

/* Nav actions buttons - BLACK on light navbar (default) */
.nav-actions .btn.btn-primary,
.mobile-menu-actions .btn.btn-primary {
  background: #000000 !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: var(--btn-font-weight) !important;
  padding: var(--btn-padding) !important;
  height: var(--btn-height) !important;
  font-size: var(--btn-font-size) !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  box-shadow: inset 0px -3px rgba(255, 255, 255, 0.15) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.nav-actions .btn.btn-primary:hover,
.mobile-menu-actions .btn.btn-primary:hover {
  background: #d1fe17 !important;
  color: #000000 !important;
  box-shadow: inset 0px -3px rgba(0, 0, 0, 0.25) !important;
  transform: none !important;
}

/* Scrolled navbar state - BLACK button (same as default for light backgrounds) */
.navbar.scrolled .nav-actions .btn.btn-primary {
  background: #000000 !important;
  color: #ffffff !important;
  box-shadow: inset 0px -3px rgba(255, 255, 255, 0.15) !important;
}

.navbar.scrolled .nav-actions .btn.btn-primary:hover {
  background: #d1fe17 !important;
  color: #000000 !important;
  box-shadow: inset 0px -3px rgba(0, 0, 0, 0.25) !important;
}

/* ========================================
   NAV PRIMARY BUTTON ON DARK HERO PAGES
   Override to LIME for visibility
   ======================================== */

/* Homepage with .cf-home-hero */
body:has(.cf-home-hero) .navbar:not(.scrolled) .nav-actions .btn.btn-primary {
  background: #d1fe17 !important;
  color: #000000 !important;
  box-shadow: inset 0px -3px rgba(0, 0, 0, 0.25) !important;
}

body:has(.cf-home-hero) .navbar:not(.scrolled) .nav-actions .btn.btn-primary:hover {
  background: #ffffff !important;
  color: #000000 !important;
  box-shadow: inset 0px -3px rgba(0, 0, 0, 0.1) !important;
}

/* Pricing page (has .pricing-card-section, dark hero) */
body:has(.pricing-card-section) .navbar:not(.scrolled) .nav-actions .btn.btn-primary {
  background: #d1fe17 !important;
  color: #000000 !important;
  box-shadow: inset 0px -3px rgba(0, 0, 0, 0.25) !important;
}

body:has(.pricing-card-section) .navbar:not(.scrolled) .nav-actions .btn.btn-primary:hover {
  background: #ffffff !important;
  color: #000000 !important;
  box-shadow: inset 0px -3px rgba(0, 0, 0, 0.1) !important;
}

/* Solution pages with hero overlay */
body:has(.hero-overlay) .navbar:not(.scrolled) .nav-actions .btn.btn-primary {
  background: #d1fe17 !important;
  color: #000000 !important;
  box-shadow: inset 0px -3px rgba(0, 0, 0, 0.25) !important;
}

body:has(.hero-overlay) .navbar:not(.scrolled) .nav-actions .btn.btn-primary:hover {
  background: #ffffff !important;
  color: #000000 !important;
  box-shadow: inset 0px -3px rgba(0, 0, 0, 0.1) !important;
}

/* Solution pages with .cf-solution-hero (dark hero) */
body:has(.cf-solution-hero) .navbar:not(.scrolled) .nav-actions .btn.btn-primary {
  background: #d1fe17 !important;
  color: #000000 !important;
  box-shadow: inset 0px -3px rgba(0, 0, 0, 0.25) !important;
}

body:has(.cf-solution-hero) .navbar:not(.scrolled) .nav-actions .btn.btn-primary:hover {
  background: #ffffff !important;
  color: #000000 !important;
  box-shadow: inset 0px -3px rgba(0, 0, 0, 0.1) !important;
}

/* General black buttons that hover to lime */
.btn.btn-primary,
.btn-primary:not(.btn-primary-alt):not(.btn-primary-compact),
.btn-cta-primary,
.hero-cta-btn,
.cta-primary-btn {
  background: var(--btn-black) !important;
  color: var(--btn-white) !important;
  border: none !important;
  font-weight: var(--btn-font-weight) !important;
  padding: var(--btn-padding) !important;
  height: var(--btn-height) !important;
  font-size: var(--btn-font-size) !important;
  border-radius: var(--btn-border-radius) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  box-shadow: var(--btn-black-shadow) !important;
  line-height: 1 !important;
}

.btn.btn-primary:hover,
.btn-primary:not(.btn-primary-alt):not(.btn-primary-compact):hover,
.btn-cta-primary:hover,
.hero-cta-btn:hover,
.cta-primary-btn:hover {
  background: var(--btn-lime) !important;
  color: var(--btn-black) !important;
  box-shadow: var(--btn-lime-shadow) !important;
  transform: none !important;
}

/* ========================================
   SECONDARY BUTTONS (Outline style)
   ======================================== */

/* General secondary buttons - black text for light backgrounds */
.btn.btn-secondary,
.mobile-menu-actions .btn.btn-secondary {
  background: transparent !important;
  color: var(--btn-black) !important;
  border: 1.5px solid rgba(0, 0, 0, 0.3) !important;
  font-weight: var(--btn-font-weight) !important;
  padding: var(--btn-padding) !important;
  height: var(--btn-height) !important;
  font-size: var(--btn-font-size) !important;
  border-radius: var(--btn-border-radius) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  line-height: 1 !important;
}

.btn.btn-secondary:hover,
.mobile-menu-actions .btn.btn-secondary:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.5) !important;
  transform: none !important;
}

/* Nav Login button - BLACK text on light navbar (default) */
.nav-actions .btn.btn-secondary {
  background: transparent !important;
  color: #000000 !important;
  border: none !important;
  font-weight: 600 !important;
  padding: 0 1rem !important;
  height: 40px !important;
  font-size: 0.9375rem !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.nav-actions .btn.btn-secondary:hover {
  color: #d1fe17 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Nav Login button on dark hero pages - WHITE text */
/* Homepage with .cf-home-hero */
body:has(.cf-home-hero) .navbar:not(.scrolled) .nav-actions .btn.btn-secondary {
  color: #ffffff !important;
}

body:has(.cf-home-hero) .navbar:not(.scrolled) .nav-actions .btn.btn-secondary:hover {
  color: #d1fe17 !important;
}

/* Pricing page (has .pricing-card-section, dark hero) */
body:has(.pricing-card-section) .navbar:not(.scrolled) .nav-actions .btn.btn-secondary {
  color: #ffffff !important;
}

body:has(.pricing-card-section) .navbar:not(.scrolled) .nav-actions .btn.btn-secondary:hover {
  color: #d1fe17 !important;
}

/* Solution pages with hero overlay */
body:has(.hero-overlay) .navbar:not(.scrolled) .nav-actions .btn.btn-secondary {
  color: #ffffff !important;
}

body:has(.hero-overlay) .navbar:not(.scrolled) .nav-actions .btn.btn-secondary:hover {
  color: #d1fe17 !important;
}

/* Solution pages with .cf-solution-hero (dark hero) */
body:has(.cf-solution-hero) .navbar:not(.scrolled) .nav-actions .btn.btn-secondary {
  color: #ffffff !important;
}

body:has(.cf-solution-hero) .navbar:not(.scrolled) .nav-actions .btn.btn-secondary:hover {
  color: #d1fe17 !important;
}

/* Nav Login button when scrolled - BLACK text on white navbar */
.navbar.scrolled .nav-actions .btn.btn-secondary {
  color: #000000 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.navbar.scrolled .nav-actions .btn.btn-secondary:hover {
  color: #d1fe17 !important;
  background: transparent !important;
}

/* White navbar (has-announcement-banner) - same as scrolled state */
body.has-announcement-banner .navbar .nav-actions .btn.btn-secondary {
  color: #000000 !important;
  background: transparent !important;
  border: none !important;
}

body.has-announcement-banner .navbar .nav-actions .btn.btn-secondary:hover {
  color: #d1fe17 !important;
  background: transparent !important;
}

body.has-announcement-banner .navbar .nav-actions .btn.btn-primary {
  background: #000000 !important;
  color: #ffffff !important;
  box-shadow: inset 0px -3px rgba(255, 255, 255, 0.15) !important;
}

body.has-announcement-banner .navbar .nav-actions .btn.btn-primary:hover {
  background: #d1fe17 !important;
  color: #000000 !important;
  box-shadow: inset 0px -3px rgba(0, 0, 0, 0.25) !important;
}

/* ========================================
   PRICING PAGE BUTTONS
   ======================================== */

/* Free plan button (white card) */
.pricing-card:not(.featured-card) .pricing-cta {
  background: var(--btn-black) !important;
  color: var(--btn-white) !important;
  border: none !important;
  font-weight: var(--btn-font-weight) !important;
  padding: var(--btn-padding) !important;
  height: var(--btn-height) !important;
  font-size: var(--btn-font-size) !important;
  border-radius: var(--btn-border-radius) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  box-shadow: var(--btn-black-shadow) !important;
}

.pricing-card:not(.featured-card) .pricing-cta:hover {
  background: var(--btn-lime) !important;
  color: var(--btn-black) !important;
  box-shadow: var(--btn-lime-shadow) !important;
}

/* Agency card button */
.pricing-card.addon-card .pricing-cta {
  background: var(--btn-black) !important;
  color: var(--btn-white) !important;
  border: none !important;
  font-weight: var(--btn-font-weight) !important;
  padding: var(--btn-padding) !important;
  height: var(--btn-height) !important;
  font-size: var(--btn-font-size) !important;
  border-radius: var(--btn-border-radius) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  box-shadow: var(--btn-black-shadow) !important;
  width: 100%;
}

.pricing-card.addon-card .pricing-cta:hover {
  background: var(--btn-lime) !important;
  color: var(--btn-black) !important;
  box-shadow: var(--btn-lime-shadow) !important;
}

/* Agency banner button */
.btn.btn-agency {
  background: var(--btn-black) !important;
  color: var(--btn-white) !important;
  border: none !important;
  font-weight: var(--btn-font-weight) !important;
  padding: var(--btn-padding) !important;
  height: var(--btn-height) !important;
  font-size: var(--btn-font-size) !important;
  border-radius: var(--btn-border-radius) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  box-shadow: var(--btn-black-shadow) !important;
}

.btn.btn-agency:hover {
  background: var(--btn-lime) !important;
  color: var(--btn-black) !important;
  box-shadow: var(--btn-lime-shadow) !important;
}

/* ========================================
   HOMEPAGE HERO BUTTONS
   ======================================== */

/* Homepage dark hero - lime CTA button */
.cf-home-hero .cf-home-hero__cta-primary,
.cf-home-hero__cta-primary {
  background: var(--btn-lime) !important;
  color: var(--btn-black) !important;
  border: none !important;
  font-weight: var(--btn-font-weight) !important;
  padding: var(--btn-padding) !important;
  height: var(--btn-height) !important;
  font-size: var(--btn-font-size) !important;
  border-radius: var(--btn-border-radius) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  box-shadow: var(--btn-lime-shadow) !important;
  width: auto !important;
}

.cf-home-hero .cf-home-hero__cta-primary:hover,
.cf-home-hero__cta-primary:hover {
  background: var(--btn-white) !important;
  color: var(--btn-black) !important;
  box-shadow: var(--btn-lime-hover-shadow) !important;
  transform: none !important;
}

/* Light hero CTA button */
.cf-hero__cta,
.hero-cta-primary,
.hero-buttons .btn-primary {
  background: var(--btn-black) !important;
  color: var(--btn-white) !important;
  border: none !important;
  font-weight: var(--btn-font-weight) !important;
  padding: var(--btn-padding) !important;
  height: var(--btn-height) !important;
  font-size: var(--btn-font-size) !important;
  border-radius: var(--btn-border-radius) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  box-shadow: var(--btn-black-shadow) !important;
}

.cf-hero__cta:hover,
.hero-cta-primary:hover,
.hero-buttons .btn-primary:hover {
  background: var(--btn-lime) !important;
  color: var(--btn-black) !important;
  box-shadow: var(--btn-lime-shadow) !important;
  transform: none !important;
}

/* ========================================
   TOOLS PAGE BUTTONS
   ======================================== */

/* Tool page primary buttons */
.tool-cta-btn,
.tool-hero-cta,
.tools-hero-cta,
.tool-btn-primary,
.tools-landing-cta,
.instagram-tool-cta {
  background: var(--btn-lime) !important;
  color: var(--btn-black) !important;
  border: none !important;
  font-weight: var(--btn-font-weight) !important;
  padding: var(--btn-padding) !important;
  height: var(--btn-height) !important;
  font-size: var(--btn-font-size) !important;
  border-radius: var(--btn-border-radius) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  box-shadow: var(--btn-lime-shadow) !important;
}

.tool-cta-btn:hover,
.tool-hero-cta:hover,
.tools-hero-cta:hover,
.tool-btn-primary:hover,
.tools-landing-cta:hover,
.instagram-tool-cta:hover {
  background: var(--btn-white) !important;
  color: var(--btn-black) !important;
  box-shadow: var(--btn-lime-hover-shadow) !important;
}

/* ========================================
   FINAL CTA SECTIONS
   ======================================== */

.final-cta-section .btn-primary,
.cta-section .btn-primary,
.final-cta-btn,
.cta-primary-large {
  background: var(--btn-lime) !important;
  color: var(--btn-black) !important;
  border: none !important;
  font-weight: var(--btn-font-weight) !important;
  padding: var(--btn-padding) !important;
  height: var(--btn-height) !important;
  font-size: var(--btn-font-size) !important;
  border-radius: var(--btn-border-radius) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  box-shadow: var(--btn-lime-shadow) !important;
}

.final-cta-section .btn-primary:hover,
.cta-section .btn-primary:hover,
.final-cta-btn:hover,
.cta-primary-large:hover {
  background: var(--btn-white) !important;
  color: var(--btn-black) !important;
  box-shadow: var(--btn-lime-hover-shadow) !important;
  transform: none !important;
}

/* ========================================
   WAITLIST MODAL BUTTON
   ======================================== */

.waitlist-modal .btn-submit,
.waitlist-modal button[type="submit"],
.waitlist-form button,
#waitlist-form button {
  background: var(--btn-lime) !important;
  color: var(--btn-black) !important;
  border: none !important;
  font-weight: var(--btn-font-weight) !important;
  padding: var(--btn-padding) !important;
  height: var(--btn-height) !important;
  font-size: var(--btn-font-size) !important;
  border-radius: var(--btn-border-radius) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  box-shadow: var(--btn-lime-shadow) !important;
  width: 100% !important;
}

.waitlist-modal .btn-submit:hover,
.waitlist-modal button[type="submit"]:hover,
.waitlist-form button:hover,
#waitlist-form button:hover {
  background: var(--btn-white) !important;
  color: var(--btn-black) !important;
  box-shadow: var(--btn-lime-hover-shadow) !important;
}

/* ========================================
   GUIDES & RESOURCES PAGES
   ======================================== */

/* Hero primary buttons on light backgrounds */
.btn-hero-primary,
.guides-hero__cta .btn-hero-primary,
.guide-detail-hero__cta .btn-hero-primary,
.guide-mid-cta .btn-hero-primary {
  background: var(--btn-black) !important;
  color: var(--btn-white) !important;
  border: none !important;
  font-weight: var(--btn-font-weight) !important;
  padding: var(--btn-padding) !important;
  height: var(--btn-height) !important;
  font-size: var(--btn-font-size) !important;
  border-radius: var(--btn-border-radius) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  box-shadow: var(--btn-black-shadow) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.btn-hero-primary:hover,
.guides-hero__cta .btn-hero-primary:hover,
.guide-detail-hero__cta .btn-hero-primary:hover,
.guide-mid-cta .btn-hero-primary:hover {
  background: var(--btn-lime) !important;
  color: var(--btn-black) !important;
  box-shadow: var(--btn-lime-shadow) !important;
  transform: none !important;
}

/* ========================================
   SOLUTION & COMPARISON PAGES
   ======================================== */

.solution-hero-cta,
.comparison-hero-cta,
.solution-cta-btn,
.comparison-cta-btn {
  background: var(--btn-black) !important;
  color: var(--btn-white) !important;
  border: none !important;
  font-weight: var(--btn-font-weight) !important;
  padding: var(--btn-padding) !important;
  height: var(--btn-height) !important;
  font-size: var(--btn-font-size) !important;
  border-radius: var(--btn-border-radius) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  box-shadow: var(--btn-black-shadow) !important;
}

.solution-hero-cta:hover,
.comparison-hero-cta:hover,
.solution-cta-btn:hover,
.comparison-cta-btn:hover {
  background: var(--btn-lime) !important;
  color: var(--btn-black) !important;
  box-shadow: var(--btn-lime-shadow) !important;
}

/* ========================================
   LEGAL PAGES
   ======================================== */

.legal-cta-btn,
.legal-page .btn-primary {
  background: var(--btn-black) !important;
  color: var(--btn-white) !important;
  border: none !important;
  font-weight: var(--btn-font-weight) !important;
  padding: var(--btn-padding) !important;
  height: var(--btn-height) !important;
  font-size: var(--btn-font-size) !important;
  border-radius: var(--btn-border-radius) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  box-shadow: var(--btn-black-shadow) !important;
}

.legal-cta-btn:hover,
.legal-page .btn-primary:hover {
  background: var(--btn-lime) !important;
  color: var(--btn-black) !important;
  box-shadow: var(--btn-lime-shadow) !important;
}

/* ========================================
   HOMEPAGE SECTION BUTTONS (Below Hero)
   SEO Intro, Testimonials, Personas, How It Works, Bento Features
   ======================================== */

/* Black filled buttons - hover to lime */
.cf-seo-intro__cta-link,
.cf-testimonials__cta-button,
.cf-home-personas-cta__button,
.cf-bento-features__cta-btn {
  background: var(--btn-black) !important;
  color: var(--btn-white) !important;
  border: none !important;
  font-weight: var(--btn-font-weight) !important;
  padding: var(--btn-padding) !important;
  height: var(--btn-height) !important;
  font-size: var(--btn-font-size) !important;
  border-radius: var(--btn-border-radius) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  box-shadow: var(--btn-black-shadow) !important;
  line-height: 1 !important;
}

.cf-seo-intro__cta-link:hover,
.cf-testimonials__cta-button:hover,
.cf-home-personas-cta__button:hover,
.cf-bento-features__cta-btn:hover {
  background: var(--btn-lime) !important;
  color: var(--btn-black) !important;
  box-shadow: var(--btn-lime-shadow) !important;
  transform: none !important;
}

/* How It Works V2 button - lime green (already on light bg) */
.cf-how-it-works-v2__cta-button {
  background: var(--btn-lime) !important;
  color: var(--btn-black) !important;
  border: none !important;
  font-weight: var(--btn-font-weight) !important;
  padding: var(--btn-padding) !important;
  height: var(--btn-height) !important;
  font-size: var(--btn-font-size) !important;
  border-radius: var(--btn-border-radius) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  box-shadow: var(--btn-lime-shadow) !important;
  line-height: 1 !important;
}

.cf-how-it-works-v2__cta-button:hover {
  background: var(--btn-white) !important;
  color: var(--btn-black) !important;
  box-shadow: var(--btn-lime-hover-shadow) !important;
  transform: none !important;
}

/* ========================================
   TOOL PAGE BUTTONS
   Instagram tools, calculators, generators
   ======================================== */

/* Primary tool buttons - black, hover to lime */
.btn--primary,
button.btn--primary,
a.btn--primary {
  background: var(--btn-black) !important;
  color: var(--btn-white) !important;
  border: none !important;
  font-weight: var(--btn-font-weight) !important;
  padding: var(--btn-padding) !important;
  height: var(--btn-height) !important;
  font-size: var(--btn-font-size) !important;
  border-radius: var(--btn-border-radius) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  box-shadow: var(--btn-black-shadow) !important;
  line-height: 1 !important;
}

.btn--primary:hover,
button.btn--primary:hover,
a.btn--primary:hover {
  background: var(--btn-lime) !important;
  color: var(--btn-black) !important;
  box-shadow: var(--btn-lime-shadow) !important;
  transform: none !important;
}

/* Outline tool buttons - now filled black */
.btn--outline,
button.btn--outline,
a.btn--outline {
  background: var(--btn-black) !important;
  color: var(--btn-white) !important;
  border: none !important;
  font-weight: var(--btn-font-weight) !important;
  padding: var(--btn-padding) !important;
  height: var(--btn-height) !important;
  font-size: var(--btn-font-size) !important;
  border-radius: var(--btn-border-radius) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  box-shadow: var(--btn-black-shadow) !important;
  line-height: 1 !important;
}

.btn--outline:hover,
button.btn--outline:hover,
a.btn--outline:hover {
  background: var(--btn-lime) !important;
  color: var(--btn-black) !important;
  box-shadow: var(--btn-lime-shadow) !important;
  transform: none !important;
}

/* Large CTA tool buttons */
.btn--cta-large,
button.btn--cta-large,
a.btn--cta-large {
  background: var(--btn-black) !important;
  color: var(--btn-white) !important;
  border: none !important;
  font-weight: var(--btn-font-weight) !important;
  padding: 0 2rem !important;
  height: 48px !important;
  font-size: 1rem !important;
  border-radius: var(--btn-border-radius) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  box-shadow: var(--btn-black-shadow) !important;
  line-height: 1 !important;
}

.btn--cta-large:hover,
button.btn--cta-large:hover,
a.btn--cta-large:hover {
  background: var(--btn-lime) !important;
  color: var(--btn-black) !important;
  box-shadow: var(--btn-lime-shadow) !important;
  transform: none !important;
}

/* ========================================
   GUIDE PAGE BUTTONS
   DM automation guides, resources
   ======================================== */

.cta-button,
.cta-button--primary,
button.cta-button,
a.cta-button {
  background: var(--btn-black) !important;
  color: var(--btn-white) !important;
  border: none !important;
  font-weight: var(--btn-font-weight) !important;
  padding: var(--btn-padding) !important;
  height: var(--btn-height) !important;
  font-size: var(--btn-font-size) !important;
  border-radius: var(--btn-border-radius) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  box-shadow: var(--btn-black-shadow) !important;
  line-height: 1 !important;
}

.cta-button:hover,
.cta-button--primary:hover,
button.cta-button:hover,
a.cta-button:hover {
  background: var(--btn-lime) !important;
  color: var(--btn-black) !important;
  box-shadow: var(--btn-lime-shadow) !important;
  transform: none !important;
}

/* Secondary guide buttons */
.cta-button--secondary,
button.cta-button--secondary,
a.cta-button--secondary {
  background: var(--btn-black) !important;
  color: var(--btn-white) !important;
  border: none !important;
  font-weight: var(--btn-font-weight) !important;
  padding: var(--btn-padding) !important;
  height: var(--btn-height) !important;
  font-size: var(--btn-font-size) !important;
  border-radius: var(--btn-border-radius) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  box-shadow: var(--btn-black-shadow) !important;
  line-height: 1 !important;
}

.cta-button--secondary:hover,
button.cta-button--secondary:hover,
a.cta-button--secondary:hover {
  background: var(--btn-lime) !important;
  color: var(--btn-black) !important;
  box-shadow: var(--btn-lime-shadow) !important;
  transform: none !important;
}

/* ========================================
   EXAMPLES PAGE BUTTONS
   Campaign examples, playbooks
   ======================================== */

.examples-hero__cta,
a.examples-hero__cta {
  background: var(--btn-black) !important;
  color: var(--btn-white) !important;
  border: none !important;
  font-weight: var(--btn-font-weight) !important;
  padding: var(--btn-padding) !important;
  height: var(--btn-height) !important;
  font-size: var(--btn-font-size) !important;
  border-radius: var(--btn-border-radius) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  box-shadow: var(--btn-black-shadow) !important;
  line-height: 1 !important;
}

.examples-hero__cta:hover,
a.examples-hero__cta:hover {
  background: var(--btn-lime) !important;
  color: var(--btn-black) !important;
  box-shadow: var(--btn-lime-shadow) !important;
  transform: none !important;
}

/* ========================================
   REMOVE ALL TRANSFORMS ON HOVER
   Buttons should not scale or move (except subtle active press)
   ======================================== */

.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-lime:hover,
.pricing-cta:hover,
[class*="cta"]:hover,
[class*="btn"]:hover {
  transform: none !important;
}

/* Active state - subtle press effect */
.btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-lime:active,
.pricing-cta:active,
[class*="cta"]:active {
  transform: translateY(1px) !important;
}

/* ========================================
   MOBILE RESPONSIVENESS
   ======================================== */

@media (max-width: 768px) {
  /* Slightly smaller buttons on mobile (excluding hero CTA) */
  .btn.btn-primary,
  .btn.btn-secondary,
  .btn-primary,
  .btn-secondary,
  .pricing-cta,
  .cf-hero__cta,
  .nav-actions .btn,
  .mobile-menu-actions .btn,
  /* New standardized buttons */
  .cf-seo-intro__cta-link,
  .cf-testimonials__cta-button,
  .cf-home-personas-cta__button,
  .cf-bento-features__cta-btn,
  .btn--primary,
  .btn--outline,
  .cta-button,
  .cta-button--primary,
  .cta-button--secondary,
  .examples-hero__cta {
    height: 38px !important;
    font-size: 0.875rem !important;
    border-radius: 10px !important;
  }

  /* Full width buttons in certain contexts on mobile */
  .mobile-menu-actions .btn.btn-primary,
  .mobile-menu-actions .btn.btn-secondary {
    width: 100% !important;
  }

  /* Hero CTA buttons stay larger on tablet */
  .cf-home-hero .cf-home-hero__cta-primary,
  .cf-solution-hero .cf-home-hero__cta-primary {
    font-size: 1.0625rem !important; /* 17px on tablet */
    height: 46px !important;
    padding: 0 1.75rem !important;
  }

  /* Large CTA buttons scale down slightly */
  .btn--cta-large,
  .cf-how-it-works-v2__cta-button {
    height: 44px !important;
    font-size: 0.9375rem !important;
    border-radius: 10px !important;
  }
}

@media (max-width: 480px) {
  /* Even smaller for very small screens (excluding hero CTA) */
  .btn.btn-primary,
  .btn.btn-secondary,
  .btn-primary,
  .btn-secondary,
  .pricing-cta,
  .cf-hero__cta,
  /* New standardized buttons */
  .cf-seo-intro__cta-link,
  .cf-testimonials__cta-button,
  .cf-home-personas-cta__button,
  .cf-bento-features__cta-btn,
  .btn--primary,
  .btn--outline,
  .cta-button,
  .cta-button--primary,
  .cta-button--secondary,
  .examples-hero__cta {
    height: 36px !important;
    padding: 0 1.25rem !important;
    font-size: 0.8125rem !important;
  }

  /* Hero CTA buttons still prominent on mobile */
  .cf-home-hero .cf-home-hero__cta-primary,
  .cf-solution-hero .cf-home-hero__cta-primary {
    font-size: 1rem !important; /* 16px on mobile */
    height: 44px !important;
    padding: 0 1.5rem !important;
  }

  /* Large CTA buttons scale down on small screens */
  .btn--cta-large,
  .cf-how-it-works-v2__cta-button {
    height: 40px !important;
    font-size: 0.875rem !important;
    padding: 0 1.5rem !important;
  }
}

/* ========================================
   ACCESSIBILITY - FOCUS STATES
   ======================================== */

.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.pricing-cta:focus-visible,
[class*="cta"]:focus-visible {
  outline: 2px solid var(--btn-lime) !important;
  outline-offset: 2px !important;
}

/* Remove default focus outline */
.btn:focus:not(:focus-visible),
.btn-primary:focus:not(:focus-visible),
.btn-secondary:focus:not(:focus-visible) {
  outline: none !important;
}

/* ========================================
   DISABLED STATE
   ======================================== */

.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.pricing-cta:disabled,
[class*="cta"]:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ========================================
   REMOVE BOX-SHADOWS (except inset 3D effect)
   Following brand guidelines
   ======================================== */

.btn::before,
.btn::after,
.btn-primary::before,
.btn-primary::after,
.btn-secondary::before,
.btn-secondary::after {
  content: none !important;
  display: none !important;
}

/* ========================================
   CRITICAL OVERRIDES - MUST BE LAST
   These rules override any conflicts above
   ======================================== */

/* PRICING PAGE: Featured card (Pro) button MUST be lime green */
/* High specificity to override .btn.btn-primary rules */
.pricing-card.featured-card .btn.btn-primary.pricing-cta,
.pricing-card.featured-card .pricing-cta.btn-primary,
.pricing-card.featured-card .pricing-cta {
  background: #d1fe17 !important;
  color: #000000 !important;
  border: none !important;
  font-weight: 600 !important;
  padding: 0 1.5rem !important;
  height: 40px !important;
  font-size: 0.9375rem !important;
  border-radius: 12px !important;
  box-shadow: inset 0px -3px rgba(0, 0, 0, 0.25) !important;
}

.pricing-card.featured-card .btn.btn-primary.pricing-cta:hover,
.pricing-card.featured-card .pricing-cta.btn-primary:hover,
.pricing-card.featured-card .pricing-cta:hover {
  background: #ffffff !important;
  color: #000000 !important;
  box-shadow: inset 0px -3px rgba(0, 0, 0, 0.1) !important;
}

/* HOMEPAGE & SOLUTION PAGES: Larger buttons for hero CTA sections */
.cf-home-hero .cf-home-hero__cta-primary,
.cf-solution-hero .cf-home-hero__cta-primary,
.cf-home-final-cta__button {
  background: #d1fe17 !important;
  color: #000000 !important;
  border: none !important;
  font-weight: 600 !important;
  font-size: 1.125rem !important; /* 18px - larger for hero CTA prominence */
  padding: 0 2.25rem !important;
  height: 48px !important;
  border-radius: 12px !important;
  box-shadow: inset 0px -3px rgba(0, 0, 0, 0.25) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
}

.cf-home-hero .cf-home-hero__cta-primary:hover,
.cf-solution-hero .cf-home-hero__cta-primary:hover,
.cf-home-final-cta__button:hover {
  background: #ffffff !important;
  color: #000000 !important;
  box-shadow: inset 0px -3px rgba(0, 0, 0, 0.1) !important;
  transform: none !important;
}

/* Desktop: Even larger hero CTA buttons */
@media (min-width: 1024px) {
  .cf-home-hero .cf-home-hero__cta-primary,
  .cf-solution-hero .cf-home-hero__cta-primary,
  .cf-home-final-cta__button {
    font-size: 1.25rem !important; /* 20px for desktop */
    padding: 0 2.75rem !important;
    height: 52px !important;
  }
}

/* ========================================
   TRANSFORM CONFLICT OVERRIDES
   These override hover transforms from other files
   ======================================== */

/* Override transforms from homepage-clean.css */
.btn-cta-inverted:hover,
.btn-lime-primary:hover {
  transform: none !important;
}

/* ========================================
   UTILITY CLASSES
   Modifiers for button sizing and width
   ======================================== */

/* Full width button */
.btn-full-width {
  width: 100% !important;
}

/* Small button variant */
.btn-sm,
.btn-primary.btn-sm,
.btn-lime.btn-sm {
  height: 32px !important;
  padding: 0 1rem !important;
  font-size: 0.75rem !important;
  border-radius: 8px !important;
}

/* Small button on mobile */
@media (max-width: 768px) {
  .btn-sm,
  .btn-primary.btn-sm,
  .btn-lime.btn-sm {
    height: 30px !important;
    padding: 0 0.875rem !important;
    font-size: 0.6875rem !important;
  }
}