/* ============================================================
   ONEUP MEGAMENU - module.css
   Last updated: 2026-04-25

   SECTION MAP
   ──────────────────────────────────────────────────────────
   [1]  RESET & BASE              — box-sizing, font-family, shared rules
   [2]  TOP NAVBAR                — nav bar, logo area, desktop nav links
   [3]  DESKTOP NAV BUTTONS       — Sign in / Try free / Book a demo
   [4]  DROPDOWN WRAPPER          — .oneupmenu-dropdowns positioning

   [5]  PRODUCTS DROPDOWN         — desktop Products panel
		[5a] Background split
		[5b] Left panel (product tab buttons)
		[5c] Content pane "TV area" (features grid + side card)
		[5d] Integrations footer bar

   [6]  SOLUTIONS DROPDOWN        — desktop Solutions panel
   [7]  RESOURCES DROPDOWN        — desktop Resources panel
   [8]  COMPANY DROPDOWN          — desktop Company panel

   [9]  MOBILE — SHARED           — shared mobile menu styles, transitions
   [10] MOBILE — LEVEL 1 NAV      — hamburger list
   [11] MOBILE — PRODUCTS L2      — Products submenu (Level 2)
   [12] MOBILE — SOLUTIONS L2     — Solutions submenu (Level 2)
   [13] MOBILE — RESOURCES L2     — Resources submenu (Level 2)
   [14] MOBILE — COMPANY L2       — Company submenu (Level 2)

   [15] BADGE                     — "New" / "Coming Soon" pill badges

   [16] RESPONSIVE BREAKPOINTS
		[16a] ≥ 992px             — force show desktop buttons
		[16b] ≤ 991px             — mobile layout
		[16c] 992px – 1100px      — compact desktop
		[16d] 1101px – 1130px
		[16e] 1131px – 1200px
		[16f] 1201px – 1320px
		[16g] 1441px – 1799px
		[16h] 1800px – 2159px
		[16i] 2160px – 2799px
		[16j] ≥ 2800px
		[16k] ≤ 768px             — small mobile tweaks

   ──────────────────────────────────────────────────────────
   CHANGES 2026-04-25 (further mobile display fixes):
   - [9]  Removed `padding-bottom: 24px` from all mobile panels
		  (Level 1 nav + Level 2/3 panels). With the CTA bar set
		  to `position: sticky; bottom: 0`, sticky's bottom inset
		  is measured from the panel's padding edge, not its border
		  edge — so the 24px padding-bottom left a 24px strip below
		  the buttons where scrolled menu content showed through.
		  Removing the panel padding closes the gap; the buttons'
		  own 1.5rem internal padding still gives them visual
		  breathing room.
   - [13] Resources special (vivid-blue) card was inheriting
		  `height: 244px` from the standard card rule, which
		  clipped the "Listen to the latest episode" button under
		  the bottom edge of the card. Added `height: auto` +
		  `min-height: 290px` so the card grows to fit the tall
		  cover-art image (max 180px) + button + 30px padding.
   - [14] Awards row badges no longer use `flex-shrink: 0` with a
		  fixed `height: 50px` — natural badge widths overflowed
		  the card and wrapped untidily on narrow viewports.
		  Switched to `flex: 1 1 0` distribution with
		  `flex-wrap: nowrap` so all 4–5 badges share the row
		  equally and fill the card width like desktop.

   CHANGES 2026-04-23 (mobile display fixes):
   - [9]  L2/L3 submenus now sit below navbar (top:88px) so the top
		  bar with logo + Book-a-demo + close icon stays visible.
   - [11-14] Removed `margin-top: 24px` from the L2 panels themselves.
		  On a position:fixed element, `top` positions the margin-edge,
		  so `top:88px + margin-top:24px` pushed the panel's visible
		  background to 112px, leaving a 24px strip where the page
		  behind peeked through. Internal spacing for the first item
		  is handled by the back-button header's padding + the
		  `.oneupmenu-products-mobile-options { margin-top: 24px }`
		  rule, which sits between the back button and the first item.
   - [12] Solutions side-card image: added object-fit:contain to stop
		  the logos graphic from being horizontally squished.
   - [13] Resources special card (vivid-blue / "Carrot & Stick"):
		  bumped max-height, added display:block + object-fit:contain
		  and centred the image so it actually renders on mobile.
		  Also changed `p { display:none }` to
		  `p:not(:has(img)) { display:none }` — the image inside the
		  Content rich-text field is wrapped in a `<p>` by HubSpot,
		  so the old rule was hiding the image's own parent.
   - [14] Company awards: fixed `img:first-child` selector (never
		  matched because h4 is first child) → `> img`. Relaxed
		  fixed 50×55 award dimensions to height:50px width:auto
		  with object-fit:contain, added flex-wrap + justify-center.
   - [14] Testimonial: bumped p font-size 13px → 15px with
		  line-height, h5 14px → 15px.
============================================================ */


/* ============================================================
   [1] RESET & BASE
============================================================ */

#oneupsales-megamenu ul,
#oneupsales-megamenu span,
#oneupsales-megamenu h1,
#oneupsales-megamenu h2,
#oneupsales-megamenu h4,
#oneupsales-megamenu h5 {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}

#oneupsales-megamenu .active { display: block; }

#oneupsales-megamenu {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	font-family: 'Poppins', sans-serif;
}

#oneupsales-megamenu ul,
#oneupsales-megamenu li { list-style: none; }

#oneupsales-megamenu a { text-decoration: none; }

/* Constrain content width across all dropdowns */
.oneupmenu-container {
	max-width: 1240px;
	margin: 0 auto;
}


/* ============================================================
   [2] TOP NAVBAR
============================================================ */

.oneupmenu-main-nav { background: #FBFBFB; }

#oneupsales-megamenu nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 88px; /* ← change navbar height here */
}

/* Desktop nav link list */
.oneupmenu-nav-options {
	display: flex;
	gap: 32px;
	height: 100%;
}

