/* =========================================================================
   Batley Pharmacy - the new service design's sections

   Loaded by enqueue.php on the standard service page
   (template-service-page.php), so nothing here reaches the rest of the
   site. The page-level rules key off the rx-build body class, which
   inc/service-standard.php gives a page on the standard set. (Written for
   the Template-services-prescriptions template, retired on 2026-10-22.)
   The design (2026-10-21) is drawn on a 1280px content width at 1440;
   every figure below is the design's, in px, with the section it came
   from. The NHS Services designs of 2026-10-22 added the eligibility
   panel, the clinic band, the band's cards, the icon cards' rows and
   buttons, and the rest of the "NHS Services additions" block below.

   Two conventions, as in home2.css:

   - Values come from the theme's tokens in base.css (--color-*, --fs-*,
     --space-*, --radius-*) where the design matches them, and from the
     design's own figures where it does not - those are stated in px.
   - Selectors stay inside this template's own .rx- namespace. That is what
     lets this file load last without reordering anything shared.

   Headings: every h2 is the site's (base.css: Manrope 600, 48 on a 100%
   line), with its blue words in --color-heading-accent. Body copy is the
   site's primary face at 18 in the design's two greys, #1c2023 and
   #5f656a.
   ========================================================================= */

/* -------------------------------------------------------------------------
   The page's own ground, width and rhythm

   The ground is the design's #fcfdff rather than pure white. The build is
   the home page's: 1280 of content with 80 either side at 1440, set on the
   body so the header's logo, the panels and the footer share the same
   edges. Each section carries 40 of padding top and bottom - though
   sections.css takes the top padding off a section that follows another,
   so the 80 between panels is the first section's 40 of bottom padding
   and a 40 gap between the frames - except where the design opens up:
   120 above the blue banner and about 150 above the questions' heading.
   ---------------------------------------------------------------------- */

.rx-build {
	--container-max: 1280px;
	--container-wide: 1280px;
	/* Each section's own top and bottom padding. */
	--section-gap: 2.5rem;
	/* The gap between one section's frame and the next. */
	--rx-section-space: 2.5rem;
	/* The design's inks. */
	--rx-ink: #1c2023;
	--rx-ink-soft: #5f656a;
	--rx-navy: #143559;
	--rx-blue: #0a61b1;
	--rx-blue-deep: #0052a1;
	--rx-line: #b5d5fb;
	--rx-pale: #eaf3fe;
	--rx-radius: 24px;
	background: #fcfdff;
}

.rx-build .section + .section {
	margin-block-start: var(--rx-section-space);
}

/* The banner stands 120 below the features panel; the questions' heading
   about 150 below the banner. Written against the join rule above, which
   they outweigh by coming later. */
.rx-build .section + .rx-help {
	margin-block-start: 5rem;
}

.rx-build .section + .rx-faq {
	margin-block-start: 7rem;
}

/* The footer stands 80 below the last panel like any other join: the
   section's own 40 of bottom padding and the frame gap. */
.rx-build .site-footer {
	margin-block-start: var(--rx-section-space);
}

/* -------------------------------------------------------------------------
   Shared: the pill buttons

   40 tall, 18 either side of a 14 semibold label with the arrow 8 after
   it, a full pill. Solid: the brand blue with white on it (the hero).
   Surface: the design system's light/sm/primary/surface, as the home
   page's hero draws it - near-white on a #9dc3f1 hairline, the label in
   the deep blue - filling with the brand blue on hover (the banner).
   ---------------------------------------------------------------------- */

.rx-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	height: 2.5rem;
	padding: 0 1.125rem;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font-size: 0.875rem;
	font-weight: var(--fw-semibold);
	line-height: 1;
	text-decoration: none;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.rx-btn__icon {
	display: inline-flex;
}

.rx-btn__icon svg {
	width: 0.875rem;
	height: 0.875rem;
}

/* The calendar before a "Book Now" label, a size up from the arrow. */
.rx-btn__icon--calendar svg {
	width: 1rem;
	height: 1rem;
}

.rx-btn--solid {
	border-color: var(--rx-blue);
	background: var(--rx-blue);
	color: #ffffff;
}

.rx-btn--solid:hover {
	border-color: var(--rx-blue-deep);
	background: var(--rx-blue-deep);
	color: #ffffff;
	transform: translateY(-2px);
}

.rx-btn--surface {
	border-color: #9dc3f1;
	background: #f5f9fe;
	color: var(--rx-blue-deep);
}

.rx-btn--surface:hover {
	border-color: var(--rx-blue);
	background: var(--rx-blue);
	color: #ffffff;
	transform: translateY(-2px);
}

/* Outline: white on the #9dc3f1 hairline, the label in the brand blue
   (the hero's second button, "FAQ's"). */
.rx-btn--outline {
	border-color: #9dc3f1;
	background: #ffffff;
	color: var(--rx-blue);
}

.rx-btn--outline:hover {
	border-color: var(--rx-blue);
	background: var(--rx-blue);
	color: #ffffff;
	transform: translateY(-2px);
}

/* White: on the blue card of the eligibility panel. */
.rx-btn--white {
	border-color: #ffffff;
	background: #ffffff;
	color: var(--rx-blue);
}

.rx-btn--white:hover {
	border-color: var(--rx-pale);
	background: var(--rx-pale);
	color: var(--rx-blue-deep);
	transform: translateY(-2px);
}

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

   A 1280 by 396 panel with 24 corners, the copy 40 in from its left and
   the 530 by 334 photograph 25 from its right, 30 above and below - the
   photograph is what gives the panel its height. The ground is the flat
   pale blue, #eaf3fe. Over its right-hand part lies the design's blue
   (2026-10-22): the export's polygon has a gradient fill that is clear
   along its slanted left edge, so no edge shows - the pale blue simply
   deepens from about the middle towards the right, a little later at
   the foot than at the top, to #bdd5ee, with a glow of the brand blue
   in the bottom-right corner down to #7babd9. Fitted to the export's
   colours (within two levels on average); the clipped polygon drawn
   before this drew a visible line where the design has none.

   The panel's foot is stepped: under the copy it ends 38 higher than under
   the photograph, the two levels joined by a 120-wide S-curve that ends
   about 60 before the photograph's column. That is a strip of the page's
   ground laid over the panel's bottom-left (.rx-hero__notch) with its
   top-right corner rounded into the S's upper bend, and two small boxes
   - the panel's corner above the strip and the S's lower bend - whose
   radial gradient is the ground outside the curve and clear inside it.
   The copy sits on the shorter part.
   ---------------------------------------------------------------------- */

.rx-hero__panel {
	position: relative;
	display: grid;
	/* The photograph's column gives way before the copy does. */
	grid-template-columns: minmax(0, 1fr) min(530px, 46%);
	gap: 40px;
	align-items: center;
	padding: 30px 25px 30px 40px;
	border-radius: var(--rx-radius);
	background: #eaf3fe;
	/* The polygon paints beneath the copy and the photograph. */
	isolation: isolate;
}

/* The blue: a gradient at 96deg - a touch off horizontal, so the deepening
   begins later at the foot - from the ground at 44% through the pale
   blues to #bdd5ee, lighter again in the top-right corner; over it the
   glow of the brand blue in the bottom-right corner, 460 by 410 on the
   1280 panel, holding near its full depth for a third of that and then
   fading. No clip: the design's edge is invisible, and so is this one. */
.rx-hero__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/* The panel's corners: the layer would otherwise square them off. */
	border-radius: inherit;
	background-image:
		radial-gradient(36% 104% at 100% 100%, rgba(10, 97, 177, 0.37) 0%, rgba(10, 97, 177, 0.33) 35%, rgba(10, 97, 177, 0.2) 62%, rgba(10, 97, 177, 0) 100%),
		linear-gradient(96deg, #eaf3fe 44%, #e7f1fd 49%, #e3eefb 53%, #deebfa 58%, #d4e5f7 62%, #c3daf0 70%, #bbd5ee 77%, #bdd5ee 86%, #c9def2 100%);
	pointer-events: none;
}

.rx-hero__panel--no-media {
	grid-template-columns: minmax(0, 1fr);
	padding-block: 60px;
}

.rx-hero__copy {
	max-width: 560px;
	/* On the part of the panel above the step: from the top, as the
	   design has it, rather than centred on the photograph - and never
	   into the step: a copy taller than the photograph (a three-line
	   heading over a paragraph) keeps the step's 38 clear beneath it. */
	align-self: start;
	padding-bottom: 38px;
}

/* 56 on a 60 line in the display face, the navy of the design; the line
   breaks are the editor's. */
.rx-hero__title {
	margin: 0;
	color: var(--rx-navy);
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 1.4rem + 2.8vw, 3.5rem);
	font-weight: var(--fw-semibold);
	line-height: 1.07;
	letter-spacing: 0.005em;
	white-space: pre-line;
}

.rx-hero__text {
	max-width: 500px;
	margin: 20px 0 0;
	color: var(--rx-ink);
	font-size: 1.125rem;
	line-height: 1.55;
}

/* The buttons in a row, 12 apart, 36 under the paragraph. */
.rx-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 36px;
}

/* The photograph: 334 tall, or the panel's height where the copy is
   taller (the hypertension design's 382), cropped to fit. */
.rx-hero__media {
	position: relative;
	align-self: stretch;
	min-height: 334px;
}

.rx-hero__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 20px;
}

/* The step: the ground over the panel's bottom-left, from its left edge
   to 118 short of the photograph's column - the S's lower bend takes 60
   of those and the design leaves 58 more - 38 tall, its top-right corner
   rounded 60 by 19 into the S's upper bend. */
