/* ── ERP Peers Gutenberg Blocks — frontend styles ───────────────────────── */

/* ── Global mark / highlight on section headings (Phase 2.8-L7-P2: plain
   colored text, matching the reference exactly — was a filled pill/badge) ── */
.erpp-about-snapshot__heading mark,
.erpp-approach-h2 mark,
.erpp-wcu-h2 mark {
	background: none;
	color: var(--color-accent);
	font-style: normal;
}
/* Partners section is a light background (--color-section-alt), so the light
   --color-accent used on the dark sections above would fail contrast here —
   use the darker --color-primary instead. */
.erpp-partners-h2 mark {
	background: none;
	color: var(--color-primary);
	font-style: normal;
}

/* ── Shared eyebrow label ──────────────────────────────────────────────── */
.erpp-section-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: 12px;
}
.erpp-section-eyebrow--light { color: var(--color-accent); }
.erpp-section-eyebrow::before {
	content: '';
	display: inline-block;
	width: 10px;
	height: 10px;
	background: currentColor;
	border-radius: 3px;
	flex-shrink: 0;
}

/* ── Blog header row (heading left + view-all right) ────────────────────── */
.erpp-blog-preview__header-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.erpp-blog-preview__all-link {
	font-size: .875rem;
	font-weight: 700;
	color: var(--color-primary) !important;
	text-decoration: none !important;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}
.erpp-blog-preview__all-link:hover { text-decoration: underline !important; }

/* ── Case studies header row ────────────────────────────────────────────── */
.erpp-case-studies__header-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 40px;
}
.erpp-case-studies__all-link {
	font-size: .875rem;
	font-weight: 700;
	color: var(--color-primary) !important;
	text-decoration: none !important;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}
.erpp-case-studies__all-link:hover { text-decoration: underline !important; }

/* ── Services tag, footer, dual buttons ─────────────────────────────────── */
/* Phase 2.8-L7-P2: light "surface" static 4-card grid, matching the
   reference's `.service-grid` exactly (was a dark two-column tab/panel
   switcher). */
.erpp-sv__tag {
	display: block;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: 17px;
}
.erpp-sv-btn-secondary:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.55); color: #fff !important; }

/* ── Key Stats Bar ─────────────────────────────────────────────────────── */
/* Phase 2.8-L7: white/navy treatment, aligned to the approved design-system
   reference (was a dark indigo gradient bar with white text). */
.erpp-stats-bar {
	background: #fff;
	border-bottom: 1px solid var(--color-border);
	padding: 0;
}
.erpp-stats-bar__inner {
	display: grid;
	/* Column count follows the actual number of stats passed in
	   (--erpp-stat-count, set inline by render.php) instead of always
	   assuming 4, so a shorter stats array (e.g. one unsupported stat
	   removed) doesn't leave an empty trailing grid cell. Falls back to
	   4 if the variable is ever missing. Mobile keeps its own fixed
	   2-column layout below, unaffected by this. */
	grid-template-columns: repeat(var(--erpp-stat-count, 4), 1fr);
	gap: 0;
}
.erpp-stats-bar__item {
	text-align: left;
	padding: 29px 28px;
	border-right: 1px solid var(--color-border);
}
.erpp-stats-bar__item:last-child { border-right: 0; }
.erpp-stat__num,
.erpp-stat__suffix {
	font-size: 2.05rem;
	font-weight: 800;
	line-height: 1;
	color: #1e1b4b;
}
.erpp-stat__label {
	font-size: .8rem;
	font-weight: 700;
	color: #667085;
	margin: 8px 0 0;
	text-transform: uppercase;
	letter-spacing: .06em;
}
@media (max-width: 640px) {
	.erpp-stats-bar__inner { grid-template-columns: 1fr 1fr; }
	.erpp-stats-bar__item { padding: 22px 20px; border-right: 1px solid var(--color-border); }
	.erpp-stats-bar__item:nth-child(2) { border-right: 0; }
	.erpp-stats-bar__item:nth-child(-n+2) { border-bottom: 1px solid var(--color-border); }
}

/* ── CTA Banner ────────────────────────────────────────────────────────── */
.erpp-cta-banner {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
	padding: 56px 0;
}
.erpp-cta-banner__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}
.erpp-cta-banner__left { flex: 1 1 0; }
.erpp-cta-banner h2 {
	color: #fff;
	font-size: clamp(1.5rem, 2.8vw, 2.2rem) !important;
	font-weight: 800 !important;
	margin: 0 0 10px !important;
	line-height: 1.2 !important;
}
.erpp-cta-banner p {
	color: rgba(255,255,255,.8);
	font-size: 1rem;
	margin: 0;
	line-height: 1.6;
}
.erpp-cta-banner__right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	flex-shrink: 0;
}
.erpp-cta-reach {
	color: rgba(255,255,255,.85);
	font-size: 1rem;
	font-weight: 600;
}
.erpp-cta-text-link {
	color: #fff !important;
	font-size: 1.0625rem;
	font-weight: 700;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	transition: opacity .2s;
}
.erpp-cta-text-link:hover { opacity: .8; color: #fff !important; }
@media (max-width: 680px) {
	.erpp-cta-banner__row { flex-direction: column; align-items: flex-start; }
	.erpp-cta-banner__right { align-items: flex-start; }
}

/* ── Services Grid ─────────────────────────────────────────────────────── */
.erpp-services-grid {
	background: var(--color-surface);
	padding: 92px 0;
}
.erpp-sv__header { margin-bottom: 44px; }
.erpp-sv__header-row {
	display: grid;
	grid-template-columns: minmax(0,1.1fr) minmax(280px,.65fr);
	align-items: end;
	gap: 48px;
}
.erpp-sv__h2 {
	font-size: clamp(2rem, 3.5vw, 3.35rem) !important;
	font-weight: 800 !important;
	color: var(--color-text-heading) !important;
	line-height: 1.12 !important;
	letter-spacing: -.035em !important;
	margin: 0 !important;
	max-width: 18ch;
}
.erpp-sv__header-side { display: flex; flex-direction: column; gap: 8px; }
.erpp-sv__intro {
	font-size: 1.05rem !important;
	color: var(--color-text-muted) !important;
	line-height: 1.7 !important;
	margin: 0 !important;
}
.erpp-sv__all-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--color-primary) !important;
	font-weight: 700;
	text-decoration: none !important;
}
.erpp-sv__all-link:hover { color: var(--color-primary-dark) !important; }
/* Static 4-card grid */
.erpp-sv__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
.erpp-sv__card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--color-border);
	border-radius: 16px;
	background: #fff;
	overflow: hidden;
}
.erpp-sv__img-wrap { line-height: 0; }
.erpp-sv__img-wrap img {
	width: 100%;
	height: 130px;
	object-fit: cover;
	display: block;
}
.erpp-sv__card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.erpp-sv__stage {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .07em;
	color: var(--color-primary);
}
.erpp-sv__sname {
	font-size: 1.15rem !important;
	font-weight: 700 !important;
	color: var(--color-text-heading) !important;
	margin: 0 !important;
}
.erpp-sv__desc {
	font-size: .875rem !important;
	color: var(--color-text-muted) !important;
	line-height: 1.6 !important;
	margin: 0 !important;
	flex: 1;
}
.erpp-sv__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	color: var(--color-primary) !important;
	font-size: .875rem;
	font-weight: 700;
	text-decoration: none !important;
}
.erpp-sv__link:hover { color: var(--color-primary-dark) !important; }
@media (max-width: 1040px) {
	.erpp-sv__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
	.erpp-sv__header-row { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 640px) {
	.erpp-services-grid { padding: 56px 0; }
	.erpp-sv__grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
	.erpp-services-grid { padding: 60px 0; }
}

/* ── About Us Snapshot ─────────────────────────────────────────────────── */
/* Phase 2.8-L7: white treatment, aligned to the approved design-system
   reference (was a dark navy panel). */
.erpp-about-snapshot {
	background: #fff;
	padding: 96px 0 104px;
	position: relative;
	overflow: hidden;
}
.erpp-about-snapshot::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(79,70,229,.06) 1px, transparent 1px);
	background-size: 32px 32px;
	pointer-events: none;
	z-index: 0;
}
.erpp-about-snapshot::after {
	content: '';
	position: absolute;
	top: -120px; right: -100px;
	width: 540px; height: 540px;
	background: radial-gradient(circle, rgba(79,70,229,.06) 0%, transparent 66%);
	pointer-events: none;
	z-index: 0;
}
.erpp-about-snapshot__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 72px;
	align-items: center;
	position: relative;
	z-index: 1;
}
.erpp-about-snapshot__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: 14px;
}
.erpp-about-snapshot__eyebrow-dot {
	width: 11px;
	height: 11px;
	background: var(--color-primary);
	border-radius: 3px;
	flex-shrink: 0;
}
.erpp-about-snapshot__heading {
	font-size: clamp(1.75rem, 2.6vw, 2.5rem) !important;
	font-weight: 800 !important;
	color: var(--color-text-heading) !important;
	line-height: 1.18 !important;
	letter-spacing: -.03em !important;
	margin: 0 0 20px !important;
}
.erpp-about-snapshot__body {
	font-size: .9375rem !important;
	color: var(--color-text-body) !important;
	line-height: 1.74 !important;
	margin-bottom: 14px !important;
}
.erpp-about-snapshot__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 40px;
	margin-bottom: 32px;
	padding-top: 28px;
	border-top: 1px solid var(--color-border);
}
.erpp-about-snapshot__stat {
	display: flex;
	flex-direction: column;
}
.erpp-about-snapshot__stat-num,
.erpp-about-snapshot__stat-suffix {
	font-size: 2rem;
	font-weight: 800;
	color: var(--color-primary);
	line-height: 1;
	display: inline;
}
.erpp-about-snapshot__stat-label {
	font-size: 0.875rem;
	color: var(--color-text-muted);
	margin-top: 4px;
}
.erpp-about-snapshot__image {
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 24px 56px rgba(15,14,42,.14), 0 0 0 1px var(--color-border);
	line-height: 0;
}
.erpp-about-snapshot__image img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	aspect-ratio: 4/3;
	transition: transform .7s cubic-bezier(.25,.46,.45,.94);
}
.erpp-about-snapshot__image:hover img { transform: scale(1.04); }
.erpp-about-snapshot__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: linear-gradient(135deg, var(--color-electric), var(--color-primary));
	color: #fff !important;
	font-size: .875rem;
	font-weight: 700;
	padding: 13px 28px;
	border-radius: 50px;
	text-decoration: none !important;
	transition: box-shadow .28s, transform .28s;
	box-shadow: 0 4px 20px rgba(99,102,241,.38);
	margin-top: 24px;
}
.erpp-about-snapshot__cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 32px rgba(99,102,241,.55);
	color: #fff !important;
}
@media (max-width: 860px) {
	.erpp-about-snapshot__inner { grid-template-columns: 1fr; gap: 48px; }
	.erpp-about-snapshot__image { order: -1; }
}
@media (max-width: 540px) { .erpp-about-snapshot { padding: 64px 0 72px; } }

/* ── Industries We Serve ───────────────────────────────────────────────── */
/* ── Industries We Serve — Phase 2.8-L7: dark navy treatment, aligned to
   the approved design-system reference (was a light tile grid). ── */
.erpp-industries-grid {
	background: var(--color-dark);
	padding: 80px 0;
}
.erpp-ind-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 44px;
	flex-wrap: wrap;
}
.erpp-ind-header-left { flex: 1 1 0; min-width: 0; }
.erpp-ind-h2 {
	color: #fff !important;
	font-size: clamp(1.75rem, 2.8vw, 2.25rem) !important;
	font-weight: 800 !important;
	letter-spacing: -.02em !important;
	margin: 0 0 10px !important;
	line-height: 1.2 !important;
}
/* Phase 2.8-L7-P2: plain colored text, matching the reference (was a filled
   highlight pill). */
