/*
 * TOPOSEL service pages: shared layout, typography and "Why Choose Toposel?" design.
 * Loaded after the four page stylesheets (service-retention / -seo / -performance /
 * -software) on the four service pages only, and scoped to .toposel-svc, so it does
 * not touch any other page. Values come from the supplied reference screenshots
 * (captured at a 2000 px wide viewport): 1240 px content width, two 598 px columns
 * with a 44 px gap, 48 px headings, 17 px body text, 288 x 433 px oval photos.
 *
 * The four pages use different class names for the same components, so every rule
 * below lists the equivalent classes once instead of repeating the design per page.
 * The Performance page has no reference screenshot yet: it only receives the shared
 * width, column grid and "Why Choose Toposel?" design, not the typography changes.
 */

.toposel-svc {
	--svc-purple: #624be0;
	--svc-purple-dark: #4f39c4;
	--svc-dark: #070b12;
	--svc-heading: #0b0d12;
	--svc-text: #33353d;
}

/* ---------- Content width: 1240 px ---------- */

.toposel-svc .toposel-container,
.toposel-svc .pm-container {
	box-sizing: border-box;
	max-width: 1280px;
	padding-left: 20px;
	padding-right: 20px;
}

.toposel-svc :is(.seo-overview-container, .seo-traffic-container, .seo-why-container, .seo-cards-grid) {
	max-width: 1240px;
}

.toposel-svc :is(.seo-cards-grid, .services-cards-wrapper, .pm-cards-grid) {
	gap: 32px;
}

/* ---------- Phones and tablets: feature cards ("What does SEO / Performance Marketing include?", "Our Web Development
   Services"): round icon above a centred title and text, compact cards, as on the reference screenshots. ---------- */
@media (max-width: 1024px) {
	.toposel-svc :is(.seo-cards-grid, .services-cards-wrapper, .pm-cards-grid) {
		gap: 14px;
	}

	.toposel-svc :is(.seo-card, .pm-card, .service-card) {
		padding: 20px 20px 26px;
		border-radius: 8px;
	}

	.toposel-svc :is(.seo-card-icon, .pm-card-icon, .card-icon-badge) {
		border-radius: 50%;
		margin-bottom: 12px;
	}

	.toposel-svc .seo-card-icon {
		width: 46px;
		height: 46px;
	}

	.toposel-svc .pm-card-icon {
		width: 56px;
		height: 56px;
	}

	.toposel-svc .card-icon-badge {
		width: 54px;
		height: 54px;
	}

	.toposel-svc .seo-card-title,
	.toposel-svc .pm-card-title,
	.toposel-svc .service-card h3 {
		margin: 0 0 6px;
		font-size: 20px;
		font-weight: 600;
		line-height: 1.25;
	}

	.toposel-svc .seo-card-desc {
		font-size: 14.5px;
		line-height: 1.55;
	}

	.toposel-svc .pm-card-text {
		font-size: 13px;
		line-height: 1.55;
	}

	.toposel-svc .service-card p {
		margin: 0;
		font-size: 12.5px;
		line-height: 1.5;
	}

	/* Headings above those cards. */
	.toposel-svc .retention-features-section .section-heading,
	.toposel-svc .seo-includes-section .seo-section-title,
	.toposel-svc .pm-features-section .pm-heading-lg {
		font-size: 27px;
		font-weight: 600;
		line-height: 1.25;
	}

	.toposel-svc .retention-features-section .sub-tag,
	.toposel-svc .seo-includes-section .seo-badge,
	.toposel-svc .toposel-services-grid-section .sub-heading-purple {
		font-size: 15px;
		font-weight: 600;
	}

	.toposel-svc .pm-features-section .pm-section-desc {
		font-size: 14px;
		line-height: 1.6;
	}
}

/* ---------- Hero / text-and-image sections ---------- */

.toposel-svc :is(.retention-intro-section, .toposel-overview-section) {
	padding-top: 100px;
	padding-bottom: 100px;
}

.toposel-svc .seo-overview-section {
	padding-top: 100px;
	padding-bottom: 100px;
}

.toposel-svc .seo-overview-content {
	padding-left: 0;
}

.toposel-svc .arch-image-wrapper {
	max-width: 486px;
}

