@layer blocks {
  .pricing-grid {
    border: var(--border-width-thin) var(--border-style) var(--color-border);
    border-radius: var(--radius-l);
    overflow: hidden;
    --grid-min-size: 20rem;
    --grid-gap: 0;
    --box-padding: var(--space-l);
    --button-width: 100%;
    --button-display: block;
    --repel-direction: column;
    --repel-vertical-alignment: flex-start;
    --repel-gap: var(--space-m);
  }

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

  .pricing-card:last-child {
    border-right: none;
  }

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

  .pricing-save {
    background: var(--color-accent-tint);
    color: var(--color-accent);
    padding: 0.15rem var(--space-2xs);
    border-radius: var(--radius-s);
  }

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

}