/**
 * Project Snapshot — the canonical style for every Project Snapshot page.
 * -----------------------------------------------------------------------------
 * Scoped under `.iss-snapshot`, the wrapper `single-project_snapshot.php` puts
 * on every `project_snapshot` post. There is no per-company stylesheet and no
 * second snapshot template: one template, one stylesheet, so a snapshot added
 * next year looks identical to the ten that exist today.
 *
 * HISTORY — this began as `project-snapshot-mimedx.css`, scoped to
 * `.iss-snapshot-v091` so the unapproved MiMedx v0.9.1 candidate could not
 * leak onto the other 8 snapshots. Promoted to the shared style 2026-09-07
 * (Danny) when the client asked for the MiMedx treatment on all of them —
 * which is the promotion the old MiMedx template docblock said was the plan
 * "if Glenn/the client approve this page". The `-v091` scope is gone; nothing
 * about the rules themselves changed in the promotion.
 *
 * Reused as-is from the shared design system (no CSS needed here): .iss-wrap,
 * .iss-section/.iss-tight, .iss-bleed, .iss-sec-head-split, .iss-kicker/
 * .iss-eyebrow, .iss-btn/.iss-btn-row, .iss-cap-nav (+ its docking JS),
 * .iss-quote/.iss-qby, .iss-cta-band/.iss-cta-band-split, .iss-progress-
 * track/-bar. Net-new pieces below are the hero-panel/control-path, the
 * metadata strip, the challenge/context/outcome card grids, the navy
 * solution tabs, and the capability accordion cards.
 *
 * HERO IS LIGHT, NOT SITE-STANDARD DARK — a deliberate, flagged deviation,
 * and as of the promotion it applies to every snapshot rather than one page.
 * Every other `.iss-detail-hero` on the site is dark navy (iss-global.css §7,
 * "approved as the scheme for every page"). The v0.9.1 HTML is a light
 * gradient hero; Spencer chose to match it literally for the MiMedx review
 * build, and Danny confirmed 2026-09-07 that this treatment is what all the
 * snapshots should use — so `.iss-hero` below un-sets every
 * `.iss-detail-hero` dark-mode rule back to the light values. `.iss-detail-hero`
 * is still the class on the section itself — kept only so
 * `js/iss-interactions.js`'s existing docked-nav IntersectionObserver (which
 * hard-codes that selector) fires unmodified.
 *
 * The snapshot hero is therefore the ONE light hero on the site. If a future
 * review reverses that, this file is the single place to change it, and the
 * change lands on all snapshots at once — which is the point of promoting it.
 *
 * FULL-BLEED NAVY/PALE BANDS — the Solutions and Capabilities sections carry
 * the shared `.iss-bleed` class (iss-global.css §3) rather than a bespoke
 * width fix, so their background reaches the page edges exactly like the
 * hero and breadcrumb do, on the same mechanism.
 */

