/* Local table, responsive scrolling and progressively enhanced interactions. */
.dyo-plan-comparison {
	--dyo-background: #fff;
	--dyo-text: #263238;
	--dyo-heading: #183b56;
	--dyo-accent: #2167ae;
	--dyo-border: #d8e1e8;
	--dyo-header-background: #fff;
	--dyo-header-align: center;
	--dyo-header-height: 0px;
	--dyo-header-gap: 0.75rem;
	--dyo-feature-width: 34%;
	--dyo-row-odd: #fff;
	--dyo-row-even: #f5f7fa;
	--dyo-row-hover: #eaf2f8;
	--dyo-highlight-background: #edf4fb;
	--dyo-included: #1c8b63;
	--dyo-excluded: #c74c4c;
	--dyo-icon-size: 1.25em;
	--dyo-mobile-feature-width: 180px;
	--dyo-mobile-plan-width: 205px;
	--dyo-sticky-offset: 80px;
	--dyo-effective-offset: var(--dyo-sticky-offset);
	--dyo-rail-height: 0px;
	position: relative;
	container-type: inline-size;
	container-name: dyo-comparison;
	min-width: 0;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	color: var(--dyo-text);
	background: var(--dyo-background);
	border: 1px solid var(--dyo-border);
	border-radius: 14px;
	font: inherit;
	text-align: start;
	overflow-wrap: anywhere;
}

.dyo-plan-comparison .dyo-plan-comparison__table {
	width: 100%;
	max-width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	color: inherit;
	background: transparent;
	font: inherit;
}

.dyo-plan-comparison .dyo-plan-comparison__table th,
.dyo-plan-comparison .dyo-plan-comparison__table td {
	box-sizing: border-box;
	padding-block: 1rem;
	padding-inline: 1rem;
	border: 0;
	border-block-end: 1px solid var(--dyo-border);
	border-inline-end: 1px solid var(--dyo-border);
	vertical-align: middle;
	white-space: normal;
	overflow-wrap: anywhere;
	line-height: 1.5;
}

.dyo-plan-comparison .dyo-plan-comparison__table tr > :last-child {
	border-inline-end-width: 0;
}

.dyo-plan-comparison .dyo-plan-comparison__feature-col {
	width: var(--dyo-feature-width);
}

.dyo-plan-comparison .dyo-plan-comparison__plan-col {
	width: calc((100% - var(--dyo-feature-width)) / 3);
}

.dyo-plan-comparison .dyo-plan-comparison__header-cell {
	height: var(--dyo-header-height);
	background-color: var(--dyo-header-background);
	color: var(--dyo-heading);
	text-align: var(--dyo-header-align);
	vertical-align: top;
}

.dyo-plan-comparison .dyo-plan-comparison__header-content {
	display: flex;
	flex-direction: column;
	gap: var(--dyo-header-gap);
	min-width: 0;
}

.dyo-plan-comparison .dyo-plan-comparison__plan-name {
	font-size: 1.25em;
	font-weight: 700;
}

.dyo-plan-comparison .dyo-plan-comparison__plan-description {
	font-size: 0.9em;
	font-weight: 400;
	color: var(--dyo-text);
}

.dyo-plan-comparison .dyo-plan-comparison__badge {
	align-self: center;
	max-width: 100%;
	padding-block: 0.2em;
	padding-inline: 0.65em;
	border-radius: 14px;
	background-color: var(--dyo-accent);
	color: #fff;
	font-size: 0.8em;
	font-weight: 600;
}

.dyo-plan-comparison .dyo-plan-comparison__price-amount {
	font-size: 1.5em;
	font-weight: 700;
}

.dyo-plan-comparison .dyo-plan-comparison__currency,
.dyo-plan-comparison .dyo-plan-comparison__price-suffix {
	font-size: 0.85em;
	font-weight: 400;
}

.dyo-plan-comparison .dyo-plan-comparison__category-cell {
	background-color: #f5f7fa;
	color: var(--dyo-heading);
	text-align: start;
	font-weight: 700;
}

.dyo-plan-comparison .dyo-plan-comparison__category-description {
	display: block;
	margin-block-start: 0.35em;
	font-size: 0.9em;
	font-weight: 400;
}

.dyo-plan-comparison .dyo-plan-comparison--odd {
	--dyo-row-background: var(--dyo-row-odd);
}

.dyo-plan-comparison .dyo-plan-comparison--even {
	--dyo-row-background: var(--dyo-row-even);
}

.dyo-plan-comparison .dyo-plan-comparison__feature-row > th,
.dyo-plan-comparison .dyo-plan-comparison__feature-row > td {
	height: 56px; /* Table-cell height is a minimum; wrapping grows the row. */
	background-color: var(--dyo-row-background);
}

.dyo-plan-comparison .dyo-plan-comparison__feature {
	text-align: start;
	font-weight: 600;
}

.dyo-plan-comparison .dyo-plan-comparison__feature-row > .dyo-plan-comparison__feature {
	background-color: var(--dyo-feature-background, var(--dyo-row-background));
}

