/* Comparison Table — .espt-block-comparison
   vars: --acc-user (accent picker) --head-gap --fcol --tmax --cell-py --cell-px --mark-size --stagger
         --eyebrow-color --eyebrow-size --title-color --title-size
         --sub-color --sub-size --colname-size --head-bg --head-color
         --ours-head-bg --ours-head-color --ours-bg --badge-bg --badge-color
         --feature-color --feature-size --value-color --value-size
         --check-color --cross-color --divider-color --stripe-color
         --image-width --image-gap --image-radius
         --cta-gap --cta-radius --cta-size --cta-bg --cta-color
         --i (per-row stagger index, set inline) --bd-* (shared layer)
   classes: is-design-{clean|soft|dark|outline|cards|gradient|glass|minimal}
            is-mobile-mode-{stack|fit|scroll} is-mark-style-{plain|circle|square}
            is-head-align-* is-eyebrow-style-{plain|pill|dash|line}
            is-image-position-{above|left|right} is-image-shadow
            is-ours-frame is-ours-tint is-stripe is-row-hover
            is-item-anim-{fade|up|zoom} is-cta-align-* is-cta-full
            is-cta-icon-anim-{slide|reveal|rotate|bounce|pulse}
   Mobile-first: ≤767px first, then 768px (tablet) and 1024px (desktop). */

