/* ==========================================================================
	Moiboo — UI polish layer (2026-11)

	Loaded last from includes/_head_link.php. Visual refinement only:
	spacing, alignment, typography hierarchy, card/button consistency,
	subtle motion. No content is hidden, reordered or rewritten here.

	Selectors are prefixed with :root where they must win over page
	stylesheets (automotive.css etc.) that load after this file.

	Rollback: remove the <link> to this file in includes/_head_link.php
	and the <script> to js/polish.js in includes/_before_body_scripts.php.
	========================================================================== */

:root {
	--pl-blue: #00AFEB;          /* brand primary                        */
	--pl-blue-600: #0098CF;      /* hover / pressed                      */
	--pl-blue-ink: #0078A6;      /* blue text on white, AA contrast      */
	--pl-blue-50: #F0FAFE;       /* blue-tinted white surface            */
	--pl-blue-100: #DDF3FC;
	--pl-ink: #16191E;           /* headings (charcoal)                  */
	--pl-text: #3C434D;          /* body text                            */
	--pl-muted: #5D6672;         /* secondary text (AA on white)         */
	--pl-line: #E4E8EE;
	--pl-line-2: #D3D9E1;
	--pl-surface: #F6F8FA;       /* neutral grey surface                 */

	--pl-radius-sm: 10px;
	--pl-radius: 16px;
	--pl-radius-lg: 22px;
	--pl-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
	--pl-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 28px -14px rgba(16, 24, 40, .14);
	--pl-shadow-lift: 0 2px 4px rgba(16, 24, 40, .04), 0 18px 36px -16px rgba(16, 24, 40, .20);

	--pl-section: clamp(56px, 6.5vw, 96px);
	--pl-ease: cubic-bezier(.2, .7, .2, 1);
	--pl-fast: 180ms;
	--pl-med: 320ms;
}

/* --------------------------------------------------------------------------
	1. Base typography
	-------------------------------------------------------------------------- */
:root body {
	color: var(--pl-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

:root body p {
	line-height: 1.65;
}

:root body h1,
:root body h2,
:root body h3,
:root body h4,
:root body h5 {
	letter-spacing: -0.012em;
}

/* Section titles — one scale across the site (was 32 / 40 / 48px) */
:root body section h2:not(.accordion-header):not(.cta-title),
:root body section h2.fs-1,
:root body section h2.fs-2 {
	font-size: clamp(1.7rem, 1.1rem + 1.55vw, 2.4rem) !important;
	line-height: 1.18;
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* Feature-row titles sit one step below section titles */
:root body .feature-item-section h2 {
	font-size: clamp(1.45rem, 1.1rem + 0.9vw, 1.9rem) !important;
	line-height: 1.22;
	margin-bottom: 1rem !important;
}

/* Hero headings: tighter tracking, consistent rhythm */
:root .hero-heading,
:root #hero-desktop h1,
:root #hero-mobile h1 {
	letter-spacing: -0.025em;
	line-height: 1.12;
	color: var(--pl-ink);
}

:root .hero-subtext,
:root .hero-description {
	color: var(--pl-text);
	line-height: 1.65;
}

/* Section intro paragraphs (not inside the blue CTA / stats panels) */
:root body section .text-center > p,
:root body section .text-center p.mx-auto {
	color: var(--pl-muted);
	font-size: 1.05rem;
}

/* :root:root raises specificity above the .text-center rules just above */
:root:root body section .stats-card p,
:root:root body section [class*="cta"] p,
:root:root body section .bg-primary p,
:root:root body section .text-white p,
:root:root body section p.text-white {
	color: inherit;
}

/* --------------------------------------------------------------------------
	2. Badges ("Our Features 🔥" pills)
	-------------------------------------------------------------------------- */
:root .badge-cyan-light,
:root .badge-cyan-light-white,
:root .badge-cyan-light-dif {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 14px;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.3;
	border-radius: 999px;
	color: var(--pl-blue-ink);
	background-color: var(--pl-blue-50);
	border: 1px solid var(--pl-blue-100);
}

:root .badge-cyan-light-white,
:root .badge-cyan-light.bg-white {
	background-color: #fff !important;
	border-color: var(--pl-blue-100);
}

/* --------------------------------------------------------------------------
	3. Button system
	   PRIMARY   .btn-cta-blue (+ dev-btn-blue, ablc-btn-primary)
	             brand blue → lime green on hover (original Moiboo hover)
	   SECONDARY .btn-fit
	             white + neutral outline → lime green on hover
	   ON-BLUE   .btn-fit-white, .final-cta-btn-white, .dev-btn-white,
	             .dev-cta-btn-white, .ablc-btn-white (white buttons on blue panels)
	             white + blue text → lime green on hover
	   All share one height, radius, weight, icon gap and motion.
	-------------------------------------------------------------------------- */
:root {
	--pl-lime: #98DC30;          /* original Moiboo hover colour          */
	--pl-lime-600: #86C823;
	--pl-btn-h: 48px;
	--pl-btn-h-sm: 42px;
}

:root .btn-cta-blue,
:root .dev-btn-blue,
:root .ablc-btn-primary,
:root .btn-fit,
:root .btn-fit-white,
:root .final-cta-btn-white,
:root .dev-btn-white,
:root .dev-cta-btn-white,
:root .ablc-btn-white {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: var(--pl-btn-h);
	padding: 12px 28px;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.005em;
	text-decoration: none;
	white-space: nowrap;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color var(--pl-fast) ease, border-color var(--pl-fast) ease, color var(--pl-fast) ease, box-shadow var(--pl-med) var(--pl-ease), transform var(--pl-med) var(--pl-ease);
}

/* Primary */
:root .btn-cta-blue,
:root .dev-btn-blue,
:root .ablc-btn-primary {
	color: #fff;
	background-color: var(--pl-blue);
	border: 1px solid var(--pl-blue);
	box-shadow: 0 1px 2px rgba(0, 120, 166, .16), 0 8px 18px -10px rgba(0, 175, 235, .7);
}

/* Secondary */
:root .btn-fit {
	color: var(--pl-ink);
	background-color: #fff;
	border: 1px solid var(--pl-line-2);
	box-shadow: var(--pl-shadow-sm);
}

/* On-blue panels */
:root .btn-fit-white,
:root .final-cta-btn-white,
:root .dev-btn-white,
:root .dev-cta-btn-white,
:root .ablc-btn-white {
	color: var(--pl-blue-ink);
	background-color: #fff;
	border: 1px solid #fff;
	box-shadow: 0 8px 18px -12px rgba(0, 60, 90, .5);
}

/* Hover / focus: lime green for every button, as on the original site */
:root .btn-cta-blue:hover,
:root .btn-cta-blue:focus-visible,
:root .dev-btn-blue:hover,
:root .ablc-btn-primary:hover,
:root .btn-fit:hover,
:root .btn-fit:focus-visible,
:root .btn-fit-white:hover,
:root .btn-fit-white:focus-visible,
:root .final-cta-btn-white:hover,
:root .dev-btn-white:hover,
:root .dev-cta-btn-white:hover,
:root .ablc-btn-white:hover {
	color: #fff;
	background-color: var(--pl-lime);
	border-color: var(--pl-lime);
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(80, 130, 10, .14), 0 14px 26px -12px rgba(120, 190, 30, .75);
}

:root .btn-cta-blue:active,
:root .btn-fit:active,
:root .btn-fit-white:active {
	transform: translateY(0);
	background-color: var(--pl-lime-600);
	border-color: var(--pl-lime-600);
}

/* Icons inside buttons */
:root .btn-cta-blue i,
:root .btn-fit i,
:root .btn-fit-white i,
:root .final-cta-btn-white i {
	margin-left: 0 !important;
	font-size: 0.9em;
	transition: transform var(--pl-med) var(--pl-ease);
}

:root .btn-cta-blue:hover i.fa-arrow-right,
:root .btn-fit:hover i.fa-arrow-right,
:root .btn-fit-white:hover i.fa-arrow-right,
:root .final-cta-btn-white:hover i.fa-arrow-right {
	transform: translateX(3px);
}

:root .btn-cta-blue:hover i.fa-download,
:root .btn-fit:hover i.fa-download,
:root .btn-fit-white:hover i.fa-download {
	transform: translateY(2px);
}

/* Buttons that carried inline "px-5 py-3" etc. keep the shared size */
:root .btn-cta-blue.px-5,
:root .btn-cta-blue.py-3 {
	padding: 12px 32px !important;
}

/* Hero / CTA button rows: consistent gap, wrap nicely */
:root .btn-wrapper,
:root .cta-buttons,
:root .mobile-btn-container,
:root .hero-content .d-flex.gap-3 {
	gap: 12px !important;
	flex-wrap: wrap;
	justify-content: center;
}

/* The arrow doodle next to hero buttons sits closer to the button now */
:root .arrow-container {
	display: inline-flex;
}

/* Keyboard focus ring for every interactive control */
:root a:focus-visible,
:root button:focus-visible,
:root [role="tab"]:focus-visible {
	outline: 2px solid var(--pl-blue);
	outline-offset: 3px;
}

@media (max-width: 767.98px) {
	:root .btn-wrapper .btn-cta-blue,
	:root .btn-wrapper .btn-fit,
	:root .mobile-btn-container .btn-cta-blue,
	:root .mobile-btn-container .btn-fit {
		width: 100%;
		max-width: 320px;
		margin: 0 !important;
	}
}

/* --------------------------------------------------------------------------
	4. Navigation
	-------------------------------------------------------------------------- */
:root #main-navbar .navbar-nav .nav-link {
	position: relative;
	color: var(--pl-ink);
	font-weight: 500;
	letter-spacing: 0.005em;
	transition: color var(--pl-fast) ease;
}

:root #main-navbar .navbar-nav .nav-link:hover,
:root #main-navbar .navbar-nav .nav-link.show {
	color: var(--pl-blue-ink);
}

