.insights { background: #f8f7f3; color: #151515; }

.insights-desktop,
.insights__desktop-title { display: none; }

@media (min-width: 768px) {
  .insights__container > .insights__cards,
  .insights__mobile-title { display: none; }
  .insights__desktop-title { display: inline; }
  .insights-desktop { container-type: inline-size; display: block; }
  .insights-desktop__cards { aspect-ratio: 2260 / 1060; display: flex; gap: 1.3274%; }
  .insights-desktop__card { background: #181615; border-radius: 1.3274cqw; color: white; flex: 707 1 0; isolation: isolate; min-width: 0; overflow: hidden; position: relative; transition: flex-grow 700ms cubic-bezier(.16,1,.3,1); }
  .insights-desktop__card[hidden] { display: none; }
  .insights-desktop__card.is-active { flex-grow: 1523; }
  .insights-desktop__expand { background: transparent; border: 0; border-radius: inherit; cursor: pointer; inset: 0; padding: 0; position: absolute; width: 100%; z-index: 3; }
  .insights-desktop__expand[hidden] { display: none; }
  .insights-desktop__expand:focus-visible,
  .insights-desktop__card:focus-visible { outline: 2px solid white; outline-offset: -4px; }
  .insights-desktop__image { display: block; height: 100%; left: 0; max-width: none; object-fit: cover; position: absolute; top: 0; width: 100%; }
  .insights-desktop__image--snoring { opacity: 0; transition: opacity 700ms ease; }
  .insights-desktop__card--side-sleep > .insights-desktop__image:first-child { object-position: 50% 50%; transition: object-position 700ms cubic-bezier(.16,1,.3,1); }
  .insights-desktop__card--side-sleep.is-preview > .insights-desktop__image:first-child { object-position: 76% 50%; }
  .insights-desktop__card.is-snoring .insights-desktop__image--snoring { opacity: 1; }
  .insights-desktop__card::after { background: linear-gradient(180deg, rgba(0,0,0,.4), transparent 32%, transparent 65%, rgba(0,0,0,.35)); content: ""; inset: 0; pointer-events: none; position: absolute; }
  .insights-desktop__card--awakening .insights-desktop__image { object-fit: cover; object-position: 50% 50%; transition: object-position 700ms cubic-bezier(.16,1,.3,1); }
  .insights-desktop__card--awakening.is-preview .insights-desktop__image { object-position: 100% 50%; }
  .insights-desktop__copy { left: 4.596%; position: absolute; top: 6.604%; width: 42.02%; z-index: 1; }
  .insights-desktop__copy h3 { font-family: var(--font-heading); font-size: 2.2124cqw; font-weight: 500; line-height: 1.36; margin: 0; }
  .insights-desktop__copy p { color: rgba(255,255,255,.6); font-family: var(--font-heading); font-size: 1.4159cqw; font-weight: 500; line-height: 1.375; margin: .708cqw 0 0; width: 95%; }
  .insights-desktop__card.is-snoring .insights-desktop__copy { width: 36.11%; }
  .insights-desktop__card.is-preview .insights-desktop__copy { left: 9.9%; width: 86.28%; }
  .insights-desktop__card.is-preview .insights-desktop__copy p { display: none; }
  .insights-desktop__score { align-items: center; backdrop-filter: blur(5px); background: rgba(21,21,21,.1); border: 1px solid rgba(255,255,255,.6); border-radius: 1.89cqw; bottom: 6.6%; box-sizing: border-box; display: flex; gap: 1cqw; left: 4.596%; padding: 1.03cqw 1.92cqw; position: absolute; width: 46.81%; z-index: 1; }
  .insights-desktop__score-copy { flex-shrink: 0; }
  .insights-desktop__score-copy > div { align-items: baseline; display: flex; gap: .6cqw; }
  .insights-desktop__score strong { color: #48ffa4; font-size: 3.533cqw; font-weight: 500; line-height: 1; }
  .insights-desktop__score-copy span { background: rgba(72,255,164,.1); border-radius: 99px; color: #48ffa4; font-size: .979cqw; padding: .252cqw .63cqw; }
  .insights-desktop__score small { display: block; font-size: 1.371cqw; line-height: 1.4; margin-top: .35cqw; white-space: nowrap; }
  .insights-desktop__score--poor strong,
  .insights-desktop__score--poor .insights-desktop__score-copy span { color: #ffc040; }
  .insights-desktop__score--poor .insights-desktop__score-copy span { background: rgba(255,192,64,.1); }
  .insights-desktop__bars { display: grid; font-size: 1.175cqw; gap: 1.26cqw; }
  .insights-desktop__bars > div { align-items: center; display: flex; gap: .588cqw; }
  .insights-desktop__bars span { color: rgba(255,255,255,.59); width: 3.62cqw; }
  .insights-desktop__bars i { background: #ffeda5; border-radius: .39cqw; height: 1.956cqw; width: 3.47cqw; }
  .insights-desktop__bars > div:nth-child(2) i { background: #78d0ff; width: 6.94cqw; }
  .insights-desktop__score--poor .insights-desktop__bars > div:first-child i { width: 7.5cqw; }
  .insights-desktop__score--poor .insights-desktop__bars > div:nth-child(2) i { width: 3.4cqw; }
  .insights-desktop__bars b { font-weight: 400; white-space: nowrap; }
  .insights-desktop__card--awakening.is-active .insights-desktop__copy { left: 29.68%; width: 40.05%; }
  .insights-desktop__card--awakening .insights-desktop__copy { transition: left 700ms cubic-bezier(.16,1,.3,1), width 700ms cubic-bezier(.16,1,.3,1); }
  .insights-desktop__timeline { left: 29.68%; list-style: none; margin: 0; padding: 0 0 0 1.55cqw; position: absolute; top: 25.94%; z-index: 1; }
  .insights-desktop__timeline li { font-size: 1.045cqw; margin-bottom: 1.327cqw; position: relative; }
  .insights-desktop__timeline li::before { border: 1px solid white; border-radius: 50%; box-sizing: border-box; content: ""; height: .53cqw; left: -1.55cqw; position: absolute; top: .45cqw; width: .53cqw; }
  .insights-desktop__timeline li:not(:last-child)::after { background: rgba(255,255,255,.7); bottom: -1.6cqw; content: ""; left: -1.3cqw; position: absolute; top: 1.2cqw; width: 1px; }
  .insights-desktop__timeline time { display: block; line-height: 1.4; margin-bottom: .44cqw; padding-left: .4cqw; }
  .insights-desktop__timeline li > div { display: flex; gap: .44cqw; }
  .insights-desktop__timeline span { backdrop-filter: blur(5px); background: rgba(255,255,255,.1); border-radius: 99px; color: rgba(255,255,255,.8); font-family: var(--font-heading); font-size: 1.062cqw; padding: .44cqw .82cqw; white-space: nowrap; }
  .insights-desktop__status { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
  .insights-desktop__detail { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 240ms ease, visibility 0s linear 240ms; }
  .insights-desktop__card.is-active .insights-desktop__detail { opacity: 1; visibility: visible; transition: opacity 360ms ease 300ms, visibility 0s; }
}

@media (prefers-reduced-motion: reduce) {
  .insights-desktop__card,
  .insights-desktop__image--snoring,
  .insights-desktop__card--side-sleep > .insights-desktop__image:first-child,
  .insights-desktop__card--awakening .insights-desktop__image,
  .insights-desktop__card--awakening .insights-desktop__copy,
  .insights-desktop__detail,
  .insights-desktop__card.is-active .insights-desktop__detail { transition: none; }
}

.insights__container { margin: 0 auto; max-width: 1220px; padding: clamp(52px, 5vw, 80px) var(--page-pad-x) clamp(40px, 4vw, 64px); }
.insights__heading { margin-bottom: clamp(20px, 2.4vw, 36px); }
.insights__eyebrow { font-family: var(--font-display); font-size: 14px; margin: 0 0 8px; }
.insights__heading h2 { font-family: var(--font-display); font-size: clamp(30px, 3vw, 48px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.05; margin: 0; }

.insights--reveal-ready .insights__heading,
.insights--reveal-ready .insights__card {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  transition: opacity 720ms ease, transform 1040ms cubic-bezier(.22, 1, .36, 1);
}

.insights--reveal-ready.is-insights-revealed .insights__heading,
.insights--reveal-ready.is-insights-revealed .insights__card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.insights--reveal-ready.is-insights-revealed .insights__card:nth-child(1) {
  transition-delay: 220ms;
}

.insights--reveal-ready.is-insights-revealed .insights__card:nth-child(2) {
  transition-delay: 400ms;
}

.insights__controls { display: flex; gap: 8px; justify-content: flex-end; margin-top: 22px; }
.insights__controls button { background: transparent; border: 0; height: 34px; padding: 0; width: 34px; }
.insights__controls button img { display: block; height: 100%; width: 100%; }

@media (max-width: 767px) {
  .insights__container { padding-bottom: 24px; padding-top: 28px; }
  .insights__cards { display: grid; gap: 24px; margin-inline: calc(var(--page-pad-x) * -1); }
  .insights__card { aspect-ratio: 1000 / 698; border-radius: 16px; overflow: hidden; position: relative; width: 100%; }
  .insights__card picture { display: block; }
  .insights__image { border-radius: inherit; display: block; height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .insights--reveal-ready .insights__heading,
  .insights--reveal-ready .insights__card { transition: none; }
}
