/* Layout */
.indstry_hdr_btn:not(.all) {
    display: none;
}
body.has-industry .indstry_hdr_btn {
    display: block;    
}
body.nav-open {
	overflow: hidden;
}

body.nav-open::after {
	content: '';
	position: fixed;
	width: 100%;
	height: 100%;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(30px);
	z-index: 11;
}

.header__container {
	--topNavXSpacing: 0.825rem;
	--topNavYSpacing: 0.75rem;
	--mobileNavXSpacing: 0;
	--mobileNavYSpacing: 0.75rem;
	--mobileMenuXSpacing: 1rem;
	--mobileMenuYSpacing: 0.5rem;
	--dropdownwidth: 230px;
	--dropdownyspacing: 1.5rem;
	--dropdownxspacing: 2rem;
	--dropdownlinkspacing: 0.5rem;
	position: relative;
	width: 100%;
	z-index: 12;
	box-shadow: 15px 25px 60px rgba(0, 0, 0, 0);
	transition: background 200ms ease-in-out, box-shadow 200ms ease-in-out;
}

.header__container[data-topbar-fixed=true] .header__bottom {
	width: 100%;
	z-index: 12;
	box-shadow: 15px 25px 60px rgba(0, 0, 0, 0);
}

.header_inline {
	padding-left: 35px;
	padding-right: 15px;
	margin-top: 20px;
	transition: top 500ms ease-in-out, background 200ms ease;
}

.header__container[data-fixed='true'].header-scroll[data-topbar-fixed=false],
.header__container[data-fixed='true'].header-scroll[data-topbar-fixed=true] .header__bottom,
.header__container.scroll-up.header-scroll[data-topbar-fixed=false],
.header__container[data-float='true']{
	position: fixed;
}

.header__container[data-fixed='true'][data-scroll='true'].header-scroll[data-topbar-fixed=false],
.header__container[data-fixed='true'][data-scroll='true'].header-scroll[data-topbar-fixed=true] .header__bottom {
	top: -100%;
}

.header__container[data-fixed='true'][data-scroll='true'].scroll-up[data-topbar-fixed=false],
.header__container[data-fixed='true'][data-scroll='true'].scroll-down[data-topbar-fixed=false],
.header__container[data-fixed='true'][data-scroll='true'].scroll-up[data-topbar-fixed=true] .header__bottom,
.header__container[data-fixed='true'][data-scroll='true'].scroll-down[data-topbar-fixed=true] .header__bottom {
	top: -100%;
	transition: top 500ms ease-in-out, background 200ms ease;
}

.header__container[data-fixed='true'][data-scroll='true'].scroll-up[data-topbar-fixed=true] .header__inline,
.header__container[data-fixed='true'][data-scroll='true'].scroll-down[data-topbar-fixed=true] .header__inline {
	transition: background 200ms ease;
}

.header__container[data-fixed='true'][data-scroll='true'].scroll-up[data-topbar-fixed=false],
.header__container[data-fixed='true'][data-scroll='false'][data-topbar-fixed=false],
.header__container[data-fixed='true'][data-scroll='true'].scroll-up[data-topbar-fixed=true] .header__bottom,
.header__container[data-fixed='true'][data-scroll='false'][data-topbar-fixed=true] .header__bottom {
	top: 0;
}

.header__container[data-transparent='true'] {
	position: absolute;
	top: 0;
}

.header__container .header__top {
	position: relative;
	z-index: 10;
}

.header__container[data-topbar-fixed=true] .header__top {
	display: block;
	position: relative;
	z-index: 3;
	transform: translateY(0);
}

.header__container.header-scroll[data-topbar-fixed=true] .header__top {
	transform: translateY(-100%);
	display: none;
}

.header__wrapper {
	display: flex;
	margin: 0 auto;
	align-items: center;
}

.header__menu--top {
	display: flex;
	width: 100%;
	position: relative;
	z-index: 101;
	align-items: center;
}

.header__wrapper--top .header__menu--top .header__menu--top {
	width: auto;
}

.header__menu--align-justify .header__menu--top {
	justify-content: space-between;
}

.header__menu--align-center .header__menu--top {
	justify-content: center;
}

.header__menu--align-right .header__menu--top {
	justify-content: flex-end;
}
/* .header__menu--align-justify[data-length='1'] .header__menu--top {
	justify-content: flex-end;
} */
.header__menu--align-justify[data-length='1'][data-icons-position='left'] .header__menu--top,
.header__menu--align-justify[data-length='1'][data-icons-position='right'] .header__menu--top {
	justify-content: space-between;
}

.header__container[data-float='false'] .header__logo-col,
.header__container:not([data-layout='mobile']) .header__logo-col,
.header__container[data-float='true'] .header__logo-col {
	margin: 24px 0;
}

.header__button-col {
	/* 	margin: calc(var(--desktopnavyspacing) / 2) 0; */
	margin-left: var(--desktopnavxspacing);
}

.header__search-col {
	margin: calc(var(--desktopnavyspacing) / 2) 0;
	margin-left: calc(var(--desktopnavxspacing) / 2);
}

.header__container--left .header__search-col.buttons-false {
	margin-left: var(--desktopnavxspacing);
}

/* Language switcher */

.header__menu-item--language-switcher .header__menu-submenu {
	padding: 0.5rem 0;
	width: fit-content;
	overflow: hidden;
	min-width: 150px;
}

/* Logo */

.header__logo img {
	display: block;
	height: auto;
	max-width: 100%;
}

.header__container[data-fixed='true'].header-scroll .header__logo-default.logo-hide,
.header__logo-image.header__logo-scroll {
	display: none;
}

.header__container[data-fixed='true'].header-scroll .header__logo-image.header__logo-scroll {
	display: block;
}

/* Menu */

.header__menu-container--mobile {
	display: none;
}

.header__menu--mobile {
	position: fixed;
	z-index: 99;
	top: var(--navHeight);
	right: 0;
	left: 0;
	display: none;
	width: 100%;
	height: calc(100vh - var(--navHeight));
	overflow: hidden scroll;
	padding: 0;
	border-top: 1px solid #eaeaea;
	padding-bottom: 20px;
}

[data-float='true'] .header__menu--mobile {
	width: calc(100% - 30px);
	left: 0;
	height: calc(100vh - var(--navHeight));
	margin-left: auto;
	margin-right: auto;
}

@media(min-width: 576px) {
	[data-float='true'] .header__menu--mobile {
		max-width: 510px;
	}
}

@media(min-width: 768px) {
	[data-float='true'] .header__menu--mobile {
		max-width: 690px;
	}
}

@media(min-width: 992px) {
	[data-float='true'] .header__menu--mobile {
		max-width: 930px;
	}
}

@media(min-width: 1200px) {
	[data-float='true'] .header__menu--mobile {
		max-width: 1110px;
	}
}
@media (max-width: 1199px) and (min-width: 992px) {
	.header__button-col {
		margin-left: 5px;
	}
}

.header__menu-link,
.header__menu-item svg,
.header__menu-item svg g,
.header__menu-item svg path {
	transition: color, fill 0.25s ease-in-out;
}

/* Menu items */

