/* Quranic Finance - How Qard Hasan works (WK111).

   Loaded on that page only, after qh-public.css and qh-impact.css (P2). A
   page for somebody who has never heard of Qard Hasan: one idea a section,
   a picture where a picture says it faster, and the ৳1,000 example (AN3),
   which moved here from the fund in depth with its styles. Words drawn
   straight on the page use the on-page colours (WK40); words in a card use
   the card's ink. */

.qh-guide {
	--g-line: var(--qh-sand-200);
	--g-soft: var(--qh-green-50);
	--g-ink: var(--qh-ink-900);
	--g-muted: var(--qh-sand-600);
}

.qh-guide .qh-imp-section {
	margin: 0 0 2.75rem;
	scroll-margin-top: 1.5rem;
}

/* ---- What the words mean -------------------------------------------------- */
.qh-guide-hero {
	display: grid;
	gap: 1.25rem;
	align-items: center;
	margin: 0 0 1.5rem;
	padding: 1.5rem;
	border: 1px solid var(--g-line);
	border-radius: var(--qh-r-card);
	background: var(--qh-ivory);
	box-shadow: var(--qh-shadow-sm);
	color: var(--g-ink);
}

.qh-guide-hero-text {
	min-width: 0;
}

.qh-guide-hero p {
	margin: 0 0 0.75rem;
	line-height: 1.65;
}

.qh-guide .qh-guide-eyebrow {
	margin: 0 0 0.5rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--qh-gold-700);
}

.qh-guide-eyebrow [lang="ar"] {
	font-size: 1.125rem;
	letter-spacing: 0;
	text-transform: none;
}

.qh-guide .qh-guide-lead {
	margin: 0 0 0.875rem;
	font: var(--qh-heading-weight) clamp( 1.375rem, 4.4vw, 2rem )/1.2 var(--qh-font);
	letter-spacing: -0.02em;
	color: var(--qh-green-600);
}

.qh-guide-refs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1rem;
	font-size: 0.875rem;
	color: var(--g-muted);
}

.qh-guide-refs ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.qh-guide-refs li {
	padding: 0.125rem 0.625rem;
	border-radius: 999px;
	background: var(--qh-gold-50);
	color: var(--qh-gold-700);
	font-weight: 600;
	font-variant-numeric: lining-nums tabular-nums;
}

.qh-guide-hero-art {
	max-width: 20rem;
	margin: 0 auto;
	width: 100%;
}

.qh-guide-art {
	display: block;
	width: 100%;
	height: auto;
}

.qh-ga-sun { fill: var(--qh-green-50); }
.qh-ga-loop { stroke: var(--qh-gold-400); }
.qh-ga-head { fill: var(--qh-gold-400); }
.qh-ga-wall { fill: var(--qh-green-500); }
.qh-ga-dome { fill: var(--qh-green-600); }
.qh-ga-moon { fill: var(--qh-gold-400); }
.qh-ga-door { fill: var(--qh-green-800); }
.qh-ga-ground { fill: var(--qh-sand-300); }
.qh-ga-coin circle { fill: var(--qh-gold-400); stroke: var(--qh-gold-600); stroke-width: 2; }
.qh-ga-coin text { fill: var(--qh-on-brand); font: 700 18px/1 var(--qh-font); }

@media ( min-width: 46rem ) {
	.qh-guide-hero {
		grid-template-columns: minmax( 0, 1.5fr ) minmax( 0, 1fr );
		padding: 2rem;
	}
}

/* ---- On this page ----------------------------------------------------------- */
.qh-guide-toc ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 2.5rem;
	padding: 0;
	list-style: none;
}

.qh-report .qh-guide-toc a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.85rem;
	border: 1px solid var(--g-line);
	border-radius: 999px;
	background: var(--qh-ivory);
	color: var(--qh-green-700);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.qh-report .qh-guide-toc a:hover,
