/* Custom CSS for TrackAxo Website */

/* Screen-reader-only heading (footer landmark, etc.) */
.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* --------------------------------------------------------------------------
   Mobile / narrow viewports (≤991px)
   - WOW.js sets .wow to visibility:hidden until elements enter the viewport.
     With a narrow viewport but a desktop user-agent (Chrome device toolbar,
     some tablets), WOW still runs and content below the fold can stay hidden.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
	.wow {
		visibility: visible !important;
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
}

/* Skyblue theme maps .bg--scroll → background-attachment: fixed (inverted names). Fixed backgrounds are a common iOS/WKWebView scroll crash / reload trigger. */
@media (pointer: coarse), (max-width: 1023px) {
	.bg--scroll {
		background-attachment: scroll !important;
	}
}

/* Mobile header logo: link wraps image (was plain span) */
.wsmobileheader .smllogo a {
	display: inline-block;
	line-height: 0;
	text-decoration: none;
	color: inherit;
}

/* --------------------------------------------------------------------------
   Inner pages: match home #hero-17 top spacing (fixed header offset + padding)
   - Home mobile: .hero-section margin-top 80px + #hero-17 padding-top 30px
   - Theme inner-page-hero used 80px + 80px → content started much lower.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991.98px) {
	.inner-page-hero,
	.page-hero-section-overlay {
		margin-top: 80px !important;
		padding-top: 80px !important;
	}

	#page #comp-table.pricing-section {
		margin-top: 80px !important;
		padding-top: 80px !important;
	}
}

@media (max-width: 767.98px) {
	.inner-page-hero,
	.page-hero-section-overlay {
		margin-top: 80px !important;
		padding-top: 30px !important;
	}

	/* pricing.html — first section uses utility classes, not inner-page-hero */
	#page #comp-table.pricing-section {
		margin-top: 80px !important;
		padding-top: 30px !important;
	}
}

/* --------------------------------------------------------------------------
   Feature module pages — oversized product shots: match index #hero-17 on mobile
   - Top hero: section.ct-01.inner-page-hero
   - Sales “Lead pipeline and CRM relations”: #sales-configuration
   - Project “KPIs, charts, and your task list in one view”: #project-dashboard
   - HR “Employee management”: #salaries-management
   - Finance “Detailed business analysis”: #tax-management
   (see index.html: #hero-17 .hero-grid-wrapper / .hero-single-image-wrap / #hero-main-image)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
	section.ct-01.inner-page-hero > .container > .row > .col-md-6 .img-block img.feature-hero-shot,
	section#sales-configuration.features-section .img-block img.feature-hero-shot,
	section#project-dashboard.features-section .img-block img.feature-hero-shot,
	section#salaries-management.features-section .img-block img.feature-hero-shot,
	section#tax-management .img-block img.feature-hero-shot {
		max-width: 200%;
	}
}

@media (max-width: 991.98px) {
	section.ct-01.inner-page-hero > .container > .row > .col-md-6 .img-block,
	section#sales-configuration.features-section .img-block,
	section#project-dashboard.features-section .img-block,
	section#salaries-management.features-section .img-block,
	section#tax-management .img-block {
		margin-top: 15px !important;
		margin-bottom: 10px !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		overflow: hidden;
		border-radius: 12px;
	}

	section.ct-01.inner-page-hero > .container > .row > .col-md-6 .img-block img.feature-hero-shot,
	section#sales-configuration.features-section .img-block img.feature-hero-shot,
	section#project-dashboard.features-section .img-block img.feature-hero-shot,
	section#salaries-management.features-section .img-block img.feature-hero-shot,
	section#tax-management .img-block img.feature-hero-shot {
		max-width: 100% !important;
		width: 100% !important;
		height: auto !important;
		display: block !important;
		margin: 0 auto !important;
	}
}

/* Index #hero-17 “Get started free”: black fill (.btn--black), theme .btn size, outline hover (.hover--tra-black). */

/* faqs.html — category tab pills smaller on narrow viewports (theme defaults are tall + 45px icons) */
@media (max-width: 991.98px) {
	#faqs-4 .tabs-nav .tabs-1 {
		margin-bottom: 1.25rem !important;
	}

	#faqs-4 .tabs-1 li.tab-link {
		padding: 10px 14px !important;
		margin: 0 0 10px !important;
		border-radius: 12px !important;
	}

	#faqs-4 .tabs-1 li.tab-link p {
		margin-top: 8px !important;
		font-size: 0.8125rem !important;
		line-height: 1.25 !important;
	}

	#faqs-4 .tabs-1 li .tab-link-ico [class*="flaticon-"]:before,
	#faqs-4 .tabs-1 li .tab-link-ico [class*="flaticon-"]:after {
		font-size: 1.625rem !important;
	}

	#faqs-4 .tabs-1 li.current {
		margin-bottom: 12px !important;
	}
}

/* Header alignment with page content — lg+ only.
   On mobile, flex + !important on .wsmenu-list breaks the slide-out (350px panel, block layout, full-width CTA). */
@media (min-width: 992px) {
#header .wsmainfull.menu .wsmainwp.clearfix {
	max-width: 1320px !important;
	margin: 0 auto !important;
	padding: 0 15px !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	position: relative !important;
}

#header .wsmainfull.menu .wsmainwp.clearfix::before,
#header .wsmainfull.menu .wsmainwp.clearfix::after {
	display: none !important;
	content: none !important;
}

#header .wsmainfull.menu .wsmainwp.clearfix .desktoplogo {
	float: none !important;
	order: 1 !important;
	margin: 0 !important;
	padding: 0 !important;
}

#header .wsmainfull.menu .wsmainwp.clearfix .wsmenu {
	float: none !important;
	order: 2 !important;
	margin: 0 !important;
	padding: 0 !important;
}

#header .wsmainfull.menu .wsmainwp.clearfix .wsmenu .wsmenu-list {
	display: flex !important;
	justify-content: flex-end !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
}

#header .wsmainfull.menu .wsmainwp.clearfix .wsmenu .wsmenu-list > li {
	float: none !important;
	display: block !important;
	}

	/* Simple nav rows only (single link). Megamenu li has a + .wsmegamenu — do not flex those. */
	#header .wsmainfull.menu .wsmainwp.clearfix .wsmenu .wsmenu-list > li.nl-simple {
		display: flex !important;
		align-items: center !important;
	}

	/* Theme uses margin-top on header .btn for old float layout; flex row + tall h-links misaligns the CTA */
	#header .wsmenu > .wsmenu-list > li > a.btn {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
}