.header__menu-item {
	position: relative;
	display: inline-flex;
	align-items: center;
	transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
}
.header__container:not([data-layout='mobile']) .header__menu-item {
	border-radius: 10px;
}
/* Menu items - top level */
.has-next-false {
	margin: 0 calc(var(--topNavXSpacing) * -0.975);
}

.header__menu--desktop:not(.header__menu--top) .header__menu-item--depth-1>.header__menu-link {
	padding-top: var(--desktopnavyspacing);
	padding-bottom: var(--desktopnavyspacing);
	padding-left: var(--desktopnavxspacing);
	padding-right: var(--desktopnavxspacing);
}

.header__menu--top .header__menu-wrapper {
	gap: 0 !important;
}
.header__menu--top .header__menu-item--depth-1>.header__menu-link {
	padding: 10px;
	opacity: 1;
	transition: opacity 0.15s ease-in-out;
	will-change: transform, opacity;
	line-height: 125% !important;
	letter-spacing: 0.1px;
}
.header__menu--top .header__menu-item--depth-1>.header__menu-link:hover {
	opacity: 0.75;
}

.header__menu.header__menu--top>div:first-child>ul:first-child>li:first-child>a,
.header__menu.header__menu--top>div:first-child>ul:first-child>li:first-child>button {
	padding-left: 0;
}

.header__menu.header__menu--top>div:last-child>ul:last-child>li:last-child>a,
.header__menu.header__menu--top>div:last-child>ul:last-child>li:last-child>button {
	padding-right: 0;
}

/*  Top bar - announcement */
.header__menu-announcement a {
	color: inherit;
	text-decoration: underline;
}

.header__menu-announcement a:hover {
	color: inherit;
	text-decoration: underline;
	opacity: 0.65;
}

.header__menu-announcement :last-child {
	margin-bottom: 0;
}

/*  Top bar - menu */

.top-bar-mobile {
	margin-top: var(--mobileMenuYSpacing);
}

/* Menu items - submenus */

.header__menu-submenu {
	position: absolute;
	z-index: 99;
	top: calc(100% + 29px);
	left: 0;
	width: var(--dropdownwidth);
	text-align: left;
	padding: 20px;
	box-shadow: 0 0 50px 0 rgba(17, 18, 26, 0.15);
	visibility: hidden;
	opacity: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	row-gap: 20px;
	backdrop-filter: blur(50px);
}
.header__container:not([data-layout='mobile']) .header__menu-submenu.card_menu_wrap {
	padding: 0;
}
.header__container:not([data-layout='mobile']) .header__menu-submenu.card_menu_wrap .mega_innr_wrap,
.header__container:not([data-layout='mobile']) .header__menu-submenu.card_menu_wrap .menu_card {
	padding: 20px;
}
.header__menu-submenu--level-2:before {
	content: '';
	position: absolute;
	top: -35px;
	left: 0;
	width: 100%;
	height: 35px;
	background-color: transparent;
}

.header__menu-item--open > .header__menu-submenu {
	visibility: visible;
	opacity: 1;
}

.header__menu-item--depth-1:last-child>.header__menu-submenu {
	right: 0;
	left: auto;
}

.header__container:not([data-layout='mobile']) .header__menu-item:not([data-mega=true]) .header__menu-submenu.header__menu-submenu--level-2 {
	left: calc((var(--dropdownxspacing) * -1) + var(--desktopnavxspacing));
}

.header__menu-submenu--level-3 {
	top: calc((var(--dropdownyspacing) * -0.9) - var(--border-size));
	left: calc(100% + 1px);
}

.header__menu--top .header__menu-submenu {
	padding: calc(var(--dropdownyspacing) * 0.5) 0;
	width: calc(var(--dropdownwidth) / 1.5);
}

.header__menu--top .header__menu-submenu .header__menu-link {
	padding: var(--dropdownlinkspacing) calc(var(--dropdownxspacing) * 0.5);
}

.header__menu--top .header__menu-submenu--level-3 {
	top: calc(((var(--dropdownyspacing) * 0.5) * -1) - var(--border-size));
	left: 100%;
}

/* .header__menu-item--depth-1:nth-last-child(-n + 2) .header__menu-submenu--level-3 {
top: 0;
right: 100%;
left: auto;
} */

.header__menu-submenu .header__menu-item {
	width: 100%;
	/* 	background-color: inherit; */
}

.header__menu-submenu .header__menu-link {
	display: inline-flex;
	flex: 1;
/* 	align-items: center; */
	padding: var(--dropdownlinkspacing) var(--dropdownxspacing);
}

.header__menu-link:focus,
.header__menu-link:focus-visible {
	z-index: 1;
	outline-offset: 2px;
}

.header__menu-back svg {
	margin-right: 10px;
}

/* Menu icons */

.header__container:not([data-layout='mobile']) .header__menu-submenu .header__menu-child-toggle {
	margin-left: auto;
}

.header__container:not([data-layout='mobile']) .header__menu-submenu .header__menu-child-toggle {
	transform: rotate(-90deg);
}

.header__top-menu .header__menu-child-toggle {
	margin-left: 2px;
}

.header__container[data-layout='mobile'] .header__menu-toggle {
	display: none;
	width: 46px;
	height: 46px;
	padding: 0 15px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: 15px;
	box-sizing: border-box;
}
.header__menu-toggle svg {
	width: 20px;
}
.header__container:not([data-layout='mobile']) .three_column_menu .header__menu-submenu--level-2 {
	width: 723px;
	left: 50%;
	transform: translateX(-30%);
}
.header__container:not([data-layout='mobile']) .mega_innr_wrap {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	gap: 4.5px;
}
.header__container:not([data-layout='mobile']) .three_column_menu .mega_innr_wrap {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
}
.header__container:not([data-layout='mobile']) .three_column_menu .mega_innr_wrap > .header__menu-item--depth-2 {
	width: calc(33.33% - 3px);
}


/* Search */

.hs-search-field__desktop .hs-search-field__input {
	width: 400px !important;
	border: none !important;
	height: var(--size) !important;
	max-width: none !important;
	min-height: var(--size) !important;
	position: absolute;
	right: 0;
	bottom: 0;
	opacity: 1;
}

.header__container:not([data-layout='mobile']) .hs-search-field__form .btn-wrapper,
.header__container:not([data-layout='mobile']) .hs-search-field__form button,
.header__wrapper-blog .hs-search-field__form button {
	padding: 0;
	width: 100%;
	justify-content: center;
	text-align: center;
}

.search--icon {
	position: relative;
	z-index: 1;
	border-color: transparent !important;
}

.hs-search-field__mobile {
	margin-top: var(--mobileMenuYSpacing);
	padding: var(--mobileMenuYSpacing) var(--mobileMenuXSpacing);
}

.hs-search-field__mobile form {
	position: relative;
}

.hs-search-field__mobile .btn-wrapper {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 100%;
	display: flex;
	align-items: center;
}

.hs-search-field__mobile .btn-wrapper .cta-button {
	padding: 0 10px 0 15px;
	min-height: 100%;
}

.hs-search-field__mobile input:not([type='radio']):not([type='checkbox']):not([type='file']):not([type='submit']) {
	padding-left: 38px;
	border: none;
}

