/* Shared UI Components
 * Scope: Buttons only for now
 * This file normalizes base button styles across pages without changing visual themes.
 */

/* Design tokens removed from here; now defined globally in tokens.css under :root */

/* Base button: apply to existing page-specific classes as aliases */
.btn,
.btn--primary,
.btn--secondary,
.btn--primary-dark,
.btn--secondary-dark,
.uc-btn,
.kb-hero__btn,
.kb-cta__btn {
  display: inline-block;
  padding: clamp(16px, 4vw, 18px) clamp(12px, 3vw, 24px);
  border-radius: 50px;
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  transition: all 0.3s ease;
  border: var(--btn-border-width, 1px) solid transparent;
  cursor: pointer;
  text-align: center;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  backdrop-filter: var(--btn-backdrop-filter, none);
}

/* Unified button variants */
.btn--primary {
  background: var(--btn-primary-bg, #007bff);
  color: var(--btn-primary-color, #ffffff);
  border-color: var(--btn-primary-border, transparent);
}

.btn--primary:hover {
  background: var(--btn-primary-hover-bg, #404040) !important;
  color: var(--btn-primary-hover-color, #ffffff) !important;
  border-color: var(--btn-primary-hover-border, transparent) !important;
  box-shadow: var(--btn-primary-hover-shadow, 0 8px 25px rgba(31, 31, 31, 0.3)) !important;
  transform: var(--btn-primary-hover-transform, translateY(-2px)) !important;
}

.btn--primary:focus,
.btn--primary:active {
  background: var(--btn-primary-focus-bg, #007bff);
  color: var(--btn-primary-focus-color, #ffffff);
  border-color: var(--btn-primary-focus-border, transparent);
}

.btn--secondary {
  background: var(--btn-secondary-bg, #f1f1f1);
  color: var(--btn-secondary-color, #333333);
  border-color: var(--btn-secondary-border, #e0e0e0);
}

.btn--secondary:hover {
  background: var(--btn-secondary-hover-bg, #1F1F1F) !important;
  color: var(--btn-secondary-hover-color, #ffffff) !important;
  border-color: var(--btn-secondary-hover-border, #1F1F1F) !important;
  box-shadow: var(--btn-secondary-hover-shadow, 0 6px 20px rgba(31, 31, 31, 0.25)) !important;
  transform: var(--btn-secondary-hover-transform, translateY(-1px)) !important;
}

.btn--secondary:focus,
.btn--secondary:active {
  background: var(--btn-secondary-focus-bg, #f1f1f1);
  color: var(--btn-secondary-focus-color, #333333);
  border-color: var(--btn-secondary-focus-border, #e0e0e0);
}

/* Dark background button variants */
.btn--primary-dark {
  background: var(--btn-primary-bg-dark, #ffffff);
  color: var(--btn-primary-color-dark, #1F1F1F);
  border-color: var(--btn-primary-border-dark, #ffffff);
}

.btn--primary-dark:hover {
  background: var(--btn-primary-hover-bg-dark, #f0f0f0) !important;
  color: var(--btn-primary-hover-color-dark, #1F1F1F) !important;
  border-color: var(--btn-primary-hover-border-dark, #f0f0f0) !important;
  box-shadow: var(--btn-primary-hover-shadow-dark, 0 6px 20px rgba(255, 255, 255, 0.25)) !important;
  transform: var(--btn-primary-hover-transform-dark, translateY(-2px)) !important;
}

.btn--primary-dark:focus,
.btn--primary-dark:active {
  background: var(--btn-primary-focus-bg-dark, #ffffff);
  color: var(--btn-primary-focus-color-dark, #1F1F1F);
  border-color: var(--btn-primary-focus-border-dark, #ffffff);
}

.btn--secondary-dark {
  background: var(--btn-secondary-bg-dark, transparent);
  color: var(--btn-secondary-color-dark, #ffffff);
  border-color: var(--btn-secondary-border-dark, #ffffff);
}

.btn--secondary-dark:hover {
  background: var(--btn-secondary-hover-bg-dark, #ffffff) !important;
  color: var(--btn-secondary-hover-color-dark, #1F1F1F) !important;
  border-color: var(--btn-secondary-hover-border-dark, #ffffff) !important;
  box-shadow: var(--btn-secondary-hover-shadow-dark, 0 6px 20px rgba(255, 255, 255, 0.2)) !important;
  transform: var(--btn-secondary-hover-transform-dark, translateY(-1px)) !important;
}

.btn--secondary-dark:focus,
.btn--secondary-dark:active {
  background: var(--btn-secondary-focus-bg-dark, transparent);
  color: var(--btn-secondary-focus-color-dark, #ffffff);
  border-color: var(--btn-secondary-focus-border-dark, #ffffff);
}

/* Focus/active: buttons stay in normal state (no visual changes) */
.btn:focus,
.btn:active,
.uc-btn:focus,
.uc-btn:active,
.kb-hero__btn:focus,
.kb-hero__btn:active,
.kb-cta__btn:focus,
.kb-cta__btn:active {
  outline: var(--btn-focus-outline, none);
  outline-offset: var(--btn-focus-outline-offset, 0);
  box-shadow: var(--btn-focus-box-shadow, none);
  transform: var(--btn-focus-transform, none);
  background: var(--btn-focus-bg, inherit);
  color: var(--btn-focus-color, inherit);
  border-color: var(--btn-focus-border-color, inherit);
  text-decoration: none;
}

/* Outline button (aka secondary) - keep neutral, themed pages may override colors via CSS variables */
.btn--outline,
.uc-btn--outline,
.kb-hero__btn--secondary,
.kb-cta__btn--secondary {
  background: var(--btn-outline-bg, transparent);
  color: var(--btn-outline-color, #1F1F1F);
  border-color: var(--btn-outline-color, #1F1F1F);
}

.btn--outline:hover,
.uc-btn--outline:hover,
.kb-hero__btn--secondary:hover,
.kb-cta__btn--secondary:hover {
  /* Modern hover: soft gradient fill, subtle lift, ambient shadow */
  background: var(--btn-outline-hover-bg, linear-gradient(135deg, var(--btn-hover-gradient-start, #1F1F1F) 0%, var(--btn-hover-gradient-end, #000000) 100%));
  color: var(--btn-outline-hover-text, #FFF);
  transform: translateY(-2px) scale(var(--btn-hover-scale, 1.02));
  box-shadow: 0 12px 28px var(--btn-hover-shadow, rgba(0, 0, 0, 0.18)), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  border-color: transparent;
}

/* Active press feedback (no persistent state) */
.btn--outline:active,
.uc-btn--outline:active,
.kb-hero__btn--secondary:active,
.kb-cta__btn--secondary:active {
  transform: translateY(0) scale(var(--btn-press-scale, 0.98));
  box-shadow: 0 6px 16px var(--btn-hover-shadow, rgba(0, 0, 0, 0.16));
}

/* Solid buttons (primary-style) */
.btn--solid,
.kb-hero__btn--primary,
.kb-cta__btn--primary {
  background: var(--btn-solid-bg, #1F1F1F);
  color: var(--btn-solid-text, #FFFFFF);
  border-color: var(--btn-solid-border, currentColor);
}

.btn--solid:hover,
.kb-hero__btn--primary:hover,
.kb-cta__btn--primary:hover {
  background: var(--btn-solid-hover-bg, #000000);
  color: var(--btn-solid-hover-text, #FFFFFF);
  transform: translateY(-2px) scale(var(--btn-hover-scale, 1.02));
  box-shadow: 0 12px 28px var(--btn-hover-shadow, rgba(0, 0, 0, 0.18)), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.btn--solid:active,
.kb-hero__btn--primary:active,
.kb-cta__btn--primary:active {
  transform: translateY(0) scale(var(--btn-press-scale, 0.98));
  box-shadow: 0 6px 16px var(--btn-hover-shadow, rgba(0, 0, 0, 0.16));
}

/* Primary button focus/active - inherit from base focus rules above */

/* Size modifier */
.btn--large,
.uc-btn--large {
  padding: 20px 40px;
  font-size: 1.1rem;
}

/* ========================================
   BADGE COMPONENT - Unified across all pages
   ======================================== */

.badge {
  display: inline-block;
  padding: var(--badge-padding);
  font-family: var(--font-sans);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  line-height: var(--badge-line-height);
  text-transform: var(--badge-text-transform);
  text-align: center;
  border-radius: var(--badge-border-radius);
  width: fit-content;
  white-space: nowrap;
}

/* Badge Variants */
.badge--primary {
  background: var(--badge-primary-bg);
  color: var(--badge-primary-color);
  border: var(--badge-primary-border);
}

.badge--secondary {
  background: var(--badge-secondary-bg);
  color: var(--badge-secondary-color);
  border: var(--badge-secondary-border);
}

/* Dark Badge Variants */
.badge--dark-primary {
  background: var(--badge-dark-primary-bg);
  color: var(--badge-dark-primary-color);
  border: var(--badge-dark-primary-border);
}

.badge--dark-secondary {
  background: var(--badge-dark-secondary-bg);
  color: var(--badge-dark-secondary-color);
  border: var(--badge-dark-secondary-border);
}

.badge--dark {
  background: var(--badge-dark-bg);
  color: var(--badge-dark-color);
  border: var(--badge-dark-border);
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
  .badge {
    padding: clamp(8px, 2vw, 12px) clamp(10px, 2.5vw, 16px);
    font-size: clamp(11px, 2.2vw, 13px);
  }
}

/* ========================================
   HERO TITLE COMPONENT - Unified across all internal pages
   ======================================== */

.hero-title {
  font-size: var(--hero-title-font-size);
  font-weight: var(--hero-title-font-weight);
  line-height: var(--hero-title-line-height);
  color: var(--hero-title-color);
  margin: var(--hero-title-margin);
  font-family: var(--hero-title-font-family);
}

/* Hero Subtitle Component - universal subtitle for all pages */
.hero__subtitle {
  font-size: var(--hero-subtitle-font-size);
  line-height: var(--hero-subtitle-line-height);
  color: var(--hero-subtitle-color);
  margin: var(--hero-subtitle-margin);
  font-family: var(--hero-subtitle-font-family);
  font-weight: var(--hero-subtitle-font-weight);
}

/* UC Hero Container Component */
.uc-hero .uc-container {
  display: grid;
  grid-template-columns: var(--uc-hero-container-grid-columns);
  gap: var(--uc-hero-container-gap);
  align-items: var(--uc-hero-container-align-items);
  position: var(--uc-hero-container-position);
  padding: 0;
}

/* UC Hero Container Tablet Styles */
@media (max-width: 1024px) {
  .uc-hero .uc-container {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
}

/* UC Hero Container Mobile Styles */
@media (max-width: 768px) {
  .uc-hero .uc-container {
    grid-template-columns: var(--uc-hero-container-mobile-grid-columns);
    gap: var(--uc-hero-container-mobile-gap);
    text-align: var(--uc-hero-container-mobile-text-align);
  }
}

/* UC Hero Actions Component */
/* UC Hero Actions responsive styles moved to components.css */
/* UC Hero Actions Mobile */
@media (max-width: 768px) {
/* UC Hero Actions responsive styles moved to components.css */  
  .uc-hero__actions .uc-btn {
    flex: 1;
    min-width: 200px;
  }
}

@media (max-width: 480px) {
/* UC Hero Actions responsive styles moved to components.css */  
  .uc-hero__actions .uc-btn {
    width: 100%;
    max-width: 280px;
  }
}

@media (max-width: 480px) {
   /* .hero-title {
    font-size: clamp(24px, 5vw, 36px);
  }  */
  
  .hero-subtitle {
    font-size: clamp(13px, 2.8vw, 15px);
    line-height: clamp(18px, 3.2vw, 22px);
  }
}
  
/* UC Hero Base Styles */
.uc-hero {
  background: #fff;
  color: #1F1F1F;
  padding: clamp(80px, 10vw, 150px) 0;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* UC Hero Gradients */
.uc-hero__gradient-left,
.uc-hero__gradient-right {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  filter: blur(100px);
  z-index: -1;
}

/* UC Hero Badge */
.uc-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: clamp(6px, 1.5vw, 8px) clamp(12px, 3vw, 24px);
  background: transparent;
  border: 1px solid #1F1F1F;
  border-radius: 999px;
  font-size: clamp(12px, 2.5vw, 14px);
  font-weight: 500;
  color: #1F1F1F;
  margin-bottom: clamp(16px, 4vw, 24px);
}

.uc-hero__badge-text {
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* UC Hero Content Actions */
.uc-hero__content .btn--primary,
.uc-hero__content .btn--secondary {
  margin-right: 0;
  margin-bottom: 16px;
}

.uc-hero__content .btn--primary:last-child,
.uc-hero__content .btn--secondary:last-child {
  margin-right: 0;
}

/* UC Hero Visual */
.uc-hero__visual {
  display: flex;
  justify-content: end;
  align-items: center;
  height: 100%;
  position: relative;
}

.uc-hero__image-container {
  position: relative;
  width: 100%;
  max-width: 600px;
}

.uc-hero__image {
  width: 100%;
  height: auto;
  border-radius: 16px;
}

.uc-hero__star {
  position: absolute;
  top: 25%;
  right: 20%;
  z-index: 10;
}

.uc-hero__star-img {
  width: 80px;
  height: 80px;
  animation: starPulse 2s ease-in-out infinite;
}

@keyframes starPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

/* UC Hero Responsive Styles */
@media (max-width: 1024px) {
  .uc-hero__image-container {
    max-width: 400px;
  }
  .uc-hero__star { top: -15px; right: -15px; }
  .uc-hero__star-img { width: 40px; height: 40px; }
}

@media (max-width: 768px) {
  .uc-hero {
    padding: 100px 0 60px 0;
  }
  .uc-hero__image-container { max-width: 300px; }
  .uc-hero__star-img { width: 30px; height: 30px; }
}

@media (max-width: 480px) {
  .uc-hero__image-container { max-width: 300px; }
  .uc-hero__star-img { width: 30px; height: 30px; }
}

/* Section Title Components */
.section-title--light {
  font-size: var(--section-title-light-font-size);
  font-weight: var(--section-title-light-font-weight);
  line-height: var(--section-title-light-line-height);
  color: var(--section-title-light-color);
  margin: var(--section-title-light-margin);
  font-family: var(--section-title-light-font-family);
}

.section-title--dark {
  font-size: var(--section-title-dark-font-size);
  font-weight: var(--section-title-dark-font-weight);
  line-height: var(--section-title-dark-line-height);
  color: var(--section-title-dark-color);
  margin: var(--section-title-dark-margin);
  font-family: var(--section-title-dark-font-family);
}

/* Section Description Components */
.section-description--light {
  font-size: var(--section-description-light-font-size);
  line-height: var(--section-description-light-line-height);
  color: var(--section-description-light-color);
  margin: var(--section-description-light-margin);
  font-weight: var(--section-description-light-font-weight);
  font-family: var(--section-description-light-font-family);
}

.section-description--dark {
  font-size: var(--section-description-dark-font-size);
  line-height: var(--section-description-dark-line-height);
  color: var(--section-description-dark-color);
  margin: var(--section-description-dark-margin);
  font-weight: var(--section-description-dark-font-weight);
  font-family: var(--section-description-dark-font-family);
}

/* Card Components */
.card-title {
  font-size: var(--card-title-font-size);
  font-weight: var(--card-title-font-weight);
  line-height: var(--card-title-line-height);
  color: var(--card-title-color);
  font-family: var(--card-title-font-family);
  margin: 0;
  text-align: left;
}

.card-title--dark {
  font-size: var(--card-title-dark-font-size);
  font-weight: var(--card-title-dark-font-weight);
  line-height: var(--card-title-dark-line-height);
  color: var(--card-title-dark-color);
  font-family: var(--card-title-dark-font-family);
  margin: 0;
  text-align: left;
}

.card-description {
  font-size: var(--card-description-font-size);
  font-weight: var(--card-description-font-weight);
  line-height: var(--card-description-line-height);
  color: var(--card-description-color);
  margin: var(--card-description-margin);
  font-family: var(--card-description-font-family);
  text-align: left;
}

.card-description--dark {
  font-size: var(--card-description-dark-font-size);
  font-weight: var(--card-description-dark-font-weight);
  line-height: var(--card-description-dark-line-height);
  color: var(--card-description-dark-color);
  margin: var(--card-description-dark-margin);
  font-family: var(--card-description-dark-font-family);
  text-align: left;
}

/* Stats Text Component */
.stats-text {
  font-size: var(--stats-text-font-size);
  font-weight: var(--stats-text-font-weight);
  line-height: var(--stats-text-line-height);
  color: var(--stats-text-color);
  margin: var(--stats-text-margin);
  font-family: var(--stats-text-font-family);
  display: var(--stats-text-display);
  justify-content: var(--stats-text-justify-content);
}

/* Card Component */
.card {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-border-radius);
  padding: var(--card-padding);
  box-shadow: var(--card-box-shadow);
  transition: var(--card-transition);
  gap: var(--card-gap);
  display: var(--card-display);
  flex-direction: var(--card-flex-direction);
}

.card:hover {
  transform: var(--card-hover-transform);
  box-shadow: var(--card-hover-box-shadow);
  border-color: var(--card-hover-border-color);
}

/* Icon Wrapper Component */
.icon-wrapper {
  width: var(--icon-wrapper-size);
  height: var(--icon-wrapper-size);
  background: var(--icon-wrapper-bg);
  border-radius: var(--icon-wrapper-border-radius);
  display: var(--icon-wrapper-display);
  align-items: var(--icon-wrapper-align-items);
  justify-content: var(--icon-wrapper-justify-content);
  flex-shrink: var(--icon-wrapper-flex-shrink);
}

.icon-wrapper img {
  width: var(--icon-wrapper-icon-size);
  height: var(--icon-wrapper-icon-size);
  filter: brightness(0) saturate(100%) var(--icon-wrapper-icon-color);
}

/* Toggle Tabs Components (based on pricing-toggle) */
.toggle-tabs {
  display: var(--toggle-tabs-display);
  background: var(--toggle-tabs-background);
  border-radius: var(--toggle-tabs-border-radius);
  padding: var(--toggle-tabs-padding);
  gap: var(--toggle-tabs-gap);
  position: var(--toggle-tabs-position);
  margin: var(--toggle-tabs-margin);
  max-width: var(--toggle-tabs-max-width);
  backdrop-filter: var(--toggle-tabs-backdrop-filter);
  border: var(--toggle-tabs-border);
  box-shadow: var(--toggle-tabs-box-shadow);
}

.toggle-tab {
  flex: var(--toggle-tab-flex);
  padding: var(--toggle-tab-padding);
  font-size: var(--toggle-tab-font-size);
  font-weight: var(--toggle-tab-font-weight);
  line-height: var(--toggle-tab-line-height);
  font-family: var(--toggle-tab-font-family);
  border-radius: var(--toggle-tab-border-radius);
  border: var(--toggle-tab-border);
  cursor: var(--toggle-tab-cursor);
  transition: var(--toggle-tab-transition);
  background: var(--toggle-tab-background);
  color: var(--toggle-tab-color);
}

.toggle-tab:hover:not(.toggle-tab--active) {
  background: var(--toggle-tab-hover-background);
  color: var(--toggle-tab-hover-color);
}

.toggle-tab--active {
  background: var(--toggle-tab-active-background);
  color: var(--toggle-tab-active-color);
  box-shadow: var(--toggle-tab-active-box-shadow);
}

/* Toggle Tabs Components - Dark Theme */
.toggle-tabs--dark {
  display: var(--toggle-tabs-dark-display);
  background: var(--toggle-tabs-dark-background);
  border-radius: var(--toggle-tabs-dark-border-radius);
  padding: var(--toggle-tabs-dark-padding);
  gap: var(--toggle-tabs-dark-gap);
  position: var(--toggle-tabs-dark-position);
  margin: var(--toggle-tabs-dark-margin);
  max-width: var(--toggle-tabs-dark-max-width);
  backdrop-filter: var(--toggle-tabs-dark-backdrop-filter);
  border: var(--toggle-tabs-dark-border);
  box-shadow: var(--toggle-tabs-dark-box-shadow);
}

.toggle-tab--dark {
  flex: var(--toggle-tab-dark-flex);
  padding: var(--toggle-tab-dark-padding);
  font-size: var(--toggle-tab-dark-font-size);
  font-weight: var(--toggle-tab-dark-font-weight);
  line-height: var(--toggle-tab-dark-line-height);
  font-family: var(--toggle-tab-dark-font-family);
  border-radius: var(--toggle-tab-dark-border-radius);
  border: var(--toggle-tab-dark-border);
  cursor: var(--toggle-tab-dark-cursor);
  transition: var(--toggle-tab-dark-transition);
  background: var(--toggle-tab-dark-background);
  color: var(--toggle-tab-dark-color);
}

.toggle-tab--dark:hover:not(.toggle-tab--dark--active) {
  background: var(--toggle-tab-dark-hover-background);
  color: var(--toggle-tab-dark-hover-color);
}

.toggle-tab--dark--active {
  background: var(--toggle-tab-dark-active-background);
  color: var(--toggle-tab-dark-active-color);
  box-shadow: var(--toggle-tab-dark-active-box-shadow);
}

/* Alias for backward compatibility */
.pricing-tabs {
  display: var(--toggle-tabs-display);
  background: var(--toggle-tabs-background);
  border-radius: var(--toggle-tabs-border-radius);
  padding: var(--toggle-tabs-padding);
  gap: var(--toggle-tabs-gap);
  position: var(--toggle-tabs-position);
  margin: var(--toggle-tabs-margin);
  width: var(--toggle-tabs-width);
}

.pricing-tab {
  padding: var(--toggle-tab-padding);
  font-size: var(--toggle-tab-font-size);
  font-weight: var(--toggle-tab-font-weight);
  line-height: var(--toggle-tab-line-height);
  font-family: var(--toggle-tab-font-family);
  border-radius: var(--toggle-tab-border-radius);
  border: var(--toggle-tab-border);
  cursor: var(--toggle-tab-cursor);
  transition: var(--toggle-tab-transition);
  background: var(--toggle-tab-background);
  color: var(--toggle-tab-color);
  white-space: var(--toggle-tab-white-space);
}

.pricing-tab:hover {
  color: var(--toggle-tab-hover-color);
}

.pricing-tab--active {
  background: var(--toggle-tab-active-background);
  color: var(--toggle-tab-active-color);
}

.pricing-tab--active:hover {
  color: var(--toggle-tab-active-color);
}

/* ========================================
   FAQ COMPONENT - Reusable across pages
   ======================================== */
.faq {
  padding: var(--faq-padding);
}

.faq--light {
  background: #f8f9fa;
}

.faq--dark {
  background: #1f1f1f;
}

.faq__container {
  max-width: var(--faq-container-max);
  margin: 0 auto;
  padding: var(--faq-container-padding);
}

.faq__title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  margin: 0 0 clamp(32px, 6vw, 60px);
  text-align: center;
  color: var(--faq-question-color-light);
}

.faq--dark .faq__title {
  color: var(--faq-question-color-dark);
}

.faq__items {
  display: flex;
  flex-direction: column;
  gap: var(--faq-gap);
}

.faq__item {
  border-bottom: var(--faq-item-border-width) var(--faq-item-border-style) var(--faq-item-border-color-light);
  padding: var(--faq-item-padding);
  cursor: pointer;
  transition: all 0.3s ease;
}

.faq__item:last-child {
  border-bottom: none;
}

.faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  color: var(--faq-question-color-light);
  font-size: var(--faq-question-font-size);
  font-weight: var(--faq-question-font-weight);
  line-height: var(--faq-question-line-height);
}

.faq__chevron {
  color: var(--faq-chevron-color-light);
  transition: transform 0.3s ease, color 0.3s ease;
  flex-shrink: 0;
}

.faq__item:hover .faq__question {
  color: var(--color-brand-1);
}

.faq__item:hover .faq__chevron {
  color: var(--color-brand-1);
  transform: translateY(2px);
}

.faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: var(--faq-answer-transition);
  padding: 0;
}

.faq__answer p {
  margin: 0;
  color: var(--faq-answer-color-light);
  font-size: var(--faq-answer-font-size);
  line-height: var(--faq-answer-line-height);
}

.faq__item.active .faq__answer {
  max-height: var(--faq-answer-max-height);
  padding: 24px 0 0 0;
}

.faq__item.active .faq__chevron {
  transform: rotate(180deg);
  color: var(--color-brand-1);
}

/* Dark variant */
.faq--dark .faq__item {
  border-bottom-color: var(--faq-item-border-color-dark);
}

.faq--dark .faq__question {
  color: var(--faq-question-color-dark);
}

.faq--dark .faq__chevron {
  color: var(--faq-chevron-color-dark);
}

.faq--dark .faq__answer p {
  color: var(--faq-answer-color-dark);
}

/* Light variant */
.faq--light .faq__item {
  border-bottom-color: var(--faq-item-border-color-light);
}

.faq--light .faq__question {
  color: var(--faq-question-color-light);
}

.faq--light .faq__chevron {
  color: var(--faq-chevron-color-light);
}

.faq--light .faq__answer p {
  color: var(--faq-answer-color-light);
}

/* Aliases for existing Home FAQ (non-breaking) */
.questions-accordion {
  width: 100%;
  max-width: var(--faq-container-max);
  margin: 0 auto;
}

.question-item {
  border-bottom: var(--faq-item-border-width) var(--faq-item-border-style) var(--faq-item-border-color-dark);
}

.question-item:last-child {
  border-bottom: none;
}

.question-button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--faq-item-padding);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--faq-question-color-dark);
  font-size: var(--faq-question-font-size);
  font-weight: var(--faq-question-font-weight);
  text-align: left;
  transition: all 0.3s ease;
}

.question-button:hover {
  color: var(--color-brand-1);
}

.question-text {
  flex: 1;
  margin-right: 24px;
  line-height: var(--faq-answer-line-height);
}

.question-chevron {
  color: var(--faq-chevron-color-dark);
  transition: transform 0.3s ease, color 0.3s ease;
  flex-shrink: 0;
}

.question-answer {
  max-height: 0;
  overflow: hidden;
  transition: var(--faq-answer-transition);
  padding: 0;
}

.question-answer p {
  margin: 0;
  color: var(--faq-answer-color-dark);
  line-height: var(--faq-answer-line-height);
  font-size: var(--faq-answer-font-size);
}

.question-item.active .question-answer {
  max-height: var(--faq-answer-max-height);
  padding: 24px 0 0 0;
}

.question-item.active .question-chevron {
  transform: rotate(180deg);
  color: var(--color-brand-1);
}

/* Mobile styles for tabs */
@media (max-width: 768px) {
  .toggle-tabs,
  .toggle-tabs--dark,
  .pricing-tabs {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 12px;
    padding: 6px;
    margin: 0 auto 24px;
    width: calc(100% - 32px);
    max-width: 100%;
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border-radius: 999px;
    min-height: 56px;
    align-items: center;
    scroll-snap-type: x proximity;
  }
  
  .toggle-tabs::-webkit-scrollbar,
  .toggle-tabs--dark::-webkit-scrollbar,
  .pricing-tabs::-webkit-scrollbar {
    display: none;
  }
  
  .toggle-tab,
  .toggle-tab--dark,
  .pricing-toggle__btn {
    flex: 0 0 auto;
    min-width: 140px;
    white-space: nowrap;
    padding: 12px 24px;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    scroll-snap-align: start;
  }
  
  .toggle-tab--active,
  .toggle-tab--dark--active,
  .pricing-toggle__btn.active {
    background: #fff;
    color: #1f1f1f;
    border-color: #fff;
  }
}