Redesign Q&A for mobile and upgrade completion certificate

- Full mobile redesign of Q&A: edge-to-edge cards, full-width layout,
  wrapping action buttons, hidden sidebar, proper touch targets, and
  fixed double-padding from thanks-page/thanks-card wrapper
- Fancy certificate redesign: double gold border frame, corner ornaments,
  ornamental rules with diamond dividers, decorative seal, gold glow,
  and updated issuer to "Verse by Verse with Nate"

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/App.tsx

@@ -2097,18 +2097,56 @@ function PublicCertificatePage() {
 
   return (
     <main className="thanks-page public-cert-page" aria-label="Certificate of Completion">
-      <div className="thanks-card public-cert-card">
-        <p className="eyebrow">Verse by Verse with Nate</p>
-        <h1 className="public-cert-title">Certificate of Completion</h1>
-        <div className="public-cert-divider" />
-        <p className="public-cert-label">This certifies that</p>
-        <p className="public-cert-name">{cert.displayName}</p>
-        <p className="public-cert-label">has successfully completed</p>
-        <p className="public-cert-study">{cert.studyTitle}</p>
-        <p className="public-cert-date">
-          Awarded on {new Date(cert.issuedAt).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
-        </p>
-        <Link to="/" className="btn-primary" style={{ marginTop: '2rem' }}>Visit Verse by Verse with Nate</Link>
+      <div className="public-cert-card">
+        {/* Corner ornaments */}
+        <span className="cert-corner cert-corner--tl" aria-hidden="true">✦</span>
+        <span className="cert-corner cert-corner--tr" aria-hidden="true">✦</span>
+        <span className="cert-corner cert-corner--bl" aria-hidden="true">✦</span>
+        <span className="cert-corner cert-corner--br" aria-hidden="true">✦</span>
+
+        <div className="cert-inner">
+          <p className="cert-issuer">✦ &nbsp; Verse by Verse with Nate &nbsp; ✦</p>
+
+          <div className="cert-ornament-rule">
+            <span className="cert-rule-line" />
+            <span className="cert-rule-diamond">◆</span>
+            <span className="cert-rule-line" />
+          </div>
+
+          <h1 className="cert-title">Certificate<br />of Completion</h1>
+
+          <div className="cert-ornament-rule cert-ornament-rule--sm">
+            <span className="cert-rule-line" />
+            <span className="cert-rule-diamond">◆</span>
+            <span className="cert-rule-line" />
+          </div>
+
+          <p className="cert-presented">Presented to</p>
+          <p className="cert-name">{cert.displayName}</p>
+
+          <p className="cert-body-text">
+            in recognition of faithful study and completion of
+          </p>
+          <p className="cert-study">{cert.studyTitle}</p>
+
+          <div className="cert-seal" aria-hidden="true">
+            <span className="cert-seal-ring">
+              <span className="cert-seal-inner">✦</span>
+            </span>
+          </div>
+
+          <div className="cert-ornament-rule cert-ornament-rule--sm">
+            <span className="cert-rule-line" />
+            <span className="cert-rule-diamond">◆</span>
+            <span className="cert-rule-line" />
+          </div>
+
+          <p className="cert-date">
+            Awarded on {new Date(cert.issuedAt).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
+          </p>
+
+          <Link to="/" className="cert-back-link">Visit Verse by Verse with Nate →</Link>
+        </div>
       </div>
     </main>
   )