/*
 * Pricing – Key features comparison (Figma 847:3397, 1280×2518, 104px after it).
 * Section Divider (24) · 40 · "lists" (2454): a 1px #e5e5e5 frame, radius 12, holding the sticky plan header
 * (160) and the feature groups. Columns are 288 | 248 × 4 in the header and in every table
 * (22.5% | 19.375% of 1280, so they stay aligned when the section shrinks).
 *
 * Figma strokes here are inside strokes that take no space (0.5px row/cell lines, 1px header and frame
 * lines), so they are drawn with inset box-shadows / an overlay instead of borders.
 */

.rs-pr-compare {
	--rs-cmp-line: var(--wp--preset--color--gray-10);
	--rs-cmp-group-bg: #f2f2f2; /* Figma -pricingTitle fill; not in the palette */
	--rs-cmp-col-1: 22.5%;
	--rs-cmp-col: 19.375%;
	/* Below the floating header pill (24 + 56 + 16), or 16px from the top while header.js hides it. */
	--rs-cmp-top: var(--rs-header-clearance, calc(96px + var(--wp-admin--admin-bar--height, 0px)));
}

/*
 * Section Divider: the label hugs 244px, so the Figma rule is 972px long: dashes 9.908 every 19.816px,
 * starting with a 5.454px dash.
 */
.rs-pr-compare .rs-eyebrow.has-rule {
	--rs-rule-period: 19.8164px;
	--rs-rule-offset: -4.454px;
}

/* Figma's label box is 244 wide (the rule starts at x 308); the CSS label is ~1.6px wider. */
.rs-pr-compare .rs-eyebrow.has-rule::after {
	margin-left: calc(7px - 0.04em);
}

/* ---- "lists" frame ---- */
.rs-pr-compare__table {
	position: relative;
	border-radius: var(--wp--preset--border-radius--12);
	overflow: clip; /* rounds the corners without becoming a scroll container (keeps position: sticky working) */
}

/* The frame's 1px stroke is drawn over the content, like Figma's inside stroke. */
.rs-pr-compare__table::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border: 1px solid var(--rs-cmp-line);
	border-radius: inherit;
	pointer-events: none;
}

.rs-pr-compare .rs-pr-compare__table > *,
.rs-pr-compare .wp-block-details > * {
	margin-block: 0;
}

/* ---- Sticky plan header (445:2131, 160 tall) ---- */
.rs-pr-compare__plans {
	position: relative;
	z-index: 2;
	background: var(--wp--preset--color--white);
	box-shadow: 0 0.5px 0 var(--rs-cmp-line); /* on top of the first group's own line; separates the stuck header from the rows */
}

/* Front end only: not in the editor, and not in the QA preview (the section sits at y 0 there, above the sticky offset). */
body:not(.editor-styles-wrapper):not(.rs-preview) .rs-pr-compare__plans {
	position: sticky;
	top: var(--rs-cmp-top);
	transition: top 0.3s ease, box-shadow 0.2s ease; /* slides with the header as it hides / comes back */
}

/* Not in Figma (on request 2026-10-02): while rows scroll under the stuck header, a soft shadow below it
   (assets/js/compare.js adds .is-stuck once the header has left its place at the top of the table). */
.rs-pr-compare .rs-pr-compare__plans.is-stuck {
	box-shadow: 0 0.5px 0 var(--rs-cmp-line), 0 8px 18px -8px rgba(0, 0, 0, 0.16);
}

@media (prefers-reduced-motion: reduce) {
	body:not(.editor-styles-wrapper):not(.rs-preview) .rs-pr-compare__plans,
	body:not(.editor-styles-wrapper):not(.rs-preview) .rs-pr-compare__plans::before,
	.rs-tip-bubble {
		transition: none;
		animation: none;
	}
}

/* While stuck, a white band up to the viewport top hides the rows behind the floating header pill.
   The frame's overflow: clip cuts it off when the header is in its normal place. */
body:not(.editor-styles-wrapper):not(.rs-preview) .rs-pr-compare__plans::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 100%;
	left: 0;
	height: var(--rs-cmp-top);
	background: var(--wp--preset--color--white);
	pointer-events: none;
	transition: height 0.3s ease;
}

/* Empty first column: 288 × 156, centred, 1px line on its right. */
.rs-pr-compare .rs-pr-compare__corner {
	flex: 0 0 var(--rs-cmp-col-1);
	align-self: center;
	min-width: 0;
	box-shadow: inset -1px 0 0 var(--rs-cmp-line);
}

.rs-pr-compare .rs-plan {
	flex: 0 0 var(--rs-cmp-col);
	min-width: 0;
	box-sizing: border-box;
}

