/* ============================================================
   ISInc Training
   ------------------------------------------------------------
   One stylesheet. Tokens first, then primitives, then blocks.
   Brand colors arrive as custom properties from the Customizer
   (see inc/customizer.php); everything below derives from them.
   ============================================================ */

/* ---------- 1. Tokens -------------------------------------- */

:root {
	/* Fallbacks. The Customizer overrides these inline. */
	--ink: #0d1b2a;
	--ink-rgb: 13 27 42;
	--brand: #12467f;
	--brand-rgb: 18 70 127;
	--brand-dark: #0b3160;
	--accent: #c2410c;
	--accent-rgb: 194 65 12;
	--go: #166534;
	--surface: #ffffff;
	--tint: #f4f7fb;

	/* Derived */
	--muted: rgb(var(--ink-rgb) / 0.62);
	--faint: rgb(var(--ink-rgb) / 0.45);
	--rule: rgb(var(--ink-rgb) / 0.12);
	--rule-soft: rgb(var(--ink-rgb) / 0.07);
	--wash: rgb(var(--brand-rgb) / 0.06);
	--wash-strong: rgb(var(--brand-rgb) / 0.12);
	--ring: rgb(var(--brand-rgb) / 0.35);

	/* Type */
	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--font-alt: ui-serif, Georgia, "Times New Roman", serif;
	--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.88rem);
	--step-0:  clamp(1.00rem, 0.97rem + 0.15vw, 1.06rem);
	--step-1:  clamp(1.15rem, 1.09rem + 0.30vw, 1.32rem);
	--step-2:  clamp(1.35rem, 1.24rem + 0.55vw, 1.70rem);
	--step-3:  clamp(1.62rem, 1.42rem + 1.00vw, 2.25rem);
	--step-4:  clamp(1.95rem, 1.60rem + 1.75vw, 3.00rem);

	/* Space */
	--s-1: 0.375rem;
	--s-2: 0.625rem;
	--s-3: 1rem;
	--s-4: 1.5rem;
	--s-5: 2.25rem;
	--s-6: 3.5rem;
	--s-7: 5rem;

	--radius: 10px;
	--radius-sm: 6px;
	--shadow: 0 1px 2px rgb(var(--ink-rgb) / 0.05), 0 8px 24px -12px rgb(var(--ink-rgb) / 0.18);
	--shadow-lift: 0 2px 4px rgb(var(--ink-rgb) / 0.06), 0 16px 40px -16px rgb(var(--ink-rgb) / 0.28);

	--maxw: 1200px;
	--maxw-narrow: 760px;
}

/* ---------- 2. Reset and base ------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
	margin: 0;
	font-family: var(--font);
	font-size: var(--step-0);
	line-height: 1.6;
	color: var(--ink);
	background: var(--surface);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 var(--s-3); line-height: 1.18; font-weight: 700; letter-spacing: -0.015em; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); }

p, ul, ol, table, figure { margin: 0 0 var(--s-3); }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-dark); }

img, svg, video { max-width: 100%; height: auto; }
svg { display: inline-block; vertical-align: middle; }

:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
	border-radius: 3px;
}

hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-5) 0; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

.skip-link:focus {
	position: fixed; top: 8px; left: 8px; z-index: 999;
	width: auto; height: auto; clip: auto; clip-path: none;
	padding: 0.6rem 1rem; background: var(--brand); color: #fff; border-radius: var(--radius-sm);
}

.muted { color: var(--muted); font-weight: 400; }
.quoted { font-style: italic; }
.hp { position: absolute; left: -9999px; }

/* ---------- 3. Layout -------------------------------------- */

.wrap {
	width: min(100% - 2.5rem, var(--maxw));
	margin-inline: auto;
}
.wrap--narrow { width: min(100% - 2.5rem, var(--maxw-narrow)); }

.band { padding: var(--s-6) 0; }
.band--tint { background: var(--tint); }
.band--brand {
	background:
		radial-gradient(1000px 400px at 15% -10%, rgb(var(--brand-rgb) / 0.10), transparent 60%),
		var(--tint);
	border-top: 1px solid var(--rule-soft);
}
.band__cta { margin-top: var(--s-4); }

.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: var(--s-3);
	margin-bottom: var(--s-4);
}
.section-title { margin: 0; font-size: var(--step-2); }
.section-sub { margin: var(--s-1) 0 0; color: var(--muted); max-width: 60ch; }
.section-link {
	font-weight: 600;
	font-size: var(--step--1);
	text-decoration: none;
	white-space: nowrap;
}
.section-link:hover { text-decoration: underline; }
.section-link svg { margin-left: 0.25rem; }

/* ---------- 4. Buttons and small primitives ---------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.7rem 1.1rem;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	font: inherit;
	font-weight: 600;
	font-size: var(--step--1);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .06s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-dark); color: #fff; }

.btn--ghost { background: transparent; color: var(--brand); border-color: rgb(var(--brand-rgb) / 0.35); }
.btn--ghost:hover { background: var(--wash); color: var(--brand-dark); }

.btn--sm { padding: 0.5rem 0.8rem; font-size: 0.84rem; }
.btn--block { width: 100%; }

.link-quiet {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: var(--step--1);
	color: var(--muted);
	text-decoration: underline;
	cursor: pointer;
}
.link-quiet:hover { color: var(--brand); }

.code {
	display: inline-block;
	margin-left: 0.5rem;
	padding: 0.1rem 0.45rem;
	border: 1px solid var(--rule);
	border-radius: 4px;
	font-family: var(--mono);
	font-size: 0.76em;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--muted);
	vertical-align: middle;
	white-space: nowrap;
}
.code--sm { font-size: 0.7em; }

.badge {
	display: inline-block;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	border: 1px solid transparent;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
}
.badge--go      { background: rgb(22 101 52 / 0.10); color: var(--go); border-color: rgb(22 101 52 / 0.28); }
.badge--warn    { background: rgb(var(--accent-rgb) / 0.10); color: var(--accent); border-color: rgb(var(--accent-rgb) / 0.30); }
.badge--neutral { background: rgb(var(--ink-rgb) / 0.06); color: var(--muted); border-color: var(--rule); }
.badge--stop    { background: rgb(153 27 27 / 0.08); color: #991b1b; border-color: rgb(153 27 27 / 0.25); }

.tag {
	display: inline-block;
	padding: 0.1rem 0.5rem;
	border-radius: 4px;
	font-size: 0.72rem;
	font-weight: 600;
	background: var(--wash);
	color: var(--brand-dark);
}

.notice {
	padding: var(--s-3);
	border-radius: var(--radius-sm);
	border: 1px solid var(--rule);
	background: var(--surface);
	margin-bottom: var(--s-4);
}
.notice--go   { border-color: rgb(22 101 52 / 0.35); background: rgb(22 101 52 / 0.07); }
.notice--stop { border-color: rgb(153 27 27 / 0.35); background: rgb(153 27 27 / 0.06); }

.notice-bar {
	background: var(--brand-dark);
	color: #fff;
	font-size: var(--step--1);
	padding: 0.5rem 0;
	text-align: center;
}

.empty { color: var(--muted); padding: var(--s-4) 0; }

.empty-state {
	text-align: center;
	padding: var(--s-6) var(--s-3);
	border: 1px dashed var(--rule);
	border-radius: var(--radius);
	background: var(--tint);
}
.empty-state--tall { padding: var(--s-7) var(--s-3); }
.empty-state h1, .empty-state h2 { margin-bottom: var(--s-2); }
.empty-state p { color: var(--muted); }
.empty-state .btn { margin: 0.25rem; }
.empty-state__search { max-width: 30rem; margin: var(--s-4) auto; }

/* ---------- 5. Header -------------------------------------- */

