/*
 * Enterprise Workflow Automation (/solutions/enterprise-workflow-automation/) —
 * page assets.
 *
 * Enqueued for this one `solution` post only (see
 * iss_enqueue_enterprise_workflow_automation_assets() in functions.php),
 * declaring `iss-global` as a dependency so it lands after it.
 *
 * WHY A SEPARATE FILE, and what should leave it. Everything here is FIRST
 * STYLING for blocks single-solution.php started emitting for V56 — the
 * enterprise-breadth card grid, its takeaway band, the discipline bridge, the
 * Executive Visibility rail, the hero's full-width 7th scope tile, and the
 * next-workflow closing block without its removed tick rail. None of it is
 * specific to this page by shape; the moment a second page sets one of those
 * fields, the rule should MOVE to iss-global.css rather than be copied into
 * that page's file. It starts here because iss-global.css was locked by a
 * concurrent page build for the whole of this one, and because that is the
 * precedent supplier-lifecycle-management.css set for exactly this situation.
 *
 * Values are the V56 Clean HTML's own, lifted rather than approximated. Its
 * embedded stylesheet happens to use the same --iss-* token names this site
 * does (--iss-card, --iss-cyan, --iss-line-strong, --iss-navy-2, --iss-muted-2,
 * --iss-blue-dark all resolve), so the colours are the mockup's, not a nearest
 * match rounded to the site palette.
 *
 * Selectors carry `.iss-page` so specificity matches iss-global's and the
 * override order is the load order, not a specificity race.
 *
 * The six discipline cards themselves are NOT styled here. They reuse
 * `.iss-cap` / `.iss-cap-grid` / `.iss-cap-phased`, which iss-global.css has
 * carried since the V44 build of this page — V56 relocates that grid into
 * #platform but does not restyle it.
 */

/* ============================================================
   §1  Enterprise-breadth card grid ("Where else could iApprove™ fit?")
   ============================================================ */

.iss-page .iss-opmp-breadth {
	margin-top: 22px;
	padding: 28px 26px 22px;
	border-radius: 18px;
	background: var(--iss-card);
	border: 1px solid var(--iss-line);
	/* The cyan spine is what ties this card to the hero's breadth panel. */
	border-left: 4px solid var(--iss-cyan);
	box-shadow: 0 12px 30px rgba(7, 26, 43, .06);
}

/*
 * Heading left, disclaimer right — one row, not stacked. The mockup's own
 * 1.05fr/.95fr; stacking them reads as a heading with a subtitle, which puts
 * the "representative, not a fixed menu" caveat in the wrong voice.
 */
.iss-page .iss-opmp-breadth-head {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 26px;
	align-items: start;
	margin-bottom: 16px;
}

.iss-page .iss-opmp-breadth-heading {
	display: block;
	margin: 0;
	font-size: 23px;
	line-height: 1.18;
	color: var(--iss-ink);
}

.iss-page .iss-opmp-breadth-note {
	display: block;
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--iss-muted);
	font-weight: 750;
}

.iss-page .iss-opmp-breadth-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
}

.iss-page .iss-opmp-breadth-card {
	min-height: 150px;
	padding: 15px 14px;
	border-radius: 13px;
	background: #fff;
	border: 1px solid var(--iss-line-strong);
}

.iss-page .iss-opmp-breadth-card strong {
	display: block;
	margin-bottom: 6px;
	font-size: 16px;
	line-height: 1.22;
	color: var(--iss-navy-2);
}

.iss-page .iss-opmp-breadth-card span {
	display: block;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--iss-muted);
	font-weight: 700;
}

/* The takeaway is a dark band, not a bordered callout — see the template note. */
.iss-page .iss-opmp-breadth-takeaway {
	margin-top: 16px;
	padding: 15px 18px;
	border-radius: 10px;
	background: var(--iss-navy-2);
	text-align: center;
}

.iss-page .iss-opmp-breadth-takeaway strong {
	color: #fff;
	font-size: 15px;
	line-height: 1.45;
	font-weight: 900;
}

/* ============================================================
   §2  Discipline bridge — the rule above the six cards
   ============================================================ */

.iss-page .iss-opmp-bridge {
	margin: 28px 0 14px;
	padding-top: 22px;
	border-top: 1px solid var(--iss-line);
}

.iss-page .iss-opmp-bridge-heading {
	margin: 0 0 5px;
	font-size: 20px;
	line-height: 1.25;
	color: var(--iss-ink);
}

