/* Site-wide navigation (src/components/V2Nav.astro), loaded on every page by
 BaseLayout. Split out of v2.css when the v2 nav replaced the Webflow nav
 everywhere (2026-09-28). Scoped under .v2-nav; custom properties live on
 .v2-nav, not :root, so they cannot leak into webflow.css. */

.v2-nav {
  /* warm neutral ground — the live site's paper */
  --ink: #1a1a1a;
  --body: #45494d;
  --muted: #666666;
  --faint: #8d8d8d;
  --paper: #ffffff;
  --warm: #f1f0ee;
  --warm-soft: #f8f7f6;
  --line: #eae6df;
  --line-soft: #eee9e2;
  --line-card: #e2ded7;

  /* brand purple — Salespeak, the context core */
  --purple-deep: #410e93;
  --purple: #7448ff;
  --purple-tint: #eee5ff;
  --purple-line: #ddcbfa;
  --connector: #bcafdb;

  /* agents and systems */
  --blue: #0f40fe;
  --blue-tint: #d0d6ff;
  --blue-ink: #12297d;

  /* state */
  --green: #12805a;
  --green-bright: #19b27b;
  --green-tint: #e2f3ea;
  --amber: #b45309;
  --amber-tint: #fdf2e0;
  --red: #c0392b;
  --red-tint: #fbe8e4;

  --r: 1rem;
  --r-lg: 1.5rem;
  --r-sm: 0.7rem;
  --sh-card: 0 20px 44px -24px rgba(65, 14, 147, 0.22);
  --sh-lift: 0 28px 64px -28px rgba(65, 14, 147, 0.34);
  --grad: linear-gradient(135deg, #ff4500 3%, #ff9c24 27%, #ff856a 50%, #7f38ff 66%, #0e40fe 93%);
  /* The live site renders "Inter 18 Pt" — webflow.css self-hosts every weight and
     its body rule overrides the older Montserrat one. Same stack here, so no
     extra font request and the headings match character for character. */
  --sans: "Inter 18 Pt", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.v2-nav { font-family: var(--sans); position: sticky; top: 0; z-index: 100; padding: 0.75rem 1.25rem 0; }
.v2-nav .bar {
  width: 100%; max-width: 84.75rem; margin: 0 auto;
  display: flex; align-items: center; gap: 1.5rem;
  background: #000; border: 1px solid #191a1b; border-radius: 1.5rem;
  padding: 0.75rem 1.25rem; color: #dee5ed;
}
.v2-nav .logo img { height: 1.6rem; width: auto; }
.v2-nav .menu { display: flex; align-items: center; gap: 0.25rem; margin-left: 1.5rem; }
.v2-nav .item { position: relative; }
.v2-nav .top {
  display: inline-flex; align-items: center; gap: 0.3rem;
  color: #dee5ed; font-size: 0.875rem; font-weight: 500;
  padding: 0.4rem 0.7rem; border-radius: 0.5rem; cursor: pointer;
  transition: color 0.15s ease;
}
.v2-nav .top:hover { color: #fff; }
.v2-nav .top svg { width: 1rem; height: 1rem; opacity: 0.8; transition: transform 0.2s ease; }
.v2-nav .panel {
  position: absolute; top: calc(100% + 0.75rem); left: 0; width: 19rem;
  background: #000; border-radius: 0.75rem; padding: 1.125rem;
  box-shadow: 0 -3px 10px #ffffff1a, 0 24px 48px rgba(0, 0, 0, 0.45);
  display: flex; flex-direction: column; gap: 0.5rem;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.v2-nav .item:hover .panel,
.v2-nav .dd-toggle:focus ~ .panel,
.v2-nav .item:focus-within .panel { opacity: 1; visibility: visible; transform: translateY(0); }
.v2-nav .dd-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; }
.v2-nav .dd-toggle:focus-visible ~ .top { outline: 2px solid #fff; outline-offset: 2px; }
.v2-nav .panel a {
  display: block; color: #dee5ed; border-radius: 0.5rem; padding: 0.5rem 0.75rem;
  font-size: 0.875rem; font-weight: 500; transition: background 0.15s ease, color 0.15s ease;
}
.v2-nav .panel a:hover { background: #8b9ee580; color: #fff; }
.v2-nav .panel a .sub { display: block; font-size: 0.75rem; line-height: 1.35; color: #8b93a5; font-weight: 500; margin-top: 2px; }
/* Capabilities nested under Agent Interaction Platform, not peers of it. The
   first pass nested them in markup but the indent was too subtle to read as
   subordinate, so the three products and their capabilities looked like five
   equal items — the thing the hierarchy exists to prevent. */
.v2-nav .panel > a { font-weight: 600; }
.v2-nav .panel .nested {
  margin: 0.15rem 0 0.5rem 1.5rem; padding-left: 0.85rem;
  border-left: 1.5px solid #4a5063;
}
.v2-nav .panel .nested-label {
  display: block; padding: 0.3rem 0.75rem 0.2rem;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: #767d92;
}
.v2-nav .panel .nested a { font-size: 0.8rem; font-weight: 500; color: #a8afc0; padding: 0.3rem 0.75rem; }
.v2-nav .right { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }
.v2-nav .login { color: #dee5ed; font-size: 0.875rem; font-weight: 600; }
.v2-nav .login:hover { color: #fff; }
.v2-nav .nav-cta {
  background: #fff; color: #000; border-radius: 999px;
  padding: 0.875rem 1.5rem; font-size: 0.875rem; font-weight: 600; line-height: 1;
  white-space: nowrap; transition: background 0.15s ease, color 0.15s ease;
}
.v2-nav .nav-cta:hover { background: var(--purple-tint); color: var(--purple-deep); }
.v2-nav .burger { display: none; }
.v2-nav .menu .mobile-login { display: none; }
.v2-nav #v2-menu-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

@media (max-width: 991px) {
  /* nav: one row (logo + burger), CTA under it, checkbox-driven menu */
  .v2-nav .bar { flex-wrap: wrap; gap: 0.75rem; border-radius: 1.25rem; }
  .v2-nav .logo img { height: 1.4rem; }
  .v2-nav .burger {
    display: flex; flex-direction: column; justify-content: space-between;
    width: 1.35rem; height: 1rem; margin-left: auto; order: 1; cursor: pointer; flex: none;
  }
  .v2-nav .burger span { display: block; height: 1.5px; background: #fff; border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
  .v2-nav #v2-menu-toggle:checked ~ .bar .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .v2-nav #v2-menu-toggle:checked ~ .bar .burger span:nth-child(2) { opacity: 0; }
  .v2-nav #v2-menu-toggle:checked ~ .bar .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .v2-nav .right { order: 2; margin-left: auto; }
  .v2-nav .right .login { display: none; }
  .v2-nav .nav-cta { font-size: 0.8rem; padding: 0.7rem 1.1rem; }
  .v2-nav .menu { display: none; order: 3; width: 100%; flex-direction: column; align-items: stretch; margin: 0.25rem 0 0; gap: 0.1rem; }
  .v2-nav #v2-menu-toggle:checked ~ .bar .menu { display: flex; }
  .v2-nav .menu .mobile-login { display: flex; }
  .v2-nav .item { width: 100%; }
  .v2-nav .top { width: 100%; justify-content: space-between; padding: 0.6rem 0.5rem; }
  .v2-nav .panel {
    position: static; width: auto; opacity: 1; visibility: visible; transform: none;
    display: none; background: rgba(255, 255, 255, 0.05); box-shadow: none; padding: 0.4rem 0 0.6rem;
  }
  .v2-nav .dd-toggle:checked ~ .panel { display: flex; }
  .v2-nav .dd-toggle:checked ~ .top svg { transform: rotate(180deg); }
}
@media (max-width: 640px) {
  .v2-nav .right { width: 100%; margin-left: 0; }
  .v2-nav .nav-cta { display: block; width: 100%; text-align: center; }
}

/* Webflow's .page-wrapperold (blog, AEO news, agentic-web, alternatives) sets
   overflow:hidden, which makes it a scroll container and stops the sticky nav
   from sticking. overflow:clip clips the same way without that side effect.
   Browsers without clip support keep hidden: the nav then scrolls away. */
.page-wrapperold { overflow: clip; }