/* Energy landing page: patterns/lovable-page-energy.php.
   Loaded only on /energy/, after assets/css/lovable.css. */

/* ---------- Energy: patterns/lovable-page-energy.php ---------- */

/* Text sizes come from the design-system layer (.nv-lp-lead / -text /
   -small / -fine / -card-title); rules here are layout, surfaces and the
   page's few display values. Every grid shares its section's container
   with the heading above it. */

.nv-en__figure { margin: 0; font-family: var(--nv-serif); font-size: var(--nv-fs-h3); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--nv-ink); }

.nv-en__caps { font-family: var(--nv-mono); letter-spacing: 0.08em; text-transform: uppercase; }

.nv-en__note { margin-top: var(--wp--preset--spacing--20); font-style: italic; }

.nv-en__note--center { text-align: center; }

.nv-en__stars { color: var(--nv-orange); letter-spacing: 2px; }

.nv-en__actions { margin-top: var(--wp--preset--spacing--40); }

/* Two-column rows (hero, how to use, benefits, clinical proof, longevity)
   are the shared even split at the wide gap; every one stacks at this
   page's 980px breakpoint, below. Photo frames are the shared .nv-lp-photo. */

.nv-en__media--portrait img { object-position: center 15%; }

.nv-en__media--wide { aspect-ratio: 4 / 3; margin-bottom: var(--wp--preset--spacing--30); }

.nv-en__hero .nv-eyebrow { display: block; margin: 0; }

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

.nv-en__hero-copy { max-width: 36rem; margin-top: var(--wp--preset--spacing--30); }

.nv-en__hero-badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--10); max-width: 30rem; margin: var(--wp--preset--spacing--30) 0; }

.nv-en__hero-badge { display: flex; align-items: center; padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20); background: var(--nv-white); border: 1px solid var(--nv-ink-10); border-radius: var(--nv-radius-xs); font-size: var(--wp--preset--font-size--small); font-weight: 600; line-height: 1.3; white-space: pre-line; color: var(--nv-ink); }

.nv-en__rating { margin-bottom: var(--wp--preset--spacing--30); }

.nv-en__rating-row { display: flex; align-items: center; gap: var(--wp--preset--spacing--10); margin-bottom: var(--wp--preset--spacing--10); }

.nv-en__rating-num { font-size: var(--wp--preset--font-size--small); font-weight: 700; color: var(--nv-ink); }

.nv-en__rating-num span { font-weight: 400; color: var(--nv-ink-60); }

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

.nv-en__award-line { margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--10); font-weight: 600; text-align: center; color: var(--nv-ink-60); }

.nv-en__join { text-align: center; }

.nv-en__join strong { color: var(--nv-ink); }

/* Twin stat cards */

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

.nv-en__duo-card { padding: var(--wp--preset--spacing--50); border-radius: var(--nv-radius-lg); }

.nv-en__duo-card.nv-lp-band--white { border: 1px solid var(--nv-ink-10); }

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

.nv-en__duo-card.nv-lp-band--ink .nv-en__duo-title { color: var(--nv-white); }

.nv-en__duo-card .nv-lp-text { max-width: 28rem; }

/* Proof strip */

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

.nv-en__proof-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--wp--preset--spacing--30); max-width: 60rem; margin-inline: auto; }

.nv-en__proof-item { text-align: center; }

.nv-en__icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0 auto var(--wp--preset--spacing--10); border-radius: var(--nv-radius-pill); background: color-mix(in srgb, var(--nv-orange) 10%, transparent); color: var(--nv-orange-deep); }

/* Comparison */

.nv-en__compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--30); align-items: start; }

.nv-en__compare-card { overflow: hidden; border-radius: var(--nv-radius-lg); }

.nv-en__compare-card--typical { background: var(--nv-white); }

.nv-en__compare-card .nv-lp-card__media img { aspect-ratio: 4 / 3; }

.nv-en__compare-body { padding: var(--wp--preset--spacing--40); }

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

.nv-en__compare-card--novos .nv-en__compare-label { color: var(--nv-orange-soft); }

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

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

.nv-en__compare-list li span { flex-shrink: 0; width: 1em; color: var(--nv-ink-40); }

.nv-en__compare-card--novos .nv-en__compare-list li { color: color-mix(in srgb, var(--nv-white) 88%, transparent); }

.nv-en__compare-card--novos .nv-en__compare-list li span { color: var(--nv-orange-soft); }

/* Mechanism / pathways */

.nv-en__pathways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--30); align-items: start; }

.nv-en__pathway-card { overflow: hidden; background: var(--nv-beige); border-radius: var(--nv-radius-lg); }

.nv-en__pathway-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.nv-en__pathway-body { padding: var(--wp--preset--spacing--30); }

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

/* Ingredients: twelve cards, so 4 / 3 / 2 / 1 columns all come out even. */

.nv-en__ingredients { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wp--preset--spacing--30); align-items: stretch; }

.nv-en__ingredient-card { overflow: hidden; background: var(--nv-white); border-radius: var(--nv-radius); }

.nv-en__ingredient-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.nv-en__ingredient-body { padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); }

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

/* How to use */

.nv-en__steps { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); }

.nv-en__step { display: flex; align-items: flex-start; gap: var(--wp--preset--spacing--20); }

.nv-en__step .nv-lp-small { margin-top: 2px; }

.nv-en__step-num { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--nv-radius-pill); background: var(--nv-orange-deep); font-size: var(--wp--preset--font-size--small); font-weight: 700; color: var(--nv-white); }

