/* TOPOSEL Razorpay Integration Services page. Scoped to .toposel-svc--razorpay (page content) and .toposel-page--razorpay (header wrapper). */

.rz-top {
	background: linear-gradient(100deg, #f0ecfe 0%, #fbf9fe 48%, #f9f6fe 100%); /* same horizontal tones as the top of the hero below, so no seam shows */
}

/* Header row uses the same 1200 px content width as the hero below (this page loads services-common.css only, not the 1280 px layout sheet), so the logo lines up with the hero text. On wide desktops it sat further in, on the 1054 px blog width. */
.toposel-page--razorpay .toposel-header-inner {
	max-width: 1200px;
}

.toposel-svc--razorpay {
	--rz-purple: #4a2fd6;
	--rz-ink: #090b0e;
	--rz-text: #3d4c5e;
	--rz-line: #e6e8ef;
	--rz-soft: #f7f5fe;
	font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--rz-ink);
	overflow-x: clip;
}
.toposel-svc--razorpay h1,
.toposel-svc--razorpay h2,
.toposel-svc--razorpay h3,
.toposel-svc--razorpay p {
	margin: 0;
	font-family: inherit;
}
.toposel-svc--razorpay section {
	box-sizing: border-box;
}
.toposel-svc--razorpay img {
	max-width: 100%;
	height: auto;
}

/* CTA band: the reference shows the heading on one line, wider than the shared band's default. */
.toposel-page--razorpay .toposel-cta-title {
	max-width: none;
}
.toposel-page--razorpay .toposel-cta-subtitle {
	max-width: 760px;
}

/* ---------- Hero ---------- */
.toposel-svc--razorpay .rz-hero {
	padding: 56px 0 72px;
	background:
		radial-gradient(ellipse 45% 75% at 100% 100%, #eae5fd 0%, rgba(234, 229, 253, 0) 100%),
		linear-gradient(100deg, #f0ecfe 0%, #fbf9fe 48%, #f9f6fe 100%);
}
.toposel-svc--razorpay .rz-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
	gap: 32px;
	align-items: center;
}
.toposel-svc--razorpay .rz-hero__title {
	font-size: 40px;
	line-height: 1.2;
	font-weight: 600;
	color: var(--rz-ink);
}
.toposel-svc--razorpay .rz-hero__title span {
	color: var(--rz-purple);
}
.toposel-svc--razorpay .rz-hero__lead {
	margin-top: 36px;
	font-size: 26px;
	line-height: 1.7;
	font-weight: 400;
	color: #4a5160;
}
.toposel-svc--razorpay .rz-hero__body {
	margin-top: 20px;
	font-size: 18px;
	line-height: 1.65;
	color: #4a5160;
	max-width: 600px;
}
.toposel-svc--razorpay .rz-hero__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 28px;
	margin-top: 36px;
}
.toposel-svc--razorpay .rz-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 28px;
	border-radius: 999px;
	background: var(--rz-purple);
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}
.toposel-svc--razorpay .rz-btn svg {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}
.toposel-svc--razorpay .rz-proof {
	display: flex;
	align-items: center;
	gap: 14px;
}
.toposel-svc--razorpay .rz-proof__avatars {
	display: block;
	width: 102px;
	height: auto;
}
.toposel-svc--razorpay .rz-proof__text {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}
.toposel-svc--razorpay .rz-proof__text strong {
	font-size: 18px;
	font-weight: 600;
	color: var(--rz-ink);
}
.toposel-svc--razorpay .rz-proof__text span {
	font-size: 16px;
	color: #5a6272;
}
.toposel-svc--razorpay .rz-hero__media {
	display: flex;
	justify-content: flex-end;
}
/* The picture carries a soft margin of its own background (about 11% on every side) that fades out through the mask, so it melts into
   the hero background instead of showing as a panel. The width and negative margins give that margin back, so the card and phone keep
   the size they would have at the column width; .rz-hero clips the overhang sideways. */
.toposel-svc--razorpay .rz-hero {
	overflow-x: clip;
}
.toposel-svc--razorpay .rz-hero__text {
	position: relative;
	z-index: 1; /* the faded margin of the picture can overlap the button below 861 px; keep the text above it */
}
.toposel-svc--razorpay .rz-hero__img {
	display: block;
	flex: 0 0 auto;
	width: 128.2%;
	max-width: 680px;
	height: auto;
	margin: -11.4% -14.1%;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
	mask-composite: intersect;
	pointer-events: none;
}
.toposel-svc--razorpay .rz-hero__img--mobile {
	display: none; /* phone-only picture, see the 767 px block */
}