.qh-report .qh-guide-toc a:focus-visible {
	border-color: var(--qh-green-600);
	background: var(--g-soft);
}

.qh-guide-toc .qh-ui-icon {
	width: 1rem;
	height: 1rem;
}

/* ---- The idea, in one picture ------------------------------------------- */
.qh-guide-idea {
	display: grid;
	gap: 1rem;
	align-items: start;
}

.qh-guide-cycle {
	padding: 1rem;
}

.qh-guide-cycle-svg {
	display: block;
	width: 100%;
	max-width: 24rem;
	height: auto;
	margin: 0 auto;
}

.qh-gc-track { fill: none; stroke: var(--qh-sand-100); stroke-width: 18; }
.qh-gc-arc { fill: none; stroke: var(--qh-green-600); stroke-width: 3; stroke-linecap: round; }
.qh-gc-arc--back { stroke: var(--qh-gold-500); stroke-dasharray: 6 6; }
.qh-gc-arc--in { stroke: var(--qh-gold-500); }
.qh-gc-tip { fill: var(--qh-green-600); }
.qh-gc-node { fill: var(--qh-green-600); }
.qh-gc-node--gold { fill: var(--qh-gold-400); }
.qh-gc-glyph { fill: var(--qh-on-brand); }
.qh-gc-glyph-text { fill: var(--qh-on-brand); font: 700 24px/1 var(--qh-font); }
.qh-gc-label { fill: var(--g-ink); font: 600 14px/1 var(--qh-font); }
.qh-gc-label--start { text-anchor: start; }
.qh-gc-mid { fill: var(--qh-gold-500); font: 700 44px/1 var(--qh-font); }
.qh-gc-mid-words { fill: var(--g-muted); font: 500 13px/1 var(--qh-font); }

.qh-guide-steps {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.qh-guide-step {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr );
	gap: 0.75rem;
	align-items: start;
	padding: 1rem;
	border: 1px solid var(--g-line);
	border-radius: var(--qh-r-tile);
	background: var(--qh-ivory);
	color: var(--g-ink);
}

.qh-guide-step--n {
	grid-template-columns: auto auto minmax( 0, 1fr );
}

.qh-guide-step p {
	margin: 0;
	line-height: 1.55;
	color: var(--g-muted);
}

.qh-guide .qh-guide-step-h {
	margin: 0 0 0.25rem;
	font-weight: 700;
	color: var(--g-ink);
}

.qh-guide-step-n {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.5rem;
	color: var(--qh-gold-700);
	font-variant-numeric: lining-nums tabular-nums;
}

.qh-guide-step-icon,
.qh-guide-who-icon {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--g-soft);
	color: var(--qh-green-600);
}

.qh-guide-step-icon .qh-ui-icon,
.qh-guide-who-icon .qh-ui-icon {
	width: 1.25rem;
	height: 1.25rem;
}

@media ( min-width: 46rem ) {
	.qh-guide-idea {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
		align-items: center;
	}
}

/* ---- Security for the loan ------------------------------------------------ */
.qh-guide-promises {
	display: grid;
	gap: 0.75rem;
	margin-top: 1rem;
}

.qh-guide-promise {
	padding: 1.125rem;
	border: 1px solid var(--g-line);
	border-radius: var(--qh-r-tile);
	background: var(--qh-ivory);
	color: var(--g-ink);
}

.qh-guide-promise > .qh-ui-icon {
	width: 1.75rem;
	height: 1.75rem;
	color: var(--qh-green-600);
}

.qh-guide-promise p {
	margin: 0;
	line-height: 1.55;
	color: var(--g-muted);
}

.qh-guide .qh-guide-promise-h {
	margin: 0.5rem 0 0.25rem;
	font-weight: 700;
	color: var(--g-ink);
}

