/* BILLI PRO public header parity — public routes only.
   Keep authenticated customer/admin application headers out of scope. */
html body.landing-page > nav.billi-legal-header,
html body.billi-legal-page > nav.billi-legal-header,
html body:not(.billi-app) > nav.billi-legal-header {
  box-sizing:border-box !important;
  width:100% !important;
}

/* Shared logo sizing, nav alignment and predictable button geometry. */
html body.landing-page > nav.billi-legal-header > a.logo,
html body.billi-legal-page > nav.billi-legal-header > a.logo,
html body:not(.billi-app) > nav.billi-legal-header > a.logo {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex:0 1 180px !important;
  width:180px !important;
  min-width:130px !important;
  max-width:180px !important;
  min-height:42px !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
}
html body.landing-page > nav.billi-legal-header > a.logo > img.billi-header-wordmark,
html body.billi-legal-page > nav.billi-legal-header > a.logo > img.billi-header-wordmark,
html body:not(.billi-app) > nav.billi-legal-header > a.logo > img.billi-header-wordmark {
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:auto !important;
  max-height:42px !important;
  object-fit:contain !important;
  object-position:left center !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
}

/* Same hamburger square and same animated X on every public page. */
@media (max-width:760px) {
  html body.landing-page > nav.billi-legal-header > .menu-toggle,
  html body.billi-legal-page > nav.billi-legal-header > .menu-toggle,
  html body:not(.billi-app) > nav.billi-legal-header > .menu-toggle {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    flex:0 0 48px !important;
    width:48px !important;
    min-width:48px !important;
    height:48px !important;
    min-height:48px !important;
    margin:0 0 0 auto !important;
    padding:0 !important;
    border:1px solid #d7dfeb !important;
    border-radius:12px !important;
    background:#fff !important;
    color:#172033 !important;
    box-shadow:0 4px 14px rgba(23,32,51,.08) !important;
    appearance:none !important;
    -webkit-appearance:none !important;
    position:relative !important;
    z-index:2203 !important;
    transform:none !important;
  }
  html body.landing-page > nav.billi-legal-header > .menu-toggle .menu-icon,
  html body.billi-legal-page > nav.billi-legal-header > .menu-toggle .menu-icon,
  html body:not(.billi-app) > nav.billi-legal-header > .menu-toggle .menu-icon {
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:space-between !important;
    width:22px !important;
    height:18px !important;
    pointer-events:none !important;
  }
  html body.landing-page > nav.billi-legal-header > .menu-toggle .menu-icon i,
  html body.billi-legal-page > nav.billi-legal-header > .menu-toggle .menu-icon i,
  html body:not(.billi-app) > nav.billi-legal-header > .menu-toggle .menu-icon i {
    display:block !important;
    width:22px !important;
    height:2.5px !important;
    min-height:2.5px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:999px !important;
    background:#172033 !important;
    transition:transform .2s ease, opacity .2s ease !important;
  }
  html body.landing-page > nav.billi-legal-header > .menu-toggle.is-open .menu-icon i:nth-child(1),
  html body.billi-legal-page > nav.billi-legal-header > .menu-toggle.is-open .menu-icon i:nth-child(1),
  html body:not(.billi-app) > nav.billi-legal-header > .menu-toggle.is-open .menu-icon i:nth-child(1) {
    transform:translateY(7.75px) rotate(45deg) !important;
  }
  html body.landing-page > nav.billi-legal-header > .menu-toggle.is-open .menu-icon i:nth-child(2),
  html body.billi-legal-page > nav.billi-legal-header > .menu-toggle.is-open .menu-icon i:nth-child(2),
  html body:not(.billi-app) > nav.billi-legal-header > .menu-toggle.is-open .menu-icon i:nth-child(2) { opacity:0 !important; }
  html body.landing-page > nav.billi-legal-header > .menu-toggle.is-open .menu-icon i:nth-child(3),
  html body.billi-legal-page > nav.billi-legal-header > .menu-toggle.is-open .menu-icon i:nth-child(3),
  html body:not(.billi-app) > nav.billi-legal-header > .menu-toggle.is-open .menu-icon i:nth-child(3) {
    transform:translateY(-7.75px) rotate(-45deg) !important;
  }

  /* Identical dropdown geometry for Home and the Legal/Support family. */
  html body.landing-page > nav.billi-legal-header > .navlinks,
  html body.billi-legal-page > nav.billi-legal-header > .navlinks,
  html body:not(.billi-app) > nav.billi-legal-header > .navlinks {
    position:absolute !important;
    top:calc(100% + 8px) !important;
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
    z-index:2202 !important;
    display:none !important;
    flex:initial !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:3px !important;
    width:min(380px,calc(100vw - 32px)) !important;
    min-width:0 !important;
    max-width:calc(100vw - 32px) !important;
    max-height:calc(100dvh - 88px) !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    margin:0 !important;
    padding:10px !important;
    box-sizing:border-box !important;
    border:1px solid #dfe5ee !important;
    border-radius:16px !important;
    background:#fff !important;
    box-shadow:0 20px 50px rgba(23,32,51,.18) !important;
    opacity:1 !important;
    visibility:visible !important;
  }
  html body.landing-page > nav.billi-legal-header > .navlinks.open,
  html body.billi-legal-page > nav.billi-legal-header > .navlinks.open,
  html body:not(.billi-app) > nav.billi-legal-header > .navlinks.open { display:flex !important; }

  html body.landing-page > nav.billi-legal-header > .navlinks > a,
  html body.billi-legal-page > nav.billi-legal-header > .navlinks > a,
  html body:not(.billi-app) > nav.billi-legal-header > .navlinks > a {
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    flex:0 0 auto !important;
    width:100% !important;
    min-width:0 !important;
    min-height:46px !important;
    height:auto !important;
    margin:0 !important;
    padding:12px 14px !important;
    box-sizing:border-box !important;
    border:0 !important;
    border-radius:9px !important;
    background:transparent !important;
    color:#334155 !important;
    -webkit-text-fill-color:#334155 !important;
    font:750 15px/1.25 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
    text-align:left !important;
    text-decoration:none !important;
    white-space:normal !important;
    box-shadow:none !important;
  }
  html body.landing-page > nav.billi-legal-header > .navlinks > a:hover,
  html body.billi-legal-page > nav.billi-legal-header > .navlinks > a:hover,
  html body:not(.billi-app) > nav.billi-legal-header > .navlinks > a:hover {
    background:#eef4ff !important;
    color:#2457d6 !important;
    -webkit-text-fill-color:#2457d6 !important;
  }
  html body.landing-page > nav.billi-legal-header > .navlinks > a.btn,
  html body.billi-legal-page > nav.billi-legal-header > .navlinks > a.btn,
  html body:not(.billi-app) > nav.billi-legal-header > .navlinks > a.btn,
  html body.landing-page > nav.billi-legal-header > .navlinks > .billi-install-button,
  html body.billi-legal-page > nav.billi-legal-header > .navlinks > .billi-install-button,
  html body:not(.billi-app) > nav.billi-legal-header > .navlinks > .billi-install-button {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:52px !important;
    margin:4px 0 0 !important;
    padding:12px 14px !important;
    border:1px solid #2457d6 !important;
    border-radius:12px !important;
    background:#2457d6 !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    font:850 16px/1.2 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
    text-align:center !important;
    white-space:normal !important;
    box-shadow:0 5px 14px rgba(36,87,214,.18) !important;
  }
  html body.landing-page > nav.billi-legal-header > .mobile-nav-backdrop,
  html body.billi-legal-page > nav.billi-legal-header > .mobile-nav-backdrop,
  html body:not(.billi-app) > nav.billi-legal-header > .mobile-nav-backdrop {
    display:none !important;
    position:fixed !important;
    inset:68px 0 0 !important;
    z-index:2201 !important;
    background:rgba(15,23,42,.34) !important;
    backdrop-filter:blur(5px) !important;
    -webkit-backdrop-filter:blur(5px) !important;
  }
  html body.landing-page > nav.billi-legal-header > .mobile-nav-backdrop.open,
  html body.billi-legal-page > nav.billi-legal-header > .mobile-nav-backdrop.open,
  html body:not(.billi-app) > nav.billi-legal-header > .mobile-nav-backdrop.open { display:block !important; }
}