.header__container .cta-group,
.header__container .header__menu-col {
	opacity: 1;
	transition-delay: 0.25s;
	transition: opacity 0.15s ease-in-out;
}

.header__menu-col.m-left-auto {
	margin-left: 30px;
}

.header__container.search-open .cta-group,
.header__container.search-open .header__menu-col {
	opacity: 0;
}

.header__container:not([data-layout='mobile']) .header__wrapper {
	position: relative;
}

.header__container:not([data-layout='mobile']) .search,
.header__wrapper-blog .search {
	z-index: 2;
	position: relative;
	width: var(--size);
	height: var(--size);
}

.header__container:not([data-layout='mobile']) .closed .hs-search-field__input,
.header__wrapper-blog .closed .hs-search-field__input {
	padding: 0 !important;
	opacity: 0;
	width: 100% !important;
}

.header__container:not([data-layout='mobile']) .closed .hs-search-field__input::placeholder,
.header__wrapper-blog .closed .hs-search-field__input::placeholder {
	color: transparent;
}

/* Social Icons */
.header__container .sr-social {
	list-style: none;
	list-style-type: none;
	padding: 0;
	margin: 0;
	align-items: center;
	display: inline-flex;
	gap: 15px;
}

.header__container .sr-social.p-left {
	margin-right: calc(var(--topNavXSpacing) * 0.5);
}

.header__container .sr-social.p-center {
	margin: calc(var(--topNavXSpacing) * 0.5);
}

.header__container .sr-social.p-right {
	margin-left: calc(var(--topNavXSpacing) * 0.5);
}

.header__container .sr-social a {
	opacity: 1;
	display: inline-flex;
	transition: opacity 0.25s ease-in-out;
	will-change: opacity;
}

.header__container .sr-social a:hover {
	opacity: 0.75;
}

.header__container .sr-social svg {
	color: var(--f);
	fill: var(--f);
}

.header__container .icon-bg {
	align-items: center;
	justify-content: center;
	border-radius: 100%;
	background: var(--b);
	height: var(--h);
	width: var(--w);
}

/* button reset */
.no-button {
	background: none;
	border: none;
	border-radius: 0;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	margin-bottom: 0;
	padding: 0;
	text-align: left;
	text-decoration: none;
	outline-offset: 5px;
	cursor: pointer;
}

/* Skip to content button */
.skip-main {
	left: -999px;
	position: absolute;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: -999;
}

.skip-main:focus,
.skip-main:active {
	left: 0;
	top: 10px;
	height: auto;
	overflow: auto;
	margin: 0 auto;
	padding: 10px;
	border-radius: 100px;
	text-align: center;
	font-size: 1.2em;
	z-index: 999;
	width: 300px;
	right: 0;
}

.header__container:not([data-layout='mobile']) .m-left-auto {
	margin-right: auto;
}

.header__container:not([data-layout='mobile']) .m-right-auto {
	margin-left: auto;
}

.header__container:not([data-layout='mobile']) .m-center-auto,
.header__container:not([data-layout='mobile']) .header__logo-col {
	margin-left: auto;
	margin-right: auto;
}

/* Mega Menu */
.header__container:not([data-layout='mobile']) .header__menu-item[data-mega='true'] {
	position: static;
}

/* .header__container:not([data-layout='mobile']) [data-mega='true'] .header__menu-submenu .header__menu-item {
margin: 1px;
} */

.header__container:not([data-layout='mobile']) .header__menu-item[data-mega='true'] .header__menu-item--depth-2 {
	display: block;
}

.header__container:not([data-layout='mobile']) .header__menu-item[data-mega='true'] .header__menu-submenu--level-2 {
	display: flex;
}

.header__container:not([data-layout='mobile']) .header__menu-item[data-mega='true'] .header__menu-submenu {
	width: 100%;
}

/* .header__container:not([data-layout='mobile']) .header__menu-item[data-mega='true'] .header__menu-submenu--level-2>.header__menu-item:not(:first-child) {
border-left: 1px solid #e5e7ea;
} */

.header__container:not([data-layout='mobile']) .header__menu-item[data-mega='true'] .header__menu-submenu--level-3 {
	position: static;
	border: none !important;
	padding: 0;
	box-shadow: none;
	opacity: 1;
	transition: none;
	visibility: visible;
	pointer-events: none;
}

.header__container:not([data-layout='mobile']) .header__menu-item[data-mega='true'].header__menu-item--open .header__menu-submenu--level-3 {
	pointer-events: all;
	opacity: 1;
}

/* .header__container:not([data-layout='mobile']) .header__menu-item[data-mega='true'] .header__menu-submenu button.header__menu-link {
width: calc(100% - var(--dropdownxspacing) * 2);
font-weight: bold !important;
cursor: auto;
} */

.header__container:not([data-layout='mobile']) [data-mega='true'] .header__menu-item--depth-2 .header__menu-child-toggle {
	display: none;
}

.header__container:not([data-layout='mobile']) .header__menu-item--depth-1[data-mega='true'] > .header__menu-link:after {
	content: '';
	width: 0;
	height: 0;
	position: absolute;
	left: 50%;
	top: 75%;
	transform: translateX(-50%);
	width: 100%;
	height: 100%;
	background: transparent;
	visibility: hidden;
	opacity: 0;
}

.header__container:not([data-layout='mobile']) .header__menu-item--depth-1[data-mega='true'].header__menu-item--open > .header__menu-link:after {
	visibility: visible;
	opacity: 1;
}

/* Mobile menu */
.header__container[data-layout='mobile'] .header__top:not(.header__top-announcement) {
	display: none;
}

.header__container[data-layout='mobile'] .header__logo-col {
	padding-right: 2rem;
}

.header__container[data-layout='mobile'] .header__menu-col-desktop,
.header__container[data-layout='mobile'] .header__menu--desktop {
	display: none;
}
.header__container:not([data-layout='mobile']) .header__menu-col-mobile,
.header__container:not([data-layout='mobile']) .header__button-col-mobile {
	display: none;
}
.header__container[data-layout='mobile'] .header__menu-col {
	margin-left: auto;
}

.header__container[data-layout='mobile'] .header__menu-container--mobile {
	display: block;
}

.header__container[data-layout='mobile'] .header__menu--show {
	display: block;
}

.header__container[data-layout='mobile'] .header__menu-item {
	width: 100%;
	text-align: left;
	position: static;
	justify-content: space-between;
}

.header__container[data-layout='mobile'] .header__menu-submenu .header__menu-item {
	border-radius: 5px;
}
.header__container[data-layout='mobile'] .header__menu-link {
	width: 100%;
	padding: 20px 25px;
	display: flex;
	align-items: center;
	/*     justify-content: space-between; */
	box-sizing: border-box;
}
.header__container[data-layout='mobile'] .header__menu-submenu .header__menu-link {
	padding: 10px 25px;
}

/* .header__container[data-layout='mobile'] .header__menu-submenu--level-2>li {
margin-bottom: calc(var(--mobileMenuYSpacing) * 2);
} */

.header__container[data-layout='mobile'] .header__menu-back {
	background: none;
	border: none;
	justify-content: start;
}

