/* ==========================================================================
   Pricing — "Simple, Transparent Plans" (homepage teaser)
   Compact Jio-style cards, sourced from real Plan data — full detail lives
   on the dedicated Plans page (plans.css); this is a flat, static teaser,
   not an interactive grid, so no card-hover-lift complexity beyond a
   subtle lift, and no feature-checklist duplication.
   ========================================================================== */
.pricing-section {
	background: var(--white);
	padding: 96px 24px;
}
.pricing-section__container {
	max-width: 1100px;
	margin: 0 auto;
}
.pricing-section__header {
	text-align: center;
	max-width: 640px;
	margin: 0 auto;
}
.pricing-section__title {
	font-family: var(--font-manrope);
	font-size: clamp(32px, 3vw, 44px);
	font-weight: 800;
	color: #1a1a2e;
	margin: 0;
}
.pricing-section__subline {
	font-size: 17px;
	color: #5a6270;
	margin-top: 12px;
	margin-bottom: 48px;
}

.pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(260px, 1fr));
	gap: 24px;
}

.pricing-card {
	position: relative;
	display: block;
	background: #EEF1FB;
	border-radius: 16px;
	padding: 20px;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}
.pricing-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(20, 40, 80, .10);
}

.pricing-card__badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--brand-blue);
	background: #fff;
	border-radius: 6px;
	padding: 5px 10px;
	margin-bottom: 14px;
}
.pricing-card__badge--gold { color: #D97706; }
.pricing-card__badge--offer { color: #fff; background: #16A34A; text-transform: none; }

.pricing-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.pricing-card__price {
	font-size: 30px;
	font-weight: 800;
	color: #1a1a2e;
}
.pricing-card__chevron {
	width: 20px;
	height: 20px;
	color: var(--brand-blue);
	flex-shrink: 0;
}

.pricing-card__stats {
	display: flex;
	gap: 24px;
	margin-top: 18px;
}
.pricing-card__stats div { display: flex; flex-direction: column; gap: 2px; }
.pricing-card__stats b { font-size: 14px; font-weight: 700; color: #1a1a2e; }
.pricing-card__stats span { font-size: 12px; color: #8a93a3; }

.pricing-card__avatars {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
}
.pricing-card__avatar-row { display: flex; }
.pricing-card__avatar {
	width: 26px; height: 26px;
	border-radius: 50%;
	border: 2px solid #EEF1FB;
	display: flex; align-items: center; justify-content: center;
	font-size: 9px; font-weight: 700; color: #fff;
	overflow: hidden; flex-shrink: 0;
}
.pricing-card__avatar + .pricing-card__avatar { margin-left: -8px; }
.pricing-card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pricing-card__more { font-size: 12px; font-weight: 600; color: #5a6270; }

.pricing-section__more {
	text-align: center;
	margin-top: 40px;
	font-size: 15px;
}
.pricing-section__more a {
	color: var(--brand-blue);
	font-weight: 700;
	text-decoration: none;
}
.pricing-section__more a:hover { text-decoration: underline; }

@media (max-width: 820px) {
	.pricing-grid { grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}
@media (max-width: 560px) {
	.pricing-section { padding: 64px 20px; }
	.pricing-grid { grid-template-columns: 1fr; }
}

/* Desktop refinements (>=1024px only — mobile/tablet untouched). */
@media (min-width: 1024px) {
	.pricing-section__title { font-size: clamp(38px, calc(3vw + 6px), 50px); }
	.pricing-section__subline { font-size: 20px; }
	/* 640px would wrap "Simple, Transparent Plans" onto two lines at 50px;
	   widened so the larger type keeps its original single-line position. */
	.pricing-section__header { max-width: 820px; }
}