Add visual styling for section headers on detail pages

Add .section-label CSS rule with bold text, accent-colored bottom border,
and consistent spacing. Convert 'How it works' and 'Related patterns'
from unstyled h2 to .section-label for consistency with 'Code Comparison',
'Why the modern way wins', and 'JDK Support' headers.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: brunoborges

site/styles.css

@@ -736,6 +736,18 @@ nav {
   color: var(--accent);
 }
 
+/* ---------- Section Labels (Detail Page) ---------- */
+.section-label {
+  font-size: 1.1rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: var(--text);
+  margin-bottom: 16px;
+  padding-bottom: 8px;
+  border-bottom: 2px solid var(--accent);
+  display: inline-block;
+}
+
 /* ---------- Code Comparison (Detail Page) ---------- */
 .compare-section {
   margin: 40px 0;
@@ -1016,12 +1028,6 @@ nav {
   margin: 40px 0;
 }
 
-.explanation h2 {
-  font-size: 1.3rem;
-  font-weight: 700;
-  margin-bottom: 12px;
-}
-
 .explanation p {
   font-size: 0.92rem;
   color: var(--text-muted);

templates/slug-template.html

@@ -173,12 +173,12 @@ <h1>{{title}}</h1>
     </section>
 
     <section class="explanation">
-      <h2>How it works</h2>
+      <div class="section-label">How it works</div>
       <p>{{explanation}}</p>
     </section>
 
     <section class="related">
-      <h2>Related patterns</h2>
+      <div class="section-label">Related patterns</div>
       <div class="related-grid">
 {{relatedCards}}
       </div>