/* ------------------------------------------------------------------ tokens */

#pc-compare {
	--pc-blue: #0f7bff;
	--pc-blue-deep: #0a56b2;
	--pc-blue-h1: #247cff;
	--pc-ink: #21222c;
	--pc-body: #121212;
	--pc-muted: #37424f;
	--pc-gray: #6b7280;
	--pc-border: #e6ebf2;
	--pc-band: #dce9fc;
	--pc-dark: #21222c;
	--pc-dark-soft: #2a2b36;
	--pc-row-head: #f7fafd;
	--pc-placeholder-light: #f7fafd;
	--pc-placeholder-dash: #b7c3d1;

	--pc-container: 1080px;
	--pc-gutter: 24px;

	--pc-gap: 10px;
	--pc-text-pad: 10px;
	/*
	 * The design leaves this much extra room under the last text block before a
	 * card (a ✔/✖ verdict, a screenshot). Applied per block via .pc-block--spaced,
	 * because the design only draws it in some sections.
	 */
	--pc-block-space: 18px;

	font-family: "Roboto Flex", "Roboto", -apple-system, "Segoe UI", sans-serif;
	/*
	 * Optical sizing stays at the browser default (`auto`: `opsz` follows the font
	 * size), which is what Figma does. Pinning it to the font's default optical
	 * size renders the 40px hero heading 17px wider than the design (628px against
	 * 612px), and pinning it for body copy only — which matches Figma on an
	 * isolated text run — measurably increases the diff across whole sections.
	 * Optical sizing is not cosmetic here: it moves line breaks.
	 */
	font-size: 16px;
	line-height: 25px;
	color: var(--pc-body);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}

#pc-compare *,
#pc-compare *::before,
#pc-compare *::after {
	box-sizing: border-box;
}

/*
 * Wrapped in :where() on purpose — the reset must have zero specificity so the
 * component classes below (which are single classes too) always win over it.
 */
#pc-compare :is(h1,
h2,
h3,
p,
ul,
ol,
li,
table,
thead,
tbody,
tr,
th,
td,
details,
summary,
figure,
blockquote) {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	color: inherit;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	background: none;
}

#pc-compare :is(ul,
ol) {
	list-style: none;
}

#pc-compare :is(a) {
	color: var(--pc-blue);
	text-decoration: underline;
	text-decoration-skip-ink: none;
	text-underline-position: from-font;
}

#pc-compare img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* -------------------------------------------------------------- structure */

/*
 * The site's theme (Astra) wraps page content in a 1240px container with padding,
* which would clip the full-bleed bands to 1200px. Undone only on pages using this
 * template,
through the body class the plugin adds — a theme's own page spacing is
 * none of our business anywhere else.
 */
body.pc-compare-page #content,
body.pc-compare-page .site-content,
body.pc-compare-page .ast-container,
body.pc-compare-page #primary,
body.pc-compare-page .site-main,
body.pc-compare-page .entry-content,
body.pc-compare-page .ast-article-single {
	/* `display: block` because Astra's container is a grid whose item shrinks to
	   its content — that is what left-aligned the whole page at 1080px. */
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

#pc-compare .pc-container {
	width: var(--pc-container);
	max-width: 100%;
	margin: 0 auto;
	padding: 0 var(--pc-gutter);
}

#pc-compare .pc-band {
	padding: 64px 0;
}

#pc-compare .pc-band--light {
	background: var(--pc-band);
}

#pc-compare .pc-band--dark {
	background: var(--pc-dark);
	color: #f2f4f7;
}

#pc-compare .pc-plain {
	padding: 64px 0;
}

/*
 * Space after a section,
on top of the 64px rhythm. Two things go in here,
which
 * is why the numbers are per section and not a pattern:
 *
 *  - the design does not hold its own rhythm (some boundaries are 68px,
one 74px);
 *  - each section is 1-3px shorter than its Figma frame because the design's
 *    fractional line heights and row heights are rounded,
and that has to be
 *    given back here so the next section still starts at the design's own Y.
 *
 * Without the second part the page drifts 14px up by the time it reaches the
 * footer. The margin sits outside the section's frame,
which keeps its height.
 */
