/* ==========================================================================
   Lovable landing pages: shared layer and components
   Loaded on every Lovable landing page, straight after novos.css. Each
   page's own section styles live in assets/css/lovable/<slug>.css, loaded
   after this file (novos_blocks_enqueue_lovable_assets() in
   inc/lovable-page-templates.php).
   ========================================================================== */

/* ==========================================================================
   Design-system layer
   The roles every landing page composes, mapped to theme.json tokens so
   the pages read like the homepage and PDP: sections on .nv-section with
   --nv-section-pad, theme h1/h2/h3, .nv-eyebrow labels, and text only in
   the body / small / mono sizes (mono, 0.78rem, is the floor).
   ========================================================================== */

/* Hero sections clear the fixed bulletin + nav, like the homepage hero. A
   template without the site header (FaceAge Results) has nothing to pull
   <main> up under. */

body:not(:has(.nv-nav)) main#main { margin-top: 0; }


.nv-lp-hero { padding-top: var(--nv-top-stack); }

/* Section surfaces. The page itself is beige (theme.json). */

.nv-lp-band--white { background: var(--nv-white); }

.nv-lp-band--ink { background: var(--nv-ink); color: var(--nv-white); }

.nv-lp-band--warm { background: var(--nv-ink-warm); color: var(--nv-white); }

.nv-lp-band--ink :is(h1, h2, h3),
.nv-lp-band--warm :is(h1, h2, h3) { color: var(--nv-white); }

/* Section head: optional eyebrow, the theme h2, then one or two leads. */

.nv-lp-head { max-width: 48rem; margin-bottom: var(--wp--preset--spacing--50); }

.nv-lp-head--center { margin-inline: auto; text-align: center; }

.nv-lp-head > .nv-eyebrow { display: block; margin: 0 0 var(--wp--preset--spacing--20); }

.nv-lp-head > :is(h1, h2) { margin: 0; }

.nv-lp-head > :is(h1, h2) + * { margin-top: var(--wp--preset--spacing--30); }

.nv-lp-head > :last-child { margin-bottom: 0; }

/* Text roles. */

.nv-lp-lead { margin: 0; font-size: var(--nv-fs-lead); line-height: 1.5; color: var(--nv-ink-60); }

.nv-lp-text { margin: 0; font-size: var(--wp--preset--font-size--body); line-height: 1.58; color: var(--nv-ink-60); }

.nv-lp-small { margin: 0; font-size: var(--wp--preset--font-size--small); line-height: 1.55; color: var(--nv-ink-60); }

.nv-lp-fine { margin: 0; font-size: var(--wp--preset--font-size--mono); line-height: 1.5; color: var(--nv-ink-60); }

:is(.nv-lp-lead, .nv-lp-text, .nv-lp-small, .nv-lp-fine) + :is(.nv-lp-lead, .nv-lp-text, .nv-lp-small, .nv-lp-fine) { margin-top: var(--wp--preset--spacing--20); }

.nv-lp-strong { color: var(--nv-ink); font-weight: 600; }

.nv-lp-accent { color: var(--nv-orange); }

.nv-lp-card-title { margin: 0; font-family: var(--nv-serif); font-size: var(--nv-fs-lead); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--nv-ink); }

.nv-lp-band--ink :is(.nv-lp-lead, .nv-lp-text, .nv-lp-small),
.nv-lp-band--warm :is(.nv-lp-lead, .nv-lp-text, .nv-lp-small) { color: var(--nv-on-dark-muted); }

.nv-lp-band--ink .nv-lp-fine,
.nv-lp-band--warm .nv-lp-fine { color: color-mix(in srgb, var(--nv-white) 50%, transparent); }

.nv-lp-band--ink :is(.nv-lp-card-title, .nv-lp-strong),
.nv-lp-band--warm :is(.nv-lp-card-title, .nv-lp-strong) { color: var(--nv-white); }

/* novos_lp_faq() eyebrow above the FAQ title; outranks novos.css's
   `.nv-faq__left p` (ink-60, 34ch), which is meant for the intro line. */

.nv-faq__left > .nv-eyebrow { display: block; max-width: none; margin: 0 0 var(--wp--preset--spacing--20); color: var(--nv-orange-deep); }

/* Disclosure triggers: a visible keyboard focus ring (light on dark sections). */

.nv-disclosure__trigger:focus-visible { outline: 2px solid var(--nv-orange); outline-offset: 2px; }

.nv-disclosure--dark .nv-disclosure__trigger:focus-visible { outline-color: var(--nv-orange-soft); }

/* novos.css drops .nv-chip to 0.75rem on phones, under these pages' floor. */

@media (max-width: 620px) { .nv-chip { font-size: var(--nv-fs-mono); } }

/* Testimonial card (novos_lp_testimonial()). */

.nv-lp-testimonial { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); margin: 0; padding: var(--wp--preset--spacing--30); background: var(--nv-white); border-radius: var(--nv-radius-lg); }

.nv-lp-testimonial--beige { background: var(--nv-beige); }

.nv-lp-testimonial--lg { padding: var(--wp--preset--spacing--40); }

.nv-lp-testimonial--dark { background: color-mix(in srgb, var(--nv-white) 6%, transparent); border: 1px solid var(--nv-border-on-dark); }

.nv-lp-testimonial__stars { margin: 0; color: var(--nv-orange); letter-spacing: 0.08em; line-height: 1; }

.nv-lp-testimonial__quote { flex: 1; margin: 0; color: var(--nv-ink); }

.nv-lp-testimonial--dark .nv-lp-testimonial__quote { color: var(--nv-white); }

.nv-lp-testimonial__foot { display: flex; align-items: center; gap: var(--wp--preset--spacing--20); padding-top: var(--wp--preset--spacing--20); border-top: 1px solid var(--nv-ink-10); font-size: var(--wp--preset--font-size--small); }

.nv-lp-testimonial--dark .nv-lp-testimonial__foot { border-top-color: var(--nv-border-on-dark); }

.nv-lp-testimonial__avatar { width: 40px; height: 40px; }

.nv-lp-testimonial__name { font-weight: 600; color: var(--nv-ink); }

.nv-lp-testimonial--dark .nv-lp-testimonial__name { color: var(--nv-white); }

.nv-lp-testimonial__meta { font-weight: 400; color: var(--nv-ink-60); }

.nv-lp-testimonial--dark .nv-lp-testimonial__meta { color: var(--nv-on-dark-muted); }

/* Scientist / advisor card (novos_lp_person()). */

.nv-lp-person { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); margin: 0; padding: var(--wp--preset--spacing--30); background: var(--nv-white); border-radius: var(--nv-radius-lg); }

.nv-lp-person--beige { background: var(--nv-beige); }

.nv-lp-person--dark { background: color-mix(in srgb, var(--nv-white) 4%, transparent); border: 1px solid var(--nv-border-on-dark); }

.nv-lp-person--row { flex-direction: row; align-items: center; padding: var(--wp--preset--spacing--20); }

.nv-lp-person--center { text-align: center; }

.nv-lp-person__avatar { width: 64px; height: 64px; }

.nv-lp-person--center .nv-lp-person__avatar { margin-inline: auto; }

.nv-lp-person--row .nv-lp-person__avatar { width: 56px; height: 56px; }

.nv-lp-person__quote { flex: 1; margin: 0; font-style: italic; color: var(--nv-ink); }

.nv-lp-person__bio { flex: 1; }

.nv-lp-person__foot { display: flex; flex-direction: column; gap: 2px; padding-top: var(--wp--preset--spacing--10); border-top: 1px solid var(--nv-ink-10); }

.nv-lp-person--row .nv-lp-person__foot { padding-top: 0; border-top: 0; }