.iss-page .iss-opmp-bridge .iss-lead {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--iss-muted);
	font-weight: 700;
}

/* ============================================================
   §3  Executive Visibility rail (V52–V53)
   ============================================================ */

.iss-page .iss-opmp-visibility {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 14px;
	margin: 18px 0 14px;
	padding: 14px 16px;
	border-radius: 12px;
	border: 1px solid color-mix(in srgb, var(--iss-blue) 28%, var(--iss-line));
	border-left: 4px solid var(--iss-blue);
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--iss-blue) 7%, var(--iss-card)),
		color-mix(in srgb, var(--iss-cyan) 5%, var(--iss-card)));
}

.iss-page .iss-opmp-visibility-label {
	color: var(--iss-blue-dark);
	font-size: 14px;
	line-height: 1.25;
	font-weight: 900;
	white-space: nowrap;
}

.iss-page .iss-opmp-visibility p {
	margin: 0;
	color: color-mix(in srgb, var(--iss-navy) 82%, var(--iss-muted));
	font-size: 13.5px;
	line-height: 1.48;
	font-weight: 750;
}

.iss-page .iss-opmp-visibility-metrics {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px;
}

.iss-page .iss-opmp-visibility-metrics span {
	padding: 6px 8px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--iss-blue) 18%, var(--iss-line));
	background: rgba(255, 255, 255, .76);
	/* 10.5px at 850 weight is the mockup's; the pills are labels, not body copy,
	   and the token colour clears AA against the near-white pill ground. */
	color: var(--iss-muted);
	font-size: 10.5px;
	line-height: 1;
	font-weight: 850;
	white-space: nowrap;
}

/* ============================================================
   §4  Hero — the full-width 7th scope tile (HR)
   ============================================================ */

/*
 * HR is a seventh business function in a grid built for six. The mockup gives
 * it its own full-width row under the 3x2 rather than a ragged third column,
 * so the tile keeps the grid's card treatment but spans it.
 */
.iss-page .iss-hero-breadth-areas-wide {
	grid-template-columns: 1fr;
	margin-top: 8px;
}

/* ============================================================
   §5  Find Your Next Workflow — closing block after V54
   ============================================================ */

/*
 * V54 removed the tick callout and the "Strong Workflow Candidate" badge and
 * kept only the credibility paragraph. Without the badge there is no second
 * column to justify against, so the block stops being a split row.
 */
.iss-page .iss-next-closing-plain {
	display: block;
}

.iss-page .iss-next-closing-plain p {
	margin: 0;
}

/* ============================================================
   §6  Responsive — the mockup's own breakpoints
   ============================================================ */

@media (max-width: 1080px) {
	.iss-page .iss-opmp-breadth-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.iss-page .iss-opmp-visibility {
		grid-template-columns: auto 1fr;
	}

	.iss-page .iss-opmp-visibility-metrics {
		grid-column: 1 / -1;
		justify-content: flex-start;
	}
}