@media (min-width: 992px) {
	:root #main-navbar .navbar-nav {
		gap: 4px;
	}

	:root #main-navbar .navbar-nav > .nav-item {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	/* Underline indicator on hover */
	:root #main-navbar .navbar-nav > .nav-item > .nav-link::before {
		content: "";
		position: absolute;
		left: 8px;
		right: 8px;
		bottom: 2px;
		height: 2px;
		border-radius: 2px;
		background: var(--pl-blue);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform var(--pl-med) var(--pl-ease);
	}

	:root #main-navbar .navbar-nav > .nav-item > .nav-link:hover::before,
	:root #main-navbar .navbar-nav > .nav-item > .nav-link.show::before {
		transform: scaleX(1);
	}

	:root #main-navbar .nav-button-group {
		gap: 12px !important;
	}

	/* Floating header shown when scrolling up (navbar.js) — refined surface */
	:root body #main-navbar.scrolled-mode {
		background-color: rgba(255, 255, 255, .9);
		-webkit-backdrop-filter: saturate(160%) blur(14px);
		backdrop-filter: saturate(160%) blur(14px);
		border: 1px solid var(--pl-line);
		box-shadow: 0 10px 30px -18px rgba(16, 24, 40, .28);
		border-radius: 16px !important;
	}
}

/* Dropdown panels */
:root #main-navbar .custom-dropdown-menu,
:root #main-navbar .custom-submenu {
	padding: 6px !important;
	background: #fff;
	border: 1px solid var(--pl-line) !important;
	border-radius: 14px !important;
	box-shadow: 0 18px 40px -18px rgba(16, 24, 40, .28) !important;
}

:root #main-navbar .custom-dropdown-menu .dropdown-item,
:root #main-navbar .custom-submenu li a {
	padding: 10px 12px;
	border-radius: 10px;
	font-size: 15px;
	color: var(--pl-ink);
	transition: background-color var(--pl-fast) ease, color var(--pl-fast) ease;
}

:root #main-navbar .custom-dropdown-menu .dropdown-item:hover,
:root #main-navbar .custom-dropdown-menu .dropdown-item:focus,
:root #main-navbar .custom-submenu li a:hover,
:root #main-navbar .custom-submenu li a:focus {
	background-color: var(--pl-blue-50);
	color: var(--pl-blue-ink);
}

:root #main-navbar .custom-dropdown-menu .dropdown-item span {
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.02em;
}

:root #main-navbar .icon-square-sm {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	font-size: 14px;
	background-color: var(--pl-blue);
}

@media (min-width: 992px) {
	:root #main-navbar .custom-submenu {
		margin-left: 8px !important;
	}

	/* Smooth entrance whenever Bootstrap/script.js shows a panel */
	:root #main-navbar .dropdown-menu.show,
	:root #main-navbar .dropdown-submenu:hover > .custom-submenu,
	:root #main-navbar .custom-submenu.show {
		animation: pl-drop var(--pl-med) var(--pl-ease) both;
	}
}

@keyframes pl-drop {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

/* Language select: quieter border, same height as the WhatsApp icon */
:root #main-navbar .moiboo-lang-select {
	border: 1px solid var(--pl-line-2) !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	height: 38px !important;
	padding: 4px 12px !important;
	font-weight: 500 !important;
	color: var(--pl-ink) !important;
}

:root #main-navbar .nav-button-group .btn-cta-blue {
	min-height: 42px;
	padding: 10px 22px;
}

/* Mobile menu panel */
@media (max-width: 991.98px) {
	:root #navbarNav.show,
	:root #navbarNav.moiboo-nav-open {
		margin-top: 10px !important;
		padding: 8px 16px 16px !important;
		background: #fff;
		border: 1px solid var(--pl-line);
		border-radius: var(--pl-radius);
		box-shadow: 0 20px 40px -20px rgba(16, 24, 40, .3);
	}

	:root #navbarNav .navbar-nav .nav-item {
		width: 100%;
		border-bottom: 1px solid var(--pl-line);
	}

	:root #navbarNav .navbar-nav .nav-link {
		padding: 14px 4px !important;
		font-size: 16px;
	}

	:root #navbarNav .custom-dropdown-menu {
		width: 100%;
		margin: 0 0 12px !important;
		box-shadow: none !important;
		background: var(--pl-surface);
	}

	:root #navbarNav .nav-button-group .btn-cta-blue {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
	5. Section rhythm
	-------------------------------------------------------------------------- */
:root body > section.py-5,
:root body > section.section-bg,
:root body > section.process-section,
:root body > section.testimonial-section,
:root body > section#testimonials {
	padding-top: var(--pl-section) !important;
	padding-bottom: var(--pl-section) !important;
}