.header__container[data-layout='mobile'] .header__menu-item--button {
	padding: 25px;
	padding-bottom: 120px;
	margin-top: auto;
}

.header__container[data-layout='mobile'] .header__menu-submenu .header__menu-item {
	padding: 0;
}

.header__container[data-layout='mobile'] .header__menu-submenu,
.header__container[data-layout='mobile'] .header__menu-submenu--level-3,
.header__container[data-layout='mobile'] .header__menu-item--depth-1:nth-last-child(-n + 2) .header__menu-submenu--level-3 {
	position: static;
	width: 100%;
	border: none;
}

.header__container[data-layout='mobile'] .header__menu-child-toggle svg {
	margin-left: 0;
}

.header__container[data-layout='mobile'] .header__menu-child-toggle {
	transform-origin: 50% 50%;
	transition: transform 0.4s;
	will-change: transform;
}
.header__container[data-layout=mobile] .header__menu-item--open > .header__menu-link .header__menu-child-toggle {
	transform: rotate(180deg);
}

.header__container[data-layout='mobile'] .header__menu-toggle--show {
	display: flex;
}

.header__container[data-layout='mobile'] .hidden-phone {
	display: none !important;
}

.header__container[data-layout='mobile'] .header__menu-container--mobile .cta-group {
	flex-direction: column;
	align-items: flex-start;
}

[data-layout='desktop'] .logo_mobile,
.header__container[data-fixed='true'][data-layout='desktop'].header-scroll .header__logo-image.header__logo-scroll.logo_mobile,
.header__container[data-fixed='true'][data-layout='mobile'].header-scroll .header__logo-image.header__logo-scroll:not(.logo_mobile):not(.logo_mobile_scroll),
[data-layout='mobile'] [data-mobile='true'] .header__logo-image:not(.logo_mobile) {
	display: none;
}
.header__container[data-layout='mobile'] .header__menu-item--depth-1 > .header__menu-link .menu_icon {
	display: none;
}


/* Blog Nav */
.header_styles {
	position: relative;
	z-index: 2;
}

.header__wrapper-blog {
	display: flex;
	align-items: center;
	margin-top: -1.1875rem;
	padding: 34px 15px 15px;
	flex-direction: column;
	opacity: 1;
	transition: opacity 0.3s ease, margin-top 0.3s ease, background-color 200ms ease;
	transition-delay: 0s;
}

.header_styles .header__wrapper-blog {
	position: absolute;
	margin-top: 0;
	left: 0;
	width: 100%;
}

.header_styles:has(.header__wrapper-blog) .container {
	position: relative;
}

.scroll-down .header__wrapper-blog {
	margin-top: -1.875rem;
	opacity: 0;
	transition: opacity 0.3s ease, margin-top 0.3s ease, background-color 200ms ease;
	transition-delay: 0.5s;
}
.header__wrapper-blog > div:first-child {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
}

.header__wrapper-blog .blog-links {
	margin-left: auto;
	display: flex;
	align-items: center;
	overflow: hidden;
	width: 100%;
	justify-content: flex-end;
}

.header__wrapper-blog .blog-links ul {
	padding: 0;
	margin: 0;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	display: none;
}

.header__wrapper-blog .blog-links .blog-tags {
	padding: 0.25rem 0.5rem;
	white-space: pre;
}

.header__wrapper-blog .blog-links .blog-tags-dropdown-btn {
	display: none;
	padding: 0.25rem 0.5rem;
	outline-color: transparent;
	border: none;
	align-items: center;
	gap: 0.5rem;
}

.header__wrapper-blog .blog-tags-dropdown {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease-in-out;
}

.header__wrapper-blog .blog-tags-dropdown.open {
	grid-template-rows: 1fr;
	transition: grid-template-rows 0.3s ease-in-out;
}

.header__container[data-layout='desktop'] .header__wrapper-blog .blog-links ul.lg {
	max-width: 500px;
	overflow-y: hidden;
	overflow-x: auto;
	scrollbar-width: thin;
	padding-bottom: 4px;
	padding-top: 2px;
	display: flex;
}

.header__container[data-layout='mobile'] .header__wrapper-blog .blog-links ul.md {
	flex-wrap: wrap;
	display: flex;
	padding-top: 1rem;
	padding-bottom: 2px;
}

.header__container[data-layout='mobile'] .blog-tags-dropdown-btn {
	display: flex;
}

.header__wrapper-blog .header__search-col:not(.closed) .search--icon {
	filter: invert(1);
	transition: filter 0.2s ease;
}
.header__wrapper-blog .hs-search-field__input {
	width: 250px !important;
	border: none !important;
	height: var(--size) !important;
	max-width: none !important;
	min-height: var(--size) !important;
	position: absolute;
	right: 0;
	bottom: 0;
	opacity: 1;
}

.header__wrapper-blog .hs-search-field__input::-webkit-search-results-decoration,
.header__wrapper-blog .hs-search-field__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	border: none;
	cursor: pointer;
	color: #fff;
	padding: 0;
}

/* New Css */
/* ===== CARD ===== */
.header__container:not([data-layout=mobile]) .header__menu-item[data-mega=true] .header__menu-submenu--level-2 {
	display: flex;
	flex-direction: row;
	padding: 0;
	gap: 0;
	max-width: 1100px;
	left: 50%;
	transform: translateX(-50%);
	backdrop-filter: blur(50px);
	overflow: hidden;
}
.header__container:not([data-layout=mobile]) .header__menu-item[data-mega=true] .header__menu-submenu--level-2 .header__menu-submenu {
	background-color: transparent !important;
}
.header__container:not([data-layout=mobile]) .header__menu-item[data-mega=true] .header__menu-submenu--level-2 .header__menu-submenu:after {
	content: none;
}
.header__container:not([data-layout=mobile]) .header__menu-item[data-mega=true] .mega_innr_wrap {
	display: flex;
	width: 100%;
	padding: 50px;
}
.header__container:not([data-layout=mobile]) .header__menu-item[data-mega=true] .header__menu-submenu--level-3 .mega_innr_wrap {
	display: block;
	padding: 0;
}
.header__container:not([data-layout=mobile]) .header__menu-item[data-mega=true] .header__menu-item--depth-2 {
	display: block;
	margin: 0;
	padding: 0;
	background: transparent !important;
}
.header__container:not([data-layout=mobile]) .header__menu-item[data-mega=true] .header__menu-item--depth-2 > .header__menu-link {
	padding: 0 15px 10px;
	margin-bottom: 10px;
	position: relative;
	width: 100%;
}
.header__container:not([data-layout=mobile]) .header__menu-item[data-mega=true] .header__menu-item--depth-2 > .header__menu-link:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	border-radius: 5px;
	transition: all 0.5s ease;
}
.header__container:not([data-layout=mobile]) .header__menu-item[data-mega=true] .header__menu-item--depth-2:hover > .header__menu-link:after {
	width: 100%;
}
.header__container:not([data-layout=mobile]) .header__menu-item[data-mega=true] .header__menu-submenu--level-3 {
	gap: 10px;
}
.header__container:not([data-layout=mobile]) .header__menu-item[data-mega=true] .header__menu-item--depth-3 > .header__menu-link {
	padding: 7px 15px;
	display: block;
}
.menu_desc {
	margin: 0;
}
.header__container:not([data-layout=mobile]) .header__menu-item[data-mega=false] > .card_menu_wrap {
	width: 795px;
	left: 0 !important;
/* 	transform: translateX(-50%); */
}
.header__container:not([data-layout=mobile]) .card_menu_wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	flex-direction: row;
	justify-content: space-between;
}
.header__container:not([data-layout=mobile]) .card_menu_wrap > .mega_innr_wrap {
	width: calc(60% - 5px);
}
.header__container:not([data-layout=mobile]) .card_menu_wrap > .menu_card {
	width: calc(40% - 5px);
}
.header__container:not([data-layout=mobile]) .header__menu-item[data-mega=true] .card_menu_wrap > .mega_innr_wrap {
	width: calc(60% - 5px);
}
.header__container:not([data-layout=mobile]) .header__menu-item[data-mega=true] .card_menu_wrap > .menu_card {
	width: calc(40% - 5px);
}