/* ---------- Section headings ---------- */
.toposel-svc--razorpay .rz-head {
	text-align: center;
}
.toposel-svc--razorpay .rz-title {
	font-size: 34px;
	line-height: 1.3;
	font-weight: 600;
	color: var(--rz-ink);
}
.toposel-svc--razorpay .rz-sub {
	margin-top: 14px;
	font-size: 20px;
	line-height: 1.5;
	color: var(--rz-text);
}

/* ---------- What does Razorpay Integration include? ---------- */
.toposel-svc--razorpay .rz-includes {
	padding: 40px 0 64px;
	background: linear-gradient(180deg, #faf8fe 0%, #fff 220px);
}
.toposel-svc--razorpay .rz-intro-box {
	position: relative;
	overflow: hidden;
	margin: 36px auto 0;
	max-width: 1160px;
	padding: 38px 96px;
	border-radius: 24px;
	background: #f9f8fe;
	text-align: center;
	isolation: isolate;
}
/* Side circles (reference): a solid circle with two wider, fainter rings around it, centred on the left and right edge of the box,
   half hidden by it. Sized from the box height so they keep their proportions at every width. */
.toposel-svc--razorpay .rz-intro-box::before,
.toposel-svc--razorpay .rz-intro-box::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	height: min(156%, 330px); /* capped so a tall box on a phone does not get giant circles */
	aspect-ratio: 1;
	border-radius: 50%;
	pointer-events: none;
	/* Reference layers: inner #dcd5fb, middle #e8e4fc, outer #f0edfd at 50 / 75 / 100% of the outer radius. */
	background: radial-gradient(circle closest-side, #dcd5fb 0 50%, #e8e4fc 50% 75%, #f0edfd 75% 100%, transparent 100%);
	transform: translate(-50%, -50%); /* centring; the drift below uses the separate "translate" property */
}
.toposel-svc--razorpay .rz-intro-box::before {
	left: 0;
	animation: rz-drift-x 5s ease-in-out infinite;
}
.toposel-svc--razorpay .rz-intro-box::after {
	left: 100%;
	animation: rz-drift-y 5s ease-in-out infinite;
}
/* Same slow 5 s ease-in-out drift as the rings of the "Ready to integrate Razorpay…" band below (smaller distance). */
@keyframes rz-drift-x {
	0%, 100% { translate: 0 0; }
	50% { translate: 18px 0; }
}
@keyframes rz-drift-y {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 18px; }
}
@media (prefers-reduced-motion: reduce) {
	.toposel-svc--razorpay .rz-intro-box::before,
	.toposel-svc--razorpay .rz-intro-box::after {
		animation: none;
	}
}
.toposel-svc--razorpay .rz-intro-box p {
	font-size: 18px;
	line-height: 1.67;
	color: #3a3f55;
}
.toposel-svc--razorpay .rz-intro-box strong {
	color: var(--rz-ink);
	font-weight: 700;
}
.toposel-svc--razorpay .rz-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	margin: 36px auto 0;
	max-width: 1160px;
}
.toposel-svc--razorpay .rz-card {
	padding: 26px 18px 26px 22px;
	background: #fff;
	border: 1px solid var(--rz-line);
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(17, 17, 40, 0.06);
}
.toposel-svc--razorpay .rz-card__head {
	display: flex;
	align-items: center;
	gap: 16px;
}
.toposel-svc--razorpay .rz-badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 10px;
	background: var(--rz-purple);
	color: #fff;
}
.toposel-svc--razorpay .rz-badge svg {
	width: 28px;
	height: 28px;
}
.toposel-svc--razorpay .rz-card__title {
	font-size: 22px;
	line-height: 1.32;
	font-weight: 600;
	color: #090b0e;
}
.toposel-svc--razorpay .rz-card__text {
	margin-top: 22px;
	font-size: 18px;
	line-height: 1.8;
	font-weight: 400;
	color: #3d4c5e;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.toposel-svc--razorpay .rz-card,
.toposel-svc--razorpay .rz-why__card {
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
/* Hover (reference): purple border and a soft purple glow, the same as the Our Services cards. Mouse only; size and content never change. */
@media (hover: hover) and (pointer: fine) {
	.toposel-svc.toposel-svc--razorpay .rz-card:hover {
		border-color: var(--rz-purple);
		box-shadow: 0 8px 24px rgba(78, 47, 218, 0.12);
		transform: translateY(-2px);
	}
	/* "Why Choose Toposel?": colour-neutral hover, the border keeps its colour and the shadow is neutral grey; only the lift and the transition remain. */
	.toposel-svc.toposel-svc--razorpay .rz-why__card:hover {
		box-shadow: 0 8px 24px rgba(17, 17, 40, 0.1);
		transform: translateY(-2px);
	}
}
@media (prefers-reduced-motion: reduce) {
	.toposel-svc.toposel-svc--razorpay .rz-card:hover,
	.toposel-svc.toposel-svc--razorpay .rz-why__card:hover {
		transform: none;
	}
}

/* ---------- Web & Platform Integration ---------- */
.toposel-svc--razorpay .rz-platform {
	padding: 56px 0;
	background: var(--rz-soft);
}
.toposel-svc--razorpay .rz-platform__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
	gap: 32px;
	align-items: center;
}
.toposel-svc--razorpay .rz-pill {
	display: inline-block;
	padding: 9px 20px;
	border-radius: 999px;
	background: #e6e1fb;
	color: var(--rz-purple);
	font-size: 15px;
	line-height: 1.3;
}
.toposel-svc--razorpay .rz-platform__title {
	margin-top: 24px;
	font-size: 34px;
	line-height: 1.3;
	font-weight: 600;
	color: var(--rz-ink);
}
.toposel-svc--razorpay .rz-platform__lead {
	margin-top: 22px;
	max-width: 560px;
	font-size: 18px;
	line-height: 1.8;
	color: #4a5160;
}
.toposel-svc--razorpay .rz-checks {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: start;
	gap: 22px 44px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}
.toposel-svc--razorpay .rz-checks li {
	display: flex;
	align-items: center;
	gap: 13px;
	font-size: 18px;
	line-height: 1.4;
	color: #2c3350;
}
.toposel-svc--razorpay .rz-check {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #4cc364;
}
.toposel-svc--razorpay .rz-platform__media {
	display: flex;
	justify-content: flex-end;
}
.toposel-svc--razorpay .rz-platform__img {
	display: block;
	width: 100%;
	max-width: 415px;
	height: auto;
}

.toposel-svc--razorpay svg.rz-platform__img {
	overflow: visible; /* a floating logo may leave the drawing's edge by a few units */
}
/* The four platform logos float up and down like the icons of the Home hero (tsl-float-y: 7-9 s, ease-in-out, endless), each with its own timing. */
.toposel-svc--razorpay .rz-float {
	animation: rz-float-y 8s ease-in-out infinite;
}
.toposel-svc--razorpay .rz-float--1 { animation-duration: 9s; animation-delay: -1s; }
.toposel-svc--razorpay .rz-float--2 { animation-duration: 8s; animation-delay: -4s; }
.toposel-svc--razorpay .rz-float--3 { animation-duration: 7s; animation-delay: -2.5s; }
.toposel-svc--razorpay .rz-float--4 { animation-duration: 8.5s; animation-delay: -6s; }
@keyframes rz-float-y {
	0%, 100% { translate: 0 -5px; }
	50% { translate: 0 5px; }
}
@media (prefers-reduced-motion: reduce) {
	.toposel-svc--razorpay .rz-float {
		animation: none;
	}
}

/* ---------- Why Choose Toposel? ---------- */
.toposel-svc--razorpay .rz-why {
	padding: 52px 0 40px;
	background: #fff;
}
.toposel-svc--razorpay .rz-why__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin-top: 40px;
}
.toposel-svc--razorpay .rz-why__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 36px 16px 32px;
	background: #fff;
	border: 1px solid var(--rz-line);
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(17, 17, 40, 0.06);
	text-align: center;
}
.toposel-svc--razorpay .rz-why__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 8px;
	background: #f1eefd;
	color: var(--rz-purple);
}
.toposel-svc--razorpay .rz-why__icon svg {
	width: 54px;
	height: 54px;
}
.toposel-svc--razorpay .rz-why__icon .rz-cut {
	fill: #f1eefd; /* the icon tile colour, so cut-outs read as holes */
	stroke: #f1eefd;
}
.toposel-svc--razorpay .rz-why__icon .rz-cut[fill="none"] {
	fill: none;
}
.toposel-svc--razorpay .rz-why__card h3 {
	margin-top: 22px;
	font-size: 24px;
	line-height: 1.3;
	font-weight: 500;
	color: #2c3350;
}

