/**
 * Wizard styles.
 *
 * The wizard is dropped into pages whose theme may be dark, light, or anything
 * else, and whose button/input rules will happily win the cascade. So it paints
 * its own surface and resets every control it renders, rather than inheriting
 * and hoping. Selectors are scoped with `.mqf` and kept at a specificity that
 * beats element-level theme rules.
 *
 * Logical properties throughout so one stylesheet serves RTL and LTR.
 *
 * Palette: the approved design is a dark navy surface with a single gold accent.
 * Everything is expressed as a token here and consumed as a token below, so the
 * scheme is one edit rather than a search for colour literals. `--mqf-accent` is
 * the accent; `--mqf-coral` is kept as an alias of it because the rules written
 * against the previous palette refer to it by that name and there is no reason
 * to churn them.
 */

.mqf {
	/* Surfaces. Every value here is sampled from the approved Figma export. */
	--mqf-bg:       #061735;  /* the page's ground — see `background` below */
	--mqf-sunken:   #0D2138;  /* insets: readonly fields, price strips */
	--mqf-card:     #13233F;  /* cards, panels and the section rules */
	--mqf-card-alt: #17304C;  /* hover / raised state of the above */
	--mqf-hair:     rgba(255, 255, 255, .05);  /* the licensing note's fill */
	--mqf-well:     rgba(255, 255, 255, .10);  /* the discs behind the icons */
	--mqf-rule:     #13233F;  /* the 3px section rules */

	/* Accent. */
	--mqf-accent:      #DA9E4E;
	--mqf-accent-dark: #C68F2C;
	--mqf-accent-soft: rgba(218, 158, 78, .13);
	/* Gold carries dark navy text in the artwork, not white. */
	--mqf-on-accent:   #0A1F44;
	/* The hover ring: the solid end of the export's stroke ramp. */
	--mqf-ring:        #D1913C;
	--mqf-coral:       var(--mqf-accent);
	--mqf-coral-dark:  var(--mqf-accent-dark);

	/* Errors need a hue of their own now that the accent is gold: a gold error
	   line is indistinguishable from a gold call to action. */
	--mqf-danger:      #FF7A66;
	--mqf-danger-soft: rgba(255, 122, 102, .12);

	/* Navy is now the ground rather than an accent, so the "navy" tokens name
	   the raised surfaces that used to be painted with it. */
	--mqf-navy:      #1F3656;
	--mqf-navy-dark: #16273E;

	/* Retained supporting hues, restated for a dark ground: on navy a pastel
	   fill reads as a smear, so these are translucent tints plus a legible
	   foreground rather than the light-mode pastels. */
	--mqf-mint:        #83CFBE;
	--mqf-mint-light:  rgba(131, 207, 190, .14);
	--mqf-mint-ink:    #8FD9C6;
	--mqf-peach:       #FFA56A;
	--mqf-peach-light: rgba(255, 165, 106, .14);
	--mqf-peach-ink:   #FFBE94;

	/* Type and rules. */
	--mqf-ink:   #FFFFFF;
	--mqf-muted: #93A6C1;
	--mqf-line:  rgba(255, 255, 255, .10);

	--mqf-radius:    16px;
	--mqf-radius-sm: 10px;
	/* Shadows on a dark ground read as depth only when they are near-black;
	   the tinted shadows of the light scheme were invisible. */
	--mqf-shadow:    0 2px 10px rgba(0, 0, 0, .22);
	--mqf-shadow-lg: 0 14px 34px rgba(0, 0, 0, .34);

	/*
	 * Type scale, measured off the Figma exports (page2/3 and the second-flow
	 * pair). The text in those files is outlined to paths, so there are no
	 * font-size attributes to read: these come from the glyph heights and the
	 * line pitch between wrapped lines, cross-checked against Inter's metrics
	 * (cap .727em, ascender+descender .99em).
	 *
	 * Body copy measures 18.26 tall on a 24px pitch on every page of every
	 * export, which is 18px at 1.333 — one leading step the whole design keeps,
	 * headings included. Sizes are held here as tokens so a screen consumes the
	 * scale rather than restating a clamp() each time.
	 */
	--mqf-fs-xs:    clamp(0.78rem, 1.02cqi, 0.875rem);  /* 14 — NOS codes */
	--mqf-fs-sm:    clamp(0.85rem, 1.16cqi, 1rem);      /* 16 — kickers, chips */
	--mqf-fs-body:  clamp(0.9rem, 1.31cqi, 1.125rem);   /* 18 — body copy */
	--mqf-fs-md:    clamp(0.95rem, 1.45cqi, 1.25rem);   /* 20 — badges, meta */
	--mqf-fs-lg:    clamp(1.05rem, 1.6cqi, 1.375rem);   /* 22 — card/row titles */
	--mqf-fs-xl:    clamp(1.15rem, 1.74cqi, 1.5rem);    /* 24 — section h3 */
	--mqf-fs-2xl:   clamp(1.4rem, 2.32cqi, 2rem);       /* 32 — screen titles */
	/* The single leading the export uses for body and headings alike. */
	--mqf-lh:       1.333;

	--mqf-body: "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif;
	/* Inter is the academy's heading face. It has no Arabic, so Tajawal sits
	   directly behind it and picks up those glyphs — one stack, both scripts. */
	--mqf-head: "Inter", "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif;

	/*
	 * No surface of its own. The wizard is placed into a section of the site
	 * that already carries the navy ground, and painting a second one on top of
	 * it — with a radius and a shadow — drew a card around the whole screen that
	 * the design does not have. The page's background is the background.
	 *
	 * --mqf-bg is still the ground colour for the things that need to know it
	 * (the dark text on a gold button, the tick inside a checkbox); it is simply
	 * no longer painted here.
	 */
	background: transparent;
	color: var(--mqf-ink);
	/* Tells the browser to draw its own furniture — scrollbars, the native
	   <select> popup, autofill — to match. Without it an open dropdown is a
	   white sheet in the middle of the dark screen. */
	color-scheme: dark;
	font-family: var(--mqf-body);
	font-size: 16px;
	line-height: 1.65;
	/*
	 * The artwork is drawn on a 1440px page with 32px gutters — a 1377px
	 * content column — so that is the column this reproduces: 1441px of box
	 * less 32px of padding either side lands on 1377px exactly at 1440, fills
	 * anything narrower, and stops growing beyond it.
	 *
	 * min() rather than a bare max-width: the theme's container may be narrower
	 * still, and overflowing it pushes the whole grid sideways.
	 */
	width: 100%;
	max-width: min(1441px, 100%);
	margin: 0 auto;
	padding: 30px 32px;
	/*
	 * Type and spacing on the start screen are sized against this column rather
	 * than the viewport, so the screen keeps the artwork's proportions wherever
	 * it is dropped. Everything from here down that reads `cqi` is measuring
	 * this box.
	 */
	container-type: inline-size;
	text-align: start;
	overflow-wrap: break-word;
	/* Containing block for anything positioned inside, so a stray offset can
	   never extend the page itself. */
	position: relative;
}

@media (max-width: 640px) {
	.mqf { padding: 20px 16px; }
}

/*
 * Full-width variant — [mqf_wizard full="1"].
 *
 * The rule above deliberately obeys whatever container the wizard is dropped
 * into, because overflowing a theme's column is usually a bug. But the artwork
 * is drawn on a 1440px page, and a site whose content column is narrower (1140
 * is the common Elementor/theme default) squeezes the design to fit. This lets
 * the wizard step back out to the drawn width.
 *
 * The technique: 100vw is the viewport, so half of it either side of the
 * element's own centre is exactly the distance back to the page edges,
 * whatever the container's width or padding. Capped at 1441px so it stops at
 * the artwork's own size on a wide monitor rather than running edge to edge.
 *
 * 100vw includes the scrollbar's width where one is present, which would add a
 * few pixels of horizontal scroll; the dvw unit resolves to the same thing
 * without it, so it is preferred where supported.
 */
.mqf.mqf--full {
	/* Beats the `min(1441px, 100%)` above, which resolves 100% against the
	   container and would otherwise pin the wizard to the container's width. */
	width: min(1441px, 100vw);
	max-width: min(1441px, 100vw);
	margin-inline: calc(50% - min(1441px, 100vw) / 2);
}

@supports (width: 100dvw) {
	.mqf.mqf--full {
		width: min(1441px, 100dvw);
		max-width: min(1441px, 100dvw);
		margin-inline: calc(50% - min(1441px, 100dvw) / 2);
	}
}

/* `.mqf` itself and not only its descendants: the root carries both width:100%
   and 30px of padding, so under content-box it is 60px wider than its container
   and pushes its own cards past the edge. Themes that set border-box globally
   were hiding that; ones that do not were not. */
.mqf,
.mqf *,
.mqf *::before,
.mqf *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------------------
   Control reset.
   Themes style bare `button`, `input` and `a` aggressively. Everything the
   wizard renders is neutralised here first, then restyled below.
   --------------------------------------------------------------------------- */
.mqf button,
.mqf input,
.mqf select,
.mqf textarea {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	margin: 0;
	text-transform: none;
}

.mqf button {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	color: inherit;
	text-align: start;
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
	width: auto;
	/* Themes routinely set `white-space: nowrap` on buttons. Every card in the
	   wizard is a button holding a full qualification title, so without this
	   the text refuses to wrap, blows the grid track out and drags the layout
	   off-screen. */
	white-space: normal;
	overflow-wrap: break-word;
	word-break: normal;
	/* Grid and flex children default to min-width:auto, which stops them
	   shrinking below their content — the other half of the same overflow. */
	min-width: 0;
	max-width: 100%;
	font-weight: 400;
	appearance: none;
	-webkit-appearance: none;
}

.mqf button:hover,
.mqf button:focus,
.mqf button:active {
	background: none;
	color: inherit;
	box-shadow: none;
	text-decoration: none;
}

.mqf a { text-decoration: none; box-shadow: none; }

/* Visible focus for keyboard users (§12 accessibility). */
.mqf :focus-visible {
	outline: 3px solid var(--mqf-coral);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---------- Typography ---------- */
.mqf h1, .mqf h2, .mqf h3 {
	font-family: var(--mqf-head);
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 .4em;
	color: var(--mqf-ink);
	text-transform: none;
	letter-spacing: 0;
}
.mqf h1 { font-size: clamp(1.45rem, 3.6vw, 2rem); }
.mqf h2 { font-size: clamp(1.3rem, 3.2vw, 1.7rem); }
.mqf h3 { font-size: 1.08rem; }
.mqf p  { margin: 0 0 1em; color: var(--mqf-ink); }

/* ---------- Screens ---------- */
.mqf-screen { animation: mqf-fade .28s ease; }
@keyframes mqf-fade {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.mqf-screen { animation: none; }
}

.mqf-head { margin-bottom: 24px; }

/* Each screen moves focus to its heading so screen readers announce the
   change. That focus is programmatic, not the user tabbing, so it must not
   draw a focus ring — sighted users would see a box around the title for no
   reason. Interactive controls keep theirs. */
.mqf h1[tabindex="-1"]:focus,
.mqf h2[tabindex="-1"]:focus,
.mqf h3[tabindex="-1"]:focus,
.mqf h1[tabindex="-1"]:focus-visible,
.mqf h2[tabindex="-1"]:focus-visible,
.mqf h3[tabindex="-1"]:focus-visible,
.mqf .mqf-head__title:focus,
.mqf .mqf-head__title:focus-visible { outline: none; }
.mqf-head__meta { color: var(--mqf-muted); margin: 0; letter-spacing: .03em; }

/* Names what the screen is, above the name of the thing it is about. */
.mqf-head__kicker {
	display: block;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mqf-coral);
	margin-bottom: 6px;
}