.site-head { position: relative; z-index: 20; }

.utility {
	background: var(--brand-dark);
	color: rgb(255 255 255 / 0.85);
	font-size: 0.8rem;
}
.utility__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 2.25rem; }
.utility__msg { margin: 0; }
.utility__links { display: flex; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.utility a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem; }
.utility a:hover { text-decoration: underline; }
@media (max-width: 800px) { .utility__msg { display: none; } .utility__inner { justify-content: center; } }

.masthead {
	background: var(--surface);
	border-bottom: 1px solid var(--rule);
}
.masthead__inner {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	min-height: 4.5rem;
}
.masthead__brand { flex: 0 1 auto; min-width: 0; }

/*
 * Both dimensions capped, for the same reason the partner strip needed
 * it: a logo comes out of a brand guideline at whatever proportions it
 * has, and capping only the height lets a wide one grow sideways until
 * it pushes the navigation off the end of the bar. Whichever limit it
 * meets first is the one that applies.
 */
.custom-logo {
	display: block;
	max-height: 52px;
	max-width: min(100%, 16rem);
	width: auto;
	height: auto;
	object-fit: contain;
}

.wordmark { display: block; text-decoration: none; color: var(--ink); }
.wordmark__name { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; color: var(--brand); }
.wordmark__tag { display: block; font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); }

.nav { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.nav__list {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
.nav__list a {
	display: block;
	padding: 0.4rem 0;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--ink);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}
.nav__list a:hover,
.nav__list .current-menu-item > a { color: var(--brand); border-bottom-color: var(--brand); }

.nav__actions { display: flex; align-items: center; gap: var(--s-3); }

.cart-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: var(--ink);
	text-decoration: none;
	padding: 0.4rem;
}
.cart-link:hover { color: var(--brand); }
.cart-link__count {
	position: absolute;
	top: -2px; right: -6px;
	min-width: 1.15rem;
	padding: 0 0.2rem;
	border-radius: 999px;
	background: var(--accent);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 700;
	line-height: 1.15rem;
	text-align: center;
}
.no-cart .cart-link__count { display: none; }

.nav-toggle {
	display: none;
	margin-left: auto;
	padding: 0.5rem;
	background: none;
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	color: var(--ink);
	cursor: pointer;
}

@media (max-width: 900px) {
	.nav-toggle { display: inline-flex; }
	.nav {
		display: none;
		position: absolute;
		inset: 100% 0 auto;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--s-3) 1.25rem var(--s-4);
		background: var(--surface);
		border-bottom: 1px solid var(--rule);
		box-shadow: var(--shadow);
	}
	.nav.is-open { display: flex; }
	.nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.nav__list a { padding: 0.8rem 0; border-bottom: 1px solid var(--rule-soft); }
	.nav__actions { margin-top: var(--s-3); justify-content: space-between; }
}

/* ---------- 6. Hero and finder ----------------------------- */

.hero {
	position: relative;
	padding: var(--s-6) 0 var(--s-5);
	background:
		radial-gradient(1100px 520px at 8% -25%, rgb(var(--brand-rgb) / 0.16), transparent 60%),
		radial-gradient(760px 420px at 96% 4%, rgb(var(--accent-rgb) / 0.09), transparent 58%),
		linear-gradient(180deg, var(--tint), var(--surface) 62%);
	border-bottom: 1px solid var(--rule-soft);
}

/* Two columns from tablet up. The old single column left half the
   viewport empty and forced the headline into a four line ladder. */
.hero__inner { display: grid; gap: var(--s-5); align-items: center; }
.hero__main { min-width: 0; }

@media (min-width: 62rem) {
	.hero__inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s-6); }
}

/* 16ch was breaking this across four lines. Wider, and balanced so the
   lines come out near enough the same length instead of one orphan. */
.hero__title { margin-bottom: var(--s-3); max-width: 22ch; text-wrap: balance; }
.hero__sub { font-size: var(--step-1); color: var(--muted); max-width: 54ch; margin-bottom: var(--s-4); }

.hero__side { min-width: 0; }
.hero__card {
	border: 1px solid var(--rule);
	border-radius: 14px;
	padding: var(--s-4);
	background: rgb(255 255 255 / 0.72);
	backdrop-filter: blur(6px);
	box-shadow: 0 1px 2px rgb(var(--ink-rgb) / 0.04), 0 12px 30px rgb(var(--ink-rgb) / 0.06);
}

/* Inside the card the stats read as a two by two block rather than the
   full width strip they were designed as. */
.hero__card .stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-3);
	margin: 0 0 var(--s-3);
	padding: 0;
	border: 0;
	list-style: none;
}
.hero__card .stat { padding: 0; }
.hero__card .stat__value { font-size: var(--step-2); }

.hero__marks { list-style: none; margin: 0; padding: var(--s-3) 0 0; border-top: 1px solid var(--rule-soft); }
.hero__marks li {
	position: relative;
	padding: 0.3rem 0 0.3rem 1.6rem;
	font-size: var(--step--1);
	color: var(--muted);
}
.hero__marks li::before {
	content: "";
	position: absolute;
	left: 0.25rem;
	top: 0.85em;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--brand);
	opacity: 0.55;
}

.finder { max-width: 40rem; }
.finder__box { position: relative; }
.finder__form {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	padding: 0.4rem 0.4rem 0.4rem 0.9rem;
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}
.finder__form:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring); }
.finder__icon { color: var(--faint); display: inline-flex; }
.finder__form input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 0.6rem 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--ink);
}
.finder__form input[type="search"]:focus { outline: none; }

.finder__hints {
	margin: var(--s-3) 0 0;
	font-size: var(--step--1);
	color: var(--muted);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}
.finder__hints a {
	padding: 0.15rem 0.55rem;
	border: 1px solid var(--rule);
	border-radius: 999px;
	background: var(--surface);
	text-decoration: none;
	font-weight: 600;
}
.finder__hints a:hover { border-color: var(--brand); background: var(--wash); }

.finder__results {
	position: absolute;
	z-index: 30;
	inset: calc(100% + 0.4rem) 0 auto;
	max-height: 24rem;
	overflow-y: auto;
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lift);
}
.finder__results ul { margin: 0; padding: 0.35rem; list-style: none; }
.finder__results a {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--s-3);
	padding: 0.6rem 0.7rem;
	border-radius: var(--radius-sm);
	text-decoration: none;
	color: var(--ink);
}
.finder__results a:hover,
.finder__results a:focus,
.finder__results .is-active a { background: var(--wash); }
.finder__results .r-title { font-weight: 600; }
.finder__results .r-meta { font-size: var(--step--1); color: var(--muted); white-space: nowrap; }
.finder__results .r-empty { padding: 0.9rem; color: var(--muted); font-size: var(--step--1); }

/* Conversational mode: results need room for a sentence, so they stack
   rather than sitting on one line like the code lookup does. */
.finder__switch { margin: 0.55rem 0 0; }
.finder__switch button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.finder--asking .finder__form { border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring); }
.finder--asking .finder__hints { opacity: 0.45; }

.finder__results .r-rich a { display: block; padding: 0.7rem 0.85rem; }
.finder__results .r-rich .r-title { display: block; }
.finder__results .r-rich .r-code { display: inline-block; margin-top: 0.15rem; font-size: var(--step--1); color: var(--brand); font-weight: 600; }
.finder__results .r-rich .r-sum { display: block; margin-top: 0.2rem; font-size: var(--step--1); color: var(--muted); white-space: normal; }
.finder__results .r-note { margin: 0; padding: 0.6rem 0.9rem; border-top: 1px solid var(--rule-soft); font-size: var(--step--1); color: var(--muted); }

