/* Interim Site design layer - loaded last, over the shared frontend styles.
   Owns the interim page components, the band/spacing rhythm and the fixes for
   rules inherited from the shared stylesheets. */

/* smooth scrolling for in-page anchors (e.g. Request Early Access -> #request-access) */
html {
	scroll-behavior: smooth;
}

/* =========================================================
   1. Shared-stylesheet corrections
   ========================================================= */

/* overrides form.css's form * font-size so microcopy links match their text */
p.form-microcopy,
p.form-microcopy * {
	font-size: 12rem;
}

/* article links are orange; buttons inside articles need white text */
section.page-section.interim-content div.content article a.btn-text {
	color: var(--white);
	text-decoration: none;
}

/* pill hugs its text inside flex-column cards */
span.article-tag {
	align-self: flex-start;
	width: fit-content;
}

/* uniform icon box regardless of each SVG's intrinsic size */
section.page-section.how-it-works div.content ol li div.icon {
	height: 80rem;
	margin-bottom: var(--gap-half);
}

section.page-section.how-it-works div.content ol li div.icon img {
	width: 64rem;
	height: 64rem;
	max-height: none;
	object-fit: contain;
}

/* hero images carry borders; keep the border inside the column */
section.page-section.temp-hero div.content div.img-and-tag img,
section.page-section.temp-notify div.content div.img-and-tag img {
	box-sizing: border-box;
}

section.page-section.temp-hero div.content div.img-and-tag img {
	border-width: 15px;
}

/* landing hero: the tag sits ON the image as a white pill, and the section
   keeps at least 120px clearance above the angled blue band that follows
   (the following full-width band pulls up by --margin, hence the +margin) */
section.page-section.temp-hero {
	/* --margin offsets the following band's pull-up; the max() keeps the visible
	   gap to the blue band at 120px minimum even when the rem scale shrinks */
	padding-bottom: calc(var(--margin) + max(120px, 130rem));
}

/* hero typography rhythm */
section.page-section.temp-hero div.content div.text {
	h1 {
		/* one notch under the global 48rem: keeps "PHARMACY TO YOU." on one
		   line so the heading breaks to the same clean 3 lines at every
		   desktop width instead of tipping to 4 near 1440 */
		font-size: 46rem;
	}

	/* the intro: one step above body size, held close to the proof line */
	> p:not(.eyebrow):not(.proof-line) {
		max-width: 560rem;
		margin-bottom: var(--gap-half);
		font-size: 18rem;
		line-height: 1.55;
	}

	/* proof points as a two-column green-tick list */
	ul.proof-points {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--gap-quarter) var(--gap-half);
		max-width: 560rem;
		margin: 0 0 var(--gap-3-4ths);
		list-style: none;

		li {
			position: relative;
			padding-left: calc(22rem + var(--gap-quarter));
			font-size: 14rem;
			font-weight: 600;
			line-height: 1.5;

			&::before {
				content: "";
				position: absolute;
				left: 0;
				top: 1rem;
				width: 22rem;
				height: 19rem;
				background-image: url("img/icon-tick-green.svg");
				background-size: contain;
				background-repeat: no-repeat;
			}
		}
	}

	div.cta-row {
		margin-top: 0;
	}
}

section.page-section.temp-hero div.content div.img-and-tag,
section.page-section.temp-notify div.content div.img-and-tag {
	position: relative;

	p.tag {
		/* straddles the image's bottom edge: half on the photo, half below it */
		position: absolute;
		right: var(--gap);
		bottom: 4rem; /* compensates for the image's border so the split is even */
		transform: translateY(50%);
		margin: 0;
		box-shadow: 0 4rem 14rem rgba(16, 5, 44, 0.22);
	}
}

section.page-section.temp-hero div.content div.img-and-tag p.tag {
	background-color: var(--white);
}

/* notify module: one centred 800px column - heading, intro and form all the
   same width */
section.page-section.temp-notify div.content {
	flex-direction: column;
	align-items: center;

	div.text {
		box-sizing: border-box;
		width: 100%;
		max-width: 600rem;

		h2,
		> p {
			text-align: center;
		}

		> p {
			max-width: none;
		}
	}
}

/* the notify form sits directly on the band (the translucent panel was removed, owner 2026-09-18) */
section.page-section.temp-notify form.request-access {
	box-sizing: border-box;
	max-width: none;
	width: 100%;
	padding: 0;
}

section.page-section.temp-notify div.form-success {
	max-width: none;
	width: 100%;
	box-sizing: border-box;
}

/* =========================================================
   2. Buttons - one colour system
   Primary: orange pill, white text.
   On the orange band: white pill, black text.
   ========================================================= */

form.request-access button.btn-text {
	background-color: var(--orange);
}

section.page-section.closing-cta a.btn-text,
section.page-section.closing-cta form.request-access button.btn-text {
	background-color: var(--white);
	color: var(--black);
}

/* =========================================================
   3. Typography helpers
   ========================================================= */

p.eyebrow {
	margin-bottom: var(--gap-half);
	font-family: Obviously;
	font-style: italic;
	font-weight: 900;
	font-size: 14rem;
	letter-spacing: 1rem;
	text-transform: uppercase;
	color: var(--orange);
}

section.temp-notify p.eyebrow,
section.closing-cta p.eyebrow {
	color: var(--white);
}

p.proof-line {
	font-size: 14rem;
	font-weight: 600;
	color: var(--text-light-3);
}

p.byline {
	margin-bottom: var(--gap-half);
	font-size: 13rem;
	color: var(--text-light-3);

	strong {
		color: var(--black);
	}
}

p.reviewed-by {
	margin-bottom: var(--gap-half);
	padding: var(--gap-quarter) var(--gap-half);
	width: fit-content;
	border-radius: 6rem;
	background-color: var(--white);
	border: 1px solid var(--gray-light);
	font-size: 13rem;
	font-weight: 600;
}

