/* =========================================================================
   Batley Pharmacy - Service Page template
   Everything the hero, steps, key-features panel, intro panel and FAQ list
   need, and nothing else.

   Split out of sections.css and responsive.css so it is enqueued only on
   pages using template-service-page.php.
   ========================================================================= */

/* =========================================================================
   Private Prescriptions page
   Written mobile-first, unlike the older sections above it: the flow layout
   is the base every browser gets, and the design's exact composition is
   layered on at 992px inside an @supports test for container queries. That
   ordering is deliberate — the three panel exports (1374x540, 1374x442 and
   1374x624, rounded corners baked into their alpha) are the ground the
   desktop composition is measured against in cqw, so 4.6cqw IS the design's
   63px heading at that width and the whole panel scales as one piece; any
   browser without container queries simply keeps the flow layout instead of
   inheriting sizes it cannot resolve.

   Colours here were sampled from the exported assets rather than eyeballed:
   the step numerals are #e8f1fb / #ffe9e2 / #caffaf and the icon tiles they
   sit beside are #0a61b1 / #f3774f / #429917.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Hero
   ---------------------------------------------------------------------- */

.pp-hero {
	padding-block: clamp(1.5rem, 0.9rem + 2.6vw, 3rem) 0;
}

.pp-hero__frame {
	position: relative;
	isolation: isolate;

	border-radius: var(--radius-xl);
	overflow: hidden;
}

/* In flow the panel is a covering ground; on desktop it goes back to being
   an ordinary image and sets the frame's height itself. */
.pp-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pp-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 1rem + 2.2vw, 2.5rem);
	padding: clamp(1.75rem, 1.1rem + 3.2vw, 3rem) clamp(1.25rem, 0.8rem + 2.4vw, 2.5rem);
}

.pp-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(0.875rem, 0.7rem + 0.9vw, 1.25rem);
}

.pp-hero__title {
	margin: 0;
	color: var(--color-heading);
	font-size: clamp(2rem, 1.35rem + 3.2vw, 3.25rem);
	font-weight: var(--fw-bold);
	line-height: 1.15;
	letter-spacing: var(--ls-heading);
}

/* IBM Plex Sans, as the Figma sets every service-page hero paragraph: it was
   named in the desktop block below but never applied, so the paragraph came
   out in Albert Sans. */
.pp-hero__text {
	margin: 0;
	max-width: 32rem;
	color: #232323;
	font-family: var(--font-button);
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
}

/* The photograph exports (Container-11 for Private Prescriptions, Container-15
   for NHS Dispensing) share one geometry, measured off their alpha: a 604x472
   canvas holding the 528x396 photograph at (38, 13), with its rounded corners
   and the soft drop shadow baked into the margin around it.

   The box here IS the photograph - 528x396 - and the export is drawn 604/528
   of that width, pulled up and left by its own margin, so the picture lands
   on the box and the shadow falls outside it onto the gradient, as the design
   has it. object-fit: cover used to scale the whole canvas into the box
   instead, which shrank the photograph to 461px and showed the shadow's
   margin inside the frame.

   No CSS shadow or radius: both are in the export. A picture that is not in
   this export frame renders 14% large and shifted - the field description
   says so. */
.pp-hero__media {
	position: relative;
	aspect-ratio: 528 / 396;
}

/* Absolute, not a negative margin: a box with an aspect-ratio still grows to
   hold in-flow content, and the export is taller than the box it is drawn
   over, so it made the box 459px and the panel 603px. Out of flow, the box
   stays exactly the photograph. */
.pp-hero__media img {
	position: absolute;
	top: -3.2828%;                /* 13 / 396 */
	left: -7.197%;                /* 38 / 528 */
	width: 114.3939%;             /* 604 / 528 */
	max-width: none;
	height: auto;
}

/* -------------------------------------------------------------------------
   2. "How can I get a private prescription?"
   Three steps on the ordinary content measure, so no container query is
   involved: the icon tile and its numeral share a row, the wording sits
   under them. The numerals are set as real type in the sampled tints rather
   than shipped as images, the way the vaccination chips are, so they stay
   sharp and rescale with everything else.
   ---------------------------------------------------------------------- */

/* 91px above the heading on the 1374 frame, from the NHS Dispensing Figma:
   its cards sit at Top 969 on the artboard with the hero panel ending at
   658, so 311px below the panel, and heading-to-cards is the 220px the
   header block already measures - the remainder is this padding. It had
   been trimmed to 56 by eye ("less above than below"), which put the cards
   35px high. Below, 80px: the cards end at 1258 on the artboard and the
   features panel starts at 1338, on both service-page designs. The full
   section gap that was here (112 at desktop) sat the panel 32px low. */
.pp-steps {
	padding-block: clamp(2rem, 1.6rem + 4.8vw, 5.6875rem) clamp(3rem, 1.5rem + 4.1vw, 5rem);
}

.pp-steps__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm);
	margin-bottom: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
	text-align: center;
}

.pp-steps__title {
	margin: 0;
}

/* 36rem, not 32: NHS Dispensing's first line - "At Batley Pharmacy, we
   dispense NHS prescriptions and advise on how to get" - measures 569px at
   16px, and the design keeps it whole. Where the copy breaks is the editor's
   return, rendered by the template; the width only has to not get in its way. */
