.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;
}

/* The script marks the real Home shortcut after inserting the compact
   banner strip. Styling that explicit row avoids fragile sibling selectors
   and creates the restrained separation requested beneath the two pills. */
.ipsOffCanvas__nav .ppxMobileChromeNavHomeItem {
	margin-top: 0.68rem !important;
	width: 100%;
	box-sizing: border-box;
}

/* Home can be the navigation row itself or a clickable descendant nested
   inside a theme-owned wrapper. The app marks every real clickable surface,
   keeping the blue filled treatment visible in either DOM shape. */
.ipsOffCanvas__nav .ppxMobileChromeNavHomeLink,
.ipsOffCanvas__nav .ppxMobileChromeNavHomeLink:link,
.ipsOffCanvas__nav .ppxMobileChromeNavHomeLink:visited {
	display: flex !important;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	min-height: 3.6rem;
	padding: 0.82rem 1rem;
	box-sizing: border-box;
	border-radius: 0.5rem;
	background: var(--i-primary, #1769e8) !important;
	color: #ffffff !important;
	font-weight: 700;
	text-decoration: none !important;
}

.ipsOffCanvas__nav .ppxMobileChromeNavHomeLink * {
	color: #ffffff !important;
}

.ipsOffCanvas__nav .ppxMobileChromeNavHomeLink:hover,
.ipsOffCanvas__nav .ppxMobileChromeNavHomeLink:focus-visible,
.ipsOffCanvas__nav .ppxMobileChromeNavHomeLink:active {
	background: var(--i-primary-dark, #1258c7) !important;
	color: #ffffff !important;
	text-decoration: none !important;
}

.ipsOffCanvas__nav .ppxMobileChromeNavBanners {
	display: flex !important;
	flex-flow: row nowrap !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.45rem !important;
	margin: 0 !important;
	padding: 0.25rem 0.55rem 0.42rem !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	overflow: visible !important;
}

/* Service Status owns its responsive presentation completely. The fallback
 * colours are deliberately valid without color-mix(), so older Android Chrome
 * builds still render a proper pill instead of the plain icon/text failure. */
.ppxMobileServiceStatus {
	--ppx-mobile-service-status-light: #49658f;
	--ppx-mobile-service-status-dark: #617490;
	--ppx-mobile-service-status-accent: var(--ppx-mobile-service-status-light);
	--ppx-mobile-service-status-text: #ffffff;
	--ppx-mobile-service-status-muted: rgba(255, 255, 255, 0.78);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.38rem;
	min-width: 0;
	min-height: 2.45rem;
	padding: 0.34rem 0.64rem;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	background: linear-gradient(135deg, var(--ppx-mobile-service-status-accent) 0%, #344154 100%);
	box-shadow: 0 8px 18px rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14);
	color: var(--ppx-mobile-service-status-text);
	font-weight: inherit;
	text-decoration: none;
	overflow: hidden;
	isolation: isolate;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ppxMobileServiceStatus::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 48%, rgba(0, 0, 0, 0.08) 100%);
	pointer-events: none;
	z-index: -1;
}

.ppxMobileServiceStatus__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.35rem;
	height: 1.35rem;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	color: var(--ppx-mobile-service-status-text);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
	font-size: 0.66rem;
	line-height: 1;
}

.ppxMobileServiceStatus__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 0.04rem;
	line-height: 1;
}

.ppxMobileServiceStatus__title,
.ppxMobileServiceStatus__subtext {
	display: block;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	white-space: nowrap;
	text-wrap: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	overflow-wrap: normal;
	word-break: normal;
}

.ppxMobileServiceStatus__title {
	font-size: 0.74rem;
	font-weight: 700;
	line-height: 1.02;
	color: var(--ppx-mobile-service-status-text);
}

.ppxMobileServiceStatus__subtext {
	font-size: 0.56rem;
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: 0.015em;
	color: var(--ppx-mobile-service-status-muted);
}