p.policy-meta {
	margin-bottom: var(--gap-half);
	font-size: 13rem;
	color: var(--text-light-3);
}

/* =========================================================
   4. CTA rows and secondary button
   ========================================================= */

div.cta-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gap-half);
	margin-top: var(--gap-half);
	margin-bottom: var(--gap-half);
}

a.btn-secondary {
	display: inline-block;
	height: calc(var(--gap) - 4rem);
	padding: 0 var(--gap);
	border: 2rem solid var(--black);
	border-radius: calc(0.5 * var(--gap));
	font-size: var(--font-size-p);
	font-weight: bold;
	line-height: calc(var(--gap) - 4rem);
	color: var(--black);
	text-decoration: none;
	text-transform: capitalize;
}

/* =========================================================
   5. Request-access forms
   ========================================================= */

form.request-access {
	display: flex;
	flex-direction: column;
	gap: var(--gap-quarter);
	max-width: 420rem;

	input,
	select {
		box-sizing: border-box;
		width: 100%;
		height: 44rem;
		padding: 0 var(--gap-half);
		border: none;
		border-radius: 22rem;
		background-color: var(--white);
		color: var(--black);
		font-family: inherit;
		font-size: 14rem;
	}

	select {
		/* replace the browser's faint native arrow with a clear brand chevron */
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		appearance: none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M2 2l6 6 6-6' stroke='%2310052C' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right var(--gap-half) center;
		background-size: 15rem auto;
		padding-right: calc(var(--gap-half) + 26rem);
	}

	select:invalid {
		color: var(--text-light-3);
	}

	button.btn-text {
		width: 100%;
		box-sizing: border-box;
		height: 44rem;
		line-height: 44rem;
		border-radius: 22rem;
		text-align: center;
	}

	p.form-microcopy {
		margin: var(--gap-quarter) 0 0;
	}
}

section.page-section:not(.temp-notify):not(.closing-cta) form.request-access {
	input,
	select {
		border: 1px solid var(--gray-dark);
	}
}

p.form-microcopy {
	line-height: 1.6;
	opacity: 0.9;

	a {
		color: inherit;
		text-decoration: underline;
	}
}

div.form-success {
	display: none;
	box-sizing: border-box;
	max-width: 420rem;
	padding: var(--gap-half);
	border-radius: 12rem;
	background-color: var(--white);
	border: 1px solid var(--gray-light);
	color: var(--black);

	h4 {
		margin-bottom: var(--gap-quarter);
		color: var(--orange);
	}

	p {
		margin: 0;
		font-size: 14rem;
	}
}

/* =========================================================
   6. Landing page bands
   ========================================================= */

/* the steps band sits on soft pink so it reads as its own section */
section.page-section.how-it-works.band-pink {
	background-color: var(--pink-light);
}

/* the blue band keeps clear space before the section that follows
   (--margin offsets the next full-width band's pull-up) */
section.page-section.temp-notify {
	padding-bottom: calc(var(--margin) + max(120px, 120rem));
}

/* re-applies main.css's adjacent-band pull-up (its + selector cannot see
   past the marquee div); the clipped wedge must overlap the hero band */
div.launch-marquee + section.page-section.temp-notify {
	margin-top: calc(-1 * var(--margin));
}

/* angled "Launching Soon" marquee riding the blue band's top edge.
   The strip is rotated to the same slope as the band's clip-path
   (60rem rise over the full width) and overlaps the section seam. */
div.launch-marquee {
	position: relative;
	z-index: 3;
	height: 0;

	div.strip {
		position: absolute;
		left: -4vw;
		/* centres the strip on the band's angled edge: the band is pulled up
		   by --margin (80rem) and its edge midpoint sits 30rem below its top;
		   half the strip height (~24rem) completes the offset */
		top: calc(-1 * var(--margin) + 30rem - 24rem);
		width: 108vw;
		padding: 12rem 0;
		background-color: #0B0322; /* midnight, a step darker than --black */
		/* exactly the blue band's clip slope (60rem rise over 100vw);
		   the static value is the fallback for browsers without css trig */
		transform: rotate(-2.4deg);
		transform: rotate(atan2(-60rem, 100vw));
		overflow: hidden;
	}

	div.marquee-track {
		display: flex;
		flex-direction: row;
		width: max-content;
		animation: launch-marquee 56s linear infinite;
	}

	div.marquee-group {
		display: flex;
		flex-direction: row;
		flex-shrink: 0;
	}

	span {
		padding-right: 56rem;
		font-family: Obviously;
		font-style: italic;
		font-weight: 900;
		font-size: 24rem;
		line-height: 1;
		text-transform: uppercase;
		white-space: nowrap;
		color: var(--white);
	}
}

@keyframes launch-marquee {
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	div.launch-marquee div.marquee-track {
		animation: none;
	}
}

/* nav-locked: CTA-styled spans keep the button look but are inert */
span.btn-text {
	display: inline-block;
	background-color: var(--orange);
	height: var(--gap);
	padding: 0 var(--gap);
	border-radius: calc(0.5 * var(--gap));
	font-size: var(--font-size-p);
	font-weight: bold;
	line-height: var(--gap);
	color: var(--white);
	text-transform: capitalize;
	cursor: default;
}

/* combined eScript intro (left) + step carousel (right) on white.
   120px visible above and below: the following band pulls up by --margin,
   so the bottom padding carries that offset */
