/*
 * The content pages and the 404: About, FAQ, Contact, COA library, the six
 * legal pages.
 *
 * PORTED, 11/09/26, from the live sections' own stylesheets and inline style
 * blocks: section-novapep-about-hero.css, section-novapep-about.css,
 * section-novapep-faq.css, section-contact-form.css, section-novapep-coa.css,
 * the style block of novapep-legal.liquid and of main-404.liquid, plus the
 * Dawn rules those pages' elements carry (.page-width, .rte, .field, .select,
 * the form messages) and the shared .novapep-sequence__* convention from
 * novapep-overrides.css.
 *
 * Same conversions as every port in this theme: rem -> px at Dawn's 11.5px
 * root; every var() written as the value it resolves to on live (live's
 * --np-rule is #C9CDD2 where this theme's is #E8EAED, so a var() would pick
 * the wrong one); Dawn's inherited metrics declared on every section root
 * (Sora 17.25 / 18.4px, ratio 1.69565, letter-spacing 0.69px, weight 400,
 * rgba(10,10,10,0.75)); Dawn's heading rule (line-height 1.3, letter-spacing
 * 0.66px) declared on every heading that does not set its own, because this
 * theme's base.css puts 1.15 and -0.02em on all of them.
 *
 * Source order is kept, including each file's trailing max-width blocks: a
 * port is exact or it is not a port.
 *
 * .button, .svg-wrapper, .visually-hidden and the other Dawn base rules the
 * pages share with the drawer live in drawer.css, which loads on every page
 * before this file (enqueue dependency).
 *
 * The legal and 404 rules use #novapep-legal and #novapep-404-section where
 * live uses #shopify-section-<id>, so specificity is the same (1,1,0).
 */

/* ------------------------------------------------------ inherited roots */

.novapep-about-hero,
.novapep-about,
.novapep-about__claims,
.novapep-about__cta,
.novapep-faq-hero,
.novapep-faq,
.novapep-faq__cta,
.novapep-hero--contact,
.novapep-contact,
.novapep-coa-hero,
.novapep-coa-library,
.novapep-coa-covers,
.novapep-coa-cta,
#novapep-legal,
#novapep-404-section {
	font-family: 'Sora', sans-serif;
	font-size: 17.25px;
	font-weight: 400;
	line-height: 1.69565;
	letter-spacing: 0.69px;
	color: rgba(10, 10, 10, 0.75);
}

@media screen and (min-width: 750px) {
	.novapep-about-hero,
	.novapep-about,
	.novapep-about__claims,
	.novapep-about__cta,
	.novapep-faq-hero,
	.novapep-faq,
	.novapep-faq__cta,
	.novapep-hero--contact,
	.novapep-contact,
	.novapep-coa-hero,
	.novapep-coa-library,
	.novapep-coa-covers,
	.novapep-coa-cta,
	#novapep-legal,
	#novapep-404-section {
		font-size: 18.4px;
	}
}

/* Dawn's .page-width: 140rem, 1.5rem gutters, 5rem from 750. The FAQ and COA
   sheets narrow it to 1440/40 at 750+ (their own rules, further down). */
.novapep-about-hero .page-width,
.novapep-about .page-width,
.novapep-about__claims .page-width,
.novapep-about__cta .page-width,
.novapep-faq-hero .page-width,
.novapep-faq .page-width,
.novapep-faq__cta .page-width,
.novapep-coa-hero .page-width,
.novapep-coa-library .page-width,
.novapep-coa-covers .page-width,
.novapep-coa-cta .page-width {
	max-width: 1610px;
	margin: 0 auto;
	padding: 0 17.25px;
}

/*
 * RESTORED 18/09/26 01:20. I destroyed this rule earlier tonight.
 *
 * Removing the per-section container overrides I had added, I deleted rules by
 * matching a selector followed by its declaration block. The pattern matched
 * HERE, on the LAST selector of a nine-selector group. It took the selector and the
 * whole declaration block with it and left eight selectors dangling on a
 * comma, running straight into the @media below.
 *
 * The cost: About, FAQ and COA all lost `max-width: 1610px; margin: 0 auto`
 * AND, because an invalid selector list swallows what follows, the 750+
 * padding block too. The FAQ page rendered 1440px hard against the left edge
 * at every width. The owner found it; no check of mine did.
 *
 * WHY NOTHING CAUGHT IT: the brace count stayed balanced, because a matched
 * {...} pair was removed. A balance check cannot see a rule whose selector
 * list lost its opening brace.
 *
 * THE RULE: never regex-delete a CSS rule by its selector. A selector that
 * looks standalone can be the last line of a group, and the match will eat
 * the group's block. Delete by reading the block, or comment it out.
 */

@media screen and (min-width: 750px) {
	.novapep-about-hero .page-width,
	.novapep-about .page-width,
	.novapep-about__claims .page-width,
	.novapep-about__cta .page-width,
	.novapep-faq-hero .page-width,
	.novapep-faq .page-width,
	.novapep-faq__cta .page-width,
	.novapep-coa-hero .page-width,
	.novapep-coa-library .page-width,
	.novapep-coa-covers .page-width,
	.novapep-coa-cta .page-width {
		padding: 0 57.5px;
	}
}

/* Dawn's .rte: the description and answer blocks. --alpha-link is 0.85 and
   --color-link is the scheme's secondary button label, #0a0a0a. */
.novapep-about-hero .rte:after,
.novapep-about .rte:after,
.novapep-faq-hero .rte:after,
.novapep-faq .rte:after,
.novapep-coa-hero .rte:after {
	clear: both;
	content: '';
	display: block;
}

.novapep-about-hero .rte > *:first-child,
.novapep-about .rte > *:first-child,
.novapep-faq-hero .rte > *:first-child,
.novapep-faq .rte > *:first-child,
.novapep-coa-hero .rte > *:first-child {
	margin-top: 0;
}

.novapep-about-hero .rte > *:last-child,
.novapep-about .rte > *:last-child,
.novapep-faq-hero .rte > *:last-child,
.novapep-faq .rte > *:last-child,
.novapep-coa-hero .rte > *:last-child {
	margin-bottom: 0;
}

.novapep-about .rte a,
.novapep-faq .rte a {
	color: rgba(10, 10, 10, 0.85);
	text-underline-offset: 3.45px;
	text-decoration-thickness: 1.15px;
	transition: text-decoration-thickness 0.1s ease;
}

.novapep-about .rte a:hover,
.novapep-faq .rte a:hover {
	color: rgb(10, 10, 10);
	text-decoration-thickness: 2.3px;
}

/* Dawn's .gradient on a scheme-1 section: the page ground. */
.novapep-about.gradient,
.novapep-faq.gradient,
.novapep-hero--contact ~ .novapep-contact,
.color-scheme-1.gradient {
	background: rgb(238, 241, 244);
	background-attachment: fixed;
}

/* The shared numbered-sequence convention, novapep-overrides.css. */
.novapep-sequence__item {
	border-top-style: solid;
	border-top-color: #C9CDD2;
}

.novapep-sequence__item--first {
	border-top-color: #0A0A0A;
}

.novapep-sequence__number {
	display: block;
	font-family: 'Space Mono', ui-monospace, 'SF Mono', Consolas, monospace;
}

/* Dawn's heading rule for the headings below that do not set their own. */
.novapep-about__panel h2,
.novapep-sequence__title,
.novapep-about__claim-title,
.novapep-about__steps-heading,
.novapep-about__claims-heading,
.novapep-about__cta-heading,
.novapep-faq__group-heading,
.novapep-faq__cta-heading,
.novapep-contact__questions-heading,
.novapep-contact__form-heading,
.novapep-contact__card-heading,
.novapep-coa-library__heading,
.novapep-coa-covers__heading,
.novapep-coa-cta-heading,
.novapep-coa-cta__heading,
.novapep-legal-card__title,
.novapep-legal-section__heading,
.novapep-legal-cta-band__title,
.novapep-hero--contact .novapep-hero__heading {
	line-height: 1.3;
	letter-spacing: 0.66px;
}

/* ------------------------------------------------------ about hero (section-novapep-about-hero.css) */

.novapep-about-hero {
	background: #0A0A0A;
	position: relative;
	text-align: center;
	padding-top: 72px;
	padding-bottom: 72px;
}

.novapep-about-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.novapep-about-hero__eyebrow {
	font-family: 'Space Mono', ui-monospace, 'SF Mono', Consolas, monospace;
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: #6B6B6B;
	margin: 0 0 20px;
}

.novapep-about-hero__heading {
	max-width: 20ch;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 60px;
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1.1;
	color: #FFFFFF;
	margin: 0;
}

/* The About hero's tail. The owner 17/09/26 23:17, sitewide: no grey ending text
   in any hero. Weight carries the emphasis; the token is left alone because it
   also paints the footer wordmark and the age gate. */
.novapep-about-hero__heading--muted {
	color: #FFFFFF;
	font-weight: 400;
}

.novapep-about-hero__text {
	max-width: 56ch;
	margin: 20px 0 0;
	font-family: 'Sora', sans-serif;
	font-size: 16px;
	line-height: 1.65;
	color: #9CA3AF;
}

.novapep-about-hero__text p {
	margin: 0;
}

.novapep-about-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 14px;
	margin-top: 32px;
}

.novapep-about-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 28px;
	border-radius: 999px;
	font-family: 'Sora', sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.novapep-about-hero__cta--primary {
	background: #FFFFFF;
	color: #0A0A0A;
	border: none;
}

.novapep-about-hero__cta--outline {
	background: transparent;
	color: #FFFFFF;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.novapep-about-hero__cta--outline:hover {
	border-color: #FFFFFF;
}

@media screen and (max-width: 749px) {
	.novapep-about-hero {
		padding-top: 30px;
		padding-bottom: 36px;
	}

	.novapep-about-hero__heading {
		font-size: 38px;
		line-height: 1.05;
		letter-spacing: -0.03em;
		max-width: none;
	}

	.novapep-about-hero__text {
		font-size: 14px;
		line-height: 1.65;
		margin-top: 14px;
	}

	.novapep-about-hero__ctas {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		margin-top: 22px;
	}

	.novapep-about-hero__cta {
		width: 100%;
		height: 48px;
	}
}

/* ------------------------------------------------------ about (section-novapep-about.css) */

/* The section's own padding block: 56 top / 0 bottom, x0.75 on phone. */
.novapep-about--padding {
	padding-top: 42px;
	padding-bottom: 0;
}

@media screen and (min-width: 750px) {
	.novapep-about--padding {
		padding-top: 56px;
		padding-bottom: 0;
	}
}

