/* ==========================================================================
   LEAD DISTRIBUTION ENGINE — WordPress / industries chrome
   Scoped to body.lde-page. Loads after css/styles.css (the scoped design build).
   ========================================================================== */

html {
	scroll-behavior: smooth;
}

body.lde-page {
	--lsq-header-h: 88px; /* measured from #header by lde-wp.js */
	background: #FFFFFF;
}

/* Enfold sets overflow hidden on html/body (base.css) and #wrap_all (grid.css),
   which breaks position:sticky (the method card stack and FAQ heading).
   clip hides horizontal overflow without creating a scroll container.
   (This file only loads on this template, so the html rule is safe.) */
html,
body.lde-page,
body.lde-page #wrap_all {
	overflow-x: hidden;
	overflow-x: clip !important;
	overflow-y: visible !important;
}

body.lde-page #main,
body.lde-page #main .container_wrap {
	background: transparent;
}

body.lde-page #main {
	padding: 0;
	margin: 0;
}

/* The industries header is fixed; start the page below it. */


/* In-page links (#how, #demo, #faq) land below the fixed header. */
body.lde-page .lde-main [id] {
	scroll-margin-top: calc(var(--lsq-header-h, 88px) + 16px);
}

/* Sticky offsets were set for the product's own top bar; tie them to the LSQ header. */
body.lde-page :where(.lde-main) .mcard {
	top: calc(var(--lsq-header-h, 88px) + 8px + var(--i) * 22px);
}

body.lde-page :where(.lde-main) .faq-grid .sec-head {
	top: calc(var(--lsq-header-h, 88px) + 52px);
}

@media (max-width: 900px) {
	body.lde-page :where(.lde-main) .mcard {
		top: calc(var(--lsq-header-h, 88px) + 8px + var(--i) * 12px);
	}
}

/* Enfold underlines links on hover; the design never does. */
body.lde-page .lde-main a:hover,
body.lde-page .lde-main a:focus,
body.lde-page .lde-main a:visited {
	text-decoration: none;
}

/* Keep LSQ mega-menu overlays above the page. */
body.lde-page.av-menu-overlay-active .lde-main {
	position: relative;
	z-index: 0;
}

/* generated: restore LDE values over the child theme's !important heading and strong rules */
#top.lde-page :where(.lde-main) :where(strong, b) { color: inherit !important; }
#top.lde-page :where(.lde-main) .h2 { line-height:1.06 !important; }
#top.lde-page :where(.lde-main) .pill b { color:#fff !important; }
#top.lde-page :where(.lde-main) h2.hero-h { line-height:1 !important; }
#top.lde-page :where(.lde-main) h2.hero-h {
    line-height: 1 !important;
    margin-top: 28px;
    max-width: 1000px;
    font-size: clamp(42px, 7vw, 84px);
    font-weight: 800;
    letter-spacing: -.045em;
    color: var(--ink);
    text-wrap: balance;
}
#top.lde-page :where(.lde-main) .side .ws b { color:var(--ink) !important; }
#top.lde-page :where(.lde-main) .ehead b { color:var(--ink) !important; }
#top.lde-page :where(.lde-main) .efoot b { color:var(--ink) !important; }
#top.lde-page :where(.lde-main) .rep .who b { color:var(--ink) !important; }
#top.lde-page :where(.lde-main) .cell h3 { line-height:1.3 !important; }
#top.lde-page :where(.lde-main) .console-rec b { color:var(--ink) !important; }
#top.lde-page :where(.lde-main) .step b { color:var(--ink) !important; }
#top.lde-page :where(.lde-main) .console-f b { color:var(--ink) !important; }
#top.lde-page :where(.lde-main) .wt .row b { color:var(--ink) !important; }
#top.lde-page :where(.lde-main) .checks strong { color:var(--ink) !important; }
#top.lde-page :where(.lde-main) .cta h2 { line-height:1.02 !important; }
#top.lde-page :where(.lde-main) .sla-time b { color:var(--ink) !important; }
#top.lde-page :where(.lde-main) .sla-rep .who b { color:var(--ink) !important; }
#top.lde-page :where(.lde-main) .wt-row b { color:var(--ink) !important; }
#top.lde-page :where(.lde-main) .conf b { color:var(--ink) !important; }
#top.lde-page :where(.lde-main) .tt-tx b { color:color-mix(in srgb, var(--sales-tint) 72%, transparent) !important; }
#top.lde-page :where(.lde-main) .tt.on .tt-tx b { color:#fff !important; }
#top.lde-page :where(.lde-main) .mcard h3 { line-height:1.1 !important; }
#top.lde-page :where(.lde-main) .mc-by b { color:#fff !important; }
#top.lde-page :where(.lde-main) .tour-fallback b { color:var(--ink) !important; }

