/**
 * LTC Programmes — visual components for the hub, category and
 * programme-page templates (visual design pilot, 5 pages only).
 *
 * Reuses the existing design tokens, .ltc-container/.ltc-section
 * system, .ltc-btn, .ltc-eyebrow, .ltc-h2/h3, and the already-approved
 * .ltc-capability-card grid directly — this file only adds the
 * handful of genuinely new components the programmes pages need:
 * breadcrumbs, problem-explorer cards, tier pills, programme cards,
 * the integrated search/finder, and hero layouts for the category and
 * programme templates. No motion classes are used here — the motion
 * pass has not started for this section yet.
 *
 * @package LTC_Child
 */

/* ---- Breadcrumbs ---- */

.ltc-breadcrumbs {
	margin-bottom: var(--ltc-space-6);
}

.ltc-breadcrumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ltc-space-2);
	padding: 0;
	margin: 0;
	font-size: 13px;
	color: var(--ltc-text-muted);
}

.ltc-breadcrumbs li:not(:last-child)::after {
	content: '/';
	margin-left: var(--ltc-space-2);
	color: var(--ltc-stone-200);
}

.ltc-breadcrumbs a {
	color: var(--ltc-teal-700);
	text-decoration: none;
}

.ltc-breadcrumbs a:hover,
.ltc-breadcrumbs a:focus-visible {
	text-decoration: underline;
}

.ltc-section--dark .ltc-breadcrumbs a {
	color: var(--ltc-teal-500);
}

.ltc-section--dark .ltc-breadcrumbs {
	color: rgba(247, 245, 240, 0.66);
}

/* .ltc-breadcrumbs ol sets its own explicit (--ltc-text-muted, a
   light-background colour) — an element's own explicit colour always
   wins over an inherited value from an ancestor, regardless of the
   ancestor rule's specificity, so the override above never reached the
   <ol>/<li> text (only the <a> override worked, via its own explicit
   rule). Confirmed live: 2.95:1 contrast on the dark hero, failing
   WCAG AA. Target ol/li directly instead of relying on inheritance. */
.ltc-section--dark .ltc-breadcrumbs ol,
.ltc-section--dark .ltc-breadcrumbs li {
	color: rgba(247, 245, 240, 0.66);
}

/* ---- Tier pills (restrained — small pill/border, not a full-width bar) ----
   Four structurally distinct treatments, not four colour variants of the
   same shape — each pair differs by fill-vs-outline / border presence as
   well as colour, so tier is never distinguishable by colour alone:
     Core          solid teal fill, no border      (standard, confident)
     Foundational  outline only, no fill            (lighter, entry point)
     Advanced      solid dark fill + teal ring      (deeper engagement)
     Flagship      tinted fill + amber border       (retained from before)
   All colour pairings reuse combinations already proven elsewhere in
   this codebase (teal-700+white is the existing .ltc-btn--primary
   pairing; teal-700-on-light is the existing link colour) rather than
   introducing new untested contrast pairs. */

.ltc-tier-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: var(--ltc-weight-subhead);
	letter-spacing: 0.02em;
	padding: 6px 13px;
	border-radius: var(--ltc-radius-pill);
	border: 1.5px solid transparent;
	line-height: 1.2;
}

.ltc-tier-pill--core {
	background: var(--ltc-teal-700);
	color: var(--ltc-white);
}

.ltc-tier-pill--foundational {
	background: transparent;
	color: var(--ltc-teal-700);
	border-color: var(--ltc-teal-700);
}

.ltc-section--dark .ltc-tier-pill--foundational {
	color: var(--ltc-white);
	border-color: rgba(247, 245, 240, 0.66);
}

.ltc-tier-pill--advanced {
	background: var(--ltc-ink-900);
	color: var(--ltc-white);
	border-color: var(--ltc-teal-500);
}

/* ink-900 (#0B2528) is barely distinguishable from the dark hero
   background (ink-950, #06191B) — confirmed live, the fill nearly
   vanished, leaving only the border ring visible and making Advanced
   read as an outline pill indistinguishable from Foundational on
   programme hero sections. A lighter ink keeps the "solid fill, not an
   outline" identity visible without reusing Core's teal-700 (which
   would create a different collision on dark backgrounds). */
.ltc-section--dark .ltc-tier-pill--advanced {
	background: var(--ltc-ink-700);
}

.ltc-tier-pill--flagship {
	background: rgba(244, 182, 61, 0.18);
	color: var(--ltc-ink-950);
	border-color: var(--ltc-amber);
}

.ltc-section--dark .ltc-tier-pill--flagship {
	color: var(--ltc-white);
}

/* ---- Section intro (eyebrow + heading + lede, shared shape) ---- */

.ltc-section-intro {
	max-width: 60ch;
	margin-bottom: var(--ltc-space-8);
}

.ltc-section-intro__lede {
	margin-top: var(--ltc-space-3);
	color: var(--ltc-text-muted);
	font-size: var(--ltc-type-body-lg);
	line-height: var(--ltc-leading-body-lg);
}

.ltc-section--dark .ltc-section-intro__lede {
	color: rgba(247, 245, 240, 0.78);
}

/* ---- Hub hero ---- */

.ltc-programmes-hero {
	padding-block: var(--ltc-space-10);
}

/* Same asymmetric proportion as the homepage's .ltc-hero__grid — not a
   copy-paste, a deliberate reuse of the same editorial grid language so
   this hero reads with equivalent visual authority, not as a secondary
   internal page. Right column intentionally has no content yet (see
   template comment); align-items: start (not center) so the content
   anchors to the top of the section like the homepage hero rather than
   floating mid-section once the section's height is set by its own
   padding rather than a tall visual filling the right column. */
.ltc-programmes-hero__grid {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: var(--ltc-space-9);
	align-items: start;
}

.ltc-programmes-hero__content {
	max-width: 640px;
}

.ltc-programmes-hero h1 {
	margin-top: var(--ltc-space-3);
	font-size: var(--ltc-type-h1);
	line-height: var(--ltc-leading-h1);
	letter-spacing: var(--ltc-tracking-display);
	max-width: 20ch;
	/* Explicit, not inherited: a more specific rule elsewhere (theme
	   or Blocksy base heading colour) was found live to win over
	   .ltc-section--dark's inherited paper-50 colour, leaving the H1
	   rendering ink-950-on-ink-950 (invisible). Same pattern the
	   homepage's own hero already uses (.ltc-hero__headline), applied
	   here too rather than relying on inheritance a second time. */
	color: var(--ltc-white);
}

