/*
 * Page-scoped overlay for /become-partner/.
 *
 * Reshapes the legacy hero-contact / cy-heading / cy-clients /
 * testimonials-slider blocks to match the redesigned /request-a-demo/
 * aesthetic (gradient + grid hero bg, display-font H1, blue uppercase
 * eyebrow, sticky white form card with normalized HubSpot embed).
 *
 * Source of truth for the look: blocks/redesign-demo-hero/assets/scss/_styles.scss.
 *
 * Scoped under body.become-partner-redesign so the styles do nothing on
 * any other page, even if the file is loaded outside its enqueue gate.
 */

body.become-partner-redesign {
	/* --------------------------------------------------------------
	 * Hero — visual language of .rd-hero
	 * -------------------------------------------------------------- */
	.hero-contact-section {
		position: relative;
		isolation: isolate;
		/* Inline padding-top / padding-bottom on the section element (set
		 * by the block saved attrs) carry inline specificity, so we have
		 * to force the override here. */
		padding-top: calc(var(--cy-header-h, 72px) + 8px) !important;
		padding-bottom: 104px !important;
		padding-left: 0;
		padding-right: 0;
		background:
			linear-gradient(135deg,
				rgba(252, 252, 251, 0.94) 0%,
				rgba(247, 246, 242, 0.98) 48%,
				rgba(232, 246, 255, 0.88) 100%);
		overflow: hidden;
		color: var(--color-navy-950);
	}

	.hero-contact-section::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		pointer-events: none;
		background:
			linear-gradient(90deg, rgba(20, 47, 82, 0.055) 1px, transparent 1px),
			linear-gradient(180deg, rgba(20, 47, 82, 0.045) 1px, transparent 1px);
		background-size: 72px 72px;
		-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.08));
		        mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.08));
	}

	.hero-contact-section .container {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(420px, 520px);
		grid-template-rows: auto auto;
		column-gap: 72px;
		row-gap: 0;
		align-items: start;
		grid-gap: 0;
	}

	/* Lottie + duplicate mobile-header are decorative for the original
	 * dark-blue hero — hide them so the redesign layout reads cleanly. */
	.hero-contact-section .mobile-header-only,
	.hero-contact-section__lottie {
		display: none;
	}

	.hero-contact-section .hero-contact-section-content {
		grid-column: 1;
		grid-row: 1 / 3;
		max-width: 710px;
	}

	.hero-contact-section .desktop-header-only {
		display: block;
	}

	/* Breadcrumb → eyebrow-style uppercase blue. */
	.hero-contact-section__breadcrumb {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 32px;
		font-size: 12px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0;
		color: var(--color-sand-600);
	}

	.hero-contact-section__breadcrumb-item {
		color: var(--color-blue-500);
		text-decoration: none;
	}

	.hero-contact-section__breadcrumb-item:not(:last-child)::after {
		content: "/";
		margin-left: 8px;
		color: var(--color-sand-600);
	}

	.hero-contact-section__breadcrumb-item:last-child {
		color: var(--color-sand-600);
		pointer-events: none;
	}

	/* H1 → display-font 72px medium. */
	.hero-contact-section__heading {
		max-width: 680px;
		margin: 0;
		color: var(--color-navy-950);
		font-family: var(--font-display);
		font-size: 72px;
		font-weight: 500;
		line-height: 0.98;
		letter-spacing: 0;
	}

	.hero-contact-section__heading span {
		display: inline;
		color: inherit;
		font-weight: inherit;
	}

	/* Lead → 20px sand muted. */
	.hero-contact-section__subheading {
		max-width: 630px;
		margin: 28px 0 0;
		color: var(--color-sand-600);
		font-family: var(--font-long, var(--font-body));
		font-size: 20px;
		font-weight: 400;
		line-height: 1.55;
	}

	/* Benefit items — left-aligned list with icon tile + h3 + p. */
	.hero-contact-section-items {
		margin-top: 40px;
		gap: 24px;
	}

	.hero-contact-section-items > :first-of-type .hero-section__title { margin-top: 0; }
	.hero-contact-section-items > :first-of-type .hero-section-list_with_image { margin-top: 0; }

	.hero-contact-section .hero-contact-section-list_with_image {
		margin-left: 0;
		display: grid;
		gap: 18px;
	}

	.hero-contact-section .hero-contact-section-list_with_image-item {
		display: grid;
		grid-template-columns: 48px minmax(0, 1fr);
		gap: 18px;
		align-items: start;
		margin-bottom: 0;
		max-width: 620px;
	}

	.hero-contact-section .hero-contact-section-list_with_image-item__image {
		position: relative;
		margin: 0;
		width: 48px;
		height: 48px;
		display: grid;
		place-items: center;
		background: #e8f6ff;
		border: 1px solid rgba(33, 145, 255, 0.22);
		border-radius: 8px;
	}

	/* Visually swap the legacy SVGs for Material Symbols glyphs — the
	 * original <img> stays in the DOM for accessibility but is hidden,
	 * and a glyph is injected per nth-of-type so the order matches the
	 * 4 benefit titles (Win, Deliver, Upsell, Efficiency). */
	.hero-contact-section .hero-contact-section-list_with_image-item__image img {
		display: none;
	}

	.hero-contact-section .hero-contact-section-list_with_image-item__image::before {
		font-family: "Material Symbols Rounded";
		font-weight: 400;
		font-size: 24px;
		line-height: 1;
		color: var(--color-blue-500);
		font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
		-webkit-font-feature-settings: "liga";
		font-feature-settings: "liga";
		-webkit-font-smoothing: antialiased;
	}

	.hero-contact-section .hero-contact-section-list_with_image-item:nth-of-type(1) .hero-contact-section-list_with_image-item__image::before {
		content: "group_add";
	}

	.hero-contact-section .hero-contact-section-list_with_image-item:nth-of-type(2) .hero-contact-section-list_with_image-item__image::before {
		content: "verified";
	}

	.hero-contact-section .hero-contact-section-list_with_image-item:nth-of-type(3) .hero-contact-section-list_with_image-item__image::before {
		content: "trending_up";
	}

	.hero-contact-section .hero-contact-section-list_with_image-item:nth-of-type(4) .hero-contact-section-list_with_image-item__image::before {
		content: "bolt";
	}

	.hero-contact-section .hero-contact-section-list_with_image-item .content-wrap {
		max-width: none;
	}

	.hero-contact-section .hero-contact-section-list_with_image-item__title {
		margin: 0 0 6px;
		color: var(--color-navy-950);
		font-family: var(--font-body);
		font-size: 22px;
		font-weight: 700;
		line-height: 1.18;
		letter-spacing: 0;
	}

	.hero-contact-section .hero-contact-section-list_with_image-item__description {
		margin: 0;
		color: var(--color-sand-600);
		font-size: 16px;
		font-weight: 400;
		line-height: 1.5;
	}

	/* --------------------------------------------------------------
	 * Form card — visual language of .rd-form-card
	 * -------------------------------------------------------------- */
	.hero-contact-section .hero-contact-section-form {
		grid-column: 2;
		grid-row: 1 / -1;
		/*position: sticky;*/
		/*top: 136px;*/
		/*z-index: 0;*/
		/*isolation: isolate;*/
		/*margin-top: 0;*/
		padding: 34px;
		border: 1px solid rgba(20, 47, 82, 0.1);
		border-radius: 32px;
		background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
		box-shadow:
			0 24px 60px rgba(20, 47, 82, 0.13),
			0 1px 0 rgba(255, 255, 255, 0.9) inset;
	}

	@media(min-width: 1181px) {
		.hero-contact-section .hero-contact-section-form {
			margin-top: 47px;
		}
	}

	.hero-contact-section .hero-contact-section-form__title {
		margin: 0 0 24px;
		color: var(--color-navy-950);
		font-family: var(--font-display);
		font-size: 34px;
		font-weight: 500;
		line-height: 1.08;
		letter-spacing: 0;
	}

	.hero-contact-section .hero-contact-section-form__form {
		margin-top: 0;

		min-height: 380px;
	}

	.hero-contact-section .hero-contact-section-form__copy {
		margin: 24px 0 0;
		color: var(--color-sand-600);
		font-size: 13px;
		line-height: 1.55;
	}

	.hero-contact-section .hero-contact-section-form__copy a,
	.hero-contact-section .hero-contact-section-form__copy a:visited {
		color: var(--color-blue-500);
		font-weight: 700;
		text-decoration: none;
	}

	/* HubSpot embed normalization — mirrors .rd-form-card .hs-form. */
	.hero-contact-section .hero-contact-section-form .hs-form {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px !important;
		margin: 0 !important;
	}

	.hero-contact-section .hero-contact-section-form .hs-form fieldset {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px 14px !important;
		max-width: none !important;
		margin: 0 !important;
	}

	.hero-contact-section .hero-contact-section-form .hs-form fieldset.form-columns-1 {
		grid-template-columns: 1fr;
	}

	.hero-contact-section .hero-contact-section-form .hs-form .hs-form-field {
		width: 100% !important;
		float: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.hero-contact-section .hero-contact-section-form .hs-form .hs-form-field.hs-fieldtype-textarea {
		grid-column: 1 / -1 !important;
	}

	.hero-contact-section .hero-contact-section-form .hs-form .input {
		margin: 7px 0 0 !important;
	}

	.hero-contact-section .hero-contact-section-form .hs-form .hs_submit,
	.hero-contact-section .hero-contact-section-form .hs-form .hs_error_rollup {
		grid-column: 1 / -1;
		margin: 0 !important;
	}

	.hero-contact-section .hero-contact-section-form .hs-form label {
		color: var(--color-navy-950);
		font-size: 13px;
		font-weight: 700;
		line-height: 1.2;
	}

	.hero-contact-section .hero-contact-section-form .hs-form input,
	.hero-contact-section .hero-contact-section-form .hs-form select,
	.hero-contact-section .hero-contact-section-form .hs-form textarea {
		width: 100% !important;
		min-width: 0 !important;
		border: 1px solid rgba(20, 47, 82, 0.14) !important;
		border-radius: 6px !important;
		background: #ffffff !important;
		color: var(--color-navy-950) !important;
		font-family: var(--font-body) !important;
		font-size: 15px !important;
		font-weight: 500 !important;
		line-height: 1.2 !important;
		box-shadow: 0 1px 0 rgba(20, 47, 82, 0.02);
		transition: border-color 180ms ease, box-shadow 180ms ease;
	}

	.hero-contact-section .hero-contact-section-form .hs-form input:focus,
	.hero-contact-section .hero-contact-section-form .hs-form select:focus,
	.hero-contact-section .hero-contact-section-form .hs-form textarea:focus {
		outline: none;
		border-color: var(--color-blue-400) !important;
		box-shadow: 0 0 0 3px rgba(33, 145, 255, 0.16);
	}

	.hero-contact-section .hero-contact-section-form .hs-form input::placeholder,
	.hero-contact-section .hero-contact-section-form .hs-form textarea::placeholder {
		color: rgba(20, 47, 82, 0.42);
	}

	.hero-contact-section .hero-contact-section-form .hs-form input,
	.hero-contact-section .hero-contact-section-form .hs-form select {
		height: 48px;
		padding: 0 14px !important;
	}

	.hero-contact-section .hero-contact-section-form .hs-form textarea {
		height: 0;
		min-height: 48px;
		resize: vertical;
		padding: 14px !important;
		overflow-x: hidden;
		overflow-wrap: anywhere;
		word-break: break-word;
		box-sizing: border-box;
	}

	.hero-contact-section .hero-contact-section-form .hs-form .hs-button {
		min-width: 148px;
		min-height: 48px;
		margin-top: 4px;
		padding: 0 24px !important;
		border: 1.5px solid var(--color-blue-300) !important;
		border-radius: 8px !important;
		background: var(--color-blue-300) !important;
		color: #fff !important;
		font-family: var(--font-body) !important;
		font-size: 15px !important;
		font-weight: 700 !important;
		cursor: pointer;
	}

	.hero-contact-section .hero-contact-section-form .hs-form .hs-button:hover,
	.hero-contact-section .hero-contact-section-form .hs-form .hs-button:focus {
		background: var(--color-blue-400) !important;
		border-color: var(--color-blue-400) !important;
	}

	.hero-contact-section .hero-contact-section-form .hs-form .hs-error-msgs {
		margin: 6px 0 0 !important;
		padding: 0 !important;
		list-style: none !important;
		color: #c63d2f;
		font-size: 12px;
	}

	/* --------------------------------------------------------------
	 * Section header below the hero ("Trusted by leading MSPs ...").
	 * -------------------------------------------------------------- */
	.cy-heading-section {
		padding: 72px 0 24px;
		background: transparent;
	}

	.cy-heading-section__heading {
		max-width: 880px;
		margin: 0 auto;
		color: var(--color-navy-950);
		font-family: var(--font-display);
		font-size: 40px;
		font-weight: 500;
		line-height: 1.1;
		letter-spacing: 0;
	}

	/* --------------------------------------------------------------
	 * Client logo carousel — quieter, more breathing room.
	 * -------------------------------------------------------------- */
	.cy-clients-section {
		padding: 24px 0 64px;
		background: transparent;
	}

	.cy-clients-section .splide__slide img {
		filter: none;
		opacity: 0.85;
		transition: opacity 200ms ease;
	}

	.cy-clients-section .splide__slide:hover img { opacity: 1; }

	/* --------------------------------------------------------------
	 * Testimonials slider — soft card treatment.
	 * -------------------------------------------------------------- */
	.testimonials-slider-section {
		padding: 64px 0 96px;
		background: linear-gradient(180deg, rgba(232, 246, 255, 0) 0%, rgba(232, 246, 255, 0.45) 100%);
	}

	.testimonials-slider-section .testimonials-slider-section-splide__desc p {
		color: var(--color-navy-950);
		font-family: var(--font-display);
		font-size: 28px;
		font-weight: 500;
		line-height: 1.3;
		letter-spacing: 0;
	}

	.testimonials-slider-section .person-name,
	.testimonials-slider-section .person-title {
		color: var(--color-sand-600);
	}

	/* --------------------------------------------------------------
	 * Responsive.
	 * -------------------------------------------------------------- */
	@media (max-width: 1180px) {
		.hero-contact-section .container {
			grid-template-columns: 1fr;
			grid-template-rows: auto;
			row-gap: 40px;
		}

		.hero-contact-section .hero-contact-section-content {
			grid-column: 1;
			grid-row: auto;
			order: 1;
			max-width: none;
		}

		.hero-contact-section .hero-contact-section-form {
			grid-column: 1;
			grid-row: auto;
			order: 2;
			position: relative;
			top: auto;
			max-width: 760px;
			margin-left: auto;
			margin-right: auto;
			width: 100%;
		}
	}

	@media (max-width: 760px) {
		.hero-contact-section {
			padding-top: calc(var(--cy-header-h, 72px) + 40px) !important;
			padding-bottom: 72px !important;
		}

		.hero-contact-section__heading {
			font-size: 46px;
			line-height: 1.04;
		}

		.hero-contact-section__subheading {
			font-size: 18px;
		}

		.hero-contact-section__breadcrumb {
			margin-bottom: 24px;
		}

		.hero-contact-section .hero-contact-section-form {
			padding: 24px;
		}

		.hero-contact-section .hero-contact-section-form__title {
			font-size: 30px;
		}

		.hero-contact-section .hero-contact-section-form .hs-form,
		.hero-contact-section .hero-contact-section-form .hs-form fieldset {
			grid-template-columns: 1fr;
		}

		.cy-heading-section { padding-top: 56px; }
		.cy-heading-section__heading { font-size: 30px; }
		.testimonials-slider-section .testimonials-slider-section-splide__desc p { font-size: 22px; }
	}

	@media (max-width: 520px) {
		.hero-contact-section {
			padding-top: calc(var(--cy-header-h, 72px) + 24px) !important;
		}

		.hero-contact-section__heading { font-size: 40px; }

		.hero-contact-section .hero-contact-section-list_with_image-item {
			grid-template-columns: 1fr;
			gap: 12px;
			justify-items: center;
			text-align: center;
			margin-inline: auto;
		}

		.hero-contact-section .hero-contact-section-list_with_image-item .content-wrap { width: 100%; }
		.hero-contact-section .hero-contact-section-list_with_image-item__title,
		.hero-contact-section .hero-contact-section-list_with_image-item__description { text-align: center; }

		.hero-contact-section .hero-contact-section-form { padding: 20px; }
		.hero-contact-section .hero-contact-section-form .hs-form .hs-button { width: 100%; }
	}

	@media (prefers-reduced-motion: reduce) {
		.hero-contact-section .hero-contact-section-form .hs-form input,
		.hero-contact-section .hero-contact-section-form .hs-form select,
		.hero-contact-section .hero-contact-section-form .hs-form textarea { transition: none; }
	}
}