.nv-lp-person__name { font-family: var(--nv-serif); font-size: var(--wp--preset--font-size--small); font-weight: 600; line-height: 1.25; color: var(--nv-ink); }

.nv-lp-person--row .nv-lp-person__name { font-size: var(--wp--preset--font-size--body); }

.nv-lp-person__role { margin: 0; }

.nv-lp-person--dark :is(.nv-lp-person__name, .nv-lp-person__quote) { color: var(--nv-white); }

.nv-lp-person--dark .nv-lp-person__foot { border-top-color: var(--nv-border-on-dark); }

.nv-lp-person--dark :is(.nv-lp-person__role, .nv-lp-person__bio) { color: var(--nv-on-dark-muted); }

/* Statistic tile (novos_lp_stat()). */

.nv-lp-stat-tile { padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20); background: var(--nv-beige); border-radius: var(--nv-radius); text-align: center; }

.nv-lp-stat-tile--white { background: var(--nv-white); }

.nv-lp-stat-tile--dark { background: color-mix(in srgb, var(--nv-white) 6%, transparent); border: 1px solid var(--nv-border-on-dark); }

.nv-lp-stat-tile--left { text-align: left; }

.nv-lp-stat-tile--lg { padding: var(--wp--preset--spacing--40); border-radius: var(--nv-radius-lg); }

.nv-lp-stat-tile__value { margin: 0; font-family: var(--nv-serif); font-size: var(--nv-fs-h3); font-weight: 600; line-height: 1.1; color: var(--nv-ink); }

.nv-lp-stat-tile__value--accent { color: var(--nv-orange-deep); }

.nv-lp-stat-tile--dark .nv-lp-stat-tile__value { color: var(--nv-white); }

.nv-lp-stat-tile__label { margin: var(--wp--preset--spacing--10) 0 0; font-family: var(--nv-mono); font-size: var(--nv-fs-mono); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nv-ink-60); }

.nv-lp-stat-tile--dark .nv-lp-stat-tile__label { color: var(--nv-on-dark-muted); }

.nv-lp-stat-tile__note { margin-top: var(--wp--preset--spacing--10); }

/* Button rows. */

.nv-lp-actions { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); }

.nv-lp-head--center + .nv-lp-actions,
.nv-lp-actions--center { justify-content: center; }

/* ---------- Decorative heading underline (OrganicLine equivalent) ---------- */

.nv-organic-line {
	display: block;
	width: 100%;
	max-width: 480px;
	height: 20px;
	margin-top: 6px;
	color: var(--nv-ink-10);
}

/* ---------- EvidenceStep (Boost 5-node process flow) ---------- */

.nv-evidence-step-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--wp--preset--spacing--20);
}

.nv-evidence-step {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nv-evidence-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--nv-orange);
	color: var(--nv-white);
	font-family: var(--nv-mono);
	font-size: 0.85rem;
	font-weight: 700;
}

.nv-evidence-step__title {
	margin: 0;
	font-family: var(--nv-sans);
	font-weight: 650;
	color: var(--nv-white);
}

.nv-evidence-step__body {
	margin: 0;
	font-size: 0.9rem;
	color: var(--nv-on-dark-muted);
}

@media (prefers-reduced-motion: reduce) {
	.nv-mb__barchart-seg,
	.nv-mb__hero-caption span,
	.nv-mb__phases-panel,
	.nv-chip--link {
		transition: none;
	}
}

/* ==========================================================================
   Batch 3 shared commerce primitives (Core Pricing Section, Compact
   Purchase Teaser, Comparison Bar Chart — inc/lp-commerce.php) plus the
   generic image-slot placeholder used by pages missing source photography.
   Real shared theme files: one definition, mounted by every page that
   needs it (see SHARED.md). Interactivity lives in novos.js's shared
   [data-nv-toggle-group] controller + the nvCommerceSync listener.
   ========================================================================== */

.nv-lp-imgslot {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--nv-ink-05);
	border: 1px dashed var(--nv-ink-20);
	color: var(--nv-ink-60);
	font-family: var(--nv-mono);
	font-size: var(--nv-fs-mono);
	padding: var(--wp--preset--spacing--20);
}

/* ---------- Core Pricing Section ---------- */

.nv-pricing {
	background: var(--nv-beige);
	padding: var(--nv-section-pad) var(--nv-gutter);
	scroll-margin-top: var(--wp--preset--spacing--70);
}

.nv-pricing__grid {
	max-width: 1120px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

@media (max-width: 780px) {
	.nv-pricing__grid {
		grid-template-columns: 1fr;
	}

	.nv-pricing__grid > .nv-pricing__media {
		order: 1;
	}
}

.nv-pricing__media {
	position: sticky;
	top: calc(var(--nv-nav-h) + var(--wp--preset--spacing--20));
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

@media (max-width: 780px) {
	.nv-pricing__media {
		position: static;
	}
}

.nv-pricing__media img,
.nv-pricing__media .nv-lp-imgslot {
	width: 100%;
	aspect-ratio: 1 / 1;
	display: block;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--md);
}

.nv-pricing__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
	justify-content: center;
}

.nv-pricing__tags .nv-chip {
	background: var(--nv-white);
	border-color: var(--nv-ink-10);
	font-weight: 500;
}

.nv-pricing__trust {
	list-style: none;
	margin: 0;
	padding: var(--wp--preset--spacing--20);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	background: var(--nv-white);
	border: 1px solid var(--nv-ink-10);
	border-radius: var(--wp--custom--radius--sm);
}

.nv-pricing__trust li {
	display: flex;
	gap: var(--wp--preset--spacing--10);
	font-size: var(--nv-fs-mono);
	align-items: flex-start;
}

.nv-pricing__trust li::before {
	content: "\2713";
	color: var(--nv-orange);
	flex-shrink: 0;
}

.nv-pricing__headline {
	font-family: var(--nv-serif);
	font-weight: 600;
	letter-spacing: -0.035em;
	font-size: var(--nv-fs-h2);
	text-align: center;
	margin: 0 0 var(--wp--preset--spacing--20);
	line-height: 0.98;
}

.nv-pricing__stat {
	border-radius: var(--wp--custom--radius--sm);
	border: 1px solid color-mix(in srgb, var(--nv-orange) 30%, transparent);
	background: color-mix(in srgb, var(--nv-orange) 5%, transparent);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	display: flex;
	gap: var(--wp--preset--spacing--20);
	align-items: flex-start;
	margin-bottom: var(--wp--preset--spacing--30);
}

.nv-pricing__stat-pct {
	font-family: var(--nv-serif);
	font-size: var(--nv-fs-h3);
	font-weight: 600;
	color: var(--nv-orange);
	line-height: 1;
	flex-shrink: 0;
}

.nv-pricing__stat-note {
	display: block;
	font-size: var(--nv-fs-mono);
	color: var(--nv-ink-60);
	font-style: italic;
	margin-top: 4px;
}

.nv-pricing__flavor-label {
	text-align: center;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	margin: 0 0 var(--wp--preset--spacing--20);
}

.nv-pricing__flavors {
	display: flex;
	justify-content: center;
	gap: var(--wp--preset--spacing--10);
	flex-wrap: wrap;
	margin-bottom: var(--wp--preset--spacing--30);
}

/* Phones: the flavors share one row in equal columns (a long name wraps
   inside its pill) instead of leaving the last one alone on a second row. */
@media (max-width: 620px) {
	.nv-pricing__flavors {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}
}

.nv-pricing__flavor {
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius--xs);
	font-weight: 500;
	font-size: var(--nv-fs-mono);
	cursor: pointer;
	border: 2px solid var(--nv-ink-20);
	background: var(--nv-white);
	color: var(--nv-ink);
	transition: all 250ms var(--nv-ease);
}

