Give the three tier cards one height

apps/web/src/components/landing/Landing.test.tsx

@@ -97,6 +97,24 @@ describe("the landing page", () => {
     expect(within(index as HTMLElement).getByText("23")).toBeInTheDocument();
   });
 
+  it("makes each tier card its own grid item", () => {
+    renderLanding();
+
+    const list = screen
+      .getByRole("heading", { name: /certainty is the product/i })
+      .closest("section")
+      ?.querySelector("ul");
+    expect(list).not.toBeNull();
+
+    // The heights cannot be asserted here -- jsdom has no layout. What can be
+    // asserted is the cause: a wrapper between the grid and the `li` makes the
+    // wrapper the grid item, so the card sizes to its own text instead of the
+    // row, and the three end up different heights. It is also invalid markup.
+    for (const child of Array.from((list as HTMLElement).children)) {
+      expect(child.tagName).toBe("LI");
+    }
+  });
+
   it("ships a canvas shot for each theme", () => {
     renderLanding();
 

apps/web/src/components/landing/Tiers.tsx

@@ -52,10 +52,15 @@ export function Tiers() {
       {/* Staggered in tier order, so the three arrive most certain first and
           the scale is read in the direction it means something. One gesture
           for the set rather than three cards each deciding for themselves --
-          the same treatment the coverage chips get. */}
+          the same treatment the coverage chips get.
+
+          `asChild` is load-bearing, not tidiness. Without it `Fades` wraps each
+          card in its own motion.div, which becomes the grid item -- the `li`
+          inside then sizes to its own text, so the three cards ended up three
+          different heights. It also put a div between `ul` and `li`. */}
       <ul className="grid gap-4 md:grid-cols-3">
         {animate ? (
-          <Fades inView inViewMargin="-64px" holdDelay={70}>
+          <Fades asChild inView inViewMargin="-64px" holdDelay={70}>
             {cards}
           </Fades>
         ) : (