.ltc-programmes-hero p {
	margin-top: var(--ltc-space-5);
	font-size: var(--ltc-type-body-lg);
	line-height: var(--ltc-leading-body-lg);
	color: rgba(247, 245, 240, 0.82);
	max-width: 56ch;
}

.ltc-programmes-hero__ctas {
	margin-top: var(--ltc-space-7);
	display: flex;
	flex-wrap: wrap;
	gap: var(--ltc-space-4);
	align-items: center;
}

.ltc-programmes-hero__secondary-link {
	color: var(--ltc-white);
	text-decoration: none;
	font-weight: var(--ltc-weight-subhead);
	display: inline-flex;
	align-items: center;
	gap: var(--ltc-space-2);
	border-bottom: 1px solid rgba(247, 245, 240, 0.3);
	padding-bottom: 2px;
}

.ltc-programmes-hero__secondary-link:hover,
.ltc-programmes-hero__secondary-link:focus-visible {
	border-bottom-color: var(--ltc-teal-500);
}

/* ---- Two discovery routes ---- */

.ltc-route-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ltc-grid-gap);
}

.ltc-route-card {
	display: flex;
	flex-direction: column;
	padding: var(--ltc-space-7);
	border-radius: var(--ltc-radius-card);
	background: var(--ltc-white);
	border: 1px solid var(--ltc-stone-200);
}

.ltc-route-card__label {
	font-size: var(--ltc-type-eyebrow);
	text-transform: uppercase;
	letter-spacing: var(--ltc-tracking-eyebrow);
	color: var(--ltc-teal-700);
	font-weight: var(--ltc-weight-label);
}

.ltc-route-card h3 {
	margin-top: var(--ltc-space-3);
	font-size: var(--ltc-type-h3);
	font-weight: var(--ltc-weight-heading);
	line-height: 1.2;
}

.ltc-route-card p {
	margin-top: var(--ltc-space-3);
	color: var(--ltc-text-muted);
	line-height: var(--ltc-leading-body);
	flex: 1;
}

.ltc-route-card .ltc-btn {
	margin-top: var(--ltc-space-6);
	align-self: flex-start;
}

/* ---- Programme search / finder ---- */

.ltc-finder {
	background: var(--ltc-white);
	border: 1px solid var(--ltc-stone-200);
	border-radius: var(--ltc-radius-card);
	padding: var(--ltc-space-7);
	box-shadow: var(--ltc-shadow-elevated);
}

.ltc-finder__form {
	display: flex;
	gap: var(--ltc-space-3);
	flex-wrap: wrap;
}

.ltc-finder__input-wrap {
	position: relative;
	flex: 1 1 320px;
}

.ltc-finder__input-wrap svg {
	position: absolute;
	left: var(--ltc-space-4);
	top: 50%;
	transform: translateY(-50%);
	color: var(--ltc-text-muted);
	pointer-events: none;
}

/*
 * Root cause of the awkward icon (confirmed via the live matched-rule
 * list, not assumed): Blocksy's own main.min.css ships
 * `select, textarea, input:is([type="search"], ...)` with
 * height:40px / padding:0 15px, at specificity (0,1,1) — one point
 * higher than a plain `.ltc-finder__input` class selector (0,1,0), so
 * it silently won regardless of source order. The intended 54px height
 * and 80px left padding (room for the icon) never actually applied;
 * the real rendered input was a 40px-tall field with only 15px of left
 * padding, so the icon sat almost on top of the entered text. Same
 * fix pattern as the search-input focus-ring bug: match Blocksy's own
 * attribute selector to exceed its specificity instead of fighting it
 * with !important.
 */
input[type='search'].ltc-finder__input {
	width: 100%;
	height: 54px;
	padding: 0 var(--ltc-space-4) 0 44px;
	border: 1.5px solid var(--ltc-stone-200);
	border-radius: var(--ltc-radius-button);
	font-family: var(--ltc-font-sans);
	font-size: var(--ltc-type-body);
	color: var(--ltc-ink-950);
	background: var(--ltc-paper-50);
}

/*
 * Root-caused (not a guess): Blocksy's own main.min.css ships
 * `input:is([type="search"], [type="text"], ...):focus { outline: none; }`
 * — using :focus, not :focus-visible, so it fires on every focus type —
 * at specificity (0,2,1) (element + attribute-selector + pseudo-class).
 * That beats both the site-wide `.ltc-foundation :focus-visible` rule
 * (ltc-base.css) AND a plain `.ltc-finder__input:focus-visible` rule
 * (0,2,0) here, silently removing the visible focus ring for keyboard
 * users on this field — confirmed live via the full matched-rule list,
 * not assumed. Per the standing "avoid direct modifications to the
 * Blocksy parent theme" rule, this is countered from the child theme
 * instead: match Blocksy's own attribute selector to reach equal
 * specificity, then add the class + :focus-visible to exceed it. Border/
 * background are consolidated into this same high-specificity selector
 * too, rather than split across a lower-specificity rule that could
 * silently lose to Blocksy the same way.
 */
input[type='search'].ltc-finder__input:focus-visible {
	border-color: var(--ltc-teal-500);
	background: var(--ltc-white);
	outline: 2px solid var(--ltc-teal-600);
	outline-offset: 2px;
}

.ltc-finder__results {
	margin-top: var(--ltc-space-6);
	padding-top: var(--ltc-space-6);
	border-top: 1px solid var(--ltc-stone-200);
}

.ltc-finder__results-meta {
	font-size: 14px;
	color: var(--ltc-text-muted);
	margin-bottom: var(--ltc-space-4);
}

.ltc-finder__result-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	/* Same underlying gotcha as flexbox min-width:0: a grid track with no
	   explicit template defaults to auto-sizing (max-content) rather than
	   the container's own width. Confirmed live: rows measured 540px
	   wide inside a 252-390px container, invisibly clipped by an
	   ancestor's overflow rather than actually fitting. minmax(0, 1fr)
	   forces the single implicit column to the container's real width. */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ltc-space-3);
}

