.elementor-kit-3{--e-global-color-primary:#0EA371;--e-global-color-secondary:#0A0E14;--e-global-color-text:#0A0E14;--e-global-color-accent:#22C55E;--e-global-color-tg-primary-dk:#047857;--e-global-color-tg-primary-dp:#065F46;--e-global-color-tg-gold:#F59E0B;--e-global-color-tg-ink-soft:#1F2937;--e-global-color-tg-surface:#F9FAFB;--e-global-color-tg-surface-em:#ECFDF5;--e-global-color-tg-surface-wm:#F3F2ED;--e-global-color-tg-muted:#4B5563;--e-global-color-tg-muted-lt:#6B7280;--e-global-color-tg-border:#E5E7EB;--e-global-color-tg-border-em:#A7F3D0;--e-global-typography-primary-font-family:"Inter";--e-global-typography-primary-font-weight:800;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:500;color:#0A0E14;font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;font-size:18px;font-weight:400;line-height:1.65em;}.elementor-kit-3 button,.elementor-kit-3 input[type="button"],.elementor-kit-3 input[type="submit"],.elementor-kit-3 .elementor-button{background-color:#0EA371;font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;font-size:15px;font-weight:600;color:#FFFFFF;border-radius:10px 10px 10px 10px;}.elementor-kit-3 button:hover,.elementor-kit-3 button:focus,.elementor-kit-3 input[type="button"]:hover,.elementor-kit-3 input[type="button"]:focus,.elementor-kit-3 input[type="submit"]:hover,.elementor-kit-3 input[type="submit"]:focus,.elementor-kit-3 .elementor-button:hover,.elementor-kit-3 .elementor-button:focus{background-color:#22C55E;color:#FFFFFF;}.elementor-kit-3 e-page-transition{background-color:#FFBC7D;}.elementor-kit-3 a{color:#0EA371;}.elementor-kit-3 a:hover{color:#22C55E;}.elementor-kit-3 h1{color:#0A0E14;font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;font-weight:800;line-height:1.1em;}.elementor-kit-3 h2{color:#0A0E14;font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;font-weight:800;line-height:1.15em;}.elementor-kit-3 h3{color:#0A0E14;font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;font-weight:700;line-height:1.2em;}.elementor-kit-3 h4{color:#0A0E14;font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;font-weight:700;line-height:1.25em;}.elementor-kit-3 h5{color:#0A0E14;font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;font-weight:700;}.elementor-kit-3 h6{color:#0A0E14;font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;font-weight:700;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1240px;}.e-con{--container-max-width:1240px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-3{font-size:16px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ============================================================
   Tagestry global polish — SaaS-grade spacing, typography, nav
   ============================================================ */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body, body .elementor { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* Image safety: never bust layout with natural pixel sizes */
.elementor-widget-image img { max-width: 100% !important; height: auto !important; display: block; }
.elementor-widget-image a { display: inline-block; max-width: 100%; }

/* ============================================================
   Header — sticky white bar, flat 3-child layout, logo/nav/CTA
   ============================================================ */
#tagestry-header { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(180%) blur(8px); background: rgba(255,255,255,0.92) !important; align-items: center !important; min-height: 64px; }
#tagestry-header > .e-con-inner,
#tagestry-header > * { flex: 0 0 auto !important; width: auto !important; max-width: none !important; min-width: 0; }

/* All header children must vertically center, including the nav widget that
   contains the burger toggle. Without this the burger sat top-aligned against
   the row baseline. */
#tagestry-header > .elementor-element { align-self: center !important; }

/* Desktop nav — keep on one row, no wrapping */
.elementor-widget.tg-nav-nowrap .elementor-nav-menu,
.elementor-widget.tg-nav-nowrap .elementor-nav-menu > ul {
	flex-wrap: nowrap !important;
	white-space: nowrap;
}
.elementor-widget.tg-nav-nowrap .elementor-nav-menu .elementor-item { white-space: nowrap; }

/* ----- Mobile / tablet header (≤ 1024px) ----- */
@media (max-width: 1024px) {
	#tagestry-header { padding-top: 12px !important; padding-bottom: 12px !important; position: relative; }
	#tagestry-header.elementor-element {
		/* keep the sticky behaviour from the global rule, just need
		   position:relative inside the wrapper for the dropdown to anchor */
		position: sticky !important;
	}
	/* Anchor the dropdown to the entire header bar */
	#tagestry-header > .elementor-widget-nav-menu { position: static !important; }

	/* Burger button — proper square button, vertically centered, branded */
	#tagestry-header .elementor-menu-toggle {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 44px !important;
		height: 44px !important;
		padding: 0 !important;
		margin: 0 !important;
		border: 1px solid #E5E7EB !important;
		border-radius: 12px !important;
		background: #FFFFFF !important;
		color: #0A0E14 !important;
		transition: all .18s ease !important;
		cursor: pointer;
	}
	#tagestry-header .elementor-menu-toggle:hover,
	#tagestry-header .elementor-menu-toggle:focus-visible {
		background: #ECFDF5 !important;
		border-color: #A7F3D0 !important;
		color: #047857 !important;
	}
	#tagestry-header .elementor-menu-toggle i,
	#tagestry-header .elementor-menu-toggle svg {
		font-size: 22px !important;
		width: 22px !important;
		height: 22px !important;
		fill: currentColor !important;
		color: inherit !important;
	}
	#tagestry-header .elementor-menu-toggle.elementor-active {
		background: #0A0E14 !important;
		border-color: #0A0E14 !important;
		color: #FFFFFF !important;
	}

	/* Dropdown — overlay below the header instead of pushing the whole bar
	   downward. position:absolute against the relatively-positioned header
	   means the content under the header stays put when the menu opens. */
	#tagestry-header .elementor-nav-menu--dropdown {
		position: absolute !important;
		top: calc(100% + 1px) !important;
		left: 0 !important;
		right: 0 !important;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 10px !important;
		background: #FFFFFF !important;
		border-top: 1px solid #E5E7EB !important;
		border-bottom: 1px solid #E5E7EB !important;
		box-shadow: 0 24px 60px rgba(14,17,22,0.16) !important;
		z-index: 49 !important;
		max-height: calc(100vh - 76px);
		overflow-y: auto;
	}
	#tagestry-header .elementor-nav-menu--dropdown ul,
	#tagestry-header .elementor-nav-menu--dropdown li { background: transparent !important; }

	/* Menu items — proper mobile-app spacing, generous tap targets */
	#tagestry-header .elementor-nav-menu--dropdown .elementor-item {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		padding: 16px 18px !important;
		font-family: Inter, system-ui, sans-serif !important;
		font-size: 17px !important;
		font-weight: 600 !important;
		line-height: 1.3 !important;
		color: #0A0E14 !important;
		background: transparent !important;
		border-radius: 10px !important;
		text-decoration: none !important;
		transition: all .15s ease !important;
		border: 0 !important;
	}
	#tagestry-header .elementor-nav-menu--dropdown .elementor-item:hover,
	#tagestry-header .elementor-nav-menu--dropdown .elementor-item:focus,
	#tagestry-header .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
		background: #ECFDF5 !important;
		color: #047857 !important;
	}
	#tagestry-header .elementor-nav-menu--dropdown .elementor-item::after,
	#tagestry-header .elementor-nav-menu--dropdown .elementor-item::before { display: none !important; }

	/* Subtle dividers between items */
	#tagestry-header .elementor-nav-menu--dropdown li:not(:last-child) .elementor-item {
		position: relative;
	}
	#tagestry-header .elementor-nav-menu--dropdown li:not(:last-child)::after {
		content: "";
		display: block;
		height: 1px;
		margin: 0 18px;
		background: #F3F4F6;
	}

	/* Logo gets a touch tighter on phone */
	#tagestry-header .tg-header-logo img { max-width: 130px !important; }

	/* CTA: shrink it to fit alongside the burger; stays visible until the
	   really tight breakpoint below */
	#tagestry-header .tg-header-cta .elementor-button {
		padding: 10px 14px !important;
		font-size: 13px !important;
		letter-spacing: 0 !important;
		border-radius: 10px !important;
	}
	#tagestry-header .tg-header-cta .elementor-button > span > i,
	#tagestry-header .tg-header-cta .elementor-button > span > svg { display: none !important; }
}