@media (max-width: 720px) {
	.iss-page .iss-opmp-breadth-head {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.iss-page .iss-opmp-breadth {
		margin-top: 18px;
		padding: 20px 18px;
	}

	.iss-page .iss-opmp-breadth-heading {
		font-size: 20px;
	}

	.iss-page .iss-opmp-breadth-note {
		font-size: 14px;
	}

	.iss-page .iss-opmp-breadth-grid {
		grid-template-columns: 1fr;
	}

	.iss-page .iss-opmp-breadth-card {
		min-height: 0;
	}

	.iss-page .iss-opmp-visibility {
		grid-template-columns: 1fr;
		gap: 8px;
		padding: 14px;
	}

	.iss-page .iss-opmp-visibility-label {
		white-space: normal;
	}

	.iss-page .iss-opmp-visibility-metrics {
		grid-column: auto;
	}
}

/* ============================================================
   §7  Parity fixes carried over from the V44 pass
   ------------------------------------------------------------
   These close items left open in
   docs/audit/2026-09-06_bpw-v44-parity/FINDINGS.md — all four were deferred
   because single-solution.php was locked, and all four are still what V56
   draws. Each is first styling for a field the template only started emitting
   now, so the same "move it to iss-global.css when a second page needs it"
   note at the top of this file applies.
   ============================================================ */

/* The closing band's bold claim, between the wordmark and the explanation. */
.iss-page .iss-cap-closing-lead {
	margin: 0 0 4px;
	font-size: 15px;
	line-height: 1.35;
	font-weight: 900;
	color: #fff;
}

/* The How It Works panel's header row: label left, live badge hard right. */
.iss-page .iss-wf-topline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

.iss-page .iss-wf-topline-label {
	font-size: 10px;
	line-height: 1.2;
	font-weight: 900;
	letter-spacing: .12em;
	text-transform: uppercase;
	/* The mockup's own mix — a cyan lightened toward the card colour, which is
	   what keeps it readable on the panel's translucent dark ground. */
	color: color-mix(in srgb, var(--iss-card) 44%, var(--iss-cyan));
}

/*
 * iAssist benefits as four cards with a cyan top accent — a bold title over a
 * description, and no check icon. The merged single-line form keeps the tick.
 */
/*
 * `.iss-ai-list li` is `display: flex`, built for a tick icon beside a single
 * run of text. The split form has no tick and stacks its two lines, so it has
 * to opt out of the flex row or the title and description sit side by side —
 * which is exactly what shipped on the first pass.
 */
.iss-page .iss-ai-list-split li {
	display: block;
	position: relative;
	overflow: hidden;
	min-height: 116px;
	padding: 17px 17px 16px;
	border-radius: 15px;
	/* The mockup's tinted gradient, not a flat card — the cards sit on the
	   light half of this section and the tint is what separates them from it. */
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--iss-bg-tint) 40%, var(--iss-card)) 0%,
		color-mix(in srgb, var(--iss-bg-tint) 78%, var(--iss-card)) 100%);
	border: 1px solid color-mix(in srgb, var(--iss-bg-tint) 48%, var(--iss-line));
}

.iss-page .iss-ai-list-split li::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--iss-blue), color-mix(in srgb, var(--iss-card) 34%, var(--iss-cyan)));
}

.iss-page .iss-ai-list-split li strong {
	display: block;
	margin-bottom: 6px;
	font-size: 15px;
	line-height: 1.32;
	color: color-mix(in srgb, var(--iss-muted-2) 22%, var(--iss-navy));
}

.iss-page .iss-ai-list-split li span {
	display: block;
	font-size: 12.5px;
	line-height: 1.52;
	font-weight: 650;
	color: color-mix(in srgb, var(--iss-muted-2) 76%, var(--iss-navy));
}

/* ============================================================
   §8  V56 Clean-HTML parity pass (2026-09-13)
   ------------------------------------------------------------
   The V56 build reached 100% COPY parity — a two-way block diff against the
   Clean HTML comes back with one difference, the breadcrumb's `›` where the
   site draws `/` site-wide. What it did not reach is VISUAL parity, and a
   computed-style diff of matched element pairs against the served mockup
   (docs/audit/2026-09-13_enterprise-workflow-automation-visual-comparison/)
   is where the gaps actually showed up: a hero card heading set at 17px where
   the mockup sets 28px, a featured-proof panel centring 200px of empty navy,
   two supporting-proof cards that had lost their dark/light split entirely.
   Screenshots alone had not caught any of them — they read as "close enough"
   until the numbers sat side by side.

   SCOPING, and why it is not uniform. Three of these components belong to this
   page alone (`.iss-opmp-*`, `.iss-proof-extra`, `.iss-hero-breadth-areas`
   beyond the customers hero), so they take the file's usual `.iss-page`
   prefix. The rest — `.iss-snap-teaser`, `.iss-cap-closing`,
   `.iss-side-callout`, `.iss-next-recognition` — are SHARED with Purchasing,
   Invoice & AP, Supplier Lifecycle, iAssist or /platform/, so every rule that
   touches one is keyed on `.iss-solution-enterprise-workflow-automation` and
   reaches no other page. Do not drop that class from a selector here without
   checking what else renders the block.

   Values are the mockup's own resolved computed styles, read off the served
   Clean HTML at 1512px rather than transcribed from its stylesheet, so a
   `color-mix()` that resolves differently under the site's tokens can't drift.
   ============================================================ */

/* ---- 8a. Hero scope card: the mockup's type scale ---- */

