/* PRODUCT PAGES (modern layout, used by downloader) */

.pdHero {
	background: linear-gradient(180deg, var(--hdr-accent-soft) 0%, var(--bg-color) 100%);
	border-bottom: 1px solid var(--hdr-border);
}

body.dark .pdHero {
	background: linear-gradient(180deg, color-mix(in srgb, #fff 6%, var(--bg-color)) 0%, var(--bg-color) 100%);
}

.pdHero .container {
	padding-top: 40px;
	padding-bottom: 40px;
}

.pdHeroGrid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 32px;
	align-items: stretch;
}

.pdHero h1 {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 8px;
	font-size: clamp(3rem, 4vw, 4.2rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--text-color);
}

.pdHero h1 img {
	width: 1.5em;
	height: 1.5em;
}

.pdHero p {
	margin: 0 0 12px;
	font-size: 1.7rem;
	line-height: 1.7;
	color: var(--muted-text-color);
}

.pdHero p.pdLead {
	font-size: 2.2rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--text-color);
}

.pdHighlights {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.pdHighlights li {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	align-items: center;
	column-gap: 12px;
	row-gap: 8px;
	padding: 16px 18px;
	border: 1px solid var(--hdr-border);
	border-radius: 12px;
	background: var(--bg-color);
	font-size: 1.4rem;
	line-height: 1.45;
	color: var(--muted-text-color);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 14px rgba(0, 0, 0, .04);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pdHighlights li:hover {
	transform: translateY(-3px);
	border-color: var(--hdr-accent);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .1);
}

body.dark .pdHighlights li:hover {
	border-color: rgba(255, 255, 255, .4);
	box-shadow: 0 0 18px color-mix(in srgb, #fff 14%, transparent);
}

.pdHighlights li:hover img {
	transform: scale(1.1) rotate(-4deg);
}

.pdHighlights img {
	transition: transform 0.25s ease;
	width: 40px;
	height: 40px;
}

.pdHighlights span {
	grid-column: 1 / -1;
}

.pdHighlights strong {
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--hdr-accent);
}

body.dark .pdHighlights strong {
	color: #fff;
}

body.dark .pdHighlights li {
	background: color-mix(in srgb, #fff 4%, var(--bg-color));
	box-shadow: none;
}

.pdDownload {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 24px 26px;
	border: 1px solid var(--hdr-border);
	border-radius: 14px;
	background: var(--bg-color);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);
}

body.dark .pdDownload {
	background: color-mix(in srgb, #fff 4%, var(--bg-color));
	box-shadow: none;
}

.pdDownload h2 {
	margin: auto 0 16px;
	font-size: 2.2rem;
	line-height: 1.3;
	color: var(--text-color);
}

/* The .NET requirement reads as a faded footnote at the bottom of the box */
.pdDownload p {
	margin: auto 0 0;
	padding-top: 18px;
	font-size: 1.2rem;
	line-height: 1.55;
	color: var(--muted-text-color);
	opacity: .75;
}

.pdDownload a:not(.pdBtn):not(.pdBadge):not(.pdGhost),
.pdCard a {
	color: var(--hdr-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pdBtn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 14px 22px;
	border-radius: 12px;
	background: var(--hdr-accent);
	color: #fff;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pdGhost {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 12px;
	padding: 12px 20px;
	border: 1.5px solid color-mix(in srgb, var(--text-color) 35%, transparent);
	border-radius: 12px;
	background: var(--bg-color);
	box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 8px 20px rgba(0, 0, 0, .1);
	color: var(--text-color);
	font-size: 1.5rem;
	text-decoration: none;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.pdGhost:hover,
.pdGhost:focus-visible {
	transform: translateY(-2px);
	border-color: var(--hdr-accent);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
	color: var(--text-color);
	text-decoration: none;
}

body.dark .pdGhost {
	border-color: rgba(255, 255, 255, .35);
	background: rgba(255, 255, 255, .06);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}

body.dark .pdGhost:hover,
body.dark .pdGhost:focus-visible {
	border-color: rgba(255, 255, 255, .5);
}

body.dark .pdGhost img {
	filter: invert(1);
}

body.dark .pdGhost img.pdKeep {
	filter: none;
}

/* Short facts list in the download box */
.pdFacts {
	margin: 18px 0 auto;
	padding-top: 14px;
	border-top: 1px solid var(--hdr-border);
	font-size: 1.4rem;
}

.pdFacts div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 0;
}

.pdFacts dt {
	color: var(--muted-text-color);
}

.pdFacts dd {
	margin: 0;
	font-weight: 600;
	color: var(--text-color);
	text-align: right;
}

/* The comments page pads its content so the card shadows are not clipped; pull the iframe out by that padding */
.pdEnd iframe {
	display: block;
	width: calc(100% + 56px) !important;
	max-width: none;
	margin: 0 -28px -36px;
}

@media (max-width: 520px) {
	.pdEnd iframe {
		width: calc(100% + 24px) !important;
		margin: 0 -12px -30px;
	}
}

.pdBtn .pdBit {
	flex: none;
	margin: -3px 0;
}

.pdBtn + .pdBtn {
	margin-top: 12px;
}

.pdBtn small {
	display: block;
	font-size: 1.2rem;
	font-weight: 400;
	opacity: .85;
}

.pdBtn:hover,
.pdBtn:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, .2);
	color: #fff;
	text-decoration: none;
}

body.dark .pdBtn {
	background: #f1f1f3;
	color: #111;
}

body.dark .pdBtn:hover,
body.dark .pdBtn:focus-visible {
	color: #111;
}

/* The screenshot glow and the comments iframe reach past the content column; never let them widen the page */
.pdSection {
	overflow-x: clip;
}

.pdSection .container {
	padding-top: 44px;
	padding-bottom: 48px;
}

/* A full-width strip that fades in from the page background and back out, so it has no hard edges */
.pdAlt {
	background: linear-gradient(180deg, var(--bg-color) 0%, color-mix(in srgb, var(--hdr-accent) 7%, var(--bg-color)) 50%, var(--bg-color) 100%);
}

body.dark .pdAlt {
	background: linear-gradient(180deg, var(--bg-color) 0%, color-mix(in srgb, #fff 4%, var(--bg-color)) 50%, var(--bg-color) 100%);
}

/* Closing section: lighter at the top, slightly darker at the bottom, like the home page */
.pdEnd {
	background: linear-gradient(180deg, var(--bg-color) calc(100% - 220px), var(--hdr-accent-soft) 100%);
}

body.dark .pdEnd {
	background: linear-gradient(180deg, var(--bg-color) calc(100% - 220px), color-mix(in srgb, #000 16%, var(--bg-color)) 100%);
}

.pdHeading {
	margin: 0 0 24px;
	font-size: 2.8rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--text-color);
}

.pdFeatures {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.pdCard {
	padding: 22px 24px;
	border: 1px solid var(--hdr-border);
	border-radius: 14px;
	background: var(--bg-color);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 14px rgba(0, 0, 0, .04);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.dark .pdCard {
	background: color-mix(in srgb, #fff 4%, var(--bg-color));
	box-shadow: none;
}

.pdCard:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .09);
}

body.dark .pdCard:hover {
	box-shadow: 0 0 18px color-mix(in srgb, #fff 14%, transparent);
}

.pdIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 14px;
	border-radius: 14px;
	background: var(--hdr-accent-soft);
}

.pdIcon img {
	max-width: 32px;
	max-height: 32px;
	object-fit: contain;
}

body.dark .pdIcon {
	background: color-mix(in srgb, #fff 10%, var(--bg-color));
}

/* For white icon artwork: a solid tile in the product colour (set --pd-icon on the page) */
.pdIcon.pdIconSolid,
body.dark .pdIcon.pdIconSolid {
	background: linear-gradient(135deg, color-mix(in srgb, var(--pd-icon, var(--hdr-accent)) 75%, #fff), var(--pd-icon, var(--hdr-accent)));
	box-shadow: 0 4px 12px color-mix(in srgb, var(--pd-icon, var(--hdr-accent)) 30%, transparent);
}

.pdCard h3 {
	margin: 0 0 8px;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--text-color);
}

.pdCard p,
.pdCard li {
	font-size: 1.5rem;
	line-height: 1.65;
	color: var(--text-color);
}

.pdCard p {
	margin: 0 0 10px;
}

.pdCard ul {
	margin: 0 0 10px;
	padding-left: 20px;
	list-style: disc;
}

.pdCard.pdWide {
	grid-column: span 2;
}

.pdCode {
	display: inline-block;
	max-width: 100%;
	padding: 6px 12px;
	border: 1px solid var(--hdr-border);
	border-radius: 8px;
	background: var(--hdr-accent-soft);
	color: var(--text-color);
	font-family: Consolas, 'Courier New', monospace;
	font-size: 1.4rem;
	overflow-wrap: anywhere;
}

body.dark .pdCode {
	background: color-mix(in srgb, #fff 8%, var(--bg-color));
}

/* Chrome Web Store button, built in CSS so it stays sharp at any size */
.pdBadge {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 4px;
	padding: 14px 22px;
	border-radius: 14px;
	background: var(--hdr-accent);
	color: #fff;
	text-decoration: none;
	box-shadow: 0 2px 4px rgba(9, 105, 218, .2), 0 10px 26px rgba(9, 105, 218, .28);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pdBadge:hover,
.pdBadge:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, .12), 0 16px 34px rgba(0, 0, 0, .28);
	color: #fff;
	text-decoration: none;
}

body.dark .pdBadge {
	background: #f1f1f3;
	color: #111;
	box-shadow: 0 8px 26px rgba(0, 0, 0, .5);
}

body.dark .pdBadge:hover,
body.dark .pdBadge:focus-visible {
	color: #111;
}

.pdChromeLogo {
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background:
		radial-gradient(circle, #4285f4 0 29%, #fff 29% 39%, transparent 39%),
		conic-gradient(from -60deg, #ea4335 0 120deg, #fbbc04 120deg 240deg, #34a853 240deg 360deg);
}

/* Store button for an item that was removed: muted, not clickable, with a warning on hover, focus or tap */
.pdBadge.pdGone {
	position: relative;
	background: #6b7280;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 8px 20px rgba(0, 0, 0, .12);
	cursor: not-allowed;
}

.pdBadge.pdGone:hover,
.pdBadge.pdGone:focus-visible {
	transform: none;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 8px 20px rgba(0, 0, 0, .12);
	outline: none;
}

body.dark .pdBadge.pdGone {
	background: #8a8f98;
	color: #111;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .4);
}

.pdGone .pdChromeLogo {
	filter: grayscale(1);
	opacity: .75;
}

.pdBadge.pdGone::after {
	content: attr(data-tip);
	position: absolute;
	right: 0;
	bottom: calc(100% + 10px);
	left: 0;
	z-index: 5;
	padding: 10px 14px;
	border: 1px solid #f59e0b;
	border-radius: 10px;
	background: #fffbeb;
	color: #92400e;
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	pointer-events: none;
}

body.dark .pdBadge.pdGone::after {
	border-color: #b45309;
	background: #3a2f17;
	color: #fcd34d;
}

.pdBadge.pdGone:hover::after,
.pdBadge.pdGone:focus::after {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.pdBadgeText small {
	display: block;
	font-size: 1.3rem;
	line-height: 1.3;
	opacity: .75;
}

.pdBadgeText strong {
	display: block;
	font-size: 2.2rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.pdCard .pdModes {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

.pdCard .pdModes li {
	margin: 0 0 10px;
	padding-left: 14px;
	border-left: 3px solid var(--hdr-accent);
}

body.dark .pdModes li {
	border-left-color: rgba(255, 255, 255, .5);
}

.pdModes strong {
	display: block;
	font-size: 1.6rem;
	color: var(--text-color);
}

.pdModes span {
	color: var(--muted-text-color);
}

.pdCard .pdFine {
	margin: 0;
	font-size: 1.3rem;
	color: var(--muted-text-color);
}

.pdGallery {
	position: relative;
	max-width: 1000px;
	margin: 0 auto;
}

/* Soft glow behind the main screenshot */
.pdGallery::before {
	content: '';
	position: absolute;
	inset: -90px -160px;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(closest-side ellipse at 50% 50%, color-mix(in srgb, var(--hdr-accent) 16%, transparent), transparent);
}

body.dark .pdGallery::before {
	background: radial-gradient(closest-side ellipse at 50% 50%, rgba(255, 255, 255, .09), transparent);
}

.pdStage,
.pdThumbs {
	position: relative;
	z-index: 1;
}

.pdGallery.pdNarrow {
	max-width: 800px;
}

.pdStage {
	margin: 0 0 16px;
	overflow: hidden;
	border: 1px solid var(--hdr-border);
	border-radius: 14px;
	background: var(--bg-color);
	box-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 16px 40px rgba(0, 0, 0, .12);
}

body.dark .pdStage {
	background: color-mix(in srgb, #fff 4%, var(--bg-color));
	box-shadow: none;
}

.pdStage a {
	position: relative;
	display: block;
	aspect-ratio: var(--pd-ratio, 8 / 5);
	overflow: hidden;
	border-bottom: 1px solid var(--hdr-border);
	cursor: zoom-in;
}

/* A light dark tint over the screenshot on hover; the caption has its own highlight */
.pdStage a::after {
	content: '';
	position: absolute;
	inset: 0;
	background: #000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.pdStage a:hover::after,
.pdStage a:focus-visible::after {
	opacity: .12;
}

/* A fixed frame (the screenshots are all about 8:5), so switching between them never changes the height */
.pdStage img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.pdStage figcaption {
	padding: 14px 18px 16px;
	font-size: 1.4rem;
	line-height: 1.55;
	color: var(--muted-text-color);
	transition: background-color 0.25s ease, color 0.25s ease;
}

.pdStage figcaption strong {
	display: block;
	font-size: 1.7rem;
	color: var(--text-color);
	transition: color 0.25s ease;
}

/* Hovering the screenshot also lights up its caption in the logo's teal (the tint below only covers the image) */
.pdStage:hover figcaption {
	background: linear-gradient(135deg, #19b5c8, #0b6b86);
	color: rgba(255, 255, 255, .9);
}

.pdStage:hover figcaption strong {
	color: #fff;
}

.pdThumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.pdThumbs button {
	position: relative;
	padding: 0;
	overflow: hidden;
	border: 2px solid var(--hdr-border);
	border-radius: 10px;
	background: var(--bg-color);
	opacity: .7;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .08);
	transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.pdThumbs button:hover,
.pdThumbs button:focus-visible {
	opacity: 1;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
}

.pdThumbs button.active {
	box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
}

body.dark .pdThumbs button {
	box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}

body.dark .pdThumbs button:hover,
body.dark .pdThumbs button:focus-visible,
body.dark .pdThumbs button.active {
	box-shadow: 0 8px 20px rgba(0, 0, 0, .5);
}

.pdThumbs button.active {
	border-color: var(--hdr-accent);
	opacity: 1;
}

body.dark .pdThumbs button.active {
	border-color: rgba(255, 255, 255, .7);
}

.pdThumbs button::after {
	content: '';
	position: absolute;
	inset: 0;
	background: #000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.pdThumbs button:hover::after,
.pdThumbs button:focus-visible::after {
	opacity: .12;
}

.pdThumbs img {
	display: block;
	width: 100%;
	height: auto;
}

/* Zoom gallery (Magnific Popup). Selectors are prefixed so they win over the plugin's own stylesheet, which loads later */
.mfp-bg.pdLightbox {
	background: #0b0d10;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.mfp-fade.mfp-bg.pdLightbox {
	opacity: 0;
	transition: opacity 0.25s ease;
}

.mfp-fade.mfp-bg.pdLightbox.mfp-ready {
	opacity: .92;
}

.mfp-fade.mfp-bg.pdLightbox.mfp-removing {
	opacity: 0;
}

.mfp-fade.mfp-wrap.pdLightbox .mfp-content {
	opacity: 0;
	transition: opacity 0.25s ease;
}

.mfp-fade.mfp-wrap.pdLightbox.mfp-ready .mfp-content {
	opacity: 1;
}

.mfp-fade.mfp-wrap.pdLightbox.mfp-removing .mfp-content {
	opacity: 0;
}

.pdLightbox .mfp-figure:after {
	display: none;
}

.pdLightbox img.mfp-img {
	padding: 24px 0 156px;
	background: none;
	cursor: pointer;
	clip-path: inset(24px 0 156px 0 round 12px);
}

.pdLightbox .mfp-bottom-bar {
	margin-top: -144px;
	text-align: center;
}

.pdLightbox .mfp-title {
	padding: 0;
	text-align: center;
	font-size: 1.4rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, .72);
}

.pdLightbox .mfp-title strong {
	display: block;
	font-size: 1.9rem;
	color: #fff;
}

.pdLightbox .mfp-counter {
	position: static;
	margin-top: 6px;
	font-size: 1.2rem;
	line-height: 1.4;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, .5);
}

/* The close button sits at the bottom, below the caption */
.pdLightbox .mfp-image-holder .mfp-close {
	top: auto;
	bottom: 12px;
	left: 50%;
	right: auto;
	margin-left: -21px;
	width: 42px;
	height: 42px;
	padding: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	font-size: 2.6rem;
	line-height: 40px;
	text-align: center;
	opacity: 1;
	transition: background-color 0.2s ease;
}

.pdLightbox .mfp-image-holder .mfp-close:hover,
.pdLightbox .mfp-image-holder .mfp-close:focus-visible {
	background: rgba(255, 255, 255, .26);
}

.pdLightbox .mfp-arrow {
	width: 48px;
	height: 48px;
	margin-top: -24px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	opacity: 1;
	transition: background-color 0.2s ease;
}

.pdLightbox .mfp-arrow:hover,
.pdLightbox .mfp-arrow:focus-visible {
	background: rgba(255, 255, 255, .26);
}

/* The plugin shifts the pressed arrow up; for these smaller buttons that moves it from under the pointer, so the click lands on the backdrop and closes the gallery */
.pdLightbox .mfp-arrow:active {
	margin-top: -24px;
}

.pdLightbox .mfp-arrow-left { left: 16px; }
.pdLightbox .mfp-arrow-right { right: 16px; }

.pdLightbox .mfp-arrow:before {
	display: none;
}

.pdLightbox .mfp-arrow:after {
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -3px;
	border: 0;
	border-left: 3px solid #fff;
	border-bottom: 3px solid #fff;
	border-radius: 1px;
	transform: rotate(45deg);
}

.pdLightbox .mfp-arrow-right:after {
	margin-left: -9px;
	transform: rotate(-135deg);
}

@media (max-width: 600px) {
	.pdLightbox .mfp-arrow, .pdLightbox .mfp-arrow:active { width: 40px; height: 40px; margin-top: -20px; }
	.pdLightbox .mfp-arrow-left { left: 6px; }
	.pdLightbox .mfp-arrow-right { right: 6px; }
	.pdLightbox .mfp-title strong { font-size: 1.6rem; }
}

/* Reel: the current screenshot in the centre, its neighbours scaled down and fading out towards the edges */
.pdReelOn .pdStageLink,
.pdReelOn .pdThumbs {
	display: none;
}

.pdReelWrap {
	position: relative;
	padding: 26px 0 4px;
	outline: none;
}

.pdReel {
	position: relative;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
	touch-action: pan-y;
}

.pdTrack {
	position: absolute;
	inset: 0;
}

.pdSlide {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(var(--pd-slide, .54) * 100%);
	aspect-ratio: var(--pd-ratio, 8 / 5);
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--hdr-border);
	border-radius: 12px;
	background: var(--hdr-accent-soft);
	box-shadow: 0 6px 22px rgba(0, 0, 0, .16);
	cursor: pointer;
	transition: transform 0.55s cubic-bezier(0.22, 0.8, 0.3, 1), opacity 0.55s ease;
}

body.dark .pdSlide {
	background: color-mix(in srgb, #fff 6%, var(--bg-color));
	box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
}

.pdSlide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	pointer-events: none;
	-webkit-user-drag: none;
}

.pdContain .pdSlide img {
	object-fit: contain;
	object-position: center;
}

.pdSlide[data-pos="0"] {
	z-index: 3;
	cursor: zoom-in;
	transform: translate(-50%, -50%);
}

.pdSlide[data-pos="-1"] {
	z-index: 2;
	opacity: .6;
	transform: translate(calc(-50% - 88%), -50%) scale(0.8);
}

.pdSlide[data-pos="1"] {
	z-index: 2;
	opacity: .6;
	transform: translate(calc(-50% + 88%), -50%) scale(0.8);
}

.pdSlide[data-pos="-2"] {
	z-index: 1;
	opacity: .25;
	transform: translate(calc(-50% - 150%), -50%) scale(0.64);
}

.pdSlide[data-pos="2"] {
	z-index: 1;
	opacity: .25;
	transform: translate(calc(-50% + 150%), -50%) scale(0.64);
}

.pdSlide[data-pos="far"] {
	z-index: 0;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, -50%) scale(0.5);
}

.pdSlide[data-pos="-1"]:hover,
.pdSlide[data-pos="1"]:hover,
.pdSlide:focus-visible {
	opacity: .9;
}

.pdNav {
	position: absolute;
	top: calc(50% - 14px);
	z-index: 5;
	width: 42px;
	height: 42px;
	margin-top: -21px;
	padding: 0;
	border: 1px solid var(--hdr-border);
	border-radius: 50%;
	background: var(--bg-color);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.dark .pdNav {
	background: #2b2c2f;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
}

.pdNav:hover,
.pdNav:focus-visible {
	transform: scale(1.08);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .24);
}

.pdNavPrev { left: 14px; }
.pdNavNext { right: 14px; }

.pdNav::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -2px;
	border-left: 2.5px solid var(--text-color);
	border-bottom: 2.5px solid var(--text-color);
	transform: rotate(45deg);
}

.pdNavNext::after {
	margin-left: -8px;
	transform: rotate(-135deg);
}

.pdDots {
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 0 0 14px;
}

.pdDot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--hdr-border);
	cursor: pointer;
	transition: width 0.25s ease, background-color 0.25s ease;
}

.pdDot:hover {
	background: var(--muted-text-color);
}

.pdDot.active {
	width: 26px;
	background: var(--hdr-accent);
}

body.dark .pdDot.active {
	background: #fff;
}

/* No card around the reel: the screenshots float on the page and fade into it at the edges */
.pdReelOn .pdStage,
body.dark .pdReelOn .pdStage {
	overflow: visible;
	border: 0;
	background: none;
	box-shadow: none;
}

.pdReelOn .pdStage figcaption {
	padding: 6px 18px 4px;
	text-align: center;
}

.pdStage figcaption.pdFadeIn {
	animation: pdFadeIn 0.35s ease-out;
}

/* The reel has no single image to hover, so the caption keeps its normal look */
.pdReelOn .pdStage:hover figcaption {
	background: none;
	color: var(--muted-text-color);
}

.pdReelOn .pdStage:hover figcaption strong {
	color: var(--text-color);
}

@media (max-width: 600px) {
	.pdSlide { width: 66%; }
	.pdSlide[data-pos="-1"] { transform: translate(calc(-50% - 80%), -50%) scale(0.78); }
	.pdSlide[data-pos="1"] { transform: translate(calc(-50% + 80%), -50%) scale(0.78); }
	.pdNav { width: 34px; height: 34px; margin-top: -17px; }
	.pdNavPrev { left: 6px; }
	.pdNavNext { right: 6px; }
}

@keyframes pdSlideNext {
	from { transform: translateX(100vw); }
	to { transform: none; }
}

@keyframes pdSlidePrev {
	from { transform: translateX(-100vw); }
	to { transform: none; }
}

@keyframes pdFadeIn {
	from { opacity: 0.35; }
	to { opacity: 1; }
}

.pdLightbox .mfp-figure.pdSlideNext {
	animation: pdSlideNext 0.5s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.pdLightbox .mfp-figure.pdSlidePrev {
	animation: pdSlidePrev 0.5s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.pdStageImg.pdFadeIn {
	animation: pdFadeIn 0.3s ease-out;
}

/* Language Tools page */
.pdBookmarklet {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 14px 0 0;
	padding: 12px 16px;
	border: 1px dashed var(--hdr-border);
	border-radius: 12px;
	background: color-mix(in srgb, var(--hdr-accent) 5%, transparent);
	font-size: 1.4rem;
	line-height: 1.45;
}

body.dark .pdBookmarklet {
	border-color: rgba(255, 255, 255, .25);
	background: rgba(255, 255, 255, .04);
}

.pdBookmarklet a {
	flex: none;
	cursor: grab;
	transition: transform 0.2s ease;
}

.pdBookmarklet a:hover {
	transform: scale(1.06) rotate(-3deg);
}

.pdBookmarklet strong,
.pdBookmarklet span {
	display: block;
}

.pdBookmarklet strong {
	color: var(--text-color);
}

.pdBookmarklet span {
	color: var(--muted-text-color);
}

.pdQuotes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.pdQuote {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 24px 26px 22px;
	border: 1px solid var(--hdr-border);
	border-radius: 14px;
	background: var(--bg-color);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 14px rgba(0, 0, 0, .04);
}

body.dark .pdQuote {
	background: color-mix(in srgb, #fff 4%, var(--bg-color));
	box-shadow: none;
}

.pdQuote blockquote {
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1.5rem;
	font-style: italic;
	line-height: 1.7;
	color: var(--text-color);
}

.pdQuote blockquote::before {
	content: '\201C';
	display: block;
	margin-bottom: -8px;
	font-size: 5rem;
	font-style: normal;
	line-height: 1;
	color: var(--hdr-accent);
	opacity: .5;
}

body.dark .pdQuote blockquote::before {
	color: #fff;
}

.pdQuote img {
	display: block;
	max-width: min(100%, 180px);
	height: auto;
	max-height: 40px;
}

body.dark .pdQuote img {
	padding: 6px 10px;
	border-radius: 8px;
	background: #f1f1f3;
}

/* Compact quotes: tighter cards for a longer list of press quotes */
.pdQuotesCompact {
	gap: 14px;
}

.pdQuotesCompact .pdQuote {
	gap: 10px;
	padding: 16px 20px 16px;
}

.pdQuotesCompact .pdQuote blockquote {
	font-size: 1.4rem;
	line-height: 1.6;
}

.pdQuotesCompact .pdQuote blockquote::before {
	margin-bottom: -18px;
	font-size: 3.6rem;
}

.pdQuotesCompact .pdQuote img {
	max-height: 28px;
}

.pdQuotesCompact .pdQuoteName {
	font-size: 1.7rem;
}

.pdQuotesCompact .pdQuoteNote {
	margin-top: -4px;
	font-size: 1.2rem;
	line-height: 1.5;
}

/* Publisher without a usable logo: a simple wordmark */
.pdQuoteName {
	color: var(--text-color);
	font-size: 2rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	text-decoration: none;
}

.pdQuoteName:hover {
	color: var(--hdr-accent);
	text-decoration: none;
}

/* English translation under a quote in another language */
.pdQuoteNote {
	margin: -6px 0 0;
	font-size: 1.3rem;
	line-height: 1.6;
	color: var(--muted-text-color);
}

.pdAdSlot .container {
	padding-top: 24px;
	padding-bottom: 8px;
}

/* Screenshots of differing shapes are letterboxed in the frame instead of being cropped */
.pdContain .pdStage a {
	background: var(--hdr-accent-soft);
}

body.dark .pdContain .pdStage a {
	background: color-mix(in srgb, #fff 6%, var(--bg-color));
}

.pdContain .pdStage img {
	object-fit: contain;
	object-position: center;
}

.pdThumbs5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.pdThumbs5 button {
	aspect-ratio: 8 / 5;
}

.pdThumbs5 img {
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.pdProse {
	margin-bottom: 26px;
	font-size: 1.6rem;
	line-height: 1.75;
	color: var(--text-color);
}

.pdProse p {
	margin: 0 0 12px;
	line-height: 1.75;
}

.pdProseImg {
	display: block;
	width: 100%;
	max-width: 602px;
	height: auto;
	border: 1px solid var(--hdr-border);
	border-radius: 12px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .06), 0 10px 26px rgba(0, 0, 0, .1);
}

.pdTopics {
	display: grid;
	gap: 20px;
}

.pdDefs {
	margin: 12px 0 0;
}

.pdDefs dt {
	margin: 16px 0 4px;
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--text-color);
}

.pdDefs dt:first-child {
	margin-top: 4px;
}

.pdDefs dd {
	margin: 0;
	font-size: 1.5rem;
	line-height: 1.7;
	color: var(--text-color);
}

.pdDefs a,
.pdCredits a,
.pdRevs a {
	color: var(--hdr-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pdRtl {
	direction: rtl;
	unicode-bidi: embed;
	font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', 'Urdu Naskh Asiatype', serif;
	font-size: 1.15em;
}

.pdTopics + .pdCredits {
	margin-top: 20px;
}

.pdCredits h3 {
	margin: 0 0 8px;
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted-text-color);
}

.pdCredits p {
	margin: 0 0 10px;
	font-size: 1.5rem;
	line-height: 1.7;
	color: var(--text-color);
}

.pdCredits p:last-child {
	margin-bottom: 0;
}

.pdRevs {
	max-width: 820px;
	margin: 0;
	padding: 0 0 0 26px;
	border-left: 2px solid var(--hdr-border);
	list-style: none;
}

.pdRevs > li {
	position: relative;
	margin: 0 0 22px;
}

.pdRevs > li::before {
	content: '';
	position: absolute;
	top: 9px;
	left: -33px;
	width: 12px;
	height: 12px;
	border: 3px solid var(--hdr-accent);
	border-radius: 50%;
	background: var(--bg-color);
}

body.dark .pdRevs > li::before {
	border-color: #fff;
}

.pdRevHead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
}

.pdRevVersion {
	padding: 3px 12px;
	border-radius: 999px;
	background: var(--hdr-accent-soft);
	color: var(--hdr-accent);
	font-size: 1.4rem;
	font-weight: 700;
}

body.dark .pdRevVersion {
	background: color-mix(in srgb, #fff 10%, var(--bg-color));
	color: #fff;
}

.pdRevDate {
	font-size: 1.4rem;
	color: var(--muted-text-color);
}

.pdRevNew {
	padding: 2px 9px;
	border-radius: 999px;
	background: #1a9e55;
	color: #fff;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.pdRevs ul {
	margin: 0;
	padding-left: 20px;
	list-style: disc;
}

.pdRevs li li {
	margin: 0 0 3px;
	font-size: 1.5rem;
	line-height: 1.65;
	color: var(--text-color);
}

.pdPanel {
	padding: 20px 24px;
	border: 1px solid var(--hdr-border);
	border-radius: 14px;
	background: var(--bg-color);
}

body.dark .pdPanel {
	background: color-mix(in srgb, #fff 4%, var(--bg-color));
}

/* The stats container holds floated Bootstrap columns: make it wrap them so the panel grows with its content */
.pdPanel > .row {
	display: flow-root;
}

.pdLoading {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
	font-size: 1.5rem;
	color: var(--muted-text-color);
}

.pdSpinner {
	width: 22px;
	height: 22px;
	border: 3px solid var(--hdr-border);
	border-top-color: var(--hdr-accent);
	border-radius: 50%;
	animation: pdSpin 0.8s linear infinite;
}

body.dark .pdSpinner {
	border-top-color: #fff;
}

@keyframes pdSpin {
	to { transform: rotate(360deg); }
}

/* Stats (rendered by the shared webstat plugin) */
.pdPanel .webDemographicsDiv {
	margin-top: 8px;
	border-radius: 12px;
	overflow: hidden;
}

.pdPanel .webDemographicsCountryDiv {
	margin-top: 8px;
}

.pdPanel .webDemoGraphCountryList {
	width: 100%;
	border: 1px solid var(--hdr-border);
	border-radius: 12px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: 1.4rem;
}

.pdPanel .webDemoGraphCountryList tr {
	border: 0;
	margin: 0;
}

.pdPanel .webDemoGraphCountryList td {
	padding: 9px 14px;
	color: var(--text-color);
	border-top: 1px solid var(--hdr-border);
}

.pdPanel .webDemoGraphCountryList td img {
	margin: 0 8px 0 0;
	vertical-align: -3px;
	border-radius: 2px;
}

.pdPanel .webDemoGraphCountryList .heading td {
	border-top: 0;
	background: color-mix(in srgb, var(--text-color) 4%, var(--bg-color));
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--muted-text-color);
}

.pdPanel .webDemoGraphCountryList .altRow {
	background: transparent;
}

.pdPanel .webDemoGraphCountryList .row td,
.pdPanel .webDemoGraphCountryList .altRow td {
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.pdPanel .webDemoGraphCountryList .row:hover td,
.pdPanel .webDemoGraphCountryList .altRow:hover td {
	background: color-mix(in srgb, var(--hdr-accent) 9%, transparent);
	color: var(--hdr-accent);
}

.pdPanel .webDemoGraphCountryList .row:hover td:first-child,
.pdPanel .webDemoGraphCountryList .altRow:hover td:first-child {
	box-shadow: inset 3px 0 0 var(--hdr-accent);
}

.pdPanel .webDemoGraphCountryList .footer td {
	background: color-mix(in srgb, var(--text-color) 4%, var(--bg-color));
	font-weight: 700;
}

body.dark .pdPanel .webDemoGraphCountryList .heading td,
body.dark .pdPanel .webDemoGraphCountryList .footer td {
	background: color-mix(in srgb, #fff 7%, var(--bg-color));
}

body.dark .pdPanel .webDemoGraphCountryList .row:hover td,
body.dark .pdPanel .webDemoGraphCountryList .altRow:hover td {
	background: color-mix(in srgb, #fff 12%, var(--bg-color));
	color: #fff;
}

body.dark .pdPanel .webDemoGraphCountryList .row:hover td:first-child,
body.dark .pdPanel .webDemoGraphCountryList .altRow:hover td:first-child {
	box-shadow: inset 3px 0 0 #fff;
}

/* Interactive stats extras (webstat.js RenderModern): summary, share bars, "you" tag */
.pdPanel .wsSummary {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 15px 16px;
	padding: 12px 18px 12px 14px;
	border: 1px solid color-mix(in srgb, var(--hdr-accent) 18%, var(--hdr-border));
	border-radius: 12px;
	background: color-mix(in srgb, var(--hdr-accent) 5%, var(--bg-color));
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

body.dark .pdPanel .wsSummary {
	border-color: rgba(255, 255, 255, .12);
	background: color-mix(in srgb, #fff 6%, var(--bg-color));
	box-shadow: none;
}

.pdPanel .wsSummaryIcon {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--hdr-accent) 12%, transparent);
	color: var(--hdr-accent);
}

body.dark .pdPanel .wsSummaryIcon {
	background: rgba(255, 255, 255, .1);
	color: #fff;
}

.pdPanel .wsSummary p {
	margin: 0;
	color: var(--muted-text-color);
	font-size: 1.6rem;
	line-height: 1.5;
}

.pdPanel .wsSummary b {
	color: var(--text-color);
	font-variant-numeric: tabular-nums;
}

.pdPanel .wsSummary p:first-child b.wsCount {
	color: var(--hdr-accent);
	font-size: 2.2rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

body.dark .pdPanel .wsSummary p:first-child b.wsCount {
	color: #fff;
}

.pdPanel .wsSummary img {
	position: relative;
	top: -1px;
	margin: 0 5px 0 2px;
	border-radius: 2px;
	vertical-align: middle;
}

.pdPanel .wsSummary .wsYouLine img {
	margin-left: 0;
}

.pdPanel .wsSep {
	margin: 0 10px;
	opacity: .6;
}

.pdPanel .wsSummary .wsYouLine {
	margin-top: 2px;
	font-size: 1.4rem;
	font-style: italic;
}

/* Mini pie of each row's share of the total, filling in when the panel scrolls into view */
@property --ws-w {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 0%;
}

.pdPanel .wsModern td:last-child {
	text-align: right;
	white-space: nowrap;
}

.pdPanel .wsModern b.wsCount {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.pdPanel .wsShare {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	min-width: 4.6em;
	margin-left: 8px;
	color: var(--muted-text-color);
	font-size: 1.15rem;
	font-variant-numeric: tabular-nums;
	vertical-align: -1px;
}

.pdPanel .wsPie {
	--ws-w: 0%;
	flex: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: conic-gradient(var(--hdr-accent) var(--ws-w), color-mix(in srgb, var(--hdr-accent) 16%, transparent) 0);
	transition: --ws-w 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--ws-i) * 70ms);
}

body.dark .pdPanel .wsPie {
	background: conic-gradient(#fff var(--ws-w), rgba(255, 255, 255, .16) 0);
}

.pdPanel .wsModern.wsIn .wsPie {
	--ws-w: var(--ws-p);
}

/* The countries after the top ten, summed up */
.pdPanel .wsModern .wsOthers td {
	color: var(--muted-text-color);
	font-style: italic;
}

.pdPanel .wsYou {
	margin-left: 4px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--hdr-accent);
	color: #fff;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: 1px;
}

body.dark .pdPanel .wsYou {
	background: #fff;
	color: #111;
}

/* A country clicked on the map lights up its row, like a hover */
.pdPanel .wsModern tr.wsHot td {
	background: color-mix(in srgb, var(--hdr-accent) 9%, transparent);
	color: var(--hdr-accent);
}

.pdPanel .wsModern tr.wsHot td:first-child {
	box-shadow: inset 3px 0 0 var(--hdr-accent);
}

body.dark .pdPanel .wsModern tr.wsHot td {
	background: color-mix(in srgb, #fff 12%, var(--bg-color));
	color: #fff;
}

body.dark .pdPanel .wsModern tr.wsHot td:first-child {
	box-shadow: inset 3px 0 0 #fff;
}

.pdPanel .wsModern tr:hover .wsShare,
.pdPanel .wsModern tr.wsHot .wsShare {
	color: inherit;
}

/* The map script sets 400px inline; on phones the world map is only that tall at its widest */
@media (max-width: 600px) {
	.pdPanel .webDemographicsDiv { height: 260px !important; }
	.pdPanel .wsSummary { align-items: flex-start; padding: 12px 14px; }
	.pdPanel .wsSummaryIcon { display: none; }
	.pdPanel .wsSep { display: none; }
	.pdPanel .wsSummary p > span:not(.wsSep) { display: block; }
	.pdPanel .wsSummary p:first-child b.wsCount { font-size: 1.9rem; }
}

@media (prefers-reduced-motion: reduce) {
	.pdPanel .wsPie { transition: none; }
}

@media (max-width: 900px) {
	.pdHeroGrid { grid-template-columns: minmax(0, 1fr); }
	.pdHighlights { grid-template-columns: 1fr; }
	.pdFeatures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pdQuotes { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	.pdHero .container { padding-top: 20px; padding-bottom: 24px; }
	.pdFeatures { grid-template-columns: 1fr; }
	.pdCard.pdWide { grid-column: auto; }
	.pdThumbs { gap: 8px; }
	.pdThumbs5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.pdSection .container { padding-top: 28px; padding-bottom: 32px; }
	.pdDownload { padding: 18px 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.mfp-fade.mfp-bg.pdLightbox, .mfp-fade.mfp-wrap.pdLightbox .mfp-content { transition: none; }
	.pdLightbox .mfp-figure.pdSlideNext, .pdLightbox .mfp-figure.pdSlidePrev, .pdStageImg.pdFadeIn, .pdReelOn .pdStage figcaption.pdFadeIn { animation: none; }
	.pdSlide, .pdNav, .pdDot { transition: none; }
	.pdHighlights li, .pdHighlights img { transition: none; }
	.pdHighlights li:hover, .pdHighlights li:hover img { transform: none; }
	.pdBadge, .pdBadge.pdGone::after, .pdGhost, .pdBtn, .pdCard, .pdThumbs button, .pdStage a::after, .pdThumbs button::after, .pdStage figcaption, .pdStage figcaption strong { transition: none; }
	.pdBtn:hover, .pdGhost:hover, .pdBadge:hover, .pdCard:hover, .pdThumbs button:hover { transform: none; }
	.pdSpinner { animation-duration: 2.4s; }
}

/* Swift MVC hero terminal (animated by swift-hero.js); always dark, like a real terminal */
.pdTerm {
	margin: 22px 0 0;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .06);
	border-radius: 14px;
	background: #0f141a;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 18px 40px rgba(15, 20, 26, .28);
	color: #d6deeb;
	font-family: ui-monospace, 'Cascadia Code', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace, 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji';
	font-size: 1.35rem;
	line-height: 1.65;
	text-align: left;
}

body.dark .pdTerm {
	border-color: rgba(255, 255, 255, .12);
	background: #0b0f14;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

.pdTermBar {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 9px 12px 9px 14px;
	border-bottom: 1px solid rgba(255, 255, 255, .06);
	background: rgba(255, 255, 255, .04);
}

.pdTermBar i {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #ff5f57;
}

.pdTermBar i:nth-child(2) { background: #febc2e; }
.pdTermBar i:nth-child(3) { background: #28c840; }

.pdTermBar span {
	flex: 1;
	color: #7d8a99;
	font-size: 1.2rem;
	text-align: center;
}

.pdTermReplay {
	padding: 5px;
	border: 0;
	border-radius: 6px;
	background: none;
	color: #7d8a99;
	line-height: 0;
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.pdTermReplay:hover,
.pdTermReplay:focus-visible {
	background: rgba(255, 255, 255, .08);
	color: #fff;
}

.pdTermBody {
	padding: 14px 18px 12px;
	transition: opacity 0.35s ease;
}

.pdTermBody.pdTermFade {
	opacity: 0;
}

.pdTerm.is-playing .pdTermBody {
	cursor: pointer;
}

.pdTermLn {
	position: relative;
	margin: 0;
	padding-left: 1.6em;
	white-space: pre-wrap;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Until the demo reaches a line it keeps its space, so the terminal never changes height */
.pdTerm.is-armed .pdTermLn:not(.is-on) {
	opacity: 0;
	transform: translateY(4px);
}

.pdTermLn::before {
	position: absolute;
	left: 0;
}

.pdTermYou {
	margin-top: 8px;
	color: #fff;
}

.pdTermYou:first-child {
	margin-top: 0;
}

.pdTermYou::before {
	content: '\203A';
	color: #7fdbca;
	font-weight: 700;
}

.pdTermAi {
	color: #c3cee3;
}

.pdTermAi::before {
	content: '\25C6';
	color: #c792ea;
	font-size: .8em;
	line-height: 2.05;
}

.pdTermPkg {
	overflow: hidden;
	color: #addb67;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.pdTermPkg em {
	color: #f78c6c;
	font-style: normal;
}

.pdTermDirs {
	color: #82aaff;
}

.pdTerm .pdTermQuote {
	margin: 6px 0;
	padding: 0 0 0 1.6em;
	border: 0;
	color: #8b9bb4;
	font-size: inherit;
	font-style: italic;
	line-height: inherit;
}

.pdTermQuote::before {
	content: '\2502';
	color: #3b4656;
	font-style: normal;
}

.pdTermQuote cite {
	color: #637083;
	font-style: normal;
	white-space: nowrap;
}

.pdTermQuote cite::before {
	content: '\2014\00A0';
}

.pdTermOk {
	margin-top: 2px;
	color: #22d36b;
	font-weight: 700;
}

.pdTermBanana {
	display: inline-block;
}

.pdTermPkg span,
.pdTermBanana {
	font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
}

.pdTerm.is-armed .pdTermOk.is-on .pdTermBanana {
	animation: pdBananaHop 0.6s ease 0.3s 2;
}

@keyframes pdBananaHop {
	40% { transform: translateY(-6px) rotate(-12deg); }
}

/* Typing: the text still to come stays in place, hidden, behind a block caret */
.pdTermR {
	visibility: hidden;
}

.is-typing .pdTermT::after {
	content: '';
	display: inline-block;
	width: .55em;
	height: 1.15em;
	margin-right: -.55em;
	vertical-align: -.2em;
	background: currentColor;
	opacity: .8;
	animation: pdCaret 1s steps(1) infinite;
}

@keyframes pdCaret {
	50% { opacity: 0; }
}

.pdTermStatus {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 9px 18px;
	border-top: 1px solid rgba(255, 255, 255, .06);
	background: rgba(255, 255, 255, .03);
	color: #7d8a99;
	font-size: 1.2rem;
}

.pdTermStatus b {
	color: #d6deeb;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.pdTermMeter {
	flex: 1;
	min-width: 60px;
	height: 6px;
	overflow: hidden;
	border-radius: 99px;
	background: rgba(255, 255, 255, .08);
}

.pdTermMeter i {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: #22d36b;
	transform: scaleX(.015);
	transform-origin: left;
	transition: background-color 0.4s ease;
}

.pdTermMeter.pdTermHeavy i {
	background: linear-gradient(90deg, #febc2e, #ff5f57);
}

/* Quick start steps in the download box */
.pdFacts:has(+ .pdSteps) {
	margin-bottom: 0;
}

.pdSteps {
	margin: 18px 0 auto;
	padding: 14px 0 0;
	border-top: 1px solid var(--hdr-border);
	counter-reset: pdStep;
	list-style: none;
	font-size: 1.4rem;
	line-height: 1.5;
	color: var(--muted-text-color);
}

.pdSteps li {
	position: relative;
	margin: 0 0 10px;
	padding-left: 36px;
	counter-increment: pdStep;
}

.pdSteps li::before {
	content: counter(pdStep);
	position: absolute;
	left: 0;
	top: -1px;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--hdr-accent-soft);
	color: var(--hdr-accent);
	font-size: 1.2rem;
	font-weight: 700;
}

body.dark .pdSteps li::before {
	background: rgba(255, 255, 255, .1);
	color: #fff;
}

.pdSteps strong {
	color: var(--text-color);
}

.pdSteps code {
	padding: 1px 5px;
	border-radius: 5px;
	background: var(--hdr-accent-soft);
	color: var(--text-color);
	font-size: .95em;
}

body.dark .pdSteps code {
	background: rgba(255, 255, 255, .1);
}

.pdSrOnly {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* FAQ: native details/summary accordion */
.pdFaq {
	display: grid;
	gap: 12px;
}

.pdFaq details {
	border: 1px solid var(--hdr-border);
	border-radius: 12px;
	background: var(--bg-color);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 14px rgba(0, 0, 0, .04);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.dark .pdFaq details {
	background: color-mix(in srgb, #fff 4%, var(--bg-color));
	box-shadow: none;
}

.pdFaq details:hover,
.pdFaq details[open] {
	border-color: color-mix(in srgb, var(--hdr-accent) 45%, var(--hdr-border));
}

.pdFaq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	color: var(--text-color);
	font-size: 1.7rem;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.pdFaq summary::-webkit-details-marker {
	display: none;
}

.pdFaq summary::after {
	content: '';
	flex: none;
	width: 10px;
	height: 10px;
	margin-top: -4px;
	border-right: 2px solid var(--muted-text-color);
	border-bottom: 2px solid var(--muted-text-color);
	transform: rotate(45deg);
	transition: transform 0.25s ease;
}

.pdFaq details[open] summary::after {
	margin-top: 4px;
	transform: rotate(-135deg);
}

.pdFaq details > div {
	padding: 0 20px 6px;
	color: var(--text-color);
	font-size: 1.5rem;
	line-height: 1.7;
}

.pdFaq p {
	margin: 0 0 12px;
}

.pdFaq a {
	color: var(--hdr-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pdFaq blockquote {
	margin: 4px 0 14px;
	padding: 10px 16px;
	border: 0;
	border-left: 3px solid var(--hdr-accent);
	border-radius: 0 10px 10px 0;
	background: var(--hdr-accent-soft);
	font-size: 1.5rem;
	font-style: italic;
	line-height: 1.65;
}

body.dark .pdFaq blockquote {
	border-left-color: rgba(255, 255, 255, .5);
	background: color-mix(in srgb, #fff 6%, var(--bg-color));
}

@media (max-width: 600px) {
	.pdTerm { font-size: 1.15rem; }
	.pdTermBody { padding: 12px 12px 10px; }
	.pdTermStatus { gap: 10px; padding: 8px 12px; }
	.pdFaq summary { padding: 14px 16px; font-size: 1.6rem; }
	.pdFaq details > div { padding: 0 16px 4px; }
}

@media (prefers-reduced-motion: reduce) {
	.pdTerm.is-armed .pdTermLn:not(.is-on) { opacity: 1; transform: none; }
	.pdTermLn, .pdTermBody, .pdFaq summary::after { transition: none; }
	.pdTerm.is-armed .pdTermOk.is-on .pdTermBanana, .is-typing .pdTermT::after { animation: none; }
}

/* "Download started" toast (notification plugin, message from showDownloadToastOnClick).
   The body prefix outranks notification.css, which loads later; other pages keep the plugin look. */
body .ns-box.ns-attached {
	top: auto;
	right: 24px;
	bottom: 24px;
	left: auto;
	z-index: 1000;
	width: calc(100% - 48px);
	max-width: 400px;
	padding: 16px 44px 18px 16px;
	overflow: hidden;
	border: 1px solid var(--hdr-border);
	border-radius: 14px;
	background: var(--bg-color);
	box-shadow: 0 4px 10px rgba(0, 0, 0, .06), 0 18px 44px rgba(0, 0, 0, .18);
	color: var(--text-color);
	font-size: 1.4rem;
	line-height: 1.55;
}

body.dark .ns-box.ns-attached {
	border-color: rgba(255, 255, 255, .14);
	background: color-mix(in srgb, #fff 7%, var(--bg-color));
	box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}

body .ns-box.ns-attached.ns-show {
	animation: pdToastIn 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}

body .ns-box.ns-attached.ns-hide {
	animation: pdToastOut 0.25s ease both;
	animation-direction: normal;
}

@keyframes pdToastIn {
	from { opacity: 0; transform: translateY(24px) scale(.96); }
	to { opacity: 1; transform: none; }
}

@keyframes pdToastOut {
	from { opacity: 1; transform: none; }
	to { opacity: 0; transform: translateY(16px) scale(.98); }
}

.pdToast {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.pdToastIcon {
	display: grid;
	flex: none;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #1f9d55;
	color: #fff;
	box-shadow: 0 4px 12px rgba(31, 157, 85, .35);
}

.pdToast strong {
	display: block;
	margin-bottom: 2px;
	font-size: 1.6rem;
	color: var(--text-color);
}

.pdToast div > span {
	color: var(--muted-text-color);
}

body .ns-box .pdToast a {
	color: var(--hdr-accent);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	opacity: 1;
}

/* Thin bar counting down until the toast closes itself (the plugin ttl is 8s) */
.pdToastTimer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--hdr-accent);
	opacity: .6;
	transform-origin: left;
	animation: pdToastTimer 8s linear forwards;
}

@keyframes pdToastTimer {
	from { transform: scaleX(1); }
	to { transform: scaleX(0); }
}

body .ns-box.ns-attached .ns-close {
	top: 12px;
	right: 12px;
	width: 24px;
	height: 24px;
	border-radius: 6px;
	transition: background-color 0.2s ease;
}

body .ns-box.ns-attached .ns-close:hover {
	background: var(--hdr-hover);
}

body .ns-box.ns-attached .ns-close::before,
body .ns-box.ns-attached .ns-close::after,
body .ns-box.ns-attached .ns-close:hover::before,
body .ns-box.ns-attached .ns-close:hover::after {
	width: 2px;
	height: 50%;
	background: var(--muted-text-color);
}

/* Room above the stats panel for the sticky header and section heading when the toast link scrolls to it */
#downloadDemographics {
	scroll-margin-top: 150px;
}

@media (max-width: 600px) {
	body .ns-box.ns-attached {
		right: 12px;
		bottom: 12px;
		width: calc(100% - 24px);
		max-width: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* A near-instant fade, not none: the plugin removes the toast when its animation ends */
	body .ns-box.ns-attached.ns-show,
	body .ns-box.ns-attached.ns-hide { animation-duration: 0.01s; }
	.pdToastTimer { animation: none; display: none; }
}

/* Jack Sparrow Compass hero (driven by compass-hero.js): the card turns inside the octagonal case */
.pdCompass {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	align-items: center;
	gap: 26px;
	margin: 22px 0 0;
	padding: 18px 24px 18px 18px;
	border: 1px solid var(--hdr-border);
	border-radius: 14px;
	background: var(--bg-color);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 14px rgba(0, 0, 0, .04);
}

body.dark .pdCompass {
	background: color-mix(in srgb, #fff 4%, var(--bg-color));
	box-shadow: none;
}

.pdCompassBox {
	position: relative;
	aspect-ratio: 1;
	filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .28));
}

.pdCompassFrame {
	display: block;
	width: 100%;
	height: 100%;
	clip-path: polygon(19.5% .6%, 80% .6%, 99.4% 20.5%, 99.4% 78%, 78.5% 99.4%, 20.5% 99.4%, .6% 78%, .6% 20%);
}

.pdCompassCard {
	position: absolute;
	top: 50.3%;
	left: 49.6%;
	width: 75.8%;
	height: 75.8%;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
	will-change: transform;
}

.pdCompass figcaption {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.pdCompassLabel {
	color: var(--muted-text-color);
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.pdCompassTarget {
	color: var(--text-color);
	font-size: 2.2rem;
	font-weight: 700;
	line-height: 1.3;
}

.pdCompassAz {
	color: var(--muted-text-color);
	font-size: 1.4rem;
}

.pdCompassAz b {
	color: var(--hdr-accent);
	font-variant-numeric: tabular-nums;
}

body.dark .pdCompassAz b {
	color: #fff;
}

.pdCompassHint {
	margin-top: 8px;
	color: var(--muted-text-color);
	font-size: 1.35rem;
	font-style: italic;
	line-height: 1.55;
}

.pdPlayLogo {
	flex: none;
	margin: 0 6px 0 4px;
}

/* Phone screenshots: narrower, taller slides in the reel */
.pdPhones {
	--pd-slide: .28;
}

.pdPhones .pdSlide {
	border-radius: 18px;
	background: #111;
}

.pdPhones .pdSlide[data-pos="-1"] { transform: translate(calc(-50% - 100%), -50%) scale(0.86); }
.pdPhones .pdSlide[data-pos="1"] { transform: translate(calc(-50% + 100%), -50%) scale(0.86); }
.pdPhones .pdSlide[data-pos="-2"] { transform: translate(calc(-50% - 180%), -50%) scale(0.72); }
.pdPhones .pdSlide[data-pos="2"] { transform: translate(calc(-50% + 180%), -50%) scale(0.72); }

@media (max-width: 600px) {
	.pdCompass { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 14px; }
	.pdCompassTarget { font-size: 1.8rem; }
	.pdCompassHint { font-size: 1.25rem; }
	.pdPhones { --pd-slide: .5; }
}

/* Line icons (SVG) in the hero highlights and feature tiles */
.pdHighlights .pdMini {
	grid-column: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--pd-icon, var(--hdr-accent)) 75%, #fff), var(--pd-icon, var(--hdr-accent)));
	color: #fff;
	transition: transform 0.25s ease;
}

.pdHighlights li:hover .pdMini {
	transform: scale(1.1) rotate(-4deg);
}

.pdMini svg,
.pdIcon svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.pdIcon svg {
	width: 28px;
	height: 28px;
	color: var(--hdr-accent);
}

.pdIconSolid svg {
	color: #fff;
}

/* Responsive 16:9 video embed */
.pdVideo {
	position: relative;
	max-width: 800px;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid var(--hdr-border);
	border-radius: 14px;
	background: #000;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}

.pdVideo iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

body.dark .pdVideo {
	box-shadow: none;
}