/* ============================================================
   ABP Technology — design tokens
   ============================================================ */
:root {
	--abp-navy-900: #0b1f3a;
	--abp-navy-700: #142c52;
	--abp-navy-600: #1c3a68;
	--abp-blue-500: #2563a8;
	--abp-teal-500: #0f8b8d;
	--abp-teal-600: #0c7173;
	--abp-amber-500: #e0912f;
	--abp-amber-600: #c9690f;
	--abp-brand-green: #03906a;
	--abp-green-900: #063f30;
	--abp-green-700: #057a5c;
	--abp-green-600: #03906a;
	--abp-green-tint: #edf7f3;
	--abp-store-blue: #0f537b;
	--abp-ink: #111827;
	--abp-slate-600: #4b5563;
	--abp-slate-300: #d1d5db;
	--abp-slate-100: #f3f4f6;
	--abp-white: #ffffff;

	--abp-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--abp-max-width: 1200px;
	--abp-radius: 14px;
	--abp-radius-organic: 22px 22px 22px 6px;
	--abp-space-1: 0.5rem;
	--abp-space-2: 1rem;
	--abp-space-3: 1.5rem;
	--abp-space-4: 2.5rem;
	--abp-space-5: 4rem;

	--abp-shadow-sm: 0 1px 2px rgba(11, 31, 58, 0.08);
	--abp-shadow-md: 0 4px 16px rgba(11, 31, 58, 0.12);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ============================================================
   Reset & base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--abp-font-sans);
	color: var(--abp-ink);
	background: var(--abp-white);
	line-height: 1.55;
	font-size: 1rem;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--abp-green-700); text-decoration-thickness: 1px; }
a:hover { color: var(--abp-navy-700); }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.6em; color: var(--abp-navy-900); font-weight: 700; }
h1 { font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); }
h2 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2.1rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.25em; }

:focus-visible {
	outline: 3px solid var(--abp-amber-500);
	outline-offset: 2px;
}

.abp-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--abp-navy-900);
	color: #fff;
	padding: 0.75em 1.25em;
	z-index: 1000;
	border-radius: 0 0 var(--abp-radius) 0;
}
.abp-skip-link:focus { left: 0; }

.abp-container {
	max-width: var(--abp-max-width);
	margin-inline: auto;
	padding-inline: var(--abp-space-2);
}
@media (min-width: 640px) {
	.abp-container { padding-inline: var(--abp-space-3); }
}

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

/* ============================================================
   Top bar — breadcrumbs (left, capped ~70%) + IPTECHVIEW / Partner
   Portal / Partner Store (right), combined into one line to keep the
   page header compact.
   ============================================================ */
