/**
 * BPAS page blocks v2: how the source sections sit on a Bentol page.
 * The page's Elementor wrapper is the source's .bpas-wp-container (max 1320px, 24px gutters, see
 * inc/blocks-v2/register.php); each section is one Elementor container with one widget.
 * Loaded after the page type styles.
 */

/* Space before the footer comes from Bentol's section spacing (.bpas-page-area), not the source's 56px. */
.elementor.bpas-v2-doc {
	padding-top: 0;
	padding-bottom: 0;
}

/* Elementor containers around the sections add no gaps of their own. */
.e-con.bpas-v2-con {
	--padding-top: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--padding-right: 0;
	--gap: 0;
	--margin-top: 0;
	--margin-bottom: 0;
}

.e-con.bpas-v2-con > .elementor-widget {
	width: 100%;
}

/* The fixed reading progress bar and rail add no height to the page. */
.bpas-v2--rail {
	height: 0;
}

/*
 * Bentol styles bare elements (p, a, buttons, images); inside the BPAS sections the source styles win.
 * :where() keeps these at Bentol's own weight, so every source rule with a class (margins, colours,
 * logo heights) still applies, e.g. the 30px under the hub hero text (Parvathi, 22 Oct 2026).
 */
:where(.bpas-wp-container .bpas-v2) p {
	color: inherit;
	line-height: inherit;
	margin-bottom: 0;
}

:where(.bpas-wp-container .bpas-v2) a:hover {
	text-decoration: none;
}

:where(.bpas-wp-container .bpas-v2) button {
	font-family: inherit;
}

:where(.bpas-wp-container .bpas-v2) img {
	max-width: 100%;
	height: auto;
}

/*
 * One spacing rhythm on every v2 page (Parvathi, 21 Oct 2026): the same space between all sections,
 * between a section heading and its content, and between boxes, so no two boxes touch.
 * Values are Bentol's own: --section-space-mobile (80px) and --section-space-small-mobile (60px).
 */
.bpas-wp-container.bpas-v2-doc {
	--bpas-gap-section: var(--section-space-mobile, 80px);
	--bpas-gap-head: 30px;
	--bpas-gap-box: 25px;
	--bpas-pad-panel: 55px;
}

@media (max-width: 767px) {
	.bpas-wp-container.bpas-v2-doc {
		--bpas-gap-section: var(--section-space-small-mobile, 60px);
		--bpas-gap-box: 20px;
		--bpas-pad-panel: 30px;
	}
}

/* Between sections, from the page banner to the footer. */
.bpas-wp-container.bpas-v2-doc .bpas-v2 > :first-child:not(.bpas-fx-progress) {
	margin-top: var(--bpas-gap-section);
}

/* The first section's top margin stays inside the white page area. Without this it collapses
 * through the page area and the dark body background shows between banner and content (mfgNext blog). */
.bpas-page-area {
	display: flow-root;
}

.bpas-page-area:has(.bpas-v2-doc) {
	padding-top: 0;
	padding-bottom: var(--section-space-mobile, 80px);
}

@media (max-width: 767px) {
	.bpas-page-area:has(.bpas-v2-doc) {
		padding-bottom: var(--section-space-small-mobile, 60px);
	}
}

/* Section heading to its content (".elementor-widget" outranks Elementor's figure { margin: 0 }). */
.bpas-wp-container.bpas-v2-doc .elementor-widget .bpas-v2 .bpas-center + *,
.bpas-wp-container.bpas-v2-doc .bpas-v2 .bpas-related,
.bpas-wp-container.bpas-v2-doc .bpas-v2 .bpas-check__note + .bpas-ck,
.bpas-wp-container.bpas-v2-doc .bpas-v2 .bpas-trust__head + *,
.bpas-wp-container.bpas-v2-doc .bpas-v2 .bpas-scn > .bpas-intro + * {
	margin-top: var(--bpas-gap-head);
}

/* Boxes side by side. */
.bpas-wp-container.bpas-v2-doc .bpas-v2 :is(.bpas-modgrid, .bpas-ind__grid, .bpas-dir, .bpas-phase, .bpas-roles, .bpas-guides,
	.bpas-related, .bpas-benefits, .bpas-flow, .bpas-steps, .bpas-figrow, .bpas-scn__grid, .bpas-rules, .bpas-terms, .bpas-concepts,
	.bpas-t3__list, .bpas-sv__steps, .bpas-ck, .bpas-jump, .bpas-oneline, .bpas-five__phases, .bpas-glance__grid, .bpas-audit) {
	gap: var(--bpas-gap-box);
}

.bpas-wp-container.bpas-v2-doc .bpas-v2 .bpas-cluster ul {
	gap: var(--bpas-gap-box);
}