@media (max-width:390px) {
  html body.landing-page > nav.billi-legal-header > .menu-toggle,
  html body.billi-legal-page > nav.billi-legal-header > .menu-toggle,
  html body:not(.billi-app) > nav.billi-legal-header > .menu-toggle {
    flex-basis:44px !important; width:44px !important; min-width:44px !important;
    height:44px !important; min-height:44px !important;
  }
}

/* Chrome Android with Desktop Site: keep public pages compact and consistent.
   This affects only public navigation, never the authenticated app header. */
@media (min-width:761px) and (max-device-width:767px) {
  /* Chrome Android Desktop Site: keep brand and every public nav action on one row. */
  html body.landing-page > nav.billi-legal-header,
  html body.billi-legal-page > nav.billi-legal-header,
  html body:not(.billi-app) > nav.billi-legal-header {
    display:flex !important;
    flex-flow:row nowrap !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:clamp(5px, 1vw, 12px) !important;
    width:100% !important;
    height:auto !important;
    min-height:64px !important;
    padding:8px 14px !important;
    overflow:visible !important;
    box-sizing:border-box !important;
  }
  html body.landing-page > nav.billi-legal-header > a.logo,
  html body.billi-legal-page > nav.billi-legal-header > a.logo,
  html body:not(.billi-app) > nav.billi-legal-header > a.logo {
    display:inline-flex !important;
    flex:0 0 clamp(118px, 17vw, 180px) !important;
    width:clamp(118px, 17vw, 180px) !important;
    min-width:0 !important;
    max-width:180px !important;
    min-height:0 !important;
    margin:0 !important;
  }
  html body.landing-page > nav.billi-legal-header > a.logo > img.billi-header-wordmark,
  html body.billi-legal-page > nav.billi-legal-header > a.logo > img.billi-header-wordmark,
  html body:not(.billi-app) > nav.billi-legal-header > a.logo > img.billi-header-wordmark {
    display:block !important; width:100% !important; height:auto !important;
    max-height:38px !important; object-fit:contain !important;
  }
  html body.landing-page > nav.billi-legal-header > .menu-toggle,
  html body.billi-legal-page > nav.billi-legal-header > .menu-toggle,
  html body:not(.billi-app) > nav.billi-legal-header > .menu-toggle,
  html body.landing-page > nav.billi-legal-header > .mobile-nav-backdrop,
  html body.billi-legal-page > nav.billi-legal-header > .mobile-nav-backdrop,
  html body:not(.billi-app) > nav.billi-legal-header > .mobile-nav-backdrop { display:none !important; }
  html body.landing-page > nav.billi-legal-header > .navlinks,
  html body.billi-legal-page > nav.billi-legal-header > .navlinks,
  html body:not(.billi-app) > nav.billi-legal-header > .navlinks {
    display:flex !important;
    flex:1 1 auto !important;
    flex-flow:row nowrap !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:clamp(4px, .8vw, 10px) !important;
    width:auto !important; min-width:0 !important; max-width:none !important;
    position:static !important; inset:auto !important; transform:none !important;
    margin:0 !important; padding:0 !important; border:0 !important;
    border-radius:0 !important; background:transparent !important; box-shadow:none !important;
    max-height:none !important; overflow:visible !important;
  }
  html body.landing-page > nav.billi-legal-header > .navlinks > a,
  html body.billi-legal-page > nav.billi-legal-header > .navlinks > a,
  html body:not(.billi-app) > nav.billi-legal-header > .navlinks > a {
    display:inline-flex !important; flex:0 1 auto !important;
    align-items:center !important; justify-content:center !important;
    width:auto !important; min-width:0 !important; max-width:none !important;
    min-height:34px !important; height:auto !important;
    margin:0 !important; padding:6px clamp(2px, .5vw, 8px) !important;
    font-size:clamp(10px, 1.05vw, 13px) !important;
    line-height:1.1 !important; white-space:nowrap !important;
    text-align:center !important; box-sizing:border-box !important;
  }
  html body.landing-page > nav.billi-legal-header > .navlinks > a.btn,
  html body.landing-page > nav.billi-legal-header > .navlinks > .billi-install-button,
  html body.billi-legal-page > nav.billi-legal-header > .navlinks > a.btn,
  html body.billi-legal-page > nav.billi-legal-header > .navlinks > .billi-install-button,
  html body:not(.billi-app) > nav.billi-legal-header > .navlinks > a.btn,
  html body:not(.billi-app) > nav.billi-legal-header > .navlinks > .billi-install-button {
    flex:0 1 auto !important; min-width:0 !important; max-width:none !important;
    min-height:34px !important; padding:6px clamp(5px, .7vw, 10px) !important;
    border-radius:8px !important; font-size:clamp(9px, .95vw, 12px) !important;
    white-space:nowrap !important; overflow-wrap:normal !important;
  }
}

