/*
 * Helpers for the Kadence sections: only what Kadence has no setting for.
 * Section padding lives on the Kadence Row Layout blocks, never here.
 *
 * The local site is shared with other site-core plugins, so this file loads
 * only on Shaped Recover pages, and every rule is scoped to the
 * `sp-recover-site` body class that the plugin adds there (in the editor:
 * `.editor-styles-wrapper`, as the file loads only for Shaped Recover posts).
 */

/* Pricing page hero: teal dot grid behind the content, fluid H1 and the
   countdown panel at the design's 760px. (No Kadence setting.) */
.sp-recover-pricing-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.sp-recover-pricing-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(0, 120, 110, 0.16) 1px, transparent 1.2px);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 85%);
	mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 85%);
}

/* Bottom fade to white, so the tinted band blends into the white money
   back row below with no visible edge. */
.sp-recover-pricing-hero::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	height: 240px;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}

.sp-recover-pricing-hero .kt-inside-inner-col > * {
	position: relative;
	z-index: 1;
}

.sp-recover-site .sp-recover-pricing-h1.wp-block-kadence-advancedheading,
.sp-recover-site .sp-recover-chlog-h1.wp-block-kadence-advancedheading {
	font-size: clamp(40px, 6vw, 72px);
	letter-spacing: -0.045em;
	text-wrap: balance;
}

/* Changelog releases: sticky version column from 768px (the header is
   68px). Kadence columns drop custom classNames, so the first column is
   reached structurally. (No Kadence setting.) */
@media (min-width: 768px) {

	body.sp-recover-site [class*="kb-row-layout-idscl-r"] .wp-block-kadence-column:first-child .kt-inside-inner-col {
		position: sticky;
		top: 96px;
	}
}

/* Changelog entries: 76px tag column + text, tone colours per tag. */
.sp-recover-chlog-items {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--sp-recover-font);
}

.sp-recover-chlog-items li {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr);
	gap: 12px;
	align-items: baseline;
	font-size: 16px;
	line-height: 1.6;
	color: var(--sp-recover-footer-body);
}

.sp-recover-chlog-items strong {
	font-weight: 600;
	color: var(--sp-recover-ink);
}

.sp-recover-chlog-tag {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.sp-recover-chlog-tag--new {
	color: var(--sp-recover-primary);
}

.sp-recover-chlog-tag--improved {
	color: #4c5fc0;
}

.sp-recover-chlog-tag--fix {
	color: #b91c1c;
}

.sp-recover-chlog-tag--tested {
	color: var(--sp-recover-footer-muted);
}

.sp-recover-chlog-tag--pro {
	color: #a16207;
}

/* Second release: hairline divider + 32px breathing room below it. */
.sp-recover-chlog-divided > .kt-row-column-wrap {
	border-top: 1px solid var(--sp-recover-rule);
	padding-top: 32px;
}

.sp-recover-chlog-items p {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--sp-recover-ink);
}

.sp-recover-site .sp-recover-pricing-hero .sp-recover-offer-countdown {
	max-width: 760px;
	margin: 48px auto 0;
}

/* Pricing coming soon: the hero ends on its own tint (no white fade), the
   intro is 52ch wide, the two cards share one height. (No Kadence setting.) */
.sp-recover-soon-hero::after {
	display: none;
}

.sp-recover-site .sp-recover-soon-sub.wp-block-kadence-advancedheading {
	max-width: 52ch;
	margin-right: auto;
	margin-left: auto;
	text-wrap: pretty;
}

.sp-recover-soon-plans .kt-inside-inner-col,
.sp-recover-soon-plans .sp-recover-pricing-card {
	height: 100%;
}

/* Price row: the line sits under the price (design), not over the list. */
.sp-recover-soon-card .sp-recover-pricing-price {
	padding-bottom: 28px;
	box-shadow: inset 0 -1px 0 #e6ebea;
}

.sp-recover-soon-card .sp-recover-pricing-features.sp-recover-pricing-features,
.sp-recover-soon-card.is-featured .sp-recover-pricing-features {
	padding-top: 0;
	box-shadow: none;
}

.sp-recover-soon-card .kb-button .kb-svg-icon-wrap {
	font-size: 18px;
}

/* Pro card: grey strip, grey price and checks. */
.sp-recover-soon-card.is-soon .sp-recover-pricing-card__badge.sp-recover-pricing-card__badge {
	background: #f7f9f8;
	box-shadow: inset 0 -1px 0 #e6ebea;
	color: #5a6563;
}

/* Pro card ring as an overlay so the grey badge strip can't cover it. */
.sp-recover-soon-card.is-soon::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px var(--sp-recover-border);
	pointer-events: none;
}

.sp-recover-soon-card.is-soon .sp-recover-pricing-price__amount {
	font-size: 40px;
	line-height: 1.6;
	letter-spacing: -0.04em;
	color: #6a7282;
	white-space: normal;
}

.sp-recover-soon-card.is-soon .sp-recover-check {
	color: #6a7282;
}

/* Waitlist card: 1px ring, scroll stop under the sticky header. */
.sp-recover-soon-waitlist {
	box-shadow: inset 0 0 0 1px #e6ebea;
	scroll-margin-top: 96px;
}

body.sp-recover-site .sp-recover-newsletter-form.sp-recover-waitlist-form .ff-el-form-control,
body.sp-recover-site .sp-recover-newsletter-form.sp-recover-waitlist-form .ff-btn-submit {
	height: 52px;
	border-radius: 8px;
	font-size: 16px;
}

body.sp-recover-site .sp-recover-newsletter-form.sp-recover-waitlist-form .ff-el-form-control {
	padding: 0 16px;
}

body.sp-recover-site .sp-recover-newsletter-form.sp-recover-waitlist-form .ff-el-group:not(.ff_submit_btn_wrapper) {
	flex-basis: 220px;
}