/* ==========================================================================
   CTA lead form (same WordPress form as Notespark: Finflo_Lead_Capture +
   ff-lead-form.js), styled for the blue CTA band. #top beats Enfold's inputs.
   ========================================================================== */
body.lde-page .lde-main .cta-form {
	width: 100%;
	max-width: 720px;
	margin: 8px auto 0;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

body.lde-page .lde-main .cf-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

body.lde-page .lde-main .cf-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

body.lde-page .lde-main .cf-field label {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .01em;
	color: rgba(255, 255, 255, .82);
}

#top.lde-page .lde-main .cta-form input,
#top.lde-page .lde-main .cta-form textarea {
	width: 100%;
	margin: 0;
	font-family: var(--font);
	font-size: 15px;
	line-height: 1.4;
	color: #fff;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: 10px;
	padding: 14px 16px;
	box-shadow: none;
	transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}

#top.lde-page .lde-main .cta-form textarea {
	resize: vertical;
	min-height: 120px;
	line-height: 1.55;
}

#top.lde-page .lde-main .cta-form input::placeholder,
#top.lde-page .lde-main .cta-form textarea::placeholder {
	color: rgba(255, 255, 255, .5);
}

#top.lde-page .lde-main .cta-form input:hover,
#top.lde-page .lde-main .cta-form textarea:hover {
	border-color: rgba(255, 255, 255, .4);
}

#top.lde-page .lde-main .cta-form input:focus,
#top.lde-page .lde-main .cta-form textarea:focus {
	outline: none;
	background: rgba(255, 255, 255, .14);
	border-color: #fff;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .2);
}

/* keep autofill from painting its own pale background over the blue band */
#top.lde-page .lde-main .cta-form input:-webkit-autofill,
#top.lde-page .lde-main .cta-form input:-webkit-autofill:focus {
	-webkit-text-fill-color: #fff;
	-webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, .12) inset;
	transition: background-color 9999s ease-in-out 0s;
}

/* phone: fixed +91 prefix sitting inside the field */
body.lde-page .lde-main .cf-phone {
	position: relative;
	display: flex;
	align-items: center;
}

body.lde-page .lde-main .cf-cc {
	position: absolute;
	left: 16px;
	z-index: 1;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	pointer-events: none;
}

#top.lde-page .lde-main .cta-form .cf-phone input {
	padding-left: 56px;
}

/* white button on the blue band, like the design's .btn-white */
body.lde-page .lde-main .cf-submit {
	margin-top: 6px;
	width: 100%;
	height: 52px;
	padding: 0 24px;
	border: 0;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--font);
	font-size: 16px;
	font-weight: 600;
	color: var(--blue);
	background: #fff;
	cursor: pointer;
	box-shadow: 0 14px 34px -14px rgba(10, 10, 10, .45);
	transition: transform .2s var(--ease), background .2s var(--ease);
}

body.lde-page .lde-main .cf-submit:hover {
	background: var(--sales-tint);
	transform: translateY(-1px);
}

body.lde-page .lde-main .cf-submit:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

body.lde-page .lde-main .cf-submit:disabled {
	opacity: .65;
	cursor: not-allowed;
	transform: none;
}

body.lde-page .lde-main .ff-arrow {
	font-style: normal;
	transition: transform .2s var(--ease);
}

body.lde-page .lde-main .cf-submit:hover .ff-arrow {
	transform: translateX(3px);
}

body.lde-page .lde-main .cf-note {
	margin: 2px 0 0;
	text-align: center;
	font-size: 13px;
	color: rgba(255, 255, 255, .7);
}

/* Finflo capture states (ff-lead-form.js) */
body.lde-page .lde-main .ff-field-err {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
	color: #FFD6D6;
}

#top.lde-page .lde-main .ff-field.is-invalid input,
#top.lde-page .lde-main .ff-field.is-invalid textarea,
#top.lde-page .lde-main .ff-field input.ff-invalid,
#top.lde-page .lde-main .ff-field textarea.ff-invalid {
	border-color: #FF9B9B;
	background: rgba(255, 107, 107, .16);
}

body.lde-page .lde-main .ff-submit__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