/* Remove extra outer margins that doubled the gap between some sections */
:root body > section.my-5 {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Section header block: badge → title → intro */
:root body section .badge-cyan-light + h2,
:root body section .badge-cyan-light + br + h2,
:root body section .section-badge + h2,
:root body section .mb-3 > .badge-cyan-light {
	margin-top: 0;
}

:root body section .text-center.mb-5 {
	margin-bottom: clamp(32px, 4vw, 52px) !important;
}

/* --------------------------------------------------------------------------
	6. Feature rows on product / industry pages
	-------------------------------------------------------------------------- */
:root .feature-item-section {
	padding-top: clamp(48px, 6vw, 88px) !important;
	padding-bottom: clamp(48px, 6vw, 88px) !important;
}

:root .feature-item-section.bg-light {
	background-color: var(--pl-surface) !important;
}

:root .feature-item-section .row {
	--bs-gutter-x: clamp(24px, 4vw, 64px);
}

:root .feature-item-section p,
:root .feature-item-section p.text-black {
	color: var(--pl-text) !important;
	max-width: 540px;
	font-size: 1.03rem;
}

:root .feature-item-section .badge-cyan-light {
	margin-bottom: 14px !important;
}

:root .feature-list {
	margin-bottom: 32px !important;
}

:root .feature-list-item {
	align-items: flex-start !important;
	margin-bottom: 12px !important;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.45;
}

:root .feature-list-item span,
:root .feature-list-item .text-black {
	color: var(--pl-ink) !important;
}

/* Check badges in brand blue (was lime green). Size/spacing only for the
   feature-list variant; other variants overlay an icon and keep their box. */
:root .badge-shape {
	color: var(--pl-blue);
}

:root .feature-list-item > .badge-shape {
	width: 20px;
	height: 20px;
	margin-top: 1px;
	margin-right: 12px !important;
}

/* Screenshot frames: every screenshot sits on the same quiet "stage", so
   rows line up regardless of each image's own proportions or shadow. */
:root .feature-shot-frame {
	max-width: 540px;
	background: linear-gradient(180deg, #F4F9FC 0%, #EEF5F9 100%);
	border: 1px solid #E6EEF4;
	border-radius: var(--pl-radius-lg);
}

:root .feature-item-section.bg-light .feature-shot-frame {
	background: #fff;
	border-color: var(--pl-line);
}

:root .feature-shot-frame > .feature-shot {
	padding: 22px;
	transition: transform .5s var(--pl-ease);
}

:root .feature-item-section:hover .feature-shot-frame > .feature-shot {
	transform: translateY(-4px);
}

/* Intro block above the feature rows: no double gap before the first row */
:root body > section.features-section {
	padding-top: var(--pl-section) !important;
	padding-bottom: 0 !important;
}

/* Feature tab strip */
:root .nav-scroller-custom {
	background-color: var(--pl-blue-50);
	border: 1px solid var(--pl-blue-100);
}

:root .nav-pills-custom .nav-link {
	font-size: 14.5px !important;
	padding: 8px 18px !important;
}

:root .nav-pills-custom .nav-link:not(.active):hover {
	color: var(--pl-blue-ink) !important;
	background: #fff !important;
}

:root .nav-pills-custom .nav-link.active {
	background-color: var(--pl-blue) !important;
	box-shadow: 0 6px 14px -8px rgba(0, 175, 235, .8) !important;
}

@media (max-width: 991.98px) {
	:root .feature-item-section {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	:root .feature-item-section .col-lg-6.text-start {
		margin-bottom: 8px;
	}

	:root .feature-item-section p,
	:root .feature-item-section p.text-black {
		max-width: none;
	}
}

/* --------------------------------------------------------------------------
	7. Cards — one family of radius, border and shadow
	-------------------------------------------------------------------------- */
:root .grant-card,
:root .blog-card,
:root .video-card,
:root .address-card {
	border: 1px solid var(--pl-line) !important;
	border-radius: var(--pl-radius-lg) !important;
	box-shadow: var(--pl-shadow) !important;
	transition: transform var(--pl-med) var(--pl-ease), box-shadow var(--pl-med) var(--pl-ease), border-color var(--pl-fast) ease;
}

:root .grant-card:hover,
:root .blog-card:hover,
:root .video-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--pl-shadow-lift) !important;
	border-color: var(--pl-blue-100) !important;
}

:root .blog-card .card-body h5,
:root .blog-card .card-body .fw-bold.text-dark {
	line-height: 1.35;
}

:root .link-read-more {
	color: var(--pl-blue-ink);
	font-weight: 600;
}

:root .video-thumb-wrapper {
	border-radius: 14px;
}

:root .client-name {
	font-weight: 700;
	color: var(--pl-ink);
}

:root .client-loc {
	color: var(--pl-muted);
	font-size: 0.9rem;
}

:root .client-desc {
	color: var(--pl-text);
	line-height: 1.6;
}

/* Homepage hero cards: same radius as the rest of the card family */
:root .feature-card-v2,
:root #hero-desktop .box-rounded,
:root #hero-mobile .card {
	border-radius: var(--pl-radius-lg) !important;
}

:root .feature-card-v2 {
	transition: transform var(--pl-med) var(--pl-ease);
}

:root .feature-card-v2:hover,
:root #hero-desktop .box-rounded:hover {
	transform: translateY(-3px);
}

:root #hero-desktop .box-rounded {
	transition: transform var(--pl-med) var(--pl-ease);
}

/* Stats / CTA blue panels */
:root .stats-card {
	border-radius: var(--pl-radius-lg);
}

/* Testimonial carousel controls */
:root #testimonials .carousel-control-prev-icon,
:root #testimonials .carousel-control-next-icon {
	transition: transform var(--pl-fast) ease, background-color var(--pl-fast) ease;
}

:root #testimonials .carousel-control-prev:hover .carousel-control-prev-icon,
:root #testimonials .carousel-control-next:hover .carousel-control-next-icon {
	transform: scale(1.06);
}

:root .carousel-item {
	transition-duration: .55s;
}

/* --------------------------------------------------------------------------
	8. Pricing enquiry form (Name / Phone / Email)
	-------------------------------------------------------------------------- */
:root .pricing-card {
	padding: clamp(20px, 3vw, 32px) !important;
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-radius-lg) !important;
	box-shadow: var(--pl-shadow-lift);
}

:root .pricing-field + .pricing-field {
	margin-top: 18px;
}

:root .pricing-form .form-label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--pl-ink);
}

:root .pricing-form .form-control {
	height: 52px;
	padding: 0 16px;
	font-size: 15px;
	color: var(--pl-ink);
	background-color: #fff;
	border: 1px solid var(--pl-line-2);
	border-radius: 12px;
	box-shadow: none;
	transition: border-color var(--pl-fast) ease, box-shadow var(--pl-fast) ease;
}

:root .pricing-form .form-control::placeholder {
	color: #8A929D;
}

:root .pricing-form .form-control:hover {
	border-color: #B9C2CD;
}

:root .pricing-form .form-control:focus {
	border-color: var(--pl-blue);
	box-shadow: 0 0 0 4px rgba(0, 175, 235, .16);
	outline: none;
}

:root .pricing-form .form-control.error {
	border-color: #C0392B;
	box-shadow: 0 0 0 4px rgba(192, 57, 43, .12);
}

/* intl-tel-input wrapper must fill the row */
:root .pricing-form .iti {
	display: block;
	width: 100%;
}

:root .pricing-form .iti input.form-control {
	padding-left: 92px;
}

:root .pricing-grant-note {
	margin-top: 20px;
	font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.1rem);
	line-height: 1.45;
	white-space: normal;
}

:root .pricing-form button[type="submit"] {
	min-width: 220px;
}

@media (max-width: 575.98px) {
	:root .pricing-form button[type="submit"] {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
	9. FAQ accordions
	-------------------------------------------------------------------------- */
:root .custom-accordion .accordion-item,
:root #faqAccordion .accordion-item {
	border-bottom: 1px solid var(--pl-line) !important;
	padding-bottom: 14px;
	margin-bottom: 14px !important;
	border-radius: 0;
}

:root #faqAccordion .accordion-button {
	gap: 16px;
	text-align: left;
}

:root #faqAccordion .accordion-button .fs-5 {
	font-size: 1.1rem !important;
	line-height: 1.4;
}

:root #faqAccordion .accordion-button i {
	flex-shrink: 0;
	font-size: 1.1rem !important;
	transition: transform var(--pl-med) var(--pl-ease);
}

:root #faqAccordion .accordion-button:not(.collapsed) i {
	transform: rotate(90deg);
}

:root #faqAccordion h5.text-info {
	color: var(--pl-blue-ink) !important;
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-top: 28px !important;
}

/* --------------------------------------------------------------------------
	10. Footer
	-------------------------------------------------------------------------- */
:root .footer-section {
	background-color: var(--pl-surface);
	border-top: 1px solid var(--pl-line);
	padding: clamp(56px, 6vw, 88px) 0 clamp(32px, 4vw, 48px);
}

/* Decorative blobs toned down: the footer reads as one calm surface */
:root .footer-section .blob {
	opacity: .35;
}

:root .footer-heading {
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pl-ink);
	margin-bottom: 16px;
}

:root .footer-list {
	margin-bottom: 28px !important;
}

:root .footer-link,
:root .footer-link-sub {
	color: var(--pl-muted);
	font-size: 0.95rem;
	line-height: 1.4;
	margin-bottom: 10px;
	transition: color var(--pl-fast) ease, transform var(--pl-fast) ease;
}

:root .footer-link:hover,
:root .footer-link-sub:hover {
	color: var(--pl-blue-ink);
	transform: translateX(2px);
}