.search-note { color: var(--muted); font-size: var(--step--1); margin: 0 0 1.2rem; }
.search-note + .course-grid { margin-top: 0; }

/* ---------- 7. Stat band ----------------------------------- */

.stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--s-4);
	margin: var(--s-6) 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--rule);
	padding-top: var(--s-4);
}
.stat__value {
	display: block;
	font-size: var(--step-3);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: var(--brand);
	font-variant-numeric: tabular-nums;
}
.stat__label { display: block; margin-top: 0.25rem; font-size: var(--step--1); color: var(--muted); max-width: 24ch; }

/* ---------- 8. Cards and grids ----------------------------- */

.course-grid, .post-grid {
	display: grid;
	gap: var(--s-4);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}
.course-grid.cols-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); }
.course-grid.cols-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--s-4);
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.card:hover { border-color: rgb(var(--brand-rgb) / 0.4); box-shadow: var(--shadow); transform: translateY(-2px); }
.card__link { position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.card > *:not(.card__link) { position: relative; z-index: 2; pointer-events: none; }
.card a:not(.card__link) { pointer-events: auto; }

.card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-2); }
.card__brand { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint); }
.card__title { font-size: var(--step-1); margin-bottom: var(--s-2); }
.card__text { color: var(--muted); font-size: var(--step--1); margin-bottom: var(--s-3); }
.card__facts { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0 0 var(--s-3); padding: 0; list-style: none; font-size: var(--step--1); font-weight: 600; }
.card__foot {
	display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
	margin-top: auto;
	padding-top: var(--s-3);
	border-top: 1px solid var(--rule-soft);
	font-size: var(--step--1);
}
.card__next { font-weight: 600; }
.card__more { margin: var(--s-1) 0 0; font-size: 0.78rem; color: var(--faint); }

.card--post .card__media { margin: calc(var(--s-4) * -1) calc(var(--s-4) * -1) var(--s-3); }
.card--post .card__media img { border-radius: var(--radius) var(--radius) 0 0; width: 100%; object-fit: cover; }
.card__date { font-size: var(--step--1); color: var(--faint); margin-bottom: var(--s-1); }

/* ---------- 9. Chips and facets ---------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.7rem;
	border: 1px solid var(--rule);
	border-radius: 999px;
	background: var(--surface);
	font-size: var(--step--1);
	font-weight: 600;
	text-decoration: none;
	color: var(--ink);
}
.chip:hover { border-color: var(--brand); background: var(--wash); color: var(--brand-dark); }
.chip__count { font-size: 0.72rem; font-weight: 700; color: var(--faint); font-variant-numeric: tabular-nums; }
.chips--sm .chip { padding: 0.2rem 0.55rem; font-size: 0.78rem; }

.ways { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }

/* With only two columns left, auto-fit would stretch each to half the
   band and leave the chips swimming in it. Cap the measure instead. */
.ways--1 { max-width: 34rem; }
.ways--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 24rem)); }
.way__title { font-size: var(--step-1); margin-bottom: var(--s-1); }
.way__text { color: var(--muted); font-size: var(--step--1); margin-bottom: var(--s-3); }

/* ---------- 10. Schedule table ----------------------------- */

.table-wrap {
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--surface);
	overflow: hidden;
}
.schedule { width: 100%; border-collapse: collapse; margin: 0; font-size: 0.94rem; }
.schedule caption { padding: var(--s-3); text-align: left; font-weight: 600; }
.schedule thead th {
	padding: 0.7rem var(--s-3);
	background: var(--tint);
	border-bottom: 1px solid var(--rule);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	text-align: left;
	white-space: nowrap;
}
.schedule td { padding: 0.85rem var(--s-3); border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.schedule tbody tr:last-child td { border-bottom: 0; }
.schedule tbody tr:hover { background: rgb(var(--brand-rgb) / 0.035); }

.schedule .col-when { white-space: nowrap; }
.schedule .when { display: block; font-weight: 700; font-variant-numeric: tabular-nums; }
.schedule .when__year { display: block; font-size: 0.76rem; color: var(--faint); }
.schedule .col-class a { font-weight: 600; text-decoration: none; }
.schedule .col-class a:hover { text-decoration: underline; }
.schedule .col-where .muted { display: block; font-size: 0.78rem; }

.schedule .col-status .muted { display: block; margin-top: 0.2rem; font-size: 0.76rem; }
.schedule .col-price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.schedule .col-act { text-align: right; white-space: nowrap; }
.schedule form { margin: 0; }

@media (max-width: 820px) {
	.table-wrap { border: 0; background: none; }
	.schedule, .schedule tbody, .schedule tr, .schedule td { display: block; width: 100%; }
	.schedule thead { display: none; }
	.schedule tr {
		margin-bottom: var(--s-3);
		border: 1px solid var(--rule);
		border-radius: var(--radius);
		background: var(--surface);
		padding: var(--s-2) var(--s-3);
	}
	.schedule td { border: 0; padding: 0.3rem 0; }
	.schedule td[data-label]::before {
		content: attr(data-label);
		display: block;
		font-size: 0.68rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--faint);
	}
	.schedule .col-act { text-align: left; padding-top: var(--s-2); }
}

/* ---------- 11. Page heads and breadcrumbs ----------------- */

.page-head {
	padding: var(--s-5) 0 var(--s-4);
	background: var(--tint);
	border-bottom: 1px solid var(--rule-soft);
}
.page-title { margin: var(--s-2) 0 var(--s-2); font-size: var(--step-3); }
.page-sub { color: var(--muted); max-width: 68ch; margin: 0; }
.page-head__search { margin-top: var(--s-3); max-width: 32rem; }

.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; font-size: 0.8rem; color: var(--faint); }
.crumbs li + li::before { content: "/"; margin-right: 0.4rem; color: var(--rule); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--brand); text-decoration: underline; }

/* ---------- 12. Catalog ------------------------------------ */

.catalog {
	display: grid;
	grid-template-columns: 17rem 1fr;
	gap: var(--s-5);
	padding: var(--s-5) 0 var(--s-6);
	align-items: start;
}
@media (max-width: 900px) { .catalog { grid-template-columns: 1fr; } }

.catalog__filters { position: sticky; top: var(--s-3); }
@media (max-width: 900px) { .catalog__filters { position: static; } }

.filters {
	padding: var(--s-3);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--surface);
	margin-bottom: var(--s-4);
}

.facet { border-top: 1px solid var(--rule-soft); }
.facet:first-child { border-top: 0; }
.facet__head {
	padding: 0.7rem 0;
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
	cursor: pointer;
	list-style: none;
}
.facet__head::-webkit-details-marker { display: none; }
.facet__head::after { content: "+"; float: right; font-weight: 400; color: var(--faint); }
.facet[open] .facet__head::after { content: "\2212"; }
.facet__list { margin: 0 0 var(--s-3); padding: 0; list-style: none; max-height: 18rem; overflow-y: auto; }
.facet__list a {
	display: flex; justify-content: space-between; gap: var(--s-2);
	padding: 0.3rem 0;
	font-size: var(--step--1);
	text-decoration: none;
	color: var(--ink);
}
.facet__list a:hover { color: var(--brand); }
.facet__list .is-current a { font-weight: 700; color: var(--brand); }
.facet__count { color: var(--faint); font-variant-numeric: tabular-nums; }

/* ---------- 13. Forms -------------------------------------- */

