/* September 2026 visual refinements shared by the three primary pages. */

/* iOS-style liquid-glass tab rail. Labels stay plain until one refractive lens
   appears over the hovered item and glides between tabs. */
body[data-sb-page="home"] { --sb-nav-current: 0; }
body[data-sb-page="features"] { --sb-nav-current: 1; }
body[data-sb-page="support"] { --sb-nav-current: 2; }

header nav[aria-label="Quick navigation"] > ul {
  --sb-nav-lens-left: 0px;
  --sb-nav-from-left: 0px;
  --sb-nav-lens-width: 33.333%;
  --sb-nav-rail-width: 100%;
  --sb-nav-origin: center;
  --sb-nav-distance: 0;
  --sb-glass-x: 50%;
  --sb-glass-y: 18%;
  position: relative !important;
  isolation: isolate;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 !important;
  width: 100% !important;
  padding: .55rem !important;
  overflow: visible;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

header nav[aria-label="Quick navigation"] .sb-nav-lens {
  position: absolute;
  z-index: 3;
  top: -.18rem;
  bottom: -.18rem;
  left: 0;
  width: var(--sb-nav-lens-width);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .88);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(var(--sb-nav-lens-left), 0, 0);
  transform-origin: var(--sb-nav-origin);
  transition:
    transform .56s cubic-bezier(.18, .9, .24, 1.16),
    width .56s cubic-bezier(.18, .9, .24, 1.16),
    opacity .13s ease-out;
  background:
    radial-gradient(ellipse at var(--sb-glass-x) var(--sb-glass-y), rgba(255, 255, 255, .82), transparent 31%),
    radial-gradient(ellipse at 82% 88%, rgba(157, 109, 255, .24), transparent 48%),
    linear-gradient(145deg, rgba(255, 255, 255, .52), rgba(225, 211, 255, .24) 55%, rgba(255, 244, 203, .26));
  box-shadow:
    inset 0 1px 0 #fff,
    inset .22rem .06rem .38rem rgba(255, 255, 255, .78),
    inset -.18rem -.08rem .35rem rgba(72, 34, 143, .20),
    0 .12rem .24rem rgba(255, 255, 255, .95),
    0 .75rem 1.8rem rgba(48, 27, 94, .24),
    0 0 0 1px rgba(112, 72, 213, .12);
  -webkit-backdrop-filter: blur(18px) saturate(220%) contrast(1.08) brightness(1.09);
  backdrop-filter: blur(18px) saturate(220%) contrast(1.08) brightness(1.09);
}

header nav[aria-label="Quick navigation"] .sb-nav-lens::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -1px;
  padding: 2px;
  border-radius: inherit;
  background:
    conic-gradient(from 205deg,
      rgba(94, 213, 255, .05), rgba(77, 122, 255, .60), rgba(178, 79, 255, .66),
      rgba(255, 96, 154, .54), rgba(255, 190, 69, .62), rgba(91, 226, 255, .52),
      rgba(94, 213, 255, .05));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .76;
}

header nav[aria-label="Quick navigation"] .sb-nav-lens::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: -.18rem;
  left: 50%;
  width: 42%;
  height: .72rem;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, rgba(72, 171, 255, .22), rgba(195, 85, 255, .50), rgba(255, 168, 59, .32));
  box-shadow: 0 .16rem .4rem rgba(134, 79, 244, .28), inset 0 -1px rgba(255, 255, 255, .72);
  transform: translateX(-50%);
  filter: saturate(145%);
}

header nav[aria-label="Quick navigation"] .sb-nav-lens-labels {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--sb-nav-lens-left));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  width: var(--sb-nav-rail-width);
  padding: .55rem;
  color: #44208f;
  font-size: 1.055em;
  font-weight: 600;
  text-align: center;
  text-shadow: 0 1px rgba(255, 255, 255, .70);
  transition: left .56s cubic-bezier(.18, .9, .24, 1.16);
}

header nav[aria-label="Quick navigation"] .sb-nav-lens-labels > span {
  display: grid;
  place-items: center;
  min-width: 0;
}

header nav[aria-label="Quick navigation"] > ul.sb-nav-active .sb-nav-lens {
  opacity: 1;
}

header nav[aria-label="Quick navigation"] > ul.sb-nav-gliding .sb-nav-lens {
  animation: sb-nav-liquid-travel .54s cubic-bezier(.2, .86, .26, 1) both;
}

@keyframes sb-nav-liquid-travel {
  0% {
    transform: translate3d(var(--sb-nav-from-left), 0, 0) scaleX(1);
    filter: brightness(1);
  }
  46% {
    transform: translate3d(var(--sb-nav-lens-left), 0, 0)
      scaleX(calc(1.12 + (var(--sb-nav-distance) * .045))) scaleY(.94);
    filter: brightness(1.09);
  }
  72% {
    transform: translate3d(var(--sb-nav-lens-left), 0, 0) scaleX(.975) scaleY(1.025);
  }
  100% {
    transform: translate3d(var(--sb-nav-lens-left), 0, 0) scaleX(1);
    filter: brightness(1);
  }
}

header nav[aria-label="Quick navigation"] [data-sb-nav] {
  position: relative;
  z-index: 2;
  min-width: 0;
}

header nav[aria-label="Quick navigation"] > ul.sb-nav-active [data-sb-nav].sb-nav-lens-target > a {
  color: transparent !important;
  text-shadow: none !important;
}

header nav[aria-label="Quick navigation"] [data-sb-nav] > a,
header nav[aria-label="Quick navigation"] [data-sb-nav] > a:hover,
header nav[aria-label="Quick navigation"] [data-sb-nav] > a:focus-visible {
  width: 100%;
  min-height: 2.25em;
  padding: .4em .6em;
  border: 0 !important;
  background: transparent !important;
  /* Only the text-sized liquid lens blurs the backdrop. Blurring this wider
     hit area as well creates a second capsule behind the visible button. */
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: #17111f !important;
  box-shadow: none !important;
  transform: none !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
}