@media ( min-width: 46rem ) {
	.qh-guide-promises {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

/* The imam's certificate: the one thing that matters most, in the brand's
   own green. */
.qh-guide-imam {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1.25rem 1.5rem;
	border-radius: var(--qh-r-card);
	background: var(--qh-green-600);
	color: var(--qh-green-50);
	box-shadow: var(--qh-shadow-md);
}

.qh-guide-imam > .qh-ui-icon {
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	color: var(--qh-gold-400);
}

.qh-guide-imam p {
	margin: 0;
	line-height: 1.6;
}

.qh-guide .qh-guide-imam-h {
	margin: 0 0 0.25rem;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--qh-on-brand);
}

/* ---- Who does what --------------------------------------------------------- */
.qh-guide-who-list {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( min( 100%, 15rem ), 1fr ) );
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.qh-guide-who-list > li {
	margin: 0;
	min-width: 0;
}

.qh-guide-who,
.qh-report a.qh-guide-who {
	display: block;
	height: 100%;
	box-sizing: border-box;
	padding: 1.125rem;
	border: 1px solid var(--g-line);
	border-radius: var(--qh-r-tile);
	background: var(--qh-ivory);
	color: var(--g-ink);
	text-decoration: none;
}

.qh-report a.qh-guide-who:hover,
.qh-report a.qh-guide-who:focus-visible {
	border-color: var(--qh-green-600);
	box-shadow: var(--qh-shadow-md);
}

.qh-guide-who p {
	margin: 0;
	line-height: 1.55;
	color: var(--g-muted);
}

.qh-guide .qh-guide-who-h {
	margin: 0.625rem 0 0.25rem;
	font-weight: 700;
	color: var(--g-ink);
}

.qh-guide-who .qh-fs-go {
	color: var(--qh-green-600);
}

.qh-guide-who--gold .qh-guide-who-icon {
	background: var(--qh-gold-400);
	color: var(--qh-on-brand);
}

/* ---- Two ways to give ------------------------------------------------------- */
.qh-guide-give {
	color: var(--g-ink);
	border-top: 4px solid var(--qh-green-600);
}

.qh-guide-give--loan {
	border-top-color: var(--qh-lapis-500);
}

.qh-guide-give > p {
	margin: 0 0 0.75rem;
	line-height: 1.6;
	color: var(--g-muted);
}

.qh-guide .qh-guide-give-tag {
	margin: 0 0 0.25rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--qh-green-600);
}

.qh-guide .qh-guide-give--loan .qh-guide-give-tag {
	color: var(--qh-lapis-500);
}

.qh-guide .qh-guide-give-h {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--g-ink);
}