.field { margin: 0 0 var(--s-3); }
.field label, .field legend { display: block; margin-bottom: 0.3rem; font-size: 0.84rem; font-weight: 600; }
.field--check label { display: flex; gap: 0.5rem; align-items: center; font-weight: 500; }
.field--grow { flex: 1 1 14rem; }

input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="number"], input[type="date"], input[type="time"], select, textarea {
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	background: var(--surface);
	font: inherit;
	font-size: 0.95rem;
	color: var(--ink);
}
input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px var(--ring);
}
textarea { resize: vertical; }

fieldset { margin: 0 0 var(--s-3); padding: 0; border: 0; }
.radio { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.35rem 0; font-size: 0.92rem; font-weight: 500; }
.radio input { margin-top: 0.28rem; }

/* Picking attendees from the staff list on a client account.
   The native select is the control; the search box and chips are drawn
   over it, so everything here degrades to a plain multiple select. */
.picker { margin-bottom: 1.5rem; }
.picker legend { font-weight: 600; margin-bottom: 0.5rem; }
.picker__label { display: block; font-weight: 500; font-size: 0.92rem; margin-bottom: 0.3rem; }
.picker__label .muted { font-weight: 400; margin-left: 0.4rem; }
.picker__select { width: 100%; }
.picker__search { position: relative; margin: 0 0 0.5rem; }
.picker__input { width: 100%; }

/* Once the script is running the raw select is redundant. It stays in
   the DOM and keeps posting, it is simply not the thing you look at. */
.picker--live .picker__select,
.picker--live .picker__label { display: none; }

.picker__results { list-style: none; margin: 0 0 0.6rem; padding: 0; max-height: 14rem; overflow-y: auto; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); }
.picker__results[hidden] { display: none; }
.picker__result { padding: 0.45rem 0.7rem; cursor: pointer; font-size: 0.92rem; border-bottom: 1px solid var(--rule-soft); }
.picker__result:last-child { border-bottom: 0; }
.picker__result:hover,
.picker__result.is-active { background: var(--wash); }

.picker__chosen { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.6rem; }
.picker__chosen:empty { display: none; }
/*
 * A chosen person reads as a chip, but it is not the same chip as the
 * facet links in section 9: it is a removable token rather than
 * somewhere to navigate to, so it is softer and carries a close button.
 *
 * Scoped to the picker deliberately. Declared bare, as `.chip`, it came
 * later in the file and so quietly restyled every facet chip on the
 * course and archive pages, stripping their border on pages that have
 * nothing to do with this picker. Same trap as the partner strip.
 */
.picker__chosen .chip { padding: 0.25rem 0.3rem 0.25rem 0.65rem; border-color: transparent; background: var(--wash-strong); font-size: 0.86rem; font-weight: 500; }
/* It is a token, not a link, so it does not light up under the pointer
   the way a facet does. */
.picker__chosen .chip:hover { border-color: transparent; background: var(--wash-strong); color: var(--ink); }
.chip__remove { border: 0; background: none; cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 0 0.35rem; color: inherit; opacity: 0.65; }
.chip__remove:hover { opacity: 1; }

.picker__note { font-size: 0.86rem; color: var(--muted); margin: 0.2rem 0 0; }
.picker__note--warn { color: var(--accent); font-weight: 500; }

.field-note { margin: -0.4rem 0 1.1rem; font-size: 0.9rem; }
.field-note .muted { margin-left: 0.4rem; }

/* The policy agreement, set apart so it is not read as fine print. */
.field--agree { margin: 1.2rem 0 0.9rem; padding: 0.75rem 0.9rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--tint); }
.field--agree .checkbox { padding: 0; font-weight: 400; }

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-3); }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-3); }
.form__note { font-size: var(--step--1); color: var(--muted); }

.searchform { display: flex; gap: var(--s-2); }

.toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: var(--s-3);
	padding: var(--s-3);
	margin: var(--s-4) 0;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--surface);
}
.toolbar .field { margin: 0; }
.toolbar .field--act { display: flex; align-items: center; gap: var(--s-3); margin-left: auto; }

/* ---------- 14. Quote block -------------------------------- */

.quote {
	padding: var(--s-5);
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}
.quote--compact { padding: var(--s-4); box-shadow: none; }
.quote__title { margin-bottom: var(--s-2); }
.quote__intro { color: var(--muted); max-width: 60ch; margin-bottom: var(--s-4); }

/* ---------- 15. Course page -------------------------------- */

.course__head {
	padding: var(--s-4) 0 var(--s-5);
	background: var(--tint);
	border-bottom: 1px solid var(--rule-soft);
}
.course__headgrid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 21rem;
	gap: var(--s-5);
	align-items: start;
	margin-top: var(--s-3);
}
@media (max-width: 960px) { .course__headgrid { grid-template-columns: 1fr; } }

.course__eyebrow { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.course__eyebrow a { text-decoration: none; }
.course__title { font-size: var(--step-3); margin-bottom: var(--s-3); }
.course__standfirst { font-size: var(--step-1); color: var(--muted); max-width: 55ch; }
.course__facts { display: flex; flex-wrap: wrap; gap: var(--s-4); margin: var(--s-4) 0 0; padding: 0; list-style: none; font-size: var(--step--1); }
.course__facts li { display: flex; flex-direction: column; }

.booking {
	padding: var(--s-4);
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	position: sticky;
	top: var(--s-3);
}
@media (max-width: 960px) { .booking { position: static; } }
.booking__label { margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.booking__date { margin: 0.2rem 0 0.15rem; font-size: var(--step-2); font-weight: 800; letter-spacing: -0.02em; }
.booking__meta { margin: 0 0 var(--s-2); font-size: var(--step--1); color: var(--muted); }
.booking__badge { margin: 0 0 var(--s-3); }
.booking__act { margin-bottom: var(--s-2); }
.booking__act form { margin: 0; }
.booking__alt { margin: 0 0 var(--s-1); font-size: var(--step--1); }
.booking__fine { margin: var(--s-3) 0 0; padding-top: var(--s-3); border-top: 1px solid var(--rule-soft); font-size: 0.78rem; color: var(--faint); }

.course__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 17rem;
	gap: var(--s-5);
	padding: var(--s-5) 0 var(--s-6);
	align-items: start;
}
@media (max-width: 960px) { .course__body { grid-template-columns: 1fr; } }

.course__section { margin-bottom: var(--s-5); scroll-margin-top: 5rem; }
.course__more { margin: var(--s-3) 0 0; font-size: var(--step--1); }
.course__section h2 { font-size: var(--step-2); padding-bottom: var(--s-2); border-bottom: 1px solid var(--rule-soft); }

.course__aside { position: sticky; top: var(--s-3); display: grid; gap: var(--s-3); }
@media (max-width: 960px) { .course__aside { position: static; } }

.panel {
	padding: var(--s-4);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--surface);
}
.panel--quiet { background: var(--tint); }
.panel--form { max-width: 34rem; }
.panel--balance { border-color: rgb(var(--brand-rgb) / 0.3); }
.panel__title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-2); }
.panel p:last-child { margin-bottom: 0; }

.toc { margin: 0; padding: 0; list-style: none; font-size: var(--step--1); }
.toc li { border-top: 1px solid var(--rule-soft); }
.toc li:first-child { border-top: 0; }
.toc a { display: block; padding: 0.45rem 0; text-decoration: none; color: var(--ink); }
.toc a:hover, .toc .is-current a { color: var(--brand); font-weight: 600; }

.ticks { margin: 0 0 var(--s-3); padding: 0; list-style: none; }
.ticks li { position: relative; padding-left: 1.6rem; margin-bottom: 0.5rem; }
.ticks li::before {
	content: "";
	position: absolute;
	left: 0; top: 0.55em;
	width: 0.65rem; height: 0.35rem;
	border-left: 2px solid var(--go);
	border-bottom: 2px solid var(--go);
	transform: rotate(-45deg);
}