body.lde-page .lde-main .ff-submit__spin {
	display: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid rgba(0, 64, 223, .2);
	border-top-color: var(--blue);
	animation: lde-form-spin .7s linear infinite;
}

body.lde-page .lde-main .ff-form.is-sending .ff-submit__spin {
	display: inline-block;
}

body.lde-page .lde-main .ff-form.is-sending .ff-submit__label {
	opacity: .7;
}

@keyframes lde-form-spin {
	to {
		transform: rotate(360deg);
	}
}

body.lde-page .lde-main .ff-ok,
body.lde-page .lde-main .ff-err {
	margin: 0;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
}

body.lde-page .lde-main .ff-ok {
	color: #C9F7D8;
}

body.lde-page .lde-main .ff-err {
	color: #FFD6D6;
}

body.lde-page .lde-main .ff-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

@media (max-width: 640px) {
	body.lde-page .lde-main .cf-row {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.lde-page .lde-main .cf-submit,
	body.lde-page .lde-main .ff-arrow {
		transition: none;
	}

	body.lde-page .lde-main .cf-submit:hover {
		transform: none;
	}
}

/* ==========================================================================
   Hero tour tabs ≤900px — the row scrolls sideways (lde-wp.js keeps the active
   tab centred). Left/right arrows sit over the row's ends and step through
   the tabs; each hides when there is nothing further that way.
   ========================================================================== */
body.lde-page .lde-main .lde-tt-arrow {
	display: none;
}

@media (max-width: 900px) {
	body.lde-page .lde-main .tour-tabs {
		scroll-padding-inline: 36px;
	}

	body.lde-page .lde-main .lde-tt-arrow {
		position: sticky;
		z-index: 3;
		flex: 0 0 34px;
		align-self: stretch;
		display: grid;
		place-items: center;
		color: #fff;
		cursor: pointer;
		transition: opacity .2s var(--ease);
	}

	body.lde-page .lde-main .lde-tt-arrow.prev {
		left: -14px;
		margin-right: -34px;
		border-radius: 11px 0 0 11px;
		background: linear-gradient(90deg, #0A0A0A 45%, rgba(10, 10, 10, 0));
	}

	body.lde-page .lde-main .lde-tt-arrow.next {
		right: -14px;
		margin-left: -34px;
		border-radius: 0 11px 11px 0;
		background: linear-gradient(270deg, #0A0A0A 45%, rgba(10, 10, 10, 0));
	}

	body.lde-page .lde-main .lde-tt-arrow.next svg {
		transform: scaleX(-1);
	}

	body.lde-page .lde-main .lde-tt-arrow svg {
		width: 16px;
		height: 16px;
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	body.lde-page .lde-main .lde-tt-arrow.is-hidden {
		opacity: 0;
		pointer-events: none;
	}

	body.lde-page .lde-main .lde-tt-arrow:focus-visible {
		outline: 2px solid var(--sales-tint);
		outline-offset: -3px;
	}
	section.sec .cell:nth-child(1), 
	section.sec .cell:nth-child(3),
	section.sec .role:nth-child(1), 
	section.sec .role:nth-child(3) {
    padding-left: 0;
}
}
@media (max-width: 600px) {
.frame h2, .frame p {
    text-align: left;
}
}
/* ==========================================================================
   Hero tour tabs ≤900px: sticky at 70px while scrolling through the product
   window (stops at the end of .tour), and edge to edge while pinned.
   Smooth by design: the row is always full width in layout (negative margins
   + matching padding keep the tabs where they were); the inset rounded box is
   drawn with clip-path, and pinning only animates the clip open — no reflow.
   lde-wp.js sets --tt-inset-l/-r (gap to the screen edges) and .is-stuck.
   The hero's overflow:hidden would stop sticky from working → clip.
   ========================================================================== */
@media (max-width: 900px) {
	body.lde-page :where(.lde-main) .hero {
		overflow: hidden;
		overflow: clip;
	}

	body.lde-page :where(.lde-main) .tour-tabs {
		position: sticky;
		top: 70px;
		z-index: 6;
		margin-left: calc(-1 * var(--tt-inset-l, 0px));
		margin-right: calc(-1 * var(--tt-inset-r, 0px));
		padding-left: calc(var(--tt-inset-l, 0px) + 5px);
		padding-right: calc(var(--tt-inset-r, 0px) + 5px);
		scroll-padding-inline: calc(var(--tt-inset-l, 0px) + 36px);
		border: 0;
		border-radius: 0;
		/* dark (not a white tint): same look as the old 6% white over the hero, and the
		   fade to the pinned bar only passes through dark colours — never whitish
		   over the white product window */
		background-color: rgba(24, 24, 24, .9);
		clip-path: inset(0 var(--tt-inset-r, 0px) 0 var(--tt-inset-l, 0px) round 16px);
		transition: clip-path .35s cubic-bezier(.2, .8, .2, 1), background-color .35s cubic-bezier(.2, .8, .2, 1);
	}

	/* pinned: clip opens to the screen edges (bottom left open for the shadow) */
	body.lde-page :where(.lde-main) .tour-tabs.is-stuck {
		background-color: #0A0A0A; /* solid: nothing from the white window shows through */
		clip-path: inset(0 0 -24px 0 round 0);
		box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .8);
	}

	/* arrows sit on the clip edges and glide out to the screen edges when pinned.
	   Sticky offsets inside a scroller are measured from inside its padding
	   (inset + 5px), so each offset subtracts that padding:
	   unpinned edge = inset − padding = −5px; pinned edge = 0 − padding.
	   The −5px block margins stretch them over the row's top/bottom padding. */
	body.lde-page :where(.lde-main) .tour-tabs .lde-tt-arrow {
		margin-top: -5px;
		margin-bottom: -5px;
	}

	body.lde-page :where(.lde-main) .tour-tabs .lde-tt-arrow.prev {
		left: -5px;
		transition: left .35s cubic-bezier(.2, .8, .2, 1), opacity .2s;
	}

	body.lde-page :where(.lde-main) .tour-tabs .lde-tt-arrow.next {
		right: -5px;
		transition: right .35s cubic-bezier(.2, .8, .2, 1), opacity .2s;
	}

	body.lde-page :where(.lde-main) .tour-tabs.is-stuck .lde-tt-arrow.prev {
		left: calc(-1 * (var(--tt-inset-l, 0px) + 5px));
		border-radius: 0;
	}

	body.lde-page :where(.lde-main) .tour-tabs.is-stuck .lde-tt-arrow.next {
		right: calc(-1 * (var(--tt-inset-r, 0px) + 5px));
		border-radius: 0;
	}

	@media (prefers-reduced-motion: reduce) {
		body.lde-page :where(.lde-main) .tour-tabs,
		body.lde-page :where(.lde-main) .tour-tabs .lde-tt-arrow {
			transition: none;
		}
	}
}

/* ==========================================================================
   Hero product window ≤900px — Compact (about 550px with the tabs, was ~1,110px).
   Phone-only trims: no app nav row, no activity log, three reps in step 1.
   Each step is laid out at 560px and scaled to the window width, like the
   desktop zoom; lde-wp.js sets --lde-s and the stage height (620 × scale),
   so every step has the same height and the page never jumps.
   `scale` (not transform) so it doesn't fight the step entrance animation.
   ========================================================================== */
@media (max-width: 900px) {
	body.lde-page .lde-main .tour .app-head,
	body.lde-page .lde-main .tour .log {
		display: none;
	}

	body.lde-page .lde-main .stages .rep:nth-child(n+4) {
		display: none;
	}

	body.lde-page .lde-main .stages {
		min-height: 0;
		overflow: hidden;
	}

	body.lde-page .lde-main .stages > .st {
		width: 560px;
		height: 620px;
		scale: var(--lde-s, .6);
		transform-origin: 0 0;
	}

	body.lde-page .lde-main .stages > .st > * {
		height: 100%;
	}

	/* the command stays on one line */
	body.lde-page .lde-main .ask .typed {
		min-width: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* ==========================================================================
   Hero tour ≥1200px (desktop) — D2 · Scaled 85%: 504px tall, was 636px.
   Each step is drawn at 85% (the design already does this at 901–1199px)
   in a 300px stage; content stays centred and nothing is cut on any step.
   The activity log shows its latest two lines (bottom-aligned so the newest
   line is the one visible) and the command bar is slimmer.
   `scale` (not transform) so it doesn't fight the step entrance animation.
   ========================================================================== */
@media (min-width: 1200px) {
	body.lde-page .lde-main .stages {
		height: 300px;
	}

	body.lde-page .lde-main .stages > .st {
		width: calc(100% / .85);
		height: calc(300px / .85);
		scale: .85;
		transform-origin: 0 0;
	}

	body.lde-page .lde-main .tour .log {
		height: 64px;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	body.lde-page .lde-main .tour .ask-wrap {
		padding-bottom: 14px;
	}

	body.lde-page .lde-main .tour .ask {
		padding: 9px 14px;
	}
}