/* Boxes one under the other inside a section. */
.bpas-wp-container.bpas-v2-doc .bpas-v2 :is(
	.bpas-hero + .bpas-fig-wide,
	.bpas-modgrid + .bpas-mb,
	.bpas-ind__grid + .bpas-ind__legend,
	.bpas-acc + .bpas-phase,
	.bpas-acc__group + .bpas-acc__group,
	.bpas-acc__tools + .bpas-acc__group,
	.bpas-steps + .bpas-figrow,
	.bpas-flow + .bpas-shot,
	.bpas-scn__grid + .bpas-figrow,
	.bpas-figrow + .bpas-money-wrap,
	.bpas-money-wrap + .bpas-mb,
	.bpas-shot ~ .bpas-rules,
	.bpas-shot ~ .bpas-terms,
	.bpas-t3__from + .bpas-t3__list,
	.bpas-t3 + .bpas-ipx,
	.bpas-t3 + .bpas-ph,
	.bpas-ipx + .bpas-ph,
	.bpas-ck + .bpas-ph,
	.bpas-sv__steps + .bpas-sv__fig,
	.bpas-sv__fig + .bpas-sv__roles,
	.bpas-benefits + .bpas-creds) {
	margin-top: var(--bpas-gap-box);
}

/* Large panels: the same inner space at top and bottom. */
.bpas-wp-container.bpas-v2-doc .bpas-v2 > :is(.bpas-hero, .bpas-cta, .bpas-weekly, .bpas-trust, .bpas-scn, .bpas-check, .bpas-story) {
	padding-top: var(--bpas-pad-panel);
	padding-bottom: var(--bpas-pad-panel);
}

/* Elementor clears figure margins inside widgets; the source centres the photo under the top three. */
.bpas-wp-container.bpas-v2-doc .elementor-widget .bpas-v2 .bpas-t3 ~ .bpas-ph {
	margin-left: auto;
	margin-right: auto;
}

/* Section eyebrows carry Bentol's flower (asterisk) icon in an orange circle, as on the v1 pages (.sub-title). */
.bpas-wp-container.bpas-v2-doc .bpas-v2 .bpas-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.bpas-wp-container.bpas-v2-doc .bpas-v2 .bpas-eyebrow::before {
	content: "";
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--theme-color, #e3572b) url("../../../bentol/assets/images/icons/asterisk.png") no-repeat center / 13px 14px;
}

/*
 * misBoost delivery channels (Email, WhatsApp, Mobile, Inside SAP): the hover of the v1 pages on staging,
 * the device lifts 3px and its frame turns green. The source's blinking frame pauses while hovered.
 */
@media (hover: hover) {
	.bpas-wp-container.bpas-v2-doc .bpas-mb__mode {
		overflow: visible;
	}

	.bpas-wp-container.bpas-v2-doc .bpas-mb .bpas-mb__mode img {
		transition: transform 0.25s ease, border-color 0.25s ease;
	}

	.bpas-wp-container.bpas-v2-doc .bpas-mb .bpas-mb__mode:hover img {
		animation: none;
		transform: translateY(-3px);
		border-color: var(--theme-color2);
	}
}

@media (hover: hover) and (prefers-reduced-motion: reduce) {
	.bpas-wp-container.bpas-v2-doc .bpas-mb .bpas-mb__mode:hover img {
		transform: none;
	}
}

/* Words of an animated heading stay on one line (see bpas-v2.js). */
.bpas-wp-container.bpas-v2-doc .bpas-word {
	display: inline-block;
	white-space: nowrap;
}

/*
 * Stacked chart bars: a 3px gap between a segment and the one below it, so the parts read as separate boxes.
 * The gap is a transparent edge inside the upper segment, so bar heights and the capacity lines stay as drawn.
 */
.bpas-wp-container.bpas-v2-doc .bpas-v2 :is(.bpas-m2__col i + i, .bpas-cap__f, .bpas-cv__over) {
	border-bottom: 3px solid transparent;
	background-clip: padding-box;
}

/* The last accordion row adds no space under its section (its margin would leak out and widen the section gap). */
.bpas-wp-container.bpas-v2-doc .bpas-v2 .bpas-acc__item:last-child,
.bpas-wp-container.bpas-v2-doc .bpas-v2 #capabilities .bpas-acc__item:last-child {
	margin-bottom: 0;
}

/*
 * Link targets stop below Bentol's sticky menu (115px on desktop, 111px on phones) with 20px to spare,
 * and the source's sticky score panels sit under it too (the source used 100px for its own header).
 */
.bpas-wp-container.bpas-v2-doc [id],
main#content:has(.bpas-v2-doc) {
	scroll-margin-top: 135px;
}

.bpas-wp-container.bpas-v2-doc .bpas-v2 :is(.bpas-audit__score, .bpas-aud__panel) {
	top: 135px;
}

/* Guide links (Feature Guide, Best Practices, ...) fill their column on small screens, like the hub button above them (Parvathi, 22 Oct 2026). */
@media (max-width: 720px) {
	.bpas-wp-container.bpas-v2-doc .bpas-v2 .bpas-spokes ol a {
		display: flex;
		width: 100%;
		height: 100%;
	}
}

/*
 * ERP hubs (SAP Business One, Business Central; 23 Oct 2026): the dark panels get the same inner space at top
 * and bottom as the other large panels, and the stats band stays tucked under the hero as in the source.
 */
