/* Mobile/tablet-only compositions from the supplied MB references. */
@font-face {
  font-family: "Sleep Diagram";
  src: url("../fonts/roboto-condensed/RobotoCondensed-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
.isb-mobile-diagram { display: none; }
@media (width < 1280px) {
  body.insights-sleep-page #main .insights-section > :not(.isb-mobile-diagram) { display: none !important; }
  body.insights-sleep-page #main .insights-section { padding: 0 0 24px; }
  body.insights-sleep-page #main .isb-mobile-diagram { display: block; width: 100%; max-width: none; margin: 0; }
  .isb-mobile-diagram-actions { padding: 14px 24px 0; }
  .isb-mobile-diagram-open, .isb-mobile-diagram-transcript > summary {
    color: #173654; font: 500 14px/1.4 var(--site-font,sans-serif); text-transform: none;
    letter-spacing: normal; cursor: pointer; min-height: 44px;
  }
  .isb-mobile-diagram-open { background: #fff; border: 1px solid #b8c9d9; border-radius: 4px; padding: 10px 16px; }
  .isb-mobile-diagram-open i { margin-left: 12px; }
  .isb-mobile-diagram-transcript { margin-top: 8px; }
  .isb-mobile-diagram-transcript > summary { padding-block: 12px; }
  .isb-mobile-diagram-text { max-width: 900px; padding-block: 12px; }
  html body.insights-sleep-page main#main :is(#integrated-system,#skin-biology,#skin-resilience,#scalp-microenvironment,#hair-biology,#beauty-outcomes) .isb-mobile-diagram-text :is(h2,h3,p,li,a,strong,span) {
    position: static; font-family: var(--site-font,sans-serif) !important; font-size: 16px !important;
    line-height: 1.6 !important; letter-spacing: normal !important; color: #173654;
    text-transform: none; margin: 0 0 12px !important; padding: 0; white-space: normal;
  }
  html body.insights-sleep-page main#main :is(#integrated-system,#skin-biology,#skin-resilience,#scalp-microenvironment,#hair-biology,#beauty-outcomes) .isb-mobile-diagram-text h3 { font-size: 20px !important; margin-top: 24px !important; }
  .isb-mobile-diagram-text ul, .isb-mobile-diagram-text ol { padding-left: 1.25em; margin-block: 16px; }
  .isb-mobile-diagram-text > div > ol { list-style: none; padding-left: 0; }
  .isb-mobile-diagram-text a, .isb-mobile-diagram-text strong { display: block; }
  .isb-mobile-diagram-text header { margin-bottom: 24px; }
  .isb-mobile-diagram-text br { display: none; }
  .isb-mobile-diagram-open:focus-visible, .isb-mobile-diagram-transcript summary:focus-visible,
  .isb-diagram-dialog button:focus-visible, .isb-diagram-dialog-viewport:focus-visible { outline: 3px solid #527eaa; outline-offset: 3px; }
}
.isb-mobile-diagram-canvas { position: relative; container-type: inline-size; isolation: isolate; width: 100%; aspect-ratio: 1672 / 941; background: #fff; color: #081329; text-align: left; }
.isb-mobile-diagram-canvas > picture, .isb-mobile-diagram-canvas > picture > img { display: block; width: 100%; height: 100%; margin: 0; }
.isb-mobile-diagram-canvas > picture > img { object-fit: contain; }
.isb-mobile-diagram-canvas .isb-map-label { position: absolute; z-index: 1; text-align: var(--label-align,left); }
.isb-mobile-diagram-canvas .isb-map-label > :is(h2,h3,p),
#isb-mobile-diagram-dialog .isb-map-label > :is(h2,h3,p),
html body.insights-sleep-page main#main :is(#integrated-system,#skin-biology,#skin-resilience,#scalp-microenvironment,#hair-biology,#beauty-outcomes) .isb-map-label > :is(h2,h3,p) {
  position: static; font-family: "Sleep Diagram","Arial Narrow",sans-serif !important;
  font-size: calc(var(--fs) / 20.48 * 1cqw) !important; font-weight: var(--label-weight) !important;
  line-height: 1.02 !important; letter-spacing: -.025em !important; color: #07132e !important;
  text-transform: none !important; white-space: normal !important; text-align: var(--label-align,left) !important;
  margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: none; min-height: 0;
  transform: none; transform-origin: left top; text-wrap: wrap; overflow-wrap: anywhere;
}
/* Translations must stay inside the authored light text columns. Retain each
   title's type size and natural glyph proportions; allow its lines to reflow. */
@media (min-width: 1280px) {
  #main :is(#integrated-system,#skin-resilience) { container-type: inline-size; }
  #main :is(#integrated-system,#skin-resilience) > .insights-separated-summary {
    width: 92%; margin: 0 4% !important; padding: 18px 0 28px;
  }
  #main #beauty-outcomes .insights-scene { height: auto; display: flex; flex-direction: column; overflow: visible; }
  #main #beauty-outcomes .insights-intro-center { position: static; order: -1; width: auto; max-width: 980px; margin: 40px auto 28px; padding-inline: 32px; }
  #main #beauty-outcomes .insights-scene > .insights-art { position: static; height: 35vw; object-fit: cover; object-position: top; }
  html body.insights-sleep-page main#main :is(#integrated-system,#skin-biology,#skin-resilience,#scalp-microenvironment,#hair-biology) :is(h2,h3,p,li) {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  html body.insights-sleep-page main#main :is(#integrated-system,#skin-biology,#skin-resilience,#scalp-microenvironment,#hair-biology) :is(h2,h3,p,li) > span {
    white-space: normal !important;
  }
  html body.insights-sleep-page main#main :is(#integrated-system,#skin-biology,#skin-resilience,#scalp-microenvironment,#hair-biology) :is(p,h3) > span {
    display: inline;
  }
  #main #skin-biology #skin-title > span { width: 100%; }
  #main #skin-biology #skin-title > span + span { width: 100%; }
  #main #skin-resilience #skin-resilience-title > span { width: 100%; }
  #main #skin-resilience #skin-resilience-title > span + span { width: 100%; }
  #main #scalp-microenvironment #scalp-title > span { width: 100%; }
  #main #scalp-microenvironment #scalp-title > span + span { width: 100%; }
  #main #hair-biology #hair-title > span { width: 100%; }
  #main #hair-biology #hair-title > span + span { width: 100%; }
  #main #skin-biology .skin-keywords li > span { flex-shrink: 1; min-width: 0; }
}
.isb-mobile-diagram-canvas .isb-map-label br { display: initial !important; }
.isb-mobile-diagram-canvas .isb-map-title > h2,
#isb-mobile-diagram-dialog .isb-map-title > h2,
html body.insights-sleep-page main#main :is(#integrated-system,#skin-biology,#skin-resilience,#scalp-microenvironment,#hair-biology,#beauty-outcomes) .isb-map-title > h2 { width: 100% !important; transform: none; line-height: .94 !important; }
.isb-mobile-diagram-canvas .isb-map-number > p,
#isb-mobile-diagram-dialog .isb-map-number > p,
html body.insights-sleep-page main#main :is(#integrated-system,#skin-biology,#skin-resilience,#scalp-microenvironment,#hair-biology,#beauty-outcomes) .isb-map-number > p { color: #3d8d94 !important; }
.isb-mobile-diagram-canvas .isb-map-caption > p,
#isb-mobile-diagram-dialog .isb-map-caption > p,
html body.insights-sleep-page main#main :is(#integrated-system,#skin-biology,#skin-resilience,#scalp-microenvironment,#hair-biology,#beauty-outcomes) .isb-map-caption > p { letter-spacing: .14em !important; color: #1c3159 !important; }
body.isb-diagram-is-open { overflow: hidden; }
.isb-diagram-dialog { width: min(1240px,calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); margin: auto; padding: 0; border: 1px solid #c7d6e3; border-radius: 8px; color: #173654; background: #fff; }
.isb-diagram-dialog::backdrop { background: rgb(7 27 70 / .7); }
.isb-diagram-dialog-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px; border-bottom: 1px solid #dce5ed; }
body.insights-sleep-page #isb-mobile-diagram-dialog h2.isb-diagram-dialog-title { flex: 1 0 100%; font: 600 17px/1.35 var(--site-font,sans-serif) !important; letter-spacing: normal !important; margin: 0 0 4px !important; }
.isb-diagram-dialog-toolbar button { background: #fff; color: #173654; border: 1px solid #b8c9d9; border-radius: 4px; padding: 10px 12px; min-height: 44px; font: 500 14px/1.3 var(--site-font,sans-serif); cursor: pointer; }
.isb-diagram-dialog-toolbar button[aria-pressed="true"] { color: #fff; background: #173654; border-color: #173654; }
.isb-diagram-dialog-toolbar button:last-child { margin-left: auto; }
.isb-diagram-dialog-viewport { overflow: auto; max-height: calc(100dvh - 164px); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.isb-diagram-dialog-canvas { box-sizing: border-box; }
@media (min-width: 1280px) { .isb-diagram-dialog { display: none; } }

/* Keep the translated scalp title within its original diagram text column.
   The same picture selector covers the authored enlarged canvas without IDs. */
@media (width < 1280px) {
  html body.insights-sleep-page main#main #scalp-microenvironment .isb-mobile-diagram-canvas .isb-map-title > h2,
  html body.insights-sleep-page #isb-mobile-diagram-dialog .isb-mobile-diagram-canvas:has(> picture > source[srcset*="/scalp-"]) .isb-map-title > h2 {
    white-space: normal !important;
    text-wrap: wrap;
  }
}

/* Keep a diagram's two-digit identifier together with the per-language fonts.
   The number keeps its original font size and position; only its box fits text. */
html body.insights-sleep-page main#main :is(#integrated-system,#skin-biology,#skin-resilience,#scalp-microenvironment,#hair-biology) :is(.system-number,.skin-number,.dermis-number,.scalp-number,.hair-number),
html body.insights-sleep-page main#main :is(#integrated-system,#skin-biology,#skin-resilience,#scalp-microenvironment,#hair-biology,#beauty-outcomes) .isb-map-number > p,
html body.insights-sleep-page #isb-mobile-diagram-dialog .isb-map-number > p {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  width: max-content !important;
}

/* Keep adjacent outcome descriptions apart while their centers stay under the
   same skin/scalp/hair illustrations. Longer text can use the next line. */
@media (min-width: 1280px) {
  #integrated-system .system-targets a {
    box-sizing: border-box;
    min-width: 0;
    padding-inline: .65cqw;
  }
}

/* Preserve natural text proportions. These selectors originally paired horizontal
   compression with reciprocal widths; keep uniform artwork zoom and canvas sizing. */
@media (min-width: 1280px) {
  html body.insights-sleep-page main#main #integrated-system .system-eyebrow > span,
  html body.insights-sleep-page main#main #integrated-system #overview-title,
  html body.insights-sleep-page main#main #integrated-system .system-summary,
  html body.insights-sleep-page main#main #integrated-system .system-number,
  html body.insights-sleep-page main#main #integrated-system .system-domains h3,
  html body.insights-sleep-page main#main #integrated-system .system-recovery-label > span,
  html body.insights-sleep-page main#main #integrated-system .system-domains p,
  html body.insights-sleep-page main#main #integrated-system .system-targets strong,
  html body.insights-sleep-page main#main #integrated-system .system-targets a > span,
  html body.insights-sleep-page main#main #skin-biology .skin-eyebrow > span,
  html body.insights-sleep-page main#main #skin-biology #skin-title > span,
  html body.insights-sleep-page main#main #skin-biology #skin-title > span + span,
  html body.insights-sleep-page main#main #skin-biology .skin-summary,
  html body.insights-sleep-page main#main #skin-biology .skin-number,
  html body.insights-sleep-page main#main #skin-biology .skin-process h3,
  html body.insights-sleep-page main#main #skin-biology .skin-process-description,
  html body.insights-sleep-page main#main #skin-resilience .dermis-eyebrow > span,
  html body.insights-sleep-page main#main #skin-resilience #skin-resilience-title > span,
  html body.insights-sleep-page main#main #skin-resilience #skin-resilience-title > span + span,
  html body.insights-sleep-page main#main #skin-resilience .dermis-summary,
  html body.insights-sleep-page main#main #skin-resilience .dermis-number,
  html body.insights-sleep-page main#main #skin-resilience .dermis-process h3,
  html body.insights-sleep-page main#main #skin-resilience .dermis-inflammation h3,
  html body.insights-sleep-page main#main #skin-resilience .dermis-pigment h3,
  html body.insights-sleep-page main#main #skin-resilience .dermis-description,
  html body.insights-sleep-page main#main #skin-resilience .dermis-pigment .dermis-description,
  html body.insights-sleep-page main#main #skin-resilience .dermis-keywords,
  html body.insights-sleep-page main#main #skin-resilience .dermis-inflammation .dermis-keywords,
  html body.insights-sleep-page main#main #scalp-microenvironment .scalp-eyebrow > span,
  html body.insights-sleep-page main#main #scalp-microenvironment #scalp-title > span,
  html body.insights-sleep-page main#main #scalp-microenvironment #scalp-title > span + span,
  html body.insights-sleep-page main#main #scalp-microenvironment .scalp-summary,
  html body.insights-sleep-page main#main #scalp-microenvironment .scalp-number,
  html body.insights-sleep-page main#main #scalp-microenvironment .scalp-process h3,
  html body.insights-sleep-page main#main #scalp-microenvironment .scalp-circulation h3,
  html body.insights-sleep-page main#main #scalp-microenvironment .scalp-immune h3,
  html body.insights-sleep-page main#main #scalp-microenvironment .scalp-caption,
  html body.insights-sleep-page main#main #scalp-microenvironment .scalp-description,
  html body.insights-sleep-page main#main #scalp-microenvironment .scalp-circulation .scalp-caption,
  html body.insights-sleep-page main#main #scalp-microenvironment .scalp-immune .scalp-caption,
  html body.insights-sleep-page main#main #scalp-microenvironment .scalp-circulation .scalp-description,
  html body.insights-sleep-page main#main #scalp-microenvironment .scalp-immune .scalp-description,
  html body.insights-sleep-page main#main #scalp-microenvironment .scalp-keywords,
  html body.insights-sleep-page main#main #scalp-microenvironment .scalp-immune .scalp-keywords,
  html body.insights-sleep-page main#main #hair-biology .hair-eyebrow > span,
  html body.insights-sleep-page main#main #hair-biology #hair-title > span,
  html body.insights-sleep-page main#main #hair-biology #hair-title > span + span,
  html body.insights-sleep-page main#main #hair-biology .hair-summary,
  html body.insights-sleep-page main#main #hair-biology .hair-number,
  html body.insights-sleep-page main#main #hair-biology .hair-process h3,
  html body.insights-sleep-page main#main #hair-biology .hair-matrix h3,
  html body.insights-sleep-page main#main #hair-biology .hair-fiber h3,
  html body.insights-sleep-page main#main #hair-biology .hair-caption,
  html body.insights-sleep-page main#main #hair-biology .hair-description,
  html body.insights-sleep-page main#main #hair-biology .hair-matrix .hair-description,
  html body.insights-sleep-page main#main #hair-biology .hair-fiber .hair-description,
  html body.insights-sleep-page main#main #hair-biology .hair-keywords,
  html body.insights-sleep-page main#main #hair-biology .hair-matrix .hair-caption,
  html body.insights-sleep-page main#main #hair-biology .hair-fiber .hair-caption,
  html body.insights-sleep-page main#main #hair-biology .hair-matrix .hair-keywords,
  html body.insights-sleep-page main#main #hair-biology .hair-fiber .hair-keywords,
  html body.insights-sleep-page main#main #hair-biology #hair-cycle-title,
  html body.insights-sleep-page main#main #hair-biology .hair-cycle li {
    transform: none !important;
    width: auto !important;
    max-width: 100%;
  }
  html body.insights-sleep-page main#main #integrated-system .system-targets a > span { margin-inline: 0; }
}