.pp-steps__text {
	margin: 0;
	max-width: 36rem;
	color: var(--color-text);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

/* The design lays this out as three 368px cards butted together inside a
   1104px group - 168 + 368 = 536, and 536 + 368 = 904 - so there is no gap
   between the columns at all. What separates the copy is each card's own
   32px padding, twice over. A gap instead, as this had, made the columns
   wider than 368 and moved every line break with them. */
.pp-steps__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	max-width: 69rem; /* 1104 at the design's 16px root; scales past 1440 */
	margin: 0 auto;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

/* The `margin: 0 auto` above does not survive on its own. base.css resets
   `ul[class], ol[class] { margin: 0 }`, and `ol[class]` scores 0,1,1 against
   this rule's 0,1,0 — so the reset won and the group sat flush against the
   container's left edge instead of centring in it, exactly (1280 - 1104) / 2
   = 88px off. This rule scores 0,2,0 and carries nothing but the margin, so
   the column and gap overrides further down still apply as written. */
.pp-steps .pp-steps__list {
	margin-inline: auto;
}

/* 32px round the card, 20px between the icon row, the title and the copy. */
.pp-step {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	padding: 32px;
}

.pp-step__head {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.pp-step__icon {
	flex: 0 0 auto;
	width: clamp(2.75rem, 2.4rem + 1.4vw, 3.5rem);
	height: clamp(2.75rem, 2.4rem + 1.4vw, 3.5rem);
	border-radius: var(--radius-md);
}

.pp-step__number {
	font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
	font-weight: var(--fw-bold);
	line-height: 1;
	letter-spacing: var(--ls-heading);
}

/* Sampled from Text.png, 02-1.png and Text-1.png respectively. Decorative:
   the template marks them aria-hidden, and the list is an <ol>, so the
   sequence is still conveyed without relying on these to be readable. */
.pp-step__number--1 { color: #e8f1fb; }
.pp-step__number--2 { color: #ffe9e2; }
.pp-step__number--3 { color: #caffaf; }

/* The numeral as the design exports it (NHS Dispensing's Text-2/3/4): 48px
   tall beside the 56px tile, so it scales at 48/56 of the tile's clamp and
   the two shrink together on a phone. Width follows the picture - "01" is
   49px, "03" 61px. */
.pp-step__number-image {
	flex: 0 0 auto;
	width: auto;
	height: clamp(2.357rem, 2.057rem + 1.2vw, 3rem);
}

.pp-step__title {
	margin: 0;
	color: var(--color-heading);
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	line-height: 1.4;
}

/* The copy runs on a 304px measure — 368 less the card's 32px each side —
   and at 16px "Schedule an appointment with one of our" no longer fits on
   one line, which moves the whole paragraph's breaks. 15 fits; the 26.8px
   line is what puts four lines inside the card's 289px. */
.pp-step__text {
	margin: 0;
	color: var(--color-text);
	font-size: var(--fs-sm);
	line-height: 1.78;
}

/* -------------------------------------------------------------------------
   3. "Key features of Private Prescription"
   The blue panel with three tilted glass cards. Their positions and angles
   belong to the design, so each card keeps its own place by index rather
   than by document order — removing the first card in wp-admin must not
   slide the others across the panel.
   ---------------------------------------------------------------------- */

/* 9px between this panel and the grey one below it, and nothing else — both
   carry their own space inside them, so the gap only has to keep their edges
   apart. A full section gap here read as a dead white band. */
.pp-features {
	padding-block: 0 9px;
}

.pp-features__frame {
	position: relative;
	isolation: isolate;
	border-radius: var(--radius-xl);
	overflow: hidden;
}

.pp-features__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pp-features__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 1rem + 2.2vw, 2.5rem);
	padding: clamp(1.75rem, 1.1rem + 3.2vw, 3rem) clamp(1.25rem, 0.8rem + 2.4vw, 2.5rem);
}

/* In flow the heading reads first; the desktop rules put it back on the
   right, after the cards. */
.pp-features__copy {
	order: -1;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

/* Dark, not white. The copy sits on the pale end of the gradient — the half
   the design keeps light precisely so this can be read as ordinary body
   colour. White type belongs to the glass cards, which sit on the saturated
   end. */
/* Both are named colours from the design rather than the theme's own: this
   copy sits on the pale end of the gradient, which is why it is dark type at
   all, and the two are deliberately different weights of dark. */
.pp-features__title {
	margin: 0;
	color: #0f1923;
}

/* IBM Plex Sans, not the page's usual face — the design sets this paragraph
   in it, as it does the hero's. */
.pp-features__text {
	margin: 0;
	max-width: 30rem;
	color: #2d2d2d;
	font-family: var(--font-button);
	font-size: var(--fs-body);
	font-weight: var(--fw-regular);
	line-height: var(--lh-body);
}

.pp-features__cards {
	display: grid;
	gap: var(--space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* White at 10% behind a 1px white border at 15%, both straight from the
   design. They were 16% and 34% — heavy enough that the cards read as solid
   panels rather than glass over the gradient. */
.pp-feature {
	padding: clamp(1rem, 0.8rem + 0.9vw, 1.35rem);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.1);
	/* Frosted glass: whatever lies behind the card - the gradient, and on
	   the five-card panels the cards it overlaps - is blurred through it,
	   so an edge underneath reads as a soft haze rather than a line. 6px
	   left those edges crisp; the design diffuses them. Prefixed for
	   Safari, which still needs it. */
	-webkit-backdrop-filter: blur(22px);
	backdrop-filter: blur(22px);
}

/* The four-card design draws its 1px line along the top edge only - a
   highlight on the glass, not an outline. Set here so the phone layout has
   it too, not only the desktop composition. */
.pp-features__cards--4 .pp-feature,
.pp-features__cards--5 .pp-feature {
	border-width: 1px 0 0;
}

/* White copy for a saturated panel (Travel Health), chosen per page. */
.pp-features--light .pp-features__title {
	color: #ffffff;
}

.pp-features--light .pp-features__text {
	color: rgba(255, 255, 255, 0.9);
}

/* Its own width in the flow layout too - the copy is a flex column, which
   would otherwise stretch the pill to the panel's full width on a phone. */
.pp-features__cta {
	align-self: flex-start;
}

/* The pill's hover inverts, as the design draws it: white pill, blue
   label, the disc turning blue with a white chevron. */
.pp-features__cta:hover,
.pp-features__cta:focus-visible {
	background: #ffffff;
	color: var(--color-primary);
}

.pp-features__cta:hover .pill-cta__icon,
.pp-features__cta:focus-visible .pill-cta__icon {
	background: var(--color-primary);
	color: #ffffff;
}

.pp-features__cta .pill-cta__icon {
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* The panel keeps only 9px under it, for the intro panel that follows it on
   the other service pages. When the questions come straight after instead
   (Travel Health has no intro), they need the full section gap. */
.pp-features + .pp-faq {
	padding-top: var(--section-gap);
}

.pp-feature__title {
	margin: 0 0 0.4em;
	color: #ffffff;
	font-size: var(--fs-h4);
	font-weight: var(--fw-bold);
	line-height: 1.3;
}

.pp-feature__text {
	margin: 0;
	color: rgba(255, 255, 255, 0.92);
	font-size: var(--fs-sm);
	line-height: 1.55;
}

/* -------------------------------------------------------------------------
   4. "What is a private prescription?"
   The flat grey panel. The copy is optically centred on it — measured off
   the design, the text block's centre sits within 2% of the panel's own.
   ---------------------------------------------------------------------- */

.pp-intro {
	padding-block: 0 var(--section-gap);
}

.pp-intro__frame {
	position: relative;
	isolation: isolate;
	border-radius: var(--radius-xl);
	overflow: hidden;
	/* Named so the panel still has its colour if the export ever 404s. */
	background: #f0f0f0;
}

.pp-intro__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pp-intro__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 1rem + 2.2vw, 2.5rem);
	padding: clamp(1.75rem, 1.1rem + 3.6vw, 3.5rem) clamp(1.25rem, 0.8rem + 2.4vw, 2.5rem);
}

.pp-intro__copy {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.pp-intro__title {
	margin: 0 0 var(--space-3xs);
	color: var(--color-heading);
}

/* IBM Plex Sans, as the design sets every service-page paragraph. */
.pp-intro__text {
	margin: 0;
	color: var(--color-text);
	font-family: var(--font-button);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.pp-intro__media img {
	width: 100%;
	border-radius: var(--radius-lg);
	object-fit: cover;
}

/* -------------------------------------------------------------------------
   5. Common questions
   A list of <details>, so it opens and closes with no JavaScript; main.js
   only closes the siblings when one opens. The marker is drawn from two
   pseudo-element bars so it can cross-fade from + to - without an icon
   font, and Safari's own triangle is removed explicitly.
   ---------------------------------------------------------------------- */

.pp-faq {
	padding-block: 0 var(--section-gap);
}

/* One gap before the footer, not two. Every section carries the gap as its
   bottom padding and the footer carries it again as its top margin, so the
   last section on the page - the questions, usually - was sitting a double
   gap above the footer where the designs draw a single one (Ear Health's
   design has the same space there as between any two sections). */
.page-template-template-service-page .site-main > :last-child {
	padding-bottom: 0;
}

/* Held to the design's 1200 measure and centred, like the steps group above
   it: responsive.css lets .container out to 1280 from 1400px, which would
   otherwise put this 40px wide of the artboard on each side. */
.pp-faq__inner {
	display: grid;
	gap: clamp(1.75rem, 1.2rem + 2.4vw, 3.5rem);
	max-width: 75rem; /* 1200 at the design's 16px root; scales past 1440 */
	margin-inline: auto;
}

.pp-faq__copy {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

/* Albert Sans SemiBold 40 over a 60px line - the same heading the features
   and intro panels use. "Frequently asked" measures 318px at this size
   against ~321 in the design, and the whole phrase 510, which is why the
   design's 480px column turns it after "asked". */
.pp-faq__title {
	margin: 0;
	/* Not balanced, as base.css sets headings: balance evens the two lines
	   into "Frequently / asked questions", and the design's line is full -
	   "Frequently asked / questions". */
	text-wrap: wrap;
}

/* IBM Plex Sans 16 over 26, like every paragraph on the page, on a 410px
   measure: the design's first line ends at "issued" and its second at
   "provided by", and only a box between 405 and 417px gives both. */
.pp-faq__text {
	margin: 0;
	max-width: 25.625rem;
	color: var(--color-text);
	font-family: var(--font-button);
	font-size: var(--fs-body);
	line-height: 1.625;
}

/* A rule under each question and none above the first - the design's list
   starts with the question itself, not a line. */
.pp-faq__item {
	border-bottom: 1px solid var(--color-border);
}

/* IBM Plex Sans Medium 16, 21px above and below: 21 + 23 + 21 + the rule
   is the design's 66px row pitch. */
.pp-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding: clamp(0.9rem, 0.75rem + 0.6vw, 1.3125rem) 0;
	color: var(--color-heading);
	font-family: var(--font-button);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	line-height: 1.45;
	cursor: pointer;
	list-style: none;
	transition: color var(--dur) var(--ease);
}

/* Both spellings are needed: the pseudo-element for Safari, list-style for
   everyone else. */
.pp-faq__q::-webkit-details-marker {
	display: none;
}

.pp-faq__q:hover {
	color: var(--color-primary);
}

/* A 14px plus, drawn as two bars. */
.pp-faq__mark {
	position: relative;
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
}

.pp-faq__mark::before,
.pp-faq__mark::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.875rem;
	height: 1.5px;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

/* The upright bar is the one that disappears when the answer opens. */
.pp-faq__mark::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.pp-faq__item[open] .pp-faq__mark::after {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(0deg);
}

.pp-faq__a {
	padding: 0 clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(0.9rem, 0.75rem + 0.6vw, 1.15rem) 0;
	color: var(--color-text);
	font-size: var(--fs-sm);
	line-height: 1.7;
}

/* An answer from the FAQ library can run to several paragraphs; base.css
   zeroes paragraph margins, so space them here. The first keeps no top
   margin so a one-paragraph answer sits exactly where it always has. */
.pp-faq__a p + p {
	margin-top: 0.75em;
}

.pp-faq__a a {
	text-decoration: underline;
}

.pp-faq__item[open] .pp-faq__a {
	animation: pp-faq-open var(--dur) var(--ease-out) both;
}

@keyframes pp-faq-open {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------------------------------
   5b. Travel Vaccinations
   A centred heading and paragraph on the content measure, then a row of
   priced cards that scrolls sideways. Drawn on a page whose field set
   declares tv_cards - Travel Health.

   Read off the Travel Health design at 1440: cards 282 wide on a 300px
   pitch, the 275x149 photograph inset 3px inside a 1px rule, the price pill
   27px tall in #d2e6ff with #0a61b1 type - both sampled from the exports -
   and the copy on a 20px inset. Five cards make a 1482px row, wider than
   the artboard, and the design shows the row centred with a card cut by
   each edge; the track is a native scroller that main.js starts centred,
   so that is what the page shows and every card is still reachable.
   ---------------------------------------------------------------------- */

.tv {
	padding-block: clamp(3rem, 2rem + 4vw, 6rem) var(--section-gap);
	overflow-x: clip;
}

.tv__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm);
	max-width: 46.25rem;
	margin: 0 auto clamp(2.5rem, 1.7rem + 3.4vw, 4.75rem);
	text-align: center;
}

/* Albert Sans SemiBold 40/60, the page's section heading. */
.tv__title {
	margin: 0;
}

/* IBM Plex Sans 16/26, centred, on a 740px measure. */
.tv__text {
	margin: 0;
	color: var(--color-text);
	font-family: var(--font-button);
	font-size: var(--fs-body);
	line-height: 1.625;
}

/* The picked-out phrase: underlined in the copy's own colour, a link only
   when a URL is set. */
.tv__link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

a.tv__link:hover {
	color: var(--color-primary);
}

/* The track. A flex row on native horizontal scrolling with the scrollbar
   hidden; each card snaps into place. The side padding keeps the first and
   last cards clear of the screen edge once scrolled to, and 0 on the row's
   own box so the centring maths in main.js is about the cards alone. */
.tv__track {
	display: flex;
	gap: 18px;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--container-pad);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

/* Scored 0,2,0 on purpose: base.css resets `ul[class]` to no padding at
   0,1,1, which outranks the block's own class - the steps list met the same
   thing. The side padding is what keeps the first and last cards clear of
   the screen edge once scrolled to. */
.tv .tv__track {
	margin: 0;
	padding: 0 var(--container-pad) 8px;
}

.tv__track::-webkit-scrollbar {
	display: none;
}

/* Rows that fit sit centred on their own. */
@supports (justify-content: safe center) {
	.tv__track {
		justify-content: safe center;
	}
}

/* ---- One card ---- */

.tv-card {
	flex: 0 0 282px;
	width: 17.625rem; /* 282 at the design's 16px root */
	scroll-snap-align: center;
	padding: 3px 3px 0;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	background: var(--color-surface);
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

/* The design's highlighted card - a pale blue ground under a blue rule -
   is the card the pointer is on. */
.tv-card:hover,
.tv-card:focus-within {
	border-color: var(--color-primary-500);
	background: var(--color-primary-50);
}

.tv-card__media {
	position: relative;
	aspect-ratio: 275 / 149;
	overflow: hidden;
	border-radius: 5px 5px 0 0;
	background: var(--color-surface-muted);
}

.tv-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 27px tall, the figure in IBM Plex Sans Medium 14 on 14px of side padding
   - "£50" makes the export's 59px. */
.tv-card__price {
	position: absolute;
	top: 12px;
	left: 12px;
	display: inline-flex;
	align-items: center;
	height: 27px;
	padding: 0 14px;
	border-radius: var(--radius-pill);
	background: #d2e6ff;
	color: #0a61b1;
	font-family: var(--font-button);
	font-size: 0.875rem;
	font-weight: var(--fw-medium);
	line-height: 1;
	letter-spacing: 0;
}

.tv-card__body {
	padding: 22px 17px 18px;
}

.tv-card__category {
	margin: 0;
	color: var(--color-text);
	font-family: var(--font-button);
	font-size: var(--fs-xs);
	line-height: 1.5;
}

.tv-card__name {
	margin: 6px 0 0;
	color: var(--color-heading);
	font-family: var(--font-button);
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	line-height: 1.4;
	letter-spacing: 0;
}

/* Two facts side by side: the first takes the room, the second sits on a
   60px column so the age reads at the same place on every card. */
.tv-card__facts {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 3.75rem;
	gap: 0 var(--space-sm);
	margin: 36px 0 0;
}

.tv-card__fact dt {
	color: var(--color-text);
	font-family: var(--font-button);
	font-size: var(--fs-xs);
	line-height: 1.5;
}

.tv-card__fact dd {
	margin: 8px 0 0;
	color: var(--color-heading);
	font-family: var(--font-button);
	font-size: var(--fs-body);
	font-weight: var(--fw-medium);
	line-height: 1.4;
}
/* -------------------------------------------------------------------------
   5c. Travel Treatments and Preventative Care
   A centred heading and paragraph, then four cards across the 1200 measure:
   an icon disc, a name and a "Learn more" link. Drawn on a page whose field
   set declares tt_cards - Travel Health.

   Read off the design at 1440: four 285px cards on a 20px gap (1200 on the
   nose), 217 tall, the 80px disc and the copy on a 24px inset, the name at
   18, the link at 13 in the brand blue.

   The icon export is an 80x80 disc: the glyph fully opaque, the pale disc
   the tint at 48% alpha - so on the white card it reads as the design's
   pale ground. On hover the design turns the disc white while the card
   takes the tint, which a flat picture cannot do: over a tinted card the
   48% ground would simply vanish into it. So the export is shown as it is
   on a white disc at rest, and on hover it fades out and a glyph-only
   layer fades in: the export drawn again and masked by its own alpha
   intersected with itself five times, which leaves the glyph's pixels at
   100% and the ground at 0.478^5, about 2%. Browsers without
   mask compositing keep the picture on the white disc.
   Tints and glyphs are the four exports' own, sampled: the hover rule is
   the glyph at 30% over white.
   ---------------------------------------------------------------------- */

.tt {
	padding-block: 0 var(--section-gap);
}

/* The heading runs to ~750px on one line; the paragraph sits on a 560px
   measure beneath it - the only width that turns it after "preventative"
   (553.6px) and "consultation," (the next word would make 571.5), as the
   design does. */
.tt__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm);
	max-width: 50rem;
	margin: 0 auto clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
	text-align: center;
}

.tt__title {
	margin: 0;
}

.tt__text {
	max-width: 35rem;
	margin: 0;
	color: var(--color-text);
	font-family: var(--font-button);
	font-size: var(--fs-body);
	line-height: 1.625;
}

.tt__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: 20px;
	max-width: 75rem; /* 1200 at the design's 16px root; scales past 1440 */
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

/* Scored 0,2,0: base.css resets `ul[class]` margins at 0,1,1. */
.tt .tt__grid {
	margin-inline: auto;
}

/* ---- One card ---- */

.tt-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-height: 13.5625rem; /* 217 at the design's 16px root */
	padding: 24px;
	border: 1px solid var(--color-border);
	border-radius: 10px;
	background: var(--color-surface);
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.tt-card--green { --tt-ground: #deffcd; --tt-glyph: #429917; }
.tt-card--peach { --tt-ground: #ffe8e2; --tt-glyph: #f3774f; }
.tt-card--pink  { --tt-ground: #ffe2ff; --tt-glyph: #ff15fa; }
.tt-card--blue  { --tt-ground: #d3e6ff; --tt-glyph: #1a3070; }

.tt-card:hover,
.tt-card:focus-within {
	background: var(--tt-ground);
	border-color: var(--tt-ground);
	border-color: color-mix(in srgb, var(--tt-glyph) 30%, #fff);
}

/* The white disc under the export. Invisible on the white card at rest, it
   is what the glyph sits on once the card is tinted. */
.tt-card__icon {
	position: relative;
	display: block;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: #ffffff;
}

.tt-card__icon img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	transition: opacity var(--dur) var(--ease);
}

@supports (mask-composite: intersect) {
	/* The export again, as a background this time, with everything at the
	   ground's 48% alpha masked away: the glyph's own pixels survive - so a
	   glyph built from two colours, like the navy disc with the white cross
	   cut into it, keeps both - and the ground goes. Hidden until hover. */
	.tt-card__icon::after {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--tt-icon) center / 100% 100% no-repeat;
		opacity: 0;
		mask-image: var(--tt-icon), var(--tt-icon), var(--tt-icon), var(--tt-icon), var(--tt-icon);
		mask-size: 100% 100%;
		mask-position: center;
		mask-repeat: no-repeat;
		mask-composite: intersect;
		transition: opacity var(--dur) var(--ease);
	}

	.tt-card:hover .tt-card__icon img,
	.tt-card:focus-within .tt-card__icon img {
		opacity: 0;
	}

	.tt-card:hover .tt-card__icon::after,
	.tt-card:focus-within .tt-card__icon::after {
		opacity: 1;
	}
}
/* Albert Sans Medium 18. */
.tt-card__name {
	margin: 28px 0 0;
	color: var(--color-heading);
	font-size: 1.125rem;
	font-weight: var(--fw-medium);
	line-height: 1.4;
	letter-spacing: 0;
}

.tt-card__name a {
	color: inherit;
}

/* The name's link covers the whole card, so the card is the target. */
.tt-card__cover::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* IBM Plex Sans 13 in the brand blue. Decorative: the name carries the
   link, and this only says where it goes. */
.tt-card__more {
	margin-top: 12px;
	color: var(--color-primary);
	font-family: var(--font-button);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.tt-card__arrow {
	display: inline-block;
	transition: transform var(--dur) var(--ease);
}

.tt-card:hover .tt-card__arrow {
	transform: translateX(3px);
}
/* -------------------------------------------------------------------------
   5d. Copy beside a picture
   A heading and paragraph on the left, a photograph on the right, centred
   on each other. Drawn on a page whose field set declares cp_intro -
   Cholera Vaccination's "Travel Vaccinations" block.

   Read off the design at 1440: the copy on a 492px measure from the 1200
   measure's left edge - the width that turns the paragraph after "we" and
   rejects "a" at the end of the fifth line - and the picture 660 wide to
   the right edge, 48 between. The heading is the page's 40/50 SemiBold on
   16px, the paragraph IBM Plex 16/26.
   ---------------------------------------------------------------------- */

.cp {
	padding-block: 0 var(--section-gap);
}

.cp__inner {
	display: grid;
	gap: clamp(1.5rem, 1rem + 2.4vw, 3rem);
	align-items: center;
	max-width: 75rem; /* 1200 at the design's 16px root; scales past 1440 */
	margin-inline: auto;
}

.cp__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-sm);
}

.cp__title {
	margin: 0;
	/* Greedy, as the designs break: "Earwax Check and General Ear /
	   Examination", where balancing would move "Ear" down. */
	text-wrap: initial;
}

/* The 492px measure is the paragraph's alone: with no picture the heading
   runs the full width - "Hepatitis A Vaccination dosage schedule" is 757px
   on one line in that design - while the paragraph keeps its five lines.
   A page may set its own measure (--cp-measure, from the partial). */
.cp__text {
	max-width: var(--cp-measure, 30.75rem);
	margin: 0;
	color: var(--color-text);
	font-family: var(--font-button);
	font-size: var(--fs-body);
	line-height: 1.625;
}

/* Ear Health's rhythm: 16 under the heading (the column's gap), 12 between
   paragraphs, 22 above the button. */
.cp__text + .cp__text {
	margin-top: -0.25rem;
}

.cp__cta {
	margin-top: 0.375rem;
}

.cp__link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

a.cp__link:hover {
	color: var(--color-primary);
}

/* Never larger than the picture itself: Cholera's 704-wide photograph
   fills the 660 column; a narrower one - Hajj and Umrah's 624 - sits at
   its own size against the column's right edge, the content's edge, as
   the designs have it. Centred in the stacked layout. */
.cp__media img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
}

@media (min-width: 992px) {
	.cp__media img {
		margin-inline: auto 0;
	}

	/* A typed line break in the heading is the design's ("Why getting
	   Vaccinated / is important?"); below this the heading wraps freely. */
	.cp__title {
		white-space: pre-line;
	}
}

/* Side by side from 992px: 492 and 660 of the 1200 measure, 48 apart. */
@media (min-width: 992px) {
	.cp__inner {
		grid-template-columns: minmax(0, 492fr) minmax(0, 660fr);
		column-gap: 4%;
	}

	.cp--no-media .cp__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	/* A page that names its picture's width (--cp-media, as a share of the
	   1200 measure - Ear Health's 472px export column) gets a column exactly
	   that wide on the right, the picture filling it, and the copy takes
	   the rest: 680 for Ear Health, which is what lets "Earwax Check and
	   General Ear" stay on one line while the paragraph keeps its 492. */
	.cp--sized .cp__inner {
		grid-template-columns: minmax(0, 1fr) var(--cp-media, 39.3333%);
	}

	.cp--sized .cp__media img {
		width: 100%;
	}
}
/* -------------------------------------------------------------------------
   5e. Transparent, fixed pricing
   A blue panel: heading and a line on the left, price cards stepping down
   across the right. Drawn on a page whose field set declares pr_pricing -
   Cholera Vaccination.

   Read off the design: the panel is the 1374x458 export, sitting 39px into
   its 1440x536 frame. The design reads each card as 309x236 with a 24px
   radius, 32/25/25/25 padding and a 20px gap, white at 43% under a soft
   grey shadow, at (669, 100) and (996, 200) in the frame - so in the panel
   at (636, 61) and (963, 161): 61 above the first, 61 below the second,
   18 between them, and the second ends 102 from the right edge. A row
   anchored to that right edge with every second card 100 lower gives
   exactly those two positions and carries on for a third and fourth.

   Mobile-first: the flow layout is the base, the composition is layered on
   from 992px in cqw of the 1374 panel.
   ---------------------------------------------------------------------- */

.pr {
	padding-block: 0 var(--section-gap);
}

.pr__frame {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: var(--radius-xl);
	background: var(--color-primary-500);
}

.pr__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pr__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 1rem + 2.2vw, 2.5rem);
	padding: clamp(1.75rem, 1.1rem + 3.2vw, 3rem) clamp(1.25rem, 0.8rem + 2.4vw, 2.5rem);
}

/* Albert Sans SemiBold 40 on a 48px line, white; the line under it IBM
   Plex 16 at 90%. */
.pr__title {
	margin: 0;
	color: #ffffff;
}

.pr__text {
	margin: 0.75rem 0 0;
	color: rgba(255, 255, 255, 0.9);
	font-family: var(--font-button);
	font-size: var(--fs-body);
	line-height: 1.625;
}

.pr__cards {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---- One card ---- */

.pr-card {
	flex: 0 1 309px;
	width: 19.3125rem; /* 309 at the design's 16px root */
	max-width: 100%;
	padding: 32px 25px 25px;
	border-radius: 24px;
	background: rgba(255, 255, 255, 0.43);
	box-shadow: 0 25px 60px -12px rgba(125, 125, 125, 0.25);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

/* "Age 2-5": small, tracked, dark. */
.pr-card__age {
	margin: 0;
	color: var(--color-heading);
	font-family: var(--font-button);
	font-size: 0.75rem;
	font-weight: var(--fw-semibold);
	line-height: 1.5;
	letter-spacing: 0.06em;
}

.pr-card__name {
	margin: 6px 0 0;
	color: var(--color-primary);
	font-family: var(--font-button);
	font-size: 0.875rem;
	font-weight: var(--fw-medium);
	line-height: 1.571;
	letter-spacing: 0;
}

/* The figure is 48px Albert Sans Bold - the design's "£50" export is 86x35
   of glyph, which is that size - with "/dose" small beside its baseline. */
.pr-card__price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 20px 0 0;
}

.pr-card__figure {
	color: var(--color-heading);
	font-size: 3rem;
	font-weight: var(--fw-bold);
	line-height: 1.0833;
	letter-spacing: 0;
}

.pr-card__per {
	color: var(--color-text);
	font-family: var(--font-button);
	font-size: 0.75rem;
	line-height: 1.5;
}

/* A white pill the card's full width, 40 tall, the label in the brand blue. */
.pr-card__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 40px;
	margin-top: 20px;
	padding: 0 16px;
	border-radius: var(--radius-pill);
	background: #ffffff;
	color: var(--color-primary);
	font-family: var(--font-button);
	font-size: 0.8125rem;
	font-weight: var(--fw-medium);
	line-height: 1.25;
	letter-spacing: var(--ls-button);
	text-align: center;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.pr-card__button:hover,
.pr-card__button:focus-visible {
	background: var(--color-primary);
	color: #ffffff;
}

/* ---- The composition, from 992px ---- */

@media (min-width: 992px) {
	@supports (container-type: inline-size) {
		/* The panel is as tall as its stepped cards need: 458 for two (the
		   Cholera design), 360 for one (Hepatitis A's - 61 above the card,
		   63 below), another 100 for a third. */
		.pr__frame {
			container-type: inline-size;
			aspect-ratio: 1374 / 458;
		}

		.pr__frame--cards-1 {
			aspect-ratio: 1374 / 360;
		}

		.pr__frame--cards-3 {
			aspect-ratio: 1374 / 558;
		}

		.pr__inner {
			position: absolute;
			inset: 0;
			display: block;
			padding: 0;
		}

		/* 90px in, centred on the panel's height. */
		.pr__copy {
			position: absolute;
			left: 6.55cqw;
			top: 50%;
			width: 40cqw;
			transform: translateY(-50%);
		}


		.pr__text {
			margin-top: 0.8734cqw;
			font-size: 1.1645cqw;
		}

		/* Anchored 102 from the right edge and 61 down, 18 apart, every
		   second card 100 lower. */
		.pr__cards {
			position: absolute;
			top: 4.4396cqw;
			right: var(--pr-cards-right, 7.4236cqw);
			flex-wrap: nowrap;
			align-items: flex-start;
			gap: 1.31cqw;
		}

		.pr-card {
			flex: 0 0 22.4891cqw;
			width: 22.4891cqw;
			min-height: 17.176cqw;
			padding: 2.329cqw 1.8195cqw 1.8195cqw;
			border-radius: 1.7467cqw;
		}

		.pr-card:nth-child(even) {
			margin-top: 7.278cqw;
		}

		.pr-card__age {
			font-size: 0.8734cqw;
		}

		.pr-card__name {
			margin-top: 0.4367cqw;
			font-size: 1.019cqw;
		}

		.pr-card__price {
			gap: 0.5822cqw;
			margin-top: 1.4556cqw;
		}

		.pr-card__figure {
			font-size: 3.4934cqw;
		}

		.pr-card__per {
			font-size: 0.8734cqw;
		}

		.pr-card__button {
			min-height: 2.9112cqw;
			margin-top: 1.4556cqw;
			font-size: 0.9461cqw;
		}
	}
}
/* -------------------------------------------------------------------------
   5f. Symptoms
   A centred heading, then cards in rows of three - icon disc, name, a line
   of description, all centred. Drawn on a page whose field set declares
   sy_cards - Cholera Vaccination.

   Read off the design at 1440 (calibrated on the heading, 400px at 40):
   three 352px cards on a 24px gap - the 1104 group the steps use - about
   191 tall with a 24px row gap; the 48px disc, the name at 16 SemiBold, the
   description at 14/20 on a 255px measure, which is what the design's ~55px
   side margins give and what turns four of the six descriptions where the
   design does (the other two were broken by hand).
   ---------------------------------------------------------------------- */

.sy {
	padding-block: 0 var(--section-gap);
}

.sy__title {
	margin: 0 0 clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
	text-align: center;
}

.sy__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
	gap: 24px;
	max-width: 69rem; /* 1104 at the design's 16px root; scales past 1440 */
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

/* Scored 0,2,0: base.css resets `ul[class]` margins at 0,1,1. */
.sy .sy__grid {
	margin-inline: auto;
}

.sy-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 11.9375rem; /* 191 at the design's 16px root */
	padding: 28px 24px;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	background: var(--color-surface);
	text-align: center;
}

.sy-card__icon {
	display: block;
	width: 48px;
	height: 48px;
}

/* IBM Plex Sans SemiBold 16. */
.sy-card__name {
	margin: 16px 0 0;
	color: var(--color-heading);
	font-family: var(--font-button);
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	line-height: 1.5;
	letter-spacing: 0;
	text-wrap: balance;
}

/* IBM Plex Sans 14 over 20, on the 255px measure. */
.sy-card__text {
	max-width: 15.9375rem; /* 255 at the design's 16px root */
	margin: 8px auto 0;
	color: var(--color-text);
	font-family: var(--font-button);
	font-size: 0.875rem;
	line-height: 1.4286;
	/* Greedy, not the `pretty` base.css gives paragraphs: pretty pulls a
	   word down to avoid a short last line, and every one of these lines
	   is short - the design fills the first line and lets the second be
	   whatever is left. */
	text-wrap: wrap;
}

/* ---- Compact: four across, names only (Hepatitis A) ----
   Read off the design (calibrated on the heading, 197px at 40): a 968px
   group, four 230px cards on 16px gaps, 145 tall with a 20px row gap, the
   48px disc and the 16px name on 28px of vertical padding. */

.sy--compact .sy__grid {
	grid-template-columns: repeat(auto-fit, minmax(min(12.5rem, 100%), 1fr));
	gap: 20px 16px;
	max-width: 60.5rem; /* 968 at the design's 16px root; scales past 1440 */
}

.sy--compact .sy-card {
	min-height: 9.0625rem; /* 145 at the design's 16px root */
	padding: 28px 16px;
}

.sy--compact .sy-card__name {
	margin-top: 16px;
}

/* ---- Tips: left-aligned, small icon, an intro under the heading (Healthy
   Eating's "Balanced Diet Tips") ----
   Read off the design at 1440: the heading and a 16/26 intro left-aligned,
   16 apart, 76 above the cards; three 384px cards on the full 1200 measure,
   24 apart both ways, 225 tall, on 24 of padding with a 1px pale-blue rule
   and 8px corners; the 28px icon, 16 to the 14px SemiBold name, 12 to the
   13/23 description in the muted grey. */

/* Held to the design's 1200 measure, so the heading, the intro and the
   cards share one left edge: responsive.css lets .container out to 1280
   from 1400px, which would put the heading 40px left of the cards. */
.sy--tips > .container {
	max-width: calc(75rem + (var(--container-pad) * 2));
}

.sy--tips .sy__title {
	margin-bottom: 1rem;
	text-align: left;
}

/* With no intro the heading takes the intro's own space below it - 60 in
   Chikungunya's "Why Choose Batley Pharmacy?". */
.sy--tips .sy__title:last-of-type + .sy__grid {
	margin-top: 2.75rem;
}

.sy__text {
	max-width: 40rem;
	margin: 0 0 clamp(2.5rem, 1.8rem + 2.6vw, 4.75rem);
	color: var(--color-text);
	font-family: var(--font-button);
	font-size: var(--fs-body);
	line-height: 1.625;
	white-space: pre-line;
}

.sy--tips .sy__grid {
	grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
	gap: 24px;
	max-width: 75rem; /* 1200 at the design's 16px root; scales past 1440 */
}

.sy--tips .sy-card {
	align-items: flex-start;
	min-height: 14.0625rem; /* 225 at the design's 16px root */
	padding: 24px;
	border-color: #dbe8f8;
	text-align: left;
}

/* At the export's own size: 28px glyphs on "Balanced Diet Tips", 48px
   discs on "Combining Lifestyle Changes" - or the size the page names
   (--sy-icon, from the partial: Chikungunya's "Why Choose" at 28). */
.sy--tips .sy-card__icon {
	width: var(--sy-icon, auto);
	height: var(--sy-icon, auto);
	max-width: 48px;
	max-height: 48px;
}

/* The disc the partial draws round a glyph exported without one: the
   design's 48px circle in the brand blue at 10%, the glyph centred. */
.sy-card__disc {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(61, 153, 235, 0.1);
}

.sy-card__disc .sy-card__icon {
	width: 24px;
	height: 24px;
}

.sy--tips .sy-card__name {
	margin-top: 16px;
	font-size: 0.875rem;
	text-wrap: initial;
}

.sy--tips .sy-card__text {
	max-width: none;
	margin: 12px 0 0;
	color: var(--color-muted);
	font-size: 0.8125rem;
	line-height: 1.77;
}
/* ---- Tips, four across (Chikungunya's "What is Chikungunya?") ----
   Read off the design at 1440: four 282px cards on the 1200 measure, 24
   apart, 181 tall, on 20 of padding; the glyph 20 (drawn at 24 from its
   30px export), 20 to the 14px SemiBold name, 20 to the 13/21 description. */

.sy--cols-4 .sy-card {
	min-height: 11.3125rem; /* 181 at the design's 16px root */
	padding: 20px;
}

.sy--cols-4 .sy-card__icon {
	max-width: 24px;
	max-height: 24px;
}

.sy--cols-4 .sy-card__name {
	margin-top: 20px;
}

.sy--cols-4 .sy-card__text {
	margin-top: 20px;
	line-height: 1.6;
}

@media (min-width: 992px) {
	.sy--cols-4 .sy__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---- Icons: no cards, a centred row of 90px discs with a label under each
   (Hajj and Umrah 2's "Symptoms of Flu") ----
   Read off the design at 1440: the 40px heading centred, the 14px line 16
   under it, the discs 51 below that on a 146px pitch (56 between), the
   12px SemiBold label 20 under each disc. */

.sy--icons .sy__title {
	margin-bottom: 1rem;
}

.sy--icons .sy__text {
	max-width: none;
	margin: 0 auto 3.1875rem;
	font-size: 0.875rem;
	text-align: center;
}

.sy--icons .sy__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem 3.5rem;
	max-width: none;
}

.sy--icons .sy-card {
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.sy--icons .sy-card__icon {
	width: 5.625rem;
	height: 5.625rem;
}

.sy--icons .sy-card__name {
	margin-top: 1.25rem;
	font-size: 0.75rem;
	line-height: 1.3;
}

.sy--icons .sy-card__text {
	font-size: 0.8125rem;
}
/* -------------------------------------------------------------------------
   5g. Side effects
   A centred heading and line, then small cards in rows of three - an icon
   disc beside a name - the last stretching to fill its row. Drawn on a page
   whose field set declares se_cards - Cholera Vaccination.

   Read off the design (calibrated on the heading, 579px at 40): a 952px
   group centred on the page, three 304px cards on a 20px gap, 102 tall
   (20 + the 62px disc + 20), a 12px radius, the name 24 from the disc at
   20 Medium. The design sets two of the five names at 16 and three at 20;
   one size here.
   ---------------------------------------------------------------------- */

.se {
	padding-block: 0 var(--section-gap);
}

/* Straight after a features panel - which keeps only 9px under it, for the
   intro that follows it elsewhere - this needs the section gap itself. */
.pp-features + .se {
	padding-top: var(--section-gap);
}

/* The wrapper is nothing in the centred style; the split style makes it
   its two columns. */
.se__inner {
	display: contents;
}

.se__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	margin: 0 auto clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
	text-align: center;
}

.se__title {
	margin: 0;
}

.se__text {
	margin: 0;
	color: var(--color-text);
	font-family: var(--font-button);
	font-size: var(--fs-body);
	line-height: 1.625;
}

.se__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	max-width: 59.5rem; /* 952 at the design's 16px root; scales past 1440 */
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

/* Scored 0,2,0: base.css resets `ul[class]` margins at 0,1,1. */
.se .se__grid {
	margin-inline: auto;
}

/* The last card fills its row: in the second column it takes two, in the
   first it takes all three. */
.se-card:last-child:nth-child(3n + 2) {
	grid-column: span 2;
}

.se-card:last-child:nth-child(3n + 1) {
	grid-column: span 3;
}

.se-card {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 6.375rem; /* 102 at the design's 16px root */
	padding: 20px;
	border: 1px solid var(--color-border);
	border-radius: 12px;
	background: var(--color-surface);
}

.se-card__icon {
	flex: 0 0 auto;
	width: 62px;
	height: 62px;
}

/* Albert Sans Medium 20. */
.se-card__label {
	color: var(--color-heading);
	font-size: 1.25rem;
	font-weight: var(--fw-medium);
	line-height: 1.3;
	letter-spacing: 0;
}

@media (max-width: 767.98px) {
	.se__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.se-card:last-child:nth-child(3n + 2),
	.se-card:last-child:nth-child(3n + 1) {
		grid-column: auto;
	}

	.se-card:last-child:nth-child(odd) {
		grid-column: span 2;
	}
}

@media (max-width: 479.98px) {
	.se__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.se-card:last-child:nth-child(odd) {
		grid-column: auto;
	}

	.se-card {
		gap: 16px;
		min-height: 0;
		padding: 14px 16px;
	}

	.se-card__icon {
		width: 48px;
		height: 48px;
	}

	.se-card__label {
		font-size: 1.0625rem;
	}
}

/* ---- Split: copy left, dot-cards right (Chikungunya's "Side Effects of
   Chikungunya Vaccine") ----
   Read off the design at 1440: the 40/50 heading and the 14px line on the
   left, top-aligned with the cards; on the right two columns of 241px
   cards 24 apart across and 16 down, 56 tall on 14x16 of padding with a
   1px rule and 8px corners, a 6px blue dot 10 before the 13 SemiBold name.
   The cards' block is 506 wide against the 1200 measure's right edge. */

.se--split .se__inner {
	display: grid;
	gap: 2rem;
	max-width: 75rem;
	margin-inline: auto;
}

.se--split .se__header {
	align-items: flex-start;
	gap: 1rem;
	margin: 0;
	text-align: left;
}

.se--split .se__title {
	text-wrap: initial;
	white-space: pre-line;
}

.se--split .se__text {
	font-size: 0.875rem;
}

.se--split .se__grid,
.se--split .se .se__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 1.5rem;
	max-width: none;
	margin: 0;
}

.se--split .se-card,
.se--split .se-card:last-child {
	grid-column: auto;
	gap: 0.625rem;
	min-height: 3.5rem;
	padding: 0.875rem 1rem;
	border-color: #e5e7eb;
	border-radius: 0.5rem;
}

.se-card__dot {
	flex: 0 0 auto;
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 50%;
	background: var(--color-primary);
}

.se--split .se-card__label {
	font-family: var(--font-button);
	font-size: 0.8125rem;
	font-weight: var(--fw-semibold);
	line-height: 1.4;
}

@media (min-width: 992px) {
	.se--split .se__inner {
		grid-template-columns: minmax(0, 1fr) 31.625rem;
		gap: 3rem;
		align-items: start;
	}
}
/* -------------------------------------------------------------------------
   5h. Call-to-action panel
   A gradient panel with a heading, a paragraph and a pill button on the
   left, white on the blue. Drawn on a page whose field set declares
   ct_panel - Hepatitis A's "How does Batley Pharmacy help?".

   Read off the design against the 1374x442 panel: the copy 120 in, the
   heading Albert Sans SemiBold 40/50, the paragraph IBM Plex 16/26 on an
   870px measure - the width that holds its longest line (857) and rejects
   the next word (900) - 16 under the heading, 36 to the button, the block
   centred on the panel's height.

   Mobile-first: the flow layout is the base, the composition from 992px.
   ---------------------------------------------------------------------- */

.ct {
	padding-block: 0 var(--section-gap);
}

.ct__frame {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: var(--radius-xl);
	background: var(--color-primary-500);
}

.ct__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ct__inner {
	position: relative;
	z-index: 1;
	padding: clamp(1.75rem, 1.1rem + 3.2vw, 3rem) clamp(1.25rem, 0.8rem + 2.4vw, 2.5rem);
}

.ct__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

.ct__title {
	margin: 0;
	color: #ffffff;
}

.ct__text {
	margin: 0;
	color: rgba(255, 255, 255, 0.9);
	font-family: var(--font-button);
	font-size: var(--fs-body);
	line-height: 1.625;
}

.ct__cta {
	margin-top: 0.75rem;
}

/* The pill inverts on hover, as on the other panels: white pill, blue
   label, the disc turning blue with a white chevron. */
.ct__cta:hover,
.ct__cta:focus-visible {
	background: #ffffff;
	color: var(--color-primary);
}

.ct__cta:hover .pill-cta__icon,
.ct__cta:focus-visible .pill-cta__icon {
	background: var(--color-primary);
	color: #ffffff;
}

.ct__cta .pill-cta__icon {
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

@media (min-width: 992px) {
	@supports (container-type: inline-size) {
		/* The panel's shape follows its export or the page's crop of it (the
		   partial sets --ct-ratio); Hepatitis A's 1374x442 otherwise. */
		.ct__frame {
			container-type: inline-size;
			aspect-ratio: var(--ct-ratio, 1374 / 442);
		}

		.ct__inner {
			position: absolute;
			inset: 0;
			padding: 0;
		}

		/* 120 in, centred on the panel's height - or the page's own measures
		   (--ct-left, --ct-title, --ct-text, --ct-measure; Healthy Eating's
		   "Start Your Journey Today" is 82 in at 36 over 14 on 600). */
		.ct__copy {
			position: absolute;
			left: var(--ct-left, 8.7336cqw);
			top: 50%;
			width: var(--ct-measure, 63.3188cqw);
			gap: 1.1645cqw;
			transform: translateY(-50%);
		}

		.ct__title {
			white-space: pre-line;
		}

		.ct__text {
			font-size: var(--ct-text, 1.1645cqw);
		}

		/* A second paragraph stands a line apart from the first. */
		.ct__text + .ct__text {
			margin-top: 0.7cqw;
		}

		/* The hero pill's size: 50 tall, the 36px disc 7px in, the label
		   23px in; 36 under the paragraph. */
		.ct__cta {
			justify-content: space-between;
			min-width: 11.936cqw;
			margin-top: 1.4556cqw;
			padding: 0.5095cqw 0.5095cqw 0.5095cqw 1.674cqw;
			gap: 0.7278cqw;
			font-size: 1.1645cqw;
		}

		.ct__cta .pill-cta__icon {
			width: 2.6201cqw;
			height: 2.6201cqw;
		}

		.ct__cta .pill-cta__icon svg {
			width: 1.31cqw;
			height: 1.31cqw;
		}
	}
}
/* -------------------------------------------------------------------------
   5j. Guidelines beside a table
   A heading with a blue run and paragraphs on the left; on the right a
   642x459 gradient panel (corners in its export) carrying a titled white
   table - #, vaccine, who it is for. Drawn on a page whose field set
   declares gt_table - Hajj and Umrah's "Health Guidelines for travellers to
   Saudi Arabia".

   Read off the design at 1440: the copy on the shared 492 measure, Albert
   Sans SemiBold 40/50 over IBM Plex 16/26, the two centred on each other.
   The panel is 24 of padding round an 18/27 SemiBold white title, 24 above
   the table; the table's 43px header row on #eaf3fd in 13px SemiBold blue,
   the columns 20 in, 48 and 176 wide, the last taking the rest; rows in
   13/24 IBM Plex on 20 of padding, the index 14 SemiBold blue, the vaccine
   13 SemiBold, a 1px rule between rows. Everything in rem so the panel
   scales with the page past 1440.
   ---------------------------------------------------------------------- */

.gt {
	padding-block: 0 var(--section-gap);
}

.gt__inner {
	display: grid;
	gap: clamp(1.5rem, 1rem + 2.4vw, 3rem);
	align-items: center;
	max-width: 75rem;
	margin-inline: auto;
}

.gt__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-sm);
}

.gt__title {
	margin: 0;
	text-wrap: initial;
}

.gt__accent {
	color: var(--color-primary);
}

.gt__text {
	max-width: var(--gt-measure, 30.75rem);
	margin: 0;
	color: var(--color-text);
	font-family: var(--font-button);
	font-size: var(--fs-body);
	line-height: 1.625;
}

.gt__text + .gt__text {
	margin-top: -0.25rem;
}

.gt__panel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	width: 100%;
	max-width: 40.125rem;
	padding: 1.5rem;
	border-radius: 1.125rem;
	background: var(--color-primary-500);
}

.gt__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gt__panel-inner {
	position: relative;
	z-index: 1;
}

.gt__panel-title {
	margin: 0 0 1.5rem;
	color: #ffffff;
	font-size: 1.125rem;
	font-weight: var(--fw-semibold);
	line-height: 1.5;
	letter-spacing: 0;
}

.gt__table-wrap {
	overflow-x: auto;
	border-radius: 0.5rem;
	background: #ffffff;
}

.gt__table {
	width: 100%;
	/* On a phone the panel is narrower than three readable columns; the
	   table keeps this and scrolls sideways inside its white box. */
	min-width: 24rem;
	border-collapse: collapse;
	color: var(--color-text);
	font-family: var(--font-button);
	text-align: left;
}

.gt__th {
	padding: 0.8125rem 0.75rem 0.8125rem 0;
	background: #eaf3fd;
	color: var(--color-primary);
	font-size: 0.8125rem;
	font-weight: var(--fw-semibold);
	line-height: 1.3;
	white-space: nowrap;
}

.gt__td {
	padding: 1.25rem 0.75rem 1.25rem 0;
	vertical-align: top;
	font-size: 0.875rem;
	font-weight: var(--fw-regular);
	line-height: 1.8;
}

.gt__row + .gt__row .gt__td {
	border-top: 1px solid #e6eef8;
}

/* 20 in from the table's edge; 48 and 176 for the first two columns. */
.gt__th--index,
.gt__td--index {
	width: 3rem;
	padding-left: 1.25rem;
	box-sizing: border-box;
}

.gt__th--vaccine,
.gt__td--vaccine {
	width: 11rem;
	padding-right: 1rem;
	box-sizing: border-box;
}

.gt__th--target,
.gt__td--target {
	padding-right: 1.25rem;
}

.gt__td--index {
	color: var(--color-primary);
	font-weight: var(--fw-semibold);
}

.gt__td--vaccine {
	color: var(--color-heading);
	font-weight: var(--fw-semibold);
}

/* Side by side from 992px: 492 and 660 of the 1200 measure, 48 apart, the
   panel at its own 642 against the right edge. */
@media (min-width: 992px) {
	.gt__inner {
		grid-template-columns: minmax(0, 492fr) minmax(0, 660fr);
		column-gap: 4%;
	}

	.gt__panel {
		justify-self: end;
	}

	/* A typed line break in the heading is the design's; below this the
	   heading wraps freely. */
	.gt__title {
		white-space: pre-line;
	}
}
/* -------------------------------------------------------------------------
   5k. Steps panel
   A 1400x534 gradient panel (corners in its export): heading and paragraph
   on the left, white on the blue; on the right "Easy 3-step procedure:"
   over three white cards, each a 48px icon disc, a bold line and its
   numeral. Drawn on a page whose field set declares sp_panel - Hajj and
   Umrah's "Safe travels with Batley Pharmacy".

   Read off the design against the 1400 panel: the copy 108 in on a 476
   measure, Albert Sans SemiBold 40/56 over IBM Plex 14/23 in white, 14
   apart; the list 643 in and 702 wide, its 22/29 SemiBold title 24 above
   the cards; cards 92 tall, 12 apart, 12px corners, 24 of padding (20 on
   the right), the icon 48 with 20 to the 14px SemiBold text, the 12px
   SemiBold blue numeral against the right edge. The two columns top-align
   and the whole block is centred on the panel's height.

   Mobile-first: the flow layout is the base, the composition from 992px.
   ---------------------------------------------------------------------- */

.sp {
	padding-block: 0 var(--section-gap);
}

.sp__frame {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: var(--radius-xl);
	background: var(--color-primary-500);
}

.sp__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sp__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: clamp(1.5rem, 1rem + 2.4vw, 2.5rem);
	padding: clamp(1.75rem, 1.1rem + 3.2vw, 3rem) clamp(1.25rem, 0.8rem + 2.4vw, 2.5rem);
}