.bpas-wp-container.bpas-v2-doc .bpas-v2 > :is(.sb1-mods, .sb1-why, .sb1-cta) {
	padding-top: var(--bpas-pad-panel);
	padding-bottom: var(--bpas-pad-panel);
}

.bpas-wp-container.bpas-v2-doc .bpas-v2 .sb1-dir,
.bpas-wp-container.bpas-v2-doc .bpas-v2 .sb1-sols {
	gap: var(--bpas-gap-box);
}

/*
 * Home page (BPAS home file v2.35, 26 Oct 2026). No page banner: the hero runs full width straight under the header
 * (Parvathi, 26 Oct; the file has a card 20px below); every later section follows the 80px / 60px rhythm above (the file has 120px). The "On this page" button and
 * the section dots are fixed to the screen and add no space.
 */
.bpas-wp-container.bpas-v2-doc.bh .bpas-v2--homehero > :first-child {
	margin-top: 0;
}

.bpas-v2--homenav {
	height: 0;
}

.bpas-wp-container.bpas-v2-doc .bpas-v2--homenav > :first-child {
	margin-top: 0;
}

/*
 * WCAG 2.1 AA (Parvathi, 20 Oct 2026: darken text only): the guide v4.1 "VS" badge is small white text on the theme
 * orange (3.7:1), so its circle takes the darker label orange used for small white-on-orange labels (4.9:1).
 */
.bpas-wp-container.bpas-v2-doc .bpas-v2 .bpas-vs__mid {
	background: #c44516;
}

/*
 * Contact consent (Parvathi, 26 Oct 2026): the file sets the label text to display:flex, so on phones the sentence,
 * the "Legal & Privacy Policy" link and the full stop became three columns. The text now wraps as one sentence,
 * with the tick box beside it.
 */
.bpas-wp-container label.ct-consent span {
	display: block;
	position: relative;
	padding-left: 32px;
}
.bpas-wp-container label.ct-consent span::before {
	position: absolute;
	left: 0;
	top: 1px;
	margin: 0;
}

/*
 * Home page on phones (Parvathi, iPhone Safari, 26 Oct 2026).
 * 1. Founder photo: the file sizes the photo box with aspect-ratio alone (all its children are positioned), which
 *    Safari shrinks to a small square, so the name card spills over it. The box gets its full width and a square
 *    height from padding instead, which every browser lays out the same.
 * 2. Hero: the orbit's outer ring stays clear of the product card under it (the file tucks the card 10px under it).
 * 3. "On this page": a round button at the bottom left, like the WhatsApp button on the right, instead of the wide
 *    pill in the middle that covered card text (its words stay for screen readers).
 */
