/* Skin benefits landing page: patterns/lovable-page-skin-benefits.php.
   Loaded only on /skin-benefits/, after assets/css/lovable.css. Prefix
   .nv-skb: the finished /skin/ page owns .nv-sk. */

/* Text sizes come from the design-system layer (.nv-lp-lead / -text /
   -small / -fine / -card-title); image frames are the shared .nv-lp-photo,
   surfaces the shared .nv-lp-card, reviews novos_lp_testimonial() and the
   advisors novos_lp_person(). Rules here are layout, the page's own
   surfaces and its differences from those components. Section surfaces
   are the shared .nv-lp-band--* classes. */

.nv-skb :is(h3, h4) { margin: 0; }

.nv-skb .nv-skb__grid { margin-top: 0; gap: var(--wp--preset--spacing--30); }

.nv-skb__card-body { display: grid; align-content: start; gap: var(--wp--preset--spacing--10); padding: var(--wp--preset--spacing--30); }

.nv-skb .nv-skb__card-body > * { margin: 0; }

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

.nv-skb .nv-skb__chapter-head + .nv-skb__actions { margin-top: 0; }

/* Hero */

.nv-skb__hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--wp--preset--spacing--60); align-items: center; }

.nv-skb__hero-grid .nv-eyebrow { margin: 0; }

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

.nv-skb .nv-skb__hero-lead { max-width: 50ch; margin-top: var(--wp--preset--spacing--30); line-height: 1.6; }

.nv-skb__hero-dims { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--10); margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--40); }

.nv-skb__hero-dim { padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20); border: 1px solid color-mix(in srgb, var(--nv-orange) 30%, transparent); border-radius: var(--nv-radius-pill); font-family: var(--nv-mono); font-size: var(--nv-fs-mono); letter-spacing: 0.06em; color: var(--nv-orange-soft); }

.nv-skb__layers { display: grid; gap: 2px; overflow: hidden; border: 1px solid var(--nv-border-on-dark); border-radius: var(--nv-radius-lg); }

.nv-skb__layer { display: flex; align-items: center; gap: var(--wp--preset--spacing--20); padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); background: color-mix(in srgb, var(--nv-white) 4%, transparent); }

/* Skin-tone ramp from the page data (--nv-skb-from / --nv-skb-to). */

.nv-skb__layer-swatch { flex: none; width: 32px; height: 32px; border-radius: var(--wp--custom--radius--thumb); background: linear-gradient(180deg, var(--nv-skb-from), var(--nv-skb-to)); }

.nv-skb__layer p { margin: 0; }

.nv-skb__layer-name { font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--nv-white); }

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

.nv-skb .nv-skb__layers-caption { margin-top: var(--wp--preset--spacing--20); font-family: var(--nv-mono); letter-spacing: 0.06em; text-align: center; }

/* Trust strip */

.nv-skb__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40); font-size: var(--wp--preset--font-size--small); font-weight: 600; text-align: center; color: var(--nv-ink); }

/* Systems map */

.nv-skb__systems-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--wp--preset--spacing--40); align-items: start; }

.nv-skb__systems-tabs { display: grid; gap: var(--wp--preset--spacing--10); }

.nv-skb__systems-tab { display: grid; gap: 4px; padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); }

.nv-skb__systems-tab strong { font-family: var(--nv-serif); font-size: var(--wp--preset--font-size--body); font-weight: 600; color: var(--nv-ink); }

.nv-skb__systems-tab span { font-size: var(--wp--preset--font-size--small); line-height: 1.45; color: var(--nv-ink-60); }

.nv-skb__systems-tab:not(.is-active):hover { border-color: var(--nv-ink-40); }

.nv-skb__systems-tab.is-active strong { color: var(--nv-orange-deep); }

/* Each panel is a shared beige card without its hairline; its photo is a
   16:9 frame at the medium radius. */

.nv-skb .nv-skb__systems-panel { border: 0; }

.nv-skb__systems-media { aspect-ratio: 16 / 9; margin-bottom: var(--wp--preset--spacing--30); border-radius: var(--nv-radius); }

.nv-skb .nv-skb__systems-panel .nv-lp-card-title + .nv-lp-text { margin-top: var(--wp--preset--spacing--10); }

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