header nav[aria-label="Quick navigation"] [data-sb-nav] > a::after { display: none !important; }

header nav[aria-label="Quick navigation"] [data-sb-nav] > a:is(:hover, :focus-visible) {
  color: #48239c !important;
}

header nav[aria-label="Quick navigation"] [data-sb-nav] > a[aria-current="page"] {
  color: #17111f !important;
}

/* Keep page content legible when it travels beneath the fixed navigation. */
header.sb-site-header > div > div {
  border-color: rgba(72, 49, 118, .10) !important;
  background: rgba(255, 255, 255, .70) !important;
  box-shadow: 0 1.2rem 3rem rgba(39, 25, 73, .10) !important;
  -webkit-backdrop-filter: blur(28px) saturate(175%);
  backdrop-filter: blur(28px) saturate(175%);
}

main [id] { scroll-margin-top: 15rem; }

/* Make each Inside Sleepy Banana story a balanced half-image, half-copy spread. */
section [data-sb-section="story"] {
  --sb-story-height: min(
    80rem,
    calc((100vw - 3.2rem) / 2),
    calc(100svh - 7.2rem - 6rem)
  );
  width: min(160rem, calc(100vw - 3.2rem)) !important;
  max-width: none !important;
  margin: 3rem auto !important;
  padding: 0 !important;
  display: block !important;
}

section [data-sb-section="story"] > div {
  width: 100% !important;
  max-width: none !important;
  grid-column: auto !important;
}

section [data-sb-section="story"] > div > div {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  height: var(--sb-story-height);
  min-height: 0;
  align-items: stretch !important;
  overflow: hidden;
  border-radius: 2.8rem;
  background: linear-gradient(135deg, #faf8ff, #fffdf2);
  box-shadow: 0 2rem 5.5rem rgba(44, 29, 80, .10);
}

section [data-sb-section="story"] .sb-reveal.sb-story-image {
  grid-column: 1 !important;
  grid-row: 1 !important;
  height: 100%;
  min-height: 0;
}

section [data-sb-section="story"] .sb-reveal.sb-story-image.sb-story-image-right {
  grid-column: 2 !important;
}

section [data-sb-section="story"] .sb-reveal.sb-story-image img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover !important;
  border-radius: 0 !important;
}

/* The original corrected renders include a second text column and page chrome.
   SVG viewBoxes frame only their photographs without modifying the source files. */
section [data-sb-section="story"] .sb-restored-story-photo {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Genuine app captures stay fully legible inside a softly branded frame.
   Photographs continue to fill their half of each story panel. */
section [data-sb-section="story"] .sb-reveal.sb-story-image img[src$="insights-snoring-recorded.png"],
section [data-sb-section="story"] .sb-reveal.sb-story-image img[src$="alarm-home.jpg"],
section [data-sb-section="story"] .sb-reveal.sb-story-image img[src$="nana-chat.png"],
section [data-sb-section="story"] .sb-reveal.sb-story-image img[src$="insights-main.png"] {
  object-fit: contain !important;
  object-position: center !important;
  padding: clamp(2.4rem, 4vw, 5.2rem);
  background:
    radial-gradient(circle at 22% 18%, rgba(165, 125, 255, .28), transparent 36%),
    radial-gradient(circle at 82% 78%, rgba(255, 219, 96, .20), transparent 35%),
    linear-gradient(145deg, #17122f, #29204d 58%, #1a1534);
}

section [data-sb-section="story"] .sb-reveal:not(.sb-story-image) {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: clamp(4rem, 6vw, 9rem);
  text-align: center !important;
}

section [data-sb-section="story"] .sb-reveal.sb-story-image.sb-story-image-right + .sb-reveal {
  grid-column: 1 !important;
}

section [data-sb-section="story"] .sb-reveal:not(.sb-story-image) h2 {
  max-width: 9.5em;
  margin-inline: auto !important;
}

section [data-sb-section="story"] .sb-reveal:not(.sb-story-image) > div {
  max-width: 52rem !important;
  margin-inline: auto;
}

/* Integrate the sleep-lab motion with the actual phone and mattress. */
.sb-sleep-lab-visual {
  aspect-ratio: 1220 / 470 !important;
  border: 1px solid rgba(175, 146, 255, .24);
  box-shadow: 0 2.2rem 5.5rem rgba(27, 16, 58, .22) !important;
}

.sb-sleep-lab-visual > img {
  object-position: center 68% !important;
  animation: sb-lab-pan-refined 18s cubic-bezier(.4, 0, .2, 1) infinite alternate !important;
}

.sb-sleep-lab-visual::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: -28%;
  bottom: -18%;
  width: 42%;
  height: 78%;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(188, 157, 255, .22), transparent);
  filter: blur(2.2rem);
  transform: rotate(-12deg);
  animation: sb-lab-scan 8s ease-in-out infinite;
  pointer-events: none;
}

.sb-sleep-lab-visual::after {
  background:
    linear-gradient(180deg, rgba(8, 7, 20, .01), rgba(9, 7, 24, .16)),
    radial-gradient(circle at 18% 88%, rgba(167, 124, 255, .24), transparent 17%) !important;
}

.sb-sleep-lab-glow {
  left: 16.8% !important;
  bottom: 3.5% !important;
  width: 8.5rem !important;
  height: 8.5rem !important;
  border: 1px solid rgba(225, 212, 255, .72);
  background: rgba(139, 89, 255, .10) !important;
  filter: none !important;
  box-shadow:
    0 0 0 1.6rem rgba(146, 96, 255, .08),
    0 0 0 3.8rem rgba(146, 96, 255, .035),
    0 0 3.4rem rgba(177, 139, 255, .42);
  animation: sb-lab-device-pulse 3.2s ease-out infinite !important;
}

