/* VÆST site navigation — the ONE copy.
   This block used to live twice: inline in home.html and again in css/site.css, each
   carrying a "mirrored in the other — edit both" note. They drifted, and the drift shipped
   a real bug: on /home the mobile menu panel rendered see-through, so the whole marketing
   site was unreachable from a phone. Every page with a nav links this file; neither
   home.html nor site.css defines these rules any more. */

/* ── nav ── */
.nav{position:sticky;top:0;z-index:80;background:rgba(5,5,6,.72);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
/* NOTE: these nav rules are mirrored inline in index.html — edit both */
.nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:72px}
.nav .brand{display:flex;align-items:center;gap:11px;justify-self:start}
.nav .mark{width:22px;height:22px;flex:none}
.wm{font-weight:700;font-size:16px;letter-spacing:.12em;white-space:nowrap;line-height:1}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2.4vw,28px);margin:0}
.nav-links a{font-size:14px;font-weight:500;color:var(--dim);transition:color .2s var(--ease);white-space:nowrap}
.nav-links a:hover,.nav-links a.on{color:var(--ink)}
.nav-right{justify-self:end;display:flex;align-items:center;gap:16px}
.nav-login{font-size:14px;font-weight:600;color:var(--ink);transition:opacity .2s var(--ease);white-space:nowrap}
.nav-login:hover{opacity:.62}
.nav-burger{display:none;background:none;border:none;color:var(--ink);padding:6px}
/* The primary CTA is solid, in the one accent. It used to be a looping four-stop gradient with a
   cold-blue glow — which made the nav button, the pricing CTA and the hero rule three competing
   accents on one screen, and put a cold light on the warmest moment in the funnel. The prism is
   now the atmosphere (the field behind the hero) and the accent word; the button is the accent. */
.btn-try{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#08080a;
  background:var(--or);padding:11px 22px;border-radius:100px;
  transition:transform .2s var(--ease),box-shadow .25s var(--ease);
  box-shadow:0 0 0 0 rgba(235,89,57,0)}
.btn-try:hover{transform:translateY(-1px);box-shadow:0 10px 34px rgba(235,89,57,.3)}
@media(max-width:820px){
  .nav-in{display:flex;align-items:center;gap:14px}
  .nav-links{position:fixed;inset:72px 0 auto 0;transform:translateY(-12px);flex-direction:column;align-items:flex-start;gap:0;margin:0;
    background:#0a0a0c;border-bottom:1px solid var(--line);padding:8px 0;opacity:0;visibility:hidden;transition:.24s var(--ease)}
  .nav.open .nav-links{transform:none;opacity:1;visibility:visible}
  .nav-links a{width:100%;padding:14px 44px;font-size:16px}
  .nav-burger{display:inline-flex}
  .nav-right{margin-left:auto;gap:12px}
  .nav-right .btn-try{padding:9px 14px}
  .nav-login{font-size:13.5px} /* keep the /app route reachable on phones */
  /* touch: the nav and the purchase CTAs need a real hit area (measured 16-34px at 320px) */
  @media(hover:none){
    .nav-login{padding:14px 4px}
    .nav-burger{padding:10px}
    .cmp-cta{padding-top:13px;padding-bottom:13px}
    .btn-try,.cmp-corner .ct{min-height:44px;display:inline-flex;align-items:center}
  }
}