/* Shared marketing navbar: home uses its existing React behavior; all standalone
   pages use the same markup, styles and hi-hello-navbar.js scroll/mobile behavior. */
@font-face{font-family:"HH Inter";src:url(/_next/static/immutable/media/inter_vf_latin-s.p.23d5jljmt72l0.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:is(body:has(section[data-track-section="hero"]),body.hhpp,body.hh-shared-nav) nav[data-track-section="navbar"]{
  width:90%;max-width:1640px;padding-top:20px;padding-bottom:20px;
  font-family:"HH Inter",Inter,Arial,sans-serif;
}
:is(body:has(section[data-track-section="hero"]),body.hhpp,body.hh-shared-nav) nav header div.absolute.inset-0{transition:background-color .25s ease,backdrop-filter .25s ease,box-shadow .25s ease}
/* top of the page: a light frosted-glass capsule (slight blur, translucent white, hairline highlight, soft shadow); scrolling turns it into the pill */
html[data-hh-top] :is(body:has(section[data-track-section="hero"]),body.hhpp,body.hh-shared-nav) nav header div.absolute.inset-0{background-color:rgba(226,235,247,.34) !important;-webkit-backdrop-filter:blur(10px) saturate(150%) !important;backdrop-filter:blur(10px) saturate(150%) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),inset 0 1px 0 rgba(255,255,255,.9) !important}
html[data-hh-top] :is(body:has(section[data-track-section="hero"]),body.hhpp,body.hh-shared-nav) nav header div.pointer-events-none.absolute.inset-y-0{box-shadow:0 8px 26px rgba(31,95,175,.08),0 1px 3px rgba(31,95,175,.06)}
:is(body:has(section[data-track-section="hero"]),body.hhpp,body.hh-shared-nav) nav header a[aria-label="Hi & Hello home"] img{height:50px !important;width:auto !important}
:is(body:has(section[data-track-section="hero"]),body.hhpp,body.hh-shared-nav) .hh-nav a.button{font-size:16px;color:#101626;padding-inline:9px;letter-spacing:-.035em}
:is(body:has(section[data-track-section="hero"]),body.hhpp,body.hh-shared-nav) nav a[data-track-item="log_in_cta"]{background:#ffffff55;border:1px solid #6d88ae;color:#101626;box-shadow:none}
:is(body:has(section[data-track-section="hero"]),body.hhpp,body.hh-shared-nav) nav a[data-hh-signup],
:is(body:has(section[data-track-section="hero"]),body.hhpp,body.hh-shared-nav) nav a[data-track-item="get_started_cta"]{background:linear-gradient(105deg,#0074ff,#005ecb 30%,#0db900);border-color:transparent;color:#fff;box-shadow:0 4px 10px #1373d118}

/* phones and small tablets: smaller logo, snugger to the top, and the Sign up button beside the menu */
@media (max-width:900px){
  :is(body:has(section[data-track-section="hero"]),body.hhpp,body.hh-shared-nav) nav[data-track-section="navbar"]{width:calc(100% - 16px);padding-block:3px}
  :is(body:has(section[data-track-section="hero"]),body.hhpp,body.hh-shared-nav) nav header a[aria-label="Hi & Hello home"] img{height:33px !important}
  :is(body:has(section[data-track-section="hero"]),body.hhpp,body.hh-shared-nav) nav a[data-hh-signup]{display:inline-flex;height:32px;margin-right:6px;padding:0 16px;font-size:14px;font-weight:600;letter-spacing:-.02em}
}

/* pricing page only: the bar is sticky and takes no room, so the page art runs behind it (as the hero does on the home page) */
body.hhpp{--hh-nav-h:104px;margin:0;background:#fef6fd;font-family:automatGrotesk,"automatGrotesk Fallback",Arial,sans-serif;-webkit-font-smoothing:antialiased}
body.hhpp nav[data-track-section="navbar"]{margin-bottom:calc(-1 * var(--hh-nav-h))}
@media (max-width:900px){body.hhpp{--hh-nav-h:70px}}