/*
 * Mobile slide-out (~75% viewport like reference): block list + full-width CTA.
 * Panel width must match: .wsmenu-list width, negative margin (closed), .overlapblackbg,
 * body.wsactive .wsmobileheader / .wsmenucontainer (theme defaults to 350px).
 */
@media (max-width: 991.98px) {
	#header .wsmenu > .wsmenu-list {
		display: block !important;
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
		align-items: stretch !important;
		width: min(75vw, 420px) !important;
		max-width: min(75vw, 420px) !important;
		margin-right: calc(0px - min(75vw, 420px)) !important;
	}

	body.wsactive #header .wsmenu > .wsmenu-list {
		margin-right: 0 !important;
	}

	#header .wsmenu .overlapblackbg {
		width: calc(100% - min(75vw, 420px)) !important;
	}

	body.wsactive .wsmobileheader {
		margin-right: min(75vw, 420px) !important;
	}

	body.wsactive .wsmenucontainer {
		margin-right: min(75vw, 420px) !important;
	}

	#header .wsmenu > .wsmenu-list > li {
		width: 100% !important;
		float: none !important;
	}

	#header .wsmenu > .wsmenu-list > li > a.btn.last-link {
		display: block !important;
		width: calc(100% - 34px) !important;
		max-width: 100% !important;
		margin-left: 17px !important;
		margin-right: 17px !important;
		box-sizing: border-box !important;
		text-align: center !important;
	}
}

/* Standardize all headings to match "One software to replace all softwares" */
h1, h2, h3, h4, h5, h6 {
	color: #000 !important;
}

/* Banner CTA on dark overlay — headline must stay white */
#banner-1 .banner-1-txt h2 {
	color: #fff !important;
}

/* Main section headings - slightly smaller across all pages (h2/h3 kept for SEO) */
h2.s-40,
h3.s-40 {
	font-size: 2rem !important;   /* was 2.5rem/40px */
	color: #000 !important;
	font-weight: 700 !important;
}
h2.s-50,
h2.s-46 {
	font-size: 2.2rem !important; /* was 3.125rem/50px */
	color: #000 !important;
	font-weight: 700 !important;
}

/* Sub-headings (h5, h6) - keep smaller but same color */
h5.s-24,
h6.s-22,
h6.s-14 {
	color: #000 !important;
}

/* Gray background for sections (Complete Business Management Suite, Mobile App) */
#features-2.section-bg-gray,
#lnk-1.section-bg-gray {
	background-color: #f4f4f9;
}

/* Questions & Answers - same accordion UI as faqs.html; answers in HTML for SEO */
#features-11 {
	background-color: #fff;
}
#features-11 .accordion-thumb h5 {
	font-size: 1rem !important;
	font-weight: 600 !important;
	color: #000;
	line-height: 1.4;
	margin-bottom: 0;
}
#features-11 .accordion-panel p {
	font-size: 0.95rem !important;
	line-height: 1.6 !important;
	color: #666 !important;
	font-weight: 400 !important;
}

/* Everything you need in one platform - force smaller text in small boxes (override inherit) */
#feature-grid .feature-grid-item .feature-label {
	font-size: 0.65rem !important;
}
@media (max-width: 768px) {
	#feature-grid .feature-grid-item .feature-label {
		font-size: 0.6rem !important;
	}
}
@media (max-width: 480px) {
	#feature-grid .feature-grid-item .feature-label {
		font-size: 0.55rem !important;
	}
}

/* Have more questions - simple text line (no grey box) */
.more-questions-simple {
	margin: 0;
	font-size: 0.95rem;
	color: #666;
	text-align: center;
}
.more-questions-simple a {
	color: #1680fb;
	text-decoration: none;
	font-weight: 500;
}
.more-questions-simple a:hover {
	text-decoration: underline;
}

/* Banner-3 CTA: clean, simple, attractive */
#banner-3.banner-3-trackaxo {
	padding: 60px 0 70px;
}
#banner-3.banner-3-trackaxo .banner-3-wrapper {
	background: transparent;
	border-radius: 16px;
	padding: 56px 32px 52px;
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
}
#banner-3.banner-3-trackaxo .banner-3-title {
	font-size: 1.75rem;
	font-weight: 700;
	color: #000;
	margin: 0 0 12px;
	line-height: 1.3;
	letter-spacing: -0.02em;
}
#banner-3.banner-3-trackaxo .banner-3-desc {
	font-size: 1rem;
	color: #3d3d3d;
	margin: 0 0 28px;
	line-height: 1.5;
}
/*
 * Banner-3 CTA: black fill like original hero (.btn--black), same size as theme .btn,
 * hover outline via .hover--tra-black. Explicit rules beat stray cached / link overrides.
 */
#banner-3.banner-3-trackaxo .banner-3-txt a.banner-3-cta.btn--black {
	color: #fff !important;
	background-color: #353f4f !important;
	border: 2px solid #353f4f !important;
	font-size: 1rem !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	padding: 0.9rem 1.8rem !important;
	border-radius: 4px !important;
	text-decoration: none !important;
	display: inline-block !important;
	box-sizing: border-box !important;
	transition: color 0.4s ease-in-out, background-color 0.4s ease-in-out, border-color 0.4s ease-in-out !important;
}

#banner-3.banner-3-trackaxo .banner-3-txt a.banner-3-cta.hover--tra-black:hover {
	color: #353f4f !important;
	background-color: transparent !important;
	border-color: #353f4f !important;
}

#banner-3.banner-3-trackaxo .banner-3-note {
	font-size: 0.875rem;
	color: #3d3d3d;
	margin: 20px 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
#banner-3.banner-3-trackaxo .banner-3-note .flaticon-check {
	font-size: 0.9em;
}
@media (max-width: 768px) {
	#banner-3.banner-3-trackaxo .banner-3-wrapper {
		padding: 40px 24px 36px;
	}
	#banner-3.banner-3-trackaxo .banner-3-title {
		font-size: 1.5rem;
	}
	#banner-3.banner-3-trackaxo .banner-3-desc {
		font-size: 0.95rem;
	}
}

