/* section5.css */
.section5 {
  position: relative;
  background: var(--color-white);
  border-radius: clamp(80px, 11.2vw, 215px) clamp(80px, 11.2vw, 215px) 0 clamp(80px, 11.2vw, 215px);
  margin-top: clamp(-60px, -3vw, -20px);
  padding-top: clamp(48px, 5vw, 96px);
  padding-bottom: clamp(48px, 5vw, 96px);
}

.section5__title {
  font-weight: 700;
  font-size: clamp(26px, 3.18vw, 61px);
  line-height: 1.16;
  margin-bottom: clamp(20px, 2vw, 40px);
}

.section5__intro {
  font-weight: 500;
  font-size: clamp(15px, 1.15vw, 22px);
  line-height: 1.45;
  margin-bottom: clamp(32px, 3.5vw, 64px);
}

.section5__compare {
  display: flex;
  align-items: stretch;
  /* bleed cards to viewport edges like the design */
  margin: 0 calc(-1 * clamp(20px, 4.17vw, 80px)) clamp(32px, 3.5vw, 56px);
  gap: 40px;
}

.section5__card {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.14vw, 41px);
  padding: clamp(32px, 3.5vw, 56px) clamp(24px, 4.79vw, 92px);
  background: var(--color-white);
}

.section5__card--trad {
  color: #8a8c8e;
  border: 4px solid #8a8c8e;
  border-left: none;
  border-radius: 0 65px 65px 0;
  padding-left: clamp(24px, 10.83vw, 208px);
  box-shadow: 2px 8px 5px rgba(11, 23, 37, 0.05);
}

.section5__card--modern {
  color: var(--color-ink);
  border: 4px solid var(--color-green-light);
  border-right: none;
  border-radius: 65px 0 0 65px;
  padding-right: clamp(24px, 10.83vw, 208px);
  box-shadow: 2px 8px 5px rgba(11, 23, 37, 0.15);
}

.section5__card-title {
  font-weight: 700;
  font-size: clamp(16px, 1.15vw, 22px);
  line-height: 1.45;
  color: inherit;
}

.section5__card-text {
  font-weight: 500;
  font-size: clamp(15px, 1.15vw, 22px);
  line-height: 1.45;
}

.section5__note {
  font-weight: 500;
  font-size: clamp(15px, 1.15vw, 22px);
  line-height: 1.55;
  margin-bottom: clamp(24px, 3vw, 48px);
}

.section5__chart {
  width: 100%;
}

.section5__chart img {
  width: 100%;
  height: auto;
}

/* Tablet + mobile: stack the two cards */
@media (max-width: 1024px) {
  .section5__compare {
    flex-direction: column;
    gap: clamp(20px, 3vw, 28px);
    margin-right: calc(-1 * clamp(20px, 4.17vw, 80px));
    margin-left: 0;
  }

  .section5__chart img {
    transform: scale(1.3);
  }

  .section5__card {
    flex: none;
    width: 100%;
    padding: clamp(24px, 3.5vw, 40px);
  }

  .section5__card--trad {
    border: 4px solid #8a8c8e;
    border-right: none;
    border-radius: 40px 0 0 40px;
    padding-left: clamp(32px, 6vw, 64px);
  }

  .section5__card--modern {
    border: 4px solid var(--color-green-light);
    border-right: none;
    border-radius: 40px 0 0 40px;
    padding-right: clamp(24px, 3.5vw, 40px);
    padding-left: clamp(32px, 6vw, 64px);
  }
}

@media (max-width: 640px) {
  .section5 {
    border-radius: 60px 60px 0 60px;
  }

  .section5__card--trad,
  .section5__card--modern {
    border-radius: 28px 0 0 28px;
    padding-left: 28px;
  }

  /* Bleed the bars chart to viewport edges so it reads larger on mobile */
  .section5__chart {
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
  }
}