/*
 * Use Cases discovery landing page (/use-cases/) — page assets.
 *
 * Enqueued for template-use-cases.php only (see iss_enqueue_use_cases_assets()
 * in functions.php), declaring `iss-global` as a dependency so it lands after
 * it.
 *
 * REWRITTEN FOR V2 (2026-09-15). The previous contents styled the V1 page — the
 * hero intake fan-in, the iAssist™ lane under the pattern pipeline, the
 * filterable 28-process inventory, the six-use-case switcher. V2 replaces the
 * page's whole architecture (see the template's docblock), so none of those
 * selectors have markup to attach to any more and keeping them would have left
 * ~500 lines of CSS for a page that no longer exists.
 *
 * WHAT IS HERE. Only the compositions V2 introduces: the hero's attribute chips
 * and workflow visual, the Platform → Workflow Areas → Use Cases relationship
 * flow, the qualification panel, the use-case card grid and its filters, the
 * dark discipline grid, the QAD loop, the iAssist™ split panel and the proof
 * cards. Reused from the global system rather than redrawn: `.iss-detail-hero`
 * (the hero ground and its full-bleed geometry), `.iss-cap-nav` (the whole
 * docked contextual shelf), `.iss-kicker`, `.iss-lead`,
 * `.iss-sec-head`, `.iss-btn*`, `.iss-cta-band.iss-cta-band-split`,
 * `.iss-reveal`.
 *
 * Values are the V2 Clean HTML's own — its embedded stylesheet uses the same
 * --iss-* token names this site does, so every colour resolves to the mockup's
 * exact hex rather than a nearest match. One deliberate divergence: content
 * width is the site's `--iss-max` (1120px) via `.iss-wrap`, not the mockup's
 * 1180px, because every neighbouring page is 1120 and this one sitting wider
 * reads as a misalignment on any journey through the site.
 *
 * Selectors carry `.iss-page` so specificity matches iss-global's and the
 * override order is the load order, not a specificity race.
 */

/* ============================================================
   §1  Hero — attribute chips and the workflow visual
   ============================================================ */

/* The mockup's 1.12fr/.88fr. `.iss-hero-2col` supplies the grid and the <980px
   stack; this only retunes the ratio for a four-row card. */
.iss-page .iss-uc-hero-grid {
	grid-template-columns: 1.12fr .88fr;
	gap: clamp(36px, 4vw, 58px);
	align-items: center;
}
.iss-page .iss-uc-hero .iss-lead { max-width: 760px; }
/*
 * The hero label is CYAN in the Clean HTML (#39c3e6). `.iss-detail-hero` gives
 * every label `--iss-sky` (#8fe2f5) by default, which is the paler of the two —
 * right for a lead paragraph on navy, a shade washed out for an 11.5px mono
 * label. The dash follows `currentColor`, so it moves with it.
 */
.iss-page .iss-uc-hero .iss-kicker { color: var(--iss-cyan); }
.iss-page .iss-uc-hero .iss-btn-row { margin-top: 28px; }

.iss-page .iss-uc-micro {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}
.iss-page .iss-uc-micro li {
	font-size: 13px;
	font-weight: 800;
	color: #fff;
	border: 1px solid var(--iss-navy-3);
	background: var(--iss-navy);
	padding: 8px 11px;
	border-radius: 999px;
}

