.pricing-grid {
  display: grid;
  gap: var(--space-lg);
  align-items: stretch;
  margin-top: var(--space-lg);
}

.pricing-page-lede {
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 56rem) {
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pricing-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pricing-card.is-selected {
  border-width: 0.1875rem;
  box-shadow: var(--shadow-lifted-orange);
}

/*
  Planned pricing tiers stay grey, but the diagonal hatch is removed so
  every heading, price, and feature remains easy to read.
*/
.pricing-card.card--muted {
  background-color: var(--color-surface-muted);
  background-image:
    linear-gradient(135deg, var(--color-surface-muted), white, var(--color-surface-muted)),
    var(--gradient-muted);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.pricing-card.card--striped::before {
  display: none;
}

.pricing-card__price {
  font-size: var(--font-size-xlarge);
  font-weight: 700;
  color: var(--color-text-heading);
  margin: var(--space-sm) 0 var(--space-2xs);
}

.pricing-card.is-selected .pricing-card__price {
  color: var(--color-brand-primary-strong);
}

.pricing-card__pitch {
  font-size: var(--font-size-small);
  font-style: italic;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
}

.pricing-card__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  flex-grow: 1;
}

.pricing-card__features li {
  display: flex;
  gap: var(--space-xs);
  align-items: flex-start;
  font-size: var(--font-size-small);
}

.pricing-tagline {
  margin-top: var(--space-lg);
  margin-bottom: 0;
  font-weight: 700;
  font-size: var(--font-size-medium);
  color: var(--color-brand-primary-strong);
}