/*
 * The marketing header, the "Floating bar": a frosted capsule inset from the page edges, with a
 * highlight that glides between links and one panel that reshapes itself for each menu. The bar
 * takes no height, so the page runs underneath the glass from the very top.
 */
.nvo-cap { --nvo-glass: rgb(255 255 255 / 72%); --nvo-glass-line: rgb(25 27 34 / 9%); --nvo-spring: cubic-bezier(.32, 1.32, .5, 1);
    position: sticky; top: 12px; z-index: 50; height: 0; padding: 0 20px; pointer-events: none; transition: transform .3s var(--nvo-ease), opacity .3s var(--nvo-ease); }
.nvo-cap.nvo-hidden { transform: translateY(-100px); opacity: 0; }
/* The bar takes no height, so pages start below it. The homepage ($navOverlap) and pages that open on a dark section
   run under the glass instead, as the bar was designed to float over them. */
body > main { padding-top: 84px; }
body > main.is-under-nav,
body > main:has(> section:first-child:is(.bg-zinc-800, .bg-zinc-900, .bg-zinc-950, [class*="bg-[#"])) { padding-top: 0; }
.nvo-cap > * { pointer-events: auto; }

.nvo-cap-shell { position: relative; z-index: 2; isolation: isolate; display: flex; align-items: center; gap: 18px; max-width: 1180px; height: 60px; margin: 0 auto; padding: 0 10px 0 22px; border-radius: 999px;
    transition: max-width .45s var(--nvo-ease), height .35s var(--nvo-ease); }
/* The glass sits on a layer of its own: a backdrop filter on the shell would trap the fixed Connect sheet inside it. */
.nvo-cap-shell::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; border: 1px solid var(--nvo-glass-line); background: var(--nvo-glass); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 85%), 0 1px 2px rgb(28 31 42 / 5%), 0 12px 32px -18px rgb(28 31 42 / 28%); transition: box-shadow .3s, background-color .3s; }
.nvo-cap.is-scrolled .nvo-cap-shell { max-width: 1060px; height: 54px; }
.nvo-cap.is-scrolled .nvo-cap-shell::before { background: rgb(255 255 255 / 80%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 85%), 0 1px 2px rgb(28 31 42 / 6%), 0 18px 40px -18px rgb(28 31 42 / 34%); }
.nvo-cap .nvo-logo img { height: 24px; }