.rs-pr-compare .rs-plan:not(:last-child) {
	box-shadow: inset -1px 0 0 var(--rs-cmp-line);
}

.rs-pr-compare .rs-plan__head {
	align-self: stretch;
}

/* Buttons sit at the bottom, so they line up when a price wraps (Free has no regular price). */
.rs-pr-compare .rs-plan > .wp-block-buttons {
	margin-top: auto;
}

/* "$49 /year $89": price and unit share a baseline (one Figma text with a 24px space), the regular price is centred 8px after. */
.rs-pr-compare .rs-plan__prices {
	align-items: baseline;
	min-height: 40px;
	box-sizing: border-box;
}

.rs-pr-compare .rs-plan__price {
	white-space: nowrap;
}

/* Figma sets the mixed-size "$49 /year" line 1px lower than Chrome does. */
.rs-pr-compare .rs-plan__prices > :is(.rs-plan__price, .rs-plan__unit) {
	position: relative;
	top: 1px;
}

.rs-pr-compare .rs-plan__prices > .rs-plan__unit {
	margin-left: 4.86px; /* the Figma text's space: Stack Sans Headline Medium 24px */
	white-space: nowrap;
}

.rs-pr-compare .rs-plan__prices > .rs-plan__was {
	align-self: center;
	margin-left: 8.9px; /* Figma's 8px gap after the "$49 /year" text box, which Figma rounds up to whole px (+0.8), and the unit's trailing -0.1px tracking */
	text-decoration-thickness: from-font;
	text-decoration-skip-ink: none;
}

/* ---- Feature groups: core/details (summary = group name) ---- */
.rs-pr-compare .wp-block-details > summary {
	display: flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	list-style: none;
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 500;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--black);
	box-shadow: inset 0 0.5px 0 var(--rs-cmp-line);
}

.rs-pr-compare .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.rs-pr-compare .wp-block-details > summary::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background-color: var(--wp--preset--color--text-tertiary);
	-webkit-mask: var(--rs-caret) center / 20px no-repeat;
	mask: var(--rs-caret) center / 20px no-repeat;
	transition: transform 0.15s ease;
}

.rs-pr-compare .wp-block-details:not([open]) > summary::before {
	transform: rotate(-90deg);
}

.rs-pr-compare .wp-block-details > summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--purple-100);
	outline-offset: -2px;
}

/* Group title (-pricingTitle 445:2208): grey band, filled caret, Inter Medium 18/26. */
.rs-pr-compare__group > summary {
	min-height: 46px;
	padding: 10px 16px;
	background: var(--rs-cmp-group-bg);
	font-size: var(--wp--preset--font-size--body);
	line-height: 26px;
	--rs-caret: url("../../images/pricing/compare/caret-group.svg");
}

/* Sub-group title (-pricingTitle 1183:21974): white, outline caret, Inter Medium 16/24. */
.rs-pr-compare__sub > summary {
	min-height: 46px;
	padding: 11px 8px;
	font-size: var(--wp--preset--font-size--paragraph);
	line-height: 24px;
	--rs-caret: url("../../images/pricing/compare/caret-sub.svg");
}

/* ---- Feature rows: core/table ---- */
.rs-pr-compare .rs-pr-compare__rows {
	margin: 0;
	overflow: visible;
}

.rs-pr-compare__rows table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
}

.rs-pr-compare__rows :is(thead, tbody, tfoot) {
	border: 0;
}

/* Rows 48 tall: 0.5px line on top of each row and right of each cell but the last. */
.rs-pr-compare__rows :is(th, td) {
	box-sizing: border-box;
	height: 48px;
	padding: 12px 8px;
	border: 0;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--paragraph);
	font-weight: 400;
	line-height: 24px;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--text-secondary);
	text-align: center;
	vertical-align: middle;
	box-shadow: inset 0 0.5px 0 var(--rs-cmp-line), inset -0.5px 0 0 var(--rs-cmp-line);
}

.rs-pr-compare__rows :is(th, td):first-child {
	width: var(--rs-cmp-col-1);
	padding: 12px 12px 12px 16px;
	text-align: left;
}

.rs-pr-compare__rows :is(th, td):last-child {
	box-shadow: inset 0 0.5px 0 var(--rs-cmp-line);
}

/* Plan names for screen readers: the header row stays in the table but takes no space. */
.rs-pr-compare .rs-pr-compare__rows thead :is(th, td) {
	height: 0;
	padding-block: 0;
	line-height: 0;
	white-space: nowrap;
	box-shadow: none;
	clip-path: inset(50%);
}