.rx-hero__notch {
	position: absolute;
	right: calc(min(530px, 46%) + 65px + 118px);
	bottom: 0;
	left: 0;
	height: 38px;
	border-top-right-radius: 60px 19px;
	background: #fcfdff;
	pointer-events: none;
}

/* The panel's corner above the step: 24 round, the ground outside it. */
.rx-hero__notch::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 0;
	width: 24px;
	height: 24px;
	background: radial-gradient(24px 24px at 100% 0, transparent 23.5px, #fcfdff 24px);
}

/* The S's lower bend: the panel's corner at the foot of the step, 60 by
   19, the ground outside it. */
.rx-hero__notch::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 100%;
	width: 60px;
	height: 19px;
	background: radial-gradient(60px 19px at 100% 0, transparent 99%, #fcfdff 100%);
}

.rx-hero__panel--no-media .rx-hero__notch {
	display: none;
}

/* -------------------------------------------------------------------------
   2. What is ...?

   The 530-wide picture with 24 corners on the left, at its own
   proportions (384 tall on Private Prescriptions, 576 on NHS
   Prescription Dispensing), the copy 62 to its right and level with it;
   the heading's blue words run on from it.
   ---------------------------------------------------------------------- */

.rx-what__inner {
	display: grid;
	grid-template-columns: 530px minmax(0, 1fr);
	gap: 62px;
	align-items: center;
}

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

.rx-what__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--rx-radius);
}

.rx-what__title {
	margin: 0 0 24px;
	color: var(--rx-ink);
}

.rx-what__title-accent {
	color: var(--color-heading-accent);
}

.rx-what__text {
	margin: 0;
	color: var(--rx-ink-soft);
	font-size: 1.125rem;
	line-height: 1.5;
}

.rx-what__text + .rx-what__text {
	margin-top: 14px;
}

/* The key points (NHS Pharmacy Contraception, 2026-10-22): a 20 semibold
   heading 22 under the copy, then the points 9 apart, each a 40 disc in
   the pale blue with its icon in the brand blue and the text 17 after. */
.rx-what__points-title {
	margin: 22px 0 14px;
	color: var(--rx-ink);
	font-size: 1.25rem;
	font-weight: var(--fw-semibold);
	line-height: 1.3;
}

.rx-what__copy .rx-what__points {
	display: grid;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rx-what__point {
	display: flex;
	align-items: center;
	gap: 17px;
	color: var(--rx-ink);
	font-size: 1rem;
	line-height: 1.4;
}

.rx-what__point-icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #dbebff;
	color: var(--rx-blue);
}

.rx-what__point-icon svg {
	width: 18px;
	height: 18px;
}

/* -------------------------------------------------------------------------
   3. How can I get a private prescription?

   The pale #eaf3fe panel, 24 corners: the heading and its line of copy
   centred over a 760 measure, then the three steps 96 below, 72 in from
   the panel's sides and 75 apart. A step: a 56 disc in its tint with the
   icon in the tint's ink, the number 19 to its right at 40 in the same
   ink, the title 24 under the disc, the text 18 under that.
   ---------------------------------------------------------------------- */

.rx-steps__panel {
	padding: 40px 72px 72px;
	border-radius: var(--rx-radius);
	background: var(--rx-pale);
}

.rx-steps__header {
	max-width: 760px;
	margin-inline: auto;
	text-align: center;
}

.rx-steps__title {
	margin: 0;
	color: var(--rx-ink);
}

.rx-steps__title-accent {
	color: var(--color-heading-accent);
}

.rx-steps__text {
	margin: 24px 0 0;
	color: var(--rx-ink-soft);
	font-size: 1.125rem;
	line-height: 1.55;
}

/* Named with its panel: base.css resets every list that carries a class,
   and this one keeps its 96 above. */
.rx-steps__panel .rx-steps__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 75px;
	margin: 96px 0 0;
	padding: 0;
	list-style: none;
}

/* The tints, by position: blue, peach, green - the disc's ground, the
   icon's ink and the number's. */
.rx-step--1 {
	--rx-step-tint: #cae2fe;
	--rx-step-ink: #0a61b1;
	--rx-step-number: #1668b8;
}

.rx-step--2 {
	--rx-step-tint: #ffcabb;
	--rx-step-ink: #f57557;
	--rx-step-number: #c84e31;
}

.rx-step--3 {
	--rx-step-tint: #c5ebc1;
	--rx-step-ink: #0f7f0f;
	--rx-step-number: #148113;
}

.rx-step__head {
	display: flex;
	align-items: center;
	gap: 19px;
}

.rx-step__icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--rx-step-tint);
	color: var(--rx-step-ink);
}

.rx-step__icon svg {
	width: 22px;
	height: 22px;
}

.rx-step__icon img {
	display: block;
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.rx-step__number {
	color: var(--rx-step-number);
	font-family: var(--font-display);
	font-size: 2.5rem;
	font-weight: var(--fw-semibold);
	line-height: 1;
	letter-spacing: 0.005em;
}

.rx-step__title {
	margin: 24px 0 0;
	color: var(--rx-ink);
	font-size: 1.125rem;
	font-weight: var(--fw-semibold);
	line-height: 1.3;
}

.rx-step__text {
	margin: 18px 0 0;
	color: var(--rx-ink-soft);
	font-size: 1rem;
	line-height: 1.5;
}

/* -------------------------------------------------------------------------
   5. Key features

   The gradient panel the design shares with the home page's travel card
   (#F2FBFF over most of it, deepening to #79ABE7 past the bottom-left
   corner), 40 of padding all round and 24 corners. The copy on the left
   is level with the cards; the cards are two 318 columns 16 apart at the
   right, the second column stepped 296 down. A card: 22 of padding, 14
   corners, a 56 square with the icon, the title 26 under it at 20
   semibold, the text 20 under that at 16. The first card is the solid
   blue with white on it; the others white on a #b5d5fb hairline, the
   navy on them.
   ---------------------------------------------------------------------- */

.rx-features__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 652px;
	gap: 40px;
	align-items: center;
	padding: 40px;
	border-radius: var(--rx-radius);
	background: linear-gradient(198.7deg, #F2FBFF 52.84%, #79ABE7 112.11%);
}

.rx-features__copy {
	max-width: 480px;
}

.rx-features__title {
	margin: 0;
	color: var(--rx-ink);
}

.rx-features__title-accent {
	display: block;
	color: var(--color-heading-accent);
}

.rx-features__text {
	margin: 20px 0 0;
	color: var(--rx-ink-soft);
	font-size: 1.125rem;
	line-height: 1.55;
}

.rx-features__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	align-items: start;
}

.rx-features__col {
	display: grid;
	gap: 16px;
}

.rx-features__col:nth-child(2) {
	padding-top: 296px;
}

.rx-feature {
	padding: 22px;
	border: 1px solid var(--rx-line);
	border-radius: 14px;
	background: #fcfdff;
	color: var(--rx-navy);
}

.rx-feature--solid {
	border-color: var(--rx-blue);
	background: var(--rx-blue);
	color: #ffffff;
}

.rx-feature__icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 10px;
	background: #dbebff;
	color: var(--rx-navy);
}

.rx-feature--solid .rx-feature__icon {
	background: #fcfdff;
	color: var(--rx-blue);
}

.rx-feature__icon svg {
	width: 24px;
	height: 24px;
}

.rx-feature__icon img {
	display: block;
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.rx-feature__title {
	margin: 26px 0 0;
	color: inherit;
	font-size: 1.25rem;
	font-weight: var(--fw-semibold);
	line-height: 1.2;
}

.rx-feature__text {
	margin: 20px 0 0;
	color: inherit;
	font-size: 1rem;
	line-height: 1.5;
}

/* -------------------------------------------------------------------------
   4. How can you access ...? (the band)

   NHS Prescription Dispensing (2026-10-22): the pale #eaf3fe runs the
   full width of the page, 40 below the picture above and 40 above the
   picture below, with 40 of padding top and bottom inside. The heading
   sits on the left, its second part in the brand blue on its own lines;
   the copy on the right is a 633 column: a paragraph, the bulleted
   list and a closing paragraph, all at 16 on a 28 line in the soft
   grey, the bullets 28 in with the text hanging from them.
   ---------------------------------------------------------------------- */

/* The band is the section: it carries its own 40 of padding (sections.css
   takes a following section's top padding off) and sits 40, not 80,
   below the section before - that section's own bottom padding. */
.rx-build .section + .rx-access {
	margin-block-start: 0;
	padding-block: 2.5rem;
}

.rx-access {
	background: var(--rx-pale);
}

.rx-access__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 633px;
	gap: 60px;
	align-items: center;
}

.rx-access__title {
	max-width: 600px;
	margin: 0;
	color: var(--rx-ink);
}

.rx-access__title-accent {
	display: block;
	color: var(--color-heading-accent);
}

/* Or running on from the heading, where the page says so. */
.rx-access__title-accent--inline {
	display: inline;
}

.rx-access__copy {
	color: var(--rx-ink-soft);
	font-size: 1rem;
	line-height: 1.75;
}

.rx-access__text {
	margin: 0;
}

/* Named with its block: base.css resets every list that carries a class. */
.rx-access__inner .rx-access__list {
	margin: 0;
	padding: 0 0 0 28px;
	list-style: disc;
}

.rx-access__list li::marker {
	color: #9ca3ab;
}

.rx-access__copy > * + * {
	margin-top: 10px;
}

/* -------------------------------------------------------------------------
   6. How can ... be helpful? (the pills)

   NHS Prescription Dispensing (2026-10-22): the 530-wide picture at its
   own proportions with 24 corners on the left, the copy 63 to its right
   and level with it. The heading's blue words run on from it; 44 under
   it a column of 396 by 46 pills 8 apart - the pale blue, a full pill,
   the tick in the brand blue 14 in and the 15 medium label 18 after.
   ---------------------------------------------------------------------- */