.novapep-about__stats {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

@media screen and (min-width: 750px) {
	.novapep-about__stats {
		grid-template-columns: repeat(3, 1fr);
		gap: 0;
	}
}

.novapep-about__stat {
	border-top: 2px solid #C9CDD2;
	padding: 24px 24px 0 0;
}

.novapep-about__stat--first {
	border-top-color: #0A0A0A;
}

@media screen and (min-width: 750px) {
	.novapep-about__stat:nth-child(2) {
		padding-left: 24px;
	}

	.novapep-about__stat:nth-child(3) {
		padding-left: 24px;
		padding-right: 0;
	}
}

.novapep-about__stat-number {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 40px;
	font-weight: 600;
	color: #0A0A0A;
	margin: 0 0 8px;
}

.novapep-about__stat-label {
	font-family: 'Sora', sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: #0A0A0A;
	margin: 0 0 8px;
}

.novapep-about__stat-description {
	font-family: 'Sora', sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: #4A5568;
	margin: 0;
}

.novapep-about__steps-band {
	background: #EEF1F4;
	margin-top: 64px;
	padding: 64px 0;
}

.novapep-about__steps-heading {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 40px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: #0A0A0A;
	margin: 0 0 40px;
	max-width: 18ch;
}

.novapep-about__steps-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

@media screen and (min-width: 750px) {
	.novapep-about__steps-layout {
		grid-template-columns: 1fr 1fr;
		gap: 48px;
	}
}

.novapep-about__steps-image {
	aspect-ratio: 4 / 3;
	border-radius: 12px;
	overflow: hidden;
	background: #DDE3E9;
}

.novapep-about__steps-image img,
.novapep-about__steps-image svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.novapep-about__steps-list .novapep-sequence__item {
	display: grid;
	grid-template-columns: 80px 280px 1fr;
	gap: 32px;
	align-items: start;
	padding: 24px 0;
	border-top-width: 1px;
}

.novapep-about__steps-list .novapep-sequence__item:first-child {
	border-top-color: #0A0A0A;
}

@media screen and (max-width: 749px) {
	.novapep-about__steps-list .novapep-sequence__item {
		grid-template-columns: 40px 1fr;
	}

	.novapep-about__steps-list .novapep-sequence__title {
		grid-column: 2;
	}
}

.novapep-about__steps-list .novapep-sequence__number {
	font-size: 11px;
	color: #6B6B6B;
}

.novapep-about__steps-list .novapep-sequence__title {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 17px;
	font-weight: 600;
	color: #0A0A0A;
	margin: 0;
}

.novapep-about__steps-list .novapep-sequence__text {
	font-family: 'Sora', sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: #4A5568;
	margin: 0;
}

.novapep-about__panels {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14.375px;
	margin-top: 64px;
}

@media screen and (min-width: 750px) {
	.novapep-about__panels {
		grid-template-columns: 1fr 1fr;
	}
}

.novapep-about__panel {
	background: rgb(238, 241, 244);
	border: 1px solid rgba(10, 10, 10, 0.1);
	border-radius: 12px;
	padding: 32px;
}

/* Dawn's h2 (family, weight, colour) then the panel's own margin and size. */
.novapep-about__panel h2 {
	font-family: 'Space Grotesk', sans-serif;
	font-style: normal;
	font-weight: 600;
	color: rgb(10, 10, 10);
	margin: 0 0 11.5px;
	font-size: 15.525px;
}

.novapep-about__panel .rte p {
	margin: 0 0 11.5px;
	line-height: 1.6;
	color: rgba(10, 10, 10, 0.8);
}

.novapep-about__panel .rte p:last-child {
	margin-bottom: 0;
}

.novapep-about__claims {
	background: #0A0A0A;
	padding: 72px 0;
}

.novapep-about__claims-heading {
	text-align: center;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 32px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: #FFFFFF;
	margin: 0 0 48px;
}

.novapep-about__claims-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

@media screen and (min-width: 750px) {
	.novapep-about__claims-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.novapep-about__claim-title {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 18px;
	font-weight: 600;
	color: #FFFFFF;
	margin: 0 0 12px;
}

.novapep-about__claim-text {
	font-family: 'Sora', sans-serif;
	font-size: 14px;
	line-height: 1.65;
	color: #9CA3AF;
	margin: 0;
}

.novapep-about__cta {
	background: #FFFFFF;
	padding: 72px 0 96px;
}

.novapep-about__cta-inner {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
}

.novapep-about__cta-heading {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: #0A0A0A;
	margin: 0 0 12px;
}

.novapep-about__cta-text {
	font-family: 'Sora', sans-serif;
	font-size: 15px;
	line-height: 1.65;
	color: #4A5568;
	margin: 0 0 24px;
}

.novapep-about__cta .novapep-about__cta-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 32px;
	border-radius: 999px;
	background: #0A0A0A;
	color: #FFFFFF;
	font-family: 'Sora', sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.novapep-about__cta .novapep-about__cta-button::after,
.novapep-about__cta .novapep-about__cta-button::before {
	content: none;
}

@media screen and (max-width: 749px) {
	.novapep-about__stats {
		gap: 18px;
	}

	.novapep-about__stat {
		padding-top: 16px;
	}

	.novapep-about__stat-number {
		font-size: 32px;
	}

	.novapep-about__steps-band {
		margin-top: 36px;
		padding: 32px 0 36px;
	}

	.novapep-about__steps-heading {
		font-size: 28px;
		max-width: none;
		margin-bottom: 22px;
	}

	.novapep-about__steps-layout {
		gap: 22px;
	}

	.novapep-about__panels {
		margin-top: 36px;
		gap: 14px;
	}

	.novapep-about__panel {
		padding: 22px;
	}

	.novapep-about__claims {
		padding: 36px 0;
	}

	.novapep-about__claims-heading {
		font-size: 28px;
		margin-bottom: 22px;
	}

	.novapep-about__claims-grid {
		gap: 18px;
	}

	.novapep-about__cta {
		padding: 30px 0 34px;
	}

	.novapep-about__cta-heading {
		font-size: 24px;
	}

	.novapep-about__cta .novapep-about__cta-button {
		width: 100%;
	}
}

/* ------------------------------------------------------ faq (section-novapep-faq.css) */

.novapep-faq--padding {
	padding-top: 42px;
	padding-bottom: 42px;
}

@media screen and (min-width: 750px) {
	.novapep-faq--padding {
		padding-top: 56px;
		padding-bottom: 56px;
	}
}

.novapep-faq-hero {
	background: #0A0A0A;
	position: relative;
	text-align: center;
	padding-top: 60px;
	padding-bottom: 56px;
}

.novapep-faq-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.novapep-faq-hero__pill {
	display: inline-flex;
	align-items: center;
	padding: 7px 14px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	font-family: 'Space Mono', ui-monospace, 'SF Mono', Consolas, monospace;
	font-size: 10px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: #ffffff;
}

.novapep-faq-hero__pill-dot {
	width: 5px;
	height: 5px;
	margin-right: 8px;
	border-radius: 50%;
	background: #1B8A3F;
	flex: 0 0 auto;
}

.novapep-faq-hero__heading {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 48px;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: #FFFFFF;
	margin: 20px 0 0;
}

.novapep-faq-hero__body {
	max-width: 60ch;
	margin: 16px 0 0;
	font-family: 'Sora', sans-serif;
	font-size: 16px;
	line-height: 1.65;
	color: #9CA3AF;
}

.novapep-faq-hero__body p {
	margin: 0;
}

.novapep-faq__body {
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.novapep-faq__group-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 12px;
	margin-bottom: 16px;
	border-bottom: 1px solid #C9CDD2;
}

.novapep-faq__group-heading {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 22px;
	font-weight: 600;
	color: #0A0A0A;
	margin: 0;
}

.novapep-faq__group-count {
	font-family: 'Space Mono', ui-monospace, 'SF Mono', Consolas, monospace;
	font-size: 10px;
	color: #6B6B6B;
	flex-shrink: 0;
}

.novapep-faq__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.novapep-faq__item {
	background: #FFFFFF;
	border: 1px solid #E1E4E8;
	border-radius: 8px;
}

.novapep-faq__item[open] {
	border-color: #0A0A0A;
	background: #FAFBFC;
}

.novapep-faq__item-summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	font-family: 'Sora', sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: #0A0A0A;
}

.novapep-faq__item-summary::-webkit-details-marker {
	display: none;
}

.novapep-faq__item-indicator {
	flex-shrink: 0;
	display: inline-flex;
	width: 13px;
	height: 13px;
	color: #0A0A0A;
	transition: transform 180ms ease;
}

.novapep-faq__item-indicator svg {
	width: 100%;
	height: 100%;
}

.novapep-faq__item[open] .novapep-faq__item-indicator {
	transform: rotate(45deg);
}

.novapep-faq__item-answer {
	padding: 0 56px 20px 20px;
	font-family: 'Sora', sans-serif;
	font-size: 15px;
	line-height: 1.75;
	color: #4A5568;
}

.novapep-faq__item-answer p {
	margin: 0;
}

.novapep-faq__cta {
	background: #FFFFFF;
	padding: 64px 0 96px;
}

.novapep-faq__cta-inner {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
}

.novapep-faq__cta-heading {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: #0A0A0A;
	margin: 0 0 12px;
}

.novapep-faq__cta-text {
	font-family: 'Sora', sans-serif;
	font-size: 15px;
	line-height: 1.65;
	color: #4A5568;
	margin: 0 0 24px;
}

.novapep-faq__cta .novapep-faq__cta-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 32px;
	border-radius: 999px;
	background: #0A0A0A;
	color: #FFFFFF;
	font-family: 'Sora', sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.novapep-faq__cta .novapep-faq__cta-button::after,
.novapep-faq__cta .novapep-faq__cta-button::before {
	content: none;
}

@media screen and (max-width: 749px) {
	.novapep-faq-hero {
		padding-top: 26px;
		padding-bottom: 32px;
		min-height: 372px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		box-sizing: border-box;
	}

	.novapep-faq-hero__pill {
		padding: 6px 12px;
		font-size: 9px;
	}

	.novapep-faq-hero__heading {
		font-size: 32px;
		line-height: 1.08;
		margin-top: 16px;
	}

	.novapep-faq-hero__body {
		font-size: 14px;
		margin-top: 12px;
	}

	.novapep-faq__body {
		gap: 32px;
	}

	.novapep-faq__group-head {
		padding-bottom: 12px;
		margin-bottom: 12px;
	}

	.novapep-faq__group-heading {
		font-size: 18px;
		line-height: 1.3;
	}

	.novapep-faq__item-summary {
		padding: 14px 16px;
		font-size: 14px;
		font-weight: 500;
	}

	.novapep-faq__item-answer {
		padding: 0 16px 16px;
		font-size: 13px;
		line-height: 1.75;
	}

	.novapep-faq__cta {
		padding: 30px 0 34px;
		background: #EEF1F4;
	}

	.novapep-faq__cta-heading {
		font-size: 24px;
	}

	.novapep-faq__cta .novapep-faq__cta-button {
		width: 100%;
		height: 48px;
	}
}

@media screen and (min-width: 750px) {
	.novapep-faq-hero {
		height: 391px;
		padding-top: 0;
		padding-bottom: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		box-sizing: border-box;
	}
}

@media screen and (min-width: 750px) {
	.novapep-faq-hero .page-width,
	.novapep-faq .page-width,
	.novapep-faq__cta .page-width,
	.novapep-faq-hero__inner,
	.novapep-faq__cta-inner {
		max-width: 1440px;
		padding: 0 40px;
		box-sizing: border-box;
	}
}

.novapep-faq-search {
	width: 100%;
	max-width: 620px;
	margin: 28px auto 0;
}

.novapep-faq-search__field {
	position: relative;
	display: flex;
}

.novapep-faq-search__icon {
	position: absolute;
	left: 22px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #9CA3AF;
	pointer-events: none;
}

.novapep-faq-search__icon svg {
	width: 100%;
	height: 100%;
}

.novapep-faq-search__input {
	width: 100%;
	height: 56px;
	appearance: none;
	background: #171717;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	padding: 0 24px 0 52px;
	font-family: 'Sora', sans-serif;
	font-size: 15px;
	color: #FFFFFF;
	outline: none;
	transition: border-color 150ms ease;
	box-sizing: border-box;
	line-height: normal;
	letter-spacing: normal;
}

.novapep-faq-search__input::placeholder {
	color: #9CA3AF;
}

.novapep-faq-search__input:focus,
.novapep-faq-search__input:focus-visible {
	border-color: #FFFFFF;
	box-shadow: none;
	outline: none;
}

.novapep-faq-search__hint {
	margin: 12px 0 0;
	font-family: 'Space Mono', ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #9CA3AF;
	text-align: center;
}

.novapep-faq__empty {
	margin: 24px 0 0;
	text-align: center;
	font-family: 'Sora', sans-serif;
	font-size: 15px;
	/*
	 * 2.24 on the #EEF1F4 panel, the worst ratio left in the theme, and it
	 * had never been measured because this string only renders when a FAQ
	 * search returns nothing. A no-results message is read by someone who is
	 * already not finding what they want, which is the worst moment for it
	 * to be the least legible text on the page.
	 *
	 * #6A7280 WAS SHIPPED HERE FIRST AND WAS STILL WRONG: it is 4.85 on
	 * WHITE, which is where the other four index fixes live, but this panel
	 * is #EEF1F4 and there it is only 4.28. Solved against the real ground
	 * on the second pass. #5F6A77 is 4.86 here and 5.51 on white.
	 *
	 * The rule that would have caught it first time is already written down:
	 * a colour is not right or wrong, a colour ON A GROUND is.
	 */
	color: #5F6A77;
}

@media screen and (max-width: 749px) {
	.novapep-faq-search {
		margin-top: 18px;
	}

	.novapep-faq-search__input {
		height: 50px;
		font-size: 16px;
		padding-left: 44px;
	}

	.novapep-faq-search__icon {
		left: 18px;
		width: 15px;
		height: 15px;
	}
}

/* ------------------------------------------------------ contact (section-contact-form.css) */

/* Dawn's .field / .select / .text-area rules the form carries under the
   contact sheet's overrides. Inputs: 1px border at 0.55 opacity, radius 0. */
.novapep-contact .field__input,
.novapep-contact .select__select {
	-webkit-appearance: none;
	appearance: none;
	background-color: rgb(238, 241, 244);
	color: rgb(10, 10, 10);
	font-family: 'Sora', sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 18.4px;
	width: 100%;
	box-sizing: border-box;
	transition: box-shadow 0.1s ease;
	border-radius: 0;
	height: 51.75px;
	min-height: 2px;
	min-width: 82.5px;
	position: relative;
	box-shadow: 0 0 0 2.15px rgba(10, 10, 10, 0.55);
	outline: 0;
}

.novapep-contact .field__input:focus-visible,
.novapep-contact .select__select:focus-visible {
	box-shadow: 0 0 0 2.15px rgba(10, 10, 10);
	outline: 0;
	border-radius: 0;
}

.novapep-contact .field__input:focus,
.novapep-contact .select__select:focus {
	box-shadow: 0 0 0 2.15px rgba(10, 10, 10);
	outline: 0;
	border-radius: 0;
}

.novapep-contact .field:before,
.novapep-contact .select:before {
	pointer-events: none;
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: 0;
	box-shadow: 0 4px 5px rgba(10, 10, 10, 0);
	z-index: -1;
}

.novapep-contact .field:after,
.novapep-contact .select:after {
	pointer-events: none;
	content: '';
	position: absolute;
	top: 1px;
	right: 1px;
	bottom: 1px;
	left: 1px;
	border: 1.15px solid transparent;
	border-radius: 0;
	box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.55);
	transition: box-shadow 0.1s ease;
	z-index: 1;
}

.novapep-contact .select__select {
	font-family: 'Sora', sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 13.8px;
	color: rgba(10, 10, 10, 0.75);
}

.novapep-contact .field:hover.field:after,
.novapep-contact .select:hover.select:after,
.novapep-contact .select__select:hover.select__select:after {
	box-shadow: 0 0 0 2.15px rgba(10, 10, 10);
}

.novapep-contact .text-area,
.novapep-contact .select {
	display: flex;
	position: relative;
	width: 100%;
}

.novapep-contact .select .svg-wrapper {
	height: 6.9px;
	width: 11.5px;
	pointer-events: none;
	position: absolute;
	top: calc(50% - 2.3px);
	right: 0;
}

.novapep-contact .select__select {
	cursor: pointer;
	line-height: 1.52174;
	padding: 0 35.5px 0 23px;
	margin: 1px;
	min-height: 2px;
}

.novapep-contact .field {
	position: relative;
	width: 100%;
	display: flex;
	transition: box-shadow 0.1s ease;
}

.novapep-contact .field--with-error {
	flex-wrap: wrap;
}

.novapep-contact .field__input {
	flex-grow: 1;
	text-align: left;
	padding: 17.25px;
	margin: 1px;
	transition: box-shadow 0.1s ease;
}

.novapep-contact .field__label {
	font-size: 18.4px;
	left: 24px;
	top: 12.5px;
	margin-bottom: 0;
	pointer-events: none;
	position: absolute;
	transition: top 0.1s ease, font-size 0.1s ease;
	color: rgba(10, 10, 10, 0.75);
	letter-spacing: 1.15px;
	line-height: 1.5;
}

.novapep-contact .field__input:focus ~ .field__label,
.novapep-contact .field__input:not(:placeholder-shown) ~ .field__label,
.novapep-contact .field__input:-webkit-autofill ~ .field__label {
	font-size: 11.5px;
	top: 4.6px;
	left: 24px;
	letter-spacing: 0.46px;
}