.outline { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.outline__item { display: flex; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--rule-soft); }
.outline__item:last-child { border-bottom: 0; }
.outline__num { flex: 0 0 auto; font-family: var(--mono); font-size: 0.8rem; font-weight: 700; color: var(--faint); padding-top: 0.15rem; }
.outline__body strong { display: block; }
.outline__body span { display: block; color: var(--muted); font-size: var(--step--1); }

.steps { margin: 0 0 var(--s-3); padding-left: 1.3rem; }
.steps li { margin-bottom: 0.5rem; }
.steps--lg li { margin-bottom: var(--s-2); }

/* ---------- 16. Prose -------------------------------------- */

/* ---------- Landing pages ----------
 *
 * A hand built page that brings its own layout. Deliberately given very
 * little: the width, the vertical rhythm, and readable defaults for the
 * lists and headings that a page written in the editor will contain.
 * Anything more would fight the page rather than hold it.
 */
.landing { padding-bottom: var(--s-6); }

/*
 * One column, one measure.
 *
 * The first cut of this held paragraphs to a 68ch measure and left the
 * hero, the course cards and the FAQ blocks to run the full width of the
 * container. Every rule was defensible on its own, and the page as a
 * whole looked unfinished: text stopping well short of a card that
 * carried on past it, with no edge for the eye to follow down the page.
 * Half the page narrow and half of it wide reads as a mistake, which is
 * what it was.
 *
 * So the measure sits on the column rather than on the paragraph. Prose,
 * course cards, FAQ items and the closing panel all begin and end at the
 * same two edges, and nothing inside the page declares a width of its
 * own. Moving the measure outwards also widened it a little, because a
 * measure that has to hold a card as well as a sentence can afford to.
 */
.landing__body {
	--measure: 80ch;
	padding-top: var(--s-4);
}
.landing__body > * {
	max-width: var(--measure);
	margin-inline: auto;
}

/*
 * The last thing in a block does not need a gap under it.
 *
 * Every paragraph carries a margin below it, including the one that ends
 * a section, so the space between two sections was the section gap plus
 * a stray paragraph margin that had nothing under it to be separated
 * from. One rem, everywhere, invisible in the source and obvious on the
 * page once you know to look.
 */
.lp-hero > *:last-child,
.lp-section > *:last-child,
.lp-cta > *:last-child,
.pick > *:last-child,
.faq__item > *:last-child,
.quiz li > *:last-child { margin-bottom: 0; }

/* The bullets. A page built in the editor expects a list to look like a
   list, and every list style in this file is switched off for a specific
   component, so page content needs saying explicitly. */
/*
 * Components for a landing page written in the editor.
 *
 * The Power BI page arrived with a style attribute on every element,
 * including a hardcoded brand blue, because there was nothing here for
 * it to use. That made the page long, unreadable to edit, and immune to
 * the brand color in the Customizer: changing the site color left one
 * page still blue.
 *
 * These are the four shapes that page actually needed, and they take
 * their colors from the same tokens as everything else.
 */
.lp-hero {
	padding: var(--s-6) var(--s-5);
	background:
		radial-gradient(900px 380px at 12% -20%, rgb(var(--brand-rgb) / 0.10), transparent 62%),
		var(--tint);
	border-radius: var(--radius);
	margin-bottom: var(--s-5);
}
.lp-hero h1 { color: var(--brand); }
.lp-hero > p { color: var(--muted); font-size: var(--step-1); margin-bottom: 0; }

/*
 * Three across, or one. Never two and a stray.
 *
 * Left with flex-wrap these fell to two on the top row and one orphaned
 * underneath, which reads as a mistake rather than a layout. A fixed
 * three column grid holds the row together and drops to a single column
 * where three genuinely will not fit.
 */
.lp-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s-4);
	margin: var(--s-4) 0 0;
	padding: var(--s-3) 0 0;
	border-top: 1px solid var(--rule);
	list-style: none;
}
.lp-stats li { margin: 0; }
.lp-stats strong { display: block; font-size: var(--step-2); color: var(--brand); line-height: 1.15; }
.lp-stats span { color: var(--muted); font-size: var(--step--1); }

@media (max-width: 640px) {
	.lp-stats { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); text-align: left; }
}

/*
 * The gap between sections, once rather than twice.
 *
 * This was a margin below every section plus a padding above the next
 * one, which is nearly six rems of white between two paragraphs with a
 * hairline lost somewhere in the middle of it. Each number looked
 * reasonable written down. Added together on a page of ten short
 * sections they turned a guide into a scroll.
 *
 * The rule is what separates the sections, so it only needs enough air
 * either side to read as a divider rather than as an accident.
 */
.lp-section { margin-bottom: var(--s-3); }
.lp-section > h2 { color: var(--brand); font-size: var(--step-2); }

/* A guide is read by skimming the headings, so they need to be findable
   without being shouted. */
.lp-section + .lp-section { padding-top: var(--s-3); border-top: 1px solid var(--rule-soft); }

/* The last one before the closing panel, which brings its own weight. */
.lp-section + .lp-cta { margin-top: var(--s-5); }

.lp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--s-4); margin-top: var(--s-4); }
.lp-card { padding: var(--s-4); background: var(--tint); border-left: 3px solid var(--brand); border-radius: 0 var(--radius) var(--radius) 0; }
.lp-card h3 { color: var(--brand); font-size: var(--step-0); margin-bottom: var(--s-2); }
.lp-card p:last-child, .lp-card ul:last-child { margin-bottom: 0; }

/* A course somebody can book, as opposed to a block of explanation. */
.lp-card--course { background: var(--surface); border: 1px solid var(--rule); border-left-width: 1px; border-radius: var(--radius); }
.lp-card--course.is-lead { border-color: var(--brand); box-shadow: var(--shadow); }
.lp-card__code { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }

