/*
  THE PUBLIC PRICING PAGE (WP-COM1 pass 3A-3A). Design-system first: every colour, size and corner below is a token, so
  this surface cannot drift from the product it belongs to — the same rule the dashboard obeys. The grid is the app's own
  pricing shape (three columns, then two, then one) expressed with the same `minmax(min(100%, …), 1fr)` idiom the Overlay
  Gallery uses, which is what keeps a phone from squeezing a card instead of stacking it.
*/

.pricing-body {
  min-height: 100vh;
  background: var(--ev-obsidian);
  color: var(--ev-fog);
}

.pricing-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ev-s4);
  padding: var(--ev-s4) var(--ev-s6);
  border-bottom: 1px solid var(--ev-border);
}

.pricing-top__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--ev-s3);
  color: var(--ev-fog);
  text-decoration: none;
}

.pricing-top__name {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.pricing-top__nav {
  display: inline-flex;
  align-items: center;
  gap: var(--ev-s2);
}

.pricing-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: var(--ev-s8) var(--ev-s6) var(--ev-s8);
  display: flex;
  flex-direction: column;
  gap: var(--ev-s6);
}

.pricing-page__intro {
  display: flex;
  flex-direction: column;
  gap: var(--ev-s2);
}

/*
  THREE, THEN TWO, THEN ONE — and the variable is DECLARED HERE, on the rule that reads it: a `minmax(min(100%, var(--x)))`
  with `--x` undeclared is an invalid declaration that silently falls back to one column (the Overlay Gallery hit exactly
  that). 320px is what fits three cards at 1440 with the page's own padding, two at 1024, and one at 390.
*/
.pricing-grid {
  --pricing-card-min: 320px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--pricing-card-min)), 1fr));
  gap: var(--ev-s5);
  align-items: stretch;
}

.pricing-card {
  background: var(--ev-slate);
  border: 1px solid var(--ev-border);
  border-radius: var(--ev-r-md);
  padding: var(--ev-s5);
  display: flex;
  flex-direction: column;
  gap: var(--ev-s3);
  min-width: 0;
}

.pricing-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ev-s3);
}

.pricing-card__price {
  font-size: var(--ev-text-lg);
  font-weight: 700;
  color: var(--ev-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pricing-card__coins {
  color: var(--ev-volt);
  font-weight: 600;
}

.pricing-card__list {
  margin: 0;
  padding-left: var(--ev-s5);
  display: flex;
  flex-direction: column;
  gap: var(--ev-s1);
}

.pricing-card__cta {
  align-self: flex-start;
  margin-top: var(--ev-s2);
  text-decoration: none;
}

.pricing-note {
  max-width: 900px;
}

.pricing-page__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ev-s2);
  border-top: 1px solid var(--ev-border);
  padding-top: var(--ev-s4);
}

.pricing-page__foot a {
  color: var(--ev-mist);
}