@media (max-width: 720px) {
	.bpas-wp-container.bh .bh-about .bh-ab__me {
		width: calc(100% - 10px);
		height: auto;
		aspect-ratio: auto;
	}

	.bpas-wp-container.bh .bh-about .bh-ab__me::before {
		content: "";
		display: block;
		padding-top: 100%;
	}

	.bpas-wp-container.bh .bh-hero .bh-cap {
		margin-top: 20px;
	}

	.bpas-wp-container .bpas-pnav {
		left: max(16px, env(safe-area-inset-left));
		bottom: calc(16px + env(safe-area-inset-bottom));
		transform: none;
	}

	.bpas-wp-container .bpas-pnav:not(.is-on) {
		transform: translate(0, 140%);
	}

	.bpas-wp-container .bpas-pnav__btn {
		width: 56px;
		height: 56px;
		min-height: 56px;
		padding: 8px;
		justify-content: center;
	}

	.bpas-wp-container .bpas-pnav__ico {
		width: 40px;
		height: 40px;
	}

	.bpas-wp-container .bpas-pnav__txt,
	.bpas-wp-container .bpas-pnav__chev {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.bpas-wp-container .bpas-pnav__panel {
		left: 0;
		transform: none;
	}
}

/*
 * Home "Don't take our word for it" link (Parvathi, iPhone Safari, 26 Oct 2026): Safari draws the link underline under
 * the arrow too and squeezes its circle when the words wrap. The arrow sits outside the text flow (no underline reaches
 * it there) at a fixed 30px round size, 10px after the words, where the file puts it.
 */
.bpas-wp-container.bh .bh-proof {
	position: relative;
	padding-right: 40px;
}

.bpas-wp-container.bh .bh-proof i {
	position: absolute;
	right: 0;
	top: calc(50% - 15px);
	flex: none;
	width: 30px;
	height: 30px;
	text-decoration: none;
}

/* Home "Pick the problem" strip on tablets/phones: the active card's tail sat
   in the scroll box (overflow-x makes overflow-y auto too), so it was cut off
   and the strip scrolled up and down. Room for the tail, sideways scroll only. */
@media (max-width: 991px) {
	.bpas-wp-container.bh .bh-pp__tabs { overflow-y: hidden; padding-bottom: 25px; overscroll-behavior-x: contain; }
}

/* Home "Try it first" on phones: the PACE card sat 35px from the panel's
   bottom edge, so its long shadow and blurred glow were cut off by the
   panel and showed as a hard band. Shorter shadow, softer glow, more room. */
@media (max-width: 720px) {
	.bpas-wp-container.bh .bh-try { padding-bottom: 50px; }
	.bpas-wp-container.bh .bh-pace { box-shadow: 0 18px 30px -18px rgba(13,35,68,0.5); }
	.bpas-wp-container.bh .bh-try__card::before { inset: 10% 4% -4% 4%; filter: blur(18px); background: rgba(13,35,68,0.14); }
}

/*
 * Closing call-to-action box on phones (Parvathi, 26 Oct 2026): the BPAS files narrow its side padding to 12px
 * below 480px (10px on Bentol's steps), tighter than every other box. It now matches the hero and cards (20px).
 */
@media (max-width: 480px) {
	.bpas-wp-container.bpas-v2-doc .bpas-cta {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* Home hero full width (Parvathi, 26 Oct 2026): the dark hero runs edge to edge straight under the header, with the
   marquee directly under it, also edge to edge. Text stays lined up with the page container: the extra padding is
   the distance from the container to the screen edge (50vw - 50%). !important beats the site-wide 20px first-section
   gap in bpas-header-footer.css (inner pages keep it). */
.home .bpas-page-area { overflow-x: clip; }
.bpas-wp-container.bpas-v2-doc.bh .bpas-v2--homehero > .bh-hero { margin-top: 0 !important; }
.bpas-wp-container.bh .bh-hero,
.bpas-wp-container.bh .bh-tick { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); border-radius: 0; }
.bpas-wp-container.bh .bh-hero { padding-left: calc(50vw - 50% + 65px); padding-right: calc(50vw - 50% + 40px); }
.bpas-wp-container.bh .bh-hero .bh-pause { right: calc(50vw - 50% + 22px); }
.bpas-wp-container.bh .bh-tick { margin-top: 0; border-top: 0; }
@media (max-width: 991px) {
	.bpas-wp-container.bh .bh-hero { padding-left: calc(50vw - 50% + 30px); padding-right: calc(50vw - 50% + 30px); }
}
@media (max-width: 720px) {
	.bpas-wp-container.bh .bh-hero { padding-left: calc(50vw - 50% + 20px); padding-right: calc(50vw - 50% + 20px); border-radius: 0; }
}

/* Home hero: the product card sits under the orbit at every width (the file tucks it 25px into the ring, which
   covered the ring and its "BPAS" label). */
.bpas-wp-container.bh .bh-hero .bh-cap { margin-top: 20px; }

/* Home section rhythm (Parvathi, 26 Oct 2026): 60px between all sections at every width, and 120px from the last
   section (FAQs) to the footer heading (80px here + the footer's own 40px; Parvathi doubled it from 60px). !important beats the site-wide 20px
   first-section rule in bpas-header-footer.css, which hit every home section (each sits in its own container). */
body .bpas-wp-container.bpas-v2-doc.bh .bpas-v2:not(.bpas-v2--homehero):not(.bpas-v2--homenav) > :first-child:not(.bpas-fx-progress) { margin-top: 60px !important; }
.home .bpas-page-area:has(.bpas-v2-doc.bh) { padding-bottom: 80px; }

/*
 * Perfion PIM pages (27 Oct 2026).
 * 1. Eyebrows: the site's eyebrow icon (above) takes the place of the file's short line before the label, so the line
 *    the file also draws after a centred label goes too; every eyebrow reads "icon + label" as on the other pages.
 * 2. "On this page" on phones: a round button at the bottom left, as on the home page (Parvathi, iPhone, 26 Oct 2026),
 *    instead of the wide pill in the middle that covers card text and the WhatsApp button; its words stay for screen readers.
 * 3. Phones (1.15.1): a centred eyebrow that wraps keeps its icon beside the first line (the label was a full-width
 *    flex item, so the icon sat alone at the far left); prodRecord pages keep the site's 15px side margin (file: 10px).
 */
.bpas-wp-container.pfe .bpas-center .pfe-eyebrow-line::after {
	content: none;
}

@media (max-width: 720px) {
	.bpas-wp-container.pfe .pfe-pnav {
		left: max(16px, env(safe-area-inset-left));
		bottom: calc(16px + env(safe-area-inset-bottom));
		transform: translate(0, 140%);
	}

	.bpas-wp-container.pfe .pfe-pnav.is-shown {
		transform: none;
	}

	.bpas-wp-container.pfe .pfe-pnav__btn {
		width: 56px;
		height: 56px;
		min-height: 56px;
		padding: 8px;
		justify-content: center;
	}

	.bpas-wp-container.pfe .pfe-pnav__ico {
		width: 40px;
		height: 40px;
	}

	.bpas-wp-container.pfe .pfe-pnav__txt,
	.bpas-wp-container.pfe .pfe-pnav__chev {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.bpas-wp-container.pfe .pfe-pnav__panel {
		left: 0;
		transform: none;
	}
}

@media (max-width: 767px) {
	.bpas-wp-container.pfe .bpas-v2 .bpas-center .bpas-eyebrow {
		display: block;
	}

	.bpas-wp-container.pfe .bpas-v2 .bpas-center .bpas-eyebrow::before {
		display: inline-block;
		margin-right: 10px;
		vertical-align: middle;
	}
}

@media (max-width: 720px) {
	.bpas-wp-container.bpas-v2-doc.prd {
		padding-left: 15px;
		padding-right: 15px;
	}
}

/* Soft shadows (1.15.3): every shadow fades out; none stops at a hard line. */

/* A hovered card sits above its neighbours, so its shadow falls over them
   instead of stopping at the next card's edge. */
.bpas-wp-container .bpas-acc__item:hover,
.bpas-wp-container .bpas-aud__row label:hover,
.bpas-wp-container .bpas-cluster a:hover,
.bpas-wp-container .bpas-jb .bpas-jump a:hover,
.bpas-wp-container .bpas-jb .bpas-oneline a:hover,
.bpas-wp-container .bpas-pace:hover,
.bpas-wp-container .bpas-rule:hover,
.bpas-wp-container .bpas-t3__card:hover,
.bpas-wp-container .bpas-concept:hover,
.bpas-wp-container .bpas-flow li:hover,
.bpas-wp-container .bpas-glance__grid > div:hover,
.bpas-wp-container .bpas-guide:hover,
.bpas-wp-container .bpas-related a:hover,
.bpas-wp-container .bpas-role:hover,
.bpas-wp-container .bpas-scn__card:hover,
.bpas-wp-container .bpas-term:hover,
.bpas-wp-container .bpas-st:hover,
.bpas-wp-container .bpas-toc--v4 a:hover,
.bpas-wp-container .bpas-benefit:hover,
.bpas-wp-container .bpas-dir__card:hover,
.bpas-wp-container .bpas-ind:hover,
.bpas-wp-container .bpas-mod:hover,
.bpas-wp-container .bpas-step:hover,
.bpas-wp-container .ct-faq__list > li:hover,
.bpas-wp-container .ct-office:hover,
.bpas-wp-container .sb1-dir > li:hover,
.bpas-wp-container .sb1-sol:hover,
.bpas-wp-container.prd .prd-card:hover,
.bpas-wp-container.prd .prd-who > li:hover,
.bpas-wp-container.prd .prw-sess:hover,
.bh .bh-door:hover,
.bh .bh-learn a:hover,
.bh .bh-li__pick:hover,
.bh .bh-pace:hover,
.bh .bh-post:hover,
.bh .bh-tm:hover,
.bh .bh-w3__r:hover,
.bh .bh-w3:has(.bh-w3__c--1:hover) .bh-w3__r--1,
.bh .bh-w3:has(.bh-w3__c--2:hover) .bh-w3__r--2,
.bh .bh-w3:has(.bh-w3__c--3:hover) .bh-w3__r--3,
.mn .mn-aim:hover,
.mn .mn-card:hover,
.pfe .pfe-aud:hover,
.pfe .pfe-cap:hover,
.pfe .pfe-gcard:hover,
.pfe .pfe-item:hover,
.pfe .pfe-mile:hover,
.pfe .pfe-tpace:hover,
.pfe .tde-fit__card:hover,
.pfe .tde-ph:hover {
	z-index: 20;
}

.bpas-wp-container .bpas-meis__btn:hover,
.bpas-wp-container .ct-done button:hover,
.mn .mn-aims a:hover {
	position: relative;
	z-index: 20;
}

/* Panels whose resting shadow falls on the block below sit above it. */
.pfe .pfe-pub2,
.pfe .pfe-bld,
.bpas-wp-container .sb1-mod__ext {
	z-index: 2;
}

.bh .bh-gl__sol {
	z-index: 10;
}

/* Rows of equal cards: each card sits above the next, so every shadow
   fades over the card below. */
.pfe .tde-ws__card,
.bpas-wp-container.prd .prw-sess,
.bh .bh-gl__lib,
.bh .bh-tm {
	z-index: 1;
}

.pfe .tde-ws__card:nth-child(1),
.bpas-wp-container.prd .prw-sess:nth-child(1),
.bh .bh-gl__lib:nth-child(1),
.bh .bh-tm:nth-child(1) {
	z-index: 9;
}

.pfe .tde-ws__card:nth-child(2),
.bpas-wp-container.prd .prw-sess:nth-child(2),
.bh .bh-gl__lib:nth-child(2),
.bh .bh-tm:nth-child(2) {
	z-index: 8;
}

.pfe .tde-ws__card:nth-child(3),
.bpas-wp-container.prd .prw-sess:nth-child(3),
.bh .bh-gl__lib:nth-child(3),
.bh .bh-tm:nth-child(3) {
	z-index: 7;
}

.pfe .tde-ws__card:nth-child(4),
.bpas-wp-container.prd .prw-sess:nth-child(4),
.bh .bh-gl__lib:nth-child(4),
.bh .bh-tm:nth-child(4) {
	z-index: 6;
}

.pfe .tde-ws__card:nth-child(5),
.bpas-wp-container.prd .prw-sess:nth-child(5),
.bh .bh-tm:nth-child(5) {
	z-index: 5;
}

.pfe .tde-ws__card:nth-child(6),
.bpas-wp-container.prd .prw-sess:nth-child(6) {
	z-index: 4;
}

.pfe .tde-ws__card:nth-child(7),
.bpas-wp-container.prd .prw-sess:nth-child(7) {
	z-index: 3;
}

.pfe .tde-ws__card:nth-child(8),
.bpas-wp-container.prd .prw-sess:nth-child(8) {
	z-index: 2;
}

.pfe .tde-ws__card:hover,
.bpas-wp-container.prd .prw-sess:hover,
.bh .bh-tm:hover {
	z-index: 20;
}

/* Shadows inside a clipped box are sized to fade out before its edge. */
.bh .bh-pace {
	box-shadow: 0 18px 34px -14px rgba(13,35,68,0.5);
}

.bh .bh-ab__clip {
	box-shadow: 0 16px 32px -14px rgba(6,50,50,0.5);
}

.bh .bh-ab__where {
	box-shadow: 0 14px 28px -14px rgba(6,50,50,0.4);
}

.pfe .pfe-mile__card {
	box-shadow: 0 8px 20px -6px rgba(36,19,56,0.08);
}

.bpas-wp-container .bpas-shot__frame img {
	box-shadow: 0 8px 20px -6px rgba(6,50,50,0.14);
}

.pfe .pfe-jr {
	box-shadow: 0 24px 50px -16px rgba(36,19,56,0.28);
}

/* Was a hard 6px offset block. */
.pfe .pfe-cv-page {
	box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--v) 30%, transparent);
}

@media (hover: hover) {
	.bh .bh-pace:hover {
		box-shadow: 0 22px 36px -14px rgba(13,35,68,0.6);
	}

	.pfe .pfe-gcard:hover {
		box-shadow: 0 20px 36px -12px color-mix(in srgb, var(--c) 28%, transparent);
	}

	.pfe .pfe-mile:hover .pfe-mile__card {
		box-shadow: 0 12px 24px -8px color-mix(in srgb, var(--c) 26%, transparent);
	}
}

@media (max-width: 767px) {
	.bh .bh-pace,
	.bh .bh-pace:hover {
		box-shadow: 0 14px 24px -20px rgba(13,35,68,0.5);
	}

	.bh .bh-ab__where {
		box-shadow: 0 10px 20px -10px rgba(6,50,50,0.4);
	}

	.pfe .pfe-gcard,
	.pfe .pfe-gcard:hover {
		box-shadow: 0 10px 22px -8px rgba(36,19,56,0.1);
	}

	.bpas-wp-container .bpas-cluster a:hover {
		box-shadow: 0 10px 20px -6px rgba(6,50,50,0.18);
	}

	.bpas-wp-container .bpas-toc--v4 a:hover {
		box-shadow: 0 12px 22px -8px rgba(6,50,50,0.12);
	}
}

@media (max-width: 600px) {
	.bpas-wp-container .bpas-shot__frame img {
		box-shadow: 0 4px 12px -6px rgba(6,50,50,0.14);
	}
}

/* Perfion hero titles on phones (1.16.0): the file keeps each title line on one line (white-space: nowrap) and sizes it
   to the viewport, which leaves "One record, every language" (Multi-market) 9px wider than the hero card at 390px on the
   site, so the end of the line was cut off. On phones a line may wrap instead. */
@media (max-width: 767px) {
	.bpas-v2-doc.pfe .pfe-hero h1 > span,
	.bpas-v2-doc.pfe .pfe-hero h1 .pfe-l2 {
		white-space: normal;
	}
}

/* Soft shadows (1.16.0, Perfion guide kit v1.37): shadows inside a clipped box are sized to fade out before its edge
   (pixel test: no step of 8 or more levels at any clip edge, 1440 and 390). */
.bpas-v2-doc .fc-mock__win [class*="-mock__pop"] {
	box-shadow: 0 8px 18px -6px rgba(36,19,56,0.2), inset 4px 0 0 var(--theme-color2);
}

.bpas-v2-doc.pfe .pfx-mod__ico {
	box-shadow: 0 0 0 7px color-mix(in srgb, var(--mh) 55%, transparent), 0 10px 20px -4px rgba(0,0,0,0.25);
}

.bpas-v2-doc.pfe .pfe-cta .bpas-pace {
	box-shadow: 0 22px 46px -12px rgba(0,0,0,0.38), 0 0 0 1px rgba(255,204,0,0.12);
}

.bpas-v2-doc.pfe .pfe-cta .bpas-pace:hover,
.bpas-v2-doc.pfe .pfe-cta .bpas-pace:focus-visible {
	box-shadow: 0 24px 46px -12px rgba(0,0,0,0.44), 0 0 0 1px rgba(255,204,0,0.3);
}

@media (max-width: 767px) {
	.bpas-v2-doc .bpas-hero .bpas-cv {
		box-shadow: 0 14px 26px -10px rgba(0,0,0,0.3);
	}

	.bpas-v2-doc.pfe .pfe-cta .bpas-pace,
	.bpas-v2-doc.pfe .pfe-cta .bpas-pace:hover,
	.bpas-v2-doc.pfe .pfe-cta .bpas-pace:focus-visible {
		box-shadow: 0 12px 26px -12px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,204,0,0.2);
	}

	.bpas-v2-doc.pfe .pfe-orbit {
		box-shadow: 0 26px 44px -26px rgba(0,0,0,0.3);
	}

	.bpas-v2-doc.pfe .tde-board {
		box-shadow: 0 26px 44px -26px rgba(10,4,20,0.35);
	}

	.bpas-v2-doc.pfe .pfx-mod {
		box-shadow: 0 30px 40px -26px rgba(0,0,0,0.32);
	}

	.bpas-v2-doc.pfe .pfx-mod__why {
		box-shadow: 0 16px 26px -12px rgba(36,19,56,0.22);
	}

	.bpas-v2-doc.pfe .pfp-sys {
		box-shadow: 0 10px 20px -10px rgba(0,0,0,0.25);
	}
}