.rx-benefits__inner {
	display: grid;
	grid-template-columns: 530px minmax(0, 1fr);
	gap: 63px;
	align-items: center;
}

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

.rx-benefits__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--rx-radius);
}

.rx-benefits__title {
	max-width: 560px;
	margin: 0;
	color: var(--rx-ink);
}

.rx-benefits__title-accent {
	color: var(--color-heading-accent);
}

/* The line under the heading (the hypertension and COVID-19 designs). */
.rx-benefits__text {
	margin: 20px 0 0;
	color: var(--rx-ink-soft);
	font-size: 1.125rem;
	line-height: 1.55;
}

.rx-benefits__inner .rx-benefits__list {
	display: grid;
	justify-items: start;
	gap: 8px;
	margin: 44px 0 0;
	padding: 0;
	list-style: none;
}

/* A pill is 396 wide, or as wide as its text needs up to the column. */
.rx-benefit {
	display: flex;
	align-items: center;
	gap: 18px;
	width: fit-content;
	min-width: min(396px, 100%);
	max-width: 100%;
	min-height: 46px;
	padding: 6px 20px 6px 14px;
	border-radius: 23px;
	background: var(--rx-pale);
	color: var(--rx-ink);
	font-size: 0.9375rem;
	font-weight: var(--fw-medium);
	line-height: 1.3;
}

/* A long text: a rounded box with the tick on its first line (Healthy
   Start, emergency contraception). */
.rx-benefit--long {
	align-items: flex-start;
	padding: 12px 20px 12px 14px;
	border-radius: 12px;
	font-weight: var(--fw-regular);
	line-height: 1.45;
}

.rx-benefit__icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--rx-blue);
}

.rx-benefit--long .rx-benefit__icon {
	margin-top: 1px;
}

.rx-benefit__icon svg,
.rx-benefit__icon img {
	display: block;
	width: 20px;
	height: 20px;
	object-fit: contain;
}

/* -------------------------------------------------------------------------
   Symptoms: icon cards on a pale panel (NHS Head Lice Treatment, 2026-10-22)

   The panel on the gradient the key features share (white over most of
   it, the blue past the bottom-left corner), a #b5d5fb hairline, 24
   corners and 40 of padding; the heading centred with its line 16 under
   it; then rows of white cards 16 apart, 16 corners, 24 of padding, each
   a 56 disc in its tint with the icon in the tint's ink and a 20
   semibold label under it. The rows are the editor's and each fills the
   width, the cards sharing it (the NHS designs: three then four, six
   then three). A card with a link is centred, with a bigger disc and the
   surface pill across its foot, four to a row at most (Pharmacy First).
   The tints follow the card's position.
   ---------------------------------------------------------------------- */

.rx-symptoms__panel {
	padding: 40px;
	border: 1px solid var(--rx-line);
	border-radius: var(--rx-radius);
	background: linear-gradient(198.7deg, #F2FBFF 52.84%, #79ABE7 112.11%);
}

.rx-symptoms__text {
	max-width: 720px;
	margin: 16px auto 0;
	color: var(--rx-ink-soft);
	font-size: 1rem;
	line-height: 1.5;
	text-align: center;
}

.rx-symptoms__rows {
	display: grid;
	gap: 16px;
	margin-top: 40px;
}

/* Named with its panel: base.css resets every list that carries a class. */
.rx-symptoms__panel .rx-symptoms__row {
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rx-symptoms__row--cta {
	justify-content: center;
}

/* A row of six or more: the cards close up so a label stays on one line
   (the flu design's seven symptoms). */
.rx-symptoms__row--dense .rx-symptom {
	padding: 20px 16px;
}

.rx-symptoms__row--dense .rx-symptom__label {
	font-size: 1.125rem;
}

.rx-symptoms__title {
	margin: 0;
	color: var(--rx-ink);
	text-align: center;
}

.rx-symptoms__title-accent {
	color: var(--color-heading-accent);
}

/* A card: centred, its width its label's share of the row (the NMS
   design's wider "Chronic obstructive pulmonary disease"); or, on a
   left-aligned section, at the left and all of a width. */
.rx-symptom {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	min-width: 0;
	padding: 24px;
	border-radius: 16px;
	background: #fcfdff;
	text-align: center;
}

.rx-symptoms--left .rx-symptom {
	flex: 1 1 0;
	align-items: flex-start;
	text-align: left;
}

.rx-symptom--cta {
	flex: 0 1 calc(25% - 12px);
	align-items: center;
	gap: 24px;
	padding: 16px 16px 16px;
	text-align: center;
}

.rx-symptom--cta .rx-symptom__icon {
	width: 80px;
	height: 80px;
	margin-top: 8px;
}

.rx-symptom--cta .rx-symptom__icon svg {
	width: 30px;
	height: 30px;
}

.rx-symptom__cta {
	width: 100%;
	justify-content: center;
}

.rx-symptom--1 {
	--rx-symptom-tint: #ffe9e2;
	--rx-symptom-ink: #f57557;
}

.rx-symptom--2 {
	--rx-symptom-tint: #dbebff;
	--rx-symptom-ink: #0a61b1;
}

.rx-symptom--3 {
	--rx-symptom-tint: #e5f3ea;
	--rx-symptom-ink: #1e7a3f;
}

.rx-symptom--4 {
	--rx-symptom-tint: #fde2ef;
	--rx-symptom-ink: #c2185b;
}

.rx-symptom--5 {
	--rx-symptom-tint: #fff4d6;
	--rx-symptom-ink: #b8860b;
}

.rx-symptom--6 {
	--rx-symptom-tint: #ece4fb;
	--rx-symptom-ink: #6f42c1;
}

.rx-symptom__icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--rx-symptom-tint);
	color: var(--rx-symptom-ink);
}

.rx-symptom__icon svg {
	width: 22px;
	height: 22px;
}

/* A picture of the page's own is the whole disc - the designs' icons are
   cut from the exports with their tinted disc - so it covers the theme's. */
.rx-symptom__icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.rx-symptom__label {
	color: var(--rx-ink);
	font-size: 1.25rem;
	font-weight: var(--fw-semibold);
	line-height: 1.25;
	/* A long word (Hypercholesterolaemia) breaks rather than overflows. */
	overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------
   How to ...: outlined cards (NHS Head Lice Treatment, 2026-10-22)

   The heading centred, 40 over a row of cards 16 apart: white on a
   #b5d5fb hairline with 16 corners and 24 of padding, a 36 pale disc
   with the tick, the title 20 semibold in the navy 20 under it, the
   text 16 on a 24 line in the soft grey 12 under that.
   ---------------------------------------------------------------------- */

.rx-howto__title {
	margin: 0 0 40px;
	color: var(--rx-ink);
	text-align: center;
}

.rx-howto__title-accent {
	color: var(--color-heading-accent);
}

.rx-howto__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
}

.rx-howto__card {
	padding: 24px;
	border: 1px solid var(--rx-line);
	border-radius: 16px;
	background: #fcfdff;
}

.rx-howto__icon {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--rx-pale);
	color: var(--rx-blue);
}

.rx-howto__icon svg {
	width: 18px;
	height: 18px;
}

.rx-howto__icon img {
	display: block;
	width: 20px;
	height: 20px;
	object-fit: contain;
}

.rx-howto__card-title {
	margin: 20px 0 0;
	color: var(--rx-navy);
	font-size: 1.25rem;
	font-weight: var(--fw-semibold);
	line-height: 1.25;
}

.rx-howto__card-text {
	margin: 12px 0 0;
	color: var(--rx-ink-soft);
	font-size: 1rem;
	line-height: 1.5;
}

/* -------------------------------------------------------------------------
   7. How does Batley Pharmacy help?

   The 324-tall banner: the brand blue, a touch lighter at either edge,
   with thin wave lines drawn faintly over it; 24 corners; the heading 50
   below the top on a 640 measure, the copy 24 under it on 780, the
   surface pill 34 under that and 40 above the foot. Everything centred,
   in white.
   ---------------------------------------------------------------------- */

.rx-help__panel {
	position: relative;
	overflow: hidden;
	padding: 50px 40px 40px;
	border-radius: var(--rx-radius);
	background: linear-gradient(90deg, #1668b8 0%, #0a61b1 48%, #2b76c0 100%);
	color: #ffffff;
	text-align: center;
}

/* The wave lines: five arcs sweeping across the banner, white at a tenth. */
.rx-help__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 324' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.12' stroke-width='1.2'%3E%3Cpath d='M-20 40 C 200 -10, 380 120, 640 110 S 1060 10, 1300 60'/%3E%3Cpath d='M-20 70 C 200 20, 380 150, 640 140 S 1060 40, 1300 90'/%3E%3Cpath d='M-20 230 C 220 160, 420 300, 680 280 S 1080 190, 1300 250'/%3E%3Cpath d='M-20 262 C 220 192, 420 332, 680 312 S 1080 222, 1300 282'/%3E%3Cpath d='M-20 300 C 220 230, 420 370, 680 350 S 1080 260, 1300 320'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 100% 100%;
	pointer-events: none;
}

.rx-help__panel > * {
	position: relative;
	z-index: 1;
}

.rx-help__title {
	max-width: 700px;
	margin: 0 auto;
	color: #ffffff;
}

.rx-help__text {
	max-width: 780px;
	margin: 24px auto 0;
	font-size: 1.125rem;
	line-height: 1.55;
}

/* A link in the banner's copy stays white on the blue, underlined (the
   Healthy Start design's "NHS Healthy Start"). */
