/*
 * /platform8/ — page-specific tweaks only. Most of the page reuses the
 * parent design system (c-hero, c-info-box-list--stacked, c-stat-box-list,
 * c-cta) as-is. The bits below add only:
 *  - hero secondary action layout
 *  - icon colour against c-infoBox light surfaces
 *  - scoped FAQ accordion using native <details>
 *  - closing CTA's dual-button row
 *  - hiding the global testimonials strip on this page so the closing CTA
 *    is the page's conversion moment
 */

/* ----- Hero: secondary CTA layout. Inherits c-hero (light) styles. ----- */
.c-platform8Hero__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.5rem;
	margin-top: 1.5rem;
}

/* ----- Hero (desktop): widen the intro paragraph past parent's 20em default
 *       so the long Platform8 description doesn't wrap awkwardly, and pull the
 *       background image up ~4cm so it ends above the widget panel. */
@media (min-width: 769px) {
	.c-platform8Hero .c-hero__text {
		max-width: 36em;
	}
	.c-platform8Hero .c-hero__bgMedia {
		height: calc(100% - 150px);
	}
}

/* ----- Hero: live HTML/CSS chat-box preview of platform8.dev.
 *  Light theme to read on the light hero. The "prompt" text is typewritten
 *  with a steps() animation + a blinking caret. The whole tile is a single
 *  anchor pointing at platform8.dev (the actual product), not the register
 *  flow — discovery-first. */