:root .footer-sub-heading {
	font-size: 0.98rem !important;
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

:root .footer-section .address-card {
	background: #fff;
	padding: 24px;
}

:root .footer-section .map-container {
	border-radius: 12px;
	overflow: hidden;
	background: var(--pl-surface);
}

:root .footer-section .social-circle {
	transition: transform var(--pl-med) var(--pl-ease), background-color var(--pl-fast) ease;
}

:root .footer-section .social-circle:hover {
	transform: translateY(-2px);
	background-color: var(--pl-blue-600);
}

@media (max-width: 991.98px) {
	:root .footer-section .col-md-6,
	:root .footer-section .col-md-12 {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

/* --------------------------------------------------------------------------
	11. Workflow animations (homepage "Getting started" + mobile timeline)
	   js/polish.js adds the classes; without JS everything stays as before.
	-------------------------------------------------------------------------- */
:root .process-section .pl-wave-progress {
	fill: none;
	stroke: var(--pl-blue);
	stroke-width: 4;
	stroke-linecap: round;
	transition: stroke-dashoffset 1.6s var(--pl-ease);
}

:root .process-section circle.pl-node {
	transition: r var(--pl-med) var(--pl-ease), fill var(--pl-med) ease;
}

:root .process-section circle.pl-node.is-active {
	r: 10;
}

:root .process-section .pl-step {
	opacity: .45;
	transition: opacity .5s ease, transform .5s var(--pl-ease);
	transform: translateY(6px);
}

:root .process-section .pl-step.is-active {
	opacity: 1;
	transform: none;
}

:root .process-section .pl-step.is-active .step-badge {
	background-color: var(--pl-blue);
	border-color: var(--pl-blue);
	color: #fff;
	transition: background-color .4s ease, color .4s ease;
}

:root .journey-item.pl-step {
	opacity: .45;
	transition: opacity .5s ease;
}

:root .journey-item.pl-step.is-active {
	opacity: 1;
}

/* --------------------------------------------------------------------------
	12. Motion: hero entrance + scroll reveal
	-------------------------------------------------------------------------- */
@keyframes pl-rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

:root #hero-desktop h1,
:root #hero-mobile h1 {
	animation: pl-rise .7s var(--pl-ease) both;
}

:root #hero-desktop h1 + p,
:root #hero-desktop .hero-subtext,
:root #hero-desktop .hero-description,
:root #hero-mobile .mobile-subtext {
	animation: pl-rise .7s .08s var(--pl-ease) both;
}

:root #hero-desktop .btn-wrapper,
:root #hero-desktop .hero-content .d-flex.gap-3,
:root #hero-mobile .mobile-btn-container,
:root #hero-desktop .hero-plans-from {
	animation: pl-rise .7s .16s var(--pl-ease) both;
}

/* Reveal: polish.js puts .pl-reveal only on elements below the fold */
.pl-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .6s var(--pl-ease), transform .6s var(--pl-ease);
	transition-delay: var(--pl-delay, 0ms);
	will-change: opacity, transform;
}

