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

/* ---------- Sleep: patterns/lovable-page-sleep.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. Backgrounds live on the full-bleed <section>
   (.nv-lp-band--*), never on the width-capped .nv-section inside it. */

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

.nv-sl__italic { font-style: italic; }

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

/* Centred sections keep one column, the width of their .nv-lp-head, so the
   heading and everything under it share the same edges. */

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

.nv-sl__centered > * { max-width: 48rem; margin-inline: auto; }

.nv-sl__centered > :is(.nv-sl__systems-grid, .nv-sl__compare-grid, .nv-sl__expect-grid) { max-width: 60rem; }

/* Photo frames: the page's photography (inc/lp-images.php) fills each
   frame edge to edge; a frame with no photo holds the placeholder slot. */

.nv-sl__frame { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--nv-radius-lg); background: var(--nv-ink-05); }

.nv-sl__frame--wide { aspect-ratio: 4 / 3; }

.nv-sl__frame--card { aspect-ratio: 4 / 3; border-radius: var(--nv-radius-lg) var(--nv-radius-lg) 0 0; }

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

.nv-sl__frame > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* Line icons (inline SVG, stroke currentColor). */

.nv-sl__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: var(--wp--preset--spacing--20); border-radius: 999px; background: color-mix(in srgb, var(--nv-orange) 10%, transparent); color: var(--nv-orange); }

.nv-sl__icon svg { width: 22px; height: 22px; display: block; }

.nv-sl__icon--tile { width: 56px; height: 56px; border-radius: var(--nv-radius); }

.nv-sl__icon--tile svg { width: 24px; height: 24px; }

/* 1. Trust strip */

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

.nv-sl__trust-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--40); max-width: var(--nv-container-wide); margin-inline: auto; padding: var(--wp--preset--spacing--20) var(--nv-gutter-wide); font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--nv-ink); }

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

/* 2. Hero */

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

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

.nv-sl__hero-lead { max-width: 44ch; }

/* 3. Why sleep gets harder */

.nv-sl__why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--40); margin-bottom: var(--wp--preset--spacing--40); text-align: left; }

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

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

.nv-sl__stat-tile { padding: var(--wp--preset--spacing--30); background: var(--nv-beige); border-radius: var(--nv-radius-lg); }

.nv-sl__stat-tile .nv-sl__stat { margin-bottom: var(--wp--preset--spacing--10); }

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

.nv-sl__why-summary { margin-top: var(--wp--preset--spacing--40); color: var(--nv-ink); }

.nv-sl__why-h3 { margin: var(--wp--preset--spacing--50) auto var(--wp--preset--spacing--20); }

/* 4. Solution quote */

.nv-sl__quote { position: relative; overflow: hidden; text-align: center; }

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

.nv-sl__quote-media > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }

.nv-sl__quote-media .nv-lp-imgslot { width: 100%; height: 100%; align-items: flex-end; justify-content: flex-start; background: transparent; border-color: var(--nv-border-on-dark); color: var(--nv-on-dark-muted); }

.nv-sl__quote-overlay { position: absolute; inset: 0; background: color-mix(in srgb, var(--nv-ink) 55%, transparent); }

.nv-sl__quote-inner { position: relative; }

.nv-sl__quote-inner > * { max-width: 44rem; margin-inline: auto; }

.nv-sl__quote-title { margin-bottom: var(--wp--preset--spacing--20); font-family: var(--nv-serif); font-size: var(--nv-fs-h3); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--nv-white); }

.nv-sl .nv-sl__quote-inner .nv-lp-text { color: color-mix(in srgb, var(--nv-white) 90%, transparent); }

/* 5. Showcase */

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

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

/* 6. Ingredients */

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

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

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

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

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

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

.nv-sl__more .nv-eyebrow { margin: 0; }

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

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

/* 7. Two cards */

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

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

.nv-sl__duo-card--light { border: 1px solid var(--nv-ink-10); }

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

.nv-sl__duo-card .nv-lp-text { max-width: 26rem; }

/* 8. Clinical study (white cards on the ink band: text back to ink) */

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

.nv-sl__trial-card,
.nv-sl__effect-box { padding: var(--wp--preset--spacing--40); background: var(--nv-white); border-radius: var(--nv-radius-lg); color: var(--nv-ink); }

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

.nv-sl__trial-card > .nv-lp-small { margin-bottom: var(--wp--preset--spacing--30); }

.nv-sl__trial-card .nv-lp-small,
.nv-sl__effect-box .nv-lp-small { color: var(--nv-ink-60); }

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