.rx-help__text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.rx-help__text a:hover {
	color: #dbebff;
}

.rx-help__cta {
	margin-top: 34px;
}

/* -------------------------------------------------------------------------
   8. Frequently asked questions

   The heading centred, 76 above the panel. The panel: #eaf3fe on a
   #b5d5fb hairline with 24 corners, 40 of padding top and bottom and
   none at the sides, so the hairlines between questions run its full
   width. A question: 16 semibold on a 70 row (24 above and below), 45
   in from either side, the chevron in the brand blue at the right; its
   answer at 16 in the soft grey, 27 above the next hairline.
   ---------------------------------------------------------------------- */

.rx-faq__title {
	margin: 0 0 76px;
	color: var(--rx-ink);
	text-align: center;
}

.rx-faq__title-accent {
	color: var(--color-heading-accent);
}

.rx-faq__panel {
	padding: 40px 0;
	border: 1px solid var(--rx-line);
	border-radius: var(--rx-radius);
	background: var(--rx-pale);
}

.rx-faq__item + .rx-faq__item {
	border-top: 1px solid var(--rx-line);
}

.rx-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 45px;
	color: var(--rx-ink);
	font-size: 1rem;
	font-weight: var(--fw-semibold);
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}

.rx-faq__q::-webkit-details-marker {
	display: none;
}

.rx-faq__q:hover .rx-faq__q-text {
	color: var(--rx-blue);
}

.rx-faq__mark {
	display: inline-flex;
	flex: 0 0 auto;
	color: #2673ba;
	transition: transform var(--dur) var(--ease);
}

.rx-faq__mark svg {
	width: 20px;
	height: 20px;
}

.rx-faq__item[open] .rx-faq__mark {
	transform: rotate(180deg);
}

.rx-faq__a {
	padding: 0 45px 27px;
	color: var(--rx-ink-soft);
	font-size: 1rem;
	line-height: 1.5;
}

.rx-faq__a > :first-child {
	margin-top: 0;
}

.rx-faq__a > :last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   Fading up (the reveal in components.css): the steps and the cards come
   up one after another.
   ---------------------------------------------------------------------- */

.rx-step--2 {
	--reveal-delay: 0.1s;
}

.rx-step--3 {
	--reveal-delay: 0.2s;
}

.rx-features__col:nth-child(1) .rx-feature:nth-child(2) {
	--reveal-delay: 0.1s;
}

.rx-features__col:nth-child(2) .rx-feature {
	--reveal-delay: 0.2s;
}

.rx-what__copy,
.rx-access__copy,
.rx-benefits__copy,
.rx-faq__panel {
	--reveal-delay: 0.15s;
}

/* -------------------------------------------------------------------------
   NHS Services additions (2026-10-22)

   What the eleven NHS designs add to the sections above: the picture-
   beside-copy block's bullet list, the band's numbered list and cards,
   the outlined cards' counts, bullets, button and band, the steps' two-up
   layout, the eligibility panel and the clinic band.
   ---------------------------------------------------------------------- */

/* --- Picture beside copy: a bulleted list after the paragraphs, 16 on a
   28 line in the soft grey, the bullets 28 in; the closing paragraph
   after it (Pharmacy First). --- */
.rx-what__copy .rx-what__list {
	margin: 14px 0 0;
	padding: 0 0 0 28px;
	color: var(--rx-ink-soft);
	font-size: 1rem;
	line-height: 1.75;
	list-style: disc;
}

.rx-what__list li::marker {
	color: #9ca3ab;
}

.rx-what__list + .rx-what__text {
	margin-top: 14px;
}

/* --- The band: a numbered list (Pharmacy First's two ways). --- */
.rx-access__inner .rx-access__list--numbers {
	list-style: decimal;
}

.rx-access__list--numbers li::marker {
	color: var(--rx-ink-soft);
}

/* --- The band with cards: the heading and its copy on the left, the
   cards 48 to their right in a 712 column (hypertension's "How does the
   service work?", health advice's "Mental wellbeing"); the blue cards in
   a 600 column 80 to the right (Healthy Start's "Supply and dosage"). --- */
.rx-access__inner--cards {
	grid-template-columns: minmax(0, 1fr) 712px;
	gap: 48px;
}

.rx-access__inner--solid {
	grid-template-columns: minmax(0, 1fr) 600px;
	gap: 80px;
}

.rx-access__lead .rx-access__title {
	max-width: none;
}

/* Under the heading the copy is the design's 18 on a 28 line. */
.rx-access__lead .rx-access__copy {
	margin-top: 20px;
	font-size: 1.125rem;
	line-height: 1.55;
}

.rx-access__lead .rx-access__list {
	padding-left: 26px;
}

/* The small heading over the cards: 22 semibold, 20 above them. */
.rx-access__cards-title {
	margin: 0 0 20px;
	color: var(--rx-ink);
	font-size: 1.375rem;
	font-weight: var(--fw-semibold);
	line-height: 1.3;
}

.rx-access__cards {
	display: grid;
	gap: 16px;
}

.rx-access__cards--solid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

/* A card: 24 of padding, 16 corners, white on the hairline; the title 22
   semibold in the navy, the text 16 on a 24 line 12 under it, the bullets
   12 under that. */
.rx-access__card {
	padding: 24px;
	border: 1px solid var(--rx-line);
	border-radius: 16px;
	background: #fcfdff;
	color: var(--rx-ink-soft);
}

/* The tick: a 36 pale disc 20 over the title (health advice). */
.rx-access__card-icon {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin-bottom: 20px;
	border-radius: 50%;
	background: var(--rx-pale);
	color: var(--rx-blue);
}

.rx-access__card-icon svg,
.rx-access__card-icon img {
	display: block;
	width: 18px;
	height: 18px;
	object-fit: contain;
}

.rx-access__card-title {
	margin: 0;
	color: var(--rx-navy);
	font-size: 1.375rem;
	font-weight: var(--fw-semibold);
	line-height: 1.25;
}

.rx-access__card-text {
	margin: 12px 0 0;
	font-size: 1rem;
	line-height: 1.5;
}

.rx-access__card .rx-access__card-list {
	margin: 12px 0 0;
	padding: 0 0 0 22px;
	font-size: 1rem;
	line-height: 1.5;
	list-style: disc;
}

.rx-access__card-list li::marker {
	color: #9ca3ab;
}

/* The blue cards: white on the design's #0a5aa8, the bullets 20 under the
   title. */
.rx-access__card--solid {
	border-color: #0a5aa8;
	background: #0a5aa8;
	color: #ffffff;
}

.rx-access__card--solid .rx-access__card-title {
	color: #ffffff;
}

.rx-access__card--solid .rx-access__card-list {
	margin-top: 20px;
}

.rx-access__card--solid .rx-access__card-list li::marker {
	color: #ffffff;
}

/* --- Outlined cards: by count. Three in a row; four two by two; five
   two over three (the ABPM, needle exchange and NMS benefits); six
   three by two. --- */
.rx-howto__cards--1 {
	grid-template-columns: minmax(0, 1fr);
}

