/* Service label (technology name) and fixed price. */

@layer components {
  .service-label {
    justify-self: start;
    padding: var(--space-1) 10px;
    border-radius: var(--radius-pill);
    background: var(--tint);
    color: var(--accent);
    font: 500 0.75rem / 1.4 var(--font-mono);
  }

  .price {
    font-size: var(--step-1);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .price-large { font-size: var(--step-3); }
}

@layer components {
  .service-labels {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
}