fix: make mobile certificate preview smaller with breathing room

Adjust mobile wrapper scaling and spacing so the certificate reads as a contained preview, and add a subtle mobile note about downloading full-size.

Author: dotsystemsdevs

src/app/globals.css

@@ -601,7 +601,7 @@ a.subpage-inline-mail {
 
 @media (max-width: 640px) {
   /* Scale only the fixed canvas visually; layout stays pixel-locked. */
-  :root { --cert-ui-scale: clamp(0.26, calc((100vw - 72px) / 794), 0.40); }
+  :root { --cert-ui-scale: clamp(0.28, calc((100vw - 108px) / 794), 0.36); }
 }
 
 /* ── Mobile ── */
@@ -615,7 +615,7 @@ a.subpage-inline-mail {
   .certificate-scroll-zone {
     width: 100%;
     margin-left: 0;
-    padding: 0 8px;
+    padding: 8px 20px 0;
     box-sizing: border-box;
     overflow-x: hidden;
   }
@@ -625,6 +625,16 @@ a.subpage-inline-mail {
     margin: 0 auto !important;
   }
 
+  .cert-mobile-hint {
+    display: block;
+    margin: 0 0 14px;
+    text-align: center;
+    font-family: var(--font-dm), -apple-system, sans-serif;
+    font-size: 11px;
+    color: #7a7a7a;
+    letter-spacing: 0.02em;
+  }
+
   /* Hero: keep CTA above the fold on small screens */
   .page-hero { padding-bottom: 10px; }
   .page-hero-emoji { margin-bottom: 8px; }
@@ -683,6 +693,10 @@ a.subpage-inline-mail {
 
 }
 
+.cert-mobile-hint {
+  display: none;
+}
+
 @media print {
   @page { size: A4 portrait; margin: 12mm; }
   body::before, body::after { display: none !important; }

src/components/CertificateCard.tsx

@@ -296,6 +296,7 @@ export default function CertificateCard({ cert, onReset }: Props) {
           />
         </div>
       </div>
+      <p className="cert-mobile-hint">Preview scaled for mobile. Download for full-size version.</p>
 
       {/* Hidden fixed export source */}
       <div