/* Individual nav trigger items */
.oneupmenu-nav-options li {
	display: flex;
	align-items: center;
	gap: 6.5px;
	cursor: pointer;
	height: 100%;
	position: relative;
	border-bottom: 3px solid transparent;
	transition: border-bottom-color 0.3s ease;
}

.oneupmenu-nav-options li span { font-size: 15px; }

.oneupmenu-nav-options li svg { transition: transform 0.3s ease; }

/* Hover state: blue underline + blue text/chevron */
.oneupmenu-nav-options li:hover                { border-bottom-color: #3574E3; }
.oneupmenu-nav-options li:hover span           { color: #3574E3; }
.oneupmenu-nav-options li:hover svg            { color: #3574E3; transform: rotate(180deg); }


/* ============================================================
   [3] DESKTOP NAV BUTTONS
   Sign in link / "Try free" ghost button / "Book a demo" solid button
============================================================ */

/* Sign in link */
.oneupmenu-utility-link {
	font-size: 15px;
	font-weight: 400;
	color: #475569;
	text-decoration: none;
	transition: color .15s ease-in-out;
}
.oneupmenu-utility-link:hover { color: #3574E3; }

/* "Try free" ghost button */
.oneupmenu-login-btn {
	font-size: 15px;
	font-weight: 600;
	color: #3574E3;
	padding: 10px 18px;
	border: 2px solid #3574E3;
	border-radius: 6px;
	line-height: 1;
	transition: all 0.3s ease;
	background: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
}
.oneupmenu-btn-ghost:hover {
	background: #3574E3;
	color: #fff;
}

/* "Book a demo" solid button */
.oneupmenu-booking-btn {
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	padding: 10px 18px;
	background-color: #012b39;
	border: 2px solid #012b39;
	border-radius: 6px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	white-space: nowrap;
}
.oneupmenu-booking-btn:hover {
	background-color: #1a3a4a;
	border-color: #1a3a4a;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Mobile persistent CTA (hidden on desktop) */
.oneupmenu-mobile-persistent-cta { display: none; }

/* Mobile icon toggles (hidden on desktop) */
.oneupmenu-hamburger { display: none; }
.oneupmenu-cross     { display: none; }

/* Mobile nav blocks (hidden on desktop) */
.oneupmennu-mobile-nav          { display: none; }
.oneupmenu-nav-options-mobile   { display: none; }
.oneupmenu-nav-buttons-mobile   { display: none; }
.oneupmenu-products-mobile      { display: none; }
.oneupmenu-solutions-mobile     { display: none; }
.oneupmenu-resources-mobile     { display: none; }
.oneupmenu-company-mobile       { display: none; }
/* All mobile-only deep menu panels — hidden at desktop widths.
   .oneupmenu-mobile-submenu covers every dynamic product pane (any menu_id).
   The media query at ≤991px re-shows them as needed. */
.oneupmenu-mobile-submenu { display: none; }


/* ============================================================
   [4] DROPDOWN WRAPPER
   Sits directly below the navbar; contains all four panels.
============================================================ */

.oneupmenu-dropdowns {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	z-index: 9999;
}

/* All four desktop dropdowns share this hidden/shown pattern */
.oneupmenu-products,
.oneupmenu-solutions,
.oneupmenu-resources,
.oneupmenu-company {
	border-top: 1px solid #E4EDFF;
	border-bottom: 1px solid #E4EDFF;
	display: none;
	opacity: 0;
	transform: translateY(0);
	transition: opacity 0.3s ease, transform 0.3s ease;
	background: #fff;
	visibility: hidden;
}

/* JS adds this class to show a dropdown */
.oneupmenu-active-dropdown {
	opacity: 1 !important;
	transform: translateY(0) !important;
	visibility: visible !important;
}


/* ============================================================
   [5] PRODUCTS DROPDOWN
============================================================ */

/* [5a] Two-tone background (blue left / off-white right) */
.oneupmenu-products-bg         { display: flex; }
.oneupmenu-products-bg-left    { width: 457px; height: 495px; background: #F0F7FF; flex-shrink: 0; }
.oneupmenu-products-bg-right   { width: 100%;  height: 495px; background: #FBFBFB; }

/* [5b] Left panel — product tab buttons */
.oneupmenu-products-content {
	position: absolute;
	top: 40px;
	display: flex;
	align-items: start;
	justify-content: space-between;
	width: 100%;
	max-width: 1240px;
}

.oneupmenu-products-left {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: start;
}

/* Product tab button */
.oneupmenu-products-left-btn {
	display: flex;
	align-items: center;
	gap: 17px;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: #062B3A;
	font-size: 18px;
	font-weight: 500;
	padding: 8px 20px 8px 8px;
	border-radius: 8px;
}

/* Active/hovered tab button */
.oneupmenu-products-left-btn:hover,
.oneupmenu-btn-active {
	background: #E4EDFF;
	color: #3574E3;
	width: 100%;
}
.oneupmenu-products-left-btn:hover > .oneupmenu-products-angle,
.oneupmenu-btn-active > .oneupmenu-products-angle { color: #3574E3; }

/* Small icon box inside tab button */
.oneupmenu-products-left-icon {
	width: 32px; height: 32px;
	display: flex; align-items: center; justify-content: center;
	background: #E4EDFF;
	border-radius: 4px;
}
.oneupmenu-products-left-icon img { max-width: 20px; max-height: 20px; width: auto; height: auto; }

/* Larger icon box used in Company links */
.oneupmenu-products-left-icon-2 {
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	background: #E4EDFF;
	border-radius: 4px;
}
.oneupmenu-products-left-icon-2 img { max-width: 24px; max-height: 24px; width: auto; height: auto; }

/* [5c] "TV area" — features grid + side card
   The "TV" label comes from the original class naming (.oneupmenu-products-tv).
   It describes the layout: a two-column feature grid on the left,
   and a dark promo card on the right.
*/
.oneupmenu-products-tv {
	display: flex;
	align-items: start;
	gap: 32px;
}

.oneupmenu-products-tv-title {
	font-size: 18px;
	font-weight: 500;
	color: #425B76;
	display: block;
}

/* When the side panel is hidden, the feature grid expands to fill the full pane width */
.oneupmenu-products-tv--no-panel {
	display: block; /* override flex so the grid takes full width */
}
.oneupmenu-products-tv--no-panel .oneupmenu-products-tv-wrapper {
	grid-template-columns: repeat(3, 1fr); /* 3 cols when no side card */
	max-width: 700px;
}

/* Feature grid (2 columns) */
.oneupmenu-products-tv-wrapper {
	display: grid;
	grid-template-columns: repeat(2, 220px);
	gap: 32px;
	margin-top: 24px;
}

.oneupmenu-products-tv-wrapper > a {
	display: flex; align-items: start; gap: 6px;
	cursor: pointer;
	padding: 8px;
	border-radius: 5px;
}
.oneupmenu-products-tv-wrapper > a:hover { background: #E4EDFF; }

.oneupmenu-products-tv-wrapper h4, .oneupmenu-products-tv-wrapper span {
	font-family: Poppins;
	font-size: 16px; font-weight: 500;
	color: #062B3A;
	line-height: 150%;
	display: block;
}

.oneupmenu-products-tv-wrapper p {
	font-size: 13px;
	color: #425B76;
	line-height: 130% !important;
	margin-top: 4px !important;
	margin-bottom: 0 !important;
}

/* Dark promo side card (shared by Products, Solutions, and Company) */
.oneupmenu-products-tv-right {
	background: #062B3A;
	width: 311px; height: 311px;
	border-radius: 8px;
	padding: 20px 27px 0 27px;
	position: relative;
}
.oneupmenu-products-tv-right h4, .oneupmenu-products-tv-right span {
	font-size: 18px; font-weight: 600;
	color: #fff;
	line-height: 23.4px;
	display: block;
}
.oneupmenu-products-tv-right button {
	font-size: 14px; font-weight: 500; line-height: 22.4px;
	background: transparent;
	color: #fff;
	border: 2px solid #fff;
	border-radius: 5px;
	padding: 13px 25px;
	cursor: pointer;
	margin: 16px 0;
	transition: all 0.3s ease;
}
.oneupmenu-products-tv-right button:hover { background: #3574E3; border-color: #3574E3; }

/* Solutions side card uses a blue background instead */
.oneupmenu-solutions .oneupmenu-products-tv-right               { background: #3371DD; }
.oneupmenu-solutions .oneupmenu-products-tv-right button:hover  { background: #fff; color: #062B3A; border-color: #fff; }

/* Optional per-pane side card colour overrides.
   The default side card colour is #062B3A (dark).
   Add a rule here if a specific pane needs a different colour, e.g.:
	 .oneupmenu-products-dashboard-container .oneupmenu-products-tv-right { background-color: #3574E3; }
   This is the only intentionally hardcoded ID remaining — purely cosmetic. */
.oneupmenu-products-dashboard-container .oneupmenu-products-tv-right              { background-color: #3574E3; }
.oneupmenu-products-dashboard-container .oneupmenu-products-tv-right button:hover { background: #fff; color: #062B3A; border-color: #fff; }

/* Side card image sits at bottom-centre */
.oneupmenu-products-tv-right img {
	position: absolute;
	bottom: 0; left: 50%;
	transform: translateX(-50%);
}

/* [5d] Integrations footer bar */
.oneupmenu-products-bottom {
	margin-top: 32px;
	background: #F0F7FF;
	border: 1px solid #E4EDFF;
	border-radius: 8px;
	padding: 12px 20px 5px 25px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.oneupmenu-products-bottom > div {
	display: flex; align-items: center; gap: 27px;
}
.oneupmenu-products-bottom h4, .oneupmenu-products-bottom span.h4-replace {
	font-size: 18px;
	font-weight: 500;
	color: #062B3A;
	line-height: 21.6px;
	display: block;
}
.oneupmenu-products-bottom a {
	font-size: 15px; font-weight: 500;
	color: #3574E3; line-height: 22.5px;
	cursor: pointer;
	display: flex; align-items: center; gap: 16px;
	transition: all 0.3s ease;
	border-bottom: 1px solid transparent;
	padding-bottom: 4px;
}
.oneupmenu-products-bottom a:hover { border-bottom-color: #3574E3; }

.oneupmenu-products-integrations { display: flex; align-items: start; gap: 16px; }

/* Hide ALL content pane containers by default.
   The first pane gets display:block via Jinja loop.first in the HTML template.
   JS handles switching on hover from there.
   Using an explicit shared class avoids brittle attribute selectors. */
.oneupmenu-pane-container { display: none; }


/* ============================================================
   [6] SOLUTIONS DROPDOWN
============================================================ */

.oneupmenu-solutions { padding: 40px 0; }

.oneupmenu-solutions-content {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: 40px;
}

.oneupmenu-solutions-item-title { position: relative; left: 5px; }

.oneupmenu-solutions-item {
	display: flex; flex-direction: column;
	align-items: start;
	gap: 31px;
	width: 250px;
}

.oneupmenu-solutions-item h4, .oneupmenu-solutions-item span {
	font-size: 18px;
	font-weight: 500;
	color: #425B76;
	line-height: 21.6px;
	display: block;
}

.oneupmenu-solutions-item a { color: #062B3A; line-height: 24px; }

.oneupmenu-solutions-item > div:first-child {
	display: flex; align-items: center; gap: 10px;
}

.oneupmenu-solutions-item-links {
	display: flex; flex-direction: column;
	align-items: start; gap: 5px;
}

.oneupmenu-solutions-item-links a {
	padding: 8px;
	border-radius: 5px;
	width: 100%;
	font-family: Poppins;
	font-size: 16px; font-weight: 400;
	line-height: 150%;
}
.oneupmenu-solutions-item-links a:hover { background: #E4EDFF; }


/* ============================================================
   [7] RESOURCES DROPDOWN
============================================================ */

.oneupmenu-resources { padding: 40px 0; }

/* Card wrapper */
.oneupmenu-resources-item-card-wrapper { display: flex; gap: 40px; }

/* Standard resource card */
.oneupmenu-resources-item-card {
	background: #F0F7FF;
	width: 310px;
	border-radius: 8px;
	padding: 36px 32px;
}
.oneupmenu-resources-item-card p {
	margin: 32px 0;
	color: #022B3A;
	font-family: Poppins;
	font-size: 16px; font-weight: 400;
	line-height: 160%;
}
.oneupmenu-resources-item-card a {
	font-size: 15px; font-weight: 600;
	background: #3574E3; color: #fff;
	padding: 10px 24px;
	border-radius: 5px;
	display: inline-block;
	transition: all 0.3s ease;
}
.oneupmenu-resources-item-card a:hover { scale: 1.05; background: #3371DD; }

/* Special "vivid blue" resource card (set card.is_special = true in module) */
.oneupmenu-resources-item-card.special-card {
	background: #0089E9;
	padding: 30px;
}
.oneupmenu-resources-item-card.special-card p {
	color: #fff;
	font-size: 20px; font-weight: 600;
	line-height: 28px;
	margin: 8px 0;
}
.oneupmenu-resources-item-card.special-card a {
	background: transparent; color: #fff;
	border: 2px solid #fff;
	padding: 10px 20px;
}
.oneupmenu-resources-item-card.special-card a:hover {
	background: #fff; color: #3574E3;
	scale: 1;
}


/* ============================================================
   [8] COMPANY DROPDOWN
============================================================ */

.oneupmenu-company { padding: 40px 0; }

.oneupmenu-company-content {
	display: flex; align-items: start; justify-content: space-between;
}

.oneupmenu-company-items {
	display: flex; flex-direction: column;
	align-items: start; gap: 26px;
}

/* Single company link row */
.oneupmenu-company-item {
	display: flex; align-items: center; gap: 12px;
	border-radius: 5px;
	padding: 8px;
	cursor: pointer;
	width: 100%;
}
.oneupmenu-company-item:hover { background: #E4EDFF; }

.oneupmenu-company-item h4, .oneupmenu-company-item span {
	font-family: Poppins;
	font-size: 16px; font-weight: 500;
	color: #062B3A;
	line-height: 140%;
	margin-bottom: 0 !important;
	display: block;
}
.oneupmenu-company-item p {
	font-size: 14px; line-height: 19.6px;
	color: #425B76;
	margin-bottom: 0 !important;
	margin-top: 2px !important;
}
.oneupmenu-company-item a { display: flex; gap: 12px; }

/* Side cards area */
.oneupmenu-company-cards { display: flex; gap: 40px; align-items: stretch; }

.oneupmenu-company-awards { display: flex; gap: 14px; }

/* Awards card */
.oneupmenu-resources-item-card-1 {
	width: 370px;
	min-height: 270px;
	height: auto;
	border: 1px solid #E4EDFF;
	background: #F7F9FB;
	border-radius: 8px;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	gap: 24px;
	padding: 25px 10px;
}
.oneupmenu-resources-item-card-1 h4, .oneupmenu-resources-item-card-1 span {
	font-size: 20px; font-weight: 600;
	line-height: 26px;
	color: #2D2340;
	display: block;
}

/* Testimonial card */
.oneupmenu-resources-item-card-2 {
	width: 370px;
	min-height: 270px;
	height: auto;
	border-radius: 8px;
	background: #062B3A;
	padding: 46px 29px;
}
.oneupmenu-resources-item-card-2 p {
	color: #fff;
	font-family: Poppins;
	font-size: 16px; font-weight: 400;
	line-height: 140%;
}
.oneupmenu-resources-item-card-2-user {
	display: flex; align-items: center; gap: 8px;
	margin-top: 32px;
}
.oneupmenu-resources-item-card-2-user h5,
.oneupmenu-resources-item-card-2-user p {
	font-size: 16px; font-weight: 400; color: #fff;
}
.oneupmenu-resources-item-card-2-user span {
	font-size: 16px;
	font-weight: 400;
	color: #fff;
	display: block;
}
.oneupmenu-resources-item-card-2-user p { margin-top: 2px; opacity: 0.8; }


/* ============================================================
   [9] MOBILE — SHARED
   All mobile menus (Levels 1-3) share these positioning rules.
   FIXED 2026-04-23: Level 2 & 3 now sit below the navbar (top:88px)
   just like Level 1, so the top bar with the OneUp logo,
   Book-a-demo CTA and close (X) icon stays visible at all times.
   Previously they used top:0 + height:100vh which covered the navbar.
============================================================ */

@media screen and (max-width: 991px) {

	.color-none { color: inherit !important; }

	.oneupmenu-main-nav { background: #fff; }

	.oneupmenu-container { padding: 0 20px; }

	/* Hide desktop-only elements */
	.oneupmenu-nav-options        { display: none; }
	.oneupmenu-nav-buttons        { display: none !important; }

	/* Show mobile icon toggles */
	.oneupmenu-hamburger {
		display: flex; align-items: center; justify-content: center;
		min-width: 32px;
	}
	.oneupmenu-cross {
		display: none; /* shown via JS */
		align-items: center; justify-content: center;
		min-width: 32px;
	}
	.oneupmenu-hamburger img,
	.oneupmenu-cross img { display: block; margin: 0 auto; height: 24px; }

	/* Persistent CTA next to hamburger */
	.oneupmenu-mobile-persistent-cta {
		display: inline-flex;
		align-items: center;
		margin-left: auto;
		margin-right: 12px;
	}
	.oneupmenu-mobile-persistent-cta .oneupmenu-booking-btn {
		padding: 8px 16px; font-size: 14px;
	}

	/* Hamburger/cross toggle classes added by JS */
	.oneupmenu-cross.oneupmenu-cross-active           { display: flex !important; }
	.oneupmenu-hamburger.oneupmenu-hamburger-hidden   { display: none !important; }

	/* Shared: ALL mobile panels */
	.oneupmenu-mobile-nav,
	.oneupmenu-products-mobile,
	.oneupmenu-solutions-mobile,
	.oneupmenu-resources-mobile,
	.oneupmenu-company-mobile,
	.oneupmenu-mobile-submenu { /* covers ALL dynamic deep menus regardless of pane ID */
		position: fixed;
		left: 0; width: 100%;
		background: #fff;
		display: none;
		opacity: 0;
		transform: translateY(-10px);
		transition: opacity 0.3s ease, transform 0.3s ease;
		visibility: hidden;
		z-index: 9998;
		overflow-y: auto;
		overflow-x: hidden; /* prevents horizontal scroll caused by the full-bleed nav buttons */
		box-sizing: border-box;
		flex-direction: column;
		justify-content: space-between;
		padding-right: 20px;
		padding-left: 20px;
	}

	/* Level 1 nav — below the navbar.
	   NOTE 2026-04-25: padding-bottom removed. Sticky CTA bar's
	   `bottom: 0` is measured from the padding edge, so a 24px
	   padding-bottom would leave a 24px strip below the buttons
	   where scrolled menu content showed through. */
	.oneupmenu-mobile-nav {
		top: 88px; /* match navbar height */
		height: calc(100vh - 88px);
		height: calc(100dvh - 88px);
	}

	/* Level 2 & 3 — ALSO sit below the navbar now (was: top:0 full-screen).
	   This keeps the top bar (logo + Book-a-demo + X close icon) visible at
	   every menu level so the user can always see where they are and can
	   close the menu from any level via the X icon.
	   NOTE 2026-04-25: padding-bottom removed for the same reason as
	   Level 1 above — sticky CTA bar's `bottom: 0` is relative to the
	   padding edge, so any padding-bottom leaves a strip below the
	   buttons where scrolled menu content peaks through. */
	.oneupmenu-products-mobile,
	.oneupmenu-solutions-mobile,
	.oneupmenu-resources-mobile,
	.oneupmenu-company-mobile,
	.oneupmenu-mobile-submenu { /* .oneupmenu-mobile-submenu covers all dynamic pane deep menus */
		top: 88px;
		height: calc(100vh - 88px);
		height: calc(100dvh - 88px);
		z-index: 9999;
	}

	/* JS adds this class to show any mobile panel */
	.oneupmenu-mobile-nav.oneupmenu-mobile-nav-active,
	.oneupmenu-products-mobile.oneupmenu-mobile-nav-active,
	.oneupmenu-solutions-mobile.oneupmenu-mobile-nav-active,
	.oneupmenu-resources-mobile.oneupmenu-mobile-nav-active,
	.oneupmenu-company-mobile.oneupmenu-mobile-nav-active,
	.oneupmenu-mobile-submenu.oneupmenu-mobile-nav-active { /* covers all pane IDs */
		display: flex;
		opacity: 1;
		transform: none;
		visibility: visible;
	}

	/*
	 * Sticky bottom CTA buttons in all mobile panels.
	 *
	 * HORIZONTAL SCROLL FIX: Previously used width: calc(100% + 40px) with
	 * margin-left: -20px to escape the parent's 20px padding on both sides.
	 * This created a child element wider than the panel, which caused a
	 * horizontal scrollbar on some mobile browsers even with overflow-x: hidden
	 * on the parent. The fix uses margin-right: -20px alongside margin-left: -20px
	 * and width: auto — the element then spans exactly the full panel width
	 * (content-width + 40px padding = 100vw) without creating any real overflow.
	 */
	.oneupmenu-nav-buttons-mobile {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
		align-items: stretch;
		width: auto;
		margin-left: -20px;
		margin-right: -20px;
		background: #fff;
		padding: 1.5rem 20px;
		box-sizing: border-box;
		margin-top: auto;
		position: sticky;
		bottom: 0;
		z-index: 10;
		box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
	}
	.oneupmenu-nav-buttons-mobile .oneupmenu-utility-link {
		text-align: center; padding: 12px; font-weight: 600;
	}

	/* Back-button header in Level 2/3 panels */
	.oneupmenu-product-name {
		font-size: 15px;
		color: #3574E3;
		line-height: 24px;
		display: flex; align-items: center; gap: 10px;
		position: sticky;
		top: 0; z-index: 100;
		width: 100%; background: #fff;
		padding: 16px 0;
		margin-bottom: 0;
	}
	.oneupmenu-product-name svg { rotate: 90deg; }

	/* Prevent body scroll when any mobile menu is open */
	html:has(.oneupmenu-mobile-nav-active) { overflow: hidden; }
	.oneupmenu-mobile-nav-active { margin: 0; }


	/* ============================================================
	   [10] MOBILE — LEVEL 1 NAV
	============================================================ */

	.oneupmenu-nav-options-mobile {
		display: flex;
		flex-direction: column;
		align-items: start;
		gap: 32px;
		margin-top: 16px;
	}
	.oneupmenu-nav-options-mobile li {
		font-size: 18px; color: #062B3A; line-height: 21px;
		display: flex; align-items: center; justify-content: space-between;
		width: 100%;
	}
	.oneupmenu-nav-options-mobile svg { rotate: -90deg; }


	/* ============================================================
	   [11] MOBILE — PRODUCTS (Level 2)

	   NOTE 2026-04-23: margin-top was removed. On a position:fixed
	   element `top` positions the MARGIN edge, so top:88px +
	   margin-top:24px shifted the visible panel down by 24px and
	   left the page behind visible through that strip. The back-
	   button header (padding:16px 0) + .oneupmenu-products-mobile-
	   options (margin-top:24px) already provide the internal spacing
	   for the first item, so we don't need extra margin on the panel.
	============================================================ */

	.oneupmenu-products-mobile-options {
		display: flex; flex-direction: column;
		align-items: start; gap: 24px;
		margin-top: 24px;
	}

	/* Individual product option row */
	.oneupmenu-products-mobile-option {
		display: flex; align-items: center; justify-content: space-between;
		width: 100%;
	}
	.oneupmenu-products-mobile-option h4, .oneupmenu-products-mobile-option span {
		font-size: 16px;
		font-weight: 500;
		color: #062B3A
		line-height: 120%;
		display: block;
		font-weight: 800;
	}
	.oneupmenu-products-mobile-option a > div,
	.oneupmenu-products-mobile-option > div {
		display: flex; align-items: center; gap: 10px;
	}

	/* Icon box */
	.oneupmenu-products-mobile-option-img {
		width: 32px; height: 32px;
		display: flex; align-items: center; justify-content: center;
		background: #E4EDFF; border-radius: 4px;
	}

	/* Integrations strip */
	.oneupmenu-products-mobile-integrations {
		background: #F0F7FF;
		border: 1px solid #E4EDFF;
		border-radius: 8px;
		padding: 16px;
		margin-top: 28px;
	}
	.oneupmenu-products-mobile-integrations h4 { font-size: 18px; font-weight: 500; color: #062B3A; }
	.oneupmenu-products-mobile-integrations p  { font-size: 15px; font-weight: 500; color: #3574E3; display: flex; align-items: center; gap: 10px; }
	.oneupmenu-products-mobile-integrations svg { rotate: -90deg; }
	.oneupmenu-products-mobile-integrations-img {
		display: flex; align-items: center;
		flex-wrap: nowrap; overflow-x: auto;
		gap: 16px; margin: 16px 0; padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.oneupmenu-products-mobile-integrations-img::-webkit-scrollbar { display: none; }

	/* Dark promo card at bottom of Level 2/3 product panels */
	.oneupmenu-products-mobile-card {
		width: 100%; box-sizing: border-box;
		min-height: 272px;
		background: #062B3A;
		position: relative;
		margin-top: 16px; margin-bottom: 80px;
		border-radius: 8px;
		padding: 18px 0 0 22px;
		overflow: hidden;
	}
	.oneupmenu-products-mobile-card.oneupmenu-products-special-card { margin-bottom: 16px; }

	.oneupmenu-products-mobile-card h4, .oneupmenu-products-mobile-card span { font-size: 15px; font-weight: 800 !important; color: #fff; line-height: 19.5px; display: block; }
	.oneupmenu-products-mobile-card a  {
		font-size: 14px; font-weight: 500; color: #fff;
		border: 2px solid #fff; line-height: 19px;
		padding: 12px 25px; display: inline-block;
		border-radius: 5px; margin-top: 18px;
	}
	.oneupmenu-products-mobile-card img {
		position: absolute; bottom: -20px; left: 50%;
		transform: translateX(-50%);
		width: 260px; height: 154px;
	}


	/* ============================================================
	   [12] MOBILE — SOLUTIONS (Level 2)

	   FIXED 2026-04-23: Side-card image was being horizontally squished
	   because the shared .oneupmenu-products-mobile-card img rule forces
	   width:260px height:154px. Added object-fit:contain so images with
	   a different aspect ratio (e.g. the logo collage uploaded as the
	   Solutions side panel image) letterbox cleanly inside the box
	   instead of stretching.
	============================================================ */

	.oneupmenu-solutions-mobile .oneupmenu-products-mobile-card img {
		bottom: 0;
		object-fit: contain; /* ← preserve aspect ratio of side-card image */
	}
	.oneupmenu-solutions-mobile .oneupmenu-products-mobile-card { width: 100%; margin-top: 32px; }
	.oneupmenu-solutions-mobile .oneupmenu-products-mobile-options { gap: 31px; }

	.oneupmenu-solutions-item { padding: 0 16px; gap: 15px; }
	.oneupmenu-solutions-item-links { gap: 0; left: -5px; position: relative; }

	.oneupmenu-outcomes-mobile {
		background: #3574E3; border-radius: 8px; width: 100%;
	}
	.oneupmenu-outcomes-mobile h4 { color: #fff; font-size: 18px; font-weight: 500; }
	.oneupmenu-outcomes-mobile a  { color: #fff; font-size: 15px; font-weight: 400; }


	/* ============================================================
	   [13] MOBILE — RESOURCES (Level 2)

	   FIXED 2026-04-23: Special (vivid-blue) resource card image — e.g.
	   the "Carrot & Stick" podcast cover — was rendering as a blank
	   blue square. The image needed display:block, a larger max-height,
	   centred alignment and object-fit:contain to actually show up.
	============================================================ */

	.oneupmenu-resources-mobile .oneupmenu-solutions-item { padding: 0; }

	/* Standard resource card on mobile */
	.oneupmenu-resources-mobile .oneupmenu-products-mobile-card {
		width: 100%; height: 244px;
		border-radius: 8px;
		background: #F0F7FF; border: 2px solid #E2EEFC;
		padding: 16px;
	}
	.oneupmenu-resources-mobile .oneupmenu-products-mobile-card img {
		position: static; transform: none;
		width: 110px; height: 48px;
	}
	.oneupmenu-resources-mobile .oneupmenu-products-mobile-card p {
		font-size: 14px; font-weight: 400;
		color: #062B3A; line-height: 22.5px; margin-top: 16px;
	}
	.oneupmenu-resources-mobile .oneupmenu-products-mobile-card a {
		font-size: 15px; font-weight: 600;
		background: #3574E3; color: #fff;
		padding: 10px 24px; border-radius: 5px;
	}

	/* Special (vivid blue) resource card on mobile.
	   FIX 2026-04-25 (revised): The image is in HubSpot's rich-text Content
	   field, which wraps it in a `<p>` that gets default browser margins
	   (~16px top + bottom). Real content height is therefore:
		 60px (padding) + 16px (p mt) + 180px (img) + 20px (img mb) + 16px (p mb)
		 + ~44px (button) ≈ 336px — well above the previous 290px min-height.
	   Also override the parent rule's `overflow: hidden` so the button can't
	   be clipped, and give the card a larger margin-bottom so there's enough
	   scroll buffer above the sticky CTA bar to bring the button fully into
	   view. */
	.oneupmenu-resources-mobile .oneupmenu-products-mobile-card.oneupmenu-products-special-card {
		background: #0089E9; border: none;
		height: auto;
		min-height: 340px;
		overflow: visible;
		margin-bottom: 40px;
		display: flex; flex-direction: column; align-items: center; /* was flex-start — centre so the image + button look balanced */
		padding: 30px;
	}
	.oneupmenu-resources-mobile .oneupmenu-products-mobile-card.oneupmenu-products-special-card h4,
	.oneupmenu-resources-mobile .oneupmenu-products-mobile-card.oneupmenu-products-special-card p:not(:has(img)) {
		/* Hide only text-only paragraphs. Paragraphs that wrap an
		   image (HubSpot's rich-text editor wraps inserted images in
		   `<p style="text-align:center">...<img>...</p>`) stay visible
		   so the image inside them renders. */
		display: none;
	}
	.oneupmenu-resources-mobile .oneupmenu-products-mobile-card.oneupmenu-products-special-card a {
		background: transparent; border: 2px solid #fff; color: #fff;
		width: auto; display: inline-block; text-align: center; margin-top: auto;
	}
	.oneupmenu-resources-mobile .oneupmenu-products-mobile-card.oneupmenu-products-special-card img {
		display: block;                /* ← was rendering as inline / collapsing */
		width: auto; height: auto;
		max-width: 100%;
		max-height: 180px;             /* ← was 120px, too small for tall cover art */
		margin: 0 auto 20px;           /* centred horizontally */
		align-self: center;            /* ← was flex-start, image hugged the edge */
		position: static; transform: none;
		object-fit: contain;           /* ← preserve aspect ratio */
	}

	/* Alternate card style (vivid blue, used in Resources L2) */
	.oneupmenu-products-mobile-card-2 {
		background: #0089E9; width: 100%; height: 264px;
		padding: 16px; border-radius: 8px; margin-bottom: 80px;
	}
	.oneupmenu-products-mobile-card-2 img { width: 160px; height: 145px; }
	.oneupmenu-products-mobile-card-2 h4  { font-size: 18px; font-weight: 600; color: #fff; }
	.oneupmenu-products-mobile-card-2 a   {
		font-size: 15px; font-weight: 600;
		background: transparent; color: #fff;
		border: 2px solid #fff; padding: 10px 20px;
		border-radius: 5px; display: inline-block; margin-top: 16px;
	}


	/* ============================================================
	   [14] MOBILE — COMPANY (Level 2)

	   FIXED 2026-04-23:
	   - Awards card now uses .oneupmenu-resources-item-card-1 +
		 .oneupmenu-company-awards (matching the fallback branch and
		 the desktop structure), not a .oneupmenu-products-mobile-card
		 with Tailwind utility classes.
	   - Rating image selector: was `img:first-child` but h4 is the
		 first child, so the rule never matched. Changed to `> img`
		 and relaxed dimensions with object-fit:contain.
	   - Award badges: was locked to width:50px height:55px which
		 distorted badges with different aspect ratios. Now
		 height:50px width:auto object-fit:contain. Added flex-wrap
		 and justify-content:center so 4 badges sit neatly on a
		 narrow viewport.
	   - Testimonial p 13px → 15px with line-height, h5 14px → 15px.
	============================================================ */

	.oneupmenu-company-mobile .oneupmenu-company-items { margin-top: 20px; gap: 24px; }
	.oneupmenu-company-mobile .oneupmenu-solutions-item a > div {
		display: flex; align-items: center; gap: 10px;
	}

	/* Awards card on mobile */
	.oneupmenu-company-mobile .oneupmenu-resources-item-card-1 {
		width: 100%;
		box-sizing: border-box;
		min-height: 230px;
		height: auto;
		margin: 16px 0;
		padding: 20px 16px;
		gap: 16px;
	}
	.oneupmenu-company-mobile .oneupmenu-resources-item-card-1 h4 {
		text-align: center;
		font-size: 15px; font-weight: 500;
		line-height: 130%;
	}
	/* Rating image (direct img child — e.g. G2 4.9/5). Previously selected
	   with img:first-child, which never matched because h4 is first. */
	.oneupmenu-company-mobile .oneupmenu-resources-item-card-1 > img {
		max-width: 180px;
		max-height: 60px;
		width: auto; height: auto;
		object-fit: contain;
	}
	/* Award badges row.
	   FIX 2026-04-25: Was wrapping with natural badge widths and not
	   filling the card. Switched to nowrap + space-between with each
	   badge taking an equal share via flex:1 1 0 + width:100%, so the
	   row fills the card width like it does on desktop. */
	.oneupmenu-company-mobile .oneupmenu-resources-item-card-1 .oneupmenu-company-awards {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		gap: 6px;
		width: 100%;
	}
	.oneupmenu-company-mobile .oneupmenu-resources-item-card-1 .oneupmenu-company-awards img {
		flex: 1 1 0;
		min-width: 0;
		width: 100%;
		height: auto;
		max-height: 50px;
		object-fit: contain;
	}

	/* Testimonial card on mobile */
	.oneupmenu-company-mobile .oneupmenu-resources-item-card-2 {
		width: 100%; box-sizing: border-box; padding: 20px;
		height: auto; margin-bottom: 0;
	}
	.oneupmenu-company-mobile .oneupmenu-resources-item-card-2 p  {
		font-size: 15px;     /* was 13px — too small, didn't fill space */
		line-height: 150%;
	}
	.oneupmenu-company-mobile .oneupmenu-resources-item-card-2 h5 {
		font-size: 15px;     /* was 14px */
	}

	/* All product deep menus — generic rule applies to ANY pane ID.
	   Previously these were hardcoded as .oneupmenu-tv-mobile and
	   .oneupmenu-dashboard-mobile, which broke when new IDs were added. */
	.oneupmenu-mobile-submenu .oneupmenu-products-tv-wrapper { grid-template-columns: 1fr; gap: 4px; }
	.oneupmenu-mobile-submenu .oneupmenu-products-tv-wrapper > a { margin-bottom: 0; }

} /* end @media ≤ 991px */


/* ============================================================
   [15] BADGE — "New" / "Coming Soon" pill
============================================================ */

.oneupmenu-badge {
	font-size: 10px;
	background: #E6F8F0; color: #0D7F55;
	padding: 5px 12px !important;
	border-radius: 100px;
	margin-left: 12px;
	text-transform: uppercase;
	font-weight: 700;
	vertical-align: middle;
	display: inline-flex; align-items: center; justify-content: center;
	line-height: normal;
	letter-spacing: 0.8px;
	white-space: nowrap;
}

.oneupmenu-badge.oneupmenu-badge-coming-soon {
	background: #FFF8E1;
	color: #B7791F;
}


/* ============================================================
   [16] RESPONSIVE BREAKPOINTS
============================================================ */

/* [16a] ≥ 992px — force show desktop nav buttons */
@media screen and (min-width: 992px) {
	#oneupsales-megamenu .oneupmenu-nav-buttons {
		display: flex !important;
		align-items: center !important;
		gap: 14px !important;
	}
}

/* [16b] Small mobile tweaks (≤ 768px) */
@media (max-width: 768px) {
	.oneupmenu-solutions-item h4, .oneupmenu-solutions-item span,
	.oneupmenu-products-tv-wrapper h4,
	.oneupmenu-company-item h4 {
		font-size: 18px; font-weight: 500; line-height: 120%;
	}
	.oneupmenu-solutions-item span { font-weight: 800 !important;}
	.oneupmenu-company-mobile .oneupmenu-resources-item-card-1 h4 {
		text-align: center; font-size: 15px; font-weight: 500; line-height: 130%;
	}
	.oneupmenu-solutions-item-links      { gap: 0; }
	.oneupmenu-solutions-item            { gap: 15px; }
	.oneupmenu-solutions-item-links      { left: -5px; position: relative; }
	.oneupmenu-resources-mobile .oneupmenu-products-mobile-card { height: 100%; }
	.oneupmenu-products-mobile-card-2    { height: 100%; }
	.oneupmenu-products-mobile-card      { padding: 18px; }
	.oneupmenu-products-mobile-integrations h4 { font-size: 18px; font-weight: 500; line-height: 120%; }
	.oneupmenu-products-mobile-integrations span.prev-head { font-size: 18px; font-weight: 800 !important; display: block; line-height: 120%; }
	.oneupmenu-company-mobile .oneupmenu-resources-item-card-2 { margin-bottom: 0; height: auto; }
	.oneupmenu-products-mobile-integrations-img img { margin: initial; }
	.oneupmenu-products-tv-wrapper       { gap: 5px; }
	.oneupmenu-products-tv-wrapper h4    { font-size: 16px; font-weight: 500; line-height: 150%; }
	.oneupmenu-products-mobile-card.oneupmenu-products-special-card { min-height: 290px; margin-bottom: 20px !important; }
	.oneupmenu-products-mobile-card,
	.oneupmenu-products-mobile-card-2,
	.oneupmenu-resources-mobile .oneupmenu-products-mobile-card { margin-bottom: 0; }
}

/* [16c] Compact desktop: 992px – 1100px */
@media screen and (min-width: 992px) and (max-width: 1100px) {
	.oneupmenu-login-btn, .oneupmenu-booking-btn     { padding: 8px 16px; }
	.oneupmenu-nav-options                           { gap: 18px; }
	.oneupmenu-resources-item-card a,
	.oneupmenu-resources-item-card.special-card a    { padding: 8px 16px; }
	.oneupmenu-products-left-btn                     { gap: 12px; padding-right: 10px; font-size: 15px; }
	.oneupmenu-products-bg-left                      { width: 300px; }
	.oneupmenu-products-tv                           { gap: 6px; justify-content: space-between; }
	.oneupmenu-products-tv-wrapper                   { gap: 6px; grid-template-columns: repeat(2, 200px); }
	.oneupmenu-products-tv-right                     { width: 270px; height: 270px; padding: 16px; overflow: hidden; }
	.oneupmenu-products-tv-right img                 { width: 267px; height: 149px; bottom: -20px; }
	.oneupmenu-products-bottom                       { padding-right: 18px; padding-left: 20px; }
	.oneupmenu-products-content                      { gap: 40px; }
	.oneupmenu-products-bottom > div                 { gap: 20px; }
	.oneupmenu-products-integrations                 { gap: 8px; }
}

/* [16d] 1101px – 1130px */
@media screen and (min-width: 1101px) and (max-width: 1130px) {
	.oneupmenu-products-bg-left  { width: 340px; }
	.oneupmenu-products-tv       { gap: 10px; }
	.oneupmenu-products-tv-wrapper { gap: 10px; }
	.oneupmenu-products-left-btn { gap: 14px; padding-right: 12px; font-size: 16px; }
	.oneupmenu-products-tv-right { width: 290px; height: 290px; padding: 16px; overflow: hidden; }
	.oneupmenu-products-tv-right img { width: 282px; height: 157px; bottom: -10px; }
}

/* [16e] 1131px – 1200px */
@media screen and (min-width: 1131px) and (max-width: 1200px) {
	.oneupmenu-products-bg-left    { width: 360px; }
	.oneupmenu-products-left-btn   { gap: 14px; padding-right: 12px; }
	.oneupmenu-products-tv         { gap: 18px; }
	.oneupmenu-products-tv-wrapper { gap: 18px; }
	.oneupmenu-products-tv-right   { width: 290px; height: 290px; padding: 16px; overflow: hidden; }
	.oneupmenu-products-tv-right img { width: 282px; height: 157px; bottom: -10px; }
}

/* [16f] 1201px – 1320px */
@media screen and (min-width: 1201px) and (max-width: 1320px) {
	.oneupmenu-products-bg-left    { width: 400px; }
	.oneupmenu-products-tv         { gap: 18px; }
	.oneupmenu-products-tv-wrapper { gap: 18px; }
}

/* [16g–j] Large monitors — widen the blue left panel */
@media screen and (min-width: 1441px) and (max-width: 1799px)  { .oneupmenu-products-bg-left { width: 35%; } }
@media screen and (min-width: 1800px) and (max-width: 2159px)  { .oneupmenu-products-bg-left { width: 37%; } }
@media screen and (min-width: 2160px) and (max-width: 2799px)  { .oneupmenu-products-bg-left { width: 41%; } }
@media screen and (min-width: 2800px)                          { .oneupmenu-products-bg-left { width: 42%; } }