@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) var(--border-style) var(--color-border);
    border-radius: var(--radius-l);
  }

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

    /* Muted text sits on the green card, so its tokens must stay light in
       both themes (otherwise the label/period flip dark and vanish). */
    --color-text-ghost: var(--color-on-primary-muted);
    --color-text-faint: var(--color-on-primary-faint);
  }

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