.erpp-ind-h2 mark {
	background: none !important;
	color: var(--color-accent) !important;
	font-style: normal;
}
.erpp-ind-desc {
	font-size: .875rem;
	color: rgba(255,255,255,.62);
	line-height: 1.65;
	margin: 0;
	max-width: 520px;
}
.erpp-ind-viewall {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .82rem;
	font-weight: 700;
	color: var(--color-accent) !important;
	text-decoration: none !important;
	padding: 10px 20px;
	border: 1.5px solid rgba(255,255,255,.25);
	border-radius: 8px;
	white-space: nowrap;
	flex-shrink: 0;
	align-self: flex-end;
	transition: background .2s, border-color .2s;
}
.erpp-ind-viewall:hover { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.5) !important; }
/* Grid of tiles */
/* Phase 2.8-L7-P1: grouped 3-column link-list, matching the approved
   design-system reference exactly (was an 11-tile icon grid). */
.erpp-ind-groups {
	display: grid;
	grid-template-columns: 1.2fr .82fr 1.08fr;
	border-top: 1px solid rgba(255,255,255,.15);
	border-left: 1px solid rgba(255,255,255,.15);
}
.erpp-ind-group {
	min-width: 0;
	padding: 24px;
	border-right: 1px solid rgba(255,255,255,.15);
	border-bottom: 1px solid rgba(255,255,255,.15);
}
.erpp-ind-group-label {
	display: block;
	min-height: 36px;
	margin-bottom: 8px;
	color: var(--color-accent);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.erpp-ind-group a,
.erpp-ind-group-plain {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 11px 0;
	border-top: 1px solid rgba(255,255,255,.11);
	color: #fff;
	font-size: .93rem;
	font-weight: 600;
	text-decoration: none !important;
}
.erpp-ind-group a b { color: var(--color-accent); font-weight: 500; }
.erpp-ind-group a:hover { color: #c8c4ff; }
.erpp-ind-group-note {
	margin-top: 17px;
	color: #aaa8be;
	font-size: .82rem;
	line-height: 1.55;
}
@media (max-width: 1024px) { .erpp-ind-groups { grid-template-columns: 1.15fr .85fr 1fr; } }
@media (max-width: 640px)  {
	.erpp-industries-grid { padding: 56px 0; }
	.erpp-ind-header { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 32px; }
	.erpp-ind-viewall { align-self: flex-start; }
	.erpp-ind-groups { display: flex; gap: 14px; overflow-x: auto; padding: 0 0 12px; border: 0; scroll-snap-type: x mandatory; }
	.erpp-ind-group { flex: 0 0 86%; padding: 21px; border: 1px solid rgba(255,255,255,.15); border-radius: 14px; scroll-snap-align: start; }
}

/* ── Client Testimonials ───────────────────────────────────────────────── */
/* Phase 2.8-L7-P3: rotating viewport, same approved card design as L7-P1
   (was a static 3-card grid capped to 3 reviews; now shows every real
   review via a paginated rotator, without growing section height). */
.erpp-testimonials,.erpp-rev-section{padding:96px 0;background:var(--color-dark);position:relative;overflow:hidden}
.erpp-rev-section::before{content:'';position:absolute;top:-120px;right:-80px;width:480px;height:480px;background:radial-gradient(circle,rgba(79,70,229,.18) 0%,transparent 70%);pointer-events:none}
.erpp-rev-hdr{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(240px,.65fr);align-items:end;gap:48px;margin-bottom:44px}
.erpp-rev-hdr .erpp-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--color-accent);margin-bottom:16px;display:block}
.erpp-rev-hdr h2{font-size:clamp(1.8rem,3.2vw,2.5rem)!important;font-weight:800!important;color:#fff!important;line-height:1.15!important;letter-spacing:-.03em!important;margin:0!important}
.erpp-rev-hdr h2 em{font-style:normal;color:var(--color-accent)}
.erpp-rev-sub{font-size:1.05rem!important;color:rgba(255,255,255,.58)!important;line-height:1.7!important;margin:0!important}
/* Viewport clips the track; --rev-visible controls how many cards a "page"
   holds at the current breakpoint (JS reads this to compute page count). */
.erpp-rev-viewport{--rev-visible:3;--rev-gap:16px;position:relative;z-index:1;overflow:hidden}
.erpp-rev-track{display:flex;gap:var(--rev-gap);transition:transform .5s cubic-bezier(.4,0,.2,1)}
@media(prefers-reduced-motion:reduce){.erpp-rev-track{transition:none}}
.erpp-rev-card{flex:0 0 calc((100% - (var(--rev-visible) - 1)*var(--rev-gap))/var(--rev-visible));min-width:0;display:flex;flex-direction:column;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.13);border-radius:22px;padding:28px}
.erpp-rev-stars{margin-bottom:18px;color:var(--color-accent);letter-spacing:.18em;font-size:1rem}
.erpp-rev-text{margin:0 0 24px!important;color:#eeedf6!important;font-size:1rem!important;line-height:1.72!important;font-style:normal!important}
.erpp-rev-footer{display:block;margin-top:auto;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);color:#aaa8be;font-size:.8rem}
.erpp-rev-footer strong{display:block;margin-bottom:2px;color:#fff;font-weight:700}
/* Rotator controls — small, premium, aligned to the existing accent token */
.erpp-rev-nav{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:18px;margin-top:28px}
.erpp-rev-dots{display:flex;align-items:center;gap:7px}
.erpp-rev-dot{width:7px;height:7px;padding:0;border:none;border-radius:50%;background:rgba(255,255,255,.25);cursor:pointer;transition:background .25s,width .25s,border-radius .25s}
.erpp-rev-dot.is-active{width:22px;border-radius:4px;background:var(--color-accent)}
.erpp-rev-dot:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.erpp-rev-arrows{display:flex;gap:8px}
.erpp-rev-arrow{width:36px;height:36px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.04);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,border-color .2s,opacity .2s}
.erpp-rev-arrow:hover:not(:disabled){background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4)}
.erpp-rev-arrow:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.erpp-rev-arrow:disabled{opacity:.3;cursor:default}
.erpp-rev-links{position:relative;z-index:1;display:flex;gap:12px;margin-top:30px}
.erpp-rev-link{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border:1px solid rgba(255,255,255,.28);border-radius:999px;color:#fff!important;font-size:.85rem;font-weight:700;text-decoration:none!important;transition:background .2s,border-color .2s}
.erpp-rev-link:hover{border-color:#fff;background:rgba(255,255,255,.08)}
@media(max-width:1023px){.erpp-rev-viewport{--rev-visible:2}}
@media(max-width:768px){.erpp-rev-hdr{grid-template-columns:1fr;gap:16px}}
@media(max-width:600px){
  .erpp-testimonials,.erpp-rev-section{padding:64px 0}
  .erpp-rev-viewport{--rev-visible:1}
  .erpp-rev-card{padding:23px}
  .erpp-rev-links{flex-direction:column}
}

/* ── Blog & Insights ───────────────────────────────────────────────────── */
/* ── Blog Section — exact design from erpp-blog-premium.php ── */
/* Phase 2.8-L7: light treatment, aligned to the approved design-system
   reference (was a dark navy panel). */
.erpp-blog-preview,.erpp-bl{padding:88px 0 80px;background:var(--color-surface);position:relative;overflow:hidden}
.erpp-bl::before{content:'';position:absolute;top:-100px;left:50%;transform:translateX(-50%);width:800px;height:380px;background:radial-gradient(ellipse,rgba(79,70,229,.06) 0%,transparent 68%);pointer-events:none;z-index:0}
.erpp-bl::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(15,14,42,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(15,14,42,.02) 1px,transparent 1px);background-size:60px 60px;pointer-events:none;mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,#000 40%,transparent 100%);z-index:0}
.erpp-bl .container{position:relative;z-index:1}
.erpp-bl-hdr{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:48px;flex-wrap:wrap}
.erpp-bl-eyebrow{display:block;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--color-primary);margin-bottom:10px}
.erpp-bl-h2{font-size:clamp(1.6rem,2.7vw,2.15rem)!important;font-weight:800!important;color:var(--color-text-heading)!important;margin:0 0 10px!important;line-height:1.2!important;letter-spacing:-.025em!important}
.erpp-bl-sub{font-size:.875rem!important;color:var(--color-text-muted)!important;margin:0!important;line-height:1.65!important;max-width:480px}
.erpp-bl-all{display:inline-flex;align-items:center;gap:7px;color:var(--color-primary)!important;font-size:.85rem;font-weight:600;text-decoration:none!important;white-space:nowrap;margin-bottom:4px;transition:gap .2s,color .2s;flex-shrink:0}
.erpp-bl-all:hover{color:var(--color-primary-dark)!important;gap:11px}
/* Phase 2.8-L7-P2: matches the reference's actual computed behavior — a
   horizontally-scrolling row of equal-width cards, not a wrapping grid (see
   the same finding recorded for .erpp-cs-grid above). */
.erpp-bl-grid{display:flex;gap:16px;overflow-x:auto;padding:2px 2px 13px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#c8c4ff transparent}
.erpp-bl-card{flex:0 0 calc((100% - 32px) / 3);scroll-snap-align:start;background:#fff;border:1px solid var(--color-border);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .3s,border-color .3s,transform .3s;text-decoration:none!important}
.erpp-bl-card:hover{transform:translateY(-7px)!important;box-shadow:var(--shadow-md,0 22px 45px rgba(15,14,42,.12));border-color:var(--color-primary-light)}
.erpp-bl-img{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--color-surface);flex-shrink:0;display:block}
.erpp-bl-img img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;transition:transform .55s ease!important}
.erpp-bl-card:hover .erpp-bl-img img{transform:scale(1.07)!important}
.erpp-bl-img-fg{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 55%,rgba(15,14,42,.35));pointer-events:none}
.erpp-bl-img-cat{position:absolute;bottom:12px;left:14px;display:flex;gap:6px;flex-wrap:wrap}
.erpp-bl-tag{font-size:.65rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:3px 10px;border-radius:50px;background:rgba(79,70,229,.85);backdrop-filter:blur(6px);color:#fff;border:1px solid rgba(255,255,255,.3);line-height:1.6}
.erpp-bl-body{padding:18px 22px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.erpp-bl-meta{font-size:.72rem!important;color:var(--color-text-muted)!important;margin:0!important;display:flex;align-items:center;gap:8px}
.erpp-bl-meta-sep{width:3px;height:3px;border-radius:50%;background:var(--color-border);flex-shrink:0}
.erpp-bl-card-h3{font-size:.9875rem!important;font-weight:700!important;color:var(--color-text-heading)!important;margin:0!important;line-height:1.42!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
.erpp-bl-exc{font-size:.8rem!important;color:var(--color-text-muted)!important;margin:0!important;line-height:1.62!important;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.erpp-bl-read{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;font-weight:600;color:var(--color-primary)!important;text-decoration:none!important;margin-top:4px;transition:gap .2s,color .2s;align-self:flex-start}
.erpp-bl-read:hover{color:var(--color-primary-dark)!important;gap:8px}
@media(max-width:991px){.erpp-bl-hdr{flex-direction:column;align-items:flex-start;gap:14px}.erpp-bl-card{flex-basis:calc((100% - 16px) / 2)}}
@media(max-width:639px){
  .erpp-blog-preview,.erpp-bl{padding:64px 0 60px}
  .erpp-bl-card{flex-basis:86%}
}

/* ── Case Studies ──────────────────────────────────────────────────────── */
/* ── Case Studies — Phase 2.8-L7-P1: the real, active stylesheet for this
   component now lives in assets/css/custom.css (the file that already
   matched the render.php markup directly). Nothing kept here to avoid a
   repeat of the cross-stylesheet cascade conflict found during L7. ── */

/* ── Our Approach ──────────────────────────────────────────────────────── */
/* ── Our Approach — dark text+image layout ── */
.erpp-our-approach {
	background: var(--color-dark);
	padding: 96px 0 104px;
	position: relative;
	overflow: hidden;
}
.erpp-our-approach::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(-55deg, transparent 0, transparent 28px, rgba(99,102,241,.02) 28px, rgba(99,102,241,.02) 29px);
	pointer-events: none;
}
.erpp-approach-inner {
	display: grid;
	grid-template-columns: 1fr 1.08fr;
	gap: 72px;
	align-items: center;
	position: relative;
	z-index: 1;
}
.erpp-approach-no-img {
	grid-template-columns: 1fr;
	max-width: 760px;
	margin: 0 auto;
}
.erpp-approach-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: 14px;
}
.erpp-approach-eyebrow-dot {
	width: 11px;
	height: 11px;
	background: var(--color-electric);
	border-radius: 3px;
	flex-shrink: 0;
}
.erpp-approach-h2 {
	font-size: clamp(1.75rem, 2.6vw, 2.5rem) !important;
	font-weight: 800 !important;
	color: #fff !important;
	line-height: 1.18 !important;
	letter-spacing: -.03em !important;
	margin: 0 0 20px !important;
}
.erpp-approach-desc {
	font-size: .9375rem !important;
	color: rgba(255,255,255,.68) !important;
	line-height: 1.74 !important;
	margin: 0 0 14px !important;
}
.erpp-approach-imgwrap {
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 32px 72px rgba(0,0,0,.5), 0 0 0 1px rgba(139,92,246,.18);
	line-height: 0;
}
.erpp-approach-imgwrap img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	aspect-ratio: 16/9;
	transition: transform .7s cubic-bezier(.25,.46,.45,.94);
}
.erpp-approach-imgwrap:hover img { transform: scale(1.04); }
@media (max-width: 960px) {
	.erpp-approach-inner { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 540px) {
	.erpp-our-approach { padding: 64px 0 72px; }
}

/* ── Hero Banner ─────────────────────────────────────────────────────────── */
.erpp-hero {
	position: relative;
	background: #080717;
	padding: 0;
	overflow: hidden;
}
.erpp-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
		rgba(8,7,22,.90) 0%,
		rgba(10,9,28,.85) 35%,
		rgba(10,9,28,.68) 55%,
		rgba(10,9,28,.45) 100%);
	pointer-events: none;
}
.erpp-hero-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 0 24px;
}
.erpp-hero-col {
	max-width: 44%;
	text-align: left;
}
.erpp-hero-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #c8c4ff;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	margin-bottom: 17px;
}
.erpp-hero-eyebrow::before {
	content: '';
	width: 28px;
	height: 2px;
	background: currentColor;
	flex-shrink: 0;
}
.erpp-hero-h1 {
	font-size: clamp(1.75rem, 3.4vw, 2.9rem) !important;
	font-weight: 700 !important;
	color: #fff !important;
	line-height: 1.15 !important;
	letter-spacing: -.03em !important;
	margin: 0 0 22px !important;
}
.erpp-hero-sub {
	font-size: 1.0625rem !important;
	color: rgba(255,255,255,.75) !important;
	line-height: 1.72 !important;
	margin: 0 0 32px !important;
	max-width: 560px;
}
.erpp-hero-btns {
	display: flex;
	gap: 14px;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin-bottom: 4px;
}
.erpp-hero-btn-primary {
	display: inline-block;
	background: linear-gradient(135deg, var(--color-electric) 0%, var(--color-primary) 100%);
	color: #fff !important;
	border-radius: 50px;
	padding: 13px 32px;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none !important;
	box-shadow: 0 4px 18px rgba(99,102,241,.45);
	transition: transform .22s, box-shadow .22s;
}
.erpp-hero-btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 32px rgba(99,102,241,.6);
	color: #fff !important;
}
.erpp-hero-btn-secondary {
	display: inline-block;
	color: #fff !important;
	border: 2px solid rgba(255,255,255,.4);
	border-radius: 50px;
	padding: 13px 30px;
	font-size: .9375rem;
	font-weight: 600;
	text-decoration: none !important;
	transition: background .2s, border-color .2s;
}
.erpp-hero-btn-secondary:hover {
	background: rgba(255,255,255,.1);
	border-color: rgba(255,255,255,.7);
	color: #fff !important;
}
/* Homepage-scoped hero CTA correction (Phase 2.8-L7-P2): the reference's hero
   primary CTA is a flat white pill, normal case — not the gradient/uppercase
   pill used sitewide. Scoped to .page-id-2 only; every other page's hero
   keeps the existing shared style untouched. */
