@designcrowd/library.brand-page 6.2.0 → 6.2.1

package/lib/src/css/library.brand-page-preview.min.css

@@ -371,6 +371,9 @@ a.maker-anchor {
 .bp .tw-col-span-8 {
     grid-column: span 8 / span 8
 }
+.bp .tw-float-right {
+    float: right
+}
 .bp .tw-float-left {
     float: left
 }
@@ -1602,6 +1605,9 @@ a.maker-anchor {
 .bp .tw-grid-cols-7 {
     grid-template-columns: repeat(7, minmax(0, 1fr))
 }
+.bp .tw-grid-rows-2 {
+    grid-template-rows: repeat(2, minmax(0, 1fr))
+}
 .bp .tw-flex-row {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
@@ -1689,6 +1695,9 @@ a.maker-anchor {
         -ms-flex-pack: justify;
             justify-content: space-between
 }
+.bp .tw-justify-items-center {
+    justify-items: center
+}
 .bp .tw-gap-0 {
     gap: 0px
 }
@@ -7134,93 +7143,96 @@ select[data-v-665b8067] {
   margin: 0 auto;
 }
 
-.bp .root[data-v-32fe142c] {
-  --logo-width: var(--v5fd54c9a);
+.bp .root[data-v-c23d864e] {
+  --logo-width: var(--v62a07554);
   --logo-max-width: 20rem;
   --tab-nav-height: 56px;
   --hamburger-nav-height: 32px;
   --hamburger-nav-width: 32px;
 }
-.bp .layout[data-v-32fe142c] {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-}
-.bp .nav-container[data-v-32fe142c] {
+.bp .nav-container[data-v-c23d864e] {
   max-width: 100%;
   overflow: hidden;
 }
-.bp .logo-container[data-v-32fe142c] {
+.bp .logo-container[data-v-c23d864e] {
+}
+/* The rules below position this box; the button just fills whatever box it gets.
+   Never shrinks below its label: in the flex placements a wide nav compresses into its
+   carousel instead of wrapping the button's text (the grid placements floor it likewise). */
+.bp .cta-container[data-v-c23d864e] {
+  min-width: 0px;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
 }
 
 /* DESKTOP_TAB_1 */
-.bp .desktop-tab-horizontal-stack-left-logo-right-menu[data-v-32fe142c] {
+.bp .desktop-tab-horizontal-stack-left-logo-right-menu[data-v-c23d864e] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
-.bp .desktop-tab-horizontal-stack-left-logo-right-menu .nav-container[data-v-32fe142c] {
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+.bp .desktop-tab-horizontal-stack-left-logo-right-menu .nav-container[data-v-c23d864e] {
   margin-left: 1rem;
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 0%;
+          flex: 1 1 0%;
 }
-.bp .desktop-tab-horizontal-stack-left-logo-right-menu .nav-container__inner[data-v-32fe142c] {
-  display: inline-block;
+.bp .desktop-tab-horizontal-stack-left-logo-right-menu .nav-container__inner[data-v-c23d864e] {
   float: right;
+  display: inline-block;
   max-width: 100%;
 }
 
 /* DESKTOP_TAB_2 */
-.bp .desktop-tab-horizontal-stack-left-logo-left-menu[data-v-32fe142c] {
+.bp .desktop-tab-horizontal-stack-left-logo-left-menu[data-v-c23d864e] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
-.bp .desktop-tab-horizontal-stack-left-logo-left-menu .nav-container[data-v-32fe142c] {
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+.bp .desktop-tab-horizontal-stack-left-logo-left-menu .nav-container[data-v-c23d864e] {
   margin-left: 1rem;
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 0%;
+          flex: 1 1 0%;
 }
-.bp .desktop-tab-horizontal-stack-left-logo-left-menu .nav-container__inner[data-v-32fe142c] {
+.bp .desktop-tab-horizontal-stack-left-logo-left-menu .nav-container__inner[data-v-c23d864e] {
   display: inline-block;
   max-width: 100%;
 }
 
 /* DESKTOP_TAB_3 */
-.bp .desktop-tab-horizontal-stack-left-logo-centered-menu[data-v-32fe142c] {
+.bp .desktop-tab-horizontal-stack-left-logo-centered-menu[data-v-c23d864e] {
   display: grid;
   grid-template-columns:
     [logo-start] var(--logo-max-width) [logo-end nav-start] 1fr [nav-end] var(
       --logo-max-width
     )
     [cols-end];
+  margin-top: 1rem;
+  margin-bottom: 1rem;
   -webkit-column-gap: 1rem;
      -moz-column-gap: 1rem;
           column-gap: 1rem;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
 }
-.bp .desktop-tab-horizontal-stack-left-logo-centered-menu .logo-container[data-v-32fe142c] {
+.bp .desktop-tab-horizontal-stack-left-logo-centered-menu .logo-container[data-v-c23d864e] {
   grid-column: logo-start / logo-end;
   justify-self: start;
 }
-.bp .desktop-tab-horizontal-stack-left-logo-centered-menu .nav-container[data-v-32fe142c] {
+.bp .desktop-tab-horizontal-stack-left-logo-centered-menu .nav-container[data-v-c23d864e] {
   grid-column: nav-start / nav-end;
 }
-.bp .desktop-tab-horizontal-stack-left-logo-centered-menu .nav-container__inner[data-v-32fe142c] {
+.bp .desktop-tab-horizontal-stack-left-logo-centered-menu .nav-container__inner[data-v-c23d864e] {
   /* start - center content */
   display: inline-block;
   -webkit-transform: translateX(-50%);
           transform: translateX(-50%);
-  left: 50%;
   position: relative;
+  left: 50%;
   max-width: 100%;
   /* end - center content */
 }
 /* DESKTOP_TAB_4 */
-.bp .desktop-tab-horizontal-stack-centered-logo-right-menu[data-v-32fe142c] {
+.bp .desktop-tab-horizontal-stack-centered-logo-right-menu[data-v-c23d864e] {
   display: grid;
   -webkit-column-gap: 1rem;
      -moz-column-gap: 1rem;
@@ -7229,26 +7241,26 @@ select[data-v-665b8067] {
     [col-start] 1fr [logo-start] var(--logo-max-width)
     [logo-end nav-start] 1fr [nav-end];
 }
-.bp .desktop-tab-horizontal-stack-centered-logo-right-menu .logo-container[data-v-32fe142c] {
+.bp .desktop-tab-horizontal-stack-centered-logo-right-menu .logo-container[data-v-c23d864e] {
   grid-column: logo-start / logo-end;
 }
-.bp .desktop-tab-horizontal-stack-centered-logo-right-menu .nav-container[data-v-32fe142c] {
+.bp .desktop-tab-horizontal-stack-centered-logo-right-menu .nav-container[data-v-c23d864e] {
   grid-column: nav-start / nav-end;
 }
-.bp .desktop-tab-horizontal-stack-centered-logo-right-menu .nav-container__inner[data-v-32fe142c] {
+.bp .desktop-tab-horizontal-stack-centered-logo-right-menu .nav-container__inner[data-v-c23d864e] {
   /* start - align right content */
   float: right;
   max-width: 100%;
   /* end - align right content */
 }
 /* DESKTOP_TAB_5 */
-.bp .desktop-tab-vertical-stack-centered-logo-centered-menu[data-v-32fe142c] {
+.bp .desktop-tab-vertical-stack-centered-logo-centered-menu[data-v-c23d864e] {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   justify-items: center;
 }
-.bp .desktop-tab-vertical-stack-centered-logo-centered-menu.show-nav[data-v-32fe142c] {
+.bp .desktop-tab-vertical-stack-centered-logo-centered-menu.show-nav[data-v-c23d864e] {
   display: grid;
   grid-template-rows: repeat(2, minmax(0, 1fr));
   row-gap: 1rem;
@@ -7257,24 +7269,24 @@ select[data-v-665b8067] {
     [row2-end];
 }
 .bp .desktop-tab-vertical-stack-centered-logo-centered-menu.show-nav
-  .logo-container[data-v-32fe142c] {
+  .logo-container[data-v-c23d864e] {
   grid-row: row1-start / row1-end;
 }
 .bp .desktop-tab-vertical-stack-centered-logo-centered-menu.show-nav
-  .nav-container[data-v-32fe142c] {
+  .nav-container[data-v-c23d864e] {
   grid-row: row2-start / row2-end;
   width: 100%;
 }
 .bp .desktop-tab-vertical-stack-centered-logo-centered-menu.show-nav
-  .nav-container__inner[data-v-32fe142c] {
+  .nav-container__inner[data-v-c23d864e] {
   display: inline-block;
   -webkit-transform: translateX(-50%);
           transform: translateX(-50%);
-  left: 50%;
   position: relative;
+  left: 50%;
   max-width: 100%;
 }
-.bp .desktop-tab-vertical-stack-centered-logo-centered-menu.no-nav[data-v-32fe142c] {
+.bp .desktop-tab-vertical-stack-centered-logo-centered-menu.no-nav[data-v-c23d864e] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -7284,14 +7296,14 @@ select[data-v-665b8067] {
 }
 
 /* MOBILE_TAB_1 */
-.bp .mobile-tab-vertical-stack-centered-logo-centered-menu[data-v-32fe142c] {
+.bp .mobile-tab-vertical-stack-centered-logo-centered-menu[data-v-c23d864e] {
+  width: 100%;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   justify-items: center;
-  width: 100%;
 }
-.bp .mobile-tab-vertical-stack-centered-logo-centered-menu.show-nav[data-v-32fe142c] {
+.bp .mobile-tab-vertical-stack-centered-logo-centered-menu.show-nav[data-v-c23d864e] {
   display: grid;
   row-gap: 1rem;
   grid-template-rows:
@@ -7299,78 +7311,81 @@ select[data-v-665b8067] {
     [row2-end];
 }
 .bp .mobile-tab-vertical-stack-centered-logo-centered-menu.show-nav
-  .logo-container[data-v-32fe142c] {
+  .logo-container[data-v-c23d864e] {
   grid-row: row1-start / row1-end;
 }
-.bp .mobile-tab-vertical-stack-centered-logo-centered-menu.show-nav .nav-container[data-v-32fe142c] {
+.bp .mobile-tab-vertical-stack-centered-logo-centered-menu.show-nav .nav-container[data-v-c23d864e] {
   grid-row: row2-start / row2-end;
   width: 100%;
 }
-.bp .mobile-tab-vertical-stack-centered-logo-centered-menu.no-nav[data-v-32fe142c] {
+.bp .mobile-tab-vertical-stack-centered-logo-centered-menu.no-nav[data-v-c23d864e] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
 
 /* DESKTOP_TAB_6 */
-.bp .desktop-tab-vertical-stack-centered-menu-centered-logo.show-nav[data-v-32fe142c] {
+.bp .desktop-tab-vertical-stack-centered-menu-centered-logo.show-nav[data-v-c23d864e] {
   display: grid;
   grid-template-rows:
     [row1-start] var(--tab-nav-height)
     [row1-end row2-start] 1fr [row2-end];
-  row-gap: 1rem;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   justify-items: center;
+  row-gap: 1rem;
 }
 .bp .desktop-tab-vertical-stack-centered-menu-centered-logo.show-nav
-  .logo-container[data-v-32fe142c] {
+  .logo-container[data-v-c23d864e] {
   grid-row: row2-start / row2-end;
   text-align: center;
 }
 .bp .desktop-tab-vertical-stack-centered-menu-centered-logo.show-nav
-  .nav-container[data-v-32fe142c] {
+  .nav-container[data-v-c23d864e] {
   grid-row: row1-start / row1-end;
 }
-.bp .layout desktop-tab-vertical-stack-centered-menu-centered-logo.no-nav[data-v-32fe142c] {
+.bp .desktop-tab-vertical-stack-centered-menu-centered-logo.no-nav[data-v-c23d864e] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
 }
 /*  MOBILE_TAB_2 */
-.bp .mobile-tab-vertical-stack-centered-menu-centered-logo[data-v-32fe142c] {
+.bp .mobile-tab-vertical-stack-centered-menu-centered-logo[data-v-c23d864e] {
+  width: 100%;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   justify-items: center;
-  width: 100%;
 }
-.bp .mobile-tab-vertical-stack-centered-menu-centered-logo.show-nav[data-v-32fe142c] {
+.bp .mobile-tab-vertical-stack-centered-menu-centered-logo.show-nav[data-v-c23d864e] {
   display: grid;
   grid-template-rows:
     [row1-start] var(--tab-nav-height)
     [row1-end row2-start] 1fr [row2-end];
-  row-gap: 1rem;
   margin-top: 1rem;
+  row-gap: 1rem;
 }
 .bp .mobile-tab-vertical-stack-centered-menu-centered-logo.show-nav
-  .logo-container[data-v-32fe142c] {
+  .logo-container[data-v-c23d864e] {
   grid-row: row2-start / row2-end;
 }
-.bp .mobile-tab-vertical-stack-centered-menu-centered-logo.show-nav .nav-container[data-v-32fe142c] {
+.bp .mobile-tab-vertical-stack-centered-menu-centered-logo.show-nav .nav-container[data-v-c23d864e] {
   grid-row: row1-start / row1-end;
   width: 100%;
 }
-.bp .mobile-tab-vertical-stack-centered-menu-centered-logo.no-nav[data-v-32fe142c] {
+.bp .mobile-tab-vertical-stack-centered-menu-centered-logo.no-nav[data-v-c23d864e] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
 
 /* DESKTOP_TAB_NO_LOGO_1, DESKTOP_HAMBURGER_NO_LOGO_1 */
-.bp .desktop-tab-left-menu-no-logo[data-v-32fe142c],
-.bp .desktop-hamburger-no-logo-left-menu[data-v-32fe142c] {
+.bp .desktop-tab-left-menu-no-logo[data-v-c23d864e],
+.bp .desktop-hamburger-no-logo-left-menu[data-v-c23d864e] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -7378,15 +7393,15 @@ select[data-v-665b8067] {
       -ms-flex-pack: start;
           justify-content: flex-start;
 }
-.bp .desktop-tab-left-menu-no-logo .logo-container[data-v-32fe142c],
-.bp .desktop-hamburger-no-logo-left-menu .logo-container[data-v-32fe142c] {
+.bp .desktop-tab-left-menu-no-logo .logo-container[data-v-c23d864e],
+.bp .desktop-hamburger-no-logo-left-menu .logo-container[data-v-c23d864e] {
   display: none;
 }
 
 /* DESKTOP_TAB_NO_LOGO_2, DESKTOP_HAMBURGER_NO_LOGO_2, MOBILE_TAB_NO_LOGO_1 */
-.bp .desktop-tab-centered-menu-no-logo[data-v-32fe142c],
-.bp .desktop-hamburger-no-logo-centered-menu[data-v-32fe142c],
-.bp .mobile-tab-centered-menu-no-logo[data-v-32fe142c] {
+.bp .desktop-tab-centered-menu-no-logo[data-v-c23d864e],
+.bp .desktop-hamburger-no-logo-centered-menu[data-v-c23d864e],
+.bp .mobile-tab-centered-menu-no-logo[data-v-c23d864e] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -7394,15 +7409,15 @@ select[data-v-665b8067] {
       -ms-flex-pack: center;
           justify-content: center;
 }
-.bp .desktop-tab-centered-menu-no-logo .logo-container[data-v-32fe142c],
-.bp .desktop-hamburger-no-logo-centered-menu .logo-container[data-v-32fe142c],
-.bp .mobile-tab-centered-menu-no-logo .logo-container[data-v-32fe142c] {
+.bp .desktop-tab-centered-menu-no-logo .logo-container[data-v-c23d864e],
+.bp .desktop-hamburger-no-logo-centered-menu .logo-container[data-v-c23d864e],
+.bp .mobile-tab-centered-menu-no-logo .logo-container[data-v-c23d864e] {
   display: none;
 }
 
 /* DESKTOP_TAB_NO_LOGO_3, DESKTOP_HAMBURGER_NO_LOGO_3 */
-.bp .desktop-tab-right-menu-no-logo[data-v-32fe142c],
-.bp .desktop-hamburger-no-logo-right-menu[data-v-32fe142c] {
+.bp .desktop-tab-right-menu-no-logo[data-v-c23d864e],
+.bp .desktop-hamburger-no-logo-right-menu[data-v-c23d864e] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -7410,24 +7425,24 @@ select[data-v-665b8067] {
       -ms-flex-pack: end;
           justify-content: flex-end;
 }
-.bp .desktop-tab-right-menu-no-logo .logo-container[data-v-32fe142c],
-.bp .desktop-hamburger-no-logo-right-menu .logo-container[data-v-32fe142c] {
+.bp .desktop-tab-right-menu-no-logo .logo-container[data-v-c23d864e],
+.bp .desktop-hamburger-no-logo-right-menu .logo-container[data-v-c23d864e] {
   display: none;
 }
 
 /* DESKTOP_HAMBURGER_1, MOBILE_HAMBURGER_1 */
-.bp .desktop-hamburger-horizontal-stack-left-logo-right-menu[data-v-32fe142c],
-.bp .mobile-hamburger-horizontal-stack-left-logo-right-menu[data-v-32fe142c] {
+.bp .desktop-hamburger-horizontal-stack-left-logo-right-menu[data-v-c23d864e],
+.bp .mobile-hamburger-horizontal-stack-left-logo-right-menu[data-v-c23d864e] {
   display: grid;
   grid-template-columns: [logo-start] auto [nav-start] var(
       --hamburger-nav-width
     );
   -webkit-box-align: start;
       -ms-flex-align: start;
-          align-items: start;
+          align-items: flex-start;
 }
-.bp .desktop-hamburger-horizontal-stack-left-logo-right-menu .logo-container[data-v-32fe142c],
-.bp .mobile-hamburger-horizontal-stack-left-logo-right-menu .logo-container[data-v-32fe142c] {
+.bp .desktop-hamburger-horizontal-stack-left-logo-right-menu .logo-container[data-v-c23d864e],
+.bp .mobile-hamburger-horizontal-stack-left-logo-right-menu .logo-container[data-v-c23d864e] {
   margin-right: 1rem;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -7437,25 +7452,26 @@ select[data-v-665b8067] {
           justify-content: flex-start;
   grid-column: logo-start;
 }
-.bp .desktop-hamburger-horizontal-stack-left-logo-right-menu .nav-container[data-v-32fe142c],
-.bp .mobile-hamburger-horizontal-stack-left-logo-right-menu .nav-container[data-v-32fe142c] {
+.bp .desktop-hamburger-horizontal-stack-left-logo-right-menu .nav-container[data-v-c23d864e],
+.bp .mobile-hamburger-horizontal-stack-left-logo-right-menu .nav-container[data-v-c23d864e] {
   grid-column: nav-start;
-  margin: var(--page-padding) 0;
+  /* The icon centres on the row's height (the logo is usually the tallest thing in it). */
+  align-self: center;
 }
 
 /* DESKTOP_HAMBURGER_2, MOBILE_HAMBURGER_2 */
-.bp .desktop-hamburger-horizontal-stack-centered-logo-right-menu[data-v-32fe142c],
-.bp .mobile-hamburger-horizontal-stack-centered-logo-right-menu[data-v-32fe142c] {
+.bp .desktop-hamburger-horizontal-stack-centered-logo-right-menu[data-v-c23d864e],
+.bp .mobile-hamburger-horizontal-stack-centered-logo-right-menu[data-v-c23d864e] {
   display: grid;
   grid-template-columns:
     [start] var(--hamburger-nav-width)
     [logo-start] auto [nav-start] var(--hamburger-nav-width);
   -webkit-box-align: start;
       -ms-flex-align: start;
-          align-items: start;
+          align-items: flex-start;
 }
-.bp .desktop-hamburger-horizontal-stack-centered-logo-right-menu .logo-container[data-v-32fe142c],
-.bp .mobile-hamburger-horizontal-stack-centered-logo-right-menu .logo-container[data-v-32fe142c] {
+.bp .desktop-hamburger-horizontal-stack-centered-logo-right-menu .logo-container[data-v-c23d864e],
+.bp .mobile-hamburger-horizontal-stack-centered-logo-right-menu .logo-container[data-v-c23d864e] {
   margin-left: 1rem;
   margin-right: 1rem;
   display: -webkit-box;
@@ -7466,14 +7482,14 @@ select[data-v-665b8067] {
           justify-content: center;
   grid-column: logo-start;
 }
-.bp .desktop-hamburger-horizontal-stack-centered-logo-right-menu .nav-container[data-v-32fe142c],
-.bp .mobile-hamburger-horizontal-stack-centered-logo-right-menu .nav-container[data-v-32fe142c] {
+.bp .desktop-hamburger-horizontal-stack-centered-logo-right-menu .nav-container[data-v-c23d864e],
+.bp .mobile-hamburger-horizontal-stack-centered-logo-right-menu .nav-container[data-v-c23d864e] {
   grid-column: nav-start;
-  margin: var(--page-padding) 0;
+  align-self: center;
 }
 
 /* MOBILE_HAMBURGER_3 */
-.bp .mobile-hamburger-horizontal-stack-left-menu-centered-logo[data-v-32fe142c] {
+.bp .mobile-hamburger-horizontal-stack-left-menu-centered-logo[data-v-c23d864e] {
   display: grid;
   grid-template-columns: var(--hamburger-nav-width) auto var(
       --hamburger-nav-width
@@ -7481,9 +7497,9 @@ select[data-v-665b8067] {
   grid-template-areas: 'a b c';
   -webkit-box-align: start;
       -ms-flex-align: start;
-          align-items: start;
+          align-items: flex-start;
 }
-.bp .mobile-hamburger-horizontal-stack-left-menu-centered-logo .logo-container[data-v-32fe142c] {
+.bp .mobile-hamburger-horizontal-stack-left-menu-centered-logo .logo-container[data-v-c23d864e] {
   margin-left: 1rem;
   margin-right: 1rem;
   display: -webkit-box;
@@ -7494,26 +7510,26 @@ select[data-v-665b8067] {
           justify-content: center;
   grid-area: b;
 }
-.bp .mobile-hamburger-horizontal-stack-left-menu-centered-logo .nav-container[data-v-32fe142c] {
+.bp .mobile-hamburger-horizontal-stack-left-menu-centered-logo .nav-container[data-v-c23d864e] {
   grid-area: a;
-  margin: var(--page-padding) 0;
+  align-self: center;
 }
 .bp .mobile-hamburger-horizontal-stack-left-menu-centered-logo
-  .nav-container__inner[data-v-32fe142c] {
+  .nav-container__inner[data-v-c23d864e] {
   float: left;
   max-width: 100%;
 }
 
 /* MOBILE_HAMBURGER_4 */
-.bp .mobile-hamburger-horizontal-stack-left-menu-left-logo[data-v-32fe142c] {
+.bp .mobile-hamburger-horizontal-stack-left-menu-left-logo[data-v-c23d864e] {
   display: grid;
   grid-template-columns: var(--hamburger-nav-width) auto;
   grid-template-areas: 'a b';
   -webkit-box-align: start;
       -ms-flex-align: start;
-          align-items: start;
+          align-items: flex-start;
 }
-.bp .mobile-hamburger-horizontal-stack-left-menu-left-logo .logo-container[data-v-32fe142c] {
+.bp .mobile-hamburger-horizontal-stack-left-menu-left-logo .logo-container[data-v-c23d864e] {
   margin-left: 1rem;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -7523,17 +7539,17 @@ select[data-v-665b8067] {
           justify-content: flex-start;
   grid-area: b;
 }
-.bp .mobile-hamburger-horizontal-stack-left-menu-left-logo .nav-container[data-v-32fe142c] {
+.bp .mobile-hamburger-horizontal-stack-left-menu-left-logo .nav-container[data-v-c23d864e] {
   grid-area: a;
-  margin: var(--page-padding) 0;
+  align-self: center;
 }
-.bp .mobile-hamburger-horizontal-stack-left-menu-left-logo .nav-container__inner[data-v-32fe142c] {
+.bp .mobile-hamburger-horizontal-stack-left-menu-left-logo .nav-container__inner[data-v-c23d864e] {
   float: left;
   max-width: 100%;
 }
 
 /* MOBILE_HAMBURGER_NO_LOGO_1 */
-.bp .mobile-hamburger-no-logo-left-menu[data-v-32fe142c] {
+.bp .mobile-hamburger-no-logo-left-menu[data-v-c23d864e] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -7541,12 +7557,12 @@ select[data-v-665b8067] {
       -ms-flex-pack: start;
           justify-content: flex-start;
 }
-.bp .mobile-hamburger-no-logo-left-menu .logo-container[data-v-32fe142c] {
+.bp .mobile-hamburger-no-logo-left-menu .logo-container[data-v-c23d864e] {
   display: none;
 }
 
 /* MOBILE_HAMBURGER_NO_LOGO_2 */
-.bp .mobile-hamburger-no-logo-centered-menu[data-v-32fe142c] {
+.bp .mobile-hamburger-no-logo-centered-menu[data-v-c23d864e] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -7554,11 +7570,11 @@ select[data-v-665b8067] {
       -ms-flex-pack: center;
           justify-content: center;
 }
-.bp .mobile-hamburger-no-logo-centered-menu .logo-container[data-v-32fe142c] {
+.bp .mobile-hamburger-no-logo-centered-menu .logo-container[data-v-c23d864e] {
   display: none;
 }
 /* MOBILE_HAMBURGER_NO_LOGO_3 */
-.bp .mobile-hamburger-no-logo-right-menu[data-v-32fe142c] {
+.bp .mobile-hamburger-no-logo-right-menu[data-v-c23d864e] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -7566,10 +7582,364 @@ select[data-v-665b8067] {
       -ms-flex-pack: end;
           justify-content: flex-end;
 }
-.bp .mobile-hamburger-no-logo-right-menu .logo-container[data-v-32fe142c] {
+.bp .mobile-hamburger-no-logo-right-menu .logo-container[data-v-c23d864e] {
   display: none;
 }
 
+/* Button placement — all rules only apply while the button is on (.has-header-cta), so headers without it look exactly as before. */
+
+/* The generic Button ships section spacing; the header row, as the caller, strips it here:
+   no stack margin, no maker height floor, no icon spacer/label offset (icon room it never uses). */
+.bp .cta-container[data-v-c23d864e] .bp-button,
+.bp .cta-mirror[data-v-c23d864e] .bp-button {
+  margin-bottom: 0;
+  min-height: 0;
+}
+.bp .cta-container[data-v-c23d864e] .c-button__no-icon,
+.bp .cta-mirror[data-v-c23d864e] .c-button__no-icon {
+  display: none;
+}
+/* Target the base label class, not a specific --offset-* variant, so the icon-gutter shift is
+   neutralised for whichever offset the button carries — a future offset swap can't slide the label. */
+.bp .cta-container[data-v-c23d864e] .c-button__label,
+.bp .cta-mirror[data-v-c23d864e] .c-button__label {
+  -webkit-transform: none;
+          transform: none;
+}
+/* Decorative styles (arrow/brush/paper) size by percentage, which collapses to zero inside the
+   header's content-sized tracks — hug the label instead. Full-width rows re-stretch below. */
+.bp .cta-container[data-v-c23d864e] .bp-style-wrapper,
+.bp .cta-mirror[data-v-c23d864e] .bp-style-wrapper {
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+/* Invisible size-peer of the CTA (see template). Sized exactly like .cta-container — same
+   button-normalising :deep rules above, same max-width cap — so the leading mirror track it
+   occupies matches the trailing button track. Per-style placement is defined below. */
+.bp .cta-mirror[data-v-c23d864e] {
+  visibility: hidden;
+  pointer-events: none;
+  min-width: 0px;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  max-width: var(--logo-max-width);
+}
+
+/* DESKTOP_TAB_1/2, TAB_NO_LOGO_3: extra flex child one gap after the nav — beside the links, or at the right edge when the nav is right-aligned. */
+.bp .desktop-tab-horizontal-stack-left-logo-right-menu .cta-container[data-v-c23d864e],
+.bp .desktop-tab-horizontal-stack-left-logo-left-menu .cta-container[data-v-c23d864e],
+.bp .desktop-tab-right-menu-no-logo .cta-container[data-v-c23d864e] {
+  margin-left: 1rem;
+}
+
+/* TAB_NO_LOGO_1: the nav sits left, so the button pins to the right edge — the same spot
+   whether the nav is shown or not (BP-6120). */
+.bp .desktop-tab-left-menu-no-logo .cta-container[data-v-c23d864e] {
+  margin-left: auto;
+}
+
+/* Same styles with the nav hidden (single page): no nav to sit beside — button takes the right edge. */
+.bp .desktop-tab-horizontal-stack-left-logo-right-menu.no-nav .cta-container[data-v-c23d864e],
+.bp .desktop-tab-horizontal-stack-left-logo-left-menu.no-nav .cta-container[data-v-c23d864e] {
+  margin-left: auto;
+}
+
+/* DESKTOP_TAB_3: button uses the existing spare right column, nothing else moves. */
+.bp .desktop-tab-horizontal-stack-left-logo-centered-menu .cta-container[data-v-c23d864e] {
+  grid-column: nav-end / cols-end;
+  justify-self: end;
+}
+
+/* DESKTOP_TAB_4: adds a column for the button after the nav links, mirrored by a leading
+   track sized by the hidden button copy so the logo keeps the header's true centre. */
+.bp .desktop-tab-horizontal-stack-centered-logo-right-menu.has-header-cta[data-v-c23d864e] {
+  grid-template-columns:
+    [mirror-start] minmax(-webkit-max-content, auto) [col-start] 1fr
+    [logo-start] var(--logo-max-width)
+    /* The button's track never shrinks below its label, so a wide nav compresses instead. */
+    [logo-end nav-start] 1fr [nav-end cta-start] minmax(-webkit-max-content, auto)
+    [cta-end];
+  grid-template-columns:
+    [mirror-start] minmax(max-content, auto) [col-start] 1fr
+    [logo-start] var(--logo-max-width)
+    /* The button's track never shrinks below its label, so a wide nav compresses instead. */
+    [logo-end nav-start] 1fr [nav-end cta-start] minmax(max-content, auto)
+    [cta-end];
+}
+.bp .desktop-tab-horizontal-stack-centered-logo-right-menu .cta-container[data-v-c23d864e] {
+  grid-column: cta-start / cta-end;
+}
+.bp .desktop-tab-horizontal-stack-centered-logo-right-menu .cta-mirror[data-v-c23d864e] {
+  grid-column: mirror-start / col-start;
+  /* Pinned to row 1: the mirror follows the real CTA in the DOM, so auto-placement — whose
+     cursor never moves backwards along a row — would drop it onto a second row and grow the
+     header band by the button's height. */
+  grid-row: 1;
+}
+
+/* DESKTOP_TAB_6, TAB_NO_LOGO_2: nav and button share the top row, so the button takes a
+   trailing column mirrored by the leading one — the nav pays for the collision it would
+   otherwise have. */
+.bp .desktop-tab-vertical-stack-centered-menu-centered-logo.show-nav.has-header-cta[data-v-c23d864e],
+.bp .desktop-tab-centered-menu-no-logo.show-nav.has-header-cta[data-v-c23d864e] {
+  display: grid;
+  /* The trailing track never shrinks below the button, so a wide nav compresses (its carousel
+     scrolls) rather than running under it; the leading track floors at the hidden button copy
+     so nav and logo hold the header's true centre even at full compression. */
+  grid-template-columns:
+    minmax(-webkit-max-content, 1fr) [nav-start] auto
+    [nav-end cta-start] minmax(-webkit-max-content, 1fr) [cta-end];
+  grid-template-columns:
+    minmax(max-content, 1fr) [nav-start] auto
+    [nav-end cta-start] minmax(max-content, 1fr) [cta-end];
+}
+.bp .desktop-tab-vertical-stack-centered-menu-centered-logo.show-nav.has-header-cta
+  .nav-container[data-v-c23d864e],
+.bp .desktop-tab-centered-menu-no-logo.show-nav.has-header-cta .nav-container[data-v-c23d864e] {
+  grid-column: nav-start / nav-end;
+}
+
+/* The logo shares the nav's track: that track widens to whichever is bigger, so both stay centered. */
+.bp .desktop-tab-vertical-stack-centered-menu-centered-logo.show-nav.has-header-cta
+  .logo-container[data-v-c23d864e] {
+  grid-column: nav-start / nav-end;
+}
+.bp .desktop-tab-vertical-stack-centered-menu-centered-logo.show-nav.has-header-cta
+  .cta-container[data-v-c23d864e],
+.bp .desktop-tab-centered-menu-no-logo.show-nav.has-header-cta .cta-container[data-v-c23d864e] {
+  grid-column: cta-start / cta-end;
+  /* Top row, right edge — the shipped corner position. */
+  grid-row: 1;
+  justify-self: end;
+  align-self: start;
+}
+.bp .desktop-tab-vertical-stack-centered-menu-centered-logo.show-nav.has-header-cta
+  .cta-mirror[data-v-c23d864e],
+.bp .desktop-tab-centered-menu-no-logo.show-nav.has-header-cta .cta-mirror[data-v-c23d864e] {
+  grid-column: 1 / nav-start;
+  grid-row: 1;
+}
+
+/* DESKTOP_TAB_5: the button shares the TOP row with the logo — the nav lives on its own
+   full-width row below — so an absolute corner pin collides with nothing and, unlike a
+   column, costs the nav no width. */
+.bp .desktop-tab-vertical-stack-centered-logo-centered-menu.has-header-cta[data-v-c23d864e] {
+  position: relative;
+}
+.bp .desktop-tab-vertical-stack-centered-logo-centered-menu .cta-container[data-v-c23d864e] {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+}
+
+/* TAB_6 with the nav hidden: no nav to collide with, so the button keeps its corner pin
+   (absolute, so it never pushes the logo off-centre; the logo keeps the band's height). */
+.bp .desktop-tab-vertical-stack-centered-menu-centered-logo.no-nav.has-header-cta[data-v-c23d864e] {
+  position: relative;
+}
+.bp .desktop-tab-vertical-stack-centered-menu-centered-logo.no-nav .cta-container[data-v-c23d864e] {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+}
+
+/* TAB_NO_LOGO_2 with the nav hidden: the button is the band's only content, so it stays in
+   flow (an absolute pin would collapse the header to zero height) at the same right edge. */
+.bp .desktop-tab-centered-menu-no-logo.no-nav .cta-container[data-v-c23d864e] {
+  margin-left: auto;
+}
+
+/* MOBILE_TAB_1/2: full-width button row in the centered stack. */
+.bp .mobile-tab-vertical-stack-centered-logo-centered-menu .cta-container[data-v-c23d864e],
+.bp .mobile-tab-vertical-stack-centered-menu-centered-logo .cta-container[data-v-c23d864e] {
+  width: 100%;
+  justify-self: stretch;
+}
+/* The row is definite-width, so the decorated button can span it like a section's. */
+.bp .mobile-tab-vertical-stack-centered-logo-centered-menu
+  .cta-container[data-v-c23d864e]
+  .bp-style-wrapper,
+.bp .mobile-tab-vertical-stack-centered-menu-centered-logo
+  .cta-container[data-v-c23d864e]
+  .bp-style-wrapper,
+.bp .mobile-tab-centered-menu-no-logo .cta-container[data-v-c23d864e] .bp-style-wrapper,
+.bp .mobile-hamburger-no-logo-left-menu.no-nav
+  .cta-container[data-v-c23d864e]
+  .bp-style-wrapper,
+.bp .mobile-hamburger-no-logo-centered-menu.no-nav
+  .cta-container[data-v-c23d864e]
+  .bp-style-wrapper,
+.bp .mobile-hamburger-no-logo-right-menu.no-nav
+  .cta-container[data-v-c23d864e]
+  .bp-style-wrapper,
+.bp .mobile-hamburger-horizontal-stack-left-logo-right-menu.no-nav
+  .cta-container[data-v-c23d864e]
+  .bp-style-wrapper,
+.bp .mobile-hamburger-horizontal-stack-centered-logo-right-menu.no-nav
+  .cta-container[data-v-c23d864e]
+  .bp-style-wrapper,
+.bp .mobile-hamburger-horizontal-stack-left-menu-centered-logo.no-nav
+  .cta-container[data-v-c23d864e]
+  .bp-style-wrapper,
+.bp .mobile-hamburger-horizontal-stack-left-menu-left-logo.no-nav
+  .cta-container[data-v-c23d864e]
+  .bp-style-wrapper {
+  width: 100%;
+}
+
+/* MOBILE_TAB_1/2 with the nav hidden: the stack is a plain flex row, so the button wraps below it. */
+.bp .mobile-tab-vertical-stack-centered-logo-centered-menu.no-nav.has-header-cta[data-v-c23d864e],
+.bp .mobile-tab-vertical-stack-centered-menu-centered-logo.no-nav.has-header-cta[data-v-c23d864e] {
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+
+/* MOBILE_TAB_NO_LOGO_1 (nav shown or not — its flex-centre stack wraps the button either way)
+   and MOBILE_HAMBURGER_NO_LOGO_1..3 with the nav hidden: button wraps onto its own full-width
+   line below the nav, one row gap apart (the same gap the with-logo stacks use). */
+.bp .mobile-tab-centered-menu-no-logo.has-header-cta[data-v-c23d864e],
+.bp .mobile-hamburger-no-logo-left-menu.no-nav.has-header-cta[data-v-c23d864e],
+.bp .mobile-hamburger-no-logo-centered-menu.no-nav.has-header-cta[data-v-c23d864e],
+.bp .mobile-hamburger-no-logo-right-menu.no-nav.has-header-cta[data-v-c23d864e] {
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  row-gap: 1rem;
+}
+.bp .mobile-tab-centered-menu-no-logo .cta-container[data-v-c23d864e],
+.bp .mobile-hamburger-no-logo-left-menu.no-nav .cta-container[data-v-c23d864e],
+.bp .mobile-hamburger-no-logo-centered-menu.no-nav .cta-container[data-v-c23d864e],
+.bp .mobile-hamburger-no-logo-right-menu.no-nav .cta-container[data-v-c23d864e] {
+  width: 100%;
+}
+
+/* DESKTOP_HAMBURGER_1: button gets its own column just before the hamburger icon. */
+.bp .desktop-hamburger-horizontal-stack-left-logo-right-menu.has-header-cta[data-v-c23d864e] {
+  grid-template-columns: [logo-start] 1fr [cta-start] auto [nav-start] var(
+      --hamburger-nav-width
+    );
+}
+.bp .desktop-hamburger-horizontal-stack-left-logo-right-menu .cta-container[data-v-c23d864e] {
+  grid-column: cta-start;
+  /* Without an explicit row the button wraps onto a second row. */
+  grid-row: 1;
+  align-self: center;
+  /* Same gap the nav-bar styles keep between links and button. */
+  margin-right: 1rem;
+}
+
+/* DESKTOP_HAMBURGER_2: button and icon share the trailing track (the button's right margin
+   reserves the icon's spot), mirrored by a leading 1fr so the logo stays truly centered.
+   The track's max-content floor means a tight header shifts the logo instead of overlapping. */
+.bp .desktop-hamburger-horizontal-stack-centered-logo-right-menu.has-header-cta[data-v-c23d864e] {
+  grid-template-columns:
+    minmax(-webkit-max-content, 1fr)
+    [logo-start] auto [right-start] minmax(-webkit-max-content, 1fr);
+  grid-template-columns:
+    minmax(max-content, 1fr)
+    [logo-start] auto [right-start] minmax(max-content, 1fr);
+}
+.bp .desktop-hamburger-horizontal-stack-centered-logo-right-menu.has-header-cta
+  .logo-container[data-v-c23d864e] {
+  grid-column: logo-start;
+}
+.bp .desktop-hamburger-horizontal-stack-centered-logo-right-menu.has-header-cta
+  .nav-container[data-v-c23d864e] {
+  grid-column: right-start;
+  grid-row: 1;
+  justify-self: end;
+}
+.bp .desktop-hamburger-horizontal-stack-centered-logo-right-menu .cta-container[data-v-c23d864e] {
+  grid-column: right-start;
+  grid-row: 1;
+  justify-self: end;
+  align-self: center;
+  /* Sits left of the icon: the old icon column's width plus the usual 1rem gap. */
+  margin-right: calc(var(--hamburger-nav-width) + 1rem);
+}
+/* The mirror reserves the icon's spot the same way the real button does (margin-right), so the
+   leading track equals button + icon + gap and the logo stays centred. */
+.bp .desktop-hamburger-horizontal-stack-centered-logo-right-menu.has-header-cta
+  .cta-mirror[data-v-c23d864e] {
+  grid-column: 1;
+  grid-row: 1;
+  margin-right: calc(var(--hamburger-nav-width) + 1rem);
+}
+
+/* Single page: no nav means no icon, so the button takes the right edge and the
+   leading mirror shrinks to just the button's width. */
+.bp .desktop-hamburger-horizontal-stack-centered-logo-right-menu.no-nav.has-header-cta[data-v-c23d864e] {
+  grid-template-columns:
+    minmax(-webkit-max-content, 1fr)
+    [logo-start] auto [right-start] minmax(-webkit-max-content, 1fr);
+  grid-template-columns:
+    minmax(max-content, 1fr)
+    [logo-start] auto [right-start] minmax(max-content, 1fr);
+}
+.bp .desktop-hamburger-horizontal-stack-centered-logo-right-menu.no-nav
+  .cta-container[data-v-c23d864e],
+.bp .desktop-hamburger-horizontal-stack-centered-logo-right-menu.no-nav
+  .cta-mirror[data-v-c23d864e] {
+  /* Single page: no icon to reserve. */
+  margin-right: 0;
+}
+
+/* DESKTOP_HAMBURGER_NO_LOGO_1..3: button shows before the icon. */
+.bp .desktop-hamburger-no-logo-left-menu .cta-container[data-v-c23d864e],
+.bp .desktop-hamburger-no-logo-centered-menu .cta-container[data-v-c23d864e],
+.bp .desktop-hamburger-no-logo-right-menu .cta-container[data-v-c23d864e] {
+  -webkit-box-ordinal-group: 0;
+      -ms-flex-order: -1;
+          order: -1;
+  margin-right: 1rem;
+  -ms-flex-item-align: center;
+      align-self: center;
+}
+
+/* With the button on, icon + button always sit at the right whatever alignment the stored
+   style carries — the display-style picker is hidden in this state (HeaderDisplayStyle.vue). */
+.bp .desktop-hamburger-no-logo-left-menu.has-header-cta[data-v-c23d864e],
+.bp .desktop-hamburger-no-logo-centered-menu.has-header-cta[data-v-c23d864e] {
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
+}
+
+/* MOBILE_HAMBURGER_1..4 with the nav hidden (single page): no side menu exists, so the button gets a full-width row below the logo. */
+.bp .mobile-hamburger-horizontal-stack-left-logo-right-menu.no-nav .cta-container[data-v-c23d864e],
+.bp .mobile-hamburger-horizontal-stack-centered-logo-right-menu.no-nav
+  .cta-container[data-v-c23d864e],
+.bp .mobile-hamburger-horizontal-stack-left-menu-centered-logo.no-nav
+  .cta-container[data-v-c23d864e],
+.bp .mobile-hamburger-horizontal-stack-left-menu-left-logo.no-nav .cta-container[data-v-c23d864e] {
+  grid-column: 1 / -1;
+  margin-top: 1rem;
+  width: 100%;
+}
+
+/* Desktop placements: cap the button so a long label wraps to the next line (like the
+   banner's button) instead of stretching across the header. Mobile rows stay full-width. */
+.bp .desktop-tab-horizontal-stack-left-logo-right-menu .cta-container[data-v-c23d864e],
+.bp .desktop-tab-horizontal-stack-left-logo-left-menu .cta-container[data-v-c23d864e],
+.bp .desktop-tab-horizontal-stack-left-logo-centered-menu .cta-container[data-v-c23d864e],
+.bp .desktop-tab-horizontal-stack-centered-logo-right-menu .cta-container[data-v-c23d864e],
+.bp .desktop-tab-vertical-stack-centered-logo-centered-menu .cta-container[data-v-c23d864e],
+.bp .desktop-tab-vertical-stack-centered-menu-centered-logo .cta-container[data-v-c23d864e],
+.bp .desktop-tab-left-menu-no-logo .cta-container[data-v-c23d864e],
+.bp .desktop-tab-centered-menu-no-logo .cta-container[data-v-c23d864e],
+.bp .desktop-tab-right-menu-no-logo .cta-container[data-v-c23d864e],
+.bp .desktop-hamburger-horizontal-stack-left-logo-right-menu .cta-container[data-v-c23d864e],
+.bp .desktop-hamburger-horizontal-stack-centered-logo-right-menu .cta-container[data-v-c23d864e],
+.bp .desktop-hamburger-no-logo-left-menu .cta-container[data-v-c23d864e],
+.bp .desktop-hamburger-no-logo-centered-menu .cta-container[data-v-c23d864e],
+.bp .desktop-hamburger-no-logo-right-menu .cta-container[data-v-c23d864e] {
+  max-width: var(--logo-max-width);
+}
+
 /* global styles */
 /* TODO - remove centering from the logo container, so this can be deprecated */
 .bp .desktop-tab-horizontal-stack-left-logo-centered-menu
@@ -7578,7 +7948,7 @@ select[data-v-665b8067] {
   margin: 0;
 }
 
-.bp .c-page-header-container[data-v-c289294b] {
+.bp .c-page-header-container[data-v-73d5a1ed] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
   padding: 0.25rem var(--page-padding);
@@ -7634,7 +8004,7 @@ select[data-v-665b8067] {
 }
 }
 
-.bp .c-overlay[data-v-a8c3857a] {
+.bp .c-overlay[data-v-0b2b4f62] {
   position: fixed;
   inset: 0px;
   z-index: 40;
@@ -7652,15 +8022,15 @@ select[data-v-665b8067] {
   -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
           transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
-.bp .c-overlay--open[data-v-a8c3857a] {
+.bp .c-overlay--open[data-v-0b2b4f62] {
   opacity: 0.7;
 }
-.bp .c-overlay--closed[data-v-a8c3857a] {
+.bp .c-overlay--closed[data-v-0b2b4f62] {
   pointer-events: none;
   display: none;
   opacity: 0;
 }
-.bp .c-sidebar[data-v-a8c3857a] {
+.bp .c-sidebar[data-v-0b2b4f62] {
   /* No hardcoded background: the panel background comes from the hamburger
      defaultButtonStyle (bound via :style), so a transparent/unset default bg
      renders transparent instead of being forced white  */
@@ -7680,30 +8050,89 @@ select[data-v-665b8067] {
   max-width: 66%;
 }
 @media (min-width: 768px) {
-.bp .device--mobile .c-sidebar[data-v-a8c3857a] {
+.bp .device--mobile .c-sidebar[data-v-0b2b4f62] {
     width: 66.666667%;
 }
 }
-.bp .c-sidebar--closed[data-v-a8c3857a] {
+.bp .c-sidebar--closed[data-v-0b2b4f62] {
   -webkit-transform: translateX(-100%);
           transform: translateX(-100%);
   visibility: hidden;
 }
-.bp .c-sidebar--open[data-v-a8c3857a] {
+.bp .c-sidebar--open[data-v-0b2b4f62] {
   -webkit-transform: translateX(0%);
           transform: translateX(0%);
 }
-.bp .c-chevron-transform[data-v-a8c3857a] {
+.bp .c-chevron-transform[data-v-0b2b4f62] {
   -webkit-transition: -webkit-transform 0.3s ease;
   transition: -webkit-transform 0.3s ease;
   transition: transform 0.3s ease;
   transition: transform 0.3s ease, -webkit-transform 0.3s ease;
 }
-.bp .c-chevron-expanded[data-v-a8c3857a] {
+.bp .c-chevron-expanded[data-v-0b2b4f62] {
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
 }
 
+/* Button pinned to the bottom of the side menu; rules only apply when the button is on. */
+.bp .c-sidebar--has-cta[data-v-0b2b4f62] {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  overflow: hidden;
+}
+.bp .c-sidebar--has-cta .c-sidebar-header[data-v-0b2b4f62] {
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+}
+.bp .c-sidebar--has-cta .c-nav-list[data-v-0b2b4f62] {
+  /* Lets the link list scroll instead of the panel. */
+  min-height: 0;
+  overflow-y: auto;
+}
+.bp .c-sidebar-cta[data-v-0b2b4f62] {
+  position: relative;
+  padding: 1rem;
+}
+
+/* The generic Button ships section spacing; the side menu, as the caller, strips it
+   (same fit the header row applies in HeaderLayout.vue). */
+.bp .c-sidebar-cta[data-v-0b2b4f62] .bp-button {
+  margin-bottom: 0;
+  min-height: 0;
+}
+.bp .c-sidebar-cta[data-v-0b2b4f62] .c-button__no-icon {
+  display: none;
+}
+/* Base label class, not a specific --offset-* variant, so a future offset swap can't slide it. */
+.bp .c-sidebar-cta[data-v-0b2b4f62] .c-button__label {
+  -webkit-transform: none;
+          transform: none;
+}
+.bp .c-sidebar--has-cta .c-sidebar-cta[data-v-0b2b4f62] {
+  /* Keeps the button at the bottom whether links underfill or overflow. */
+  margin-top: auto;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  /* Opaque so scrolled links don't show through. */
+  background-color: inherit;
+}
+
+/* Thin separator line above the button, faded without dimming the button itself. */
+.bp .c-sidebar-cta[data-v-0b2b4f62]::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  border-top: 1px solid currentColor;
+  opacity: 0.2;
+}
+
 .bp .nav-container[data-v-a74eb6f7] {
   max-width: 100%;
   overflow: hidden;
@@ -7884,14 +8313,14 @@ to {
   visibility: hidden !important;
 }
 
-.bp .brand-page-root[data-v-fbc9fc94] {
+.bp .brand-page-root[data-v-2debce4b] {
   height: 100%;
 }
-.bp .sortable[data-v-fbc9fc94] {
+.bp .sortable[data-v-2debce4b] {
   outline-color: #F7768C;
   outline-width: 0.2rem;
 }
-.bp .brand-page[data-v-fbc9fc94] {
+.bp .brand-page[data-v-2debce4b] {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   display: -webkit-box;
@@ -7903,7 +8332,7 @@ to {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.bp .brand-page__background-shapes-layer[data-v-fbc9fc94] {
+.bp .brand-page__background-shapes-layer[data-v-2debce4b] {
   position: fixed;
   top: 0;
   left: 0;
@@ -7914,11 +8343,11 @@ to {
           transform: translate3d(0, 0, 0);
   contain: layout paint;
 }
-.bp .template-preview .brand-page__background-shapes-layer[data-v-fbc9fc94],
-.bp .device-wrapper .brand-page__background-shapes-layer[data-v-fbc9fc94] {
+.bp .template-preview .brand-page__background-shapes-layer[data-v-2debce4b],
+.bp .device-wrapper .brand-page__background-shapes-layer[data-v-2debce4b] {
   height: 100%;
 }
-.bp .brand-page__inner--default[data-v-fbc9fc94] {
+.bp .brand-page__inner--default[data-v-2debce4b] {
   position: relative;
   z-index: 10;
   display: -webkit-box;
@@ -7930,16 +8359,16 @@ to {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.bp .brand-page__inner--desktop[data-v-fbc9fc94] {
+.bp .brand-page__inner--desktop[data-v-2debce4b] {
   min-height: 100vh;
 }
-.bp .brand-site__header[data-v-fbc9fc94] {
+.bp .brand-site__header[data-v-2debce4b] {
   container-type: inline-size;
 }
-.bp .brand-page__header[data-v-fbc9fc94] {
+.bp .brand-page__header[data-v-2debce4b] {
   padding-top: var(--page-padding);
 }
-.bp .brand-page__content--default[data-v-fbc9fc94] {
+.bp .brand-page__content--default[data-v-2debce4b] {
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 2.5rem;
@@ -7956,7 +8385,7 @@ to {
           flex-direction: column;
   max-width: var(--page-max-width);
 }
-.bp .brand-page__content--desktop[data-v-fbc9fc94] {
+.bp .brand-page__content--desktop[data-v-2debce4b] {
   margin-left: auto;
   margin-right: auto;
   display: -webkit-box;
@@ -7972,15 +8401,15 @@ to {
           flex-direction: column;
   max-width: 100%;
 }
-.bp .brand-page__content--inner[data-v-fbc9fc94] {
+.bp .brand-page__content--inner[data-v-2debce4b] {
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
 }
-.bp .brand-page__content--inner--brandsite[data-v-fbc9fc94] {
+.bp .brand-page__content--inner--brandsite[data-v-2debce4b] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.bp .brand-page__content--outline-selected[data-v-fbc9fc94] {
+.bp .brand-page__content--outline-selected[data-v-2debce4b] {
   position: relative;
   z-index: 10;
   outline-color: #F7768C;
@@ -7988,20 +8417,20 @@ to {
   outline-style: dashed;
   outline-offset: -0.25rem;
 }
-.bp .brand-page__content--outline-footer-selected[data-v-fbc9fc94] {
+.bp .brand-page__content--outline-footer-selected[data-v-2debce4b] {
   outline-color: #f7768c;
   outline-width: 0.2rem;
   outline-style: dashed;
   outline-offset: -0.25rem;
 }
 @media (max-width: 640px) {
-.bp .brand-page__content--inner--full-width[data-v-fbc9fc94] {
+.bp .brand-page__content--inner--full-width[data-v-2debce4b] {
     padding-left: 0;
     padding-right: 0;
 }
 }
 @media (min-width: 640px) {
-.bp .brand-page__content--inner--full-width[data-v-fbc9fc94] {
+.bp .brand-page__content--inner--full-width[data-v-2debce4b] {
     padding-left: var(--page-padding);
     padding-right: var(--page-padding);
 }
@@ -9594,6 +10023,15 @@ input.dynamic-width-input[data-v-97be2e87]:focus {
     color: rgb(36 36 36 / var(--tw-text-opacity))
 }
 
+.bp .header-button-settings_option-title[data-v-86ff33c1] {
+    font-family: Lato, Helvetica, sans-serif;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 700;
+    --tw-text-opacity: 1;
+    color: rgb(36 36 36 / var(--tw-text-opacity))
+}
+
 .bp .navigation-type-options[data-v-0fece584] button {
   padding-top: 8px !important;
 }
@@ -9633,7 +10071,7 @@ input.dynamic-width-input[data-v-97be2e87]:focus {
   margin: 0 auto;
 }
 
-.bp .header-settings-panel_option-title[data-v-473cfcf3] {
+.bp .header-settings-panel_option-title[data-v-670bf7f8] {
     font-family: Lato, Helvetica, sans-serif;
     font-size: 0.875rem;
     line-height: 1.25rem;