/* Project dashboard / mobile-style feature list (same as index mobile app features) */
.mobile-app-features-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.mobile-feature-list-item {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 15px;
	background: #fff;
	border-radius: 12px;
	border: none;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.02);
	cursor: pointer;
	transition: all 0.3s ease;
	width: calc(50% - 6px);
	min-width: 200px;
}
.mobile-feature-list-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 4px 16px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
}
.mobile-feature-list-item.active {
	background: #eff6ff;
	box-shadow: 0 4px 16px rgba(59, 130, 246, 0.15), 0 0 0 1px rgba(59, 130, 246, 0.2);
}
.mobile-feature-icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: transparent;
}
.mobile-feature-icon span {
	font-size: 24px;
}
.mobile-feature-content {
	flex: 1;
	display: flex;
	flex-direction: column;
}
.mobile-feature-content h6 {
	margin: 0 0 4px 0;
	font-size: 0.85rem !important;
	line-height: 1.3 !important;
	font-weight: 600;
}
.mobile-feature-content p {
	margin: 0 !important;
	margin-top: 0 !important;
	font-size: 0.7rem !important;
	line-height: 1.4 !important;
}

/* Feature module pages — stacked “app style” cards: full width on small viewports
   (base rules use 50% width for two-column layout; on mobile that leaves narrow cards) */
@media (max-width: 991.98px) {
	.mobile-app-features-list {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 0;
	}
	.mobile-feature-list-item {
		width: 100%;
		min-width: 0;
		box-sizing: border-box;
		margin-bottom: 12px;
	}
	.mobile-app-features-list .mobile-feature-list-item:last-child {
		margin-bottom: 0;
	}
}

