/**
 * Phase 2.8-L9-P1 — Shopify NetSuite Integration (Real) readability
 * overrides.
 *
 * Scoped entirely to `.erpp-sniv4` (this page's own CSS-scope class —
 * see PROTOTYPE_TO_REAL_CONTENT_INSTRUCTIONS.md implementation note
 * #4 on why this class name is intentionally shared with the
 * prototype's markup, not renamed). Never edits
 * assets/css/shopify-netsuite-integration.css, so the approved
 * Integration prototype's appearance is completely unaffected by this
 * file.
 *
 * Fixes: body/card/FAQ copy sized below the preferred 17-18px range;
 * muted text given more contrast headroom. No layout, section order,
 * or content change.
 */

.erpp-sniv4 p,
.erpp-sniv4 li {
	font-size: 17px !important;
	line-height: 1.7 !important;
}
.erpp-sniv4 .hero__lead {
	font-size: 1.0625rem !important;
	line-height: 1.72 !important;
}
.erpp-sniv4 .service-answer__content p,
.erpp-sniv4 .outcome-card p,
.erpp-sniv4 .stakeholder-card p {
	font-size: 1.0625rem !important;
	line-height: 1.72 !important;
	color: #4b5065 !important;
}

/* Phase 2.8-L9-P2 — `.flow-card` and `.delivery-stage` sit inside
   `.dark-section` (`.flow-section`, `.delivery-section`), not a light
   one; they were incorrectly pulled into the light-body #4b5065 color
   group above by the L9-P1 pass (same root cause found and fixed on
   the Industry and Development pages this phase). Given a light-on-
   dark color instead. */
.erpp-sniv4 .flow-card p,
.erpp-sniv4 .delivery-stage p {
	font-size: 1.0625rem !important;
	line-height: 1.72 !important;
	color: rgba(255, 255, 255, 0.8) !important;
}

/* Same root cause, found 2026-08-11 during the Amazon operating-model
   section build: `.outcome-card--feature` (the first card in any
   `.outcome-grid`, e.g. erpp_iig_render_challenge()) also sits on a
   dark background, but its `<p>` elements (including `.card-kicker`)
   were pulled into the same light-body #4b5065 !important color by
   the general `.outcome-card p` rule above, making its kicker/body
   text nearly invisible against the dark card. This is systemic
   (affects the first card of every outcome-grid sitewide, not only
   the Amazon page) — fixed at the shared color rule, not per-page. */
.erpp-sniv4 .outcome-card--feature p {
	color: rgba(255, 255, 255, 0.8) !important;
}
.erpp-sniv4 .outcome-card--feature .card-kicker {
	color: var(--accent) !important;
}

/* OPP-013: the 2026-08-11 teal accent override for the Vendor Central
   child (post 7926) was removed same-day on owner instruction — it
   introduced an unapproved sub-brand identity. Both pages now use
   ERP Peers' established indigo palette. Differentiation between the
   hub and the Vendor Central page is carried entirely by information
   design and component type (model-navigator vs. transaction-flow +
   diagnostic grid, see inc/erpp-iig-generic-components.php), not
   color. See DECISIONS.md DEC-076. */
.erpp-sniv4 .method-option p,
.erpp-sniv4 .related-integration p {
	font-size: 1rem !important;
	line-height: 1.65 !important;
	color: #4b5065 !important;
}
.erpp-sniv4 .faq-list summary {
	font-size: 1.05rem !important;
}
.erpp-sniv4 .faq-list p {
	font-size: 1rem !important;
	line-height: 1.68 !important;
	color: #4b5065 !important;
}

/* Phase 2.8-L12F-Fast — the Shopify-matched NetSuite Inner Integration
   family (.erpp-iig-app, applied only to the reusable app-aware
   template, never to the real /shopify-netsuite-integration/ page)
   reuses this same hero markup with longer app names than "Shopify"
   (e.g. "WooCommerce", "BigCommerce"), which overflowed the base
   190px .platform card. Widened for this family only. */