#pc-compare .pc-gap-1 {
	margin-bottom: 1px;
}

#pc-compare .pc-gap-2 {
	margin-bottom: 2px;
}

#pc-compare .pc-gap-4 {
	margin-bottom: 4px;
}

#pc-compare .pc-gap-5 {
	margin-bottom: 5px;
}

#pc-compare .pc-gap-7 {
	margin-bottom: 7px;
}

#pc-compare .pc-gap-10 {
	margin-bottom: 10px;
}

/*
 * `comparison`,
`pricing` and `storefront` are drawn on a tighter scale in the
 * design: 8px between blocks and 12px of text padding instead of 10px/10px.
 */
#pc-compare .pc-sec--tight {
	--pc-gap: 8px;
	--pc-text-pad: 12px;
	--pc-block-space: 20px;
}

#pc-compare .pc-block {
	margin-top: var(--pc-gap);
}

/*
 * Padding,
not margin: a margin here would collapse with the next block's
 * margin-top and only the larger of the two would survive.
 */
#pc-compare .pc-block--spaced {
	padding-bottom: var(--pc-block-space);
}

/* ------------------------------------------------------------- typography */

#pc-compare .pc-eyebrow {
	padding-top: 2px;
	font-size: 13px;
	line-height: 20px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--pc-blue);
}

#pc-compare .pc-h2 {
	margin-top: 11px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--pc-border);
	font-size: 26px;
	line-height: 31px;
	font-weight: 700;
	color: var(--pc-ink);
}

#pc-compare .pc-band--dark .pc-h2 {
	color: #fff;
	border-bottom-color: #333641;
}

#pc-compare .pc-band--dark .pc-eyebrow {
	color: #6bb2ff;
}

#pc-compare .pc-text {
	width: 720px;
	max-width: 100%;
	padding-top: var(--pc-text-pad);
	font-size: 15.5px;
	line-height: 24px;
}

#pc-compare .pc-band--dark .pc-text {
	color: #d6dae4;
}

#pc-compare .pc-text b,
#pc-compare .pc-text strong {
	font-weight: 700;
	color: var(--pc-ink);
}

#pc-compare .pc-band--dark .pc-text b,
#pc-compare .pc-band--dark .pc-text strong {
	color: #fff;
}

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

#pc-compare .pc-hero {
	/* The design leaves 120px of gradient below the button. */
	padding: 72px 0 120px;
	background-image: linear-gradient(108deg, #eaf4fd 0%, #b9deff 100%);
	text-align: center;
}

#pc-compare .pc-hero .pc-eyebrow {
	padding-top: 2px;
	text-align: center;
}

#pc-compare .pc-hero__title {
	width: 760px;
	max-width: 100%;
	margin: 10px auto 0;
	font-size: 40px;
	line-height: 48px;
	font-weight: 700;
	text-align: center;
	color: var(--pc-ink);
}

#pc-compare .pc-hero__title span {
	color: var(--pc-blue-h1);
}

#pc-compare .pc-hero__sub {
	width: 640px;
	max-width: 100%;
	margin: 10px auto 0;
	font-size: 18px;
	line-height: 28px;
	text-align: center;
	color: var(--pc-muted);
}

#pc-compare .pc-hero__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 33px;
}

#pc-compare .pc-hero__note {
	font-size: 13px;
	line-height: 20px;
	color: var(--pc-gray);
}

#pc-compare .pc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 182px;
	height: 47px;
	border-radius: 8px;
	background-image: linear-gradient(135deg, #18bde3 0%, #0f7bff 100%);
	box-shadow: 0 4px 7px rgba(15, 123, 255, 0.35);
	color: #fff;
	font-size: 15px;
	line-height: 23px;
	font-weight: 600;
	text-decoration: none;
}

#pc-compare .pc-btn:hover,
#pc-compare .pc-btn:focus {
	color: #fff;
	text-decoration: none;
	filter: brightness(1.05);
}

/* ------------------------------------------------- "why switch" card grid */

