.ppxMobileChrome__accountTrigger,
.ppxMobileChrome__accountTrigger:link,
.ppxMobileChrome__accountTrigger:visited {
	position: relative;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	text-decoration: none;
}

.ppxMobileChrome__accountTriggerPhoto,
.ppxMobileChrome__accountTriggerPhoto.ipsUserPhoto {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.55rem;
	height: 2.55rem;
	padding: 0.18rem;
	border-radius: 999px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(148, 163, 184, 0.22));
	border: 1px solid rgba(148, 163, 184, 0.32);
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.28);
	overflow: hidden;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.ppxMobileChrome__accountTriggerPhoto img,
.ppxMobileChrome__accountTriggerPhoto .ipsUserPhoto_image,
.ppxMobileChrome__accountTriggerPhoto .ipsUserPhoto__image {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 999px;
	object-fit: cover;
	box-shadow: none;
}

.ppxMobileChromeNavBanners {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.25rem;
	margin: 0.25rem auto 0.45rem;
	padding: 0;
	width: 100%;
	box-sizing: border-box;
}

.ipsOffCanvas__nav > .ppxMobileChromeNavBannersItem {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ipsOffCanvas__nav > .ppxMobileChromeNavBannersItem + li {
	margin-top: 0.1rem;
}

.ipsOffCanvas__nav .ppxMobileChromeNavBanners {
	margin: 0;
	padding: 0.15rem 0.35rem 0.45rem;
}

.ipsOffCanvas__nav .ppxMobileChromeNavBanners > .catchupWhatsNewButton,
.ipsOffCanvas__nav .ppxMobileChromeNavBanners > .ppxHeaderBadge,
.ipsOffCanvas__nav .ppxMobileChromeNavBanners > .ppxMobileChromeNavBanner {
	width: auto;
	min-width: 0;
	padding: 0.34rem 0.64rem;
	border-radius: 999px;
	font-weight: inherit;
	text-decoration: none;
}

.ipsOffCanvas__nav .ppxMobileChromeNavBanners > .catchupWhatsNewButton,
.ipsOffCanvas__nav .ppxMobileChromeNavBanners > .catchupWhatsNewButton:link,
.ipsOffCanvas__nav .ppxMobileChromeNavBanners > .catchupWhatsNewButton:visited {
	color: var(--catchup-whats-new-text);
}

.ipsOffCanvas__nav .ppxMobileChromeNavBanners > .ppxHeaderBadge,
.ipsOffCanvas__nav .ppxMobileChromeNavBanners > .ppxHeaderBadge:link,
.ipsOffCanvas__nav .ppxMobileChromeNavBanners > .ppxHeaderBadge:visited,
.ipsOffCanvas__nav .ppxMobileChromeNavBanners > .ppxMobileChromeNavBanner,
.ipsOffCanvas__nav .ppxMobileChromeNavBanners > .ppxMobileChromeNavBanner:link,
.ipsOffCanvas__nav .ppxMobileChromeNavBanners > .ppxMobileChromeNavBanner:visited {
	color: var(--ppx-header-badge-text, var(--ppx-mobile-banner-text, #ffffff));
}

.ipsOffCanvas__nav .ppxMobileChromeNavBanners > .ppxHeaderBadge .ppxHeaderBadge__title,
.ipsOffCanvas__nav .ppxMobileChromeNavBanners > .ppxHeaderBadge .ppxHeaderBadge__subtext,
.ipsOffCanvas__nav .ppxMobileChromeNavBanners > .catchupWhatsNewButton .catchupWhatsNewButton__label,
.ipsOffCanvas__nav .ppxMobileChromeNavBanners > .ppxMobileChromeNavBanner .ppxMobileChromeNavBanner__title,
.ipsOffCanvas__nav .ppxMobileChromeNavBanners > .ppxMobileChromeNavBanner .ppxMobileChromeNavBanner__subtext {
	color: inherit;
}

.ppxMobileChromeNavBanners > .ppxMobileChromeNavDesktop {
	flex: 0 0 auto;
	max-width: 100%;
}

.ppxMobileChromeNavBanners > .ppxHeaderBadge {
	width: auto;
	max-width: min(100%, 10.5rem);
}

.ppxMobileChromeNavBanners > .catchupWhatsNewButton {
	max-width: min(100%, 9rem);
}

.ppxMobileChromeNavBanners > .catchupWhatsNewButton:hover,
.ppxMobileChromeNavBanners > .catchupWhatsNewButton:focus-visible,
.ppxMobileChromeNavBanners > .catchupWhatsNewButton:active,
.ppxMobileChromeNavBanners > .catchupWhatsNewButton.ppxMobileChromeNavDesktop--pressed {
	transform: translateY(-1px);
	box-shadow: 0 12px 24px color-mix(in srgb, var(--catchup-whats-new-accent) 34%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.18);
	border-color: color-mix(in srgb, #ffffff 18%, var(--catchup-whats-new-accent) 82%);
	color: var(--catchup-whats-new-text);
	text-decoration: none;
}

.ppxMobileChromeNavBanners > .ppxHeaderBadge:hover,
.ppxMobileChromeNavBanners > .ppxHeaderBadge:focus-visible,
.ppxMobileChromeNavBanners > .ppxHeaderBadge:active,
.ppxMobileChromeNavBanners > .ppxHeaderBadge.ppxMobileChromeNavDesktop--pressed {
	transform: translateY(-1px);
	border-color: color-mix(in srgb, var(--ppx-header-badge-text) 22%, var(--ppx-header-badge-accent) 78%);
	box-shadow: 0 14px 26px color-mix(in srgb, var(--ppx-header-badge-accent) 42%, transparent), inset 0 1px 0 color-mix(in srgb, var(--ppx-header-badge-text) 20%, transparent);
	text-decoration: none;
}

.ppxMobileChromeNavBanner {
	--ppx-mobile-banner-accent: #315bb8;
	--ppx-mobile-banner-text: #ffffff;
	--ppx-mobile-banner-bg-start: color-mix(in srgb, var(--ppx-mobile-banner-accent) 92%, #ffffff 8%);
	--ppx-mobile-banner-bg-end: color-mix(in srgb, var(--ppx-mobile-banner-accent) 72%, #0f172a 28%);
	--ppx-mobile-banner-border: color-mix(in srgb, var(--ppx-mobile-banner-accent) 70%, rgba(255, 255, 255, 0.18));
	--ppx-mobile-banner-shadow: color-mix(in srgb, var(--ppx-mobile-banner-accent) 24%, transparent);
	display: inline-flex;
	align-items: center;
	gap: 0.58rem;
	min-width: 0;
	padding: 0.58rem 0.72rem;
	border-radius: 16px;
	border: 1px solid var(--ppx-mobile-banner-border);
	background: linear-gradient(135deg, var(--ppx-mobile-banner-bg-start) 0%, var(--ppx-mobile-banner-bg-end) 100%);
	box-shadow: 0 14px 28px var(--ppx-mobile-banner-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.18);
	color: var(--ppx-mobile-banner-text);
	text-decoration: none;
	min-height: 3.15rem;
	box-sizing: border-box;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
	flex: 0 1 9.4rem;
	width: min(9.4rem, calc(50% - 0.2rem));
}

.ppxMobileChromeNavBanner:hover,
.ppxMobileChromeNavBanner:focus-visible {
	color: var(--ppx-mobile-banner-text);
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 18px 34px color-mix(in srgb, var(--ppx-mobile-banner-accent) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.22);
	border-color: color-mix(in srgb, #ffffff 22%, var(--ppx-mobile-banner-accent) 78%);
	outline: none;
}

.ppxMobileChromeNavBanner:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.9);
	outline-offset: 2px;
}

.ppxMobileChromeNavBanner--statussuggestions {
	--ppx-mobile-banner-accent: #4a67d8;
}

.ppxMobileChromeNavBanner--catchup {
	--ppx-mobile-banner-accent: #208d52;
}

.ppxMobileChromeNavBanner__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.95rem;
	height: 1.95rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.18);
	font-size: 0.82rem;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.ppxMobileChromeNavBanner__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	gap: 0.02rem;
	line-height: 1.08;
}

.ppxMobileChromeNavBanner__title {
	display: block;
	font-size: 0.94rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ppxMobileChromeNavBanner__subtext {
	display: block;
	font-size: 0.68rem;
	font-weight: 600;
	opacity: 0.88;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ppxMobileChromeNavBanner--singleLine {
	align-items: center;
}

.ppxMobileChromeNavBanner--singleLine .ppxMobileChromeNavBanner__body {
	gap: 0;
}

html[data-ips-scheme='dark'] .ppxMobileChrome__accountTriggerPhoto,
html[data-ips-scheme='dark'] .ppxMobileChrome__accountTriggerPhoto.ipsUserPhoto {
	background: linear-gradient(135deg, rgba(30, 41, 59, 0.82), rgba(51, 65, 85, 0.96));
	border-color: rgba(148, 163, 184, 0.24);
	box-shadow: 0 12px 28px rgba(2, 6, 23, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-ips-scheme='dark'] .ppxMobileChromeNavBanner--statussuggestions {
	--ppx-mobile-banner-accent: #5d7dff;
	--ppx-mobile-banner-bg-start: color-mix(in srgb, var(--ppx-mobile-banner-accent) 42%, #182235 58%);
	--ppx-mobile-banner-bg-end: color-mix(in srgb, var(--ppx-mobile-banner-accent) 20%, #060d1b 80%);
	--ppx-mobile-banner-border: color-mix(in srgb, var(--ppx-mobile-banner-accent) 30%, rgba(255, 255, 255, 0.08));
	--ppx-mobile-banner-shadow: color-mix(in srgb, var(--ppx-mobile-banner-accent) 16%, transparent);
}

html[data-ips-scheme='dark'] .ppxMobileChromeNavBanner--catchup {
	--ppx-mobile-banner-accent: #2fb36a;
	--ppx-mobile-banner-bg-start: color-mix(in srgb, var(--ppx-mobile-banner-accent) 40%, #12251a 60%);
	--ppx-mobile-banner-bg-end: color-mix(in srgb, var(--ppx-mobile-banner-accent) 18%, #07130b 82%);
	--ppx-mobile-banner-border: color-mix(in srgb, var(--ppx-mobile-banner-accent) 26%, rgba(255, 255, 255, 0.08));
	--ppx-mobile-banner-shadow: color-mix(in srgb, var(--ppx-mobile-banner-accent) 14%, transparent);
}

@media (max-width: 979px) {
	.ppxMobileChrome__accountTrigger {
		gap: 0;
		min-width: auto;
		padding-inline: 0.2rem;
	}

	.ppxMobileChrome__accountTriggerLabel {
		display: none !important;
	}

	.ipsApp .ppxMobileChromeNavBanners,
	.ppxMobileChromeNavBanners {
		padding-inline: clamp(0.1rem, 1vw, 0.35rem);
	}
}

@media (max-width: 767px) {
	.ppxMobileChromeNavBanners {
		gap: 0.25rem;
		margin: 0.3rem 0 0.28rem;
	}

	.ipsApp .ppxMobileChromeNavBanner,
	.ppxMobileChromeNavBanner {
		padding: 0.54rem 0.68rem;
		min-height: 3rem;
	}

	.ipsApp .ppxMobileChromeNavBanner__icon,
	.ppxMobileChromeNavBanner__icon {
		width: 1.82rem;
		height: 1.82rem;
		font-size: 0.78rem;
	}

	.ipsApp .ppxMobileChromeNavBanner__title,
	.ppxMobileChromeNavBanner__title {
		font-size: 0.9rem;
	}

	.ipsApp .ppxMobileChromeNavBanner__subtext,
	.ppxMobileChromeNavBanner__subtext {
		font-size: 0.64rem;
	}
}

@media (max-width: 560px) {
	.ppxMobileChromeNavBanners {
		gap: 0.25rem;
		margin-bottom: 0.24rem;
	}

	.ipsApp .ppxMobileChromeNavBanners:has(.ppxMobileChromeNavBanner:only-child),
	.ppxMobileChromeNavBanners[data-ppx-count='1'] {
		grid-template-columns: minmax(0, 1fr);
	}

	.ipsApp .ppxMobileChromeNavBanner,
	.ppxMobileChromeNavBanner {
		padding: 0.5rem 0.62rem;
		min-height: 2.9rem;
	}

	.ipsApp .ppxMobileChromeNavBanner__title,
	.ppxMobileChromeNavBanner__title {
		font-size: 0.86rem;
	}

	.ipsApp .ppxMobileChromeNavBanner__subtext,
	.ppxMobileChromeNavBanner__subtext {
		font-size: 0.62rem;
	}

	.ipsApp .ppxMobileChromeNavBanner__icon,
	.ppxMobileChromeNavBanner__icon {
		width: 1.72rem;
		height: 1.72rem;
	}
	}

.ppxMobileChromeNavBanners > .catchupWhatsNewButton.ppxMobileChromeNavDesktop--pressed {
	transform: translateY(-1px) !important;
	box-shadow: 0 12px 24px color-mix(in srgb, var(--catchup-whats-new-accent) 34%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
	border-color: color-mix(in srgb, #ffffff 18%, var(--catchup-whats-new-accent) 82%) !important;
	color: var(--catchup-whats-new-text) !important;
	text-decoration: none !important;
}

.ppxMobileChromeNavBanners > .ppxHeaderBadge.ppxMobileChromeNavDesktop--pressed {
	transform: translateY(-1px) !important;
	border-color: color-mix(in srgb, var(--ppx-header-badge-text) 22%, var(--ppx-header-badge-accent) 78%) !important;
	box-shadow: 0 14px 26px color-mix(in srgb, var(--ppx-header-badge-accent) 42%, transparent), inset 0 1px 0 color-mix(in srgb, var(--ppx-header-badge-text) 20%, transparent) !important;
	text-decoration: none !important;
}