.comparison {
  padding: 96px 24px;
  background-color: #f8f9fa; /* Matches other light sections like FAQ to make white tables stand out */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.comparison__inner {
  width: 100%;
  max-width: 1244px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.comparison__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 70px;
  width: 100%;
}

.comparison__header .faq-title {
  font-family: 'Google Sans Flex', 'Geist', sans-serif;
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 500;
  line-height: 1.389;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  color: #3a3a3a;
  margin: 0 0 24px;
}

.comparison__header .section-copy {
  color: #3a3a3a;
  font-family: 'Google Sans Flex', 'Geist', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.389;
  letter-spacing: 0.36px;
  margin: 0;
  max-width: 938px;
}

/* Scrollable container for mobile responsiveness */
.comparison-table-wrapper {
  width: 100%;
  margin-bottom: 79px;
  padding: 24px 4px; /* extra space for the translated highlighted card overlap */
}

@media (max-width: 1290px) {
  .comparison-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Grid Layout matching Figma spec: 467px, 206px, 248px, 248px columns */
.comparison-table-grid {
  display: grid;
  grid-template-columns: 467px 206px 248px 248px;
  gap: 25px;
  min-width: 1194px;
  margin: 0 auto;
  align-items: stretch;
}

.comparison-col {
  display: flex;
  flex-direction: column;
  padding-top: 20px; /* base padding to align horizontally with highlighted card padding */
}

/* Highlighted Column: Solid border, background tint, translate overlay */
.comparison-col--highlight {
  border: 3px solid #cbbca7;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.25);
  padding: 20px 12px;
  transform: translateY(-20px); /* overlaps header and bottom cells gracefully */
  margin-bottom: -20px; /* keeps layout spacing balanced */
  box-shadow: 0 10px 30px rgba(17, 24, 52, 0.04);
}

/* Header Cells */
.comparison-header-cell {
  height: 40px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  font-family: 'Google Sans Flex', 'Geist', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #3a3a3a;
  letter-spacing: 0.36px;
}

.comparison-col--labels .comparison-header-cell {
  padding-left: 15px;
}

.comparison-col:not(.comparison-col--labels) .comparison-header-cell {
  justify-content: center;
  text-align: center;
}

/* Gold Gradient text for SCM header */
.comparison-header-cell--gradient {
  background: linear-gradient(183deg, #ecdec3 40.59%, #9b876b 150.38%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}

/* Row cells */
.comparison-row-cell {
  height: 45px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  font-family: 'Google Sans Flex', 'Geist', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #3a3a3a;
  letter-spacing: 0.36px;
  border-radius: 10px;
  transition: background-color 0.2s ease;
}

.comparison-row-cell:last-child {
  margin-bottom: 0;
}

.comparison-col--labels .comparison-row-cell {
  justify-content: flex-start;
  padding-left: 15px;
  text-align: left;
}

.comparison-col:not(.comparison-col--labels) .comparison-row-cell {
  justify-content: center;
  text-align: center;
}

/* Alternate row styling */
.comparison-row-cell--alternate {
  background-color: rgba(255, 255, 255, 0.42);
}

/* pure white alternating backgrounds in highlight column to pop out */
.comparison-col--highlight .comparison-row-cell--alternate {
  background-color: #ffffff;
}

/* Bottom CTA block styling */
.comparison__action {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Responsive adjustments for mobile/tablet */
@media (max-width: 768px) {
  .comparison {
    padding: 64px 16px;
  }
  .comparison__header {
    margin-bottom: 40px;
  }
  .comparison__header .faq-title {
    font-size: 26px;
  }
  .comparison__header .section-copy {
    font-size: 16px;
  }
  .comparison-table-wrapper {
    margin-bottom: 48px;
  }
}