@media (min-width: 1280px) {
  html body.insights-sleep-page main#main #integrated-system .system-domains li,
  html body.insights-sleep-page main#main #skin-biology .skin-process,
  html body.insights-sleep-page main#main #skin-resilience .dermis-process,
  html body.insights-sleep-page main#main #scalp-microenvironment .scalp-process,
  html body.insights-sleep-page main#main #hair-biology .hair-process {
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: .65cqw;
  }
}

/* Natural-width headings need local room rather than compressed glyphs. */
.isb-mobile-diagram-canvas .isb-map-title > h2 {
  text-wrap: balance;
}
.isb-mobile-diagram-canvas:has(> picture > source[srcset*="/dermis-"]) > .isb-map-title {
  top: 6% !important;
}
.isb-mobile-diagram-canvas:has(> picture > source[srcset*="/scalp-"]) > .isb-map-heading[data-isb-number="02"] {
  min-width: 21cqw;
}

/* Give the long desktop resilience title its own light band. Anchor the existing
   callouts and connectors to the unchanged 16:9 artwork below that flowing title. */
@media (min-width: 1280px) {
  #main #skin-resilience .dermis-composition {
    aspect-ratio: auto;
    padding-bottom: 56.25cqw;
  }
  #main #skin-resilience .dermis-intro {
    position: relative;
    inset: auto;
    width: auto;
    margin: 0 4%;
    padding: 2.25cqw 0;
    background: #fff;
  }
  #main #skin-resilience #skin-resilience-title {
    top: auto;
    line-height: 1.12 !important;
  }
  #main #skin-resilience :is(.dermis-artwork, .dermis-connectors) {
    top: auto;
    bottom: 0;
    height: 56.25cqw;
  }
  #main #skin-resilience .dermis-matrix { top: calc(100% - 33.83775cqw); }
  #main #skin-resilience .dermis-inflammation { top: calc(100% - 32.22675cqw); }
  #main #skin-resilience .dermis-pigment { top: calc(100% - 18.45675cqw); }
}