.mqf-msg {
	padding: 40px 20px;
	text-align: center;
	color: var(--mqf-muted);
}

.mqf .mqf-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 60px 20px;
	color: var(--mqf-muted);
	text-align: center;
}

.mqf-loading__text {
	font-size: .95rem;
}
.mqf-msg--error { color: var(--mqf-danger); }

/* ---------- Spinner ----------
   One spinner, two sizes: the stage placeholder while a screen loads, and an
   inline one that replaces a button's label while a request is in flight.
   Drawn with a border rather than an SVG or a background image so it inherits
   the brand colour and costs no extra request. */
.mqf .mqf-spinner {
	display: inline-block;
	inline-size: 34px;
	block-size: 34px;
	border: 3px solid var(--mqf-line);
	border-top-color: var(--mqf-coral);
	border-radius: 50%;
	animation: mqf-spin .7s linear infinite;
	flex: none;
}

.mqf .mqf-spinner--inline {
	inline-size: 1em;
	block-size: 1em;
	border-width: 2px;
	/* currentColor keeps it legible on the coral, navy and outline buttons
	   alike, without a rule per variant. */
	border-color: rgba(255, 255, 255, .4);
	border-top-color: currentColor;
	margin-inline-end: 8px;
	vertical-align: -.15em;
}

/* Buttons carrying dark text on a light face, where a white ring vanishes. */
.mqf .mqf-btn--ghost .mqf-spinner--inline,
.mqf .mqf-btn--outline .mqf-spinner--inline,
.mqf .mqf-btn--primary .mqf-spinner--inline,
.mqf .mqf-btn--gold .mqf-spinner--inline {
	border-color: rgba(0, 0, 0, .25);
}

.mqf .mqf-btn.is-busy,
.mqf .mqf-btn.is-busy:disabled {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Busy is a state, not a rejection: full opacity so it does not read as a
	   disabled button the visitor broke. */
	opacity: 1;
	cursor: progress;
}

@keyframes mqf-spin {
	to { transform: rotate(360deg); }
}

/* Reduced motion: pulse the ring instead of spinning it. */
@media (prefers-reduced-motion: reduce) {
	.mqf .mqf-spinner {
		animation: mqf-pulse 1.2s ease-in-out infinite;
	}

	@keyframes mqf-pulse {
		50% { opacity: .35; }
	}
}

/* ---------- Back ---------- */
.mqf .mqf-back {
	color: var(--mqf-muted);
	font-size: .9rem;
	padding: 6px 0;
	margin-bottom: 12px;
	display: inline-flex;
	align-items: center;
}
.mqf .mqf-back:hover { color: var(--mqf-coral); }
.mqf .mqf-back::before { content: "‹"; margin-inline-end: 6px; font-size: 1.25em; line-height: 1; }
[dir="rtl"] .mqf .mqf-back::before,
.mqf[dir="rtl"] .mqf-back::before { content: "›"; }

/* ---------------------------------------------------------------------------
   Start screen (§3)

   Every number below is read off the approved Figma export, which is drawn on a
   1440px page with 32px gutters — a 1377px content column. Sizes are therefore
   expressed in `cqi` (1% of that column) against clamp() bounds: the screen
   matches the artwork exactly at 1377px and scales sensibly either side of it.
   1cqi = 13.77px at the design width, which is where the odd-looking constants
   come from — 94px type is 6.83cqi, a 65px gap is 4.72cqi, and so on.

   Rendered by PHP and replayed verbatim by mqf.js, so this block styles one
   piece of markup rather than two.
   --------------------------------------------------------------------------- */

/*
 * The design runs the hero, the cards and the note edge to edge of the content
 * column and indents only the blocks below them. Dropping the root's own block
 * padding for the duration of this screen is what makes that possible; every
 * other screen keeps it, and the moment the stage repaints as something else it
 * is back.
 */
.mqf:has(.mqf-screen--start) { padding-block: 0; }

/* ---------- Hero ----------
   No panel: no fill, no rule, no radius, no glow. The heading sits straight on
   the page's own ground. The halo around the mark belongs to big-merit.png
   itself, which carries its own concentric rings — nothing here draws one. */
.mqf-hero {
	position: relative;
	display: flex;
	align-items: center;
	/* The mark is 409px tall in the artwork and is what sets the band's height;
	   the heading is centred against it. */
	min-height: clamp(200px, 29.71cqi, 409px);
	padding-block: clamp(20px, 2.6cqi, 36px) clamp(16px, 1.9cqi, 26px);
}

/*
 * 1250px of the 1377px column. This is the measure the gradient below is
 * painted across, and it is why the closing word lands mid-ramp rather than on
 * full navy — the sentence fills only about three-fifths of the box.
 */
.mqf-hero__body {
	position: relative;
	z-index: 1;
	max-width: 90.8%;
}

/*
 * The academy's own h1 treatment: Inter 600 with a white-to-navy gradient
 * painted through the glyphs. `white-space: pre-line` honours the line break
 * carried in the copy, which is the break the artwork draws.
 */
.mqf .mqf-hero__title {
	font-family: var(--mqf-head);
	font-weight: 600;
	font-size: clamp(2rem, 6.4vw, 5.875rem);        /* fallback: no container units */
	font-size: clamp(2rem, 6.83cqi, 5.875rem);
	line-height: 1.217;
	letter-spacing: 0;
	margin: 0 0 clamp(14px, 2.59cqi, 36px);
	white-space: pre-line;
	background-image: linear-gradient(90deg, #FFFFFF 0%, #28406A 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* Arabic reads the other way, so the gradient has to start where the sentence
   does — otherwise the first word is the one that fades into the ground. */
[dir="rtl"] .mqf .mqf-hero__title,
.mqf[dir="rtl"] .mqf-hero__title {
	background-image: linear-gradient(270deg, #FFFFFF 0%, #28406A 100%);
}

/* Transparent text with no gradient behind it is an invisible heading. Both of
   these put the ink back when the paint cannot be applied. */
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
	.mqf .mqf-hero__title { color: var(--mqf-ink); -webkit-text-fill-color: currentColor; }
}
@media (forced-colors: active) {
	.mqf .mqf-hero__title {
		background-image: none;
		color: CanvasText;
		-webkit-text-fill-color: currentColor;
	}
}

.mqf .mqf-hero__intro {
	margin: 0;
	color: var(--mqf-ink);
	font-weight: 300;
	font-size: clamp(0.95rem, 1.6cqi, 1.375rem);
	line-height: 1.364;
	/* Wide enough that the artwork's one-line intro stays on one line, narrow
	   enough that it never runs the heading's full 1250px measure. */
	max-width: 62ch;
}

/*
 * The watermark. Taken out of the flow rather than laid beside the heading:
 * in the artwork the heading's box runs under it, and shrinking that box to
 * make room would shorten the gradient the heading is painted with.
 */
.mqf-hero__mark {
	position: absolute;
	inset-inline-end: 3.7cqi;
	top: 50%;
	transform: translateY(-50%);
	inline-size: clamp(160px, 29.71cqi, 409px);
	z-index: 0;
	pointer-events: none;
}
.mqf-hero__mark img { display: block; width: 100%; height: auto; }
@media (max-width: 700px) { .mqf-hero__mark { display: none; } }

/* ---------- Route cards ---------- */
.mqf-routes {
	display: grid;
	gap: clamp(12px, 1.6cqi, 22px);
	grid-template-columns: 1fr 1fr;
	margin-bottom: clamp(16px, 1.86cqi, 26px);
}
@media (max-width: 760px) { .mqf-routes { grid-template-columns: 1fr; } }

.mqf .mqf-route {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	min-height: clamp(220px, 23.68cqi, 326px);
	padding: clamp(20px, 2.54cqi, 35px);
	border-radius: clamp(18px, 2.18cqi, 30px);
	color: var(--mqf-ink);
	background: var(--mqf-card);
	/* Transparent at rest so the hover ring costs no layout: colouring an
	   existing border cannot move the card, where adding one would. */
	border: 1px solid transparent;
	transition: border-color .18s, transform .18s;
}

/*
 * The artwork draws one card with a gold rule around it — that is the hover
 * state. Its export ramps the stroke from #D1913C to a pale #FFD194 across the
 * card, which leaves the trailing edge reading almost white on screen, so the
 * ring is drawn in the solid gold end of that ramp the whole way round.
 */
.mqf .mqf-route:hover,
.mqf .mqf-route:focus-visible {
	border-color: var(--mqf-ring);
	transform: translateY(-2px);
}

.mqf-route__icon {
	inline-size: clamp(56px, 6.17cqi, 85px);
	block-size: clamp(56px, 6.17cqi, 85px);
	border-radius: 50%;
	display: grid; place-items: center;
	background: var(--mqf-well);
	color: var(--mqf-accent);
	margin-bottom: clamp(10px, 1.22cqi, 17px);
	flex: none;
}
.mqf-route__icon svg { inline-size: 54%; block-size: auto; }
.mqf-route--b .mqf-route__icon svg { inline-size: 56%; }

.mqf-route__title {
	font-family: var(--mqf-head);
	font-weight: 700;
	font-size: clamp(1.05rem, 2.03cqi, 1.75rem);
	line-height: 1.571;
	display: block;
	color: var(--mqf-ink);
	white-space: pre-line;   /* the artwork breaks the shorter label by hand */
	overflow-wrap: break-word;
	margin-bottom: clamp(8px, 1.08cqi, 15px);
}

.mqf-route__note {
	display: block;
	color: var(--mqf-ink);
	font-weight: 300;
	font-size: clamp(0.9rem, 1.45cqi, 1.25rem);
	line-height: 1.4;
	white-space: normal;
	overflow-wrap: break-word;
}

/* ---------- Licensing note ---------- */
.mqf .mqf-note {
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.89cqi, 26px);
	background: var(--mqf-hair);
	border-radius: clamp(12px, 1.45cqi, 20px);
	padding: clamp(16px, 2.47cqi, 34px);
	margin: 0;
	color: var(--mqf-ink);
	font-weight: 300;
	/* 18/1.333, the same body setting every screen's note carries — measured
	   identically in page2.xml and both second-flow exports. */
	font-size: var(--mqf-fs-body);
	line-height: var(--mqf-lh);
}
.mqf-note__icon {
	flex: none;
	inline-size: clamp(52px, 6.17cqi, 85px);
	block-size: clamp(52px, 6.17cqi, 85px);
	border-radius: 50%;
	display: grid; place-items: center;
	background: var(--mqf-well);
	color: var(--mqf-ink);
}
.mqf-note__icon svg { inline-size: 48%; block-size: auto; }

/*
 * The shell prints the same §7 wording under every screen. Here it is part of
 * the layout, so the footnote copy would be the second time the visitor reads
 * it — hidden rather than removed, because every other screen still needs it.
 */
.mqf:has(.mqf-screen--start) > .mqf-legal { display: none; }

/* ---------- What happens next ----------
   Indented 120px where the three blocks above are not, and separated by the
   artwork's 3px rule — which is drawn in the card colour, not a hairline. */
.mqf-next,
.mqf-advisor {
	margin-inline: 8.715cqi;
	border-top: 3px solid var(--mqf-rule);
}

.mqf-next {
	margin-top: clamp(28px, 4.72cqi, 65px);
	padding-top: clamp(28px, 4.5cqi, 62px);
}

.mqf .mqf-next__title {
	font-family: var(--mqf-head);
	font-weight: 700;
	font-size: clamp(1.15rem, 2.32cqi, 2rem);
	line-height: 1.3;
	margin: 0 0 clamp(24px, 4.72cqi, 65px);
	color: var(--mqf-ink);
}

.mqf .mqf-steps {
	/* Shared by the disc and the rail drawn between the discs, so the two can
	   never disagree about where a disc ends. */
	--mqf-step-disc: clamp(60px, 6.97cqi, 96px);
	--mqf-step-gap: clamp(28px, 4.72cqi, 65px);
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--mqf-step-gap);
}

