/* The site header, shared by every marketing page.
   Lives apart from both stylesheets on purpose: the landing page has its own
   design system and the other seventeen pages have theirs, and the header is
   the one thing that has to be identical across both. Editing it in one place
   is the whole point — the previous header was copied into every page and had
   drifted into five variants.

   Self-contained: its own tokens, its own font, and every rule scoped under
   .lp-header so it cannot reach into a page it is sitting on top of. */

.lp-header {
  --blue-600: #1273e6;
  --blue-700: #0b58b8;
  --ink-700: #31465c;
  --ink-900: #0d1b2a;
  --ink-500: #5b6f85;
  --tint-100: #eef4fb;
  --tint-200: #f1f6fc;
  --line-light-2: #e2eaf4;
  --line-blue: #bcd6f4;
  --shadow-btn-sm: 0 6px 18px rgba(18, 115, 230, .25);
  --shadow-drop: 0 22px 50px -14px rgba(13, 27, 42, .28), 0 6px 16px -8px rgba(13, 27, 42, .16);

  /* Stated rather than inherited: the other pages set Inter on the body, and a
     header that changes typeface between pages is the drift this file exists
     to end. */
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;

  position: relative; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px clamp(14px, 2vw, 32px);
  padding: 18px clamp(20px, 4vw, 56px);
  max-width: 1500px; margin: 0 auto;
}

.lp-header, .lp-header *, .lp-header *::before, .lp-header *::after { box-sizing: border-box; }
/* :where() so this reset carries no class weight. As a bare descendant
   selector it was (0,1,1) and outranked every one-class rule that states
   a color below it — which is how white-on-blue buttons rendered navy.
   A reset should lose to anything that states an intention. */
:where(.lp-header) a { color: inherit; text-decoration: none; }
.lp-header button { font-family: inherit; }
.lp-header a:focus-visible,
.lp-header button:focus-visible {
  outline: 2px solid var(--blue-600); outline-offset: 3px; border-radius: 4px;
}

/* Dark "Secure", blue "Road", everywhere the name appears. */
.lp-header .wm-a { color: var(--ink-900); }
.lp-header .wm-b { color: var(--blue-600); }

.lp-brand { display: flex; align-items: center; gap: 12px; }
.lp-brand-text { display: flex; flex-direction: column; gap: 2px; }
/* The lockup is one image now: the mark's gradient cannot be reproduced in CSS,
   so a text wordmark beside it would drift from the brand file. */
.lp-brand-logo { display: block; height: 40px; width: auto; }
.lp-wordmark { font-size: 27px; font-weight: 800; letter-spacing: -.6px; line-height: 1; }
.lp-tagline { font-size: 8.5px; font-weight: 600; letter-spacing: 1.3px; color: var(--blue-600); }

.lp-nav {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 2px; font-size: 14.5px; font-weight: 600; color: var(--ink-700);
  white-space: nowrap;
}
.lp-navitem { position: relative; }
.lp-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 clamp(7px, 1vw, 12px);
  border: none; border-radius: 8px; background: transparent;
  font-size: 14.5px; font-weight: 600; color: var(--ink-700); cursor: pointer;
  transition: background .15s ease;
}
.lp-trigger:hover, .lp-trigger[aria-expanded="true"] { background: var(--tint-100); }
.lp-trigger svg { transition: transform .18s ease; }
.lp-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.lp-navlink {
  display: inline-flex; align-items: center; height: 38px;
  padding: 0 clamp(7px, 1vw, 12px); border-radius: 8px;
  transition: background .15s ease;
}
.lp-navlink:hover { background: var(--tint-100); }
/* The page you are on, marked in the nav rather than left to guess. */
.lp-navlink[aria-current="page"],
.lp-trigger[aria-current="true"] { color: var(--blue-600); }

.lp-panel {
  position: absolute; top: calc(100% + 10px); left: 0;
  background: #fff; border: 1px solid var(--line-light-2); border-radius: 12px;
  padding: 6px; z-index: 40; box-shadow: var(--shadow-drop);
  display: flex; flex-direction: column; gap: 2px;
}
.lp-panel[hidden] { display: none; }
.lp-panel-product { width: 430px; }
.lp-panel-solutions { width: 400px; }
.lp-panel-usecases { width: 400px; left: 50%; transform: translateX(-50%); }
.lp-panel-resources { width: 380px; left: auto; right: 0; }