/* Retention hero: the picture is a cut-out standing in two pale arches (outer #f3f1fc, inner gradient),
   as in the reference. The decorative emoji bubbles had no styles and are not part of the reference
   (its app icons are part of the picture), so they are not shown. */
.toposel-svc .arch-image-wrapper .arch-bg {
	position: absolute;
	z-index: 0;
	top: 11%;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: 999px 999px 0 0;
	background: #f3f1fc;
}

.toposel-svc .arch-image-wrapper .arch-bg::after {
	content: "";
	position: absolute;
	top: 68px;
	right: 28px;
	bottom: 0;
	left: 28px;
	border-radius: 999px 999px 0 0;
	background: linear-gradient(180deg, #e9e6fb 0%, #cfc9f5 100%);
}

.toposel-svc .arch-image-wrapper .hero-person-img {
	height: auto; /* the width/height attributes of the <img> must not stretch the picture */
	max-width: 100%;
	position: relative;
	z-index: 2;
	border-radius: 0;
	background: none;
}

.toposel-svc .arch-image-wrapper .floating-icons {
	display: none;
}

.toposel-svc .svc-hero-art {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

/* Organic Traffic: images left, text right, vertically centred on each other. */
.toposel-svc .seo-traffic-section {
	padding-top: 80px;
	padding-bottom: 110px;
}

.toposel-svc .seo-includes-section {
	padding-bottom: 62px;
}

.toposel-svc .seo-traffic-container {
	align-items: center;
}

.toposel-svc .seo-traffic-content p {
	max-width: 500px;
}

/* ---------- Typography (Retention, SEO, Software; Performance keeps its own) ---------- */

.toposel-svc :is(.sub-tag, .seo-badge, .sub-heading-purple) {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: var(--svc-purple);
	margin-bottom: 12px;
}

.toposel-svc :is(.section-heading, .seo-overview-title, .seo-section-title, .seo-traffic-content h2, .section-title) {
	font-size: 48px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0;
	color: var(--svc-heading);
	margin: 0 0 20px;
}

.toposel-svc :is(.description, .seo-overview-desc, .body-text, .seo-traffic-content p) {
	font-size: 17px;
	line-height: 1.55;
	color: var(--svc-text);
	margin-top: 0;
	margin-bottom: 20px;
}

.toposel-svc .seo-list li {
	font-size: 17px;
	line-height: 1.55;
	margin-bottom: 3px;
}

/* Primary buttons: same size, colour and circled arrow on all pages. */
.toposel-svc :is(.btn-primary-purple, .toposel-btn-primary) {
	background-color: var(--svc-purple);
	padding: 14px 27px;
	font-size: 18px;
	font-weight: 700;
	line-height: 26px;
	border-radius: 999px;
}

.toposel-svc :is(.btn-primary-purple, .toposel-btn-primary):hover {
	background-color: var(--svc-purple-dark);
}

.toposel-svc :is(.btn-primary-purple, .toposel-btn-primary) svg.arrow {
	flex: 0 0 auto;
}

/* ---------- Our Process (Software) ---------- */

.toposel-svc .toposel-process-section {
	padding-top: 110px;
	padding-bottom: 110px;
}

@media (min-width: 992px) {
	.toposel-svc .toposel-process-section .grid-2-col {
		grid-template-columns: 2fr 3fr;
		gap: 40px;
	}

	.toposel-svc .toposel-process-section .process-steps-stack {
		gap: 22px;
	}

	.toposel-svc .toposel-process-section .process-badge {
		width: 240px;
		height: 50px;
		padding: 0 20px 0 12px;
		border: 0;
		border-radius: 4px;
		box-shadow: 0 2px 10px rgba(11, 13, 18, 0.08);
		font-size: 20px;
		box-sizing: border-box;
	}

	.toposel-svc .toposel-process-section .process-badge.step-1 { margin-left: 0; }
	.toposel-svc .toposel-process-section .process-badge.step-2 { margin-left: 35px; }
	.toposel-svc .toposel-process-section .process-badge.step-3 { margin-left: 70px; }
	.toposel-svc .toposel-process-section .process-badge.step-4 { margin-left: 105px; }
	.toposel-svc .toposel-process-section .process-badge.step-5 { margin-left: 140px; }
	.toposel-svc .toposel-process-section .process-badge.step-6 { margin-left: 175px; }
}

@media (max-width: 991px) {
	.toposel-svc .toposel-process-section {
		padding-top: 72px;
		padding-bottom: 72px;
	}

	.toposel-svc .toposel-process-section .grid-2-col {
		gap: 40px;
	}

	.toposel-svc .toposel-process-section .process-steps-stack {
		gap: 16px;
	}

	.toposel-svc .toposel-process-section .process-badge {
		min-height: 50px;
		padding: 0 20px 0 14px;
		border: 0;
		border-radius: 4px;
		box-shadow: 0 2px 10px rgba(11, 13, 18, 0.08);
	}
}

/* ---------- Two equal columns (598 px + 44 px) ---------- */

@media (min-width: 992px) {
	.toposel-svc :is(.grid-2col, .why-choose-grid, .why-choose-layout, .seo-overview-container, .seo-traffic-container, .seo-why-grid, .pm-intro-grid, .pm-why-grid),
	.toposel-svc .toposel-overview-section .grid-2-col {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 44px;
	}
}

/* ---------- "Why Choose Toposel?" (identical on all four pages) ---------- */

.toposel-svc :is(.why-choose-section, .toposel-why-choose-section, .seo-why-section, .pm-why-section) {
	position: relative;
	overflow: hidden;
	padding-top: 110px;
	padding-bottom: 120px;
	color: #fff;
	background-color: var(--svc-dark);
	background-image:
		radial-gradient(circle at 100% 0, #3a3c41 190px, transparent 191px),
		radial-gradient(circle at 100% 0, #26282d 270px, transparent 271px),
		radial-gradient(circle at 100% 0, #161a1f 350px, transparent 351px),
		radial-gradient(circle at 0 100%, #3a3c41 190px, transparent 191px),
		radial-gradient(circle at 0 100%, #26282d 270px, transparent 271px),
		radial-gradient(circle at 0 100%, #161a1f 350px, transparent 351px);
	background-repeat: no-repeat;
}

/* heading block */
.toposel-svc :is(.why-choose-section .section-header, .seo-why-header, .pm-why-section .pm-text-center) {
	margin: 0 0 36px;
	text-align: center;
}

.toposel-svc :is(.why-choose-section .sub-tag, .toposel-why-choose-section .sub-heading-gray, .seo-why-badge, .pm-why-section .pm-subtag) {
	display: block;
	margin: 0 0 18px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: #fff;
}

.toposel-svc .why-choose-section .section-header .section-heading,
.toposel-svc .toposel-why-choose-section .section-title,
.toposel-svc .seo-why-title,
.toposel-svc .pm-why-section .pm-heading-lg {
	margin: 0;
	font-size: 48px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0;
	color: #fff !important;
}

.toposel-svc .toposel-why-choose-section .why-choose-layout {
	margin-top: 36px;
}

.toposel-svc .why-choose-section .why-choose-grid {
	margin-top: 0;
}

.toposel-svc :is(.why-choose-grid, .why-choose-layout, .seo-why-grid, .pm-why-grid) {
	align-items: center;
	text-align: left;
}

/* cards */
.toposel-svc :is(.accordion-column, .why-choose-accordion, .seo-accordion, .pm-accordion) {
	display: block;
	text-align: left;
}

.toposel-svc :is(.why-choose-section, .toposel-why-choose-section, .seo-why-section, .pm-why-section) :is(.accordion-item, .seo-accordion-item, .pm-accordion-item) {
	margin: 0 0 16px;
	border: 0;
	border-radius: 4px;
	background: #fff;
	color: var(--svc-heading);
	overflow: hidden;
}

.toposel-svc :is(.why-choose-section, .toposel-why-choose-section, .seo-why-section, .pm-why-section) :is(.accordion-item, .seo-accordion-item, .pm-accordion-item):last-child {
	margin-bottom: 0;
}

.toposel-svc :is(.why-choose-section, .toposel-why-choose-section, .seo-why-section, .pm-why-section) :is(.accordion-item, .seo-accordion-item, .pm-accordion-item).active {
	background: var(--svc-purple);
	color: #fff;
}

.toposel-svc :is(.accordion-header, .seo-accordion-header, .pm-accordion-header) {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 24px 16px;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 20px;
	font-weight: 700;
	line-height: 24px;
	text-align: left;
	color: inherit;
}

.toposel-svc :is(.acc-icon, .accordion-icon, .seo-accordion-icon, .pm-accordion-icon) {
	flex: 0 0 auto;
	margin-left: 16px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
}

.toposel-svc :is(.accordion-content, .accordion-body, .seo-accordion-content, .pm-accordion-body) {
	padding: 0 22px 23px;
	font-size: 17px;
	line-height: 26px;
	color: rgba(255, 255, 255, 0.95);
	opacity: 1;
}

.toposel-svc :is(.accordion-content, .accordion-body, .seo-accordion-content, .pm-accordion-body) p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

/* oval photos: 288 x 433, second one 108 px lower, filling the 598 px column */
.toposel-svc :is(.curved-images-flex, .why-choose-gallery, .seo-why-gallery, .pm-arched-image-wrapper, .seo-oval-images) {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 22px;
	box-sizing: border-box;
	min-width: 0;
	width: 100%;
	max-width: 598px;
}

.toposel-svc :is(.seo-overview-container, .seo-traffic-container, .seo-why-grid, .pm-intro-grid, .pm-why-grid, .why-choose-grid, .why-choose-layout, .grid-2col, .grid-2-col) > * {
	min-width: 0;
}

.toposel-svc :is(.oval-img-card, .oval-image, img.seo-oval-img, .pm-arch-card) {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	max-width: 288px;
	height: auto;
	aspect-ratio: 288 / 433;
	border-radius: 999px;
	overflow: hidden;
	object-fit: cover;
	box-shadow: none;
}

.toposel-svc :is(.oval-img-card, .oval-image, .pm-arch-card) img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

.toposel-svc :is(.curved-images-flex, .why-choose-gallery, .seo-why-gallery, .pm-arched-image-wrapper, .seo-oval-images) > :nth-child(2) {
	margin-top: calc((100% - 22px) / 2 * 0.375);
}

/* ---------- Tablet / mobile ---------- */

@media (max-width: 991px) {
	.toposel-svc :is(.section-heading, .seo-overview-title, .seo-section-title, .seo-traffic-content h2, .section-title),
	.toposel-svc .why-choose-section .section-header .section-heading,
	.toposel-svc .toposel-why-choose-section .section-title,
	.toposel-svc .seo-why-title,
	.toposel-svc .pm-why-section .pm-heading-lg {
		font-size: 36px;
	}

	.toposel-svc :is(.retention-intro-section, .toposel-overview-section, .seo-overview-section) {
		padding-top: 72px;
		padding-bottom: 72px;
	}

	.toposel-svc :is(.why-choose-section, .toposel-why-choose-section, .seo-why-section, .pm-why-section) {
		padding-top: 80px;
		padding-bottom: 80px;
	}

	.toposel-svc :is(.curved-images-flex, .why-choose-gallery, .seo-why-gallery, .pm-arched-image-wrapper, .seo-oval-images) {
		margin: 0 auto;
	}

	.toposel-svc :is(.grid-2col, .why-choose-grid, .why-choose-layout, .seo-overview-container, .seo-traffic-container, .seo-why-grid, .pm-intro-grid, .pm-why-grid) {
		gap: 40px;
	}
}

@media (max-width: 600px) {
	.toposel-svc :is(.section-heading, .seo-overview-title, .seo-section-title, .seo-traffic-content h2, .section-title),
	.toposel-svc .why-choose-section .section-header .section-heading,
	.toposel-svc .toposel-why-choose-section .section-title,
	.toposel-svc .seo-why-title,
	.toposel-svc .pm-why-section .pm-heading-lg {
		font-size: 30px;
	}

	.toposel-svc :is(.accordion-header, .seo-accordion-header, .pm-accordion-header) {
		font-size: 18px;
		padding: 20px 16px;
	}

	.toposel-svc :is(.accordion-content, .accordion-body, .seo-accordion-content, .pm-accordion-body) {
		font-size: 16px;
	}
}

/* Retention: the bundled retention-hero.png already contains the two arches, so the CSS arches
   are not drawn behind it (a Media Library cut-out still gets them). */
.toposel-svc .arch-image-wrapper.is-composite .arch-bg {
	display: none;
}

/* ---------- Performance Marketing only ---------- */

/* Hero picture sits on plain white (the old pale-lilac box is gone). Only this page uses .pm-illustration-box. */
.toposel-svc .pm-illustration-box {
	background: #fff;
	border-radius: 0;
	padding: 0;
}

/* "Leveraging Analytics, Optimizing Profitability": full-width near-black band with grey arcs top right and
   bottom left, white heading, three purple rounded boxes. Measured on the reference screenshot (2000 px wide)
   and scaled with --u (1 px at 2000 px wide and up). The band itself is the .pm-metrics-card-dark element, so
   the existing reveal (card, then heading, then boxes) still applies to it. */
.toposel-svc .pm-metrics-section {
	--u: clamp(0.3px, 0.05vw, 1px);
	overflow-x: clip;
	padding: 60px 0;
}

.toposel-svc .pm-metrics-section .pm-metrics-card-dark {
	box-sizing: border-box;
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	padding: clamp(56px, calc(141 * var(--u)), 141px) 20px clamp(48px, calc(136 * var(--u)), 136px);
	border-radius: 0;
	background:
		radial-gradient(circle at calc(100% + 10 * var(--u)) calc(-12 * var(--u)), #2e2f32 0 calc(240 * var(--u)), transparent calc(240 * var(--u))),
		radial-gradient(circle at calc(100% + 10 * var(--u)) calc(-12 * var(--u)), #232427 0 calc(340 * var(--u)), transparent calc(340 * var(--u))),
		radial-gradient(circle at calc(100% + 10 * var(--u)) calc(-12 * var(--u)), #1b1c1f 0 calc(432 * var(--u)), transparent calc(432 * var(--u))),
		radial-gradient(circle at 0 calc(100% + 72 * var(--u)), #2e2f32 0 calc(245 * var(--u)), transparent calc(245 * var(--u))),
		radial-gradient(circle at 0 calc(100% + 72 * var(--u)), #232427 0 calc(345 * var(--u)), transparent calc(345 * var(--u))),
		radial-gradient(circle at 0 calc(100% + 72 * var(--u)), #1b1c1f 0 calc(445 * var(--u)), transparent calc(445 * var(--u))),
		#0b0c10;
	color: #fff;
}

.toposel-svc .pm-metrics-section .pm-metrics-title {
	margin: 0 auto clamp(28px, calc(75 * var(--u)), 75px);
	font-size: clamp(1.6rem, 2.8vw, 3.5rem);
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	color: #fff;
}

.toposel-svc .pm-metrics-section .pm-stats-grid {
	width: min(78vw, 1550px);
	margin: 0 auto;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(12px, calc(28 * var(--u)), 28px);
}

.toposel-svc .pm-metrics-section .pm-stat-box {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(110px, calc(192 * var(--u)), 192px);
	padding: 20px 16px;
	border-radius: clamp(20px, calc(40 * var(--u)), 40px);
	background: linear-gradient(90deg, #4527d4 0%, #6e57da 100%);
}

.toposel-svc .pm-metrics-section .pm-stat-value {
	margin: 0;
	font-size: clamp(2.25rem, 4vw, 5rem);
	font-weight: 600;
	line-height: 1.05;
}

.toposel-svc .pm-metrics-section .pm-stat-label {
	font-size: clamp(0.95rem, 1.3vw, 1.625rem);
	line-height: 1.2;
	opacity: 1;
}

@media (max-width: 1024px) {
	.toposel-svc .pm-metrics-section .pm-metrics-title {
		max-width: 11em; /* Two lines, breaking after "Analytics,". */
		font-size: 40px;
		line-height: 1.3;
	}
}

@media (max-width: 767px) {
	.toposel-svc .pm-metrics-section .pm-metrics-title {
		font-size: clamp(24px, 8.2vw, 32px);
	}
}

@media (max-width: 700px) {
	.toposel-svc .pm-metrics-section .pm-stats-grid {
		width: 100%;
		max-width: 420px;
		grid-template-columns: 1fr;
	}
}

/* ---------- Performance Marketing: "Why Choose Toposel?" on a pure white background ---------- */
.toposel-svc .pm-why-section {
	color: var(--svc-heading);
	background-color: #fff;
	background-image: none;
}

.toposel-svc .pm-why-section .pm-heading-lg {
	color: var(--svc-heading) !important;
}

.toposel-svc .pm-why-section .pm-subtag {
	color: var(--svc-purple);
}

/* The closed cards were white on dark; on white they get a fine outline and a soft shadow. */
.toposel-svc .pm-why-section .pm-accordion-item:not(.active) {
	box-shadow: inset 0 0 0 1px #e3e3ee, 0 2px 10px rgba(11, 13, 18, 0.06); /* outline drawn as a shadow: no extra height */
}

/* ---------- Phones only (767 px and narrower): picture-first order and centred text, as in the mobile reference ----------
   Tablet and desktop are not touched; everything here sits inside this one media query. */
@media (max-width: 767px) {
	/* "Why Choose Toposel?": the two pictures come above the accordion (all four pages). */
	.toposel-svc :is(.why-choose-grid > .media-column, .seo-why-grid > .seo-why-gallery, .pm-why-grid > .pm-why-media, .why-choose-layout > .why-choose-gallery) {
		order: -1;
	}

	/* The two picture pills (Why Choose and Organic Traffic): 160 x 291, 12 px apart, the second one lower. */
	.toposel-svc :is(.curved-images-flex, .why-choose-gallery, .seo-why-gallery, .pm-arched-image-wrapper, .seo-oval-images) {
		gap: 12px;
		max-width: 332px;
	}

	.toposel-svc :is(.oval-img-card, .oval-image, img.seo-oval-img, .pm-arch-card) {
		aspect-ratio: 160 / 291;
	}

	.toposel-svc :is(.curved-images-flex, .why-choose-gallery, .seo-why-gallery, .pm-arched-image-wrapper, .seo-oval-images) > :nth-child(2) {
		margin-top: calc((100% - 12px) / 2 * 0.356);
	}

	/* Hero blocks: Retention, Performance and Software centre all their text; SEO centres label and heading. */
	.toposel-svc :is(.intro-content, .pm-intro-content, .overview-content, .seo-traffic-content) {
		text-align: center;
	}

	.toposel-svc .seo-overview-content :is(.seo-badge, .seo-overview-title) {
		display: block;
		text-align: center;
	}

	/* Performance: the small purple label is shown in normal case, as in the reference. */
	.toposel-svc .pm-intro-section .pm-intro-content .pm-subtag {
		text-transform: none;
	}

	/* Text sizes of the reference (a little smaller than on tablet). */
	.toposel-svc :is(.description, .seo-overview-desc, .pm-body-text, .body-text) {
		font-size: 14.5px;
		line-height: 1.55;
	}

	.toposel-svc .retention-intro-section .intro-content .section-heading {
		max-width: 330px;
		margin-left: auto;
		margin-right: auto;
	}

	.toposel-svc .seo-overview-section .seo-overview-content .seo-overview-title {
		max-width: 300px;
		margin-left: auto;
		margin-right: auto;
	}

	/* Buttons sit in the middle. */
	.toposel-svc :is(.cta-action, .btn-wrapper, .pm-btn-wrapper) {
		display: flex;
		justify-content: center;
	}

	.toposel-svc :is(.seo-overview-content, .seo-traffic-content) > .btn-primary-purple {
		display: flex;
		width: fit-content;
		margin-left: auto;
		margin-right: auto;
	}

	/* Performance checklist: the three lines form a centred block. */
	.toposel-svc .pm-checklist {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* Software "Our Process": text first (centred), then the six steps as a narrower column of cards. */
	.toposel-svc .toposel-process-section .process-content {
		order: -1;
		text-align: center;
	}

	.toposel-svc .toposel-process-section .process-content .section-title {
		font-size: 40px;
	}

	.toposel-svc .toposel-process-section .btn-wrapper {
		display: flex;
		justify-content: center;
	}

	.toposel-svc .toposel-process-section .process-steps-stack {
		width: 100%;
		max-width: 250px;
		margin: 0 auto;
		gap: 11px;
	}

	.toposel-svc .toposel-process-section .process-badge {
		min-height: 49px;
		padding: 0 16px 0 15px;
		border: 0;
		border-radius: 5px;
		box-shadow: 0 4px 14px rgba(11, 13, 18, 0.1);
		font-size: 19px;
		font-weight: 700;
	}

	.toposel-svc .toposel-process-section .step-icon {
		color: #555b66;
	}
}