.qh-guide-kinds {
	display: grid;
	gap: 0.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.qh-guide-kinds li {
	display: flex;
	gap: 0.625rem;
	align-items: flex-start;
	padding: 0.625rem 0.75rem;
	border-radius: 10px;
	background: var(--qh-sand-50);
}

.qh-guide-kinds .qh-flow-dot {
	margin-top: 0.3rem;
	flex: none;
}

.qh-guide-kinds div {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.qh-guide-kinds span {
	font-size: 0.875rem;
	color: var(--g-muted);
}

/* ---- A borrower's path ------------------------------------------------------ */
.qh-guide-path {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.qh-guide-path::before {
	content: "";
	position: absolute;
	top: 1.25rem;
	bottom: 1.25rem;
	left: 1.25rem;
	width: 2px;
	margin-left: -1px;
	background: var(--qh-green-200);
}

.qh-guide-path-step {
	position: relative;
	display: grid;
	grid-template-columns: 2.5rem minmax( 0, 1fr );
	gap: 1rem;
	padding: 0 0 1.25rem;
	color: var(--qh-on-page);
}

.qh-guide-path-step:last-child {
	padding-bottom: 0;
}

.qh-guide-path-dot {
	position: relative;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--qh-green-600);
	color: var(--qh-on-brand);
}

.qh-guide-path-step:last-child .qh-guide-path-dot {
	background: var(--qh-gold-400);
}

.qh-guide-path-dot .qh-ui-icon {
	width: 1.125rem;
	height: 1.125rem;
}

.qh-guide-path-step p {
	margin: 0;
	line-height: 1.55;
	color: var(--qh-on-page-muted);
}

.qh-guide .qh-guide-path-h {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0.4rem 0 0.25rem;
	font-weight: 700;
	color: var(--qh-on-page);
}

.qh-guide-path-h span {
	color: var(--qh-on-page-muted);
	font-variant-numeric: lining-nums tabular-nums;
}

.qh-report a.qh-guide-path-go {
	color: var(--qh-on-page-link);
	font-weight: 600;
	white-space: nowrap;
}

/* ---- Open for anyone to check: the books ------------------------------------ */
.qh-guide-facts {
	display: grid;
	gap: 0.875rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.qh-guide-facts li {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	color: var(--qh-on-page);
}

.qh-guide-facts .qh-ui-icon {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--qh-on-page-link);
}

.qh-guide-facts div {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	line-height: 1.55;
}

.qh-guide-facts span {
	color: var(--qh-on-page-muted);
}

@media ( min-width: 46rem ) {
	.qh-guide-facts {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

.qh-guide .qh-guide-links-h {
	margin: 1.5rem 0 0.5rem;
	font-weight: 700;
	color: var(--qh-on-page);
}

.qh-guide-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.qh-report .qh-guide-links a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--g-line);
	border-radius: var(--qh-r-control);
	background: var(--qh-ivory);
	color: var(--qh-green-700);
	font-weight: 600;
	text-decoration: none;
}

.qh-report .qh-guide-links a:hover,
.qh-report .qh-guide-links a:focus-visible {
	border-color: var(--qh-green-600);
}

.qh-guide-links .qh-ui-icon {
	width: 1.125rem;
	height: 1.125rem;
}

/* ---- Open for anyone to check -------------------------------------------- */
.qh-guide-open {
	color: var(--g-ink);
}

.qh-guide .qh-guide-open-h {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
	font-weight: 700;
}

.qh-guide-open-h .qh-ui-icon {
	width: 1.5rem;
	height: 1.5rem;
}

.qh-guide-open--yes .qh-guide-open-h { color: var(--qh-green-600); }
.qh-guide-open--no .qh-guide-open-h { color: var(--qh-terracotta-700); }

.qh-guide-open ul {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0 0 0 1.25rem;
	line-height: 1.55;
	color: var(--g-muted);
}

.qh-guide-open--yes li::marker { color: var(--qh-green-600); }
.qh-guide-open--no li::marker { color: var(--qh-terracotta-500); }

/* ---- The fund today ------------------------------------------------------- */
.qh-guide-more {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin: 1.25rem 0 0;
}

.qh-report a.qh-guide-more-quiet {
	color: var(--qh-on-page-link);
	font-weight: 600;
}

/* ---- Questions people ask ------------------------------------------------- */
.qh-guide-qs {
	display: grid;
	gap: 0.5rem;
}

.qh-guide-q {
	border: 1px solid var(--g-line);
	border-radius: var(--qh-r-tile);
	background: var(--qh-ivory);
	color: var(--g-ink);
}

.qh-guide-q summary {
	position: relative;
	padding: 1rem 2.75rem 1rem 1.125rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.qh-guide-q summary::-webkit-details-marker {
	display: none;
}

.qh-guide-q summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 1.125rem;
	transform: translateY( -50% );
	font-size: 1.375rem;
	font-weight: 500;
	color: var(--qh-green-600);
}

.qh-guide-q[open] summary::after {
	content: "-";
}

.qh-guide-q summary:focus-visible {
	outline: 2px solid var(--qh-green-600);
	outline-offset: 2px;
	border-radius: var(--qh-r-tile);
}

.qh-report .qh-guide-q a {
	color: var(--qh-green-700);
	font-weight: 600;
}

.qh-guide-q p {
	margin: 0;
	padding: 0 1.125rem 1.125rem;
	line-height: 1.65;
	color: var(--g-muted);
}

/* ---- Who can borrow: the do's and don'ts' own two columns ------------------ */
.qh-guide-dos .qh-dos-col li b {
	display: block;
}

/* ---- What we check before a loan ------------------------------------------- */
.qh-guide-checks {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( min( 100%, 15rem ), 1fr ) );
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.qh-guide-checks li {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	padding: 1rem;
	border: 1px solid var(--g-line);
	border-radius: var(--qh-r-tile);
	background: var(--qh-ivory);
	color: var(--g-ink);
}

.qh-guide-checks .qh-ui-icon {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--qh-green-600);
}

.qh-guide-checks div {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	line-height: 1.5;
}

.qh-guide-checks span {
	color: var(--g-muted);
	font-size: 0.9375rem;
}

/* ---- Step by step: the two paths side by side ----------------------------- */
.qh-guide-paths {
	display: grid;
	gap: 2rem;
}

.qh-guide .qh-guide-paths-h {
	margin: 0 0 1rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--qh-on-page-link);
}