.mqf .mqf-step {
	position: relative;
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.74cqi, 24px);
	margin: 0;
}

.mqf-step__icon {
	position: relative;
	flex: none;
	inline-size: var(--mqf-step-disc);
	block-size: var(--mqf-step-disc);
	border-radius: 50%;
	display: grid; place-items: center;
	background: var(--mqf-well);
	color: var(--mqf-accent);
}
.mqf-step__icon svg { inline-size: 45%; block-size: auto; }
.mqf-step:nth-child(2) .mqf-step__icon svg { inline-size: 57%; }
.mqf-step:nth-child(3) .mqf-step__icon svg { inline-size: 66%; }

/*
 * The dashed rail between the discs. Drawn in two halves — one reaching down
 * from a step, one reaching up from the next — rather than as one line behind
 * the column, because the discs are translucent and a line behind them would
 * show through. Each half is anchored to its own disc and stretched to the
 * midpoint of the row gap, so the rail still meets both discs when a step's
 * copy wraps to a second line on a phone and the rows stop matching in height.
 */
.mqf-step:not(:last-child)::after,
.mqf-step:not(:first-child)::before {
	content: "";
	position: absolute;
	inset-inline-start: calc(var(--mqf-step-disc) / 2 - 0.5px);
	inline-size: 1px;
	background-image: repeating-linear-gradient(to bottom, var(--mqf-accent) 0 4px, transparent 4px 8px);
}

.mqf-step:not(:last-child)::after {
	inset-block-start: calc(50% + var(--mqf-step-disc) / 2);
	inset-block-end: calc(-0.5 * var(--mqf-step-gap));
}

.mqf-step:not(:first-child)::before {
	inset-block-start: calc(-0.5 * var(--mqf-step-gap));
	inset-block-end: calc(50% + var(--mqf-step-disc) / 2);
	/* Anchored at the foot so the dashes meet this step's disc squarely; the
	   other half is anchored at its head for the same reason. */
	background-position: bottom;
}

.mqf-step__body { min-width: 0; }

.mqf-step__title {
	display: block;
	font-family: var(--mqf-head);
	font-weight: 700;
	font-size: clamp(1.05rem, 2.03cqi, 1.75rem);
	line-height: 1.3;
	color: var(--mqf-ink);
	margin-bottom: clamp(6px, 0.87cqi, 12px);
}

.mqf-step__note {
	display: block;
	color: var(--mqf-ink);
	font-weight: 300;
	font-size: clamp(0.9rem, 1.45cqi, 1.25rem);
	line-height: 1.4;
}

/* ---------- Advisor prompt ---------- */
.mqf-advisor {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(16px, 1.74cqi, 24px);
	flex-wrap: wrap;
	margin-top: clamp(28px, 4.72cqi, 65px);
	padding-top: clamp(28px, 4.72cqi, 65px);
	padding-bottom: clamp(28px, 4.72cqi, 65px);
}

.mqf .mqf-advisor__text {
	margin: 0;
	flex: 1 1 240px;
	min-width: 0;
	font-family: var(--mqf-head);
	font-weight: 700;
	font-size: clamp(1.15rem, 2.32cqi, 2rem);
	line-height: 1.3;
	color: var(--mqf-ink);
}

/* 275 × 52 with a 5px radius in the artwork, and dark navy text — white on
   this gold falls below 3:1 and the label is the one thing that has to read. */
.mqf .mqf-advisor .mqf-btn {
	flex: none;
	inline-size: clamp(180px, 19.97cqi, 275px);
	min-height: clamp(42px, 3.78cqi, 52px);
	padding: 0 16px;
	border-radius: 5px;
	font-family: var(--mqf-head);
	font-weight: 500;
	font-size: clamp(0.85rem, 1.31cqi, 1.125rem);
}
@media (max-width: 480px) {
	.mqf .mqf-advisor .mqf-btn { inline-size: 100%; }
}

/* Long qualification titles inside the mint link buttons on the licensing
   page hit the same nowrap problem. */
.mqf-qual-link span { white-space: normal; overflow-wrap: break-word; min-width: 0; }

/* Long qualification titles inside the mint link buttons on the licensing
   page hit the same nowrap problem. */
.mqf-qual-link span { white-space: normal; overflow-wrap: break-word; min-width: 0; }

/* ---------------------------------------------------------------------------
   Tracks + cards — the qualifications screen (§4)

   Sized off the approved export the same way the start screen is: that page is
   drawn on the same 1440px page with 32px gutters, so `cqi` here is the same
   1377px column and 1cqi is again 13.77px. The constants come straight off the
   artwork's rects — a 445px card is 32.32cqi, its 30px radius 2.18cqi, the
   35px it is padded by 2.54cqi, and so on.
   --------------------------------------------------------------------------- */

/* The 65px the artwork leaves between one band of cards and the next track's
   badge — 1972.5 less the 1907.5 the band above it ends on. The last track
   drops it, because the note panel below carries the same gap of its own. */
.mqf-track { margin-bottom: clamp(28px, 4.72cqi, 65px); }
.mqf-track:last-of-type { margin-bottom: 0; }

/*
 * A gold pill, not the mint one this used to be: the export paints every track
 * badge #DA9E4E and sets the label in the same dark navy the gold buttons
 * carry, because white on this gold does not reach 3:1.
 *
 * 39px tall with a 19.5px radius — exactly half, so the ends stay semicircular
 * at any width rather than reading as a rounded rectangle.
 */
.mqf-track__label {
	display: inline-flex;
	align-items: center;
	min-height: clamp(30px, 2.83cqi, 39px);
	padding: 0 clamp(12px, 1.53cqi, 21px);
	border-radius: 100px;
	font-family: var(--mqf-head);
	font-size: var(--mqf-fs-md);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.2;
	background: var(--mqf-accent);
	color: var(--mqf-on-accent);
	/* 443.5 − 378.5: the gap between the pill and the cards it heads. */
	margin-bottom: clamp(20px, 4.72cqi, 65px);
}

/*
 * Three to a row at the design width: 3 × 445 + 2 × 21 of gap is the 1377px
 * column exactly. auto-fill against a 445px ideal would drop to two columns the
 * moment the column is a pixel short, so the track count is fixed and the
 * breakpoints below step it down instead.
 */
.mqf-cards {
	display: grid;
	gap: clamp(14px, 1.53cqi, 21px);
	grid-template-columns: repeat(3, 1fr);
}
.mqf-cards > * { min-width: 0; }

@media (max-width: 1000px) { .mqf-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .mqf-cards { grid-template-columns: 1fr; } }

/*
 * 445 × 410 with a 30px radius. The height is a floor rather than a fixed size:
 * the artwork's titles are two lines, and a longer one has to be able to push
 * the card taller instead of spilling out of it. Cards in a row still match,
 * because grid stretches them to the tallest.
 */
.mqf .mqf-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	min-height: clamp(260px, 29.77cqi, 410px);
	background: var(--mqf-card);
	/* Transparent at rest so the hover ring costs no layout — the same trick the
	   route cards use, for the same reason. */
	border: 1px solid transparent;
	border-radius: clamp(18px, 2.18cqi, 30px);
	padding: clamp(20px, 2.54cqi, 35px);
	color: var(--mqf-ink);
	transition: border-color .18s, transform .18s;
}
.mqf .mqf-card:hover,
.mqf .mqf-card:focus-visible {
	border-color: var(--mqf-ring);
	transform: translateY(-2px);
}

/*
 * 24px at the design width, set on the artwork's 29px line pitch — 29/24 is
 * 1.208, which is Figma's "Auto" leading for Inter and not the 1.5 this used
 * to carry. The two are 25px apart over a three-line title, which is what made
 * the card copy sit low against the export.
 */
.mqf-card__title {
	font-family: var(--mqf-head);
	font-weight: 700;
	font-size: var(--mqf-fs-lg);
	line-height: var(--mqf-lh);
	color: var(--mqf-ink);
	text-align: start;
	white-space: normal;
	overflow-wrap: break-word;
	hyphens: auto;
}

/*
 * flex:1 is what pins the meta row to the foot of the card: the tagline takes
 * the slack, so the rule above the meta lands just clear of the bottom edge
 * whether the card carries one line of subtitle or three.
 */
/* 16px on a 24px pitch — line-height 1.5 exactly, measured off the six-line
   tagline in the export. */
.mqf-card__sub {
	color: var(--mqf-ink);
	font-weight: 300;
	font-size: var(--mqf-fs-body);
	line-height: var(--mqf-lh);
	text-align: start;
	flex: 1;
	white-space: normal;
	margin-top: clamp(8px, 1.08cqi, 15px);
}

/*
 * The export draws the rule edge to edge of the card's padding box — x61→436
 * inside a card spanning x26→471 — so it is the card's own inset that sets its
 * length, and a plain border on a full-width block reproduces it.
 */
/* 20px — the export sets the awarding-body line larger than the tagline above
   it, not smaller. */
.mqf-card__meta {
	width: 100%;
	font-size: var(--mqf-fs-md);
	font-weight: 300;
	color: var(--mqf-ink);
	text-align: start;
	border-top: 1px solid var(--mqf-line);
	padding-top: clamp(12px, 1.6cqi, 22px);
	margin-top: auto;
	white-space: normal;
}

/* ---------- Qualifications screen: heading and note ----------
   The screen title is set like the start screen's section headings — Inter 700
   on the page's own ground, no panel — and the artwork leaves 65px between it
   and the first track badge. */
