/* v34 (Oct 30, 2026): the site nav with ONE dropdown (How it works), shared by every page that has the site nav.
   Desktop (900 up): hover or keyboard focus opens the list under "How it works"; the top link itself goes to /how-it-works.
   Phones: the menu lists the How it works sections indented under it. Navy is never a button: selected tabs and pills are green. */
.navlinks [hidden], .navmenu [hidden] { display: none !important; }
.navdd { position: relative; display: flex; align-items: center; padding: 24px 0; margin: -24px 0; }
.navdd-top { display: inline-flex; align-items: center; gap: 6px; }
.navdd-chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.navdd-menu { display: none; position: absolute; left: -14px; top: calc(100% - 8px); min-width: 210px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 34px rgba(1, 34, 61, .12); z-index: 60; }
.navdd:hover .navdd-menu, .navdd:focus-within .navdd-menu { display: grid; }
.navdd:hover .navdd-chev, .navdd:focus-within .navdd-chev { transform: rotate(180deg); }
.navdd-menu a { display: block; padding: 10px 14px; border-radius: 10px; color: var(--navy); white-space: nowrap; font-weight: 600; }
.navdd-menu a:hover, .navdd-menu a:focus-visible { background: var(--soft); color: var(--navy); }
.navmenu nav { max-height: calc(100vh - 96px); overflow-y: auto; min-width: 220px; }
.navmenu nav .navsub { display: grid; margin: 0 0 6px 14px; padding-left: 6px; border-left: 2px solid var(--hair); }
.navmenu nav .navsub a { padding: 9px 12px; font-weight: 500; font-size: 14px; color: var(--slate); }
.ftabs button[aria-selected=true], .blog-cats a[aria-current="page"] { background: var(--green); border-color: var(--green); color: #fff; }
/* Kelly, Nov 1, 2026: clear space between "Blog" and "Try it for free"; the logo always reads as the way home. */
.logo { cursor: pointer; }
@media (min-width: 900px) { .navlinks { margin-right: 40px; } }