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

/* ---------- Skin: patterns/lovable-page-skin.php ---------- */

/* Text sizes come from the design-system layer (.nv-lp-lead / -text /
   -small / -fine / -card-title); photo frames, cards, the two-column
   split, the expert cards and the testimonial cards are the shared
   components. Rules here are layout, surfaces and the page's few display
   values. */

.nv-sk__figure { margin: 0; font-family: var(--nv-serif); font-size: var(--nv-fs-h2); font-weight: 600; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--nv-orange); }

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

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

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

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

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

/* Shared components at this page's measurements: cards without a visible
   border have no border box either; testimonial stars keep the page's
   tracking and line height; expert portraits sit centred over left-aligned
   text; the split collapses at 980px. */

.nv-sk .nv-lp-card:is(.nv-lp-card--beige, .nv-lp-card--plain) { border: 0; }

.nv-sk .nv-lp-testimonial__stars { line-height: inherit; letter-spacing: 2px; }

.nv-sk .nv-lp-testimonial__foot { line-height: 1.55; }

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

.nv-sk .nv-lp-person__name { line-height: inherit; }

/* Two-column media + copy rows: the portrait crops to the face. */

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

/* Hero */

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

.nv-sk__hero-top .nv-eyebrow { margin: 0; }

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

.nv-sk__subhead { margin: var(--wp--preset--spacing--30) 0 0; font-family: var(--nv-serif); font-size: var(--nv-fs-lead); font-style: italic; line-height: 1.35; color: var(--nv-ink-60); }

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

.nv-sk__callout { max-width: 36rem; margin: var(--wp--preset--spacing--30) 0; padding-left: var(--wp--preset--spacing--20); border-left: 2px solid var(--nv-orange); }

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

.nv-sk__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-sm); font-size: var(--wp--preset--font-size--small); font-weight: 600; line-height: 1.3; color: var(--nv-ink); }

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

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

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

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

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

.nv-sk__awards-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--wp--preset--spacing--20); margin-bottom: var(--wp--preset--spacing--20); }

.nv-sk__awards-row img { width: auto; height: 40px; }

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

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

/* Firmer skin starts underneath: a round portrait frame. */

.nv-sk__portrait-row { display: grid; grid-template-columns: 17.5rem minmax(0, 1fr); gap: var(--wp--preset--spacing--50); align-items: center; }

.nv-sk__portrait-img { width: 17.5rem; border-radius: var(--nv-radius-pill); }

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

.nv-sk .nv-sk__portrait-copy { margin-bottom: 0; }

/* Two panel */

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

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

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

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

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

/* Quick offer */

.nv-sk__offer-card { display: grid; grid-template-columns: 0.9fr 1.1fr; max-width: 60rem; margin-inline: auto; overflow: hidden; background: var(--nv-white); border-radius: var(--nv-radius-lg); box-shadow: var(--nv-shadow); }

.nv-sk__offer-media { display: flex; align-items: center; justify-content: center; padding: var(--wp--preset--spacing--40); background: var(--nv-beige); }

.nv-sk__offer-media img { display: block; width: 100%; max-width: 18rem; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--nv-radius); }

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

.nv-sk__offer-body .nv-eyebrow { margin: 0; }

.nv-sk__offer-body h3 { margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--30); }

.nv-sk__offer-stat { margin-bottom: var(--wp--preset--spacing--30); padding: var(--wp--preset--spacing--20); background: color-mix(in srgb, var(--nv-orange) 6%, transparent); border: 1px solid color-mix(in srgb, var(--nv-orange) 20%, transparent); border-radius: var(--nv-radius); }

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

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

.nv-sk__offer-stat .nv-lp-fine { font-style: italic; }

.nv-sk__offer-plans { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); margin-bottom: var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--small); }

.nv-sk__offer-plan-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--wp--preset--spacing--10); padding-bottom: var(--wp--preset--spacing--10); border-bottom: 1px solid var(--nv-ink-10); }

.nv-sk__offer-plan-row:last-child { padding-bottom: 0; border-bottom: 0; }

.nv-sk__offer-plan-row strong { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--10); font-weight: 600; color: var(--nv-ink); }

.nv-sk__offer-plan-row > span { color: var(--nv-ink-60); }

.nv-sk__offer-save { font-weight: 600; color: var(--nv-orange-deep); }