.mqf-screen--programs .mqf-head { margin-bottom: clamp(24px, 4.72cqi, 65px); }

/* 28px — the "Available qualifications" heading measures 26.4 cap-to-descender
   in the export, which is 27px of Inter; 28 is the drawn step. */
.mqf .mqf-screen--programs .mqf-head__title {
	font-family: var(--mqf-head);
	font-weight: 700;
	font-size: var(--mqf-fs-2xl);
	line-height: var(--mqf-lh);
	margin: 0;
	color: var(--mqf-ink);
}

/* 1377 × 135 at the design width, and the note panel is separated from the last
   band of cards by the same 65px that separates the bands from each other. */
.mqf .mqf-screen--programs .mqf-note { margin-top: clamp(28px, 4.72cqi, 65px); }

/* The panel above prints §7's wording, so the shell's footnote under it would
   be the second time the visitor reads it — hidden here exactly as it is on the
   start screen, and restored the moment the stage repaints as anything else. */
.mqf:has(.mqf-screen--programs) > .mqf-legal { display: none; }

/* ---------------------------------------------------------------------------
   Qualification detail — the programme screen (§5)

   Same 1377px column and the same `cqi` sizing as the two screens above. The
   panel here is a wash rather than a card: the export fills it white at 2%,
   which on this navy reads as a barely-raised area holding the controls
   together, where the opaque card used elsewhere would draw a box around them.

   Everything is scoped to .mqf-screen--program so the panel, pills and download
   buttons the other screens render keep the styling they already had.
   --------------------------------------------------------------------------- */

/* The framework badge is the same gold pill the tracks carry on the screen
   before, so arriving here the label does not change colour. */
.mqf-screen--program .mqf-head .mqf-badge {
	min-height: clamp(30px, 2.83cqi, 39px);
	display: inline-flex;
	align-items: center;
	padding: 0 clamp(12px, 1.53cqi, 21px);
	font-family: var(--mqf-head);
	font-size: var(--mqf-fs-md);
	border-radius: 100px;
	background: var(--mqf-accent);
	color: var(--mqf-on-accent);
	margin-bottom: clamp(12px, 1.6cqi, 22px);
}

.mqf .mqf-screen--program .mqf-head__title,
.mqf .mqf-screen--rows .mqf-head__title {
	font-family: var(--mqf-head);
	font-weight: 700;
	font-size: var(--mqf-fs-2xl);
	line-height: var(--mqf-lh);
	margin: 0 0 clamp(10px, 1.16cqi, 16px);
	color: var(--mqf-ink);
}

/* The standfirst under the title is body copy, not muted metadata — the export
   sets it in the same light ink the card taglines use. */
.mqf .mqf-screen--program .mqf-head__meta {
	color: var(--mqf-ink);
	font-weight: 300;
	font-size: var(--mqf-fs-body);
	line-height: var(--mqf-lh);
	letter-spacing: 0;
	margin: 0;
	max-width: 78ch;
}

.mqf-screen--program .mqf-head { margin-bottom: clamp(24px, 4.72cqi, 65px); }

/*
 * 1373 × 529 with a 20px radius, filled white at 2%. No border and no shadow:
 * the export draws neither, and on this ground a hairline rule around a 2% wash
 * is the only thing that would be visible of it.
 *
 * The branch and profession screens draw the identical panel — 1373 wide, the
 * same radius, the same wash and the same 50.5/23.5 padding — so they share
 * this rule rather than restating it.
 */
.mqf .mqf-screen--program .mqf-panel,
.mqf .mqf-screen--rows .mqf-panel {
	background: rgba(255, 255, 255, .02);
	border: 0;
	border-radius: clamp(12px, 1.45cqi, 20px);
	box-shadow: none;
	padding: clamp(20px, 3.67cqi, 50px) clamp(16px, 1.71cqi, 23px);
	margin-bottom: clamp(20px, 3.27cqi, 45px);
}

/*
 * The mode pills are 349 × 54 in the artwork — a fixed pair sitting at the head
 * of the panel, not a row that stretches to fill it. flex-grow is dropped so
 * two modes stay the drawn width and only wrap when the column cannot hold
 * them; a programme with three would simply wrap to a second line.
 */
.mqf-screen--program .mqf-price {
	background: transparent;
	border-radius: 0;
	padding: 0;
	margin-bottom: clamp(14px, 1.6cqi, 22px);
	gap: clamp(12px, 1.82cqi, 25px);
}

.mqf-screen--program .mqf-modes { gap: clamp(12px, 1.82cqi, 25px); }

.mqf-screen--program .mqf-modes .mqf-pill {
	flex: 0 1 clamp(180px, 25.35cqi, 349px);
	justify-content: flex-start;
	gap: clamp(8px, 0.87cqi, 12px);
	min-height: clamp(46px, 3.92cqi, 54px);
	padding: 0 clamp(14px, 1.53cqi, 21px);
	border-radius: clamp(8px, 0.69cqi, 9.5px);
	/* Stroked, not filled: the export gives these a 53% white rule on the
	   panel's own wash rather than a surface of their own. */
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .53);
	font-size: var(--mqf-fs-xl);
}

/* Checked still reads as gold, but the fill stays off so the pair keeps the
   drawn outline treatment. */
.mqf .mqf-screen--program .mqf-modes .mqf-pill:has(input:checked) {
	border-color: var(--mqf-accent);
	background: var(--mqf-accent-soft);
}

/* Sits under the pills as a full-width line of small print. */
.mqf-screen--program .mqf-price__note {
	flex-basis: 100%;
	font-size: var(--mqf-fs-body);
	color: var(--mqf-muted);
	margin: 0;
}

.mqf .mqf-screen--program .mqf-panel > h3 {
	font-family: var(--mqf-head);
	font-weight: 700;
	font-size: var(--mqf-fs-xl);
	line-height: var(--mqf-lh);
	color: var(--mqf-ink);
	margin: clamp(20px, 2.9cqi, 40px) 0 clamp(14px, 1.6cqi, 22px);
}

/*
 * 1326 × 99 with the same 9.5px radius and 53% rule as the pills — a tall row,
 * because it carries the intake name, its dates, the price and the status badge
 * on one line at the design width.
 */
.mqf .mqf-screen--program .mqf-cohort {
	gap: clamp(12px, 1.16cqi, 16px);
	min-height: clamp(72px, 7.19cqi, 99px);
	padding: clamp(12px, 1.31cqi, 18px) clamp(14px, 1.82cqi, 25px);
	border: 1px solid rgba(255, 255, 255, .53);
	border-radius: clamp(8px, 0.69cqi, 9.5px);
	background: transparent;
}
.mqf .mqf-screen--program .mqf-cohort:has(input:checked) {
	border-color: var(--mqf-accent);
	background: var(--mqf-accent-soft);
}

.mqf-screen--program .mqf-cohort__name {
	font-family: var(--mqf-head);
	font-size: var(--mqf-fs-xl);
	line-height: var(--mqf-lh);
}

/* The status badge is the gold pill again — 115 × 39, as drawn at the row's
   trailing edge. */
.mqf-screen--program .mqf-cohort__status {
	min-height: clamp(30px, 2.83cqi, 39px);
	display: inline-flex;
	align-items: center;
	padding: 0 clamp(12px, 1.53cqi, 21px);
	font-family: var(--mqf-head);
	font-size: var(--mqf-fs-md);
	background: var(--mqf-accent);
	color: var(--mqf-on-accent);
}
/* A full batch keeps the muted treatment — it is context, not an offer. */
.mqf-screen--program .mqf-cohort.is-full .mqf-cohort__status {
	background: rgba(255, 255, 255, .07);
	color: var(--mqf-muted);
}

/* The price is the largest thing on the intake row in the export — 31px of
   cap, against the 24px the intake name is set in. */
.mqf-screen--program .mqf-cohort__price {
	font-family: var(--mqf-head);
	font-size: var(--mqf-fs-2xl);
	line-height: 1.25;
}

/*
 * 276 × 53 with a 5.5px radius and a solid #8E97A6 rule. Fixed width like the
 * mode pills, and for the same reason: the export lays three of them out at the
 * foot of the panel rather than stretching them across it.
 */
.mqf-screen--program .mqf-downloads {
	gap: clamp(12px, 1.67cqi, 23px);
	margin-top: clamp(20px, 3.41cqi, 47px);
}

.mqf .mqf-screen--program .mqf-dl,
.mqf .mqf-screen--program .mqf-dl:hover,
.mqf .mqf-screen--program .mqf-dl:focus,
.mqf .mqf-screen--program .mqf-dl:active {
	flex: 0 1 clamp(160px, 20.04cqi, 276px);
	justify-content: center;
	min-height: clamp(46px, 3.85cqi, 53px);
	padding: 0 clamp(12px, 1.16cqi, 16px);
	border-radius: clamp(5px, 0.4cqi, 5.5px);
	border: 1px solid #8E97A6;
	background: transparent;
	font-size: var(--mqf-fs-body);
}
.mqf .mqf-screen--program .mqf-dl:hover,
.mqf .mqf-screen--program .mqf-dl:focus {
	border-color: var(--mqf-accent);
	background: var(--mqf-accent-soft);
}

/*
 * The pending chip again, at this screen's specificity. The rules above set a
 * solid rule and an accent hover on every .mqf-dl here, and both would
 * otherwise win over the base --soon styling and light the chip up under the
 * cursor.
 */
.mqf .mqf-screen--program .mqf-dl--soon,
.mqf .mqf-screen--program .mqf-dl--soon:hover,
.mqf .mqf-screen--program .mqf-dl--soon:focus {
	border-style: dashed;
	border-color: var(--mqf-line);
	background: transparent;
	color: var(--mqf-muted);
	cursor: default;
}

/*
 * 1373 × 52 with a 5px radius — a wide, flat gold bar rather than the pill the
 * button carries elsewhere, and the full width of the panel above it.
 */
.mqf .mqf-screen--program .mqf-btn--block {
	min-height: clamp(46px, 3.78cqi, 52px);
	padding: 0 clamp(16px, 1.74cqi, 24px);
	border-radius: 5px;
	font-family: var(--mqf-head);
	font-size: var(--mqf-fs-sm);
}

/*
 * The intake row carries four things on one line at the design width. On a
 * phone that is three columns fighting over ~300px, so below the breakpoint the
 * row becomes a stack: the radio stays beside the name, and the price and its
 * badge drop underneath rather than squeezing the title to two words a line.
 */
