improvement(docs): drop the under-label rule on the learn callout

A full-width rule under the small "What you will learn" label read as an
awkward heading underline and blurred into the inter-item dividers. The label
is now a quiet muted marker (matching the Chapters label and the TOC heading),
with dividers only between items — so it never competes with the bold item
titles or looks like an underlined heading.

Author: waleedlatif1

apps/docs/components/ui/what-you-will-learn.tsx

@@ -11,17 +11,20 @@ interface WhatYouWillLearnProps {
 }
 
 /**
- * "What you will learn" — a flat, divider-based callout matching the docs'
- * card-flattening language (transparent, no filled box, like the FAQ list),
- * with a small label at the app's panel-title scale rather than page-h2 scale.
+ * "What you will learn" — a flat callout matching the docs' flat/divider
+ * language. A quiet muted label (like the TOC heading) sits above the
+ * takeaways; dividers fall only between items, so the label reads as a marker
+ * rather than an underlined heading and never competes with the item titles.
  */
 export function WhatYouWillLearn({ items, className }: WhatYouWillLearnProps) {
   return (
     <div className={cn('not-prose', className)}>
-      <p className='mb-3 font-medium text-[var(--text-primary)] text-sm'>What you will learn</p>
-      <div className='border-[var(--border)] border-t'>
+      <p className='mb-3 font-medium text-[0.8125rem] text-[var(--text-muted)]'>
+        What you will learn
+      </p>
+      <div className='divide-y divide-[var(--border)]'>
         {items.map((item) => (
-          <div key={item.title} className='border-[var(--border)] border-b py-3.5'>
+          <div key={item.title} className='py-3.5 first:pt-0 last:pb-0'>
             <p className='mb-1 font-medium text-[var(--text-primary)] text-sm'>{item.title}</p>
             <p className='m-0 text-[var(--text-secondary)] text-sm leading-relaxed'>{item.body}</p>
           </div>