/* Pricing-specific compositions use only shared tokens. */
.free-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-6); padding: var(--space-7) var(--space-8); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-panel); box-shadow: var(--shadow-card); }
.free-banner-copy { flex: 1; min-width: 220px; }
.free-banner-copy h3 { margin-bottom: var(--space-1); font-size: var(--text-xl); }
.free-banner-copy p { max-width: 52ch; color: var(--text-secondary); font-size: var(--text-base); }
.free-banner-cta { display: flex; flex: none; align-items: center; gap: var(--space-4); }
.free-price { color: var(--text-primary); font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 500; }
.free-price span { color: var(--text-tertiary); font-size: var(--text-base); font-weight: 400; }
.pricing-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: var(--space-4); }
.pricing-hero + .band { padding-top: var(--space-10); }
.price-card.featured .card-head-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-1); }
.price-card.featured .card-head-row h3, .price-card.featured .card-head-row .price-tag { margin-bottom: 0; }
.price-card.featured .card-head-row .price-tag { align-self: center; }
@media (max-width: 1000px) { .pricing-grid-3 { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; } }
@media (max-width: 680px) { .free-banner { flex-direction: column; align-items: flex-start; } .free-banner-cta { width: 100%; justify-content: space-between; } }