/* .header__container[data-layout=mobile] .header__menu-item[data-mega=true] .menu_card {
display: none;
} */
.header__container[data-layout=mobile] .header__menu-item[data-mega=true] .header__menu-item--depth-3 > .header__menu-link {
	display: block;
}
.header__container[data-layout=mobile] .header__menu-submenu--level-2 .header__menu-submenu {
	display: block !important;
	padding: 0;
}
.header__container[data-layout=mobile] .header__menu-submenu--level-2 .header__menu-child-toggle {
	display: none;
}
.menu_link_wrapper {
	display: flex;
	flex-direction: column;
	flex: 1;
}

@media (max-width: 1199px) and (min-width: 992px) {
	.header__menu--desktop:not(.header__menu--top) .header__menu-wrapper {
		gap: 4px !important;
	}
	.header__menu--desktop:not(.header__menu--top) .header__menu-item--depth-1 > .header__menu-link {
		padding-left: 8px;
		padding-right: 8px;
	}
	.header_inline{
		padding-left: 15px;
	}
}


/* Mobile Fixed CTA */
.header__container[data-layout=desktop] .hidden-desktop {
	display: none !important;
}

@media(min-width: 501px){
	.header__container[data-layout=mobile] .mobile-fixed-button {
		display:none;
	}
}
.header__container[data-layout=mobile] .mobile-fixed-button {
	position: fixed;
	bottom: 0;
	left: 0;
	padding: 24px;
	width: 100%;
	margin: 0;
}

.header__container[data-layout=mobile] .mobile-fixed-button .btn-wrapper {
	width: 100%;
}

.header__container[data-layout=mobile] .mobile-fixed-button .cta_button,
.header__container[data-layout=mobile] .mobile-fixed-button .cta-button{
	display: flex;
	align-items: center;
	justify-content: center;
}

.header__container[data-layout=mobile] .mobile-fixed-button {
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease, visibility .3s ease;
	visibility: hidden;
}

.header__container[data-layout=mobile] .mobile-fixed-button.show {
	opacity: 1;
	pointer-events: all;
	visibility: visible;
}

.nav-open .header__container[data-layout=mobile] .mobile-fixed-button {
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease, visibility .3s ease;
	visibility: hidden;
}
.header__menu-col.header__menu-col-mobile {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
}
.dynamic-content {
	width: 100%;
	height: 100%;
}
.dynamic-content img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	border-radius: 8px;
}
.header__menu--mobile .menu_card.hover-image-wrap,
.header__menu--mobile .menu_icon-wrap,
.header__menu-submenu:not(.has_dynamic_content) .hover-image-wrap {
	display: none !important;
}

@media (max-width: 1199px) {
	.header__container:not([data-layout=mobile]) .header__menu-item[data-mega=false] > .card_menu_wrap {
		width: 725px;
	}
}

/* Glass on scroll (Miles 2026-09-23, after adobe.com's global nav).
   At the top of the page nothing changes: the full-width bar is the ::before layer the template paints.
   Once .header-scroll is on (module.js adds it when the menu bar reaches the top of the screen), the bar lifts off
   the top edge, contracts to a rounded bar that hugs the content, cross-fades to glass (the ::after layer), and,
   with Compact on, gets shorter on desktop. Phones get a full-width strip at one height (see phone_and_desktop.css).
   - Adobe's mechanics: 16px blur, 16px corners, its five-layer shadow, 0.48s cubic-bezier(.42,0,.2,1).
   - The glass itself is the homepage Integration Orbit tile: blur(16px) saturate(1.5), the same white rim and the
     same top highlight. The tint is this module's own Background Color 1 (--gn-color), so no new colour.
   - The "surface" is the element that pins and paints the bar: the whole header when the hello bar stays pinned
     (data-topbar-fixed=false), or only .header__bottom when the hello bar scrolls away (data-topbar-fixed=true).
   - Nothing here transforms or filters an ancestor of the mobile menu or the fixed mobile CTA: both are
     position:fixed, and a transform/filter on an ancestor would re-anchor them to the header.
   - !important only on properties the template's scoped rules set with an #hs_cos_wrapper id, or the theme sets. */
.header__container[data-glass=true] {
	--gn-ease: cubic-bezier(.42, 0, .2, 1);
	--gn-edge: 8px; /* adobe.com's nav margin; keeps 16px+ between the content and the glass edge at 1024px */
	--gn-pad: 24px;
	--gn-top: var(--gn-gap, 10px);
	--gn-l: max(var(--gn-edge), calc(var(--gn-cl, 0px) - var(--gn-pad)));
	--gn-r: max(var(--gn-edge), calc(var(--gn-cr, 0px) - var(--gn-pad)));
	--gn-btn: 40px; /* compact button height (desktop) */
	transition: transform .48s var(--gn-ease), background 200ms ease-in-out, box-shadow 200ms ease-in-out;
}
.header__container[data-glass=true][data-glass-width=wide] {
	--gn-l: var(--gn-edge);
	--gn-r: var(--gn-edge);
}
/* Phones (launch review 2026-09-23 14:04): a full-width strip, no floating island, no inset, no rounded corners. */
.header__container[data-glass=true][data-layout=mobile] {
	--gn-pad: 16px;
	--gn-top: 0px;
	--gn-l: 0px;
	--gn-r: 0px;
	--gn-radius-eff: 0px;
}
.header__container[data-glass=true][data-topbar-fixed=true] > .header__bottom {
	transition: transform .48s var(--gn-ease), box-shadow 200ms ease-in-out;
}
/* Only opacity and transform animate (iPad, Miles 22:52: "That transition effect is causing a lag still"). The glass
   layer keeps its final shape at all times and fades in; the solid full-width bar fades out; the blur switches on
   under the fading layer instead of animating its radius; the drop from the top edge is a transform on desktop. No
   layout property (top, left, width, height, padding) changes during the transition. */
