/* Cardiovascular 30s landing page: patterns/lovable-page-cardiovascular-30s.php.
   Loaded only on /cardiovascular-30s/, after assets/css/lovable.css. */

/* ---------- Cardiovascular 30s: patterns/lovable-page-cardiovascular-30s.php ---------- */

/* Text sizes come from the design-system layer (.nv-lp-lead / -text /
   -small / -fine / -card-title); photo frames, cards and avatars are the
   shared .nv-lp-photo / .nv-lp-card / .nv-lp-avatar / .nv-lp-person; rules
   here are layout, this page's departures from those components, and the
   page's few display values. Grids are mobile-first and only use column
   counts that divide their item count. */

.nv-cv30 h1,
.nv-cv30 h2 { text-wrap: balance; }

.nv-cv30 p { text-wrap: pretty; }

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

.nv-cv30__footnote { max-width: 56ch; margin: var(--wp--preset--spacing--30) auto 0; text-align: center; }

.nv-cv30__unit { margin-left: 4px; font-family: var(--nv-sans); font-size: var(--nv-fs-mono); color: var(--nv-ink-60); }

/* Photo frames and cards are the shared .nv-lp-photo / .nv-lp-card: this
   page fills frames beige while a photo loads and draws cards without the
   hairline. */

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

.nv-cv30 .nv-lp-card { border: 0; }

.nv-cv30__card .nv-lp-card-title { margin: var(--wp--preset--spacing--10) 0; }

.nv-cv30 .nv-cv30__card--highlight { background: color-mix(in srgb, var(--nv-orange) 6%, var(--nv-beige)); border: 1px solid color-mix(in srgb, var(--nv-orange) 30%, transparent); }

.nv-cv30__card-eyebrow { display: block; margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--10); }

/* Avatars: the shared .nv-lp-avatar, at this page's sizes and with its
   photos centred rather than the shared face-high crop. */

.nv-cv30 .nv-lp-avatar { background: none; }

.nv-cv30 .nv-lp-avatar img { object-position: 50% 50%; }

.nv-cv30__grid-3,
.nv-cv30__grid-6 { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--20); }

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

.nv-cv30__dot-list li { display: flex; gap: var(--wp--preset--spacing--10); }

.nv-cv30__dot-list li::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; margin-top: 0.6em; background: var(--nv-orange); border-radius: 999px; }

/* Hero */

.nv-cv30__hero-grid { display: grid; gap: var(--wp--preset--spacing--50); align-items: center; }

.nv-cv30__hero-title { margin: var(--wp--preset--spacing--20) 0 0; }

.nv-cv30__hero-lead { max-width: 52ch; margin-top: var(--wp--preset--spacing--30); }

.nv-cv30__hero-actions { margin-top: var(--wp--preset--spacing--30); }

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

.nv-cv30__hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--20); margin-top: var(--wp--preset--spacing--30); padding-top: var(--wp--preset--spacing--30); border-top: 1px solid var(--nv-ink-10); }

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

.nv-cv30__hero-stat-label { margin-top: 4px; }

/* Block, not the row that acf-blocks.css's global
   `figure:not(.wp-block-image){display:flex}` reset would make it: the
   caption belongs under the photo. */

.nv-cv30 .nv-cv30__hero-media { display: block; margin: 0; }

.nv-cv30__hero-caption { margin-top: var(--wp--preset--spacing--20); text-align: center; }

/* Press strip */

.nv-cv30__press { border-block: 1px solid var(--nv-ink-10); }

.nv-cv30__press-label { margin: 0 0 var(--wp--preset--spacing--30); text-align: center; }

.nv-cv30__press-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); }

.nv-cv30__press-logo { width: auto; max-width: 120px; height: 22px; object-fit: contain; filter: grayscale(1); opacity: 0.55; }

/* Product: the photo row under the main image is static photography, not a
   thumbnail picker, so it gets full-width tiles and no selection styling. */

.nv-cv30__product-grid { display: grid; gap: var(--wp--preset--spacing--50); align-items: start; }

.nv-cv30__gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wp--preset--spacing--10); margin-top: var(--wp--preset--spacing--10); }

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

.nv-cv30__specs { margin-bottom: var(--wp--preset--spacing--40); }