.pl-reveal.is-in {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* --------------------------------------------------------------------------
	13. Responsive guards
	-------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
	:root body img {
		max-width: 100%;
	}

	/* mobile-only sections (pricing, brochure, try-software) used -15px side
	   margins that pushed them 15px past the screen edge */
	:root #pricing-mobile,
	:root section[style*="margin-left: -15px"],
	:root section[style*="margin-left:-15px"],
	:root div.d-lg-none[style*="margin-left: -15px"] {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

@media (max-width: 767.98px) {
	:root .btn-cta-blue,
	:root .btn-fit {
		min-height: 46px;
	}

	:root body > section.py-5 > .container,
	:root body > section > .container.px-4 {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

/* --------------------------------------------------------------------------
	14. Reduced motion: no movement, no reveal, essentials visible
	-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	:root *,
	:root *::before,
	:root *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	.pl-reveal,
	:root .process-section .pl-step,
	:root .journey-item.pl-step {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* --------------------------------------------------------------------------
	15. Grant badges on phones / tablets (includes/_grandsection.php)
	   Three across from 576px instead of a 2 + 1 stack; captions readable.
	-------------------------------------------------------------------------- */
:root .grant-mobile-grid .card {
	border: 1px solid var(--pl-line) !important;
	box-shadow: var(--pl-shadow-sm) !important;
	aspect-ratio: auto !important;
}

:root .grant-mobile-grid .card p {
	font-size: 11px !important;
	line-height: 1.4 !important;
}

@media (min-width: 576px) {
	:root .grant-mobile-grid .card p {
		font-size: 13px !important;
	}

	:root .grant-mobile-grid .card h6 {
		font-size: 14px !important;
	}
}

/* --------------------------------------------------------------------------
	16. Page hero — Moiboo Academy style, shared by every inner page
	   Same language as academy.moiboo.com: pale blue wash, a fine grid with
	   a soft glow at both edges, centred copy, and (on industry pages) the
	   animated module icon above the title. Every hero has the same height
	   on desktop and the same height on mobile, with the copy centred in it.

	   Everything here is decoration added with CSS (pseudo-elements and the
	   two empty .blue-blur-circle divs every hero already contains), so no
	   page markup or wording changes. The per-page icon is chosen in
	   includes/_head_link.php; the icons live in assets/img/hero/ and
	   animate on their own (CSS inside the SVG, which also honours
	   prefers-reduced-motion).
	-------------------------------------------------------------------------- */
:root {
	--pl-hero-top: 156px;
	--pl-hero-top-m: 112px;
	--pl-h1: clamp(2.4rem, 1.3rem + 2.4vw, 3.35rem);
	--pl-h1-m: clamp(2rem, 1.3rem + 3vw, 2.6rem);
	--pl-hero-wash: linear-gradient(180deg, #F4FBFE 0%, #F7FCFF 55%, #FFFFFF 100%);
}

/* Surface */
:root .hero-section-new,
:root .hero-mobile-new,
:root .features-hero {
	position: relative;
	overflow: hidden;
	background: var(--pl-hero-wash) !important;
	border-bottom: 0;
	isolation: isolate;
}

/* Edge grid + glow: reuse the two empty decorative divs in every hero */
:root .hero-section-new .blue-blur-circle,
:root .features-hero .blue-blur-circle {
	display: block !important;
	position: absolute !important;
	top: 0 !important;
	bottom: 0 !important;
	left: auto;
	right: auto;
	width: 40% !important;
	height: auto !important;
	border-radius: 0 !important;
	z-index: -1 !important;
	pointer-events: none;
	background:
		radial-gradient(closest-side, rgba(0, 175, 235, .22), rgba(0, 175, 235, 0)) no-repeat,
		linear-gradient(rgba(0, 175, 235, .12) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 175, 235, .12) 1px, transparent 1px) !important;
	background-size: 460px 380px, 44px 44px, 44px 44px !important;
	filter: none !important;
	opacity: 1 !important;
}

:root .hero-section-new .circle-left,
:root .features-hero .blob-left {
	left: 0 !important;
	right: auto !important;
	background-position: -170px 40px, 0 0, 0 0 !important;
	-webkit-mask-image: radial-gradient(ellipse 75% 70% at 0% 35%, #000 0%, transparent 100%);
	mask-image: radial-gradient(ellipse 75% 70% at 0% 35%, #000 0%, transparent 100%);
}

:root .hero-section-new .circle-right,
:root .features-hero .blob-right {
	right: 0 !important;
	left: auto !important;
	background-position: calc(100% + 170px) 40px, 100% 0, 100% 0 !important;
	-webkit-mask-image: radial-gradient(ellipse 75% 70% at 100% 35%, #000 0%, transparent 100%);
	mask-image: radial-gradient(ellipse 75% 70% at 100% 35%, #000 0%, transparent 100%);
}

/* Old mobile blobs are replaced by the wash */
:root .hero-mobile-new .mobile-blue-bg,
:root .features-hero .mobile-hero-blob {
	display: none !important;
}

/* Desktop layout: one fixed hero height on every page (680px). The copy is
   centred vertically in the space below the header, so short heroes
   (Contact) and long ones (industry pages with icon, price and buttons)
   end at exactly the same line. */
:root {
	--pl-hero-h: 680px;
	--pl-hero-h-m: max(700px, 100svh);  /* phones: one full screen, so every hero ends at the same point */
	--pl-nav-space: 120px;
	--pl-nav-space-m: 96px;
}

:root .hero-section-new,
:root .features-hero .contact-header {
	position: relative;
	flex-direction: column;
	justify-content: center;
	min-height: var(--pl-hero-h) !important;
	padding-top: var(--pl-nav-space) !important;
	padding-bottom: 64px !important;
	margin-top: 0 !important;
}

:root .hero-section-new .hero-content,
:root .features-hero .contact-header > .container {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	text-align: center;
}

:root .hero-section-new .hero-content .row > [class*="col-"] {
	max-width: 940px;
	margin-left: auto;
	margin-right: auto;
}

/* Flex only where Bootstrap shows each hero, so d-none / d-lg-none still win */
@media (min-width: 992px) {
	:root .hero-section-new.d-lg-block,
	:root .features-hero .contact-header.d-lg-block,
	:root .hero-section-new:not(.d-none) {
		display: flex !important;
	}
}

@media (max-width: 991.98px) {
	:root .hero-mobile-new.d-block,
	:root .features-hero > .container.d-lg-none,
	:root .hero-mobile-new:not(.d-none) {
		display: flex !important;
	}
}

/* Animated module icon above the title (industry pages; set per page) */
:root .hero-section-new .hero-content::before,
:root .hero-mobile-new .mobile-content::before {
	content: none;
	display: block;
	width: 76px;
	height: 76px;
	margin: 0 auto 22px;
	background: no-repeat center / contain;
	filter: drop-shadow(0 12px 22px rgba(0, 144, 194, .22));
}

/* Heading */
:root .hero-section-new h1,
:root .hero-section-new .hero-heading,
:root .features-hero .contact-title,
:root #hero-desktop.hero-section h1,
:root .mg-hero h1,
:root .ablc-hero h1 {
	font-size: var(--pl-h1) !important;
	font-weight: 800 !important;
	line-height: 1.06 !important;
	letter-spacing: -0.03em;
	color: #000;
}

:root .hero-section-new h1,
:root .features-hero .contact-title {
	max-width: 940px;
	margin: 0 auto 20px !important;
	padding: 0 !important;
	text-align: center;
}

/* Lead copy */
:root .hero-section-new .hero-content p:not(.hero-plans-from),
:root .features-hero .contact-header .breadcrumb-text,
:root .features-hero .contact-header .breadcrumb-text a {
	max-width: 620px;
	margin: 0 auto 30px !important;
	font-size: 1.125rem !important;
	line-height: 1.6;
	color: #3D4B5C !important;
	text-align: center;
}

:root .hero-section-new .hero-content p:last-child,
:root .features-hero .contact-header .breadcrumb-text:last-child {
	margin-bottom: 0 !important;
}

:root .hero-plans-from {
	margin: 0 auto 26px !important;
	font-size: 1.15rem;
}

/* Breadcrumb (Contact): white pill like the Academy search/popular chips */
:root .hero-section-new .breadcrumb-text {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-top: 6px;
	padding: 9px 20px;
	font-size: 0.95rem;
	font-weight: 600;
	color: #6B7785;
	background: rgba(255, 255, 255, .9);
	border: 1px solid #E3E8EE;
	border-radius: 999px;
	box-shadow: 0 8px 24px rgba(11, 27, 43, .06);
}

:root .hero-section-new .breadcrumb-text a:hover {
	color: var(--pl-blue-ink) !important;
}

:root .hero-section-new .breadcrumb-text span[style] {
	color: var(--pl-blue-ink) !important;
}

:root .hero-section-new .breadcrumb-text .mx-2 {
	color: #CDD5DE;
}

/* Laptop widths: narrower copy column */
@media (max-width: 1199.98px) {
	:root .hero-section-new .hero-content .row > [class*="col-"] {
		max-width: 760px;
	}
}

/* Mobile / tablet hero */
/* Phones / tablets: every hero is one full screen tall (at least 700px), copy centred */
:root .hero-mobile-new,
:root .features-hero > .container.d-lg-none {
	position: relative;
	flex-direction: column;
	justify-content: center;
	min-height: var(--pl-hero-h-m) !important;
	margin-top: 0 !important;
	padding: var(--pl-nav-space-m) 4px 48px !important;
	text-align: center;
}

:root .hero-mobile-new .mobile-content {
	width: 100%;
}

:root .hero-mobile-new .mobile-content {
	position: relative;
	z-index: 2;
	margin-top: 0 !important;
	padding-left: 20px !important;
	padding-right: 20px !important;
}

:root .hero-mobile-new .mobile-content::before {
	width: 64px;
	height: 64px;
	margin-bottom: 18px;
}

:root .hero-mobile-new h1,
:root .features-hero > .container.d-lg-none h1,
:root #hero-mobile h1 {
	font-size: var(--pl-h1-m) !important;
	font-weight: 800 !important;
	line-height: 1.08 !important;
	letter-spacing: -0.028em;
	margin: 0 auto 14px !important;
	padding: 0 !important;
	text-align: center;
	color: #000;
}

:root .hero-mobile-new p,
:root .hero-mobile-new .mobile-subtext,
:root .features-hero > .container.d-lg-none p {
	max-width: 36ch;
	margin: 0 auto 24px !important;
	padding: 0 !important;
	font-size: 1.02rem !important;
	line-height: 1.6;
	color: #3D4B5C !important;
	text-align: center;
}

:root .hero-mobile-new p:last-child {
	margin-bottom: 0 !important;
}

/* Magazine / Community keep their own layouts, same wash and heading */
@media (max-width: 991.98px) {
	:root .mg-hero h1,
	:root .ablc-hero h1 {
		font-size: var(--pl-h1-m) !important;
	}
}

/* --------------------------------------------------------------------------
	17. Header — refinements on top of section 4
	-------------------------------------------------------------------------- */
:root #main-navbar .navbar-nav .nav-link {
	font-size: 15.5px;
}

/* Current page: blue text + persistent underline (set by polish.js) */
:root #main-navbar .navbar-nav .nav-link.is-current,
:root #main-navbar .navbar-nav .nav-link.is-current-parent {
	color: var(--pl-blue-ink) !important;
	font-weight: 600;
}

@media (min-width: 992px) {
	:root #main-navbar .navbar-nav > .nav-item > .nav-link.is-current::before,
	:root #main-navbar .navbar-nav > .nav-item > .nav-link.is-current-parent::before {
		transform: scaleX(1);
	}
}

:root #main-navbar .dropdown-item.is-current,
:root #main-navbar .custom-submenu a.is-current {
	background-color: var(--pl-blue-50) !important;
	color: var(--pl-blue-ink) !important;
	font-weight: 600;
}

/* Chevrons on dropdown toggles turn with the menu */
:root #main-navbar .dropdown-toggle::after {
	transition: transform var(--pl-med) var(--pl-ease);
	vertical-align: 0.15em;
}

:root #main-navbar .dropdown-toggle.show::after {
	transform: rotate(180deg);
}

:root #main-navbar .custom-dropdown-menu .dropdown-item > i.fa-chevron-right {
	color: var(--pl-muted);
	transition: transform var(--pl-fast) ease, color var(--pl-fast) ease;
}

:root #main-navbar .dropdown-submenu:hover > .dropdown-item > i.fa-chevron-right {
	color: var(--pl-blue-ink);
	transform: translateX(2px);
}

/* WhatsApp + hamburger: same 40px control size */
:root #main-navbar .btn-whatsapp {
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	box-shadow: 0 6px 14px -8px rgba(37, 211, 102, .8);
	transition: transform var(--pl-med) var(--pl-ease);
}

:root #main-navbar .btn-whatsapp:hover {
	transform: translateY(-2px);
}