.ltc-finder__result-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ltc-space-4);
	padding: var(--ltc-space-4) var(--ltc-space-5);
	border-radius: var(--ltc-radius-button);
	background: var(--ltc-paper-100);
	color: var(--ltc-ink-950);
	text-decoration: none;
	font-weight: var(--ltc-weight-subhead);
}

.ltc-finder__result-list a:hover,
.ltc-finder__result-list a:focus-visible {
	background: var(--ltc-teal-100);
	color: var(--ltc-teal-700);
}

.ltc-finder__empty {
	color: var(--ltc-text-muted);
}

/* ---- Search result type distinction (capability area vs programme) ---- */

.ltc-finder__result-text {
	display: flex;
	align-items: center;
	gap: var(--ltc-space-4);
	min-width: 0;
}

.ltc-finder__result-type {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: var(--ltc-weight-label);
	text-transform: uppercase;
	letter-spacing: var(--ltc-tracking-eyebrow);
	padding: 3px 9px;
	border-radius: var(--ltc-radius-pill);
}

.ltc-finder__result-type--category {
	background: var(--ltc-teal-100);
	color: var(--ltc-teal-700);
}

.ltc-finder__result-type--programme {
	background: var(--ltc-paper-50);
	color: var(--ltc-text-muted);
	border: 1px solid var(--ltc-stone-200);
}

.ltc-finder__result-title {
	/* flex:1 1 auto + min-width:0 is required for text-overflow:ellipsis
	   to actually engage on a flex child — without min-width:0 a flex
	   item defaults to min-width:auto (its content's natural width) and
	   refuses to shrink, so the row silently grows past its container
	   instead of truncating. Confirmed live at 390px: rows measured
	   540px wide with zero visible ellipsis, clipped only by a parent's
	   overflow:hidden rather than actually truncating the text. */
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---- Business-problem explorer cards ---- */

.ltc-problem-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ltc-grid-gap);
}

.ltc-problem-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--ltc-space-6);
	background: var(--ltc-white);
	border: 1px solid var(--ltc-stone-200);
	border-radius: var(--ltc-radius-card);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--ltc-duration-fast) var(--ltc-ease),
		transform var(--ltc-duration-fast) var(--ltc-ease),
		box-shadow var(--ltc-duration-fast) var(--ltc-ease);
}

.ltc-problem-card:hover,
.ltc-problem-card:focus-visible {
	border-color: var(--ltc-amber);
	transform: translateY(calc(-1 * var(--ltc-hover-lift)));
	box-shadow: 0 10px 24px -18px rgba(17, 24, 39, 0.35);
}

.ltc-problem-card:hover {
	/* Mouse hover only — must not also match :focus-visible, or keyboard
	   users lose their focus ring entirely (found live: the previous
	   version of this rule combined :hover and :focus-visible into one
	   block with outline:none, silently suppressing keyboard focus on
	   every business-problem card on the hub). */
	outline: none;
}

.ltc-problem-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--ltc-teal-100);
	color: var(--ltc-teal-700);
	flex: 0 0 auto;
}

.ltc-problem-card__icon svg {
	width: 22px;
	height: 22px;
}

.ltc-problem-card__title {
	margin-top: var(--ltc-space-4);
	font-size: var(--ltc-type-h4);
	font-weight: var(--ltc-weight-heading);
	line-height: 1.3;
}

.ltc-problem-card__categories {
	margin-top: var(--ltc-space-2);
	font-size: 13px;
	color: var(--ltc-text-muted);
	flex: 1;
}

.ltc-problem-card__cta {
	margin-top: var(--ltc-space-5);
	display: inline-flex;
	align-items: center;
	gap: var(--ltc-space-2);
	font-size: 14px;
	font-weight: var(--ltc-weight-subhead);
	color: var(--ltc-ink-950);
}

.ltc-problem-card__cta-arrow {
	display: inline-block;
	transition: transform var(--ltc-duration-fast) var(--ltc-ease);
}

.ltc-problem-card:hover .ltc-problem-card__cta-arrow,
.ltc-problem-card:focus-visible .ltc-problem-card__cta-arrow {
	transform: translate(3px, -3px);
}

/* ---- Custom-intervention section ---- */

.ltc-custom-intervention {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: var(--ltc-space-9);
	align-items: center;
}

.ltc-custom-intervention h2 {
	max-width: 16ch;
}

.ltc-custom-intervention p {
	margin-top: var(--ltc-space-4);
	max-width: 56ch;
	line-height: var(--ltc-leading-body-lg);
}

.ltc-custom-intervention__panel {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(247, 245, 240, 0.16);
	border-radius: var(--ltc-radius-card);
	padding: var(--ltc-space-6);
}

.ltc-custom-intervention__panel ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--ltc-space-3);
}

.ltc-custom-intervention__panel li {
	display: flex;
	align-items: baseline;
	gap: var(--ltc-space-3);
	color: rgba(247, 245, 240, 0.88);
}

.ltc-custom-intervention__panel li::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ltc-amber);
	flex: 0 0 auto;
	transform: translateY(-2px);
}

.ltc-custom-intervention .ltc-btn {
	margin-top: var(--ltc-space-6);
}

/* ---- Category hero (two-column: text + image) ---- */

.ltc-category-hero {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--ltc-space-9);
	align-items: center;
}

.ltc-category-hero__stats {
	margin-top: var(--ltc-space-6);
	display: flex;
	gap: var(--ltc-space-7);
}

.ltc-category-hero__stat-value {
	font-size: var(--ltc-type-h3);
	font-weight: var(--ltc-weight-numeral);
	color: var(--ltc-ink-950);
}

.ltc-category-hero__stat-label {
	margin-top: 2px;
	font-size: 13px;
	color: var(--ltc-text-muted);
}

.ltc-category-hero__ctas {
	margin-top: var(--ltc-space-7);
}

.ltc-category-hero__image {
	border-radius: var(--ltc-radius-image);
	overflow: hidden;
	background: var(--ltc-mist-surface);
	aspect-ratio: 4 / 3;
}

.ltc-category-hero__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Clearly-marked neutral placeholder (only used when no verified image
   exists for a category) — a plain, labelled block, never a broken
   image icon. */
.ltc-category-hero__image--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ltc-text-muted);
	font-size: 13px;
	text-align: center;
	padding: var(--ltc-space-6);
	border: 1px dashed var(--ltc-stone-200);
}