/*
 * 17px/700 vs the mockup's 28px/900. This is the card's own headline and it was
 * rendering smaller than the body copy beside it in the left column.
 *
 * A `cqw` clamp rather than the flat 28px, because `.iss-hero-breadth` is a
 * query container (iss-global.css §7g) and the site's card is 454px where the
 * mockup's is 561px — a flat 28px would set this in three lines on a phone.
 * The CAP is the mockup's value and the floor is a readable minimum, which is
 * the direction §7g asks for.
 */
.iss-page .iss-hero-breadth-heading {
	font-size: clamp(19px, 6.2cqw, 28px);
	font-weight: 900;
	letter-spacing: -.025em;
	line-height: 1.22;
}

.iss-page .iss-hero-breadth-sub {
	font-size: clamp(12.5px, 3cqw, 14px);
	line-height: 1.55;
}

/*
 * The platform core row is TWO COLUMNS in the mockup — the wordmark and its
 * descriptor stacked on the left, the Human-in-the-Loop badge centred on the
 * right. The template emits all three as siblings, so it shipped as three
 * stacked lines: wordmark and descriptor side by side on one row, badge
 * orphaned underneath.
 *
 * NOT converted to the mockup's mint `.platform-tag` pill. The badge is
 * `.iss-live`, and the site-wide rule (CLAUDE.md, "A hero infographic's QAD
 * callout is a MINT PILL") is explicit that a label naming anything other than
 * QAD — "Human-in-the-Loop" is the example it gives — keeps the generic
 * pulsing-dot badge. This fixes where it sits, not what it looks like.
 */
.iss-page .iss-hero-breadth-platform {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	column-gap: 18px;
	padding: 16px 18px;
	border-radius: 15px;
	background: rgba(8, 31, 49, .56);
	border-color: rgba(143, 226, 245, .34);
}

.iss-page .iss-hero-breadth-platform > strong {
	grid-column: 1;
	grid-row: 1;
	font-size: clamp(17px, 5.5cqw, 25px);
	line-height: 1.2;
}

.iss-page .iss-hero-breadth-platform > span:not(.iss-live) {
	grid-column: 1;
	grid-row: 2;
	margin-top: 3px;
	font-size: clamp(12px, 2.9cqw, 13.5px);
}

.iss-page .iss-hero-breadth-platform > .iss-live {
	grid-column: 2;
	grid-row: 1 / -1;
	align-self: center;
}

.iss-page .iss-hero-breadth-areas > div > strong {
	font-size: clamp(11.5px, 3cqw, 14px);
	line-height: 1.55;
}

/* ---- 8b. Built on iApprove™: the intro is a ROW, not a stack ---- */

/*
 * The mockup sets the section head and the expansion-story card side by side,
 * baseline-aligned at the bottom (`.foundation-intro`, .88fr/1.12fr, 42px).
 * The template emits them as consecutive children of the wrap, so they stacked
 * — heading full width, then a half-width card hanging under its left edge.
 *
 * The grid therefore goes on the WRAP, with every other child spanning both
 * columns. `.iss-sec-head` and `.iss-opmp-grid` are the wrap's first two
 * children, so auto-placement puts them on row one and nothing needs an
 * explicit row.
 */
.iss-page #platform > .iss-wrap {
	display: grid;
	grid-template-columns: .88fr 1.12fr;
	column-gap: 42px;
	align-items: end;
}

.iss-page #platform > .iss-wrap > * {
	grid-column: 1 / -1;
	min-width: 0;
}

.iss-page #platform > .iss-wrap > .iss-sec-head {
	grid-column: 1;
	margin-bottom: 0;
}

.iss-page #platform > .iss-wrap > .iss-opmp-grid {
	grid-column: 2;
	grid-template-columns: 1fr;
}

/*
 * One card, not a card with a second card inside it. The mockup's
 * `.foundation-summary` is a single tinted panel: kicker, claim, supporting
 * line. The template nests an `.iss-side-callout` for the supporting line,
 * which drew a blue-ruled box inside the white card.
 */