.sp__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.875rem;
}

.sp__title {
	margin: 0;
	color: #ffffff;
	text-wrap: initial;
}

.sp__text {
	max-width: 29.75rem;
	margin: 0;
	color: rgba(255, 255, 255, 0.92);
	font-family: var(--font-button);
	font-size: 0.875rem;
	line-height: 1.66;
}

.sp__list-title {
	margin: 0 0 1rem;
	color: #ffffff;
	font-size: 1.375rem;
	font-weight: var(--fw-semibold);
	line-height: 1.3;
	letter-spacing: 0;
}

/* Two selectors' worth of specificity: the base ol[class] reset would
   otherwise take the padding back. */
.sp .sp__steps {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-step {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	min-height: 5.75rem;
	padding: 1.375rem 1.5rem;
	border-radius: 0.75rem;
	background: #ffffff;
	color: var(--color-heading);
}

.sp-step__icon {
	flex: 0 0 auto;
	width: 3rem;
	height: 3rem;
}

.sp-step__text {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--font-button);
	font-size: 0.875rem;
	font-weight: var(--fw-semibold);
	line-height: 1.5;
}

.sp-step__number {
	flex: 0 0 auto;
	margin-left: 0.5rem;
	color: var(--color-primary);
	font-family: var(--font-button);
	font-size: 0.75rem;
	font-weight: var(--fw-semibold);
	line-height: 1;
}

