@layer blocks {
  .pricing-grid {
    --box-padding: var(--space-l);
    --button-width: 100%;
    --repel-direction: column;
    --repel-vertical-alignment: flex-start;
    --repel-gap: var(--space-m);
  }

  .pricing-card {
    border: var(--border-width-thin) var(--border-style) var(--color-border);
    border-radius: var(--radius-l);
  }

  .pricing-card[data-state="featured"] {
    background: var(--color-primary);
    color: var(--color-bg);
  }

  .pricing-card[data-state="featured"] .badge[data-status="accent"] {
    background: var(--color-accent-bright-tint);
    color: var(--color-accent-bright);
  }
}