/* Colorful icons for all feature list sections (match Real-time Project Overview) */
.mobile-app-features-list .mobile-feature-list-item:nth-child(1) .mobile-feature-icon span,
.mobile-app-features-list .mobile-feature-list-item:nth-child(1) .mobile-feature-icon span:before { color: #667eea !important; }
.mobile-app-features-list .mobile-feature-list-item:nth-child(2) .mobile-feature-icon span,
.mobile-app-features-list .mobile-feature-list-item:nth-child(2) .mobile-feature-icon span:before { color: #f5576c !important; }
.mobile-app-features-list .mobile-feature-list-item:nth-child(3) .mobile-feature-icon span,
.mobile-app-features-list .mobile-feature-list-item:nth-child(3) .mobile-feature-icon span:before { color: #f59e0b !important; }
.mobile-app-features-list .mobile-feature-list-item:nth-child(4) .mobile-feature-icon span,
.mobile-app-features-list .mobile-feature-list-item:nth-child(4) .mobile-feature-icon span:before { color: #10b981 !important; }

/* Project dashboard feature icon colors (Real-time Project Overview – same palette by position) */
#project-dashboard .mobile-feature-list-item[data-feature="status"] .mobile-feature-icon .flaticon-bell:before { color: #f5576c !important; }
#project-dashboard .mobile-feature-list-item[data-feature="metrics"] .mobile-feature-icon .flaticon-pie-chart:before { color: #f59e0b !important; }
#project-dashboard .mobile-feature-list-item[data-feature="budget"] .mobile-feature-icon .flaticon-calendar:before { color: #10b981 !important; }
#project-dashboard .mobile-feature-list-item[data-feature="dashboard"] .mobile-feature-icon .flaticon-graphics:before { color: #667eea !important; }

/* Documentation page – original app-style layout (content switches on click) */
.docs-page--app-style {
	padding: 0;
	background: #fff;
}
.docs-page--app-style .docs-layout {
	display: flex;
	min-height: 100vh;
}
.docs-page--app-style .docs-sidebar-panel {
	width: 320px;
	min-width: 320px;
	background: #e8f0fe;
	border-right: 1px solid #d0e0f5;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.docs-page--app-style .docs-sidebar-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 20px 16px;
	border-bottom: 1px solid #d0e0f5;
}
.docs-page--app-style .docs-sidebar-icon { font-size: 1.5rem; }
.docs-page--app-style .docs-sidebar-title {
	font-size: 1.1rem;
	font-weight: 700;
	color: #1a1a2e;
	margin: 0;
}
.docs-page--app-style .docs-search-wrap {
	position: relative;
	padding: 12px 16px;
	border-bottom: 1px solid #d0e0f5;
}
.docs-page--app-style .docs-search-icon {
	position: absolute;
	left: 24px;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0.6;
	font-size: 0.9rem;
}
.docs-page--app-style .docs-search {
	width: 100%;
	padding: 8px 12px 8px 32px;
	border: 1px solid #c5d9f0;
	border-radius: 8px;
	font-size: 0.9rem;
	background: #fff;
}
.docs-page--app-style .docs-sidebar {
	flex: 1;
	overflow-y: auto;
	padding: 12px 0;
}
.docs-page--app-style .docs-nav-item,
.docs-page--app-style .docs-nav-parent {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 10px 16px;
	text-align: left;
	font-size: 0.9rem;
	color: #374151;
	text-decoration: none;
	background: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
}
.docs-page--app-style .docs-nav-item:hover,
.docs-page--app-style .docs-nav-parent:hover {
	background: #dbeafe;
	color: #1d4ed8;
}
.docs-page--app-style .docs-nav-item.active {
	background: #bfdbfe;
	color: #1d4ed8;
	font-weight: 600;
}
.docs-page--app-style .docs-nav-parent[aria-expanded="true"] {
	background: #dbeafe;
	color: #1d4ed8;
}
.docs-page--app-style .docs-nav-icon { font-size: 1rem; flex-shrink: 0; }
.docs-page--app-style .docs-nav-chevron {
	margin-left: auto;
	font-size: 0.7rem;
	color: #6b7280;
}
.docs-page--app-style .docs-nav-group { margin-bottom: 2px; }
.docs-page--app-style .docs-nav-children {
	padding-left: 12px;
}
.docs-page--app-style .docs-nav-children--closed { display: none; }
.docs-page--app-style .docs-main {
	flex: 1;
	background: #fff;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}
.docs-page--app-style .docs-main-header {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	padding: 16px 24px;
	border-bottom: 1px solid #eee;
}
.docs-page--app-style .docs-header-actions {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: flex-end;
	align-self: flex-end;
	max-width: 100%;
}
.docs-page--app-style .docs-goto-website,
.docs-page--app-style .docs-goto-app {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 7px 14px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.8125rem;
	line-height: 1.25;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.docs-page--app-style .docs-goto-website {
	background: #fff;
	color: #1e40af;
	border-color: #93c5fd;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.docs-page--app-style .docs-goto-website:hover {
	background: #eff6ff;
	color: #1d4ed8;
	border-color: #60a5fa;
}
.docs-page--app-style .docs-goto-app {
	background: #2563eb;
	color: #fff;
	border-color: #2563eb;
	box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25);
}
.docs-page--app-style .docs-goto-app:hover {
	background: #1d4ed8;
	border-color: #1d4ed8;
	color: #fff;
}
.docs-page--app-style #docs-nav .docs-nav-item--hidden,
.docs-page--app-style #docs-nav .docs-nav-group--hidden {
	display: none !important;
}
.docs-page--app-style .docs-search-empty {
	font-size: 0.8rem;
	color: #64748b;
	margin: 6px 12px 0;
	padding: 0 2px;
}
.docs-page--app-style .docs-meta {
	font-size: 0.8rem;
	color: #6b7280;
	margin-top: 0;
}
.docs-page--app-style .docs-content {
	padding: 20px 28px 36px;
	flex: 1;
	min-width: 0;
}

/* Documentation (introduction.html and all docs/*.html): stack sidebar + main on narrow viewports */
@media (max-width: 991.98px) {
	.docs-page--app-style .docs-layout {
		flex-direction: column;
		min-height: 0;
	}

	.docs-page--app-style .docs-sidebar-panel {
		width: 100%;
		min-width: 0;
		max-width: 100%;
		border-right: none;
		border-bottom: 1px solid #d0e0f5;
		flex-shrink: 0;
	}

	.docs-page--app-style .docs-sidebar {
		max-height: min(45vh, 320px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.docs-page--app-style .docs-main {
		min-width: 0;
		width: 100%;
		overflow-x: hidden;
	}

	.docs-page--app-style .docs-main-header {
		padding: 12px 16px 14px;
	}

	.docs-page--app-style .docs-header-actions {
		align-self: flex-end;
		width: auto;
		max-width: 100%;
		justify-content: flex-end;
		margin-bottom: 0;
	}

	.docs-page--app-style .docs-meta {
		margin-top: 0;
		padding-right: 0;
		width: 100%;
	}

	.docs-page--app-style .docs-content {
		padding: 16px 14px 28px;
	}

	/* Prevent horizontal scroll from wide flex children / embeds */
	#page:has(> section.docs-page--app-style) {
		overflow-x: hidden;
		max-width: 100%;
	}
}

/* Only one section visible at a time */
.docs-page--app-style .doc-section {
	display: none;
	padding: 0;
	border: none;
}
.docs-page--app-style .doc-section.active {
	display: block;
}
.docs-page--app-style .docs-content h2 { font-size: 1rem; margin-bottom: 0.45rem; margin-top: 0; color: #1a1a2e; font-weight: 700; }
.docs-page--app-style .docs-content h3 { font-size: 0.9375rem; margin-top: 0.5rem; margin-bottom: 0.35rem; color: #1a1a2e; font-weight: 600; }
/* Bottom CTA gradient strip: titles must stay white (overrides generic h2/h3 colors) */
.docs-page--app-style .docs-content .bg-gradient-to-r.from-blue-500.to-purple-600 h2 {
	color: #fff !important;
}
.docs-page--app-style .docs-content .bg-gradient-to-r.from-blue-500.to-purple-600 .doc-card--link h3 {
	color: #fff !important;
}
.docs-page--app-style .docs-content h4 { font-size: 0.875rem; margin-top: 0; margin-bottom: 0.25rem; color: #1a1a2e; font-weight: 600; }
.docs-page--app-style .doc-card {
	background: #f8fafc;
	border-radius: 10px;
	padding: 0.875rem 1rem;
	margin-bottom: 0.75rem;
	border: 1px solid #e2e8f0;
}
.docs-page--app-style .doc-card h4 { font-size: 0.95rem; margin-bottom: 0.35rem; color: #1a1a2e; }
.docs-page--app-style .doc-list { list-style: none; padding-left: 0; }
.docs-page--app-style .doc-list li { padding: 4px 0; padding-left: 1rem; position: relative; color: #444; }
.docs-page--app-style .doc-list li:before { content: "•"; position: absolute; left: 0; color: #2563eb; }
/* Original design colors: overview / intro cards - light blue */
.docs-page--app-style .doc-section .doc-card:first-of-type {
	background: #eff6ff;
	border-color: #bfdbfe;
}
/* Best practices block - light green */
.docs-page--app-style .doc-card.doc-card--green { background: #ecfdf5; border-color: #a7f3d0; }
.docs-page--app-style .doc-card.doc-card--green h3,
.docs-page--app-style .doc-card.doc-card--green h4 { color: #065f46; }
.docs-page--app-style .doc-card.doc-card--green .doc-list li:before { color: #059669; }
/* Issues / troubleshooting - light yellow */
.docs-page--app-style .doc-card.doc-card--yellow { background: #fffbeb; border-color: #fde68a; }
.docs-page--app-style .doc-card.doc-card--yellow h3,
.docs-page--app-style .doc-card.doc-card--yellow h4 { color: #92400e; }
.docs-page--app-style .doc-card.doc-card--yellow .doc-list li:before { color: #b45309; }
/* Ready to Explore More - blue to purple gradient (card with sub-cards) */
.docs-page--app-style .doc-card.doc-card--explore-more {
	background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
	border: none;
	color: #fff;
	padding: 1.5rem 1.25rem;
}
.docs-page--app-style .doc-card.doc-card--explore-more h3 { color: #fff; }
.docs-page--app-style .doc-card.doc-card--explore-more .doc-card--link { color: #fff; }
.docs-page--app-style .doc-card.doc-card--explore-more .doc-card--link:hover { background: rgba(255,255,255,0.2); color: #fff; }
.docs-page--app-style .doc-card.doc-card--explore-more .text-muted { color: rgba(255,255,255,0.9) !important; }
/* Bottom CTA strip */
.docs-page--app-style .docs-cta {
	background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
	color: #fff;
	padding: 1.5rem 1.25rem;
	border-radius: 12px;
	margin-top: 2rem;
	border: none;
}
.docs-page--app-style .docs-cta a { color: #fff; text-decoration: underline; font-weight: 600; }
/* Explore more sub-cards: light blue, light purple, light pink */
.docs-page--app-style .doc-card--link {
	display: block;
	text-decoration: none;
	color: inherit;
	transition: background 0.2s;
	border-radius: 10px;
}
.docs-page--app-style .doc-card--link:hover { background: #e0e7ff; color: #3730a3; }
.docs-page--app-style .doc-section .row > *:nth-child(1) .doc-card--link { background: #dbeafe; }
.docs-page--app-style .doc-section .row > *:nth-child(2) .doc-card--link { background: #e9d5ff; }
.docs-page--app-style .doc-section .row > *:nth-child(3) .doc-card--link { background: #fce7f3; }
.docs-page--app-style .doc-section .row > *:nth-child(4) .doc-card--link { background: #e0e7ff; }
.docs-page--app-style .doc-section .row .doc-card { height: 100%; }
.docs-page--app-style .doc-section iframe { max-width: 100%; border: 0; border-radius: 8px; }
/* Key dashboard elements - colored cards (green, blue, purple, orange, yellow, red) */
.docs-page--app-style #project-dashboard .row > *:nth-child(1) .doc-card { background: #ecfdf5; border-color: #a7f3d0; }
.docs-page--app-style #project-dashboard .row > *:nth-child(2) .doc-card { background: #dbeafe; border-color: #93c5fd; }
.docs-page--app-style #project-dashboard .row > *:nth-child(3) .doc-card { background: #fce7f3; border-color: #f9a8d4; }
.docs-page--app-style #project-dashboard .row > *:nth-child(4) .doc-card { background: #ffedd5; border-color: #fdba74; }
.docs-page--app-style #project-dashboard .row > *:nth-child(5) .doc-card { background: #fef9c3; border-color: #fde047; }
.docs-page--app-style #project-dashboard .row > *:nth-child(6) .doc-card { background: #fee2e2; border-color: #fca5a5; }
/* Introduction core feature cards (green, yellow, purple, orange) */
.docs-page--app-style #introduction .row > *:nth-child(1) .doc-card { background: #f0fdf4; border-color: #bbf7d0; }
.docs-page--app-style #introduction .row > *:nth-child(2) .doc-card { background: #fffbeb; border-color: #fde68a; }
.docs-page--app-style #introduction .row > *:nth-child(3) .doc-card { background: #faf5ff; border-color: #e9d5ff; }
.docs-page--app-style #introduction .row > *:nth-child(4) .doc-card { background: #fff7ed; border-color: #fed7aa; }

/* Hero feature cards: show image-only tiles */
.hero-grid-card.hero-grid-card--image-mode {
	position: relative;
	overflow: hidden;
	background: #e5e7eb !important;
	border: 2px solid #d1d5db;
	box-sizing: border-box;
}
.hero-grid-card.hero-grid-card--image-mode .hero-card-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	z-index: 1;
}
.hero-grid-card.hero-grid-card--image-mode .hero-grid-card-content {
	display: none !important;
}
.hero-grid-card.hero-grid-card--image-mode:hover {
	border-color: #93c5fd;
}

/* Mega menu: bold first link in each column (module title row) */
.wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li.fst-li > a,
.wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li.fst-li > a,
.dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li.fst-li > a,
.black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li.fst-li > a {
	font-weight: 700 !important;
}

/* Features megamenu: Flaticon + wrapped link text (float keeps multi-line labels aligned) */
.wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list.mega-nav-icons > li > a {
	display: block !important;
	overflow: hidden;
}
.wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list.mega-nav-icons .mega-nav-ico {
	float: left;
	margin-right: 0.5rem;
	margin-top: 0.12em;
	line-height: 1;
	color: #122945;
}
.wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list.mega-nav-icons .mega-nav-ico:before {
	font-size: 0.9375rem !important;
}
.wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list.mega-nav-icons li.fst-li .mega-nav-ico:before {
	font-size: 1rem !important;
}
.wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list.mega-nav-icons > li > a:hover .mega-nav-ico,
.wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list.mega-nav-icons > li > a:focus .mega-nav-ico {
	color: #0b5ed7;
}

/* Mobile header: full wordmark larger; less side padding; reserve ~52px for hamburger */
@media (max-width: 991px) {
	.wsmobileheader .smllogo {
		padding-left: 12px !important;
		margin-top: 0 !important;
		display: flex !important;
		align-items: center !important;
		height: 100%;
		box-sizing: border-box;
	}

	.wsmobileheader .smllogo img {
		max-width: min(300px, calc(100vw - 52px));
		max-height: 60px;
		width: auto;
		height: auto;
		object-fit: contain;
		object-position: left center;
	}
}

/* Footer (#footer-3): logo-full must not inherit huge intrinsic size (theme uses max-width: inherit on .footer-logo) */
#footer-3 .footer-info img.footer-logo {
	max-width: 250px;
	width: auto;
	height: auto;
	object-fit: contain;
	object-position: left top;
	display: block;
}

/* Footer column titles — space before links / newsletter field */
#footer-3 .footer-links > h3.s-17,
#footer-3 .footer-form > h3.s-17 {
	margin-bottom: 1.125rem !important;
}

/* project-management.html — Team collaboration (Kanban block): a bit more vertical room inside the tinted card */
#team-collaboration .bc-5-wrapper .section-overlay {
	padding-top: 70px;
	padding-bottom: 140px;
}

@media (max-width: 991.98px) {
	#team-collaboration .bc-5-wrapper .section-overlay {
		padding-top: 70px;
		padding-bottom: 140px;
	}
}

/* hr-payroll.html — Salary management (bc-5 tinted block): same vertical padding as Team collaboration */
#employee-management .bc-5-wrapper .section-overlay {
	padding-top: 70px;
	padding-bottom: 140px;
}

@media (max-width: 991.98px) {
	#employee-management .bc-5-wrapper .section-overlay {
		padding-top: 70px;
		padding-bottom: 140px;
	}
}

/* hr-payroll.html — Employee management row: oversized shot can extend past column (desktop only; mobile uses clipped .img-block in feature-hero-shot rules) */
@media (min-width: 992px) {
	#salaries-management .hr-employee-hero-row .col-md-6:last-child,
	#salaries-management .hr-employee-hero-row .img-block {
		overflow: visible;
	}
}

/* financial-management.html — Business financial dashboard (bc-5 block) */
#expense-tracking .bc-5-wrapper .section-overlay {
	padding-top: 70px;
	padding-bottom: 140px;
}

@media (max-width: 991.98px) {
	#expense-tracking .bc-5-wrapper .section-overlay {
		padding-top: 70px;
	padding-bottom: 140px;
	}
}

/* sales-management.html — Sales pipeline management (bc-5 block) */
#sales-pipeline .bc-5-wrapper .section-overlay {
	padding-top: 70px;
	padding-bottom: 140px;
}

@media (max-width: 991.98px) {
	#sales-pipeline .bc-5-wrapper .section-overlay {
		padding-top: 70px;
		padding-bottom: 140px;
	}
}

/* project-management.html — Project dashboard section image: breathing room to the right of the text column */
@media (min-width: 768px) {
	#project-dashboard .project-dashboard-section-img {
		margin-left: 1.5rem;
	}
}

/* hr-payroll attendance, project reporting, financial earnings, sales customer-relations: compact config-style cards (icon left of title) */
#attendance-tracking .fbox-12-wrapper--hr-config,
#reporting-analytics .fbox-12-wrapper--hr-config,
#income-management .fbox-12-wrapper--hr-config,
#customer-relations .fbox-12-wrapper--hr-config {
	padding-left: 0;
}

@media (min-width: 992px) {
	#attendance-tracking .fbox-12-wrapper--hr-config,
	#reporting-analytics .fbox-12-wrapper--hr-config,
	#income-management .fbox-12-wrapper--hr-config,
	#customer-relations .fbox-12-wrapper--hr-config {
		padding-left: 12px;
	}
}

#attendance-tracking .fbox-12--hr-config.fbox-12,
#reporting-analytics .fbox-12--hr-config.fbox-12,
#income-management .fbox-12--hr-config.fbox-12,
#customer-relations .fbox-12--hr-config.fbox-12 {
	padding: 14px 16px;
}

/* HR / project / finance / sales — compact config cards: space between stacked cards on mobile */
@media (max-width: 991.98px) {
	.fbox-12-wrapper--hr-config .fbox-12.fbox-12--hr-config {
		margin-bottom: 12px !important;
	}

	.fbox-12-wrapper--hr-config .row > [class*="col-"]:last-child > .fbox-12.fbox-12--hr-config:last-child {
		margin-bottom: 0 !important;
	}

	/* Space between config-card grid and sibling text column when the row stacks (cards-first rows use order-first on last DOM column) */
	.hr-configuration-row > [class*="col-"]:last-child {
		margin-bottom: 1.5rem !important;
	}

	/* Text-first rows: reporting + earnings (no column order swap) */
	.reporting-analytics-row > [class*="col-"]:first-child,
	.earnings-management-row > [class*="col-"]:first-child {
		margin-bottom: 1.5rem !important;
	}
}

#attendance-tracking .fbox-12--hr-config__row,
#reporting-analytics .fbox-12--hr-config__row,
#income-management .fbox-12--hr-config__row,
#customer-relations .fbox-12--hr-config__row {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 12px;
}

#attendance-tracking .fbox-12--hr-config .fbox-ico,
#reporting-analytics .fbox-12--hr-config .fbox-ico,
#income-management .fbox-12--hr-config .fbox-ico,
#customer-relations .fbox-12--hr-config .fbox-ico {
	margin-bottom: 0;
	flex-shrink: 0;
}

/* Decorative blob SVG is sized for large ico-* in the theme; omit for this tight horizontal layout */
#attendance-tracking .fbox-12--hr-config .shape-ico svg,
#reporting-analytics .fbox-12--hr-config .shape-ico svg,
#income-management .fbox-12--hr-config .shape-ico svg,
#customer-relations .fbox-12--hr-config .shape-ico svg {
	display: none;
}

#attendance-tracking .fbox-12--hr-config .shape-ico,
#reporting-analytics .fbox-12--hr-config .shape-ico,
#income-management .fbox-12--hr-config .shape-ico,
#customer-relations .fbox-12--hr-config .shape-ico {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

#attendance-tracking .fbox-12--hr-config__body,
#reporting-analytics .fbox-12--hr-config__body,
#income-management .fbox-12--hr-config__body,
#customer-relations .fbox-12--hr-config__body {
	flex: 1;
	min-width: 0;
}

#attendance-tracking .fbox-12--hr-config h5,
#reporting-analytics .fbox-12--hr-config h5,
#income-management .fbox-12--hr-config h5,
#customer-relations .fbox-12--hr-config h5 {
	margin-top: 0 !important;
	margin-bottom: 0.35rem;
	font-size: 0.9375rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

#attendance-tracking .fbox-12--hr-config__body p,
#reporting-analytics .fbox-12--hr-config__body p,
#income-management .fbox-12--hr-config__body p,
#customer-relations .fbox-12--hr-config__body p {
	font-size: 0.8125rem;
	line-height: 1.45;
	margin-bottom: 0;
}

/* Match left and right column height (taller side sets row height) */
#attendance-tracking .hr-configuration-row,
#reporting-analytics .reporting-analytics-row,
#income-management .earnings-management-row,
#customer-relations .hr-configuration-row {
	align-items: stretch;
}

#attendance-tracking .hr-configuration-row .fbox-12-wrapper--hr-config > .row,
#reporting-analytics .reporting-analytics-row .fbox-12-wrapper--hr-config > .row,
#income-management .earnings-management-row .fbox-12-wrapper--hr-config > .row,
#customer-relations .hr-configuration-row .fbox-12-wrapper--hr-config > .row {
	min-height: 100%;
}

#attendance-tracking .hr-configuration-row .fbox-12-wrapper--hr-config > .row > [class*="col-"],
#reporting-analytics .reporting-analytics-row .fbox-12-wrapper--hr-config > .row > [class*="col-"],
#income-management .earnings-management-row .fbox-12-wrapper--hr-config > .row > [class*="col-"],
#customer-relations .hr-configuration-row .fbox-12-wrapper--hr-config > .row > [class*="col-"] {
	display: flex;
	flex-direction: column;
}

/* financial-management — Detailed business analysis: image on right (align with hero img-block offset) */
#tax-management .img-block {
	margin-right: 0;
	margin-left: 30px;
}

#more-features .integrations-1-wrapper .row > [class*="col"] {
	display: flex;
}