/* BPAS CXO Table (1.17.0, 28 Oct 2026). */

/* The file's "[prodRecord logo]" boxes are placeholders for a logo it does not have yet: hidden until it comes. */
.bpas-wp-container.cxo .cxo-logo-placeholder {
	display: none;
}

/* Result of the join form (BPAS Site Core), at the top of the form. */
.bpas-wp-container.cxo .cxo-status {
	margin: 0;
	padding: 10px 15px;
	border-radius: 10px;
	font-size: 15px;
	line-height: 1.5;
	font-weight: 600;
	background: var(--lime);
	color: var(--teal-dark);
}

.bpas-wp-container.cxo .cxo-status--error {
	background: #ffffff;
	color: #a63a1a;
}

/* Soft shadows: a hovered tile or card sits above its neighbours; in the programme grid each card's resting shadow
   falls over the card below it, not under it. */
.bpas-wp-container.cxo .cxo-way:hover,
.bpas-wp-container.cxo .cxo-grid > .cxo-card:hover {
	z-index: 20;
}

.bpas-wp-container.cxo .cxo-grid > .cxo-card:nth-child(1) { z-index: 6; }
.bpas-wp-container.cxo .cxo-grid > .cxo-card:nth-child(2) { z-index: 5; }
.bpas-wp-container.cxo .cxo-grid > .cxo-card:nth-child(3) { z-index: 4; }
.bpas-wp-container.cxo .cxo-grid > .cxo-card:nth-child(4) { z-index: 3; }
.bpas-wp-container.cxo .cxo-grid > .cxo-card:nth-child(5) { z-index: 2; }
.bpas-wp-container.cxo .cxo-grid > .cxo-card:nth-child(6) { z-index: 1; }