/* ---- Hero: forced light, overriding the site-wide dark `.iss-detail-hero` - */
.iss-snapshot .iss-detail-hero.iss-snap-hero {
	color: var(--iss-ink);
	background: linear-gradient(135deg, #f8fbfd 0%, #edf5fa 100%);
	padding-block: clamp(3.2rem, 7vw, 5.6rem);
}
.iss-snapshot .iss-detail-hero.iss-snap-hero::after {
	content: "";
	position: absolute;
	right: -150px;
	top: -190px;
	width: 470px;
	height: 470px;
	border: 88px solid rgba(57, 195, 230, .12);
	border-radius: 50%;
	pointer-events: none;
}
.iss-snapshot .iss-snap-hero h1,
.iss-snapshot .iss-snap-hero h2,
.iss-snapshot .iss-snap-hero h3 { color: var(--iss-ink); }
.iss-snapshot .iss-snap-hero p,
.iss-snapshot .iss-snap-hero .iss-lead { color: var(--iss-muted); }
.iss-snapshot .iss-snap-hero .iss-eyebrow { padding: 0; background: none; border: 0; color: var(--iss-blue); }
.iss-snapshot .iss-snap-hero .iss-eyebrow::before { width: 24px; background: currentColor; }
.iss-snapshot .iss-snap-hero .iss-btn-primary,
.iss-snapshot .iss-snap-hero .iss-btn-demo { background: var(--iss-navy); border-color: var(--iss-navy); color: #fff; }
.iss-snapshot .iss-snap-hero .iss-btn-primary:hover,
.iss-snapshot .iss-snap-hero .iss-btn-demo:hover { background: var(--iss-navy-2); border-color: var(--iss-navy-2); color: #fff; }
.iss-snapshot .iss-snap-hero .iss-btn-ghost { border-color: var(--iss-navy); color: var(--iss-navy); }
.iss-snapshot .iss-snap-hero .iss-btn-ghost:hover { border-color: var(--iss-navy-2); color: var(--iss-navy-2); }

.iss-snapshot .iss-snap-hero-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 4.2rem);
}
.iss-snapshot .iss-snap-hero-copy h1 { max-width: 22ch; }

/*
 * HERO SOLUTION LOCKUP — the snapshot document's own subheading.
 *
 * The v1.3a source documents head every printed page with three lines:
 * "PROJECT SNAPSHOT", the client's name, and the solution designation
 * ("iApprove™ | Material Management"). The web page carried the first two (the
 * breadcrumb and the eyebrow) and dropped the third; ISS asked for it back
 * (Danny, 2026-09-07). It sits between the eyebrow and the H1 so the hero reads
 * in the source's own order — client, solution, headline — and inside the hero
 * rather than in a strip of its own between the breadcrumb and the hero, which
 * would be a fourth chrome bar sitting on the page ground below a band that
 * paints its own background.
 *
 * A PILL, not a deck line, because several H1s already name the product:
 * Abbott's headline is "iApprove™ Transforms Material Management" above a
 * lockup reading "iApprove™ | Material Management". As running text those two
 * read as a stutter; as a bordered designation they read as a label above a
 * headline, which is what the source does. See iss_snap_hero_subhead() in
 * inc/project-snapshot-data.php for the markup and the same reasoning.
 *
 * It has to wrap: TransMedics' lockup is "iApprove™ | Supplier Lifecycle
 * Management", which does not fit one line in a 295px phone hero. See the
 * note on `display` below for why that is inline flow and not flex.
 */
.iss-snapshot .iss-snap-hero-copy p.iss-snap-hero-lockup {
	/*
	 * `block` + `fit-content`, and both halves are load-bearing.
	 *
	 * The CONTENT must be normal inline flow, not flex: as flex items the three
	 * pieces break BETWEEN items, so TransMedics' 41-character lockup wrapped as
	 * "iApprove™ |" / "Supplier Lifecycle Management" in a 295px phone hero —
	 * a separator dangling at the end of a line with nothing after it. Inline
	 * flow wraps it mid-phrase like the prose it is, the pipe can never end a
	 * line, and the spaces around it are the source string's own rather than a
	 * `gap` approximating them.
	 *
	 * The BOX must still be block-level. `inline-block` gives the same inline
	 * flow inside and shrink-to-fit outside, and it shipped — but the eyebrow
	 * above it is an inline-flex span in a block container, so at 1512px the two
	 * shared a line and the pill sat BESIDE the eyebrow on the three snapshots
	 * whose lockups are short enough to fit (Bimeda, MiMedx, Eaton). It looked
	 * right at every width where they did not fit, which is most of them.
	 * `width: fit-content` keeps the pill hugging its text without making the
	 * box inline.
	 */
	display: block;
	width: fit-content;
	max-width: 100%;
	margin: .75rem 0 0;
	padding: .4rem .85rem;
	border: 1px solid var(--iss-line-strong);
	border-radius: 999px;
	background: rgba(255, 255, 255, .85);
	color: var(--iss-ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
}
/*
 * `.iss-brand` is the site's existing wrapper for an ISS product name — the one
 * place that already knows what one looks like. Tinting it here is what makes
 * "iApprove™" the blue half of the lockup on all ten snapshots without this
 * file listing a single product name.
 */
.iss-snapshot .iss-snap-hero-copy p.iss-snap-hero-lockup .iss-brand { color: var(--iss-blue); }
/*
 * The pipe is the client's own separator and stays as typed — only tinted back,
 * so it separates without competing. Muted ink rather than the hairline tint:
 * a border colour is ~1.6:1 against this pill and would read as a gap rather
 * than a separator. It is aria-hidden in the markup; a screen reader gets
 * "iApprove trademark Material Management".
 */
.iss-snapshot .iss-snap-hero-copy p.iss-snap-hero-lockup .iss-snap-hero-lockup-sep {
	padding: 0 .1em;
	color: var(--iss-muted-2);
	font-weight: 400;
}
/* Without a lockup the eyebrow's 18px sits straight under the H1. With one
 * between them the pill owns that gap and the H1 keeps a slightly larger one
 * below the pill, so the three do not read as an evenly-spaced stack. */
.iss-snapshot .iss-snap-hero-copy p.iss-snap-hero-lockup + h1 { margin-top: 1rem; }
.iss-snapshot .iss-snap-hero-copy p.iss-lead { max-width: 58ch; margin-top: 1.1rem; }
/*
 * The candidate's own `.actions { margin-top:1.6rem }` never made it over —
 * `.iss-btn-row` (the shared class this reuses) carries no margin-top of its
 * own, so the buttons sat right under the lead paragraph with only the
 * paragraph's own line-height for breathing room.
 */
.iss-snapshot .iss-snap-hero-copy .iss-btn-row { margin-top: 1.6rem; }

.iss-snapshot .iss-snap-panel {
	padding: clamp(1.25rem, 3vw, 2rem);
	background: rgba(255, 255, 255, .94);
	border: 1px solid var(--iss-line);
	border-top: 5px solid var(--iss-cyan);
	border-radius: .55rem;
	box-shadow: 0 14px 36px rgba(7, 26, 43, .08);
}
.iss-snapshot .iss-snap-panel-title { color: var(--iss-ink); font-weight: 800; font-size: 15px; }
.iss-snapshot .iss-snap-panel-sub { margin: .3rem 0 0; color: var(--iss-muted); font-size: 14px; }
.iss-snapshot .iss-snap-steps { display: grid; gap: .65rem; margin-top: 1rem; }
.iss-snapshot .iss-snap-step {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr) 20px;
	align-items: center;
	gap: .75rem;
	min-height: 54px;
	padding: .78rem .85rem;
	color: var(--iss-ink);
	background: var(--iss-bg-tint);
	border: 1px solid var(--iss-line);
	border-radius: .38rem;
	text-decoration: none;
	transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.iss-snapshot .iss-snap-step:hover,
.iss-snapshot .iss-snap-step:focus-visible { transform: translateX(4px); background: #fff; border-color: var(--iss-cyan); }
.iss-snapshot .iss-snap-step b {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	color: #fff;
	background: var(--iss-blue);
	font: 700 12px/1 var(--iss-mono);
}
.iss-snapshot .iss-snap-step strong { display: block; color: var(--iss-ink); font-size: 15px; font-weight: 800; line-height: 1.3; }
.iss-snapshot .iss-snap-step small { display: block; margin-top: .22rem; color: var(--iss-muted); font-size: 13px; font-weight: 600; line-height: 1.45; }
.iss-snapshot .iss-snap-step i { color: var(--iss-blue); font-style: normal; font-weight: 800; }
.iss-snapshot .iss-snap-backbone {
	margin-top: 1rem;
	padding: 1rem 1.1rem;
	color: var(--iss-muted);
	background: var(--iss-bg-tint);
	border: 1px solid var(--iss-line);
	border-radius: .35rem;
}
.iss-snapshot .iss-snap-backbone strong { display: block; color: var(--iss-blue); font-size: 14px; }
.iss-snapshot .iss-snap-backbone span { display: block; margin-top: .25rem; }

/* ---- Metadata strip ------------------------------------------------------ */
.iss-snapshot .iss-snap-meta {
	border-top: 1px solid var(--iss-line);
	border-bottom: 1px solid var(--iss-line);
	background: #fff;
}
/*
 * `.iss-cap-nav`'s shared -36px top margin (iss-global.css) is designed to
 * overlap the DARK hero directly above it, so the white nav shelf reads as
 * docked to it. Here the metadata strip sits between the hero and the nav,
 * so that same overlap instead ate into the metadata strip. Cancelled for
 * this page only — the metadata strip supplies its own visual separation
 * (borders + white background), so the nav doesn't need to overlap anything.
 */
.iss-snapshot .iss-cap-nav { margin-top: 0; }
/*
 * Full-width, borderless docked nav on desktop — matching the candidate's own
 * `.section-nav` (a flat bar with just a bottom border, background full-bleed
 * via the shared `.iss-bleed` class added to this element in the template)
 * instead of the shared component's rounded, bordered, backdrop-blurred pill
 * card. Left untouched below that width: there is no site precedent for a
 * full-width mobile treatment of this component (every other template keeps
 * the pill card at every width, iss-global.css's own breakpoint only stacks
 * the label over the links, never changes the shape), so mobile matches every
 * other Project Snapshot / Solution page exactly.
 *
 * 961px, not the 901px this shipped with, so it changes on the SAME width as
 * the shared component's own layout (iss-global.css §24a-3, max-width: 960px).
 * When the two disagreed, 901-960px got the borderless full-bleed desktop bar
 * AND the stacked full-width label at the same time — a combination neither
 * treatment was designed for.
 */
@media (min-width: 961px) {
	.iss-snapshot .iss-cap-nav {
		background: rgba(255, 255, 255, .97);
		border-bottom: 1px solid var(--iss-line);
		box-shadow: 0 8px 24px rgba(7, 26, 43, .04);
	}
	.iss-snapshot .iss-cap-nav-in {
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		backdrop-filter: none;
		justify-content: center;
	}
}
.iss-snapshot .iss-snap-meta-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.iss-snapshot .iss-snap-meta-item { padding: 1.05rem 1.15rem; border-right: 1px solid var(--iss-line); }
.iss-snapshot .iss-snap-meta-item:last-child { border-right: 0; }
.iss-snapshot .iss-snap-meta-item dt {
	margin: 0;
	color: var(--iss-muted-2);
	font: 700 11px/1.2 var(--iss-mono);
	letter-spacing: .08em;
	text-transform: uppercase;
}
.iss-snapshot .iss-snap-meta-item dd { margin: .28rem 0 0; color: var(--iss-ink); font-weight: 800; font-size: 16px; }

/* ---- Client section ------------------------------------------------------- */
.iss-snapshot .iss-snap-overview-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 1rem; margin-top: 2.1rem; }
.iss-snapshot .iss-snap-client-card {
	padding: clamp(1.4rem, 3vw, 2.2rem);
	background: #fff;
	border: 1px solid var(--iss-line);
	border-left: 5px solid var(--iss-cyan);
	border-radius: .48rem;
	box-shadow: 0 12px 32px rgba(7, 26, 43, .06);
}
.iss-snapshot .iss-snap-client-card p { margin: .85rem 0 0; font-size: 17px; }
.iss-snapshot .iss-snap-callout { margin-top: 1.25rem; padding: 1rem 1.1rem; background: var(--iss-bg-tint); border: 1px solid var(--iss-line); border-radius: .35rem; }
.iss-snapshot .iss-snap-callout strong { display: block; color: var(--iss-ink); font-size: 17px; }
.iss-snapshot .iss-snap-callout span { display: block; margin-top: .3rem; color: var(--iss-muted); font-weight: 700; }
.iss-snapshot .iss-snap-overview-grid .iss-quote { display: grid; align-content: center; margin: 0; }
/*
 * The shared `.iss-quote` carries the site's large card radius (--iss-r-lg,
 * 26px) — every other card on this page uses the candidate's own tighter
 * .35–.55rem family (~6–9px), so the quote card was the one visibly
 * bubblier corner next to the client-card sitting right beside it. Matches
 * the candidate's own `.quote-card { border-radius:.48rem }` instead.
 */
.iss-snapshot .iss-quote { border-radius: .48rem; }

/* ---- Challenge section ------------------------------------------------------ */
.iss-snapshot .iss-snap-tint { background: var(--iss-bg); }
.iss-snapshot .iss-snap-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 2.2rem; align-items: stretch; }
.iss-snapshot .iss-snap-info-card {
	position: relative;
	padding: 1.35rem;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--iss-line);
	border-radius: .48rem;
	box-shadow: 0 12px 32px rgba(7, 26, 43, .06);
}
.iss-snapshot .iss-snap-info-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--iss-cyan); }
.iss-snapshot .iss-snap-info-card h3 { margin-top: .55rem; }
.iss-snapshot .iss-snap-info-card p { margin: .75rem 0 0; font-size: 17px; line-height: 1.58; }
.iss-snapshot .iss-snap-context-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.iss-snapshot .iss-snap-context-card { padding: 1.3rem; background: #fff; border: 1px solid var(--iss-line); border-radius: .45rem; }
.iss-snapshot .iss-snap-context-card p { margin: .7rem 0 0; font-size: 17px; }

/* ---- Solutions (navy, tabs) --------------------------------------------- */
.iss-snapshot .iss-snap-solutions { color: rgba(255, 255, 255, .84); background: var(--iss-navy-2); }
.iss-snapshot .iss-snap-solutions h2,
.iss-snapshot .iss-snap-solutions h3 { color: #fff; }
.iss-snapshot .iss-snap-solutions .iss-kicker { color: var(--iss-sky); }
.iss-snapshot .iss-snap-solutions .iss-kicker::before { background: currentColor; }
/*
 * The panel's own "01 · Supplier Lifecycle Management" label sits inside the
 * WHITE panel-body card, not on the navy section background — it needs its
 * own darker, non-sky color rather than inheriting the rule above (which is
 * illegible on white). Deliberately its own class rather than `.iss-kicker`
 * so the section-wide sky override above can never reach it.
 */
.iss-snapshot .iss-snap-panel-label {
	display: block;
	margin-bottom: .3rem;
	color: var(--iss-blue-dark);
	font: 700 11px/1.3 var(--iss-mono);
	letter-spacing: .095em;
	text-transform: uppercase;
}
.iss-snapshot .iss-snap-sol-layout { display: grid; grid-template-columns: minmax(240px, .34fr) minmax(0, 1fr); gap: 1.25rem; margin-top: 2.35rem; }
.iss-snapshot .iss-snap-tabs { display: grid; align-content: start; gap: .6rem; }
.iss-snapshot .iss-snap-tab {
	width: 100%;
	min-height: 52px;
	padding: .9rem 1rem;
	color: rgba(255, 255, 255, .8);
	background: rgba(255, 255, 255, .055);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: .38rem;
	cursor: pointer;
	font: inherit;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.3;
	text-align: left;
	transition: background .18s ease, transform .18s ease, border-color .18s ease;
}
.iss-snapshot .iss-snap-tab:hover { transform: translateX(4px); background: rgba(255, 255, 255, .1); }
.iss-snapshot .iss-snap-tab:focus-visible { outline: 3px solid var(--iss-cyan); outline-offset: 2px; }
.iss-snapshot .iss-snap-tab[aria-selected="true"] { color: #fff; background: var(--iss-blue); border-color: var(--iss-cyan); }
.iss-snapshot .iss-snap-panel-body {
	padding: clamp(1.5rem, 4vw, 2.8rem);
	color: var(--iss-muted);
	background: #fff;
	border-top: 5px solid var(--iss-cyan);
	border-radius: .45rem;
}
.iss-snapshot .iss-snap-panel-body p { margin: 1rem 0 0; font-size: 17px; }
.iss-snapshot .iss-snap-route { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.3rem 0 0; padding: 0; list-style: none; }
.iss-snapshot .iss-snap-route li { padding: .48rem .7rem; color: var(--iss-navy); background: var(--iss-bg-tint); border: 1px solid var(--iss-line); border-radius: 999px; font-size: 14px; font-weight: 800; }
.iss-snapshot .iss-snap-backbone-line {
	margin-top: 1.1rem;
	padding: 1rem 1.15rem;
	color: #fff;
	background: var(--iss-navy-3);
	border: 1px solid rgba(255, 255, 255, .18);
	border-left: 4px solid var(--iss-cyan);
	border-radius: .35rem;
}
.iss-snapshot .iss-snap-backbone-line strong { color: var(--iss-cyan); }
.iss-snapshot .iss-snap-backbone-line span { display: block; margin-top: .25rem; color: rgba(255, 255, 255, .82); }

/* ---- Capabilities (accordion cards, native <details>/<summary>) --------- */
.iss-snapshot .iss-snap-pale { background: var(--iss-bg-tint); }
.iss-snapshot .iss-snap-cap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 2.2rem; }
.iss-snapshot .iss-snap-cap { background: #fff; border: 1px solid var(--iss-line); border-radius: .42rem; }
.iss-snapshot .iss-snap-cap[open] { border-color: var(--iss-cyan); box-shadow: 0 10px 26px rgba(7, 26, 43, .08); }
.iss-snapshot .iss-snap-cap > summary {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) 24px;
	align-items: center;
	gap: .8rem;
	min-height: 56px;
	padding: 1rem;
	color: var(--iss-ink);
	cursor: pointer;
	list-style: none;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.3;
}
.iss-snapshot .iss-snap-cap > summary::-webkit-details-marker { display: none; }
.iss-snapshot .iss-snap-cap > summary:focus-visible { outline: 3px solid rgba(12, 115, 201, .35); outline-offset: -3px; }
.iss-snapshot .iss-snap-cap-num { color: var(--iss-blue); font: 700 12px/1 var(--iss-mono); }
.iss-snapshot .iss-snap-cap-ico { color: var(--iss-blue); font-style: normal; font-size: 22px; line-height: 1; transition: transform .18s ease; }
.iss-snapshot .iss-snap-cap[open] .iss-snap-cap-ico { transform: rotate(45deg); }
.iss-snapshot .iss-snap-cap-a { margin: 0; padding: 0 1rem 1rem 3.7rem; font-size: 17px; line-height: 1.58; }

/* ---- Results / Benefits -------------------------------------------------- */
.iss-snapshot .iss-snap-highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2.15rem; }
.iss-snapshot .iss-snap-metric {
	padding: 1.45rem;
	text-align: center;
	background: #fff;
	border: 1px solid var(--iss-line);
	border-radius: .48rem;
	box-shadow: 0 12px 32px rgba(7, 26, 43, .06);
}
.iss-snapshot .iss-snap-metric strong { display: block; color: var(--iss-blue); font-size: clamp(26px, 3vw, 36px); line-height: 1; }
.iss-snapshot .iss-snap-metric span { display: block; margin-top: .65rem; color: var(--iss-ink); font: 700 12px/1.35 var(--iss-mono); letter-spacing: .06em; text-transform: uppercase; }
.iss-snapshot .iss-snap-subkicker { margin-top: 2.2rem; }
.iss-snapshot .iss-snap-outcome-grid,
.iss-snapshot .iss-snap-expected-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.iss-snapshot .iss-snap-outcome-card { padding: 1.3rem; background: #fff; border: 1px solid var(--iss-line); border-radius: .48rem; box-shadow: 0 12px 32px rgba(7, 26, 43, .06); }
.iss-snapshot .iss-snap-outcome-card h3 { margin-top: .45rem; }
.iss-snapshot .iss-snap-outcome-card p { margin: .7rem 0 0; font-size: 17px; }
.iss-snapshot .iss-snap-expected-card { padding: 1.3rem; background: var(--iss-bg-tint); border: 1px solid var(--iss-line); border-top: 4px solid var(--iss-blue); border-radius: .45rem; }
.iss-snapshot .iss-snap-expected-card h3 { margin-top: .45rem; }
.iss-snapshot .iss-snap-expected-card p { margin: .7rem 0 0; color: var(--iss-ink); font-size: 17px; }
.iss-snapshot .iss-snap-evidence {
	margin: 1.1rem 0 0;
	padding: 1rem 1.1rem;
	background: #fff;
	border: 1px solid var(--iss-line);
	border-left: 4px solid var(--iss-cyan);
	border-radius: .35rem;
	font-size: 16px;
}

/*
 * ---- Closing CTA background — darker navy + decorative rings, matching the
 * candidate's own ".cta" treatment, instead of the shared component's lighter
 * blue-to-cyan gradient (iss-global.css). Geometry (full-bleed, flush with
 * the footer, square corners) stays exactly the shared site-wide rule — only
 * the color and the two rings are page-specific here. h2/p/kicker/buttons
 * are untouched and already render white/near-white from the shared
 * component, so no text-color rules are needed.
 */
.iss-snapshot .iss-cta-band {
	background: linear-gradient(120deg, var(--iss-navy-2), #084879);
}
/*
 * The shared component already draws a decorative `::after` (a white radial
 * sheen, `inset: 0`) — every property has to be explicitly cancelled here
 * (not just re-declared), or leftover values from that rule (the sheen
 * background, or `inset`'s unset sides) keep applying alongside these rings
 * and wash the navy back out. `top`/`right`/`bottom`/`left` are all set to
 * `auto` in the shared rule below before each ring pins its own two sides.
 */
.iss-snapshot .iss-cta-band::before,
.iss-snapshot .iss-cta-band::after {
	content: "";
	position: absolute;
	inset: auto;
	width: 260px;
	height: 260px;
	background: none;
	border: 55px solid rgba(57, 195, 230, .14);
	border-radius: 50%;
	pointer-events: none;
}
.iss-snapshot .iss-cta-band::before { left: -120px; bottom: -160px; }
.iss-snapshot .iss-cta-band::after { right: -100px; top: -170px; }

/* ---- Closing CTA route line ----------------------------------------------- */
.iss-snapshot .iss-snap-cta-route {
	margin-top: 1rem;
	color: var(--iss-sky);
	font: 700 12px/1.5 var(--iss-mono);
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* ==== Responsive ========================================================== */
@media (max-width: 980px) {
	.iss-snapshot .iss-snap-hero-grid,
	.iss-snapshot .iss-snap-overview-grid { grid-template-columns: 1fr; }
	.iss-snapshot .iss-snap-panel { max-width: 640px; }
	.iss-snapshot .iss-snap-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.iss-snapshot .iss-snap-sol-layout { grid-template-columns: 1fr; }
	.iss-snapshot .iss-snap-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.iss-snapshot .iss-snap-tab { text-align: center; }
}
@media (max-width: 700px) {
	.iss-snapshot .iss-snap-hero.iss-detail-hero::after { display: none; }
	.iss-snapshot .iss-snap-meta-grid { grid-template-columns: repeat(2, 1fr); }
	.iss-snapshot .iss-snap-meta-item:nth-child(2) { border-right: 0; }
	.iss-snapshot .iss-snap-meta-item:nth-child(-n+2) { border-bottom: 1px solid var(--iss-line); }
	.iss-snapshot .iss-snap-card-grid,
	.iss-snapshot .iss-snap-cap-grid,
	.iss-snapshot .iss-snap-outcome-grid,
	.iss-snapshot .iss-snap-expected-grid,
	.iss-snapshot .iss-snap-highlights,
	.iss-snapshot .iss-snap-context-grid { grid-template-columns: 1fr; }
	.iss-snapshot .iss-snap-tabs { grid-template-columns: 1fr; }
	.iss-snapshot .iss-snap-tab { text-align: left; }
}
@media (max-width: 460px) {
	.iss-snapshot .iss-snap-panel,
	.iss-snapshot .iss-snap-client-card,
	.iss-snapshot .iss-snap-info-card,
	.iss-snapshot .iss-snap-outcome-card,
	.iss-snapshot .iss-snap-expected-card,
	.iss-snapshot .iss-snap-panel-body { padding: 1.05rem; }
	.iss-snapshot .iss-snap-step { grid-template-columns: 36px minmax(0, 1fr) 16px; padding: .7rem; }
	.iss-snapshot .iss-snap-step b { width: 36px; height: 36px; }
	.iss-snapshot .iss-snap-meta-grid { grid-template-columns: 1fr; }
	.iss-snapshot .iss-snap-meta-item { border-right: 0; border-bottom: 1px solid var(--iss-line); }
	.iss-snapshot .iss-snap-meta-item:last-child { border-bottom: 0; }
	.iss-snapshot .iss-snap-meta-item:nth-child(2) { border-right: 0; }
	.iss-snapshot .iss-snap-cap > summary { grid-template-columns: 32px minmax(0, 1fr) 20px; gap: .55rem; padding: .9rem; }
	.iss-snapshot .iss-snap-cap-a { padding: 0 .9rem .9rem 3rem; }
}

/* =============================================================================
 * PROMOTION ADDITIONS — 2026-09-07
 * Components the v1.1 package needs that the MiMedx-only build never had.
 * Each is built from this file's own existing vocabulary (the .iss-snap-metric
 * card, the .iss-snap-callout tint block, the .iss-snap-panel-label mono
 * kicker) rather than invented, so a page using them still reads as the same
 * system as MiMedx.
 * ========================================================================== */

/* ---- Client-card label ------------------------------------------------------
 * Was an inline `style="…"` on a borrowed `.iss-cap-nav-label` in the MiMedx
 * template. Promoted to a real class with the same computed result, so the
 * reference page is unchanged.
 *
 * `width: 150px` is NOT a design choice — it is inherited behaviour. The old
 * markup borrowed the docked nav's label class, whose `flex: 0 0 150px; width:
 * 150px` the inline style never overrode (it zeroed only border and padding).
 * Kept deliberately so promoting the template does not silently reflow the
 * page the client approved. Worth revisiting once v1.1 is signed off — a
 * label that wraps at 150px inside a full-width card is almost certainly not
 * what was intended. */
.iss-snapshot .iss-snap-card-label {
	width: 150px;
	margin-bottom: .5rem;
	color: var(--iss-blue-dark);
	font: 700 11px/1.2 var(--iss-mono);
	letter-spacing: .095em;
	text-transform: uppercase;
}

/* ---- Challenge metric strip (Abbott) ----------------------------------------
 * A scale-setting figure pair above the challenge cards ("860+ material
 * instructions"). Same card as `.iss-snap-metric` in Results, but it sits on
 * the challenge section's tint rather than white, and auto-fits however many
 * are filled (1-4) instead of a fixed 3-up. */
.iss-snapshot .iss-snap-chal-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 1rem;
	margin-top: 2.2rem;
}
.iss-snapshot .iss-snap-chal-metric {
	padding: 1.45rem;
	text-align: center;
	background: #fff;
	border: 1px solid var(--iss-line);
	border-radius: .48rem;
	box-shadow: 0 12px 32px rgba(7, 26, 43, .06);
}
.iss-snapshot .iss-snap-chal-metric strong {
	display: block;
	color: var(--iss-blue);
	font-size: clamp(26px, 3vw, 36px);
	line-height: 1;
}
.iss-snapshot .iss-snap-chal-metric span {
	display: block;
	margin-top: .65rem;
	color: var(--iss-ink);
	font: 700 12px/1.35 var(--iss-mono);
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* ---- Challenge closing callout (Abbott) -------------------------------------
 * Mirrors `.iss-snap-evidence` in Results — a full-width tinted block with a
 * cyan left rule that closes the section rather than adding another card. */
.iss-snapshot .iss-snap-chal-callout {
	margin-top: 1.1rem;
	padding: 1.1rem 1.2rem;
	background: #fff;
	border: 1px solid var(--iss-line);
	border-left: 4px solid var(--iss-cyan);
	border-radius: .35rem;
}
.iss-snapshot .iss-snap-chal-callout strong {
	display: block;
	color: var(--iss-navy);
	font-size: 17px;
}
.iss-snapshot .iss-snap-chal-callout p {
	margin: .45rem 0 0;
	color: var(--iss-muted);
	font-size: 16px;
}

/* ---- Solution feature grid (Abbott) -----------------------------------------
 * Sits inside the white solution panel, under the route pills. Two-up on
 * desktop, stacking on narrow. Tinted rather than white so it separates from
 * the panel it sits on without another border. */
.iss-snapshot .iss-snap-sol-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: .7rem;
	margin-top: 1.3rem;
}
.iss-snapshot .iss-snap-sol-feature {
	padding: .95rem 1.05rem;
	background: var(--iss-bg-tint);
	border: 1px solid var(--iss-line);
	border-radius: .38rem;
}
.iss-snapshot .iss-snap-sol-feature strong {
	display: block;
	color: var(--iss-navy);
	font-size: 16px;
}
.iss-snapshot .iss-snap-sol-feature span {
	display: block;
	margin-top: .3rem;
	color: var(--iss-muted);
	font-size: 15px;
	line-height: 1.45;
}

/* ---- Single-solution layout -------------------------------------------------
 * With one solution there is no tab rail, so the two-column grid would leave
 * a 240px hole where the rail used to be. Collapse to one column and let the
 * panel use the full width. */
.iss-snapshot .iss-snap-sol-single { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 820px) {
	.iss-snapshot .iss-snap-chal-metrics,
	.iss-snapshot .iss-snap-sol-features { grid-template-columns: 1fr; }
}

/* ---- Legibility fixes in the navy Solutions band ---------------------------
 * Both of these were live on the approved MiMedx page and would have been
 * inherited by all ten snapshots. Found by measuring contrast, not by looking:
 * the first is invisible rather than merely low-contrast, so a screenshot and
 * a `toBeVisible()` assertion both pass straight over it.
 *
 * 1. `.iss-snap-solutions h3 { color: #fff }` (above) is meant for headings on
 *    the navy band — but the solution panel is a WHITE card sitting on that
 *    band, so its <h3> was #fff on #fff. Three headings on MiMedx, one per
 *    snapshot elsewhere, completely unreadable. The file already anticipated
 *    exactly this hazard one component over: see the note on
 *    `.iss-snap-panel-label`, which got its own dark colour "so the
 *    section-wide sky override can never reach it". The heading needed the
 *    same treatment and did not get it.
 *
 * 2. The section head's intro paragraph inherits `--iss-muted` (#607286, a
 *    colour meant for light backgrounds) from the global `p` rule, which beats
 *    the section's own inherited white. On navy that measured 3.57:1 against a
 *    4.5:1 requirement. Only the section-head paragraph is retargeted here —
 *    the panel's own <p> stays muted-on-white, which is correct.
 */
.iss-snapshot .iss-snap-solutions .iss-snap-panel-body h3 { color: var(--iss-navy); }
.iss-snapshot .iss-snap-solutions .iss-sec-head-split p { color: rgba(255, 255, 255, .84); }

/* =============================================================================
 * COPY-FIDELITY ADDITIONS — 2026-09-07
 * A second pass found copy in the client's files with nowhere to render: the
 * client-card body, a second overview card that is not a quote, evidence notes
 * in challenge and capabilities, a detailed route, a trailing panel link, and
 * a status badge on an outcome figure. All styled from this file's existing
 * vocabulary so the pages stay one system.
 * ========================================================================== */

/* Body copy inside the client card, under its heading. */
.iss-snapshot .iss-snap-client-body {
	margin: .7rem 0 0;
	color: var(--iss-muted);
	font-size: 17px;
}

/* ---- Second overview card, when the cell is a summary and not a quote -------
 * Same footprint as `.iss-quote` beside it (which the file already pins to the
 * candidate's .48rem radius), but light: it is information, not a testimonial,
 * so it should not borrow the quote card's navy or its decorative mark. */
.iss-snapshot .iss-snap-summary-card {
	display: grid;
	align-content: center;
	margin: 0;
	padding: clamp(1.3rem, 3vw, 1.9rem);
	background: #fff;
	border: 1px solid var(--iss-line);
	border-left: 4px solid var(--iss-cyan);
	border-radius: .48rem;
	box-shadow: 0 12px 32px rgba(7, 26, 43, .06);
}
.iss-snapshot .iss-snap-summary-card h3 { margin: 0; }
.iss-snapshot .iss-snap-summary-card p {
	margin: .7rem 0 0;
	color: var(--iss-muted);
	font-size: 17px;
}

/* Evidence notes now appear in three sections, so the existing
 * `.iss-snap-evidence` rule gains a lead-in treatment. */
.iss-snapshot .iss-snap-evidence strong {
	color: var(--iss-navy);
	font-weight: 800;
}
/* On the navy Solutions band the white-on-white hazard applies here too. */
.iss-snapshot .iss-snap-solutions .iss-snap-evidence strong { color: #fff; }

/* ---- Detailed route: a step list with a description per step ---------------
 * Rea's source walks the reader through the flow rather than listing pills, so
 * the pill row cannot carry it. Numbered to match the pills' reading order. */
.iss-snapshot .iss-snap-route-detail {
	display: grid;
	gap: .6rem;
	margin: 1.3rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: iss-snap-route;
}
.iss-snapshot .iss-snap-route-detail li {
	counter-increment: iss-snap-route;
	position: relative;
	padding: .85rem 1rem .85rem 3rem;
	background: var(--iss-bg-tint);
	border: 1px solid var(--iss-line);
	border-radius: .38rem;
}
.iss-snapshot .iss-snap-route-detail li::before {
	content: counter(iss-snap-route, decimal-leading-zero);
	position: absolute;
	left: 1rem;
	top: .95rem;
	color: var(--iss-blue-dark);
	font: 700 11px/1 var(--iss-mono);
	letter-spacing: .08em;
}
.iss-snapshot .iss-snap-route-detail strong {
	display: block;
	color: var(--iss-navy);
	font-size: 16px;
}
.iss-snapshot .iss-snap-route-detail span {
	display: block;
	margin-top: .25rem;
	color: var(--iss-muted);
	font-size: 15px;
	line-height: 1.45;
}

/* Trailing link inside a solution panel. The panel is a white card on the navy
 * band, so this takes the panel's own dark blue, not the band's sky. */
.iss-snapshot .iss-snap-panel-link {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-top: 1.2rem;
	color: var(--iss-blue-dark);
	font-size: 15px;
	font-weight: 800;
	text-decoration: none;
}
.iss-snapshot .iss-snap-panel-link:hover,
.iss-snapshot .iss-snap-panel-link:focus-visible { text-decoration: underline; }

/* Status badge under an outcome figure ("Confirmed milestone"). */
.iss-snapshot .iss-snap-metric-status {
	display: block;
	margin-top: .5rem;
	color: var(--iss-blue-dark);
	font: 700 10px/1.3 var(--iss-mono);
	letter-spacing: .09em;
	text-transform: uppercase;
}

/* A Results-section testimonial, where the source puts one there. Full width
 * under the outcome cards rather than beside a client card, so it does not
 * inherit the overview grid's two-up sizing. */
.iss-snapshot .iss-snap-out-quote { margin: 1.6rem 0 0; }

/* =============================================================================
 * DRAFT / PLACEHOLDER CALLOUTS — a review device, not page copy.
 *
 * These exist because a snapshot with no approved content still renders a
 * complete-looking page: every section is conditional and degrades gracefully,
 * which is right for layout and wrong for review. Eaton sat published for weeks
 * looking deliberate while nothing on it said ISS had never supplied its
 * content.
 *
 * So the treatment is deliberately OFF-CONTENT: `--iss-amber`, the one warm
 * token in the palette, dashed rather than solid, and always labelled. Nothing
 * else on a snapshot is amber or dashed, so these cannot be mistaken for
 * approved copy at a glance — which is the entire point. They vanish when the
 * fields are cleared, and while any is set the page is also kept out of search
 * (functions.php).
 * ========================================================================== */

.iss-snapshot .iss-snap-draft {
	background: #fdf6ec;
	border-top: 1px solid rgba(216, 138, 33, .35);
	border-bottom: 1px solid rgba(216, 138, 33, .35);
	padding-block: clamp(1.4rem, 3vw, 2.1rem);
}
.iss-snapshot .iss-snap-draft-in {
	display: grid;
	grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
	gap: 1.1rem;
	align-items: start;
}
/*
 * The tag background is a DARKER amber than `--iss-amber`, deliberately.
 * White on `--iss-amber` (#d88a21) measures 2.77:1 against a 4.5:1
 * requirement — measured, not guessed, and caught on the first render of these
 * very blocks. Shipping that would have repeated the bug this build already
 * fixed twice in the Solutions band. #9c6212 is the same hue at 5.04:1.
 * `--iss-amber` itself is untouched and still carries the borders, where no
 * text sits on it.
 */
.iss-snapshot .iss-snap-draft-tag,
.iss-snapshot .iss-snap-placeholder-tag {
	display: inline-block;
	padding: .34rem .6rem;
	color: #fff;
	background: #9c6212;
	border-radius: .3rem;
	font: 700 10px/1.2 var(--iss-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
}
.iss-snapshot .iss-snap-draft-copy h2 {
	margin: 0;
	color: var(--iss-navy);
	font-size: clamp(19px, 2.2vw, 23px);
	line-height: 1.25;
}
.iss-snapshot .iss-snap-draft-copy p {
	margin: .55rem 0 0;
	color: var(--iss-ink);
	font-size: 16px;
}
.iss-snapshot .iss-snap-draft-list {
	display: grid;
	gap: .38rem;
	margin: .9rem 0 0;
	padding: 0;
	list-style: none;
}
.iss-snapshot .iss-snap-draft-list li {
	position: relative;
	padding-left: 1.5rem;
	color: var(--iss-ink);
	font-size: 15.5px;
	line-height: 1.45;
}
/* An empty checkbox reads as "outstanding" without needing a legend. */
.iss-snapshot .iss-snap-draft-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .3em;
	width: 12px;
	height: 12px;
	border: 2px solid var(--iss-amber);
	border-radius: 2px;
}

/* ---- Per-section callout ---------------------------------------------------- */
.iss-snapshot .iss-snap-placeholder {
	display: grid;
	grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
	gap: .8rem;
	align-items: start;
	margin: 1.4rem 0 0;
	padding: .95rem 1.1rem;
	background: #fdf6ec;
	border: 1px dashed var(--iss-amber);
	border-radius: .4rem;
}
.iss-snapshot .iss-snap-placeholder p {
	margin: 0;
	color: var(--iss-ink);
	font-size: 15.5px;
	line-height: 1.5;
}
/* Inside the navy Solutions band the tint would be a hole, so invert it —
 * same amber signal, legible ink. The white-on-white lesson from that band
 * applies to anything dropped into it. */
.iss-snapshot .iss-snap-placeholder-on-dark {
	background: rgba(216, 138, 33, .14);
	border-color: rgba(216, 138, 33, .75);
}
.iss-snapshot .iss-snap-placeholder-on-dark p { color: #fff; }

@media (max-width: 700px) {
	.iss-snapshot .iss-snap-draft-in,
	.iss-snapshot .iss-snap-placeholder { grid-template-columns: 1fr; }
}