.novapep-contact .field__input:focus,
.novapep-contact .field__input:not(:placeholder-shown),
.novapep-contact .field__input:-webkit-autofill {
	padding: 25.3px 17.25px 9.2px 23px;
	margin: 1px;
}

.novapep-contact .field__input::-webkit-search-cancel-button {
	display: none;
}

.novapep-contact .field__input::placeholder {
	opacity: 0;
}

.novapep-contact .caption-large,
.novapep-contact .field__input,
.novapep-contact .form__label,
.novapep-contact .select__select {
	font-size: 14.95px;
	line-height: 1.43478;
	letter-spacing: 0.46px;
}

.novapep-contact .form__message {
	align-items: center;
	display: flex;
	font-size: 16.1px;
	line-height: 1;
	margin-top: 11.5px;
}

.novapep-contact .form__message .icon {
	flex-shrink: 0;
	height: 15px;
	width: 15px;
	margin-right: 5.75px;
}

.novapep-contact .form-status {
	margin: 0;
	font-size: 18.4px;
}

.novapep-contact .form-status-list {
	padding: 0;
	margin: 23px 0 46px;
}

.novapep-contact .form-status-list li {
	list-style-position: inside;
}

.novapep-contact .form-status-list .link::first-letter {
	text-transform: capitalize;
}

/* The contact sheet itself, verbatim. */
.novapep-contact img {
	max-width: 100%;
}

.novapep-contact {
	color: #0A0A0A;
	max-width: 1100px;
	margin: 0 auto;
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
}

.novapep-contact--padding {
	padding-top: 48px;
	padding-bottom: 48px;
}

@media screen and (min-width: 750px) {
	.novapep-contact--padding {
		padding-top: 64px;
		padding-bottom: 64px;
	}
}

.novapep-hero--contact {
	width: 100%;
	height: 420px;
	display: flex;
	align-items: flex-start;
	background-size: cover;
	background-position: center;
	box-sizing: border-box;
	padding-top: 48px;
}

.novapep-hero--contact .novapep-hero__inner {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
	text-align: left;
}

.novapep-hero--contact .novapep-hero__breadcrumb {
	margin: 0 0 16px;
	font-family: 'Sora', sans-serif;
	font-size: 13px;
	color: #6B6B6B;
}

.novapep-hero--contact .novapep-hero__breadcrumb a {
	color: #6B6B6B;
	text-decoration: underline;
}

.novapep-hero--contact .novapep-hero__heading {
	margin: 0 0 14px;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 56px;
	font-weight: 600;
	line-height: 1.05;
	color: #0A0A0A;
}

.novapep-hero--contact .novapep-hero__subheading {
	margin: 0;
	max-width: 520px;
	font-family: 'Sora', sans-serif;
	font-size: 16px;
	color: #6B6B6B;
}

@media screen and (max-width: 749px) {
	.novapep-hero--contact {
		height: auto;
		padding-bottom: 28px;
	}

	.novapep-hero--contact .novapep-hero__heading {
		font-size: 34px;
		line-height: 1.05;
	}

	.novapep-hero--contact .novapep-hero__subheading {
		font-size: 14px;
		line-height: 1.65;
	}

	/*
	 * REMOVED 16/09/26. Neither of these two rules had ever applied.
	 *
	 * They set font-size inside max-width:749px, but the unconditional
	 * .novapep-contact__questions-heading and -subheading rules appear
	 * LATER in this file and set the same property. A media query adds no
	 * specificity, so on a tie the later rule wins at every width, phones
	 * included. The 26px and the 14px have never rendered.
	 *
	 * The heading already has a WORKING phone override - 32px, in the
	 * max-width:767px block near the end of this file, added 13/09/26.
	 * That is the same trap hit once before and worked around by appending
	 * a new block rather than fixing this one, which is why both existed.
	 * The 32px is the live decision, so the 26px is deleted, not moved.
	 *
	 * The SUBHEADING had no such override, so its 14px is moved into that
	 * same working block rather than dropped.
	 */
}

.novapep-contact__questions-header {
	text-align: center;
	margin-bottom: 40px;
}

.novapep-contact__questions-heading {
	margin: 0 0 12px;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 36px;
	font-weight: 600;
	color: #0A0A0A;
}

.novapep-contact__questions-subheading {
	margin: 0;
	font-family: 'Sora', sans-serif;
	font-size: 16px;
	color: #6B6B6B;
}

.novapep-contact__deflection {
	display: grid;
	grid-template-columns: 1fr;
	align-items: stretch;
	gap: 16px;
	margin-bottom: 32px;
}

@media screen and (min-width: 768px) {
	.novapep-contact__deflection {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (min-width: 990px) {
	.novapep-contact__deflection {
		grid-template-columns: repeat(4, 1fr);
	}
}

.novapep-contact__card,
.novapep-contact__panel {
	background: #FFFFFF;
	border: 1px solid #E8E8E8;
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(10, 10, 10, 0.04), 0 8px 24px rgba(10, 10, 10, 0.06);
	box-sizing: border-box;
}

.novapep-contact__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 28px;
}

.novapep-contact__card--info {
	padding: 18px 20px;
}

.novapep-contact__icon-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: #F2F2F3;
	margin-bottom: 16px;
}

.novapep-contact__card--info .novapep-contact__icon-tile {
	margin-bottom: 0;
}

.novapep-contact__icon-tile svg {
	width: 20px;
	height: 20px;
	fill: #0A0A0A;
}

.novapep-contact__card-header-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.novapep-contact__card-heading {
	margin: 0;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	color: #0A0A0A;
}

.novapep-contact__card--info .novapep-contact__card-heading {
	font-size: 16px;
}

.novapep-contact__card-text {
	margin: 12px 0 0;
	font-family: 'Sora', sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: #6B6B6B;
}

.novapep-contact__card--info .novapep-contact__card-text {
	font-size: 14px;
}

.novapep-contact__card-link {
	display: inline-block;
	margin-top: auto;
	padding-top: 12px;
	font-family: 'Sora', sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #0A0A0A;
	text-decoration: underline;
}

.novapep-contact__card-link--pending {
	color: #9B9B9B;
	text-decoration: none;
	cursor: default;
}

.novapep-contact__faq-cta {
	text-align: center;
	margin-top: 32px;
}

.novapep-contact__faq-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 28px;
	background: #FFFFFF;
	border: 1px solid #0A0A0A;
	border-radius: 999px;
	font-family: 'Sora', sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #0A0A0A;
	text-decoration: none;
}

.novapep-contact__grid {
	display: grid;
	grid-template-columns: 1fr;
	align-items: start;
	gap: 32px;
	margin-top: 64px;
}

@media screen and (min-width: 990px) {
	.novapep-contact__grid {
		grid-template-columns: 2fr 1fr;
	}
}

.novapep-contact__panel {
	padding: 36px;
}

.novapep-contact__form-intro {
	margin-bottom: 24px;
}

.novapep-contact__form-eyebrow {
	display: block;
	margin-bottom: 8px;
	font-family: 'Sora', sans-serif;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6B6B6B;
}

.novapep-contact__form-heading {
	margin: 0 0 8px;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 30px;
	font-weight: 600;
	color: #0A0A0A;
}

.novapep-contact__form-subheading {
	margin: 0;
	font-family: 'Sora', sans-serif;
	font-size: 14px;
	color: #6B6B6B;
}

.novapep-contact__info-column {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.novapep-contact__contact-card {
	display: grid;
	grid-template-columns: 44px 1fr 24px;
	column-gap: 14px;
	align-items: center;
	text-decoration: none;
}

.novapep-contact__contact-card--no-arrow {
	grid-template-columns: 44px 1fr;
}

.novapep-contact__icon-tile--whatsapp {
	background: #25D366;
}

.novapep-contact__icon-tile--email {
	background: #0A0A0A;
}

.novapep-contact__icon-tile--whatsapp svg {
	width: 20px;
	height: 20px;
	fill: #FFFFFF;
}

.novapep-contact__icon-tile--email svg {
	width: 22px;
	height: 22px;
	fill: #FFFFFF;
	color: #FFFFFF;
}

.novapep-contact__contact-card-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	text-align: left;
}

.novapep-contact__contact-card-text .novapep-contact__card-heading {
	font-size: 16px;
}

.novapep-contact__contact-card-text .novapep-contact__card-text {
	margin: 0;
	font-size: 14px;
}

.novapep-contact__contact-card-arrow {
	flex-shrink: 0;
	font-size: 18px;
	color: #9B9B9B;
}

.novapep-contact__response-note {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #F5F5F6;
	border-radius: 12px;
	padding: 16px;
}

.novapep-contact__response-icon {
	flex-shrink: 0;
	display: flex;
}

.novapep-contact__response-icon svg {
	width: 18px;
	height: 18px;
	fill: #6B6B6B;
}

.novapep-contact__response-text {
	font-family: 'Sora', sans-serif;
	font-size: 14px;
	color: #6B6B6B;
}

.novapep-contact__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 20px;
}

@media screen and (max-width: 749px) {
	.novapep-contact__row {
		grid-template-columns: 1fr;
	}
}

.novapep-contact__row .field {
	margin-bottom: 0;
}

.novapep-contact .field {
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;
}

.novapep-contact .field__label,
.novapep-contact .customer .field label {
	position: static;
	order: -1;
	display: block;
	margin: 0 0 8px;
	pointer-events: auto;
	font-family: 'Sora', sans-serif;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #0A0A0A;
}

.novapep-contact__required {
	color: #6B6B6B;
}

.novapep-contact .field__input:focus ~ .field__label,
.novapep-contact .field__input:not(:placeholder-shown) ~ .field__label,
.novapep-contact .field__input:-webkit-autofill ~ .field__label {
	font-size: 13px;
	color: #0A0A0A;
}

.novapep-contact .field__input,
.novapep-contact .field__input:focus,
.novapep-contact .field__input:not(:placeholder-shown),
.novapep-contact .field__input:-webkit-autofill,
.novapep-contact select.field__input {
	height: 46px;
	background: #F5F5F6;
	border: none;
	border-radius: 8px;
	padding: 0 16px;
	margin: 0;
	font-family: 'Sora', sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	color: #0A0A0A;
	box-sizing: border-box;
}

.novapep-contact .field__input::placeholder {
	color: #9B9B9B;
}

.novapep-contact .field__input.text-area,
.novapep-contact textarea.field__input {
	height: 126px;
	padding: 14px 16px;
}

.novapep-contact .field__input:focus {
	outline: none;
	background: #FFFFFF;
	box-shadow: inset 0 0 0 1px #0A0A0A;
}

.novapep-contact .field:after,
.novapep-contact .field:before,
.novapep-contact .field:hover.field:after {
	box-shadow: none;
}

.novapep-contact .select:after,
.novapep-contact .select:before,
.novapep-contact .select:hover.select:after,
.novapep-contact .select__select:hover.select__select:after {
	box-shadow: none;
}

.novapep-contact .form__message {
	align-items: flex-start;
}

.novapep-contact .select {
	position: relative;
	display: flex;
	width: 100%;
}

.novapep-contact .select .svg-wrapper {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 10px;
	height: 6px;
	pointer-events: none;
}

.novapep-contact select.field__input {
	padding-right: 40px;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.novapep-contact__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 8px 0 28px;
}

.novapep-contact__consent-checkbox {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: #0A0A0A;
	border-radius: 0;
}

.novapep-contact__consent-label {
	font-family: 'Sora', sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	color: #0A0A0A;
	cursor: pointer;
}

.contact__button {
	margin-top: 0;
}

.novapep-contact__submit {
	display: block;
	width: 100%;
	background: #0A0A0A;
	color: #FFFFFF;
	border: none;
	border-radius: 999px;
	height: 52px;
	padding: 0 32px;
	font-family: 'Sora', sans-serif;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	box-sizing: border-box;
	line-height: normal;
	letter-spacing: normal;
}

.novapep-contact__submit:before,
.novapep-contact__submit:after {
	content: none;
}

.novapep-contact__submit:hover {
	background: #2A2A2A;
}

@media screen and (max-width: 749px) {
	.novapep-contact .field__input,
	.novapep-contact .field__input:focus,
	.novapep-contact .field__input:not(:placeholder-shown),
	.novapep-contact .field__input:-webkit-autofill,
	.novapep-contact select.field__input,
	.novapep-contact textarea.field__input {
		font-size: 16px;
	}
}

@media screen and (min-width: 750px) {
	.novapep-hero--contact {
		height: 391px;
		padding-top: 0;
		align-items: center;
	}
}

/* ------------------------------------------------------ coa (section-novapep-coa.css) */

.novapep-coa-hero {
	background: #0A0A0A;
	position: relative;
	text-align: center;
	padding-top: 60px;
	padding-bottom: 56px;
}

.novapep-coa-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.novapep-coa-hero__pill {
	display: inline-flex;
	align-items: center;
	padding: 7px 14px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	font-family: 'Space Mono', ui-monospace, 'SF Mono', Consolas, monospace;
	font-size: 10px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: #ffffff;
}

.novapep-coa-hero__pill-dot {
	width: 5px;
	height: 5px;
	margin-right: 8px;
	border-radius: 50%;
	background: #1B8A3F;
	flex: 0 0 auto;
}

.novapep-coa-search__field {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
}

.novapep-coa-search__icon {
	position: absolute;
	left: 22px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #9CA3AF;
	pointer-events: none;
}

.novapep-coa-search__icon svg {
	width: 100%;
	height: 100%;
}

/* 17/09/26 handoff: 62 / 600 / -0.038em / lh 1.02, 22px under the pill.
   ~~48 / -0.03em / lh 1.1 / 20~~ */
.novapep-coa-hero__heading {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 62px;
	font-weight: 600;
	color: #FFFFFF;
	letter-spacing: -0.038em;
	line-height: 1.02;
	margin: 22px 0 0;
}

.novapep-coa-hero__heading-strong {
	font-weight: 600;
}

/* The tail. Weight carries the emphasis - no grey, sitewide, the owner 23:17. */
.novapep-coa-hero__heading-soft {
	font-weight: 400;
	color: #FFFFFF;
}