html[data-ips-scheme='dark'] .ppxMobileServiceStatus {
	--ppx-mobile-service-status-accent: var(--ppx-mobile-service-status-dark);
	background: linear-gradient(135deg, var(--ppx-mobile-service-status-accent) 0%, #2b3545 100%);
}

/* Use the richer colour treatment where supported, while keeping the solid
 * rgba/gradient declarations above as a complete compatibility fallback. */
@supports (color: color-mix(in srgb, #000 50%, #fff 50%)) {
	.ppxMobileServiceStatus {
		--ppx-mobile-service-status-muted: color-mix(in srgb, var(--ppx-mobile-service-status-text) 74%, transparent);
		border-color: color-mix(in srgb, var(--ppx-mobile-service-status-accent) 72%, rgba(255, 255, 255, 0.16));
		background: linear-gradient(135deg, color-mix(in srgb, var(--ppx-mobile-service-status-accent) 82%, #1f2937 18%) 0%, color-mix(in srgb, var(--ppx-mobile-service-status-accent) 52%, #111827 48%) 100%);
		box-shadow: 0 8px 18px color-mix(in srgb, var(--ppx-mobile-service-status-accent) 26%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.14);
	}

	html[data-ips-scheme='dark'] .ppxMobileServiceStatus {
		--ppx-mobile-service-status-muted: color-mix(in srgb, var(--ppx-mobile-service-status-text) 66%, transparent);
		border-color: color-mix(in srgb, var(--ppx-mobile-service-status-accent) 32%, rgba(255, 255, 255, 0.08));
		background: linear-gradient(135deg, color-mix(in srgb, var(--ppx-mobile-service-status-accent) 42%, #182235 58%) 0%, color-mix(in srgb, var(--ppx-mobile-service-status-accent) 20%, #060d1b 80%) 100%);
	}
}

/* The two navigation actions are a single compact row in the intended mobile
 * design: What's New first, Service Status second, then Home beneath. Let the
 * pills shrink modestly on narrow devices, but never wrap the Status title and
 * Suggestions onto one accidental text run. */
.ipsOffCanvas__nav .ppxMobileChromeNavBanners > .catchupWhatsNewButton,
.ipsOffCanvas__nav .ppxMobileChromeNavBanners > .ppxMobileServiceStatus {
	min-height: 2.45rem !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	border-radius: 999px !important;
	text-decoration: none !important;
}

.ipsOffCanvas__nav .ppxMobileChromeNavBanners > .catchupWhatsNewButton {
	flex: 0 1 8.75rem !important;
	width: auto !important;
	min-width: 7.35rem !important;
	max-width: 8.75rem !important;
	padding: 0.34rem 0.64rem !important;
}

.ipsOffCanvas__nav .ppxMobileChromeNavBanners > .ppxMobileServiceStatus,
.ipsOffCanvas__nav .ppxMobileChromeNavBanners > a.ppxMobileServiceStatus:link,
.ipsOffCanvas__nav .ppxMobileChromeNavBanners > a.ppxMobileServiceStatus:visited {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	flex: 0 1 9.65rem !important;
	width: auto !important;
	min-width: 8.15rem !important;
	max-width: 9.65rem !important;
	padding: 0.34rem 0.64rem !important;
	gap: 0.38rem !important;
	color: var(--ppx-mobile-service-status-text) !important;
	text-decoration: none !important;
}

.ipsOffCanvas__nav .ppxMobileChromeNavBanners .catchupWhatsNewButton__icon,
.ipsOffCanvas__nav .ppxMobileChromeNavBanners .ppxMobileServiceStatus__icon {
	flex: 0 0 auto !important;
	width: 1.35rem !important;
	height: 1.35rem !important;
	font-size: 0.66rem !important;
}

.ipsOffCanvas__nav .ppxMobileChromeNavBanners .ppxMobileServiceStatus__body {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: center !important;
	min-width: 0 !important;
	line-height: 1 !important;
}

.ipsOffCanvas__nav .ppxMobileChromeNavBanners .catchupWhatsNewButton__label,
.ipsOffCanvas__nav .ppxMobileChromeNavBanners .ppxMobileServiceStatus__title {
	font-size: 0.74rem !important;
	line-height: 1.02 !important;
	white-space: nowrap !important;
	text-wrap: nowrap !important;
}

.ipsOffCanvas__nav .ppxMobileChromeNavBanners .ppxMobileServiceStatus__subtext {
	font-size: 0.56rem !important;
	line-height: 1.02 !important;
	white-space: nowrap !important;
	text-wrap: nowrap !important;
}

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

.ipsOffCanvas__nav .ppxMobileChromeNavBanners > .ppxMobileServiceStatus .ppxMobileServiceStatus__title,
.ipsOffCanvas__nav .ppxMobileChromeNavBanners > .ppxMobileServiceStatus .ppxMobileServiceStatus__subtext,
.ipsOffCanvas__nav .ppxMobileChromeNavBanners > .catchupWhatsNewButton .catchupWhatsNewButton__label {
	color: inherit;
}

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

.ppxMobileChromeNavBanners > .catchupWhatsNewButton:hover,
.ppxMobileChromeNavBanners > .catchupWhatsNewButton:focus-visible,
.ppxMobileChromeNavBanners > .catchupWhatsNewButton:active,
.ppxMobileChromeNavBanners > .catchupWhatsNewButton.ppxMobileChromeNavDesktop--pressed {
	transform: translateY(-1px);
	box-shadow: 0 12px 24px rgba(4, 80, 43, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.22);
	color: var(--catchup-whats-new-text);
	text-decoration: none;
}

.ppxMobileChromeNavBanners > .ppxMobileServiceStatus:hover,
.ppxMobileChromeNavBanners > .ppxMobileServiceStatus:focus-visible,
.ppxMobileChromeNavBanners > .ppxMobileServiceStatus:active,
.ppxMobileChromeNavBanners > .ppxMobileServiceStatus.ppxMobileChromeNavDesktop--pressed {
	transform: translateY(-1px);
	border-color: rgba(255, 255, 255, 0.24);
	box-shadow: 0 12px 24px rgba(15, 23, 42, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.2);
	color: var(--ppx-mobile-service-status-text);
	text-decoration: none;
}

@supports (color: color-mix(in srgb, #000 50%, #fff 50%)) {
	.ppxMobileChromeNavBanners > .ppxMobileServiceStatus:hover,
	.ppxMobileChromeNavBanners > .ppxMobileServiceStatus:focus-visible,
	.ppxMobileChromeNavBanners > .ppxMobileServiceStatus:active,
	.ppxMobileChromeNavBanners > .ppxMobileServiceStatus.ppxMobileChromeNavDesktop--pressed {
		border-color: color-mix(in srgb, var(--ppx-mobile-service-status-text) 22%, var(--ppx-mobile-service-status-accent) 78%);
		box-shadow: 0 14px 26px color-mix(in srgb, var(--ppx-mobile-service-status-accent) 38%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.2);
	}
}

.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;
	}
	}

/* Keep both pills on one line on small phones by reducing only horizontal
 * breathing room; the labels remain readable and the Status subtext stays on
 * its own line. */
@media (max-width: 390px) {
	.ipsOffCanvas__nav .ppxMobileChromeNavBanners {
		gap: 0.25rem !important;
		padding-inline: 0.25rem !important;
	}

	.ipsOffCanvas__nav .ppxMobileChromeNavBanners > .catchupWhatsNewButton {
		min-width: 6.9rem !important;
		padding-inline: 0.48rem !important;
	}

	.ipsOffCanvas__nav .ppxMobileChromeNavBanners > .ppxMobileServiceStatus,
	.ipsOffCanvas__nav .ppxMobileChromeNavBanners > a.ppxMobileServiceStatus:link,
	.ipsOffCanvas__nav .ppxMobileChromeNavBanners > a.ppxMobileServiceStatus:visited {
		min-width: 7.65rem !important;
		padding-inline: 0.48rem !important;
		gap: 0.3rem !important;
	}

	.ipsOffCanvas__nav .ppxMobileChromeNavBanners .catchupWhatsNewButton__label,
	.ipsOffCanvas__nav .ppxMobileChromeNavBanners .ppxMobileServiceStatus__title {
		font-size: 0.7rem !important;
	}

	.ipsOffCanvas__nav .ppxMobileChromeNavBanners .ppxMobileServiceStatus__subtext {
		font-size: 0.53rem !important;
	}
}

.ppxMobileChromeNavBanners > .catchupWhatsNewButton.ppxMobileChromeNavDesktop--pressed {
	transform: translateY(-1px) !important;
	box-shadow: 0 12px 24px rgba(4, 80, 43, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
	border-color: rgba(255, 255, 255, 0.22) !important;
	color: var(--catchup-whats-new-text) !important;
	text-decoration: none !important;
}

.ppxMobileChromeNavBanners > .ppxMobileServiceStatus.ppxMobileChromeNavDesktop--pressed {
	transform: translateY(-1px) !important;
	border-color: rgba(255, 255, 255, 0.24) !important;
	box-shadow: 0 12px 24px rgba(15, 23, 42, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
	text-decoration: none !important;
}

@supports (color: color-mix(in srgb, #000 50%, #fff 50%)) {
	.ppxMobileChromeNavBanners > .catchupWhatsNewButton.ppxMobileChromeNavDesktop--pressed {
		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;
	}

	.ppxMobileChromeNavBanners > .ppxMobileServiceStatus.ppxMobileChromeNavDesktop--pressed {
		border-color: color-mix(in srgb, var(--ppx-mobile-service-status-text) 22%, var(--ppx-mobile-service-status-accent) 78%) !important;
		box-shadow: 0 14px 26px color-mix(in srgb, var(--ppx-mobile-service-status-accent) 42%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
	}
}