.subscription {
  background: #f4f4f4;
  color: var(--color-text);
  min-height: 570px;
}

.subscription h2 {
  color: var(--color-text);
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  margin-bottom: var(--space-14);
}

@media (min-width: 768px) {
  .subscription h2 {
    font-size: clamp(28px, 3.2vw, 46px);
    margin-bottom: 72px;
  }
}

.plans {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 auto;
  max-width: 650px;
}

.plan-card {
  --plan-list-offset: var(--space-8);

  background: linear-gradient(164deg, rgba(223, 223, 223, 0.50) -0.27%, rgba(126, 126, 126, 0.50) 88.7%);
  border: 0;
  border-radius: var(--radius-small);
  min-height: 390px;
  padding: var(--space-8);
  position: relative;
}

.subscription--plans-ready h2,
.subscription--plans-ready .plan-card {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  transition: opacity 720ms ease, transform 1040ms cubic-bezier(.22, 1, .36, 1);
}

.subscription--plans-ready.is-plans-revealed h2,
.subscription--plans-ready.is-plans-revealed .plan-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.subscription--plans-ready.is-plans-revealed .plan-card:nth-child(1) {
  transition-delay: 220ms;
}

.subscription--plans-ready.is-plans-revealed .plan-card:nth-child(2) {
  transition-delay: 400ms;
}

.plan-badge {
  height: 32px;
  object-fit: contain;
  position: absolute;
  right: var(--space-8);
  top: var(--space-8);
  width: 32px;
}

.plan-card--plus {
  background: linear-gradient(329deg, rgba(221, 229, 255, 0.30) 0.77%, rgba(30, 75, 149, 0.30) 97.78%);
}

.plan-card :where(h3, p) {
  margin: 0;
}

.plan-card h3 {
  font-size: var(--type-card-title);
  margin-bottom: var(--space-3);
}

.plan-price {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.plan-price span {
  font-size: 20px;
  font-weight: 400;
}

.plan-note {
  margin: var(--space-5) 0 var(--space-3);
}

.plan-intro {
  margin: var(--space-3) 0 var(--space-4);
}

.plan-card ul {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  margin: var(--plan-list-offset) 0 0;
  padding: 0;
}

.plan-card--base {
  --plan-list-offset: var(--space-14);
  color: #686868;
}

.plan-card--plus {
  --plan-list-offset: var(--space-4);
}

.plan-card li {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  font-size: var(--type-caption);
  line-height: 1.35;
}

.plan-check {
  flex: 0 0 auto;
  height: 16px;
  object-fit: contain;
  width: 16px;
}

@media (max-width: 767px) {
  .subscription { min-height: 0; padding-top: 40px; }
  .subscription h2 { font-size: clamp(28px, 7.5vw, 32px); margin-bottom: 40px; text-align: center; }
  .plans {
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }

  .plan-card {
    --plan-list-offset: 0;

    border-radius: 18px;
    min-height: 300px;
    padding: 16px 14px;
  }

  .plan-card h3 { font-size: 21px; }
  .plan-price { font-size: 22px; }

  .plan-price span,
  .plan-card p,
  .plan-card li {
    font-size: 10px;
  }

  .plan-price span { font-size: 14px; }

  .plan-card ul {
    gap: 9px;
  }

  .plan-badge {
    height: 20px;
    right: var(--space-5);
    top: var(--space-5);
    width: 20px;
  }

  .plan-check {
    height: 11px;
    width: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .subscription--plans-ready h2,
  .subscription--plans-ready .plan-card {
    transition: none;
  }
}