.sb-sleep-lab-signals {
  top: auto !important;
  bottom: -1% !important;
  height: 43% !important;
  opacity: .42;
  filter: drop-shadow(0 0 7px rgba(180, 142, 255, .50)) !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 5%, #000 14%, #000 72%, transparent 92%);
  mask-image: linear-gradient(90deg, transparent 5%, #000 14%, #000 72%, transparent 92%);
}

.sb-lab-wave { stroke-width: 2 !important; stroke-dasharray: 3 16 !important; }
.sb-lab-wave-a { stroke: rgba(218, 202, 255, .78) !important; }
.sb-lab-wave-b { stroke: rgba(255, 214, 94, .26) !important; }
.sb-lab-node { opacity: .68; }

@keyframes sb-lab-pan-refined {
  0% { transform: scale(1.035) translate3d(-.35%, .35%, 0); }
  100% { transform: scale(1.065) translate3d(.35%, -.25%, 0); }
}

@keyframes sb-lab-scan {
  0%, 12% { transform: translateX(0) rotate(-12deg); opacity: 0; }
  28% { opacity: .9; }
  72% { opacity: .55; }
  88%, 100% { transform: translateX(330%) rotate(-12deg); opacity: 0; }
}

@keyframes sb-lab-device-pulse {
  0% { opacity: .86; transform: scale(.45); }
  72%, 100% { opacity: 0; transform: scale(1.45); }
}

/* Remove the support hero's unused vertical air while keeping the header clear. */
body[data-sb-page="support"] main {
  padding-top: calc(7.2rem + 3.2rem);
}

body:has(.hero .eyebrow) .hero {
  min-height: 0 !important;
  justify-content: flex-start !important;
  padding: 12rem 5rem 6.5rem !important;
}

@media (min-width: 768px) {
  /* Give the alarm introduction its own complete desktop scene. Without a
     viewport-height floor the following Sleep Health section shares the fold. */
  body[data-sb-page="home"] [data-sb-alarm-feature] {
    box-sizing: border-box;
    min-height: 100svh !important;
    justify-content: center !important;
    padding-top: calc(7.2rem + 2rem) !important;
    padding-bottom: 4rem !important;
  }
}

/* Image-led product and systems libraries on the Features page. The source
   contains enough copy to need three readable columns rather than a cramped
   four-column matrix. Every visual is either an actual Sleepy Banana app
   capture or tightly relevant realistic site photography; tall app captures
   use purposeful close crops so their real UI remains legible in wide cards. */
body[data-sb-page="features"] .sb-model-grid,
body[data-sb-page="features"] .sb-feature-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch;
  gap: 2rem !important;
}

body[data-sb-page="features"] .sb-model-grid {
  grid-auto-rows: 1fr;
  width: min(144rem, calc(100% - 4rem)) !important;
  margin-top: 4rem !important;
}