/* The design's numeral export, 17x11: drawn at that size, in rem so it
   holds its place as the page scales. */
.sp-step__number--image {
	width: 1.0625rem;
	height: 0.6875rem;
}

@media (min-width: 992px) {
	@supports (container-type: inline-size) {
		.sp__frame {
			container-type: inline-size;
			aspect-ratio: 1400 / 534;
		}

		/* The two columns as one block, centred on the panel's height,
		   each column top-aligned within it. */
		.sp__inner {
			position: absolute;
			inset: 0;
			display: grid;
			grid-template-columns: 34cqw 50.1429cqw;
			justify-content: space-between;
			align-content: center;
			align-items: start;
			padding: 0 3.9286cqw 0 7.7143cqw;
			gap: 0;
		}

		.sp__copy {
			gap: 1cqw;
		}

		.sp__title {
			white-space: pre-line;
		}

		.sp__text {
			max-width: 34cqw;
			font-size: 1cqw;
			line-height: 1.66;
		}

		.sp__list-title {
			margin-bottom: 1.7143cqw;
			font-size: 1.5714cqw;
		}

		.sp .sp__steps {
			gap: 0.8571cqw;
		}

		.sp-step {
			gap: 1.4286cqw;
			min-height: 6.5714cqw;
			padding: 1.5714cqw 1.4286cqw 1.5714cqw 1.7143cqw;
			border-radius: 0.8571cqw;
		}

		.sp-step__icon {
			width: 3.4286cqw;
			height: 3.4286cqw;
		}

		.sp-step__text {
			font-size: 1cqw;
		}

		.sp-step__number {
			font-size: 0.8571cqw;
		}

		.sp-step__number--image {
			width: 1.2143cqw;
			height: 0.7857cqw;
		}
	}
}
/* -------------------------------------------------------------------------
   5l. Eligibility tabs
   A tall gradient panel (1400x813, cut out of its artboard export by the
   partial): a centred heading and line, a white two-way toggle, then two
   frosted cards - who is eligible (icon disc, name, line, ticked list) and
   the cost (icon disc, label, the figure in big blue, a line, a boxed
   note). Drawn on a page whose field set declares eg_tabs - Hajj and Umrah
   2's "Who can access the Private and NHS Flu Jab Service?".

   Read off the design against the 1400 panel: the heading 36 SemiBold 88
   from the top, the 14px line 30 under it, the toggle 35 under that - a 46
   tall white pill, the chosen half a blue pill, 12 SemiBold - and the cards
   41 under the toggle: two of 430, 35 apart, centred, 16px corners, 24 of
   padding, white at 60%; the 40px disc beside a 16 SemiBold name and 12
   line; the list at a 32 pitch in 12 SemiBold with a 12px blue tick. The
   cost card: the disc, then "Cost" 14 SemiBold 32 below, the figure 44
   SemiBold blue, 13/20 text, the note box white with 8px corners on 12x16.
   The panel is at least its export's shape and grows with a longer list.

   Mobile-first: the flow layout is the base, the composition from 992px.
   ---------------------------------------------------------------------- */