:is(.header__container[data-glass=true][data-topbar-fixed=false], .header__container[data-glass=true][data-topbar-fixed=true] > .header__bottom)::before {
	transition: opacity .32s ease;
}
:is(.header__container[data-glass=true][data-topbar-fixed=false], .header__container[data-glass=true][data-topbar-fixed=true] > .header__bottom)::after {
	content: '';
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0;
	border-radius: 0;
	background-color: rgba(248, 251, 255, .62);
	background-color: color-mix(in srgb, var(--gn-color, #f8fbff) var(--gn-tint, 62%), transparent);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .62), inset 0 1px 0 rgba(255, 255, 255, .78), inset 0 -1px 0 rgba(0, 106, 198, .08);
	/* back at the top: fade out first, then return to the full-width shape in one step once invisible */
	transition: opacity .32s ease, left 0s .32s, width 0s .32s, border-radius 0s .32s;
}
/* Orbit tile's diagonal sheen, faded so it only ever brightens the glass (dark text keeps its contrast). */
:is(.header__container[data-glass=true][data-glass-sheen=true][data-topbar-fixed=false], .header__container[data-glass=true][data-glass-sheen=true][data-topbar-fixed=true] > .header__bottom)::after {
	background-image: linear-gradient(100deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .12) 34%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, .16) 84%, rgba(255, 255, 255, .06) 100%);
}

/* Floating. Hide-on-scroll-down headers float only while shown (scroll-up); the mobile menu turns it off. The gap from
   the top edge is a transform, on desktop only: a transform on a phone's bar would re-anchor the position:fixed menu
   sheet and fixed button inside it (phones have no gap anyway, --gn-top: 0). */
body:not(.nav-open) :is(.header__container[data-glass=true][data-fixed=true].header-scroll:is([data-scroll=false], .scroll-up)[data-topbar-fixed=false], .header__container[data-glass=true][data-fixed=true].header-scroll:is([data-scroll=false], .scroll-up)[data-topbar-fixed=true] > .header__bottom) {
	top: 0 !important;
}
body:not(.nav-open) :is(.header__container[data-glass=true][data-layout=desktop][data-fixed=true].header-scroll:is([data-scroll=false], .scroll-up)[data-topbar-fixed=false], .header__container[data-glass=true][data-layout=desktop][data-fixed=true].header-scroll:is([data-scroll=false], .scroll-up)[data-topbar-fixed=true] > .header__bottom) {
	transform: translateY(var(--gn-top));
}
body:not(.nav-open) :is(.header__container[data-glass=true][data-fixed=true].header-scroll[data-topbar-fixed=false], .header__container[data-glass=true][data-fixed=true].header-scroll[data-topbar-fixed=true] > .header__bottom) {
	box-shadow: none !important;
}
/* Pinned: the glass layer takes its shape in one step (it is still invisible) and fades in: hugging the content
   (Width = Fit the content) with the corner radius. The open mobile menu keeps the flat full-width bar. */
body:not(.nav-open) :is(.header__container[data-glass=true][data-fixed=true].header-scroll[data-topbar-fixed=false], .header__container[data-glass=true][data-fixed=true].header-scroll[data-topbar-fixed=true] > .header__bottom)::after {
	left: var(--gn-l) !important;
	width: calc(100% - var(--gn-l) - var(--gn-r)) !important;
	border-radius: var(--gn-radius-eff, var(--gn-radius, 16px)) !important;
	transition: opacity .32s ease;
}
body:not(.nav-open) :is(.header__container[data-glass=true][data-fixed=true].header-scroll[data-topbar-fixed=false], .header__container[data-glass=true][data-fixed=true].header-scroll[data-topbar-fixed=true] > .header__bottom)::before {
	opacity: 0;
}
body:not(.nav-open) :is(.header__container[data-glass=true][data-fixed=true].header-scroll[data-topbar-fixed=false], .header__container[data-glass=true][data-fixed=true].header-scroll[data-topbar-fixed=true] > .header__bottom)::after {
	opacity: 1;
	-webkit-backdrop-filter: blur(var(--gn-blur, 16px)) saturate(1.5);
	backdrop-filter: blur(var(--gn-blur, 16px)) saturate(1.5);
}
body:not(.nav-open) :is(.header__container[data-glass=true][data-glass-shadow=true][data-fixed=true].header-scroll[data-topbar-fixed=false], .header__container[data-glass=true][data-glass-shadow=true][data-fixed=true].header-scroll[data-topbar-fixed=true] > .header__bottom)::after {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .62), inset 0 1px 0 rgba(255, 255, 255, .78), inset 0 -1px 0 rgba(0, 106, 198, .08),
		0 67px 19px rgba(0, 0, 0, 0), 0 43px 17px rgba(0, 0, 0, .01), 0 24px 14px rgba(0, 0, 0, .04), 0 11px 11px rgba(0, 0, 0, .07), 0 3px 6px rgba(0, 0, 0, .08);
}

/* Compact (desktop): the buttons and the menu links shrink, so the bar gets shorter around the fixed 24px padding.
   In one step, not animated: animating heights and padding re-laid the header out on every frame (the iPad lag).
   Phones keep one height at rest and scrolled. */
.header__container[data-glass=true][data-glass-compact=true][data-layout=desktop].header-scroll .header__button-col.hidden-phone :is(.cta-button, .cta_button) {
	min-height: var(--gn-btn) !important;
	height: var(--gn-btn) !important;
}
/* One height for both header buttons (Miles 2026-09-30). The phone button is a legacy HubSpot CTA, which renders as
   .cta_button, and HubSpot's CTA stylesheet sets a.cta_button { box-sizing: content-box !important }. So the theme's
   46px min-height plus the 1px borders made it 48px beside the 46px Schedule a demo, and the compact rule above only
   named .cta-button, which left it at 48px beside the 40px demo button on scroll. Border-box here, both spellings above. */
.header__container .header__button-col .cta_button {
	box-sizing: border-box !important;
}
.header__container[data-glass=true][data-glass-compact=true][data-layout=desktop].header-scroll .header__bottom .header__menu--desktop .header__menu-item--depth-1 > .header__menu-link {
	padding-top: 7px !important;
	padding-bottom: 7px !important;
}

/* Opening the mobile menu snaps back to the full-width bar at once, so the menu sheet meets it with no gap. */
body.nav-open .header__container[data-glass=true],
body.nav-open :is(.header__container[data-glass=true][data-topbar-fixed=false], .header__container[data-glass=true][data-topbar-fixed=true] > .header__bottom),
body.nav-open :is(.header__container[data-glass=true][data-topbar-fixed=false], .header__container[data-glass=true][data-topbar-fixed=true] > .header__bottom)::before,
body.nav-open :is(.header__container[data-glass=true][data-topbar-fixed=false], .header__container[data-glass=true][data-topbar-fixed=true] > .header__bottom)::after {
	transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
	.header__container[data-glass=true],
	.header__container[data-glass=true] > .header__bottom,
	.header__container[data-glass=true]::before,
	.header__container[data-glass=true]::after,
	.header__container[data-glass=true] > .header__bottom::before,
	.header__container[data-glass=true] > .header__bottom::after,
	.header__container[data-glass=true] .header__logo-col,
	.header__container[data-glass=true] .cta-button,
	.header__container[data-glass=true] .header__menu-toggle,
	.header__container[data-glass=true] .header__menu-link {
		transition: none !important;
	}
}