.page-id-2 .erpp-hero-btn-primary {
	background: #fff;
	color: var(--color-primary) !important;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	font-size: .91rem;
	padding: 13px 28px;
}
.page-id-2 .erpp-hero-btn-primary:hover {
	background: #f2f3fb;
	color: var(--color-primary-dark) !important;
	box-shadow: none;
	transform: none;
}
.page-id-2 .erpp-hero-btn-secondary {
	border-radius: 999px;
	font-size: .91rem;
	font-weight: 700;
	padding: 13px 28px;
}
/* Award badges — absolute bottom-right of carousel (Phase 2.8-L7-P2: real
   image badges in a bordered translucent card, matching the reference's
   `.award` treatment, replacing the previous bare hand-drawn SVG diamonds) */
.erpp-hero-badges {
	position: absolute;
	z-index: 10;
	right: max(24px, calc((100vw - 1200px) / 2));
	bottom: 30px;
	display: flex;
	gap: 9px;
}
/* Phase 2.8-L20-P1 (owner request): removed the near-solid white card
   background — badges now sit on a subtle frosted-glass tint instead,
   keeping them legible against the hero gradient without a "pasted on
   white box" look. Badge images/links/sizing are otherwise unchanged. */
.erpp-hero-badge-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	min-height: 72px;
	padding: 5px;
	border: 1px solid rgba(255,255,255,.32);
	border-radius: 10px;
	background: rgba(255,255,255,.12);
	backdrop-filter: blur(10px);
	box-shadow: 0 4px 16px rgba(0,0,0,.15);
	transition: transform .2s, background-color .2s;
	flex-shrink: 0;
}
.erpp-hero-badge-item:hover { background: rgba(255,255,255,.2); transform: translateY(-3px); }
.erpp-hero-badge-item img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 991px) {
	.erpp-hero-badges {
		position: static;
		justify-content: center;
		flex-wrap: wrap;
		margin-top: 24px;
	}
}
@media (max-width: 640px) {
	.erpp-hero-badges { flex-wrap: nowrap; gap: 6px; }
	.erpp-hero-badge-item { flex: 0 0 calc(33.333% - 4px); width: auto; min-width: 0; }
}

/* Tech logos — integrated inside hero slide (no separate black strip) */
.erpp-hero-logos { display: none !important; }

/* Tech logos strip inside slide */
.erpp-hero-tech-strip {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 17px;
	margin-top: 25px;
	padding-top: 20px;
	border-top: 1px solid rgba(255,255,255,.18);
}
.erpp-tl-label {
	color: #aaa8be;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.erpp-tl-item {
	display: flex;
	align-items: center;
	padding: 0;
}
.erpp-tl-sep {
	width: 1px;
	height: 18px;
	background: rgba(255,255,255,.22);
	flex-shrink: 0;
}
.erpp-tl-item img,
.erpp-tl-item svg {
	display: block;
	height: 22px !important;
	width: auto !important;
	max-width: 110px;
	opacity: .78;
	filter: saturate(0) brightness(10);
	transition: opacity .2s;
}
.erpp-tl-item:hover img,
.erpp-tl-item:hover svg { opacity: 1; }
.erpp-tl-text {
	display: block;
	height: 22px;
	line-height: 22px;
	font-family: var(--font-family);
	font-size: 13.5px;
	font-weight: 600;
	color: #fff;
	opacity: .82;
	letter-spacing: -.2px;
	white-space: nowrap;
	transition: opacity .2s;
}
.erpp-tl-item:hover .erpp-tl-text { opacity: 1; }

/* Celigo source asset is pure black (#000) — brightness() alone can never lift
   true black to white, so invert it first to match the other white logos */
.erpp-tl-item img[src*="celigo"] {
	filter: invert(1) saturate(0) brightness(10);
}
/* Boomi's SVG viewBox is tightly cropped (no internal padding), so the shared
   22px height makes it read visually larger than the other logos; restore its
   originally-intended smaller size */
.erpp-tl-item img[src*="boomi"] {
	height: 18px !important;
}

/* ── Mobile/Tablet responsive overrides (Phase 3) ──────────────────────── */
/* Hero column: full width below desktop so heading/text are not compressed */
@media (max-width: 991px) {
	.erpp-hero-col { max-width: 100%; }
}
/* Tech-strip: wrapped, centered layout so all 5 logos stay visible (no horizontal scroll) */
@media (max-width: 991px) {
	.erpp-hero-tech-strip {
		flex-wrap: wrap;
		justify-content: center;
	}
}
@media (max-width: 640px) {
	.erpp-hero-tech-strip { gap: 12px 4px; padding-top: 14px; margin-top: 18px; }
	.erpp-tl-item { padding: 4px 8px; }
	.erpp-tl-sep { display: none; }
}
	.erpp-hero-logos-strip img { max-height: 20px; }
}

/* Carousel wrapper */
.erpp-hero-carousel .carousel-item {
	min-height: 560px;
	background: linear-gradient(135deg, var(--color-dark-2) 0%, #1e1b4b 40%, #312e81 100%);
}
/* Only active/transitioning items get flex */
.erpp-hero-carousel .carousel-item.active,
.erpp-hero-carousel .carousel-item-next,
.erpp-hero-carousel .carousel-item-prev {
	display: flex !important;
	align-items: flex-start;
	padding: 88px 0 72px;
	min-height: 540px;
}
.erpp-hero-slide-content {
	max-width: 660px;
	margin: 0;
	text-align: left;
	padding: 0 24px;
	position: relative;
	z-index: 1;
}
.erpp-hero-indicators { bottom: 24px !important; }
.erpp-hero-indicators [data-bs-target] {
	width: 10px !important; height: 10px !important;
	border-radius: 50% !important; background: rgba(255,255,255,.4) !important;
	border: none !important; margin: 0 5px !important; transition: background .3s !important;
}
.erpp-hero-indicators .active { background: #fff !important; }
.erpp-hero-prev, .erpp-hero-next {
	width: 44px !important; height: 44px !important;
	background: rgba(255,255,255,.15) !important;
	border-radius: 50% !important; border: 1px solid rgba(255,255,255,.25) !important;
}
.erpp-hero-prev,
.erpp-hero-next { display: none !important; }
@media (max-width: 600px) {
	.erpp-hero { padding: 80px 0 72px; }
	.erpp-hero-btns { flex-direction: column; align-items: center; }
	.erpp-hero-carousel .carousel-item { min-height: 380px; }
	.erpp-hero-prev, .erpp-hero-next { display: none !important; }
}

/* ── Partner Logos ───────────────────────────────────────────────────────── */
/* ── Partner Logos — dark split layout ── */
.erpp-partners {
	background: #fff;
	padding: 52px 0;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}
.erpp-partners-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}
.erpp-partners-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: 17px;
}
.erpp-partners-eyebrow::before {
	content: '';
	width: 28px;
	height: 2px;
	background: currentColor;
	flex-shrink: 0;
}
.erpp-partners-h2 {
	font-size: 2rem !important;
	font-weight: 800 !important;
	color: var(--color-text-heading) !important;
	line-height: 1.18 !important;
	letter-spacing: -.03em !important;
	margin: 0 0 18px !important;
}
.erpp-partners-desc {
	font-size: 1rem !important;
	color: var(--color-text-muted) !important;
	line-height: 1.74 !important;
	margin: 0 !important;
}
.erpp-partners-logos {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 48px;
}
.erpp-partners-logo-item a { display: flex; align-items: center; }
.erpp-partners-logo-item img {
	max-width: 150px;
	max-height: 76px;
	object-fit: contain;
	transition: opacity .3s;
}
.erpp-partners-logo-item:last-child img {
	width: 180px;
	max-width: 180px;
	max-height: 92px;
}
.erpp-partners-logo-item img:hover { opacity: .85; }
@media (max-width: 860px) {
	.erpp-partners-inner { grid-template-columns: 1fr; gap: 40px; }
	.erpp-partners-logos  { justify-content: flex-start; }
}
@media (max-width: 620px) {
	.erpp-partners { padding: 32px 0; }
	.erpp-partners-logos { flex-direction: column; align-items: flex-start; gap: 24px; }
	.erpp-partners-logo-item:last-child img { width: 160px; }
}