.rx-howto__cards--2,
.rx-howto__cards--4 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rx-howto__cards--3,
.rx-howto__cards--6 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rx-howto__cards--5 {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.rx-howto__cards--5 .rx-howto__card {
	grid-column: span 2;
}

.rx-howto__cards--5 .rx-howto__card:nth-child(-n + 2) {
	grid-column: span 3;
}

/* A card's bullet points, 12 under its text. */
.rx-howto__card .rx-howto__card-list {
	margin: 12px 0 0;
	padding: 0 0 0 20px;
	color: var(--rx-ink-soft);
	font-size: 1rem;
	line-height: 1.5;
	list-style: disc;
}

.rx-howto__card-list li::marker {
	color: #9ca3ab;
}

/* The button under the cards, 40 below them (COVID-19). */
.rx-howto__actions {
	margin: 40px 0 0;
	text-align: center;
}

/* On a band: the pale blue across the page, like the band section. */
.rx-howto--band {
	background: var(--rx-pale);
}

.rx-build .section + .rx-howto--band {
	margin-block-start: 0;
	padding-block: 2.5rem;
}

/* --- The steps: two share the width (emergency contraception, NMS). --- */
.rx-steps__panel .rx-steps__list--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rx-steps__panel .rx-steps__list--1 {
	grid-template-columns: minmax(0, 1fr);
}

/* --- The eligibility panel

   The panel: a #b5d5fb hairline, 24 corners, 40 of padding, white at the
   top fading to the pale blue at the foot. The heading, then 76 under it
   the white pill of tabs - 4 of padding, each tab a 38 pill, the open
   one solid blue with white on it, the others the brand blue on white.
   32 under the tabs the copy: a 22 semibold heading, its paragraph 16
   under it at 16, the ticked points 26 under that at 15 on a 23 line
   with the 14 tick in the brand blue; a second heading 36 under the
   points. The blue card at the right: 316 wide, #0a5aa8, 16 corners, 32
   of padding, at the foot of the panel - the 44 display heading, its
   line 12 under it at 18, the white pill 32 under that across the card.
   Without a card the solid button stands 70 under the copy (ABPM). --- */
.rx-elig__panel {
	padding: 40px;
	border: 1px solid var(--rx-line);
	border-radius: var(--rx-radius);
	background:
		radial-gradient(70% 55% at 28% 42%, #ffffff 0%, rgba(255, 255, 255, 0) 100%),
		linear-gradient(180deg, #f0f6fe 0%, #cfe2fa 100%);
}

.rx-elig__title {
	margin: 0;
	color: var(--rx-ink);
}

.rx-elig__title-accent {
	color: var(--color-heading-accent);
}

.rx-elig__switch {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 76px;
	padding: 4px;
	border-radius: 999px;
	background: #ffffff;
}

.rx-elig__tab {
	height: 38px;
	padding: 0 18px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--rx-blue);
	font: inherit;
	font-size: 0.875rem;
	font-weight: var(--fw-medium);
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.rx-elig__tab:hover {
	color: var(--rx-blue-deep);
}

.rx-elig__tab[aria-selected="true"] {
	background: var(--rx-blue);
	color: #ffffff;
	font-weight: var(--fw-semibold);
}

.rx-elig__tab:focus-visible {
	outline: 2px solid var(--rx-blue);
	outline-offset: 2px;
}

/* The copy and the card: the card at the foot, the copy from the top. */
.rx-elig__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
	align-items: end;
	margin-top: 32px;
}

.rx-elig__tabs > .rx-elig__pane:first-child .rx-elig__grid {
	margin-top: 76px;
}

.rx-elig__grid--card {
	grid-template-columns: minmax(0, 1fr) 316px;
}

.rx-elig__copy {
	align-self: start;
}

.rx-elig__sub {
	margin: 0;
	color: var(--rx-ink);
	font-size: 1.375rem;
	font-weight: var(--fw-semibold);
	line-height: 1.3;
}

.rx-elig__text {
	margin: 16px 0 0;
	color: var(--rx-ink);
	font-size: 1rem;
	line-height: 1.5;
}

.rx-elig__copy .rx-elig__points {
	display: grid;
	gap: 1px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.rx-elig__point {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: var(--rx-ink);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.rx-elig__point-icon {
	display: inline-flex;
	flex: 0 0 auto;
	margin-top: 4px;
	color: var(--rx-blue);
}

.rx-elig__point-icon svg,
.rx-elig__point-icon img {
	display: block;
	width: 14px;
	height: 14px;
	object-fit: contain;
}

.rx-elig__points + .rx-elig__sub,
.rx-elig__text + .rx-elig__sub {
	margin-top: 36px;
}

.rx-elig__actions {
	margin: 70px 0 0;
}

.rx-elig__card {
	align-self: end;
	padding: 32px;
	border-radius: 16px;
	background: #0a5aa8;
	color: #ffffff;
}

.rx-elig__card-title {
	margin: 0;
	color: #ffffff;
	font-family: var(--font-display);
	font-size: 2.75rem;
	font-weight: var(--fw-semibold);
	line-height: 1.1;
	letter-spacing: 0.005em;
	white-space: pre-line;
}

.rx-elig__card-text {
	margin: 12px 0 0;
	font-size: 1.125rem;
	line-height: 1.4;
}

.rx-elig__card-cta {
	width: 100%;
	height: 48px;
	justify-content: center;
	margin-top: 32px;
}

/* --- The clinic band

   The pale blue across the page like the band section, 40 of padding
   top and bottom. The heading centred; 40 under it the table, 1024 wide
   and centred: white on the hairline with 8 corners, the headings 16
   semibold on a 53 row, the rows on #f6f9fd at 15, the first column
   44% wide and left-aligned, the others centred, a short hairline
   between the columns; the solid button 40 under the table. --- */
.rx-build .section + .rx-clinic {
	margin-block-start: 0;
	padding-block: 2.5rem;
}

.rx-clinic {
	background: var(--rx-pale);
}

.rx-clinic__title {
	margin: 0;
	color: var(--rx-ink);
	text-align: center;
}

.rx-clinic__title-accent {
	color: var(--color-heading-accent);
}

.rx-clinic__table-wrap {
	max-width: 1024px;
	margin: 40px auto 0;
	overflow-x: auto;
	border: 1px solid var(--rx-line);
	border-radius: 8px;
	background: #fcfdff;
}

.rx-clinic__table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	color: var(--rx-ink);
	font-size: 0.9375rem;
	line-height: 1.4;
}

.rx-clinic__table th,
.rx-clinic__table td {
	position: relative;
	padding: 16px 20px;
	text-align: center;
	vertical-align: middle;
}

.rx-clinic__table th {
	font-size: 1rem;
	font-weight: var(--fw-semibold);
}

.rx-clinic__table th:first-child,
.rx-clinic__table td:first-child {
	width: 44%;
	text-align: left;
}

.rx-clinic__table tbody tr {
	background: #f6f9fd;
}

.rx-clinic__table tbody tr + tr td {
	border-top: 1px solid #e3edf9;
}

.rx-clinic__table th + th::before,
.rx-clinic__table td + td::before {
	content: "";
	position: absolute;
	top: 12px;
	bottom: 12px;
	left: 0;
	width: 1px;
	background: #d7e5f7;
}

.rx-clinic__actions {
	margin: 40px 0 0;
	text-align: center;
}

/* --- Fading up: the band's cards and the clinic's table and button come
   up after their headings. --- */
.rx-access__side,
.rx-clinic__table-wrap {
	--reveal-delay: 0.15s;
}

.rx-clinic__actions,
.rx-howto__actions {
	--reveal-delay: 0.3s;
}

/* -------------------------------------------------------------------------
   Tablet: the two-column sections stack, the steps go to one column and
   the cards to one column with no step between them.
   ---------------------------------------------------------------------- */

@media (max-width: 991.98px) {
	.rx-hero__panel {
		grid-template-columns: minmax(0, 1fr);
		padding: 32px 24px;
	}

	.rx-hero__copy {
		max-width: none;
		align-self: auto;
		padding-bottom: 0;
	}

	.rx-hero__notch {
		display: none;
	}

	.rx-hero__media {
		min-height: 0;
	}

	.rx-hero__media img {
		position: static;
		height: auto;
		aspect-ratio: 530 / 334;
	}

	.rx-what__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.rx-access__inner,
	.rx-benefits__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.rx-access__title,
	.rx-benefits__title {
		max-width: none;
	}

	.rx-benefits__inner .rx-benefits__list {
		max-width: none;
		margin-top: 28px;
	}

	.rx-steps__panel,
	.rx-symptoms__panel {
		padding: 32px 24px 40px;
	}

	.rx-steps__panel .rx-steps__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
		margin-top: 48px;
	}

	.rx-features__panel {
		grid-template-columns: minmax(0, 1fr);
		padding: 24px;
	}

	.rx-features__copy {
		max-width: none;
	}

	.rx-features__cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.rx-features__col:nth-child(2) {
		padding-top: 0;
	}

	.rx-help__panel {
		padding: 40px 24px;
	}

	.rx-faq__title {
		margin-bottom: 40px;
	}

	.rx-faq__q {
		padding: 20px 24px;
	}

	.rx-faq__a {
		padding: 0 24px 24px;
	}
}

/* Phones: the panels keep their corners but lose some padding, and the
   hero's heading comes down a step. */
@media (max-width: 575.98px) {
	.rx-build {
		--rx-radius: 16px;
	}

	.rx-hero__panel {
		padding: 24px 20px;
	}

	.rx-hero__title {
		white-space: normal;
	}

	.rx-steps__panel {
		padding: 24px 20px 32px;
	}

	.rx-features__panel,
	.rx-help__panel {
		padding: 24px 20px;
	}

	.rx-faq__q {
		padding: 18px 20px;
	}

	.rx-faq__a {
		padding: 0 20px 20px;
	}
}

/* -------------------------------------------------------------------------
   NHS Services additions: tablet and phones
   ---------------------------------------------------------------------- */

@media (max-width: 991.98px) {
	.rx-access__inner--cards,
	.rx-access__inner--solid {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.rx-symptoms__panel {
		padding: 32px 24px 40px;
	}

	.rx-symptoms__panel .rx-symptoms__row {
		flex-wrap: wrap;
	}

	.rx-symptom,
	.rx-symptom--cta {
		flex: 1 1 calc(50% - 8px);
	}

	.rx-howto__cards--3,
	.rx-howto__cards--5,
	.rx-howto__cards--6 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rx-howto__cards--5 .rx-howto__card:nth-child(n) {
		grid-column: auto;
	}

	.rx-steps__panel .rx-steps__list--2 {
		grid-template-columns: minmax(0, 1fr);
	}

	.rx-elig__panel {
		padding: 32px 24px;
	}

	.rx-elig__switch {
		margin-top: 32px;
	}

	.rx-elig__tabs > .rx-elig__pane:first-child .rx-elig__grid {
		margin-top: 32px;
	}

	.rx-elig__grid--card {
		grid-template-columns: minmax(0, 1fr);
	}

	.rx-elig__card {
		max-width: 420px;
	}

	.rx-elig__actions {
		margin-top: 32px;
	}

	.rx-clinic__table th,
	.rx-clinic__table td {
		padding: 12px 16px;
	}
}

@media (max-width: 575.98px) {
	.rx-symptoms__panel {
		padding: 24px 16px 32px;
	}

	/* One card to a row. */
	.rx-symptom,
	.rx-symptoms--left .rx-symptom,
	.rx-symptom--cta {
		flex-basis: 100%;
	}

	.rx-symptoms__row--dense .rx-symptom {
		padding: 24px;
	}

	.rx-symptoms__row--dense .rx-symptom__label {
		font-size: 1.25rem;
	}

	.rx-howto__cards--2,
	.rx-howto__cards--3,
	.rx-howto__cards--4,
	.rx-howto__cards--5,
	.rx-howto__cards--6 {
		grid-template-columns: minmax(0, 1fr);
	}

	.rx-access__cards--solid {
		grid-template-columns: minmax(0, 1fr);
	}

	.rx-elig__panel {
		padding: 24px 20px;
	}

	.rx-elig__switch {
		display: flex;
	}

	.rx-elig__tab {
		flex: 1 1 auto;
	}

	.rx-elig__card {
		max-width: none;
		padding: 24px;
	}

	.rx-elig__card-title {
		font-size: 2.25rem;
	}

	.rx-clinic__table th,
	.rx-clinic__table td {
		padding: 10px 12px;
		font-size: 0.875rem;
	}
}

/* =========================================================================
   The private services designs (2026-10-29)

   What the seventeen designs add to the sections above, read off the
   1440 exports over the 1280 container: the hero's price badge; the key
   points as small ticks, red crosses or pale pills, the yellow box and
   the button under the picture-beside-copy block; the paragraph, note and
   button under the symptom cards; the band's pills, exclamation cards,
   paired cards, plain ground, note and card buttons; the outlined cards'
   line, icons, ticked points, closing line and layouts; the pills section
   as cards, on a band, with a button; the fourth step and the steps'
   closing line; the clinic band on the page's ground with titled tables;
   and the product cards, the price card and the reviews.
   ========================================================================= */

/* ---- Hero: the price badge ----
   196 by 86 at the photograph's bottom-left, 118 past its left edge and
   36 above its foot: the design's #0a5aa8 with 12 corners, a 38 white
   disc with the tick in the blue, the figure 32 semibold and the line 14. */

.rx-hero__price {
	position: absolute;
	left: -118px;
	bottom: 36px;
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 16px 20px;
	border-radius: 12px;
	background: #0a5aa8;
	color: #ffffff;
	box-shadow: 0 12px 30px rgba(10, 90, 168, 0.25);
}

.rx-hero__price-icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #ffffff;
	color: #0a5aa8;
}

.rx-hero__price-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.rx-hero__price-value {
	font-family: var(--font-display);
	font-size: 2rem;
	font-weight: var(--fw-semibold);
	line-height: 1;
	letter-spacing: 0.005em;
}

.rx-hero__price-note {
	font-size: 0.875rem;
	line-height: 1.3;
}

/* ---- Picture beside copy ---- */

/* A small heading inside the copy ("Anti-inflammatory Pain Relief"):
   22 semibold in the navy, 20 above and 12 below. */
.rx-what__sub,
.rx-access__sub {
	margin: 20px 0 12px;
	color: var(--rx-ink);
	font-size: 1.375rem;
	font-weight: var(--fw-semibold);
	line-height: 1.3;
}

.rx-what__text + .rx-what__text {
	margin-top: 14px;
}

.rx-what__copy .rx-what__list {
	margin: 14px 0 0;
	padding: 0 0 0 26px;
	color: var(--rx-ink-soft);
	font-size: 1.125rem;
	line-height: 1.55;
	list-style: disc;
}

.rx-what__list li::marker {
	color: #9ca3ab;
}

.rx-what__text--after {
	margin-top: 14px;
}

/* Small ticks, no disc: 16 in the brand blue, the text 16 on a 24 line,
   10 after; the list 8 apart. */
.rx-what__copy .rx-what__points--plain,
.rx-what__copy .rx-what__points--cross {
	gap: 10px;
	margin-top: 4px;
}

.rx-what__points--plain .rx-what__point,
.rx-what__points--cross .rx-what__point {
	align-items: flex-start;
	gap: 12px;
	color: var(--rx-ink-soft);
}

.rx-what__points--plain .rx-what__point-icon,
.rx-what__points--cross .rx-what__point-icon {
	width: auto;
	height: auto;
	margin-top: 3px;
	border-radius: 0;
	background: none;
}

.rx-what__points--plain .rx-what__point-icon svg,
.rx-what__points--cross .rx-what__point-icon svg {
	width: 16px;
	height: 16px;
}

/* The crosses are the design's red. */
.rx-what__points--cross .rx-what__point-icon {
	color: #d64545;
}

.rx-what__points--cross .rx-what__point {
	gap: 16px;
}

/* Pills: as the "Why choose" section draws them - 46 tall, a full pill
   in the pale blue, the tick 14 in and the 15 medium label 18 after,
   8 apart, each as wide as its text up to the column. */
.rx-what__copy .rx-what__points--pills {
	justify-items: start;
	gap: 8px;
	margin-top: 20px;
}

.rx-what__points--pills .rx-what__point {
	gap: 18px;
	width: fit-content;
	min-width: min(396px, 100%);
	max-width: 100%;
	min-height: 46px;
	padding: 6px 20px 6px 14px;
	border-radius: 23px;
	background: var(--rx-pale);
	font-size: 0.9375rem;
	font-weight: var(--fw-medium);
}

.rx-what__points--pills .rx-what__point-icon {
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
}

.rx-what__points--pills .rx-what__point-icon svg {
	width: 20px;
	height: 20px;
}

/* A second group's heading keeps its distance from the first list. */
.rx-what__points + .rx-what__points-title {
	margin-top: 24px;
}

/* The yellow box: 24 of padding on a hairline, 12 corners, the heading
   18 medium and the crossed points in the design's brown. */
.rx-what__box {
	margin-top: 24px;
	padding: 20px 24px;
	border: 1px solid #efd98f;
	border-radius: 12px;
	background: #fffbea;
	color: #9a6b1a;
}

.rx-what__box-title {
	margin: 0 0 12px;
	color: #9a6b1a;
	font-size: 1.125rem;
	font-weight: var(--fw-medium);
	line-height: 1.3;
}

.rx-what__copy .rx-what__box-points {
	margin-top: 0;
}

.rx-what__box-points .rx-what__point {
	color: #9a6b1a;
}

/* The button under the copy, 32 below it. */
.rx-what__actions {
	margin: 32px 0 0;
}

/* ---- Symptoms: under the cards ---- */

/* The paragraph: 18 on a 28 line centred on a 1220 measure, 40 under
   the cards; the small note 12 at the left, 32 under; the button 24
   under the paragraph. */
.rx-symptoms__after {
	max-width: 1220px;
	margin: 40px auto 0;
	color: var(--rx-ink-soft);
	font-size: 1.125rem;
	line-height: 1.55;
	text-align: center;
}

.rx-symptoms__note {
	margin: 32px 0 0;
	color: var(--rx-ink-soft);
	font-size: 0.75rem;
	line-height: 1.4;
	text-align: left;
}

.rx-symptoms__actions {
	margin: 24px 0 0;
	text-align: center;
}

/* ---- The band ---- */

/* On the page's own ground: no wash, and the page's own spacing. */
.rx-access--plain {
	background: transparent;
}

.rx-build .section + .rx-access--plain {
	margin-block-start: var(--rx-section-space);
	padding-block: var(--section-gap);
}

/* Pills in the band's list: as the "Why choose" pills. */
.rx-access__inner .rx-access__list--pills {
	display: grid;
	justify-items: start;
	gap: 8px;
	padding: 0;
	list-style: none;
}

.rx-access__list--pills li {
	display: flex;
	align-items: center;
	gap: 18px;
	width: fit-content;
	min-width: min(396px, 100%);
	max-width: 100%;
	min-height: 46px;
	padding: 6px 20px 6px 14px;
	border-radius: 23px;
	background: #fcfdff;
	color: var(--rx-ink);
	font-size: 0.9375rem;
	font-weight: var(--fw-medium);
	line-height: 1.3;
}

/* On the page's ground the pills take the pale blue instead. */
.rx-access--plain .rx-access__list--pills li {
	background: var(--rx-pale);
}

.rx-access__pill-icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--rx-blue);
}