/* ---- In-page nav ---- */

.ltc-inpage-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ltc-space-6);
	padding-block: var(--ltc-space-4);
	border-block: 1px solid var(--ltc-stone-200);
}

.ltc-inpage-nav a {
	font-size: 14px;
	font-weight: var(--ltc-weight-subhead);
	color: var(--ltc-text-muted);
	text-decoration: none;
}

.ltc-inpage-nav a:hover,
.ltc-inpage-nav a:focus-visible {
	color: var(--ltc-teal-700);
}

/* ---- Programme-type legend (category page) ---- */

.ltc-type-legend {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--ltc-space-6);
}

.ltc-type-legend__item p {
	margin-top: var(--ltc-space-2);
	color: var(--ltc-text-muted);
	font-size: 14px;
	line-height: var(--ltc-leading-body);
}

/* ---- Tier legend, collapsed by default (reduced-prominence pass) ----
   Deliberately lightweight: small text, no card chrome, no shadow — a
   footnote-level disclosure, not a competing section. Native <details>
   so it needs no JS and is keyboard-operable out of the box. */

.ltc-tier-legend-toggle {
	margin-bottom: var(--ltc-space-7);
	padding-bottom: var(--ltc-space-2);
	border-bottom: 1px solid var(--ltc-stone-200);
}

.ltc-tier-legend-toggle summary {
	cursor: pointer;
	font-size: 13px;
	font-weight: var(--ltc-weight-label);
	color: var(--ltc-text-muted);
	padding: var(--ltc-space-2) 0;
	list-style: none;
	display: flex;
	align-items: center;
	gap: var(--ltc-space-2);
}

.ltc-tier-legend-toggle summary::-webkit-details-marker {
	display: none;
}

.ltc-tier-legend-toggle summary::before {
	content: '';
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg);
	transition: transform var(--ltc-duration-fast) var(--ltc-ease);
	flex: 0 0 auto;
}

.ltc-tier-legend-toggle[open] summary::before {
	transform: rotate(45deg);
}

.ltc-tier-legend-toggle summary:hover,
.ltc-tier-legend-toggle summary:focus-visible {
	color: var(--ltc-teal-700);
}

.ltc-tier-legend-toggle__body {
	padding-top: var(--ltc-space-4);
}

.ltc-type-legend--compact {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--ltc-space-4);
}

.ltc-type-legend--compact .ltc-tier-pill {
	font-size: 11px;
	padding: 3px 10px;
}

.ltc-type-legend--compact .ltc-type-legend__item p {
	font-size: 13px;
	margin-top: var(--ltc-space-1);
}

/* ---- Category overview two-column ---- */

.ltc-overview-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ltc-space-8);
}

.ltc-overview-grid h3 {
	font-size: var(--ltc-type-h4);
	font-weight: var(--ltc-weight-heading);
	margin-bottom: var(--ltc-space-3);
}

.ltc-overview-grid ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--ltc-space-3);
}

.ltc-overview-grid li {
	padding-left: var(--ltc-space-5);
	position: relative;
	color: var(--ltc-text-muted);
	line-height: var(--ltc-leading-body);
}

.ltc-overview-grid li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ltc-teal-500);
}

/* ---- Programme card grid (category page) ---- */

.ltc-programme-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ltc-grid-gap);
}

/* Orphan-card rule — generic, count-agnostic. Categories range from
   ~4-9 real programmes, so a lone final card in the last row is a
   recurring, not one-off, layout case. When the grid's last child also
   starts a fresh row (its 1-based index is 3n+1 — e.g. totals of 4, 7,
   10...), centre it under the grid instead of leaving it stranded at
   the left edge. Two-card final rows are left alone — already visually
   balanced, not an orphan. Responsive column-count changes (see the
   1023px/767px overrides below) each reset and redefine this so it
   never mis-fires once the grid reflows to 2 or 1 columns. */
.ltc-programme-grid > :last-child:nth-child(3n+1) {
	grid-column: 2;
}

/* Orphan-rule breakpoints deliberately match ltc-responsive.css's own
   .ltc-programme-grid column-count thresholds (1199px -> 2 columns,
   899px -> 1 column — see ltc-responsive.css), NOT this file's usual
   1023px/767px pattern. Using 1023/767 here left a dead zone
   (1024-1199px, where the grid was already 2 columns but this rule
   hadn't switched over) and a mismatched zone (767-899px, where the
   grid was already 1 column but the 2-column centring rule was still
   applying) — confirmed live. */
@media (max-width: 1199px) {
	.ltc-programme-grid > :last-child:nth-child(3n+1) {
		grid-column: auto;
	}

	.ltc-programme-grid > :last-child:nth-child(2n+1) {
		grid-column: 1 / -1;
		max-width: calc(50% - (var(--ltc-grid-gap-tablet) / 2));
		margin-inline: auto;
	}
}

/* max-width:1199px is still simultaneously true down here (media-query
   ranges overlap, they don't hand off), and that block's selector
   (:last-child:nth-child(2n+1)) is MORE specific than a plain
   :last-child — so a same-specificity mirror is needed to actually win
   the cascade and reset every property it set, not just the ones that
   happened not to collide. */
@media (max-width: 899px) {
	.ltc-programme-grid > :last-child,
	.ltc-programme-grid > :last-child:nth-child(2n+1) {
		grid-column: auto;
		max-width: none;
		margin-inline: 0;
	}

	/* .ltc-section-intro's fixed 64px margin-bottom (unchanged at every
	   width) reads as proportionate under a large desktop H2, but on
	   mobile — stacked on top of the section's own 64px top padding —
	   it puts ~128px of blank space between a section's heading and
	   whatever comes next (confirmed live: the "Choose a programme."
	   heading on a capability page, and the equivalent programme grid
	   below it). Shared across every section using .ltc-section-intro
	   (hub, category, category-deep, single programme), not a
	   one-page fix. */
	.ltc-section-intro {
		margin-bottom: var(--ltc-space-6);
	}
}

.ltc-programme-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--ltc-space-6);
	background: var(--ltc-white);
	border: 1px solid var(--ltc-stone-200);
	border-radius: var(--ltc-radius-card);
	transition: border-color var(--ltc-duration-fast) var(--ltc-ease),
		transform var(--ltc-duration-fast) var(--ltc-ease),
		box-shadow var(--ltc-duration-fast) var(--ltc-ease);
}