/* ── Why ERP Peers ───────────────────────────────────────────────────────── */
/* ── Why ERP Peers — dark 4-feature-card layout ── */
.erpp-wcu {
	background: var(--color-dark);
	padding: 88px 0;
	position: relative;
	overflow: hidden;
}
.erpp-wcu::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(99,102,241,.07) 1px, transparent 1px);
	background-size: 32px 32px;
	pointer-events: none;
}
.erpp-wcu-inner {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 72px;
	align-items: center;
	position: relative;
	z-index: 1;
}
.erpp-wcu-imgwrap {
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 32px 72px rgba(0,0,0,.5), 0 0 0 1px rgba(99,102,241,.18);
	line-height: 0;
}
.erpp-wcu-imgwrap img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	aspect-ratio: 4/3;
}
.erpp-wcu-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: 14px;
}
.erpp-wcu-eyebrow-dot {
	width: 11px;
	height: 11px;
	background: var(--color-electric);
	border-radius: 3px;
	flex-shrink: 0;
}
.erpp-wcu-h2 {
	font-size: clamp(1.75rem, 2.6vw, 2.5rem) !important;
	font-weight: 800 !important;
	color: #fff !important;
	line-height: 1.18 !important;
	letter-spacing: -.03em !important;
	margin: 0 0 18px !important;
}
.erpp-wcu-h2 mark {
	background: linear-gradient(135deg, var(--color-electric), var(--color-primary));
	color: #fff;
	border-radius: 8px;
	padding: 1px 12px 3px;
	font-style: normal;
}
.erpp-wcu-desc {
	font-size: .9375rem !important;
	color: rgba(255,255,255,.68) !important;
	line-height: 1.74 !important;
	margin: 0 0 32px !important;
}
.erpp-wcu-features {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
}
.erpp-wcu-feat {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.erpp-wcu-feat-ico {
	width: 40px;
	height: 40px;
	background: rgba(99,102,241,.2);
	border: 1px solid rgba(99,102,241,.35);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--color-accent);
}
.erpp-wcu-feat-ico svg {
	width: 18px;
	height: 18px;
}
.erpp-wcu-feat-title {
	font-size: .9375rem !important;
	font-weight: 700 !important;
	color: #fff !important;
	margin: 0 0 5px !important;
	line-height: 1.3 !important;
}
.erpp-wcu-feat-desc {
	font-size: .8rem !important;
	color: rgba(255,255,255,.45) !important;
	line-height: 1.6 !important;
	margin: 0 !important;
}
@media (max-width: 960px) {
	.erpp-wcu-inner    { grid-template-columns: 1fr; gap: 48px; }
	.erpp-wcu-features { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
	.erpp-wcu          { padding: 60px 0; }
	.erpp-wcu-features { grid-template-columns: 1fr; gap: 18px; }
}

/* ── Contact Section ─────────────────────────────────────────────────────── */
/* Phase 2.8-L7: light indigo-tinted treatment, aligned to the approved
   design-system reference (was a dark navy panel). The white form card
   itself was already correct and is unchanged. */
.erpp-contact {
	background: var(--color-primary-subtle);
	padding: 80px 0;
	position: relative;
}
.erpp-contact::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(79,70,229,.05) 1px, transparent 1px);
	background-size: 32px 32px;
	pointer-events: none;
}
.erpp-contact-inner {
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap: 60px;
	align-items: start;
	position: relative;
	z-index: 1;
}
.erpp-contact-h2 {
	font-size: clamp(1.6rem, 2.6vw, 2.25rem) !important;
	font-weight: 800 !important;
	color: var(--color-text-heading) !important;
	line-height: 1.2 !important;
	margin: 0 0 12px !important;
}
.erpp-contact-sub {
	color: var(--color-text-body);
	font-size: .9375rem;
	line-height: 1.7;
	margin: 0 0 32px;
}
.erpp-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.erpp-contact-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 10px;
	padding: 12px 16px;
}
.erpp-contact-icon {
	width: 36px;
	height: 36px;
	background: var(--color-primary-subtle);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary);
	flex-shrink: 0;
}
.erpp-contact-icon--wa { background: rgba(37,211,102,.15); color: #18775d; }
.erpp-contact-label {
	display: block;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-bottom: 1px;
}
.erpp-contact-list a {
	color: var(--color-text-heading) !important;
	text-decoration: none !important;
	font-size: .875rem;
	font-weight: 600;
	transition: color .2s;
}
.erpp-contact-list a:hover { color: var(--color-primary) !important; }
/* Form card — white with dark text like old site.
   Phase 2.8-L20-P1: visual design brought in line with the
   /netsuite-development/ (and sitewide footer) contact-form card
   (`.home-contact-frm` in custom.css) — deeper shadow, top accent
   line, 2-column field grid, heavier title weight. Only visual/layout
   styling changed here; the CF7 form ID, fields, and backend are
   untouched. */
.erpp-contact-form {
	background: #fff;
	border: none;
	border-radius: var(--radius-lg);
	padding: 32px 32px 28px;
	box-shadow: 0 32px 100px rgba(0,0,0,.35);
	position: relative;
}
.erpp-contact-form::before {
	content: '';
	position: absolute;
	top: 0; left: 40px; right: 40px;
	height: 3px;
	background: linear-gradient(to right, var(--color-electric), var(--color-teal));
	border-radius: 0 0 4px 4px;
}
/* 2-column grid for form fields, matching the same real CF7 form's
   (shortcode id 475) field-grid pattern already used on /contact-us/
   (assets/css/contact-page.css) — the form's stored field order is
   Name, Company, Email, Phone, Message, reCAPTCHA, Submit (all
   wrapped in .form-grop; Message + reCAPTCHA additionally carry
   .form-message-box). Class-based, not nth-child-based, so it stays
   correct regardless of field order — Name/Company/Email/Phone
   auto-place two-per-row, Message/reCAPTCHA/Submit are forced full
   width. No CF7 form-tag/database change — presentation only. */
.erpp-contact-form .wpcf7-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 12px;
}
.erpp-contact-form .form-grop.form-message-box,
.erpp-contact-form .form-grop:has(input[type="submit"]) { grid-column: 1 / -1; }
.erpp-contact-form .wpcf7-response-output { grid-column: 1 / -1; }
.erpp-contact-form .wpcf7 .wpcf7-spinner { grid-column: 1 / -1; }
@media (max-width: 640px) {
	.erpp-contact-form .wpcf7-form { grid-template-columns: 1fr; }
	.erpp-contact-form .form-grop { grid-column: 1 / -1 !important; }
}
/* CF7 form fields inside white form card */
.erpp-contact-form .wpcf7-form input,
.erpp-contact-form .wpcf7-form textarea,
.erpp-contact-form .wpcf7-form select {
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	color: #1e293b !important;
	border-radius: 8px !important;
	padding: 12px 14px !important;
	width: 100% !important;
	font-size: .875rem !important;
}
.erpp-contact-form .wpcf7-form input::placeholder,
.erpp-contact-form .wpcf7-form textarea::placeholder { color: #94a3b8 !important; }
.erpp-contact-form .wpcf7-form input:focus,
.erpp-contact-form .wpcf7-form textarea:focus,
.erpp-contact-form .wpcf7-form select:focus {
	outline: none !important;
	border-color: var(--color-electric) !important;
	background: #fff !important;
	box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important;
}
.erpp-contact-form .wpcf7-form input[type="submit"] {
	width: 100% !important;
	background: linear-gradient(135deg, var(--color-electric), var(--color-primary)) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 50px !important;
	font-weight: 700 !important;
	font-size: .9375rem !important;
	letter-spacing: .06em !important;
	text-transform: uppercase !important;
	padding: 14px 32px !important;
	margin-top: 8px !important;
	cursor: pointer !important;
	transition: transform .2s, box-shadow .2s !important;
}
.erpp-contact-form .wpcf7-form input[type="submit"]:hover {
	transform: translateY(-1px) !important;
	box-shadow: 0 6px 20px rgba(99,102,241,.5) !important;
}
.erpp-contact-form-title {
	font-size: 1.25rem !important;
	font-weight: 900 !important;
	color: var(--color-text-heading) !important;
	margin: 0 0 16px !important;
}
.erpp-contact-form-placeholder {
	color: var(--color-text-muted);
	text-align: center;
	padding: 40px 0;
	font-size: .875rem;
}
/* Social links */
.erpp-contact-social-wrap {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--color-border);
}
.erpp-contact-social-label {
	display: block;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-bottom: 12px;
}
.erpp-contact-social {
	display: flex;
	gap: 10px;
}
.erpp-csoc {
	width: 36px;
	height: 36px;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-body) !important;
	text-decoration: none !important;
	transition: background .2s, color .2s, border-color .2s;
}
.erpp-csoc:hover {
	background: var(--color-primary-subtle);
	border-color: var(--color-primary-light);
	color: var(--color-primary) !important;
}
/* Cert badges in contact */
.erpp-contact-badges {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--color-border);
}
@media (max-width: 900px) {
	.erpp-contact-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 540px) {
	.erpp-contact { padding: 56px 0; }
	.erpp-contact-form { padding: 24px; }
}

/* ── Footer certificate marquee ───────────────────────────────────────── */
.footer-certificate{overflow:hidden!important;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%)}
.erpp-cert-track{display:flex!important;align-items:center;width:max-content;animation:erpp-cert-scroll 22s linear infinite}
.erpp-cert-track:hover{animation-play-state:paused}
@keyframes erpp-cert-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.erpp-cert-track>span{flex:0 0 auto!important;padding:0 20px!important}

/* ── FAQ Accordion ──────────────────────────────────────────────────────── */
/* Phase 2.8-L7: light surface treatment, aligned to the approved
   design-system reference (was a dark navy panel). */