.nv-pricing__flavor.is-active {
	border-color: var(--nv-orange);
	background: color-mix(in srgb, var(--nv-orange) 6%, transparent);
}

.nv-pricing__plan-label {
	text-align: center;
	font-family: var(--nv-mono);
	font-size: var(--nv-fs-mono);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nv-ink-60);
	margin: 0 0 var(--wp--preset--spacing--20);
}

.nv-pricing__plan {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	width: 100%;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius--xs);
	border: 1px solid var(--nv-ink-20);
	background: var(--nv-white);
	cursor: pointer;
	text-align: left;
	transition: all 250ms var(--nv-ease);
}

.nv-pricing__plan.is-active {
	border-color: color-mix(in srgb, var(--nv-orange) 40%, transparent);
	background: color-mix(in srgb, var(--nv-orange) 5%, transparent);
}

.nv-pricing__plans--list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	margin-top: var(--wp--preset--spacing--10);
}

.nv-pricing__plan--hero {
	position: relative;
	flex-direction: column;
	align-items: stretch;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
	border-width: 2px;
	margin-bottom: var(--wp--preset--spacing--10);
}

.nv-pricing__plan--hero.is-active {
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--nv-orange) 10%, transparent);
}

.nv-pricing__plan-badge {
	position: absolute;
	top: -12px;
	left: 20px;
	max-width: calc(100% - 32px);
	overflow: hidden;
	text-overflow: ellipsis;
	background: var(--nv-orange);
	color: var(--nv-white);
	font-family: var(--nv-mono);
	font-size: var(--nv-fs-mono);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius--pill);
	white-space: nowrap;
}

/* Centred on the card's top border, so a label that wraps to two lines grows
   both ways and every card's plan name stays on the same line. */
.nv-pricing__plan-badge--grid {
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	width: max-content;
	max-width: calc(100% - var(--wp--preset--spacing--30));
	white-space: normal;
	text-align: center;
}

.nv-pricing__plan-hero-row {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20);
	width: 100%;
}

.nv-pricing__plan-hero-body {
	flex: 1;
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	flex-wrap: wrap;
}

.nv-pricing__plan-name {
	margin: 0;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--body);
}

.nv-pricing__plan-price-line {
	margin: 4px 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--nv-ink-60);
}

.nv-pricing__plan--hero :is(.nv-pricing__plan-name, .nv-pricing__plan-price-line) {
	display: block;
}

.nv-pricing__plan-price-line del {
	margin-right: 4px;
}

.nv-pricing__plan-price-line .nv-pricing__plan-total {
	font-weight: 600;
	color: var(--nv-ink);
}

.nv-pricing__plan-save {
	margin-left: var(--wp--preset--spacing--10);
	color: var(--nv-orange);
	font-weight: 600;
}

.nv-pricing__plan-per-unit {
	margin: 0;
	font-family: var(--nv-serif);
	font-weight: 700;
	font-size: var(--nv-fs-h3);
	white-space: nowrap;
}

.nv-pricing__plan-unit-label {
	font-size: var(--nv-fs-mono);
	font-weight: 400;
	color: var(--nv-ink-60);
	font-family: var(--nv-sans);
}

.nv-pricing__plan-row-copy {
	flex: 1;
	text-align: left;
	font-size: var(--nv-fs-mono);
}

.nv-pricing__plan-row-price {
	font-size: var(--nv-fs-mono);
	color: var(--nv-ink-60);
	white-space: nowrap;
}

.nv-pricing__plans--grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--20);
}

@media (max-width: 560px) {
	.nv-pricing__plans--grid {
		grid-template-columns: 1fr;
	}
}

.nv-pricing__plan--grid {
	position: relative;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20) var(--wp--preset--spacing--20);
	border-width: 2px;
}

.nv-pricing__plan--grid.is-active {
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--nv-orange) 10%, transparent);
}

.nv-pricing__plan--grid .nv-pricing__plan-save {
	margin-left: 0;
}

.nv-pricing__radio {
	margin-top: 2px;
	width: 18px;
	height: 18px;
	border-radius: 999px;
	border: 2px solid var(--nv-ink-40);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.nv-pricing__plan--hero .nv-pricing__radio {
	width: 22px;
	height: 22px;
}

.nv-pricing__plan.is-active .nv-pricing__radio {
	border-color: var(--nv-orange);
}

.nv-pricing__radio::after {
	content: "";
	width: 60%;
	height: 60%;
	border-radius: 999px;
	background: var(--nv-orange);
	display: none;
}

.nv-pricing__plan.is-active .nv-pricing__radio::after {
	display: block;
}

.nv-pricing__cta-wrap {
	text-align: center;
	margin-top: var(--wp--preset--spacing--40);
}

.nv-pricing__microcopy {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-family: var(--nv-mono);
	font-size: var(--nv-fs-mono);
	color: var(--nv-ink-60);
}

/* ---------- Compact Purchase Teaser ---------- */

.nv-teaser {
	padding: var(--wp--preset--spacing--50) var(--nv-gutter);
	background: var(--nv-beige);
}

.nv-teaser__card {
	max-width: 900px;
	margin-inline: auto;
	background: var(--nv-white);
	border: 1px solid var(--nv-ink-10);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--30);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: var(--wp--preset--spacing--30);
	align-items: center;
}

@media (max-width: 620px) {
	.nv-teaser__card {
		grid-template-columns: 1fr;
	}
}

.nv-teaser__card img,
.nv-teaser__card .nv-lp-imgslot {
	width: 100%;
	aspect-ratio: 1 / 1;
	display: block;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--sm);
}

.nv-teaser__stat {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	background: color-mix(in srgb, var(--nv-orange) 8%, transparent);
	border-radius: var(--wp--custom--radius--pill);
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	margin-bottom: var(--wp--preset--spacing--20);
}

.nv-teaser__stat-pct {
	font-family: var(--nv-serif);
	font-weight: 700;
	color: var(--nv-orange);
	font-size: var(--wp--preset--font-size--body);
}

.nv-teaser__stat-label {
	font-family: var(--nv-mono);
	font-size: var(--nv-fs-mono);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.nv-teaser__headline {
	font-family: var(--nv-serif);
	font-weight: 600;
	font-size: var(--nv-fs-h3);
	margin: 0 0 var(--wp--preset--spacing--20);
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.nv-teaser__body {
	font-size: var(--wp--preset--font-size--small);
	color: var(--nv-ink-80);
	line-height: 1.6;
	margin: 0 0 var(--wp--preset--spacing--20);
}

.nv-teaser__bullets {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
}

.nv-teaser__bullets li {
	display: flex;
	gap: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--small);
}

.nv-teaser__bullets li::before {
	content: "\2713";
	color: var(--nv-orange);
}

.nv-teaser__microcopy {
	margin: var(--wp--preset--spacing--10) 0 0;
	font-family: var(--nv-mono);
	font-size: var(--nv-fs-mono);
	color: var(--nv-ink-60);
}

/* ---------- Comparison Bar Chart ---------- */

/* A standalone section: the design-system head (eyebrow, theme h2, lead)
   on the page container, with the chart itself kept to a readable width. */
.nv-leaderboard {
	background: var(--nv-white);
}

.nv-leaderboard__inner {
	max-width: 900px;
}

.nv-leaderboard__tabs {
	display: flex;
	gap: var(--wp--preset--spacing--10);
	flex-wrap: wrap;
	margin-bottom: var(--wp--preset--spacing--40);
}

.nv-leaderboard__tab {
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius--pill);
	border: 1.2px solid var(--nv-ink-20);
	background: var(--nv-white);
	color: var(--nv-ink);
	font-weight: 500;
	font-size: var(--nv-fs-mono);
	cursor: pointer;
	transition: all 250ms var(--nv-ease);
}