.nv-cv30__ingredient-panel { max-width: 44rem; margin: var(--wp--preset--spacing--50) auto 0; }

.nv-cv30__ingredient-panel > .nv-lp-card-title + .nv-lp-small { margin-top: var(--wp--preset--spacing--10); }

.nv-cv30__ingredient-grid { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30); margin-top: var(--wp--preset--spacing--30); color: var(--nv-ink-80); }

/* Why now */

.nv-cv30__head--wide { max-width: 56rem; }

.nv-cv30__timeline-age { margin: 0; font-family: var(--nv-serif); font-size: var(--nv-fs-h3); line-height: 1; color: var(--nv-ink); }

/* Circulation network: the illustration sits straight on the ink band. */

.nv-cv30__network-grid { display: grid; gap: var(--wp--preset--spacing--50); align-items: start; }

.nv-cv30__network-grid > .nv-lp-photo { background: none; }

.nv-cv30__body-areas { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--30); }

.nv-cv30__body-area { padding-top: var(--wp--preset--spacing--20); border-top: 1px solid var(--nv-border-on-dark); }

.nv-cv30__body-area .nv-lp-card-title { margin-bottom: var(--wp--preset--spacing--10); }

/* Three measures */

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

.nv-cv30__measure-card > .nv-eyebrow { margin: 0; }

.nv-cv30__measure-card > p:last-of-type { padding-bottom: var(--wp--preset--spacing--30); }

.nv-cv30__measure-foot { margin-top: auto; padding-top: var(--wp--preset--spacing--20); border-top: 1px solid var(--nv-ink-10); }

.nv-cv30__measure-value { margin: 0 0 4px; font-family: var(--nv-serif); font-size: var(--nv-fs-h3); line-height: 1.1; color: var(--nv-ink); }

/* Clinical study */

.nv-cv30__study-grid { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--40); align-items: flex-start; }

.nv-cv30__study-box { flex: 1 1 min(460px, 100%); }

.nv-cv30__study-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--20); margin-bottom: var(--wp--preset--spacing--30); padding-bottom: var(--wp--preset--spacing--30); border-bottom: 1px solid var(--nv-ink-10); }

.nv-cv30__study-name { padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20); font-family: var(--nv-serif); font-size: var(--wp--preset--font-size--body); color: var(--nv-ink); background: var(--nv-white); border-radius: var(--nv-radius-xs); }

.nv-cv30__study-rows { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); margin: 0; }

.nv-cv30__study-row { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: var(--wp--preset--spacing--10); }

.nv-cv30__study-row dt { margin: 0; font-family: var(--nv-mono); font-size: var(--nv-fs-mono); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nv-orange-deep); }

.nv-cv30__study-row dd { margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--nv-ink); }

.nv-cv30__study-footnote { margin-top: var(--wp--preset--spacing--30); padding-top: var(--wp--preset--spacing--20); border-top: 1px solid var(--nv-ink-10); }

.nv-cv30__quote-box { flex: 1 1 min(380px, 100%); }

.nv-cv30__quote-img { width: 72px; height: 72px; }

.nv-cv30__quote { margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--20); font-family: var(--nv-serif); font-size: var(--nv-fs-lead); line-height: 1.5; color: var(--nv-ink); }

/* Results */

.nv-cv30__results-row { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--30); max-width: 56rem; margin-inline: auto; padding: var(--wp--preset--spacing--40); text-align: center; background: color-mix(in srgb, var(--nv-white) 4%, transparent); border: 1px solid var(--nv-border-on-dark); border-radius: var(--nv-radius-lg); }

.nv-cv30__result-time { margin: 0 0 var(--wp--preset--spacing--10); font-family: var(--nv-mono); font-size: var(--nv-fs-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--nv-on-dark-muted); }

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

.nv-cv30__result-vs { margin: 4px 0 0; font-family: var(--nv-mono); font-size: var(--nv-fs-mono); color: var(--nv-on-dark-muted); }

/* Pathways */

.nv-cv30 .nv-cv30__pathway-icon { width: 56px; height: 56px; margin-bottom: var(--wp--preset--spacing--20); border-radius: var(--nv-radius-xs); }

/* Awards + retailers: badges are round artwork; retailer logos are wide
   wordmarks, so they sit whole inside a rectangular tile. */