.qh-guide-paths--donor .qh-guide-path-dot {
	background: var(--qh-gold-400);
}

.qh-guide-paths--donor .qh-guide-path::before {
	background: var(--qh-gold-200);
}

@media ( min-width: 46rem ) {
	.qh-guide-paths {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

/* ---- When an instalment falls due ------------------------------------------ */
.qh-guide-steps--two {
	margin-bottom: 1rem;
}

@media ( min-width: 46rem ) {
	.qh-guide-steps--two {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

.qh-guide-fork {
	display: grid;
	gap: 1rem;
}

@media ( min-width: 46rem ) {
	.qh-guide-fork {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1.4fr );
		align-items: start;
	}
}

.qh-guide-fork-col {
	color: var(--g-ink);
	border-top: 4px solid var(--qh-green-600);
}

.qh-guide-fork-col--help {
	background: var(--qh-green-50);
}

.qh-guide-fork-col--firm {
	border-top-color: var(--qh-saffron-500);
}

.qh-guide .qh-guide-fork-h {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
	font-weight: 700;
	color: var(--qh-green-700);
}

.qh-guide .qh-guide-fork-col--firm .qh-guide-fork-h {
	color: var(--qh-saffron-700);
}

.qh-guide-fork-h .qh-ui-icon {
	width: 1.5rem;
	height: 1.5rem;
}

.qh-guide-fork-under {
	margin: -0.25rem 0 0.75rem;
	font-size: 0.875rem;
	color: var(--g-muted);
}

.qh-guide-ticks {
	display: grid;
	gap: 0.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.qh-guide-ticks li {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	line-height: 1.5;
}

.qh-guide-ticks svg {
	flex: none;
	margin-top: 0.1rem;
	color: var(--qh-green-600);
}

/* Each step only if the one before fails: a ladder that darkens as it goes. */
.qh-guide-ladder {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.qh-guide-ladder li {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	padding: 0.625rem 0.75rem;
	border-radius: 10px;
	background: var(--qh-saffron-50);
	line-height: 1.5;
}

.qh-guide-ladder-n {
	display: grid;
	place-items: center;
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--qh-saffron-500);
	color: var(--qh-ink-900);
	font-weight: 700;
	font-variant-numeric: lining-nums tabular-nums;
}

.qh-guide-ladder li:nth-child( n + 4 ) {
	background: var(--qh-terracotta-50);
}

.qh-guide-ladder li:nth-child( n + 4 ) .qh-guide-ladder-n {
	background: var(--qh-terracotta-500);
	color: var(--qh-on-brand);
}

/* ---- The consequences, as the loan application shows them ----------------- */
.qh-guide .qh-guide-consequences .qh-repay-title {
	margin: 0 0 0.75rem;
	font: var(--qh-heading-weight) 1.75rem/1.2 var(--qh-font);
	letter-spacing: -0.02em;
	color: var(--qh-green-600);
}

/* ---- Questions, for donors and for borrowers ------------------------------ */
.qh-guide-faq {
	display: grid;
	gap: 1.5rem;
	align-items: start;
}

@media ( min-width: 46rem ) {
	.qh-guide-faq {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

.qh-guide .qh-guide-qs-h {
	margin: 0 0 0.25rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--qh-on-page-link);
}

/* ---- Be part of it -------------------------------------------------------- */
.qh-guide-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1rem;
}

.qh-report a.qh-guide-cta-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	border-radius: var(--qh-r-control);
	background: var(--qh-gold-400);
	color: var(--qh-ink-900);
	font-weight: 700;
	text-decoration: none;
}

.qh-report a.qh-guide-cta-link:hover,
.qh-report a.qh-guide-cta-link:focus-visible {
	background: var(--qh-gold-300);
	color: var(--qh-ink-900);
}

.qh-guide-cta-link .qh-ui-icon {
	width: 1.125rem;
	height: 1.125rem;
}

@media print {
	.qh-guide-toc,
	.qh-guide-cta,
	.qh-guide-more {
		display: none;
	}

	.qh-guide-q p {
		display: block;
	}

	.qh-guide .qh-imp-section {
		break-inside: avoid-page;
	}
}

/* ==== How the fund works (AN3) ==============================================
   The worked example: ৳1,000 from four donors, through one fund and three
   centres, to three borrowers and six loans, and back. Four kinds of money,
   one colour each, all the way down. Plain boxes joined by lines; on a phone
   it becomes one column. */

.qh-flow-key {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0 0 1.5rem;
}

/* The kinds of money in their two groups: permanent donations, and loans. */
.qh-flow-key-group {
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--qh-sand-200);
	border-radius: var(--qh-r-control);
	background: var(--qh-ivory);
}

.qh-flow-key-h {
	margin: 0 0 0.375rem;
	font-size: 0.6875rem;
	font-weight: 650;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--qh-gold-700);
}

.qh-flow-key ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	color: var(--qh-sand-700);
}