.erpp-faq{padding:88px 0;background:var(--color-surface);position:relative;overflow:hidden}
.erpp-faq::before{content:'';position:absolute;top:-120px;left:-80px;width:480px;height:480px;background:radial-gradient(circle,rgba(79,70,229,.07) 0%,transparent 70%);pointer-events:none}
.erpp-faq-inner{position:relative;z-index:1;max-width:860px}
.erpp-faq-hdr{text-align:center;margin-bottom:48px}
.erpp-faq-hdr .erpp-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--color-primary);margin-bottom:16px;display:block}
.erpp-faq-h2{font-size:clamp(1.8rem,3.2vw,2.5rem)!important;font-weight:800!important;color:var(--color-text-heading)!important;line-height:1.15!important;letter-spacing:-.03em!important;margin:0!important}
.erpp-faq-list{display:flex;flex-direction:column;gap:14px}
.erpp-faq-item{background:#fff;border:1px solid var(--color-border);border-radius:16px;padding:0;overflow:hidden}
.erpp-faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 26px;cursor:pointer;list-style:none;font-size:1rem;font-weight:700;color:var(--color-text-heading);-webkit-tap-highlight-color:transparent}
.erpp-faq-q::-webkit-details-marker{display:none}
.erpp-faq-q::marker{content:''}
.erpp-faq-icon{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:var(--color-primary-subtle);border:1.5px solid var(--color-primary-light);color:var(--color-primary);display:inline-flex;align-items:center;justify-content:center;transition:transform .25s ease,background .2s}
.erpp-faq-icon svg{transition:transform .25s ease}
.erpp-faq-item[open] .erpp-faq-icon{background:var(--color-primary-light);border-color:var(--color-primary);color:#fff}
.erpp-faq-item[open] .erpp-faq-icon svg{transform:rotate(45deg)}
.erpp-faq-a{padding:0 26px 22px}
.erpp-faq-a p{font-size:.9625rem!important;color:var(--color-text-body)!important;line-height:1.75!important;margin:0!important}
@media(max-width:600px){.erpp-faq{padding:64px 0}.erpp-faq-q{padding:18px 20px;font-size:.9375rem}.erpp-faq-a{padding:0 20px 18px}}

/* ── Table of Contents ───────────────────────────────────────────────────── */
.erpp-toc .scroll_ids.is-active{color:#1a3c6e;font-weight:600}

/* ── Team / Profile cards (Card & CTA Experience, M3, 2026-07-06) ──────────
   erpp-team__card had zero CSS anywhere (ARCHITECTURE_BACKLOG.md #20) —
   not currently placed on any live page, but joining the shared card
   primitive now (rather than leaving it to be discovered unstyled the
   day an editor first uses this block) costs one selector and prevents
   a repeat of the same "zero CSS anywhere" defect already found and
   fixed 6 times elsewhere in this project. */
.erpp-team__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px}
.erpp-team__heading{text-align:center;margin-bottom:32px}
.erpp-team__photo{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.erpp-team__info{padding:24px;text-align:center}
.erpp-team__name{font-size:1.0625rem;font-weight:700;color:var(--color-text-heading);margin:0 0 4px}
.erpp-team__role{font-size:.875rem;color:var(--color-text-muted);margin:0 0 12px}
.erpp-team__linkedin{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:600;color:var(--color-primary);text-decoration:none}
.erpp-team__linkedin:hover{text-decoration:underline}

/* ── Integration Experience Engine preview sections ────────────────────── */
.erpp-ie-preview-note{padding:18px 0;background:#fff7ed;border-bottom:1px solid #fed7aa}
.erpp-ie-preview-note p{margin:0;color:#9a3412;font-size:.875rem;line-height:1.6}
/* Iteration 1.1 polish sprint: base vertical rhythm tightened from
   var(--space-20) (80px) to var(--space-12) (48px) — a page-height
   reduction lever applied uniformly across every IE-native section
   (Hero, Diagnosis, Outcomes, Architecture, Data Flow, Use Cases,
   Delivery) rather than any single section, so the cut is even rather
   than lopsided. Reused Homepage components (Testimonials, Case
   Studies, Blog, FAQ, Contact) already render at padding:0 (their own
   internal padding is untouched, since those are "do not redesign"
   components) and are unaffected by this change. Responsive tiers
   below rescaled to match (991px: var(--space-10)/40px, 767px:
   var(--space-8)/32px) so the desktop>tablet>mobile progression stays
   proportional instead of inverting. */
.erpp-ie{position:relative;padding:var(--space-10) 0}
/* Hero background uses Homepage's own exact dark hero tone (#080717, see
   .erpp-hero in this file) rather than a separately-invented dark value —
   J1 is the approved "dark = live product" zone per
   ERPPEERS_INTEGRATION_PLATFORM_DESIGN_SYSTEM.md, so it should be Homepage's
   actual hero color, not a look-alike. */
.erpp-ie-hero{overflow:hidden;background:
radial-gradient(circle at top right,rgba(99,102,241,.22),transparent 28%),
linear-gradient(135deg,#080717 0%,var(--color-primary-dark) 44%,#080717 100%)}
.erpp-ie-hero::before{content:"";position:absolute;inset:auto -10% -120px auto;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.08) 0%,rgba(255,255,255,0) 72%);pointer-events:none}
.erpp-ie-hero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:26px 26px;mask-image:linear-gradient(180deg,rgba(0,0,0,.7),transparent 75%);pointer-events:none}
.erpp-ie-hero__layout{display:grid;grid-template-columns:minmax(0,.92fr) minmax(320px,1.08fr);gap:var(--space-16);align-items:center}
.erpp-ie-hero__content{max-width:760px}
/* Heading/support-copy typography now comes directly from Homepage's real
   .erpp-hero-h1/.erpp-hero-sub/.erpp-hero-eyebrow classes (applied in the
   PHP markup) instead of a bespoke IE-only type scale — the previous
   .erpp-ie-hero__title ran clamp(2.4rem,4.5vw,4.6rem), ~60% larger at the
   top end than Homepage's actual hero heading, clamp(1.75rem,3.4vw,2.9rem). */
.erpp-ie-hero .erpp-hero-h1,.erpp-ie-hero .erpp-hero-sub{max-width:720px}
.erpp-ie-hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.erpp-ie-hero__secondary{color:#fff!important;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.04)}
.erpp-ie-hero__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.erpp-ie-hero__chip{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.04);border-radius:999px;padding:7px 12px;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#d4d5e9}
.erpp-ie-hero__chip i{display:block;width:6px;height:6px;border-radius:99px;background:var(--color-electric)}

/* Hero signature diagram (J1's Hero Moment) — Node + Connector illustration
   system per ERPPEERS_INTEGRATION_PLATFORM_DESIGN_SYSTEM.md: a Container
   (diagram-core), a Connector (the pulsing loop), and two Nodes (the tiles).
   Radius/shadow now use Homepage's literal design-system tokens
   (--radius-xl/--shadow-lg/--shadow-md) instead of ad-hoc pixel values, and
   the Shopify-specific hand-drawn glyph is retired — a Node renders a real
   logo when uploaded, or a generic initials badge + wordmark otherwise, so
   the same CSS works unchanged for any future integration partner. */
.erpp-ie-hero__diagram{position:relative;height:320px;isolation:isolate}
/* Final J1 premium polish (permanent — this Hero is not revisited after this
   pass): the core panel gained a soft radial highlight for genuine depth
   instead of a flat two-stop gradient; the loop gained a soft outer glow so
   it reads as "lit" rather than a plain CSS border; both tiles gained a
   small inset from the diagram's own bounding box (previously flush at
   left:0/right:0) — measured live via getBoundingClientRect(), the target
   tile sat only ~12px from the container's right edge, noticeably tighter
   than the breathing room everywhere else on the page. */
/* Explicitly re-authorized additive upgrade (post-freeze): a second, offset
   panel behind the core for the layered-depth read the Celigo-style
   reference calls for. New pseudo-element only — no markup/PHP change, no
   new color (same primary/electric tokens at lower opacity), paints behind
   -core because ::before always precedes a real DOM sibling in paint order
   for position:absolute + z-index:auto elements. */
.erpp-ie-hero__diagram::before{content:"";position:absolute;left:26%;right:14%;top:1%;bottom:13%;border-radius:var(--radius-xl);background:linear-gradient(135deg,rgba(99,102,241,.18),rgba(79,70,229,.08));box-shadow:0 20px 50px rgba(8,7,23,.35)}
.erpp-ie-hero__diagram-core{position:absolute;left:20%;right:20%;top:6%;bottom:6%;border-radius:var(--radius-xl);background:radial-gradient(120% 100% at 28% 18%,rgba(255,255,255,.22),transparent 55%),linear-gradient(135deg,var(--color-primary) 0%,var(--color-electric) 100%);opacity:.94;box-shadow:var(--shadow-lg)}
.erpp-ie-hero__diagram-loop{position:absolute;z-index:3;left:23%;right:23%;top:15%;bottom:15%;border:4px solid rgba(255,255,255,.94);border-radius:var(--radius-xl);box-shadow:0 0 36px rgba(255,255,255,.18)}
/* Explicitly re-authorized additive upgrade (post-freeze): the two dots
   previously pulsed in place (scale/opacity only) at fixed top/bottom
   midpoints. They now slide along the loop's own top/bottom edges in
   opposite directions — real bidirectional motion instead of a static
   pulse. `left` is animated as a percentage of the loop's own box (its
   containing block), so this stays correct at any container width with
   no hardcoded path geometry. Markup/PHP and the reusable-logo-slot logic
   are unchanged. */
.erpp-ie-hero__diagram-loop::before,.erpp-ie-hero__diagram-loop::after{content:"";position:absolute;width:14px;height:14px;margin-left:-7px;border-radius:var(--radius-circle);background:#fff;box-shadow:0 0 10px rgba(255,255,255,.7);animation-duration:5.2s;animation-timing-function:linear;animation-iteration-count:infinite}
.erpp-ie-hero__diagram-loop::before{top:-7px;left:6%;animation-name:erpp-ie-hero-dot-travel-out}
.erpp-ie-hero__diagram-loop::after{bottom:-7px;left:94%;animation-name:erpp-ie-hero-dot-travel-in}
@keyframes erpp-ie-hero-dot-travel-out{0%{left:6%;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:94%;opacity:0}}
@keyframes erpp-ie-hero-dot-travel-in{0%{left:94%;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:6%;opacity:0}}
.erpp-ie-hero__diagram-tile{position:absolute;z-index:6;top:50%;width:190px;height:190px;transform:translateY(-50%);padding:20px;border-radius:var(--radius-xl);background:#fff;color:var(--color-text-heading);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;box-shadow:var(--shadow-md);border:1px solid rgba(255,255,255,.85)}
.erpp-ie-hero__diagram-tile--source{left:2%}
.erpp-ie-hero__diagram-tile--target{right:2%}
.erpp-ie-hero__diagram-tile img{max-width:64px;max-height:64px;width:auto;height:auto;object-fit:contain}
/* J1 visual-QA micro-polish: the generic initials badge sits directly next
   to NetSuite's real full-color logo, so it needs enough presence not to
   read as an empty placeholder — a subtle ring + shadow gives it the same
   "considered mark" weight as a real logo would, without drawing a
   bespoke brand-specific shape. */
.erpp-ie-hero__diagram-placeholder{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--radius-circle);background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-electric) 100%);color:#fff;font-size:1.35rem;font-weight:800;box-shadow:var(--shadow-sm),0 0 0 3px var(--color-primary-subtle)}
.erpp-ie-hero__diagram-wordmark{font-size:1.15rem;font-weight:800;letter-spacing:-.02em;color:var(--color-text-heading)}
@media (prefers-reduced-motion:reduce){.erpp-ie-hero__diagram-loop::before,.erpp-ie-hero__diagram-loop::after{animation:none!important;opacity:.75;left:50%}}

/* Trust Strip: no bespoke CSS needed — erpp_ie_render_section_trust_strip()
   now calls Homepage's real erpp_render_stats_bar() component directly
   (see blocks/stats-bar/render.php and its .erpp-stats-bar* rules earlier
   in this file), instead of maintaining a parallel re-implementation. */
.erpp-ie-blueprint{background:var(--color-dark)}
.erpp-ie-flow{background:var(--color-bg)}
.erpp-ie-flow--spotlight,.erpp-ie-canvas-backdrop{position:relative;overflow:hidden;background:
radial-gradient(circle at 20% 20%,rgba(99,102,241,.2),transparent 32%),
linear-gradient(135deg,var(--color-dark) 0%,var(--color-primary-dark) 50%,var(--color-dark-2) 100%)}
.erpp-ie-flow--spotlight::before,.erpp-ie-canvas-backdrop::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(circle at center,rgba(0,0,0,.6),transparent 75%);pointer-events:none}
.erpp-ie-use-cases{background:var(--color-bg)}
.erpp-ie-delivery{background:var(--color-bg)}
.erpp-ie-delivery--process{padding-bottom:var(--space-8)}
.erpp-ie-delivery--trust{padding-top:var(--space-8)}
/* Decision Journey J6 (Validation) — Homepage Testimonials + Homepage Case
   Studies. Both wrap the real, unmodified Homepage components, which each
   already render their own full-bleed dark section (background, ~88-96px
   padding, baked into blocks/testimonials/render.php and
   blocks/case-studies/render.php). The generic `.erpp-ie` wrapper's own
   padding (var(--space-20), 80px) plus its own light background-color
   were stacking a second, redundant gap around each already-padded dark
   section — creating a visible light seam both above Testimonials (before
   it even starts) and between Testimonials and Case Studies, breaking the
   "customer feedback -> business result" sequence into two disconnected
   blocks. Zeroing the wrapper's own padding/background here lets both
   real dark sections run back-to-back with no seam, so the trust
   hierarchy (customer feedback -> business result -> real implementation
   -> more success stories) reads as one continuous proof sequence
   instead of two arbitrarily-spaced widgets. No component internals
   touched — spacing-only fix, per the "do not redesign, reuse Homepage
   components" instruction. */
.erpp-ie.erpp-ie-testimonials,.erpp-ie.erpp-ie-case-studies{padding:0}
/* Iteration 1.1: extends the same eyebrow square-dot marker used
   throughout J1-J5 and J7 (.erpp-section-eyebrow::before) onto J6's
   reused Homepage eyebrows, scoped to these two wrappers only so the
   real Homepage components own use of .erpp-eyebrow elsewhere on the
   site is untouched. One recurring marker across every journey instead
   of six sections having it and two not. */
.erpp-ie-testimonials .erpp-eyebrow::before,.erpp-ie-case-studies .erpp-eyebrow::before{content:"";display:inline-block;width:10px;height:10px;margin-right:6px;background:currentColor;border-radius:3px;vertical-align:middle}
/* Decision Journey J7 (Commitment) — Related Resources. Same double-padding
   bug as J6, one section later: the marquee panel (first sub-block) already
   supplies its own dark background + padding, but the generic `.erpp-ie`
   wrapper's own top padding was stacking an extra 80px white gap between
   the end of Case Studies (J6, dark) and the start of this section's
   marquee (dark) — confirmed via live measurement. Zeroing only the top
   padding closes that seam; the bottom padding is left alone since FAQ
   (light) transitioning into the CTA (dark) is a normal section boundary,
   not a duplicated-padding artifact. */
.erpp-ie.erpp-ie-related-content{padding-top:0;background:var(--color-bg)}
.erpp-ie-cta{padding:0;background:var(--color-bg)}
.erpp-ie-section__header{max-width:860px}
.erpp-ie-section__header--wide{margin-bottom:32px}
.erpp-ie-section__header--center{max-width:680px;margin-inline:auto;text-align:center}
.erpp-ie-section__title{max-width:820px;margin:0;color:var(--color-text-heading);font-size:clamp(1.8rem,2.8vw,2.7rem);font-weight:800;line-height:1.12;letter-spacing:-.04em}
.erpp-ie-section__intro{max-width:780px;margin:12px 0 0;color:var(--color-text-muted);font-size:1rem;line-height:1.7}
/* These MUST be declared after the base .erpp-ie-section__title/__intro
   rules above — a real contrast bug found in this audit had them declared
   earlier in the file, so the base (dark-text) rule won the cascade at
   equal specificity and silently overrode the white/light-gray color back
   to near-black on every dark section (Data Flow, Architecture, Why ERP
   Peers, Related Resources), making headings unreadable there. */
.erpp-ie-section__title--light{color:#fff}
.erpp-ie-section__intro--light{color:rgba(255,255,255,.78)}

/* The Friction Map (formerly Decision Journey J2/Diagnosis) — Business
   Challenges + Who Benefits, per the approved standalone-prototype
   direction (DEC-058). A scattered-dot SVG diagram pairs with the problem
   list instead of a borderless rail; Who Benefits renders as a row of
   icon-badge beneficiary cards instead of a role roster. */
.erpp-ie-friction{background:var(--color-bg)}
.erpp-ie-friction__layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--space-10);align-items:center;margin-top:32px}
@media (max-width:900px){.erpp-ie-friction__layout{grid-template-columns:1fr}}
.erpp-ie-friction__stage{color:var(--color-text-muted);background:var(--color-section-alt);border-radius:var(--radius-xl);padding:24px}
.erpp-ie-friction__item{position:relative;display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--color-border)}
.erpp-ie-friction__item:first-child{border-top:0;padding-top:0}
.erpp-ie-friction__dot{flex:0 0 auto;width:10px;height:10px;margin-top:8px;border-radius:50%;border:1.5px solid var(--color-text-muted)}
.erpp-ie-friction__item h4{margin:0 0 4px;color:var(--color-text-heading);font-size:1.05rem;font-weight:700}
.erpp-ie-friction__item p{margin:0;color:var(--color-text-muted);font-size:.92rem;line-height:1.6}
.erpp-ie-friction__impact{margin-top:8px!important;color:var(--color-text-heading)!important;font-size:.85rem!important}
.erpp-ie-friction__impact span{display:inline-block;margin-right:8px;padding:3px 10px;border-radius:999px;background:var(--color-primary-subtle);color:var(--color-primary-dark);font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.erpp-ie-beneficiary-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:32px}
@media (max-width:900px){.erpp-ie-beneficiary-row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.erpp-ie-beneficiary-row{grid-template-columns:1fr}}
.erpp-ie-beneficiary{text-align:center}
.erpp-ie-beneficiary__badge{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;margin-bottom:14px;border-radius:50%;background:var(--color-primary-subtle);color:var(--color-primary)}
.erpp-ie-beneficiary__badge svg{width:24px;height:24px}
.erpp-ie-beneficiary h5{margin:0 0 8px;color:var(--color-text-heading);font-size:1rem;font-weight:700}
.erpp-ie-beneficiary p{margin:0;color:var(--color-text-muted);font-size:.86rem;line-height:1.55}

/* Business Transformation (formerly Decision Journey J3/Business Outcomes)
   — per the approved standalone-prototype direction (DEC-058), a
   scattered-vs-connected before/after diagram now leads; the dashboard
   table is retired as the primary device in favor of a plain outcome
   list, each item combining its real metric_label/metric_value pair into
   one sentence. */
.erpp-ie-transform{background:var(--color-bg)}
.erpp-ie-transform__stage{margin-top:32px}
.erpp-ie-transform__diagram{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;max-width:640px;margin:0 auto 36px}
@media (max-width:640px){.erpp-ie-transform__diagram{grid-template-columns:1fr;justify-items:center}}
.erpp-ie-transform__side{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--color-text-muted)}
.erpp-ie-transform__side--after{color:var(--color-primary)}
.erpp-ie-transform__side svg{width:140px;height:auto}
.erpp-ie-transform__caption{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted)}
.erpp-ie-transform__arrow{font-size:1.4rem;color:var(--color-primary)}
@media (max-width:640px){.erpp-ie-transform__arrow{transform:rotate(90deg)}}
.erpp-ie-transform__list{list-style:none;margin:0 auto;padding:0;max-width:760px;display:grid;gap:14px 40px;grid-template-columns:1fr 1fr}
@media (max-width:760px){.erpp-ie-transform__list{grid-template-columns:1fr}}
.erpp-ie-transform__list li{color:var(--color-text-body);font-size:.95rem;line-height:1.6;padding-left:16px;border-left:2px solid var(--color-primary-subtle)}
.erpp-ie-transform__list b{color:var(--color-text-heading)}