#more-features .integrations-1-wrapper .in_tool {
	flex-flow: column nowrap !important;
	align-items: center !important;
	justify-content: flex-start !important;
	width: 100%;
	height: 100%;
	margin-bottom: 0 !important;
	padding: 0.95rem 1rem 0.65rem !important;
	text-align: center;
	text-decoration: none;
	color: inherit;
	border: none !important;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#more-features .integrations-1-wrapper .in_tool:hover {
	transform: translateY(-4px);
	border-color: transparent !important;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.06);
}

#more-features .integrations-1-wrapper .in_tool-logo-wrap {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-right: 0 !important;
	margin-bottom: 0.75rem;
}

/* Glyph size = same as KPI / fbox cards: parent .ico-35 → 2.1875rem (skyblue-theme) */
#more-features .integrations-1-wrapper .in_tool-logo.in_tool-logo--flaticon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 48px;
	min-width: 48px;
	height: 48px;
	margin-right: 0 !important;
	border-radius: 10px;
	background: rgba(62, 177, 255, 0.1);
}

#more-features .integrations-1-wrapper .in_tool-logo.ico-35.in_tool-logo--flaticon [class*="flaticon-"]:before,
#more-features .integrations-1-wrapper .in_tool-logo.ico-35.in_tool-logo--flaticon [class*="flaticon-"]:after {
	color: #3eb1ff;
	line-height: 1 !important;
}