.abp-topbar {
	background: var(--abp-slate-100);
	border-bottom: 1px solid var(--abp-slate-300);
	font-size: 0.78rem;
}
.abp-topbar-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 1rem;
	padding-block: 0.4rem;
}
.abp-topbar-breadcrumbs {
	flex: 1 1 auto;
	max-width: 70%;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
}
.abp-topbar-breadcrumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: nowrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}
.abp-topbar-breadcrumbs li { white-space: nowrap; }
.abp-topbar-breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 0.4rem; color: var(--abp-slate-600); }
.abp-topbar-breadcrumbs a { color: var(--abp-slate-600); }
.abp-topbar-links {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 1.1rem;
}
.abp-topbar-links a {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	color: var(--abp-navy-700);
	text-decoration: none;
	font-weight: 600;
	white-space: nowrap;
	padding: 0.2rem 0.45rem;
	margin: -0.2rem -0.45rem;
	border-radius: 5px;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.abp-topbar-phone,
.abp-topbar-links a.abp-icon-portal,
.abp-topbar-links a.abp-icon-store { font-size: 0.92rem; }
.abp-topbar-phone { color: var(--abp-brand-green) !important; }
.abp-topbar-links .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
}
.abp-topbar-icon { width: 16px; height: 16px; flex-shrink: 0; }
.abp-topbar-links a.abp-icon-portal { color: #ed7d1b; }
.abp-topbar-links a.abp-icon-store { color: #0f537b; }
/* Hover feedback via a colored background pill (each item's own brand
   color at low opacity) rather than just darkening the text — darkening
   an already-dark color like the Partner Store blue barely reads as a
   change against the light topbar background. A background shift is
   visible regardless of how light or dark the base hue is. */
.abp-topbar-phone:hover { background: rgba(3,144,106,0.14); color: #026e50 !important; }
.abp-topbar-links a.abp-icon-portal:hover { background: rgba(237,125,27,0.14); color: #c9690f; }
.abp-topbar-links a.abp-icon-store:hover { background: rgba(15,83,123,0.16); color: #0b3f5c; }
.abp-topbar-link-logo:hover { background: rgba(3,144,106,0.14); }
.abp-topbar-icon-img {
	display: block;
	height: 18px;
	width: auto;
	object-fit: contain;
}
.abp-topbar-link-logo { padding-block: 0.1rem; }

@media (max-width: 640px) {
	.abp-topbar-breadcrumbs { max-width: 40%; }
	.abp-topbar-link-label { display: none; }
	.abp-topbar-links { gap: 0.85rem; }
	.abp-topbar-links .dashicons { font-size: 18px; width: 18px; height: 18px; }
	.abp-topbar-icon { width: 18px; height: 18px; }
	.abp-topbar-phone .dashicons { margin: 0; }
}

/* ============================================================
   Header / nav
   ============================================================ */
.abp-site-header {
	background: var(--abp-navy-900);
	color: #fff;
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: var(--abp-shadow-sm);
}
.abp-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--abp-space-2);
	padding-block: 0.9rem;
}
.abp-logo {
	font-weight: 800;
	font-size: 1.15rem;
	color: #fff;
	text-decoration: none;
	letter-spacing: 0.02em;
	white-space: nowrap;
}
.abp-logo:hover { color: var(--abp-amber-500); }
.abp-logo-img { display: block; height: 36px; width: auto; }
.abp-logo small { display: block; font-weight: 400; font-size: 0.62rem; color: #b9c6dc; letter-spacing: 0.06em; text-transform: uppercase; white-space: normal; }

.abp-nav-toggle {
	display: none;
	background: transparent;
	border: 1px solid rgba(255,255,255,0.4);
	color: #fff;
	border-radius: 6px;
	padding: 0.4em 0.7em;
	font-size: 1rem;
}
.abp-primary-nav ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 1rem;
	margin: 0;
	padding: 0;
}
.abp-primary-nav li { position: relative; }
.abp-primary-nav a {
	display: block;
	color: #e7ecf5;
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 600;
	padding: 0.4em 0;
	border-bottom: 2px solid transparent;
}
.abp-primary-nav a:hover,
.abp-primary-nav a:focus-visible { color: #fff; border-bottom-color: var(--abp-amber-500); }

/* Dropdown submenus — desktop: hidden until hover/focus, absolutely
   positioned so they don't push the page down. This is what keeps the
   17-item menu (4 top-level + Solutions/AI Integrator children) from
   eating vertical space on every page. */
.abp-primary-nav .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	margin-left: 0.35em;
	border: 4px solid transparent;
	border-top-color: currentColor;
	vertical-align: middle;
	transform: translateY(-1px);
}
.abp-primary-nav .sub-menu {
	display: none;
	position: absolute;
	/* top:100% with zero margin — no gap means no dead zone for the mouse
	   to lose :hover in while moving from the parent link down into the
	   submenu. The 0.5rem breathing room moved to padding-top instead,
	   which is still inside the hoverable box. */
	top: 100%;
	left: 0;
	min-width: 240px;
	background: var(--abp-navy-700);
	border-radius: 8px;
	box-shadow: var(--abp-shadow-md);
	padding: 0.5rem 0;
	padding-top: 0.85rem;
	margin-top: 0;
	flex-direction: column;
	gap: 0;
	z-index: 50;
}
.abp-primary-nav .sub-menu li { width: 100%; }
.abp-primary-nav .sub-menu a {
	padding: 0.6em 1.1rem;
	white-space: nowrap;
	border-bottom: none;
}
.abp-primary-nav .sub-menu a:hover,
.abp-primary-nav .sub-menu a:focus-visible { background: var(--abp-navy-600); }
.abp-primary-nav .menu-item-has-children:hover > .sub-menu,
.abp-primary-nav .menu-item-has-children:focus-within > .sub-menu {
	display: flex;
}

/* Become a Partner — styled as a CTA button, not a plain nav link. */
.abp-primary-nav li.abp-nav-cta { margin-left: 0.3rem; }
.abp-primary-nav li.abp-nav-cta > a {
	background: var(--abp-amber-500);
	color: var(--abp-navy-900);
	font-weight: 700;
	padding: 0.5em 1.1em;
	border-radius: 999px;
	border-bottom: none;
}
.abp-primary-nav li.abp-nav-cta > a:hover,
.abp-primary-nav li.abp-nav-cta > a:focus-visible {
	background: #c97b1f;
	color: #fff;
	border-bottom: none;
}

@media (max-width: 860px) {
	.abp-nav-toggle { display: inline-block; }
	.abp-primary-nav {
		display: none;
		width: 100%;
		padding-block: 1rem;
	}
	.abp-primary-nav.is-open {
		display: block;
		/* Guarantees every item is reachable regardless of how tall the
		   expanded menu (with all submenus shown inline) gets — without
		   this the open menu could run past the bottom of the screen with
		   no way to scroll to the rest of it. ~70px accounts for the
		   sticky site header (logo row) that stays pinned above it. */
		max-height: calc(100vh - 70px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.abp-primary-nav ul { flex-direction: column; align-items: stretch; gap: 0.7rem; }
	/* On mobile the whole menu is already collapsed behind the toggle, so
	   submenus can just sit inline (indented) instead of as a hover popover —
	   there's no hover on touch, and this keeps them reachable by tap. */
	.abp-primary-nav .sub-menu {
		display: flex;
		position: static;
		box-shadow: none;
		background: transparent;
		margin-top: 0.4rem;
		padding-left: 1rem;
		border-left: 2px solid var(--abp-navy-600);
	}
	.abp-primary-nav .menu-item-has-children > a::after { display: none; }
}

/* ============================================================
   Buttons / CTAs
   ============================================================ */
.abp-btn {
	display: inline-block;
	padding: 0.75em 1.4em;
	border-radius: 8px;
	font-weight: 700;
	text-decoration: none;
	font-size: 0.98rem;
	border: 2px solid transparent;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.abp-btn--primary { background: var(--abp-amber-500); color: var(--abp-navy-900); }
.abp-btn--primary:hover { background: #c97b1f; color: #fff; }
.abp-btn--secondary { background: transparent; color: inherit; border-color: currentColor; }
.abp-btn--secondary:hover { background: rgba(255,255,255,0.12); }
.abp-hero .abp-btn--secondary { border-color: #fff; color: #fff; }
.abp-cta-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }

/* ============================================================
   Breadcrumbs
   ============================================================ */
.abp-breadcrumbs { background: var(--abp-slate-100); border-bottom: 1px solid var(--abp-slate-300); }
.abp-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0.6rem var(--abp-space-2); font-size: 0.85rem; max-width: var(--abp-max-width); margin-inline: auto; }
.abp-breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 0.4rem; color: var(--abp-slate-600); }
.abp-breadcrumbs a { color: var(--abp-slate-600); }

/* ============================================================
   Sections — shared rhythm
   ============================================================ */
.abp-section { padding-block: var(--abp-space-5); }
.abp-section--tight { padding-block: var(--abp-space-4); }
.abp-section--alt { background: var(--abp-green-tint); }
.abp-section.has-watermark { position: relative; overflow: hidden; }
.abp-section-watermark {
	position: absolute;
	opacity: 0.1;
	pointer-events: none;
	z-index: 0;
	filter: grayscale(1);
}
.abp-section-watermark--top-right {
	top: var(--abp-space-3);
	right: var(--abp-space-3);
	width: clamp(140px, 22vw, 260px);
	height: auto;
}
.abp-section-watermark--top {
	top: var(--abp-space-2);
	left: 50%;
	transform: translateX(-50%);
	width: clamp(180px, 30vw, 320px);
	height: auto;
}
.abp-section-watermark--right-large {
	top: 50%;
	right: 6%;
	transform: translateY(-50%);
	width: clamp(220px, 48%, 480px);
	height: auto;
	opacity: 0.16;
}
.abp-section-watermark--top-right-strong {
	top: var(--abp-space-3);
	right: var(--abp-space-3);
	width: clamp(210px, 33vw, 390px);
	height: auto;
	opacity: 0.18;
}
.abp-section.has-watermark > .abp-container { position: relative; z-index: 1; }
@media (max-width: 700px) {
	.abp-section-watermark--top-right { width: clamp(100px, 30vw, 160px); opacity: 0.08; }
	.abp-section-watermark--right-large { width: clamp(160px, 55%, 260px); opacity: 0.1; }
	.abp-section-watermark--top-right-strong { width: clamp(150px, 40vw, 240px); opacity: 0.12; }
}
.abp-section-heading { max-width: 46ch; margin-bottom: var(--abp-space-3); }
.abp-eyebrow {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--abp-green-600);
	margin-bottom: 0.6em;
}

/* Hero */
.abp-hero {
	background: linear-gradient(135deg, var(--abp-navy-900), var(--abp-green-900));
	color: #fff;
	padding-block: var(--abp-space-5);
	position: relative;
	overflow: hidden;
}
.abp-hero::before {
	content: "";
	position: absolute;
	inset: -20% -10% auto auto;
	width: 60vw;
	max-width: 700px;
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(3, 144, 106, 0.35), transparent 70%);
	pointer-events: none;
}
.abp-hero > * { position: relative; }
.abp-hero-wave {
	display: block;
	position: relative;
	width: 100%;
	height: 40px;
	color: var(--abp-white);
	margin-top: var(--abp-space-4);
	margin-bottom: calc(-1 * var(--abp-space-5));
}
@media (max-width: 640px) { .abp-hero-wave { height: 24px; } }
.abp-hero .abp-eyebrow { color: #ffd699; }
.abp-hero h1 { color: #fff; }

/* Light hero variant — a co-branded/partner hero on a soft gradient
   background instead of the site-standard dark band. Additive: any hero
   without style=light renders exactly as above, unaffected. */
.abp-hero--light {
	background: linear-gradient(160deg, #eef4fb 0%, #f7f9fc 45%, #ffffff 100%);
	color: var(--abp-ink);
}
.abp-hero--light::before {
	background: radial-gradient(circle, rgba(37, 99, 168, 0.10), transparent 70%);
}
.abp-hero--light .abp-eyebrow { color: var(--abp-store-blue); }
.abp-hero--light h1 { color: var(--abp-navy-900); }
.abp-hero--light .abp-hero-copy p { color: var(--abp-slate-600); }
.abp-hero-heading-accent { color: var(--abp-blue-500); }
.abp-hero-logo-row {
	display: flex; align-items: center; justify-content: center;
	gap: var(--abp-space-2); margin-bottom: var(--abp-space-3);
}
.abp-hero-logo-row img { height: 40px; width: auto; }
.abp-hero-grid.is-centered { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.abp-hero-grid.is-centered .abp-hero-copy p { max-width: 62ch; margin-inline: auto; }
.abp-hero-grid.is-centered .abp-cta-row { justify-content: center; }

/* Image-background hero variant — the masthead photo IS the hero, full
   bleed, with the (smaller, left-aligned) headline overlaid on the
   photo's own naturally open/pale area rather than stacked in a
   separate section below it. A light scrim guarantees legibility there
   without a heavy dark treatment that would obscure the photo, and
   fades to fully transparent by the point the photo's own subject
   matter (screenshots, product, people) needs to stay unobscured. */
.abp-hero--image-bg {
	position: relative;
	overflow: hidden;
	/* Tall enough that the text block, now starting at top:60% (see
	   .abp-container below), has room to fully fit above the bottom edge
	   instead of being clipped by this section's own overflow:hidden --
	   the block was never designed to sit this low at the previous,
	   shorter min-height. */
	min-height: 720px;
	display: flex;
	align-items: center;
	padding-block: var(--abp-space-4);
}
.abp-hero-bg-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Anchored left, not centered: this photo's own Yeastar wordmark sits
	   near its left edge, and on a wide viewport object-fit:cover would
	   otherwise crop symmetrically from both sides, potentially pushing
	   that watermark off-screen. Anchoring left keeps it in view and lets
	   any unavoidable cropping happen on the right (product screenshots)
	   side instead. */
	object-position: left center;
}
.abp-hero-bg-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.82) 28%, rgba(255,255,255,0.35) 52%, rgba(255,255,255,0) 68%);
}
/* Positions the text block at 15% down from the top of the full masthead
   photo, while keeping its LEFT edge exactly where .abp-container always
   puts content -- same left alignment as every section below it on the
   page. left:0/right:0 + the container's own existing max-width and
   margin-inline:auto still center it the normal way; position:absolute
   only takes over the vertical placement. */
.abp-hero--image-bg .abp-container {
	position: absolute;
	top: 45%;
	left: 0;
	right: 0;
	z-index: 1;
}
.abp-hero--image-bg .abp-hero-copy {
	max-width: 42ch;
}
.abp-hero--image-bg h1 { font-size: 1.9rem; color: var(--abp-navy-900); line-height: 1.15; }
.abp-hero--image-bg .abp-eyebrow { color: var(--abp-store-blue); }
.abp-eyebrow--under-heading { margin-top: 0.5em; margin-bottom: 0; }
.abp-hero--image-bg .abp-hero-copy p { color: var(--abp-slate-600); font-size: 1rem; }
.abp-hero-logo-row--start { justify-content: flex-start; }
@media (max-width: 640px) {
	.abp-hero--image-bg { min-height: 580px; }
	.abp-hero-bg-scrim { background: rgba(255,255,255,0.9); }
	.abp-hero--image-bg .abp-hero-copy { max-width: 100%; }
}

/* Splash design experiment (/index2/) — full-bleed background image with
   centered copy, in contrast to the current side-by-side split hero above.
   Kept isolated to its own class so it can't leak into the real homepage.
   Vertical padding matches the real hero (--abp-space-5) so the top text
   sits at the same height as it does on the real homepage — only the
   background treatment and text alignment differ. */
.abp-splash2-hero {
	background-color: var(--abp-navy-900);
	color: #fff;
	padding-block: var(--abp-space-5);
	text-align: left;
	position: relative;
	overflow: hidden;
}
.abp-splash2-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 1.2s ease;
}
.abp-splash2-bg--a { opacity: 1; }
.abp-splash2-overlay {
	position: absolute;
	inset: 0;
	/* Lightened (2026-09-26, was 0.55/0.85) so the rotating mastheads read
	   brighter -- still dark enough at the bottom for the white heading/
	   CTA text to stay legible. */
	background: linear-gradient(180deg, rgba(11,31,58,0.38), rgba(11,31,58,0.62));
}
.abp-splash2-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 780px;
	/* Overrides .abp-container's own margin-inline:auto centering — this
	   element is positioned by an explicit margin-left (set live by JS, to
	   align under the header logo) rather than centered. */
	margin-inline: 0;
}
.abp-splash2-eyebrow { color: #ffd699; }
.abp-splash2-hero h1 {
	/* Halfway between the real hero's h1 (clamp(2rem, 1.6rem + 1.6vw, 3rem))
	   and this design's original, larger size (clamp(2.2rem, 5vw, 3.4rem)) —
	   min/max/preferred each averaged. */
	color: #fff;
	font-size: clamp(2.1rem, 0.8rem + 3.3vw, 3.2rem);
	line-height: 1.15;
	margin-block: 0.6em;
}
.abp-splash2-sub { color: #e7ecf5; font-size: 1.15rem; max-width: 620px; }
.abp-splash2-cta-row { justify-content: flex-start; }
@media (prefers-reduced-motion: reduce) {
	.abp-splash2-bg { transition: none; }
}
.abp-hero-grid { display: grid; gap: var(--abp-space-4); align-items: center; }
.abp-hero-copy p { color: #d7deec; font-size: 1.12rem; max-width: 58ch; }
.abp-hero-media img { border-radius: var(--abp-radius); box-shadow: var(--abp-shadow-md); }
/* Smaller hero image — for a banner-style image with its own baked-in text,
   so it sits as a supporting visual on the right rather than dominating the
   hero at full width. */
.abp-hero-media.is-small { display: flex; justify-content: flex-end; }
.abp-hero-media.is-small img { max-width: 62%; height: auto; }
/* Oversized hero image — the mirror of is-small: for a strong real photo
   that should lead the page rather than sit evenly beside the copy. */
.abp-hero-media.is-large img { border-radius: 28px 28px 28px 8px; }
@media (min-width: 900px) {
	.abp-hero-grid.has-media { grid-template-columns: 1.1fr 1fr; }
	.abp-hero-grid.has-media.image-large { grid-template-columns: 0.85fr 1.15fr; }
}

/* Pillars */
.abp-pillars-grid { display: grid; gap: var(--abp-space-3); }
@media (min-width: 700px) { .abp-pillars-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.abp-pillar {
	background: #fff;
	border: 1px solid var(--abp-slate-300);
	border-radius: var(--abp-radius-organic);
	padding: var(--abp-space-3);
	box-shadow: var(--abp-shadow-sm);
}
.abp-pillars-grid .abp-pillar:nth-child(even) { border-radius: 22px 6px 22px 22px; }
.abp-pillar .dashicons { font-size: 1.8rem; width: 1.8rem; height: 1.8rem; color: var(--abp-green-600); margin-bottom: 0.5rem; }
.abp-pillars-grid .abp-pillar:nth-child(3n+2) .dashicons { color: var(--abp-store-blue); }
.abp-pillars-grid .abp-pillar:nth-child(3n+3) .dashicons { color: var(--abp-amber-600); }
.abp-pillar-icon-img { width: 56px; height: 56px; margin-bottom: 0.5rem; border-radius: 50%; }
.abp-pillar h3 { margin-bottom: 0.4em; }
.abp-pillar a { font-weight: 700; font-size: 0.92rem; }

/* Pillars: numbered / accent-circle variant (additive — a plain pillar
   with no number/accent renders exactly as above, unaffected) */
.abp-pillar.has-number { border-radius: var(--abp-radius); }
.abp-pillars-grid .abp-pillar.has-number:nth-child(even) { border-radius: var(--abp-radius); }
.abp-pillar-icon-circle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--abp-slate-100); margin-bottom: var(--abp-space-2);
}
.abp-pillar-icon-circle .dashicons { margin-bottom: 0; }
.abp-pillar-icon-circle.abp-accent-blue { background: #dbeafe; }
.abp-pillar-icon-circle.abp-accent-blue .dashicons { color: var(--abp-blue-500); }
.abp-pillar-icon-circle.abp-accent-teal { background: #d7f2f0; }
.abp-pillar-icon-circle.abp-accent-teal .dashicons { color: var(--abp-teal-600); }
.abp-pillar-icon-circle.abp-accent-store_blue { background: #dceaf2; }
.abp-pillar-icon-circle.abp-accent-store_blue .dashicons { color: var(--abp-store-blue); }
.abp-pillar-icon-circle.abp-accent-amber { background: #faecd8; }
.abp-pillar-icon-circle.abp-accent-amber .dashicons { color: var(--abp-amber-600); }
.abp-pillar-number { color: var(--abp-slate-600); font-weight: 700; font-size: 0.85rem; margin: 0 0 0.2em; }
.abp-pillar-arrow {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; border-radius: 50%;
	background: var(--abp-slate-100); color: var(--abp-ink);
	margin-top: var(--abp-space-2); font-weight: 700;
}
.abp-pillar-arrow.abp-accent-blue { background: #dbeafe; color: var(--abp-blue-500); }
.abp-pillar-arrow.abp-accent-teal { background: #d7f2f0; color: var(--abp-teal-600); }
.abp-pillar-arrow.abp-accent-store_blue { background: #dceaf2; color: var(--abp-store-blue); }
.abp-pillar-arrow.abp-accent-amber { background: #faecd8; color: var(--abp-amber-600); }
.abp-pillar-arrow:hover { filter: brightness(0.94); }

/* Feature split */
.abp-split-grid { display: grid; gap: var(--abp-space-4); align-items: center; }
@media (min-width: 860px) {
	.abp-split-grid { grid-template-columns: 1fr 1fr; }
	.abp-split-grid.image-left .abp-split-media { order: -1; }
}
.abp-split-media img { border-radius: var(--abp-radius-organic); box-shadow: var(--abp-shadow-md); }
.abp-split-grid.image-left .abp-split-media img { border-radius: 22px 22px 6px 22px; }
/* "Featured" and "oversized" splits — deliberately bigger and rounder than
   the standard 50/50 template, in two steps, so a section can stand out
   instead of reading as one more identical card. Used sparingly, not the
   default — that's what keeps them reading as intentional, not templated. */
@media (min-width: 860px) {
	.abp-split-grid.is-featured { grid-template-columns: 0.8fr 1.2fr; }
	.abp-split-grid.is-oversized { grid-template-columns: 0.45fr 1.55fr; }
}
.abp-split-grid.is-featured .abp-split-media img { border-radius: 32px 32px 32px 8px; }
.abp-split-grid.is-oversized { gap: var(--abp-space-5); }
/* Oversized "matted" frame — rather than crop the real photo to force a
   squarer shape (which would cut real content out), the full image sits
   inside a squarer frame via object-fit:contain, with generous internal
   padding as the buffer Robert asked for between the picture and the
   frame's edge. The frame's own background (matching the image's own dark
   tone) fills that buffer and any letterboxing, so it reads as one
   deliberate "matted" object rather than a crop. */
.abp-split-grid.is-oversized .abp-split-media {
	aspect-ratio: 1 / 1;
	background: var(--abp-navy-900);
	border-radius: 44px 44px 44px 10px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--abp-space-3);
}
.abp-split-grid.is-oversized .abp-split-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.abp-split-grid.no-media { max-width: 68ch; }
@media (min-width: 860px) {
	.abp-split-grid.no-media { grid-template-columns: 1fr; }
}
.abp-split-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--abp-space-2);
	background: var(--abp-green-tint);
	border: 1px solid var(--abp-slate-300);
	border-radius: var(--abp-radius-organic);
	padding: var(--abp-space-4);
}
.abp-split-cta-icon {
	font-size: 48px;
	width: 48px;
	height: 48px;
	color: var(--abp-green-600);
}
.abp-split-media .abp-split-cta + img,
.abp-split-media img + .abp-split-cta { margin-top: var(--abp-space-2); }

/* Proof */
.abp-proof { background: linear-gradient(135deg, var(--abp-green-900), var(--abp-navy-900)); color: #fff; border-radius: var(--abp-radius); padding: var(--abp-space-4); }
.abp-proof blockquote { margin: 0; font-size: 1.25rem; font-style: italic; }
.abp-proof cite { display: block; margin-top: 1rem; font-style: normal; color: #a8e0cc; font-size: 0.9rem; }

/* CTA band */
.abp-cta-band {
	background: linear-gradient(120deg, var(--abp-green-600), var(--abp-teal-500));
	color: #fff;
	text-align: center;
	padding-block: var(--abp-space-4);
	position: relative;
	overflow: hidden;
}
.abp-cta-band::after {
	content: "";
	position: absolute;
	inset: auto -10% -60% auto;
	width: 40vw;
	max-width: 500px;
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(255,255,255,0.12), transparent 70%);
	pointer-events: none;
}
.abp-cta-band-inner { position: relative; max-width: 62ch; margin-inline: auto; }
.abp-cta-band h2 { color: #fff; }
.abp-cta-band .abp-cta-row { justify-content: center; }
.abp-cta-band .abp-btn--secondary { border-color: #fff; color: #fff; }

/* Image pair — two photos side by side, breaks up a text-heavy page */
/* Image banner — a single full-width photo between two sections, e.g. a
   masthead right under a light hero with no image of its own. */
.abp-image-banner-section { padding-block: 0 var(--abp-space-4); }
.abp-image-banner {
	margin: 0;
	border-radius: var(--abp-radius-organic);
	overflow: hidden;
	box-shadow: var(--abp-shadow-md);
}
.abp-image-banner img { width: 100%; height: auto; display: block; }
.abp-image-banner figcaption {
	padding: 0.7em 1em;
	font-size: 0.85rem;
	color: var(--abp-navy-700);
	background: #fff;
	border-top: 1px solid var(--abp-slate-300);
}

.abp-image-pair {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--abp-space-3);
}
@media (min-width: 640px) {
	.abp-image-pair { grid-template-columns: 1fr 1fr; }
}
.abp-image-pair-item {
	margin: 0;
	border-radius: var(--abp-radius-organic);
	overflow: hidden;
	border: 1px solid var(--abp-slate-300);
}
.abp-image-pair-item img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}
.abp-image-pair-item figcaption {
	padding: 0.6em 0.9em;
	font-size: 0.85rem;
	color: var(--abp-navy-700);
	background: #fff;
}

/* Full-width text + same-size image row — deliberately not the left/right
   split used everywhere else, for a section covering more than one
   distinct product family at once. */
.abp-fulltext-media-copy { max-width: 68ch; margin-bottom: var(--abp-space-4); }
.abp-fulltext-media-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--abp-space-3);
}
@media (min-width: 640px) {
	.abp-fulltext-media-grid--2 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 860px) {
	.abp-fulltext-media-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
}
/* No max-width cap for a single image — a lone image (like a wide product
   lineup photo) should be free to use the full section width rather than
   being squeezed down as if it still had a sibling to share space with. */
.abp-fulltext-media-item {
	margin: 0;
	border-radius: var(--abp-radius-organic);
	overflow: hidden;
	border: 1px solid var(--abp-slate-300);
}
.abp-fulltext-media-item img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}
/* A single image has no sibling to visually match, so there's no reason to
   force-crop it into the 4:3 box — show it at its real proportions instead.
   This matters here specifically: a wide product lineup photo cropped to
   4:3 cuts off the outer devices and the corner logo. */
.abp-fulltext-media-grid--1 .abp-fulltext-media-item img {
	aspect-ratio: auto;
	height: auto;
	object-fit: contain;
}
.abp-fulltext-media-item figcaption {
	padding: 0.6em 0.9em;
	font-size: 0.85rem;
	color: var(--abp-navy-700);
	background: #fff;
}

/* Newsletter Viewer page header — kept short so the tracks start sooner */
.abp-nl-header { padding-block: var(--abp-space-2) 0; }
.abp-nl-header h1 { margin: 0; font-size: 1.6rem; }
.abp-nl-intro-band {
	width: 100%;
	background: var(--abp-green-tint);
	padding: 0.6em var(--abp-space-2);
	margin-bottom: var(--abp-space-3);
}
.abp-nl-intro-band p { max-width: 90ch; margin: 0; font-size: 0.95rem; color: var(--abp-navy-700); }

/* Newsletter hub — 3 scrollable tracks + full-size viewer */
.abp-nlhub { display: flex; flex-direction: column; gap: var(--abp-space-4); margin-top: var(--abp-space-4); }
/* Positioning context is the whole track section (full width, the same
   unconstrained box the card strip below scrolls across), not the
   padded/max-width .abp-container title row — so the arrows land at the
   true edges of the line instead of overlapping the title text. */
.abp-nl-track { position: relative; }
.abp-nl-track-head { display: flex; align-items: center; justify-content: space-between; gap: var(--abp-space-2); }
.abp-nl-track-head h2 { margin-bottom: 0; }
.abp-nl-track-nav { display: contents; }
.abp-nl-arrow--left { position: absolute; left: 2ch; top: 0; }
.abp-nl-arrow--right { position: absolute; right: 2ch; top: 0; }
.abp-nl-arrow {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--abp-slate-300);
	background: #fff;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	color: var(--abp-navy-700);
}
.abp-nl-arrow:hover { background: var(--abp-green-tint); border-color: var(--abp-green-600); }
.abp-nl-strip {
	display: flex;
	gap: var(--abp-space-3);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 0.5rem;
	margin-top: var(--abp-space-2);
	/* Left edge lines up under the (now container-padded) track title
	   above it, but the right side is deliberately left unconstrained —
	   no container/max-width here — so the strip can scroll its full
	   width instead of being clipped at the 1200px content column. */
	padding-inline-start: var(--abp-space-2);
}
@media (min-width: 640px) {
	.abp-nl-strip { padding-inline-start: var(--abp-space-3); }
}
.abp-nl-card {
	flex: 0 0 auto;
	scroll-snap-align: start;
	width: 300px;
	display: flex;
	flex-direction: column;
	text-align: left;
	background: #fff;
	border: 1px solid var(--abp-slate-300);
	border-radius: var(--abp-radius-organic);
	overflow: hidden;
	cursor: pointer;
	padding: 0;
	font-family: inherit;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.abp-nl-card:hover, .abp-nl-card:focus-visible { transform: translateY(-3px); box-shadow: var(--abp-shadow-md); }
.abp-nl-card-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.abp-nl-card-img--placeholder { background: linear-gradient(135deg, var(--abp-green-tint), var(--abp-navy-900) 180%); }
.abp-nl-card-body { display: block; padding: 0.9em 1em 1.1em; }
.abp-nl-card-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-weight: 700;
	color: var(--abp-navy-700);
	line-height: 1.35;
}
.abp-nl-card-date { display: block; margin-top: 0.4em; font-size: 0.82rem; color: var(--abp-slate-500, #667); }

.abp-nl-data, .abp-nl-item-data { display: none; }

.abp-nl-viewer {
	position: fixed;
	inset: 0;
	z-index: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--abp-space-3);
}
/* The browser's own default [hidden]{display:none} and this class's
   display:flex have equal specificity, so whichever rule loads later in
   the stylesheet wins — which was this one, meaning the `hidden` attribute
   was being silently ignored and the modal showed on every page load
   regardless of its JS-controlled state. This override, with `[hidden]`
   appended for extra specificity, makes the attribute win instead. */
.abp-nl-viewer[hidden] { display: none; }
.abp-nl-viewer-backdrop { position: absolute; inset: 0; background: rgba(11,31,58,0.78); }
.abp-nl-viewer-panel {
	position: relative;
	background: #fff;
	border-radius: var(--abp-radius);
	max-width: 720px;
	width: 100%;
	max-height: 88vh;
	overflow-y: auto;
	padding: var(--abp-space-4);
}
.abp-nl-viewer-close {
	position: absolute;
	top: 0.6rem;
	right: 0.8rem;
	background: none;
	border: none;
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
	color: var(--abp-navy-700);
}
.abp-nl-viewer-prev, .abp-nl-viewer-next {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,0.9);
	font-size: 1.2rem;
	cursor: pointer;
	z-index: 501;
}
.abp-nl-viewer-prev { left: var(--abp-space-3); }
.abp-nl-viewer-next { right: var(--abp-space-3); }
.abp-nl-viewer-prev:disabled, .abp-nl-viewer-next:disabled { opacity: 0.3; cursor: default; }
.abp-nl-viewer-content img { width: 100%; height: auto; border-radius: var(--abp-radius); margin-bottom: 1em; }
.abp-nl-viewer-content h2 { margin-top: 0; }
.abp-nl-viewer-content .abp-nl-item-date { color: var(--abp-slate-500, #667); font-size: 0.85rem; margin-top: -0.5em; }
@media (max-width: 640px) {
	.abp-nl-card { width: 240px; }
	.abp-nl-viewer-prev, .abp-nl-viewer-next { width: 36px; height: 36px; font-size: 1rem; }
}

.abp-nl-subscribe-cta { text-align: center; margin: var(--abp-space-4) 0; }
.abp-nl-subscribe-modal { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: var(--abp-space-3); }
.abp-nl-subscribe-modal[hidden] { display: none; }
.abp-nl-subscribe-panel { max-width: 480px; text-align: left; }
.abp-nl-subscribe-panel h2 { margin-top: 0; }
.abp-nl-subscribe-alt { margin-top: 1.2em; font-size: 0.9rem; color: var(--abp-slate-500, #667); }

/* Sitemap page */
.abp-sitemap-grid { display: grid; grid-template-columns: 1fr; gap: var(--abp-space-4); }
@media (min-width: 700px) { .abp-sitemap-grid { grid-template-columns: repeat(3, 1fr); } }
.abp-sitemap-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.abp-sitemap-list a { color: var(--abp-navy-700); text-decoration: none; }
.abp-sitemap-list a:hover { color: var(--abp-green-700); text-decoration: underline; }

/* Support ticket / RMA forms */
.abp-support-form { display: flex; flex-direction: column; gap: 0.9rem; max-width: 560px; }
.abp-support-form-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.abp-support-form-row label { flex: 1 1 220px; }
.abp-support-form label {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--abp-navy-700);
}
.abp-support-form input,
.abp-support-form select,
.abp-support-form textarea {
	font-weight: 400;
	padding: 0.6em 0.8em;
	border: 1px solid var(--abp-slate-300);
	border-radius: 8px;
	font-size: 0.95rem;
	font-family: inherit;
}
.abp-support-form button { align-self: flex-start; }
/* abp-required-check (2026-09-23): the missing required field, unmistakable. */
.abp-support-form .is-missing,
.abp-newsletter-form .is-missing { border: 2px solid #b3261e !important; background: #fff6f5; outline: none; }
.abp-support-form .is-missing:focus,
.abp-newsletter-form .is-missing:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.25); }
.abp-support-form-status { margin: 0; font-size: 0.9rem; min-height: 1.2em; }
.abp-support-form-status.is-success { color: var(--abp-green-700); font-weight: 600; }
.abp-support-form-status.is-error { color: #b3261e; font-weight: 600; }

/* Reseller Application form */
.abp-reseller-form { max-width: 640px; }
.abp-quote-form-promise { margin: 0 0 0.9rem; color: var(--abp-navy-700); }

/* Accordion — native <details>/<summary>, no JS needed */
.abp-accordion { display: flex; flex-direction: column; gap: 0.7rem; max-width: 72ch; }
.abp-accordion-item {
	border: 1px solid var(--abp-slate-300);
	border-radius: var(--abp-radius);
	background: #fff;
	overflow: hidden;
}
.abp-accordion-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.9rem 1.1rem;
	cursor: pointer;
	list-style: none;
}
.abp-accordion-summary::-webkit-details-marker { display: none; }
.abp-accordion-summary-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.abp-accordion-title { font-weight: 700; color: var(--abp-navy-900); }
.abp-accordion-teaser {
	color: var(--abp-slate-600);
	font-size: 0.92rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.abp-accordion-caret { flex-shrink: 0; color: var(--abp-slate-600); transition: transform 0.15s ease; }
.abp-accordion-item[open] .abp-accordion-caret { transform: rotate(180deg); }
.abp-accordion-item[open] .abp-accordion-summary { border-bottom: 1px solid var(--abp-slate-300); }
.abp-accordion-body { padding: 1rem 1.1rem; }
@media (max-width: 500px) {
	.abp-accordion-teaser { white-space: normal; }
}
.abp-reseller-form-section {
	margin: 1.6em 0 0.4em;
	padding-top: 1.2em;
	border-top: 1px solid var(--abp-slate-300);
	font-size: 1.05rem;
}
.abp-reseller-form-section:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.abp-field-hint { font-weight: 400; color: var(--abp-slate-600); font-size: 0.85em; }
.abp-reseller-interests {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0.6rem 1rem;
	margin: 0.4em 0 1.2em;
}
.abp-reseller-interest {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 400;
	font-size: 0.95rem;
}
.abp-reseller-interest input { width: auto; }

/* Contact Us page */
.abp-contact-grid {
	display: grid;
	grid-template-columns: minmax(220px, 320px) 1fr;
	gap: 2.5rem;
	margin-top: 2rem;
	align-items: start;
}
.abp-contact-info h3 { margin-top: 0; }
.abp-contact-info h3 + p { margin-top: 0.4rem; }
@media (max-width: 720px) {
	.abp-contact-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* Location map — logo badge overlay is a fallback for a true custom map
   pin, which needs Geocoding API working correctly on Robert's Google
   Cloud project (blocked mid-session, reverted here since visually it's
   close to the same either way). Floats near the pin rather than
   replacing it. */
.abp-contact-map { position: relative; margin-top: 1.5rem; border-radius: var(--abp-radius); overflow: hidden; border: 1px solid var(--abp-slate-300); }
.abp-contact-map iframe { display: block; }
.abp-contact-map-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	height: 34px;
	width: auto;
	background: #fff;
	border-radius: 999px;
	padding: 0.35rem 0.6rem;
	box-shadow: var(--abp-shadow-md);
}

/* Newsletter signup form */
.abp-newsletter-form { margin: 1.2em 0; }
.abp-newsletter-form-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	max-width: 460px;
}
.abp-newsletter-form-row input[type="email"] {
	flex: 1 1 220px;
	padding: 0.7em 1em;
	border: 1px solid var(--abp-slate-300);
	border-radius: 8px;
	font-size: 1rem;
}
.abp-newsletter-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.abp-newsletter-name-row { margin-top: 0.6rem; }
.abp-newsletter-name-row input[type="text"] {
	width: 100%;
	max-width: 300px;
	padding: 0.7em 1em;
	border: 1px solid var(--abp-slate-300);
	border-radius: 8px;
	font-size: 1rem;
}
.abp-newsletter-name-hint { margin: 0.4em 0 0; font-size: 0.82rem; color: var(--abp-slate-500, #667); }
.abp-newsletter-form-status { margin: 0.6em 0 0; font-size: 0.9rem; min-height: 1.2em; }
.abp-newsletter-form-status.is-success { color: var(--abp-green-700); font-weight: 600; }
.abp-newsletter-form-status.is-error { color: #b3261e; font-weight: 600; }
.abp-newsletter-notice {
	padding: 0.9em 1.1em;
	border-radius: 10px;
	font-weight: 600;
	margin-bottom: 1em;
	max-width: 460px;
}
.abp-newsletter-notice.is-success { background: var(--abp-green-tint); color: var(--abp-green-900); }
.abp-newsletter-notice.is-error { background: #fbeae8; color: #7a1a12; }

/* Legacy Drupal "related articles" carousel, restyled into a grid.
   The widget's own markup ships with several always-empty wrapper divs
   (embedvideo/carousel-image/carousel-nl fields the old CMS printed
   unconditionally) — hide those so only real thumbnails show. */
.abp-legacy-related-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--abp-space-3);
	margin-top: var(--abp-space-4);
}
@media (min-width: 640px) { .abp-legacy-related-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .abp-legacy-related-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1280px) { .abp-legacy-related-grid { grid-template-columns: repeat(5, 1fr); } }
.abp-legacy-related-grid [class^="item-"] {
	display: flex;
	flex-direction: column;
	border-radius: var(--abp-radius);
	overflow: hidden;
	border: 1px solid var(--abp-slate-300);
	background: #fff;
}
.abp-legacy-related-grid .views-field-field-embedvideo,
.abp-legacy-related-grid .views-field-field-carousel-image,
.abp-legacy-related-grid .views-field-field-carousel-nl,
.abp-legacy-related-grid .field-content:empty { display: none; }
.abp-legacy-related-grid img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}
.abp-legacy-related-grid .views-field-title {
	padding: 0.6em 0.75em;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--abp-navy-700);
}

/* Blog category filter */
.abp-category-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: var(--abp-space-3) 0 var(--abp-space-4);
}
.abp-category-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.45em 1em;
	border-radius: 999px;
	border: 1px solid var(--abp-slate-300);
	color: var(--abp-navy-700);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 600;
	background: #fff;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.abp-category-pill:hover,
.abp-category-pill:focus-visible {
	border-color: var(--abp-green-600);
	color: var(--abp-green-700);
}
.abp-category-pill.is-active {
	background: var(--abp-green-600);
	border-color: var(--abp-green-600);
	color: #fff;
}
.abp-category-count {
	font-size: 0.8em;
	opacity: 0.75;
}

/* Recent Activity slider */
.abp-activity-slider-section { overflow: hidden; }
.abp-activity-track {
	display: flex;
	gap: var(--abp-space-3);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 0.5rem;
	margin: 0 -1px;
	scrollbar-width: thin;
}
.abp-activity-card {
	flex: 0 0 auto;
	scroll-snap-align: start;
	width: 240px;
	display: flex;
	flex-direction: column;
	border-radius: var(--abp-radius-organic);
	overflow: hidden;
	border: 1px solid var(--abp-slate-300);
	background: #fff;
	text-decoration: none;
	color: inherit;
	position: relative;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.abp-activity-card:hover,
.abp-activity-card:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--abp-shadow-md);
}
.abp-activity-badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 1;
	display: inline-block;
	padding: 0.25em 0.75em;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #fff;
}
.abp-activity-badge--blog { background: var(--abp-blue-500); }
.abp-activity-badge--newsletter { background: var(--abp-green-600); }
.abp-activity-badge--press { background: var(--abp-amber-600); }
.abp-activity-badge--event { background: var(--abp-teal-600); }
.abp-activity-badge--video { background: #8b3fa8; }
.abp-activity-badge--guide { background: var(--abp-navy-600); }
.abp-activity-image {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	background: var(--abp-slate-100, #eef1f5);
}
.abp-activity-image--placeholder {
	background: linear-gradient(135deg, var(--abp-green-tint), var(--abp-navy-900) 180%);
}
.abp-activity-body { display: block; padding: 0.85em 1em 1.1em; }
.abp-activity-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-weight: 700;
	color: var(--abp-navy-700);
	line-height: 1.3;
}
.abp-activity-date { display: block; margin-top: 0.4em; font-size: 0.8rem; color: var(--abp-slate-500, #667); }

/* Events archive */
.abp-event-card { display: flex; flex-direction: column; }
.abp-event-card-title {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.6em;
}
.abp-event-card-footer {
	margin-top: auto;
	padding-top: var(--abp-space-2);
	display: flex;
	align-items: center;
	gap: var(--abp-space-2);
	flex-wrap: wrap;
}
.abp-event-badge {
	display: inline-block;
	margin-left: 0.2em;
	padding: 0.25em 0.75em;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #fff;
	white-space: nowrap;
}
.abp-event-badge--webinar { background: var(--abp-teal-600); }
.abp-event-badge--training { background: var(--abp-green-600); }
.abp-event-badge--in_person { background: var(--abp-amber-600); }

/* Blog archive card image — bleeds to the card's own left/right/top
   edges (canceling .abp-card's own padding on those 3 sides only, via
   negative margins) instead of sitting inset inside it, with top
   corners matching the card's own rounded corners exactly. Odd/even
   cards use --abp-radius-organic in opposite orientations (see
   .abp-card-grid .abp-card:nth-child(even) below), so the image's
   radius needs the same even-card override to keep matching. */
.abp-card-thumb-full {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 22px 22px 0 0;
}
.abp-card-grid .abp-card:nth-child(even) .abp-card-thumb-full { border-radius: 22px 6px 0 0; }

/* Card grid */
.abp-card-grid { display: grid; gap: var(--abp-space-3); }
@media (min-width: 700px) { .abp-card-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.abp-card {
	border: 1px solid var(--abp-slate-300);
	border-radius: var(--abp-radius-organic);
	padding: var(--abp-space-3);
	background: #fff;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.abp-card-grid .abp-card:nth-child(even) { border-radius: 22px 6px 22px 22px; }
/* Blog/archive card variant: the image bleeds to all 3 top edges, so the
   card itself carries no padding and no border ("hairline") -- its own
   rounded corners and box-shadow (on hover) are enough definition
   without an outline. Text content moves into .abp-card-body, which
   carries the padding instead. overflow:hidden is the safety net that
   guarantees the image can never poke past the card's rounded corner. */
.abp-card.abp-card--bleed-image { padding: 0; border: none; overflow: hidden; }
.abp-card-body { padding: var(--abp-space-3); }
.abp-card:hover { transform: translateY(-3px); box-shadow: var(--abp-shadow-md); }
.abp-card-image { max-height: 56px; width: auto; margin-bottom: 0.9rem; object-fit: contain; }
.abp-card-logo-group { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.abp-card-logo-group img { max-height: 30px; width: auto; object-fit: contain; }
.abp-card-logo-group img[alt="IPTECHVIEW"] { max-height: 33px; } /* 10% bigger within its container, per Robert's request */
.abp-card h3 { font-size: 1.1rem; }
.abp-card a.abp-card-link { font-weight: 700; font-size: 0.9rem; }

.abp-card-grid-closing {
	margin: var(--abp-space-3) 0 0;
	padding-top: var(--abp-space-3);
	border-top: 1px solid var(--abp-slate-300);
	max-width: 68ch;
	color: var(--abp-slate-600);
}
.abp-card-grid-closing .abp-card-link { margin-left: 0.4em; }

/* Rich text */
.abp-richtext { max-width: 72ch; }
.abp-richtext img { border-radius: var(--abp-radius); margin-block: 1em; }

/* Evidence badge */
.abp-evidence-badge {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background: #fef3cd;
	color: #7a5b00;
	border-radius: 999px;
	padding: 0.2em 0.7em;
	margin-left: 0.5em;
	vertical-align: middle;
}

/* ============================================================
   Archives / single content / footer / misc
   ============================================================ */
.abp-page-content { padding-block: var(--abp-space-4); }
.abp-entry-header { padding-block: var(--abp-space-4) var(--abp-space-2); }
.abp-entry-meta { color: var(--abp-slate-600); font-size: 0.9rem; }

.abp-site-footer {
	background: var(--abp-navy-900);
	color: #cbd5e1;
	margin-top: var(--abp-space-5);
	padding-block: var(--abp-space-4);
	font-size: 0.92rem;
}
.abp-footer-grid { display: grid; gap: var(--abp-space-3); }
@media (min-width: 700px) { .abp-footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.abp-site-footer a { color: #d7deec; }
.abp-footer-nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.abp-footer-bottom {
	border-top: 1px solid rgba(255,255,255,0.15);
	margin-top: var(--abp-space-3);
	padding-top: var(--abp-space-2);
	font-size: 0.82rem;
	color: #94a3b8;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.8rem;
}
.abp-footer-social { display: flex; gap: 0.9rem; }
.abp-footer-social a { color: #94a3b8; display: inline-flex; }
.abp-footer-social a:hover { color: #fff; }

.abp-search-form { display: flex; gap: 0.5rem; }
.abp-search-form input[type="search"] { flex: 1; padding: 0.6em 0.8em; border: 1px solid var(--abp-slate-300); border-radius: 6px; }

.abp-404 { text-align: center; padding-block: var(--abp-space-5); }

/* Vendor line card */
.abp-line-card {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: var(--abp-space-2);
	margin-top: var(--abp-space-3);
}
.abp-line-card-item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid var(--abp-slate-300);
	border-radius: var(--abp-radius);
	padding: var(--abp-space-2);
	min-height: 90px;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.abp-line-card-item:hover { box-shadow: var(--abp-shadow-md); transform: translateY(-2px); }
.abp-line-card-item img { max-width: 100%; max-height: 48px; object-fit: contain; }
/* Tiny expand/link-out cue — only on vendors with a real dedicated page
   behind their logo, not the ones sharing a category hub with others, so
   the signal stays honest. Always visible (not hover-only) so it works on
   touch devices too. */
.abp-line-card-expand {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--abp-slate-100);
	color: var(--abp-slate-600);
}
.abp-line-card-item.has-own-page:hover .abp-line-card-expand {
	background: var(--abp-amber-500);
	color: var(--abp-navy-900);
}