.eg {
	padding-block: 0 var(--section-gap);
}

.eg__frame {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: var(--radius-xl);
	background: var(--color-primary-500);
}

.eg__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.eg__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: clamp(1.75rem, 1.1rem + 3.2vw, 3rem) clamp(1.25rem, 0.8rem + 2.4vw, 2.5rem);
	text-align: center;
}

.eg__title {
	max-width: 44rem;
	margin: 0;
	color: #ffffff;
	text-wrap: initial;
}

.eg__text {
	margin: 1.25rem 0 0;
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--font-button);
	font-size: 0.875rem;
	line-height: 1.5;
}

.eg__tabs {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	margin-top: 1.75rem;
}

.eg__switch {
	display: inline-flex;
	padding: 0.25rem;
	border-radius: var(--radius-pill);
	background: #ffffff;
	box-shadow: 0 8px 24px rgba(20, 60, 120, 0.12);
}

.eg__tab {
	padding: 0.5625rem 1.25rem;
	border: 0;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--color-heading);
	font-family: var(--font-button);
	font-size: 0.75rem;
	font-weight: var(--fw-semibold);
	line-height: 1.25;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.eg__tab[aria-selected="true"] {
	background: var(--color-primary);
	color: #ffffff;
}

.eg__tab:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.eg__panel {
	display: grid;
	gap: 1.25rem;
	width: 100%;
	max-width: 56rem;
	margin-top: 2rem;
	text-align: left;
}

.eg-card {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	border-radius: 1rem;
	background: rgba(255, 255, 255, 0.6);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	color: var(--color-heading);
}

.eg-card__head {
	display: flex;
	align-items: center;
	gap: 1rem;
}

/* The design's 40px disc in the brand blue at 10%, the 20px glyph centred. */
.eg-card__disc {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: rgba(61, 153, 235, 0.14);
}

.eg-card__icon {
	width: 1.25rem;
	height: 1.25rem;
}

.eg-card__title {
	margin: 0;
	font-size: 1rem;
	font-weight: var(--fw-semibold);
	line-height: 1.3;
	letter-spacing: 0;
}

.eg-card__sub {
	margin: 0.125rem 0 0;
	color: var(--color-text);
	font-family: var(--font-button);
	font-size: 0.75rem;
	line-height: 1.4;
}

/* Two selectors' worth of specificity: the base ul[class] reset. */
.eg .eg-card__list {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.eg-card__item {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	font-family: var(--font-button);
	font-size: 0.75rem;
	font-weight: var(--fw-semibold);
	line-height: 1.5;
}

.eg-card__tick {
	flex: 0 0 auto;
	width: 0.75rem;
	height: 0.75rem;
	margin-top: 0.1875rem;
	color: var(--color-primary);
}

.eg-card__cost-icon {
	display: block;
	width: 2.5rem;
	height: 2.5rem;
}

.eg-card__label {
	margin: 2rem 0 0;
	font-family: var(--font-button);
	font-size: 0.875rem;
	font-weight: var(--fw-semibold);
	line-height: 1.3;
}

.eg-card__value {
	margin: 0.25rem 0 0;
	color: var(--color-primary);
	font-size: 2.75rem;
	font-weight: var(--fw-semibold);
	line-height: 1.15;
	letter-spacing: 0;
}

.eg-card__text {
	margin: 0.75rem 0 0;
	color: var(--color-text);
	font-family: var(--font-button);
	font-size: 0.8125rem;
	line-height: 1.55;
}

.eg-card__note {
	margin-top: 1.25rem;
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	background: #ffffff;
}

.eg-card__note-title {
	margin: 0;
	color: var(--color-primary);
	font-family: var(--font-button);
	font-size: 0.6875rem;
	font-weight: var(--fw-semibold);
	line-height: 1.5;
}

.eg-card__note-text {
	margin: 0.125rem 0 0;
	color: var(--color-text);
	font-family: var(--font-button);
	font-size: 0.6875rem;
	line-height: 1.5;
}

/* The Private side's pill: full width, 40 tall, 12 SemiBold with the phone
   beside it; lifts and darkens on hover like the other pills. */
.eg-card__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.5rem;
	margin-top: 1.25rem;
	padding: 0.5rem 1rem;
	border-radius: var(--radius-pill);
	background: var(--color-primary);
	color: #ffffff;
	font-family: var(--font-button);
	font-size: 0.75rem;
	font-weight: var(--fw-semibold);
	line-height: 1.25;
	text-decoration: none;
	transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.eg-card__cta:hover,
.eg-card__cta:focus-visible {
	background: var(--color-primary-hover);
	color: #ffffff;
	transform: translateY(-2px);
}

.eg-card__cta-icon {
	flex: 0 0 auto;
	width: 0.875rem;
	height: 0.875rem;
}

@media (min-width: 768px) {
	.eg__panel {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}

@media (min-width: 992px) {
	@supports (container-type: inline-size) {
		.eg__frame {
			container-type: inline-size;
			min-height: 0;
			aspect-ratio: var(--eg-ratio, 1400 / 813);
		}

		/* 88 above the heading, 73 under the cards. */
		.eg__inner {
			padding: 6.2857cqw 5cqw 5.2143cqw;
		}

		.eg__title {
			max-width: 80cqw;
		}

		.eg__text {
			margin-top: 2.1429cqw;
			font-size: 1cqw;
		}

		.eg__tabs {
			margin-top: 2.5cqw;
		}

		.eg__switch {
			padding: 0.2857cqw;
		}

		/* 168 wide against "NHS Flu Vaccine", 38 tall inside the 46 pill. */
		.eg__tab {
			padding: 0.8214cqw 2.5714cqw;
			font-size: 0.8571cqw;
		}

		/* Two 430 columns 35 apart, 41 under the toggle. */
		.eg__panel {
			grid-template-columns: 30.7143cqw 30.7143cqw;
			gap: 2.5cqw;
			justify-content: center;
			max-width: none;
			margin-top: 2.9286cqw;
		}

		.eg-card {
			padding: 1.7143cqw;
			border-radius: 1.1429cqw;
		}

		.eg-card__head {
			gap: 1.1429cqw;
		}

		.eg-card__disc,
		.eg-card__cost-icon {
			width: 2.8571cqw;
			height: 2.8571cqw;
		}

		.eg-card__icon {
			width: 1.4286cqw;
			height: 1.4286cqw;
		}

		.eg-card__title {
			font-size: 1.1429cqw;
		}

		.eg-card__sub {
			font-size: 0.8571cqw;
		}

		/* The list stops 49 short of the card's right edge - the 310 measure
		   that turns "…by 31 / March 2026)" where the design does. */
		.eg .eg-card__list {
			gap: 1cqw;
			margin-top: 2.2857cqw;
			padding-right: 3.5cqw;
		}

		.eg-card__item {
			gap: 0.7143cqw;
			font-size: 0.8571cqw;
		}

		.eg-card__tick {
			width: 0.8571cqw;
			height: 0.8571cqw;
			margin-top: 0.2143cqw;
		}

		.eg-card__label {
			margin-top: 2.2857cqw;
			font-size: 1cqw;
		}

		.eg-card__value {
			font-size: 3.1429cqw;
		}

		.eg-card__text {
			margin-top: 0.8571cqw;
			font-size: 0.9286cqw;
		}

		.eg-card__note {
			margin-top: 1.4286cqw;
			padding: 0.8571cqw 1.1429cqw;
			border-radius: 0.5714cqw;
		}

		.eg-card__note-title,
		.eg-card__note-text {
			font-size: 0.7857cqw;
		}

		.eg-card__cta {
			gap: 0.5714cqw;
			min-height: 2.8571cqw;
			margin-top: 1.4286cqw;
			font-size: 0.8571cqw;
		}

		.eg-card__cta-icon {
			width: 1cqw;
			height: 1cqw;
		}
	}
}
/* -------------------------------------------------------------------------
   5m. Who should / who should not
   Two columns on the 1200 measure. Left, the 600x887 gradient panel: a
   40/50 heading in white 40 from the top on 30 of side padding, a 14px
   line 16 under it, bullets at a 35 pitch, then two 540x243 cards 20
   apart - 20 of padding, a 12 SemiBold tag pill, the 24 SemiBold name 24
   under it, the 12px age line with its 16px glyph 30 under that, and a
   note in a translucent pill. The first card is the frosted white export
   (its shadow in the file), the second the blue gradient export, white
   type. Right, 48 from the panel: the same heading in the heading colour,
   a 14px grey line 12 under, five white rows 70 tall with a 1px rule and
   10px corners 18 apart - a 28px pale-red disc with a red cross, 16 to
   the 13 SemiBold text - and the exclusions box on pale red with its
   amber mark, 12 SemiBold title and 11px bullets. Drawn on a page whose
   field set declares ws_columns - Chikungunya Vaccination.
   ---------------------------------------------------------------------- */

.ws {
	padding-block: 0 var(--section-gap);
}

.ws__inner {
	display: grid;
	gap: 2rem;
	max-width: 75rem;
	margin-inline: auto;
}

/* ---- The panel ---- */

/* No colour of its own under the export: the picture carries its rounded
   corners, and a colour behind it showed as dark slivers where the two
   radii differ. Painted only on a panel with no picture. */
.ws__panel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: 1.3125rem; /* the export's own 21px corner */
}

.ws__panel--plain {
	background: var(--color-primary-500);
}

.ws__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ws__panel-inner {
	position: relative;
	z-index: 1;
	padding: 2.5rem 1.875rem 3.375rem;
}

.ws__title {
	margin: 0;
	color: #ffffff;
	text-wrap: initial;
	white-space: pre-line;
}

.ws__text {
	margin: 1rem 0 0;
	color: rgba(255, 255, 255, 0.9);
	font-family: var(--font-button);
	font-size: 0.875rem;
	line-height: 1.6;
}

/* Two selectors' worth of specificity: the base ul[class] reset. */
.ws .ws__list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
	color: rgba(255, 255, 255, 0.9);
	font-family: var(--font-button);
	font-size: 0.875rem;
	line-height: 1.6;
}