#pc-compare .pc-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	padding-top: 5px;
}

#pc-compare .pc-card {
	padding: 22px 22px 21px;
	border: 1px solid var(--pc-border);
	border-radius: 16px;
	background: #fff;
	font-size: 16px;
	line-height: 25px;
}

/*
 * Inline,
not a flex column: in the design the second line of a card runs back to
 * the card's padding edge,
under the mark,
rather than indenting to the text.
 */
#pc-compare .pc-card__mark {
	display: inline-block;
	width: 23px;
	vertical-align: top;
	font-size: 18px;
	/* Keep the text's line box: an 18px mark with its own taller line height
	   would stretch the card by 3px per row. */
	line-height: inherit;
	color: var(--pc-blue);
}

#pc-compare .pc-card b {
	font-weight: 700;
	color: var(--pc-ink);
}

/* ------------------------------------------------------------ bullet list */

#pc-compare .pc-list {
	padding-top: var(--pc-text-pad);
	font-size: 15.5px;
	line-height: 24px;
}

#pc-compare .pc-list li {
	position: relative;
	/* 35px per item, split the way the design's half-pixel padding rounds. */
	padding: 6px 0 5px 22px;
}

#pc-compare .pc-list li::before {
	content: "•";
	position: absolute;
	left: 9px;
}

#pc-compare .pc-list b {
	font-weight: 700;
	color: var(--pc-ink);
}

#pc-compare .pc-band--dark .pc-list {
	color: #d6dae4;
}

#pc-compare .pc-band--dark .pc-list b {
	color: #fff;
}

/* ------------------------------------------------- two intro cards ("what is") */

#pc-compare .pc-intro {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
	padding-top: 12px;
}

#pc-compare .pc-intro__card {
	padding: 24px;
	border: 1px solid var(--pc-border);
	border-radius: 16px;
	background: #fff;
}

#pc-compare .pc-intro__title {
	font-size: 17px;
	line-height: 20px;
	font-weight: 700;
	color: var(--pc-ink);
}

#pc-compare .pc-intro__text {
	/* The design's card keeps a paragraph margin below the copy. */
	margin: 8px 0 16px;
	font-size: 16px;
	line-height: 25px;
}

/* ------------------------------------------------------- comparison table */

#pc-compare .pc-table-wrap {
	overflow: hidden;
	padding-top: 16px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 2px 10px rgba(20, 40, 80, 0.06);
}

#pc-compare .pc-table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
}

#pc-compare .pc-table th,
#pc-compare .pc-table td {
	height: 55px;
	padding: 0 18px;
	border-bottom: 1px solid var(--pc-border);
	vertical-align: middle;
}

#pc-compare .pc-table thead th {
	height: 53px;
	background: var(--pc-dark);
	color: #fff;
	font-size: 13px;
	line-height: 20px;
	font-weight: 700;
	letter-spacing: 0.3px;
}

#pc-compare .pc-table tbody tr:last-child th,
#pc-compare .pc-table tbody tr:last-child td {
	border-bottom: 0;
}

#pc-compare .pc-table tbody th {
	background: var(--pc-row-head);
	font-size: 14.5px;
	line-height: 22px;
	font-weight: 700;
	color: var(--pc-ink);
}

#pc-compare .pc-table__ours {
	font-size: 14.5px;
	line-height: 22px;
	font-weight: 600;
	color: var(--pc-blue-deep);
}

#pc-compare .pc-table__theirs {
	font-size: 14.5px;
	line-height: 22px;
	color: var(--pc-body);
}

/* ------------------------------------------------------- ✔ / ✖ verdict card */

#pc-compare .pc-verdict {
	overflow: hidden;
	border: 1px solid var(--pc-border);
	border-radius: 16px;
	background: #fff;
}

#pc-compare .pc-verdict__row {
	display: flex;
	padding: 16px 20px;
	font-size: 15px;
	line-height: 23px;
	/*
	 * The dark sections of the Figma frame carry near-white text (#f2f4f7) on
	 * this white card, which renders unreadable — the light sections use ink,
	 * and that is what ships here.
	 */
	color: var(--pc-body);
}

