feat(marketing-site): American Dream cover band + narrative weave

- Cover: publisher-style belly band across the lower book cover using a
  compressed banner (2.2MB screenshot -> 60KB WebP, resized to display
  needs), cropped via a width-locked <img> + percentage offset so the
  wordmark stays legible rather than getting zoomed/cropped sideways.
  Compass + wordmark compacted into a row to make room.
- Copy: the theme woven through Field Notes, Contents, the Founding
  Sponsor tier, and one direct FAQ entry -- mostly oblique, since the
  cover already states it explicitly. Hero/Recipe/Capture/Footer left
  untouched on purpose.

marketing-site/components/Book3D.jsx

@@ -22,12 +22,19 @@ export default function Book3D() {
           </h3>
           <span className="book3d__line" />
           <span className="book3d__sub">Tested workflows you can actually run</span>
-          <svg className="book3d__mark" viewBox="0 0 40 40" fill="none">
+          <div className="book3d__foot">
-            <circle cx="20" cy="20" r="17.5" stroke="#efe9db" strokeWidth="1" opacity="0.7" />
+            <svg className="book3d__mark" viewBox="0 0 40 40" fill="none">
-            <path d="M20 5 L22.6 20 L20 35 L17.4 20 Z" fill="#efe9db" />
+              <circle cx="20" cy="20" r="17.5" stroke="#efe9db" strokeWidth="1" opacity="0.7" />
-            <path d="M5 20 L20 17.4 L35 20 L20 22.6 Z" fill="#efe9db" opacity="0.55" />
+              <path d="M20 5 L22.6 20 L20 35 L17.4 20 Z" fill="#efe9db" />
-          </svg>
+              <path d="M5 20 L20 17.4 L35 20 L20 22.6 Z" fill="#efe9db" opacity="0.55" />
-          <span className="book3d__brand">AIBook.fun</span>
+            </svg>
+            <span className="book3d__brand">AIBook.fun</span>
+          </div>
+          {/* Belly band — the classic publisher's wraparound strip for a themed
+              tie-in, rather than redesigning the whole cover around it. */}
+          <div className="book3d__band">
+            <img src="/american-dream-banner.webp" alt="" />
+          </div>
         </div>
       </div>
     </div>

marketing-site/components/Contents.jsx

@@ -12,7 +12,7 @@ export default function Contents() {
     <section className="section contents" id="contents">
       <div className="wrap">
         <span className="spec reveal">The founding library</span>
-        <h2 className="reveal">Six practices. Written by people who do the work.</h2>
+        <h2 className="reveal">Six practices, written by people who built their careers on them.</h2>
         <div className="toc reveal">
           {ITEMS.map((x) => (
             <a href="#get" key={x.num}>

marketing-site/components/FAQ.jsx

@@ -20,6 +20,10 @@ const QA = [
     q: "Why subscribe instead of buy once?",
     a: "Because a static AI book is out of date in months. The subscription is what keeps every workflow current — and it’s what funds the practitioners keeping them that way.",
   },
+  {
+    q: "Why frame this around the American Dream?",
+    a: "Because for most of the people writing and reading this guide, real fluency with these tools isn’t a slogan — it’s a practical ladder. Nobody in this book inherited their edge; they built it, one real skill at a time. We think this is the next one worth building.",
+  },
 ];
 
 export default function FAQ() {

marketing-site/components/FieldNotes.jsx

@@ -2,12 +2,12 @@ const NOTES = [
   {
     n: "01 / Stays current",
     h: "A subscription, not a static book",
-    p: "AI moves too fast for a book you buy once. Each annual edition is refreshed so the workflows still work when you open them.",
+    p: "AI moves too fast for a book you buy once. Each annual edition is refreshed so the ground you gain here doesn’t erode the moment you look away.",
   },
   {
     n: "02 / Authored, then open",
     h: "Written by practitioners first",
-    p: "The first edition is seeded by co-authors — a real founding library, not an empty shelf. Open, paid contribution opens once it’s worth browsing.",
+    p: "The first edition is seeded by co-authors — a real founding library, not an empty shelf. Open, paid contribution opens once it’s worth browsing, so the people who build it get to own a piece of it.",
   },
   {
     n: "03 / Responsible by design",

marketing-site/components/Letter.jsx

@@ -7,8 +7,9 @@ export default function Letter() {
           Most AI advice is either hype or theory — and neither survives contact with real
           work. We’re writing the guide we wish we’d had: workflows that <em>actually run</em>,
           with the <span className="mark">guardrails built in</span>, kept honest by the people
-          who use them every day. Fund the first edition, and you don’t just get the book — you
+          who use them every day. For a lot of us, mastering these tools isn’t optional
-          help decide what goes in it.
+          anymore — it’s how you build the life you’re working toward. Fund the first edition,
+          and you don’t just get the book — you help decide what goes in it.
         </p>
         <div className="sign reveal">
           <span className="scrawl">The co-authors</span>

marketing-site/components/Tiers.jsx

@@ -40,7 +40,7 @@ export default function Tiers() {
             <div className="t-unit">limited · final terms at launch</div>
             <div className="t-desc">
               A named acknowledgment in the guide, a private cohort seat, and a hand in shaping
-              the first edition.
+              the first edition — the ground floor of something you helped build.
             </div>
           </div>
         </div>

marketing-site/styles/globals.css

@@ -191,7 +191,7 @@ h1, h2, h3 { text-wrap: balance; margin: 0; }
 .hero-visual { display: flex; justify-content: center; order: 2; }  /* book on the right */
 .hero-copy { min-width: 0; order: 1; }                              /* text on the left */
 
-.book3d { --bw: 300px; --bh: 420px; --bt: 54px; position: relative; perspective: 2000px; flex: none; padding: 6px 0 40px; }
+.book3d { --bw: 300px; --bh: 420px; --bt: 54px; --band-h: 58px; position: relative; perspective: 2000px; flex: none; padding: 6px 0 40px; }
 .book3d__inner {
   position: relative; width: var(--bw); height: var(--bh); margin: 0 auto;
   transform-style: preserve-3d; transform: rotateX(7deg) rotateY(-34deg);
@@ -208,7 +208,7 @@ h1, h2, h3 { text-wrap: balance; margin: 0; }
   transform: translateZ(calc(var(--bt) / 2)); border-radius: 3px 8px 8px 3px; overflow: hidden;
   background: linear-gradient(125deg, #23745f, #1a5748 48%, #123f34);
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 8px 0 16px -8px rgba(0, 0, 0, 0.5), 0 32px 46px -22px rgba(18, 63, 52, 0.55);
-  padding: 32px 27px 27px; display: flex; flex-direction: column;
+  padding: 32px 27px calc(var(--band-h) * 1.48); display: flex; flex-direction: column;
 }
 .book3d__back { transform: rotateY(180deg) translateZ(calc(var(--bt) / 2)); border-radius: 8px 3px 3px 8px; background: #0f3b30; }
 .book3d__pages {
@@ -235,8 +235,21 @@ h1, h2, h3 { text-wrap: balance; margin: 0; }
 .book3d__title { font-family: var(--font-display); font-weight: 600; font-size: 2.25rem; line-height: 1.02; letter-spacing: -0.02em; color: #f3eee2; margin-top: 16px; }
 .book3d__line { width: 34px; height: 2px; background: rgba(239, 233, 219, 0.5); margin: 15px 0; }
 .book3d__sub { font-family: var(--font-body); font-size: 13px; color: rgba(239, 233, 219, 0.68); line-height: 1.45; max-width: 16ch; }
-.book3d__mark { width: 44px; height: 44px; margin-top: auto; }
+.book3d__foot { display: flex; align-items: center; gap: 10px; margin-top: auto; }
-.book3d__brand { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: rgba(239, 233, 219, 0.85); margin-top: 12px; }
+.book3d__mark { width: 30px; height: 30px; flex: none; }
+/* Belly band: a promotional strip wrapped across the lower cover, publisher-
+   style, rather than redesigning the whole face around the source graphic.
+   The <img> is width-locked to the band and shifted up so the crop stays
+   full-width (legible "AMERICAN" wordmark) and only trims top/bottom. */
+.book3d__band {
+  position: absolute; left: 0; right: 0; bottom: calc(var(--band-h) * 0.31);
+  height: var(--band-h); overflow: hidden;
+  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.1) inset, 0 3px 10px rgba(0, 0, 0, 0.3);
+}
+.book3d__band img {
+  position: absolute; left: 0; top: -78%; width: 100%; height: auto; display: block;
+}
+.book3d__brand { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: rgba(239, 233, 219, 0.85); }
 .book3d::after {
   content: ""; position: absolute; left: 50%; bottom: 6px; width: 60%; height: 24px; transform: translateX(-50%);
   background: radial-gradient(ellipse, rgba(18, 60, 50, 0.3), transparent 70%); filter: blur(7px); z-index: -1;
@@ -245,9 +258,9 @@ h1, h2, h3 { text-wrap: balance; margin: 0; }
   .hero-grid { grid-template-columns: 1fr; gap: 44px; }
   .hero-visual { order: 2; }
   .hero-copy { order: 1; }
-  .book3d { --bw: 256px; --bh: 358px; --bt: 48px; }
+  .book3d { --bw: 256px; --bh: 358px; --bt: 48px; --band-h: 50px; }
 }
-@media (max-width: 420px) { .book3d { --bw: 210px; --bh: 294px; --bt: 40px; } }
+@media (max-width: 420px) { .book3d { --bw: 210px; --bh: 294px; --bt: 40px; --band-h: 40px; } }
 @media (prefers-reduced-motion: reduce) { .book3d__inner { animation: none; } }
 
 /* ============ FIELD NOTES (even gutters, aligned to container edges) ============ */