#more-features .integrations-1-wrapper .in_tool-txt {
	flex: 1 1 auto !important;
	text-align: center;
	width: 100%;
	max-width: 100%;
}

#more-features .integrations-1-wrapper .in_tool-txt h6 {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	line-height: 1.25 !important;
}

/* Theme has no .s-10; compact card titles (user: s-10 w-600) */
#more-features .integrations-1-wrapper .in_tool-txt h6.s-10 {
	font-size: 1rem;
	line-height: 1.3 !important;
}

#more-features .integrations-1-wrapper .in_tool-txt p.p-sm {
	margin-top: 0.35rem !important;
	margin-bottom: 0 !important;
	font-size: 0.875rem;
	line-height: 1.45;
}

.theme--dark #more-features .integrations-1-wrapper .in_tool {
	background: #1d212c;
	border: 1px solid #2a3142 !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.theme--dark #more-features .integrations-1-wrapper .in_tool:hover {
	border-color: #363f54 !important;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.theme--dark #more-features .integrations-1-wrapper .in_tool-txt p.p-sm {
	color: #b8c0d4;
}

/* --------------------------------------------------------------------------
   Banner-13 (project-management): features-footer.png
   Theme assumes tilted img-04 (rotate + negative margins + left-only overlay
   padding). Reset for flat collage so padding is even and nothing clips.
   -------------------------------------------------------------------------- */