/* ---------- FAQ ---------- */
.toposel-svc--razorpay .rz-faq {
	padding: 36px 0 64px;
	background: #fff;
}
.toposel-svc--razorpay .rz-faq__list {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 36px auto 0;
	max-width: 960px;
}
.toposel-svc--razorpay .rz-faq__item {
	border-left: 3px solid var(--rz-purple);
	border-radius: 4px;
	background: #f6f4ff;
	overflow: hidden;
}
.toposel-svc--razorpay .rz-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 14px 26px 14px 26px;
	border: 0;
	background: transparent;
	font-size: 22px;
	line-height: 1.4;
	font-weight: 400;
	color: #2c3350;
	text-align: left;
	box-sizing: border-box;
}
.toposel-svc--razorpay button.rz-faq__q {
	cursor: pointer;
}
.toposel-svc--razorpay .rz-chev {
	flex: 0 0 auto;
	color: var(--rz-purple);
	transition: transform 0.25s ease;
}
.toposel-svc--razorpay .rz-faq__item.active .rz-chev {
	transform: rotate(180deg);
}
.toposel-svc--razorpay .rz-faq__a {
	display: none;
	margin: 0 26px;
	padding: 24px 0 26px;
	border-top: 1px solid #dcd8ee;
}
.toposel-svc--razorpay .rz-faq__item.active .rz-faq__a {
	display: block;
}
.toposel-svc--razorpay .rz-faq__a p {
	font-size: 18px;
	line-height: 1.65;
	color: #4a5160;
}