.nv-sk__offer-best { padding: 2px var(--wp--preset--spacing--10); background: var(--nv-orange-deep); border-radius: var(--nv-radius-pill); 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); }

.nv-sk__offer-cta { width: 100%; }

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

/* What people notice */

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

.nv-sk__benefit-item { 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-sk__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); }

/* Icon holders: the card's line icon on a tinted tile, disc or solid disc. */

.nv-sk__icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; color: var(--nv-orange-deep); background: color-mix(in srgb, var(--nv-orange) 10%, transparent); }

.nv-sk__icon--tile { width: 56px; height: 56px; margin: 0 auto var(--wp--preset--spacing--20); border-radius: var(--nv-radius); }

.nv-sk__icon--round { width: 48px; height: 48px; margin: 0 auto var(--wp--preset--spacing--10); border-radius: var(--nv-radius-pill); }

.nv-sk__icon--solid { width: 40px; height: 40px; border-radius: var(--nv-radius-pill); background: var(--nv-orange-deep); color: var(--nv-white); }

/* Moat */

.nv-sk__moat { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--wp--preset--spacing--50); align-items: center; padding: var(--wp--preset--spacing--50); background: var(--nv-white); border: 1px solid color-mix(in srgb, var(--nv-orange) 20%, transparent); border-radius: var(--nv-radius-lg); }

/* The photo fills the row the copy sets, rather than setting it. */

.nv-sk__moat-media { position: relative; align-self: stretch; min-height: 18rem; border-radius: var(--nv-radius); }

.nv-sk__moat-media img { position: absolute; inset: 0; }

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

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

.nv-sk__moat-point { display: flex; align-items: center; gap: var(--wp--preset--spacing--20); padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30) var(--wp--preset--spacing--10) var(--wp--preset--spacing--10); background: color-mix(in srgb, var(--nv-orange) 6%, transparent); border: 1px solid color-mix(in srgb, var(--nv-orange) 25%, transparent); border-radius: var(--nv-radius-pill); }

.nv-sk__moat-title { margin: 0; font-family: var(--nv-serif); font-size: var(--wp--preset--font-size--body); font-weight: 600; color: var(--nv-ink); }

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

/* Stat band */

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

.nv-sk__stat-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wp--preset--spacing--40); text-align: center; }

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

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

/* Comparison: two bordered shared cards and one ink card. */

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

.nv-sk__compare-card--highlight { padding: var(--wp--preset--spacing--40); border-radius: var(--nv-radius-lg); }

.nv-sk__compare-label { margin: 0 0 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-ink-60); }

.nv-sk__compare-card--highlight .nv-sk__compare-label { color: var(--nv-orange-soft); }

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

.nv-sk__compare-card--muted .nv-lp-card-title { color: var(--nv-ink-60); }

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

.nv-sk__compare-list li { display: flex; align-items: flex-start; gap: var(--wp--preset--spacing--10); }

.nv-sk__compare-glyph { flex-shrink: 0; width: 1em; color: var(--nv-ink-40); }

.nv-sk__compare-card--highlight .nv-sk__compare-glyph { color: var(--nv-orange-soft); }

.nv-sk__compare-card--highlight .nv-lp-small { color: color-mix(in srgb, var(--nv-white) 88%, transparent); }

/* Testimonials */

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

.nv-sk__disclaimer { margin-top: var(--wp--preset--spacing--40); font-style: italic; text-align: center; }

/* Trust signals */

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

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

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

.nv-sk__trust-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--wp--preset--spacing--20); margin-top: var(--wp--preset--spacing--20); }

.nv-sk__trust-logos { --nv-press-mark: 22px; }

.nv-sk__trust-logos img { width: auto; height: calc(var(--nv-press-mark) * var(--nv-mark, 1)); }

/* Ingredients */

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

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

.nv-sk__ing-body .nv-lp-fine { margin: 0 0 var(--wp--preset--spacing--20); }

.nv-sk__ing-body .nv-lp-strong { margin-bottom: var(--wp--preset--spacing--10); }

.nv-sk__ing-body ul { margin: 0; padding-left: var(--wp--preset--spacing--20); }

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

.nv-sk__ing-more .nv-eyebrow { margin: 0; }

.nv-sk__ing-more h3 { margin: var(--wp--preset--spacing--20) 0 0; }

.nv-sk__ing-more-chips { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--10); margin-top: var(--wp--preset--spacing--30); }

/* Pathways */

