/* Block «pricing» — package cards on the shared .cards/.card base (site.css). The
   highlighted package gets an accent border plus a «Beliebt» badge; its button is
   filled, the others are outlined. Loaded conditionally. */
.pricing-card { display: flex; flex-direction: column; position: relative; }
.pricing-card--featured { border-color: var(--accent-fg); border-width: 2px; }
.pricing-badge {
    position: absolute; top: 0; right: var(--size-4); transform: translateY(-50%);
    margin: 0; padding: .15rem .6rem;
    background: var(--accent); color: #fff;
    font-size: var(--font-size-0); font-weight: var(--font-weight-6);
    letter-spacing: .04em; text-transform: uppercase;
}
.pricing-price {
    margin: .2rem 0 var(--size-3);
    font-family: var(--font-head); font-size: var(--font-size-5);
    font-weight: var(--font-weight-7); color: var(--ink);
}
.pricing-unit { font-family: var(--font-body); font-size: var(--font-size-1); font-weight: var(--font-weight-4); color: var(--muted); }
.pricing-features { list-style: none; margin: 0 0 var(--size-4); padding: 0; }
.pricing-features li {
    display: flex; align-items: flex-start; gap: .5rem;
    padding: .3rem 0; border-bottom: 1px solid var(--border);
}
.pricing-features li:last-child { border-bottom: 0; }
.pricing-features svg { width: 18px; height: 18px; flex: none; margin-top: .15rem; color: var(--accent-fg); }
.pricing-cta { margin: auto 0 0; padding-top: var(--size-2); }

/* The checkmark comes from the icon set (Icons::svg) and carries a class; the
   existing `.pricing-features svg` selector still applies. */
.pricing-check { color:var(--accent-fg); }