# Inline Critical CSS

Inline above-the-fold styles to avoid render-blocking stylesheet requests.

```liquid
{% comment %} BAD: external stylesheet blocks first paint {% endcomment %}
{{ 'section-hero.css' | asset_url | stylesheet_tag }}

{% comment %} GOOD: inline critical styles for first paint {% endcomment %}
<style>
  .hero { min-height: 60vh; display: flex; align-items: center; }
</style>

{% comment %} Load non-critical CSS async {% endcomment %}
<link rel="stylesheet" href="{{ 'section-hero.css' | asset_url }}" media="print" onload="this.media='all'">
```