/* ============================================================================
   BUILDERALL — SHARED HEADER + FOOTER
   ----------------------------------------------------------------------------
   Self-contained. Every token the header and footer need is declared on the
   two root elements below, so this block does not depend on the host page's
   design tokens and does not leak into the rest of the page.

   Drop-in checklist for a new page:
     1. paste this <style> block
     2. paste the .mm-overlay div + <header> markup as the first thing in <body>
     3. paste the <footer class="site panel"> markup as the last thing in <body>
     4. paste the <script> block before </body>
     5. make sure images/logo_horizontal.svg and images/Icon_white.svg exist

   Class names owned by this block — do not reuse them for page content:
     header  .nav  .nav-*  .brand  .mm-*  .mnav-*  .btn-sm
     footer.site  .f-top  .f-brand  .f-col  .f-bar  .socials  .panel
   ============================================================================ */

/* --- tokens, scoped to the two shared regions -------------------------- */
header,
footer.site{
  /* type */
  --font-display:"Nohemi","Helvetica Neue",Arial,sans-serif;
  --font-body:"Montserrat",Arial,sans-serif;
  --fs-button:15px;
  --lh-button:1;

  /* ink */
  --ink:#151515;
  --ink-soft:#323232;
  --white:#fff;

  /* blues — --blue paints the footer panel, so it must be the deep one */
  --blue:#075CE1;
  --blue-panel:#E6F3FF;
  --blue-pill:#C0DEFA;
  --peach-pill:#FFE3D5;

  /* metrics */
  --nav:1140px;
  --col:1140px;
  --panel:1813px;
  --r:20px;
  --r-lg:28px;
  --r-pill:100px;

  /* gradient hairlines for the nav pill and the mega-menu panel */
  --line-nav:linear-gradient(90deg,#C9E2FB 0%,#FFFEFD 50%,#FFE3D5 100%);
  --line-mm:linear-gradient(122deg,#BCD9FA 0%,#FFFFFF 46%,#FFCFAF 100%);
}

/* --- the rounded inset panel the footer sits in ------------------------ */
/* Scoped to the footer itself rather than to `.panel`, because some pages
   already use a bare `panel` class on their own sections (the support page
   uses it on .panel.explore and .panel.recover). Targeting footer.site
   keeps the rule from touching anything the host page owns. */
footer.site{position:relative;z-index:1;width:min(100% - 32px,var(--panel));margin-inline:auto;border-radius:var(--r-lg)}

/* --- buttons -----------------------------------------------------------
   Fully specified rather than inheriting the host page's .btn, so the nav
   CTA looks the same regardless of what .btn means on the surrounding page.
   min-height is pinned because many pages set .btn{min-height:48px}, which
   would otherwise win over the 36px height. */
header .btn,
footer.site .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;min-height:0;min-width:0;padding:0 26px;
  background:var(--ink);color:var(--white);
  border:0;border-radius:var(--r-pill);
  font-family:var(--font-body);font-weight:600;
  font-size:var(--fs-button);line-height:var(--lh-button);
  text-align:center;text-decoration:none;cursor:pointer;
  transition:transform .16s ease,background .16s ease;
}
header .btn:hover,
footer.site .btn:hover{background:#000;transform:translateY(-1px)}

.btn-sm{height:36px;min-height:36px;padding:0 20px;font-size:14px}
header .btn-sm,
footer.site .btn-sm{height:36px;min-height:36px;min-width:0;padding:0 20px;font-size:14px}

/* --- header, nav pill and mega menu ------------------------------------ */
/* position:relative is required — without it the z-index below is ignored
   and the fixed .mm-overlay paints on top of the nav, swallowing clicks. */
header{position:relative;padding-top:clamp(18px,3.2vw,34px);z-index:60;}
.nav{
  width:min(100% - 32px,var(--nav));margin-inline:auto;min-height:56px;
  background:linear-gradient(90deg,rgba(242,246,251,.5) 0%,rgba(251,251,251,.5) 50%,rgba(251,242,237,.5) 100%);
  border:1px solid #C9E2FB;border-radius:100px;
  box-shadow:inset 0 0 2px rgba(255,255,255,.25),0 6px 8px rgba(224,224,224,.25);
  backdrop-filter:blur(20px);
  display:flex;align-items:center;gap:18px;padding:8px 8px 8px 24px;
  position:relative;
}
.nav .brand{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav .brand img{height:26px;width:auto;background:none}
.nav-links{display:flex;align-items:center;gap:6px;margin-inline:auto}
.nav-links > li > a{
  font-family:var(--font-body);font-weight:500;font-size:14px;color:var(--ink-soft);
  display:inline-flex;align-items:center;gap:4px;padding:10px 12px;border-radius:10px;
  text-decoration:none !important;border:none !important;
}
.nav-links > li > a:hover{color:#000}
.nav-right{display:flex;align-items:center;gap:16px;flex-shrink:0}
.nav-right .login{
  font-family:var(--font-body);font-weight:500;font-size:14px;color:var(--ink-soft);
  display:inline-flex;align-items:center;gap:3px;text-decoration:underline;text-underline-offset:3px;
}
.nav-toggle{display:none;width:40px;height:40px;align-items:center;justify-content:center;border-radius:100px}

.nav-item{position:static}
.nav-trigger{
  position:relative;display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-body);font-weight:500;font-size:14px;line-height:1;
  color:var(--ink-soft);padding:10px 12px;border-radius:10px;
  transition:background .16s ease,color .16s ease;
  border:none !important;background:transparent;text-decoration:none !important;
}
.nav-trigger:hover{color:#000}
.nav-trigger .chev{flex-shrink:0;transition:transform .2s ease}
.nav-item.is-open > .nav-trigger{background:var(--blue-panel);color:var(--blue)}
.nav-item.is-open > .nav-trigger .chev{transform:rotate(180deg)}
.nav-item.is-open > .nav-trigger::after{
  content:"";position:absolute;left:10px;right:10px;bottom:0;
  height:2px;border-radius:2px 2px 0 0;background:var(--blue);
}
.mm-overlay{
  position:fixed;inset:0;z-index:40;
  background:rgba(10,20,40,.16);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
body.mm-open .mm-overlay{opacity:1;pointer-events:auto}
body.mm-open .nav{
  background:linear-gradient(90deg,rgba(242,246,251,.88) 0%,rgba(251,251,251,.88) 50%,rgba(251,242,237,.88) 100%);
}
.mnav-lock{overflow:hidden}
.mm-panel{
  position:absolute;z-index:5;top:calc(100% + 12px);left:50%;
  width:min(100vw - 40px,1380px);
  border:1px solid transparent;border-radius:22px;
  background:linear-gradient(118deg,rgba(255,255,255,.95) 0%,rgba(250,252,255,.9) 44%,rgba(255,247,241,.93) 100%);
  -webkit-backdrop-filter:blur(26px) saturate(1.35);backdrop-filter:blur(26px) saturate(1.35);
  box-shadow:0 30px 70px rgba(16,40,86,.13),0 4px 14px rgba(16,40,86,.05);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateX(-50%) translateY(-8px);
  transition:opacity .2s ease,transform .22s cubic-bezier(.22,1,.36,1),visibility .22s linear;
}
.nav-item.is-open .mm-panel{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.mm-panel::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.mm-inner{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(288px,25%,352px);
  column-gap:clamp(16px,1.8vw,28px);row-gap:12px;
  padding:clamp(18px,1.8vw,26px);
  max-height:calc(100vh - 130px);max-height:calc(100dvh - 130px);
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
}
.mm-main{display:flex;flex-direction:column;min-width:0}
.mm-groups{display:grid;gap:clamp(12px,1.4vw,24px);flex:1 1 auto}
.mm-groups-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mm-groups-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mm-group{min-width:0}
.mm-group + .mm-group{
  border-left:1px solid rgba(18,54,110,.08);
  padding-left:clamp(12px,1.4vw,24px);
}
.mm-label{
  font-family:var(--font-body);font-weight:600;font-size:12px;line-height:1.33;
  letter-spacing:.12em;text-transform:uppercase;color:var(--blue);
  padding:0 8px;margin-bottom:10px;
}
.mm-list{display:flex;flex-direction:column;gap:2px}
.nav-links .mm-link{
  display:flex;align-items:flex-start;gap:12px;
  padding:8px;border-radius:12px;transition:background .16s ease;
  text-decoration:none !important;
}
.nav-links .mm-link:hover{background:rgba(7,92,225,.06)}
.mm-ico{
  flex:0 0 44px;width:44px;height:44px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:var(--blue-panel);color:var(--blue);transition:transform .16s ease;
}
.mm-ico.peach{background:#FFF1E7;color:#F2701B}
.mm-ico svg{
  width:22px;height:22px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.mm-link:hover .mm-ico{transform:translateX(2px)}
.mm-txt{min-width:0;padding-top:2px}
.mm-name{display:block;font-family:var(--font-body);font-weight:600;font-size:14.5px;line-height:1.34;color:var(--ink)}
.mm-desc{display:block;font-family:var(--font-body);font-weight:400;font-size:12.5px;line-height:1.36;color:#5D6B7F;margin-top:2px}
.mm-foot{margin-top:clamp(12px,1.2vw,18px);padding-top:14px;border-top:1px solid rgba(18,54,110,.09)}
.nav-links .mm-all{
  display:inline-flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;
  font-family:var(--font-body);font-weight:600;font-size:14px;line-height:1.4;color:var(--blue);
  text-decoration:none !important;
}
.mm-all svg{
  width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .16s ease;
}
.nav-links .mm-all:hover{background:rgba(7,92,225,.06)}
.mm-all:hover svg{transform:translateX(3px)}
.mm-promo{
  display:flex;flex-direction:column;min-width:0;padding:20px;border-radius:18px;
  background:linear-gradient(168deg,rgba(238,246,255,.92) 0%,rgba(214,233,255,.86) 100%);
  border:1px solid rgba(120,175,250,.34);
}
.mm-pill{
  align-self:flex-start;background:var(--blue-pill);border:1px solid #87B6FD;color:#064BB8;
  padding:5px 14px;border-radius:100px;font-family:var(--font-body);font-weight:600;
  font-size:11px;line-height:1.4;letter-spacing:.1em;
}
.mm-promo.peach .mm-pill{background:var(--peach-pill);border-color:#FB9843;color:#A34A05}
.mm-promo-title{font-family:var(--font-display);font-weight:500;font-size:24px;line-height:1.2;color:var(--ink);margin-top:14px}
.mm-promo-desc{font-family:var(--font-body);font-weight:400;font-size:13.5px;line-height:1.5;color:#4E5D72;margin-top:8px}
.mm-art{margin:12px 0 16px;flex:1 1 auto;display:flex;align-items:center;justify-content:center}
.mm-art svg{width:100%;height:auto;max-height:210px;background:none}
.nav-links .mm-cta{width:100%;height:44px;padding:0 18px;font-size:14px;gap:8px;text-decoration:none !important;}
.mm-cta svg{
  width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .16s ease;
}
.nav-links .mm-cta:hover svg{transform:translateX(3px)}
.mnav-actions{display:none}
.nav-toggle .ico-close{display:none}

@media (min-width:901px) and (max-width:1180px){
  .mm-groups-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mm-inner{grid-template-columns:minmax(0,1fr) 250px}
  .mm-promo{padding:16px}
  .mm-promo-title{font-size:21px}
  .mm-art svg{max-height:120px}
}
@media (min-width:901px) and (max-width:1000px){
  .nav-links{gap:0}
  .nav-trigger{padding:10px 8px}
  .mm-inner{grid-template-columns:minmax(0,1fr)}
  .mm-promo{flex-direction:row;align-items:center;flex-wrap:wrap;gap:0 18px}
  .mm-promo .mm-pill{flex:0 0 100%}
  .mm-promo-title{flex:1 1 260px}
  .mm-promo-desc{flex:1 1 260px}
  .mm-art{display:none}
  .nav-links .mm-cta{width:auto;flex:0 0 auto;margin-top:12px}
}
@media (max-width:900px){
  .nav-links{
    position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:6;
    flex-direction:column;align-items:stretch;gap:2px;margin:0;padding:10px;
    background:linear-gradient(160deg,rgba(255,255,255,.98) 0%,rgba(255,250,246,.98) 100%);
    -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
    border:1px solid #E3EDF9;border-radius:20px;
    box-shadow:0 24px 50px rgba(16,40,86,.14);
    max-height:calc(100vh - 118px);max-height:calc(100dvh - 118px);
    overflow-y:auto;overscroll-behavior:contain;
  }
  .nav.is-mnav-open .nav-links{display:flex}
  .nav-item{width:100%}
  .nav-trigger{width:100%;justify-content:space-between;padding:13px 14px;font-size:15px;border-radius:12px}
  .nav-item.is-open > .nav-trigger::after{display:none}
  .nav-links > li:not(.mnav-actions) > a{
    display:flex;align-items:center;width:100%;
    padding:13px 14px;border-radius:12px;font-size:15px;
  }
  .nav-links > li:not(.mnav-actions) > a:hover{background:rgba(7,92,225,.06)}
  .mm-panel{
    position:static;display:none;width:auto;
    opacity:1;visibility:visible;pointer-events:auto;transform:none;
    background:none;border:0;border-radius:0;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  .mm-panel::before,.mm-panel::after{display:none}
  .mm-brand{display:none}
  .nav-item.is-open .mm-panel{display:block;transform:none}
  .mm-inner{grid-template-columns:minmax(0,1fr);gap:14px;padding:2px 0 10px;max-height:none;overflow:visible}
  .mm-groups,.mm-groups-2,.mm-groups-3{grid-template-columns:minmax(0,1fr);gap:14px}
  .mm-group + .mm-group{border-left:0;padding-left:0;border-top:1px solid rgba(18,54,110,.08);padding-top:12px}
  .mm-promo{padding:16px}
  .mm-art svg{max-height:150px}
  /* Login is the only thing on this row now — the "Get started free" that
     used to sit beside it was a second copy of the button already in the
     bar above, which is visible the whole time the drawer is open. A lone
     link left-aligned under a full-width list reads as stranded, so it is
     centred. */
  .mnav-actions{
    display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
    margin-top:6px;padding:14px 14px 8px;border-top:1px solid rgba(18,54,110,.09);
  }
  .mnav-actions .login{
    display:inline-flex;align-items:center;gap:3px;
    font-family:var(--font-body);font-weight:500;font-size:15px;color:var(--ink-soft);
    text-decoration:underline;text-underline-offset:3px;
  }
  .nav.is-mnav-open .nav-toggle .ico-open{display:none}
  .nav.is-mnav-open .nav-toggle .ico-close{display:inline}
}
.nav{position:relative}
.nav,.mm-panel{border-color:transparent;background-clip:padding-box}
.nav::after,.mm-panel::after{
  content:"";position:absolute;inset:-1px;
  border-radius:inherit;padding:1px;
  background:var(--edge,var(--line-nav));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;z-index:2;
}
.nav{--edge:var(--line-nav)}
.mm-panel{--edge:var(--line-mm)}

/* ============================================================
   FOOTER (Exact match to home layout)
   ============================================================ */
footer.site{
  margin-top:clamp(28px,3vw,44px);margin-bottom:clamp(28px,3vw,44px);
  background:var(--blue);color:#fff;
  padding:clamp(44px,4.6vw,78px) clamp(24px,3.4vw,64px) clamp(30px,3.6vw,58px);
}
.f-top{
  width:min(100%,var(--col));margin-inline:auto;
  display:grid;
  grid-template-columns:88px 1.08fr .89fr 1.11fr .92fr .92fr 1.08fr;
  gap:28px 12px;align-items:start;
}
.f-brand img{width:50px;height:auto;background:none}
.f-col h3{
  font-family:var(--font-body);font-weight:500;font-size:14px;line-height:1.43;
  color:#85C2FD;margin-bottom:18px;
}
.f-col ul{display:flex;flex-direction:column;gap:9px}
.f-col a{
  font-family:var(--font-body);font-weight:500;font-size:13px;line-height:1.46;
  color:#fff;text-decoration:none;
}
.f-col a:hover{text-decoration:underline;text-underline-offset:3px}
.f-bar{
  width:min(100%,var(--col));margin:clamp(34px,3.8vw,62px) auto 0;
  background:var(--blue-pill);color:var(--ink);border-radius:var(--r);
  padding:16px 30px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-family:var(--font-body);font-weight:500;font-size:14px;line-height:1.43;flex-wrap:wrap;
}
.f-bar .socials{display:flex;align-items:center;gap:6px}
.f-bar .socials a{display:inline-flex}
.f-bar .socials svg [fill]{fill:var(--blue)}
.f-bar .socials svg [stroke]{stroke:var(--blue)}

@media (max-width:1080px){
  .f-top{grid-template-columns:repeat(3,minmax(0,1fr))}
  .f-brand{grid-column:1/-1}
}
@media (max-width:640px){
  .f-top{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* --- collapse the nav below 900px -------------------------------------
   Declared last on purpose. The header block above styles .nav-links as
   the open drawer; this switches it off by default so the hamburger takes
   over. .nav.is-mnav-open .nav-links (0,3,0) still beats .nav-links (0,1,0),
   so tapping the button re-opens it. */
@media (max-width:900px){
  .nav-links{display:none}
  .nav-toggle{display:inline-flex}
  .nav{padding-left:18px}
  /* .nav-links carries margin-inline:auto, and that is what pushes the
     actions to the far end of the pill on desktop. Here the drawer is
     display:none, so that spacer disappears and .brand + .nav-right
     collapsed against the left edge with the rest of the pill left empty.
     Put the gap back on the element that still exists. */
  .nav-right{margin-left:auto}
}
@media (max-width:560px){
  .nav-right{gap:8px}
  .nav-right .login{display:none}
  .nav-right .btn-sm{padding:0 14px;font-size:14px}
}

/* ============================================================================
   POINTER BACKGROUND — the home page's dot grid, shared with every page.

   At rest it is the same 22px grid of #E3E3E8 dots the pages already draw on
   <body>; under the pointer a pool of darker dots follows the cursor.

   Two things make it cheap. The pool is a FIXED-SIZE patch moved by transform
   only — compositor work, no repaint — rather than a full-screen layer whose
   mask position changes every frame. And its size, offset and position are
   exact multiples of the grid pitch, with the script snapping to that pitch,
   so its dots always land on the resting grid instead of shimmering between.

   The resting grid is re-drawn here, fixed to the viewport, and the body's own
   copy is switched off (.has-bg-pointer). That is not decoration: body's grid
   scrolls with the page while this pool is position:fixed, so the two would
   drift apart the moment you scrolled. Both fixed, they stay locked together.

   Class names are deliberately NOT .canvas-bg/.dots — nine pages already ship
   their own effect under those names, and this sheet loads after theirs.
   ========================================================================== */
.bg-pointer{
  --bgp-dot:#E3E3E8;   /* resting dot, matches the body grid it replaces */
  --bgp-hot:#8F8F99;   /* the same dot, darkened under the pointer */
  --bgp-size:22px;     /* grid pitch, also read by the script */
  --bgp-r:1.15px;      /* dot radius, shared by both layers */
  position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
}
.bg-pointer__dots{
  position:absolute;inset:0;
  background-image:radial-gradient(circle,var(--bgp-dot) var(--bgp-r),transparent var(--bgp-r));
  background-size:var(--bgp-size) var(--bgp-size);
}
.bg-pointer__hot{
  position:absolute;top:0;left:0;
  width:616px;height:616px;margin:-308px 0 0 -308px;   /* 28 x 22px */
  opacity:0;transition:opacity .35s ease;
  background-image:radial-gradient(circle,var(--bgp-hot) var(--bgp-r),transparent var(--bgp-r));
  background-size:var(--bgp-size) var(--bgp-size);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0%,rgba(0,0,0,.55) 42%,transparent 72%);
          mask-image:radial-gradient(circle at 50% 50%,#000 0%,rgba(0,0,0,.55) 42%,transparent 72%);
  transform:translate3d(var(--bgp-x,-999px),var(--bgp-y,-999px),0);
  will-change:transform;
}
body.pointer-live .bg-pointer__hot{opacity:1}
/* Touch devices have no hovering pointer to follow. */
@media (hover:none){.bg-pointer__hot{display:none}}
/* The fixed layer above replaces the scrolling one the page sheet draws. */
body.has-bg-pointer{background-image:none}

/* ============================================================================
   UX LAYER
   ----------------------------------------------------------------------------
   Additive only — nothing above this line is modified. Four things the nav was
   missing:

     1. CURRENT PAGE. 63 pages and no way to tell which one you are on. The
        state is set by header-footer.js from location.pathname, so no page
        markup changes and no per-page class to keep in sync.
     2. DOCKED HEADER. The nav used to scroll away for good; on the long pages
        the only way back to it was scrolling to the top. It now sticks, and
        gets out of the way again when you scroll down.
     3. FOCUS RINGS. The triggers, the burger and the mega-menu links had no
        visible focus state of their own — the page-level outline lands square
        on a pill-shaped control.
     4. DRAWER. Scroll lock and sizing across the whole drawer range, not just
        the phone slice of it.

   Class names this block adds: .is-current .is-docked .hf-hide .hf-lock
   ============================================================================ */

/* --- 1. current page ----------------------------------------------------- */
/* Deliberately NOT the same treatment as .is-open. "Open" is a thing you are
   doing right now; "current" is a thing that stays true while you read the
   page. Open keeps its filled pill + full-width bar; current gets a short
   centred underscore, so a menu that is both reads correctly. */
.nav-links > li > a[aria-current="page"]{color:var(--blue);font-weight:600}
.nav-item.is-current > .nav-trigger{color:var(--blue)}
.nav-links > li > a[aria-current="page"]::after,
.nav-item.is-current > .nav-trigger::before{
  content:"";position:absolute;bottom:3px;left:50%;transform:translateX(-50%);
  width:16px;height:2px;border-radius:2px;background:currentColor;
}
.nav-links > li > a[aria-current="page"]{position:relative}
/* While the panel is open its own bar takes over, so the dash would sit on
   top of it. */
.nav-item.is-open.is-current > .nav-trigger::before{opacity:0}

/* The entry inside the panel for the page you are on. */
.nav-links .mm-link[aria-current="page"]{
  background:rgba(7,92,225,.08);
  box-shadow:inset 2px 0 0 var(--blue);
}
.nav-links .mm-link[aria-current="page"] .mm-name{color:var(--blue)}
.nav-links .mm-all[aria-current="page"]{background:rgba(7,92,225,.09)}

/* --- 2. docked header ---------------------------------------------------- */
/* sticky rather than fixed: the header keeps its place in the flow, so there
   is no spacer to insert and no jump at the moment it docks. */
header{position:sticky;top:0;will-change:transform;
  transition:transform .28s cubic-bezier(.22,1,.36,1)}
header.hf-hide{transform:translateY(calc(-100% - 8px))}

/* Undocked the header is transparent on purpose — the hero reads through it.
   Docked, page content would otherwise run through the gap above the pill, so
   a short veil fades in behind it. */
header::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.80) 0%,rgba(255,255,255,.55) 62%,rgba(255,255,255,0) 100%);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 62%,transparent 100%);
  opacity:0;transition:opacity .22s ease;
}
header.is-docked::before{opacity:1}
header.is-docked .nav{box-shadow:inset 0 0 2px rgba(255,255,255,.25),0 10px 24px rgba(16,40,86,.10)}

/* An in-page anchor must not land underneath the docked header. Set here so
   the pages that never declared it get the right value; the ones that already
   declare their own (120px, which also clears it) load later and keep theirs. */
html{scroll-padding-top:112px}

/* Motion off: keep the header pinned and skip the slide entirely. Hiding a
   header by teleport is worse than not hiding it. */
@media (prefers-reduced-motion:reduce){
  header{transition:none}
  header.hf-hide{transform:none}
}

/* --- 3. focus rings ------------------------------------------------------ */
/* Matched to each control's own radius, and offset so the ring never sits on
   the glyph. :focus-visible only — a mouse click on a trigger must not leave
   a ring behind on the nav. */
.nav-trigger:focus-visible,
.nav-links > li > a:focus-visible,
.nav-right .login:focus-visible,
.mnav-actions .login:focus-visible,
.nav .brand:focus-visible,
.nav-toggle:focus-visible,
.nav-links .mm-link:focus-visible,
.nav-links .mm-all:focus-visible,
.nav-links .mm-cta:focus-visible,
header .btn:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
  border-radius:10px;
}
.nav-links .mm-link:focus-visible{border-radius:12px}
.nav .brand:focus-visible,
.nav-toggle:focus-visible,
header .btn:focus-visible{border-radius:var(--r-pill)}

/* --- 4. drawer ----------------------------------------------------------- */
/* The lock used to apply below 700px only, so between 701 and 900 — where the
   drawer is already the navigation — the page scrolled away behind it. */
.hf-lock{overflow:hidden}
/* The compensation keeps the page from jumping sideways by the width of the
   scrollbar the lock removes. */
body.hf-lock{padding-right:var(--hf-sbw,0px)}

@media (max-width:900px){
  /* A tap target under 44px is a miss waiting to happen; the burger was 40. */
  .nav-toggle{width:44px;height:44px}
  /* Chevron direction is the only cue that a row expands, so make it read. */
  .nav-item.is-open > .nav-trigger{background:rgba(7,92,225,.07);color:var(--blue)}
  .nav-item.is-open > .nav-trigger .chev{transform:rotate(180deg)}
  /* The drawer opens with every section shut, so the row itself has to say
     which one holds the page you are on: a dot beside the chevron, on a row
     that is already blue. A centred underscore is a desktop cue — under a
     full-width row it reads as a stray mark rather than a marker. */
  .nav-item.is-current > .nav-trigger::before{
    left:auto;right:38px;bottom:auto;top:50%;
    width:6px;height:6px;border-radius:50%;transform:translateY(-50%);
  }
  /* Expanding that section must not take the marker away — the open state
     draws no bar of its own down here, so there is nothing to take over. */
  .nav-item.is-open.is-current > .nav-trigger::before{opacity:1}
}

/* ============================================================================
   SELECTION STATES — translucent, so the frosted nav reads through them
   ----------------------------------------------------------------------------
   The open trigger used a solid --blue-panel (#E6F3FF) on a pill that is only
   50% opaque, so the selected item showed up as a flat, pasted-on block. Every
   header state is now a tint of --blue at a low alpha instead, and text
   selection is tinted per region (the default blue vanished on the footer).
   ============================================================================ */
header,
footer.site{-webkit-tap-highlight-color:transparent}

/* one ladder of tints: hover < current < open */
.nav-trigger:hover,
.nav-links > li > a:hover{background:rgba(7,92,225,.05)}
.nav-item.is-open > .nav-trigger,
.nav-item.is-open > .nav-trigger:hover{background:rgba(7,92,225,.10);color:var(--blue)}
.nav-trigger:active,
.nav-links > li > a:active,
.nav-links .mm-link:active,
.nav-links .mm-all:active{background:rgba(7,92,225,.12)}

/* icon tiles inside the panel: tinted, not painted */
.mm-ico{background:rgba(7,92,225,.10)}
.mm-ico.peach{background:rgba(242,112,27,.12)}

@media (max-width:900px){
  .nav-item.is-open > .nav-trigger,
  .nav-item.is-open > .nav-trigger:hover{background:rgba(7,92,225,.08)}
}

/* text selection */
header ::selection{background:rgba(7,92,225,.18)}
footer.site ::selection{background:rgba(255,255,255,.30);color:#fff}
footer.site .f-bar ::selection{background:rgba(7,92,225,.22);color:var(--ink)}

/* ============================================================================
   LANGUAGE SWITCHER
   ----------------------------------------------------------------------------
   Desktop: a compact globe + code button just before Login, opening a small
   menu. Drawer (≤900px): the same three choices as a row above Login.
   The markup is written into every page by i18n/build.py.
   ============================================================================ */
.lang-switch{position:relative;flex-shrink:0}
.lang-switch__btn{
  display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 8px;
  font-family:var(--font-body);font-weight:500;font-size:14px;line-height:1;color:var(--ink-soft);
  background:transparent;border:0;border-radius:var(--r-pill);cursor:pointer;
  transition:background .16s ease,color .16s ease;
}
.lang-switch__btn:hover{color:#000;background:rgba(7,92,225,.05)}
.lang-switch__btn[aria-expanded="true"]{color:var(--blue);background:rgba(7,92,225,.10)}
.lang-switch__btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.lang-switch__globe{flex-shrink:0}
.lang-switch__chev{flex-shrink:0;transition:transform .2s ease}
.lang-switch__btn[aria-expanded="true"] .lang-switch__chev{transform:rotate(180deg)}
.lang-switch__menu{
  position:absolute;top:calc(100% + 10px);right:0;z-index:70;min-width:176px;
  margin:0;padding:6px;list-style:none;
  background:linear-gradient(160deg,rgba(255,255,255,.98) 0%,rgba(250,252,255,.97) 100%);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid #E3EDF9;border-radius:14px;box-shadow:0 18px 40px rgba(16,40,86,.14);
}
.lang-switch__menu[hidden]{display:none}
.lang-switch__menu a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 12px;border-radius:9px;
  font-family:var(--font-body);font-weight:500;font-size:14px;line-height:1.3;color:var(--ink);
  text-decoration:none !important;
}
.lang-switch__menu a:hover{background:rgba(7,92,225,.06)}
.lang-switch__menu a:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.lang-switch__menu a[aria-current="true"]{color:var(--blue);font-weight:600}
.lang-switch__menu a[aria-current="true"]::after{
  content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0;
}

.lang-row{display:none}
@media (max-width:900px){
  .nav-right .lang-switch{display:none}
  .lang-row{
    display:flex;align-items:center;justify-content:center;gap:4px;
    width:100%;padding-bottom:10px;color:var(--ink-soft);
  }
  .lang-row svg{margin-right:4px}
  .lang-row a{
    display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:36px;
    padding:0 10px;border-radius:var(--r-pill);
    font-family:var(--font-body);font-weight:600;font-size:14px;color:var(--ink-soft);
    text-decoration:none !important;
  }
  .lang-row a:hover{background:rgba(7,92,225,.06)}
  .lang-row a[aria-current="true"]{color:var(--blue);background:rgba(7,92,225,.10)}
  .lang-row a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
}