.lp-cta { padding: var(--s-5); background: var(--brand); color: #fff; border-radius: var(--radius); text-align: center; }
.lp-cta h2 { color: #fff; }
.lp-cta p { color: rgb(255 255 255 / 0.85); max-width: 50ch; margin-inline: auto; }
.lp-cta .btn { background: #fff; color: var(--brand); border-color: #fff; }
.lp-cta .btn:hover { background: var(--tint); color: var(--brand-dark); }
.lp-cta__acts { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-4); }

/*
 * A recommended course inside a guide.
 *
 * The facts under it are read from the catalog when the page is served
 * rather than typed into the page, so the length and the price on a
 * guide cannot drift away from the course they describe.
 */
/*
 * Symmetrical margins so a run of cards reads as one list.
 *
 * With more space below than above, four cards in a row came out as four
 * separate things that happened to be near each other, and the gaps
 * between them were wider than the gap between the last one and the
 * paragraph that followed. Equal margins collapse between siblings, so
 * the stack tightens and the space around the group stays.
 */
.pick { padding: var(--s-4); background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--brand); border-radius: 0 var(--radius) var(--radius) 0; margin: var(--s-4) 0; }
.pick__title { font-size: var(--step-1); margin-bottom: var(--s-2); }
.pick__title a { text-decoration: none; }
.pick__title a:hover { text-decoration: underline; }
.pick__why { margin-bottom: var(--s-3); color: var(--muted); }
.pick__facts { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin: 0; padding: 0; list-style: none; font-size: var(--step--1); font-weight: 600; }
.pick__facts li { margin: 0; }
.pick__facts li + li::before { content: '\00b7'; margin-right: var(--s-3); color: var(--faint); font-weight: 400; }

/*
 * The FAQ. Structured rather than styled: the plugin reads these to
 * publish the questions as structured data, so an assistant asked how
 * long Power BI takes to learn can quote the answer on the page.
 */
.faq { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.faq__item { padding: var(--s-4); background: var(--tint); border-left: 3px solid var(--brand); border-radius: 0 var(--radius) var(--radius) 0; }
.faq__item h3 { color: var(--brand); font-size: var(--step-0); margin-bottom: var(--s-2); }

/*
 * Two columns where there is room to have them.
 *
 * "does the content have to be so narrow" has now come up twice, and
 * widening the measure is the wrong answer to it: a paragraph read
 * across a thousand pixels is harder to follow, not easier, because the
 * eye loses its place on the way back to the start of the next line.
 *
 * The page looks narrow because nothing in it uses the width. Six
 * independent questions have no reason to be stacked in one column, and
 * neither does a list of one line answers. Side by side they fill the
 * page without asking anybody to read a longer line, which is what the
 * space was actually for.
 */
@media (min-width: 60rem) {
	.faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/*
 * The self assessment.
 *
 * Written as a plain numbered list it read as steps to work through in
 * order, which is the opposite of what it is: four independent checks,
 * and the reader stops at whichever one is true of them. Separating the
 * answer from the question, and letting them sit side by side, says
 * that. A tight ordered list says the other thing.
 */
.quiz {
	display: grid;
	gap: var(--s-3);
	margin: var(--s-4) 0 var(--s-3);
	padding: 0;
	list-style: none;
	counter-reset: quiz;
}

@media (min-width: 48rem) {
	.quiz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.quiz > li {
	position: relative;
	margin: 0;
	padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 2rem);
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	counter-increment: quiz;
}
.quiz > li::before {
	content: counter( quiz );
	position: absolute;
	top: var(--s-4);
	left: var(--s-4);
	width: 1.5rem;
	height: 1.5rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--brand);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1;
}
.quiz__q { margin-bottom: var(--s-2); font-weight: 600; }
.quiz__a { margin: 0; color: var(--muted); font-size: var(--step--1); }
.quiz__a strong { color: var(--brand); font-weight: 600; }

/*
 * The summary at the end of a guide: a situation, and what to take.
 *
 * This was a bulleted list of "bold phrase, arrow, answer", which is how
 * you write a summary in notes and not how you present one. Bullets say
 * "here are some points". What the section actually contains is a set of
 * pairs, every one the same shape, and the reader is scanning for the
 * one row that describes them rather than reading down the list.
 *
 * So it is laid out as pairs. The situation holds a column of its own,
 * which makes the left edge scannable, and the rules between rows do the
 * work the bullets were failing to do. Two columns of bullets made it
 * worse, because it broke the one thing worth having: a single column of
 * situations you can run your eye down.
 */
.pathways {
	margin: var(--s-4) 0 var(--s-3);
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--rule);
}
.pathways > li {
	display: grid;
	gap: var(--s-1) var(--s-4);
	margin: 0;
	padding: var(--s-3) 0;
	border-bottom: 1px solid var(--rule);
	line-height: 1.5;
}

@media (min-width: 40rem) {
	.pathways > li { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: baseline; }
}

.pathways__if { font-weight: 600; color: var(--brand); }
.pathways__then { color: var(--ink); }

/*
 * Bullets for what the editor wrote, and for nothing else.
 *
 * This has to be said out loud, because every list style in this file is
 * switched off for a component and a page written in the editor still
 * expects a list to look like a list. Said as ".landing__body ul" it was
 * said too broadly: it reached past editor content and into the
 * components themselves, and being both later in the file and more
 * specific than .lp-stats it won, putting a bullet beside every figure
 * in the hero and every fact under a course card.
 *
 * That is the third time a rule in this file has quietly overruled a
 * component, so it is worth naming the line rather than patching the
 * symptom. A component list carries a class. A list somebody typed into
 * the editor does not. :not([class]) is that line, and it means a new
 * component never has to remember to defend itself here.
 */
.landing__body ul:not([class]),
.landing__body ol:not([class]) { padding-left: 1.4rem; }
.landing__body ul:not([class]) { list-style: disc; }
.landing__body ol:not([class]) { list-style: decimal; }
.landing__body ul:not([class]) > li,
.landing__body ol:not([class]) > li { margin-bottom: 0.4rem; line-height: 1.6; }
.landing__body img { border-radius: var(--radius); }

/* ---------- Guides ----------
 *
 * The link out of a listing and into the page that explains it. Given a
 * band rather than a sentence because it is competing with a list of
 * course titles for the attention of somebody who is already unsure, and
 * a link that reads as part of the prose loses that competition.
 *
 * Deliberately not a call to action color. It is help, not an offer,
 * and the two should not look the same.
 */
.guide-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	margin-top: var(--s-4);
	padding: var(--s-3) var(--s-4);
	background: var(--tint);
	border-left: 3px solid var(--brand);
	border-radius: 0 var(--radius) var(--radius) 0;
}
.guide-band__lead { margin: 0; font-weight: 600; color: var(--brand); }
.guide-band__act { margin: 0; }

/* On a course page the same link is a note, not a band: the reader is
   already on the thing they came for and only needs a way back out. */
.guide-note { margin: 0 0 var(--s-3); font-size: var(--step--1); }

.guide-list { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.guide-list__item { padding: var(--s-4); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); }
.guide-list__title { font-size: var(--step-1); margin-bottom: var(--s-2); }
.guide-list__title a { text-decoration: none; }
.guide-list__title a:hover { text-decoration: underline; }
.guide-list__blurb { margin-bottom: var(--s-2); color: var(--muted); }
.guide-list__covers { margin: 0; font-size: var(--step--1); }

.prose { max-width: 68ch; }
.prose--page { padding: var(--s-5) 0 var(--s-6); }
.prose h2 { margin-top: var(--s-5); font-size: var(--step-2); }
.prose h3 { margin-top: var(--s-4); }
.prose > *:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: 0.4rem; }
.prose blockquote {
	margin: var(--s-4) 0;
	padding: var(--s-2) 0 var(--s-2) var(--s-4);
	border-left: 3px solid var(--brand);
	color: var(--muted);
	font-size: var(--step-1);
}

/* ---------- 17. Schedule page, cart, account --------------- */

.schedule-page { padding: var(--s-4) 0 var(--s-6); }
.schedule-page__foot { margin-top: var(--s-4); }

.pager { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: var(--s-5) 0 0; }
.pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.35rem;
	padding: 0.45rem 0.6rem;
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	text-decoration: none;
	font-size: var(--step--1);
	font-weight: 600;
	color: var(--ink);
}
.pager .page-numbers:hover { border-color: var(--brand); color: var(--brand); }
.pager .page-numbers.current { background: var(--brand); border-color: var(--brand); color: #fff; }

.cart-page { padding: var(--s-5) 0 var(--s-6); }
.cart-grid { display: grid; grid-template-columns: minmax(0, 1fr) 25rem; gap: var(--s-5); align-items: start; }
@media (max-width: 960px) { .cart-grid { grid-template-columns: 1fr; } }

.line {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--s-3);
	padding: var(--s-4) 0;
	border-bottom: 1px solid var(--rule-soft);
}
.line:first-child { padding-top: 0; }
.line__title { font-size: var(--step-1); margin-bottom: 0.2rem; }
.line__title a { text-decoration: none; color: var(--ink); }
.line__title a:hover { color: var(--brand); }
.line__meta { margin: 0 0 var(--s-2); font-size: var(--step--1); color: var(--muted); }
.line__badge { margin: 0; }
.line__side { text-align: right; display: grid; gap: var(--s-2); justify-items: end; }
.line__qty { display: flex; align-items: center; gap: 0.4rem; margin: 0; }
.line__qty label { margin: 0; font-size: 0.78rem; color: var(--muted); }
.line__qty input { width: 4.2rem; text-align: center; }
.line__price { margin: 0; font-size: var(--step-1); font-weight: 800; font-variant-numeric: tabular-nums; }

