/* Section: prices. Three plan cards; the highlighted one on the primary colour. */
/* A second prices section right after the first (here: the agency plans) sits on a pale band, with its own spacing above
   and below, and the next plain section keeps its own top spacing. */
/* `.s.s-pricing` outranks base.css `.s:not(.s--bg) + .s:not(.s--bg)`, which otherwise took the band's top spacing away */
.s.s-pricing + .s.s-pricing:not(.s--bg) { background: var(--wp--preset--color--surface-alt); padding-block: var(--wp--preset--spacing--60); }
.s-pricing + .s-pricing + .s:not(.s--bg) { padding-block-start: var(--wp--preset--spacing--60); }
/* on a phone, the phone spacing of base.css */
@media (max-width: 599px) {
	.s.s-pricing + .s.s-pricing:not(.s--bg) { padding-block: var(--wp--preset--spacing--40); }
	.s-pricing + .s-pricing + .s:not(.s--bg) { padding-block-start: var(--wp--preset--spacing--40); }
	/* long plan lists (agency plans) stay short enough for a phone */
	.s-pricing__features { gap: 0.3rem; font-size: 0.9375rem; }
}
.s-pricing .section-head { margin-inline: auto; text-align: center; }
.s-pricing__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wp--preset--spacing--30); grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@media (min-width: 900px) {
	.s-pricing__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* On a phone the plans are a row to swipe, the next plan showing at the edge (arrows and dots: site.js, base.css). */
@media (max-width: 599px) {
	.s-pricing__grid {
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-auto-columns: 84%;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-snap-type: inline mandatory;
		padding-block: 0.5rem;
		scrollbar-width: thin;
	}
	.s-pricing__note { margin-block-start: var(--wp--preset--spacing--30); }
}
/* three plans: three in a row from a tablet on, a little tighter until 900px */
@media (min-width: 600px) {
	.s-pricing__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--20); }
}
@media (min-width: 600px) and (max-width: 899px) {
	.s-pricing__grid--3 .s-pricing__plan { padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20); }
	.s-pricing__grid--3 .s-pricing__amount { font-size: var(--wp--preset--font-size--x-large); }
	/* three narrow cards: the button label keeps one line */
	.s-pricing__grid--3 .s-pricing__btn { padding-inline: 0.75rem; font-size: 0.9375rem; }
	.s-pricing__grid--3 .s-pricing__btn .icon { display: none; }
	.s-pricing__grid--3 .s-pricing__replies { padding-inline: 0.6rem; font-size: 0.9375rem; }
}
/* four plans: two by two on a tablet, four in a row on a wide screen */
@media (min-width: 600px) {
	.s-pricing__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
	.s-pricing__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.s-pricing__grid--4 .s-pricing__plan { padding-inline: var(--wp--preset--spacing--20); }
	.s-pricing__grid--4 .s-pricing__amount { font-size: var(--wp--preset--font-size--x-large); }
}
.s-pricing__plan {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--large);
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--custom--shadow--small);
}
@media (max-width: 599px) {
	.s-pricing__plan { scroll-snap-align: start; padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20); }
}
.s-pricing__plan.is-featured {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-contrast);
	box-shadow: var(--wp--custom--shadow--large);
}
@media (min-width: 900px) {
	.s-pricing__plan.is-featured { transform: translateY(-12px); }
}
.s-pricing__top { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--10); }
.s-pricing__name { margin: 0; font-size: var(--wp--preset--font-size--medium); }
.is-featured .s-pricing__name { color: var(--wp--preset--color--primary-contrast); }
.s-pricing__badge { padding: 0.1rem 0.7rem; border-radius: var(--wp--custom--radius--pill); background: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-contrast); font-size: var(--wp--preset--font-size--small); font-weight: var(--wp--custom--weight--heading); }
.s-pricing__price { margin: var(--wp--preset--spacing--10) 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem; }
.s-pricing__amount { font-family: var(--wp--custom--font--heading); font-weight: var(--wp--custom--weight--heading); font-size: var(--wp--preset--font-size--xx-large); line-height: 1; color: var(--wp--preset--color--primary); }
.is-featured .s-pricing__amount { color: var(--wp--preset--color--primary-contrast); }
.s-pricing__period { color: var(--wp--preset--color--muted); font-weight: var(--wp--custom--weight--strong); }
.is-featured .s-pricing__period, .is-featured .s-pricing__alt { color: rgba(255, 255, 255, 0.86); }
.s-pricing__alt { margin: 0; color: var(--wp--preset--color--muted); font-size: 0.9375rem; }
.s-pricing__replies {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: var(--wp--preset--spacing--10) 0;
	padding: 0.55rem 0.8rem;
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--surface-alt);
	font-weight: var(--wp--custom--weight--strong);
	text-wrap: balance;
}
.s-pricing__replies .icon { color: var(--wp--preset--color--primary); }
.is-featured .s-pricing__replies { background: rgba(255, 255, 255, 0.1); }
.is-featured .s-pricing__replies .icon { color: var(--wp--preset--color--accent); }
.s-pricing__features { list-style: none; margin: 0 0 var(--wp--preset--spacing--30); padding: 0; display: grid; gap: 0.45rem; }
.s-pricing__features li { display: flex; gap: 0.5rem; align-items: flex-start; }
.s-pricing__features .icon { color: var(--wp--preset--color--primary); margin-block-start: 0.25em; }
.is-featured .s-pricing__features .icon { color: var(--wp--preset--color--accent); }
.s-pricing__btn { margin-block-start: auto; inline-size: 100%; }
/* the notes under the cards: one column, centred as a block, every line starting at the same edge, each star on its first line */
.s-pricing__note { list-style: none; margin: var(--wp--preset--spacing--40) auto 0; padding: 0; display: grid; gap: var(--wp--preset--spacing--10); max-inline-size: 48rem; inline-size: fit-content; }
.s-pricing__note li { display: flex; align-items: flex-start; gap: 0.45rem; color: var(--wp--preset--color--ink); font-weight: var(--wp--custom--weight--strong); }
.s-pricing__note .icon { flex: none; color: var(--wp--preset--color--primary); margin-block-start: 0.3em; }