.nv-skb__relevance-row { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--20); padding: var(--wp--preset--spacing--10) 0; border-top: 1px solid var(--nv-ink-10); font-size: var(--wp--preset--font-size--small); }

.nv-skb__relevance-row a { display: inline-flex; flex: none; align-items: center; min-height: 24px; font-weight: 600; color: var(--nv-ink); text-decoration: none; }

.nv-skb__relevance-row a:hover { color: var(--nv-orange-deep); }

.nv-skb__relevance-row span { color: var(--nv-ink-60); text-align: right; }

/* Product chapters */

.nv-skb__chapter-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: var(--wp--preset--spacing--50); align-items: center; margin-bottom: var(--wp--preset--spacing--50); }

.nv-skb .nv-skb__chapter-head .nv-lp-head { margin-bottom: 0; }

.nv-skb .nv-lp-head > .nv-role-tag { margin-top: var(--wp--preset--spacing--20); }

.nv-skb__stat-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--wp--preset--spacing--40); margin-bottom: var(--wp--preset--spacing--50); }

.nv-skb__stat-value { margin: 0 0 var(--wp--preset--spacing--10); font-family: var(--nv-serif); font-size: var(--nv-fs-h2); font-weight: 600; line-height: 1; color: var(--nv-orange-deep); }

.nv-skb .nv-skb__stat-panel .nv-lp-card-title + * { margin-top: var(--wp--preset--spacing--10); }

.nv-skb .nv-skb__note-line { font-family: var(--nv-mono); font-style: italic; }

.nv-skb .nv-skb__tabs { margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--30); padding-bottom: 0; }

.nv-skb__ing-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: var(--wp--preset--spacing--40); align-items: start; }

.nv-skb__ing-copy { display: grid; justify-items: start; gap: var(--wp--preset--spacing--20); }

.nv-skb .nv-skb__ing-copy > * { margin: 0; }

.nv-skb .nv-skb__ing-copy > .nv-disclosure { justify-self: stretch; margin-top: var(--wp--preset--spacing--10); }

.nv-skb .nv-skb__ing-media { border-radius: var(--nv-radius); }

/* Evidence level: a dot on a tinted pill, ink text, like the shared
   .nv-lp-badge, so the label keeps its contrast whatever the level colour.
   Static, with this page's own four levels, so not novos_lp_evidence_badge(). */

.nv-skb__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-skb-badge, var(--nv-ink-60)) 35%, transparent); border-radius: var(--nv-radius-pill); background: color-mix(in srgb, var(--nv-skb-badge, var(--nv-ink-60)) 10%, var(--nv-white)); font-family: var(--nv-mono); font-size: var(--nv-fs-mono); font-weight: 600; letter-spacing: 0.04em; color: var(--nv-ink); }

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

.nv-skb__badge--human { --nv-skb-badge: var(--nv-clinical-green); }

.nv-skb__badge--pilot { --nv-skb-badge: var(--nv-clinical-blue); }

.nv-skb__badge--early { --nv-skb-badge: var(--nv-orange); }

.nv-skb__badge--lab { --nv-skb-badge: var(--nv-ink-60); }

.nv-skb__note { max-width: 48rem; padding: var(--wp--preset--spacing--30); border-radius: var(--nv-radius-lg); }

.nv-skb .nv-skb__note .nv-lp-card-title { font-size: var(--wp--preset--font-size--body); }

.nv-skb .nv-skb__note .nv-lp-card-title + * { margin-top: var(--wp--preset--spacing--10); }

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

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

/* Boost: NMN to NAD+ chain */

.nv-skb__nad-flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--wp--preset--spacing--10); margin-bottom: var(--wp--preset--spacing--30); padding: var(--wp--preset--spacing--40); border: 1px solid var(--nv-border-on-dark); border-radius: var(--nv-radius-lg); background: color-mix(in srgb, var(--nv-white) 4%, transparent); }

.nv-skb__nad-chip { padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20); border-radius: var(--nv-radius-pill); background: color-mix(in srgb, var(--nv-white) 6%, transparent); font-family: var(--nv-mono); font-size: var(--nv-fs-mono); letter-spacing: 0.04em; text-align: center; color: var(--nv-on-dark-muted); }

.nv-skb__nad-chip.is-focus { background: var(--nv-orange); font-weight: 700; color: var(--nv-white); }

