/* Kevin 2026-09-24b: English Certificates & Downloads (post 103). Scoped under
   .vm-k24b-certdl; depends on kevin-20260924.css (.vm-k24 base + components). */

html:not(#vm-kx) .vm-k24b-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* The shared .vm-k24 h1/h2 scale (56px / ~41px at 1440) sits below Kevin's
   typography table for this page (H1 62-72px, section headings 42-52px);
   bumped locally so this page matches that table without touching the
   shared component other pages rely on. */
html:not(#vm-kx) .vm-k24b-certdl h1 {
	font-size: clamp(46px, 4.4vw, 66px);
}

html:not(#vm-kx) .vm-k24b-certdl h2 {
	font-size: clamp(34px, 3.4vw, 48px);
}

/* Icon boxes were enlarged, but the monoline paths only fill part of their
   viewBox, so the drawn ink stayed small; scaling strokes with the box made
   the enlarged icons look heavy. Pin every icon's stroke to a constant
   on-screen width instead, independent of render size. */
html:not(#vm-kx) .vm-k24b-certdl svg :is(path, circle, ellipse, rect, line) {
	vector-effect: non-scaling-stroke;
}

/* ---- Management-system certificates (white section) --------------------- */

html:not(#vm-kx) .vm-k24b-certdl-certs {
	background: #fff;
	padding-block: 80px;
}

html:not(#vm-kx) .vm-k24b-cert-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin: 32px 0 28px;
	text-align: center;
}

html:not(#vm-kx) .vm-k24b-cert-card {
	background: #0b4d4a;
	border-radius: 10px;
	padding: 32px 26px 28px;
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
}

html:not(#vm-kx) .vm-k24b-cert-card__icon {
	width: 140px;
	height: 140px;
	color: #3ecdbf;
	display: grid;
	place-items: center;
	margin-bottom: 6px;
}

html:not(#vm-kx) .vm-k24b-cert-card__icon svg {
	width: 130px;
	height: 130px;
}

/* body.vm-cvi + container class: matches the specificity of site.css's global
   "body.vm-cvi h3 { color: var(--vm-black) }" so headings keep their colour
   on dark backgrounds instead of being forced back to near-black. */
html:not(#vm-kx) body.vm-cvi .vm-k24b-cert-card h3 {
	color: #fff;
	font-size: 21px;
	margin-bottom: 8px;
}

/* body.vm-cvi + explicit "p" element: matches the specificity of the legacy
   body.vm-cvi .entry-content p rule (site.css) so these colours are not
   silently overridden back to its default dark grey. */
html:not(#vm-kx) body.vm-cvi p.vm-k24b-cert-card__desc {
	color: #f1f4f3;
	font-size: 15px;
	line-height: 1.4;
	margin: 0 0 14px;
}

html:not(#vm-kx) body.vm-cvi p.vm-k24b-cert-card__note {
	color: #9fd9d1;
	font-size: 13px;
	margin: 0 0 20px;
	flex: 1;
}

html:not(#vm-kx) .vm-k24b-cert-card .vm-k24-btn {
	align-self: center;
	gap: 8px;
}

html:not(#vm-kx) .vm-k24b-cert-card .vm-k24-btn svg {
	width: 16px;
	height: 16px;
}

html:not(#vm-kx) body.vm-cvi p.vm-k24b-note {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 16px 20px;
	background: #fff3ea;
	border: 1px solid #ffcda3;
	border-radius: 8px;
	color: #7a3b0a;
	font-size: 14px;
	line-height: 1.45;
	text-align: left;
}

html:not(#vm-kx) .vm-k24b-note__icon {
	flex: none;
	width: 22px;
	height: 22px;
	color: #ff6a00;
}

html:not(#vm-kx) .vm-k24b-note__icon svg {
	width: 22px;
	height: 22px;
}

/* ---- Document library ----------------------------------------------------- */

html:not(#vm-kx) .vm-k24b-certdl-library .vm-k24-lead {
	margin-left: 0;
	margin-right: 0;
	max-width: 62rem;
}

html:not(#vm-kx) .vm-k24b-search {
	display: flex;
	align-items: center;
	gap: 0;
	max-width: 720px;
	background: #fff;
	border: 1.5px solid #d3dbd9;
	border-radius: 8px;
	padding: 4px 4px 4px 16px;
	margin: 8px 0 18px;
}

html:not(#vm-kx) .vm-k24b-search__icon {
	flex: none;
	width: 20px;
	height: 20px;
	color: #4a4f55;
	display: grid;
	place-items: center;
}

html:not(#vm-kx) .vm-k24b-search__icon svg {
	width: 20px;
	height: 20px;
}

html:not(#vm-kx) .vm-k24b-search__input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	font: 500 16px/1.3 Inter, Arial, sans-serif;
	color: #173044;
	padding: 12px 10px;
}

html:not(#vm-kx) .vm-k24b-search__input:focus {
	outline: none;
}

html:not(#vm-kx) .vm-k24b-search__clear {
	flex: none;
	border: 0;
	background: transparent;
	color: #4a4f55;
	font: 600 13px/1 Inter, Arial, sans-serif;
	padding: 8px 10px;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

html:not(#vm-kx) .vm-k24b-search__submit {
	flex: none;
	border: 0;
	border-radius: 6px;
	background: #ff6a00;
	color: #fff;
	font: 700 14px/1 Inter, Arial, sans-serif;
	letter-spacing: 0.04em;
	min-height: 46px;
	padding: 0 22px;
	cursor: pointer;
}

html:not(#vm-kx) .vm-k24b-search__submit:hover {
	background: #e65f00;
}

html:not(#vm-kx) body.vm-cvi p.vm-k24b-status {
	margin: 0 0 18px;
	min-height: 1em;
	font-size: 13px;
	color: #4a4f55;
}

html:not(#vm-kx) body.vm-cvi p.vm-k24b-empty {
	background: #fff;
	border: 1.5px dashed #c6cfcd;
	border-radius: 8px;
	padding: 22px;
	color: #4a4f55;
	font-size: 15px;
	margin: 0 0 24px;
}

html:not(#vm-kx) .vm-k24b-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 30px;
}

html:not(#vm-kx) .vm-k24b-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1.5px solid #c6cfcd;
	background: #fff;
	color: #173044;
	border-radius: 999px;
	font: 600 13px/1 Inter, Arial, sans-serif;
	letter-spacing: 0.02em;
	padding: 10px 16px;
	cursor: pointer;
}

html:not(#vm-kx) .vm-k24b-chip span {
	color: #4a4f55;
	font-weight: 700;
}

html:not(#vm-kx) .vm-k24b-chip.is-active {
	background: #0b4d4a;
	border-color: #0b4d4a;
	color: #fff;
	font-weight: 700;
}

html:not(#vm-kx) .vm-k24b-chip.is-active span {
	color: #b6e9e2;
}

html:not(#vm-kx) .vm-k24b-chip:focus-visible,
html:not(#vm-kx) .vm-k24b-search__input:focus-visible,
html:not(#vm-kx) .vm-k24b-search__submit:focus-visible,
html:not(#vm-kx) .vm-k24b-search__clear:focus-visible {
	outline: 2px solid #0b4d4a;
	outline-offset: 2px;
}

html:not(#vm-kx) .vm-k24b-panels {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

html:not(#vm-kx) .vm-k24b-panel-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
}

html:not(#vm-kx) .vm-k24b-panel {
	background: #fff;
	border-radius: 10px;
	padding: 26px 26px 22px;
}

html:not(#vm-kx) .vm-k24b-panel--mgmt {
	display: none;
}

html:not(#vm-kx) .vm-k24b-panel__head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px;
}

html:not(#vm-kx) .vm-k24b-panel__icon {
	flex: none;
	width: 118px;
	height: 118px;
	border: 1.5px solid #3ecdbf;
	border-radius: 50%;
	color: #3ecdbf;
	display: grid;
	place-items: center;
}

html:not(#vm-kx) .vm-k24b-panel__icon svg {
	width: 110px;
	height: 110px;
}

html:not(#vm-kx) body.vm-cvi .vm-k24b-panel__head h3 {
	color: #0b4d4a;
	font-size: 17px;
	margin: 0;
}

html:not(#vm-kx) .vm-k24b-panel__count {
	display: block;
	color: #4a4f55;
	font-size: 13px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	margin-top: 2px;
}

html:not(#vm-kx) .vm-k24b-doc-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

html:not(#vm-kx) .vm-k24b-doc {
	display: grid;
	grid-template-columns: 26px 1fr auto auto;
	align-items: center;
	gap: 14px;
	padding: 13px 0;
	border-top: 1px solid #e6eae9;
}

html:not(#vm-kx) .vm-k24b-doc-list > .vm-k24b-doc:first-child {
	border-top: 0;
}

html:not(#vm-kx) .vm-k24b-doc:hover {
	background: #f7faf9;
}

html:not(#vm-kx) .vm-k24b-doc__icon {
	width: 24px;
	height: 24px;
	display: grid;
	place-items: center;
}

html:not(#vm-kx) .vm-k24b-doc__icon svg {
	width: 22px;
	height: 22px;
}

html:not(#vm-kx) .vm-k24b-doc__title {
	color: #173044;
	font: 600 15px/1.35 Inter, Arial, sans-serif;
}

html:not(#vm-kx) .vm-k24b-doc__meta {
	color: #4a4f55;
	font-size: 13px;
	white-space: nowrap;
}

/* !important: site.css forces every plain link inside .entry-content to a
   dark-teal colour with an underline (body.vm-cvi a and body.vm-cvi
   .entry-content a:not(.vm-button):not(.vm-btn)) at a specificity too high to
   out-rank without it; the approved .vm-k24-btn component defeats the same
   rule the same way. */
html:not(#vm-kx) .vm-k24b-doc__dl {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #ff6a00 !important;
	font: 700 13px/1 Inter, Arial, sans-serif;
	letter-spacing: 0.03em;
	text-decoration: none !important;
	white-space: nowrap;
}

html:not(#vm-kx) .vm-k24b-doc__dl svg {
	width: 15px;
	height: 15px;
}

html:not(#vm-kx) .vm-k24b-doc__dl:hover,
html:not(#vm-kx) .vm-k24b-doc__dl:focus-visible {
	color: #e65f00 !important;
}

html:not(#vm-kx) .vm-k24b-more {
	margin-top: 14px;
}

html:not(#vm-kx) .vm-k24b-more summary {
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #0b4d4a;
	font: 700 14px/1 Inter, Arial, sans-serif;
	letter-spacing: 0.03em;
	cursor: pointer;
}

html:not(#vm-kx) .vm-k24b-more summary::-webkit-details-marker {
	display: none;
}

html:not(#vm-kx) .vm-k24b-more svg {
	width: 16px;
	height: 16px;
}

html:not(#vm-kx) .vm-k24b-more[open] summary {
	margin-bottom: 6px;
}

html:not(#vm-kx) body.vm-cvi p.vm-k24b-more--static {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #0b4d4a;
	font: 700 14px/1 Inter, Arial, sans-serif;
	letter-spacing: 0.03em;
	margin: 14px 0 0;
}

html:not(#vm-kx) a.vm-k24b-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #0b4d4a !important;
	font: 700 14px/1 Inter, Arial, sans-serif;
	letter-spacing: 0.03em;
	text-decoration: none !important;
	margin-top: 14px;
}

html:not(#vm-kx) .vm-k24b-panel--other .vm-k24b-doc-list {
	margin-bottom: 4px;
}

/* ---- Document types (black section) --------------------------------------- */

html:not(#vm-kx) .vm-k24b-certdl-types {
	padding-block: 80px;
}

html:not(#vm-kx) .vm-k24b-types__head {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 24px;
	align-items: end;
	margin-bottom: 36px;
}

html:not(#vm-kx) .vm-k24b-types__head > div {
	min-width: 0;
}

html:not(#vm-kx) body.vm-cvi p.vm-k24b-types__note {
	margin: 0;
	color: #b7c2c0;
	font-size: 15px;
	text-align: right;
}

html:not(#vm-kx) .vm-k24b-types {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

html:not(#vm-kx) .vm-k24b-type__icon {
	width: 90px;
	height: 90px;
	border: 1.5px solid #3ecdbf;
	border-radius: 50%;
	color: #3ecdbf;
	display: grid;
	place-items: center;
	margin-bottom: 16px;
}

html:not(#vm-kx) .vm-k24b-type__icon svg {
	width: 86px;
	height: 86px;
}

html:not(#vm-kx) body.vm-cvi .vm-k24b-type h3 {
	color: #fff;
	font-size: 15px;
	margin-bottom: 6px;
}

html:not(#vm-kx) body.vm-cvi p.vm-k24b-type__desc {
	color: #c7cfce;
	font-size: 14px;
	margin: 0;
	line-height: 1.4;
}

/* ---- Document-selection route (white section) ------------------------------ */

html:not(#vm-kx) .vm-k24b-certdl-route {
	background: #fff;
	padding-block: 80px;
}

html:not(#vm-kx) .vm-k24b-route-row {
	display: grid;
	grid-template-columns: 0.85fr 2.1fr;
	gap: 32px;
	align-items: center;
}

html:not(#vm-kx) .vm-k24b-route-head h2 {
	margin-bottom: 0;
}

html:not(#vm-kx) .vm-k24b-route {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 8px;
}

html:not(#vm-kx) .vm-k24b-route__step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
}

html:not(#vm-kx) .vm-k24b-route__num {
	color: #ff6a00;
	font: 800 15px/1 Inter, Arial, sans-serif;
	letter-spacing: 0.03em;
}

html:not(#vm-kx) .vm-k24b-route__icon-wrap {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
	margin: 4px 0 6px;
}

html:not(#vm-kx) .vm-k24b-route__icon {
	position: relative;
	z-index: 1;
	width: 90px;
	height: 90px;
	border: 1.5px solid #3ecdbf;
	border-radius: 50%;
	color: #3ecdbf;
	background: #fff;
	display: grid;
	place-items: center;
}

html:not(#vm-kx) .vm-k24b-route__icon svg {
	width: 82px;
	height: 82px;
}

html:not(#vm-kx) .vm-k24b-route__arrow {
	position: absolute;
	top: 50%;
	left: 100%;
	transform: translateY(-50%);
	color: #3ecdbf;
	width: 20px;
	height: 20px;
}

html:not(#vm-kx) .vm-k24b-route__arrow svg {
	width: 20px;
	height: 20px;
}

html:not(#vm-kx) .vm-k24b-route__label {
	color: #0b4d4a;
	font: 800 13px/1.3 Inter, Arial, sans-serif;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	max-width: 14rem;
}

html:not(#vm-kx) .vm-k24b-route__sub {
	color: #4a4f55;
	font-size: 13px;
	line-height: 1.35;
	max-width: 14rem;
}

/* ---- Quick access (deep-teal section) -------------------------------------- */

html:not(#vm-kx) .vm-k24b-certdl-quick {
	background: #0b4d4a;
	color: #fff;
	padding-block: 80px;
}

html:not(#vm-kx) .vm-k24b-certdl-quick .vm-k24-eye {
	color: #8fe7db;
}

html:not(#vm-kx) .vm-k24b-certdl-quick h2 {
	color: #fff;
}

html:not(#vm-kx) .vm-k24b-quick-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin-top: 28px;
}

html:not(#vm-kx) .vm-k24b-quick-card {
	background: #fff;
	border-radius: 10px;
	padding: 20px 20px 22px;
	display: flex;
	flex-direction: column;
}

html:not(#vm-kx) .vm-k24b-quick-card__head {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 10px;
}

html:not(#vm-kx) .vm-k24b-quick-card__icon {
	flex: none;
	width: 26px;
	height: 26px;
	color: #3ecdbf;
	margin-top: 2px;
}

html:not(#vm-kx) .vm-k24b-quick-card__icon svg {
	width: 24px;
	height: 24px;
}

html:not(#vm-kx) body.vm-cvi .vm-k24b-quick-card h3 {
	color: #0b4d4a;
	font-size: 14px;
	margin-bottom: 0;
}

html:not(#vm-kx) body.vm-cvi p.vm-k24b-quick-card__sub {
	color: #4a4f55;
	font-size: 13px;
	margin: 0 0 16px;
	flex: 1;
}

html:not(#vm-kx) .vm-k24b-quick-card .vm-k24-btn {
	width: 100%;
	min-height: 44px;
	padding: 0 18px;
	font-size: 13px;
	gap: 8px;
}

html:not(#vm-kx) .vm-k24b-quick-card .vm-k24-btn svg {
	width: 15px;
	height: 15px;
}

/* ---- FAQ glyph (plus/minus swap) -------------------------------------------- */

html:not(#vm-kx) .vm-k24b-faq__glyph {
	font-size: 20px;
	line-height: 1;
	color: #0b4d4a;
}

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

@media (max-width: 1199px) {
	html:not(#vm-kx) .vm-k24b-cert-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}

	html:not(#vm-kx) .vm-k24b-panel-grid {
		grid-template-columns: 1fr 1fr;
	}

	html:not(#vm-kx) .vm-k24b-types {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px 20px;
	}

	html:not(#vm-kx) .vm-k24b-types__head {
		grid-template-columns: 1fr;
	}

	html:not(#vm-kx) body.vm-cvi p.vm-k24b-types__note {
		text-align: left;
	}

	html:not(#vm-kx) .vm-k24b-route-row {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	html:not(#vm-kx) .vm-k24b-route {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 36px;
	}

	html:not(#vm-kx) .vm-k24b-route__step:nth-child(2) .vm-k24b-route__arrow {
		display: none;
	}

	html:not(#vm-kx) .vm-k24b-quick-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 900px) {
	html:not(#vm-kx) .vm-k24b-cert-grid {
		grid-template-columns: 1fr;
	}

	html:not(#vm-kx) .vm-k24b-panel-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	html:not(#vm-kx) .vm-k24b-certdl-certs,
	html:not(#vm-kx) .vm-k24b-certdl-route,
	html:not(#vm-kx) .vm-k24b-certdl-quick {
		padding-block: 52px;
	}

	html:not(#vm-kx) .vm-k24b-certdl-certs {
		text-align: left;
	}

	html:not(#vm-kx) .vm-k24b-certdl-certs .vm-k24-lead {
		margin-left: 0;
	}

	html:not(#vm-kx) .vm-k24b-search {
		flex-wrap: wrap;
		padding: 10px 12px;
	}

	html:not(#vm-kx) .vm-k24b-search__input {
		flex-basis: 100%;
		order: 1;
		padding: 8px 0;
	}

	html:not(#vm-kx) .vm-k24b-search__icon {
		order: 0;
	}

	html:not(#vm-kx) .vm-k24b-search__clear {
		order: 2;
	}

	html:not(#vm-kx) .vm-k24b-search__submit {
		order: 3;
		flex: 1;
		margin-top: 8px;
	}

	html:not(#vm-kx) .vm-k24b-doc {
		grid-template-columns: 26px 1fr;
		row-gap: 6px;
	}

	html:not(#vm-kx) .vm-k24b-doc__title {
		grid-column: 2;
	}

	html:not(#vm-kx) .vm-k24b-doc__meta {
		grid-column: 2;
		white-space: normal;
	}

	html:not(#vm-kx) .vm-k24b-doc__dl {
		grid-column: 1 / -1;
		justify-self: start;
		margin-top: 2px;
	}

	html:not(#vm-kx) .vm-k24b-types {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	html:not(#vm-kx) .vm-k24b-route {
		grid-template-columns: 1fr;
		row-gap: 28px;
	}

	html:not(#vm-kx) .vm-k24b-route__arrow {
		display: none;
	}

	html:not(#vm-kx) .vm-k24b-quick-grid {
		grid-template-columns: 1fr;
	}
}