/*
 * Shared pricing cards.
 *
 * The same cards are used on the public landing pages, settings, and the
 * tokenized checkout page. Keep the monthly equivalent prominent and the
 * actual charge deliberately quieter so the recurring charge is always clear.
 */
.pricing-picker,
.pricing-options {
  width: 100%;
}

.pricing-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
}

.pricing-cards--primary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pricing-accompanied-option {
  max-width: 560px;
  margin: 18px auto 0;
}

.pricing-accompanied-option .pricing-card {
  min-height: 0;
}

.pricing-card,
.sub-plan-card.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  padding: 22px 18px 18px;
  border: 2px solid #ded8d2;
  border-radius: 14px;
  background: #fff;
  color: #202020;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease,
    transform .18s ease, background-color .18s ease;
}

button.pricing-card {
  font: inherit;
}

.pricing-card:hover {
  border-color: #d98972;
  box-shadow: 0 8px 22px rgba(65, 45, 35, .10);
  transform: translateY(-1px);
}

.pricing-card.is-selected,
.sub-plan-card.pricing-card.selected {
  border-color: #d98972;
  background: #fff9f5;
  box-shadow: 0 8px 24px rgba(217, 137, 114, .18);
}

.pricing-card:focus-visible {
  outline: 3px solid rgba(245, 197, 99, .75);
  outline-offset: 2px;
}

.pricing-card-badge {
  align-self: flex-start;
  min-height: 20px;
  margin: -4px 0 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #d98972;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.pricing-card-badge:empty {
  visibility: hidden;
}

.pricing-card-name,
.pricing-card .plan-label {
  display: block;
  margin-bottom: 8px;
  color: #514941;
  font-size: 14px;
  font-weight: 700;
}

.pricing-card-equivalent,
.pricing-card .plan-price {
  display: block;
  color: #1f1f1f;
  font-size: clamp(1.65rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.pricing-card-equivalent small,
.pricing-card .plan-price small {
  color: #625c57;
  font-size: .52em;
  font-weight: 700;
}

.pricing-card-monthly-label {
  display: block;
  margin-top: 3px;
  color: #706963;
  font-size: 12px;
  font-weight: 600;
}

.pricing-card-charge,
.pricing-card .plan-charge {
  display: block;
  min-height: 35px;
  margin-top: 13px;
  color: #3e3935;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.pricing-card-saving,
.pricing-card .plan-saving {
  display: block;
  min-height: 18px;
  margin-top: 9px;
  color: #267542;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.pricing-card-saving:empty,
.pricing-card .plan-saving:empty {
  visibility: hidden;
}

.pricing-card-period-note {
  display: block;
  margin-top: 2px;
  color: #7c746e;
  font-size: 11px;
  line-height: 1.35;
}

.pricing-card-benefit {
  display: block;
  margin-top: 12px;
  color: #514941;
  font-size: 12px;
  line-height: 1.45;
}

/* The public cards sit on a light landing section. */
.waitlist .pricing-cards {
  max-width: 1120px;
  margin: 0 auto;
}

.waitlist .pricing-card {
  min-height: 214px;
}

.pricing-summary {
  margin: 18px 0 8px;
  color: #3e3935;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.settings-card .pricing-summary {
  color: #ccc;
}

/* Settings uses the same cards on a dark surface. */
.settings-card .pricing-cards,
.settings-card .sub-plan-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.settings-card .pricing-card,
.settings-card .sub-plan-card.pricing-card {
  border-color: #2a2a2a;
  background: #111;
  color: #eeecdd;
}

.settings-card .pricing-card:hover {
  border-color: #f5c563;
}

.settings-card .pricing-card.is-selected,
.settings-card .sub-plan-card.pricing-card.selected {
  border-color: #f5c563;
  background: rgba(245, 197, 99, .07);
  box-shadow: 0 8px 24px rgba(245, 197, 99, .08);
}

.settings-card .pricing-card-name,
.settings-card .pricing-card .plan-label {
  color: #aaa;
}

.settings-card .pricing-card-equivalent,
.settings-card .pricing-card .plan-price {
  color: #eeecdd;
}

.settings-card .pricing-card-equivalent small,
.settings-card .pricing-card-monthly-label,
.settings-card .pricing-card-period-note {
  color: #888;
}

.settings-card .pricing-card-benefit {
  color: #aaa;
}

.settings-card .pricing-card-charge,
.settings-card .pricing-card .plan-charge {
  color: #ccc;
}

.settings-card .pricing-card-saving,
.settings-card .pricing-card .plan-saving {
  color: #74c985;
}

@media (max-width: 1024px) {
  .pricing-cards,
  .settings-card .pricing-cards,
  .settings-card .sub-plan-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing-cards--primary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .pricing-cards,
  .pricing-cards--primary,
  .settings-card .pricing-cards,
  .settings-card .sub-plan-cards {
    grid-template-columns: 1fr;
  }

  .pricing-card,
  .sub-plan-card.pricing-card {
    min-height: 0;
    padding: 18px 16px;
  }

  .pricing-card-equivalent,
  .pricing-card .plan-price {
    font-size: 1.8rem;
  }

  .pricing-card-charge,
  .pricing-card .plan-charge {
    min-height: 0;
  }
}