/* The matrix connector traverses this light label column. Keep its line behind
   the naturally wider heading, while leaving the tissue endpoint visible. */
@media (min-width: 1280px) {
  #main #skin-resilience .dermis-matrix h3 {
    position: relative;
    background: #fff;
    box-shadow: 0 0 0 .2cqw #fff;
  }
}

/* Reserve flowing, light intro space for natural-width translations. Anchors use
   the original 16:9 artwork height; extra skin footer room prevents copy clipping. */
@media (min-width: 1280px) {
  #main :is(#skin-biology, #scalp-microenvironment, #hair-biology) :is(.skin-composition, .scalp-composition, .hair-composition) {
    aspect-ratio: auto;
    padding-bottom: 56.25cqw;
  }
  #main #skin-biology .skin-composition { padding-bottom: 61.25cqw; }
  #main :is(#skin-biology, #scalp-microenvironment, #hair-biology) :is(.skin-intro, .scalp-intro, .hair-intro) {
    position: relative;
    inset: auto;
    width: auto;
    margin: 0 4%;
    padding: 2.25cqw 0;
    background: #fff;
  }
  #main :is(#skin-biology, #scalp-microenvironment, #hair-biology) :is(#skin-title, #scalp-title, #hair-title) {
    top: auto;
    line-height: 1.12 !important;
  }
  #main :is(#skin-biology, #scalp-microenvironment, #hair-biology) :is(.skin-summary, .scalp-summary, .hair-summary) {
    margin-top: 1cqw !important;
  }
  #main :is(#skin-biology, #scalp-microenvironment, #hair-biology) :is(.skin-artwork, .scalp-artwork, .hair-artwork, .scalp-connectors, .hair-connectors) {
    top: auto;
    bottom: 0;
    height: 56.25cqw;
  }
  #main #skin-biology .skin-artwork { bottom: 5cqw; }
  #main #skin-biology .skin-process { top: calc(100% - 24.0434375cqw); }
  #main #scalp-microenvironment .scalp-barrier { top: calc(100% - 39.8925cqw); }
  #main #scalp-microenvironment .scalp-circulation { top: calc(100% - 22.656375cqw); }
  #main #scalp-microenvironment .scalp-immune { top: calc(100% - 25.243875cqw); }
  #main #hair-biology .hair-cycling { top: calc(100% - 34.081875cqw); }
  #main #hair-biology .hair-matrix { top: calc(100% - 16.5056875cqw); }
  #main #hair-biology .hair-fiber { top: calc(100% - 34.765875cqw); }
  #main #hair-biology .hair-cycle { top: calc(100% - 53.7598125cqw); height: 14.625cqw; }
  #main #hair-biology .hair-cycling .hair-process-copy {
    background: rgb(255 255 255 / .96);
    box-shadow: 0 0 0 .35cqw rgb(255 255 255 / .96);
  }
}