.qh-flow-key li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.qh-flow-dots {
	display: inline-flex;
	flex: none;
	gap: 0.1875rem;
}

.qh-flow-dot {
	display: inline-block;
	flex: none;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
}

.qh-flow-dot--general { background: var(--qh-green-600); }
.qh-flow-dot--earmarked { background: var(--qh-gold-400); }
.qh-flow-dot--zakat { background: var(--qh-green-300); }
.qh-flow-dot--loan { background: var(--qh-lapis-500); }

.qh-flow {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.qh-flow-tier {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The steps, numbered, so the eye can follow them in order. */
.qh-flow-step {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
	font-weight: 700;
	color: var(--qh-green-700);
}

.qh-flow-step span,
.qh-flow-step-n {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--qh-green-600);
	color: var(--qh-on-brand);
	font-size: 0.875rem;
}

.qh-flow-step--small {
	margin: 0.875rem 0 0.5rem;
	font-size: 0.875rem;
}

.qh-flow-step--small span {
	width: 1.375rem;
	height: 1.375rem;
	font-size: 0.75rem;
}

/* 1. The donors. */
.qh-flow-donors {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 0.75rem;
}

.qh-flow-card {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.875rem;
	border: 1px solid var(--qh-sand-200);
	border-radius: var(--qh-r-tile);
	background: var(--qh-ivory);
	box-shadow: var(--qh-shadow-sm);
}

.qh-flow-card--loan {
	border-style: dashed;
}

.qh-flow-group {
	font-size: 0.6875rem;
	font-weight: 650;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--qh-gold-700);
}

.qh-flow-card--loan .qh-flow-group {
	color: var(--qh-lapis-500);
}

.qh-flow-who {
	font-weight: 650;
}

.qh-flow-amount {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	font-variant-numeric: lining-nums tabular-nums;
}