/* 17/09/26 handoff: Sora 19 / 500 / lh 1.6 / #D3D9E0, measure 58ch.
   ~~16 / 400 / #9CA3AF / 56ch~~ - 400 at 16px in #9CA3AF on near-black is the
   readability fault the handoff's small-text rule names; this is 15.4:1. */
.novapep-coa-hero__body {
	font-family: 'Sora', sans-serif;
	font-size: 19px;
	font-weight: 500;
	color: #D3D9E0;
	line-height: 1.6;
	max-width: 58ch;
	margin: 16px 0 0;
}

.novapep-coa-hero__body p {
	margin: 0;
}

.novapep-coa-search {
	width: 100%;
	max-width: 560px;
	margin: 32px auto 0;
}

.novapep-coa-search__row {
	display: flex;
	gap: 10px;
	flex-wrap: nowrap;
}

@media screen and (max-width: 749px) {
	.novapep-coa-search__row {
		flex-direction: column;
	}
}

/*
 * THE SEARCH CONTROLS ARE LEFT AS THEY WERE - the owner 17/09/26 23:55: "those
 * buttons in the hero they changed they are now not like the rest of the
 * pages thats the only part you dont do aswell".
 *
 * The handoff specs 58px, a solid #3A424C 1.5px border and radius 11. Built
 * that way and it broke the one thing that mattered more: the COA field and
 * button no longer matched the catalogue and FAQ heroes, which are 56px
 * pills. Site consistency beats the frame here and that is his call.
 *
 * ~~58px / #14171C / 1.5px #3A424C / radius 11 / 16px~~ - reverted to the
 * shared treatment. Do not re-apply the handoff's numbers to this control
 * without doing the other heroes in the same pass.
 */
.novapep-coa-search__input {
	height: 56px;
	background: #171717;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	padding: 0 24px 0 52px;
	margin: 0;
	font-family: 'Sora', sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: #FFFFFF;
	box-sizing: border-box;
	flex: 1 1 0;
	min-width: 0;
	letter-spacing: normal;
}

.novapep-coa-search__input::placeholder {
	color: #6B6B6B;
}

.novapep-coa-search__input:focus {
	outline: none;
	border-color: #FFFFFF;
}

.novapep-coa-search__input:focus-visible {
	outline: none;
	box-shadow: none;
	border-color: #FFFFFF;
}

/* Left as the rest of the site - see the note on the input above. */
.novapep-coa-search__row .button.novapep-coa-search__submit {
	height: 56px;
	min-height: 56px;
	background: #FFFFFF;
	color: #0A0A0A;
	border: none;
	border-radius: 999px;
	font-family: 'Sora', sans-serif;
	font-size: 15px;
	font-weight: 600;
	padding: 0 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	white-space: nowrap;
}

/* 17/09/26 handoff: 15 / 500 / #C4CCD6. ~~13 / #6B6B6B~~ - a helper line that
   is both smaller AND greyer than the body disappears, which is the third
   fault the handoff's small-text rule names. 11.6:1 here against 4.4. */
.novapep-coa-search__hint {
	margin: 16px 0 0;
	font-family: 'Sora', sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: #C4CCD6;
}

/* "browse all N" inside the helper line - white, 600, underlined with room
   under the baseline. */
.novapep-coa-search__hint a,
.novapep-coa-search__hint strong {
	color: #FFFFFF;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The hero's tablet step, 17/09/26 handoff. Placed after every rule it
   overrides - an unconditional declaration written later would eat it. */
@media screen and (max-width: 1239px) {

	.novapep-coa-hero__heading {
		font-size: 52px;
	}

	.novapep-coa-hero__body {
		font-size: 17px;
	}

	.novapep-coa-search {
		max-width: 580px;
	}

}

.novapep-coa-library {
	background: #FFFFFF;
	padding: 56px 0 64px;
}

.novapep-coa-library__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 2px solid #0A0A0A;
}

.novapep-coa-library__eyebrow {
	font-family: 'Space Mono', ui-monospace, 'SF Mono', Consolas, monospace;
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #6B6B6B;
	margin: 0 0 8px;
}

.novapep-coa-library__heading {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 44px;
	font-weight: 600;
	color: #0A0A0A;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0;
}

.novapep-coa-library__chip[hidden] {
	display: none;
}

.novapep-coa-library__chip {
	appearance: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding: 0 8px 0 16px;
	border: 1px solid #E1E4E8;
	border-radius: 999px;
	background: transparent;
	color: #4A5568;
	font-family: 'Sora', sans-serif;
	font-size: 13px;
	line-height: normal;
	letter-spacing: normal;
}

.novapep-coa-library__chip-close {
	display: inline-flex;
	width: 20px;
	height: 20px;
	align-items: center;
	justify-content: center;
	color: #6B6B6B;
}

.novapep-coa-library__chip-close svg {
	width: 12px;
	height: 12px;
}

.novapep-coa-table {
	width: 100%;
}

@media screen and (max-width: 749px) {
	.novapep-coa-table {
		display: none;
	}
}

.novapep-coa-table__head,
.novapep-coa-table__row {
	display: grid;
	grid-template-columns: 1.1fr 2fr 0.9fr 1fr 1.1fr;
	gap: 16px;
	align-items: center;
}

.novapep-coa-table__head {
	padding: 0 0 14px;
	border-bottom: 1px solid #E8EAED;
}

.novapep-coa-table__head span {
	font-family: 'Space Mono', ui-monospace, 'SF Mono', Consolas, monospace;
	font-size: 10px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #6B6B6B;
}

.novapep-coa-table__row {
	padding: 16px 0;
	border-bottom: 1px solid #E8EAED;
}

.novapep-coa-table__row[hidden],
.novapep-coa-card[hidden] {
	display: none;
}

.novapep-coa-table__lot {
	font-family: 'Space Mono', ui-monospace, 'SF Mono', Consolas, monospace;
	font-size: 13px;
	color: #0A0A0A;
}

.novapep-coa-table__compound {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.novapep-coa-table__compound-name {
	font-family: 'Sora', sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #0A0A0A;
}

.novapep-coa-table__compound-category {
	font-family: 'Space Mono', ui-monospace, 'SF Mono', Consolas, monospace;
	font-size: 10px;
	color: #6B6B6B;
}

.novapep-coa-table__purity {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 16px;
	font-weight: 600;
}

.novapep-coa-table__purity-value {
	color: #0E7A30; /* was #1B8A3F: 4.42 on white, below AA. Now 5.46 on
	                   white and 4.81 on #EDF1F5. */
}

.novapep-coa-table__purity-dash {
	color: #0A0A0A;
}

.novapep-coa-table__tested {
	font-family: 'Sora', sans-serif;
	font-size: 14px;
	color: #4A5568;
}

.novapep-coa-table__cert-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	padding: 0 16px;
	border-radius: 999px;
	font-family: 'Sora', sans-serif;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.novapep-coa-table__cert-link--pdf {
	border: 1px solid #E1E4E8;
	color: #0A0A0A;
	background: transparent;
}

.novapep-coa-table__cert-link--request {
	background: #0A0A0A;
	color: #FFFFFF;
	border: none;
}

.novapep-coa-cards {
	display: none;
}

@media screen and (max-width: 749px) {
	.novapep-coa-cards {
		display: block;
	}
}

.novapep-coa-card {
	padding: 14px;
	border: 1px solid #E1E4E8;
	border-radius: 10px;
	margin-bottom: 10px;
}

.novapep-coa-card:last-child {
	margin-bottom: 0;
}

@media screen and (max-width: 749px) {
	.novapep-coa-hero {
		padding-top: 18px;
		padding-bottom: 24px;
		min-height: 372px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		box-sizing: border-box;
	}

	.novapep-coa-hero__pill {
		padding: 6px 12px;
		font-size: 9px;
	}

	.novapep-coa-hero__heading {
		font-size: 34px;
		margin-top: 16px;
	}

	.novapep-coa-hero__body {
		font-size: 14px;
		margin-top: 12px;
	}

	.novapep-coa-search {
		margin-top: 18px;
	}

	.novapep-coa-search__row .button.novapep-coa-search__submit {
		height: 50px;
		min-height: 50px;
		font-size: 14px;
	}

	.novapep-coa-search__input {
		height: 50px;
		min-height: 50px;
		font-size: 16px;
		padding-left: 44px;
	}

	.novapep-coa-search__icon {
		left: 18px;
		width: 15px;
		height: 15px;
	}

	.novapep-coa-library {
		padding: 30px 0 36px;
	}

	.novapep-coa-library__heading {
		font-size: 28px;
	}
}

.novapep-coa-card__heading {
	font-family: 'Sora', sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #0A0A0A;
	margin: 0;
}

.novapep-coa-card__category {
	font-family: 'Space Mono', ui-monospace, 'SF Mono', Consolas, monospace;
	font-size: 10px;
	color: #6B6B6B;
	margin: 4px 0 12px;
}

.novapep-coa-card__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
}

.novapep-coa-card__label {
	font-family: 'Space Mono', ui-monospace, 'SF Mono', Consolas, monospace;
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #6B6B6B;
}

.novapep-coa-card__value {
	font-family: 'Sora', sans-serif;
	font-size: 15px;
	color: #0A0A0A;
	text-align: right;
}

.novapep-coa-card__cert {
	margin-top: 12px;
}

.novapep-coa-empty[hidden] {
	display: none;
}

.novapep-coa-empty {
	display: block;
	text-align: center;
	padding: 48px 0;
	font-family: 'Sora', sans-serif;
	font-size: 15px;
	font-weight: 400;
	color: #6B6B6B;
}

.novapep-coa-covers {
	background: #EEF1F4;
	padding: 64px 0;
}

.novapep-coa-covers__eyebrow {
	text-align: center;
	font-family: 'Space Mono', ui-monospace, 'SF Mono', Consolas, monospace;
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: #6B6B6B;
	margin: 0 0 12px;
}

.novapep-coa-covers__heading {
	text-align: center;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 32px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: #0A0A0A;
	margin: 0 0 40px;
}

.novapep-coa-covers__grid {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
}

@media screen and (min-width: 750px) {
	.novapep-coa-covers__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.novapep-coa-covers__grid .novapep-sequence__item {
	border-top-width: 2px;
	padding: 24px 40px 0 0;
}

@media screen and (min-width: 750px) {
	.novapep-coa-covers__grid .novapep-sequence__item:nth-child(2) {
		padding-left: 40px;
	}

	.novapep-coa-covers__grid .novapep-sequence__item:nth-child(3) {
		padding-left: 40px;
		padding-right: 0;
	}
}

.novapep-coa-covers__grid .novapep-sequence__number {
	font-size: 11px;
	color: #6B6B6B;
	margin-bottom: 16px;
}

.novapep-coa-covers__grid .novapep-sequence__title {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 19px;
	font-weight: 600;
	color: #0A0A0A;
	margin: 0 0 8px;
}

.novapep-coa-covers__grid .novapep-sequence__text {
	font-family: 'Sora', sans-serif;
	font-size: 14px;
	line-height: 1.65;
	color: #4A5568;
	margin: 0;
}

.novapep-coa-cta {
	background: #FFFFFF;
	padding: 64px 0 96px;
}

.novapep-coa-cta__inner {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
}

.novapep-coa-cta__heading {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: #0A0A0A;
	margin: 0 0 12px;
}

.novapep-coa-cta__text {
	font-family: 'Sora', sans-serif;
	font-size: 15px;
	line-height: 1.65;
	color: #4A5568;
	margin: 0 0 24px;
}

.novapep-coa-cta .novapep-coa-cta__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 32px;
	border-radius: 999px;
	background: #0A0A0A;
	color: #FFFFFF;
	font-family: 'Sora', sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.novapep-coa-cta .novapep-coa-cta__button::after,
.novapep-coa-cta .novapep-coa-cta__button::before {
	content: none;
}

@media screen and (min-width: 750px) {
	.novapep-coa-hero {
		height: 391px;
		padding-top: 0;
		padding-bottom: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		box-sizing: border-box;
	}
}

@media screen and (min-width: 750px) {
	.novapep-coa-hero .page-width,
	.novapep-coa-library .page-width,
	.novapep-coa-cta .page-width,
	.novapep-coa-hero__inner,
	.novapep-coa-cta__inner {
		max-width: 1440px;
		padding: 0 40px;
		box-sizing: border-box;
	}
}

/* ------------------------------------------------------ legal (novapep-legal.liquid) */

#novapep-legal .novapep-legal-hero {
	background: #0A0A0A;
	padding: 58px 0 54px;
}

#novapep-legal .novapep-legal-hero__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 40px;
}

#novapep-legal .novapep-legal-hero__pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 28px;
	padding: 0 13px;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 999px;
	/* Takes the About pill's font and thickness - the owner 17/09/26 23:17. Sora
	   from the body, 11px / 700 / 0.09em, solid white. ~~Space Mono 10px,
	   0.16em, rgba(255,255,255,0.85)~~ */
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #FFFFFF;
	margin-bottom: 18px;
}

#novapep-legal .novapep-legal-hero__dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #8e959d;
}

#novapep-legal .novapep-legal-hero__title {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 52px;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: #FFFFFF;
	margin: 0 0 16px;
}

/* "Terms (of service)" - the tail of the two-tone headline. The owner 17/09/26
   23:17, sitewide and absolute: "no grey ending text from now on anywhere.
   period." Emphasis is weight, not colour.
   THE RULE CHANGES AND THE TOKEN DOES NOT: --np-hero-pep is the wordmark's
   light half and is correct at its own job - it also paints the footer
   wordmark and the age gate, neither of which is in scope. Repointing the
   token would move all three. Same finding as the menu-note fix of 16/09. */
#novapep-legal .novapep-legal-hero__title-muted {
	color: #FFFFFF;
	font-weight: 400;
}

#novapep-legal .novapep-legal-hero__lede {
	font-family: 'Sora', sans-serif;
	font-size: 16px;
	line-height: 1.65;
	/* The owner 17/09/26 23:17: this line is "too dark". The ground here is
	   #0A0A0A, so too dark means too dim - ~~#9CA3AF at 7.8:1~~ -> #D3D9E0 at
	   15.4:1, with the weight written out rather than inherited. That is the
	   handoff's own small-text rule for body on a dark ground. */
	font-weight: 500;
	color: #D3D9E0;
	max-width: 62ch;
	margin: 0;
}

