/* ---------- The site menu on a phone (2026-10-11) ----------
 * Below 860px every marketing page hid .navlinks and put nothing in its
 * place, so a phone could reach no section but the calculator. One shared
 * file and one shared script now give every page the same "Menu" button and
 * panel. The links in the panel are copied from the page's own .navlinks, so
 * each page keeps one list of links and the phone can never drift from it.
 * Colours are the nav's own (port, never re-tune: rule 20). No new tokens.
 */
.sn-btn{display:none;align-items:center;gap:8px;flex:none;
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,.26);
  border-radius:var(--radius-control);font:inherit;font-size:14px;font-weight:500;
  padding:8px 12px;cursor:pointer;line-height:1}
.sn-btn:hover{border-color:rgba(255,255,255,.55)}
.sn-btn:focus-visible{outline:2px solid #818CF8;outline-offset:2px}
.sn-btn svg{width:16px;height:16px;flex:none}
.sn-btn .sn-x{display:none}
.sn-btn[aria-expanded="true"] .sn-bars{display:none}
.sn-btn[aria-expanded="true"] .sn-x{display:block}

.sn-panel{position:absolute;left:0;right:0;top:100%;z-index:60;
  background:#0B1220;border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 40px rgba(0,0,0,.35);padding:6px 0 18px}
.sn-panel[hidden]{display:none}
.sn-panel .sn-in{max-width:1080px;margin:0 auto;padding:0 24px}
.sn-panel a{display:flex;align-items:center;min-height:50px;color:#DCE3EE;text-decoration:none;
  font-size:17px;border-bottom:1px solid rgba(255,255,255,.08)}
.sn-panel a:hover,.sn-panel a[aria-current]{color:#fff}
/* The current page is marked with a word as well as weight (rule 4). */
.sn-panel a[aria-current]::after{content:"You are here";margin-left:auto;font-size:12px;
  letter-spacing:.04em;color:#8FA0B8}
.sn-panel a:focus-visible{outline:2px solid #818CF8;outline-offset:-2px}
.sn-price{color:#8FA0B8;font-size:13.5px;margin-top:14px}
@media(prefers-reduced-motion:no-preference){
  .sn-panel:not([hidden]){animation:snDrop .16s ease-out}
  @keyframes snDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
}

@media(max-width:860px){
  [data-sitenav] .navlinks{display:none}
  .sn-btn{display:inline-flex}
  /* The bar has to hold the mark, the free-model button and Menu on a 375px
     phone. Gaps tighten, and below 430px ", free" steps aside. */
  .navin{gap:12px}
  .navcta{gap:10px}
  .navcta .btn{white-space:nowrap}
}
@media(max-width:430px){
  .navcta .btn{padding:8px 12px;font-size:14px}
  .sn-short{display:none}
}