/* Links and the gliding highlight */
.nvo-cap-links { position: relative; display: flex; align-items: center; gap: 2px; margin-left: 8px; }
.nvo-cap-link { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 5px; height: 38px; padding: 0 14px; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: #3f4450; white-space: nowrap; transition: color .2s; }
.nvo-cap-link .nvo-chev { width: 13px; height: 13px; margin-right: -3px; color: #9aa0ab; transition: transform .3s var(--nvo-spring), color .2s; }
.nvo-cap-link:hover, .nvo-cap-link[aria-expanded="true"], .nvo-cap-link[aria-current="page"] { color: var(--nvo-ink); }
.nvo-cap-link[aria-expanded="true"] .nvo-chev { transform: rotate(180deg); color: var(--nvo-ink); }
.nvo-cap-link:focus-visible { outline-offset: -2px; border-radius: 999px; }
.nvo-cap-slide { position: absolute; top: 50%; left: 0; z-index: 0; width: var(--w, 0); height: 38px; border-radius: 999px; background: rgb(25 27 34 / 6.5%); box-shadow: inset 0 0 0 1px rgb(25 27 34 / 4%); opacity: 0; transform: translate(var(--x, 0), -50%); pointer-events: none;
    transition: transform .42s var(--nvo-spring), width .42s var(--nvo-spring), opacity .18s; }
.nvo-cap-slide.is-on { opacity: 1; }
.nvo-cap-slide.is-jump { transition: opacity .18s; }

/* Actions inside the capsule */
.nvo-cap .nvo-actions { gap: 4px; }
.nvo-cap .nvo-signin { height: 40px; padding: 0 14px; border-radius: 999px; font-size: 14.5px; }
.nvo-cap .nvo-signin:hover { background: rgb(25 27 34 / 6%); }
.nvo-cap .nvo-cta { height: 42px; padding: 0 20px; border-radius: 999px; font-size: 14.5px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%), 0 6px 14px -8px rgb(25 27 34 / 60%); }
.nvo-cap .nvo-af-button { height: 42px; margin-right: 4px; border-color: rgb(25 27 34 / 9%); background: rgb(255 255 255 / 70%); font-size: 14.5px; }
@media (min-width: 1024px) {
    .nvo-cap .nvo-af-panel { top: calc(100% + 12px); right: 0; border-radius: 24px; border-color: var(--nvo-glass-line); }
    .nvo-cap .nvo-af-rail { background: rgb(246 247 248 / 70%); }
}

/* The notification tab hangs from the capsule until the page moves. It sits over the bar's bottom edge in the bar's own
   glass, so it reads as part of the bar with no seam or shadow line between them. Its items share one cell and take turns. */
.nvo-cap-news { position: absolute; top: 59px; left: 50%; z-index: 2; display: grid; width: max-content; height: 31px; padding: 3px 14px 0; border: 1px solid var(--nvo-glass-line); border-top: 0; border-radius: 0 0 14px 14px; background: var(--nvo-glass); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: 0 10px 22px -16px rgb(28 31 42 / 30%); font-size: 12.5px; color: var(--nvo-muted); white-space: nowrap; transform: translateX(-50%); transition: transform .35s var(--nvo-ease), opacity .25s; }
.nvo-cap-news-item { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: inherit; color: inherit; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .3s, transform .4s var(--nvo-ease), visibility 0s .4s, color .15s; }
.nvo-cap-news-item.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .3s .1s, transform .4s .1s var(--nvo-ease), visibility 0s, color .15s; }
.nvo-cap-news strong { font-weight: 600; color: var(--nvo-ink); }
.nvo-cap-news .nvo-dot { width: 6px; height: 6px; }
.nvo-cap-news-arrow { width: 13px; height: 13px; transition: transform .2s var(--nvo-ease); }
.nvo-cap-news-item:hover { color: var(--nvo-ink); }
.nvo-cap-news-item:hover .nvo-cap-news-arrow { transform: translateX(2px); }
.nvo-cap.is-scrolled .nvo-cap-news, .nvo-cap.nvo-menu-open .nvo-cap-news, .nvo-cap.nvo-af-raised .nvo-cap-news { opacity: 0; transform: translate(-50%, -28px); pointer-events: none; }
/* Hidden under the bar means out of the tab order too, once the fade has finished. */
.nvo-cap.is-scrolled .nvo-cap-news-item.is-on, .nvo-cap.nvo-menu-open .nvo-cap-news-item.is-on, .nvo-cap.nvo-af-raised .nvo-cap-news-item.is-on { visibility: hidden; transition: opacity .3s, transform .4s var(--nvo-ease), visibility 0s .3s; }

/* One panel for every menu: it glides between the sizes of Tools, Custom and Company */
.nvo-cap-panel { position: absolute; top: 70px; left: 50%; z-index: 3; width: var(--nvo-panel-w, 600px); height: var(--nvo-panel-h, 300px); overflow: hidden; border-radius: 24px; border: 1px solid var(--nvo-glass-line); background: rgb(255 255 255 / 92%); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 90%), 0 2px 4px rgb(28 31 42 / 4%), 0 40px 90px -36px rgb(28 31 42 / 45%);
    opacity: 0; visibility: hidden; transform: translate(-50%, -8px) scale(.98); transform-origin: top center;
    transition: opacity .2s, transform .35s var(--nvo-ease), visibility 0s .35s, width .45s var(--nvo-spring), height .45s var(--nvo-spring); }