#pc-compare .pc-verdict__row--pro {
	border-bottom: 1px solid var(--pc-border);
	background: #f5f9ff;
}

#pc-compare .pc-verdict__row--con {
	background: #f7f8fa;
}

#pc-compare .pc-verdict__mark {
	flex: none;
	width: 25px;
	font-weight: 800;
}

#pc-compare .pc-verdict__row--pro .pc-verdict__mark {
	color: var(--pc-blue);
}

#pc-compare .pc-verdict__row--con .pc-verdict__mark {
	color: #8a94a3;
}

#pc-compare .pc-verdict b {
	font-weight: 700;
	color: var(--pc-ink);
}

/* --------------------------------------------------- screenshot / placeholder */

#pc-compare .pc-shot {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 595px;
	border: 2px dashed var(--pc-placeholder-dash);
	border-radius: 16px;
	background: var(--pc-placeholder-light);
	text-align: center;
}

#pc-compare .pc-shot__emoji {
	font-size: 28px;
	line-height: 43px;
	color: #9fb0c2;
}

#pc-compare .pc-shot__caption {
	font-size: 13.5px;
	line-height: 21px;
	font-weight: 600;
	color: #7c8896;
}

#pc-compare .pc-band--dark .pc-shot {
	border-color: #454858;
	background: var(--pc-dark-soft);
}

#pc-compare .pc-band--dark .pc-shot__emoji {
	color: #6d7789;
}

#pc-compare .pc-band--dark .pc-shot__caption {
	color: #9aa4b2;
}

/* An uploaded screenshot replaces the placeholder box entirely. */
#pc-compare .pc-shot--filled {
	display: block;
	height: auto;
	padding: 0;
	border: 0;
	background: none;
}

#pc-compare .pc-shot--filled img {
	width: 100%;
	border-radius: 16px;
}

/* ---------------------------------------------------------- testimonial */

#pc-compare .pc-quote {
	padding: 26px 28px 28px;
	border: 1px dashed var(--pc-placeholder-dash);
	border-radius: 16px;
	background: #f7fafd;
}

#pc-compare .pc-quote__mark {
	/* Block, so the 32px mark sets its own line box: inline, it is aligned to the
	   16px strut of the card and the row grows by 2px. */
	display: block;
	font-size: 32px;
	line-height: 32px;
	font-weight: 800;
	color: var(--pc-blue);
}

#pc-compare .pc-quote__text {
	margin-top: 9px;
	font-size: 14.5px;
	line-height: 22px;
	font-style: italic;
	color: var(--pc-gray);
}

/* ----------------------------------------------------- numbered steps list */

#pc-compare .pc-steps {
	padding-top: 14px;
}

#pc-compare .pc-steps li {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 68px;
	padding: 0 20px;
	border: 1px solid var(--pc-border);
	border-radius: 12px;
	background: #fff;
	font-size: 16px;
	line-height: 25px;
}

#pc-compare .pc-steps li + li {
	margin-top: 14px;
}

#pc-compare .pc-steps__num {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 17px;
	background: var(--pc-blue);
	color: #fff;
	font-size: 16px;
	line-height: 25px;
	font-weight: 700;
}

#pc-compare .pc-steps b {
	font-weight: 700;
	color: var(--pc-ink);
}

/* --------------------------------------------------------------- CTA card */

#pc-compare .pc-cta {
	padding: 39px 32px 40px;
	border-radius: 20px;
	background-image: linear-gradient(135deg, #18bde3 0%, #0f7bff 100%);
	text-align: center;
}

#pc-compare .pc-cta__title {
	font-size: 26px;
	line-height: 31px;
	font-weight: 700;
	text-align: center;
	color: #fff;
}

#pc-compare .pc-cta__text {
	margin-top: 13px;
	font-size: 16px;
	line-height: 25px;
	text-align: center;
	color: #eaf4ff;
}

#pc-compare .pc-cta .pc-btn {
	margin-top: 23px;
	background: #fff;
	background-image: none;
	box-shadow: none;
	color: var(--pc-blue);
}