#novapep-legal .novapep-legal-body {
	background: #EEF1F4;
	padding: 40px 0 72px;
}

#novapep-legal .novapep-legal-body__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 40px;
	display: grid;
	grid-template-columns: 290px 1fr;
	gap: 40px;
	align-items: start;
}

#novapep-legal .novapep-legal-rail {
	position: sticky;
	top: 100px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

#novapep-legal .novapep-legal-card {
	background: #FFFFFF;
	border: 1px solid #E1E4E8;
	border-radius: 12px;
	padding: 24px 20px;
}

#novapep-legal .novapep-legal-card__title {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 20px;
	font-weight: 600;
	color: #0A0A0A;
	margin: 0 0 6px;
}

#novapep-legal .novapep-legal-card__note {
	font-family: 'Sora', sans-serif;
	font-size: 13px;
	color: #6B6B6B;
	margin: 0 0 16px;
}

#novapep-legal .novapep-legal-rail-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 11px 14px;
	border-radius: 8px;
	background: #F5F6F8;
	border: 1px solid #E8EAED;
	font-family: 'Sora', sans-serif;
	font-size: 14px;
	color: #4A5568;
	text-decoration: none;
	margin-bottom: 6px;
}

#novapep-legal .novapep-legal-rail-link:last-child {
	margin-bottom: 0;
}

#novapep-legal .novapep-legal-rail-link.is-current {
	background: #0A0A0A;
	border-color: #0A0A0A;
	color: #FFFFFF;
	font-weight: 600;
}

#novapep-legal .novapep-legal-rail-link__count {
	font-family: 'Space Mono', ui-monospace, 'SF Mono', Consolas, monospace;
	font-size: 10px;
}

#novapep-legal .novapep-legal-toc {
	display: flex;
	flex-direction: column;
}

#novapep-legal .novapep-legal-toc a {
	display: block;
	text-decoration: none;
}

#novapep-legal .novapep-legal-toc-row {
	display: grid;
	grid-template-columns: 24px 1fr;
	padding-top: 8px;
	border-top: 1px solid #EDEFF2;
}

#novapep-legal .novapep-legal-toc-row:first-child {
	border-top: none;
	padding-top: 0;
}

#novapep-legal .novapep-legal-toc__index {
	font-family: 'Space Mono', ui-monospace, 'SF Mono', Consolas, monospace;
	font-size: 10px;
	color: #6A7280; /* was #9CA3AF: 2.54 on white, well below AA. Now 4.85.
	                   #9CA3AF is the mono-on-DARK colour; on white it fails. */
}

#novapep-legal .novapep-legal-toc__label {
	font-family: 'Sora', sans-serif;
	font-size: 13px;
	line-height: 1.45;
	color: #4A5568;
	text-decoration: none;
}

#novapep-legal .novapep-legal-card--dark {
	background: #0A0A0A;
	/*
	 * ADDED 16/09/26. This card set a dark background and gave the eyebrow
	 * (#9CA3AF) and the CTA (#FFFFFF) their own colours, but never set its
	 * own - so the bare `<span aria-hidden>` holding the arrow inherited
	 * --np-ink #14161A and rendered at 1.09:1 on #0A0A0A. Invisible, not
	 * merely low-contrast.
	 *
	 * Setting the card's colour fixes the arrow and means any future
	 * unstyled child is legible by default rather than by accident.
	 */
	color: #FFFFFF;
	padding: 16px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-decoration: none;
}

#novapep-legal .novapep-legal-card--dark .novapep-legal-card__eyebrow {
	display: block;
	font-family: 'Space Mono', ui-monospace, 'SF Mono', Consolas, monospace;
	font-size: 9px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #9CA3AF;
	margin-bottom: 4px;
}

#novapep-legal .novapep-legal-card--dark .novapep-legal-card__cta {
	font-family: 'Sora', sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #FFFFFF;
}

#novapep-legal .novapep-legal-content {
	background: #FFFFFF;
	border: 1px solid #E1E4E8;
	border-radius: 12px;
	padding: 40px 44px 44px;
}

#novapep-legal .novapep-legal-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding-bottom: 22px;
	border-bottom: 1px solid #EDEFF2;
}

#novapep-legal .novapep-legal-chip {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 12px;
	border-radius: 999px;
	background: #F2F3F5;
	/* The three meta chips - "Version updated ...", "N sections", "N min read".
	   The owner 17/09/26 23:17: "those texts are thin and need to have the change
	   like the peptides type selection. same font thickness and black text."
	   ~~Space Mono 10px, no weight, 0.12em, #4A5568~~ -> Sora from the body at
	   600, the weight the home filter pill actually renders, and #14161A
	   (15.9:1 on this #F2F3F5 fill). Size takes the handoff's small-text rule,
	   12px, since his instruction names thickness and colour and not size. */
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #14161A;
}

#novapep-legal .novapep-legal-intro {
	font-family: 'Sora', sans-serif;
	font-size: 16px;
	line-height: 1.75;
	color: #4A5568;
	max-width: 76ch;
	margin: 22px 0 0;
}

#novapep-legal .novapep-legal-section {
	padding-top: 30px;
	margin-top: 30px;
	border-top: 1px solid #EDEFF2;
	scroll-margin-top: 130px;
}

#novapep-legal .novapep-legal-section__head {
	display: grid;
	grid-template-columns: 34px 1fr;
}

#novapep-legal .novapep-legal-section__index {
	font-family: 'Space Mono', ui-monospace, 'SF Mono', Consolas, monospace;
	font-size: 12px;
	/* 2.54 on white, well below AA. Now 4.85. The SECOND of the two legal
	   index selectors - the first pass fixed only .novapep-legal-toc__index
	   because the audit's sample rows happened to name that one, and the
	   count of 28 was read as one selector when it was two. */
	color: #6A7280;
}

#novapep-legal .novapep-legal-section__heading {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: #0A0A0A;
	margin: 0;
}

#novapep-legal .novapep-legal-section__body {
	padding-left: 48px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

#novapep-legal .novapep-legal-section__body p {
	font-family: 'Sora', sans-serif;
	font-size: 15px;
	line-height: 1.78;
	color: #4A5568;
	max-width: 74ch;
	margin: 0;
}

#novapep-legal .novapep-legal-table {
	display: grid;
	gap: 1px;
	background: #EDEFF2;
	border-radius: 8px;
	overflow: hidden;
}

#novapep-legal .novapep-legal-table__row {
	display: grid;
	grid-template-columns: 200px 1fr;
	padding: 12px 16px;
	background: #FFFFFF;
}

#novapep-legal .novapep-legal-table__key {
	font-family: 'Space Mono', ui-monospace, 'SF Mono', Consolas, monospace;
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #6B6B6B;
}

#novapep-legal .novapep-legal-table__value {
	font-family: 'Sora', sans-serif;
	font-size: 14px;
	color: #0A0A0A;
}

#novapep-legal .novapep-legal-footnote {
	margin-top: 34px;
	padding: 22px 24px;
	background: #F5F6F8;
	border-radius: 10px;
}

#novapep-legal .novapep-legal-footnote__eyebrow {
	display: block;
	font-family: 'Space Mono', ui-monospace, 'SF Mono', Consolas, monospace;
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #6B6B6B;
	margin-bottom: 8px;
}

#novapep-legal .novapep-legal-footnote p {
	font-family: 'Sora', sans-serif;
	font-size: 13px;
	line-height: 1.6;
	color: #4A5568;
	margin: 0;
}

#novapep-legal .novapep-legal-cta-band {
	background: #FFFFFF;
	text-align: center;
	padding: 56px 40px;
}

#novapep-legal .novapep-legal-cta-band__title {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 24px;
	font-weight: 600;
	color: #0A0A0A;
	margin: 0 0 12px;
}

#novapep-legal .novapep-legal-cta-band__link {
	display: inline-flex;
	align-items: center;
	height: 46px;
	padding: 0 24px;
	background: #0A0A0A;
	color: #FFFFFF;
	font-family: 'Sora', sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

@media screen and (max-width: 989px) {
	#novapep-legal .novapep-legal-body__inner {
		grid-template-columns: 1fr;
	}

	#novapep-legal .novapep-legal-rail {
		position: static;
	}

	#novapep-legal .novapep-legal-hero__title {
		font-size: 36px;
	}

	#novapep-legal .novapep-legal-content {
		padding: 28px 24px 32px;
	}

	#novapep-legal .novapep-legal-section__body {
		padding-left: 0;
	}
}

#novapep-legal .novapep-legal-switcher,
#novapep-legal .novapep-legal-index,
#novapep-legal .novapep-legal-foot {
	display: none;
}

@media screen and (max-width: 749px) {
	#novapep-legal .novapep-legal-hero {
		padding: 26px 20px 24px;
	}

	#novapep-legal .novapep-legal-hero__inner {
		padding: 0;
	}

	#novapep-legal .novapep-legal-hero__pill {
		gap: 7px;
		padding: 6px 12px;
		font-size: 9px;
		color: rgba(255, 255, 255, 0.8);
		margin-bottom: 14px;
	}

	#novapep-legal .novapep-legal-hero__title {
		font-size: 32px;
		line-height: 1.04;
		margin: 0 0 9px;
	}

	#novapep-legal .novapep-legal-hero__lede {
		font-size: 14px;
		line-height: 1.6;
	}

	#novapep-legal .novapep-legal-body {
		background: #FFFFFF;
		padding: 0;
	}

	#novapep-legal .novapep-legal-body__inner {
		display: block;
		padding: 0;
	}

	#novapep-legal .novapep-legal-rail,
	#novapep-legal .novapep-legal-cta-band {
		display: none;
	}

	#novapep-legal .novapep-legal-switcher {
		display: flex;
		gap: 6px;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 14px 20px;
		background: #EEF1F4;
		border-bottom: 1px solid #D6DAE0;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	#novapep-legal .novapep-legal-switcher::-webkit-scrollbar {
		width: 0;
		height: 0;
	}

	#novapep-legal .novapep-legal-switcher__chip {
		flex-shrink: 0;
		display: inline-flex;
		align-items: center;
		height: 32px;
		padding: 0 13px;
		background: #FFFFFF;
		border: 1px solid #D6DAE0;
		color: #4A5568;
		font-family: 'Sora', sans-serif;
		font-size: 12px;
		font-weight: 400;
		white-space: nowrap;
		text-decoration: none;
	}

	#novapep-legal .novapep-legal-switcher__chip.is-current {
		background: #0A0A0A;
		border-color: #0A0A0A;
		color: #FFFFFF;
		font-weight: 600;
	}

	#novapep-legal .novapep-legal-index {
		display: block;
		border-bottom: 1px solid #EDEFF2;
	}

	#novapep-legal .novapep-legal-index__summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 15px 20px;
		cursor: pointer;
		list-style: none;
	}

	#novapep-legal .novapep-legal-index__summary::-webkit-details-marker {
		display: none;
	}

	#novapep-legal .novapep-legal-index__label {
		font-family: 'Space Mono', ui-monospace, 'SF Mono', Consolas, monospace;
		font-size: 9px;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: #6B6B6B;
	}

	#novapep-legal .novapep-legal-index__chevron {
		display: grid;
		place-items: center;
		width: 22px;
		height: 22px;
		color: #0A0A0A;
	}

	#novapep-legal .novapep-legal-index[open] .novapep-legal-index__chevron {
		transform: rotate(180deg);
	}

	#novapep-legal .novapep-legal-index__list {
		padding: 0 20px 8px;
	}

	#novapep-legal .novapep-legal-index__list .novapep-legal-toc-row {
		grid-template-columns: 24px 1fr;
		gap: 10px;
		align-items: baseline;
		padding: 9px 0;
		border-top: 1px solid #EDEFF2;
	}

	#novapep-legal .novapep-legal-content {
		border: none;
		border-radius: 0;
		padding: 0;
	}

	#novapep-legal .novapep-legal-meta {
		gap: 6px;
		padding: 14px 20px 16px;
		border-bottom: 1px solid #EDEFF2;
	}

	#novapep-legal .novapep-legal-chip {
		height: 26px;
		padding: 0 10px;
		font-size: 9px;
	}

	#novapep-legal .novapep-legal-intro {
		margin: 0;
		padding: 18px 20px 8px;
		font-size: 15px;
		line-height: 1.75;
		max-width: none;
	}

	#novapep-legal .novapep-legal-section {
		padding: 20px 20px 0;
		margin-top: 20px;
	}

	#novapep-legal .novapep-legal-section__head {
		grid-template-columns: 26px 1fr;
		gap: 11px;
		align-items: baseline;
	}

	#novapep-legal .novapep-legal-section__index {
		font-size: 11px;
		letter-spacing: 0.1em;
	}

	#novapep-legal .novapep-legal-section__heading {
		font-size: 20px;
		line-height: 1.25;
	}

	#novapep-legal .novapep-legal-section__body {
		padding-left: 0;
		gap: 12px;
		margin-top: 11px;
	}

	#novapep-legal .novapep-legal-section__body p {
		font-size: 14px;
		line-height: 1.78;
		max-width: none;
	}

	#novapep-legal .novapep-legal-table {
		border: 1px solid #EDEFF2;
		border-radius: 0;
	}

	#novapep-legal .novapep-legal-table__row {
		grid-template-columns: 1fr;
		gap: 3px;
		padding: 11px 13px;
	}

	#novapep-legal .novapep-legal-table__key {
		font-size: 9px;
	}

	#novapep-legal .novapep-legal-table__value {
		line-height: 1.5;
	}

	#novapep-legal .novapep-legal-footnote {
		margin: 24px 20px 0;
		padding: 16px 18px;
		border-radius: 0;
	}

	#novapep-legal .novapep-legal-footnote__eyebrow {
		font-size: 9px;
		letter-spacing: 0.18em;
		margin-bottom: 7px;
	}

	#novapep-legal .novapep-legal-footnote p {
		line-height: 1.7;
	}

	#novapep-legal .novapep-legal-foot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin: 18px 20px 22px;
		padding-top: 16px;
		border-top: 1px solid #EDEFF2;
	}

	#novapep-legal .novapep-legal-foot__top {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		height: 40px;
		padding: 0 15px;
		border: 1px solid #D6DAE0;
		font-family: 'Sora', sans-serif;
		font-size: 13px;
		font-weight: 500;
		color: #0A0A0A;
		text-decoration: none;
	}

	#novapep-legal .novapep-legal-foot__top-icon {
		display: flex;
	}

	#novapep-legal .novapep-legal-foot__ask {
		font-family: 'Space Mono', ui-monospace, 'SF Mono', Consolas, monospace;
		font-size: 9px;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: #6B6B6B;
		text-decoration: underline;
		text-underline-offset: 3px;
	}
}