.qh-flow-kind {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.875rem;
	font-weight: 600;
}

.qh-flow-note {
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--qh-sand-600);
}

/* A line down, with its head, between two steps. */
.qh-flow-arrow {
	position: relative;
	display: block;
	width: 2px;
	height: 1.75rem;
	margin: 0.5rem 0 0.75rem;
	background: var(--qh-sand-300);
}

.qh-flow-arrow::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 50%;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid var(--qh-sand-400);
	border-bottom: 2px solid var(--qh-sand-400);
	transform: translateX( -50% ) rotate( 45deg );
}

/* 2. The fund: the screen's one solid green surface. */
.qh-flow-fund {
	max-width: 32rem;
	padding: 1.25rem 1.5rem;
	border-radius: var(--qh-r-card);
	background: var(--qh-green-600);
	color: var(--qh-on-brand);
	text-align: center;
	box-shadow: var(--qh-shadow-md);
}

.qh-flow-fund p {
	margin: 0;
}

.qh-flow-tag {
	display: inline-block;
	margin: 0 0 0.5rem;
	padding: 0.1875rem 0.625rem;
	border-radius: 999px;
	background: var(--qh-accent-on-brand);
	color: var(--qh-green-800);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.qh-flow-tag--quiet {
	align-self: flex-start;
	background: var(--qh-gold-50);
	color: var(--qh-gold-700);
}

.qh-flow-fund-name {
	font-weight: 650;
	opacity: 0.92;
}

.qh-flow-fund-figure {
	margin: 0.25rem 0 0.75rem !important;
	font-size: 2.25rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	font-variant-numeric: lining-nums tabular-nums;
}

.qh-flow-fund-split {
	display: grid;
	gap: 0.375rem;
	margin: 0;
	text-align: left;
	font-size: 0.875rem;
}

.qh-flow-fund-split div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 0.375rem;
	border-top: 1px solid rgba( 255, 255, 255, 0.2 );
}

.qh-flow-fund-split dd {
	margin: 0;
	font-weight: 700;
	white-space: nowrap;
	font-variant-numeric: lining-nums tabular-nums;
}

/* 3. The centres, joined to the line above by one bar across them. */
.qh-flow-centres {
	position: relative;
	display: grid;
	grid-template-columns: repeat( var(--qh-flow-n, 3), minmax( 0, 1fr ) );
	gap: 1rem;
	padding-top: 1rem;
}

.qh-flow-centres::before {
	content: "";
	position: absolute;
	top: 0;
	left: calc( 50% / var(--qh-flow-n, 3) );
	right: calc( 50% / var(--qh-flow-n, 3) );
	height: 2px;
	background: var(--qh-sand-300);
}

.qh-flow-centre {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1rem;
	border: 1px solid var(--qh-sand-200);
	border-radius: var(--qh-r-tile);
	background: var(--qh-ivory);
	box-shadow: var(--qh-shadow-sm);
}

.qh-flow-centre::before {
	content: "";
	position: absolute;
	top: -1rem;
	left: 50%;
	width: 2px;
	height: 1rem;
	background: var(--qh-sand-300);
}

.qh-flow-centre-name {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--qh-green-600);
}

.qh-flow-centre-name > span:first-child {
	flex: 1;
}

.qh-flow-centre-name b {
	font-variant-numeric: lining-nums tabular-nums;
	color: var(--qh-ink-900);
}

.qh-flow-loans {
	display: grid;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
}