.ltc-programme-card--pending {
	background: var(--ltc-paper-100);
}

.ltc-programme-card:not(.ltc-programme-card--pending):hover,
.ltc-programme-card:not(.ltc-programme-card--pending):focus-within {
	/* Amber hover/focus accent, matching the homepage's own
	   .ltc-capability-card-link pattern (ltc-home.css) — amber is
	   reserved for interactive states, never a resting/background
	   colour, and this card previously used teal here instead,
	   inconsistent with .ltc-problem-card's amber hover already in
	   this same file. Fixed so amber reads as one restrained,
	   site-wide "you can act on this" signal, not a Flagship-tier
	   colour by another name. */
	border-color: var(--ltc-amber);
	transform: translateY(calc(-1 * var(--ltc-hover-lift)));
	box-shadow: 0 10px 24px -18px rgba(17, 24, 39, 0.35);
}

.ltc-programme-card__title {
	margin-top: var(--ltc-space-4);
	font-size: var(--ltc-type-h4);
	font-weight: var(--ltc-weight-heading);
	line-height: 1.3;
}

.ltc-programme-card__desc {
	margin-top: var(--ltc-space-2);
	color: var(--ltc-text-muted);
	font-size: 14px;
	line-height: var(--ltc-leading-body);
	flex: 1;
}

.ltc-programme-card__meta {
	margin-top: var(--ltc-space-3);
	font-size: 12px;
	color: var(--ltc-text-muted);
}

.ltc-programme-card__cta {
	margin-top: var(--ltc-space-5);
	display: inline-flex;
	align-items: center;
	gap: var(--ltc-space-2);
	font-size: 14px;
	font-weight: var(--ltc-weight-subhead);
	color: var(--ltc-teal-700);
	text-decoration: none;
}

.ltc-programme-card a.ltc-programme-card__cta:hover,
.ltc-programme-card a.ltc-programme-card__cta:focus-visible {
	text-decoration: underline;
}

.ltc-programme-card__cta span[aria-hidden] {
	display: inline-flex;
	transition: transform var(--ltc-duration-fast) var(--ltc-ease);
}

.ltc-programme-card a.ltc-programme-card__cta:hover span[aria-hidden],
.ltc-programme-card a.ltc-programme-card__cta:focus-visible span[aria-hidden] {
	transform: translateX(3px);
}

/* ---- Contact page enquiry-context banner ----
   Page 43 otherwise keeps its untouched legacy template; this is the
   one deliberately-styled element injected via the_content when a
   visitor arrives from a programme page's CTA. */

.ltc-enquiry-context {
	max-width: 640px;
	margin: 0 0 var(--ltc-space-7);
	padding: var(--ltc-space-6) var(--ltc-space-7);
	background: var(--ltc-paper-100);
	border-left: 3px solid var(--ltc-teal-500);
	border-radius: var(--ltc-radius-card);
}

.ltc-enquiry-context__eyebrow {
	display: block;
	font-size: var(--ltc-type-eyebrow);
	text-transform: uppercase;
	letter-spacing: var(--ltc-tracking-eyebrow);
	color: var(--ltc-teal-700);
	font-weight: var(--ltc-weight-label);
}

.ltc-enquiry-context__programme {
	margin-top: var(--ltc-space-2);
	font-size: var(--ltc-type-h3);
	font-weight: var(--ltc-weight-heading);
	line-height: 1.25;
	color: var(--ltc-ink-950);
}

.ltc-enquiry-context__category {
	margin-top: var(--ltc-space-1);
	font-size: 13px;
	color: var(--ltc-text-muted);
}

.ltc-enquiry-context__note {
	margin-top: var(--ltc-space-4);
	font-size: 14px;
	line-height: var(--ltc-leading-body);
	color: var(--ltc-ink-700);
}

/* ---- Hierarchical return navigation (programme page) ----
   Deliberately plain: a thin-bordered strip, not another card or dark
   section — this sits between "continue exploring" (related programmes
   above) and "enquire" (dark CTA below) and must read as a quiet exit
   route, not compete with either. */

.ltc-programme-return-nav {
	padding-block: var(--ltc-space-6);
	border-bottom: 1px solid var(--ltc-stone-200);
}

.ltc-programme-return-nav__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ltc-space-3) var(--ltc-space-6);
}

.ltc-programme-return-nav__back,
.ltc-programme-return-nav__all {
	display: inline-flex;
	align-items: center;
	gap: var(--ltc-space-2);
	font-size: 14px;
	font-weight: var(--ltc-weight-label);
	color: var(--ltc-ink-950);
	text-decoration: none;
}

.ltc-programme-return-nav__all {
	color: var(--ltc-teal-700);
	padding-left: var(--ltc-space-6);
	border-left: 1px solid var(--ltc-stone-200);
}

.ltc-programme-return-nav__back:hover,
.ltc-programme-return-nav__back:focus-visible,
.ltc-programme-return-nav__all:hover,
.ltc-programme-return-nav__all:focus-visible {
	color: var(--ltc-teal-700);
	text-decoration: underline;
}

@media (max-width: 480px) {
	.ltc-programme-return-nav__all {
		padding-left: 0;
		border-left: none;
	}
}

.ltc-programme-card__pending-note {
	margin-top: var(--ltc-space-5);
	font-size: 13px;
	color: var(--ltc-text-muted);
	font-style: italic;
}

/* ---- Related programmes / categories pill list ---- */

.ltc-related-list {
	list-style: none;
	padding: 0;
	margin: var(--ltc-space-5) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ltc-space-3);
}

.ltc-related-list a {
	display: inline-flex;
	align-items: center;
	padding: var(--ltc-space-3) var(--ltc-space-5);
	border: 1px solid var(--ltc-stone-200);
	border-radius: var(--ltc-radius-pill);
	color: var(--ltc-ink-950);
	text-decoration: none;
	font-size: 14px;
	font-weight: var(--ltc-weight-label);
}

.ltc-related-list a:hover,
.ltc-related-list a:focus-visible {
	border-color: var(--ltc-teal-500);
	color: var(--ltc-teal-700);
}

/* ---- Programme page hero ---- */