.iss-page .iss-uc-flow {
	border: 1px solid var(--iss-navy-3);
	background: var(--iss-navy);
	border-radius: var(--iss-r-lg);
	padding: 22px;
}
.iss-page .iss-uc-flow-kicker {
	margin: 0 0 12px;
	font-family: var(--iss-mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--iss-cyan);
	font-weight: 800;
}
.iss-page .iss-uc-flow-rows { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.iss-page .iss-uc-flow-rows li {
	display: grid;
	grid-template-columns: 42px 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 13px;
	border: 1px solid var(--iss-navy-3);
	border-radius: var(--iss-r-sm);
	background: var(--iss-navy-2);
}
.iss-page .iss-uc-flow-n {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--iss-blue);
	color: #fff;
	font: 800 11px var(--iss-mono);
}
.iss-page .iss-uc-flow-copy strong { font-size: 14px; display: block; color: #fff; margin-bottom: 1px; }
.iss-page .iss-uc-flow-copy small { display: block; color: var(--iss-sky); font-size: 12px; line-height: 1.45; }
.iss-page .iss-uc-flow-arw { font-weight: 900; color: var(--iss-cyan); font-size: 18px; }
.iss-page .iss-uc-flow-caption { margin: 14px 2px 0; color: var(--iss-sky); font-size: 12px; }

/* ============================================================
   §2  How This Page Fits — the relationship flow
   ============================================================ */

/*
 * A white band directly under the hero, tighter than a normal section: it is a
 * bridge between the hero's claim and the page's contents, not a section in its
 * own right, and the mockup gives it 34px rather than the page's 82.
 */
.iss-page .iss-uc-rel {
	background: var(--iss-card);
	border-bottom: 1px solid var(--iss-line);
	padding: 34px 0;
}
.iss-page .iss-uc-rel-intro {
	display: grid;
	grid-template-columns: .72fr 1.28fr;
	gap: 34px;
	align-items: start;
	margin-bottom: 22px;
}
.iss-page .iss-uc-rel-intro h2 { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 0; }
.iss-page .iss-uc-rel-intro p { font-size: 15px; margin: 0; max-width: 760px; color: var(--iss-muted); }
.iss-page .iss-uc-rel-intro p strong { color: var(--iss-ink); }

.iss-page .iss-uc-rel-flow {
	display: grid;
	grid-template-columns: 1fr 34px 1fr 34px 1fr;
	gap: 10px;
	align-items: stretch;
}
.iss-page .iss-uc-rel-card {
	border: 1px solid var(--iss-line-strong);
	background: var(--iss-bg);
	border-radius: var(--iss-r);
	padding: 20px;
	min-height: 164px;
}
.iss-page .iss-uc-rel-card.is-platform {
	background: var(--iss-navy);
	border-color: var(--iss-navy);
	color: #fff;
}
.iss-page .iss-uc-rel-label {
	margin: 0 0 10px;
	font: 800 9.5px var(--iss-mono);
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--iss-blue);
}
.iss-page .iss-uc-rel-card.is-platform .iss-uc-rel-label { color: var(--iss-cyan); }
.iss-page .iss-uc-rel-card h3 { font-size: 18px; margin: 0 0 7px; }
.iss-page .iss-uc-rel-card.is-platform h3 { color: #fff; }
.iss-page .iss-uc-rel-card p { font-size: 13px; line-height: 1.5; margin: 0; color: var(--iss-muted); }
.iss-page .iss-uc-rel-card.is-platform p { color: var(--iss-sky); }
.iss-page .iss-uc-rel-arw {
	display: grid;
	place-items: center;
	color: var(--iss-blue);
	font-size: 24px;
	font-weight: 900;
}

.iss-page .iss-uc-rel-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 13px; }
/*
 * 10px is small for a link. It is the mockup's size and these are four long
 * approved names the handoff forbids abbreviating, so the size buys them one
 * row instead of three — but the tap target is padded out to a usable height
 * and the colour clears AA on the card's ground.
 */
.iss-page .iss-uc-rel-chips a {
	font-size: 10px;
	font-weight: 800;
	color: var(--iss-blue-dark);
	background: var(--iss-card);
	border: 1px solid var(--iss-line);
	border-radius: 999px;
	padding: 6px 8px;
	transition: border-color .2s ease, color .2s ease;
}
.iss-page .iss-uc-rel-chips a:hover,
.iss-page .iss-uc-rel-chips a:focus-visible { border-color: var(--iss-blue); color: var(--iss-blue); }

.iss-page .iss-uc-rel-note {
	margin: 16px 0 0;
	padding: 13px 16px;
	border-left: 3px solid var(--iss-cyan);
	background: var(--iss-bg-tint);
	font-size: 13px;
	color: var(--iss-muted);
}
.iss-page .iss-uc-rel-note strong { color: var(--iss-ink); }

/* ============================================================
   §3  Contextual navigation — two tweaks to the shared shelf
   ============================================================ */

/*
 * The shelf itself is `.iss-cap-nav` (iss-global.css §24a) and is NOT restyled
 * here: its white card, its JS-driven fixed dock under the measured global
 * header, its scrolling links row and its retire-before-the-footer behaviour
 * are all the site's, reused. Two page-specific things only.
 *
 * 1. NO HERO OVERLAP. §24a pulls the shelf up 36px so it docks onto the dark
 *    hero it normally follows. The approved order here puts "How This Page
 *    Fits" between the hero and the shelf, so that overlap would bite into a
 *    white band — it reads as a misalignment rather than a dock.
 */