@media (max-width: 640px) {
	.mqf .mqf-screen--program .mqf-cohort {
		flex-wrap: wrap;
		row-gap: clamp(8px, 1.16cqi, 12px);
	}
	.mqf-screen--program .mqf-cohort__body { flex: 1 1 100%; order: 1; }
	.mqf-screen--program .mqf-cohort input[type="radio"] { order: 0; }
	.mqf-screen--program .mqf-cohort__price { order: 2; margin-inline-start: 0; }
	.mqf-screen--program .mqf-cohort__status { order: 3; margin-inline-start: auto; }

	/*
	 * The mode pills hold the artwork's 349px width on a desktop, which on a
	 * phone leaves them sitting narrow against the full-width intake rows
	 * below. The designer's note is that they should line up with those, so
	 * below this breakpoint each pill takes the whole column and they stack.
	 *
	 * flex-basis:100% rather than width:100% — these are flex items, and a
	 * basis of 100% is what makes each one claim its own row without relying
	 * on the wrap that a fixed width would still permit.
	 */
	.mqf-screen--program .mqf-modes { flex-direction: column; }
	.mqf-screen--program .mqf-modes .mqf-pill { flex: 1 1 100%; }

	/*
	 * Same story for the download sheets: their 276px design width leaves three
	 * short buttons huddled against the left edge under full-width intake cards,
	 * and the two-word labels wrap to two lines inside them. Below the
	 * breakpoint they stack and each claims the whole column, so they line up
	 * with the cards above.
	 */
	.mqf .mqf-screen--program .mqf-downloads {
		flex-direction: column;
		align-items: stretch;
	}
	.mqf .mqf-screen--program .mqf-dl,
	.mqf .mqf-screen--program .mqf-dl:hover,
	.mqf .mqf-screen--program .mqf-dl:focus,
	.mqf .mqf-screen--program .mqf-dl:active {
		flex: 1 1 100%;
		width: 100%;
		max-width: none;
	}
}

/* The note closes the screen the same 45px below the button that the button
   sits below the panel. */
.mqf .mqf-screen--program .mqf-note { margin-top: clamp(20px, 3.27cqi, 45px); }

.mqf:has(.mqf-screen--program) > .mqf-legal { display: none; }

/* ---------------------------------------------------------------------------
   Branch + profession lists — the profession route's second step (§6)

   The export draws this as the qualification detail screen with the controls
   swapped out: the same 1373-wide wash panel, and inside it a stack of the same
   1326 × 99 stroked rows the intake list uses. The panel, heading and note are
   shared with .mqf-screen--program above; only the rows are stated here.
   --------------------------------------------------------------------------- */
.mqf-screen--rows .mqf-head { margin-bottom: clamp(24px, 4.72cqi, 65px); }

/* 25px between rows — the 124px pitch of the export less the 99px row. */
.mqf-screen--rows .mqf-rows { gap: clamp(12px, 1.82cqi, 25px); }

/*
 * Stroked rather than filled, exactly as the intake rows are: a 53% white rule
 * on the panel's own wash, 99px tall with a 9.5px radius.
 */
.mqf .mqf-screen--rows .mqf-row {
	gap: clamp(12px, 1.16cqi, 16px);
	min-height: clamp(64px, 7.19cqi, 99px);
	padding: clamp(12px, 1.31cqi, 18px) clamp(14px, 1.82cqi, 25px);
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .53);
	border-radius: clamp(8px, 0.69cqi, 9.5px);
}
.mqf .mqf-screen--rows .mqf-row:hover,
.mqf .mqf-screen--rows .mqf-row:focus-visible {
	border-color: var(--mqf-accent);
	background: var(--mqf-accent-soft);
}

.mqf-screen--rows .mqf-row__title {
	font-family: var(--mqf-head);
	font-size: var(--mqf-fs-lg);
	line-height: var(--mqf-lh);
}

/* The chevron is drawn in the same ink as the label here, not the accent — on
   a stroked row a gold arrow reads as the row's one interactive part, when the
   whole row is the target. */
.mqf-screen--rows .mqf-row__go {
	color: var(--mqf-ink);
	font-size: clamp(1.1rem, 1.74cqi, 1.5rem);
}

/*
 * The level chip on a profession row: 75 × 55 with a 10px radius, filled solid
 * #D1913C — the same gold the hover ring is drawn in. It is a block of colour
 * carrying dark navy, not the tinted chip with gold lettering this used to be,
 * so the level reads as a label rather than as a second piece of accent text.
 */
.mqf-screen--rows .mqf-row__level {
	display: grid;
	place-items: center;
	inline-size: clamp(52px, 5.45cqi, 75px);
	min-block-size: clamp(40px, 3.99cqi, 55px);
	padding: 0 clamp(6px, 0.58cqi, 8px);
	border-radius: clamp(7px, 0.73cqi, 10px);
	background: var(--mqf-ring);
	color: var(--mqf-on-accent);
	font-family: var(--mqf-head);
	font-size: var(--mqf-fs-sm);
	font-weight: 700;
	line-height: 1.2;
}

.mqf-screen--rows .mqf-row__nos {
	display: block;
	font-size: var(--mqf-fs-xs);
}

/*
 * The screen closes on two identical panels — the levels note under a pin, §7's
 * wording under the shield — separated by the same 45px that separates the
 * first of them from the list above.
 */
.mqf .mqf-screen--rows .mqf-note { margin-top: clamp(20px, 3.27cqi, 45px); }

/* ---------------------------------------------------------------------------
   Licensing requirements — the profession detail (§7)

   The last screen of the profession route, and the same vocabulary again: the
   1373-wide wash panel, the gold level chip off the row list, and the note
   panels — three of them here, because §7 and §13 both apply and the artwork
   gives each notice its own block.

   What is new is inside the panel: fields separated by a 35% white rule, the
   experience pathways as filled blocks with a gold edge, and the qualification
   link as a gradient bar.
   --------------------------------------------------------------------------- */
.mqf .mqf-screen--licensing .mqf-panel {
	background: rgba(255, 255, 255, .02);
	border: 0;
	border-radius: clamp(12px, 1.45cqi, 20px);
	box-shadow: none;
	padding: 0 clamp(16px, 1.67cqi, 23px);
	margin-bottom: clamp(20px, 3.31cqi, 45.5px);
}

/* The level chip is the one the profession rows carry, so the level a visitor
   picked looks the same on the screen it takes them to. */
.mqf-screen--licensing .mqf-head .mqf-badge {
	display: grid;
	place-items: center;
	inline-size: clamp(52px, 5.45cqi, 75px);
	min-block-size: clamp(40px, 3.99cqi, 55px);
	padding: 0 clamp(6px, 0.58cqi, 8px);
	border-radius: clamp(7px, 0.73cqi, 10px);
	background: var(--mqf-ring);
	color: var(--mqf-on-accent);
	font-family: var(--mqf-head);
	font-size: var(--mqf-fs-sm);
	margin-bottom: clamp(10px, 1.16cqi, 16px);
}

.mqf .mqf-screen--licensing .mqf-head__title {
	font-family: var(--mqf-head);
	font-weight: 700;
	font-size: var(--mqf-fs-2xl);
	line-height: var(--mqf-lh);
	margin: 0 0 clamp(6px, 0.73cqi, 10px);
	color: var(--mqf-ink);
}

/* The NOS code under the title, and the kicker above it, are the screen's two
   pieces of metadata — small, and the kicker in the accent. */
.mqf .mqf-screen--licensing .mqf-head__meta {
	color: var(--mqf-muted);
	font-size: var(--mqf-fs-sm);
	letter-spacing: .03em;
	margin: 0;
}
.mqf-screen--licensing .mqf-head__kicker {
	font-size: var(--mqf-fs-body);
	letter-spacing: .06em;
	margin-bottom: clamp(8px, 1.02cqi, 14px);
}
.mqf-screen--licensing .mqf-head { margin-bottom: clamp(24px, 3.42cqi, 47px); }

/*
 * Each field is a band of the panel divided by a 35% white rule, drawn edge to
 * edge of the panel's padding box. The last one has no rule under it, and the
 * first none above — the panel's own edge is the boundary there.
 */
.mqf-screen--licensing .mqf-field {
	padding: clamp(18px, 2.4cqi, 33px) 0;
	border-bottom: 1px solid rgba(249, 249, 249, .35);
}
.mqf-screen--licensing .mqf-field:last-child { border-bottom: 0; }
.mqf-screen--licensing .mqf-field:first-child { padding-top: clamp(18px, 2.4cqi, 33px); }

.mqf-screen--licensing .mqf-field__label {
	font-family: var(--mqf-head);
	font-size: var(--mqf-fs-body);
	font-weight: 700;
	color: var(--mqf-ink);
	letter-spacing: 0;
	margin-bottom: clamp(10px, 1.31cqi, 18px);
}

.mqf-screen--licensing .mqf-field__value {
	color: var(--mqf-ink);
	font-weight: 300;
	font-size: var(--mqf-fs-body);
	line-height: var(--mqf-lh);
}

/*
 * A pathway is a filled block with a gold edge down its leading side — the
 * export draws the fill at 5% white with a 10px radius and the edge as an 8px
 * bar clipped by that radius, so the gold follows the rounded corner rather
 * than squaring it off.
 *
 * Two stacked backgrounds rather than an inset box-shadow or a border: a
 * shadow is drawn inside the padding box and keeps its own square corners,
 * which leaves a notch where the radius curves away from it. Backgrounds are
 * clipped to the border box, so the bar rounds with the block. `border-box`
 * origin and a logical `linear-gradient(to right ...)` under the `dir` flip
 * below is what puts the bar on the correct side in Arabic.
 */
.mqf .mqf-screen--licensing .mqf-pathway {
	--mqf-pathway-edge: clamp(5px, 0.58cqi, 8px);
	background:
		linear-gradient(to right, var(--mqf-ring) 0 var(--mqf-pathway-edge), transparent var(--mqf-pathway-edge)),
		rgba(255, 255, 255, .05);
	border: 0;
	border-radius: clamp(7px, 0.73cqi, 10px);
	padding: clamp(14px, 1.6cqi, 22px) clamp(16px, 1.89cqi, 26px);
	padding-inline-start: calc(var(--mqf-pathway-edge) + clamp(12px, 1.31cqi, 18px));
	margin-bottom: clamp(14px, 2.03cqi, 28px);
}
[dir="rtl"] .mqf .mqf-screen--licensing .mqf-pathway,
.mqf[dir="rtl"] .mqf-screen--licensing .mqf-pathway {
	background:
		linear-gradient(to left, var(--mqf-ring) 0 var(--mqf-pathway-edge), transparent var(--mqf-pathway-edge)),
		rgba(255, 255, 255, .05);
}
.mqf .mqf-screen--licensing .mqf-pathway:last-child { margin-bottom: 0; }

.mqf-screen--licensing .mqf-pathway__label {
	font-family: var(--mqf-head);
	font-size: var(--mqf-fs-lg);
	font-weight: 700;
	color: var(--mqf-ink);
	margin-bottom: clamp(6px, 0.73cqi, 10px);
}

.mqf-screen--licensing .mqf-pathway__req {
	font-weight: 300;
	font-size: var(--mqf-fs-body);
	line-height: var(--mqf-lh);
}

/* The "no prior experience" line is a muted footnote to the pathway, not the
   peach pill it was — the export sets it as plain dim text. */
.mqf-screen--licensing .mqf-pathway__years {
	display: block;
	background: none;
	color: var(--mqf-muted);
	font-size: var(--mqf-fs-body);
	padding: 0;
	border-radius: 0;
	margin-top: clamp(6px, 0.73cqi, 10px);
}

