diff --git a/apps/docs/src/app/page.module.css b/apps/docs/src/app/page.module.css
index 356110a1..487157b2 100644
--- a/apps/docs/src/app/page.module.css
+++ b/apps/docs/src/app/page.module.css
@@ -10,13 +10,14 @@
   padding-block: var(--spacing-16) var(--spacing-8);
 }
 
-/* The mock caps the intro at 1280px, narrower than the 1664px the hero and
-   the favorites span, with the heading's 768px on the left and the
-   description and button bottom-aligned beside it. */
+/* The mock caps the intro at 1440px, as it does the favorites and the
+   features, narrower than the 1664px the hero spans, with the heading's
+   768px on the left and the description and button bottom-aligned beside
+   it. */
 .introRow {
   display: flex;
   align-items: flex-end;
-  max-width: var(--container-7xl);
+  max-width: var(--container-8xl);
   margin-inline: auto;
 }
 
@@ -33,7 +34,9 @@
 }
 
 /* The description takes what the heading leaves, 16px in from it and 16px
-   from the button, and the button sits on the description's last line. */
+   from the button, and the button sits on the description's last line. At
+   the full 1440px that leaves the description 523px, which wraps it to two
+   lines with the break between "Shading" and "Language", as in the mock. */
 .lede {
   display: flex;
   flex: 1;
diff --git a/apps/docs/src/components/favorites/favorites-list.tsx b/apps/docs/src/components/favorites/favorites-list.tsx
index ff8ef99a..60decbbf 100644
--- a/apps/docs/src/components/favorites/favorites-list.tsx
+++ b/apps/docs/src/components/favorites/favorites-list.tsx
@@ -220,9 +220,15 @@ function LiveScene({ slug, paused }: { slug: FavoriteSlug; paused: boolean }) {
   );
 }
 
-// The card window's size at the site container's full width, in CSS pixels.
-// Every favorite renders at this size, and scripts/build-posters.sh captures
-// every favorite's card poster at it.
+// The size every favorite renders at, in CSS pixels, and the size
+// scripts/build-posters.sh captures every favorite's card poster at. It is
+// the card window's size on a 1664px grid, 17.5% larger than the 320 by 233
+// window at the grid's full 1440px, so useCoverScale scales the scene down
+// to cover the window, as it does at every narrower width. Larger draws
+// more pixels than the window shows, and shrinks patterns sized in CSS
+// pixels, such as Dither's and LED Wall's cells. Smaller than the window
+// makes useCoverScale scale the scene up, which blurs it. SHA-220 sets it
+// to the window's size.
 const SCENE_SIZE = { width: 376, height: 275 };
 
 /**
diff --git a/apps/docs/src/components/favorites/favorites-reveal.tsx b/apps/docs/src/components/favorites/favorites-reveal.tsx
index e1e19009..afe3cf65 100644
--- a/apps/docs/src/components/favorites/favorites-reveal.tsx
+++ b/apps/docs/src/components/favorites/favorites-reveal.tsx
@@ -28,7 +28,7 @@ export function FavoritesReveal({
   className,
   children,
 }: {
-  className: string;
+  className?: string;
   children: ReactNode;
 }) {
   const gridRef = useRef<HTMLDivElement>(null);
diff --git a/apps/docs/src/components/favorites/favorites.module.css b/apps/docs/src/components/favorites/favorites.module.css
index 86af21c3..99aedea2 100644
--- a/apps/docs/src/components/favorites/favorites.module.css
+++ b/apps/docs/src/components/favorites/favorites.module.css
@@ -1,10 +1,12 @@
 /* The favorites section, after the Figma mocks: one grid holding the
    heading and seven cards, four across at full width, with the heading in
-   the first cell so the cards fill the two rows evenly. 64px of space sits
-   above it, 32 from this section and 32 from the hero's. The phone mock
-   tightens that to 40px, 16 here and 24 under the hero. */
+   the first cell so the cards fill the two rows evenly. 96px of space sits
+   above it, 48 from this section and 48 from the hero's, and the section's
+   48px below meets the features section's 48px above to make 96 again.
+   The phone mock tightens the space above to 40px, 16 here and 24 under
+   the hero. */
 .section {
-  padding-block: var(--spacing-8);
+  padding-block: var(--spacing-12);
 }
 
 @container site (width < 40rem) {
@@ -14,14 +16,18 @@
 }
 
 /* ---- The grid ----
-   Four columns at full width, two from 64rem of the site container down,
-   and one on a phone under 40rem. Eight cells divide evenly into four or
-   two columns, so no row is left with a gap. The one column matches the
-   phone mock. The two-column band has no mock. */
+   The mock caps it at 1440px, the features section's width, so the two
+   sections' columns line up at every width. Four columns at full width,
+   two from 64rem of the site container down, and one on a phone under
+   40rem. Eight cells divide evenly into four or two columns, so no row is
+   left with a gap. The one column matches the phone mock. The two-column
+   band has no mock. */
 .grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: var(--spacing-4);
