/*
 * Social Proof
 * Star rating + trust line, reusable across hero, landing, sections
 */

@layer components {
  .social-proof {
    display: inline-flex;
    align-items: center;
    gap: var(--block-space-half);
    font-size: var(--text-small);
    font-weight: 400;
    color: var(--color-gray-darker);
    letter-spacing: var(--tracking-tight);

    @media (min-width: 640px) {
      font-size: var(--text-normal);
      gap: var(--block-space);
    }
  }

  .social-proof__stars {
    display: inline-flex;
    gap: var(--block-space-quarter);
    color: var(--color-green);
  }
}