/* In the editor, show that row (small, grey) so editors can see the columns. */
.editor-styles-wrapper .rs-pr-compare .rs-pr-compare__rows thead :is(th, td) {
	height: auto;
	padding-block: 4px;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 16px;
	color: var(--wp--preset--color--text-muted);
	clip-path: none;
}

/*
 * Feature name with a tooltip in the product: Figma's 1px #999 dashed bottom border. Figma fits ~4px dashes /
 * 4px gaps to the text width, starting and ending with a half dash: a tile [½ dash, gap, ½ dash] with
 * background-repeat: round does the same.
 */
.rs-pr-compare__rows :is(th, td):first-child span[style*="underline"] {
	--rs-tip-dash: var(--wp--preset--color--text-muted);
	padding-bottom: 2.8125px; /* content-area bottom (21.69) → 24.5, so the 1px line sits at 23.5–24.5 of the 24px line */
	text-decoration: none !important; /* the Underline format's inline style */
	background: linear-gradient(90deg, var(--rs-tip-dash) 25%, transparent 25% 75%, var(--rs-tip-dash) 75%) 0 100% / 8px 1px;
	background-repeat: round no-repeat;
}

/*
 * Feature descriptions (not in Figma; on request 2026-10-02). The text after a feature name carries the
 * "Feature description" format (span.rs-tip__text, assets/js/editor-formats.js). In the editor, and on the
 * site without JavaScript, it's a small grey line under the name. With JavaScript (html.rs-js) it's hidden
 * and assets/js/compare.js wraps the name in a focusable .rs-tip that shows it in a tooltip (.rs-tip-bubble)
 * on hover, keyboard focus or tap.
 */
.rs-pr-compare__rows .rs-tip__text {
	display: block;
	margin-top: 2px;
	color: var(--wp--preset--color--text-tertiary);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 18px;
	letter-spacing: 0;
}

.rs-js .rs-pr-compare__rows .rs-tip__text {
	display: none;
}

.rs-pr-compare__rows .rs-tip {
	border-radius: 2px;
	cursor: help;
}

.rs-pr-compare__rows .rs-tip:is(:hover, .is-open) {
	color: var(--wp--preset--color--black);
}

.rs-pr-compare__rows .rs-tip:is(:hover, .is-open) span[style*="underline"] {
	--rs-tip-dash: var(--wp--preset--color--text-secondary);
}

.rs-pr-compare__rows .rs-tip:focus-visible {
	outline: 2px solid var(--wp--preset--color--purple-100);
	outline-offset: 2px;
}

/* One shared bubble, fixed to the viewport (so the table's overflow: clip can't cut it), above the header. */
.rs-tip-bubble {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	box-sizing: border-box;
	width: max-content;
	max-width: min(280px, calc(100vw - 16px));
	padding: 8px 12px;
	border-radius: 8px;
	background: var(--wp--preset--color--ink-deep);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	line-height: 20px;
	letter-spacing: -0.005em;
	text-align: left;
	box-shadow: var(--wp--preset--shadow--elevated);
	pointer-events: none;
	animation: rs-tip-in 0.12s ease-out;
}

.rs-tip-bubble[hidden] {
	display: none;
}

/* Arrow, centred on the feature name (--rs-tip-arrow, set by compare.js). */
.rs-tip-bubble::after {
	content: "";
	position: absolute;
	left: var(--rs-tip-arrow, 50%);
	width: 10px;
	height: 10px;
	margin-left: -5px;
	border-radius: 2px;
	background: inherit;
	transform: rotate(45deg);
}

.rs-tip-bubble[data-side="top"]::after {
	bottom: -4px;
}

.rs-tip-bubble[data-side="bottom"]::after {
	top: -4px;
}

@keyframes rs-tip-in {
	from {
		opacity: 0;
	}
}

/* Tick: the CheckCircle icon (24px, cyan-100) as an inline image. */
.rs-pr-compare__rows img.rs-check {
	display: inline-block;
	width: 24px;
	height: 24px;
	vertical-align: top;
}

/* ---- Responsive (no Figma designs below 1280; columns keep their 288:248 ratio down to 782) ---- */

/* < 1280: a plan column is < 232px, too narrow for "$199 /year $399" — the regular price takes its own line. */
@media (max-width: 1279px) {
	.rs-pr-compare .rs-plan__prices {
		flex-wrap: wrap;
	}

	.rs-pr-compare .rs-plan__prices > .rs-plan__was {
		flex-basis: 100%;
		align-self: auto;
		margin-left: 0;
	}

	/* The header grows, so the empty corner (156px in Figma) spans it. */
	.rs-pr-compare .rs-pr-compare__plans > .rs-pr-compare__corner {
		align-self: stretch;
		height: auto !important; /* the Spacer block's height is an inline style */
	}
}