/* Mobile header bar once scrolled */
@media (max-width: 991.98px) {
	:root #main-navbar .custom-toggler-btn {
		width: 42px;
		height: 42px;
		padding: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		border-radius: 12px !important;
		background-color: var(--pl-blue) !important;
		border: 0 !important;
		box-shadow: 0 6px 14px -8px rgba(0, 175, 235, .8) !important;
	}

	:root #main-navbar .custom-toggler-btn i {
		font-size: 18px !important;
	}


	:root body #main-navbar.scrolled-mode {
		background-color: rgba(255, 255, 255, .94) !important;
		-webkit-backdrop-filter: saturate(160%) blur(12px);
		backdrop-filter: saturate(160%) blur(12px);
		border-bottom: 1px solid var(--pl-line);
		box-shadow: 0 8px 24px -18px rgba(16, 24, 40, .35) !important;
	}

	:root #main-navbar .moiboo-lang-select {
		height: 40px !important;
	}
}

/* --------------------------------------------------------------------------
	18. Footer — refinements on top of section 10
	-------------------------------------------------------------------------- */
:root .footer-section {
	background: linear-gradient(180deg, #F7F9FB 0%, #F2F5F8 100%) !important;
}

:root .footer-section .blob {
	display: none !important;
}

/* Column headings with a short brand-blue rule */
:root .footer-heading {
	position: relative;
	padding-bottom: 10px;
	margin-bottom: 16px !important;
}

:root .footer-heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: var(--pl-blue);
}

:root .footer-section .address-card .footer-heading::after {
	display: none;
}

/* "Other Products" accordion rows */
:root .footer-accordion .accordion-item {
	border-bottom: 1px solid var(--pl-line) !important;
	margin-top: 0 !important;
}

:root .footer-accordion .footer-sub-heading {
	padding: 12px 0 !important;
	font-weight: 600 !important;
}

:root .footer-accordion .footer-sub-heading i {
	transition: transform var(--pl-med) var(--pl-ease);
}

:root .footer-accordion .accordion-body {
	padding: 0 0 10px 0 !important;
}

/* Address card */
:root .footer-section .address-card {
	border-radius: var(--pl-radius-lg) !important;
	padding: 24px !important;
}

:root .footer-section .address-card .company-name {
	font-size: 1.05rem;
	color: var(--pl-ink);
}

:root .footer-section .address-text {
	color: var(--pl-text);
	line-height: 1.6;
}

:root .footer-section .contact-row {
	display: flex !important;
	align-items: center;
	gap: 4px;
	padding: 8px 12px;
	margin: 0 -12px;
	border-radius: 10px;
	transition: background-color var(--pl-fast) ease;
}

:root .footer-section .contact-row:hover {
	background-color: var(--pl-blue-50);
}

/* Social: outline circles that fill on hover (lime, like the buttons) */
:root .footer-section .social-container {
	display: flex;
	justify-content: center;
	gap: 10px;
}

:root .footer-section .social-circle {
	width: 42px !important;
	height: 42px !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	color: var(--pl-blue-ink) !important;
	background: #fff !important;
	border: 1px solid var(--pl-line) !important;
	border-radius: 50%;
	box-shadow: var(--pl-shadow-sm);
}

:root .footer-section .social-circle:hover {
	color: #fff !important;
	background: var(--pl-lime) !important;
	border-color: var(--pl-lime) !important;
	transform: translateY(-2px);
}

@media (max-width: 991.98px) {
	:root .footer-section {
		background: linear-gradient(180deg, #F7F9FB 0%, #F2F5F8 100%) !important;
		border-radius: 0 !important;
	}

	:root .footer-section .row > [class*="col-"] {
		margin-bottom: 8px;
	}

	:root .footer-section .address-card {
		margin-top: 8px;
	}
}

/* The header always sits above the hero surface (mobile navbar had no z-index) */
:root #main-navbar:not(.scrolled-mode) {
	z-index: 1000;
}

/* Long button labels may wrap on narrow phones instead of overflowing */
@media (max-width: 575.98px) {
	:root .btn-cta-blue,
	:root .btn-fit,
	:root .btn-fit-white,
	:root .final-cta-btn-white,
	:root .dev-btn-white,
	:root .dev-cta-btn-white,
	:root .dev-btn-blue,
	:root .ablc-btn-white,
	:root .ablc-btn-primary {
		white-space: normal;
		text-align: center;
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* Magazine / Community heroes: same wash as every other hero */
:root .mg-hero,
:root .ablc-hero {
	background: var(--pl-hero-wash) !important;
}

:root .mg-hero .mg-blob {
	display: none !important;
}

/* "Who Can Use" menu: the same animated module icons as Moiboo Academy
   (order in includes/_navbar.php: Workshop, Rental, Dealerships,
   Spareparts, Finance). The Font Awesome glyph stays in the markup for
   screen readers and as a fallback, it is just not painted. */
:root #main-navbar .navbar-nav > .nav-item:nth-child(2) .custom-dropdown-menu > li > .dropdown-item .icon-square-sm {
	width: 36px;
	height: 36px;
	background: transparent no-repeat center / 118%;
	border-radius: 10px;
	overflow: hidden;
}

:root #main-navbar .navbar-nav > .nav-item:nth-child(2) .custom-dropdown-menu > li > .dropdown-item .icon-square-sm i {
	visibility: hidden;
}

:root #main-navbar .navbar-nav > .nav-item:nth-child(2) .custom-dropdown-menu > li:nth-child(1) .icon-square-sm { background-image: url("../img/hero/icon-workshop.svg"); }
:root #main-navbar .navbar-nav > .nav-item:nth-child(2) .custom-dropdown-menu > li:nth-child(2) .icon-square-sm { background-image: url("../img/hero/icon-rental.svg"); }
:root #main-navbar .navbar-nav > .nav-item:nth-child(2) .custom-dropdown-menu > li:nth-child(3) .icon-square-sm { background-image: url("../img/hero/icon-dealerships.svg"); }
:root #main-navbar .navbar-nav > .nav-item:nth-child(2) .custom-dropdown-menu > li:nth-child(4) .icon-square-sm { background-image: url("../img/hero/icon-spare-parts.svg"); }
:root #main-navbar .navbar-nav > .nav-item:nth-child(2) .custom-dropdown-menu > li:nth-child(5) .icon-square-sm { background-image: url("../img/hero/icon-finance.svg"); }

/* Magazine reader: hide the floating header while an issue is open */
body.mg-locked #main-navbar {
	visibility: hidden;
}

/* --------------------------------------------------------------------------
	19. Testimonials — editorial cards in an auto-scrolling row
	   Markup: includes/_testimonial_cards.php. Photo on top, then the
	   white card body: quote mark, the customer's words, "— Name, Location".
	   All cards sit on one line and share one height. The row loops
	   seamlessly (list printed twice, track moves by exactly half).
	-------------------------------------------------------------------------- */
:root #testimonials,
:root #testimonials-section {
	background: #fff !important;
	overflow: hidden;
}

:root #testimonials .text-center.mb-5,
:root #testimonials-section .row.mb-5 {
	position: relative;
	max-width: 620px;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 24px 28px 8px;
}

/* Two faint vertical rules framing the heading, as in the reference */
:root #testimonials .text-center.mb-5::before,
:root #testimonials-section .row.mb-5::before {
	content: "";
	position: absolute;
	inset: -80px 0 -40px;
	border-left: 1px solid #EEF1F4;
	border-right: 1px solid #EEF1F4;
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
	pointer-events: none;
}

:root #testimonials h2,
:root #testimonials-section h2 {
	font-size: clamp(2rem, 1.2rem + 2.6vw, 3.1rem) !important;
	font-weight: 800 !important;
	line-height: 1.05 !important;
	letter-spacing: -0.035em;
	color: #000 !important;
}

:root #testimonials .feature-desc,
:root #testimonials-section .text-secondary {
	color: #3D434B !important;
	font-size: 1.02rem;
}

:root .tm-marquee {
	--tm-card-w: 370px;
	--tm-gap: 22px;
	position: relative;
	margin: 8px calc(50% - 50vw) 0;
	padding: 16px 0 24px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

:root .tm-track {
	display: flex;
	gap: var(--tm-gap);
	width: max-content;
	padding-left: var(--tm-gap);
	animation: tm-scroll calc(var(--tm-count) * 7s) linear infinite;
}

:root .tm-marquee:hover .tm-track,
:root .tm-marquee:focus-within .tm-track {
	animation-play-state: paused;
}

@keyframes tm-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(calc(-50% - var(--tm-gap) / 2)); }
}

