/*
 * LAFU Rivi layout tables (pricing, comparison). Used on the site and in the
 * admin builder. Inherits the theme: fonts, text colour and theme.json accent.
 *
 * Sizes follow the table's own width (container query units), not the screen:
 * a column is --rv-col wide, and headings, big figures and buttons scale to it
 * from the length of their longest line (--rv-ch, set by the renderer), so a
 * price stays on one line wherever it can. Plan grids (rv-l-stack) show each
 * plan as a card when the columns get too narrow; comparison grids scroll
 * with their row labels kept in view.
 */

.lafu-rivi-layout-wrap {
	container: rvl / inline-size;
	width: 100%;
	margin: 0 0 1.5em;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.lafu-rivi-layout {
	--rv-l-accent: var(--wp--preset--color--primary, var(--wp--preset--color--accent, #4f46e5));
	--rv-l-line: color-mix(in srgb, currentcolor 12%, transparent);
	--rv-l-soft: color-mix(in srgb, currentcolor 4%, transparent);
	--rv-l-radius: 10px;
	--rv-col: max(150px, 100cqi / var(--rv-cols, 3));
	--rv-pad: clamp(10px, calc(var(--rv-col) * 0.09), 20px);
	width: 100%;
	min-width: calc(var(--rv-cols, 3) * 150px);
	margin: 0;
	border: 1px solid var(--rv-l-line);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--rv-l-radius);
	/* Clip keeps the round corners without making the table a scroll box, so sticky labels stick to the wrapper. */
	overflow: hidden;
	overflow: clip;
	font: inherit;
	line-height: 1.5;
	table-layout: fixed;
	text-transform: none;
}

.lafu-rivi-layout caption {
	padding: 0 0 0.75em;
	font-weight: 600;
	text-align: left;
}

.lafu-rivi-layout .rv-l-cell {
	--rv-fit: calc(var(--rv-col) * var(--rv-span, 1) - 2 * var(--rv-pad));
	padding: clamp(12px, calc(var(--rv-col) * 0.08), 18px) var(--rv-pad);
	border: 0;
	border-bottom: 1px solid var(--rv-l-line);
	border-right: 1px solid var(--rv-l-line);
	background-clip: padding-box;
	font-weight: inherit;
	text-transform: none;
	letter-spacing: normal;
	vertical-align: middle;
}

.lafu-rivi-layout .rv-l-cell.rv-l-top {
	vertical-align: top;
}

.lafu-rivi-layout tr > .rv-l-cell:last-child {
	border-right: 0;
}

.lafu-rivi-layout tbody tr:last-child > .rv-l-cell {
	border-bottom: 0;
}

.lafu-rivi-layout th.rv-l-cell {
	font-weight: 600;
}

.lafu-rivi-layout .rv-l-align-left {
	text-align: left;
}

.lafu-rivi-layout .rv-l-align-center {
	text-align: center;
}

.lafu-rivi-layout .rv-l-align-right {
	text-align: right;
}

.lafu-rivi-layout .rv-l-cell.is-highlight {
	background-color: color-mix(in srgb, var(--rv-l-accent) 6%, transparent);
}

.lafu-rivi-layout .rv-l-cell > * + * {
	margin-top: 10px;
}

.lafu-rivi-layout .rv-l-text {
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
}

.lafu-rivi-layout .rv-l-text--h3 {
	display: block;
	font-size: clamp(0.875em, var(--rv-fit) / (var(--rv-ch, 1) * 0.55), 1.25em);
	font-weight: 700;
	line-height: 1.25;
}

.lafu-rivi-layout .rv-l-text--h4 {
	display: block;
	font-size: clamp(0.8125em, var(--rv-fit) / (var(--rv-ch, 1) * 0.55), 1.05em);
	font-weight: 600;
	line-height: 1.3;
}

.lafu-rivi-layout .rv-l-text--strong {
	display: block;
	font-size: clamp(0.75em, var(--rv-fit) / (var(--rv-ch, 1) * 0.55), 2em);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.lafu-rivi-layout .rv-l-text--p {
	display: block;
}

.lafu-rivi-layout .rv-l-text--small {
	display: block;
	font-size: 0.85em;
}

.lafu-rivi-layout .rv-l-button {
	display: inline-block;
	box-sizing: border-box;
	min-width: 60%;
	max-width: 100%;
	padding: 0.7em 0.8em;
	border: 2px solid var(--rv-l-accent);
	border-radius: 8px;
	background: var(--rv-l-accent);
	color: #fff;
	font: inherit;
	font-size: clamp(0.6875em, var(--rv-fit) / (var(--rv-ch, 1) * 0.62 + 2.4), 1em);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	text-wrap: balance;
	letter-spacing: normal;
	box-shadow: none;
	transition: filter 0.15s ease, background 0.15s ease;
}

.lafu-rivi-layout .rv-l-button:hover,
.lafu-rivi-layout .rv-l-button:focus {
	filter: brightness(0.92);
	color: #fff;
}

.lafu-rivi-layout .rv-l-button:focus-visible {
	outline: 2px solid var(--rv-l-accent);
	outline-offset: 2px;
}

.lafu-rivi-layout .rv-l-button--outline {
	background: transparent;
	color: var(--rv-l-accent);
}

.lafu-rivi-layout .rv-l-button--outline:hover,
.lafu-rivi-layout .rv-l-button--outline:focus {
	background: color-mix(in srgb, var(--rv-l-accent) 8%, transparent);
	color: var(--rv-l-accent);
	filter: none;
}

.lafu-rivi-layout .rv-l-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
}

.lafu-rivi-layout .rv-l-icon svg {
	display: block;
	width: 1.35em;
	height: 1.35em;
}

.lafu-rivi-layout .rv-l-icon--check {
	color: #16a34a;
}

.lafu-rivi-layout .rv-l-icon--x {
	color: #dc2626;
}

.lafu-rivi-layout .rv-l-icon--minus {
	color: color-mix(in srgb, currentcolor 45%, transparent);
}

.lafu-rivi-layout .rv-l-icon--star {
	color: #f59e0b;
}

.lafu-rivi-layout .rv-l-rating {
	display: inline-flex;
	gap: 2px;
	vertical-align: middle;
}

.lafu-rivi-layout .rv-l-star svg {
	display: block;
	width: 1.1em;
	height: 1.1em;
}

.lafu-rivi-layout .rv-l-star.is-full {
	color: #f59e0b;
}

.lafu-rivi-layout .rv-l-star.is-full svg {
	fill: currentcolor;
}

.lafu-rivi-layout .rv-l-star.is-half {
	color: #f59e0b;
}

.lafu-rivi-layout .rv-l-star.is-half svg {
	fill: color-mix(in srgb, #f59e0b 45%, transparent);
}

.lafu-rivi-layout .rv-l-star.is-empty {
	color: color-mix(in srgb, currentcolor 25%, transparent);
}

.lafu-rivi-layout .rv-l-list {
	display: inline-flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.lafu-rivi-layout .rv-l-list li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.lafu-rivi-layout .rv-l-list li::before {
	content: none;
}

.lafu-rivi-layout .rv-l-list--dot li::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	margin-top: 0.6em;
	border-radius: 50%;
	background: var(--rv-l-accent);
}

.lafu-rivi-layout .rv-l-list__mark {
	display: flex;
	flex: none;
	margin-top: 0.15em;
	color: #16a34a;
}

.lafu-rivi-layout .rv-l-list__mark svg {
	display: block;
	width: 1.1em;
	height: 1.1em;
}

.lafu-rivi-layout .rv-l-html > :first-child {
	margin-top: 0;
}

.lafu-rivi-layout .rv-l-html > :last-child {
	margin-bottom: 0;
}

.lafu-rivi-layout .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
	white-space: nowrap;
}

/*
 * Plan grids (rv-l-stack) on narrow tables: each plan becomes a card, its
 * cells in order (--rv-o, column by column). The blocks below are the same
 * for 2 to 6 plans, with a threshold of 120 px a plan (360 px for two).
 */
@container rvl (max-width: 359.98px) {

	.lafu-rivi-layout.rv-l-stack.rv-l-c2 {
		display: block;
		min-width: 0;
		border: 0;
		border-radius: 0;
		overflow: visible;
	}

	.lafu-rivi-layout.rv-l-stack.rv-l-c2 tbody {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	.lafu-rivi-layout.rv-l-stack.rv-l-c2 tr {
		display: contents;
	}

	.lafu-rivi-layout.rv-l-stack.rv-l-c2 .rv-l-cell {
		--rv-col: 100cqi;
		display: block;
		order: var(--rv-o);
		border: 1px solid var(--rv-l-line);
		border-top: 0;
	}

	.lafu-rivi-layout.rv-l-stack.rv-l-c2 .rv-l-first {
		border-top: 1px solid var(--rv-l-line);
		border-radius: var(--rv-l-radius) var(--rv-l-radius) 0 0;
	}

	.lafu-rivi-layout.rv-l-stack.rv-l-c2 .rv-l-first:not([style*="--rv-o:0;"]) {
		margin-top: 1rem;
	}

	.lafu-rivi-layout.rv-l-stack.rv-l-c2 .rv-l-last {
		border-radius: 0 0 var(--rv-l-radius) var(--rv-l-radius);
	}
}

@container rvl (max-width: 359.98px) {

	.lafu-rivi-layout.rv-l-stack.rv-l-c3 {
		display: block;
		min-width: 0;
		border: 0;
		border-radius: 0;
		overflow: visible;
	}

	.lafu-rivi-layout.rv-l-stack.rv-l-c3 tbody {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	.lafu-rivi-layout.rv-l-stack.rv-l-c3 tr {
		display: contents;
	}

	.lafu-rivi-layout.rv-l-stack.rv-l-c3 .rv-l-cell {
		--rv-col: 100cqi;
		display: block;
		order: var(--rv-o);
		border: 1px solid var(--rv-l-line);
		border-top: 0;
	}

	.lafu-rivi-layout.rv-l-stack.rv-l-c3 .rv-l-first {
		border-top: 1px solid var(--rv-l-line);
		border-radius: var(--rv-l-radius) var(--rv-l-radius) 0 0;
	}

	.lafu-rivi-layout.rv-l-stack.rv-l-c3 .rv-l-first:not([style*="--rv-o:0;"]) {
		margin-top: 1rem;
	}

	.lafu-rivi-layout.rv-l-stack.rv-l-c3 .rv-l-last {
		border-radius: 0 0 var(--rv-l-radius) var(--rv-l-radius);
	}
}

@container rvl (max-width: 479.98px) {

	.lafu-rivi-layout.rv-l-stack.rv-l-c4 {
		display: block;
		min-width: 0;
		border: 0;
		border-radius: 0;
		overflow: visible;
	}

	.lafu-rivi-layout.rv-l-stack.rv-l-c4 tbody {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	.lafu-rivi-layout.rv-l-stack.rv-l-c4 tr {
		display: contents;
	}

	.lafu-rivi-layout.rv-l-stack.rv-l-c4 .rv-l-cell {
		--rv-col: 100cqi;
		display: block;
		order: var(--rv-o);
		border: 1px solid var(--rv-l-line);
		border-top: 0;
	}

	.lafu-rivi-layout.rv-l-stack.rv-l-c4 .rv-l-first {
		border-top: 1px solid var(--rv-l-line);
		border-radius: var(--rv-l-radius) var(--rv-l-radius) 0 0;
	}

	.lafu-rivi-layout.rv-l-stack.rv-l-c4 .rv-l-first:not([style*="--rv-o:0;"]) {
		margin-top: 1rem;
	}

	.lafu-rivi-layout.rv-l-stack.rv-l-c4 .rv-l-last {
		border-radius: 0 0 var(--rv-l-radius) var(--rv-l-radius);
	}
}

@container rvl (max-width: 599.98px) {

	.lafu-rivi-layout.rv-l-stack.rv-l-c5 {
		display: block;
		min-width: 0;
		border: 0;
		border-radius: 0;
		overflow: visible;
	}

	.lafu-rivi-layout.rv-l-stack.rv-l-c5 tbody {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	.lafu-rivi-layout.rv-l-stack.rv-l-c5 tr {
		display: contents;
	}

	.lafu-rivi-layout.rv-l-stack.rv-l-c5 .rv-l-cell {
		--rv-col: 100cqi;
		display: block;
		order: var(--rv-o);
		border: 1px solid var(--rv-l-line);
		border-top: 0;
	}

	.lafu-rivi-layout.rv-l-stack.rv-l-c5 .rv-l-first {
		border-top: 1px solid var(--rv-l-line);
		border-radius: var(--rv-l-radius) var(--rv-l-radius) 0 0;
	}

	.lafu-rivi-layout.rv-l-stack.rv-l-c5 .rv-l-first:not([style*="--rv-o:0;"]) {
		margin-top: 1rem;
	}

	.lafu-rivi-layout.rv-l-stack.rv-l-c5 .rv-l-last {
		border-radius: 0 0 var(--rv-l-radius) var(--rv-l-radius);
	}
}

@container rvl (max-width: 719.98px) {

	.lafu-rivi-layout.rv-l-stack.rv-l-c6 {
		display: block;
		min-width: 0;
		border: 0;
		border-radius: 0;
		overflow: visible;
	}

	.lafu-rivi-layout.rv-l-stack.rv-l-c6 tbody {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	.lafu-rivi-layout.rv-l-stack.rv-l-c6 tr {
		display: contents;
	}

	.lafu-rivi-layout.rv-l-stack.rv-l-c6 .rv-l-cell {
		--rv-col: 100cqi;
		display: block;
		order: var(--rv-o);
		border: 1px solid var(--rv-l-line);
		border-top: 0;
	}

	.lafu-rivi-layout.rv-l-stack.rv-l-c6 .rv-l-first {
		border-top: 1px solid var(--rv-l-line);
		border-radius: var(--rv-l-radius) var(--rv-l-radius) 0 0;
	}

	.lafu-rivi-layout.rv-l-stack.rv-l-c6 .rv-l-first:not([style*="--rv-o:0;"]) {
		margin-top: 1rem;
	}

	.lafu-rivi-layout.rv-l-stack.rv-l-c6 .rv-l-last {
		border-radius: 0 0 var(--rv-l-radius) var(--rv-l-radius);
	}
}

/*
 * Comparison grids on narrow tables scroll sideways. Plans get 120 px, the row
 * labels stay in view (sticky first column), and so do section titles. The
 * blocks below are the same for 2 to 12 columns, from 150 px a column down.
 */
.lafu-rivi-layout-wrap[tabindex]:focus-visible {
	outline: 2px solid var(--rv-l-accent, currentcolor);
	outline-offset: 2px;
}

@container rvl (max-width: 299.98px) {

	.lafu-rivi-layout.rv-l-c2:not(.rv-l-stack) {
		--rv-col: 120px;
		min-width: calc(8.5rem + 1 * 120px);
	}

	.rv-l-c2:not(.rv-l-stack) tr:first-child > .rv-l-cell:first-child {
		width: 8.5rem;
	}

	.rv-l-c2:not(.rv-l-stack) tr > .rv-l-cell:first-child {
		position: sticky;
		left: 0;
		z-index: 1;
		background-color: var(--wp--preset--color--base, Canvas);
	}

	.rv-l-c2:not(.rv-l-stack) tr > .rv-l-cell[colspan]:first-child > * {
		position: sticky;
		left: var(--rv-pad);
		width: fit-content;
	}
}

@container rvl (max-width: 449.98px) {

	.lafu-rivi-layout.rv-l-c3:not(.rv-l-stack) {
		--rv-col: 120px;
		min-width: calc(8.5rem + 2 * 120px);
	}

	.rv-l-c3:not(.rv-l-stack) tr:first-child > .rv-l-cell:first-child {
		width: 8.5rem;
	}

	.rv-l-c3:not(.rv-l-stack) tr > .rv-l-cell:first-child {
		position: sticky;
		left: 0;
		z-index: 1;
		background-color: var(--wp--preset--color--base, Canvas);
	}

	.rv-l-c3:not(.rv-l-stack) tr > .rv-l-cell[colspan]:first-child > * {
		position: sticky;
		left: var(--rv-pad);
		width: fit-content;
	}
}

@container rvl (max-width: 599.98px) {

	.lafu-rivi-layout.rv-l-c4:not(.rv-l-stack) {
		--rv-col: 120px;
		min-width: calc(8.5rem + 3 * 120px);
	}

	.rv-l-c4:not(.rv-l-stack) tr:first-child > .rv-l-cell:first-child {
		width: 8.5rem;
	}

	.rv-l-c4:not(.rv-l-stack) tr > .rv-l-cell:first-child {
		position: sticky;
		left: 0;
		z-index: 1;
		background-color: var(--wp--preset--color--base, Canvas);
	}

	.rv-l-c4:not(.rv-l-stack) tr > .rv-l-cell[colspan]:first-child > * {
		position: sticky;
		left: var(--rv-pad);
		width: fit-content;
	}
}

@container rvl (max-width: 749.98px) {

	.lafu-rivi-layout.rv-l-c5:not(.rv-l-stack) {
		--rv-col: 120px;
		min-width: calc(8.5rem + 4 * 120px);
	}

	.rv-l-c5:not(.rv-l-stack) tr:first-child > .rv-l-cell:first-child {
		width: 8.5rem;
	}

	.rv-l-c5:not(.rv-l-stack) tr > .rv-l-cell:first-child {
		position: sticky;
		left: 0;
		z-index: 1;
		background-color: var(--wp--preset--color--base, Canvas);
	}

	.rv-l-c5:not(.rv-l-stack) tr > .rv-l-cell[colspan]:first-child > * {
		position: sticky;
		left: var(--rv-pad);
		width: fit-content;
	}
}

@container rvl (max-width: 899.98px) {

	.lafu-rivi-layout.rv-l-c6:not(.rv-l-stack) {
		--rv-col: 120px;
		min-width: calc(8.5rem + 5 * 120px);
	}

	.rv-l-c6:not(.rv-l-stack) tr:first-child > .rv-l-cell:first-child {
		width: 8.5rem;
	}

	.rv-l-c6:not(.rv-l-stack) tr > .rv-l-cell:first-child {
		position: sticky;
		left: 0;
		z-index: 1;
		background-color: var(--wp--preset--color--base, Canvas);
	}

	.rv-l-c6:not(.rv-l-stack) tr > .rv-l-cell[colspan]:first-child > * {
		position: sticky;
		left: var(--rv-pad);
		width: fit-content;
	}
}

@container rvl (max-width: 1049.98px) {

	.lafu-rivi-layout.rv-l-c7:not(.rv-l-stack) {
		--rv-col: 120px;
		min-width: calc(8.5rem + 6 * 120px);
	}

	.rv-l-c7:not(.rv-l-stack) tr:first-child > .rv-l-cell:first-child {
		width: 8.5rem;
	}

	.rv-l-c7:not(.rv-l-stack) tr > .rv-l-cell:first-child {
		position: sticky;
		left: 0;
		z-index: 1;
		background-color: var(--wp--preset--color--base, Canvas);
	}

	.rv-l-c7:not(.rv-l-stack) tr > .rv-l-cell[colspan]:first-child > * {
		position: sticky;
		left: var(--rv-pad);
		width: fit-content;
	}
}

@container rvl (max-width: 1199.98px) {

	.lafu-rivi-layout.rv-l-c8:not(.rv-l-stack) {
		--rv-col: 120px;
		min-width: calc(8.5rem + 7 * 120px);
	}

	.rv-l-c8:not(.rv-l-stack) tr:first-child > .rv-l-cell:first-child {
		width: 8.5rem;
	}

	.rv-l-c8:not(.rv-l-stack) tr > .rv-l-cell:first-child {
		position: sticky;
		left: 0;
		z-index: 1;
		background-color: var(--wp--preset--color--base, Canvas);
	}

	.rv-l-c8:not(.rv-l-stack) tr > .rv-l-cell[colspan]:first-child > * {
		position: sticky;
		left: var(--rv-pad);
		width: fit-content;
	}
}

@container rvl (max-width: 1349.98px) {

	.lafu-rivi-layout.rv-l-c9:not(.rv-l-stack) {
		--rv-col: 120px;
		min-width: calc(8.5rem + 8 * 120px);
	}

	.rv-l-c9:not(.rv-l-stack) tr:first-child > .rv-l-cell:first-child {
		width: 8.5rem;
	}

	.rv-l-c9:not(.rv-l-stack) tr > .rv-l-cell:first-child {
		position: sticky;
		left: 0;
		z-index: 1;
		background-color: var(--wp--preset--color--base, Canvas);
	}

	.rv-l-c9:not(.rv-l-stack) tr > .rv-l-cell[colspan]:first-child > * {
		position: sticky;
		left: var(--rv-pad);
		width: fit-content;
	}
}

@container rvl (max-width: 1499.98px) {

	.lafu-rivi-layout.rv-l-c10:not(.rv-l-stack) {
		--rv-col: 120px;
		min-width: calc(8.5rem + 9 * 120px);
	}

	.rv-l-c10:not(.rv-l-stack) tr:first-child > .rv-l-cell:first-child {
		width: 8.5rem;
	}

	.rv-l-c10:not(.rv-l-stack) tr > .rv-l-cell:first-child {
		position: sticky;
		left: 0;
		z-index: 1;
		background-color: var(--wp--preset--color--base, Canvas);
	}

	.rv-l-c10:not(.rv-l-stack) tr > .rv-l-cell[colspan]:first-child > * {
		position: sticky;
		left: var(--rv-pad);
		width: fit-content;
	}
}

@container rvl (max-width: 1649.98px) {

	.lafu-rivi-layout.rv-l-c11:not(.rv-l-stack) {
		--rv-col: 120px;
		min-width: calc(8.5rem + 10 * 120px);
	}

	.rv-l-c11:not(.rv-l-stack) tr:first-child > .rv-l-cell:first-child {
		width: 8.5rem;
	}

	.rv-l-c11:not(.rv-l-stack) tr > .rv-l-cell:first-child {
		position: sticky;
		left: 0;
		z-index: 1;
		background-color: var(--wp--preset--color--base, Canvas);
	}

	.rv-l-c11:not(.rv-l-stack) tr > .rv-l-cell[colspan]:first-child > * {
		position: sticky;
		left: var(--rv-pad);
		width: fit-content;
	}
}

@container rvl (max-width: 1799.98px) {

	.lafu-rivi-layout.rv-l-c12:not(.rv-l-stack) {
		--rv-col: 120px;
		min-width: calc(8.5rem + 11 * 120px);
	}

	.rv-l-c12:not(.rv-l-stack) tr:first-child > .rv-l-cell:first-child {
		width: 8.5rem;
	}

	.rv-l-c12:not(.rv-l-stack) tr > .rv-l-cell:first-child {
		position: sticky;
		left: 0;
		z-index: 1;
		background-color: var(--wp--preset--color--base, Canvas);
	}

	.rv-l-c12:not(.rv-l-stack) tr > .rv-l-cell[colspan]:first-child > * {
		position: sticky;
		left: var(--rv-pad);
		width: fit-content;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lafu-rivi-layout .rv-l-button {
		transition: none;
	}
}

.lafu-rivi-layout-wrap.is-dark {
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	.lafu-rivi-layout-wrap:not(.is-light) .lafu-rivi-layout {
		--rv-l-line: color-mix(in srgb, currentcolor 18%, transparent);
	}
}