/* The hero band clips its content (dot pattern): the tiles' hover shadow fades out inside its 70px bottom padding. */
@media (hover: hover) and (pointer: fine) {
	.bpas-wp-container.cxo .cxo-way:hover {
		box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
	}
}

/* ---------- Boyum Solutions pages (theme 1.18.0, 4 Nov 2026) ---------- */
/* The ERP homes 5.1 / 3.0 bring their own stylesheets (assets/v2/pages/). The iPhone fixes of 27 Oct 2026 (theme 1.14.28 /
   1.15.2), made by hand in the old erp-hub CSS files, still apply to them and to the product hubs:
   - module/area pager arrows keep their 34px circle (flex shrink squeezed them to ~27px);
   - the ViSA wheel keeps its space above and below (Elementor's figure { margin: 0 } wipes it);
   - on phones the PACE logo is as wide as the text (the files make it 20px wider, with -10px margins). */
.bpas-wp-container.bpas-v2-doc .sb1-mod__pager button > span[aria-hidden] {
	flex: none;
}

.bpas-wp-container.elementor .elementor-widget .bpas-vs figure.bpas-vs__wheel {
	margin-top: 25px;
	margin-bottom: 10px;
}

@media (max-width: 480px) {
	.bpas-wp-container.bpas-v2-doc:not(.bh) .bpas-pace__logo {
		width: 100% !important;
		max-width: none !important;
		margin: 0;
	}
}

