.pn-tiers { margin: 0; padding: 0; border-bottom: 1px solid var(--pn-ink); list-style: none; }
.pn-tier {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 3fr) minmax(11rem, 2fr);
  grid-template-areas: "name crews price action" "name fit price action";
  column-gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.25rem, 2.5vw, 2rem) clamp(.75rem, 2vw, 1.5rem);
  border-top: 1px solid var(--pn-ink);
  transition: background-color .25s var(--pn-ease);
}
.pn-tier:hover { background: var(--pn-paper-deep); }
.pn-tier h3 { grid-area: name; margin: 0; font-family: var(--pn-display); font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 500; }
.pn-tier-crews { grid-area: crews; margin: 0; font-weight: 600; }
.pn-tier-fit { grid-area: fit; margin: 0; color: var(--pn-ink-soft); }
.pn-tier-price { grid-area: price; margin: 0; color: var(--pn-ink-soft); white-space: nowrap; }
.pn-tier-price span { margin-right: .3rem; color: var(--pn-ink); font-family: var(--pn-display); font-size: clamp(2.6rem, 4.5vw, 3.75rem); line-height: 1; }
.pn-tier .pn-action { grid-area: action; }

.pn-tier[data-featured] { background: var(--pn-prussian); color: var(--pn-white); }
.pn-tier[data-featured] .pn-icon { color: var(--pn-wash); }
.pn-tier[data-featured] .pn-tier-fit, .pn-tier[data-featured] .pn-tier-price { color: var(--pn-wash); }
.pn-tier[data-featured] .pn-tier-price span { color: var(--pn-sun); }

.pn-plans-note { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; max-width: none; margin: 1.75rem 0 0; color: var(--pn-ink-soft); }

@media (max-width: 60rem) {
  .pn-tier { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "crews crews" "fit fit" "action action"; row-gap: .5rem; }
  .pn-tier .pn-action { justify-self: start; margin-top: .75rem; }
}