body[data-sb-page="features"] .sb-model-card {
  --sb-card-art: url("/site-assets/features-sleep-lab-man.jpg");
  --sb-card-position: center;
  --sb-card-size: cover;
  position: relative;
  isolation: isolate;
  display: flex !important;
  flex-direction: column;
  min-height: 55rem !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(201, 171, 255, .28) !important;
  border-radius: 2.6rem !important;
  background: linear-gradient(150deg, #4a238e 0%, #351968 48%, #241143 100%) !important;
  box-shadow: 0 1.8rem 5rem rgba(37, 18, 72, .20) !important;
  color: #fff !important;
  transition: transform .32s cubic-bezier(.2, .8, .2, 1), box-shadow .32s ease;
}

body[data-sb-page="features"] .sb-model-card::before {
  content: "";
  position: relative;
  z-index: 0;
  display: block;
  flex: 0 0 26rem;
  width: 100%;
  background:
    linear-gradient(180deg, rgba(22, 15, 51, .03), rgba(22, 15, 51, .18)),
    var(--sb-card-art) var(--sb-card-position) / var(--sb-card-size) no-repeat,
    linear-gradient(rgba(249, 246, 255, .72), rgba(255, 250, 224, .70)),
    var(--sb-card-art) center / cover no-repeat,
    linear-gradient(135deg, #ece4ff, #fff3b6);
}

body[data-sb-page="features"] .sb-model-card::after {
  z-index: 0;
  width: 22rem;
  height: 22rem;
  right: -9rem;
  bottom: -11rem;
}

body[data-sb-page="features"] .sb-model-icon {
  position: absolute !important;
  z-index: 2;
  top: 2rem;
  left: 2rem;
  width: 6.2rem;
  height: 6.2rem;
  border: 1px solid rgba(255, 255, 255, .52);
  border-radius: 1.8rem;
  background: rgba(19, 13, 39, .80);
  box-shadow: inset 0 1px rgba(255, 255, 255, .20), 0 1.2rem 3rem rgba(20, 11, 47, .25);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}

body[data-sb-page="features"] .sb-model-copy {
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 2.8rem;
}

body[data-sb-page="features"] .sb-model-description {
  margin-bottom: 2.4rem;
}

body[data-sb-page="features"] .sb-model-tag {
  margin-top: auto;
}

body[data-sb-page="features"] .sb-model-card h3 {
  color: #fff !important;
}

body[data-sb-page="features"] .sb-model-eyebrow {
  color: #ffdc63 !important;
}

body[data-sb-page="features"] .sb-model-description {
  color: rgba(255, 255, 255, .80) !important;
}

body[data-sb-page="features"] .sb-model-tag {
  background: rgba(255, 255, 255, .13) !important;
  color: #fff !important;
}

body[data-sb-page="features"] .sb-model-card:nth-child(2) { --sb-card-art: url("/site-assets/inside-next-step-apple-watch.jpg"); --sb-card-position: center 78%; --sb-card-size: cover; }
body[data-sb-page="features"] .sb-model-card:nth-child(3) { --sb-card-art: url("/site-assets/models-20260911/sound-detection.webp"); --sb-card-position: center; --sb-card-size: cover; }
body[data-sb-page="features"] .sb-model-card:nth-child(4) { --sb-card-art: url("/site-assets/models-20260911/sound-labels.webp"); --sb-card-position: center; --sb-card-size: cover; }
body[data-sb-page="features"] .sb-model-card:nth-child(5) { --sb-card-art: url("/site-assets/models-20260911/local-sleep-llm.webp"); --sb-card-position: center; --sb-card-size: cover; }
body[data-sb-page="features"] .sb-model-card:nth-child(6) { --sb-card-art: url("/app-screens/nana-live.png"); --sb-card-position: center; --sb-card-size: contain; }
body[data-sb-page="features"] .sb-model-card:nth-child(7) { --sb-card-art: url("/site-assets/models-20260911/sleep-health-scoring.webp"); --sb-card-position: center 20%; --sb-card-size: cover; }
body[data-sb-page="features"] .sb-model-card:nth-child(8) { --sb-card-art: url("/site-assets/models-20260911/morning-alertness-male-upright.webp"); --sb-card-position: center 20%; --sb-card-size: cover; }
body[data-sb-page="features"] .sb-model-card:nth-child(9) { --sb-card-art: url("/site-assets/models-20260911/smart-wake.webp"); --sb-card-position: center; --sb-card-size: cover; }
body[data-sb-page="features"] .sb-model-card:nth-child(10) { --sb-card-art: url("/app-screens/duration-trend-landscape.svg"); --sb-card-position: center; --sb-card-size: 100% 100%; }

/* Do not place decorative badges over genuine app UI. They obscured status
   bars and controls (most visibly the time on the Snoring screen). */
body[data-sb-page="features"] .sb-model-card:nth-child(n + 3) .sb-model-icon {
  display: none !important;
}

/* All ten model cards share the same image frame and row height. */
body[data-sb-page="features"] .sb-model-card {
  /* Decorative overflow must not become a scrollable area when content is
     focused or brought into view; that shifts the image and text independently. */
  overflow: clip;
}

body[data-sb-page="features"] .sb-model-grid .sb-model-card::before {
  flex-basis: auto;
  aspect-ratio: 853 / 440;
}

body[data-sb-page="features"] .sb-model-card:nth-child(-n + 9):hover {
  transform: none;
}

@media (min-width: 1101px) {
  body[data-sb-page="features"] .sb-model-grid {
    grid-auto-rows: 1fr;
  }

  body[data-sb-page="features"] .sb-model-card h3 {
    min-block-size: 2lh;
  }
}

/* Use the user's isolated Nana symbol, without the surrounding phone UI. */
body[data-sb-page="features"] .sb-model-card:nth-child(6)::before {
  background:
    radial-gradient(circle closest-side, transparent 85%, #141221 99%),
    url("/app-screens/nana-symbol.png") center / auto 90% no-repeat,
    #141221;
}

body[data-sb-page="features"] .sb-model-card:nth-child(10)::before {
  flex-basis: auto;
  background:
    linear-gradient(180deg, rgba(22, 15, 51, .02), rgba(22, 15, 51, .10)),
    var(--sb-card-art) center / 100% 100% no-repeat,
    #f4f1fa;
}

body[data-sb-page="features"] .sb-feature-overview {
  width: min(148rem, 100%) !important;
  margin-block: 12rem 14rem !important;
  padding: clamp(5rem, 6vw, 9rem) 1.9rem !important;
  overflow: hidden;
  border: 1px solid rgba(176, 151, 255, .24);
  border-radius: 3.4rem;
  background:
    radial-gradient(circle at 8% 0%, rgba(126, 82, 236, .30), transparent 29%),
    radial-gradient(circle at 92% 100%, rgba(255, 210, 81, .14), transparent 28%),
    linear-gradient(145deg, #12102f, #1b1945 56%, #171431);
  box-shadow: 0 3rem 8rem rgba(31, 20, 67, .18);
}

body[data-sb-page="features"] .sb-feature-intro {
  max-width: 88rem;
  margin-bottom: 5rem;
}

body[data-sb-page="features"] .sb-feature-kicker { color: #ffd85f; }
body[data-sb-page="features"] .sb-feature-intro h2 { color: #fff; }
body[data-sb-page="features"] .sb-feature-intro > p:last-child { color: rgba(255, 255, 255, .72); }

body[data-sb-page="features"] .sb-feature-card {
  --sb-card-art: url("/app-screens/alarm-home.jpg");
  --sb-card-position: center;
  --sb-card-size: cover;
  position: relative;
  display: flex !important;
  flex-direction: column;
  min-height: 55rem !important;
  padding: 0 0 2.8rem !important;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .11) !important;
  border-radius: 2.5rem !important;
  color: #fff;
  background: rgba(39, 35, 83, .92) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 1.8rem 4.5rem rgba(5, 4, 22, .24);
  transition: transform .32s cubic-bezier(.2, .8, .2, 1), border-color .32s ease, box-shadow .32s ease;
}

/* Full app screenshots: keep the entire original capture visible at its
   natural aspect ratio, without a landscape crop or height restriction. */
body[data-sb-page="features"] .sb-feature-card::before {
  content: none;
  display: none;
}

body[data-sb-page="features"] .sb-feature-media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  flex: 0 0 auto;
  object-fit: contain;
  margin: 0;
  background: #f4f1fa;
}

body[data-sb-page="features"] .sb-feature-card > .sb-feature-capture-note {
  display: block;
  margin: 1.2rem 2.6rem 2.6rem;
  color: rgba(255, 255, 255, .65);
  font-size: 1.2rem;
  line-height: 1.4;
}

/* Number badges must not cover any controls or chart labels. */
body[data-sb-page="features"] .sb-feature-card > .sb-feature-number {
  display: none;
}

body[data-sb-page="features"] .sb-feature-card {
  overflow: clip;
}

body[data-sb-page="features"] .sb-feature-number {
  left: 2rem;
  top: 2rem;
  display: grid;
  place-items: center;
  min-width: 4.7rem;
  height: 4.1rem;
  padding-inline: 1rem;
  border: 1px solid rgba(255, 255, 255, .40);
  border-radius: 999px;
  color: #fff;
  background: rgba(20, 14, 43, .72);
  box-shadow: inset 0 1px rgba(255, 255, 255, .20), 0 .8rem 2rem rgba(8, 5, 28, .24);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}

body[data-sb-page="features"] .sb-feature-card h3 {
  margin: 0 2.6rem 1.2rem !important;
  color: #fff;
  font-size: clamp(2.4rem, 2.1vw, 3.2rem);
}

body[data-sb-page="features"] .sb-feature-card p {
  margin: 0 2.6rem 2.2rem !important;
  color: rgba(255, 255, 255, .72) !important;
}

body[data-sb-page="features"] .sb-feature-meta {
  align-self: flex-start;
  margin: auto 2.6rem 0;
  color: #ffda62 !important;
}

/* Retain the shared responsive columns; card height follows full screenshots. */
body[data-sb-page="features"] .sb-feature-card {
  border-radius: 2.6rem !important;
  background: linear-gradient(150deg, #4a238e 0%, #351968 48%, #241143 100%) !important;
}

body[data-sb-page="features"] .sb-feature-card:nth-child(1) { --sb-card-art: url("/app-screens/alarm-home.jpg"); --sb-card-position: center 18%; --sb-card-size: 100% auto; }
body[data-sb-page="features"] .sb-feature-card:nth-child(2) { --sb-card-art: url("/app-screens/alarm-home.jpg"); --sb-card-position: center 47%; --sb-card-size: 100% auto; }
body[data-sb-page="features"] .sb-feature-card:nth-child(3) { --sb-card-art: url("/site-assets/features-sleep-lab-man.jpg"); --sb-card-position: center 58%; --sb-card-size: cover; }
body[data-sb-page="features"] .sb-feature-card:nth-child(4) { --sb-card-art: url("/site-assets/inside-next-step-apple-watch.jpg"); --sb-card-position: center 78%; --sb-card-size: cover; }
body[data-sb-page="features"] .sb-feature-card:nth-child(5) { --sb-card-art: url("/app-screens/home-sleep-health-phone.png"); --sb-card-position: center 40%; --sb-card-size: 100% auto; }
body[data-sb-page="features"] .sb-feature-card:nth-child(6) { --sb-card-art: url("/app-screens/sleep-health-light.png"); --sb-card-position: center 24%; --sb-card-size: 100% auto; }
body[data-sb-page="features"] .sb-feature-card:nth-child(7) { --sb-card-art: url("/app-screens/insight-card-useful-patterns.png"); --sb-card-position: center 88%; --sb-card-size: 100% auto; }
body[data-sb-page="features"] .sb-feature-card:nth-child(8) { --sb-card-art: url("/app-screens/insights-snoring-recorded.png"); --sb-card-position: center 19%; --sb-card-size: 100% auto; }
body[data-sb-page="features"] .sb-feature-card:nth-child(9) { --sb-card-art: url("/app-screens/insight-card-snoring-trend.png"); --sb-card-size: contain; }
body[data-sb-page="features"] .sb-feature-card:nth-child(10) { --sb-card-art: url("/app-screens/nana-chat.png"); --sb-card-position: center 32%; --sb-card-size: 100% auto; }
body[data-sb-page="features"] .sb-feature-card:nth-child(11) { --sb-card-art: url("/app-screens/insight-card-goals.png"); --sb-card-size: contain; }
body[data-sb-page="features"] .sb-feature-card:nth-child(12) { --sb-card-art: url("/lullabies/starlit-night.jpg"); }
body[data-sb-page="features"] .sb-feature-card:nth-child(13) { --sb-card-art: url("/app-screens/sleep-health-light.png"); --sb-card-position: center 80%; --sb-card-size: 100% auto; }
body[data-sb-page="features"] .sb-feature-card:nth-child(14) { --sb-card-art: url("/app-screens/insights-main.png"); --sb-card-position: center 8%; --sb-card-size: 100% auto; }

/* Keep the original black icon-and-copy alarm treatment, expanded to six. */
body[data-sb-page="home"] .sb-alarm-options-glass {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 4.8rem 4rem !important;
  width: min(100%, 118rem) !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-sb-page="home"] .sb-alarm-options-glass::before,
body[data-sb-page="home"] .sb-alarm-options-glass [data-alarm-option]::after {
  display: none !important;
}

body[data-sb-page="home"] .sb-alarm-options-glass [data-alarm-option] {
  display: grid !important;
  grid-template-columns: 4.8rem minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 1.6rem !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: #0d0d0f !important;
}

body[data-sb-page="home"] .sb-alarm-options-glass [data-alarm-option] > div {
  display: grid !important;
  place-items: center !important;
  width: 4.8rem !important;
  height: 4.8rem !important;
  transform: translateY(-1.2rem);
  border-radius: 50% !important;
  background: #050506 !important;
  color: #fff !important;
}

body[data-sb-page="home"] .sb-alarm-options-glass [data-alarm-option] svg {
  width: 2.7rem !important;
  height: 2.7rem !important;
  stroke-width: 2 !important;
}

body[data-sb-page="home"] .sb-alarm-options-glass [data-alarm-option] p {
  display: block !important;
  color: #0d0d0f !important;
  font-size: 1.7rem !important;
  line-height: 1.42 !important;
  text-shadow: none !important;
}

body[data-sb-page="home"] .sb-alarm-options-glass [data-alarm-option] strong {
  margin-bottom: .6rem !important;
  color: #050506 !important;
  font-size: 2.1rem !important;
  line-height: 1.15 !important;
  white-space: normal !important;
}

body[data-sb-page="home"] .sb-alarm-options-glass .sb-alarm-card-detail {
  display: none !important;
}

/* Replace the flat gray lullaby backdrop with a calm, branded atmosphere. */
#sblb-host {
  background-color: #f4efff !important;
  background-image:
    radial-gradient(circle at 14% 12%, rgba(139, 92, 246, .18), transparent 32%),
    radial-gradient(circle at 88% 84%, rgba(255, 212, 92, .22), transparent 34%),
    linear-gradient(135deg, #f1ebff 0%, #faf7ff 52%, #fff8dc 100%) !important;
}

@media (hover: hover) {
  body[data-sb-page="features"] .sb-model-card:hover,
  body[data-sb-page="features"] .sb-feature-card:hover {
    transform: translateY(-.7rem);
  }

  body[data-sb-page="features"] .sb-model-card:hover {
    box-shadow: 0 2.6rem 6rem rgba(48, 31, 91, .17) !important;
  }

  body[data-sb-page="features"] .sb-feature-card:hover {
    transform: none;
    border-color: rgba(210, 193, 255, .40) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 2.6rem 5.5rem rgba(4, 3, 18, .34);
  }
}

@media (min-width: 1101px) {
  body[data-sb-page="features"] .sb-model-grid,
  body[data-sb-page="features"] .sb-feature-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  body[data-sb-page="features"] .sb-model-card,
  body[data-sb-page="features"] .sb-feature-card {
    grid-column: span 2;
  }

  /* Ten systems resolve as a balanced 3 × 3 grid plus one centered card. */
  body[data-sb-page="features"] .sb-model-card:last-child {
    grid-column: 3 / span 2;
  }

  /* Fifteen capabilities form five complete rows of three. */
}

@media (min-width: 768px) and (max-width: 1100px) {
  body[data-sb-page="features"] .sb-model-card h3 { min-block-size: 2lh; }
}

@media (max-width: 1100px) {
  body[data-sb-page="features"] .sb-model-grid,
  body[data-sb-page="features"] .sb-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1100px) {
  header nav[aria-label="Quick navigation"] > ul { padding: .35rem !important; }
  header nav[aria-label="Quick navigation"] > ul::before,
  header nav[aria-label="Quick navigation"] > ul::after {
    top: .35rem;
    bottom: .35rem;
    left: .35rem;
    width: calc((100% - .7rem) / 3);
  }
  section [data-sb-section="story"] > div > div,
  section [data-sb-section="story"] .sb-reveal.sb-story-image,
  section [data-sb-section="story"] .sb-reveal.sb-story-image img { min-height: 0; }
}

@media (max-width: 767px) {
  html,
  body[data-sb-page] {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  /* Portrait app captures need enough vertical room to remain readable on a
     phone; keep the entire genuine screen visible instead of zooming/cropping. */
  section [data-sb-section="story"] .sb-reveal.sb-story-image:has(img[src$="insights-snoring-recorded.png"]),
  section [data-sb-section="story"] .sb-reveal.sb-story-image:has(img[src$="alarm-home.jpg"]),
  section [data-sb-section="story"] .sb-reveal.sb-story-image:has(img[src$="nana-chat.png"]),
  section [data-sb-section="story"] .sb-reveal.sb-story-image:has(img[src$="insights-main.png"]) {
    height: 50rem !important;
  }

  /* A compact, usable mobile header. The source markup still includes the
     desktop download CTA, so remove it from this row instead of allowing it
     to squeeze the Menu label into a vertical word. */
  body[data-sb-page] header.sb-site-header {
    top: .8rem !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    translate: 0 0 !important;
    transform: none !important;
  }

  body[data-sb-page] header.sb-site-header > div {
    width: 100% !important;
  }

  body[data-sb-page] header.sb-site-header > div > div {
    width: calc(100% - 1.6rem) !important;
    min-height: 6.4rem !important;
    gap: .8rem !important;
    padding: .6rem .8rem !important;
    background: rgba(255, 255, 255, .84) !important;
  }

  body[data-sb-page] header.sb-site-header .sb-logo {
    width: 10.4rem !important;
    max-width: 10.4rem !important;
    height: 5.2rem !important;
    object-fit: contain;
  }

  body[data-sb-page] header.sb-site-header .sb-nav-brand {
    min-width: 0 !important;
  }

  body[data-sb-page] header.sb-site-header .sb-logo > span:first-child {
    width: 4.5rem !important;
    background-size: 10.4rem 5.2rem !important;
  }

  body[data-sb-page] header.sb-site-header .sb-logo > span:last-child {
    width: 5.9rem !important;
    background-position: -4.5rem 0 !important;
    background-size: 10.4rem 5.2rem !important;
  }

  body[data-sb-page] header.sb-site-header #menu-button {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    width: auto !important;
    min-width: 7.2rem !important;
    min-height: 4.2rem !important;
    padding: .9rem 1.4rem !important;
    white-space: nowrap !important;
  }

  body[data-sb-page] header.sb-site-header #menu-button + .sb-nav-download {
    display: none !important;
  }

  .sb-mobile-menu {
    position: absolute;
    top: calc(100% + .8rem);
    right: 1.6rem;
    left: 1.6rem;
    display: grid;
    gap: .6rem;
    padding: .8rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .88);
    border-radius: 2.2rem;
    background:
      radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .98), transparent 45%),
      linear-gradient(135deg, rgba(255, 255, 255, .88), rgba(232, 220, 255, .78));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .98),
      0 1.8rem 4.2rem rgba(42, 27, 79, .20);
    -webkit-backdrop-filter: blur(28px) saturate(185%);
    backdrop-filter: blur(28px) saturate(185%);
  }

  .sb-mobile-menu[hidden] { display: none !important; }

  .sb-mobile-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 4.8rem;
    padding: 1rem 1.4rem;
    border: 1px solid transparent;
    border-radius: 1.5rem;
    color: #17111f !important;
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
  }

  .sb-mobile-menu a::after {
    content: "›";
    color: #7047dc;
    font-size: 2.4rem;
    font-weight: 400;
  }

  .sb-mobile-menu a[aria-current="page"] {
    border-color: rgba(112, 71, 220, .16);
    background: rgba(255, 255, 255, .64);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92);
  }

  /* The standard 90px spacer now fully clears the compact 64px header. */
  body[data-sb-page="home"] main,
  body[data-sb-page="features"] main { padding-top: 0; }

  /* Keep the products, rather than an empty central crop, visible in the
     tall mobile version of the Features hero. */
  body[data-sb-page="features"] [data-sb-section="feature-hero"] img {
    object-position: left center !important;
  }

  body[data-sb-page="features"] [data-sb-section="feature-hero"] {
    width: calc(100% - 1.6rem) !important;
    max-width: calc(100% - 1.6rem) !important;
    margin-inline: auto !important;
    overflow: hidden !important;
  }

  body[data-sb-page="features"] [data-sb-section="feature-hero"] > div {
    width: 100% !important;
    min-width: 0 !important;
  }

  body[data-sb-page="features"] [data-sb-section="feature-hero"] .sb-page-content {
    width: 100% !important;
    min-width: 0 !important;
    padding-inline: 1.8rem !important;
  }

  body[data-sb-page="features"] [data-sb-section="feature-hero"] .sb-page-content > p:first-of-type {
    max-width: 12ch;
    margin-inline: auto !important;
    font-size: clamp(3.6rem, 11vw, 4.8rem) !important;
    line-height: .98 !important;
    overflow-wrap: anywhere;
  }

  body[data-sb-page="features"] [data-sb-section="feature-hero"] .sb-page-content > p:last-child {
    max-width: 32ch !important;
    margin-inline: auto !important;
    font-size: 1.55rem !important;
    line-height: 1.5 !important;
  }

  body[data-sb-page="support"] .hero {
    width: calc(100% - 1.6rem) !important;
    max-width: calc(100% - 1.6rem) !important;
    min-height: 0 !important;
    margin-inline: auto !important;
    padding: 5rem 1.6rem 4.2rem !important;
    overflow: hidden !important;
  }

  body[data-sb-page="support"] .hero h1 {
    width: 100%;
    max-width: 100% !important;
    font-size: clamp(4rem, 12vw, 5rem) !important;
    line-height: .98 !important;
    letter-spacing: -.055em !important;
    overflow-wrap: anywhere;
  }

  body[data-sb-page="support"] .hero > p:not(.eyebrow) {
    max-width: 31ch !important;
    margin-top: 2.2rem !important;
    font-size: 1.7rem !important;
    line-height: 1.48 !important;
  }

  body[data-sb-page="support"] .quick {
    width: calc(100% - 2rem) !important;
    max-width: calc(100% - 2rem) !important;
    padding: 1rem !important;
  }

  body[data-sb-page="support"] .quick a {
    min-height: 0 !important;
    padding: 2.2rem !important;
  }

  section [data-sb-section="story"] { margin: 1.8rem auto !important; }
  section [data-sb-section="story"] > div > div {
    display: flex !important;
    height: auto !important;
    min-height: 0 !important;
    flex-direction: column !important;
    overflow: hidden;
    border-radius: 2.4rem;
  }
  section [data-sb-section="story"] .sb-reveal.sb-story-image {
    grid-column: auto !important;
    grid-row: auto !important;
    order: 1;
    width: 100%;
    height: clamp(25rem, 78vw, 34rem) !important;
    min-height: 0 !important;
    flex: 0 0 auto;
  }
  section [data-sb-section="story"] .sb-reveal.sb-story-image img {
    height: 100% !important;
    min-height: 0 !important;
  }
  section [data-sb-section="story"] .sb-reveal:not(.sb-story-image) {
    grid-column: auto !important;
    grid-row: auto !important;
    order: 2;
    width: 100%;
    padding: 3.2rem 2.2rem 3.8rem;
  }
  section [data-sb-section="story"] .sb-reveal:not(.sb-story-image) h2 {
    font-size: clamp(3rem, 10vw, 4.2rem) !important;
  }

  body[data-sb-page="home"] .sb-six-highlights-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3.2rem 1.6rem !important;
  }

  body[data-sb-page="home"] .sb-six-highlight-icon {
    width: 5.8rem;
    height: 5.8rem;
  }

  body[data-sb-page="home"] .sb-six-highlight-icon svg {
    width: 2.9rem;
    height: 2.9rem;
  }

  body[data-sb-page="home"] .sb-six-highlight h3 {
    font-size: clamp(1.9rem, 6vw, 2.3rem);
    overflow-wrap: normal;
    word-break: normal;
  }
  .sb-sleep-lab-visual { aspect-ratio: 350 / 430 !important; }
  .sb-sleep-lab-visual > img { object-position: 54% 70% !important; }
  .sb-sleep-lab-glow { left: 8% !important; bottom: 4% !important; }
  body[data-sb-page="support"] main { padding-top: calc(7.2rem + 3.2rem); }
  body:has(.hero .eyebrow) .hero { padding: 9rem 2.4rem 5rem !important; }

  body[data-sb-page="features"] .sb-model-grid,
  body[data-sb-page="features"] .sb-feature-grid {
    grid-template-columns: 1fr !important;
    gap: 1.6rem !important;
  }

  body[data-sb-page="features"] .sb-model-grid {
    width: min(100% - 2.4rem, 62rem) !important;
  }

  body[data-sb-page="features"] .sb-feature-overview {
    width: min(64.4rem, 100%) !important;
    margin-block: 7rem 8rem !important;
    padding: 4.5rem 1.1rem 1.2rem !important;
    border-radius: 2.6rem;
  }

  body[data-sb-page="features"] .sb-feature-intro {
    padding-inline: 1.2rem;
    margin-bottom: 3.4rem;
  }

  body[data-sb-page="features"] .sb-feature-card > .sb-feature-capture-note {
    margin: 1.2rem 2.4rem 1.2rem;
  }

  body[data-sb-page="features"] .sb-model-card,
  body[data-sb-page="features"] .sb-feature-card {
    min-height: 0 !important;
  }

  body[data-sb-page="features"] .sb-model-card::before,
  body[data-sb-page="features"] .sb-feature-card::before {
    flex-basis: clamp(22rem, 66vw, 28rem);
  }

  body[data-sb-page="features"] .sb-model-copy {
    padding: 2.4rem;
  }
}