.dyo-plan-comparison .dyo-plan-comparison__value {
	text-align: center;
	font-weight: 400;
}

.dyo-plan-comparison .dyo-plan-comparison__plan-cell.is-recommended {
	background-color: var(--dyo-highlight-background);
	border-inline-color: var(--dyo-accent);
	box-shadow: inset 1px 0 var(--dyo-accent), inset -1px 0 var(--dyo-accent);
}

.dyo-plan-comparison .dyo-plan-comparison__status {
	display: inline-block;
	min-width: 1em;
	font-size: var(--dyo-icon-size);
	font-weight: 700;
	line-height: 1;
	vertical-align: middle;
}

.dyo-plan-comparison .dyo-plan-comparison--included {
	color: var(--dyo-included);
}

.dyo-plan-comparison .dyo-plan-comparison--excluded {
	color: var(--dyo-excluded);
}

.dyo-plan-comparison .dyo-plan-comparison__info {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	min-inline-size: 1.25rem;
	min-block-size: 1.25rem;
	margin-inline-start: 0.35em;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	color: #657784;
	background: transparent;
	font-family: inherit;
	font-size: 0.7rem;
	font-weight: 600;
	line-height: 1;
	vertical-align: middle;
}

.dyo-plan-comparison .dyo-plan-comparison__info:hover,
.dyo-plan-comparison .dyo-plan-comparison__info:focus-visible {
	color: var(--dyo-accent);
	background-color: #eaf2f8;
}

.dyo-plan-comparison .dyo-plan-comparison__details {
	text-align: start;
	font-weight: 400;
}

.dyo-plan-comparison .dyo-plan-comparison__details > :first-child {
	margin-block-start: 0;
}

.dyo-plan-comparison .dyo-plan-comparison__details > :last-child {
	margin-block-end: 0;
}

.dyo-plan-comparison .dyo-plan-comparison__details img,
.dyo-plan-comparison .dyo-plan-comparison__details video {
	max-width: 100%;
	height: auto;
}

.dyo-plan-comparison .dyo-plan-comparison__cta {
	display: inline-block;
	max-width: 100%;
	box-sizing: border-box;
	padding-block: 0.65em;
	padding-inline: 1em;
	border: 1px solid transparent;
	border-radius: 14px;
	color: #fff;
	background-color: var(--dyo-accent);
	font: inherit;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	white-space: normal;
}

.dyo-plan-comparison .dyo-plan-comparison__cta:hover,
.dyo-plan-comparison .dyo-plan-comparison__cta:focus-visible {
	color: #fff;
	background-color: var(--dyo-heading);
}

.dyo-plan-comparison a:focus-visible {
	outline: 3px solid var(--dyo-accent);
	outline-offset: 3px;
}

.dyo-plan-comparison button:focus-visible,
.dyo-plan-comparison .dyo-plan-comparison__scroll:focus-visible {
	outline: 3px solid var(--dyo-accent);
	outline-offset: -3px;
}

.dyo-plan-comparison .dyo-plan-comparison__intro,
.dyo-plan-comparison .dyo-plan-comparison__outro {
	padding-block: 1rem;
	padding-inline: 1rem;
}

.dyo-plan-comparison .dyo-plan-comparison__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (hover: hover) and (pointer: fine) {
	.dyo-plan-comparison .dyo-plan-comparison__feature-row:hover > th,
	.dyo-plan-comparison .dyo-plan-comparison__feature-row:hover > td {
		background-color: var(--dyo-row-hover);
	}
}

.dyo-plan-comparison__editor-notice {
	box-sizing: border-box;
	padding-block: 1rem;
	padding-inline: 1rem;
	border: 1px dashed currentColor;
	text-align: start;
	overflow-wrap: anywhere;
}

/* Auto direction inherits naturally; explicit direction is scoped per instance. */
.dyo-plan-comparison[dir="rtl"] {
	direction: rtl;
}

.dyo-plan-comparison[dir="ltr"] {
	direction: ltr;
}

.dyo-plan-comparison [hidden] {
	display: none !important;
}

.dyo-plan-comparison .dyo-plan-comparison__table-area {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	border-radius: inherit;
	overflow: clip;
}

.dyo-plan-comparison .dyo-plan-comparison__scroll {
	position: relative;
	grid-area: 1 / 1;
	min-width: 0;
	border-radius: inherit;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	max-width: 100%;
	scroll-padding-inline-start: calc(var(--dyo-mobile-feature-width) + 8px);
}

.dyo-plan-comparison .dyo-plan-comparison__scroll-hint {
	display: none;
	margin: 0;
	padding-block: 0.5rem;
	padding-inline: 1rem;
	font-size: 0.85em;
}