+  max-width: var(--container-8xl);
+  margin-inline: auto;
 }
 
 @container site (width < 64rem) {
@@ -132,10 +138,11 @@
    (card-tab.tsx), placed as in the mock: on the window's right edge, its
    foot 16px above the window's bottom, clear of the 12px corner. Its size
    is the outline's, CARD_TAB_PATH's 24 by 168 CSS pixels, on a window at
-   least 200px tall. A shorter window would clip the strip's head, such as
-   the 143px window each of four columns gets at a 1024px viewport. There
-   the strip shortens to keep 16px clear at the top, as at the foot, and
-   the outline stretches to fit (card-tab.tsx). It comes after the
+   least 200px tall. Four columns give a 233px window at the grid's full
+   1440px, but under 1328px of site the window drops below 200px and would
+   clip the strip's head, such as the 143px window at a 1024px viewport.
+   There the strip shortens to keep 16px clear at the top, as at the foot,
+   and the outline stretches to fit (card-tab.tsx). It comes after the
    poster and the scene in the window, so it paints over both. Its slide
    and its name's fade are Motion's, set inline from card-tab.tsx, and the
    window's overflow clips the strip while it is out past the edge.
diff --git a/apps/docs/src/components/favorites/favorites.tsx b/apps/docs/src/components/favorites/favorites.tsx
index 33e9b8de..f1bcaaad 100644
--- a/apps/docs/src/components/favorites/favorites.tsx
+++ b/apps/docs/src/components/favorites/favorites.tsx
@@ -20,7 +20,7 @@ export function Favorites({ favorites }: { favorites: Favorite[] }) {
     // Out of the search index, like the components index: each card only
     // repeats a name its component page is already indexed under.
     <section className={`site-gutter ${styles.section}`} data-pagefind-ignore="all">
-      <FavoritesReveal className={`site-container ${styles.grid}`}>
+      <FavoritesReveal className={styles.grid}>
         <h2 className={styles.heading} id={headingId}>
           Add some fun to your website
         </h2>
diff --git a/apps/docs/src/components/features/features.module.css b/apps/docs/src/components/features/features.module.css
index 671d2f93..bb0e4adf 100644
--- a/apps/docs/src/components/features/features.module.css
+++ b/apps/docs/src/components/features/features.module.css
@@ -1,6 +1,6 @@
 /* The features section, after the Figma mock: the heading 40px over a grid
-   of four feature cards, in a 1440px container, narrower than the 1664px
-   the favorites span. The section's own 48px sits above and below it. */
+   of four feature cards, in a 1440px container, the width the favorites
+   span. The section's own 48px sits above and below it. */
 .section {
   padding-block: var(--spacing-12);
 }
@@ -24,10 +24,9 @@
 
 /* ---- The grid ----
    Four columns at full width, two from 64rem of the site container down,
-   and one on a phone under 40rem: the favorites' steps. Below 1504px of
-   site, where the 1440px cap and the two 32px gutters meet, both sections
-   fill the same width, so the cards sit under the favorites' columns. The
-   mock draws only the full width. */
+   and one on a phone under 40rem: the favorites' steps. Both sections
+   share the 1440px cap and the gap, so at every width the cards sit under
+   the favorites' columns. The mock draws only the full width. */
 .grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
diff --git a/apps/docs/src/components/home-footer/home-footer.module.css b/apps/docs/src/components/home-footer/home-footer.module.css
index 5e68884a..f449ea42 100644
--- a/apps/docs/src/components/home-footer/home-footer.module.css
+++ b/apps/docs/src/components/home-footer/home-footer.module.css
@@ -1,14 +1,16 @@
-/* The homepage footer, after the Figma mock: 32px around a container whose
-   own 32px on top and at the sides frame the wordmark. With the wordmark's
-   240px line, that makes the mock's 336px footer. */
+/* The homepage footer, after the Figma mock: 96px above a container whose
+   own 32px at the sides frame the wordmark, and 32px under the wordmark.
+   With the wordmark's 240px line, that makes the mock's 368px footer. The
+   features section's 48px below its grid and these 96px put 144px between
+   the grid and the wordmark. */
 .footer {
-  padding-block: var(--spacing-8);
+  padding-block: var(--spacing-24) var(--spacing-8);
 }
 
 .row {
   display: flex;
   justify-content: center;
-  padding: var(--spacing-8) var(--spacing-8) 0;
+  padding-inline: var(--spacing-8);
 }
 
 /* The mock sets the wordmark at 239.593px on its 1728px artboard, with the
diff --git a/apps/docs/src/components/home-hero/home-hero.module.css b/apps/docs/src/components/home-hero/home-hero.module.css
index c8ed5d88..24af4782 100644
--- a/apps/docs/src/components/home-hero/home-hero.module.css
+++ b/apps/docs/src/components/home-hero/home-hero.module.css
@@ -39,11 +39,11 @@
 
 /* ---- Hero ---- */
 
-/* 32px above and below the stage, the hero section's padding, which keeps
-   64px between the intro and the hero's frame, and 64px between the frame
-   and the favorites with their own 32px. */
+/* 32px above the stage and 48px below it, the hero section's padding,
+   which keeps 64px between the intro and the hero's frame, and 96px
+   between the frame and the favorites with their own 48px. */
 .hero {
-  padding-block: var(--spacing-8);
+  padding-block: var(--spacing-8) var(--spacing-12);
 }
 
 /* On a phone the intro's own 24px is the space above the hero, and 24px
diff --git a/scripts/build-posters.sh b/scripts/build-posters.sh
index 300df755..f7e02fef 100755
--- a/scripts/build-posters.sh
+++ b/scripts/build-posters.sh
@@ -122,8 +122,7 @@ $CLI \
   --height 696 \
   --background "#0b0f1a"
 
-# The homepage favorites render every live scene at the card window's size
-# at the site container's full width, 376 by 275 (SCENE_SIZE in
+# The homepage favorites render every live scene at 376 by 275 (SCENE_SIZE in
 # apps/docs/src/components/favorites/favorites-list.tsx), and scale it with
 # the card. Each favorite's card poster is captured at that size, over the
 # ground its scene sits on there, so the poster frames and crops the scene