/* BD Social Proof — .espt-block-bd-social-proof
   Six proof designs: t1 Facebook comments, t2 WhatsApp chat, t3 return-rate
   donut, t4 delivery map, t5 customer journey, t6 comment wall.
   vars: --max-w --card-bg --card-border --card-radius --head-color --em-color
         --text-color --accent-color --fb-color --pin-color --map-fill
         --head-size --sub-size --body-size --av-size --chat-max --ring-size
         --ring-stroke --map-size --list-cols --dot-size --wall-av --wall-cols
         --cta-bg --cta-color --cta-radius
   root classes: is-design-t1…t6, is-item-anim-{up|fade|zoom}, is-frame,
            is-cta-design-*, is-cta-icon-anim-*, is-cta-hover-*, is-cta-attn,
            is-cta-full.
   markup classes: .bdsp (+ .sp-ready/.is-vis from the JS), .is-photo avatars,
            .sp2-wp.is-notop, .sp3-lg.is-muted, .sp4-b.is-nomap/.is-nolist,
            .sp5-e.is-mad/.is-wow, .sp6-b.is-hi/.is-wa, .sp6-pi.is-fb/.is-wa.
   Platform chrome (Facebook blue and greys, WhatsApp green wallpaper) stays
   literal on purpose — that is what makes these read as screenshots. */