.iss-page .iss-uc-ctx { margin-top: 0; }

/*
 * 2. NO DOUBLE SEAM. §24a gives the shelf 30px of bottom margin on top of the
 *    following section's own top padding, which is tuned for the hero-docked
 *    case where the shelf is floating over the hero's edge. Sitting in normal
 *    flow it is just a gap, so the section below supplies the whole seam.
 */
.iss-page .iss-uc-ctx + .iss-section { padding-top: clamp(48px, 7vw, 88px); }
.iss-page .iss-uc-ctx { margin-bottom: 0; }

/* Anchored sections clear the docked shelf so a jump does not land with the
   heading underneath it. */
.iss-page .iss-uc-rel,
.iss-page .iss-uc-start,
.iss-page .iss-uc-explore,
.iss-page .iss-uc-foundation,
.iss-page .iss-uc-qad,
.iss-page .iss-uc-ai,
.iss-page .iss-uc-proof { scroll-margin-top: 128px; }

/* ============================================================
   §4  Start With the Process
   ============================================================ */

.iss-page .iss-uc-start { background: var(--iss-card); }
.iss-page .iss-uc-start-grid {
	display: grid;
	grid-template-columns: .86fr 1.14fr;
	gap: 50px;
	align-items: start;
}
.iss-page .iss-uc-start-statement {
	font-size: 24px;
	line-height: 1.25;
	letter-spacing: -.02em;
	color: var(--iss-ink);
	font-weight: 800;
	margin: 18px 0;
}

.iss-page .iss-uc-rule {
	border: 1px solid var(--iss-line-strong);
	background: var(--iss-bg);
	border-radius: var(--iss-r-lg);
	padding: 26px;
}
.iss-page .iss-uc-rule-head { font-size: 14px; font-weight: 900; color: var(--iss-blue-dark); margin: 0 0 14px; }
.iss-page .iss-uc-rule-lines { margin: 0; padding: 0; list-style: none; }
.iss-page .iss-uc-rule-lines li {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 20px;
	align-items: center;
	border-top: 1px solid var(--iss-line);
	padding: 14px 0;
}
.iss-page .iss-uc-rule-lines li:first-child { border-top: 0; padding-top: 2px; }
.iss-page .iss-uc-rule-lines strong { font-size: 15px; font-weight: 700; }
.iss-page .iss-uc-rule-lines span { font-size: 12px; font-weight: 800; color: var(--iss-muted); text-align: right; }
.iss-page .iss-uc-rule-foot {
	margin: 14px 0 0;
	padding-top: 15px;
	border-top: 1px solid var(--iss-line);
	font-size: 13px;
	color: var(--iss-muted);
}

/* ============================================================
   §5  Explore Representative Use Cases
   ============================================================ */

.iss-page .iss-uc-explore { background: var(--iss-bg); }