section.page-section.escript-steps {
	--band-pad-top: max(120px, 120rem);
	--band-pad-bottom: calc(var(--margin) + max(120px, 120rem));
	background-color: var(--white);
	padding-top: var(--band-pad-top);
	padding-bottom: var(--band-pad-bottom);

	div.content {
		display: flex;
		flex-direction: row;
		align-items: stretch; /* the divider spans the whole row */
		gap: var(--gap);

		div.text {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;

			h2 {
				margin-bottom: var(--gap-half);
			}

			> p {
				max-width: 520rem;
				line-height: 1.6;

				&:not(:last-child) {
					margin-bottom: var(--gap-half);
				}
			}
		}

		/* uncontained, but tied to the intro column: a hairline divider and
		   matching left alignment make the two halves read as one unit */
		div.steps-carousel {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			box-sizing: border-box;
			max-width: none;
			/* the column reaches into the band padding (negative margins, same padding back) so the
			   divider runs from the top edge of the band to its bottom edge */
			/* the trust band below pulls up by --margin and its white wave paints over this section, so
			   the column sits above it (z-index) and stops 26rem under the band top, where the wave surface
			   crosses the divider (mid-width of the wave path) */
			--wave-meet: calc(var(--band-pad-bottom) - var(--margin) + 26rem);
			position: relative;
			z-index: 2;
			margin-top: calc(-1 * var(--band-pad-top));
			margin-bottom: calc(-1 * var(--wave-meet));
			padding: var(--band-pad-top) 0 var(--wave-meet) var(--margin);
			border-left: 1px solid var(--gray-light);

			div.carousel-viewport {
				overflow: hidden;
			}

			/* slides stack and cross-fade */
			ol.carousel-track {
				display: grid;
				margin: 0;
				list-style: none;

				li {
					grid-area: 1 / 1;
					box-sizing: border-box;
					text-align: left;
					opacity: 0;
					transition: opacity 0.4s ease;
					pointer-events: none;

					&.active {
						opacity: 1;
						pointer-events: auto;
					}

					div.icon {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 128rem;
						height: 128rem;
						margin: 0 0 var(--gap-half);
						border-radius: 50%;
						background-color: var(--pink-light);
						box-shadow: inset 0 0 0 6rem var(--white), 0 0 0 1px var(--gray-light);

						img {
							width: 68rem;
							height: 68rem;
							object-fit: contain;
						}
					}

					h4 {
						margin-bottom: var(--gap-quarter);
						font-size: 28rem;
						line-height: 1.2;
					}

					p {
						margin: 0;
						max-width: 520rem;
						min-height: 116rem;
						font-size: 18rem;
						line-height: 1.6;
						color: var(--text-light-3);
					}
				}
			}

			/* numbered step dots */
			div.carousel-dots {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				gap: var(--gap-half);
				margin-top: var(--gap);

				button {
					width: 48rem;
					height: 48rem;
					padding: 0;
					border: 2rem solid var(--gray-light);
					border-radius: 50%;
					background-color: var(--white);
					color: var(--text-light-3);
					font-family: inherit;
					font-size: 17rem;
					font-weight: bold;
					line-height: 1;
					cursor: pointer;
					transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;

					&.active {
						background-color: var(--orange);
						border-color: var(--orange);
						color: var(--white);
					}

					&:hover:not(.active) {
						border-color: var(--orange);
						color: var(--orange);
					}
				}
			}
		}
	}
}

section.page-section.how-it-works div.content ol li {
	box-sizing: border-box;
	padding: var(--gap-half);
	background-color: var(--white);
	border: 1px solid var(--gray-light);
	border-radius: 16rem;
}

section.page-section.temp-escript {
	div.content {
		h2 {
			margin-bottom: var(--gap-half);
		}

		> p {
			max-width: 560rem;
			line-height: 1.6;

			&:not(:last-child) {
				margin-bottom: var(--gap-half);
			}
		}
	}
}

/* secondary, narrower page container: content capped at 1000rem, centred */
div.page-section div.content.narrow,
section.page-section div.content.narrow {
	width: 1000rem;
	max-width: var(--content-width-max);
}

/* Our Story: roomier band on the narrow container */
section.page-section.our-story {
	padding-top: max(120px, 120rem);
	padding-bottom: max(120px, 120rem);
	/* split band: navy left 65% holds the story; the right 35% is the store photo (--story-bg, set
	   inline from landing.ourStory.image). The narrow container (1000rem) is centred, so its 65%
	   column edge sits at 50% + 0.15 x 1000rem of the viewport; the navy layer stops there and the
	   photo layer underneath shows through */
	background-color: var(--black);
	background-image:
		linear-gradient(90deg, var(--black) calc(50% + 150rem), transparent calc(50% + 150rem)),
		var(--story-bg);
	background-size: auto, cover;
	background-position: 0 0, right center;
	background-repeat: no-repeat;
	color: var(--white);

	div.content.narrow {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0;

		> div:first-child {
			flex: 0 0 65%;
			box-sizing: border-box;
			padding-right: var(--margin);

			h2 {
				margin-bottom: var(--gap-half);
				color: var(--orange);
			}

			p {
				max-width: 620rem;
				line-height: 1.7;
				color: rgba(255, 255, 255, 0.85);

				&:not(:last-child) {
					margin-bottom: var(--gap-half);
				}
			}

			/* lead-in sentence */
			p:first-of-type {
				font-size: 21rem;
				line-height: 1.5;
				color: var(--white);
			}

			/* closing line as a pull quote */
			p:last-child {
				margin-top: var(--gap);
				padding-left: var(--gap-half);
				border-left: 4rem solid var(--orange);

				strong {
					font-family: Obviously;
					font-style: italic;
					font-weight: 900;
					font-size: 24rem;
					line-height: 1.3;
					text-transform: uppercase;
					color: var(--white);
				}
			}
		}

	}
}