@media (display-mode:standalone), (display-mode:minimal-ui) {
  html body.landing-page > nav.billi-legal-header > .navlinks > .billi-install-button,
  html body.billi-legal-page > nav.billi-legal-header > .navlinks > .billi-install-button,
  html body:not(.billi-app) > nav.billi-legal-header > .navlinks > .billi-install-button {
    display:none !important; visibility:hidden !important;
  }
}


/* V9: Fill the entire public header width; distribute links to the right edge.
   Scoped to public pages in Chrome Android Desktop Site mode. */
@media (min-width:761px) and (max-device-width:767px) {
  html body.landing-page > nav.billi-legal-header,
  html body.billi-legal-page > nav.billi-legal-header,
  html body:not(.billi-app) > nav.billi-legal-header {
    width:100% !important; max-width:none !important;
    padding-left:12px !important; padding-right:12px !important;
    gap:clamp(6px, 1.2vw, 16px) !important;
  }
  html body.landing-page > nav.billi-legal-header > a.logo,
  html body.billi-legal-page > nav.billi-legal-header > a.logo,
  html body:not(.billi-app) > nav.billi-legal-header > a.logo {
    flex:0 0 clamp(112px, 17vw, 150px) !important;
    width:clamp(112px, 17vw, 150px) !important;
    max-width:150px !important;
  }
  html body.landing-page > nav.billi-legal-header > .navlinks,
  html body.billi-legal-page > nav.billi-legal-header > .navlinks,
  html body:not(.billi-app) > nav.billi-legal-header > .navlinks {
    flex:1 1 0 !important; width:0 !important; min-width:0 !important;
    justify-content:space-between !important;
    gap:clamp(3px, .65vw, 10px) !important;
  }
  html body.landing-page > nav.billi-legal-header > .navlinks > a,
  html body.billi-legal-page > nav.billi-legal-header > .navlinks > a,
  html body:not(.billi-app) > nav.billi-legal-header > .navlinks > a {
    flex:0 1 auto !important; min-width:0 !important;
    padding-left:clamp(2px, .45vw, 8px) !important;
    padding-right:clamp(2px, .45vw, 8px) !important;
  }
}