.cart-total {
	display: flex; justify-content: space-between; align-items: baseline;
	margin: var(--s-4) 0 0; padding-top: var(--s-3);
	border-top: 2px solid var(--ink);
	font-size: var(--step-1);
}
.cart-total strong { font-size: var(--step-2); font-variant-numeric: tabular-nums; }
.cart-total__note { font-size: var(--step--1); color: var(--muted); }

.checkout {
	padding: var(--s-4);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--tint);
	position: sticky;
	top: var(--s-3);
}
@media (max-width: 960px) { .checkout { position: static; } }
.checkout__title { font-size: var(--step-1); }
.checkout__fine { margin: var(--s-3) 0 0; font-size: 0.78rem; color: var(--muted); }

.receipt { max-width: 44rem; padding: var(--s-5); border: 1px solid rgb(22 101 52 / 0.3); background: rgb(22 101 52 / 0.05); border-radius: var(--radius); }
.receipt__ref { font-family: var(--mono); font-size: var(--step-1); margin-bottom: var(--s-3); }

.account { padding: var(--s-5) 0 var(--s-6); }
.account__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule-soft); }
.account__head p { margin: 0; }
.account__head form { margin: 0; }
.account__section { margin-bottom: var(--s-5); }
.account__section h2 { font-size: var(--step-1); padding-bottom: var(--s-2); border-bottom: 1px solid var(--rule-soft); }

.balance { font-size: var(--step-3); font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; margin: 0 0 var(--s-3); }

.mini { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.mini th { text-align: left; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); padding-bottom: 0.3rem; border-bottom: 1px solid var(--rule); }
.mini td { padding: 0.4rem 0; border-bottom: 1px solid var(--rule-soft); }
.mini td:last-child { text-align: right; font-variant-numeric: tabular-nums; }

.booking-list { margin: 0; padding: 0; list-style: none; }
.booking-item {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3);
	padding: var(--s-3) 0;
	border-bottom: 1px solid var(--rule-soft);
}
.booking-item h3 { margin: 0 0 0.2rem; font-size: var(--step-0); }
.booking-item p { margin: 0; font-size: var(--step--1); }
.booking-item__side { display: grid; gap: 0.3rem; justify-items: end; font-size: 0.78rem; }
.booking-list--quiet { opacity: 0.75; }

/* ---------- 18. Quote page, government, contact ------------ */

.quote-page, .contact {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 20rem;
	gap: var(--s-5);
	padding: var(--s-5) 0 var(--s-6);
	align-items: start;
}
@media (max-width: 900px) { .quote-page, .contact { grid-template-columns: 1fr; } }
.quote-page__aside, .contact__details { display: grid; gap: var(--s-3); }
.contact { grid-template-columns: 20rem minmax(0, 1fr); }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }

.big-phone { font-size: var(--step-2); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.2rem; }
.big-phone a { text-decoration: none; }

.gov { padding: var(--s-5) 0 var(--s-6); }
.gov__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--s-4); margin-bottom: var(--s-5); }
.gov__card { padding: var(--s-4); border: 1px solid var(--rule); border-left: 4px solid var(--brand); border-radius: var(--radius); background: var(--surface); }
.gov__card h2 { font-size: var(--step-1); margin-bottom: var(--s-1); }
.gov__number { font-family: var(--mono); font-size: var(--step-1); font-weight: 700; color: var(--brand); margin: 0 0 var(--s-2); }

.pitch { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr)); gap: var(--s-4); }
.pitch__item { padding: var(--s-4); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.pitch__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.5rem; height: 2.5rem; margin-bottom: var(--s-2);
	border-radius: 8px; background: var(--wash); color: var(--brand);
}
.pitch__item h3 { font-size: var(--step-1); margin-bottom: var(--s-2); }
.pitch__item p { margin: 0; color: var(--muted); font-size: 0.95rem; }

.pitch--three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.pitch--three .pitch__item h3 { color: var(--brand); font-size: var(--step-1); }

.partners {
	display: grid;
	/* Wider cells than before: a 5:1 logo capped only by height ran out
	   of the old 13rem column entirely. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--s-3);
	margin: 0;
	padding: 0;
	list-style: none;
}
.partners__item {
	/*
	 * Grid rather than flex. place-items centers on both axes in one
	 * declaration and does not depend on a percentage height resolving
	 * against a parent that only has a min-height, which is what left
	 * these sitting slightly off in their boxes.
	 */
	display: grid;
	place-items: center;
	min-height: 7.5rem;
	padding: var(--s-4) var(--s-3);
	text-align: center;
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	color: var(--muted);
	font-size: var(--step--1);
	font-weight: 600;
	line-height: 1.35;
}
/*
 * The whole tile is the target, not just the pixels of the logo. The
 * link fills its grid cell and centers its one child the same way.
 */
.partners__item a {
	display: grid;
	place-items: center;
	inline-size: 100%;
	block-size: 100%;
	text-decoration: none;
	color: inherit;
}
.partners__item:has(a):hover { border-color: var(--brand); box-shadow: 0 2px 10px rgb(var(--ink-rgb) / 0.06); }
.partners__item a:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 4px; }
/*
 * Real partner logos are not one shape. These four run from 1.45:1 to
 * 5.32:1, and capping only the height sent the wide ones straight out of
 * the cell while leaving the tall one looking shrunken.
 *
 * Both dimensions are capped instead, so each logo is limited by
 * whichever it runs into first: a wide lockup by the width of the cell,
 * a stacked one by the height. Nothing overflows and nothing is
 * stretched.
 */
.partners__item img {
	max-width: 100%;
	max-height: 4rem;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	margin: auto;
	filter: grayscale(1);
	opacity: 0.72;
	transition: filter 0.25s ease, opacity 0.25s ease;
}

/*
 * Gray at rest, full color under the pointer.
 *
 * The strip is a row of other people's brands sitting on a page that is
 * meant to be about ISInc, and four saturated logos side by side pull
 * harder than the headline above them. Desaturating settles that, and
 * bringing the color back on hover keeps the badge recognizable at the
 * moment somebody is actually looking at it.
 *
 * Focus counts as looking: a keyboard user gets the same thing.
 */
.partners__item:hover img,
.partners__item:focus-within img {
	filter: none;
	opacity: 1;
}

/* Somebody who has asked their system to keep motion down still gets the
   color, just without it fading in. */
@media (prefers-reduced-motion: reduce) {
	.partners__item img { transition: none; }
}

/* A tile holding a logo needs less breathing room than one holding a
   name, because the artwork carries its own whitespace already. */
.partners__item--logo { padding: var(--s-3) var(--s-4); }

/* Add .partners--color on the list for full color all the time.
   The British spelling stays as an alias rather than being dropped. It
   was the documented name for a while, and a class quietly ceasing to
   do anything is the exact kind of silent failure this file has already
   been bitten by twice. */
.partners--color .partners__item img,
.partners--colour .partners__item img { filter: none; opacity: 1; }

.excellence {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: var(--s-5);
	align-items: start;
}
@media (max-width: 900px) { .excellence { grid-template-columns: 1fr; } }
.excellence__story h2 { font-size: var(--step-3); }
.excellence__story p { color: var(--muted); max-width: 56ch; }