/* Container width also handles widgets placed inside a narrow desktop column. */
@container dyo-comparison (max-width: 1024px) {
	.dyo-plan-comparison .dyo-plan-comparison__table {
		min-width: calc(var(--dyo-mobile-feature-width) + 3 * var(--dyo-mobile-plan-width));
	}
	.dyo-plan-comparison .dyo-plan-comparison__feature-col {
		width: var(--dyo-mobile-feature-width);
	}
	.dyo-plan-comparison .dyo-plan-comparison__plan-col {
		width: var(--dyo-mobile-plan-width);
	}
	.dyo-plan-comparison .dyo-plan-comparison__scroll .dyo-plan-comparison__feature {
		position: sticky;
		inset-inline-start: 0;
		z-index: 2;
		background-color: var(--dyo-feature-background, var(--dyo-row-background, var(--dyo-background)));
	}
	.dyo-plan-comparison .dyo-plan-comparison__scroll .dyo-plan-comparison__header-cell.dyo-plan-comparison__feature {
		z-index: 3;
		background-color: var(--dyo-header-background);
	}
	.dyo-plan-comparison .dyo-plan-comparison__scroll .dyo-plan-comparison__feature::after {
		content: '';
		position: absolute;
		inset-block: 0;
		inset-inline-end: 0;
		inline-size: 1px;
		box-shadow: 0 0 8px 2px #183b5626;
		clip-path: inset(0 -8px);
		pointer-events: none;
	}
	.dyo-plan-comparison .dyo-plan-comparison__scroll-hint {
		display: block;
	}
}

.dyo-plan-comparison .dyo-plan-comparison__category-anchor {
	display: block;
	position: relative;
	scroll-margin-block-start: calc(var(--dyo-effective-offset) + var(--dyo-rail-height) + 16px);
}

.dyo-plan-comparison .dyo-plan-comparison__sentinel {
	position: absolute;
	inset-block-start: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

/* Outside overflow-x: auto, so native CSS sticky follows the page viewport. */
.dyo-plan-comparison .dyo-plan-comparison__sticky {
	position: sticky;
	grid-area: 1 / 1;
	align-self: start;
	inset-block-start: var(--dyo-effective-offset);
	z-index: 5;
	height: var(--dyo-rail-height);
	border-start-start-radius: inherit;
	border-start-end-radius: inherit;
	visibility: hidden;
	pointer-events: none;
}

.dyo-plan-comparison .dyo-plan-comparison__sticky.is-sticky {
	visibility: visible;
}

.dyo-plan-comparison .dyo-plan-comparison__sticky-viewport {
	position: relative;
	overflow: hidden;
	border-start-start-radius: inherit;
	border-start-end-radius: inherit;
	background-color: var(--dyo-header-background);
	border-block-end: 1px solid var(--dyo-border);
}

.dyo-plan-comparison .dyo-plan-comparison__sticky-track {
	display: flex;
	align-items: stretch;
	will-change: transform;
}

.dyo-plan-comparison .dyo-plan-comparison__sticky-cell {
	box-sizing: border-box;
	flex: 0 0 auto;
	height: auto;
	padding-block: 0.65rem;
	padding-inline: 1rem;
	border-inline-end: 1px solid var(--dyo-border);
	font-weight: 600;
}

.dyo-plan-comparison .dyo-plan-comparison__sticky-corner {
	position: absolute;
	inset-inline-start: 0;
	inset-block: 0;
	z-index: 1;
	background-color: var(--dyo-header-background);
}

/* Put the shadow at inline-end, not around the column. Logical positioning
 * follows computed direction, including Auto inherited through ancestor CSS. */
.dyo-plan-comparison .dyo-plan-comparison__sticky-corner::after {
	content: '';
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	inline-size: 1px;
	box-shadow: 0 0 8px 2px #183b5626;
	clip-path: inset(0 -8px);
	pointer-events: none;
}

.dyo-plan-comparison .dyo-plan-comparison__info-button {
	appearance: none;
	cursor: help;
}

.dyo-plan-comparison .dyo-plan-comparison__info-button:focus-visible {
	outline-offset: 2px;
}

.dyo-plan-comparison .dyo-plan-comparison__details-button {
	display: block;
	min-height: 44px;
	margin-block-start: 0.25em;
	padding-block: 0.35em;
	padding-inline: 0.5em;
	border: 1px solid var(--dyo-border);
	border-radius: 4px;
	background: var(--dyo-background);
	color: var(--dyo-accent);
	font: inherit;
	font-size: 0.85em;
	cursor: pointer;
}

.dyo-plan-comparison .dyo-plan-comparison__details-button::before {
	content: '+';
	display: inline-block;
	width: 1em;
	margin-inline-end: 0.25em;
}

.dyo-plan-comparison .dyo-plan-comparison__details-button[aria-expanded="true"]::before {
	content: '−';
}

.dyo-plan-comparison .dyo-plan-comparison__tooltip {
	position: absolute;
	z-index: 10;
	box-sizing: border-box;
	max-width: 280px;
	padding: 0.55rem 0.7rem;
	border-radius: 6px;
	background: var(--dyo-heading);
	color: #fff;
	box-shadow: 0 4px 16px #183b5633;
	font-weight: 400;
	font-size: 0.85rem;
	line-height: 1.5;
	text-align: start;
	white-space: pre-line;
	overflow: auto;
	overscroll-behavior: contain;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.dyo-plan-comparison *,
	.dyo-plan-comparison *::before {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}