/* pricing.css — pricing page: featured free card (full width) + centered paid cards. */
.pricing-full { padding: 1.5rem 0 2rem; }
/* Flex (not a fixed 3-col grid): the paid cards center and stay balanced whatever
   their count (today just two), instead of leaving an empty trailing column. */
.price-grid { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.price-card { flex: 1 1 300px; max-width: 380px; padding: 1.6rem; display: flex; flex-direction: column; gap: 0.8rem; }
.price-card .pc-len { color: var(--muted); font-weight: 600; }
.price-card .pc-price { font-size: 1.9rem; font-weight: 800; font-family: var(--mono); }
.price-card ul { list-style: none; padding: 0; margin: 0; color: var(--muted); font-size: 0.9rem; display: grid; gap: 0.4rem; }
.price-card ul li::before { content: '✓ '; color: var(--good); }
.price-card .btn { margin-top: auto; }
.price-card-free { border-color: var(--primary); }
/* Featured free card leads on its own row: free is the main offering, paid is the
   exception. flex-basis 100% forces the paid cards to wrap below it. */
.price-card-free.featured { flex-basis: 100%; max-width: 100%; }
.pc-free-types { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pc-free-chip {
    border: 1px solid var(--primary);
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    font-size: 0.85rem;
    background: rgba(247, 147, 26, 0.1);
    color: var(--primary-2);
}
.pc-free-chip strong { font-family: var(--mono); color: var(--text); }
.pricing-note { color: var(--muted); text-align: center; max-width: 70ch; margin: 2.5rem auto 0; font-size: 0.9rem; }

@media (max-width: 900px) {
    .price-card { max-width: 100%; }
}

/* Desktop: cap the featured free card to the combined width of the two paid cards
   below it (2 cards at their 380px max-width + the 1rem grid gap), so it lines up
   with them instead of stretching the full row. Stays centered via justify-content. */
@media (min-width: 901px) {
    .price-card-free.featured { max-width: calc(380px * 2 + 1rem); }
}