/* Membership identity: silver, champagne gold and graphite platinum.
   Only membership cards use these palettes; the application stays white/blue. */
.membership-card.tier-silver {
  --card-ink: #273344;
  --card-secondary: #435164;
  --card-edge: #aab7c7;
  --card-mark: #52647c;
  --card-decor: #71839b1c;
  --card-badge: #ffffff64;
  color: var(--card-ink);
  border-color: var(--card-edge);
  background: linear-gradient(125deg, #e9edf2 0%, #fbfcfd 28%, #d0d8e2 68%, #e8edf3 100%);
  box-shadow: 0 18px 30px -22px #52647c66;
}
.membership-card.tier-gold {
  --card-ink: #44321a;
  --card-secondary: #514127;
  --card-edge: #c5a56a;
  --card-mark: #7c5a24;
  --card-decor: #9e75231a;
  --card-badge: #fff9e572;
  color: var(--card-ink);
  border-color: var(--card-edge);
  background: linear-gradient(125deg, #eed9aa 0%, #fff4d6 29%, #dec18a 69%, #f4e6c7 100%);
  box-shadow: 0 18px 30px -22px #80612766;
}
.membership-card.tier-platinum {
  --card-ink: #f4f7fb;
  --card-secondary: #c8d1df;
  --card-edge: #66768d;
  --card-mark: #d5dfed;
  --card-decor: #c1d0e513;
  --card-badge: #d7e4f01c;
  color: var(--card-ink);
  border-color: var(--card-edge);
  background: linear-gradient(125deg, #344054 0%, #202938 43%, #141c29 74%, #364357 100%);
  box-shadow: 0 18px 30px -22px #14233899, inset 0 1px 0 #e0e7f333;
}
.membership-card:is(.tier-silver, .tier-gold, .tier-platinum)::before,
.membership-card:is(.tier-silver, .tier-gold, .tier-platinum) .card-orbit {
  border-color: var(--card-decor);
}
.membership-card:is(.tier-silver, .tier-gold, .tier-platinum) .brand,
.membership-card:is(.tier-silver, .tier-gold, .tier-platinum) .card-middle .card-plan,
.membership-card:is(.tier-silver, .tier-gold, .tier-platinum) .card-bottom strong {
  color: var(--card-ink);
}
.membership-card:is(.tier-silver, .tier-gold, .tier-platinum) .brand-symbol {
  color: var(--card-ink);
  background: var(--card-badge);
}
.membership-card:is(.tier-silver, .tier-gold, .tier-platinum) .card-tier {
  color: var(--card-ink);
  border-color: var(--card-edge);
  background: var(--card-badge);
  font-weight: 600;
}
.membership-card:is(.tier-silver, .tier-gold, .tier-platinum) .card-kicker,
.membership-card:is(.tier-silver, .tier-gold, .tier-platinum) .card-number,
.membership-card:is(.tier-silver, .tier-gold, .tier-platinum) .card-bottom small,
.membership-card:is(.tier-silver, .tier-gold, .tier-platinum) .card-valid {
  color: var(--card-secondary);
}
.membership-card:is(.tier-silver, .tier-gold, .tier-platinum) .card-emblem {
  color: var(--card-mark);
}
.membership-card .card-top { align-items: center; }
.membership-card .card-tier { flex-shrink: 0; white-space: nowrap; }
.membership-card .card-plan { overflow-wrap: anywhere; }

/* The same tier colors carry through to purchase and upgrade comparisons. */
.product-card.silver {
  color: #29374b;
  border-color: #c3cedb;
  background: linear-gradient(145deg, #f5f7fa 0%, #e9eef4 23%, #ffffff 65%);
}
.product-card.gold {
  color: #49391e;
  border-color: #dfc48d;
  background: linear-gradient(145deg, #fff9e9 0%, #f8ecd0 23%, #fffdf8 65%);
}
.product-card.platinum {
  color: #f2f6fc;
  border-color: #53637a;
  background: linear-gradient(145deg, #344054 0%, #243042 42%, #1c2635 100%);
  box-shadow: 0 12px 28px -22px #15253e9c;
}
.product-card.silver .product-badge { color: #46566d; background: #dce4ed; }
.product-card.gold .product-badge { color: #6c501e; background: #f0dfb6; }
.product-card.platinum .product-badge { color: #e3ebf7; background: #ffffff17; border: 1px solid #ffffff24; }
.product-card.silver .product-symbol { color: #64768e; }
.product-card.gold .product-symbol { color: #967131; }
.product-card.platinum .product-symbol { color: #cbd8eb; }
.product-card:is(.silver, .gold, .platinum) .product-name,
.product-card:is(.silver, .gold, .platinum) .product-price { color: inherit; }
.product-card.silver > p,
.product-card.silver .product-duration,
.product-card.silver .price-breakdown,
.product-card.silver .benefit-list li { color: #58677c; }
.product-card.gold > p,
.product-card.gold .product-duration,
.product-card.gold .price-breakdown,
.product-card.gold .benefit-list li { color: #725d3a; }
.product-card.platinum > p,
.product-card.platinum .product-duration,
.product-card.platinum .price-breakdown,
.product-card.platinum .benefit-list li { color: #c6d1e1; }
.product-card.silver .benefit-list { border-color: #d3dce7; }
.product-card.gold .benefit-list { border-color: #e9d7af; }
.product-card.platinum .benefit-list { border-color: #ffffff21; }
.product-card.silver .benefit-list svg { color: #59748c; }
.product-card.gold .benefit-list svg { color: #90702e; }
.product-card.platinum .benefit-list svg { color: #b9cce9; }
.product-card.platinum .benefit-list strong { color: #f4f7fd; }
.product-card.platinum > .btn {
  color: #243349;
  border-color: #e9f0fa;
  background: #e9f0fa;
}
.product-card.platinum > .btn:not(:disabled):hover {
  color: #152b4d;
  border-color: #ffffff;
  background: #ffffff;
}
.product-card:is(.silver, .gold, .platinum).selected {
  border-color: #2455f5;
  box-shadow: 0 0 0 2px #2455f5, 0 8px 25px -20px #2455f570;
}
.product-card:is(.silver, .gold, .platinum) > .btn:disabled {
  opacity: 1;
  color: #59677b;
  border-color: #dce3ed;
  background: #e9edf3;
}
.product-card.platinum > .btn:disabled {
  color: #c7d2e4;
  border-color: #ffffff29;
  background: #ffffff0d;
}
@media (max-width: 359px) {
  .membership-card .card-tier { padding-inline: 7px; }
}