.nv-leaderboard__tab.is-active {
	border-color: var(--nv-ink);
	background: var(--nv-ink);
	color: var(--nv-white);
}

.nv-leaderboard__panel {
	border: 1px solid var(--nv-ink-10);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--nv-beige);
	padding: var(--wp--preset--spacing--30);
}

.nv-leaderboard__unit {
	font-family: var(--nv-mono);
	font-size: var(--nv-fs-mono);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--nv-ink-60);
	margin: 0 0 var(--wp--preset--spacing--20);
}

.nv-leaderboard__bar-row {
	margin-bottom: var(--wp--preset--spacing--20);
}

.nv-leaderboard__bar-head {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	margin-bottom: 4px;
}

.nv-leaderboard__bar-name {
	font-size: var(--wp--preset--font-size--small);
	color: var(--nv-ink-80);
}

.nv-leaderboard__bar-row--highlight .nv-leaderboard__bar-name {
	color: var(--nv-orange-deep);
	font-weight: 600;
}

.nv-leaderboard__bar-value {
	font-family: var(--nv-mono);
	font-size: var(--nv-fs-mono);
	font-weight: 600;
	color: var(--nv-ink);
}

.nv-leaderboard__bar-row--highlight .nv-leaderboard__bar-value {
	color: var(--nv-orange-deep);
}

.nv-leaderboard__bar-track {
	height: 8px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--nv-ink-10);
	overflow: hidden;
}

.nv-leaderboard__bar-fill {
	width: var(--nv-bar);
	height: 100%;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--nv-ink-40);
	transition: width 700ms var(--nv-ease);
}

.nv-leaderboard__bar-row--highlight .nv-leaderboard__bar-fill {
	background: var(--nv-orange);
}

.nv-leaderboard__caption {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--nv-fs-mono);
	color: var(--nv-ink-80);
	line-height: 1.6;
	background: var(--nv-white);
	border-radius: var(--wp--custom--radius--xs);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--20);
}

.nv-leaderboard__disclaimer {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-family: var(--nv-mono);
	font-size: var(--nv-fs-mono);
	color: var(--nv-ink-60);
	line-height: 1.6;
}

/* ============================================================
   Shared landing-page diagram primitives
   Markup comes from inc/lp-diagrams.php (novos_lp_ring /
   novos_lp_curve), behaviour from novos.js ([data-nv-ring] /
   [data-nv-curve]). Muscle's cycle dial, Energy's two orbital maps and
   Malate cycle, Healthspan's Hallmarks network, Energy's spike-vs-support
   graphic and Rhodiola meter, and Healthspan's artery toggle are all
   instances of these two blocks - nothing below is page-specific.
   ============================================================ */

/* ---------- Ring of nodes around a centre hub ---------- */

.nv-ring--buttons {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	max-width: 440px;
	margin-inline: auto;
}

.nv-ring__hub {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 34%;
	text-align: center;
	font-family: var(--nv-mono);
	font-size: var(--nv-fs-mono);
	letter-spacing: 0.03em;
	line-height: 1.4;
	color: color-mix(in srgb, var(--nv-white) 55%, transparent);
	pointer-events: none;
}

.nv-ring__btn {
	position: absolute;
	transform: translate(-50%, -50%);
	width: min(108px, 25%);
	height: min(108px, 25%);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 6px;
	line-height: 1.15;
	border: 2px solid var(--nv-border-on-dark);
	border-radius: 50%;
	background: transparent;
	color: var(--nv-on-dark-muted);
	font-family: var(--nv-sans);
	font-weight: 700;
	font-size: clamp(0.8rem, 2.6vw, 0.9rem);
	cursor: pointer;
	transition: background var(--nv-dur) var(--nv-ease), color var(--nv-dur) var(--nv-ease), border-color var(--nv-dur) var(--nv-ease);
}

.nv-ring__btn:hover {
	border-color: color-mix(in srgb, var(--nv-white) 55%, transparent);
	color: var(--nv-white);
}

.nv-ring__btn.is-active {
	background: var(--nv-white);
	border-color: var(--nv-white);
	color: var(--nv-ink);
}

.nv-ring__btn:focus-visible {
	outline: 2px solid var(--nv-orange-soft);
	outline-offset: 3px;
}

.nv-ring--svg {
	width: 100%;
}

.nv-ring__svg {
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}

.nv-ring__guide {
	fill: none;
	stroke: var(--nv-border-on-dark);
}

.nv-ring__chord {
	stroke: var(--nv-clinical-blue);
	stroke-width: 1;
	stroke-dasharray: 4 6;
	opacity: 0.4;
}

.nv-ring__spoke {
	stroke: var(--nv-border-on-dark);
	stroke-width: 1;
	transition: stroke var(--nv-dur) var(--nv-ease), stroke-width var(--nv-dur) var(--nv-ease);
}

.nv-ring__spoke.is-active {
	stroke: var(--nv-orange);
	stroke-width: 1.8;
}

.nv-ring__node {
	stroke-width: 1.4;
	transition: r var(--nv-dur-slow) var(--nv-ease), fill var(--nv-dur-slow) var(--nv-ease), stroke var(--nv-dur-slow) var(--nv-ease);
}

.nv-ring__node[role="button"] {
	cursor: pointer;
}

.nv-ring__node[role="button"]:focus-visible {
	outline: 2px solid var(--nv-orange-soft);
	outline-offset: 2px;
}

.nv-ring__node--pulse {
	animation: nv-node-pulse 1.8s ease-in-out infinite;
}

.nv-ring__node-text {
	font-family: var(--nv-sans);
	font-size: 9px;
	font-weight: 700;
	fill: var(--nv-ink-warm);
	pointer-events: none;
}

.nv-ring__node:not(.is-active) + .nv-ring__node-text {
	display: none;
}

.nv-ring__label {
	font-size: 13px;
	letter-spacing: 0.6px;
	fill: color-mix(in srgb, var(--nv-white) 75%, transparent);
	pointer-events: none;
}

.nv-ring__hub-ring {
	fill: color-mix(in srgb, var(--nv-orange-soft) 18%, transparent);
	stroke: var(--nv-orange-soft);
	stroke-width: 1;
}

.nv-ring__hub-text {
	font-family: var(--nv-mono);
	fill: var(--nv-white);
	letter-spacing: 1.5px;
	pointer-events: none;
}

/* ---------- Comparative / flow curve ---------- */

.nv-curve {
	width: 100%;
}

.nv-curve__svg {
	width: 100%;
	height: auto;
	display: block;
	/* Reduced motion parks the travelling node on the path's end point,
	   half outside the viewBox. */
	overflow: visible;
}

.nv-curve__path {
	transition: d var(--nv-dur-slow) var(--nv-ease);
}

.nv-curve__pulse {
	animation: nv-node-pulse 1.6s ease-in-out infinite;
	transition: opacity var(--nv-dur-slow) var(--nv-ease);
}

.nv-curve__pulse-label {
	font-size: 9px;
	fill: var(--nv-ink-warm);
	pointer-events: none;
	transition: opacity var(--nv-dur-slow) var(--nv-ease);
}

.nv-curve__text {
	font-family: var(--nv-mono);
}

