/**
 * P-09 Vendor plans.
 *
 * Values from Vendor Plans.dc.html. The Premium card carries a 2px primary
 * border and a "most popular" flag; every other card is 1px in the standard
 * border colour, so the recommendation reads as a recommendation rather than
 * as four cards shouting equally.
 */

.ulm-plans {
	max-width: var(--ulm-page-max, 1280px);
	padding: 0 var(--ulm-inset-page, clamp(20px, 8vw, 144px)) 80px;
	margin: 0 auto;
}

/* --------------------------------------------------------------- hero -- */

.ulm-plans__hero {
	padding: 48px 0 40px;
	text-align: center;
}

.ulm-plans__eyebrow {
	margin: 0 0 10px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	color: var(--ulm-gold-alt, #c59e33);
	text-transform: uppercase;
}

.ulm-plans__title {
	max-width: 20ch;
	margin: 0 auto 14px;
	font-size: clamp(30px, 4vw, 46px);
	font-weight: 600;
	line-height: 1.15;
	color: var(--ulm-deep);
}

.ulm-plans__lede {
	max-width: 56ch;
	margin: 0 auto 20px;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--ulm-ink-muted);
}

.ulm-plans__promo {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: center;
	padding: 12px 20px;
	background: var(--ulm-tint-mint, #f2faf7);
	border-radius: 9999px;
}

.ulm-plans__promotag {
	padding: 4px 12px;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--ulm-deep);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background: var(--ulm-gold, #fedc97);
	border-radius: 9999px;
}

.ulm-plans__promoline {
	font-size: 13px;
	color: var(--ulm-teal, #116254);
}

/* --------------------------------------------------------------- grid -- */

.ulm-plans__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 262px), 1fr));
	gap: 20px;
	align-items: start;
}

.ulm-plans__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
	padding: 28px 24px;
	background: var(--ulm-surface, #fff);
	border: 1px solid #e6efea;
	border-radius: 16px;
}

.ulm-plans__card--featured {
	border: 2px solid var(--ulm-primary);
	box-shadow: 0 24px 48px -34px rgb(41 72 60 / 45%);
}

.ulm-plans__flag {
	position: absolute;
	top: -11px;
	left: 24px;
	padding: 4px 12px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #fff;
	text-transform: uppercase;
	background: var(--ulm-primary);
	border-radius: 9999px;
}

.ulm-plans__cardhead {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ulm-plans__name {
	margin: 0 0 6px;
	font-size: 19px;
	font-weight: 600;
	color: var(--ulm-deep);
}

.ulm-plans__blurb {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--ulm-ink-muted);
}

.ulm-plans__price {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.ulm-plans__pricelabel {
	font-family: var(--ulm-font-numeric);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--ulm-teal, #116254);
}

.ulm-plans__pricenote {
	font-size: 12px;
	color: var(--ulm-ink-muted);
}

.ulm-plans__rule {
	height: 1px;
	background: #e6efea;
}

.ulm-plans__features {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.ulm-plans__features li {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	font-size: 13px;
	line-height: 1.6;
	color: var(--ulm-ink-muted);
}

.ulm-plans__features svg {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--ulm-primary);
}

.ulm-plans__cta {
	display: flex;
	flex-direction: column;
	gap: 9px;
	align-items: center;
}

.ulm-plans__footnote {
	font-size: 11.5px;
	color: var(--ulm-ink-muted);
	text-align: center;
}

/* ------------------------------------------------------------ compare -- */

.ulm-plans__compare,
.ulm-plans__faq {
	margin-top: 64px;
}

.ulm-plans__sectiontitle {
	margin: 0 0 22px;
	font-size: clamp(21px, 2.4vw, 27px);
	font-weight: 600;
	color: var(--ulm-deep);
	text-align: center;
}

.ulm-plans__tablewrap {
	overflow-x: auto;
	background: var(--ulm-surface, #fff);
	border: 1px solid #e6efea;
	border-radius: 16px;
}

.ulm-plans__table {
	width: 100%;
	min-width: 680px;
	font-size: 13.5px;
	border-collapse: collapse;
}

.ulm-plans__table th,
.ulm-plans__table td {
	padding: 14px 16px;
	border-bottom: 1px solid #f0f4f2;
}

.ulm-plans__table thead th {
	font-weight: 600;
	color: var(--ulm-deep);
	text-align: center;
	background: var(--ulm-tint-mint, #f2faf7);
}

.ulm-plans__table thead th:first-child {
	text-align: left;
}

.ulm-plans__table tbody th {
	font-weight: 500;
	color: var(--ulm-ink-muted);
	text-align: left;
}

.ulm-plans__table tbody td {
	color: var(--ulm-ink-alt, #2b2b2b);
	text-align: center;
}

.ulm-plans__table tbody tr:last-child th,
.ulm-plans__table tbody tr:last-child td {
	border-bottom: 0;
}

.ulm-plans__tablenote {
	max-width: 76ch;
	margin: 16px auto 0;
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--ulm-ink-muted);
	text-align: center;
}

/* ---------------------------------------------------------------- faq -- */

.ulm-plans__faqs {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 820px;
	margin: 0 auto;
}

.ulm-plans__faqitem {
	padding: 16px 20px;
	background: var(--ulm-surface, #fff);
	border: 1px solid #e6efea;
	border-radius: 12px;
}

.ulm-plans__faqitem summary {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ulm-deep);
	cursor: pointer;
	list-style: none;
}

.ulm-plans__faqitem summary::-webkit-details-marker { display: none; }

.ulm-plans__faqitem summary::after {
	float: right;
	margin-left: 12px;
	color: var(--ulm-primary);
	content: "+";
}

.ulm-plans__faqitem[open] summary::after { content: "−"; }

.ulm-plans__faqitem p {
	margin: 10px 0 0;
	font-size: 13.5px;
	line-height: 1.75;
	color: var(--ulm-ink-muted);
}

@media (max-width: 640px) {
	.ulm-plans__hero { padding: 32px 0 28px; }
	.ulm-plans__compare,
	.ulm-plans__faq { margin-top: 44px; }
}