diff --git a/browser/components/aboutwelcome/content/aboutwelcome.css b/browser/components/aboutwelcome/content/aboutwelcome.css
index 6952ca1c306aa8815f662d8c557d4dd6b79fce0f..ce420f1b2f57e3f23ef18cac20938662f3ecf1ae 100644
--- a/browser/components/aboutwelcome/content/aboutwelcome.css
+++ b/browser/components/aboutwelcome/content/aboutwelcome.css
@@ -331,6 +331,11 @@ panel#feature-callout {
   --panel-shadow-margin: 6px;
   --panel-arrow-space: calc(var(--panel-shadow-margin) + var(--arrow-visible-height) - 1.5px);
   --panel-margin-offset: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-corner-distance) + (var(--arrow-width) / 2)));
+
+  @media -moz-pref("widget.macos.native-popovers") and (-moz-platform: macos) {
+    --panel-shadow-margin: 0;
+    --panel-arrow-space: 0;
+  }
 }
 
 panel#feature-callout::part(content) {
@@ -517,6 +522,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;
@@ -830,6 +841,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;