@media screen and (max-width: 767px) {
	/* stacked: navy story on top, the pale mascot block runs full width to the band bottom */
	section.page-section.our-story {
		background-image: none;
		padding-bottom: 0;

		div.content.narrow {
			flex-direction: column;
			gap: var(--gap);

			> div:first-child {
				flex-basis: auto;
				padding-right: 0;
			}

		}

		/* the photo becomes a full-width block under the story */
		&::after {
			content: "";
			display: block;
			width: 100vw;
			height: 260rem;
			margin-top: var(--gap);
			background-image: var(--story-bg);
			background-size: cover;
			background-position: center;
		}
	}
}

/* trust strip: white cards on the pale orange band */
section.page-section.trust-strip {
	position: relative;
	padding-top: calc(var(--margin) + 40rem); /* room for the wave */
	background-color: var(--pink-light);

	/* slight wave along the top edge: a white shape with a wavy bottom, stretched to the band width */
	&::before {
		content: "";
		position: absolute;
		top: -1px;
		left: 0;
		right: 0;
		height: 56rem;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1440 V20 C1180 58 940 -8 720 26 C500 60 260 8 0 32 Z' fill='%23ffffff'/%3E%3C/svg%3E");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		pointer-events: none;
	}

	div.content > ul {
		display: flex;
		flex-direction: row;
		gap: var(--gap);
		list-style: none;
		margin: 0;

		li {
			flex: 1;
			box-sizing: border-box;
			padding: var(--gap);
			background-color: var(--white);
			border-radius: 16rem;
			box-shadow: 0 10rem 30rem rgba(16, 5, 44, 0.07);
			text-align: center;

			h3 {
				margin-bottom: var(--gap-quarter);
				font-family: Obviously;
				font-style: italic;
				text-transform: uppercase;
				font-size: 18rem;
				color: var(--orange);
			}

			p {
				margin: 0;
				font-size: 14rem;
				line-height: 1.5;
			}
		}
	}
}

section.page-section.featured-article.band-pink {
	background-color: var(--pink-light);
}

/* left-align against hub-articles.css's centred default */
section.page-section.featured-article div.content div.text a.btn-text {
	margin-left: 0;
}

/* =========================================================
   7. Closing CTA band
   ========================================================= */

section.page-section.closing-cta {
	background-color: var(--orange);
	color: var(--white);

	div.content {
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: var(--margin);

		div.text {
			flex: 1;

			h2 {
				color: var(--white);
			}

			p {
				margin-bottom: 0;
				line-height: 1.6;
			}
		}

		div.form-wrap {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: flex-start;

			div.cta-row {
				margin: 0;
			}
		}
	}
}

/* =========================================================
   8. Content-page hero (two columns, illustration right)
   ========================================================= */

section.page-section.interim-hero {
	background-color: var(--pink-light);

	div.content {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: var(--margin);

		div.hero-text {
			flex: 1.2;

			h1 {
				margin-bottom: var(--gap-half);
				color: var(--orange);
			}

			p.intro {
				max-width: 640rem;
				margin-bottom: var(--gap-half);
				line-height: 1.6;
			}
		}

		div.hero-art {
			flex: 1;
			display: flex;
			justify-content: center;

			img {
				width: 100%;
				max-width: 460rem;
				height: auto;
				border-radius: 24rem;
			}

			/* photos crop to a fixed frame; illustrations keep their own aspect */
			img[src*="/photos/"] {
				aspect-ratio: 4 / 3;
				object-fit: cover;
			}
		}
	}
}

/* =========================================================
   9. Content pages
   ========================================================= */

section.page-section.interim-content {
	div.content {
		max-width: 860rem;

		article {
			h2 {
				font-family: 'Inter', sans-serif;
				font-style: normal;
				text-transform: none;
				font-size: 26rem;
				margin-top: var(--gap);
				margin-bottom: var(--gap-half);
				padding-top: var(--gap-half);
				border-top: 1px solid var(--pink-light);
			}

			h2:first-child {
				margin-top: 0;
				padding-top: 0;
				border-top: none;
			}

			h3 {
				font-size: 18rem;
				margin-top: var(--gap-half);
				margin-bottom: var(--gap-quarter);
			}

			ul, ol {
				margin-bottom: var(--gap-half);

				li {
					margin-bottom: var(--gap-quarter);
					line-height: 1.6;
				}
			}

			p {
				line-height: 1.7;

				&:not(:last-child) {
					margin-bottom: var(--gap-half);
				}
			}

			a {
				color: var(--orange);
			}
		}
	}
}

/* callout used for emergency / important notes */
div.callout {
	box-sizing: border-box;
	padding: var(--gap-half) var(--gap);
	margin-bottom: var(--gap);
	border-left: 4rem solid var(--orange);
	border-radius: 12rem;
	background-color: var(--pink-light);

	h4 {
		margin-bottom: var(--gap-quarter);
		color: var(--orange);
	}

	p, li {
		font-size: 14rem;
		line-height: 1.6;
	}

	p:not(:last-child) {
		margin-bottom: var(--gap-quarter);
	}

	ul {
		margin: 0;
		list-style: none;

		li:not(:last-child) {
			margin-bottom: var(--gap-quarter);
		}
	}
}

/* numbered step list */
ol.steps {
	list-style: none;
	counter-reset: step;
	margin-bottom: var(--gap-half);

	li {
		position: relative;
		counter-increment: step;
		padding-left: calc(44rem + var(--gap-half));
		margin-bottom: var(--gap-half);
		line-height: 1.6;

		&::before {
			content: counter(step);
			position: absolute;
			left: 0;
			top: 0;
			width: 44rem;
			height: 44rem;
			border-radius: 50%;
			background-color: var(--orange);
			color: var(--white);
			font-family: Obviously;
			font-style: italic;
			font-weight: 900;
			font-size: 20rem;
			text-align: center;
			line-height: 44rem;
		}

		strong {
			display: block;
			margin-bottom: 2rem;
		}
	}
}

