/* Shared Redline Buddy site navigation */
.site-nav {
  position: sticky; top: 0; z-index: 30;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(237, 241, 247, .91);
  -webkit-backdrop-filter: saturate(1.3) blur(8px); backdrop-filter: saturate(1.3) blur(8px);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.site-nav.scrolled { border-bottom-color: #dde2ea; }
.site-nav .nav-in {
  width: 100%; max-width: 1040px; margin: 0 auto; padding: 4px 28px 0; height: 82px;
  display: flex; align-items: center; gap: 26px;
}
.site-nav .brand { display: block; flex: none; }
.site-nav .brand img { height: 54px; width: auto; display: block; }
.site-nav .nav-links { display: flex; gap: 26px; margin-left: auto; font-size: 14.5px; font-weight: 500; }
.site-nav .nav-links a { color: #464a53; text-decoration: none; }
.site-nav .nav-links a:hover { color: #1b1d22; }
.site-nav .nav-ctas { display: flex; gap: 9px; flex: none; }

.nbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 15px; border-radius: 9px; font: 600 14px -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none; white-space: nowrap; border: 1.5px solid transparent; color: #1b1d22; cursor: pointer;
}
.nbtn.soft { background: rgba(221,227,247,.62); border-color: #aebff2; }
.nbtn.soft:hover { background: #d8e0f8; }
.nbtn.grad { color: #fff; border: 0; padding: 10.5px 16.5px; background: linear-gradient(90deg, #d23f4d 0%, #8a3aa3 28%, #6612c5 50%, #4f3fd6 75%, #3f57d8 100%); overflow: hidden; }
.nbtn.grad:hover { filter: brightness(1.06); }

/* On the Free Text Compare page, align the nav precisely with the tool shell. */
body.compare-page .site-nav .nav-in { width:100%; max-width:1040px; padding-left:28px; padding-right:28px; }

.nav-toggle {
  display: none; margin-left: auto; width: 42px; height: 38px; border-radius: 9px; cursor: pointer;
  border: 1.5px solid #dde2ea; background: #f7f8fa; padding: 0; align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: #1b1d22; position: relative; transition: transform .2s;
}
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }
.site-nav.open .nav-toggle span { background: transparent; }
.site-nav.open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
.site-nav.open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

.nav-panel { display: none; }
.site-nav a:focus-visible, .site-nav button:focus-visible { outline: 2px solid #6612c5; outline-offset: 2px; }

@media (max-width: 860px) {
  .site-nav .nav-in, body.compare-page .site-nav .nav-in { height: 70px; padding: 3px 18px 0; }
  .site-nav .brand img { height: 40px; }
  .site-nav .nav-links, .site-nav .nav-ctas { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-nav.open .nav-panel {
    display: flex; flex-direction: column; gap: 4px;
    padding: 6px 18px 18px; border-bottom: 1px solid #dde2ea;
  }
  .nav-panel a.plink { padding: 11px 2px; font-size: 16px; font-weight: 600; color: #1b1d22; text-decoration: none; border-bottom: 1px solid #e3e7ee; }
  .nav-panel .pctas { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
  .nav-panel .nbtn { padding: 12px 16px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { transition: none; } }

/* Clean gradient fills: keep the gradient fully inside rounded button geometry. */
.nbtn.grad { position:relative; isolation:isolate; background:none !important; overflow:hidden; }
.nbtn.grad::before { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg,#d23f4d 0%,#8a3aa3 28%,#6612c5 50%,#4f3fd6 75%,#3f57d8 100%); z-index:-1; }