/* V10: Brand stays at the far left; all public navigation stays grouped at the far right.
   Only affects public headers, not the authenticated BILLI PRO app. */
@media (min-width:761px) and (max-device-width:767px) {
  html body.landing-page > nav.billi-legal-header,
  html body.billi-legal-page > nav.billi-legal-header,
  html body:not(.billi-app) > nav.billi-legal-header {
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box !important;
    padding-left:12px !important;
    padding-right:12px !important;
    gap:8px !important;
  }
  html body.landing-page > nav.billi-legal-header > a.logo,
  html body.billi-legal-page > nav.billi-legal-header > a.logo,
  html body:not(.billi-app) > nav.billi-legal-header > a.logo {
    flex:0 0 auto !important;
    width:clamp(112px, 20vw, 158px) !important;
    max-width:158px !important;
    margin:0 auto 0 0 !important;
  }
  html body.landing-page > nav.billi-legal-header > .navlinks,
  html body.billi-legal-page > nav.billi-legal-header > .navlinks,
  html body:not(.billi-app) > nav.billi-legal-header > .navlinks {
    display:flex !important;
    flex:0 1 auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:calc(100% - 170px) !important;
    margin-left:auto !important;
    justify-content:flex-end !important;
    align-items:center !important;
    gap:clamp(3px, .65vw, 10px) !important;
  }
  html body.landing-page > nav.billi-legal-header > .navlinks > a,
  html body.billi-legal-page > nav.billi-legal-header > .navlinks > a,
  html body:not(.billi-app) > nav.billi-legal-header > .navlinks > a {
    flex:0 0 auto !important;
    white-space:nowrap !important;
    padding-left:clamp(2px, .45vw, 8px) !important;
    padding-right:clamp(2px, .45vw, 8px) !important;
  }
}


