.pricing-card { --pricing-gap: 0.875rem; --pricing-copy: var(--color-description); --pricing-divider: var(--color-border-divider); position: relative; display: flex; flex-direction: column; justify-content: space-between; min-inline-size: 0; min-block-size: 34rem; padding: var(--space-8); gap: var(--space-8); border-radius: var(--radius-feature); overflow: clip; background: var(--color-surface); color: var(--color-text); }
.pricing-card--featured { --pricing-copy: var(--color-on-accent); --pricing-divider: var(--color-on-accent); background: var(--color-brand-action); color: var(--color-on-accent); }
.pricing-card__background { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0.22; pointer-events: none; }
.pricing-card__content, .pricing-card__footer { position: relative; }
.pricing-card__content { display: grid; gap: var(--pricing-gap); }
.pricing-card__header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); padding-block-end: var(--space-4); border-block-end: 1px solid var(--pricing-divider); }
.pricing-card__name { margin: 0; font-family: var(--font-heading); font-size: var(--fs-label); font-weight: 400; line-height: var(--line-height-label); text-transform: uppercase; overflow-wrap: anywhere; }
.pricing-card__badge { padding: var(--space-1) 0.625rem; border-radius: var(--radius-pill); background: var(--color-background); color: var(--color-text); font-size: var(--fs-micro); font-weight: 500; line-height: 1.35; }
.pricing-card__description { margin: 0; font-size: var(--fs-label); line-height: 1.2; }
.pricing-card__features { display: grid; gap: var(--pricing-gap); margin: 0; padding: 0; list-style: none; }
.pricing-card__feature { display: flex; align-items: start; gap: var(--space-2); color: var(--pricing-copy); font-size: var(--fs-small); font-weight: 500; line-height: var(--line-height-control); }
.pricing-card__feature svg { inline-size: var(--space-4); block-size: var(--space-4); flex: 0 0 var(--space-4); color: var(--color-text); margin-block-start: 0.125rem; }
.pricing-card--featured .pricing-card__feature svg { color: var(--color-on-accent); }
.pricing-card:not(.pricing-card--wide) { --pricing-description-opacity: 1; --pricing-list-offset: 0px; box-shadow: inset 0 0 0 1px transparent; transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); }
.pricing-card[data-pricing-ready] { --pricing-selection-offset: var(--pricing-action-shift); }
.pricing-card__selection { position: relative; display: grid; gap: var(--space-8); transform: translateY(var(--pricing-selection-offset, 0px)); transition: transform var(--dur-panel) var(--ease-standard); }
.pricing-card:not(.pricing-card--wide) .pricing-card__description { opacity: var(--pricing-description-opacity); transition: opacity var(--dur-panel) var(--ease-standard); }
.pricing-card:not(.pricing-card--wide) .pricing-card__features { transform: translateY(var(--pricing-list-offset)); transition: transform var(--dur-panel) var(--ease-standard); }
.pricing-card__action { opacity: 0; pointer-events: none; transition: opacity var(--dur-panel) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard); }
.pricing-card__background { transition: opacity var(--dur-fast) var(--ease-standard); }
.pricing-card__name { transition: color var(--dur-fast) var(--ease-standard); }
.pricing-card:not(.pricing-card--wide):focus-within { --pricing-copy: var(--color-description); --pricing-divider: var(--color-border-divider); --pricing-description-opacity: 0; --pricing-list-offset: calc(-1 * var(--pricing-description-shift, 0px)); --pricing-selection-offset: 0px; background: var(--color-background); color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-selection-action); }
.pricing-card:focus-within .pricing-card__name { color: var(--color-selection-action); }
.pricing-card:focus-within .pricing-card__background { opacity: 0; }
.pricing-card:focus-within .pricing-card__feature svg { color: var(--color-text); }
.pricing-card:focus-within .pricing-card__badge { background: var(--color-surface); }
.pricing-card:focus-within .pricing-card__action { opacity: 1; pointer-events: auto; }
@media (hover: hover) and (pointer: fine) {
    .pricing-card:not(.pricing-card--wide):hover { --pricing-copy: var(--color-description); --pricing-divider: var(--color-border-divider); --pricing-description-opacity: 0; --pricing-list-offset: calc(-1 * var(--pricing-description-shift, 0px)); --pricing-selection-offset: 0px; background: var(--color-background); color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-selection-action); }
    .pricing-card:not(.pricing-card--wide):hover .pricing-card__name { color: var(--color-selection-action); }
    .pricing-card:not(.pricing-card--wide):hover .pricing-card__background { opacity: 0; }
    .pricing-card:not(.pricing-card--wide):hover .pricing-card__feature svg { color: var(--color-text); }
    .pricing-card:not(.pricing-card--wide):hover .pricing-card__badge { background: var(--color-surface); }
    .pricing-card:hover .pricing-card__action { opacity: 1; pointer-events: auto; }
}
@media (hover: none), (pointer: coarse) {
    .pricing-card[data-pricing-ready] { --pricing-selection-offset: 0px; }
    .pricing-card:not(.pricing-card--wide) .pricing-card__description { opacity: 1; }
    .pricing-card:not(.pricing-card--wide) .pricing-card__features,
    .pricing-card__selection { transform: none; transition: none; }
    .pricing-card__action { opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .pricing-card:not(.pricing-card--wide) { transition: none; }
    .pricing-card, .pricing-card__action, .pricing-card__background, .pricing-card__name, .pricing-card__selection, .pricing-card__description, .pricing-card__features { transition: none; }
    .pricing-card:not(.pricing-card--wide) .pricing-card__description,
    .pricing-card:not(.pricing-card--wide) .pricing-card__features { transition: none; }
}
.pricing-card__footer { display: grid; gap: var(--space-2); }
.pricing-card__price-line { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.pricing-card__prefix { font-size: var(--fs-small); font-weight: 500; }
.pricing-card__price { font-family: var(--font-heading); font-size: clamp(var(--fs-label), 1.944444vw, var(--fs-kicker-max)); font-weight: 600; line-height: 1.1; white-space: nowrap; }
.pricing-card__unit { font-size: var(--fs-body-large); line-height: var(--line-height-control); }
.pricing-card__note { margin: 0; color: var(--pricing-copy); font-size: var(--fs-micro); font-weight: 500; line-height: 1.35; }
@media (width < 75rem) { .pricing-card { min-block-size: 0; } }
@media (width < 48rem) { .pricing-card { padding: var(--space-6); border-radius: var(--radius-panel); } .pricing-card__unit { font-size: var(--fs-body); } }
.pricing-card--wide { min-block-size: 0; }
.pricing-card--wide .pricing-card__price { white-space: normal; overflow-wrap: anywhere; }
.pricing-card--wide .pricing-card__header { padding-block: 0.625rem; gap: var(--space-6); }
.pricing-card--wide .pricing-card__name { font-size: clamp(var(--fs-label), 2.361111vw, var(--fs-legal-heading-max)); line-height: 1.2; text-transform: none; }
.pricing-card--wide .pricing-card__features { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--pricing-feature-rows), auto); grid-auto-flow: column; column-gap: var(--space-4); }
.pricing-card--wide .pricing-card__footer { text-align: end; }
.pricing-card--wide .pricing-card__price-line { justify-content: end; }
@media (width < 48rem) {
    .pricing-card--wide .pricing-card__header { flex-direction: column; align-items: start; }
    .pricing-card--wide .pricing-card__footer { text-align: start; }
    .pricing-card--wide .pricing-card__price-line { justify-content: start; }
    .pricing-card--wide .pricing-card__features { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
}