/* ------------------------------------------------------ 404 (main-404.liquid) */

#novapep-404-section .novapep-404 {
	background: #FFFFFF;
}

#novapep-404-section .novapep-404__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 40px;
}

#novapep-404-section .novapep-404__block {
	box-sizing: border-box;
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
	padding: 62px 48px 54px;
	font-family: 'Sora', sans-serif;
	color: #0A0A0A;
}

#novapep-404-section .novapep-404__numeral {
	display: block;
	width: 100%;
	height: 92px;
	overflow: visible;
	max-width: none;
}

#novapep-404-section .novapep-404__body-phone {
	display: none;
}

#novapep-404-section .novapep-404__numeral text {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 104px;
	font-weight: 600;
	letter-spacing: -0.04em;
	fill: none;
	stroke: #0A0A0A;
	stroke-width: 1.4;
}

#novapep-404-section .novapep-404__heading {
	margin: 20px 0 0;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 30px;
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.2;
	color: #0A0A0A;
}

#novapep-404-section .novapep-404__body {
	margin: 11px 0 0;
	font-size: 16px;
	line-height: 1.7;
	color: #4A5568;
	max-width: 56ch;
}

#novapep-404-section .novapep-404__rows {
	display: flex;
	flex-direction: column;
	margin-top: 28px;
	border-top: 1px solid #C9CDD2;
}

#novapep-404-section .novapep-404__row {
	display: grid;
	grid-template-columns: 34px 1fr 152px 20px;
	gap: 18px;
	align-items: baseline;
	padding: 17px 0;
	border-bottom: 1px solid #E8EAED;
	text-decoration: none;
	color: inherit;
}

#novapep-404-section .novapep-404__row-index {
	font-family: 'Space Mono', ui-monospace, 'SF Mono', Consolas, monospace;
	font-size: 11px;
	/*
	 * 2.54 on white, below AA. Now 4.85, matching the legal TOC and section
	 * indexes and the About step numbers.
	 *
	 * FOURTH instance of one pattern: #9CA3AF is the theme's MONO-ON-DARK
	 * grey, where it measures 7.80. Every time it has been used for a small
	 * index number on a LIGHT ground it has failed at exactly 2.54. The
	 * colour is not wrong; the ground it was put on is.
	 *
	 * The 404 was not in the 16/09 contrast pass because nothing links to it
	 * and it has to be reached by requesting a URL that does not exist.
	 */
	color: #6A7280;
}

#novapep-404-section .novapep-404__row-text {
	display: contents;
}

#novapep-404-section .novapep-404__row-label {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: #0A0A0A;
}

#novapep-404-section .novapep-404__row-meta {
	font-family: 'Space Mono', ui-monospace, 'SF Mono', Consolas, monospace;
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #6B6B6B;
	text-align: right;
	white-space: nowrap;
}

#novapep-404-section .novapep-404__row-arrow {
	color: #6B6B6B;
	font-size: 15px;
}

@media screen and (max-width: 749px) {
	#novapep-404-section .novapep-404__inner {
		padding: 0;
	}

	#novapep-404-section .novapep-404__block {
		max-width: none;
		padding: 34px 20px 30px;
	}

	#novapep-404-section .novapep-404__numeral {
		height: 62px;
	}

	#novapep-404-section .novapep-404__numeral text {
		font-size: 70px;
		letter-spacing: -0.035em;
	}

	#novapep-404-section .novapep-404__heading {
		margin-top: 16px;
		font-size: 24px;
	}

	#novapep-404-section .novapep-404__body {
		margin-top: 9px;
		font-size: 14px;
		line-height: 1.65;
		max-width: none;
	}

	#novapep-404-section .novapep-404__body-desktop {
		display: none;
	}

	#novapep-404-section .novapep-404__body-phone {
		display: inline;
	}

	#novapep-404-section .novapep-404__rows {
		margin-top: 22px;
	}

	#novapep-404-section .novapep-404__row {
		grid-template-columns: 26px 1fr 16px;
		gap: 12px;
		align-items: center;
		padding: 13px 0;
	}

	#novapep-404-section .novapep-404__row-index {
		font-size: 10px;
	}

	#novapep-404-section .novapep-404__row-text {
		display: flex;
		flex-direction: column;
		gap: 3px;
		min-width: 0;
	}

	#novapep-404-section .novapep-404__row-label {
		font-size: 17px;
	}

	#novapep-404-section .novapep-404__row-meta {
		font-size: 9px;
		text-align: left;
	}

	#novapep-404-section .novapep-404__row-arrow {
		font-size: 14px;
	}
}

/* =====================================================================
   "COMMON QUESTIONS" ON ONE LINE - 13/09/26 00:02

   The owner: "common quesiton is 2 lines in contact make it one".

   Measured on /contact/ at 390. The heading is 36px in a 342px column,
   and "Common questions" needs more than that, so it broke over two
   lines at 94px tall. Every size was tried against the real column:

     36px  text 307+ wide   WRAPS      box 94px, two lines
     32px  text 307 wide    fits       box 42px, one line
     30px  text 289 wide    fits
     26px  text 252 wide    fits

   32px is the largest that holds one line, with 35px to spare, so the
   heading keeps as much of its weight as the column allows.

   PHONE ONLY. The desktop column is wide enough for 36px and is not
   touched.
   ===================================================================== */

@media (max-width: 767px) {

	.novapep-contact__questions-heading {
		font-size: 32px;
	}

	/*
	 * MOVED HERE 16/09/26 from the max-width:749px block above, where it had
	 * never applied because the unconditional rule further down this file
	 * out-ordered it. The breakpoint moves 749 -> 767 deliberately, to match
	 * the heading it now sits beside: a boundary that has never rendered is
	 * not worth preserving.
	 */
	.novapep-contact__questions-subheading {
		font-size: 14px;
	}
}


/* =====================================================================
   COA AND FAQ HEROES, RETYPED TO THE CATALOGUE HERO - 13/09/26 00:30

   The owner: "the heros text and search bar of COA and faq pages are
   outdated. Make them like catalogue and about us".

   Measured, all four heroes at 1440, before writing:

                    CATALOGUE            COA / FAQ
     heading        clamp(30,6vw,54)     48px flat
                    -0.034em, lh 1.02    default tracking
     lede           17 / 500  #C4CCD6    16 / 400  #9CA3AF
     search field   54px, 15 / 500       56px, 15 / 400
     placeholder    #8E99A6              inherited grey
     meta line      13 / 500  #8E99A6    COA 13/400 #6B6B6B
                                         FAQ 11/400 Space Mono

   TYPE AND COLOUR ONLY. The three heroes are not one component and this
   does not try to make them one: COA keeps its Search button, FAQ keeps
   its own field, and neither page's markup or horizontal padding is
   touched. What changes is the scale and the greys, which is what reads
   as "outdated" beside the catalogue.

   The heading takes the catalogue's clamp rather than a fixed 48, so it
   scales down the same way on a phone instead of holding 48 in a 342px
   column.
   ===================================================================== */

/* ---------------------------------------------------------- heading */
/*
 * MEASURED ON THE LIVE PAGE 18/09/26 00:08 AND CORRECTED HERE.
 *
 * The 17/09 handoff sets the COA hero at 62 / -0.038em / lh 1.02, and that was
 * written next to the original declaration earlier in this file. It rendered
 * 54px, because THIS rule is unconditional and later, so it won at every
 * width - the fourth instance of trap 2 tonight. The scale now lives where the
 * winning rule is (trap 55), and the FAQ hero keeps the clamp it had.
 *
 * COA: 62 desktop, 52 tablet, 34 phone. FAQ: unchanged.
 */
.novapep-coa-hero__heading,
.novapep-faq-hero__heading {
	margin: 20px 0 0;
	font-family: var(--np-font-heading);
	font-size: clamp(30px, 6vw, 54px);
	font-weight: 600;
	letter-spacing: -0.034em;
	line-height: 1.02;
}

.novapep-coa-hero__heading {
	font-size: 62px;
	letter-spacing: -0.038em;
}

@media screen and (max-width: 1239px) {

	.novapep-coa-hero__heading {
		font-size: 52px;
	}
}

@media screen and (max-width: 749px) {

	.novapep-coa-hero__heading {
		font-size: 34px;
	}
}

/* ------------------------------------------------------------- lede */
.novapep-coa-hero__body p,
.novapep-faq-hero__body p {
	margin: 14px 0 0;
	max-width: 60ch;
	color: #C4CCD6;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.55;
}

/* -------------------------------------------------------- the pill */
.novapep-coa-hero__pill,
.novapep-faq-hero__pill {
	/* EXACTLY the About pill's box as well as its type - the owner 23:47: the
	   text grew and the outline did not. */
	gap: 7px;
	height: 28px;
	padding-inline: 13px;
	border: 1px solid rgba(255, 255, 255, 0.24);
	/* Takes the About pill's font and thickness - the owner 17/09/26 23:17, naming
	   the FAQ one directly. ~~Space Mono 10px / 500 / 0.16em~~ -> Sora from the
	   body, 11px / 700 / 0.09em, solid white.
	   NOTE: the 17/09 handoff specs the COA status pill at Sora 12px / 700 /
	   0.1em, one pixel and one hundredth apart from About's. His instruction is
	   the newer and the explicit one, so both take About's values and the
	   handoff's pill figures are a listed deviation, not an oversight. */
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #FFFFFF;
}

.novapep-coa-hero__pill-dot,
.novapep-faq-hero__pill-dot {
	width: 6px;
	height: 6px;
	background: var(--np-dot);
}

/* ------------------------------------------------------ search field */
.novapep-coa-search__input,
.novapep-faq-search__input {
	height: 54px;
	background: #17191D;
	border: 1px solid rgba(255, 255, 255, 0.2);
	font-family: var(--np-font-body);
	font-size: 15px;
	font-weight: 500;
	color: var(--np-panel);
}

.novapep-coa-search__input::placeholder,
.novapep-faq-search__input::placeholder {
	color: #8E99A6;
}

.novapep-coa-search__icon,
.novapep-faq-search__icon {
	color: #8E99A6;
}

/*
 * COA's Search button is kept - it is a real control the catalogue does
 * not have - but matched to the field's new height so the row is level.
 */
.novapep-coa-search__submit {
	height: 54px;
	font-size: 15px;
	font-weight: 600;
}

/* --------------------------------------------------------- meta line */
.novapep-coa-search__hint,
.novapep-faq-search__hint {
	font-family: var(--np-font-body);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	color: #8E99A6;
}


/* =====================================================================
   THE CONTACT BAND, AND THE CATALOGUE FILTERS CENTRED - 13/09/26 00:38

   The owner, 00:35: "center the desktop product category filteres", then
   "make the contact us section in faq has to be like the about us one",
   then "add it to the coa page too ... make sure it replaces the cant
   find your compounds request a certificate question".

   --- 1. THE FILTER ROW ---------------------------------------------

   Measured on /shop/ at 1440: the row is a horizontal SCROLLER
   (overflow-x: auto, nowrap, -40px bleed) and its content spanned
   53..1214 inside a 1320 track - 40px of slack left, 198 right.

   `justify-content: center` is the wrong tool for a scroller: when the
   content overflows, centring pushes the first item to a negative
   offset that cannot be scrolled back to. `width: max-content` with
   `margin-inline: auto` centres only while there is room and falls back
   to a normal left-origin scroll when there is not. Measured:

     1600  L=119 R=119  centred
     1440  L=119 R=119  centred
     1240  L=40  R=-193 scrolls, first pill still reachable
      390  L=12  R=-799 scrolls, unchanged

   Desktop only, as asked - the phone rail is untouched.

   --- 2. THE CONTACT BAND -------------------------------------------

   FAQ and COA each had their own centred CTA (28px heading, 15/400
   copy, a 52px button) while About has a white panel with the copy left
   and the button right. About's is the one he wants, so its numbers are
   reproduced here and FAQ/COA move onto this class.

   ABOUT IS NOT TOUCHED. about.css is deliberately a separate file -
   its own comment says so, because About is the first surface rebuilt
   to the 08/09 handoff and has to roll back on its own. Rewriting its
   markup at this hour to share a class is a bigger risk than the
   duplication is a cost, so the values are copied and the verifier
   asserts the two definitions still agree.

     phone   column, gap 16, padding 24 20 26, panel, radius panel
             title 24/600 -0.025em   text 15/500   cta 50px, 0 24
     768+    row, space-between, gap 30, padding 28 32
             title 26   text 16   cta 54px, 0 28
     1520+   gap 36, padding 30 36, title 28
   ===================================================================== */

/*
 * 1. THE FILTER RULE LIVES IN card.css, NOT HERE - moved 13/09/26 00:46.
 *
 * pages.css is not loaded on /shop/ at all: the sheet order there is
 * base -> chrome -> card, because the shop archive is not a "page". The rule
 * sat here doing nothing, and card.css's own `.np-pills__list { margin: 0 }`
 * would have beaten it even if it had loaded. It is now in card.css, after
 * the component it overrides.
 */

/* 2. The band. */
.np-contact-band {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px 20px 26px;
	background: var(--np-panel);
	border-radius: var(--np-radius-panel);
	text-align: left;
}

.np-contact-band__copy {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.np-contact-band__title {
	margin: 0;
	font-family: var(--np-font-heading);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.15;
	color: var(--np-ink);
}

.np-contact-band__text {
	margin: 0;
	max-width: 64ch;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--np-body);
}

