diff --git a/blocks/v2-stories-carousel/v2-stories-carousel.css b/blocks/v2-stories-carousel/v2-stories-carousel.css
index ed858458..f0a57053 100644
--- a/blocks/v2-stories-carousel/v2-stories-carousel.css
+++ b/blocks/v2-stories-carousel/v2-stories-carousel.css
@@ -5,7 +5,7 @@
 }
 
 /* Full width block */
-main .section.v2-stories-carousel-container .v2-stories-carousel-wrapper {
+body .section.v2-stories-carousel-container .v2-stories-carousel-wrapper {
   margin: 0;
   padding-left: 0;
   padding-right: 0;
diff --git a/blocks/v2-truck-lineup/v2-truck-lineup.css b/blocks/v2-truck-lineup/v2-truck-lineup.css
index c1d623d1..3162b8ab 100644
--- a/blocks/v2-truck-lineup/v2-truck-lineup.css
+++ b/blocks/v2-truck-lineup/v2-truck-lineup.css
@@ -23,7 +23,7 @@
 }
 
 /* Full width block */
-main .section.v2-truck-lineup-container .v2-truck-lineup-wrapper {
+body .section.v2-truck-lineup-container .v2-truck-lineup-wrapper {
   margin: 0;
   padding: 0;
   width: 100%;
@@ -303,12 +303,14 @@ ul.v2-truck-lineup__navigation {
     max-width: 931px;
   }
 
+  div:where([role="dialog"]):not(.truck-lineup-content-center) .v2-truck-lineup__content .default-content-wrapper,
   main:not(.truck-lineup-content-center) .v2-truck-lineup__content .default-content-wrapper {
     align-items: flex-start;
     display: grid;
     grid-template-columns: 1fr 567px 80px 430px 1fr;
   }
 
+  div:where([role="dialog"]):not(.truck-lineup-content-center) .v2-truck-lineup__text,
   main:not(.truck-lineup-content-center) .v2-truck-lineup__text {
     width: 567px;
     max-width: none;
@@ -318,11 +320,14 @@ ul.v2-truck-lineup__navigation {
     grid-column: 2;
   }
 
+  div:where([role="dialog"]):not(.truck-lineup-content-center) .v2-truck-lineup__buttons-container,
   main:not(.truck-lineup-content-center) .v2-truck-lineup__buttons-container,
+  div:where([role="dialog"]):not(.truck-lineup-content-center) .v2-truck-lineup__buttons-container .button-container,
   main:not(.truck-lineup-content-center) .v2-truck-lineup__buttons-container .button-container {
     margin-top: 0;
   }
 
+  div:where([role="dialog"]):not(.truck-lineup-content-center) .v2-truck-lineup__buttons-container,
   main:not(.truck-lineup-content-center) .v2-truck-lineup__buttons-container {
     justify-content: start;
     grid-column: 4;
diff --git a/blocks/v2-video/v2-video.css b/blocks/v2-video/v2-video.css
index fd7e44ec..bc921eb5 100644
--- a/blocks/v2-video/v2-video.css
+++ b/blocks/v2-video/v2-video.css
@@ -7,7 +7,7 @@
   margin-top: -40px;
 }
 
-main .section.v2-video-container .v2-video-wrapper {
+body .section.v2-video-container .v2-video-wrapper {
   padding: 0;
   color: var(--c-white);
   margin: 0;
diff --git a/common/modal/modal.css b/common/modal/modal.css
index a5cd03f2..98a4728a 100644
--- a/common/modal/modal.css
+++ b/common/modal/modal.css
@@ -4,10 +4,32 @@
   left: 0;
   width: 100vw;
   height: 100vh;
-  background: white;
+  background: var(--background-color);
+  color: var(--text-color);
   z-index: 1051;
-  transition: opacity 0.15s linear, visibility 0.15s linear;
+  transition: opacity var(--duration-small) var(--easing-entrance),
+    visibility var(--duration-small) var(--easing-entrance);
   opacity: 1;
+
+  --background-color: var(--c-white);
+  --top-bar-height: 64px;
+  --text-color: var(--c-black);
+}
+
+@supports (height: 1svh) {
+  .modal-background {
+    height: 100svh;
+  }
+}
+
+.modal--black {
+  --background-color: var(--c-black);
+  --text-color: var(--c-white);
+  --color-icon: var(--c-white);
+}
+
+.modal--gray {
+  --background-color: var(--c-grey-50);
 }
 
 .modal-hidden {
@@ -29,6 +51,65 @@
   background-color: var(--c-grey-1);
 }
 
+.modal-content--wide {
+  margin: 0;
+  overflow: auto;
+  height: calc(100% - var(--top-bar-height));
+  background-color: var(--background-color);
+}
+
+.modal-top-bar {
+  display: flex;
+  justify-content: center;
+}
+
+.modal-top-bar-content {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 16px;
+  gap: 10px;
+  min-height: var(--top-bar-height);
+  align-items: flex-start;
+  width: 100%;
+  padding: 32px 0;
+}
+
+.modal-top-bar-heading {
+  font-family: var(--ff-volvo-novum);
+  font-size: var(--f-subtitle-1-font-size);
+  line-height: var(--f-subtitle-1-line-height);
+  letter-spacing: var(--f-subtitle-1-letter-spacing);
+  align-self: center;
+  margin: 0;
+}
+
+.modal-top-bar .modal-close-button {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  background: inherit;
+  display: flex;
+  border-radius: 1px;
+  min-height: 44px;
+  min-width: 44px;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal-top-bar .modal-close-button:focus {
+  outline: 0;
+}
+
+.modal-top-bar .modal-close-button:focus-visible {
+  outline: 2px solid var(--light-border-focus);
+  outline-offset: 5px;
+}
+
+.modal-top-bar svg {
+  height: 24px;
+  width: 24px;
+}
+
 .modal-content .modal-video {
   width: 100%;
   height: 100%;
@@ -38,7 +119,7 @@
 .modal-before-banner {
   display: flex;
   justify-content: center;
-  background: white;
+  background: var(--background-color);
 }
 
 .modal-before-banner button.modal-close-button {
@@ -52,24 +133,41 @@
 }
 
 @media (min-width: 768px) {
-  .modal-content {
+  :root:not(.redesign-v2) .modal-content {
     margin: 100px auto;
     width: 726px;
   }
 }
 
 @media (min-width: 992px) {
-  .modal-content {
+  :root:not(.redesign-v2) .modal-content {
     width: 930px;
   }
 }
 
 @media (min-width: 1300px) {
-  .modal-content {
+  :root:not(.redesign-v2) .modal-content {
     width: 1170px;
   }
 }
 
+@media (min-width: 744px) {
+  .modal-top-bar-content {
+    margin: 0 32px;
+  }
+
+  .modal-top-bar-heading {
+    font-size: var(--f-heading-6-font-size);
+    line-height: var(--f-heading-6-line-height);
+    letter-spacing: var(--f-heading-6-letter-spacing);
+  }
+}
+
+@media (min-width: 1200px) {
+  .modal-top-bar-content {
+    max-width: 1170px;
+  }
+}
 
 /* adjustments for soundcloud variant of modal, e.g. https://www.volvotrucks.us/trucks/powertrain/i-torque/ */
 .modal-content .modal-soundcloud {
@@ -81,7 +179,7 @@
   gap: 2%;
 }
 
-.modal-content:has(.modal-soundcloud)  {
+.modal-content:has(.modal-soundcloud) {
   aspect-ratio: unset;
 }
 
diff --git a/common/modal/modal.js b/common/modal/modal.js
index 8b57050b..853f3957 100644
--- a/common/modal/modal.js
+++ b/common/modal/modal.js
@@ -1,3 +1,4 @@
+import { createElement, getTextLabel } from '../../scripts/common.js';
 import { loadCSS } from '../../scripts/lib-franklin.js';
 // eslint-disable-next-line import/no-cycle
 import { createIframe, isLowResolutionVideoUrl } from '../../scripts/video-helper.js';
@@ -7,11 +8,33 @@ const styles$ = new Promise((r) => {
 });
 
 const HIDE_MODAL_CLASS = 'modal-hidden';
+let currentModalClasses = null;
+let currentInvokeContext = null;
+
+const createModalTopBar = (parentEl) => {
+  const topBar = document.createRange().createContextualFragment(`
+    <div class="modal-top-bar">
+      <div class="modal-top-bar-content">
+        <h2 class="modal-top-bar-heading" id="modal-heading"></h2>
+        <button class="modal-close-button" aria-label=${getTextLabel('close')}>
+          <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M4.97979 4.97979C5.17505 4.78453 5.49163 4.78453 5.6869 4.97979L16 15.2929L26.3131 4.97979C26.5084 4.78453 26.825 4.78453 27.0202 4.97979C27.2155 5.17505 27.2155 5.49163 27.0202 5.6869L16.7071 16L27.0202 26.3131C27.2155 26.5084 27.2155 26.825 27.0202 27.0202C26.825 27.2155 26.5084 27.2155 26.3131 27.0202L16 16.7071L5.6869 27.0202C5.49163 27.2155 5.17505 27.2155 4.97979 27.0202C4.78453 26.825 4.78453 26.5084 4.97979 26.3131L15.2929 16L4.97979 5.6869C4.78453 5.49163 4.78453 5.17505 4.97979 4.97979Z" fill="var(--color-icon, #000)"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+  `);
+
+  parentEl.prepend(...topBar.children);
+  // eslint-disable-next-line no-use-before-define
+  parentEl.querySelector('.modal-close-button').addEventListener('click', () => hideModal());
+  parentEl.querySelector('.modal-top-bar').addEventListener('click', (event) => event.stopPropagation());
+};
 
 const createModal = () => {
-  const modalBackground = document.createElement('div');
+  const modalBackground = createElement('div', { classes: ['modal-background', HIDE_MODAL_CLASS] });
+  modalBackground.setAttribute('role', 'dialog');
 
-  modalBackground.classList.add('modal-background', HIDE_MODAL_CLASS);
   modalBackground.addEventListener('click', () => {
     // eslint-disable-next-line no-use-before-define
     hideModal();
@@ -24,8 +47,8 @@ const createModal = () => {
     }
   };
 
-  const modalContent = document.createElement('div');
-  modalContent.classList.add('modal-content');
+  const modalContent = createElement('div', { classes: ['modal-content'] });
+  createModalTopBar(modalBackground);
   modalBackground.appendChild(modalContent);
   // preventing initial animation when added to DOM
   modalBackground.style = 'display: none';
@@ -36,25 +59,66 @@ const createModal = () => {
     event.stopPropagation();
   });
 
-  async function showModal(newUrl, beforeBanner, beforeIframe) {
+  const clearModalContent = () => {
+    modalContent.innerHTML = '';
+    modalContent.className = 'modal-content';
+    modalBackground.querySelector('.modal-top-bar-heading').textContent = '';
+  };
+
+  const handleNewContent = (newContent) => {
+    clearModalContent();
+
+    const firstSection = newContent[0];
+
+    // checking if the first section contains one heading only
+    if (
+      firstSection.children.length === 1
+      && firstSection.children[0].children.length === 1
+      && /^H[1-6]$/.test(newContent[0].children[0].children[0].tagName)
+    ) {
+      const headingContent = firstSection.children[0].children[0].textContent;
+
+      modalBackground.querySelector('.modal-top-bar-heading').textContent = headingContent;
+      firstSection.style.display = 'none';
+      modalBackground.setAttribute('aria-labelledby', 'modal-heading');
+    } else {
+      modalBackground.removeAttribute('aria-labelledby');
+    }
+
+    modalContent.classList.add('modal-content--wide');
+    modalContent.append(...newContent);
+  };
+
+  async function showModal(newContent, {
+    beforeBanner, beforeIframe, modalClasses = [], invokeContext,
+  }) {
+    currentInvokeContext = invokeContext;
+    // disabling focus for header, footer and main elements when modal is open
+    document.querySelectorAll('header, footer, main').forEach((el) => {
+      el.setAttribute('inert', 'inert');
+    });
     await styles$;
     modalBackground.style = '';
+    modalBackground.classList.add(...modalClasses);
+    currentModalClasses = modalClasses;
     window.addEventListener('keydown', keyDownAction);
 
-    if (newUrl) {
+    if (newContent && (typeof newContent !== 'string')) {
+      handleNewContent(newContent);
+    } else if (newContent) {
       let videoOrIframe = null;
-      if (isLowResolutionVideoUrl(newUrl)) {
+      if (isLowResolutionVideoUrl(newContent)) {
         // We can't use the iframe for videos, because if the Content-Type
         // `application/octet-stream` is returned instead of `video/mp4`, the
         // file is downloaded instead of displayed. So we use the video element instead.
         videoOrIframe = document.createElement('video');
-        videoOrIframe.setAttribute('src', newUrl);
+        videoOrIframe.setAttribute('src', newContent);
         videoOrIframe.setAttribute('controls', '');
         videoOrIframe.setAttribute('autoplay', '');
         videoOrIframe.classList.add('modal-video');
         modalContent.append(videoOrIframe);
       } else {
-        videoOrIframe = createIframe(newUrl, { parentEl: modalContent, classes: 'modal-video' });
+        videoOrIframe = createIframe(newContent, { parentEl: modalContent, classes: 'modal-video' });
       }
 
       if (beforeBanner) {
@@ -82,19 +146,35 @@ const createModal = () => {
 
     modalContent.classList.add('modal-content-fade-in');
     modalBackground.classList.remove(HIDE_MODAL_CLASS);
+    modalBackground.querySelector('.modal-top-bar .modal-close-button').focus();
+    modalBackground.setAttribute('aria-hidden', 'false');
 
     // disable page scrolling
     document.body.classList.add('disable-scroll');
   }
 
   function hideModal() {
+    // restoring focus for header, footer and main elements when modal is close
+    document.querySelectorAll('header, footer, main').forEach((el) => {
+      el.removeAttribute('inert');
+    });
+    if (currentInvokeContext) {
+      currentInvokeContext.focus();
+    }
+    currentInvokeContext = null;
     modalBackground.classList.add(HIDE_MODAL_CLASS);
     modalContent.classList.remove('modal-content-fade-in');
     window.removeEventListener('keydown', keyDownAction);
     document.body.classList.remove('disable-scroll');
-    modalContent.querySelector('iframe, video').remove();
+    modalContent.querySelector('iframe, video')?.remove();
     modalContent.querySelector('.modal-before-banner')?.remove();
     modalContent.querySelector('.modal-before-iframe')?.remove();
+    modalBackground.setAttribute('aria-hidden', 'true');
+
+    if (currentModalClasses.length) {
+      modalBackground.classList.remove(currentModalClasses);
+      currentModalClasses = null;
+    }
   }
 
   return {
diff --git a/placeholder.json b/placeholder.json
index 9587fe17..0f4f65b7 100644
--- a/placeholder.json
+++ b/placeholder.json
@@ -1,7 +1,7 @@
 {
-  "total": 30,
+  "total": 36,
   "offset": 0,
-  "limit": 30,
+  "limit": 36,
   "data": [
     {
       "Key": "Low resolution video message",
@@ -54,19 +54,19 @@
     {
       "Key": "vinlabel",
       "Text": "Enter your 17-digit VIN (Vehicle Identification Number)"
-    }, 
+    },
     {
       "Key": "submit",
       "Text": "Submit"
-    }, 
+    },
     {
       "Key": "vinformat",
       "Text": "The VIN entered is not valid for Volvo Trucks, Nova Bus, or Prevost vehicles"
-    }, 
+    },
     {
       "Key": "result text",
       "Text": "${count} recalls available for \"${vin}\" VIN"
-    }, 
+    },
     {
       "Key": "recalls",
       "Text": "Recalls"
@@ -86,7 +86,7 @@
     {
       "Key": "remedy_description",
       "Text": "Remedy"
-    }, 
+    },
     {
       "Key": "published_info",
       "Text": "Information last updated"
@@ -102,11 +102,11 @@
     {
       "Key": "recall-incomplete",
       "Text": "Recall Incomplete"
-    }, 
+    },
     {
       "Key": "recall-incomplete-no-remedy",
       "Text": "Recall In Complete, remedy not available"
-    }, 
+    },
     {
       "Key": "loading recalls",
       "Text": " Loading Recalls ....."
@@ -118,7 +118,7 @@
     {
       "Key": "mfr_notes",
       "Text": "Next Steps"
-    }, 
+    },
     {
       "Key": "mfr_recall_number",
       "Text": "Brand Recall Number"
@@ -143,6 +143,10 @@
       "Key": "vinformat-length",
       "Text": "Please fill out this field"
     },
+    {
+      "Key": "Close",
+      "Text": "Close"
+    },
     {
       "Key": "Copied",
       "Text": "Copied!"
diff --git a/scripts/scripts.js b/scripts/scripts.js
index f4dc5389..2383881c 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -11,6 +11,7 @@ import {
   getMetadata,
   toClassName,
   getHref,
+  loadBlocks,
 } from './lib-franklin.js';
 
 import {
@@ -390,6 +391,49 @@ function decorateHyperlinkImages(container) {
     });
 }
 
+document.addEventListener('open-modal', (event) => {
+  // eslint-disable-next-line import/no-cycle
+  import('../common/modal/modal.js').then((modal) => {
+    const variantClasses = ['black', 'gray'];
+    const modalClasses = [...event.detail.target.closest('.section').classList].filter((el) => el.startsWith('modal-'));
+    // changing the modal variants classes to BEM naming
+    variantClasses.forEach((variant) => {
+      const index = modalClasses.findIndex((el) => el === `modal-${variant}`);
+
+      if (index >= 0) {
+        modalClasses[index] = modalClasses[index].replace('modal-', 'modal--');
+      }
+    });
+
+    modal.showModal(event.detail.content, { modalClasses, invokeContext: event.detail.target });
+  });
+});
+
+const handleModalLinks = (link) => {
+  link.addEventListener('click', async (event) => {
+    event.preventDefault();
+    const modalContentLink = link.getAttribute('data-modal-content');
+    const resp = await fetch(`${modalContentLink}.plain.html`);
+    const main = document.createElement('main');
+
+    if (resp.ok) {
+      main.innerHTML = await resp.text();
+      // eslint-disable-next-line no-use-before-define
+      decorateMain(main, main);
+      await loadBlocks(main);
+    }
+
+    const modalEvent = new CustomEvent('open-modal', {
+      detail: {
+        content: main.children,
+        target: event.target,
+      },
+    });
+
+    document.dispatchEvent(modalEvent, { bubbles: true });
+  });
+};
+
 export function decorateLinks(block) {
   [...block.querySelectorAll('a')]
     .filter(({ href }) => !!href)
@@ -402,6 +446,14 @@ export function decorateLinks(block) {
       if (isSoundcloudLink(link)) {
         addSoundcloudShowHandler(link);
       }
+      if (link.getAttribute('href').startsWith('/modal-content=')) {
+        const href = link.getAttribute('href');
+        link.setAttribute('data-modal-content', href.split('modal-content=')[1]);
+        // removing the `/modal-content=` so the link can be opened in the other tab by coping link
+        link.setAttribute('href', link.getAttribute('href').replace('/modal-content=', ''));
+        handleModalLinks(link);
+        return;
+      }
 
       const url = new URL(link.href);
       const external = !url.host.match('volvotrucks.(us|ca)') && !url.host.match('.hlx.(page|live)') && !url.host.match('localhost');
@@ -581,7 +633,7 @@ export const MEDIA_BREAKPOINTS = {
   DESKTOP: 'DESKTOP',
 };
 
-export function getImageForBreakpoint(imagesList, onChange = () => {}) {
+export function getImageForBreakpoint(imagesList, onChange = () => { }) {
   const mobileMQ = window.matchMedia('(max-width: 743px)');
   const tabletMQ = window.matchMedia('(min-width: 744px) and (max-width: 1199px)');
   const desktopMQ = window.matchMedia('(min-width: 1200px)');
diff --git a/scripts/video-helper.js b/scripts/video-helper.js
index d4b880e3..54a104dd 100644
--- a/scripts/video-helper.js
+++ b/scripts/video-helper.js
@@ -2,7 +2,7 @@ import { createElement, getTextLabel } from './common.js';
 
 /* video helpers */
 export function isLowResolutionVideoUrl(url) {
-  return url.split('?')[0].endsWith('.mp4');
+  return (typeof url === 'string') && url.split('?')[0].endsWith('.mp4');
 }
 
 export function isVideoLink(link) {
@@ -49,7 +49,7 @@ export function showVideoModal(linkUrl) {
       beforeBanner = createLowResolutionBanner();
     }
 
-    modal.showModal(linkUrl, beforeBanner);
+    modal.showModal(linkUrl, { beforeBanner });
   });
 }
 
@@ -91,7 +91,7 @@ export function addSoundcloudShowHandler(link) {
       episodeInfo.querySelector('h2').innerText = title?.innerText || '';
       episodeInfo.querySelector('p').innerText = text?.innerText || '';
 
-      modal.showModal(link.getAttribute('href'), null, episodeInfo);
+      modal.showModal(link.getAttribute('href'), { beforeIframe: episodeInfo });
     });
   });
 }
diff --git a/styles/styles.css b/styles/styles.css
index da6f3e44..c5919308 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -348,10 +348,12 @@ header .sub-nav.block {
 }
 
 /* specific page styles */
+div:where([role="dialog"]).center,
 main.center {
   text-align: center;
 }
 
+div:where([role="dialog"]).center :where(.block),
 main.center :where(.block) {
   text-align: initial;
 }
@@ -538,7 +540,7 @@ input[type='text'], select, textarea {
 }
 
 /* commont elements */
-
+div:where([role="dialog"]) input,
 main input {
   font-size: 1.25rem;
   width: 100%;
@@ -553,10 +555,12 @@ main input {
   background-color: var(--c-white);
 }
 
+div:where([role="dialog"]) input:hover,
 main input:hover {
   border: 1px solid var(--text-color);
 }
 
+div:where([role="dialog"]) pre,
 main pre {
   background-color: var(--overlay-background-color);
   padding: 1em;
@@ -565,6 +569,7 @@ main pre {
   white-space: pre;
 }
 
+div:where([role="dialog"]) blockquote,
 main blockquote {
   font-style: italic;
   margin: 3rem;
@@ -572,11 +577,13 @@ main blockquote {
   hanging-punctuation: first;
 }
 
+div:where([role="dialog"]) blockquote p::before,
 main blockquote p::before {
   content: "“";
   line-height: 0;
 }
 
+div:where([role="dialog"]) blockquote p::after,
 main blockquote p::after {
   content: "”";
   line-height: 0;
@@ -589,12 +596,14 @@ hr {
   border-bottom: 1px solid var(--overlay-background-color);
 }
 
+div:where([role="dialog"]) img,
 main img {
   max-width: 100%;
   height: auto;
   vertical-align: middle
 }
 
+div:where([role="dialog"]) p img,
 main p img {
   display: block;
   margin: auto;
@@ -619,12 +628,14 @@ main p img {
 
 /* sections */
 
+div:where([role="dialog"]) .section > div,
 main .section > div {
   width: var(--wrapper-width);
   padding: 0 16px;
   margin: 48px auto;
 }
 
+div:where([role="dialog"]) .section-with-background,
 main .section-with-background {
   --text-color: white;
 
@@ -638,16 +649,21 @@ main .section-with-background {
   padding: 48px 0;
 }
 
+div:where([role="dialog"]) .section-with-background > div:first-of-type,
 main .section-with-background > div:first-of-type,
+div:where([role="dialog"]) .section-with-background > div:first-of-type > :first-child,
 main .section-with-background > div:first-of-type > :first-child {
   margin-top: 0;
 }
 
+div:where([role="dialog"]) .section-with-background > div:last-of-type,
 main .section-with-background > div:last-of-type,
+div:where([role="dialog"]) .section-with-background > div:last-of-type > :last-child,
 main .section-with-background > div:last-of-type > :last-child {
   margin-bottom: 0;
 }
 
+div:where([role="dialog"]) .section-with-background > picture:last-of-type img,
 main .section-with-background > picture:last-of-type img {
   width: var(--wrapper-width);
   height: 100%;
@@ -660,16 +676,20 @@ main .section-with-background > picture:last-of-type img {
   object-fit: cover;
 }
 
+div:where([role="dialog"]) .section:first-child > :first-child,
 main .section:first-child > :first-child {
   margin-top: 0;
 }
 
 /* progressive section appearance */
+div:where([role="dialog"]) .section[data-section-status='loading'],
 main .section[data-section-status='loading'],
+div:where([role="dialog"]) .section[data-section-status='initialized'],
 main .section[data-section-status='initialized'] {
   display: none;
 }
 
+div:where([role="dialog"]) .section.highlight,
 main .section.highlight {
   background-color: var(--highlight-background-color);
 }
@@ -699,21 +719,25 @@ ul.cta-list li {
   margin-top: -10px;
 }
 
+div:where([role="dialog"]) .section.tabbed-container-full-width > div,
 main .section.tabbed-container-full-width > div {
   padding: 0;
   width: unset;
 }
 
+div:where([role="dialog"]) .section.tabbed-container-full-width,
 main .section.tabbed-container-full-width {
   --horizontal-padding: calc((100% - var(--wrapper-width)) / 2);
 }
 
+div:where([role="dialog"]) .section.tabbed-container ul.tab-navigation,
 main .section.tabbed-container ul.tab-navigation {
   padding: 0;
   margin: 25px;
   text-align: center;
 }
 
+div:where([role="dialog"]) .section.tabbed-container ul.tab-navigation li,
 main .section.tabbed-container ul.tab-navigation li {
   margin: 0 auto;
   padding: 0 1% 8px;
@@ -721,6 +745,7 @@ main .section.tabbed-container ul.tab-navigation li {
   width: 35%;
 }
 
+div:where([role="dialog"]) .section.tabbed-container ul.tab-navigation button,
 main .section.tabbed-container ul.tab-navigation button {
   background: 0 0;
   border: none;
@@ -881,6 +906,7 @@ div.block div.pager .pagination .scroll li a {
 }
 
 @media screen and (min-width: 480px) {
+  div:where([role="dialog"]) .section.tabbed-container ul.tab-navigation li,
   main .section.tabbed-container ul.tab-navigation li {
     margin: 0 3%;
     display: inline-block;
@@ -902,6 +928,7 @@ div.block div.pager .pagination .scroll li a {
     --sub-nav-height: 48px;
   }
 
+  :root:not(.redesign-v2) div:where([role="dialog"]):not(.remove-top-margin) .section:first-child > :first-child,
   :root:not(.redesign-v2) main:not(.remove-top-margin) .section:first-child > :first-child {
     margin-top: 30px;
   }
@@ -911,20 +938,24 @@ div.block div.pager .pagination .scroll li a {
   }
 }
 
+div:where([role="dialog"]).blue-contract .section,
 main.blue-contract .section {
   padding: 40px 0;
 }
 
+div:where([role="dialog"]).blue-contract .section > div,
 main.blue-contract .section > div {
   padding: 0 16px;
   margin: auto;
 }
 
 @media screen and (min-width: 768px) {
+  div:where([role="dialog"]).blue-contract .section,
   main.blue-contract .section {
     padding: 80px 0;
   }
 
+  div:where([role="dialog"]).blue-contract .section > div,
   main.blue-contract .section > div {
     padding: 0 32px;
     margin: auto;
@@ -932,6 +963,7 @@ main.blue-contract .section > div {
 }
 
 @media screen and (min-width: 1024px) {
+  div:where([role="dialog"]).blue-contract .section > div,
   main.blue-contract .section > div {
     padding: 0 135px;
   }
@@ -945,12 +977,15 @@ main.blue-contract .section > div {
 
 /* Sections variant styling */
 @media (min-width: 1440px) {
+  :root:not(html.redesign-v2) div:where([role="dialog"]).blue-contract,
   :root:not(html.redesign-v2) main.blue-contract {
     --wrapper-width: 1440px;
   }
 }
 
+div:where([role="dialog"]).blue-contract .section.section-with-title h1,
 main.blue-contract .section.section-with-title h1,
+div:where([role="dialog"]).blue-contract .section.section-with-title h2,
 main.blue-contract .section.section-with-title h2 {
   font-size: var(--heading-ml-font-size);
   line-height: var(--heading-ml-line-height);
@@ -958,6 +993,7 @@ main.blue-contract .section.section-with-title h2 {
   margin: 0 0 16px;
 }
 
+div:where([role="dialog"]).blue-contract .section.section-with-title p,
 main.blue-contract .section.section-with-title p {
   font-size: var(--body-regular-font-size);
   line-height: var(--body-regular-line-height);
@@ -966,32 +1002,39 @@ main.blue-contract .section.section-with-title p {
 }
 
 @media screen and (min-width: 768px) {
+  div:where([role="dialog"]).blue-contract .section.section-with-title h1,
   main.blue-contract .section.section-with-title h1,
+  div:where([role="dialog"]).blue-contract .section.section-with-title h2,
   main.blue-contract .section.section-with-title h2 {
     font-size: var(--heading-l-font-size);
     line-height: var(--heading-l-line-height);
     letter-spacing: var(--heading-l-letter-spacing);
   }
 
+  div:where([role="dialog"]).blue-contract .section.section-with-title p,
   main.blue-contract .section.section-with-title p {
     font-size: var(--heading-m-font-size);
     line-height: var(--heading-m-line-height);
     letter-spacing: var(--heading-m-letter-spacing);
   }
 
+  div:where([role="dialog"]).blue-contract .section.section-with-title > p:last-of-type,
   main.blue-contract .section.section-with-title > p:last-of-type {
     margin: 0 0 40px;
   }
 }
 
 @media screen and (min-width: 1024px) {
+  div:where([role="dialog"]).blue-contract .section.section-with-title h1,
   main.blue-contract .section.section-with-title h1,
+  div:where([role="dialog"]).blue-contract .section.section-with-title h2,
   main.blue-contract .section.section-with-title h2 {
     font-size: var(--heading-xxl-font-size);
     line-height: var(--heading-xxl-line-height);
     letter-spacing: var(--heading-xxl-letter-spacing);
   }
 
+  div:where([role="dialog"]).blue-contract .section.section-with-title > p:last-of-type,
   main.blue-contract .section.section-with-title > p:last-of-type {
     margin: 0 0 80px;
   }
@@ -1373,6 +1416,7 @@ main.blue-contract .section.section-with-title p {
 }
 
 /* common elements */
+.redesign-v2 div:where([role="dialog"]) label,
 .redesign-v2 main label {
   color: var(--c-grey-4);
   font-family: var(--font-family-heading);
@@ -1381,6 +1425,7 @@ main.blue-contract .section.section-with-title p {
   line-height: var(--f-subtitle-2-line-height);
 }
 
+.redesign-v2 div:where([role="dialog"]) input,
 .redesign-v2 main input {
   color: var(--c-grey-4);
   padding: 16px;
@@ -1392,6 +1437,7 @@ main.blue-contract .section.section-with-title p {
   line-height: var(--f-subtitle-2-line-height);
 }
 
+.redesign-v2 div:where([role="dialog"]) input:hover,
 .redesign-v2 main input:hover {
   border-color: var(--c-grey-2);
 }