/* Cross-browser and mobile interaction fixes. Loaded after page styles. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 0;
  -webkit-overflow-scrolling: touch;
}

button,
a,
summary,
input,
select,
textarea {
  touch-action: manipulation;
}

video,
img {
  max-inline-size: 100%;
}

@supports not (height: 100svh) {
  .bn-hero { min-height: min(720px, calc(100vh - var(--bn-header-height))); }
}

@media (max-width: 720px) {
  .bn-header {
    padding-top: env(safe-area-inset-top);
    backdrop-filter: none;
    background: rgba(255, 254, 250, .98);
  }

  .bn-header__shop,
  .bn-menu,
  .bn-nav a,
  .bn-nav__trigger,
  .bn-button,
  .bn-footer__toplink {
    min-height: 44px;
  }

  /* Mobile layout: show one complete video frame, then place the message in
     its own solid panel. This avoids the duplicated blurred-scene effect. */
  .bn-hero {
    display: block;
    height: auto;
    min-height: 0;
    padding: 0;
    background: var(--bn-forest-deep);
  }

  .bn-hero__poster {
    position: relative;
    z-index: 0;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1792 / 1024;
    object-fit: contain;
    object-position: center;
    background: var(--bn-forest-deep);
  }

  .bn-hero__video {
    position: absolute;
    z-index: 1;
    inset: 0 0 auto;
    display: block !important;
    width: 100%;
    height: auto;
    aspect-ratio: 1792 / 1024;
    object-fit: contain;
    object-position: center;
    background: transparent;
  }

  .bn-hero__video[hidden] { display: none !important; }

  .bn-hero__shade {
    z-index: 2;
    inset: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1792 / 1024;
    background: linear-gradient(180deg, rgba(7,37,31,.03) 45%, rgba(7,37,31,.5) 100%);
  }

  .bn-hero__inner {
    position: relative;
    z-index: 3;
    width: 100%;
    box-sizing: border-box;
    min-height: 0;
    align-items: flex-start;
    justify-content: flex-start;
    margin: 0;
    padding: 30px 18px calc(34px + env(safe-area-inset-bottom));
    background: var(--bn-forest-deep);
  }

  .bn-hero h1 {
    max-width: 9ch;
    font-size: clamp(2.5rem, 11vw, 4rem);
    line-height: .98;
  }

  .bn-hero__subhead {
    width: auto;
    max-width: 34rem;
    margin: 18px 0 24px;
    font-size: 16px;
  }

  .bn-button {
    transition-duration: .16s;
  }

  .bn-hero .bn-button {
    min-height: 50px;
    padding-inline: 20px;
  }

  .bn-nav {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
}

@media (hover: none) {
  .bn-button:hover,
  .bn-header__shop:hover {
    transform: none;
    box-shadow: none;
  }
}

/* Cross-browser compatibility layer for Safari, Firefox, Edge, Opera and
   Samsung Internet. Modern browsers keep the original visual treatment;
   older engines receive explicit fallbacks instead of invalid declarations. */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.bn-header,
.download-header,
.guide-sidebar,
.bn-bird-card__eyebrow,
.bn-app-dialog::backdrop,
.birdnee-demo-modal::backdrop,
.birdnee-product-modal::backdrop,
.feature-dialog::backdrop {
  -webkit-backdrop-filter: blur(16px);
}

.bn-nav__item.is-current > .bn-nav__trigger {
  color: var(--bn-forest-deep);
  font-weight: 700;
}

@supports not (backdrop-filter: blur(1px)) {
  .bn-header { background: rgba(255, 254, 250, .98); }
  .download-header { background: #f6f8f1; }
  .guide-sidebar { background: rgba(248, 249, 244, .98); }
  .bn-bird-card__eyebrow { background: rgba(10, 39, 33, .82); }
}

@supports not (background: color-mix(in srgb, white 50%, transparent)) {
  .guide-sidebar { background: rgba(248, 249, 244, .96); }
}

@supports not (height: 100svh) {
  .bn-products-page .bn-products-hero { min-height: min(770px, calc(100vh - var(--bn-header-height))); }
  .bn-policy-page { min-height: 100vh; }
  .download-hero__grid { min-height: min(800px, calc(100vh - 78px)); }
}

@supports not (height: 100dvh) {
  .language-list { max-height: min(450px, calc(100vh - 110px)); }
  .guide-sidebar { max-height: calc(100vh - var(--guide-header-height) - 48px); }
}

@media (max-width: 720px) {
  .bn-header { -webkit-backdrop-filter: none; }
}

/* Keep the App guide header frozen just like the shared site header. */
body.app-page {
  overflow-x: visible;
}

body.app-page > main {
  overflow-x: hidden;
}

body.app-page > .bn-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* The Download page uses the same frozen site header as every other page. */
body.download-page {
  overflow-x: visible;
}

body.download-page > main {
  overflow-x: hidden;
}

body.download-page > .bn-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}

@media (max-width: 720px) {
  @supports not (aspect-ratio: 1 / 1) {
    .bn-hero__poster,
    .bn-hero__video,
    .bn-hero__shade {
      height: 57.142857vw;
    }
  }
}

/* Keep the mobile navigation readable and aligned with the page edge. The
   desktop navigation remains unchanged; only the expanded phone menu uses
   full-width, left-aligned rows. */
@media (max-width: 900px) {
  .bn-nav > a,
  .bn-nav__trigger,
  .bn-nav__submenu a {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .bn-nav__trigger {
    justify-content: space-between;
  }
}

/* iOS Safari safe-area and dynamic-viewport refinements. */
@supports (padding: env(safe-area-inset-left)) {
  .bn-header {
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }

  .download-header__inner {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .download-footer {
    padding-bottom: calc(22px + env(safe-area-inset-bottom));
  }
}

@supports (height: 100dvh) {
  .download-hero__grid {
    min-height: min(800px, calc(100dvh - var(--bn-header-height)));
  }
}

/* Keep the wide App showcase artwork complete on phones. The source image
   contains several screens arranged horizontally, so a cover crop hides the
   outer screens at narrow widths. Let the image keep its intrinsic ratio. */
@media (max-width: 760px) {
  .bn-ai-video-visual,
  .bn-ai-video-grid,
  .bn-ai-video-card {
    touch-action: pan-y;
  }

  .bn-app-card .bn-app-visual {
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    overflow: hidden;
    background: #fffefa;
  }

  .bn-app-intro-image {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
  }

  /* The artwork has generous white margins around the screen collage. Scale
     the artwork up slightly on phones while keeping its visual centre aligned
     inside the card. */
  .bn-app-intro-image {
    width: 150%;
    max-width: none;
    /* The source artwork has extra white space on its right side. Offset the
       whole image slightly right so the visible screen collage is centred. */
    margin-left: calc(50% + 20%);
    transform: translateX(-50%);
  }
}