/* ============================================================================
 brand-nav.css - the Brand 2.0 navigation, on its own.
 ----------------------------------------------------------------------------
 Lifted verbatim from brand.css so the 2.0 nav can ship on pages that still
 run the 1.0 stylesheets, which is every page outside the 2.0 set.

 WHY NOT JUST LOAD brand.css

 brand.css carries 30 rules outside any @layer: an @font-face and a block of
 .demo-modal-card overrides that are deliberately unlayered so they beat
 demo-modal.css. Those would win on any page that loaded it, which would
 restyle the demo modal across the whole site - the one surface the funnel
 work is currently measuring. Everything else in brand.css is layered and
 would lose to the 1.0 stylesheets anyway, so the nav is the only part worth
 carrying.

 Layered under brand.nav for the same reason the rest of brand.css is
 layered: unlayered 1.0 CSS wins any conflict, so this can only add.

 Keep in step with the .bn rules in brand.css. Pages on the 2.0 stylesheet
 load brand.css and do not need this file.
 ========================================================================= */

@font-face {
font-family: Geist;
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Variable.woff2") format("woff2");
}


.bn {
  --ctl-h: 52px;
  --ctl-pad-x: 22px;
  --dur: .28s;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --field: #ffffff;
  --ink: #00091A;
  --ink2: #1E293B;
  --line: rgba(0, 9, 26, .12);
  --line-soft: rgba(0, 9, 26, .08);
  --pad: clamp(28px, 5vw, 72px);
  --paper: #F4F6FA;
  --radius: 2px;
  --signal: #3263E9;
  --signal-wash: rgba(50, 99, 233, .04);
  font-family: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 28px;
  padding: 16px var(--pad);
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
}
.bn.scrolled { background: rgba(244, 246, 250, .92); backdrop-filter: saturate(1.6) blur(10px); }

.bn-logo { display: flex; align-items: center; flex: none; color: var(--ink); }
.bn-lockup { width: 118px; height: 32px; display: block; }

.bn-links { display: flex; align-items: center; gap: 18px; margin-left: auto; }

/* Top-level items */
.bn-link, .bn-trigger, .bn-login {
  font: inherit; font-size: 15px; font-weight: 550;
  color: var(--ink); text-decoration: none;
  background: none; border: 0; padding: 0; cursor: pointer;
  white-space: nowrap;
}
.bn-link:hover, .bn-trigger:hover, .bn-login:hover { color: var(--signal); }
/* Log in is a destination, not a nav item. Outlined button so it reads as
   a way in without competing with the primary CTA next to it. */
.bn-login {
  display: inline-flex; align-items: center;
  height: 38px; padding: 0 16px;
  font-size: 14px; font-weight: 650;
  color: var(--ink); background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.bn-login:hover { color: var(--signal); border-color: var(--signal); background: var(--signal-wash); }

.bn-item { position: relative; }
.bn-trigger::after {
  content: ''; display: inline-block; margin-left: 7px;
  width: 6px; height: 6px; vertical-align: 2px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur) var(--ease);
}
.bn-item.open .bn-trigger { color: var(--signal); }
.bn-item.open .bn-trigger::after { transform: rotate(-135deg) translateY(-2px); }