.nv-cv30__badges-grid { display: grid; gap: var(--wp--preset--spacing--50); }

.nv-cv30__badges-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--20); margin-top: var(--wp--preset--spacing--20); }

.nv-cv30__award { width: 64px; height: 64px; object-fit: contain; border-radius: 999px; }

.nv-cv30__retailer { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 7rem; height: 4rem; padding: var(--wp--preset--spacing--10); background: var(--nv-white); border: 1px solid var(--nv-ink-10); border-radius: var(--nv-radius-sm); }

.nv-cv30__retailer img { display: block; width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; }

/* Reviews */

.nv-cv30__stats-band { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--30); }

.nv-cv30__stats-band .nv-lp-card-title { margin-bottom: var(--wp--preset--spacing--10); }

.nv-cv30__stars { margin: 0 0 var(--wp--preset--spacing--10); font-size: var(--wp--preset--font-size--small); letter-spacing: 0.1em; color: var(--nv-orange); }

.nv-cv30__reviews-grid { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--20); margin-top: var(--wp--preset--spacing--30); }

.nv-cv30__review-card { display: flex; flex-direction: column; padding: var(--wp--preset--spacing--30); background: var(--nv-white); border-radius: var(--nv-radius); }

.nv-cv30__review-card .nv-lp-card-title { margin-bottom: var(--wp--preset--spacing--10); }

.nv-cv30__review-quote { flex: 1; color: var(--nv-ink-80); }

.nv-cv30__review-foot { display: flex; align-items: center; gap: var(--wp--preset--spacing--10); margin-top: var(--wp--preset--spacing--20); }

.nv-cv30__review-avatar { width: 32px; height: 32px; }

/* Scientific advisory board: the shared person row, drawn as this page's
   hairline-topped rows rather than bordered cards. */

.nv-cv30__scientists .nv-lp-person { padding: var(--wp--preset--spacing--20) 0 0; background: none; border-width: 1px 0 0; border-radius: 0; }

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

.nv-cv30__scientists .nv-lp-person__avatar img { object-position: center top; }

.nv-cv30__scientists .nv-lp-person__name { font-weight: 400; line-height: inherit; }

.nv-cv30__scientists .nv-lp-person__role { color: color-mix(in srgb, var(--nv-white) 50%, transparent); }

/* Purchase: capped like the shared pricing component so the plan picker
   never stretches across a 1920 screen. */

.nv-cv30__purchase-grid { display: grid; gap: var(--wp--preset--spacing--50); align-items: start; max-width: 75rem; }

.nv-cv30__purchase-media { max-width: 340px; margin: 0 0 var(--wp--preset--spacing--30); }

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

.nv-cv30__included-list li { display: flex; gap: var(--wp--preset--spacing--10); }

.nv-cv30__included-list li span { flex-shrink: 0; color: var(--nv-orange); }

.nv-cv30__step-label { display: block; margin: 0 0 var(--wp--preset--spacing--20); }

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

.nv-cv30__plan-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--wp--preset--spacing--20); box-sizing: border-box; width: 100%; padding: var(--wp--preset--spacing--20); font: inherit; color: inherit; text-align: left; cursor: pointer; background: var(--nv-white); border: 1.5px solid var(--nv-ink-20); border-radius: var(--nv-radius-sm); transition: border-color 250ms var(--nv-ease), background 250ms var(--nv-ease); }

.nv-cv30__plan-row:hover { border-color: var(--nv-ink-60); }

.nv-cv30__plan-row.is-active { background: color-mix(in srgb, var(--nv-orange) 5%, var(--nv-white)); border-color: var(--nv-orange); }

.nv-cv30__plan-copy { flex: 1; min-width: 0; }

.nv-cv30__plan-name-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--10); }

.nv-cv30__plan-name { font-family: var(--nv-serif); font-size: var(--wp--preset--font-size--body); color: var(--nv-ink); }

.nv-cv30__plan-best-value { padding: 2px var(--wp--preset--spacing--10); font-family: var(--nv-mono); font-size: var(--nv-fs-mono); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nv-white); background: var(--nv-orange); border-radius: var(--nv-radius-pill); }

.nv-cv30__plan-subtitle,
.nv-cv30__plan-badge,
.nv-cv30__plan-price-day,
.nv-cv30__plan-price-save { display: block; margin-top: 2px; font-size: var(--nv-fs-mono); line-height: 1.4; }