/* Milestones */

.nv-en__milestones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wp--preset--spacing--30); align-items: stretch; }

.nv-en__milestone-card { padding: var(--wp--preset--spacing--30); background: var(--nv-white); border-radius: var(--nv-radius); }

.nv-en__milestone-card .nv-eyebrow { margin: 0 0 var(--wp--preset--spacing--20); }

/* Clinical proof */

.nv-en__clinical-card { padding: var(--wp--preset--spacing--40); background: var(--nv-beige); border-radius: var(--nv-radius-lg); }

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

.nv-en__clinical-intro { margin-bottom: var(--wp--preset--spacing--30); }

.nv-en__fmd-readout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--20); padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20); background: var(--nv-white); border-radius: var(--nv-radius); }

.nv-en__fmd-point { text-align: center; }

.nv-en__fmd-point .nv-lp-fine { margin: 0; }

.nv-en__fmd-value { margin: var(--wp--preset--spacing--10) 0; font-family: var(--nv-serif); font-size: var(--nv-fs-h3); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; color: var(--nv-orange); }

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

.nv-en__fmd-highlights strong { color: var(--nv-ink); }

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

.nv-en__result-row { padding-left: var(--wp--preset--spacing--20); border-left: 2px solid var(--nv-orange); }

.nv-en__result-row .nv-lp-small + .nv-lp-small { margin-top: 2px; }

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

.nv-en__stat-box { padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20); background: var(--nv-beige); border: 1px solid transparent; border-radius: var(--nv-radius); text-align: center; }

.nv-en__stat-box .nv-eyebrow { margin: 0 0 var(--wp--preset--spacing--10); }

.nv-en__stat-box .nv-lp-small { margin-top: var(--wp--preset--spacing--10); }

.nv-en__stat-box--highlight { border-color: color-mix(in srgb, var(--nv-orange) 30%, transparent); }

.nv-en__stat-box--highlight .nv-en__figure { color: var(--nv-orange); }

/* Advisors: five shared person cards with the portrait centred. One row
   of five on wide screens, three over a centred two below that, a single
   column on phones — never a lone card. */

.nv-en__advisors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--wp--preset--spacing--30); }

.nv-en .nv-en__advisor-label { font-size: var(--nv-fs-mono); line-height: 1.4; text-align: center; }

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

/* What you may notice */

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

.nv-en__benefit-row { display: flex; align-items: center; gap: var(--wp--preset--spacing--20); padding: var(--wp--preset--spacing--20); background: var(--nv-beige); border-radius: var(--nv-radius); }

.nv-en__benefit-check { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--nv-radius-pill); background: color-mix(in srgb, var(--nv-orange) 12%, transparent); color: var(--nv-orange-deep); }

/* Testimonials: five shared testimonial cards, laid out like the advisors;
   the footer stacks the name over the results note. */

.nv-en__testimonials { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--wp--preset--spacing--30); }

.nv-en__testimonials > .nv-lp-testimonial { grid-column: span 2; }

.nv-en__testimonials > .nv-lp-testimonial:nth-child(4) { grid-column: 2 / span 2; }

.nv-en__testimonials .nv-lp-testimonial__foot,
.nv-en__testimonials .nv-lp-testimonial__foot > * { display: block; }

.nv-en__testimonial-foot .nv-en__note { margin-top: 2px; }

/* Longevity band */

.nv-en .nv-en__longevity-copy { margin-bottom: 0; }

/* Shared pricing section, this page only: its six benefit chips sit in
   balanced pairs instead of wrapping to a lone last chip. */

.nv-en .nv-pricing__tags { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; justify-items: center; }

/* Final CTA */

.nv-en__final-cta { text-align: center; }

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

.nv-en__final-cta > .nv-lp-small { margin-top: var(--wp--preset--spacing--30); }

@media (min-width: 981px) and (max-width: 1279px) {
	.nv-en__advisors { grid-template-columns: repeat(6, minmax(0, 1fr)); }

	.nv-en__advisors > .nv-lp-person { grid-column: span 2; }

	.nv-en__advisors > .nv-lp-person:nth-child(4) { grid-column: 2 / span 2; }
}

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

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

	.nv-en__testimonials > .nv-lp-testimonial,
	.nv-en__testimonials > .nv-lp-testimonial:nth-child(4) { grid-column: auto; }

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

	.nv-en__hero .nv-lp-photo { aspect-ratio: 4 / 3; }

	.nv-en .nv-lp-split > .nv-en__media--portrait,
	.nv-en .nv-en__media--howto { aspect-ratio: 4 / 3; }
}

@media (max-width: 620px) {
	.nv-en__duo,
	.nv-en__compare,
	.nv-en__pathways,
	.nv-en__milestones,
	.nv-en__proof-row { grid-template-columns: minmax(0, 1fr); }

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

	.nv-en__duo-card { padding: var(--wp--preset--spacing--30); }

	.nv-en__hero-badge { padding-inline: var(--wp--preset--spacing--10); }

	.nv-en__proof-item { display: flex; align-items: center; gap: var(--wp--preset--spacing--20); text-align: left; }

	.nv-en__proof-item .nv-en__icon { margin: 0; }

	.nv-en__fmd-readout { padding-inline: var(--wp--preset--spacing--10); }
}

@media (max-width: 440px) {
	.nv-en__ingredients { grid-template-columns: minmax(0, 1fr); }
}
