.commitment {
  padding: 104px 0 108px;
  color: #fff;
  background: #061a34;
  scroll-margin-top: 76px;
}

.commitment-shell {
  width: min(1180px, calc(100% - 64px));
  margin: 0 auto;
}

.commitment-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
  align-items: end;
  gap: 72px;
  margin-bottom: 48px;
}

.commitment-heading .overline {
  margin-bottom: 18px;
}

.commitment-heading h2 {
  max-width: 700px;
  color: #fff;
  font-size: clamp(44px, 4.2vw, 58px);
  line-height: .99;
}

.commitment-heading > p {
  max-width: 465px;
  margin: 0 0 5px;
  color: rgba(255, 255, 255, .76);
  font-size: 16px;
  line-height: 1.68;
}

.commitment-layout {
  display: grid;
  grid-template-columns: minmax(330px, .83fr) minmax(0, 1.57fr);
  align-items: stretch;
  gap: 20px;
}

.subscription-card {
  display: flex;
  min-width: 0;
  padding: 40px 36px 36px;
  flex-direction: column;
  border: 1px solid rgba(107, 212, 255, .34);
  border-radius: 17px;
  background: linear-gradient(150deg, #0b6ca7, #0a4e7e 72%, #093e68);
  box-shadow: 0 24px 55px rgba(0, 8, 22, .28);
}

.subscription-label,
.commitment-number {
  margin: 0;
  color: #75d6ff;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .085em;
  line-height: 1.35;
  text-transform: uppercase;
}

.subscription-label {
  color: #d9f5ff;
}

.subscription-price {
  margin: 28px 0 0;
  font-family: 'Manrope', Arial, sans-serif;
  letter-spacing: -.05em;
}

.subscription-price span {
  display: block;
  color: #fff;
  font-size: clamp(66px, 5.8vw, 84px);
  font-weight: 800;
  line-height: .9;
  white-space: nowrap;
}

.subscription-price small {
  display: block;
  margin-top: 10px;
  color: rgba(255, 255, 255, .84);
  font-family: 'Manrope', Arial, sans-serif;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0;
}

.subscription-range {
  margin: 28px 0 0;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, .22);
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}

.subscription-card ul {
  display: grid;
  margin: 27px 0 0;
  padding: 0;
  gap: 15px;
  list-style: none;
}

.subscription-card li {
  position: relative;
  padding-left: 25px;
  color: rgba(255, 255, 255, .86);
  font-size: 13px;
  line-height: 1.5;
}

.subscription-card li::before {
  position: absolute;
  top: .23em;
  left: 0;
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border-radius: 50%;
  color: #06213e;
  background: #75d6ff;
  font-size: 10px;
  font-weight: 900;
  content: '✓';
}

.commitment-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.commitment-card {
  min-width: 0;
  min-height: 238px;
  padding: 28px 27px 26px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 15px;
  background: #0a2442;
}

.commitment-card:nth-child(2),
.commitment-card:nth-child(3) {
  background: #0b2949;
}

.commitment-card h3 {
  margin: 22px 0 12px;
  color: #fff;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 25px;
  line-height: 1.08;
  letter-spacing: -.03em;
}

.commitment-card > p:not(.commitment-number):not(.commitment-condition):not(.commitment-usage-example):not(.commitment-usage-note),
.commitment-card-france > div > p:not(.commitment-number) {
  margin: 0;
  color: rgba(255, 255, 255, .73);
  font-size: 13px;
  line-height: 1.62;
}

.commitment-condition {
  margin: 18px 0 0;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .78);
  font-size: 12px;
  line-height: 1.52;
}

.commitment-usage-example {
  margin: 16px 0 0;
  padding: 13px 14px;
  border-left: 2px solid #75d6ff;
  border-radius: 0 8px 8px 0;
  color: rgba(255, 255, 255, .94);
  background: rgba(117, 214, 255, .09);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.58;
}

.commitment-usage-note {
  margin: 14px 0 0;
  color: #d9f5ff;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.55;
}

.commitment-card-france {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px;
  align-items: end;
  gap: 18px;
}

.commitment-card-france img {
  display: block;
  width: 82px;
  height: auto;
  filter: drop-shadow(0 8px 15px rgba(0, 5, 15, .26));
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .subscription-card,
  .commitment-card {
    transition: transform .24s ease, border-color .24s ease;
  }

  .subscription-card:hover,
  .commitment-card:hover {
    border-color: rgba(117, 214, 255, .42);
    transform: translateY(-3px);
  }
}

@media (max-width: 960px) {
  .commitment-heading {
    grid-template-columns: minmax(0, 1fr) minmax(280px, .78fr);
    gap: 42px;
  }

  .commitment-layout {
    grid-template-columns: minmax(290px, .76fr) minmax(0, 1.5fr);
    gap: 16px;
  }

  .commitment-grid { gap: 14px; }
  .subscription-card { padding: 34px 28px 30px; }
  .subscription-price span { font-size: 65px; }
  .commitment-card { padding: 24px 22px 22px; }
  .commitment-card h3 { font-size: 22px; }
  .commitment-card-france { grid-template-columns: minmax(0, 1fr) 68px; gap: 12px; }
  .commitment-card-france img { width: 68px; }
}

@media (max-width: 720px) {
  .commitment {
    padding: 72px 0 76px;
    scroll-margin-top: 68px;
  }

  .commitment-shell {
    width: calc(100% - 32px);
  }

  .commitment-heading {
    display: block;
    margin-bottom: 31px;
  }

  .commitment-heading .overline { margin-bottom: 14px; }

  .commitment-heading h2 {
    font-size: clamp(36px, 10.5vw, 43px);
    line-height: 1;
  }

  .commitment-heading > p {
    max-width: none;
    margin-top: 20px;
    font-size: 15px;
    line-height: 1.6;
  }

  .commitment-layout,
  .commitment-grid {
    grid-template-columns: 1fr;
  }

  .commitment-layout { gap: 18px; }
  .commitment-grid { gap: 14px; }

  .subscription-card {
    padding: 31px 26px 29px;
  }

  .subscription-price { margin-top: 23px; }
  .subscription-price span { font-size: clamp(62px, 18.5vw, 72px); }
  .subscription-range { margin-top: 24px; font-size: 17px; }
  .subscription-card ul { margin-top: 23px; gap: 13px; }
  .subscription-card li { font-size: 12.5px; }

  .commitment-card {
    min-height: 0;
    padding: 25px 23px 24px;
  }

  .commitment-card h3 {
    margin-top: 18px;
    font-size: 24px;
  }

  .commitment-usage-example {
    margin-top: 17px;
    padding: 14px 15px;
  }

  .commitment-usage-note {
    margin-top: 15px;
  }

  .commitment-card > p:not(.commitment-number):not(.commitment-condition):not(.commitment-usage-example):not(.commitment-usage-note),
  .commitment-card-france > div > p:not(.commitment-number) {
    font-size: 13px;
  }

  .commitment-condition {
    font-size: 12px;
  }

  .commitment-card-france {
    grid-template-columns: minmax(0, 1fr) 78px;
    gap: 18px;
  }

  .commitment-card-france img { width: 78px; }
}

@media (max-width: 360px) {
  .subscription-card { padding-right: 22px; padding-left: 22px; }
  .commitment-card { padding-right: 20px; padding-left: 20px; }
  .commitment-card-france { grid-template-columns: minmax(0, 1fr) 66px; gap: 12px; }
  .commitment-card-france img { width: 66px; }
}

@media (prefers-reduced-motion: reduce) {
  .subscription-card,
  .commitment-card {
    transition: none;
  }
}