/* BloxMaps: the upgrade card (templates/_upgrade_card.html, static/js/upgrade.js). Uses the tokens of app.css. */

.tier-starter { background: var(--blue); color: #fff; box-shadow: 0 2px 0 var(--blue-d); }

.upcard { display: grid; gap: 14px; }
.upcard-lead { margin: 0; color: var(--ink-2); font-weight: 700; }
.upcard-plan { display: grid; gap: 12px; padding: 16px; border-radius: 20px; background: var(--surface-2); border: 2px solid var(--line); }
.upcard-plan-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.upcard-plan-head .badge { font-size: 0.85rem; padding: 3px 12px; }
.upcard-kicker { font-size: 0.82rem; font-weight: 800; color: var(--ink-3); }
.upcard-price { font-family: var(--font-display); line-height: 1; white-space: nowrap; }
.upcard-price b { font-size: 1.7rem; font-weight: 700; }
.upcard-price small { font-size: 0.9rem; color: var(--ink-2); font-weight: 600; }
.upcard-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.upcard-perks li { display: flex; gap: 8px; align-items: flex-start; font-weight: 700; font-size: 0.95rem; }
.upcard-perks .i { color: var(--green); stroke-width: 3; margin-top: 2px; }
.upcard-founders { margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--purple-soft); color: var(--ink); font-weight: 700; font-size: 0.85rem; }
.upcard-or { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; color: var(--ink-3); font-weight: 800; font-size: 0.85rem; }
.upcard-or::before, .upcard-or::after { content: ""; flex: 1; border-top: 2px dashed var(--line); }
.upcard-pack-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.upcard-pack { justify-content: flex-start; text-align: left; min-height: 52px; }
.upcard-pack .i { color: var(--yellow-d); }
.upcard-pack span { display: flex; flex-direction: column; line-height: 1.15; }
.upcard-pack small { font-family: var(--font-body); font-weight: 700; font-size: 0.8rem; color: var(--ink-2); }
@media (max-width: 420px) { .upcard-pack-row { grid-template-columns: 1fr; } }