/**
 * ISS GLOBAL DESIGN SYSTEM — the single source of truth for the redesign.
 *
 * Loaded site-wide (see iss_enqueue_global_assets() in functions.php, priority
 * 40 so it wins over the dt-the7 parent's style.css at 30). Replaces the old
 * split between css/front-page.css and css/iss-design-system.css, which had
 * diverged into two token sets and two definitions of the same components
 * (.iss-pcard, .iss-flist, .iss-mk, .iss-btn, .iss-reveal …).
 *
 * ARCHITECTURE — three layers, in this order:
 *   1. Tokens on :root. Inert on pages that don't use them, so loading this
 *      file site-wide costs nothing on legacy The7 pages.
 *   2. Base + components scoped under `.iss-page`. EVERY ISS-designed
 *      template puts `.iss-page` on its outermost wrapper — the homepage
 *      included (`.iss-front-page.iss-page`) — so all pages inherit one
 *      vocabulary and no template needs its own copy of a component.
 *   3. Per-template files (css/front-page.css) hold ONLY layout that is
 *      genuinely unique to one page, and consume the tokens below. If you
 *      find yourself writing a component in a per-template file, it belongs
 *      here instead.
 *
 * COMPONENT VOCABULARY (use these names — do not invent per-page variants):
 *   layout ......... .iss-wrap · .iss-section · .iss-sec-head · .iss-bleed
 *   labels ......... .iss-kicker · .iss-eyebrow · .iss-lead · .iss-fact
 *   actions ........ .iss-btn (-demo/-primary/-ghost/-white/-light) · .iss-inlink
 *   chrome ......... .iss-ctx (breadcrumb) · .iss-progress-bar
 *   infographics ... .iss-pipeline (+.iss-flow-card / .iss-flow-big)
 *                    .iss-split (.iss-pcard.iss-bad / .iss-good)
 *                    .iss-cap-grid · .iss-val-grid · .iss-metrics (+ring)
 *                    .iss-stats-grid · .iss-story · .iss-quote
 *   cards .......... .iss-tile-grid + .iss-tile (.iss-cols-2/-3)
 *   bands .......... .iss-ai-within · .iss-ai-band (+.iss-ai-teaser)
 *                    .iss-cta-band · .iss-marquee
 *   customers ...... .iss-logo-grid + .iss-logo-card · .iss-cust-chip
 *                    .iss-client-hero · .iss-side-card
 *   conversion ..... .iss-form-panel (+.iss-form-panel-solo) · .iss-form-card
 *                    .iss-panel-aside (.iss-panel-facts · .iss-panel-contact)
 *                    .iss-trust-strip · .iss-faq · .iss-contact-strip
 *                    + Gravity Forms restyled inside .iss-form-card
 *   motion ......... .iss-reveal[data-d] · [data-count] · [data-ring]
 *                    (all driven by js/iss-interactions.js, reduced-motion aware)
 */

/* ============================================================
   1. TOKENS
   ============================================================ */
/*
 * PALETTE — retuned 2026-08-25 to the V5 Solution-page handoff's own ramp
 * (ISSG_Invoice_AP_Workflow_Developer_Handoff_V5). ISS approved that palette
 * as the site-wide scheme, so these are the handoff's literal hexes rather
 * than our earlier approximations of them. Two naming notes, because the
 * handoff's ramp runs the opposite direction to ours:
 *
 *   - The handoff ramps navy → navy-2 → navy-3 DARK to LIGHT. Ours has always
 *     ramped `--iss-navy` → `--iss-navy-2` LIGHT to DARK, and ~14 gradients
 *     across 5 files depend on that direction. So `--iss-navy` takes the
 *     handoff's mid tone and `--iss-navy-2` its deepest, preserving our
 *     direction while landing on their colors. `--iss-navy-3` is new and is
 *     the light/blue end the V5 hero gradient resolves to.
 *   - `--iss-sky` was already the "accent on a dark ground" slot, which is
 *     exactly what the handoff calls `--cyan-soft`. Same role, so it keeps
 *     its name and takes that value rather than adding a fourth blue.
 */
:root {
	--iss-bg: #f4f8fb;
	--iss-bg-tint: #edf5fa;
	--iss-card: #fff;
	--iss-ink: #13283a;
	--iss-muted: #607286;
	--iss-muted-2: #7890a3;
	--iss-line: #dce6ee;
	--iss-line-strong: #cbdae7;

	--iss-blue: #0c73c9;
	--iss-blue-dark: #0a5fa6;
	/* The handoff's lighter blue — gradient partner to --iss-blue. */
	--iss-blue-2: #1f8be0;
	--iss-navy: #0a2940;
	--iss-navy-2: #071a2b;
	--iss-navy-3: #0b3654;
	--iss-red: #ed3342;
	/*
	 * The deep end of the brand red. Red is the ISS mark's own accent (the dot
	 * on the "i"). The V5 handoff spends no red at all inside its dark heroes
	 * and bands — primary CTAs there go white and accents go cyan — so red is
	 * now scoped to light sections plus the global header's Book a Demo (which
	 * the handoff explicitly tells us to preserve as-is). See .iss-btn-demo.
	 */
	--iss-red-deep: #c2202e;
	--iss-cyan: #39c3e6;
	/* Accent on dark grounds. The handoff calls this --cyan-soft. */
	--iss-sky: #8fe2f5;
	--iss-green: #17a878;
	--iss-amber: #d88a21;

	/* Tiered depth: e1 resting card, e2 grouped panel, e3 hero/dark feature. */
	--iss-e1: 0 1px 2px rgba(19, 40, 58, .04), 0 4px 14px rgba(19, 40, 58, .05);
	--iss-e2: 0 2px 6px rgba(19, 40, 58, .06), 0 18px 48px rgba(19, 40, 58, .10);
	--iss-e3: 0 30px 70px rgba(19, 40, 58, .16);

	--iss-r: 18px;
	--iss-r-lg: 26px;
	--iss-r-sm: 12px;
	--iss-max: 1120px;

	--iss-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
	--iss-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
}

/*
 * FALLBACK ONLY. The7's page-title banner is switched off properly in PHP —
 * iss_disable_the7_page_chrome() in functions.php clears the config keys that
 * presscore_page_title_controller() checks, so the markup is never emitted and
 * there is no duplicate <h1> in the DOM. This rule stays as a safety net in
 * case a The7 update renames those config keys; if the banner ever reappears
 * it will at least be invisible.
 *
 * One body class, not a list. This used to name every template individually,
 * which meant each new template had to be remembered into it — and the ~86 legacy
 * Pages, 241 posts and 42 category archives were never in it at all, so they kept
 * the banner. `iss-the7-chrome-off` is added by iss_overview_body_class() from the
 * same condition the PHP uses, so the two can no longer disagree.
 */
body.iss-the7-chrome-off .page-title {
	display: none;
}

/* ============================================================
   2. BASE
   ============================================================ */
/*
 * Site-wide (not scoped to .iss-page — harmless on legacy The7 pages too).
 * Anchor jumps already work with no JS (native #hash scroll — e.g. the
 * docked contextual nav on Solution pages, in-page router links); this
 * just makes that native jump animate instead of snapping instantly.
 * `scroll-margin-top` on individual targets (see .iss-section, §3) still
 * does the sticky-header clearance work — this only adds the motion.
 */
html {
	scroll-behavior: smooth;
}

/*
 * Named because a full-bleed section (§3) has to repaint this same ground
 * across the viewport, and the two must not be allowed to drift apart.
 */
.iss-page {
	--iss-page-ground: radial-gradient(1100px 560px at 84% -10%, rgba(12, 115, 201, .09), transparent 60%), var(--iss-bg);

	background: var(--iss-page-ground);
	color: var(--iss-ink);
	font-family: var(--iss-sans);
	-webkit-font-smoothing: antialiased;
	line-height: 1.6;
	overflow-x: hidden;
}

/* Defensive resets scoped inside .iss-page so The7's cascade doesn't leak in. */
.iss-page * { box-sizing: border-box; }

.iss-page h1,
.iss-page h2,
.iss-page h3,
.iss-page h4 {
	margin: 0;
	color: var(--iss-ink);
	letter-spacing: -.03em;
	font-weight: 700;
	line-height: 1.1;
	font-family: var(--iss-sans);
}
.iss-page h1 { font-size: clamp(34px, 4.6vw, 52px); line-height: 1.03; }
.iss-page h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.08; letter-spacing: -.025em; }
.iss-page h3 { font-size: 19px; line-height: 1.22; letter-spacing: -.02em; }
.iss-page h4 { font-size: 16px; }
.iss-page p { margin: 0; color: var(--iss-muted); }
.iss-page a { color: inherit; text-decoration: none; }
.iss-page ul { margin: 0; padding: 0; list-style: none; }
.iss-page img { max-width: 100%; }
.iss-page .iss-muted { color: var(--iss-muted); }

/* ============================================================
   3. LAYOUT
   ============================================================ */
.iss-page .iss-wrap {
	width: min(var(--iss-max), calc(100% - 40px));
	margin-inline: auto;
}

/*
 * FULL-BLEED SECTION — background edge to edge, content still in the column.
 *
 * The7 renders our templates inside `#main > .wf-wrap`, which is capped and
 * centred (1300px wide, 50px of side padding → a 1200px column on desktop).
 * That cap is the parent theme's, not ours, so a section with a background of
 * its own stops short of the viewport edges and reads as a floating panel
 * rather than as a band across the page.
 *
 * This releases the section — and ONLY the section — from that column by
 * cancelling the distance from its own edge to the viewport edge on each side.
 * Percentages resolve against the containing block, `vw` against the viewport,
 * so the difference IS that distance, whatever the breakpoint has made it.
 *
 * The padding then puts back exactly what the margin took away, which is the
 * whole point: the border box reaches the viewport edges and paints the
 * background there, while the CONTENT box is bit-for-bit the column the section
 * started in. Its `.iss-wrap` child therefore resolves against the same width
 * it always did and lands on the same left/right edges as every unbled section
 * above and below it. Without the padding the wrap would resolve against the
 * viewport instead, which reads as identical on desktop (where the wrap is
 * capped at --iss-max and centred either way) and silently pulls the content
 * 20px closer to the edge on phones, where the cap no longer binds and its
 * 40px gutter is measured off a wider box.
 *
 * The class is doubled to raise specificity on purpose: `.iss-section` sets
 * `padding: … 0` as a shorthand, and the homepage overrides that shorthand
 * again, so a single-class selector here would have its side padding zeroed on
 * source order and take the mobile shift with it.
 *
 * THAT IS THE FAILURE MODE, and it is worth stating on its own because it is
 * not "someone forgot the padding" — it is a LATER rule setting `padding` as a
 * SHORTHAND. `padding: 94px` means `padding-inline: 94px` too, so it silently
 * replaces the one declaration holding the content box in the column. Both
 * times it bit on 2026-09-06 the bleed declaration itself was correct and
 * something else zeroed it: a page CSS file's `padding: 94px` on a bled
 * capability detail, and `.iss-cap-detail-dark` / `-soft` declaring their bleed
 * on a single class against `.iss-cap-detail.iss-cap-detail`'s shorthand at
 * (0,3,0) — wrong on Purchasing and Supplier Lifecycle from the day they
 * shipped (issgroup-6a, 8ae3ce3).
 *
 * Two habits prevent it. Write `padding-block` on any rule that only means
 * vertical padding, and double the class on any component that carries this
 * geometry intrinsically rather than via `.iss-bleed`.
 *
 * It also hides at desktop width, which is why it survives review: `.iss-wrap`
 * is capped at `--iss-max` and centred, so a section whose content box has
 * silently widened to the viewport still puts its column in the same place.
 * The break only shows once the cap stops binding — 20px from the edge instead
 * of 70 at 1024, instead of 40 on a phone. So verify it by MEASURING a bled
 * section's `.iss-wrap` left edge against an unbled one's at 1024 and 390, not
 * by looking at a desktop screenshot. `tests/solutions.spec.js`'s
 * "bands run edge to edge without moving the content column" does exactly that.
 *
 * The vw unit counts the classic scrollbar where one exists, so the background
 * can overhang the client box by half a scrollbar on each side. That overhang
 * is symmetric (so nothing shifts) and The7's `#page` already clips it with
 * `overflow-x: hidden`, so it can't produce a horizontal scrollbar.
 *
 * Apply it to the SECTION, never to a wrap or a card.
 */
.iss-page .iss-bleed.iss-bleed {
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
}

/*
 * The breadcrumb bar and the page hero ALWAYS bleed, on every template that has
 * them, so they take the geometry above intrinsically (§6 / §7) rather than
 * carrying the class — which would otherwise have to be remembered into 17
 * templates' markup, and forgotten on the eighteenth. They still have to be
 * named in the companion rule below, because that is keyed on the child.
 *
 * Two things have to give way on a wrapper that contains a bleed.
 *
 * 1. `.iss-page` sets `overflow-x: hidden` (§2) as a guard against stray
 *    horizontal overflow, and that guard clips a bled section's background back
 *    to the column — the layout box widens, the paint does not, and the change
 *    looks like it silently did nothing. Nothing is given up by lifting it
 *    here: The7's `#page` is itself `overflow: hidden`, so it still catches
 *    anything that would otherwise put a horizontal scrollbar on the document.
 *
 * 2. The page ground (§2) is painted on this wrapper, so it stops at the column
 *    too. Left alone, the first bled section escapes the column and every
 *    section around it is left sitting on a 1200px stripe of `--iss-bg` with
 *    white rails either side of it — the ground has to travel with the bleed or
 *    the page reads as an inset panel. It moves to a full-width layer behind
 *    the content instead, painted from the same custom property so it cannot
 *    drift from the unbled case.
 */
.iss-page:has(> .iss-bleed),
.iss-page:has(> .iss-ctx),
.iss-page:has(> .iss-detail-hero) {
	overflow-x: visible;
	position: relative;
	background: none;
}
.iss-page:has(> .iss-bleed)::before,
.iss-page:has(> .iss-ctx)::before,
.iss-page:has(> .iss-detail-hero)::before {
	content: "";
	position: absolute;
	inset: 0;
	margin-inline: calc(50% - 50vw);
	z-index: -1;
	background: var(--iss-page-ground);
	pointer-events: none;
}

.iss-page .iss-section {
	padding: clamp(48px, 7vw, 88px) 0;
	position: relative;
	/*
	 * The custom sticky header is ~66px condensed; give anchor jumps clearance
	 * so a target section never lands underneath it.
	 */
	scroll-margin-top: 90px;
}
/*
 * `.iss-tight` zeroes a section's top padding so it can sit flush under
 * something that already supplies the space — a hero with its own bottom
 * padding, or a band whose background continues into it.
 */
.iss-page .iss-section.iss-tight { padding-top: 0; }
/*
 * SITE-WIDE GUARD (Danny, 2026-09-04): two `.iss-tight` sections in a row can
 * never both be "flush with the thing above" — the second one is flush with a
 * section that already zeroed its own top, so the two collapse into each other
 * and the page loses every seam between its sections.
 *
 * This was the /solutions/ bug: all six sections carried `.iss-tight`, leaving
 * 8px between the hero's gradient edge and the "One Common Foundation" kicker.
 * It was not one page's mistake — /ai-layer/ and /use-cases/ had ten collapsed
 * sections each, Business Process Workflows seven, /resources/ and /customers/
 * four. Restoring the normal top padding on any tight section that FOLLOWS
 * another tight section fixes all of them at once and stops the next page from
 * shipping the same way.
 *
 * Deliberately keyed on the pair, not on `.iss-tight` itself, so the single
 * intentional use — the first section under a hero, e.g. /about/'s
 * `by-the-numbers` — still sits flush exactly as before.
 */
.iss-page .iss-section.iss-tight + .iss-section.iss-tight {
	padding-top: clamp(48px, 7vw, 88px);
}
/*
 * SITE-WIDE GUARD 2 (Danny, 2026-09-07): a `.iss-tight` section directly under
 * the hero is ALWAYS wrong, because the hero paints its own background.
 *
 * `.iss-tight`'s premise is that the thing above supplies the space. That holds
 * when the thing above is a plain section whose bottom padding sits on the same
 * page ground — the two paddings share one continuous surface, so zeroing one
 * of them still leaves a gap. It does NOT hold under `.iss-detail-hero`: the
 * hero's 56px bottom padding is INSIDE its dark gradient, so it buys no gap at
 * the seam at all. The next section's content starts the pixel the gradient
 * ends, and the pair guard above never fires because a first section has no
 * tight sibling before it.
 *
 * This was /project-snapshots/: the snapshot cards butted straight into the
 * hero's gradient edge with ~8px of daylight (Danny, 2026-09-07) — the same
 * 8px symptom as the /solutions/ bug the pair guard was written for. It is not
 * one page's mistake. Sixteen templates open with `.iss-section.iss-tight`
 * directly after the hero (404, page, search, single, single-client,
 * single-event, single-project_snapshot, single-resource, single-solution,
 * about, ai-layer, customers, form-cta, overview, resource-type, resources,
 * use-cases), because the first-section-is-tight assumption was baked into the
 * templates themselves — `template-resource-type.php`'s `$section_class()`
 * still emits it for the first section it renders. Restoring the normal top
 * padding here fixes all of them at once, and means a new page can keep
 * shipping `.iss-tight` on its first section without opening this seam again.
 *
 * Adjacent-sibling on purpose. Pages that dock a section nav to the hero put
 * `.iss-cap-nav-spacer` + `.iss-cap-nav` between the two, so they do not match
 * and keep §24d's deliberately smaller 28-36px dock seam. §24d and the
 * `#platform` patch (§16b) both out-specify this rule, so their tuned values
 * still win where they apply.
 */
.iss-page .iss-detail-hero + .iss-section.iss-tight {
	padding-top: clamp(48px, 7vw, 88px);
}
/*
 * The sanctioned escape hatch for both guards above. A section that genuinely
 * continues the thing above it — its own background is the same surface, so the
 * seam is meant to be invisible — opts out with `.iss-flush`, and gets a real
 * zero rather than a specificity war against the guards. Use it only when the
 * section paints that continuous background itself; if it sits on bare page
 * ground, it needs the padding and the guard is right.
 */
.iss-page .iss-section.iss-tight.iss-flush { padding-top: 0; }

.iss-page .iss-sec-head {
	max-width: 760px;
	display: grid;
	gap: 13px;
	margin-bottom: 38px;
}
.iss-page .iss-sec-head p { font-size: 17px; }
.iss-page .iss-sec-head.iss-center {
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
	justify-items: center;
}

/* ============================================================
   4. LABELS / KICKERS — the mono "utility voice"
   ------------------------------------------------------------
   Every label in this section is `text-transform: uppercase`, which destroys
   the one thing every ISS product name depends on: the lowercase leading "i".
   Left alone these labels paint "AI WITHIN IVOUCHER™" and "WHAT IASSIST™ ADDS".
   `iss_brand_case()` (inc/template-helpers.php) wraps the product name in this
   class, so the label keeps its uppercase utility voice while the brand keeps
   its own casing. Not scoped to one label — any uppercased label can contain a
   product name, and several do.
   ============================================================ */
/*
 * `letter-spacing: normal` as well as the casing: these labels are tracked, and
 * tracking a product name spaces its trademark off the end ("iAssist ™"). The
 * brand keeps its own typography inside a label that keeps its own.
 */
.iss-page .iss-brand { text-transform: none; letter-spacing: normal; }

/* ---- 4b. A typographic icon mark ---------------------------------- */
/*
 * `iss_icon( 'text:Q' )` returns this instead of an SVG, for the handoffs that
 * fill an icon plate with a character — Invoice & AP V11's capability cards are
 * "▣ ⇄ ! ✓ # Q" and its built-on-iApprove features are "↗ Q ✓ ◎". See the note
 * on `iss_icon()` for why those are type rather than glyphs.
 *
 * Deliberately NOT sized here. Every plate in the site already states the size
 * of the glyph it holds (`.iss-ci svg { width: 20px }`, `.iss-wf-ico svg`,
 * `.iss-bridge-theme-ico svg`, and the cards' own 16px override), and those
 * rules are what keep the plates consistent. So this sizes in `em` against the
 * plate's inherited font — `1.05em` lands a character at about the optical
 * weight of a 24px line glyph, which is smaller than its em box because a
 * glyph has no ascender/descender padding.
 *
 * `line-height: 1` and the grid centring on the plates do the vertical
 * alignment; without the explicit 1 a character sits low in its line box and
 * the mark reads as off-centre in a 40px plate even though the box is centred.
 */
.iss-page .iss-ico-text {
	/*
	 * SANS, not mono — and heavy. Both packages that fill a plate with a
	 * character set it in the sheet's own body stack: Supplier Lifecycle V15's
	 * `.step-icon` inherits `--iss-sans` at `font-weight: 900`, and Invoice &
	 * AP V11's `.capability-icon` is `font-weight: 950; font-size: 14px`.
	 * Neither asks for mono. It shipped mono because the mark was read as a
	 * utility label rather than as the glyph it stands in for, and at 700 the
	 * ＋ and the ✓ are visibly lighter than the line icons they sit beside —
	 * Danny caught it on the step strip (2026-09-13) against the Clean HTML.
	 *
	 * `Q` is the one that makes the case on its own: a mono Q is a code
	 * letterform, and these plates are drawing a wordmark's initial.
	 */
	font-family: var(--iss-sans);
	font-size: .95em;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
}

.iss-page .iss-kicker {
	font-family: var(--iss-mono);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--iss-blue);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
/*
 * THE TICK — the one piece of brand punctuation every label carries.
 *
 * On the HOMEPAGE this is deliberately NOT `currentColor`. The kicker's text
 * colour changes with its ground (blue on light, `.iss-sky` on the navy bands),
 * so a currentColor tick changed colour with it and the labels never read as
 * one family. Pinning it to the brand red gives the homepage a single accent
 * that repeats down the left edge of every section head, on light and dark
 * alike — and it is the same red as the Book a Demo button, so the accent and
 * the action share one colour.
 *
 * EVERY OTHER PAGE takes the opposite treatment — see the site-wide rule below.
 */
.iss-page .iss-kicker::before,
.iss-page .iss-eyebrow::before {
	content: "";
	flex: none;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: var(--iss-red);
}
/*
 * SITE-WIDE RULE (Danny, 2026-09-04): on every page that is NOT the homepage,
 * the accent dash is the label's OWN colour at 24px — blue beside blue text on
 * light sections, sky beside sky text on dark. Never a red dash next to blue.
 *
 * Every ISS Clean HTML draws it this way, and it had already been re-fixed
 * page-by-page (§27z-15 for `.iss-platform`, and again for the iAssist V10
 * pass) after eight red-dash-beside-blue-text eyebrows shipped on /platform/.
 * Doing it once here retires that whole class of bug: it caught 7/8 eyebrows
 * on /about/, 9/10 on /use-cases/, 7/12 on Business Process Workflows and 5/7
 * on /solutions/ the moment it landed.
 *
 * The homepage keeps its own red-dash system (above) and is explicitly excluded
 * — its 9 kickers are unchanged. Any remaining page-scoped copies of this rule
 * are now redundant but harmless; leave them until their page is next touched.
 */
.iss-page:not(.iss-front-page) .iss-kicker::before,
.iss-page:not(.iss-front-page) .iss-eyebrow::before {
	width: 24px;
	background: currentColor;
}
.iss-page .iss-kicker.iss-solo::before { display: none; }
.iss-page .iss-kicker.iss-sky { color: var(--iss-sky); }

.iss-page .iss-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--iss-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--iss-blue);
	padding: 8px 13px;
	background: rgba(12, 115, 201, .07);
	border: 1px solid rgba(12, 115, 201, .16);
	border-radius: 999px;
}

.iss-page .iss-lead {
	font-size: 18px;
	line-height: 1.55;
	color: var(--iss-muted);
	max-width: 64ch;
}
.iss-page .iss-lead-strong { font-weight: 700; color: var(--iss-ink); }

/* Gradient text tail, used on hero headlines. */
.iss-page .iss-grad {
	background: linear-gradient(115deg, var(--iss-blue), #22a7e8 55%, var(--iss-navy));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ============================================================
   5. BUTTONS / LINKS
   ============================================================ */
.iss-page .iss-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 22px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 15px;
	border: 1px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
	transition: transform .22s cubic-bezier(.2, .7, .2, 1), box-shadow .22s, background .22s, color .22s, border-color .22s;
}
.iss-page .iss-btn .iss-arw { transition: transform .22s cubic-bezier(.2, .7, .2, 1); }
.iss-page .iss-btn:hover .iss-arw { transform: translateX(3px); }
.iss-page .iss-btn-primary {
	background: linear-gradient(135deg, #1a86d6, var(--iss-blue-dark));
	color: #fff;
	box-shadow: 0 8px 22px -6px rgba(12, 115, 201, .6), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.iss-page .iss-btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 34px -8px rgba(12, 115, 201, .7);
	color: #fff;
}
.iss-page .iss-btn-ghost {
	background: var(--iss-card);
	border-color: var(--iss-line-strong);
	color: var(--iss-ink);
	box-shadow: var(--iss-e1);
}
.iss-page .iss-btn-ghost:hover { border-color: var(--iss-blue); color: var(--iss-blue); transform: translateY(-2px); }
.iss-page .iss-btn-white { background: #fff; color: var(--iss-navy); }
.iss-page .iss-btn-white:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(0, 0, 0, .4); color: var(--iss-navy); }
.iss-page .iss-btn-light { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28); color: #fff; }
.iss-page .iss-btn-light:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); color: #fff; }

/*
 * BOOK A DEMO — the one red button on the site.
 *
 * Blue is the body colour of this design system: every link, every kicker,
 * every hover state, the primary button, the tile borders. That makes a blue
 * "Book a Demo" indistinguishable from the dozen other blue affordances around
 * it. Red is the ISS mark's own accent, it appears nowhere else as a fill, and
 * it is the single highest-intent action on the site — so it gets the colour,
 * and nothing else does. Adding a second red button anywhere would spend the
 * distinction that makes this one work.
 *
 * Applied automatically: iss_render_cta() (inc/template-helpers.php) swaps
 * -primary/-white for this variant whenever a CTA points at the Book a Demo
 * page, so ISS retargeting an ACF link field in wp-admin is enough to move the
 * red treatment with it. Hand-written buttons carry the class directly.
 *
 * Works on both grounds by design — the light sections and the navy bands both
 * clear WCAG AA against white text on this red.
 */
.iss-page .iss-btn-demo {
	background: linear-gradient(135deg, var(--iss-red), var(--iss-red-deep));
	color: #fff;
	box-shadow: 0 8px 22px -6px rgba(237, 51, 66, .55), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.iss-page .iss-btn-demo:hover,
.iss-page .iss-btn-demo:focus-visible {
	background: linear-gradient(135deg, #e12836, #a91a26);
	transform: translateY(-2px);
	box-shadow: 0 16px 34px -8px rgba(237, 51, 66, .65);
	color: #fff;
}

.iss-page .iss-btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.iss-page .iss-inlink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--iss-blue);
	font-weight: 600;
	font-size: 15px;
}
.iss-page .iss-inlink .iss-arw { transition: transform .2s; }
.iss-page .iss-inlink:hover .iss-arw { transform: translateX(4px); }
.iss-page .iss-inlink:focus-visible { outline: 3px solid rgba(12, 115, 201, .35); outline-offset: 2px; }

/* ============================================================
   6. CHROME — breadcrumb bar, reading progress
   ============================================================ */
/*
 * The breadcrumb bar always sits directly on top of the hero, and since the V5
 * handoff made the hero dark it has to read as the hero's own top edge rather
 * than as a light strip above it. It paints a flat `--iss-navy-2` — the exact
 * colour the hero's 145deg gradient starts from in its top-left corner — so the
 * two meet without a visible seam, without either element having to know the
 * other's height (which is what a shared gradient would have required).
 */
.iss-page .iss-ctx {
	border-bottom: 0;
	background: var(--iss-navy-2);
	/*
	 * Bleeds with the hero. The7 wraps our content in `.wf-wrap`, which carries
	 * 50px of side padding, so without this the whole dark region is a 1180px
	 * panel inset from the window with white rails either side. Same geometry as
	 * `.iss-bleed` (§3) — see the note there for why these two elements take it
	 * intrinsically instead of carrying the class.
	 */
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
}
.iss-page .iss-ctx-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 46px;
	padding: 8px 0;
	font-family: var(--iss-mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #6f8ca0;
}
.iss-page .iss-ctx-in a { color: #b7cedd; }
.iss-page .iss-ctx-in a:hover { color: var(--iss-sky); }
/*
 * The separator between crumbs — spaced and dimmed so it reads as punctuation
 * rather than as another crumb, and so a legacy title containing a slash
 * ("Agile BPI / Does Maverick Spend…") can't be misread as two more.
 *
 * Lives here, not in iss-legacy.css, where it sat until 2026-09-04. That file
 * loads only on the five legacy templates, and once iss_render_breadcrumb()
 * became the one place the bar is produced, every designed page started emitting
 * this element with no rule to match — "SOLUTIONS/SUPPLIER LIFECYCLE
 * MANAGEMENT", tight and undimmed. The bar itself is styled in this section;
 * its separator belongs with it.
 */
.iss-page .iss-ctx-sep {
	display: inline-block;
	margin: 0 9px;
	color: var(--iss-line-strong);
}

.iss-page .iss-progress-track {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	z-index: 40;
	background: transparent;
}
.iss-page .iss-progress-bar {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--iss-blue), var(--iss-sky));
	transition: width .1s linear;
}

/* ============================================================
   7. HERO
   ============================================================ */
/*
 * THE HERO IS DARK — site-wide, per the V5 Solution-page handoff, which ISS
 * approved as the scheme for every page rather than for its own page alone.
 *
 * This is the single switch for that. Every ISS template puts `.iss-detail-hero`
 * on its hero (17 of them), so painting it here converts all of them at once
 * and no template needs its own copy. What each hero puts in its right-hand
 * column WAS designed for a light ground, though — light cards, spec rows,
 * search fields — so §7b below re-skins those surfaces as glass, scoped inside
 * this selector so the identical components stay light everywhere else on the
 * page. When a new hero lands: put shared components in §7b, and page-unique
 * ones in that page's own stylesheet (§7b explains why the split is forced).
 */
.iss-page .iss-detail-hero {
	position: relative;
	/*
	 * FULL BLEED — the gradient has to reach both window edges, and the content
	 * inside has to centre on the window, exactly as the homepage hero does.
	 *
	 * The7 wraps our content in `.wf-wrap` (50px of side padding), so left alone
	 * the hero paints as an inset panel with white rails. Same geometry as
	 * `.iss-bleed` (§3), taken intrinsically — see the note there.
	 *
	 * `padding-block`, NOT the `padding` shorthand: the shorthand would set
	 * `padding-inline: 0` and cancel the bleed's own inline padding, which is
	 * what pulls `.iss-wrap` back to the centre of the window.
	 */
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
	padding-block: clamp(44px, 5vw, 82px) clamp(56px, 6vw, 104px);
	color: #fff;
	background:
		radial-gradient(circle at 77% 26%, rgba(57, 195, 230, .17), transparent 29%),
		radial-gradient(circle at 16% 88%, rgba(31, 139, 224, .17), transparent 31%),
		linear-gradient(145deg, var(--iss-navy-2), var(--iss-navy) 61%, var(--iss-navy-3));
	overflow: hidden;
}
/* Decorative ring bleeding off the bottom-right corner. */
.iss-page .iss-detail-hero::after {
	content: "";
	position: absolute;
	right: -110px;
	bottom: -160px;
	width: 430px;
	height: 430px;
	border-radius: 50%;
	border: 1px solid rgba(143, 226, 245, .08);
	pointer-events: none;
}
.iss-page .iss-detail-hero > .iss-wrap { position: relative; z-index: 1; }

.iss-page .iss-hero-2col {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(32px, 4vw, 58px);
	align-items: center;
}
.iss-page .iss-detail-hero h1 { margin: 18px 0 14px; max-width: 22ch; }
.iss-page .iss-hero-2col h1 { max-width: none; }

/* ---- 7a. Type + actions inverted for the dark ground ------------------- */
.iss-page .iss-detail-hero h1,
.iss-page .iss-detail-hero h2,
.iss-page .iss-detail-hero h3,
.iss-page .iss-detail-hero h4 { color: #fff; }
.iss-page .iss-detail-hero p,
.iss-page .iss-detail-hero .iss-lead { color: #d6e6f0; }

/*
 * The eyebrow drops its pill on dark. On a light page the pill is what separates
 * the label from the ground; on the hero the ground does that on its own, and the
 * handoff's own hero uses a bare cyan rule + caps instead.
 */
.iss-page .iss-detail-hero .iss-eyebrow {
	padding: 0;
	background: none;
	border: 0;
	color: var(--iss-sky);
}
.iss-page .iss-detail-hero .iss-eyebrow::before,
.iss-page .iss-detail-hero .iss-kicker::before {
	width: 24px;
	background: currentColor;
}
.iss-page .iss-detail-hero .iss-kicker { color: var(--iss-sky); }

/*
 * The headline accent goes FLAT cyan here, not the light gradient the dark
 * form-cta hero uses (.iss-grad-light). The handoff accents a run of words
 * mid-sentence ("QAD vouchers—"), and a gradient across a mid-sentence phrase
 * reads as a rendering artefact rather than as emphasis.
 */
.iss-page .iss-detail-hero .iss-grad {
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	-webkit-text-fill-color: var(--iss-sky);
	color: var(--iss-sky);
}

/*
 * Book a Demo goes WHITE inside the hero. Site-wide it is red — see the token
 * comment on --iss-red — and iss_demo_cta_class() promotes any primary CTA
 * pointing at the demo page to that red variant automatically, from one place,
 * for every template. Rather than thread a "but not in the hero" exception
 * through that helper, the hero just restyles the variant it receives. So the
 * red-follows-the-destination rule keeps working untouched, and the handoff's
 * white-on-navy hero button is a pure presentation change.
 */
.iss-page .iss-detail-hero .iss-btn-demo,
.iss-page .iss-detail-hero .iss-btn-primary,
.iss-page .iss-detail-hero .iss-btn-white {
	background: #fff;
	border-color: #fff;
	color: var(--iss-navy-2);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
}
.iss-page .iss-detail-hero .iss-btn-demo:hover,
.iss-page .iss-detail-hero .iss-btn-demo:focus-visible,
.iss-page .iss-detail-hero .iss-btn-primary:hover,
.iss-page .iss-detail-hero .iss-btn-white:hover {
	background: #fff;
	border-color: #fff;
	color: var(--iss-navy-2);
	transform: translateY(-2px);
	box-shadow: 0 16px 34px rgba(0, 0, 0, .26);
}
.iss-page .iss-detail-hero .iss-btn-ghost {
	border-color: rgba(255, 255, 255, .28);
	background: rgba(255, 255, 255, .04);
	color: #fff;
}
.iss-page .iss-detail-hero .iss-btn-ghost:hover,
.iss-page .iss-detail-hero .iss-btn-ghost:focus-visible {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .45);
	color: #fff;
	transform: translateY(-2px);
}
.iss-page .iss-detail-hero .iss-inlink { color: var(--iss-sky); }

.iss-page .iss-proof-chips { display: grid; gap: 11px; margin-top: 22px; }
.iss-page .iss-proof-chips li {
	display: flex;
	gap: 11px;
	align-items: center;
	font-weight: 600;
	color: var(--iss-muted);
	font-size: 15px;
}
.iss-page .iss-hero-formerly {
	margin-top: 18px;
	font-size: 13px;
	color: var(--iss-muted-2);
}
.iss-page .iss-hero-areas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.iss-page .iss-hero-areas span {
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	font-size: 12px;
	font-weight: 600;
	color: #d7e9f2;
}
.iss-page .iss-hero-tagline { margin-top: 14px; font-size: 13px; color: #9fb7c7; }
.iss-page .iss-tick {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 7px;
	background: rgba(12, 115, 201, .1);
	display: grid;
	place-items: center;
	color: var(--iss-blue);
}
.iss-page .iss-tick svg { width: 12px; height: 12px; }

/* Fact / spec bar */
.iss-page .iss-factbar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.iss-page .iss-fact {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 12px 18px;
	border-radius: 14px;
	background: var(--iss-card);
	border: 1px solid var(--iss-line);
	box-shadow: var(--iss-e1);
}
.iss-page .iss-fact .iss-fl {
	font-family: var(--iss-mono);
	font-size: 9.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--iss-muted-2);
}
.iss-page .iss-fact .iss-fv { font-weight: 700; font-size: 14px; color: var(--iss-ink); }

/* ============================================================
   7b. HERO SURFACES ON DARK
   ------------------------------------------------------------
   Everything below re-skins a component that was designed for a light ground
   but now lands inside the dark hero. All of it is scoped under
   `.iss-detail-hero`, so the same components stay exactly as they were in every
   other section of every page — this is a hero-local repaint, not a redefinition.

   ONLY components defined in THIS file belong here. Per-template stylesheets
   (about.css, use-cases.css, ai-layer.css, resources.css, search.css,
   iss-legacy.css) are enqueued at priority 41 against this file's 40, so a
   `.iss-page .iss-detail-hero .iss-x` rule written here ties on specificity with
   their own `.iss-page.iss-about .iss-x` and then LOSES on load order. Each of
   those files carries its own "hero on dark" block instead — search for that
   heading when a per-page hero surface needs repainting.
   ============================================================ */

/* --- Shared: hero bullet list + tick ----------------------------------- */
.iss-page .iss-detail-hero .iss-proof-chips li { color: #dceaf3; font-size: 14px; }
.iss-page .iss-detail-hero .iss-tick {
	border-radius: 50%;
	background: rgba(57, 195, 230, .16);
	color: var(--iss-sky);
}
.iss-page .iss-detail-hero .iss-hero-formerly { color: #9fb7c7; }

/* --- Shared: the fact / spec bar (overview, resource, snapshot, client,
       event) ------------------------------------------------------------- */
.iss-page .iss-detail-hero .iss-fact {
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .14);
	box-shadow: none;
}
.iss-page .iss-detail-hero .iss-fact .iss-fl { color: #a9c5d5; }
.iss-page .iss-detail-hero .iss-fact .iss-fv { color: #fff; }

/*
 * --- Shared: the flow card (solution, about, overview, use-cases, ai-layer)
 *
 * The card becomes glass rather than white. Its shell also drops the blue
 * radial glow it casts on a light page: that glow exists to lift a white card
 * off a white ground, and on navy it turned into a visible grey smudge behind
 * the card instead.
 */
.iss-page .iss-detail-hero .iss-flow-card {
	background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .045));
	border: 1px solid rgba(255, 255, 255, .14);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
	backdrop-filter: blur(10px);
}
.iss-page .iss-detail-hero .iss-flow-card-shell::before { display: none; }
.iss-page .iss-detail-hero .iss-flow-card .iss-fc-title { color: #fff; }
.iss-page .iss-detail-hero .iss-flow-card .iss-live { color: #bfeaf5; }
.iss-page .iss-detail-hero .iss-flow-card .iss-pstep { color: #cbe1ec; }
.iss-page .iss-detail-hero .iss-flow-card .iss-pdisc {
	background: rgba(57, 195, 230, .13);
	border-color: rgba(143, 226, 245, .28);
	color: var(--iss-sky);
}
.iss-page .iss-detail-hero .iss-flow-card .iss-pnode.iss-active .iss-pdisc {
	background: var(--iss-blue);
	border-color: var(--iss-blue-2);
	color: #fff;
}
.iss-page .iss-detail-hero .iss-flow-card .iss-pdesc {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .12);
	color: #d6e6f0;
}
.iss-page .iss-detail-hero .iss-flow-card .iss-pdesc b { color: #fff; }

/* --- Client / snapshot: the mono logo mark -------------------------- */
.iss-page .iss-detail-hero .iss-client-mark {
	background: rgba(255, 255, 255, .95);
	border-color: rgba(255, 255, 255, .3);
}

/* ---- 7c. HERO WORKFLOW CARD ------------------------------------------
   The V5 hero's compressed workflow visual: a QAD system-of-record box over
   numbered stage rows with status badges, closed out by capability chips. Born
   dark, so unlike §7b it needs no light-ground counterpart.
   ---------------------------------------------------------------------- */
.iss-page .iss-hero-wf {
	position: relative;
	padding: 23px;
	border-radius: 24px;
	border: 1px solid rgba(255, 255, 255, .14);
	background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .045));
	box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
	backdrop-filter: blur(10px);
}
/* Light rake across the top-left corner, so the glass reads as a surface. */
.iss-page .iss-hero-wf::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: 24px;
	background: linear-gradient(135deg, rgba(143, 226, 245, .24), transparent 42%);
	pointer-events: none;
}
.iss-page .iss-hero-wf > * { position: relative; z-index: 1; }

.iss-page .iss-hero-wf-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 20px;
}
.iss-page .iss-hero-wf-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--iss-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--iss-sky);
}
.iss-page .iss-hero-wf-kicker::before {
	content: "";
	flex: none;
	width: 19px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

/* Width lives in §7h — "about half the card, centred" — not here. */
.iss-page .iss-hero-wf-system {
	margin: 3px auto 19px;
	padding: 14px 18px;
	text-align: center;
	border: 1px solid rgba(143, 226, 245, .35);
	border-radius: 14px;
	background: rgba(8, 31, 49, .52);
}
.iss-page .iss-hero-wf-system strong { display: block; font-size: 23px; color: #fff; letter-spacing: -.02em; }
.iss-page .iss-hero-wf-system span { display: block; margin-top: 2px; font-size: 11px; color: #a9c8d9; }

.iss-page .iss-hero-wf-stack { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.iss-page .iss-hero-wf-item {
	display: grid;
	grid-template-columns: 31px 1fr auto;
	gap: 11px;
	align-items: center;
	padding: 11px 12px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, .08);
	background: rgba(255, 255, 255, .07);
}
.iss-page .iss-hero-wf-num {
	width: 31px;
	height: 31px;
	display: grid;
	place-items: center;
	border-radius: 9px;
	background: rgba(57, 195, 230, .13);
	color: var(--iss-sky);
	font-family: var(--iss-mono);
	font-size: 12px;
	font-weight: 700;
}
.iss-page .iss-hero-wf-text { min-width: 0; }
.iss-page .iss-hero-wf-text b { display: block; font-size: 13px; color: #fff; }
.iss-page .iss-hero-wf-text small { display: block; margin-top: 1px; font-size: 10.5px; color: #a9c5d5; }
.iss-page .iss-hero-wf-status {
	font-family: var(--iss-mono);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #82dfc0;
	white-space: nowrap;
}

.iss-page .iss-hero-wf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.iss-page .iss-hero-wf-chips span {
	padding: 6px 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	color: #cbe1ec;
	font-family: var(--iss-mono);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .055em;
	text-transform: uppercase;
}

/* ============================================================
   8. PIPELINE — the signature "how it works" infographic
   ============================================================ */
.iss-page .iss-flow-card {
	position: relative;
	background: linear-gradient(180deg, #fff, #f7fbff);
	border: 1px solid var(--iss-line-strong);
	border-radius: var(--iss-r-lg);
	box-shadow: var(--iss-e3);
	padding: 24px;
}
.iss-page .iss-flow-card-shell { position: relative; }
.iss-page .iss-flow-card-shell::before {
	content: "";
	position: absolute;
	inset: -10% -6% -14% -4%;
	background: radial-gradient(60% 60% at 65% 25%, rgba(12, 115, 201, .32), transparent 70%);
	filter: blur(30px);
	pointer-events: none;
}
.iss-page .iss-fc-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 18px; }
.iss-page .iss-fc-title {
	font-family: var(--iss-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--iss-muted-2);
	font-weight: 600;
}
.iss-page .iss-live {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--iss-mono);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--iss-blue);
	font-weight: 600;
	white-space: nowrap;
}
.iss-page .iss-live .iss-pulse {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--iss-green);
	animation: iss-pulse 2s infinite;
}
@keyframes iss-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, .5); }
	70%  { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); }
	100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

/* ---- 7f. `.iss-live-tile` — the QAD stamp on a hero infographic ---------
 *
 * SITE-WIDE RULE, Danny 2026-09-06, RESHAPED 2026-09-13. A hero infographic
 * whose status badge names QAD wears a MINT PILL rather than the generic
 * `.iss-live` line of blue mono text above: a single line, a green dot beside
 * dark-green words, on the same pale mint ground the homepage's stamp used.
 *
 * WHY IT IS A PILL AND NOT THE SQUARE IT SHIPPED AS. The first cut was the
 * homepage's tile verbatim — a 52-88px rounded square with the words stacked
 * inside and the dot above them. That shape is the root of both layout bugs
 * this component has had: it is far and away the tallest thing in a header rail
 * whose only other occupant is a one-line mono kicker, so it sets the height of
 * that whole row and strands 50-70px of empty card between the kicker and the
 * card's lead content. §7h first tried to solve that by lifting the lead content
 * up BESIDE the stamp, which cost the QAD plate its centred position; Danny's
 * call on 2026-09-13 is that the plate's centred row is the part worth keeping,
 * so the stamp gives up its height instead. At ~26px tall it is now shorter than
 * nothing else in the rail and the row is simply a row.
 *
 * You should have to do NOTHING on a new page. `iss_live_badge()`
 * (inc/template-helpers.php) is the only thing that adds this class, and it
 * adds it on the label's own text — so a hero badge reading "Live in QAD" or
 * "Real-Time QAD Integration" gets the pill and one reading
 * "Human-in-the-Loop" or "Real time" keeps the inline badge. Render a hero
 * badge through that helper and stop; don't hand-roll `<span class="iss-live">`
 * and don't add this class yourself.
 *
 * CASING IS STILL THE FIELD'S, not this rule's — `text-transform: none`, same
 * as the square had. `hero-qad-stamp-casing.php` normalised the stored labels
 * to "Live in QAD" / "Real-Time QAD Integration" on 2026-09-06 precisely so the
 * page renders what an editor sees in wp-admin. Don't add `uppercase` here to
 * match the package mockup's `LIVE IN QAD`; that would silently shout
 * "REAL-TIME QAD INTEGRATION" on Invoice & AP and re-hide the field's own
 * casing, which is the drift that migration existed to end.
 *
 * The dot has no pulse. On a live status line an animation means "watch this";
 * on a stamp it is noise. `.iss-live`'s own `iss-pulse` animation is switched
 * off below rather than the class being dropped, because the markup helper
 * emits one `<span class="iss-pulse">` for both kinds of badge.
 *
 * SIZING. The pill is `width: auto` — it measures its own label, so the two
 * label lengths need no reconciling and there is no square for a short one to
 * rattle around in.
 *
 * IT IS ALLOWED TO WRAP, and the `white-space: normal` that does it is a
 * deliberate override of `.iss-live`'s `nowrap` rather than an oversight. The
 * card is a query container (§7g), so `nowrap` content cannot push it wider —
 * it overflows the card's right edge instead, silently, which is the bug §7g
 * already had to fix for `/platform/`'s breadth pills. Invoice & AP is the case
 * that proves it: "Real-Time QAD Integration" is a 207px pill beside a 179px
 * kicker, which fits a 456px card and does not fit a 387px one. Wrapping to two
 * lines there is the only version that stays inside the card at every width.
 * The helper's non-breaking hyphen keeps "Real-Time" whole when it does, and
 * `text-wrap: balance` splits the two lines evenly — see the helper's docblock.
 *
 * (Note that `text-wrap` would have forced this hand anyway: it shares the
 * `text-wrap-mode` longhand with `white-space`, so `balance` re-enables wrapping
 * whatever `.iss-live` asked for. Declaring `normal` here makes that visible
 * instead of leaving it as a side effect two properties apart.)
 *
 * The selector list carries the two places a lower-specificity `.iss-live-tile`
 * would lose: §7a's `.iss-detail-hero .iss-flow-card .iss-live` colour, and
 * §21's `.iss-hero-breadth-platform .iss-live`.
 */
.iss-page .iss-live.iss-live-tile,
.iss-page .iss-detail-hero .iss-flow-card .iss-live.iss-live-tile,
.iss-page .iss-hero-breadth-platform .iss-live.iss-live-tile {
	flex: 0 1 auto;
	box-sizing: border-box;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: auto;
	min-width: 0;
	max-width: 100%;
	min-height: 0;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid rgba(143, 226, 245, .22);
	background: linear-gradient(180deg, rgba(232, 255, 248, .94), rgba(212, 246, 234, .92));
	box-shadow: 0 8px 20px rgba(16, 145, 100, .16);
	font-family: inherit;
	font-size: 12px;
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
	text-transform: none;
	white-space: normal;
	text-wrap: balance;
	color: #087b57;
}
.iss-page .iss-live.iss-live-tile .iss-pulse {
	flex: none;
	width: 7px;
	height: 7px;
	margin-bottom: 0;
	background: #19c98a;
	box-shadow: 0 0 0 4px rgba(25, 201, 138, .14);
	animation: none;
}

/* ---- 7g. The infographic header rail scales with its CARD, not the window
 *
 * SITE-WIDE RULE, Danny 2026-09-06. A hero infographic's header — the mono
 * kicker on the left, §7f's QAD stamp on the right — sized itself in px and
 * `vw`. Both are the wrong measure for this component, and they fail in the
 * same direction, because the card is at its WIDEST exactly when the window is
 * at its NARROWEST: below ~1000px the hero stops being two columns and the card
 * goes the full width of the wrap.
 *
 * So at 768px the stamp sat on its `4.4vw` floor — 61x55 inside a 688px card —
 * with 415px of empty rail between it and a 10px kicker. That is the "too much
 * space, and the live icon is way too small" Danny reported off a tablet. It was
 * never mobile-only either: at 1280px the card is 508px wide and the stamp was
 * still bottomed out on the same floor.
 *
 * The fix is the homepage's own system, which never had this problem: make the
 * card a query container and size the header in `cqw`, so it tracks the card it
 * sits in rather than the window around it. §7f's note said `cqw` couldn't be
 * used here because this stylesheet declared no container — the first rule below
 * is what changes that. It is scoped to the three infographic shells and nothing
 * else, and `cqw` appears nowhere else in this file, so no existing declaration
 * quietly changes meaning.
 *
 * EVERY FLOOR IS TODAY'S DESKTOP VALUE, deliberately. At the two-column widths
 * the card's content box is 354-462px and every clamp below resolves to its
 * minimum, so the reviewed desktop hero renders exactly as it did. Only the
 * stacked card — the one that was broken — moves.
 *
 * A BROWSER WITHOUT CONTAINER QUERIES loses nothing. `container-type` is
 * ignored, `cqw` is then an invalid value, and every declaration below is
 * dropped whole — leaving §7f's px/vw sizing, which is exactly what shipped
 * before this. Nothing here needs an @supports guard.
 *
 * THE HOMEPAGE IS EXCLUDED, and not for tidiness. Its card is already inside
 * `.iss-hero-card`'s container (front-page.css §7), and making `.iss-hero-wf` a
 * container as well would re-resolve every v44 `cqw` against the card's content
 * box instead — ~48px narrower — silently shrinking an approved hero.
 */
.iss-page:not(.iss-front-page) .iss-hero-wf,
.iss-page:not(.iss-front-page) .iss-hero-breadth,
.iss-page:not(.iss-front-page) .iss-flow-card {
	container-type: inline-size;
}

/*
 * The stamp. The selector list mirrors §7f's, one class deeper each, because
 * that is what it takes to win against §7a's and §21's own copies — see the
 * note there.
 *
 * Reshaped with §7f on 2026-09-13: the pill has no square to hold, so what
 * scales is its type, its padding and its dot, and `min-width`/`min-height`
 * are gone rather than clamped — a one-line pill that is forced 52px wide is
 * back to being a box with space in it. Every floor is the desktop value, so
 * the two-column hero (card content box 454-456px, where each clamp resolves
 * to its minimum) renders at exactly the sizes §7f declares; only the stacked
 * card, which is the one that was ever too small, moves.
 */
.iss-page:not(.iss-front-page) .iss-live.iss-live-tile,
.iss-page:not(.iss-front-page) .iss-detail-hero .iss-flow-card .iss-live.iss-live-tile,
.iss-page:not(.iss-front-page) .iss-hero-breadth-platform .iss-live.iss-live-tile {
	padding: clamp(6px, 1.3cqw, 8px) clamp(12px, 2.6cqw, 16px);
	font-size: clamp(12px, 2.5cqw, 14px);
}
.iss-page:not(.iss-front-page) .iss-live.iss-live-tile .iss-pulse,
.iss-page:not(.iss-front-page) .iss-detail-hero .iss-flow-card .iss-live.iss-live-tile .iss-pulse,
.iss-page:not(.iss-front-page) .iss-hero-breadth-platform .iss-live.iss-live-tile .iss-pulse {
	width: clamp(7px, 1.5cqw, 9px);
	height: clamp(7px, 1.5cqw, 9px);
	box-shadow: 0 0 0 clamp(4px, .85cqw, 6px) rgba(25, 201, 138, .14);
}

/*
 * ...and the label at the other end of the rail, which is the other half of
 * "too much space": a 10px kicker marooned at one end of a 640px row reads as a
 * layout that broke, not as a header. It grows with the card exactly as the
 * stamp does, accent dash included.
 */
.iss-page:not(.iss-front-page) .iss-hero-wf-top .iss-hero-wf-kicker { font-size: clamp(10px, 2.1cqw, 13px); }
.iss-page:not(.iss-front-page) .iss-hero-breadth-top .iss-hero-wf-kicker { font-size: clamp(10.5px, 2.2cqw, 13.5px); }
.iss-page:not(.iss-front-page) .iss-fc-top .iss-fc-title { font-size: clamp(11px, 2.3cqw, 14px); }
.iss-page:not(.iss-front-page) .iss-hero-wf-top .iss-hero-wf-kicker::before,
.iss-page:not(.iss-front-page) .iss-hero-breadth-top .iss-hero-wf-kicker::before { width: clamp(19px, 4cqw, 30px); }
/*
 * The generic inline badge (§7e) rides along. §7f leaves what it IS alone — a
 * pulsing dot beside blue mono text, for a callout that doesn't name QAD — but
 * a 10px line stranded at the end of a 640px rail is the same bug as a 61px
 * stamp, so it takes the same treatment.
 */
.iss-page:not(.iss-front-page) .iss-hero-wf-top .iss-live:not(.iss-live-tile),
.iss-page:not(.iss-front-page) .iss-hero-breadth-top .iss-live:not(.iss-live-tile),
.iss-page:not(.iss-front-page) .iss-fc-top .iss-live:not(.iss-live-tile) { font-size: clamp(10px, 2cqw, 12px); }

/*
 * ...and one consequence of the card becoming a container, which is a fix and
 * not a cost. `/platform/`'s three breadth cards were being SIZED BY a `nowrap`
 * pill inside them: at 320px the hero card measured 366px against a 280px wrap
 * and its right edge sat 66px off-screen, silently clipped. Containment stops
 * the content pushing the card out — so the pill has to be allowed to wrap
 * instead, at the widths where it can't fit. Keyed on the CARD, so it costs
 * nothing at any width where the pill already fits (390px up).
 */
@container (max-width: 300px) {
	.iss-page .iss-hero-breadth .iss-hero-breadth-pill,
	.iss-page.iss-platform .iss-hero-breadth .iss-plat-engine-pill {
		white-space: normal;
	}
}

/* ---- 7h. The QAD header is TWO ROWS: kicker + stamp, then the plate ------
 *
 * SITE-WIDE RULE, Danny 2026-09-13. This section used to do the opposite, and
 * the history matters because the obvious fix here is to put it back.
 *
 * §7f gave the stamp its shape and §7g its size, and the layout was still
 * wrong: a 52-88px mint SQUARE is the tallest thing in a header rail whose only
 * other occupant is a one-line mono kicker, so it set the height of that whole
 * row and everything under it started 70-90px further down than the kicker it
 * sits beside — "the formatting currently looks broken up" (Danny, 2026-09-07).
 * §7h's answer was to lift the card's lead content UP beside the stamp: the card
 * became a two-column grid, the rail `display: contents`, the stamp a corner
 * stamp spanning two rows, and the QAD plate a full-width cell in column 1.
 *
 * That bought a tight header at the cost of the plate's centred row, which is
 * the thing the package actually draws — and the plate is the more important
 * half. Danny, 2026-09-13, off /solutions/purchasing/: the stamp belongs in a
 * ROW with the kicker, and the QAD plate belongs on its OWN row below it, about
 * half the card wide and centred. So the grid is gone, the rail is §7c's flex
 * row again, and what changed instead is the STAMP — §7f reshapes it from a
 * square into a ~26px one-line pill, which is what makes a plain row work where
 * it didn't in September: the rail is now the height of its kicker, so there is
 * no dead band under it for the plate to clear.
 *
 * WHAT THIS LEAVES THIS SECTION DOING. Almost nothing, deliberately — the two
 * rows are §7c's own `.iss-hero-wf-top` (flex, space-between, align-items
 * center) and `.iss-hero-wf-system` (`margin-inline: auto`), and a rule that
 * restates them would just be a second place to keep them in sync. What is here
 * is the plate's WIDTH, which did change, and the one narrow-card guard the
 * pill needs.
 *
 * THE PLATE IS A PERCENTAGE, not the 270px cap it carried before, and that is
 * the request read literally: "about 50% width and center aligned". Against a
 * 456px card content box that is 228px, where 270px was 59% and read as a plate
 * that happened to be narrower than the card rather than a deliberate half. The
 * package's own `.qad-box` is 255px in a 481px card — 53% — so a proportion is
 * also what the mockup is describing; it just says it in pixels because its card
 * is one width.
 *
 * READ THE EXPRESSION OUTSIDE-IN: half the card, floored at 220px so the
 * proportion can't collapse on a phone (half of a 272px card is 136px and the
 * system note has nowhere to go), then capped at the card itself so the FLOOR
 * can't overflow a card narrower than it is. That last `min()` is not belt and
 * braces — Invoice & AP's card content box is 202px at a 320px window, where a
 * `min-width: 220px` floor put 18px of plate outside the card. `min-width`
 * cannot be capped by `max-width`, which is why this is one `width` expression
 * and not three properties.
 *
 * WHY NOT `:has(.iss-live-tile)`. §7h used to key every rule on the stamp
 * because it was re-laying out the whole card around it. The plate's width has
 * nothing to do with the badge beside it, and `.iss-hero-wf-system` has exactly
 * one render site (`single-solution.php`, the hero card's `system_title`) on
 * exactly three pages — Purchasing, Invoice & AP, Supplier Lifecycle — all three
 * of which carry the stamp anyway. A `:has()` here would be specificity spent on
 * a distinction no page makes. (The customers hero and the homepage both use
 * `.iss-hero-wf`, but neither renders a `-system` plate, so neither is touched.)
 *
 * `tests/hero-qad-stamp-float.spec.js` asserts the GEOMETRY of all of this
 * rather than the classes, across all four stamped pages at seven widths: the
 * stamp shares a band with the KICKER (not with the lead element, which is what
 * it asserted before), the plate is centred in the card and roughly half its
 * width, and nothing overlaps at any width.
 */
.iss-page .iss-hero-wf-system {
	width: min(100%, max(50%, 220px));
}

.iss-page .iss-pipeline {
	display: grid;
	grid-template-columns: repeat(var(--iss-steps, 4), 1fr);
	gap: 0;
	position: relative;
	margin-top: 6px;
}
.iss-page .iss-pnode {
	display: grid;
	justify-items: center;
	gap: 10px;
	padding: 6px 4px;
	position: relative;
	text-align: center;
}
.iss-page .iss-pnode:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 26px;
	left: calc(50% + 30px);
	right: calc(-50% + 30px);
	height: 2px;
	background: repeating-linear-gradient(90deg, var(--iss-line-strong) 0 6px, transparent 6px 12px);
}
.iss-page .iss-pnode.iss-done:not(:last-child)::after { background: linear-gradient(90deg, var(--iss-blue), var(--iss-sky)); }
.iss-page .iss-pdisc {
	width: 52px;
	height: 52px;
	border-radius: 15px;
	display: grid;
	place-items: center;
	background: #eef6ff;
	color: var(--iss-blue);
	position: relative;
	z-index: 1;
	transition: .3s;
	box-shadow: inset 0 0 0 1px #d3e6f7;
}
.iss-page .iss-pdisc svg { width: 22px; height: 22px; }
.iss-page .iss-pnode.iss-active .iss-pdisc {
	background: linear-gradient(135deg, var(--iss-blue), var(--iss-blue-dark));
	color: #fff;
	transform: scale(1.08);
	box-shadow: 0 12px 24px -6px rgba(12, 115, 201, .55);
}
.iss-page .iss-pstep {
	font-family: var(--iss-mono);
	font-size: 10px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--iss-muted-2);
	font-weight: 600;
}
.iss-page .iss-pnode.iss-active .iss-pstep { color: var(--iss-ink); }
.iss-page .iss-pdesc {
	margin-top: 16px;
	padding: 14px 16px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid var(--iss-line);
	font-size: 13.5px;
	color: var(--iss-muted);
	line-height: 1.5;
	min-height: 66px;
}
.iss-page .iss-pdesc b { color: var(--iss-ink); }

/* Full-width "how it works" pipeline */
.iss-page .iss-flow-big {
	background: var(--iss-card);
	border: 1px solid var(--iss-line);
	border-radius: var(--iss-r-lg);
	box-shadow: var(--iss-e2);
	padding: clamp(28px, 4vw, 44px);
}
.iss-page .iss-flow-big .iss-pdisc { width: 64px; height: 64px; border-radius: 18px; }
.iss-page .iss-flow-big .iss-pdisc svg { width: 26px; height: 26px; }
.iss-page .iss-flow-big .iss-pnode:not(:last-child)::after { top: 32px; left: calc(50% + 38px); right: calc(-50% + 38px); }
.iss-page .iss-flow-big h4 { margin: 14px 0 8px; font-size: 15px; }
.iss-page .iss-pnote { font-size: 13px; color: var(--iss-muted); line-height: 1.45; max-width: 22ch; margin-inline: auto; }

/* Caption strip under a pipeline — the "so what" line. */
.iss-page .iss-flow-foot {
	margin-top: 26px;
	padding: 16px 20px;
	border-radius: 16px;
	background: linear-gradient(135deg, #f8fbff, var(--iss-bg-tint));
	border: 1px solid rgba(12, 115, 201, .18);
	text-align: center;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--iss-ink);
	line-height: 1.5;
}

/* ============================================================
   9. BEFORE / AFTER SPLIT — red problem vs navy solution
   ============================================================ */
.iss-page .iss-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.iss-page .iss-pcard { border-radius: var(--iss-r-lg); padding: 30px; position: relative; overflow: hidden; }
.iss-page .iss-pcard.iss-bad { background: var(--iss-card); border: 1px solid var(--iss-line); box-shadow: var(--iss-e1); }
.iss-page .iss-pcard.iss-good {
	background: linear-gradient(165deg, #0f2c49, var(--iss-navy-2));
	color: #fff;
	box-shadow: var(--iss-e3);
}
.iss-page .iss-pcard.iss-good::after {
	content: "";
	position: absolute;
	right: -40px;
	top: -40px;
	width: 190px;
	height: 190px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(12, 115, 201, .5), transparent 70%);
}
.iss-page .iss-pcard.iss-good h3 { color: #fff; }
.iss-page .iss-ph { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; position: relative; z-index: 1; }
.iss-page .iss-badge-ico {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	display: grid;
	place-items: center;
	flex: none;
}
.iss-page .iss-badge-ico svg { width: 18px; height: 18px; }
.iss-page .iss-bad .iss-badge-ico { background: rgba(237, 51, 66, .1); color: var(--iss-red); }
.iss-page .iss-good .iss-badge-ico { background: rgba(143, 226, 245, .16); color: var(--iss-sky); }

.iss-page .iss-flist { display: grid; gap: 13px; position: relative; z-index: 1; }
.iss-page .iss-flist li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; }
.iss-page .iss-bad .iss-flist li { color: var(--iss-muted); }
.iss-page .iss-good .iss-flist li { color: rgba(255, 255, 255, .82); }
.iss-page .iss-mk {
	flex: none;
	width: 19px;
	height: 19px;
	border-radius: 6px;
	display: grid;
	place-items: center;
	margin-top: 1px;
}
.iss-page .iss-mk svg { width: 11px; height: 11px; }
.iss-page .iss-bad .iss-mk { background: rgba(237, 51, 66, .1); color: var(--iss-red); }
.iss-page .iss-good .iss-mk { background: rgba(143, 226, 245, .18); color: var(--iss-sky); }

/* ============================================================
   10. CAPABILITY ICON GRID
   ============================================================ */
.iss-page .iss-cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.iss-page .iss-cap {
	background: var(--iss-card);
	border: 1px solid var(--iss-line);
	border-radius: var(--iss-r);
	padding: 22px;
	box-shadow: var(--iss-e1);
	transition: transform .25s, box-shadow .25s, border-color .25s;
}
.iss-page .iss-cap:hover { transform: translateY(-3px); box-shadow: var(--iss-e2); border-color: rgba(12, 115, 201, .25); }
.iss-page .iss-ci {
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: linear-gradient(135deg, rgba(12, 115, 201, .12), rgba(12, 115, 201, .05));
	color: var(--iss-blue);
	display: grid;
	place-items: center;
	margin-bottom: 14px;
}
.iss-page .iss-ci svg { width: 20px; height: 20px; }
.iss-page .iss-cap h4 { margin-bottom: 6px; }
.iss-page .iss-cap p { font-size: 13.5px; line-height: 1.5; }

/* ============================================================
   11. VALUE OUTCOME CARDS
   ============================================================ */
.iss-page .iss-val-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.iss-page .iss-val {
	border-radius: var(--iss-r-lg);
	padding: 28px;
	background: var(--iss-card);
	border: 1px solid var(--iss-line);
	box-shadow: var(--iss-e1);
	position: relative;
	overflow: hidden;
}
.iss-page .iss-val::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: linear-gradient(var(--iss-blue), var(--iss-navy));
}
.iss-page .iss-vn { font-family: var(--iss-mono); font-size: 12px; color: var(--iss-blue); font-weight: 700; letter-spacing: .05em; }
.iss-page .iss-val h3 { margin: 12px 0 8px; font-size: 18px; }
.iss-page .iss-val p { font-size: 14px; line-height: 1.5; }

/* ============================================================
   12. METRICS — joined dashboard (subpages) + separate cards (homepage)
   ============================================================ */
.iss-page .iss-metrics {
	display: grid;
	grid-template-columns: repeat(var(--iss-cols, 4), 1fr);
	border: 1px solid var(--iss-line);
	border-radius: var(--iss-r-lg);
	overflow: hidden;
	background: var(--iss-card);
	box-shadow: var(--iss-e2);
}
.iss-page .iss-metric { padding: 28px 24px; border-right: 1px solid var(--iss-line); position: relative; }
.iss-page .iss-metric:last-child { border-right: 0; }
.iss-page .iss-mtag {
	font-family: var(--iss-mono);
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--iss-muted-2);
	font-weight: 600;
}
.iss-page .iss-mnum {
	font-family: var(--iss-mono);
	font-size: clamp(30px, 3.6vw, 42px);
	font-weight: 700;
	color: var(--iss-navy);
	letter-spacing: -.03em;
	margin: 10px 0 6px;
	font-variant-numeric: tabular-nums;
}
.iss-page .iss-mnum .iss-u { color: var(--iss-blue); }
.iss-page .iss-metric p { font-size: 13px; line-height: 1.45; }
.iss-page .iss-ring { position: absolute; top: 22px; right: 20px; width: 40px; height: 40px; }

/* Separate stat cards (homepage "Proven Impact" row). */
.iss-page .iss-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.iss-page .iss-stat-card {
	position: relative;
	background: var(--iss-card);
	border: 1px solid var(--iss-line);
	border-radius: var(--iss-r);
	box-shadow: var(--iss-e1);
	padding: 40px 24px 24px;
}
.iss-page .iss-stat-tag {
	position: absolute;
	top: 14px;
	right: 16px;
	max-width: calc(100% - 32px);
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid var(--iss-line);
	background: #fff;
	color: var(--iss-muted);
	font-family: var(--iss-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.iss-page .iss-stat-number {
	font-family: var(--iss-mono);
	font-size: 34px;
	font-weight: 700;
	letter-spacing: -.03em;
	color: var(--iss-navy);
	margin-bottom: 8px;
	font-variant-numeric: tabular-nums;
}
/* The .iss-mnum injected by iss_metric_number_html() inherits the stat styling. */
.iss-page .iss-stat-number .iss-mnum {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	margin: 0;
	display: inline;
	font-variant-numeric: tabular-nums;
}
.iss-page .iss-stat-number .iss-u { color: var(--iss-blue); }
.iss-page .iss-stat-card p { font-size: 13.5px; line-height: 1.5; }

/* ============================================================
   13. TILE CARD GRID — linked content cards (solutions, use cases, stories)
   ============================================================ */
.iss-page .iss-tile-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.iss-page .iss-tile-grid.iss-cols-2 { grid-template-columns: repeat(2, 1fr); }
.iss-page .iss-tile-grid.iss-cols-4 { grid-template-columns: repeat(4, 1fr); }

.iss-page .iss-tile {
	position: relative;
	background: var(--iss-card);
	border: 1px solid var(--iss-line);
	border-radius: var(--iss-r);
	box-shadow: var(--iss-e1);
	padding: 24px;
	transition: transform .25s, box-shadow .25s, border-color .25s;
}
.iss-page .iss-tile h3 { margin: 0 0 10px; font-size: 21px; }
.iss-page .iss-tile p { font-size: 14.5px; line-height: 1.55; }
.iss-page .iss-tile .iss-inlink { margin-top: 14px; }

/*
 * Only cards that actually link somewhere get the "clickable" hover
 * treatment — `.iss-tile-linked` is added by the template exactly when a real
 * destination exists, so hover never promises an action that isn't there. The
 * stretched-link ::after makes the whole card clickable, not just the link text.
 */
.iss-page .iss-tile-linked:hover {
	transform: translateY(-3px);
	box-shadow: var(--iss-e2);
	border-color: rgba(12, 115, 201, .25);
	cursor: pointer;
}
.iss-page .iss-tile-linked:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--iss-e2);
	border-color: rgba(12, 115, 201, .28);
}
.iss-page .iss-tile-linked .iss-inlink::after { content: ""; position: absolute; inset: 0; }

/*
 * Customer logo at the head of a proof tile (`.iss-proof-tile`).
 *
 * Deliberately NOT the customer directory's `.iss-logo-plate`: that component
 * exists to referee 56 mismatched screenshots, so it boxes each logo in a
 * tinted, bordered, fixed-height plate. Here there are three hand-picked
 * wordmarks on a white card, and a tinted box inside a card just reads as a
 * card inside a card. So the logo sits bare on the card instead, with the
 * *height* fixed and the width free — height is what makes logos of wildly
 * different aspect ratios (Abbott is 4.6:1, Rea 2.5:1) look like one set.
 *
 * `mix-blend-mode: multiply` drops the baked-in white background these JPG/PNG
 * sources carry; without it each logo sits in a faintly visible white rectangle
 * wherever the card is tinted. Logos stay in full colour — unlike the
 * directory's grayscale-until-hover, because here the logo IS the proof.
 */
.iss-page .iss-proof-tile .iss-proof-logo {
	display: flex;
	align-items: center;
	height: 34px;
	margin-bottom: 16px;
}
.iss-page .iss-proof-tile .iss-proof-logo img {
	max-height: 100%;
	max-width: 170px;
	width: auto;
	height: auto;
	/*
	 * A flex item won't shrink below its intrinsic size without this, which
	 * makes `max-height` a suggestion and lets tall logos push the card open.
	 * Same brace as `.iss-logo-plate img`.
	 */
	min-width: 0;
	min-height: 0;
	object-fit: contain;
	mix-blend-mode: multiply;
}
/* No logo on file — fall back to the monogram, sized down to the logo band. */
.iss-page .iss-proof-tile .iss-proof-logo .iss-logo-mono {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	font-size: 12px;
}

/* Mono label above a tile heading ("AP Automation", "Life Sciences"). */
.iss-page .iss-tile-label {
	font-family: var(--iss-mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--iss-blue);
	display: block;
	margin-bottom: 10px;
}

/* ============================================================
   14. CLEAN BULLET LIST · STORY TIMELINE · PULL QUOTE
   ============================================================ */
/*
 * Two bullet-list variants, both valid:
 *   .iss-clean      — each <li> carries its own <span class="iss-b"> marker, so
 *                     the marker colour can vary per item (used by the story
 *                     timeline, where solved stages turn green).
 *   .iss-clean-list — bare <li>s, marker drawn with ::before. Use this when the
 *                     markup is plain content and every marker is identical.
 */
.iss-page .iss-clean { display: grid; gap: 10px; margin-top: 4px; }
.iss-page .iss-clean li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--iss-muted); line-height: 1.45; }
.iss-page .iss-clean .iss-b { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--iss-red); margin-top: 8px; }

.iss-page .iss-clean-list { display: grid; gap: 10px; margin-top: 16px; }
.iss-page .iss-clean-list li {
	position: relative;
	padding-left: 18px;
	font-size: 14px;
	color: var(--iss-muted);
	line-height: 1.45;
}
.iss-page .iss-clean-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--iss-red);
}
/* On dark bands the red marker reads as an error state — use the sky accent. */
.iss-page .iss-ai-band .iss-clean-list li::before,
.iss-page .iss-ai-within .iss-clean-list li::before { background: var(--iss-sky); }
.iss-page .iss-ai-band.iss-ai-teaser .iss-clean-list li::before { background: var(--iss-blue); }

.iss-page .iss-story { display: grid; position: relative; margin-left: 8px; }
.iss-page .iss-story::before {
	content: "";
	position: absolute;
	left: 19px;
	top: 14px;
	bottom: 14px;
	width: 2px;
	background: linear-gradient(var(--iss-blue), var(--iss-sky), var(--iss-line));
}
.iss-page .iss-stage { display: grid; grid-template-columns: 40px 1fr; gap: 20px; padding: 8px 0 26px; position: relative; }
.iss-page .iss-stage:last-child { padding-bottom: 0; }
.iss-page .iss-snum {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	background: var(--iss-card);
	border: 1px solid var(--iss-line-strong);
	color: var(--iss-blue);
	font-family: var(--iss-mono);
	font-weight: 700;
	box-shadow: var(--iss-e1);
	z-index: 1;
}
.iss-page .iss-stage.iss-solved .iss-snum {
	background: linear-gradient(135deg, var(--iss-blue), var(--iss-blue-dark));
	color: #fff;
	border-color: transparent;
}
.iss-page .iss-stage-body { padding-top: 4px; }
.iss-page .iss-sk {
	font-family: var(--iss-mono);
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--iss-muted-2);
	font-weight: 600;
}
.iss-page .iss-stage-body h3 { margin: 6px 0 12px; }
.iss-page .iss-mini { display: grid; gap: 9px; }
.iss-page .iss-mini li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--iss-muted); line-height: 1.45; }
.iss-page .iss-mini .iss-b { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--iss-red); margin-top: 8px; }
.iss-page .iss-stage.iss-solved .iss-mini .iss-b { background: var(--iss-green); }
.iss-page .iss-flowline {
	margin: 0 0 18px;
	font-family: var(--iss-mono);
	font-size: 12.5px;
	letter-spacing: .02em;
	color: var(--iss-blue);
	font-weight: 600;
}

.iss-page .iss-quote {
	border-radius: var(--iss-r-lg);
	padding: clamp(32px, 4vw, 52px);
	background: linear-gradient(150deg, #103055, var(--iss-navy-2));
	color: #fff;
	position: relative;
	overflow: hidden;
	box-shadow: var(--iss-e3);
}
.iss-page .iss-quote::before {
	content: "\201C";
	position: absolute;
	top: -10px;
	left: 26px;
	font-size: 150px;
	color: rgba(143, 226, 245, .18);
	font-family: Georgia, serif;
	line-height: 1;
}
/*
 * The `background`/`border`/`padding`/`color` resets are load-bearing, not
 * defensive boilerplate. The7 styles bare `blockquote` globally — a light
 * #f7f7f7 fill, navy text and 20px/25px padding — and `.iss-page *` only resets
 * box-sizing, so that style landed inside this navy panel and painted the quote
 * as a pale box with dark text sitting on top of the gradient. It looked like a
 * pasted screenshot. Found on /about-iss-group/ on 2026-08-06; it was already
 * doing the same thing on every project-snapshot page that carries a quote.
 *
 * `color: inherit` rather than `#fff` so the component keeps working if it is
 * ever placed on a light surface.
 */
.iss-page .iss-quote blockquote {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	position: relative;
	z-index: 1;
	font-size: clamp(20px, 2.4vw, 28px);
	line-height: 1.4;
	font-weight: 600;
	letter-spacing: -.02em;
	max-width: 30ch;
}
/* The7 also hangs a decorative mark on blockquote's ::before; ours is on the panel. */
.iss-page .iss-quote blockquote::before,
.iss-page .iss-quote blockquote::after {
	content: none;
}
.iss-page .iss-qby { margin-top: 22px; font-family: var(--iss-mono); font-size: 12px; letter-spacing: .04em; color: var(--iss-sky); }

/* ============================================================
   15. BANDS — AI (two treatments), CTA
   ============================================================ */

/* 15a. `.iss-ai-within` — 2-col dark mesh band used on detail/overview pages. */
.iss-page .iss-ai-within {
	border-radius: var(--iss-r-lg);
	padding: clamp(30px, 4vw, 48px);
	color: #fff;
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(90% 120% at 88% -10%, rgba(34, 167, 232, .4), transparent 55%),
		linear-gradient(150deg, #113257, var(--iss-navy-2) 60%, #071522);
	box-shadow: var(--iss-e3);
}
.iss-page .iss-ai-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; position: relative; z-index: 1; }
.iss-page .iss-ai-within h2 { color: #fff; margin: 14px 0 14px; }
.iss-page .iss-ai-within h3 { color: #fff; }
.iss-page .iss-ai-within p { color: rgba(255, 255, 255, .85); font-size: 15.5px; }
.iss-page .iss-ai-list { display: grid; gap: 12px; }
.iss-page .iss-ai-list li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	color: rgba(255, 255, 255, .9);
	font-size: 14.5px;
	line-height: 1.45;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.iss-page .iss-ai-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.iss-page .iss-ai-list .iss-mk {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 7px;
	background: rgba(143, 226, 245, .16);
	color: var(--iss-sky);
	display: grid;
	place-items: center;
	margin-top: 1px;
}
.iss-page .iss-ai-list .iss-mk svg { width: 12px; height: 12px; }

/* 15b. `.iss-ai-band` — flat dark band (homepage finale). */
.iss-page .iss-ai-band {
	background: linear-gradient(135deg, var(--iss-navy) 0%, var(--iss-blue) 100%);
	color: #fff;
	padding: 34px;
	border-radius: var(--iss-r-lg);
	box-shadow: var(--iss-e2);
}
.iss-page .iss-ai-band h2,
.iss-page .iss-ai-band h3 { color: #fff; }
.iss-page .iss-ai-band p,
.iss-page .iss-ai-band li,
.iss-page .iss-ai-band .iss-muted { color: rgba(255, 255, 255, .86); }
/* Orbit-visual first, copy second (v44's layout) — .9fr/1.1fr keeps the copy column the wider one, same weighting as before the column order flipped. Sole consumer: ai.php. */
.iss-page .iss-ai-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 20px; align-items: center; }

/*
 * `.iss-ai-teaser` is a deliberately LIGHT variant. Where a page shows the AI
 * pitch twice (a mid-page teaser plus the dark finale), the teaser takes this
 * treatment so the reader never sees the same dark band twice. Needs the
 * doubled class for specificity over the dark base above.
 */
.iss-page .iss-ai-band.iss-ai-teaser {
	background:
		radial-gradient(120% 140% at 100% 0%, rgba(12, 115, 201, .10), transparent 55%),
		linear-gradient(150deg, #f6faff, #e9f3fc);
	border: 1px solid #d3e6f7;
	color: var(--iss-ink);
	box-shadow: var(--iss-e1);
}
.iss-page .iss-ai-band.iss-ai-teaser h3 { color: var(--iss-ink); font-size: 26px; letter-spacing: -.02em; }
.iss-page .iss-ai-band.iss-ai-teaser p,
.iss-page .iss-ai-band.iss-ai-teaser li { color: var(--iss-muted); }
.iss-page .iss-ai-band.iss-ai-teaser .iss-kicker.iss-sky { color: var(--iss-blue); }

/* 15c. CTA band */
.iss-page .iss-cta-band {
	border-radius: var(--iss-r-lg);
	padding: clamp(36px, 5vw, 60px);
	text-align: center;
	/*
	 * Homepage V44 Developer Notes: "Shared gradient colors are normalized
	 * to exact approved tokens: --iss-blue-dark -> --iss-blue -> --iss-cyan."
	 * This is the shared Final CTA every page reuses, not a homepage-only
	 * override — was 2-stop blue->blue-dark (reversed, no cyan).
	 */
	background: linear-gradient(135deg, var(--iss-blue-dark), var(--iss-blue), var(--iss-cyan));
	color: #fff;
	box-shadow: var(--iss-e3);
	position: relative;
	overflow: hidden;
}
.iss-page .iss-cta-band::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(60% 120% at 50% -20%, rgba(255, 255, 255, .18), transparent 60%);
}
.iss-page .iss-cta-band > * { position: relative; z-index: 1; }
.iss-page .iss-cta-band h2 { color: #fff; margin-bottom: 12px; }
.iss-page .iss-cta-band p { color: rgba(255, 255, 255, .9); max-width: 56ch; margin: 0 auto 26px; font-size: 16px; }
.iss-page .iss-cta-band .iss-btn-row { justify-content: center; }

/*
 * SITE-WIDE RULE (Danny, 2026-09-04): the closing gradient band runs the FULL
 * width of the page. No white rails to the left or right of it, on any page
 * that has one — the homepage's `.final-cta-v25` shape (V44) is the reference
 * for what this section is supposed to look like.
 *
 * V44 flagged exactly this as a deliberate, separate decision rather than
 * making it unprompted (see the note in `template-parts/front-page/final-cta.php`
 * and front-page.css's FINAL CTA block, which scoped the shape to the homepage
 * and left the other twelve templates on the inset card). This is that decision.
 *
 * Geometry is `.iss-bleed`'s (§3), taken here on the BAND rather than on its
 * section, because the band lives inside a `.iss-wrap` that every template
 * already places it in — nothing in any template's markup has to change.
 * `calc(50vw - 50%)` resolves the padding against the wrap's own content box,
 * so the band's copy lands on the same left edge as every other section on the
 * page (196px at 1512px) instead of a hardcoded max-width.
 *
 * The homepage is excluded: it already carries V44's own version of this shape,
 * with its own gradient angle, padding and button treatment, and its markup and
 * measurements come out byte-identical with this rule in place.
 */
.iss-page:not(.iss-front-page) .iss-cta-band {
	margin-inline: calc(50% - 50vw);
	padding-inline: max(38px, calc(50vw - 50%));
	border-radius: 0;
	box-shadow: none;
}

/*
 * SITE-WIDE RULE (Danny, 2026-09-04): and the closing band runs INTO the
 * footer. The band is the page's floor — the navy footer starts exactly where
 * the gradient stops, with no white gutter between the two.
 *
 * The shipped page showed ~98px on desktop and ~118px on phones, which is two
 * separate white strips rather than one round number:
 *
 *   1. the band's own `.iss-section` bottom padding — clamp(48px, 7vw, 88px),
 *      §3 LAYOUT;
 *   2. The7's own `#main` bottom padding — 10px at >=1025px, 70px below it. It
 *      sits OUTSIDE `.iss-page` (`#main > .wf-wrap > .wf-container-main >
 *      .iss-page`), so no page-scoped selector can reach it, which is why
 *      zeroing the section alone leaves a thin white line under the gradient on
 *      desktop and a very visible band on mobile.
 *
 * Both are keyed on the band actually CLOSING the page (`:last-child`), not on
 * the band existing. A template that renders something after its band keeps its
 * normal spacing rather than ending up with a gradient stripe across its middle
 * and white below it. (Templates that append `the_content()` now render that
 * prose ABOVE the band, so the band closes the page whether or not ISS has put
 * copy in the editor — see the note in template-customers.php.)
 *
 * `:has()` rather than a marker class, so no template markup changes — same
 * reason the geometry above sits on the band. Three closing shapes exist and
 * all three are covered: the shared
 * `<section class="iss-section"><div class="iss-wrap"><div class="iss-cta-band">`
 * of the thirteen designed templates plus page.php / single.php / the legacy
 * archive, the homepage's band nested directly in its `.iss-bleed` section, and
 * iAssist / AI Layer, which close on their own `.final-cta-section` inside a
 * `<main>` and already paint their gradient through their padding.
 */
.iss-page > .iss-section:last-child:has(.iss-cta-band) {
	padding-bottom: 0;
}
#main:has(.iss-page > .iss-section:last-child .iss-cta-band),
#main:has(.iss-page > main > .final-cta-section:last-child) {
	padding-bottom: 0;
}
/*
 * The shared band centres its paragraph (`margin: 0 auto`) for the centred
 * variant. In the split variant the copy is a left-aligned column, so the auto
 * margins indent the body copy ~40px past its own heading — visible on
 * /solutions/ and /platform/ once the band went full width.
 */
.iss-page .iss-cta-band-split p { margin-left: 0; margin-right: 0; }

/* ============================================================
   16. CUSTOMER LOGO MARQUEE
   ============================================================ */
.iss-page .iss-marquee {
	position: relative;
	overflow: hidden;
	-webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.iss-page .iss-marquee + .iss-marquee { margin-top: 14px; }
.iss-page .iss-marquee-track { display: flex; width: max-content; will-change: transform; }
.iss-page .iss-marquee-track.a { animation: iss-marq-l 60s linear infinite; }
.iss-page .iss-marquee-track.b { animation: iss-marq-r 60s linear infinite; }
.iss-page .iss-marquee:hover .iss-marquee-track { animation-play-state: paused; }
@keyframes iss-marq-l {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@keyframes iss-marq-r {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}
.iss-page .iss-marquee-group { display: flex; gap: 14px; flex: none; padding-right: 14px; }
.iss-page .iss-marquee-tile {
	flex: none;
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 210px;
	padding: 14px 20px 14px 14px;
	border-radius: 14px;
	background: #fff;
	border: 1px solid var(--iss-line);
	box-shadow: var(--iss-e1);
	text-decoration: none;
	filter: grayscale(1);
	opacity: .6;
	transition: transform .25s, box-shadow .25s, border-color .25s, filter .35s, opacity .35s;
}
.iss-page .iss-marquee:hover .iss-marquee-tile { opacity: .9; }
.iss-page .iss-marquee-tile:hover {
	filter: grayscale(0);
	opacity: 1;
	transform: translateY(-3px);
	box-shadow: var(--iss-e2);
}
.iss-page .iss-marquee-tile.has-logo { justify-content: center; }
.iss-page .iss-marquee-tile img { max-height: 34px; max-width: 150px; width: auto; object-fit: contain; display: block; }
.iss-page .iss-logo-mono {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	font-family: var(--iss-mono);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: -.02em;
	color: #fff;
	background: linear-gradient(135deg, var(--iss-blue), var(--iss-navy));
}
.iss-page .iss-logo-wm { font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; color: var(--iss-navy); line-height: 1.15; }
.iss-page .iss-logo-wm small {
	display: block;
	font-family: var(--iss-mono);
	font-weight: 500;
	font-size: 9.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--iss-muted);
	margin-top: 3px;
}

/* Legacy client name pills — fallback before real logos are uploaded. */
.iss-page .iss-logo-list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.iss-page .iss-logo-pill {
	padding: 12px 14px;
	border-radius: 14px;
	border: 1px solid var(--iss-line);
	background: #fff;
	color: var(--iss-muted);
	font-weight: 600;
	font-size: 14px;
}

/* ============================================================
   17. PROSE — the page's own WYSIWYG content, when a template appends it.
   Restores the list/heading/link styling that the .iss-page resets strip, so
   anything ISS types into the normal WP editor still reads correctly.
   ============================================================ */
.iss-page .iss-prose { max-width: 74ch; }
.iss-page .iss-prose > * + * { margin-top: 18px; }
.iss-page .iss-prose h2 { margin-top: 34px; }
.iss-page .iss-prose h3 { margin-top: 26px; }
.iss-page .iss-prose p { font-size: 16.5px; line-height: 1.7; }
.iss-page .iss-prose ul,
.iss-page .iss-prose ol { padding-left: 22px; display: grid; gap: 8px; }
.iss-page .iss-prose ul { list-style: disc; }
.iss-page .iss-prose ol { list-style: decimal; }
.iss-page .iss-prose li { color: var(--iss-muted); font-size: 16.5px; line-height: 1.6; }
.iss-page .iss-prose a { color: var(--iss-blue); text-decoration: underline; text-underline-offset: 2px; }
.iss-page .iss-prose strong { color: var(--iss-ink); }

/* ============================================================
   18. MOTION
   ============================================================ */
.iss-page .iss-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
}
.iss-page .iss-reveal.iss-in { opacity: 1; transform: none; }
.iss-page .iss-reveal[data-d="1"] { transition-delay: .06s; }
.iss-page .iss-reveal[data-d="2"] { transition-delay: .12s; }
.iss-page .iss-reveal[data-d="3"] { transition-delay: .18s; }
.iss-page .iss-reveal[data-d="4"] { transition-delay: .24s; }

/*
 * NO-JS SAFETY NET.
 *
 * `.iss-reveal` starts at opacity 0 and only becomes visible when
 * iss-interactions.js adds `.iss-in`. With scripting disabled that class never
 * arrives, so every section below the fold would render permanently blank —
 * on the homepage and every subpage template, not just one page. The content
 * is present in the DOM (so it is still exposed to assistive tech and to
 * crawlers, which execute JS anyway), but it would be invisible on screen.
 *
 * Reveal-on-scroll is progressive enhancement; the page must be readable
 * without it. `scripting: none` matches exactly the case we care about — a
 * browser that supports the query but has JS turned off — and costs nothing
 * where JS is available.
 */
@media (scripting: none) {
	.iss-page .iss-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ============================================================
   19. FORM / CTA TEMPLATE  (template-form-cta.php)
   ------------------------------------------------------------
   The conversion pages: Book a Demo, Contact, and the thank-you
   page each redirects to. One dark panel carries the pitch on
   the left and a white card on the right holding either a
   Gravity Form or, in `confirmation` mode, a success message.

   Section 20 below restyles Gravity Forms' own markup inside
   that card. Everything here is layout and colour only, so the
   same panel works for a 6-field form and a 12-field one.
   ============================================================ */
/*
 * TOP-ALIGNED, and the left column carries enough to earn it.
 *
 * This panel used to be `align-items: center`, with a note saying it was the
 * one hero on the site whose columns couldn't be brought near the same height
 * (CLAUDE.md, "Hero columns carry similar visual weight") — a nine-field form
 * is ~1140px whatever you do to it, and no width or row gap changes how many
 * fields there are. Centring a ~500px pitch against it hid the difference by
 * splitting it: ~320px of empty navy above the eyebrow and ~320px below the
 * last bullet. Danny called that out as odd alignment on 2026-09-07, and it is:
 * a headline that starts a third of the way down the panel has no relationship
 * to anything, and on a 950px-tall window the H1 was below the fold on the one
 * page whose whole job is the pitch beside the form.
 *
 * So: `align-items: start`, and the left column stops being 500px. The two
 * bands that used to sit BELOW the panel — the four "what to expect" facts and
 * the "prefer to talk now" phone/email — now render inside it as
 * `.iss-panel-aside` (template-form-cta.php, `form` mode only). That is the
 * rule's step 2 done with content rather than padding: nothing is invented, the
 * facts are the same ACF fields ISS already edits, and both belong beside a
 * form far more than they belong stacked under one. Measured at 1512px the two
 * columns are ~985px and ~1070px — inside the rule's 10%.
 *
 * The row template is what places the leftovers. `1fr auto` gives row 1 the
 * slack, so the pitch is flush with the card's top edge and the aside is flush
 * with its bottom edge, with the difference absorbed as one gap in the middle
 * instead of a void at each end. The card spans both rows.
 *
 * Columns are 1fr/1fr, not the old 1.05/.95: step 1 of the same rule, moving
 * ~25px from the pitch to the form. It buys the taller column a little and
 * makes the shorter one a little taller, which is the direction that helps
 * twice.
 *
 * All of this is desktop only. Below 940px the panel is one column and the
 * blocks are read in sequence, so the aside is ORDERED BELOW THE FORM there —
 * see the 940px block in §22. Stacking 340px of facts between the pitch and
 * the first field would be a real cost on a phone to fix a desktop symptom.
 */
.iss-page .iss-form-panel {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr auto;
	gap: clamp(24px, 3vw, 40px);
	align-items: start;
	padding: clamp(28px, 4vw, 48px);
	border-radius: var(--iss-r-lg);
	background: linear-gradient(135deg, var(--iss-navy) 0%, var(--iss-blue) 100%);
	box-shadow: var(--iss-e3);
	position: relative;
	overflow: hidden;
}
/*
 * Placement is inside a min-width query so it simply does not exist on a
 * phone. Written flat, it did — and it beat the 940px block that tries to undo
 * it, because `.iss-page .iss-form-panel > .iss-form-card` is three classes and
 * the override there was two (`> *`). The result was the card still pinned to
 * column 2 of a one-column grid: an implicit second track appeared, took the
 * card's ~250px min-content, and left the copy column 0px wide — a 390px phone
 * rendered the H1 one character per line, 9,680px tall. A media query can't
 * lose that argument.
 */
@media (min-width: 941px) {
	.iss-page .iss-form-panel:not(.iss-form-panel-solo) > .iss-form-copy { grid-area: 1 / 1; }
	.iss-page .iss-form-panel:not(.iss-form-panel-solo) > .iss-panel-aside { grid-area: 2 / 1; align-self: end; }
	.iss-page .iss-form-panel:not(.iss-form-panel-solo) > .iss-form-card { grid-area: 1 / 2 / span 2 / auto; }
}
.iss-page .iss-form-panel::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(70% 120% at 90% -10%, rgba(255, 255, 255, .16), transparent 60%);
	pointer-events: none;
}
/*
 * `min-width: 0` is load-bearing, not tidying. A grid item's default
 * `min-width: auto` refuses to shrink below its content's min-content width,
 * and a form card's min-content width is set by whatever the widest <select>
 * or input needs — ~350px here. Below ~430px the panel's own content box is
 * narrower than that, so the track grew past the panel… which has
 * `overflow: hidden` for the ::after glow, so the excess was CLIPPED rather
 * than scrolled. On a 390px phone that cut 96px off the right of the hero: the
 * H1 lost the end of every line, and the right-hand third of every form field
 * — including part of the submit button — was unreachable, with no scrollbar
 * to reveal it. `overflow-wrap` keeps long unbroken strings (an email address
 * in the consent copy) from re-creating it one element deeper.
 */
.iss-page .iss-form-panel > * {
	position: relative;
	z-index: 1;
	min-width: 0;
	overflow-wrap: anywhere;
}

/*
 * Confirmation mode: one centred column — there's no form to sit beside, and
 * no aside either (the template only builds one in `form` mode). The `:not()`
 * on the placement rules above is what keeps its success card out of a second
 * column that doesn't exist here.
 */
.iss-page .iss-form-panel-solo {
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	max-width: 760px;
	margin-inline: auto;
	text-align: center;
	justify-items: center;
}
.iss-page .iss-form-panel-solo .iss-form-copy { max-width: 60ch; }
.iss-page .iss-form-panel-solo .iss-lead { margin-inline: auto; }
.iss-page .iss-form-panel-solo .iss-form-card { width: 100%; text-align: left; }

/* --- Left column: the pitch --------------------------------------------- */
/*
 * No `font-size` here on purpose. This used to set `clamp(30px, 3.6vw, 42px)`
 * against the site's own `clamp(34px, 4.6vw, 52px)` (§2), which left the demo
 * hero's headline 10px smaller than the headline on every other dark hero —
 * visible the moment you put the two pages side by side, and one of the things
 * that made this page read as older than the rest of the site.
 *
 * The narrow copy column was presumably the reason. It is no longer a reason:
 * the column is centred against the form now (see `.iss-form-panel`), so the
 * extra line the larger type takes costs nothing and closes a little of the
 * height difference between the two columns rather than widening it.
 */
.iss-page .iss-form-copy h1 {
	margin: 18px 0 14px;
	color: #fff;
}
.iss-page .iss-form-copy .iss-lead { color: rgba(255, 255, 255, .88); font-size: 17px; }
.iss-page .iss-form-copy .iss-ai-list { margin-top: 24px; }
.iss-page .iss-form-copy .iss-ai-list strong { color: #fff; font-weight: 700; }

/*
 * Eyebrow, inverted for a dark ground — SKY, matching every other dark hero on
 * the site (§7's `.iss-detail-hero .iss-eyebrow`), not the white this used to
 * paint. This rule predates that site-wide one and was the only dark eyebrow
 * left in white; beside `/solutions/…`'s cyan label it read as a different
 * generation of the design, which is a fair description of the whole page
 * before this pass.
 *
 * Kept as a rule rather than deleted so the panel carries its own dark-ground
 * treatment wherever it is used, instead of depending on being nested inside a
 * `.iss-detail-hero` section. The pill is dropped for the same reason §7 drops
 * it: on a dark ground the ground already separates the label. The dash follows
 * `currentColor` and needs nothing here — see CLAUDE.md's site-wide accent rule.
 */
.iss-page .iss-eyebrow.iss-on-dark {
	padding: 0;
	background: none;
	border: 0;
	color: var(--iss-sky);
}
/*
 * Runs sky → white rather than white → sky: on a short accent word the reverse
 * ended on pale blue and read as text fading out rather than as an accent.
 */
.iss-page .iss-grad-light {
	background: linear-gradient(105deg, var(--iss-sky), #dff1ff 55%, #fff);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* --- Right column: the card -------------------------------------------- */
/*
 * The card is the one LIGHT surface inside a dark panel, so it has to restate
 * the light-ground ink rather than inherit. The panel sets `color: #fff` for
 * its copy column; anything in the card that doesn't name its own colour —
 * a Gravity Forms label, a field description, this h2, a plugin's markup we
 * don't control — inherits that and renders white on white.
 *
 * That is not hypothetical: it is what /book-a-demo/ shipped as. Every label
 * on the demo form, the card's own h2 and the consent paragraph were at a 1:1
 * contrast ratio, i.e. literally invisible, for anyone on the page. The
 * per-element rules in §20 that would have coloured them were scoped to a
 * Gravity Forms theme class the form wasn't emitting.
 *
 * So the fix lives HERE, on the surface, not on each element: the card
 * declares the ink for its own ground once, and no future field type, plugin
 * markup or GF markup mode can be invisible inside it by default.
 */
.iss-page .iss-form-card {
	background: #fff;
	color: var(--iss-ink);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--iss-r);
	padding: clamp(22px, 2.4vw, 30px);
	box-shadow: 0 18px 42px rgba(15, 23, 42, .18);
}
.iss-page .iss-form-card h2,
.iss-page .iss-form-card h3,
.iss-page .iss-form-card strong,
.iss-page .iss-form-card label { color: var(--iss-ink); }
.iss-page .iss-form-card p,
.iss-page .iss-form-card li { color: var(--iss-muted); }
.iss-page .iss-form-card a { color: var(--iss-blue); }
/*
 * …and the same argument for the BUTTONS. §7 inverts every button variant
 * inside `.iss-detail-hero` for its dark ground — primary goes white-on-navy,
 * ghost goes white text on a 4%-white wash. The card is a light island inside
 * that same section, so those inversions leaked into it: on the thank-you page
 * the ghost CTA ("Read customer stories") was white text on a white card, i.e.
 * the same invisibility as the form labels, and the primary CTA lost its blue.
 *
 * Re-asserted rather than fixed at the source, because §7's inversion is right
 * for everything else in the hero — it is only wrong on the one light surface
 * inside it, and that surface is the thing that knows it is light.
 */
.iss-page .iss-detail-hero .iss-form-card .iss-btn-primary,
.iss-page .iss-detail-hero .iss-form-card .iss-btn-primary:hover {
	background: linear-gradient(135deg, #1a86d6, var(--iss-blue-dark));
	border-color: transparent;
	color: #fff;
	box-shadow: 0 8px 22px -6px rgba(12, 115, 201, .6), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.iss-page .iss-detail-hero .iss-form-card .iss-btn-ghost {
	background: var(--iss-card);
	border-color: var(--iss-line-strong);
	color: var(--iss-ink);
	box-shadow: var(--iss-e1);
}
.iss-page .iss-detail-hero .iss-form-card .iss-btn-ghost:hover,
.iss-page .iss-detail-hero .iss-form-card .iss-btn-ghost:focus-visible {
	background: var(--iss-bg-tint);
	border-color: var(--iss-blue);
	color: var(--iss-blue);
}
.iss-page .iss-detail-hero .iss-form-card .iss-inlink { color: var(--iss-blue); }
.iss-page .iss-form-card h2 { font-size: 22px; margin-bottom: 6px; }
.iss-page .iss-form-card .iss-form-intro { font-size: 14px; line-height: 1.55; margin-bottom: 18px; color: var(--iss-muted); }
.iss-page .iss-form-card h2:last-child { margin-bottom: 18px; }

/* Editor-only warning when the Form ID field points at nothing. */
.iss-page .iss-form-warning {
	margin: 0;
	padding: 14px 16px;
	border-radius: var(--iss-r-sm);
	background: rgba(237, 51, 66, .08);
	border: 1px solid rgba(237, 51, 66, .3);
	color: var(--iss-ink);
	font-size: 14px;
	line-height: 1.5;
}

/* --- Confirmation card ------------------------------------------------- */
.iss-page .iss-success-mark {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	margin-bottom: 18px;
	color: #fff;
	background: linear-gradient(135deg, var(--iss-green), #0f8a3d);
	box-shadow: 0 0 0 8px rgba(22, 163, 74, .12);
}
.iss-page .iss-success-mark svg { width: 26px; height: 26px; stroke-width: 2.6; }
.iss-page .iss-form-card .iss-confirm-lead { font-size: 15.5px; line-height: 1.6; margin-top: 8px; }

.iss-page .iss-next-steps {
	display: grid;
	gap: 14px;
	margin: 24px 0 26px;
	counter-reset: none;
}
/*
 * The step card's ground is a shade lighter than `--iss-bg-tint` (#edf5fa),
 * and that is the whole reason for the literal.
 *
 * Every ink token in this file is calibrated against WHITE. On the tint they
 * each lose about a tenth of a contrast ratio, which put the two things inside
 * this card — `--iss-muted` body copy at 4.48 and the `--iss-blue` step number
 * at 4.42 — just under WCAG AA's 4.5. A twentieth of a step lighter puts both
 * back over (4.62 and 4.55) without darkening any ink or flattening the panel
 * to white, which is the smaller of the two visible changes.
 *
 * If a "muted on tint" ink ever joins the token set, this should use it.
 */
.iss-page .iss-next-steps li {
	padding: 16px 18px;
	border-radius: var(--iss-r-sm);
	background: #f2f8fc;
	border: 1px solid var(--iss-line);
}
.iss-page .iss-next-steps h3 { margin: 6px 0 4px; font-size: 16px; }
.iss-page .iss-next-steps p { font-size: 14px; line-height: 1.5; }

/* --- Trust strip ------------------------------------------------------- */
.iss-page .iss-trust-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1px;
	background: var(--iss-line);
	border: 1px solid var(--iss-line);
	border-radius: var(--iss-r);
	overflow: hidden;
	box-shadow: var(--iss-e1);
}
.iss-page .iss-trust {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 20px 22px;
	background: var(--iss-card);
}
.iss-page .iss-trust .iss-fl {
	font-family: var(--iss-mono);
	font-size: 9.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--iss-muted-2);
}
.iss-page .iss-trust .iss-fv { font-weight: 700; font-size: 15px; color: var(--iss-ink); letter-spacing: -.01em; }

/* --- FAQ (native <details>, so it works without JavaScript) ------------- */
.iss-page .iss-faq {
	border: 1px solid var(--iss-line);
	border-radius: var(--iss-r);
	background: var(--iss-card);
	box-shadow: var(--iss-e1);
	overflow: hidden;
}
.iss-page .iss-faq-item + .iss-faq-item { border-top: 1px solid var(--iss-line); }
.iss-page .iss-faq-item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	cursor: pointer;
	font-weight: 650;
	font-size: 16px;
	letter-spacing: -.01em;
	color: var(--iss-ink);
	list-style: none;
	transition: color .18s ease, background .18s ease;
}
.iss-page .iss-faq-item > summary::-webkit-details-marker { display: none; }
.iss-page .iss-faq-item > summary:hover { color: var(--iss-blue); background: var(--iss-bg-tint); }
.iss-page .iss-faq-item > summary:focus-visible {
	outline: 3px solid rgba(12, 115, 201, .35);
	outline-offset: -3px;
}
.iss-page .iss-faq-ico {
	flex: none;
	position: relative;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--iss-bg-tint);
	border: 1px solid var(--iss-line-strong);
}
/* Plus glyph built from the pseudo-elements, so the bar can rotate to a minus. */
.iss-page .iss-faq-ico::before,
.iss-page .iss-faq-ico::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 1.6px;
	background: var(--iss-blue);
	transform: translate(-50%, -50%);
	transition: transform .22s cubic-bezier(.2, .7, .2, 1), opacity .22s;
}
.iss-page .iss-faq-ico::after { transform: translate(-50%, -50%) rotate(90deg); }
.iss-page .iss-faq-item[open] .iss-faq-ico::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
.iss-page .iss-faq-a { padding: 0 24px 22px; }
.iss-page .iss-faq-a p { font-size: 15.5px; line-height: 1.65; max-width: 76ch; }
.iss-page .iss-faq-a p + p { margin-top: 12px; }

/* --- Contact strip ----------------------------------------------------- */
.iss-page .iss-contact-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	padding: 26px 28px;
	border-radius: var(--iss-r);
	background:
		radial-gradient(120% 140% at 100% 0%, rgba(12, 115, 201, .10), transparent 55%),
		linear-gradient(150deg, #f6faff, #e9f3fc);
	border: 1px solid #d3e6f7;
}
.iss-page .iss-contact-strip h3 { font-size: 19px; }
.iss-page .iss-contact-strip p { font-size: 14.5px; line-height: 1.5; margin-top: 6px; max-width: 52ch; }
.iss-page .iss-contact-links { display: flex; flex-wrap: wrap; gap: 12px; }
.iss-page .iss-contact-link {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 13px 20px;
	border-radius: 14px;
	background: #fff;
	border: 1px solid var(--iss-line);
	box-shadow: var(--iss-e1);
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.iss-page .iss-contact-link:hover {
	transform: translateY(-2px);
	box-shadow: var(--iss-e2);
	border-color: rgba(12, 115, 201, .3);
}
/*
 * `display: block` on both, and it is not redundant with the flex column.
 *
 * Email Encoder Bundle rewrites every `mailto:` on the site: it wraps the
 * link's contents in a `<span id="eeb-…">` and swaps that span's innerHTML in
 * on load. Our two spans survive intact INSIDE it — but they are no longer the
 * anchor's flex items, the wrapper is, so they lose the blockification that
 * was stacking them and reflow onto one line at the inherited 16px. The Call
 * pill stacked, the Email pill beside it read "EMAIL sales@issgroup.net" on a
 * single line, and the pair sat at two different heights.
 *
 * Shipped that way on /book-a-demo/ and the thank-you page; it only became
 * obvious when the strip moved into the panel. Declaring the display here
 * means it doesn't matter how many wrappers a plugin puts between the anchor
 * and its labels.
 */
.iss-page .iss-contact-link .iss-fl {
	display: block;
	font-family: var(--iss-mono);
	font-size: 9.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--iss-muted-2);
}
.iss-page .iss-contact-link .iss-fv { display: block; font-weight: 700; font-size: 15px; color: var(--iss-blue); }

/* --- 19b. The panel aside — the same two blocks, on the dark ground -----
 *
 * `form` mode moves the facts and the contact details INSIDE the panel, under
 * the pitch (see `.iss-form-panel` above and template-form-cta.php). Same ACF
 * fields, same markup, different ground — so everything here is a re-colour of
 * the light-ground versions plus one shape change, and nothing above needs an
 * exception.
 *
 * It has to come after both of those groups in the file: `.iss-panel-facts
 * .iss-fl` and `.iss-trust .iss-fl` tie on specificity, so source order is what
 * decides which colour a fact label gets. The fourth class in these selectors
 * is belt-and-braces for the day someone moves a block.
 *
 * The shape change: the four facts are ROWS here, not a card grid — label left,
 * value right, hairline between. A 2x2 of bordered tiles in a 490px column read
 * as a second card competing with the form; a spec list reads as the fine print
 * of the pitch above it, which is what it is. It is also ~200px taller, and
 * that height is the point (see the panel comment).
 */
/*
 * THE SCRIM IS THE LEGIBILITY FIX, and it has to be here rather than in the
 * text colours.
 *
 * The panel's ground is `linear-gradient(135deg, --iss-navy, --iss-blue)`, so
 * how much headroom white text has depends on WHERE IN THE PANEL it is — and
 * this block is the first content that has ever sat at the blue end. On a
 * phone the panel stacks to ~2,600px and the aside lands at the bottom, on
 * near-pure `--iss-blue`: measured 3.42:1 for the fact labels and 4.31:1 for
 * the contact note. Both fail AA, and neither is visible as a problem on a
 * desktop screenshot, where the same elements sit mid-gradient at 4.5-6:1.
 *
 * Raising the alphas is the wrong lever: pure #fff on `--iss-blue` tops out at
 * 4.87:1, so a 9.5px mono label would be riding the line with nothing left for
 * the next gradient the panel is given. Darkening the aside's own ground fixes
 * every element inside it at once and is stable wherever the block ends up —
 * ≥5.9:1 at the blue end, better at the navy one.
 *
 * It earns its keep visually too: the spec sheet and the phone number read as
 * one recessed unit rather than as loose text floating under the bullets.
 */
.iss-page .iss-panel-aside {
	color: #fff;
	background: rgba(5, 22, 38, .42);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--iss-r);
	padding: clamp(18px, 1.6vw, 24px);
}
.iss-page .iss-panel-aside .iss-panel-facts .iss-trust {
	flex-direction: row;
	align-items: baseline;
	justify-content: space-between;
	gap: 18px;
	padding: 13px 2px;
	background: none;
	border-bottom: 1px solid rgba(255, 255, 255, .2);
}
/*
 * .78 white, not the .72 the light strip's muted token composites to. These
 * labels are 9.5px mono on a gradient that runs to `--iss-blue`, and white
 * text has less headroom over the blue end than over the navy one — .78 keeps
 * the whole run above 4.5:1 wherever the gradient happens to be under it.
 * `book-a-demo.spec.js` measures it against the real interpolated colour under
 * each label rather than against a token, because the token isn't the ground.
 */
.iss-page .iss-panel-aside .iss-panel-facts .iss-trust .iss-fl {
	flex: none;
	color: rgba(255, 255, 255, .78);
}
.iss-page .iss-panel-aside .iss-panel-facts .iss-trust .iss-fv {
	color: #fff;
	text-align: right;
}

.iss-page .iss-panel-aside .iss-panel-contact { margin-top: 26px; }
.iss-page .iss-panel-aside .iss-panel-contact h2 {
	font-size: 18px;
	color: #fff;
	margin-bottom: 4px;
}
.iss-page .iss-panel-aside .iss-panel-contact p {
	font-size: 14.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .82);
	max-width: 46ch;
}
.iss-page .iss-panel-aside .iss-contact-links { margin-top: 14px; }
/*
 * Ghost pills, not the white cards the light strip uses. A white pill on this
 * ground would be a second light surface in a panel that already has one, and
 * the eye reads two white boxes as two equal offers — the form is the offer.
 */
.iss-page .iss-panel-aside .iss-contact-link {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .26);
	box-shadow: none;
}
.iss-page .iss-panel-aside .iss-contact-link:hover,
.iss-page .iss-panel-aside .iss-contact-link:focus-visible {
	background: rgba(255, 255, 255, .16);
	border-color: rgba(255, 255, 255, .5);
	box-shadow: none;
}
.iss-page .iss-panel-aside .iss-contact-link .iss-fl { color: rgba(255, 255, 255, .78); }
.iss-page .iss-panel-aside .iss-contact-link .iss-fv { color: #fff; }

/* ============================================================
   20. GRAVITY FORMS — inside .iss-form-card
   ------------------------------------------------------------
   Gravity Forms ships its own stylesheet, and it may load after
   this file depending on when the form is rendered. Every rule
   below is therefore qualified with `.iss-form-card
   .gform_wrapper.gform_wrapper` so it wins on specificity rather
   than on source order.

   We restyle GF's markup rather than disabling its CSS: its
   grid (.gform_fields / .gfield--width-*) is what gives us the
   two-up rows, and its validation and accessibility markup is
   worth keeping intact.

   MARKUP-MODE AGNOSTIC, deliberately. GF emits one of two
   markups per form: the modern one (`.gform_wrapper.gravity-
   theme`, <div> fields) or the pre-2.5 one (`.gform_wrapper
   .gform_legacy_markup_wrapper`, a <ul> of <li>). This section
   used to require `.gravity-theme`, which meant a form GF
   classified as legacy matched NONE of it — and since the card
   sits inside a dark panel, "none of it" resolved to white
   labels on the white card. That is exactly what shipped on
   /book-a-demo/: form #9 was created by a migration that never
   stamped `markupVersion`, so GF read it as pre-2.5 and every label,
   description and heading in the card rendered invisible.

   The form data is fixed (iss-migrations/book-a-demo.php stamps
   `markupVersion => 2`), but the CSS no longer depends
   on that being true: the `.gform_wrapper.gform_wrapper` doubling
   holds the old specificity without naming a theme, §20a below
   lays out either markup, and §19's `.iss-form-card { color }`
   means nothing inside the card can inherit the panel's white
   again. ISS can point the Form ID field at any form on the
   site — including the genuinely pre-2.5 ones (#1 Docs, #4
   Resources) — and get a readable, styled form.
   ============================================================ */
.iss-page .iss-form-card .gform_wrapper { margin: 0; }
.iss-page .iss-form-card .gform_wrapper form { margin: 0; }

/* ---- 20a. The field grid, in either markup mode -------------------------
 * The modern markup ships this grid in GF's own stylesheet and we only tuned
 * the gaps. The legacy markup ships a <ul> with no grid at all, so the
 * `gfield--width-half` classes GF still emits do nothing and every field
 * stacks full width — which is how the demo form's four paired fields
 * (email/phone, company/job title) rendered as a 9-field column tall enough
 * to leave the copy beside it looking like a caption.
 *
 * Declaring the grid here rather than inheriting it means the two-up rows are
 * a property of OUR card, true in both markups, instead of a property of which
 * markup GF happened to choose. `list-style/margin/padding` are the <ul>/<li>
 * resets the legacy mode needs and the modern one ignores.
 */
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gform_fields {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-row-gap: 16px;
	grid-column-gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gfield {
	grid-column: span 12;
	/* Same shrink guard as the panel (§19): a field's min-content width is set
	   by its widest <option>, and without this the whole grid refuses to fit a
	   narrow card. */
	min-width: 0;
	max-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gfield::before { content: none; }
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gfield--width-half { grid-column: span 6; }
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gfield--width-third { grid-column: span 4; }
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gfield--width-quarter { grid-column: span 3; }
/* GF's honeypot and any hidden field must not occupy a grid row. */
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gform_validation_container,
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gfield--type-honeypot,
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gfield_visibility_hidden { display: none !important; }

/* One column below the card's two-up breakpoint — see §22. */
@media (max-width: 540px) {
	.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gfield--width-half,
	.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gfield--width-third,
	.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gfield--width-quarter { grid-column: span 12; }
}

/* The legacy markup's own name/complex sub-grid is a float layout; make it
   behave like the modern one so First/Last sit side by side rather than
   stacking at half width. */
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .ginput_complex {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 14px;
	margin: 0;
	padding: 0;
}
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .ginput_complex > span {
	display: block;
	min-width: 0;
	width: auto;
	margin: 0;
	padding: 0;
}

/*
 * Labels take the design system's mono "utility voice".
 *
 * `--iss-muted`, not the `--iss-muted-2` this used to carry: at 10.5px a field
 * label is the smallest text on the page that a person has to READ to fill the
 * form in, and muted-2 (#7890a3) is 3.32:1 on white — under WCAG AA's 4.5:1.
 * `--iss-muted` (#607286) is 4.94:1 and is the design system's own body ink, so
 * the label keeps its quiet voice without being the hardest thing on the page
 * to read. Same reasoning for the sub-labels below.
 */
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gfield_label {
	display: block;
	font-family: var(--iss-mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--iss-muted);
	margin-bottom: 7px;
	line-height: 1.4;
}
/*
 * Required marker. This install has Gravity Forms set to the "(Required)" TEXT
 * marker, not the asterisk — and in a mono uppercase label that is long enough
 * to wrap "BUSINESS EMAIL (REQUIRED)" onto two lines, which made the field
 * taller than the one beside it and broke the two-up rows' alignment.
 *
 * The text is clipped rather than `display:none`d, so it stays in the
 * accessibility tree (the inputs also carry `aria-required="true"`), and a red
 * asterisk carries the meaning visually in the space of one character.
 */
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gfield_required_text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gfield_required::after {
	content: "*";
	margin-left: 3px;
	color: var(--iss-red);
	font-size: 13px;
	line-height: 1;
}
/* …but only once, since GF nests .gfield_required inside .gfield_required. */
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gfield_required .gfield_required::after { content: none; }
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gfield_required .gfield_required_asterisk { color: var(--iss-red); }

/* Sub-labels (First / Last) sit below their input in GF's default config. */
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .ginput_complex label,
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gform_fileupload_rules,
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gfield_description {
	display: block;
	font-family: var(--iss-mono);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--iss-muted);
	opacity: 1;
	padding-top: 5px;
}
/* Field help text reads better as prose than as a mono micro-label. */
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gfield_description {
	font-family: var(--iss-sans);
	font-size: 12.5px;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.5;
	color: var(--iss-muted);
}

/* Inputs. 16px minimum font-size, or iOS Safari zooms the viewport on focus. */
.iss-page .iss-form-card .gform_wrapper.gform_wrapper input[type="text"],
.iss-page .iss-form-card .gform_wrapper.gform_wrapper input[type="email"],
.iss-page .iss-form-card .gform_wrapper.gform_wrapper input[type="tel"],
.iss-page .iss-form-card .gform_wrapper.gform_wrapper input[type="url"],
.iss-page .iss-form-card .gform_wrapper.gform_wrapper input[type="number"],
.iss-page .iss-form-card .gform_wrapper.gform_wrapper select,
.iss-page .iss-form-card .gform_wrapper.gform_wrapper textarea {
	width: 100%;
	/* Paired with the grid's `min-width: 0`: `width: 100%` alone still lets an
	   input's intrinsic size widen its track, which is what pushed the card
	   past the panel's clip on a phone. */
	max-width: 100%;
	min-width: 0;
	padding: 13px 15px;
	border: 1px solid var(--iss-line-strong);
	border-radius: var(--iss-r-sm);
	background: #fff;
	color: var(--iss-ink);
	font-family: var(--iss-sans);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color .18s ease, box-shadow .18s ease;
	-webkit-appearance: none;
	appearance: none;
}
/*
 * `height`, not just `min-height`, because the height that was actually
 * winning came from the field's `rows` attribute — GF's default 10 — and a
 * `min-height` below it changes nothing. Ten rows is 192px of empty box for an
 * OPTIONAL "what challenge are you having?", which made it the single tallest
 * thing in a card that was already ~640px taller than the column beside it
 * (CLAUDE.md, "Hero columns carry similar visual weight", step 2). Five rows
 * still shows a full sentence, and `resize: vertical` is left on so anyone
 * writing more can drag it — which is the affordance the ten rows were
 * standing in for.
 *
 * `.gfield` is in the selector to win a TIE, not for reach. GF's own
 * `styles-default.css` carries `.gform_wrapper.gravity-theme .gfield
 * textarea.medium { height: 192px }` — also four classes and one element, and
 * it is enqueued after iss-global.css, so §20's usual doubled-class idiom
 * loses this one on source order and the rows attribute went on winning. Five
 * classes settles it. Worth remembering for any other GF property this file
 * sets at exactly four.
 */
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gfield textarea { min-height: 104px; height: 118px; resize: vertical; }
/*
 * Placeholder ink. `--iss-muted` (4.94:1) rather than the old #9dabbc (2.6:1):
 * on the two <select>s the placeholder is not a hint, it is the field's CURRENT
 * VALUE until someone changes it ("What solution are you interested in?"), so
 * it has to be as readable as any other text on the card. The weight drop is
 * what keeps it reading as empty rather than filled.
 */
.iss-page .iss-form-card .gform_wrapper.gform_wrapper input::placeholder,
.iss-page .iss-form-card .gform_wrapper.gform_wrapper textarea::placeholder {
	color: var(--iss-muted);
	opacity: 1;
	font-weight: 400;
}
.iss-page .iss-form-card .gform_wrapper.gform_wrapper select option { color: var(--iss-ink); }
.iss-page .iss-form-card .gform_wrapper.gform_wrapper select option.gf_placeholder,
.iss-page .iss-form-card .gform_wrapper.gform_wrapper select:has(option.gf_placeholder:checked) {
	color: var(--iss-muted);
	font-weight: 400;
}
.iss-page .iss-form-card .gform_wrapper.gform_wrapper input:focus,
.iss-page .iss-form-card .gform_wrapper.gform_wrapper select:focus,
.iss-page .iss-form-card .gform_wrapper.gform_wrapper textarea:focus {
	outline: none;
	border-color: #bcd9ef;
	box-shadow: 0 0 0 4px rgba(12, 115, 201, .1);
}

/* Native select arrow is suppressed above, so draw our own. */
.iss-page .iss-form-card .gform_wrapper.gform_wrapper select {
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%234b5b70' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px 18px;
	cursor: pointer;
}

/* Validation. GF marks the field wrapper and injects a message element. */
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gfield_error input,
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gfield_error select,
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gfield_error textarea {
	border-color: var(--iss-red);
	background: rgba(237, 51, 66, .03);
}
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gfield_error .gfield_label { color: var(--iss-red); }
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gfield_validation_message,
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .validation_message {
	margin-top: 7px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--iss-red);
	font-family: var(--iss-sans);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
}
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gform_validation_errors {
	margin: 0 0 20px;
	padding: 15px 17px;
	border: 1px solid rgba(237, 51, 66, .32);
	border-radius: var(--iss-r-sm);
	background: rgba(237, 51, 66, .06);
	box-shadow: none;
}
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gform_validation_errors > h2 {
	margin: 0;
	color: var(--iss-red);
	font-family: var(--iss-sans);
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: -.01em;
}
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gform_validation_errors > h2::before { display: none; }

/* The consent / legal HTML field. */
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gfield--type-html {
	font-size: 12px;
	line-height: 1.6;
	color: var(--iss-muted-2);
}
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gfield--type-html a { color: var(--iss-blue); text-decoration: underline; }
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gfield--type-html strong { color: var(--iss-ink); }

/* Submit — the primary button, full width because the card is narrow. */
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gform_footer {
	margin: 20px 0 0;
	padding: 0;
}
/*
 * `#main` is here to out-specify The7, not for scoping. The parent theme ships
 * `#main .gform_wrapper .gform_footer input[type="submit"]` — an ID selector,
 * so it beat this rule's five classes and re-pinned `border-radius`, `padding`
 * and `min-width` to its own `--the7-btn-*` tokens. The visible result was a
 * 3px-cornered box where the design system's pill should be: every other CTA
 * on the page is a 999px pill, and the one button that actually submits the
 * lead was the odd one out. Matching The7's ID here is the smallest thing that
 * wins; `!important` would have hidden the conflict rather than resolving it.
 */
#main .iss-page .iss-form-card .gform_wrapper.gform_wrapper .gform_footer input[type="submit"],
#main .iss-page .iss-form-card .gform_wrapper.gform_wrapper .gform_footer button,
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gform_footer input[type="submit"],
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gform_footer button {
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 15px 22px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--iss-blue), var(--iss-blue-dark));
	color: #fff;
	font-family: var(--iss-sans);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -.01em;
	cursor: pointer;
	box-shadow: 0 10px 26px -8px rgba(12, 115, 201, .55);
	transition: transform .22s cubic-bezier(.2, .7, .2, 1), box-shadow .22s ease;
}
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gform_footer input[type="submit"]:hover,
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gform_footer button:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 34px -10px rgba(12, 115, 201, .6);
}
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gform_footer input[type="submit"]:focus-visible {
	outline: 3px solid rgba(12, 115, 201, .35);
	outline-offset: 3px;
}
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gform_ajax_spinner { margin-left: 10px; }

/* reCAPTCHA is a fixed-width 304px iframe; scale it to fit a narrow card. */
/*
 * reCAPTCHA. Google renders a fixed 304×78 widget inside a hardcoded 304px box
 * that neither GF nor we can resize, so on a narrow card it has to be scaled.
 *
 * The container is pinned to the widget's own 304px rather than left to fill
 * the card, and the scale rides on a custom property (§22 sets the steps).
 * Both details are the fix for what shipped: the container filled the card,
 * `overflow: hidden` clipped at the CARD's width, and the scale was a single
 * .86 — so on a 390px phone a 261px-wide widget was cut off inside a 208px box
 * and Google's privacy/terms links were unreachable, with nothing to scroll.
 * Sized to the widget, the clip has nothing left to cut and the only question
 * is whether the scale fits, which §22 answers per breakpoint.
 *
 * `margin-bottom` pulls back the layout height the transform leaves behind —
 * transforms paint smaller without occupying less space. Deriving it from the
 * same variable keeps the two from drifting apart the way a hardcoded
 * `height: 66px` did (it was clipping 12px off the bottom of the widget).
 */
.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gfield--type-captcha .ginput_container {
	width: 304px;
	max-width: none;
	overflow: hidden;
	transform-origin: left top;
	transform: scale(var(--iss-cap-scale, 1));
	margin-bottom: calc(78px * (var(--iss-cap-scale, 1) - 1));
}

/* GF's inline confirmation message, on any page that doesn't redirect. */
.iss-page .iss-form-card .gform_confirmation_message {
	padding: 4px 0;
	color: var(--iss-ink);
	font-size: 16px;
	line-height: 1.6;
}


/* ============================================================
   21. CUSTOMER DIRECTORY  (template-customers.php, single-client.php)
   ------------------------------------------------------------
   The logo grid is the load-bearing component here, and it has
   a hard problem: 56 logos imported from the old site, most of
   them screenshots at 60-250px on assorted white and coloured
   backgrounds. A grid that let each image size itself would
   look like a ransom note.

   So every logo sits in a fixed-height `.iss-logo-plate` and is
   contained inside it — the plate, not the image, sets the
   rhythm. Logos are desaturated at rest and come to colour on
   hover, which also hides a lot of the inconsistency between
   source files.
   ============================================================ */
.iss-page .iss-cust-hero { max-width: 62ch; }
.iss-page .iss-cust-hero h1 { margin: 18px 0 14px; }
.iss-page .iss-cust-hero .iss-btn-row { margin-top: 26px; }

/* --- Industry filter ---------------------------------------------------- */
.iss-page .iss-cust-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-bottom: 26px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--iss-line);
}
.iss-page .iss-cust-filter-label {
	font-family: var(--iss-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--iss-muted-2);
}
.iss-page .iss-cust-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.iss-page .iss-cust-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 15px;
	border-radius: 999px;
	border: 1px solid var(--iss-line-strong);
	background: #fff;
	color: var(--iss-muted);
	font-family: var(--iss-sans);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: -.01em;
	cursor: pointer;
	transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease;
}
.iss-page .iss-cust-chip:hover { border-color: rgba(12, 115, 201, .4); color: var(--iss-blue); transform: translateY(-1px); }
.iss-page .iss-cust-chip:focus-visible { outline: 3px solid rgba(12, 115, 201, .35); outline-offset: 2px; }
.iss-page .iss-cust-chip[aria-pressed="true"] {
	background: var(--iss-blue);
	border-color: var(--iss-blue);
	color: #fff;
}
.iss-page .iss-cust-count {
	font-family: var(--iss-mono);
	font-size: 11px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 6px;
	background: var(--iss-bg-tint);
	color: var(--iss-muted-2);
}
.iss-page .iss-cust-chip[aria-pressed="true"] .iss-cust-count {
	background: rgba(255, 255, 255, .22);
	color: #fff;
}
.iss-page .iss-cust-empty {
	margin-top: 18px;
	font-family: var(--iss-mono);
	font-size: 11.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--iss-muted-2);
}

/* --- Logo grid --------------------------------------------------------- */
.iss-page .iss-logo-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
/* `display:none` rather than opacity: a filtered-out card must not hold space. */
.iss-page .iss-logo-card.iss-filtered-out { display: none; }

.iss-page .iss-logo-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 22px;
	border-radius: var(--iss-r);
	background: var(--iss-card);
	border: 1px solid var(--iss-line);
	box-shadow: var(--iss-e1);
	transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, border-color .25s;
}
.iss-page .iss-logo-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--iss-e2);
	border-color: rgba(12, 115, 201, .25);
}
.iss-page .iss-logo-card:focus-visible {
	outline: 3px solid rgba(12, 115, 201, .35);
	outline-offset: 3px;
}

/*
 * The plate. Fixed height + `object-fit: contain` is what makes 56 mismatched
 * source images read as one set; the tint keeps white-background JPGs from
 * looking like holes punched in the card.
 */
.iss-page .iss-logo-plate {
	display: grid;
	place-items: center;
	height: 84px;
	padding: 12px 16px;
	border-radius: var(--iss-r-sm);
	background: var(--iss-bg-tint);
	border: 1px solid var(--iss-line);
	/* Belt to the min-height:0 brace below — a logo can never escape the plate. */
	overflow: hidden;
}
.iss-page .iss-logo-plate img {
	max-height: 100%;
	max-width: 100%;
	width: auto;
	height: auto;
	/*
	 * A grid item defaults to `min-height: auto`, which refuses to shrink below
	 * the image's intrinsic height — so `max-height: 100%` was being ignored and
	 * tall logos (Heron Therapeutics' 154px-high file in an 84px plate) spilled
	 * out over the industry label and the company name below.
	 */
	min-width: 0;
	min-height: 0;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .78;
	transition: filter .3s ease, opacity .3s ease;
	/* Many sources are JPGs with a baked-in white box; blending drops it into
	   the plate instead of leaving a hard white rectangle. */
	mix-blend-mode: multiply;
}
.iss-page .iss-logo-card:hover .iss-logo-plate img { filter: grayscale(0); opacity: 1; }

.iss-page .iss-logo-body { display: flex; flex-direction: column; gap: 7px; flex: 1 1 auto; }
.iss-page .iss-logo-name {
	font-weight: 700;
	font-size: 17px;
	letter-spacing: -.02em;
	color: var(--iss-ink);
	line-height: 1.25;
}
.iss-page .iss-logo-card:hover .iss-logo-name { color: var(--iss-blue); }
/*
 * Blurbs come from ISS's own copy and vary from one line to a full paragraph.
 * Clamping to four lines keeps the grid's rows even without truncating the
 * source text in the database — the whole profile is on the customer's page.
 */
.iss-page .iss-logo-blurb {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--iss-muted);
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.iss-page .iss-logo-card .iss-inlink { margin-top: auto; font-size: 13px; }
.iss-page .iss-logo-card .iss-logo-mono { width: 52px; height: 52px; font-size: 17px; }

/* Compact variant — the "also in this industry" row on a customer page. */
.iss-page .iss-logo-grid-compact { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.iss-page .iss-logo-grid-compact .iss-logo-card { flex-direction: row; align-items: center; gap: 14px; padding: 14px; }
.iss-page .iss-logo-grid-compact .iss-logo-plate { height: 54px; width: 104px; flex: none; padding: 8px 10px; }
.iss-page .iss-logo-grid-compact .iss-logo-name { font-size: 15px; }

/* --- Customer page ----------------------------------------------------- */
.iss-page .iss-client-hero {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 34px;
	align-items: start;
}
.iss-page .iss-client-mark {
	display: grid;
	place-items: center;
	height: 150px;
	padding: 22px;
	border-radius: var(--iss-r-lg);
	background: #fff;
	border: 1px solid var(--iss-line);
	box-shadow: var(--iss-e1);
	overflow: hidden;
}
.iss-page .iss-client-mark img {
	max-height: 100%;
	max-width: 100%;
	width: auto;
	min-width: 0;
	min-height: 0;
	object-fit: contain;
	mix-blend-mode: multiply;
}
.iss-page .iss-client-mark .iss-logo-mono { width: 74px; height: 74px; font-size: 24px; border-radius: 18px; }
.iss-page .iss-client-hero h1 { margin: 16px 0 14px; font-size: clamp(30px, 3.6vw, 44px); }

.iss-page .iss-client-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: 34px;
	align-items: start;
}
.iss-page .iss-client-profile .iss-sec-head { margin-bottom: 20px; }
.iss-page .iss-client-aside { display: grid; gap: 16px; position: sticky; top: 100px; }

.iss-page .iss-side-card {
	display: block;
	padding: 24px;
	border-radius: var(--iss-r);
	background: var(--iss-card);
	border: 1px solid var(--iss-line);
	box-shadow: var(--iss-e1);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.iss-page .iss-side-card h3 { margin: 12px 0 8px; font-size: 18px; }
.iss-page .iss-side-card p { font-size: 14px; line-height: 1.55; }
.iss-page .iss-side-card .iss-clean-list { margin-top: 14px; }
.iss-page .iss-side-snapshot:hover {
	transform: translateY(-3px);
	box-shadow: var(--iss-e2);
	border-color: rgba(12, 115, 201, .3);
}
.iss-page .iss-side-snapshot:focus-visible { outline: 3px solid rgba(12, 115, 201, .35); outline-offset: 3px; }
.iss-page .iss-side-snapshot .iss-inlink { margin-top: 14px; font-size: 13.5px; }

.iss-page .iss-side-cta {
	background: linear-gradient(135deg, var(--iss-navy), var(--iss-blue));
	border-color: rgba(255, 255, 255, .16);
	color: #fff;
}
.iss-page .iss-side-cta p { color: rgba(255, 255, 255, .88); margin: 12px 0 18px; }
.iss-page .iss-side-cta .iss-btn { width: 100%; }

/* ============================================================
   22. RESPONSIVE
   ============================================================ */
@media (max-width: 940px) {
	/*
	 * One column, and the aside goes BELOW the form rather than between the
	 * pitch and the first field. Stacked, the two panel columns are read in
	 * sequence, so their heights are unrelated (CLAUDE.md says not to chase a
	 * difference here) — and the aside is ~340px of facts and contact details
	 * that only exists inside the panel to balance a desktop layout. Leaving it
	 * in source order would push the first form field ~340px further down a
	 * phone, which is a real cost paid to fix a symptom that isn't present.
	 *
	 * The explicit desktop placement is behind a min-width query in §19 rather
	 * than being undone here, so all this needs is `order` — auto-placement
	 * honours it, and this lands pitch → form → facts → contact, which is the
	 * order these things were in before they moved into the panel at all.
	 */
	.iss-page .iss-form-panel { grid-template-columns: 1fr; grid-template-rows: auto; }
	.iss-page .iss-form-panel > .iss-form-card { order: 1; }
	.iss-page .iss-form-panel > .iss-panel-aside { order: 2; }
	.iss-page .iss-hero-2col,
	.iss-page .iss-ai-2col,
	.iss-page .iss-ai-grid { grid-template-columns: 1fr; gap: 36px; }
	.iss-page .iss-split { grid-template-columns: 1fr; }
	.iss-page .iss-metrics { grid-template-columns: repeat(2, 1fr); }
	.iss-page .iss-cap-grid,
	.iss-page .iss-val-grid,
	.iss-page .iss-tile-grid,
	.iss-page .iss-tile-grid.iss-cols-2,
	.iss-page .iss-tile-grid.iss-cols-4 { grid-template-columns: 1fr; }
	.iss-page .iss-stats-grid { grid-template-columns: repeat(2, 1fr); }
	.iss-page .iss-pipeline { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
	.iss-page .iss-pnode::after { display: none !important; }

	/* Customer directory */
	.iss-page .iss-logo-grid,
	.iss-page .iss-logo-grid-compact { grid-template-columns: repeat(2, 1fr); }
	.iss-page .iss-client-body { grid-template-columns: 1fr; }
	.iss-page .iss-client-aside { position: static; }
	.iss-page .iss-client-hero { grid-template-columns: 150px 1fr; gap: 24px; }
	.iss-page .iss-client-mark { height: 120px; padding: 16px; }
}

@media (max-width: 560px) {
	.iss-page .iss-metrics,
	.iss-page .iss-stats-grid { grid-template-columns: 1fr; }
	.iss-page .iss-metric { border-right: 0; border-bottom: 1px solid var(--iss-line); }
	.iss-page .iss-metric:last-child { border-bottom: 0; }

	/*
	 * Hero workflow card. The status badge drops under the stage text rather
	 * than staying in its own column — at this width three columns squeezed the
	 * stage title into two or three words per line.
	 */
	.iss-page .iss-hero-wf { padding: 18px; }
	.iss-page .iss-hero-wf-item { grid-template-columns: 31px 1fr; }
	.iss-page .iss-hero-wf-status { grid-column: 2; }

	/* Form / CTA template */
	.iss-page .iss-trust-strip { grid-template-columns: 1fr; }
	/*
	 * The panel aside's fact rows go back to label-above-value here. Side by
	 * side, "YOU'LL HEAR BACK" and "Within one business day" want ~290px and
	 * the panel's content box is 274px on a 390px phone — the value wraps to
	 * two ragged lines against a label it no longer lines up with. Stacked is
	 * what the standalone strip does at this width, and for the same reason.
	 */
	.iss-page .iss-panel-aside .iss-panel-facts .iss-trust {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
	.iss-page .iss-panel-aside .iss-panel-facts .iss-trust .iss-fv { text-align: left; }
	.iss-page .iss-contact-strip { flex-direction: column; align-items: stretch; }
	.iss-page .iss-contact-links { flex-direction: column; }
	.iss-page .iss-faq-item > summary { padding: 17px 18px; font-size: 15px; }

	/* Customer directory: one column, and the logo plate above the name. */
	.iss-page .iss-logo-grid,
	.iss-page .iss-logo-grid-compact { grid-template-columns: 1fr; }
	.iss-page .iss-client-hero { grid-template-columns: 1fr; }
	.iss-page .iss-client-mark { height: 104px; max-width: 240px; }
	.iss-page .iss-cust-filter { gap: 10px; }
	.iss-page .iss-faq-a { padding: 0 18px 18px; }

	/*
	 * ---- The phone budget --------------------------------------------------
	 * This hero nests three boxes that each take padding: the page wrap (40px
	 * of gutter, site-wide and shared with every other section), then the
	 * panel, then the card. At the old minimums that was 180px of chrome on a
	 * 390px phone and the form was left with 208px — narrower than a single
	 * reCAPTCHA widget, and on a 320px screen it fell to 138px.
	 *
	 * The gutter is the site's rhythm and stays. The two mins that are this
	 * component's own come down instead, which buys the fields ~34px back
	 * without changing how the page lines up with the sections under it.
	 */
	.iss-page .iss-form-panel { padding: 18px; }
	.iss-page .iss-form-card { padding: 16px; }

	/*
	 * reCAPTCHA scale steps. See §20's `.gfield--type-captcha` rule for the
	 * mechanism; these are just the values, and they are MEASURED against the
	 * card widths this component actually produces at each width (with the
	 * padding above), not picked to look about right:
	 *
	 *   viewport   card content   304 × scale   fits
	 *   ≤560px     266px @414     261px @.86    yes
	 *   ≤410px     210px @360     207px @.68    yes
	 *   ≤359px     172px @320     167px @.55    yes
	 *
	 * The last step is a compromise and worth knowing about: at 320px the
	 * widget's checkbox lands near 15px, under the 24px target-size minimum.
	 * There is no scale that both fits 304px into 172px and keeps the checkbox
	 * large, and a widget that fits is better than one whose right-hand third
	 * is invisible — which is what every width below 480px was serving.
	 */
	.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gfield--type-captcha .ginput_container { --iss-cap-scale: .86; }
}

@media (max-width: 410px) {
	.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gfield--type-captcha .ginput_container { --iss-cap-scale: .68; }
}

@media (max-width: 359px) {
	.iss-page .iss-form-card .gform_wrapper.gform_wrapper .gfield--type-captcha .ginput_container { --iss-cap-scale: .55; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.iss-page .iss-reveal { opacity: 1; transform: none; transition: none; }
	.iss-page * { animation: none !important; }
	.iss-page .iss-marquee { -webkit-mask: none; mask: none; }
	.iss-page .iss-marquee-track { flex-wrap: wrap; width: 100%; }
	.iss-page .iss-marquee-dup { display: none; }
}

/* ============================================================
   23. PARENT-THEME SEARCH FORM
   ------------------------------------------------------------
   The7 renders `form.searchform` on the search-results and 404
   templates — which is exactly where our header search sends
   people, so the two were sitting inches apart in different
   visual languages. This is the one block in this file that is
   deliberately NOT scoped under `.iss-page`: it restyles parent-
   theme chrome on templates we don't own.

   The form ships a real submit input plus a decorative
   `<a class="submit" href="">` whose empty href reloads the page
   when clicked. We hide the anchor, keep the real submit
   available to screen readers and mobile keyboards, and show a
   CSS magnifier instead — matching the header sheet, where Enter
   is the only way to submit.
   ============================================================ */

.searchform {
	position: relative;
	display: flex;
	align-items: center;
	/* The7 leaves the form at width:0 inside the no-results article. */
	width: 100%;
	max-width: 560px;
	margin: 22px 0 0;
	padding: 0 18px 0 46px;
	background: #fff;
	border: 1px solid var(--iss-line, #e4edf6);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(19, 40, 58, .04);
	transition: border-color .18s ease, box-shadow .18s ease;
}

.searchform::before {
	content: "";
	position: absolute;
	left: 17px;
	top: 50%;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	background: currentColor;
	color: #6b7c92;
	/* Same glyph as the header field, as a mask so it inherits colour. */
	-webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8.75' cy='8.75' r='5.75' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M13.2 13.2 17.5 17.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
	mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8.75' cy='8.75' r='5.75' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M13.2 13.2 17.5 17.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
	transition: color .18s ease;
	pointer-events: none;
}

.searchform:focus-within {
	border-color: #bcd9ef;
	box-shadow: 0 0 0 4px rgba(12, 115, 201, .1);
}

.searchform:focus-within::before {
	color: var(--iss-blue, #0d6fbb);
}

/* Qualified with the form so it beats The7's `input[type="text"]` (0,0,1,1). */
.searchform input[type="text"].searchform-s,
.searchform input[type="search"].searchform-s {
	flex: 1 1 auto;
	min-width: 0;
	height: 54px;
	padding: 0;
	margin: 0;
	color: var(--iss-ink, #0b1b2b);
	background: transparent;
	border: 0;
	border-radius: 0;
	outline: none;
	box-shadow: none;
	font-family: inherit;
	/* 16px minimum, or iOS Safari zooms the viewport on focus. */
	font-size: 16.5px;
	font-weight: 500;
	letter-spacing: -.01em;
	-webkit-appearance: none;
	appearance: none;
}

.searchform input.searchform-s::placeholder {
	color: #9dabbc;
	font-weight: 400;
}

/* ============================================================
   24. SOLUTION PAGE SYSTEM — additive components for the V17/V12/V5
   standardized Solution-page rebuild (contextual nav, platform bridge,
   capability detail modules, elevated QAD section, project-snapshot
   teaser, iAssist orbit variant). Every rule here is scoped to markup
   that only renders when its own new ACF fields are populated, so
   pages that don't set them (iApprove, iAssist) are unaffected.
   ============================================================ */

/*
 * 24a. Hero-docked contextual capability nav.
 *
 * NOT `position: sticky` — `body` on this site carries `overflow: hidden
 * auto` (pre-existing, site-wide; confirmed the homepage's reading-progress
 * bar has the identical problem), which makes body itself the sticky
 * positioning container instead of the viewport, so `position: sticky`
 * silently never sticks. That's a body-level fix with unclear blast radius
 * (mobile-menu overlay containment likely depends on it), out of scope here.
 * Instead: normal flow until `js/iss-interactions.js` docks it via a real
 * `position: fixed` once the hero scrolls out of view — fixed positioning
 * only cares about a `transform`/`filter`/`will-change` ancestor, and none of
 * this page's ancestors set one (confirmed on staging). `.iss-cap-nav-spacer`
 * (right before the nav in the markup) reserves the space the docked nav
 * leaves behind so nothing jumps.
 */
.iss-page .iss-cap-nav {
	position: relative;
	z-index: 60;
	/*
	 * Overlaps the hero's bottom edge, per the handoff — the shelf reads as
	 * docked TO the hero rather than as the first thing in the body copy.
	 */
	margin-top: -36px;
	margin-bottom: 30px;
}
.iss-page .iss-cap-nav.iss-docked {
	position: fixed;
	/*
	 * The site header is itself `position: fixed` (z-index 1000) at its
	 * condensed/stuck height, and this nav has to sit BELOW it, not under it.
	 *
	 * This was `top: 67px`, a hardcoded number keyed to a 66px header. The
	 * header is 106px + 1px of border when stuck now (iss-header.css grew it so
	 * the tagline could stay in the bar), and nothing told this rule — so the
	 * header covered the shelf's top 40px, which on desktop is exactly where
	 * the pills are. They were not merely hidden: `elementFromPoint` over the
	 * first pill returned `.iss-hdr__nav`, so the header was swallowing the
	 * clicks. tests/purchasing.spec.js caught it as a click timeout
	 * ("subtree intercepts pointer events") rather than as a layout assertion.
	 *
	 * So it is measured now, not hardcoded: js/iss-interactions.js writes the
	 * header's real bottom edge into `--iss-cap-dock-top`. That also makes the
	 * admin-bar cases below fall out for free rather than needing their own
	 * arithmetic — a measured bottom edge already includes the offset.
	 *
	 * The fallbacks are for the pre-JS frame, and are the CURRENT header
	 * heights: 107px, +32px / +46px for the two admin-bar breakpoints.
	 */
	top: var(--iss-cap-dock-top, 107px);
	left: 0;
	right: 0;
	margin: 0;
}
body.admin-bar .iss-page .iss-cap-nav.iss-docked { top: var(--iss-cap-dock-top, 139px); }
@media screen and (max-width: 782px) {
	body.admin-bar .iss-page .iss-cap-nav.iss-docked { top: var(--iss-cap-dock-top, 153px); }
}
.iss-page .iss-cap-nav-spacer { height: 0; }
/*
 * ---- 24a-1. Hero → shelf → first section: the boundary -----------------
 * The shelf is a SIBLING between the hero and the page's first section, which
 * quietly breaks `.iss-tight`'s premise (§3). A tight section is flush because
 * "the thing above already supplies the space" — but the thing directly above
 * this one is no longer the hero, it's a floating card, and its bottom margin
 * was the entire clearance the section's kicker got. "How it works" landed 46px
 * under the card and read as jammed against the hero, while the slack it needed
 * sat unused in the hero's ~104px of empty bottom padding.
 *
 * Danny's spec, after three passes of moving that space around and none of them
 * landing (2026-09-07): ZERO bare gap between the hero and How It Works, and
 * all of the space below the boundary is the section's own top padding, with
 * the heading below the shelf. So the shelf now sits INSIDE the hero's navy
 * rather than straddling its edge, and the section starts exactly on that edge.
 *
 * How, and why it is built this way rather than with offsets:
 *
 *   `height: 0` gives the undocked shelf ZERO flow footprint, so the next
 *   section's top edge lands exactly on the hero's bottom edge — there is no
 *   arithmetic that can leave a sliver of page ground between them.
 *   `translateY(-100%)` then lifts the card by exactly its OWN height, so it
 *   sits flush against the hero's bottom edge whatever that height turns out to
 *   be. Both halves are height-independent on purpose: the previous pass tuned
 *   this boundary with hand-computed offsets against an assumed 73px shelf, and
 *   at narrow widths the numbers stopped agreeing and the shelf landed on the
 *   hero's own workflow card (-16px at 390px).
 *
 * CONSEQUENCE worth knowing before you query this thing: `.iss-cap-nav` is now
 * a zero-height anchor, not a box. Anything measuring or asserting on the
 * VISIBLE shelf — tests, `getBoundingClientRect`, `toBeVisible()` — has to use
 * `.iss-cap-nav-in`. The wrapper still gets a real height back the moment it
 * docks, since `:not(.iss-docked)` scopes both rules.
 *
 * `--iss-shelf-h` is the one place the height is still needed — the hero has to
 * be tall enough to hold the shelf inside its bottom padding — and that failure
 * mode is visible rather than silent, so it is asserted at every width in
 * tests/purchasing.spec.js instead of being trusted.
 *
 * Keyed on the hero-docked shelf specifically. The Project Snapshot template
 * puts a metadata strip between the hero and the shelf and cancels the overlap
 * (project-snapshot-mimedx.css §), so its boundary is a different shape and
 * keeps the spacing it was approved with.
 */
.iss-page:has(> .iss-detail-hero + .iss-cap-nav-spacer + .iss-cap-nav) {
	/*
	 * A FALLBACK, not the number. js/iss-interactions.js measures
	 * `.iss-cap-nav-in` and writes the real height into this property inline
	 * (on load, on resize, and whenever the shelf itself resizes), because the
	 * height is not a constant: it depends on the page's own title wrapping
	 * ("Supplier Lifecycle Management" takes two lines where "Purchasing" takes
	 * one) and it changes again when the shelf stacks at 960px. The value here
	 * is what applies for the frame before that runs, and for good if the JS
	 * never does — so it is the tallest of the measured heights in each range,
	 * not the average. Under-reserving is the failure mode that puts the shelf
	 * on the hero's own card, which tests/purchasing.spec.js asserts against.
	 */
	--iss-shelf-h: 84px;
	/* Navy left showing between the hero's content and the top of the shelf. */
	--iss-shelf-inset: clamp(24px, 2vw, 32px);
}
@media (max-width: 960px) {
	/* Stacked (§24a-3): title on its own line above the links, and a title that
	   wraps to two lines at the narrowest widths. */
	.iss-page:has(> .iss-detail-hero + .iss-cap-nav-spacer + .iss-cap-nav) {
		--iss-shelf-h: 116px;
	}
}
/*
 * The shelf lives inside this padding now, so it has to clear the hero's own
 * content by `--iss-shelf-inset` on top of the shelf's height.
 */
.iss-page .iss-detail-hero:has(+ .iss-cap-nav-spacer + .iss-cap-nav) {
	padding-bottom: calc(var(--iss-shelf-h) + var(--iss-shelf-inset));
}
/*
 * Zero flow footprint + a self-measuring lift. `margin: 0` also cancels §24a's
 * shared -36px overlap and its narrow-width -20px variant: the transform below
 * does that job now, at every width, so there is nothing left to special-case.
 */
.iss-page .iss-detail-hero + .iss-cap-nav-spacer + .iss-cap-nav:not(.iss-docked) {
	height: 0;
	margin: 0;
}
.iss-page .iss-detail-hero + .iss-cap-nav-spacer + .iss-cap-nav:not(.iss-docked) .iss-cap-nav-in {
	transform: translateY(-100%);
}
/*
 * ...and every pixel between the boundary and the heading is now this section's
 * own top padding, sitting on the section's own tinted ground rather than on
 * bare page background.
 */
.iss-page .iss-detail-hero + .iss-cap-nav-spacer + .iss-cap-nav + .iss-section.iss-tight {
	padding-top: clamp(28px, 2.2vw, 36px);
}

/*
 * A WHITE shelf, not the navy bar this used to be. The hero above it is now dark
 * (§7), so a dark shelf on a dark hero lost its edge entirely — the handoff
 * inverts it to near-opaque white, which is also what makes the -36px overlap
 * above read as a deliberate dock rather than as an overlap bug.
 */
.iss-page .iss-cap-nav-in {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 72px;
	padding: 8px 12px;
	background: rgba(255, 255, 255, .97);
	border: 1px solid var(--iss-line);
	border-radius: 16px;
	box-shadow: 0 15px 38px rgba(19, 40, 58, .13);
	backdrop-filter: blur(12px);
	/*
	 * NOT a scroll container. The overflow lives on `.iss-cap-nav-links` below
	 * — see the note there for why scrolling the whole card was the bug.
	 */
}
/*
 * ...and it retires before the footer. Docked means `position: fixed`, so with
 * nothing to stop it the shelf keeps floating on top of the footer once the
 * page bottoms out — covering the footer's first column, and still pointing at
 * sections the reader has already scrolled past. `js/iss-interactions.js` adds
 * `.iss-cap-nav-away` the moment the footer's top edge reaches the shelf's
 * bottom edge, and removes it on the way back up.
 *
 * The fade lives on `.iss-cap-nav-in`, not on `.iss-cap-nav` itself, so the
 * translate never moves the nav's own box — the JS measures that box every
 * frame to decide when to hide, and animating it would feed back into its own
 * trigger point. `visibility` (delayed out, instant back) rather than opacity
 * alone so the links drop out of the tab order while hidden.
 */
.iss-page .iss-cap-nav-in {
	transition: opacity .22s ease, transform .22s ease, visibility 0s;
}
.iss-page .iss-cap-nav.iss-docked.iss-cap-nav-away .iss-cap-nav-in {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-14px);
	pointer-events: none;
	transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
/* Reduced motion still hides it — it just cuts instead of fading. Declared
   here rather than in the §22 reduced-motion block because that block sits
   earlier in the file and would lose the source-order tie above. */
@media (prefers-reduced-motion: reduce) {
	.iss-page .iss-cap-nav-in,
	.iss-page .iss-cap-nav.iss-docked.iss-cap-nav-away .iss-cap-nav-in { transition: none; }
}
.iss-page .iss-cap-nav-label {
	/* Fixed width (not just min-width) so the two-line label wraps to fit
	   instead of sizing to its own longest unbroken line ("Workflow +
	   decision framework for QAD" alone ran ~230px wider than the old
	   178px min-width, which is what pushed the row into horizontal
	   scroll on desktop). */
	flex: 0 0 150px;
	width: 150px;
	padding: 4px 12px 4px 4px;
	border-right: 1px solid var(--iss-line);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.01em;
	color: var(--iss-navy);
}
.iss-page .iss-cap-nav-label span {
	display: block;
	margin-top: 5px;
	font-family: var(--iss-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--iss-muted-2);
}
/*
 * ---- 24a-2. The links row is the only thing that scrolls -----------------
 * This row holds 5-8 fixed pills whose combined width is a property of the
 * page's own section names, not of the viewport — Platform's eight come to
 * ~810px, Supplier Lifecycle Management's six to ~1100px. Past some width they
 * cannot fit, and the question is only what gives.
 *
 * What used to give was the CARD. `min-width: max-content` here made this row
 * refuse to shrink below its full content width, so the shrinking landed on
 * `.iss-cap-nav-in`, which was the scroll container — and scrolling the card
 * drags its TITLE BLOCK sideways with the links and clips it against the card's
 * own rounded edge. Supplier Lifecycle Management did that at 1512px; every
 * page did it by 390px. That is the bug this fixes.
 *
 * Now the row shrinks (`min-width: 0` — a flex item's `auto` minimum is its
 * content, which is the same trap under another name) and scrolls INSIDE the
 * card, so the title block never moves and nothing is clipped. The scrollbar is
 * hidden to match the mockup; `.iss-more-before` / `.iss-more-after` (set by
 * js/iss-interactions.js) put the affordance back as an edge fade, because a
 * scrolling row with no scrollbar and no fade is exactly what reads as broken.
 */
.iss-page .iss-cap-nav-links {
	display: flex;
	gap: 4px;
	align-items: center;
	/*
	 * Shrink but never grow. `min-width: 0` is the whole fix (a flex item's
	 * default `auto` minimum is its content width — the same refusal to shrink
	 * that `min-width: max-content` was spelling out loud); growing is NOT,
	 * and would quietly break the Project Snapshot bar, whose desktop
	 * treatment centres the row's contents with `justify-content: center`
	 * (project-snapshot.css) and needs the row to stay content-width to do it.
	 */
	flex: 0 1 auto;
	min-width: 0;
	overflow-x: auto;
	/* A horizontal swipe here is for the row, not for browser back-navigation. */
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	/*
	 * Both fades are 0 until the JS says otherwise, which makes this mask a
	 * no-op (two stops at 0%, two at 100%) rather than something that eats the
	 * first and last pill on a row that fits.
	 */
	--iss-nav-fade-l: 0px;
	--iss-nav-fade-r: 0px;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--iss-nav-fade-l), #000 calc(100% - var(--iss-nav-fade-r)), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 var(--iss-nav-fade-l), #000 calc(100% - var(--iss-nav-fade-r)), transparent 100%);
}
.iss-page .iss-cap-nav-links::-webkit-scrollbar { display: none; }
.iss-page .iss-cap-nav-links.iss-more-before { --iss-nav-fade-l: 24px; }
.iss-page .iss-cap-nav-links.iss-more-after { --iss-nav-fade-r: 24px; }
.iss-page .iss-cap-nav-links a {
	flex: none;
	white-space: nowrap;
	padding: 7px 10px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	color: #42586a;
	transition: background .18s, color .18s, border-color .18s;
}
.iss-page .iss-cap-nav-links a:hover,
.iss-page .iss-cap-nav-links a:focus-visible,
.iss-page .iss-cap-nav-links a.iss-active {
	background: #eaf5fc;
	color: var(--iss-blue);
	border-color: #cfe7f7;
}
/*
 * Right-hand hint. Decorative — the links beside it already say what they do —
 * so it is aria-hidden in the markup and drops out first when width runs short.
 */
.iss-page .iss-cap-nav-micro {
	margin-left: auto;
	flex: none;
	padding: 0 5px 0 9px;
	white-space: nowrap;
	font-family: var(--iss-mono);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: #8b9ba8;
}

/* 24b. Built on iApprove Platform — architecture bridge */
.iss-page .iss-bridge { max-width: 820px; }
.iss-page .iss-bridge-themes {
	margin-top: 26px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 20px;
}
.iss-page .iss-bridge-theme h4 { font-size: 15px; margin-bottom: 6px; }
.iss-page .iss-bridge-theme p { font-size: 13.5px; color: var(--iss-muted); }

/*
 * 24c. Capability detail modules — numbered, one per capability.
 *
 * `.iss-tight` (§7) zeros a section's top padding so it can sit flush
 * against whatever comes before it — right for a bare text block, but these
 * are their own alternating-background "chapters" now, and with the
 * illustrative panel making them taller, a zeroed top against a full bottom
 * padding reads as the number sitting right on the section's top edge with
 * the content pushed down. Give this specific section its own balanced
 * padding instead of relying on the tight convention.
 */
.iss-page .iss-cap-detail.iss-cap-detail { padding: clamp(48px, 7vw, 88px) 0; }
/*
 * ZEBRA GROUND. Was `.iss-cap-detail:nth-of-type(even)`, which counted every
 * <section> on the page rather than every capability, so the alternation's
 * PHASE depended on how many sections happened to render above it — and a page
 * gaining or losing a section anywhere earlier silently flipped the whole run.
 * That is how Invoice & AP Workflow ended up tinting capability 01, which its
 * Clean HTML paints white.
 *
 * single-solution.php now sets the class per capability, off that list's own
 * index, and which end the alternation starts from is per-page data
 * (`cap_detail_zebra_start`) because the packages disagree: Purchasing V27 and
 * Supplier Lifecycle V14 tint 01/03/05 (`.capability-detail.alt`), Invoice & AP
 * V6 tints 02/04 (`.capability-detail.soft`). The default is "first", which is
 * what the old rule effectively did on those two pages.
 *
 * FULL-BLEED, because it is a section ground in all three packages, not a
 * column-width tint — `.capability-detail.alt` and `.soft` both paint edge to
 * edge. Invoice & AP overrides the fill itself (a soft gradient rather than a
 * flat tint) in css/invoice-ap-workflow.css.
 */
/* Class DOUBLED, for the reason §3's `.iss-bleed` docblock gives: a bled
   section's padding-inline is what puts back the width its negative margin
   took away, and `.iss-cap-detail.iss-cap-detail` above sets `padding` as a
   shorthand at higher specificity — which zeroes it, dropping the content
   column 20px from the viewport edge on a phone. */
.iss-page .iss-cap-detail-soft.iss-cap-detail-soft {
	background: var(--iss-bg);
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
}
/*
 * ONE column of copy, plus the panel when there is one.
 *
 * This used to lead with a big ghost numeral in its own `auto` column, so the
 * grid ran (number, copy, panel). The V5 handoff doesn't have that numeral —
 * the number is part of the eyebrow ("01 · INVOICE CAPTURE") instead — so it
 * was removed from the markup, and these track counts have to come down with
 * it. Left at three, the copy inherited the shrink-wrapped `auto` column meant
 * for the numeral and collapsed to a ~150px ribbon while the panel overflowed
 * the last track.
 */
.iss-page .iss-cap-detail-in {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
	align-items: start;
	max-width: 820px;
}
/* With an illustrative panel, the module widens to a real two-column layout
   (copy, then the panel) instead of the text-only max-width. */
.iss-page .iss-cap-detail-in.iss-cap-detail-in-visual {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	max-width: 1120px;
	gap: clamp(32px, 4vw, 56px);
	align-items: center;
}

/*
 * Illustrative UI panel — a generalized stand-in for each capability's own
 * bespoke mockup widget in the source handoffs (a purchase requisition form,
 * a PunchOut cart, a risk-review card, a lifecycle track, …). Rather than
 * building N one-off widgets, every capability gets the same toolbar + rows
 * + footer shape, carrying whatever label/value/tag content is closest to
 * its own mockup — same visual intent, one reusable component. Decorative
 * (aria-hidden): the same information is already in the text copy.
 */
.iss-page .iss-cap-visual {
	border: 1px solid var(--iss-line);
	border-radius: var(--iss-r);
	background: var(--iss-card);
	box-shadow: var(--iss-e2);
	padding: 22px;
	position: relative;
	overflow: hidden;
}
.iss-page .iss-cap-visual::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--iss-blue), var(--iss-sky));
}
.iss-page .iss-cap-visual-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 13px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--iss-line);
	font-family: var(--iss-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--iss-muted-2);
}
.iss-page .iss-cap-visual-dots { display: flex; gap: 5px; }
.iss-page .iss-cap-visual-dots i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--iss-line-strong); }
.iss-page .iss-cap-visual-rows { display: grid; gap: 9px; }
.iss-page .iss-cap-visual-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 13px;
	border: 1px solid var(--iss-line);
	border-radius: 10px;
	background: var(--iss-bg-tint);
}
.iss-page .iss-cap-visual-row b { display: block; font-size: 13px; color: var(--iss-ink); }
.iss-page .iss-cap-visual-row span { display: block; font-size: 12px; color: var(--iss-muted); margin-top: 2px; }
.iss-page .iss-cap-visual-tag {
	flex: none;
	font-family: var(--iss-mono);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 5px 8px;
	border-radius: 999px;
}
.iss-page .iss-cap-visual-tag-good {
	background: rgba(22, 163, 74, .12);
	color: var(--iss-green);
}
.iss-page .iss-cap-visual-tag-warn {
	background: rgba(217, 119, 6, .12);
	color: #b45309;
}
.iss-page .iss-cap-visual-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--iss-line);
	font-size: 12px;
	color: var(--iss-muted);
}
.iss-page .iss-cap-visual-action {
	flex: none;
	font-family: var(--iss-mono);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	padding: 8px 12px;
	border-radius: 8px;
	background: var(--iss-blue);
	color: #fff;
}

/* 24d. Real-Time QAD Integration — elevated differentiator */
.iss-page .iss-qad-elevated {
	background:
		radial-gradient(120% 140% at 100% 0%, rgba(12, 115, 201, .12), transparent 55%),
		linear-gradient(150deg, #f6faff, #e9f3fc);
	border-radius: var(--iss-r-lg);
	border: 1px solid #d3e6f7;
}
/*
 * Same `.iss-tight`-vs-own-background fix as §25c: this panel's rounded card
 * is painted on the section itself, so a zeroed top padding sat the kicker
 * flush against its top edge. Give it back real top padding.
 *
 * Unlike §25c's bands, this is a distinct rounded/bordered CARD, not a
 * flush-fitting full-bleed band — so padding alone isn't enough. Padding only
 * moves the heading away from the card's own edge; the card's background and
 * border still touch whatever section precedes it (often another dark band)
 * with no page-ground visible between them. Margin puts real whitespace
 * outside the card, same amount as the top padding inside it.
 */
.iss-page .iss-qad-elevated.iss-qad-elevated {
	padding-top: clamp(48px, 7vw, 88px);
	margin-top: clamp(48px, 7vw, 88px);
}
.iss-page .iss-qad-elevated .iss-sec-head { max-width: 720px; }
.iss-page .iss-qad-elevated .iss-metric .iss-mnum { color: var(--iss-blue); }

/* 24e. Customer Proof / Project Snapshot teaser — dark left, light right */
.iss-page .iss-snap-teaser {
	display: grid;
	grid-template-columns: minmax(240px, .8fr) 1.2fr;
	border-radius: var(--iss-r-lg);
	overflow: hidden;
	box-shadow: var(--iss-e2);
}
.iss-page .iss-snap-teaser-dark {
	background: linear-gradient(160deg, var(--iss-navy), var(--iss-navy-2));
	color: #fff;
	padding: clamp(28px, 4vw, 40px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 16px;
}
.iss-page .iss-snap-teaser-dark .iss-kicker { color: var(--iss-sky); }
/*
 * The customer's mark, on a white chip. NO `mix-blend-mode` — and that absence
 * is the fix, so don't put it back.
 *
 * This rule shipped as `mix-blend-mode: multiply` + `background: #fff`, copied
 * from the three places the idiom IS correct — `.iss-proof-tile .iss-proof-logo
 * img`, `.iss-logo-plate img` and `.iss-client-mark img`, all of which sit on a
 * LIGHT card, where multiply drops a source's baked-in white box into it. Here the
 * panel behind is `.iss-snap-teaser-dark`'s navy gradient, and `mix-blend-mode`
 * blends the whole element — its own background included — with whatever is
 * behind it. multiply(#fff, navy) is navy, so the chip dissolved; multiply(dark
 * ink, navy) is near-black, so the mark went with it. All four Workflow Area
 * pages served a black rectangle where the logo should be (client report,
 * 2026-09-16).
 *
 * The chip is opaque, so multiply buys nothing back: multiply against pure
 * white is a no-op, and a source's own white box is invisible on a white chip
 * anyway. A white plate is this site's own idiom for a mark on navy — it is
 * what the footer does with the ISS logo, and for the same reason.
 *
 * `tests/snapshot-proof-logo.spec.js` measures the rendered pixels rather than
 * the declaration: the element was always present and always `toBeVisible()`.
 */
.iss-page .iss-snap-teaser-logo img { max-height: 46px; max-width: 180px; width: auto; height: auto; background: #fff; border-radius: 8px; padding: 8px 14px; }
.iss-page .iss-snap-teaser-mono {
	width: 56px;
	height: 56px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	display: grid;
	place-items: center;
	font-weight: 700;
	letter-spacing: .02em;
}
.iss-page .iss-snap-teaser-name { font-weight: 600; color: rgba(255, 255, 255, .9); margin: 0; }
.iss-page .iss-snap-teaser-light { background: var(--iss-card); padding: clamp(28px, 4vw, 40px); display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.iss-page .iss-snap-teaser-light h3 { font-size: 22px; margin: 0; }
.iss-page .iss-snap-teaser-theme { color: var(--iss-blue); font-weight: 600; font-size: 14px; }
.iss-page .iss-snap-teaser-light .iss-btn { align-self: flex-start; margin-top: 6px; }
.iss-page .iss-btn-disabled {
	display: inline-flex;
	align-self: flex-start;
	margin-top: 6px;
	opacity: .55;
	cursor: default;
	pointer-events: none;
}

/*
 * 24f. iAssist orbit variant — a center circle with up to 4 short
 * title+description cards around it. Matches the handoffs' own "ai-node"
 * cards (short bold title + one-line description), not a single-line pill —
 * these use full sentences in places and need the room.
 */
.iss-page .iss-ai-2col-orbit { grid-template-columns: .95fr 1.05fr; }
.iss-page .iss-ai-orbit-wrap { display: flex; align-items: center; justify-content: center; padding: 10px 0; }
.iss-page .iss-ai-orbit { position: relative; width: 380px; height: 380px; max-width: 100%; }
.iss-page .iss-ai-orbit::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 260px;
	height: 260px;
	transform: translate(-50%, -50%);
	border: 1px dashed rgba(255, 255, 255, .18);
	border-radius: 50%;
}
.iss-page .iss-ai-orbit-core {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--iss-blue), var(--iss-red));
	color: #fff;
	display: grid;
	place-items: center;
	text-align: center;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.3;
	box-shadow: var(--iss-e2);
}
.iss-page .iss-ai-orbit-chip {
	position: absolute;
	z-index: 3;
	width: 168px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 12px;
	padding: 12px 14px;
}
.iss-page .iss-ai-orbit-chip b { display: block; color: #fff; font-size: 13px; line-height: 1.25; margin-bottom: 4px; font-weight: 700; }
.iss-page .iss-ai-orbit-chip span { display: block; color: rgba(255, 255, 255, .72); font-size: 11.5px; line-height: 1.4; }
.iss-page .iss-ai-orbit-chip.c1 { left: 0; top: 6px; }
.iss-page .iss-ai-orbit-chip.c2 { right: 0; top: 6px; }
.iss-page .iss-ai-orbit-chip.c3 { left: 0; bottom: 6px; }
.iss-page .iss-ai-orbit-chip.c4 { right: 0; bottom: 6px; }
.iss-page .iss-ai-signature {
	font-family: var(--iss-mono);
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--iss-sky) !important;
	margin-top: 10px;
}

/*
 * 24z. Homepage AI Layer Closing (v44 rebuild, 2026-09-03) — extends the
 * base orbit component above (not `.iss-ai-within-light`, which is the
 * Solution-page variant and is untouched by any of this) with a wrap
 * label, a 3-line core (name/subline/badge instead of one 2-line label),
 * and compass-positioned node chips (top/left/right/bottom, matching
 * v44's Clean HTML) instead of the default 4-corner layout — opt-in via
 * `.iss-ai-orbit-compass`, only used by the homepage, so
 * single-solution.php's corner-positioned chips are unaffected.
 */
/*
 * `.iss-ai-orbit-wrap` is `display:flex` with no direction set (row, per
 * the base rule above) — fine when it holds only the orbit box, but the
 * label needs to stack ABOVE it, not sit beside it. Scoped modifier so
 * `single-solution.php`'s label-less usage is untouched.
 */
.iss-page .iss-ai-orbit-wrap-labeled { flex-direction: column; }
.iss-page .iss-ai-orbit-label {
	text-align: center;
	font-family: var(--iss-mono);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--iss-sky);
	margin-bottom: 12px;
}
.iss-page .iss-ai-orbit-core-name { display: block; font-size: 15px; }
.iss-page .iss-ai-orbit-core-sub {
	display: block;
	margin-top: 4px;
	font-size: 9.5px;
	font-weight: 500;
	color: rgba(255, 255, 255, .82);
}
.iss-page .iss-ai-orbit-core-badge {
	display: inline-block;
	margin-top: 7px;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .18);
	font-family: var(--iss-mono);
	font-size: 7px;
	font-weight: 800;
	letter-spacing: .04em;
	white-space: nowrap;
}
/* Wider core (150px -> 176px) to hold three lines + a badge without crowding the ring. */
.iss-page .iss-ai-orbit-compass .iss-ai-orbit-core { width: 176px; height: 176px; }
/* Push left/right chips (168px wide) clear of the widened 176px core (88px radius + a gap). */
.iss-page .iss-ai-orbit-compass .iss-ai-orbit-chip.pos-top { left: 50%; top: -14px; transform: translateX(-50%); }
.iss-page .iss-ai-orbit-compass .iss-ai-orbit-chip.pos-bottom { left: 50%; bottom: -14px; transform: translateX(-50%); }
.iss-page .iss-ai-orbit-compass .iss-ai-orbit-chip.pos-left { left: -78px; top: 50%; transform: translateY(-50%); }
.iss-page .iss-ai-orbit-compass .iss-ai-orbit-chip.pos-right { right: -78px; top: 50%; transform: translateY(-50%); }
@media (max-width: 560px) {
	.iss-page .iss-ai-orbit-compass .iss-ai-orbit-chip.pos-top,
	.iss-page .iss-ai-orbit-compass .iss-ai-orbit-chip.pos-bottom,
	.iss-page .iss-ai-orbit-compass .iss-ai-orbit-chip.pos-left,
	.iss-page .iss-ai-orbit-compass .iss-ai-orbit-chip.pos-right { transform: none; }
	/*
	 * `.iss-ai-orbit`'s height goes `auto` at this width, growing to fit the
	 * now-stacked static chips below the reserved 220px circle area — a
	 * `top: 50%` core (correct on desktop, where the box height IS the
	 * circle) would centre against that whole auto height instead and drift
	 * down into the chip list. Pin it inside the reserved region instead.
	 */
	.iss-page .iss-ai-orbit-compass .iss-ai-orbit-core {
		top: 110px;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 150px;
		height: 150px;
	}
}
/* 24z-ii. Homepage AI Layer Closing — solution cards + closing signature. */
.iss-page .iss-ai-solutions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 22px 0; }
.iss-page .iss-ai-solutions-grid b { display: block; color: #fff; font-size: 14px; margin-bottom: 4px; }
.iss-page .iss-ai-solutions-grid span { display: block; color: rgba(255, 255, 255, .72); font-size: 12.5px; line-height: 1.45; }
.iss-page .iss-ai-close-signature { margin-top: 8px; }
.iss-page .iss-ai-close-signature strong { display: block; font-size: 18px; color: #fff; }
.iss-page .iss-ai-close-signature strong .iss-ai-emphasis { color: var(--iss-cyan); }
.iss-page .iss-ai-close-signature span { display: block; margin-top: 8px; font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, .72); }
@media (max-width: 560px) {
	.iss-page .iss-ai-solutions-grid { grid-template-columns: 1fr; }
}

/*
 * ---- 24a-3. ...and below 960px the shelf stacks --------------------------
 * Side by side, the title block costs the links row a fixed 150px + a divider
 * out of a column that is already short — the links were scrolling from ~1100px
 * down purely to pay for a label nobody navigates with. The handoff's own
 * breakpoint (960px, `.context-inner` in iApprove_Platform_Clean_HTML.html)
 * drops the title onto its own line with a rule under it instead, which hands
 * the links the FULL column: Platform's eight pills fit with nothing to scroll
 * at 960px, where side-by-side they overflowed by 289px.
 *
 * Below ~820px they scroll again, and that is the honest answer rather than a
 * gap — eight pills are wider than a phone whatever is done to them. Wrapping
 * was measured instead of assumed: at 390px it makes this shelf 4 rows and
 * 198px tall (5 rows / 243px at 320px), and the shelf DOCKS to the top of the
 * viewport on scroll, so that is a fifth of a phone screen permanently covered.
 * A scrolling row stays at 100px. The fade on `.iss-cap-nav-links` is what
 * makes the scroll legible.
 */
@media (max-width: 960px) {
	.iss-page .iss-cap-nav-in {
		flex-direction: column;
		align-items: stretch;
		gap: 7px;
		padding: 10px 14px;
	}
	/* Full width with a rule under it, rather than a 150px column with a rule
	   beside it. `width`/`flex` are both reset because §24a sets both. */
	.iss-page .iss-cap-nav-label {
		flex: 0 0 auto;
		width: auto;
		min-width: 0;
		padding: 0 0 7px;
		border-right: 0;
		border-bottom: 1px solid var(--iss-line);
	}
	.iss-page .iss-cap-nav-links { width: 100%; gap: 3px; }
	/* Smaller pills once the row is the whole column: ~8% more of them fit
	   before anything has to scroll, and at this width the shelf is secondary
	   to the section it sits above. */
	.iss-page .iss-cap-nav-links a { padding: 6px 9px; font-size: 11.5px; }
	/* Decorative, and the links beside it already say what they do. */
	.iss-page .iss-cap-nav-micro { display: none; }
}
@media (max-width: 900px) {
	.iss-page .iss-snap-teaser { grid-template-columns: 1fr; }
	.iss-page .iss-ai-2col-orbit { grid-template-columns: 1fr; }
	.iss-page .iss-ai-orbit-wrap { order: -1; margin-bottom: 10px; }
	/* One column below 900px: copy above, panel below, in DOM order — which is
	   why the desktop-only `order` flip is also unset here (§25k). */
	.iss-page .iss-cap-detail-in.iss-cap-detail-in-visual { grid-template-columns: minmax(0, 1fr); }
	.iss-page .iss-cap-detail-in.iss-cap-detail-in-visual .iss-cap-visual { margin-top: 8px; }
}
@media (max-width: 560px) {
	.iss-page .iss-cap-nav { margin-top: -20px; }
	.iss-page .iss-cap-detail-in { grid-template-columns: 1fr; gap: 10px; }
	/* Absolute-positioned corner cards don't have room on narrow screens —
	   the circle shrinks and the cards drop into a plain stacked list below
	   it instead of overlaying it. */
	.iss-page .iss-ai-orbit-wrap { padding: 0; display: block; width: 100%; }
	.iss-page .iss-ai-orbit {
		width: 220px;
		height: auto;
		/* Reserves room for the absolutely-positioned circle above the
		   static, stacked cards that follow it in normal flow. */
		padding-top: 220px;
		margin: 0 auto;
	}
	.iss-page .iss-ai-orbit-chip {
		position: static;
		width: 100%;
		margin-bottom: 10px;
	}
}

/* Broken empty-href anchor: not a real control, and it reloads the page. */
.searchform a.submit {
	display: none;
}

/* ============================================================
   25. SOLUTION PAGE — V5 HANDOFF SECTIONS
   ------------------------------------------------------------
   Built 2026-08-25 from ISSG_Invoice_AP_Workflow_Annotated_Developer_Visual_V5,
   which ISS sent as the spec for the page. Everything here is additive and
   content-gated in single-solution.php, so a Solution post that doesn't fill the
   fields renders exactly as it did before — iApprove and iAssist are not in this
   handoff batch and must not change.

   §24 above holds the components the earlier V17/V12/V5 pass built. This section
   holds what that pass left as heading-and-paragraph placeholders against the
   PDF's full visuals.
   ============================================================ */

/* ---- 25a. Workflow Snapshot: six-step panel ------------------------- */
.iss-page .iss-wf-shell {
	position: relative;
	background: var(--iss-card);
	border: 1px solid var(--iss-line);
	border-radius: 20px;
	box-shadow: var(--iss-e2);
	overflow: hidden;
}
.iss-page .iss-wf-rail { height: 4px; background: linear-gradient(90deg, var(--iss-blue), var(--iss-cyan) 58%, var(--iss-blue)); }
.iss-page .iss-wf-grid { display: grid; grid-template-columns: repeat(var(--iss-steps, 6), 1fr); }
.iss-page .iss-wf-step {
	position: relative;
	min-height: 276px;
	padding: 24px 19px 23px;
	background: var(--iss-card);
	transition: background .2s ease;
}
.iss-page .iss-wf-step:not(:last-child) { border-right: 1px solid var(--iss-line); }
.iss-page .iss-wf-step:hover { background: #fbfdff; }
/*
 * The conditional branches carry a tint so the eye can see, before reading a
 * word, that steps 4 and 5 are the "only when needed" part of the flow and step
 * 6 is the end-state. Tone is derived from each step's badge in PHP.
 */
.iss-page .iss-wf-exception { background: linear-gradient(180deg, #fffaf2, var(--iss-card)); }
.iss-page .iss-wf-approval { background: linear-gradient(180deg, #f5fbfe, var(--iss-card)); }
.iss-page .iss-wf-execute { background: linear-gradient(180deg, #f2f9fd, var(--iss-card)); }

.iss-page .iss-wf-meta {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 6px;
	min-height: 36px;
	margin-bottom: 23px;
}
.iss-page .iss-wf-num {
	font-family: var(--iss-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--iss-blue);
}
.iss-page .iss-wf-badge {
	flex: none;
	padding: 6px 8px;
	border-radius: 999px;
	font-family: var(--iss-mono);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	background: #e7f5fb;
	color: #287fa9;
}
.iss-page .iss-wf-exception .iss-wf-badge { background: #fff1d8; color: #9f6415; }
.iss-page .iss-wf-ico {
	width: 43px;
	height: 43px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	background: #eaf6fd;
	color: var(--iss-blue);
	margin-bottom: 17px;
}
.iss-page .iss-wf-ico svg { width: 21px; height: 21px; }
.iss-page .iss-wf-exception .iss-wf-ico { background: #fff0d8; color: #b56e13; }
.iss-page .iss-wf-execute .iss-wf-ico { background: #e4f2fb; color: #075b9e; }
.iss-page .iss-wf-step h3 { font-size: 17px; margin-bottom: 8px; }
.iss-page .iss-wf-step p { font-size: 12.5px; line-height: 1.5; }
/* Chevron straddling the divider between one step and the next. */
.iss-page .iss-wf-arrow {
	position: absolute;
	right: -12px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--iss-card);
	border: 1px solid var(--iss-line);
	color: var(--iss-blue);
	font-size: 15px;
	line-height: 1;
	box-shadow: 0 3px 10px rgba(19, 40, 58, .07);
}

/* ---- 25a-2. Non-PO invoice path — the Workflow Snapshot's second route ---
 *
 * V11 draws this band directly under the step strip, connected to it by a short
 * vertical stem: the step strip is the PO-backed route, and this is what happens
 * to an invoice that has no PO. The page argues the split in prose in four other
 * places ("route Non-PO invoices and exceptions to the right people…"), so
 * without the band those sentences refer to a diagram that isn't there.
 *
 * Ported from the handoff's own `.nonpo-*` rules, with three deliberate
 * departures, each for a reason the mockup could not have known about:
 *
 * 1. THE STEM IS DROPPED. V11 hangs a 21px gradient stem plus a dot off the
 *    band's top edge at `left: 25%`, pointing up at the boundary between step 1
 *    and step 2 of a SIX-column strip. Our strip breaks to three columns below
 *    1100px (§25k) and to one on a phone, so 25% stops pointing at anything and
 *    becomes a stray tick on a rounded corner. V11 hides it below 1080px for the
 *    same reason; we hide it everywhere rather than have it mean something at
 *    one width and nothing at the rest.
 *
 * 2. THE FLOW IS `auto-fit`, NOT SEVEN NAMED TRACKS. V11 writes
 *    `1fr 26px 1.35fr 26px 1fr 26px 1fr` — node, arrow, node, arrow… — which
 *    hard-codes four nodes and three arrows. `nonpo_nodes` is an editable
 *    line-per-node field, so a fifth node is one wp-admin keystroke away and
 *    would fall out of that grid silently. The arrows are rendered elements in
 *    document order and the grid counts what is actually there.
 *
 * 3. THE WIDER SECOND NODE GOES. V11 gives "Data-Driven Approval Routing" 1.35fr
 *    because it is the longest label; our column is 1120px against the mockup's
 *    1184px, and at our width that extra 0.35 takes enough from node 1 to wrap
 *    "Non-PO Identified". Equal tracks and a balanced wrap read better than one
 *    privileged cell.
 */
.iss-page .iss-wf-nonpo {
	position: relative;
	margin-top: 20px;
	padding: 18px 20px 20px;
	border: 1px solid #cfe2ee;
	border-radius: 18px;
	background: linear-gradient(100deg, #f3f9fd, #eaf5fb);
	box-shadow: 0 10px 28px rgba(7, 26, 43, .07);
}
.iss-page .iss-wf-nonpo-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 14px;
}
/* The dash is `currentColor` at 22px, matching §4's site-wide kicker rule —
   this label is a kicker in everything but class name. */
.iss-page .iss-wf-nonpo-title {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--iss-blue);
	font-family: var(--iss-mono);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
}
.iss-page .iss-wf-nonpo-title::before {
	content: "";
	width: 22px;
	height: 2px;
	background: currentColor;
	border-radius: 10px;
}
.iss-page .iss-wf-nonpo-examples { color: #4d6d82; font-size: 12px; font-weight: 800; text-align: right; }

/*
 * FLEX, NOT GRID, and this is the correction to the first pass rather than a
 * preference. `repeat(auto-fit, minmax(0, 1fr))` gives the arrow cells a full
 * 1fr track each, exactly like the nodes — so capping the ARROW at 26px only
 * shrinks the glyph inside a track that is still a seventh of the row, and the
 * four nodes lose three-sevenths of the width to empty gutters. V11 avoids it
 * by naming all seven tracks (`1fr 26px 1.35fr 26px …`), which is what this
 * cannot do, because `nonpo_nodes` is an editable line-per-node field and a
 * fifth node would fall out of a hard-coded track list silently.
 *
 * Flex gets both: the nodes share the row via `flex: 1`, the arrows take their
 * 26px and no more, and neither depends on how many nodes there are.
 */
.iss-page .iss-wf-nonpo-flow {
	display: flex;
	align-items: stretch;
	gap: 8px;
}
.iss-page .iss-wf-nonpo-arrow {
	flex: 0 0 26px;
	display: grid;
	place-items: center;
	color: var(--iss-blue);
	font-size: 20px;
	font-weight: 950;
}
/* `min-width: 0` so a long node title wraps inside its box instead of setting
   the box's width — without it a flex item floors at its content and the four
   nodes stop sharing the row equally. */
.iss-page .iss-wf-nonpo-node {
	flex: 1 1 0;
	min-width: 0;
	min-height: 74px;
	padding: 12px 13px;
	border: 1px solid #d5e6f0;
	border-radius: 13px;
	background: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-shadow: 0 5px 14px rgba(7, 26, 43, .04);
}
.iss-page .iss-wf-nonpo-node small {
	display: block;
	margin-bottom: 4px;
	color: #7890a3;
	font-family: var(--iss-mono);
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.iss-page .iss-wf-nonpo-node strong { display: block; color: var(--iss-navy); font-size: 13px; line-height: 1.25; }
/* The two tinted nodes. `nonpo_nodes` carries the tone as an optional third
   token per line, so which node is tinted is content, not position. */
.iss-page .iss-wf-nonpo-routing { border-color: #bcdff0; background: linear-gradient(145deg, #e9f7fd, #f7fcff); }
.iss-page .iss-wf-nonpo-routing strong { color: var(--iss-blue-dark); }
.iss-page .iss-wf-nonpo-execute { border-color: #cce7dc; background: #f2fbf7; }

.iss-page .iss-wf-nonpo-note { margin-top: 12px; color: #49687c; font-size: 12px; line-height: 1.5; }
.iss-page .iss-wf-nonpo-note strong { color: var(--iss-navy); }

/* One row of nodes is unreadable long before it overflows — four 13px labels in
   ~150px each. V11 stacks at 690px; we stack at 780px, because our column is
   64px narrower than the mockup's and the arrow cells cost 78px of it. */
@media (max-width: 780px) {
	.iss-page .iss-wf-nonpo { padding: 17px; }
	.iss-page .iss-wf-nonpo-head { align-items: flex-start; flex-direction: column; gap: 5px; }
	.iss-page .iss-wf-nonpo-examples { text-align: left; }
	.iss-page .iss-wf-nonpo-flow { flex-direction: column; }
	.iss-page .iss-wf-nonpo-arrow { flex: 0 0 18px; transform: rotate(90deg); }
}

/* ---- 25b. Workflow Snapshot: QAD backbone + outcome pills ---------- */
.iss-page .iss-wf-backbone {
	position: relative;
	margin-top: 20px;
	padding: 20px 22px;
	border-radius: 18px;
	background: linear-gradient(100deg, #08263c, #0c405f);
	color: #fff;
	box-shadow: 0 13px 34px rgba(19, 40, 58, .15);
	overflow: hidden;
}
.iss-page .iss-wf-backbone::after {
	content: "";
	position: absolute;
	right: -110px;
	top: -128px;
	width: 250px;
	height: 250px;
	border-radius: 50%;
	border: 1px solid rgba(143, 226, 245, .13);
}
.iss-page .iss-wf-backbone-head {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 14px;
}
.iss-page .iss-wf-backbone-head strong {
	font-family: var(--iss-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}
.iss-page .iss-wf-backbone-head span { font-size: 12px; font-weight: 600; color: #e6f5fb; text-align: right; }
.iss-page .iss-wf-backbone-data {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(var(--iss-cols, 5), 1fr);
	gap: 8px;
}
.iss-page .iss-wf-backbone-data span {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 42px;
	padding: 8px 9px;
	border: 1px solid rgba(255, 255, 255, .11);
	background: rgba(255, 255, 255, .06);
	border-radius: 10px;
	color: #d7e9f2;
	font-size: 10.5px;
	font-weight: 600;
}
.iss-page .iss-wf-outcomes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.iss-page .iss-wf-outcomes span {
	padding: 7px 11px;
	border-radius: 999px;
	background: var(--iss-bg-tint);
	color: #456275;
	font-size: 10.5px;
	font-weight: 700;
}

/* ---- 25c. The Shift: full-bleed dark comparison band --------------- */
.iss-page .iss-shift-band {
	position: relative;
	color: #fff;
	background:
		radial-gradient(circle at 14% 18%, rgba(57, 195, 230, .10), transparent 24%),
		radial-gradient(circle at 84% 78%, rgba(31, 139, 224, .12), transparent 26%),
		linear-gradient(145deg, var(--iss-navy-2), #0b2a42 58%, #0d3e5f);
	overflow: hidden;
	/* Actually bleed edge-to-edge (§3) — was already named "full-bleed" above
	   but never carried the geometry, so the band stopped at the 1200px column
	   like any other section instead of spanning the viewport like the hero. */
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
}
/*
 * `.iss-tight` (§7) zeros this section's top padding for the bare-text-block
 * case, but this band paints its own full background, so a zeroed top padding
 * puts the kicker/heading flush against its top edge instead of the hero's
 * balanced spacing. Same fix as `.iss-cap-detail` (§24c): give it back its own
 * top padding, doubled for specificity to beat the `.iss-tight` rule.
 */
.iss-page .iss-shift-band.iss-shift-band { padding-top: clamp(48px, 7vw, 88px); }
.iss-page .iss-shift-band::after {
	content: "";
	position: absolute;
	right: -140px;
	bottom: -170px;
	width: 390px;
	height: 390px;
	border-radius: 50%;
	border: 1px solid rgba(143, 226, 245, .08);
	pointer-events: none;
}
.iss-page .iss-shift-band > .iss-wrap { position: relative; z-index: 1; }
.iss-page .iss-shift-band .iss-sec-head h2 { color: #fff; }
.iss-page .iss-shift-band .iss-sec-head p { color: #c7dce7; }
.iss-page .iss-shift-band .iss-kicker { color: var(--iss-sky); }
.iss-page .iss-shift-band .iss-kicker::before { background: currentColor; }

/*
 * Both panels are dark now, so `.iss-bad` can no longer be the white card it is
 * on a light page — it becomes glass, and `.iss-good` keeps the blue gradient
 * that makes it the answer to the panel beside it.
 */
.iss-page .iss-shift-band .iss-pcard { display: flex; flex-direction: column; }
.iss-page .iss-shift-band .iss-pcard::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 5px;
	background: rgba(255, 255, 255, .18);
}
.iss-page .iss-shift-band .iss-pcard.iss-bad {
	background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
	border: 1px solid rgba(255, 255, 255, .10);
	box-shadow: 0 20px 50px rgba(0, 0, 0, .18);
	backdrop-filter: blur(8px);
}
.iss-page .iss-shift-band .iss-pcard.iss-good {
	background: linear-gradient(155deg, #0a4e86 0%, #0d6fbc 52%, #0d8bc6 100%);
	border: 1px solid rgba(143, 226, 245, .25);
}
.iss-page .iss-shift-band .iss-pcard.iss-good::before { background: linear-gradient(180deg, #bff4ff, var(--iss-cyan)); }
.iss-page .iss-shift-band .iss-pcard h3 { color: #fff; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.1; margin-bottom: 20px; max-width: 30ch; }
.iss-page .iss-shift-band .iss-bad .iss-flist li { color: #c2d2dd; }
.iss-page .iss-shift-band .iss-good .iss-flist li { color: #f4fbff; }
.iss-page .iss-shift-band .iss-flist li { padding: 13px 0; border-top: 1px solid rgba(255, 255, 255, .11); font-size: 14px; }
.iss-page .iss-shift-band .iss-flist li:first-child { border-top: 0; padding-top: 0; }
/* Numbered rather than crossed-out: the handoff numbers the manual steps 01-05
   to make the point that there are five of them, not that each is an error. */
.iss-page .iss-shift-band .iss-bad .iss-mk {
	width: 26px;
	height: 26px;
	border-radius: 9px;
	background: rgba(255, 255, 255, .10);
	color: #e3edf4;
	font-family: var(--iss-mono);
	font-size: 11px;
	font-weight: 700;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.iss-page .iss-shift-band .iss-good .iss-mk {
	width: 26px;
	height: 26px;
	border-radius: 9px;
	background: rgba(255, 255, 255, .16);
	color: #fff;
}

.iss-page .iss-pcard-label {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
	font-family: var(--iss-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: #b2c6d3;
}
.iss-page .iss-good .iss-pcard-label { color: #d7f5ff; }
.iss-page .iss-pcard-tag {
	flex: none;
	padding: 7px 10px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .08);
	background: rgba(255, 255, 255, .08);
	color: #d7e4ec;
	font-size: 9px;
	letter-spacing: .07em;
}
.iss-page .iss-good .iss-pcard-tag { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .14); color: #fff; }

/* The two callouts are bottom-aligned and share a min-height so they stay
   balanced even when one panel's bullet list is a line longer. */
.iss-page .iss-shift-callout {
	position: relative;
	z-index: 1;
	margin-top: auto;
	min-height: 106px;
	padding: 18px 20px;
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 7px;
	box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
}
.iss-page .iss-shift-callout strong {
	font-family: var(--iss-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .10em;
	text-transform: uppercase;
}
.iss-page .iss-shift-callout p { font-size: 14px; line-height: 1.5; font-weight: 700; }
.iss-page .iss-shift-cost { background: rgba(216, 138, 33, .12); border: 1px solid rgba(255, 196, 102, .20); }
.iss-page .iss-shift-cost strong { color: #ffd28f; }
.iss-page .iss-shift-cost p { color: #f3dfbf; }
.iss-page .iss-shift-result { background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .18); }
.iss-page .iss-shift-result strong,
.iss-page .iss-shift-result p { color: #fff; }

/* ---- 25d. Built on iApprove: dark platform bridge ------------------ */
.iss-page .iss-bridge-band {
	color: #fff;
	background:
		radial-gradient(circle at 84% 20%, rgba(57, 195, 230, .16), transparent 26%),
		linear-gradient(135deg, var(--iss-navy-2), #0a3049 62%, #0c3d59);
	overflow: hidden;
	/*
	 * Actually bleed edge-to-edge, the same two lines §25c gives
	 * `.iss-shift-band` and §3 explains. This band paints its own dark
	 * gradient but was still capped at the 1200px column, so it read as an
	 * inset panel with white rails either side rather than a band across the
	 * page — Danny reported it on /solutions/invoice-ap-workflow/ on
	 * 2026-09-06, and Purchasing and Supplier Lifecycle had it identically.
	 */
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
}
/* Content back inside the column, above the gradient. */
.iss-page .iss-bridge-band > .iss-wrap { position: relative; z-index: 1; }
/* Same `.iss-tight`-vs-own-background fix as §25c — see comment there. */
.iss-page .iss-bridge-band.iss-bridge-band { padding-top: clamp(48px, 7vw, 88px); }
.iss-page .iss-bridge-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(32px, 4vw, 54px); align-items: center; }
/* §24's .iss-bridge caps its own width for the light one-column form; inside the
   band it is a grid column and sizes itself. */
.iss-page .iss-bridge-band .iss-bridge { max-width: none; }
.iss-page .iss-bridge-band h2 { color: #fff; max-width: 24ch; }
.iss-page .iss-bridge-band .iss-lead { color: #c7dce7; font-size: 16px; }
.iss-page .iss-bridge-band .iss-kicker { color: var(--iss-sky); }
.iss-page .iss-bridge-band .iss-kicker::before { background: currentColor; }

.iss-page .iss-bridge-brand { display: inline-flex; align-items: center; gap: 13px; margin: 8px 0 19px; }
.iss-page .iss-bridge-mark {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, var(--iss-blue), var(--iss-cyan));
	box-shadow: 0 12px 28px rgba(0, 0, 0, .2);
	font-family: var(--iss-mono);
	font-size: 15px;
	font-weight: 700;
	color: #fff;
}
.iss-page .iss-bridge-name strong { display: block; font-size: 22px; letter-spacing: -.02em; color: #fff; }
/*
 * `> span`, NOT a descendant `span`. The lockup's first line is the platform
 * name run through `iss_brand_case()`, which wraps it as
 * `<strong><span class="iss-brand">iApprove™</span></strong>` — so a bare
 * `.iss-bridge-name span` matches that wrapper as well as the subtitle it was
 * written for, and beats §4's `.iss-page .iss-brand` on specificity (0-2-1 vs
 * 0-2-0). The result was "IAPPROVE™" set in 10.5px tracked mono where the
 * handoffs draw "iApprove™" in 22px white sans: the `strong` rule above was
 * being applied to the strong and then undone on the only thing inside it.
 * Site-wide — every page that draws the bridge band had it.
 */
.iss-page .iss-bridge-name > span {
	display: block;
	margin-top: 2px;
	font-family: var(--iss-mono);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: #9fc6d9;
}
.iss-page .iss-bridge-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 19px; }
/*
 * The band's CTA needs the gap the paragraph above it does not supply.
 *
 * `.iss-lead` ends at `margin-bottom: 0` and `.iss-btn` starts at
 * `margin-top: 0`, so "Explore the iApprove™ Platform →" sat at a MEASURED 0px
 * from the last line of copy (Danny, 2026-09-13, off /solutions/purchasing/).
 * 18px is the mockup's own figure — its `p` carries `margin: 0 0 18px` and the
 * button follows immediately.
 *
 * On the button, not on the paragraph, because the chip row is optional and
 * sits between them when a page has one: `.iss-bridge-chips` already supplies
 * its own 19px above itself, and a margin on the paragraph would push the chips
 * down instead on the pages that have them.
 */
.iss-page .iss-bridge > .iss-btn { margin-top: 18px; }
.iss-page .iss-bridge-chips span {
	padding: 7px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .12);
	color: #d7e4ec;
	font-family: var(--iss-mono);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}

/* The proof cards: 2x2, and deliberately larger than the light-form themes. */
.iss-page .iss-bridge-band .iss-bridge-themes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 0; }
/*
 * `min-height` is here to keep a row of cards even when one has a short
 * descriptor — but 162px is the height of a card WITH the 38px icon plate above
 * its heading, so on a card without one it is ~53px of dead space under the
 * last line. Purchasing showed it plainly: four cards, two of them two lines
 * long, all four holding a gap where the icon used to be.
 *
 * Keyed on the icon's absence rather than on the page, because whether the card
 * has an icon is exactly what decides the height it needs. Supplier Lifecycle
 * carried a page-scoped `min-height: 0` for this (§29d) and no longer needs it.
 */
.iss-page .iss-bridge-band .iss-bridge-theme:not(:has(.iss-bridge-theme-ico)) { min-height: 0; }
.iss-page .iss-bridge-band .iss-bridge-theme {
	min-height: 162px;
	padding: 23px 20px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 17px;
	background: rgba(255, 255, 255, .06);
	backdrop-filter: blur(8px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .10);
}
.iss-page .iss-bridge-theme-ico {
	width: 38px;
	height: 38px;
	border-radius: 11px;
	display: grid;
	place-items: center;
	background: rgba(57, 195, 230, .13);
	color: var(--iss-sky);
	margin-bottom: 15px;
}
.iss-page .iss-bridge-theme-ico svg { width: 18px; height: 18px; }
.iss-page .iss-bridge-band .iss-bridge-theme h3 { font-size: 16px; margin-bottom: 7px; color: #fff; }
.iss-page .iss-bridge-band .iss-bridge-theme p { font-size: 13px; line-height: 1.55; color: #b6cfdd; }

/* ---- 25e. Capability overview cards + closing callout -------------- */
.iss-page .iss-cap { display: flex; flex-direction: column; padding-top: 0; overflow: hidden; }
/* Accent rail across the card's top edge, brightening on hover. */
.iss-page .iss-cap::before {
	content: "";
	display: block;
	height: 3px;
	margin: 0 -22px 20px;
	background: linear-gradient(90deg, var(--iss-blue), var(--iss-cyan));
	opacity: .55;
	transition: opacity .25s;
}
.iss-page .iss-cap:hover::before { opacity: 1; }
.iss-page .iss-cap-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.iss-page .iss-cap-num {
	font-family: var(--iss-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--iss-blue);
	padding-top: 6px;
}
.iss-page .iss-cap-top .iss-ci { flex: none; width: 32px; height: 32px; border-radius: 9px; }
.iss-page .iss-cap-top .iss-ci svg { width: 16px; height: 16px; }
.iss-page .iss-cap h3 { font-size: 17px; margin-bottom: 9px; }
.iss-page .iss-cap p { font-size: 13.5px; line-height: 1.55; }
.iss-page .iss-cap-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.iss-page .iss-cap-tags span {
	padding: 5px 9px;
	border-radius: 6px;
	background: var(--iss-bg-tint);
	color: #4c6478;
	font-size: 10px;
	font-weight: 700;
}
/* Pushed to the card's foot so the rule sits flush across a row of cards whose
   descriptions run to different lengths. */
.iss-page .iss-cap-emphasis {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--iss-line);
	font-family: var(--iss-mono);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--iss-blue);
}
.iss-page a.iss-cap:hover .iss-cap-emphasis { color: var(--iss-blue-dark); }

.iss-page .iss-cap-closing {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 20px;
	padding: 20px 24px;
	border-radius: 16px;
	background: linear-gradient(100deg, #08263c, #0c405f);
	color: #fff;
	box-shadow: 0 13px 34px rgba(19, 40, 58, .15);
}
.iss-page .iss-cap-closing-badge {
	flex: none;
	display: grid;
	place-items: center;
	min-width: 46px;
	height: 46px;
	padding: 0 10px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--iss-blue), var(--iss-cyan));
	font-family: var(--iss-mono);
	font-size: 12px;
	font-weight: 700;
}
.iss-page .iss-cap-closing strong { display: block; font-size: 15px; margin-bottom: 3px; }
.iss-page .iss-cap-closing p { font-size: 12.5px; line-height: 1.5; color: #c7dce7; }

/* ---- 25f. Capability detail: bullets, tags, sides, dark variant ---- */
.iss-page .iss-cap-points { display: grid; gap: 11px; margin-top: 20px; }
.iss-page .iss-cap-points li { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--iss-muted); }
.iss-page .iss-cap-points li b { color: var(--iss-ink); font-weight: 700; }
.iss-page .iss-cap-points .iss-tick { margin-top: 1px; }
.iss-page .iss-cap-detail-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.iss-page .iss-cap-detail-tags span {
	padding: 6px 10px;
	border-radius: 7px;
	background: var(--iss-bg-tint);
	color: #4c6478;
	font-family: var(--iss-mono);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}
/* Visual on the LEFT. `order` rather than a reordered grid definition so the
   copy stays first in the DOM — it is the content, the panel illustrates it. */
.iss-page .iss-cap-detail-flip .iss-cap-visual { order: -1; }

/* Doubled for the same reason as `.iss-cap-detail-soft` in §24c. */
.iss-page .iss-cap-detail-dark.iss-cap-detail-dark {
	color: #fff;
	background:
		radial-gradient(circle at 82% 24%, rgba(57, 195, 230, .14), transparent 28%),
		linear-gradient(145deg, var(--iss-navy-2), #0a2c46 60%, #0b3654);
	/* Bleed edge-to-edge like the hero (§3) — the light `.iss-cap-detail`
	   sections stay column-width as a subtle zebra tint, but a full dark
	   "chapter" band read as an inset panel stopping short of the viewport. */
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
}
.iss-page .iss-cap-detail-dark h2 { color: #fff; }
.iss-page .iss-cap-detail-dark .iss-lead { color: #c7dce7; }
.iss-page .iss-cap-detail-dark .iss-kicker { color: var(--iss-sky); }
.iss-page .iss-cap-detail-dark .iss-kicker::before { background: currentColor; }
.iss-page .iss-cap-detail-dark .iss-cap-points li { color: #c7dce7; }
.iss-page .iss-cap-detail-dark .iss-cap-points li b { color: #fff; }
.iss-page .iss-cap-detail-dark .iss-tick { background: rgba(57, 195, 230, .16); color: var(--iss-sky); }
.iss-page .iss-cap-detail-dark .iss-cap-detail-tags span { background: rgba(255, 255, 255, .09); color: #d7e4ec; }
/* The illustrative panel is a light card by default (§24) — on the dark
   capability it becomes glass, same treatment as the hero's own visual. */
.iss-page .iss-cap-detail-dark .iss-cap-visual {
	background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .045));
	border-color: rgba(255, 255, 255, .14);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
}
.iss-page .iss-cap-detail-dark .iss-cap-visual-toolbar { border-bottom-color: rgba(255, 255, 255, .12); color: #fff; }
.iss-page .iss-cap-detail-dark .iss-cap-visual-row { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .10); }
.iss-page .iss-cap-detail-dark .iss-cap-visual-row b { color: #fff; }
.iss-page .iss-cap-detail-dark .iss-cap-visual-row span { color: #a9c5d5; }
.iss-page .iss-cap-detail-dark .iss-cap-visual-footer { color: #a9c5d5; border-top-color: rgba(255, 255, 255, .12); }

/* ---- 25g. Real-Time QAD Integration -------------------------------- */
.iss-page .iss-qad-panel {
	padding: clamp(26px, 3.4vw, 42px);
	border-radius: var(--iss-r-lg);
	color: #fff;
	background:
		radial-gradient(circle at 86% 18%, rgba(57, 195, 230, .15), transparent 28%),
		linear-gradient(140deg, var(--iss-navy-2), #0a2c46 58%, #0c3d59);
	box-shadow: var(--iss-e3);
}
.iss-page .iss-qad-panel h2 { color: #fff; max-width: 22ch; }
.iss-page .iss-qad-panel .iss-lead { color: #c7dce7; font-size: 16px; }
.iss-page .iss-qad-panel .iss-kicker { color: var(--iss-sky); }
.iss-page .iss-qad-panel .iss-kicker::before { background: currentColor; }
.iss-page .iss-qad-panel .iss-cap-points li { color: #c7dce7; }
.iss-page .iss-qad-panel .iss-cap-points li b { color: #fff; }
.iss-page .iss-qad-panel .iss-tick { background: rgba(57, 195, 230, .16); color: var(--iss-sky); }
.iss-page .iss-qad-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 3.4vw, 44px); align-items: center; }

.iss-page .iss-qad-visual {
	padding: 18px;
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, .12);
	background: rgba(255, 255, 255, .05);
	backdrop-filter: blur(8px);
}
.iss-page .iss-qad-visual-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.iss-page .iss-qad-visual-top strong { font-size: 13px; }
.iss-page .iss-qad-visual-body { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.iss-page .iss-qad-flow { display: grid; gap: 7px; }
.iss-page .iss-qad-flow-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 9px 11px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .08);
}
.iss-page .iss-qad-flow-row b { font-size: 11.5px; font-weight: 700; color: #fff; }
.iss-page .iss-qad-flow-row i {
	flex: none;
	font-style: normal;
	font-family: var(--iss-mono);
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #8fb4c8;
}
.iss-page .iss-qad-swap { font-size: 20px; color: var(--iss-sky); text-align: center; }
.iss-page .iss-qad-system {
	display: grid;
	gap: 5px;
	padding: 14px;
	border-radius: 14px;
	border: 1px solid rgba(143, 226, 245, .3);
	background: rgba(8, 31, 49, .5);
}
.iss-page .iss-qad-system > strong { font-size: 19px; letter-spacing: -.02em; }
.iss-page .iss-qad-system-note { font-size: 10px; color: #a9c8d9; margin-bottom: 6px; }
.iss-page .iss-qad-system-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 0;
	border-top: 1px solid rgba(255, 255, 255, .09);
	font-size: 11px;
	color: #a9c5d5;
}
.iss-page .iss-qad-system-row b { color: #fff; font-weight: 700; }

.iss-page .iss-qad-cards { display: grid; grid-template-columns: repeat(var(--iss-cols, 4), 1fr); gap: 12px; margin-top: 28px; }
.iss-page .iss-qad-card {
	padding: 18px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, .11);
	background: rgba(255, 255, 255, .06);
}
.iss-page .iss-qad-card strong { display: block; font-size: 13.5px; margin-bottom: 6px; color: #fff; }
.iss-page .iss-qad-card p { font-size: 12px; line-height: 1.5; color: #b6cfdd; }
.iss-page .iss-qad-panel .iss-metrics { margin-top: 24px; background: rgba(255, 255, 255, .05); border-radius: 14px; }

/* ---- 25h. Customer proof: the Somero snapshot card ----------------- */
.iss-page .iss-snap-teaser-metric { display: grid; gap: 2px; margin-top: 4px; }
/*
 * iss_metric_number_html() emits `.iss-mnum` with any +/% glyph in a `.iss-u`
 * span, and §11 styles both for a LIGHT stat card — navy digits, blue glyph.
 * On this dark panel the digits have to go white and the glyph cyan, and the
 * base rule's own top margin has to come off or the number floats away from
 * the label under it.
 */
.iss-page .iss-snap-teaser-metric .iss-mnum {
	margin: 0;
	font-size: clamp(38px, 4.6vw, 54px);
	line-height: 1;
	color: #fff;
}
.iss-page .iss-snap-teaser-metric .iss-mnum .iss-u { color: var(--iss-sky); }
.iss-page .iss-snap-teaser-metric > span {
	font-family: var(--iss-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #a9c5d5;
}
.iss-page .iss-snap-teaser-block { margin-top: 8px; }
.iss-page .iss-snap-teaser-block strong { display: block; font-size: 14px; margin-bottom: 6px; color: #fff; }
.iss-page .iss-snap-teaser-block p { font-size: 12.5px; line-height: 1.55; color: #b6cfdd; }
.iss-page .iss-snap-teaser-foot {
	margin-top: auto;
	padding-top: 16px;
	font-family: var(--iss-mono);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #8fb4c8;
}
.iss-page .iss-snap-teaser-demo {
	margin-top: 4px;
	padding: 16px 18px;
	border-radius: 14px;
	background: var(--iss-bg-tint);
	border: 1px solid var(--iss-line);
}
.iss-page .iss-snap-teaser-demo strong { display: block; font-size: 13.5px; margin-bottom: 5px; color: var(--iss-ink); }
.iss-page .iss-snap-teaser-demo p { font-size: 12.5px; line-height: 1.55; }
.iss-page .iss-snap-teaser-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.iss-page .iss-snap-teaser-tags span {
	padding: 5px 9px;
	border-radius: 6px;
	background: var(--iss-bg-tint);
	color: #4c6478;
	font-size: 10px;
	font-weight: 700;
}
/* The revalidate-before-launch caveat from the handoff. Small on purpose: it is
   a note to ISS, not a claim to the reader. */
.iss-page .iss-snap-teaser-note { font-size: 11px; line-height: 1.5; color: var(--iss-muted-2); }

/* ---- 25i. iAssist AI layer ----------------------------------------- */
/*
 * The light treatment. `.iss-ai-within` is a dark band by default and other
 * templates still use it that way, so this is a modifier: the section goes
 * light and only the AI visual keeps a dark ground, as an inset panel.
 */
.iss-page .iss-ai-within-light {
	background: none;
	box-shadow: none;
	padding: 0;
	color: var(--iss-ink);
}
.iss-page .iss-ai-within-light h2 { color: var(--iss-ink); }
.iss-page .iss-ai-within-light .iss-lead,
.iss-page .iss-ai-within-light p { color: var(--iss-muted); }
.iss-page .iss-ai-within-light .iss-kicker { color: var(--iss-blue); }
.iss-page .iss-ai-within-light .iss-ai-orbit-wrap {
	position: relative;
	padding: 26px 20px 20px;
	border-radius: var(--iss-r-lg);
	background:
		radial-gradient(circle at 78% 16%, rgba(57, 195, 230, .14), transparent 30%),
		linear-gradient(150deg, var(--iss-navy-2), #0a2c46 62%, #0b3654);
	box-shadow: var(--iss-e3);
	flex-direction: column;
}
.iss-page .iss-ai-panel-label {
	align-self: flex-start;
	font-family: var(--iss-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--iss-sky);
	margin-bottom: 6px;
}
/* Blue → cyan, not blue → red. The core had been rendering as a red/purple
   sphere, which read as an alert rather than as the AI layer and was the only
   place on the page spending red on something that isn't an action. */
.iss-page .iss-ai-orbit-core {
	background: linear-gradient(135deg, var(--iss-blue-2), var(--iss-cyan));
	gap: 2px;
	padding: 14px;
	text-align: center;
	box-shadow: 0 18px 40px rgba(12, 115, 201, .35);
}
.iss-page .iss-ai-orbit-core b { display: block; font-size: 15px; font-weight: 700; }
.iss-page .iss-ai-orbit-core span { display: block; font-size: 10.5px; line-height: 1.3; color: rgba(255, 255, 255, .88); }
.iss-page .iss-ai-orbit-core i {
	display: block;
	margin-top: 5px;
	padding: 3px 7px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .22);
	font-style: normal;
	font-family: var(--iss-mono);
	font-size: 7.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
/*
 * Five boxes, symmetrical: one above the circle, one either side, two balanced
 * along the bottom. §24 positions c1-c4; c5 completes the pair on the bottom
 * edge and c4 shifts left to make room for it.
 */
/*
 * FIVE boxes, re-laid-out — one above the circle, one either side, two
 * balanced along the bottom, per the handoff.
 *
 * All five positions are restated here, not just c5. §24 positions c1-c4 for
 * the older FOUR-box arrangement (two along the top, two along the bottom);
 * adding a fifth to that grid put two boxes in the same place, which is what
 * was overlapping on staging. The centre column is kept clear top and bottom
 * so the circle stays readable between them.
 */
.iss-page .iss-ai-within-light .iss-ai-orbit-chip.c1 { left: 50%; transform: translateX(-50%); top: 0; bottom: auto; right: auto; }
.iss-page .iss-ai-within-light .iss-ai-orbit-chip.c2 { left: 0; top: 50%; transform: translateY(-50%); bottom: auto; right: auto; }
.iss-page .iss-ai-within-light .iss-ai-orbit-chip.c3 { right: 0; top: 50%; transform: translateY(-50%); bottom: auto; left: auto; }
.iss-page .iss-ai-within-light .iss-ai-orbit-chip.c4 { left: 0; bottom: 0; top: auto; right: auto; transform: none; }
.iss-page .iss-ai-within-light .iss-ai-orbit-chip.c5 { right: 0; bottom: 0; top: auto; left: auto; transform: none; }
/*
 * The rules above assume 5 chips (Business Process Workflows). Every other
 * page using this light variant (Purchasing, Invoice & AP Workflow, Supplier
 * Lifecycle Management) supplies exactly 4 — c4's bottom-left position
 * (shifted to leave room for a c5 that isn't there) reads as lopsided, an
 * empty gap where c5 would sit. `.iss-ai-orbit-4` (single-solution.php, set
 * when count($aiw_chips) === 4) restores the symmetric bottom-center
 * position, completing the one-above/two-sides/one-below cross.
 */
.iss-page .iss-ai-within-light .iss-ai-orbit-4 .iss-ai-orbit-chip.c4 { left: 50%; transform: translateX(-50%); bottom: 0; top: auto; right: auto; }
/* The five boxes need more room than the 4-box arrangement did. Width is set
   so the side boxes clear the 150px centre circle rather than tucking under
   it — at 440/150 they overlapped it by 5px. */
/* Height gives the top box room to clear the vertically-centred circle: at
   430px the circle's top edge landed 3px inside it. */
.iss-page .iss-ai-within-light .iss-ai-orbit { width: 480px; height: 470px; max-width: 100%; }
.iss-page .iss-ai-within-light .iss-ai-orbit-chip { width: 148px; }

.iss-page .iss-ai-list-heading {
	font-family: var(--iss-mono);
	font-size: 12.5px;
	letter-spacing: .02em;
	color: var(--iss-muted);
	margin: 18px 0 12px;
}
.iss-page .iss-ai-list-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.iss-page .iss-ai-within-light .iss-ai-list-grid li {
	padding: 13px 15px;
	border-radius: 12px;
	background: var(--iss-bg-tint);
	border: 1px solid var(--iss-line);
	font-size: 13px;
	line-height: 1.45;
	color: var(--iss-muted);
}
.iss-page .iss-ai-within-light .iss-ai-list-grid .iss-mk { background: rgba(12, 115, 201, .1); color: var(--iss-blue); }
.iss-page .iss-ai-callout {
	margin-top: 20px;
	padding: 18px 20px;
	border-radius: 16px;
	background: linear-gradient(100deg, #08263c, #0c405f);
	color: #fff;
}
.iss-page .iss-ai-callout strong { display: block; font-size: 15px; margin-bottom: 5px; }
.iss-page .iss-ai-within-light .iss-ai-callout p { font-size: 12.5px; line-height: 1.55; color: #c7dce7; }
.iss-page .iss-ai-within-light .iss-ai-callout + .iss-btn { margin-top: 18px; }
.iss-page .iss-ai-within-light .iss-btn-ghost { border-color: var(--iss-line-strong); color: var(--iss-blue); }
.iss-page .iss-ai-within-light .iss-btn-ghost:hover { border-color: var(--iss-blue); background: var(--iss-bg-tint); }

/* ---- 25j. Final CTA: copy left, actions right ---------------------- */
.iss-page .iss-cta-band-split {
	display: grid;
	grid-template-columns: 1.35fr auto;
	gap: clamp(24px, 3vw, 44px);
	align-items: center;
	text-align: left;
}
.iss-page .iss-cta-band-split > * { position: relative; z-index: 1; }
/*
 * White primary, same reasoning as the hero (§7a): iss_demo_cta_class()
 * promotes any demo-bound primary to the red variant site-wide from one place,
 * and the handoff's closing band wants white-on-blue. Restyling the variant the
 * band receives keeps that rule intact — and red on this blue gradient was the
 * one place on the page where the brand accent fought its own background.
 */
.iss-page .iss-cta-band-split .iss-btn-demo,
.iss-page .iss-cta-band-split .iss-btn-primary {
	background: #fff;
	border-color: #fff;
	color: var(--iss-blue-dark);
}
.iss-page .iss-cta-band-split .iss-btn-demo:hover,
.iss-page .iss-cta-band-split .iss-btn-demo:focus-visible,
.iss-page .iss-cta-band-split .iss-btn-primary:hover {
	background: #fff;
	border-color: #fff;
	color: var(--iss-blue-dark);
	transform: translateY(-2px);
}
.iss-page .iss-cta-band-split .iss-kicker { color: #d7f5ff; }
.iss-page .iss-cta-band-split .iss-kicker::before { background: currentColor; }
.iss-page .iss-cta-band-split h2 { margin: 14px 0 12px; max-width: 24ch; }
.iss-page .iss-cta-band-split .iss-btn-row { flex-wrap: nowrap; }
.iss-page .iss-cta-summary {
	margin-top: 16px;
	font-family: var(--iss-mono);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .9);
}

/* ---- 25m. How It Works — cross-business framing (Business Process Workflows) */
.iss-page .iss-wf-source {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}
.iss-page .iss-wf-source-label { font-weight: 700; font-size: 13px; color: var(--iss-ink); }
.iss-page .iss-wf-source-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.iss-page .iss-wf-source-chips span {
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--iss-bg-tint);
	border: 1px solid var(--iss-line);
	font-size: 12px;
	font-weight: 600;
	color: var(--iss-blue-dark);
}
.iss-page .iss-wf-framework {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--iss-line);
}
.iss-page .iss-wf-framework strong { font-size: 15px; color: var(--iss-ink); }
.iss-page .iss-wf-framework span { font-size: 13px; color: var(--iss-muted); }
.iss-page .iss-wf-backbone-execute { margin-top: 12px; }

/* ---- 25n. Business Area Explorer (Business Process Workflows) --------- */
.iss-page .iss-area-disclaimer { max-width: 62ch; margin: 10px auto 0; font-size: 13px; color: var(--iss-muted-2); font-style: italic; }
.iss-page .iss-area-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.iss-page .iss-area-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 24px 22px;
	border-radius: var(--iss-r);
	background: var(--iss-card);
	border: 1px solid var(--iss-line);
	box-shadow: var(--iss-e1);
	overflow: hidden;
}
.iss-page .iss-area-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--iss-blue), var(--iss-cyan));
}
.iss-page .iss-area-top { margin-bottom: 8px; }
.iss-page .iss-area-top h3 { font-size: 18px; margin-bottom: 3px; }
.iss-page .iss-area-subtitle { display: block; font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--iss-blue); text-transform: uppercase; }
.iss-page .iss-area-card > p { font-size: 13.5px; color: var(--iss-muted); line-height: 1.55; margin-bottom: 14px; }
.iss-page .iss-area-uc { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.iss-page .iss-area-uc li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--iss-muted); }
.iss-page .iss-area-uc li b { color: var(--iss-ink); }
.iss-page .iss-area-uc-num {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--iss-bg-tint);
	color: var(--iss-blue);
	display: grid;
	place-items: center;
	font-size: 10.5px;
	font-weight: 700;
}
.iss-page .iss-area-proof { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--iss-line); font-size: 13px; }
.iss-page .iss-area-proof-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--iss-muted-2); margin-bottom: 4px; }
.iss-page .iss-area-proof-sep { margin: 0 6px; color: var(--iss-line-strong); }

/* ---- 25o. Find Your Next Workflow (Business Process Workflows) -------- */
.iss-page .iss-next-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(24px, 3vw, 44px); align-items: start; }
.iss-page .iss-next-recognition blockquote {
	margin: 12px 0;
	padding: 16px 18px;
	border-left: 3px solid var(--iss-cyan);
	background: rgba(255, 255, 255, .06);
	border-radius: 0 12px 12px 0;
	font-size: 16px;
	font-style: italic;
	color: #fff;
}
.iss-page .iss-next-recognition > p { font-size: 13.5px; color: #c7dce7; line-height: 1.6; }
.iss-page .iss-next-closing {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 24px;
	padding: 18px 22px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .12);
}
.iss-page .iss-next-closing > div { flex: 1 1 auto; }
.iss-page .iss-next-closing > div > p { margin: 8px 0 0 34px; font-size: 13px; color: #c2d2dd; }
.iss-page .iss-next-callout {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 13.5px;
	color: #fff;
	font-weight: 600;
}
.iss-page .iss-next-badge {
	display: inline-block;
	flex: 0 0 auto;
	padding: 7px 14px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--iss-blue-2), var(--iss-cyan));
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.iss-page .iss-next-signals { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.iss-page .iss-next-signal {
	padding: 18px 20px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .12);
}
.iss-page .iss-next-signal-tag {
	display: block;
	font-family: var(--iss-mono);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--iss-sky);
	margin-bottom: 8px;
}
.iss-page .iss-next-signal h3 { font-size: 15px; color: #fff; margin-bottom: 6px; }
.iss-page .iss-next-signal p { font-size: 12.5px; line-height: 1.55; color: #c2d2dd; }

/* ---- 25p. Customer Proof — compact supporting cards (Rea, MTF) --------- */
.iss-page .iss-proof-extra-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 18px; }
.iss-page .iss-proof-extra {
	padding: 24px 22px;
	border-radius: var(--iss-r);
	background: var(--iss-card);
	border: 1px solid var(--iss-line);
	box-shadow: var(--iss-e1);
}
.iss-page .iss-proof-extra-metric { margin-bottom: 10px; }
.iss-page .iss-proof-extra-metric span { display: block; font-size: 12px; color: var(--iss-muted); margin-top: 2px; }
.iss-page .iss-proof-extra-customer { display: block; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--iss-blue); margin-bottom: 4px; }
.iss-page .iss-proof-extra h3 { font-size: 16px; margin-bottom: 8px; }
.iss-page .iss-proof-extra p { font-size: 13px; color: var(--iss-muted); line-height: 1.55; margin-bottom: 12px; }

/* ---- 25q. Hero breadth visual (Business Process Workflows) ------------
 * Compact restatement of the "One Platform. Many Processes." diagram inside
 * the dark hero, same opmp_, qad_backbone_ and hiw_execution_ content as the
 * full-size section below, at hero scale.
 */
.iss-page .iss-hero-breadth {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--iss-r-lg);
	padding: 22px 24px;
	backdrop-filter: blur(6px);
}
.iss-page .iss-hero-breadth-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.iss-page .iss-hero-breadth-top .iss-hero-wf-kicker { font-family: var(--iss-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--iss-sky); }
.iss-page .iss-hero-breadth-established { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.iss-page .iss-hero-breadth-established span {
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .14);
	font-size: 11.5px;
	font-weight: 600;
	color: #d7e9f2;
}
.iss-page .iss-hero-breadth-heading { display: block; color: #fff; font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.iss-page .iss-hero-breadth-sub { display: block; color: rgba(255, 255, 255, .68); font-size: 12.5px; margin-bottom: 14px; }
.iss-page .iss-hero-breadth-platform {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 16px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .16);
	margin-bottom: 12px;
}
.iss-page .iss-hero-breadth-platform strong { color: #fff; font-size: 15px; }
.iss-page .iss-hero-breadth-platform span { color: rgba(255, 255, 255, .85); font-size: 12px; }
.iss-page .iss-hero-breadth-platform .iss-live { color: #fff; }
.iss-page .iss-hero-breadth-areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.iss-page .iss-hero-breadth-areas div {
	padding: 8px 8px;
	text-align: left;
	border-radius: 8px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12);
}
.iss-page .iss-hero-breadth-areas strong { display: block; font-size: 11.5px; font-weight: 700; color: #fff; }
.iss-page .iss-hero-breadth-areas span { display: block; font-size: 9.5px; color: rgba(255, 255, 255, .6); margin-top: 2px; line-height: 1.3; }
.iss-page .iss-hero-breadth-qad {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .05);
	margin-bottom: 12px;
}
.iss-page .iss-hero-breadth-qad span { flex: 1; }
.iss-page .iss-hero-breadth-qad b { display: block; font-size: 11.5px; color: #fff; }
.iss-page .iss-hero-breadth-qad i { display: block; font-style: normal; font-size: 10px; color: rgba(255, 255, 255, .65); margin-top: 2px; }
.iss-page .iss-hero-breadth-swap { color: var(--iss-sky); font-size: 14px; flex: 0 0 auto; }
.iss-page .iss-hero-breadth-found { display: flex; flex-wrap: wrap; gap: 6px; }
.iss-page .iss-hero-breadth-found span {
	padding: 5px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	font-size: 10.5px;
	font-weight: 600;
	color: #d7e9f2;
}

/* ---- 25q-1. Hero-breadth layer-stack variant (iAssist) — same shell as
 * the areas/backbone/found composition above, but a vertical stack of
 * labelled bands (iAssist -> iApprove -> human-control -> QAD) instead of
 * a platform-box-plus-area-chips layout. Row/pill treatment matches
 * §27g's .iss-plat-rel-row/.iss-plat-rel-people so the two "AI relationship"
 * panels (Platform page, iAssist page) read as siblings.
 */
.iss-page .iss-hero-breadth-layers { display: grid; gap: 8px; margin-bottom: 12px; }
.iss-page .iss-hero-breadth-layer-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	border: 1px solid rgba(255, 255, 255, .11);
	border-radius: 13px;
	padding: 12px 13px;
	background: rgba(255, 255, 255, .05);
}
.iss-page .iss-hero-breadth-layer-row strong { display: block; font-size: 14px; color: #fff; margin-bottom: 2px; }
.iss-page .iss-hero-breadth-layer-row span { display: block; font-size: 11.5px; color: rgba(255, 255, 255, .68); line-height: 1.4; }
.iss-page .iss-hero-breadth-layer-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.iss-page .iss-hero-breadth-layer-steps span {
	padding: 4px 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #d7e9f2;
}
.iss-page .iss-hero-breadth-layer-human {
	position: relative;
	border-color: color-mix(in srgb, var(--iss-amber) 55%, transparent);
	background: linear-gradient(90deg, color-mix(in srgb, var(--iss-amber) 16%, transparent), rgba(255, 255, 255, .04));
}
.iss-page .iss-hero-breadth-layer-human::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 4px;
	border-radius: 13px 0 0 13px;
	background: var(--iss-amber);
}

/* ---- 25r. One Platform. Many Processes. — two-card layout (BPW) ------- */
.iss-page .iss-opmp-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 24px; align-items: stretch; }
.iss-page .iss-opmp-story {
	padding: 28px 26px;
	border-radius: var(--iss-r-lg);
	background: var(--iss-card);
	border: 1px solid var(--iss-line);
	box-shadow: var(--iss-e1);
	display: flex;
	flex-direction: column;
}
.iss-page .iss-opmp-story h3 { font-size: 18px; margin: 6px 0 10px; }
.iss-page .iss-opmp-story p { font-size: 13.5px; color: var(--iss-muted); line-height: 1.6; margin-bottom: auto; padding-bottom: 16px; }
.iss-page .iss-opmp-story .iss-inlink { align-self: flex-start; }
.iss-page .iss-opmp-story-note { margin: 4px 0 20px; }
.iss-page .iss-opmp-story-note strong { font-size: 14px; font-weight: 600; color: var(--iss-ink); }
.iss-page .iss-opmp-diagram {
	padding: 26px 24px;
	border-radius: var(--iss-r-lg);
	background: linear-gradient(150deg, var(--iss-navy-2), #0a2c46 62%, #0b3654);
	box-shadow: var(--iss-e3);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.iss-page .iss-opmp-flow-label {
	align-self: flex-start;
	font-family: var(--iss-mono);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--iss-sky);
	margin-bottom: 4px;
	display: block;
}
.iss-page .iss-opmp-established { width: 100%; }
.iss-page .iss-opmp-established-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.iss-page .iss-opmp-established-card {
	padding: 12px 14px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
}
.iss-page .iss-opmp-established-card strong { display: block; color: #fff; font-size: 13.5px; margin-bottom: 3px; }
.iss-page .iss-opmp-established-card span { display: block; color: rgba(255, 255, 255, .68); font-size: 11.5px; }
.iss-page .iss-opmp-arrow { color: var(--iss-sky); font-size: 18px; line-height: 1; }
.iss-page .iss-opmp-platform-box,
.iss-page .iss-opmp-target {
	width: 100%;
	text-align: center;
	padding: 14px 18px;
	border-radius: 14px;
	color: #fff;
}
.iss-page .iss-opmp-platform-box {
	/* Subdued, consistent with the established-area cards above it — not a
	   bright accent color, which made it pop out more than the mockup's flat
	   treatment intends. */
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .18);
}
.iss-page .iss-opmp-platform-box strong,
.iss-page .iss-opmp-target strong { display: block; font-size: 16px; margin-bottom: 3px; }
.iss-page .iss-opmp-platform-box span { display: block; color: rgba(255, 255, 255, .85); font-size: 12px; }
.iss-page .iss-opmp-platform-box .iss-live { justify-content: center; margin-top: 8px; color: #fff; }
.iss-page .iss-opmp-target { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); color: #fff; }
.iss-page .iss-opmp-target-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.iss-page .iss-opmp-target-chips span {
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	font-size: 12px;
	font-weight: 600;
}
.iss-page .iss-opmp-found {
	display: grid;
	grid-template-columns: repeat(var(--iss-cols, 4), 1fr);
	gap: 10px;
	width: 100%;
}
.iss-page .iss-opmp-found-item {
	padding: 14px 14px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .12);
}
.iss-page .iss-opmp-found-item strong { display: block; font-size: 13px; color: #fff; margin-bottom: 3px; }
.iss-page .iss-opmp-found-item span { display: block; font-size: 11px; color: rgba(255, 255, 255, .65); }

/* ---- 25s. How It Works — dark band variant (BPW) ----------------------
 * Scoped to `.iss-wf-dark`, added to the section only when this page's
 * `hiw_source_chips` is set — the other 3 solution pages' How It Works stays
 * the light section it already was.
 */
.iss-page .iss-wf-dark {
	background: linear-gradient(150deg, var(--iss-navy-2), #0a2c46 62%, #0b3654);
	padding-top: clamp(48px, 7vw, 88px);
	padding-bottom: clamp(48px, 7vw, 88px);
	/* Actually bleed edge-to-edge, same fix §25c's .iss-shift-band needed —
	   without this the section's background stops at the 1200px column
	   instead of spanning the viewport. */
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
}
.iss-page .iss-wf-dark .iss-sec-head h2 { color: #fff; }
.iss-page .iss-wf-dark .iss-sec-head p { color: #c7dce7; }
.iss-page .iss-wf-dark .iss-kicker { color: var(--iss-sky); }
.iss-page .iss-wf-dark .iss-kicker::before { background: currentColor; }
.iss-page .iss-wf-dark .iss-wf-shell { background: transparent; border: 0; box-shadow: none; border-radius: 0; }
.iss-page .iss-wf-dark .iss-wf-rail { display: none; }
.iss-page .iss-wf-dark .iss-wf-grid { gap: 14px; }
.iss-page .iss-wf-dark .iss-wf-step {
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .12);
	border-right: 0;
	border-radius: 14px;
	padding: 18px 16px;
}
.iss-page .iss-wf-dark .iss-wf-num { color: var(--iss-sky); }
.iss-page .iss-wf-dark .iss-wf-step h3 { color: #fff; }
.iss-page .iss-wf-dark .iss-wf-step p { color: #c2d2dd; }
.iss-page .iss-wf-dark .iss-wf-ico { background: rgba(255, 255, 255, .08); color: var(--iss-sky); }
.iss-page .iss-wf-dark .iss-wf-arrow { color: var(--iss-sky); }
.iss-page .iss-wf-dark .iss-wf-badge { background: rgba(23, 168, 120, .18); color: #a6f0d3; }
/*
 * Dark-card treatment for `.iss-cap` when it appears inside `.iss-wf-dark`
 * (iAssist's Human-in-the-Loop and Trust & Governance sections — both
 * approved [V9] as dark navy bands, same gradient this class already
 * provides, just needed their card grid re-colored to match).
 */
.iss-page .iss-wf-dark .iss-cap { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 12px 26px rgba(0, 0, 0, .08); }
.iss-page .iss-wf-dark .iss-cap h4 { color: #fff; }
.iss-page .iss-wf-dark .iss-cap p { color: #c7dce7; }
.iss-page .iss-wf-dark .iss-cap .iss-vn,
.iss-page .iss-wf-dark .iss-cap .iss-kicker { color: var(--iss-sky); }
.iss-page .iss-wf-dark .iss-cap .iss-muted { color: #9fb7c7; }
.iss-page .iss-wf-dark .iss-note-callout,
.iss-page .iss-wf-dark .iss-side-callout {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .12);
}
.iss-page .iss-wf-dark .iss-note-callout strong,
.iss-page .iss-wf-dark .iss-side-callout strong { color: #fff; }
.iss-page .iss-wf-dark .iss-note-callout p,
.iss-page .iss-wf-dark .iss-side-callout p { color: #c7dce7; }
/* "Human Decision Required" card (card 3) — same amber-accent language as
   the hero's human-control layer (§25q-1) and the Platform page's iAssist
   relationship panel (§27g), so all three read as one family. */
.iss-page .iss-cap-human {
	position: relative;
	border-color: color-mix(in srgb, var(--iss-amber) 55%, transparent) !important;
	background: linear-gradient(135deg, color-mix(in srgb, var(--iss-amber) 14%, transparent), rgba(255, 255, 255, .05)) !important;
}
.iss-page .iss-cap-human::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 4px;
	background: var(--iss-amber);
}
.iss-page .iss-cap-human-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.iss-page .iss-cap-human-actions li {
	display: inline-flex;
	padding: 5px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
	font-size: 11px;
	font-weight: 700;
	color: #fff;
}
.iss-page .iss-cap-human-actions .iss-b { display: none; }
.iss-page .iss-cap-human-note { margin-top: 12px; font-size: 12.5px; }
.iss-page .iss-cap-human-note strong { display: block; margin-bottom: 2px; }
.iss-page .iss-wf-source { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 16px; }
.iss-page .iss-wf-source-label { font-weight: 700; font-size: 13px; color: #fff; }
.iss-page .iss-wf-source-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.iss-page .iss-wf-source-chips span {
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
	font-size: 12px;
	font-weight: 600;
	color: #d7e9f2;
}
.iss-page .iss-wf-framework {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.iss-page .iss-wf-framework strong { font-size: 15px; color: #fff; }
.iss-page .iss-wf-framework span { font-size: 13px; color: #b6cfdd; }
/* Bidirectional QAD card — replaces two stacked bars with one shared card
 * (same "read ↔ execute" idiom as §21's qad_visual/qad_system pairing). */
.iss-page .iss-wf-backbone-bidir { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.iss-page .iss-wf-backbone-bidir .iss-wf-backbone-side { flex: 1 1 240px; position: relative; z-index: 1; }
.iss-page .iss-wf-backbone-bidir .iss-wf-backbone-side span { font-size: 12.5px; color: #d7e9f2; }
.iss-page .iss-wf-backbone-swap { position: relative; z-index: 1; flex: 0 0 auto; color: var(--iss-sky); font-size: 18px; }
.iss-page .iss-wf-outcomes-label {
	font-family: var(--iss-mono);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #8fa9b8;
	margin-right: 6px;
	align-self: center;
}
.iss-page .iss-wf-dark .iss-wf-outcomes span:not(.iss-wf-outcomes-label) { background: rgba(255, 255, 255, .08); color: #d7e9f2; }

/* ---- 25s-2. How It Works — light tint band (iApprove™ Purchasing) -----
 * The Purchasing V27 Clean HTML paints this section's own full-viewport-
 * width background (a soft cyan-tinted gradient behind the boxed white
 * workflow-strip card) — currently missing here entirely (transparent,
 * and constrained to the 1200px column like everything else), which reads
 * as a plain, boxed section instead of the mockup's edge-to-edge tint.
 * Scoped to this specific page (body.postid-6541) rather than the shared
 * `.iss-section` class — the other 3 non-BPW solution pages' own approved
 * packages haven't been checked for whether they call for the same
 * treatment, so nothing changes for them here.
 */
body.postid-6541 .iss-page #iss-workflow {
	background:
		radial-gradient(circle at 15% 20%, rgba(57, 195, 230, .10), transparent 24%),
		linear-gradient(180deg, #f7fbfe 0%, #ffffff 60%);
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
}

/* ---- 25t. Shared side/note callout (light-blue bordered card) --------- */
.iss-page .iss-sec-head-split { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px, 3vw, 40px); align-items: start; text-align: left; margin-bottom: 36px; }
.iss-page .iss-sec-head-split h2 { margin: 10px 0 12px; }
.iss-page .iss-side-callout,
.iss-page .iss-note-callout {
	background: var(--iss-bg-tint);
	border: 1px solid var(--iss-line);
	border-left: 3px solid var(--iss-blue);
	border-radius: 0 var(--iss-r) var(--iss-r) 0;
	padding: 20px 22px;
}
.iss-page .iss-side-callout-kicker {
	display: block;
	font-family: var(--iss-mono);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--iss-blue);
	margin-bottom: 8px;
}
.iss-page .iss-side-callout strong,
.iss-page .iss-note-callout strong { display: block; font-size: 16px; color: var(--iss-ink); }
.iss-page .iss-side-callout p,
.iss-page .iss-note-callout p { font-size: 13px; color: var(--iss-muted); line-height: 1.55; margin-top: 8px; }
.iss-page .iss-note-callout {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 8px;
}
.iss-page .iss-note-callout > div { flex: 1; }
.iss-page .iss-note-callout .iss-btn { flex: 0 0 auto; }
.iss-page .iss-note-callout-accent { color: var(--iss-blue) !important; }
/* Dark-section variant (used inside How It Works / Find Your Next Workflow) */
.iss-page .iss-wf-dark .iss-side-callout,
.iss-page .iss-shift-band .iss-note-callout {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .16);
	border-left-color: var(--iss-cyan);
}
.iss-page .iss-wf-dark .iss-side-callout strong,
.iss-page .iss-shift-band .iss-note-callout strong { color: #fff; }
.iss-page .iss-wf-dark .iss-side-callout p,
.iss-page .iss-shift-band .iss-note-callout p { color: #c2d2dd; }

/* ---- 25u. Common iApprove™ Foundation — phased card treatment (BPW) --- */
.iss-page .iss-cap.iss-cap-phased { position: relative; overflow: hidden; }
.iss-page .iss-cap.iss-cap-phased::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--iss-blue), var(--iss-cyan));
}
.iss-page .iss-cap-top-phased { justify-content: space-between; align-items: center; }
.iss-page .iss-cap-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--iss-bg-tint);
	color: var(--iss-blue);
	font-weight: 700;
	font-size: 13px;
}
.iss-page .iss-cap-phase {
	font-family: var(--iss-mono);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--iss-muted-2);
}
.iss-page .iss-cap-desc2 {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--iss-line);
	font-weight: 600;
	color: var(--iss-ink) !important;
}

/* ---- 25v. Customer Proof — extra stat tiles + actions row (BPW) ------- */
.iss-page .iss-snap-teaser-stats {
	display: grid;
	grid-template-columns: repeat(var(--iss-cols, 3), 1fr);
	gap: 12px;
	margin: 16px 0;
}
.iss-page .iss-snap-teaser-stats .iss-mnum { font-size: 28px; }
.iss-page .iss-snap-teaser-stat {
	padding: 14px 12px;
	border-radius: 12px;
	background: var(--iss-bg-tint);
	border: 1px solid var(--iss-line);
}
.iss-page .iss-snap-teaser-stat span { display: block; font-size: 11.5px; color: var(--iss-muted); margin-top: 4px; line-height: 1.4; }
.iss-page .iss-snap-teaser-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.iss-page .iss-inlink-muted { color: var(--iss-muted-2); }
.iss-page .iss-inlink-muted:hover { color: var(--iss-blue); }

/* ---- 25k. Responsive ----------------------------------------------- */
@media (max-width: 1100px) {
	/*
	 * Columns of prose stop being readable well before the 940px collapse the
	 * rest of the page uses, so the step grid breaks first — but HOW MANY
	 * columns it breaks to depends on how many steps the page has, and this
	 * used to be a hard-coded 3.
	 *
	 * 3 was written for Invoice & AP's six steps, where it is a clean 3x2. It
	 * is not clean for anything else: Purchasing's four steps render 3 + 1,
	 * leaving most of a row empty, and the five-step pages (Supplier Lifecycle,
	 * Enterprise Workflow Automation) render 3 + 2. The iApprove Platform page
	 * also draws this grid, also with four steps, so it had the same orphan.
	 *
	 * The count now comes from `--iss-steps-md`, which both templates emit
	 * inline next to `--iss-steps` via iss_wf_grid_style(). Its values are the
	 * handoffs' own: Purchasing V29 and Supplier Lifecycle V15 both break their
	 * strip to `1fr 1fr` (at 960px and 980px), and Invoice & AP V11 breaks its
	 * six to `repeat(3,1fr)` at 1080px. The `3` fallback is what applies to any
	 * grid that doesn't set the property, so nothing regresses to a worse
	 * layout than it had if a template is ever added without it.
	 */
	.iss-page .iss-wf-grid { grid-template-columns: repeat(var(--iss-steps-md, 3), 1fr); }
	.iss-page .iss-wf-step { min-height: 0; border-right: 0; border-bottom: 1px solid var(--iss-line); }
	.iss-page .iss-wf-arrow { display: none; }
	.iss-page .iss-wf-backbone-data { grid-template-columns: repeat(3, 1fr); }
	.iss-page .iss-qad-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 940px) {
	.iss-page .iss-bridge-grid,
	.iss-page .iss-qad-grid { grid-template-columns: 1fr; }
	.iss-page .iss-qad-visual-body { grid-template-columns: 1fr; }
	.iss-page .iss-qad-swap { transform: rotate(90deg); }
	.iss-page .iss-cta-band-split { grid-template-columns: 1fr; }
	.iss-page .iss-cta-band-split .iss-btn-row { flex-wrap: wrap; }
	/* The flip is a desktop-only nicety — once every section is one column, a
	   visual ordered above the copy just pushes the heading off-screen. */
	.iss-page .iss-cap-detail-flip .iss-cap-visual { order: 0; }
	/* Business Area Explorer: 3x2 -> 2-column, per the handoff's own QA note. */
	.iss-page .iss-area-grid { grid-template-columns: repeat(2, 1fr); }
	.iss-page .iss-next-grid { grid-template-columns: 1fr; }
	.iss-page .iss-opmp-found { grid-template-columns: repeat(2, 1fr); }
	/* Both use fr-unit 2-col grids with no explicit min-width, so — unlike
	   the flex-based .iss-next-grid above — they don't shrink gracefully and
	   silently overflow past the viewport instead of stacking. */
	.iss-page .iss-opmp-grid,
	.iss-page .iss-sec-head-split { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.iss-page .iss-wf-grid { grid-template-columns: 1fr; }
	.iss-page .iss-wf-backbone-data { grid-template-columns: 1fr 1fr; }
	.iss-page .iss-bridge-band .iss-bridge-themes,
	.iss-page .iss-qad-cards,
	.iss-page .iss-ai-list-grid { grid-template-columns: 1fr; }
	.iss-page .iss-cap-closing { flex-direction: column; align-items: flex-start; }
	/* Business Area Explorer: 2-column -> 1-column, per the handoff's own QA note. */
	.iss-page .iss-area-grid,
	.iss-page .iss-next-signals,
	.iss-page .iss-opmp-established-grid,
	.iss-page .iss-opmp-found,
	.iss-page .iss-proof-extra-grid { grid-template-columns: 1fr; }
}
/*
 * The orbit's absolute positioning is undone below 560px (§24 stacks the boxes
 * into normal flow instead). The five-box rules above are more specific AND
 * later in the file, so they would otherwise win inside that media query and
 * re-absolute the boxes on a 390px screen — these put them back.
 */
@media (max-width: 560px) {
	.iss-page .iss-ai-within-light .iss-ai-orbit { width: 220px; height: auto; }
	/*
	 * The core circle was left position:absolute + top/left 50% here, so once
	 * the chips below dropped into normal flow (making the container tall) it
	 * stayed centred on the now-much-taller box — landing on top of whichever
	 * chip happened to be in the middle (visible on Invoice & AP Workflow's
	 * 5-chip orbit before this fix). Static, so it takes its place first in
	 * source order instead.
	 */
	.iss-page .iss-ai-within-light .iss-ai-orbit-core {
		position: static;
		transform: none;
		margin: 0 auto 14px;
	}
	.iss-page .iss-ai-within-light .iss-ai-orbit-chip.c1,
	.iss-page .iss-ai-within-light .iss-ai-orbit-chip.c2,
	.iss-page .iss-ai-within-light .iss-ai-orbit-chip.c3,
	.iss-page .iss-ai-within-light .iss-ai-orbit-chip.c4,
	.iss-page .iss-ai-within-light .iss-ai-orbit-chip.c5 {
		position: static;
		inset: auto;
		transform: none;
		width: 100%;
	}
	/*
	 * A 4-chip orbit (Purchasing, Enterprise Workflow Automation, Supplier
	 * Lifecycle Management) keeps the desktop COMPASS arrangement here instead
	 * of falling into the plain stacked list above — Spencer's call, 2026-09-16,
	 * off a side-by-side desktop/mobile comparison of Purchasing's own AI Layer:
	 * "have them around the circle like on desktop... right now the blocks are
	 * all below it and it looks off." Grid, not absolute positioning: a 5-chip
	 * orbit's flanking boxes read fine as text-only, unlabelled positions, but
	 * that trick needs a container tall/wide enough for the chips to float
	 * without colliding, which is exactly what a 390px phone does not have.
	 * `grid-template-areas` gives every chip an explicit, named cell instead —
	 * no absolute math, no overlap, and the row heights follow content instead
	 * of a guessed min-height.
	 *
	 * This ALSO replaces the plain "kill the transform" patch this rule used to
	 * be (see git history if you need the old one-line version): the reset two
	 * rules up still wins `position: static` for c1-c4 (its `transform: none`
	 * doesn't matter any more — this rule sets its own per chip), so nothing
	 * above this needs to change for the 4-chip case to take the grid instead.
	 *
	 * Sizing was picked empirically against the real copy length (see
	 * `docs/audit/2026-09-16_mobile-graphics-audit/proto-05-final-candidate.png`
	 * for the working version this was taken from): 110px is as small as the
	 * core circle's own three lines of text stay readable, which leaves each
	 * side chip ~85-95px wide depending on the page's own side padding — narrow
	 * enough that a chip's description wraps to short lines, same as it would
	 * in any other narrow card, not a sign anything is broken.
	 */
	.iss-page .iss-ai-within-light .iss-ai-orbit-4 {
		display: grid;
		grid-template-columns: 1fr 110px 1fr;
		grid-template-areas:
			"top    top    top"
			"left   core   right"
			"bottom bottom bottom";
		align-items: center;
		gap: 8px;
		width: 100%;
		height: auto;
		padding: 0;
	}
	/* The dashed ring is sized and centred for the full desktop circle+chip
	   footprint; at the grid's own scale it would draw a decorative circle far
	   bigger than the 110px core it's meant to trace, off-centre on the grid's
	   full height besides. Nothing else here uses it, so it's simplest to drop. */
	.iss-page .iss-ai-within-light .iss-ai-orbit-4::before { content: none; }
	.iss-page .iss-ai-within-light .iss-ai-orbit-4 .iss-ai-orbit-core {
		grid-area: core;
		position: static;
		transform: none;
		width: 110px;
		height: 110px;
		margin: 0 auto;
		padding: 8px;
	}
	.iss-page .iss-ai-within-light .iss-ai-orbit-4 .iss-ai-orbit-core b { font-size: 12px; }
	.iss-page .iss-ai-within-light .iss-ai-orbit-4 .iss-ai-orbit-core span { font-size: 8px; line-height: 1.2; }
	.iss-page .iss-ai-within-light .iss-ai-orbit-4 .iss-ai-orbit-chip.c1 { grid-area: top; }
	.iss-page .iss-ai-within-light .iss-ai-orbit-4 .iss-ai-orbit-chip.c2 { grid-area: left; }
	.iss-page .iss-ai-within-light .iss-ai-orbit-4 .iss-ai-orbit-chip.c3 { grid-area: right; }
	/*
	 * `transform: none` is not redundant with the plain c1-c5 reset above: §24's
	 * `.iss-ai-orbit-4 .iss-ai-orbit-chip.c4` (line ~5501, unconditional,
	 * bottom-centering for the desktop compass) is FIVE classes — one more than
	 * that reset — so it still wins `transform: translateX(-50%)` here despite
	 * `position: static` making its `left`/`bottom`/`top`/`right` inert. This
	 * grid-area rule is the same five classes, so restating `transform: none`
	 * here is what actually beats it (this exact bug already happened once —
	 * see commit 2b2b1d3 — and reappeared when that fix was folded into this
	 * grid rule without carrying the property over). Confirmed on staging: c4
	 * measured translateX(-50%) of its own ~320px grid width, its content
	 * showing only the horizontal sliver still inside the wrap's rounded
	 * corners — title and both text edges clipped. Added 2026-09-16.
	 */
	.iss-page .iss-ai-within-light .iss-ai-orbit-4 .iss-ai-orbit-chip.c4 { grid-area: bottom; transform: none; }
	.iss-page .iss-ai-within-light .iss-ai-orbit-4 .iss-ai-orbit-chip { padding: 10px; font-size: 10px; }
	/* The chip's title is a bare `<b>` (single-solution.php), not `<strong>`. */
	.iss-page .iss-ai-within-light .iss-ai-orbit-4 .iss-ai-orbit-chip b { font-size: 11.5px; margin-bottom: 5px; }
}

/* ============================================================
   26. SOLUTIONS HUB PAGE (/solutions/, template-solutions-hub.php)
   ------------------------------------------------------------
   Developer Handoff V5. Hero reuses .iss-detail-hero (§7) for its dark
   background/type-inversion/button re-skin — everything below is
   page-specific layout on top of that, plus the 6 light sections that
   follow it. New component family throughout (`.iss-hub-*`); nothing here
   redefines a shared component, per the package's own Developer Notes.
   ============================================================ */

/* ---- Section grounds & dividers — the page's alternating bands --------
 *
 * V5 Clean HTML gives every content section between the hero and the closing
 * band a ground of its own and a hairline under it, alternating
 * `--iss-bg` / `--iss-card` down the page and closing each row with
 * `1px solid var(--iss-line)`. The page shipped with neither, so all five
 * sections ran together on one flat ground with no seam anywhere between the
 * hero and the CTA (Danny, 2026-09-06).
 *
 * `.iss-bleed` (§3) carries these on the SECTIONS in the template, because a
 * ground that stops at The7's 1200px column reads as a floating panel rather
 * than a band across the page — the class releases the border box to the
 * viewport edges and puts the same padding back, so each `.iss-wrap` lands on
 * the identical left edge it did before.
 *
 * The grounds are opaque, so for the length of the content area they cover
 * `--iss-page-ground` (§2) entirely. That matches the mockup, whose body is
 * flat `--iss-bg` and whose only tint is the hero's own — and it is why the
 * page ground is now nowhere on this page at all, which the closing-section
 * note below depends on.
 * ---------------------------------------------------------------------- */
.iss-page .iss-hub-foundation,
.iss-page .iss-hub-iassist,
.iss-page .iss-hub-router {
	background: var(--iss-bg);
}
.iss-page .iss-hub-solutions,
.iss-page .iss-hub-proof {
	background: var(--iss-card);
}
.iss-page .iss-hub-foundation,
.iss-page .iss-hub-solutions,
.iss-page .iss-hub-iassist,
.iss-page .iss-hub-proof,
.iss-page .iss-hub-router {
	border-bottom: 1px solid var(--iss-line);
}
/*
 * …including the Router's, which needs the closing section pulled tight under
 * it to mean anything. §15c only zeroes that section's BOTTOM padding (so the
 * band meets the footer); its top padding stays, and on this page that left a
 * ~88px strip between the Router's hairline and the gradient. The strip reads
 * WHITE, not `--iss-bg`: `--iss-page-ground` (§2) is painted by a
 * `z-index:-1` pseudo-element, and a negative-z-index child paints before the
 * backgrounds of its non-stacking-context ancestors — so The7's `#page`, which
 * is opaque white, covers it. That's site-wide and not this page's to fix, but
 * a white band with no explanation between a tinted section and the CTA is.
 *
 * V5 has no gap there at all — `.solution-router`'s border-bottom meets the
 * gradient directly — so this closes it the way the mockup draws it rather
 * than by re-painting the strip. The Router's own 88px of bottom padding plus
 * the band's internal `clamp(36px, 5vw, 60px)` supply the breathing room, which
 * is the one condition `.iss-tight` is for: the thing directly above genuinely
 * supplies the space. Page-scoped — every other page keeps its normal closer.
 */
.iss-solutions-hub > .iss-section:last-child:has(.iss-cta-band) {
	padding-top: 0;
}

/*
 * Two of the five carry a decorative wash in the mockup — a cyan bloom off the
 * Foundation's top-right corner and a tint down the top of the Solutions
 * overview; the other three are flat. Both are inert and sit under the
 * content, which is lifted onto its own layer so nothing paints over it.
 */
.iss-page .iss-hub-foundation { overflow: hidden; }
.iss-page .iss-hub-foundation::before {
	content: "";
	position: absolute;
	width: 420px;
	height: 420px;
	right: -160px;
	top: -170px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(57, 195, 230, .10), transparent 70%);
	pointer-events: none;
}
.iss-page .iss-hub-solutions::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(237, 245, 250, .70), transparent 22%),
		radial-gradient(circle at 12% 18%, rgba(57, 195, 230, .07), transparent 24%);
	pointer-events: none;
}
.iss-page .iss-hub-foundation > .iss-wrap,
.iss-page .iss-hub-solutions > .iss-wrap {
	position: relative;
	z-index: 2;
}

/* ---- 26a. Hero — headline proof list + architecture visual ------------ */
/*
 * V4→V5 change, scoped to this page only: the Developer Notes call for the
 * "Explore the Solutions" primary CTA to use --iss-blue-dark text on its
 * white background, not the shared .iss-detail-hero white-button treatment's
 * --iss-navy-2 (see §7 — that shared rule stays untouched for every other
 * detail-hero page; this just outweighs it on .iss-hub-hero specifically).
 */
.iss-page .iss-hub-hero .iss-btn-white,
.iss-page .iss-hub-hero .iss-btn-white:hover {
	color: var(--iss-blue-dark);
}
.iss-page .iss-hub-hero-proof {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 22px;
	margin: 22px 0 28px;
	max-width: 560px;
}
.iss-page .iss-hub-hero-proof li {
	position: relative;
	padding-left: 22px;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	line-height: 1.4;
}
.iss-page .iss-hub-hero-proof li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .5em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--iss-cyan);
	box-shadow: 0 0 0 4px rgba(57, 195, 230, .14);
}

/*
 * HERO COLUMN BALANCE — deliberately overrides V5's own hero ratio.
 *
 * V5 draws this hero at `1.02fr .98fr` against its own (shorter) sample copy,
 * where the architecture card still runs 36% taller than the copy column in
 * the Clean HTML itself. With the real approved copy on a 1200px wrap the gap
 * was worse: 481px of copy against an 893px card at 1512px — a 46% overhang
 * that reads as a layout bug (Danny, 2026-09-04). Per CLAUDE.md's "Hero
 * columns carry similar visual weight", the mockup's ratio loses to the 10%
 * balance rule.
 *
 * Fixed with steps 1 and 2 only — width, then the card's internal spacing
 * (below). No type was trimmed: 481/893 -> 627/678, i.e. 7.5% at 1512 and
 * 1280 and 6.1% at 1150. §26h's max-width:1100 rule still stacks the grid
 * below the breakpoint and wins there on source order.
 *
 * The accepted divergence: at .86fr the copy column is narrow enough that the
 * hero's two CTAs stack instead of sitting side by side. A sweep of ratio x
 * grid-gap x spacing found no combination that keeps them inline AND gets
 * under 14%, so the choice was between stacked buttons and a 25%+ overhang.
 * Stacked buttons are the less visible divergence, and the overhang is the
 * thing that was actually reported.
 */
.iss-page .iss-hub-hero-in { grid-template-columns: .86fr 1.14fr; }

.iss-page .iss-hub-arch {
	position: relative;
	/* 26px -> 20px: step 2 of the hero-balance fix above. */
	padding: 20px;
	border-radius: 24px;
	border: 1px solid rgba(255, 255, 255, .1);
	background: rgba(255, 255, 255, .055);
	box-shadow: 0 24px 58px rgba(0, 0, 0, .22);
}
.iss-page .iss-hub-arch-tag {
	display: inline-flex;
	align-items: center;
	margin-bottom: 11px;
	padding: 6px 11px;
	border-radius: 999px;
	border: 1px solid rgba(57, 195, 230, .2);
	background: rgba(57, 195, 230, .085);
	color: var(--iss-sky);
	font-family: var(--iss-mono);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.iss-page .iss-hub-arch-iassist {
	position: relative;
	text-align: center;
	padding: 12px 15px 13px;
	margin-bottom: 13px;
	border-radius: 16px;
	border: 1px solid rgba(57, 195, 230, .26);
	background: linear-gradient(180deg, rgba(57, 195, 230, .13), rgba(57, 195, 230, .05));
}
.iss-page .iss-hub-arch-iassist h2 { margin: 0 0 4px; font-size: 19px; }
.iss-page .iss-hub-arch-iassist p { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .75); }
.iss-page .iss-hub-signature {
	display: inline-block;
	margin-top: 6px;
	color: var(--iss-cyan);
	font-size: 12px;
	font-weight: 800;
}
.iss-page .iss-hub-arch-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin-bottom: 13px;
}
.iss-page .iss-hub-arch-card {
	padding: 13px 14px 14px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, .085);
	background: linear-gradient(180deg, rgba(7, 26, 43, .9), rgba(10, 41, 64, .9));
}
.iss-page .iss-hub-arch-num {
	margin-bottom: 6px;
	color: var(--iss-cyan);
	font-family: var(--iss-mono);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .13em;
}
.iss-page .iss-hub-arch-card h3 { margin: 0 0 6px; font-size: 17px; color: #fff; }
.iss-page .iss-hub-arch-card p { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .7); }
.iss-page .iss-hub-arch-platform {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 18px;
	align-items: center;
	padding: 14px 16px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, .1);
	background: rgba(255, 255, 255, .07);
}
.iss-page .iss-hub-arch-platform-label {
	display: block;
	margin-bottom: 6px;
	color: var(--iss-sky);
	font-family: var(--iss-mono);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .13em;
	text-transform: uppercase;
}
.iss-page .iss-hub-arch-platform strong { display: block; color: #fff; font-size: 22px; }
.iss-page .iss-hub-arch-platform p { margin: 5px 0 0; font-size: 13px; color: rgba(255, 255, 255, .75); }
.iss-page .iss-hub-arch-qad {
	min-width: 160px;
	padding: 12px 13px;
	text-align: center;
	border-radius: 12px;
	border: 1px solid rgba(57, 195, 230, .24);
	background: rgba(57, 195, 230, .1);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.35;
}
.iss-page .iss-hub-arch-note {
	margin-top: 10px;
	text-align: center;
	color: rgba(255, 255, 255, .7);
	font-size: 12px;
	line-height: 1.45;
}
.iss-page .iss-hub-arch-note strong { display: block; color: var(--iss-sky); }

.iss-page .iss-hub-nav-wrap { position: relative; z-index: 2; }
.iss-page .iss-hub-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: clamp(28px, 4vw, 44px);
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, .1);
}
.iss-page .iss-hub-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0 15px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .12);
	background: rgba(255, 255, 255, .045);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
}
.iss-page .iss-hub-nav a:hover { border-color: rgba(57, 195, 230, .3); background: rgba(57, 195, 230, .075); }

/* ---- 26b. Shared split section head (Foundation top / Solutions /
       Customer Results / Router) — kicker+h2 left, intro right ---------- */
.iss-page .iss-hub-foundation-top,
.iss-page .iss-hub-solutions-head,
.iss-page .iss-hub-proof-head,
.iss-page .iss-hub-router-head {
	display: grid;
	grid-template-columns: .95fr 1.05fr;
	gap: clamp(24px, 4vw, 54px);
	align-items: end;
	margin-bottom: 34px;
}
.iss-page .iss-hub-foundation-top { align-items: start; grid-template-columns: .92fr 1.08fr; margin-bottom: 38px; }
.iss-page .iss-hub-solutions-intro,
.iss-page .iss-hub-proof-intro,
.iss-page .iss-hub-router-intro { margin: 0; font-size: 16px; line-height: 1.6; }

/* ---- 26c. Platform Foundation ------------------------------------------ */
.iss-page .iss-hub-foundation-side {
	position: relative;
	padding: 24px 26px;
	border-radius: 18px;
	background: var(--iss-card);
	border: 1px solid var(--iss-line);
	box-shadow: var(--iss-e1);
}
.iss-page .iss-hub-foundation-side::before {
	content: "";
	position: absolute;
	left: 0;
	top: 20px;
	bottom: 20px;
	width: 4px;
	border-radius: 999px;
	background: var(--iss-cyan);
}
.iss-page .iss-hub-side-label {
	display: block;
	margin-bottom: 9px;
	color: var(--iss-blue);
	font-family: var(--iss-mono);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.iss-page .iss-hub-foundation-side h3 { margin: 0 0 9px; }
.iss-page .iss-hub-foundation-side p { margin: 0 0 15px; font-size: 14px; }
.iss-page .iss-hub-side-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--iss-blue);
	font-weight: 800;
	font-size: 14px;
}
.iss-page .iss-hub-foundation-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.iss-page .iss-hub-foundation-card {
	position: relative;
	padding: 22px 20px 20px;
	border-radius: 16px;
	background: var(--iss-card);
	border: 1px solid var(--iss-line);
	box-shadow: var(--iss-e1);
	overflow: hidden;
}
.iss-page .iss-hub-foundation-card::after {
	content: "";
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 0;
	height: 3px;
	border-radius: 999px 999px 0 0;
	background: linear-gradient(90deg, var(--iss-blue), var(--iss-cyan));
	opacity: .88;
}
.iss-page .iss-hub-foundation-icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: 15px;
	border-radius: 12px;
	border: 1px solid rgba(12, 115, 201, .16);
	background: var(--iss-bg-tint);
	color: var(--iss-blue);
	font-family: var(--iss-mono);
	font-size: 10.5px;
	font-weight: 800;
}
.iss-page .iss-hub-foundation-card h3 { margin: 0 0 8px; }
.iss-page .iss-hub-foundation-card p { margin: 0; font-size: 13.5px; }
.iss-page .iss-hub-foundation-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	margin-top: 24px;
	padding: 17px 20px;
	border-radius: 16px;
	border: 1px solid var(--iss-line);
	background: var(--iss-bg-tint);
}
.iss-page .iss-hub-foundation-bottom strong { color: var(--iss-navy); font-size: 14px; }
.iss-page .iss-hub-foundation-bottom span { color: var(--iss-muted); font-size: 14px; text-align: right; }

/* ---- 26d. Solution Overview Cards -------------------------------------- */
.iss-page .iss-hub-solutions-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.iss-page .iss-hub-solution-card {
	position: relative;
	padding: 26px 26px 24px;
	border-radius: 20px;
	background: var(--iss-card);
	border: 1px solid var(--iss-line);
	box-shadow: var(--iss-e1);
	overflow: hidden;
}
.iss-page .iss-hub-solution-card::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg, var(--iss-blue), var(--iss-cyan));
}
.iss-page .iss-hub-solution-topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 17px; }
.iss-page .iss-hub-solution-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 32px;
	padding: 0 10px;
	border-radius: 999px;
	background: var(--iss-bg-tint);
	border: 1px solid var(--iss-line);
	color: var(--iss-blue);
	font-family: var(--iss-mono);
	font-size: 10px;
	font-weight: 800;
}
.iss-page .iss-hub-solution-status {
	color: var(--iss-muted-2);
	font-family: var(--iss-mono);
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.iss-page .iss-hub-solution-card h3 { margin: 0 0 11px; }
.iss-page .iss-hub-solution-summary { margin: 0 0 20px; font-size: 14.5px; line-height: 1.58; }
.iss-page .iss-hub-cap-label {
	margin-bottom: 9px;
	color: var(--iss-muted-2);
	font-family: var(--iss-mono);
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.iss-page .iss-hub-cap-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.iss-page .iss-hub-cap-chip {
	display: inline-flex;
	align-items: center;
	min-height: 33px;
	padding: 6px 11px;
	border-radius: 999px;
	background: var(--iss-bg-tint);
	border: 1px solid var(--iss-line);
	color: var(--iss-ink);
	font-size: 12.5px;
	font-weight: 700;
}
.iss-page .iss-hub-solution-divider { height: 1px; background: var(--iss-line); margin: 4px 0 16px; }
.iss-page .iss-hub-solution-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.iss-page .iss-hub-solution-outcome small {
	display: block;
	margin-bottom: 5px;
	color: var(--iss-muted-2);
	font-family: var(--iss-mono);
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.iss-page .iss-hub-solution-outcome strong { display: block; color: var(--iss-ink); font-size: 13.5px; line-height: 1.4; max-width: 42ch; }
.iss-page .iss-hub-solution-link {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--iss-blue);
	font-weight: 800;
	font-size: 13.5px;
	white-space: nowrap;
}
.iss-page .iss-hub-portfolio-note {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 15px;
	align-items: center;
	margin-top: 22px;
	padding: 16px 19px;
	border-radius: 16px;
	background: var(--iss-navy);
	color: #fff;
}
.iss-page .iss-hub-portfolio-mark {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: rgba(57, 195, 230, .12);
	border: 1px solid rgba(57, 195, 230, .18);
	color: var(--iss-cyan);
	font-family: var(--iss-mono);
	font-size: 10px;
	font-weight: 800;
}
.iss-page .iss-hub-portfolio-note p { margin: 0; color: rgba(255, 255, 255, .82); font-size: 13.5px; line-height: 1.48; }

/* ---- 26e. Portfolio-level iAssist panel -------------------------------- */
.iss-page .iss-hub-iassist-panel {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: 42px;
	align-items: center;
	padding: 40px;
	border-radius: 24px;
	background:
		radial-gradient(circle at 78% 24%, rgba(57, 195, 230, .18), transparent 26%),
		linear-gradient(135deg, var(--iss-navy-2) 0%, var(--iss-navy) 58%, var(--iss-navy-3) 100%);
	border: 1px solid rgba(255, 255, 255, .08);
	box-shadow: 0 22px 54px rgba(10, 41, 64, .17);
	color: #fff;
}
.iss-page .iss-hub-iassist-panel h2 { margin: 0 0 15px; color: #fff; max-width: 11ch; }
.iss-page .iss-hub-iassist-panel .iss-lead { color: rgba(255, 255, 255, .84); max-width: 54ch; }
.iss-page .iss-hub-iassist-values { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin: 20px 0 24px; }
.iss-page .iss-hub-iassist-value {
	padding: 13px 14px;
	border-radius: 13px;
	border: 1px solid rgba(255, 255, 255, .1);
	background: rgba(255, 255, 255, .055);
}
.iss-page .iss-hub-iassist-value strong { display: block; margin-bottom: 4px; color: #fff; font-size: 14px; }
.iss-page .iss-hub-iassist-value span { display: block; color: rgba(255, 255, 255, .7); font-size: 12.5px; line-height: 1.4; }
.iss-page .iss-hub-iassist-panel .iss-hub-signature { display: flex; align-items: center; gap: 9px; margin: 0 0 22px; color: var(--iss-sky); font-size: 14px; }
.iss-page .iss-hub-iassist-panel .iss-hub-signature::before { content: ""; width: 28px; height: 1px; background: var(--iss-cyan); flex: none; }
.iss-page .iss-hub-iassist-visual {
	position: relative;
	padding: 22px 22px 20px;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, .09);
	background: rgba(255, 255, 255, .045);
}
.iss-page .iss-hub-ai-core {
	width: 140px;
	height: 140px;
	margin: 10px auto 20px;
	display: grid;
	place-items: center;
	text-align: center;
	border-radius: 50%;
	border: 1px solid rgba(143, 226, 245, .3);
	background:
		radial-gradient(circle at 35% 30%, rgba(143, 226, 245, .18), transparent 28%),
		linear-gradient(180deg, rgba(57, 195, 230, .17), rgba(12, 115, 201, .14));
	box-shadow: 0 0 0 14px rgba(57, 195, 230, .05), 0 16px 36px rgba(0, 0, 0, .18);
}
.iss-page .iss-hub-ai-core strong { display: block; color: #fff; font-size: 24px; line-height: 1.05; }
.iss-page .iss-hub-ai-core span { display: block; margin-top: 4px; color: var(--iss-cyan); font-family: var(--iss-mono); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.iss-page .iss-hub-ai-use-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 16px; }
.iss-page .iss-hub-ai-use-card { padding: 13px 14px; border-radius: 13px; border: 1px solid rgba(255, 255, 255, .09); background: rgba(7, 26, 43, .74); }
.iss-page .iss-hub-ai-use-num { display: block; margin-bottom: 4px; color: var(--iss-cyan); font-family: var(--iss-mono); font-size: 9px; font-weight: 800; }
.iss-page .iss-hub-ai-use-card strong { display: block; margin-bottom: 3px; color: #fff; font-size: 13.5px; }
.iss-page .iss-hub-ai-use-card span { display: block; color: rgba(255, 255, 255, .68); font-size: 12px; line-height: 1.36; }
.iss-page .iss-hub-ai-solution-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .09); }
.iss-page .iss-hub-ai-solution-band div {
	min-height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 7px 8px;
	text-align: center;
	border-radius: 10px;
	background: rgba(57, 195, 230, .07);
	border: 1px solid rgba(57, 195, 230, .13);
	color: #fff;
	font-size: 11px;
	line-height: 1.28;
	font-weight: 700;
}
.iss-page .iss-hub-ai-span-note { margin-top: 11px; text-align: center; color: var(--iss-sky); font-family: var(--iss-mono); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

/* ---- 26f. Selected Customer Results ------------------------------------ */
.iss-page .iss-hub-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.iss-page .iss-hub-proof-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 20px 20px 18px;
	border-radius: 16px;
	border: 1px solid var(--iss-line);
	background: var(--iss-bg);
	overflow: hidden;
}
.iss-page .iss-hub-proof-card::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-hub-proof-tag {
	margin-bottom: 11px;
	color: var(--iss-blue);
	font-family: var(--iss-mono);
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.iss-page .iss-hub-proof-customer { margin: 0 0 7px; color: var(--iss-navy); font-size: 18px; font-weight: 800; }
.iss-page .iss-hub-proof-title { margin: 0 0 15px; color: var(--iss-ink); font-size: 13.5px; line-height: 1.44; font-weight: 700; }
.iss-page .iss-hub-proof-link {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--iss-blue);
	font-size: 13px;
	font-weight: 800;
}
.iss-page .iss-hub-proof-link-pending { pointer-events: none; cursor: default; opacity: .68; }
.iss-page .iss-hub-proof-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--iss-line);
}
.iss-page .iss-hub-proof-bottom p { margin: 0; font-size: 14px; }
.iss-page .iss-hub-inlink { flex: none; color: var(--iss-blue); font-weight: 800; font-size: 14px; }

/* ---- 26g. Solution Router ----------------------------------------------- */
.iss-page .iss-hub-router-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.iss-page .iss-hub-router-card {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 16px;
	align-items: center;
	padding: 19px 19px 19px 17px;
	border-radius: 16px;
	border: 1px solid var(--iss-line);
	background: var(--iss-card);
	box-shadow: var(--iss-e1);
}
.iss-page .iss-hub-router-num {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--iss-bg-tint);
	border: 1px solid var(--iss-line);
	color: var(--iss-blue);
	font-family: var(--iss-mono);
	font-size: 10px;
	font-weight: 800;
}
.iss-page .iss-hub-router-copy small {
	display: block;
	margin-bottom: 4px;
	color: var(--iss-muted-2);
	font-family: var(--iss-mono);
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
}
.iss-page .iss-hub-router-copy strong { display: block; margin-bottom: 4px; color: var(--iss-navy); font-size: 15.5px; line-height: 1.3; }
.iss-page .iss-hub-router-copy span { display: block; color: var(--iss-muted); font-size: 13px; line-height: 1.44; }
.iss-page .iss-hub-router-arrow {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--iss-navy);
	color: var(--iss-cyan);
	font-size: 16px;
	font-weight: 800;
}
.iss-page .iss-hub-router-card:hover .iss-hub-router-arrow { background: var(--iss-blue); color: #fff; }
.iss-page .iss-hub-router-help {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	margin-top: 20px;
	padding: 17px 19px;
	border-radius: 16px;
	background: var(--iss-navy);
	color: #fff;
}
.iss-page .iss-hub-router-help p { margin: 0; color: rgba(255, 255, 255, .8); font-size: 14px; line-height: 1.45; }
.iss-page .iss-hub-router-help a {
	flex: none;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 15px;
	border-radius: 11px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .13);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
}
.iss-page .iss-hub-router-help a:hover { background: rgba(57, 195, 230, .11); border-color: rgba(57, 195, 230, .24); }

/* ---- 26h. Responsive ---------------------------------------------------- */
@media (max-width: 1100px) {
	/*
	 * Scoped to .iss-hub-hero-in (this page's hero only), not the shared
	 * .iss-hero-2col class it also carries — the Developer Notes call for
	 * this hero specifically to stack below ~1100px, which is narrower than
	 * .iss-hero-2col's own shared 940px breakpoint (§22) used by other
	 * detail-hero pages. Overriding .iss-hero-2col itself would move every
	 * other page's breakpoint too, so this targets the hub-specific class
	 * instead.
	 */
	.iss-page .iss-hub-hero-in { grid-template-columns: 1fr; gap: 40px; }
	.iss-page .iss-hub-hero-proof { grid-template-columns: 1fr; }
}
@media (max-width: 1050px) {
	.iss-page .iss-hub-foundation-top { grid-template-columns: 1fr; gap: 26px; }
	.iss-page .iss-hub-foundation-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
	.iss-page .iss-hub-solutions-head,
	.iss-page .iss-hub-router-head { grid-template-columns: 1fr; gap: 16px; align-items: start; }
	.iss-page .iss-hub-solutions-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1030px) {
	.iss-page .iss-hub-iassist-panel { grid-template-columns: 1fr; }
	.iss-page .iss-hub-iassist-panel h2 { max-width: none; }
}
@media (max-width: 900px) {
	.iss-page .iss-hub-proof-head { grid-template-columns: 1fr; gap: 12px; align-items: start; }
	.iss-page .iss-hub-proof-grid,
	.iss-page .iss-hub-router-grid { grid-template-columns: 1fr; }
	.iss-page .iss-hub-router-card { grid-template-columns: auto 1fr; }
	.iss-page .iss-hub-router-arrow { display: none; }
	.iss-page .iss-hub-router-help,
	.iss-page .iss-hub-proof-bottom,
	.iss-page .iss-hub-foundation-bottom { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 700px) {
	.iss-page .iss-hub-iassist-values,
	.iss-page .iss-hub-ai-use-grid { grid-template-columns: 1fr; }
	.iss-page .iss-hub-ai-solution-band { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 650px) {
	.iss-page .iss-hub-foundation-grid { grid-template-columns: 1fr; }
	.iss-page .iss-hub-arch-grid { grid-template-columns: 1fr; }
	.iss-page .iss-hub-arch-platform { grid-template-columns: 1fr; }
	.iss-page .iss-hub-arch-qad { min-width: 0; width: 100%; }
	/* Developer Notes: "At mobile widths... CTAs stack full width." Scoped to
	   the hub hero so it doesn't change the shared .iss-btn-row's sizing on
	   every other page that reuses it. */
	.iss-page .iss-hub-hero .iss-btn-row .iss-btn { width: 100%; }
}

/* =============================================================================
   27. iApprove Platform page (/platform/) — Developer Handoff V17
   ========================================================================= */

/* ---- 27a. Hero-breadth additions (extends §25q's component rather than
 * duplicating it) — a plain badge pill, an arrow divider between stacked
 * bands, and a 2-column tile variant for this page's 4 Solution tiles
 * (§25q's -areas is 3-column, sized for BPW's 6 business areas).
 */
.iss-page .iss-hero-breadth-pill {
	flex: 0 0 auto;
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
	font-family: var(--iss-mono);
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #d7e9f2;
	white-space: nowrap;
}
.iss-page .iss-hero-breadth-arrow { text-align: center; color: var(--iss-sky); font-size: 16px; line-height: 1; margin: 6px 0; }
.iss-page .iss-hero-breadth-areas.iss-cols-2 { grid-template-columns: repeat(2, 1fr); }

/* ---- 27b. Section grid + light "flow card" (What Is iApprove / Expand) --- */
.iss-plat-what-grid { display: grid; grid-template-columns: .88fr 1.12fr; gap: 52px; align-items: center; }
.iss-plat-qad-grid { display: grid; grid-template-columns: .88fr 1.12fr; gap: 52px; align-items: center; }

.iss-page .iss-plat-flow {
	border: 1px solid var(--iss-line);
	border-radius: 22px;
	background: linear-gradient(180deg, #fff, var(--iss-bg-tint));
	box-shadow: var(--iss-shadow, 0 18px 50px rgba(7, 26, 43, .1));
	padding: 25px;
}
.iss-page .iss-plat-flow-kicker { font-family: var(--iss-mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--iss-blue); margin-bottom: 16px; }
.iss-page .iss-plat-flow-sources { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.iss-page .iss-plat-flow-sources div {
	background: #fff;
	border: 1px solid var(--iss-line-strong);
	border-radius: 12px;
	padding: 14px 8px;
	text-align: center;
	font-size: 12.5px;
	font-weight: 700;
	color: #4c6478;
}
.iss-page .iss-plat-flow-arrow { text-align: center; color: var(--iss-blue); font-size: 20px; font-weight: 700; margin: 8px 0; }
.iss-page .iss-plat-flow-engine {
	border-radius: 14px;
	background: linear-gradient(135deg, var(--iss-navy), var(--iss-navy-3, #0b3654));
	color: #fff;
	padding: 16px;
}
.iss-page .iss-plat-flow-engine-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.iss-page .iss-plat-flow-engine-head strong { font-size: 20px; }
.iss-page .iss-plat-flow-engine-head span { font-family: var(--iss-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--iss-sky); font-weight: 700; }
.iss-page .iss-plat-flow-engine-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.iss-page .iss-plat-flow-engine-grid div { border-radius: 10px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); padding: 11px 7px; text-align: center; }
.iss-page .iss-plat-flow-engine-grid b { display: block; font-size: 12px; }
.iss-page .iss-plat-flow-engine-grid span { display: block; font-size: 10px; color: rgba(255, 255, 255, .72); margin-top: 3px; line-height: 1.3; }
.iss-page .iss-plat-flow-out {
	margin-top: 12px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid var(--iss-line-strong);
	padding: 13px 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.iss-page .iss-plat-flow-out strong { font-size: 17px; color: var(--iss-navy-2, #0a2940); }
.iss-page .iss-plat-flow-out span { display: block; font-size: 12px; color: var(--iss-muted); }
.iss-page .iss-plat-flow-badge {
	flex: 0 0 auto;
	font-family: var(--iss-mono);
	font-size: 9.5px;
	text-transform: uppercase;
	letter-spacing: .07em;
	font-weight: 700;
	padding: 7px 9px;
	border-radius: 999px;
	background: var(--iss-bg-tint);
	color: var(--iss-blue);
	white-space: nowrap;
}
.iss-page .iss-plat-flow-foot { margin-top: 14px; text-align: center; font-size: 13px; color: var(--iss-muted); }
.iss-page .iss-plat-flow-foot strong { color: var(--iss-blue); }
.iss-page .iss-plat-principle-note { text-align: left; color: rgba(255, 255, 255, .78); }
.iss-page .iss-plat-principle-note strong { color: #fff; }

/* ---- 27b-1. [V18] Additional Platform Controls + Controlled Environments —
   compact subcomponent inside Core Platform Capabilities, per its own
   classification ("does not change any shared/site-wide component"). */
.iss-page .iss-plat-ctrl-band { margin-top: 20px; display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; align-items: stretch; }
.iss-page .iss-plat-ctrl-main .iss-kicker { display: block; margin-bottom: 10px; }
.iss-page .iss-plat-ctrl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.iss-page .iss-plat-ctrl {
	border-radius: 14px;
	padding: 16px 18px;
	background: var(--iss-card);
	border: 1px solid var(--iss-line);
}
.iss-page .iss-plat-ctrl strong { display: block; font-size: 14px; color: var(--iss-ink); margin-bottom: 4px; }
.iss-page .iss-plat-ctrl p { font-size: 12.5px; line-height: 1.5; color: var(--iss-muted); }
.iss-page .iss-plat-ctrl-env { margin: 0; display: flex; align-items: center; }
.iss-page .iss-plat-ctrl-env .iss-kicker { display: block; margin-bottom: 8px; }
.iss-page .iss-plat-qad-examples { margin-top: 12px; font-size: 13.5px; color: var(--iss-muted); }
.iss-page .iss-plat-qad-examples strong { color: var(--iss-ink); }

/* ---- 27c. Light footer band (How It Works / Solutions foundation / proof) */
.iss-page .iss-plat-foot-band {
	margin-top: 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	border-radius: 16px;
	background: #fff;
	border: 1px solid var(--iss-line-strong);
	padding: 17px 19px;
}
.iss-page .iss-plat-foot-band strong { display: block; font-size: 16px; color: var(--iss-navy-2, #0a2940); }
.iss-page .iss-plat-foot-band span { font-size: 13px; color: var(--iss-muted); }
.iss-page .iss-plat-foot-badge {
	flex: 0 0 auto;
	white-space: nowrap;
	font-family: var(--iss-mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .07em;
	font-weight: 700;
	color: var(--iss-blue);
	background: var(--iss-bg-tint);
	padding: 7px 9px;
	border-radius: 999px;
}
.iss-page .iss-plat-badge-sm { font-size: 9px; padding: 6px 8px; }

/* ---- 27d. QAD Integration proof stat row -------------------------------- */
.iss-page .iss-plat-principle-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 22px; }
.iss-page .iss-plat-principle-grid div { border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; padding: 12px 13px; background: rgba(255, 255, 255, .05); }
.iss-page .iss-plat-principle-grid strong { display: block; font-size: 14px; color: #fff; margin-bottom: 3px; }
.iss-page .iss-plat-principle-grid span { display: block; font-size: 12px; color: #a6f0d3; }
.iss-page .iss-plat-proofline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 30px; }
.iss-page .iss-plat-proofline div { border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .045); border-radius: 12px; padding: 13px; text-align: center; }
.iss-page .iss-plat-proofline strong { display: block; font-size: 15px; color: #fff; }
.iss-page .iss-plat-proofline span { display: block; font-size: 11.5px; color: #c7dce7; margin-top: 4px; }

/* ---- 27e. Solutions Powered by iApprove — card shell + foundation band -- */
.iss-page .iss-plat-solutions-shell { border: 1px solid var(--iss-line-strong); border-radius: 22px; background: #fff; padding: 24px; box-shadow: 0 18px 42px rgba(7, 26, 43, .07); }
.iss-page .iss-plat-solutions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.iss-page .iss-plat-solutions-grid .iss-cap { min-height: 0; }
.iss-page .iss-plat-foot-band + .iss-note-callout { margin-top: 20px; }

/* ---- 27f. Built to Expand — expansion path steps ------------------------ */
.iss-page .iss-plat-expand { border: 1px solid var(--iss-line-strong); border-radius: 20px; background: linear-gradient(180deg, #fff, var(--iss-bg-tint)); padding: 23px; box-shadow: var(--iss-shadow, 0 18px 50px rgba(7, 26, 43, .1)); }
.iss-page .iss-plat-expand-steps { display: grid; gap: 10px; margin-top: 15px; }
.iss-page .iss-plat-expand-step { display: grid; grid-template-columns: 34px 1fr auto; gap: 13px; align-items: center; border: 1px solid var(--iss-line-strong); border-radius: 13px; background: #fff; padding: 12px 13px; }
.iss-page .iss-plat-expand-step strong { display: block; font-size: 14.5px; color: var(--iss-navy-2, #0a2940); }
.iss-page .iss-plat-expand-step span { display: block; font-size: 12.5px; color: var(--iss-muted); margin-top: 2px; }
.iss-page .iss-plat-expand-step .iss-cap-num {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 0;
	background: var(--iss-bg-tint);
	border: 1px solid var(--iss-line-strong);
}
/* Expansion-path pills read as "reuse" signals in the mockup -- green tint,
   not the generic blue badge used for QAD/platform labels elsewhere. */
.iss-page .iss-plat-expand-step .iss-plat-badge-sm {
	color: #1a8a5f;
	background: color-mix(in srgb, #fff 92%, var(--iss-green));
}

/* ---- 27g. iAssist relationship panel (Platform-level; distinct from the
 * standardized individual Solution-page iAssist component) — reuses
 * .iss-hero-breadth for the panel shell (§25q), adds its own row treatment
 * and the amber-token People/Human Control emphasis row.
 */
.iss-page .iss-plat-rel-stack { display: grid; gap: 10px; }
.iss-page .iss-plat-rel-row { border: 1px solid rgba(255, 255, 255, .11); border-radius: 13px; padding: 14px 15px; background: rgba(255, 255, 255, .05); }
.iss-page .iss-plat-rel-row strong { display: block; font-size: 15px; color: #fff; margin-bottom: 3px; }
.iss-page .iss-plat-rel-row span { display: block; font-size: 12.5px; color: #c7dce7; line-height: 1.4; }
.iss-page .iss-plat-rel-people {
	position: relative;
	border-color: color-mix(in srgb, var(--iss-amber) 55%, transparent);
	background: linear-gradient(90deg, color-mix(in srgb, var(--iss-amber) 16%, transparent), rgba(255, 255, 255, .04));
}
.iss-page .iss-plat-rel-people::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 4px;
	border-radius: 13px 0 0 13px;
	background: var(--iss-amber);
}
.iss-page .iss-plat-human-pill {
	display: inline-flex;
	align-items: center;
	margin-left: 8px;
	padding: 5px 9px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--iss-amber) 45%, transparent);
	background: color-mix(in srgb, var(--iss-amber) 16%, transparent);
	color: var(--iss-amber);
	font-family: var(--iss-mono);
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	vertical-align: middle;
}
.iss-page .iss-plat-ai-examples { margin-top: 14px; }

/* ---- 27h. Customer Proof — 4 cards (reuses §26f's .iss-hub-proof-* shell,
 * just needs a 2x2 grid for 4 cards instead of the Solutions Hub's 3).
 */
.iss-page.iss-platform .iss-hub-proof-grid { grid-template-columns: repeat(2, 1fr); }

/* ---- 27i. Responsive ---------------------------------------------------- */
@media (max-width: 1000px) {
	.iss-plat-what-grid,
	.iss-plat-qad-grid { grid-template-columns: 1fr; }
	.iss-page .iss-plat-solutions-grid { grid-template-columns: repeat(2, 1fr); }
	.iss-page .iss-plat-principle-grid,
	.iss-page .iss-plat-proofline { grid-template-columns: repeat(2, 1fr); }
	.iss-page .iss-plat-ctrl-band { grid-template-columns: 1fr; }
	.iss-page .iss-plat-ctrl-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 650px) {
	.iss-page .iss-plat-ctrl-grid { grid-template-columns: 1fr; }
	.iss-page .iss-plat-flow-sources,
	.iss-page .iss-plat-flow-engine-grid { grid-template-columns: repeat(2, 1fr); }
	.iss-page .iss-plat-solutions-grid { grid-template-columns: 1fr; }
	.iss-page .iss-plat-principle-grid,
	.iss-page .iss-plat-proofline,
	.iss-page.iss-platform .iss-hub-proof-grid { grid-template-columns: 1fr; }
	.iss-page .iss-plat-expand-step { grid-template-columns: 30px 1fr; }
	.iss-page .iss-plat-expand-step > span:last-child { grid-column: 2; }
	.iss-page .iss-plat-foot-band { align-items: flex-start; flex-direction: column; }
}

/* =============================================================================
   27z. iApprove Platform (/platform/) — V18 Clean HTML parity pass
   -----------------------------------------------------------------------------
   The V18 build reused several generic site components (.iss-hero-breadth,
   .iss-cap, .iss-note-callout, .iss-plat-foot-band, .iss-wf-grid,
   .iss-hub-proof-card) for compositions the package classifies as
   page-specific. Where the Clean HTML gives those compositions their own
   treatment — three visually distinct hero architecture bands, dark
   foundation/summary/proof bands, carded workflow steps — this block restates
   it, scoped to `.iss-platform` so the shared components keep their own look
   on every other page that uses them.

   Deliberately NOT restated here (classified "Shared, reused as-is" in the V18
   Developer Notes): global header/footer, the hero-docked contextual
   navigation, the blue/blue-gradient Final CTA shell, and site-wide button
   language. Only their approved page copy is matched.
   ========================================================================= */

/* ---- 27z-1. Hero shell ------------------------------------------------- */
.iss-page.iss-platform .iss-detail-hero {
	padding: 84px 0 112px;
	background:
		radial-gradient(circle at 77% 23%, rgba(57, 195, 230, .18), transparent 30%),
		radial-gradient(circle at 14% 88%, rgba(31, 139, 224, .17), transparent 31%),
		linear-gradient(145deg, var(--iss-navy-2), var(--iss-navy) 61%, var(--iss-navy-3));
}
/* The Clean HTML's accent is a flat --iss-sky, not the site gradient fill. */
.iss-page.iss-platform .iss-detail-hero h1 .iss-grad {
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	-webkit-text-fill-color: currentColor;
	color: var(--iss-sky);
}

/* ---- 27z-2. Hero architecture card ------------------------------------- */
.iss-page.iss-platform .iss-detail-hero .iss-hero-breadth {
	position: relative;
	padding: 27px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .045));
	border-color: rgba(255, 255, 255, .14);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
	backdrop-filter: blur(10px);
}
.iss-page.iss-platform .iss-detail-hero .iss-hero-breadth::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: var(--iss-r-lg);
	background: linear-gradient(135deg, rgba(143, 226, 245, .22), transparent 42%);
	pointer-events: none;
}
.iss-page.iss-platform .iss-detail-hero .iss-hero-breadth > * { position: relative; }
.iss-page.iss-platform .iss-detail-hero .iss-hero-breadth-top { margin-bottom: 10px; }
.iss-page.iss-platform .iss-detail-hero .iss-hero-wf-kicker {
	font-family: inherit;
	/*
	 * §7g's scale off this page's own floor. That rule ties this one on
	 * specificity and loses on source order, so without the clamp here
	 * /platform/ is the one hero on the site whose kicker stays 11.5px in a
	 * 728px card.
	 */
	font-size: clamp(11.5px, 2.2cqw, 14px);
	font-weight: 900;
	letter-spacing: .12em;
}
.iss-page.iss-platform .iss-hero-breadth-arrow { font-size: 18px; }

/* Three distinct bands: intelligence layer, platform foundation, ERP. */
.iss-page.iss-platform .iss-hero-breadth-platform { margin-bottom: 0; }
.iss-page.iss-platform .iss-hero-breadth-platform.is-ai {
	border-radius: 13px;
	border-color: rgba(143, 226, 245, .28);
	background: linear-gradient(90deg, rgba(57, 195, 230, .12), rgba(31, 139, 224, .08));
}
.iss-page.iss-platform .iss-hero-breadth-platform.is-ai strong { font-size: 20px; line-height: 1.15; }
.iss-page.iss-platform .iss-hero-breadth-platform.is-ai span { font-size: 13px; font-weight: 750; color: #c8dbe8; }
.iss-page.iss-platform .iss-hero-breadth-platform.is-platform {
	padding: 17px 18px;
	border-radius: 16px;
	border-color: rgba(143, 226, 245, .38);
	background: rgba(8, 31, 49, .72);
}
.iss-page.iss-platform .iss-hero-breadth-platform.is-platform strong { font-size: 25px; }
.iss-page.iss-platform .iss-hero-breadth-platform.is-platform span {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	font-weight: 700;
	color: #dce8ee;
}
.iss-page.iss-platform .iss-hero-breadth-platform.is-qad {
	padding: 15px 18px;
	border-radius: 14px;
	border-color: rgba(143, 226, 245, .2);
	background: linear-gradient(90deg, rgba(12, 115, 201, .24), rgba(57, 195, 230, .12));
}
.iss-page.iss-platform .iss-hero-breadth-platform.is-qad strong { font-size: 20px; }
.iss-page.iss-platform .iss-hero-breadth-platform.is-qad span {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	font-weight: 780;
	line-height: 1.45;
	color: #dbe8ee;
}
.iss-page.iss-platform .iss-hero-breadth-pill.is-ai-pill {
	font-family: inherit;
	font-size: 10.5px;
	font-weight: 900;
	letter-spacing: .09em;
	padding: 8px 10px;
	border-color: transparent;
	background: rgba(255, 255, 255, .08);
	color: #d8ebf9;
}
.iss-page.iss-platform .iss-hero-breadth-pill.is-foundation {
	font-size: 9px;
	font-weight: 900;
	letter-spacing: .08em;
	padding: 7px 9px;
	background: rgba(82, 224, 178, .08);
	border-color: rgba(82, 224, 178, .16);
	color: #8bd3bc;
}
.iss-page.iss-platform .iss-hero-breadth-pill.is-system {
	font-family: inherit;
	font-size: 9px;
	font-weight: 900;
	letter-spacing: .08em;
	padding: 6px 9px;
	border-color: transparent;
	background: rgba(255, 255, 255, .08);
	color: #d8ebf9;
}

/* Solution tiles: 2-up, at the Clean HTML's readable scale. */
.iss-page.iss-platform .iss-hero-breadth-areas { gap: 9px; margin-bottom: 0; }
.iss-page.iss-platform .iss-hero-breadth-areas div {
	min-height: 80px;
	padding: 14px 13px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .065);
	border-color: rgba(255, 255, 255, .08);
}
.iss-page.iss-platform .iss-hero-breadth-areas strong {
	font-size: 16px;
	margin-bottom: 4px;
	line-height: 1.22;
	color: #f7fbfd;
}
.iss-page.iss-platform .iss-hero-breadth-areas span {
	font-size: 13px;
	font-weight: 650;
	line-height: 1.38;
	color: #bfd0de;
}

/* Architecture chips sit as an even 3-up row, not a wrapping pill list. */
.iss-page.iss-platform .iss-hero-breadth-found {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 7px;
	margin-top: 12px;
}
.iss-page.iss-platform .iss-hero-breadth-found span {
	text-align: center;
	padding: 7px 6px;
	font-size: 9.5px;
	font-weight: 850;
	background: rgba(255, 255, 255, .065);
	color: #d6e6f2;
}

/* ---- 27z-3. What is iApprove ------------------------------------------- */
.iss-page.iss-platform #what-is-iapprove { padding: 102px 0 96px; }
.iss-page.iss-platform .iss-plat-what-grid { gap: 55px; }
.iss-page.iss-platform #what-is-iapprove .iss-note-callout,
.iss-page.iss-platform #expand .iss-note-callout,
.iss-page.iss-platform #solutions > .iss-wrap > .iss-note-callout {
	padding: 15px 18px;
	background: var(--iss-bg);
	border: 0;
	border-left: 4px solid var(--iss-cyan);
	border-radius: 0 12px 12px 0;
}
.iss-page.iss-platform #what-is-iapprove .iss-note-callout strong,
.iss-page.iss-platform #expand .iss-note-callout strong { font-size: 17px; color: var(--iss-navy-2); }
.iss-page.iss-platform #what-is-iapprove .iss-note-callout p,
.iss-page.iss-platform #expand .iss-note-callout p { margin-top: 4px; font-size: 13px; line-height: 1.48; }
/* Built to Expand's callout is a fully bordered box in the Clean HTML. */
.iss-page.iss-platform #expand .iss-note-callout {
	padding: 16px 17px;
	border: 1px solid #dde7ee;
	border-radius: 14px;
}
.iss-page.iss-platform #solutions > .iss-wrap > .iss-note-callout {
	padding: 16px 18px;
	background: var(--iss-card);
}
/* [V26] `> strong`, not a bare descendant `strong`. This pair was written for
   V17's one-line closing callout, whose strong WAS a direct child. V23 replaces
   that callout with the enterprise-breadth panel, whose strongs are nested —
   and because this selector carries an id it outranks every page-scoped rule in
   §27z-17, so a bare descendant match repainted the panel's closing line
   `--iss-navy-2` ON a `--iss-navy-2` band: navy on navy, invisible, while every
   element was present and "visible" to a DOM assertion. Same failure mode as
   the `span` rule that captured the brand wrapper. Caught by diffing computed
   styles against the served mockup, not by a screenshot. */
.iss-page.iss-platform #solutions > .iss-wrap > .iss-note-callout > strong { font-size: 15px; color: var(--iss-navy-2); }
.iss-page.iss-platform #solutions > .iss-wrap > .iss-note-callout > p { margin-top: 4px; font-size: 14px; font-weight: 750; line-height: 1.48; }

.iss-page.iss-platform .iss-plat-flow-sources div {
	min-height: 58px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px 10px;
	border-radius: 14px;
	border-color: #c3d6e6;
	background: linear-gradient(180deg, #fff, #fafcfe);
	box-shadow: 0 8px 18px rgba(7, 26, 43, .06), inset 0 1px 0 rgba(255, 255, 255, .95);
	font-size: 13px;
	font-weight: 900;
	letter-spacing: -.01em;
	color: #30506a;
}
.iss-page.iss-platform .iss-plat-flow-engine { padding: 18px; border-radius: 15px; }
.iss-page.iss-platform .iss-plat-flow-engine-grid > div {
	padding: 13px 8px;
	background: rgba(255, 255, 255, .105);
	border-color: rgba(255, 255, 255, .15);
}
.iss-page.iss-platform .iss-plat-flow-out {
	padding: 14px 16px;
	border-radius: 13px;
	background: #eef8fb;
	border-color: #d0e3f3;
}
.iss-page.iss-platform .iss-plat-flow-out strong { font-size: 19px; font-weight: 900; color: var(--iss-navy-2); }
.iss-page.iss-platform .iss-plat-flow-badge {
	font-family: inherit;
	font-size: 10.5px;
	font-weight: 950;
	letter-spacing: .085em;
	padding: 8px 10px;
	background: var(--iss-card);
	color: var(--iss-blue);
	box-shadow: 0 4px 12px rgba(7, 26, 43, .06);
}
.iss-page.iss-platform .iss-plat-flow-foot { margin-top: 17px; font-size: 13px; font-weight: 850; color: #4e6377; }
.iss-page.iss-platform .iss-plat-flow-foot strong { font-weight: 950; }

/* ---- 27z-4. How the Platform Works — six cards on a connecting rail ----- */
.iss-page.iss-platform #how-it-works { padding: 94px 0; }
.iss-page.iss-platform #how-it-works .iss-sec-head { margin-bottom: 36px; }
.iss-page.iss-platform .iss-wf-grid {
	position: relative;
	gap: 10px;
	margin-top: 26px;
}
.iss-page.iss-platform .iss-wf-grid::before {
	content: "";
	position: absolute;
	left: 7%;
	right: 7%;
	top: 28px;
	height: 2px;
	z-index: 0;
	background: linear-gradient(90deg, #b3e4f2, #63b3e5, var(--iss-blue));
}
.iss-page.iss-platform .iss-wf-step {
	position: relative;
	z-index: 1;
	min-height: 192px;
	padding: 18px 14px 17px;
	border: 1px solid #d5e2ec;
	border-radius: 16px;
	background: var(--iss-card);
	box-shadow: 0 10px 25px rgba(7, 26, 43, .055);
}
.iss-page.iss-platform .iss-wf-step:not(:last-child) { border-right: 1px solid #d5e2ec; }
.iss-page.iss-platform .iss-wf-step h3 { font-size: 19px; color: var(--iss-navy-2); margin-bottom: 8px; }
.iss-page.iss-platform .iss-wf-step p { font-size: 13px; line-height: 1.48; font-weight: 650; color: #3d566d; }
.iss-page.iss-platform .iss-wf-num {
	width: 34px;
	height: 34px;
	margin-bottom: 15px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, var(--iss-blue), var(--iss-cyan));
	color: var(--iss-card);
	font-size: 11px;
	font-weight: 950;
	box-shadow: 0 7px 16px rgba(12, 115, 201, .22);
}
.iss-page.iss-platform #how-it-works .iss-plat-foot-band { margin-top: 27px; border-color: #dae7f0; }

/* ---- 27z-5. Core Platform Capabilities --------------------------------- */
.iss-page.iss-platform #capabilities { padding: 96px 0; }
.iss-page.iss-platform #capabilities .iss-sec-head { margin-bottom: 34px; }
.iss-page.iss-platform .iss-cap-grid .iss-cap {
	min-height: 232px;
	padding: 22px 20px;
	border: 1px solid #d7e2ec;
	border-radius: 18px;
	background: linear-gradient(180deg, #fff, #f9fbfd);
	box-shadow: 0 10px 26px rgba(7, 26, 43, .045);
}
/* The Clean HTML's capability cards carry a numbered icon tile, not a top rail. */
.iss-page.iss-platform .iss-cap-grid .iss-cap::before { display: none; }
.iss-page.iss-platform .iss-cap-grid .iss-cap-top { margin-bottom: 0; }
.iss-page.iss-platform .iss-cap-grid .iss-cap-num {
	width: 42px;
	height: 42px;
	padding: 0;
	display: grid;
	place-items: center;
	border-radius: 12px;
	border: 1px solid #d2e5f8;
	background: #eaf6fb;
	color: var(--iss-blue);
	font-family: inherit;
	font-size: 16px;
	font-weight: 950;
	letter-spacing: 0;
	margin-bottom: 15px;
}
.iss-page.iss-platform .iss-cap-grid .iss-cap h3 { font-size: 19px; color: var(--iss-navy-2); margin-bottom: 9px; }
.iss-page.iss-platform .iss-cap-grid .iss-cap p { min-height: 92px; margin-bottom: 14px; font-size: 14.5px; line-height: 1.52; }
.iss-page.iss-platform .iss-cap-grid .iss-cap .iss-proof-chips { display: grid; gap: 7px; margin-top: 0; }
.iss-page.iss-platform .iss-cap-grid .iss-cap .iss-proof-chips li { font-size: 13px; font-weight: 750; color: #44607c; }

/* Capability summary + Controlled Environments: solid navy, not gradients. */
.iss-page.iss-platform .iss-cap-closing {
	margin-top: 24px;
	padding: 17px 19px;
	border-radius: 14px;
	background: var(--iss-navy-2);
}
.iss-page.iss-platform .iss-cap-closing strong { font-size: 16px; }
.iss-page.iss-platform .iss-cap-closing p { font-size: 13px; line-height: 1.48; }
.iss-page.iss-platform .iss-plat-ctrl-band { grid-template-columns: 1.45fr .75fr; }
.iss-page.iss-platform .iss-plat-ctrl-main {
	padding: 18px;
	border: 1px solid #d8e3ec;
	border-radius: 16px;
	background: linear-gradient(180deg, #fff, #f7fafc);
	box-shadow: 0 9px 22px rgba(7, 26, 43, .04);
}
.iss-page.iss-platform .iss-plat-ctrl-grid { gap: 10px; }
.iss-page.iss-platform .iss-plat-ctrl {
	min-height: 116px;
	padding: 13px 14px;
	border-radius: 12px;
	border-color: #d8e3ec;
}
.iss-page.iss-platform .iss-plat-ctrl strong { font-size: 15px; color: var(--iss-navy-2); margin-bottom: 6px; }
.iss-page.iss-platform .iss-plat-ctrl p { font-size: 13px; line-height: 1.45; font-weight: 650; }
.iss-page.iss-platform .iss-plat-ctrl-env {
	padding: 19px 20px;
	border: 1px solid #0c3a55;
	border-radius: 16px;
	background: linear-gradient(145deg, var(--iss-navy-2), var(--iss-navy));
	box-shadow: 0 14px 30px rgba(7, 26, 43, .13);
	color: var(--iss-card);
}
.iss-page.iss-platform .iss-plat-ctrl-env .iss-kicker { color: var(--iss-sky); margin-bottom: 10px; }
.iss-page.iss-platform .iss-plat-ctrl-env strong { display: block; font-size: 19px; line-height: 1.22; color: var(--iss-card); margin-bottom: 8px; }
.iss-page.iss-platform .iss-plat-ctrl-env p { margin: 0; font-size: 14px; line-height: 1.55; font-weight: 700; color: #cbe0e9; }

/* ---- 27z-6. Real-Time QAD Integration ---------------------------------- */
.iss-page.iss-platform #qad-integration {
	padding: 96px 0;
	background:
		radial-gradient(circle at 82% 18%, rgba(57, 195, 230, .12), transparent 31%),
		linear-gradient(145deg, var(--iss-navy-2), var(--iss-navy) 62%, var(--iss-navy-3));
}
.iss-page.iss-platform .iss-plat-qad-examples {
	margin: 20px 0 0;
	padding: 13px 15px;
	border: 1px solid rgba(255, 255, 255, .08);
	border-left: 4px solid var(--iss-cyan);
	border-radius: 0 12px 12px 0;
	background: rgba(255, 255, 255, .055);
	font-size: 13px;
	line-height: 1.5;
	font-weight: 700;
	color: #cbe0e9;
}
.iss-page.iss-platform .iss-plat-qad-examples strong { display: block; margin-bottom: 4px; font-size: 14px; color: var(--iss-card); }
.iss-page.iss-platform .iss-plat-principle-grid strong { font-size: 15px; line-height: 1.3; margin-bottom: 4px; }
.iss-page.iss-platform .iss-plat-principle-grid span { font-size: 13px; font-weight: 720; line-height: 1.45; }
.iss-page.iss-platform #qad-integration .iss-hero-breadth,
.iss-page.iss-platform #iassist .iss-hero-breadth {
	padding: 24px;
	border-radius: 22px;
	border-color: rgba(255, 255, 255, .13);
	background: rgba(255, 255, 255, .055);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
	backdrop-filter: blur(8px);
}
.iss-page.iss-platform #qad-integration .iss-hero-breadth { padding: 25px; }
.iss-page.iss-platform #qad-integration .iss-hero-wf-kicker,
.iss-page.iss-platform #iassist .iss-hero-wf-kicker { font-size: 10px; font-weight: 950; letter-spacing: .11em; }
.iss-page.iss-platform .iss-hero-breadth-platform.is-qv-source,
.iss-page.iss-platform .iss-hero-breadth-platform.is-qv-dest {
	padding: 18px;
	border-radius: 15px;
	border-color: rgba(255, 255, 255, .12);
}
.iss-page.iss-platform .iss-hero-breadth-platform.is-qv-source { background: linear-gradient(90deg, rgba(12, 115, 201, .18), rgba(57, 195, 230, .08)); }
.iss-page.iss-platform .iss-hero-breadth-platform.is-qv-dest { background: linear-gradient(90deg, rgba(23, 168, 120, .11), rgba(57, 195, 230, .07)); }
.iss-page.iss-platform .iss-hero-breadth-platform.is-qv-source strong,
.iss-page.iss-platform .iss-hero-breadth-platform.is-qv-dest strong { display: block; font-size: 21px; }
.iss-page.iss-platform .iss-hero-breadth-platform.is-qv-source span,
.iss-page.iss-platform .iss-hero-breadth-platform.is-qv-dest span {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.45;
	color: #c8dfe9;
}
.iss-page.iss-platform #qad-integration .iss-plat-flow-engine {
	padding: 18px;
	border-radius: 16px;
	background: rgba(6, 26, 43, .74);
	border: 1px solid rgba(143, 226, 245, .26);
}
.iss-page.iss-platform .iss-plat-engine-pill {
	padding: 7px 9px;
	border-radius: 999px;
	background: rgba(57, 195, 230, .1);
	border: 1px solid rgba(57, 195, 230, .16);
	font-family: var(--iss-mono);
	font-size: 9.5px;
	font-weight: 950;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #b8e9f8;
	white-space: nowrap;
}
.iss-page.iss-platform #qad-integration .iss-plat-flow-engine-grid > div {
	padding: 11px 8px;
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .09);
}
.iss-page.iss-platform .iss-plat-proofline { margin-top: 27px; }

/* ---- 27z-7. Solutions Powered by iApprove ------------------------------ */
.iss-page.iss-platform #solutions { padding: 98px 0; background: linear-gradient(180deg, #f9fcfd, #edf5fa); }
.iss-page.iss-platform #solutions .iss-sec-head { margin-bottom: 34px; }
.iss-page.iss-platform .iss-plat-solutions-grid .iss-cap {
	min-height: 245px;
	padding: 20px 18px 18px;
	border: 1px solid #d5e1ec;
	border-radius: 16px;
	background: linear-gradient(180deg, #fff, #f9fcfd);
	box-shadow: 0 9px 22px rgba(7, 26, 43, .045);
}
.iss-page.iss-platform .iss-plat-solutions-grid .iss-cap::before { display: none; }
.iss-page.iss-platform .iss-plat-solutions-grid .iss-cap-tags { margin: 0 0 13px; }
.iss-page.iss-platform .iss-plat-solutions-grid .iss-cap-tags span {
	padding: 6px 8px;
	border-radius: 999px;
	background: #eaf6fb;
	color: var(--iss-blue);
	font-family: var(--iss-mono);
	font-size: 10px;
	font-weight: 950;
	letter-spacing: .07em;
	text-transform: uppercase;
}
.iss-page.iss-platform .iss-plat-solutions-grid .iss-cap h3 { font-size: 19px; color: var(--iss-navy-2); margin-bottom: 10px; }
.iss-page.iss-platform .iss-plat-solutions-grid .iss-cap p { margin-bottom: 17px; font-size: 13px; line-height: 1.48; }
.iss-page.iss-platform .iss-plat-solutions-grid .iss-inlink-muted { margin-top: auto; font-size: 12.5px; font-weight: 900; color: var(--iss-blue); }
/* The foundation band under the four cards is dark in the Clean HTML — it is
   the "one platform underneath" beat, not another light summary row. */
.iss-page.iss-platform .iss-plat-foot-band.is-foundation {
	margin-top: 18px;
	padding: 18px 20px;
	border: 0;
	background: linear-gradient(135deg, var(--iss-navy-2), var(--iss-navy-3));
	box-shadow: 0 14px 30px rgba(7, 26, 43, .15);
	color: var(--iss-card);
}
.iss-page.iss-platform .iss-plat-foot-band.is-foundation strong { font-size: 23px; color: var(--iss-card); }
.iss-page.iss-platform .iss-plat-foot-band.is-foundation span { display: block; margin-top: 3px; font-size: 13px; font-weight: 700; color: #cbe0e9; }
.iss-page.iss-platform .iss-plat-foot-band.is-foundation .iss-plat-foot-badge {
	padding: 8px 10px;
	background: rgba(57, 195, 230, .08);
	border: 1px solid rgba(143, 226, 245, .18);
	color: var(--iss-sky);
	font-size: 10px;
	font-weight: 950;
	letter-spacing: .08em;
}

/* ---- 27z-8. Built to Expand -------------------------------------------- */
.iss-page.iss-platform #expand { padding: 96px 0; background: var(--iss-card); }
.iss-page.iss-platform .iss-plat-expand-step { grid-template-columns: 42px 1fr auto; border-color: #d3e0ea; }
.iss-page.iss-platform .iss-plat-expand-step strong { font-size: 15px; }
.iss-page.iss-platform .iss-plat-expand-step span { font-size: 13px; font-weight: 720; line-height: 1.45; }
.iss-page.iss-platform .iss-plat-expand-step .iss-cap-num {
	width: 34px;
	height: 34px;
	border: 1px solid #d2e5f8;
	background: #eaf6fb;
	color: var(--iss-blue);
	font-family: inherit;
	font-size: 11px;
	font-weight: 950;
	letter-spacing: 0;
}
.iss-page.iss-platform .iss-plat-expand-step .iss-plat-badge-sm {
	padding: 6px 8px;
	font-size: 13px;
	font-weight: 720;
	letter-spacing: .07em;
	border: 1px solid #d5efe6;
	background: #edf8f4;
	color: #4d6b78;
}
.iss-page.iss-platform .iss-plat-flow-foot.is-expand-bottom {
	margin-top: 14px;
	padding: 14px 15px;
	border-radius: 13px;
	background: var(--iss-navy-2);
	color: var(--iss-card);
	font-size: 13px;
	font-weight: 700;
}
.iss-page.iss-platform .iss-plat-flow-foot.is-expand-bottom strong { display: block; font-size: 14px; color: var(--iss-card); }

/* ---- 27z-9. iAssist Intelligence Layer --------------------------------- */
.iss-page.iss-platform #iassist {
	padding: 98px 0;
	background:
		radial-gradient(circle at 15% 20%, rgba(57, 195, 230, .13), transparent 28%),
		radial-gradient(circle at 87% 85%, rgba(31, 139, 224, .13), transparent 30%),
		linear-gradient(145deg, var(--iss-navy-2), var(--iss-navy) 62%, var(--iss-navy-3));
}
.iss-page.iss-platform .iss-plat-rel-row {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 14px;
	align-items: center;
}
.iss-page.iss-platform .iss-plat-rel-row strong { margin-bottom: 0; }
.iss-page.iss-platform .iss-plat-rel-row span { font-size: 13px; line-height: 1.48; }
.iss-page.iss-platform .iss-plat-rel-row.is-featured {
	border-color: rgba(143, 226, 245, .28);
	background: linear-gradient(90deg, rgba(57, 195, 230, .11), rgba(31, 139, 224, .07));
}
.iss-page.iss-platform .iss-plat-ai-examples > div {
	padding: 11px 8px;
	border-radius: 11px;
	background: rgba(255, 255, 255, .045);
	border-color: rgba(255, 255, 255, .1);
}
.iss-page.iss-platform .iss-plat-ai-examples b { font-size: 14.5px; line-height: 1.25; }
.iss-page.iss-platform .iss-plat-principle-note {
	margin-top: 17px;
	padding: 14px 15px;
	border-radius: 13px;
	background: rgba(57, 195, 230, .08);
	border: 1px solid rgba(143, 226, 245, .18);
	color: #dbeaf6;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.48;
}

/* ---- 27z-10. Customer Proof -------------------------------------------- */
.iss-page.iss-platform #customer-proof { padding: 98px 0; background: linear-gradient(180deg, #f9fcfd, #edf5fa); }
.iss-page.iss-platform #customer-proof .iss-sec-head { margin-bottom: 32px; }
.iss-page.iss-platform .iss-plat-foot-band.is-proof-intro .iss-plat-foot-badge {
	border: 1px solid #d2e5f8;
	background: #eaf6fb;
	font-size: 13px;
	font-weight: 950;
	letter-spacing: .08em;
}
.iss-page.iss-platform .iss-plat-foot-band.is-proof-bottom {
	border: 0;
	background: var(--iss-navy-2);
	color: var(--iss-card);
}
.iss-page.iss-platform .iss-plat-foot-band.is-proof-bottom strong { color: var(--iss-card); }
.iss-page.iss-platform .iss-plat-foot-band.is-proof-bottom span { color: #cbe0e9; font-weight: 700; }
.iss-page.iss-platform .iss-hub-proof-card {
	min-height: 245px;
	padding: 22px 21px;
	border-radius: 18px;
	border-color: #d5e1ec;
	background: var(--iss-card);
	box-shadow: 0 12px 28px rgba(7, 26, 43, .055);
}
.iss-page.iss-platform .iss-hub-proof-card::before { width: 5px; }
/* Company name and process type read as two elements in the Clean HTML: a blue
   label on the left, a neutral pill on the right — not one middot-joined line. */
.iss-page.iss-platform .iss-plat-proof-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}
.iss-page.iss-platform .iss-plat-proof-company { font-size: 12px; font-weight: 950; letter-spacing: .075em; color: var(--iss-blue); }
.iss-page.iss-platform .iss-plat-proof-type {
	flex: 0 0 auto;
	padding: 6px 8px;
	border-radius: 999px;
	border: 1px solid #dae7f0;
	background: #f1f7fb;
	color: #61798b;
	font-size: 9.5px;
	font-weight: 950;
	letter-spacing: .07em;
	white-space: nowrap;
}
.iss-page.iss-platform .iss-hub-proof-customer { font-size: 19px; margin-bottom: 10px; color: var(--iss-navy-2); }
.iss-page.iss-platform .iss-hub-proof-title { margin-bottom: 18px; font-size: 13px; line-height: 1.48; }
.iss-page.iss-platform .iss-hub-proof-link { font-size: 12.5px; font-weight: 900; }

/* ---- 27z-11. Responsive ------------------------------------------------ */
@media (max-width: 1000px) {
	.iss-page.iss-platform .iss-plat-ctrl-band { grid-template-columns: 1fr; }
	.iss-page.iss-platform .iss-wf-grid::before { display: none; }
}
@media (max-width: 900px) {
	.iss-page.iss-platform .iss-plat-rel-row { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 700px) {
	.iss-page.iss-platform .iss-plat-ctrl { min-height: 0; }
	.iss-page.iss-platform .iss-hero-breadth-found { grid-template-columns: 1fr; }
	.iss-page.iss-platform .iss-hero-breadth-platform { align-items: flex-start; flex-direction: column; }
	.iss-page.iss-platform .iss-cap-grid .iss-cap p { min-height: 0; }
	.iss-page.iss-platform .iss-plat-expand-step { grid-template-columns: 38px 1fr; }
}

/* ---- 27z-12. Tick + grid gaps to match the Clean HTML ------------------ */
.iss-page.iss-platform .iss-cap-grid { gap: 18px; }
.iss-page.iss-platform .iss-plat-solutions-shell + .iss-note-callout { margin-top: 20px; }
/* Hero proof points: sky check on a cyan wash. */
.iss-page.iss-platform .iss-detail-hero .iss-proof-chips { gap: 9px; margin-top: 20px; }
.iss-page.iss-platform .iss-detail-hero .iss-proof-chips li { font-size: 13px; font-weight: 650; gap: 10px; }
.iss-page.iss-platform .iss-detail-hero .iss-tick {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(57, 195, 230, .16);
	color: var(--iss-sky);
}
.iss-page.iss-platform .iss-detail-hero .iss-tick svg { width: 11px; height: 11px; }
/* Capability bullets: green check on a pale green wash. */
.iss-page.iss-platform .iss-cap-grid .iss-tick {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #eaf7f3;
	color: var(--iss-green);
}
.iss-page.iss-platform .iss-cap-grid .iss-tick svg { width: 10px; height: 10px; }
.iss-page.iss-platform .iss-cap-grid .iss-cap .iss-proof-chips li { gap: 8px; align-items: flex-start; }

/* ---- 27z-13. Second parity pass (against the section screenshot pairs in
   docs/audit/2026-09-03_iapprove-platform-v18-visual-comparison/) ---------- */

/* Architecture-panel kickers carry no accent dash in the Clean HTML — only the
   section eyebrows do. */
.iss-page.iss-platform .iss-hero-breadth-top .iss-hero-wf-kicker::before { display: none; }

/* Hero grid proportions, and bands that keep their pill on the same row. */
.iss-page.iss-platform .iss-detail-hero .iss-hero-2col { grid-template-columns: .94fr 1.06fr; gap: 44px; }
.iss-page.iss-platform .iss-hero-breadth-platform { flex-wrap: nowrap; }
.iss-page.iss-platform .iss-hero-breadth-platform > div { min-width: 0; }

/* Section callouts stack strong-over-copy; the shared component splits them
   into two flex columns. */
.iss-page.iss-platform .iss-note-callout { display: block; }
.iss-page.iss-platform .iss-note-callout > div { flex: none; }

/* Two-column copy columns: keep the Clean HTML's kicker → h2 → body rhythm. */
.iss-page.iss-platform .iss-plat-what-grid > div > .iss-kicker { display: inline-flex; margin-bottom: 11px; }
.iss-page.iss-platform .iss-plat-what-grid > div > h2 { margin-bottom: 16px; }

/* Flow card + arrows. */
.iss-page.iss-platform .iss-plat-flow { background: linear-gradient(180deg, #fff, #f7fbfd); }
.iss-page.iss-platform .iss-plat-flow-arrow { font-size: 22px; font-weight: 950; color: var(--iss-blue); margin: 8px 0; }
.iss-page.iss-platform #what-is-iapprove .iss-plat-flow-arrow { font-size: 25px; }

/* Supporting copy on dark surfaces reads as light blue-grey, not green. */
.iss-page.iss-platform .iss-plat-principle-grid span { color: #c9dde3; }
.iss-page.iss-platform .iss-plat-ai-examples > div b { color: var(--iss-card); }
.iss-page.iss-platform .iss-plat-ai-examples > div span { color: #c6dee5; }

/* Snapshot body copy is muted running text, not bold ink. */
.iss-page.iss-platform .iss-hub-proof-title { font-weight: 400; color: #5d788f; }

/* Sections that carry their own background need to reach the viewport edges —
   The7 caps our column at 1300px (see the full-bleed note in §3). */
.iss-page.iss-platform #how-it-works,
.iss-page.iss-platform #solutions,
.iss-page.iss-platform #customer-proof {
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
}

/* ---- 27z-14. Mobile — the desktop hero-grid/band overrides above are more
   specific than the shared 940px collapse, so restate the collapse here. */
@media (max-width: 940px) {
	.iss-page.iss-platform .iss-detail-hero .iss-hero-2col { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 640px) {
	.iss-page.iss-platform .iss-hero-breadth-platform { flex-wrap: wrap; }
	.iss-page.iss-platform .iss-hero-breadth-areas.iss-cols-2 { grid-template-columns: 1fr; }
	.iss-page.iss-platform .iss-plat-solutions-grid { grid-template-columns: 1fr; }
}

/* ---- 27z-15. Section eyebrow accent dash --------------------------------
   The site default paints the dash --iss-red at 18px (§5). Every ISS Clean
   HTML draws it in the eyebrow's OWN colour at 24px — blue beside blue text
   on light sections, sky beside sky text on dark — and the Clean HTML is the
   source of truth. Confirmed with Danny 2026-09-03 after a red dash shipped
   next to blue "CUSTOMER PROOF" text here.

   The hero already took currentColor (§7a); this extends it to the rest of
   the page, including "Controlled Environments", whose sky label was pairing
   with a red dash on a dark card. */
.iss-page.iss-platform .iss-kicker::before,
.iss-page.iss-platform .iss-eyebrow::before {
	width: 24px;
	background: currentColor;
}


/* ---- 27z-17. V26 Clean HTML parity -------------------------------------
   Four new/changed compositions, all page-scoped to `.iss-platform`, all
   measured off ISSG_iApprove_Platform_Developer_Handoff_V26's own Clean HTML
   rather than approximated from its Developer Notes.

   The Executive Visibility rail is the one worth reading twice. It already
   exists on the homepage as `.iss-front-page .iss-exec-rail` (front-page.css,
   V58) and V26 says outright that it reuses that treatment — but V26's own
   Change Summary Q3 is equally explicit that "this implementation alone does
   not make Executive Visibility a required shared component", so it is
   restated here rather than promoted out of `.iss-front-page`. Two page-scoped
   copies of one rail is the smaller divergence: promoting it would change a
   shared component on the strength of a package that says not to. If a third
   page asks for it, promote it then and delete both copies. */

/* 17a. Hero architecture card — the "representative applications" scope note.
   Sits inside the dark hero card under the four Workflow Area tiles, so it is
   sky on navy, not muted on white. */
.iss-page.iss-platform .iss-plat-arch-scope {
	margin: 10px 0 0;
	text-align: center;
	color: var(--iss-sky);
	font-size: 11px;
	line-height: 1.4;
	font-weight: 800;
}

/* 17b. Executive Visibility rail — an executive OUTCOME of the six
   disciplines, not a seventh one, which is why it is a rail under the grid
   rather than a card in it, and why it carries no number. */
.iss-page.iss-platform .iss-plat-exec-rail {
	margin-top: 20px;
	display: grid;
	grid-template-columns: 170px minmax(290px, 1fr) minmax(360px, auto);
	align-items: center;
	gap: 18px;
	padding: 16px 18px 16px 20px;
	border: 1px solid var(--iss-line);
	border-left: 4px solid var(--iss-blue);
	border-radius: 0 14px 14px 0;
	background: linear-gradient(90deg, color-mix(in srgb, var(--iss-bg-tint) 74%, var(--iss-card)), var(--iss-card));
	box-shadow: 0 9px 22px rgba(7, 26, 43, .045);
}
/* `--iss-blue-dark`, not the mockup's `--iss-blue`, and this is the V58
   treatment the package tells us to reuse rather than a site default: the
   homepage's own `.iss-exec-label` already carries `--iss-blue-dark` for this
   same label, decided on 2026-09-12 when V58 shipped 4.43:1 on this component.
   Measured here: #0c73c9 on the rail's tinted end is 4.532:1 against a 4.5
   floor (11px at 950 is not "large text"), #0a5fa6 is 6.105:1. Visually
   indistinguishable, and it stops the two rails disagreeing. */
.iss-page.iss-platform .iss-plat-exec-label {
	font-family: var(--iss-mono);
	color: var(--iss-blue-dark);
	font-size: 11px;
	line-height: 1.3;
	font-weight: 950;
	letter-spacing: .085em;
	text-transform: uppercase;
}
.iss-page.iss-platform .iss-plat-exec-copy {
	margin: 0;
	color: var(--iss-ink);
	font-size: 14px;
	line-height: 1.5;
	font-weight: 700;
}
/* A <ul> where the mockup uses bare spans — the pills are a list of metrics
   and read as one to a screen reader. The reset is what keeps them looking
   like the mockup's spans. */
.iss-page.iss-platform .iss-plat-exec-chips {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}
.iss-page.iss-platform .iss-plat-exec-chips li {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 31px;
	padding: 6px 9px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--iss-line-strong) 76%, var(--iss-blue));
	background: color-mix(in srgb, var(--iss-card) 82%, var(--iss-bg-tint));
	color: color-mix(in srgb, var(--iss-navy-2) 78%, var(--iss-blue));
	font-size: 10.5px;
	line-height: 1.2;
	font-weight: 850;
	white-space: nowrap;
}

/* 17c. Real-Time QAD Integration — the examples block gained a second
   label/copy pair ("Broader integration:") under a hairline. The block is a
   <div> now rather than a <p>, so its runs need to be blocks themselves. */
.iss-page.iss-platform .iss-plat-qad-examples > span { display: block; }
.iss-page.iss-platform .iss-plat-qad-subhead {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, .12);
}
/* The engine is five cells now, not four: V22 splits "Route/Apply rules" and
   adds "Govern". Scoped to #qad-integration so the What-Is-iApprove flow card,
   which shares `.iss-plat-flow-engine-grid`, keeps its four. */
.iss-page.iss-platform #qad-integration .iss-plat-flow-engine-grid { grid-template-columns: repeat(5, 1fr); }
.iss-page.iss-platform .iss-hero-breadth-platform.is-qv-source span,
.iss-page.iss-platform .iss-hero-breadth-platform.is-qv-dest span {
	margin-top: 5px;
	font-size: 13px;
	line-height: 1.5;
}
/* The engine head's title is a sentence now ("iApprove™ Uses the Data to Drive
   the Workflow"), not a word, so it wraps rather than sitting at 23px. */
.iss-page.iss-platform #qad-integration .iss-plat-flow-engine-head strong { font-size: 21px; line-height: 1.2; }

/* 17d. Representative Workflow Areas — the enterprise-breadth panel that
   replaces V17's one-line closing callout. `.iss-note-callout` is a flex row
   by default (§21); this one is a stack. */
.iss-page.iss-platform .iss-plat-breadth { display: block; }
.iss-page.iss-platform .iss-plat-breadth-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 22px;
	margin-bottom: 16px;
}
.iss-page.iss-platform .iss-plat-breadth-head strong {
	display: block;
	font-size: 18px;
	font-weight: 900;
	line-height: 1.25;
	color: var(--iss-navy-2);
}
.iss-page.iss-platform .iss-plat-breadth-head span {
	max-width: 520px;
	color: var(--iss-muted);
	font-size: 13.5px;
	line-height: 1.5;
	font-weight: 700;
}
.iss-page.iss-platform .iss-plat-breadth-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
}
.iss-page.iss-platform .iss-plat-breadth-item {
	min-height: 132px;
	border: 1px solid var(--iss-line);
	border-radius: 12px;
	background: var(--iss-card);
	padding: 13px 14px;
}
.iss-page.iss-platform .iss-plat-breadth-item strong {
	display: block;
	color: var(--iss-navy-2);
	font-size: 14.5px;
	font-weight: 900;
	line-height: 1.25;
	margin-bottom: 6px;
}
.iss-page.iss-platform .iss-plat-breadth-item span {
	display: block;
	color: var(--iss-muted);
	font-size: 12.75px;
	line-height: 1.45;
	font-weight: 650;
}
.iss-page.iss-platform .iss-plat-breadth-close {
	margin-top: 14px;
	border-radius: 11px;
	background: var(--iss-navy-2);
	padding: 12px 15px;
	text-align: center;
}
.iss-page.iss-platform .iss-plat-breadth-close strong {
	display: inline;
	color: var(--iss-card);
	font-size: 13.5px;
	font-weight: 900;
	line-height: 1.45;
}

/* 17e. Built to Expand — "Illustrative only" note under the path title. V25
   exists to stop this panel reading as a prescribed adoption sequence, so the
   note is load-bearing copy, not decoration. */
.iss-page.iss-platform .iss-plat-expand-note {
	margin: -5px 0 14px;
	color: var(--iss-muted);
	font-size: 12.5px;
	line-height: 1.45;
	font-weight: 700;
}

/* 17f. Responsive. The rail and the breadth grid reflow on their own
   breakpoints, which are the mockup's. */
@media (max-width: 1120px) {
	.iss-page.iss-platform .iss-plat-exec-rail { grid-template-columns: 150px 1fr; }
	.iss-page.iss-platform .iss-plat-exec-chips { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 1100px) {
	.iss-page.iss-platform .iss-plat-breadth-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
	.iss-page.iss-platform .iss-plat-breadth-head { flex-direction: column; gap: 8px; }
	.iss-page.iss-platform .iss-plat-breadth-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
	.iss-page.iss-platform .iss-plat-exec-rail {
		grid-template-columns: 1fr;
		gap: 10px;
		padding: 16px 15px 16px 17px;
	}
	.iss-page.iss-platform .iss-plat-exec-chips { grid-column: auto; justify-content: flex-start; }
}
@media (max-width: 650px) {
	/* §27z-11's 2-column fallback leaves the 5th cell alone on its row. */
	.iss-page.iss-platform #qad-integration .iss-plat-flow-engine-grid { grid-template-columns: repeat(2, 1fr); }
	.iss-page.iss-platform #qad-integration .iss-plat-flow-engine-grid > div:last-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.iss-page.iss-platform .iss-plat-breadth-grid { grid-template-columns: 1fr; }
	.iss-page.iss-platform .iss-plat-breadth-item { min-height: 0; }
}
@media (max-width: 480px) {
	.iss-page.iss-platform .iss-plat-exec-chips {
		display: grid;
		grid-template-columns: 1fr 1fr;
		width: 100%;
	}
	.iss-page.iss-platform .iss-plat-exec-chips li { white-space: normal; text-align: center; }
	.iss-page.iss-platform .iss-plat-exec-chips li:last-child { grid-column: 1 / -1; }
}

/* ============================================================
   28. iApprove™ Purchasing (/solutions/purchasing/) — V27 parity
   ============================================================
   Page-scoped via `.iss-solution-purchasing` (single-solution.php adds
   `iss-solution-<slug>` to the page wrapper). Danny chose page-scoped over
   shared on 2026-09-06: five pages run on this template, the V27 package
   covers one of them, and Supplier Lifecycle / Invoice & AP / Business
   Process Workflows should not change until their own packages land.
   ============================================================ */

/*
 * 28a. "Live in QAD" — MOVED. This page's tile was the first build of what is
 * now the site-wide `.iss-live-tile` rule (§7f), driven by `iss_live_badge()`
 * in inc/template-helpers.php. Danny generalised it on 2026-09-06 so Supplier
 * Lifecycle, Invoice & AP and Business Process Workflows get the same stamp.
 * Nothing page-scoped is left here; §28 keeps its remaining V27 fixes below.
 */

/*
 * 28b. An in-page jump button's arrow points DOWN, so its hover nudge follows
 * it down. §4's `.iss-btn:hover .iss-arw` translates X, which is right for the
 * rightward arrow every other button on the site uses and wrong for this one.
 * Not page-scoped: the rule only bites on `.iss-arw-down`, which
 * single-solution.php emits only for an anchor-target CTA.
 */
.iss-page .iss-btn:hover .iss-arw-down { transform: translateY(3px); }

/* ---- 27z-16. Business Process Workflows — V44 Clean HTML parity ---------
 *
 * Residual drift found by the 2026-09-06 screenshot/computed-style pass
 * against Business_Process_Workflows_Clean_HTML.html. Evidence and the full
 * list (including what still needs template/ACF work) is in
 * docs/audit/2026-09-06_bpw-v44-parity/FINDINGS.md.
 *
 * Selectors here are keyed on markup only this page emits (`opmp_*` drives
 * #platform, `area_*` the explorer, `next_*` the signal grid), so nothing
 * below reaches the other three Solution pages — EXCEPT 16a, which is a
 * genuine cross-page bug and is fixed for every page that shows a stat.
 */

/* 16a. The +/~ glyph must stay on the number's own line.
 *
 * iss_metric_number_html() wraps a leading `~`/`$` or a trailing `+`/`%` in a
 * `.iss-u` span so it can be tinted. Two stat containers style their label
 * with a bare descendant/child `span` selector, which also caught `.iss-u`
 * and set it `display:block` at 11.5-12px — so "40,000+" rendered as "40,000"
 * with a small blue "+" on the line below, and "~900" split into "~" over
 * "900".
 *
 * Targets every span inside `.iss-mnum`, not just `.iss-u`: once the counter
 * in js/iss-interactions.js has run it wraps the digits in a span of their
 * own (`<span class="iss-u">~</span><span>900</span>`), so a rule keyed only
 * on `.iss-u` fixes the glyph and leaves the digits dropped to a second line.
 * `.iss-mnum` holds nothing but those two, and the label spans outside it
 * keep their block treatment.
 */
.iss-page .iss-proof-extra-metric .iss-mnum span,
.iss-page .iss-snap-teaser-stat .iss-mnum span {
	display: inline;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	margin-top: 0;
}

/* 16b. #platform keeps its full top padding.
 *
 * Every other section on this page resolves to 88px; #platform was landing on
 * 0 because it is the FIRST `.iss-tight` on the page, which §3's pair guard
 * deliberately does not restore. The guard is right in general — but the
 * thing directly above this section is the hero's docked section nav, which
 * consumes the hero's own bottom padding, so there is nothing left for
 * #platform to sit flush against. This is exactly the seam CLAUDE.md's
 * `.iss-tight` note describes ("a hero whose last child is a nav bar or a
 * pill row eats its own bottom padding").
 */
.iss-page .iss-section.iss-tight#platform { padding-top: clamp(48px, 7vw, 88px); }

/* 16c. "Human-Directed." is cyan in the Clean HTML, not white.
 * iss_split_accent_sentence() already emits the span; it just had no colour
 * of its own on the dark iAssist band.
 */
.iss-page .iss-ai-callout .iss-ai-callout-accent { color: var(--iss-sky); }

/* 16d. Business Area Explorer cards.
 *
 * The Clean HTML sets the area tag as a pill on the H3's own row (staging had
 * it as a blue caps line underneath), gives every use-case row a tinted card
 * rather than plain text, and puts the proof label and its links on one row —
 * label left, links right.
 */
.iss-page .iss-area-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}
.iss-page .iss-area-top h3 { margin-bottom: 0; }
.iss-page .iss-area-subtitle {
	flex: 0 0 auto;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--iss-bg-tint);
	border: 1px solid var(--iss-line);
	font-size: 10px;
	letter-spacing: .06em;
	color: var(--iss-muted-2);
	text-transform: uppercase;
}
.iss-page .iss-area-uc li {
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--iss-bg-tint);
	border: 1px solid var(--iss-line);
}
/*
 * Proof row: links right-aligned, label above them.
 *
 * The Clean HTML puts the label and the links on ONE row, label left, links
 * right. Measured against the real card width that only holds for the
 * one-link cards, and only down to ~1200px: at 1512/1280 Finance's
 * "MTF Biologics → | TrellisWare →" overruns its 315px box by 20px, and at
 * 1024 five of the six cards overrun (Finance by 98px). Wrapping a flex row
 * strands the "|" separator at the end of the first line, because the label,
 * each link and each separator are separate flex items and there is no
 * wrapper element around the link group to keep them together — adding one
 * means single-solution.php, which was locked for this pass.
 *
 * So the label keeps its own line at every width and the links right-align
 * under it: one small, uniform divergence from the mockup's single row,
 * chosen over a layout that orphans a separator on two cards at desktop and
 * on five at 1024, and that would break again whenever ISS edits a customer
 * name. Revisit with a `.iss-area-proof-links` wrapper when the template is
 * free — then the single row can come back and wrap as a unit.
 */
.iss-page .iss-area-proof {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
}
.iss-page .iss-area-proof-label { flex: 1 0 100%; margin-bottom: 2px; }
.iss-page .iss-area-proof .iss-inlink:first-of-type { margin-left: auto; }

/* 16e. Find Your Next Workflow.
 *
 * The recognition block is one tinted card in the Clean HTML — kicker, quote
 * and note inside a single surface — not a loose kicker over an italic
 * left-ruled blockquote over loose copy. Each signal card carries a short
 * accent bar at its top-left, and the closing rail's tick sits in its own
 * rounded tile with the badge outlined rather than filled.
 */
.iss-page .iss-next-recognition {
	padding: 22px 24px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .12);
}
.iss-page .iss-next-recognition blockquote {
	margin: 10px 0 10px;
	padding: 0;
	border-left: 0;
	border-radius: 0;
	background: none;
	font-style: normal;
	font-weight: 700;
}
.iss-page .iss-next-signal { position: relative; }
.iss-page .iss-next-signal::before {
	content: "";
	position: absolute;
	top: 18px;
	left: 0;
	width: 3px;
	height: 16px;
	border-radius: 0 3px 3px 0;
	background: var(--iss-cyan);
}
.iss-page .iss-next-callout .iss-tick {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: rgba(57, 195, 230, .16);
	color: var(--iss-sky);
}
.iss-page .iss-next-callout .iss-tick svg { width: 15px; height: 15px; }
.iss-page .iss-next-closing > div > p { margin-left: 44px; }
.iss-page .iss-next-badge {
	background: rgba(57, 195, 230, .12);
	border: 1px solid rgba(57, 195, 230, .45);
	color: var(--iss-sky);
}

/* 16f. `.iss-note-callout` has to stack on a phone.
 *
 * The callout is a flex row — copy on the left, a CTA button on the right —
 * with `> div { flex: 1 }` and `.iss-btn { flex: 0 0 auto }` and no
 * breakpoint. The button's label does not wrap, so on a 390px screen the copy
 * column is squeezed to roughly one word per line ("The / business / area / is
 * / not / the / limitation.") and the button still overhangs the card's right
 * edge. Found on Business Process Workflows' "Where to look next" and
 * "What this really proves" callouts, but it is not a BPW bug: the same shape
 * is used on the How It Works, Shift and Customer Proof sections and on other
 * Solution pages. `.iss-platform` already carries its own `display: block`
 * copy of this fix, which is what the page-scoped version of it looks like.
 *
 * Not page-scoped, deliberately — a stacked callout is right on every page
 * that has one, and the desktop row is untouched.
 */
@media (max-width: 700px) {
	.iss-page .iss-note-callout {
		display: block;
	}
	.iss-page .iss-note-callout > div { flex: none; }
	.iss-page .iss-note-callout .iss-btn { margin-top: 16px; }
}

/* ============================================================
   29. Supplier Lifecycle Management (/solutions/supplier-lifecycle-management/)
       — V15 Clean HTML parity
   ============================================================
   Page-scoped via `.iss-solution-supplier-lifecycle-management`. Danny
   reported on 2026-09-13 that the live page "doesn't match the provided
   html file" — the V15 Clean HTML in
   docs/handoffs/03_MP_REVIEW/Supplier_Lifecycle_Management_Developer_Handoff_V15/.
   Evidence is the screenshot pair set in
   docs/audit/2026-09-13_supplier-lifecycle-visual-comparison/.

   Everything below is keyed on this page's own wrapper class, so Purchasing,
   Invoice & AP, Enterprise Workflow Automation and Business Process Workflows
   are untouched. Where a fix is ALSO right for Purchasing (its V29 Clean HTML
   asks for the same thing) that is called out on the rule, so whoever is next
   in that page's section can promote it rather than rediscover it. It is
   page-scoped today only because `single-solution.php` and the V29 field group
   were both under an active agent lock while this was written.

   TWO THINGS DELIBERATELY NOT CHANGED, so they are not "kept silently" (the
   Clean-HTML-beats-site-defaults rule):
     - The 3px blue-to-cyan accent rail on `.iss-cap` and `.iss-cap-visual`.
       The V15 mockup's cards have no rail, but every capability card and
       illustrative panel on all five Solution pages carries one; it is card
       identity, not a per-page colour, and dropping it here alone would make
       this page the odd one out.
     - The closing CTA band's mono uppercase strap line and its blue-to-cyan
       gradient. §15c made that band site-wide on 2026-09-04, which outranks
       one package's own rendering of it.
   ============================================================ */

/*
 * 29a. The H1 breaks after its first sentence, and the first sentence's tail
 * is sky.
 *
 * V15 sets it `Simplify <span class="accent">Supplier Onboarding.</span><br/>
 * Control Every Supplier Change.` — two claims, one per line, the first one
 * ending in the page's subject. Live shipped it as one unbroken run of white,
 * which at 1512px wraps mid-sentence ("Simplify Supplier / Onboarding. Control
 * / Every Supplier Change.") and reads as one long sentence.
 *
 * The colour half needs no CSS: `hero_headline_accent` is an existing field
 * and §(hero) already paints `.iss-grad` inside `.iss-detail-hero` flat
 * `--iss-sky`, which is exactly the mockup's `.hero h1 .accent`. The
 * migration sets the field; see iss-migrations/supplier-lifecycle-management-
 * v15-hero-and-icons.php.
 *
 * The BREAK is here rather than in the field because `iss_accent_headline()`
 * escapes the headline — a literal `<br>` typed into an ACF text field would
 * print as text — and single-solution.php was locked by another session. A
 * forced newline on the accent span's own `::after` gets the same two lines
 * out of the same escaped string, and the space that follows the span is
 * dropped by normal white-space processing because it lands at the start of a
 * line. If the template later grows a real line-break affordance, delete this
 * rule rather than keeping both.
 */
.iss-page.iss-solution-supplier-lifecycle-management .iss-detail-hero h1 .iss-grad::after {
	content: "\A";
	white-space: pre;
}

/*
 * 29b. The Shift band is LIGHT on this page, and both of its cards are white.
 *
 * §25c's `.iss-shift-band` is a full-bleed dark navy comparison band with a
 * glass "before" panel and a blue-gradient "after" panel. That is Invoice &
 * AP's `.ap-shift`, correctly — but Supplier Lifecycle V15 draws `.shift` as
 * `background: var(--iss-bg)` with two plain white `.shift-card`s, and so does
 * Purchasing V29. Danny called this one out by name: "the image 2 is what is
 * expected but the page implemented has a blue background and the cards dont
 * have the same formatting."
 *
 * The band keeps its full-bleed geometry — V15's `.shift` background spans the
 * viewport too — and loses the gradient, the radial decorations, the corner
 * circle, the card rails and the row dividers.
 *
 * PURCHASING TOO, added 2026-09-13 by the session building V29's own gaps
 * (§30), taking this rule up on the "ALSO RIGHT FOR PURCHASING" note it was
 * written with rather than pasting a second copy of it under a second page
 * class. Danny reported the same thing on that page independently, in the
 * same words: the Shift section "is completely wrong" against its Clean HTML.
 *
 * The two pages want byte-identical treatment because their packages draw the
 * same component — V15 and V29 both say `.shift{background:var(--iss-bg)}`
 * over two `.shift-card`s. **This is now two of the five pages on this
 * template, so the next package that asks for a light Shift band should
 * promote this to §25c and give the dark band to the pages that still want
 * it, instead of adding a third page class here.** Invoice & AP is the one
 * whose own mockup genuinely draws it dark (`.ap-shift`).
 */
.iss-page.iss-solution-supplier-lifecycle-management .iss-shift-band,
.iss-page.iss-solution-purchasing .iss-shift-band {
	color: var(--iss-ink);
	background: var(--iss-bg);
}
.iss-page.iss-solution-supplier-lifecycle-management .iss-shift-band::after,
.iss-page.iss-solution-purchasing .iss-shift-band::after { content: none; }
.iss-page.iss-solution-supplier-lifecycle-management .iss-shift-band .iss-sec-head h2,
.iss-page.iss-solution-purchasing .iss-shift-band .iss-sec-head h2 { color: var(--iss-ink); }
.iss-page.iss-solution-supplier-lifecycle-management .iss-shift-band .iss-sec-head p,
.iss-page.iss-solution-purchasing .iss-shift-band .iss-sec-head p { color: var(--iss-muted); }
.iss-page.iss-solution-supplier-lifecycle-management .iss-shift-band .iss-kicker,
.iss-page.iss-solution-purchasing .iss-shift-band .iss-kicker { color: var(--iss-blue); }

.iss-page.iss-solution-supplier-lifecycle-management .iss-shift-band .iss-split,
.iss-page.iss-solution-purchasing .iss-shift-band .iss-split { gap: 24px; }
.iss-page.iss-solution-supplier-lifecycle-management .iss-shift-band .iss-pcard,
.iss-page.iss-solution-purchasing .iss-shift-band .iss-pcard,
.iss-page.iss-solution-supplier-lifecycle-management .iss-shift-band .iss-pcard.iss-bad,
.iss-page.iss-solution-purchasing .iss-shift-band .iss-pcard.iss-bad,
.iss-page.iss-solution-supplier-lifecycle-management .iss-shift-band .iss-pcard.iss-good,
.iss-page.iss-solution-purchasing .iss-shift-band .iss-pcard.iss-good {
	padding: 31px;
	border-radius: 18px;
	background: var(--iss-card);
	border: 1px solid var(--iss-line);
	box-shadow: none;
	color: var(--iss-ink);
}
/* V15 tints only the "after" card's border: `.shift-card.good{border-color:#cfe8e0}`. */
.iss-page.iss-solution-supplier-lifecycle-management .iss-shift-band .iss-pcard.iss-good,
.iss-page.iss-solution-purchasing .iss-shift-band .iss-pcard.iss-good { border-color: #cfe8e0; }
/* The left rail (§25c) and the blue glow (§9) both belong to the dark band. */
.iss-page.iss-solution-supplier-lifecycle-management .iss-shift-band .iss-pcard::before,
.iss-page.iss-solution-purchasing .iss-shift-band .iss-pcard::before,
.iss-page.iss-solution-supplier-lifecycle-management .iss-shift-band .iss-pcard.iss-good::after,
.iss-page.iss-solution-purchasing .iss-shift-band .iss-pcard.iss-good::after { content: none; }

/* `.card-label` — grey on the "before" card, green on the "after" one. */
.iss-page.iss-solution-supplier-lifecycle-management .iss-shift-band .iss-pcard-label,
.iss-page.iss-solution-purchasing .iss-shift-band .iss-pcard-label {
	margin-bottom: 11px;
	/* §25c puts this on the mono stack, where a small caption reads as a system
	   label on a dark band. Both packages' `.card-label` inherit the sheet's
	   sans and are just a heavy uppercase line above the card's heading. */
	font-family: var(--iss-sans);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .1em;
	color: #778b9b;
}
.iss-page.iss-solution-supplier-lifecycle-management .iss-shift-band .iss-good .iss-pcard-label,
.iss-page.iss-solution-purchasing .iss-shift-band .iss-good .iss-pcard-label { color: var(--iss-green); }

/* V15's `.shift-card h3` is the sheet's own 19px h3, not the dark band's 28px. */
.iss-page.iss-solution-supplier-lifecycle-management .iss-shift-band .iss-pcard h3,
.iss-page.iss-solution-purchasing .iss-shift-band .iss-pcard h3 {
	margin-bottom: 0;
	font-size: 19px;
	line-height: 1.22;
	letter-spacing: -.02em;
	color: var(--iss-ink);
	max-width: 34ch;
}

/* `.clean-list` — 14px gaps, no rules between rows, 15px copy in ink. */
.iss-page.iss-solution-supplier-lifecycle-management .iss-shift-band .iss-flist,
.iss-page.iss-solution-purchasing .iss-shift-band .iss-flist {
	gap: 14px;
	margin-top: 24px;
}
.iss-page.iss-solution-supplier-lifecycle-management .iss-shift-band .iss-flist li,
.iss-page.iss-solution-purchasing .iss-shift-band .iss-flist li,
.iss-page.iss-solution-supplier-lifecycle-management .iss-shift-band .iss-bad .iss-flist li,
.iss-page.iss-solution-purchasing .iss-shift-band .iss-bad .iss-flist li,
.iss-page.iss-solution-supplier-lifecycle-management .iss-shift-band .iss-good .iss-flist li,
.iss-page.iss-solution-purchasing .iss-shift-band .iss-good .iss-flist li {
	padding: 0;
	border-top: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--iss-ink);
}

/*
 * `.bad-dot` / `.good-dot` — 22px tinted CIRCLES. §25c turned these into
 * numbered mono squares for the dark band; V15 wants the pale-rose × and the
 * pale-mint ✓ of the light one. The glyphs stay this site's SVG check/x
 * rather than the mockup's literal × and ✓ characters, per CLAUDE.md's
 * mockup-fidelity note on the icon set.
 */
.iss-page.iss-solution-supplier-lifecycle-management .iss-shift-band .iss-mk,
.iss-page.iss-solution-purchasing .iss-shift-band .iss-mk {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	margin-top: 1px;
	font-family: inherit;
	box-shadow: none;
}
.iss-page.iss-solution-supplier-lifecycle-management .iss-shift-band .iss-mk svg,
.iss-page.iss-solution-purchasing .iss-shift-band .iss-mk svg { width: 11px; height: 11px; }
.iss-page.iss-solution-supplier-lifecycle-management .iss-shift-band .iss-bad .iss-mk,
.iss-page.iss-solution-purchasing .iss-shift-band .iss-bad .iss-mk { background: #f5ecee; color: #b35768; }
.iss-page.iss-solution-supplier-lifecycle-management .iss-shift-band .iss-good .iss-mk,
.iss-page.iss-solution-purchasing .iss-shift-band .iss-good .iss-mk { background: #e6f7f1; color: var(--iss-green); }

/*
 * 29c. A capability card leads with its NUMBER in a tinted square, and its
 * top-right slot is an arrow — not an icon.
 *
 * V15: `<div class="cap-icon">01</div>` (42px, `#eaf6fd`, blue, 900) plus
 * `<span class="cap-link">→</span>`. The template draws the number as a bare
 * 10px mono label and fills the right-hand slot from `$cap_icons[$i % 6]` —
 * an icon chosen by POSITION, with nothing to do with the card. That is why
 * "Fraud & Compliance Controls" had a phone on it and "Supplier Information"
 * a heart-rate line. Danny: "Icons in the pages do not match."
 *
 * The arrow replaces the glyph inside the existing `aria-hidden` span rather
 * than being new markup, so nothing changes for a screen reader — the card is
 * a link and already announces itself as one.
 *
 * ALSO RIGHT FOR PURCHASING: V29's `.cap-top-standard` is `01 · Core` plus the
 * same `<span class="cap-link">→</span>`. Only the number-square half is
 * specific to this page (it is what `cap_card_lead = title` selects).
 */
.iss-page.iss-solution-supplier-lifecycle-management .iss-cap-grid .iss-cap-top {
	align-items: flex-start;
	margin-bottom: 25px;
}
.iss-page.iss-solution-supplier-lifecycle-management .iss-cap-grid .iss-cap-num {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border-radius: 12px;
	background: #eaf6fd;
	color: var(--iss-blue);
	font-family: var(--iss-sans);
	font-size: 14px;
	font-weight: 900;
	letter-spacing: .02em;
}
.iss-page.iss-solution-supplier-lifecycle-management .iss-cap-grid .iss-cap-top .iss-ci {
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	color: var(--iss-blue);
	font-size: 17px;
	font-weight: 900;
	line-height: 1;
}
.iss-page.iss-solution-supplier-lifecycle-management .iss-cap-grid .iss-cap-top .iss-ci svg { display: none; }
.iss-page.iss-solution-supplier-lifecycle-management .iss-cap-grid .iss-cap-top .iss-ci::before { content: "\2192"; }

/*
 * `.feature-tag` — "Anchor Capability" is a rounded blue pill in V15, not a
 * mono caption under a hairline rule.
 */
.iss-page.iss-solution-supplier-lifecycle-management .iss-cap-grid .iss-cap-emphasis {
	align-self: flex-start;
	margin-top: 15px;
	padding: 6px 9px;
	border-top: 0;
	border-radius: 999px;
	background: #e8f5fd;
	font-size: 10px;
	letter-spacing: .08em;
}

/*
 * 29d. The platform bridge's four feature panels carry NO icon — RESOLVED IN
 * THE TEMPLATE, 2026-09-13, so there is nothing page-scoped left here.
 *
 * This used to `display: none` the icon and zero the card's min-height for this
 * page. Both are now general: `single-solution.php` renders the slot only when
 * a card names its own icon, and the min-height rule above keys on the icon's
 * absence. Purchasing V29 asks for the same thing and Invoice & AP V11 asks for
 * the opposite (a character mark it seeds), which is what turned a page-scoped
 * hide into a field.
 *
 * Left as a note rather than deleted: the numbering is referenced from §29c and
 * from supplier-lifecycle-management.spec.js.
 */

/*
 * 29e. The illustrative panel's LABEL is uppercase and its title is not.
 *
 * V15 (and V29) set `.mock-title` in sentence case at 12px/#63798a, and
 * `.field label` uppercase at 9-10px — the panel's own toolbar names the
 * screen, the fields name themselves. The shared component had both the other
 * way round, so every capability read "NEW SUPPLIER REQUEST" over "Supplier
 * Name" where the mockup reads "New Supplier Request" over "SUPPLIER NAME".
 *
 * `.mock-form` is also a 1fr 1fr grid with the last two fields spanning
 * (`.field.wide`), which is the shape in every one of the six panels: four
 * short fields paired up, then the wide ones. `nth-child` rather than a class
 * because the template has no per-row width affordance.
 *
 * ALSO RIGHT FOR PURCHASING — V29 ships the identical `.mock-title`,
 * `.field label` and `.mock-form` rules.
 */
.iss-page.iss-solution-supplier-lifecycle-management .iss-cap-visual-toolbar {
	font-family: var(--iss-sans);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0;
	text-transform: none;
	color: #63798a;
}
/*
 * …but only on the two panels that ARE field grids. V15 draws six illustrative
 * panels with two different shapes, and the shared component renders both as
 * one stack of rows:
 *
 *   `.mock-form` / `.info-field-grid`  01 Supplier Onboarding, 05 Supplier
 *                                      Information — six labelled fields, four
 *                                      paired up and the last two spanning.
 *   `.mock-list` / `.lifecycle-track`  02, 03, 04, 06 — one record per LINE,
 *                                      three columns inside it, ending in a
 *                                      status chip.
 *
 * The chip is the tell, and it is the only one in the markup: the list panels
 * all carry `.iss-cap-visual-tag`, the field panels never do. Two-columning a
 * list panel breaks its rows in half — "•••• 4421 → / •••• 8173" over two
 * lines with HIGH REVIEW beside it — which is what this gate exists to stop.
 * `:has()` is already used for layout in §15c.
 */
.iss-page.iss-solution-supplier-lifecycle-management .iss-cap-visual-rows:not(:has(.iss-cap-visual-tag)) {
	grid-template-columns: 1fr 1fr;
	gap: 11px;
}
.iss-page.iss-solution-supplier-lifecycle-management .iss-cap-visual-rows:not(:has(.iss-cap-visual-tag)) > :nth-child(n+5) { grid-column: 1 / -1; }
.iss-page.iss-solution-supplier-lifecycle-management .iss-cap-visual-row b {
	font-family: var(--iss-mono);
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #8294a2;
}
.iss-page.iss-solution-supplier-lifecycle-management .iss-cap-visual-row span {
	margin-top: 3px;
	font-size: 12px;
	font-weight: 750;
	color: #3e5363;
}
/*
 * The footer button reads "Submit for Validation →" in V15 — sentence case
 * with the arrow, like every other CTA on the page. The arrow is a `::after`
 * because the label is a field value and an editor should not have to type a
 * glyph to get the page's own button shape.
 */
.iss-page.iss-solution-supplier-lifecycle-management .iss-cap-visual-action {
	font-family: var(--iss-sans);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0;
	text-transform: none;
}
.iss-page.iss-solution-supplier-lifecycle-management .iss-cap-visual-action::after { content: " \2192"; }

/*
 * 29f. The project-snapshot panel's strap line is sentence case.
 *
 * V15's `.proof-brand-meta` is 12px/700 in the panel's own voice — "Supplier
 * Onboarding • Compliance • Fraud Prevention". The shared component sets it in
 * 9.5px mono uppercase, which at that size reads as a system label rather than
 * as the three things the story is about. The dark panel's missing "PROJECT
 * SNAPSHOT" kicker above the logo is a blank field, not CSS; the migration
 * fills it.
 */
.iss-page.iss-solution-supplier-lifecycle-management .iss-snap-teaser-foot {
	font-family: var(--iss-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .01em;
	text-transform: none;
	color: #b8d0dd;
}

/*
 * 29h. The capability detail's ordinal is a PLATE beside its label, not the
 * head of the label's string.
 *
 * V15: `.detail-kicker{display:flex;gap:12px}` holding a 48px `.detail-number`
 * and then the eyebrow — six times down the page, and the first one is filled
 * blue because Supplier Onboarding is the anchor capability. It shipped as
 * "01 · ANCHOR CAPABILITY", one run of 10px mono.
 *
 * single-solution.php now emits the ordinal and the " · " in their own spans.
 * Bare and unstyled they render exactly the flat string every other page still
 * wants — Invoice & AP V11 draws precisely that — so this is the only page
 * that takes them apart.
 *
 * `order` rather than reordered markup: §4's accent dash is the kicker's own
 * `::before`, and V15 puts it AFTER the plate ("[01] — ANCHOR CAPABILITY").
 * A flex container can move a pseudo-element; nothing else can.
 *
 * The orders are NEGATIVE, and that is the whole trick. The label is a bare
 * text node, so it is an ANONYMOUS flex item — and an anonymous item cannot be
 * selected, which leaves it stuck at `order: 0`. Positive orders on the plate
 * and the dash therefore push both BEHIND it, which is exactly what the first
 * build of this rule shipped: "ANCHOR CAPABILITY [01] —". Anything that has to
 * precede the label has to sort below zero.
 */
/*
 * FIRST, THE COST OF THAT MARKUP, PAID BACK — and this half is NOT page-scoped.
 *
 * §4 makes every `.iss-kicker` an `inline-flex` row with `gap: 8px`, for the
 * accent dash. Splitting the ordinal and the separator out of the string turns
 * one anonymous text item into three items, so the row gains TWO gaps it never
 * had: "01<8px>·<8px>Invoice Capture" where the package draws "01 · Invoice
 * Capture". The spacing inside the separator's own " · " is the spacing that
 * was always there and is all that is wanted.
 *
 * So each new span gives its trailing gap back. This applies to every page
 * using this template, because the markup does — Invoice & AP and Purchasing
 * both render this kicker and neither asked for it to get wider.
 */
.iss-page .iss-cap-detail-num,
.iss-page .iss-cap-detail-sep { margin-inline-end: -8px; }

.iss-page.iss-solution-supplier-lifecycle-management .iss-cap-detail .iss-kicker {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
}
.iss-page.iss-solution-supplier-lifecycle-management .iss-cap-detail .iss-kicker::before { order: -1; }
.iss-page.iss-solution-supplier-lifecycle-management .iss-cap-detail .iss-cap-detail-num {
	order: -2;
	/* …and here the plate DOES want the row's own 12px gap. */
	margin-inline-end: 0;
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	border-radius: 13px;
	background: #e8f5fd;
	color: var(--iss-blue);
	font-family: var(--iss-sans);
	font-size: 16px;
	font-weight: 950;
	letter-spacing: .02em;
	text-transform: none;
}
/* The separator is the string's join; the plate replaces it. */
.iss-page.iss-solution-supplier-lifecycle-management .iss-cap-detail .iss-cap-detail-sep { display: none; }
/*
 * The two tints V15 gives the plate. `.alt` is its tinted-ground section, which
 * is `.iss-cap-detail-soft` here — a white plate with a hairline so it does not
 * disappear into the band. The anchor capability's is filled blue, and that is
 * the first detail on the page, which `.iss-cap-detail-soft:first-of-type`
 * cannot express (the soft sections alternate), so it is keyed on its own id.
 */
.iss-page.iss-solution-supplier-lifecycle-management .iss-cap-detail-soft .iss-cap-detail-num {
	background: #fff;
	border: 1px solid #cfe6f5;
}
.iss-page.iss-solution-supplier-lifecycle-management #cap-supplier-onboarding .iss-cap-detail-num {
	background: var(--iss-blue);
	border-color: var(--iss-blue);
	color: #fff;
}

/*
 * 29i. Every step plate on this strip carries the SAME tint but the first.
 *
 * V15 gives `.step-icon` one ground (`#e9f5fc`) and overrides it in exactly
 * one place — `.anchor-emphasis .step-icon`, the filled blue plate on 01
 * Request. The site additionally tints the step it classes as the ERP
 * execution one, which puts a second, slightly deeper blue on 05 Create in
 * QAD. That is a real distinction on a strip whose last step is a hand-off;
 * it is not one this package draws, and beside four identical plates the odd
 * one reads as a rendering error rather than as a signal.
 *
 * Page-scoped: Invoice & AP and Purchasing keep `.iss-wf-execute` as built.
 */
.iss-page.iss-solution-supplier-lifecycle-management .iss-wf-execute .iss-wf-ico {
	background: #eaf6fd;
	color: var(--iss-blue);
}

/*
 * 29j. …and the separator between two steps is an ARROW here, not a chevron.
 *
 * The template hardcodes `&rsaquo;`, which is right for the other two pages
 * that draw this strip — Purchasing V29 and Invoice & AP V11 both set
 * `<span class="step-arrow">›</span>` — and wrong for V15, which sets `→`.
 * A one-character difference, but it is in the component Danny has now come
 * back on twice, so it is closed here rather than left for a third look.
 *
 * Swapped in CSS rather than in the template because the glyph is decorative
 * (`aria-hidden`) and because a per-page character would need a field, or a
 * branch, for a mark no editor should ever be asked about. `font-size: 0`
 * hides the markup's own chevron without removing the element that carries
 * the circle.
 */
.iss-page.iss-solution-supplier-lifecycle-management .iss-wf-arrow { font-size: 0; }
.iss-page.iss-solution-supplier-lifecycle-management .iss-wf-arrow::before {
	content: "\2192";
	font-size: 15px;
}

/*
 * 29g. On a phone, ONE of the two field grids stacks — and it is not the one
 * you would guess.
 *
 * V15's 700px block stacks `.info-field-grid` (05 Supplier Information) and
 * says nothing about `.mock-form` (01 Supplier Onboarding), which therefore
 * stays two-up all the way down. Checked against the mockup rendered at 390px
 * rather than inferred: 01's form really is two columns there, with "Acme
 * Components LLC" wrapping inside its field, and 05 really is one.
 *
 * So this stacks 05 only, keyed on the section's own id because the two panels
 * are indistinguishable in the markup — same component, same six tagless rows.
 * The id also buys the specificity to beat the `:not(:has())` rule above,
 * which a plain class selector in a media query does not: `:has()` takes the
 * specificity of its argument, so that rule is four classes deep and would
 * otherwise win at every width.
 *
 * The Shift grid needs nothing here — `.iss-split` already stacks at 700px
 * site-wide (§3486).
 */
@media (max-width: 700px) {
	#cap-supplier-information .iss-cap-visual-rows { grid-template-columns: 1fr; }
}

/* ============================================================
   30. Purchasing V29 (/solutions/purchasing/)
   ============================================================
   The two components V29's Clean HTML adds that the shared Solution template
   had no markup for: the Modern Purchasing Experience card grid (§B of the
   change list) and the module feature panel (§C). Analysis and the measured
   baseline are in
   docs/audit/2026-09-12_purchasing-v29-change-list/CHANGE_LIST.md.

   THE THIRD THING V29 ASKS FOR IS NOT HERE. Its Shift band is light, and so
   is Supplier Lifecycle V15's — that fix lives in §29b, written for SLM the
   same day and taken up for this page rather than copied. Look there, not
   here, when this page's Shift band is what you are changing.

   SCOPING. Neither rule below names the page, unlike §29's. They are NEW
   components rather than overrides of a shared one, and `mx_heading` /
   `cap_N_panel_title` are what render them — both empty on every other page,
   so nothing there can match a class-keyed rule anyway. Keying on the class
   also means the component arrives styled on the first page whose package
   approves it, instead of rendering unstyled until someone notices. What it
   does NOT mean is that the section is now shared: V29's Developer Notes are
   explicit that Modern Purchasing Experience "must not silently become a
   mandatory shared component for other Workflow Area pages", and the empty
   field is what enforces that.
   ============================================================ */

/* ---- 30b. Modern Purchasing Experience (`#modern-experience`) ------------
 *
 * V29 §B. A 2x2 grid of UX themes between the Shift band and the platform
 * bridge, on a card-to-ground gradient. One column at 960px, which is the
 * mockup's own breakpoint for this grid.
 */
.iss-page .iss-mx { background: linear-gradient(180deg, var(--iss-card), var(--iss-bg)); }
.iss-page .iss-mx-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
}
.iss-page .iss-mx-card {
	border: 1px solid var(--iss-line);
	border-radius: 16px;
	background: var(--iss-card);
	padding: 23px 22px;
	box-shadow: 0 10px 28px rgba(7, 26, 43, .05);
}
.iss-page .iss-mx-label,
.iss-page .iss-cap-panel-kicker {
	display: block;
	font-family: var(--iss-mono);
	font-size: 10.5px;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: .09em;
	font-weight: 900;
	color: var(--iss-blue);
	margin-bottom: 9px;
}
.iss-page .iss-mx-card h3 {
	font-size: 19px;
	line-height: 1.22;
	letter-spacing: -.02em;
	margin-bottom: 9px;
}
.iss-page .iss-mx-card p {
	margin: 0;
	color: var(--iss-muted);
	font-size: 14px;
	line-height: 1.55;
}
@media (max-width: 960px) {
	.iss-page .iss-mx-grid { grid-template-columns: 1fr; }
}

/* ---- 30c. Module feature panel (`.module-feature-panel`) -----------------
 *
 * V29 §C. A left-ruled callout closing a module's bullet list, naming one
 * capability the package wants called out without giving it a seventh module:
 * Core's Buyer Workbench, PunchOut's ASN Visibility.
 */
.iss-page .iss-cap-panel {
	margin-top: 22px;
	padding: 16px 17px;
	border: 1px solid var(--iss-line-strong);
	border-left: 4px solid var(--iss-blue);
	border-radius: 0 12px 12px 0;
	background: linear-gradient(90deg, var(--iss-bg-tint), var(--iss-card));
}
.iss-page .iss-cap-panel strong {
	display: block;
	color: var(--iss-navy-2);
	font-size: 15px;
	line-height: 1.3;
	margin-bottom: 6px;
}
.iss-page .iss-cap-panel span:not(.iss-cap-panel-kicker) {
	display: block;
	color: var(--iss-muted);
	font-size: 13.5px;
	line-height: 1.5;
	font-weight: 650;
}
/*
 * A dark module paints its own ground (`cap_N_dark`), so the panel's light
 * gradient would be a white slab on it. None of Purchasing's six are dark;
 * this is here so the component is right the first time another page's
 * package puts a panel on one, rather than after someone reports it.
 */
.iss-page .iss-cap-detail-dark .iss-cap-panel {
	border-color: rgba(255, 255, 255, .14);
	background: rgba(255, 255, 255, .05);
}
.iss-page .iss-cap-detail-dark .iss-cap-panel strong { color: #fff; }
.iss-page .iss-cap-detail-dark .iss-cap-panel span:not(.iss-cap-panel-kicker) { color: #c2d2dd; }