@keyframes nv-node-pulse {

	0%,
	100% {
		opacity: 0.55;
	}

	50% {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nv-ring__node--pulse,
	.nv-curve__pulse,
	.nv-curve__pulse-label {
		animation: none;
	}

	.nv-ring__node--pulse,
	.nv-curve__pulse {
		opacity: 1;
	}

	.nv-curve__path,
	.nv-ring__node,
	.nv-ring__spoke {
		transition: none;
	}
}

/* Reduced motion: the pulsing nodes settle at their end state (full
   opacity) and the travelling node stops - novos.js also removes its
   animateMotion and parks it at the end of the path. */

/* ============================================================
   Shared landing-page furniture
   The same four gaps recur on every page in this migration set
   (COMPONENTS.md): a flat content card, a photo frame, the sticky
   scrollspy subnav and fixed-count card grids. Defined once here and
   used by muscle-, energy- and healthspan-benefits.
   ============================================================ */

/* Cards, panels and photo frames on the landing pages round at the
   homepage's card radius (theme.json radius.md) rather than the 32px the
   Lovable exports drew. Remapped once here, for every rule on these pages
   that reads --nv-radius-lg, instead of touching ninety-odd page rules.
   This stylesheet loads on landing pages only, so nothing else moves. */
.nv-main {
	--nv-radius-lg: var(--wp--custom--radius--md);
}

.nv-lp-card {
	background: var(--nv-white);
	border: 1px solid var(--nv-ink-10);
	border-radius: var(--nv-radius-lg);
	padding: var(--wp--preset--spacing--30);
}

.nv-lp-card--dark {
	background: color-mix(in srgb, var(--nv-white) 6%, transparent);
	border-color: var(--nv-border-on-dark);
	color: var(--nv-on-dark-muted);
}

.nv-lp-card--flush {
	padding: 0;
	overflow: hidden;
}

.nv-lp-card--accent {
	border: 2px solid color-mix(in srgb, var(--nv-orange) 30%, transparent);
}

.nv-lp-card--col {
	display: flex;
	flex-direction: column;
}

/* Card surfaces beyond the bordered white default. Modifiers stay after
   the base rule so they win at equal specificity. */

.nv-lp-card--beige { background: var(--nv-beige); border-color: transparent; }

.nv-lp-card--plain { border-color: transparent; }

.nv-lp-card--lg { padding: var(--wp--preset--spacing--40); }

.nv-lp-card__media {
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--nv-ink-05);
	overflow: hidden;
}

.nv-lp-card__media--wide {
	aspect-ratio: 16 / 10;
}

.nv-lp-card__media--square {
	aspect-ratio: 1 / 1;
	background: var(--nv-white);
}

.nv-lp-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.nv-lp-card__body {
	padding: var(--wp--preset--spacing--20);
}

.nv-lp-photo {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--nv-radius);
	overflow: hidden;
	background: var(--nv-ink-05);
}

.nv-lp-photo--tall {
	aspect-ratio: 4 / 5;
}

.nv-lp-photo--product {
	background: var(--nv-white);
}

.nv-lp-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Wide, short crops of people: without this the frame lands mid-torso and
   crops the face out. */

.nv-lp-photo--face img,
.nv-lp-card__media--face img {
	object-position: 50% 28%;
}

/* The frame's ratio, fit and radius modifiers: declared after the base
   rule and its img rule so they win at equal specificity. */

.nv-lp-photo--square { aspect-ratio: 1 / 1; }

.nv-lp-photo--wide { aspect-ratio: 16 / 10; }

.nv-lp-photo--portrait { aspect-ratio: 4 / 5; }

.nv-lp-photo--free { aspect-ratio: auto; }

.nv-lp-photo--contain img { object-fit: contain; }

.nv-lp-photo--top img { object-position: center 20%; }

.nv-lp-photo--lg { border-radius: var(--nv-radius-lg); }

.nv-lp-photo > .nv-lp-imgslot { width: 100%; height: 100%; border-radius: inherit; }

.nv-lp-band--ink .nv-lp-photo > .nv-lp-imgslot,
.nv-lp-band--warm .nv-lp-photo > .nv-lp-imgslot { background: transparent; border-color: var(--nv-border-on-dark); color: var(--nv-on-dark-muted); }

.nv-lp-avatar {
	border-radius: 50%;
	overflow: hidden;
	flex: none;
	background: var(--nv-ink-05);
}

.nv-lp-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 22%;
	display: block;
}

/* ---------- Sticky scrollspy subnav ---------- */

.nv-lp-subnav {
	position: sticky;
	top: 0;
	z-index: 80;
	background: color-mix(in srgb, var(--nv-beige) 92%, transparent);
	backdrop-filter: var(--nv-blur-nav);
	border-bottom: 1px solid var(--nv-ink-10);
}

/* The site nav hides on scroll-down and returns on scroll-up; the sub-nav
   steps down beneath it at the same pace instead of sliding under it. */
:is(.nv-lp-subnav, .nv-mb__subnav) {
	transition: top 0.34s var(--nv-ease);
}

body:has(.nv-nav:not(.nv-nav--hidden)) :is(.nv-lp-subnav, .nv-mb__subnav) {
	top: var(--nv-nav-h);
}

@media (prefers-reduced-motion: reduce) {
	:is(.nv-lp-subnav, .nv-mb__subnav) {
		transition: none;
	}
}

.nv-lp-subnav__progress {
	height: 3px;
	background: var(--nv-ink-10);
}

.nv-lp-subnav__fill {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--nv-orange-soft), var(--nv-orange));
}

.nv-lp-subnav__track {
	display: flex;
	align-items: center;
	gap: 8px;
	overflow-x: auto;
	padding: 10px var(--nv-gutter-wide);
	max-width: var(--nv-container-wide);
	margin-inline: auto;
}

.nv-lp-subnav__track .nv-filter-pill {
	padding: 8px 16px;
	font-size: 0.9rem;
}

.nv-lp-subnav__cta {
	margin-left: auto;
	flex: none;
	padding: 8px 16px;
	border-radius: var(--nv-radius-pill);
	background: var(--nv-orange);
	color: var(--nv-white);
	font-family: var(--nv-sans);
	font-weight: 700;
	font-size: 0.9rem;
	text-decoration: none;
	white-space: nowrap;
}

.nv-lp-subnav__cta:hover,
.nv-lp-subnav__cta:focus-visible {
	background: var(--nv-orange-deep);
	color: var(--nv-white);
}

/* ---------- Grids ---------- */

/* Fixed-count grids declare their column count: auto-fit orphans the last
   card whenever the item count is known. */

