Refine sharing and cookie consent button styles

src/App.css

@@ -458,6 +458,25 @@
   padding: 0;
 }
 
+.share-show-wrap {
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.45rem;
+}
+
+.btn-share-show {
+  width: fit-content;
+}
+
+.share-feedback {
+  margin: 0;
+  font-family: 'Barlow Condensed', sans-serif;
+  color: #cdb483;
+  font-size: 0.9rem;
+}
+
 .qr-code-wrap {
   text-align: center;
   flex-shrink: 0;
@@ -1324,8 +1343,22 @@
 
 .consent-actions .btn-primary,
 .consent-actions .btn-secondary {
-  font-size: 0.85rem;
-  padding: 0.55rem 1rem;
+  font-size: 1rem;
+  padding: 0.75rem 1.4rem;
+  min-width: 140px;
+  justify-content: center;
+}
+
+.consent-actions .btn-secondary {
+  color: #c8860a;
+  border-color: rgba(200, 134, 10, 0.55);
+  background: transparent;
+}
+
+.consent-actions .btn-secondary:hover {
+  color: #0a0a0a;
+  background: #c8860a;
+  border-color: #c8860a;
 }
 
 .admin-form {

src/App.tsx

@@ -240,6 +240,43 @@ function AnalyticsConsentBanner() {
   )
 }
 
+function ShareShowButton() {
+  const [feedback, setFeedback] = useState('')
+
+  async function handleShare() {
+    const shareUrl = window.location.origin
+    const shareTitle = 'Verse by Verse with Nate'
+    const shareText = 'Check out Verse by Verse with Nate.'
+
+    try {
+      if (navigator.share) {
+        await navigator.share({ title: shareTitle, text: shareText, url: shareUrl })
+        setFeedback('Shared successfully.')
+        return
+      }
+
+      if (navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(shareUrl)
+        setFeedback('Link copied. Share it with a friend.')
+        return
+      }
+
+      setFeedback(`Copy this link: ${shareUrl}`)
+    } catch {
+      setFeedback('Share canceled.')
+    }
+  }
+
+  return (
+    <div className="share-show-wrap">
+      <button type="button" className="btn-primary btn-share-show" onClick={handleShare}>
+        Share the Show
+      </button>
+      {feedback && <p className="share-feedback">{feedback}</p>}
+    </div>
+  )
+}
+
 function LandingPage({ content }: { content: SiteContent }) {
   return (
     <div className="site">
@@ -446,6 +483,7 @@ function LandingPage({ content }: { content: SiteContent }) {
             >
               creators.spotify.com/pod/profile/nmemmert
             </a>
+            <ShareShowButton />
           </div>
           <div className="qr-code-wrap">
             <div className="qr-frame">