.iss-page .iss-opmp-story {
	padding: 21px 23px 21px 25px;
	border-radius: 17px;
	background: linear-gradient(135deg, #edfaff 0%, #f8fbfd 56%, #edf6fd 100%);
	border: 1px solid #d2e5f4;
	box-shadow: 0 12px 30px rgba(13, 58, 88, .07);
}

.iss-page .iss-opmp-story h3 {
	margin: 0 0 7px;
	font-size: 18px;
	line-height: 1.35;
}

.iss-page .iss-opmp-story-note {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.iss-page .iss-opmp-story-note strong {
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.58;
	color: var(--iss-muted);
}

/* ---- 8c. The closing platform band: wordmark left, tag right ---- */

/*
 * The mockup's band is three columns — a 24px iApprove™ wordmark, the copy,
 * and a mint "Real-Time QAD Connected" pill hard right. The shared component
 * renders the badge FIRST, as a blue gradient tile, and demotes the wordmark
 * to a 15px `<strong>` above the copy. Page-scoped because iAssist and
 * Invoice & AP render the same block and keep the blue tile.
 *
 * This badge is NOT `iss_live_badge()` output — it is `cap_closing.badge`,
 * its own field with its own class — so the QAD mint-pill rule does not
 * govern it and the mockup's own treatment is what applies.
 */
.iss-page.iss-solution-enterprise-workflow-automation .iss-cap-closing {
	gap: 20px;
	padding: 22px 24px;
	border-radius: 18px;
	background: linear-gradient(125deg, #0a2940, #0b3654);
	border: 1px solid #18476456;
}

.iss-page.iss-solution-enterprise-workflow-automation .iss-cap-closing > div {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: 20px;
	flex: 1;
	min-width: 0;
}

.iss-page.iss-solution-enterprise-workflow-automation .iss-cap-closing strong {
	grid-column: 1;
	grid-row: 1 / -1;
	margin-bottom: 0;
	font-size: 24px;
	font-weight: 900;
	line-height: 1.55;
	white-space: nowrap;
}

.iss-page.iss-solution-enterprise-workflow-automation .iss-cap-closing > div > p {
	grid-column: 2;
}

.iss-page.iss-solution-enterprise-workflow-automation .iss-cap-closing-lead {
	font-size: 15px;
	margin-bottom: 4px;
}

.iss-page.iss-solution-enterprise-workflow-automation .iss-cap-closing > div > p:not(.iss-cap-closing-lead) {
	font-size: 12.75px;
	line-height: 1.55;
}

.iss-page.iss-solution-enterprise-workflow-automation .iss-cap-closing-badge {
	order: 2;
	min-width: 0;
	height: auto;
	padding: 8px 11px;
	border-radius: 999px;
	background: rgba(82, 224, 178, .08);
	border: 1px solid rgba(82, 224, 178, .2);
	font-family: inherit;
	font-size: 9px;
	font-weight: 900;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #8bd3bc;
	white-space: nowrap;
}

/* ---- 8d. Business Functions: the side note is a card, not a rule ---- */

/*
 * `.iss-side-callout`'s default is a flat tint with a 3px blue rule and square
 * left corners. The mockup draws this one as a 320px gradient card with a
 * gradient spine and a bold 15px lead over 12px body copy. Page-scoped and
 * id-scoped: the same class draws the expansion story above and the closing
 * callouts on four other pages.
 */
.iss-page.iss-solution-enterprise-workflow-automation #business-areas .iss-side-callout {
	position: relative;
	justify-self: end;
	max-width: 340px;
	padding: 18px 18px 18px 20px;
	border-radius: 16px;
	background: linear-gradient(180deg, #effafd 0%, #e9f3fc 100%);
	border: 1px solid #c9e2f6;
	box-shadow: 0 10px 24px rgba(16, 56, 84, .07);
	overflow: hidden;
}

.iss-page.iss-solution-enterprise-workflow-automation #business-areas .iss-side-callout::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: linear-gradient(180deg, var(--iss-blue), var(--iss-cyan));
}

.iss-page.iss-solution-enterprise-workflow-automation #business-areas .iss-side-callout p {
	margin: 0;
	font-size: 15px;
	line-height: 1.35;
	font-weight: 900;
	color: var(--iss-navy-3, var(--iss-ink));
}

/*
 * …and the supporting line under it. `single-solution.php` used to print
 * `area_disclaimer` in the LEFT column under the intro, where it read as a
 * second intro paragraph and left this card holding one sentence. It is the
 * mockup's `.areas-note-body` — the caveat the takeaway above is hedging — so
 * the two now sit in the same card, and this is the smaller of them.
 */
.iss-page.iss-solution-enterprise-workflow-automation #business-areas .iss-side-callout .iss-area-disclaimer {
	margin-top: 8px;
	font-size: 12px;
	line-height: 1.6;
	font-weight: 700;
	color: var(--iss-muted);
}

/* ---- 8e. Featured Customer Proof ---- */