.nv-sk__callout-line { margin: var(--wp--preset--spacing--30) 0 0; font-family: var(--nv-serif); font-size: var(--nv-fs-h3); font-weight: 600; line-height: 1.2; color: var(--nv-ink); }

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

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

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

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

/* Proof points */

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

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

.nv-sk__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-sk__proof-item { text-align: center; }

/* Studied across firmness & circulation */

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

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

.nv-sk__study-card > .nv-sk__figure { margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--20); }

.nv-sk__fmd-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--20); margin-top: var(--wp--preset--spacing--30); padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20); background: var(--nv-beige); border-radius: var(--nv-radius); }

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

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

.nv-sk__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); }

/* Physician quote */

.nv-sk__quote-block { max-width: 52rem; margin: 0 auto; padding-left: var(--wp--preset--spacing--30); border-left: 3px solid color-mix(in srgb, var(--nv-orange) 30%, transparent); font-family: var(--nv-serif); font-size: var(--nv-fs-h3); font-weight: 600; line-height: 1.3; color: var(--nv-ink); }

.nv-sk__quote-attrib { max-width: 52rem; margin: var(--wp--preset--spacing--30) auto 0; padding-left: calc(var(--wp--preset--spacing--30) + 3px); }

.nv-sk__quote-attrib .nv-lp-small + .nv-lp-small { margin-top: 0; }

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

.nv-sk__quote-logo { display: block; width: auto; height: 20px; margin-top: var(--wp--preset--spacing--10); }

/* Experts: five novos_lp_person() cards. One row of five on wide screens,
   three over a centred two below that, a single column on phones — never a
   lone card. */

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

/* Pain points */

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

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

.nv-sk__pain-card img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 25%; }

.nv-sk__pain-card p { padding: var(--wp--preset--spacing--20); border-left: 2px solid color-mix(in srgb, var(--nv-orange) 40%, transparent); }

.nv-sk__pain-note { max-width: 34rem; margin: var(--wp--preset--spacing--40) auto 0; text-align: center; }

.nv-sk__pain-note + .nv-sk__actions { margin-top: var(--wp--preset--spacing--30); }

/* How to use */

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

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

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

.nv-sk__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); }

/* Long-term value */

.nv-sk .nv-sk__ltv-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-sk .nv-pricing__tags { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; justify-items: center; }

/* Final CTA */

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

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

.nv-sk__final-cta .nv-lp-fine { margin-top: var(--wp--preset--spacing--30); }

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

	.nv-sk__expert-grid > * { grid-column: span 2; }

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

@media (max-width: 980px) {
	.nv-sk__ing-more-chips { display: grid; grid-template-columns: repeat(3, max-content); }

	.nv-sk .nv-lp-split--even,
	.nv-sk__compare-grid,
	.nv-sk__study-grid,
	.nv-sk__expert-grid { grid-template-columns: minmax(0, 1fr); }

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

	.nv-sk .nv-sk__moat-media { aspect-ratio: 16 / 9; min-height: 0; }

	.nv-sk__stat-band,
	.nv-sk__testimonial-grid,
	.nv-sk__trust-grid,
	.nv-sk__ing-grid,
	.nv-sk__pain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

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

	.nv-sk .nv-lp-split > .nv-sk__media--portrait { aspect-ratio: 4 / 3; }
}

@media (max-width: 620px) {
	.nv-sk__portrait-row,
	.nv-sk__two-panel,
	.nv-sk__offer-card,
	.nv-sk__testimonial-grid,
	.nv-sk__trust-grid,
	.nv-sk__ing-grid,
	.nv-sk__pathway-grid,
	.nv-sk__proof-row { grid-template-columns: minmax(0, 1fr); }

	.nv-sk__portrait-row { justify-items: center; text-align: center; }

	.nv-sk__portrait-img { width: min(15rem, 100%); }

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

	.nv-sk__panel,
	.nv-sk__moat { padding: var(--wp--preset--spacing--30); }

	.nv-sk__moat-point { border-radius: var(--nv-radius); }

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

	.nv-sk__proof-item .nv-sk__icon--round { margin: 0; }

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

	.nv-sk .nv-sk__ing-more { padding: var(--wp--preset--spacing--30); }

	.nv-sk__ing-more-chips { grid-template-columns: repeat(2, max-content); }

	.nv-sk .nv-sk__ing-more-chips .nv-chip { font-size: var(--nv-fs-mono); }
}