/* Folium — shared header + footer ("site chrome"), loaded by every page.
   Uses the colour/typography variables each page already defines. */

/* one container for header, content and footer: --wrap-max + --gutter are defined once here */
:root{--wrap-max:1200px;--gutter:clamp(20px,5vw,72px);--nav-h:72px}
section[id],div[id="calendly-link"]{scroll-margin-top:calc(var(--nav-h) + 12px)}
html.menu-open,html.menu-open body{overflow:hidden}

/* ————— header ————— */
/* never put backdrop-filter / filter / transform on .hdr itself: it would become the containing block
   of the position:fixed mobile menu and collapse it to the header's height. Blur AND fill live on ::before
   (same layer, so the fill sits on top of the blurred backdrop); .hdr only sets --hdr-bg. */
.hdr{position:sticky;top:0;z-index:200;--hdr-bg:rgba(6,13,8,.82);--hdr-blur:14px;border-bottom:1px solid var(--line-soft);transition:border-color .4s}
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--hdr-bg);-webkit-backdrop-filter:blur(var(--hdr-blur));backdrop-filter:blur(var(--hdr-blur));transition:background-color .4s}
.home .hdr{position:fixed;left:0;right:0;--hdr-bg:rgba(6,13,8,0);--hdr-blur:0px;border-bottom-color:transparent}
.home .hdr.scrolled{--hdr-bg:rgba(6,13,8,.86);--hdr-blur:14px;border-bottom-color:var(--line-soft)}
.hdr.nav-open,.home .hdr.nav-open{--hdr-bg:#060D08;--hdr-blur:0px;border-bottom-color:var(--line-soft)}   /* open menu: one solid sheet */
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--nav-h);padding:0 var(--gutter);max-width:var(--wrap-max);margin:0 auto}
.brand{display:flex;align-items:center;height:44px}
.brand img{height:30px;width:auto;display:block}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-item{position:relative}
.nav-top{display:inline-flex;align-items:center;gap:7px;min-height:44px;font-family:var(--body);font-size:14px;font-weight:500;color:var(--fg-60);background:none;border:0;cursor:pointer;padding:0 2px;transition:color .3s}
.nav-top svg{width:10px;height:10px;transition:transform .35s var(--ease)}
.nav-top:hover,.nav-top[aria-current="page"],.has-menu:hover>.nav-top,.has-menu.open>.nav-top{color:var(--fg)}
.has-menu:hover>.nav-top svg,.has-menu.open>.nav-top svg{transform:rotate(180deg)}
.menu{position:absolute;top:100%;left:-18px;min-width:248px;padding:8px;display:flex;flex-direction:column;
  background:rgba(10,21,16,.97);border:1px solid var(--line);border-radius:16px;box-shadow:0 26px 60px -22px rgba(0,0,0,.8);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .35s var(--ease),visibility .25s}
.has-menu:hover>.menu,.has-menu:focus-within>.menu,.has-menu.open>.menu{opacity:1;visibility:visible;transform:none}
.menu a{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:44px;padding:0 14px;border-radius:10px;font-size:14px;font-weight:500;color:var(--fg-60);transition:background .25s,color .25s}
.menu a:hover{background:rgba(198,242,78,.09);color:var(--fg)}
.menu a span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--fg-40)}
.menu a span.new{color:var(--acid)}               /* highlight newly launched items */
.nav-actions{display:flex;gap:12px;align-items:center;margin-left:6px}
.nav-login{display:inline-flex;align-items:center;min-height:44px;font-size:13.5px;font-weight:600;color:var(--fg);border:1px solid rgba(234,242,228,.22);padding:0 18px;border-radius:100px;transition:border-color .3s,color .3s}
.nav-login:hover{border-color:var(--acid);color:var(--acid)}
.nav-cta{display:inline-flex;align-items:center;min-height:44px;font-size:13.5px;font-weight:600;color:var(--bg)!important;background:var(--acid);padding:0 20px;border-radius:100px;transition:transform .3s var(--ease),box-shadow .3s}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(198,242,78,.4)}
.nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:none;cursor:pointer;position:relative}
.nav-toggle span{position:absolute;left:12px;right:12px;height:1.5px;background:var(--fg);transition:transform .35s var(--ease),top .35s var(--ease)}
.nav-toggle span:first-child{top:17px}
.nav-toggle span:last-child{top:25px}
.nav-open .nav-toggle span:first-child{top:21px;transform:rotate(45deg)}
.nav-open .nav-toggle span:last-child{top:21px;transform:rotate(-45deg)}

