<header class="site-header">
  <div class="container header-inner">
    <a href="{{ "/" | relURL }}" class="brand" aria-label="Tidy Index home">
      <span class="brand-mark" aria-hidden="true">
        <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect x="4" y="6" width="24" height="3" rx="1.5" fill="currentColor"/>
          <rect x="4" y="14" width="18" height="3" rx="1.5" fill="currentColor" opacity="0.7"/>
          <rect x="4" y="22" width="12" height="3" rx="1.5" fill="currentColor" opacity="0.4"/>
        </svg>
      </span>
      <span class="brand-name">Tidy Index</span>
    </a>
    <nav class="site-nav" aria-label="Primary">
      <a href="#what">What</a>
      <a href="#formats">Formats</a>
      <a href="#how">How it works</a>
      <a href="#contact" class="nav-cta">Get access</a>
    </nav>
  </div>
</header>
