/* Pricing page — Figma shell / pricing (1730:4191 desktop, 1729:2577 mobile) */

.pricing-page {
  padding-block: var(--d-20) 0;
  padding-inline: var(--d-4);
  background: var(--surface);
}

@media (min-width: 56.25rem) {
  .pricing-page {
    padding-block: 7.5rem 0;
    padding-inline: var(--d-10);
  }
}

.pricing-page .container {
  display: flex;
  flex-direction: column;
  gap: var(--d-6);
}

@media (min-width: 40rem) {
  .pricing-page .container {
    gap: var(--d-20);
  }
}

/* Header */

.pricing-page__header {
  display: flex;
  flex-direction: column;
  gap: var(--d-10);
  width: 100%;
}

@media (min-width: 40rem) {
  .pricing-page__header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.pricing-page__title {
  margin: 0;
}

.pricing-page__blurb {
  margin: 0;
  max-width: 17.3125rem;
}

@media (min-width: 40rem) {
  .pricing-page__blurb {
    max-width: 17.8125rem;
    text-align: right;
  }
}

/* Card grid */

.pricing-page__grid {
  display: grid;
  gap: var(--d-2);
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: stretch;
}

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

.pricing-page__grid > li {
  display: flex;
}

/* Card */

.pricing-page__card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--d-12);
  width: 100%;
  padding: var(--d-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.pricing-page__card--neutral {
  background: var(--color-grey-300);
}

.pricing-page__card--yellow {
  background: var(--surface-card-yellow);
}

.pricing-page__card-main {
  display: flex;
  flex-direction: column;
  gap: var(--d-12);
}

.pricing-page__card-head {
  display: flex;
  flex-direction: column;
  gap: var(--d-2);
}

.pricing-page__card-name {
  margin: 0;
}

.pricing-page__card-desc {
  margin: 0;
  color: var(--color-grey-500);
}

/* Stat rows */

.pricing-page__stats {
  display: flex;
  flex-direction: column;
  gap: var(--d-3);
}

.pricing-page__stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--d-4);
  padding-inline: var(--d-1);
}

.pricing-page__stat-label {
  margin: 0;
}

.pricing-page__stat-value {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--d-2);
}

/* Includes + chips */

.pricing-page__card-foot {
  display: flex;
  flex-direction: column;
  gap: var(--d-6);
}

.pricing-page__includes {
  display: flex;
  flex-direction: column;
  gap: var(--d-4);
}

.pricing-page__includes-label {
  margin: 0;
}

.pricing-page__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--d-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pricing-page__chip {
  display: inline-flex;
  padding: var(--d-1_5) var(--d-3);
  border: 1px solid var(--color-grey-350);
  border-radius: 10px;
}

/* Buttons — use .btn .btn--block from 03-patterns.css */