#banner-13.banner-13--features-footer .banner-13-wrapper .banner-overlay {
	padding: 3rem 2.75rem 3rem 4.5rem;
}

#banner-13.banner-13--features-footer .banner-13-img {
	transform: none;
	margin: 0;
	padding: 0.25rem 0 0;
}

#banner-13.banner-13--features-footer .banner-13-img img {
	max-width: 100%;
	height: auto;
}

#banner-13.banner-13--features-footer .banner-13-txt {
	padding-right: 8%;
}

@media (max-width: 1199.98px) {
	#banner-13.banner-13--features-footer .banner-13-wrapper .banner-overlay {
		padding: 2.5rem 2rem 2.5rem 3.5rem;
	}
}

@media (max-width: 991.98px) {
	#banner-13.banner-13--features-footer .banner-13-wrapper .banner-overlay {
		padding: 2.25rem 1.75rem 2.25rem 2.75rem;
	}

	#banner-13.banner-13--features-footer .banner-13-txt {
		padding-right: 5%;
	}
}

@media (max-width: 767.98px) {
	#banner-13.banner-13--features-footer .banner-13-wrapper .banner-overlay {
		padding: 2.5rem 1.5rem 2.75rem;
	}

	#banner-13.banner-13--features-footer .banner-13-txt {
		padding-right: 0;
		margin-bottom: 0.5rem;
	}

	/* responsive.css hides .banner-13-img on small screens; show for this asset */
	#banner-13.banner-13--features-footer .banner-13-img {
		display: block !important;
		margin-top: 1.25rem;
		padding: 0 0.5rem;
	}
}

/* About page — Customer Stories: no testimonial avatars */
.about-customer-stories .review-avatar {
	display: none !important;
}

.about-customer-stories .review-1 .review-author {
	padding-left: 0;
}

/* Home — Customer Stories: no avatars */
.index-customer-stories-no-avatars .review-avatar {
	display: none !important;
}

.index-customer-stories-no-avatars .review-1 .review-author {
	padding-left: 0;
}

/* Reviews page — hide testimonial avatars (review-2 cards) */
.reviews-page-no-avatars .review-avatar {
	display: none !important;
}

.reviews-page-no-avatars .review-2 .review-author {
	padding-left: 0;
}

/* Contact form: honeypot hidden from sighted users */
.contact-form-honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Book a demo — theme uses #page { overflow: hidden }; this page is tall */
#page.book-demo-page {
	overflow: visible !important;
}

.book-demo-section .book-demo-panel {
	background: #fff;
	border: 1px solid rgba(15, 22, 35, 0.08);
	border-radius: 16px;
	padding: 28px 24px 32px;
	box-shadow: 0 18px 50px rgba(15, 22, 35, 0.06);
}

@media (min-width: 992px) {
	.book-demo-section .book-demo-panel {
		padding: 32px 36px 40px;
	}
}

