/* =====================================================================
   SITE NAV — the landing page's header, for every other page.
   Copied from the solid (scrolled) state of #hd in index.html so the
   inner pages match the landing. Scoped under .site-hd so it cannot
   collide with app.css (.btn, .wrap, .nav-toggle, .top-nav).
   Items: logo · The Journey · FAQ · Sign in · Sign up. Nothing else.
   ===================================================================== */
.site-hd{
  --hd-dark:#102240; --hd-primary:#3070B6; --hd-text:#000;
  --hd-line:rgba(16,34,64,.14); --hd-ease:cubic-bezier(.22,1,.36,1);
  --hd-gut:clamp(20px, 5vw, 72px);
  position:sticky; top:0; z-index:70;
  background:#fff; box-shadow:0 1px 0 var(--hd-line);
  font-family:"Google Sans Flex","Google Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-variation-settings:"GRAD" 0,"ROND" 0,"wdth" 100;
}
.site-hd a{color:inherit; text-decoration:none}
.site-hd .hd-bar{position:relative; display:flex; align-items:center; gap:34px;
  width:min(1320px, 100% - var(--hd-gut)*2); margin-inline:auto; padding-block:18px}
.site-hd .hd-logo img{display:block; height:28px; width:auto}

.site-hd .hd-links{display:flex; gap:30px; margin-left:auto; font-size:.95rem; font-weight:500; color:var(--hd-text)}
.site-hd .hd-links a{position:relative; padding-block:10px}
.site-hd .hd-links a::after{content:""; position:absolute; left:0; right:100%; bottom:6px; height:1px;
  background:currentColor; transition:right .4s var(--hd-ease)}
.site-hd .hd-links a:hover::after, .site-hd .hd-links a:focus-visible::after,
.site-hd .hd-links a[aria-current="page"]::after{right:0}

.site-hd .hd-btns{display:flex; gap:12px; align-items:center}
.site-hd .hd-btn{display:inline-flex; align-items:center; justify-content:center;
  border:1px solid transparent; border-radius:999px; padding:13px 24px;
  font-weight:600; font-size:.9rem; letter-spacing:-.01em; white-space:nowrap;
  transition:transform .3s var(--hd-ease), background-color .3s var(--hd-ease), color .3s var(--hd-ease), border-color .3s var(--hd-ease)}
.site-hd .hd-btn:hover{transform:translateY(-2px)}
.site-hd .hd-btn-line{border-color:currentColor; color:var(--hd-text)}
.site-hd .hd-btn-line:hover{background:var(--hd-dark); border-color:var(--hd-dark); color:#fff}
.site-hd .hd-btn-primary{background:var(--hd-primary); color:#fff}
.site-hd .hd-btn-primary:hover{background:var(--hd-dark)}
.site-hd :where(a,button):focus-visible{outline:3px solid var(--hd-primary); outline-offset:3px; border-radius:4px}

.site-hd .hd-toggle{display:none; margin-left:auto; background:none; border:0; padding:10px; cursor:pointer}
.site-hd .hd-toggle span{display:block; width:22px; height:2px; background:var(--hd-text); margin:5px 0}

@media (max-width:980px){
  .site-hd .hd-bar{gap:16px}
  .site-hd .hd-toggle{display:block}
  .site-hd .hd-btns .hd-btn-line{display:none}
  .site-hd .hd-links{display:none; position:absolute; top:100%; left:calc(var(--hd-gut) * -1); right:calc(var(--hd-gut) * -1);
    flex-direction:column; gap:0; background:#fff; padding:12px var(--hd-gut) 20px;
    box-shadow:0 20px 40px -30px rgba(16,34,64,.5)}
  .site-hd.is-open .hd-links{display:flex}
}