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/challenge/page.tsx

@@ -86,14 +86,6 @@ function LockIcon() {
   );
 }
 
-function ArrowRight() {
-  return (
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" className="text-[#ccc] shrink-0">
-      <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-    </svg>
-  );
-}
-
 const steps = [
   {
     icon: <IconEnvelope />,
@@ -294,8 +286,18 @@ export default function ChallengePage() {
                   </div>
                 </RevealItem>,
                 i < steps.length - 1 ? (
-                  <div key={`arrow-${i}`} className="hidden lg:flex items-center shrink-0 mt-5">
-                    <ArrowRight />
+                  // Same /icon-arrow-connector.svg asset and rotate-on-stack
+                  // pattern as todo-cards/newsletter's HowItWorks — this
+                  // used to be its own hand-drawn SVG arrow, inconsistent
+                  // with those two. Always visible (rotated 90° while
+                  // stacked below lg, this page's own structural
+                  // breakpoint) rather than hidden below lg like before.
+                  <div key={`arrow-${i}`} className="flex items-center justify-center shrink-0 lg:mt-5">
+                    <img
+                      alt=""
+                      src="/icon-arrow-connector.svg"
+                      className="w-6 h-6 rotate-90 lg:w-10 lg:h-3 lg:rotate-0"
+                    />
                   </div>
                 ) : null,
               ])}