.nvo-cap.is-scrolled .nvo-cap-panel { top: 64px; }
.nvo-cap-panel.is-open { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .2s, transform .35s var(--nvo-ease), visibility 0s, width .45s var(--nvo-spring), height .45s var(--nvo-spring); }
.nvo-cap-panel.is-jump { transition: opacity .2s, transform .35s var(--nvo-ease), visibility 0s; }
.nvo-cap-section { position: absolute; top: 0; left: 50%; visibility: hidden; opacity: 0; transform: translateX(-50%); transition: opacity .16s, visibility 0s .16s; }
.nvo-cap-section.is-on { visibility: visible; opacity: 1; transition: opacity .28s .06s, visibility 0s; }
.nvo-cap-tools { width: min(980px, calc(100vw - 40px)); }
.nvo-cap-custom { width: min(900px, calc(100vw - 40px)); }
.nvo-cap-pricing { width: min(780px, calc(100vw - 40px)); }
.nvo-cap-company { width: min(800px, calc(100vw - 40px)); }
.nvo-cap { --nvo-foot: rgb(246 247 248 / 70%); --nvo-hover: rgb(25 27 34 / 4.5%); --nvo-soft: rgb(25 27 34 / 6.5%); }
.nvo-cap .nvo-tp-side { border-right-color: rgb(25 27 34 / 7%); }
.nvo-cap .nvo-tp-job { border-radius: 999px; padding: 0 12px; }
.nvo-cap .nvo-tp-field input { border-radius: 999px; background: rgb(255 255 255 / 80%); }

/* Raqoon's walk stays inside the capsule */
.nvo-cap-shell .marketing-mascot { overflow: hidden; border-radius: inherit; }
.nvo-cap-shell .marketing-mascot video, .nvo-cap-shell .marketing-mascot-still { height: 58px; }

/* The phone menu drops from the capsule as a frosted card */
.nvo-cap-sheet { inset: 8px; border-radius: 26px; border: 1px solid var(--nvo-glass-line, rgb(25 27 34 / 9%)); background: rgb(255 255 255 / 92%); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); box-shadow: 0 30px 80px -30px rgb(28 31 42 / 50%); }
.nvo-cap-sheet .nvo-sheet-head { border-radius: 25px 25px 0 0; background: rgb(255 255 255 / 95%); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.nvo-cap-sheet .nvo-sheet-foot { border-radius: 0 0 25px 25px; background: rgb(255 255 255 / 82%); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.nvo-cap-sheet .nvo-cta, .nvo-cap-sheet .nvo-quiet { border-radius: 999px; }

@media (max-width: 1180px) {
    .nvo-cap-shell, .nvo-cap.is-scrolled .nvo-cap-shell { max-width: none; }
    .nvo-cap-link { padding: 0 11px; }
}
@media (max-width: 1100px) {
    .nvo-cap .nvo-af-label { display: none; }
    .nvo-cap .nvo-af-label-short { display: inline; }
}
@media (max-width: 1023px) {
    body > main { padding-top: 72px; }
    .nvo-cap { top: 8px; padding: 0 10px; }
    .nvo-cap-shell { height: 56px; padding: 0 8px 0 18px; gap: 10px; }
    .nvo-cap.is-scrolled .nvo-cap-shell { height: 52px; }
    .nvo-cap-links, .nvo-cap-panel { display: none; }
    .nvo-cap-news { top: 55px; }
    .nvo-cap .nvo-menu-btn { margin-right: 0; border-radius: 999px; }
    .nvo-cap .nvo-af-button { height: 40px; margin-right: 0; }
    .nvo-cap .nvo-cta { height: 40px; padding: 0 16px; }
}
@media (max-width: 519px) {
    .nvo-cap-news { max-width: calc(100vw - 48px); overflow: hidden; }
    .nvo-cap-news-item { justify-content: flex-start; min-width: 0; }
    .nvo-cap-news-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
@media (prefers-reduced-motion: reduce) {
    .nvo-cap-slide, .nvo-cap-panel, .nvo-cap-shell, .nvo-cap-news-item { transition: none !important; }
}