/* V11: Improve legibility on phones using Chrome's Desktop site mode.
   Public pages only; keep the authenticated app/dashboard unchanged. */
@media (min-width:761px) and (max-device-width:767px) {
  html body.landing-page > nav.billi-legal-header,
  html body.billi-legal-page > nav.billi-legal-header,
  html body:not(.billi-app) > nav.billi-legal-header {
    min-height:58px !important;
    height:auto !important;
    padding:7px 12px !important;
    gap:10px !important;
  }
  html body.landing-page > nav.billi-legal-header > a.logo,
  html body.billi-legal-page > nav.billi-legal-header > a.logo,
  html body:not(.billi-app) > nav.billi-legal-header > a.logo {
    flex:0 0 158px !important;
    width:158px !important;
    max-width:158px !important;
    min-height:42px !important;
  }
  html body.landing-page > nav.billi-legal-header > a.logo > img.billi-header-wordmark,
  html body.billi-legal-page > nav.billi-legal-header > a.logo > img.billi-header-wordmark,
  html body:not(.billi-app) > nav.billi-legal-header > a.logo > img.billi-header-wordmark {
    max-height:42px !important;
  }
  html body.landing-page > nav.billi-legal-header > .navlinks,
  html body.billi-legal-page > nav.billi-legal-header > .navlinks,
  html body:not(.billi-app) > nav.billi-legal-header > .navlinks {
    flex:1 1 auto !important;
    max-width:none !important;
    min-width:0 !important;
    gap:clamp(5px, 1vw, 12px) !important;
  }
  html body.landing-page > nav.billi-legal-header > .navlinks > a,
  html body.billi-legal-page > nav.billi-legal-header > .navlinks > a,
  html body:not(.billi-app) > nav.billi-legal-header > .navlinks > a {
    font-size:clamp(11px, 1.25vw, 14px) !important;
    line-height:1.2 !important;
    padding:7px clamp(4px, .7vw, 10px) !important;
  }
  html body.landing-page > nav.billi-legal-header > .navlinks > a.btn,
  html body.billi-legal-page > nav.billi-legal-header > .navlinks > a.btn,
  html body:not(.billi-app) > nav.billi-legal-header > .navlinks > a.btn,
  html body.landing-page > nav.billi-legal-header > .navlinks > .billi-install-button,
  html body.billi-legal-page > nav.billi-legal-header > .navlinks > .billi-install-button,
  html body:not(.billi-app) > nav.billi-legal-header > .navlinks > .billi-install-button {
    min-height:38px !important;
    font-size:clamp(11px, 1.15vw, 13px) !important;
    padding:8px clamp(6px, .8vw, 11px) !important;
  }
  /* Increase text legibility without changing the page's desktop grid. */
  html body.landing-page,
  html body.billi-legal-page,
  html body:not(.billi-app) {
    -webkit-text-size-adjust:115% !important;
    text-size-adjust:115% !important;
  }
  html body.landing-page main,
  html body.billi-legal-page main,
  html body:not(.billi-app) main {
    font-size:clamp(15px, 1.45vw, 17px) !important;
    line-height:1.55 !important;
  }
  html body.landing-page main h1,
  html body.billi-legal-page main h1,
  html body:not(.billi-app) main h1 {
    font-size:clamp(27px, 3vw, 36px) !important;
    line-height:1.12 !important;
  }
  html body.landing-page main h2,
  html body.billi-legal-page main h2,
  html body:not(.billi-app) main h2 {
    font-size:clamp(21px, 2.25vw, 27px) !important;
    line-height:1.2 !important;
  }
  html body.landing-page main p,
  html body.billi-legal-page main p,
  html body:not(.billi-app) main p,
  html body.landing-page main li,
  html body.billi-legal-page main li,
  html body:not(.billi-app) main li {
    font-size:clamp(14px, 1.35vw, 16px) !important;
    line-height:1.55 !important;
  }
}