/* inside the article column the generic list rule (interim-content article ol li) outranks ol.steps;
   the number circle is 44rem, so an item can never be shorter than it */
section.page-section.interim-content div.content article ol.steps li {
	min-height: 44rem;
	margin-bottom: var(--gap-half);
	padding-top: 9rem;
	padding-left: calc(44rem + var(--gap-half));
}

/* article extras */
div.article-links {
	margin-top: var(--gap);
	padding: var(--gap-half) var(--gap);
	border: 1px solid var(--gray-light);
	border-radius: 16rem;
	background-color: var(--pink-light);

	h4 {
		margin-bottom: var(--gap-quarter);
	}

	ul {
		display: flex;
		flex-wrap: wrap;
		gap: var(--gap-quarter);
		list-style: none;
		margin: 0;

		li {
			margin: 0;
		}
	}
}

/* related-reading links are white pills; the selector must outrank the article anchor rules */
section.page-section div.content article div.article-links ul li a,
div.article-links ul li a {
	display: inline-block;
	padding: 10rem 20rem;
	border: 1px solid var(--gray-light);
	border-radius: 999rem;
	background-color: var(--white);
	color: var(--black);
	font-size: 14rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;

	&:hover {
		border-color: var(--orange);
		color: var(--orange);
	}
}

ul.sources {
	list-style: none;
	margin: 0 0 var(--gap-half);

	li {
		font-size: 13rem;
		line-height: 1.6;
		color: var(--text-light-3);
	}
}

p.article-disclaimer {
	font-size: 12rem;
	color: var(--text-light-3);
	line-height: 1.6;
}

/* comparison table */
table.compare {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 40rem;
	font-size: 14rem;

	th, td {
		padding: 14rem;
		border: 1px solid var(--gray-light);
		text-align: left;
		vertical-align: top;
		line-height: 1.6;
	}

	th {
		background-color: var(--pink-light);
	}
}

div.table-scroll {
	overflow-x: auto;
}

/* =========================================================
   10. FAQ bands - pink band, white card
   ========================================================= */

section.page-section.faq {
	background-color: var(--pink-light);

	/* same column as the article body (interim-content) so heading and card line up with the page copy */
	div.content {
		max-width: 860rem;
	}

	div.content > h2 {
		text-align: left;
		font-family: 'Inter', sans-serif;
		font-style: normal;
		text-transform: none;
		font-size: 26rem;
		margin-bottom: var(--gap-half);
	}

	/* beats the content-pages.css 640rem centred rule */
	div.content ul.faq-items {
		box-sizing: border-box;
		margin: 0;
		width: 100%;
		max-width: none;
		padding: var(--gap-quarter) var(--gap);
		background-color: var(--white);
		border: 1px solid var(--gray-light);
		border-radius: 16rem;
		box-shadow: 0 8rem 24rem rgba(16, 5, 44, 0.06);

		/* the card provides the closing edge; no divider under the last question */
		li:last-child {
			border-bottom: none;
		}

		li div.details {
			line-height: 1.6;
		}
	}
}

/* consecutive FAQ bands flow together as one region; the top padding is the gap between a card and the next heading */
section.page-section.faq + section.page-section.faq {
	margin-top: calc(-1 * var(--margin));
	padding-top: 60rem;
}

/* the band after the last FAQ group keeps the group's bottom padding instead of collapsing onto the card */
section.page-section.faq + section.page-section.full-width-bg:not(.faq) {
	margin-top: 0;
}

/* =========================================================
   11. Contact page
   ========================================================= */

section.page-section.page-contact {
	div.content {
		div.contact-columns {
			display: flex;
			flex-direction: row;
			gap: var(--gap);

			> div:first-child {
				flex-grow: 1;
			}

			form.contact-form {
				box-sizing: border-box;
				padding: var(--gap);
				background-color: var(--white);
				border: 1px solid var(--gray-light);
				border-radius: 16rem;

				h3 {
					margin-bottom: var(--gap-half);
				}

				div.form-row {
					margin-bottom: var(--gap-3-4ths);
				}
			}
		}
	}
}

section.page-section.page-contact div.form-success {
	max-width: none;
	padding: var(--gap);
}

aside.contact-cards div.card {
	background-color: var(--pink-light);
	border: 1px solid var(--gray-light);
}

/* =========================================================
   12. Footer
   ========================================================= */

footer#temp-footer {
	background-color: var(--white); /* owner 2026-09-18: footer on white */
	border-top: 4rem solid var(--orange);
	gap: var(--gap-half);

	p.brand-line {
		margin: 0;
		font-family: Obviously;
		font-style: italic;
		font-weight: 900;
		text-transform: uppercase;
		font-size: 14rem;
	}

	p.trust-line {
		margin: 0;
		font-size: 13rem;
		color: var(--text-light-3);
	}

	nav.site-links {
		ul {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			gap: var(--gap-half);
			list-style: none;
			margin: 0;
			font-size: 13rem;
			font-weight: 600;
		}
	}

	p.disclaimer {
		max-width: 720rem;
		margin: 0;
		padding: 0 var(--gap);
		font-size: 11rem;
		line-height: 1.6;
		text-align: center;
		color: var(--text-light-3);
	}
}

/* =========================================================
   13. Mobile
   ========================================================= */

