/*
Theme Name: Boardent
Description: Boardent theme for WordPress.
Author: Better Codes
Author URI: https://bettercodes.com
Theme URI: https://boardent.com
Version: 1.0.0
Text Domain: boardent
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

html { scroll-behavior: smooth; }
		body { font-family: Geist, system-ui, sans-serif; color: #101214; -webkit-font-smoothing: antialiased; }

		.eyebrow { letter-spacing: .14em; }
		.h-display { font-family: Geist, system-ui, sans-serif; letter-spacing: -0.02em; line-height: 1.05; }
		.hero-grad { background: radial-gradient(120% 80% at 50% -10%, #DFF2FE 0%, #EAF6FF 35%, #F4FAFF 60%, #FFFFFF 100%); }
		.sky-grad { background: linear-gradient(180deg, #8FD3F6 0%, #BFE6FB 40%, #E7F5FE 100%); }
		.card { border: 1px solid #E7EBF1; border-radius: 16px; background: #fff; }
		.soft-shadow { box-shadow: 0 24px 60px -28px rgba(16, 18, 20, .28); }
		.tab-pill { border: 1px solid #E7EBF1; }
		.faq-item[open] .faq-plus { transform: rotate(45deg); }
		.faq-plus { transition: transform .2s ease; }
		summary::-webkit-details-marker { display: none; }
		.wordmark { font-family: Geist, system-ui, sans-serif; font-weight: 800; letter-spacing: -0.04em; background: linear-gradient(180deg, #3A3D42 0%, #101214 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
		.mock-row { border-bottom: 1px solid #EEF1F5; }
		.hero-tag { background: rgba(240, 241, 242, 0.2); border: 1px solid rgba(211, 216, 221, 0.2); }
		.hero-tabs { backdrop-filter: blur(4px); background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.6); }
		.hero-tab-active { backdrop-filter: blur(2px); background: #fff; }
		.btn-outline { border: 0.75px solid #101214; }
		.dash-frame { background-image: linear-gradient(151.66deg, rgba(255, 255, 255, 0.24) 44.6%, rgba(255, 255, 255, 0) 97.8%); border: 1px solid rgba(255, 255, 255, 0.6); }
		.dash-fade { background: linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0) 10%); }
		.no-scrollbar::-webkit-scrollbar { display: none; }
		.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

		.agency-feature-image-sticky {
			position: -webkit-sticky;
			position: sticky;
			top: 100px;
			align-self: flex-start;
			height: auto;
			transition: all 0.3s ease;
		}

		.sr-only {
			position: absolute;
			width: 1px;
			height: 1px;
			padding: 0;
			margin: -1px;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			white-space: nowrap;
			border: 0;
		}

		.pricing-table-wrap {
			overflow-x: auto;
			-webkit-overflow-scrolling: touch;
			border: 1px solid #d3d8dd;
			border-radius: 8px;
			background: #fff;
		}

		.pricing-table {
			width: 100%;
			min-width: 760px;
			border-collapse: collapse;
			font-size: 14px;
			line-height: 22px;
			letter-spacing: -0.2px;
		}

		.pricing-table th,
		.pricing-table td {
			padding: 14px 16px;
			border-bottom: 1px solid #eef1f5;
			vertical-align: middle;
			text-align: center;
		}

		.pricing-table thead th {
			font-weight: 600;
			font-size: 15px;
			color: #101214;
			background: #f8f9fa;
			border-bottom: 1px solid #d3d8dd;
		}

		.pricing-table tbody tr:last-child th,
		.pricing-table tbody tr:last-child td {
			border-bottom: none;
		}

		.pricing-table__feature-col {
			position: sticky;
			left: 0;
			z-index: 2;
			min-width: 220px;
			max-width: 280px;
			text-align: left !important;
			font-weight: 500;
			color: #101214;
			background: #fff;
			box-shadow: 1px 0 0 #eef1f5;
		}

		.pricing-table thead .pricing-table__feature-col {
			background: #f8f9fa;
			box-shadow: 1px 0 0 #d3d8dd;
		}

		.pricing-table tbody tr:nth-child(even) .pricing-table__feature-col {
			background: #fcfcfd;
		}

		.pricing-table tbody tr:nth-child(even) td {
			background: #fcfcfd;
		}

		.pricing-table td {
			color: #686f76;
			min-width: 120px;
		}

		.pricing-table thead th:nth-child(4) {
			color: #0f60e4;
		}

		.pricing-table__check {
			display: inline-flex;
			align-items: center;
			justify-content: center;
		}

		.pricing-table__dash {
			color: #c7c7c7;
			font-weight: 500;
		}

		/* Mobile nav toggle bars, always dark on light header */
		.mobile-nav-toggle {
			position: relative;
		}
		.mobile-nav-toggle span {
			background-color: #101214;
			transition: transform 0.28s ease, opacity 0.2s ease, width 0.28s ease;
			transform-origin: center;
		}
		.mobile-nav-toggle.is-active span:nth-child(1) {
			transform: translateY(7px) rotate(45deg);
		}
		.mobile-nav-toggle.is-active span:nth-child(2) {
			opacity: 0;
			transform: scaleX(0);
		}
		.mobile-nav-toggle.is-active span:nth-child(3) {
			transform: translateY(-7px) rotate(-45deg);
		}

		/* Sticky nav mobile menu */
		.sticky-mobile-nav {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 16px;
			padding: 0 20px;
			max-height: 0;
			overflow: hidden;
			opacity: 0;
			background: rgba(255, 255, 255, 0.98);
			border-bottom: 1px solid transparent;
			font-size: 16px;
			letter-spacing: -0.3px;
			transition: max-height 0.32s ease, opacity 0.24s ease, padding 0.32s ease, border-color 0.24s ease;
		}
		.sticky-mobile-nav.is-open {
			max-height: 420px;
			opacity: 1;
			padding-bottom: 18px;
			border-bottom-color: #E7EBF1;
		}

		@media (max-width: 1023px) {
			#navbarArea,
			#navbarArea > div {
				overflow: visible;
			}
			#primaryNav.primary-nav {
				display: none;
				flex-direction: column;
				align-items: flex-start;
				gap: 16px;
				position: absolute;
				top: calc(100% + 12px);
				left: 0;
				right: 0;
				background: #fff;
				border: 1px solid #E7EBF1;
				border-radius: 14px;
				padding: 0 20px;
				box-shadow: 0 24px 60px -28px rgba(16, 18, 20, .28);
				z-index: 1200;
				max-height: 0;
				overflow: hidden;
				opacity: 0;
				white-space: normal;
				transition: max-height 0.32s ease, opacity 0.24s ease, padding 0.32s ease;
			}
			#primaryNav.primary-nav.is-open {
				display: flex !important;
				max-height: 420px;
				opacity: 1;
				padding-top: 18px;
				padding-bottom: 18px;
			}
		}

		@media (min-width: 1024px) {
			#primaryNav.primary-nav {
				display: flex !important;
			}
		}

		/* tab bar */
		.hero-tabs { background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(255, 255, 255, 0.65); backdrop-filter: blur(10px); box-shadow: 0 16px 44px -20px rgba(16, 18, 20, .22); }
		.hero-tab-active { background: #fff; backdrop-filter: none; box-shadow: 0 2px 8px rgba(16, 18, 20, .14), 0 0 0 1px rgba(16, 18, 20, .05); }

		/* features & solutions mega menu */
		#navbarArea { position: relative; z-index: 50; }
		#featuresDropdown,
		#solutionsDropdown {
			position: fixed; left: 0; right: 0; /* top set by JS → spans full viewport */
			backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
			background: rgba(255,255,255,0.9);
			border-bottom: 1px solid #e7ebf1;
			opacity: 0; transform: translateY(-8px);
			transition: opacity 0.18s ease, transform 0.18s ease;
			pointer-events: none; z-index: 1001;
		}
		#navbarArea.features-open #featuresDropdown,
		#navbarArea.solutions-open #solutionsDropdown { opacity: 1; transform: translateY(0); pointer-events: auto; }
		.nav-features-active { font-weight: 600; color: #101214; text-decoration: underline; }
		.feature-menu-thumb { background: #b8d9f0; border-radius: 2.56px; overflow: hidden; position: relative; width: 320px; height: 214px; flex-shrink: 0; }
		.feature-menu-dash-frame { background: linear-gradient(151.66deg, rgba(255,255,255,0.24) 44.6%, rgba(255,255,255,0) 97.8%); border: 0.32px solid rgba(255,255,255,0.6); border-radius: 12.8px 12.8px 0 0; padding: 7.68px; position: absolute; left: 10px; top: 10px; right: 0; }
		.feature-menu-dash-frame > div { width: 288px !important; height: 200px !important; }

		#featuresDropdown > div,
		#solutionsDropdown > div,
		#stickyFeaturesDropdown > div,
		#stickySolutionsDropdown > div {
			padding-top: 16px;
			padding-bottom: 20px;
			gap: 40px;
		}
		#featuresDropdown .mega-menu-item,
		#solutionsDropdown .mega-menu-item,
		#stickyFeaturesDropdown .mega-menu-item,
		#stickySolutionsDropdown .mega-menu-item {
			padding: 8px 10px;
			gap: 12px;
		}
		#featuresDropdown .mega-menu-item img,
		#solutionsDropdown .mega-menu-item img,
		#stickyFeaturesDropdown .mega-menu-item img,
		#stickySolutionsDropdown .mega-menu-item img {
			width: 32px;
			height: 32px;
		}
		#featuresDropdown .mega-title,
		#solutionsDropdown .mega-title,
		#stickyFeaturesDropdown .mega-title,
		#stickySolutionsDropdown .mega-title {
			font-size: 15px;
			line-height: 1.35;
		}
		#featuresDropdown .mega-menu-item span.font-normal,
		#solutionsDropdown .mega-menu-item span.font-normal,
		#stickyFeaturesDropdown .mega-menu-item span.font-normal,
		#stickySolutionsDropdown .mega-menu-item span.font-normal {
			font-size: 13px;
			line-height: 1.45;
			width: 220px;
		}

		/* sticky nav mega menu, desktop only (full bar dropdown) */
		#stickyFeaturesDropdown,
		#stickySolutionsDropdown {
			display: none;
			position: fixed;
			left: 0;
			right: 0; /* top set by JS */
			backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
			background: rgba(255,255,255,0.96);
			border-bottom: 1px solid #e7ebf1;
			opacity: 0;
			transform: translateY(-8px);
			transition: opacity 0.18s ease, transform 0.18s ease;
			pointer-events: none;
			z-index: 1001;
		}
		#sticky-nav.features-open #stickyFeaturesDropdown,
		#sticky-nav.solutions-open #stickySolutionsDropdown { opacity: 1; transform: translateY(0); pointer-events: auto; }

		@media (min-width: 1024px) {
			#featuresDropdown,
			#solutionsDropdown,
			#stickyFeaturesDropdown,
			#stickySolutionsDropdown {
				display: block;
			}
		}

		/* Inline Features submenu (mobile, opens below Features with icons) */
		.nav-features-group {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 0;
			width: 100%;
		}
		@media (min-width: 1024px) {
			.nav-features-group.lg\:contents {
				display: contents;
			}
		}
		.features-submenu {
			display: none;
			flex-direction: column;
			width: 100%;
			padding-top: 6px;
			padding-left: 4px;
			gap: 6px;
		}
		.features-submenu.is-open {
			display: flex;
		}
		.features-submenu .features-mega-menu {
			flex-direction: column;
			width: 100%;
			gap: 6px;
		}
		.features-submenu .features-mega-menu > div {
			width: 100%;
			gap: 6px !important;
		}
		.features-submenu .mega-menu-item {
			padding: 6px 6px;
			gap: 8px;
			align-items: center;
			border-radius: 6px;
		}
		.features-submenu .mega-menu-item img {
			width: 20px !important;
			height: 20px !important;
		}
		.features-submenu .mega-title {
			font-size: 14px;
			line-height: 1.25;
		}
		.features-submenu .mega-menu-item span.font-normal {
			display: none;
		}
		.features-submenu .mega-menu-item > div {
			line-height: 1.25 !important;
		}

		@media (max-width: 1023px) {
			#featuresDropdown,
			#stickyFeaturesDropdown {
				display: none !important;
			}
			#primaryNav.primary-nav.is-open {
				max-height: 520px;
				overflow-y: auto;
			}
			.sticky-mobile-nav.is-open {
				max-height: 520px;
				overflow-y: auto;
			}
		}

		/* mega menu item hover transitions */
		.mega-menu-item { transition: background 0.15s ease; }
		.mega-menu-item:hover { background: #f0f1f2; }
		.mega-title { transition: color 0.15s ease, font-weight 0.15s ease, text-decoration-color 0.15s ease; text-decoration: underline transparent; text-underline-offset: 3px; }
		.mega-menu-item:hover .mega-title { color: #0f60e4; font-weight: 600; text-decoration-color: #0f60e4; }

		/* marquee */
		@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
		.marquee-track { animation: marquee 24s linear infinite; display: flex; width: max-content; }
		.marquee-track:hover { animation-play-state: paused; }
		/* each set is a flex row; padding-right = gap so the loop boundary is seamless */
		.marquee-set { display: flex; align-items: center; gap: 88px; padding-right: 88px; }

		/* Cards */
		.why-card, .feat-overview-card, .crm-flow-card { background: #fff; position: relative; overflow: hidden; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; }
		.why-card::before, .feat-overview-card::before, .crm-flow-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, #f4fcff, #fff); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; border-radius: inherit; z-index: 0; }
		.why-card:hover::before, .feat-overview-card:hover::before, .crm-flow-card:hover::before { opacity: 1; }
		.why-card:hover, .feat-overview-card:hover, .crm-flow-card:hover { border-color: rgba(15,96,228,0.4) !important; box-shadow: 0 4px 20px -4px rgba(15,96,228,0.15) !important; transform: translateY(-2px) !important; }
		.why-card > *, .feat-overview-card > *, .crm-flow-card > * { position: relative; z-index: 1; }
		.exp-card-wrap { transition: box-shadow 0.25s ease, transform 0.25s ease; }
		.exp-card-wrap:hover { box-shadow: 0 8px 32px -8px rgba(16,18,20,0.16); transform: translateY(-3px); }
		.feat-img-panel { transition: box-shadow 0.3s ease; }
		.feat-img-panel:hover { box-shadow: 0 24px 64px -12px rgba(16,18,20,0.18); }
		.feat-dash-img { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
		.feat-img-panel:hover .feat-dash-img { transform: translateY(-8px) scale(1.015); }
		.feat-pill { transition: background 0.15s ease, border-color 0.15s ease; }
		.feat-pill:hover { background: #f0f1f2; border-color: #b8bfc7; }
		.integ-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
		.integ-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px -4px rgba(15,96,228,0.12), 0 1px 1.5px rgba(0,0,0,0.05) !important; }
		.btn-explore { transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; }
		.btn-explore:hover { background: #0c4fbe !important; transform: translateY(-1px); box-shadow: 0 4px 16px -4px rgba(15,96,228,0.4); }

		/* Sticky nav */
		#sticky-nav {
			position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
			border-bottom: 1px solid #e7ebf1;
			transform: translateY(-100%);
			transition: transform 0.32s cubic-bezier(0.4,0,0.2,1), box-shadow 0.32s ease;
			overflow: visible;
		}
		#sticky-nav::before {
			content: ""; position: absolute; inset: 0; z-index: -1;
			background: rgba(255,255,255,0.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
		}
		#sticky-nav.is-visible { transform: translateY(0); box-shadow: 0 4px 24px -8px rgba(16,18,20,0.10); }

		/* Button hovers */
		.btn-outline { transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease; }
		.btn-outline:hover { background: #0f60e4 !important; color: #fff !important; border-color: #0f60e4 !important; transform: translateY(-1px); box-shadow: 0 4px 14px -4px rgba(15,96,228,0.35); }
		.btn-ghost { transition: background 0.15s ease, transform 0.15s ease; }
		.btn-ghost:hover { background: #f5f6f7; transform: translateY(-1px); }
		#cta a[style*="border"] { transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; }
		#cta a[style*="border"]:hover { background: #f5f6f7 !important; transform: translateY(-1px); }
		nav a, #sticky-nav a { transition: color 0.15s ease; }
		.why-card { transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
		.why-card:hover { border-color: #b0bbc6; box-shadow: 0 6px 24px -8px rgba(16,18,20,0.12); transform: translateY(-2px); }
		.feat-overview-card { transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
		.feat-overview-card:hover { border-color: #b0bbc6; box-shadow: 0 6px 24px -8px rgba(16,18,20,0.10); transform: translateY(-2px); }
		#site-footer a { transition: color 0.15s ease, opacity 0.15s ease; }

		/* Custom cursor */
		@media (hover: hover) and (pointer: fine) {
			#cursor-dot { position: fixed; z-index: 100000; pointer-events: none; width: 6px; height: 6px; border-radius: 50%; background: #fff; top: 0; left: 0; mix-blend-mode: difference; transition: opacity .18s ease; will-change: transform; opacity: 0; }
			#cursor-ring { position: fixed; z-index: 99999; pointer-events: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #fff; top: 0; left: 0; mix-blend-mode: difference; transition: width .25s ease, height .25s ease, opacity .2s ease; will-change: transform; opacity: 0; }
			body.cur-link #cursor-ring { width: 50px; height: 50px; }
		}

/* FAQ */
.faq-item { transition: border-color 0.2s ease; }
	.faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s ease; }
	.faq-body > div { overflow: hidden; }
	.faq-body.open { grid-template-rows: 1fr; }
	.faq-icon { transition: background 0.2s ease, border-color 0.2s ease; }
	.faq-icon svg path { transition: d 0.2s ease; }

/* Logos */
.logo-brand {
			display: inline-flex;
			align-items: center;
			gap: 9px;
			font-family: Geist, system-ui, sans-serif;
			font-size: 19px;
			font-weight: 600;
			letter-spacing: -0.5px;
			white-space: nowrap;
			flex-shrink: 0;
			color: #1e293b;
		}
		.logo-brand svg { flex-shrink: 0; }

/* Blog prose */
.prose-boardent { color: #2d3139; font-size: 17px; line-height: 1.75; letter-spacing: -0.01em; }
.prose-boardent p { margin-bottom: 1.5em; }
.prose-boardent p.lead { font-size: 19px; line-height: 1.65; color: #101214; font-weight: 450; margin-bottom: 2em; }
.prose-boardent h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; color: #101214; margin-top: 2.5em; margin-bottom: 0.75em; line-height: 1.25; }
.prose-boardent h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.3px; color: #101214; margin-top: 2em; margin-bottom: 0.6em; }
.prose-boardent ul { list-style: none; padding: 0; margin-bottom: 1.5em; display: flex; flex-direction: column; gap: 10px; }
.prose-boardent ul li { display: flex; gap: 10px; align-items: flex-start; }
.prose-boardent ul li::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: #0F60E4; margin-top: 0.68em; flex-shrink: 0; }
.prose-boardent strong { color: #101214; font-weight: 600; }
.prose-boardent a { color: #0F60E4; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1024px) {
  .prose-boardent { font-size: 18px; }
  .prose-boardent p.lead { font-size: 20px; }
  .prose-boardent h2 { font-size: 26px; }
}

/* ================= PLATFORM DUAL SHOWCASE (shared home + platform page) ================= */
.platform-showcase {
	height: 713px;
}
.platform-showcase__bg {
	height: 134.64%;
	top: -19.29%;
	left: 0;
}
.platform-showcase__stage {
	position: relative;
	width: 1440px;
	height: 713px;
	margin: 0 auto;
}
.platform-showcase__panel {
	position: absolute;
	display: flex;
	align-items: flex-start;
	background: linear-gradient(150deg, rgba(255,255,255,0.24) 44.6%, rgba(255,255,255,0) 97.8%);
	border: 1.07px solid rgba(255,255,255,0.6);
	border-radius: 42.809px 42.809px 0 0;
	padding: 25.686px 25.686px 0;
}
.platform-showcase__panel--wp {
	left: calc(50% - 75.81px);
	top: 148px;
	transform: translateX(-50%);
	z-index: 1;
}
.platform-showcase__panel--saas {
	left: calc(50% + 526.19px);
	top: 82px;
	transform: translateX(-50%);
	z-index: 2;
	filter: drop-shadow(-115px 250px 82.5px rgba(99,99,99,0.15)) drop-shadow(-51px 111px 61px rgba(99,99,99,0.26)) drop-shadow(-13px 28px 33.5px rgba(99,99,99,0.29));
}
.platform-showcase__screen {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
}
.platform-showcase__panel--wp .platform-showcase__screen {
	width: 1131px;
	height: 842px;
}
.platform-showcase__panel--saas .platform-showcase__screen {
	width: 1229px;
	height: 842px;
}
.platform-showcase__img {
	position: absolute;
	max-width: none;
}
.platform-showcase__img--wp {
	left: 0;
	width: 100%;
	height: 106.91%;
	top: -0.01%;
}
.platform-showcase__img--saas {
	width: 100.03%;
	height: 119.24%;
	top: 0;
	left: -0.02%;
}
.platform-showcase__fade {
	position: absolute;
	inset: 0;
	border-radius: 20px;
	pointer-events: none;
}
.platform-showcase__fade--dark {
	background: linear-gradient(to top, rgba(0,0,0,0.35) 2.859%, rgba(0,0,0,0) 19.949%);
}
.platform-showcase__fade--light {
	background: linear-gradient(to top, rgba(255,255,255,1) 2.859%, rgba(255,255,255,0) 19.949%);
}

@media (max-width: 1023px) {
	.platform-showcase {
		height: clamp(300px, 78vw, 480px);
	}
	.platform-showcase__bg {
		height: 120%;
		top: -10%;
	}
	.platform-showcase__mobile {
		position: relative;
		height: 100%;
		max-width: 640px;
		margin: 0 auto;
		padding: 20px 12px 0;
	}
	.platform-showcase__panel-mobile {
		position: absolute;
		background: linear-gradient(150deg, rgba(255,255,255,0.24) 44.6%, rgba(255,255,255,0) 97.8%);
		border: 1px solid rgba(255,255,255,0.6);
		border-radius: 18px 18px 0 0;
		padding: 10px 10px 0;
	}
	.platform-showcase__panel-mobile--wp {
		left: 0;
		bottom: 0;
		width: 68%;
		z-index: 1;
	}
	.platform-showcase__panel-mobile--saas {
		right: 0;
		bottom: 16px;
		width: 74%;
		z-index: 2;
		filter: drop-shadow(0 18px 40px rgba(99,99,99,0.18));
	}
	.platform-showcase__screen-mobile {
		position: relative;
		overflow: hidden;
		border-radius: 12px;
		aspect-ratio: 4 / 3;
	}
	.platform-showcase__screen-mobile .platform-showcase__fade {
		border-radius: 12px;
	}
	.platform-showcase__img-mobile {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
		object-position: top center;
	}
}

/* ================= MOBILE THEME FIXES (max-lg, all pages) ================= */
@media (max-width: 1023px) {
	/* Tighter section spacing, all pages */
	#site-content section[class*="py-[80px]"],
	#cta > div[class*="py-[80px]"] {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}

	#site-content section[class*="gap-[60px]"],
	#site-content section [class*="gap-[60px]"],
	#site-content section[class*="gap-[60px]"] {
		gap: 32px !important;
	}

	#site-content section [class*="gap-[32px]"] {
		gap: 20px !important;
	}

	#cta {
		min-height: auto !important;
	}

	#cta > div[class*="py-[80px]"] {
		min-height: auto !important;
	}

	/* Why boardent card icons */
	.why-card > img {
		width: 40px !important;
		height: 40px !important;
		object-fit: contain;
		flex-shrink: 0;
	}

	/* Impact stat icons */
	#impact .feat-overview-card > div:first-child {
		width: 56px !important;
		height: 56px !important;
		padding: 12px !important;
		flex-shrink: 0;
	}

	#impact .feat-overview-card > div:first-child img {
		width: 24px !important;
		height: 24px !important;
		object-fit: contain;
	}

	/* Three portals, sky background + dashboard overlay */
	.exp-card-wrap > div:first-child[class*="h-["] {
		height: 280px !important;
	}

	.exp-card-wrap > div:first-child > img.absolute.inset-0 {
		object-fit: cover;
		object-position: top center;
	}

	.exp-card-wrap > div:first-child .absolute.left-1\/2 {
		top: 16px !important;
		width: 88% !important;
		max-width: none !important;
		transform: translateX(-50%) !important;
	}

	.exp-card-wrap > div:first-child .absolute.left-1\/2 img {
		width: 100% !important;
		height: auto !important;
		display: block;
		object-fit: cover;
		object-position: top center;
	}

	/* Feature panels, sky/bg + dashboard overlay (all variants) */
	.feat-img-panel > img.absolute.inset-0 {
		object-fit: cover !important;
		object-position: top center !important;
	}

	.feat-img-panel .feat-dash-img,
	.feat-img-panel > .absolute.rounded-tl-\[18px\] {
		top: 14px !important;
		left: 14px !important;
		right: 0 !important;
		bottom: 0 !important;
	}

	.feat-img-panel .feat-dash-img img,
	.feat-img-panel > .absolute.rounded-tl-\[18px\] > img[alt] {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: auto !important;
		min-height: 100% !important;
		max-width: none !important;
		object-fit: cover !important;
		object-position: top left !important;
	}

	/* Use cases photos */
	#use-cases .relative.rounded-\[8px\].overflow-hidden {
		height: 180px !important;
	}

	#use-cases .relative.rounded-\[8px\].overflow-hidden > img {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		left: 0 !important;
		top: 0 !important;
		object-fit: cover !important;
		object-position: center !important;
	}

	/* Platform hero on mobile, handled by shared showcase scale */
	#platform .platform-showcase {
		margin-bottom: 0;
	}

	/* Footer, smaller social icons & legal links */
	#site-footer {
		padding-bottom: 100px !important;
	}

	#site-footer .flex.gap-\[20px\].shrink-0 a {
		width: 32px !important;
		height: 32px !important;
	}

	#site-footer .flex.gap-\[28px\] {
		flex-wrap: wrap;
		gap: 12px 20px !important;
		font-size: 11px !important;
		line-height: 16px !important;
		letter-spacing: 0 !important;
	}

	#site-footer .flex.flex-col.gap-\[60px\] {
		gap: 36px !important;
	}

	#site-footer .flex.flex-col.gap-\[40px\] {
		gap: 24px !important;
	}

	#site-footer > p.absolute {
		font-size: clamp(48px, 18vw, 120px) !important;
	}

	#site-footer .pt-\[80px\] {
		padding-top: 48px !important;
	}
}