/* The 24-hour pill is the one rounded thing, so it reads as a promo. */
.bn-pill {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
  font-size: 13px; font-weight: 650; white-space: nowrap;
  color: var(--signal); text-decoration: none;
  border: 1px solid var(--signal); border-radius: 99px;
  background: var(--signal-wash);
}
.bn-pill:hover { background: var(--signal); color: #fff; }

.bn-cta {
  display: inline-flex; align-items: center;
  height: var(--ctl-h); padding: 0 var(--ctl-pad-x);
  background: var(--ink); color: #fff;
  font-size: 15px; font-weight: 560;
  text-decoration: none; border-radius: var(--radius);
  white-space: nowrap;
}
.bn-cta:hover { transform: translateY(-1px); filter: brightness(1.06); }

/* Dropdown panels */
.bn-drop {
  position: absolute; top: calc(100% + 16px); left: 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.bn-item.open .bn-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.bn-sol  { width: min(760px, 88vw); }

.bn-sol-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.bn-sol-heading {
  margin: 0 0 10px; font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--signal);
}
.bn-sol-col a { display: block; padding: 8px 10px; margin: 0 -10px; border-radius: var(--radius); text-decoration: none; }
.bn-sol-col a:hover { background: var(--paper); }
.bn-sol-col strong { display: block; font-size: 14.5px; font-weight: 650; color: var(--ink); }
.bn-sol-col span { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 450; line-height: 1.4; color: var(--ink2); }

/* Hamburger — three rules that become an X */
.bn-burger {
  display: none; flex: none; margin-left: auto;
  width: 44px; height: 44px; padding: 10px;
  background: none; border: 0; cursor: pointer;
}
.bn-burger span {
  display: block; height: 2px; background: var(--ink);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.bn-burger span + span { margin-top: 5px; }
.bn-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bn-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bn-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  /* Nav collapses into the hamburger sheet. */
    .bn-burger { display: block; }
  .bn-links {
      display: none;
      position: absolute; top: 100%; left: 0; right: 0;
      flex-direction: column; align-items: stretch; gap: 2px;
      margin: 0; padding: 14px var(--pad) 22px;
      background: var(--paper);
      border-bottom: 1px solid var(--line);
      max-height: calc(100vh - 72px); overflow-y: auto;
    }
  .bn-links.open { display: flex; }
  .bn-link, .bn-trigger, .bn-login { padding: 13px 0; font-size: 17px; text-align: left; width: 100%; }
  .bn-item { position: static; }
    /* A closed dropdown is visibility:hidden, which still occupies layout.
       On desktop it is absolutely positioned so that costs nothing; on
       mobile it is static, so the closed Solutions panel was reserving
       ~890px and pushing Customers, Blog, Pricing, Log in and Book a demo
       below the end of the menu. display:none is what actually collapses it. */
    .bn-drop { display: none; }
    .bn-item.open .bn-drop { display: block; }
  .bn-drop {
      position: static; width: auto; padding: 0 0 8px 12px;
      border: 0; border-left: 2px solid var(--line);
      margin: 0 0 8px;
      transform: none; transition: none;
    }
  .bn-sol-grid { grid-template-columns: 1fr; gap: 14px; }
  .bn-pill, .bn-cta { align-self: flex-start; margin-top: 8px; }
}

/* ---------------------------------------------------------------------------
   Footer.

   Three of them existed before this: a two-link stub on the 2.0 pages whose
   only outbound link was an absolute www.tribble.ai that 301s straight back,
   a nineteen-link one injected by lp-inject.js, and an eleven-link hardcoded
   .draft-footer on the legal pages. The link set below is lp-inject's, which
   was the only one that actually tried to be a footer.

   Same unlayered reasoning as the nav: every selector is .bf*, which nothing
   else uses, and the tokens are scoped to .bf so they cannot leak.
   ------------------------------------------------------------------------- */

.bf {
  --ink: #00091A;
  --ink2: #1E293B;
  --paper: #F4F6FA;
  --line: rgba(0, 9, 26, .12);
  --signal: #3263E9;
  --pad: clamp(28px, 5vw, 72px);
  font-family: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: 56px var(--pad) 44px;
  color: var(--ink2);
}
.bf-wrap { max-width: 1180px; margin: 0 auto; }
.bf-top { display: flex; align-items: flex-start; gap: 28px; flex-wrap: wrap; margin-bottom: 32px; }
.bf-logo { flex: none; color: var(--ink); }
.bf-logo svg { width: 118px; height: 32px; display: block; }
.bf-line { margin: 0; font-size: 15px; font-weight: 500; max-width: 46ch; color: var(--ink2); }
.bf-links {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 28px; margin: 0 0 34px;
}
.bf-links a {
  font-size: 14px; font-weight: 500; color: var(--ink2);
  text-decoration: none; line-height: 1.5;
}
.bf-links a:hover { color: var(--signal); }
.bf-legal {
  margin: 0; padding-top: 22px; border-top: 1px solid var(--line);
  font-size: 13px; font-weight: 500; color: var(--ink2);
}
@media (max-width: 900px) {
  .bf-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .bf-links { grid-template-columns: 1fr; }
}