.nv-lp-grid {
	margin-top: var(--wp--preset--spacing--40);
	display: grid;
	gap: var(--wp--preset--spacing--20);
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.nv-lp-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nv-lp-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nv-lp-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.nv-lp-grid--5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.nv-lp-grid--6 {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 1199px) {
	.nv-lp-grid--5,
	.nv-lp-grid--6 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 1023px) {
	.nv-lp-grid--3,
	.nv-lp-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

@media (max-width: 599px) {
	.nv-lp-grid--2,
	.nv-lp-grid--3,
	.nv-lp-grid--4,
	.nv-lp-grid--5,
	.nv-lp-grid--6 {
		grid-template-columns: minmax(0, 1fr);
	}
}

.nv-lp-grid--loose { gap: var(--wp--preset--spacing--30); }

.nv-lp-grid--flush { margin-top: 0; }

.nv-lp-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: var(--wp--preset--spacing--50);
	align-items: center;
}

.nv-lp-split--top {
	align-items: start;
}

.nv-lp-split--aside {
	grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
}

@media (max-width: 899px) {
	.nv-lp-split--aside {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The hero shape (copy wider than media), an even pair, and a looser gap. */

.nv-lp-split--hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; }

.nv-lp-split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.nv-lp-split--wide { gap: var(--wp--preset--spacing--60); }

@media (max-width: 782px) {
	.nv-lp-split--hero,
	.nv-lp-split--even { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Evidence dot + label ---------- */

.nv-lp-evidence {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: var(--wp--preset--spacing--20);
	font-family: var(--nv-mono);
	font-size: var(--nv-fs-mono);
	color: var(--nv-ink-60);
}

.nv-lp-evidence--dark {
	color: var(--nv-on-dark-muted);
}

.nv-lp-evidence__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex: none;
	background: var(--nv-ink-40);
}

.nv-lp-evidence__dot--strong {
	background: var(--nv-clinical-green);
}

.nv-lp-evidence__dot--good {
	background: var(--nv-clinical-blue);
}

.nv-lp-evidence__dot--mixed {
	background: var(--nv-orange-soft);
}

.nv-lp-evidence__glyph {
	letter-spacing: 0.1em;
}

/* ---------- Click-to-reveal evidence badge ---------- */

.nv-lp-badge {
	margin-top: var(--wp--preset--spacing--20);
}

.nv-lp-badge__trigger {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	width: fit-content;
	text-align: left;
	border: 1px solid var(--nv-ink-20);
	background: var(--nv-ink-05);
	border-radius: var(--nv-radius-pill);
	padding: 7px 14px;
	font-family: var(--nv-sans);
	font-size: var(--nv-fs-mono);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--nv-ink);
	cursor: pointer;
	transition: background var(--nv-dur) var(--nv-ease);
}

.nv-lp-badge__trigger:hover {
	background: var(--nv-ink-10);
}

.nv-lp-badge__trigger:focus-visible {
	outline: 2px solid var(--nv-orange);
	outline-offset: 2px;
}

/* Two-bar plus that collapses to a minus while the explanation is open. */
.nv-lp-badge__icon {
	position: relative;
	flex: none;
	width: 10px;
	height: 10px;
}

.nv-lp-badge__icon::before,
.nv-lp-badge__icon::after {
	content: "";
	position: absolute;
	background: currentColor;
	transition: transform var(--nv-dur) var(--nv-ease);
}

.nv-lp-badge__icon::before {
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	transform: translateY(-50%);
}

.nv-lp-badge__icon::after {
	top: 0;
	left: 50%;
	width: 2px;
	height: 100%;
	transform: translateX(-50%);
}

.nv-lp-badge.is-open .nv-lp-badge__icon::after {
	transform: translateX(-50%) scaleY(0);
}

/* novos_lp_evidence_badge(): a dot coloured by evidence level. */
.nv-lp-badge__dot {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--nv-ink-60);
}

.nv-lp-badge__dot--strong { background: var(--nv-clinical-green); }

.nv-lp-badge__dot--clinical { background: var(--nv-clinical-blue); }

.nv-lp-badge__dot--observational { background: var(--nv-orange); }

.nv-lp-badge__dot--ingredient { background: var(--nv-orange-deep); }

.nv-lp-badge__dot--emerging { background: var(--nv-clinical-red); }

@media (prefers-reduced-motion: reduce) {
	.nv-lp-badge__trigger,
	.nv-lp-badge__icon::after {
		transition: none;
	}
}

.nv-lp-badge--dark .nv-lp-badge__trigger {
	border-color: var(--nv-border-on-dark);
	background: color-mix(in srgb, var(--nv-white) 8%, transparent);
	color: var(--nv-white);
}

.nv-lp-badge--dark .nv-lp-badge__trigger:hover {
	background: color-mix(in srgb, var(--nv-white) 16%, transparent);
}

.nv-lp-badge__body {
	display: none;
	margin-top: 8px;
	max-width: 48ch;
	color: var(--nv-ink-80);
	font-size: 0.9rem;
}

.nv-lp-badge--dark .nv-lp-badge__body {
	color: var(--nv-on-dark-muted);
}

.nv-lp-badge.is-open .nv-lp-badge__body {
	display: block;
}

/* ---------- Labelled value bar ---------- */

.nv-lp-bar + .nv-lp-bar {
	margin-top: 8px;
}

.nv-lp-bar__head {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 0.86rem;
	font-weight: 600;
}

.nv-lp-bar__track {
	height: 10px;
	border-radius: var(--nv-radius-pill);
	background: var(--nv-ink-10);
	margin-top: 4px;
	overflow: hidden;
}

.nv-lp-bar__track--tall {
	height: 20px;
}

.nv-lp-bar__fill {
	display: block;
	height: 100%;
	border-radius: var(--nv-radius-pill);
	background: var(--nv-orange);
}

/* ---------- Chip rows ---------- */

/* The trailing padding keeps a wrapped chip row off any divider or heading
   that follows it. */

.nv-lp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: var(--wp--preset--spacing--20);
	padding-bottom: 14px;
}

.nv-lp-chips--tight {
	gap: 8px;
}

/* ---------- Comparison tables ---------- */

.nv-lp-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 640px;
}

.nv-lp-table caption {
	text-align: left;
	font-family: var(--nv-mono);
	font-size: var(--nv-fs-mono);
	color: var(--nv-ink-60);
	padding-bottom: 12px;
}

.nv-lp-table th,
.nv-lp-table td {
	padding: 12px 10px;
	text-align: left;
	vertical-align: top;
}

.nv-lp-table thead th {
	border-bottom: 2px solid var(--nv-ink-20);
	font-family: var(--nv-sans);
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--nv-ink-60);
}

.nv-lp-table tbody tr {
	border-bottom: 1px solid var(--nv-ink-10);
}

.nv-lp-table tbody th {
	font-weight: 600;
	color: var(--nv-ink);
}

.nv-lp-table td {
	color: var(--nv-ink-80);
	font-size: 0.9rem;
}

.nv-lp-scroller {
	margin-top: var(--wp--preset--spacing--30);
	overflow-x: auto;
}

/* ---------- Mono footnote ---------- */

.nv-lp-note {
	margin-top: var(--wp--preset--spacing--20);
	font-family: var(--nv-mono);
	font-size: var(--nv-fs-mono);
	color: var(--nv-ink-60);
}

.nv-lp-note--dark {
	color: color-mix(in srgb, var(--nv-white) 65%, transparent);
}

.nv-lp-kicker {
	font-family: var(--nv-mono);
	font-size: var(--nv-fs-mono);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--nv-orange-deep);
	margin: 0;
}

.nv-lp-kicker--soft {
	color: var(--nv-orange-soft);
}

.nv-lp-kicker--muted {
	color: var(--nv-ink-60);
}

.nv-lp-quote {
	margin: var(--wp--preset--spacing--30) 0 0;
	border-left: 4px solid var(--nv-orange);
	padding-left: 20px;
	font-family: var(--nv-serif);
	font-size: var(--nv-fs-h3);
	font-weight: 600;
	line-height: 1.3;
	color: var(--nv-ink);
	max-width: 62ch;
}

.nv-lp-quote--dark {
	color: var(--nv-white);
}

.nv-lp-stat {
	font-family: var(--nv-serif);
	font-size: clamp(2.2rem, 4vw, 3rem);
	font-weight: 600;
	color: var(--nv-ink);
	margin: var(--wp--preset--spacing--30) 0 0;
	line-height: 1.1;
}

/* ---------- Selectable card (toggle item shaped like a card) ---------- */

.nv-lp-select-card {
	text-align: left;
	border-radius: var(--nv-radius-lg);
	padding: var(--wp--preset--spacing--20);
	cursor: pointer;
	background: color-mix(in srgb, var(--nv-white) 5%, transparent);
	border: 1px solid var(--nv-border-on-dark);
	color: inherit;
	transition: background var(--nv-dur) var(--nv-ease), border-color var(--nv-dur) var(--nv-ease);
}