body.sp-recover-site .sp-recover-newsletter-form.sp-recover-waitlist-form .ff-message-success {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	gap: 10px;
	align-items: center;
	min-height: 52px;
	margin: 0;
	padding: 14px 16px;
	border: 0;
	border-radius: 8px;
	background: #e7f3f1;
	box-shadow: none;
	color: #005a52;
	font-family: var(--sp-recover-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
}

body.sp-recover-site .sp-recover-newsletter-form.sp-recover-waitlist-form .ff-message-success::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300786E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.sp-recover-site .sp-recover-newsletter-form.sp-recover-waitlist-form .ff-message-success p {
	margin: 0;
}

/* Clip sideways overflow: the settle H2s sit at scaleX(1.08) until their
   reveal runs, which adds ~5px of horizontal scroll at 768 before the
   animation starts. In Chrome the body clip alone does not stop the
   viewport's scrollable overflow while html's own overflow is visible, so
   html is clipped as well (:has() keeps both rules on Shaped Recover
   pages). (No Kadence setting.) */
html:has(body.sp-recover-site) {
	overflow-x: clip;
}

body.sp-recover-site,
.editor-styles-wrapper {
	overflow-x: clip;
}

/* Body text: the site font at 400 with normal letter spacing. Twenty
   Twenty-Five's global styles set body to 300 / -0.1px and load later,
   hence `html body`. */
html body.sp-recover-site,
html .editor-styles-wrapper {
	font-family: var(--sp-recover-font);
	font-weight: 400;
	letter-spacing: normal;
}

/* Section H2s wrap balanced (no Kadence setting). */
:is(.sp-recover-site, .editor-styles-wrapper) .sp-recover-wave {
	text-wrap: balance;
}

/* Site motion: the start states apply only when assets/js/motion.js adds
   html.sp-recover-motion (front end, motion allowed). */
@keyframes spRecoverWave {

	0% {
		opacity: 0;
		transform: translateY(0.55em);
	}

	60% {
		opacity: 1;
		transform: translateY(-0.06em);
	}

	100% {
		opacity: 1;
		transform: none;
	}
}

.sp-recover-motion .sp-recover-site [data-wave] .sp-recover-w {
	display: inline-block;
	opacity: 0;
}

.sp-recover-motion .sp-recover-site [data-wave].sp-recover-in .sp-recover-w {
	animation: spRecoverWave 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Card and mockup reveals are desktop only. */
@media (min-width: 960px) {

	.sp-recover-motion .sp-recover-site .sp-recover-reveal {
		opacity: 0;
		transform: translateY(16px);
		transition:
			opacity 0.7s var(--sp-recover-ease) var(--sp-recover-delay, 0ms),
			transform 0.7s var(--sp-recover-ease) var(--sp-recover-delay, 0ms);
	}

	.sp-recover-motion .sp-recover-site .sp-recover-reveal-pv {
		opacity: 0;
		translate: 0 40px;
		scale: 0.97;
		transition:
			opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
			translate 1s cubic-bezier(0.22, 1, 0.36, 1),
			scale 1s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.sp-recover-motion .sp-recover-site .sp-recover-reveal.sp-recover-in {
		opacity: 1;
		transform: none;
	}

	.sp-recover-motion .sp-recover-site .sp-recover-reveal-pv.sp-recover-in {
		opacity: 1;
		translate: none;
		scale: none;
	}
}

/* Sticky hero text that motion.js shrinks and fades on scroll. `top`
   matches the hero row's top padding (set per page with the custom
   property). */
.sp-recover-site .sp-recover-hero-text {
	position: sticky;
	top: var(--sp-recover-hero-text-top, 96px);
	z-index: 1;
	transform-origin: 50% 30%;
}

.sp-recover-motion .sp-recover-site .sp-recover-hero-text {
	will-change: transform, opacity;
}

/*
 * Header (Kadence header 'Shaped Recover header' + navigations 'Shaped
 * Recover menu' / 'Shaped Recover mobile menu'). Colours, type, paddings,
 * panel width, border, radius and shadow are Kadence settings; these rules
 * cover only what Kadence has no setting for.
 */

/* Focus ring (design): 2px #3858E9, 2px away, on every focusable part. */
.sp-recover-site :focus-visible {
	outline: 2px solid #3858e9;
	outline-offset: 2px;
}

/* No focus ring after a mouse click or tap on links, buttons and other
   controls; keyboard focus keeps the ring above. */
body.sp-recover-site :is(a, button, summary, [role="button"], [tabindex], input[type="button"], input[type="submit"], input[type="checkbox"], input[type="radio"]):focus:not(:focus-visible) {
	outline: none;
}

/* Scrolled header: assets/js/header.js adds `sp-recover-scrolled` past 8px
   of scroll (the design), before Kadence's sticky state starts (the offer
   bar's 44px). White .9 is also Kadence's sticky background, so both
   states look the same; the line is a shadow, not Kadence's sticky border,
   so it fades in and adds no height. Without the script, Kadence's stuck
   state still gets the blur and line. */
.sp-recover-site .sp-recover-header .kb-header-sticky-wrapper {
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.sp-recover-site .sp-recover-header.sp-recover-scrolled .kb-header-sticky-wrapper,
.sp-recover-site .sp-recover-header .kb-header-sticky-wrapper.item-is-stuck {
	background-color: rgba(255, 255, 255, 0.9);
	box-shadow: 0 1px 0 #e6ebea;
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	backdrop-filter: saturate(1.4) blur(10px);
}

/* Tablet header: the CTA beside the menu button is left out on phones. */
@media (max-width: 767px) {

	.sp-recover-site .sp-recover-header-cta-tablet {
		display: none;
	}
}

/* Off-canvas menu (tablet and phones): 85% wide up to 380px (Kadence's
   width is one px value), the CTA block at the bottom, the menu between
   them scrolls. */
.sp-recover-site .sp-recover-drawer .kb-off-canvas-inner-wrap {
	width: min(85%, 380px);
	box-shadow: -24px 0 48px -16px rgba(12, 22, 21, 0.3);
}

.sp-recover-site .sp-recover-drawer .kb-off-canvas-inner > .wp-block-kadence-navigation {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

.sp-recover-site .sp-recover-drawer .kb-off-canvas-inner > .sp-recover-drawer-footer {
	flex: none;
	margin-top: auto;
}

/* Group chevrons: 18px, grey. Sub-links 2px apart. */
.sp-recover-site .sp-recover-nav-mobile .kb-nav-dropdown-toggle-btn {
	color: #5a6563;
}

.sp-recover-site .sp-recover-nav-mobile .kb-nav-dropdown-toggle-btn svg {
	top: 0;
	width: 18px;
	height: 18px;
}

/* Sub-links start at the group's left edge: Kadence's vertical menu sets
   its 1em indent on the sub-menu itself, so the menu's own 0 margin
   setting can't reach it. A closed group adds no height (Kadence keeps
   it 1px tall). */
.sp-recover-site .sp-recover-nav-mobile .menu .sub-menu {
	--kb-nav-dropdown-margin-left: 0;
}

.sp-recover-site .sp-recover-nav-mobile .menu-item:not(.menu-item--toggled-on) > .sub-menu {
	height: 0;
}

.sp-recover-site .sp-recover-nav-mobile .sub-menu > .menu-item + .menu-item {
	margin-top: 2px;
}

.sp-recover-site .sp-recover-nav-mobile .sub-menu > .menu-item > .kb-link-wrap {
	border-radius: 8px;
}

/* Panel rows: 4px apart, 10px corners (Kadence paints the hover
   background on .kb-link-wrap). */
.sp-recover-site .sp-recover-nav .sub-menu > .menu-item + .menu-item {
	margin-top: 4px;
}

.sp-recover-site .sp-recover-nav .sub-menu > .menu-item > .kb-link-wrap {
	border-radius: 10px;
}

/* "What's New" pill at the right end of the Changelog row. */
.sp-recover-site .sp-recover-nav .kb-nav-link-content.has-highlight-label .kb-nav-item-title-wrap {
	flex: 1;
}

.sp-recover-site .sp-recover-nav .kb-nav-link-content.has-highlight-label .link-highlight-label {
	align-self: center;
	white-space: nowrap;
}

/* 1px dividers inset 4px, 10px from the rows on both sides: under
   "Free vs Pro" and above "Download Lite" (the 10px margins take in the
   4px row gap, which collapses into them). */
.sp-recover-site .sp-recover-nav .sub-menu > .menu-item:is(.sp-recover-nav-divided, .sp-recover-nav-divided-before) {
	display: block;
}

.sp-recover-site .sp-recover-nav .sub-menu > .sp-recover-nav-divided::after,
.sp-recover-site .sp-recover-nav .sub-menu > .sp-recover-nav-divided-before::before {
	content: "";
	display: block;
	height: 1px;
	background: #e6ebea;
}

.sp-recover-site .sp-recover-nav .sub-menu > .sp-recover-nav-divided::after {
	margin: 10px 4px;
}

.sp-recover-site .sp-recover-nav .sub-menu > .sp-recover-nav-divided-before::before {
	margin: 10px 4px;
}

/* "ShapedRecover vs" section label: a link with "Disable link" on (its
   colour, case and letter spacing are Kadence settings; the menu's
   dropdown type wins over its own size and weight), not a hover row. */
.sp-recover-site .sp-recover-nav .sub-menu > .sp-recover-nav-label > .kb-link-wrap {
	--kb-nav-dropdown-link-background-hover: transparent;
	cursor: default;
}

.sp-recover-site .sp-recover-nav .sub-menu > .sp-recover-nav-label > .kb-link-wrap > .kb-nav-link-content {
	padding: 4px 8px 2px;
	font-size: 12px;
	font-weight: 600;
	line-height: normal;
}

/* "Download Lite" is 600: its own Kadence weight loses to the menu's
   dropdown weight (same specificity, printed later). */
.sp-recover-site .sp-recover-nav .sub-menu > .sp-recover-nav-divided-before > .kb-link-wrap > .kb-nav-link-content {
	font-weight: 600;
}

/* Compare / Resources labels open their panel, so they show a hand. */
.sp-recover-site .sp-recover-nav .menu-container > .menu > .menu-item-has-children > .kb-link-wrap > .kb-nav-link-content {
	cursor: pointer;
}

/* Desktop nav: 6px gap + 12px chevron that turns up while its panel is
   open; the open item is teal. */
.sp-recover-site .sp-recover-nav {
	--kb-nav-drop-icon-width: 18px;
}

.sp-recover-site .sp-recover-nav .menu-container > .menu > .menu-item > .kb-link-wrap .kb-nav-dropdown-toggle-btn {
	justify-content: flex-end;
}

.sp-recover-site .sp-recover-nav .menu-container > .menu > .menu-item > .kb-link-wrap .kb-nav-dropdown-toggle-btn svg {
	top: 0;
	width: 12px;
	height: 12px;
	transition: transform 0.16s ease;
}

.sp-recover-site .sp-recover-nav .menu-container > .menu > .menu-item-has-children:is(:hover, :focus-within, .menu-item--toggled-on) > .kb-link-wrap {
	--kb-nav-top-link-color-hover: #00786e;
	color: #00786e;
}

.sp-recover-site .sp-recover-nav .menu-container > .menu > .menu-item-has-children:is(:hover, :focus-within, .menu-item--toggled-on) > .kb-link-wrap > .kb-nav-link-content {
	color: #00786e;
}

.sp-recover-site .sp-recover-nav .menu-container > .menu > .menu-item:is(:hover, :focus-within, .menu-item--toggled-on) > .kb-link-wrap .kb-nav-dropdown-toggle-btn svg {
	transform: rotate(180deg);
}

/* Panels fade in over 160ms while rising 4px (Kadence's "fade" reveal has
   no duration or offset setting). */
.sp-recover-site .sp-recover-nav .menu-container > .menu > .menu-item > .sub-menu {
	--kb-nav-dropdown-hide-transform-y: 4px;
	--kb-nav-dropdown-transition: opacity 0.16s ease, transform 0.16s ease;
}

@media (prefers-reduced-motion: reduce) {

	.sp-recover-site .sp-recover-nav .menu-container > .menu > .menu-item > .sub-menu {
		--kb-nav-dropdown-hide-transform-y: 0;
		--kb-nav-dropdown-transition: none;
	}
}

/*
 * Home sections (hero, problem, workflow, builder, starter emails).
 */

/* Section headings: the design's fluid sizes (Kadence has fixed sizes per
   device only) and "Tracking settle": scaleX 1.08 + 3px blur settle in over
   1100ms, from the bottom centre. The size rule carries the heading block's
   own class so it beats Kadence's per-device font size, which is printed
   later with a three-class selector (0,3,0). */
.sp-recover-site .sp-recover-hero-row .sp-recover-h1.wp-block-kadence-advancedheading {
	font-size: clamp(42px, 6.4vw, 80px);
	letter-spacing: -0.05em;
	text-wrap: balance;
}

.sp-recover-site .sp-recover-h2 {
	font-size: clamp(34px, 4vw, 52px);
	letter-spacing: -0.045em;
	text-wrap: balance;
}

.sp-recover-motion .sp-recover-site .sp-recover-settle {
	opacity: 0;
	transform: scaleX(1.08);
	filter: blur(3px);
	transform-origin: 50% 100%;
}

.sp-recover-motion .sp-recover-site .sp-recover-settle.sp-recover-in {
	opacity: 1;
	transform: none;
	filter: none;
	transition:
		opacity 1.1s var(--sp-recover-ease-heading) var(--sp-recover-delay, 0ms),
		transform 1.1s var(--sp-recover-ease-heading) var(--sp-recover-delay, 0ms),
		filter 1.1s var(--sp-recover-ease-heading) var(--sp-recover-delay, 0ms);
}

/* Header overlays the hero: absolute, keeping its static spot right below
   the offer bar (no `top`, so the offer bar's responsive height decides
   it). The hero row rises underneath and the transparent header floats
   over the hero's top; Kadence's sticky JS still fixes the sticky wrapper
   on scroll. (No Kadence setting for this in a block template.) */
.sp-recover-site .sp-recover-header {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 100;
}

/* Hero: sits under the transparent header, dot grid behind, chips, content
   on top. Layers (back to front): dot grid (::before), chips block, content. */
.sp-recover-site .sp-recover-hero-row {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	width: 100%;
}

.sp-recover-site .sp-recover-hero-row::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	pointer-events: none;
	z-index: 0;
	aspect-ratio: 1440 / 800;
	min-height: 560px;
	max-height: 960px;
	background-image: radial-gradient(rgba(12, 22, 21, 0.13) 1px, transparent 1px);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(75% 70% at 50% 30%, #000, transparent);
	mask-image: radial-gradient(75% 70% at 50% 30%, #000, transparent);
}

.sp-recover-site .sp-recover-hero-row .wp-block-shaped-recover-floating-chips {
	z-index: 1;
}

.sp-recover-site .sp-recover-hero-row :is(.kt-row-column-wrap, .kt-inside-inner-col) {
	position: static;
}

/* The hero columns too: Kadence gives its columns `position: relative`,
   which would trap the full-width chips/aurora layer inside the 1160px
   column instead of the full-width row. The inner column's other children
   get their own relative + z-index above. (No Kadence setting.) */
.sp-recover-site .sp-recover-hero-row .wp-block-kadence-column {
	position: static;
}

.sp-recover-site .sp-recover-hero-row .kt-inside-inner-col > :not(.wp-block-shaped-recover-floating-chips) {
	position: relative;
	z-index: 3;
}

/* Tablet and mobile: the hero runs past the aurora layer, so its tint
   would end on a hard line. Fade the layer's lower part out instead. */
@media (max-width: 1024px) {

	.sp-recover-site .sp-recover-hero-row .wp-block-shaped-recover-floating-chips {
		-webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
		mask-image: linear-gradient(to bottom, #000 40%, transparent);
	}
}

/* Primary button: the arrow moves 4px right on hover. (Kadence renders
   feather icons as `.kb-svg-icon-wrap`, not `.kt-btn-svg-icon`.) */
.sp-recover-site .sp-recover-cta-primary .kb-svg-icon-wrap {
	transition: transform 0.2s var(--sp-recover-ease);
}

.sp-recover-site .sp-recover-cta-primary:hover .kb-svg-icon-wrap {
	transform: translateX(4px);
}

/* Hero eyebrow pill: a Kadence button with no link, so it is not
   clickable (no pointer, no hover). It stays one 30px line; below 375px
   the text shrinks with the screen so the pill fits the row. */
html body.sp-recover-site .sp-recover-eyebrow.kb-button {
	pointer-events: none;
	white-space: nowrap;
}

@media (max-width: 374px) {

	html body.sp-recover-site .sp-recover-eyebrow.kb-button {
		font-size: 3.3vw;
	}
}

/* Play button: the design's 56px circle with the inset ring sits on the
   link itself; Kadence's own 1px border on the wrap is replaced by it
   (the link fills the sized intrinsic box, as Kadence intends). The
   circle grows 1.06 on hover (from 768px, hover devices). It stays the
   same circle on tablet and mobile. */
.sp-recover-site .sp-recover-hero-play .kadence-video-popup-wrap {
	border: 0;
	transition: transform 0.42s var(--sp-recover-ease-zoom);
}

.sp-recover-site .sp-recover-hero-play .kadence-video-intrinsic {
	padding-bottom: 0 !important;
	width: 56px;
	height: 56px;
}

.sp-recover-site .sp-recover-hero-play .kadence-video-popup-link {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px #d5dcda;
	transition: transform 0.42s var(--sp-recover-ease-zoom), box-shadow 0.32s ease, color 0.32s ease;
}

@media (hover: hover) and (min-width: 768px) {

	.sp-recover-site .sp-recover-hero-play:hover .kadence-video-popup-wrap {
		transform: scale(1.06);
	}
}

/* Video popup chrome (Kadence paints backdrop colour and opacity, the
   close button keeps glightbox's 35px r4 defaults): the backdrop blurs
   behind Kadence's rgba colour, the video frame is r14 and the close
   button is the design's 44px circle. */
.sp-recover-site .glightbox-container.glightbox-kadence-dark .goverlay {
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.sp-recover-site .glightbox-container.glightbox-kadence-dark .gvideo-container {
	overflow: hidden;
	border-radius: 14px;
}

.sp-recover-site .glightbox-container.glightbox-kadence-dark .gclose {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

/* The frame and the fallback link under it (assets/js/video-popup.js adds
   the link when the lightbox opens; glightbox centres the column). */
.sp-recover-site .glightbox-kadence-dark .gslide-inner-content {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sp-recover-site .glightbox-kadence-dark .sp-recover-video-fallback {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	color: #e3f2ef;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
}

.sp-recover-site .glightbox-kadence-dark .sp-recover-video-fallback:hover {
	color: #fff;
}

@media (max-width: 639px) {

	/* Full-width buttons: the Kadence column block does not print its
	   custom class, so the buttons column is found by the play button it holds.
	   The CTA takes the full row; the play circle wraps below it, centred. */
	.sp-recover-site .sp-recover-hero-row .kt-inside-inner-col:has(> .sp-recover-hero-play) > :not(.sp-recover-hero-play) {
		width: 100%;
		max-width: 100%;
	}

	.sp-recover-site .sp-recover-hero-row .kt-inside-inner-col:has(> .sp-recover-hero-play) .kb-button {
		width: 100%;
		justify-content: center;
	}
}

/* Starter emails: with the pin on (assets of the block's view.js add
   .sp-recover-pinned to the row) the row is 190vh tall and its content
   sticks below the header, centred in the rest of the screen. */
.sp-recover-site .sp-recover-emails-row.sp-recover-pinned {
	height: 190vh;
}

.sp-recover-site .sp-recover-emails-row.sp-recover-pinned > .kt-row-column-wrap {
	position: sticky;
	top: 68px;
	align-content: center;
	min-height: calc(100vh - 68px);
	padding: 20px 24px;
}

.sp-recover-site .sp-recover-emails-row.sp-recover-pinned .kt-inside-inner-col {
	justify-content: center;
}

/* Pinned: 56px between the heading and the three emails (design pinGap). */
.sp-recover-site .sp-recover-emails-row.sp-recover-pinned .kt-inside-inner-col > .wp-block-kadence-column {
	margin-top: 56px;
}

/*
 * Home sections 7, 9, 10 and the final CTA.
 */

/* Trust: the left column (title, text, consent card) sticks below the header
   from 768px (Kadence stacks the columns below that). */
@media (min-width: 768px) {

	.sp-recover-site .sp-recover-trust-row > .kt-row-column-wrap > .wp-block-kadence-column:first-child > .kt-inside-inner-col {
		position: sticky;
		top: 108px;
	}
}

/* Final CTA: dot grid under the chips and the text; the chips block fills
   the row (the row is the positioning parent). */
.sp-recover-site .sp-recover-cta-row {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.sp-recover-site .sp-recover-cta-row::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent);
	mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent);
	pointer-events: none;
}

.sp-recover-site .sp-recover-cta-row :is(.kt-row-column-wrap, .wp-block-kadence-column, .kt-inside-inner-col) {
	position: static;
}

.sp-recover-site .sp-recover-cta-row .wp-block-shaped-recover-floating-chips {
	z-index: 1;
}

.sp-recover-site .sp-recover-cta-row .kt-inside-inner-col > :not(.wp-block-shaped-recover-floating-chips) {
	position: relative;
	z-index: 3;
}

.sp-recover-site .sp-recover-cta-row .sp-recover-cta-h2.wp-block-kadence-advancedheading {
	font-size: clamp(40px, 6vw, 80px);
	letter-spacing: -0.045em;
	text-wrap: balance;

	/* The design caps the heading and subtitle in ch units, so the line
	   breaks stay the same at every size (Kadence's max-width is px). */
	max-width: 18ch;
}

.sp-recover-site .sp-recover-cta-h2.wp-block-kadence-advancedheading + .wp-block-kadence-advancedheading {
	max-width: 48ch;
}

@media (max-width: 639px) {

	.sp-recover-site .sp-recover-cta-row .kb-buttons-wrap,
	.sp-recover-site .sp-recover-cta-row .wp-block-kadence-singlebtn,
	.sp-recover-site .sp-recover-cta-row .kb-button {
		width: 100%;
		justify-content: center;
	}
}

/* Checkout restore section (8): checklist title line and centred card. */
body.sp-recover-site .sp-recover-checklist strong {
	display: block;
	margin-bottom: 4px;
	color: #0c1615;
	font-family: var(--sp-recover-font);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: normal;
}

body.sp-recover-site .sp-recover-checkout-panel .sp-recover-checkout-restore {
	margin-right: auto;
	margin-left: auto;
}

/* FAQ (11): plus icon ring, rule colours follow Kadence. */
body.sp-recover-site .sp-recover-faq .kt-blocks-accordion-icon-trigger {
	box-sizing: border-box;
	width: 28px;
	min-width: 28px;
	height: 28px;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px #d5dcda;
}

/* FAQ list: ink rule on top, white rows with hairline rules (TT5 styles the
   header <button> as a dark pill — reset it), panels closed unless their
   header is expanded. (No Kadence setting.) */
body.sp-recover-site .sp-recover-faq .kt-accordion-inner-wrap {
	border-top: 1px solid #0c1615;
}

body.sp-recover-site .sp-recover-faq .kt-blocks-accordion-header {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--sp-recover-ink);
	cursor: pointer;
	text-align: left;
}

/* No focus ring on the accordion rows (mouse clicks left one behind). */
body.sp-recover-site .sp-recover-faq .kt-blocks-accordion-header:focus {
	outline: none;
}

body.sp-recover-site .sp-recover-faq .kt-blocks-accordion-header:focus:not(:focus-visible) {
	outline: none;
}

/* Answers keep the design's 16px. Core's fluid size sits in an inline style
   and shrinks them to 14px on mobile, so !important is needed here. */
body.sp-recover-site .sp-recover-faq .kt-accordion-panel-inner p {
	font-size: 16px !important;
}

body.sp-recover-site .sp-recover-faq .kt-blocks-accordion-icon-trigger::before,
body.sp-recover-site .sp-recover-faq .kt-blocks-accordion-icon-trigger::after {
	top: 13px;
	left: 8px;
	width: 12px;
	/* Whole pixels: at 1.5px the rotated bar renders thicker. */
	height: 2px;
	border-radius: 1px;
}

/* Footer (13): Fluent Forms newsletter, left rail and link lists. */
body.sp-recover-site .sp-recover-footer-main .kt-svg-icon-list-single {
	display: none;
}

body.sp-recover-site .sp-recover-footer-links .kt-svg-icon-list-item-wrap a {
	display: block;
	padding: 0;
}

body.sp-recover-site .sp-recover-newsletter-form .frm-fluent-form fieldset {
	display: flex;
	flex-wrap: wrap;
	/* The error note grows the field's group; keep the button at the top. */
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
}

body.sp-recover-site .sp-recover-newsletter-form .ff-el-group {
	margin: 0;
}

/* TT5 gives forms a 24px bottom margin (on Fluent's wrapper div too),
   which double-spaces the gap to the "No spam" note (design: 14px).
   (No Kadence setting.) */
body.sp-recover-site .sp-recover-newsletter-form form,
body.sp-recover-site .sp-recover-newsletter-form .fluentform {
	margin-bottom: 0;
}

/* Fluent Forms prints an empty error stack between the form and the note,
   plus a stray class-less empty <p> with a 22px margin — both add dead
   space before the note (design gap: 14px). (No Kadence setting.) */
body.sp-recover-site .sp-recover-newsletter-form .ff-errors-in-stack:not(:has(.error)) {
	display: none;
}

/* Fluent's fieldset also prints a screen-reader legend and an empty <p> as
   flex items; the legend takes a flex slot and adds a phantom 10px gap
   before the input. Take the legend out of the flow (still readable by
   screen readers) and drop the paragraph. (No Kadence setting.) */
body.sp-recover-site .sp-recover-newsletter-form fieldset legend {
	position: absolute;
}

body.sp-recover-site .sp-recover-newsletter-form fieldset p:not([class]) {
	display: none;
}

/* Blog pagination squares (the blog-posts block's own SCSS expects these
   shared rules; ported from the reference site.css). */
.sp-recover-pagination .page-numbers,
.sp-recover-pagination .wp-block-query-pagination-previous,
.sp-recover-pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 40px;
	height: 40px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	background: #fff;
	color: #364153;
	text-decoration: none;
	transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

.sp-recover-pagination .page-numbers {
	width: 40px;
	padding: 0;
}

.sp-recover-pagination .wp-block-query-pagination-numbers {
	display: flex;
	gap: 8px;
}

.sp-recover-pagination a.page-numbers:hover,
.sp-recover-pagination a[class*="pagination-"]:hover {
	border-color: #5a5a63;
	background: #5a5a63;
	color: #fff;
}

.sp-recover-pagination .page-numbers.current {
	border-color: #5a5a63;
	background: #5a5a63;
	color: #fff;
}

.sp-recover-pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
}

/* Social icons: 24px below the description (the design's left-column gap);
   the Kadence icon block has no margin control. (No Kadence setting.) */
body.sp-recover-site .sp-recover-footer-main .kt-svg-icons {
	margin-top: 24px;
}

body.sp-recover-site .sp-recover-newsletter-form .ff-el-group:not(.ff_submit_btn_wrapper) {
	flex: 1 1 200px;
	min-width: 0;
	padding: 0;
}

body.sp-recover-site .sp-recover-newsletter-form .ff-el-form-control {
	height: 48px;
	padding: 0 14px;
	border: 0;
	border-radius: 6px;
	background: #fff;
	box-shadow: inset 0 0 0 1px #d5dcda;
	color: #1e2939;
	font-family: var(--sp-recover-font);
	font-size: 15px;
}

body.sp-recover-site .sp-recover-newsletter-form .ff-el-form-control:focus {
	box-shadow: inset 0 0 0 2px #00786e;
	outline: none;
}

body.sp-recover-site .sp-recover-newsletter-form .ff-btn-submit {
	height: 48px;
	padding: 0 24px;
	border: 0;
	border-radius: 6px;
	background: #00786e;
	color: #fff;
	font-family: var(--sp-recover-font);
	font-size: 15px;
	font-weight: 600;
}

body.sp-recover-site .sp-recover-newsletter-form .ff-btn-submit:hover {
	background: #005a52;
}

body.sp-recover-site .sp-recover-footer-bar .sp-recover-copyright a {
	color: #1e2939;
	text-decoration: none;
}

body.sp-recover-site .sp-recover-footer-bar .sp-recover-copyright a:hover {
	color: #00786e;
}

body.sp-recover-site .sp-recover-checklist br {
	display: none;
}

/* Footer (13) layout details Kadence can't set:
   - Fluent's wpautop leaves a class-less empty <p> (22px margins) after the form.
   - Left column max 380 (also when stacked); link grid max 640, right-aligned on desktop.
   - 561-767: the link columns stay 3 across like the design (auto-fit grid). */
body.sp-recover-site .sp-recover-newsletter-form .kt-inside-inner-col > p:not([class]) {
	display: none;
}

body.sp-recover-site .sp-recover-footer-main .kt-row-column-wrap > .wp-block-kadence-column:first-child {
	max-width: 380px;
}

body.sp-recover-site .sp-recover-footer-main .kb-row-layout-wrap {
	max-width: 640px;
}

@media (min-width: 1025px) {
	body.sp-recover-site .sp-recover-footer-main .kb-row-layout-wrap {
		margin-left: auto;
	}
}

@media (min-width: 561px) and (max-width: 767px) {
	body.sp-recover-site .sp-recover-footer-main .kb-row-layout-wrap > .kt-row-column-wrap {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Footer (13): logo image block (no inline baseline gap, design 30px) and
   copyright link padding 6px 0 (design link row height 31.5). */
body.sp-recover-site .sp-recover-footer-logo img {
	display: block;
}

body.sp-recover-site .sp-recover-footer-bar .sp-recover-copyright a {
	display: inline-block;
	padding: 6px 0;
	line-height: normal;
}

/* ── Contact page ─────────────────────────────────────────────── */

/* "Contact support →": the arrow slides 4px on hover (design: gap 8px → 12px).
   Kadence clips buttons (overflow: hidden) and these have no padding, so the
   moved arrow was cut off. */
body.sp-recover-site .wp-block-kadence-advancedbtn .kb-button.sp-recover-link-arrow {
	overflow: visible;
}

body.sp-recover-site .sp-recover-link-arrow .kb-svg-icon-wrap {
	transition: transform 0.15s;
}

body.sp-recover-site .sp-recover-link-arrow:hover .kb-svg-icon-wrap {
	transform: translateX(4px);
}

/*
 * Contact page: the Fluent Forms form in the form card (Kadence column
 * .sp-recover-contact-form) and the "Support team available" dot in the info card.
 * Fluent Forms has no settings for this look. Ported from the ShapedRecommend contact page, teal tokens.
 */
body.sp-recover-site .sp-recover-status-dot {
	display: flex;
	align-items: center;
	gap: 8px;
}

body.sp-recover-site .sp-recover-status-dot::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #16a34a;
}

body.sp-recover-site .sp-recover-contact-form .fluentform {
	--fluentform-input-select-height: 48px;
	font-family: var(--sp-recover-font);
}

/* Rows 24px apart; the two-field rows have a 20px column gap. */
body.sp-recover-site .sp-recover-contact-form .fluentform .ff-el-group {
	margin: 0 0 24px;
}

body.sp-recover-site .sp-recover-contact-form .fluentform .ff-t-container {
	display: flex;
	gap: 0 20px;
}

body.sp-recover-site .sp-recover-contact-form .fluentform .ff-t-cell {
	flex: 1 1 0 !important;
	min-width: 0;
	padding: 0;
}

/* Phones (Kadence's mobile breakpoint): one field per row. */
@media (max-width: 767px) {

	body.sp-recover-site .sp-recover-contact-form .fluentform .ff-t-container {
		flex-direction: column;
	}
}

body.sp-recover-site .sp-recover-contact-form .fluentform .ff-el-input--label {
	display: block;
	margin: 0 0 10px;
	padding: 0;
	line-height: normal;
}

body.sp-recover-site .sp-recover-contact-form .fluentform .ff-el-input--label label {
	display: block;
	margin: 0;
	color: #1e2939;
	font-family: var(--sp-recover-font);
	font-size: 15px;
	font-weight: 600;
	line-height: normal;
}

body.sp-recover-site .sp-recover-contact-form .fluentform .ff-el-is-required.asterisk-right label::after {
	content: "*";
	margin-left: 4px;
	color: #d63638;
}

body.sp-recover-site .sp-recover-contact-form .fluentform .ff-el-form-control {
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 14px;
	border: 0;
	border-radius: 8px;
	background-color: #fff;
	box-shadow: inset 0 0 0 1px #d1d5dc;
	color: #1e2939;
	font: 400 16px/1.4 var(--sp-recover-font);
	letter-spacing: normal;
	outline: none;
	transition: box-shadow 0.15s;
}

body.sp-recover-site .sp-recover-contact-form .fluentform .ff-el-form-control::placeholder {
	color: #757575;
	opacity: 1;
}

body.sp-recover-site .sp-recover-contact-form .fluentform .ff-el-form-control:focus {
	box-shadow: inset 0 0 0 1px var(--sp-recover-primary), 0 0 0 3px var(--sp-recover-tint-ring);
}

body.sp-recover-site .sp-recover-contact-form .fluentform textarea.ff-el-form-control {
	height: auto;
	min-height: 180px;
	padding: 12px 14px;
	line-height: 1.55;
	resize: vertical;
}

body.sp-recover-site .sp-recover-contact-form .fluentform select.ff-el-form-control {
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 12 12' fill='none' stroke='%233A4543' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E");
	background-position: right 16px top 17px;
	background-repeat: no-repeat;
	background-size: 14px 14px;
	cursor: pointer;
	appearance: none;
}

/* Errors: red ring, and a red line with the circle-"!" icon under the field. */
body.sp-recover-site .sp-recover-contact-form .fluentform .ff-el-is-error .ff-el-form-control,
body.sp-recover-site .sp-recover-contact-form .fluentform .ff-el-is-error .ff-el-form-control:focus {
	box-shadow: inset 0 0 0 1.5px #d63638, 0 0 0 3px #fcebec;
}

body.sp-recover-site .sp-recover-contact-form .fluentform .ff-el-is-error .text-danger {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 10px 0 0;
	color: #d63638;
	font-family: var(--sp-recover-font);
	font-size: 13.5px;
	line-height: normal;
}

body.sp-recover-site .sp-recover-contact-form .fluentform .ff-el-is-error .text-danger::before {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	background: currentcolor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='M8 4.8v3.6M8 11h.01'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='M8 4.8v3.6M8 11h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Last line: "* Required fields" left, the button right, 4px more above. */
body.sp-recover-site .sp-recover-contact-form .fluentform fieldset {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	column-gap: 16px;
}

body.sp-recover-site .sp-recover-contact-form .fluentform fieldset > * {
	flex: 1 1 100%;
}

body.sp-recover-site .sp-recover-contact-form .fluentform fieldset > .ff-el-group:has(+ .ff-custom_html) {
	margin-bottom: 28px;
}

body.sp-recover-site .sp-recover-contact-form .fluentform .ff-custom_html,
body.sp-recover-site .sp-recover-contact-form .fluentform .ff_submit_btn_wrapper {
	flex: 0 1 auto;
	margin: 0;
}

body.sp-recover-site .sp-recover-contact-form .fluentform .ff-custom_html p {
	margin: 0;
	color: #6a7282;
	font-family: var(--sp-recover-font);
	font-size: 14px;
	line-height: normal;
}

body.sp-recover-site .sp-recover-contact-form .fluentform .sp-recover-req {
	margin-right: 4px;
	color: #d63638;
}

body.sp-recover-site .sp-recover-contact-form .fluentform .ff-btn-submit:not(.ff_btn_no_style) {
	height: 48px;
	padding: 0 24px;
	border: 0;
	border-radius: 8px;
	background-color: var(--sp-recover-primary);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 1px var(--sp-recover-primary-hover), 0 1px 2px rgba(0, 90, 82, 0.35), 0 8px 20px -8px rgba(0, 120, 110, 0.55);
	color: #fff;
	font: 500 15px/48px var(--sp-recover-font);
	letter-spacing: normal;
	cursor: pointer;
	opacity: 1;
	transition: background-color 0.18s, transform 0.18s, box-shadow 0.18s;
}

body.sp-recover-site .sp-recover-contact-form .fluentform .ff-btn-submit:not(.ff_btn_no_style):hover {
	background-color: var(--sp-recover-primary-hover);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 1px var(--sp-recover-primary-hover), 0 2px 4px rgba(0, 90, 82, 0.3), 0 12px 24px -8px rgba(0, 120, 110, 0.6);
	color: #fff;
	opacity: 1;
	transform: translateY(-1px);
}

/* After sending, Fluent hides the form and shows the confirmation message
   (its HTML is in the form settings). */
body.sp-recover-site .sp-recover-contact-form .ff-message-success {
	margin: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
}

body.sp-recover-site .sp-recover-contact-sent {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 24px 0;
	font-family: var(--sp-recover-font);
}

body.sp-recover-site .sp-recover-contact-sent__icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--sp-recover-tint-tile) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%2300786E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 10.5 3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 20px no-repeat;
}

body.sp-recover-site .sp-recover-contact-sent h2 {
	margin: 0;
	color: #1e2939;
	font-family: var(--sp-recover-font);
	font-size: 24px;
	font-weight: 600;
	line-height: normal;
	letter-spacing: -0.02em;
}

body.sp-recover-site .sp-recover-contact-sent__text,
body.sp-recover-site .sp-recover-contact-sent__more {
	font-family: var(--sp-recover-font);
}

body.sp-recover-site .sp-recover-contact-sent__text {
	margin: 0;
	color: var(--sp-recover-body);
	font-size: 16px;
	line-height: 1.6;
}

body.sp-recover-site .sp-recover-contact-sent__more {
	margin: 8px 0 0;
	font-size: 15px;
	line-height: 1.4;
}

body.sp-recover-site .sp-recover-contact-sent__again {
	color: var(--sp-recover-primary);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
}

body.sp-recover-site .sp-recover-contact-sent__again:hover {
	color: var(--sp-recover-primary-hover);
}

/* ── Footer newsletter: error and success messages ─────────────── */
/* stylelint-disable no-descending-specificity */


/* Error: red ring on the field, and a soft red note with an icon
   on its own row under the field and button. */
body.sp-recover-site .sp-recover-newsletter-form .fluentform .ff-el-is-error .ff-el-form-control,
body.sp-recover-site .sp-recover-newsletter-form .fluentform .ff-el-is-error .ff-el-form-control:focus {
	box-shadow: inset 0 0 0 1.5px #d63638, 0 0 0 3px #fcebec;
}

body.sp-recover-site .sp-recover-newsletter-form .fluentform .text-danger,
body.sp-recover-site .sp-recover-newsletter-form .ff-errors-in-stack .error {
	display: flex;
	grid-column: 1 / -1;
	align-items: center;
	gap: 8px;
	max-width: 394px;
	margin: 10px 0 0;
	padding: 9px 12px;
	border: 1px solid #fbd5d6;
	border-radius: 8px;
	background: #fef3f2;
	color: #b42318;
	font: 500 13px/1.4 var(--sp-recover-font);
	letter-spacing: normal;
}

body.sp-recover-site .sp-recover-newsletter-form .fluentform .text-danger::before,
body.sp-recover-site .sp-recover-newsletter-form .ff-errors-in-stack .error::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: currentcolor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='M8 4.8v3.6M8 11h.01'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='M8 4.8v3.6M8 11h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.sp-recover-site .sp-recover-newsletter-form .ff-errors-in-stack {
	margin: 0;
}

body.sp-recover-site .sp-recover-newsletter-form .ff-errors-in-stack .error {
	margin-top: 10px;
}

/* Success: Fluent hides the form and shows the confirmation message (ported from the ShapedRecommend footer, teal tokens). */
body.sp-recover-site .sp-recover-newsletter-form .ff-message-success {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	max-width: 394px;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--sp-recover-tint-ring);
	border-radius: 12px;
	background: linear-gradient(135deg, #f7fbfa, var(--sp-recover-tint));
	box-shadow: 0 10px 24px -14px rgba(0, 120, 110, 0.35);
	color: var(--sp-recover-body);
	font: 400 14px/1.5 var(--sp-recover-font);
	letter-spacing: normal;
}

body.sp-recover-site .sp-recover-newsletter-form .ff-message-success::before {
	content: "";
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--sp-recover-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 10.5 3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 16px no-repeat;
	box-shadow: 0 0 0 4px var(--sp-recover-tint-ring);
}

body.sp-recover-site .sp-recover-newsletter-form .ff-message-success p {
	margin: 0;
}

body.sp-recover-site .sp-recover-newsletter-form .ff-message-success strong {
	display: block;
	margin-bottom: 2px;
	color: var(--sp-recover-ink);
	font-size: 15px;
	font-weight: 600;
}

@media (prefers-reduced-motion: no-preference) {

	body.sp-recover-site .sp-recover-newsletter-form .fluentform .text-danger,
	body.sp-recover-site .sp-recover-newsletter-form .ff-errors-in-stack .error {
		animation: sp-recover-nl-in 0.25s var(--sp-recover-ease) both;
	}

	body.sp-recover-site .sp-recover-newsletter-form .ff-message-success {
		animation: sp-recover-nl-in 0.4s var(--sp-recover-ease) both;
	}

	body.sp-recover-site .sp-recover-newsletter-form .ff-message-success::before {
		animation: sp-recover-nl-pop 0.45s 0.1s var(--sp-recover-ease) both;
	}
}

@keyframes sp-recover-nl-in {

	from {
		opacity: 0;
		transform: translateY(-4px);
	}
}

@keyframes sp-recover-nl-pop {

	from {
		opacity: 0;
		transform: scale(0.6);
	}
}
/* stylelint-enable no-descending-specificity */