/* CallRevu — Pricing Cards
   All color is driven by two custom properties injected inline by the
   container element: --cr-accent and --cr-btn. */

.cr-cards {
	--cr-accent: #77bb37;
	--cr-btn: #0374F4;
	--cr-card-bg: #fff;
	--cr-radius: 14px;
	--cr-gap: 28px;
	--cr-ribbon-h: 40px;
	--cr-font-condensed: 'Roboto Condensed', 'Arial Narrow', sans-serif;

	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--cr-gap);
	padding-top: calc(var(--cr-ribbon-h) / 2 + 6px); /* room for the ribbon */
	align-items: stretch;
}

.cr-cards--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cr-cards--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Salient clips overflow on some rows; the ribbon needs it visible. */
.vc_row:has(.cr-cards),
.wpb_column:has(.cr-cards),
.wpb_wrapper:has(.cr-cards) { overflow: visible; }

/* ---------- Card ---------- */

.cr-cards .cr-card {
	position: relative;
	display: flex;
	background: var(--cr-card-bg);
	border: 3px solid transparent; /* always 3px so highlighting never shifts the layout */
	border-radius: var(--cr-radius);
	transition: border-color .2s ease, transform .2s ease;
}

.cr-cards .cr-card__inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 34px 32px 40px;
}

.cr-cards .cr-card--highlighted { border-color: var(--cr-accent); }

/* ---------- Ribbon ---------- */

.cr-cards .cr-card__ribbon {
	position: absolute;
	left: 24px;
	bottom: 100%;
	margin-bottom: -20px; /* straddles the top edge of the card */
	z-index: 0;
	display: inline-flex;
	align-items: center;
	height: var(--cr-ribbon-h);
	padding: 0 20px;
	background: var(--cr-accent);
	border-radius: 999px;
	color: #fff;
	font-family: var(--cr-font-condensed);
	font-size: 20px;
	font-style: italic;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ---------- Content ---------- */

.cr-cards .cr-card__title {
	margin: 0 0 14px;
	font-size: 36px !important;
	font-style: italic;
	font-weight: 800;
	line-height: 1.1;
	color: #101820;
}

.cr-cards .cr-card__desc {
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.55;
	color: #000;
}

.cr-cards .cr-card__btn {
	display: block;
	margin: 24px 0 26px;
	padding: 5px;
	background: var(--cr-btn);
	border-radius: 999px;
	color: #fff;
	font-family: var(--cr-font-condensed);
	font-size: 18px;
	font-style: italic;
	font-weight: 700;
	letter-spacing: .08em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	transition: filter .2s ease;
}

.cr-cards .cr-card__btn:hover,
.cr-cards .cr-card__btn:focus-visible { filter: brightness(.9); color: #fff; }

.cr-cards .cr-card__count {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 14px;
	padding-bottom: 18px;
	border-bottom: 1px solid #e3e7ec;
	font-style: italic;
	font-weight: 800;
	text-transform: uppercase;
	color: #101820;
}

.cr-cards .cr-card__count-num { font-size: 36px; line-height: 1; color: var(--cr-accent); font-family: var(--cr-font-condensed); }
.cr-cards .cr-card__count-label { font-size: 24px; letter-spacing: .04em; font-family: var(--cr-font-condensed); }

.cr-cards .cr-card__list-intro {
   padding: 0;
   margin: 0 0 10px;
   font-family: var(--cr-font-condensed);
	font-size: 14px;
	font-style: italic;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #2b333d;
}

.cr-cards .cr-card__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cr-cards .cr-card__list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 12px;
	font-size: 18px;
	line-height: 1.45;
	color: #2b333d;
}

.cr-cards .cr-card__check {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 3px;
	color: var(--cr-accent);
}

/* ---------- Responsive ---------- */

@media (max-width: 999px) {
	.cr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cr-cards--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 690px) {
	.cr-cards,
	.cr-cards--cols-2,
	.cr-cards--cols-4 { grid-template-columns: minmax(0, 1fr); }
	.cr-cards .cr-card__inner { padding: 34px 24px 32px; }
	.cr-cards .cr-card__title { font-size: 36px !important;; }
}

@media (prefers-reduced-motion: reduce) {
	.cr-cards .cr-card,
	.cr-cards .cr-card__btn { transition: none; }
}