/* Logo position (Miles 2026-09-23, "the core mockup calls for the BPOS logo to be left aligned"): Settings > Logo
   position. Left (default): logo, then the menu, with the buttons pushed right. The template also renders the logo
   BEFORE the menu in the HTML, so keyboard focus follows the visual order. Center: the SR layout (logo between the
   menu and the buttons, auto margins). Desktop only; phones already show the logo on the left. */
.header__container[data-logo-position=left]:not([data-layout='mobile']) .header__logo-col {
	margin-left: 0;
	margin-right: 20px; /* + the first link's 15px padding = the mockup's ~35px from logo to "Products" */
}
.header__container[data-logo-position=left]:not([data-layout='mobile']) .header__menu-col-desktop {
	margin-right: auto;
}

/* Over the hero (Miles 2026-09-23, "closer to what Adobe has on load"): at the top of the page the header has no band
   of its own. It is see-through over the page's first section (the hero or masthead), whose background module.html's
   inline script extends up behind it; the glass takes over once the visitor scrolls. Body class "nav-standalone"
   (page settings > Body Class) keeps the header in its own white band, as before. The mobile menu, when open,
   always gets the solid bar so its sheet meets it. */
body:not(.nav-standalone):not(.nav-open) :is(.header__container:not(.header-scroll)[data-topbar-fixed=false], .header__container:not(.header-scroll)[data-topbar-fixed=true] > .header__bottom)::before {
	opacity: 0;
}
body:not(.nav-standalone):not(.nav-open) :is(.header__container:not(.header-scroll)[data-topbar-fixed=false], .header__container:not(.header-scroll)[data-topbar-fixed=true] > .header__bottom) {
	box-shadow: none !important;
}

/* White text over dark heroes (Miles 2026-09-23): Styles > Top of the page > Text = White. Only while the header
   sits over the hero at the top of the page; the glass bar (scrolled), the solid bar (mobile menu open) and
   nav-standalone pages keep the dark text. The logo is an <img>, so it turns white with a filter; the menu's colour
   rules are #hs_cos_wrapper-scoped in the template, hence !important. Top-level links only: dropdowns keep their
   own light panels and dark text. */
.header__container[data-hero-text=light] .header__logo img {
	transition: filter .3s ease;
}
.header__container[data-hero-text=light] .header__bottom .header__menu--desktop .header__menu-item--depth-1 > .header__menu-link {
	transition: color .3s ease, fill .25s ease-in-out;
}
body:not(.nav-standalone):not(.nav-open) .header__container[data-hero-text=light]:not(.header-scroll) .header__logo img {
	filter: brightness(0) invert(1);
}
body:not(.nav-standalone):not(.nav-open) .header__container[data-hero-text=light]:not(.header-scroll) .header__bottom .header__menu--desktop .header__menu-item--depth-1 > .header__menu-link {
	color: #fff !important;
}
body:not(.nav-standalone):not(.nav-open) .header__container[data-hero-text=light]:not(.header-scroll) .btn-outline-secondary-wrapper .cta-button {
	color: #fff !important;
	border-color: #fff !important;
	background-color: transparent !important;
}
body:not(.nav-standalone):not(.nav-open) .header__container[data-hero-text=light]:not(.header-scroll) .btn-outline-secondary-wrapper .cta-button:hover {
	background-color: rgba(255, 255, 255, .12) !important;
}
body:not(.nav-standalone):not(.nav-open) .header__container[data-hero-text=light]:not(.header-scroll) :is(.header__button-col.hidden-phone, .header__button-col-mobile) .btn-secondary-wrapper .cta-button {
	color: #11121a !important;
	border-color: #fff !important;
	background-color: #fff !important;
}
body:not(.nav-standalone):not(.nav-open) .header__container[data-hero-text=light]:not(.header-scroll) :is(.header__button-col.hidden-phone, .header__button-col-mobile) .btn-secondary-wrapper .cta-button:hover {
	background-color: rgba(255, 255, 255, .86) !important;
}
body:not(.nav-standalone):not(.nav-open) .header__container[data-hero-text=light]:not(.header-scroll) .header__menu-col-mobile .header__menu-toggle {
	border-color: #fff !important;
	color: #fff;
}
body:not(.nav-standalone):not(.nav-open) .header__container[data-hero-text=light]:not(.header-scroll) .header__menu-col-mobile .header__menu-toggle path {
	fill: #fff !important;
}

/* Utility nav (a Menu top bar with two menus, or the Two columns type): the first hugs the left edge, the second the right, like MarktPOS's, for
   any Styles > Top bar alignment (Center included). One mechanism only, space-between on the bar: Markt - Header also
   grows the first menu and pushes the last with auto margins, and each of the three alone does the split, so no
   single-rule regression could be caught. min-width: 0 lets a long offer line shrink instead of overflowing. */
:is(.header__top-menu, .header__top-two_column) .header__wrapper--top[data-length='2'] > .header__menu--top {
	gap: clamp(16px, 2.5vw, 48px);
	justify-content: space-between;
}
:is(.header__top-menu, .header__top-two_column) .header__wrapper--top[data-length='2'] > .header__menu--top > .header__menu--top:first-child,
:is(.header__top-menu, .header__top-two_column) .header__wrapper--top[data-length='2'] .header__menu-wrapper {
	min-width: 0;
}

/* The open mobile menu gets the solid white bar at once; the white logo, buttons and menu icon switch with it (a
   300ms fade would show a white logo on the white bar). */
body.nav-open .header__container[data-hero-text=light] :is(.header__logo img, .cta-button, .header__menu-toggle, .header__menu-toggle path) {
	transition: none !important;
}

/* Top bar, Two columns (Miles 2026-09-23, "the two-column style nav similar to the MarktPOS", default): the offer is
   the Rich Text field, left-aligned; the template's announcement styles centre it and make it full width, so those
   two are overridden here. Like every non-announcement top bar, it is hidden on phones (the module's own rule). */
.header__top-two_column .header__menu-offer {
	text-align: left !important;
	width: auto !important;
	padding-left: 0 !important;
}

/* Styles > Top bar > Shape = Rounded, inset: the bar becomes a rounded panel inside the page width, as on
   bottlepos.com today, with the page (or the hero, when the header sits over it) showing around it. */