.ws .ws__list li {
	padding-left: 1rem;
	text-indent: -1rem;
}

.ws .ws__list li::before {
	content: "\2022\00a0\00a0";
}

/* ---- The cards ---- */

.ws-card {
	position: relative;
	isolation: isolate;
	overflow: visible;
	min-height: 15.1875rem;
	margin-top: 1.25rem;
	border-radius: 1.1875rem; /* the exports' own 19px corner */
}

.ws-card:first-of-type {
	margin-top: 2.5rem;
}

.ws-card__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: cover;
}

/* With no picture the styles stand on their own: frosted white, or the
   brand blue. Under a picture no colour is painted, for the same reason
   as the panel. */
.ws-card--plain.ws-card--light {
	background: rgba(255, 255, 255, 0.72);
}

.ws-card--plain.ws-card--blue {
	background: var(--color-primary);
}

.ws-card__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 1.5rem 1.25rem 1.25rem;
	color: var(--color-heading);
}

.ws-card--blue .ws-card__inner {
	color: #ffffff;
}

.ws-card__tag {
	display: inline-block;
	padding: 0.375rem 0.75rem;
	border-radius: var(--radius-pill);
	background: #dbeafe;
	color: var(--color-primary);
	font-family: var(--font-button);
	font-size: 0.75rem;
	font-weight: var(--fw-semibold);
	line-height: 1.2;
}

.ws-card--blue .ws-card__tag {
	background: rgba(255, 255, 255, 0.22);
	color: #ffffff;
}

.ws-card__name {
	margin: 1.5rem 0 0;
	font-size: 1.5rem;
	font-weight: var(--fw-semibold);
	line-height: 1.25;
	letter-spacing: 0;
}

.ws-card__age {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 1.875rem 0 0;
	font-family: var(--font-button);
	font-size: 0.75rem;
	line-height: 1.4;
}

.ws-card__age-icon {
	width: 1rem;
	height: 1rem;
}

.ws-card--blue .ws-card__age-icon {
	filter: brightness(0) invert(1);
}

.ws-card__note {
	margin: 1.25rem 0 0;
	padding: 0.5rem 0.75rem;
	border-radius: 0.5rem;
	background: rgba(255, 255, 255, 0.18);
	font-family: var(--font-button);
	font-size: 0.75rem;
	line-height: 1.5;
}

.ws-card--light .ws-card__note {
	background: rgba(37, 99, 235, 0.08);
}

/* ---- The right column ---- */

.ws__no-title {
	margin: 0;
	text-wrap: initial;
	white-space: pre-line;
}

.ws__no-text {
	margin: 0.75rem 0 0;
	color: var(--color-text);
	font-family: var(--font-button);
	font-size: 0.875rem;
	line-height: 1.6;
}

.ws .ws__rows {
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.ws__row {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 4.375rem;
	padding: 1rem;
	border: 1px solid #e5e7eb;
	border-radius: 0.625rem;
	background: #ffffff;
	color: var(--color-heading);
	font-family: var(--font-button);
	font-size: 0.8125rem;
	font-weight: var(--fw-semibold);
	line-height: 1.4;
}

.ws__cross {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: #fee2e2;
	color: #dc2626;
}

.ws__warn {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-top: 1.125rem;
	padding: 1rem;
	border: 1px solid #fecaca;
	border-radius: 0.625rem;
	background: #fff5f5;
	color: #991b1b;
	font-family: var(--font-button);
}

.ws__warn-icon {
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	margin-top: 0.125rem;
	color: #d97706;
}

.ws__warn-title {
	margin: 0;
	font-size: 0.75rem;
	font-weight: var(--fw-semibold);
	line-height: 1.5;
}

.ws .ws__warn-list {
	margin: 0.25rem 0 0;
	padding: 0 0 0 1rem;
	font-size: 0.6875rem;
	line-height: 1.6;
	list-style: disc;
}

/* Side by side from 992px: the 600 panel, 48 to the right column. */
@media (min-width: 992px) {
	.ws__inner {
		grid-template-columns: 37.5rem minmax(0, 1fr);
		gap: 3rem;
		align-items: start;
	}

	.ws__panel {
		min-height: 55.4375rem;
	}

	/* The panel's heading and the right column's start on one line. */
	.ws__no {
		padding-top: 2.5rem;
	}
}
/* -------------------------------------------------------------------------
   5n. Travel advice
   A 1374x458 gradient panel: heading and a line on the left, white on the
   blue; three white photo cards on the right, each a photograph over a few
   lines of advice. Drawn on a page whose field set declares ta_panel -
   Chikungunya Vaccination's "Important Travel Advice".

   Read off the design against the 1374 panel: the copy 114 in on a 270
   measure, Albert Sans SemiBold 36/46 over IBM Plex 12/20, 16 apart, the
   block centred on the panel's height; three 245x350 cards 24 apart, 89
   from the right edge and 57 from the top, 12px corners, the photograph
   206 tall (cover) and the 12/24 text on 24x16 of padding.

   Mobile-first: the flow layout is the base, the composition from 992px.
   ---------------------------------------------------------------------- */

.ta {
	padding-block: 0 var(--section-gap);
}

.ta__frame {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: var(--radius-xl);
	background: var(--color-primary-500);
}

.ta__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ta__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: clamp(1.5rem, 1rem + 2.4vw, 2.5rem);
	padding: clamp(1.75rem, 1.1rem + 3.2vw, 3rem) clamp(1.25rem, 0.8rem + 2.4vw, 2.5rem);
}

.ta__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

.ta__title {
	margin: 0;
	color: #ffffff;
	text-wrap: initial;
}

.ta__text {
	max-width: 22rem;
	margin: 0;
	color: rgba(255, 255, 255, 0.92);
	font-family: var(--font-button);
	font-size: 0.75rem;
	line-height: 1.67;
}

/* Two selectors' worth of specificity: the base ul[class] reset. */
.ta .ta__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ta-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 0.75rem;
	background: #ffffff;
	color: var(--color-heading);
}

.ta-card__photo {
	display: block;
	width: 100%;
	height: 12.875rem;
	object-fit: cover;
}

.ta-card__text {
	margin: 0;
	padding: 1.5rem 1rem;
	font-family: var(--font-button);
	font-size: 0.75rem;
	line-height: 2;
}

@media (min-width: 992px) {
	@supports (container-type: inline-size) {
		.ta__frame {
			container-type: inline-size;
			aspect-ratio: 1374 / 458;
		}

		.ta__inner {
			position: absolute;
			inset: 0;
			display: block;
			padding: 0;
		}

		/* 114 in, centred on the panel's height, running up to 24 short of
		   the cards. */
		.ta__copy {
			position: absolute;
			left: 8.2969cqw;
			top: 50%;
			width: 26.2cqw;
			gap: 1.1645cqw;
			transform: translateY(-50%);
		}

		.ta__title {
			white-space: pre-line;
		}

		.ta__text {
			max-width: var(--ta-measure, 19.651cqw);
			font-size: 0.8734cqw;
		}

		/* 89 from the right edge, 57 from the top: three 245 columns 24
		   apart, 350 tall. */
		.ta .ta__cards {
			position: absolute;
			top: 12.4454%;
			right: 6.4774cqw;
			display: flex;
			gap: 1.7467cqw;
		}

		.ta-card {
			width: 17.8311cqw;
			min-height: 25.4731cqw;
			border-radius: 0.8734cqw;
		}

		.ta-card__photo {
			height: 14.9927cqw;
		}

		.ta-card__text {
			padding: 1.7467cqw 1.1645cqw;
			font-size: 0.8734cqw;
		}
	}
}
/* -------------------------------------------------------------------------
   5i. Condition cards
   A gradient panel: heading and paragraph on the left, white on the blue;
   frosted cards on the right, each a condition's name, a line about it, a
   ticked list of symptoms and a white "Book Now" pill. Drawn on a page
   whose field set declares ei_cards - Ear Health's "Common Ear Infections".

   Read off the design against the 1374x458 panel: the copy 85 in on a 393
   measure, Albert Sans SemiBold 40/50 over IBM Plex 16/26, 16 apart, the
   block centred on the panel's height. Two 307x415 cards, 23 apart, 106
   from the right edge and 21.5 from the top and bottom, on 24 of padding
   with 16px corners; the name 16 SemiBold, the line 14/24.5 in the brand
   blue, the list 20 below it at a 33px pitch with a 14px tick, the pill 44
   tall at the foot. The cards are white at 62% over the panel, blurred.

   Mobile-first: the flow layout is the base, the composition from 992px.
   ---------------------------------------------------------------------- */

.ei {
	padding-block: 0 var(--section-gap);
}

.ei__frame {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: var(--radius-xl);
	background: var(--color-primary-500);
}

.ei__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ei__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: clamp(1.5rem, 1rem + 2.4vw, 2.5rem);
	padding: clamp(1.75rem, 1.1rem + 3.2vw, 3rem) clamp(1.25rem, 0.8rem + 2.4vw, 2.5rem);
}

.ei__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

.ei__title {
	margin: 0;
	color: #ffffff;
}

.ei__text {
	margin: 0;
	color: rgba(255, 255, 255, 0.92);
	font-family: var(--font-button);
	font-size: var(--fs-body);
	line-height: 1.625;
}

/* Two selectors' worth of specificity: the base ul[class] reset would
   otherwise take the padding back. */
.ei .ei__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ei-card {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	border-radius: 1rem;
	background: rgba(255, 255, 255, 0.62);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
}

.ei-card__title {
	margin: 0;
	color: var(--color-heading);
	font-size: 1rem;
	font-weight: var(--fw-semibold);
	line-height: 1.5;
	letter-spacing: 0.02em;
}

.ei-card__text {
	margin: 0.25rem 0 0;
	color: var(--color-primary);
	font-family: var(--font-button);
	font-size: 0.875rem;
	line-height: 1.75;
}

