diff --git a/AGENTS.md b/AGENTS.md
index 2869cd9d8..366311a07 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -23,7 +23,7 @@ A single component is spread across **three parallel trees**, by file type, that
 
 **Theming:** Two brands — **Mozilla** (default) and **Firefox**. Themes are CSS Custom Properties declared on `:root` in `includes/themes/` (`_mozilla.scss`, `_firefox.scss`). For any themeable property (foreground/background/link colors, heading & body font families) use `var(--...)` (e.g. `var(--background-color)`, `var(--theme-heading-text-color)`). **Exception: text sizing** — use the type-scale mixins (`@include text-heading-lg;`), never custom properties, because the mixins bake in responsive media queries.
 
-**JavaScript:** Plain ES (target IE10 via Babel in tests), `module.exports`, no framework. Each module is an object named `Mzp<Thing>` (e.g. `MzpDetails`, `MzpModal`) exposing `init()`/`destroy()` and exported as a **UMD global** named in `webpack.entrypoints.js`. Modules feature-detect via `MzpSupports` and lean on `MzpUtils` helpers.
+**JavaScript:** Plain ES (targets the `browserslist` matrix in `package.json` — Firefox ESR, Safari 15.6+, evergreen — via Babel), `module.exports`, no framework. Each module is an object named `Mzp<Thing>` (e.g. `MzpDetails`, `MzpModal`) exposing `init()`/`destroy()` and exported as a **UMD global** named in `webpack.entrypoints.js`. Modules feature-detect via `MzpSupports` and lean on `MzpUtils` helpers.
 
 ## Build, Test, and Development Commands
 
diff --git a/CHANGELOG.md b/CHANGELOG.md
index cac824550..7c04173d3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 # HEAD
 
-This version introduces some major modernization changes around CSS and drops browser support for XXXX ( to be defined before V23 is published).
+This version introduces some major modernization changes around CSS and updates the supported browser matrix to Firefox ESR, Safari 15.6+, and evergreen browsers.
 
 The good news is we don't expect many visible changes in modern browsers and you should be able to do some automated visual regression testing to help with the migration.
 
@@ -10,6 +10,8 @@ Introducing theme variables! CSS variables beginning with `--theme-` will adjust
 
 ### Browser Support
 