/*
 * THE DEAD SPACE. `.iss-snap-teaser-dark` is `justify-content: center`, which
 * is right for the three pages whose dark panel is a name and one metric. This
 * page's light column runs 526px tall, so centring five short blocks in it
 * parked ~200px of empty navy between the stat and the panel foot. Top-aligned
 * here only.
 *
 * THE ORDER. The mockup reads company -> scope -> stat: the scope line tells
 * you what the number is about before you meet it. The template's dark panel
 * emits the metric before `.iss-snap-teaser-block`, which is where the scope
 * line lives, so the number landed first and the scope read as a caption for
 * the stat label above it. `order` on a flex column fixes the sequence without
 * touching the shared template.
 */
.iss-page.iss-solution-enterprise-workflow-automation .iss-snap-teaser-dark {
	justify-content: flex-start;
	gap: 0;
	padding: 28px 28px 26px;
}

.iss-page.iss-solution-enterprise-workflow-automation .iss-snap-teaser-dark > .iss-kicker { order: 1; margin-bottom: 18px; }
.iss-page.iss-solution-enterprise-workflow-automation .iss-snap-teaser-logo { order: 2; margin-bottom: 14px; }
.iss-page.iss-solution-enterprise-workflow-automation .iss-snap-teaser-name { order: 3; }
.iss-page.iss-solution-enterprise-workflow-automation .iss-snap-teaser-block { order: 4; }
.iss-page.iss-solution-enterprise-workflow-automation .iss-snap-teaser-metric { order: 5; }
.iss-page.iss-solution-enterprise-workflow-automation .iss-snap-teaser-foot { order: 6; }

.iss-page.iss-solution-enterprise-workflow-automation .iss-snap-teaser-name {
	margin-bottom: 10px;
	font-size: 28px;
	font-weight: 900;
	line-height: 1.12;
	color: #fff;
}

/* The scope line — `.proof-scope` in the mockup, a topic list rather than a heading. */
.iss-page.iss-solution-enterprise-workflow-automation .iss-snap-teaser-block {
	margin: 0 0 25px;
}

.iss-page.iss-solution-enterprise-workflow-automation .iss-snap-teaser-block strong {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	color: #bcd6de;
}

.iss-page.iss-solution-enterprise-workflow-automation .iss-snap-teaser-metric > span {
	margin-top: 7px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.35;
	color: #d4e6ef;
}

/*
 * The pull-quote sits AFTER the three stat tiles in the mockup and before the
 * tags. `.iss-snap-teaser-light` is a flex column, so this is one `order`
 * rather than a template move. Everything ahead of it keeps source order by
 * sharing order 0.
 */
.iss-page.iss-solution-enterprise-workflow-automation .iss-snap-teaser-quote {
	order: 1;
	margin: 0;
	padding: 15px 17px;
	border-radius: 13px;
	border-left: 4px solid var(--iss-blue);
	background: #eef7fb;
	font-size: 13.5px;
	font-weight: 750;
	line-height: 1.5;
	color: #32526b;
}

.iss-page.iss-solution-enterprise-workflow-automation .iss-snap-teaser-tags { order: 2; }
.iss-page.iss-solution-enterprise-workflow-automation .iss-snap-teaser-actions { order: 3; }

/* ---- 8f. Supporting proof cards: the dark/light split ---- */

/*
 * The mockup's `.supporting-proof` is a two-column card — a navy panel holding
 * the customer and its headline number, a white panel holding the story. The
 * block shipped as one flat white card with the number stacked on top, which
 * is what made these two read as a different component from the featured card
 * directly above them.
 *
 * single-solution.php now emits the two halves in their own wrappers (see the
 * note there for why placing six flat siblings on a grid does not work), so
 * this is a plain two-column grid and each half stacks on its own terms.
 *
 * `.iss-proof-extra` renders on this page only — `proof_extra_*` is set by no
 * other migration — so this is a restyle rather than an override. It is still
 * page-keyed by the `.iss-page` prefix the rest of this file uses, so a second
 * page adopting the fields gets the shared look until someone moves these
 * rules to iss-global.css deliberately.
 */
.iss-page .iss-proof-extra {
	display: grid;
	grid-template-columns: 35% 65%;
	align-items: stretch;
	padding: 0;
	overflow: hidden;
	border-radius: 18px;
}

