@designcrowd/library.brand-page 6.1.16 → 6.1.17-ast-header-button

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

@@ -5873,7 +5873,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   content: '\00A0';
 }
 
-.bp .c-button[data-v-7574ba8b] {
+.bp .c-button[data-v-bb52efe6] {
   --icon-h: 1.5rem;
   --icon-m-r: 2rem;
   --icon-m-icon: 0.5rem;
@@ -5887,7 +5887,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
 
 /* Shape-library icons (vector, nested in .c-shape, no class on the img):
    render at the default icon size, centered in normal flow like the SVG icons. */
-.bp .bp-button[data-v-7574ba8b] .c-button__icon-img img {
+.bp .bp-button[data-v-bb52efe6] .c-button__icon-img img {
   max-width: none;
   -o-object-fit: cover;
      object-fit: cover;
@@ -5897,7 +5897,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
 
 /* Raster image thumbnails (FallbackImage renders <img class="c-image">):
    render larger/prominent and centered over the icon slot. */
-.bp .bp-button[data-v-7574ba8b] .c-button__icon-img img.c-image {
+.bp .bp-button[data-v-bb52efe6] .c-button__icon-img img.c-image {
   --icon-img-size: 2.3rem;
   position: absolute;
   top: calc(var(--icon-img-size) / -2 + var(--icon-h) / 2);
@@ -5905,49 +5905,49 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   width: var(--icon-img-size);
   height: var(--icon-img-size);
 }
-.bp .c-button--disabled[data-v-7574ba8b] {
+.bp .c-button--disabled[data-v-bb52efe6] {
   pointer-events: none;
 }
-.bp .c-button[data-v-7574ba8b]:hover .c-button__label p {
+.bp .c-button[data-v-bb52efe6]:hover .c-button__label p {
   text-decoration: underline;
 }
-.bp .c-button__icon[data-v-7574ba8b] {
+.bp .c-button__icon[data-v-bb52efe6] {
   margin-right: var(--icon-m-r);
 }
-.bp .bp-button[data-v-7574ba8b] .c-button__icon-img {
+.bp .bp-button[data-v-bb52efe6] .c-button__icon-img {
   margin-right: var(--icon-m-r);
   width: var(--icon-w);
   height: var(--icon-h);
 }
-.bp .c-button__label[data-v-7574ba8b] {
+.bp .c-button__label[data-v-bb52efe6] {
   margin: 0 auto;
   word-break: break-word;
   overflow-wrap: anywhere;
   width: auto;
 }
-.bp .c-button__label--offset-sm[data-v-7574ba8b] {
+.bp .c-button__label--offset-sm[data-v-bb52efe6] {
   -webkit-transform: translateX(-1.5rem);
           transform: translateX(-1.5rem);
 }
-.bp .c-button__label--offset-md[data-v-7574ba8b] {
+.bp .c-button__label--offset-md[data-v-bb52efe6] {
   -webkit-transform: translateX(-1.75rem);
           transform: translateX(-1.75rem);
 }
-.bp .c-button__label--offset-lg[data-v-7574ba8b] {
+.bp .c-button__label--offset-lg[data-v-bb52efe6] {
   -webkit-transform: translateX(-1.5rem);
           transform: translateX(-1.5rem);
 }
-.bp .c-button__no-icon[data-v-7574ba8b] {
+.bp .c-button__no-icon[data-v-bb52efe6] {
   margin-right: var(--icon-m-r);
   width: var(--icon-w);
   height: var(--icon-h);
 }
-.bp .device-wrapper--mobile .c-button__icon[data-v-7574ba8b] {
+.bp .device-wrapper--mobile .c-button__icon[data-v-bb52efe6] {
   margin: 0;
   margin-right: var(--icon-m-r);
 }
 @media (min-width: 767px) {
-.bp .c-button__icon[data-v-7574ba8b] {
+.bp .c-button__icon[data-v-bb52efe6] {
     margin: 0 var(--icon-m-icon);
 }
 }
@@ -7099,62 +7099,68 @@ select[data-v-665b8067] {
   margin: 0 auto;
 }
 
-.bp .root[data-v-32fe142c] {
-  --logo-width: var(--v5fd54c9a);
+.bp .root[data-v-27d98913] {
+  --logo-width: var(--aa5a55f0);
   --logo-max-width: 20rem;
   --tab-nav-height: 56px;
   --hamburger-nav-height: 32px;
   --hamburger-nav-width: 32px;
 }
-.bp .layout[data-v-32fe142c] {
+.bp .layout[data-v-27d98913] {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
 }
-.bp .nav-container[data-v-32fe142c] {
+.bp .nav-container[data-v-27d98913] {
   max-width: 100%;
   overflow: hidden;
 }
-.bp .logo-container[data-v-32fe142c] {
+.bp .logo-container[data-v-27d98913] {
+}
+/* The CTA container is a plain block: every family below positions the BOX, and the
+   button then fills whatever box it is given (full width for the mobile row,
+   content width everywhere else). */
+.bp .cta-container[data-v-27d98913] {
+  min-width: 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-27d98913] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
-.bp .desktop-tab-horizontal-stack-left-logo-right-menu .nav-container[data-v-32fe142c] {
+.bp .desktop-tab-horizontal-stack-left-logo-right-menu .nav-container[data-v-27d98913] {
   -webkit-box-flex: 1;
       -ms-flex: 1;
           flex: 1;
   margin-left: 1rem;
 }
-.bp .desktop-tab-horizontal-stack-left-logo-right-menu .nav-container__inner[data-v-32fe142c] {
+.bp .desktop-tab-horizontal-stack-left-logo-right-menu .nav-container__inner[data-v-27d98913] {
   display: inline-block;
   float: right;
   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-27d98913] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
-.bp .desktop-tab-horizontal-stack-left-logo-left-menu .nav-container[data-v-32fe142c] {
+.bp .desktop-tab-horizontal-stack-left-logo-left-menu .nav-container[data-v-27d98913] {
   -webkit-box-flex: 1;
       -ms-flex: 1;
           flex: 1;
   margin-left: 1rem;
 }
-.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-27d98913] {
   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-27d98913] {
   display: grid;
   grid-template-columns:
     [logo-start] var(--logo-max-width) [logo-end nav-start] 1fr [nav-end] var(
@@ -7167,14 +7173,14 @@ select[data-v-665b8067] {
   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-27d98913] {
   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-27d98913] {
   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-27d98913] {
   /* start - center content */
   display: inline-block;
   -webkit-transform: translateX(-50%);
@@ -7185,7 +7191,7 @@ select[data-v-665b8067] {
   /* 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-27d98913] {
   display: grid;
   -webkit-column-gap: 1rem;
      -moz-column-gap: 1rem;
@@ -7194,26 +7200,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-27d98913] {
   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-27d98913] {
   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-27d98913] {
   /* 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-27d98913] {
   -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-27d98913] {
   display: grid;
   grid-template-rows: repeat(2, minmax(0, 1fr));
   row-gap: 1rem;
@@ -7222,16 +7228,16 @@ 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-27d98913] {
   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-27d98913] {
   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-27d98913] {
   display: inline-block;
   -webkit-transform: translateX(-50%);
           transform: translateX(-50%);
@@ -7239,7 +7245,7 @@ select[data-v-665b8067] {
   position: relative;
   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-27d98913] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -7249,14 +7255,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-27d98913] {
   -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-27d98913] {
   display: grid;
   row-gap: 1rem;
   grid-template-rows:
@@ -7264,21 +7270,21 @@ 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-27d98913] {
   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-27d98913] {
   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-27d98913] {
   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-27d98913] {
   display: grid;
   grid-template-rows:
     [row1-start] var(--tab-nav-height)
@@ -7290,28 +7296,28 @@ select[data-v-665b8067] {
   justify-items: center;
 }
 .bp .desktop-tab-vertical-stack-centered-menu-centered-logo.show-nav
-  .logo-container[data-v-32fe142c] {
+  .logo-container[data-v-27d98913] {
   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-27d98913] {
   grid-row: row1-start / row1-end;
 }
-.bp .layout desktop-tab-vertical-stack-centered-menu-centered-logo.no-nav[data-v-32fe142c] {
+.bp .layout desktop-tab-vertical-stack-centered-menu-centered-logo.no-nav[data-v-27d98913] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
 /*  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-27d98913] {
   -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-27d98913] {
   display: grid;
   grid-template-rows:
     [row1-start] var(--tab-nav-height)
@@ -7320,22 +7326,22 @@ select[data-v-665b8067] {
   margin-top: 1rem;
 }
 .bp .mobile-tab-vertical-stack-centered-menu-centered-logo.show-nav
-  .logo-container[data-v-32fe142c] {
+  .logo-container[data-v-27d98913] {
   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-27d98913] {
   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-27d98913] {
   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-27d98913],
+.bp .desktop-hamburger-no-logo-left-menu[data-v-27d98913] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -7343,15 +7349,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-27d98913],
+.bp .desktop-hamburger-no-logo-left-menu .logo-container[data-v-27d98913] {
   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-27d98913],
+.bp .desktop-hamburger-no-logo-centered-menu[data-v-27d98913],
+.bp .mobile-tab-centered-menu-no-logo[data-v-27d98913] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -7359,15 +7365,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-27d98913],
+.bp .desktop-hamburger-no-logo-centered-menu .logo-container[data-v-27d98913],
+.bp .mobile-tab-centered-menu-no-logo .logo-container[data-v-27d98913] {
   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-27d98913],
+.bp .desktop-hamburger-no-logo-right-menu[data-v-27d98913] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -7375,14 +7381,14 @@ 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-27d98913],
+.bp .desktop-hamburger-no-logo-right-menu .logo-container[data-v-27d98913] {
   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-27d98913],
+.bp .mobile-hamburger-horizontal-stack-left-logo-right-menu[data-v-27d98913] {
   display: grid;
   grid-template-columns: [logo-start] auto [nav-start] var(
       --hamburger-nav-width
@@ -7391,8 +7397,8 @@ select[data-v-665b8067] {
       -ms-flex-align: start;
           align-items: 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-27d98913],
+.bp .mobile-hamburger-horizontal-stack-left-logo-right-menu .logo-container[data-v-27d98913] {
   margin-right: 1rem;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -7402,15 +7408,15 @@ 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-27d98913],
+.bp .mobile-hamburger-horizontal-stack-left-logo-right-menu .nav-container[data-v-27d98913] {
   grid-column: nav-start;
   margin: var(--page-padding) 0;
 }
 
 /* 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-27d98913],
+.bp .mobile-hamburger-horizontal-stack-centered-logo-right-menu[data-v-27d98913] {
   display: grid;
   grid-template-columns:
     [start] var(--hamburger-nav-width)
@@ -7419,8 +7425,8 @@ select[data-v-665b8067] {
       -ms-flex-align: start;
           align-items: 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-27d98913],
+.bp .mobile-hamburger-horizontal-stack-centered-logo-right-menu .logo-container[data-v-27d98913] {
   margin-left: 1rem;
   margin-right: 1rem;
   display: -webkit-box;
@@ -7431,14 +7437,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-27d98913],
+.bp .mobile-hamburger-horizontal-stack-centered-logo-right-menu .nav-container[data-v-27d98913] {
   grid-column: nav-start;
   margin: var(--page-padding) 0;
 }
 
 /* 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-27d98913] {
   display: grid;
   grid-template-columns: var(--hamburger-nav-width) auto var(
       --hamburger-nav-width
@@ -7448,7 +7454,7 @@ select[data-v-665b8067] {
       -ms-flex-align: start;
           align-items: 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-27d98913] {
   margin-left: 1rem;
   margin-right: 1rem;
   display: -webkit-box;
@@ -7459,18 +7465,18 @@ 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-27d98913] {
   grid-area: a;
   margin: var(--page-padding) 0;
 }
 .bp .mobile-hamburger-horizontal-stack-left-menu-centered-logo
-  .nav-container__inner[data-v-32fe142c] {
+  .nav-container__inner[data-v-27d98913] {
   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-27d98913] {
   display: grid;
   grid-template-columns: var(--hamburger-nav-width) auto;
   grid-template-areas: 'a b';
@@ -7478,7 +7484,7 @@ select[data-v-665b8067] {
       -ms-flex-align: start;
           align-items: 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-27d98913] {
   margin-left: 1rem;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -7488,17 +7494,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-27d98913] {
   grid-area: a;
   margin: var(--page-padding) 0;
 }
-.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-27d98913] {
   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-27d98913] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -7506,12 +7512,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-27d98913] {
   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-27d98913] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -7519,11 +7525,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-27d98913] {
   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-27d98913] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -7531,10 +7537,171 @@ 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-27d98913] {
   display: none;
 }
 
+/* ==========================================================================
+   Header CTA placement (BP-5852)
+
+   Every rule here is additive and only applies once a CTA is rendered — the
+   track/flow-changing ones are gated on `.has-header-cta` — so a header with no
+   button lays out exactly as it did before. Four placements:
+     join   - inline immediately after the nav links
+     edge   - pinned to the header's outer right edge, nav left untouched
+     corner - floats top-right, out of flow, independent of a centered stack
+     row    - full-width row below the whole stack (mobile bar nav)
+   ========================================================================== */
+
+/* join - DESKTOP_TAB_1: appended flex child; the nav's `flex: 1` right-aligns the
+   [links][button] group, so the button lands adjacent to the links. */
+.bp .desktop-tab-horizontal-stack-left-logo-right-menu .cta-container[data-v-27d98913] {
+  margin-left: 1rem;
+}
+
+/* edge - DESKTOP_TAB_2: the nav's `flex: 1` keeps the left-aligned links in place
+   and pushes the button to the outer right edge. */
+.bp .desktop-tab-horizontal-stack-left-logo-left-menu .cta-container[data-v-27d98913] {
+  margin-left: 1rem;
+}
+
+/* edge - DESKTOP_TAB_3: reuses the grid's existing trailing spacer column, so the
+   centered nav and left logo keep their tracks unchanged. */
+.bp .desktop-tab-horizontal-stack-left-logo-centered-menu .cta-container[data-v-27d98913] {
+  grid-column: nav-end / cols-end;
+  justify-self: end;
+}
+
+/* join - DESKTOP_TAB_4: adds a content-width column after the nav column. The two
+   `1fr` tracks absorb the free space (an `auto` logo track would stretch and pull
+   the button away from the links). */
+.bp .desktop-tab-horizontal-stack-centered-logo-right-menu.has-header-cta[data-v-27d98913] {
+  grid-template-columns:
+    [col-start] 1fr [logo-start] var(--logo-max-width)
+    [logo-end nav-start] 1fr [nav-end cta-start] auto [cta-end];
+}
+.bp .desktop-tab-horizontal-stack-centered-logo-right-menu .cta-container[data-v-27d98913] {
+  grid-column: cta-start / cta-end;
+}
+
+/* corner - DESKTOP_TAB_5 / DESKTOP_TAB_6: out of flow, so the centered vertical
+   stack keeps its two explicit grid rows and stays centered. */
+.bp .desktop-tab-vertical-stack-centered-logo-centered-menu.has-header-cta[data-v-27d98913],
+.bp .desktop-tab-vertical-stack-centered-menu-centered-logo.has-header-cta[data-v-27d98913] {
+  position: relative;
+}
+.bp .desktop-tab-vertical-stack-centered-logo-centered-menu .cta-container[data-v-27d98913],
+.bp .desktop-tab-vertical-stack-centered-menu-centered-logo .cta-container[data-v-27d98913] {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+/* row - MOBILE_TAB_1 / MOBILE_TAB_2: auto-places into an implicit third grid row
+   below the stack (both explicit rows are taken by the logo and the nav). */
+.bp .mobile-tab-vertical-stack-centered-logo-centered-menu .cta-container[data-v-27d98913],
+.bp .mobile-tab-vertical-stack-centered-menu-centered-logo .cta-container[data-v-27d98913] {
+  width: 100%;
+  justify-self: stretch;
+}
+.bp .mobile-tab-vertical-stack-centered-logo-centered-menu.no-nav.has-header-cta[data-v-27d98913],
+.bp .mobile-tab-vertical-stack-centered-menu-centered-logo.no-nav.has-header-cta[data-v-27d98913] {
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+
+/* row - MOBILE_TAB_NO_LOGO_1: single centered flex row, so the full-width button
+   needs a wrap to drop below the nav. */
+.bp .mobile-tab-centered-menu-no-logo.has-header-cta[data-v-27d98913] {
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+}
+.bp .mobile-tab-centered-menu-no-logo .cta-container[data-v-27d98913] {
+  width: 100%;
+}
+
+/* join - DESKTOP_TAB_NO_LOGO_1 / _3: appended flex child sits adjacent to the
+   left- / right-aligned links. */
+.bp .desktop-tab-left-menu-no-logo .cta-container[data-v-27d98913],
+.bp .desktop-tab-right-menu-no-logo .cta-container[data-v-27d98913] {
+  margin-left: 1rem;
+}
+
+/* edge - DESKTOP_TAB_NO_LOGO_2: out of flow so the nav stays exactly centered
+   (an in-flow button would shift the centered group left). */
+.bp .desktop-tab-centered-menu-no-logo.has-header-cta[data-v-27d98913] {
+  position: relative;
+}
+.bp .desktop-tab-centered-menu-no-logo .cta-container[data-v-27d98913] {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+/* DESKTOP_HAMBURGER_1 / _2: the button joins the header row BEFORE the icon. These
+   grids declare exact tracks, so each gains a content-width CTA column ahead of the
+   nav column; the logo track becomes `1fr` to absorb the free space that an `auto`
+   track would otherwise share with the CTA. The mobile hamburger styles share the
+   base rules above but never render a CTA, so their tracks are untouched. */
+.bp .desktop-hamburger-horizontal-stack-left-logo-right-menu.has-header-cta[data-v-27d98913] {
+  grid-template-columns: [logo-start] 1fr [cta-start] auto [nav-start] var(
+      --hamburger-nav-width
+    );
+}
+.bp .desktop-hamburger-horizontal-stack-centered-logo-right-menu.has-header-cta[data-v-27d98913] {
+  grid-template-columns:
+    [start] var(--hamburger-nav-width)
+    [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-27d98913],
+.bp .desktop-hamburger-horizontal-stack-centered-logo-right-menu .cta-container[data-v-27d98913] {
+  grid-column: cta-start;
+  align-self: center;
+  margin-right: 1rem;
+}
+
+/* DESKTOP_HAMBURGER_NO_LOGO_1..3: flex rows; `order` puts the button before the
+   icon without reordering the DOM. */
+.bp .desktop-hamburger-no-logo-left-menu .cta-container[data-v-27d98913],
+.bp .desktop-hamburger-no-logo-centered-menu .cta-container[data-v-27d98913],
+.bp .desktop-hamburger-no-logo-right-menu .cta-container[data-v-27d98913] {
+  -webkit-box-ordinal-group: 0;
+      -ms-flex-order: -1;
+          order: -1;
+  -ms-flex-item-align: center;
+      align-self: center;
+  margin-right: 1rem;
+}
+
+/* row - MOBILE_HAMBURGER_* with the nav hidden (single-page site): no icon, no
+   drawer, so the button gets the mobile-bar full-width row below the logo. The
+   grid styles auto-place it into an implicit row spanning all tracks; the
+   flex no-logo styles wrap it onto its own line. */
+.bp .mobile-hamburger-horizontal-stack-left-logo-right-menu.no-nav .cta-container[data-v-27d98913],
+.bp .mobile-hamburger-horizontal-stack-centered-logo-right-menu.no-nav
+  .cta-container[data-v-27d98913],
+.bp .mobile-hamburger-horizontal-stack-left-menu-centered-logo.no-nav
+  .cta-container[data-v-27d98913],
+.bp .mobile-hamburger-horizontal-stack-left-menu-left-logo.no-nav .cta-container[data-v-27d98913] {
+  grid-column: 1 / -1;
+  width: 100%;
+  margin-top: 1rem;
+}
+.bp .mobile-hamburger-no-logo-left-menu.no-nav.has-header-cta[data-v-27d98913],
+.bp .mobile-hamburger-no-logo-centered-menu.no-nav.has-header-cta[data-v-27d98913],
+.bp .mobile-hamburger-no-logo-right-menu.no-nav.has-header-cta[data-v-27d98913] {
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+}
+.bp .mobile-hamburger-no-logo-left-menu.no-nav .cta-container[data-v-27d98913],
+.bp .mobile-hamburger-no-logo-centered-menu.no-nav .cta-container[data-v-27d98913],
+.bp .mobile-hamburger-no-logo-right-menu.no-nav .cta-container[data-v-27d98913] {
+  width: 100%;
+}
+
 /* global styles */
 /* TODO - remove centering from the logo container, so this can be deprecated */
 .bp .desktop-tab-horizontal-stack-left-logo-centered-menu
@@ -7543,7 +7710,7 @@ select[data-v-665b8067] {
   margin: 0;
 }
 
-.bp .c-page-header-container[data-v-c289294b] {
+.bp .c-page-header-container[data-v-b8e729d7] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
   padding: 0.25rem var(--page-padding);
@@ -7599,7 +7766,7 @@ select[data-v-665b8067] {
 }
 }
 
-.bp .c-overlay[data-v-a8c3857a] {
+.bp .c-overlay[data-v-b618b914] {
   position: fixed;
   inset: 0px;
   z-index: 40;
@@ -7617,15 +7784,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-b618b914] {
   opacity: 0.7;
 }
-.bp .c-overlay--closed[data-v-a8c3857a] {
+.bp .c-overlay--closed[data-v-b618b914] {
   pointer-events: none;
   display: none;
   opacity: 0;
 }
-.bp .c-sidebar[data-v-a8c3857a] {
+.bp .c-sidebar[data-v-b618b914] {
   /* 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  */
@@ -7645,29 +7812,46 @@ 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-b618b914] {
     width: 66.666667%;
 }
 }
-.bp .c-sidebar--closed[data-v-a8c3857a] {
+.bp .c-sidebar--closed[data-v-b618b914] {
   -webkit-transform: translateX(-100%);
           transform: translateX(-100%);
   visibility: hidden;
 }
-.bp .c-sidebar--open[data-v-a8c3857a] {
+.bp .c-sidebar--open[data-v-b618b914] {
   -webkit-transform: translateX(0%);
           transform: translateX(0%);
 }
-.bp .c-chevron-transform[data-v-a8c3857a] {
+.bp .c-chevron-transform[data-v-b618b914] {
   -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-b618b914] {
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
 }
+.bp .c-drawer-cta[data-v-b618b914] {
+  position: relative;
+  padding: 1rem;
+}
+
+/* Hairline separator from the nav list, drawn in the drawer's own text colour so it
+   works on any panel background. A pseudo-element carries the fade — opacity on the
+   section itself would wash out the button. */
+.bp .c-drawer-cta[data-v-b618b914]::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%;
@@ -7849,14 +8033,14 @@ to {
   visibility: hidden !important;
 }
 
-.bp .brand-page-root[data-v-fbc9fc94] {
+.bp .brand-page-root[data-v-1a7e8144] {
   height: 100%;
 }
-.bp .sortable[data-v-fbc9fc94] {
+.bp .sortable[data-v-1a7e8144] {
   outline-color: #F7768C;
   outline-width: 0.2rem;
 }
-.bp .brand-page[data-v-fbc9fc94] {
+.bp .brand-page[data-v-1a7e8144] {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   display: -webkit-box;
@@ -7868,7 +8052,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-1a7e8144] {
   position: fixed;
   top: 0;
   left: 0;
@@ -7879,11 +8063,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-1a7e8144],
+.bp .device-wrapper .brand-page__background-shapes-layer[data-v-1a7e8144] {
   height: 100%;
 }
-.bp .brand-page__inner--default[data-v-fbc9fc94] {
+.bp .brand-page__inner--default[data-v-1a7e8144] {
   position: relative;
   z-index: 10;
   display: -webkit-box;
@@ -7895,16 +8079,16 @@ to {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.bp .brand-page__inner--desktop[data-v-fbc9fc94] {
+.bp .brand-page__inner--desktop[data-v-1a7e8144] {
   min-height: 100vh;
 }
-.bp .brand-site__header[data-v-fbc9fc94] {
+.bp .brand-site__header[data-v-1a7e8144] {
   container-type: inline-size;
 }
-.bp .brand-page__header[data-v-fbc9fc94] {
+.bp .brand-page__header[data-v-1a7e8144] {
   padding-top: var(--page-padding);
 }
-.bp .brand-page__content--default[data-v-fbc9fc94] {
+.bp .brand-page__content--default[data-v-1a7e8144] {
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 2.5rem;
@@ -7921,7 +8105,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-1a7e8144] {
   margin-left: auto;
   margin-right: auto;
   display: -webkit-box;
@@ -7937,15 +8121,15 @@ to {
           flex-direction: column;
   max-width: 100%;
 }
-.bp .brand-page__content--inner[data-v-fbc9fc94] {
+.bp .brand-page__content--inner[data-v-1a7e8144] {
   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-1a7e8144] {
   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-1a7e8144] {
   position: relative;
   z-index: 10;
   outline-color: #F7768C;
@@ -7953,20 +8137,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-1a7e8144] {
   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-1a7e8144] {
     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-1a7e8144] {
     padding-left: var(--page-padding);
     padding-right: var(--page-padding);
 }
@@ -9559,6 +9743,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-9a1ee526] {
+    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;
 }
@@ -9598,7 +9791,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-8244a08c] {
     font-family: Lato, Helvetica, sans-serif;
     font-size: 0.875rem;
     line-height: 1.25rem;