/* Integration Architecture — spec list + comparison table instead of stacked card grids */
/* Integration Architecture — reference's rail + bento-tag-grid + formula-strip
   layout (left sticky-feeling requirements rail, right method tile grid,
   monospace recommendation strip beneath it). */
/* Integration Architecture — reference's method-layout exactly: a copy
   column (with a simple requirement-name nav list) beside a bordered
   method-cards container (tagged bento grid + monospace formula note). */
/* Decision Journey J4 (Engineering Depth) — Integration Architecture + Data
   Flow + Use Cases share ONE visual language: the Integration Canvas. A
   circular-dot node marker (`.erpp-ie-canvas-node__dot`) and numbered tag
   (`.erpp-ie-canvas-node__tag`) repeat identically across all three
   sections' cards, and a distinct vertical spine (`.erpp-ie-canvas-spine`)
   carries the Requirement-First Recommendation rows — so the three
   canonical sections read as one connected engineering experience rather
   than three unrelated devices (a method-tile bento grid, a plain step
   rail, and a card grid, previously). Completely different from J1's dark
   hero diagram, J2's borderless editorial rail, and J3's tabular dashboard
   panel.
   Creative Director refinement pass: dark canvas backgrounds are now
   reserved for Architecture and Data Flow only (genuine technical
   canvases — method selection, data movement); Use Cases uses a `--light`
   variant of the same node/track so a business-scenario section doesn't
   borrow a "live system" visual it doesn't represent, and so the page
   doesn't stack 4 consecutive dark sections. Architecture's method cards
   also gained a `--compact` variant: one short decision-relevant line
   instead of a full description + separate "why" paragraph, so buyers can
   scan and compare instead of reading documentation. */