.iss-page .iss-proof-extra-dark {
	padding: 21px 18px;
	background: linear-gradient(145deg, #0a2940, #0b3855);
}

.iss-page .iss-proof-extra-light {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 20px;
	min-width: 0;
}

.iss-page .iss-proof-extra-kicker {
	margin: 0 0 9px;
	font-size: 9px;
	font-weight: 900;
	letter-spacing: .1em;
	line-height: 1.55;
	color: #90ddf1;
}

.iss-page .iss-proof-extra-customer {
	display: block;
	margin: 0 0 15px;
	font-size: 18px;
	font-weight: 900;
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.2;
	color: #fff;
}

.iss-page .iss-proof-extra-metric {
	margin: 0;
}

.iss-page .iss-proof-extra-metric .iss-mnum {
	margin: 0;
	font-size: 31px;
	line-height: 1;
	color: #fff;
}

.iss-page .iss-proof-extra-metric .iss-mnum .iss-u { color: var(--iss-sky); }

.iss-page .iss-proof-extra-metric > span {
	margin-top: 5px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	color: #c4d8e3;
}

.iss-page .iss-proof-extra-light h3 { margin: 0 0 7px; font-size: 16px; }
.iss-page .iss-proof-extra-light p { margin: 0 0 12px; font-size: 13.5px; }

/* ---- 8g. Find Your Next Workflow: the recognition card's tint ---- */

/*
 * The mockup gives this card a cyan-to-mint wash and a cyan hairline, which is
 * what lifts it off the section's own dark ground. It shipped flat.
 */
.iss-page.iss-solution-enterprise-workflow-automation .iss-next-recognition {
	background: linear-gradient(135deg, rgba(57, 195, 230, .12), rgba(82, 224, 178, .08));
	border: 1px solid rgba(143, 226, 245, .19);
	box-shadow: 0 14px 30px rgba(0, 0, 0, .11);
}

/* ---- 8h. Responsive ---- */

@media (max-width: 980px) {
	/* The mockup's own breakpoint for `.foundation-intro`. */
	.iss-page #platform > .iss-wrap {
		display: block;
	}

	.iss-page #platform > .iss-wrap > .iss-sec-head {
		margin-bottom: 20px;
	}

	.iss-page.iss-solution-enterprise-workflow-automation #business-areas .iss-side-callout {
		justify-self: stretch;
		max-width: none;
	}
}

/*
 * WHERE THE SPLIT COLLAPSES. The two cards sit two-up down to 640px
 * (iss-global.css), where the mockup's own `.supporting-proof-grid` goes
 * one-up at 980 — and between those the site gives each card roughly half a
 * narrow wrap, which put the navy rail at 102-168px and "Rea Magnet Wire" on
 * three lines. So the GRID takes the mockup's breakpoint and the card's own
 * split then needs no special case.
 *
 * The number is 1100 and not 980 because the site's content column is ~100px
 * narrower than the mockup's at the same window (1120 against 1184 at
 * desktop), so the width at which a half-width card stops working arrives
 * ~100px sooner. Taking 980 literally left 981-1100 rendering the same defect
 * this rule exists to remove, one band higher.
 */
@media (max-width: 1100px) {
	.iss-page .iss-proof-extra-grid { grid-template-columns: 1fr; }
}

@media (max-width: 690px) {
	/* The navy panel becomes a full-width header strip above the story, which
	   is what `.supporting-proof` does at this width. */
	.iss-page .iss-proof-extra { grid-template-columns: 1fr; }
}


@media (max-width: 690px) {
	/*
	 * `.platform-core` goes `flex-direction: column` at this width in the
	 * mockup. The site's version is a grid, so the tag drops to its own row
	 * under the descriptor rather than being squeezed beside it.
	 */
	.iss-page .iss-hero-breadth-platform {
		grid-template-columns: 1fr;
		row-gap: 10px;
	}

	.iss-page .iss-hero-breadth-platform > .iss-live {
		grid-column: 1;
		grid-row: 3;
		justify-self: start;
	}
}

@media (max-width: 720px) {
	.iss-page.iss-solution-enterprise-workflow-automation .iss-cap-closing > div {
		grid-template-columns: 1fr;
		row-gap: 6px;
	}

	.iss-page.iss-solution-enterprise-workflow-automation .iss-cap-closing strong {
		grid-row: auto;
	}

	.iss-page.iss-solution-enterprise-workflow-automation .iss-cap-closing > div > p {
		grid-column: 1;
	}
}