.nv-skb__nad-arrow { color: var(--nv-orange-soft); }

/* Compare: the result is a shared beige card without its hairline. */

.nv-skb .nv-skb__matrix-result { max-width: 48rem; border: 0; }

.nv-skb__matrix-result h3 a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }

.nv-skb__matrix-items { display: grid; margin-top: var(--wp--preset--spacing--20); border-top: 1px solid var(--nv-ink-10); }

.nv-skb .nv-skb__matrix-item { margin: 0; padding: var(--wp--preset--spacing--10) 0; border-bottom: 1px solid var(--nv-ink-10); }

.nv-skb__matrix-item a { display: inline-flex; align-items: center; min-height: 24px; font-weight: 600; color: var(--nv-ink); text-decoration: none; }

.nv-skb__matrix-item a:hover { color: var(--nv-orange-deep); }

/* Inside and outside */

.nv-skb__inside-outside { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--wp--preset--spacing--30); align-items: center; }

.nv-skb__side { align-self: stretch; }

.nv-skb__side ul { margin: var(--wp--preset--spacing--20) 0 0; padding-left: var(--wp--preset--spacing--30); line-height: 1.8; }

.nv-skb__both { font-family: var(--nv-mono); font-size: var(--nv-fs-mono); font-weight: 600; letter-spacing: 0.06em; text-align: center; color: var(--nv-orange-deep); }

/* What to expect */

.nv-skb__timeline { max-width: 56rem; border-bottom: 1px solid var(--nv-ink-10); }

.nv-skb__timeline-row { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--wp--preset--spacing--30); padding: var(--wp--preset--spacing--20) 0; border-top: 1px solid var(--nv-ink-20); }

.nv-skb__timeline-when { font-family: var(--nv-mono); font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--nv-orange-deep); }

/* Testimonials + scientists: three across down to tablet widths (the
   shared .nv-lp-grid--3 drops to two there), so the grid stays local. */

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

/* Reviews: the shared testimonial card with this page's hairline, serif
   italic quote and mono meta line under the name. */

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

.nv-skb .nv-skb__review .nv-lp-testimonial__stars { letter-spacing: 0.1em; line-height: inherit; }

.nv-skb .nv-skb__review .nv-lp-testimonial__quote { font-family: var(--nv-serif); font-style: italic; line-height: 1.6; }

.nv-skb .nv-skb__review .nv-lp-testimonial__meta { display: block; margin-top: 2px; font-family: var(--nv-mono); font-size: var(--nv-fs-mono); line-height: 1.5; }

/* Advisors: shared person cards drawn flat and centred on the warm band,
   portrait first, then the name and title, then the bio line, at this
   page's sizes. */

.nv-skb .nv-skb__scientist { gap: 0; padding: 0; border: 0; background: transparent; }

.nv-skb .nv-skb__scientist .nv-lp-person__avatar { order: -2; width: 88px; height: 88px; margin-bottom: var(--wp--preset--spacing--20); }

.nv-skb .nv-skb__scientist .nv-lp-person__foot { order: -1; padding-top: 0; border-top: 0; }

.nv-skb .nv-skb__scientist .nv-lp-person__name { font-size: var(--wp--preset--font-size--body); line-height: 1.2; letter-spacing: -0.01em; }

.nv-skb .nv-skb__scientist .nv-lp-person__bio { flex: none; margin-top: var(--wp--preset--spacing--10); }

/* Final CTA */

.nv-skb .nv-skb__final .nv-lp-head { max-width: 40rem; }

.nv-skb .nv-skb__disclaimer { max-width: 40rem; margin: var(--wp--preset--spacing--40) auto 0; font-family: var(--nv-mono); text-align: center; }

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

@media (max-width: 782px) {
	.nv-skb__hero-grid,
	.nv-skb__chapter-head,
	.nv-skb__stat-panel,
	.nv-skb__ing-detail,
	.nv-skb__inside-outside,
	.nv-skb__grid-3 { grid-template-columns: minmax(0, 1fr); }

	.nv-skb .nv-skb__chapter-media { order: -1; width: 9rem; }

	.nv-skb .nv-skb__ing-media { max-width: 16rem; }
}

@media (max-width: 620px) {
	.nv-skb__nad-flow { flex-direction: column; }

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

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