Fix low-contrast checkout borders, and a Tablet-sizing regression in Hero/About

- Checkout: the 4 step cards' border-border and CheckoutSteps' connector
  lines/upcoming-circle borders were nearly the same luminance as the
  page's own bg-bg-base background, barely visible. Darker (#c4b8a0),
  scoped to just these spots rather than the shared border-border token.
- Hero.tsx: fixes a mistake from the last Tablet pass — moving the CTA/
  subtitle/icon/social-proof size overrides from lg: to md: (to match the
  grid breakpoint move) actually removed their smaller sizing from the
  whole Tablet range, recreating the exact 3-line-wrap problem the lg:
  exception used to prevent. Reverted those specific overrides back to
  lg: (grid structure stays at md:), and added a smaller heading size
  (text-h1) below lg: too — text-display's 44px floor doesn't fit the
  ~283-320px Tablet column any better than the CTA did.
- About.tsx: the quote/divider/bio row and its divider orientation also
  pushed from md: to lg: — still too tight for the Tablet column even
  after the text/photo ratio swap from the previous pass.

app/components/About.tsx

@@ -26,8 +26,13 @@ export function About() {
         </p>
 
         {/* Quote row: script quote / divider / author bio — side-by-side
-            from md+, stacked with a horizontal divider below md */}
-        <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-6 md:gap-0 w-full">
+            from lg: (was md:) — even with the text column's wider Tablet
+            share above, quote + divider + the whitespace-nowrap bio ("Gründer
+            von einfach-produktiv.") together still needed more room than
+            Tablet's ~384px column has. Stacked with a horizontal divider
+            through the whole Tablet range instead, side-by-side (vertical
+            divider) only once there's real room at lg:. */}
+        <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-6 lg:gap-0 w-full">
 
           {/* Caveat script text with signature positioned below */}
           <div className="relative flex-1" style={{ minHeight: "8rem" }}>
@@ -58,12 +63,12 @@ export function About() {
             </div>
           </div>
 
-          {/* Divider — horizontal full-width line below md, vertical
-              gold line beside the author bio from md+ */}
-          <div className="bg-brand w-full h-px md:w-[2px] md:h-24 md:mx-6 shrink-0" />
+          {/* Divider — horizontal full-width line below lg:, vertical
+              gold line beside the author bio from lg: */}
+          <div className="bg-brand w-full h-px lg:w-[2px] lg:h-24 lg:mx-6 shrink-0" />
 
           <div
-            className="text-bg-white font-normal whitespace-nowrap md:shrink-0"
+            className="text-bg-white font-normal whitespace-nowrap lg:shrink-0"
             style={{ fontSize: "1rem", lineHeight: "1.5rem" }}
           >
             <p>Björn.</p>