.erpp-ie-canvas-track{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
/* 4 columns was tried and reverted: narrower cards (182px vs 291px at
   3 columns) caused method names to wrap to 3 lines instead of 2, so
   fewer rows (2 vs 3) but each row taller -- net height was WORSE than
   3 columns. Kept at 3 columns, matching Use Cases' scenario track. */
.erpp-ie-canvas-node{position:relative;min-height:150px;padding:16px;border:1px solid rgba(255,255,255,.13);border-radius:16px;background:rgba(255,255,255,.04);display:flex;flex-direction:column}
.erpp-ie-canvas-node__dot{position:absolute;top:18px;right:18px;width:8px;height:8px;border-radius:var(--radius-circle);background:var(--color-accent);box-shadow:0 0 0 4px rgba(129,140,248,.18)}
.erpp-ie-canvas-node__tag{display:inline-flex;margin-bottom:14px;font-size:.62rem;font-weight:800;background:rgba(99,102,241,.2);color:#d9d5ff;border:1px solid rgba(99,102,241,.35);padding:6px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.05em}
.erpp-ie-canvas-node h3{font-size:1.05rem;margin:0 0 8px;color:#fff;line-height:1.32}
.erpp-ie-canvas-node p{font-size:.8rem;color:#bfc1da;margin:0 0 6px;line-height:1.48}
.erpp-ie-canvas-node__link{display:inline-block;margin-top:auto;font-size:.8rem;font-weight:700;color:var(--color-accent);text-decoration:none}
.erpp-ie-canvas-node__link:hover{text-decoration:underline}

/* Integration Ways (mandatory Method Selector, formerly the compact method
   card grid) — per the approved standalone-prototype direction (DEC-058),
   a sticky left tab list + right detail panel resembling Homepage's real
   `.erpp-sv__tabs` services-grid component, mirroring its behavior in pure
   CSS (`:checked` radio/label state) instead of JavaScript, so every
   method's full text stays in the DOM and crawlable with no script
   dependency. Index-based `:nth-of-type` rules below support up to 20
   methods — comfortably above any realistic per-page method count — and
   need no per-page generated CSS. */
.erpp-ie-methodmap{margin-top:24px}
.erpp-ie-methodmap__eyebrow{display:block;margin-bottom:16px;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--color-accent)}
.erpp-ie-methodmap__radio{position:absolute;opacity:0;pointer-events:none}
.erpp-ie-methodmap__layout{display:grid;grid-template-columns:.7fr 1.3fr;gap:0 30px;align-items:start}
@media (max-width:860px){.erpp-ie-methodmap__layout{grid-template-columns:1fr}}
.erpp-ie-methodmap__tabs{border-top:1px solid rgba(255,255,255,.12);position:sticky;top:100px}
@media (max-width:860px){.erpp-ie-methodmap__tabs{position:static}}
.erpp-ie-methodmap__tab{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 2px;border-bottom:1px solid rgba(255,255,255,.1);cursor:pointer;font-weight:700;color:rgba(255,255,255,.5);transition:color .2s}
.erpp-ie-methodmap__tab span:last-child{opacity:0;color:var(--color-accent);transition:opacity .2s,transform .2s}
.erpp-ie-methodmap__tab:hover{color:rgba(255,255,255,.8)}
.erpp-ie-methodmap__panels{background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.13);border-radius:20px;padding:28px;min-height:180px}
.erpp-ie-methodmap__panel{display:none}
.erpp-ie-methodmap__panel h3{margin:0 0 10px;color:#fff;font-size:1.2rem}
.erpp-ie-methodmap__panel p{margin:0;color:rgba(255,255,255,.72);font-size:.92rem;line-height:1.65;max-width:60ch}
.erpp-ie-methodmap__panel a{display:inline-block;margin-top:14px;color:var(--color-accent);font-size:.85rem;font-weight:700;text-decoration:none}
.erpp-ie-methodmap__panel a:hover{text-decoration:underline}
.erpp-ie-methodmap__tag{display:inline-block;margin-bottom:12px;font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);font-size:.68rem;color:var(--color-accent);letter-spacing:.06em;text-transform:uppercase}
.erpp-ie-methodmap__note{margin-top:16px;padding:16px 18px;background:#0b0a22;color:#c8c5ff;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.78rem;line-height:1.6;border-radius:14px}
.erpp-ie-methodmap__radio:nth-of-type(1):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(1){color:#fff}.erpp-ie-methodmap__radio:nth-of-type(1):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(1) span:last-child{opacity:1;transform:translateX(2px)}.erpp-ie-methodmap__radio:nth-of-type(1):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__panels .erpp-ie-methodmap__panel:nth-of-type(1){display:block}.erpp-ie-methodmap__radio:nth-of-type(2):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(2){color:#fff}.erpp-ie-methodmap__radio:nth-of-type(2):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(2) span:last-child{opacity:1;transform:translateX(2px)}.erpp-ie-methodmap__radio:nth-of-type(2):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__panels .erpp-ie-methodmap__panel:nth-of-type(2){display:block}.erpp-ie-methodmap__radio:nth-of-type(3):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(3){color:#fff}.erpp-ie-methodmap__radio:nth-of-type(3):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(3) span:last-child{opacity:1;transform:translateX(2px)}.erpp-ie-methodmap__radio:nth-of-type(3):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__panels .erpp-ie-methodmap__panel:nth-of-type(3){display:block}.erpp-ie-methodmap__radio:nth-of-type(4):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(4){color:#fff}.erpp-ie-methodmap__radio:nth-of-type(4):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(4) span:last-child{opacity:1;transform:translateX(2px)}.erpp-ie-methodmap__radio:nth-of-type(4):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__panels .erpp-ie-methodmap__panel:nth-of-type(4){display:block}.erpp-ie-methodmap__radio:nth-of-type(5):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(5){color:#fff}.erpp-ie-methodmap__radio:nth-of-type(5):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(5) span:last-child{opacity:1;transform:translateX(2px)}.erpp-ie-methodmap__radio:nth-of-type(5):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__panels .erpp-ie-methodmap__panel:nth-of-type(5){display:block}.erpp-ie-methodmap__radio:nth-of-type(6):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(6){color:#fff}.erpp-ie-methodmap__radio:nth-of-type(6):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(6) span:last-child{opacity:1;transform:translateX(2px)}.erpp-ie-methodmap__radio:nth-of-type(6):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__panels .erpp-ie-methodmap__panel:nth-of-type(6){display:block}.erpp-ie-methodmap__radio:nth-of-type(7):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(7){color:#fff}.erpp-ie-methodmap__radio:nth-of-type(7):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(7) span:last-child{opacity:1;transform:translateX(2px)}.erpp-ie-methodmap__radio:nth-of-type(7):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__panels .erpp-ie-methodmap__panel:nth-of-type(7){display:block}.erpp-ie-methodmap__radio:nth-of-type(8):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(8){color:#fff}.erpp-ie-methodmap__radio:nth-of-type(8):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(8) span:last-child{opacity:1;transform:translateX(2px)}.erpp-ie-methodmap__radio:nth-of-type(8):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__panels .erpp-ie-methodmap__panel:nth-of-type(8){display:block}.erpp-ie-methodmap__radio:nth-of-type(9):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(9){color:#fff}.erpp-ie-methodmap__radio:nth-of-type(9):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(9) span:last-child{opacity:1;transform:translateX(2px)}.erpp-ie-methodmap__radio:nth-of-type(9):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__panels .erpp-ie-methodmap__panel:nth-of-type(9){display:block}.erpp-ie-methodmap__radio:nth-of-type(10):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(10){color:#fff}.erpp-ie-methodmap__radio:nth-of-type(10):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(10) span:last-child{opacity:1;transform:translateX(2px)}.erpp-ie-methodmap__radio:nth-of-type(10):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__panels .erpp-ie-methodmap__panel:nth-of-type(10){display:block}.erpp-ie-methodmap__radio:nth-of-type(11):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(11){color:#fff}.erpp-ie-methodmap__radio:nth-of-type(11):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(11) span:last-child{opacity:1;transform:translateX(2px)}.erpp-ie-methodmap__radio:nth-of-type(11):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__panels .erpp-ie-methodmap__panel:nth-of-type(11){display:block}.erpp-ie-methodmap__radio:nth-of-type(12):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(12){color:#fff}.erpp-ie-methodmap__radio:nth-of-type(12):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(12) span:last-child{opacity:1;transform:translateX(2px)}.erpp-ie-methodmap__radio:nth-of-type(12):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__panels .erpp-ie-methodmap__panel:nth-of-type(12){display:block}.erpp-ie-methodmap__radio:nth-of-type(13):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(13){color:#fff}.erpp-ie-methodmap__radio:nth-of-type(13):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(13) span:last-child{opacity:1;transform:translateX(2px)}.erpp-ie-methodmap__radio:nth-of-type(13):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__panels .erpp-ie-methodmap__panel:nth-of-type(13){display:block}.erpp-ie-methodmap__radio:nth-of-type(14):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(14){color:#fff}.erpp-ie-methodmap__radio:nth-of-type(14):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(14) span:last-child{opacity:1;transform:translateX(2px)}.erpp-ie-methodmap__radio:nth-of-type(14):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__panels .erpp-ie-methodmap__panel:nth-of-type(14){display:block}.erpp-ie-methodmap__radio:nth-of-type(15):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(15){color:#fff}.erpp-ie-methodmap__radio:nth-of-type(15):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(15) span:last-child{opacity:1;transform:translateX(2px)}.erpp-ie-methodmap__radio:nth-of-type(15):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__panels .erpp-ie-methodmap__panel:nth-of-type(15){display:block}.erpp-ie-methodmap__radio:nth-of-type(16):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(16){color:#fff}.erpp-ie-methodmap__radio:nth-of-type(16):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(16) span:last-child{opacity:1;transform:translateX(2px)}.erpp-ie-methodmap__radio:nth-of-type(16):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__panels .erpp-ie-methodmap__panel:nth-of-type(16){display:block}.erpp-ie-methodmap__radio:nth-of-type(17):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(17){color:#fff}.erpp-ie-methodmap__radio:nth-of-type(17):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(17) span:last-child{opacity:1;transform:translateX(2px)}.erpp-ie-methodmap__radio:nth-of-type(17):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__panels .erpp-ie-methodmap__panel:nth-of-type(17){display:block}.erpp-ie-methodmap__radio:nth-of-type(18):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(18){color:#fff}.erpp-ie-methodmap__radio:nth-of-type(18):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(18) span:last-child{opacity:1;transform:translateX(2px)}.erpp-ie-methodmap__radio:nth-of-type(18):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__panels .erpp-ie-methodmap__panel:nth-of-type(18){display:block}.erpp-ie-methodmap__radio:nth-of-type(19):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(19){color:#fff}.erpp-ie-methodmap__radio:nth-of-type(19):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(19) span:last-child{opacity:1;transform:translateX(2px)}.erpp-ie-methodmap__radio:nth-of-type(19):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__panels .erpp-ie-methodmap__panel:nth-of-type(19){display:block}.erpp-ie-methodmap__radio:nth-of-type(20):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(20){color:#fff}.erpp-ie-methodmap__radio:nth-of-type(20):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__tabs .erpp-ie-methodmap__tab:nth-of-type(20) span:last-child{opacity:1;transform:translateX(2px)}.erpp-ie-methodmap__radio:nth-of-type(20):checked~.erpp-ie-methodmap__layout .erpp-ie-methodmap__panels .erpp-ie-methodmap__panel:nth-of-type(20){display:block}

/* Use Cases' light variant of the same card: text/border/background
   flipped for a light section, tag pill recolored to Homepage's real
   light-pill treatment (indigo-50 wash + indigo-800 text, matching
   `.erpp-ie-diagnosis__impact span` elsewhere on this page) instead of
   the dark section's translucent-white pill. */
.erpp-ie-canvas-node--light{min-height:100px;border-color:var(--color-border);background:var(--color-bg);box-shadow:var(--shadow-sm)}
.erpp-ie-canvas-node--light .erpp-ie-canvas-node__dot{background:var(--color-primary);box-shadow:0 0 0 4px var(--color-primary-subtle)}
.erpp-ie-canvas-node--light .erpp-ie-canvas-node__tag{background:var(--color-primary-subtle);color:var(--color-primary-dark);border-color:transparent}
.erpp-ie-canvas-node--light h3{color:var(--color-text-heading)}
.erpp-ie-canvas-node--light p{color:var(--color-text-muted)}

/* Requirement-First Recommendation, folded into Architecture as the canvas
   spine — a vertical numbered thread beneath the method track, using the
   same dark-panel language as the rest of J4 (previously a light panel
   that broke the section's dark canvas continuity). */
.erpp-ie-recommend{display:grid;grid-template-columns:1fr .95fr;gap:28px;align-items:center;margin-top:20px;padding:20px;border-radius:20px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1)}
.erpp-ie-recommend-copy p{color:#c2c4dc}
.erpp-ie-canvas-spine{margin-top:14px;display:grid;gap:6px}
.erpp-ie-canvas-spine__row{display:grid;grid-template-columns:36px 1fr;align-items:start;gap:12px;padding:11px 14px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.13)}
.erpp-ie-canvas-spine__node{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:11px;background:var(--color-primary);color:#fff;font-weight:800;font-size:.78rem}
.erpp-ie-canvas-spine__capability{display:block;font-weight:800;color:#fff}
.erpp-ie-canvas-spine__desc{margin:5px 0 0;color:#bfc1da;font-size:.82rem;line-height:1.5}

/* Data Flow — the reference has no dedicated section for this; adapts the
   reference's own pulse-line device (from the hero) to a full-width rail
   spanning any number of steps, with step content using the reference's
   `.step` card device (from Approach) — same card, but this section adds
   the connecting line Approach/Delivery Process deliberately don't have. */
.erpp-ie-flow__rail{position:relative;margin-top:22px}
.erpp-ie-flow__endpoints{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.erpp-ie-flow__endpoint{display:inline-flex;align-items:center;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.erpp-ie-flow__endpoints-arrow{color:var(--color-accent);font-size:1.1rem;line-height:1}
.erpp-ie-flow__line{position:relative;height:2px;margin-bottom:22px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent)}
.erpp-ie-flow__line::before{content:"";position:absolute;top:-5px;left:4%;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 10px rgba(255,255,255,.14);animation:erpp-ie-hero-flow 5.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.erpp-ie-flow__line::before{animation:none}}
.erpp-ie-flow__steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin:0;padding:0;list-style:none}
.erpp-ie-flow__step-title{margin:0 0 6px;color:#fff;font-size:.94rem;font-weight:700;line-height:1.28}
.erpp-ie-flow__step-copy{margin:0 0 8px;color:#bfc1da;font-size:.8rem;line-height:1.5}
.erpp-ie-flow__path{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 8px;color:#fff;font-size:.8rem;font-weight:700;line-height:1.3}
.erpp-ie-flow__objects{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.erpp-ie-flow__objects li{padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font-size:.7rem;font-weight:600;line-height:1.2}

/* Decision Journey J5 (Delivery Confidence) — Delivery Process + Why ERP
   Peers share one unbroken light background (no seam between them, same
   connected pattern J2 used for Business Challenges -> Who Benefits) and
   answer ONE question: "can ERP Peers deliver and support this?" A static
   horizontal stepper (numbered nodes on one line) replaces the previous
   5-card grid; a row of short trust chips (labels only) replaces the
   previous dark 2x2 tile grid. No cards, no dark background, no
   animation — the least visually "loud" journey on the page on purpose,
   per the content-budget and visual-discipline rules: this section states
   claims, it does not re-argue them (that is Testimonials/Case Studies'
   job, immediately after). Completely different from J1 (dark diagram),
   J2 (light *vertical* rail), J3 (dark dashboard), and J4 (canvas nodes on
   a light/dark grid). */
.erpp-ie-delivery__track{position:relative;display:flex;justify-content:space-between;gap:12px;margin:28px 0 0;padding:0;list-style:none}
.erpp-ie-delivery__line{position:absolute;left:20px;right:20px;top:20px;height:2px;background:var(--color-border)}
.erpp-ie-delivery__step{position:relative;display:flex;flex-direction:column;align-items:center;flex:1;text-align:center}
.erpp-ie-delivery__node{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-bottom:10px;border-radius:var(--radius-circle);background:var(--color-primary);color:#fff;font-weight:800;font-size:.9rem}
.erpp-ie-delivery__label{margin:0 0 6px;color:var(--color-text-heading);font-size:.92rem;font-weight:700;line-height:1.3}
.erpp-ie-delivery__caption{display:block;color:var(--color-text-muted);font-size:.76rem;line-height:1.5;max-width:150px}
.erpp-ie-delivery__trust{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:20px 0 0;padding:0;list-style:none}
.erpp-ie-delivery__chip{padding:7px 14px;border-radius:999px;background:var(--color-primary-subtle);color:var(--color-primary-dark);font-size:.8rem;font-weight:700}
/* Related Resources — ONE single-row marquee matching the reference's real
   "Other Integration Services" `.other-marquee`/`.other-track`/`.other`
   structure exactly (not split per link type), wrapped in its own dark
   panel so it reads like the reference's dedicated dark section even though
   it's bundled into the wider Related Resources canonical section. */
.erpp-ie-marquee-panel{padding:var(--space-8) 0;background:var(--color-dark)}
.erpp-ie-marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.erpp-ie-marquee__track{display:flex;gap:16px;width:max-content;animation:erpp-ie-marquee-scroll 28s linear infinite}
.erpp-ie-marquee:hover .erpp-ie-marquee__track{animation-play-state:paused}
@keyframes erpp-ie-marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.erpp-ie-marquee__track{animation:none}}
/* Single-row horizontal pill (partner mark -> arrow -> NetSuite mark ->
   label), per the approved standalone-prototype direction (DEC-058) —
   replaces the former stacked vertical card. Same real link/logo data,
   layout only changed. */
.erpp-ie-marquee__card{display:flex;align-items:center;gap:10px;flex:0 0 auto;padding:12px 20px 12px 12px;border:1px solid rgba(255,255,255,.13);border-radius:999px;background:rgba(255,255,255,.04);text-decoration:none!important;white-space:nowrap}
.erpp-ie-marquee__logos{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.erpp-ie-marquee__logo{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#fff;color:var(--color-primary);font-size:.62rem;font-weight:800}
.erpp-ie-marquee__logo--partner{background:var(--color-primary-subtle);color:var(--color-primary-dark)}
.erpp-ie-marquee__arrow{color:var(--color-accent);font-size:.85rem}
.erpp-ie-marquee__card h3{margin:0;color:#fff;font-size:.92rem;font-weight:700;line-height:1.3}
.erpp-ie-marquee__card>span{display:block;margin-top:1px;color:#aeb0cc;font-size:.72rem;white-space:normal}
.erpp-ie-marquee__card:hover h3,.erpp-ie-marquee__card:focus-visible h3{color:var(--color-accent)}
.erpp-ie-related-content__faq{margin-top:20px}
/* Iteration 1.1: scoped spacing-only override for the reused FAQ
   accordion'''s 13 items, applied only within this page'''s wrapper (the
   real component'''s own CSS and its use on other pages are untouched).
   Same technique already used for the J6 eyebrow-dot extension. Item
   padding/gap tightened; no text, no items, no functionality changed. */
.erpp-ie-related-content__faq .erpp-faq-list{gap:10px}
.erpp-ie-related-content__faq .erpp-faq-q{padding:16px 22px;font-size:.95rem}
.erpp-ie-related-content__faq .erpp-faq-a{padding:0 22px 16px}
/* Same scoped, spacing-only technique applied to the reused Blog
   Preview'''s own section padding within this page'''s wrapper only. */
.erpp-ie-related-content .erpp-blog-preview,.erpp-ie-related-content .erpp-bl{padding:40px 0 32px}
.erpp-ie-related-content__faq .erpp-faq{padding:0}
@media (max-width:991px){
.erpp-ie{padding:var(--space-10) 0}
.erpp-ie-hero__layout{grid-template-columns:1fr}
.erpp-ie-marquee__card{width:200px}
.erpp-ie-flow__rail{margin-top:22px}
.erpp-ie-dashboard__head,.erpp-ie-dashboard__row{padding-left:20px;padding-right:20px}
.erpp-ie-method-layout{grid-template-columns:1fr}
.erpp-ie-recommend{grid-template-columns:1fr}
.erpp-ie-canvas-track{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
.erpp-ie{padding:var(--space-8) 0}
.erpp-ie-section__title{letter-spacing:-.03em}
.erpp-ie-hero__diagram{height:300px}
.erpp-ie-hero__diagram-core{left:16%;right:16%}
.erpp-ie-hero__diagram-loop{left:20%;right:20%}
.erpp-ie-hero__diagram-tile{width:140px;height:140px;padding:14px}
.erpp-ie-method-note,.erpp-ie-trust__closing,.erpp-ie-marquee__card{padding:22px}
/* J3 dashboard mobile: the reference's 4-column tabular row genuinely
   doesn't fit a phone width — switch to a flowing flex layout instead of
   shrinking the grid into unreadable columns. KPI label takes its own
   line, Before -> After flows as one wrapped inline group beneath it, and
   the supporting description sits full-width last. The column header row
   (redundant once labels are inline) is hidden. */
.erpp-ie-dashboard__head{display:none}
.erpp-ie-dashboard__row{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;padding:20px}
.erpp-ie-dashboard__kpi{flex:1 0 100%;margin-bottom:2px}
.erpp-ie-dashboard__desc{flex:1 0 100%}
.erpp-ie-diagnosis__rail,.erpp-ie-diagnosis__roster{padding-left:28px}
.erpp-ie-diagnosis__rail::before,.erpp-ie-diagnosis__roster::before{left:5px}
.erpp-ie-diagnosis__marker{left:-28px;margin-left:0}
.erpp-ie-diagnosis__body h3{font-size:1.3rem}
/* J5 delivery stepper on mobile: 5 nodes across a horizontal line doesn't
   fit a phone width — stack vertically with the connecting line rotated
   to run down the left edge instead, matching the same
   horizontal-becomes-vertical fallback already proven for J2's rail. */
.erpp-ie-delivery__track{flex-direction:column;align-items:flex-start;gap:28px}
.erpp-ie-delivery__line{left:20px;top:20px;bottom:20px;right:auto;width:2px;height:auto}
.erpp-ie-delivery__step{flex-direction:row;align-items:flex-start;text-align:left;gap:16px}
.erpp-ie-delivery__node{margin-bottom:0;flex:0 0 auto}
.erpp-ie-delivery__caption{max-width:none}
.erpp-ie-flow__steps{grid-template-columns:1fr}
.erpp-ie-flow__endpoints{flex-wrap:wrap}
.erpp-ie-canvas-track{grid-template-columns:1fr}
.erpp-ie-canvas-spine__row{grid-template-columns:1fr}
}

/* ── Homepage Editorial section (Phase 2.8-L7) ──────────────────────────
   Uses the existing erp-peers/rich-content-section block (contentType
   "editorial") — no new block registered. Real positioning copy, no
   invented stats/claims. ── */
.erpp-rcs--editorial { padding: 72px 0; background: var(--color-surface); }
.erpp-rcs--editorial .erpp-rcs__body {
	max-width: none !important;
	margin: 0 !important;
	padding: 0 24px;
}
.erpp-ed-grid {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 64px;
	align-items: start;
	max-width: 1180px;
	margin: 0 auto;
}
.erpp-ed-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin: 0 0 14px;
}
.erpp-ed-heading {
	font-size: clamp(1.6rem, 2.6vw, 2.15rem) !important;
	font-weight: 800 !important;
	color: var(--color-text-heading) !important;
	line-height: 1.25 !important;
	letter-spacing: -.02em !important;
	margin: 0 0 18px !important;
}
.erpp-ed-copy p {
	font-size: .9375rem !important;
	color: var(--color-text-body) !important;
	line-height: 1.72 !important;
	margin: 0 0 14px !important;
}
.erpp-ed-points {
	display: flex;
	flex-direction: column;
	gap: 26px;
}
.erpp-ed-point {
	display: grid;
	grid-template-columns: 34px 1fr;
	gap: 14px;
}
.erpp-ed-point-num {
	font-size: .8125rem;
	font-weight: 800;
	color: var(--color-primary-light);
}
.erpp-ed-point h3 {
	font-size: .9375rem !important;
	font-weight: 700 !important;
	color: var(--color-text-heading) !important;
	margin: 0 0 6px !important;
}
.erpp-ed-point p {
	font-size: .8375rem !important;
	color: var(--color-text-muted) !important;
	line-height: 1.6 !important;
	margin: 0 !important;
}
@media (max-width: 860px) {
	.erpp-ed-grid { grid-template-columns: 1fr; gap: 36px; }
}