/**
 * Highlights/Social Proof Component - Design System Implementation
 * 
 * Pixel-perfect match to design.html highlights section
 */

@layer components {
  .highlights {
    padding: var(--space-3); /* 12px */
  }
  
  .highlight-row {
    border-bottom: 0.5px solid var(--color-border);
  }
  
  .highlight-row-inner {
    padding: var(--space-5) 0; /* 20px 0 */
    border-bottom: 0.5px solid var(--color-highlight-soft);
  }
  
  .highlight-text {
    font-family: var(--font-sans);
    font-weight: var(--font-medium);
    font-size: var(--text-base-size, 0.875rem); /* 14px */
    line-height: var(--text-default-leading);
    letter-spacing: var(--text-default-tracking);
    color: var(--color-text-secondary);
  }
  
  .highlight-text em {
    font-style: italic;
  }
  
  .highlight-text a {
    font-style: italic;
    text-decoration: underline;
    color: inherit;
  }
}