/*
 * The qualification link is the screen's call to action: a full-width 99px bar
 * filled with the export's gold ramp, running #D1913C at the foot to #FFD194 at
 * the head. It sits outside the panel, which is why it is the full 1372 rather
 * than the panel's inner width.
 */
.mqf .mqf-screen--licensing .mqf-qual-link {
	justify-content: space-between;
	gap: clamp(12px, 1.16cqi, 16px);
	min-height: clamp(64px, 7.19cqi, 99px);
	padding: clamp(12px, 1.31cqi, 18px) clamp(16px, 1.89cqi, 26px);
	border: 0;
	border-radius: clamp(8px, 0.69cqi, 9.5px);
	background: linear-gradient(0deg, #D1913C 0%, #FFD194 100%);
	color: var(--mqf-on-accent);
	font-family: var(--mqf-head);
	font-weight: 700;
	font-size: var(--mqf-fs-lg);
	margin-bottom: 0;
}
.mqf .mqf-screen--licensing .mqf-qual-link:hover,
.mqf .mqf-screen--licensing .mqf-qual-link:focus-visible {
	background: linear-gradient(0deg, #C68F2C 0%, #FFC97E 100%);
}
/* The chevron inherits the bar's dark ink rather than staying mint. */
.mqf-screen--licensing .mqf-qual-link__go {
	color: var(--mqf-on-accent);
	font-size: clamp(1.1rem, 1.74cqi, 1.5rem);
}

/* Several qualifications stack, each its own bar. */
.mqf-screen--licensing .mqf-field__value .mqf-qual-link + .mqf-qual-link {
	margin-top: clamp(12px, 1.6cqi, 22px);
}

/* The first note clears the link by 67px in the artwork; the two below it sit
   on the same 42px rhythm the other screens use. */
.mqf .mqf-screen--licensing .mqf-note { margin-top: clamp(18px, 3.05cqi, 42px); }
.mqf .mqf-screen--licensing .mqf-note:first-of-type { margin-top: clamp(28px, 4.9cqi, 67.5px); }

.mqf:has(.mqf-screen--licensing) > .mqf-legal { display: none; }

/* The screen draws §7's wording itself, so the shell's copy would be a repeat. */
.mqf:has(.mqf-screen--rows) > .mqf-legal { display: none; }

.mqf-badge {
	display: inline-block;
	font-size: .72rem;
	font-weight: 700;
	padding: 4px 11px;
	border-radius: 100px;
	background: var(--mqf-accent);
	color: var(--mqf-on-accent);
}
.mqf-badge--soft { background: var(--mqf-mint-light); color: var(--mqf-mint-ink); }

/* ---------- Rows ---------- */
.mqf-rows { display: flex; flex-direction: column; gap: 10px; }
.mqf .mqf-row {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	background: var(--mqf-card);
	border: 1px solid var(--mqf-line);
	border-radius: var(--mqf-radius-sm);
	padding: 15px 18px;
	color: var(--mqf-ink);
	transition: border-color .18s, background .18s;
}
.mqf .mqf-row:hover { border-color: var(--mqf-accent); background: var(--mqf-card-alt); }
.mqf-row__level {
	flex: 0 0 auto;
	background: var(--mqf-accent-soft);
	color: var(--mqf-accent);
	font-size: .76rem;
	font-weight: 700;
	padding: 5px 10px;
	border-radius: 7px;
	min-width: 44px;
	text-align: center;
}
.mqf-row__body  { flex: 1; min-width: 0; }
.mqf-row__title { font-weight: 700; display: block; color: var(--mqf-ink); white-space: normal; overflow-wrap: break-word; }
.mqf-row__nos   { font-size: .76rem; color: var(--mqf-muted); letter-spacing: .03em; }
/* inline-block, not inline: transform has no effect on a non-replaced inline
   element, so the RTL flip below was silently doing nothing and the arrow kept
   pointing the way it does in English. */
.mqf-row__go    { color: var(--mqf-coral); font-size: 1.3rem; line-height: 1; display: inline-block; }
[dir="rtl"] .mqf-row__go,
.mqf[dir="rtl"] .mqf-row__go { transform: scaleX(-1); }

/* ---------- Panels + fields ---------- */
.mqf-panel {
	background: var(--mqf-card);
	border: 1px solid var(--mqf-line);
	border-radius: var(--mqf-radius);
	padding: 24px;
	margin-bottom: 16px;
	box-shadow: var(--mqf-shadow);
}
@media (max-width: 640px) { .mqf-panel { padding: 18px; } }

.mqf-field { padding: 18px 0; border-bottom: 1px solid var(--mqf-line); }
.mqf-field:first-child { padding-top: 0; }
.mqf-field:last-child  { border-bottom: 0; padding-bottom: 0; }
.mqf-field__label {
	font-size: .78rem;
	font-weight: 700;
	color: var(--mqf-muted);
	letter-spacing: .03em;
	margin-bottom: 8px;
}
.mqf-field__value p:last-child { margin-bottom: 0; }

.mqf-pathway {
	background: var(--mqf-sunken);
	border-inline-start: 3px solid var(--mqf-mint);
	border-radius: var(--mqf-radius-sm);
	padding: 14px 16px;
	margin-bottom: 10px;
}
.mqf-pathway:last-child { margin-bottom: 0; }
.mqf-pathway__label { font-weight: 700; margin-bottom: 4px; }
.mqf-pathway__req p:last-child { margin-bottom: 0; }
.mqf-pathway__years {
	display: inline-block;
	font-size: .78rem;
	background: var(--mqf-peach-light);
	color: var(--mqf-peach-ink);
	padding: 3px 11px;
	border-radius: 100px;
	margin-top: 8px;
}

.mqf .mqf-qual-link {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	background: var(--mqf-mint-light);
	border: 1px solid rgba(131, 207, 190, .28);
	border-radius: var(--mqf-radius-sm);
	padding: 13px 15px;
	margin-bottom: 8px;
	font-weight: 500;
	color: var(--mqf-ink);
}
.mqf .mqf-qual-link:hover { background: var(--mqf-mint-light); border-color: var(--mqf-mint); }
.mqf-qual-link--plain { cursor: default; }
.mqf-qual-link__go { margin-inline-start: auto; color: var(--mqf-mint-ink); display: inline-block; }
[dir="rtl"] .mqf-qual-link__go,
.mqf[dir="rtl"] .mqf-qual-link__go { transform: scaleX(-1); }

.mqf-approval {
	background: var(--mqf-mint-light);
	border-radius: var(--mqf-radius-sm);
	padding: 10px 14px;
	font-size: .88rem;
}

/* ---------- Cohorts ---------- */
.mqf-cohorts { display: flex; flex-direction: column; gap: 10px; }

.mqf .mqf-cohort {
	display: flex;
	align-items: center;
	gap: 12px;
	border: 1px solid var(--mqf-line);
	border-radius: var(--mqf-radius-sm);
	padding: 13px 16px;
	background: var(--mqf-card);
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}
/* A full batch is context, not an option. */
.mqf .mqf-cohort.is-full { opacity: .55; cursor: default; }

.mqf .mqf-cohort input[type="radio"] {
	width: 18px !important;
	height: 18px !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var(--mqf-coral);
	appearance: auto !important;
	-webkit-appearance: auto !important;
}
.mqf .mqf-cohort:has(input:checked) { border-color: var(--mqf-accent); background: var(--mqf-accent-soft); }

.mqf-cohort__body { flex: 1; min-width: 0; }
.mqf-cohort__name { font-weight: 700; display: block; }
.mqf-cohort__date { font-size: .84rem; color: var(--mqf-muted); display: block; }

/*
 * The price is the batch's, so it sits on the row rather than on the programme
 * heading. Isolated LTR because "$450" reads left to right even in the Arabic
 * layout, where an unisolated currency symbol jumps to the wrong end.
 */
.mqf-cohort__price {
	margin-inline-start: auto;
	font-weight: 700;
	font-size: .95rem;
	white-space: nowrap;
	direction: ltr;
	unicode-bidi: isolate;
}

.mqf-cohort.is-full .mqf-cohort__price { color: var(--mqf-muted); }

/* The price already claimed the free space; a second auto margin would push
   the status away from it. */
.mqf-cohort__price + .mqf-cohort__status { margin-inline-start: 0; }

.mqf-cohort__status {
	margin-inline-start: auto;
	font-size: .76rem;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 100px;
	background: var(--mqf-mint-light);
	color: var(--mqf-mint-ink);
	white-space: nowrap;
}
.mqf-cohort.is-full .mqf-cohort__status { background: rgba(255, 255, 255, .07); color: var(--mqf-muted); }

.mqf-empty {
	background: var(--mqf-peach-light);
	border: 1px dashed var(--mqf-peach);
	border-radius: var(--mqf-radius-sm);
	padding: 20px;
	text-align: center;
	color: var(--mqf-peach-ink);
}

/* ---------- Price + downloads ---------- */
.mqf-price {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	background: var(--mqf-sunken);
	border-radius: var(--mqf-radius-sm);
	padding: 16px 18px;
	margin-bottom: 18px;
}
.mqf-price__amount { font-family: var(--mqf-head); font-size: 1.6rem; font-weight: 700; color: var(--mqf-ink); }
.mqf-price__note   { font-size: .8rem; color: var(--mqf-muted); flex-basis: 100%; }

.mqf-downloads { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
/*
 * Themes often scale links or bump their font-size on hover. These are laid
 * out in a row, so any size change on hover shoves the neighbouring button
 * sideways. Size, weight and transform are pinned across every state; only
 * colour changes.
 */
.mqf .mqf-dl,
.mqf .mqf-dl:hover,
.mqf .mqf-dl:focus,
.mqf .mqf-dl:active {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--mqf-line);
	border-radius: var(--mqf-radius-sm);
	padding: 12px 16px;
	font-size: .9rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: normal;
	color: var(--mqf-ink);
	min-height: 48px;
	text-decoration: none;
	transform: none;
	scale: none;
	box-shadow: none;
}
.mqf .mqf-dl { background: var(--mqf-card); }
.mqf .mqf-dl:hover,
.mqf .mqf-dl:focus { border-color: var(--mqf-accent); background: var(--mqf-card-alt); }
.mqf-dl__icon { color: var(--mqf-accent); }

/*
 * A document that has not been uploaded yet.
 *
 * Same footprint as a real download button, so the row keeps its rhythm and a
 * qualification awaiting its brochure does not look like one that has fewer
 * documents than the rest. Everything else says "not yet": a dashed rule
 * instead of a solid one, muted ink, and the accent dropped from the icon so
 * nothing on it reads as actionable. No hover state at all — a chip that
 * lights up under the cursor is inviting a click it cannot honour.
 */
.mqf .mqf-dl--soon,
.mqf .mqf-dl--soon:hover,
.mqf .mqf-dl--soon:focus {
	border-style: dashed;
	border-color: var(--mqf-line);
	background: transparent;
	color: var(--mqf-muted);
	cursor: default;
}

.mqf .mqf-dl--soon .mqf-dl__icon {
	color: inherit;
	opacity: .8;
}

/* ---------- Buttons ---------- */
.mqf .mqf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 1rem;
	font-weight: 700;
	border: 0;
	border-radius: var(--mqf-radius-sm);
	padding: 15px 30px;
	/* §12: large tappable targets — most visitors are on a phone. */
	min-height: 54px;
	text-align: center;
	transition: background .16s, transform .16s;
}
.mqf .mqf-btn:hover:not(:disabled) { transform: translateY(-1px); }
.mqf .mqf-btn:disabled { opacity: .6; cursor: default; transform: none; }

/* Gold carries dark text, not white: white on #E0A63E falls below 3:1 and the
   label is the one thing on the button that has to be read. */
.mqf .mqf-btn--primary,
.mqf .mqf-btn--primary:hover,
.mqf .mqf-btn--gold,
.mqf .mqf-btn--gold:hover { background: var(--mqf-accent); color: var(--mqf-on-accent); }
.mqf .mqf-btn--primary:hover:not(:disabled),
.mqf .mqf-btn--gold:hover:not(:disabled) { background: var(--mqf-accent-dark); }

/* The secondary button. On a navy ground the old navy fill vanished, so it is
   a raised surface with a rule around it instead. */
.mqf .mqf-btn--navy,
.mqf .mqf-btn--navy:hover {
	background: var(--mqf-card-alt);
	color: var(--mqf-ink);
	box-shadow: inset 0 0 0 1px var(--mqf-line);
}
.mqf .mqf-btn--navy:hover:not(:disabled) { background: var(--mqf-navy); }

.mqf .mqf-btn--block { width: 100%; }

/* ---------- Form ---------- */
.mqf-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 660px) { .mqf-grid { grid-template-columns: 1fr; } }
.mqf-fg--full { grid-column: 1 / -1; }

