{{ define "main" }}

  <!-- ─── HERO ───────────────────────────────────── -->
  <section class="bg-green-950 px-6 py-24 lg:px-8">
    <div class="mx-auto max-w-4xl">
      <p class="text-xs font-bold uppercase tracking-widest text-green-400 mb-5">TheAfriForge — {{ .Site.Language.LanguageName }}</p>
      <h1 class="text-5xl md:text-6xl font-black leading-tight text-white mb-6">{{ .Title }}</h1>
      {{ with .Description }}
        <p class="text-lg text-green-200 max-w-2xl leading-relaxed">{{ . }}</p>
      {{ end }}
    </div>
  </section>

  <!-- ─── CONTENT ─────────────────────────────────── -->
  <section class="bg-white px-6 py-16 lg:px-8">
    <div class="mx-auto max-w-4xl">
      <div class="prose prose-slate prose-lg max-w-none
        prose-p:text-slate-600 prose-p:leading-relaxed
        prose-li:text-slate-600 prose-li:leading-relaxed
        prose-strong:text-slate-900 prose-strong:font-bold
        prose-a:text-green-700 prose-a:font-medium
        prose-blockquote:not-italic prose-blockquote:border-l-4 prose-blockquote:border-green-500
        prose-blockquote:bg-green-50 prose-blockquote:rounded-r-xl prose-blockquote:px-6 prose-blockquote:py-4
        prose-blockquote:text-green-900 prose-blockquote:font-medium
        prose-hr:border-slate-200">
        {{ partial "brand-highlight.html" (printf "%s" .Content) }}
      </div>
    </div>
  </section>

{{ end }}