@media (max-width: 1024px) {
	/* Tablet and phone only (1024 px and below), desktop is untouched: soft purple glow behind the hero picture only (reference): two blurred radial washes, one around the card and one to the right of the phone.
	   A pseudo-element behind the picture: it takes no space, so nothing shifts, and the picture itself is not tinted. */
	.toposel-svc--razorpay .rz-hero__media {
		position: relative;
		isolation: isolate;
	}
	.toposel-svc--razorpay .rz-hero__media::before {
		content: "";
		position: absolute;
		z-index: -1;
		inset: -14% -10% -12% -10%;
		pointer-events: none;
		background:
			radial-gradient(ellipse 46% 48% at 36% 46%, rgba(186, 166, 250, 0.5) 0%, rgba(190, 172, 250, 0) 100%),
			radial-gradient(ellipse 34% 40% at 90% 52%, rgba(166, 140, 246, 0.46) 0%, rgba(168, 144, 246, 0) 100%);
		filter: blur(14px);
	}
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
	.toposel-svc--razorpay .rz-hero {
		padding: 40px 0 56px;
	}
	.toposel-svc--razorpay .rz-hero__title {
		font-size: 36px;
	}
	.toposel-svc--razorpay .rz-hero__lead {
		margin-top: 24px;
		font-size: 22px;
	}
	.toposel-svc--razorpay .rz-hero__body,
	.toposel-svc--razorpay .rz-platform__lead,
	.toposel-svc--razorpay .rz-intro-box p,
	.toposel-svc--razorpay .rz-card__text,
	.toposel-svc--razorpay .rz-checks li {
		font-size: 16px;
	}
	.toposel-svc--razorpay .rz-intro-box {
		padding: 32px 56px;
	}
	/* Circles (tablet and phone) sized from the box width, so they stay in proportion however tall the text makes the box;
	   layers at 50 / 75 / 100% of the outer radius (set in the base rule), centred just outside the box edge. Desktop keeps the height-based size. */
	.toposel-svc--razorpay .rz-intro-box::before,
	.toposel-svc--razorpay .rz-intro-box::after {
		width: min(44%, 320px);
		height: auto;
	}
	.toposel-svc--razorpay .rz-intro-box::before {
		left: -2%;
	}
	.toposel-svc--razorpay .rz-intro-box::after {
		left: 102%;
	}
	.toposel-svc--razorpay .rz-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px;
	}
	.toposel-svc--razorpay .rz-card__title {
		font-size: 20px;
	}
	.toposel-svc--razorpay .rz-why__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.toposel-svc--razorpay .rz-why__card h3 {
		font-size: 22px;
	}
	.toposel-svc--razorpay .rz-checks {
		gap: 18px 28px;
	}
	.toposel-svc--razorpay .rz-faq__q {
		font-size: 20px;
	}
}