.ltc-programme-hero {
	max-width: 700px;
}

.ltc-programme-hero__meta {
	display: flex;
	align-items: center;
	gap: var(--ltc-space-4);
	flex-wrap: wrap;
}

.ltc-programme-hero__category {
	font-size: 13px;
	color: rgba(247, 245, 240, 0.66);
}

.ltc-programme-hero h1 {
	margin-top: var(--ltc-space-4);
	max-width: 22ch;
	/* Explicit, not inherited — see .ltc-programmes-hero h1 above: a
	   more specific rule elsewhere was found live to beat
	   .ltc-section--dark's inherited colour. */
	color: var(--ltc-white);
}

.ltc-programme-hero__promise {
	margin-top: var(--ltc-space-4);
	font-size: var(--ltc-type-body-lg);
	/* var(--ltc-text-muted) is a light-background colour (~2.95:1 on
	   this dark hero — fails WCAG AA even at large text size). Use the
	   same on-dark text colour the hub hero already uses instead. */
	color: rgba(247, 245, 240, 0.82);
	max-width: 60ch;
	line-height: var(--ltc-leading-body-lg);
}

.ltc-programme-hero__audience {
	margin-top: var(--ltc-space-3);
	font-size: 14px;
	color: rgba(247, 245, 240, 0.66);
}

.ltc-programme-hero__ctas {
	margin-top: var(--ltc-space-7);
	display: flex;
	flex-wrap: wrap;
	gap: var(--ltc-space-4);
}

/* ---- Buyer-content two-column layout ---- */

.ltc-buyer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--ltc-space-9);
	align-items: start;
}

.ltc-buyer-section {
	margin-bottom: var(--ltc-space-8);
}

.ltc-buyer-section:last-child {
	margin-bottom: 0;
}

.ltc-buyer-section h2 {
	font-size: var(--ltc-type-h3);
	font-weight: var(--ltc-weight-heading);
	margin-bottom: var(--ltc-space-3);
}

.ltc-buyer-section ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--ltc-space-3);
}

.ltc-buyer-section li {
	padding-left: var(--ltc-space-5);
	position: relative;
	color: var(--ltc-ink-700);
	line-height: var(--ltc-leading-body);
}

.ltc-buyer-section li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ltc-teal-500);
}

.ltc-buyer-section__source-note {
	font-size: 13px;
	color: var(--ltc-text-muted);
	font-style: italic;
	margin-bottom: var(--ltc-space-3);
}

/* ---- Compact cross-link to category-level context (not a full
   duplicated section — see the content-differentiation pass) ---- */

.ltc-programme-context-note {
	margin-top: var(--ltc-space-2);
	padding: var(--ltc-space-4) var(--ltc-space-5);
	background: var(--ltc-paper-100);
	border-left: 3px solid var(--ltc-teal-100);
	border-radius: var(--ltc-radius-button);
	font-size: 14px;
	color: var(--ltc-text-muted);
	line-height: var(--ltc-leading-body);
}

.ltc-programme-context-note a {
	color: var(--ltc-teal-700);
	font-weight: var(--ltc-weight-label);
}

/* ---- Delivery snapshot sidebar card ---- */

.ltc-snapshot-card {
	position: sticky;
	top: var(--ltc-space-6);
	background: var(--ltc-paper-100);
	border-radius: var(--ltc-radius-card);
	padding: var(--ltc-space-6);
}

.ltc-snapshot-card h2 {
	font-size: var(--ltc-type-h4);
	font-weight: var(--ltc-weight-heading);
	margin-bottom: var(--ltc-space-5);
}

.ltc-snapshot-card dl {
	display: grid;
	gap: var(--ltc-space-4);
	margin: 0;
}

.ltc-snapshot-card dt {
	font-size: 12px;
	font-weight: var(--ltc-weight-subhead);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ltc-text-muted);
}

.ltc-snapshot-card dd {
	margin: 4px 0 0;
	color: var(--ltc-ink-950);
	font-weight: var(--ltc-weight-label);
}

.ltc-snapshot-card__cta {
	margin-top: var(--ltc-space-6);
	/* display: block (the previous value) drops out of the flex
	   formatting context .ltc-btn itself relies on for vertical
	   centring (display: inline-flex; align-items: center) — the
	   label/arrow rendered flush to the top of the 54px-tall button
	   instead of centred. flex keeps the same full-width block-level
	   sizing (and the same left-aligned label, .ltc-btn's own default
	   justify-content) while restoring that centring. */
	display: flex;
}

/* ---- Responsive ---- */

@media (max-width: 1023px) {
	.ltc-route-grid,
	.ltc-problem-grid,
	.ltc-programme-grid,
	.ltc-overview-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ltc-custom-intervention,
	.ltc-category-hero,
	.ltc-buyer-grid {
		grid-template-columns: 1fr;
	}

	.ltc-buyer-grid .ltc-snapshot-card {
		position: static;
	}

	/* Below 1024px there's no room for a confident two-column
	   composition (same threshold the homepage hero itself uses) —
	   collapse to one column; the right column has no content to stack
	   below, so this only affects the content column's own max-width. */
	.ltc-programmes-hero__grid {
		grid-template-columns: 1fr;
	}

	.ltc-programmes-hero__content {
		max-width: none;
	}
}

@media (max-width: 767px) {
	.ltc-route-grid,
	.ltc-problem-grid,
	.ltc-programme-grid,
	.ltc-overview-grid {
		grid-template-columns: 1fr;
	}

	.ltc-category-hero__stats {
		gap: var(--ltc-space-5);
		flex-wrap: wrap;
	}

	.ltc-finder__form {
		flex-direction: column;
	}

	/* .ltc-finder__input-wrap's flex: 1 1 320px was written for the row
	   layout above, where 320px reasonably constrains width. Once the
	   form switches to flex-direction: column here, the main axis
	   becomes vertical, so that same 320px silently becomes a HEIGHT
	   basis instead — confirmed live, the wrap rendered 320px tall,
	   pushing the absolutely-positioned (top: 50%) search icon down to
	   the middle of that oversized box, detached far below the visible
	   54px input. Reset to auto so it sizes to its actual content. */
	.ltc-finder__input-wrap {
		flex-basis: auto;
	}

	/* Side-by-side badge + title leaves so little room at this width
	   that titles were truncating to 1-2 characters ("M…", "Expe…") —
	   confirmed live. Stack the badge above the title instead so the
	   title gets the full row width; still truncates gracefully on a
	   genuinely very long single-line title, which is expected. */
	.ltc-finder__result-list a {
		align-items: flex-start;
	}

	.ltc-finder__result-text {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--ltc-space-2);
	}

	.ltc-finder__result-title {
		white-space: normal;
	}
}

