/* Menu card + rolling link text (2026-10-11, Danny's call; idea from a reference recording he sent).
   Phones: the menu opens as a card that grows down out of the floating bar, instead of a full-screen panel.
   Mouse/trackpad: menu links roll their text up on hover and a blue copy rolls in. Reduced motion: instant, no roll. */
.rl{display:inline-block;position:relative;overflow:hidden;vertical-align:top;height:1.3em;line-height:1.3em}
.rl>span{display:block;transition:transform .38s cubic-bezier(.2,.8,.2,1)}
.rl>span+span{position:absolute;left:0;top:100%;color:var(--signal,#2F4FE0)}
@media(hover:hover) and (pointer:fine){a:hover>.rl>span,a:focus-visible>.rl>span{transform:translateY(-100%)}}
@media(prefers-reduced-motion:reduce){.rl>span{transition:none}a:hover>.rl>span,a:focus-visible>.rl>span{transform:none}a:hover>.rl>span:first-child{color:var(--signal,#2F4FE0)}}

@media(max-width:768px){
  .nav-drawer{top:10px;left:0.75rem;right:0.75rem;bottom:auto;max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);
    padding:68px 1.25rem 1.1rem;border-radius:28px;background:#fff;border:1px solid var(--lineL,#E3E8F0);
    box-shadow:0 30px 70px -24px rgba(15,23,42,0.45);transform:none;opacity:1;visibility:hidden;z-index:99;
    clip-path:inset(0 0 calc(100% - 56px) 0 round 28px);
    transition:clip-path .45s cubic-bezier(.2,.8,.2,1),visibility 0s linear .45s}
  .nav-drawer.open{clip-path:inset(0 0 0 0 round 28px);visibility:visible;transition:clip-path .45s cubic-bezier(.2,.8,.2,1),visibility 0s}
  .nav-drawer>*{opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease}
  .nav-drawer.open>*{opacity:1;transform:none;transition:opacity .35s ease,transform .35s cubic-bezier(.2,.8,.2,1);transition-delay:calc(60ms + var(--i,0) * 22ms)}
  .nav-drawer a{padding:0.4rem 0.25rem;font-size:0.98rem}
  .nav-drawer .drawer-h{margin-top:0.45rem;padding-top:0.6rem}
  .nav-drawer .drawer-h:first-child{margin-top:0;padding-top:0.2rem}
  html.menu-open nav{background:#fff;box-shadow:none;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav-scrim{position:fixed;inset:0;z-index:98;background:rgba(15,23,42,0.28);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
  html.menu-open .nav-scrim{opacity:1;visibility:visible;transition:opacity .3s ease,visibility 0s}
}
@media(max-width:768px) and (prefers-reduced-motion:reduce){
  .nav-drawer,.nav-drawer.open,.nav-drawer>*,.nav-drawer.open>*,.nav-scrim,html.menu-open .nav-scrim{transition:none}
}

/* Desktop: the bar hugs its contents and sits centered instead of stretching ~1080px wide with a gap after the logo
   (Danny's call, 2026-10-11). Phones keep the full-width bar. */
@media(min-width:769px){
  nav{width:auto;max-width:calc(100% - 3rem);gap:2.25rem;padding-left:1.6rem}
  nav .nav-links{gap:1.6rem}
  nav .nav-cta{white-space:nowrap}
  nav .nav-links li{flex:none}
}

/* Desktop menu bar, Stripe-style (2026-10-15 prototype, Danny: "more tasteful and sophisticated"; he's fine with it
   no longer staying on screen). A flat full-width bar on a transparent ground with a hairline under it: logo and menu
   on the left, "Book a call" and "Get Started" on the right. It scrolls away with the page. Phones keep the floating
   bar, which stays on screen so the menu button is always in reach. */
@media(min-width:769px){
  nav{position:absolute!important;top:0!important;left:0!important;right:0!important;transform:none!important;width:auto!important;max-width:none!important;
    height:78px!important;border-radius:0!important;border:0!important;border-bottom:1px solid rgba(15,23,42,.08)!important;
    background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;
    padding:0 max(2rem,calc((100% - 1240px)/2))!important;gap:2.75rem!important;justify-content:flex-start!important}
  nav .logo-mark{height:32px}
  nav .nav-links{flex:1;gap:2rem!important}
  nav .nav-links > li > a:not(.nav-cta):not(.nav-call){font-size:.98rem;font-weight:600;color:#1E293B}
  nav .nav-links > .nav-call-li{margin-left:auto}
  nav .nav-call{display:inline-flex;align-items:center;height:42px;padding:0 1.15rem;border-radius:999px;border:1px solid rgba(15,23,42,.12);background:rgba(255,255,255,.85);color:var(--signal,#2F4FE0)!important;font-weight:600;font-size:.95rem;text-decoration:none;white-space:nowrap}
  nav .nav-cta{height:42px;display:inline-flex!important;align-items:center;padding:0 1.25rem!important;font-size:.95rem!important}
  nav .nav-links > .nav-call-li + li{margin-left:-1.35rem}
  @media(hover:hover){nav .nav-call:hover{border-color:var(--signal,#2F4FE0);background:#fff}}
  nav .nav-call:focus-visible{outline:3px solid rgba(47,79,224,.4);outline-offset:2px}
}
@media(max-width:1060px){nav .nav-call-li{display:none}}
@media(min-width:769px) and (max-width:1060px){nav .nav-links > li:last-child{margin-left:auto}nav{gap:1.75rem!important}nav .nav-links{gap:1.4rem!important}}
/* phone menu: a "Book a call" button at the top (the desktop bar has its own; the homepage hero's became "See pricing") */
.nav-drawer a.drawer-call{display:flex;align-items:center;justify-content:center;margin:0 0 .35rem;min-height:46px;border-radius:999px;border:1px solid rgba(47,79,224,.35);background:#fff;color:var(--signal,#2F4FE0)!important;font-weight:600;text-decoration:none}