/*
 * 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: 92px; }
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: 1320px; height: 68px; margin: 0 auto; padding: 0 12px 0 26px; 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: 1240px; height: 60px; }
.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: 10px; }
.nvo-cap-link { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border-radius: 999px; font-size: 15.5px; font-weight: 500; color: #3f4450; white-space: nowrap; transition: color .2s; }
.nvo-cap-link .nvo-chev { width: 14px; height: 14px; 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: 44px; 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: 46px; padding: 0 16px; border-radius: 999px; font-size: 15.5px; }
.nvo-cap .nvo-signin:hover { background: rgb(25 27 34 / 6%); }
.nvo-cap .nvo-cta { height: 48px; padding: 0 24px; border-radius: 999px; font-size: 15.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: 48px; margin-right: 4px; border-color: rgb(25 27 34 / 9%); background: rgb(255 255 255 / 70%); font-size: 15.5px; }
/* The actions sit above Raqoon, whose clips tuck just under Connect's rounded end. */
.nvo-cap .nvo-af-button, .nvo-cap .nvo-signin, .nvo-cap .nvo-cta { position: relative; z-index: 1; }
@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%); }
}

/* One panel for every menu: it glides between the sizes of Tools, Custom and Company */
.nvo-cap-panel { position: absolute; top: 78px; 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: 70px; }
.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 stands the full height of the capsule, in the gap between the links and the actions */
.nvo-cap-shell .marketing-mascot video, .nvo-cap-shell .marketing-mascot-still { height: 100%; filter: url(#marketing-mascot-key); }
.nvo-cap-shell .marketing-mascot svg { position: absolute; }

/* 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; }

/* Below 1320px Connect shortens its label, so Raqoon keeps his gap between the links and the actions. */
@media (max-width: 1320px) {
    .nvo-cap .nvo-af-label { display: none; }
    .nvo-cap .nvo-af-label-short { display: inline; }
}
@media (max-width: 1240px) {
    .nvo-cap-shell, .nvo-cap.is-scrolled .nvo-cap-shell { max-width: none; }
}
@media (max-width: 1180px) {
    .nvo-cap-shell { gap: 12px; }
    .nvo-cap-link { padding: 0 11px; font-size: 15px; }
    .nvo-cap .nvo-signin { padding: 0 12px; font-size: 15px; }
    .nvo-cap .nvo-cta { padding: 0 18px; font-size: 15px; }
    .nvo-cap .nvo-af-button { font-size: 15px; }
}
@media (max-width: 1023px) {
    body > main { padding-top: 76px; }
    .nvo-cap { top: 8px; padding: 0 10px; }
    .nvo-cap-shell { height: 60px; padding: 0 8px 0 18px; gap: 10px; }
    .nvo-cap.is-scrolled .nvo-cap-shell { height: 56px; }
    .nvo-cap-links, .nvo-cap-panel { display: none; }
    .nvo-cap .nvo-menu-btn { margin-right: 0; border-radius: 999px; }
    .nvo-cap .nvo-af-button { height: 44px; margin-right: 0; }
    .nvo-cap .nvo-cta { height: 44px; padding: 0 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .nvo-cap-slide, .nvo-cap-panel, .nvo-cap-shell { transition: none !important; }
}