/* The site footer, shared by every marketing page.
   Same reasoning as header.css: one file, so the thing at the bottom of every
   page cannot drift page by page. Self-contained — its own tokens, its own
   font, every rule scoped under .lp-footer. */

.lp-footer {
  --blue-600: #1273e6;
  --blue-400: #4a9dfb;
  --navy-900: #07182c;
  --dk-200: #d3e0ee;
  --dk-300: #b9cde1;
  --dk-400: #98b2cc;
  --dk-500: #7fa3c9;
  --dk-divider: rgba(255, 255, 255, .10);

  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--navy-900); color: #fff;
}

.lp-footer, .lp-footer *, .lp-footer *::before, .lp-footer *::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-footer) a { color: inherit; text-decoration: none; }
.lp-footer h2, .lp-footer p { margin: 0; }
.lp-footer a:focus-visible {
  outline: 2px solid var(--blue-400); outline-offset: 3px; border-radius: 4px;
}

/* White "Secure", blue "Road" — the dark-surface half of the rule. */
.lp-footer .wm-a { color: #fff; }
.lp-footer .wm-b { color: var(--blue-400); }

.lp-footer-cta { border-bottom: 1px solid var(--dk-divider); }
.lp-footer-cta-in {
  max-width: 1240px; margin: 0 auto; padding: 44px clamp(20px, 4vw, 56px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px;
}
.lp-footer-cta h2 { font-size: 26px; font-weight: 800; letter-spacing: -.9px; line-height: 1.15; }
.lp-footer-cta p { margin-top: 8px; font-size: 14.5px; color: var(--dk-300); }
.lp-footer-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.lp-btn-dark {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--blue-600); color: #fff; padding: 14px 24px; border-radius: 8px;
  font-size: 14.5px; font-weight: 700; white-space: nowrap; transition: background .15s ease;
}
.lp-btn-dark:hover { background: #3b90f2; }
.lp-btn-ghost {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1.5px solid rgba(255, 255, 255, .35); color: #fff;
  padding: 14px 22px; border-radius: 8px; font-size: 14.5px; font-weight: 700;
  white-space: nowrap; transition: border-color .15s ease;
}
.lp-btn-ghost:hover { border-color: #fff; }

.lp-footer-grid {
  max-width: 1240px; margin: 0 auto; padding: 48px clamp(20px, 4vw, 56px);
  display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 1fr)); gap: 40px;
}
.lp-footer-brand { display: flex; flex-direction: column; gap: 16px; }
.lp-footer-lockup { display: flex; align-items: center; gap: 11px; }
.lp-footer-logo { display: block; height: 34px; width: auto; margin-bottom: 5px; }
.lp-footer-wm { font-size: 23px; font-weight: 800; letter-spacing: -.5px; line-height: 1; }
.lp-footer-tagline { font-size: 7.5px; font-weight: 600; letter-spacing: 1.2px; color: var(--blue-400); margin-top: 3px; }
.lp-footer-blurb { max-width: 290px; font-size: 13.5px; line-height: 1.6; color: var(--dk-400); }
.lp-socials { display: flex; gap: 10px; }
.lp-social {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  background: rgba(255, 255, 255, .08); color: var(--dk-200);
  transition: background .15s ease, color .15s ease;
}
.lp-social:hover { background: var(--blue-600); color: #fff; }
.lp-fcol { display: flex; flex-direction: column; gap: 12px; }
.lp-fcol-label { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; color: var(--dk-500); }
.lp-fcol a { font-size: 13.5px; font-weight: 500; color: var(--dk-200); transition: color .15s ease; }
.lp-fcol a:hover { color: #fff; }

.lp-legal { border-top: 1px solid var(--dk-divider); }
.lp-legal-in {
  max-width: 1240px; margin: 0 auto; padding: 20px clamp(20px, 4vw, 56px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 12.5px; color: var(--dk-500);
}
.lp-legal-links { display: flex; flex-wrap: wrap; gap: 24px; }
.lp-legal-links a { color: var(--dk-500); transition: color .15s ease; }
.lp-legal-links a:hover { color: #fff; }
.lp-legal-sign { font-size: 10px; font-weight: 700; letter-spacing: 1px; color: var(--blue-400); }

@media (max-width: 1100px) {
  .lp-footer-grid { grid-template-columns: minmax(0, 1fr) repeat(2, minmax(0, 1fr)); gap: 32px; }
}
@media (max-width: 760px) {
  .lp-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Motion ───────────────────────────────────────────────────
   Hover and press feedback only. The footer is the last thing on the page and
   the least deserving of anything that moves by itself. */

.lp-btn-dark { position: relative; overflow: hidden; transition: background .15s ease, transform .15s ease; }
.lp-btn-dark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 22%, rgba(255, 255, 255, .28) 50%, transparent 78%);
  transform: translateX(-130%);
}
.lp-btn-dark:hover { transform: translateY(-1px); }
.lp-btn-dark:hover::after { transform: translateX(130%); transition: transform .62s ease; }
.lp-btn-dark:active { transform: translateY(0) scale(.985); }

/* The ghost button fills rather than merely brightening its border, so the two
   footer buttons resolve to the same weight under the pointer. */
.lp-btn-ghost { position: relative; z-index: 0; overflow: hidden; transition: border-color .15s ease, transform .15s ease; }
.lp-btn-ghost::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(255, 255, 255, .12);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .26s cubic-bezier(.22, .8, .24, 1);
}
.lp-btn-ghost:hover::before { transform: scaleX(1); }
.lp-btn-ghost:hover { transform: translateY(-1px); }
.lp-btn-ghost:active { transform: translateY(0) scale(.985); }

.lp-btn-dark > span, .lp-btn-ghost > span {
  display: inline-block; transition: transform .18s cubic-bezier(.22, .8, .24, 1);
}
.lp-btn-dark:hover > span, .lp-btn-ghost:hover > span { transform: translateX(3px); }

.lp-social { transition: background .15s ease, color .15s ease, transform .18s cubic-bezier(.22, .8, .24, 1); }
.lp-social:hover { transform: translateY(-2px); }
.lp-social:active { transform: translateY(0) scale(.94); }

/* A rule that draws itself under the link, from the side the eye is on. */
.lp-fcol a, .lp-legal-links a { position: relative; }
.lp-fcol a::after, .lp-legal-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right center;
  transition: transform .2s cubic-bezier(.22, .8, .24, 1);
}
.lp-fcol a:hover::after, .lp-legal-links a:hover::after {
  transform: scaleX(1); transform-origin: left center;
}

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