/* =========================================================
   Deep-content pilot — Problem Solving & Critical Thinking
   (template-programmes-category-deep.php only). New section
   types added to carry the fuller production content depth
   without falling back to plain paragraph walls. Each block
   below is deliberately visually distinct from its neighbours
   (icons vs numerals vs plain text vs typographic index) per
   the anti-repetition requirement.
   ========================================================= */

/* ---- B. Why it matters — asymmetric editorial split ---- */

.ltc-why-matters {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var(--ltc-space-9);
	align-items: start;
}

.ltc-why-matters__lead {
	margin-top: var(--ltc-space-4);
	font-family: var(--ltc-font-serif);
	font-size: var(--ltc-type-h2);
	line-height: var(--ltc-leading-h2);
	letter-spacing: var(--ltc-tracking-h2);
	color: var(--ltc-ink-950);
}

/* Amber is reserved for dark surfaces (see ltc-tokens.css) — on this
   light section the accent phrase keeps the inherited ink colour and
   carries emphasis through the italic serif face alone. */
.ltc-why-matters__lead .ltc-serif-accent {
	font-size: inherit;
}

.ltc-why-matters__support {
	padding-top: var(--ltc-space-4);
	color: var(--ltc-text-muted);
	font-size: var(--ltc-type-body);
	line-height: var(--ltc-leading-body);
}

.ltc-why-matters__support p {
	margin-top: 0;
}

.ltc-why-matters__support-label {
	margin-top: var(--ltc-space-6) !important;
	font-weight: var(--ltc-weight-subhead);
	color: var(--ltc-ink-900);
}

.ltc-why-matters__support ul {
	margin-top: var(--ltc-space-3);
	display: flex;
	flex-direction: column;
	gap: var(--ltc-space-2);
	padding-left: var(--ltc-space-5);
	list-style: disc;
}

/* ---- C. Where the problem shows up — diagnostic icon grid ---- */

/* auto-fit/minmax rather than a fixed repeat(4,...): item counts vary
   per capability area (production challenge lists run roughly 4-7 real
   items), so the column count must follow the actual content instead of
   assuming 4 and leaving an empty track or a stranded remainder — this
   also makes the explicit 1023px/767px column-count overrides that
   .ltc-programme-grid still needs unnecessary here, since auto-fit
   already reflows on its own as the container narrows. */
.ltc-diagnostic-grid {
	margin-top: var(--ltc-space-7);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--ltc-space-5);
}

.ltc-diagnostic-card {
	padding: var(--ltc-space-5);
	background: var(--ltc-white);
	border: 1px solid var(--ltc-stone-200);
	border-radius: var(--ltc-radius-card);
}

.ltc-diagnostic-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--ltc-teal-100);
	color: var(--ltc-teal-700);
}

.ltc-diagnostic-card__icon svg {
	width: 20px;
	height: 20px;
}

.ltc-diagnostic-card__label {
	margin-top: var(--ltc-space-4);
	font-weight: var(--ltc-weight-heading);
	color: var(--ltc-ink-950);
}

.ltc-diagnostic-card__text {
	margin-top: var(--ltc-space-2);
	color: var(--ltc-text-muted);
	font-size: var(--ltc-type-body);
	line-height: var(--ltc-leading-body);
}

.ltc-diagnostic-consequence {
	margin-top: var(--ltc-space-7);
	padding-top: var(--ltc-space-6);
	border-top: 1px solid var(--ltc-stone-200);
	max-width: 70ch;
	color: var(--ltc-ink-900);
	font-size: var(--ltc-type-body-lg);
	line-height: var(--ltc-leading-body-lg);
}

/* ---- D. Who this is for — text-only persona cards (deliberately
   no icons, distinct from the diagnostic grid above) ---- */

.ltc-persona-grid {
	margin-top: var(--ltc-space-7);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--ltc-space-6);
}

.ltc-persona-card {
	padding-top: var(--ltc-space-5);
	border-top: 3px solid var(--ltc-teal-500);
}

.ltc-persona-card__title {
	font-size: var(--ltc-type-h4);
	font-weight: var(--ltc-weight-heading);
	line-height: var(--ltc-leading-h4);
	color: var(--ltc-ink-950);
}

.ltc-persona-card__text {
	margin-top: var(--ltc-space-3);
	color: var(--ltc-text-muted);
	font-size: var(--ltc-type-body);
	line-height: var(--ltc-leading-body);
}

.ltc-persona-closing {
	margin-top: var(--ltc-space-7);
	max-width: 70ch;
	color: var(--ltc-text-muted);
	font-size: var(--ltc-type-body-lg);
	line-height: var(--ltc-leading-body-lg);
}

/* ---- E. How organisations use these programmes — staged pathway
   (numbered markers, not icons — distinct language again) ---- */

.ltc-pathway {
	margin-top: var(--ltc-space-7);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--ltc-space-6);
}

.ltc-pathway__stage {
	position: relative;
	padding: var(--ltc-space-6) var(--ltc-space-5) var(--ltc-space-5);
	background: var(--ltc-white);
	border-radius: var(--ltc-radius-card);
}

.ltc-pathway__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--ltc-ink-950);
	color: var(--ltc-white);
	font-weight: var(--ltc-weight-heading);
	font-size: var(--ltc-type-nav);
}

.ltc-pathway__title {
	margin-top: var(--ltc-space-4);
	font-weight: var(--ltc-weight-heading);
	color: var(--ltc-ink-950);
}

.ltc-pathway__text {
	margin-top: var(--ltc-space-2);
	color: var(--ltc-text-muted);
	font-size: var(--ltc-type-body);
	line-height: var(--ltc-leading-body);
}

.ltc-pathway-support {
	margin-top: var(--ltc-space-6);
	max-width: 78ch;
	color: var(--ltc-text-muted);
	font-size: var(--ltc-type-body);
	line-height: var(--ltc-leading-body);
}

