/* Sleepy Banana foundation and component primitives.
 * Page refinements are unlayered; these low-priority defaults let them own the
 * final presentation. The site has no utility-framework runtime or stylesheet.
 */
@layer base, components;
@layer base {
  :root {
    font-size: 62.5%;
    scrollbar-gutter: stable;
    font-family: var(--font-sb-sans, system-ui, sans-serif);
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    tab-size: 4;
  }
  *, *::before, *::after, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid #e5e5e5;
  }
  * { outline-color: #a1a1a180; }
  body { background: #fff; color: #0a0a0a; }
  :is(h1, h2, h3, h4, h5, h6) { font: inherit; }
  a { color: inherit; text-decoration: inherit; }
  :is(b, strong) { font-weight: 500; }
  :is(ul, ol, menu) { list-style: none; }
  :is(img, svg, video, canvas, iframe, embed, object, audio) { display: block; vertical-align: middle; }
  :is(img, video) { max-width: 100%; height: auto; }
  svg:not([fill]) { fill: currentColor; }
  :is(button, input, select, optgroup, textarea), ::file-selector-button {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    background-color: transparent;
    border-radius: 0;
    opacity: 1;
  }
  button { cursor: pointer; text-align: center; }
  button:disabled { pointer-events: none; }
  :is(button, input[type="button"], input[type="reset"], input[type="submit"]), ::file-selector-button { appearance: button; }
  ::file-selector-button { margin-right: 4px; }
  ::placeholder { color: color-mix(in oklab, currentColor 50%, transparent); opacity: 1; }
  textarea { resize: vertical; }
  summary { display: list-item; }
  table { border-collapse: collapse; border-color: inherit; text-indent: 0; }
  hr { height: 0; border-top-width: 1px; color: inherit; }
  :is(code, pre, kbd, samp) { font: 1em ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
  small { font-size: 80%; }
  :is(sub, sup) { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; }
  sub { bottom: -.25em; }
  sup { top: -.5em; }
  [hidden]:not([hidden="until-found"]) { display: none !important; }
  .sb-reveal { opacity: 1; transform: none; }
}

@layer components {
  /* Navigation components. Liquid-glass effects are in refinements.css. */
  .sb-marketing-page {
    background-color: #fff; color: #000;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    transition: color .7s cubic-bezier(.4,0,.2,1), background-color .7s cubic-bezier(.4,0,.2,1);
  }
  .sb-site-header {
    position: fixed; inset: .8rem 0 auto; z-index: 70;
    translate: 0 -1rem;
    transition: transform .3s cubic-bezier(.4,0,.2,1), translate .3s cubic-bezier(.4,0,.2,1);
  }
  .sb-nav-surface { color: #000; transition: color .7s cubic-bezier(.4,0,.2,1); }
  .sb-nav-shell {
    position: relative; display: flex; align-items: center; gap: 1rem;
    width: calc(100% - 3.2rem); max-width: 90rem; margin-inline: auto;
    border: 1px solid transparent; border-radius: 9999px;
    padding: 1rem 1.4rem; transition: all .3s cubic-bezier(.4,0,.2,1);
  }
  .sb-nav-brand { display: flex; flex-grow: 1; }
  .sb-brand-link {
    display: flex; align-items: center; gap: .8rem; z-index: 10;
    font-size: 1.8rem; font-weight: 500; letter-spacing: -.04em;
  }
  .sb-brand-caption { display: none; font-weight: 400; line-height: 1; transition: opacity .3s cubic-bezier(.4,0,.2,1); }
  .sb-brand-name { font-weight: 500; }
  .sb-desktop-nav { display: none; position: absolute; top: 50%; left: 50%; translate: -50% -50%; font-size: 1.8rem; }
  .sb-nav-links { display: flex; width: 100%; align-items: center; justify-content: center; gap: 4rem; font-weight: 500; }
  .sb-nav-link { text-decoration: underline transparent; text-underline-offset: 10px; transition: text-decoration-color .15s cubic-bezier(.4,0,.2,1), text-underline-offset .15s cubic-bezier(.4,0,.2,1); }
  .sb-nav-link:focus { text-decoration-color: #000; text-underline-offset: 6px; outline: 0 solid; }
  .sb-menu-button {
    position: relative; display: flex; align-items: center; justify-content: center;
    overflow: hidden; border-radius: 9999px; padding: 1rem 1.6rem;
    background-color: rgb(0 0 0 / 5%); font-size: 1.4rem; font-weight: 500;
    outline: 0 solid; transition: background-color .3s cubic-bezier(.4,0,.2,1), color .3s cubic-bezier(.4,0,.2,1);
  }
  .sb-menu-label { display: block; }
  .sb-nav-download { isolation: isolate; }
  .sb-download-button {
    position: relative; display: inline-flex; border-radius: 9999px; padding: .2rem;
    font-size: 1.4rem !important; line-height: 1; font-weight: 500; text-align: center;
  }
  .sb-header-spacer { height: 7.2rem; }

  /* Home: hero, alarm introduction, and the mobile content arrangement. */
  .sb-marketing-main { padding-bottom: 8rem; }
  .sb-home-hero-inset { position: relative; margin-inline: .8rem; }
  .sb-home-hero { display: flex; position: relative; flex-direction: column; max-height: 120rem; margin-inline: auto; border-radius: 1.5rem; overflow: hidden; }
  .sb-hero-link { position: absolute; inset: 0; z-index: 0; }
  .sb-hero-art { display: flex; flex: 1; width: 100%; min-height: 0; align-items: center; justify-content: center; pointer-events: none; }
  .sb-hero-image { height: auto; max-height: 100%; object-fit: contain; }
  .sb-hero-action { position: relative; z-index: 10; flex-shrink: 0; align-self: center; }
  .sb-home-section { padding-block: 6.4rem; }
  .sb-mobile-health { padding-inline: 2.4rem; }
  .sb-old-phone-wrap { display: flex; justify-content: center; padding-inline: 2.4rem; }
  .sb-health-preview { width: 24rem; filter: drop-shadow(0 20px 40px #00000026); }
  .sb-mobile-summary { display: flex; flex-direction: column; gap: 2.4rem; margin-top: 3.2rem; padding-inline: 2.4rem; }
  .sb-mobile-summary-item { display: flex; align-items: flex-start; gap: 1.2rem; }
  .sb-summary-icon { width: 3.2rem; height: 3.2rem; flex-shrink: 0; }
  .sb-summary-copy { color: #000; font-size: 2rem; line-height: 1.3; letter-spacing: -.04em; }
  .sb-mobile-download { margin-top: 4rem; padding: 0 2.4rem 4rem; }
  .sb-mobile-download-link { display: flex; width: 100%; height: 5.6rem; align-items: center; justify-content: center; border: 1px solid #fff3; border-radius: 9999px; color: #fff; font-size: 1.6rem; letter-spacing: -.03em; white-space: nowrap; transition: opacity .15s cubic-bezier(.4,0,.2,1); }
  .sb-download-lead { font-weight: 600; }
  .sb-download-note { margin-top: 1.2rem; color: #545454; text-align: center; font-size: 1.25rem; }
  .sb-home-desktop { display: none; }
  .sb-alarm-intro { display: flex; flex-direction: column; align-items: center; gap: 4rem; padding-block: 8rem 4rem; }
  .sb-alarm-title { font-size: 6rem; font-weight: 500; line-height: 1.02; letter-spacing: -.04em; text-align: center; }
  .sb-alarm-description { max-width: 77rem; font-size: 2.1rem; line-height: 1.45; text-align: center; }
  .sb-home-media { position: relative; width: 100%; height: 36rem; margin: 1.6rem auto; border-radius: 1.5rem; overflow: hidden; background: #121a28 no-repeat center; }

  /* Footer and official download artwork. */
  .sb-site-footer { position: relative; }
  .sb-footer-inset { margin-inline: auto; border-radius: 1.5rem; }
  .sb-store-badge { height: 4.5rem; }

  /* Features: hero, introduction, laboratory visual, and alternating stories. */
  .sb-feature-hero-inset { margin-inline: .8rem; color: #fff; }
  .sb-feature-hero { position: relative; display: flex; align-items: center; justify-content: center; max-width: 192rem; max-height: 120rem; margin-inline: auto; border-radius: 1.5rem; }
  .sb-feature-hero-image { position: absolute; inset: 0 auto auto 0; width: 100%; height: 100%; object-fit: cover; border-radius: 1.5rem; }
  .sb-feature-hero-copy { position: relative; text-align: center; text-wrap: balance; }
  .sb-feature-hero-label { margin-bottom: 2rem; font-size: 1.4rem; font-weight: 500; line-height: 1.2rem; }
  .sb-feature-hero-title { margin-bottom: 2rem; font-size: 4.3rem; font-weight: 500; line-height: 1; letter-spacing: -.04em; }
  .sb-feature-hero-description { max-width: 44ch; margin: 0 auto 3rem; }
  .sb-intro-copy { grid-column: span 12; text-align: center; text-wrap: balance; }
  .sb-summary-label { margin-bottom: 1.6rem; }
  .sb-summary-title { margin-bottom: 3.6rem; }
  .sb-lab-inset { margin-inline: -.8rem; }
  .sb-sleep-lab-visual { border-radius: 1.5rem; margin-bottom: 5rem; }
  .sb-lab-description { max-width: 55ch; margin-inline: auto; }
  .sb-story-content { grid-column: span 12; }
  .sb-story-grid { display: flex; flex-direction: column; align-items: flex-end; grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .sb-story-image { position: relative; grid-column: span 6; }
  .sb-story-image-right { grid-column-start: 7; }
  .sb-story-copy { grid-column: span 6; }
  .sb-story-copy-left { grid-row-start: 1; }
  .sb-feature-heading.sb-story-title { margin-bottom: 1rem; font-weight: 500; text-wrap: balance; }
  .sb-story-description { max-width: 48rem; font-size: 1.6rem; }

  @media (hover: hover) {
    .sb-nav-link:hover { text-decoration-color: #000; text-underline-offset: 6px; }
    .sb-menu-button:hover { background-color: rgb(0 0 0 / 12%); }
    .sb-mobile-download-link:hover { opacity: .9; }
  }
  @media (min-width: 48em) {
    .sb-brand-link { font-size: 2.6rem; gap: 1.2rem; }
    .sb-brand-caption, .sb-desktop-nav, .sb-home-desktop { display: block; }
    .sb-home-mobile { display: none; }
    .sb-home-media { height: 42rem; }
    .sb-store-badge { height: 5rem; }
    .sb-intro-copy { grid-column: 2 / span 10; }
    .sb-lab-inset { margin-inline: 0; }
    .sb-story-grid { display: grid; }
    .sb-story-copy-left { text-align: right; }
  }
  @media (min-width: 62.5em) {
    .sb-nav-shell { gap: 1.8rem; }
    .sb-hero-link { cursor: pointer; }
    .sb-alarm-title { font-size: 8.4rem; }
    .sb-home-media { height: 48rem; }
    .sb-store-badge { height: 4rem; }
    .sb-feature-hero-label { margin-bottom: 3.2rem; font-size: 2.5rem; }
    .sb-feature-hero-title { font-size: 8rem; }
    .sb-intro-copy { grid-column: 3 / span 8; }
    .sb-story-content { grid-column: 2 / span 10; }
  }
  @media (min-width: 75em) {
    .sb-nav-shell { padding-inline: 2rem; }
    .sb-brand-link { font-size: 3.3rem; }
    .sb-menu-button { min-width: 13.5rem; padding: 1.2rem 2rem; }
    .sb-download-button { min-width: 13.5rem; }
    .sb-home-hero-inset, .sb-feature-hero-inset { margin-inline: 1.6rem; }
    .sb-store-badge { height: 5rem; }
    .sb-feature-hero-title { font-size: 12rem; }
    .sb-summary-label { margin-bottom: 4rem; }
    .sb-story-title-left { margin-left: -15%; }
    .sb-story-title-right { margin-right: -15%; }
  }
  @media (min-width: 84.5em) { .sb-story-content { grid-column: 3 / span 8; } }
}