/* Gaps between a box and the button under it (Parvathi, 4 Nov 2026: the gapScan smartStep card's button touched the note box;
   the BPAS files give the button row no top margin). Layout only. */
.bpas-wp-container.bpas-v2-doc .gs-ss__note + .visa-hero__actions {
	margin-top: 20px;
}
/* Perfion guide self-check panel: "Start again" sat 4px above the review button. */
.bpas-wp-container.bpas-v2-doc .bpas-aud__reset:not([hidden]) + .bpas-aud__cta {
	margin-top: 15px;
}

/* Soft shadows for the ViSA and Custom Libraries pages (Parvathi, 4 Nov 2026: "Yes, soften them").
   Their own page CSS gave these cards zero-blur offset shadows; the soft-shadow rule (1.15.3) allows none. Inset accent bars
   and drawn lines (::before stripes) are not shadows and stay. Raised specificity so the rule wins whatever the file order. */
.bpas-wp-container.bpas-v2-doc :is(.vs-doc, .gs-doc) {
	box-shadow: 0 2px 4px rgba(6, 50, 50, 0.04), 0 6px 14px rgba(6, 50, 50, 0.07);
}
@media (hover: hover) {
	.bpas-wp-container.bpas-v2-doc :is(.vs-doc, .gs-doc):hover {
		z-index: 20;
		box-shadow: 0 4px 8px rgba(6, 50, 50, 0.05), 0 18px 36px rgba(6, 50, 50, 0.12);
	}
}
.bpas-wp-container.bpas-v2-doc :is(.visa-pillar, .visa-way, .visa-sit button:not([aria-pressed="true"])):not(:hover) {
	box-shadow: 0 1px 3px rgba(6, 50, 50, 0.06);
}
/* The chosen situation button's shadow falls over the buttons below it, not under them. */
.bpas-wp-container.bpas-v2-doc .visa-sit button[aria-pressed="true"] {
	position: relative;
	z-index: 1;
}

