/* Warm light, clear materials, deep-space shadows. All photography is retained.
   Grade scene layers only; product originals, the wordmark and UI keep their colors. */
:root { --journey-accent:#e6b67a; --journey-muted:#c0c5c0; }
/* The supplied L08 carries a low-opacity white backdrop. Keep the product,
   remove that residual backdrop in both the family list and detail drawer. */
.family-product-image image[href="assets/products/supplied/joybreath-l08.png"],
.product-visual image[href="assets/products/supplied/joybreath-l08.png"] { filter:url(#l08-supplier-alpha); }
.vision-image, .vision-retouch { filter:saturate(1.24) contrast(1.08) brightness(1.1); }
.vision-image { animation:none; }
.vision-scene::after {
  background:linear-gradient(0deg,#101714e8, #10171440 27%, transparent 54%),linear-gradient(90deg,#08100d12,transparent 46%);
}
.vision-copy { text-shadow:0 2px 22px #0007; }
.sense-image { filter:saturate(1.18) contrast(1.06) brightness(1.12); }
.sense-stage .scene-shade {
  background:linear-gradient(90deg,#080e10e6 0%,#080e109c 34%,#080e101a 61%,transparent 78%),linear-gradient(0deg,#080e1080,transparent 30%);
}
.care-stage .stage-image { filter:saturate(1.13) contrast(1.045) brightness(1.15); object-position:right center; }
.care-stage .scene-shade {
  background:linear-gradient(90deg,#090e10e8 0%,#090e1099 37%,#090e100d 64%,transparent 80%),linear-gradient(0deg,#090e1073,transparent 36%);
}
.care-story .care-guidance { padding:22px 0 0; background:transparent; border:0; border-top:1px solid #ffffff45; color:#f3f0e8; }
.care-story .care-guidance .tile-eyebrow { color:#e6b67a; }
.care-story .care-guidance li { border-top-color:#ffffff38; }
.care-story .care-guidance li p { color:#d9ded7; }
.care-story .care-guidance strong { color:#fff; }
.care-caption { color:#f2ede1; text-shadow:0 1px 7px #000; }
#life-products .stage-image { filter:saturate(1.09) contrast(1.05) brightness(1.22); }
.fullpage-ready #life-products .stage-image { object-position:85% center; }
.fullpage-ready .life-shade {
  background:linear-gradient(90deg,#080e10db 0%,#080e106b 36%,transparent 64%),linear-gradient(0deg,#080e10a1,transparent 40%);
}
.life-product-copy { position:relative; z-index:1; }
.system-experience .system-context img { filter:saturate(1.14) contrast(1.055) brightness(1.16); }
.system-experience::before {
  background:linear-gradient(0deg,#080e10f5 0%,#080e10a6 20%,#080e1033 45%,transparent 68%),linear-gradient(90deg,#080e1073,transparent 62%);
}
.system-experience .system-context figcaption > span { text-shadow:0 2px 24px #0006; }
.scene-body, .life-product p:not(.chapter-label) { color:#dce0d8; }

/* The supplied M5 remains a separate, full-resolution product layer. */
.life-product--supplied { background:#0c1920; }
.product-atmosphere { position:absolute; z-index:-2; inset:0; background:radial-gradient(ellipse at 78% 40%,#398b9266,transparent 54%),radial-gradient(ellipse at 13% 83%,#c4823224,transparent 49%),linear-gradient(125deg,#091118 10%,#18303a 70%,#0a161d); }
.product-atmosphere::before { content:''; position:absolute; inset:auto 0 22%; height:1px; background:linear-gradient(90deg,transparent,#67bcc04a 60%,#a9e3da7a 83%,transparent); }
.product-atmosphere::after { content:''; position:absolute; inset:76% 0 0; background:linear-gradient(180deg,transparent,#060e15a8); }
.supplied-product-visual { position:absolute; z-index:0; top:50%; right:1.4%; width:52%; height:min(76dvh,1050px); transform:translateY(-46%); margin:0; }
.supplied-product-visual svg { display:block; width:100%; height:100%; }
.supplied-product-visual svg, .product-visual svg[aria-label="M5"] { mask-image:linear-gradient(#000 77%,transparent 99%); }
.fullpage-ready .life-product--supplied .life-product-copy { width:54%; align-self:center; padding-right:0; }
.life-product--supplied .chapter-label { color:#90d5d6; }
.life-product--supplied .journey-button { border-color:#acd7d9b3; }
.life-product--supplied h2 { max-width:11ch; }

/* Originals open on demand, keeping the lightweight matrix previews. */
.product-visual { height:clamp(280px,43dvh,480px); margin-bottom:0; }
.product-visual svg { display:block; width:100%; height:100%; }
.product-visual.is-photo { background:#fff; }
.product-visual.is-studio { background:radial-gradient(ellipse at 50% 35%,#38525b,#15262d); }
.product-original { display:flex; justify-content:space-between; align-items:center; gap:14px; min-height:48px; margin-bottom:26px; padding:12px 0; border-bottom:1px solid #ffffff28; color:#ddd7c9; font-size:.8125rem; }
.product-original span:last-child { display:flex; align-items:center; gap:5px; font-family:var(--mono); font-size:.75rem; color:var(--journey-accent); white-space:nowrap; }
.product-original:hover { color:#fff; border-color:var(--journey-accent); }

@media (min-width:1051px) and (max-height:800px) {
  .fullpage-ready .care-stage .stage-image { inset:0 0 0 auto; width:66%; object-fit:contain; object-position:right center; mask-image:linear-gradient(90deg,transparent,#000 32%); }
  .care-stage .scene-shade { background:linear-gradient(90deg,#090e10f0 0%,#090e10ba 36%,#090e1022 60%,transparent 80%),linear-gradient(0deg,#090e1066,transparent 25%); }
}

@media (max-aspect-ratio:5/4) and (min-width:701px) {
  .vision-scene::after { background:linear-gradient(180deg,transparent 57%,#181b1940 78%,#181b19 100%); }
  .fullpage-ready #life-products .stage-image { height:76dvh; object-position:right center; }
  .fullpage-ready #life-products .life-shade { background:linear-gradient(0deg,#080e10 22%,#080e108c 42%,transparent 68%),linear-gradient(90deg,#080e10a6,transparent 68%); }
}
@media (min-width:701px) and (max-width:1050px) {
  .fullpage-ready .care-stage { padding-top:clamp(300px,42vw,450px); }
  .fullpage-ready .care-stage .stage-image { height:clamp(320px,48vw,490px); object-position:right center; }
  .fullpage-ready .care-stage .scene-shade { background:linear-gradient(180deg,transparent 220px,#0a120e 450px); }
  .fullpage-ready .care-story { max-width:none; }
}
@media (max-width:700px) {
  .vision-scene::after { background:linear-gradient(180deg,transparent 50%,#181b1924 65%,#181b19 100%); }
  .fullpage-ready .sense-stage { --mobile-scene-height:clamp(210px,56vw,290px); padding-top:calc(var(--mobile-scene-height) + 22px); background:#0a1114; }
  .fullpage-ready .sense-image { height:var(--mobile-scene-height); object-position:center; }
  .fullpage-ready .sense-stage .scene-shade { height:var(--mobile-scene-height); background:linear-gradient(0deg,#0a1114,transparent 25%); }
  .fullpage-ready .app-preview { position:absolute; top:15px; left:var(--journey-pad); right:auto; width:74px; margin:0; }
  .fullpage-ready .app-preview .scene-caption { width:108px; margin-top:5px; padding:4px 5px; color:#edf0e8; font-size:.625rem; line-height:1.4; }
  .fullpage-ready .app-screen-button { padding:3px; border-radius:11px; }
  .fullpage-ready .app-screen-button img { border-radius:8px; }
  .fullpage-ready .care-stage { --mobile-scene-height:clamp(210px,60vw,350px); padding-top:calc(var(--mobile-scene-height) + 20px); }
  .fullpage-ready .care-stage .stage-image { height:var(--mobile-scene-height); object-position:right center; }
  .fullpage-ready .care-stage .scene-shade { height:calc(var(--mobile-scene-height) + 1px); background:linear-gradient(0deg,#0a120e,transparent 24%); }
  .fullpage-ready #life-products { background:#080e10; }
  .fullpage-ready #life-products .stage-image { top:var(--nav-height); height:min(57dvh,100vw); object-position:right center; }
  .fullpage-ready #life-products .life-shade { background:linear-gradient(0deg,#080e10 32%,#080e109c 53%,transparent 72%); }
  .fullpage-ready #life-products .life-product-copy { padding-top:30px; }
  .fullpage-ready .life-product--supplied { display:flex; flex-direction:column; justify-content:center; }
  .supplied-product-visual { position:relative; inset:auto; transform:none; flex:none; width:100%; height:clamp(220px,37dvh,390px); }
  .fullpage-ready .life-product--supplied .life-product-copy { flex:none; width:100%; padding:12px var(--journey-pad) 32px; }
  .life-product--supplied h2 { margin:16px 0; max-width:12ch; }
  .life-product--supplied .journey-button { margin-top:22px; }
  .life-product--supplied small { margin-top:20px; }
  .product-atmosphere::before { display:none; }
  .system-experience { background:#080e10; }
  .system-experience .system-context img { top:var(--nav-height); height:min(57dvh,84vw); object-position:right center; mask-image:linear-gradient(#000 78%,transparent); }
  .system-experience::before { background:linear-gradient(0deg,#080e10 25%,#080e10b3 40%,transparent 62%); }
  .product-visual { height:300px; }
}
@media (max-width:700px) and (max-height:650px) {
  .fullpage-ready #life-products .stage-image { height:45dvh; }
  .fullpage-ready #life-products { padding-top:calc(var(--nav-height) + 36dvh); }
  .fullpage-ready #life-products .life-shade { background:linear-gradient(180deg,transparent 26%,#080e10 52%); }
  .system-experience { padding-top:calc(var(--nav-height) + 38dvh); }
  .system-experience .system-context img { height:43dvh; }
  .system-experience::before { background:linear-gradient(180deg,transparent 30%,#080e10 56%); }
}