.lp-row {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 10px; border-radius: 8px; color: var(--ink-900);
  transition: background .15s ease;
}
.lp-row:hover { background: var(--tint-200); }
.lp-row > svg { margin-top: 3px; flex: none; }
.lp-row-body { flex: 1; min-width: 0; }
.lp-row-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.lp-row-desc {
  display: block; font-size: 12.5px; line-height: 1.45;
  color: var(--ink-500); margin-top: 3px; font-weight: 400;
}
.lp-badge { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.lp-badge-new { background: var(--blue-600); color: #fff; }
.lp-badge-beta { background: var(--tint-100); color: var(--blue-600); }
.lp-badge-pro { border: 1px solid #d3e2f4; color: var(--ink-700); padding: 2px 8px; }

.lp-header-actions { display: flex; align-items: center; gap: 16px; flex: none; }
/* Not in the comp. The product's only entrance is /login, and a marketing page
   that cannot reach it strands every existing customer. */
.lp-signin { font-size: 14.5px; font-weight: 600; color: var(--ink-700); }
.lp-signin:hover { color: var(--blue-600); }
.lp-header-cta {
  background: var(--blue-600); color: #fff;
  padding: 13px 24px; border-radius: 7px;
  font-size: 14.5px; font-weight: 700; white-space: nowrap;
  box-shadow: var(--shadow-btn-sm);
  transition: background .15s ease, transform .15s ease;
}
.lp-header-cta:hover { background: var(--blue-700); transform: translateY(-1px); }

.lp-menu-toggle { display: none; }

@media (max-width: 1100px) {
  .lp-menu-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    height: 38px; padding: 0 12px; border: 1.5px solid var(--line-blue);
    border-radius: 8px; background: #fff; color: var(--blue-600);
    font-size: 14px; font-weight: 700; cursor: pointer;
  }
  .lp-nav {
    order: 3; flex-basis: 100%; justify-content: flex-start;
    flex-direction: column; align-items: stretch; gap: 4px;
    padding-top: 8px;
  }
  .lp-nav[hidden] { display: none; }
  .lp-navitem { position: static; }
  .lp-trigger, .lp-navlink { width: 100%; justify-content: space-between; }
  .lp-panel,
  .lp-panel-usecases,
  .lp-panel-resources {
    position: static; width: 100%; transform: none;
    box-shadow: none; border-color: #e6ecf4; margin: 2px 0 6px;
  }
}


/* ── Motion ───────────────────────────────────────────────────
   Everything here is hover and press feedback on things that are already
   there. No entrances, no attention-seeking loops: the header is chrome, and
   chrome that moves on its own is chrome you notice instead of the page.
   All of it is inside the reduced-motion guard at the foot of this file. */

/* A light crossing the fill, once, on the way in. The transition lives on
   :hover only so the sweep does not run backwards when the pointer leaves —
   a sweep that rewinds reads as a glitch rather than a gleam. */
.lp-header-cta { position: relative; overflow: hidden; }
.lp-header-cta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 22%, rgba(255, 255, 255, .30) 50%, transparent 78%);
  transform: translateX(-130%);
}
.lp-header-cta:hover::after { transform: translateX(130%); transition: transform .62s ease; }
.lp-header-cta:active { transform: translateY(0) scale(.985); }

/* The arrow leans toward where it is taking you. */
.lp-arrow { display: inline-block; transition: transform .18s cubic-bezier(.22, .8, .24, 1); }
.lp-header-cta:hover .lp-arrow { transform: translateX(3px); }

/* Dropdown rows: the hover fill arrives from the left rather than flooding the
   whole row at once, so the eye is led along the row it is on. */
.lp-row { position: relative; z-index: 0; background: none; }
.lp-row::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 8px;
  background: var(--tint-200); transform: scaleX(.4); transform-origin: left center;
  opacity: 0; transition: transform .22s cubic-bezier(.22, .8, .24, 1), opacity .18s ease;
}
.lp-row:hover { background: none; }
.lp-row:hover::before { transform: scaleX(1); opacity: 1; }
.lp-row > svg { transition: transform .22s cubic-bezier(.22, .8, .24, 1); }
.lp-row:hover > svg { transform: translateX(2px); }

/* The panel is toggled with [hidden], so there is no state to transition
   between — an animation on the visible state is what actually plays. */
.lp-panel:not([hidden]) { animation: lp-panel-in .17s cubic-bezier(.22, .8, .24, 1); }
@keyframes lp-panel-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lp-panel-usecases:not([hidden]) { animation-name: lp-panel-in-centered; }
@keyframes lp-panel-in-centered {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.lp-signin { position: relative; }
.lp-signin::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: right center;
  transition: transform .2s cubic-bezier(.22, .8, .24, 1);
}
.lp-signin:hover::after { transform: scaleX(1); transform-origin: left center; }

.lp-menu-toggle:active { transform: scale(.96); }

@media (prefers-reduced-motion: reduce) {
  .lp-header, .lp-header *, .lp-header *::before, .lp-header *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}