/*
 * Consent rows and the study-language pills are labels inside .mqf-fg too, and
 * this rule outranked their own (0,2,1 against 0,2,0) — display:block flattened
 * both, and the bottom margin and heavier weight came along with it. Excluded
 * by name rather than by raising specificity everywhere else.
 *
 * The delivery-mode pills escaped it only because they render outside .mqf-fg,
 * which is why one set of pills looked right and the other did not.
 */
.mqf .mqf-fg label:not(.mqf-check):not(.mqf-pill) {
	display: block;
	font-size: .88rem;
	font-weight: 500;
	margin-bottom: 6px;
	color: var(--mqf-ink);
	text-transform: none;
}
.mqf-req { color: var(--mqf-danger); }

/*
 * Themes commonly style form controls with !important (dark-theme input
 * backgrounds especially), which a normal scoped rule cannot outrank. The
 * wizard has to be legible wherever it is embedded, so colour and background
 * are forced here. Kept to the properties that actually break legibility —
 * layout and spacing stay overridable.
 */
.mqf .mqf-fg input[type="text"],
.mqf .mqf-fg input[type="email"],
.mqf .mqf-fg input[type="tel"],
.mqf .mqf-fg input[type="number"],
.mqf .mqf-fg select,
.mqf .mqf-fg textarea {
	display: block;
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--mqf-line) !important;
	border-radius: var(--mqf-radius-sm);
	background: var(--mqf-sunken) !important;
	background-image: none !important;
	color: var(--mqf-ink) !important;
	min-height: 48px;
	box-shadow: none !important;
	text-shadow: none;
	opacity: 1;
}
.mqf .mqf-fg textarea { min-height: 92px; resize: vertical; }

.mqf .mqf-fg input::placeholder,
.mqf .mqf-fg textarea::placeholder { color: var(--mqf-muted) !important; opacity: 1; }

/* The native popup is painted by the browser, not by this sheet — `color-scheme`
   on .mqf does most of the work; this keeps the two in step where it does not. */
.mqf .mqf-fg select option { background: var(--mqf-card); color: var(--mqf-ink); }

.mqf .mqf-fg input:focus,
.mqf .mqf-fg select:focus,
.mqf .mqf-fg textarea:focus {
	outline: 2px solid var(--mqf-accent);
	outline-offset: 1px;
	border-color: transparent !important;
	background: var(--mqf-sunken) !important;
}
.mqf .mqf-fg input[readonly] {
	background: rgba(255, 255, 255, .04) !important;
	color: var(--mqf-muted) !important;
}

.mqf .mqf-fg.is-invalid input,
.mqf .mqf-fg.is-invalid select,
.mqf .mqf-fg.is-invalid textarea {
	border-color: var(--mqf-danger) !important;
	background: var(--mqf-danger-soft) !important;
}

.mqf-phone { display: flex; }

/* The picker is deliberately narrow: it shows the country name in the open
   list but only needs to fit a dialling code once chosen. */
.mqf .mqf-phone .mqf-phone__code {
	width: auto;
	flex: 0 0 auto;
	max-width: 42%;
	border-inline-end: 0 !important;
	border-start-end-radius: 0;
	border-end-end-radius: 0;
	background: rgba(255, 255, 255, .04) !important;
	padding-inline: 10px;
}
.mqf .mqf-phone input {
	flex: 1;
	min-width: 0;
	border-start-start-radius: 0;
	border-end-start-radius: 0;
}

/* In RTL the control is still a left-to-right number, so the rounded corners
   have to follow the field order rather than the text direction. */
[dir="rtl"] .mqf .mqf-phone,
.mqf[dir="rtl"] .mqf-phone { direction: ltr; }
[dir="rtl"] .mqf .mqf-phone .mqf-phone__code,
.mqf[dir="rtl"] .mqf-phone .mqf-phone__code { text-align: left; }

.mqf-radios { display: flex; gap: 10px; flex-wrap: wrap; }
.mqf label.mqf-pill {
	flex: 1;
	min-width: 130px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px solid var(--mqf-line);
	border-radius: var(--mqf-radius-sm);
	padding: 12px;
	background: var(--mqf-sunken);
	min-height: 48px;
	margin: 0;
	cursor: pointer;
	font-weight: 400;
}
.mqf .mqf-pill:has(input:checked) { border-color: var(--mqf-accent); background: var(--mqf-accent-soft); font-weight: 700; }

.mqf label.mqf-check {
	display: flex;
	gap: 10px;
	/* Centred on the box rather than on the first line: every consent label
	   here is one or two lines, and centring is what reads as aligned. */
	align-items: center;
	background: var(--mqf-sunken);
	border-radius: var(--mqf-radius-sm);
	padding: 14px 15px;
	cursor: pointer;
	font-size: .92rem;
	font-weight: 400;
	line-height: 1.6;
	margin: 0;
}

/* The sentence takes the remaining width and wraps as a block, so a second
   line starts under the first rather than under the box. */
.mqf .mqf-check > span {
	flex: 1;
	min-width: 0;
}

/*
 * The consent boxes are drawn here rather than left native.
 *
 * Themes restyle `input[type=checkbox]` heavily, and several inflate the
 * :checked state — which is what threw these two rows out of line with each
 * other: a checked box a few pixels taller than an unchecked one, and the
 * label pushed off the box's centre. appearance:none removes the theme's
 * control and the tick is painted as a background image, so checked and
 * unchecked are the same size on every theme and in every browser.
 */
.mqf .mqf-check input[type="checkbox"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	flex: 0 0 20px;
	inline-size: 20px !important;
	block-size: 20px !important;
	min-inline-size: 20px !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	/* An unticked box needs a rule the eye can find on the dark inset, which the
	   general --mqf-line hairline is too faint to be. */
	border: 2px solid rgba(255, 255, 255, .26) !important;
	border-radius: 6px !important;
	background: var(--mqf-sunken) !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

/* Dark tick on the gold fill, for the same reason the gold button carries dark
   text: white on this gold is not a legible mark. */
.mqf .mqf-check input[type="checkbox"]:checked {
	border-color: var(--mqf-accent) !important;
	background: var(--mqf-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%230A1A2F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.4l3 3 6-6'/%3E%3C/svg%3E") center / 13px 13px no-repeat !important;
}

.mqf .mqf-check input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--mqf-accent);
	outline-offset: 2px;
}

/* An unticked required box is the commonest reason a submit is refused, so it
   is marked rather than left to the error line alone. */
.mqf .mqf-fg.is-invalid .mqf-check input[type="checkbox"] {
	border-color: var(--mqf-danger) !important;
}

.mqf .mqf-pill input {
	margin: 0;
	width: 18px !important;
	height: 18px !important;
	min-height: 0 !important;
	padding: 0 !important;
	flex: 0 0 auto;
	accent-color: var(--mqf-coral);
	appearance: auto !important;
	-webkit-appearance: auto !important;
}
/* Inline links inherit the label's size. Themes commonly give links their own
   font-size and weight, which makes "Download conditions sheet" tower over the
   sentence it sits inside. */
.mqf .mqf-check a,
.mqf .mqf-check a:hover,
.mqf .mqf-check a:focus {
	color: var(--mqf-coral);
	text-decoration: underline;
	font-size: inherit;
	font-family: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: none;
	transform: none;
}

.mqf-errors { color: var(--mqf-danger); font-size: .9rem; margin-bottom: 10px; min-height: 1.2em; }
.mqf-opt { color: var(--mqf-muted); font-weight: 400; }

/* An empty tagline should not leave a hole between title and meta — the
   flex:1 that equalises card heights makes the gap obvious when the course
   has no subtitle. */
.mqf-card__sub:empty { flex: 0 0 auto; }

/* Honeypot: off-screen rather than display:none, which some bots detect. */
/*
 * Clipped rather than pushed off-screen.
 *
 * This used to be `left: -9999px`, which resolves against the page — and in an
 * RTL document, content to the left of the origin is *inside* the scrollable
 * area, not outside it. The result was a page ten thousand pixels wide with the
 * wizard stranded in a corner, on form screens only, in Arabic only, which is
 * exactly where the honeypot is rendered.
 *
 * The clip technique occupies no space in any direction while leaving the field
 * in the DOM, focusable by a bot and ignored by a person — which is the whole
 * point of it.
 */
.mqf-hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- Done ---------- */
.mqf-done { text-align: center; padding: 44px 20px; }
.mqf-done__mark {
	width: 74px; height: 74px;
	border-radius: 50%;
	background: var(--mqf-mint-light);
	color: var(--mqf-mint-ink);
	display: grid; place-items: center;
	font-size: 2rem;
	margin: 0 auto 18px;
}

/* ---------- Legal ---------- */
.mqf-legal {
	margin-top: 24px;
	padding: 15px 18px;
	background: var(--mqf-sunken);
	border: 1px solid var(--mqf-line);
	border-radius: var(--mqf-radius-sm);
	font-size: .8rem;
	color: var(--mqf-muted);
	line-height: 1.7;
}
.mqf-legal p { margin: 0 0 6px; color: var(--mqf-muted); font-size: .8rem; }
.mqf-legal p:last-child { margin: 0; }

/* ---------- Checkout ---------- */
.mqf-line {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 0;
	border-bottom: 1px solid var(--mqf-line);
}
.mqf-line:first-child { padding-top: 0; }

