/* Shared home-page header for the landing and How It Works. */
.site-header{
  --header-unit:min(calc(100vw / 1536),calc(100dvh / 1024));
  height:calc(56 * var(--header-unit));
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 calc(44 * var(--header-unit)) 0 calc(54 * var(--header-unit));
  background:#fff;
  border-bottom:calc(1 * var(--header-unit)) solid var(--border,var(--line));
}
.site-header .brand{display:inline-flex;align-items:center;gap:calc(9 * var(--header-unit));flex:none;color:inherit;text-decoration:none}
.site-header .brand-logo{display:block;width:calc(38 * var(--header-unit));height:calc(38 * var(--header-unit));object-fit:contain}
.site-header .wordmark{font-size:calc(32 * var(--header-unit));line-height:1;font-weight:700;letter-spacing:calc(-1.1 * var(--header-unit))}
.site-header nav{display:flex;align-items:center;gap:calc(45.9264 * var(--header-unit));font-size:calc(17 * var(--header-unit));font-weight:500}
.site-header nav a,.site-header nav button{font:inherit;color:inherit;background:none;border:0;padding:calc(8 * var(--header-unit)) 0;text-decoration:none;white-space:nowrap;cursor:pointer}
.site-header nav .nav-link{width:calc(94 * var(--header-unit))}
.site-header nav .nav-team{width:calc(70 * var(--header-unit))}
.site-header nav .nav-call{display:inline-flex;align-items:center;justify-content:center;background:var(--action);color:#fff;border-radius:calc(8 * var(--header-unit));padding:calc(7 * var(--header-unit)) calc(20 * var(--header-unit));min-width:calc(127 * var(--header-unit));font-weight:600}
.site-header nav .nav-call:hover{background:var(--deep)}
.site-header a:focus-visible,.site-header button:focus-visible{outline:3px solid var(--action);outline-offset:5px}
@media(max-width:700px){
  .site-header{--header-unit:1px;height:auto;min-height:98px;display:grid;grid-template-columns:1fr;gap:6px;padding:8px 16px}
  .site-header .brand{gap:6px;justify-self:start}
  .site-header .brand-logo{width:30px;height:30px}
  .site-header .wordmark{font-size:27px}
  .site-header nav{width:100%;justify-content:space-between;gap:12px;font-size:13px}
  .site-header nav .nav-link,.site-header nav .nav-team{width:auto}
  .site-header nav .nav-call{min-width:0;min-height:34px;padding:8px 10px}
}
@media(max-width:370px){
  .site-header{padding-inline:12px}
  .site-header .brand{gap:4px}
  .site-header .brand-logo{width:24px;height:24px}
  .site-header .wordmark{font-size:22px}
  .site-header nav{gap:6px;font-size:12px}
  .site-header nav .nav-call{padding:8px 6px}
}