/* ==========================================================================
   /pricing/ — page-specific styles.
   Numbers come from baseline/css/inline/pricing__elementor-frontend-inline-css.css
   (the .elementor-943 block) + baseline/style-tokens.json, not from taste.
   Breakpoints match the live site: 1024 / 767.
   ========================================================================== */

/* --------------------------------------------------- Elementor "slides" banner
   200px band, cover image, 25% black overlay, centred contents at 66% width.
   (Shared shape with /frequently-asked-questions/ — see report: promotion note.) */
.page-hero {
	position: relative;
	overflow: hidden;
	margin-bottom: 30px;
}
.page-hero__bg {
	position: absolute;
	inset: 0;
	background-color: #dbd1e0;
	background-image: url(/wp-content/uploads/2018/04/sms-gateway-banner-2.jpg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}
.page-hero__overlay { position: absolute; inset: 0; background-color: rgba(0, 0, 0, .25); }
.page-hero__inner {
	position: relative;
	height: 200px;
	padding: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
}
.page-hero__contents { max-width: 66%; }
.page-hero__heading { font-size: 35px; font-weight: 700; line-height: 1; margin-bottom: 11px; }
.page-hero__description { font-size: 17px; line-height: 1.4; }

/* Elementor stacks widgets as flex items inside `.elementor-widget-wrap`, so
   adjacent widget margins never collapse and a widget's own inner margins stay
   inside it. Mirror that wherever this page relies on those exact gaps. */
.pricing-intro .col,
.pricing-fine .col,
.pricing-faq .col,
.plan {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

/* --------------------------------------------------------- anniversary line */
.pricing-intro__title {
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	margin: 0 0 10px;          /* Elementor widget spacing for this column is 10px */
	color: var(--text);
	text-align: center;
}
.pricing-intro__text p { margin: 0 0 1.5em; }

/* ------------------------------------------------------------- plan cards */
.plans--top { margin-top: 20px; margin-bottom: 30px; }

.plan-grid { display: flex; flex-wrap: wrap; align-items: stretch; }

.plan {
	width: 25%;
	border: 1px solid #e1e1e1;
	padding: 30px 15px;
}
.plan--empty { border: 0; padding: 0; }

.plan__name {
	font-size: 1.6em;          /* 27.2px */
	font-weight: 400;
	line-height: 1;
	margin: 0;
	color: var(--text);
	text-align: left;
}

.plan__price { margin-top: 15px; font-size: .7em; text-align: left; }
.plan__price p { margin: 0 0 1.5em; }
.plan__price .price-span { font-size: 2.7em; font-weight: 600; }

.plan__meta {
	margin-top: 10px;
	background-color: #f6f0f0;
	padding: 10px 10px 10px 15px;
	font-size: .9em;
	font-weight: 500;
	line-height: 1.9em;
	text-align: left;
}
.plan__meta p { margin: 0 0 1.5em; }
/* normalize.css (bundled by GeneratePress) keeps <sup> out of the line box */
.plan__meta sup { font-size: 75%; line-height: 0; position: relative; top: -.5em; vertical-align: baseline; }

/* Section "Pay&Go" has `p { margin-bottom: 0 }` as custom CSS; the Pro/Heavy/Ultra
   row does not — which is exactly why its cards are 41px taller. */
.plans--top .plan p { margin-bottom: 0; }

.plan__features { list-style: none; margin: 10px 0 0; padding: 0; font-size: .9em; }
.plan__item { display: flex; align-items: center; margin: 0; padding: 0; }
.plan__item:not(:last-child) { padding-bottom: 5px; }
.plan__item:not(:first-child) { margin-top: 5px; }
.plan__check { flex: 0 0 auto; display: flex; width: 17.5px; color: #c1bbc6; }
.plan__check svg { width: 14px; height: 14px; }
.plan__feature { align-self: center; padding-left: 5px; font-weight: 400; color: #35075b; }

.plan__cta { margin-top: 20px; text-align: center; }
.plan__btn {
	display: inline-block;
	background-color: #fffdfd;
	color: #4e0d71;
	fill: #4e0d71;
	border: 1px solid #81349a;
	border-radius: 7px;
	padding: 15px 25px;
	font-size: 15px;
	line-height: 1;
	text-align: center;
	transition: all .3s;
}
.plan__btn:hover, .plan__btn:focus { background-color: #cff0f0; color: #4e0d71; }

/* -------------------------------------------------------------- fine print */
.pricing-fine__updated { font-size: 10px; margin: 15px 0 -20px; }
.pricing-fine__updated p { margin: 0 0 1.5em; }
.pricing-fine__text { margin-top: 20px; font-size: .8em; line-height: 1.7em; color: var(--brand); text-align: left; }
.pricing-fine__text p { margin: 0 0 1.5em; }
.pricing-fine__text ul { margin: 0 0 1.5em 3em; padding: 0; }
.pricing-fine__text li { margin: 0; }

/* ----------------------------------------------- "Test all features" banner */
.pricing-cta {
	position: relative;
	margin-top: 40px;
	background-color: #626a6a;
}
.pricing-cta__overlay { position: absolute; inset: 0; background-color: rgba(0, 0, 0, .5); }
.pricing-cta__content {
	position: relative;
	min-height: 325px;
	padding: 35px;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
}
.pricing-cta__title {
	width: 100%;
	margin: 0 0 8px;
	font-size: 2.1em;          /* 35.7px */
	font-weight: 600;
	line-height: 1.2em;
	color: #fff;
}
.pricing-cta__description { width: 100%; margin-bottom: 22px; }
.pricing-cta__button-wrapper { width: 100%; }
.pricing-cta__button {
	display: inline-block;
	background-color: var(--brand);
	color: #fff;
	border: 2px solid #fff;
	border-radius: 4px;
	padding: 15px 30px;
	font-size: 16px;
	line-height: 1;
	text-align: center;
	transition: all .3s;
}
.pricing-cta__button:hover, .pricing-cta__button:focus { color: #fff; }

/* --------------------------------------------------------------- FAQ band */
.pricing-faq { background-color: var(--band); padding: 50px 0 80px; }
/* font-size stays on the shared h2 scale (30px / 25px under 768px) — Elementor
   only overrides the weight, and `.elementor-heading-title` zeroes the margin. */
.pricing-faq__title {
	font-weight: 400;
	line-height: 1;
	margin: 0 0 20px;
	color: var(--text);
	text-align: center;
}
.pricing-faq__lead { margin-bottom: 20px; text-align: center; }
.pricing-faq__lead p { margin: 0 0 1.5em; }

/* Elementor accordion skin for this page: caret-square icons in a 1.5em gutter,
   regular-weight titles, white panel, 0.9em / 1.4em body copy. */
.pricing-faq .accordion { margin-bottom: 0; }
/* Elementor floats the icon, so only the first line of a wrapped title is
   indented — keep the block/float layout rather than the shared flex row. */
.pricing-faq .accordion__title { display: block; font-weight: 400; font-size: 17px; }
.pricing-faq .accordion__icon { float: left; display: inline-block; width: 1.5em; margin-right: 0; text-align: left; }
.pricing-faq .accordion__icon svg { width: 1em; height: 1em; }
.pricing-faq .accordion__content { background-color: #fff; font-size: .9em; line-height: 1.4em; }

/* ---------------------------------------------------------- breakpoints */
@media (max-width: 1024px) and (min-width: 768px) {
	.plan { width: 50%; }
	.plan--empty { display: none; }
}

@media (max-width: 767px) {
	.page-hero__inner { height: 230px; padding: 30px; }
	.page-hero__contents { max-width: 85%; }
	.page-hero__heading { font-size: 1.2em; }
	/* Elementor's mobile slide defaults give the description a 15px bottom margin,
	   which lifts the centred block by ~7px. */
	.page-hero__description { font-size: 13px; margin-bottom: 15px; }

	.plan { width: 100%; }
	.plan--empty { display: none; }
	.plan__name, .plan__price, .plan__meta { text-align: center; }
	.plan__item { justify-content: center; }
	/* Only Lite + SME (row 1) and every card of row 2 carry the 30px gap; Startup
	   has no mobile margin on the live site, so it butts up against Lite. */
	.plans--top .plan:nth-child(2),
	.plans--top .plan:nth-child(4),
	.plans--bottom .plan { margin-top: 30px; }

	.pricing-cta__content { min-height: 385px; }
	.pricing-cta__title { font-size: 32px; }

	/* Elementor's mobile accordion metrics */
	.pricing-faq .accordion__title { padding: 12px 15px; }
	.pricing-faq .accordion__icon { width: 1.2em; }
	.pricing-faq .accordion__content { padding: 7px 15px; }
}