.header__container[data-layout=mobile] .mobile-fixed-button.show.cta-suppressed {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}

/* ---- 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 (the first top-bar menu) 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.
      This header is absolute over the page, so a spacer right after </header> moves the page down by the bar's 40px
      from the first paint. Inset heroes (Quilt - Hero Countdown, class qhero-inset) measure the header themselves
      (--qhero-top), so on those pages the spacer stays off or the bar would be counted twice.
   3. iOS: the sticky button 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, and the header's own styles are in module.html. ---- */
.header__container .header__call { display: none; }
.header__container[data-layout='mobile'] .header__menu-col { display: flex; align-items: center; }
.header__container[data-layout='mobile'] .header__menu-col .header__call {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin-right: 16px;
	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);
}
/* a 44px-tall touch target without making the row taller than today (63px) */
.header__container[data-layout='mobile'] .header__menu-col .header__call::after { content: ''; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); }

/* The offer: Menu top bars (hidden on phones by the header's own rule; this shows them). The first menu is the offer;
   the second (Log in, Knowledge Base, phone) stays in the open menu. Announcement bars are unchanged. */
.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.header__top-menu .header__menu--desktop { display: block; }
.header__container[data-layout='mobile'][data-phone-offer='true'] .header__top.header__top-menu .header__menu--top + .header__menu--top { display: none; }
.header__container[data-layout='mobile'][data-phone-offer='true'] .header__top.header__top-menu :is(.container, .header__wrapper--top, .header__menu--top, .header__menu-wrapper, .header__menu-item) {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	height: 40px;
	padding: 0 !important; /* the header's own mobile wrapper padding is #hs_cos_wrapper-scoped */
	margin: 0;
}
.header__container[data-layout='mobile'][data-phone-offer='true'] .header__top.header__top-menu .header__menu-link {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 16px !important;
	font-size: 13px !important;
	line-height: 1.2;
	text-align: center;
}
.header__container[data-layout='mobile'][data-phone-offer='true'] .header__top.header__top-menu :is(.menu_link_span, .header__menu-link-span) {
	display: block;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* 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-menu { display: none; }

/* The page starts 40px lower while the offer shows, so the bar never covers more of the hero than the header does today. */
.header__offer-spacer { display: none; }
.header__container[data-layout='mobile'][data-phone-offer='true']:has(> .header__top.header__top-menu) + .header__offer-spacer { display: block; height: 40px; }
body:has(.qhero-countdown.qhero-inset) .header__container[data-layout='mobile'][data-phone-offer='true'] + .header__offer-spacer { display: none; }

/* Sticky button: Safari on iPhone floats its address bar over the bottom ~76px of the page, which hid most of the
   button (its bottom edge sat 52px under the bar at 382x678). 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); }
}

/* 10/25 22:35: the theme hides the sticky above 500px (@media (min-width: 501px) display:none), which left landscape phones, the
   unfolded iPhone Duo and tablets (501-991px, still the phone header) with no CTA at all. Show it across the whole phone header
   when it has a CTA; above 500px it is a centered button rather than a full-width bar. */
@media (min-width: 501px) {
	.header__container[data-layout=mobile] .mobile-fixed-button:has(a, button, form) { display: block; left: 50%; width: min(100%, 448px); transform: translateX(-50%); }
}

/* 10/25 22:45 (Miles): on short screens (phones in landscape, about 330-430px tall) the sticky took too much of the view.
   No sticky at 500px tall or less; portrait phones, the unfolded Duo and tablets keep it. */
@media (max-height: 500px) {
	.header__container[data-layout=mobile] .mobile-fixed-button { display: none !important; }
}