@layer ds.block {
    .pricing-cards__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-6);
        align-items: stretch;
    }

    .pricing-cards__card {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        background: var(--color-surface);
        border: 1px solid color-mix(in srgb, var(--color-heading) 12%, transparent);
        border-radius: var(--radius-ui);
        padding: var(--space-7);
        box-shadow: var(--shadow-sm);
    }

    .pricing-cards__card:has(.pricing-cards__badge) {
        background: var(--color-heading);
        color: var(--color-text-invert);
        border-color: transparent;
        box-shadow: var(--shadow-lg);
    }


    .pricing-cards__badge {
        position: absolute;
        top: calc(-1 * var(--space-4));
        right: var(--space-6);
        background: var(--color-primary);
        color: var(--color-on-primary);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-bold);
        letter-spacing: 0.04em;
        text-transform: uppercase;
        padding: var(--space-2) var(--space-4);
        border-radius: var(--radius-pill);
    }

    .pricing-cards__icon { width: 1.5rem; height: 1.5rem; color: var(--color-primary); stroke-width: 1.2; }
    .pricing-cards__card:has(.pricing-cards__badge) .pricing-cards__icon { color: var(--brand-apricot); }

    .pricing-cards__head { display: flex; flex-direction: column; gap: var(--space-2); }

    .pricing-cards__title { margin: 0; font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--font-weight-bold); color: var(--color-heading); }
    .pricing-cards__card:has(.pricing-cards__badge) .pricing-cards__title { color: var(--color-text-invert); }

    .pricing-cards__text { margin: 0; font-size: var(--text-small); line-height: var(--line-height-base); color: var(--color-text); }
    .pricing-cards__card:has(.pricing-cards__badge) .pricing-cards__text { color: var(--brand-sage-pale); }

    .pricing-cards__features {
        padding-block: var(--space-4);
        border-block: 1px solid color-mix(in srgb, var(--color-heading) 12%, transparent);
    }

    .pricing-cards__card:has(.pricing-cards__badge) .pricing-cards__features {
        border-block-color: color-mix(in srgb, var(--color-text-invert) 16%, transparent);
    }

    .pricing-cards__features ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }

    .pricing-cards__features li {
        display: flex;
        gap: var(--space-3);
        font-size: var(--text-small);
        color: var(--color-text);
    }

    .pricing-cards__card:has(.pricing-cards__badge) .pricing-cards__features li { color: var(--brand-sage-pale); }

    .pricing-cards__features li::before {
        content: "✓";
        color: var(--brand-sage);
        font-weight: var(--font-weight-bold);
        flex-shrink: 0;
    }

    .pricing-cards__card:has(.pricing-cards__badge) .pricing-cards__features li::before { color: var(--brand-apricot); }

    .pricing-cards__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); }

    .pricing-cards__price-value { font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--font-weight-bold); color: var(--color-heading); white-space: nowrap; }
    .pricing-cards__card:has(.pricing-cards__badge) .pricing-cards__price-value { color: var(--color-text-invert); }

    .pricing-cards__price-unit { font-size: var(--text-small); color: var(--color-text); }
    .pricing-cards__card:has(.pricing-cards__badge) .pricing-cards__price-unit { color: var(--brand-sage-muted); }

    .pricing-cards__cta { margin-top: auto; justify-content: center; }

    @media (max-width: 64rem) {
        .pricing-cards__grid { grid-template-columns: 1fr; }
    }
}