/* ------------------------------------------------------ design palettes */
.espt-block-comparison {
	/* The accent every design keys off: the block's own picker (--acc-user)
	   wins, otherwise the BD skin / "Primary colour" from the shared layer. */
	--acc: var(--acc-user, var(--bd-primary));
	--acc-dark: color-mix(in srgb, var(--acc) 80%, #000000);
	--frame-w: 0px;
	--tbl-bg: var(--bd-box-bg);
	--tbl-line: var(--bd-box-line);
	--tbl-bw: 1px;
	--tbl-shadow: none;
	--hd-bg: #f8fafc;
	--hd-ink: var(--bd-ink);
	--ourshd-bg: var(--acc);
	--ourshd-ink: #ffffff;
	--ourscol-bg: color-mix(in srgb, var(--acc) 8%, #ffffff);
	--div: var(--bd-line);
	--feat-ink: var(--bd-ink);
	--fsub-ink: var(--bd-muted);
	--val-ink: var(--bd-body);
	--cross-ink: #cbd5e1;
	--stripe-bg: color-mix(in srgb, var(--bd-ink) 4%, transparent);
	--badge-bg-d: rgba(255, 255, 255, 0.22);
	--badge-ink-d: #ffffff;
	--hl-bg: color-mix(in srgb, var(--acc) 8%, transparent);
}

.espt-block-comparison.is-design-soft {
	--tbl-bg: color-mix(in srgb, var(--acc) 6%, #ffffff);
	--tbl-line: transparent;
	--tbl-bw: 0;
	--hd-bg: color-mix(in srgb, var(--acc) 13%, #ffffff);
	--ourscol-bg: color-mix(in srgb, var(--acc) 16%, #ffffff);
	--div: color-mix(in srgb, var(--bd-ink) 9%, transparent);
	--stripe-bg: color-mix(in srgb, #ffffff 55%, transparent);
}

.espt-block-comparison.is-design-dark {
	--tbl-bg: #111827;
	--tbl-line: #1f2937;
	--hd-bg: #0b1220;
	--hd-ink: #f3f4f6;
	--ourscol-bg: color-mix(in srgb, var(--acc) 20%, transparent);
	--div: #1f2937;
	--feat-ink: #f3f4f6;
	--fsub-ink: #94a3b8;
	--val-ink: #cbd5e1;
	--cross-ink: #4b5563;
	--stripe-bg: rgba(255, 255, 255, 0.035);
	--hl-bg: color-mix(in srgb, var(--acc) 16%, transparent);
}

.espt-block-comparison.is-design-outline {
	--tbl-bg: transparent;
	--tbl-line: var(--bd-line);
	--tbl-bw: 2px;
	--hd-bg: transparent;
	--ourscol-bg: transparent;
	--div: var(--bd-line);
}

.espt-block-comparison.is-design-cards {
	--tbl-bw: 0;
	--tbl-line: transparent;
	--tbl-shadow: 0 24px 60px -18px rgba(17, 24, 39, 0.3);
	--hd-bg: #ffffff;
	--div: color-mix(in srgb, var(--bd-ink) 8%, transparent);
}

.espt-block-comparison.is-design-gradient {
	--tbl-bw: 0;
	--tbl-line: transparent;
	--tbl-shadow: 0 18px 44px -22px rgba(17, 24, 39, 0.35);
	--hd-bg: linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--acc) 8%, #ffffff));
	--ourshd-bg: linear-gradient(135deg, var(--acc), var(--acc-dark));
	--ourscol-bg: color-mix(in srgb, var(--acc) 9%, transparent);
	--div: color-mix(in srgb, var(--bd-ink) 8%, transparent);
}

.espt-block-comparison.is-design-glass {
	--tbl-bg: rgba(255, 255, 255, 0.55);
	--tbl-line: rgba(255, 255, 255, 0.75);
	--tbl-shadow: 0 20px 50px -24px rgba(15, 23, 42, 0.45);
	--hd-bg: rgba(255, 255, 255, 0.45);
	--ourscol-bg: color-mix(in srgb, var(--acc) 12%, transparent);
	--div: rgba(255, 255, 255, 0.6);
}

.espt-block-comparison.is-design-minimal {
	--tbl-bg: transparent;
	--tbl-line: transparent;
	--tbl-bw: 0;
	--hd-bg: transparent;
	--hd-ink: var(--bd-ink);
	--ourshd-bg: transparent;
	--ourshd-ink: var(--acc);
	--ourscol-bg: transparent;
	--div: var(--bd-line);
	--badge-bg-d: var(--acc);
	--badge-ink-d: #ffffff;
}

.espt-block-comparison.no-ours-tint {
	--ourscol-bg: transparent;
}

/* ------------------------------------------------------------- wrapper */
.espt-block-comparison .espt-cmp {
	color: var(--bd-body);
	min-width: 0;
}

/* ------------------------------------------------------------- heading */
.espt-block-comparison .espt-cmp-head {
	margin: 0 auto var(--head-gap, 24px);
	max-width: 720px;
	min-width: 0;
	text-align: left;
}

.espt-block-comparison.is-head-align-center .espt-cmp-head {
	text-align: center;
}

.espt-block-comparison.is-head-align-right .espt-cmp-head {
	text-align: right;
}

.espt-block-comparison .espt-cmp-eyebrow {
	color: var(--eyebrow-color, var(--acc));
	display: inline-block;
	font-size: var(--eyebrow-size, 13px);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	margin: 0 0 10px;
	overflow-wrap: anywhere;
	text-transform: uppercase;
}

.espt-block-comparison.is-eyebrow-style-pill .espt-cmp-eyebrow {
	background: color-mix(in srgb, var(--eyebrow-color, var(--acc)) 12%, transparent);
	border-radius: 999px;
	padding: 5px 14px;
}

.espt-block-comparison.is-eyebrow-style-dash .espt-cmp-eyebrow::before,
.espt-block-comparison.is-eyebrow-style-dash .espt-cmp-eyebrow::after {
	background: currentColor;
	content: "";
	display: inline-block;
	height: 2px;
	opacity: 0.55;
	vertical-align: middle;
	width: 18px;
}

.espt-block-comparison.is-eyebrow-style-dash .espt-cmp-eyebrow::before { margin-right: 8px; }
.espt-block-comparison.is-eyebrow-style-dash .espt-cmp-eyebrow::after { margin-left: 8px; }

.espt-block-comparison.is-eyebrow-style-line .espt-cmp-eyebrow {
	border-bottom: 2px solid color-mix(in srgb, var(--eyebrow-color, var(--acc)) 45%, transparent);
	padding-bottom: 4px;
}

.espt-block-comparison .espt-cmp-title {
	color: var(--title-color, var(--bd-ink));
	font-size: var(--title-size, 24px);
	font-weight: 800;
	line-height: 1.22;
	margin: 0 0 12px;
	overflow-wrap: anywhere;
}

.espt-block-comparison .espt-cmp-sub {
	color: var(--sub-color, var(--bd-muted));
	font-size: var(--sub-size, 16px);
	line-height: 1.7;
	margin: 0;
	overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- image */
.espt-block-comparison .espt-cmp-img {
	margin: 0 auto var(--image-gap, 24px);
	max-width: min(100%, var(--tmax, 820px));
	min-width: 0;
}

.espt-block-comparison .espt-cmp-img img {
	border-radius: var(--image-radius, 16px);
	display: block;
	height: auto;
	width: 100%;
}

.espt-block-comparison.is-image-shadow .espt-cmp-img img {
	box-shadow: 0 20px 44px -20px rgba(15, 23, 42, 0.5);
}

.espt-block-comparison .espt-cmp-flex {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--image-gap, 24px);
	min-width: 0;
}

.espt-block-comparison .espt-cmp-flex .espt-cmp-img {
	flex: 0 0 auto;
	margin: 0;
	max-width: min(100%, 480px);
	width: var(--image-width, 100%);
}

.espt-block-comparison .espt-cmp-main {
	min-width: 0;
	width: 100%;
}

/* --------------------------------------------------------------- table */
.espt-block-comparison .espt-cmp-scroll {
	margin: 0 auto;
	max-width: var(--tmax, 820px);
	min-width: 0;
}

.espt-block-comparison .espt-cmp-table {
	background: var(--tbl-bg);
	border: var(--tbl-bw) solid var(--tbl-line);
	border-radius: var(--bd-radius, 16px);
	overflow: hidden;
	padding: 0;
	width: 100%;
}

/* Designs that carry their own shadow beat the shared .bd-shadow-* rules;
   every other design leaves the "Box shadow" option in charge. */
.espt-block-comparison.is-design-cards .espt-cmp-table,
.espt-block-comparison.is-design-gradient .espt-cmp-table,
.espt-block-comparison.is-design-glass .espt-cmp-table {
	box-shadow: var(--tbl-shadow);
}

.espt-block-comparison.is-design-glass .espt-cmp-table {
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

.espt-block-comparison.is-design-minimal .espt-cmp-table {
	border-radius: 0;
}

/* ---------------------------------------------------------------- rows */
.espt-block-comparison .espt-cmp-row {
	align-items: stretch;
	display: grid;
	grid-template-columns: minmax(0, var(--fcol, 1.6fr)) minmax(0, 1fr) minmax(0, 1fr);
	min-width: 0;
	position: relative;
	transition: background 0.18s ease;
}

.espt-block-comparison .espt-cmp-body .espt-cmp-row + .espt-cmp-row {
	border-top: 1px solid var(--divider-color, var(--div));
}

.espt-block-comparison .espt-cmp-cell {
	align-items: center;
	display: flex;
	justify-content: center;
	min-width: 0;
	overflow-wrap: anywhere;
	padding: var(--cell-py, 12px) var(--cell-px, 10px);
	text-align: center;
}

/* ------------------------------------------------------- header row */
.espt-block-comparison .espt-cmp-row-head {
	background: var(--head-bg, var(--hd-bg));
	border-bottom: 1px solid var(--divider-color, var(--div));
}

.espt-block-comparison .espt-cmp-row-head .espt-cmp-cell {
	color: var(--head-color, var(--hd-ink));
}

.espt-block-comparison .espt-cmp-row-head .espt-cmp-ours {
	background: var(--ours-head-bg, var(--ourshd-bg));
	color: var(--ours-head-color, var(--ourshd-ink));
	flex-direction: column;
	gap: 6px;
}

.espt-block-comparison .espt-cmp-row-head .espt-cmp-ours .espt-cmp-colname {
	color: var(--ours-head-color, var(--ourshd-ink));
}

.espt-block-comparison.is-design-minimal .espt-cmp-row-head .espt-cmp-ours {
	box-shadow: inset 0 -3px 0 var(--acc);
}

.espt-block-comparison .espt-cmp-colname {
	align-items: center;
	display: inline-flex;
	font-size: var(--colname-size, 15px);
	font-weight: 800;
	gap: 6px;
	justify-content: center;
	line-height: 1.3;
	min-width: 0;
	overflow-wrap: anywhere;
}

.espt-block-comparison .espt-cmp-cic {
	font-size: 1.15em;
}

.espt-block-comparison .espt-cmp-badge {
	background: var(--badge-bg, var(--badge-bg-d));
	border-radius: 999px;
	color: var(--badge-color, var(--badge-ink-d));
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.4;
	max-width: 100%;
	overflow-wrap: anywhere;
	padding: 3px 10px;
	text-transform: uppercase;
}

/* --------------------------------------------------------- body cells */
.espt-block-comparison .espt-cmp-feature {
	color: var(--feature-color, var(--feat-ink));
	font-size: var(--feature-size, 14px);
	font-weight: 600;
	gap: 9px;
	justify-content: flex-start;
	line-height: 1.45;
	text-align: left;
}

.espt-block-comparison .espt-cmp-fic {
	color: var(--check-color, var(--acc));
	flex: 0 0 auto;
	font-size: 1.2em;
}

.espt-block-comparison .espt-cmp-ftxt {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.espt-block-comparison .espt-cmp-fname {
	min-width: 0;
	overflow-wrap: anywhere;
}

.espt-block-comparison .espt-cmp-fsub {
	color: var(--fsub-ink);
	font-size: 0.82em;
	font-weight: 500;
	line-height: 1.4;
}

.espt-block-comparison .espt-cmp-body .espt-cmp-ours {
	background: var(--ours-bg, var(--ourscol-bg));
}

.espt-block-comparison.is-ours-frame,
.espt-block-comparison.is-design-outline {
	--frame-w: 2px;
}

/* The stacked phone layout puts "ours" in a half-width cell under a
   full-width feature cell, so a side frame would break into segments. */
.espt-block-comparison.is-mobile-mode-stack.is-ours-frame,
.espt-block-comparison.is-mobile-mode-stack.is-design-outline {
	--frame-w: 0px;
}

.espt-block-comparison.is-ours-frame .espt-cmp-ours,
.espt-block-comparison.is-design-outline .espt-cmp-ours {
	box-shadow: inset var(--frame-w) 0 0 var(--acc), inset calc(var(--frame-w) * -1) 0 0 var(--acc);
}

.espt-block-comparison.is-ours-frame .espt-cmp-row-head .espt-cmp-ours,
.espt-block-comparison.is-design-outline .espt-cmp-row-head .espt-cmp-ours {
	background: var(--ours-head-bg, var(--acc));
	box-shadow: inset var(--frame-w) var(--frame-w) 0 var(--acc), inset calc(var(--frame-w) * -1) 0 0 var(--acc);
	color: var(--ours-head-color, #ffffff);
}

.espt-block-comparison.is-ours-frame .espt-cmp-body .espt-cmp-row:last-child .espt-cmp-ours,
.espt-block-comparison.is-design-outline .espt-cmp-body .espt-cmp-row:last-child .espt-cmp-ours {
	box-shadow: inset var(--frame-w) 0 0 var(--acc), inset calc(var(--frame-w) * -1) 0 0 var(--acc), inset 0 calc(var(--frame-w) * -1) 0 var(--acc);
}

/* --------------------------------------------------------------- marks */
.espt-block-comparison .espt-cmp-mark {
	align-items: center;
	display: inline-flex;
	flex: 0 0 auto;
	justify-content: center;
	line-height: 0;
	transition: transform 0.2s ease;
}

.espt-block-comparison .espt-cmp-mark svg {
	display: block;
	height: var(--mark-size, 19px);
	width: var(--mark-size, 19px);
}

.espt-block-comparison .espt-cmp-mark-check {
	color: var(--check-color, var(--acc));
}

.espt-block-comparison .espt-cmp-mark-cross {
	color: var(--cross-color, var(--cross-ink));
}

.espt-block-comparison .espt-cmp-mark-dash {
	color: var(--cross-color, var(--cross-ink));
	opacity: 0.85;
}

.espt-block-comparison.is-mark-style-circle .espt-cmp-mark,
.espt-block-comparison.is-mark-style-square .espt-cmp-mark {
	background: color-mix(in srgb, currentColor 15%, transparent);
	padding: calc(var(--mark-size, 19px) * 0.3);
}

.espt-block-comparison.is-mark-style-circle .espt-cmp-mark { border-radius: 999px; }
.espt-block-comparison.is-mark-style-square .espt-cmp-mark { border-radius: calc(var(--mark-size, 19px) * 0.32); }

.espt-block-comparison .espt-cmp-val {
	color: var(--value-color, var(--val-ink));
	font-size: var(--value-size, 15px);
	font-weight: 600;
	line-height: 1.4;
	min-width: 0;
	overflow-wrap: anywhere;
}

.espt-block-comparison .espt-cmp-val-empty {
	opacity: 0.45;
}

.espt-block-comparison .espt-cmp-ours .espt-cmp-val {
	color: var(--value-color, var(--check-color, var(--acc-dark)));
	font-weight: 700;
}

/* …and the "others" side reads a touch quieter, so the contrast survives
   even for a colour-blind visitor. */
.espt-block-comparison .espt-cmp-body .espt-cmp-theirs .espt-cmp-val {
	font-weight: 600;
	opacity: 0.92;
}

/* -------------------------------------------------- stripes / hover / hl */
.espt-block-comparison.is-stripe .espt-cmp-body .espt-cmp-row:nth-child(even) {
	background: var(--stripe-color, var(--stripe-bg));
}

.espt-block-comparison .espt-cmp-body .espt-cmp-row.is-hl {
	background: var(--hl-bg);
}

.espt-block-comparison .espt-cmp-body .espt-cmp-row.is-hl .espt-cmp-feature {
	font-weight: 800;
}

/* After .is-hl so a highlighted row still reacts to the cursor. */
.espt-block-comparison.is-row-hover .espt-cmp-body .espt-cmp-row:hover,
.espt-block-comparison.is-row-hover .espt-cmp-body .espt-cmp-row.is-hl:hover {
	background: color-mix(in srgb, var(--acc) 12%, transparent);
}

.espt-block-comparison.is-row-hover .espt-cmp-body .espt-cmp-row:hover .espt-cmp-mark-check {
	transform: scale(1.12);
}

/* ----------------------------------------------------------------- CTA */
.espt-block-comparison .espt-cmp-cta {
	margin-top: var(--cta-gap, 26px);
	text-align: center;
}

.espt-block-comparison.is-cta-align-left .espt-cmp-cta { text-align: left; }
.espt-block-comparison.is-cta-align-right .espt-cmp-cta { text-align: right; }

.espt-block-comparison .espt-cmp-cta .espt-cmp-cta-btn {
	background: var(--cta-bg, var(--espt-btn-bg, var(--acc)));
	border-radius: var(--cta-radius, 10px);
	color: var(--cta-color, #ffffff);
	display: inline-flex;
	font-size: var(--cta-size, 15px);
	font-weight: 700;
	gap: 9px;
	max-width: 100%;
	padding: 13px 26px;
	text-decoration: none;
	transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
	width: 100%;
}

.espt-block-comparison .espt-cmp-cta .espt-cmp-cta-btn:hover {
	box-shadow: 0 12px 24px -14px color-mix(in srgb, var(--cta-bg, var(--acc)) 90%, #000000);
	color: var(--cta-color, #ffffff);
	filter: brightness(1.07);
	transform: translateY(-1px);
}

.espt-block-comparison .espt-cmp-bt {
	min-width: 0;
	overflow-wrap: anywhere;
}

.espt-block-comparison .espt-cmp-bi {
	flex: 0 0 auto;
	font-size: 1.05em;
	transition: transform 0.2s ease, opacity 0.2s ease, max-width 0.25s ease, margin 0.25s ease;
}

.espt-block-comparison.is-cta-icon-anim-slide .espt-cmp-cta-btn:hover .espt-cmp-bi { transform: translateX(4px); }
.espt-block-comparison.is-cta-icon-anim-slide .espt-cmp-cta-btn.is-ico-before:hover .espt-cmp-bi { transform: translateX(-4px); }
.espt-block-comparison.is-cta-icon-anim-rotate .espt-cmp-cta-btn:hover .espt-cmp-bi { transform: rotate(180deg); }

/* The button keeps a 9px gap between its two children, so a collapsed icon
   has to pull that gap back in or the label sits off-centre until hover. */
.espt-block-comparison.is-cta-icon-anim-reveal .espt-cmp-bi {
	max-width: 0;
	opacity: 0;
	overflow: hidden;
}

.espt-block-comparison.is-cta-icon-anim-reveal .espt-cmp-cta-btn.is-ico-after .espt-cmp-bi { margin-left: -9px; }
.espt-block-comparison.is-cta-icon-anim-reveal .espt-cmp-cta-btn.is-ico-before .espt-cmp-bi { margin-right: -9px; }

.espt-block-comparison.is-cta-icon-anim-reveal .espt-cmp-cta-btn:hover .espt-cmp-bi {
	margin-left: 0;
	margin-right: 0;
	max-width: 2em;
	opacity: 1;
}

.espt-block-comparison.is-cta-icon-anim-bounce .espt-cmp-bi { animation: espt-cmp-bounce 1.4s ease-in-out infinite; }
.espt-block-comparison.is-cta-icon-anim-pulse .espt-cmp-bi { animation: espt-cmp-pulse 1.4s ease-in-out infinite; }

@keyframes espt-cmp-bounce {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(4px); }
}

@keyframes espt-cmp-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.18); }
}

.espt-block-comparison .espt-cmp-note {
	color: var(--bd-muted);
	font-size: 13px;
	line-height: 1.6;
	margin: 10px 0 0;
	overflow-wrap: anywhere;
}

/* --------------------------------------------- phones: stack / fit / scroll */
.espt-block-comparison.is-mobile-mode-stack .espt-cmp-row {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.espt-block-comparison.is-mobile-mode-stack .espt-cmp-feature {
	grid-column: 1 / -1;
}

.espt-block-comparison.is-mobile-mode-stack .espt-cmp-row-head .espt-cmp-feature:empty {
	display: none;
}

.espt-block-comparison.is-mobile-mode-stack .espt-cmp-body .espt-cmp-feature {
	background: color-mix(in srgb, var(--bd-ink) 3.5%, transparent);
	padding-bottom: calc(var(--cell-py, 12px) * 0.75);
	padding-top: calc(var(--cell-py, 12px) * 0.85);
}

.espt-block-comparison.is-mobile-mode-stack.is-design-dark .espt-cmp-body .espt-cmp-feature {
	background: rgba(255, 255, 255, 0.05);
}

.espt-block-comparison.is-mobile-mode-stack .espt-cmp-body .espt-cmp-cell[data-label] {
	flex-direction: column;
	gap: 5px;
	padding-top: calc(var(--cell-py, 12px) * 0.9);
}

.espt-block-comparison.is-mobile-mode-stack .espt-cmp-body .espt-cmp-cell[data-label]::before {
	color: var(--fsub-ink);
	content: attr(data-label);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.2;
	max-width: 100%;
	overflow-wrap: anywhere;
	text-transform: uppercase;
}

.espt-block-comparison.is-mobile-mode-stack .espt-cmp-body .espt-cmp-ours[data-label]::before {
	color: var(--check-color, var(--acc));
	opacity: 0.9;
}

.espt-block-comparison.is-mobile-mode-scroll .espt-cmp-scroll {
	margin-bottom: -8px;
	margin-top: -8px;
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 8px;
	padding-top: 8px;
	-webkit-overflow-scrolling: touch;
}

/* assets/js/blocks/comparison.js adds .has-more while columns are still
   hidden to the right — the edge fades out as a "scroll me" affordance. */
.espt-block-comparison.is-mobile-mode-scroll .espt-cmp-scroll.has-more {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}

.espt-block-comparison.is-mobile-mode-scroll .espt-cmp-table {
	min-width: 540px;
}

.espt-block-comparison.is-mobile-mode-fit .espt-cmp-cell {
	padding-left: calc(var(--cell-px, 10px) * 0.8);
	padding-right: calc(var(--cell-px, 10px) * 0.8);
}

/* Three columns inside 320px leave the badge ~70px — shrink it so it does
   not wrap to three lines. */
.espt-block-comparison.is-mobile-mode-fit .espt-cmp-badge {
	font-size: 10px;
	letter-spacing: 0.02em;
	padding: 2px 7px;
}

/* ------------------------------------------------- entrance (staggered) */
.espt-block-comparison.is-item-anim-fade .espt-cmp.is-ready .espt-cmp-anim,
.espt-block-comparison.is-item-anim-up .espt-cmp.is-ready .espt-cmp-anim,
.espt-block-comparison.is-item-anim-zoom .espt-cmp.is-ready .espt-cmp-anim {
	opacity: 0;
	will-change: opacity, transform;
}

.espt-block-comparison.is-item-anim-up .espt-cmp.is-ready .espt-cmp-anim { transform: translateY(22px); }
.espt-block-comparison.is-item-anim-zoom .espt-cmp.is-ready .espt-cmp-anim { transform: scale(0.94); }

.espt-block-comparison .espt-cmp.is-ready.is-inview .espt-cmp-anim {
	opacity: 1;
	transform: none;
	transition: opacity 0.5s ease, transform 0.5s ease;
	transition-delay: calc(var(--i, 0) * var(--stagger, 60ms));
	will-change: auto;
}

/* ---------------------------------------------------------- ≥ 480px */
@media (min-width: 480px) {
	.espt-block-comparison .espt-cmp-cta .espt-cmp-cta-btn {
		padding: 13px 30px;
		width: auto;
	}

	.espt-block-comparison.is-cta-full .espt-cmp-cta .espt-cmp-cta-btn {
		width: 100%;
	}
}

/* --------------------------------------------------- ≥ 768px (tablet) */
@media (min-width: 768px) {
	.espt-block-comparison .espt-cmp-row,
	.espt-block-comparison.is-mobile-mode-stack .espt-cmp-row {
		grid-template-columns: minmax(0, var(--fcol, 1.6fr)) minmax(0, 1fr) minmax(0, 1fr);
	}

	.espt-block-comparison.is-mobile-mode-stack.is-ours-frame,
	.espt-block-comparison.is-mobile-mode-stack.is-design-outline {
		--frame-w: 2px;
	}

	.espt-block-comparison.is-mobile-mode-stack .espt-cmp-feature {
		grid-column: auto;
	}

	.espt-block-comparison.is-mobile-mode-stack .espt-cmp-row-head .espt-cmp-feature:empty {
		display: flex;
	}

	.espt-block-comparison.is-mobile-mode-stack .espt-cmp-body .espt-cmp-feature {
		background: none;
		padding-bottom: var(--cell-py, 16px);
		padding-top: var(--cell-py, 16px);
	}

	.espt-block-comparison.is-mobile-mode-stack .espt-cmp-body .espt-cmp-cell[data-label] {
		flex-direction: row;
		gap: 0;
		padding-top: var(--cell-py, 16px);
	}

	.espt-block-comparison.is-mobile-mode-stack .espt-cmp-body .espt-cmp-cell[data-label]::before {
		content: none;
	}

	.espt-block-comparison.is-mobile-mode-scroll .espt-cmp-scroll,
	.espt-block-comparison.is-mobile-mode-scroll .espt-cmp-scroll.has-more {
		-webkit-mask-image: none;
		margin-bottom: 0;
		margin-top: 0;
		mask-image: none;
		overflow: visible;
		padding-bottom: 0;
		padding-top: 0;
	}

	.espt-block-comparison.is-mobile-mode-scroll .espt-cmp-table {
		min-width: 0;
	}

	.espt-block-comparison.is-mobile-mode-fit .espt-cmp-cell {
		padding-left: var(--cell-px, 14px);
		padding-right: var(--cell-px, 14px);
	}

	.espt-block-comparison.is-mobile-mode-fit .espt-cmp-badge {
		font-size: 11px;
		letter-spacing: 0.04em;
		padding: 3px 10px;
	}

	.espt-block-comparison .espt-cmp-flex {
		align-items: center;
		flex-direction: row;
	}

	.espt-block-comparison .espt-cmp-flex .espt-cmp-img {
		flex: 0 0 var(--image-width, 38%);
		max-width: none;
		width: auto;
	}

	.espt-block-comparison.is-image-position-right .espt-cmp-flex .espt-cmp-img {
		order: 2;
	}

	.espt-block-comparison .espt-cmp-flex .espt-cmp-main {
		flex: 1 1 auto;
	}
}

/* -------------------------------------------------- ≥ 1024px (desktop) */
@media (min-width: 1024px) {
	.espt-block-comparison .espt-cmp-badge {
		font-size: 11.5px;
	}

	.espt-block-comparison .espt-cmp-note {
		font-size: 14px;
	}
}

/* ----------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
	.espt-block-comparison.is-item-anim-fade .espt-cmp.is-ready .espt-cmp-anim,
	.espt-block-comparison.is-item-anim-up .espt-cmp.is-ready .espt-cmp-anim,
	.espt-block-comparison.is-item-anim-zoom .espt-cmp.is-ready .espt-cmp-anim {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.espt-block-comparison.is-cta-icon-anim-bounce .espt-cmp-bi,
	.espt-block-comparison.is-cta-icon-anim-pulse .espt-cmp-bi {
		animation: none;
	}

	.espt-block-comparison .espt-cmp-bi,
	.espt-block-comparison .espt-cmp-mark,
	.espt-block-comparison .espt-cmp-row,
	.espt-block-comparison .espt-cmp-cta-btn {
		transition: none;
	}

	.espt-block-comparison .espt-cmp-cta-btn:hover {
		transform: none;
	}
}