@media screen and (max-width: 767px) {
	section.page-section.trust-strip {
		div.content > ul {
			flex-direction: column;
			gap: var(--gap-half);
		}
	}

	section.page-section.closing-cta {
		div.content {
			flex-direction: column;
			align-items: stretch;
			gap: var(--gap);

			div.form-wrap {
				width: 100%;
				align-items: stretch;
			}
		}
	}

	section.page-section.interim-hero {
		div.content {
			flex-direction: column-reverse;
			gap: var(--gap);

			div.hero-art img {
				max-width: 100%;
			}
		}
	}

	form.request-access {
		max-width: none;
	}

	div.cta-row {
		a.btn-text,
		a.btn-secondary {
			box-sizing: border-box;
			width: 100%;
			text-align: center;
		}
	}

	/* mobile h1 step for content-page heroes (long headlines overflow at 48rem) */
	section.page-section.interim-hero h1 {
		font-size: 32rem;
	}

	/* landing hero heading, mobile scale */
	section.page-section.temp-hero div.content div.text h1 {
		font-size: 30rem;
	}

	/* section band spacing, mobile scale */
	section.page-section.temp-hero {
		padding-bottom: calc(var(--margin) + 40rem);
	}

	section.page-section.temp-notify {
		padding-top: 100rem;   /* clears the clip wedge + overlaid marquee */
		padding-bottom: calc(var(--margin) + 50rem);
	}

	section.page-section.escript-steps {
		padding-top: 64rem;
		padding-bottom: calc(var(--margin) + 64rem);
	}

	section.page-section.our-story {
		padding-top: 64rem;
		padding-bottom: 64rem;

		div.content > img {
			max-height: 260rem;
			width: auto;
			align-self: center;
			margin: 0 auto;
		}
	}

	/* ---- mobile design system: wider gutters, centred display content,
	   left-aligned long-form, consistent block rhythm ---- */

	:root {
		/* main.css gives ~18px side gutters; too tight on a phone */
		--content-width-max: calc(100% - 56rem);
	}

	/* hero: centred composition */
	section.page-section.temp-hero div.content {
		gap: 32rem;

		div.text {
			text-align: center;

			p.eyebrow {
				margin-bottom: var(--gap-half);
			}

			h1 {
				margin-bottom: var(--gap-half);
			}

			> p:not(.eyebrow) {
				margin-bottom: var(--gap-3-4ths);
				line-height: 1.65;
			}

			ul.proof-points {
				width: fit-content;
				margin: 0 auto var(--gap-3-4ths);
				text-align: left;
				gap: 10rem;
			}

			div.cta-row {
				gap: 12rem;
			}
		}
	}

	/* eScript + carousel: centred, with matching rhythm */
	section.page-section.escript-steps div.content {
		gap: 48rem;

		div.text {
			text-align: center;

			> p {
				max-width: none;
				margin-bottom: var(--gap-3-4ths);
			}

			div.cta-row a.btn-text,
			div.cta-row span.btn-text {
				box-sizing: border-box;
				width: 100%;
				text-align: center;
			}
		}

		div.steps-carousel {
			ol.carousel-track li {
				text-align: center;

				div.icon {
					margin: 0 auto var(--gap-half);
				}

				p {
					min-height: 70rem;
				}
			}

			div.carousel-dots {
				justify-content: center;
			}
		}
	}

	/* story: centred heading over left-aligned reading text */
	section.page-section.our-story h2 {
		text-align: center;
	}

	/* closing CTA: centred pitch above the form */
	section.page-section.closing-cta div.content div.text {
		text-align: center;
	}

	/* footer: roomier stack, tidy link rows */
	footer#temp-footer {
		gap: var(--gap);
		padding: var(--gap-2) 0;

		nav.site-links ul {
			padding: 0 var(--gap);
			gap: 10rem 22rem;
		}

		nav.policies ul {
			flex-direction: column;
			gap: 8rem;
			padding: 0 var(--gap);
		}
	}

	/* same mobile sizing as a.btn-text/button.btn-text (30rem incl. border) */
	a.btn-secondary {
		height: 26rem;
		padding: 0 30rem;
		border-radius: 15rem;
		font-size: 14rem;
		line-height: 26rem;
	}

	section.page-section.how-it-works div.content ol {
		flex-direction: column;
		gap: var(--gap-half);
	}

	section.page-section.temp-hero div.content div.text ul.proof-points {
		grid-template-columns: 1fr;
	}

	section.page-section.escript-steps div.content {
		flex-direction: column;
		align-items: stretch;
		gap: var(--gap);

		div.steps-carousel {
			max-width: none;
			margin: 0;
			padding: 0;
			border-left: none;
		}
	}

	/* mobile clip slope is 30rem over 100vw -> steeper angle; band pull-up is
	   the mobile --margin (40rem), edge midpoint 15rem, half strip ~20rem */
	div.launch-marquee div.strip {
		top: calc(-1 * var(--margin) + 15rem - 20rem);
		transform: rotate(-4.15deg);
		transform: rotate(atan2(-30rem, 100vw));
		padding: 8rem 0;
	}

	span.btn-text {
		height: 30rem;
		padding: 0 30rem;
		border-radius: 15rem;
		font-size: 14rem;
		line-height: 30rem;
	}

	section.page-section.faq div.content ul.faq-items {
		padding: var(--gap-quarter) var(--gap-half);
	}
}

/* =========================================================
   14. Hero photo backgrounds
   The photo IS the hero art: the illustration is hidden, a dark navy
   gradient fades from the text column into the picture and the hero text
   goes light. --hero-bg is set inline on the section from the page's
   heroBackground content value. The hero keeps only eyebrow, heading and
   CTA; supporting copy renders in the lead band below (section 16).
   ========================================================= */

section.page-section.has-bg {
	--hero-shade: 16, 5, 44; /* --black as rgb parts */
	background-color: var(--black);
	background-image:
		linear-gradient(90deg,
			rgba(var(--hero-shade), 0.9) 0%,
			rgba(var(--hero-shade), 0.8) 36%,
			rgba(var(--hero-shade), 0.45) 60%,
			rgba(var(--hero-shade), 0.1) 100%),
		var(--hero-bg);
	background-size: cover;
	background-position: center 32%;
	background-repeat: no-repeat;
	color: var(--white);
}