.qh-flow-loans li {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.qh-flow-loans li > span:not( .qh-flow-dots ) {
	flex: 1;
	color: var(--qh-sand-600);
}

.qh-flow-loans b {
	font-weight: 650;
	white-space: nowrap;
	font-variant-numeric: lining-nums tabular-nums;
}

/* 4. The borrower, and the loans. */
.qh-flow-person {
	padding: 0.625rem 0.75rem;
	border-radius: var(--qh-r-control);
	background: var(--qh-sand-50);
}

.qh-flow-person {
	margin: 0 0 0.5rem;
}

.qh-flow-person-name {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	margin: 0 0 0.375rem;
	font-weight: 650;
}

.qh-flow-person-name b {
	font-variant-numeric: lining-nums tabular-nums;
	white-space: nowrap;
}

/* What the centre has not lent yet: cash in hand or at the bank. */
.qh-flow-cash {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 0.75rem;
	border: 1px dashed var(--qh-green-300);
	border-radius: var(--qh-r-control);
	background: var(--qh-green-50);
	color: var(--qh-green-700);
	font-size: 0.875rem;
	font-weight: 600;
}

.qh-flow-cash svg {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
}

.qh-flow-cash span {
	flex: 1;
}

.qh-flow-cash b {
	white-space: nowrap;
	font-variant-numeric: lining-nums tabular-nums;
}

.qh-flow-sum {
	margin: 0.5rem 0 0;
	padding-top: 0.5rem;
	border-top: 1px solid var(--qh-sand-200);
	font-size: 0.8125rem;
	font-weight: 600;
	text-align: right;
	color: var(--qh-sand-700);
	font-variant-numeric: lining-nums tabular-nums;
}

.qh-flow-fund-where {
	margin: 0.875rem 0 0.25rem !important;
	font-size: 0.6875rem;
	font-weight: 650;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: left;
	color: var(--qh-gold-300);
}

.qh-flow-fund-split dt {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}



.qh-flow-person-name small {
	font-weight: 500;
	color: var(--qh-sand-600);
}

/* 5. And back again. */
.qh-flow-back {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	width: 100%;
	margin: 1.25rem 0 0;
	padding: 1rem 1.125rem;
	border: 1px solid var(--qh-green-100);
	border-radius: var(--qh-r-tile);
	background: var(--qh-green-50);
	color: var(--qh-green-700);
}

.qh-flow-back > svg {
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	margin-top: 0.125rem;
}

.qh-flow-back p {
	margin: 0 0 0.375rem;
	line-height: 1.55;
}

.qh-flow-back-h {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.25rem !important;
	font-weight: 700;
}

@media ( max-width: 46rem ) {
	.qh-flow-donors {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.qh-flow-centres {
		grid-template-columns: 1fr;
	}

	.qh-flow-centres::before {
		left: 50%;
		right: auto;
		width: 2px;
		height: 100%;
	}

	.qh-flow-fund-figure {
		font-size: 1.875rem;
	}
}


@media print {
	.qh-flow-fund {
		background: none;
		color: inherit;
		border: 1px solid var(--qh-sand-300);
	}
}

/* One loan may be paid out of two kinds of money: its dots keep the names
   of the loans in one line all the same. */
.qh-flow-loans .qh-flow-dots {
	min-width: 1.5rem;
}

/* ---- On a card, not on the page (WK124) --------------------------------------
   The client, 11 October 2026: every block has its own background area. The
   two paths and the three facts about the books sat straight on the page; each
   now sits on a white card, so their words take the card's ink, not the
   page's (WK40). */
.qh-guide-paths > div,
.qh-guide-facts li {
	padding: 1.25rem;
	border: 1px solid var(--g-line);
	border-radius: var(--qh-r-tile);
	background: var(--qh-ivory);
	box-shadow: var(--qh-shadow-sm);
	color: var(--g-ink);
}

.qh-guide .qh-guide-paths-h,
.qh-guide-facts .qh-ui-icon,
.qh-report a.qh-guide-path-go {
	color: var(--qh-green-700);
}

.qh-guide-path-step,
.qh-guide .qh-guide-path-h,
.qh-guide-facts li {
	color: var(--g-ink);
}

.qh-guide-path-step p,
.qh-guide-path-h span,
.qh-guide-facts span {
	color: var(--g-muted);
}

@media print {
	.qh-guide-paths > div,
	.qh-guide-facts li {
		box-shadow: none;
	}
}