.np-contact-band__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: 50px;
	padding: 0 24px;
	border-radius: var(--np-radius-button);
	background: var(--np-ink);
	color: var(--np-panel);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

@media (min-width: 768px) {

	.np-contact-band {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 30px;
		padding: 28px 32px;
	}

	.np-contact-band__title {
		font-size: 26px;
	}

	.np-contact-band__text {
		font-size: 16px;
	}

	.np-contact-band__cta {
		flex-shrink: 0;
		height: 54px;
		padding: 0 28px;
	}
}

@media (min-width: 1520px) {

	.np-contact-band {
		gap: 36px;
		padding: 30px 36px;
	}

	.np-contact-band__title {
		font-size: 28px;
	}
}

/* ---------------------------------------------------------------------------
   THE HERO PILLS TAKE THE ABOUT PILL'S LARGER STEP - 17/09/26 23:50

   About is gap 7 / height 28 / padding 0 13 at base and gap 8 / 30 / 0 14 from
   750 up, with its dot going 6 -> 7. The owner: "remember exact same as the about
   us applied to the places where it contains that", after the type change left
   these boxes the same size as before and the labels looking crammed.

   Written at the foot of the file so nothing declared later can out-specify
   it, which is the trap that killed three rules earlier tonight.
--------------------------------------------------------------------------- */
@media screen and (min-width: 750px) {

	.novapep-coa-hero__pill,
	.novapep-faq-hero__pill,
	#novapep-legal .novapep-legal-hero__pill {
		gap: 8px;
		height: 30px;
		padding-inline: 14px;
	}

	.novapep-coa-hero__pill-dot,
	.novapep-faq-hero__pill-dot,
	#novapep-legal .novapep-legal-hero__dot {
		width: 7px;
		height: 7px;
	}
}

/* ===========================================================================
   THE COA LIBRARY - PORTED FROM FRAME 2-d, 17/09/26 23:55

   Rebuilt from the frame's own inline styles, not from the README prose. The
   first attempt was written from the prose, put the head inside the card, gave
   the card padding it does not have, and shipped without a footer. The owner saw
   it: "holy shit its soo bad".

   Every value below is read off `id="2-d"` in NovaPep Sep17.dc.html.
=========================================================================== */

.novapep-coa-library {
	background: #EDF1F5;
	padding: 44px 0 56px;
}


/* The head is a flex row ABOVE the card, baseline-aligned to the right-hand
   controls, with 9px between the eyebrow and the heading. */
.novapep-coa-library__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	padding: 0;
	border-bottom: none;
}