@media (max-width: 860px) {
	.toposel-svc--razorpay .rz-hero__grid,
	.toposel-svc--razorpay .rz-platform__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}
	.toposel-svc--razorpay .rz-hero__media,
	.toposel-svc--razorpay .rz-platform__media {
		justify-content: center;
	}
	.toposel-svc--razorpay .rz-hero__img {
		max-width: 615px;
	}
	.toposel-svc--razorpay .rz-platform__img {
		max-width: 380px;
	}

	/* Hero as in the mobile/tablet reference: heading, lead, text, the "300+ Businesses" line above the button, then the picture; everything centred.
	   Sizes and gaps scale with the screen width (vw, capped) so the proportions of the reference hold on every phone. */
	.toposel-svc--razorpay .rz-hero {
		padding-top: clamp(28px, 9.7vw, 56px);
		/* White page with a soft lavender glow on the left and right edge beside the heading and text (reference); replaces the glow
		   behind the picture below 861 px, where the picture now sits under the text. */
		background:
			radial-gradient(ellipse clamp(60px, 22vw, 160px) clamp(60px, 37vw, 260px) at 0 clamp(70px, 37vw, 260px), rgba(214, 205, 250, 0.95) 0%, rgba(226, 219, 251, 0.55) 45%, rgba(236, 231, 253, 0) 100%),
			radial-gradient(ellipse clamp(54px, 20vw, 150px) clamp(60px, 33vw, 240px) at 100% clamp(110px, 52vw, 340px), rgba(218, 209, 251, 0.9) 0%, rgba(228, 221, 252, 0.5) 45%, rgba(236, 231, 253, 0) 100%),
			#fff;
	}
	.toposel-svc--razorpay .rz-hero__media::before {
		display: none;
	}
	.toposel-svc--razorpay .rz-hero__grid {
		gap: clamp(20px, 6vw, 36px);
	}
	.toposel-svc--razorpay .rz-hero__text {
		text-align: center;
	}
	.toposel-svc--razorpay .rz-hero__title {
		font-size: clamp(26px, 7.33vw, 44px);
		line-height: 1.4;
	}
	.toposel-svc--razorpay .rz-hero__lead {
		margin-top: clamp(10px, 3.7vw, 20px);
		font-size: clamp(17px, 4.56vw, 26px);
		line-height: 1.3;
	}
	.toposel-svc--razorpay .rz-hero__body {
		margin: clamp(10px, 3.5vw, 18px) auto 0;
		font-size: clamp(12px, 3.18vw, 18px);
		line-height: 1.5;
	}
	.toposel-svc--razorpay .rz-hero__actions {
		flex-direction: column-reverse;
		justify-content: center;
		gap: clamp(14px, 4.6vw, 24px);
		margin-top: clamp(20px, 6.6vw, 34px);
	}
	.toposel-svc--razorpay .rz-btn {
		padding: clamp(10px, 3.1vw, 15px) clamp(12px, 3.4vw, 28px);
		gap: clamp(8px, 2.6vw, 10px);
		font-size: clamp(15px, 4.13vw, 18px);
	}
	.toposel-svc--razorpay .rz-proof {
		gap: clamp(10px, 3vw, 14px);
	}
	.toposel-svc--razorpay .rz-proof__avatars {
		width: clamp(76px, 19.4vw, 102px);
	}
	.toposel-svc--razorpay .rz-proof__text strong {
		font-size: clamp(14px, 3.64vw, 18px);
	}
	.toposel-svc--razorpay .rz-proof__text span {
		font-size: clamp(12px, 3.13vw, 16px);
	}
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
	/* "Ready to integrate Razorpay…" band: smaller three-layer circles on a phone (reference). Same layers, colours and drift animation
	   as the shared band; only the size and position change, here and only on this page. */
	.toposel-blog-wrapper.toposel-page--razorpay .toposel-cta-rings--right {
		top: -147px;
		right: -120px;
		width: 244px;
		height: 244px;
		background: radial-gradient(circle, #6c56e6 0 60px, #6249e3 60px 92px, #583ddf 92px 122px, transparent 122px);
	}
	.toposel-blog-wrapper.toposel-page--razorpay .toposel-cta-rings--left {
		bottom: -135px;
		left: -135px;
		width: 270px;
		height: 270px;
		background: radial-gradient(circle, #6c56e6 0 66px, #6249e3 66px 98px, #583ddf 98px 135px, transparent 135px);
	}
	.toposel-svc--razorpay .rz-hero {
		padding-bottom: 44px;
	}
	/* Hero picture on phones (reference): the same checkout picture on a white background, so it melts into the page; card and phone
	   together span about 75% of the column, centred, just below the button. The tablet/desktop picture (faded edges) is hidden. */
	.toposel-svc--razorpay .rz-hero__img--mobile {
		display: block;
		width: 88.5%;
		max-width: none;
		height: auto;
		margin: -4.4vw auto 0;
		-webkit-mask-image: none;
		mask-image: none;
		pointer-events: none;
	}
	.toposel-svc--razorpay .rz-hero__img--mobile ~ .rz-hero__img {
		display: none;
	}
	.toposel-svc--razorpay .rz-title,
	.toposel-svc--razorpay .rz-platform__title {
		font-size: 26px;
	}
	.toposel-svc--razorpay .rz-sub {
		font-size: 17px;
	}
	.toposel-svc--razorpay .rz-includes {
		padding: 28px 0 44px;
	}
	/* Intro box (reference): a little wider than the cards below it, flat pale background, smaller side circles. */
	.toposel-svc--razorpay .rz-intro-box {
		margin: 26px -4% 0;
		padding: 4vw 7.5%;
		border-radius: 18px;
	}
	/* Text scaled with the screen (about 12px on a 390 px phone, up to the old 15px) and a tighter line height, so the paragraph
	   sets in 8 lines as in the reference instead of 9. */
	.toposel-svc--razorpay .rz-intro-box p {
		font-size: clamp(11px, 3.05vw, 15px);
		line-height: 1.3;
	}
	/* Circles as in the reference: outer circle about 32% of the box width, centre just outside the edge (phone only; tablet keeps its size). */
	.toposel-svc--razorpay .rz-intro-box::before,
	.toposel-svc--razorpay .rz-intro-box::after {
		width: 32%;
	}
	.toposel-svc--razorpay .rz-intro-box::before {
		left: -1.2%;
	}
	.toposel-svc--razorpay .rz-intro-box::after {
		left: 101.2%;
	}
	.toposel-svc--razorpay .rz-cards {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 26px;
		padding: 0 2.5%;
	}
	.toposel-svc--razorpay .rz-pill {
		display: block;
		text-align: center;
	}
	.toposel-svc--razorpay .rz-platform {
		padding: 44px 0;
	}
	.toposel-svc--razorpay .rz-checks {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
	.toposel-svc--razorpay .rz-why {
		padding: 40px 0 28px;
	}
	.toposel-svc--razorpay .rz-why__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		margin-top: 28px;
	}
	.toposel-svc--razorpay .rz-why__card {
		padding: 26px 16px 24px;
	}
	.toposel-svc--razorpay .rz-faq {
		padding: 28px 0 44px;
	}
	.toposel-svc--razorpay .rz-faq__list {
		gap: 14px;
		margin-top: 26px;
	}
	.toposel-svc--razorpay .rz-faq__q {
		padding: 14px 16px;
		font-size: 17px;
	}
	.toposel-svc--razorpay .rz-faq__a {
		margin: 0 16px;
		padding: 18px 0 20px;
	}
	.toposel-svc--razorpay .rz-faq__a p {
		font-size: 16px;
	}
}

/* ---------- Desktop only (1025 px and up): hero background after the desktop reference ----------
   Near-white page with a soft lavender wash on the left edge and a stronger one behind the phone on the right; the header area
   above it has the same near-white tone so no seam shows. Tablet and phone keep their own backgrounds. */
@media (min-width: 1025px) {
	.rz-top {
		background: linear-gradient(90deg, #f1eefd 0%, #faf9ff 18%, #faf9ff 82%, #f4f1fe 100%);
	}
	.toposel-svc--razorpay .rz-hero {
		background:
			radial-gradient(ellipse 24% 54% at 0% 38%, rgba(232, 226, 252, 0.95) 0%, rgba(232, 226, 252, 0) 100%),
			radial-gradient(ellipse 28% 72% at 100% 55%, rgba(226, 218, 251, 1) 0%, rgba(226, 218, 251, 0) 100%),
			linear-gradient(90deg, #f6f4fe 0%, #faf9ff 20%, #fbfaff 70%, #f7f5fe 100%);
	}
}