/* ======================
   COMPARISON SECTION - RESPONSIVE IMPLEMENTATION
   Following Final Breakpoint Ranges:
   Mobile: 320px – 480px | Tablet: 481px – 1024px
   Laptop: 1025px – 1366px | Desktop: 1367px – 1920px | Large Desktop: 1921px – 2560px+
   ====================== */

.comparison-section .comparison {width: 100%;position: relative;display: flex;flex-direction: column;align-items: center;justify-content: center;box-sizing: border-box;text-align: left;color: #333f5b;font-family: 'Avenir Next', sans-serif;padding: 0 clamp(16px, 5vw, 24px);gap: clamp(24px, 7vw, 32px);font-size: 14px;}

/* Tablet: 481px – 1024px */
@media (min-width: 481px) and (max-width: 1024px) {
  .comparison-section .comparison {
    padding: 0 clamp(24px, 5vw, 48px);
    gap: clamp(32px, 6vw, 56px);
    font-size: clamp(15px, 3vw, 18px);
  }
}

/* Laptop: 1025px – 1366px */
@media (min-width: 1025px) and (max-width: 1366px) {
  .comparison-section .comparison {
    padding: 0 clamp(40px, 4vw, 64px);
    gap: clamp(56px, 5vw, 72px);
    font-size: 18px;
  }
}

/* Desktop: 1367px – 1920px */
@media (min-width: 1367px) and (max-width: 1920px) {
  .comparison-section .comparison {
    padding: 0 clamp(64px, 4vw, 80px);
    gap: clamp(72px, 4vw, 80px);
    font-size: 19px;
  }
}

/* Large Desktop: 1921px – 2560px+ */
@media (min-width: 1921px) {
  .comparison-section .comparison {
    padding: 0 clamp(80px, 3vw, 120px);
    gap: 80px;
    font-size: 20px;
  }
}

/* Header Section - Responsive according to Final Breakpoint Ranges */
.comparison-section .header {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  width: 100%;
  
  /* Mobile: 320px – 480px */
  max-width: 100%;
  gap: clamp(24px, 6vw, 32px);
  padding: 0 clamp(16px, 4vw, 24px);
  font-size: 14px;
}

/* Tablet: 481px – 1024px */
@media (min-width: 481px) and (max-width: 1024px) {
  .comparison-section .header {
    max-width: 720px;
    gap: clamp(32px, 5vw, 48px);
    padding: 0 clamp(24px, 4vw, 40px);
    font-size: 15px;
  }
}

/* Laptop: 1025px – 1366px */
@media (min-width: 1025px) and (max-width: 1366px) {
  .comparison-section .header {
    max-width: 800px;
    gap: clamp(48px, 4vw, 56px);
    padding: 0 clamp(32px, 3vw, 48px);
    font-size: 16px;
  }
}

/* Desktop: 1367px – 1920px */
@media (min-width: 1367px) and (max-width: 1920px) {
  .comparison-section .header {
    max-width: 900px;
    gap: clamp(56px, 3.5vw, 64px);
    padding: 0 clamp(40px, 2.5vw, 56px);
    font-size: 16px;
  }
}

/* Large Desktop: 1921px – 2560px+ */
@media (min-width: 1921px) {
  .comparison-section .header {
    max-width: 920px;
    gap: 64px;
    padding: 0 48px;
    font-size: 17px;
  }
}

/* Eyebrow Badge */
.comparison-section .eyebrow{border-radius: 50px;border: 1px solid #fff;display: flex;align-items: center;justify-content: center;position: relative;gap: 24px;}
.comparison-section .eyebrowBlur{width: 100%;position: absolute;height: 100%;top: 0%;right: 0%;bottom: 0%;left: 0%;filter: blur(10px);border-radius: 50px;background: linear-gradient(95.49deg, rgba(52, 148, 253, 0.3), rgba(243, 127, 84, 0.3));z-index: 0;}
.comparison-section .subheadingWrapper{border-radius: 50px;background-color: #fcf9f8;border: 2px solid #fff;display: flex;align-items: center;justify-content: center;z-index: 1;padding: 16px 24px;}

@media (max-width: 767px) {
  .comparison-section .subheadingWrapper {
    padding: 14px 20px;
  }
}

.comparison-section .subheading{position: relative;line-height: 150%;font-size: 16px;}

@media (max-width: 767px) {
  .comparison-section .subheading{font-size: 13px;}
}

/* Main Heading - Responsive Typography */
.comparison-section .heading{position: relative;letter-spacing: -0.04em;font-weight: 500;font-family: 'P22 Mackinac Pro', serif;text-align: center;display: flex;align-items: center;justify-content: center;margin: 0;width: 100%;font-size: clamp(22px, 7vw, 28px);line-height: 120%;letter-spacing: -0.03em;max-width: 100%;}

/* Tablet: 481px – 1024px */
@media (min-width: 481px) and (max-width: 1024px) {
  .comparison-section .heading {
    font-size: clamp(32px, 6vw, 48px);
    line-height: 115%;
    letter-spacing: -0.035em;
  }
}

/* Laptop: 1025px – 1366px */
@media (min-width: 1025px) and (max-width: 1366px) {
  .comparison-section .heading {
    font-size: clamp(48px, 4.5vw, 62px);
    line-height: 110%;
    letter-spacing: -0.04em;
  }
}

/* Desktop: 1367px – 1920px */
@media (min-width: 1367px) and (max-width: 1920px) {
  .comparison-section .heading {
    font-size: clamp(62px, 4vw, 76px);
    line-height: 110%;
    letter-spacing: -0.04em;
  }
}

/* Large Desktop: 1921px – 2560px+ */
@media (min-width: 1921px) {
  .comparison-section .heading {
    font-size: clamp(76px, 3.5vw, 88px);
    line-height: 105%;
    letter-spacing: -0.045em;
    max-width: 860px;
  }
}

/* Mobile Tab Container - Show on Mobile + Tablet */
.comparison-section .mobileTabContainer {
  display: flex; /* Show by default */
  width: clamp(280px, 90vw, 345px);
  max-width: 100%;
  border-radius: 20px;
  background-color: #f2f2f3;
  border: 1px solid #e3e3e5;
  box-sizing: border-box;
  align-items: flex-start;
  padding: 6px;
  font-size: 14px;
}

/* Hide on laptop and above (when desktop layout is active) */
@media (min-width: 1025px) {
  .comparison-section .mobileTabContainer {
    display: none;
  }
}

/* Mobile: 320px – 480px */
@media (max-width: 480px) {
  .comparison-section .mobileTabContainer {
    width: clamp(280px, 90vw, 345px);
    padding: 6px;
    font-size: 14px;
    border-radius: 20px;
  }
}

/* Tablet: 481px – 1024px */
@media (min-width: 481px) and (max-width: 1024px) {
  .comparison-section .mobileTabContainer {
    width: clamp(320px, 70vw, 450px);
    padding: 8px;
    font-size: 15px;
    border-radius: 22px;
  }
}

/* Mobile Tab Styles - Show on Mobile + Tablet */
.comparison-section .mobileTab {
  display: flex; /* Show by default */
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 14px;
  
  /* Default mobile styles */
  height: clamp(44px, 12vw, 48px);
  padding: clamp(16px, 5vw, 20px);
}

/* Hide on laptop and above */
@media (min-width: 1025px) {
  .comparison-section .mobileTab {
    display: none;
  }
}

/* Mobile: 320px – 480px */
@media (max-width: 480px) {
  .comparison-section .mobileTab {
    height: clamp(44px, 12vw, 48px);
    padding: clamp(16px, 5vw, 20px);
    border-radius: 14px;
  }
}

/* Tablet: 481px – 1024px */
@media (min-width: 481px) and (max-width: 1024px) {
  .comparison-section .mobileTab {
    height: 50px;
    padding: 22px;
    border-radius: 16px;
  }
}

/* Mobile Tab States - Responsive */
.comparison-section .activeMobileTab{border-radius: 16px;background-color: #333f5b;color: #fff;width: 50%;}
.comparison-section .inactiveMobileTab{flex: 1;border-radius: 20px;background-color: transparent;color: #333f5b;}
.comparison-section .mobileTabText{position: relative;letter-spacing: -0.02em;line-height: 150%;font-weight: 500;}

/* Mobile Tab Text - Responsive across Mobile + Tablet */
.comparison-section .mobileTabText{position: relative;letter-spacing: -0.02em;line-height: 150%;font-weight: 500;font-size: 14px;}

/* Mobile: 320px – 480px */
@media (max-width: 480px) {
  .comparison-section .mobileTabText {font-size: 14px;}
}

/* Tablet: 481px – 1024px */
@media (min-width: 481px) and (max-width: 1024px) {
  .comparison-section .mobileTabText {font-size: 15px;}
}

/* Desktop Comparison Group - Only show on laptop and above */
.comparison-section .comparisonGroup {display: none;}

/* Laptop: 1025px – 1366px and above - Show desktop layout */
@media (min-width: 1025px) {
  .comparison-section .comparisonGroup{display: flex;align-items: flex-start;justify-content: center;z-index: 2;width: 100%;max-width: 996px;gap: 32px;font-size: 20px;}
}

/* Laptop: 1025px – 1366px */
@media (min-width: 1025px) and (max-width: 1366px) {
  .comparison-section .comparisonGroup{max-width: 900px;gap: clamp(24px, 3vw, 32px);font-size: clamp(18px, 2vw, 20px);}
}

/* Desktop: 1367px – 1920px */
@media (min-width: 1367px) and (max-width: 1920px) {
  .comparison-section .comparisonGroup{max-width: 996px;gap: 32px;font-size: 20px;}
}

/* Large Desktop: 1921px+ */
@media (min-width: 1921px) {
  .comparison-section .comparisonGroup{max-width: 1100px;gap: 36px;font-size: 21px;}
}

/* Column Styles */
.comparison-section .othersColumn, .comparison-section .usColumn{flex: 1;border-radius: 16px;display: flex;flex-direction: column;align-items: flex-start;justify-content: center;gap: 32px;}
.comparison-section .othersColumn{padding: 40px 0px 0px;}

@media (min-width: 768px) and (max-width: 1023px) {
  .comparison-section .othersColumn, .comparison-section .usColumn{gap: clamp(20px, 4vw, 32px);}
  .comparison-section .othersColumn{padding: clamp(20px, 4vw, 40px) 0px 0px;}
}

/* Comparison Items */
.comparison-section .comparisonItem{align-self: stretch;border-radius: 50px;display: flex;align-items: center;justify-content: center;position: relative;gap: 24px;}
.comparison-section .comparisonItemPositive{align-self: stretch;border-radius: 50px;border: 1px solid #fff;display: flex;align-items: center;justify-content: center;position: relative;gap: 24px;}
.comparison-section .itemBlur{width: 100%;position: absolute;height: 100%;top: 0%;right: 0%;bottom: 0%;left: 0%;filter: blur(10px);border-radius: 50px;z-index: 0;}
.comparison-section .itemBlurPositive{width: 100%;position: absolute;height: 100%;top: 0%;right: 0%;bottom: 0%;left: 0%;filter: blur(10px);border-radius: 50px;background: linear-gradient(95.49deg, rgba(52, 148, 253, 0.3), rgba(243, 127, 84, 0.3));z-index: 0;}
.comparison-section .itemContent{flex: 1;border-radius: 50px;background-color: #f2f2f3;border: 2px solid #fff;display: flex;align-items: center;padding: 16px 32px 16px 16px;gap: 16px;z-index: 1;}
.comparison-section .itemContentPositive{flex: 1;border-radius: 50px;background-color: #fcf9f8;border: 2px solid #fff;display: flex;align-items: center;padding: 16px 32px 16px 16px;gap: 16px;z-index: 1;}
.comparison-section .itemIcon{width: 48px;height: 48px;border-radius: 500px;max-height: 100%;}

@media (min-width: 768px) and (max-width: 1023px) {
  .comparison-section .itemIcon{width: 40px;height: 40px;}
  .comparison-section .itemContent,
  .comparison-section .itemContentPositive{padding: 12px 24px 12px 12px;gap: 12px;}
}

.comparison-section .itemText{position: relative;letter-spacing: -0.03em;line-height: 150%;font-size: 20px;font-weight: 600;}

@media (min-width: 768px) and (max-width: 1023px) {
  .comparison-section .itemText {font-size: clamp(16px, 2.5vw, 20px);}
}

/* Mobile Comparison Content - Show on Mobile + Tablet */
.comparison-section .mobileComparisonContent {display: block;width: 100%;}
.comparison-section .mobileContentGroup {flex-direction: column;gap: 16px;width: 100%;}

/* Hide on laptop and above (when desktop layout is active) */
@media (min-width: 1025px) {
  .comparison-section .mobileComparisonContent {display: none;}
}

/* Tablet: 481px – 1024px - Enhanced mobile view */
@media (min-width: 481px) and (max-width: 1024px) {
  .comparison-section .mobileContentGroup {
    gap: clamp(16px, 3vw, 20px);
    /* Removed max-width constraint for full-width items */
    width: 100%;
  }
}

/* Mobile Comparison Items */
.comparison-section .mobileComparisonItem, .comparison-section .mobileComparisonItemNegative{border-radius: 50px;border: 1px solid #fff;box-sizing: border-box;display: flex;align-items: center;justify-content: center;position: relative;gap: 24px;width: 100%;max-width: 345px;}
.comparison-section .mobileComparisonItemNegative{border: none;}
.comparison-section .mobileItemBlur{width: 100%;position: absolute;height: 100%;top: 0%;right: 0%;bottom: 0%;left: 0%;filter: blur(10px);border-radius: 50px;z-index: 0;}
.comparison-section .mobileItemBlurPositive{width: 100%;position: absolute;height: 100%;top: 0%;right: 0%;bottom: 0%;left: 0%;filter: blur(10px);border-radius: 50px;background: linear-gradient(95.49deg, rgba(52, 148, 253, 0.3), rgba(243, 127, 84, 0.3));z-index: 0;}
.comparison-section .mobileItemContent{flex: 1;border-radius: 50px;background-color: #f2f2f3;border: 2px solid #fff;display: flex;align-items: center;padding: 12px 24px 12px 12px;gap: 16px;z-index: 1;}
.comparison-section .mobileItemContentPositive{flex: 1;border-radius: 50px;background-color: #fcf9f8;border: 2px solid #fff;display: flex;align-items: center;padding: 12px 24px 12px 12px;gap: 16px;z-index: 1;}
.comparison-section .mobileItemIcon{width: 40px;height: 40px;border-radius: 416.67px;max-height: 100%;}
.comparison-section .mobileItemText{position: relative;letter-spacing: -0.02em;line-height: 145%;font-size: 17px;}

/* Desktop Labels - Only show with desktop layout */
.comparison-section .othersLabel {display: none;}

/* Show on laptop and above (when desktop layout is active) */
@media (min-width: 1025px) {
  .comparison-section .othersLabel {display: flex;align-items: flex-start;flex-direction: row-reverse;gap: 10px;position: absolute;z-index: 3;text-align: center;color: #6d717b;font-family: 'P22 Mackinac Pro', serif;top: 35%;left: 5%;transform: translateY(-50%);}
  .able-comparison-section .othersLabel {top: 18%;}
}

/* Laptop: 1025px – 1366px */
@media (min-width: 1025px) and (max-width: 1366px) {
  .comparison-section .othersLabel {width: clamp(250px, 20vw, 310px);height: auto;top: 24%;left: 3%;}
  .able-comparison-section .othersLabel {top: 11%;}
}

/* Desktop and above: 1367px+ */
@media (min-width: 1367px) {
  .comparison-section .othersLabel {top: 26%;left: 5%;}
  .able-comparison-section .othersLabel{top: 18%;}
}

.comparison-section .othersIconContainer{display: flex;align-items: center;justify-content: center;max-width: 178px;}
.comparison-section .othersIcon {max-width: 100%;width: 100%;display: block;height: auto; position: relative;top: 28px;right: 0;}
@media (min-width: 768px) and (max-width: 1023px) {
  .comparison-section .othersIcon {position: relative;left: 0;top: 0;width: clamp(120px, 20vw, 193px);height: auto;}
}

.comparison-section .othersText{letter-spacing: -0.03em;line-height: 130%;font-weight: 500;font-size: 38px;text-align: left;}
@media (min-width: 768px) and (max-width: 1023px) {
  .comparison-section .othersText{font-size: clamp(24px, 4vw, 38px);text-align: center;}
}
/* Us Label - Only show with desktop layout */
.comparison-section .usLabel {display: none;}
/* Show on laptop and above (when desktop layout is active) */
@media (min-width: 1025px) {
  .comparison-section .usLabel{display: flex;align-items: flex-start;gap: 10px;position: absolute;z-index: 4;text-align: center;color: #f37f54;font-family: 'P22 Mackinac Pro', serif;top: 35%;right: 5%;transform: translateY(-50%);}
  .able-comparison-section .usLabel{top: 17%}
}

/* Laptop: 1025px – 1366px */
.comparison-section .usIcon{object-fit: contain;display: block;height: auto;max-width: 130px;position: relative;top: 20px;left: 0;}

@media (min-width: 1025px) and (max-width: 1366px) {
  .comparison-section .usLabel {width: clamp(150px, 15vw, 201px);height: auto;top: 24%;right: 3%;}
  .able-comparison-section .usLabel {top: 11%;right: 5%;}
  .comparison-section .usIcon{width: clamp(80px, 15vw, 132px);}
}

/* Desktop and above: 1367px+ */
@media (min-width: 1367px) {
  .comparison-section .usLabel{top: 25%;right: 8%;}
  .able-comparison-section .usLabel{top: 17%;}
}


.comparison-section .usText{letter-spacing: -0.03em;line-height: 130%;font-weight: 500;font-size: 38px;text-align: right;}
@media (min-width: 768px) and (max-width: 1023px) {
  .comparison-section .usText{font-size: clamp(24px, 4vw, 38px);text-align: center;margin-top: 8px;}
}
@media(max-width: 1600px){
  .comparison-section .othersText,.comparison-section .usText{font-size: 30px;}
  .comparison-section .othersIconContainer{max-width: 140px;}
}
.comparison-section .mobileContentUs, .comparison-section .mobileContentOthers{display: none;}
.comparison-section .mobileContentUs.is-active, .comparison-section .mobileContentOthers.is-active{display: flex;}

/* CTA block (Able comparison) */
.comparison-section .cta{position: relative;overflow: hidden;display: flex;align-items: center;justify-content: center;box-sizing: border-box;text-align: center;font-family: 'P22 Mackinac Pro', serif;color: #333f5b;background-color: #ebf4ff;width: 100%;padding: clamp(32px, 5vw + 8px, 80px);gap: clamp(14.2px, 3vw + 10px, 60px);font-size: clamp(30px, 4vw + 6px, 64px);border-radius: clamp(12px, 1vw + 8px, 24px);}
.comparison-section .ctaChild{position: absolute;inset: 0;width: 100%;height: 100%;margin: 0 !important;background-color: #ebf4ff;z-index: 0;flex-shrink: 0;}
.comparison-section .ctaItem{position: absolute;margin: 0 !important;border-radius: 50%;background-color: #f8d194;filter: blur(60px);z-index: 1;flex-shrink: 0;width: 90%;height: 50px;bottom: 0;left: 50%;transform: translateX(-50%);}
.comparison-section .comparisonWrapper{display: flex;flex-direction: column;align-items: center;justify-content: center;z-index: 2;flex-shrink: 0;width: clamp(281px, 50vw + 100px, 874px);gap: clamp(32px, 3vw + 8px, 64px);}
.comparison-section .headingWrapper{display: flex;flex-direction: column;align-items: flex-start;justify-content: center;}
.comparison-section .heading3{position: relative;display: flex;align-items: center;justify-content: center;font-weight: 500;letter-spacing: -0.03em;width: clamp(243px, 40vw + 60px, 566.3px);line-height: clamp(120%, -0.5vw + 115%, 110%);}
.comparison-section .btnDisabled{cursor: not-allowed;pointer-events: none;}
@media (min-width: 1025px) {
  .comparison-section .cta {width: 100%;max-width: 996px;}
}
@media (min-width: 1025px) and (max-width: 1366px) {
  .comparison-section .cta {max-width: 900px;}
}
@media (min-width: 1367px) and (max-width: 1920px) {
  .comparison-section .cta {max-width: 996px;}
}
@media (min-width: 1921px) {
  .comparison-section .cta {max-width: 1100px;}
}

.comparison-section .actions{display: flex;align-items: center;justify-content: center;width: 100%;gap: 20px;flex-direction: row;}

@media (max-width: 1024px) {
  .comparison-section .ctaItem{filter: blur(40px);width: 225px;height: 110px;}
  .comparison-section .actions{flex-direction: column;gap: 16px;max-width: 320px;width: 100%;}
}

@media (max-width: 480px) {
  .comparison-section .actions{gap: 12px;max-width: 280px;}
}

@media (min-width: 481px) and (max-width: 1024px) {
  .comparison-section .actions{gap: 18px;max-width: 360px;}
}

.comparison-section .storeButtonsWrapper{display: flex;align-items: center;justify-content: center;flex-direction: row;gap: 20px;}

@media (max-width: 1024px) {
  .comparison-section .storeButtonsWrapper {gap: 12px;width: auto;}
}

@media (max-width: 480px) {
  .comparison-section .storeButtonsWrapper {gap: 8px;}
}

.comparison-section .storeBtn{border-radius: 24px;border: 1px solid #333f5b;background: transparent;display: flex;cursor: pointer;align-items: center;justify-content: center;transition: all 0.2s ease;padding: 0;width: 64px;height: 64px;}

@media (max-width: 1024px) {
  .comparison-section .storeBtn {width: 56px;height: 56px;border-radius: 20px;}
}
@media(max-width: 640px) {
  .comparison-section .activeMobileTab { width: auto; }
}

@media (max-width: 480px) {
  .comparison-section .storeBtn {width: 48px;height: 48px;border-radius: 16px;}
}

.comparison-section .storeBtn:hover{background: #333f5b;}
.comparison-section .storeBtn:hover .storeIcon{filter: brightness(0) invert(1);}
.comparison-section .storeIcon{width: 24px;height: 24px;}

@media (max-width: 480px) {
  .comparison-section .storeIcon {width: 20px;height: 20px;}
}