/* .page-hero styles now live in components.css (shared with the FAQ page). */

/* Override the shared .pricing section background/top-padding
   (components.css sets solid bg #f5f5f6 and the global section rule sets
   padding-top:80px for the homepage) — scoped to this template only so the
   homepage's pricing section is untouched. */
.page-template-page-templatespricing-php .pricing { background: linear-gradient(180deg, #f5f5f6 0%, #ffffff 100%); padding-top: 25px; }

/* Feature comparison table — modeled on Hostinger.com/pricing's "Compare
   our plans" section: plan name/price/CTA sticks to the top of the page
   viewport as you scroll through the feature rows (and stops once the
   table ends), the feature-label column sticks to the left while sliding
   horizontally through the plan columns, and each plan's CTA lives in its
   header cell (not a separate bottom row).

   Header row and body rows are two SEPARATE tables (.compare__header-scroll
   + .compare__scroll), not one <table> with a sticky <thead> — a single
   element can't have both "sticky relative to the page" and "horizontal
   overflow-x:auto" at once: setting overflow-x:auto also forces overflow-y
   to compute as auto (even with nothing to scroll vertically), which makes
   that element the sticky containing block instead of the page viewport,
   so a thead inside it has nothing left to stick to (same root cause as
   the site-header sticky bug fixed earlier this session). Splitting them
   means .compare__header-scroll's own ancestor chain has no non-visible
   overflow, so plain position:sticky on it targets the real page viewport
   correctly; pricing-swiper.js does a one-line scroll mirror so the header
   still slides in sync with the body when you swipe it horizontally.
   table-layout:fixed + matching <colgroup> widths on both tables keeps
   their columns pixel-aligned despite being independent tables.
   border-collapse:separate (not collapse) avoids a Safari bug where sticky
   table cells lose their background/border under collapse.

   This whole sticky/scroll architecture is DESKTOP ONLY (see the
   @media (max-width: 768px) block below) — on mobile it's replaced
   entirely by .compare-mobile, a non-scrolling stacked-card layout. */
.compare { margin-top: 64px; }
.compare__table {
	table-layout: fixed;
	width: 100%;
	min-width: 640px;
	border-collapse: separate;
	border-spacing: 0;
	font-family: var(--font-heading);
}
.compare__table col:first-child { width: 220px; }
.compare__table col:not(:first-child) { width: 140px; }
.compare__table th,
.compare__table td {
	padding: 16px 20px;
	text-align: center;
	border-bottom: 1px solid var(--color-border);
	font-size: 14px;
	font-weight: 400;
	color: var(--color-body);
}
/* Sticky header: pinned just below the site's own sticky header (matching
   its current real rendered height, 76px) from the moment it reaches that
   point until .compare's bottom — i.e. the end of the body table right
   below it — scrolls past. */
.compare__header-scroll {
	position: sticky;
	top: 76px;
	z-index: 10;
	overflow-x: hidden;
	background: #ffffff;
}
.compare__header-scroll .compare__table th {
	padding-top: 20px;
	padding-bottom: 20px;
	vertical-align: top;
	background: #ffffff;
}
.compare__header-scroll .compare__table th.compare__featured { background: var(--color-hero-bg); }
.compare__scroll {
	overflow-x: auto;
	/* Stops this scroller's own rubber-band from chaining into the page on
	   iOS Safari (same fix as .pricing__grid's mobile carousel — see
	   components.css). Deliberately NOT setting touch-action:pan-x here —
	   that was tried and reverted: it doesn't just prioritize horizontal
	   panning, it actively blocks the browser's native vertical-scroll
	   gesture while a finger is on this element, breaking the ability to
	   scroll the page at all while touching the table. Default touch-action
	   (auto) lets the browser's own direction-locking pick the right axis
	   per swipe, same as every other horizontal carousel on this site. */
	overscroll-behavior-x: contain;
}
.compare__label-col {
	text-align: left;
	font-weight: 600;
	font-size: 14px;
	color: var(--color-ink);
	position: sticky;
	left: 0;
	background: #ffffff;
	z-index: 1;
}
.compare__plan-name { display: block; font-size: 18px; font-weight: 700; color: var(--color-ink); margin-bottom: 4px; }
.compare__plan-price { display: block; font-size: 14px; font-weight: 400; color: var(--color-body); margin-bottom: 10px; }
/* Highlights the Scale column top to bottom, echoing the featured pricing
   card directly above it. */
.compare__featured { background: var(--color-hero-bg); }
.compare__check { color: #16a34a; font-weight: 700; font-size: 16px; }
.compare__dash { color: #6b6b6b; }
.compare__cta { display: inline-block; padding: 8px 18px; font-size: 13px; white-space: nowrap; }

/* Mobile: three stacked full-width cards, no table, no horizontal scroll
   region at all. Hidden on desktop by default; shown only below 768px. */
.compare-mobile { display: none; }

@media (max-width: 768px) {
	/* Sticky positioning next to a horizontally-scrollable region is a
	   known WebKit bug class: iOS Safari's gesture engine can lose track
	   of which element owns a horizontal pan and drag the whole PAGE
	   sideways instead of just the table. Confirmed on this exact table
	   via real-device A/B testing (disabling it entirely fixed the page
	   drag) — and un-sticking just the header on mobile was NOT enough to
	   fully resolve it on the user's device (the label column's own
	   position:sticky;left:0 plus .compare__scroll's overflow-x:auto is
	   the same bug class by itself). Patching the symptoms one at a time
	   wasn't reliable, so on mobile the whole two-table architecture is
	   swapped for .compare-mobile below, which has no overflow-x:auto
	   anywhere — the bug's precondition simply doesn't exist on mobile. */
	.compare__header-scroll,
	.compare__scroll { display: none; }

	.compare-mobile { display: block; }
	.compare-mobile__plan {
		background: #ffffff;
		border: 1px solid var(--color-border);
		border-radius: 16px;
		padding: 20px;
	}
	.compare-mobile__plan + .compare-mobile__plan { margin-top: 16px; }
	.compare-mobile__plan--featured {
		border-color: var(--color-purple);
		background: var(--color-hero-bg);
	}
	.compare-mobile__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin-bottom: 12px;
		padding-bottom: 16px;
		border-bottom: 1px solid var(--color-border);
	}
	.compare-mobile__header .compare__plan-name,
	.compare-mobile__header .compare__plan-price { text-align: left; margin-bottom: 0; }
	.compare-mobile__header .compare__plan-price { margin-top: 2px; }
	.compare-mobile__header .compare__cta { flex-shrink: 0; }
	.compare-mobile__list { margin: 0; }
	.compare-mobile__list li {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding: 10px 0;
		border-bottom: 1px solid var(--color-border);
		font-size: 14px;
		line-height: 1.3;
		color: var(--color-body);
	}
	.compare-mobile__list li:last-child { border-bottom: 0; }
	.compare-mobile__list li > span:first-child { color: var(--color-ink); font-weight: 500; }
}

/* Value props: same dark section + .audience-card box treatment as the
   homepage's Audience section (component CSS lives in components.css),
   just a 2x3 grid instead of 1x3 — grid auto-wraps 6 items into 2 rows of
   3 with no extra rows declaration needed. */
.value-props { background: #1f1346; }
.value-props__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 48px;
}

@media (max-width: 900px) {
	.value-props__grid { grid-template-columns: 1fr; }
}

/* "Browse the full FAQ" link line under the pricing-specific FAQ list —
   same treatment as how-it-works.css's .hiw-faq__more. */
.pricing-faq__more { max-width: 820px; margin: 24px auto 0; text-align: center; font-size: 15px; color: var(--color-body); }
.pricing-faq__more a { color: var(--color-purple); font-weight: 600; text-decoration: underline; }