:root .tm-card {
	flex: 0 0 var(--tm-card-w);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid #ECEFF2;
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px -18px rgba(16, 24, 40, .18);
	transition: transform .45s var(--pl-ease), box-shadow .45s var(--pl-ease);
}

:root .tm-card:hover {
	box-shadow: 0 2px 4px rgba(16, 24, 40, .05), 0 22px 44px -20px rgba(16, 24, 40, .28);
}

/* Photo with a soft fade into the card */
:root .tm-media {
	position: relative;
	display: block;
	width: 100%;
	height: 290px;
	padding: 0;
	border: 0;
	background: #F2F5F8;
	cursor: pointer;
}

:root .tm-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 25%;
	display: block;
	transition: transform .8s var(--pl-ease);
}

:root .tm-media::after {
	content: none;
}

:root .tm-card:hover .tm-media img {
	transform: scale(1.04);
}

/* Play button */
:root .tm-play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	margin: -29px 0 0 -29px;
	color: #fff;
	font-size: 16px;
	background: var(--pl-blue);
	border-radius: 50%;
	box-shadow: 0 0 0 8px rgba(255, 255, 255, .45), 0 12px 24px -8px rgba(0, 120, 166, .6);
	transition: transform .35s var(--pl-ease), box-shadow .35s var(--pl-ease);
}

:root .tm-play i {
	margin-left: 3px;
}

:root .tm-media:hover .tm-play,
:root .tm-media:focus-visible .tm-play {
	transform: scale(1.08);
	box-shadow: 0 0 0 12px rgba(255, 255, 255, .5), 0 16px 28px -8px rgba(0, 120, 166, .7);
}

:root .tm-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	position: relative;
	z-index: 1;
	padding: 26px 28px 24px;
}

:root .tm-quote {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 44px;
	font-weight: 700;
	line-height: .8;
	color: #0B0F14;
	margin-bottom: 8px;
}

:root .tm-text {
	flex: 1;
	margin: 0 0 18px;
	font-size: 1.08rem;
	font-weight: 500;
	line-height: 1.42;
	color: #0B0F14;
}

:root .tm-by {
	margin: 0;
	text-align: right;
	font-size: .95rem;
	color: #6B7280;
}

:root .tm-by .client-name,
:root .tm-by .client-loc {
	font-size: inherit !important;
	font-weight: 500 !important;
	color: inherit !important;
	margin: 0 !important;
}

/* Testimonials followed by the free-trial band: one normal gap, not two */
:root #testimonials-section:has(+ .ft-section) {
	padding-bottom: 8px !important;
}

@media (max-width: 767.98px) {
	:root .tm-marquee {
		--tm-card-w: 290px;
		--tm-gap: 16px;
		padding-top: 32px;
	}

	:root .tm-media {
		height: 230px;
	}

	:root .tm-body {
		padding: 22px 22px 20px;
	}

	:root .tm-text {
		font-size: 1rem;
	}
}

/* Reduced motion: a still row the visitor can swipe or scroll */
@media (prefers-reduced-motion: reduce) {
	:root .tm-marquee {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-mask-image: none;
		mask-image: none;
	}

	:root .tm-track {
		animation: none !important;
	}

	:root .tm-card {
		scroll-snap-align: center;
	}

	:root .tm-card[aria-hidden="true"] {
		display: none;
	}
}

/* --------------------------------------------------------------------------
	20. Free-trial band (includes/_free_trial.php)
	   Shown under Testimonials on every "Who Can Use" industry page.
	-------------------------------------------------------------------------- */
:root .ft-section {
	padding: clamp(32px, 5vw, 64px) 0 clamp(48px, 6vw, 88px);
	background: #fff;
}

:root .ft-panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
	padding: clamp(28px, 4.5vw, 56px);
	background: linear-gradient(135deg, #EAF7FD 0%, #F3FAFE 55%, #F7FBFE 100%);
	border: 1px solid #DCEFF8;
	border-radius: 24px;
}

:root .ft-pill {
	display: inline-block;
	padding: 7px 16px;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #fff;
	background: var(--pl-blue);
	border-radius: 999px;
}

:root .ft-title {
	margin: 18px 0 14px;
	font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.3rem) !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em;
	line-height: 1.15 !important;
	color: #000;
}

:root .ft-lead {
	max-width: 560px;
	margin: 0 0 22px;
	font-size: 1.08rem;
	line-height: 1.65;
	color: #4A5160;
}

:root .ft-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

:root .ft-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 12px;
	font-size: 1.02rem;
	color: #1E242B;
}

:root .ft-list li:last-child {
	margin-bottom: 0;
}

:root .ft-check {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin-top: 3px;
	color: var(--pl-blue);
}

:root .ft-card {
	padding: 30px 26px;
	text-align: center;
	background: #fff;
	border: 1px solid #E3EEF4;
	border-radius: 20px;
	box-shadow: 0 16px 36px -24px rgba(0, 100, 140, .35);
}

:root .ft-days {
	display: block;
	font-size: 3.6rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--pl-blue);
}

:root .ft-days-label {
	display: block;
	margin: 8px 0 22px;
	font-weight: 700;
	color: #4A5160;
}

:root .ft-card .btn-cta-blue {
	width: 100%;
	white-space: normal;
	justify-content: center;
	text-align: center;
}

:root .ft-note {
	margin: 16px 0 0;
	font-size: .98rem;
	line-height: 1.55;
	color: #4A5160;
}

@media (max-width: 991.98px) {
	:root .ft-panel {
		grid-template-columns: 1fr;
	}

	:root .ft-card {
		max-width: 420px;
		width: 100%;
		margin: 0 auto;
	}
}

/* Testimonial wrappers: plain white like the reference (the old tinted panel
   clipped the full-width card row at its rounded edges) */
:root #testimonials .testimonial-wrapper-container,
:root #testimonials-section .video-testimonial-custom-wrapper {
	background: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* --------------------------------------------------------------------------
	21. Headings in pure black (was charcoal) across the site.
	   Headings that are meant to be white or coloured (on blue CTA / stats
	   panels, text-white / text-info / text-primary utilities, the blue
	   free-trial "10") keep their colour.
	-------------------------------------------------------------------------- */
/* :where() keeps this low-specificity (0,1,1) so the exceptions below win */
:root body :where(h1, h2, h3, h4, h5, h6):not(:where(.text-white, .text-info, .text-primary, .text-secondary, [class*="text-cyan"], [class*="text-blue"])) {
	color: #000 !important;
}

/* White headings on blue panels stay white */
:root body h2.cta-title,
:root body .ablc-cta-banner h2,
:root body .mg-band h2 {
	color: #fff !important;
}

/* --------------------------------------------------------------------------
	22. Moiboo animated content icons (assets/js/polish-icons.js)
	   The script appends an inline SVG to each content icon <i> and hides the
	   Font Awesome glyph. Lines are 1.7px, rounded, in currentColor; ".tone"
	   is a soft fill of the same colour. Motion runs only while the icon is
	   on screen (.mbi-play) and never with reduced motion.
	-------------------------------------------------------------------------- */
i.mbi-on {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	line-height: 1;
	font-style: normal;
}

i.mbi-on::before {
	content: none !important;
	display: none !important;
}