.ltc-approach-strip {
	margin-top: var(--ltc-space-8);
	padding-top: var(--ltc-space-7);
	border-top: 1px solid var(--ltc-stone-200);
}

.ltc-approach-strip__label {
	display: block;
}

.ltc-approach-strip__items {
	margin-top: var(--ltc-space-5);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--ltc-space-6);
}

.ltc-approach-strip__title {
	font-weight: var(--ltc-weight-subhead);
	color: var(--ltc-ink-950);
}

.ltc-approach-strip__text {
	margin-top: var(--ltc-space-2);
	color: var(--ltc-text-muted);
	font-size: var(--ltc-type-body);
	line-height: var(--ltc-leading-body);
}

/* ---- F. Capabilities developed — typographic index blocks
   (deliberately no icons, no cards — distinct from C and D) ---- */

.ltc-capability-map {
	margin-top: var(--ltc-space-7);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--ltc-space-6);
}

.ltc-capability-map__block {
	padding-top: var(--ltc-space-4);
	border-top: 1px solid var(--ltc-stone-200);
}

.ltc-capability-map__index {
	display: block;
	font-family: var(--ltc-font-serif);
	font-size: clamp(2.25rem, 3vw, 2.75rem);
	font-weight: 400;
	color: var(--ltc-teal-600);
	line-height: 1;
}

.ltc-capability-map__label {
	margin-top: var(--ltc-space-3);
	font-size: var(--ltc-type-h4);
	font-weight: var(--ltc-weight-heading);
	line-height: var(--ltc-leading-h4);
	color: var(--ltc-ink-950);
}

.ltc-capability-map__closing {
	margin-top: var(--ltc-space-6);
	max-width: 80ch;
	color: var(--ltc-text-muted);
	font-size: var(--ltc-type-body);
	line-height: var(--ltc-leading-body);
}

/* ---- G. What participants develop — connected numbered sequence
   (distinct again from the index blocks directly above) ---- */

.ltc-progression {
	margin-top: var(--ltc-space-9);
	padding-top: var(--ltc-space-8);
	border-top: 1px solid var(--ltc-stone-200);
}

.ltc-progression__list {
	margin-top: var(--ltc-space-5);
	display: flex;
	flex-direction: column;
}

.ltc-progression__item {
	display: flex;
	align-items: flex-start;
	gap: var(--ltc-space-5);
	padding-block: var(--ltc-space-4);
	border-bottom: 1px solid var(--ltc-stone-200);
}

.ltc-progression__item:first-child {
	border-top: 1px solid var(--ltc-stone-200);
}

.ltc-progression__marker {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid var(--ltc-teal-600);
	color: var(--ltc-teal-700);
	font-size: var(--ltc-type-nav);
	font-weight: var(--ltc-weight-heading);
}

.ltc-progression__text {
	padding-top: 3px;
	color: var(--ltc-ink-900);
	font-size: var(--ltc-type-body-lg);
	line-height: var(--ltc-leading-body);
}

/* ---- H. Observable outcomes — large light band, 3 wide cells ---- */

.ltc-outcome-band {
	margin-top: var(--ltc-space-7);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--ltc-space-7);
}

.ltc-outcome-band__cell {
	padding-top: var(--ltc-space-5);
	border-top: 3px solid var(--ltc-ink-950);
}

.ltc-outcome-band__title {
	font-size: var(--ltc-type-h3);
	font-weight: var(--ltc-weight-heading);
	line-height: var(--ltc-leading-h3);
	color: var(--ltc-ink-950);
}

.ltc-outcome-band__text {
	margin-top: var(--ltc-space-3);
	max-width: 32ch;
	color: var(--ltc-text-muted);
	font-size: var(--ltc-type-body);
	line-height: var(--ltc-leading-body);
}

/* ---- I. Business benefits — dark-teal band, staggered cards
   (visually distinct from the light outcome band above) ---- */

.ltc-benefit-band {
	margin-top: var(--ltc-space-7);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--ltc-space-5);
}

.ltc-benefit-band__card {
	padding: var(--ltc-space-6) var(--ltc-space-5);
	background: var(--ltc-ink-900);
	border: 1px solid var(--ltc-ink-700);
	border-radius: var(--ltc-radius-card);
	/* The static zigzag Y-offset lives in a custom property (not a
	   direct `transform` declaration) specifically so the capability-
	   page motion pass's .ltc-reveal treatment on this same element
	   (see ltc-motion.css) can compose with it instead of overwriting
	   it — a plain `transform: translateY(...)` here would have been
	   clobbered the instant .is-inview's own transform won the
	   cascade, silently cancelling the zigzag stagger after every
	   card's entrance animation finished. */
	transform: translateY(var(--ltc-zigzag-y, 0px));
}

.ltc-benefit-band__card--stagger-1 {
	--ltc-zigzag-y: var(--ltc-space-6);
}

.ltc-benefit-band__title {
	font-weight: var(--ltc-weight-heading);
	color: var(--ltc-white);
}

.ltc-benefit-band__text {
	margin-top: var(--ltc-space-3);
	color: rgba(247, 245, 240, 0.72);
	font-size: var(--ltc-type-body);
	line-height: var(--ltc-leading-body);
}

.ltc-benefit-band__closing {
	margin-top: var(--ltc-space-8);
	padding-top: var(--ltc-space-6);
	border-top: 1px solid var(--ltc-ink-700);
	max-width: 70ch;
	color: rgba(247, 245, 240, 0.85);
	font-size: var(--ltc-type-body-lg);
	line-height: var(--ltc-leading-body-lg);
}

@media (max-width: 1023px) {
	.ltc-why-matters {
		grid-template-columns: 1fr;
		gap: var(--ltc-space-6);
	}

	/* .ltc-diagnostic-grid / persona-grid / capability-map / benefit-band
	   / pathway / approach-strip__items / outcome-band deliberately have
	   NO column-count override here any more — they're all
	   repeat(auto-fit, minmax(...)) now (see their base rules above) and
	   reflow on their own as the container narrows, correctly for
	   whatever item count a given capability area actually has instead
	   of assuming a fixed count. */

	.ltc-benefit-band__card--stagger-1 {
		transform: none;
	}
}

@media (max-width: 767px) {
	.ltc-progression__item {
		gap: var(--ltc-space-4);
	}
}