diff --git a/browser/components/aboutwelcome/content/aboutwelcome.css b/browser/components/aboutwelcome/content/aboutwelcome.css
index 4a568479995c43ec2801c5b2f9452610923233ed..857a4a0ed78f3d374ed45fc4ff73e8e51dfbc2b9 100644
--- a/browser/components/aboutwelcome/content/aboutwelcome.css
+++ b/browser/components/aboutwelcome/content/aboutwelcome.css
@@ -330,6 +330,11 @@ panel#feature-callout {
   --panel-box-shadow-margin: 6px;
   --panel-arrow-space: calc(var(--panel-box-shadow-margin) + var(--arrow-visible-height) - 1.5px);
   --panel-margin-offset: calc(-1 * (var(--panel-box-shadow-margin) + var(--arrow-corner-distance) + (var(--arrow-width) / 2)));
+
+  @media -moz-pref("widget.macos.native-popovers") and (-moz-platform: macos) {
+    --panel-box-shadow-margin: 0;
+    --panel-arrow-space: 0;
+  }
 }
 
 panel#feature-callout::part(content) {
@@ -518,6 +523,12 @@ div#feature-callout.hidden {
   width: 25em;
   gap: 16px;
   background: var(--fc-background);
+
+  @media -moz-pref("widget.macos.native-popovers") and (-moz-platform: macos) {
+    --fc-background: transparent;
+    box-shadow: none;
+    border-width: 0;
+  }
 }
 #feature-callout .screen[pos=callout] .section-main .main-content .main-content-inner {
   gap: 12px;
@@ -934,6 +945,10 @@ panel#feature-callout::part(content) {
   overflow: visible;
   transform: rotate(45deg);
   transform-style: preserve-3d;
+
+  @media -moz-pref("widget.macos.native-popovers") and (-moz-platform: macos) {
+    display: none;
+  }
 }
 #feature-callout:not([arrow-position]) .arrow-box, #feature-callout[hide-arrow] .arrow-box {
   display: none;