#pc-compare .pc-cta .pc-btn:hover,
#pc-compare .pc-cta .pc-btn:focus {
	color: var(--pc-blue);
}

/* ------------------------------------------------------------------- FAQ */

#pc-compare .pc-faq {
	padding-top: 10px;
}

#pc-compare .pc-faq__item {
	border: 1px solid var(--pc-border);
	border-radius: 12px;
	background: #fff;
}

#pc-compare .pc-faq__item + .pc-faq__item {
	margin-top: 10px;
}

#pc-compare .pc-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	font-size: 15.5px;
	line-height: 31px;
	font-weight: 600;
	color: var(--pc-ink);
	cursor: pointer;
	list-style: none;
}

#pc-compare .pc-faq__q::-webkit-details-marker {
	display: none;
}

#pc-compare .pc-faq__sign {
	flex: none;
	font-size: 20px;
	line-height: 31px;
	font-weight: 700;
	color: var(--pc-blue);
}

#pc-compare .pc-faq__sign::before {
	content: "+";
}

/* A question with no answer keeps the plus: there is nothing to reveal yet. */
#pc-compare .pc-faq__item--empty[open] .pc-faq__sign::before {
	content: "+";
}

#pc-compare .pc-faq__item[open] .pc-faq__sign::before {
	content: "–";
}

#pc-compare .pc-faq__a {
	padding: 0 20px 18px;
	font-size: 15.5px;
	line-height: 24px;
}

/* ------------------------------------------------------- full feature grid */

#pc-compare .pc-features {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	padding-top: 14px;
}

#pc-compare .pc-feature {
	padding: 20px 22px;
	border: 1px solid var(--pc-border);
	border-radius: 14px;
	background: #fff;
}

#pc-compare .pc-feature__title {
	font-size: 15.5px;
	line-height: 19px;
	font-weight: 700;
	color: var(--pc-ink);
}

#pc-compare .pc-feature__text {
	margin-top: 5px;
	font-size: 14px;
	line-height: 22px;
	color: var(--pc-gray);
}

/* =========================================================================
 * Responsive. The Figma file only contains the 1440px desktop frame,
so these
 * breakpoints are not traced from a design: columns collapse,
the comparison
 * tables scroll sideways rather than shrink their text,
and the screenshot
 * placeholders lose their fixed height.
 * ====================================================================== */

@media (max-width: 1128px) {
	#pc-compare {
		--pc-container: 100%;
	}

	#pc-compare .pc-hero__title,
#pc-compare .pc-hero__sub,
#pc-compare .pc-text {
		width: auto;
	}
}

@media (max-width: 900px) {
	#pc-compare .pc-band,
#pc-compare .pc-plain {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	#pc-compare .pc-hero {
		padding: 48px 0 40px;
	}

	#pc-compare .pc-hero__title {
		font-size: 32px;
		line-height: 40px;
	}

	#pc-compare .pc-cards,
#pc-compare .pc-intro,
#pc-compare .pc-features {
		grid-template-columns: minmax(0, 1fr);
	}

	#pc-compare .pc-table-wrap {
		overflow-x: auto;
	}

	#pc-compare .pc-table {
		width: 900px;
	}

	#pc-compare .pc-shot {
		height: 380px;
	}

	#pc-compare .pc-steps li {
		height: auto;
		padding: 16px 20px;
	}
}

@media (max-width: 600px) {
	#pc-compare {
		--pc-gutter: 16px;
	}

	#pc-compare .pc-hero__title {
		font-size: 28px;
		line-height: 36px;
	}

	#pc-compare .pc-hero__sub {
		font-size: 16px;
		line-height: 25px;
	}

	#pc-compare .pc-hero__cta {
		flex-direction: column;
		gap: 10px;
	}

	#pc-compare .pc-h2 {
		font-size: 22px;
		line-height: 28px;
	}

	#pc-compare .pc-shot {
		height: 260px;
	}

	#pc-compare .pc-cta {
		padding: 28px 20px 32px;
	}

	#pc-compare .pc-cta__title {
		font-size: 22px;
		line-height: 28px;
	}
}