.nv-sl__fmd-row { display: flex; justify-content: space-between; gap: var(--wp--preset--spacing--20); padding: var(--wp--preset--spacing--30); background: var(--nv-beige); border-radius: var(--nv-radius); }

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

.nv-sl__fmd-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-ink-60); }

.nv-sl__fmd-value { margin: 0; font-family: var(--nv-mono); font-size: var(--wp--preset--font-size--body); font-weight: 600; color: var(--nv-orange); }

.nv-sl .nv-sl__fmd-placebo { margin-top: 0; font-family: var(--nv-mono); color: var(--nv-ink-60); }

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

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

.nv-sl__result-stat { margin: 0 0 4px; font-family: var(--nv-serif); font-size: var(--nv-fs-lead); font-weight: 600; color: var(--nv-orange); }

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

.nv-sl .nv-sl__result-label { font-weight: 600; color: var(--nv-white); }

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

.nv-sl__effect-box .nv-sl__stat { margin-bottom: var(--wp--preset--spacing--10); color: var(--nv-ink); }

/* 9. Morning */

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

.nv-sl__morning-grid .nv-lp-head { margin-bottom: var(--wp--preset--spacing--30); }

/* 10. Systems */

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

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

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

.nv-sl__closer { margin-top: var(--wp--preset--spacing--40); font-weight: 500; }

/* 11. When to take it */

.nv-sl__howto-chip { display: inline-flex; align-items: center; margin-bottom: var(--wp--preset--spacing--30); padding: var(--wp--preset--spacing--10) 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) 25%, transparent); 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-orange-deep); }

.nv-sl .nv-lp-head > .nv-lp-lead + .nv-lp-text { margin-top: var(--wp--preset--spacing--30); max-width: 40rem; font-weight: 500; }

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

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

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

/* 12. Not a sleep aid */

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

.nv-sl__compare-card { padding: var(--wp--preset--spacing--40); background: var(--nv-beige); border: 2px solid transparent; border-radius: var(--nv-radius-lg); }

.nv-sl__compare-card--highlight { background: var(--nv-white); border-color: var(--nv-orange); }

.nv-sl__compare-card .nv-eyebrow { margin: 0; }

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

/* 13. What to expect */

.nv-sl__expect-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--40); text-align: left; }

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

.nv-sl__expect-num { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: var(--wp--preset--spacing--20); background: var(--nv-beige); border: 1px solid var(--nv-ink-10); border-radius: 999px; font-family: var(--nv-serif); font-size: var(--wp--preset--font-size--body); color: var(--nv-ink); }

.nv-sl__expect-body { margin: var(--wp--preset--spacing--10) 0 0; font-family: var(--nv-serif); font-size: var(--nv-fs-lead); line-height: 1.4; color: var(--nv-ink); }

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

/* 14. Trust signals */

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

.nv-sl__trust4-card { text-align: center; }

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

/* 15. Testimonials */

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

.nv-sl__testimonial-card { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); padding: var(--wp--preset--spacing--40); background: var(--nv-beige); border-radius: var(--nv-radius-lg); }

.nv-sl__testimonial-card .nv-lp-small + .nv-lp-small { margin-top: 0; }

.nv-sl__testimonial-stars { color: var(--nv-orange); }

.nv-sl__testimonial-quote { flex: 1; }

.nv-sl__testimonial-name { padding-top: var(--wp--preset--spacing--20); border-top: 1px solid var(--nv-ink-10); font-weight: 600; color: var(--nv-ink); }

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

/* 17. Final CTA */

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

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

.nv-sl__final .nv-lp-actions + .nv-lp-fine { margin-top: var(--wp--preset--spacing--30); }

.nv-sl__final .nv-lp-fine + .nv-lp-fine { margin-top: 4px; }

/* Grids declare column counts that divide their item counts at every width
   (no lone last card at 768 / 1024 / 1440 / 1920). */

@media (max-width: 980px) {
	.nv-sl__hero-grid,
	.nv-sl__trial-grid,
	.nv-sl__morning-grid { grid-template-columns: minmax(0, 1fr); }

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

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

@media (max-width: 620px) {
	.nv-sl__why-grid,
	.nv-sl__why-stats,
	.nv-sl__showcase-grid,
	.nv-sl__ing-grid,
	.nv-sl__systems-grid,
	.nv-sl__howto-grid,
	.nv-sl__compare-grid,
	.nv-sl__expect-grid,
	.nv-sl__testimonial-grid { grid-template-columns: minmax(0, 1fr); }

	.nv-sl__fmd-row { flex-wrap: wrap; justify-content: space-around; }

	/* The site-wide phone chip is 0.75rem; the page floor is the mono token. */
	.nv-sl .nv-chip { font-size: var(--nv-fs-mono); }

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

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