.ei .ei-card__list {
	display: flex;
	flex-direction: column;
	gap: 0.53rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.ei-card__item {
	display: flex;
	align-items: flex-start;
	gap: 0.4375rem;
	color: var(--color-primary);
	font-family: var(--font-button);
	font-size: 0.875rem;
	font-weight: var(--fw-medium);
	line-height: 1.75;
}

/* The tick sits on the first line's centre, whatever the line wraps to. */
.ei-card__tick {
	flex: 0 0 auto;
	width: 0.875rem;
	height: 0.875rem;
	margin-top: 0.4375rem;
}

.ei-card__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	margin-top: 1.25rem;
	padding: 0.5rem 1rem;
	border-radius: var(--radius-pill);
	background: #ffffff;
	color: var(--color-primary);
	font-family: var(--font-button);
	font-size: 0.875rem;
	font-weight: var(--fw-medium);
	line-height: 1.25;
	text-decoration: none;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.ei-card__cta:hover,
.ei-card__cta:focus-visible {
	background: var(--color-primary);
	color: #ffffff;
	transform: translateY(-2px);
}

/* ---- The tag over a card's name, and the "check" card style ----
   Healthy Eating's "Basic Exercises for All Fitness Levels": a small pale-
   blue tag ("Beginner", "Advanced") above the name, plain blue check ticks
   in place of the green boxes, the description in grey, and no pill. Read
   off the design against the 1400 panel: 28 of card padding, the tag 12
   SemiBold blue on 5x14 with 6px corners, 16 above the 16 SemiBold name,
   the 14/24 description, the list at a 41px pitch. */

.ei-card__tag {
	display: inline-block;
	align-self: flex-start;
	margin-bottom: 1rem;
	padding: 0.3125rem 0.875rem;
	border-radius: 0.375rem;
	background: rgba(255, 255, 255, 0.55);
	color: var(--color-primary);
	font-family: var(--font-button);
	font-size: 0.75rem;
	font-weight: var(--fw-semibold);
	line-height: 1.3;
}

.ei--check .ei-card__text {
	color: #5b6b82;
}

.ei--check .ei-card__tick {
	color: var(--color-primary);
	margin-top: 0.3125rem;
}

/* Three classes deep: it has to outscore the desktop block's `.ei
   .ei-card__list` below. */
.ei.ei--check .ei-card__list {
	gap: 1rem;
}

@media (min-width: 992px) {
	@supports (container-type: inline-size) {
		/* The panel's shape follows its export (the partial reads it from the
		   media library): Ear Health's 1374x458 unless a page's says else. */
		.ei__frame {
			container-type: inline-size;
			aspect-ratio: var(--ei-ratio, 1374 / 458);
		}

		.ei__inner {
			position: absolute;
			inset: 0;
			display: block;
			padding: 0;
		}

		/* 85 in, centred on the panel's height, running up to 23 short of
		   the cards; the 393 measure is the paragraph's alone, so the
		   heading - 433 wide - keeps its one line. The cards' geometry is
		   the page's where it sets one (--ei-card-w, --ei-cards-gap,
		   --ei-cards-right, --ei-title), Ear Health's otherwise. */
		.ei__copy {
			position: absolute;
			left: 6.186cqw;
			top: 50%;
			width: calc(100cqw - 6.186cqw - 1.674cqw - var(--ei-cards-right, 7.7147cqw) - (2 * var(--ei-card-w, 22.3435cqw)) - var(--ei-cards-gap, 1.674cqw));
			gap: 1.1645cqw;
			transform: translateY(-50%);
		}

		.ei__title {
			white-space: pre-line;
		}

		.ei__text {
			max-width: var(--ei-measure, 28.6026cqw);
			font-size: 1.1645cqw;
		}

		/* 106 from the right edge, 21.5 top and bottom: two 307 columns 23
		   apart, each card stretched to the row so the pills line up. A
		   single card keeps its column width rather than spreading. */
		.ei .ei__cards {
			position: absolute;
			top: 4.6943%;
			right: var(--ei-cards-right, 7.7147cqw);
			bottom: 4.6943%;
			display: flex;
			gap: var(--ei-cards-gap, 1.674cqw);
			align-items: stretch;
		}

		/* 31 of padding above the name (its glyphs 36 from the card's top in
		   the design), 24 on the other sides. */
		.ei-card {
			width: var(--ei-card-w, 22.3435cqw);
			padding: 2.2562cqw 1.7467cqw 1.7467cqw;
			border-radius: 1.1645cqw;
		}

		.ei-card__title {
			font-size: 1.1645cqw;
		}

		.ei-card__text {
			margin-top: 0.0728cqw;
			font-size: 1.0189cqw;
		}

		/* 17 above and at least 20 below: the pill sits at the foot of the
		   card whatever the list's length, never closer than that. */
		.ei .ei-card__list {
			gap: 0.6186cqw;
			margin-top: 1.2373cqw;
			margin-bottom: 1.4556cqw;
		}

		.ei-card__item {
			gap: 0.5095cqw;
			font-size: 1.0189cqw;
		}

		.ei-card__tick {
			width: 1.0189cqw;
			height: 1.0189cqw;
			margin-top: 0.3821cqw;
		}

		.ei-card__cta {
			min-height: 3.2023cqw;
			margin-top: auto;
			font-size: 1.0189cqw;
		}

		/* The check style against its 1400x534 panel: cards 40 from the top
		   and bottom on 28 of padding, the tag 12 on 5x14, 16 above the 16
		   name, 14 description, the list at a 41 pitch on 14 SemiBold. */
		.ei--check .ei__cards {
			top: 7.4906%;
			bottom: 7.4906%;
		}

		.ei--check .ei-card {
			padding: 2cqw;
		}

		.ei--check .ei-card__tag {
			margin-bottom: 1.1429cqw;
			padding: 0.3571cqw 1cqw;
			border-radius: 0.4286cqw;
			font-size: 0.8571cqw;
		}

		.ei--check .ei-card__title {
			font-size: 1.1429cqw;
		}

		.ei--check .ei-card__text {
			margin-top: 0.5714cqw;
			font-size: 1cqw;
			line-height: 1.7;
		}

		.ei.ei--check .ei-card__list {
			gap: 1.1786cqw;
			margin-top: 1.4286cqw;
			margin-bottom: 0;
		}

		.ei--check .ei-card__item,
		.ei--check .ei-card__tick {
			font-size: 1cqw;
		}

		.ei--check .ei-card__tick {
			width: 1cqw;
			height: 1cqw;
			margin-top: 0.4cqw;
		}
	}
}
/* -------------------------------------------------------------------------
   6. The desktop composition
   Everything above is the flow layout. From 992px, and only where container
   queries resolve, the three panels go back to being sized by their own
   exports and the content is placed on them in cqw — the design's own
   measurements, so the whole panel scales as one piece between 992px and
   the 1374px the artwork was drawn at.
   ---------------------------------------------------------------------- */

@media (min-width: 992px) {
	@supports (container-type: inline-size) {

		/* ---- Hero ---- */

		.pp-hero__frame {
			container-type: inline-size;
		}

		/* The gradient fills the frame rather than setting its height. Its
		   export is 1374x540, taller than the composition on it needs, and
		   the leftover showed as a band under the photograph. */
		.pp-hero__bg {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		/* Every number below is the Figma frame read straight off, expressed
		   as a share of the 1374px panel so the whole composition scales as
		   one piece.

		   Frame  : panel 1374x540 at (33, 105) of the 1440 artboard.
		   Photo  : 528x396 at (804, 177) absolute, so within the panel it sits
		            at left 771, top 72 - and 540 - 72 - 396 = 72 below it too.
		            The 72 is therefore the panel's own vertical padding, and
		            1407 - 1332 = 75 is its padding on the right.
		   Copy   : left 87. The NHS Dispensing frame reads the button at
		            Left 120 on the 1440 artboard, and 120 - 33 = 87; the 83
		            this used to carry was measured off a screenshot.

		   The panel's height is not declared. Content plus padding is
		   396 + 72 + 72 = 540 on the nose, so the export cannot leave a band.
		   The copy block is centred on that height: the same frame reads the
		   button at Top 518 with the panel starting 118 down the artboard,
		   which is 400 inside the panel - exactly where centring the NHS
		   block (170 + 28 + 90 + 28 + 50) lands it. */
		.pp-hero__inner {
			position: relative;
			flex-direction: row;
			align-items: center;
			gap: 2cqw;
			padding: 5.24cqw 5.4585cqw 5.24cqw 6.3319cqw;
		}

		.pp-hero__copy {
			flex: 0 1 auto;
			/* 28px between title, paragraph and button. */
			gap: 2.0378cqw;
		}

		.pp-hero__title {
			/* Albert Sans 700, 60px over an 85px line, tracking 0.1px, in a
			   589px box - the width both service-page Figmas give the title.
			   That box is what decides the line count, not nowrap as this
			   had: "Private Prescriptions" measures 585.8px in the theme's
			   own font file, so it holds one line (589x85 in its Figma), and
			   "NHS Prescription Dispensing" measures 806px, so it turns
			   after "Prescription" to the two lines its Figma shows (589x170).
			   Nowrap would have run the second under the photograph. */
			width: 42.8676cqw;
			max-width: none;
			color: #2d2d2d;
			font-weight: 700;
			font-size: 4.3668cqw;
			line-height: 1.4167;
			letter-spacing: 0.0017em;
		}

		.pp-hero__text {
			/* IBM Plex Sans 400, 18px over a 30px line, in a 488px box - the
			   measure that gives the design's three lines. */
			width: 35.5167cqw;
			max-width: none;
			color: #232323;
			font-size: 1.31cqw;
			line-height: 1.6667;
		}

		/* The Figma's pill: a fixed 164x50 with 7px of padding, so the 36px
		   white disc sits 7px in from the right and the label - 70px of IBM
		   Plex at 16px - starts 23px in from the left. A longer label widens
		   the pill from that minimum and keeps the 10px gap to the disc. */
		.pp-hero__cta {
			justify-content: space-between;
			min-width: 11.936cqw;
			padding: 0.5095cqw 0.5095cqw 0.5095cqw 1.674cqw;
			gap: 0.7278cqw;
			font-size: 1.1645cqw;
		}

		.pp-hero__cta .pill-cta__icon {
			width: 2.6201cqw;
			height: 2.6201cqw;
		}

		.pp-hero__cta .pill-cta__icon svg {
			width: 1.31cqw;
			height: 1.31cqw;
		}

		/* 528x396 of the 1374px frame - the photograph itself. The export's
		   shadow margin (38px each side, 63px below) overflows this box into
		   the panel's own 75px right and 72px bottom padding, so none of it
		   is clipped. The image rules are the shared ones above. */
		.pp-hero__media {
			flex: 0 0 auto;
			width: 38.4279cqw;
			margin-left: auto;
		}

		/* With no photograph the copy simply takes the panel's full measure. */
		.pp-hero__frame--no-media .pp-hero__text {
			width: 46cqw;
		}

		/* ---- Key features ---- */

		/* The frame is the design's 1374x442 whatever the picture is. The PP
		   and NHS exports ARE that frame, corners and all, so this changes
		   nothing for them; Travel Health's is a raw 2560x1441 gradient,
		   which used to set the frame's height by its own shape. Cover, and
		   let the frame's own radius cut the corners. */
		.pp-features__frame {
			container-type: inline-size;
			aspect-ratio: 1374 / 442;
		}

		.pp-features__bg {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.pp-features__inner {
			position: absolute;
			inset: 0;
			display: block;
			padding: 0;
		}

		.pp-features__cards {
			display: block;
			position: absolute;
			inset: 0;
		}

		/* 16px padding and a 12px radius on the 1374px panel. */
		.pp-feature {
			position: absolute;
			padding: 1.16cqw;
			border-radius: 0.87cqw;
			box-shadow: none;
		}

		/*
		 * Straight from the design, which places every card against the panel
		 * at 1374x442 sitting at (33, 1338):
		 *
		 *   Cost                    258x186 at (97.91, 1417.33)  -14.46deg
		 *   Prescription Access     258x151 at (417,    1369)     -9.46deg
		 *   Medication Availability 258x129 at (373,    1568)      7.51deg
		 *
		 * Two notes on turning those into CSS.
		 *
		 * The angles change sign. The design measures rotation
		 * anticlockwise-positive and CSS measures it clockwise-positive, so
		 * every figure is negated - which is why the first two tilt one way
		 * and the third the other, exactly as the design draws them.
		 *
		 * Each card is placed by its own top-left corner and given the
		 * design's height as a floor rather than a fixed size: a card whose
		 * wording is made longer in wp-admin grows downwards instead of
		 * spilling out of a box it cannot leave.
		 *
		 * The stacking is part of the design: Prescription Access lies over
		 * the other two, and Medication Availability over Cost.
		 */
		.pp-feature--1 {
			left: 4.72cqw;
			top: 17.95%;
			width: 18.78cqw;
			min-height: 42.08%;
			z-index: 1;
			transform: rotate(14.46deg);
		}

		.pp-feature--2 {
			/* 16px left of the design's 27.95cqw, closing the gap against the
			   Cost card. Both this card and the one below move rather than
			   Cost itself, so the group keeps the left margin the design
			   gives it. */
			left: 26.8cqw;
			top: 7.01%;
			width: 18.78cqw;
			min-height: 34.16%;
			z-index: 3;
			transform: rotate(9.46deg);
		}

		.pp-feature--3 {
			/* Moved with the card above, by the same 16px. */
			left: 23.6cqw;
			top: 52.04%;
			width: 18.78cqw;
			min-height: 29.19%;
			z-index: 2;
			transform: rotate(-7.51deg);
		}

		/* Sized so every card's wording fits inside the design's own height.
		   That matters beyond the type: a card whose text will not fit grows
		   past its box, and a taller card throws its rotated corners further
		   out — which is how the middle one came to be clipped against the
		   top of the panel. At these sizes all three sit at their stated
		   heights and nothing reaches the edge. */
		.pp-feature__title {
			margin-bottom: 0.3em;
			font-size: 1.45cqw;
		}

		.pp-feature__text {
			font-size: 0.8cqw;
			line-height: 1.45;
		}

		/* The design puts the paragraph at (812, 1601) against a panel at
		   (33, 1338) — 56.7cqw in, and 429px wide. The heading above it is
		   426px wide, and the two together sit centred down the panel. */
		.pp-features__copy {
			order: 0;
			position: absolute;
			left: 56.7cqw;
			top: 50%;
			transform: translateY(-50%);
			width: 31.22cqw;
			/* 16px between the heading and the paragraph. */
			gap: 1.16cqw;
		}

		/* Albert Sans SemiBold, 40 over a 60px line, no tracking.

		   Wide enough that neither line has to wrap on its own — the break
		   between them comes from the heading field, not from this measure.
		   Chasing it with a width failed twice: our Albert Sans sets the
		   phrase wider than the file the design was drawn against, so the
		   line gave out after "of" at both 426px and 522px. */
		.pp-features__title {
			width: 38cqw;
		} 

		/* IBM Plex Sans Regular, 16 over a 26px line, no tracking. */
		.pp-features__text {
			max-width: none;
			font-size: 1.16cqw;
			line-height: 1.625;
		}

		/* ---- Four cards: NHS Prescription Dispensing ----
		 *
		 * A different arrangement, not a variation on the three: four smaller
		 * cards drifting two-and-two rather than three stacked into a
		 * triangle, and each one a single phrase with no paragraph under it.
		 * Scoped to the count so the three-card panel above is untouched.
		 *
		 * All four are 258x130 with a 12px radius, 34/16/16/16 padding, white
		 * at 10% and a 1px white line at 15% along the top edge only, on the
		 * same 1374x442 panel, which the design places at (33, 1338).
		 *
		 * The design reads each card as
		 *
		 *   Enhances patient care          Top 1384     Left 108      -6.74deg
		 *   Less medication errors         Top 1369     Left 397      10.26deg
		 *   Improves patient convenience   Top 1544.81  Left 192.75    9.89deg
		 *   Customised medication needs    Top 1542.95  Left 470.1   -10.81deg
		 *
		 * and those are the cards' BOUNDING BOXES after rotation, not their
		 * corners - the fractional values give it away, as do cards 3 and 4,
		 * whose boxes differ in height by the difference in their tilt and
		 * whose centres come out on exactly the same line, 1631.0. Reading
		 * them as corners, as this block first did, put every card 15-22px
		 * out. So each box is turned back into the unrotated card CSS wants:
		 * the box's centre is the card's centre (CSS rotates about it), and
		 * the corner is that centre less 129 x 65. Against the panel:
		 *
		 *   1: box 271.5x159.4 -> centre (243.7, 1463.7) -> corner ( 81.7,  60.7)
		 *   2: box 277.0x173.9 -> centre (535.5, 1455.9) -> corner (373.5,  52.9)
		 *   3: box 276.5x172.4 -> centre (331.0, 1631.0) -> corner (169.0, 228.0)
		 *   4: box 277.8x176.1 -> centre (609.0, 1631.0) -> corner (447.0, 228.0)
		 *
		 * The boxes tile: 1 ends where 3 begins, 2 where 4 begins, 1 beside 2
		 * and 3 beside 4, each pair a pixel or two apart. Nothing overlaps, so
		 * the stacking order is immaterial.
		 *
		 * The rotations are negated. Figma measures anticlockwise and CSS
		 * measures clockwise, so the design's -6.74, 10.26, 9.89 and -10.81
		 * are +6.74, -10.26, -9.89 and +10.81 here.
		 *
		 * Tops are in cqw like the lefts, not in % of the panel's height, so
		 * every figure is a share of the same 1374.
		 */
		.pp-features__cards--4 .pp-feature,
		.pp-features__cards--5 .pp-feature {
			width: 18.7773cqw;
			min-height: 9.4614cqw;
			padding: 2.4745cqw 1.1645cqw 1.1645cqw;
			border: 0;
			border-top: 1px solid rgba(255, 255, 255, 0.15);
			border-radius: 0.8734cqw;
		}

		/* Albert Sans Medium, 20 over a 30px line: "Less medication" measures
		   150px at that size in the theme's font against ~147 in the design,
		   and the two lines of "Enhances / patient care" sit 30px apart. */
		.pp-features__cards--4 .pp-feature__title,
		.pp-features__cards--5 .pp-feature__title {
			margin-bottom: 0;
			font-size: 1.4556cqw;
			font-weight: var(--fw-medium);
			line-height: 1.5;
		}

		/* The five-card panel's phrases at the size the page sets - 20 on
		   Travel Health, the design's; 17 on Cholera Vaccination, where "Use
		   hand sanitiser, especially" runs to 271px at 20 and only fits the
		   card's 226px inner width at 17. Without a setting, 20. */
		.pp-features__cards--5 .pp-feature__title {
			font-size: var(--pp-features-card-size, 1.4556cqw);
		}

		.pp-features__cards--4 .pp-feature--1 {
			left: 5.9461cqw;
			top: 4.4178cqw;
			transform: rotate(6.74deg);
		}

		.pp-features__cards--4 .pp-feature--2 {
			left: 27.1834cqw;
			top: 3.8501cqw;
			transform: rotate(-10.26deg);
		}

		.pp-features__cards--4 .pp-feature--3 {
			left: 12.2962cqw;
			top: 16.5939cqw;
			transform: rotate(-9.89deg);
		}

		.pp-features__cards--4 .pp-feature--4 {
			left: 32.5328cqw;
			top: 16.5939cqw;
			transform: rotate(10.81deg);
		}

		/* This page's heading sits further right than Private Prescriptions'
		   copy: 813px into the panel, read off the design at 1374 (the PP
		   paragraph is at 779). The cards list precedes the copy in the
		   markup, so the count on it can reach the copy as a sibling. */
		.pp-features__cards--4 + .pp-features__copy {
			left: 59.1703cqw;
		}

		/* ---- Five cards: Travel Health ----
		 *
		 * "Why does travel health matter?": the same 258x130 glass cards, five
		 * of them, on the 1374x442 panel the design places at (33, 2320) -
		 * the panel's top read off the capture from the highest card corner
		 * (Same-day, bbox top 2327, 6px in) and the lowest (Preventative,
		 * bbox bottom 2760, 8px clear of the bottom edge). The design reads
		 * each card as a bounding box, as on the NHS panel:
		 *
		 *   In-person Consultations            Top 2343  Left 108   -6.74deg
		 *   Same-day Appointments              Top 2327  Left 388   10.26deg
		 *   Personalised Health Risk Assess.   Top 2502  Left 108    9.89deg
		 *   Travel Vaccinations                Top 2478  Left 411  -10.81deg
		 *   Preventative Treatments            Top 2573  Left 292   13.62deg
		 *
		 * turned back into the unrotated corner CSS wants (box centre less
		 * 129 x 65), against the panel:
		 *
		 *   1: box 271.5x159.4 -> corner ( 81.8,  37.7)
		 *   2: box 277.0x173.9 -> corner (364.5,  29.0)
		 *   3: box 276.5x172.4 -> corner ( 84.3, 203.2)
		 *   4: box 277.8x176.1 -> corner (387.9, 181.1)
		 *   5: box 281.3x187.1 -> corner (270.7, 281.6)
		 *
		 * The fifth sits over the third and fourth, as the design draws it,
		 * so it is stacked last. Rotations negated for CSS as before.
		 */
		.pp-features__cards--5 .pp-feature--1 {
			left: 5.9498cqw;
			top: 2.7438cqw;
			transform: rotate(6.74deg);
		}

		.pp-features__cards--5 .pp-feature--2 {
			left: 26.5284cqw;
			top: 2.107cqw;
			transform: rotate(-10.26deg);
		}

		.pp-features__cards--5 .pp-feature--3 {
			left: 6.1317cqw;
			top: 14.7889cqw;
			transform: rotate(-9.89deg);
		}

		.pp-features__cards--5 .pp-feature--4 {
			left: 28.2315cqw;
			top: 13.1769cqw;
			transform: rotate(10.81deg);
		}

		.pp-features__cards--5 .pp-feature--5 {
			left: 19.6979cqw;
			top: 20.4913cqw;
			z-index: 2;
			transform: rotate(-13.62deg);
		}

		/* This design's copy starts 755px into the panel on a 584px measure
		   - "Why does travel health matter?" is 580px on one line at 40, and
		   the paragraph's five lines turn as the design's only between 569
		   and 580 - with the heading on a 50px line, 12px to the paragraph
		   and 24px to the button; the block centres on the panel. */
		.pp-features__cards--5 + .pp-features__copy {
			left: 54.95cqw;
			width: 42.5cqw;
			gap: 0.8734cqw;
		}

		.pp-features__cards--5 + .pp-features__copy .pp-features__title {
			width: auto;
		}

		/* The paragraph's measure is the page's: 575 on Travel Health, 460 on
		   Cholera Vaccination - each the only width that turns that design's
		   lines where it does. The template sets it from the page's field;
		   without one, Travel Health's. */
		.pp-features__cards--5 + .pp-features__copy .pp-features__text {
			max-width: var(--pp-features-measure, 41.85cqw);
		}

		/* The phrases are broken by hand and hold as broken: a line the
		   editor made is never re-wrapped by the card, even where - as with
		   "Use hand sanitiser, especially" - the design lets it run to the
		   card's edge. */
		.pp-features__cards--5 .pp-feature__title {
			white-space: nowrap;
		}

		/* A card the page has placed: its own left, top and tilt from the
		   "place on the panel" field, over the slot's position above. This is
		   how Cholera Vaccination scatters the same five cards differently
		   from Travel Health without a stylesheet of its own. */
		.pp-features__cards--5 .pp-feature--placed {
			left: var(--pp-card-left);
			top: var(--pp-card-top);
			transform: rotate(var(--pp-card-rot));
		}

		/* Fixed at the design's 130, not a minimum: a three-line phrase
		   ("Wash fruits and / vegetables thoroughly / with clean water") sits
		   close to the bottom edge rather than growing the card, whose taller
		   rotated corner would otherwise rise into the card above it. */
		.pp-features__cards--5 .pp-feature {
			height: 9.4614cqw;
			overflow: visible;
			/* The design's 258 is the floor, not the size: a phrase longer
			   than the card - "Use hand sanitiser, especially" on Cholera
			   Vaccination - widens its card to hold it, padding and all,
			   rather than running past the edge. Phrases that fit change
			   nothing. */
			width: max-content;
			min-width: 18.7773cqw;
		}

		/* The pill under the copy, at the hero pill's size: 50 tall, the
		   36px disc 7px in, the 16px label 23px in - 235px wide against
		   "Book a Consultation". */
		.pp-features__cta {
			align-self: flex-start;
			justify-content: space-between;
			min-width: 11.936cqw;
			margin-top: 0.8734cqw;
			padding: 0.5095cqw 0.5095cqw 0.5095cqw 1.674cqw;
			gap: 0.7278cqw;
			font-size: 1.1645cqw;
		}

		.pp-features__cta .pill-cta__icon {
			width: 2.6201cqw;
			height: 2.6201cqw;
		}

		.pp-features__cta .pill-cta__icon svg {
			width: 1.31cqw;
			height: 1.31cqw;
		}

		/* ---- "What is a private prescription?" ---- */

		.pp-intro__frame {
			container-type: inline-size;
		}

		.pp-intro__bg {
			position: static;
			height: auto;
		}

		/* Read off the NHS Dispensing design against the panel at (33, 1789):
		   the text group is 692x387 at (120, 1908), so 87 in and 119 down,
		   with 624 - 119 - 387 = 118 below - centred. The heading box is
		   692x62; the paragraphs are 576 wide, two lines to 52px, so a 26px
		   line; and 387 = 62 + 20 + 52 + 78 + 78 + 52 + three gaps, which
		   makes the gap 15 and the space under the heading 20. */
		.pp-intro__inner {
			position: absolute;
			inset: 0;
			flex-direction: row;
			align-items: center;
			gap: 3cqw;
			padding: 0 7.1cqw 0 6.3319cqw;
		}

		.pp-intro__copy {
			flex: 0 1 auto;
			width: 50.3639cqw;
			gap: 1.0917cqw;
		}

		/* Albert Sans SemiBold 40 on a 62px box: "What is Prescription
		   Dispensing?" measures 617.6px at that size in the theme's font,
		   against ~614 in the design. 5px under it plus the 15px gap is the
		   design's 20. */
		.pp-intro__title {
			margin-bottom: 0.3639cqw;
		}

		/* IBM Plex Sans 16 over 26, on the design's 576px measure. That
		   measure reproduces the design's line turns in three of the four
		   paragraphs; in the first, "for" sits at the end of line one where
		   the design starts line two with it - the same 565.8px string that
		   must fit in paragraph two, so no width can separate them. */
		.pp-intro__text {
			max-width: 41.9214cqw;
			font-size: 1.1645cqw;
			line-height: 1.625;
		}

		.pp-intro__media {
			flex: 1 1 auto;
			margin-left: auto;
		}

		.pp-intro__media img {
			max-height: 70cqh;
			border-radius: 1.2cqw;
		}
	}
}

/* The questions sit on the ordinary content measure, so they need a plain
   breakpoint rather than a container query — but the same 992px one the
   panels use, because below it the heading column is too narrow to set
   "Common questions about private prescriptions" in fewer than four lines. */
@media (min-width: 992px) {
	/* On the 1200px measure the design's copy column is 480 wide and the
	   questions start 577 in, so the gutter is 97 - both as shares of the
	   container so the proportion holds from 992px up. 480 is also what
	   turns "Frequently asked questions" after "asked": the phrase is 510. */
	.pp-faq__inner {
		grid-template-columns: 40% minmax(0, 1fr);
		column-gap: 8.0833%;
		align-items: start;
	}

	.pp-faq__q {
		font-size: var(--fs-body);
	}

	.pp-faq__a {
		font-size: var(--fs-sm);
	}
}

/* -------------------------------------------------------------------------
   Private Prescriptions page
   The page's own stylesheet block above is mobile-first, so what
   is left here is the column counts and the handful of places where the
   design's proportions stop working before the desktop composition takes
   over at 992px.
   ---------------------------------------------------------------------- */

/* Three steps to two, then one. */
@media (max-width: 991.98px) {
	.pp-steps__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 639.98px) {
	.pp-steps__list {
		grid-template-columns: 1fr;
	}

	/* The 32px inside each card is what holds the three apart across a
	   1104px row. Stacked in one column it only pushes the copy in from
	   both edges, on top of the container's own padding, so it comes off
	   and the separation moves to the gap between them. */
	.pp-steps__list {
		gap: var(--space-lg);
	}

	.pp-step {
		padding: 0;
	}
}

/* Below the desktop composition the glass cards are ordinary cards on the
   panel: no rotation, no overlap, and enough contrast to stay readable
   where the gradient runs pale. */
@media (max-width: 991.98px) {
	.pp-features__cards {
		grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	}

	.pp-feature {
		background: rgba(255, 255, 255, 0.2);
	}
}

/* The hero photograph keeps a consistent crop while it is in flow, rather
   than letting an arbitrary upload set the panel's height. */
@media (max-width: 991.98px) {
	.pp-hero__media img {
		aspect-ratio: 528 / 396;
	}

	/* Stacked, the air above the photograph was the inner's flex gap and the
	   air below it was the panel's own bottom padding — two unrelated
	   declarations, so the picture could never sit evenly. One value drives
	   both now, which is what makes them equal rather than a number picked to
	   look equal. Above 992px this does not arise: the photograph is the
	   tallest thing in the row, so the 5.24cqw padding is the space top and
	   bottom by construction. */
	.pp-hero__inner {
		gap: clamp(1.75rem, 1.1rem + 3.2vw, 3rem);
	}

	.pp-hero__media {
		width: 100%;
		margin-inline: auto;
	}

	.pp-intro__media img {
		aspect-ratio: 16 / 10;
	}
}

/* Small handsets: the marker needs a proper touch target and the questions
   need the full width to themselves. */
@media (max-width: 575.98px) {
	.pp-faq__q {
		gap: var(--space-sm);
	}

	.pp-faq__mark {
		width: 1.25rem;
		height: 1.25rem;
	}

	.pp-faq__a {
		padding-right: 0;
	}

	.pp-hero__inner,
	.pp-features__inner,
	.pp-intro__inner {
		padding-inline: var(--space-md);
	}
}