/* light text on the shade; the full paths outrank the pink-band colour rules */
section.page-section.has-bg div.content {
	p.eyebrow {
		color: var(--orange);
	}

	p,
	li {
		color: var(--white);
	}

	p.policy-meta,
	p.byline,
	p.reviewed-by,
	p.form-microcopy,
	p.proof-line {
		color: rgba(255, 255, 255, 0.8);
	}

	a:not(.btn-text) {
		color: var(--white);
	}

	a.btn-secondary {
		border-color: var(--white);
		color: var(--white);
	}
}

section.page-section.interim-hero.has-bg div.content div.hero-text h1,
section.page-section.temp-hero.has-bg div.content div.text h1 {
	color: var(--white);
}

section.page-section.interim-hero.has-bg {
	justify-content: center;

	div.content {
		min-height: 380rem;

		div.hero-text {
			flex: 0 1 640rem;
		}

		div.hero-art {
			display: none;
		}
	}
}

/* landing: the picture replaces the capsules image but the tag pill stays;
   the clearance for the angled marquee band moves to the lead band below */
section.page-section.temp-hero.has-bg {
	/* symmetric padding + flex centring: the content sits in the vertical middle of the 720px band */
	padding: var(--margin) 0;
	box-sizing: border-box;
	min-height: 720px; /* owner: banner never shorter than 720px */
	justify-content: center;

	div.content div.img-and-tag {
		flex: 1;
		align-self: stretch;
		min-height: 340rem;

		img {
			display: none;
		}

	}
}

/* =========================================================
   15. Header
   page-temp-home.css paints the header pink-light; the owner wants the
   band behind the logo white
   ========================================================= */

header#temp-header {
	padding: 16rem 0; /* tighter than page-temp-home.css (40rem): shorter band, larger logo */
	background-color: var(--white);

	img {
		width: 220rem;
	}
}

/* =========================================================
   16. Lead bands - the supporting copy from the hero, moved below it so
   it can wrap and split freely on a white band
   ========================================================= */

section.page-section.page-lead {
	/* adjacent sections collapse by one --margin (main.css); the bottom padding is what gets eaten, never the copy */
	padding-bottom: var(--margin);
	background-color: var(--white);

	div.content {
		max-width: 860rem;
	}

	p.lead {
		margin: 0 0 var(--gap-quarter);
		padding-left: var(--gap-half);
		border-left: 4rem solid var(--orange);
		font-size: 22rem;
		font-weight: 500;
		line-height: 1.5;
		color: var(--black);

		a {
			color: var(--orange);
		}
	}

	p.proof-line {
		margin: 0;
	}

	/* two even columns, larger ticks vertically centred on the text */
	ul.proof-points {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--gap-quarter) var(--gap);
		list-style: none;
		margin: var(--gap-half) 0 0;

		li {
			position: relative;
			padding-left: calc(28rem + var(--gap-quarter));
			font-size: 17rem;
			font-weight: 600;
			line-height: 28rem;

			&::before {
				content: "";
				position: absolute;
				left: 0;
				top: 2rem;
				width: 28rem;
				height: 24rem;
				background-image: url("img/icon-tick-green.svg");
				background-size: contain;
				background-repeat: no-repeat;
			}
		}
	}
}

/* the landing lead carries the clearance the hero used to hold above the angled band */
section.page-section.page-lead.landing-lead {
	padding-bottom: calc(var(--margin) + max(120px, 130rem));
}

/* =========================================================
   17. Content sections are white (owner 2026-09-18); the FAQ card keeps
   its border for definition
   ========================================================= */

section.page-section.interim-content,
section.page-section.faq,
section.page-section.page-contact,
section.page-section.article-cards-band {
	background-color: var(--white);
}

@media screen and (max-width: 767px) {
	/* stacked layout: shade from the top (text) down into the picture */
	section.page-section.has-bg {
		background-image:
			linear-gradient(180deg,
				rgba(var(--hero-shade), 0.9) 0%,
				rgba(var(--hero-shade), 0.82) 55%,
				rgba(var(--hero-shade), 0.15) 100%),
			var(--hero-bg);
		background-position: 70% center;
	}

	/* the desktop flex basis (640rem) would become HEIGHT in the stacked column layout;
	   a short strip below the text shows the picture */
	section.page-section.interim-hero.has-bg div.content {
		min-height: 0;
		padding-bottom: 150rem;

		div.hero-text {
			flex: 0 1 auto;
		}
	}

	section.page-section.temp-hero.has-bg div.content div.img-and-tag {
		min-height: 120rem;
	}

	section.page-section.page-lead p.lead {
		font-size: 18rem;
	}
}


/* landing tag pill: leads the text column (moved off the picture corner, owner 2026-09-18) */
section.page-section.temp-hero.has-bg div.content div.text p.hero-tag {
	position: static;
	display: inline-block;
	margin: 0 0 var(--gap-half);
	padding: var(--gap-quarter) var(--gap-half);
	border-radius: 6rem;
	font-family: Obviously;
	font-style: italic;
	font-weight: 900;
	font-size: 14rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	transform: none;
	background-color: var(--white);
	color: var(--black); /* the light-text rule would hide it on its white pill */
	box-shadow: 0 4rem 14rem rgba(16, 5, 44, 0.22);
}

/* belt and braces: a stale build that still renders the tag inside the picture column must not show it */
section.page-section.temp-hero.has-bg div.content div.img-and-tag p.tag {
	display: none;
}

/* =========================================================
   19. Landing lead band: area rotator + breathing room
   ========================================================= */