.mbi {
	width: 1.15em;
	height: 1.15em;
	overflow: visible;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mbi .tone {
	fill: currentColor;
	fill-opacity: .2;
}

.mbi .solid {
	fill: currentColor;
	stroke: none;
}

.mbi g,
.mbi path,
.mbi circle,
.mbi rect,
.mbi ellipse {
	transform-box: fill-box;
	transform-origin: center;
}

/* Contact cards: the glyph sat large in its circle; keep the icon inside it */
:root .card-icon i.mbi-on .mbi {
	width: .95em;
	height: .95em;
}

/* ---- motion vocabulary (each icon picks the parts it needs) ---- */
.mbi-play .a-bob { animation: mbi-bob 2.6s ease-in-out infinite var(--d, 0s); }
.mbi-play .a-quick { animation-duration: 1.4s; }
.mbi-play .a-shadow { animation: mbi-shadow 2.6s ease-in-out infinite; }
.mbi-play .a-ring { transform-origin: 30% 30%; animation: mbi-ring 2.8s ease-in-out infinite; }
.mbi-play .a-wave { animation: mbi-wave 1.8s ease-in-out infinite var(--d, 0s); }
.mbi-play .a-flap { animation: mbi-flap 3s ease-in-out infinite; }
.mbi-play .a-pop { animation: mbi-pop 2.4s ease-in-out infinite var(--d, 0s); }
.mbi-play .a-fly { animation: mbi-fly 2.8s ease-in-out infinite; }
.mbi-play .a-draw { stroke-dasharray: 1; animation: mbi-draw 3.2s ease-in-out infinite var(--d, 0s); }
.mbi-play .a-push { animation: mbi-push 2.2s ease-in-out infinite; }
.mbi-play .a-drop { animation: mbi-drop 2.4s ease-in-out infinite; }
.mbi-play .a-rise { animation: mbi-rise 2.4s ease-in-out infinite; }
.mbi-play .a-tick { animation: mbi-tick 2.4s ease-in-out infinite var(--d, 0s); }
.mbi-play .a-lift { animation: mbi-lift 2.6s ease-in-out infinite; }
.mbi-play .a-shackle { animation: mbi-shackle 3s ease-in-out infinite; }
.mbi-play .a-write { animation: mbi-write 2.2s ease-in-out infinite; }
.mbi-play .a-grow { transform-origin: 50% 100%; animation: mbi-grow 2.6s ease-in-out infinite var(--d, 0s); }
.mbi-play .a-slice { animation: mbi-slice 2.6s ease-in-out infinite; }
.mbi-play .a-needle { transform-origin: 0% 100%; animation: mbi-needle 3s ease-in-out infinite; }
.mbi-play .a-spin { animation: mbi-spin 6s linear infinite; }
.mbi-play .a-slow { animation-duration: 9s; }
.mbi-play .a-rev { animation-direction: reverse; }
.mbi-play .a-swing { transform-origin: 85% 15%; animation: mbi-swing 2.6s ease-in-out infinite; }
.mbi-play .a-drive { animation: mbi-drive 1.6s ease-in-out infinite; }
.mbi-play .a-dash { stroke-dasharray: 3 3; animation: mbi-dash 1s linear infinite; }
.mbi-play .a-march { stroke-dasharray: 2 2.5; animation: mbi-dash 1.2s linear infinite; }
.mbi-play .a-door { transform-origin: 50% 100%; animation: mbi-door 3s ease-in-out infinite; }
.mbi-play .a-slat { animation: mbi-pulse 2.4s ease-in-out infinite var(--d, 0s); }
.mbi-play .a-pulse { animation: mbi-pulse 2.4s ease-in-out infinite var(--d, 0s); }
.mbi-play .a-blinkled { animation: mbi-led 1.6s steps(2, jump-none) infinite var(--d, 0s); }
.mbi-play .a-flow { animation: mbi-pulse 1.5s ease-in-out infinite var(--d, 0s); }
.mbi-play .a-turn { animation: mbi-turn 3.4s ease-in-out infinite; }
.mbi-play .a-type { animation: mbi-type 1.2s ease-in-out infinite var(--d, 0s); }
.mbi-play .a-beat { animation: mbi-beat 1.6s ease-in-out infinite; }
.mbi-play .a-blink { animation: mbi-blink 3.6s ease-in-out infinite; }
.mbi-play .a-flash { animation: mbi-pulse 1.4s ease-in-out infinite; }
.mbi-play .a-glow { animation: mbi-glow 2.4s ease-in-out infinite; }
.mbi-play .a-snap { animation: mbi-snap 2.8s ease-in-out infinite; }
.mbi-play .a-print { animation: mbi-print 2.6s ease-in-out infinite; }
.mbi-play .a-spray { animation: mbi-spray 1.6s ease-out infinite var(--d, 0s); }
.mbi-play .a-shake { transform-origin: 50% 60%; animation: mbi-shake 2.4s ease-in-out infinite; }
.mbi-play .a-scan { animation: mbi-scan 3s ease-in-out infinite; }
.mbi-play .a-drawer { animation: mbi-drawer 2.8s ease-in-out infinite; }
.mbi-play .a-loop { animation-duration: 3.6s; }

@keyframes mbi-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
@keyframes mbi-shadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.75); opacity: .6; } }
@keyframes mbi-ring { 0%, 60%, 100% { transform: rotate(0); } 64% { transform: rotate(-12deg); } 70% { transform: rotate(10deg); } 76% { transform: rotate(-8deg); } 82% { transform: rotate(5deg); } }
@keyframes mbi-wave { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes mbi-flap { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1.2px); } }
@keyframes mbi-pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }
@keyframes mbi-fly { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(1.5px, -1.5px); } }
@keyframes mbi-draw { 0% { stroke-dashoffset: 1; } 45%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@keyframes mbi-push { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1.8px); } }
@keyframes mbi-drop { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(1.2px); } }
@keyframes mbi-rise { 0%, 100% { transform: translateY(1px); } 50% { transform: translateY(-1.5px); } }
@keyframes mbi-tick { 0%, 100% { opacity: .35; } 40%, 60% { opacity: 1; } }
@keyframes mbi-lift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.2px); } }
@keyframes mbi-shackle { 0%, 70%, 100% { transform: translateY(0); } 80%, 90% { transform: translateY(-1.2px); } }
@keyframes mbi-write { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(-1px, .6px) rotate(-6deg); } }
@keyframes mbi-grow { 0%, 100% { transform: scaleY(.55); } 50% { transform: scaleY(1); } }
@keyframes mbi-slice { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(1.2px, -1.2px); } }
@keyframes mbi-needle { 0%, 100% { transform: rotate(-40deg); } 50% { transform: rotate(18deg); } }
@keyframes mbi-spin { to { transform: rotate(360deg); } }
@keyframes mbi-swing { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-14deg); } }
@keyframes mbi-drive { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1.2px); } }
@keyframes mbi-dash { to { stroke-dashoffset: -6; } }
@keyframes mbi-door { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.6); } }
@keyframes mbi-pulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes mbi-led { 0% { opacity: .25; } 100% { opacity: 1; } }
@keyframes mbi-turn { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.35); } }
@keyframes mbi-type { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-1.2px); opacity: 1; } }
@keyframes mbi-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.14); } 30% { transform: scale(1); } 45% { transform: scale(1.08); } }
@keyframes mbi-blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.1); } }
@keyframes mbi-glow { 0%, 100% { fill-opacity: .1; } 50% { fill-opacity: .45; } }
@keyframes mbi-snap { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(.8px, -.8px) rotate(6deg); } }
@keyframes mbi-print { 0%, 100% { transform: translateY(-1.5px); } 50% { transform: translateY(1px); } }
@keyframes mbi-spray { 0% { opacity: 0; transform: translate(-2px, 1px) scale(.4); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(1px, -1px) scale(1); } }
@keyframes mbi-shake { 0%, 60%, 100% { transform: translateY(0); } 70% { transform: translateY(-1px); } 80% { transform: translateY(.8px); } 90% { transform: translateY(-.5px); } }
@keyframes mbi-scan { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(1.2px, -.8px); } 66% { transform: translate(-1px, .6px); } }
@keyframes mbi-drawer { 0%, 60%, 100% { transform: translateY(0); } 75%, 85% { transform: translateY(1.4px); } }

/* Card hover: the icon wakes up a little more */
:root .card:hover .mbi,
:root [class*="card"]:hover .mbi {
	transform: scale(1.06);
	transition: transform .35s var(--pl-ease);
}

@media (prefers-reduced-motion: reduce) {
	.mbi *,
	.mbi {
		animation: none !important;
	}
}

/* Gear teeth: short and chunky so the cog reads as a gear */
.mbi .teeth {
	stroke-width: 2.8;
	stroke-linecap: butt;
}