Mobile responsiveness pass — buy / recover / thank-you

The recurring-subs work just added new tier-card content (cadence
line + trial banner + /mo suffix), so a quick pass on the three
buyer-facing pages was timely. Targeted, CSS-only changes.

Buy page (`/buy/<slug>`):
- h1 uses clamp(28px, 7vw, 42px) so it scales smoothly from phones
  to desktop without cliff-edge breakpoints. The fixed 42px was
  cramping 360-380px viewports.
- New @media (max-width:480px) breakpoint tightens the outer rhythm:
  topbar padding, wrap margin, cert padding, price size, tier-card
  padding, etc. The desktop 48px outer + 32px cert padding ate too
  much of a small viewport.
- Form input font-size pinned to 16px on mobile so iOS Safari
  doesn't auto-zoom when the buyer taps the email or discount field.
  (iOS zooms on any <16px input, which interrupts the buy flow.)
- Tier picker already had a 560px breakpoint dropping to 1-column;
  unchanged.

Recovery page (`/recover`):
- Default input/button font-size raised to 16px (iOS zoom fix).
- New @media (max-width:480px) breakpoint reduces outer body
  padding (48px → 24px) and main padding (32px → 22px), tightens
  h1 + label, and bumps button padding for thumb-friendly tap
  targets.

Thank-you page (`/thank-you`):
- Adds a @media (max-width:480px) block — previously it had zero
  breakpoints. Mirrors the buy-page pattern: tighter topbar, wrap
  margin, card padding, h1 fluid scaling, lede + footer sizing.

Admin UI is operator-side and not addressed in this pass. Could be
revisited if operators report mobile pain points; for now the
buyer-facing surface is the priority because that's where buyers
actually arrive on phones.

licensing-service/src/api/buy_page.rs

@@ -186,7 +186,11 @@ body {{
 }}
 .eyebrow::before {{ content:''; display:inline-block; width:28px; height:1px; background:var(--gold-500); }}
 h1 {{
-  font-family:var(--font-display); font-weight:500; font-size:42px;
+  font-family:var(--font-display); font-weight:500;
+  /* Fluid type — scales smoothly from ~28px on phones to 42px on
+     desktop without an extra breakpoint. min/max guard the
+     edges so it never gets too small or too large. */
+  font-size:clamp(28px, 7vw, 42px);
   line-height:1.05; letter-spacing:-0.022em; color:var(--navy-950);
   margin:0 0 12px;
 }}
@@ -250,6 +254,24 @@ h1 {{
 @media (max-width:560px) {{
   .tiers-2, .tiers-3, .tiers-4 {{ grid-template-columns:1fr; }}
 }}
+/* Phone-sized viewports: tighten outer rhythm so the cert + form
+   fit without a long preamble of whitespace. The desktop layout
+   has 48px top margin and 32px cert padding, both of which feel
+   wasteful on a 360-390px wide screen. */
+@media (max-width:480px) {{
+  .topbar {{ padding:12px 16px; }}
+  .topbar .inner {{ font-size:13px; letter-spacing:0.22em; gap:8px; }}
+  .topbar .operator {{ font-size:11px; }}
+  .wrap {{ margin:24px auto; padding:0 16px; }}
+  .cert {{ padding:24px 22px 22px; }}
+  .price {{ font-size:30px; }}
+  .description {{ font-size:15px; margin:0 0 24px; }}
+  .tier {{ padding:18px 16px; }}
+  .tier.selected {{ padding:17px 15px; }}
+  .tier-name {{ font-size:17px; }}
+  .tier-price {{ font-size:24px; }}
+  .field input {{ font-size:16px; }}  /* prevent iOS zoom-on-focus */
+}}
 .tier {{
   position:relative;
   background:var(--cream-50); border:1px solid var(--border-1);

licensing-service/src/api/mod.rs

@@ -660,6 +660,18 @@ footer.kfooter {{
 }}
 footer.kfooter a {{ color:var(--ink-500); text-decoration:none; }}
 footer.kfooter a:hover {{ color:var(--navy-900); }}
+/* Mobile breakpoint — desktop-rhythm padding crowds 360-390px screens. */
+@media (max-width:480px) {{
+  .topbar {{ padding:12px 16px; }}
+  .topbar .inner {{ font-size:13px; letter-spacing:0.22em; gap:8px; }}
+  .topbar .operator {{ font-size:11px; }}
+  .wrap {{ margin:24px auto; padding:0 16px; }}
+  h1 {{ font-size:clamp(26px, 7vw, 38px); }}
+  .lede {{ font-size:15px; margin:0 0 22px; }}
+  .pending-card, .license-success, .error-card {{ padding:22px 20px 20px; }}
+  .pending-card h2 {{ font-size:20px; }}
+  footer.kfooter {{ margin-top:32px; padding:14px; }}
+}}
 </style>
 </head>
 <body>

licensing-service/src/api/recover.rs

@@ -191,11 +191,13 @@ const RECOVER_PAGE_HTML: &str = r##"<!DOCTYPE html>
   h1 { margin: 0 0 8px; font-family: "Archivo", Georgia, serif; font-weight: 600; font-size: 24px; }
   p.intro { margin: 0 0 24px; color: #5a6178; line-height: 1.5; }
   label { display: block; font-size: 14px; font-weight: 600; margin: 16px 0 6px; }
+  /* font-size: 16px on inputs prevents iOS Safari from zooming in
+     when the user taps a field (it auto-zooms for anything <16px). */
   input { width: 100%; padding: 10px 12px; box-sizing: border-box;
-          border: 1px solid #c5b994; border-radius: 6px; font-size: 15px;
+          border: 1px solid #c5b994; border-radius: 6px; font-size: 16px;
           font-family: "JetBrains Mono", Menlo, monospace; }
   button { margin-top: 20px; width: 100%; padding: 12px; background: #1a2238;
-           color: #f6f1e7; border: 0; border-radius: 6px; font-size: 15px;
+           color: #f6f1e7; border: 0; border-radius: 6px; font-size: 16px;
            font-weight: 600; cursor: pointer; }
   button:disabled { opacity: 0.6; cursor: wait; }
   pre { margin: 16px 0 0; padding: 12px; background: #1a2238; color: #f6f1e7;
@@ -203,6 +205,15 @@ const RECOVER_PAGE_HTML: &str = r##"<!DOCTYPE html>
         white-space: pre-wrap; }
   .err { color: #b03020; margin-top: 12px; font-size: 14px; }
   .ok { color: #1a6b3a; margin-top: 12px; font-size: 14px; font-weight: 600; }
+  /* Tighten on narrow phones — the desktop 48px outer padding +
+     32px card padding eats the viewport on 360px screens. */
+  @media (max-width: 480px) {
+    body { padding: 24px 12px; }
+    main { padding: 22px 18px; border-radius: 10px; }
+    h1 { font-size: 21px; }
+    label { font-size: 13px; }
+    button { padding: 14px; }
+  }
 </style>
 </head>
 <body>