/*
 * Pricing perk strip. design/DESIGN-SYSTEM.md §4.19 ("Pricing perk cell"),
 * grid pattern §3.4, PAGE-STRUCTURE §4.1.
 *
 * Three cells inside a 1px hairline grid: the gap IS the rule, so the cells are
 * painted in the page ground and the grid's own background shows through.
 * .sp-grid--hairline (layout.css) supplies the gap, background and outer border;
 * only the track floor and the cell typography live here.
 *
 * The value line is the tile's claim. When that claim is a discount percentage
 * it is derived from sp_discount_rules and the tile disappears when no rule can
 * honour it -- see template-parts/pricing/plans.php.
 */

.sp-perks {
	--sp-grid-min: 240px;
}

.sp-perk {
	background: var(--sp-bg);
	padding: var(--sp-9);
}

.sp-perk__title {
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 800;
	font-size: 20px; /* TODO token: --sp-fs-perk-title, DESIGN-SYSTEM §1.2 "Pricing-perk title" */
	line-height: var(--sp-lh-tight);
	text-transform: uppercase;
	color: var(--sp-text);
}

.sp-perk__value {
	margin-top: 6px; /* TODO token: 6px step, DESIGN-SYSTEM §1.3 lists it but tokens.css stops at --sp-2 (8px) */
	font-size: var(--sp-fs-sm);
	letter-spacing: var(--sp-ls-eyebrow);
	text-transform: uppercase;
	color: var(--sp-red);
}