.erpp-iig-app.erpp-sniv4 .platform--shopify {
	width: 230px;
}
.erpp-iig-app.erpp-sniv4 .platform--shopify > span:last-child strong {
	font-size: .88rem;
}
@media (max-width: 700px) {
	.erpp-iig-app.erpp-sniv4 .platform--shopify {
		width: 170px;
	}
	.erpp-iig-app.erpp-sniv4 .platform--shopify > span:last-child strong {
		font-size: .78rem;
	}
}

/* Phase 2.8-L12F-MASTER — the "Other integration services" marquee
   reuses Shopify's exact .integration-card/.brand-mark markup for all
   36 family pages via hand-authored inline SVG icons (same technique
   as the hero mark above). .brand-mark itself has no intrinsic size
   in the base stylesheet (the 5 hardcoded brand marks there are plain
   text/emoji, not SVG), so the inline <svg> defaults to the browser's
   300x150 intrinsic box and renders invisible/clipped. Sized here,
   scoped to this family only — the real Shopify marquee (plain-text
   marks only) is unaffected since it has no <svg> inside .brand-mark. */
.erpp-iig-app.erpp-sniv4 .brand-mark svg {
	width: 34px;
	height: 34px;
	display: block;
}
.erpp-iig-app.erpp-sniv4 .integration-card[aria-current="page"] {
	opacity: .55;
	pointer-events: none;
}
/* This family's marquee carries 36 cards per group instead of
   Shopify's 5, so the base 42s duration (tuned for a much shorter
   track) reads as far too fast. Slowed proportionally so each card
   gets comparable dwell time. */
.erpp-iig-app.erpp-sniv4 .marquee__track {
	animation-duration: 150s;
}

/* Owner correction 2026-07-23: replaced the case-study carousel with
   a single-featured-case-study layout matching /netsuite-development/'s
   design (erpp_msr_render_case_study()), applied to ALL 36 NSII family
   pages including the Shopify reference itself, per explicit owner
   instruction. Scoped to plain .erpp-sniv4 (not .erpp-iig-app) so it
   also reaches erpp_snr_render_case_studies(). New class names
   (case-feature-*) are used instead of reusing .case-card/.case-content
   to avoid colliding with the old carousel-card rules above, which
   remain defined in the base stylesheet but are no longer referenced
   by either case-study render function. */