/* Tighter than 460px: hide the inline CTA so logo+burger fit comfortably; the
   dropdown still surfaces every page including Request a Demo via in-page CTAs. */
@media (max-width: 460px) {
	#tagestry-header { padding-left: 14px !important; padding-right: 14px !important; gap: 8px !important; }
	#tagestry-header .tg-header-logo img { max-width: 120px !important; }
	#tagestry-header .tg-header-cta { display: none !important; }
}
@media (max-width: 360px) {
	#tagestry-header .tg-header-logo img { max-width: 108px !important; }
	#tagestry-header .elementor-menu-toggle { width: 40px !important; height: 40px !important; }
}

/* Footer link hover */
.tg-footer-links a { transition: color .2s ease; }
.tg-footer-links a:hover { color: #0EA371 !important; }

/* Buttons — smooth lift on hover, outline-light variant for dark sections */
.elementor-button { transition: all 220ms ease; letter-spacing: 0.2px; }
.elementor-button:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(14,163,113,0.28); }
.tg-btn-outline-light .elementor-button,
.elementor-widget .tg-btn-outline-light { background: transparent !important; color: #FFFFFF !important; border: 2px solid rgba(255,255,255,0.6) !important; }
.tg-btn-outline-light .elementor-button:hover { background: rgba(255,255,255,0.12) !important; border-color: #FFFFFF !important; box-shadow: 0 10px 30px rgba(0,0,0,0.24); }

/* Cards */
.tg-feature-card { transition: all .28s ease; }
.tg-feature-card:hover { transform: translateY(-3px); box-shadow: 0 22px 60px rgba(14,17,22,0.08); border-color: #A7F3D0 !important; }
.tg-step { transition: all .28s ease; }
.tg-step:hover { transform: translateY(-2px); box-shadow: 0 18px 48px rgba(14,17,22,0.06); }

/* State grid responsive cap — keep chips legible on narrow mobile */
@media (max-width: 480px) { .tg-state-grid { grid-template-columns: 1fr !important; } }
@media (min-width: 481px) and (max-width: 640px) { .tg-state-grid { grid-template-columns: 1fr 1fr !important; } }

/* Big display headings breathe with letter-spacing tightening */
h1.elementor-heading-title { letter-spacing: -1.5px !important; }
h2.elementor-heading-title { letter-spacing: -0.8px !important; }

/* Hero gradient text helper */
.tg-hero-gradient { background: linear-gradient(135deg, #0EA371 0%, #047857 50%, #065F46 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Section dividers: thin emerald rule */
.tg-rule { height: 3px; width: 48px; background: linear-gradient(90deg, #0EA371, #22C55E); border-radius: 2px; }

/* Gradient hero background blobs */
.tg-hero-bg {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(60% 60% at 20% 10%, rgba(14,163,113,0.14) 0%, rgba(14,163,113,0) 60%),
		radial-gradient(50% 50% at 90% 20%, rgba(34,197,94,0.12) 0%, rgba(34,197,94,0) 60%),
		radial-gradient(70% 60% at 50% 100%, rgba(6,95,70,0.06) 0%, rgba(6,95,70,0) 60%),
		#FFFFFF;
}
.tg-hero-bg::before {
	content: "";
	position: absolute; inset: 0;
	background-image:
		linear-gradient(rgba(14,17,22,0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(14,17,22,0.04) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
	pointer-events: none;
	z-index: 0;
}
.tg-hero-bg > * { position: relative; z-index: 1; }

/* Stat cards vertical alignment inside a row */
.tg-stat { padding: 6px 0; }

/* FAQ — see tg_faq() helper for the in-card rules */
.tg-faq summary:hover .tg-faq-plus { transform: scale(1.05); }

/* Generous section rhythm */
section.elementor-section, .elementor-section.elementor-section-boxed { padding-top: clamp(64px, 8vw, 110px); padding-bottom: clamp(64px, 8vw, 110px); }

/* Compare block responsive */
.tg-compare > div { box-sizing: border-box; }

/* Logo cloud desaturated + uniform height */
.tg-logo-cloud img { max-height: 32px; width: auto; filter: grayscale(1) opacity(0.65); transition: filter .2s ease; }
.tg-logo-cloud img:hover { filter: grayscale(0) opacity(1); }

/* Selection color matches brand */
::selection { background: rgba(14,163,113,0.22); color: #0A0E14; }

/* Hero video — respect the row layout, fall back to flush stack on mobile */
.tg-video { display: block; }
.tg-video video { background: #0A0E14; }
@media (max-width: 767px) {
	.tg-video { max-width: 100%; }
	.tg-video > div { aspect-ratio: 16/10 !important; }
}

/* Hero shell — wider than the standard 1240px boxed grid so the headline and
   demo video both have real estate. Capped at 1720px so it stretches on big
   monitors without overstretching on ultra-wide. Tight side gutters (16px
   desktop, 24px tablet, 20px mobile) maximize usable width. */
.tg-hero-inner { max-width: 1720px !important; margin-left: auto !important; margin-right: auto !important; width: 100% !important; }
@media (min-width: 481px) and (max-width: 1024px) {
	.tg-hero-inner { padding-left: 24px !important; padding-right: 24px !important; }
}

/* Hero columns — at desktop widths they sit side-by-side via Elementor's
   --width custom property (46% / 50%). Elementor also sets
   `max-width: min(100%, var(--width))` on .e-con, which CAPS the column width
   even if we override `width`. So we have to reset --width itself on mobile
   (this is the property the max-width formula reads from). */
@media (max-width: 1024px) {
	.tg-hero-col {
		--width: 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
	}
	.tg-hero-col-copy  { order: 1; }
	.tg-hero-col-video { order: 2; }
}

/* Video widget chain: Elementor's optimized markup leaves the html-widget
   wrapper at height:0 in some flex contexts, so the figure inside (which
   *is* sized correctly via padding-bottom 62.5%) overflows and intersects
   with the next sibling (the hero image strip). Force the widget to take
   its content height. Applies on all viewports because the bug shows up
   wherever .tg-video is used. */
.tg-hero-col-video,
.tg-hero-col-video > .elementor-widget,
.tg-hero-col-video .elementor-widget-html,
.tg-hero-col-video .elementor-widget-container {
	min-height: 0;
	height: auto !important;
	align-self: stretch !important;
}
.tg-video { display: block; width: 100%; }
.tg-video, .tg-video > div { height: auto; }

/* Hero image strip — 4-up on desktop, 2x2 on tablet, single column on phone */
.tg-hero-strip-tile:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(14,17,22,0.10) !important; }
@media (max-width: 1024px) {
	.tg-hero-strip { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 480px) {
	.tg-hero-strip { grid-template-columns: 1fr !important; }
}
@media (max-width: 767px) {
	.tg-hero-inner { padding-left: 20px !important; padding-right: 20px !important; }
}

/* Mobile — hero + final-CTA buttons stack full-width so they never overflow */
@media (max-width: 420px) {
	.tg-hero-bg .elementor-widget-button,
	.tg-final-cta .elementor-widget-button {
		width: 100% !important;
		max-width: 100% !important;
	}
	.tg-hero-bg .elementor-widget-button .elementor-button,
	.tg-final-cta .elementor-widget-button .elementor-button {
		width: 100% !important;
		justify-content: center !important;
		padding: 14px 18px !important;
	}
	/* Stat cards go full-width on smallest screens for legibility */
	.tg-stat { text-align: left !important; }
}

/* Tablet and mobile — feature/step/deploy rows wrap gracefully */
@media (max-width: 767px) {
	.tg-feature-card,
	.tg-step,
	.tg-deploy-card { padding: 24px 22px !important; }
	h1.elementor-heading-title { letter-spacing: -0.8px !important; }
}/* End custom CSS */