@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"] {
    --color-text: var(--paper);
    --color-text-muted: var(--paper-50);
    --color-bg: var(--brand);
    --color-border: var(--paper-12);
    --color-accent: var(--brand-bright);
    background: var(--color-bg);
    color: var(--color-text);
  }

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

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

  .pricing-features {
    list-style: none;
    border-top: var(--border-width-thin) var(--border-style) var(--color-border);
    padding-top: var(--space-s);
    --flow-space: var(--space-xs);
  }

  .pricing-features li {
    padding-left: var(--space-s);
    position: relative;
  }

  .pricing-features li::before {
    content: "\2192";
    position: absolute;
    left: 0;
    color: var(--color-text-muted);
    font-size: var(--font-xs);
  }

  .pricing-card[data-state="featured"] .pricing-card-label::after {
    content: " — Beliebteste Wahl";
    color: var(--brand-bright);
    font-style: italic;
  }
}