.erpp-sniv4 .case-feature-list { display: flex; flex-direction: column; gap: 40px; }
.erpp-sniv4 .case-feature-layout { display: grid; grid-template-columns: 1.18fr .82fr; gap: 48px; align-items: stretch; }
.erpp-sniv4 .case-feature-media { position: relative; min-height: 380px; overflow: hidden; border-radius: var(--radius-lg); background: var(--dark); }
.erpp-sniv4 .case-feature-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.72); opacity: .85; }
.erpp-sniv4 .case-feature-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,14,42,.05), rgba(15,14,42,.75)); }
.erpp-sniv4 .case-feature-badge { position: absolute; z-index: 2; left: 18px; top: 18px; padding: 7px 12px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: rgba(15,14,42,.7); color: #fff; font-size: .72rem; font-weight: 700; }
.erpp-sniv4 .case-feature-summary { display: flex; flex-direction: column; justify-content: center; padding: 20px 0; }
.erpp-sniv4 .case-feature-summary h3 { font-size: 1.5rem; margin: 10px 0 12px; }
.erpp-sniv4 .case-feature-summary > p { color: var(--muted); font-size: 1rem; }
.erpp-sniv4 .case-feature-facts { margin-top: 22px; border-top: 1px solid var(--line); }
.erpp-sniv4 .case-feature-fact { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.erpp-sniv4 .case-feature-fact span { color: var(--muted); }
.erpp-sniv4 .case-feature-fact strong { color: var(--ink); }
.erpp-sniv4 .case-feature-quote { margin: 22px 0; padding: 18px 0 18px 20px; border-left: 3px solid var(--primary-light); }
.erpp-sniv4 .case-feature-quote p { margin: 0 0 8px; color: var(--ink); font-size: 1.02rem; font-style: italic; line-height: 1.6; }
.erpp-sniv4 .case-feature-quote cite { color: var(--muted); font-size: 0.8rem; font-style: normal; font-weight: 700; }
@media (max-width: 900px) {
	.erpp-sniv4 .case-feature-layout { grid-template-columns: 1fr; }
	.erpp-sniv4 .case-feature-media { min-height: 280px; }
}

/* Phase 2.8-L12F-P3 — premium "Why Choose ERP Peers" card redesign.
   New, dedicated classes (not .stakeholder-*) so Shopify's own,
   genuinely different "Shared operating model" section (which reuses
   .stakeholder-* for unrelated content) is never touched. Family-only
   section — Shopify's reference page does not call this render
   function at all, so plain .erpp-sniv4 scoping is safe here, but
   kept consistent with the family's own .erpp-iig-app marker anyway. */
.erpp-iig-app.erpp-sniv4 .why-premium-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}
.erpp-iig-app.erpp-sniv4 .why-premium-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 32px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
}
.erpp-iig-app.erpp-sniv4 .why-premium-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 20px;
	color: var(--primary);
	background: var(--tint);
	border-radius: var(--radius-md);
}
.erpp-iig-app.erpp-sniv4 .why-premium-icon svg { width: 24px; height: 24px; }
.erpp-iig-app.erpp-sniv4 .why-premium-card h3 { margin-bottom: 12px; font-size: 1.15rem; }
.erpp-iig-app.erpp-sniv4 .why-premium-card > p { flex-grow: 1; margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }
@media (max-width: 700px) {
	.erpp-iig-app.erpp-sniv4 .why-premium-grid { grid-template-columns: 1fr; }
	.erpp-iig-app.erpp-sniv4 .why-premium-card { padding: 26px; }
}

/* OPP-013, 2026-08-11: Model Navigator (progressive-disclosure decision
   selector) and Transaction Flow + Diagnostics (connected sequence with
   Problem/Signal/Likely layer/Action callouts). Reusable primitives,
   not page-locked — styled here alongside this family's other
   readability overrides. Native <details>/<summary>, no JS dependency. */

.erpp-iig-app.erpp-sniv4 .model-navigator {
	border-top: 1px solid var(--line);
}
.erpp-iig-app.erpp-sniv4 .model-navigator__row {
	border-bottom: 1px solid var(--line);
}
.erpp-iig-app.erpp-sniv4 .model-navigator__row summary {
	display: grid;
	grid-template-columns: 48px 1.4fr 1fr 20px;
	align-items: center;
	gap: 20px;
	padding: 26px 4px;
	cursor: pointer;
	list-style: none;
}
.erpp-iig-app.erpp-sniv4 .model-navigator__row summary::-webkit-details-marker {
	display: none;
}
.erpp-iig-app.erpp-sniv4 .model-navigator__index {
	color: var(--primary);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}
.erpp-iig-app.erpp-sniv4 .model-navigator__label {
	color: var(--ink);
	font-size: 1.15rem;
	font-weight: 700;
}
.erpp-iig-app.erpp-sniv4 .model-navigator__tag {
	color: var(--muted);
	font-size: 0.85rem;
	text-align: right;
}
.erpp-iig-app.erpp-sniv4 .model-navigator__chevron {
	position: relative;
	width: 18px;
	height: 18px;
	justify-self: end;
}
.erpp-iig-app.erpp-sniv4 .model-navigator__chevron::before,
.erpp-iig-app.erpp-sniv4 .model-navigator__chevron::after {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 18px;
	height: 2px;
	background: var(--primary);
	transition: transform 0.2s ease;
}
.erpp-iig-app.erpp-sniv4 .model-navigator__chevron::after {
	transform: rotate(90deg);
}
.erpp-iig-app.erpp-sniv4 .model-navigator__row[open] .model-navigator__chevron::after {
	transform: rotate(0);
}
.erpp-iig-app.erpp-sniv4 .model-navigator__body {
	max-width: 760px;
	padding: 0 4px 28px 68px;
}
.erpp-iig-app.erpp-sniv4 .model-navigator__body p {
	margin: 0 0 12px;
	color: var(--muted);
	font-size: 1.02rem;
	line-height: 1.65;
}