.header__container[data-topbar-shape=inset] .header__top,
.header__container[data-topbar-shape=inset] .header__top:hover {
	background-color: transparent !important;
}
.header__container[data-topbar-shape=inset] .header__top {
	padding-top: 12px;
}
.header__container[data-topbar-shape=inset] .header__top .header__wrapper--top {
	background-color: var(--tb-bg, #006ac6);
	border-radius: 12px;
	padding-left: 20px;
	padding-right: 20px;
}

/* Launch review (Miles, Gina, Ryan, 2026-09-23 14:04).
   Phones: the header is a full-width strip about 65px tall (logo 32 + 16 + 16 = 64), at rest and scrolled.
   Desktop: the bar's top and bottom padding equal its left and right, 24px (the content's inset from the container
   edge; the floating glass bar keeps the same 24px at its sides). data-layout is the module's own breakpoint flag
   (Settings > Mobile Breakpoint), set before first paint, so this is the media query. */
.header__container[data-layout=mobile] .header__logo-col {
	margin-top: 16px !important;
	margin-bottom: 16px !important;
}
.header__container[data-layout=desktop] .header__logo-col {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.header__container[data-layout=desktop] .header__wrapper--bottom {
	padding-top: var(--hdr-pad, 24px);
	padding-bottom: var(--hdr-pad, 24px);
}

/* Phones: the two-column top bar is hidden in the phone header; the open menu carries it instead, still clickable
   (Ryan: "they still need to click it"). 17:15 (Miles: "looks clumped"): the offer is the menu list's first item, in
   the top bar's colour; Support, Knowledge base and the phone are its last item, one per line, at the bottom of the
   sheet (the template makes the list a column at least as tall as the sheet). Colours follow Styles > Top bar. */
.header__drawer-bar {
	background-color: var(--tb-bg, #006ac6);
	color: #fff;
	padding: 16px 24px;
}
.header__drawer-offer,
.header__drawer-offer p {
	margin: 0;
	font-size: 15px;
	line-height: 1.45;
}
.header__drawer-offer a {
	color: #fff !important;
	text-decoration: underline;
}
.header__drawer-links {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	margin-top: auto;
	padding: 20px 25px 8px;
}
.header__drawer-links a {
	display: flex;
	align-items: center;
	min-height: 44px; /* a full touch target per line */
	color: inherit;
	font-size: 16px;
	line-height: 1.3;
	text-decoration: none;
}

/* ---- Phone nav (Miles 2026-10-25). Below the Mobile Breakpoint only (data-layout=mobile); desktop is untouched.
   1. The sales number (Content > Phone nav) as a call link in the header row, beside the menu button.
   2. The top bar's offer at the top of the page on load, one 40px line, until the visitor scrolls (the header's own
      header-scroll), back at the top. It also stays at the top of the open menu, as before. The header sits in the page
      flow at rest and its wrapper holds its at-rest height once it pins (module.js), so the page simply starts 40px
      lower and nothing moves on scroll: no spacer needed here.
   3. Under 576px wide the row's demo button gives way to the sticky demo button (Content > Mobile Fixed Button; its CTA
      list is the switch), which shows once the visitor scrolls. From 576px up the row keeps its button, gets the number
      too, and the sticky stays hidden (the 501px rule above).
   4. iOS: the sticky clears Safari's floating bottom bar.
   Every rule that has to beat an existing header rule does it by specificity, not source order: HubSpot's minifier may
   reorder rules. ---- */
.header__container .header__call { display: none; }
.header__container[data-layout='mobile'] .header__menu-col-mobile .header__call {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-right: 6px; /* + the column's 10px gap = 16px to the next control */
	padding: 0 2px;
	font-family: var(--button_font, inherit);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.01em;
	white-space: nowrap;
	text-decoration: none;
	color: var(--heading);
}
/* Text over the hero = White: the number turns white with the menu button beside it (same states as that rule) */
body:not(.nav-standalone):not(.nav-open) .header__container[data-hero-text=light]:not(.header-scroll) .header__menu-col-mobile .header__call { color: #fff; }

/* The offer: Two columns and Menu top bars (hidden on phones by the header's own rule; these show them). The first
   column/menu is the offer; the links (Support, Knowledge base, phone) stay in the open menu. Other types unchanged. */
.header__container[data-layout='mobile'][data-phone-offer='true'] .header__top.header__top-two_column,
.header__container[data-layout='mobile'][data-phone-offer='true'] .header__top.header__top-menu { display: block; height: 40px; overflow: hidden; }
.header__container[data-layout='mobile'][data-phone-offer='true'] .header__top:is(.header__top-two_column, .header__top-menu) .header__menu--desktop { display: block; }
.header__container[data-layout='mobile'][data-phone-offer='true'] .header__top:is(.header__top-two_column, .header__top-menu) .header__menu--top + .header__menu--top { display: none; }
.header__container[data-layout='mobile'][data-phone-offer='true'] .header__top:is(.header__top-two_column, .header__top-menu) :is(.container, .header__wrapper--top, .header__menu--top, .header__menu-wrapper, .header__menu-item, .header__menu-offer) {
	display: block;
	width: 100% !important; /* the two-column offer is width:auto !important in this file */
	max-width: 100%;
	min-width: 0;
	height: 40px;
	padding: 0 !important; /* the offer's Styles > Top bar > Spacing is an #hs_cos_wrapper-scoped rule */
	margin: 0;
}
/* The offer link is one 40px line, cut with an ellipsis. Block, not flex: the rich-text offer can be a bare
   <p><a>text</a></p> (no span), and a flex box cannot ellipsis its own text (it overflowed both edges). */
.header__container[data-layout='mobile'][data-phone-offer='true'] .header__top:is(.header__top-two_column, .header__top-menu) :is(.header__menu-offer a, .header__menu-link) {
	display: block;
	height: 40px;
	padding: 0 16px !important;
	font-size: 13px !important; /* Styles > Top bar > font size is #hs_cos_wrapper-scoped */
	line-height: 40px;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.header__container[data-layout='mobile'][data-phone-offer='true'] .header__top:is(.header__top-two_column, .header__top-menu) :is(.header__menu-offer a *, .header__menu-link *) {
	display: inline;
	margin: 0;
	white-space: nowrap;
	line-height: inherit;
	font-size: inherit;
}
.header__container[data-layout='mobile'][data-phone-offer='true'] .header__top:is(.header__top-two_column, .header__top-menu) .header__menu-offer p { display: block; height: 40px; margin: 0; }
/* Scrolling hides it (the header's own hide rule is outranked by the show rule above, so it is restated). "Show Topbar
   On Scroll" on (data-topbar-fixed=false) keeps the bar pinned, as on desktop. */
.header__container.header-scroll[data-topbar-fixed=true][data-layout='mobile'][data-phone-offer='true'] .header__top.header__top-two_column,
.header__container.header-scroll[data-topbar-fixed=true][data-layout='mobile'][data-phone-offer='true'] .header__top.header__top-menu { display: none; }

/* Under 576px: the sticky demo button replaces the row's demo button (only when the header renders a sticky). */
@media (max-width: 575.98px) {
	.header__container[data-layout='mobile']:has(.mobile-fixed-button) .header__menu-col-mobile .header__button-col-mobile { display: none; }
	.header__container[data-layout=mobile] .header__wrapper--bottom > .mobile-fixed-button { display: block; }
}

/* Sticky button: Safari on iPhone floats its address bar over the bottom ~76px of the page, which hid most of the
   button. iOS only (other browsers keep the 24px gap). The button moves up rather than growing its padding, so the
   strip it covers is no taller than today. */
@supports (-webkit-touch-callout: none) {
	/* 10/25 22:10, measured on the iPhone Duo: env(safe-area-inset-bottom) already includes Safari's floating toolbar (~104px full, ~82px collapsed), so the fixed 76px counted it twice and left ~112px of page between the button and the toolbar. Now the button sits 12px above the safe area: ~24px clear of the toolbar, and it follows the toolbar as it collapses. */
	.header__container[data-layout=mobile] .header__wrapper--bottom > .mobile-fixed-button { bottom: calc(env(safe-area-inset-bottom, 0px) - 12px); }
}