.nv-cv30__plan-subtitle,
.nv-cv30__plan-price-day { color: var(--nv-ink-60); }

.nv-cv30__plan-badge,
.nv-cv30__plan-price-save { color: var(--nv-orange-deep); }

.nv-cv30__plan-price { flex-shrink: 0; text-align: right; }

.nv-cv30__plan-price-unit { display: block; font-family: var(--nv-serif); font-size: var(--wp--preset--font-size--body); color: var(--nv-ink); }

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

.nv-cv30__flavor-pill { flex: 1 1 auto; padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--small); font-weight: 500; color: var(--nv-ink); cursor: pointer; background: var(--nv-white); border: 1.5px solid var(--nv-ink-20); border-radius: var(--nv-radius-pill); transition: border-color 250ms var(--nv-ease), background 250ms var(--nv-ease); }

.nv-cv30__flavor-pill:hover { border-color: var(--nv-ink-60); }

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

.nv-cv30__plan-row:focus-visible,
.nv-cv30__flavor-pill:focus-visible { outline: 2px solid var(--nv-orange); outline-offset: 2px; }

.nv-cv30__cta { display: flex; justify-content: center; box-sizing: border-box; width: 100%; }

.nv-cv30__purchase-microcopy { margin-top: var(--wp--preset--spacing--20); text-align: center; }

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

/* Final CTA: stacked (photo, then copy) on narrow screens; from 1024 the
   copy sits over the photo's left side, where the frame is empty, with a
   scrim so it never lands on the face. */

.nv-cv30__final-cta { display: grid; }

.nv-cv30__final-cta-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }

.nv-cv30__final-cta-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 55% 20%; }

.nv-cv30__final-cta-copy .nv-lp-head { margin-bottom: var(--wp--preset--spacing--40); }

/* Important information */

.nv-cv30__info { border-top: 1px solid var(--nv-ink-10); }

.nv-cv30__info-paras { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); max-width: 80ch; margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--40); }

.nv-cv30__info-paras .nv-lp-small + .nv-lp-small { margin-top: 0; }

.nv-cv30__references { max-width: 80ch; margin: var(--wp--preset--spacing--20) 0 0; padding-left: var(--wp--preset--spacing--30); line-height: 1.7; }

@media (max-width: 599px) {
	.nv-cv30__awards-row { gap: var(--wp--preset--spacing--10); }

	.nv-cv30__award { width: 56px; height: 56px; }

	.nv-cv30__retailer { width: calc((100% - 2 * var(--wp--preset--spacing--20)) / 3); }
}

@media (min-width: 520px) {
	.nv-cv30__ingredient-grid,
	.nv-cv30__body-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 600px) {
	.nv-cv30__grid-6,
	.nv-cv30__reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

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

@media (min-width: 700px) {
	.nv-cv30__grid-3:not(.nv-cv30__grid-3--late),
	.nv-cv30__stats-band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
	.nv-cv30__grid-3--late { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.nv-cv30__hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--wp--preset--spacing--60); }

	.nv-cv30__product-grid,
	.nv-cv30__network-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--60); }

	.nv-cv30__purchase-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--wp--preset--spacing--60); }
}

@media (min-width: 1024px) {
	.nv-cv30__grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.nv-cv30__final-cta { position: relative; grid-template: 1fr / 1fr; }

	.nv-cv30__final-cta > *,
	.nv-cv30__final-cta::after { grid-area: 1 / 1; }

	.nv-cv30__final-cta::after { content: ""; position: relative; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--nv-ink) 90%, transparent) 0%, color-mix(in srgb, var(--nv-ink) 60%, transparent) 38%, transparent 68%); }

	.nv-cv30__final-cta-media { aspect-ratio: auto; min-height: clamp(480px, 40vw, 720px); }

	.nv-cv30__final-cta-media img { object-position: 55% 10%; }

	.nv-cv30__final-cta-body { position: relative; z-index: 1; align-self: center; }

	.nv-cv30__final-cta-copy { max-width: min(34rem, 42%); }
}

@media (min-width: 1100px) {
	.nv-cv30__reviews-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
	.nv-cv30__badges-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}