@media(max-width:940px){
  .nav-toggle{display:block}
  .nav-links{position:fixed;top:var(--nav-h);left:0;right:0;height:calc(100dvh - var(--nav-h));flex-direction:column;align-items:stretch;gap:0;
    padding:4px var(--gutter) max(28px,env(safe-area-inset-bottom));background:#060D08;overflow:auto;-webkit-overflow-scrolling:touch;display:none}
  .nav-open .nav-links{display:flex}
  .nav-top{width:100%;justify-content:space-between;min-height:56px;font-size:17px;color:var(--fg);padding:0;border-bottom:1px solid var(--line-soft)}
  .nav-top svg{display:none}
  .menu{position:static;opacity:1;visibility:visible;transform:none;background:none;border:0;border-radius:0;box-shadow:none;padding:6px 0 10px;min-width:0;border-bottom:1px solid var(--line-soft)}
  .menu a{min-height:48px;padding:0 0 0 16px;font-size:16px;border-radius:0}
  .menu a span{font-size:11px}
  .nav-actions{margin:24px 0 0;flex-direction:column;align-items:stretch;gap:12px}
  .nav-login,.nav-cta{justify-content:center;min-height:52px;font-size:16px}
}

/* ————— footer ————— */
.site-foot{position:relative;z-index:3;background:var(--bg-2);border-top:1px solid var(--line-soft)}
.foot-grid{max-width:var(--wrap-max);margin:0 auto;padding:clamp(54px,8vh,90px) var(--gutter) clamp(40px,6vh,64px);
  display:grid;grid-template-columns:minmax(240px,1.5fr) repeat(4,minmax(0,1fr));gap:40px clamp(24px,3vw,56px)}
.foot-brand>a{display:inline-flex;align-items:center;min-height:44px;margin:-7px 0 13px}
.foot-brand img{height:30px;width:auto;display:block}
.foot-brand p{color:var(--fg-60);font-size:15px;line-height:1.6;max-width:34ch;margin-bottom:18px}
.foot-brand .mail{display:inline-flex;align-items:center;min-height:44px;color:var(--acid);font-size:15px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(198,242,78,.35)}
.foot-brand .mail:hover{text-decoration-color:var(--acid)}
.foot-col h4{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-40);margin-bottom:18px}
.foot-col a{display:flex;align-items:center;width:max-content;max-width:100%;min-width:44px;min-height:44px;font-size:15px;color:var(--fg-60);transition:color .3s,transform .3s var(--ease)}
.foot-col a:hover{color:var(--acid);transform:translateX(3px)}
.foot-bar{max-width:var(--wrap-max);margin:0 auto;border-top:1px solid var(--line-soft);padding:14px var(--gutter);
  display:flex;justify-content:space-between;align-items:center;gap:8px 24px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-40)}
.foot-bar span{display:flex;align-items:center;gap:24px;flex-wrap:wrap;min-height:44px}
.foot-bar a{display:inline-flex;align-items:center;min-height:44px}
.foot-bar a:hover{color:var(--acid)}
/* stacked footer (tablet + phone): one centred column of groups, same rule as the hero */
@media(max-width:900px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:40px clamp(20px,5vw,40px);text-align:center}
  .foot-brand{grid-column:1/-1;display:flex;flex-direction:column;align-items:center}
  .foot-brand p{margin-left:auto;margin-right:auto}
  .foot-col{display:flex;flex-direction:column;align-items:center}
  .foot-col a{justify-content:center}
  .foot-col a:hover{transform:none}
  .foot-bar{flex-direction:column;justify-content:center;gap:0;padding-top:18px;padding-bottom:18px;text-align:center}
  .foot-bar span{justify-content:center}
}
@media(max-width:480px){
  .foot-grid{grid-template-columns:1fr;gap:30px;padding-top:56px}
  .foot-col h4{margin-bottom:6px}
  .foot-bar{letter-spacing:.06em}
  .foot-bar span:first-child{min-height:32px}
}