/* Performa Pricing Table */
.pf-pricing { container-type: inline-size; margin-bottom: 2em; }
.pf-pricing__grid {
	display: grid;
	grid-template-columns: repeat(var(--pf-pr-cols, 3), minmax(0, 1fr));
	gap: var(--pf-pr-gap, 24px);
	align-items: stretch;
}
@container (max-width: 860px) { .pf-pricing__grid { grid-template-columns: repeat(min(2, var(--pf-pr-cols, 3)), minmax(0, 1fr)); } }
@container (max-width: 540px) { .pf-pricing__grid { grid-template-columns: minmax(0, 1fr); } }

.pf-pricing__plan {
	--_c: var(--pf-pr-color, var(--pf-accent));
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--pf-bg, #fff);
	border: 1px solid color-mix(in srgb, var(--pf-heading) 10%, transparent);
	border-radius: var(--pf-radius, 6px);
	overflow: hidden;
	text-align: center;
}
/* Line up headers, feature lists and buttons across plans. */
@supports (grid-template-rows: subgrid) {
	.pf-pricing__plan { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; }
	.pf-pricing__features { align-self: start; }
}
.pf-pricing__plan {
	transition: transform .35s var(--pf-ease, ease), box-shadow .35s var(--pf-ease, ease);
}
.pf-pricing--lift .pf-pricing__plan:hover { transform: translateY(-6px); box-shadow: 0 22px 44px -22px color-mix(in srgb, var(--_c) 55%, transparent); }
.pf-pricing__plan.is-featured { border-color: var(--_c); box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--_c) 70%, transparent); }

.pf-pricing__head { padding: 30px 24px 26px; }
.pf-pricing--header .pf-pricing__head { background: var(--_c); color: #fff; }
.pf-pricing--clean .pf-pricing__head { border-top: 4px solid var(--_c); }

.pf-pricing__title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 400;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: inherit;
}
.pf-pricing--clean .pf-pricing__title { color: var(--pf-heading); }
.pf-pricing__sub { margin: .5em auto 0; max-width: 28ch; font-size: .9em; line-height: 1.45; opacity: .9; }
.pf-pricing__price { margin: .6em 0 0; line-height: 1.1; }
.pf-pricing__amount { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pf-pricing__period { font-size: .95em; font-weight: 600; opacity: .9; }
.pf-pricing--clean .pf-pricing__amount { color: var(--_c); }

.pf-pricing__features { flex: 1; margin: 0; padding: 8px 0; list-style: none; font-size: .92em; }
.pf-pricing__features li { margin: 0; padding: 11px 22px; line-height: 1.45; }
.pf-pricing--stripes .pf-pricing__features li:nth-child(even) { background: color-mix(in srgb, var(--pf-heading) 4%, transparent); }
.pf-pricing__features .is-off { opacity: .5; }
.pf-pricing__features .is-hi { font-weight: 700; color: var(--_c); }

.pf-pricing__foot { padding: 18px 24px 28px; }
.pf-pricing__foot .pf-btn { --_bg: var(--_c); --_fg: #fff; }

.pf-pricing__badge {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 1;
	padding: 4px 10px;
	border-radius: 999px;
	background: #fff;
	color: var(--_c);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}
.pf-pricing--clean .pf-pricing__badge { background: var(--_c); color: #fff; }

@media (prefers-reduced-motion: reduce) { .pf-pricing__plan { transition: none; } }