.nv-lp-select-card.is-active {
	background: color-mix(in srgb, var(--nv-orange) 16%, transparent);
	border: 1.5px solid var(--nv-orange-soft);
}

.nv-lp-select-card--light {
	background: var(--nv-white);
	border: 1px solid var(--nv-ink-10);
}

.nv-lp-select-card--light.is-active {
	background: var(--nv-white);
	border: 1.5px solid var(--nv-orange);
	box-shadow: var(--nv-shadow);
}

.nv-lp-select-card:focus-visible {
	outline: 2px solid var(--nv-orange-soft);
	outline-offset: 3px;
}

/* ---------- Segmented two-button toggle ---------- */

.nv-lp-segmented {
	display: flex;
	gap: 6px;
	margin-top: var(--wp--preset--spacing--30);
	border: 1px solid var(--nv-ink-10);
	border-radius: var(--nv-radius-pill);
	padding: 4px;
	width: fit-content;
}

.nv-lp-segmented button {
	padding: 10px 18px;
	border: 0;
	border-radius: var(--nv-radius-pill);
	background: transparent;
	color: var(--nv-ink-60);
	font-family: var(--nv-sans);
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
}

.nv-lp-segmented button.is-active {
	background: var(--nv-ink);
	color: var(--nv-white);
}

.nv-lp-segmented button:focus-visible {
	outline: 2px solid var(--nv-orange-soft);
	outline-offset: 2px;
}

/* ---------- Inline "show me the science" trigger ---------- */

.nv-disclosure--inline .nv-disclosure__trigger {
	min-height: 24px;
	border-top: 0;
	padding: 0;
	font-family: var(--nv-sans);
	font-size: var(--nv-fs-mono);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--nv-orange-soft);
	justify-content: flex-start;
	gap: 8px;
}

.nv-disclosure--inline.nv-disclosure {
	margin-top: 12px;
}

/* Toggle panels are hidden with the `hidden` attribute; the UA rule loses to
   the layout classes on the same element, so restate it here. */

[data-nv-toggle-panel][hidden] {
	display: none;
}

/* A curve state can pause the pulse for nodes that have not lit up yet. */

.nv-curve__pulse.is-paused,
.nv-curve__shape-pulse.is-paused {
	animation: none;
}

.nv-curve__shape-pulse {
	animation: nv-node-pulse 1.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.nv-curve__shape-pulse {
		animation: none;
		opacity: 1;
	}
}

@keyframes nv-hb-heartbeat {

	0%,
	100% {
		r: 8;
	}

	50% {
		r: 10.5;
	}
}

@keyframes nv-hb-heartring {

	0% {
		r: 12;
		opacity: 0.65;
	}

	100% {
		r: 22;
		opacity: 0;
	}
}

.nv-hb__scorecard td.is-core,
.nv-lp-table td.is-core {
	background: var(--nv-orange-soft);
	font-weight: 700;
	color: var(--nv-ink);
}

/* The ATP labels sit inside a 240-unit viewBox rendered at 280px, so 9 user
   units landed under the legible minimum. */

.nv-curve__pulse-label {
	font-size: 11px;
}

/* ==========================================================================
   Batch 4 editorial components (inc/lp-editorial.php)
   ========================================================================== */

/* ---------- Editorial components (inc/lp-editorial.php): Clinical Trend
   Chart, Ingredient Science Card, Radial Node Selector. Interactivity runs
   through the shared toggle / disclosure controller in lovable.js. ---------- */

.nv-trend__inner {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}

.nv-trend__card {
	background: var(--nv-white);
	border-radius: var(--nv-radius-lg);
	padding: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--10);
}

.nv-trend--dark .nv-trend__card {
	background: color-mix(in srgb, var(--nv-white) 4%, transparent);
	border: 1px solid var(--nv-border-on-dark);
}

.nv-trend__points {
	display: flex;
	justify-content: space-around;
	gap: var(--wp--preset--spacing--20);
	flex-wrap: wrap;
}

.nv-trend__point-time {
	font-size: var(--nv-fs-mono);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--nv-ink-60);
	margin: 0 0 4px;
}

.nv-trend__point-novos {
	font-family: var(--nv-mono);
	font-weight: 600;
	font-size: var(--nv-fs-lead);
	color: var(--nv-orange);
	margin: 0;
}

.nv-trend__point-placebo {
	font-family: var(--nv-mono);
	font-size: var(--nv-fs-mono);
	color: var(--nv-ink-60);
	margin: 2px 0 0;
}

.nv-trend__legend {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	justify-content: center;
	margin-top: var(--wp--preset--spacing--20);
}

.nv-trend__legend-item {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	font-size: var(--nv-fs-mono);
	color: var(--nv-ink-60);
}

.nv-trend__swatch {
	width: 20px;
	height: 3px;
	border-radius: 2px;
	display: inline-block;
}

.nv-trend__swatch--novos {
	background: var(--nv-orange);
}

.nv-trend__swatch--placebo {
	background: var(--nv-ink-60);
}

.nv-trend__sig-note {
	text-align: center;
	font-size: var(--nv-fs-mono);
	color: var(--nv-ink-60);
	font-style: italic;
	margin: var(--wp--preset--spacing--20) 0 0;
}

.nv-trend__age {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--30);
	flex-wrap: wrap;
	justify-content: center;
}

.nv-trend__age-card {
	flex: 1 1 220px;
	background: var(--nv-white);
	border-radius: var(--nv-radius);
	padding: var(--wp--preset--spacing--20);
	text-align: center;
}

.nv-trend--dark .nv-trend__age-card {
	background: color-mix(in srgb, var(--nv-white) 4%, transparent);
	border: 1px solid var(--nv-border-on-dark);
}

.nv-trend__age-card--accent {
	background: color-mix(in srgb, var(--nv-orange) 6%, transparent);
	border: 1px solid color-mix(in srgb, var(--nv-orange) 30%, transparent);
}

/* Phones: the two age cards stack with the arrow turned to point down. */
@media (max-width: 599px) {
	.nv-trend__age-card {
		flex-basis: 100%;
	}

	.nv-trend__age-arrow {
		transform: rotate(90deg);
	}
}

.nv-trend__age-arrow {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--nv-orange) 12%, transparent);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--nv-orange);
	font-size: var(--nv-fs-lead);
}

.nv-trend__age-label {
	font-size: var(--nv-fs-mono);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--nv-ink-60);
	margin: 0 0 var(--wp--preset--spacing--10);
}

.nv-trend__age-label--accent {
	color: var(--nv-orange);
	font-weight: 600;
}

.nv-trend__age-value {
	font-family: var(--nv-serif);
	font-weight: 700;
	font-size: var(--nv-fs-h3);
	margin: 0;
}

.nv-trend__age-value--accent {
	color: var(--nv-orange);
}

.nv-trend__age-sub {
	font-size: var(--nv-fs-mono);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--nv-ink-60);
	margin: 4px 0 var(--wp--preset--spacing--10);
}

.nv-trend__age-desc {
	font-size: var(--nv-fs-mono);
	color: var(--nv-ink-60);
	line-height: 1.5;
	margin: 0;
}

.nv-trend__footnotes {
	margin-top: var(--wp--preset--spacing--20);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
}

.nv-trend__footnotes p {
	margin: 0;
	font-size: var(--nv-fs-mono);
	color: var(--nv-ink-60);
	line-height: 1.6;
}

/* Ingredient Science Card */

.nv-ing-card {
	border: 1px solid var(--nv-ink-10);
	border-radius: var(--nv-radius-lg);
	background: var(--nv-white);
	overflow: hidden;
}