/* Mobile parity: keep the same product story as desktop and adapt its
   presentation instead of swapping in legacy mobile-only content. */
@media (max-width: 767px) {
  body[data-sb-page="home"] [data-sb-mobile-legacy] {
    display: none !important;
  }

  body[data-sb-page="home"] .sb-mobile-alarm-feature {
    display: block !important;
    width: 100%;
    margin: 0 0 7rem;
    padding: 5rem 1.6rem 4.8rem;
    overflow: hidden;
    border-radius: 2.8rem;
    background:
      radial-gradient(circle at 12% 2%, rgba(180, 151, 255, .20), transparent 34%),
      radial-gradient(circle at 92% 18%, rgba(255, 226, 103, .18), transparent 34%),
      #fff;
  }

  body[data-sb-page="home"] .sb-mobile-alarm-feature > h2 {
    max-width: 12ch;
    margin-inline: auto !important;
    font-size: clamp(4rem, 13.2vw, 5.8rem) !important;
    line-height: .96 !important;
    letter-spacing: -.055em !important;
    text-align: center;
  }

  body[data-sb-page="home"] .sb-mobile-alarm-feature > p {
    max-width: 34rem !important;
    margin: 2.6rem auto 4rem !important;
    font-size: 1.7rem !important;
    line-height: 1.55 !important;
    text-align: center;
  }

  body[data-sb-page="home"] .sb-mobile-alarm-feature .sb-alarm-options-glass {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body[data-sb-page="home"] .sb-mobile-alarm-feature [data-alarm-option] {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  body[data-sb-page="home"] .sb-mobile-alarm-feature [data-alarm-option] strong {
    font-size: 2rem !important;
  }

  body[data-sb-page="home"] .sb-mobile-alarm-feature [data-alarm-option] p {
    font-size: 1.5rem !important;
    line-height: 1.45 !important;
  }

  /* Nana keeps the same copy and both genuine app captures on small screens. */
  #sb-panel2 {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    padding-top: 31rem !important;
    overflow: hidden !important;
    border-radius: 2.4rem !important;
    background-color: #100b25 !important;
    background-size: auto 34rem !important;
    background-position: 57% 0 !important;
    background-repeat: no-repeat !important;
  }

  #sb-panel2::before {
    inset: 22rem 0 0 !important;
    width: auto !important;
    background: linear-gradient(180deg, transparent 0, #100b25 10rem, #100b25 100%) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  #sb-panel2 .np-copy {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    padding: 1.8rem 2rem 1rem !important;
  }

  #sb-panel2 .np-kicker {
    font-size: 2.7rem !important;
  }

  #sb-panel2 .np-nameimg {
    width: min(74vw, 28rem) !important;
    margin-block: .4rem 1rem !important;
  }

  #sb-panel2 .np-sub {
    max-width: 30rem;
    font-size: 1.8rem !important;
    line-height: 1.3;
  }

  #sb-panel2 .np-feature {
    grid-template-columns: 4.2rem minmax(0, 1fr) !important;
    gap: 1.2rem !important;
    padding: 1.2rem 0 !important;
  }

  #sb-panel2 .np-blurb {
    font-size: 1.55rem !important;
    line-height: 1.38 !important;
  }

  #sb-panel2 .np-pages {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 1.4rem !important;
    width: 100% !important;
    padding: 1.2rem 2rem 2.6rem !important;
    transform: none !important;
  }

  #sb-panel2 .np-phone {
    flex: 0 1 13.6rem !important;
    width: min(35vw, 13.6rem) !important;
    border-width: .3rem !important;
    border-radius: 2.3rem !important;
  }

  #sb-panel2 .np-phone-live {
    transform: none !important;
  }

  /* The desktop carousel uses absolute, precomputed card coordinates. On
     mobile it becomes a native horizontal, snap-scrolling collection. */
  #sblb-host {
    height: auto !important;
    min-height: 0 !important;
    margin: 1.6rem 0 !important;
    padding: 3.4rem 0 2.6rem !important;
    overflow: hidden !important;
    border-radius: 2.4rem !important;
  }

  #sblb-root {
    width: 100%;
    overflow: hidden;
  }

  .sblb-eyebrow,
  .sblb-stats {
    padding-inline: 2rem;
  }

  .sblb-eyebrow {
    font-size: 2.4rem !important;
  }

  .sblb-stats {
    margin-bottom: 2.4rem !important;
    font-size: 1.25rem !important;
  }

  .sblb-stage {
    position: relative !important;
    display: flex !important;
    gap: 1.2rem !important;
    height: auto !important;
    padding: 0 2rem 1.2rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-padding-inline: 2rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    touch-action: pan-x !important;
    -webkit-overflow-scrolling: touch;
  }

  .sblb-stage::-webkit-scrollbar {
    display: none;
  }

  .sblb-card {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 min(76vw, 29rem) !important;
    width: min(76vw, 29rem) !important;
    height: auto !important;
    aspect-ratio: 1;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: auto !important;
    scroll-snap-align: center;
    box-shadow: 0 1.8rem 3.4rem -2rem rgba(20, 18, 28, .62) !important;
  }

  .sblb-card .sblb-hero {
    opacity: 1 !important;
  }

  .sblb-card .sblb-label {
    opacity: 0 !important;
  }

  .sblb-controls {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  header nav[aria-label="Quick navigation"] > ul::before,
  header nav[aria-label="Quick navigation"] > ul::after,
  .sb-sleep-lab-visual > img,
  .sb-sleep-lab-visual::before,
  .sb-sleep-lab-glow { animation: none !important; transition: none !important; }
  body[data-sb-page="features"] .sb-model-card,
  body[data-sb-page="features"] .sb-feature-card { transition: none !important; }
}