/* "On this page" card (page navigator v2.1) keeps clear of the scroll-to-top button (Parvathi, 4 Nov 2026).
 * Desktop: the card stays centred on the right, at most 100vh - 300px tall (it scrolls inside beyond that; the script's
 * scroll threshold matches), so its bottom edge stays 150px above the window's bottom, above the button (88px + 50px).
 * Phone/tablet: the button hides while the open card covers the bottom of the screen. */
@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {
	/* Only a card that needs scrolling (.is-scroll, set by the script at the same 100vh - 300px) scrolls; that state moves the
	   "On this page" tab inside the card. A card that fits keeps overflow visible, so its tab above the top edge is not cut
	   off (theme 1.19.10, Parvathi 4 Nov 2026: "top cropped"). */
	/* A card too tall for the window (.is-scroll, set by the script at 100vh - 300px) keeps the same look as every other
	   card (Parvathi, 4 Nov 2026: "Change the style of this box like in the rest of the pages"): the "On this page" tab stays
	   above the top edge and no scrollbar shows. Only the list scrolls, rows are a little closer, and bpas-v2.js keeps the
	   current section in view (theme 1.19.11). */
	.bpas-pn2-host.bpas-wp-container .bpas-pn2 .bpas-pn2__card.is-scroll { max-height: none; overflow: visible; padding-top: 30px; }
	.bpas-pn2-host.bpas-wp-container .bpas-pn2 .bpas-pn2__card.is-scroll .bpas-pn2__tab { top: -15px; }
	.bpas-pn2-host.bpas-wp-container .bpas-pn2 .bpas-pn2__card.is-scroll .bpas-pn2__list { max-height: calc(100vh - 345px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
	.bpas-pn2-host.bpas-wp-container .bpas-pn2 .bpas-pn2__card.is-scroll .bpas-pn2__list::-webkit-scrollbar { display: none; }
	.bpas-pn2-host.bpas-wp-container .bpas-pn2 .bpas-pn2__card.is-scroll .bpas-pn2__list a { min-height: 36px; }
}
body:has(.bpas-pn2.is-open) .scroll-top { opacity: 0 !important; visibility: hidden !important; pointer-events: none; }

/*
 * Design check 4 Nov 2026 (theme 1.19.12).
 * 1. "On this page" (page navigator v2.1: Boyum, ViSA, ERP hubs, Solutions) on phones: the same round button at the
 *    bottom left as on the home and Perfion pages (Parvathi, 26 Oct 2026), instead of the wide pill in the middle that
 *    covered card text and ran into the WhatsApp button. Its words stay for screen readers; the open list rises from
 *    the bottom left.
 * 2. ViSA "Learn" card logos (smartStep, proBoost, ...): at laptop width the card is narrower than the 54px-high logo,
 *    so max-width squeezed the logo sideways. It now scales down whole.
 */
@media (max-width: 720px) {
	.bpas-pn2-host.bpas-wp-container .bpas-pn2 .bpas-pn2__pill {
		left: max(16px, env(safe-area-inset-left));
		bottom: calc(16px + env(safe-area-inset-bottom));
		width: 56px;
		height: 56px;
		min-height: 56px;
		padding: 8px;
		justify-content: center;
		transform: none;
	}

	.bpas-pn2-host.bpas-wp-container .bpas-pn2:not(.is-on) .bpas-pn2__pill {
		transform: translate(0, 140%);
	}

	.bpas-pn2-host.bpas-wp-container .bpas-pn2 .bpas-pn2__ico {
		width: 40px;
		height: 40px;
	}

	.bpas-pn2-host.bpas-wp-container .bpas-pn2 .bpas-pn2__txt,
	.bpas-pn2-host.bpas-wp-container .bpas-pn2 .bpas-pn2__chev {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.bpas-pn2-host.bpas-wp-container .bpas-pn2 .bpas-pn2__card {
		left: max(16px, env(safe-area-inset-left));
		bottom: calc(84px + env(safe-area-inset-bottom));
		transform: none;
	}
}

.bpas-wp-container .visa-learn__logo img {
	object-fit: contain;
	object-position: left center;
}