/* Header-nav dropdown panels (owner request 2026-08-19, styled after the 21st.dev
   dropdown-navigation reference: hover/focus panels, item title + small description,
   rotating caret). Shared by every full-chrome page — scripts/site-nav.test.ts pins
   the link tag and the .nav-drop structure on all of them.
   Hover opens on pointer devices; :focus-within opens for keyboard users; on touch the
   trigger is a plain link (panels are hidden under 900px), so nothing dead-ends. */
/* The header links never wrap: a wrapped "How it works" landed on top of the logo
   (owner screenshot, 2026-08-19). Fit comes from the nav's own item count, not wrapping. */
.nav-links{flex-wrap:nowrap}
.nav-links a{white-space:nowrap}
.nav-drop{position:relative;display:inline-flex}
.nav-drop>a{display:inline-flex;align-items:center;gap:5px}
.nd-caret{transition:transform .18s ease;opacity:.7}
.nav-drop:hover>a .nd-caret,.nav-drop:focus-within>a .nd-caret{transform:rotate(180deg)}
.nav-drop-menu{position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%,6px);
  min-width:280px;padding:8px;background:#fff;border:1px solid rgba(15,35,70,.10);
  border-radius:14px;box-shadow:0 18px 50px -18px rgba(15,35,70,.28);
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:60}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
/* invisible bridge so the pointer can travel from trigger to panel without closing it */
.nav-drop-menu::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.nav-drop-menu a{display:block;padding:9px 12px;border-radius:9px;text-decoration:none;line-height:1.35}
.nav-drop-menu a:hover{background:rgba(47,111,237,.07)}
.nav-drop-menu a strong{display:block;font-size:13.5px;font-weight:600;color:#0c1524}
.nav-drop-menu a span{display:block;font-size:12px;color:#66718a;margin-top:1px}
/* The dropdowns added an item, so the old ~900px squeeze point is too late: at 1024px the
   CTA clipped off the right edge. Drop the hide-md links one step earlier instead. */
@media (max-width:1120px){.nav-links .hide-md{display:none}}
@media (max-width:900px){.nav-drop-menu{display:none}}
@media (prefers-reduced-motion:reduce){.nav-drop-menu,.nd-caret{transition:none}}