/* First poster layout; its title uses the site's shared display-heading font. */
@font-face {
  font-family:"Sleep Roboto Condensed";
  src:url("../fonts/roboto-condensed/RobotoCondensed-Variable.ttf") format("truetype");
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}

/* A scoped important layer overrides the shared site's important type rules. */
@layer sleep-hero-reference {
  html body #sleep-health :is(p,li) {
    font-family:"Sleep Roboto Condensed",sans-serif!important;
    color:#08174d!important;
    letter-spacing:0!important;
  }
  html body #sleep-health .sh-eyebrow {
    font-size:1.66015625cqw!important;
    font-weight:700!important;
    line-height:1!important;
    margin:0!important;
  }
  html body #sleep-health h1 {
    font-family:var(--site-font)!important;
    font-size:4.1015625cqw!important;
    font-weight:var(--arotec-display-weight)!important;
    line-height:1.0952380952!important;
    letter-spacing:-.02em!important;
    color:#08174d!important;
    text-transform:none!important;
    margin:0!important;
    white-space:nowrap!important;
    text-wrap:nowrap!important;
    width:max-content!important;
    max-width:none!important;
    overflow-wrap:normal!important;
  }
  html body #sleep-health .sh-subtitle {
    font-size:1.7333984375cqw!important;
    font-weight:700!important;
    line-height:1.15!important;
    margin:0!important;
    white-space:nowrap;
  }
  html body #sleep-health .sh-hero-copy p {
    font-size:1.46484375cqw!important;
    font-weight:400!important;
    line-height:1.21!important;
    margin:0!important;
    white-space:nowrap;
  }
  html body #sleep-health .sh-pillars li {
    font-size:1.5625cqw!important;
    font-weight:700!important;
    line-height:1.1!important;
  }
}

#sleep-health { container-type:inline-size; }
#sleep-health .sh-scene {
  display:block;
  height:auto;
  min-height:0;
  max-height:none;
  aspect-ratio:3154 / 1774;
}
#sleep-health .sh-art { position:absolute; inset:auto; left:50%; top:50%; width:121.7501585%; max-width:none; height:auto; transform:translate(-50%,-50%); }
#sleep-health .sh-intro {
  position:absolute;
  inset:9.15% auto auto 4.1%;
  width:38%;
  max-width:none;
  margin:0;
  padding:0;
}
#sleep-health h1 { position:absolute; top:2.05cqw; left:-.12cqw; }
#sleep-health .sh-eyebrow { transform:scaleX(.888); transform-origin:left top; }
#sleep-health h1 span { display:block; }
#sleep-health .sh-subtitle { position:absolute; top:11.65cqw; left:.05cqw; transform:scaleX(.947); transform-origin:left top; }
#sleep-health .sh-hero-copy { position:absolute; z-index:1; top:36.25%; left:4.2%; width:34%; display:grid; gap:0; }
#sleep-health .sh-hero-copy p:nth-child(2) { padding-top:1.8798828125cqw; }
#sleep-health .sh-hero-copy p:nth-child(3) { padding-top:1.6845703125cqw; }
#sleep-health .sh-pillars {
  position:absolute;
  left:11.4%;
  right:11.4%;
  bottom:6.05%;
  display:flex;
  flex-wrap:nowrap;
  justify-content:space-between;
  gap:0;
  margin:0;
  padding:0!important;
  border:0;
}
#sleep-health .sh-pillars li { white-space:nowrap; }
#sleep-health .sh-pillars li + li::before { content:"·"; display:inline-block; margin-inline:1.22cqw; }

/* Keep the poster composition on wide screens; reflow live text for reading on phones. */
@media(max-width:1199px) {
  #sleep-health .sh-scene { display:flex; flex-direction:column; aspect-ratio:auto; }
  #sleep-health .sh-intro { position:relative; inset:auto; order:-1; width:auto; margin:0 24px; padding:32px 0 24px; }
  #sleep-health .sh-eyebrow { transform:none; }
  #sleep-health h1 { position:static; margin-block:12px!important; }
  #sleep-health .sh-subtitle { position:static; transform:none; }
  #sleep-health .sh-art { position:static; order:0; width:100%; height:auto; aspect-ratio:16/9; transform:none; }
  #sleep-health .sh-hero-copy { position:static; order:1; width:auto; margin:24px; gap:22px; }
  #sleep-health .sh-hero-copy p:nth-child(n) { padding-top:0; }
  #sleep-health .sh-poster-break { display:none; }
  #sleep-health .sh-pillars { position:static; order:2; flex-wrap:wrap; justify-content:flex-start; gap:12px 22px; margin:0 24px 32px; }
  #sleep-health .sh-pillars li + li::before { content:none; }
  @layer sleep-hero-reference {
    html body #sleep-health .sh-eyebrow { font-size:17px!important; }
    html body #sleep-health h1 { font-size:clamp(32px,8.4vw,56px)!important; line-height:1.02!important; letter-spacing:-.025em!important; margin-block:12px!important; }
    html body #sleep-health .sh-subtitle { font-size:21px!important; line-height:1.25!important; white-space:normal; }
    html body #sleep-health .sh-hero-copy p { font-size:18px!important; line-height:1.5!important; white-space:normal; }
    html body #sleep-health .sh-pillars li { font-size:16px!important; line-height:1.3!important; }
  }
}

/* Long translated poster copy must finish before the five restoration domains.
   Keep the original heading/copy anchors, fonts, authored breaks and art scale;
   the scene can grow while complete benefits wrap into their own final row. */
@media (min-width: 1200px) {
  #sleep-health .sh-scene { aspect-ratio: auto; min-height: 56.246036778694cqw; padding-top: 20.389188332276cqw; padding-bottom: 3.402885225111cqw; }
  #sleep-health .sh-intro { top: 5.146512365250cqw; }
  #sleep-health .sh-hero-copy { position: relative; inset: auto; margin-left: 4.2%; }
  #sleep-health .sh-pillars { position: relative; inset: auto; flex-wrap: wrap; justify-content: flex-start; gap: 1cqw 2cqw; margin: 3cqw 11.4% 0; }
}