.espt-block-bd-social-proof .bdsp {
	--sp-accent: var(--accent-color, var(--bd-accent));
	--sp-fb: var(--fb-color, #1877f2);
	--sp-wa: #25d366;
	--sp-radius: var(--card-radius, 12px);
	color: var(--text-color, var(--bd-ink));
	line-height: 1.6;
	margin-left: auto;
	margin-right: auto;
	max-width: var(--max-w, 100%);
	min-width: 0;
	overflow-wrap: anywhere;
	position: relative;
}

/* ------------------------------------------------- heading / sub / footer */
.espt-block-bd-social-proof .sp-h {
	color: var(--head-color, var(--bd-ink));
	font-size: var(--head-size, 18px);
	font-weight: 800;
	line-height: 1.4;
	margin: 0 0 5px;
	text-align: center;
	text-wrap: balance;
}

.espt-block-bd-social-proof .sp-h strong { color: var(--em-color, var(--bd-primary)); font-weight: inherit; }

.espt-block-bd-social-proof .sp-h u,
.espt-block-bd-social-proof .sp-ft u { color: var(--head-color, var(--bd-ink)); font-weight: 700; text-decoration: none; }

.espt-block-bd-social-proof .sp-sb {
	color: var(--bd-muted);
	font-size: var(--sub-size, 13px);
	line-height: 1.6;
	margin: 0 0 14px;
	text-align: center;
}

.espt-block-bd-social-proof .sp-sb strong { color: var(--head-color, var(--bd-ink)); font-weight: 700; }
.espt-block-bd-social-proof .sp-sb u { color: inherit; font-weight: 700; text-decoration: none; }

.espt-block-bd-social-proof .sp-ft {
	color: var(--bd-muted);
	font-size: calc(var(--sub-size, 13px) - 1px);
	line-height: 1.7;
	margin: 12px auto 0;
	max-width: 46ch;
	text-align: center;
}

.espt-block-bd-social-proof .sp-ft strong { color: var(--text-color, var(--bd-ink)); font-weight: 700; }

.espt-block-bd-social-proof .sp-card {
	border-radius: var(--sp-radius);
	min-width: 0;
}

.espt-block-bd-social-proof .sp-t1,
.espt-block-bd-social-proof .sp-t2,
.espt-block-bd-social-proof .sp-t3,
.espt-block-bd-social-proof .sp-t4,
.espt-block-bd-social-proof .sp-t5,
.espt-block-bd-social-proof .sp-t6 { min-width: 0; }

/* "Wrap everything in a card": the outer .espt-bd-box already draws a border
   and padding, so t4 — the one design whose panel is a plain bordered white
   card — drops its own frame instead of double-framing. The others keep
   theirs, because the panel *is* the design: t1's Facebook grey, t2's chat
   wallpaper, t3's dark stat block. */
.espt-block-bd-social-proof.is-frame .sp-t4 {
	background: none;
	border: 0;
	padding: 0;
}

/* ==================================================== t1 — FB comments === */
.espt-block-bd-social-proof .sp-t1 {
	background: var(--card-bg, #f0f2f5);
	border: 1px solid var(--card-border, transparent);
	padding: 14px 10px;
}

.espt-block-bd-social-proof.is-design-t1 .sp-h { color: var(--head-color, #1c1e21); margin-bottom: 12px; }
.espt-block-bd-social-proof.is-design-t1 .sp-h strong { color: var(--em-color, var(--sp-fb)); }

.espt-block-bd-social-proof .sp1-list { display: grid; gap: 10px; }

.espt-block-bd-social-proof .sp1-fb {
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
	min-width: 0;
	padding: 12px 12px 8px;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.espt-block-bd-social-proof .sp1-fb:hover { box-shadow: 0 8px 20px -12px rgba(15, 23, 42, 0.45); transform: translateY(-2px); }

.espt-block-bd-social-proof .sp1-tp { align-items: center; display: flex; gap: 9px; margin-bottom: 8px; min-width: 0; }

.espt-block-bd-social-proof .sp1-av {
	align-items: center;
	background: var(--bd-primary);
	border-radius: 50%;
	color: #fff;
	display: flex;
	flex: none;
	font-size: calc(var(--av-size, 36px) * 0.42);
	font-weight: 800;
	height: var(--av-size, 36px);
	justify-content: center;
	line-height: 1;
	overflow: hidden;
	width: var(--av-size, 36px);
}

.espt-block-bd-social-proof .sp1-av img,
.espt-block-bd-social-proof .sp6-av img { display: block; height: 100%; object-fit: cover; width: 100%; }

/* a real photo fills the circle — no coloured letter tile behind it */
.espt-block-bd-social-proof .sp1-av.is-photo,
.espt-block-bd-social-proof .sp6-av.is-photo { background: var(--bd-line); }

.espt-block-bd-social-proof .sp1-id { display: block; min-width: 0; }

.espt-block-bd-social-proof .sp1-nm {
	color: #050505;
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.25;
}

.espt-block-bd-social-proof .sp1-tm {
	align-items: center;
	color: #65676b;
	display: flex;
	flex-wrap: wrap;
	font-size: 11.5px;
	gap: 4px;
	margin-top: 2px;
}

.espt-block-bd-social-proof .sp-vf { color: var(--sp-fb); flex: none; height: 12px; width: 12px; }

.espt-block-bd-social-proof .sp1-tx {
	color: #050505;
	font-size: var(--body-size, 13.5px);
	line-height: 1.55;
	margin: 0 0 8px;
}

.espt-block-bd-social-proof .sp1-ac {
	border-top: 1px solid #e4e6eb;
	color: #65676b;
	display: flex;
	flex-wrap: wrap;
	font-size: 12px;
	font-weight: 600;
	gap: 6px 14px;
	padding-top: 6px;
}

.espt-block-bd-social-proof .sp1-ac span { align-items: center; display: inline-flex; gap: 5px; }
.espt-block-bd-social-proof .sp1-ac .lk { color: var(--sp-fb); }

/* ==================================================== t2 — WhatsApp ====== */
.espt-block-bd-social-proof .sp2-wp {
	background: var(--card-bg, #e5ddd5);
	background-image:
		radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.16) 1px, transparent 2px),
		radial-gradient(circle at 70% 60%, rgba(0, 0, 0, 0.03) 1px, transparent 2px);
	background-size: 40px 40px;
	border: 1px solid var(--card-border, transparent);
	margin: 0 auto;
	max-width: var(--chat-max, 340px);
	overflow: hidden;
	padding: 0 12px 14px;
}

/* no contact bar (name + status both blank) → the panel needs its own top pad */
.espt-block-bd-social-proof .sp2-wp.is-notop { padding-top: 12px; }

.espt-block-bd-social-proof .sp2-tp {
	align-items: center;
	background: #075e54;
	color: #fff;
	display: flex;
	gap: 10px;
	margin: 0 -12px 12px;
	min-width: 0;
	padding: 10px 14px;
}

.espt-block-bd-social-proof .sp2-av {
	align-items: center;
	background: #128c7e;
	border-radius: 50%;
	display: flex;
	flex: none;
	font-size: 15px;
	font-weight: 800;
	height: 34px;
	justify-content: center;
	width: 34px;
}

.espt-block-bd-social-proof .sp2-who { min-width: 0; }
.espt-block-bd-social-proof .sp2-who b { display: block; font-size: 14px; font-weight: 700; line-height: 1.25; }

.espt-block-bd-social-proof .sp2-who i {
	align-items: center;
	color: #b8ddd6;
	display: flex;
	font-size: 11px;
	font-style: normal;
	gap: 4px;
}

.espt-block-bd-social-proof .sp2-who i::before { background: #4ade80; border-radius: 50%; content: ""; flex: none; height: 6px; width: 6px; }

.espt-block-bd-social-proof.is-design-t2 .sp-h strong { color: var(--em-color, #128c7e); }

.espt-block-bd-social-proof .sp2-r { display: flex; flex-direction: column; min-width: 0; }

.espt-block-bd-social-proof .sp2-tx { display: block; overflow-wrap: anywhere; }

.espt-block-bd-social-proof .sp2-m {
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
	color: #111;
	font-size: var(--body-size, 13.5px);
	line-height: 1.5;
	margin-bottom: 6px;
	max-width: 85%;
	min-width: 0;
	padding: 6px 9px 4px;
	position: relative;
}

.espt-block-bd-social-proof .sp2-in { align-self: flex-start; background: #fff; border-radius: 0 8px 8px 8px; margin-right: auto; }
.espt-block-bd-social-proof .sp2-out { align-self: flex-end; background: #dcf8c6; border-radius: 8px 0 8px 8px; margin-left: auto; }

.espt-block-bd-social-proof .sp2-mt { color: #8b9a94; display: block; font-size: 10px; margin-top: 2px; text-align: right; }
.espt-block-bd-social-proof .sp2-mt em { color: #4fc3f7; font-style: normal; font-weight: 700; letter-spacing: -1px; padding-left: 3px; }

.espt-block-bd-social-proof .sp2-day {
	align-self: center;
	background: rgba(255, 255, 255, 0.72);
	border-radius: 6px;
	color: #4a5c54;
	font-size: 10.5px;
	margin: 2px auto 8px;
	max-width: 100%;
	padding: 3px 10px;
	text-align: center;
}

/* ==================================================== t3 — donut ========= */
.espt-block-bd-social-proof .sp-t3 {
	background: var(--card-bg, var(--bd-deep));
	border: 1px solid var(--card-border, transparent);
	color: var(--text-color, #e7ebe7);
	padding: 24px 16px;
	text-align: center;
}

.espt-block-bd-social-proof.is-design-t3 .sp-h { color: var(--head-color, #fff); margin-bottom: 20px; }
.espt-block-bd-social-proof.is-design-t3 .sp-h strong { color: var(--em-color, var(--sp-accent)); }
.espt-block-bd-social-proof.is-design-t3 .sp-sb { color: color-mix(in srgb, var(--text-color, #e7ebe7) 74%, transparent); }

.espt-block-bd-social-proof .sp3-eb {
	background: color-mix(in srgb, var(--text-color, #e7ebe7) 14%, transparent);
	border-radius: 99px;
	color: var(--sp-accent);
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	margin-bottom: 14px;
	padding: 4px 12px;
}

.espt-block-bd-social-proof .sp3-ring {
	height: var(--ring-size, 160px);
	margin: 0 auto 18px;
	max-width: 100%;
	position: relative;
	width: var(--ring-size, 160px);
}

.espt-block-bd-social-proof .sp3-ring svg { display: block; height: 100%; transform: rotate(-90deg); width: 100%; }
.espt-block-bd-social-proof .sp3-ring circle { fill: none; stroke-width: var(--ring-stroke, 14); }
.espt-block-bd-social-proof .sp3-bg { stroke: color-mix(in srgb, var(--text-color, #e7ebe7) 16%, transparent); }

.espt-block-bd-social-proof .sp3-fg {
	stroke: var(--sp-accent);
	stroke-dasharray: var(--sp3-fill, 414) var(--sp3-circ, 427);
	stroke-linecap: round;
}

.espt-block-bd-social-proof .sp3-v {
	align-items: center;
	color: var(--head-color, #fff);
	display: flex;
	flex-direction: column;
	inset: 0;
	justify-content: center;
	line-height: 1;
	padding: 0 8px;
	position: absolute;
}

.espt-block-bd-social-proof .sp3-p { font-size: calc(var(--ring-size, 160px) * 0.27); font-weight: 800; }

/* the count-up rewrites this every frame — fixed-width digits stop the jitter */
.espt-block-bd-social-proof .sp3-n { font-variant-numeric: tabular-nums; }

.espt-block-bd-social-proof .sp3-lb {
	color: color-mix(in srgb, var(--text-color, #e7ebe7) 78%, transparent);
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.25;
	margin-top: 5px;
}

.espt-block-bd-social-proof .sp3-l {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 16px;
	justify-content: center;
	margin-bottom: 12px;
}

.espt-block-bd-social-proof .sp3-lg {
	align-items: center;
	color: color-mix(in srgb, var(--text-color, #e7ebe7) 82%, transparent);
	display: flex;
	font-size: 12.5px;
	gap: 6px;
	min-width: 0;
}

.espt-block-bd-social-proof .sp3-lg::before {
	background: var(--sp-accent);
	border-radius: 2px;
	content: "";
	flex: none;
	height: 11px;
	width: 11px;
}

.espt-block-bd-social-proof .sp3-lg.is-muted::before { background: color-mix(in srgb, var(--text-color, #e7ebe7) 24%, transparent); }

.espt-block-bd-social-proof.is-design-t3 .sp-ft {
	border-top: 1px dashed color-mix(in srgb, var(--text-color, #e7ebe7) 20%, transparent);
	color: color-mix(in srgb, var(--text-color, #e7ebe7) 70%, transparent);
	padding-top: 14px;
}

.espt-block-bd-social-proof.is-design-t3 .sp-ft strong { color: var(--sp-accent); }

/* ==================================================== t4 — delivery map == */
.espt-block-bd-social-proof .sp-t4 {
	background: var(--card-bg, #fff);
	border: 1.5px solid var(--card-border, var(--bd-soft-line));
	padding: 18px 14px;
}

.espt-block-bd-social-proof .sp4-b {
	align-items: center;
	display: grid;
	gap: 16px;
	grid-template-columns: minmax(0, 1fr);
}

.espt-block-bd-social-proof .sp4-map {
	margin: 0 auto;
	max-width: min(var(--map-size, 260px), 100%);
	position: relative;
	width: 100%;
}

.espt-block-bd-social-proof .sp4-map svg { display: block; height: auto; width: 100%; }

.espt-block-bd-social-proof .sp4-map path {
	fill: var(--map-fill, var(--bd-soft));
	stroke: var(--bd-primary);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.4;
}

.espt-block-bd-social-proof .sp4-dot {
	background: var(--pin-color, var(--bd-danger));
	border-radius: 50%;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--pin-color, var(--bd-danger)) 26%, transparent);
	height: 11px;
	position: absolute;
	transform: translate(-50%, -50%);
	width: 11px;
}

/* Pin labels only where there is room for them (they sit outside the map). */
.espt-block-bd-social-proof .sp4-dot::after { display: none; }

.espt-block-bd-social-proof .sp4-list {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(var(--list-cols, 1), minmax(0, 1fr));
	min-width: 0;
}

.espt-block-bd-social-proof .sp4-r {
	align-items: center;
	background: var(--bd-soft);
	border-radius: 8px;
	display: flex;
	font-size: 12.5px;
	gap: 8px;
	min-width: 0;
	padding: 8px 10px;
}

.espt-block-bd-social-proof .sp4-r i { background: var(--bd-primary); border-radius: 50%; flex: none; height: 8px; width: 8px; }
.espt-block-bd-social-proof .sp4-r b { color: var(--text-color, var(--bd-ink)); font-weight: 700; min-width: 0; }
.espt-block-bd-social-proof .sp4-r em { color: var(--bd-muted); flex: none; font-size: 11.5px; font-style: normal; margin-left: auto; }

/* ==================================================== t5 — journey ======= */
.espt-block-bd-social-proof.is-design-t5 .sp-h strong { color: var(--em-color, var(--bd-danger)); }

.espt-block-bd-social-proof .sp5-t { min-width: 0; }

.espt-block-bd-social-proof .sp5-e {
	display: flex;
	gap: 12px;
	min-width: 0;
	padding-bottom: 14px;
	position: relative;
}

.espt-block-bd-social-proof .sp5-e:last-child { padding-bottom: 0; }

.espt-block-bd-social-proof .sp5-e::before {
	border-left: 2px dashed var(--bd-soft-line);
	bottom: -2px;
	content: "";
	left: calc(var(--dot-size, 48px) / 2 - 1px);
	position: absolute;
	top: calc(var(--dot-size, 48px) + 4px);
}

.espt-block-bd-social-proof .sp5-e:last-child::before { display: none; }

.espt-block-bd-social-proof .sp5-d {
	align-items: center;
	background: #fff;
	border: 2px solid var(--bd-primary);
	border-radius: 50%;
	color: var(--bd-primary);
	display: flex;
	flex: none;
	font-size: calc(var(--dot-size, 48px) * 0.24);
	font-weight: 800;
	height: var(--dot-size, 48px);
	justify-content: center;
	line-height: 1.15;
	padding: 3px;
	position: relative;
	text-align: center;
	width: var(--dot-size, 48px);
	z-index: 1;
}

.espt-block-bd-social-proof .sp5-e.is-mad .sp5-d { border-color: var(--bd-danger); color: var(--bd-danger); }
.espt-block-bd-social-proof .sp5-e.is-wow .sp5-d { background: var(--bd-primary); color: #fff; }

.espt-block-bd-social-proof .sp5-c {
	background: var(--card-bg, var(--bd-soft));
	border: 1px solid var(--card-border, var(--bd-line));
	border-radius: 11px;
	flex: 1;
	font-size: var(--body-size, 13.5px);
	line-height: 1.7;
	min-width: 0;
	padding: 11px 13px;
}

.espt-block-bd-social-proof .sp5-e.is-mad .sp5-c { background: color-mix(in srgb, var(--bd-danger) 7%, #fff); border-color: color-mix(in srgb, var(--bd-danger) 22%, #fff); }
.espt-block-bd-social-proof .sp5-e.is-wow .sp5-c { background: color-mix(in srgb, var(--bd-primary) 8%, #fff); border-color: color-mix(in srgb, var(--bd-primary) 26%, #fff); }

.espt-block-bd-social-proof .sp5-c b {
	color: var(--bd-muted);
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin-bottom: 3px;
	text-transform: uppercase;
}

.espt-block-bd-social-proof .sp5-e.is-mad .sp5-c b { color: var(--bd-danger); }
.espt-block-bd-social-proof .sp5-e.is-wow .sp5-c b { color: var(--bd-primary); }
.espt-block-bd-social-proof .sp5-c p { color: var(--text-color, var(--bd-body)); margin: 0; }

.espt-block-bd-social-proof .sp5-c em {
	background: #fff;
	border: 1px solid var(--bd-line);
	border-radius: 4px;
	color: var(--bd-muted);
	display: inline-block;
	font-size: 11px;
	font-style: normal;
	font-weight: 700;
	margin-left: 4px;
	max-width: 100%;
	padding: 1px 6px;
}

/* ==================================================== t6 — comment wall == */
.espt-block-bd-social-proof .sp6-w { column-count: var(--wall-cols, 1); column-gap: 10px; }

.espt-block-bd-social-proof .sp6-b {
	background: var(--card-bg, var(--bd-soft));
	border: 1px solid var(--card-border, var(--bd-line));
	border-radius: 10px;
	break-inside: avoid;
	color: var(--text-color, var(--bd-body));
	display: block;
	font-size: calc(var(--body-size, 13px) - 1px);
	line-height: 1.65;
	margin-bottom: 10px;
	min-width: 0;
	padding: 11px 12px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.espt-block-bd-social-proof .sp6-b:hover { box-shadow: 0 10px 22px -14px rgba(15, 23, 42, 0.5); transform: translateY(-2px); }
.espt-block-bd-social-proof .sp6-b.is-hi { background: color-mix(in srgb, var(--bd-primary) 8%, #fff); border-color: color-mix(in srgb, var(--bd-primary) 26%, #fff); }
.espt-block-bd-social-proof .sp6-b.is-wa { background: #dcf8c6; border-color: #bee7a3; color: #25382f; }

.espt-block-bd-social-proof .sp6-st { color: var(--sp-accent); font-size: 11.5px; letter-spacing: 1.5px; margin-bottom: 4px; }

/* inherits the brick's colour on purpose — the WhatsApp brick reads dark green */
.espt-block-bd-social-proof .sp6-tx { min-width: 0; overflow-wrap: anywhere; }

.espt-block-bd-social-proof .sp6-who { align-items: center; display: flex; gap: 8px; margin-top: 8px; min-width: 0; }

.espt-block-bd-social-proof .sp6-av {
	align-items: center;
	background: var(--bd-primary);
	border-radius: 50%;
	color: #fff;
	display: flex;
	flex: none;
	font-size: calc(var(--wall-av, 30px) * 0.42);
	font-weight: 800;
	height: var(--wall-av, 30px);
	justify-content: center;
	line-height: 1;
	overflow: hidden;
	width: var(--wall-av, 30px);
}

.espt-block-bd-social-proof .sp6-wt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }

.espt-block-bd-social-proof .sp6-nm {
	align-items: center;
	color: var(--text-color, var(--bd-ink));
	display: flex;
	font-size: 11.5px;
	font-weight: 700;
	gap: 4px;
	min-width: 0;
}

.espt-block-bd-social-proof .sp6-who i { color: var(--bd-muted); font-size: 10px; font-style: normal; }
.espt-block-bd-social-proof .sp6-pi { flex: none; font-size: 12px; }
.espt-block-bd-social-proof .sp6-pi.is-fb { color: var(--sp-fb); }
.espt-block-bd-social-proof .sp6-pi.is-wa { color: var(--sp-wa); }

/* ==================================================== CTA button ========= */
.espt-block-bd-social-proof .sp-cta {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-top: 16px;
	min-width: 0;
}

.espt-block-bd-social-proof .sp-btn {
	align-items: center;
	background: var(--cta-bg, var(--espt-btn-bg, var(--bd-primary)));
	border: 0;
	border-radius: var(--cta-radius, 10px);
	color: var(--cta-color, #fff);
	display: inline-flex;
	font-size: 16px;
	font-weight: 800;
	gap: 9px;
	justify-content: center;
	line-height: 1.25;
	max-width: 100%;
	padding: 13px 26px;
	text-align: center;
	text-decoration: none;
	transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;
	width: 100%;
}

.espt-block-bd-social-proof .sp-btn:hover { color: var(--cta-color, #fff); filter: brightness(1.06); text-decoration: none; }
.espt-block-bd-social-proof .sp-btn > span { min-width: 0; }
.espt-block-bd-social-proof .sp-bico { flex: none; transition: transform 0.2s ease; }
.espt-block-bd-social-proof .sp-cta-note { color: var(--bd-muted); font-size: 12.5px; line-height: 1.5; text-align: center; }

.espt-block-bd-social-proof.is-cta-icon-anim-slide .sp-btn:hover .sp-bico { transform: translateX(4px); }
.espt-block-bd-social-proof.is-cta-icon-anim-bounce .sp-bico { animation: espt-sp-ico-bounce 1.6s ease-in-out infinite; }
.espt-block-bd-social-proof.is-cta-icon-anim-pulse .sp-bico { animation: espt-sp-ico-pulse 1.8s ease-in-out infinite; }
@keyframes espt-sp-ico-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes espt-sp-ico-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

.espt-block-bd-social-proof.is-cta-design-pill .sp-btn { border-radius: 99px; }
.espt-block-bd-social-proof.is-cta-design-gradient .sp-btn { background-image: linear-gradient(135deg, var(--cta-bg, var(--bd-primary)), var(--bd-primary-dark)); }
.espt-block-bd-social-proof.is-cta-design-outline .sp-btn { background: transparent; border: 2px solid var(--cta-bg, var(--bd-primary)); color: var(--cta-color, var(--cta-bg, var(--bd-primary))); }
.espt-block-bd-social-proof.is-cta-design-outline .sp-btn:hover { background: var(--bd-soft); color: var(--cta-color, var(--cta-bg, var(--bd-primary))); }
.espt-block-bd-social-proof.is-cta-design-soft .sp-btn { background: var(--bd-soft); color: var(--cta-color, var(--bd-primary-dark)); }
.espt-block-bd-social-proof.is-cta-design-3d .sp-btn { box-shadow: 0 4px 0 var(--bd-primary-dark); }
.espt-block-bd-social-proof.is-cta-design-3d .sp-btn:active { box-shadow: 0 0 0 var(--bd-primary-dark); transform: translateY(4px); }
.espt-block-bd-social-proof.is-cta-design-glow .sp-btn { box-shadow: 0 8px 26px -8px var(--cta-bg, var(--bd-primary)); }
.espt-block-bd-social-proof.is-cta-design-shine .sp-btn { overflow: hidden; position: relative; }

.espt-block-bd-social-proof.is-cta-design-shine .sp-btn::after {
	background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
	bottom: 0;
	content: "";
	left: -80%;
	position: absolute;
	top: 0;
	transition: left 0.6s ease;
	width: 60%;
}

.espt-block-bd-social-proof.is-cta-design-shine .sp-btn:hover::after { left: 130%; }
.espt-block-bd-social-proof.is-cta-design-ghost .sp-btn { background: transparent; color: var(--cta-color, var(--bd-primary-dark)); padding: 6px 12px; text-decoration: underline; width: auto; }

.espt-block-bd-social-proof.is-cta-hover-lift .sp-btn:hover { box-shadow: 0 12px 24px -12px rgba(15, 23, 42, 0.45); transform: translateY(-3px); }
.espt-block-bd-social-proof.is-cta-hover-scale .sp-btn:hover { transform: scale(1.04); }
.espt-block-bd-social-proof.is-cta-hover-glow .sp-btn:hover { box-shadow: 0 0 0 4px color-mix(in srgb, var(--cta-bg, var(--bd-primary)) 28%, transparent); }
.espt-block-bd-social-proof.is-cta-attn .sp-btn { animation: espt-sp-btn-pop 1.8s ease-in-out infinite; }
@keyframes espt-sp-btn-pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }

/* ============================================ item stagger animation ===== */
@media (prefers-reduced-motion: no-preference) {
	.espt-block-bd-social-proof .bdsp.sp-ready :is(.sp1-fb, .sp5-e, .sp6-b, .sp4-r, .sp2-m, .sp2-day, .sp3-lg) { opacity: 0; }

	.espt-block-bd-social-proof .bdsp.sp-ready.is-vis :is(.sp1-fb, .sp5-e, .sp6-b, .sp4-r, .sp2-m, .sp2-day, .sp3-lg) {
		animation: espt-sp-item 0.5s ease-out both;
	}

	.espt-block-bd-social-proof.is-item-anim-up .bdsp { --sp-from: translateY(14px); }
	.espt-block-bd-social-proof.is-item-anim-zoom .bdsp { --sp-from: scale(0.94); }
	/* "fade" is opacity only — no transform to start from */
	.espt-block-bd-social-proof.is-item-anim-fade .bdsp { --sp-from: none; }

	.espt-block-bd-social-proof .bdsp.sp-ready.is-vis :is(.sp1-fb, .sp5-e, .sp6-b, .sp4-r, .sp2-m, .sp2-day, .sp3-lg):nth-child(1) { animation-delay: 0.04s; }
	.espt-block-bd-social-proof .bdsp.sp-ready.is-vis :is(.sp1-fb, .sp5-e, .sp6-b, .sp4-r, .sp2-m, .sp2-day, .sp3-lg):nth-child(2) { animation-delay: 0.1s; }
	.espt-block-bd-social-proof .bdsp.sp-ready.is-vis :is(.sp1-fb, .sp5-e, .sp6-b, .sp4-r, .sp2-m, .sp2-day, .sp3-lg):nth-child(3) { animation-delay: 0.16s; }
	.espt-block-bd-social-proof .bdsp.sp-ready.is-vis :is(.sp1-fb, .sp5-e, .sp6-b, .sp4-r, .sp2-m, .sp2-day, .sp3-lg):nth-child(4) { animation-delay: 0.22s; }
	.espt-block-bd-social-proof .bdsp.sp-ready.is-vis :is(.sp1-fb, .sp5-e, .sp6-b, .sp4-r, .sp2-m, .sp2-day, .sp3-lg):nth-child(5) { animation-delay: 0.28s; }
	.espt-block-bd-social-proof .bdsp.sp-ready.is-vis :is(.sp1-fb, .sp5-e, .sp6-b, .sp4-r, .sp2-m, .sp2-day, .sp3-lg):nth-child(6) { animation-delay: 0.34s; }
	.espt-block-bd-social-proof .bdsp.sp-ready.is-vis :is(.sp1-fb, .sp5-e, .sp6-b, .sp4-r, .sp2-m, .sp2-day, .sp3-lg):nth-child(7) { animation-delay: 0.4s; }
	.espt-block-bd-social-proof .bdsp.sp-ready.is-vis :is(.sp1-fb, .sp5-e, .sp6-b, .sp4-r, .sp2-m, .sp2-day, .sp3-lg):nth-child(8) { animation-delay: 0.46s; }
	.espt-block-bd-social-proof .bdsp.sp-ready.is-vis :is(.sp1-fb, .sp5-e, .sp6-b, .sp4-r, .sp2-m, .sp2-day, .sp3-lg):nth-child(n + 9) { animation-delay: 0.52s; }

	/* the donut draws itself once the block is on screen */
	.espt-block-bd-social-proof .bdsp.is-vis .sp3-fg { animation: espt-sp-ring 1.4s ease-out both; }

	.espt-block-bd-social-proof .sp4-dot { animation: espt-sp-pin 2.4s ease-out infinite; }
}

@keyframes espt-sp-item {
	from { opacity: 0; transform: var(--sp-from, none); }
	to { opacity: 1; transform: none; }
}

@keyframes espt-sp-ring {
	from { stroke-dasharray: 0 var(--sp3-circ, 427); }
	to { stroke-dasharray: var(--sp3-fill, 414) var(--sp3-circ, 427); }
}

@keyframes espt-sp-pin {
	0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--pin-color, var(--bd-danger)) 26%, transparent); }
	50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--pin-color, var(--bd-danger)) 0%, transparent); }
}

/* ==================================================== tablet ≥768px ====== */
@media (min-width: 768px) {
	.espt-block-bd-social-proof .sp-t1 { padding: 16px 12px; }
	.espt-block-bd-social-proof .sp-t3 { padding: 28px 22px; }
	.espt-block-bd-social-proof .sp-t4 { padding: 22px 20px; }
	.espt-block-bd-social-proof .sp2-wp { padding: 0 12px 16px; }
	.espt-block-bd-social-proof .sp5-e { gap: 14px; padding-bottom: 16px; }
	.espt-block-bd-social-proof .sp5-c { padding: 12px 14px; }
	.espt-block-bd-social-proof .sp4-b { gap: 20px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.espt-block-bd-social-proof .sp4-b.is-nomap,
	.espt-block-bd-social-proof .sp4-b.is-nolist { grid-template-columns: minmax(0, 1fr); }
	.espt-block-bd-social-proof .sp-cta { margin-top: 18px; }
	.espt-block-bd-social-proof .sp-btn { width: auto; }
	.espt-block-bd-social-proof.is-cta-full .sp-btn { width: 100%; }
	/* a text link never stretches, whatever "full width" says */
	.espt-block-bd-social-proof.is-cta-design-ghost.is-cta-full .sp-btn { width: auto; }
}

/* ==================================================== desktop ≥1024px ==== */
@media (min-width: 1024px) {
	.espt-block-bd-social-proof .sp4-dot::after {
		background: #fff;
		border: 1px solid var(--bd-soft-line);
		border-radius: 99px;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
		color: var(--bd-ink);
		content: attr(data-c);
		display: block;
		font-size: 10.5px;
		font-weight: 700;
		left: 50%;
		max-width: 90px;
		overflow: hidden;
		padding: 1px 6px;
		pointer-events: none;
		position: absolute;
		text-overflow: ellipsis;
		top: -7px;
		transform: translate(-50%, -100%);
		white-space: nowrap;
		z-index: 2;
	}
}

/* ==================================================== reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
	.espt-block-bd-social-proof .sp1-fb,
	.espt-block-bd-social-proof .sp6-b,
	.espt-block-bd-social-proof .sp-btn,
	.espt-block-bd-social-proof .sp-bico { transition: none; }

	.espt-block-bd-social-proof .sp1-fb:hover,
	.espt-block-bd-social-proof .sp6-b:hover { transform: none; }

	.espt-block-bd-social-proof .sp4-dot,
	.espt-block-bd-social-proof .sp3-fg,
	.espt-block-bd-social-proof .sp-bico,
	.espt-block-bd-social-proof.is-cta-attn .sp-btn { animation: none; }
}