/* ==========================================================================
 * "Old way vs the Prosyo way" comparison section (prosyo/versus)
 *
 * Built on the template tokens (--background, --primary, --secondary,
 * --tertiary, Inter, 24px radii). Every element is fully visible without
 * JavaScript; versus.js adds .pv-armed and then .is-in to play the entrance,
 * so nothing is ever hidden for no-JS, editor or reduced-motion visitors.
 * ========================================================================== */

@property --pv-angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

.pv-section {
	--pv-line: var(--stoke, #ffffff1a);
	--pv-card: linear-gradient(180deg, #ffffff0a, #ffffff03);
	--pv-muted: #a5a2b8;
	--pv-soft: #cfcbe0;
	--pv-a: var(--primary, #b638ff);
	--pv-b: var(--tertiary, #7350ff);
	--pv-c: var(--secondary, #ff75d4);
	--pv-good: #5ee6a8;
	--pv-bad: #ff5c7a;
	--pv-ease: cubic-bezier(.2, .8, .2, 1);
	--pv-gap: 22px;
	position: relative;
	isolation: isolate;
	overflow: clip;
	color: var(--text, #f3f3f3);
	font-family: Inter, sans-serif;
}

.pv-section *,
.pv-section *::before,
.pv-section *::after { box-sizing: border-box; }

.pv-section p { margin: 0; }

.pv-section .section-summery a {
	color: var(--quinary, #e9c4ff);
	text-decoration: underline;
	text-decoration-color: #b638ff80;
	text-underline-offset: 3px;
	transition: color .25s ease, text-decoration-color .25s ease;
}
.pv-section .section-summery a:hover { color: #fff; text-decoration-color: var(--pv-c); }

/* ---------- Ambient background ---------- */
.pv-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pv-orb { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; }
.pv-orb-a {
	width: min(560px, 70vw); aspect-ratio: 1; top: 28%; right: 4%;
	background: radial-gradient(circle, #7350ff 0%, transparent 65%); opacity: .45;
	animation: pv-drift 14s ease-in-out infinite alternate;
}
.pv-orb-b {
	width: min(420px, 60vw); aspect-ratio: 1; top: 48%; right: 22%;
	background: radial-gradient(circle, #ff75d4 0%, transparent 65%); opacity: .18;
	animation: pv-drift 18s ease-in-out -6s infinite alternate-reverse;
}
.pv-grid {
	position: absolute; inset: 0;
	background-image: linear-gradient(#ffffff09 1px, transparent 1px), linear-gradient(90deg, #ffffff09 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 55%, #000 20%, transparent 75%);
	mask-image: radial-gradient(ellipse 60% 55% at 50% 55%, #000 20%, transparent 75%);
}

/* ---------- Board ---------- */
.pv-board {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
	align-items: stretch;
	width: 100%;
	margin: clamp(40px, 5vw, 64px) 0 0;
}
.pv-board > .pv-card:only-child { grid-column: 1 / -1; max-width: 540px; margin-inline: auto; width: 100%; }

/* ---------- Cards ---------- */
.pv-card {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 30px clamp(18px, 2.4vw, 30px) 30px;
	border-radius: var(--_border-radius---br-slim, 24px);
	border: 1px solid var(--pv-line);
	background: var(--pv-card);
	text-align: center;
	transition: transform .5s var(--pv-ease), box-shadow .5s var(--pv-ease);
}

/* Pointer spotlight; --mx / --my come from versus.js on fine pointers. */
.pv-card::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	border-radius: inherit;
	background: radial-gradient(380px circle at var(--mx, 50%) var(--my, -30%), #b638ff1c, transparent 62%);
	opacity: 0;
	transition: opacity .45s ease;
	pointer-events: none;
}
.pv-card:hover::before { opacity: 1; }

.pv-card--old {
	background: linear-gradient(180deg, #ffffff08, #ffffff02);
}
.pv-card--old::before { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, -30%), #ff5c7a14, transparent 62%); }

/* The Prosyo card: rotating gradient beam around the border. */
.pv-card--new {
	border-color: transparent;
	background:
		linear-gradient(180deg, #140a33 0%, #0a0522 55%, #07031a 100%) padding-box,
		conic-gradient(from var(--pv-angle), #7350ff, #b638ff 18%, #ff75d4 30%, #7350ff40 42%, #7350ff26 70%, #b638ff 88%, #7350ff) border-box;
	box-shadow: 0 40px 90px -40px #b638ff8c, 0 0 0 1px #b638ff14;
	animation: pv-spin 7s linear infinite;
}
.pv-spot {
	position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
	background: radial-gradient(120% 60% at 50% 0%, #7350ff2e, transparent 60%);
}

/* ---------- Card head ---------- */
.pv-card-head { display: flex; align-items: center; justify-content: center; gap: 10px; }
.pv-card-title {
	margin: 0;
	color: var(--white, #fff);
	font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -.02em;
}
.pv-head-badge { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; }
.pv-head-badge svg { width: 22px; height: 22px; }
.pv-head-badge.is-bad { color: var(--pv-bad); }
.pv-head-badge.is-good { color: var(--pv-good); }

/* ---------- Competitor logos ---------- */
.pv-logos {
	display: flex; flex-flow: row wrap; justify-content: center; gap: 12px;
	width: 100%; margin: 20px 0 0; padding: 0; list-style: none;
}
.pv-logos li { animation: pv-bob 4.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.05s); }
.pv-logo {
	position: relative;
	display: grid; place-items: center;
	width: 52px; height: 52px;
	border-radius: 14px;
	background: #f7f5ff;
	border: 1px solid #ffffff33;
	box-shadow: 0 10px 24px -14px #000, inset 0 0 0 1px #0000000d;
	outline: none;
	text-decoration: none;
	transition: transform .4s var(--pv-ease), box-shadow .4s var(--pv-ease);
}
.pv-logo-img { width: 32px; height: 32px; object-fit: contain; border-radius: 8px; filter: grayscale(.25) saturate(.9); transition: filter .35s ease; }
.pv-logo:hover,
.pv-logo:focus-visible {
	transform: translateY(-4px) scale(1.08);
	box-shadow: 0 16px 34px -14px #b638ffaa, 0 0 0 2px #b638ff;
	z-index: 2;
}
.pv-logo:hover .pv-logo-img,
.pv-logo:focus-visible .pv-logo-img { filter: none; }

/* Name tooltip */
.pv-tip {
	position: absolute; left: 50%; bottom: calc(100% + 12px);
	display: inline-flex; align-items: center; gap: 8px;
	padding: 7px 11px;
	border-radius: 10px;
	background: #1b1036;
	border: 1px solid #b638ff66;
	box-shadow: 0 14px 34px -12px #000c, 0 0 24px -8px #b638ff80;
	color: #fff; font-size: 13px; line-height: 1.2; font-weight: 600; white-space: nowrap;
	opacity: 0; pointer-events: none;
	transform: translate(-50%, 6px) scale(.92);
	transform-origin: 50% 100%;
	transition: opacity .25s ease, transform .3s var(--pv-ease);
}
.pv-tip::after {
	content: ""; position: absolute; left: 50%; top: 100%;
	width: 10px; height: 10px; margin: -5px 0 0 -5px;
	background: #1b1036;
	border-right: 1px solid #b638ff66; border-bottom: 1px solid #b638ff66;
	transform: rotate(45deg);
}
.pv-tip-cta { display: inline-flex; align-items: center; gap: 3px; color: var(--quinary, #e9c4ff); font-weight: 500; font-size: 12px; }
.pv-tip-cta svg { width: 13px; height: 13px; }
.pv-logo:hover .pv-tip,
.pv-logo:focus-visible .pv-tip { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* ---------- Agent ---------- */
.pv-agent { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 18px; }
.pv-avatar {
	position: relative; display: grid; place-items: center;
	width: 72px; height: 72px; border-radius: 22px;
	background: radial-gradient(circle at 50% 35%, #2c1660, #0d0627 70%);
	box-shadow: 0 16px 40px -12px #7350ffcc, inset 0 0 0 1px #ffffff14;
}
.pv-avatar::before {
	content: ""; position: absolute; inset: -18px; z-index: -2; border-radius: 50%;
	background: radial-gradient(circle, #b638ff73 0%, #7350ff33 45%, transparent 70%);
	filter: blur(6px);
	animation: pv-halo 3.2s ease-in-out infinite;
}
.pv-avatar-ring {
	position: absolute; inset: -2px; z-index: -1; border-radius: 24px;
	background: conic-gradient(from var(--pv-angle), #7350ff, #ff75d4, #b638ff, #7350ff);
	animation: pv-spin 4s linear infinite;
}
.pv-avatar-img {
	width: 46px; height: 46px; object-fit: contain;
	filter: drop-shadow(0 0 8px #b638ffcc) drop-shadow(0 0 18px #ff75d466);
	animation: pv-glow 3.2s ease-in-out infinite;
}
.pv-avatar-mark { display: grid; place-items: center; color: #fff; filter: drop-shadow(0 0 8px #b638ffcc); }
.pv-avatar-mark svg { width: 26px; height: 26px; }
.pv-status {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 4px 11px; border-radius: 999px;
	background: #5ee6a814; border: 1px solid #5ee6a840;
	color: #b9f5da; font-size: 12px; font-weight: 500; line-height: 1.5;
}
.pv-status-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--pv-good); }
.pv-status-dot::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--pv-good);
	animation: pv-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}

/* ---------- Rule ---------- */
.pv-rule {
	display: block; width: 100%; height: 1px; margin: 24px 0 26px;
	background: linear-gradient(90deg, transparent, #ffffff26, transparent);
}

/* ---------- Flow ---------- */
.pv-flow {
	display: flex; flex-direction: column; align-items: center; gap: var(--pv-gap);
	width: 100%; margin: 0; padding: 0; list-style: none;
}
.pv-step {
	position: relative;
	display: flex; align-items: center; gap: 14px;
	width: 100%; max-width: 440px;
	padding: 13px 16px;
	border-radius: 14px;
	border: 1px solid var(--pv-line);
	background: #ffffff07;
	text-align: left;
	transition: transform .35s var(--pv-ease), border-color .35s ease, background-color .35s ease, opacity .6s ease;
}
.pv-step:hover { transform: translateY(-2px); border-color: #ffffff33; }

/* Connector to the previous step */
.pv-step + .pv-step::before {
	content: "";
	position: absolute; left: calc(50% - 1px); bottom: 100%;
	width: 2px; height: calc(var(--pv-gap) + 2px);
	background: #ffffff1f;
	transform-origin: 50% 0;
}
.pv-card--new .pv-step + .pv-step::before { background: linear-gradient(180deg, #7350ff, #b638ff); }
.pv-card--old .pv-step.is-danger::before { background: repeating-linear-gradient(180deg, var(--pv-bad) 0 4px, transparent 4px 7px); }
.pv-card--old .pv-step.is-muted::before { background: repeating-linear-gradient(180deg, #ffffff26 0 3px, transparent 3px 7px); }
.pv-card--new .pv-step.is-success::before,
.pv-card--new .pv-step.is-win::before { background: linear-gradient(180deg, #b638ff, var(--pv-good)); }

/* Signal travelling down the Prosyo connectors */
.pv-card--new .pv-step + .pv-step::after {
	content: "";
	position: absolute; left: calc(50% - 3px); bottom: calc(100% + var(--pv-gap) - 3px);
	width: 6px; height: 6px; border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 8px 2px #ff75d4, 0 0 18px 4px #b638ff99;
	opacity: 0;
	animation: pv-signal 2.8s ease-in infinite;
	animation-delay: calc(var(--i, 0) * .45s);
}

.pv-step-glow { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.pv-step-icon {
	position: relative;
	display: grid; place-items: center; flex: none;
	width: 36px; height: 36px; border-radius: 10px;
	background: #ffffff0d; border: 1px solid #ffffff14;
	color: var(--pv-soft);
}
.pv-step-icon svg { width: 18px; height: 18px; }
.pv-step-body { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pv-step-title { color: #fff; font-size: 14.5px; line-height: 1.35; font-weight: 600; letter-spacing: -.01em; }
.pv-step-text { color: var(--pv-muted); font-size: 13px; line-height: 1.45; }

/* Tones */
.pv-step.is-info {
	border-color: #7350ff66;
	background: linear-gradient(90deg, #7350ff2b, #7350ff0a);
	box-shadow: inset 3px 0 0 #8f74ff;
}
.pv-step.is-info .pv-step-icon { color: #cbbcff; background: #7350ff2e; border-color: #7350ff55; }

.pv-step.is-danger {
	border-color: #ff5c7a66;
	background: linear-gradient(90deg, #ff5c7a24, #ff5c7a08);
	box-shadow: inset 3px 0 0 var(--pv-bad);
}
.pv-step.is-danger .pv-step-icon { color: #ff8fa3; background: #ff5c7a24; border-color: #ff5c7a55; }
.pv-step.is-danger .pv-step-text { color: #ff9cae; }

.pv-step.is-muted { opacity: .58; filter: saturate(.4); }
.pv-step.is-muted:hover { opacity: .8; }

.pv-step.is-success {
	border-color: #5ee6a85c;
	background: linear-gradient(90deg, #5ee6a81f, #5ee6a807);
	box-shadow: inset 3px 0 0 var(--pv-good);
}
.pv-step.is-success .pv-step-icon { color: #8ff0c3; background: #5ee6a81f; border-color: #5ee6a84d; }

.pv-step.is-win {
	border-color: #5ee6a8a6;
	background: linear-gradient(120deg, #5ee6a833, #5ee6a80f 60%, #7350ff14);
	box-shadow: 0 0 0 1px #5ee6a826, 0 18px 48px -18px #5ee6a8b3;
	transform: scale(1.03);
}
.pv-step.is-win:hover { transform: scale(1.03) translateY(-2px); }
.pv-step.is-win .pv-step-icon { color: #062a1c; background: var(--pv-good); border-color: transparent; box-shadow: 0 0 18px -2px #5ee6a8; }
.pv-step.is-win .pv-step-text { color: #b9f5da; }
.pv-step.is-win .pv-step-glow::after {
	content: "";
	position: absolute; top: -20%; bottom: -20%; left: -40%; width: 35%;
	background: linear-gradient(100deg, transparent, #ffffff40, transparent);
	transform: skewX(-18deg) translateX(-120%);
	animation: pv-shine 3.6s ease-in-out 1.2s infinite;
}

/* ---------- Reply demo ---------- */
.pv-thread {
	display: flex; flex-direction: column; gap: 10px;
	width: 100%; max-width: 440px;
	margin-top: auto; padding: 16px;
	border-radius: 16px;
	border: 1px dashed #ffffff1f;
	background: #00000026;
	text-align: left;
}
.pv-msg {
	position: relative;
	max-width: 88%;
	padding: 10px 13px;
	border-radius: 14px;
	font-size: 13.5px; line-height: 1.45;
}
.pv-msg.is-them {
	align-self: flex-start;
	border-bottom-left-radius: 4px;
	background: #ffffff12; border: 1px solid #ffffff14;
	color: var(--pv-soft);
}
.pv-msg.is-us {
	align-self: flex-end;
	margin-left: auto;
	border-bottom-right-radius: 4px;
	background: linear-gradient(135deg, #7350ff, #b638ff);
	color: #fff;
	box-shadow: 0 12px 28px -14px #b638ffcc;
}
.pv-reply-slot { position: relative; display: flex; justify-content: flex-end; }
.pv-typing {
	position: absolute; right: 0; top: 0;
	display: none; gap: 4px; align-items: center;
	padding: 12px 14px; border-radius: 14px; border-bottom-right-radius: 4px;
	background: #7350ff40;
}
.pv-typing i { width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: .5; animation: pv-dot 1s ease-in-out infinite; }
.pv-typing i:nth-child(2) { animation-delay: .15s; }
.pv-typing i:nth-child(3) { animation-delay: .3s; }

.pv-wait,
.pv-outcome {
	display: inline-flex; align-items: center; gap: 7px;
	font-size: 12.5px; line-height: 1.4; font-weight: 500;
}
.pv-wait { color: #ffb4c1; }
.pv-wait svg,
.pv-outcome svg { width: 15px; height: 15px; flex: none; }
.pv-wait b { font-weight: 700; font-variant-numeric: tabular-nums; }
.pv-outcome { align-self: flex-start; padding: 5px 10px; border-radius: 999px; }
.pv-outcome.is-bad { color: #ff9cae; background: #ff5c7a1a; border: 1px solid #ff5c7a40; }
.pv-outcome.is-good { align-self: flex-end; color: #b9f5da; background: #5ee6a81a; border: 1px solid #5ee6a84d; }

/* ---------- VS badge ---------- */
.pv-vs { position: relative; display: flex; align-items: center; justify-content: center; z-index: 3; }
.pv-vs-badge {
	position: relative;
	display: grid; place-items: center;
	width: 52px; height: 52px; border-radius: 50%;
	background: radial-gradient(circle at 30% 25%, #2a1658, #0b0522);
	border: 1px solid #b638ff66;
	box-shadow: 0 0 0 6px var(--background, #030014), 0 0 30px -4px #b638ffaa;
	color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .06em;
}
.pv-vs-ring {
	position: absolute; inset: -9px; border-radius: 50%;
	border: 1px dashed #b638ff73;
	animation: pv-rotate 14s linear infinite;
}

/* ---------- CTA ---------- */
.pv-cta { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: clamp(40px, 5vw, 56px); text-align: center; }
.pv-cta-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.pv-trust {
	display: flex; flex-flow: row wrap; justify-content: center; gap: 8px 22px;
	margin: 0; padding: 0; list-style: none;
	color: var(--pv-muted); font-size: 14px; line-height: 1.5;
}
.pv-trust li { display: inline-flex; align-items: center; gap: 7px; }
.pv-trust svg { width: 15px; height: 15px; color: var(--pv-good); flex: none; }

/* ==========================================================================
 * Entrance (only when versus.js has armed the section)
 * ========================================================================== */

.pv-armed .pv-card { opacity: 0; transition: opacity .8s ease, transform .9s var(--pv-ease), box-shadow .5s var(--pv-ease); }
.pv-armed .pv-card--old { transform: translateX(-28px); }
.pv-armed .pv-card--new { transform: translateX(28px); transition-delay: .15s; }
.pv-armed.is-in .pv-card { opacity: 1; transform: none; }

.pv-armed .pv-vs-badge { opacity: 0; transform: scale(.4) rotate(-120deg); transition: opacity .5s ease .35s, transform .8s cubic-bezier(.34, 1.56, .64, 1) .35s; }
.pv-armed.is-in .pv-vs-badge { opacity: 1; transform: none; }

.pv-armed .pv-logos li { opacity: 0; translate: 0 10px; transition: opacity .5s ease, translate .6s var(--pv-ease); transition-delay: calc(.35s + var(--i, 0) * 90ms); }
.pv-armed.is-in .pv-logos li { opacity: 1; translate: 0 0; }

.pv-armed .pv-step {
	opacity: 0;
	translate: 0 16px;
	transition: opacity .6s ease, translate .7s var(--pv-ease), transform .35s var(--pv-ease), border-color .35s ease, background-color .35s ease;
	transition-delay: calc(var(--pv-base, .5s) + var(--i, 0) * 170ms);
}
.pv-armed .pv-card--new { --pv-base: .75s; }
.pv-armed.is-in .pv-step { opacity: 1; translate: 0 0; }
.pv-armed.is-in .pv-step.is-muted { opacity: .58; }

.pv-armed .pv-step + .pv-step::before {
	transform: scaleY(0);
	transition: transform .45s ease;
	transition-delay: calc(var(--pv-base, .5s) + var(--i, 0) * 170ms - 120ms);
}
.pv-armed.is-in .pv-step + .pv-step::before { transform: scaleY(1); }

/* Once played, hover feedback should be instant again. */
.pv-armed.is-settled .pv-step,
.pv-armed.is-settled .pv-card { transition-delay: 0s; }

.pv-armed.is-settled .pv-step.is-danger { animation: pv-alarm 2.4s ease-in-out infinite; }

/* Reply demo stages */
.pv-armed .pv-thread [data-stage] { opacity: 0; translate: 0 8px; transition: opacity .45s ease, translate .5s var(--pv-ease); }
.pv-armed .pv-thread.is-s1 [data-stage="1"],
.pv-armed .pv-thread.is-s2 [data-stage="2"],
.pv-armed .pv-thread.is-s3 [data-stage="3"] { opacity: 1; translate: 0 0; }
.pv-armed .pv-thread.is-typing .pv-typing { display: inline-flex; }
.pv-armed .pv-thread.is-s3 .pv-outcome.is-good { animation: pv-pop .6s cubic-bezier(.34, 1.56, .64, 1); }

/* ==========================================================================
 * Article-style shield
 *
 * Pages render this section inside .wp-block-post-content, and the reading
 * styles in editorial.css target bare ul/ol/li/h3 there with up to (0,3,1)
 * specificity: lists become display:block with bullets, padding and margins,
 * which broke the logo row, collapsed the flex gaps and pushed the step
 * connectors into the text. :not(#pv) lifts these few rules above any class
 * chain without !important, so the section looks the same wherever it sits.
 * ========================================================================== */

.pv-section .pv-logos:not(#pv) {
	display: flex; flex-flow: row wrap; justify-content: center; gap: 12px;
	width: 100%; margin: 20px 0 0; padding: 0; list-style: none;
	font-size: inherit; line-height: normal; color: inherit;
}
.pv-section .pv-flow:not(#pv) {
	display: flex; flex-direction: column; align-items: center; gap: var(--pv-gap);
	width: 100%; margin: 0 0 28px; padding: 0; list-style: none;
	font-size: inherit; line-height: normal; color: inherit;
}
.pv-section .pv-trust:not(#pv) {
	display: flex; flex-flow: row wrap; justify-content: center; gap: 8px 22px;
	margin: 0; padding: 0; list-style: none;
	color: var(--pv-muted); font-size: 14px; line-height: 1.5;
}
.pv-section :is(.pv-logos, .pv-trust) > li:not(#pv) { margin: 0; padding: 0; }
.pv-section .pv-flow > .pv-step:not(#pv) { margin: 0; padding: 13px 16px; }
.pv-section :is(.pv-logos, .pv-flow, .pv-trust) > li:not(#pv)::marker { content: none; }
.pv-section .pv-card-title:not(#pv) {
	margin: 0; color: var(--white, #fff); font-family: Inter, sans-serif;
	font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -.02em;
}
.pv-section .pv-thread p:not(#pv) { margin: 0; }

/* Two buttons side by side; the theme's .button is width:100% by default. */
.pv-section .pv-cta-buttons:not(#pv) { display: flex; flex-flow: row wrap; justify-content: center; gap: 14px; }
.pv-section .pv-cta-buttons > .button:not(#pv) { width: auto; min-width: 210px; flex: 0 0 auto; }

@media (max-width: 991px) {
	.pv-section .pv-flow > .pv-step:not(#pv) { padding: 12px 13px; }
}

@media (max-width: 767px) {
	.pv-section .pv-card-title:not(#pv) { font-size: 18px; }
	.pv-section .pv-trust:not(#pv) { flex-direction: column; align-items: center; }
	.pv-section .pv-cta-buttons:not(#pv) { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; }
	.pv-section .pv-cta-buttons > .button:not(#pv) { width: 100%; min-width: 0; }
}

/* ==========================================================================
 * Keyframes
 * ========================================================================== */

@keyframes pv-spin { to { --pv-angle: 360deg; } }
@keyframes pv-rotate { to { transform: rotate(360deg); } }
@keyframes pv-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes pv-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-40px, 30px, 0) scale(1.12); } }
@keyframes pv-halo { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes pv-glow { 0%, 100% { filter: drop-shadow(0 0 6px #b638ffaa) drop-shadow(0 0 14px #ff75d455); } 50% { filter: drop-shadow(0 0 10px #d77bffee) drop-shadow(0 0 24px #ff75d499); } }
@keyframes pv-ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }
@keyframes pv-dot { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes pv-pop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
@keyframes pv-shine { 0% { transform: skewX(-18deg) translateX(-120%); } 45%, 100% { transform: skewX(-18deg) translateX(420%); } }
@keyframes pv-signal {
	0% { opacity: 0; transform: translateY(0); }
	15% { opacity: 1; }
	70% { opacity: 1; transform: translateY(var(--pv-gap)); }
	100% { opacity: 0; transform: translateY(var(--pv-gap)); }
}
@keyframes pv-alarm {
	0%, 100% { box-shadow: inset 3px 0 0 var(--pv-bad), 0 0 0 0 #ff5c7a00; }
	40% { box-shadow: inset 3px 0 0 var(--pv-bad), 0 0 0 6px #ff5c7a26; }
}

/* ==========================================================================
 * Responsive
 * ========================================================================== */

@media (max-width: 991px) {
	.pv-board { grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr); }
	.pv-card { padding-inline: 16px; }
	.pv-step { gap: 12px; padding: 12px 13px; }
	.pv-step-text { font-size: 12.5px; }
}

@media (max-width: 767px) {
	.pv-board { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; }
	.pv-vs { height: 72px; }
	.pv-armed .pv-card--old,
	.pv-armed .pv-card--new { transform: translateY(24px); }
	.pv-armed.is-in .pv-card { transform: none; }
	.pv-card { padding: 26px 16px; }
	.pv-step.is-win,
	.pv-step.is-win:hover { transform: none; }
}

@media (hover: none) {
	.pv-logos li { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
	.pv-section *,
	.pv-section *::before,
	.pv-section *::after {
		animation: none !important;
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}
	.pv-card--new .pv-step + .pv-step::after { display: none; }
}