.rx-access__pill-icon svg {
	width: 20px;
	height: 20px;
}

.rx-access__list--pills a {
	color: inherit;
	text-decoration: none;
}

.rx-access__list--pills a:hover {
	color: var(--rx-blue);
	text-decoration: underline;
}

/* Exclamation cards: the tick cards' disc with the mark. */
.rx-access__inner--exclaim,
.rx-access__inner--pair {
	grid-template-columns: minmax(0, 1fr) 712px;
	gap: 48px;
}

.rx-access__inner--pair {
	grid-template-columns: minmax(0, 1fr) 767px;
	gap: 44px;
}

.rx-access__card--exclaim .rx-access__card-icon svg {
	width: 18px;
	height: 18px;
}

/* Paired cards: two side by side, 16 apart, each 24 of padding with its
   button across the foot. */
.rx-access__cards--pair {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	align-items: stretch;
}

.rx-access__card--pair {
	display: flex;
	flex-direction: column;
}

/* A card's ticked points: 14 in the brand blue, the text 15 on a 22 line. */
.rx-access__card .rx-access__card-list--ticks {
	display: grid;
	gap: 8px;
	padding: 0;
	list-style: none;
}

.rx-access__card-list--ticks li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.9375rem;
	line-height: 1.45;
}

.rx-access__tick {
	display: inline-flex;
	flex: 0 0 auto;
	margin-top: 4px;
	color: var(--rx-blue);
}

/* The card's button, 24 under its points and across its width. */
.rx-access__card-actions {
	margin: 24px 0 0;
}

.rx-access__card--pair .rx-access__card-actions {
	margin-top: auto;
	padding-top: 24px;
}

.rx-access__card-cta {
	width: 100%;
}

/* The small note under the cards: 12 in the soft grey, 12 below. */
.rx-access__cards-note {
	margin: 12px 0 0;
	color: var(--rx-ink-soft);
	font-size: 0.75rem;
	line-height: 1.4;
}

/* A card's paragraphs, where its text has more than one. */
.rx-access__card-text + .rx-access__card-text {
	margin-top: 10px;
}

/* ---- Outlined cards ---- */

/* The line under the heading: 18 on a 28 line centred on a 760
   measure, 24 under the heading and 40 over the cards. */
.rx-howto__text {
	max-width: 760px;
	margin: -16px auto 40px;
	color: var(--rx-ink-soft);
	font-size: 1.125rem;
	line-height: 1.55;
	text-align: center;
}