.mqf-line__body  { flex: 1; min-width: 0; }
.mqf-line__title { font-weight: 700; overflow-wrap: break-word; }
.mqf-line__meta  { font-size: .84rem; color: var(--mqf-muted); }
.mqf-line__price { font-weight: 700; white-space: nowrap; }

.mqf .mqf-line__remove {
	font-size: .82rem;
	color: var(--mqf-muted);
	text-decoration: underline;
	padding: 4px;
}
.mqf .mqf-line__remove:hover { color: var(--mqf-coral); }
.mqf .mqf-line__remove:disabled { opacity: .5; }

.mqf .mqf-installments { margin: 18px 0; align-items: flex-start; }

.mqf-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-top: 16px;
	margin-top: 16px;
	border-top: 2px solid var(--mqf-line);
	font-family: var(--mqf-head);
	font-size: 1.3rem;
	font-weight: 700;
}

/*
 * What is actually charged today under an installment plan. Quieter than the
 * total and sitting directly under it, because the total is still the real
 * price of the programme — this is only the size of the first payment.
 */
.mqf-total--first {
	border-top: 1px dashed var(--mqf-line);
	font-size: 1.05rem;
	padding-top: 12px;
	margin-top: 12px;
	color: var(--mqf-coral);
}

.mqf-total--first[hidden] { display: none; }

/* ---------- Gateway chooser ---------- */
/*
 * Only rendered when there is genuinely a choice. The amount sits at the end
 * of each row because the two gateways charge in different currencies, and the
 * figure is the thing a buyer is actually comparing.
 */
.mqf-gateways { margin: 24px 0 8px; }

.mqf-gateways__title {
	font-family: var(--mqf-head);
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 12px;
}

.mqf .mqf-gateway {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	margin-bottom: 10px;
	border: 2px solid var(--mqf-line);
	border-radius: 10px;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

.mqf .mqf-gateway:hover { border-color: var(--mqf-coral); }

.mqf .mqf-gateway.is-selected {
	border-color: var(--mqf-coral);
	background: rgba(0, 0, 0, .02);
}

/* The whole row is the target, so the native radio only has to say which. */
.mqf .mqf-gateway input[type="radio"] { flex: 0 0 auto; margin: 0; }

.mqf-gateway__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.mqf-gateway__label { font-weight: 700; }
.mqf-gateway__hint { font-size: .85rem; opacity: .75; }

/*
 * Both currencies, stacked and right-aligned. The charged one leads; the
 * other sits under it, quieter — it is there so the two options can be
 * compared, not because it is what this one will take.
 */
.mqf-gateway__amounts {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 1px;
}

.mqf-gateway__amount {
	font-family: var(--mqf-head);
	font-weight: 700;
	white-space: nowrap;
}

.mqf-gateway__alt {
	font-size: .82rem;
	opacity: .65;
	white-space: nowrap;
}

.mqf .mqf-gateway:focus-within {
	outline: 2px solid var(--mqf-coral);
	outline-offset: 2px;
}

.mqf .mqf-price__note--currency[hidden] { display: none; }

/* ---------- Licensing page ---------- */
.mqf-licensing { margin-top: 40px; margin-bottom: 60px; }
.mqf-prose { line-height: 1.75; }

/* Delivery-mode choice on the programme screen. Virtual and in-person are
   priced separately, so the student picks before applying. */
.mqf-modes { display: flex; gap: 10px; flex-wrap: wrap; flex-basis: 100%; }
.mqf-modes .mqf-pill { flex: 1 1 160px; justify-content: space-between; padding: 12px 16px; }
.mqf-modes .mqf-pill strong { font-family: var(--mqf-head); }

/* ---------- Signed-in banner ----------
   A locked field with no explanation reads as broken. This says whose account
   the application belongs to, and offers the way out. */
.mqf-signedin {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	background: var(--mqf-mint-light);
	border: 1px solid rgba(131, 207, 190, .28);
	border-radius: var(--mqf-radius-sm);
	padding: 12px 16px;
	margin-bottom: 16px;
	font-size: .9rem;
}
.mqf-signedin__who { flex: 1; min-width: 0; overflow-wrap: break-word; }

/* Explains the read-only fields rather than leaving them merely greyed out. */
.mqf-signedin__note {
	display: block;
	margin-top: 4px;
	font-size: .82rem;
	color: var(--mqf-muted);
}
.mqf .mqf-signedin__out,
.mqf .mqf-signedin__out:hover {
	color: var(--mqf-muted);
	text-decoration: underline;
	font-size: .85rem;
	font-weight: 400;
	white-space: nowrap;
}
.mqf .mqf-signedin__out:hover { color: var(--mqf-coral); }

/* ---------- Account block (guests) ---------- */
.mqf-account {
	background: var(--mqf-card);
	border: 1px solid var(--mqf-line);
	border-radius: var(--mqf-radius);
	padding: 24px;
	margin-bottom: 16px;
	box-shadow: var(--mqf-shadow);
}
@media (max-width: 640px) { .mqf-account { padding: 18px; } }
.mqf-account h3 { margin-bottom: .2em; }
.mqf-account__note { color: var(--mqf-muted); font-size: .88rem; margin-bottom: 16px; }
.mqf-account__login { margin: 14px 0 0; font-size: .9rem; color: var(--mqf-muted); }
.mqf .mqf-account__login a,
.mqf .mqf-account__login a:hover {
	color: var(--mqf-coral);
	text-decoration: underline;
	font-size: inherit;
	font-weight: inherit;
}

/* Password fields need the same forced styling as the rest — themes hit
   input[type="password"] with their own rules. */
.mqf .mqf-fg input[type="password"] {
	display: block;
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--mqf-line) !important;
	border-radius: var(--mqf-radius-sm);
	background: var(--mqf-sunken) !important;
	color: var(--mqf-ink) !important;
	min-height: 48px;
	box-shadow: none !important;
	direction: ltr;
}
.mqf .mqf-fg input[type="password"]:focus {
	outline: 2px solid var(--mqf-accent);
	outline-offset: 1px;
	border-color: transparent !important;
}
.mqf .mqf-fg.is-invalid input[type="password"] {
	border-color: var(--mqf-danger) !important;
	background: var(--mqf-danger-soft) !important;
}

/* A locked field should look informational, not disabled-and-broken. */
.mqf .mqf-fg input[readonly] { cursor: default; }

/* A quieter alternative under the pay button — an offer, not a rival CTA. */
.mqf-contact-instead { margin: 14px 0 0; text-align: center; font-size: .9rem; color: var(--mqf-muted); }
.mqf .mqf-linkish,
.mqf .mqf-linkish:hover {
	color: var(--mqf-muted);
	text-decoration: underline;
	font-size: inherit;
	font-weight: 400;
}
.mqf .mqf-linkish:hover { color: var(--mqf-coral); }
.mqf .mqf-linkish:disabled { opacity: .5; cursor: default; }

/* ---------- Dual currency ----------
   The rial is the price; the dollar figure is the reassurance that PayPal's
   screen is not a mistake. Sized and coloured to read as a footnote, and
   forced LTR because "$7,022.00" is a left-to-right run inside Arabic text. */
.mqf .mqf-price__approx,
.mqf .mqf-cohort__approx {
	display: block;
	direction: ltr;
	unicode-bidi: isolate;
	font-size: .8em;
	font-weight: 400;
	color: var(--mqf-muted);
	margin-block-start: 2px;
}

/* In the intake list the price is a single inline run; the approximation goes
   under it without stretching the row. */
.mqf .mqf-cohort__price {
	text-align: end;
	line-height: 1.3;
}

.mqf .mqf-price__note--currency {
	font-weight: 600;
}

/* A run that must keep Latin order inside Arabic text: date ranges, dialling
   codes, money. Isolated rather than merely ltr, so the surrounding sentence
   is not reordered around it. */
.mqf .mqf-ltr {
	direction: ltr;
	unicode-bidi: isolate;
	display: inline-block;
}

/* The dialling code select was clipping "عُمان" to "عان". */
.mqf .mqf-phone .mqf-phone__code {
	min-inline-size: 9.5em;
}

/* ---------- Rial mark ----------
   The academy's own symbol, painted as a mask filled with currentColor rather
   than placed as an <img>: one file then works in ink on a white card, in grey
   on the checkout panel and in white on a coloured button, and it inherits the
   size of the price it belongs to.

   The URL is relative to this stylesheet, so the file must stay beside it. */
.mqf .mqf-omr {
	display: inline-block;
	inline-size: .95em;
	block-size: .68em;
	/* Optically centred on the digits — the mark sits low in its own box. */
	vertical-align: -.02em;
	margin-inline-end: .3em;
	background-color: currentColor;
	-webkit-mask: var(--mqf-omr-symbol, url("Medium.png")) no-repeat center / contain;
	mask: var(--mqf-omr-symbol, url("Medium.png")) no-repeat center / contain;
}

/* Without mask support the block above would paint a solid rectangle, which is
   far worse than no symbol at all. */
@supports not ((-webkit-mask: url("")) or (mask: url(""))) {
	.mqf .mqf-omr {
		background: var(--mqf-omr-symbol, url("Medium.png")) no-repeat center / contain;
	}
}

/* ---------- Title casing ----------
   The academy asked for capitalised titles. Applied to the wizard's own
   headings and list rows rather than to card titles, which carry the course
   names exactly as the academy writes them and are already cased on purpose.

   Arabic has no letter case, so this is inert on the Arabic side — no need to
   scope it by language. */
.mqf h1,
.mqf h2,
.mqf h3,
.mqf .mqf-route__title,
.mqf .mqf-row__title,
.mqf .mqf-track__label {
	text-transform: capitalize;
}

/* The start screen is the exception the approved design draws: its two headings
   are set as sentences and only the route labels are capitalised. */
.mqf .mqf-hero__title,
.mqf .mqf-next__title {
	text-transform: none;
}

/*
 * The qualification detail screen is the same exception. Its heading is the
 * course name — which belongs to the awarding body and is already cased the way
 * the academy publishes it, so capitalising turns "in"/"for" into "In"/"For" —
 * and the export sets "Available cohorts" above the list as a sentence too.
 */
.mqf .mqf-screen--program .mqf-head__title,
.mqf .mqf-screen--program .mqf-panel > h3 {
	text-transform: none;
}

/* ---------- Locked acknowledgement ----------
   The box cannot be ticked until the terms have been opened. Styled as
   unavailable rather than hidden, so the applicant can see what is being
   asked of them before they can answer it. */
.mqf label.mqf-check.is-locked {
	cursor: default;
}

.mqf .mqf-check.is-locked input[type="checkbox"] {
	opacity: .5;
	cursor: not-allowed;
	border-style: dashed !important;
}

.mqf .mqf-check__hint {
	display: block;
	margin-block-start: 4px;
	font-size: .82rem;
	color: var(--mqf-muted);
}

/* Once unlocked the instruction has been followed and only adds noise. */
.mqf .mqf-check:not(.is-locked) .mqf-check__hint {
	display: none;
}