diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index 548ef3b..dd577a9 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -130,7 +130,7 @@ export default function BlogPage() {
       {/* Hero */}
       <section className="py-12 sm:py-16 md:py-20">
         <div className="max-w-4xl mx-auto px-4 sm:px-6 text-center">
-          <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
+          <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "var(--font-fraunces)" }}>
             Blog & Resources
           </h1>
           <p className="text-lg sm:text-xl text-[#6b8f71]">
@@ -151,7 +151,7 @@ export default function BlogPage() {
                 <span className="inline-block w-fit px-3 py-1 bg-[#c97a3e]/10 text-[#c97a3e] text-sm font-medium rounded-full mb-4">
                   Featured
                 </span>
-                <h2 className="text-3xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
+                <h2 className="text-3xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "var(--font-fraunces)" }}>
                   Getting Started with Route Commerce
                 </h2>
                 <p className="text-[#666] mb-6">
@@ -234,7 +234,7 @@ export default function BlogPage() {
       {/* Newsletter */}
       <section className="py-20 bg-gradient-to-br from-[#1a4d2e] to-[#2d6a4f]">
         <div className="max-w-2xl mx-auto px-6 text-center">
-          <h2 className="text-3xl font-bold text-white mb-4" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
+          <h2 className="text-3xl font-bold text-white mb-4" style={{ fontFamily: "var(--font-fraunces)" }}>
             Stay in the Loop
           </h2>
           <p className="text-[#faf8f5]/80 mb-8">
diff --git a/src/app/brands/page.tsx b/src/app/brands/page.tsx
index 3f184cc..a563973 100644
--- a/src/app/brands/page.tsx
+++ b/src/app/brands/page.tsx
@@ -224,7 +224,7 @@ export default function BrandsPage() {
 
       <style jsx>{`
         .brands-page {
-          font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
+          font-family: var(--font-manrope);
           background: #ffffff;
           min-height: 100vh;
         }
diff --git a/src/app/changelog/page.tsx b/src/app/changelog/page.tsx
index 5fa18bd..34fbdba 100644
--- a/src/app/changelog/page.tsx
+++ b/src/app/changelog/page.tsx
@@ -132,7 +132,7 @@ export default function ChangelogPage() {
       <main className="max-w-4xl mx-auto px-6 py-16">
         {/* Hero */}
         <div className="text-center mb-16">
-          <h1 className="text-5xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
+          <h1 className="text-5xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "var(--font-fraunces)" }}>
             Changelog
           </h1>
           <p className="text-xl text-[#6b8f71] max-w-2xl mx-auto">
diff --git a/src/app/error.tsx b/src/app/error.tsx
index 8349ec6..c8d65a4 100644
--- a/src/app/error.tsx
+++ b/src/app/error.tsx
@@ -50,10 +50,7 @@ export default function ErrorPage({
 
         {error.message && (
           <details className="mt-6 text-left">
-            <summary
-              className="text-[10px] tracking-[0.18em] uppercase text-stone-500 hover:text-stone-700 cursor-pointer transition-colors"
-              style={{ fontFamily: "var(--font-fragment-mono)" }}
-            >
+            <summary className="atelier-fineprint cursor-pointer hover:text-stone-900 transition-colors">
               Error details
             </summary>
             <div className="mt-3 rounded-lg border border-stone-200 bg-white/70 backdrop-blur-sm p-3.5 text-xs font-mono text-stone-700 break-words">
diff --git a/src/app/globals.css b/src/app/globals.css
index d177697..a47c1ee 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -228,6 +228,17 @@ select:-webkit-autofill:focus {
   @keyframes transition-shimmer {
     0%, 100% { transform: translateX(0); }
   }
+  /* Atelier modal + stagger animations also respect reduced-motion */
+  .atelier-enter,
+  .atelier-backdrop,
+  .atelier-stagger > *,
+  .atelier-cta .atelier-cta-shimmer {
+    animation: none !important;
+  }
+  .atelier-stagger > * {
+    opacity: 1 !important;
+    transform: none !important;
+  }
 }
 
 /* Light mode placeholder (used by storefront) */
@@ -1083,3 +1094,75 @@ select:-webkit-autofill:focus {
   color: #991B1B;
 }
 .atelier-error svg { flex-shrink: 0; margin-top: 1px; }
+
+/* ─── Polish utilities — "Atelier des Récoltes" additions ─────── */
+
+/* Tabular numerals for prices, quantities, dates */
+.atelier-numerals {
+  font-family: var(--font-fraunces);
+  font-variant-numeric: tabular-nums lining-nums;
+  letter-spacing: -0.015em;
+}
+
+/* Inline editorial pill — for tags, badges, status chips */
+.atelier-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px 4px 8px;
+  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(28, 25, 23, 0.08);
+  border-radius: 999px;
+  font-family: var(--font-fragment-mono);
+  font-size: 9px;
+  font-weight: 500;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: #1C1917;
+  white-space: nowrap;
+  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.atelier-pill:hover {
+  background: rgba(255, 255, 255, 0.95);
+  border-color: rgba(34, 78, 47, 0.25);
+}
+.atelier-pill .atelier-pill-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: #16A34A;
+  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18);
+}
+.atelier-pill.is-gold .atelier-pill-dot {
+  background: #CA8A04;
+  box-shadow: 0 0 0 2px rgba(202, 138, 4, 0.18);
+}
+.atelier-pill.is-muted .atelier-pill-dot {
+  background: #A8A29E;
+  box-shadow: none;
+}
+
+/* Refined focus ring for atelier inputs (replaces default browser ring) */
+.atelier-input:focus-visible {
+  outline: none;
+  box-shadow: 0 1px 0 0 #224E2F;
+}
+
+/* Small caps editorial small-text — for footnote, fine print */
+.atelier-fineprint {
+  font-family: var(--font-fragment-mono);
+  font-size: 10px;
+  font-weight: 400;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: #786B53;
+  line-height: 1.5;
+}
+
+/* Soft cream canvas (lighter than atelier-canvas) — for sub-pages */
+.atelier-canvas-soft {
+  background-color: #FDFBF6;
+  background-image:
+    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(180, 155, 100, 0.06) 0%, transparent 60%);
+  position: relative;
+}
diff --git a/src/app/login/LoginClient.tsx b/src/app/login/LoginClient.tsx
index 81b5ea8..b491336 100644
--- a/src/app/login/LoginClient.tsx
+++ b/src/app/login/LoginClient.tsx
@@ -218,7 +218,7 @@ export default function LoginClient({ error }: LoginClientProps) {
             </div>
           </div>
 
-          <p className="text-center text-[11px] text-stone-500 mt-6 tracking-wide" style={{ fontFamily: "var(--font-fragment-mono)" }}>
+          <p className="atelier-fineprint text-center mt-6">
             Protected by Neon Auth · Encrypted at rest
           </p>
         </div>
diff --git a/src/app/maintenance/page.tsx b/src/app/maintenance/page.tsx
index 063ad75..c24da0a 100644
--- a/src/app/maintenance/page.tsx
+++ b/src/app/maintenance/page.tsx
@@ -24,7 +24,7 @@ export default function MaintenancePage() {
         </div>
 
         {/* Heading */}
-        <h1 className="text-4xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
+        <h1 className="text-4xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "var(--font-fraunces)" }}>
           Under Maintenance
         </h1>
         <p className="text-lg text-[#6b8f71] mb-6">
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index eb258c2..b798b1e 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -70,9 +70,9 @@ export default function NotFound() {
           ))}
         </div>
 
-        <p className="text-center text-[11px] text-stone-500 mt-10 tracking-wide" style={{ fontFamily: "var(--font-fragment-mono)" }}>
+        <p className="atelier-fineprint text-center mt-10">
           Lost? Reach us at{" "}
-          <a href="mailto:support@routecommerce.com" className="text-[#14532D] hover:underline">
+          <a href="mailto:support@routecommerce.com" className="text-[#14532D] hover:underline normal-case tracking-normal">
             support@routecommerce.com
           </a>
         </p>
diff --git a/src/app/protected-example/page.tsx b/src/app/protected-example/page.tsx
index ceb6a81..9150ff8 100644
--- a/src/app/protected-example/page.tsx
+++ b/src/app/protected-example/page.tsx
@@ -51,7 +51,7 @@ export default async function ProtectedExamplePage() {
         <header>
           <h1
             className="text-3xl font-semibold tracking-tight text-stone-900"
-            style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}
+            style={{ fontFamily: "var(--font-fraunces)" }}
           >
             Protected example
           </h1>
diff --git a/src/app/roadmap/page.tsx b/src/app/roadmap/page.tsx
index eb74102..c2aa28e 100644
--- a/src/app/roadmap/page.tsx
+++ b/src/app/roadmap/page.tsx
@@ -79,7 +79,7 @@ export default function RoadmapPage() {
       {/* Hero */}
       <section className="bg-gradient-to-b from-white to-[#faf8f5] py-12 sm:py-16 md:py-20">
         <div className="max-w-4xl mx-auto px-4 sm:px-6 text-center">
-          <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
+          <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "var(--font-fraunces)" }}>
             Product Roadmap
           </h1>
           <p className="text-lg sm:text-xl text-[#6b8f71] max-w-2xl mx-auto">
@@ -189,7 +189,7 @@ export default function RoadmapPage() {
       <section id="suggest" className="py-16 bg-white border-t border-[#e5e5e5]">
         <div className="max-w-2xl mx-auto px-6">
           <div className="text-center mb-8">
-            <h2 className="text-3xl font-bold text-[#1a1a1a] mb-2" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
+            <h2 className="text-3xl font-bold text-[#1a1a1a] mb-2" style={{ fontFamily: "var(--font-fraunces)" }}>
               Suggest a Feature
             </h2>
             <p className="text-[#666]">Have an idea? We&apos;d love to hear it. Share your suggestion and vote on others.</p>
diff --git a/src/app/security/page.tsx b/src/app/security/page.tsx
index 93889f5..761851d 100644
--- a/src/app/security/page.tsx
+++ b/src/app/security/page.tsx
@@ -110,7 +110,7 @@ export default function SecurityPage() {
       {/* Hero */}
       <section className="py-20">
         <div className="max-w-4xl mx-auto px-6 text-center">
-          <h1 className="text-5xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
+          <h1 className="text-5xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "var(--font-fraunces)" }}>
             Your Data is Safe with Us
           </h1>
           <p className="text-xl text-[#6b8f71] max-w-2xl mx-auto">
@@ -122,7 +122,7 @@ export default function SecurityPage() {
       {/* Security Features */}
       <section className="py-16">
         <div className="max-w-6xl mx-auto px-6">
-          <h2 className="text-3xl font-bold text-[#1a1a1a] mb-12 text-center" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
+          <h2 className="text-3xl font-bold text-[#1a1a1a] mb-12 text-center" style={{ fontFamily: "var(--font-fraunces)" }}>
             Enterprise-Grade Security
           </h2>
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -144,7 +144,7 @@ export default function SecurityPage() {
         <div className="max-w-4xl mx-auto px-6">
           <div className="grid md:grid-cols-2 gap-12 items-center">
             <div>
-              <h2 className="text-3xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
+              <h2 className="text-3xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "var(--font-fraunces)" }}>
                 Built on Trusted Infrastructure
               </h2>
               <p className="text-[#666] mb-6">
@@ -219,7 +219,7 @@ export default function SecurityPage() {
       {/* Privacy Compliance */}
       <section className="py-16">
         <div className="max-w-4xl mx-auto px-6">
-          <h2 className="text-3xl font-bold text-[#1a1a1a] mb-8 text-center" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
+          <h2 className="text-3xl font-bold text-[#1a1a1a] mb-8 text-center" style={{ fontFamily: "var(--font-fraunces)" }}>
             Privacy Compliance
           </h2>
           <div className="grid md:grid-cols-2 gap-6">
@@ -242,7 +242,7 @@ export default function SecurityPage() {
       {/* Report Vulnerability */}
       <section className="py-16 bg-[#1a4d2e] text-white">
         <div className="max-w-2xl mx-auto px-6 text-center">
-          <h2 className="text-3xl font-bold mb-4" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
+          <h2 className="text-3xl font-bold mb-4" style={{ fontFamily: "var(--font-fraunces)" }}>
             Found a Security Issue?
           </h2>
           <p className="text-white/80 mb-6">
diff --git a/src/app/waitlist/page.tsx b/src/app/waitlist/page.tsx
index 4cacfdc..33b6d97 100644
--- a/src/app/waitlist/page.tsx
+++ b/src/app/waitlist/page.tsx
@@ -23,7 +23,7 @@ export default function WaitlistPage() {
                 <path strokeLinecap="round" strokeLinejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
               </svg>
             </div>
-            <span className="text-xl font-bold text-[#1a1a1a] tracking-tight" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>Route Commerce</span>
+            <span className="text-xl font-bold text-[#1a1a1a] tracking-tight" style={{ fontFamily: "var(--font-fraunces)" }}>Route Commerce</span>
           </Link>
         </div>
       </header>
@@ -37,7 +37,7 @@ export default function WaitlistPage() {
               <span className="w-2 h-2 bg-[#c97a3e] rounded-full animate-pulse" />
               <span className="text-sm font-medium text-[#c97a3e]">Early Access</span>
             </div>
-            <h1 className="text-5xl sm:text-6xl font-bold text-[#1a1a1a] leading-tight mb-6" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
+            <h1 className="text-5xl sm:text-6xl font-bold text-[#1a1a1a] leading-tight mb-6" style={{ fontFamily: "var(--font-fraunces)" }}>
               Join 500+ farms on the waitlist
             </h1>
             <p className="text-xl text-[#6b8f71] mb-8 leading-relaxed">
@@ -76,7 +76,7 @@ export default function WaitlistPage() {
           {/* Right - Form */}
           <div>
             <div className="bg-white rounded-3xl p-8 sm:p-10 shadow-xl border border-[#e5e5e5]">
-              <h2 className="text-2xl font-bold text-[#1a1a1a] mb-2" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
+              <h2 className="text-2xl font-bold text-[#1a1a1a] mb-2" style={{ fontFamily: "var(--font-fraunces)" }}>
                 Reserve Your Spot
               </h2>
               <p className="text-[#888] mb-6">No credit card required. We&apos;ll notify you when it&apos;s your turn.</p>
@@ -89,7 +89,7 @@ export default function WaitlistPage() {
       {/* FAQ Section */}
       <section className="border-t border-[#e5e5e5] bg-white">
         <div className="max-w-3xl mx-auto px-6 py-16">
-          <h2 className="text-3xl font-bold text-[#1a1a1a] mb-8 text-center" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
+          <h2 className="text-3xl font-bold text-[#1a1a1a] mb-8 text-center" style={{ fontFamily: "var(--font-fraunces)" }}>
             Frequently Asked Questions
           </h2>
           <div className="space-y-4">
diff --git a/src/components/landing/FeaturesAndStats.tsx b/src/components/landing/FeaturesAndStats.tsx
index 546a238..26b8ec9 100644
--- a/src/components/landing/FeaturesAndStats.tsx
+++ b/src/components/landing/FeaturesAndStats.tsx
@@ -231,22 +231,20 @@ export default function FeaturesAndStats() {
   return (
     <div
       style={{
-        fontFamily: "'Plus Jakarta Sans', sans-serif",
+        fontFamily: "var(--font-manrope)",
         background: "#faf8f5",
         color: "#1a1a1a",
         minHeight: "100vh",
       }}
     >
       <style jsx>{`
-        @import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");
-
         :global(body) {
           margin: 0;
           padding: 0;
         }
 
         .section-label {
-          font-family: "Plus Jakarta Sans", sans-serif;
+          font-family: var(--font-manrope);
           font-size: 0.75rem;
           font-weight: 600;
           letter-spacing: 0.15em;
@@ -256,7 +254,7 @@ export default function FeaturesAndStats() {
         }
 
         .section-title {
-          font-family: "Cormorant Garamond", serif;
+          font-family: var(--font-fraunces);
           font-size: clamp(2rem, 5vw, 3rem);
           font-weight: 600;
           color: #1a4d2e;
@@ -265,7 +263,7 @@ export default function FeaturesAndStats() {
         }
 
         .section-subtitle {
-          font-family: "Plus Jakarta Sans", sans-serif;
+          font-family: var(--font-manrope);
           font-size: 1.125rem;
           color: #4a4a4a;
           line-height: 1.6;
@@ -304,7 +302,7 @@ export default function FeaturesAndStats() {
         }
 
         .feature-title {
-          font-family: "Cormorant Garamond", serif;
+          font-family: var(--font-fraunces);
           font-size: 1.375rem;
           font-weight: 600;
           color: #1a4d2e;
@@ -326,7 +324,7 @@ export default function FeaturesAndStats() {
         }
 
         .stat-number {
-          font-family: "Cormorant Garamond", serif;
+          font-family: var(--font-fraunces);
           font-size: clamp(2.5rem, 5vw, 4rem);
           font-weight: 700;
           color: #1a4d2e;
@@ -570,7 +568,7 @@ export default function FeaturesAndStats() {
             <span
               style={{
                 display: "block",
-                fontFamily: "'Plus Jakarta Sans', sans-serif",
+                fontFamily: "var(--font-manrope)",
                 fontSize: "0.75rem",
                 fontWeight: 600,
                 letterSpacing: "0.15em",
@@ -583,7 +581,7 @@ export default function FeaturesAndStats() {
             </span>
             <h2
               style={{
-                fontFamily: "'Cormorant Garamond', serif",
+                fontFamily: "var(--font-fraunces)",
                 fontSize: "clamp(2rem, 4vw, 2.75rem)",
                 fontWeight: 600,
                 color: "#faf8f5",
@@ -620,7 +618,7 @@ export default function FeaturesAndStats() {
               >
                 <div
                   style={{
-                    fontFamily: "'Cormorant Garamond', serif",
+                    fontFamily: "var(--font-fraunces)",
                     fontSize: "clamp(2.25rem, 4.5vw, 3.75rem)",
                     fontWeight: 700,
                     color: "#faf8f5",
@@ -660,7 +658,7 @@ export default function FeaturesAndStats() {
                 </div>
                 <p
                   style={{
-                    fontFamily: "'Plus Jakarta Sans', sans-serif",
+                    fontFamily: "var(--font-manrope)",
                     fontSize: "0.875rem",
                     fontWeight: 500,
                     color: "#6b8f71",
diff --git a/src/components/landing/HeroSection.tsx b/src/components/landing/HeroSection.tsx
index 5f279b7..60c547f 100644
--- a/src/components/landing/HeroSection.tsx
+++ b/src/components/landing/HeroSection.tsx
@@ -310,7 +310,7 @@ export default function HeroSection() {
                 <h1
                   className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl xl:text-9xl font-bold leading-[0.9] tracking-tighter"
                   style={{
-                    fontFamily: "'Playfair Display', 'Georgia', serif",
+                    fontFamily: "var(--font-fraunces)",
                     color: "#1a1a1a",
                   }}
                 >
@@ -323,7 +323,7 @@ export default function HeroSection() {
               <p
                 className="hero-reveal hero-subtitle text-lg sm:text-xl md:text-2xl max-w-xl leading-relaxed"
                 style={{
-                  fontFamily: "'DM Sans', sans-serif",
+                  fontFamily: "var(--font-manrope)",
                   color: "#4a6d56",
                   fontWeight: 400,
                 }}
@@ -393,7 +393,7 @@ export default function HeroSection() {
                     <div
                       className="text-2xl sm:text-3xl lg:text-4xl font-bold"
                       style={{
-                        fontFamily: "'Playfair Display', serif",
+                        fontFamily: "var(--font-fraunces)",
                         color: "#1a4d2e",
                       }}
                     >
@@ -611,7 +611,7 @@ export default function HeroSection() {
               <div className="mb-8 reveal-scale">
                 <span
                   className="inline-block text-xs font-bold tracking-[0.3em] uppercase"
-                  style={{ color: "#c97a3e", fontFamily: "'DM Sans', sans-serif" }}
+                  style={{ color: "#c97a3e", fontFamily: "var(--font-manrope)" }}
                 >
                   The Challenge
                 </span>
@@ -621,7 +621,7 @@ export default function HeroSection() {
                 <h2
                   className="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-8"
                   style={{
-                    fontFamily: "'Playfair Display', serif",
+                    fontFamily: "var(--font-fraunces)",
                     color: "#faf8f5",
                   }}
                 >
@@ -636,7 +636,7 @@ export default function HeroSection() {
                   className="text-xl max-w-2xl mx-auto"
                   style={{
                     color: "#86868b",
-                    fontFamily: "'DM Sans', sans-serif",
+                    fontFamily: "var(--font-manrope)",
                     lineHeight: 1.7,
                   }}
                 >
@@ -669,14 +669,14 @@ export default function HeroSection() {
           <div className="reveal-scale text-center mb-20">
             <span
               className="inline-block text-xs font-bold tracking-[0.2em] uppercase mb-6"
-              style={{ color: "#6b8f71", fontFamily: "'DM Sans', sans-serif" }}
+              style={{ color: "#6b8f71", fontFamily: "var(--font-manrope)" }}
             >
               Platform Features
             </span>
             <h2
               className="text-5xl sm:text-6xl lg:text-7xl font-bold leading-tight"
               style={{
-                fontFamily: "'Playfair Display', serif",
+                fontFamily: "var(--font-fraunces)",
                 color: "#1a4d2e",
               }}
             >
@@ -792,7 +792,7 @@ export default function HeroSection() {
                 <h3
                   className="text-2xl font-bold mb-4"
                   style={{
-                    fontFamily: "'Playfair Display', serif",
+                    fontFamily: "var(--font-fraunces)",
                     color: "#1a4d2e",
                   }}
                 >
@@ -802,7 +802,7 @@ export default function HeroSection() {
                   className="text-base leading-relaxed"
                   style={{
                     color: "#555",
-                    fontFamily: "'DM Sans', sans-serif",
+                    fontFamily: "var(--font-manrope)",
                   }}
                 >
                   {feature.description}
@@ -845,7 +845,7 @@ export default function HeroSection() {
           <div className="text-center mb-16 reveal-scale">
             <span
               className="inline-block text-xs font-bold tracking-[0.2em] uppercase"
-              style={{ color: "#c97a3e", fontFamily: "'DM Sans', sans-serif" }}
+              style={{ color: "#c97a3e", fontFamily: "var(--font-manrope)" }}
             >
               Our Impact
             </span>
@@ -863,7 +863,7 @@ export default function HeroSection() {
                 <div
                   className="text-5xl sm:text-6xl lg:text-7xl font-bold mb-4"
                   style={{
-                    fontFamily: "'Playfair Display', serif",
+                    fontFamily: "var(--font-fraunces)",
                     color: "#faf8f5",
                     lineHeight: 1,
                   }}
@@ -874,7 +874,7 @@ export default function HeroSection() {
                 </div>
                 <p
                   className="text-base font-medium"
-                  style={{ color: "#6b8f71", fontFamily: "'DM Sans', sans-serif" }}
+                  style={{ color: "#6b8f71", fontFamily: "var(--font-manrope)" }}
                 >
                   {stat.label}
                 </p>
@@ -914,7 +914,7 @@ export default function HeroSection() {
                 style={{
                   color: "#c97a3e",
                   background: "rgba(201, 122, 62, 0.1)",
-                  fontFamily: "'DM Sans', sans-serif",
+                  fontFamily: "var(--font-manrope)",
                 }}
               >
                 Get Started Today
@@ -926,7 +926,7 @@ export default function HeroSection() {
               <h2
                 className="text-5xl sm:text-6xl lg:text-7xl font-bold leading-tight mb-8"
                 style={{
-                  fontFamily: "'Playfair Display', serif",
+                  fontFamily: "var(--font-fraunces)",
                   color: "#1a4d2e",
                 }}
               >
@@ -941,7 +941,7 @@ export default function HeroSection() {
                 className="text-xl mb-12 max-w-xl mx-auto"
                 style={{
                   color: "#555",
-                  fontFamily: "'DM Sans', sans-serif",
+                  fontFamily: "var(--font-manrope)",
                 }}
               >
                 Join hundreds of farms already using Route Commerce to deliver fresher produce faster.
diff --git a/src/components/landing/LandingPageWrapper.tsx b/src/components/landing/LandingPageWrapper.tsx
index 919521c..7e79550 100644
--- a/src/components/landing/LandingPageWrapper.tsx
+++ b/src/components/landing/LandingPageWrapper.tsx
@@ -55,7 +55,7 @@ export function Header({ className = "" }: HeaderProps) {
             <span
               className="text-xl font-semibold tracking-tight"
               style={{
-                fontFamily: "'Cormorant Garamond', Georgia, serif",
+                fontFamily: "var(--font-fraunces)",
                 color: "#1a1a1a",
               }}
             >
@@ -71,7 +71,7 @@ export function Header({ className = "" }: HeaderProps) {
                 href={link.href}
                 className="text-sm font-medium transition-colors hover:opacity-70"
                 style={{
-                  fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
+                  fontFamily: "var(--font-manrope)",
                   color: "#1a1a1a",
                 }}
               >
@@ -86,7 +86,7 @@ export function Header({ className = "" }: HeaderProps) {
               href="/login"
               className="text-sm font-medium transition-opacity hover:opacity-70"
               style={{
-                fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
+                fontFamily: "var(--font-manrope)",
                 color: "#1a4d2e",
               }}
             >
@@ -96,7 +96,7 @@ export function Header({ className = "" }: HeaderProps) {
               href="/admin"
               className="px-5 py-2.5 rounded-full text-sm font-semibold transition-all hover:opacity-90 active:scale-95"
               style={{
-                fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
+                fontFamily: "var(--font-manrope)",
                 background: "rgba(26, 77, 46, 0.9)",
                 backdropFilter: "blur(10px)",
                 WebkitBackdropFilter: "blur(10px)",
@@ -160,7 +160,7 @@ export function Header({ className = "" }: HeaderProps) {
                   href={link.href}
                   className="px-4 py-3 text-base font-medium rounded-lg transition-colors hover:bg-[#6b8f71]/10"
                   style={{
-                    fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
+                    fontFamily: "var(--font-manrope)",
                     color: "#1a1a1a",
                   }}
                   onClick={() => setMobileMenuOpen(false)}
@@ -176,7 +176,7 @@ export function Header({ className = "" }: HeaderProps) {
                   href="/login"
                   className="py-3 text-base font-medium"
                   style={{
-                    fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
+                    fontFamily: "var(--font-manrope)",
                     color: "#1a4d2e",
                   }}
                 >
@@ -186,7 +186,7 @@ export function Header({ className = "" }: HeaderProps) {
                   href="/admin"
                   className="py-3 rounded-full text-base font-semibold text-center"
                   style={{
-                    fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
+                    fontFamily: "var(--font-manrope)",
                     background: "rgba(26, 77, 46, 0.9)",
                     backdropFilter: "blur(10px)",
                     border: "1px solid rgba(255, 255, 255, 0.2)",
@@ -252,7 +252,7 @@ export function Footer({ className = "" }: FooterProps) {
               <span
                 className="text-sm font-medium tracking-tight"
                 style={{
-                  fontFamily: "'Cormorant Garamond', Georgia, serif",
+                  fontFamily: "var(--font-fraunces)",
                   color: "#1a1a1a",
                 }}
               >
@@ -262,7 +262,7 @@ export function Footer({ className = "" }: FooterProps) {
             <span
               className="text-xs mt-1"
               style={{
-                fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
+                fontFamily: "var(--font-manrope)",
                 color: "#9a9590",
               }}
             >
@@ -278,7 +278,7 @@ export function Footer({ className = "" }: FooterProps) {
                 href={link.href}
                 className="text-xs font-medium uppercase tracking-wider transition-colors hover:text-[#1a4d2e]"
                 style={{
-                  fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
+                  fontFamily: "var(--font-manrope)",
                   color: "#6b8f71",
                   letterSpacing: "0.08em",
                 }}
@@ -292,7 +292,7 @@ export function Footer({ className = "" }: FooterProps) {
           <span
             className="text-xs"
             style={{
-              fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
+              fontFamily: "var(--font-manrope)",
               color: "#b5b0a8",
             }}
           >
@@ -319,15 +319,11 @@ interface WrapperProps {
 export function LandingPageWrapper({ children, className = "" }: WrapperProps) {
   return (
     <>
-      {/* Google Fonts Import */}
-      <style jsx global>{`
-        @import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");
-      `}</style>
-
+      {/* Fonts loaded via next/font in app/layout.tsx — no external @import needed */}
       <div
         className={`min-h-screen flex flex-col ${className}`}
         style={{
-          fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
+          fontFamily: "var(--font-manrope)",
           scrollBehavior: "smooth",
         }}
       >
diff --git a/src/components/landing/TestimonialsAndCTA.tsx b/src/components/landing/TestimonialsAndCTA.tsx
index 407a98e..a02ae8d 100644
--- a/src/components/landing/TestimonialsAndCTA.tsx
+++ b/src/components/landing/TestimonialsAndCTA.tsx
@@ -59,7 +59,7 @@ export default function TestimonialsAndCTA() {
       <section
         style={{
           background: "linear-gradient(180deg, #faf8f5 0%, #f5f2ed 100%)",
-          fontFamily: "'Plus Jakarta Sans', sans-serif",
+          fontFamily: "var(--font-manrope)",
         }}
       >
         {/* Decorative botanical accent */}
@@ -132,7 +132,7 @@ export default function TestimonialsAndCTA() {
             </span>
             <h2
               style={{
-                fontFamily: "'Cormorant Garamond', serif",
+                fontFamily: "var(--font-fraunces)",
                 fontSize: "clamp(2.5rem, 5vw, 3.5rem)",
                 fontWeight: 600,
                 lineHeight: 1.1,
@@ -193,7 +193,7 @@ export default function TestimonialsAndCTA() {
                     top: "-8px",
                     right: "20px",
                     fontSize: "80px",
-                    fontFamily: "'Cormorant Garamond', serif",
+                    fontFamily: "var(--font-fraunces)",
                     color: "rgba(26, 77, 46, 0.06)",
                     lineHeight: 1,
                     pointerEvents: "none",
@@ -295,7 +295,7 @@ export default function TestimonialsAndCTA() {
               <div key={i} style={{ textAlign: "center" }}>
                 <div
                   style={{
-                    fontFamily: "'Cormorant Garamond', serif",
+                    fontFamily: "var(--font-fraunces)",
                     fontSize: "2.5rem",
                     fontWeight: 600,
                     color: "#1a4d2e",
@@ -326,7 +326,7 @@ export default function TestimonialsAndCTA() {
           background: "linear-gradient(180deg, #f5f2ed 0%, #faf8f5 50%, #faf8f5 100%)",
           position: "relative",
           overflow: "hidden",
-          fontFamily: "'Plus Jakarta Sans', sans-serif",
+          fontFamily: "var(--font-manrope)",
         }}
       >
         {/* Decorative gradient orbs */}
@@ -422,7 +422,7 @@ export default function TestimonialsAndCTA() {
             {/* Headline */}
             <h2
               style={{
-                fontFamily: "'Cormorant Garamond', serif",
+                fontFamily: "var(--font-fraunces)",
                 fontSize: "clamp(2.75rem, 6vw, 4rem)",
                 fontWeight: 600,
                 lineHeight: 1.1,
@@ -626,8 +626,6 @@ export default function TestimonialsAndCTA() {
       </section>
 
       <style jsx>{`
-        @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
-
         @keyframes fadeInUp {
           from {
             opacity: 0;
diff --git a/src/components/layout/SiteHeader.tsx b/src/components/layout/SiteHeader.tsx
index 730f401..df2fa96 100644
--- a/src/components/layout/SiteHeader.tsx
+++ b/src/components/layout/SiteHeader.tsx
@@ -47,13 +47,8 @@ export default function SiteHeader() {
         borderColor: "rgba(107, 143, 113, 0.15)",
       }}
     >
-      {/* Google Fonts */}
-      <style jsx global>{`
-        @import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");
-      `}</style>
-
       <div className="mx-auto flex max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8 py-3 sm:py-4">
-        {/* Logo */}
+        {/* Logo — uses Fraunces (loaded via next/font) for a refined serif wordmark */}
         <Link href="/" className="flex items-center gap-2.5 group">
           <div
             className="w-9 h-9 rounded-full flex items-center justify-center transition-transform group-hover:scale-105"
@@ -66,7 +61,7 @@ export default function SiteHeader() {
           <span
             className="text-lg sm:text-xl font-semibold tracking-tight"
             style={{
-              fontFamily: "'Cormorant Garamond', Georgia, serif",
+              fontFamily: "var(--font-fraunces)",
               color: "#1a1a1a",
             }}
           >
@@ -74,7 +69,7 @@ export default function SiteHeader() {
           </span>
         </Link>
 
-        {/* Navigation */}
+        {/* Navigation — uses Manrope (loaded via next/font) for consistent small caps */}
         <nav className="flex items-center gap-5 sm:gap-6">
           {/* Brand quick links */}
           {(!isAdminRoute || isStorefrontRoute) && (
@@ -83,7 +78,7 @@ export default function SiteHeader() {
                 href="/tuxedo"
                 className="text-xs sm:text-sm font-medium uppercase tracking-wider transition-colors hover:opacity-70"
                 style={{
-                  fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
+                  fontFamily: "var(--font-manrope)",
                   color: "#6b8f71",
                   letterSpacing: "0.06em",
                 }}
@@ -94,7 +89,7 @@ export default function SiteHeader() {
                 href="/indian-river-direct"
                 className="text-xs sm:text-sm font-medium uppercase tracking-wider transition-colors hover:opacity-70"
                 style={{
-                  fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
+                  fontFamily: "var(--font-manrope)",
                   color: "#6b8f71",
                   letterSpacing: "0.06em",
                 }}
@@ -110,7 +105,7 @@ export default function SiteHeader() {
               href="/admin"
               className="text-xs sm:text-sm font-medium uppercase tracking-wider transition-colors hover:opacity-70"
               style={{
-                fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
+                fontFamily: "var(--font-manrope)",
                 color: "#6b8f71",
                 letterSpacing: "0.06em",
               }}
diff --git a/src/components/marketing/WaitlistForm.tsx b/src/components/marketing/WaitlistForm.tsx
index daf7a8c..647d199 100644
--- a/src/components/marketing/WaitlistForm.tsx
+++ b/src/components/marketing/WaitlistForm.tsx
@@ -57,7 +57,7 @@ export default function WaitlistForm({ className = "", onSuccess }: WaitlistForm
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
           </svg>
         </div>
-        <h3 className="text-2xl font-bold text-[#1a1a1a] mb-2" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
+        <h3 className="text-2xl font-bold text-[#1a1a1a] mb-2" style={{ fontFamily: "var(--font-fraunces)" }}>
           You&apos;re on the list!
         </h3>
         <p className="text-[#6b8f71]">
diff --git a/src/styles/admin-design-system.css b/src/styles/admin-design-system.css
index 42fdc03..742cf66 100644
--- a/src/styles/admin-design-system.css
+++ b/src/styles/admin-design-system.css
@@ -381,10 +381,10 @@
   font-feature-settings: "ss01", "ss02";
 }
 .font-sans-ui {
-  font-family: var(--font-geist), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  font-family: var(--font-manrope), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
 }
 .font-mono-ui {
-  font-family: var(--font-jetbrains-mono), ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  font-family: var(--font-fragment-mono), ui-monospace, "SF Mono", Menlo, Consolas, monospace;
   font-feature-settings: "ss01", "tnum";
 }
 
@@ -406,7 +406,7 @@
 
 /* Eyebrow — small caps tracking label for editorial headers */
 .ha-eyebrow {
-  font-family: var(--font-geist), ui-sans-serif, system-ui, sans-serif;
+  font-family: var(--font-manrope), ui-sans-serif, system-ui, sans-serif;
   font-size: 0.625rem; /* 10px */
   font-weight: 600;
   letter-spacing: 0.18em;
@@ -416,7 +416,7 @@
 
 /* Tabular numerals for prices/dates */
 .ha-num {
-  font-family: var(--font-jetbrains-mono), ui-monospace, monospace;
+  font-family: var(--font-fragment-mono), ui-monospace, monospace;
   font-variant-numeric: tabular-nums;
   font-feature-settings: "tnum", "ss01";
 }
@@ -465,7 +465,7 @@
   height: 2.25rem; /* 36px */
   padding: 0 0.75rem;
   font-size: 0.875rem; /* 14px */
-  font-family: var(--font-geist), ui-sans-serif, system-ui, sans-serif;
+  font-family: var(--font-manrope), ui-sans-serif, system-ui, sans-serif;
   color: var(--admin-text-primary);
   background: rgba(0, 0, 0, 0.02);
   border: 1px solid var(--admin-border);
@@ -488,11 +488,84 @@
   opacity: 0.7;
 }
 .ha-field-input-mono {
-  font-family: var(--font-jetbrains-mono), ui-monospace, monospace;
+  font-family: var(--font-fragment-mono), ui-monospace, monospace;
   font-variant-numeric: tabular-nums;
   font-size: 0.8125rem;
   letter-spacing: -0.01em;
 }
+.ha-field-textarea {
+  width: 100%;
+  min-height: 4.5rem;
+  padding: 0.625rem 0.75rem;
+  font-size: 0.875rem;
+  font-family: var(--font-manrope), ui-sans-serif, system-ui, sans-serif;
+  line-height: 1.5;
+  color: var(--admin-text-primary);
+  background: rgba(0, 0, 0, 0.02);
+  border: 1px solid var(--admin-border);
+  border-radius: 0.5rem;
+  outline: none;
+  resize: vertical;
+  transition: all 160ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.ha-field-textarea:hover {
+  border-color: rgba(22, 163, 74, 0.4);
+  background: rgba(22, 163, 74, 0.015);
+}
+.ha-field-textarea:focus,
+.ha-field-textarea:focus-visible {
+  border-color: var(--admin-accent);
+  background: #ffffff;
+  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
+}
+.ha-field-textarea::placeholder {
+  color: var(--admin-text-muted);
+  opacity: 0.7;
+}
+
+/* Subtle scrollbar inside admin scroll containers */
+.ha-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: var(--admin-border) transparent;
+}
+.ha-scroll::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.ha-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+.ha-scroll::-webkit-scrollbar-thumb {
+  background: var(--admin-border);
+  border-radius: 3px;
+}
+.ha-scroll::-webkit-scrollbar-thumb:hover {
+  background: var(--admin-text-muted);
+}
+
+/* Skeleton placeholder — soft pulse for loading rows in admin tables */
+.ha-skeleton {
+  display: block;
+  background: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0.04) 0%,
+    rgba(0, 0, 0, 0.07) 50%,
+    rgba(0, 0, 0, 0.04) 100%
+  );
+  background-size: 200% 100%;
+  animation: ha-skeleton-pulse 1.4s ease-in-out infinite;
+  border-radius: 0.375rem;
+}
+@keyframes ha-skeleton-pulse {
+  0% { background-position: 100% 0; }
+  100% { background-position: -100% 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ha-skeleton {
+    animation: none;
+    background: rgba(0, 0, 0, 0.05);
+  }
+}
 
 /* Segmented control for status (replaces giant buttons) */
 .ha-segment {
@@ -580,7 +653,7 @@
   min-width: 1.125rem;
   height: 1.125rem;
   padding: 0 0.25rem;
-  font-family: var(--font-jetbrains-mono), monospace;
+  font-family: var(--font-fragment-mono), monospace;
   font-size: 0.625rem;
   font-weight: 600;
   color: var(--admin-text-secondary);
@@ -599,7 +672,7 @@
   padding: 0 1rem;
   font-size: 0.8125rem;
   font-weight: 600;
-  font-family: var(--font-geist), ui-sans-serif, system-ui, sans-serif;
+  font-family: var(--font-manrope), ui-sans-serif, system-ui, sans-serif;
   color: #ffffff;
   background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
   border: 1px solid #14532d;
@@ -639,7 +712,7 @@
   padding: 0 0.75rem;
   font-size: 0.8125rem;
   font-weight: 600;
-  font-family: var(--font-geist), ui-sans-serif, system-ui, sans-serif;
+  font-family: var(--font-manrope), ui-sans-serif, system-ui, sans-serif;
   color: var(--admin-text-secondary);
   background: transparent;
   border: 1px solid transparent;
@@ -701,7 +774,7 @@
   height: 2.25rem;
   padding: 0 0.75rem 0 2.25rem;
   font-size: 0.8125rem;
-  font-family: var(--font-geist), ui-sans-serif, system-ui, sans-serif;
+  font-family: var(--font-manrope), ui-sans-serif, system-ui, sans-serif;
   color: var(--admin-text-primary);
   background: rgba(0, 0, 0, 0.02);
   border: 1px solid var(--admin-border);
@@ -764,7 +837,7 @@
   border-color: var(--admin-accent);
 }
 .ha-picker-chip-count {
-  font-family: var(--font-jetbrains-mono), monospace;
+  font-family: var(--font-fragment-mono), monospace;
   font-size: 0.625rem;
   font-weight: 600;
   padding: 0.0625rem 0.3rem;
@@ -898,7 +971,7 @@
   border-radius: 0.25rem;
 }
 .ha-product-card-price {
-  font-family: var(--font-jetbrains-mono), monospace;
+  font-family: var(--font-fragment-mono), monospace;
   font-size: 0.6875rem;
   font-weight: 600;
   font-variant-numeric: tabular-nums;
@@ -1061,7 +1134,7 @@
   border-bottom: none;
 }
 .ha-row-num {
-  font-family: var(--font-jetbrains-mono), monospace;
+  font-family: var(--font-fragment-mono), monospace;
   font-size: 0.625rem;
   color: var(--admin-text-muted);
   font-variant-numeric: tabular-nums;
@@ -1103,7 +1176,7 @@
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
-  font-family: var(--font-geist), sans-serif;
+  font-family: var(--font-manrope), sans-serif;
   font-size: 0.625rem;
   font-weight: 600;
   letter-spacing: 0.18em;
@@ -1135,7 +1208,7 @@
   font-weight: 500;
 }
 .ha-calendar-title-year {
-  font-family: var(--font-jetbrains-mono), monospace;
+  font-family: var(--font-fragment-mono), monospace;
   font-size: 0.875rem;
   font-weight: 500;
   color: var(--admin-text-muted);
@@ -1179,7 +1252,7 @@
   padding: 0 0.75rem;
   background: var(--admin-text-primary);
   color: var(--admin-bg);
-  font-family: var(--font-geist), sans-serif;
+  font-family: var(--font-manrope), sans-serif;
   font-size: 0.75rem;
   font-weight: 600;
   letter-spacing: 0.02em;
@@ -1201,7 +1274,7 @@
 }
 .ha-calendar-dow-cell {
   padding: 0.625rem 0.75rem;
-  font-family: var(--font-geist), sans-serif;
+  font-family: var(--font-manrope), sans-serif;
   font-size: 0.5625rem;
   font-weight: 700;
   letter-spacing: 0.16em;
@@ -1272,7 +1345,7 @@
 }
 
 .ha-calendar-daynum {
-  font-family: var(--font-jetbrains-mono), monospace;
+  font-family: var(--font-fragment-mono), monospace;
   font-size: 0.75rem;
   font-weight: 600;
   color: var(--admin-text-secondary);
@@ -1317,7 +1390,7 @@
   width: 100%;
   min-width: 0;
   color: var(--admin-text-primary);
-  font-family: var(--font-geist), sans-serif;
+  font-family: var(--font-manrope), sans-serif;
 }
 .ha-calendar-event:hover {
   background: rgba(22, 163, 74, 0.14);
@@ -1343,7 +1416,7 @@
   background: rgba(0, 0, 0, 0.06);
 }
 .ha-calendar-event-time {
-  font-family: var(--font-jetbrains-mono), monospace;
+  font-family: var(--font-fragment-mono), monospace;
   font-size: 0.5625rem;
   font-weight: 600;
   color: var(--admin-text-secondary);
@@ -1365,7 +1438,7 @@
   font-size: 0.625rem;
   color: var(--admin-text-muted);
   font-weight: 600;
-  font-family: var(--font-jetbrains-mono), monospace;
+  font-family: var(--font-fragment-mono), monospace;
   font-variant-numeric: tabular-nums;
   padding: 0.125rem 0.25rem;
   text-align: left;
@@ -1431,7 +1504,7 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  font-family: var(--font-geist), sans-serif;
+  font-family: var(--font-manrope), sans-serif;
   font-size: 0.625rem;
   font-weight: 600;
   letter-spacing: 0.14em;
@@ -1474,7 +1547,7 @@
   color: var(--admin-text-muted);
 }
 .ha-event-popover-field-value {
-  font-family: var(--font-jetbrains-mono), monospace;
+  font-family: var(--font-fragment-mono), monospace;
   font-size: 0.75rem;
   font-weight: 600;
   color: var(--admin-text-primary);
@@ -1498,7 +1571,7 @@
   padding: 0 0.625rem;
   font-size: 0.75rem;
   font-weight: 600;
-  font-family: var(--font-geist), sans-serif;
+  font-family: var(--font-manrope), sans-serif;
   background: #ffffff;
   color: var(--admin-text-primary);
   border: 1px solid var(--admin-border);
@@ -1569,7 +1642,7 @@
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
-  font-family: var(--font-geist), sans-serif;
+  font-family: var(--font-manrope), sans-serif;
   font-size: 0.625rem;
   font-weight: 600;
   letter-spacing: 0.18em;
@@ -1688,7 +1761,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-family: var(--font-jetbrains-mono), monospace;
+  font-family: var(--font-fragment-mono), monospace;
   font-size: 0.6875rem;
   font-weight: 700;
   color: var(--admin-accent-text);
@@ -1721,7 +1794,7 @@
   padding-top: 0.125rem;
 }
 .ha-route-stop-time {
-  font-family: var(--font-jetbrains-mono), monospace;
+  font-family: var(--font-fragment-mono), monospace;
   font-size: 0.6875rem;
   font-weight: 600;
   color: var(--admin-text-muted);
@@ -1778,7 +1851,7 @@
   padding: 0 0.5rem;
   font-size: 0.6875rem;
   font-weight: 600;
-  font-family: var(--font-geist), sans-serif;
+  font-family: var(--font-manrope), sans-serif;
   background: transparent;
   color: var(--admin-text-secondary);
   border: 1px solid var(--admin-border);
@@ -1844,7 +1917,7 @@
   padding: 0 0.75rem;
   font-size: 0.8125rem;
   font-weight: 600;
-  font-family: var(--font-geist), sans-serif;
+  font-family: var(--font-manrope), sans-serif;
   color: var(--admin-text-secondary);
   background: transparent;
   border: none;