.erpp-iig-app.erpp-sniv4 .transaction-flow {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
	margin: 40px 0 0;
	padding: 0;
	border-top: 1px solid var(--dark-line);
	list-style: none;
	counter-reset: tf-step;
}
/* Real defect found via headless-browser QA, 2026-08-11: with 5 steps
   (after adding EDI 855, see DEC-081), the grid needs an explicit
   tablet breakpoint — without one, a step count that doesn't evenly
   fill the column count wraps the last item alone with empty columns
   beside it, at 768px and even at full desktop width before this fix. */
@media (max-width: 1100px) and (min-width: 761px) {
	.erpp-iig-app.erpp-sniv4 .transaction-flow {
		grid-template-columns: repeat(3, 1fr);
	}
}
.erpp-iig-app.erpp-sniv4 .transaction-flow li {
	position: relative;
	padding: 32px 22px 0 0;
	counter-increment: tf-step;
}
.erpp-iig-app.erpp-sniv4 .transaction-flow li::before {
	content: counter(tf-step);
	position: absolute;
	top: -13px;
	left: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--dark);
	background: var(--accent);
	border-radius: 50%;
	font-size: 0.72rem;
	font-weight: 700;
}
.erpp-iig-app.erpp-sniv4 .transaction-flow__code {
	display: block;
	margin-top: 10px;
	color: rgba(255, 255, 255, 0.42);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: none;
}
.erpp-iig-app.erpp-sniv4 .transaction-flow h3 {
	margin: 0 0 8px;
	color: var(--white);
	font-size: 1.05rem;
}
.erpp-iig-app.erpp-sniv4 .transaction-flow p {
	margin: 0;
	color: rgba(255, 255, 255, 0.68);
	font-size: 0.9rem;
	line-height: 1.55;
}
.erpp-iig-app.erpp-sniv4 .diagnostic-heading {
	margin: 56px 0 20px;
}
.erpp-iig-app.erpp-sniv4 .diagnostic-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
}
.erpp-iig-app.erpp-sniv4 .diagnostic-card {
	padding: 24px 26px;
	background: rgba(255, 255, 255, 0.04);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius-md);
}
.erpp-iig-app.erpp-sniv4 .diagnostic-card__row {
	margin: 0 0 12px;
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.92rem;
	line-height: 1.55;
}
.erpp-iig-app.erpp-sniv4 .diagnostic-card__row:last-child {
	margin-bottom: 0;
}
.erpp-iig-app.erpp-sniv4 .diagnostic-card__row span {
	display: block;
	margin-bottom: 3px;
	color: var(--accent);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.erpp-iig-app.erpp-sniv4 .diagnostic-card__row--action {
	color: var(--white);
	font-weight: 600;
}

@media (max-width: 760px) {
	.erpp-iig-app.erpp-sniv4 .model-navigator__row summary {
		grid-template-columns: 32px 1fr 20px;
	}
	.erpp-iig-app.erpp-sniv4 .model-navigator__tag {
		display: none;
	}
	.erpp-iig-app.erpp-sniv4 .model-navigator__body {
		padding-left: 4px;
	}
	.erpp-iig-app.erpp-sniv4 .transaction-flow {
		grid-template-columns: 1fr;
	}
	.erpp-iig-app.erpp-sniv4 .transaction-flow li {
		padding: 28px 0 20px 32px;
		border-bottom: 1px solid var(--dark-line);
	}
	.erpp-iig-app.erpp-sniv4 .transaction-flow li::before {
		top: 26px;
		left: 0;
	}
	.erpp-iig-app.erpp-sniv4 .diagnostic-grid {
		grid-template-columns: 1fr;
	}
}

/* 2026-08-11: "NetSuite integration guidance" cards (erpp_iig_render_insights,
   shared across the whole IIG family) render the entire card as a link but
   previously had no visible link affordance (a hardcoded inline style
   stripped color/underline, and no CTA cue existed). If the whole card is
   clickable, it must look clickable. Adds a visible "Read guide" cue and a
   clear hover/focus state, reusing the same arrow-cue pattern already
   proven on the case-study proof cards elsewhere on this page. */
.erpp-iig-app.erpp-sniv4 .case-card--link {
	display: block;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.erpp-iig-app.erpp-sniv4 .case-card--link:hover,
.erpp-iig-app.erpp-sniv4 .case-card--link:focus-visible {
	border-color: var(--primary-light);
	box-shadow: 0 18px 40px rgba(30, 27, 75, 0.1);
	transform: translateY(-3px);
}
.erpp-iig-app.erpp-sniv4 .case-card--link .case-card__body span:not(.case-card__cta) {
	font-size: 0.85rem;
	line-height: 1.5;
}
.erpp-iig-app.erpp-sniv4 .case-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding-top: 14px;
	color: var(--primary);
	font-size: 0.8rem;
	font-weight: 700;
	border-top: 1px solid var(--line);
}
.erpp-iig-app.erpp-sniv4 .case-card__cta b {
	transition: transform 0.2s ease;
}
.erpp-iig-app.erpp-sniv4 .case-card--link:hover .case-card__cta b {
	transform: translateX(4px);
}

/* "Other integration services" marquee (erpp_iig_render_related): the
   rotating track previously sat outside the page's .shell max-width
   wrapper, so the cards ran edge-to-edge across the full viewport while
   the section heading and CTA stayed contained, an inconsistent, "broken
   out of the layout" look. Now wrapped in .shell (see
   inc/erpp-iig-generic-components.php) so the animation is visually
   contained within the same content column as the rest of the page. */
.erpp-iig-app.erpp-sniv4 .marquee {
	border-radius: var(--radius-lg);
}

/* 2026-08-11: erpp_iig_render_related_compact() — a static, curated
   related-links block for high-intent commercial pages, replacing the
   36-card marquee on those specific pages only (see the template's
   composition branch). No animation; simple 3-column card row. */
.erpp-iig-app.erpp-sniv4 .related-compact-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.erpp-iig-app.erpp-sniv4 .related-compact-card {
	display: block;
	padding: 26px;
	color: inherit;
	text-decoration: none;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.erpp-iig-app.erpp-sniv4 .related-compact-card:hover,
.erpp-iig-app.erpp-sniv4 .related-compact-card:focus-visible {
	border-color: var(--primary-light);
	box-shadow: 0 18px 40px rgba(30, 27, 75, 0.1);
	transform: translateY(-3px);
}
.erpp-iig-app.erpp-sniv4 .related-compact-card h3 {
	margin-bottom: 8px;
	font-size: 1.05rem;
}
.erpp-iig-app.erpp-sniv4 .related-compact-card p {
	margin: 0;
	color: var(--muted);
	font-size: 0.9rem;
	line-height: 1.55;
}
.erpp-iig-app.erpp-sniv4 .related-compact-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	color: var(--primary);
	font-size: 0.8rem;
	font-weight: 700;
}
.erpp-iig-app.erpp-sniv4 .related-compact-card__cta b {
	transition: transform 0.2s ease;
}
.erpp-iig-app.erpp-sniv4 .related-compact-card:hover .related-compact-card__cta b {
	transform: translateX(4px);
}
@media (max-width: 760px) {
	.erpp-iig-app.erpp-sniv4 .related-compact-grid {
		grid-template-columns: 1fr;
	}
}

/* 2026-08-11, commercial reset: challenged whether the generic 5-stage
   delivery track (Discover/Design/Configure/Validate/Launch) deserves
   full premium section real estate on the two high-intent Amazon
   pages, where use cases, capability and proof matter more to a buyer
   than a standard methodology recap. Decision: keep (it answers a
   real "how do you actually deliver this" question for CIO/ERP-manager
   buyers) but compact it, scoped to these two pages only via
   body.page-id so no other IIG page is affected. */
body.page-id-2663 .erpp-iig-app.erpp-sniv4 .delivery-section,
body.page-id-7926 .erpp-iig-app.erpp-sniv4 .delivery-section {
	padding: 56px 0;
}
body.page-id-2663 .erpp-iig-app.erpp-sniv4 .delivery-track,
body.page-id-7926 .erpp-iig-app.erpp-sniv4 .delivery-track {
	margin-top: 40px;
}
body.page-id-2663 .erpp-iig-app.erpp-sniv4 .delivery-track li,
body.page-id-7926 .erpp-iig-app.erpp-sniv4 .delivery-track li {
	min-height: auto;
	padding-bottom: 4px;
}
body.page-id-2663 .erpp-iig-app.erpp-sniv4 .delivery-track span,
body.page-id-7926 .erpp-iig-app.erpp-sniv4 .delivery-track span {
	margin-bottom: 24px;
}
body.page-id-2663 .erpp-iig-app.erpp-sniv4 .delivery-track h3,
body.page-id-7926 .erpp-iig-app.erpp-sniv4 .delivery-track h3 {
	font-size: 1.05rem;
}

/* Use-cases section (erpp_iig_render_use_cases): buyer-pain-first rows,
   deliberately not a card grid, to avoid card fatigue against the
   operating-model navigator / transaction-flow sections that follow. */
.erpp-iig-app.erpp-sniv4 .use-cases-list {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--line);
}
.erpp-iig-app.erpp-sniv4 .use-case-row {
	display: grid;
	grid-template-columns: 32px 1.1fr 1.1fr 0.8fr;
	gap: 32px;
	align-items: start;
	padding: 26px 0;
	border-bottom: 1px solid var(--line);
}
.erpp-iig-app.erpp-sniv4 .use-case-row__index {
	color: var(--primary);
	font-size: 0.78rem;
	font-weight: 700;
}
.erpp-iig-app.erpp-sniv4 .use-case-row__problem {
	margin: 0;
	color: var(--ink);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.4;
}
.erpp-iig-app.erpp-sniv4 .use-case-row__handles {
	margin: 0;
	color: var(--body);
	font-size: 0.95rem;
	line-height: 1.6;
}
.erpp-iig-app.erpp-sniv4 .use-case-row__matters {
	margin: 0;
	color: var(--muted);
	font-size: 0.86rem;
	line-height: 1.55;
}
.erpp-iig-app.erpp-sniv4 .use-case-row__matters span {
	display: block;
	margin-bottom: 4px;
	color: var(--primary);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
@media (max-width: 900px) {
	.erpp-iig-app.erpp-sniv4 .use-case-row {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.erpp-iig-app.erpp-sniv4 .use-case-row__index {
		display: none;
	}
}
.erpp-iig-app.erpp-sniv4 .use-cases-connect-summary {
	margin: 28px 0 0;
	color: var(--muted);
	font-size: 0.94rem;
	line-height: 1.6;
}
.erpp-iig-app.erpp-sniv4 .use-cases-connect-summary strong {
	color: var(--ink);
}
.erpp-iig-app.erpp-sniv4 .use-cases-cta {
	margin: 18px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 0.94rem;
}
.erpp-iig-app.erpp-sniv4 .use-cases-cta .text-link {
	margin-left: 4px;
}

/* 2026-08-11: optional hero center label (erpp_iig_render_hero(),
   $data['integration_layer_label']), making the Amazon <-> integration
   layer <-> NetSuite relationship explicit rather than leaving the
   connecting animation to imply it. Opt-in via data, so it only
   renders on pages that set the field; every other IIG page is
   unaffected. */
.erpp-iig-app.erpp-sniv4 .flow-label--center {
	top: 18%;
	left: 50%;
	transform: translateX(-50%);
	max-width: 150px;
	color: rgba(255, 255, 255, 0.72);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	white-space: normal;
	z-index: 4;
}
@media (max-width: 700px) {
	.erpp-iig-app.erpp-sniv4 .flow-label--center {
		top: 14%;
		font-size: 0.55rem;
	}
}