.iss-page .iss-uc-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 26px; }
.iss-page .iss-uc-filter {
	border: 1px solid var(--iss-line-strong);
	background: var(--iss-card);
	color: var(--iss-muted);
	padding: 9px 13px;
	border-radius: 999px;
	font-weight: 800;
	font-size: 12px;
	font-family: var(--iss-sans);
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.iss-page .iss-uc-filter:hover,
.iss-page .iss-uc-filter.is-active {
	background: var(--iss-navy);
	border-color: var(--iss-navy);
	color: #fff;
}
/* Selected state is not colour alone — see the same note on the Project
   Snapshots filters. */
.iss-page .iss-uc-filter[aria-pressed="true"] { box-shadow: 0 0 0 3px rgba(12, 115, 201, .18); }
.iss-page .iss-uc-filter:focus-visible { outline: 2px solid var(--iss-blue); outline-offset: 2px; }

.iss-page .iss-uc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.iss-page .iss-uc-card {
	display: flex;
	flex-direction: column;
	min-height: 285px;
	background: var(--iss-card);
	border: 1px solid var(--iss-line-strong);
	border-radius: var(--iss-r);
	padding: 22px;
	transition: transform .2s ease, border-color .2s ease;
}
.iss-page .iss-uc-card:hover { transform: translateY(-3px); border-color: var(--iss-blue-2); }
.iss-page .iss-uc-card[hidden] { display: none; }
.iss-page .iss-uc-card-top {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	align-items: flex-start;
	margin-bottom: 16px;
}
.iss-page .iss-uc-card-icon {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	background: var(--iss-bg-tint);
	color: var(--iss-blue);
	font-size: 15px;
	font-weight: 900;
	letter-spacing: -.02em;
}
.iss-page .iss-uc-card-pill {
	font-family: var(--iss-mono);
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	border: 1px solid var(--iss-line);
	color: var(--iss-muted);
	padding: 6px 8px;
	border-radius: 999px;
	text-align: center;
}
.iss-page .iss-uc-card h3 { font-size: 18px; line-height: 1.22; letter-spacing: -.02em; margin: 0 0 10px; }
.iss-page .iss-uc-card p { font-size: 14px; line-height: 1.55; margin: 0 0 18px; color: var(--iss-muted); }

.iss-page .iss-uc-card-link {
	margin-top: auto;
	color: var(--iss-blue-dark);
	font-weight: 900;
	font-size: 13px;
	display: inline-flex;
	gap: 7px;
	align-items: center;
}
.iss-page .iss-uc-card-link .iss-arw { transition: transform .2s ease; }
.iss-page .iss-uc-card:hover .iss-uc-card-link .iss-arw,
.iss-page .iss-uc-proof-card:hover .iss-uc-card-link .iss-arw { transform: translateX(3px); }

.iss-page .iss-uc-breadth {
	margin-top: 22px;
	border: 1px solid var(--iss-line-strong);
	background: var(--iss-bg-tint);
	border-radius: var(--iss-r);
	padding: 18px 20px;
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.iss-page .iss-uc-breadth strong { color: var(--iss-ink); font-size: 14px; }
.iss-page .iss-uc-breadth p { margin: 2px 0 0; font-size: 13px; color: var(--iss-muted); }

/* Filter result count for screen readers. Visually hidden, but not
   `display:none`, which would stop it being announced at all. */
.iss-page .iss-uc-status {
	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;
}

/* ============================================================
   §6  Built on the iApprove™ Platform — six disciplines
   ============================================================ */

/*
 * EVERY SECTION ON THIS PAGE THAT PAINTS ITS OWN BACKGROUND ALSO CARRIES
 * `.iss-bleed` IN THE TEMPLATE. The7 wraps our content in `.wf-wrap`, so a
 * background declared here stops at the content column and the band renders as
 * an inset panel with white rails down both sides — most visibly on this navy
 * one, which is what Danny reported on 2026-09-15, but equally true of the
 * white and tinted bands, where the rails are just harder to see.
 *
 * `.iss-bleed` (iss-global §3) is the site's own answer and is already used
 * this way on /about-iss-group/ and /solutions/. It is NOT restated here:
 * putting the geometry in this file would be a second copy of it, and its
 * companion rule — which lifts `.iss-page`'s `overflow-x` guard and moves the
 * page ground to a full-width layer — is keyed on `.iss-page:has(> .iss-bleed)`
 * and only fires for a DIRECT child of `.iss-page`. So the class belongs in the
 * markup, on the section, and nowhere else.
 */
.iss-page .iss-uc-foundation { background: var(--iss-navy); color: #fff; }
.iss-page .iss-uc-foundation h2 { color: #fff; }
/*
 * Both new pages use `.iss-kicker`, the BARE mono label, not `.iss-eyebrow`,
 * which the design system draws as a tinted pill on light sections. Both Clean
 * HTMLs draw a bare label with a leading dash on every section, light and dark
 * — `.iss-kicker` is that, exactly, and the dash already follows the label's own
 * colour site-wide (iss-global §4). Only the colour on dark grounds is set here.
 */
.iss-page .iss-uc-foundation .iss-kicker { color: var(--iss-cyan); }
.iss-page .iss-uc-foundation .iss-lead { color: var(--iss-sky); }

.iss-page .iss-uc-disciplines {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin: 34px 0 0;
	padding: 0;
	list-style: none;
}
.iss-page .iss-uc-disciplines li {
	border: 1px solid var(--iss-navy-3);
	border-radius: var(--iss-r);
	padding: 22px;
	background: var(--iss-navy-2);
}
.iss-page .iss-uc-disc-n {
	display: block;
	font: 800 10px var(--iss-mono);
	color: var(--iss-cyan);
	letter-spacing: .1em;
	margin-bottom: 13px;
}
.iss-page .iss-uc-disciplines h3 { color: #fff; font-size: 18px; margin: 0 0 10px; }
.iss-page .iss-uc-disciplines p { color: var(--iss-sky); font-size: 13px; margin: 0; line-height: 1.5; }

.iss-page .iss-uc-foundation-foot {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 16px;
	align-items: center;
	margin-top: 22px;
	padding: 18px 20px;
	border: 1px solid var(--iss-navy-3);
	border-radius: var(--iss-r);
	background: var(--iss-navy-3);
}
.iss-page .iss-uc-foundation-mark { font-weight: 900; color: #fff; font-size: 16px; margin: 0; }
.iss-page .iss-uc-foundation-foot p { margin: 0; color: var(--iss-sky); font-size: 13px; }

/* ============================================================
   §7  Real-Time QAD Integration
   ============================================================ */

.iss-page .iss-uc-qad { background: var(--iss-card); }
.iss-page .iss-uc-qad-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; }

.iss-page .iss-uc-qad-points { display: grid; gap: 12px; margin: 25px 0 0; padding: 0; list-style: none; }
.iss-page .iss-uc-qad-points > li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; }
.iss-page .iss-uc-qad-check {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--iss-green);
	color: #fff;
	display: grid;
	place-items: center;
	margin-top: 1px;
}
.iss-page .iss-uc-qad-check svg { width: 12px; height: 12px; }
.iss-page .iss-uc-qad-points strong { font-size: 14px; display: block; margin-bottom: 2px; }
.iss-page .iss-uc-qad-points strong + span { display: block; font-size: 13px; color: var(--iss-muted); line-height: 1.5; }

.iss-page .iss-uc-qad-visual {
	border: 1px solid var(--iss-line-strong);
	border-radius: var(--iss-r-lg);
	background: var(--iss-bg);
	padding: 26px;
}
.iss-page .iss-uc-qad-node {
	background: var(--iss-navy);
	border-radius: 18px;
	color: #fff;
	padding: 22px;
	text-align: center;
	margin: 0 auto 16px;
	max-width: 250px;
}
.iss-page .iss-uc-qad-node small {
	display: block;
	color: var(--iss-cyan);
	font: 800 10px var(--iss-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-bottom: 5px;
}
.iss-page .iss-uc-qad-node strong { font-size: 26px; letter-spacing: -.03em; }
.iss-page .iss-uc-qad-route {
	display: grid;
	grid-template-columns: 1fr 34px 1fr;
	gap: 10px;
	align-items: stretch;
}
.iss-page .iss-uc-qad-route + .iss-uc-qad-route { margin-top: 10px; }
.iss-page .iss-uc-qad-step {
	border: 1px solid var(--iss-line);
	background: var(--iss-card);
	border-radius: 14px;
	padding: 14px;
	text-align: center;
	font-size: 12px;
	font-weight: 800;
}
.iss-page .iss-uc-qad-arw { display: grid; place-items: center; color: var(--iss-blue); font-weight: 900; font-size: 20px; }

/* ============================================================
   §8  iAssist™ AI layer
   ============================================================ */

.iss-page .iss-uc-ai { background: var(--iss-bg-tint); }
.iss-page .iss-uc-ai-panel {
	border: 1px solid var(--iss-line-strong);
	background: var(--iss-card);
	border-radius: var(--iss-r-lg);
	overflow: hidden;
	display: grid;
	grid-template-columns: .85fr 1.15fr;
}
.iss-page .iss-uc-ai-left {
	background: var(--iss-navy-2);
	color: #fff;
	padding: 34px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 350px;
}
.iss-page .iss-uc-ai-left .iss-kicker { color: var(--iss-cyan); margin-bottom: 14px; }
.iss-page .iss-uc-ai-left h2 { font-size: clamp(26px, 3vw, 34px); color: #fff; }
.iss-page .iss-uc-ai-left p { color: var(--iss-sky); font-size: 15px; }
.iss-page .iss-uc-ai-signature { margin-top: 20px; color: #fff; font-weight: 900; font-size: 14px; }

.iss-page .iss-uc-ai-right { padding: 32px; }
.iss-page .iss-uc-ai-right h3 { font-size: 21px; margin: 0 0 6px; }
.iss-page .iss-uc-ai-right > p { font-size: 14px; margin: 0 0 21px; color: var(--iss-muted); }
.iss-page .iss-uc-ai-caps {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 11px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.iss-page .iss-uc-ai-caps li {
	border: 1px solid var(--iss-line);
	background: var(--iss-bg);
	border-radius: 14px;
	padding: 14px;
}
.iss-page .iss-uc-ai-caps strong { font-size: 13px; display: block; margin-bottom: 3px; }
.iss-page .iss-uc-ai-caps span { font-size: 12px; color: var(--iss-muted); display: block; line-height: 1.45; }

/* ============================================================
   §9  Customer proof
   ============================================================ */

.iss-page .iss-uc-proof { background: var(--iss-card); }
.iss-page .iss-uc-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.iss-page .iss-uc-proof-card {
	border: 1px solid var(--iss-line-strong);
	border-radius: var(--iss-r);
	overflow: hidden;
	background: var(--iss-card);
	display: flex;
	flex-direction: column;
}
.iss-page .iss-uc-proof-head { background: var(--iss-navy); color: #fff; padding: 20px; }
.iss-page .iss-uc-proof-industry {
	margin: 0 0 8px;
	font: 800 9.5px var(--iss-mono);
	color: var(--iss-cyan);
	letter-spacing: .08em;
	text-transform: uppercase;
}
.iss-page .iss-uc-proof-head h3 { color: #fff; font-size: 20px; margin: 0; }
.iss-page .iss-uc-proof-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.iss-page .iss-uc-proof-body p { font-size: 13px; line-height: 1.55; color: var(--iss-muted); margin: 0 0 18px; }
.iss-page .iss-uc-proof-tags {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}
.iss-page .iss-uc-proof-tags li {
	font-size: 10px;
	font-weight: 800;
	color: var(--iss-blue-dark);
	background: var(--iss-bg-tint);
	border: 1px solid var(--iss-line);
	border-radius: 999px;
	padding: 5px 7px;
}
.iss-page .iss-uc-proof-body .iss-uc-card-link { margin-top: auto; }
.iss-page .iss-uc-proof-actions { margin-top: 24px; text-align: center; }
.iss-page .iss-uc-proof-actions .iss-btn-row { justify-content: center; }

/* ============================================================
   §10  Responsive
   ============================================================ */

@media (max-width: 980px) {
	.iss-page .iss-uc-hero-grid,
	.iss-page .iss-uc-start-grid,
	.iss-page .iss-uc-qad-grid,
	.iss-page .iss-uc-ai-panel,
	.iss-page .iss-uc-rel-intro { grid-template-columns: 1fr; }

	.iss-page .iss-uc-rel-flow { grid-template-columns: 1fr; }
	.iss-page .iss-uc-rel-arw { transform: rotate(90deg); min-height: 20px; }

	.iss-page .iss-uc-grid,
	.iss-page .iss-uc-disciplines,
	.iss-page .iss-uc-proof-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
	.iss-page .iss-uc-rel { padding: 28px 0; }
	.iss-page .iss-uc-rel-card { min-height: 0; }

	.iss-page .iss-uc-grid,
	.iss-page .iss-uc-disciplines,
	.iss-page .iss-uc-proof-grid,
	.iss-page .iss-uc-ai-caps { grid-template-columns: 1fr; }

	.iss-page .iss-uc-card { min-height: 0; }
	.iss-page .iss-uc-qad-route { grid-template-columns: 1fr; }
	.iss-page .iss-uc-qad-arw { transform: rotate(90deg); }
	.iss-page .iss-uc-ai-left,
	.iss-page .iss-uc-ai-right { padding: 26px; }
	.iss-page .iss-uc-ai-left { min-height: 0; }
	.iss-page .iss-uc-foundation-foot { grid-template-columns: 1fr; }

	/* The qualification row's descriptor stops being a right-aligned column and
	   becomes a line under its question — at this width the two-column grid
	   squeezes both to two or three words a line. */
	.iss-page .iss-uc-rule-lines li { grid-template-columns: 1fr; gap: 4px; }
	.iss-page .iss-uc-rule-lines span { text-align: left; }
}