/* Compact variant controls only; preserve the existing card and grid dimensions. */
.pricing-card-variant-selector { position: absolute; left: 0; right: 0; bottom: -2px; margin: 0; min-width: 0; }
.pricing-card-variant-label { display: none; }
.pricing-card-variant-options { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; }
.pricing-card-variant-option { position: relative; box-sizing: border-box; flex: 0 0 auto; min-height: 18px; height: 18px; min-width: 40px; padding: 0 5px; border: 1px solid var(--semi-color-border); border-radius: 4px; background: var(--semi-color-fill-0); color: var(--semi-color-text-1); font: inherit; font-size: 11px; font-weight: 500; line-height: 16px; white-space: nowrap; cursor: pointer; touch-action: manipulation; transition: border-color 150ms, background-color 150ms; }
.pricing-card-variant-option::after { content: ''; position: absolute; inset: -3px 0; }
.pricing-card-variant-option:hover { background: var(--semi-color-fill-1); }
.pricing-card-variant-option[aria-pressed="true"] { color: var(--semi-color-primary); border-color: var(--semi-color-primary); background: var(--semi-color-primary-light-default); }
.pricing-card-variant-option:focus-visible { outline: 2px solid var(--semi-color-primary); outline-offset: 2px; }
/* Keep the selected API announcement available to screen readers without adding a row. */
.pricing-card-variant-api { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .pricing-card-variant-option { transition: none; } }