Add featured-post flag, align tool-page connector arrows, misc blog polish

- Posts collection: new "featured" checkbox (Payload) — /blog now prefers
  a manually-featured post over just the most recent one. Query sorts by
  "-featured,-publishedAt" so multiple accidentally-featured posts
  resolve deterministically (most recent among them wins) instead of
  erroring or being ambiguous.
- challenge/page.tsx: step-connector arrow now uses the same
  /icon-arrow-connector.svg asset as todo-cards/newsletter's HowItWorks,
  replacing its own hand-drawn inline SVG.
- todo-cards & newsletter HowItWorks: connector arrows now vertically
  centered on their icon (md:mt-[1.625rem]), matching Challenge's
  margin-based centering technique instead of sitting flush at the row's
  top edge.
- Blog overview: featured card overlaps the header slightly (-mt-8) per
  Figma-inspired refinement, and now also shows the publish date in its
  meta row (previously only the list items did).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

app/todo-cards/components/HowItWorks.tsx

@@ -68,7 +68,11 @@ export function HowItWorks() {
               <p className="text-body-sm text-text-primary text-center">{step.desc}</p>
             </RevealItem>
             {i < steps.length - 1 && (
-              <div className="flex items-center justify-center shrink-0">
+              // md:mt-[1.625rem] (26px) centers the arrow on the h-16
+              // (64px) icon above it — (64 - arrow's own 12px height) / 2
+              // — same margin-based centering technique as Challenge's
+              // step connector, not just the same icon asset.
+              <div className="flex items-center justify-center shrink-0 md:mt-[1.625rem]">
                 <img
                   alt=""
                   src="/icon-arrow-connector.svg"