.nv-ing-card--dark {
	border-color: var(--nv-border-on-dark);
	background: color-mix(in srgb, var(--nv-white) 4%, transparent);
}

.nv-ing-card__head {
	width: 100%;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	transition: background var(--nv-dur) var(--nv-ease);
}

.nv-ing-card__head:hover {
	background: var(--nv-ink-05);
}

.nv-ing-card--dark .nv-ing-card__head:hover {
	background: color-mix(in srgb, var(--nv-white) 6%, transparent);
}

.nv-ing-card__head:focus-visible {
	outline: 2px solid var(--nv-orange-soft);
	outline-offset: -2px;
}

.nv-ing-card__media {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: var(--nv-radius-sm);
	overflow: hidden;
}

.nv-ing-card__media img,
.nv-ing-card__media .nv-lp-imgslot {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nv-ing-card__title {
	flex: 1;
	min-width: 0;
}

.nv-ing-card__name {
	display: block;
	font-family: var(--nv-serif);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--body);
	color: var(--nv-ink);
	margin: 0 0 4px;
}

.nv-ing-card--dark .nv-ing-card__name {
	color: var(--nv-white);
}

.nv-ing-card__tagline {
	display: block;
	font-size: var(--nv-fs-mono);
	color: var(--nv-ink-60);
}

.nv-ing-card--dark .nv-ing-card__tagline {
	color: var(--nv-on-dark-muted);
}

.nv-ing-card__meta {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	flex-shrink: 0;
}

/* The evidence level colour (--nv-ing-badge) is a dot on a tinted pill with
   ink text, like .nv-lp-badge: white text on the level colours fails contrast. */
.nv-ing-card__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	padding: 5px var(--wp--preset--spacing--20);
	border: 1px solid color-mix(in srgb, var(--nv-ing-badge, var(--nv-ink-60)) 35%, transparent);
	border-radius: var(--nv-radius-pill);
	background: color-mix(in srgb, var(--nv-ing-badge, var(--nv-ink-60)) 10%, var(--nv-white));
	font-family: var(--nv-mono);
	font-size: var(--nv-fs-mono);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.02em;
	color: var(--nv-ink);
	white-space: nowrap;
}

.nv-ing-card__badge::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--nv-ing-badge, var(--nv-ink-60));
}

.nv-ing-card--dark .nv-ing-card__badge {
	border-color: var(--nv-border-on-dark);
	background: color-mix(in srgb, var(--nv-white) 8%, transparent);
	color: var(--nv-white);
}

.nv-ing-card__chevron {
	color: var(--nv-ink-60);
	font-size: var(--nv-fs-mono);
	transition: transform 0.2s var(--nv-ease);
}

.nv-ing-card.is-open .nv-ing-card__chevron {
	transform: rotate(180deg);
}

.nv-ing-card__body {
	display: none;
	padding: 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
	border-top: 1px solid var(--nv-ink-10);
}

.nv-ing-card--dark .nv-ing-card__body {
	border-top-color: var(--nv-border-on-dark);
}

.nv-ing-card.is-open .nv-ing-card__body {
	display: block;
}

.nv-ing-card__desc {
	margin: var(--wp--preset--spacing--20) 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--nv-ink-60);
	line-height: 1.7;
}

.nv-ing-card--dark .nv-ing-card__desc {
	color: var(--nv-on-dark-muted);
}

.nv-ing-card__dl {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--20);
	margin: 0 0 var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--20);
	background: var(--nv-beige);
	border-radius: var(--nv-radius);
}

.nv-ing-card--dark .nv-ing-card__dl {
	background: color-mix(in srgb, var(--nv-white) 3%, transparent);
}

@media (max-width: 620px) {

	.nv-ing-card__dl {
		grid-template-columns: 1fr;
	}
}

.nv-ing-card__dl dt {
	margin: 0 0 4px;
	font-family: var(--nv-mono);
	font-size: var(--nv-fs-mono);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--nv-orange-deep);
}

.nv-ing-card--dark .nv-ing-card__dl dt {
	color: var(--nv-orange-soft);
}

.nv-ing-card__dl dd {
	margin: 0;
	font-size: var(--nv-fs-mono);
	color: var(--nv-ink-60);
	line-height: 1.5;
}

.nv-ing-card--dark .nv-ing-card__dl dd {
	color: var(--nv-on-dark-muted);
}

.nv-ing-card__cta {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	font-size: var(--nv-fs-mono);
	font-weight: 600;
	color: var(--nv-orange-deep);
	text-decoration: none;
}

.nv-ing-card--dark .nv-ing-card__cta {
	color: var(--nv-orange-soft);
}

/* Below 900px the badge drops under the name, so long evidence labels wrap
   instead of pushing the card past the viewport. */
@media (max-width: 899px) {
	.nv-ing-card__head {
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr) auto;
		column-gap: var(--wp--preset--spacing--20);
		row-gap: var(--wp--preset--spacing--10);
	}

	.nv-ing-card__meta {
		display: contents;
	}

	.nv-ing-card__media {
		grid-row: 1 / span 2;
		align-self: start;
	}

	.nv-ing-card__title {
		grid-column: 2;
		grid-row: 1;
	}

	.nv-ing-card__chevron {
		grid-column: 3;
		grid-row: 1;
	}

	.nv-ing-card__badge {
		grid-column: 2 / 4;
		grid-row: 2;
		justify-self: start;
		white-space: normal;
	}
}

/* Editorial Comparison Bar Chart */

/* Evidence Badge */

/* Radial Node Selector */

.nv-radial-selector {
	display: flex;
	justify-content: center;
}

.nv-radial-selector__ring {
	position: relative;
	width: min(340px, 90vw);
	aspect-ratio: 1 / 1;
}

/* A dashed orbit through the nodes (they sit at a 44% radius). */
.nv-radial-selector__ring::before {
	content: "";
	position: absolute;
	inset: 6%;
	border: 1px dashed var(--nv-border-on-dark);
	border-radius: 50%;
}

.nv-radial-selector__hub {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56%;
	aspect-ratio: 1 / 1;
	text-align: center;
	padding: var(--wp--preset--spacing--20);
	border: 1px solid var(--nv-border-on-dark);
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--nv-orange) 24%, transparent), color-mix(in srgb, var(--nv-white) 4%, transparent) 72%);
}

.nv-radial-selector__hub-name {
	margin: 0 0 var(--wp--preset--spacing--10);
	font-family: var(--nv-serif);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	color: var(--nv-white);
	line-height: 1.3;
}

.nv-radial-selector__hub-note {
	margin: 0;
	font-size: var(--nv-fs-mono);
	color: var(--nv-on-dark-muted);
	line-height: 1.5;
}

.nv-radial-selector__node {
	position: absolute;
	width: 38px;
	height: 38px;
	transform: translate(-50%, -50%);
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--nv-mono);
	font-size: var(--nv-fs-mono);
	font-weight: 600;
	cursor: pointer;
	border: 1px solid var(--nv-border-on-dark);
	background: transparent;
	color: var(--nv-on-dark-muted);
	transition: all 250ms var(--nv-ease);
}

.nv-radial-selector__node:hover {
	border-color: var(--nv-orange-soft);
	color: var(--nv-white);
}

.nv-radial-selector__node:focus-visible {
	outline: 2px solid var(--nv-orange-soft);
	outline-offset: 3px;
}

.nv-radial-selector__node.is-active {
	border-color: var(--nv-orange);
	background: var(--nv-orange);
	color: var(--nv-white);
}

@media (prefers-reduced-motion: reduce) {

	.nv-radial-selector__node,
	.nv-ing-card__chevron,
	.nv-ing-card__head {
		transition: none;
	}
}