/* ==========================================================================
   ARKADE LOUNGE — Membership
   ========================================================================== */

.tier-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  align-items: start;
}

.tier__price {
  margin-block: var(--sp-3) var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.tier__price strong {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  font-weight: var(--fw-black);
  line-height: 1;
  color: var(--text);
}

.tier__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.tier__list li {
  position: relative;
  padding-inline-start: var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--text-2);
}

/* The same angular marker used on the Play page, so the two pages read as
   one system rather than two designs. */
.tier__list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.55em;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  background: var(--purple-400);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.tier__list strong { color: var(--text); }

/* The featured tier's accent rule is drawn by .card--featured, which uses an
   ::before of its own — so the list markers stay clear of the leading edge. */
.card--featured .card__body { padding-inline-start: var(--sp-6); }