.c-platform8Chat {
	display: block;
	margin: 3rem auto 0;
	max-width: 760px;
	width: 100%;
	text-decoration: none;
	color: inherit;
	transition: transform 0.35s ease;
}
.c-platform8Chat:hover,
.c-platform8Chat:focus-visible {
	transform: translateY(-4px);
}
.c-platform8Chat__shell {
	background: #fff;
	border: 1px solid var(--gray-200, #eaeaeb);
	border-radius: 1.25rem;
	padding: 1.75rem 1.75rem 1.5rem;
	box-shadow:
		0 1rem 3rem rgba(45, 27, 105, 0.10),
		0 0 0 1px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.35s ease, border-color 0.35s ease;
}
.c-platform8Chat:hover .c-platform8Chat__shell,
.c-platform8Chat:focus-visible .c-platform8Chat__shell {
	box-shadow:
		0 1.5rem 3.5rem rgba(45, 27, 105, 0.18),
		0 0 0 1px rgba(109, 78, 247, 0.25);
	border-color: var(--violet-300, #ae9bff);
}

/* Brand row */
.c-platform8Chat__brand {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	color: var(--gray-500, #6b6a6f);
	margin-bottom: 1.25rem;
}
.c-platform8Chat__brandLoop {
	font-size: 1rem;
	background: linear-gradient(90deg, var(--violet-500, #6d4ef7), var(--aqua-500, #6ac3f5));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-weight: 700;
}

/* Input box */
.c-platform8Chat__box {
	background: var(--gray-100, #f8f8f9);
	border: 1px solid var(--gray-200, #eaeaeb);
	border-radius: 0.85rem;
	padding: 1.1rem 1.25rem;
}
.c-platform8Chat__prompt {
	min-height: 1.5em;
	color: var(--gray-900, #121214);
	font-size: 1.05rem;
	line-height: 1.4;
	font-family: var(--fontFace, inherit);
}
.c-platform8Chat__type {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	vertical-align: bottom;
	border-right: 2px solid var(--violet-500, #6d4ef7);
	white-space: nowrap;
	animation:
		srini-p8-type 7.5s steps(44, end) infinite,
		srini-p8-blink 0.85s steps(2, start) infinite;
}
@keyframes srini-p8-type {
	0%   { width: 0; }
	35%  { width: 100%; }
	85%  { width: 100%; }
	100% { width: 0; }
}
@keyframes srini-p8-blink {
	50% { border-color: transparent; }
}
.c-platform8Chat__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 1rem;
	gap: 1rem;
}
.c-platform8Chat__hint {
	font-size: 0.8rem;
	color: var(--gray-500, #6b6a6f);
}
.c-platform8Chat__manifest {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.45rem 1rem;
	background: var(--gray-900, #121214);
	color: #fff;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 500;
}
.c-platform8Chat__loopText {
	margin: 1.25rem 0 0;
	font-size: 0.78rem;
	letter-spacing: 0.05em;
	text-align: center;
	color: var(--gray-500, #6b6a6f);
}
.c-platform8Chat__caption {
	display: block;
	margin-top: 1rem;
	font-size: 0.85rem;
	text-align: center;
	color: rgba(0, 0, 0, 0.55);
}

@media (max-width: 720px) {
	.c-platform8Chat { margin-top: 2rem; }
	.c-platform8Chat__shell { padding: 1.25rem; border-radius: 1rem; }
	.c-platform8Chat__prompt { font-size: 0.95rem; }
	.c-platform8Chat__type { animation-duration: 8.5s; }
	.c-platform8Chat__loopText { font-size: 0.7rem; }
}

/* Respect users who prefer no animation */
@media (prefers-reduced-motion: reduce) {
	.c-platform8Chat__type {
		animation: none;
		width: 100%;
		border-right: 0;
	}
}

/* ----- Hero: Platform8 widget — hand-rolled light replica of
 *  platform8.dev/widget-demo.html. We own the design here so the visual
 *  stays locked to SRINI's light visual language regardless of the
 *  visitor's OS dark-mode preference. Background mirrors the demo:
 *  violet radial top-left + blue radial bottom-right over a pale-blue
 *  diagonal base. */
.c-platform8Widget {
	color-scheme: only light;
	position: relative;
	overflow: hidden;
	margin: 3rem auto 0;
	max-width: 880px;
	width: 100%;
	/* Tight padding so the violet/blue halo reads as a hairline frame
	 * around the card rather than a wide purple field. Matches the
	 * proportions in platform8.dev/widget-demo.html. */
	padding: 1.25rem;
	border-radius: 22px;
	background:
		radial-gradient(circle at 12% 18%, rgba(140, 115, 250, 0.32), transparent 38%),
		radial-gradient(circle at 88% 82%, rgba(59, 130, 246, 0.28), transparent 38%),
		linear-gradient(135deg, #f4f7fb 0%, #eef4fe 50%, #e0ebf8 100%);
	box-shadow: 0 28px 60px -32px rgba(36, 24, 102, 0.3);
}
.c-platform8Widget__form {
	max-width: 100%;
	margin: 0 auto;
	width: 100%;
}
.c-platform8Widget__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 0.5rem;
	padding: 0 0.25rem;
	font-size: 11px;
}
.c-platform8Widget__brand {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: #241866;
	font-weight: 500;
}
.c-platform8Widget__sparkles {
	width: 14px;
	height: 14px;
	color: #6d4ef7;
	flex-shrink: 0;
}
.c-platform8Widget__link {
	color: rgba(36, 24, 102, 0.7);
	text-decoration: none;
	transition: color 0.15s ease;
}
.c-platform8Widget__link:hover,
.c-platform8Widget__link:focus-visible {
	color: rgba(36, 24, 102, 0.85);
}
.c-platform8Widget__card {
	position: relative;
	border-radius: 1rem;
	background: #fff;
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.08),
		0 16px 40px -22px rgba(36, 24, 102, 0.35);
	box-sizing: border-box;
}
.c-platform8Widget__textarea {
	display: block;
	width: 100%;
	min-height: 7.5rem;
	padding: 1.1rem 1.25rem 0.5rem;
	font-size: 1rem;
	line-height: 1.55;
	color: #241866;
	background: transparent;
	border: 0;
	outline: none;
	resize: none;
	font-family: inherit;
	box-sizing: border-box;
}
.c-platform8Widget__textarea::placeholder {
	color: rgba(36, 24, 102, 0.55);
}
.c-platform8Widget__cardFoot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.25rem 0.85rem 0.85rem;
}
.c-platform8Widget__hint {
	font-size: 11px;
	color: rgba(36, 24, 102, 0.6);
	padding: 0 0.25rem;
	line-height: 1.2;
}
/* Build button — mirrors the homepage "Start prototyping" CTA effects
 * (conic shine + pulsing shadow + bouncy scale on hover) so the AI/
 * Platform8 visual language carries from homepage through to the prompt
 * box. Keyframes are scoped to the submit class so they don't collide
 * with the homepage CTA's animation. */
.c-platform8Widget__submit {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.55rem 1.15rem;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, #6d4ef7 0%, #8c73fa 100%);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	box-shadow:
		0 10px 24px -8px rgba(109, 78, 247, 0.6),
		0 4px 10px -2px rgba(109, 78, 247, 0.3);
	transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 0.2s ease,
		filter 0.2s ease;
	animation: c-platform8Widget__submit-pulse 2.4s ease-in-out infinite;
}
.c-platform8Widget__submit::before {
	content: '';
	position: absolute;
	inset: -60%;
	z-index: -1;
	background: conic-gradient(
		from 0deg,
		transparent 70%,
		rgba(255, 255, 255, 0.18) 80%,
		transparent 90%
	);
	animation: c-platform8Widget__submit-shine 6s linear infinite;
	pointer-events: none;
}
.c-platform8Widget__submit:hover,
.c-platform8Widget__submit:focus-visible {
	background: linear-gradient(135deg, #6d4ef7 0%, #8c73fa 100%);
	color: #fff;
	transform: scale(1.04) translateY(-1px);
	box-shadow:
		0 16px 36px -8px rgba(109, 78, 247, 0.75),
		0 6px 14px -2px rgba(109, 78, 247, 0.4);
	filter: brightness(1.06);
	outline: none;
	/* Pause pulse on hover so the bigger hover shadow doesn't fight
	 * the pulsing ring — same trick the homepage CTA uses. */
	animation-play-state: paused;
}
.c-platform8Widget__submit:active {
	transform: scale(0.97);
}
.c-platform8Widget__submit svg { flex-shrink: 0; }
.c-platform8Widget__submit svg:last-child { transition: transform 0.2s ease; }
.c-platform8Widget__submit:hover svg:last-child { transform: translateX(2px); }

@keyframes c-platform8Widget__submit-pulse {
	0%, 100% {
		box-shadow:
			0 10px 24px -8px rgba(109, 78, 247, 0.6),
			0 4px 10px -2px rgba(109, 78, 247, 0.3);
	}
	50% {
		box-shadow:
			0 0 0 10px rgba(109, 78, 247, 0.16),
			0 12px 28px -4px rgba(109, 78, 247, 0.55);
	}
}
@keyframes c-platform8Widget__submit-shine {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.c-platform8Widget__submit { animation: none; }
	.c-platform8Widget__submit::before { animation: none; }
}
.c-platform8Widget__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.9rem 0 0;
	padding: 0 0.25rem;
}
.c-platform8Widget__pill {
	appearance: none;
	border: 0;
	padding: 0.4rem 0.85rem;
	font-size: 12px;
	font-family: inherit;
	font-weight: 500;
	color: rgba(36, 24, 102, 0.85);
	background: rgba(255, 255, 255, 0.9);
	box-shadow: inset 0 0 0 1px rgba(36, 24, 102, 0.08);
	border-radius: 999px;
	cursor: pointer;
	line-height: 1.4;
	transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
		background 0.15s ease,
		color 0.15s ease,
		box-shadow 0.2s ease;
}
.c-platform8Widget__pill:hover,
.c-platform8Widget__pill:focus-visible {
	background: #fff;
	color: #241866;
	box-shadow:
		inset 0 0 0 1px rgba(109, 78, 247, 0.4),
		0 6px 14px -6px rgba(109, 78, 247, 0.35);
	transform: translateY(-1px);
	outline: none;
}
.c-platform8Widget__pill:active {
	transform: translateY(0) scale(0.97);
}

/* Tagline — single inspirational line below the pills. The pulsing dot
 * picks up the same violet/blue gradient as the Build button so the eye
 * is drawn from prompt → pills → tagline → action. */
.c-platform8Widget__tagline {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	margin: 1.15rem 0 0;
	padding: 0 0.25rem;
	font-size: 12.5px;
	line-height: 1.5;
	color: rgba(36, 24, 102, 0.75);
}
.c-platform8Widget__taglineDot {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	margin-top: 0.4rem;
	border-radius: 999px;
	background: linear-gradient(135deg, #6d4ef7 0%, #3b82f6 100%);
	box-shadow: 0 0 0 0 rgba(109, 78, 247, 0.55);
	animation: c-platform8Widget__dotPulse 2.4s ease-in-out infinite;
}
@keyframes c-platform8Widget__dotPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(109, 78, 247, 0.55); }
	50%      { box-shadow: 0 0 0 6px rgba(109, 78, 247, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.c-platform8Widget__taglineDot { animation: none; }
}

/* Close button — only used in the mobile fullscreen sheet, hidden by
 * default and toggled visible inside the @media block below. */
.c-platform8Widget__close {
	display: none;
}

@media (max-width: 720px) {
	.c-platform8Widget { margin-top: 2rem; padding: 0.75rem; border-radius: 18px; }
	.c-platform8Widget__textarea { min-height: 6.5rem; padding: 0.95rem 1rem 0.4rem; }
	.c-platform8Widget__hint { display: none; }

	/* Mobile fullscreen sheet. Tapping the textarea adds .is-fullscreen
	 * (set by inline JS in page-templates/platform8.php) which detaches
	 * the widget from the page flow and pins it to the full viewport.
	 * The X close button appears in the top-right and dismisses it.
	 *
	 * Body scroll lock is via .is-platform8-locked on <html>, applied by
	 * the same JS — keeps the page behind the sheet from scrolling.
	 *
	 * z-index notes: the SRINI AI Chatbox plugin (#tcp-chat-widget) uses
	 * z-index: 999999 for its floating FAB and chat window, so we have to
	 * sit above that — otherwise the bubble bleeds through the sheet and
	 * the user sees stacked overlays. We also hide the chat-AI entirely
	 * while the sheet is open (below) so the two full-screen surfaces
	 * never compete on mobile.
	 *
	 * Using `dvh` (dynamic viewport height) so the bottom row of pills +
	 * Build button isn't clipped by the iOS Safari URL bar collapsing. */
	.c-platform8Widget.is-fullscreen {
		position: fixed;
		inset: 0;
		z-index: 2147483646; /* one below int32 max — beats #tcp-chat-widget (999999) and anything else */
		margin: 0;
		max-width: none;
		width: 100%;
		height: 100dvh;
		border-radius: 0;
		padding: 3.5rem 1rem 1rem;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		/* Defensive opaque fallback in case the gradient layer below ever
		 * goes transparent — keeps page content from showing through. */
		background-color: #eef4fe;
		animation: c-platform8Widget__sheet-in 0.18s ease-out;
	}
	.c-platform8Widget.is-fullscreen .c-platform8Widget__form {
		display: flex;
		flex-direction: column;
		min-height: 100%;
		gap: 0.5rem;
	}
	.c-platform8Widget.is-fullscreen .c-platform8Widget__card {
		display: flex;
		flex-direction: column;
		flex: 1;
		min-height: 14rem;
	}
	.c-platform8Widget.is-fullscreen .c-platform8Widget__textarea {
		flex: 1;
		min-height: 0;
	}
	.c-platform8Widget.is-fullscreen .c-platform8Widget__close {
		display: inline-flex;
		position: absolute;
		top: 0.75rem;
		right: 0.75rem;
		z-index: 1;
		width: 40px;
		height: 40px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.9);
		color: #241866;
		box-shadow: inset 0 0 0 1px rgba(36, 24, 102, 0.08);
		cursor: pointer;
		transition: background 0.15s ease, transform 0.15s ease;
	}
	.c-platform8Widget.is-fullscreen .c-platform8Widget__close:hover,
	.c-platform8Widget.is-fullscreen .c-platform8Widget__close:focus-visible {
		background: #fff;
		box-shadow: inset 0 0 0 1px rgba(109, 78, 247, 0.35);
		outline: none;
	}
	.c-platform8Widget.is-fullscreen .c-platform8Widget__close:active {
		transform: scale(0.94);
	}
}

@keyframes c-platform8Widget__sheet-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Body scroll lock helper — toggled on <html> by the widget JS. The
 * inner `position: fixed` on body is the iOS Safari workaround: plain
 * overflow:hidden lets iOS still rubberband-scroll the page behind the
 * sheet, so we pin the body in place via top:-scrollY (set by JS) and
 * keep position:fixed to fully freeze the background. */
html.is-platform8-locked,
html.is-platform8-locked body {
	overflow: hidden;
}
html.is-platform8-locked body {
	position: fixed;
	width: 100%;
}

/* While the Platform8 fullscreen sheet is open, hide the floating
 * SRINI AI Chatbox FAB (and its mobile fullscreen chat window). The
 * chat-AI plugin uses z-index: 999999 and on ≤720px viewports its open
 * window is also `position: fixed; inset: 0` — letting both surfaces
 * coexist would mean two competing full-screen overlays. The bubble
 * reappears the moment the user dismisses the prompt sheet. */
html.is-platform8-locked #tcp-chat-widget {
	display: none !important;
}

/* ----- Section icons against the light c-infoBox surface ----- */
.c-platform8-icon {
	color: var(--violet-500, #6d4ef7);
	stroke: currentColor;
	fill: none;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ----- Stacked story cards: equalise heights so the sticky-scroll effect
 *       (cards overlapping as the user scrolls) stays clean. Without a
 *       fixed min-height, taller cards peek out from underneath shorter
 *       cards while the JS animates the stack.
 *       The c-infoBox already has its own white surface, so setting both
 *       the item wrapper AND the card to a common min-height gives a
 *       reliable cover during transitions. */
.c-platform8Story.c-info-box-list--stacked .js-stacked__item {
	min-height: 36rem;
}
.c-platform8Story.c-info-box-list--stacked .js-stacked__item .c-infoBox {
	min-height: 36rem;
	display: flex;
	flex-direction: column;
	/* Opaque surface so a card sliding on top of another fully covers it
	 * during the stack transition — otherwise the card underneath bleeds
	 * through and the layered text looks broken. */
	background: #fff;
	border: 1px solid var(--gray-200, #eaeaeb);
	border-radius: 1rem;
	padding: 2.25rem;
	box-shadow: 0 0.75rem 2rem rgba(45, 27, 105, 0.04);
}
@media (max-width: 960px) {
	.c-platform8Story.c-info-box-list--stacked .js-stacked__item,
	.c-platform8Story.c-info-box-list--stacked .js-stacked__item .c-infoBox {
		min-height: 30rem;
	}
}
@media (max-width: 720px) {
	.c-platform8Story.c-info-box-list--stacked .js-stacked__item,
	.c-platform8Story.c-info-box-list--stacked .js-stacked__item .c-infoBox {
		min-height: 28rem;
	}
}

/* ----- FAQ — uses c-infoBox shell for consistent header + spacing ----- */
.c-platform8Faq {
	margin-top: 4rem;
}
.c-platform8Faq__list {
	margin: 1.25rem 0 0;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.c-platform8Faq__item {
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.c-platform8Faq__q {
	cursor: pointer;
	padding: 1.1rem 2.25rem 1.1rem 0;
	font-size: 1.05rem;
	font-weight: 500;
	list-style: none;
	position: relative;
}
.c-platform8Faq__q::-webkit-details-marker { display: none; }
.c-platform8Faq__q::after {
	content: '+';
	position: absolute;
	right: 0.25rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1;
	color: currentColor;
	opacity: 0.55;
	transition: transform 0.2s ease;
}
.c-platform8Faq__item[open] .c-platform8Faq__q::after { content: '−'; }
.c-platform8Faq__a {
	padding: 0 2.25rem 1.25rem 0;
	color: rgba(0, 0, 0, 0.72);
	line-height: 1.6;
}
.c-platform8Faq__a p { margin: 0; }

/* ----- Product screenshot above the FAQ. Builds on parent's .c-image base
 *       (full-width, rounded corners) and adds: max-width constraint so the
 *       screenshot doesn't stretch edge-to-edge, drop-shadow for depth, and
 *       a caption styled like a fine-print attribution. The whole thing is
 *       a link to platform8.dev so the image doubles as a soft CTA. */
.c-platform8Preview {
	margin: 2.5rem auto;
	max-width: 960px;
	text-align: center;
}
.c-platform8Preview__link {
	display: block;
	border-radius: 0.75rem;
	overflow: hidden;
	box-shadow: 0 24px 60px -28px rgba(36, 24, 102, 0.4);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.c-platform8Preview__link:hover,
.c-platform8Preview__link:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 32px 72px -28px rgba(36, 24, 102, 0.5);
	outline: none;
}
.c-platform8Preview img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.75rem;
}
.c-platform8Preview__caption {
	margin: 0.75rem 0 0;
	font-size: 0.85rem;
	color: var(--gray-600, #555457);
	line-height: 1.5;
}
.c-platform8Preview__caption a {
	color: var(--violet-500, #6d4ef7);
	text-decoration: none;
	font-weight: 500;
}
.c-platform8Preview__caption a:hover,
.c-platform8Preview__caption a:focus-visible {
	text-decoration: underline;
}

@media (max-width: 720px) {
	.c-platform8Preview { margin: 1.75rem auto; }
}

/* ----- Hand-off banner under the FAQ. Soft violet/blue gradient card with a
 *       single primary CTA — gives users who don't want to self-serve a clear
 *       path to having SRINI build the prototype for them. */
.c-platform8Handoff {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin: 2rem 0 0;
	padding: 1.5rem 1.75rem;
	background:
		linear-gradient(135deg, rgba(109, 78, 247, 0.07) 0%, rgba(59, 130, 246, 0.07) 100%),
		#fff;
	border: 1px solid rgba(109, 78, 247, 0.18);
	border-radius: 1rem;
	box-shadow: 0 12px 30px -22px rgba(36, 24, 102, 0.25);
}
.c-platform8Handoff__body {
	flex: 1;
	min-width: 0;
}
.c-platform8Handoff__title {
	margin: 0 0 0.25rem;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--violet-900, #241866);
	letter-spacing: -0.01em;
}
.c-platform8Handoff__text {
	margin: 0;
	color: var(--gray-700, #3e3d40);
	font-size: 0.95rem;
	line-height: 1.5;
}
.c-platform8Handoff__btn {
	flex-shrink: 0;
}

@media (max-width: 720px) {
	.c-platform8Handoff {
		flex-direction: column;
		align-items: flex-start;
		padding: 1.25rem;
		gap: 1rem;
	}
}

/* ----- Closing CTA — parent's c-cta does the heavy lifting. We only add
 *       the secondary action's spacing. */
.c-platform8Cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 1.25rem;
	margin-top: 1.25rem;
}
.c-platform8Cta__textBtn {
	color: rgba(255, 255, 255, 0.7);
}
.c-platform8Cta__textBtn:hover {
	color: #fff;
}

/* ----- Hide global strips that compete with the page's own closing CTA. ----- */
.page-platform8 .c-testimonialsContainer,
.page-platform8 .c-testimonials__graphics,
.page-platform8 .c-footer__ctaContainer {
	display: none !important;
}

/* ----- Mobile ----- */
@media (max-width: 720px) {
	.c-platform8Faq { margin-top: 2.5rem; }
}