@layer components {
  /* A leading icon in a soft rounded tile; service logos keep their own look. */
  .icon-tile {
    flex: none; display: grid; place-items: center; width: 40px; height: 40px;
    border-radius: var(--radius-md); background: var(--muted); color: var(--muted-foreground);
  }
  .icon-tile--sm { width: 32px; height: 32px; }
  .icon-tile--xs { width: 24px; height: 24px; border-radius: 6px; }
}