section.page-section.page-lead.landing-lead {
	p.area-rotator {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0 12rem;
		margin: 0 0 var(--gap);
		padding-left: 0;
		font-size: 18rem;
		line-height: 1.4;
		color: var(--text-light-3);

		span.prefix:empty {
			display: none;
		}

		/* the area names stack in one cell and cross-fade */
		span.areas {
			display: inline-grid;

			span.area {
				grid-area: 1 / 1;
				font-family: Obviously;
				font-style: italic;
				font-weight: 900;
				font-size: 30rem;
				line-height: 1.2;
				text-transform: uppercase;
				white-space: nowrap;
				color: var(--black);
				text-decoration: underline;
				text-decoration-color: var(--orange);
				text-decoration-thickness: 4rem;
				text-underline-offset: 6rem;
				opacity: 0;
				transition: opacity 0.6s ease;

				&.active {
					opacity: 1;
				}
			}
		}
	}

	/* the suburb, the lead copy and the ticks share one left edge; the orange bar hangs outside it */
	p.lead {
		margin-bottom: var(--gap);
		margin-left: calc(-1 * (var(--gap-half) + 4rem));
	}

	ul.proof-points {
		margin-top: 0;
		padding-left: 0;
		gap: var(--gap-half) var(--gap);
	}
}

@media screen and (max-width: 767px) {
	section.page-section.page-lead.landing-lead {
		p.area-rotator {
			padding-left: 0;
			font-size: 16rem;

			span.areas span.area {
				font-size: 26rem;
			}
		}

		p.lead {
			margin-left: 0; /* keeps the bar inside the mobile gutter */
		}

		ul.proof-points {
			padding-left: 0;
		}
	}
}

/* Our Story safety net: a build that still renders the story image as an element (old view) must not
   show it boxed in the right column; the photo is the section background and fills that column */
section.page-section.our-story div.content > img,
section.page-section.our-story div.content > div.mascot {
	display: none;
}

/* =========================================================
   20. Client footer-page revisions (pr-design-preview-update-12/footer-pages/footer-review.css,
   merged verbatim 2026-10-12). Contact form in a bordered panel, pink cards, mobile stacking.
   ========================================================= */

/* Scoped source-page adjustments; landing CSS is isolated in the parent document. */
html,body{overflow-x:hidden}body{min-height:0}
header#temp-header a{display:block}header#temp-header img{height:auto}
footer#temp-footer{border-top:2rem solid #f15c22}
section.page-section.page-contact .contact-columns>div{flex:1;min-width:0}
section.page-section.page-contact .contact-columns form.contact-form{border:1rem solid #e9e5e4;border-radius:12rem;padding:40rem}
section.page-section.page-contact .contact-columns aside.contact-cards .card{background:#fff4ee}
section.page-section.page-contact .contact-columns form.contact-form h3{font-family:Inter,Arial,sans-serif;font-size:24rem;font-style:normal;font-weight:900;margin-bottom:24rem}
section.page-section.page-contact .contact-columns form.contact-form label{min-width:0}
section.page-section.page-contact .contact-columns form.contact-form .form-microcopy{margin:16rem 0}
section.page-section.page-contact .contact-columns form.contact-form button{cursor:pointer}
.form-message{font-size:14rem;line-height:1.6;margin-top:16rem!important}
.review-back{display:inline-block;font:600 14rem Inter,Arial,sans-serif;color:#f15c22;margin-bottom:20rem!important}
@media(max-width:767px){section.page-section.page-contact .contact-columns form.contact-form{padding:24rem}}

/* Contact mobile repair: outrank the later desktop-row rule in interim.css. */
@media screen and (max-width:767px){
 body[data-page="contact"] section.page-section.page-contact div.content div.contact-columns{
  display:flex;flex-direction:column;align-items:stretch;gap:24rem;width:100%;min-width:0;
 }
 body[data-page="contact"] section.page-section.page-contact div.content div.contact-columns > div:first-child{
  flex:0 0 auto;width:100%;max-width:100%;min-width:0;
 }
 body[data-page="contact"] section.page-section.page-contact div.content div.contact-columns form.contact-form{
  display:block;box-sizing:border-box;width:100%;max-width:100%;min-width:0;padding:24rem;
 }
 body[data-page="contact"] section.page-section.page-contact div.content div.contact-columns form.contact-form div.form-row{
  display:flex;flex-direction:column;align-items:stretch;width:100%;min-width:0;gap:16rem;margin-bottom:20rem;
 }
 body[data-page="contact"] section.page-section.page-contact div.content div.contact-columns form.contact-form div.form-row label{
  flex:0 0 auto;box-sizing:border-box;width:100%;max-width:100%;min-width:0;overflow-wrap:anywhere;
 }
 body[data-page="contact"] section.page-section.page-contact div.content div.contact-columns form.contact-form input,
 body[data-page="contact"] section.page-section.page-contact div.content div.contact-columns form.contact-form select,
 body[data-page="contact"] section.page-section.page-contact div.content div.contact-columns form.contact-form textarea{
  box-sizing:border-box;display:block;width:100%;max-width:100%;min-width:0;font-size:16rem;
 }
 body[data-page="contact"] section.page-section.page-contact div.content div.contact-columns form.contact-form button.btn-text{
  box-sizing:border-box;width:100%;max-width:100%;white-space:normal;
 }
 body[data-page="contact"] section.page-section.page-contact div.content div.contact-columns aside.contact-cards{
  display:flex;flex-direction:column;position:static;flex:0 0 auto;width:100%;max-width:100%;min-width:0;align-self:stretch;gap:16rem;
 }
 body[data-page="contact"] section.page-section.page-contact div.content div.contact-columns aside.contact-cards div.card{
  box-sizing:border-box;position:static;width:100%;max-width:100%;min-width:0;overflow-wrap:anywhere;
 }
 body[data-page="contact"] .form-microcopy{overflow-wrap:anywhere}
}