/* Investace global header (gnav) + optional product sub-bar (snav).
   Self-contained: depends only on tokens from ic-theme.css. Same on every page. */
.gnav { position: fixed; inset: 0 0 auto 0; z-index: 60; height: 72px; padding: 0 clamp(20px, 4vw, 56px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font-family: "Geist", system-ui, sans-serif; transition: height .4s cubic-bezier(.2,.9,.25,1), background .35s, box-shadow .35s; }
.gnav.is-solid { height: 62px; background: color-mix(in srgb, var(--bg) 74%, transparent); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); box-shadow: 0 1px 0 var(--line); }
.gnav .ic-logo { justify-self: start; }
.gnav__links { display: flex; gap: 28px; }
.gnav__links a { font-size: 15px; color: var(--mute); text-decoration: none; transition: color .2s; position: relative; }
.gnav__links a:hover, .gnav__links a[aria-current="page"] { color: var(--text); }
.gnav__links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 1px; background: var(--text); }
.gnav__end { justify-self: end; display: flex; align-items: center; gap: 10px; }
.gnav__login { font-size: 15px; color: var(--mute); text-decoration: none; padding: 0 8px; white-space: nowrap; }
.gnav__login:hover { color: var(--text); }
.gnav__cta { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 2px; background: var(--btn-bg); color: var(--btn-fg); font-size: 14.5px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: transform .3s cubic-bezier(.2,.9,.25,1); }
.gnav__cta:active { transform: scale(.97); }
.gnav__menu { display: none; width: 44px; height: 44px; position: relative; background: none; border: 0; cursor: pointer; }
.gnav__menu i { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--text); transition: transform .45s cubic-bezier(.2,.9,.25,1), top .45s cubic-bezier(.2,.9,.25,1); }
.gnav__menu i:first-child { top: 16px; } .gnav__menu i:last-child { top: 25px; }
.gnav__menu[aria-expanded="true"] i:first-child { top: 20.5px; transform: rotate(45deg); }
.gnav__menu[aria-expanded="true"] i:last-child { top: 20.5px; transform: rotate(-45deg); }
.gnav :focus-visible { outline: 1.5px solid var(--text); outline-offset: 3px; border-radius: 4px; }
.gsheet { position: fixed; inset: 62px 0 0 0; z-index: 59; padding: 18px clamp(20px, 4vw, 56px) 32px; display: flex; flex-direction: column; justify-content: space-between; background: var(--bg); font-family: "Geist", system-ui, sans-serif; }
.gsheet[hidden] { display: none; }
.gsheet nav { display: grid; }
.gsheet nav a { display: grid; gap: 2px; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: 22px; letter-spacing: -.03em; }
.gsheet nav small { font-size: 13px; letter-spacing: 0; color: var(--mute); }
.gsheet .gnav__cta { justify-content: center; height: 50px; font-size: 16px; }
@media (max-width: 1100px) { .gnav__links, .gnav__login { display: none; } .gnav__menu { display: block; } .gnav { grid-template-columns: 1fr auto; } }

/* product sub-bar: sits under the global header, sticks, tracks the section in view */
.snav { position: sticky; top: 62px; z-index: 55; height: 52px; margin-top: 72px; display: flex; align-items: center; gap: 22px; padding: 0 clamp(20px, 4vw, 56px); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border-bottom: 1px solid var(--line); font-family: "Geist", system-ui, sans-serif; }
.snav__name { font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--text); text-decoration: none; white-space: nowrap; }
.snav__links { display: flex; gap: 20px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.snav__links a { font-size: 13.5px; color: var(--mute); text-decoration: none; white-space: nowrap; transition: color .2s; }
.snav__links a:hover, .snav__links a.on { color: var(--text); }
.snav__cta { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
@media (max-width: 720px) { .snav { gap: 14px; } .snav__links { margin-left: 0; flex: 1; } .snav__name { font-size: 15px; } .snav__cta { display: none; } }
@media (max-width: 720px) { .gnav__end > .gnav__cta { display: none; } }
@media (min-width: 1101px) and (max-width: 1360px) { .gnav__links { gap: 20px; } .gnav__links a, .gnav__login { font-size: 14px; } .gnav__end { gap: 6px; } .gnav__cta { padding: 0 14px; font-size: 14px; } }

/* One bar at a time (site-wide): scrolling down slides the global header away and leaves
   only the product sub-bar (or nothing on pages without one); a small scroll up brings it back. */
.gnav { transition: height .4s cubic-bezier(.2,.9,.25,1), background .35s, box-shadow .35s, transform .55s cubic-bezier(.2,.9,.25,1); }
.snav { transition: transform .55s cubic-bezier(.2,.9,.25,1), background .35s; }
html.hdr-up .gnav { transform: translateY(-100%); box-shadow: none; }
html.hdr-up .snav { transform: translateY(-62px); background: color-mix(in srgb, var(--bg) 92%, transparent); }
@media (prefers-reduced-motion: reduce) { .gnav, .snav { transition: none; } }

/* Sub-bar appears only once you scroll: at the top the company header stands alone. */
.snav { opacity: 0; visibility: hidden; transform: translateY(-14px); transition: transform .55s cubic-bezier(.2,.9,.25,1), opacity .35s, visibility 0s .55s, background .35s; }
html.hdr-up .snav { opacity: 1; visibility: visible; transform: translateY(-62px); transition: transform .55s cubic-bezier(.2,.9,.25,1), opacity .35s, visibility 0s, background .35s; }
@media (prefers-reduced-motion: reduce) { .snav, html.hdr-up .snav { transition: none; } }

/* The sub-bar no longer reserves space: it is an overlay that slides in at the top once the
   company header has slid away. Pages offset their content by the global header only (72px). */
.snav { position: fixed; top: 0; left: 0; right: 0; margin-top: 0; }
html.hdr-up .snav { transform: translateY(0); }
html { scroll-padding-top: 64px; }

/* menu sheet scrolls on short/landscape screens */
.gsheet { overflow-y: auto; overscroll-behavior: contain; }
@media (max-height: 520px) { .gsheet { gap: 18px; } }
