* Scoped, minimal enhancements (your site CSS handles the rest) */
  .ai-visuals { 
    max-width: 1000px; 
    margin: 0 auto; 
    padding: clamp(16px, 4vw, 32px);
  }
  .ai-visuals .lead { 
    font-size: 1.05rem; 
    line-height: 1.7; 
    margin-bottom: 1rem; 
  }
  .ai-visuals h2, .ai-visuals h3 { 
    line-height: 1.25; 
    margin: 0.5rem 0 0.75rem; 
  }
  .ai-visuals .bullets { 
    margin: 0 0 1.25rem 1.2rem; 
  }
  .ai-visuals .bullets li { 
    margin-bottom: 0.5rem; 
  }
  .ai-visuals .hint { 
    opacity: 0.9; 
    margin-bottom: 0.75rem; 
  }

  .tool-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(12px, 2.5vw, 20px);
  }
  @media (min-width: 720px) {
    .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 1100px) {
    .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  .tool-card {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
  }
  .tool-card h4 { 
    margin: 0; 
    font-size: 1.05rem; 
  }
  .tool-card .meta { 
    margin: 4px 0 10px; 
    font-size: 0.9rem; 
    opacity: 0.85; 
  }
  .tool-card p { 
    margin: 0 0 8px; 
  }
  .tool-card a { 
    text-underline-offset: 2px; 
  }