a.btn.btn-black{
  background-color:#0A0A0A !important;
  border-color:#0A0A0A !important;
  color:#fff !important;
}

a.btn.btn-black:hover{
  opacity:0.5;
  transition:opacity .2s ease;
  color:#fff !important;
}

a.btn-play-cta{
  display:inline-flex !important;
  align-items:center !important;
  gap:12px !important;
}

a.btn-play-cta .btn-icon{
  width:20px !important;
  height:20px !important;
  flex:0 0 20px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:0 !important;
}

a.btn-play-cta .btn-icon svg{
  width:20px !important;
  height:20px !important;
  display:block !important;
}

a.btn-play-cta .btn-icon svg path{
  vector-effect: non-scaling-stroke;
}

section.section.section-tabbed-content .nav.horizontal-tabs .nav-link {
  background: transparent !important;
  color: #424242 !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

section.section.section-tabbed-content .nav.horizontal-tabs .nav-link.active {
  background-color: #0A0A0A !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10) !important;
}

section.section.section-tabbed-content .nav.horizontal-tabs .nav-link:not(.active):hover {
  background-color: #0A0A0A !important;
  color: #fff !important;
}

/* =========================
   PRICING: Annual / Monthly switcher
   ========================= */
section.section-pricing-table .pricing-table-price-switcher {
  background: #f5f5f5 !important;
  border: 1px solid #e6e6e6 !important;
  border-radius: 999px !important;
  padding: 4px !important;
  gap: 4px !important;
}

section.section-pricing-table .pricing-table-price-switcher .nav-link {
  background: transparent !important;
  color: #6b6b6b !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}

section.section-pricing-table .pricing-table-price-switcher .nav-link.active,
section.section-pricing-table .pricing-table-price-switcher .nav-link[aria-selected="true"] {
  background-color: #0a0a0a !important;
  color: #fff !important;
  box-shadow: none !important;
}

section.section-pricing-table .pricing-table-price-switcher .nav-link:not(.active):hover {
  background-color: #0a0a0a !important;
  color: #fff !important;
  transition: background-color .2s ease, color .2s ease;
}

/* =========================
   PRICING: Buttons in cards
   - Pro card (popular) = black
   - rest = outline
   ========================= */

section.section-pricing-table .pricing-card.pricing-card-popular .btn.btn-primary {
  background-color: #0a0a0a !important;
  border-color: #0a0a0a !important;
  color: #fff !important;
}

section.section-pricing-table .pricing-card.pricing-card-popular .btn.btn-primary:hover {
  opacity: .5;
  transition: opacity .2s ease;
  color: #fff !important;
}

section.section-pricing-table .pricing-card:not(.pricing-card-popular) .btn.btn-primary {
  background-color: transparent !important;
  border-color: #d9d9d9 !important;
  color: #3a3a3a !important;
}

section.section-pricing-table .pricing-card:not(.pricing-card-popular) .btn.btn-primary:hover {
  background-color: #0a0a0a !important;
  border-color: #0a0a0a !important;
  color: #fff !important;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* =========================
   PRICING / COMPARE: Show/Hide Plan Features button
   ========================= */

a.btn.compare-collapse-button.btn-secondary-gray,
a.btn.compare-collapse-button.btn-secondary-gray:visited {
  background-color: transparent !important;
  border: 1px solid #d9d9d9 !important;
  color: #3a3a3a !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.1) !important;
}

a.btn.compare-collapse-button.btn-secondary-gray:hover {
  background-color: #0a0a0a !important;
  border-color: #0a0a0a !important;
  color: #fff !important;
}

a.btn.compare-collapse-button.btn-secondary-gray svg,
a.btn.compare-collapse-button.btn-secondary-gray svg path {
  stroke: currentColor !important;
  fill: none !important;
}

#compareTable table tr > *:nth-child(3) a.btn,
#compareTable table tr > *:nth-child(3) button.btn,
#compareTable table tr > *:nth-child(3) a[class*="btn"],
#compareTable table tr > *:nth-child(3) button[class*="btn"] {
  background-color: #0a0a0a !important;
  border-color: #0a0a0a !important;
  color: #ffffff !important;
}

#compareTable table tr > *:nth-child(3) a.btn:hover,
#compareTable table tr > *:nth-child(3) button.btn:hover,
#compareTable table tr > *:nth-child(3) a[class*="btn"]:hover,
#compareTable table tr > *:nth-child(3) button[class*="btn"]:hover {
  opacity: 0.85 !important;
}

/* =========================
   PRICING: Compare Features
   ========================= */

/* 1) Show/Hide Plan Features button (collapse trigger) */
section.section-pricing-table .compare-collapse-button,
section.section-pricing-table a.compare-collapse-button {
  background-color: #ffffff !important;
  border: 1px solid #d0d5dd !important;
  color: #101828 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.1) !important;
}

section.section-pricing-table .compare-collapse-button:hover,
section.section-pricing-table a.compare-collapse-button:hover {
  background-color: #f9fafb !important;
  border-color: #d0d5dd !important;
  color: #101828 !important;
}

section.section-compare-table #compareTable a.btn,
section.section-compare-table #compareTable button.btn,
section.section-compare-table #compareTable a[class*="btn"],
section.section-compare-table #compareTable button[class*="btn"] {
  background-color: #ffffff !important;
  border: 1px solid #d0d5dd !important;
  color: #101828 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.1) !important;
}

section.section-compare-table #compareTable table tr > *:nth-child(3) a.btn,
section.section-compare-table #compareTable table tr > *:nth-child(3) button.btn,
section.section-compare-table #compareTable table tr > *:nth-child(3) a[class*="btn"],
section.section-compare-table #compareTable table tr > *:nth-child(3) button[class*="btn"] {
  background-color: #0a0a0a !important;
  border-color: #0a0a0a !important;
  color: #ffffff !important;
}

section.section-compare-table #compareTable .row > :nth-child(3) a.btn,
section.section-compare-table #compareTable .row > :nth-child(3) button.btn,
section.section-compare-table #compareTable .row > :nth-child(3) a[class*="btn"],
section.section-compare-table #compareTable .row > :nth-child(3) button[class*="btn"] {
  background-color: #0a0a0a !important;
  border-color: #0a0a0a !important;
  color: #ffffff !important;
}

section.section-compare-table #compareTable table tr > *:nth-child(3) a.btn:hover,
section.section-compare-table #compareTable table tr > *:nth-child(3) button.btn:hover,
section.section-compare-table #compareTable .row > :nth-child(3) a.btn:hover,
section.section-compare-table #compareTable .row > :nth-child(3) button.btn:hover {
  opacity: 0.9 !important;
}