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

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

@@ -5903,7 +5903,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   content: '\00A0';
 }
 
-.c-button[data-v-7574ba8b] {
+.c-button[data-v-bb52efe6] {
   --icon-h: 1.5rem;
   --icon-m-r: 2rem;
   --icon-m-icon: 0.5rem;
@@ -5917,7 +5917,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-button[data-v-7574ba8b] .c-button__icon-img img {
+.bp-button[data-v-bb52efe6] .c-button__icon-img img {
   max-width: none;
   -o-object-fit: cover;
      object-fit: cover;
@@ -5927,7 +5927,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-button[data-v-7574ba8b] .c-button__icon-img img.c-image {
+.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);
@@ -5935,49 +5935,49 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   width: var(--icon-img-size);
   height: var(--icon-img-size);
 }
-.c-button--disabled[data-v-7574ba8b] {
+.c-button--disabled[data-v-bb52efe6] {
   pointer-events: none;
 }
-.c-button[data-v-7574ba8b]:hover .c-button__label p {
+.c-button[data-v-bb52efe6]:hover .c-button__label p {
   text-decoration: underline;
 }
-.c-button__icon[data-v-7574ba8b] {
+.c-button__icon[data-v-bb52efe6] {
   margin-right: var(--icon-m-r);
 }
-.bp-button[data-v-7574ba8b] .c-button__icon-img {
+.bp-button[data-v-bb52efe6] .c-button__icon-img {
   margin-right: var(--icon-m-r);
   width: var(--icon-w);
   height: var(--icon-h);
 }
-.c-button__label[data-v-7574ba8b] {
+.c-button__label[data-v-bb52efe6] {
   margin: 0 auto;
   word-break: break-word;
   overflow-wrap: anywhere;
   width: auto;
 }
-.c-button__label--offset-sm[data-v-7574ba8b] {
+.c-button__label--offset-sm[data-v-bb52efe6] {
   -webkit-transform: translateX(-1.5rem);
           transform: translateX(-1.5rem);
 }
-.c-button__label--offset-md[data-v-7574ba8b] {
+.c-button__label--offset-md[data-v-bb52efe6] {
   -webkit-transform: translateX(-1.75rem);
           transform: translateX(-1.75rem);
 }
-.c-button__label--offset-lg[data-v-7574ba8b] {
+.c-button__label--offset-lg[data-v-bb52efe6] {
   -webkit-transform: translateX(-1.5rem);
           transform: translateX(-1.5rem);
 }
-.c-button__no-icon[data-v-7574ba8b] {
+.c-button__no-icon[data-v-bb52efe6] {
   margin-right: var(--icon-m-r);
   width: var(--icon-w);
   height: var(--icon-h);
 }
-.device-wrapper--mobile .c-button__icon[data-v-7574ba8b] {
+.device-wrapper--mobile .c-button__icon[data-v-bb52efe6] {
   margin: 0;
   margin-right: var(--icon-m-r);
 }
 @media (min-width: 767px) {
-.c-button__icon[data-v-7574ba8b] {
+.c-button__icon[data-v-bb52efe6] {
     margin: 0 var(--icon-m-icon);
 }
 }
@@ -7129,62 +7129,68 @@ select[data-v-665b8067] {
   margin: 0 auto;
 }
 
-.root[data-v-32fe142c] {
-  --logo-width: var(--v5fd54c9a);
+.root[data-v-27d98913] {
+  --logo-width: var(--aa5a55f0);
   --logo-max-width: 20rem;
   --tab-nav-height: 56px;
   --hamburger-nav-height: 32px;
   --hamburger-nav-width: 32px;
 }
-.layout[data-v-32fe142c] {
+.layout[data-v-27d98913] {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
 }
-.nav-container[data-v-32fe142c] {
+.nav-container[data-v-27d98913] {
   max-width: 100%;
   overflow: hidden;
 }
-.logo-container[data-v-32fe142c] {
+.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). */
+.cta-container[data-v-27d98913] {
+  min-width: 0;
 }
 
 /* DESKTOP_TAB_1 */
-.desktop-tab-horizontal-stack-left-logo-right-menu[data-v-32fe142c] {
+.desktop-tab-horizontal-stack-left-logo-right-menu[data-v-27d98913] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
-.desktop-tab-horizontal-stack-left-logo-right-menu .nav-container[data-v-32fe142c] {
+.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;
 }
-.desktop-tab-horizontal-stack-left-logo-right-menu .nav-container__inner[data-v-32fe142c] {
+.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 */
-.desktop-tab-horizontal-stack-left-logo-left-menu[data-v-32fe142c] {
+.desktop-tab-horizontal-stack-left-logo-left-menu[data-v-27d98913] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
-.desktop-tab-horizontal-stack-left-logo-left-menu .nav-container[data-v-32fe142c] {
+.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;
 }
-.desktop-tab-horizontal-stack-left-logo-left-menu .nav-container__inner[data-v-32fe142c] {
+.desktop-tab-horizontal-stack-left-logo-left-menu .nav-container__inner[data-v-27d98913] {
   display: inline-block;
   max-width: 100%;
 }
 
 /* DESKTOP_TAB_3 */
-.desktop-tab-horizontal-stack-left-logo-centered-menu[data-v-32fe142c] {
+.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(
@@ -7197,14 +7203,14 @@ select[data-v-665b8067] {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
-.desktop-tab-horizontal-stack-left-logo-centered-menu .logo-container[data-v-32fe142c] {
+.desktop-tab-horizontal-stack-left-logo-centered-menu .logo-container[data-v-27d98913] {
   grid-column: logo-start / logo-end;
   justify-self: start;
 }
-.desktop-tab-horizontal-stack-left-logo-centered-menu .nav-container[data-v-32fe142c] {
+.desktop-tab-horizontal-stack-left-logo-centered-menu .nav-container[data-v-27d98913] {
   grid-column: nav-start / nav-end;
 }
-.desktop-tab-horizontal-stack-left-logo-centered-menu .nav-container__inner[data-v-32fe142c] {
+.desktop-tab-horizontal-stack-left-logo-centered-menu .nav-container__inner[data-v-27d98913] {
   /* start - center content */
   display: inline-block;
   -webkit-transform: translateX(-50%);
@@ -7215,7 +7221,7 @@ select[data-v-665b8067] {
   /* end - center content */
 }
 /* DESKTOP_TAB_4 */
-.desktop-tab-horizontal-stack-centered-logo-right-menu[data-v-32fe142c] {
+.desktop-tab-horizontal-stack-centered-logo-right-menu[data-v-27d98913] {
   display: grid;
   -webkit-column-gap: 1rem;
      -moz-column-gap: 1rem;
@@ -7224,26 +7230,26 @@ select[data-v-665b8067] {
     [col-start] 1fr [logo-start] var(--logo-max-width)
     [logo-end nav-start] 1fr [nav-end];
 }
-.desktop-tab-horizontal-stack-centered-logo-right-menu .logo-container[data-v-32fe142c] {
+.desktop-tab-horizontal-stack-centered-logo-right-menu .logo-container[data-v-27d98913] {
   grid-column: logo-start / logo-end;
 }
-.desktop-tab-horizontal-stack-centered-logo-right-menu .nav-container[data-v-32fe142c] {
+.desktop-tab-horizontal-stack-centered-logo-right-menu .nav-container[data-v-27d98913] {
   grid-column: nav-start / nav-end;
 }
-.desktop-tab-horizontal-stack-centered-logo-right-menu .nav-container__inner[data-v-32fe142c] {
+.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 */
-.desktop-tab-vertical-stack-centered-logo-centered-menu[data-v-32fe142c] {
+.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;
 }
-.desktop-tab-vertical-stack-centered-logo-centered-menu.show-nav[data-v-32fe142c] {
+.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;
@@ -7252,16 +7258,16 @@ select[data-v-665b8067] {
     [row2-end];
 }
 .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;
 }
 .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%;
 }
 .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%);
@@ -7269,7 +7275,7 @@ select[data-v-665b8067] {
   position: relative;
   max-width: 100%;
 }
-.desktop-tab-vertical-stack-centered-logo-centered-menu.no-nav[data-v-32fe142c] {
+.desktop-tab-vertical-stack-centered-logo-centered-menu.no-nav[data-v-27d98913] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -7279,14 +7285,14 @@ select[data-v-665b8067] {
 }
 
 /* MOBILE_TAB_1 */
-.mobile-tab-vertical-stack-centered-logo-centered-menu[data-v-32fe142c] {
+.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%;
 }
-.mobile-tab-vertical-stack-centered-logo-centered-menu.show-nav[data-v-32fe142c] {
+.mobile-tab-vertical-stack-centered-logo-centered-menu.show-nav[data-v-27d98913] {
   display: grid;
   row-gap: 1rem;
   grid-template-rows:
@@ -7294,21 +7300,21 @@ select[data-v-665b8067] {
     [row2-end];
 }
 .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;
 }
-.mobile-tab-vertical-stack-centered-logo-centered-menu.show-nav .nav-container[data-v-32fe142c] {
+.mobile-tab-vertical-stack-centered-logo-centered-menu.show-nav .nav-container[data-v-27d98913] {
   grid-row: row2-start / row2-end;
   width: 100%;
 }
-.mobile-tab-vertical-stack-centered-logo-centered-menu.no-nav[data-v-32fe142c] {
+.mobile-tab-vertical-stack-centered-logo-centered-menu.no-nav[data-v-27d98913] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
 
 /* DESKTOP_TAB_6 */
-.desktop-tab-vertical-stack-centered-menu-centered-logo.show-nav[data-v-32fe142c] {
+.desktop-tab-vertical-stack-centered-menu-centered-logo.show-nav[data-v-27d98913] {
   display: grid;
   grid-template-rows:
     [row1-start] var(--tab-nav-height)
@@ -7320,28 +7326,28 @@ select[data-v-665b8067] {
   justify-items: center;
 }
 .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;
 }
 .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;
 }
-.layout desktop-tab-vertical-stack-centered-menu-centered-logo.no-nav[data-v-32fe142c] {
+.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 */
-.mobile-tab-vertical-stack-centered-menu-centered-logo[data-v-32fe142c] {
+.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%;
 }
-.mobile-tab-vertical-stack-centered-menu-centered-logo.show-nav[data-v-32fe142c] {
+.mobile-tab-vertical-stack-centered-menu-centered-logo.show-nav[data-v-27d98913] {
   display: grid;
   grid-template-rows:
     [row1-start] var(--tab-nav-height)
@@ -7350,22 +7356,22 @@ select[data-v-665b8067] {
   margin-top: 1rem;
 }
 .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;
 }
-.mobile-tab-vertical-stack-centered-menu-centered-logo.show-nav .nav-container[data-v-32fe142c] {
+.mobile-tab-vertical-stack-centered-menu-centered-logo.show-nav .nav-container[data-v-27d98913] {
   grid-row: row1-start / row1-end;
   width: 100%;
 }
-.mobile-tab-vertical-stack-centered-menu-centered-logo.no-nav[data-v-32fe142c] {
+.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 */
-.desktop-tab-left-menu-no-logo[data-v-32fe142c],
-.desktop-hamburger-no-logo-left-menu[data-v-32fe142c] {
+.desktop-tab-left-menu-no-logo[data-v-27d98913],
+.desktop-hamburger-no-logo-left-menu[data-v-27d98913] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -7373,15 +7379,15 @@ select[data-v-665b8067] {
       -ms-flex-pack: start;
           justify-content: flex-start;
 }
-.desktop-tab-left-menu-no-logo .logo-container[data-v-32fe142c],
-.desktop-hamburger-no-logo-left-menu .logo-container[data-v-32fe142c] {
+.desktop-tab-left-menu-no-logo .logo-container[data-v-27d98913],
+.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 */
-.desktop-tab-centered-menu-no-logo[data-v-32fe142c],
-.desktop-hamburger-no-logo-centered-menu[data-v-32fe142c],
-.mobile-tab-centered-menu-no-logo[data-v-32fe142c] {
+.desktop-tab-centered-menu-no-logo[data-v-27d98913],
+.desktop-hamburger-no-logo-centered-menu[data-v-27d98913],
+.mobile-tab-centered-menu-no-logo[data-v-27d98913] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -7389,15 +7395,15 @@ select[data-v-665b8067] {
       -ms-flex-pack: center;
           justify-content: center;
 }
-.desktop-tab-centered-menu-no-logo .logo-container[data-v-32fe142c],
-.desktop-hamburger-no-logo-centered-menu .logo-container[data-v-32fe142c],
-.mobile-tab-centered-menu-no-logo .logo-container[data-v-32fe142c] {
+.desktop-tab-centered-menu-no-logo .logo-container[data-v-27d98913],
+.desktop-hamburger-no-logo-centered-menu .logo-container[data-v-27d98913],
+.mobile-tab-centered-menu-no-logo .logo-container[data-v-27d98913] {
   display: none;
 }
 
 /* DESKTOP_TAB_NO_LOGO_3, DESKTOP_HAMBURGER_NO_LOGO_3 */
-.desktop-tab-right-menu-no-logo[data-v-32fe142c],
-.desktop-hamburger-no-logo-right-menu[data-v-32fe142c] {
+.desktop-tab-right-menu-no-logo[data-v-27d98913],
+.desktop-hamburger-no-logo-right-menu[data-v-27d98913] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -7405,14 +7411,14 @@ select[data-v-665b8067] {
       -ms-flex-pack: end;
           justify-content: flex-end;
 }
-.desktop-tab-right-menu-no-logo .logo-container[data-v-32fe142c],
-.desktop-hamburger-no-logo-right-menu .logo-container[data-v-32fe142c] {
+.desktop-tab-right-menu-no-logo .logo-container[data-v-27d98913],
+.desktop-hamburger-no-logo-right-menu .logo-container[data-v-27d98913] {
   display: none;
 }
 
 /* DESKTOP_HAMBURGER_1, MOBILE_HAMBURGER_1 */
-.desktop-hamburger-horizontal-stack-left-logo-right-menu[data-v-32fe142c],
-.mobile-hamburger-horizontal-stack-left-logo-right-menu[data-v-32fe142c] {
+.desktop-hamburger-horizontal-stack-left-logo-right-menu[data-v-27d98913],
+.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
@@ -7421,8 +7427,8 @@ select[data-v-665b8067] {
       -ms-flex-align: start;
           align-items: start;
 }
-.desktop-hamburger-horizontal-stack-left-logo-right-menu .logo-container[data-v-32fe142c],
-.mobile-hamburger-horizontal-stack-left-logo-right-menu .logo-container[data-v-32fe142c] {
+.desktop-hamburger-horizontal-stack-left-logo-right-menu .logo-container[data-v-27d98913],
+.mobile-hamburger-horizontal-stack-left-logo-right-menu .logo-container[data-v-27d98913] {
   margin-right: 1rem;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -7432,15 +7438,15 @@ select[data-v-665b8067] {
           justify-content: flex-start;
   grid-column: logo-start;
 }
-.desktop-hamburger-horizontal-stack-left-logo-right-menu .nav-container[data-v-32fe142c],
-.mobile-hamburger-horizontal-stack-left-logo-right-menu .nav-container[data-v-32fe142c] {
+.desktop-hamburger-horizontal-stack-left-logo-right-menu .nav-container[data-v-27d98913],
+.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 */
-.desktop-hamburger-horizontal-stack-centered-logo-right-menu[data-v-32fe142c],
-.mobile-hamburger-horizontal-stack-centered-logo-right-menu[data-v-32fe142c] {
+.desktop-hamburger-horizontal-stack-centered-logo-right-menu[data-v-27d98913],
+.mobile-hamburger-horizontal-stack-centered-logo-right-menu[data-v-27d98913] {
   display: grid;
   grid-template-columns:
     [start] var(--hamburger-nav-width)
@@ -7449,8 +7455,8 @@ select[data-v-665b8067] {
       -ms-flex-align: start;
           align-items: start;
 }
-.desktop-hamburger-horizontal-stack-centered-logo-right-menu .logo-container[data-v-32fe142c],
-.mobile-hamburger-horizontal-stack-centered-logo-right-menu .logo-container[data-v-32fe142c] {
+.desktop-hamburger-horizontal-stack-centered-logo-right-menu .logo-container[data-v-27d98913],
+.mobile-hamburger-horizontal-stack-centered-logo-right-menu .logo-container[data-v-27d98913] {
   margin-left: 1rem;
   margin-right: 1rem;
   display: -webkit-box;
@@ -7461,14 +7467,14 @@ select[data-v-665b8067] {
           justify-content: center;
   grid-column: logo-start;
 }
-.desktop-hamburger-horizontal-stack-centered-logo-right-menu .nav-container[data-v-32fe142c],
-.mobile-hamburger-horizontal-stack-centered-logo-right-menu .nav-container[data-v-32fe142c] {
+.desktop-hamburger-horizontal-stack-centered-logo-right-menu .nav-container[data-v-27d98913],
+.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 */
-.mobile-hamburger-horizontal-stack-left-menu-centered-logo[data-v-32fe142c] {
+.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
@@ -7478,7 +7484,7 @@ select[data-v-665b8067] {
       -ms-flex-align: start;
           align-items: start;
 }
-.mobile-hamburger-horizontal-stack-left-menu-centered-logo .logo-container[data-v-32fe142c] {
+.mobile-hamburger-horizontal-stack-left-menu-centered-logo .logo-container[data-v-27d98913] {
   margin-left: 1rem;
   margin-right: 1rem;
   display: -webkit-box;
@@ -7489,18 +7495,18 @@ select[data-v-665b8067] {
           justify-content: center;
   grid-area: b;
 }
-.mobile-hamburger-horizontal-stack-left-menu-centered-logo .nav-container[data-v-32fe142c] {
+.mobile-hamburger-horizontal-stack-left-menu-centered-logo .nav-container[data-v-27d98913] {
   grid-area: a;
   margin: var(--page-padding) 0;
 }
 .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 */
-.mobile-hamburger-horizontal-stack-left-menu-left-logo[data-v-32fe142c] {
+.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';
@@ -7508,7 +7514,7 @@ select[data-v-665b8067] {
       -ms-flex-align: start;
           align-items: start;
 }
-.mobile-hamburger-horizontal-stack-left-menu-left-logo .logo-container[data-v-32fe142c] {
+.mobile-hamburger-horizontal-stack-left-menu-left-logo .logo-container[data-v-27d98913] {
   margin-left: 1rem;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -7518,17 +7524,17 @@ select[data-v-665b8067] {
           justify-content: flex-start;
   grid-area: b;
 }
-.mobile-hamburger-horizontal-stack-left-menu-left-logo .nav-container[data-v-32fe142c] {
+.mobile-hamburger-horizontal-stack-left-menu-left-logo .nav-container[data-v-27d98913] {
   grid-area: a;
   margin: var(--page-padding) 0;
 }
-.mobile-hamburger-horizontal-stack-left-menu-left-logo .nav-container__inner[data-v-32fe142c] {
+.mobile-hamburger-horizontal-stack-left-menu-left-logo .nav-container__inner[data-v-27d98913] {
   float: left;
   max-width: 100%;
 }
 
 /* MOBILE_HAMBURGER_NO_LOGO_1 */
-.mobile-hamburger-no-logo-left-menu[data-v-32fe142c] {
+.mobile-hamburger-no-logo-left-menu[data-v-27d98913] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -7536,12 +7542,12 @@ select[data-v-665b8067] {
       -ms-flex-pack: start;
           justify-content: flex-start;
 }
-.mobile-hamburger-no-logo-left-menu .logo-container[data-v-32fe142c] {
+.mobile-hamburger-no-logo-left-menu .logo-container[data-v-27d98913] {
   display: none;
 }
 
 /* MOBILE_HAMBURGER_NO_LOGO_2 */
-.mobile-hamburger-no-logo-centered-menu[data-v-32fe142c] {
+.mobile-hamburger-no-logo-centered-menu[data-v-27d98913] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -7549,11 +7555,11 @@ select[data-v-665b8067] {
       -ms-flex-pack: center;
           justify-content: center;
 }
-.mobile-hamburger-no-logo-centered-menu .logo-container[data-v-32fe142c] {
+.mobile-hamburger-no-logo-centered-menu .logo-container[data-v-27d98913] {
   display: none;
 }
 /* MOBILE_HAMBURGER_NO_LOGO_3 */
-.mobile-hamburger-no-logo-right-menu[data-v-32fe142c] {
+.mobile-hamburger-no-logo-right-menu[data-v-27d98913] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -7561,10 +7567,171 @@ select[data-v-665b8067] {
       -ms-flex-pack: end;
           justify-content: flex-end;
 }
-.mobile-hamburger-no-logo-right-menu .logo-container[data-v-32fe142c] {
+.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. */
+.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. */
+.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. */
+.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). */
+.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];
+}
+.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. */
+.desktop-tab-vertical-stack-centered-logo-centered-menu.has-header-cta[data-v-27d98913],
+.desktop-tab-vertical-stack-centered-menu-centered-logo.has-header-cta[data-v-27d98913] {
+  position: relative;
+}
+.desktop-tab-vertical-stack-centered-logo-centered-menu .cta-container[data-v-27d98913],
+.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). */
+.mobile-tab-vertical-stack-centered-logo-centered-menu .cta-container[data-v-27d98913],
+.mobile-tab-vertical-stack-centered-menu-centered-logo .cta-container[data-v-27d98913] {
+  width: 100%;
+  justify-self: stretch;
+}
+.mobile-tab-vertical-stack-centered-logo-centered-menu.no-nav.has-header-cta[data-v-27d98913],
+.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. */
+.mobile-tab-centered-menu-no-logo.has-header-cta[data-v-27d98913] {
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+}
+.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. */
+.desktop-tab-left-menu-no-logo .cta-container[data-v-27d98913],
+.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). */
+.desktop-tab-centered-menu-no-logo.has-header-cta[data-v-27d98913] {
+  position: relative;
+}
+.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. */
+.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
+    );
+}
+.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);
+}
+.desktop-hamburger-horizontal-stack-left-logo-right-menu .cta-container[data-v-27d98913],
+.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. */
+.desktop-hamburger-no-logo-left-menu .cta-container[data-v-27d98913],
+.desktop-hamburger-no-logo-centered-menu .cta-container[data-v-27d98913],
+.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. */
+.mobile-hamburger-horizontal-stack-left-logo-right-menu.no-nav .cta-container[data-v-27d98913],
+.mobile-hamburger-horizontal-stack-centered-logo-right-menu.no-nav
+  .cta-container[data-v-27d98913],
+.mobile-hamburger-horizontal-stack-left-menu-centered-logo.no-nav
+  .cta-container[data-v-27d98913],
+.mobile-hamburger-horizontal-stack-left-menu-left-logo.no-nav .cta-container[data-v-27d98913] {
+  grid-column: 1 / -1;
+  width: 100%;
+  margin-top: 1rem;
+}
+.mobile-hamburger-no-logo-left-menu.no-nav.has-header-cta[data-v-27d98913],
+.mobile-hamburger-no-logo-centered-menu.no-nav.has-header-cta[data-v-27d98913],
+.mobile-hamburger-no-logo-right-menu.no-nav.has-header-cta[data-v-27d98913] {
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+}
+.mobile-hamburger-no-logo-left-menu.no-nav .cta-container[data-v-27d98913],
+.mobile-hamburger-no-logo-centered-menu.no-nav .cta-container[data-v-27d98913],
+.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 */
 .desktop-tab-horizontal-stack-left-logo-centered-menu
@@ -7573,7 +7740,7 @@ select[data-v-665b8067] {
   margin: 0;
 }
 
-.c-page-header-container[data-v-c289294b] {
+.c-page-header-container[data-v-b8e729d7] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
   padding: 0.25rem var(--page-padding);
@@ -7629,7 +7796,7 @@ select[data-v-665b8067] {
 }
 }
 
-.c-overlay[data-v-a8c3857a] {
+.c-overlay[data-v-b618b914] {
   position: fixed;
   inset: 0px;
   z-index: 40;
@@ -7647,15 +7814,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);
 }
-.c-overlay--open[data-v-a8c3857a] {
+.c-overlay--open[data-v-b618b914] {
   opacity: 0.7;
 }
-.c-overlay--closed[data-v-a8c3857a] {
+.c-overlay--closed[data-v-b618b914] {
   pointer-events: none;
   display: none;
   opacity: 0;
 }
-.c-sidebar[data-v-a8c3857a] {
+.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  */
@@ -7675,29 +7842,46 @@ select[data-v-665b8067] {
   max-width: 66%;
 }
 @media (min-width: 768px) {
-.device--mobile .c-sidebar[data-v-a8c3857a] {
+.device--mobile .c-sidebar[data-v-b618b914] {
     width: 66.666667%;
 }
 }
-.c-sidebar--closed[data-v-a8c3857a] {
+.c-sidebar--closed[data-v-b618b914] {
   -webkit-transform: translateX(-100%);
           transform: translateX(-100%);
   visibility: hidden;
 }
-.c-sidebar--open[data-v-a8c3857a] {
+.c-sidebar--open[data-v-b618b914] {
   -webkit-transform: translateX(0%);
           transform: translateX(0%);
 }
-.c-chevron-transform[data-v-a8c3857a] {
+.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;
 }
-.c-chevron-expanded[data-v-a8c3857a] {
+.c-chevron-expanded[data-v-b618b914] {
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
 }
+.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. */
+.c-drawer-cta[data-v-b618b914]::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  border-top: 1px solid currentColor;
+  opacity: 0.2;
+}
 
 .nav-container[data-v-a74eb6f7] {
   max-width: 100%;
@@ -7879,14 +8063,14 @@ body {
   visibility: hidden !important;
 }
 
-.brand-page-root[data-v-fbc9fc94] {
+.brand-page-root[data-v-1a7e8144] {
   height: 100%;
 }
-.sortable[data-v-fbc9fc94] {
+.sortable[data-v-1a7e8144] {
   outline-color: #b2bdfb;
   outline-width: 0.2rem;
 }
-.brand-page[data-v-fbc9fc94] {
+.brand-page[data-v-1a7e8144] {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   display: -webkit-box;
@@ -7898,7 +8082,7 @@ body {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.brand-page__background-shapes-layer[data-v-fbc9fc94] {
+.brand-page__background-shapes-layer[data-v-1a7e8144] {
   position: fixed;
   top: 0;
   left: 0;
@@ -7909,11 +8093,11 @@ body {
           transform: translate3d(0, 0, 0);
   contain: layout paint;
 }
-.template-preview .brand-page__background-shapes-layer[data-v-fbc9fc94],
-.device-wrapper .brand-page__background-shapes-layer[data-v-fbc9fc94] {
+.template-preview .brand-page__background-shapes-layer[data-v-1a7e8144],
+.device-wrapper .brand-page__background-shapes-layer[data-v-1a7e8144] {
   height: 100%;
 }
-.brand-page__inner--default[data-v-fbc9fc94] {
+.brand-page__inner--default[data-v-1a7e8144] {
   position: relative;
   z-index: 10;
   display: -webkit-box;
@@ -7925,16 +8109,16 @@ body {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.brand-page__inner--desktop[data-v-fbc9fc94] {
+.brand-page__inner--desktop[data-v-1a7e8144] {
   min-height: 100vh;
 }
-.brand-site__header[data-v-fbc9fc94] {
+.brand-site__header[data-v-1a7e8144] {
   container-type: inline-size;
 }
-.brand-page__header[data-v-fbc9fc94] {
+.brand-page__header[data-v-1a7e8144] {
   padding-top: var(--page-padding);
 }
-.brand-page__content--default[data-v-fbc9fc94] {
+.brand-page__content--default[data-v-1a7e8144] {
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 2.5rem;
@@ -7951,7 +8135,7 @@ body {
           flex-direction: column;
   max-width: var(--page-max-width);
 }
-.brand-page__content--desktop[data-v-fbc9fc94] {
+.brand-page__content--desktop[data-v-1a7e8144] {
   margin-left: auto;
   margin-right: auto;
   display: -webkit-box;
@@ -7967,15 +8151,15 @@ body {
           flex-direction: column;
   max-width: 100%;
 }
-.brand-page__content--inner[data-v-fbc9fc94] {
+.brand-page__content--inner[data-v-1a7e8144] {
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
 }
-.brand-page__content--inner--brandsite[data-v-fbc9fc94] {
+.brand-page__content--inner--brandsite[data-v-1a7e8144] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.brand-page__content--outline-selected[data-v-fbc9fc94] {
+.brand-page__content--outline-selected[data-v-1a7e8144] {
   position: relative;
   z-index: 10;
   outline-color: #b2bdfb;
@@ -7983,20 +8167,20 @@ body {
   outline-style: dashed;
   outline-offset: -0.25rem;
 }
-.brand-page__content--outline-footer-selected[data-v-fbc9fc94] {
+.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) {
-.brand-page__content--inner--full-width[data-v-fbc9fc94] {
+.brand-page__content--inner--full-width[data-v-1a7e8144] {
     padding-left: 0;
     padding-right: 0;
 }
 }
 @media (min-width: 640px) {
-.brand-page__content--inner--full-width[data-v-fbc9fc94] {
+.brand-page__content--inner--full-width[data-v-1a7e8144] {
     padding-left: var(--page-padding);
     padding-right: var(--page-padding);
 }
@@ -9589,6 +9773,15 @@ input.dynamic-width-input[data-v-97be2e87]:focus {
     color: rgb(24 24 24 / var(--tw-text-opacity))
 }
 
+.header-button-settings_option-title[data-v-9a1ee526] {
+    font-family: Inter, Helvetica, sans-serif;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 700;
+    --tw-text-opacity: 1;
+    color: rgb(24 24 24 / var(--tw-text-opacity))
+}
+
 .navigation-type-options[data-v-0fece584] button {
   padding-top: 8px !important;
 }
@@ -9628,7 +9821,7 @@ input.dynamic-width-input[data-v-97be2e87]:focus {
   margin: 0 auto;
 }
 
-.header-settings-panel_option-title[data-v-473cfcf3] {
+.header-settings-panel_option-title[data-v-8244a08c] {
     font-family: Inter, Helvetica, sans-serif;
     font-size: 0.875rem;
     line-height: 1.25rem;