/* Day / time pickers — match site buttons (selected = .btn--theme from skyblue-theme) */
.book-demo-days,
.book-demo-slots {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.book-demo-day-btn.book-demo-day-btn,
.book-demo-slot-btn.book-demo-slot-btn {
	flex: 1 1 auto;
	min-width: 6.75rem;
	text-align: center;
	white-space: nowrap;
}

.book-demo-slots-scroll {
	max-height: min(52vh, 380px);
	overflow-y: auto;
	overflow-x: hidden;
	padding-right: 4px;
	margin-right: -4px;
	-webkit-overflow-scrolling: touch;
}

.book-demo-slots-scroll:focus-within {
	outline: none;
}

.book-demo-status {
	min-height: 1.25rem;
	color: #5f646d;
}

.book-demo-status.text-success {
	color: #0d6e3e;
}

.book-demo-status.text-danger {
	color: #c53030;
}

/* Contact + book-demo: math captcha — question with refresh icon */
.contact-captcha-question-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap !important;
	gap: 0.75rem;
	margin-top: 15px;
	margin-bottom: 0;
}

.contact-captcha-question-row .contact-captcha-question {
	flex: 1 1 auto;
	min-width: 0;
	width: auto !important;
	margin: 0 !important;
	line-height: 1.4;
}

.contact-captcha-refresh--icon {
	flex: 0 0 auto;
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	margin: 0;
	border: 1px solid #bfe4ff !important;
	border-radius: 999px;
	background: #eef7ff !important;
	color: #1680fb !important;
	cursor: pointer;
	line-height: 0;
	box-shadow: 0 6px 16px rgba(22, 128, 251, 0.15);
	transition: transform 0.15s ease, border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.contact-captcha-refresh--icon:hover {
	border-color: #8dceff !important;
	background-color: #dff0ff !important;
	color: #0d6fe0 !important;
	transform: rotate(-12deg);
}

.contact-captcha-refresh--icon:focus {
	outline: 2px solid rgba(62, 177, 255, 0.45);
	outline-offset: 2px;
}

.contact-captcha-refresh--icon svg {
	display: block;
	width: 15px;
	height: 15px;
}

/* Book a demo — success modal */
.book-demo-success-modal .modal-dialog.book-demo-success-modal__dialog {
	max-width: 440px;
}

.book-demo-success-modal .book-demo-success-modal__content {
	border: none;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 28px 80px rgba(15, 22, 35, 0.18), 0 8px 24px rgba(22, 128, 251, 0.12);
}

.book-demo-success-modal .book-demo-success-modal__body {
	padding: 4.25rem 2rem 1.25rem;
}

.book-demo-success-modal__icon-wrap {
	display: flex;
	justify-content: center;
	margin-bottom: 1.25rem;
	margin-top: 1.25rem;
	
}

.book-demo-success-modal__icon {
	filter: drop-shadow(0 8px 20px rgba(62, 177, 255, 0.35));
}

.book-demo-success-modal__title {
	color: #0f1623;
	letter-spacing: -0.02em;
}

.book-demo-success-modal__ref {
	color: #6b7280;
	letter-spacing: 0.02em;
}

.book-demo-success-modal__ref:not([hidden]) {
	display: block;
}

.book-demo-success-modal__message {
	color: #3d4450;
	line-height: 1.55;
}

.book-demo-success-modal .book-demo-success-modal__footer {
	padding: 1.5rem 2rem 2rem;
	background: linear-gradient(180deg, rgba(238, 247, 255, 0.5) 0%, #fff 40%);
}

.book-demo-success-modal .modal-backdrop.show {
	opacity: 0.45;
}

body.modal-open #page.book-demo-page {
	overflow: hidden !important;
}

/* Book a demo — submit button loading */
#book-demo-submit.book-demo-submit--loading {
	pointer-events: none;
	cursor: wait;
}

#book-demo-submit .book-demo-submit__spinner {
	display: inline-block;
	width: 1.05rem;
	height: 1.05rem;
	margin-right: 0.5rem;
	vertical-align: -0.15em;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: book-demo-submit-spin 0.65s linear infinite;
}

#book-demo-submit .book-demo-submit__label {
	vertical-align: middle;
}

@keyframes book-demo-submit-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Blog — Markdown body (API content; legacy Quill HTML keeps .single-post-txt only) */
.single-post-txt.markdown-body {
	color: #3d4450;
	font-size: 1.05rem;
	line-height: 1.7;
}

.single-post-txt.markdown-body > *:first-child {
	margin-top: 0;
}

.single-post-txt.markdown-body > *:last-child {
	margin-bottom: 0;
}

.single-post-txt.markdown-body h1,
.single-post-txt.markdown-body h2,
.single-post-txt.markdown-body h3,
.single-post-txt.markdown-body h4 {
	margin-top: 1.5rem;
	margin-bottom: 0.65rem;
	font-weight: 700;
	color: #1f2937;
	line-height: 1.3;
}

.single-post-txt.markdown-body h1 {
	font-size: 1.75rem;
}

.single-post-txt.markdown-body h2 {
	font-size: 1.45rem;
}

.single-post-txt.markdown-body h3 {
	font-size: 1.2rem;
}

.single-post-txt.markdown-body p {
	margin-bottom: 1rem;
}

.single-post-txt.markdown-body ul,
.single-post-txt.markdown-body ol {
	margin: 0 0 1rem 1.25rem;
	padding-left: 0.5rem;
}

.single-post-txt.markdown-body li {
	margin-bottom: 0.35rem;
}

.single-post-txt.markdown-body blockquote {
	margin: 1rem 0;
	padding: 0.75rem 1rem;
	border-left: 4px solid #3b82f6;
	background: rgba(59, 130, 246, 0.06);
	color: #374151;
}

.single-post-txt.markdown-body pre {
	margin: 1rem 0;
	padding: 1rem 1.15rem;
	overflow-x: auto;
	font-size: 0.9em;
	line-height: 1.5;
	background: #f3f4f6;
	border-radius: 8px;
	border: 1px solid #e5e7eb;
}

.single-post-txt.markdown-body code {
	font-size: 0.9em;
	padding: 0.15em 0.4em;
	background: #f3f4f6;
	border-radius: 4px;
}

.single-post-txt.markdown-body pre code {
	padding: 0;
	background: none;
	border-radius: 0;
}

.single-post-txt.markdown-body a {
	color: #2563eb;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.single-post-txt.markdown-body img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.single-post-txt.markdown-body hr {
	margin: 1.5rem 0;
	border: 0;
	border-top: 1px solid #e5e7eb;
}