.novapep-coa-library__headgroup {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.novapep-coa-library__eyebrow {
	margin: 0;
	font-family: var(--np-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #4A5568;
}

.novapep-coa-library__heading {
	margin: 0;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 42px;
	font-weight: 600;
	letter-spacing: -0.032em;
	line-height: 1;
	color: #14161A;
}

/* The card: table only, no padding of its own, 22px under the head. */
.novapep-coa-library__panel {
	margin-top: 22px;
	background: #FFFFFF;
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(20, 22, 26, 0.04), 0 10px 28px rgba(20, 22, 26, 0.06);
	overflow: hidden;
}

/* FIVE columns, not the frame's six: novapep_coa_lots() has no method field,
   and adding one means asserting the method per lot in a data file, which is
   The owner's line to add. The other five widths are the frame's exactly. */
.novapep-coa-table__head,
.novapep-coa-table__row {
	display: grid;
	/* SIX columns, the frame's own widths - Method has data as of 18/09/26. */
	grid-template-columns: 150px 1fr 130px 120px 130px 128px;
	gap: 20px;
	align-items: center;
}

.novapep-coa-table__method {
	font-family: var(--np-font-body);
	font-size: 14px;
	font-weight: 500;
	color: #2F3742;
}

.novapep-coa-table__head {
	padding: 15px 26px;
	background: #F5F8FB;
	border-bottom: 1px solid #E1E4E8;
}

.novapep-coa-table__head span {
	font-family: var(--np-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #14161A;
}

.novapep-coa-table__row {
	padding: 16px 26px;
	border-bottom: 1px solid #E8EAED;
}

/* The batch reference is what a buyer matches against a physical label - the
   most-scanned value in the row, and at 400 it was the lightest thing in it. */
.novapep-coa-table__lot {
	font-family: 'Space Mono', monospace;
	font-size: 13px;
	font-weight: 700;
	color: #14161A;
}

.novapep-coa-table__compound {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.novapep-coa-table__compound-name {
	font-family: var(--np-font-body);
	font-size: 15px;
	font-weight: 600;
	color: #14161A;
}

.novapep-coa-table__compound-category {
	font-family: var(--np-font-body);
	font-size: 13px;
	font-weight: 500;
	color: #4A5568;
}

/* Green applies to a real purity figure and nothing else - BAC Water's
   em-dash keeps the muted ink, because a sterility pass is not a percentage.
   THE GREEN IS --np-green (#0E7A30), not the frame's #1E8E4A: that value is
   4.18 on white at 18px and 18px is not large-text exempt. Stated deviation. */
.novapep-coa-table__purity-value {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--np-green);
}

.novapep-coa-table__purity-dash {
	color: #4A5568;
}

.novapep-coa-table__tested {
	font-family: var(--np-font-body);
	font-size: 14px;
	font-weight: 500;
	color: #2F3742;
}

.novapep-coa-table__cert {
	display: flex;
	justify-content: flex-end;
}

/* Two states, never a dead or greyed link - the action exists in both. */
.novapep-coa-table__cert-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 15px;
	border-radius: 11px;
	font-family: var(--np-font-body);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.novapep-coa-table__cert-link--pdf {
	background: #FFFFFF;
	border: 1.5px solid #CFD8E2;
	color: #14161A;
}

.novapep-coa-table__cert-link--request {
	background: #14161A;
	border: 1.5px solid #14161A;
	color: #FFFFFF;
}

/* The footer sits inside the card, under the last row. */
.novapep-coa-table__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 16px 26px;
}

.novapep-coa-table__foot-count {
	font-family: var(--np-font-body);
	font-size: 14px;
	font-weight: 500;
	color: #4A5568;
}

.novapep-coa-table__foot-updated {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--np-font-body);
	font-size: 14px;
	font-weight: 500;
	color: #2F3742;
}

.novapep-coa-table__foot-dot {
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #3FBE6A;
}

/* -------------------------------------------- what a certificate covers */

.novapep-coa-covers {
	background: #EDF1F5;
	padding: 0 0 56px;
}


/* One panel, not three tiles: a heading plus three items is a single idea. */
.novapep-coa-covers__panel,
.novapep-coa-covers .novapep-coa-covers__grid {
	box-sizing: border-box;
}

.novapep-coa-covers__eyebrow {
	margin: 0;
	display: block;
	font-family: var(--np-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #4A5568;
}

.novapep-coa-covers__heading {
	margin: 9px 0 0;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 30px;
	font-weight: 600;
	letter-spacing: -0.028em;
	line-height: 1.05;
	color: #14161A;
}

.novapep-coa-covers__grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 0;
	margin-top: 26px;
}

/* THE GUTTER IS margin-right, NOT padding-right. With padding the three
   border-top rules butt together and render as one line across the panel;
   with margin each rule stops where its own column of text does. The frame
   says so and so does the README. */
.novapep-coa-covers__grid .novapep-sequence__item {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-right: 34px;
	padding: 18px 0 0;
	border-top: 2px solid #14161A;
}

.novapep-coa-covers__grid .novapep-sequence__number {
	font-family: 'Space Mono', monospace;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: #14161A;
}

.novapep-coa-covers__grid .novapep-sequence__title {
	margin: 0;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 21px;
	font-weight: 600;
	letter-spacing: -0.018em;
	color: #14161A;
}

.novapep-coa-covers__grid .novapep-sequence__text {
	margin: 0;
	font-family: var(--np-font-body);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.65;
	color: #2F3742;
}

.novapep-coa-covers__panel {
	margin-top: 22px;
	padding: 30px 34px 32px;
	background: #FFFFFF;
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(20, 22, 26, 0.04), 0 10px 28px rgba(20, 22, 26, 0.06);
}

/* -------------------------------------------------------- request band */

.novapep-coa-cta {
	background: #EDF1F5;
	padding: 0 0 56px;
}


.novapep-coa-request {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding: 30px 34px;
	background: #14161A;
	border-radius: 14px;
}

.novapep-coa-request__copy {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.novapep-coa-request__title {
	margin: 0;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.024em;
	color: #FFFFFF;
}

.novapep-coa-request__text {
	margin: 0;
	max-width: 62ch;
	font-family: var(--np-font-body);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
	color: #D3D9E0;
}

.novapep-coa-request__cta {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	height: 52px;
	padding: 0 28px;
	background: #FFFFFF;
	border-radius: 11px;
	color: #14161A;
	font-family: var(--np-font-body);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}

/* Phone stacks it and the button goes full width - frame 2-p. */
@media screen and (max-width: 749px) {

	.novapep-coa-request {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
	}

	.novapep-coa-request__cta {
		justify-content: center;
	}
}

/* ===========================================================================
   COA PAGE ALIGNMENT - one container for all four sections, 18/09/26 00:05

   The owner: "fix the alignment in the coa page. every single section needs a
   check." The cause was mine: I gave the library, the covers and the request
   band the frame's 1400/60 container and left the HERO on the ported Shopify
   rule at 1610/57.5. Two different left edges on one page, 2.5px and 210px
   apart, which is exactly what reads as misaligned.

   Both frames - 1b-d for the hero and 2-d for the library - carry the same
   inner: width 1400, padding 0 60. So all four take it, at every width, from
   one rule. The phone gutter is left at the ported 17.25px because nothing in
   the frames overrides it and it is not what he is looking at.
=========================================================================== */

.novapep-coa-hero .page-width,
.novapep-coa-library .page-width,
.novapep-coa-covers .page-width,
.novapep-coa-cta .page-width {
	width: 100%;
	max-width: 1400px;
	margin-inline: auto;
	box-sizing: border-box;
}

@media screen and (min-width: 750px) {

	.novapep-coa-hero .page-width,
	.novapep-coa-library .page-width,
	.novapep-coa-covers .page-width,
	.novapep-coa-cta .page-width {
		padding: 0 40px;
	}
}

@media screen and (min-width: 1240px) {

	.novapep-coa-hero .page-width,
	.novapep-coa-library .page-width,
	.novapep-coa-covers .page-width,
	.novapep-coa-cta .page-width {
		padding: 0 60px;
	}
}

/* The tablet table: five columns, the frame's own widths from 2-t. Method is
   already absent from this build, and 2-t drops it too, so the two agree. */
@media screen and (max-width: 1239px) {

	/* Tablet drops Method - the frame's 2-t widths. */
	.novapep-coa-table__head span:nth-child(3),
	.novapep-coa-table__row .novapep-coa-table__method {
		display: none;
	}

	.novapep-coa-table__head,
	.novapep-coa-table__row {
		grid-template-columns: 140px 1fr 112px 118px 124px;
		gap: 16px;
	}
}

/* ===========================================================================
   THREE ALIGNMENT FAULTS THE OWNER FOUND ON THE RENDER - 18/09/26 00:12

   All three were invisible to the checks I had run, because I measured
   containers and type and never the content inside them. Each one is
   diagnosed from the live page, not guessed.
=========================================================================== */

/* 1. The Certificate column head sat at the left of its cell while the button
      it labels is right-aligned - measured 1439 against the button's 1567
      right edge. Frame 2-d carries `text-align` per head cell for exactly
      this. */
.novapep-coa-table__head span:last-child {
	text-align: right;
}

/* 2. "What a certificate covers": columns 2 and 3 carried padding-left 40px
      from `.novapep-coa-covers__grid .novapep-sequence__item:nth-child(2)`
      inside a min-width:750 block. That is (0,3,0) and beat my (0,2,0) rule
      whatever the order, so the text started 40px in while the 2px rule above
      it spanned the whole column - column 1 aligned and 2 and 3 did not.
      Matched on specificity and zeroed; the gutter is margin-right, which is
      what keeps each rule stopping where its own text does. */
.novapep-coa-covers__grid .novapep-sequence__item:nth-child(2),
.novapep-coa-covers__grid .novapep-sequence__item:nth-child(3),
.novapep-coa-covers__grid .novapep-sequence__item:nth-child(n) {
	padding: 18px 0 0;
	margin-right: 34px;
}

/* 3. "Can't find your batch?" was centred: `.novapep-coa-cta__inner` computes
      text-align center and the band inherited it. The frame has the copy left
      and the button right. */
.novapep-coa-request {
	text-align: left;
}

/* ===========================================================================
   THE COA PAGE ON PHONE - 18/09/26 00:15, read off frame 2-p

   The owner: "you didnt even do mobile". Correct - and worse, the unified
   container rule I wrote for the desktop alignment set padding only at 750
   and 1240, which OVERRODE the ported 17.25px base and left every section
   edge-to-edge at 390. That was a regression I introduced an hour ago.

   Frame 2-p's section inner is `padding: 26px 14px 32px`, so the gutter is
   14px, the eyebrow is 11/700/0.09em and the heading is 30/600/-0.03em.
=========================================================================== */

.novapep-coa-hero .page-width,
.novapep-coa-library .page-width,
.novapep-coa-covers .page-width,
.novapep-coa-cta .page-width {
	padding: 0 14px;
}

@media screen and (max-width: 749px) {

	.novapep-coa-library__eyebrow {
		font-size: 11px;
		letter-spacing: 0.09em;
	}

	.novapep-coa-library__heading {
		font-size: 30px;
		letter-spacing: -0.03em;
		line-height: 1.02;
	}

	/* The head stacks over the card rather than sitting beside anything. */
	.novapep-coa-library__head {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	/*
	 * The covers stack, and the index goes BESIDE the text rather than above
	 * it - `30px 1fr` - which the README says saves about 90px with no type
	 * shrinking. Each rule then runs the full width of its own row.
	 */
	.novapep-coa-covers__grid {
		grid-template-columns: 1fr;
	}

	.novapep-coa-covers__grid .novapep-sequence__item:nth-child(n) {
		display: grid;
		grid-template-columns: 30px 1fr;
		column-gap: 0;
		row-gap: 6px;
		margin-right: 0;
		margin-top: 14px;
		padding: 14px 0 0;
	}

	.novapep-coa-covers__grid .novapep-sequence__number {
		grid-row: 1;
	}

	.novapep-coa-covers__grid .novapep-sequence__title,
	.novapep-coa-covers__grid .novapep-sequence__text {
		grid-column: 2;
	}

	.novapep-coa-covers__panel {
		padding: 24px 18px 26px;
	}

	.novapep-coa-request {
		padding: 24px 18px;
	}
}

/* ---------------------------------------------------------------------------
   THE DESKTOP GUTTERS, RE-DECLARED AFTER THE PHONE BASE - 18/09/26 00:17

   The phone block above sets `padding: 0 14px` unconditionally, and it is
   later in this file than the min-width blocks that set 40 and 60. A media
   query adds no specificity, so the 14px was winning at EVERY width and the
   desktop gutter measured 14px instead of 60 - cards at 267 where they should
   be 313.

   FIFTH instance of trap 2 in one session, and the second one I caused myself
   tonight. The lesson that keeps not sticking: an unconditional declaration
   written later beats every media query above it, so the base value goes
   FIRST and the breakpoints go LAST. Measured before and after.
--------------------------------------------------------------------------- */

@media screen and (min-width: 750px) {

	.novapep-coa-hero .page-width,
	.novapep-coa-library .page-width,
	.novapep-coa-covers .page-width,
	.novapep-coa-cta .page-width {
		padding: 0 40px;
	}
}

@media screen and (min-width: 1240px) {

	.novapep-coa-hero .page-width,
	.novapep-coa-library .page-width,
	.novapep-coa-covers .page-width,
	.novapep-coa-cta .page-width {
		padding: 0 60px;
	}
}

/* ===========================================================================
   THE COA PAGE ON PHONE, RETYPED TO FRAME 2-p - 18/09/26 00:22

   The first phone pass was written from the README's prose and was not the
   design. This is read off the frame's own inline styles, element by element.

   The structural change: on phone there is NO outer library panel. The frame
   puts separate white cards straight on the #EDF1F5 ground, 10px apart, and
   the footer line is CENTRED under them rather than split left and right.
=========================================================================== */

@media screen and (max-width: 749px) {

	/* The section: padding 26 14 32, eyebrow 11/700/0.09em, h 30/600/-0.03em. */
	.novapep-coa-library {
		padding: 26px 0 32px;
	}

	.novapep-coa-library__heading {
		margin: 8px 0 0;
	}

	/*
	 * No card wrapper on phone - the rows below are their own cards.
	 *
	 * AND THE CHILDREN ARE REORDERED. In the markup the footer sits after the
	 * TABLE, which is correct at desktop. On phone the table is display:none,
	 * so the footer floated up and rendered ABOVE the card list - measured at
	 * top 705 with the first card at 745. The frame puts the centred
	 * "N compounds - updated" line UNDER the cards. Flex order fixes it
	 * without moving the markup, which the desktop layout depends on.
	 */
	.novapep-coa-library__panel {
		display: flex;
		flex-direction: column;
		margin-top: 0;
		background: none;
		border-radius: 0;
		box-shadow: none;
		overflow: visible;
	}

	.novapep-coa-cards {
		order: 1;
	}

	.novapep-coa-table__foot {
		order: 2;
	}

	.novapep-coa-empty {
		order: 3;
	}

	.novapep-coa-cards {
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin-top: 16px;
	}

	.novapep-coa-card {
		padding: 15px 16px 16px;
		background: #FFFFFF;
		border-radius: 14px;
		box-shadow: 0 1px 2px rgba(20, 22, 26, 0.04), 0 8px 22px rgba(20, 22, 26, 0.05);
	}

	/* Header row: compound left, purity right-aligned beside it. */
	.novapep-coa-card__top {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 12px;
	}

	.novapep-coa-card__id {
		display: flex;
		flex-direction: column;
		gap: 3px;
		min-width: 0;
	}

	.novapep-coa-card__name {
		font-family: var(--np-font-body);
		font-size: 16px;
		font-weight: 600;
		line-height: 1.3;
		color: #14161A;
	}

	.novapep-coa-card__category {
		font-family: var(--np-font-body);
		font-size: 13px;
		font-weight: 500;
		color: #4A5568;
	}

	.novapep-coa-card__purity {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 2px;
		flex-shrink: 0;
	}

	.novapep-coa-card__purity .novapep-coa-table__purity-value {
		font-size: 19px;
		letter-spacing: -0.018em;
		line-height: 1;
	}

	.novapep-coa-card__label {
		font-family: var(--np-font-body);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: #4A5568;
	}

	/* Two columns under a hairline, action in the bottom right. */
	.novapep-coa-card__grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
		margin-top: 14px;
		padding-top: 13px;
		border-top: 1px solid #E8EAED;
	}

	.novapep-coa-card__cell {
		display: flex;
		flex-direction: column;
		gap: 3px;
	}

	/*
	 * text-align LEFT, stated. The old `.novapep-coa-card__value` rule from
	 * the previous card design carries `text-align: right`, and this block
	 * never overrode it - so "2026-07-31" sat hard against the right edge of
	 * its cell instead of under its own TESTED label. That is the gap the owner
	 * spotted between the design and the render.
	 */
	.novapep-coa-card__value {
		font-family: var(--np-font-body);
		font-size: 14px;
		font-weight: 500;
		color: #2F3742;
		text-align: left;
	}

	/*
	 * THE ACTION SITS IN COLUMN 2, ROW 2 - and it has to be said explicitly.
	 *
	 * The frame's grid has FOUR cells (Batch, Tested, Method, action) so the
	 * action lands bottom-right by flow. This build has no Method, so with
	 * three cells the action flowed into row 2 COLUMN 1 - bottom LEFT - which
	 * is what the owner was looking at. Measured: 31,469 before, 260,469 after,
	 * against a card whose content right edge is 360.
	 */
	.novapep-coa-card__action {
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		grid-column: 2;
		justify-self: end;
	}

	.novapep-coa-card__action .novapep-coa-table__cert-link {
		height: 40px;
		padding: 0 16px;
		justify-content: center;
	}

	/* One centred line, not the desktop's split row. */
	.novapep-coa-table__foot {
		justify-content: center;
		gap: 8px;
		margin-top: 16px;
		padding: 0;
	}

	/* Covers and the request band take the frame's phone paddings and sizes. */
	.novapep-coa-covers__panel {
		margin-top: 20px;
		padding: 20px 18px 22px;
	}

	.novapep-coa-covers__heading {
		margin: 8px 0 0;
		font-size: 23px;
		letter-spacing: -0.024em;
		line-height: 1.08;
	}

	.novapep-coa-covers__grid {
		margin-top: 18px;
	}

	.novapep-coa-covers__grid .novapep-sequence__item:nth-child(n) {
		gap: 12px;
		padding: 14px 0 0;
	}

	.novapep-coa-covers__grid .novapep-sequence__title {
		font-size: 18px;
	}

	.novapep-coa-covers__grid .novapep-sequence__text {
		font-size: 14px;
		line-height: 1.6;
	}

	.novapep-coa-request {
		margin-top: 20px;
		padding: 22px 20px 24px;
	}

	.novapep-coa-request__title {
		font-size: 22px;
	}

	.novapep-coa-request__text {
		margin-top: 8px;
		font-size: 15px;
	}

	.novapep-coa-request__cta {
		justify-content: center;
		height: 50px;
		margin-top: 16px;
	}
}

/* ---------------------------------------------------------------------------
   PENDING - a certificate that does not exist yet. 18/09/26 00:42

   The owner: "the coas with no result change the request button to pending and
   make it unclickable like the out of stock cards". So it is a DISABLED
   <button>, not a styled link, exactly as the Sold Out CTA in inc/card.php -
   it cannot be clicked, cannot be focused, and does not look like it can.

   Colours taken from that CTA rather than invented: the chip fill, the line
   border, and #616C79 for the label, which is the value that pass measured at
   AA on the chip ground.

   WCAG 1.4.3 exempts inactive controls, and the low contrast IS the
   affordance - the same reasoning the age gate's disabled Enter carries.
--------------------------------------------------------------------------- */

.novapep-coa-table__cert-link--pending {
	background: var(--np-chip);
	border: 1.5px solid var(--np-line);
	color: #616C79;
	cursor: not-allowed;
}

/* The leading dot belongs to the phone line only - on desktop the footer is a
   split row and the dot sits with "updated" on the right, as frame 2-d draws
   it. 18/09/26. */
.novapep-coa-table__foot > .novapep-coa-table__foot-dot {
	display: none;
}

@media screen and (max-width: 749px) {

	.novapep-coa-table__foot > .novapep-coa-table__foot-dot {
		display: block;
	}

	.novapep-coa-table__foot-updated .novapep-coa-table__foot-dot {
		display: none;
	}

	.novapep-coa-table__foot-count::after {
		content: " \00b7";
		color: #4A5568;
	}
}

/* ---------------------------------------------------------------------------
   THE REQUEST BAND: INHERITED TRACKING AND DOUBLED GAPS. 18/09/26 00:50

   The owner: "didnt fix the can find your batch spacing and the main text being
   bold". Both were real and neither showed up in a property check, because
   every value I had written WAS correct - the faults came from what the band
   inherited and from two spacings adding together.

   1. THE BODY TEXT CARRIED letter-spacing: 0.69px, inherited from the ported
      Shopify body rule. At 15px that reads as heavier, denser type and it
      forced an extra wrap - which is exactly "the main text being bold". The
      frame sets no tracking on this paragraph.

   2. THE SPACING WAS DOUBLED. The band is a flex column on phone with
      gap: 20px, and the CTA also carries margin-top: 16px, so the real gap
      was 36. Same again between the title and the text: the copy wrapper's
      gap: 8px plus the text's own margin-top: 8px. The frame spaces this
      band with MARGINS only, so the gaps go to zero rather than the margins
      being removed - margins are what the desktop layout uses too.
--------------------------------------------------------------------------- */

.novapep-coa-request__title {
	letter-spacing: -0.024em;
}

.novapep-coa-request__text {
	letter-spacing: normal;
}

@media screen and (max-width: 749px) {

	.novapep-coa-request,
	.novapep-coa-request__copy {
		gap: 0;
	}
}

/* ---------------------------------------------------------------------------
   THE SAME INHERITED TRACKING, EVERYWHERE ELSE ON THIS PAGE. 18/09/26 00:52

   Having found 0.69px on the request band's copy, I swept every COA element
   for it instead of waiting for the owner to find the next one. Five more carry
   it, and the frame sets none of them:

     card name 16/600 · card category 13/500 · card value 14/500 ·
     batch reference 13/700 · covers body 14/500

   It comes from the ported Shopify body rule and it is what makes text read
   subtly heavier and denser than the design at small sizes. Headings are NOT
   in this list - their negative em tracking is the frame's own and correct.
--------------------------------------------------------------------------- */

.novapep-coa-card__name,
.novapep-coa-card__category,
.novapep-coa-card__value,
.novapep-coa-card__label,
.novapep-coa-table__lot,
.novapep-coa-table__method,
.novapep-coa-table__tested,
.novapep-coa-table__compound-name,
.novapep-coa-table__compound-category,
.novapep-coa-table__foot-count,
.novapep-coa-table__foot-updated,
.novapep-coa-covers__grid .novapep-sequence__text,
.novapep-coa-hero__body,
.novapep-coa-search__hint {
	letter-spacing: normal;
}

/* ---------------------------------------------------------------------------
   TWO FIXES THE OWNER CALLED AT 00:54 - the band's copy, and the gap above the
   covers panel.

   1. THE BAND COPY IS SHORTER BELOW DESKTOP. Frame 2-d ends "...for that exact
      batch, usually the same working day."; 2-t and 2-p both end at "...that
      exact batch." At 390 the extra clause is a fourth line in a band the
      frame draws with three.

   2. THE WHITE SPACE BETWEEN THE FOOTER AND THE COVERS PANEL. The frame draws
      the whole phone page as ONE section - `padding: 26px 14px 32px` - with
      the panels 20px apart inside it. This build has three separate sections,
      each with its own vertical padding, so the footer-to-covers gap was the
      library's 32px bottom PLUS the covers' own padding PLUS the panel's 20px
      margin. On phone the section paddings go, and the 20px panel margins are
      the only spacing left, which is what the frame has.
--------------------------------------------------------------------------- */

.novapep-coa-request__text--short {
	display: none;
}

@media screen and (max-width: 1239px) {

	.novapep-coa-request__text--long {
		display: none;
	}

	.novapep-coa-request__text--short {
		display: block;
	}
}

@media screen and (max-width: 749px) {

	.novapep-coa-library {
		padding: 26px 0 0;
	}

	.novapep-coa-covers {
		padding: 0;
	}

	.novapep-coa-cta {
		padding: 0 0 32px;
	}
}

/* "the cant fin you batch text has to be larger to" - the owner, 18/09/26 00:55.
   The frame draws this heading at 22 on phone; he wants it bigger. Taken to
   26px, which is the DESKTOP frame's own value for the same heading rather
   than a number I picked - so it is still a value from the design. Tracking
   stays at the frame's -0.024em. Say the word if it wants to go further. */
@media screen and (max-width: 749px) {

	.novapep-coa-request__title {
		font-size: 26px;
	}
}

/*
 * p158, 22/10/26: the FAQ and COA searches carry 16px phone rules, and the
 * shared dark search-field rule above sets 15px to both AFTER them, with no
 * media query, so it won at every width (measured 15 at 390; traps.md #2).
 * iPhone Safari zooms on a field under 16px (traps.md #119). Last in the
 * file, so nothing later can undo it.
 */
@media screen and (max-width: 749px) {
	.novapep-coa-search__input,
	.novapep-faq-search__input {
		font-size: 16px;
	}
}