/* ============================================================
   DeviLabs floating pill navigation  (component: dl-nav)
   Single source of truth — linked from every page.
   All classes prefixed `dl-nav`/`dl-mark`/`dl-burger`/`dl-panel`
   /`dl-scrim` to avoid collisions with per-page CSS.
   ============================================================ */

.dl-nav,
.dl-panel {
  /* Only fonts the site already loads. No new font request. */
  font-family: 'DM Sans', 'Inter', 'IBM Plex Sans', 'Instrument Sans',
               system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.dl-nav,
.dl-nav *,
.dl-panel,
.dl-panel * { box-sizing: border-box; }

.dl-nav{
  --dl-x: 22px;
  --dl-top: 20px;
  position: fixed;
  top: var(--dl-top);
  left: 50%;
  z-index: 900;
  transform: translateX(-50%);
  transition: transform .5s cubic-bezier(.16,1,.3,1), top .4s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}
.dl-nav-pill{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 7px 7px var(--dl-x);
  border-radius: 999px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 1px 2px rgba(20,21,26,.05), 0 8px 28px rgba(20,21,26,.09);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  transition: background .35s ease, box-shadow .35s ease, padding .4s cubic-bezier(.16,1,.3,1);
}

/* Wordmark is set as live text, not an image: crisp at every DPI, themeable,
   and the brand name stays machine-readable in the DOM rather than being
   locked inside an alt attribute. */
.dl-mark{
  display:flex;
  align-items:center;
  flex-shrink:0;
  margin-right:16px;
  font-size:17px;
  font-weight:700;
  letter-spacing:-.021em;
  line-height:1;
  color:#14151a;
  text-decoration:none;
  white-space:nowrap;
  transition:opacity .18s ease;
}
.dl-mark:hover{ color:#14151a; opacity:.7 }

.dl-nav-links{ display:flex; align-items:center; gap:2px }
.dl-nav-link{
  font-size: 14.5px;
  font-weight: 450;
  color: rgba(20,21,26,.72);
  padding: 8px 13px;
  border-radius: 999px;
  white-space: nowrap;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.dl-nav-link:hover,
.dl-nav-link[aria-current]{ color:#14151a; background: rgba(20,21,26,.055) }

.dl-nav-cta{
  font-size: 14.5px;
  font-weight: 500;
  background: #14151a;
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  white-space: nowrap;
  margin-left: 10px;
  text-decoration: none;
  transition: background .2s ease, transform .2s cubic-bezier(.16,1,.3,1);
}
.dl-nav-cta:hover{ background:#2c2e37; color:#fff }
.dl-nav-cta:active{ transform:scale(.97) }

.dl-burger{ display:none }

/* scrolled state */
.dl-nav.is-scrolled{ top:10px; transform: translateX(-50%) scale(.965) }
.dl-nav.is-scrolled .dl-nav-pill{
  --dl-x: 18px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 1px 2px rgba(20,21,26,.06), 0 12px 34px rgba(20,21,26,.13);
}

/* ---------- mobile ---------- */
@media (max-width: 900px){
  .dl-nav{ left:12px; right:12px; transform:none; width:auto }
  .dl-nav.is-scrolled{ transform:none }
  .dl-nav-pill{ width:100%; justify-content:space-between; padding:7px 7px 7px 16px; gap:8px }
  .dl-nav-links{ display:none }
  .dl-mark{ margin-right:0 }
  .dl-nav-cta{ margin-left:0; padding:9px 15px; font-size:14px }

  .dl-burger{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:5px; width:40px; height:40px; border-radius:999px;
    background:none; border:none; cursor:pointer; flex-shrink:0;
  }
  .dl-burger span{
    display:block; width:17px; height:1.6px; border-radius:2px; background:#14151a;
    transition: transform .38s cubic-bezier(.16,1,.3,1), opacity .2s ease;
  }
  body.dl-menu-open .dl-burger span:nth-child(1){ transform: translateY(3.3px) rotate(45deg) }
  body.dl-menu-open .dl-burger span:nth-child(2){ opacity:0 }
  body.dl-menu-open .dl-burger span:nth-child(3){ transform: translateY(-3.3px) rotate(-45deg) }
}

.dl-scrim{
  position: fixed; inset:0; z-index:880;
  background: rgba(12,13,17,.32);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity:0; visibility:hidden;
  transition: opacity .34s cubic-bezier(.16,1,.3,1), visibility .34s;
}
body.dl-menu-open .dl-scrim{ opacity:1; visibility:visible }

.dl-panel{
  position: fixed; z-index:890;
  top: 80px; left:12px; right:12px;
  border-radius:30px; padding:10px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 20px 60px rgba(20,21,26,.18);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  opacity:0; visibility:hidden;
  transform: translateY(-14px) scale(.97);
  transform-origin: top center;
  transition: opacity .3s cubic-bezier(.16,1,.3,1), transform .38s cubic-bezier(.16,1,.3,1), visibility .38s;
  max-height: calc(100vh - 112px);
  overflow-y:auto;
}
body.dl-menu-open .dl-panel{ opacity:1; visibility:visible; transform:none }
@media (min-width: 901px){ .dl-panel, .dl-scrim{ display:none } }

.dl-panel a{
  display:flex; align-items:center; height:54px; padding:0 16px;
  border-radius:18px; font-size:17px; font-weight:450; letter-spacing:-.017em;
  color:#14151a; text-decoration:none;
  opacity:0; transform: translateY(7px);
  transition: opacity .3s cubic-bezier(.16,1,.3,1), transform .34s cubic-bezier(.16,1,.3,1), background .18s ease;
}
body.dl-menu-open .dl-panel a{ opacity:1; transform:none }
.dl-panel a:nth-child(1){ transition-delay:.03s }
.dl-panel a:nth-child(2){ transition-delay:.055s }
.dl-panel a:nth-child(3){ transition-delay:.08s }
.dl-panel a:nth-child(4){ transition-delay:.105s }
.dl-panel a:nth-child(5){ transition-delay:.13s }
.dl-panel a:nth-child(6){ transition-delay:.155s }
.dl-panel a:nth-child(7){ transition-delay:.18s }
.dl-panel a:active,
.dl-panel a[aria-current]{ background: rgba(20,21,26,.05) }

.dl-panel-cta{
  justify-content:center; margin-top:8px;
  background:#14151a; color:#fff !important; font-weight:500 !important; font-size:16px !important;
}
.dl-panel-foot{
  padding: 14px 16px 6px;
  border-top: 1px solid rgba(20,21,26,.07);
  font-size: 12.5px;
  color: rgba(20,21,26,.42);
}

.dl-nav :focus-visible,
.dl-panel :focus-visible{ outline: 2px solid #ff6a3d; outline-offset: 3px }

@media (prefers-reduced-motion: reduce){
  .dl-nav, .dl-nav-pill, .dl-panel, .dl-panel a, .dl-scrim, .dl-burger span{
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   FIXED-NAV CLEARANCE
   The old header was in normal flow on 15 pages and reserved
   80–156px. The pill is fixed and reserves nothing, so the
   first section of those pages carries the clearance instead.
   `--dl-clear` is set per page on the element itself; the
   default is the pill's occupied height (20px top + ~54px
   pill + 38px breathing room).
   ============================================================ */
.dl-nav-clear{ padding-top: var(--dl-clear, 112px) }

@media (max-width: 900px){
  .dl-nav-clear{ padding-top: var(--dl-clear-m, var(--dl-clear, 112px)) }
}