.impact {
	padding: var(--s-5);
	border-radius: var(--radius);
	background: linear-gradient(160deg, var(--brand-dark), var(--brand));
	color: #fff;
}
.impact__title {
	margin: 0 0 var(--s-4);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: rgb(255 255 255 / 0.75);
}
.impact ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-4); }
.impact__value {
	display: block;
	font-size: var(--step-3);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.impact__label { display: block; margin-top: 0.2rem; font-size: var(--step--1); color: rgb(255 255 255 / 0.8); }

.utility__login { font-weight: 600; }

.credentials {
	margin: var(--s-4) 0 0;
	padding-top: var(--s-3);
	border-top: 1px solid var(--rule-soft);
	font-size: var(--step--1);
	font-weight: 600;
	color: var(--muted);
	letter-spacing: 0.01em;
}

.edit-hint { margin-top: var(--s-3); font-size: var(--step--1); }
.edit-hint a { color: var(--muted); }

.other-results { margin-top: var(--s-5); }
.link-list { margin: 0; padding: 0; list-style: none; }
.link-list li { padding: var(--s-2) 0; border-bottom: 1px solid var(--rule-soft); }
.link-list a { font-weight: 600; text-decoration: none; }
.link-list .muted { display: block; font-size: var(--step--1); }

/* ---------- 19. Footer ------------------------------------- */

.site-foot {
	margin-top: var(--s-6);
	padding: var(--s-6) 0 var(--s-4);
	background: var(--ink);
	color: rgb(255 255 255 / 0.72);
	font-size: 0.92rem;
}
.site-foot a { color: rgb(255 255 255 / 0.9); text-decoration: none; }
.site-foot a:hover { color: #fff; text-decoration: underline; }

.foot__grid {
	display: grid;
	grid-template-columns: 1.6fr repeat(4, 1fr);
	gap: var(--s-5);
}
@media (max-width: 960px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot__grid { grid-template-columns: 1fr; } }

.foot__name { font-size: var(--step-1); font-weight: 700; color: #fff; margin-bottom: var(--s-2); }
.foot__addr, .foot__contact, .foot__hours { margin-bottom: var(--s-2); }
.foot__hours { font-size: 0.84rem; color: rgb(255 255 255 / 0.55); }
.foot__head { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: rgb(255 255 255 / 0.5); margin-bottom: var(--s-2); }
.foot__list { margin: 0; padding: 0; list-style: none; }
.foot__list li { margin-bottom: 0.45rem; }

.foot__legal {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3);
	margin-top: var(--s-5); padding-top: var(--s-3);
	border-top: 1px solid rgb(255 255 255 / 0.12);
	font-size: 0.8rem;
	color: rgb(255 255 255 / 0.5);
}
.foot__legal p { margin: 0; }
.foot__legal-links { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }

/* ---------- 20. Print -------------------------------------- */

@media print {
	.site-head, .site-foot, .booking__act, .quote, .band--brand, .nav, .toolbar { display: none !important; }
	body { font-size: 11pt; color: #000; background: #fff; }
	.wrap { width: 100%; }
	.table-wrap { border: 0; }
	.schedule th, .schedule td { border-bottom: 1px solid #ccc; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* --------------------------------------------------------------------------
   Dev only: the sign in link printed on screen when a box cannot send mail.
   Deliberately loud so it is never mistaken for part of the design.
   -------------------------------------------------------------------------- */
.isinc-devlink {
	background: #fff8e1;
	border-bottom: 2px solid #f0b429;
	color: #4a3800;
	padding: .75rem 1.25rem;
	font-size: .9rem;
	line-height: 1.5;
	word-break: break-all;
}
.isinc-devlink a { color: #7a4b00; }
.isinc-devlink small { color: #6b5a2e; }

/*
 * The partner strip is styled once, in the home page section further up
 * this file, and nowhere else.
 *
 * There was a second copy of those rules here, left over from the first
 * pass at the strip. Being later in the same file it won every conflict:
 * `display: grid; place-items: center` on the link was overridden by
 * `display: block` from down here, so the logos sat off center however
 * many times the rule above was corrected, and the 4rem height cap was
 * quietly replaced by a 56px one. Two places styling one component is
 * how that happens. There is now one.
 */

/* An outline that arrived as markup rather than one line per module. */
.prose--outline h3 {
	font-size: 1.05rem;
	margin: var(--s-4) 0 var(--s-2);
	padding-top: var(--s-3);
	border-top: 1px solid var(--rule-soft);
}
.prose--outline h3:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

/* Administrator previewing somebody else's portal. Deliberately loud. */
.notice--warn {
	background: #fff8e1;
	border: 1px solid #f0b429;
	color: #4a3800;
}
.portal-preview { margin-bottom: var(--s-4); }
.portal-preview a { color: #7a4b00; }

/* --------------------------------------------------------------------------
   Course outline read out of the PDF: numbered modules, each with topics.
   -------------------------------------------------------------------------- */
.syllabus { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.syllabus__module { padding: var(--s-4) 0; border-top: 1px solid var(--rule-soft); }
.syllabus__module:first-child { border-top: 0; padding-top: 0; }
.syllabus__head {
	display: flex;
	align-items: baseline;
	gap: var(--s-3);
	margin: 0 0 var(--s-3);
	flex-wrap: wrap;
}
.syllabus__label {
	flex: 0 0 auto;
	font-family: var(--mono);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--accent);
	white-space: nowrap;
}
.syllabus__title { font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.syllabus__topics { margin: 0; padding-left: 1.1rem; }
.syllabus__topics li { margin: .3rem 0; color: var(--muted); }
.syllabus__flat { margin: 0; padding-left: 1.1rem; }

@media (max-width: 40rem) {
	.syllabus__head { gap: var(--s-2); }
}

/* Choosing between accounts one email address can reach. */
/* The "which account?" panel, which now appears on the account page and
   from the cart as well as in the portal, so the width lives here rather
   than inline on one of them. */
.panel--choose { max-width: 40rem; margin-bottom: var(--s-5); }
.portal-choices { list-style: none; margin: 0 0 var(--s-4); padding: 0; }
.portal-choices li { border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: var(--s-2); }
.portal-choices label { display: flex; align-items: baseline; gap: var(--s-3); padding: var(--s-3); cursor: pointer; }
.portal-choices label:hover { background: var(--tint); }
.portal-choices strong { flex: 0 0 auto; }
.portal-actions { display: flex; gap: var(--s-4); align-items: baseline; }

/* The six digit sign in code. Wide, spaced, unmistakably a code. */
/*
 * The six digit code box.
 *
 * It was 9ch wide, which sounds like plenty for six characters and is
 * not. The letter-spacing that makes a code readable also takes room:
 * each digit occupies 1ch of glyph plus 0.4em of space after it, so six
 * of them need about 6ch plus 2.4em, and the box held about 5.4em. The
 * fourth digit pushed the first one out of sight, and somebody typing a
 * code they were reading off their phone could no longer check it.
 *
 * The width is worked out from the same numbers rather than guessed at,
 * so changing the spacing or the length cannot silently break it again.
 */
.code-input {
	font-family: var(--mono);
	font-size: 1.5rem;
	letter-spacing: 0.4em;
	text-align: center;

	/* Six digits, the space after each one, and the padding. */
	inline-size: calc(6ch + (6 * 0.4em) + 1.2rem);
	max-inline-size: 100%;

	padding: 0.5rem 0.6rem;

	/*
	 * letter-spacing puts a gap after the last digit too, which drags
	 * centered text visibly left. Indenting by the same amount puts it
	 * back.
	 */
	text-indent: 0.4em;
}