+* (breaking) Updated the supported browser matrix to Firefox ESR, Safari 15.6+, and evergreen browsers (`browserslist` in `package.json`).
+* (breaking) Removed the Babel `targets: { ie: '10' }` override in every webpack config (docs site, npm package, and test bundle). The compiled JS now targets the `browserslist` matrix above instead of IE10.
 * (breaking) Remove support for vendor prefixing (#957)
 
 ### Typography
diff --git a/components/00-basic-elements/details/readme.md b/components/00-basic-elements/details/readme.md
index 3a9fc187f..33bb268d7 100644
--- a/components/00-basic-elements/details/readme.md
+++ b/components/00-basic-elements/details/readme.md
@@ -1,7 +1,9 @@
 The `<details>` element was introduced in HTML5 to provide a native collapsible
-“accordion” widget that previously required JavaScript. However, older browsers
-don’t support the newer elements, so Protocol includes a JavaScript polyfill to
-improve backwards compatibility.
+“accordion” widget that previously required JavaScript. It's natively supported
+across Protocol's [supported browsers](/docs/usage/browser-support.html), so no
+polyfill is needed. If you need more control over the open/close behavior than
+the native element provides, use the JS-driven Protocol
+[Details component](details-component) instead.
 
 The `<details>` element requires a `<summary>`, which you can combine with
 headings to convey hierarchy, if appropriate.
diff --git a/components/button/button--with-icon.readme.md b/components/button/button--with-icon.readme.md
index 9e0cdba91..1a49c8ffc 100644
--- a/components/button/button--with-icon.readme.md
+++ b/components/button/button--with-icon.readme.md
@@ -16,7 +16,7 @@ consistency and reliability, use an image.
 
 - Prefer embedded SVG over an external `img` (whether SVG or other format). An
   inline SVG icon can more easily change color for the different button states
-  and style variants. Be aware that very old browsers don’t support SVG.
+  and style variants.
 
 - Consider the text direction of the page language. Arrows in particular indicate
   a specific orientation that may be confusing in text that flows the opposite
diff --git a/components/details-component/details-component.html b/components/details-component/details-component.html
index a96c926e4..08b88ac94 100644
--- a/components/details-component/details-component.html
+++ b/components/details-component/details-component.html
@@ -18,14 +18,6 @@ <h4>Sub Heading</h4>
 <script src="{{ '/protocol/js/details.js' | path }}"></script>
 
 <script>
-  // check if details is supported, if not, init this as a polyfill
-  if (typeof window.MzpSupports !== 'undefined') {
-      // not supported, add support
-      if(!window.MzpSupports.details) {
-          window.MzpDetails.init('summary');
-      }
-  }
-
   // init generic class indicating headings should be made into open/close component
   window.MzpDetails.init('.mzp-c-details > h2');
   window.MzpDetails.init('.mzp-c-details > h3');
diff --git a/components/details-component/readme.md b/components/details-component/readme.md
index d2139659a..65fc34f03 100644
--- a/components/details-component/readme.md
+++ b/components/details-component/readme.md
@@ -26,14 +26,6 @@ const MzpDetails = window.MzpDetails;
 Then initialize the component:
 
 ```javascript
-// check if details is supported, if not, init this as a polyfill
-if (typeof window.MzpSupports !== 'undefined') {
-    // not supported, add support
-    if(!window.MzpSupports.details) {
-        window.MzpDetails.init('summary');
-    }
-}
-
 // init generic class indicating headings should be made into open/close component
 window.MzpDetails.init('.mzp-c-details > h2');
 window.MzpDetails.init('.mzp-c-details > h3');
diff --git a/components/layout/02-columns/readme.md b/components/layout/02-columns/readme.md
index d1b8b909d..4ce2f2c84 100644
--- a/components/layout/02-columns/readme.md
+++ b/components/layout/02-columns/readme.md
@@ -15,10 +15,7 @@ two columns in one-third/two-thirds proportions. If you need that kind of layout
 you’ll need to use an alternative method.
 
 This uses [CSS grid](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout),
-which is [well supported in modern browsers](https://caniuse.com/css-grid) but
-not supported in any browsers release prior to 2018. Older browsers will ignore
-the column layout and content will be linearized by default. If you need a
-multi-column layout in older browsers you’ll need to use an alternative method.
+which is well supported across Protocol's supported browsers.
 
 The contents of each column should be in its own container element that must be
 a _direct child_ of the multi-column container, as shown in the examples. The
diff --git a/docs/01-fundamentals/02-themes.md b/docs/01-fundamentals/02-themes.md
index 38f5c562e..2ab34ec09 100644
--- a/docs/01-fundamentals/02-themes.md
+++ b/docs/01-fundamentals/02-themes.md
@@ -13,9 +13,6 @@ Our CSS framework achieves the different themes by using [CSS Custom properties]
 set on the root element using the `:root` pseudo-class, and these custom properties will be changed depending on
 which brand is represented on the page.
 
-(Note: Since CSS Custom Properties aren't supported by legacy browsers,
-Protocol still uses a default theme with Sass variables for those browsers.)
-
 Protocol defaults to the Mozilla brand “out of the box.” If you use the packaged,
 pre-compiled CSS, you’ll have everything you need for a Mozilla-branded website
 without needing to compile the Sass yourself. We still recommend doing your own
diff --git a/docs/02-usage/03-browser-support.md b/docs/02-usage/03-browser-support.md
new file mode 100644
index 000000000..68b01b7fb
--- /dev/null
+++ b/docs/02-usage/03-browser-support.md
@@ -0,0 +1,31 @@
+---
+title: Browser Support
+label: Browser Support
+---
+
+Protocol supports:
+
+- **Firefox ESR** and current Firefox
+- **Safari 15.6** and later (macOS and iOS)
+- **Chrome, Edge, and other "evergreen" browsers**
+
+This matrix is declared as the `browserslist` key in
+[`package.json`](https://github.com/mozilla/protocol/blob/main/package.json),
+which drives both the Sass build's CSS minification and the Babel target for
+the compiled JavaScript.
+
+## What this means for your project
+
+If you compile Protocol's Sass yourself, your own build tooling should target
+the same matrix (or a subset of it) to avoid re-introducing legacy CSS output.
+
+Protocol no longer ships vendor-prefixed fallbacks, `@supports` feature-query
+fallbacks for older engines, or IE-era polyfills. If your project needs to
+support browsers outside this matrix, you'll need to add your own fallback
+styles and polyfills.
+
+## Testing
+
+Protocol's automated test suite (`npm test`) runs unit tests in Firefox and
+Chrome. Safari is not currently covered by CI; if you rely on Safari support,
+we recommend a manual smoke test of your integration.
diff --git a/package.json b/package.json
index ad04d072e..5ea23db9a 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,14 @@
     "stylelint-config-standard-scss": "^15.0.1"
   },
   "browserslist": [
-    "defaults",
-    "IE 8"
+    "last 2 chrome versions",
+    "last 2 edge versions",
+    "last 2 firefox versions",
+    "last 2 opera versions",
+    "last 2 samsung versions",
+    "Firefox ESR",
+    "Safari >= 15.6",
+    "iOS >= 15.6",
+    "not dead"
   ]
 }
diff --git a/webpack.docs.build.config.js b/webpack.docs.build.config.js
index ce9185b07..972ea7140 100644
--- a/webpack.docs.build.config.js
+++ b/webpack.docs.build.config.js
@@ -32,14 +32,7 @@ const protocolJSConfig = {
                     loader: 'babel-loader',
                     options: {
                         presets: [
-                            [
-                                '@babel/preset-env',
-                                {
-                                    targets: {
-                                        ie: '10'
-                                    }
-                                }
-                            ]
+                            '@babel/preset-env'
                         ]
                     }
                 }
@@ -168,14 +161,7 @@ const fractalJSConfig = {
                     loader: 'babel-loader',
                     options: {
                         presets: [
-                            [
-                                '@babel/preset-env',
-                                {
-                                    targets: {
-                                        ie: '10'
-                                    }
-                                }
-                            ]
+                            '@babel/preset-env'
                         ]
                     }
                 }
diff --git a/webpack.package.build.config.js b/webpack.package.build.config.js
index 21ab003ec..51fb8e3c4 100644
--- a/webpack.package.build.config.js
+++ b/webpack.package.build.config.js
@@ -36,14 +36,7 @@ const jsConfig = {
                     loader: 'babel-loader',
                     options: {
                         presets: [
-                            [
-                                '@babel/preset-env',
-                                {
-                                    targets: {
-                                        ie: '10'
-                                    }
-                                }
-                            ]
+                            '@babel/preset-env'
                         ]
                     }
                 }
diff --git a/webpack.test.config.js b/webpack.test.config.js
index abf9def5f..12c603385 100644
--- a/webpack.test.config.js
+++ b/webpack.test.config.js
@@ -36,14 +36,7 @@ module.exports = {
                     loader: 'babel-loader',
                     options: {
                         presets: [
-                            [
-                                '@babel/preset-env',
-                                {
-                                    targets: {
-                                        ie: '10'
-                                    }
-                                }
-                            ]
+                            '@babel/preset-env'
                         ]
                     }
                 }