/* < 1024: tighter header columns, smaller unit, buttons fill the column. */
@media (max-width: 1023px) {
	.rs-pr-compare .rs-pr-compare__plans > .rs-plan {
		padding: 16px 12px !important; /* the block's own padding is an inline style */
	}

	.rs-pr-compare .rs-plan__prices {
		--wp--preset--font-size--heading-6: 16px;
	}

	.rs-pr-compare .rs-plan__prices > .rs-plan__unit {
		margin-left: 4px;
	}

	.rs-pr-compare .rs-plan > .wp-block-buttons,
	.rs-pr-compare .rs-plan .rs-plan__buy,
	.rs-pr-compare .rs-plan .rs-plan__buy > .wp-block-button__link {
		width: 100%;
	}

	.rs-pr-compare .rs-plan .rs-plan__buy > .wp-block-button__link {
		box-sizing: border-box;
		padding-inline: 8px;
	}

	.rs-pr-compare .rs-plan .rs-plan__buy.is-style-outline > .wp-block-button__link {
		padding-inline: 7px;
	}

	/* Room for the longest single words ("Recommendations") in the narrower first column. */
	.rs-pr-compare__rows :is(th, td):first-child {
		padding-inline: 12px 8px;
	}
}

/*
 * < 782: five columns don't fit. The sticky header keeps only the four plans (name + price, centred; the
 * hero's plan cards above carry the buttons), and each feature row becomes the feature name on a full-width
 * line with the four plan cells under it, lined up with the header columns.
 */
@media (max-width: 781px) {
	.rs-pr-compare .rs-pr-compare__plans > .rs-pr-compare__corner,
	.rs-pr-compare .rs-plan > .wp-block-buttons {
		display: none;
	}

	.rs-pr-compare .rs-pr-compare__plans > .rs-plan {
		flex: 1 1 0;
		align-items: center;
		padding: 10px 4px !important;
		text-align: center;
		--wp--preset--font-size--heading-6: 13px;
		--wp--preset--font-size--heading-4: 18px;
	}

	.rs-pr-compare .rs-plan__head {
		align-items: center;
	}

	.rs-pr-compare .rs-plan__prices {
		justify-content: center;
		min-height: 0;
		padding-block: 0 !important;
		--wp--preset--font-size--heading-6: 12px;
	}

	.rs-pr-compare .rs-plan__prices > .rs-plan__unit {
		margin-left: 2px;
	}

	.rs-pr-compare .rs-plan__prices > :is(.rs-plan__price, .rs-plan__unit) {
		top: 0;
	}

	.rs-pr-compare__group > summary {
		padding-inline: 12px;
	}

	.rs-pr-compare__rows table,
	.rs-pr-compare__rows :is(thead, tbody) {
		display: block;
	}

	.rs-pr-compare__rows tr {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.rs-pr-compare__rows :is(th, td) {
		height: auto;
		padding: 4px 4px 12px;
		font-size: var(--wp--preset--font-size--sm);
		line-height: 20px;
		box-shadow: inset -0.5px 0 0 var(--rs-cmp-line);
	}

	.rs-pr-compare__rows :is(th, td):first-child {
		grid-column: 1 / -1;
		width: auto;
		padding: 12px 12px 4px;
		font-size: var(--wp--preset--font-size--paragraph);
		line-height: 24px;
		box-shadow: inset 0 0.5px 0 var(--rs-cmp-line);
	}

	.rs-pr-compare__rows :is(th, td):last-child {
		box-shadow: none;
	}

	.rs-pr-compare__rows img.rs-check {
		width: 20px;
		height: 20px;
	}
}

/*
 * Show / hide (not in Figma; assets/js/compare-toggle.js). When the page has the "Key Features
 * Comparison" toggle (pr-hero), the section starts open and the toggle collapses it (.is-collapsed).
 * Without JavaScript (no html.rs-js), or on a page without the toggle, it always shows.
 */
.rs-js body:has(.rs-compare-toggle) .rs-pr-compare.is-collapsed {
	display: none;
}

/* The toggle button already says "Key Features Comparison": keep the label for screen readers only,
   and sit the table 40px under the button (cancelling the hero's 32px stage padding + 104px gap). */
.rs-js body:has(.rs-compare-toggle) .rs-pr-compare > .rs-eyebrow {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.rs-js body:has(.rs-compare-toggle) .rs-sections > .rs-pr-compare:not(.is-collapsed) {
	margin-top: calc(-1 * var(--wp--preset--spacing--104) - 32px);
}