/* Without a heading the cards start the section. */
.rx-howto--untitled .rx-howto__text {
	margin-top: 0;
}

/* Four across (travellers' diarrhoea's treatments, the emergency
   supplies' steps), and two over one across the full width (altitude
   sickness's medication). */
.rx-howto__cards--four {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rx-howto__cards--two-one {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rx-howto__cards--two-one .rx-howto__card:nth-child(3) {
	grid-column: 1 / -1;
}

/* A card with no icon starts with its title. */
.rx-howto__card > .rx-howto__card-title:first-child {
	margin-top: 0;
}

/* A card's paragraphs, where its text has more than one. */
.rx-howto__card-text + .rx-howto__card-text {
	margin-top: 10px;
}

/* Ticked points: 14 in the brand blue, the point 15 semibold in the navy
   with its line 14 on a 20 line in the soft grey beneath, 8 apart. */
.rx-howto__card .rx-howto__card-list--ticks {
	display: grid;
	gap: 8px;
	padding: 0;
	list-style: none;
}

.rx-howto__card-list--ticks li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.rx-howto__tick {
	display: inline-flex;
	flex: 0 0 auto;
	margin-top: 3px;
	color: var(--rx-blue);
}

.rx-howto__point {
	display: flex;
	flex-direction: column;
	gap: 2px;
	color: var(--rx-navy);
	font-size: 0.9375rem;
	font-weight: var(--fw-semibold);
	line-height: 1.4;
}

.rx-howto__point-sub {
	color: var(--rx-ink-soft);
	font-size: 0.875rem;
	font-weight: var(--fw-regular);
	line-height: 1.45;
}

/* The closing line, 12 under the points. */
.rx-howto__card-after {
	margin-top: 12px;
}

/* ---- Pills as cards, on a band, with a button ---- */

.rx-benefits--band {
	background: var(--rx-pale);
}

.rx-build .section + .rx-benefits--band {
	margin-block-start: 0;
	padding-block: 2.5rem;
}

/* The cards: 24 of padding on the hairline with 16 corners in the pale
   blue, 16 apart, 40 under the heading; the title 22 semibold in the
   navy, the text 16 on a 24 line 12 under it. On the band the cards go
   white. */
.rx-benefits__inner .rx-benefits__cards {
	display: grid;
	gap: 16px;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}

.rx-benefits__card {
	padding: 24px;
	border: 1px solid var(--rx-line);
	border-radius: 16px;
	background: var(--rx-pale);
}

.rx-benefits--band .rx-benefits__card {
	background: #fcfdff;
}

.rx-benefits__card-title {
	margin: 0;
	color: var(--rx-navy);
	font-size: 1.375rem;
	font-weight: var(--fw-semibold);
	line-height: 1.25;
}

.rx-benefits__card-text {
	margin: 12px 0 0;
	color: var(--rx-ink-soft);
	font-size: 1rem;
	line-height: 1.5;
}

/* The button, 32 under the pills or cards. */
.rx-benefits__actions {
	margin: 32px 0 0;
}

/* ---- Steps: a fourth, in yellow; a closing line ---- */

.rx-step--4 {
	--rx-step-tint: #fff3b0;
	--rx-step-ink: #a07a00;
	--rx-step-number: #8f6c00;
}

.rx-steps__panel .rx-steps__list--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px 56px;
}

/* 18 on a 28 line centred on a 1140 measure, 56 under the steps. */
.rx-steps__after {
	max-width: 1140px;
	margin: 56px auto 0;
	color: var(--rx-ink-soft);
	font-size: 1.125rem;
	line-height: 1.55;
	text-align: center;
}

/* ---- The clinic band on the page's ground, with titled tables ---- */

.rx-clinic--plain {
	background: transparent;
}

.rx-build .section + .rx-clinic--plain {
	margin-block-start: var(--rx-section-space);
	padding-block: var(--section-gap);
}

/* The line under the heading: 18 on a 28 line centred on a 760 measure,
   24 under the heading. */
.rx-clinic__text {
	max-width: 760px;
	margin: 24px auto 0;
	color: var(--rx-ink-soft);
	font-size: 1.125rem;
	line-height: 1.55;
	text-align: center;
}

.rx-clinic__text a {
	color: var(--rx-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The tables, 40 under the heading or its line; two side by side 16 apart. */
.rx-clinic__tables {
	margin: 40px 0 0;
}

.rx-clinic__tables--two {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	align-items: start;
}

.rx-clinic__tables .rx-clinic__table-wrap {
	margin-top: 0;
}

/* A table's own heading: 24 semibold in the navy, 20 over it. */
.rx-clinic__table-title {
	margin: 0 0 20px;
	color: var(--rx-ink);
	font-size: 1.5rem;
	font-weight: var(--fw-semibold);
	line-height: 1.3;
}

/* On the page's ground: the full width, the columns equal and left
   aligned, the heading row in the pale blue, the rows banded, 53 tall. */
.rx-clinic--plain .rx-clinic__table-wrap {
	max-width: none;
	border-color: var(--rx-line);
}

.rx-clinic--plain .rx-clinic__table th,
.rx-clinic--plain .rx-clinic__table td {
	width: auto;
	padding: 17px 20px;
	text-align: left;
	vertical-align: top;
}

.rx-clinic--plain .rx-clinic__table th {
	background: #e3eefb;
	font-size: 0.9375rem;
}

.rx-clinic--plain .rx-clinic__table th + th::before,
.rx-clinic--plain .rx-clinic__table td + td::before {
	display: none;
}

.rx-clinic--plain .rx-clinic__table tbody tr:nth-child(odd) {
	background: #fcfdff;
}

.rx-clinic--plain .rx-clinic__table tbody tr:nth-child(even) {
	background: #f4f8fd;
}

.rx-clinic--plain .rx-clinic__table tbody tr + tr td {
	border-top: 1px solid #e3edf9;
}

.rx-clinic__table a {
	color: var(--rx-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- Product cards ---- */

/* Beside one product: the heading and its line on the left, the card
   672 wide on the right. Over a row: the heading centred, the cards 16
   apart. A card: 20 of padding on the hairline with 20 corners in the
   pale blue; the picture 290 by 200 with 12 corners on the left, and
   beside it the name 24 semibold, the price 18 medium 16 under, the
   solid button 20 under that. */
.ps-product--side .ps-product__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 672px;
	gap: 48px;
	align-items: center;
}

.ps-product--row .ps-product__inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.ps-product--row .ps-product__header {
	max-width: 760px;
	margin: 0 auto 40px;
	text-align: center;
}

.ps-product__title {
	margin: 0;
	color: var(--rx-ink);
}

.ps-product--side .ps-product__title-accent {
	display: block;
	color: var(--color-heading-accent);
}

.ps-product--row .ps-product__title-accent {
	color: var(--color-heading-accent);
}

.ps-product__text {
	margin: 20px 0 0;
	color: var(--rx-ink-soft);
	font-size: 1.125rem;
	line-height: 1.55;
}

.ps-product__cards {
	display: grid;
	gap: 16px;
}

.ps-product--row .ps-product__cards {
	grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
}

.ps-product__card {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 20px;
	border: 1px solid var(--rx-line);
	border-radius: 20px;
	background: var(--rx-pale);
}

.ps-product__media {
	flex: 0 0 290px;
	aspect-ratio: 290 / 200;
	overflow: hidden;
	border-radius: 12px;
	background: #ffffff;
}

.ps-product__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ps-product__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.ps-product__name {
	margin: 0;
	color: var(--rx-navy);
	font-size: 1.5rem;
	font-weight: var(--fw-semibold);
	line-height: 1.3;
}

.ps-product__price {
	margin: 16px 0 0;
	color: var(--rx-ink);
	font-size: 1.125rem;
	font-weight: var(--fw-medium);
	line-height: 1.3;
}

.ps-product__cta {
	margin-top: 20px;
}

/* ---- The price card ---- */

/* The pale band: the heading on the left, the 264-wide blue card on the
   right, 40 of padding with 16 corners; the small line 12 tracked, the
   name 18 semibold, the price 48 semibold with its unit 15 after, the
   white pill 16 under. */
.ps-pricing {
	background: var(--rx-pale);
}

.rx-build .section + .ps-pricing {
	margin-block-start: 0;
	padding-block: 2.5rem;
}

.ps-pricing__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 48px;
	align-items: center;
}

.ps-pricing__title {
	margin: 0;
	color: var(--rx-ink);
}

.ps-pricing__title-accent {
	color: var(--color-heading-accent);
}

.ps-pricing__text {
	margin: 20px 0 0;
	color: var(--rx-ink-soft);
	font-size: 1.125rem;
	line-height: 1.55;
}

.ps-pricing__cards {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: flex-end;
}

.ps-pricing__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 264px;
	padding: 28px 24px;
	border-radius: 16px;
	background: #0a5aa8;
	color: #ffffff;
	box-shadow: 0 16px 40px rgba(10, 90, 168, 0.22);
}

.ps-pricing__eyebrow {
	margin: 0;
	font-size: 0.75rem;
	font-weight: var(--fw-medium);
	line-height: 1.3;
	letter-spacing: 0.12em;
}

.ps-pricing__name {
	margin: 6px 0 0;
	color: #ffffff;
	font-size: 1.125rem;
	font-weight: var(--fw-semibold);
	line-height: 1.3;
}

.ps-pricing__price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 16px 0 0;
	font-family: var(--font-display);
	font-size: 3rem;
	font-weight: var(--fw-semibold);
	line-height: 1;
	letter-spacing: 0.005em;
}

.ps-pricing__unit {
	font-family: var(--font-primary);
	font-size: 0.9375rem;
	font-weight: var(--fw-regular);
	letter-spacing: 0;
}

.ps-pricing__cta {
	margin-top: 16px;
}

/* ---- Reviews ---- */

/* The heading on the left, the line right-aligned beside it on a 665
   measure, 40 over three cards 16 apart - the home page's review cards. */
.ps-reviews__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 665px);
	gap: 32px 64px;
	align-items: start;
	margin: 0 0 40px;
}

.ps-reviews__title {
	margin: 0;
	color: var(--rx-ink);
}

.ps-reviews__title-accent {
	display: block;
	color: var(--color-heading-accent);
}

.ps-reviews__text {
	margin: 0;
	color: var(--rx-ink-soft);
	font-size: 1.125rem;
	line-height: 1.55;
	text-align: right;
}

.ps-reviews__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 16px;
}

.ps-reviews__item .h2-review-card {
	width: auto;
	height: 100%;
	margin: 0;
}

/* The card itself, as the home page draws it (home2.css, which this
   template does not load): 28 of padding on a hairline with 12 corners
   in the pale blue; the stars 24 in the design's yellow; the review 16
   on a 24 line held to five lines; the face 56 round with the name 16
   semibold and its line 14. */
.ps-reviews .h2-review-card {
	display: flex;
	flex-direction: column;
	padding: 28px;
	border: 1px solid #cfe0f5;
	border-radius: 12px;
	background: #f4f8fd;
	color: var(--rx-ink);
}

.ps-reviews .h2-review-card__rating {
	margin: 0 0 18px;
	color: #ffd400;
	font-size: 1.5rem;
	line-height: 1;
	letter-spacing: 0.25rem;
}

.ps-reviews .h2-review-card__text {
	margin: 0 0 28px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--rx-ink-soft);
	font-size: 1rem;
	font-style: normal;
	line-height: 1.5;
}

.ps-reviews .h2-review-card__text p {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
}

.ps-reviews .h2-review-card__identity {
	display: flex;
	gap: 16px;
	align-items: center;
	margin-block-start: auto;
}

.ps-reviews .h2-review-card__avatar {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--color-primary-100);
	color: var(--rx-blue);
	font-weight: var(--fw-semibold);
	object-fit: cover;
}

.ps-reviews .h2-review-card__naming {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.ps-reviews .h2-review-card__name {
	color: var(--rx-ink);
	font-size: 1rem;
	font-weight: var(--fw-semibold);
	line-height: 1.3;
}

.ps-reviews .h2-review-card__date {
	color: var(--rx-ink-soft);
	font-size: 0.875rem;
	line-height: 1.3;
}

/* ---- Tablet ---- */

@media (max-width: 991.98px) {
	/* The badge inside the photograph's corner. */
	.rx-hero__price {
		left: 16px;
		bottom: 16px;
		padding: 12px 16px;
	}

	.rx-hero__price-value {
		font-size: 1.5rem;
	}

	.rx-access__inner--exclaim,
	.rx-access__inner--pair {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.rx-howto__cards--four {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rx-steps__panel .rx-steps__list--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rx-clinic__tables--two {
		grid-template-columns: minmax(0, 1fr);
	}

	.ps-product--side .ps-product__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.ps-pricing__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.ps-pricing__cards {
		justify-content: flex-start;
	}

	.ps-reviews__head {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.ps-reviews__text {
		text-align: left;
	}
}

/* ---- Phones ---- */

@media (max-width: 575.98px) {
	.rx-access__cards--pair,
	.rx-howto__cards--four,
	.rx-howto__cards--two-one,
	.rx-steps__panel .rx-steps__list--4 {
		grid-template-columns: minmax(0, 1fr);
	}

	.rx-howto__cards--two-one .rx-howto__card:nth-child(3) {
		grid-column: auto;
	}

	.rx-what__points--pills .rx-what__point,
	.rx-access__list--pills li {
		min-width: 0;
		width: 100%;
	}

	.ps-product__card {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	.ps-product__media {
		flex-basis: auto;
	}

	.ps-pricing__card {
		width: 100%;
	}

	.rx-symptoms__after,
	.rx-steps__after,
	.rx-howto__text,
	.rx-clinic__text {
		font-size: 1rem;
	}
}

/* =========================================================================
   The vaccination designs (2026-10-30)

   What the seventeen vaccination pages add: the symptom cards in labelled
   groups and as one ticked list; a small table and link cards in the band,
   and the band as a rounded panel; a heading row across the clinic table.
   Read off the 1440 exports over the 1280 container.
   ========================================================================= */

/* ---- Symptoms: the groups' labels ----
   22 medium in the ink, left-aligned, 16 over the row and 24 under the
   row before. */
.rx-symptoms__group {
	margin: 24px 0 16px;
	color: var(--rx-ink);
	font-size: 1.375rem;
	font-weight: var(--fw-medium);
	line-height: 1.3;
	text-align: left;
}

.rx-symptoms__rows > .rx-symptoms__group:first-child {
	margin-top: 0;
}

/* ---- Symptoms as one ticked list (HPV) ----
   A white card on the hairline with 16 corners and 24 of padding, 40
   under the line; the points 22 on a 32 line in the ink, the tick 20 in
   the brand blue 16 before, 16 apart. */
.rx-symptoms__panel .rx-symptoms__list {
	display: grid;
	gap: 16px;
	margin: 40px 0 0;
	padding: 24px;
	border: 1px solid var(--rx-line);
	border-radius: 16px;
	background: #fcfdff;
	list-style: none;
	text-align: left;
}

.rx-symptoms__list li {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	color: var(--rx-ink);
	font-size: 1.375rem;
	line-height: 1.45;
}

.rx-symptoms__tick {
	display: inline-flex;
	flex: 0 0 auto;
	margin-top: 6px;
	color: var(--rx-blue);
}

/* ---- The band as a rounded panel (travel health's treatments) ---- */
.rx-access--panel {
	background: transparent;
}

.rx-build .section + .rx-access--panel {
	margin-block-start: var(--rx-section-space);
	padding-block: 0;
}

.rx-access--panel .rx-access__inner {
	padding: 40px 20px 40px 20px;
	border-radius: var(--rx-radius);
	background: var(--rx-pale);
}

.rx-access--panel .rx-access__inner--cards {
	grid-template-columns: minmax(0, 1fr) 616px;
	gap: 48px;
}

/* ---- Link cards: two by two, 16 apart; each 24 of padding on the
   hairline with 16 corners; the 80 disc at the top, the title 24
   semibold in the navy 32 under it, the link 15 medium in the brand blue
   with the arrow 40 under that. ---- */
.rx-access__cards--link {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.rx-access__card--link {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 24px 16px 28px;
}

.rx-access__card-disc {
	display: block;
	width: 80px;
	height: 80px;
	margin-bottom: 32px;
	border-radius: 50%;
	overflow: hidden;
}

.rx-access__card-disc img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rx-access__card--link .rx-access__card-title {
	font-size: 1.5rem;
}

.rx-access__card-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 40px;
	color: var(--rx-blue);
	font-size: 0.9375rem;
	font-weight: var(--fw-medium);
	line-height: 1.3;
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}

.rx-access__card-link:hover {
	color: var(--rx-blue-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rx-access__card-link svg {
	width: 14px;
	height: 14px;
}

/* ---- The band's small table (yellow fever's countries) ----
   540 wide at the right, on the brand blue's hairline with 8 corners;
   the heading row in the pale blue, the rows 53 tall and banded, 14 on
   a 20 line in the ink, 20 of padding. */
.rx-access__table-wrap {
	margin-top: 20px;
	overflow-x: auto;
	border: 1px solid var(--rx-blue);
	border-radius: 8px;
	background: #fcfdff;
}

.rx-access__copy > .rx-access__table-wrap:first-child {
	margin-top: 0;
}

.rx-access__table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	color: var(--rx-ink);
	font-size: 0.875rem;
	line-height: 1.4;
}

.rx-access__table th,
.rx-access__table td {
	padding: 16px 20px;
	text-align: left;
	vertical-align: top;
}

.rx-access__table th {
	background: #e3eefb;
	font-weight: var(--fw-medium);
}

.rx-access__table tbody tr:nth-child(even) {
	background: #f4f8fd;
}

.rx-access__table tbody tr + tr td {
	border-top: 1px solid #e3edf9;
}

/* ---- The clinic table: a heading row across the columns (DTP) ---- */
.rx-clinic__table .rx-clinic__group th {
	padding: 14px 20px;
	background: #e3eefb;
	color: var(--rx-ink);
	font-size: 0.9375rem;
	font-weight: var(--fw-medium);
	text-align: center;
}

.rx-clinic--plain .rx-clinic__table .rx-clinic__group th {
	text-align: center;
}

.rx-clinic--plain .rx-clinic__table tbody tr.rx-clinic__group + tr td {
	border-top: 0;
}

/* ---- Tablet and phones ---- */

@media (max-width: 991.98px) {
	.rx-access--panel .rx-access__inner--cards {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.rx-symptoms__list li {
		font-size: 1.125rem;
	}
}

@media (max-width: 575.98px) {
	.rx-access__cards--link {
		grid-template-columns: minmax(0, 1fr);
	}

	.rx-access--panel .rx-access__inner {
		padding: 24px 16px 32px;
	}

	.rx-symptoms__panel .rx-symptoms__list {
		padding: 16px;
	}

	.rx-symptoms__list li {
		font-size: 1rem;
		gap: 10px;
	}

	.rx-symptoms__tick {
		margin-top: 3px;
	}

	.rx-symptoms__group {
		font-size: 1.125rem;
	}
}